pi-weave 0.3.1 → 0.3.3

package/src/web/client/shell/keys.model.ts

@@ -84,6 +84,7 @@ export interface KeyContext {
 export type ShellAction =
   | { readonly type: "openSearch" }
   | { readonly type: "openHelp" }
+  | { readonly type: "openSettings" }
   | { readonly type: "closeOverlay" }
   | { readonly type: "focusColumn"; readonly column: ColumnId }
   /** Focus the tree's filter box — `/`. */
@@ -91,8 +92,8 @@ export type ShellAction =
   | { readonly type: "fitGraph" }
   | { readonly type: "clearSelection" }
   | { readonly type: "closeTab" }
-  /** `t` — cycle the colour theme: system → light → dark → system. */
-  | { readonly type: "cycleTheme" };
+  /** `t` — switch between the selected light and dark themes. */
+  | { readonly type: "toggleTheme" };
 
 /**
  * The command-key letters, as data.
@@ -102,6 +103,7 @@ export type ShellAction =
  */
 export const COMMAND_KEYS: Readonly<Record<string, ShellAction>> = {
   k: { type: "openSearch" },
+  ",": { type: "openSettings" },
 };
 
 /**
@@ -146,7 +148,7 @@ export const BARE_KEYS: Readonly<Record<string, ShellAction>> = {
   "/": { type: "filterTree" },
   g: { type: "fitGraph" },
   "?": { type: "openHelp" },
-  t: { type: "cycleTheme" },
+  t: { type: "toggleTheme" },
 };
 
 /**
@@ -320,8 +322,8 @@ export interface ShellEffects {
   /** Write `null` to §1.3's `selectedId`. */
   clearSelection(): void;
   closeTab(): void;
-  /** `t` — advance the user's theme choice by one step in its cycle. */
-  cycleTheme(): void;
+  /** `t` — switch between the user's selected light and dark themes. */
+  toggleTheme(): void;
 }
 
 /** Perform an action. Total over {@link ShellAction}. */
@@ -329,6 +331,8 @@ export function runShellAction(action: ShellAction, fx: ShellEffects): void {
   switch (action.type) {
     case "openSearch":
       return fx.setOverlay("search");
+    case "openSettings":
+      return fx.setOverlay("settings");
     case "openHelp":
       return fx.setOverlay("help");
     case "closeOverlay":
@@ -344,8 +348,8 @@ export function runShellAction(action: ShellAction, fx: ShellEffects): void {
       return fx.clearSelection();
     case "closeTab":
       return fx.closeTab();
-    case "cycleTheme":
-      return fx.cycleTheme();
+    case "toggleTheme":
+      return fx.toggleTheme();
   }
 }
 
@@ -383,13 +387,14 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
       title: "Global",
       entries: [
         { combo: "⌥W / Alt W", what: "Close the active tab" },
+        { combo: `${cmd},`, what: "Open settings" },
         { combo: `${cmd}K`, what: "Search notes and the repository" },
         ...Object.entries(COLUMN_DIGITS).map(([digit, column]) => ({
           combo: `${cmd}${digit}`,
           what: column === "tree" ? "Open and focus the notes sidebar" : column === "graph" ? "Open and focus Graph view" : "Focus the note",
         })),
         { combo: "?", what: "This help" },
-        { combo: "t", what: "Cycle the colour theme (system / light / dark)" },
+        { combo: "t", what: "Switch between selected light and dark themes" },
         { combo: "Esc", what: "Clear the selection, or close an overlay" },
       ],
     },
