@multiplatform.one/node-graph 7.7.2

package/src/index.ts

@@ -0,0 +1,243 @@
+/**
+ * Web barrel.
+ *
+ * The model half is NOT re-exported here. It has its own condition
+ * (`@multiplatform.one/node-graph/model`) so a server, a CLI, a Frappe hook or
+ * the CI bench can import it without React or `@xyflow` — re-exporting it from
+ * this file would defeat that by making one import pull the whole editor.
+ *
+ * `css/graph.css` is imported by `NodeGraphWeb`, so a consumer of `NodeGraph`
+ * gets it automatically. A consumer who mounts `ReactFlow` themselves imports
+ * `@multiplatform.one/node-graph/css/graph.css`.
+ */
+
+export { NodeGraph } from "./NodeGraph";
+export type { NodeGraphProps } from "./NodeGraph";
+export { graphCanvasDefaults, NodeGraphWeb } from "./react-flow/NodeGraphWeb";
+export type { NodeGraphWebProps } from "./react-flow/NodeGraphWeb";
+export { defaultGraphNodeType, useGraphController } from "./react-flow/useGraphController";
+export type {
+  GraphController,
+  GraphRelayoutOptions,
+  UseGraphControllerOptions,
+} from "./react-flow/useGraphController";
+export { GraphActionsProvider, useGraphActions } from "./react-flow/GraphActions";
+/**
+ * The imperative handle (design §9.1), on the WEB barrel as well as the native
+ * one. Milestone 6: a control is either a sibling on this handle or a
+ * serializable option, and a web story that could not rehearse the native shape
+ * would be a story that proves nothing about the phone.
+ */
+export { graphCommandNames } from "./react-flow/graphHandle";
+export type { GraphCommands, GraphCommandSlot, NodeGraphHandle } from "./react-flow/graphHandle";
+export { GraphCommandBridge } from "./react-flow/GraphCommandBridge";
+export type { GraphCommandBridgeProps } from "./react-flow/GraphCommandBridge";
+export { GraphPaintProbe } from "./react-flow/GraphPaintProbe";
+export { GraphZoomVar, graphZoomVarName } from "./react-flow/GraphZoomVar";
+export { DomOnlyStory, domOnlyStoryDecorator, hasDomRealm } from "./native/DomOnlyStory";
+export type { DomOnlyStoryProps } from "./native/DomOnlyStory";
+/**
+ * The event union, on the WEB barrel too. `NodeGraphWeb.onGraphEvent` hands it
+ * out, so a web consumer needs the type to declare its handler — the same union
+ * that crosses the bridge as JSON on native, which is what lets one story file
+ * read a runner on both.
+ */
+export type { GraphEventWire, LassoPhaseWire, PerfReportWire } from "./dom/wire";
+export type { GraphActions } from "./react-flow/GraphActions";
+export type { GraphFlowNodeData } from "./react-flow/flowAdapter";
+export { toFlowEdges, toFlowNodes } from "./react-flow/flowAdapter";
+export { GraphNodeHost, useGraphHost } from "./react-flow/GraphNodeHost";
+export { ConnectionPuck, connectionPuckLabel } from "./react-flow/ConnectionPuck";
+export type { ConnectionPuckLabel, ConnectionPuckProps } from "./react-flow/ConnectionPuck";
+export { filterLegalCandidates, isLegalTarget, legalTargets } from "./interaction/legalTargets";
+export type { LegalTargetQuery } from "./interaction/legalTargets";
+export {
+  mountedNodeCount,
+  registerMountedNode,
+  resetNodeCensus,
+  subscribeNodeCensus,
+} from "./react-flow/nodeCensus";
+export { demoControlSchemaId, demoGraphSchemaId } from "./react-flow/fixtures";
+export type { GraphHostValue } from "./react-flow/GraphNodeHost";
+
+export { GraphEdge, graphEdgeType, graphEdgeTypes } from "./edges/GraphEdge";
+export type { GraphEdgeData } from "./edges/GraphEdge";
+export { builtinEdgeKindNames, builtinEdgeKinds } from "./edges/edgeKinds";
+export type { BuiltinEdgeData, BuiltinEdgeKind } from "./edges/edgeKinds";
+export {
+  dashAnimation,
+  edgeAppearances,
+  edgeMarkerEnd,
+  edgeStrokeWidth,
+  edgeStrokeWidths,
+  resolveEdgeStyle,
+} from "./edges/edgeStyle";
+export type { EdgeAppearance, EdgeMarker, EdgePathKind, EdgeStyle } from "./edges/edgeStyle";
+
+export { GraphBootFailure, GraphDiagnostics } from "./diagnostics/GraphDiagnostics";
+export { graphDiagnosticsFromWire } from "./diagnostics/fromWire";
+export type { GraphDiagnosticsProps } from "./diagnostics/GraphDiagnostics";
+export { useGraphDiagnostics } from "./diagnostics/useGraphDiagnostics";
+export {
+  graphErrorGlobalKey,
+  readGraphError,
+  recordGraphError,
+  resetGraphError,
+} from "./diagnostics/lastError";
+export type { GraphErrorRecord } from "./diagnostics/lastError";
+export type {
+  GraphDiagnostics as GraphDiagnosticsRecord,
+  GraphDiagnosticsInput,
+  GraphFaceDelivery,
+  GraphRenderer,
+  LayoutRunnerKind,
+} from "./diagnostics/types";
+
+export { GraphFaces, useGraphFaces } from "./theme/GraphFaces";
+export type { GraphFacesProps, GraphFaceSource, GraphFaceStatus } from "./theme/GraphFaces";
+export {
+  corruptFirstFamily,
+  faceBytes,
+  graphFaceCeilingBytes,
+  graphFaceCss,
+  graphFaces,
+  probeFamily,
+  probeRenderedFamily,
+  splitFontStack,
+} from "./theme/faces";
+export type {
+  FaceProbe,
+  GraphFaceAsset,
+  GraphFaceCategory,
+  GraphFaceDeclaration,
+} from "./theme/faces";
+export { generatedGraphFaces } from "./theme/faces.generated";
+
+export { KnobEnvelopeProvider } from "./knobs/KnobEnvelopeProvider";
+export { resolveEnvelopeThemeName } from "./knobs/KnobEnvelopeProvider";
+export type { KnobEnvelopeProviderProps } from "./knobs/KnobEnvelopeProvider";
+export {
+  knobEnvelopeIdentity,
+  knobEnvelopeSchemaVersion,
+  knobsForEnvelope,
+} from "./knobs/envelope";
+export type { GraphFontRef, KnobEnvelope } from "./knobs/envelope";
+export { useKnobEnvelope } from "./knobs/useKnobEnvelope";
+export type { UseKnobEnvelopeOptions } from "./knobs/useKnobEnvelope";
+export { useGraphNodeKnobs } from "./knobs/graphKnobs";
+export type { GraphNodeKnobs, UseGraphNodeKnobsOptions } from "./knobs/graphKnobs";
+
+export {
+  lassoFlowProps,
+  lassoHoldMs,
+  lassoSlopPx,
+  useLassoSelect,
+} from "./interaction/useLassoSelect";
+export type {
+  GraphInteractionMode,
+  LassoFlowProps,
+  LassoLongPressOptions,
+  LassoSelect,
+  LassoViewportPort,
+  UseLassoSelectOptions,
+} from "./interaction/useLassoSelect";
+export { installLassoIntercept } from "./interaction/lassoIntercept";
+export type { LassoIntercept, LassoInterceptOptions } from "./interaction/lassoIntercept";
+export { LassoOverlay } from "./react-flow/LassoOverlay";
+export type { LassoOverlayProps } from "./react-flow/LassoOverlay";
+export { GraphToolbar } from "./native/GraphToolbar";
+export type { GraphToolbarProps } from "./native/GraphToolbar";
+
+export { GraphNode } from "./nodes/GraphNode";
+export type { GraphNodeProps } from "./nodes/GraphNode";
+export { GraphPort } from "./nodes/GraphPort";
+export { defaultOverviewZoom, detailOpacity, isOverview, lodForZoom } from "./nodes/lod";
+export type { GraphRenderMode } from "./nodes/lod";
+export { OverviewNode } from "./nodes/overviewNode";
+export type { OverviewNodeProps } from "./nodes/overviewNode";
+export type { GraphPortProps } from "./nodes/GraphPort";
+export {
+  FINE_PORT_HIT_MIN,
+  paintedPortSize,
+  paintedPortSizePx,
+  portConnectionRadius,
+  portGeometry,
+  portHitSize,
+  portRegionInset,
+} from "./nodes/handleGeometry";
+export type { PortGeometry, PortRect } from "./nodes/handleGeometry";
+export {
+  containerRadiusPx,
+  defaultNodeMeasure,
+  FINE_PORT_PITCH,
+  graphNodeMeasure,
+  graphNodeMinHeight,
+  graphNodeRadius,
+  graphNodeRadiusPx,
+  graphNodeWidth,
+  nodePanelPaddingPx,
+  nodeRadiusTokenPx,
+  portSpacing,
+  verticalPortCrowd,
+} from "./nodes/nodeMeasure";
+export type {
+  GraphNodeMeasure,
+  GraphNodePort,
+  GraphNodeRadiusKnob,
+  GraphNodeSizeKnob,
+  GraphNodeSpaceKnob,
+  GraphPortSide,
+} from "./nodes/nodeMeasure";
+
+export {
+  GraphVars,
+  graphRootClassName,
+  graphVarsSheet,
+  useGraphCssVars,
+} from "./theme/GraphVarsStyle";
+export type { GraphVarsProps } from "./theme/GraphVarsStyle";
+export { graphCssVars } from "./theme/graphVars";
+export type { GraphCssVarsOptions, GraphThemeAccess } from "./theme/graphVars";
+
+/**
+ * The DOM-entry registry, on the WEB barrel too, and that is deliberate.
+ *
+ * A cross-platform app registers its `'use dom'` entry from one shared module
+ * (design §9.3), and a shared module has to resolve on both platforms or the
+ * web build fails on a name only the native barrel carries. The registry itself
+ * is platform-neutral — a module-level slot and two functions, no React Native
+ * import — and on web nothing reads it, because `NodeGraphWeb` mounts React
+ * Flow directly and there is no bridge to cross.
+ */
+export {
+  clearNodeGraphDomEntry,
+  getNodeGraphDomEntry,
+  setNodeGraphDomEntry,
+} from "./native/domEntryRegistry";
+export type { NodeGraphDomEntry } from "./native/domEntryRegistry";
+
+export { layoutWithDagre, defaultLayoutSpacing } from "./layout/dagre";
+export { buildLayoutRequest, layout, reconcilePositions } from "./layout/layout";
+export type { GraphLayoutOptions } from "./layout/layout";
+export {
+  createLayoutRunner,
+  defaultProbeTimeoutMs,
+  getLayoutRunner,
+  readLayoutRunnerFallback,
+  resetLayoutRunner,
+  resolveRunner,
+} from "./layout/runner";
+export type { LayoutRunner, LayoutRunnerFallback, LayoutRunnerOptions } from "./layout/runner";
+export type {
+  LayoutDirection,
+  LayoutEdgeInput,
+  LayoutEngine,
+  LayoutNodeInput,
+  LayoutOptions,
+  LayoutRequest,
+  LayoutResult,
+  LayoutWorkerRequest,
+  LayoutWorkerResponse,
+} from "./layout/types";
+export { cloneStructured, ensureStructuredClone } from "./layout/structuredCloneShim";
+export { layoutWorkerBytes, layoutWorkerSha256 } from "./layout/worker.generated";

