@heyramzi/ui 1.54.2 → 2.0.1

package/src/canvas/editor/dispatch.svelte.test.ts

@@ -0,0 +1,243 @@
+import { describe, expect, it } from "vite-plus/test";
+import type { Node } from "@xyflow/svelte";
+import { createCanvasDispatcher } from "./dispatch.svelte.js";
+import type { FlowState } from "./history-core.js";
+
+function node(id: string, label = id): Node {
+  return { id, type: "node", position: { x: 0, y: 0 }, data: { label } } as Node;
+}
+
+function setup(nodes: Node[] = [node("a"), node("b")]) {
+  let state: FlowState = { nodes, edges: [] };
+  let now = 1_000;
+  const dispatcher = createCanvasDispatcher({
+    getState: () => state,
+    setState: (next) => {
+      state = next;
+    },
+    onMutated: () => {},
+    now: () => now,
+  });
+  const label = (id: string) => state.nodes.find((n) => n.id === id)?.data.label;
+  const type = (id: string, text: string, key = `text:${id}`) =>
+    dispatcher.dispatch(
+      { kind: "patchNode", nodeId: id, data: { label: text } },
+      { coalesceKey: key },
+    );
+  return {
+    dispatcher,
+    label,
+    type,
+    advance: (ms: number) => {
+      now += ms;
+    },
+    // A drag writes the store itself between begin and commit.
+    moveNode: (id: string, x: number) => {
+      state = {
+        ...state,
+        nodes: state.nodes.map((n) => (n.id === id ? { ...n, position: { x, y: 0 } } : n)),
+      };
+    },
+    position: (id: string) => state.nodes.find((n) => n.id === id)?.position.x,
+  };
+}
+
+describe("text coalescing", () => {
+  it("merges keystrokes under 1 s apart into one undo step", () => {
+    const t = setup();
+    t.type("a", "h");
+    t.advance(300);
+    t.type("a", "he");
+    t.advance(900);
+    t.type("a", "hey");
+    expect(t.label("a")).toBe("hey");
+
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("a");
+    expect(t.dispatcher.canUndo).toBe(false);
+
+    t.dispatcher.redo();
+    expect(t.label("a")).toBe("hey");
+  });
+
+  it("starts a new step after a pause of 1 s or more", () => {
+    const t = setup();
+    t.type("a", "h");
+    t.advance(1000);
+    t.type("a", "he");
+
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("h");
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("a");
+  });
+
+  it("does not merge across different keys", () => {
+    const t = setup();
+    t.type("a", "x");
+    t.advance(100);
+    t.type("b", "y");
+
+    t.dispatcher.undo();
+    expect(t.label("b")).toBe("b");
+    expect(t.label("a")).toBe("x");
+  });
+
+  it("ends the session on endCoalesce", () => {
+    const t = setup();
+    t.type("a", "h");
+    t.dispatcher.endCoalesce();
+    t.advance(100);
+    t.type("a", "he");
+
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("h");
+  });
+
+  it("ends the session on a plain commit between two keystrokes", () => {
+    const t = setup();
+    t.type("a", "h");
+    t.dispatcher.dispatch({ kind: "moveNode", nodeId: "b", position: { x: 5, y: 5 } });
+    t.type("a", "he");
+
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("h");
+  });
+
+  it("ends the session on undo and redo", () => {
+    const t = setup();
+    t.type("a", "h");
+    t.dispatcher.undo();
+    t.dispatcher.redo();
+    t.advance(100);
+    t.type("a", "he");
+
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("h");
+  });
+
+  it("undoes one step to the text before the session after a merged run", () => {
+    const t = setup([node("a", "start")]);
+    for (const text of ["s", "st", "sta", "star", "start!"]) {
+      t.type("a", text);
+      t.advance(200);
+    }
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("start");
+    expect(t.dispatcher.canUndo).toBe(false);
+  });
+});
+
+describe("history cap", () => {
+  it("keeps 200 entries and drops the oldest", () => {
+    const t = setup([node("a", "0")]);
+    for (let i = 1; i <= 250; i++) {
+      t.dispatcher.dispatch({ kind: "patchNode", nodeId: "a", data: { label: String(i) } });
+    }
+    let undone = 0;
+    while (t.dispatcher.canUndo) {
+      t.dispatcher.undo();
+      undone += 1;
+    }
+    expect(undone).toBe(200);
+    expect(t.label("a")).toBe("50");
+  });
+});
+
+describe("open transaction", () => {
+  it("reports isOpen while a gesture is in flight", () => {
+    const t = setup();
+    expect(t.dispatcher.isOpen).toBe(false);
+    t.dispatcher.begin();
+    expect(t.dispatcher.isOpen).toBe(true);
+    t.dispatcher.commit();
+    expect(t.dispatcher.isOpen).toBe(false);
+  });
+
+  it("undo is blocked while a gesture is fresh", () => {
+    const t = setup();
+    t.dispatcher.dispatch({ kind: "moveNode", nodeId: "b", position: { x: 5, y: 5 } });
+    t.dispatcher.begin();
+    t.advance(9_000);
+    t.dispatcher.undo();
+    expect(t.dispatcher.canUndo).toBe(true);
+    expect(t.dispatcher.isOpen).toBe(true);
+  });
+
+  it("recovers a drag whose stop never fired: undo closes it, then undoes it", () => {
+    const t = setup();
+    t.dispatcher.begin();
+    t.moveNode("a", 100);
+    t.advance(10_001);
+    expect(t.dispatcher.isOpen).toBe(false);
+
+    t.dispatcher.undo();
+    expect(t.position("a")).toBe(0);
+    expect(t.dispatcher.canUndo).toBe(false);
+    expect(t.dispatcher.canRedo).toBe(true);
+  });
+
+  it("recovers on begin, so the next edit gets its own step", () => {
+    const t = setup();
+    t.dispatcher.begin();
+    t.moveNode("a", 100);
+    t.advance(10_001);
+    t.dispatcher.dispatch({ kind: "patchNode", nodeId: "b", data: { label: "B" } });
+
+    t.dispatcher.undo();
+    expect(t.label("b")).toBe("b");
+    expect(t.position("a")).toBe(100);
+    t.dispatcher.undo();
+    expect(t.position("a")).toBe(0);
+  });
+
+  it("treats a commit with no begin as harmless", () => {
+    const t = setup();
+    t.dispatcher.commit();
+    t.dispatcher.commit();
+    expect(t.dispatcher.isOpen).toBe(false);
+    t.dispatcher.begin();
+    expect(t.dispatcher.isOpen).toBe(true);
+  });
+});
+
+describe("a drag held longer than the stuck limit", () => {
+  it("stays open while drag frames keep reporting activity", () => {
+    const t = setup();
+    t.dispatcher.begin();
+    for (let i = 1; i <= 8; i += 1) {
+      t.advance(3_000);
+      t.moveNode("a", i * 10);
+      t.dispatcher.touch();
+    }
+    expect(t.dispatcher.isOpen).toBe(true);
+    t.dispatcher.commit();
+    t.dispatcher.undo();
+    expect(t.position("a")).toBe(0);
+  });
+
+  it("still reads stuck when nothing reports for the full limit", () => {
+    const t = setup();
+    t.dispatcher.begin();
+    t.advance(11_000);
+    expect(t.dispatcher.isOpen).toBe(false);
+  });
+});
+
+describe("a big board", () => {
+  it("records and undoes an edit without reading the cards it did not touch", () => {
+    const untouched = Array.from({ length: 50 }, (_, i) => ({
+      ...node(`n${i}`),
+      toJSON: () => {
+        throw new Error("an untouched card was serialised");
+      },
+    }));
+    const t = setup([...untouched, node("a", "one")]);
+    t.type("a", "two");
+    expect(t.label("a")).toBe("two");
+    t.dispatcher.undo();
+    expect(t.label("a")).toBe("one");
+    t.dispatcher.redo();
+    expect(t.label("a")).toBe("two");
+  });
+});

