pi-weave 0.3.9 → 0.3.10

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

@@ -67,8 +67,9 @@ export const THEME_CSS = `
   --weave-note-gutter:18px;
   /* The desk-and-page split. The workspace is a desk of instruments — tree,
      graph, rail, bars — on the --weave-bg ground; the note column is the one
-     *page* lying on it: crust in both Catppuccin schemes, the ground that
-     sits furthest from the desk (deep under dark, bright over light). Two
+     *page* lying on it: crust under dark, plain white under Latte (the
+     refresh's "quiet page": paper reads as paper), the ground that sits
+     furthest from the desk. Two
      voices in total: sans for instruments and prose alike, mono for data — a
      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
@@ -79,7 +80,7 @@ export const THEME_CSS = `
      two overlays that float above the grid. Tag pills are 999px — a capsule
      shape, not a scale step. The gate test below refuses any literal px
      radius so the scale cannot drift back. */
-  --weave-radius:4px;--weave-radius-pop:7px;
+  --weave-radius:6px;--weave-radius-pop:10px;
   /* The type ramp, role-named because sizes drift and roles stick. Nine
      steps; every font-size in this sheet is one of these vars — that is a
      gate, not a convention:
@@ -91,7 +92,7 @@ export const THEME_CSS = `
        body     13.5  the note column's prose
        subhead  14    palette input, note-body h2, ribbon icon buttons
        title    15    note-body h1
-       display  20    the note's page title
+       display  26    the note's page title (20 before the refresh)
      Two earlier sizes were merged into neighbours: 9px glyphs to prov, and
      the 10px column overlines to caption (caps plus .09em tracking already
      read larger than their point size suggests). \`display\` and \`body\` are
@@ -106,7 +107,7 @@ export const THEME_CSS = `
      rubber stamp. */
   --weave-px-prov:9.5px;--weave-px-caption:10.5px;--weave-px-ui:11.5px;
   --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;
+  --weave-px-subhead:14px;--weave-px-title:15px;--weave-px-display:26px;
 }
 @media (prefers-color-scheme: light){
   :root:not([data-weave-theme]){${paletteTokens("light")}}
@@ -166,7 +167,7 @@ body{font-size:var(--weave-px-base)}
    so the selected row is always readable. */
 .weave-row-on .weave-twisty,.weave-row-on .weave-kind,.weave-row-on .weave-prov,
 .weave-row-on .weave-meta,.weave-row-on .weave-label{color:var(--weave-fg)}
-.weave-hit-on .weave-hit-badge,.weave-hit-on .weave-hit-detail{color:var(--weave-fg)}
+.weave-hit-on .weave-hit-icon,.weave-hit-on .weave-hit-detail,.weave-hit-on .weave-hit-meta{color:var(--weave-fg)}
 /* A newly-arrived node (a file or note added since the last update, ):
    one short highlight that fades while the label settles from bold back to
    normal. The class is computed from the frame diff in workspace.ts and
@@ -245,7 +246,7 @@ body{font-size:var(--weave-px-base)}
 .weave-note-head{position:sticky;top:0;z-index:2;padding:14px var(--weave-note-gutter) 9px;background:var(--weave-page);border-bottom:1px solid var(--weave-line)}
 /* The page's largest voice, and the point of the review's headline finding:
    a 15px title sat 1.5px above the body it named. --weave-px-display puts the
-   title where a page's title belongs, weight 650 for presence at 20px (600
+   title where a page's title belongs, weight 650 for presence at 26px (600
    reads thin at that size, 700 reads as a poster), tracking pulled in by a
    hair because large sans needs it. */
 .weave-note-title{margin:0 0 4px;font-size:var(--weave-px-display);font-weight:650;line-height:1.25;letter-spacing:-.005em;color:var(--weave-fg)}
@@ -262,20 +263,67 @@ body{font-size:var(--weave-px-base)}
 }
 .weave-note-open:hover{color:var(--weave-fg);background:var(--weave-line)}
 .weave-note-open-mark{display:inline-flex;line-height:0}
