pi-weave 0.3.0 → 0.3.2

package/src/web/shared/themes.ts

@@ -0,0 +1,92 @@
+/** Theme candidates. Catppuccin colors: https://github.com/catppuccin/palette (MIT).
+ * Latte colors are deepened and Frappé red lifted for contrast on raised controls.
+ * `light` and `dark` keep existing saved choices compatible.
+ */
+const latte = {
+  bg: "#eff1f5", panel: "#e6e9ef", page: "#dce0e8", raise: "#ccd0da",
+  fg: "#4c4f69", dim: "#56586a", faint: "#606274", line: "#ccd0da", "line-strong": "#bcc0cc",
+  accent: "#7113ec", ok: "#28641b", warn: "#7c4f10", bad: "#b20d30",
+};
+const macchiato = {
+  bg: "#24273a", panel: "#1e2030", page: "#181926", raise: "#363a4f",
+  fg: "#cad3f5", dim: "#a5adcb", faint: "#939ab7", line: "#363a4f", "line-strong": "#494d64",
+  accent: "#c6a0f6", ok: "#a6da95", warn: "#eed49f", bad: "#ed8796",
+};
+
+/** One table drives CSS, WebGL and the appearance theme choices. */
+export const THEMES = {
+  light: { name: "Catppuccin Latte · Mauve", scheme: "light", colors: latte },
+  "latte-blue": { name: "Catppuccin Latte · Blue", scheme: "light", colors: { ...latte, accent: "#1750bf" } },
+  "frappe-teal": { name: "Catppuccin Frappé · Teal", scheme: "dark", colors: {
+    bg: "#303446", panel: "#292c3c", page: "#232634", raise: "#414559",
+    fg: "#c6d0f5", dim: "#b5bfe2", faint: "#a5adce", line: "#414559", "line-strong": "#51576d",
+    accent: "#81c8be", ok: "#a6d189", warn: "#e5c890", bad: "#f4a4a6",
+  } },
+  dark: { name: "Catppuccin Macchiato · Mauve", scheme: "dark", colors: macchiato },
+  "macchiato-peach": { name: "Catppuccin Macchiato · Peach", scheme: "dark", colors: { ...macchiato, accent: "#f5a97f" } },
+  "mocha-lavender": { name: "Catppuccin Mocha · Lavender", scheme: "dark", colors: {
+    bg: "#1e1e2e", panel: "#181825", page: "#11111b", raise: "#313244",
+    fg: "#cdd6f4", dim: "#a6adc8", faint: "#9399b2", line: "#313244", "line-strong": "#45475a",
+    accent: "#b4befe", ok: "#a6e3a1", warn: "#f9e2af", bad: "#f38ba8",
+  } },
+  "paper-blue": { name: "Paper · Blue", scheme: "light", colors: {
+    bg: "#f4f6f8", panel: "#e9edf2", page: "#ffffff", raise: "#dce3eb",
+    fg: "#182334", dim: "#42536a", faint: "#526176", line: "#dce3eb", "line-strong": "#bac6d4",
+    accent: "#174ea6", ok: "#21623b", warn: "#805300", bad: "#a3223c",
+  } },
+  "ink-blue": { name: "Ink · Blue", scheme: "dark", colors: {
+    bg: "#1b2430", panel: "#141c27", page: "#101720", raise: "#2b3748",
+    fg: "#edf2f8", dim: "#becadc", faint: "#a5b5cb", line: "#2b3748", "line-strong": "#46566d",
+    accent: "#8bbcff", ok: "#91d5a5", warn: "#edc47b", bad: "#ff9fae",
+  } },
+  "sand-amber": { name: "Sand · Amber", scheme: "light", colors: {
+    bg: "#f7f3ec", panel: "#ede6da", page: "#fffdf8", raise: "#e2d8c8",
+    fg: "#30291f", dim: "#5b4e3f", faint: "#675847", line: "#e2d8c8", "line-strong": "#c7b8a2",
+    accent: "#814500", ok: "#365c2a", warn: "#795000", bad: "#a12c32",
+  } },
+  "ember-amber": { name: "Ember · Amber", scheme: "dark", colors: {
+    bg: "#29231f", panel: "#211c19", page: "#191512", raise: "#3c322b",
+    fg: "#f3e9dc", dim: "#d0bfab", faint: "#bfa991", line: "#3c322b", "line-strong": "#5c4d40",
+    accent: "#edb96b", ok: "#b5cf8a", warn: "#efc57a", bad: "#f69a91",
+  } },
+  "mist-teal": { name: "Mist · Teal", scheme: "light", colors: {
+    bg: "#eff5f3", panel: "#e1ece8", page: "#fafffd", raise: "#d2e2dc",
+    fg: "#18342e", dim: "#3c5b52", faint: "#48655b", line: "#d2e2dc", "line-strong": "#acc5bc",
+    accent: "#006457", ok: "#2a5e35", warn: "#795300", bad: "#a52a43",
+  } },
+  "forest-teal": { name: "Forest · Teal", scheme: "dark", colors: {
+    bg: "#1c2b27", panel: "#16221e", page: "#101b17", raise: "#2b4038",
+    fg: "#e6f2ec", dim: "#b8d0c4", faint: "#a2bfb0", line: "#2b4038", "line-strong": "#456255",
+    accent: "#7cd8bb", ok: "#a5d6a0", warn: "#e6c582", bad: "#f5a2ac",
+  } },
+} as const;
+
+export type PaletteChoice = keyof typeof THEMES;
+export type ThemeChoice = "system" | PaletteChoice;
+export const THEME_CHOICES: readonly ThemeChoice[] = ["system", ...Object.keys(THEMES) as PaletteChoice[]];
+
+export function isThemeChoice(value: unknown): value is ThemeChoice {
+  return typeof value === "string" && THEME_CHOICES.includes(value as ThemeChoice);
+}
+
+/** Accent selection is independent of the theme's surface palette. */
+export const ACCENTS = {
+  mauve: { name: "Mauve", light: "#7113ec", dark: "#cba9f8" },
+  blue: { name: "Blue", light: "#1750bf", dark: "#8bbcff" },
+  teal: { name: "Teal", light: "#006457", dark: "#7cd8bb" },
+  peach: { name: "Peach", light: "#814500", dark: "#f5a97f" },
+  rose: { name: "Rose", light: "#a52a43", dark: "#f4a4a6" },
+  green: { name: "Green", light: "#28641b", dark: "#a6da95" },
+  amber: { name: "Amber", light: "#775000", dark: "#edb96b" },
+  lavender: { name: "Lavender", light: "#445198", dark: "#b4befe" },
+} as const;
+export type AccentChoice = "theme" | keyof typeof ACCENTS;
+export type GraphTheme = PaletteChoice | { theme: PaletteChoice; accent: AccentChoice };
+
+export function themeId(theme: GraphTheme): PaletteChoice {
+  return typeof theme === "string" ? theme : theme.theme;
+}
+
+export function accentColor(theme: PaletteChoice, accent: AccentChoice): string {
+  return accent === "theme" ? THEMES[theme].colors.accent : ACCENTS[accent][THEMES[theme].scheme];
+}

