@heyramzi/ui 1.54.2 → 2.0.1

package/src/canvas/editor/history-core.test.ts

@@ -0,0 +1,239 @@
+import { expectDefined } from "../test-utils.js";
+import { describe, expect, it } from "vite-plus/test";
+import type { Node, Edge } from "@xyflow/svelte";
+import {
+  applyHistoryEntry,
+  diffFlowState,
+  mergeHistoryEntries,
+  type FlowState,
+} from "./history-core.js";
+
+function assertNever(): never {
+  throw new Error("an unchanged card was serialised");
+}
+
+function node(id: string, overrides: Partial<Node> = {}): Node {
+  return {
+    id,
+    type: "node",
+    position: { x: 0, y: 0 },
+    data: { label: id },
+    ...overrides,
+  } as Node;
+}
+
+function edge(id: string, source: string, target: string, overrides: Partial<Edge> = {}): Edge {
+  return { id, source, target, ...overrides } as Edge;
+}
+
+function state(nodes: Node[], edges: Edge[] = []): FlowState {
+  return { nodes, edges };
+}
+
+describe("diffFlowState", () => {
+  it("returns null when nothing changed", () => {
+    const a = state([node("a")], [edge("e", "a", "a")]);
+    const b = state([node("a")], [edge("e", "a", "a")]);
+    expect(diffFlowState(a, b)).toBeNull();
+  });
+
+  it("ignores volatile fields: selection is not an undo step", () => {
+    const a = state([node("a")]);
+    const b = state([node("a", { selected: true, dragging: true } as Partial<Node>)]);
+    expect(diffFlowState(a, b)).toBeNull();
+  });
+
+  it("captures only affected items, not the whole document", () => {
+    const untouched = node("keep");
+    const a = state([untouched, node("move")]);
+    const b = state([untouched, node("move", { position: { x: 100, y: 50 } })]);
+    const entry = expectDefined(diffFlowState(a, b), "diff entry");
+    expect(entry.nodesBefore.map((n) => n.id)).toEqual(["move"]);
+    expect(entry.nodesAfter.map((n) => n.id)).toEqual(["move"]);
+  });
+
+  it("never reads a card that is the same object on both sides", () => {
+    const untouched = { ...node("big"), toJSON: () => assertNever() };
+    const base = state([untouched, node("a")]);
+    const current = state([untouched, node("a", { position: { x: 5, y: 0 } })]);
+    const entry = expectDefined(diffFlowState(base, current));
+    expect(entry.nodesBefore.map((n) => n.id)).toEqual(["a"]);
+  });
+
+  it("still sees a card that was replaced by an equal-looking copy as unchanged", () => {
+    const base = state([node("a")]);
+    const current = state([{ ...node("a"), selected: true }]);
+    expect(diffFlowState(base, current)).toBeNull();
+  });
+
+  it("captures additions and removals", () => {
+    const a = state([node("a")], [edge("e1", "a", "a")]);
+    const b = state([node("b")], []);
+    const entry = expectDefined(diffFlowState(a, b), "diff entry");
+    expect(entry.nodesBefore.map((n) => n.id)).toEqual(["a"]);
+    expect(entry.nodesAfter.map((n) => n.id)).toEqual(["b"]);
+    expect(entry.edgesBefore.map((e) => e.id)).toEqual(["e1"]);
+    expect(entry.edgesAfter).toEqual([]);
+  });
+});
+
+describe("applyHistoryEntry", () => {
+  it("undo restores a data edit, redo reapplies it", () => {
+    const before = state([node("a", { data: { label: "old" } })]);
+    const after = state([node("a", { data: { label: "new" } })]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes[0].data.label).toBe("old");
+
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(redone.nodes[0].data.label).toBe("new");
+  });
+
+  it("undo of a delete restores the node and its edges", () => {
+    const before = state([node("a"), node("b")], [edge("e", "a", "b")]);
+    const after = state([node("a")], []);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes.map((n) => n.id).sort()).toEqual(["a", "b"]);
+    expect(undone.edges.map((e) => e.id)).toEqual(["e"]);
+  });
+
+  it("undo of an add removes the added node", () => {
+    const before = state([node("a")]);
+    const after = state([node("a"), node("b")]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes.map((n) => n.id)).toEqual(["a"]);
+  });
+
+  it("restores parents before children for SvelteFlow ordering", () => {
+    const parent = node("parent");
+    const child = node("child", { parentId: "parent" } as Partial<Node>);
+    const before = state([parent, child]);
+    const after = state([]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    const ids = undone.nodes.map((n) => n.id);
+    expect(ids.indexOf("parent")).toBeLessThan(ids.indexOf("child"));
+  });
+
+  // A mind map reads child order from edge order: on 12 Oct 2026 undoing a reparent
+  // appended the restored edge, and the next relayout swapped Alpha's children.
+  it("undo of a reparent puts the restored edge back at its index, redo too", () => {
+    const nodes = [node("alpha"), node("gamma"), node("a1"), node("a2"), node("g1")];
+    const before = state(nodes, [
+      edge("e-alpha-a1", "alpha", "a1"),
+      edge("e-alpha-a2", "alpha", "a2"),
+      edge("e-gamma-g1", "gamma", "g1"),
+    ]);
+    const after = state(nodes, [
+      edge("e-alpha-a2", "alpha", "a2"),
+      edge("e-gamma-a1", "gamma", "a1"),
+      edge("e-gamma-g1", "gamma", "g1"),
+    ]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.edges.map((e) => e.id)).toEqual(["e-alpha-a1", "e-alpha-a2", "e-gamma-g1"]);
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(redone.edges.map((e) => e.id)).toEqual(["e-alpha-a2", "e-gamma-a1", "e-gamma-g1"]);
+  });
+
+  // A reorder under the same parent keeps the edge's id and content, so only its index moved.
+  it("undo of a sibling reorder restores the edge order", () => {
+    const before = state(
+      [node("a1"), node("a2", { position: { x: 0, y: 60 } })],
+      [edge("e-alpha-a1", "alpha", "a1"), edge("e-alpha-a2", "alpha", "a2")],
+    );
+    const after = state(
+      [node("a1", { position: { x: 0, y: 60 } }), node("a2")],
+      [edge("e-alpha-a2", "alpha", "a2"), edge("e-alpha-a1", "alpha", "a1")],
+    );
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.edges.map((e) => e.id)).toEqual(["e-alpha-a1", "e-alpha-a2"]);
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(redone.edges.map((e) => e.id)).toEqual(["e-alpha-a2", "e-alpha-a1"]);
+  });
+
+  it("undo of a delete puts nodes back at their index, without regrouping a valid order", () => {
+    const parent = node("parent");
+    const before = state([parent, node("free"), node("child", { parentId: "parent" })]);
+    const after = state([parent]);
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(undone.nodes.map((n) => n.id)).toEqual(["parent", "free", "child"]);
+  });
+
+  it("round-trips a compound change (move + edit + add + remove)", () => {
+    const before = state(
+      [node("stay"), node("move"), node("gone", { data: { label: "bye" } })],
+      [edge("e1", "stay", "move")],
+    );
+    const after = state(
+      [
+        node("stay"),
+        node("move", { position: { x: 40, y: 40 }, data: { label: "moved" } }),
+        node("fresh"),
+      ],
+      [edge("e1", "stay", "move", { label: "renamed" } as Partial<Edge>)],
+    );
+    const entry = expectDefined(diffFlowState(before, after), "diff entry");
+
+    const undone = applyHistoryEntry(after, entry, "undo");
+    expect(diffFlowState(before, undone)).toBeNull();
+
+    const redone = applyHistoryEntry(undone, entry, "redo");
+    expect(diffFlowState(after, redone)).toBeNull();
+  });
+});
+
+describe("mergeHistoryEntries", () => {
+  it("keeps the earliest before and the latest after for a node both touched", () => {
+    const s0 = state([node("a", { data: { label: "0" } })]);
+    const s1 = state([node("a", { data: { label: "1" } })]);
+    const s2 = state([node("a", { data: { label: "2" } })]);
+    const merged = mergeHistoryEntries(
+      expectDefined(diffFlowState(s0, s1), "first"),
+      expectDefined(diffFlowState(s1, s2), "second"),
+    );
+
+    expect(applyHistoryEntry(s2, merged, "undo").nodes[0].data.label).toBe("0");
+    expect(applyHistoryEntry(s0, merged, "redo").nodes[0].data.label).toBe("2");
+  });
+
+  it("merges different nodes, and a node added then edited has no before", () => {
+    const s0 = state([node("a")]);
+    const s1 = state([node("a"), node("b", { data: { label: "new" } })]);
+    const s2 = state([
+      node("a", { position: { x: 9, y: 9 } }),
+      node("b", { data: { label: "newer" } }),
+    ]);
+    const merged = mergeHistoryEntries(
+      expectDefined(diffFlowState(s0, s1), "first"),
+      expectDefined(diffFlowState(s1, s2), "second"),
+    );
+
+    expect(merged.nodesBefore.map((n) => n.id)).toEqual(["a"]);
+    expect(merged.nodesAfter.map((n) => n.id).sort()).toEqual(["a", "b"]);
+    expect(applyHistoryEntry(s2, merged, "undo").nodes.map((n) => n.id)).toEqual(["a"]);
+  });
+
+  it("carries node order from the earliest before to the latest after", () => {
+    const s0 = state([node("a"), node("b"), node("c")]);
+    const s1 = state([node("b"), node("a", { position: { x: 5, y: 5 } }), node("c")]);
+    const s2 = state([node("b"), node("c"), node("a", { position: { x: 1, y: 1 } })]);
+    const merged = mergeHistoryEntries(
+      expectDefined(diffFlowState(s0, s1), "first"),
+      expectDefined(diffFlowState(s1, s2), "second"),
+    );
+
+    expect(merged.nodeOrder).toEqual({ before: ["a", "b", "c"], after: ["b", "c", "a"] });
+  });
+});

