pi-weave 0.3.0 → 0.3.2

package/src/web/client/shell/theme.ts

@@ -1,3 +1,7 @@
+import { THEMES, ACCENTS } from "../../shared/themes";
+import type { PaletteChoice } from "../../shared/themes";
+import { WORKSPACE_CSS } from "./workspace.css";
+
 /**
  * The workspace stylesheet, and how it gets past the CSP
  * (weave-workspace §1.2, §5.2).
@@ -43,96 +47,19 @@
  * real `document` satisfies it structurally.
  */
 
-/**
- * The theme.
- *
- * Dark-first, per the task's brief and against `page.ts`'s light-first
- * fallback. That inversion is intentional and safe: this sheet is installed
- * *after* the server's, so its `:root` wins on equal specificity, and the
- * light branch is re-stated under `prefers-color-scheme: light`. The server
- * block keeps doing its real job — painting a correct background before this
- * bundle has parsed — while the palette a user actually looks at is decided
- * here.
- *
- * And since `shell/theme.model.ts`, the palette a user looks at is a
- * *choice*: `:root` carries dark, the light tokens sit in
- * {@link LIGHT_TOKENS} and are applied by a `data-weave-theme` attribute
- * (a manual selection) and by the media query narrowed with
- * `:root:not([data-weave-theme="dark"])` (the system default). Clearing the
- * attribute returns the workspace to following the OS with no client-side
- * listener involved. The graph follows the same resolution through
- * `theme.model.ts`'s `effectiveScheme`, because its WebGL palette cannot
- * read any of this.
- *
- * ## "Dense but calm" (§1.2)
- *
- * The sketch is an information-dense IDE surface, not a marketing page, so
- * the rules below deliberately avoid the defaults that produce the opposite:
- * no card shadows, no 24 px gutters, no rounded panels floating on a
- * contrasting background. Density comes from a 13 px base, 4–10 px padding
- * and 1 px hairline rules; calm comes from a **single** accent colour used
- * only for focus and selection, three greys doing all the structural work,
- * and no borders where a background change already separates two regions.
- *
- * ## Where the hexes come from
- *
- * Both schemes are Catppuccin (the user's call): dark is **Macchiato**, light
- * is **Latte**, mapped onto the desk-and-page split with one structural rule
- * shared by both — the note page is the `crust` ground, rails and bars are
- * `mantle`, the desk and graph canvas are `base`, raised controls and
- * hairlines are `surface0` with `surface1` for the strong hairline. Light's
- * topology is therefore an exact mirror of dark's (a darker sheet on a lighter
- * desk), so a token means the same thing in either scheme:
- *
- * - **Dark, Macchiato** — every value a stock Catppuccin label: `base #24273A`
- *   desk, `mantle #1E2030` panel, `crust #181926` page, `surface0 #363A4F`
- *   raise/hairline, `surface1 #494D64` strong hairline; text `#CAD3F5`,
- *   dims `#A5ADCB`/`#939AB7`, and **Mauve `#C6A0F6` as the single accent
- *   voice** (7.5:1 on panel) with Green/Yellow/Red as status.
- *
- * - **Light, Latte** — grounds are stock labels again (`base #EFF1F5` desk,
- *   `mantle #E6E9EF` panel, `crust #DCE0E8` page, `surface0 #CCD0DA`,
- *   `surface1 #BCC0CC`), and text/status hue-preservingly *deepened* to hold
- *   4.5:1 on the darkest grounds Latte owns: `dim #56586A` (from Subtext0,
- *   same hue 233°), `faint #606274` (Overlay2), `accent #7113EC` (Mauve),
- *   `ok #28641B`, `warn #7C4F10`, `bad #B20D30`. Text `#4C4F69` is stock
- *   Text. The hue-preserving deepening keeps the palette recognisably
- *   Catppuccin where blending toward neutral would grey it away.
- *
- * Measured ratios (WCAG, on the darkest grounds — `raise`/`surface0` for
- * light text tokens, `panel`/`mantle` for dark): light fg 4.5, dim 4.5,
- * accent 4.5, ok 4.6, warn 4.6, bad 4.5, each also ≥ 4.5 on the brighter
- * grounds; dark faint 4.6 on `surface0` and 5.8 on panel, dim 5.0 on
- * `surface0`, fg 7.6. The one below-4.5 site is `faint` *on* `raise`
- * (light 3.9) — every use is non-text there (scrollbar thumb, ghost
- * borders, icon glyphs), where WCAG asks 3:1.
- *
- * Status colours keep each scheme's temperature at ≥ 4.5:1 text contrast —
- * measured, not eyeballed (dark `#a6da95`/`#1e2030` 10.0, `#eed49f` 11.2,
- * `#ed8796` 6.5; light values are the deepened derivatives above).
- *
- * The graph cannot read these variables (WebGL — `graph.model.ts`), so
- * `GRAPH_PALETTE` mirrors the eight palette slots as literals; the test that makes
- * that copy safe asserts every mirrored hex appears in this string.
- */
-/**
- * The light-block tokens, interpolated into both selectors that need them —
- * see the {@link THEME_CSS} branch rules.
- */
-const LIGHT_TOKENS = `
-    --weave-bg:#eff1f5;--weave-panel:#e6e9ef;--weave-raise:#ccd0da;--weave-fg:#4c4f69;--weave-dim:#56586a;
-    --weave-faint:#606274;--weave-line:#ccd0da;--weave-line-strong:#bcc0cc;
-    --weave-accent:#7113ec;--weave-ok:#28641b;--weave-warn:#7c4f10;--weave-bad:#b20d30;
-    --weave-new:rgba(113,19,236,.10);
-    --weave-page:#dce0e8;
-  `;
+/** Palette declarations are shared with the WebGL graph. */
+function paletteTokens(id: PaletteChoice): string {
+  const { scheme, colors } = THEMES[id];
+  return Object.entries(colors).map(([key, value]) => `--weave-${key}:${value};`).join("")
+    + `--weave-new:color-mix(in srgb,var(--weave-accent) ${scheme === "light" ? 10 : 16}%,transparent);`
+    + `color-scheme:${scheme};`
+    + `--weave-vignette:radial-gradient(ellipse at center,transparent 55%,${scheme === "light" ? "rgba(0,0,0,.10)" : "rgba(0,0,0,.22)"} 100%);`
+    + `--weave-scrim:rgba(0,0,0,${scheme === "light" ? ".30" : ".45"});`;
+}
 
 export const THEME_CSS = `
 :root{
-  --weave-bg:#24273a;--weave-panel:#1e2030;--weave-raise:#363a4f;--weave-fg:#cad3f5;--weave-dim:#a5adcb;
-  --weave-faint:#939ab7;--weave-line:#363a4f;--weave-line-strong:#494d64;
-  --weave-accent:#c6a0f6;--weave-ok:#a6da95;--weave-warn:#eed49f;--weave-bad:#ed8796;
-  --weave-new:rgba(198,160,246,.16);
+  ${paletteTokens("dark")}
   --weave-row:26px;--weave-gutter:10px;
   /* The reading gutter is note-only: prose wants a wider margin than chrome.
      Rails, rows and bars keep --weave-gutter, so density is a property of the
@@ -146,7 +73,7 @@ export const THEME_CSS = `
      third face was tried (serif prose) and withdrawn at the user's call; two
      voices read calmer than three. The CSP allows nothing fetched, and both
      are system stacks. */
