pi-weave 0.3.0 → 0.3.1

package/src/web/shared/workspace.ts

@@ -0,0 +1,270 @@
+/** Serializable tab and pane state shared by the browser and persistence API. */
+
+export interface WorkspaceTab {
+  readonly id: string;
+  readonly kind: "document" | "graph";
+  readonly history: readonly (string | null)[];
+  readonly cursor: number;
+  readonly scroll: number;
+}
+
+export interface Pane {
+  readonly id: string;
+  readonly tabs: readonly WorkspaceTab[];
+  readonly activeTab: string;
+  readonly lastDocumentTab?: string;
+}
+
+export interface WorkspaceLayout {
+  readonly version: 1;
+  readonly panes: readonly Pane[];
+  readonly activePane: string;
+  readonly split: "right" | "down";
+  readonly ratio: number;
+  readonly treeVisible: boolean;
+  readonly contextVisible: boolean;
+  readonly treeWidth: number;
+  readonly contextWidth: number;
+  readonly theme: "system" | "light" | "dark";
+}
+
+const MAX_TABS = 40;
+const MAX_HISTORY = 100;
+const MAX_SCROLL = 1_000_000_000;
+
+const emptyDocument = (id: string): WorkspaceTab => ({ id, kind: "document", history: [null], cursor: 0, scroll: 0 });
+
+export function initialLayout(): WorkspaceLayout {
+  return {
+    version: 1,
+    panes: [{ id: "pane-1", tabs: [emptyDocument("tab-1")], activeTab: "tab-1" }],
+    activePane: "pane-1",
+    split: "right",
+    ratio: 0.5,
+    treeVisible: true,
+    contextVisible: true,
+    treeWidth: 240,
+    contextWidth: 240,
+    theme: "system",
+  };
+}
+
+export function activePane(layout: WorkspaceLayout): Pane {
+  return layout.panes.find((pane) => pane.id === layout.activePane)!;
+}
+
+export function activeTab(layout: WorkspaceLayout): WorkspaceTab {
+  const pane = activePane(layout);
+  return pane.tabs.find((tab) => tab.id === pane.activeTab)!;
+}
+
+export function tabSelection(tab: WorkspaceTab): string | null {
+  return tab.kind === "document" ? tab.history[tab.cursor] ?? null : null;
+}
+
+function nextId(layout: WorkspaceLayout, prefix: "pane" | "tab"): string {
+  const ids = new Set(layout.panes.flatMap((pane) => [pane.id, ...pane.tabs.map((tab) => tab.id)]));
+  let n = 1;
+  while (ids.has(`${prefix}-${n}`)) n++;
+  return `${prefix}-${n}`;
+}
+
+function setActive(layout: WorkspaceLayout, pane: Pane, tab: WorkspaceTab): WorkspaceLayout {
+  return {
+    ...layout,
+    activePane: pane.id,
+    panes: layout.panes.map((item) => item.id === pane.id
+      ? rememberDocument({ ...pane, activeTab: tab.id, tabs: pane.tabs.map((current) => current.id === tab.id ? tab : current) })
+      : item),
+  };
+}
+
+function documentTab(pane: Pane): WorkspaceTab | undefined {
+  return pane.tabs.find((tab) => tab.id === pane.lastDocumentTab && tab.kind === "document")
+    ?? [...pane.tabs].reverse().find((tab) => tab.kind === "document");
+}
+
+function rememberDocument(pane: Pane): Pane {
+  const { lastDocumentTab: _previous, ...rest } = pane;
+  const tab = pane.tabs.find((tab) => tab.id === pane.activeTab && tab.kind === "document") ?? documentTab(pane);
+  return tab ? { ...rest, lastDocumentTab: tab.id } : rest;
+}
+
+/** Focus reading/editing without navigating away from the active document. */
+export function focusDocument(layout: WorkspaceLayout): WorkspaceLayout {
+  if (activeTab(layout).kind === "document") return layout;
+  const pane = activePane(layout);
+  const tab = documentTab(pane);
+  return tab ? setActive(layout, pane, tab) : openDocument(layout, null, { newTab: true });
+}
+
+function findTab(layout: WorkspaceLayout, paneId: string, tabId: string): { pane: Pane; tab: WorkspaceTab } | null {
+  const pane = layout.panes.find((item) => item.id === paneId);
+  const tab = pane?.tabs.find((item) => item.id === tabId);
+  return pane && tab ? { pane, tab } : null;
+}
+
+function appendTab(layout: WorkspaceLayout, pane: Pane, tab: WorkspaceTab): WorkspaceLayout {
+  if (layout.panes.reduce((count, item) => count + item.tabs.length, 0) >= MAX_TABS) return layout;
+  return setActive(layout, { ...pane, tabs: [...pane.tabs, tab] }, tab);
+}
+
+function navigate(tab: WorkspaceTab, id: string | null): WorkspaceTab {
+  const history = tab.history.slice(0, tab.cursor + 1);
+  if (history.at(-1) === id) return tab;
+  history.push(id);
+  if (history.length > MAX_HISTORY) history.shift();
+  return { ...tab, history, cursor: history.length - 1, scroll: 0 };
+}
+
+export function openDocument(layout: WorkspaceLayout, id: string | null, options: { newTab?: boolean; paneId?: string } = {}): WorkspaceLayout {
+  let pane = layout.panes.find((item) => item.id === (options.paneId ?? layout.activePane));
+  if (!pane) return layout;
+  const activeTabId = pane.activeTab;
+  let tab = pane.tabs.find((item) => item.id === activeTabId);
+  if (tab?.kind === "graph") {
+    tab = documentTab(pane);
+    if (tab) pane = { ...pane, activeTab: tab.id };
+    else if (!options.newTab) options = { ...options, newTab: true };
+  }
+  if (options.newTab) return appendTab(layout, pane, navigate(emptyDocument(nextId(layout, "tab")), id));
+  if (!tab) return appendTab(layout, pane, navigate(emptyDocument(nextId(layout, "tab")), id));
+  const next = navigate(tab, id);
+  if (next === tab && pane.id === layout.activePane && activeTabId === tab.id) return layout;
+  return setActive(layout, pane, next);
+}
+
+export function openGraph(layout: WorkspaceLayout): WorkspaceLayout {
+  const located = layout.panes.flatMap((pane) => pane.tabs.filter((tab) => tab.kind === "graph").map((tab) => ({ pane, tab })))[0];
+  if (located) return located.pane.id === layout.activePane && located.pane.activeTab === located.tab.id
+    ? layout
+    : setActive(layout, located.pane, located.tab);
+  const pane = activePane(layout);
+  return appendTab(layout, pane, { id: nextId(layout, "tab"), kind: "graph", history: [null], cursor: 0, scroll: 0 });
+}
+
+export function activateTab(layout: WorkspaceLayout, paneId: string, tabId: string): WorkspaceLayout {
+  const found = findTab(layout, paneId, tabId);
+  return !found || (layout.activePane === paneId && found.pane.activeTab === tabId)
+    ? layout
+    : setActive(layout, found.pane, found.tab);
+}
+
+export function closeTab(layout: WorkspaceLayout, paneId: string, tabId: string): WorkspaceLayout {
+  const found = findTab(layout, paneId, tabId);
+  if (!found) return layout;
+  const { pane } = found;
+  if (pane.tabs.length === 1) {
+    const kept = layout.panes.find((item) => item.id !== paneId);
+    if (kept) return { ...layout, panes: [kept], activePane: kept.id };
+    const tab = emptyDocument(nextId(layout, "tab"));
+    return setActive(layout, { ...pane, tabs: [tab] }, tab);
+  }
+  const tabs = pane.tabs.filter((tab) => tab.id !== tabId);
+  const wasActive = pane.activeTab === tabId;
+  const neighbor = tabs[Math.max(0, pane.tabs.findIndex((tab) => tab.id === tabId) - 1)]!;
+  const updated = rememberDocument({ ...pane, tabs, activeTab: wasActive ? neighbor.id : pane.activeTab });
+  return { ...layout, activePane: wasActive ? paneId : layout.activePane, panes: layout.panes.map((item) => item.id === paneId ? updated : item) };
+}
+
+export function navigateTab(layout: WorkspaceLayout, paneId: string, delta: -1 | 1): WorkspaceLayout {
+  const pane = layout.panes.find((item) => item.id === paneId);
+  const tab = pane?.tabs.find((item) => item.id === pane.activeTab);
+  if (!pane || !tab || tab.kind !== "document") return layout;
+  const cursor = tab.cursor + delta;
+  if (cursor < 0 || cursor >= tab.history.length) return layout;
+  return setActive(layout, pane, { ...tab, cursor, scroll: 0 });
+}
+
+export function splitPane(layout: WorkspaceLayout, direction: "right" | "down"): WorkspaceLayout {
+  if (layout.panes.length === 2) return layout.split === direction ? layout : { ...layout, split: direction };
+  if (layout.panes.reduce((count, pane) => count + pane.tabs.length, 0) >= MAX_TABS) return layout;
+  const current = activeTab(layout);
+  const id = nextId(layout, "pane");
+  let tab = emptyDocument(nextId(layout, "tab"));
+  if (current.kind === "document") tab = { ...current, id: tab.id, history: [...current.history], scroll: current.scroll };
+  return { ...layout, panes: [...layout.panes, { id, tabs: [tab], activeTab: tab.id }], activePane: id, split: direction };
+}
+
+export function closePane(layout: WorkspaceLayout, paneId: string): WorkspaceLayout {
+  if (layout.panes.length !== 2 || !layout.panes.some((pane) => pane.id === paneId)) return layout;
+  const closed = layout.panes.find((pane) => pane.id === paneId)!;
+  const kept = layout.panes.find((pane) => pane.id !== paneId)!;
+  return { ...layout, panes: [{ ...kept, tabs: [...kept.tabs, ...closed.tabs] }], activePane: kept.id };
+}
+
+/** Accept a tab drop only in another existing pane. */
+export function tabDropSource(layout: WorkspaceLayout, targetPane: string, tabId: string | null): string | null {
+  if (!layout.panes.some((pane) => pane.id === targetPane)) return null;
+  return layout.panes.find((pane) => pane.id !== targetPane && pane.tabs.some((tab) => tab.id === tabId))?.id ?? null;
+}
+
+export function moveTab(layout: WorkspaceLayout, paneId: string, tabId: string): WorkspaceLayout {
+  const found = findTab(layout, paneId, tabId);
+  if (!found) return layout;
+  const target = layout.panes.find((pane) => pane.id !== paneId) ?? { id: nextId(layout, "pane"), tabs: [], activeTab: "" };
+  const sourceTabs = found.pane.tabs.filter((tab) => tab.id !== tabId);
+  const destination = rememberDocument({ ...target, tabs: [...target.tabs, found.tab], activeTab: found.tab.id });
+  if (!sourceTabs.length && layout.panes.length === 2) return { ...layout, panes: [destination], activePane: target.id };
+  if (!sourceTabs.length && layout.panes.reduce((count, pane) => count + pane.tabs.length, 0) >= MAX_TABS) return layout;
+  const placeholder = sourceTabs.length ? null : emptyDocument(nextId(layout, "tab"));
+  const remaining = sourceTabs.length ? sourceTabs : [placeholder!];
+  const source = rememberDocument({ ...found.pane, tabs: remaining, activeTab: found.pane.activeTab === tabId ? remaining[Math.max(0, found.pane.tabs.findIndex((tab) => tab.id === tabId) - 1)]!.id : found.pane.activeTab });
+  return { ...layout, activePane: target.id, panes: layout.panes.length === 1
+    ? [source, destination]
+    : layout.panes.map((pane) => pane.id === source.id ? source : destination) };
+}
+
+function exactKeys(value: Record<string, unknown>, keys: readonly string[]): boolean {
+  return Object.keys(value).length === keys.length && keys.every((key) => Object.hasOwn(value, key));
+}
+
+function record(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function boundedId(value: unknown, prefix?: "pane" | "tab"): value is string {
+  return typeof value === "string" && value.length <= 2048 && (prefix === undefined
+    ? value.length > 0 && !/[\u0000-\u001f\u007f]/.test(value)
+    : new RegExp(`^${prefix}-[1-9][0-9]{0,8}$`).test(value));
+}
+
+export function parseWorkspaceLayout(value: unknown): WorkspaceLayout | null {
+  if (!record(value) || !exactKeys(value, ["version", "panes", "activePane", "split", "ratio", "treeVisible", "contextVisible", "treeWidth", "contextWidth", "theme"])) 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;
+  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;
+  if (value["theme"] !== "system" && value["theme"] !== "light" && value["theme"] !== "dark") return null;
+  const ids = new Set<string>();
+  let count = 0;
+  let graphs = 0;
+  const panes: Pane[] = [];
+  for (const rawPane of value["panes"]) {
+    if (!record(rawPane) || !exactKeys(rawPane, Object.hasOwn(rawPane, "lastDocumentTab") ? ["id", "tabs", "activeTab", "lastDocumentTab"] : ["id", "tabs", "activeTab"]) || !boundedId(rawPane["id"], "pane") || !Array.isArray(rawPane["tabs"]) || rawPane["tabs"].length < 1 || !boundedId(rawPane["activeTab"], "tab") || ids.has(rawPane["id"])) return null;
+    ids.add(rawPane["id"]);
+    const tabs: WorkspaceTab[] = [];
+    let activeFound = false;
+    for (const rawTab of rawPane["tabs"]) {
+      if (!record(rawTab) || !exactKeys(rawTab, ["id", "kind", "history", "cursor", "scroll"]) || !boundedId(rawTab["id"], "tab") || ids.has(rawTab["id"])) return null;
+      ids.add(rawTab["id"]);
+      if (rawTab["kind"] !== "document" && rawTab["kind"] !== "graph") return null;
+      const kind = rawTab["kind"] as WorkspaceTab["kind"];
+      if (!Array.isArray(rawTab["history"]) || rawTab["history"].length < 1 || rawTab["history"].length > MAX_HISTORY || !Number.isInteger(rawTab["cursor"]) || (rawTab["cursor"] as number) < 0 || (rawTab["cursor"] as number) >= rawTab["history"].length) return null;
+      if (rawTab["history"].some((id) => id !== null && !boundedId(id))) return null;
+      if (typeof rawTab["scroll"] !== "number" || !Number.isFinite(rawTab["scroll"]) || rawTab["scroll"] < 0 || rawTab["scroll"] > MAX_SCROLL) return null;
+      if (kind === "graph") graphs++;
+      count++;
+      if (rawTab["id"] === rawPane["activeTab"]) activeFound = true;
+      tabs.push({ id: rawTab["id"], kind, history: rawTab["history"] as (string | null)[], cursor: rawTab["cursor"] as number, scroll: rawTab["scroll"] });
+    }
+    if (!activeFound) return null;
+    const lastDocumentTab = rawPane["lastDocumentTab"];
+    if (Object.hasOwn(rawPane, "lastDocumentTab") && (!boundedId(lastDocumentTab, "tab") || !tabs.some((tab) => tab.id === lastDocumentTab && tab.kind === "document"))) return 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"], theme: value["theme"] };
+}

package/src/web/client/selection.storage.ts

@@ -1,69 +0,0 @@
-/**
- * selection.storage.ts — the §1.3 context bus's memory across reloads.
- *
- * A manual refresh used to drop the open note: `selectedId` is a Preact
- * signal, and signals do not survive a page load. The layout already
- * persists (`shell/layout.model.ts`), and this is the same trick for the
- * one piece of selection state the user actually misses: which note they
- * were reading.
- *
- * ## Restore needs the graph
- *
- * A saved id is only offered back if it still names a node of the freshly
- * loaded graph — a note deleted in another window must not resurrect as a
- * selection pointing at nothing. That check needs the graph, which arrives
- * after mount, so the restore is deliberately a pure function of
- * `(graph, storage)` the shell calls once the first graph lands, not
- * something this module schedules itself.
- *
- * ## Tier rules (§2)
- *
- * `src/web/client/**`: storage arrives as a two-method port (same shape as
- * `LayoutStorage`) rather than the global, because the real `localStorage`
- * throws in partitioned-storage contexts and a module this small should be
- * testable without a DOM.
- */
-
-import type { GraphPayload } from "../shared/wire";
-
-/** The slice of `Storage` this module needs. */
-export interface SelectionStorage {
-  getItem(key: string): string | null;
-  setItem(key: string, value: string): void;
-}
-
-/** Versioned like `pi-weave.layout.v1`: an id-shape change gets a new key. */
-export const SELECTION_STORAGE_KEY = "pi-weave.selection.v1";
-
-/**
- * Remember the selection; an empty string records "nothing open".
- * Reports failure as `false` instead of throwing — a quota or
- * partitioned-storage error must never break a selection.
- */
-export function saveSelection(storage: SelectionStorage, id: string | null): boolean {
-  try {
-    storage.setItem(SELECTION_STORAGE_KEY, id ?? "");
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-/**
- * The saved selection to restore, or `null`.
- *
- * `graph` gates the offer: the id must still name a node of the current
- * payload, so a note deleted elsewhere is quietly not restored. Reads are
- * failure-absorbing for the same reason writes are.
- */
-export function restoreSelection(graph: GraphPayload | null, storage: SelectionStorage): string | null {
-  if (graph === null) return null;
-  let raw: string | null;
-  try {
-    raw = storage.getItem(SELECTION_STORAGE_KEY);
-  } catch {
-    return null;
-  }
-  if (raw === null || raw === "") return null;
-  return graph.model.nodes.some((node) => node.id === raw) ? raw : null;
-}

package/src/web/client/shell/Columns.tsx

@@ -1,139 +0,0 @@
-/**
- * The resizable column grid and context rail. The shell supplies resolved
- * widths and only the columns allowed by the current responsive breakpoint.
- */
-
-import { useLayoutEffect, useRef } from "preact/hooks";
-import { Graph } from "../graph/Graph";
-import type { ColorScheme } from "../graph/graph.model";
-import type { PositionStorage } from "../graph/positions";
-import type { RendererFactory } from "../graph/renderer";
-import type { SchemeHost } from "../graph/scheme";
-import { Note } from "../note/Note";
-import { Tree } from "../tree/Tree";
-import type { GraphPayload, NotePayload } from "../../shared/wire";
-import type { ColumnId, DividerId, ResolvedColumn } from "./layout.model";
-import { ContextRail } from "./ContextRail";
-import { emptyStateFor } from "./shell.model";
-import { Divider } from "./Divider";
-
-export interface ColumnsProps {
-  resolved: readonly ResolvedColumn[];
-  onDown: (divider: DividerId, clientX: number) => void;
-  onMove: (clientX: number) => void;
-  onUp: () => void;
-  onKey: (divider: DividerId, key: string) => void;
-  /** The §1.3 context bus, as the columns see it. */
-  graph: GraphPayload | null;
-  note: NotePayload | null;
-  noteFailed: boolean;
-  selectedId: string | null;
-  recentIds: ReadonlySet<string>;
-  /**
-   * The §1.3 context bus.
-   *
-   * Takes `string | null` because the graph can *clear* the selection — a
-   * click on empty stage — and no other column can. `workspace.ts`'s `select`
-   * has always accepted `null`; this prop was merely narrower than the thing
-   * behind it. The tree, the note column and the rail pass a `string`, which
-   * a handler accepting the wider type takes without a cast.
-   */
-  onSelect: (id: string | null) => void;
-  onRefresh: () => void;
-  onOpen: (slug: string) => void;
-  /** Save a note's body. Resolves `true` when the write landed. */
-  onSave: (slug: string, body: string) => Promise<boolean>;
-  /**
-   * Ask before a mutation that would invalidate an open draft, closing it if
-   * the user agrees. `false` means keep editing: do not proceed.
-   */
-  onMutate: () => boolean;
-  /** Slot the note column fills with its editor handle, for the shell's guards. */
-  editor: { current: { dirty(): boolean; discard(): void } | null };
-  /** Epoch ms for relative times, read once per render by the shell. */
-  now: number;
-  /**
-   * The graph column's three injected ports (§7.5, §10).
-   *
-   * Threaded through rather than imported by `Graph.tsx` for the reason
-   * `api.dom.ts` exists: `createSigmaRenderer` imports sigma, which is a
-   * `ReferenceError` outside a browser, so the module that names it must stay
-   * reachable only from a `.tsx` entry point.
-   */
-  renderer: RendererFactory;
-  storage: PositionStorage;
-  host: SchemeHost;
-  /**
-   * The scheme the shell resolved from the user's theme choice
-   * (`shell/theme.model.ts`'s `effectiveScheme`), or `null` to let the column
-   * read the OS (`graph/scheme.ts`'s `schemeOf`). The stylesheet carries the
-   * choice to everything CSS paints; WebGL cannot read custom properties, so
-   * the graph needs the decision handed to it as a value.
-   */
-  scheme: ColorScheme | null;
-  /** The boot graph fetch failed — see `state.ts`'s `graphFailed`. */
-  bootFailed: boolean;
-  /** Slot the graph column fills with its `fit`, for the global `g` key. */
-  fit: { current: (() => void) | null };
-  /** `?sliders=1` — the hidden force tuner (docs/weave-workspace.md §15.7). */
-  tuner: boolean;
-}
-
-/** One column: a titled region and whichever surface fills it. */
-function Column({ id, props }: { id: ColumnId; props: ColumnsProps }) {
-  const copy = emptyStateFor(id);
-  return (
-    <section class={`weave-col weave-col-${id}`} aria-label={copy.title}>
-      <h2 class="weave-col-title">{copy.title}</h2>
-      {id === "tree" ? <Tree graph={props.graph} selectedId={props.selectedId} recentIds={props.recentIds} onSelect={props.onSelect} onMutate={props.onMutate} onRefresh={props.onRefresh} now={props.now} /> : null}
-      {id === "note" ? (
-        <Note
-          note={props.note}
-          loadFailed={props.noteFailed}
-          graph={props.graph}
-          selectedId={props.selectedId}
-          onSelect={props.onSelect}
-          now={props.now}
-          onOpen={props.onOpen}
-          onSave={props.onSave}
-          editor={props.editor}
-        />
-      ) : null}
-      {id === "graph" ? (
-        <Graph
-          graph={props.graph}
-          selectedId={props.selectedId}
-          onSelect={props.onSelect}
-          renderer={props.renderer}
-          storage={props.storage}
-          host={props.host}
-          scheme={props.scheme}
-          bootFailed={props.bootFailed}
-          fit={props.fit}
-          tuner={props.tuner}
-        />
-      ) : null}
-      {id === "graph" ? <ContextRail graph={props.graph} selectedId={props.selectedId} onSelect={props.onSelect} /> : null}
-    </section>
-  );
-}
-
-export function Columns(props: ColumnsProps) {
-  const grid = useRef<HTMLDivElement | null>(null);
-  useLayoutEffect(() => {
-    const element = grid.current;
-    if (element === null) return;
-    for (const { id, width } of props.resolved) element.style.setProperty(`--weave-col-${id}`, `${Math.round(width)}px`);
-  }, [props.resolved]);
-  return <div class="weave-grid" ref={grid} data-columns={props.resolved.length}>
-    {props.resolved.map((column, index) => {
-      const divider: DividerId | null = index < props.resolved.length - 1 && column.id !== "graph" ? column.id : null;
-      return [
-        <Column key={`${column.id}-column`} id={column.id} props={props} />,
-        divider === null ? null : <Divider key={`${column.id}-divider`} label={`Resize ${column.id} column`}
-          onDown={(x) => props.onDown(divider, x)} onMove={props.onMove} onUp={props.onUp}
-          onKey={(key) => props.onKey(divider, key)} />,
-      ];
-    })}
-  </div>;
-}

package/src/web/client/shell/Divider.tsx

@@ -1,15 +0,0 @@
-export interface DividerProps {
-  label: string;
-  onDown: (clientX: number) => void;
-  onMove: (clientX: number) => void;
-  onUp: () => void;
-  onKey: (key: string) => void;
-}
-
-export function Divider(props: DividerProps) {
-  return <div class="weave-divider" role="separator" aria-orientation="vertical" aria-label={props.label} tabIndex={0}
-    onPointerDown={(event) => { event.currentTarget.setPointerCapture(event.pointerId); props.onDown(event.clientX); }}
-    onPointerMove={(event) => props.onMove(event.clientX)}
-    onPointerUp={(event) => { event.currentTarget.releasePointerCapture(event.pointerId); props.onUp(); }}
-    onKeyDown={(event) => props.onKey(event.key)} />;
-}

package/src/web/client/shell/Header.tsx

@@ -1,119 +0,0 @@
-/**
- * The header bar (weave-workspace §1.2).
- *
- * Title, the `⌘K` search button, the `vault:N · repo:… · N nodes` summary,
- * the refresh button. Every string comes from `shell.model.ts`.
- *
- * The search control was `disabled` through P1–P3 because search was P4 and
- * an affordance that looks live but is not would be the dishonest option. P4
- * landed, so it is live — and it is a `<button>`, not an `<input>`: the
- * palette owns the only text field in the workspace, and a header box you
- * could type into whose contents were then thrown away when the overlay
- * opened would be a worse lie than the disabled version it replaced.
- */
-
-import { useState } from "preact/hooks";
-import { LOGO_MARK_B64, LOGO_MARK_MIME } from "../../shared/logo";
-import type { ThemeButtonView } from "./theme.model";
-import type { HeaderSummary } from "./shell.model";
-import { REFRESH_ICON_PATHS, SEARCH_PLACEHOLDER, searchHint, summaryParts } from "./shell.model";
-
-export interface HeaderProps {
-  summary: HeaderSummary;
-  shortcut: string;
-  onRefresh: () => void;
-  /** Opens the ⌘K palette. The same action the global key performs. */
-  onSearch: () => void;
-  /** The theme control's face (glyph + hint), from `shell.model.ts`'s friend in `theme.model.ts`. */
-  theme: ThemeButtonView;
-  /** Advance the theme choice one step in its cycle. The same action the `t` key performs. */
-  onTheme: () => void;
-}
-
-/**
- * The refresh control, drawn rather than typed.
- *
- * The `⟳` it replaces was a text character, so its weight and shape were
- * whatever the platform's font felt like — the one glyph in the header that
- * the theme did not own. These two strokes (`REFRESH_ICON_PATHS`, in
- * `shell.model.ts`) are stroked in `currentColor`, so hover recolours them
- * like any other text glyph.
- *
- * The spin is one 600 ms turn on click, restarted only by the next click —
- * it says "the request left", which is the truth, and stops rather than
- * pretending to know when the refetch lands (the refetch is fire-and-forget
- * by §7's register, and a spinner that waits for a signal a 304 may never
- * fire would hang forever). Reduced-motion users get the static glyph back,
- * as everywhere else in the sheet.
- */
-function RefreshButton({ onRefresh }: { onRefresh: () => void }) {
-  const [spinning, setSpinning] = useState(false);
-  return (
-    <button
-      type="button"
-      class="weave-refresh"
-      onClick={() => {
-        onRefresh();
-        setSpinning(true);
-      }}
-      onAnimationEnd={() => setSpinning(false)}
-      title="Refetch everything"
-      aria-busy={spinning ? "true" : undefined}
-    >
-      <svg
-        class={spinning ? "weave-refresh-glyph weave-refresh-spinning" : "weave-refresh-glyph"}
-        viewBox="0 0 24 24"
-        width={14}
-        height={14}
-        fill="none"
-        stroke="currentColor"
-        stroke-width={2}
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        {REFRESH_ICON_PATHS.map((d) => (
-          <path key={d} d={d} />
-        ))}
-      </svg>
-    </button>
-  );
-}
-
-export function Header(props: HeaderProps) {
-  return (
-    <header class="weave-header">
-      <span class="weave-brand">
-        <img
-          class="weave-brand-mark"
-          src={`data:${LOGO_MARK_MIME};base64,${LOGO_MARK_B64}`}
-          alt=""
-          width={18}
-          height={18}
-        />
-        pi-weave
-      </span>
-      <button type="button" class="weave-search" title={searchHint(props.shortcut)} onClick={props.onSearch}>
-        <span class="weave-search-text">{SEARCH_PLACEHOLDER}</span>
-        <kbd>{props.shortcut}</kbd>
-      </button>
-      <span class="weave-summary">
-        {summaryParts(props.summary).map((part) => (
-          <span key={part} class="weave-summary-part">
-            {part}
-          </span>
-        ))}
-      </span>
-      <button
-        type="button"
-        class="weave-theme"
-        onClick={props.onTheme}
-        title={props.theme.hint}
-        aria-label={props.theme.hint}
-      >
-        {props.theme.glyph}
-      </button>
-      <RefreshButton onRefresh={props.onRefresh} />
-    </header>
-  );
-}

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

@@ -1,35 +0,0 @@
-import { COLUMNS, resizeAt } from "./layout.model";
-import type { DividerId, LayoutState } from "./layout.model";
-
-export interface DragState { readonly divider: DividerId; readonly origin: number; readonly base: LayoutState }
-export function beginDrag(divider: DividerId, origin: number, base: LayoutState): DragState { return { divider, origin, base }; }
-export function dragTo(drag: DragState, clientX: number, available: number): LayoutState { return resizeAt(drag.base, drag.divider, clientX - drag.origin, available); }
-export function dragChanged(drag: DragState, final: LayoutState): boolean {
-  return COLUMNS.some((id) => drag.base.fractions[id] !== final.fractions[id]);
-}
-export const NUDGE_PX = 24;
-export function nudgeFor(key: string): number { return key === "ArrowLeft" ? -NUDGE_PX : key === "ArrowRight" ? NUDGE_PX : 0; }
-
-export function dividerHandlers(host: {
-  layout(): LayoutState;
-  width(): number;
-  setLayout(next: LayoutState): void;
-  persist(layout: LayoutState): void;
-}) {
-  let active: DragState | null = null;
-  return {
-    onDown(divider: DividerId, clientX: number) { active = beginDrag(divider, clientX, host.layout()); },
-    onMove(clientX: number) { if (active !== null) host.setLayout(dragTo(active, clientX, host.width())); },
-    onUp() {
-      const drag = active;
-      active = null;
-      if (drag !== null && dragChanged(drag, host.layout())) host.persist(host.layout());
-    },
-    onKey(divider: DividerId, key: string) {
-      const next = resizeAt(host.layout(), divider, nudgeFor(key), host.width());
-      if (next === host.layout()) return;
-      host.setLayout(next);
-      host.persist(next);
-    },
-  };
-}