-/* Save / Done, chip-shaped: the same quiet row, and a control in a reading
-   column should not outweigh the title. */
-.weave-note-edit,.weave-note-save{
+/* The note's own actions, at the end of the meta line. History is a quiet
+   word with an icon; Edit is the one bordered control, and neither outweighs
+   the title. */
+.weave-note-actions{margin-left:auto;display:inline-flex;align-items:center;gap:4px}
+.weave-note-meta .weave-note-action{
+  display:inline-flex;align-items:center;gap:5px;
   font:inherit;font-size:var(--weave-px-caption);line-height:1;white-space:nowrap;cursor:pointer;
-  color:var(--weave-dim);background:var(--weave-panel);padding:4px 7px;
-  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
-}
-.weave-note-edit:hover,.weave-note-save:hover{color:var(--weave-fg);border-color:var(--weave-accent)}
-/* Save is the row's only affirmative action, so the only one with the accent. */
-.weave-note-save{color:var(--weave-accent);border-color:var(--weave-accent)}
-.weave-note-save:disabled{color:var(--weave-faint);border-color:var(--weave-line-strong);cursor:default}
-/* History: a slim bar under the header. The step's added text is marked in
-   the accent tint, the same strength the selected rows use. */
-.weave-note-history[aria-pressed="true"]{color:var(--weave-accent);border-color:var(--weave-accent)}
+  color:var(--weave-dim);background:none;padding:5px 8px;
+  border:1px solid transparent;border-radius:var(--weave-radius);
+}
+.weave-note-meta .weave-note-action .weave-icon{width:13px;height:13px}
+.weave-note-meta .weave-note-action:hover{color:var(--weave-fg);background:var(--weave-new)}
+.weave-note-meta .weave-note-action:disabled{color:var(--weave-faint);background:none;cursor:default}
+.weave-note-meta .weave-note-edit{color:var(--weave-fg);background:var(--weave-page);border-color:var(--weave-line-strong)}
+.weave-note-meta .weave-note-edit:hover{border-color:var(--weave-accent);background:var(--weave-page)}
+.weave-note-meta .weave-note-history[aria-pressed="true"]{color:var(--weave-accent);background:var(--weave-new)}
+/* Where the note lives, above its title: a crumb, not a heading. */
+.weave-note-crumb{margin:0 0 6px;display:flex;align-items:center;gap:5px;font-size:var(--weave-px-caption);color:var(--weave-faint)}
+.weave-note-crumb .weave-icon{width:12px;height:12px}
+/* Who wrote it, in words, with the spine's colour as a dot. */
+.weave-note-meta .weave-prov{display:inline-flex;align-items:center;gap:6px;font-size:var(--weave-px-ui);color:var(--weave-dim)}
+.weave-prov-dot{width:7px;height:7px;border-radius:999px;background:var(--weave-spine,var(--weave-accent))}
+/* The edit bar (E1): one row while editing, pinned over the text it edits.
+   Formatting on the left, where the words are; the save state and the two
+   ways out on the right. Saving is automatic, so Done is the only
+   affirmative control and the only one in the accent. */
+.weave-editbar{
+  position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
+  min-height:40px;padding:5px 12px;font-size:var(--weave-px-ui);
+  background:var(--weave-page);border-bottom:1px solid var(--weave-line);
+}
+.weave-editbar .weave-icon{width:14px;height:14px}
+.weave-editbar-badge{
+  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
+  font-size:var(--weave-px-caption);font-weight:600;color:var(--weave-accent);background:var(--weave-new);
+}
+.weave-editbar-badge .weave-icon{width:12px;height:12px}
+.weave-editbar-tools{display:inline-flex;align-items:center;gap:1px;margin-left:4px;padding-left:8px;border-left:1px solid var(--weave-line)}
+.weave-editbar .weave-editbar-tool{
+  display:inline-grid;place-items:center;width:28px;height:28px;padding:0;cursor:pointer;
+  color:var(--weave-dim);background:none;border:0;border-radius:var(--weave-radius);
+}
+.weave-editbar .weave-editbar-tool:hover{color:var(--weave-fg);background:var(--weave-new)}
+.weave-editbar-status{margin-left:auto;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:var(--weave-px-caption);color:var(--weave-faint)}
+.weave-editbar-pending,.weave-editbar-saving{color:var(--weave-dim)}
+.weave-editbar-saved{color:var(--weave-ok)}
+.weave-editbar-failed{color:var(--weave-bad);font-weight:600}
+.weave-editbar .weave-editbar-retry{font:inherit;color:var(--weave-accent);background:none;border:0;padding:2px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
+.weave-editbar .weave-editbar-discard,.weave-editbar .weave-editbar-done{font:inherit;font-size:var(--weave-px-caption);line-height:1;white-space:nowrap;cursor:pointer;border-radius:var(--weave-radius)}
+.weave-editbar .weave-editbar-discard{padding:7px 9px;color:var(--weave-dim);background:none;border:1px solid transparent}
+.weave-editbar .weave-editbar-discard:hover{color:var(--weave-fg);background:var(--weave-new)}
+.weave-editbar .weave-editbar-done{padding:7px 14px;font-weight:600;color:var(--weave-page);background:var(--weave-accent);border:1px solid var(--weave-accent)}
+.weave-editbar .weave-editbar-done:hover{filter:brightness(1.08)}
+.weave-editbar .weave-editbar-discard:disabled,.weave-editbar .weave-editbar-done:disabled{opacity:.5;cursor:default;filter:none}
+/* A finalized note's opening TLDR, set apart as the first thing to read.
+   The label is the card's own; task boxes keep their row and lose the bullet. */
+.weave-tldr{margin:0 0 18px;padding:12px 16px;background:var(--weave-new);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius)}
+.weave-tldr>p,.weave-tldr>ul,.weave-tldr>ol{margin:0 0 6px}
+.weave-tldr>*:last-child{margin-bottom:0}
+.weave-tldr ul:has(>li>input[type="checkbox"]){list-style:none;padding-left:2px}
+.weave-tldr-label{display:block;margin-bottom:3px;font-size:var(--weave-px-prov);font-weight:700;letter-spacing:.08em;color:var(--weave-accent)}
 /* The replay band sits under the header like the header itself: full width,
    the note's gutter, one line of words, one line of controls. Dots on the
    track are the versions, coloured by who made them. */