package/src/canvas/editor/history-core.ts

@@ -0,0 +1,247 @@
+// Pure diff/apply core for diagram history. Each entry holds only the touched
+// nodes and edges, so ops, layouts and xyflow's own writes share one mechanism.
+
+import type { Node, Edge } from "@xyflow/svelte";
+import { sortParentsFirst } from "../headless/canvas-cleanup.js";
+
+export type FlowState = { nodes: Node[]; edges: Edge[] };
+
+/** Each side's id sequence, kept only when the step changed it. */
+export type IdOrder = { before: string[]; after: string[] };
+
+export type HistoryEntry = {
+  nodesBefore: Node[];
+  nodesAfter: Node[];
+  edgesBefore: Edge[];
+  edgesAfter: Edge[];
+  // WHY: array order is data. Node order is stacking, edge order is mind map child order.
+  nodeOrder?: IdOrder;
+  edgeOrder?: IdOrder;
+};
+
+// Fields that churn without changing the document. Stripped, so selecting isn't
+// an undo step and undo doesn't restore a stale selection.
+const VOLATILE_NODE_FIELDS = new Set(["selected", "dragging", "measured", "resizing"]);
+const VOLATILE_EDGE_FIELDS = new Set(["selected"]);
+
+function stripVolatile<T extends Record<string, unknown>>(record: T, volatile: Set<string>): T {
+  const out: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(record)) {
+    if (volatile.has(key) || value === undefined) continue;
+    out[key] = value;
+  }
+  return out as T;
+}
+
+function clone<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T;
+}
+
+function signature(record: Record<string, unknown>, volatile: Set<string>): string {
+  return JSON.stringify(stripVolatile(record, volatile));
+}
+
+/** True when two versions of a card differ only in fields that churn without changing the document. */
+export function isSameNode(a: Node, b: Node): boolean {
+  return (
+    a === b ||
+    signature(a as Record<string, unknown>, VOLATILE_NODE_FIELDS) ===
+      signature(b as Record<string, unknown>, VOLATILE_NODE_FIELDS)
+  );
+}
+
+export function isSameEdge(a: Edge, b: Edge): boolean {
+  return (
+    a === b ||
+    signature(a as Record<string, unknown>, VOLATILE_EDGE_FIELDS) ===
+      signature(b as Record<string, unknown>, VOLATILE_EDGE_FIELDS)
+  );
+}
+
+function diffOrder(base: { id: string }[], current: { id: string }[]): IdOrder | undefined {
+  const before = base.map((item) => item.id);
+  const after = current.map((item) => item.id);
+  const same = before.length === after.length && before.every((id, i) => id === after[i]);
+  return same ? undefined : { before, after };
+}
+
+function diffCollection<T extends { id: string }>(
+  base: T[],
+  current: T[],
+  volatile: Set<string>,
+): { before: T[]; after: T[] } {
+  const baseById = new Map(base.map((item) => [item.id, item]));
+  const currentById = new Map(current.map((item) => [item.id, item]));
+  const before: T[] = [];
+  const after: T[] = [];
+
+  for (const item of base) {
+    const counterpart = currentById.get(item.id);
+    if (!counterpart) {
+      before.push(clone(stripVolatile(item as Record<string, unknown>, volatile) as T));
+      continue;
+    }
+    // The same object is the same card: an untouched card costs nothing, however big the board.
+    if (
+      item !== counterpart &&
+      signature(item as Record<string, unknown>, volatile) !==
+        signature(counterpart as Record<string, unknown>, volatile)
+    ) {
+      before.push(clone(stripVolatile(item as Record<string, unknown>, volatile) as T));
+      after.push(clone(stripVolatile(counterpart as Record<string, unknown>, volatile) as T));
+    }
+  }
+  for (const item of current) {
+    if (!baseById.has(item.id)) {
+      after.push(clone(stripVolatile(item as Record<string, unknown>, volatile) as T));
+    }
+  }
+  return { before, after };
+}
+
+/**
+ * Diff two flow states into a history entry, or null when nothing changed. An order change
+ * alone is no step, so a bare reshuffle adds no undo entry.
+ */
+export function diffFlowState(base: FlowState, current: FlowState): HistoryEntry | null {
+  const nodes = diffCollection(base.nodes, current.nodes, VOLATILE_NODE_FIELDS);
+  const edges = diffCollection(base.edges, current.edges, VOLATILE_EDGE_FIELDS);
+  if (
+    nodes.before.length === 0 &&
+    nodes.after.length === 0 &&
+    edges.before.length === 0 &&
+    edges.after.length === 0
+  ) {
+    return null;
+  }
+  const nodeOrder = diffOrder(base.nodes, current.nodes);
+  const edgeOrder = diffOrder(base.edges, current.edges);
+  return {
+    nodesBefore: nodes.before,
+    nodesAfter: nodes.after,
+    edgesBefore: edges.before,
+    edgesAfter: edges.after,
+    ...(nodeOrder && { nodeOrder }),
+    ...(edgeOrder && { edgeOrder }),
+  };
+}
+
+/** Stable sort into `order`. An id the entry never saw keeps its place after the known ones. */
+function sortByOrder<T extends { id: string }>(items: T[], order: string[] | undefined): T[] {
+  if (!order) return items;
+  const rank = new Map(order.map((id, index) => [id, index]));
+  const at = (item: T) => rank.get(item.id) ?? order.length;
+  return items.toSorted((a, b) => at(a) - at(b));
+}
+
+/** Only a child ahead of its parent breaks SvelteFlow, so a valid order is never regrouped. */
+function parentsFirst(nodes: Node[]): Node[] {
+  const seen = new Set<string>();
+  const ids = new Set(nodes.map((node) => node.id));
+  for (const node of nodes) {
+    if (node.parentId && ids.has(node.parentId) && !seen.has(node.parentId)) {
+      return sortParentsFirst(nodes);
+    }
+    seen.add(node.id);
+  }
+  return nodes;
+}
+
+function applyCollection<T extends { id: string }>(items: T[], restore: T[], discard: T[]): T[] {
+  const restoreById = new Map(restore.map((item) => [item.id, item]));
+  const discardIds = new Set(discard.map((item) => item.id));
+  // Drop pure additions of the direction being reverted.
+  let next = items.filter((item) => !(discardIds.has(item.id) && !restoreById.has(item.id)));
+  // Restore changed items in place.
+  const present = new Set(next.map((item) => item.id));
+  next = next.map((item) => {
+    const restored = restoreById.get(item.id);
+    if (!restored) return item;
+    // Selection is where you are, not what the document held, so an undo leaves it be.
+    const selected = (item as { selected?: boolean }).selected;
+    return { ...clone(restored), ...(selected !== undefined && { selected }) };
+  });
+  // Re-add items that were removed in the direction being reverted.
+  for (const item of restore) {
+    if (!present.has(item.id)) next.push(clone(item));
+  }
+  return next;
+}
+
+/** Apply a history entry to a state: "undo" restores the before side, "redo" the after side. */
+export function applyHistoryEntry(
+  state: FlowState,
+  entry: HistoryEntry,
+  direction: "undo" | "redo",
+): FlowState {
+  const [restoreNodes, discardNodes] =
+    direction === "undo"
+      ? [entry.nodesBefore, entry.nodesAfter]
+      : [entry.nodesAfter, entry.nodesBefore];
+  const [restoreEdges, discardEdges] =
+    direction === "undo"
+      ? [entry.edgesBefore, entry.edgesAfter]
+      : [entry.edgesAfter, entry.edgesBefore];
+  const side = direction === "undo" ? "before" : "after";
+
+  return {
+    // WHY parentsFirst: SvelteFlow requires parents before children; a
+    // re-added container must land ahead of the children it re-adopts.
+    nodes: parentsFirst(
+      sortByOrder(
+        applyCollection(state.nodes, restoreNodes, discardNodes),
+        entry.nodeOrder?.[side],
+      ),
+    ),
+    edges: sortByOrder(
+      applyCollection(state.edges, restoreEdges, discardEdges),
+      entry.edgeOrder?.[side],
+    ),
+  };
+}
+
+/** An id's earliest before and latest after, so a node touched by both steps keeps its outer states. */
+function mergeSides<T extends { id: string }>(
+  first: { before: T[]; after: T[] },
+  second: { before: T[]; after: T[] },
+): { before: T[]; after: T[] } {
+  const firstTouched = new Set([...first.before, ...first.after].map((item) => item.id));
+  const secondTouched = new Set([...second.before, ...second.after].map((item) => item.id));
+  const before = [...first.before, ...second.before.filter((item) => !firstTouched.has(item.id))];
+  const after = [...first.after.filter((item) => !secondTouched.has(item.id)), ...second.after];
+  return { before, after };
+}
+
+function sameIds(a: string[], b: string[]): boolean {
+  return a.length === b.length && a.every((id, i) => id === b[i]);
+}
+
+/** No order change on one side means that step left the order alone, so the other side's end stands in. */
+function mergeOrder(first: IdOrder | undefined, second: IdOrder | undefined): IdOrder | undefined {
+  const before = first?.before ?? second?.before;
+  const after = second?.after ?? first?.after;
+  if (!before || !after) return undefined;
+  return sameIds(before, after) ? undefined : { before, after };
+}
+
+/** Fold two consecutive steps into one: undoing it restores the state before `first`. */
+export function mergeHistoryEntries(first: HistoryEntry, second: HistoryEntry): HistoryEntry {
+  const nodes = mergeSides(
+    { before: first.nodesBefore, after: first.nodesAfter },
+    { before: second.nodesBefore, after: second.nodesAfter },
+  );
+  const edges = mergeSides(
+    { before: first.edgesBefore, after: first.edgesAfter },
+    { before: second.edgesBefore, after: second.edgesAfter },
+  );
+  const nodeOrder = mergeOrder(first.nodeOrder, second.nodeOrder);
+  const edgeOrder = mergeOrder(first.edgeOrder, second.edgeOrder);
+  return {
+    nodesBefore: nodes.before,
+    nodesAfter: nodes.after,
+    edgesBefore: edges.before,
+    edgesAfter: edges.after,
+    ...(nodeOrder && { nodeOrder }),
+    ...(edgeOrder && { edgeOrder }),
+  };
+}

