pi-weave 0.3.1 → 0.3.2

package/src/web/client/graph/tuner.model.ts

@@ -1,126 +1,10 @@
-/**
- * The hidden force tuner's logic (docs/weave-workspace.md §15.7).
- *
- * The graph's arrangement is decided by six numbers in `shared/layout.ts`, and
- * the difference between "one hairball" and "legible groups" is a *ratio*
- * between them that is far easier to see than to derive. So there is a panel
- * of sliders behind a URL flag, and everything about it that is not a DOM node
- * lives here — §10's rule, the same split `Graph.tsx` / `column.model.ts`
- * already uses.
- *
- * ## Why a query flag and not a setting
- *
- * The tuner is a *developer* affordance with a human in the loop; it is not a
- * feature and must not read as one. A URL string is the cheapest gate that is
- * genuinely hidden (no menu entry, no chord to collide with §11 P4's
- * keymap, no persisted state to leak into a normal session) while staying
- * reachable on a running workspace with no rebuild. A build-time `define`
- * would have been more hidden still and was rejected: it breaks the
- * byte-reproducible `build:web:check` contract for a panel that is already
- * unreachable without the flag.
- *
- * ## Tier rules (§2)
- *
- * `src/web/client/**`, but nothing here touches the DOM or npm — the flag
- * arrives as a `location.search` *string*, so this module compiles under the
- * root `tsconfig.json` and its tests are ordinary ones.
- */
-
-import type { ForceConstants } from "../../shared/layout";
-import { FORCE_DEFAULTS } from "../../shared/layout";
-
-// --- the gate ----------------------------------------------------------------------
-
-/** The query parameter that opens the panel. Documented in §15.7. */
-export const SLIDERS_FLAG = "sliders";
-
-/**
- * Whether `location.search` asks for the tuner.
- *
- * `?sliders`, `?sliders=1` and `?sliders=true` all open it; `?sliders=0` and
- * `?sliders=false` do not, so a bookmarked URL can carry the parameter in the
- * off position. Anything unparseable is off — a typo must not silently put a
- * debug panel over a user's graph.
- *
- * Hand-parsed rather than via `URLSearchParams`, which is a DOM/Node global
- * this tier's `tsconfig` does not provide.
- */
-export function slidersFlag(search: string): boolean {
-  for (const pair of search.replace(/^\?/, "").split("&")) {
-    const eq = pair.indexOf("=");
-    const name = eq === -1 ? pair : pair.slice(0, eq);
-    if (name !== SLIDERS_FLAG) continue;
-    const value = eq === -1 ? "" : pair.slice(eq + 1).toLowerCase();
-    return value !== "0" && value !== "false";
-  }
-  return false;
-}
-
-// --- the sliders --------------------------------------------------------------------
+/** Parsing and formatting for Settings → Interface graph sliders. */
+import { FORCE_DEFAULTS, type ForceConstants } from "../../shared/layout";
+import { FORCE_SLIDERS } from "../../shared/preferences";
+import type { SliderSpec } from "../../shared/preferences";
+export { FORCE_SLIDERS };
+export type { SliderSpec };
 
-/** One slider: which constant it drives, and the range it may drive it over. */
-export interface SliderSpec {
-  readonly key: keyof ForceConstants;
-  readonly label: string;
-  /** One line under the label saying what moving it does. */
-  readonly hint: string;
-  readonly min: number;
-  readonly max: number;
-  readonly step: number;
-}
-
-/**
- * The panel, in the order the forces actually fight each other: cohesion
- * first (what holds a group together), then repulsion (what pushes groups
- * apart), then gravity (what pulls everything back in). Reading top to bottom
- * is reading the tug-of-war.
- *
- * Ranges are generous on purpose — the point of the exercise is that the
- * shipped values are in the wrong region, so a range hugging them would hide
- * the answer. `chargeMax` tops out at 4000, which is past any useful value on
- * a graph that spans a few thousand units; that top of the range is
- * effectively "uncapped".
- */
-export const FORCE_SLIDERS: readonly SliderSpec[] = [
-  { key: "containsStrength", label: "contains strength", hint: "how hard a parent holds its children — group cohesion", min: 0, max: 1, step: 0.01 },
-  { key: "containsRest", label: "contains rest", hint: "how far children sit from their parent — rosette radius", min: 10, max: 300, step: 5 },
-  { key: "relationStrength", label: "relation strength", hint: "pull of links-to / mentions across groups", min: 0, max: 1, step: 0.01 },
-  { key: "relationDistance", label: "relation distance", hint: "how long those cross-group springs are", min: 20, max: 600, step: 10 },
-  { key: "charge", label: "charge", hint: "node-to-node repulsion — more negative pushes harder", min: -1200, max: 0, step: 10 },
-  { key: "chargeMax", label: "charge range", hint: "distance past which repulsion stops — caps overall spread", min: 100, max: 4000, step: 50 },
-  { key: "center", label: "centre gravity", hint: "pull toward the origin — too much makes one blob", min: 0, max: 0.3, step: 0.005 },
-];
-
-/**
- * The arrangement this whole exercise replaced, kept as a **comparison**.
- *
- * Not a suggestion any more — `FORCE_DEFAULTS` is now the chosen answer, found
- * through these sliders and frozen in `shared/layout.ts`. This is the *before*
- * picture, one button press away, so the next person to open the panel can see
- * in one click what the constants are for rather than reading a changelog.
- *
- * Measured at 300 ticks, worst-case gap between the big branches' bounding
- * boxes (negative = the branches interleave, which is the hairball):
- * `siblingBlobsGraph` **−312** here against **+39** shipped, `repoLikeGraph`
- * **−274** against **+133**.
- */
-export const HAIRBALL: Readonly<ForceConstants> = {
-  containsRest: 90,
-  containsStrength: 0.02,
-  relationDistance: 170,
-  relationStrength: 0.05,
-  charge: -50,
-  chargeMax: Infinity,
-  center: 0.09,
-};
-
-/**
- * A slider's value for `<input type="range">`.
- *
- * `chargeMax` defaults to `Infinity`, which is not a number a range input can
- * hold, so it reads as the top of its range — the position that means "no
- * meaningful cap", which is what `Infinity` is.
- */
 export function sliderValue(forces: ForceConstants, spec: SliderSpec): number {
   const raw = forces[spec.key];
   if (!Number.isFinite(raw)) return spec.max;
@@ -147,64 +31,6 @@ export function formatValue(value: number): string {
   return Number.isInteger(value) ? String(value) : value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "");
 }
 