-  --weave-page:#181926;
+
   /* Two radii, per the plan: hairline-sharp for controls (a 4 px corner is
      the difference between a control and a card), one softer corner for the
      two overlays that float above the grid. Tag pills are 999px — a capsule
@@ -162,7 +89,7 @@ export const THEME_CSS = `
        row      12    list rows, text inputs, inline code
        base     13    body copy, h3-h6, preview-card text
        body     13.5  the note column's prose
-       subhead  14    palette input, note-body h2, header icon buttons
+       subhead  14    palette input, note-body h2, ribbon icon buttons
        title    15    note-body h1
        display  20    the note's page title
      Two earlier sizes were merged into neighbours: 9px glyphs to prov, and
@@ -181,101 +108,15 @@ export const THEME_CSS = `
   --weave-px-row:12px;--weave-px-base:13px;--weave-px-body:13.5px;
   --weave-px-subhead:14px;--weave-px-title:15px;--weave-px-display:20px;
 }
-/* The light tokens, shared verbatim by the attribute branch and the media
-   query below — one const interpolated twice is the only way CSS gets
-   "these are the same colours" without a preprocessor. Which branch wins is
-   theme.model.ts's business: the attribute carries a *manual* choice, the
-   media query the system default, and the :not() is what lets the two coexist
-   without a manual "dark" being dragged back into light by the OS. */
 @media (prefers-color-scheme: light){
-  :root:not([data-weave-theme="dark"]){
-    ${LIGHT_TOKENS}
-  }
-}
-:root[data-weave-theme="light"]{
-  ${LIGHT_TOKENS}
+  :root:not([data-weave-theme]){${paletteTokens("light")}}
 }
+${(Object.keys(THEMES) as PaletteChoice[]).map((id) => `:root[data-weave-theme="${id}"]{${paletteTokens(id)}}`).join("\n")}
+${Object.entries(ACCENTS).map(([id, colors]) => ["light", "dark"].map((scheme) =>
+  `:root[data-weave-scheme="${scheme}"][data-weave-accent="${id}"]{--weave-accent:${colors[scheme as "light" | "dark"]};}`
+).join("\n")).join("\n")}
 body{font-size:var(--weave-px-base)}