@@ -306,25 +354,28 @@ body{font-size:var(--weave-px-base)}
 .weave-replay-controls button:disabled{color:var(--weave-faint);cursor:default;opacity:.6}
 .weave-replay-controls .weave-replay-play{color:var(--weave-page);background:var(--weave-accent);border-color:var(--weave-accent)}
 .weave-replay-controls .weave-replay-play:hover:not(:disabled){filter:brightness(1.08)}
-.weave-replay-track{--weave-replay-at:100%;position:relative;flex:1;min-width:80px;height:28px;margin-left:8px}
+/* The change bars (the refresh's H2): one bar per version, as tall as the
+   change was big, coloured by who made it; the version on screen is ringed.
+   The day labels sit under the band. Heights and label positions arrive as
+   custom properties through Preact's CSSOM style path, never an attribute. */
+.weave-replay-track{--weave-replay-at:100%;position:relative;flex:1;min-width:80px;height:46px;margin-left:8px}
 .weave-replay-track::before{
-  content:"";position:absolute;left:7px;right:7px;top:13px;height:2px;border-radius:999px;
+  content:"";position:absolute;left:7px;right:7px;top:31px;height:2px;border-radius:999px;
   background:linear-gradient(to right,color-mix(in srgb,var(--weave-accent) 55%,transparent) var(--weave-replay-at),var(--weave-line-strong) var(--weave-replay-at));
 }