package/src/canvas/editor/keymap.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  resolveEditorKeyAction,
+  resolveNudge,
+  isEditingTarget,
+  isPanActivationKey,
+} from "./keymap.js";
+
+function press(
+  key: string,
+  opts: { meta?: boolean; shift?: boolean; editing?: boolean } = {},
+): KeyboardEvent {
+  const target = opts.editing ? { tagName: "INPUT" } : { tagName: "DIV" };
+  return {
+    key,
+    metaKey: opts.meta ?? false,
+    ctrlKey: false,
+    shiftKey: opts.shift ?? false,
+    target,
+  } as unknown as KeyboardEvent;
+}
+
+describe("resolveEditorKeyAction", () => {
+  it("maps the undo and redo chords", () => {
+    expect(resolveEditorKeyAction(press("z", { meta: true }), false)).toBe("undo");
+    expect(resolveEditorKeyAction(press("z", { meta: true, shift: true }), false)).toBe("redo");
+    expect(resolveEditorKeyAction(press("y", { meta: true }), false)).toBe("redo");
+  });
+
+  it("maps the clipboard chords, and leaves them to a field being typed in", () => {
+    expect(resolveEditorKeyAction(press("c", { meta: true }), false)).toBe("copy");
+    expect(resolveEditorKeyAction(press("v", { meta: true }), false)).toBe("paste");
+    expect(resolveEditorKeyAction(press("a", { meta: true }), false)).toBe("select-all");
+    expect(resolveEditorKeyAction(press("c", { meta: true, editing: true }), false)).toBeNull();
+    expect(resolveEditorKeyAction(press("a", { meta: true, editing: true }), false)).toBeNull();
+  });
+
+  it("saves whatever has focus", () => {
+    expect(resolveEditorKeyAction(press("s", { meta: true }), false)).toBe("save");
+    expect(resolveEditorKeyAction(press("s", { meta: true, editing: true }), false)).toBe("save");
+  });
+
+  it("deletes only with a selection, and never while typing", () => {
+    expect(resolveEditorKeyAction(press("Delete"), true)).toBe("delete");
+    expect(resolveEditorKeyAction(press("Backspace"), true)).toBe("delete");
+    expect(resolveEditorKeyAction(press("Delete"), false)).toBeNull();
+    expect(resolveEditorKeyAction(press("Backspace", { editing: true }), true)).toBeNull();
+  });
+
+  it("claims nothing else", () => {
+    expect(resolveEditorKeyAction(press("Tab"), true)).toBeNull();
+    expect(resolveEditorKeyAction(press("k"), true)).toBeNull();
+    expect(resolveEditorKeyAction(press("b", { meta: true }), true)).toBeNull();
+  });
+});
+
+describe("isEditingTarget", () => {
+  it("names the elements that own their own keys", () => {
+    expect(isEditingTarget({ tagName: "INPUT" } as unknown as EventTarget)).toBe(true);
+    expect(isEditingTarget({ tagName: "TEXTAREA" } as unknown as EventTarget)).toBe(true);
+    expect(
+      isEditingTarget({ tagName: "DIV", isContentEditable: true } as unknown as EventTarget),
+    ).toBe(true);
+    expect(isEditingTarget({ tagName: "DIV" } as unknown as EventTarget)).toBe(false);
+    expect(isEditingTarget(null)).toBe(false);
+  });
+});
+
+describe("isPanActivationKey", () => {
+  function space(
+    target: Record<string, unknown> = { tagName: "DIV" },
+    mods: { meta?: boolean; ctrl?: boolean; alt?: boolean } = {},
+  ): KeyboardEvent {
+    return {
+      code: "Space",
+      key: " ",
+      metaKey: mods.meta ?? false,
+      ctrlKey: mods.ctrl ?? false,
+      altKey: mods.alt ?? false,
+      target: { getAttribute: () => null, ...target },
+    } as unknown as KeyboardEvent;
+  }
+
+  it("is the hand tool over the canvas", () => {
+    expect(isPanActivationKey(space())).toBe(true);
+  });
+
+  it("leaves space to a field being typed in", () => {
+    expect(isPanActivationKey(space({ tagName: "TEXTAREA" }))).toBe(false);
+    expect(isPanActivationKey(space({ tagName: "DIV", isContentEditable: true }))).toBe(false);
+  });
+
+  it("leaves space to a control that activates on it", () => {
+    expect(isPanActivationKey(space({ tagName: "BUTTON" }))).toBe(false);
+    expect(isPanActivationKey(space({ tagName: "DIV", getAttribute: () => "button" }))).toBe(false);
+  });
+
+  it("claims no other key, and no chord", () => {
+    expect(isPanActivationKey({ code: "KeyS", key: "s" } as KeyboardEvent)).toBe(false);
+    expect(isPanActivationKey(space({ tagName: "DIV" }, { meta: true }))).toBe(false);
+  });
+});
+
+describe("the editor chords and zoom keys", () => {
+  const code = (key: string, codeName: string, shift = false) =>
+    ({
+      key,
+      code: codeName,
+      metaKey: false,
+      ctrlKey: false,
+      altKey: false,
+      shiftKey: shift,
+      target: { tagName: "DIV" },
+    }) as unknown as KeyboardEvent;
+
+  it("maps duplicate, group and ungroup", () => {
+    expect(resolveEditorKeyAction(press("d", { meta: true }), false)).toBe("duplicate");
+    expect(resolveEditorKeyAction(press("g", { meta: true }), false)).toBe("group");
+    expect(resolveEditorKeyAction(press("g", { meta: true, shift: true }), false)).toBe("ungroup");
+    expect(resolveEditorKeyAction(press("d", { meta: true, editing: true }), false)).toBeNull();
+  });
+
+  it("maps chord and plain zoom", () => {
+    expect(resolveEditorKeyAction(press("=", { meta: true }), false)).toBe("zoom-in");
+    expect(resolveEditorKeyAction(press("-", { meta: true }), false)).toBe("zoom-out");
+    expect(resolveEditorKeyAction(code("+", "Equal", true), false)).toBe("zoom-in");
+    expect(resolveEditorKeyAction(code("-", "Minus"), false)).toBe("zoom-out");
+  });
+
+  it("maps Shift with 0, 1 and 2 by key code", () => {
+    expect(resolveEditorKeyAction(code(")", "Digit0", true), false)).toBe("zoom-100");
+    expect(resolveEditorKeyAction(code("!", "Digit1", true), false)).toBe("zoom-fit");
+    expect(resolveEditorKeyAction(code("@", "Digit2", true), false)).toBe("zoom-selection");
+  });
+
+  it("stays out of a field being typed in", () => {
+    expect(resolveEditorKeyAction(press("-", { editing: true }), false)).toBeNull();
+  });
+});
+
+describe("resolveNudge", () => {
+  const arrow = (key: string, shift = false, editing = false) =>
+    ({
+      key,
+      metaKey: false,
+      ctrlKey: false,
+      altKey: false,
+      shiftKey: shift,
+      target: { tagName: editing ? "TEXTAREA" : "DIV" },
+    }) as unknown as KeyboardEvent;
+
+  it("moves 1px, or 10px with Shift", () => {
+    expect(resolveNudge(arrow("ArrowLeft"))).toEqual({ dx: -1, dy: 0 });
+    expect(resolveNudge(arrow("ArrowDown", true))).toEqual({ dx: 0, dy: 10 });
+  });
+
+  it("ignores other keys and fields", () => {
+    expect(resolveNudge(arrow("a"))).toBeNull();
+    expect(resolveNudge(arrow("ArrowUp", false, true))).toBeNull();
+  });
+});