-#app{height:100%;display:grid;grid-template-rows:auto 1fr auto;background:var(--weave-bg)}
-
-/* header --------------------------------------------------------------- */
-.weave-header{
-  display:flex;align-items:center;gap:14px;padding:0 var(--weave-gutter);
-  height:34px;border-bottom:1px solid var(--weave-line);background:var(--weave-panel);
-}
-.weave-brand{display:inline-flex;align-items:center;gap:6px;font-size:var(--weave-px-subhead);font-weight:600;letter-spacing:.01em;white-space:nowrap}
-.weave-brand-mark{height:20px;width:20px;border-radius:var(--weave-radius)}
-/* A button styled as a search field: the palette owns the only text input,
-   so this opens it rather than pretending to accept a query. */
-.weave-search{
-  display:flex;align-items:center;gap:6px;flex:0 1 260px;min-width:0;
-  height:22px;padding:0 7px;font:inherit;font-size:var(--weave-px-row);text-align:left;cursor:pointer;
-  color:var(--weave-dim);background:var(--weave-bg);
-  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
-}
-.weave-search:hover{color:var(--weave-fg);border-color:var(--weave-accent)}
-.weave-search-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.weave-search kbd{
-  font-family:var(--weave-mono);font-size:var(--weave-px-caption);color:var(--weave-faint);
-  padding:1px 5px;border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);white-space:nowrap;
-}
-.weave-summary{
-  margin-left:auto;display:flex;gap:9px;font-family:var(--weave-mono);
-  font-size:var(--weave-px-ui);color:var(--weave-dim);white-space:nowrap;
-}
-.weave-summary-part+.weave-summary-part::before{content:"·";margin-right:9px;color:var(--weave-faint)}
-.weave-refresh{
-  font:inherit;font-size:var(--weave-px-subhead);line-height:1;color:var(--weave-dim);background:none;
-  border:0;padding:3px 5px;border-radius:var(--weave-radius);cursor:pointer;
-  display:inline-flex;align-items:center;
-}
-.weave-refresh:hover{color:var(--weave-fg);background:var(--weave-line)}
-/* One full 600 ms turn per click ("the request left"), not a loop: the
-   refetch is fire-and-forget and a 304 may never fire a completion signal
-   for a spinner to wait on. Reduced-motion restores the static stroke. */
-.weave-refresh-spinning{animation:weave-refresh-turn 600ms ease-out}
-@keyframes weave-refresh-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
-/* The theme cycle (shell/theme.model.ts). Same shape as the refresh button:
-   an icon-size control in a 34 px bar, glyph-only because the filled/half/
-   hollow family already means something in this workspace. */
-.weave-theme{
-  font:inherit;font-size:var(--weave-px-base);line-height:1;color:var(--weave-dim);background:none;
-  border:0;padding:3px 6px;border-radius:var(--weave-radius);cursor:pointer;
-}
-.weave-theme:hover{color:var(--weave-fg);background:var(--weave-line)}
-
-/* the grid -------------------------------------------------------------- */
-/* Widths arrive as custom properties from layout.model.ts. Shell/layout.model
-   selects the breakpoint; CSS consumes the resulting data-columns shape. */
-.weave-grid{display:grid;min-height:0;overflow:hidden;background:var(--weave-line)}
-.weave-grid[data-columns="3"]{grid-template-columns:var(--weave-col-tree,22%) 1px var(--weave-col-note,46%) 1px var(--weave-col-graph,32%)}
-.weave-grid[data-columns="2"]{grid-template-columns:var(--weave-col-tree,32%) 1px var(--weave-col-note,68%)}
-.weave-grid[data-columns="1"]{grid-template-columns:1fr}
-
-/* dividers -------------------------------------------------------------- */
-.weave-divider{
-  width:1px;cursor:col-resize;touch-action:none;background:var(--weave-line);position:relative;z-index:2;
-}
-.weave-divider::after{content:"";position:absolute;inset:0 -4px}
-.weave-divider:hover{background:var(--weave-faint)}
-.weave-divider:focus-visible{outline:2px solid var(--weave-accent);outline-offset:-1px}
-
-.weave-col{
-  display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;
-  background:var(--weave-bg);
-}
-.weave-col-title{
-  margin:0;padding:5px var(--weave-gutter) 4px;font-size:var(--weave-px-caption);font-weight:600;
-  letter-spacing:.09em;text-transform:uppercase;color:var(--weave-faint);
-  border-bottom:1px solid var(--weave-line);
-}
-/* Title, then the graph (which takes the slack), then the context rail. The
-   1fr is what gives .weave-graph-canvas a definite height to measure, and the
-   rail's row is a fixed fraction of the column — not content-sized — so
-   moving the selection between a sparsely-connected note and a richly
-   connected one never repartitions the right-hand column: the rail scrolls
-   inside the same region instead of squeezing the graph. */
-.weave-col-graph{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(96px,40%);background:var(--weave-bg)}
+#app{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--weave-bg)}
 
 /* tree column ----------------------------------------------------------- */
 /* --weave-depth is written per row by \`depthVar\`, through CSSOM
@@ -487,8 +328,8 @@ body{font-size:var(--weave-px-base)}
   text-decoration-thickness:1px;text-underline-offset:2px;
 }
 .weave-note-body a:hover{text-decoration-color:var(--weave-accent)}
-/* A ghost is a name with no note behind it: Obsidian's dashed, dimmed
-   affordance to create one. */
+/* A ghost is a name with no note behind it: a dashed, dimmed affordance to
+   create one. */
 .weave-wiki{cursor:pointer;color:var(--weave-accent);text-decoration:none}
 .weave-wiki:hover{text-decoration:underline}
 .weave-wiki-ghost{
@@ -550,15 +391,7 @@ body{font-size:var(--weave-px-base)}
    faster than a dark one under a black veil. */
 .weave-graph-canvas::after{
   content:"";position:absolute;inset:0;pointer-events:none;
-  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.22) 100%);
-}
-:root[data-weave-theme="light"] .weave-graph-canvas::after{
-  background:radial-gradient(ellipse at center,transparent 55%,rgba(76,79,105,.10) 100%);
-}
-@media (prefers-color-scheme: light){
-  :root:not([data-weave-theme="dark"]) .weave-graph-canvas::after{
-    background:radial-gradient(ellipse at center,transparent 55%,rgba(76,79,105,.10) 100%);
-  }
+  background:var(--weave-vignette);
 }
 .weave-graph-empty{
   margin:0;padding:14px var(--weave-gutter);color:var(--weave-dim);
@@ -584,32 +417,6 @@ body{font-size:var(--weave-px-base)}
   border-top:1px solid var(--weave-line);
 }
 