-.weave-replay-ticks{position:absolute;left:7px;right:7px;top:0;bottom:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
-.weave-replay-tick{position:relative;width:0;height:0}
-.weave-replay-tick::before{
-  content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;box-sizing:border-box;border-radius:999px;
-  background:var(--weave-who);border:2px solid var(--weave-panel);
-}
-.weave-replay-ahead::before{opacity:.4}
+.weave-replay-bars{position:absolute;left:7px;right:7px;top:2px;height:26px;pointer-events:none}
+.weave-replay-bar{position:absolute;bottom:0;left:var(--weave-bar-at,0);width:max(1px,min(8px,calc(100% / var(--weave-bars,1) - 2px)));transform:translateX(-50%);height:var(--weave-bar,14%);border-radius:var(--weave-radius);background:var(--weave-who);opacity:.85}
+.weave-replay-ahead{opacity:.35}
+.weave-replay-current{opacity:1;outline:2px solid var(--weave-accent);outline-offset:1px}
+.weave-replay-days{position:absolute;left:7px;right:7px;top:34px;height:12px;pointer-events:none}
+.weave-replay-day{position:absolute;left:var(--weave-day-at,0);transform:translateX(-2px);font-size:var(--weave-px-prov);line-height:12px;color:var(--weave-faint);white-space:nowrap}
 .weave-replay-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
 .weave-replay-slider:disabled{cursor:default}
 .weave-replay-slider:focus{outline:none}
-.weave-replay-slider::-webkit-slider-runnable-track{height:28px;background:transparent}
-.weave-replay-slider::-moz-range-track{height:28px;background:transparent}
+.weave-replay-slider::-webkit-slider-runnable-track{height:46px;background:transparent}
+.weave-replay-slider::-moz-range-track{height:46px;background:transparent}
 .weave-replay-slider::-webkit-slider-thumb{
-  -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:7px;border-radius:999px;
+  -webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:25px;border-radius:999px;
   background:var(--weave-page);border:2px solid var(--weave-accent);box-sizing:border-box;
 }
 .weave-replay-slider::-moz-range-thumb{
@@ -342,7 +393,7 @@ body{font-size:var(--weave-px-base)}
   display:block;width:100%;flex:1 0 auto;min-height:12em;resize:none;
   padding:12px var(--weave-note-gutter) 28px;box-sizing:border-box;
   font-family:var(--weave-mono);font-size:var(--weave-px-row);line-height:1.6;
-  color:var(--weave-fg);background:var(--weave-bg);border:0;outline:0;
+  color:var(--weave-fg);background:var(--weave-page);border:0;outline:0;
 }
 /* The \`## Raw\` box under the editor: folded by default so a long
    dictation never outgrows the note, a dashed edge to say "captured, not
@@ -516,6 +567,113 @@ body{font-size:var(--weave-px-base)}
   border-top:1px solid var(--weave-line);
 }
 
+/* graph spotlight (G1) ---------------------------------------------------
+   The field floating top-left over the canvas, and the side sheet top-right.
+   Both are overlays on the stage, so they sit on the panel ground with a
+   hairline and the pop radius — no elevation shadow, per the sheet's rule.
+   The spotlight's voice is --weave-warn: the highlighter colour the WebGL
+   side paints lit edges in (graph.model.ts SPOTLIGHT_EDGE_SLOT), so the chip,
+   the legend, the marked words and the lit dots all say "lit" in one hue.
+   The sheet stops short of the control strip and count line under the
+   canvas (about 54px together) and scrolls inside itself. Button rules are
+   qualified by their overlay (.weave-sheet .weave-sheet-open) because the
+   workspace sheet's \`.weave-workbench button{font:inherit;color:inherit}\`
+   reset is installed later and would outrank a single class. */
+.weave-spotlight{
+  position:absolute;z-index:3;top:10px;left:10px;width:min(330px,calc(100% - 20px));box-sizing:border-box;
+  display:flex;align-items:center;gap:6px;padding:3px 5px 3px 9px;
+  color:var(--weave-faint);background:var(--weave-panel);
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);
+}
+/* The pill is the focus ring: the input inside it drops the global outline
+   and the frame takes a 2px accent edge (border plus an inset hairline). */
+.weave-spotlight:focus-within{border-color:var(--weave-accent);box-shadow:inset 0 0 0 1px var(--weave-accent)}
+.weave-spotlight-input:focus-visible{outline:none}
+.weave-spotlight-on{color:var(--weave-warn)}
+.weave-spotlight-icon{flex:none;display:block}
+.weave-spotlight-input{
+  flex:1;min-width:0;height:24px;padding:0;font:inherit;font-size:var(--weave-px-row);
+  color:var(--weave-fg);background:transparent;border:0;outline:0;
+}
+.weave-spotlight-input::placeholder{color:var(--weave-faint)}
+.weave-spotlight-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
+.weave-spotlight-count{
+  flex:none;padding:1px 7px;font-size:var(--weave-px-caption);font-weight:650;white-space:nowrap;
+  color:var(--weave-warn);background:color-mix(in srgb,var(--weave-warn) 16%,transparent);border-radius:999px;
+}
+.weave-spotlight-none{color:var(--weave-dim);background:var(--weave-line)}
+.weave-spotlight .weave-spotlight-clear{
+  flex:none;padding:1px 5px;cursor:pointer;font-family:var(--weave-mono);font-size:var(--weave-px-prov);
+  color:var(--weave-faint);background:transparent;border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+}
+.weave-spotlight .weave-spotlight-clear:hover{color:var(--weave-fg);border-color:var(--weave-accent)}
+.weave-legend-lit{color:var(--weave-warn)}
+.weave-sheet{
+  position:absolute;z-index:3;top:10px;right:10px;width:min(300px,calc(100% - 20px));max-height:calc(100% - 74px);
+  box-sizing:border-box;overflow:auto;padding:12px 14px 14px;
+  font-size:var(--weave-px-base);color:var(--weave-fg);background:var(--weave-panel);
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);
+}
+.weave-sheet .weave-sheet-close{
+  position:absolute;top:6px;right:6px;width:24px;height:24px;padding:0;cursor:pointer;
+  font-size:var(--weave-px-display);line-height:1;color:var(--weave-dim);
+  background:transparent;border:0;border-radius:var(--weave-radius);
+}
+.weave-sheet .weave-sheet-close:hover{color:var(--weave-fg);background:var(--weave-line)}
+.weave-sheet-crumb{
+  margin:0 28px 2px 0;display:flex;align-items:center;gap:5px;min-width:0;
+  font-size:var(--weave-px-caption);color:var(--weave-faint);
+}
+.weave-sheet-crumb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.weave-sheet-title{
+  margin:0 20px 4px 0;font-size:var(--weave-px-title);font-weight:650;line-height:1.3;overflow-wrap:anywhere;
+}
+.weave-sheet-meta{margin:0;display:flex;align-items:center;gap:5px;font-size:var(--weave-px-ui);color:var(--weave-dim);text-transform:capitalize}
+.weave-sheet-when{color:var(--weave-faint);text-transform:none}
+.weave-sheet-text{
+  margin:10px 0 0;padding:8px 10px;line-height:1.55;overflow-wrap:anywhere;
+  background:var(--weave-new);border:1px solid color-mix(in srgb,var(--weave-accent) 30%,transparent);
+  border-radius:var(--weave-radius-pop);
+}
+.weave-sheet-text-head{
+  display:block;margin:0 0 2px;font-size:var(--weave-px-prov);font-weight:700;letter-spacing:.09em;
+  text-transform:uppercase;color:var(--weave-accent);
+}
+.weave-sheet-mark{border-radius:var(--weave-radius)}
+.weave-sheet-why{margin:8px 0 0;display:flex;gap:5px;font-size:var(--weave-px-caption);color:var(--weave-dim)}
+.weave-sheet-why span{color:var(--weave-warn)}
+.weave-sheet-section{margin:12px 0 0}
+.weave-sheet-heading{
+  margin:0 0 3px;display:flex;align-items:center;font-size:var(--weave-px-caption);font-weight:600;
+  letter-spacing:.09em;text-transform:uppercase;color:var(--weave-faint);
+}
+.weave-sheet-count{margin-left:auto;font-family:var(--weave-mono);letter-spacing:0}
+.weave-sheet-rows{margin:0;padding:0;list-style:none}
+.weave-sheet .weave-sheet-row{
+  display:flex;align-items:center;gap:7px;width:100%;padding:3px 0;cursor:pointer;text-align:left;
+  font:inherit;font-size:var(--weave-px-row);color:var(--weave-fg);background:none;border:0;
+}
+.weave-sheet .weave-sheet-row:hover{color:var(--weave-accent)}
+.weave-sheet-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.weave-sheet-dot{flex:none;width:6px;height:6px;border-radius:999px;background:var(--weave-faint)}
+.weave-sheet-dot-lit{background:var(--weave-warn)}
+.weave-sheet-more{margin:2px 0 0;font-size:var(--weave-px-caption);color:var(--weave-faint)}
+.weave-sheet-actions{margin:14px 0 0;display:flex;gap:6px;flex-wrap:wrap}
+.weave-sheet .weave-sheet-open,.weave-sheet .weave-sheet-split{
+  padding:5px 11px;cursor:pointer;font:inherit;font-size:var(--weave-px-ui);font-weight:600;
+  border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+}
+.weave-sheet .weave-sheet-open{color:var(--weave-page);background:var(--weave-accent);border-color:var(--weave-accent)}
+.weave-sheet .weave-sheet-open:hover{filter:brightness(1.08)}
+.weave-sheet .weave-sheet-split{color:var(--weave-fg);background:var(--weave-page)}
+.weave-sheet .weave-sheet-split:hover{border-color:var(--weave-accent)}
+/* Side by side the field (330) and the sheet (300) need about 660px of
+   stage; a narrower graph — a split pane, a small window — drops the sheet
+   under the field instead of letting the two overlap. */
+.weave-graph{container-type:inline-size}
+@container (max-width:680px){.weave-sheet{top:50px;max-height:calc(100% - 114px)}}
+/* end graph spotlight ---------------------------------------------------- */
+
 /* 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\`,
@@ -596,6 +754,7 @@ 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-hint{margin-left:auto;padding-left:8px;white-space:nowrap;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
@@ -611,31 +770,77 @@ body{font-size:var(--weave-px-base)}
   overflow:hidden;background:var(--weave-panel);color:var(--weave-fg);
   border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);
 }
+/* The ⌘K palette, grouped and compact: an input row (glyph, query, Esc), a
+   scope row of pills that Tab cycles, one line per result under small
+   capitals group heads, and a footer of key hints. Wider than the help sheet
+   because a row carries a title, a snippet and a meta column side by side. */
+.weave-palette{max-width:640px}
+.weave-palette-bar{
+  flex:none;display:flex;align-items:center;gap:8px;padding:0 11px;
+  border-bottom:1px solid var(--weave-line);
+}
+.weave-palette-glyph{color:var(--weave-faint)}
 .weave-palette-input{
-  flex:none;height:34px;padding:0 11px;font:inherit;font-size:var(--weave-px-subhead);
-  color:var(--weave-fg);background:transparent;border:0;
-  border-bottom:1px solid var(--weave-line);border-radius:0;
+  flex:1;min-width:0;height:36px;padding:0;font:inherit;font-size:var(--weave-px-subhead);
+  color:var(--weave-fg);background:transparent;border:0;border-radius:0;
+}
+.weave-palette-input:focus-visible{outline:0}
+.weave-palette-input::-webkit-search-cancel-button{display:none}
+.weave-palette-bar:focus-within{box-shadow:inset 0 -1px 0 var(--weave-accent)}
+.weave-palette-kbd{
+  flex:none;padding:0 4px;font-family:inherit;font-size:var(--weave-px-prov);line-height:14px;
+  color:var(--weave-faint);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius);
+}
+.weave-palette-scopes{
+  flex:none;display:flex;flex-wrap:wrap;gap:3px;padding:5px 8px;
+  border-bottom:1px solid var(--weave-line);
 }