package/src/canvas/editor/dispatch.svelte.ts

@@ -0,0 +1,205 @@
+// The single write path for diagram mutations. Every edit, from any source, is
+// one transaction: a before/after history entry, then dirty and autosave.
+
+// Undo and redo replay those entries.
+
+import type { Node, Edge } from "@xyflow/svelte";
+import { applyOps, type CanvasOp } from "../ops/ops.js";
+import type { OpDefinition, OpLike } from "../plugin.js";
+import { tryCatch } from "../../lib/result.js";
+import {
+  applyHistoryEntry,
+  diffFlowState,
+  mergeHistoryEntries,
+  type FlowState,
+  type HistoryEntry,
+} from "./history-core.js";
+
+const MAX_ENTRIES = 200;
+
+/** Keystrokes under this far apart share one undo step. */
+const COALESCE_WINDOW_MS = 1000;
+
+// A drag whose stop never fires (pointer lost, node unmounted) leaves its transaction open,
+// and drag frames never reach the dispatcher, so this counts from the last begin or commit.
+const STUCK_TRANSACTION_MS = 10_000;
+
+export type CanvasDispatcher<Op extends OpLike = CanvasOp> = ReturnType<
+  typeof createCanvasDispatcher<Op>
+>;
+
+/** `Op` is the union of op shapes the caller dispatches: the canvas's own plus its plugins'. */
+export function createCanvasDispatcher<Op extends OpLike = CanvasOp>(io: {
+  getState: () => FlowState;
+  setState: (state: FlowState) => void;
+  /** Called after every state-changing commit, undo and redo. */
+  onMutated: () => void;
+  /** The op kinds beyond the canvas's own, from the app's plugins. */
+  opDefinitions?: readonly OpDefinition[];
+  /** Drops the ops a board refuses before they apply, such as an edit to a locked card. */
+  guard?: (nodes: readonly Node[], ops: Op[]) => Op[];
+  /** The clock for the coalescing window and the stuck-transaction guard. A test injects its own. */
+  now?: () => number;
+}) {
+  const now = io.now ?? Date.now;
+  let undoStack = $state.raw<HistoryEntry[]>([]);
+  let redoStack = $state.raw<HistoryEntry[]>([]);
+  let depth = 0;
+  let baseline: FlowState | null = null;
+  let lastActivityAt = 0;
+  // The text session the top undo entry belongs to, while keystrokes keep merging into it.
+  let session: { key: string; at: number } | null = null;
+
+  // Cards are replaced, never edited in place, so holding the objects equals a deep copy for a pointer each.
+  function snapshot(): FlowState {
+    const state = io.getState();
+    return { nodes: [...state.nodes], edges: [...state.edges] };
+  }
+
+  function isStale(): boolean {
+    return depth > 0 && now() - lastActivityAt > STUCK_TRANSACTION_MS;
+  }
+
+  /** Record the open transaction's diff as one history entry, merged into the text session it continues. */
+  function finish(coalesceKey?: string) {
+    depth = 0;
+    const before = baseline;
+    baseline = null;
+    const entry = before && diffFlowState(before, io.getState());
+    if (!entry) return;
+    const at = now();
+    const top = undoStack.at(-1);
+    if (
+      coalesceKey &&
+      top &&
+      session?.key === coalesceKey &&
+      at - session.at < COALESCE_WINDOW_MS
+    ) {
+      undoStack = [...undoStack.slice(0, -1), mergeHistoryEntries(top, entry)];
+      session = { key: coalesceKey, at };
+    } else {
+      undoStack = [...undoStack.slice(-(MAX_ENTRIES - 1)), entry];
+      session = coalesceKey ? { key: coalesceKey, at } : null;
+    }
+    redoStack = [];
+    io.onMutated();
+  }
+
+  /** Force-close a transaction nobody closed, so undo and the next gesture work again. */
+  function recoverStuck() {
+    if (isStale()) finish();
+  }
+
+  /** Open a transaction. Nested calls join the outermost one. */
+  function begin() {
+    recoverStuck();
+    lastActivityAt = now();
+    if (depth === 0) baseline = snapshot();
+    depth += 1;
+  }
+
+  /** Close a transaction. The outermost close diffs and records the entry. */
+  function commit(coalesceKey?: string) {
+    lastActivityAt = now();
+    if (depth > 1) {
+      depth -= 1;
+      return;
+    }
+    // A commit with no begin has nothing to record.
+    if (depth === 1) finish(coalesceKey);
+  }
+
+  function run<T>(fn: () => T, coalesceKey?: string): T {
+    begin();
+    const res = tryCatch(fn);
+    commit(coalesceKey);
+    if (!res.ok) throw res.error;
+    return res.value;
+  }
+
+  /**
+   * Apply granular ops to the flow state inside a transaction. A `coalesceKey` folds the
+   * step into the top undo entry while that key keeps committing under a second apart.
+   */
+  function dispatch(ops: Op | Op[], options?: { coalesceKey?: string }): boolean {
+    const asked = Array.isArray(ops) ? ops : [ops];
+    const list = io.guard ? io.guard(io.getState().nodes, asked) : asked;
+    if (list.length === 0) return true;
+    return run(() => {
+      const state = io.getState();
+      const res = tryCatch(() =>
+        applyOps(
+          {
+            // `applyOps` patches plain records so one op log replays over xyflow
+            // and persisted shapes. Widening in and narrowing out is that seam.
+            nodes: state.nodes as Record<string, unknown>[],
+            edges: state.edges as Record<string, unknown>[],
+          },
+          list,
+          io.opDefinitions,
+        ),
+      );
+      if (!res.ok) return false;
+      io.setState({
+        nodes: res.value.nodes as unknown as Node[],
+        edges: res.value.edges as unknown as Edge[],
+      });
+      return true;
+    }, options?.coalesceKey);
+  }
+
+  // An open gesture owns the baseline, so a replay under it would fold into its entry.
+  function undo() {
+    recoverStuck();
+    session = null;
+    const entry = undoStack.at(-1);
+    if (!entry || depth > 0) return;
+    undoStack = undoStack.slice(0, -1);
+    redoStack = [...redoStack, entry];
+    io.setState(applyHistoryEntry(io.getState(), entry, "undo"));
+    io.onMutated();
+  }
+
+  function redo() {
+    recoverStuck();
+    session = null;
+    const entry = redoStack.at(-1);
+    if (!entry || depth > 0) return;
+    redoStack = redoStack.slice(0, -1);
+    undoStack = [...undoStack, entry];
+    io.setState(applyHistoryEntry(io.getState(), entry, "redo"));
+    io.onMutated();
+  }
+
+  return {
+    get canUndo() {
+      return undoStack.length > 0;
+    },
+    get canRedo() {
+      return redoStack.length > 0;
+    },
+    /** True while a gesture holds a transaction open. A stuck one reads false. */
+    get isOpen() {
+      return depth > 0 && !isStale();
+    },
+    begin,
+    /** A long gesture calls this on every frame, so a slow drag isn't mistaken for a stuck one. */
+    touch() {
+      if (depth > 0) lastActivityAt = now();
+    },
+    commit: () => commit(),
+    run: <T>(fn: () => T) => run(fn),
+    dispatch,
+    /** End the text session, so the next keystroke starts a new undo step. Call it on blur. */
+    endCoalesce() {
+      session = null;
+    },
+    undo,
+    redo,
+    clear() {
+      undoStack = [];
+      redoStack = [];
+      session = null;
+    },
+  };
+}

