feat(panel): island, rail by day, companion mode beside a deep note, cached index and threads, obsidian skin for strips

src/tailwind.css

@@ -47,10 +47,21 @@
 
   --sidebar: var(--background-secondary);
   --sidebar-accent: var(--background-modifier-hover);
+  --rack: var(--background-secondary);
+  --strip: var(--background-primary);
+  --attention: oklch(0.72 0.16 72);
+  --attention-foreground: oklch(0.5 0.14 70);
+  --shadow-lift:
+    0 6px 16px -10px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.08);
+  --shadow-float:
+    0 20px 50px -20px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.1);
   --radius: 0.45rem;
 }
 
 .theme-dark .beaver-root {
+  --attention: oklch(0.8 0.15 75);
+  --attention-foreground: oklch(0.85 0.14 78);
+  --strip: var(--background-primary-alt);
   --note: oklch(0.84 0.14 88);
   --warn: oklch(0.8 0.13 75);
   --status-done: oklch(0.74 0.14 155);
@@ -75,6 +86,12 @@
   --color-note: var(--note);
   --color-sidebar: var(--sidebar);
   --color-sidebar-accent: var(--sidebar-accent);
+  --color-rack: var(--rack);
+  --color-strip: var(--strip);
+  --color-attention: var(--attention);
+  --color-attention-foreground: var(--attention-foreground);
+  --shadow-lift: var(--shadow-lift);
+  --shadow-float: var(--shadow-float);
 
   --color-status-new: var(--status-new);
   --color-status-done: var(--status-done);
@@ -178,7 +195,9 @@
 }
 
 .beaver-root.beaver-root button {
-  text-align: inherit;
+  justify-content: flex-start;
+  width: auto;
+  text-align: left;
   cursor: pointer;
 }
 
@@ -397,3 +416,67 @@
     font-weight: var(--font-medium, 500) !important;
   }
 }
+
+/* Strips and the island are buttons here; the reset above flattens buttons,
+   so the vocabulary is restated at the reset's own specificity. */
+.beaver-root.beaver-root .strip {
+  display: grid;
+  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
+  align-items: center;
+  justify-content: stretch;
+  justify-items: stretch;
+  width: 100%;
+  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
+  text-align: left;
+  background: var(--strip);
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+}
+.beaver-root.beaver-root .strip:hover,
+.beaver-root.beaver-root .strip:focus-visible {
+  background: var(--strip);
+  box-shadow: var(--shadow-lift);
+}
+.beaver-root.beaver-root .strip:first-child {
+  border-top-left-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
+}
+.beaver-root.beaver-root .strip:last-child {
+  border-bottom: 0;
+  border-bottom-right-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
+}
+.beaver-root.beaver-root .strip[aria-current="true"] {
+  background: color-mix(in oklab, var(--strip) 85%, var(--primary) 15%);
+}
+.beaver-root.beaver-root .strip[data-state="waiting"] {
+  box-shadow: var(--shadow-lift);
+  transform: translateX(0.5rem);
+}
+.beaver-root.beaver-root .strip.strip-child {
+  padding-left: 1.75rem;
+}
+.beaver-root.beaver-root button.island {
+  display: inline-flex;
+  gap: 0.625rem;
+  align-items: center;
+  height: 2.125rem;
+  padding: 0 0.875rem 0 0.75rem;
+  white-space: nowrap;
+  background: var(--strip);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+}
+.beaver-root.beaver-root button.island:hover {
+  background: var(--strip);
+}
+.beaver-root.beaver-root button.island:disabled {
+  opacity: 1;
+}
+.beaver-root.beaver-root .bay-rack {
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius-md) + 1px);
+}
+.beaver-root.beaver-root .strip-child::before {
+  left: 1.125rem;
+}