-// --- handing the numbers back ----------------------------------------------------------
-
-/**
- * The current constants as the literal that belongs in `shared/layout.ts`.
- *
- * The whole point of the tuner is that a human finds the values and they then
- * get *frozen into the source*, so the last step of the loop is transcription
- * — and transcribing seven floats by eye off a panel is exactly where a digit
- * gets dropped. The Copy button emits the block verbatim.
- */
-export function forcesSnippet(forces: ForceConstants): string {
-  const line = (key: keyof ForceConstants): string => `  ${key}: ${Number.isFinite(forces[key]) ? forces[key] : "Infinity"},`;
-  return ["export const FORCES: ForceConstants = {", ...FORCE_SLIDERS.map((spec) => line(spec.key)), "};"].join("\n");
-}
-
-/** True when nothing has been moved off the shipped values. Drives "Reset". */
 export function isDefault(forces: ForceConstants): boolean {
   return FORCE_SLIDERS.every((spec) => Object.is(forces[spec.key], FORCE_DEFAULTS[spec.key]));
 }
-
-// --- the group-colour setting (§15.8) ------------------------------------------------
-
-/**
- * Where the group-colour choice is remembered.
- *
- * Versioned like the position cache, and stored separately from it: a palette
- * preference must survive the layout invalidation that a force change causes,
- * or tuning the physics would silently reset the user's colours.
- */
-export const GROUP_COLORS_STORAGE_KEY = "pi-weave.graph.groupColors.v1";
-
-/** The two-method storage port, same shape as `PositionStorage`. */
-export interface SettingStorage {
-  getItem(key: string): string | null;
-  setItem(key: string, value: string): void;
-}
-
-/**
- * Whether to colour by group. Defaults to **on**.
- *
- * On by default because the forces go to real trouble to separate the groups
- * and leaving them one colour wastes that. A throwing `getItem` (Safari
- * private browsing, partitioned storage) is a default, not an error — the
- * same answer `loadPositions` gives.
- */
-export function loadGroupColors(storage: SettingStorage): boolean {
-  try {
-    return storage.getItem(GROUP_COLORS_STORAGE_KEY) !== "off";
-  } catch {
-    return true;
-  }
-}
-
-/** Persist the choice, best-effort. A full or refusing quota is not an error. */
-export function saveGroupColors(storage: SettingStorage, on: boolean): void {
-  try {
-    storage.setItem(GROUP_COLORS_STORAGE_KEY, on ? "on" : "off");
-  } catch {
-    // A preference that does not survive a reload still works this session.
-  }
-}

package/src/web/client/main.tsx

@@ -13,7 +13,6 @@
 import { render } from "preact";
 import { BOOTSTRAP_ELEMENT_ID } from "../shared/wire";
 import { readBootstrap } from "./bootstrap";
-import { slidersFlag } from "./graph/tuner.model";
 import { Shell } from "./shell/Shell";
 import { installTheme } from "./shell/theme";
 import { loadTheme, themeAttr } from "./shell/theme.model";
@@ -34,9 +33,7 @@ if (host !== null) {
       cwd={boot.cwd}
       initialWidth={window.innerWidth}
       platform={navigator.platform}
-      // The fourth DOM read that cannot be injected further up. `slidersFlag`
-      // owns the parsing, so this stays a read and the decision stays tested.
-      tuner={slidersFlag(window.location.search)}
+
     />,
     host,
   );

package/src/web/client/note/Note.tsx

@@ -84,6 +84,8 @@ const PREVIEW_X = "weave-preview-x";
 const PREVIEW_Y = "weave-preview-y";
 
 export interface NoteProps {
+  spellcheck?: boolean;
+  defaultEdit?: boolean;
   note: NotePayload | null;
   loadFailed: boolean;
   graph: GraphPayload | null;
@@ -233,6 +235,14 @@ export function Note(props: NoteProps) {
     }
   };
 