package/src/canvas/editor/editor-context.ts

@@ -0,0 +1,62 @@
+// Typed Svelte context between the editor and the node and edge components inside it,
+// so every component edit lands on the dispatcher (undoable, autosaved).
+
+// Components must tolerate a missing context: read-only hosts like a slide's embedded
+// canvas provide none.
+
+import { getContext, setContext } from "svelte";
+
+export type DiagramEditorContext = {
+  /** The canvas zoom, so a resize handle can stay one size on screen. */
+  canvasZoom?: number;
+  /**
+   * Merge a partial data patch into a node. Undoable. With `coalesce`, patches to one node
+   * less than a second apart are one undo step, for per-keystroke text.
+   */
+  patchNodeData: (
+    nodeId: string,
+    data: Record<string, unknown>,
+    options?: { coalesce?: boolean },
+  ) => void;
+  /** End the coalescing text session so the next patch is a new undo step. Call it on blur. */
+  endTextEdit: () => void;
+  /** Set a node's width, keeping its style twin and its board slot in step.
+   *  Undoable. */
+  setNodeWidth: (nodeId: string, width: number) => void;
+  /**
+   * Open an undo transaction around a gesture and return its commit. A resize
+   * writes the flow store itself, so open it before the first frame.
+   */
+  startGesture: () => () => void;
+  /** Patch an edge (label, animated, type, style, handles). Undoable. */
+  patchEdge: (edgeId: string, patch: Record<string, unknown>) => void;
+  /** Remove one link. Undoable. */
+  removeEdge: (edgeId: string) => void;
+  /** Duplicate a node 50px down-right. Undoable. */
+  duplicateNode: (nodeId: string) => void;
+  /** Remove a node and its edges. Undoable. */
+  removeNode: (nodeId: string) => void;
+  /** Add a typed child under a container node. Undoable. */
+  addChildNode: (parentId: string, type: string) => void;
+  /**
+   * Register the inline-edit entry point for a node. The editor calls it after
+   * creating the node so the user can type the label immediately. Returns an
+   * unregister function.
+   */
+  registerStartEdit: (nodeId: string, start: () => void) => () => void;
+  /** Ask a registered node to enter inline editing. */
+  requestStartEdit: (nodeId: string) => void;
+};
+
+const KEY = Symbol("diagram-editor-context");
+
+/** An app widens the context with its own members: pass its type as `T`. */
+export function setDiagramEditorContext<T extends DiagramEditorContext>(context: T) {
+  setContext(KEY, context);
+}
+
+export function getDiagramEditorContext<
+  T extends DiagramEditorContext = DiagramEditorContext,
+>(): T | null {
+  return getContext<T | undefined>(KEY) ?? null;
+}

