pi-weave 0.1.11 → 0.1.13

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

@@ -1,56 +1,27 @@
 /**
- * The three-column grid, its dividers and the context rail
- * (weave-workspace §1.2).
- *
- * The one interesting line is the `useLayoutEffect`: column widths reach the
- * DOM as **custom properties**, written through `applyVars` →
- * `style.setProperty`. That is the CSSOM path, which `style-src 'nonce-…'`
- * does not govern — see `cssvars.ts` for the verified reasoning — and it
- * leaves the actual `grid-template-columns` rule in the nonce'd stylesheet
- * where it can be read.
- *
- * `useLayoutEffect` rather than `useEffect` so the widths land before paint;
- * with `useEffect` the first frame renders at whatever the CSS fallback says
- * and then jumps.
- *
- * The column/divider pairing is {@link columnSlots}, not an index check here:
- * it is breakpoint-sensitive and therefore worth a test.
- *
- * All three columns are built as of P3, so {@link Column} dispatches on the
- * column id. That ternary chain is the one piece of branching in the file and
- * it is a *routing* decision, not a product one: each arm is a bare element,
- * and everything those components then decide lives in their own `.model.ts`.
+ * The fixed three-column grid and context rail. CSS owns responsive hiding;
+ * keeping all three surfaces in the DOM preserves keyboard focus targets when
+ * the viewport changes without a resize listener or persisted layout state.
  */
 
-import { Fragment } from "preact";
-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 type { EditorEvent, EditorPrompt, EditorToolbar } from "../note/editor.model";
 import { Note } from "../note/Note";
 import { Tree } from "../tree/Tree";
 import type { GraphPayload, NotePayload } from "../../shared/wire";
-import { applyVars } from "./cssvars";
-import type { ColumnId, DividerId, ResolvedColumn } from "./layout.model";
-import { columnVars } from "./layout.model";
+import type { ColumnId } from "./shell.model";
 import { ContextRail } from "./ContextRail";
-import { Divider } from "./Divider";
-import type { ColumnSlot } from "./shell.model";
-import { columnSlots, emptyStateFor } from "./shell.model";
+import { emptyStateFor } from "./shell.model";
 
 export interface ColumnsProps {
-  resolved: readonly ResolvedColumn[];
-  onDown: (divider: DividerId, clientX: number, pointerId: 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;
   selectedId: string | null;
+  recentIds: ReadonlySet<string>;
   /**
    * The §1.3 context bus.
    *
@@ -61,6 +32,7 @@ export interface ColumnsProps {
    * a handler accepting the wider type takes without a cast.
    */
   onSelect: (id: string | null) => void;
+  onOpen: (slug: string) => void;
   /** Epoch ms for relative times, read once per render by the shell. */
   now: number;
   /**
@@ -86,18 +58,6 @@ export interface ColumnsProps {
   bootFailed: boolean;
   /** Slot the graph column fills with its `fit`, for the global `g` key. */
   fit: { current: (() => void) | null };
-  /**
-   * The note editor's view model (§11 P5).
-   *
-   * Derived by the shell from the one `EditorHandle`, because the editor's
-   * state outlives the note column's mount: below 800 px the column can be
-   * unmounted by a resize, and an editor owned by the component would lose
-   * an unsaved draft to a window drag.
-   */
-  toolbar: EditorToolbar | null;
-  prompt: EditorPrompt | null;
-  draft: string;
-  send: (event: EditorEvent) => void;
 }
 
 /** One column: a titled region and whichever surface fills it. */
@@ -106,7 +66,7 @@ function Column({ id, props }: { id: ColumnId; props: ColumnsProps }) {
   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} onSelect={props.onSelect} now={props.now} /> : null}