package/src/interaction/Lasso.stories.tsx

@@ -0,0 +1,198 @@
+/**
+ * `NodeGraph/Lasso` — the two ways into a marquee on touch (design §7.3).
+ *
+ * `ToolbarMode` is the free one and it ships first: the toolbar flips
+ * `interactionMode`, the canvas re-renders with `panOnDrag={false}`, and React
+ * Flow's own touch guard then lets a finger start a selection instead of a pan.
+ * There is no mechanism of ours in that path at all, which is the point.
+ *
+ * HOW TO SEE IT, and it does need touch emulation — a mouse takes a different
+ * branch of the same guard and would show a marquee in either mode, proving
+ * nothing:
+ *
+ *   1. DevTools → device toolbar (⌘⇧M), or `emulate` with a touch-capable
+ *      device in the chrome-devtools MCP.
+ *   2. In `pan` mode, drag across the canvas: the graph pans.
+ *   3. Press `Select`, drag the same stroke: a marquee is drawn and the nodes
+ *      it crosses come back selected. `SelectionMode.Partial`, so crossing is
+ *      enough — you do not have to enclose them, which on a phone you cannot
+ *      see well enough to do.
+ *
+ * WHAT MILESTONE 6 CHANGED, and why `LongPress` exists as a story again.
+ *
+ * `LongPress` used to call `useLassoSelect` on the HOST side and hand it a
+ * `<div ref>` of its own. On device that story did not render at all — `View
+ * config getter callback for component "div" must be a function` — and it could
+ * not have worked if it had: the pane the interceptor must take `touchmove`
+ * away from lives inside the WebView, in a different JS realm, and a host-side
+ * ref can never reach it. MPO-212's 3.7 gate was recorded as CANNOT BE
+ * ATTEMPTED for exactly that reason.
+ *
+ * So the gesture moved into the canvas, where the pane is, and the story arms
+ * it with a serializable option: `longPressLasso`. `arm`, `select` and `cancel`
+ * come back on the wire, which is how the readout below works on both
+ * platforms from one file. `interactionMode` now crosses the bridge too — it
+ * was a `NodeGraphWeb` prop that was never in the DOM options, so on device the
+ * toolbar flipped its own label and `panOnDrag` inside the WebView stayed true.
+ *
+ * `ToolbarMode` is unchanged in mechanism and is still the shippable half.
+ * Whether the long press works under a real WKWebView and a real Android
+ * WebView is still the open question design §7.3 named; what changed is that it
+ * can now be asked.
+ */
+
+import { Preset } from "@multiplatform.one/theme";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useCallback, useState } from "react";
+import { SizableText, XStack, YStack } from "tamagui";
+import type { GraphEventWire } from "../dom/wire";
+import type { NodeId } from "../model/index";
+import { GraphToolbar } from "../native/GraphToolbar";
+import { hasDomRealm } from "../native/DomOnlyStory";
+import { NodeGraph } from "../NodeGraph";
+import { demoGraphSchema } from "../react-flow/demoNodeBody";
+import { demoDocumentLarge } from "../react-flow/fixtures";
+import { Background, Controls } from "../react-flow/xy";
+import type { GraphInteractionMode } from "./useLassoSelect";
+
+const schema = demoGraphSchema();
+
+const meta: Meta<typeof NodeGraph> = {
+  title: "NodeGraph/Lasso",
+  component: NodeGraph,
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Marquee selection on touch. Toolbar mode is upstream's own path: panOnDrag={false} is the only value that opens React Flow's touch guard at Pane/index.tsx:146, so the mode toggle is the whole mechanism. The long press is ours, and since milestone 6 it runs INSIDE the canvas's realm — the pane it intercepts exists only there, which is why the previous host-side version could not mount on native at all. Needs DevTools touch emulation to tell apart from a mouse drag, which passes a different arm of the same guard.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof NodeGraph>;
+
+/** React Flow's own chrome. A legitimate child on web, nothing on native. */
+function Chrome() {
+  if (!hasDomRealm) return null;
+  return (
+    <>
+      <Background />
+      <Controls />
+    </>
+  );
+}
+
+function ToolbarModeStory() {
+  const [mode, setMode] = useState<GraphInteractionMode>("pan");
+  const [selected, setSelected] = useState<readonly NodeId[]>([]);
+
+  const onGraphEvent = useCallback((event: GraphEventWire) => {
+    if (event.t === "selection") setSelected(event.ids);
+  }, []);
+
+  return (
+    <YStack width="100%" height={560} padding="$3" gap="$3">
+      <XStack alignItems="center" gap="$3" flexWrap="wrap">
+        <GraphToolbar mode={mode} onModeChange={setMode} />
+        <SizableText fontFamily="$mono" size="$2">
+          {`mode: ${mode} · panOnDrag: ${String(mode !== "select")} · selected: ${
+            selected.length ? selected.join(", ") : "none"
+          }`}
+        </SizableText>
+      </XStack>
+      <YStack flex={1}>
+        <NodeGraph
+          schema={schema}
+          defaultDocument={demoDocumentLarge(12)}
+          interactionMode={mode}
+          coarsePointer
+          onGraphEvent={onGraphEvent}
+        >
+          <Chrome />
+        </NodeGraph>
+      </YStack>
+    </YStack>
+  );
+}
+
+export const ToolbarMode: Story = {
+  // Cascades on purpose — see the note on `NodeGraph/Overview → Main`. A
+  // `cascade={false}` with no `overrides` would discard every Storybook global
+  // and make this page look like a component that ignores its knobs.
+  render: () => (
+    <Preset>
+      <ToolbarModeStory />
+    </Preset>
+  ),
+};
+
+function LongPressStory() {
+  const [mode, setMode] = useState<GraphInteractionMode>("pan");
+  const [selected, setSelected] = useState<readonly NodeId[]>([]);
+  const [armed, setArmed] = useState(false);
+  const [arms, setArms] = useState(0);
+  const [cancels, setCancels] = useState(0);
+  const [haptics, setHaptics] = useState(0);
+
+  /**
+   * The whole readout, off ONE channel. It is the same union on web and across
+   * the bridge, which is why this story file is not two story files.
+   */
+  const onGraphEvent = useCallback((event: GraphEventWire) => {
+    if (event.t !== "lasso") return;
+    if (event.haptic) setHaptics((count) => count + 1);
+    if (event.phase === "arm") {
+      setArmed(true);
+      setArms((count) => count + 1);
+      return;
+    }
+    setArmed(false);
+    if (event.phase === "select") setSelected(event.ids);
+    else setCancels((count) => count + 1);
+  }, []);
+
+  return (
+    <YStack width="100%" height={560} padding="$3" gap="$3">
+      <XStack alignItems="center" gap="$3" flexWrap="wrap">
+        <GraphToolbar mode={mode} onModeChange={setMode} />
+        <SizableText fontFamily="$mono" size="$2">
+          {`armed: ${String(armed)} · arms: ${arms} · cancels: ${cancels} · haptics: ${haptics}`}
+        </SizableText>
+      </XStack>
+      <SizableText fontFamily="$mono" size="$2" opacity={0.75}>
+        {`selected: ${selected.length ? selected.join(", ") : "none"}`}
+      </SizableText>
+      <SizableText size="$2" opacity={0.7}>
+        Hold for 350 ms without moving more than 10 px, then drag. The interceptor takes the move
+        stream away from d3-zoom inside the canvas's own realm, so the marquee draws and the graph
+        underneath does not pan. A second finger cancels: a pinch is not a lasso.
+      </SizableText>
+      <YStack flex={1}>
+        <NodeGraph
+          schema={schema}
+          defaultDocument={demoDocumentLarge(12)}
+          interactionMode={mode}
+          coarsePointer
+          // The whole of task 6.4, as one serializable boolean. It used to be a
+          // hook the story called against a ref in the wrong realm.
+          longPressLasso
+          onGraphEvent={onGraphEvent}
+        >
+          <Chrome />
+        </NodeGraph>
+      </YStack>
+    </YStack>
+  );
+}
+
+export const LongPress: Story = {
+  render: () => (
+    <Preset>
+      <LongPressStory />
+    </Preset>
+  ),
+};

package/src/interaction/Snapping.stories.tsx

@@ -0,0 +1,189 @@
+/**
+ * `NodeGraph/Snapping` — design §12.1, and the place task 3.3's verify line is
+ * carried out: drag at zoom 0.5 and at zoom 2 and the pull has to feel the same.
+ *
+ * The three stories map to the rules that cannot be seen in a unit test:
+ *
+ *  - `Main` — one node against two neighbours, and the guides that appear.
+ *  - `MultiSelect` — S6. Shift-click two nodes and drag; the SELECTION's box
+ *    snaps and the two nodes keep their spacing. A per-node snapper deforms the
+ *    pair here, visibly.
+ *  - `ZoomThreshold` — S2. The readout prints the live zoom and the threshold
+ *    in flow units, so "the pull feels the same" is checkable instead of felt:
+ *    at 0.5x the flow threshold doubles and at 2x it halves, which is what
+ *    keeps the SCREEN distance fixed.
+ *
+ * Every node starts a few units off its neighbour's line on purpose. A graph
+ * laid out on a grid is already aligned, and a snap that fires on the first
+ * pixel of a drag shows nothing.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { SizableText, XStack, YStack } from "tamagui";
+import type { BuiltinEdgeData } from "../edges/edgeKinds";
+import type { GraphDocument } from "../model/index";
+import { NodeGraph } from "../NodeGraph";
+import { demoGraphSchema } from "../react-flow/demoNodeBody";
+import type { DemoNodeData } from "../react-flow/fixtures";
+import { Background, Controls, useStore } from "../react-flow/xy";
+import { defaultSnapThresholdPx } from "./snapAlignment";
+
+type Doc = GraphDocument<DemoNodeData, BuiltinEdgeData>;
+
+const schema = demoGraphSchema();
+
+const meta: Meta<typeof NodeGraph> = {
+  title: "NodeGraph/Snapping",
+  component: NodeGraph,
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Alignment snapping (design 7.2). A drag is snapped to a neighbour's left, centre or right line and to its top, middle or bottom line, nearest per axis independently, with the threshold measured in SCREEN pixels and divided by the zoom. Guides are one svg with at most two lines, inside the viewport transform. The end of a drag is never snapped: that frame is the one the document commits.",
+      },
+    },
+  },
+  argTypes: {
+    coarsePointer: { control: "boolean", description: "Touch surface — a 12 px pull, not 8" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof NodeGraph>;
+
+/** Deliberately 3 to 6 units off every line the neighbours offer. */
+function unalignedDocument(): Doc {
+  return {
+    version: 1,
+    nodes: [
+      { id: "anchorA", kind: "source", position: { x: 0, y: 0 }, data: { table: "orders" } },
+      { id: "anchorB", kind: "sink", position: { x: 560, y: 320 }, data: { target: "warehouse" } },
+      {
+        id: "drag-me",
+        kind: "transform",
+        position: { x: 274, y: 166 },
+        data: { expression: "drag me at either zoom" },
+      },
+    ],
+    edges: [
+      {
+        id: "anchorA->drag-me",
+        kind: "flow",
+        source: { node: "anchorA", port: "rows" },
+        target: { node: "drag-me", port: "in" },
+        data: {},
+      },
+    ],
+  };
+}
+
+/** Two nodes 200 apart, five units off the anchor's lines. Drag them together. */
+function pairDocument(): Doc {
+  return {
+    version: 1,
+    nodes: [
+      { id: "anchor", kind: "sink", position: { x: 0, y: 340 }, data: { target: "warehouse" } },
+      { id: "pair-1", kind: "source", position: { x: 5, y: 40 }, data: { table: "orders_1" } },
+      { id: "pair-2", kind: "source", position: { x: 325, y: 40 }, data: { table: "orders_2" } },
+    ],
+    edges: [],
+  };
+}
+
+function Canvas({ children, height = 520 }: { children: React.ReactNode; height?: number }) {
+  return (
+    <YStack width="100%" height={height} padding="$3">
+      {children}
+    </YStack>
+  );
+}
+
+/**
+ * Lives INSIDE the canvas, because the zoom is store state and the store only
+ * exists under the provider the editor mounts for you.
+ */
+function ZoomReadout({ coarsePointer = false }: { coarsePointer?: boolean }) {
+  const zoom = useStore((state) => state.transform[2]);
+  const screenPx = coarsePointer ? defaultSnapThresholdPx.coarse : defaultSnapThresholdPx.fine;
+  return (
+    <XStack
+      position="absolute"
+      top="$2"
+      left="$2"
+      gap="$3"
+      padding="$2"
+      borderRadius="$3"
+      backgroundColor="$background"
+      opacity={0.9}
+      zIndex={10}
+    >
+      <SizableText size="$2">{`zoom ${zoom.toFixed(2)}x`}</SizableText>
+      <SizableText size="$2" opacity={0.7}>
+        {`pull ${screenPx} screen px = ${(screenPx / zoom).toFixed(1)} flow units`}
+      </SizableText>
+    </XStack>
+  );
+}
+
+export const Main: Story = {
+  render: (args) => (
+    <Canvas>
+      <SizableText size="$2" opacity={0.7} paddingBottom="$2">
+        Drag `drag-me`. A vertical guide means its left, centre or right lined up with a
+        neighbour's; a horizontal one means the same on the other axis. Let go and the guides clear.
+      </SizableText>
+      <YStack flex={1}>
+        <NodeGraph
+          schema={schema}
+          defaultDocument={unalignedDocument()}
+          coarsePointer={args.coarsePointer}
+        >
+          <Background />
+          <Controls />
+        </NodeGraph>
+      </YStack>
+    </Canvas>
+  ),
+};
+
+export const MultiSelect: Story = {
+  render: () => (
+    <Canvas>
+      <SizableText size="$2" opacity={0.7} paddingBottom="$2">
+        Shift-click both `pair-*` nodes, then drag either one. The 320 units between them never
+        changes: the SELECTION's bounding box is what snaps, and one delta moves both (S6).
+      </SizableText>
+      <YStack flex={1}>
+        <NodeGraph schema={schema} defaultDocument={pairDocument()}>
+          <Background />
+          <Controls />
+        </NodeGraph>
+      </YStack>
+    </Canvas>
+  ),
+};
+
+export const ZoomThreshold: Story = {
+  render: (args) => (
+    <Canvas height={560}>
+      <SizableText size="$2" opacity={0.7} paddingBottom="$2">
+        Zoom to 0.50x, drag `drag-me` until a guide fires, and note how far off it was. Zoom to
+        2.00x and do it again. The flow-unit number in the readout changes by 4x; the distance your
+        cursor travels does not. That is S2.
+      </SizableText>
+      <YStack flex={1}>
+        <NodeGraph
+          schema={schema}
+          defaultDocument={unalignedDocument()}
+          coarsePointer={args.coarsePointer}
+        >
+          <Background />
+          <Controls />
+          <ZoomReadout coarsePointer={args.coarsePointer} />
+        </NodeGraph>
+      </YStack>
+    </Canvas>
+  ),
+};