@@ -407,6 +412,7 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
     {
       title: "Tabs and panes",
       entries: [
+        { combo: "Alt ← / →", what: "Reorder the focused tab" },
         { combo: "← / → / Home / End", what: "Select a tab when the tab strip is focused" },
         { combo: `${cmd}click`, what: "Open a note or search result in a new tab" },
         { combo: "Pane options (···)", what: "Split right or down, move a tab, or close a pane" },

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

@@ -79,8 +79,6 @@ export const CONTEXT_EMPTY: EmptyStateCopy = {
 export interface StatusBarModel {
   readonly cwd: string;
   readonly selection: string;
-  /** `null` before the first successful graph fetch. */
-  readonly stamp: string | null;
 }
 
 /** The `—` shown where a value is genuinely absent, not zero. */
@@ -90,31 +88,13 @@ export const NO_VALUE = "—";
 export function statusBarModel(
   cwd: string,
   selectedId: string | null,
-  stamp: string | null,
 ): StatusBarModel {
   return {
     cwd: cwd === "" ? NO_VALUE : cwd,
     selection: selectedId ?? "nothing selected",
-    stamp,
   };
 }
 
-/**
- * A `generatedAt` stamp, shortened for the status bar.
- *
- * Just the `HH:MM:SS`, because the date is almost always today and the whole
- * ISO string is 24 characters of mostly-constant noise in a bar that has
- * three other things to say. A stamp that does not look like an ISO timestamp
- * is passed through untouched rather than sliced blindly — the server derives
- * it from input timestamps and is free to change that derivation, and a
- * mangled substring would be a worse lie than the full value.
- */
-export function shortStamp(stamp: string | null): string {
-  if (stamp === null) return NO_VALUE;
-  const match = /T(\d{2}:\d{2}:\d{2})/.exec(stamp);
-  return match?.[1] ?? stamp;
-}
-
 /**
  * How often the shell re-renders on its own, in ms.
  *
@@ -151,7 +131,7 @@ export function searchHint(shortcut: string): string {
  * other. Making that unrepresentable costs nothing here and removes a whole
  * class of bug from the keyboard layer, which is the thing that opens them.
  */
-export type OverlayId = "search" | "help" | null;
+export type OverlayId = "search" | "help" | "settings" | null;
 
 /**
  * Whether a platform string looks like an Apple one.

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

@@ -1,64 +1,18 @@
-/**
- * The theme *choice* — what the user picked, and what that makes the screen
- * do (weave-workspace §1.2).
- *
- * The stylesheet decides what the palettes are (`theme.ts`); this module
- * decides *which one is showing*. The two are separate for §10's reason: the
- * choice is state a user controls, so every decision about it has to be a
- * testable pure function, while the `.tsx` that applies the attribute is
- * three lines no test can reach.
- *
- * ## Why tri-state
- *
- * "Dark" and "light" alone are not enough: stripping a user of "follow my OS"
- * is a regression the moment anyone prefers the *default* behaviour rather
- * than either specific scheme. The cycle is `system → light → dark → system`
- * so the control is one button, never a menu — a popover in the ribbon is
- * a second focusable thing to reach, and the setting is not worth one.
- *
- * ## The attribute, not a class, not inline styles
- *
- * The sheet's light branch moves from the bare `prefers-color-scheme` media
- * query to a *pair* of selectors: `:root[data-weave-theme="light"]` (the
- * override) plus the media query narrowed by
- * `:root:not([data-weave-theme="dark"])` (system default). The attribute is
- * written on `<html>` because CSP `style-src 'nonce-…'` blocks inline
- * `style=""` attributes outright — the same verified reasoning that pushes
- * `cssvars.ts` through the CSSOM — while `data-*` attribute writes are not
- * style at all and need no exception. In `system` mode the attribute is
- * **cleared**, not set to a third value, so the media query keeps answering
- * a live OS flip without the client listening.
- *
- * ## Tier rules (§2)
- *
- * `src/web/client/**`. Storage arrives as the two-method port
- * the graph position cache uses, so a fake is an object literal and quota
- * failures stay the caller's problem — a theme the user could not persist is
- * the same cosmetic cost as a selection.
- */
-
+/** Persistent appearance mode and switching between the selected light/dark palettes. */
+import { DEFAULT_PREFERENCES, type Preferences } from "../../shared/preferences";
+import { THEMES } from "../../shared/themes";
+import type { PaletteChoice, ThemeChoice } from "../../shared/themes";
 import type { ColorScheme } from "../graph/graph.model";
+import { THEME_CHOICES, isThemeChoice } from "../../shared/themes";
+export { THEME_CHOICES, isThemeChoice };
+export type { ThemeChoice };
 
-/** What the user picked, as the button cycles it. */
-export type ThemeChoice = "system" | "light" | "dark";
-
-/** The choices in cycle order. */
-export const THEME_CHOICES: readonly ThemeChoice[] = ["system", "light", "dark"];
-
-/** The `localStorage` key. Namespaced and versioned. */
 export const THEME_STORAGE_KEY = "pi-weave.theme.v1";
-
-/** The slice of `Storage` this module needs. */
 export interface ThemeStorage {
   getItem(key: string): string | null;
   setItem(key: string, value: string): void;
 }
 
-/** Structural guard, mirroring `readBootstrap`'s. */
-export function isThemeChoice(value: unknown): value is ThemeChoice {
-  return value === "system" || value === "light" || value === "dark";
-}
-
 /**
  * The stored choice, or `null`.
  *
@@ -86,62 +40,38 @@ export function saveTheme(storage: ThemeStorage, choice: ThemeChoice): boolean {
   }
 }
 
-/** The next choice in the cycle {@link THEME_CHOICES}. */
-export function cycleTheme(choice: ThemeChoice): ThemeChoice {
-  const index = THEME_CHOICES.indexOf(choice);
-  // An out-of-table choice cannot exist (the type says so), but a miss
-  // here must not be an `undefined` into the UI: wrap to the head.
-  return THEME_CHOICES[(index + 1) % THEME_CHOICES.length] ?? "system";
+type ThemePair = Pick<Preferences, "lightTheme" | "darkTheme">;
+
+/** Toggle to the selected palette for the opposite effective appearance. */
+export function toggleTheme(choice: ThemeChoice, systemScheme: ColorScheme, pair: ThemePair = DEFAULT_PREFERENCES): PaletteChoice {
+  const current = THEMES[effectiveScheme(choice, systemScheme, pair)].scheme;
+  return current === "light" ? pair.darkTheme : pair.lightTheme;
 }
 
-/**
- * The scheme actually drawing right now.
- *
- * This is the *whole* resolution: the sheet owns what colours a scheme is,
- * `scheme.ts` owns reading the OS once, and this owns the decision — so the
- * graph column, whose WebGL palette cannot read CSS custom properties, takes
- * the same answer the stylesheet's attribute takes.
- */
-export function effectiveScheme(choice: ThemeChoice, systemScheme: ColorScheme): ColorScheme {
-  return choice === "system" ? systemScheme : choice;
+/** System mode uses the user's palette for the current device appearance. */
+export function effectiveScheme(choice: ThemeChoice, systemScheme: ColorScheme, pair: ThemePair = DEFAULT_PREFERENCES): PaletteChoice {
+  return choice === "system" ? (systemScheme === "light" ? pair.lightTheme : pair.darkTheme) : choice;
 }
 
-/**
- * The `data-weave-theme` attribute value, or `null` to clear it.
- *
- * `null` is not a third value on purpose: in `system` mode the media query
- * alone must govern, and any attribute would override the OS. See the module
- * header's "attribute, not class" note.
- */
-export function themeAttr(choice: ThemeChoice): "light" | "dark" | null {
+/** System mode clears the attribute so the media query governs. */
+export function themeAttr(choice: ThemeChoice): PaletteChoice | null {
   return choice === "system" ? null : choice;
 }
 
-// --- the control's view ------------------------------------------------------------
-
-/**
- * The ribbon button's face.
- *
- * The glyphs are the provenance language the tree already teaches
- * (`tree.model.ts`): filled, half and hollow of one shape. Filled `●` is
- * dark, hollower `◐` is system — half machine, half choice — and `○` is
- * light. Three glyphs, one family, no icon font, no `url()`.
- */
 export interface ThemeButtonView {
   readonly glyph: "●" | "◐" | "○";
-  /** The `title=`/`aria-label`. Names where it is *and* what clicking does. */
+  readonly label: string;
   readonly hint: string;
 }
 
-const THEME_GLYPHS: Readonly<Record<ThemeChoice, ThemeButtonView["glyph"]>> = {
-  dark: "●",
-  system: "◐",
-  light: "○",
-};
+function themeName(choice: ThemeChoice): string {
+  return choice === "system" ? "System" : THEMES[choice].name;
+}
 
-export function themeButton(choice: ThemeChoice): ThemeButtonView {
+export function themeButton(choice: ThemeChoice, systemScheme: ColorScheme = "dark", pair: ThemePair = DEFAULT_PREFERENCES): ThemeButtonView {
   return {
-    glyph: THEME_GLYPHS[choice],
-    hint: `Colour theme: ${choice} — click for ${cycleTheme(choice)}`,
+    glyph: choice === "system" ? "◐" : THEMES[choice].scheme === "light" ? "○" : "●",
+    label: themeName(choice),
+    hint: `Colour theme: ${themeName(choice)} — click for ${themeName(toggleTheme(choice, systemScheme, pair))}`,
   };
 }

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

@@ -1,3 +1,5 @@
+import { THEMES, ACCENTS } from "../../shared/themes";
+import type { PaletteChoice } from "../../shared/themes";
 import { WORKSPACE_CSS } from "./workspace.css";
 
 /**
@@ -45,96 +47,19 @@ import { WORKSPACE_CSS } from "./workspace.css";
  * 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
@@ -148,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
@@ -183,20 +108,13 @@ 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:minmax(0,1fr) auto;background:var(--weave-bg)}
 
@@ -473,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);
@@ -507,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\`,
@@ -595,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
@@ -604,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;

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

@@ -41,7 +41,9 @@ export const WORKSPACE_CSS = `
 .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{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{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}
@@ -65,12 +67,12 @@ export const WORKSPACE_CSS = `
 .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% - 760px)/2)) 18px;border: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% - 760px)/2)) 64px;font-size:var(--weave-px-subhead);line-height:1.8}
+.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 28px;min-height:220px;flex:1}
+.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}
@@ -114,4 +116,25 @@ export const WORKSPACE_CSS = `
 @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}}
 `;

package/src/web/server/backup.ts

@@ -0,0 +1,59 @@
+/** Create a complete archive before offering a download; originals are read only. */
+import { createReadStream } from "node:fs";
+import { mkdtemp, open, readdir, realpath, rm, stat } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { Zip, ZipDeflate } from "fflate";
+
+export async function createVaultBackup(vaultRoot: string): Promise<{ path: string; dispose: () => Promise<void> }> {
+  const directory = await mkdtemp(join(tmpdir(), "pi-weave-backup-"));
+  const path = join(directory, "vault.zip");
+  const dispose = (): Promise<void> => rm(directory, { recursive: true, force: true });
+  try {
+    const output = await open(path, "w");
+    try {
+      let pending = Promise.resolve();
+      let failure: Error | null = null;
+      let entries = 0;
+      const zip = new Zip((error, chunk) => {
+        if (error) { failure = error; return; }
+        pending = pending.then(() => output.writeFile(chunk));
+      });
+      const flush = async (): Promise<void> => { await pending; if (failure) throw failure; };
+      const walk = async (directory: string, prefix: string, ancestors: ReadonlySet<string>): Promise<void> => {
+        const resolved = await realpath(directory);
+        if (ancestors.has(resolved)) throw new Error(`Symbolic-link cycle in vault: ${prefix}`);
+        const next = new Set([...ancestors, resolved]);
+        for (const entry of await readdir(directory, { withFileTypes: true })) {
+          // ZIP readers on Windows treat backslashes as path separators.
+          if (entry.name.includes("\\")) throw new Error(`Unsupported backup filename: ${entry.name}`);
+          const source = join(directory, entry.name);
+          const info = await stat(source);
+          const name = prefix + entry.name + (info.isDirectory() ? "/" : "");
+          if (!info.isDirectory() && !info.isFile()) throw new Error(`Unsupported vault entry: ${name}`);
+          if (++entries > 65535 || info.isFile() && info.size > 0xffffffff) throw new Error("Vault exceeds ZIP format limits");
+          const file = new ZipDeflate(name, { level: 1 });
+          file.mtime = new Date(Math.max(new Date(1980, 0, 1).getTime(), Math.min(new Date(2099, 11, 31).getTime(), info.mtime.getTime())));
+          zip.add(file);
+          await flush();
+          if (info.isDirectory()) {
+            file.push(new Uint8Array(), true);
+            await flush();
+            await walk(source, name, next);
+          } else {
+            for await (const chunk of createReadStream(source)) {
+              file.push(chunk as Uint8Array);
+              await flush();
+            }
+            file.push(new Uint8Array(), true);
+            await flush();
+          }
+        }
+      };
+      await walk(vaultRoot, "", new Set());
+      zip.end();
+      await flush();
+    } finally { await output.close(); }
+    return { path, dispose };
+  } catch (error) { await dispose(); throw error; }
+}