package/src/canvas/editor/editor-mode.ts

@@ -0,0 +1,67 @@
+// A mode packs one family of interactions, so the editor never branches on node
+// types. Each controller is built once, so its state survives a mode switch.
+
+import type { Node, Edge, InternalNode } from "@xyflow/svelte";
+import type { CanvasViewport } from "../types.js";
+import type { CanvasDispatcher } from "./dispatch.svelte.js";
+
+/** A fraction of the pane, or a pixel margin per side, so a fit can clear the bars floating over it. */
+export type FitPadding =
+  | number
+  | { top?: `${number}px`; right?: `${number}px`; bottom?: `${number}px`; left?: `${number}px` };
+
+/** The xyflow instance surface the editor bridges via diagram-flow-helper. */
+export type FlowActions = {
+  screenToFlowPosition: (pos: { x: number; y: number }) => { x: number; y: number };
+  fitView: (options?: {
+    padding?: FitPadding;
+    nodes?: { id: string }[];
+    maxZoom?: number;
+    /** Overrides the glide, in ms. 0 jumps. */
+    duration?: number;
+  }) => Promise<boolean>;
+  zoomIn: () => Promise<boolean>;
+  zoomOut: () => Promise<boolean>;
+  /** Zoom about the view centre to an exact scale. */
+  zoomTo: (zoom: number) => Promise<boolean>;
+  deleteElements: (params: {
+    nodes?: { id: string }[];
+    edges?: { id: string }[];
+  }) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
+  toObject: () => { nodes: Node[]; edges: Edge[]; viewport: CanvasViewport };
+  /** Read alone, for motion that must stay one screen pixel at any scale. */
+  getViewport: () => CanvasViewport;
+  /** Glides; a pan to bring something on screen. */
+  setViewport: (viewport: CanvasViewport) => Promise<boolean>;
+  /** Measured size and absolute position, which a nested card's own position lacks. */
+  getInternalNode: (id: string) => InternalNode | undefined;
+};
+
+/** What the editor lends a controller. All access is lazy (getter closures). */
+export type EditorModeDeps = {
+  dispatcher: CanvasDispatcher;
+  getNodes: () => Node[];
+  setNodes: (nodes: Node[]) => void;
+  getEdges: () => Edge[];
+  setEdges: (edges: Edge[]) => void;
+  getFlowActions: () => FlowActions | null;
+  scheduleAutoSave: () => void;
+  /** Ask a mounted node component to enter inline editing. */
+  requestStartEdit: (nodeId: string) => void;
+  /** Select a fresh node, then open its inline editor once the layout settles. */
+  focusNewNode: (nodeId: string) => void;
+};
+
+/**
+ * The delegation surface. Every hook is optional, called on each active mode in
+ * the order the app lists them. `placeNode` returns true when it claimed the creation.
+ */
+export type EditorMode<Type extends string = string> = {
+  placeNode?: (type: Type, position: { x: number; y: number }) => boolean;
+  onNodeDragStart?: (targetNode: Node | null | undefined) => void;
+  onNodeDrag?: (targetNode: Node | null | undefined) => void;
+  onNodeDragStop?: (targetNode: Node | null | undefined) => void;
+  handleKeydown?: (event: KeyboardEvent) => void;
+  /** Runs inside the same dispatcher transaction that added the child. */
+  onChildAdded?: (parent: Node) => void;
+};