package/src/web/shared/workspace.ts

@@ -0,0 +1,310 @@
+/** Serializable tab and pane state shared by the browser and persistence API. */
+import { isThemeChoice, THEMES } from "./themes";
+import type { ThemeChoice } from "./themes";
+import { DEFAULT_PREFERENCES, parsePreferences } from "./preferences";
+import type { Preferences } from "./preferences";
+
+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: ThemeChoice;
+  readonly preferences: Preferences;
+}
+
+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",
+    preferences: DEFAULT_PREFERENCES,
+  };
+}
+
+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 };
+}
+
+/** Move a tab before another tab, or to the end, without changing its identity or selection. */
+export function reorderTab(layout: WorkspaceLayout, paneId: string, tabId: string, before: string | null): WorkspaceLayout {
+  const found = findTab(layout, paneId, tabId);
+  if (!found || before === tabId || before !== null && !found.pane.tabs.some((tab) => tab.id === before)) return layout;
+  const tabs = found.pane.tabs.filter((tab) => tab.id !== tabId);
+  tabs.splice(before === null ? tabs.length : tabs.findIndex((tab) => tab.id === before), 0, found.tab);
+  if (tabs.every((tab, index) => tab === found.pane.tabs[index])) return layout;
+  return { ...layout, panes: layout.panes.map((pane) => pane.id === paneId ? { ...pane, tabs } : pane) };
+}
+
+/** 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", ...(Object.hasOwn(value, "preferences") ? ["preferences"] : [])])) 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 (!isThemeChoice(value["theme"])) return null;
+  let preferences = Object.hasOwn(value, "preferences") ? parsePreferences(value["preferences"]) : DEFAULT_PREFERENCES;
+  if (preferences === null) return null;
+  const previousPreferences = value["preferences"];
+  if (value["theme"] !== "system" && (!record(previousPreferences) || !Object.hasOwn(previousPreferences, "lightTheme"))) {
+    preferences = { ...preferences, [`${THEMES[value["theme"]].scheme}Theme`]: value["theme"] };
+  }
+  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"], preferences };
+}
+
+/** Startup choice resets navigation only; appearance and sidebar preferences survive. */
+export function restoreWorkspace(layout: WorkspaceLayout): WorkspaceLayout {
+  if (layout.preferences.startup === "restore") return layout;
+  const fresh = initialLayout();
+  return { ...layout, panes: fresh.panes, activePane: fresh.activePane };
+}
+
+/** Opening in the background preserves the active pane and tab, including from Graph. */
+export function openWithPreferences(layout: WorkspaceLayout, id: string | null, options: { newTab?: boolean; paneId?: string } = {}): WorkspaceLayout {
+  const next = openDocument(layout, id, options);
+  if (!options.newTab || layout.preferences.focusNewTabs) return next;
+  return { ...next, activePane: layout.activePane, panes: next.panes.map((pane) => {
+    const previous = layout.panes.find((item) => item.id === pane.id)!;
+    const { lastDocumentTab: _remembered, ...rest } = pane;
+    return { ...rest, activeTab: previous.activeTab, ...(previous.lastDocumentTab ? { lastDocumentTab: previous.lastDocumentTab } : {}) };
+  }) };
+}

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)} />;
-}