-.weave-palette-input:focus-visible{outline-offset:-2px}
-.weave-hits{flex:1;min-height:0;overflow:auto;margin:0;padding:3px 0;list-style:none}
+.weave-palette-scope{
+  font:inherit;font-size:var(--weave-px-caption);line-height:1;padding:3px 9px;cursor:pointer;
+  color:var(--weave-dim);background:none;border:0;border-radius:999px;
+}
+.weave-palette-scope:hover{color:var(--weave-fg);background:var(--weave-line)}
+.weave-palette-scope[aria-pressed="true"]{color:var(--weave-panel);background:var(--weave-fg);font-weight:600}
+.weave-palette-scope-count{font-variant-numeric:tabular-nums}
+.weave-hits{flex:1;min-height:0;overflow:auto;margin:0;padding:0 0 4px;list-style:none}
+.weave-hit-section{list-style:none}
+.weave-hit-group{
+  padding:7px 11px 2px;font-size:var(--weave-px-prov);font-weight:700;letter-spacing:.08em;
+  text-transform:uppercase;color:var(--weave-faint);
+}
+.weave-hit-rows{margin:0;padding:0;list-style:none}
 .weave-hit{
-  display:flex;align-items:baseline;gap:7px;padding:3px 11px;cursor:pointer;
-  min-width:0;white-space:nowrap;
+  display:flex;align-items:center;gap:8px;padding:3px 11px;cursor:pointer;
+  min-width:0;white-space:nowrap;font-size:var(--weave-px-row);
 }
 .weave-hit-on{background:var(--weave-new);box-shadow:inset 2px 0 0 var(--weave-accent)}
