pi-weave 0.3.0 → 0.3.2

package/src/web/client/graph/renderer.ts

@@ -1,5 +1,6 @@
+import type { GraphTheme } from "../../shared/themes";
 import type { Point } from "../../shared/layout";
-import type { ColorScheme, EdgeDisplayOverride, GraphSettings, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, ViewBox } from "./graph.model";
+import type { EdgeDisplayOverride, GraphSettings, NodeDisplayOverride, RenderEdge, RenderGraph, RenderNode, ViewBox } from "./graph.model";
 import { edgeReducer, fadeStep, frameBox, graphSettings, nodeReducer } from "./graph.model";
 import type { ProjectedGraph } from "./project";
 import { positionsOf, project, syncPositions } from "./project";
@@ -25,7 +26,7 @@ export interface RenderContainer {
  * driven by a recording fake in a test and by `createSigmaRenderer` in the
  * browser — the same port-shaped injection `api.ts` uses for `fetch`.
  */
-export type RendererFactory = (scheme: ColorScheme) => GraphRenderer;
+export type RendererFactory = (scheme: GraphTheme) => GraphRenderer;
 
 // --- the sigma port -----------------------------------------------------------------
 
@@ -44,6 +45,7 @@ export type RendererFactory = (scheme: ColorScheme) => GraphRenderer;
  */
 export interface SigmaLike {
   on(event: "clickNode", handler: (payload: { node: string }) => void): unknown;
+  on(event: "doubleClickNode", handler: (payload: { node: string; preventSigmaDefault(): void }) => void): unknown;
   on(event: "clickStage", handler: () => void): unknown;
   on(event: "downNode", handler: (payload: { node: string }) => void): unknown;
   on(event: "enterNode", handler: (payload: { node: string }) => void): unknown;
@@ -52,7 +54,7 @@ export interface SigmaLike {
   on(event: "upNode" | "upStage", handler: () => void): unknown;
   viewportToGraph(position: { x: number; y: number }): Point;
   setSetting(key: "nodeReducer", value: (id: string, data: RenderNode) => NodeDisplayOverride): unknown;
-  setSetting(key: "edgeReducer", value: (key: string, data: RenderEdge, scheme: ColorScheme) => EdgeDisplayOverride): unknown;
+  setSetting(key: "edgeReducer", value: (key: string, data: RenderEdge, scheme: GraphTheme) => EdgeDisplayOverride): unknown;
   setSetting(key: "enableCameraPanning", value: boolean): unknown;
   setGraph(graph: ProjectedGraph): unknown;
   /**
@@ -114,7 +116,7 @@ export const rafClock = (host: {
 
 export function sigmaRenderer(
   create: (graph: ProjectedGraph, container: RenderContainer, settings: GraphSettings) => SigmaLike,
-  scheme: ColorScheme,
+  scheme: GraphTheme,
   /**
    * The fade clock, or omitted for no animation at all — in which case every
    * highlight change lands at full strength on the next frame, which is the
@@ -146,6 +148,7 @@ export function sigmaRenderer(
   let dragMove: (id: string, at: Point) => void = () => {};
   let dragEnd: (id: string) => void = () => {};
   let dragging: string | null = null;
+  let nodeMoved = false;
 
   const endDrag = (id: string | null): void => {
     if (dragging === null) return;
@@ -208,16 +211,22 @@ export function sigmaRenderer(
       const instance = create(graph, container, graphSettings(scheme));
       // §1.3's context bus: a click writes `selectedId`, and the note column,
       // the tree and the context rail all recompute from it.
-      instance.on("clickNode", ({ node }) => select(node));
+      instance.on("clickNode", ({ node }) => { if (!nodeMoved) select(node); });
+      instance.on("doubleClickNode", ({ node, preventSigmaDefault }) => {
+        preventSigmaDefault();
+        if (!nodeMoved) select(node);
+      });
       instance.on("clickStage", () => select(null));
       instance.on("downNode", ({ node }) => {
         dragging = node;
+        nodeMoved = false;
         // Hold the view still while the node follows the cursor (see endDrag).
         sigma?.setSetting("enableCameraPanning", false);
         dragStart(node);
       });
       instance.on("moveBody", (payload) => {
         if (dragging !== null) {
+          nodeMoved = true;
           // Sigma's captor pans the camera on every mouse move while the
           // button is down; during a node drag that is the pan the gesture
           // must not be. `preventSigmaDefault` is the captor's own gate — it

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

@@ -11,8 +11,8 @@
  * The explicit Edit control swaps the body for a `<textarea>`; `draft` is
  * `null` in read mode, so text and mode cannot disagree. No reducer — the 686-line one that
  * stood here resolved conflicts against a revision the server no longer
- * issues. Being component state, the draft is out of the 2 s poll's reach;
- * the shell guards it through the `editor` slot below.
+ * issues. Drafts are keyed by note identity in the shared in-memory store, out of the
+ * 2 s poll's reach; the shell guards removal of their final visible tab.
  *
  * `dangerouslySetInnerHTML` is used deliberately for sanitized note HTML. The
  * alternative is parsing marked's output into a Preact tree, which means a
@@ -39,7 +39,7 @@
  */
 
 import DOMPurify from "dompurify";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import type { GraphPayload, NotePayload } from "../../shared/wire";
 import {
   CREATED_WORD,
@@ -50,15 +50,11 @@ import {
   EDITED_WORD,
   EDITOR_ARIA_LABEL,
   EMPTY_PREVIEW,
-  PREVIEW_ID,
   SAVE_LABEL,
   SAVING_LABEL,
   TASK_CHECKBOX_ATTR,
   WIKILINK_ATTR,
-  draftDirty,
-  draftMoved,
   hasTextSelection,
-  saveLanded,
   noteEmptyMessage,
   noteHeader,
   previewAnchorOf,
@@ -75,6 +71,8 @@ import {
   wikilinkTargetOf,
 } from "./note.model";
 import type { NoteHeaderView, PreviewElement, PreviewEvent } from "./note.model";
+import { createDraftStore } from "./drafts";
+import type { DraftStore } from "./drafts";
 
 /**
  * The custom properties the preview card is placed with, written by the
@@ -86,11 +84,13 @@ 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;
   selectedId: string | null;
-  onSelect: (id: string) => void;
+  onSelect: (id: string, newTab?: boolean) => void;
   onOpen: (slug: string) => void;
   /**
    * Save the note's body. Resolves `true` when the write landed; a `false`
@@ -98,12 +98,12 @@ export interface NoteProps {
    * error-reporting gesture the client has.
    */
   onSave: (slug: string, body: string) => Promise<boolean>;
-  /**
-   * The shell's handle on the open editor — the `fit` pattern again. Guards
-   * both *ask* (navigate, unload) and *close* (a tree rename of this note).
-   * Functions, not values, or a mount-time guard answers "clean" forever.
-   */
-  editor: { current: { dirty(): boolean; discard(): void } | null };
+  /** Shared across Note instances so duplicate tabs edit one in-memory body. */
+  drafts?: DraftStore;
+  /** Stable per view; distinct when the same note is mounted more than once. */
+  idPrefix?: string;
+  /** Monotonic identity of the document load that produced `note`. */
+  loadVersion: number;
   /** Epoch ms for relative times. Injected so the render is deterministic. */
   now: number;
 }
@@ -121,6 +121,7 @@ function Header({
   open,
   editing,
   saving,
+  taskSaving,
   onToggle,
   onSave,
 }: {
@@ -128,6 +129,7 @@ function Header({
   open: () => void;
   editing: boolean;
   saving: boolean;
+  taskSaving: boolean;
   onToggle: () => void;
   onSave: () => void;
 }) {
@@ -137,12 +139,12 @@ function Header({
       <p class="weave-note-meta">
         {editing ? (
           <>
-            <button type="button" class="weave-note-save" disabled={saving} onClick={onSave}>
+            <button type="button" class="weave-note-save" disabled={saving || taskSaving} onClick={onSave}>
               {saving ? SAVING_LABEL : SAVE_LABEL}
             </button>
-            <button type="button" class="weave-note-edit" onClick={onToggle}>{DONE_LABEL}</button>
+            <button type="button" class="weave-note-edit" disabled={taskSaving} onClick={onToggle}>{DONE_LABEL}</button>
           </>
-        ) : <button type="button" class="weave-note-edit" onClick={onToggle}>{EDIT_LABEL}</button>}
+        ) : <button type="button" class="weave-note-edit" disabled={taskSaving} onClick={onToggle}>{EDIT_LABEL}</button>}
         <button type="button" class="weave-note-open" title="Open in $EDITOR" aria-label="Open in $EDITOR" onClick={open}>
           <span class="weave-note-open-mark" aria-hidden="true">↗</span>
         </button>
@@ -168,7 +170,14 @@ function Header({
 }
 
 export function Note(props: NoteProps) {
+  const localDrafts = useRef(createDraftStore());
+  const drafts = props.drafts ?? localDrafts.current;
+  const generatedId = useId();
+  const previewId = `${props.idPrefix ?? generatedId}-weave-preview`;
+  const [storeVersion, setDraftVersion] = useState(0);
+  useEffect(() => drafts.subscribe(() => setDraftVersion((version) => version + 1)), [drafts]);
   const note = props.note?.note ?? null;
+  const body = note === null ? "" : drafts.getTaskBody(note.slug, note.body);
   const artifactPath = selectedArtifactPath(props.graph, props.selectedId);
   const empty = noteEmptyMessage(props.selectedId, note, props.loadFailed);
 
@@ -180,8 +189,8 @@ export function Note(props: NoteProps) {
   // only the *result* is memoized.
   const index = useMemo(() => (note === null ? null : wikiIndex(props.graph, note.slug)), [note, props.graph]);
   const html = useMemo(
-    () => (note === null || index === null ? "" : renderNote(DOMPurify, note.body, index)),
-    [note, index],
+    () => (note === null || index === null ? "" : renderNote(DOMPurify, body, index)),
+    [note, body, index],
   );
 
   // The hover card. The reducer lives in `note.model.ts`; this is its
@@ -192,90 +201,59 @@ export function Note(props: NoteProps) {
   const dispatch = (event: PreviewEvent): void => void sendPreview((state) => reducePreview(state, event));
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const cardRef = useRef<HTMLDivElement | null>(null);
-  const taskSaving = useRef(false);
-  const taskSource = useRef<{ slug: string; serverBody: string; body: string } | null>(null);
-  if (note === null) taskSource.current = null;
-  else if (taskSource.current === null || taskSource.current.slug !== note.slug || taskSource.current.serverBody !== note.body) {
-    taskSource.current = { slug: note.slug, serverBody: note.body, body: note.body };
-  }
-
-  const [draft, setDraft] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const dirty = note !== null && draft !== null && draftDirty(draft, note.body);
-  // Bumped on open and close, so a late reply knows it is late (`saveLanded`).
-  const session = useRef(0);
-  // The draft *now*: `save` outlives the render that captured its own copy.
-  const draftRef = useRef(draft);
-  draftRef.current = draft;
-
-  // During render, not in an effect: an effect runs after paint, leaving a
-  // window where the slot is still clean and a click slips the guard.
-  props.editor.current = { dirty: () => dirty, discard: () => close() };
-  useEffect(() => () => {
-    props.editor.current = null;
-  }, [props.editor]);
-
-  const close = (): void => {
-    session.current += 1;
-    setDraft(null);
-    setSaving(false);
-  };
-
-  const open = (body: string): void => {
-    session.current += 1;
-    setDraft(body);
-  };
-
+  const draft = note === null ? null : drafts.get(note.slug);
+  const taskSaving = note !== null && drafts.isTaskSaving(note.slug);
   const save = async (): Promise<void> => {
-    if (note === null || draft === null || saving) return;
-    const issued = session.current;
-    // The textarea stays enabled through the request, so the draft can move
-    // underneath it; the reply is only ever about these bytes.
-    const sent = draft;
-    setSaving(true);
-    const ok = await props.onSave(note.slug, sent);
-    // A reply for an editor that is gone must not close the one now open.
-    if (!saveLanded(issued, session.current)) return;
-    // Stay open on failure, and on success the user typed through: both hold
-    // text the server does not have, and closing would discard it.
-    if (!ok || draftMoved(sent, draftRef.current)) setSaving(false);
-    else close();
+    if (note !== null && !drafts.isTaskSaving(note.slug)) await drafts.save(note.slug, props.onSave);
   };
 
   const saveTask = async (checkbox: HTMLInputElement, taskIndex: number): Promise<void> => {
-    const source = taskSource.current;
     const restore = (): void => {
       checkbox.checked = !checkbox.checked;
       checkbox.setAttribute("aria-label", taskCheckboxLabel(checkbox.checked));
     };
-    if (source === null || taskSaving.current) {
+    if (note === null || drafts.isTaskSaving(note.slug)) {
       restore();
       return;
     }
-    const body = toggleTaskCheckbox(source.body, taskIndex);
-    if (body === null) {
+    const nextBody = toggleTaskCheckbox(drafts.getTaskBody(note.slug, note.body), taskIndex);
+    if (nextBody === null) {
       restore();
       return;
     }
 
     const inputs = [...(bodyRef.current?.querySelectorAll<HTMLInputElement>(`input[${TASK_CHECKBOX_ATTR}]`) ?? [])];
-    taskSaving.current = true;
     checkbox.setAttribute("aria-label", taskCheckboxLabel(checkbox.checked));
     for (const input of inputs) input.disabled = true;
-    const ok = await props.onSave(source.slug, body);
-    if (ok) source.body = body;
-    else restore();
-    for (const input of inputs) input.disabled = false;
-    taskSaving.current = false;
+    try {
+      if (!await drafts.saveTask(note.slug, nextBody, props.onSave)) restore();
+    } catch (error) {
+      restore();
+      throw error;
+    } finally {
+      for (const input of inputs) input.disabled = drafts.isTaskSaving(note.slug);
+    }
   };
 
+  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) return;
-    if (draft === null) open(note.body);
-    else if (!dirty || window.confirm(DISCARD_PROMPT)) close();
+    if (note === null || drafts.isTaskSaving(note.slug)) return;
+    if (drafts.get(note.slug) === null) drafts.open(note.slug, body);
+    else if (!drafts.isDirty(note.slug) || window.confirm(DISCARD_PROMPT)) drafts.discard(note.slug);
   };
   const card = preview.anchor === null ? null : previewCard(props.graph, preview.anchor);
 
+  useLayoutEffect(() => {
+    if (note !== null) drafts.taskBody(note.slug, note.body, props.loadVersion);
+  }, [drafts, note === null ? null : note.slug, note?.body, props.loadVersion]);
+
   // A card whose target note left the screen is a claim about a document that
   // is gone. Navigating (or an SSE swap of the open note, which is what
   // `note.slug` changing underneath the pointer looks like) closes it rather
@@ -284,12 +262,18 @@ export function Note(props: NoteProps) {
   // slug changes as rarely as navigation happens.
   useLayoutEffect(() => {
     dispatch({ type: "hide" });
-    // A different note is a different document: an open editor holding the
-    // previous one's text would save it over this one. The shell's guard is
-    // what asks before a dirty draft gets here.
-    close();
+    // Drafts belong to note identity and survive this Note instance changing
+    // documents or unmounting.
   }, [note === null ? null : note.slug]);
 
+  useLayoutEffect(() => {
+    if (note === null) return;
+    const saving = drafts.isTaskSaving(note.slug);
+    for (const input of bodyRef.current?.querySelectorAll<HTMLInputElement>(`input[${TASK_CHECKBOX_ATTR}]`) ?? []) {
+      input.disabled = saving;
+    }
+  }, [note === null ? null : note.slug, storeVersion, html]);
+
   // Wired after the card mounts, because both jobs depend on the live DOM:
   // the card's size (the placement decision needs measured dimensions, which
   // no render can know), and `aria-describedby`, which the link has to carry
@@ -302,7 +286,7 @@ export function Note(props: NoteProps) {
     if (body !== null) {
       const slug = preview.anchor?.slug ?? null;
       for (const link of body.querySelectorAll(`a[${WIKILINK_ATTR}]`)) {
-        if (slug !== null && link.getAttribute(WIKILINK_ATTR) === slug) link.setAttribute("aria-describedby", PREVIEW_ID);
+        if (slug !== null && link.getAttribute(WIKILINK_ATTR) === slug) link.setAttribute("aria-describedby", previewId);
         else link.removeAttribute("aria-describedby");
       }
     }
@@ -322,7 +306,7 @@ export function Note(props: NoteProps) {
     // `setProperty` is the path it has no hook on.
     element.style.setProperty(`--${PREVIEW_X}`, `${spot.x}px`);
     element.style.setProperty(`--${PREVIEW_Y}`, `${spot.y}px`);
-  }, [preview, card]);
+  }, [preview, card, previewId]);
 
   if (artifactPath !== null) {
     const artifact = props.graph?.model.nodes.find((node) => node.id === props.selectedId);
@@ -360,7 +344,8 @@ export function Note(props: NoteProps) {
         view={header}
         open={() => props.onOpen(note.slug)}
         editing={draft !== null}
-        saving={saving}
+        saving={draft?.saving ?? false}
+        taskSaving={taskSaving}
         onToggle={toggleEdit}
         onSave={() => void save()}
       />
@@ -368,9 +353,9 @@ export function Note(props: NoteProps) {
         <textarea
           class="weave-note-editor"
           aria-label={EDITOR_ARIA_LABEL}
-          spellcheck
-          value={draft}
-          onInput={(event) => setDraft((event.target as HTMLTextAreaElement).value)}
+          spellcheck={props.spellcheck ?? true}
+          value={draft.body}
+          onInput={(event) => drafts.edit(note.slug, (event.target as HTMLTextAreaElement).value)}
           onKeyDown={(event) => {
             // Bound here, not in `keys.model.ts`: a global binding is a
             // workspace-wide claim, and Escape must not reach the shell.
@@ -429,7 +414,7 @@ export function Note(props: NoteProps) {
             if (hasTextSelection(selection)) return;
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
             // A wikilink carries no href, so route it onto the context bus.
-            if (target !== null) props.onSelect(target);
+            if (target !== null) props.onSelect(target, event.metaKey || event.ctrlKey || event.shiftKey);
           }}
           onKeyDown={(event) => {
             // Escape is first so the card closes on the gesture a keyboard
@@ -446,7 +431,7 @@ export function Note(props: NoteProps) {
             const target = wikilinkTargetOf(event.target as unknown as Parameters<typeof wikilinkTargetOf>[0]);
             if (target === null) return;
             event.preventDefault();
-            props.onSelect(target);
+            props.onSelect(target, event.metaKey || event.ctrlKey || event.shiftKey);
           }}
           // Sanitised by `renderNote`'s three layers — see note.model.ts.
           dangerouslySetInnerHTML={{ __html: html }}
@@ -455,7 +440,7 @@ export function Note(props: NoteProps) {
       {card === null ? null : (
         <div
           ref={cardRef}
-          id={PREVIEW_ID}
+          id={previewId}
           role="tooltip"
           class={`weave-preview${card.ghost ? " weave-preview-ghost" : ""}`}
         >