-/* the hidden force tuner (?sliders=1, docs/weave-workspace.md 15.7) --------- */
-/* Absolutely positioned over the canvas rather than given a grid row: the
-   panel is a debug overlay and must not change the layout the graph is being
-   judged in — moving the canvas while tuning it would falsify the very thing
-   being looked at. */
-.weave-tuner{
-  position:absolute;top:8px;right:8px;z-index:3;width:232px;max-height:calc(100% - 16px);
-  overflow:auto;display:flex;flex-direction:column;gap:6px;padding:9px 10px;
-  font-size:var(--weave-px-caption);color:var(--weave-fg);
-  background:var(--weave-panel);border:1px solid var(--weave-line-strong);
-  border-radius:var(--weave-radius);
-}
-.weave-tuner-title{margin:0;color:var(--weave-faint);letter-spacing:.04em;text-transform:uppercase}
-.weave-tuner-row{display:flex;flex-direction:column;gap:2px;cursor:pointer}
-.weave-tuner-label{display:flex;justify-content:space-between;gap:8px;color:var(--weave-dim)}
-.weave-tuner-label b{color:var(--weave-accent);font-weight:600;font-variant-numeric:tabular-nums}
-.weave-tuner-row input{width:100%;margin:0;accent-color:var(--weave-accent)}
-.weave-tuner-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--weave-dim)}
-.weave-tuner-toggle input{margin:0;accent-color:var(--weave-accent)}
-.weave-tuner-actions{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap}
-.weave-tuner-snippet{
-  margin:0;padding:6px;overflow:auto;white-space:pre;color:var(--weave-faint);
-  background:var(--weave-bg);border:1px solid var(--weave-line);border-radius:var(--weave-radius);
-  font-size:var(--weave-px-prov);line-height:1.45;
-}
-
 /* context rail ---------------------------------------------------------- */
 /* The \`.weave-empty\` block that used to sit above went with \`EmptyState.tsx\`
    in P3: every column now has its own empty state (\`treeEmptyMessage\`,
@@ -633,9 +440,8 @@ body{font-size:var(--weave-px-base)}
   text-align:left;background:none;border:0;cursor:pointer;
 }
 .weave-ctx-heading:hover{color:var(--weave-fg)}
-/* The count is a mono voice, like every other number in the chrome: the
-   header summary and the status bar count in mono, so a rail that says
-   "BACKLINKS 4" in the text face would be the one thing off-key. */
+/* The count is a mono voice like the other status numbers, so a rail that
+   says "BACKLINKS 4" in the text face would be the one thing off-key. */
 .weave-ctx-count{
   margin-left:auto;font-family:var(--weave-mono);font-size:var(--weave-px-caption);
   letter-spacing:0;color:var(--weave-faint);font-weight:400;
@@ -662,11 +468,8 @@ body{font-size:var(--weave-px-base)}
 .weave-ctx-tag{margin:0 0 3px}
 .weave-ctx-tag .weave-ctx-rows{padding-left:12px}
 
-/* status bar ------------------------------------------------------------ */
-/* One separator vocabulary, shared with the header summary: every run of
-   status items after the first opens with the same mid-dot, in the same
-   --weave-faint. cwd · selection · stamp reads as one grammar,
-   the same way the header's three-part summary does. */
+/* workspace footer ------------------------------------------------------ */
+/* The status items share one mid-dot separator in --weave-faint. */
 .weave-status{
   display:flex;align-items:center;gap:8px;height:22px;padding:0 var(--weave-gutter);
   font-family:var(--weave-mono);font-size:var(--weave-px-ui);color:var(--weave-dim);
@@ -676,7 +479,6 @@ body{font-size:var(--weave-px-base)}
 .weave-status-cwd,.weave-status-sel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .weave-status-cwd{max-width:38%;color:var(--weave-faint)}
 .weave-status-sel{color:var(--weave-fg)}
-.weave-status-stamp{margin-left:auto;color:var(--weave-faint)}
 
 /* overlays: the ⌘K palette and the ? help sheet (P4) --------------------- */
 /* The scrim is a click target that closes, and the reason both overlays sit
@@ -685,15 +487,7 @@ body{font-size:var(--weave-px-base)}
    the wrong breakpoint. */
 .weave-scrim{
   position:fixed;inset:0;z-index:10;display:flex;justify-content:center;
-  align-items:flex-start;padding:9vh 16px 16px;background:rgba(0,0,0,.45);
-}
-/* The scrim above is tuned for the dark ground, where a neutral black veil
-   reads as depth. On the linen ground the same veil reads as a power cut, so
-   the light scheme gets its own — a plum-tinted veil at reduced strength,
-   drawn from the foreground ramp rather than from grey. */
-:root[data-weave-theme="light"] .weave-scrim{background:rgba(76,79,105,.30)}
-@media (prefers-color-scheme: light){
-  :root:not([data-weave-theme="dark"]) .weave-scrim{background:rgba(76,79,105,.30)}
+  align-items:flex-start;padding:9vh 16px 16px;background:var(--weave-scrim);
 }
 .weave-palette,.weave-help{
   display:flex;flex-direction:column;width:100%;max-width:560px;max-height:72vh;
@@ -760,7 +554,7 @@ body{font-size:var(--weave-px-base)}
    would need delay-unmount plumbing far past polish. Compositor-safe
    properties only — colour, border, opacity, transform; height and padding
    snap. */
-.weave-row,.weave-ctx-link,.weave-chip,.weave-search,.weave-refresh,.weave-theme,
+.weave-row,.weave-ctx-link,.weave-chip,.weave-ribbon button,
 .weave-hit,.weave-note-open{
   transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease;
 }
@@ -826,7 +620,7 @@ export function findNonce(host: ThemeHost): string | null {
  * report in the console is a far better diagnostic than a stylesheet that was
  * never created.
  */
-export function installTheme(host: ThemeHost, css: string = THEME_CSS): boolean {
+export function installTheme(host: ThemeHost, css: string = THEME_CSS + WORKSPACE_CSS): boolean {
   const element = host.createElement("style");
   const nonce = findNonce(host);
   if (nonce !== null) element.nonce = nonce;

package/src/web/client/shell/workspace.css.ts

@@ -0,0 +1,140 @@
+/** Tabbed workspace furniture; the graph keeps its existing palette and renderer. */
+export const WORKSPACE_CSS = `
+.weave-workbench{position:relative;display:flex;min-height:0;overflow:hidden;background:var(--weave-page)}
+.weave-workbench button{font:inherit;color:inherit;cursor:pointer}
+.weave-workbench button:focus-visible,.weave-workbench summary:focus-visible{outline:2px solid var(--weave-accent);outline-offset:-2px}
+.weave-workbench button:disabled{opacity:.35;cursor:default}
+.weave-ribbon{width:44px;flex:none;display:flex;align-items:center;flex-direction:column;gap:8px;padding:12px 0;background:var(--weave-panel);border-right:1px solid var(--weave-line)}
+.weave-ribbon button{width:32px;height:32px;border:0;border-radius:var(--weave-radius);background:transparent;font-size:var(--weave-px-display);color:var(--weave-dim)}
+.weave-ribbon button:hover,.weave-ribbon button[aria-pressed=true]{color:var(--weave-accent);background:var(--weave-new)}
+.weave-ribbon-space{flex:1}
+.weave-sidebar{flex:none;min-width:0;display:flex;flex-direction:column;background:var(--weave-panel);overflow:hidden}
+.weave-sidebar-dock{display:flex;flex:none;min-width:0;width:calc(var(--weave-sidebar-width) + 4px);overflow:hidden;opacity:1;visibility:visible;transition:width 200ms ease,opacity 160ms ease,visibility 0s}
+.weave-sidebar-dock[data-open=false]{width:0;opacity:0;visibility:hidden;transition:width 200ms ease,opacity 160ms ease,visibility 0s 200ms}
+.weave-sidebar-dock>.weave-sidebar{width:var(--weave-sidebar-width);transition:transform 200ms ease}
+.weave-sidebar-dock[data-open=false]>.weave-sidebar{transform:translateX(-16px)}
+.weave-context-dock[data-open=false]>.weave-sidebar{transform:translateX(16px)}
+.weave-sidebar-heading{display:flex;align-items:center;gap:8px;height:46px;flex:none;padding:0 12px;color:var(--weave-dim);font-size:var(--weave-px-row)}
+.weave-sidebar-heading button{border:0;background:none;padding:7px 6px;border-radius:var(--weave-radius);color:var(--weave-dim)}
+.weave-sidebar-heading button[aria-pressed=true]{color:var(--weave-fg);background:var(--weave-raise)}
+.weave-sidebar-heading button:last-child{margin-left:auto}
+.weave-sidebar .weave-tree-controls{padding:4px 12px 10px;gap:5px;flex-wrap:wrap;border:0}
+.weave-sidebar .weave-filter{height:29px;flex-basis:100%;background:var(--weave-bg);border-radius:var(--weave-radius)}
+.weave-sidebar .weave-row{min-height:32px;border-radius:var(--weave-radius);font-size:var(--weave-px-base)}
+.weave-sidebar [role=tree]{padding:0 8px}
+.weave-sidebar .weave-meta{font-size:var(--weave-px-caption);opacity:.65}
+.weave-sidebar .weave-tree-count{border:0;padding:8px 14px}
+.weave-vault-label{margin-top:auto;padding:14px 16px;border-top:1px solid var(--weave-line);display:flex;flex-direction:column;gap:4px;overflow:hidden}
+.weave-vault-label span{font-size:var(--weave-px-caption);color:var(--weave-faint);text-transform:uppercase;letter-spacing:.08em}
+.weave-vault-label strong{font-size:var(--weave-px-row);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.weave-recents{display:flex;flex-direction:column;gap:3px;padding:6px 10px;overflow:auto}
+.weave-recents button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;padding:9px;border-radius:var(--weave-radius);overflow:hidden}
+.weave-recents button:hover{background:var(--weave-new)}
+.weave-recents button[aria-current=page]{background:var(--weave-raise);color:var(--weave-fg)}
+.weave-recents .weave-recent-label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.weave-workspace-divider{flex:none;width:4px;background:var(--weave-panel);cursor:col-resize;touch-action:none;z-index:3}
+.weave-workspace-divider:hover,.weave-workspace-divider:focus-visible{background:var(--weave-accent)}
+.weave-workspace-divider[aria-orientation=horizontal]{width:auto;height:4px;cursor:row-resize}
+.weave-panes{display:grid;flex:1;min-width:0;min-height:0;overflow:hidden}
+.weave-pane{min-width:0;min-height:0;display:grid;grid-template-rows:42px 36px minmax(0,1fr);overflow:hidden;background:var(--weave-page)}
+.weave-pane[hidden]{display:none}
+.weave-pane-drop{position:relative}
+.weave-pane-drop::after{content:attr(data-drop-label);position:absolute;inset:4px;z-index:20;display:grid;place-items:center;pointer-events:none;border:2px dashed var(--weave-accent);border-radius:var(--weave-radius);color:var(--weave-accent);background:var(--weave-new)}
+.weave-tabs{display:flex;align-items:stretch;min-width:0;overflow-x:auto;background:var(--weave-panel);gap:3px;padding:5px 6px 0;border-bottom:1px solid var(--weave-line);scrollbar-width:thin}
+.weave-tab{position:relative;display:flex;align-items:center;min-width:90px;max-width:210px;border-radius:var(--weave-radius) var(--weave-radius) 0 0;color:var(--weave-dim);flex-shrink:0;border-bottom:2px solid transparent}
+.weave-tab-drop-before::before,.weave-tab-drop-after::after{content:"";position:absolute;top:2px;bottom:2px;width:3px;background:var(--weave-accent);pointer-events:none}
+.weave-tab-drop-before::before{left:-3px}.weave-tab-drop-after::after{right:-3px}
+.weave-tab-active{background:var(--weave-page);color:var(--weave-fg)}
+.weave-pane-active .weave-tab-active{border-bottom-color:var(--weave-accent)}
+.weave-tab button{border:0;background:none}
+.weave-tab [role=tab]{display:flex;align-items:center;gap:8px;text-align:left;padding:8px 9px;min-width:0;height:100%;font-size:var(--weave-px-row)}
+.weave-tab [role=tab]>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.weave-tab [role=tab]>span:first-child{color:var(--weave-faint)}
+.weave-tab .weave-tab-close{margin-right:4px;padding:2px 5px;font-size:var(--weave-px-subhead);color:var(--weave-faint)}
+.weave-tab-close:hover{color:var(--weave-fg);background:var(--weave-raise)}
+.weave-dirty{font-size:var(--weave-px-prov);color:var(--weave-accent)}
+.weave-new-tab{border:0;background:none;padding:4px 10px;font-size:var(--weave-px-display)!important;color:var(--weave-dim)!important}
+.weave-pane-toolbar{display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid var(--weave-line);color:var(--weave-dim);font-size:var(--weave-px-row)}
+.weave-pane-toolbar>button{width:26px;height:26px;border:0;background:none;border-radius:var(--weave-radius)}
+.weave-pane-toolbar>button:hover{background:var(--weave-new)}
+.weave-breadcrumb{flex:1;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px;font-size:var(--weave-px-ui)}
+.weave-pane-menu{position:relative}
+.weave-pane-menu>summary{list-style:none;cursor:pointer;padding:5px 10px;font-size:var(--weave-px-subhead)}
+.weave-pane-menu>summary::-webkit-details-marker{display:none}
+.weave-pane-menu>div{position:absolute;right:0;top:100%;z-index:12;width:185px;padding:5px;display:flex;flex-direction:column;background:var(--weave-panel);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius)}
+.weave-pane-menu button{text-align:left;border:0;background:none;padding:9px 10px;font-size:var(--weave-px-row)}
+.weave-pane-menu button:hover{background:var(--weave-new)}
+.weave-pane-content{min-width:0;min-height:0;display:flex;overflow:hidden;position:relative}
+.weave-document{display:flex;min-width:0;min-height:0;flex:1}
+.weave-document .weave-note{width:100%;border-left:0}
+.weave-document .weave-note-head{position:static;padding:28px max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 18px;border:0}
+.weave-document .weave-note-title{font-size:var(--weave-px-display);letter-spacing:-.03em;margin-bottom:12px}
+.weave-document .weave-note-body{padding:10px max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 64px;font-size:var(--weave-note-size,var(--weave-px-subhead));line-height:1.8}
+.weave-document .weave-note-body h1{font-size:var(--weave-px-display);line-height:1.4;margin-bottom:18px}
+.weave-document .weave-note-body h2{font-size:var(--weave-px-title);margin-top:28px}
+.weave-document .weave-note-editor{padding:14px max(24px,calc((100% - var(--weave-reading-width,760px))/2));min-height:220px;flex:1;font-size:var(--weave-note-size,var(--weave-px-subhead))}
+.weave-document .weave-note-tags{margin-top:12px}
+.weave-document .weave-note-edit,.weave-document .weave-note-save{padding:5px 10px;border-radius:var(--weave-radius)}
+.weave-welcome{align-self:center;margin:auto;padding:35px;max-width:560px;color:var(--weave-dim);line-height:1.7}
+.weave-welcome-mark{font-size:var(--weave-px-display);color:var(--weave-accent)}
+.weave-welcome h1{font-size:var(--weave-px-display);line-height:1.4;letter-spacing:-.025em;color:var(--weave-fg);font-weight:550}
+.weave-welcome p{font-size:var(--weave-px-base);margin:14px 0 24px}
+.weave-welcome>div{display:flex;gap:12px;flex-wrap:wrap}
+.weave-welcome button{border:1px solid var(--weave-line-strong);background:var(--weave-panel);padding:9px 13px;border-radius:var(--weave-radius);font-size:var(--weave-px-row)}
+.weave-welcome button:hover{border-color:var(--weave-accent)}
+.weave-welcome kbd{color:var(--weave-faint);padding-left:16px}
+.weave-sidebar-context .weave-rail{flex:1;border:0;overflow:auto;padding:6px 12px}
+.weave-sidebar-context .weave-ctx-link{padding-top:7px;padding-bottom:7px}
+.weave-graph-host{position:absolute;z-index:2;display:flex;background:var(--weave-bg)}
+.weave-graph-host>.weave-graph{width:100%;height:100%;flex:1}
+.weave-graph-preview{pointer-events:none;position:absolute;z-index:2;right:8px;bottom:64px;width:min(280px,calc(100% - 16px));box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:10px 34px 10px 10px;background:var(--weave-panel);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);box-shadow:0 6px 22px #0003}
+.weave-graph-preview-info{display:flex;align-items:center;gap:8px;min-width:0}
+.weave-graph-preview-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
+.weave-graph-preview-kind{font-size:var(--weave-px-caption);color:var(--weave-faint);text-transform:capitalize}
+.weave-graph-preview-title{font-size:var(--weave-px-row);font-weight:550;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
+.weave-graph-preview-close{pointer-events:auto;position:absolute;right:5px;top:5px;width:24px;height:24px;border:0;border-radius:var(--weave-radius);background:transparent;font-size:18px;color:var(--weave-dim)}
+.weave-graph-preview-close:hover{background:var(--weave-new);color:var(--weave-fg)}
+.weave-graph-preview>.weave-chip{pointer-events:auto;align-self:flex-start;max-width:100%;white-space:normal;text-align:left}
+.weave-footer{display:flex;align-items:center;min-width:0;background:var(--weave-panel);border-top:1px solid var(--weave-line);font-size:var(--weave-px-ui);color:var(--weave-faint)}
+.weave-footer>.weave-status{flex:1;min-width:0;border:0}
+.weave-footer>span{padding:4px 10px;white-space:nowrap}
+.weave-footer>button{font:inherit;color:var(--weave-fg);background:none;border:0;padding:7px 12px;cursor:pointer}
+@media(max-width:1049px){
+  .weave-context-dock{position:absolute;right:0;top:0;bottom:0;z-index:10;width:var(--weave-sidebar-width)}
+  .weave-sidebar-context{border-left:1px solid var(--weave-line-strong)}
+  .weave-context-dock>.weave-workspace-divider{display:none}
+}
+@media(max-width:849px){
+  .weave-notes-dock{position:absolute;left:44px;top:0;bottom:0;z-index:10;width:var(--weave-sidebar-width);box-shadow:8px 0 24px #0002}
+  .weave-sidebar-notes{border-right:1px solid var(--weave-line-strong)}
+  .weave-notes-dock>.weave-workspace-divider{display:none}
+  .weave-workbench>.weave-workspace-divider{display:none}
+  .weave-panes{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
+  .weave-document .weave-note-head{padding:20px}
+  .weave-document .weave-note-body{padding:10px 20px 40px}
+}
+@media(prefers-reduced-motion:reduce){
+  .weave-sidebar-dock,.weave-sidebar-dock[data-open=false],.weave-sidebar-dock>.weave-sidebar{transition:none}
+}
+
+.weave-settings-scrim{align-items:center;padding:24px 16px}
+.weave-settings button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent}
+.weave-settings a{color:var(--weave-accent)}
+.weave-settings{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:min(900px,calc(100vw - 32px));height:min(680px,calc(100dvh - 48px));background:var(--weave-panel);border:1px solid var(--weave-line-strong);border-radius:12px;box-shadow:0 24px 80px var(--weave-scrim);overflow:hidden}
+.weave-settings header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--weave-line)}
+.weave-settings h2,.weave-settings h3{margin:0}.weave-settings h3{font-size:20px;margin-bottom:24px}
+.weave-settings header button{font-size:24px}.weave-settings nav{padding:16px 12px;background:var(--weave-bg);overflow:auto;border-right:1px solid var(--weave-line)}
+.weave-settings nav button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:6px;color:var(--weave-dim)}
+.weave-settings nav button[aria-current]{color:var(--weave-accent);background:var(--weave-new)}
+.weave-settings section{padding:28px;overflow:auto;min-width:0}.weave-settings p{line-height:1.6;color:var(--weave-dim)}
+.weave-setting-row{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--weave-line)}
+.weave-setting-row>span:first-child{min-width:0;flex:1}.weave-setting-row strong{display:block;font-weight:500}.weave-setting-row small{display:block;color:var(--weave-dim);margin-top:6px;line-height:1.5}
+.weave-settings select{background:var(--weave-raise);border:1px solid var(--weave-line-strong);border-radius:6px;padding:7px;color:var(--weave-fg);max-width:230px;font:inherit}
+.weave-settings input{accent-color:var(--weave-accent)}.weave-settings input[type=checkbox]{width:18px;height:18px;flex-shrink:0}
+.weave-setting-range{display:flex;align-items:center;gap:12px;width:190px}.weave-setting-range input{width:130px;min-width:0}.weave-setting-range output{min-width:42px;text-align:right;color:var(--weave-accent);font-variant-numeric:tabular-nums}
+.weave-settings button:focus-visible,.weave-settings a:focus-visible,.weave-settings summary:focus-visible{outline:2px solid var(--weave-accent);outline-offset:2px}
+.weave-settings-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:24px 0}.weave-settings-actions button,.weave-settings-download,.weave-settings-forces>button{display:inline-block;padding:9px 14px;border:1px solid var(--weave-line-strong);border-radius:6px;color:var(--weave-accent);background:var(--weave-raise);text-decoration:none}
+.weave-settings-forces>button{margin-top:20px}.weave-settings-forces>button:disabled{opacity:.5}.weave-settings-locations dd{margin:6px 0 18px;overflow-wrap:anywhere;color:var(--weave-dim);font-family:var(--weave-font-mono)}
+.weave-settings details summary{cursor:pointer;padding:12px 0}.weave-settings .weave-key-row{gap:16px;align-items:baseline}.weave-settings .weave-key-row kbd{min-width:150px;color:var(--weave-accent)}
+@media(max-width:650px){.weave-settings{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr)}.weave-settings nav{border-right:0;border-bottom:1px solid var(--weave-line);padding:8px 16px}.weave-settings nav select{width:100%;max-width:none}.weave-settings section{padding:20px}.weave-setting-row{align-items:flex-start;gap:12px}.weave-settings select{max-width:170px}.weave-setting-range{width:140px}.weave-setting-range input{width:90px}}
+`;