-.weave-hit-badge{
-  flex:none;font-size:var(--weave-px-prov);letter-spacing:.06em;text-transform:uppercase;color:var(--weave-faint);
-  min-width:56px;
-}
-.weave-hit-note .weave-hit-badge{color:var(--weave-accent)}
-.weave-hit-label{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis}
+.weave-hit-icon{color:var(--weave-faint)}
+.weave-hit-notes .weave-hit-icon{color:var(--weave-accent)}
+.weave-hit-label{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--weave-fg)}
+.weave-hit-mono{font-family:var(--weave-mono);font-size:var(--weave-px-ui);font-weight:500}
 .weave-hit-detail{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--weave-px-ui);color:var(--weave-dim)}
+/* The match marks (search rows, the graph sheet) are a find-in-page amber.
+   Dark themes tint their own light --weave-warn, and the marked words go
+   white: the theme's text on that tint measured 3.3–3.6:1 in the Catppuccin
+   darks, white is 5.5:1 or better in every dark theme. A light theme's
+   --weave-warn is a deep brown that tints to mud, so light schemes take a
+   fixed amber under their own text instead. */
+.weave-hit-mark,.weave-sheet-mark{color:#fff;background:color-mix(in srgb,var(--weave-warn) 28%,transparent)}
+.weave-hit-mark{border-radius:var(--weave-radius);padding:0 1px}
+:root[data-weave-scheme="light"] .weave-hit-mark,:root[data-weave-scheme="light"] .weave-sheet-mark{color:var(--weave-fg);background:color-mix(in srgb,#f2a93b 34%,transparent)}
+.weave-hit-meta{flex:none;margin-left:auto;font-size:var(--weave-px-caption);color:var(--weave-faint);font-variant-numeric:tabular-nums}
 .weave-palette-status{margin:0;padding:14px 11px;color:var(--weave-dim);line-height:1.5}
 .weave-palette-foot,.weave-help-foot{
   display:flex;gap:12px;margin:0;padding:4px 11px;font-size:var(--weave-px-caption);color:var(--weave-faint);
   border-top:1px solid var(--weave-line);
 }
-.weave-palette-hint,.weave-help-hint{margin-left:auto}
+.weave-palette-foot{align-items:center;flex-wrap:wrap;row-gap:2px;min-height:26px;box-sizing:border-box;background:var(--weave-bg)}
+.weave-palette-light{
+  margin-left:auto;display:flex;align-items:center;gap:6px;padding:0;cursor:pointer;white-space:nowrap;
+  font:inherit;font-weight:600;color:var(--weave-accent);background:none;border:0;
+}
+.weave-palette-light .weave-palette-kbd{color:inherit;border-color:currentColor}
+.weave-help-hint{margin-left:auto}
 .weave-help-title{margin:0;padding:9px 11px;font-size:var(--weave-px-base);font-weight:600;border-bottom:1px solid var(--weave-line)}
 .weave-keys{flex:1;min-height:0;overflow:auto;margin:0;padding:5px 11px}
 .weave-key-group{margin:0 0 3px;font-size:var(--weave-px-prov);letter-spacing:.09em;text-transform:uppercase;color:var(--weave-faint)}

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

@@ -5,7 +5,7 @@ export const WORKSPACE_CSS = `
 .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{width:32px;height:32px;display:grid;place-items:center;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}
@@ -65,20 +65,24 @@ export const WORKSPACE_CSS = `
 .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}
+/* The reading column's gutters. Centred at the reading width; where the
+   floating Context card covers the right margin, the right gutter grows to
+   clear it and the column slides left before it narrows. */
+.weave-document{display:flex;min-width:0;min-height:0;flex:1;
+  --weave-gutter-c:max(24px,calc((100% - var(--weave-reading-width,760px))/2));
+  --weave-gutter-r:max(var(--weave-gutter-c),var(--weave-card-space,0px));
+  --weave-gutter-l:max(24px,min(var(--weave-gutter-c),calc(100% - var(--weave-reading-width,760px) - var(--weave-gutter-r))))}
 .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-head{position:static;padding:28px var(--weave-gutter-r) 18px var(--weave-gutter-l);border:0}
+.weave-document .weave-note-title{font-size:var(--weave-px-display);letter-spacing:-.03em;margin-bottom:10px}
+.weave-document .weave-note-body{padding:10px var(--weave-gutter-r) 64px var(--weave-gutter-l);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-editor{padding:14px var(--weave-gutter-r) 14px var(--weave-gutter-l);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-replay{padding:12px max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 14px}
-.weave-document .weave-raw{margin:0 max(24px,calc((100% - var(--weave-reading-width,760px))/2)) 28px}
-.weave-document .weave-note-edit,.weave-document .weave-note-save{padding:5px 10px;border-radius:var(--weave-radius);font-size:var(--weave-px-caption)}
-.weave-document .weave-note-edit{color:var(--weave-dim);background:transparent;border-color:transparent}
-.weave-document .weave-note-edit:hover{color:var(--weave-accent);background:var(--weave-new);border-color:transparent}
+.weave-document .weave-replay{padding:12px var(--weave-gutter-r) 14px var(--weave-gutter-l)}
+.weave-document .weave-raw{margin:0 var(--weave-gutter-r) 28px var(--weave-gutter-l)}
+.weave-document .weave-editbar{padding-right:calc(12px + var(--weave-card-space,0px))}
 .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}
@@ -117,6 +121,29 @@ export const WORKSPACE_CSS = `
 .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}
+/* Context as a floating card (C1): over the page's right margin, below the
+   pane toolbar, folding to a pill in the toolbar strip. Pinned, it is the
+   column it always was. The shadow is the card's only elevation, and lives
+   here rather than in THEME_CSS, whose surfaces are flat by rule. */
+.weave-context-dock.weave-context-float{position:absolute;top:90px;right:14px;bottom:auto;z-index:10;width:var(--weave-card-width);max-height:calc(100% - 104px);border:1px solid var(--weave-line-strong);border-radius:var(--weave-radius-pop);background:var(--weave-panel);box-shadow:0 12px 32px #0000001f,0 2px 6px #00000014;transition:opacity 160ms ease,visibility 0s}
+.weave-context-dock.weave-context-float[data-open=false]{width:var(--weave-card-width);opacity:0;visibility:hidden;transition:opacity 160ms ease,visibility 0s 160ms}
+.weave-context-float>.weave-workspace-divider{display:none}
+.weave-context-float>.weave-sidebar,.weave-context-float[data-open=false]>.weave-sidebar{width:100%;max-height:100%;border:0;background:none;transform:none}
+.weave-context-float .weave-sidebar-heading{height:38px;padding:0 6px 0 12px;border-bottom:1px solid var(--weave-line)}
+.weave-context-float .weave-rail{padding:4px 12px 10px}
+.weave-context-float .weave-context-graph-slot{max-height:calc(100dvh - 260px)}
+.weave-context-float .weave-context-tags{height:auto!important;max-height:220px}
+.weave-context-float .weave-ctx-group>.weave-workspace-divider{display:none}
+.weave-context-heading strong{color:var(--weave-fg)}
+.weave-context-count{min-width:18px;padding:1px 6px;border-radius:999px;background:var(--weave-raise);color:var(--weave-dim);font-size:var(--weave-px-caption);line-height:1.4;text-align:center}
+.weave-sidebar-heading .weave-context-pin{margin-left:auto}
+.weave-context-heading button:last-child{margin-left:0}
+.weave-context-heading .weave-context-pin[aria-pressed=true]{color:var(--weave-accent)}
+.weave-context-heading button{display:grid;place-items:center;width:28px;height:28px;padding:0}
+.weave-context-pill{position:absolute;top:47px;right:54px;z-index:10;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 9px;border:1px solid var(--weave-line-strong);border-radius:999px;background:var(--weave-panel);color:var(--weave-dim)!important;font-size:var(--weave-px-caption)!important;box-shadow:0 2px 8px #00000014}
+.weave-context-pill:hover{color:var(--weave-fg)!important;border-color:var(--weave-accent)}
+.weave-context-pill .weave-icon{width:13px;height:13px}
+.weave-pane-under-card{--weave-card-space:calc(var(--weave-card-width) + 28px)}
 @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)}

package/src/web/shared/themes.ts

@@ -3,7 +3,7 @@
  * `light` and `dark` keep existing saved choices compatible.
  */
 const latte = {
-  bg: "#eff1f5", panel: "#e6e9ef", page: "#dce0e8", raise: "#ccd0da",
+  bg: "#eff1f5", panel: "#e6e9ef", page: "#ffffff", raise: "#ccd0da",
   fg: "#4c4f69", dim: "#56586a", faint: "#606274", line: "#ccd0da", "line-strong": "#bcc0cc",
   accent: "#7113ec", ok: "#28641b", warn: "#7c4f10", bad: "#b20d30",
 };

package/src/web/shared/workspace.ts

@@ -27,6 +27,11 @@ export interface WorkspaceLayout {
   readonly ratio: number;
   readonly treeVisible: boolean;
   readonly contextVisible: boolean;
+  /**
+   * Context as a docked column (true) or a card floating over the page's
+   * right margin (false, the default since the refresh).
+   */
+  readonly contextPinned: boolean;
   readonly treeWidth: number;
   readonly contextWidth: number;
   readonly contextGraphHeight: number;
@@ -50,6 +55,7 @@ export function initialLayout(): WorkspaceLayout {
     ratio: 0.5,
     treeVisible: true,
     contextVisible: true,
+    contextPinned: false,
     treeWidth: 240,
     contextWidth: 240,
     contextGraphHeight: 260,
@@ -246,11 +252,13 @@ function boundedId(value: unknown, prefix?: "pane" | "tab"): value is string {
 }
 
 export function parseWorkspaceLayout(value: unknown): WorkspaceLayout | null {
-  if (!record(value) || !exactKeys(value, ["version", "panes", "activePane", "split", "ratio", "treeVisible", "contextVisible", "treeWidth", "contextWidth", "theme", ...["preferences", "contextGraphHeight", "contextTagsHeight"].filter(key => Object.hasOwn(value, key))])) return null;
+  if (!record(value) || !exactKeys(value, ["version", "panes", "activePane", "split", "ratio", "treeVisible", "contextVisible", "treeWidth", "contextWidth", "theme", ...["preferences", "contextGraphHeight", "contextTagsHeight", "contextPinned"].filter(key => Object.hasOwn(value, key))])) return null;
   if (value["version"] !== 1 || !Array.isArray(value["panes"]) || value["panes"].length < 1 || value["panes"].length > 2 || !boundedId(value["activePane"], "pane")) return null;
   if (value["split"] !== "right" && value["split"] !== "down") return null;
   if (typeof value["ratio"] !== "number" || !Number.isFinite(value["ratio"]) || value["ratio"] < 0.1 || value["ratio"] > 0.9) return null;
   if (typeof value["treeVisible"] !== "boolean" || typeof value["contextVisible"] !== "boolean") return null;
+  const contextPinned = Object.hasOwn(value, "contextPinned") ? value["contextPinned"] : false;
+  if (typeof contextPinned !== "boolean") return null;
   if (typeof value["treeWidth"] !== "number" || !Number.isFinite(value["treeWidth"]) || value["treeWidth"] < 120 || value["treeWidth"] > 800) return null;
   if (typeof value["contextWidth"] !== "number" || !Number.isFinite(value["contextWidth"]) || value["contextWidth"] < 120 || value["contextWidth"] > 800) return null;
   const contextGraphHeight = Object.hasOwn(value, "contextGraphHeight") ? value["contextGraphHeight"] : 260;
@@ -292,7 +300,7 @@ export function parseWorkspaceLayout(value: unknown): WorkspaceLayout | null {
     panes.push({ id: rawPane["id"], tabs, activeTab: rawPane["activeTab"], ...(typeof lastDocumentTab === "string" ? { lastDocumentTab } : {}) });
   }
   if (count > MAX_TABS || graphs > 1 || !panes.some((pane) => pane.id === value["activePane"])) return null;
-  return { version: 1, panes, activePane: value["activePane"], split: value["split"], ratio: value["ratio"], treeVisible: value["treeVisible"], contextVisible: value["contextVisible"], treeWidth: value["treeWidth"], contextWidth: value["contextWidth"], contextGraphHeight, contextTagsHeight, theme: value["theme"], preferences };
+  return { version: 1, panes, activePane: value["activePane"], split: value["split"], ratio: value["ratio"], treeVisible: value["treeVisible"], contextVisible: value["contextVisible"], contextPinned, treeWidth: value["treeWidth"], contextWidth: value["contextWidth"], contextGraphHeight, contextTagsHeight, theme: value["theme"], preferences };
 }
 
 /** Startup choice resets navigation only; appearance and sidebar preferences survive. */