package/src/canvas/editor/frame.ts

@@ -0,0 +1,98 @@
+// A frame from the frame tool: a titled box that adopts the cards it covers.
+// A group (Cmd+G) is the same box untitled.
+
+import type { CanvasOp } from "../ops/ops.js";
+
+export interface FrameRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+type Boxed = {
+  id: string;
+  position: { x: number; y: number };
+  measured?: { width?: number; height?: number };
+  width?: number | null;
+  height?: number | null;
+  parentId?: string;
+  type?: string;
+};
+
+/** A drag shorter than this on both sides was a click. */
+const CLICK_DRAG = 8;
+const DEFAULT_FRAME = { width: 480, height: 300 } as const;
+const MIN_FRAME = { width: 80, height: 60 } as const;
+
+/** The box a drag from one corner to the other covers, or the default size for a click. */
+export function frameRect(from: { x: number; y: number }, to: { x: number; y: number }): FrameRect {
+  const width = Math.abs(to.x - from.x);
+  const height = Math.abs(to.y - from.y);
+  if (width < CLICK_DRAG && height < CLICK_DRAG) {
+    return { x: Math.round(from.x), y: Math.round(from.y), ...DEFAULT_FRAME };
+  }
+  return {
+    x: Math.round(Math.min(from.x, to.x)),
+    y: Math.round(Math.min(from.y, to.y)),
+    width: Math.round(Math.max(width, MIN_FRAME.width)),
+    height: Math.round(Math.max(height, MIN_FRAME.height)),
+  };
+}
+
+function sizeOf(node: Boxed): { width: number; height: number } | null {
+  const width = node.measured?.width ?? node.width;
+  const height = node.measured?.height ?? node.height;
+  return width && height ? { width, height } : null;
+}
+
+export interface FrameOptions {
+  /** The node type of the frame, the host's group type. */
+  type: string;
+  title: string;
+  /** Extra `data` on the frame beside its title. */
+  data?: Record<string, unknown>;
+}
+
+/** The op list for one frame, and the id it was given. Top-level cards wholly inside the box become its children. */
+export function frameOps(
+  rect: FrameRect,
+  nodes: readonly Boxed[],
+  { type, title, data = {} }: FrameOptions,
+): { id: string; ops: CanvasOp[] } {
+  const id = crypto.randomUUID();
+  const inside = nodes.filter((node) => {
+    const size = sizeOf(node);
+    if (!size || node.parentId || node.type === type) return false;
+    const { x, y } = node.position;
+    return (
+      x >= rect.x &&
+      y >= rect.y &&
+      x + size.width <= rect.x + rect.width &&
+      y + size.height <= rect.y + rect.height
+    );
+  });
+  const ops: CanvasOp[] = [
+    {
+      kind: "addNode",
+      node: {
+        id,
+        type,
+        position: { x: rect.x, y: rect.y },
+        data: { ...data, label: title, frame: true },
+        width: rect.width,
+        height: rect.height,
+        style: { width: rect.width, height: rect.height },
+      },
+    },
+    ...inside.flatMap((node): CanvasOp[] => [
+      { kind: "setParent", nodeId: node.id, parentId: id, extent: "parent" },
+      {
+        kind: "moveNode",
+        nodeId: node.id,
+        position: { x: node.position.x - rect.x, y: node.position.y - rect.y },
+      },
+    ]),
+  ];
+  return { id, ops };
+}

package/src/canvas/editor/hand-context.ts

@@ -0,0 +1,15 @@
+// Whether the host page is drawn by hand. The host sets it once and the pen's
+// text and shapes read it. With no host, they keep the app's look.
+
+import { getContext, setContext } from "svelte";
+
+const KEY = Symbol("canvas-hand-drawn");
+
+/** Call during component init. `read` is a getter, so a toggle reaches mounted nodes. */
+export function setHandDrawn(read: () => boolean): void {
+  setContext(KEY, read);
+}
+
+export function useHandDrawn(): () => boolean {
+  return getContext<(() => boolean) | undefined>(KEY) ?? (() => false);
+}