+  const defaultOpened = useRef<string | null>(null);
+  useEffect(() => {
+    if (note !== null && defaultOpened.current !== note.slug) {
+      defaultOpened.current = note.slug;
+      if (props.defaultEdit && drafts.get(note.slug) === null) drafts.open(note.slug, body);
+    }
+  }, [note?.slug, props.defaultEdit]);
+
   const toggleEdit = (): void => {
     if (note === null || drafts.isTaskSaving(note.slug)) return;
     if (drafts.get(note.slug) === null) drafts.open(note.slug, body);
@@ -343,7 +353,7 @@ export function Note(props: NoteProps) {
         <textarea
           class="weave-note-editor"
           aria-label={EDITOR_ARIA_LABEL}
-          spellcheck
+          spellcheck={props.spellcheck ?? true}
           value={draft.body}
           onInput={(event) => drafts.edit(note.slug, (event.target as HTMLTextAreaElement).value)}
           onKeyDown={(event) => {

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

@@ -0,0 +1,71 @@
+import { useState } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+import type { WorkspaceLayout } from "../../shared/workspace";
+import type { Preferences } from "../../shared/preferences";
+import { ACCENTS, THEMES } from "../../shared/themes";
+import type { AccentChoice, PaletteChoice } from "../../shared/themes";
+import { ForceTuner } from "../graph/ForceTuner";
+import { useFocusTrap } from "./FocusTrap";
+import { keyHelp } from "./keys.model";
+
+const CATEGORIES = ["General", "Appearance", "Interface", "Editor", "Files", "Backup"] as const;
+function Row(props: { name: string; hint: string; children: ComponentChildren }) {
+  return <label class="weave-setting-row"><span><strong>{props.name}</strong><small>{props.hint}</small></span>{props.children}</label>;
+}
+
+export function Settings(props: {
+  compact: boolean; layout: WorkspaceLayout; info: { version: string; vaultRoot: string }; cwd: string; shortcut: string;
+  onChange: (layout: WorkspaceLayout) => void; onRefresh: () => void; onClose: () => void;
+}) {
+  const [category, setCategory] = useState<typeof CATEGORIES[number]>("General");
+  const trap = useFocusTrap();
+  const p = props.layout.preferences;
+  const update = (values: Partial<Preferences>): void => props.onChange({ ...props.layout, preferences: { ...p, ...values } });
+  return <div class="weave-scrim weave-settings-scrim" onClick={props.onClose}>
+    <div class="weave-settings" role="dialog" aria-modal="true" aria-label="Settings" tabIndex={-1}
+      ref={trap.ref as { current: HTMLDivElement | null }} onClick={(event) => event.stopPropagation()}
+      onKeyDown={(event) => void trap.onKeyDown(event as unknown as KeyboardEvent)}>
+      <header><h2>Settings</h2><button type="button" aria-label="Close settings" onClick={props.onClose}>×</button></header>
+      <nav aria-label="Settings categories">{props.compact ? <select class="weave-settings-category" aria-label="Settings category" value={category} onChange={(event) => setCategory(event.currentTarget.value as typeof category)}>{CATEGORIES.map((name) => <option key={name} value={name}>{name}</option>)}</select> : CATEGORIES.map((name) => <button type="button" key={name} aria-current={category === name ? "page" : undefined} onClick={() => setCategory(name)}>{name}</button>)}</nav>
+      <section aria-label={`${category} settings`}><h3>{category}</h3>
+        {category === "General" ? <>
+          <p>Pi Weave {props.info.version}</p>
+          <dl class="weave-settings-locations"><dt>Vault</dt><dd>{props.info.vaultRoot || "Loading…"}</dd><dt>Repository</dt><dd>{props.cwd}</dd></dl>
+          <div class="weave-settings-actions"><button type="button" onClick={props.onRefresh}>Refresh workspace</button><a href="https://github.com/EranYonai/pi-weave#readme" target="_blank" rel="noreferrer">Documentation ↗</a></div>
+          <details><summary tabIndex={0}>Keyboard shortcuts</summary>{keyHelp(props.shortcut.slice(0, -1)).map((group) => <div key={group.title}><h4>{group.title}</h4>{group.entries.map((entry) => <div class="weave-key-row" key={entry.combo}><kbd>{entry.combo}</kbd><span>{entry.what}</span></div>)}</div>)}</details>
+        </> : null}
+        {category === "Appearance" ? <>
+          <Row name="Color scheme" hint="System follows your device and uses your chosen light and dark themes."><select aria-label="Color scheme" value={props.layout.theme === "system" ? "system" : THEMES[props.layout.theme].scheme} onChange={(event) => props.onChange({ ...props.layout, theme: event.currentTarget.value === "system" ? "system" : event.currentTarget.value === "light" ? p.lightTheme : p.darkTheme })}><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></Row>
+          {(["light", "dark"] as const).map((scheme) => <Row key={scheme} name={`${scheme === "light" ? "Light" : "Dark"} theme`} hint={`Used in ${scheme} mode and by the ribbon theme button.`}><select aria-label={`${scheme === "light" ? "Light" : "Dark"} theme`} value={p[`${scheme}Theme`]} onChange={(event) => {
+            const theme = event.currentTarget.value as PaletteChoice;
+            props.onChange({ ...props.layout, preferences: { ...p, [`${scheme}Theme`]: theme }, theme: props.layout.theme !== "system" && THEMES[props.layout.theme].scheme === scheme ? theme : props.layout.theme });
+          }}>{Object.entries(THEMES).filter(([, theme]) => theme.scheme === scheme).map(([id, theme]) => <option key={id} value={id}>{theme.name}</option>)}</select></Row>)}
+          <Row name="Accent color" hint="Choose independently of the theme. Shades adapt to light and dark backgrounds."><select aria-label="Accent color" value={p.accent} onChange={(event) => update({ accent: event.currentTarget.value as AccentChoice })}><option value="theme">Theme default</option>{Object.entries(ACCENTS).map(([id, accent]) => <option value={id} key={id}>{accent.name}</option>)}</select></Row>
+          <Row name="Note font size" hint="Applies to reading and editing notes."><span class="weave-setting-range"><input aria-label="Note font size" type="range" min={12} max={22} step={1} value={p.fontSize} onInput={(event) => update({ fontSize: Number(event.currentTarget.value) })} /><output>{p.fontSize}px</output></span></Row>
+        </> : null}
+        {category === "Interface" ? <>
+          <Row name="Notes sidebar" hint="Show files and recent notes."><input type="checkbox" checked={props.layout.treeVisible} onChange={(event) => props.onChange({ ...props.layout, treeVisible: event.currentTarget.checked })} /></Row>
+          <Row name="Context sidebar" hint="Show links, backlinks, and related items."><input type="checkbox" checked={props.layout.contextVisible} onChange={(event) => props.onChange({ ...props.layout, contextVisible: event.currentTarget.checked })} /></Row>
+          <Row name="Color graph by group" hint="Give each containment group its own color."><input type="checkbox" checked={p.groupColors} onChange={(event) => update({ groupColors: event.currentTarget.checked })} /></Row>
+          <h4>Graph layout</h4><p class="weave-settings-hint">Adjust the graph live. Your choices are saved for this workspace.</p>
+          <ForceTuner forces={p.forces} onChange={(forces) => update({ forces })} />
+        </> : null}
+        {category === "Editor" ? <>
+          <Row name="Spellcheck" hint="Use your browser or device’s spellchecker while editing."><input type="checkbox" checked={p.spellcheck} onChange={(event) => update({ spellcheck: event.currentTarget.checked })} /></Row>
+          <Row name="Readable line length" hint="Keep note text in a comfortable reading column."><input type="checkbox" checked={p.readable} onChange={(event) => update({ readable: event.currentTarget.checked })} /></Row>
+          <Row name="Open notes in editing mode" hint="Newly opened notes start in the editor. Existing drafts are preserved."><input type="checkbox" checked={p.defaultEdit} onChange={(event) => update({ defaultEdit: event.currentTarget.checked })} /></Row>
+        </> : null}
+        {category === "Files" ? <>
+          <Row name="On startup" hint="Choose which tabs appear when you reopen this workspace."><select aria-label="On startup" value={p.startup} onChange={(event) => update({ startup: event.currentTarget.value as Preferences["startup"] })}><option value="restore">Restore open tabs</option><option value="empty">Start with an empty tab</option></select></Row>
+          <Row name="Focus new tabs" hint="Switch to notes opened in a new tab, including from the graph."><input type="checkbox" checked={p.focusNewTabs} onChange={(event) => update({ focusNewTabs: event.currentTarget.checked })} /></Row>
+          <h4>Deleting files</h4><p>Deleting a note or folder removes it from the vault after confirmation. Download a backup before deleting anything you may need again.</p>
+        </> : null}
+        {category === "Backup" ? <>
+          <h4>Download your vault</h4><p>Save a ZIP containing the vault’s files and folders, including notes, metadata, and attachments. Linked files and folders are included as files.</p>
+          <p>Save any unsaved edits first. The download contains files saved on disk. Backups are manual; store the ZIP somewhere safe.</p>
+          <a class="weave-settings-download" href="/api/backup" download>Download vault ZIP</a>
+        </> : null}
+      </section>
+    </div>
+  </div>;
+}

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

@@ -1,7 +1,7 @@
 /** Shared browser/desktop workspace: one data source, two optional tab groups. */
-import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useLayoutEffect, useRef, useState, useMemo } from "preact/hooks";
 import type { GraphPayload, NotePayload } from "../../shared/wire";
-import { activePane, activeTab, activateTab, closePane, closeTab, focusDocument, initialLayout, moveTab, navigateTab, openDocument, openGraph, parseWorkspaceLayout, splitPane, tabDropSource, tabSelection } from "../../shared/workspace";
+import { activePane, activeTab, activateTab, closePane, closeTab, focusDocument, initialLayout, reorderTab, moveTab, navigateTab, openDocument, openWithPreferences, restoreWorkspace, openGraph, parseWorkspaceLayout, splitPane, tabDropSource, tabSelection } from "../../shared/workspace";
 import type { Pane, WorkspaceLayout, WorkspaceTab } from "../../shared/workspace";
 import { fetchJson } from "../api.dom";
 import { openNote, saveNote } from "../api";
@@ -19,15 +19,18 @@ import { startWorkspace, watchNote } from "../workspace";
 import type { WorkspaceHandle } from "../workspace";
 import { ContextRail } from "./ContextRail";
 import { deeplinkSelection, formatHash } from "./deeplink.model";
+import { Settings } from "./Settings";
+import type { Preferences } from "../../shared/preferences";
+import { THEMES } from "../../shared/themes";
 import { HelpOverlay } from "./HelpOverlay";
 import { watchKeys } from "./keys";
 import { COLUMN_FOCUS_SELECTORS, TREE_FILTER_SELECTOR, focusSelector, runShellAction } from "./keys.model";
 import { StatusBar } from "./StatusBar";
 import type { OverlayId } from "./shell.model";
 import { NOTE_DRAG_TYPE, noteDropId, TICK_MS, graphClickOpensTab, looksApple, recentEntries, recordVisit, searchHint, searchShortcut, statusBarModel } from "./shell.model";
-import { cycleTheme, effectiveScheme, loadTheme, saveTheme, themeAttr, themeButton } from "./theme.model";
+import { toggleTheme, effectiveScheme, loadTheme, saveTheme, themeButton } from "./theme.model";
 
-export interface ShellProps { cwd: string; initialWidth: number; platform: string; tuner?: boolean }
+export interface ShellProps { cwd: string; initialWidth: number; platform: string }
 
 function titleOf(tab: WorkspaceTab, graph: GraphPayload | null): string {
   if (tab.kind === "graph") return "Graph view";
@@ -46,7 +49,7 @@ function RecentList(props: { visits: readonly string[]; graph: GraphPayload | nu
 
 /** A tab view can unmount; the shared draft store outlives it. */
 function DocumentView(props: {
-  tab: WorkspaceTab; graph: GraphPayload | null; drafts: DraftStore; revision: number;
+  preferences: Preferences; tab: WorkspaceTab; graph: GraphPayload | null; drafts: DraftStore; revision: number;
   onSelect: (id: string, newTab?: boolean) => void; onSave: (slug: string, body: string) => Promise<boolean>;
   now: number; onScroll: (value: number) => void; onSearch: () => void; onGraph: () => void;
 }) {
@@ -87,7 +90,7 @@ function DocumentView(props: {
   return <div class="weave-document" ref={element} onScrollCapture={(event) => {
     const target = event.target as HTMLElement;
     if (target.classList.contains("weave-note")) { savedScroll.current = target.scrollTop; props.onScroll(target.scrollTop); }
-  }}><Note note={payload?.note ?? null} loadFailed={payload?.failed ?? false} loadVersion={payload?.version ?? 0} graph={props.graph} selectedId={id}
+  }}><Note spellcheck={props.preferences.spellcheck} defaultEdit={props.preferences.defaultEdit} note={payload?.note ?? null} loadFailed={payload?.failed ?? false} loadVersion={payload?.version ?? 0} graph={props.graph} selectedId={id}
     onSelect={props.onSelect} onOpen={(noteSlug) => void openNote(fetchJson, noteSlug).then((result) => {
       if (!result.ok) window.alert(result.message); else if (!result.data.opened) window.alert("Could not open the note in an editor.");
     })} onSave={props.onSave} drafts={props.drafts} idPrefix={props.tab.id} now={props.now} /></div>;
@@ -119,12 +122,14 @@ export function Shell(props: ShellProps) {
   const [width, setWidth] = useState(props.initialWidth);
   const [scheme, setScheme] = useState(() => schemeOf(window));
   const [ready, setReady] = useState(false);
+  const [info, setInfo] = useState({ version: "", vaultRoot: "" });
   const [persistError, setPersistError] = useState(false);
   const [revision, setRevision] = useState(0);
   const [, setDraftRevision] = useState(0);
   const [graphSelection, setGraphSelection] = useState<string | null>(null);
   const [graphPreviewId, setGraphPreviewId] = useState<string | null>(null);
   const draggedTab = useRef<string | null>(null);
+  const [dropTab, setDropTab] = useState<{ paneId: string; before: string | null } | null>(null);
   const [dropPane, setDropPane] = useState<string | null>(null);
   const [recentMode, setRecentMode] = useState(false);
   const [visits, setVisits] = useState<readonly string[]>([]);
@@ -140,7 +145,9 @@ export function Shell(props: ShellProps) {
   const [graphBox, setGraphBox] = useState({ left: 0, top: 0, width: 600, height: 500 });
   const pane = activePane(layout);
   const tab = activeTab(layout);
-  const theme = themeButton(layout.theme);
+  const theme = themeButton(layout.theme, scheme, layout.preferences);
+  const palette = effectiveScheme(layout.theme, scheme, layout.preferences);
+  const graphTheme = useMemo(() => ({ theme: palette, accent: layout.preferences.accent }), [palette, layout.preferences.accent]);
   const selectedId = tab.kind === "graph" ? graphSelection : tabSelection(tab);
   const graphPane = layout.panes.find((group) => group.tabs.some((entry) => entry.id === group.activeTab && entry.kind === "graph"));
   const graphVisible = graphPane !== undefined && (width >= 850 || graphPane.id === layout.activePane);
@@ -157,7 +164,7 @@ export function Shell(props: ShellProps) {
     if (mayRemoveDrafts(drafts, live.current.layout, next, () => window.confirm(DISCARD_PROMPT))) setLayout(next);
   };
   const select = (id: string | null, newTab = false, paneId = layout.activePane, keepSidebar = false): void => {
-    const next = openDocument(layout, id, { newTab, paneId });
+    const next = (id === null ? openDocument : openWithPreferences)(layout, id, { newTab, paneId });
     change(width < 850 && !keepSidebar ? { ...next, treeVisible: false } : next);
     setCompactContext(false);
   };
@@ -189,13 +196,14 @@ export function Shell(props: ShellProps) {
     void (async () => {
       try {
         const response = await fetchJson("/api/workspace-state");
-        const value = await response.json() as { viewId?: unknown; layout?: unknown };
+        const value = await response.json() as { viewId?: unknown; layout?: unknown; info?: { version: string; vaultRoot: string } };
         if (!current) return;
         if (response.ok && typeof value.viewId === "string") {
           viewId.current = value.viewId;
+          if (value.info) setInfo(value.info);
           const restored = parseWorkspaceLayout(value.layout);
           if (restored) {
-            setLayout(restored);
+            setLayout(restoreWorkspace(restored));
             setVisits(restored.panes.flatMap((pane) => pane.tabs.flatMap((tab) => tab.history)).reduce<readonly string[]>(recordVisit, []));
           }
         } else setPersistError(true);
@@ -214,11 +222,11 @@ export function Shell(props: ShellProps) {
   useEffect(() => {
     if (!ready) return;
     history.replaceState(null, "", formatHash(selectedId));
-    const attr = themeAttr(layout.theme);
-    if (attr === null) delete document.documentElement.dataset.weaveTheme;
-    else document.documentElement.dataset.weaveTheme = attr;
+    document.documentElement.dataset.weaveTheme = palette;
+    document.documentElement.dataset.weaveScheme = THEMES[palette].scheme;
+    document.documentElement.dataset.weaveAccent = layout.preferences.accent;
     saveTheme(localStorage, layout.theme);
-  }, [ready, selectedId, layout.theme]);
+  }, [ready, selectedId, layout.theme, palette, layout.preferences.accent]);
   const pendingSave = useRef(Promise.resolve());
   useEffect(() => {
     if (!ready || !viewId.current) return;
@@ -265,7 +273,7 @@ export function Shell(props: ShellProps) {
         else live.current.select(null);
       },
       closeTab: () => { const current = live.current.layout; change(closeTab(current, current.activePane, activeTab(current).id)); },
-      cycleTheme: () => setLayout((current) => ({ ...current, theme: cycleTheme(current.theme) })),
+      toggleTheme: () => setLayout((current) => ({ ...current, theme: toggleTheme(current.theme, schemeOf(window), current.preferences) })),
       focusSelector: (selector) => {
         if (selector === COLUMN_FOCUS_SELECTORS.graph) setLayout((current) => ({ ...openGraph(current), ...(window.innerWidth < 850 ? { treeVisible: false } : {}) }));
         else if (selector === COLUMN_FOCUS_SELECTORS.tree || selector === TREE_FILTER_SELECTOR) setLayout((current) => ({ ...current, treeVisible: true }));
@@ -304,6 +312,7 @@ export function Shell(props: ShellProps) {
     if (tabDropSource(layout, paneId, draggedTab.current) === null && !event.dataTransfer?.types.includes(NOTE_DRAG_TYPE)) return;
     event.preventDefault();
     if (event.dataTransfer) event.dataTransfer.dropEffect = draggedTab.current === null ? "copy" : "move";
+    setDropTab(null);
     setDropPane(paneId);
   };
   const tabDrop = (paneId: string, event: DragEvent): void => {
@@ -318,6 +327,20 @@ export function Shell(props: ShellProps) {
     });
     draggedTab.current = null;
     setDropPane(null);
+    setDropTab(null);
+  };
+  const reorderDragOver = (pane: Pane, before: string | null, event: DragEvent): void => {
+    if (!pane.tabs.some((tab) => tab.id === draggedTab.current)) return;
+    event.preventDefault(); event.stopPropagation();
+    event.dataTransfer!.dropEffect = "move";
+    setDropPane(null); setDropTab({ paneId: pane.id, before });
+  };
+  const reorderDrop = (pane: Pane, event: DragEvent): void => {
+    const id = draggedTab.current;
+    if (id === null || !pane.tabs.some((tab) => tab.id === id)) return;
+    event.preventDefault(); event.stopPropagation();
+    setLayout((current) => reorderTab(current, pane.id, id, dropTab?.paneId === pane.id ? dropTab.before : null));
+    draggedTab.current = null; setDropTab(null); setDropPane(null);
   };
   const renderPane = (group: Pane) => {
     const current = group.tabs.find((entry) => entry.id === group.activeTab)!;
@@ -327,14 +350,27 @@ export function Shell(props: ShellProps) {
       onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropPane(null); }}
       hidden={width < 850 && !isActive} onFocusCapture={() => { if (!isActive) setLayout((value) => ({ ...value, activePane: group.id })); }}
       onPointerDown={() => { if (!isActive) setLayout((value) => ({ ...value, activePane: group.id })); }}>
-      <div class="weave-tabs" role="tablist" aria-label="Open documents">
-        {group.tabs.map((entry) => <div key={entry.id} class={`weave-tab${entry.id === current.id ? " weave-tab-active" : ""}`}>
+      <div class="weave-tabs" role="tablist" aria-label="Open documents" onDragOver={(event) => reorderDragOver(group, null, event)} onDrop={(event) => reorderDrop(group, event)}>
+        {group.tabs.map((entry) => <div key={entry.id} class={`weave-tab${entry.id === current.id ? " weave-tab-active" : ""}${dropTab?.paneId === group.id && dropTab.before === entry.id ? " weave-tab-drop-before" : ""}${dropTab?.paneId === group.id && dropTab.before === null && entry === group.tabs.at(-1) ? " weave-tab-drop-after" : ""}`}
+          onDragOver={(event) => {
+            const bounds = event.currentTarget.getBoundingClientRect();
+            const before = event.clientX < bounds.left + bounds.width / 2 ? entry.id : group.tabs[group.tabs.indexOf(entry) + 1]?.id ?? null;
+            reorderDragOver(group, before, event);
+          }} onDrop={(event) => reorderDrop(group, event)}>
           <button type="button" role="tab" title={titleOf(entry, data.graph)} id={`tab-${entry.id}`} aria-selected={entry.id === current.id} aria-controls={`panel-${group.id}`} tabIndex={entry.id === current.id ? 0 : -1}
-            draggable={layout.panes.length === 2}
+            draggable
             onDragStart={(event) => { draggedTab.current = entry.id; event.dataTransfer!.effectAllowed = "move"; event.dataTransfer!.setData("application/x-weave-tab", entry.id); }}
             onClick={() => setLayout(activateTab(layout, group.id, entry.id))}
             onKeyDown={(event) => {
               const offset = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+              if (offset && event.altKey && !event.ctrlKey && !event.metaKey) {
+                event.preventDefault(); event.stopPropagation();
+                const index = group.tabs.indexOf(entry);
+                const before = offset < 0 ? group.tabs[Math.max(0, index - 1)]!.id : group.tabs[index + 2]?.id ?? null;
+                setLayout(reorderTab(layout, group.id, entry.id, before));
+                requestAnimationFrame(() => document.getElementById(`tab-${entry.id}`)?.focus());
+                return;
+              }
               if (!offset && event.key !== "Home" && event.key !== "End") return;
               event.preventDefault();
               const index = event.key === "Home" ? 0 : event.key === "End" ? group.tabs.length - 1 : (group.tabs.indexOf(entry) + offset + group.tabs.length) % group.tabs.length;
@@ -361,7 +397,7 @@ export function Shell(props: ShellProps) {
         </div></details>
       </div>
       <div class="weave-pane-content" role="tabpanel" tabIndex={-1} id={`panel-${group.id}`} aria-labelledby={`tab-${current.id}`} {...(current.kind === "graph" ? { ref: graphSlot } : {})}>
-        {current.kind === "document" ? <DocumentView key={`${current.id}:${current.cursor}:${tabSelection(current)}`} tab={current} graph={data.graph} drafts={drafts} revision={revision} now={now}
+        {current.kind === "document" ? <DocumentView key={`${current.id}:${current.cursor}:${tabSelection(current)}`} preferences={layout.preferences} tab={current} graph={data.graph} drafts={drafts} revision={revision} now={now}
           onSelect={(id, newTab) => select(id, newTab, group.id)} onSave={save} onScroll={(value) => rememberScroll(current.id, value)}
           onSearch={() => setOverlay("search")} onGraph={showGraph} /> : null}
       </div>
@@ -369,7 +405,7 @@ export function Shell(props: ShellProps) {
   };
 
   return <>
-    <div class="weave-workbench" ref={root} onDragEnd={() => { draggedTab.current = null; setDropPane(null); }}>
+    <div class="weave-workbench" style={{ "--weave-note-size": `${layout.preferences.fontSize}px`, "--weave-reading-width": layout.preferences.readable ? "760px" : "100%" }} ref={root} onDragEnd={() => { draggedTab.current = null; setDropPane(null); setDropTab(null); }}>
       <nav class="weave-ribbon" aria-label="Workspace tools">
         <button type="button" aria-label="Toggle notes sidebar" aria-pressed={layout.treeVisible} title="Notes" onClick={() => setLayout({ ...layout, treeVisible: !layout.treeVisible })}>▤</button>
         <button type="button" aria-label="Open graph view" title="Graph view" onClick={showGraph}>◌</button>
@@ -379,8 +415,8 @@ export function Shell(props: ShellProps) {
         <span class="weave-ribbon-space" />
         <button type="button" aria-label="Toggle context sidebar" aria-pressed={contextVisible} title="Context" onClick={() => width < 1050 ? setCompactContext(!compactContext) : setLayout({ ...layout, contextVisible: !layout.contextVisible })}>☷</button>
         <button type="button" aria-label="Refresh workspace" title="Refresh workspace" onClick={() => { workspace.current?.refresh(); setRevision((value) => value + 1); }}>↻</button>
-        <button type="button" aria-label={theme.hint} title={theme.hint} onClick={() => setLayout({ ...layout, theme: cycleTheme(layout.theme) })}>{theme.glyph}</button>
-        <button type="button" aria-label="Keyboard shortcuts" onClick={() => setOverlay("help")}>?</button>
+        <button type="button" aria-label={theme.hint} title={theme.hint} onClick={() => setLayout({ ...layout, theme: toggleTheme(layout.theme, scheme, layout.preferences) })}>{theme.glyph}</button>
+        <button type="button" aria-label="Settings" title="Settings" onClick={() => setOverlay("settings")}>⚙</button>
       </nav>
       <div class="weave-sidebar-dock weave-notes-dock" data-open={layout.treeVisible} inert={!layout.treeVisible} aria-hidden={!layout.treeVisible} style={{ "--weave-sidebar-width": `${Math.min(layout.treeWidth, width - 90)}px` }}><aside class="weave-sidebar weave-sidebar-notes" aria-label="Notes sidebar">
         <div class="weave-sidebar-heading"><button type="button" aria-pressed={!recentMode} onClick={() => setRecentMode(false)}>Files</button><button type="button" aria-pressed={recentMode} onClick={() => setRecentMode(true)}>Recent</button><button type="button" aria-label="Hide notes sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle notes sidebar"]')?.focus(); setLayout({ ...layout, treeVisible: false }); }}>«</button></div>
@@ -395,15 +431,16 @@ export function Shell(props: ShellProps) {
       </main>
       <div class="weave-sidebar-dock weave-context-dock" data-open={contextVisible} inert={!contextVisible} aria-hidden={!contextVisible} style={{ "--weave-sidebar-width": `${layout.contextWidth}px` }}><ResizeHandle label="Resize context sidebar" min={180} max={400} value={layout.contextWidth} onChange={(delta) => setLayout((value) => ({ ...value, contextWidth: Math.max(180, Math.min(400, value.contextWidth - delta)) }))} /><aside class="weave-sidebar weave-sidebar-context" aria-label="Context sidebar"><div class="weave-sidebar-heading"><strong>Context</strong><button type="button" aria-label="Hide context sidebar" onClick={() => { root.current?.querySelector<HTMLButtonElement>('[aria-label="Toggle context sidebar"]')?.focus(); setCompactContext(false); setLayout({ ...layout, contextVisible: false }); }}>»</button></div><ContextRail graph={data.graph} selectedId={selectedId} onSelect={select} /></aside></div>
       {hasGraph ? <div class="weave-graph-host" onDragOver={(event) => { if (graphPane) tabDragOver(graphPane.id, event); }} onDrop={(event) => { if (graphPane) tabDrop(graphPane.id, event); }} onDragLeave={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropPane(null); }} onPointerDown={() => { if (graphPane) setLayout((current) => ({ ...current, activePane: graphPane.id })); }} onFocusCapture={() => { if (graphPane) setLayout((current) => ({ ...current, activePane: graphPane.id })); }} aria-hidden={!graphVisible} style={{ ...graphBox, visibility: graphVisible ? "visible" : "hidden", pointerEvents: graphVisible ? "auto" : "none" }}>
-        <Graph graph={data.graph} selectedId={selectedId} previewId={graphPreviewId} onSelect={selectGraph} onOpen={openGraphNode} renderer={createSigmaRenderer} storage={localStorage} host={window} scheme={effectiveScheme(layout.theme, scheme)} bootFailed={data.graphFailed} fit={fit} tuner={props.tuner === true} />
+        <Graph graph={data.graph} selectedId={selectedId} previewId={graphPreviewId} onSelect={selectGraph} onOpen={openGraphNode} renderer={createSigmaRenderer} storage={localStorage} host={window} scheme={graphTheme} forces={layout.preferences.forces} groupColors={layout.preferences.groupColors} bootFailed={data.graphFailed} fit={fit} />
       </div> : null}
     </div>
-    <div class="weave-footer"><StatusBar model={statusBarModel(props.cwd, selectedId, data.graph?.model.generatedAt ?? null)} />
+    <div class="weave-footer"><StatusBar model={statusBarModel(props.cwd, selectedId)} />
       {persistError ? <span role="status">Workspace restoration unavailable</span> : null}
       {drafts.dirtySlugs().length ? <span>{drafts.dirtySlugs().length} unsaved</span> : null}
       {width < 850 && layout.panes.length > 1 ? <button type="button" onClick={() => setLayout({ ...layout, activePane: layout.panes.find((group) => group.id !== pane.id)!.id })}>Switch pane</button> : null}
     </div>
     {overlay === "search" ? <SearchPalette graph={data.graph} onSelect={select} onClose={() => setOverlay(null)} ports={{ fetch: fetchJson }} /> : null}
+    {overlay === "settings" ? <Settings compact={width <= 650} layout={layout} info={info} cwd={props.cwd} shortcut={searchShortcut(looksApple(props.platform))} onChange={(next) => { change(next); setCompactContext(next.contextVisible); }} onRefresh={() => { workspace.current?.refresh(); setRevision((value) => value + 1); }} onClose={() => setOverlay(null)} /> : null}
     {overlay === "help" ? <HelpOverlay shortcut={searchShortcut(looksApple(props.platform))} onClose={() => setOverlay(null)} /> : null}
   </>;
 }

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

@@ -1,12 +1,11 @@
 /**
  * The status bar (weave-workspace §1.2).
  *
- * Working directory, current selection, and data-as-of stamp. The
+ * Working directory and current selection. The
  * model is built by `statusBarModel`; this renders it.
  */
 
 import type { StatusBarModel } from "./shell.model";
-import { shortStamp } from "./shell.model";
 
 export function StatusBar({ model }: { model: StatusBarModel }) {
   return (
@@ -17,9 +16,6 @@ export function StatusBar({ model }: { model: StatusBarModel }) {
       <span class="weave-status-sel" title="Current item">
         {model.selection}
       </span>
-      <span class="weave-status-stamp" title="data as of">
-        {shortStamp(model.stamp)}
-      </span>
     </footer>
   );
 }