+      {id === "tree" ? <Tree graph={props.graph} selectedId={props.selectedId} recentIds={props.recentIds} onSelect={props.onSelect} now={props.now} /> : null}
       {id === "note" ? (
         <Note
           note={props.note}
@@ -114,10 +74,7 @@ function Column({ id, props }: { id: ColumnId; props: ColumnsProps }) {
           selectedId={props.selectedId}
           onSelect={props.onSelect}
           now={props.now}
-          toolbar={props.toolbar}
-          prompt={props.prompt}
-          draft={props.draft}
-          send={props.send}
+          onOpen={props.onOpen}
         />
       ) : null}
       {id === "graph" ? (
@@ -138,37 +95,12 @@ function Column({ id, props }: { id: ColumnId; props: ColumnsProps }) {
   );
 }
 
-/** A column and, where one follows it, its divider. */
-function Slot({ slot, props }: { slot: ColumnSlot; props: ColumnsProps }) {
-  const divider = slot.divider;
-  return (
-    <Fragment>
-      <Column id={slot.column.id} props={props} />
-      {divider === null ? null : (
-        <Divider
-          id={divider}
-          label={`Resize ${slot.column.id} column`}
-          onDown={(x, pointerId) => props.onDown(divider, x, pointerId)}
-          onMove={props.onMove}
-          onUp={props.onUp}
-          onKey={(key) => props.onKey(divider, key)}
-        />
-      )}
-    </Fragment>
-  );
-}
-
 export function Columns(props: ColumnsProps) {
-  const grid = useRef<HTMLDivElement | null>(null);
-  useLayoutEffect(() => {
-    applyVars(grid.current, columnVars(props.resolved));
-  }, [props.resolved]);
-
   return (
-    <div class="weave-grid" ref={grid} data-columns={props.resolved.length}>
-      {columnSlots(props.resolved).map((slot) => (
-        <Slot key={slot.column.id} slot={slot} props={props} />
-      ))}
+    <div class="weave-grid">
+      <Column id="tree" props={props} />
+      <Column id="note" props={props} />
+      <Column id="graph" props={props} />
     </div>
   );
 }

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

@@ -2,8 +2,7 @@
  * The header bar (weave-workspace §1.2).
  *
  * Title, the `⌘K` search button, the `vault:N · repo:… · N nodes` summary,
- * the refresh button and the connection dot. Every string and every tone
- * comes from `shell.model.ts`.
+ * 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
@@ -16,12 +15,11 @@
 import { useState } from "preact/hooks";
 import { LOGO_MARK_B64, LOGO_MARK_MIME } from "../../shared/logo";
 import type { ThemeButtonView } from "./theme.model";
-import type { ConnectionView, HeaderSummary } from "./shell.model";
+import type { HeaderSummary } from "./shell.model";
 import { REFRESH_ICON_PATHS, SEARCH_PLACEHOLDER, searchHint, summaryParts } from "./shell.model";
 
 export interface HeaderProps {
   summary: HeaderSummary;
-  connection: ConnectionView;
   shortcut: string;
   onRefresh: () => void;
   /** Opens the ⌘K palette. The same action the global key performs. */
@@ -116,12 +114,6 @@ export function Header(props: HeaderProps) {
         {props.theme.glyph}
       </button>
       <RefreshButton onRefresh={props.onRefresh} />
-      <span class={`weave-conn weave-conn-${props.connection.tone}`} title={props.connection.hint}>
-        <span class="weave-conn-dot" aria-hidden="true">
-          ●
-        </span>
-        {props.connection.label}
-      </span>
     </header>
   );
 }

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

@@ -1,62 +1,49 @@
 /**
- * The workspace shell (weave-workspace §1.2).
+ * The workspace shell.
  *
- * Header, three resizable columns, context rail, status bar. This component
- * holds the wiring and nothing else — every value it renders comes from a
- * pure function in `shell.model.ts`, `layout.model.ts` or `drag.model.ts`,
- * and the fetch/SSE loop is `workspace.ts`. What is left here is hooks:
- * signals in, callbacks out.
+ * Header, three fixed columns, context rail, status bar. This component holds
+ * the wiring and nothing else — every value it renders comes from pure
+ * functions in the shell models,
+ * and the fetch/poll loop is `workspace.ts`. What is left here is hooks:
+ * state in, callbacks out.
  *
- * The three effects, all one-liners over injected units:
+ * The main effects are one-liners over injected units:
  *
- *  1. **mount** — `startWorkspace` fetches the graph and opens the stream;
- *     the returned `stop` is the cleanup, so a hot reload cannot leak a
- *     socket.
- *  2. **resize** — `watchViewport` keeps `width` current, because the width
- *     picks the breakpoint, which decides how many columns exist.
- *  3. **keys** — `watchKeys` attaches the one global `keydown` listener
+ *  1. **mount** — `startWorkspace` fetches the graph and starts polling;
+ *     the returned `stop` is the cleanup, so a hot reload cannot leak a timer.
+ *  2. **keys** — `watchKeys` attaches the one global `keydown` listener
  *     (§11 P4). Its context is read through `live`, because a listener
  *     registered at mount outlives every render and a captured overlay flag
  *     would let `⌘K` stack a palette on top of itself.
- *
- * Layout persistence is not an effect: `dividerHandlers` writes to
- * `localStorage` on release and on a keyboard nudge, never per frame.
  */
 
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { fetchJson } from "../api.dom";
+import { openNote } from "../api";
 import type { ColorScheme } from "../graph/graph.model";
 import { schemeOf, watchScheme } from "../graph/scheme";
 import { createSigmaRenderer } from "../graph/renderer.dom";
-import { domEventSource } from "../live";
-import { createEditor, watchUnload, type EditorHandle } from "../note/editor.controller";
-import { editorPrompt, editorToolbar, initialEditorState, shouldBlockUnload } from "../note/editor.model";
 import { SearchPalette } from "../search/SearchPalette";
 import { restoreSelection, saveSelection } from "../selection.storage";
-import { connection, graph, graphFailed, noteBody, selectedId } from "../state";
+import { initialWorkspaceState } from "../state";
+import type { WorkspaceState } from "../state";
 import type { WorkspaceHandle } from "../workspace";
-import { observeNotes, select, startWorkspace } from "../workspace";
+import { startWorkspace } from "../workspace";
 import { Columns } from "./Columns";
 import { deeplinkSelection, formatHash } from "./deeplink.model";
-import { dividerHandlers } from "./drag.model";
 import { Header } from "./Header";
 import { HelpOverlay } from "./HelpOverlay";
 import { watchKeys } from "./keys";
 import { focusSelector, runShellAction } from "./keys.model";
-import type { LayoutState } from "./layout.model";
-import { breakpointFor, loadLayout, resolveColumns, saveLayout } from "./layout.model";
 import { StatusBar } from "./StatusBar";
 import type { OverlayId } from "./shell.model";
-import { TICK_MS, connectionView, looksApple, searchShortcut, statusBarModel, summarize } from "./shell.model";
+import { TICK_MS, looksApple, searchShortcut, statusBarModel, summarize } from "./shell.model";
 import { cycleTheme, effectiveScheme, loadTheme, saveTheme, themeAttr, themeButton } from "./theme.model";
 import type { ThemeChoice } from "./theme.model";
-import { watchViewport } from "./viewport";
 
 /**
  * Write the choice onto `<html>`, so the sheet's attribute branch and the
- * media query agree on who is in charge (see `theme.model.ts`'s header). The
- * one DOM write the theme needs, and it is here rather than in the model for
- * the same reason `applyVars` is: it is an effect, not a decision.
+ * media query agree on who is in charge (see `theme.model.ts`'s header).
  */
 function applyThemeAttr(choice: ReturnType<typeof themeAttr>): void {
   if (choice === null) delete document.documentElement.dataset.weaveTheme;
@@ -66,17 +53,13 @@ function applyThemeAttr(choice: ReturnType<typeof themeAttr>): void {
 export interface ShellProps {
   /** From the page bootstrap. Shown in the status bar. */
   cwd: string;
-  /** `window.innerWidth` at mount. Injected so the first render is testable. */
-  initialWidth: number;
   /** `navigator.platform`, for the `⌘K` vs `Ctrl K` hint. */
   platform: string;
 }
 
 export function Shell(props: ShellProps) {
-  const [width, setWidth] = useState(props.initialWidth);
+  const [workspaceState, setWorkspaceState] = useState<WorkspaceState>(initialWorkspaceState);
   const [overlay, setOverlay] = useState<OverlayId>(null);
-  const [layout, setLayout] = useState<LayoutState>(() => loadLayout(localStorage, props.initialWidth));
-  const [editorState, setEditorState] = useState(initialEditorState);
   // The theme: what the user picked, and what the OS is currently saying. Two
   // states because they answer different questions — `theme` changes on a
   // button press or the `t` key, `systemScheme` on an OS flip while the user
@@ -87,21 +70,13 @@ export function Shell(props: ShellProps) {
   // Filled by the graph column at mount, cleared on unmount. The global `g`
   // key's only route to the renderer — see `Graph.tsx`'s `fit` prop.
   const fit = useRef<(() => void) | null>(null);
-  // The gesture and the global key listener read through these so a handler
-  // built on an early render still sees current state — see `DragHost`.
-  const live = useRef({ layout, width, overlay });
-  live.current = { layout, width, overlay };
-
-  // Built once and owned by the shell, not by the note column. The column is
-  // unmounted by a resize below 800 px, and an editor whose lifetime was the
-  // column's would lose an unsaved draft to a window drag.
-  const editor: EditorHandle = useMemo(
-    () => createEditor({ fetch: fetchJson, select: (id) => void select(fetchJson, id), onChange: setEditorState }),
-    [],
-  );
+  // The global key listener reads through this so a handler registered at
+  // mount still sees the current overlay.
+  const live = useRef({ overlay, selectedId: workspaceState.selectedId });
+  live.current = { overlay, selectedId: workspaceState.selectedId };
 
   useEffect(() => {
-    const handle = startWorkspace({ fetch: fetchJson, open: domEventSource });
+    const handle = startWorkspace({ fetch: fetchJson, state: workspaceState, setState: setWorkspaceState });
     workspace.current = handle;
     return () => handle.stop();
   }, []);
@@ -116,43 +91,31 @@ export function Shell(props: ShellProps) {
   const bootHash = useRef(location.hash);
   useEffect(() => {
     if (!selectionRestored.current) return;
-    saveSelection(localStorage, selectedId.value);
+    saveSelection(localStorage, workspaceState.selectedId);
     // replaceState, not pushState: the address bar mirrors the note on
     // screen, and reading three notes is not three history entries. The
     // *string* is the model's (`formatHash`); this is the write itself.
-    history.replaceState(null, "", formatHash(selectedId.value));
-  }, [selectedId.value]);
+    history.replaceState(null, "", formatHash(workspaceState.selectedId));
+  }, [workspaceState.selectedId]);
   useEffect(() => {
-    if (selectionRestored.current || graph.value === null) return;
+    if (selectionRestored.current || workspaceState.graph === null) return;
     selectionRestored.current = true;
-    if (selectedId.value !== null) return;
+    if (workspaceState.selectedId !== null) return;
     // A link wins over storage: the address bar is an explicit instruction,
     // the saved note is a habit. A link to a note the graph does not hold is
     // refused (see `deeplink.model.ts`) and continuity falls through.
-    const linked = deeplinkSelection(bootHash.current, graph.value);
-    if (linked !== null) void select(fetchJson, linked);
+    const linked = deeplinkSelection(bootHash.current, workspaceState.graph);
+    if (linked !== null) void workspace.current?.select(linked);
     else {
-      const saved = restoreSelection(graph.value, localStorage);
-      if (saved !== null) void select(fetchJson, saved);
+      const saved = restoreSelection(workspaceState.graph, localStorage);
+      if (saved !== null) void workspace.current?.select(saved);
     }
-  }, [graph.value]);
-
-  // Every note that arrives, from any of the three directions it can arrive
-  // from (mount, selection, SSE refetch), so the editor can decide whether it
-  // is news or an interruption — see `editor.model.ts`'s header.
-  useEffect(() => observeNotes((payload) => editor.send({ type: "loaded", payload })), []);
-
-  // Read through a thunk, not captured: a listener registered at mount
-  // outlives every render, so a captured state would always look clean and
-  // the guard would be installed but inert.
-  useEffect(() => watchUnload(window, () => shouldBlockUnload(editor.state())), []);
-
-  useEffect(() => watchViewport(window, setWidth), []);
+  }, [workspaceState.graph]);
 
   // The relative-time clock. Every "8h ago" in the tree and the note meta is
   // computed from a `now` stamped per render, and a resting workspace never
   // re-renders on its own — so the minutes used to go stale until the next
-  // SSE frame. One interval at `TICK_MS` (the reasoning is in `shell.model.ts`);
+  // poll. One interval at `TICK_MS` (the reasoning is in `shell.model.ts`);
   // `setNow` with a new value re-renders, and a re-render is all the copy
   // needs to catch up.
   const [now, setNow] = useState(() => Date.now());
@@ -176,45 +139,23 @@ export function Shell(props: ShellProps) {
   useEffect(
     () =>
       watchKeys(document, {
-        context: () => ({ overlay: live.current.overlay, hasSelection: selectedId.value !== null }),
+        context: () => ({ overlay: live.current.overlay, hasSelection: live.current.selectedId !== null }),
         run: (action) =>
           runShellAction(action, {
             setOverlay,
             focusSelector: (selector) => focusSelector(document, selector),
             fitGraph: () => fit.current?.(),
-            // Through the editor, not straight to `select`: clearing the
-            // selection while a draft is dirty must be refused like any
-            // other navigation, and `Esc` is the easiest way to do it by
-            // accident.
-            clearSelection: () => editor.send({ type: "navigate", id: null }),
-            toggleEdit: () => editor.send({ type: "toggle" }),
-            saveNote: () => editor.send({ type: "save" }),
+            clearSelection: () => { void workspace.current?.select(null); },
             cycleTheme: () => setTheme((current) => cycleTheme(current)),
           }),
       }),
     [],
   );
 
-  const resolved = useMemo(() => resolveColumns(layout, width, breakpointFor(width)), [layout, width]);
-
-  // Built once: the handlers read state through `live`, so they never go
-  // stale and never need to be rebuilt.
-  const drag = useMemo(
-    () =>
-      dividerHandlers({
-        layout: () => live.current.layout,
-        width: () => live.current.width,
-        setLayout,
-        persist: (next) => void saveLayout(localStorage, next),
-      }),
-    [],
-  );
-
   return (
     <>
       <Header
-        summary={summarize(graph.value)}
-        connection={connectionView(connection.value)}
+        summary={summarize(workspaceState.graph)}
         shortcut={searchShortcut(looksApple(props.platform))}
         onRefresh={() => workspace.current?.refresh()}
         onSearch={() => setOverlay("search")}
@@ -222,26 +163,15 @@ export function Shell(props: ShellProps) {
         onTheme={() => setTheme((current) => cycleTheme(current))}
       />
       <Columns
-        resolved={resolved}
-        onDown={drag.onDown}
-        onMove={drag.onMove}
-        onUp={drag.onUp}
-        onKey={drag.onKey}
         scheme={effectiveScheme(theme, systemScheme)}
-        bootFailed={graphFailed.value}
-        graph={graph.value}
-        note={noteBody.value}
-        selectedId={selectedId.value}
-        // Through the editor: a selection made while a draft is dirty is
-        // parked rather than performed, and the column then asks. Every
-        // column's `onSelect` routes here, so there is one guarded door
-        // rather than three that each had to remember.
-        onSelect={(id) => editor.send({ type: "navigate", id })}
+        bootFailed={workspaceState.graphFailed}
+        graph={workspaceState.graph}
+        note={workspaceState.note}
+        selectedId={workspaceState.selectedId}
+        recentIds={workspaceState.recentIds}
+        onSelect={(id) => void workspace.current?.select(id)}
+        onOpen={(slug) => void openNote(fetchJson, slug)}
         now={now}
-        toolbar={editorToolbar(editorState)}
-        prompt={editorPrompt(editorState)}
-        draft={editorState.draft}
-        send={editor.send}
         // The graph column's three ports (§7.5, §10). Supplied here, at the
         // one place that is already allowed to name browser globals, so
         // `Graph.tsx` and everything under it takes its world as parameters.
@@ -252,23 +182,20 @@ export function Shell(props: ShellProps) {
       />
       {/*
         `model.generatedAt`, not `stamp`. The two used to be the same string;
-        since §15.6 `stamp` is a content digest (a hex validator for the ETag
-        and the SSE dedupe) and would render as `a3f9c2…` under a label that
+        since §15.6 `stamp` is the ETag's content digest and would render as
+        `a3f9c2…` under a label that
         says "data as of". `generatedAt` kept the data-as-of job, which is
         exactly what this bar wants.
       */}
       <StatusBar
-        model={statusBarModel(props.cwd, selectedId.value, connection.value, graph.value?.model.generatedAt ?? null)}
+        model={statusBarModel(props.cwd, workspaceState.selectedId, workspaceState.graph?.model.generatedAt ?? null)}
       />
       {overlay === "search" ? (
         <SearchPalette
-          graph={graph.value}
-          // Through the editor, like every column's `onSelect`: choosing a hit
-          // while a draft is dirty must park behind the UNSAVED prompt, not
-          // wipe it. This was the one navigation path that skipped the guard.
-          onSelect={(id) => editor.send({ type: "navigate", id })}
+          graph={workspaceState.graph}
+          onSelect={(id) => void workspace.current?.select(id)}
           onClose={() => setOverlay(null)}
-          ports={{ fetch: fetchJson, now: Date.now, delay: (run, ms) => void setTimeout(run, ms) }}
+          ports={{ fetch: fetchJson }}
         />
       ) : null}
       {overlay === "help" ? (

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

@@ -1,7 +1,7 @@
 /**
  * The status bar (weave-workspace §1.2).
  *
- * Working directory, current selection, data-as-of stamp, connection. The
+ * Working directory, current selection, and data-as-of stamp. The
  * model is built by `statusBarModel`; this renders it.
  */
 
@@ -20,9 +20,6 @@ export function StatusBar({ model }: { model: StatusBarModel }) {
       <span class="weave-status-stamp" title="data as of">
         {shortStamp(model.stamp)}
       </span>
-      <span class={`weave-conn weave-conn-${model.connection.tone}`} title={model.connection.hint}>
-        {model.connection.label}
-      </span>
     </footer>
   );
 }

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

@@ -1,5 +1,5 @@
 /**
- * The inline icon sprite (Tier 6, §8 P6.4).
+ * The inline icon sprite (Tier 6,  P6.4).
  *
  * ## Why a sprite of path data
  *
@@ -26,7 +26,7 @@
  *
  * ## Why the renderer is not here
  *
- * §10: this module decides (which glyphs exist, which are filled, how fat a
+ * : this module decides (which glyphs exist, which are filled, how fat a
  * dot is), and the `.tsx` renders (`<svg>` JSX from {@link IconDef}). That
  * also keeps this file free of JSX and DOM types, so the root `tsconfig.json`
  * project compiles its tests.
@@ -43,8 +43,7 @@ export type IconName =
   | "entryPoint"
   | "gitState"
   | "external"
-  | "file"
-  | "session";
+  | "file";
 
 /** The box every path is drawn in, and the stroke the sheet's aesthetic asks for. */
 export const ICON_BOX = 16;
@@ -82,8 +81,6 @@ export const ICONS: Readonly<Record<IconName, IconDef>> = {
   vault: { d: ["M8 2.6 13.4 8 8 13.4 2.6 8Z"], filled: true },
   /** A note page with a folded corner — the vault's contents. */
   note: { d: ["M4.5 2.75h4.75l2.25 2.25v8.25h-7Z", "M9.25 2.75V5h2.25"], filled: false },
-  /** A session memory page: a rounded speech bubble with a tail. */
-  session: { d: ["M3 3.75h10v6.5H6.75L3.75 13v-2.75H3Z"], filled: false },
   /** The repository root, a framed card with a header rule — the TUI's ▣. */
   repository: { d: ["M2.75 4.25h10.5v7.5H2.75Z", "M2.75 6.75h10.5"], filled: false },
   /** A folder — the tree's module / synthesized vault directory. */
@@ -98,4 +95,4 @@ export const ICONS: Readonly<Record<IconName, IconDef>> = {
   external: { d: ["M4.5 11.5l7-7", "M6.75 4.5h4.75v4.75"], filled: false },
   /** A plain repo file, an unfolded page. */
   file: { d: ["M4.5 2.75h7v10.5h-7Z"], filled: false },
-};
+};

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

@@ -25,19 +25,9 @@
  * | --- | --- |
  * | `⌘K` / `Ctrl K` | always — a modifier shortcut is unambiguous even mid-word |
  * | `⌘1` `⌘2` `⌘3` | always |
- * | `⌘E` `⌘S` | always — the editor's two keys (§11 P5.4) |
  * | `Esc` | an overlay is open, or something is selected. Never otherwise |
  * | `/` `g` `?` `t` | **only** when focus is not in a text field and no overlay is open |
  *
- * `⌘S` is claimed **even while typing**, which is the one place this map
- * deliberately overrides the browser. It has to be: the browser's `⌘S` is
- * "save this page as HTML", which in a note editor is never what the user
- * meant, and the moment they most want to save is the moment their cursor is
- * in the textarea. `⌘E` is claimed on the same grounds — the browser has no
- * default for it, and toggling out of the editor is a thing to do *from*
- * inside the editor. Neither fires when an overlay is open, because the
- * palette owns every key but `Escape`.
- *
  * `j` / `k` are not here at all: they are tree-scoped, so they live in
  * `tree.model.ts`'s `normalizeTreeKey` where the tree's own handler applies
  * them — a global `j` would move the tree selection while the user is looking
@@ -51,9 +41,7 @@
  * `⌘K`, which would otherwise re-open the palette on top of itself.
  */
 
-import { COLUMNS, columnsAt } from "./layout.model";
-import type { ColumnId } from "./layout.model";
-import type { OverlayId } from "./shell.model";
+import { COLUMNS, type ColumnId, type OverlayId } from "./shell.model";
 
 // --- the event, without the DOM ---------------------------------------------------
 
@@ -102,25 +90,17 @@ export type ShellAction =
   | { readonly type: "filterTree" }
   | { readonly type: "fitGraph" }
   | { readonly type: "clearSelection" }
-  /** `⌘E` — toggle the note column between read and edit (§11 P5.4). */
-  | { readonly type: "toggleEdit" }
-  /** `⌘S` — save the open draft. */
-  | { readonly type: "saveNote" }
   /** `t` — cycle the colour theme: system → light → dark → system. */
   | { readonly type: "cycleTheme" };
 
 /**
  * The command-key letters, as data.
  *
- * A table for the same reason {@link COLUMN_DIGITS} is one: "every editor key
- * has a mapping" becomes a test over this object rather than three
- * hand-written cases, and the help sheet is generated from it so it cannot
- * document a key the code does not implement.
+ * A table for the same reason {@link COLUMN_DIGITS} is one: the help sheet is
+ * generated from it so it cannot document a key the code does not implement.
  */
 export const COMMAND_KEYS: Readonly<Record<string, ShellAction>> = {
   k: { type: "openSearch" },
-  e: { type: "toggleEdit" },
-  s: { type: "saveNote" },
 };
 
 /**
@@ -140,9 +120,7 @@ export const COLUMN_DIGITS: Readonly<Record<string, ColumnId>> = { "1": "tree",
  * search button once was. Derived from `columnsAt`, not listed, so the caveat
  * cannot drift from the breakpoints the sheet is attached to.
  */
-const COLLAPSIBLE_COLUMNS: ReadonlySet<ColumnId> = new Set(
-  COLUMNS.filter((c) => columnsAt("medium").includes(c) === false || columnsAt("narrow").includes(c) === false),
-);
+const COLLAPSIBLE_COLUMNS: ReadonlySet<ColumnId> = new Set(["tree", "graph"]);
 
 /**
  * Whether a modifier combination counts as "the platform's command key".
@@ -249,7 +227,7 @@ export interface KeyTarget {
  * The slice of `KeyboardEvent` the subscription reads.
  *
  * Structural, so the platform's satisfies it without a cast and a fake is an
- * object literal — the same port shape `EventSourceLike` and `HttpResponse`
+ * object literal — the same port shape as `HttpResponse`
  * use, for the same reason: there is no DOM test environment (§10).
  */
 export interface KeyboardEventLike {
@@ -358,10 +336,6 @@ export interface ShellEffects {
   fitGraph(): void;
   /** Write `null` to §1.3's `selectedId`. */
   clearSelection(): void;
-  /** `⌘E` — dispatch `toggle` into the note editor. */
-  toggleEdit(): void;
-  /** `⌘S` — dispatch `save` into the note editor. */
-  saveNote(): void;
   /** `t` — advance the user's theme choice by one step in its cycle. */
   cycleTheme(): void;
 }
@@ -385,10 +359,6 @@ export function runShellAction(action: ShellAction, fx: ShellEffects): void {
       return fx.fitGraph();
     case "clearSelection":
       return fx.clearSelection();
-    case "toggleEdit":
-      return fx.toggleEdit();
-    case "saveNote":
-      return fx.saveNote();
     case "cycleTheme":
       return fx.cycleTheme();
   }
@@ -448,13 +418,6 @@ export function keyHelp(cmd: string): readonly KeyHelpGroup[] {
         { combo: "Home / End", what: "First / last row" },
       ],
     },
-    {
-      title: "Note",
-      entries: [
-        { combo: `${cmd}E`, what: "Toggle read / edit" },
-        { combo: `${cmd}S`, what: "Save the open draft" },
-      ],
-    },
     {
       title: "Graph",
       entries: [{ combo: "g", what: "Fit the whole graph" }],