@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/node-canvas/NodeCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeCanvas.js","sources":["../../../src/components/node-canvas/NodeCanvas.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat, useUiStrings, type UiStrings } from \"../../lib/i18n\";\nimport { Icon } from \"../Icon\";\nimport { IconButton } from \"../IconButton\";\nimport { Breadcrumb } from \"../Navigation\";\nimport { Tooltip } from \"../Popover\";\nimport { ToggleGroup, Toggle } from \"../Toggle\";\nimport { LAYOUT_DEFAULTS, edgePath, layoutGraph, neighbourhood } from \"./layout\";\nimport { useCanvasGestures } from \"./use-canvas-gestures\";\nimport type {\n  CanvasGraph,\n  CanvasGroup,\n  CanvasNode,\n  CanvasOrientation,\n  CanvasPlacedEdge,\n  NodeRenderer,\n  PlacedNode,\n} from \"./types\";\n\n/* ============================================================================\n   NODE CANVAS — a graph drawn as a chart you can pan, rearrange and drill into.\n   (DX-3344 — generalised from a tree-only component; see `types.ts` and\n   `layout.ts` for why the data model and the layout engine both changed\n   completely rather than growing a second path beside the old ones.)\n\n   IT IS NOT `Tree`, AND THE DIFFERENCE IS THE GEOMETRY. `Tree` is an indented\n   list: every visible node is a row, rows stack, and expanding one pushes the\n   rest down. This positions nodes in two dimensions and draws the edges, which\n   is the right shape when what you are reading is the SHAPE of the graph — how\n   a cluster connects to its neighbours, where the mass sits — rather than a\n   path through it. If you want a file explorer, use `Tree`.\n\n   GROUPS ARE THE ONE PROGRESSIVE-DISCLOSURE MECHANISM, replacing the old\n   tree's `depth` prop entirely. A real graph worth drawing is unreadable at\n   full detail (see `layout.ts`'s module doc for the measured numbers), and\n   \"show N levels down from a root\" has no meaning once a node can have more\n   than one parent or sit in a cycle. `groups` (declared) and cycles\n   (auto-detected — see `layout.ts`) are BOTH collapsed to one box by default,\n   and a click drills into whichever one is clicked — a graph-shaped version of\n   exactly the re-root/breadcrumb mechanism the tree version had, narrowed from\n   an arbitrarily deep trail to one level, because groups here are flat.\n\n   WHAT CHANGED ABOUT CLICKING A NODE. The tree version's click always\n   descended, because \"look inside this node\" and \"this node has children\" were\n   the same fact. In a general graph they are not: an ordinary node's\n   connections are edges to draw, not children to descend into, so clicking one\n   now fires `onNodeClick` for the CONSUMER to act on (open a detail view,\n   navigate elsewhere) and drilling in is reserved for the two things that are\n   actually collapsed boxes standing in for other nodes — a group and a\n   condensed cycle.\n\n   KEYBOARD NAVIGATION GENERALISES THE SAME WAY THE TREE VERSION DID IT: ONE\n   roving tab stop, and the arrows move STRUCTURALLY. \"Structural\" used to mean\n   sibling / parent / child; in a graph without a single hierarchy those become\n   PREDECESSOR (an edge pointing at this node), SUCCESSOR (an edge this node\n   points to), and same-RANK neighbour (dagre already aligns every node on one\n   rank to the same cross-axis coordinate, so \"the next box on this level\" is\n   exactly as well-defined as \"next sibling\" was in a tree).\n   ========================================================================= */\n\nexport interface NodeCanvasProps<Extra = unknown> {\n  /** The whole graph — every node and edge, however many scopes it spans. Never mutated. */\n  graph: CanvasGraph<Extra>;\n  /** Named clusters nodes can belong to via `CanvasNode.groupId`. Flat — see `CanvasGroup`. */\n  groups?: readonly CanvasGroup[];\n  /**\n   * What this canvas IS — \"Import graph for the docs map\", \"Service dependency graph\".\n   *\n   * Required for the same reason `StatusChecklist.label` and `KanbanBoard.label`\n   * are: it is the accessible name of the whole structure, and somebody landing\n   * on it by keyboard or in the list view has nothing else to tell them what\n   * they are inside.\n   */\n  label: string;\n  /**\n   * The node body. Receives the consumer's own node type and a context of\n   * purely structural facts — see `NodeRenderContext`.\n   *\n   * A RENDER PROP RATHER THAN CHILDREN-AS-A-FUNCTION, for the same reason\n   * `ProvenanceDisclosure` takes `actions` and `Chat` takes a `components` map:\n   * a canvas draws MANY nodes and `children` reads as one. Optional: the\n   * default draws the label, and a member count when this box stands in for a\n   * group or a condensed cycle.\n   *\n   * Called with a SYNTHETIC node for a collapsed group or cycle — `{id, label}`\n   * only, `Extra`'s own fields absent — since no single real node's `Extra`\n   * would be honest to hand back for a box standing in for several.\n   */\n  renderNode?: NodeRenderer<Extra>;\n  /**\n   * The hover summary's content. Defaults to the node's `label`. Return\n   * `null`/`undefined` to suppress the tooltip for a particular node.\n   */\n  renderSummary?: (node: CanvasNode<Extra>) => React.ReactNode;\n  /** A class name for one drawn edge, keyed on its (possibly aggregated) `kind`. */\n  edgeClassName?: (edge: CanvasPlacedEdge) => string | undefined;\n  /** Which way the chart grows. See `CanvasOrientation`. */\n  orientation?: CanvasOrientation;\n  /** Along-axis extent of a node that does not declare its own, in px. */\n  nodeWidth?: number;\n  /** Cross-axis extent of a node that does not declare its own, in px. */\n  nodeHeight?: number;\n  /** Height of the scrolling viewport. Any CSS length. */\n  height?: string;\n  /** Which group is currently drilled into. `null` is the top level. Controlled. */\n  expandedGroupId?: string | null;\n  /** Initial drilled-into group for uncontrolled use. Default `null` (top level). */\n  defaultExpandedGroupId?: string | null;\n  /** Fired whenever the drilled-into group changes, from either a click or the keyboard. */\n  onExpandedGroupIdChange?: (groupId: string | null) => void;\n  /** Fired when an ORDINARY node (not a group, not a cycle) is clicked. Navigation is the consumer's. */\n  onNodeClick?: (node: CanvasNode<Extra>) => void;\n  /** Fired when a node drag commits. The offset is from its laid-out position. */\n  onNodeDragEnd?: (event: { id: string; offset: { x: number; y: number } }) => void;\n  /** Nothing pans, drags or descends. Reading still works, including by keyboard. */\n  disabled?: boolean;\n  className?: string;\n}\n\n/* Clear space around the drawing inside the scrolled plane — what a node can\n   be dragged INTO. Without it the layout extent is the plane extent and every\n   node is already against a wall, so a drag clamps the instant it starts. */\nconst PLANE_PADDING = 96;\n\n/** How many hops out `NodeRenderContext.focusDistance` tracks. See `layout.ts#neighbourhood`. */\nconst FOCUS_HOPS = 2;\n\nfunction isGroupLike(placed: PlacedNode<unknown>): boolean {\n  return placed.group !== null || placed.cycle;\n}\n\nfunction placedLabel(placed: PlacedNode<unknown>, strings: UiStrings[\"nodeCanvas\"], fmt: (n: number) => string): string {\n  if (placed.node) return placed.node.label;\n  if (placed.group) return placed.group.label;\n  return strings.cyclicCluster(fmt(placed.memberCount));\n}\n\n/** The synthetic node `renderNode`/list rows receive for a group or a cycle box. */\nfunction syntheticNode<Extra>(placed: PlacedNode<Extra>, strings: UiStrings[\"nodeCanvas\"], fmt: (n: number) => string): CanvasNode<Extra> {\n  if (placed.node) return placed.node;\n  return { id: placed.id, label: placedLabel(placed, strings, fmt) } as CanvasNode<Extra>;\n}\n\n/** The default body. Renders the label, and a member count for a collapsed box. */\nfunction DefaultNodeBody({ label, memberCount, isGroup }: { label: string; memberCount: number; isGroup: boolean }) {\n  const strings = useUiStrings().nodeCanvas;\n  const fmt = useNumberFormat();\n  return (\n    <div className=\"flex h-full flex-col justify-center gap-1 px-3 py-2\">\n      <span className=\"line-clamp-2 text-sm font-medium text-primary\">{label}</span>\n      {isGroup && (\n        <span className=\"tabular text-2xs text-tertiary\">\n          {strings.itemCount(memberCount, fmt(memberCount))}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport function NodeCanvas<Extra = unknown>({\n  graph,\n  groups = [],\n  label,\n  renderNode,\n  renderSummary,\n  edgeClassName,\n  orientation = LAYOUT_DEFAULTS.orientation,\n  nodeWidth,\n  nodeHeight,\n  height = \"30rem\",\n  expandedGroupId,\n  defaultExpandedGroupId = null,\n  onExpandedGroupIdChange,\n  onNodeClick,\n  onNodeDragEnd,\n  disabled,\n  className,\n}: NodeCanvasProps<Extra>) {\n  const strings = useUiStrings().nodeCanvas;\n  const fmt = useNumberFormat();\n  const statusId = useId();\n\n  const [uncontrolledScope, setUncontrolledScope] = useState<string | null>(defaultExpandedGroupId);\n  const scopeGroupId = expandedGroupId !== undefined ? expandedGroupId : uncontrolledScope;\n  const setScope = useCallback(\n    (next: string | null) => {\n      if (expandedGroupId === undefined) setUncontrolledScope(next);\n      onExpandedGroupIdChange?.(next);\n    },\n    [expandedGroupId, onExpandedGroupIdChange],\n  );\n\n  /**\n   * Drilled into a CONDENSED CYCLE, nested one level below `scopeGroupId` —\n   * uncontrolled only, deliberately. A cycle has no stable, externally\n   * declared id the way a `CanvasGroup` does (see `CanvasCycleScope` in\n   * `types.ts`), so there is nothing sensible for a consumer to pass in;\n   * captured straight off the `PlacedNode.memberIds` the click landed on.\n   */\n  const [cycleScope, setCycleScope] = useState<readonly string[] | null>(null);\n  /* Memoised on `cycleScope`'s own identity, not recreated as a fresh object\n     literal every render — `layoutGraph` is called from a `useMemo` keyed on\n     this value, and a new object each render would recompute the whole\n     layout on every unrelated re-render for as long as a cycle stays drilled into. */\n  const layoutScope = useMemo(\n    () => (cycleScope ? { cycleMemberIds: cycleScope } : scopeGroupId),\n    [cycleScope, scopeGroupId],\n  );\n\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  const [view, setView] = useState<\"canvas\" | \"list\">(\"canvas\");\n\n  /* NARROW VIEWPORTS DEFAULT TO THE LIST — a positioned chart at 375px has no\n     room to lay anything out in, and truncating every label to one letter (the\n     spike's own finding) is not a real reading experience. This runs once, on\n     mount, and never overrides an explicit later choice: a phone user who\n     switches TO the canvas deliberately is not flipped back on the next\n     re-render. */\n  const viewInitialised = useRef(false);\n  useEffect(() => {\n    if (viewInitialised.current) return;\n    viewInitialised.current = true;\n    if (typeof window !== \"undefined\" && window.matchMedia(\"(max-width: 640px)\").matches) {\n      setView(\"list\");\n    }\n  }, []);\n\n  /* A DIFFERENT GRAPH RESETS THE SCOPE rather than trying to keep it — a scope\n     naming a group that no longer exists is not recoverable in general, and\n     landing back at the top with no explanation is less confusing than\n     silently rendering nothing.\n\n     COMPARED BY `graph.nodes`/`graph.edges`, NOT BY `graph` ITSELF. `graph`\n     is near-always a `{ nodes, edges }` object literal written inline in\n     JSX — this file's own demo does exactly that over module-level `const`\n     arrays — so a fresh `graph` IDENTITY on every parent re-render is the\n     ordinary case, not the exceptional one. Resetting on that would drop a\n     consumer's drilled-in scope on every unrelated re-render of whatever\n     renders this canvas. `nodes`/`edges` are the arrays a consumer actually\n     controls the identity of (a `useMemo`, or a genuinely stable module\n     constant), so THEIR identity is what \"the data changed\" means here. */\n  const graphNodesRef = useRef(graph.nodes);\n  const graphEdgesRef = useRef(graph.edges);\n  if (graphNodesRef.current !== graph.nodes || graphEdgesRef.current !== graph.edges) {\n    graphNodesRef.current = graph.nodes;\n    graphEdgesRef.current = graph.edges;\n    if (expandedGroupId === undefined) setUncontrolledScope(defaultExpandedGroupId);\n    setCycleScope(null);\n    setFocusedId(null);\n  }\n\n  const layout = useMemo(\n    () => layoutGraph(graph, groups, layoutScope, { orientation, nodeWidth, nodeHeight }),\n    [graph, groups, layoutScope, orientation, nodeWidth, nodeHeight],\n  );\n\n  const byId = useMemo(() => new Map(layout.nodes.map((n) => [n.id, n])), [layout.nodes]);\n  const currentGroup = scopeGroupId ? groups.find((g) => g.id === scopeGroupId) ?? null : null;\n\n  const plane = useMemo(\n    () => ({ width: layout.width + PLANE_PADDING * 2, height: layout.height + PLANE_PADDING * 2 }),\n    [layout],\n  );\n\n  const boxes = useMemo(() => {\n    const map = new Map<string, PlacedNode<Extra>>();\n    for (const node of layout.nodes) {\n      map.set(node.id, { ...node, x: node.x + PLANE_PADDING, y: node.y + PLANE_PADDING });\n    }\n    return map;\n  }, [layout]);\n\n  const layoutBoxOf = useCallback(\n    (id: string) => {\n      const box = boxes.get(id);\n      return box ? { x: box.x, y: box.y, width: box.width, height: box.height } : null;\n    },\n    [boxes],\n  );\n\n  const activate = useCallback(\n    (id: string) => {\n      const placed = byId.get(id);\n      if (!placed) return;\n      /* A DECLARED group drills via its own stable id (`setScope`, which the\n         consumer can control); a CONDENSED CYCLE has no such id, so its\n         membership is captured directly off THIS render's `PlacedNode` —\n         see `CanvasCycleScope` in `types.ts` for why. */\n      if (placed.group) {\n        setScope(placed.group.id);\n        setFocusedId(id);\n        return;\n      }\n      if (placed.cycle) {\n        setCycleScope(placed.memberIds);\n        setFocusedId(null);\n        return;\n      }\n      setFocusedId(id);\n      if (placed.node) onNodeClick?.(placed.node);\n    },\n    [byId, onNodeClick, setScope],\n  );\n\n  const gestures = useCanvasGestures({\n    layoutBoxOf,\n    planeSize: plane,\n    onNodeClick: activate,\n    onNodeDragEnd,\n    disabled,\n  });\n\n  const { clearOffsets } = gestures;\n  /* Offsets are deltas from a layout that no longer exists the moment the\n     canvas changes scope or orientation, so they are dropped with it. */\n  const layoutKey = `${scopeGroupId ?? \"\"}:${cycleScope?.join(\",\") ?? \"\"}:${orientation}`;\n  const layoutKeyRef = useRef(layoutKey);\n  useEffect(() => {\n    if (layoutKeyRef.current === layoutKey) return;\n    layoutKeyRef.current = layoutKey;\n    clearOffsets();\n  }, [layoutKey, clearOffsets]);\n\n  const positionOf = useCallback(\n    (id: string) => {\n      const box = boxes.get(id);\n      if (!box) return null;\n      const offset = gestures.offsets[id];\n      return {\n        x: box.x + (offset?.x ?? 0),\n        y: box.y + (offset?.y ?? 0),\n        width: box.width,\n        height: box.height,\n      };\n    },\n    [boxes, gestures.offsets],\n  );\n\n  /* --- focus neighbourhood ------------------------------------------------ */\n\n  const neighbours = useMemo(\n    () => (focusedId ? neighbourhood(focusedId, layout.edges, FOCUS_HOPS) : null),\n    [focusedId, layout.edges],\n  );\n\n  /* --- keyboard ------------------------------------------------------------ */\n\n  const treeRef = useRef<HTMLDivElement | null>(null);\n  /**\n   * The DEFAULT tab stop, when nothing has taken focus yet: the topmost,\n   * then leftmost, SOURCE node — one with no incoming edge in this scope.\n   *\n   * `layout.nodes`' own order is an artefact of Tarjan's component order, not\n   * a reading order, so picking its first entry would start the canvas\n   * somewhere arbitrary on every render. A source node is this graph's closest\n   * analogue to the tree version's \"always starts at the root\": deterministic,\n   * and the natural place a reader's eye lands first in a ranked chart.\n   */\n  const defaultTabStopId = useMemo(() => {\n    if (layout.nodes.length === 0) return null;\n    const hasIncoming = new Set(layout.edges.map((edge) => edge.to));\n    const sources = layout.nodes.filter((node) => !hasIncoming.has(node.id));\n    const candidates = sources.length > 0 ? sources : layout.nodes;\n    return [...candidates].sort((a, b) => a.y - b.y || a.x - b.x)[0]!.id;\n  }, [layout.nodes, layout.edges]);\n  const tabStopId = focusedId && boxes.has(focusedId) ? focusedId : defaultTabStopId;\n\n  const focusNode = useCallback((id: string) => {\n    setFocusedId(id);\n    queueMicrotask(() => {\n      /* SCOPED TO THIS CANVAS'S OWN TREE, never `document` — two canvases can\n         legitimately draw the same node id, and a document-wide lookup would\n         move focus into whichever one happens to render first. */\n      const el = treeRef.current?.querySelector<HTMLElement>(\n        `[data-canvas-node=\"${CSS.escape(id)}\"]`,\n      );\n      el?.focus();\n      el?.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n    });\n  }, []);\n\n  const ascend = useCallback(() => {\n    /* Pops the INNERMOST level first — a drilled-into cycle sits one level\n       below whatever group scope (or the top level) it was entered from.\n       Focus is cleared rather than aimed at the box just left: that box's id\n       in the PARENT scope (`group:<id>` for a declared group, an entirely\n       different `cycle:<id>` for a cycle — recomputed fresh, not the same\n       string) is not the id `boxes` is keyed on here, so guessing it wrong\n       silently focused an unrelated node with that literal id. Clearing lets\n       `defaultTabStopId` pick a real, present node instead. */\n    if (cycleScope) {\n      setCycleScope(null);\n      setFocusedId(null);\n      return;\n    }\n    if (scopeGroupId === null) return;\n    setScope(null);\n    setFocusedId(null);\n  }, [cycleScope, scopeGroupId, setScope]);\n\n  const rankKey = useCallback(\n    (placed: { x: number; y: number }) => (orientation === \"vertical\" ? Math.round(placed.y) : Math.round(placed.x)),\n    [orientation],\n  );\n\n  function siblingOf(id: string, step: number): string | null {\n    const box = boxes.get(id);\n    if (!box) return null;\n    const rank = rankKey(box);\n    const rankMates = layout.nodes\n      .filter((node) => rankKey(node) === rank)\n      .sort((a, b) => (orientation === \"vertical\" ? a.x - b.x : a.y - b.y));\n    const index = rankMates.findIndex((node) => node.id === id);\n    return rankMates[index + step]?.id ?? null;\n  }\n\n  function predecessorOf(id: string): string | null {\n    return layout.edges.find((edge) => edge.to === id)?.from ?? null;\n  }\n  function successorOf(id: string): string | null {\n    return layout.edges.find((edge) => edge.from === id)?.to ?? null;\n  }\n\n  function onKeyDown(event: React.KeyboardEvent, id: string) {\n    /* ARROWS FOLLOW THE DRAWING, NOT THE DATA — same rule the tree version\n       used, generalised: in a vertical chart, rank-mates sit left and right of\n       each other and predecessors/successors are above/below. */\n    const vertical = orientation === \"vertical\";\n    const prevRankMate = vertical ? \"ArrowLeft\" : \"ArrowUp\";\n    const nextRankMate = vertical ? \"ArrowRight\" : \"ArrowDown\";\n    const toPredecessor = vertical ? \"ArrowUp\" : \"ArrowLeft\";\n    const toSuccessor = vertical ? \"ArrowDown\" : \"ArrowRight\";\n\n    let target: string | null = null;\n    switch (event.key) {\n      case prevRankMate:\n        target = siblingOf(id, -1);\n        break;\n      case nextRankMate:\n        target = siblingOf(id, 1);\n        break;\n      case toPredecessor:\n        target = predecessorOf(id);\n        break;\n      case toSuccessor:\n        target = successorOf(id);\n        break;\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        if (!disabled) activate(id);\n        return;\n      case \"Backspace\":\n        /* Not Escape: Escape already means \"abandon the drag in flight\". */\n        event.preventDefault();\n        if (!disabled) ascend();\n        return;\n      default:\n        return;\n    }\n    if (!target) return;\n    event.preventDefault();\n    focusNode(target);\n  }\n\n  /* --- initial position ---------------------------------------------------- */\n\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const { bindViewport } = gestures;\n  const setViewport = useCallback(\n    (node: HTMLDivElement | null) => {\n      viewportRef.current = node;\n      bindViewport(node);\n    },\n    [bindViewport],\n  );\n\n  /* CENTRE ON ARRIVAL — the plane is wider than the viewport for any graph\n     worth drawing, and opening scrolled to the top-left corner of the padding\n     reads as an empty component. */\n  useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || layout.nodes.length === 0) return;\n    el.scrollLeft = Math.max(0, plane.width / 2 - el.clientWidth / 2);\n    el.scrollTop = Math.max(0, plane.height / 2 - el.clientHeight / 2);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- re-centre on scope change, not every offset change\n  }, [scopeGroupId, cycleScope, plane.width, plane.height]);\n\n  const toTop = useCallback(() => {\n    setScope(null);\n    setCycleScope(null);\n  }, [setScope]);\n\n  const crumbs = [\n    { label, onClick: scopeGroupId === null && !cycleScope ? undefined : toTop },\n    ...(currentGroup\n      ? [{ label: currentGroup.label, onClick: cycleScope ? () => setCycleScope(null) : undefined }]\n      : []),\n    ...(cycleScope ? [{ label: strings.cyclicCluster(fmt(cycleScope.length)), onClick: undefined }] : []),\n  ];\n\n  const connections = useCallback(\n    (id: string) => {\n      const out = layout.edges.filter((edge) => edge.from === id).map((edge) => byId.get(edge.to));\n      return out.filter((n): n is PlacedNode<Extra> => Boolean(n));\n    },\n    [layout.edges, byId],\n  );\n\n  const body = (placed: PlacedNode<Extra>, isFocused: boolean, isDragging: boolean) => {\n    const node = syntheticNode(placed, strings, fmt);\n    const context = {\n      isGroup: isGroupLike(placed),\n      memberCount: placed.memberCount,\n      isFocused,\n      isDragging,\n      focusDistance: neighbours?.get(placed.id) ?? null,\n    };\n    if (renderNode) return renderNode(node, context);\n    return <DefaultNodeBody label={node.label} memberCount={placed.memberCount} isGroup={context.isGroup} />;\n  };\n\n  const summaryOf = (placed: PlacedNode<Extra>): React.ReactNode => {\n    const node = syntheticNode(placed, strings, fmt);\n    return renderSummary ? renderSummary(node) : node.label;\n  };\n\n  return (\n    <div\n      className={cn(\n        \"relative flex min-w-0 flex-col overflow-hidden rounded-xl border border-border bg-surface\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-wrap items-center gap-2 border-b border-border-subtle px-3 py-2\">\n        <IconButton\n          icon={<Icon name=\"arrow-up\" size=\"sm\" />}\n          label={strings.goUp}\n          size=\"sm\"\n          onClick={ascend}\n          disabledReason={\n            disabled\n              ? strings.readOnly\n              : scopeGroupId === null && !cycleScope\n                ? strings.atTop\n                : undefined\n          }\n        />\n        <Breadcrumb items={crumbs} className=\"min-w-0 flex-1\" />\n        <ToggleGroup\n          variant=\"segmented\"\n          multiple={false}\n          aria-label={strings.view}\n          value={[view]}\n          onValueChange={(value) => setView(value[0] === \"list\" ? \"list\" : \"canvas\")}\n        >\n          <Toggle value=\"canvas\" iconOnly aria-label={strings.chartView}>\n            <Icon name=\"git-branch\" size=\"xs\" />\n          </Toggle>\n          <Toggle value=\"list\" iconOnly aria-label={strings.listView}>\n            <Icon name=\"list\" size=\"xs\" />\n          </Toggle>\n        </ToggleGroup>\n      </div>\n\n      {view === \"list\" ? (\n        <div\n          role=\"list\"\n          aria-label={label}\n          aria-describedby={statusId}\n          className=\"min-w-0 flex-1 divide-y divide-border-subtle overflow-auto\"\n          style={{ height }}\n        >\n          {layout.nodes.map((placed) => {\n            const outgoing = connections(placed.id);\n            const groupLike = isGroupLike(placed);\n            return (\n              <div\n                key={placed.id}\n                role=\"listitem\"\n                tabIndex={0}\n                onClick={() => activate(placed.id)}\n                onKeyDown={(event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    activate(placed.id);\n                  }\n                }}\n                className={cn(\n                  \"flex flex-col gap-1 px-3 py-2 outline-none\",\n                  \"focus-visible:ring-2 focus-visible:ring-accent-border focus-visible:ring-inset\",\n                  groupLike && !disabled ? \"cursor-pointer hover:bg-surface-hover\" : \"cursor-default\",\n                )}\n              >\n                <div className=\"flex min-w-0 items-center gap-2\">\n                  {body(placed, false, false)}\n                  {groupLike && <Icon name=\"chevron-right\" size=\"xs\" className=\"shrink-0 text-tertiary\" />}\n                </div>\n                {outgoing.length > 0 && (\n                  <p className=\"pl-3 text-2xs text-tertiary\">\n                    {strings.connectsTo(outgoing.map((n) => placedLabel(n, strings, fmt)))}\n                  </p>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      ) : (\n        <div\n          ref={setViewport}\n          data-canvas-viewport\n          className={cn(\n            \"relative min-w-0 overflow-auto overscroll-contain bg-canvas-subtle\",\n            \"select-none\",\n            disabled ? \"cursor-default\" : gestures.panning ? \"cursor-grabbing\" : \"cursor-grab\",\n          )}\n          style={{ height }}\n        >\n          <div className=\"relative\" style={{ width: plane.width, height: plane.height }}>\n            <svg\n              aria-hidden=\"true\"\n              data-canvas-edges\n              className=\"pointer-events-none absolute inset-0 text-border-strong\"\n              width={plane.width}\n              height={plane.height}\n            >\n              {layout.edges.map((edge) => {\n                const shifted = {\n                  ...edge,\n                  points: edge.points.map((p) => ({ x: p.x + PLANE_PADDING, y: p.y + PLANE_PADDING })),\n                };\n                const highlighted =\n                  neighbours !== null &&\n                  neighbours.has(edge.from) &&\n                  neighbours.has(edge.to);\n                return (\n                  <path\n                    key={`${edge.from}->${edge.to}`}\n                    d={edgePath(shifted)}\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={neighbours ? (highlighted ? 2 : 1) : 1.5}\n                    opacity={neighbours ? (highlighted ? 1 : 0.35) : 1}\n                    className={edgeClassName?.(edge)}\n                  />\n                );\n              })}\n            </svg>\n\n            <div\n              ref={treeRef}\n              role=\"tree\"\n              aria-label={label}\n              aria-describedby={statusId}\n              className=\"pointer-events-none absolute inset-0\"\n            >\n              {layout.nodes.map((placed) => {\n                const position = positionOf(placed.id);\n                if (!position) return null;\n                const isDragging = gestures.draggingId === placed.id;\n                const groupLike = isGroupLike(placed);\n                const focusDistance = neighbours?.get(placed.id) ?? null;\n                const dimmed = neighbours !== null && focusDistance === null;\n                const summary = summaryOf(placed);\n\n                const nodeEl = (\n                  <div\n                    key={placed.id}\n                    ref={gestures.bindNode(placed.id)}\n                    role=\"treeitem\"\n                    aria-label={placedLabel(placed, strings, fmt)}\n                    aria-expanded={groupLike ? false : undefined}\n                    data-canvas-node={placed.id}\n                    data-canvas-dragging={isDragging || undefined}\n                    tabIndex={placed.id === tabStopId ? 0 : -1}\n                    onFocus={() => setFocusedId(placed.id)}\n                    onKeyDown={(event) => onKeyDown(event, placed.id)}\n                    className={cn(\n                      \"pointer-events-auto absolute rounded-lg border bg-surface-raised outline-none\",\n                      \"transition-[var(--tx-colors),box-shadow,scale,opacity] duration-(--dur-fast) ease-snappy\",\n                      \"focus-visible:ring-2 focus-visible:ring-accent-border\",\n                      groupLike && !disabled\n                        ? \"cursor-pointer border-border hover:border-accent-border hover:bg-surface-hover\"\n                        : \"cursor-default border-border-subtle\",\n                      isDragging ? \"z-20 scale-[1.02] border-accent-border elevate-lg\" : \"elevate-sm\",\n                      !isDragging && gestures.offsets[placed.id] && \"z-10\",\n                      dimmed && \"opacity-40\",\n                    )}\n                    style={{\n                      left: position.x,\n                      top: position.y,\n                      width: position.width,\n                      height: position.height,\n                      touchAction: disabled ? undefined : \"pan-x pan-y\",\n                    }}\n                  >\n                    {body(placed, placed.id === tabStopId, isDragging)}\n                  </div>\n                );\n\n                return summary != null ? (\n                  <Tooltip key={placed.id} content={summary}>\n                    {nodeEl}\n                  </Tooltip>\n                ) : (\n                  nodeEl\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n\n      <p id={statusId} role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {cycleScope\n          ? strings.showingCycle(layout.nodes.length, fmt(layout.nodes.length), fmt(cycleScope.length))\n          : strings.showing(layout.nodes.length, fmt(layout.nodes.length), currentGroup ? currentGroup.label : label)}\n      </p>\n    </div>\n  );\n}\n"],"names":["PLANE_PADDING","FOCUS_HOPS","isGroupLike","placed","placedLabel","strings","fmt","syntheticNode","DefaultNodeBody","label","memberCount","isGroup","useUiStrings","useNumberFormat","jsxs","jsx","NodeCanvas","graph","groups","renderNode","renderSummary","edgeClassName","orientation","LAYOUT_DEFAULTS","nodeWidth","nodeHeight","height","expandedGroupId","defaultExpandedGroupId","onExpandedGroupIdChange","onNodeClick","onNodeDragEnd","disabled","className","statusId","useId","uncontrolledScope","setUncontrolledScope","useState","scopeGroupId","setScope","useCallback","next","cycleScope","setCycleScope","layoutScope","useMemo","focusedId","setFocusedId","view","setView","viewInitialised","useRef","useEffect","graphNodesRef","graphEdgesRef","layout","layoutGraph","byId","n","currentGroup","g","plane","boxes","map","node","layoutBoxOf","id","box","activate","gestures","useCanvasGestures","clearOffsets","layoutKey","layoutKeyRef","positionOf","offset","neighbours","neighbourhood","treeRef","defaultTabStopId","hasIncoming","edge","sources","a","b","tabStopId","focusNode","el","ascend","rankKey","siblingOf","step","rank","rankMates","index","predecessorOf","successorOf","onKeyDown","event","vertical","prevRankMate","nextRankMate","toPredecessor","toSuccessor","target","viewportRef","bindViewport","setViewport","toTop","crumbs","connections","body","isFocused","isDragging","context","summaryOf","cn","IconButton","Icon","Breadcrumb","ToggleGroup","value","Toggle","outgoing","groupLike","shifted","p","highlighted","edgePath","position","focusDistance","dimmed","summary","nodeEl","Tooltip"],"mappings":"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"}

package/dist/components/node-canvas/layout.js

@@ -0,0 +1,237 @@
+import w from "@dagrejs/dagre";
+const u = {
+  /* A node wide enough for a short title and a line of detail at the library's
+     body size, and a height that clears two lines of it. Consumers with denser
+     content pass their own — per node, if they differ from each other. */
+  nodeWidth: 176,
+  nodeHeight: 76,
+  /* Wide enough that two adjacent boxes read as two things rather than a
+     segmented bar, narrow enough that a fan of six children still fits a
+     laptop viewport without panning. */
+  siblingGap: 28,
+  /* Larger than the sibling gap on purpose: the level gap is where the edges
+     live, and an edge shorter than it is thick reads as a join rather than a
+     link. */
+  levelGap: 64,
+  orientation: "vertical"
+};
+function M(o) {
+  return `group:${o}`;
+}
+function v(o, f, a) {
+  const g = new Map(f.map((e) => [e.id, e])), s = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+  if (a === null)
+    for (const e of o.nodes) {
+      const n = e.groupId ? g.get(e.groupId) : void 0;
+      if (n) {
+        const h = M(n.id);
+        let c = s.get(h);
+        c || (c = {
+          id: h,
+          label: n.label,
+          width: n.width,
+          height: n.height,
+          isGroup: !0,
+          group: n,
+          node: null,
+          memberIds: []
+        }, s.set(h, c)), c.memberIds.push(e.id), l.set(e.id, c.id);
+      } else
+        s.set(e.id, {
+          id: e.id,
+          label: e.label,
+          width: e.width,
+          height: e.height,
+          isGroup: !1,
+          group: null,
+          node: e,
+          memberIds: [e.id]
+        }), l.set(e.id, e.id);
+    }
+  else
+    for (const e of o.nodes)
+      e.groupId === a && (s.set(e.id, {
+        id: e.id,
+        label: e.label,
+        width: e.width,
+        height: e.height,
+        isGroup: !1,
+        group: null,
+        node: e,
+        memberIds: [e.id]
+      }), l.set(e.id, e.id));
+  const t = /* @__PURE__ */ new Map();
+  for (const e of o.edges) {
+    const n = l.get(e.from), h = l.get(e.to);
+    if (!n || !h || n === h) continue;
+    const c = `${n}\0${h}`, r = t.get(c);
+    r ? r.weight += 1 : t.set(c, { from: n, to: h, kind: e.kind, weight: 1 });
+  }
+  return { entities: s, edges: [...t.values()] };
+}
+function $(o, f) {
+  const a = new Set(f), g = new Map(o.nodes.map((t) => [t.id, t])), s = /* @__PURE__ */ new Map();
+  for (const t of a) {
+    const e = g.get(t);
+    e && s.set(t, {
+      id: t,
+      entity: {
+        id: t,
+        label: e.label,
+        width: e.width,
+        height: e.height,
+        isGroup: !1,
+        group: null,
+        node: e,
+        memberIds: [t]
+      },
+      isCycle: !1,
+      memberIds: [t]
+    });
+  }
+  const l = /* @__PURE__ */ new Map();
+  for (const t of o.edges) {
+    if (!a.has(t.from) || !a.has(t.to) || t.from === t.to) continue;
+    const e = `${t.from}\0${t.to}`, n = l.get(e);
+    n ? n.weight += 1 : l.set(e, { from: t.from, to: t.to, kind: t.kind, weight: 1 });
+  }
+  return { condensed: s, edges: [...l.values()] };
+}
+function G(o, f) {
+  const a = new w.graphlib.Graph({ directed: !0 });
+  for (const e of o.keys()) a.setNode(e);
+  for (const e of f) a.setEdge(e.from, e.to);
+  const g = w.graphlib.alg.tarjan(a), s = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+  for (const e of g) {
+    if (e.length === 1) {
+      const r = e[0];
+      l.set(r, r), s.set(r, {
+        id: r,
+        entity: o.get(r) ?? null,
+        isCycle: !1,
+        memberIds: o.get(r)?.memberIds ?? [r]
+      });
+      continue;
+    }
+    const n = [...e].sort(), h = `cycle:${n[0]}`, c = n.flatMap((r) => o.get(r)?.memberIds ?? [r]);
+    for (const r of n) l.set(r, h);
+    s.set(h, { id: h, entity: null, isCycle: !0, memberIds: c });
+  }
+  const t = /* @__PURE__ */ new Map();
+  for (const e of f) {
+    const n = l.get(e.from), h = l.get(e.to);
+    if (n === h) continue;
+    const c = `${n}\0${h}`, r = t.get(c);
+    r ? r.weight += e.weight : t.set(c, { from: n, to: h, kind: e.kind, weight: e.weight });
+  }
+  return { condensed: s, edges: [...t.values()] };
+}
+function k(o) {
+  if (o.length === 0) return "";
+  if (o.length === 1) return `M ${o[0].x} ${o[0].y}`;
+  let f = `M ${o[0].x} ${o[0].y}`;
+  for (let g = 1; g < o.length - 1; g++) {
+    const s = o[g], l = o[g + 1], t = { x: (s.x + l.x) / 2, y: (s.y + l.y) / 2 };
+    f += ` Q ${s.x} ${s.y}, ${t.x} ${t.y}`;
+  }
+  const a = o[o.length - 1];
+  return f += ` L ${a.x} ${a.y}`, f;
+}
+function E(o, f, a, g = {}) {
+  const s = {
+    nodeWidth: g.nodeWidth ?? u.nodeWidth,
+    nodeHeight: g.nodeHeight ?? u.nodeHeight,
+    siblingGap: g.siblingGap ?? u.siblingGap,
+    levelGap: g.levelGap ?? u.levelGap,
+    orientation: g.orientation ?? u.orientation
+  }, l = s.orientation === "vertical";
+  let t, e;
+  if (typeof a == "object" && a !== null)
+    ({ condensed: t, edges: e } = $(o, a.cycleMemberIds));
+  else {
+    const i = v(o, f, a);
+    ({ condensed: t, edges: e } = G(i.entities, i.edges));
+  }
+  const n = new w.graphlib.Graph({ directed: !0 });
+  if (n.setGraph({
+    // I18N-ALLOW: dagre rankdir option value
+    rankdir: l ? "TB" : "LR",
+    nodesep: s.siblingGap,
+    ranksep: s.levelGap,
+    marginx: 0,
+    marginy: 0
+  }), n.setDefaultEdgeLabel(() => ({})), t.size === 0)
+    return { nodes: [], edges: [], width: 0, height: 0 };
+  for (const i of t.values()) {
+    const d = i.entity?.width ?? s.nodeWidth, p = i.entity?.height ?? s.nodeHeight;
+    n.setNode(i.id, { width: d, height: p });
+  }
+  for (const i of e)
+    n.setEdge(i.from, i.to, { weight: i.weight });
+  w.layout(n);
+  const h = (i) => {
+    const d = n.node(i);
+    if (d.x === void 0 || d.y === void 0)
+      throw new Error(`layoutGraph: dagre did not place node "${i}"`);
+    return { x: d.x, y: d.y, width: d.width, height: d.height };
+  };
+  let c = 1 / 0, r = 1 / 0, m = -1 / 0, y = -1 / 0;
+  for (const i of t.keys()) {
+    const d = h(i);
+    c = Math.min(c, d.x - d.width / 2), r = Math.min(r, d.y - d.height / 2), m = Math.max(m, d.x + d.width / 2), y = Math.max(y, d.y + d.height / 2);
+  }
+  const b = [];
+  for (const i of t.values()) {
+    const d = h(i.id);
+    b.push({
+      id: i.id,
+      node: i.entity?.node ?? null,
+      group: i.entity?.group ?? null,
+      cycle: i.isCycle,
+      memberCount: i.memberIds.length,
+      memberIds: i.memberIds,
+      x: d.x - d.width / 2 - c,
+      y: d.y - d.height / 2 - r,
+      width: d.width,
+      height: d.height
+    });
+  }
+  const x = [];
+  for (const i of e) {
+    const p = (n.edge(i.from, i.to)?.points ?? []).map((I) => ({ x: I.x - c, y: I.y - r }));
+    x.push({ from: i.from, to: i.to, kind: i.kind, weight: i.weight, points: p });
+  }
+  return {
+    nodes: b,
+    edges: x,
+    width: Number.isFinite(m) ? m - c : 0,
+    height: Number.isFinite(y) ? y - r : 0
+  };
+}
+function H(o) {
+  return k(o.points);
+}
+function L(o, f, a) {
+  const g = /* @__PURE__ */ new Map(), s = (e, n) => {
+    g.has(e) || g.set(e, /* @__PURE__ */ new Set()), g.get(e).add(n);
+  };
+  for (const e of f)
+    s(e.from, e.to), s(e.to, e.from);
+  const l = /* @__PURE__ */ new Map([[o, 0]]);
+  let t = [o];
+  for (let e = 1; e <= a; e++) {
+    const n = [];
+    for (const h of t)
+      for (const c of g.get(h) ?? [])
+        l.has(c) || (l.set(c, e), n.push(c));
+    t = n;
+  }
+  return l;
+}
+export {
+  u as LAYOUT_DEFAULTS,
+  H as edgePath,
+  E as layoutGraph,
+  L as neighbourhood
+};
+//# sourceMappingURL=layout.js.map

package/dist/components/node-canvas/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sources":["../../../src/components/node-canvas/layout.ts"],"sourcesContent":["import dagre from \"@dagrejs/dagre\";\nimport type { EdgeLabel, NodeLabel } from \"@dagrejs/dagre\";\nimport type {\n  CanvasGraph,\n  CanvasGroup,\n  CanvasLayout,\n  CanvasNode,\n  CanvasPlacedEdge,\n  CanvasScope,\n  LayoutOptions,\n  PlacedNode,\n} from \"./types\";\n\n/* ============================================================================\n   GRAPH LAYOUT — dagre, ranked, with a condensing pre-pass for cycles. (DX-3344)\n\n   WHY THIS REPLACES A HAND-ROLLED ALGORITHM RATHER THAN SITTING BESIDE IT. The\n   previous version of this file was a from-scratch Reingold–Tilford tidy-tree\n   implementation, argued for at length on the grounds that a tree has exactly\n   one right answer and a dependency's coordinate system is more adapter than\n   algorithm. That argument does not survive the move to a GENERAL graph: a\n   node with two incoming edges, or a cycle, has no Reingold–Tilford answer at\n   all — the algorithm is defined over trees. Keeping the tidy-tree code as a\n   second, tree-only path alongside a new graph path is exactly the \"dual\n   shape\" this repo's own principles forbid: two entry points, two things to\n   keep in sync, and a consumer who cannot tell which one a change reaches.\n   Dagre is the ONE layout engine now, for every graph this component draws,\n   trees included — a tree is simply a graph where every node but one has\n   exactly one incoming edge, and dagre's layered (Sugiyama-style) ranking\n   draws that shape cleanly: one rank per depth, ordered to minimise crossings.\n\n   WHY A CONDENSING PRE-PASS, MEASURED RATHER THAN ASSUMED (DX-3304 comment\n   6752). Dagre already has its own cycle handling — a greedy edge-reversal\n   pass runs before ranking whenever the graph isn't already acyclic — so it\n   does not crash on a cyclic graph. The spike measured what that pass\n   actually produces on a real, densely cyclic import graph (402 nodes, 2,099\n   edges): 9–13 seconds, and a layout that ranks most of the graph onto about\n   two rows, roughly 37,800px wide. Greedy edge reversal treats a cycle as \"one\n   edge is wrong\" and reverses it; on a graph where MANY edges participate in\n   MANY overlapping cycles, that heuristic degrades badly and slowly. Finding\n   every strongly connected component with Tarjan's algorithm and collapsing\n   each one to a SINGLE node before handing the graph to dagre is different in\n   kind, not degree: the condensation of a graph by its strongly connected\n   components is a graph-theoretic guarantee, always a DAG, so dagre never\n   sees a cycle to fight in the first place. The condensed node then reuses the\n   EXACT mechanism this card already needs for domain grouping — a collapsed\n   box standing in for its members, expandable by drilling in — because a\n   cluster of mutually-dependent nodes has no more of a natural rank position\n   than a cycle does. See `NodeCanvas.tsx` for how a \"cycle\" placed node is\n   just a group with an id nobody typed in.\n\n   PURE, AND THAT IS THE POINT — same discipline as the code this replaces.\n   Nothing here touches the DOM, React, or a measurement; every number in and\n   every number out, so layout, condensation and cycle-detection are each\n   testable against their own guarantees rather than a screenshot.\n   ========================================================================= */\n\nexport const LAYOUT_DEFAULTS: Required<LayoutOptions> = {\n  /* A node wide enough for a short title and a line of detail at the library's\n     body size, and a height that clears two lines of it. Consumers with denser\n     content pass their own — per node, if they differ from each other. */\n  nodeWidth: 176,\n  nodeHeight: 76,\n  /* Wide enough that two adjacent boxes read as two things rather than a\n     segmented bar, narrow enough that a fan of six children still fits a\n     laptop viewport without panning. */\n  siblingGap: 28,\n  /* Larger than the sibling gap on purpose: the level gap is where the edges\n     live, and an edge shorter than it is thick reads as a join rather than a\n     link. */\n  levelGap: 64,\n  orientation: \"vertical\",\n};\n\n/* --- scope resolution ------------------------------------------------------\n\n   A canvas never lays out the WHOLE graph at once. It lays out one SCOPE: the\n   top level (every ungrouped node, plus one aggregate box per declared\n   group), or — once a consumer has drilled into a group — that group's own\n   members. This is the same idea the tree version called \"the current root\",\n   generalised from \"one node and the levels below it\" to \"one group and its\n   members\", because groups here are flat (a group cannot itself belong to\n   another group — see `CanvasGroup` in `types.ts`).\n   -------------------------------------------------------------------------- */\n\n/** One thing the layout can draw as a single box: a real node, or a whole group. */\ninterface EffectiveEntity<Extra> {\n  id: string;\n  label: string;\n  width?: number;\n  height?: number;\n  isGroup: boolean;\n  group: CanvasGroup | null;\n  node: CanvasNode<Extra> | null;\n  /** The real graph node ids this entity ultimately stands for. */\n  memberIds: string[];\n}\n\ninterface AggregatedEdge {\n  from: string;\n  to: string;\n  kind?: string;\n  weight: number;\n}\n\nfunction groupEntityId(groupId: string): string {\n  return `group:${groupId}`;\n}\n\n/**\n * The entities and edges visible at one scope.\n *\n * `scopeGroupId === null` is the top level: every node with no `groupId` (or\n * one that names a group not present in `groups`, which is a data error this\n * treats as \"ungrouped\" rather than dropping the node) drawn as itself, plus\n * one aggregate entity per declared group. `scopeGroupId` set to a real\n * group's id descends into it: only that group's own members, as themselves.\n *\n * Edges are re-pointed onto whichever entity each endpoint resolves to,\n * self-loops this produces are dropped (an edge from a group to itself, once\n * both ends collapse onto the same aggregate box, carries no drawable\n * information), and the rest are aggregated by endpoint pair — several raw\n * edges between the same two entities draw as ONE edge with a `weight`.\n */\nfunction resolveScope<Extra>(\n  graph: CanvasGraph<Extra>,\n  groups: readonly CanvasGroup[],\n  scopeGroupId: string | null,\n): { entities: Map<string, EffectiveEntity<Extra>>; edges: AggregatedEdge[] } {\n  const groupById = new Map(groups.map((group) => [group.id, group]));\n  const entities = new Map<string, EffectiveEntity<Extra>>();\n  /** Real node id → the entity id it resolves to at this scope. */\n  const resolution = new Map<string, string>();\n\n  if (scopeGroupId === null) {\n    /* A declared group's entity is created LAZILY, on its first member —\n       never pre-seeded for every id in `groups` regardless of membership.\n       An empty group renders nothing to expand into, so a box for it is\n       clutter, not information; it also keeps this branch honest when a\n       consumer's `groups` list runs ahead of `graph.nodes` (declared before\n       any node opts in, or momentarily orphaned mid-edit). */\n    for (const node of graph.nodes) {\n      const group = node.groupId ? groupById.get(node.groupId) : undefined;\n      if (group) {\n        const groupId = groupEntityId(group.id);\n        let entity = entities.get(groupId);\n        if (!entity) {\n          entity = {\n            id: groupId,\n            label: group.label,\n            width: group.width,\n            height: group.height,\n            isGroup: true,\n            group,\n            node: null,\n            memberIds: [],\n          };\n          entities.set(groupId, entity);\n        }\n        entity.memberIds.push(node.id);\n        resolution.set(node.id, entity.id);\n      } else {\n        entities.set(node.id, {\n          id: node.id,\n          label: node.label,\n          width: node.width,\n          height: node.height,\n          isGroup: false,\n          group: null,\n          node,\n          memberIds: [node.id],\n        });\n        resolution.set(node.id, node.id);\n      }\n    }\n  } else {\n    for (const node of graph.nodes) {\n      if (node.groupId !== scopeGroupId) continue;\n      entities.set(node.id, {\n        id: node.id,\n        label: node.label,\n        width: node.width,\n        height: node.height,\n        isGroup: false,\n        group: null,\n        node,\n        memberIds: [node.id],\n      });\n      resolution.set(node.id, node.id);\n    }\n  }\n\n  const aggregated = new Map<string, AggregatedEdge>();\n  for (const edge of graph.edges) {\n    const from = resolution.get(edge.from);\n    const to = resolution.get(edge.to);\n    /* An edge with an endpoint outside this scope (the other side of a group\n       boundary, or a dangling id) carries nothing to draw here. */\n    if (!from || !to || from === to) continue;\n    const key = `${from}\\u0000${to}`;\n    const existing = aggregated.get(key);\n    if (existing) existing.weight += 1;\n    else aggregated.set(key, { from, to, kind: edge.kind, weight: 1 });\n  }\n\n  return { entities, edges: [...aggregated.values()] };\n}\n\n/* --- cycle condensation ----------------------------------------------------\n\n   Tarjan's algorithm, via the SAME `@dagrejs/graphlib` dagre itself depends\n   on — not reimplemented, since a correct, already-tested implementation is\n   sitting one import away. `alg.tarjan` partitions every node into disjoint\n   strongly-connected components; a component of size 1 is an ordinary node\n   (whether or not it has a self-loop — reachability from ANY OTHER node is\n   what the algorithm asks, and a self-loop alone does not supply one, which\n   is also why self-loops were already dropped in `resolveScope`).\n   -------------------------------------------------------------------------- */\n\ninterface CondensedEntity<Extra> {\n  id: string;\n  entity: EffectiveEntity<Extra> | null;\n  /** Set when this id condenses more than one effective entity — a cycle. */\n  isCycle: boolean;\n  memberIds: string[];\n}\n\n/**\n * The scope for having drilled into a CONDENSED CYCLE (see `CanvasCycleScope`\n * in `types.ts` for why this deliberately bypasses `condenseCycles` rather\n * than calling it on a narrower input): every real graph node named in\n * `memberIds`, drawn as itself, with only the edges strictly between them.\n *\n * Returns the SAME shape `condenseCycles` does — one map of already-resolved\n * \"condensed\" entities plus an edge list — so `layoutGraph`'s dagre-building\n * code below is identical regardless of which path produced it.\n */\nfunction resolveCycleScope<Extra>(\n  graph: CanvasGraph<Extra>,\n  memberIds: readonly string[],\n): { condensed: Map<string, CondensedEntity<Extra>>; edges: AggregatedEdge[] } {\n  const members = new Set(memberIds);\n  const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));\n\n  const condensed = new Map<string, CondensedEntity<Extra>>();\n  for (const id of members) {\n    const node = nodeById.get(id);\n    /* A member id the caller captured off a PREVIOUS render's layout, for a\n       `graph` that has since dropped that node — treated the same way a\n       dangling `groupId` is in `resolveScope`: skipped, not thrown over. The\n       component itself resets this scope on any `graph` identity change, so\n       this only matters for a caller driving `layoutGraph` directly. */\n    if (!node) continue;\n    condensed.set(id, {\n      id,\n      entity: {\n        id,\n        label: node.label,\n        width: node.width,\n        height: node.height,\n        isGroup: false,\n        group: null,\n        node,\n        memberIds: [id],\n      },\n      isCycle: false,\n      memberIds: [id],\n    });\n  }\n\n  const aggregated = new Map<string, AggregatedEdge>();\n  for (const edge of graph.edges) {\n    if (!members.has(edge.from) || !members.has(edge.to) || edge.from === edge.to) continue;\n    const key = `${edge.from}\\u0000${edge.to}`;\n    const existing = aggregated.get(key);\n    if (existing) existing.weight += 1;\n    else aggregated.set(key, { from: edge.from, to: edge.to, kind: edge.kind, weight: 1 });\n  }\n\n  return { condensed, edges: [...aggregated.values()] };\n}\n\nfunction condenseCycles<Extra>(\n  entities: Map<string, EffectiveEntity<Extra>>,\n  edges: AggregatedEdge[],\n): { condensed: Map<string, CondensedEntity<Extra>>; edges: AggregatedEdge[] } {\n  const g = new dagre.graphlib.Graph({ directed: true });\n  for (const id of entities.keys()) g.setNode(id);\n  for (const edge of edges) g.setEdge(edge.from, edge.to);\n\n  const components = dagre.graphlib.alg.tarjan(g);\n\n  const condensed = new Map<string, CondensedEntity<Extra>>();\n  /** Effective entity id → the condensed id it resolves to. */\n  const resolution = new Map<string, string>();\n\n  for (const component of components) {\n    if (component.length === 1) {\n      const id = component[0]!;\n      resolution.set(id, id);\n      condensed.set(id, {\n        id,\n        entity: entities.get(id) ?? null,\n        isCycle: false,\n        memberIds: entities.get(id)?.memberIds ?? [id],\n      });\n      continue;\n    }\n    /* The smallest member id, deterministically — Tarjan's components are a\n       PARTITION, so this id belongs to exactly one component and the\n       condensed id it produces cannot collide with any other component's. */\n    const sorted = [...component].sort();\n    const id = `cycle:${sorted[0]}`;\n    const memberIds = sorted.flatMap((memberId) => entities.get(memberId)?.memberIds ?? [memberId]);\n    for (const memberId of sorted) resolution.set(memberId, id);\n    condensed.set(id, { id, entity: null, isCycle: true, memberIds });\n  }\n\n  const aggregated = new Map<string, AggregatedEdge>();\n  for (const edge of edges) {\n    const from = resolution.get(edge.from)!;\n    const to = resolution.get(edge.to)!;\n    if (from === to) continue;\n    const key = `${from}\\u0000${to}`;\n    const existing = aggregated.get(key);\n    if (existing) existing.weight += edge.weight;\n    else aggregated.set(key, { from, to, kind: edge.kind, weight: edge.weight });\n  }\n\n  return { condensed, edges: [...aggregated.values()] };\n}\n\n/* --- dagre layout ----------------------------------------------------------\n\n   The condensed graph is guaranteed acyclic, so dagre ranks and positions it\n   with no cycle-breaking heuristic ever running. `rankdir` carries the\n   orientation; `nodesep`/`ranksep` are this library's `siblingGap`/`levelGap`\n   under dagre's own names.\n   -------------------------------------------------------------------------- */\n\n/**\n * A smooth path through dagre's own routed waypoints.\n *\n * dagre already avoids overlapping nodes when it lays out an edge with more\n * than two points, so the right thing to do with those points is draw\n * through them — not discard them for a straight line between the two boxes,\n * which is the ONE case (two waypoints, a rank-adjacent edge) this reduces to\n * exactly a straight line anyway. Interior points get a quadratic curve to\n * their own midpoint, the standard smoothed-polyline construction: it rounds\n * every corner without needing the tangent information a true spline would.\n */\nfunction smoothPath(points: readonly { x: number; y: number }[]): string {\n  if (points.length === 0) return \"\";\n  if (points.length === 1) return `M ${points[0]!.x} ${points[0]!.y}`;\n  let d = `M ${points[0]!.x} ${points[0]!.y}`;\n  for (let i = 1; i < points.length - 1; i++) {\n    const p = points[i]!;\n    const next = points[i + 1]!;\n    const mid = { x: (p.x + next.x) / 2, y: (p.y + next.y) / 2 };\n    d += ` Q ${p.x} ${p.y}, ${mid.x} ${mid.y}`;\n  }\n  const last = points[points.length - 1]!;\n  d += ` L ${last.x} ${last.y}`;\n  return d;\n}\n\n/**\n * Lay out one scope of a graph.\n *\n * `scope` is `null` for the top level, a `CanvasGroup.id` to draw that\n * group's own members, or a `CanvasCycleScope` to draw a condensed cycle's\n * own members (see that type's doc for why it is not just \"another group\n * id\" — it skips this function's own condensing pre-pass on purpose).\n * Coordinates are plane-local and start at 0 on both axes: the caller\n * decides where the plane sits and how much padding surrounds it.\n */\nexport function layoutGraph<Extra>(\n  graph: CanvasGraph<Extra>,\n  groups: readonly CanvasGroup[],\n  scope: CanvasScope,\n  options: LayoutOptions = {},\n): CanvasLayout<Extra> {\n  /* PER KEY, NOT A SPREAD — see `AutoScrollOptions` for why a key that is\n     PRESENT AND UNDEFINED must not overwrite its default. */\n  const opts: Required<LayoutOptions> = {\n    nodeWidth: options.nodeWidth ?? LAYOUT_DEFAULTS.nodeWidth,\n    nodeHeight: options.nodeHeight ?? LAYOUT_DEFAULTS.nodeHeight,\n    siblingGap: options.siblingGap ?? LAYOUT_DEFAULTS.siblingGap,\n    levelGap: options.levelGap ?? LAYOUT_DEFAULTS.levelGap,\n    orientation: options.orientation ?? LAYOUT_DEFAULTS.orientation,\n  };\n  const vertical = opts.orientation === \"vertical\";\n\n  let condensed: Map<string, CondensedEntity<Extra>>;\n  let edges: AggregatedEdge[];\n  if (typeof scope === \"object\" && scope !== null) {\n    ({ condensed, edges } = resolveCycleScope(graph, scope.cycleMemberIds));\n  } else {\n    const resolved = resolveScope(graph, groups, scope);\n    ({ condensed, edges } = condenseCycles(resolved.entities, resolved.edges));\n  }\n\n  const g = new dagre.graphlib.Graph<Record<string, unknown>, NodeLabel, EdgeLabel>({ directed: true });\n  g.setGraph({\n    // I18N-ALLOW: dagre rankdir option value\n    rankdir: vertical ? \"TB\" : \"LR\",\n    nodesep: opts.siblingGap,\n    ranksep: opts.levelGap,\n    marginx: 0,\n    marginy: 0,\n  });\n  g.setDefaultEdgeLabel(() => ({}));\n\n  if (condensed.size === 0) {\n    return { nodes: [], edges: [], width: 0, height: 0 };\n  }\n\n  for (const item of condensed.values()) {\n    const width = item.entity?.width ?? opts.nodeWidth;\n    const height = item.entity?.height ?? opts.nodeHeight;\n    g.setNode(item.id, { width, height });\n  }\n  for (const edge of edges) {\n    g.setEdge(edge.from, edge.to, { weight: edge.weight });\n  }\n\n  dagre.layout(g);\n\n  /* `NodeLabel.x`/`.y` are typed optional because the SAME interface also\n     describes a node BEFORE layout runs; every node this function added to\n     `g` gets both set by `dagre.layout` unconditionally, so a value missing\n     here is dagre's own contract broken, not a case to degrade past. */\n  const center = (id: string): { x: number; y: number; width: number; height: number } => {\n    const box = g.node(id)!;\n    if (box.x === undefined || box.y === undefined) {\n      throw new Error(`layoutGraph: dagre did not place node \"${id}\"`);\n    }\n    return { x: box.x, y: box.y, width: box.width, height: box.height };\n  };\n\n  let minX = Infinity;\n  let minY = Infinity;\n  let maxX = -Infinity;\n  let maxY = -Infinity;\n  for (const id of condensed.keys()) {\n    const box = center(id);\n    minX = Math.min(minX, box.x - box.width / 2);\n    minY = Math.min(minY, box.y - box.height / 2);\n    maxX = Math.max(maxX, box.x + box.width / 2);\n    maxY = Math.max(maxY, box.y + box.height / 2);\n  }\n\n  const nodes: PlacedNode<Extra>[] = [];\n  for (const item of condensed.values()) {\n    const box = center(item.id);\n    nodes.push({\n      id: item.id,\n      node: item.entity?.node ?? null,\n      group: item.entity?.group ?? null,\n      cycle: item.isCycle,\n      memberCount: item.memberIds.length,\n      memberIds: item.memberIds,\n      x: box.x - box.width / 2 - minX,\n      y: box.y - box.height / 2 - minY,\n      width: box.width,\n      height: box.height,\n    });\n  }\n\n  const placedEdges: CanvasPlacedEdge[] = [];\n  for (const edge of edges) {\n    const label = g.edge(edge.from, edge.to);\n    const points = (label?.points ?? []).map((p) => ({ x: p.x - minX, y: p.y - minY }));\n    placedEdges.push({ from: edge.from, to: edge.to, kind: edge.kind, weight: edge.weight, points });\n  }\n\n  return {\n    nodes,\n    edges: placedEdges,\n    width: Number.isFinite(maxX) ? maxX - minX : 0,\n    height: Number.isFinite(maxY) ? maxY - minY : 0,\n  };\n}\n\n/** The SVG `d` attribute for one drawn edge. See `smoothPath` above. */\nexport function edgePath(edge: CanvasPlacedEdge): string {\n  return smoothPath(edge.points);\n}\n\n/**\n * Every real node id reachable from `id` within `hops` steps, along either\n * edge direction — the \"1–2-hop neighbourhood\" `NodeRenderContext.focusDistance`\n * reports. Undirected on purpose: a node's neighbourhood, for the purpose of\n * \"what should stay legible while I'm reading this one\", is what points at it\n * as much as what it points at.\n *\n * Keyed by the drawn (possibly condensed) ids, not raw graph node ids — the\n * canvas calls this with whatever `CanvasPlacedEdge` already uses.\n */\nexport function neighbourhood(\n  id: string,\n  edges: readonly { from: string; to: string }[],\n  hops: number,\n): Map<string, number> {\n  const adjacency = new Map<string, Set<string>>();\n  const link = (a: string, b: string) => {\n    if (!adjacency.has(a)) adjacency.set(a, new Set());\n    adjacency.get(a)!.add(b);\n  };\n  for (const edge of edges) {\n    link(edge.from, edge.to);\n    link(edge.to, edge.from);\n  }\n\n  const distance = new Map<string, number>([[id, 0]]);\n  let frontier = [id];\n  for (let step = 1; step <= hops; step++) {\n    const next: string[] = [];\n    for (const current of frontier) {\n      for (const neighbour of adjacency.get(current) ?? []) {\n        if (distance.has(neighbour)) continue;\n        distance.set(neighbour, step);\n        next.push(neighbour);\n      }\n    }\n    frontier = next;\n  }\n  return distance;\n}\n"],"names":["LAYOUT_DEFAULTS","groupEntityId","groupId","resolveScope","graph","groups","scopeGroupId","groupById","group","entities","resolution","node","entity","aggregated","edge","from","to","key","existing","resolveCycleScope","memberIds","members","nodeById","condensed","id","condenseCycles","edges","g","dagre","components","component","sorted","memberId","smoothPath","points","d","i","p","next","mid","last","layoutGraph","scope","options","opts","vertical","resolved","item","width","height","center","box","minX","minY","maxX","maxY","nodes","placedEdges","edgePath","neighbourhood","hops","adjacency","link","a","b","distance","frontier","step","current","neighbour"],"mappings":"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"}

package/dist/components/node-canvas/use-canvas-gestures.js

@@ -0,0 +1,143 @@
+import { useState as L, useRef as w, useCallback as a, useEffect as k } from "react";
+import { attachPointerGesture as O } from "../../lib/dnd/sensors/gesture.js";
+import { attachEdgeAutoScroll as V } from "../../lib/dnd/autoscroll.js";
+import { isInteractiveTarget as j } from "../../lib/interactive-target.js";
+const T = (v, d, g) => Math.min(Math.max(v, d), g);
+function Q(v) {
+  const { layoutBoxOf: d, planeSize: g, onNodeClick: C, onNodeDragEnd: D, disabled: M } = v, [y, p] = L({}), [l, N] = L(null), [h, E] = L(!1), c = w({ layoutBoxOf: d, planeSize: g, onNodeClick: C, onNodeDragEnd: D, disabled: M, offsets: y });
+  c.current = { layoutBoxOf: d, planeSize: g, onNodeClick: C, onNodeDragEnd: D, disabled: M, offsets: y };
+  const b = w(null), s = w({ frame: null, drag: null, pan: null, point: null }), u = a(() => {
+    const e = b.current;
+    if (!e) return;
+    const r = e.getBoundingClientRect();
+    s.current.frame = { left: r.left, top: r.top };
+  }, []), x = a((e) => {
+    const r = b.current, t = s.current.frame;
+    return !r || !t ? null : {
+      x: e.x - t.left + r.scrollLeft,
+      y: e.y - t.top + r.scrollTop
+    };
+  }, []), m = a(
+    (e) => {
+      const r = s.current.drag;
+      if (!r) return;
+      const t = x(e), n = c.current.layoutBoxOf(r.id);
+      if (!t || !n) return;
+      const { width: o, height: i } = c.current.planeSize, _ = T(t.x - r.grab.x, 0, Math.max(0, o - n.width)), G = T(t.y - r.grab.y, 0, Math.max(0, i - n.height)), S = { x: _ - n.x, y: G - n.y };
+      r.latest = S, p((K) => ({ ...K, [r.id]: S }));
+    },
+    [x]
+  ), f = a(() => {
+    s.current.drag = null, s.current.point = null, N(null);
+  }, []);
+  k(() => {
+    if (!l) return;
+    const e = (r) => {
+      if (r.key !== "Escape") return;
+      const t = s.current.drag;
+      t && (r.preventDefault(), p((n) => {
+        const o = { ...n };
+        return t.restore ? o[t.id] = t.restore : delete o[t.id], o;
+      }), f());
+    };
+    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+  }, [l, f]), k(() => {
+    if (!l && !h) return;
+    const e = () => u();
+    return window.addEventListener("scroll", e, { capture: !0, passive: !0 }), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e, { capture: !0 }), window.removeEventListener("resize", e);
+    };
+  }, [l, h, u]), k(() => {
+    if (l)
+      return V({
+        getPoint: () => s.current.point,
+        onScrolled: (e) => m(e)
+      });
+  }, [l, m]);
+  function z(e) {
+    const r = (t) => {
+      t.stopPropagation(), t.preventDefault();
+    };
+    e.addEventListener("click", r, { capture: !0, once: !0 }), setTimeout(() => e.removeEventListener("click", r, { capture: !0 }), 0);
+  }
+  const P = w(/* @__PURE__ */ new Map()), B = a(
+    (e) => (r) => {
+      if (r)
+        return O(r, {
+          onPress: (t, n) => {
+            if (c.current.disabled) return !1;
+            const o = n.target;
+            return !j(o);
+          },
+          onActivate: (t) => {
+            u(), s.current.point = t;
+            const n = x(t), o = c.current.layoutBoxOf(e);
+            if (!n || !o) return;
+            const i = c.current.offsets[e] ?? null;
+            s.current.drag = {
+              id: e,
+              /* Where inside the node it was grabbed, so it tracks the point that
+                 was picked up rather than snapping a corner to the cursor. */
+              grab: {
+                x: n.x - (o.x + (i?.x ?? 0)),
+                y: n.y - (o.y + (i?.y ?? 0))
+              },
+              restore: i,
+              latest: i
+            }, N(e);
+          },
+          onMove: (t) => {
+            s.current.point = t, m(t);
+          },
+          onRelease: (t, n) => {
+            const o = s.current.drag;
+            if (f(), !n) {
+              c.current.disabled || c.current.onNodeClick(e);
+              return;
+            }
+            z(r), o?.latest && c.current.onNodeDragEnd?.({ id: e, offset: o.latest });
+          },
+          onCancel: () => {
+            const t = s.current.drag;
+            t && p((n) => {
+              const o = { ...n };
+              return t.restore ? o[t.id] = t.restore : delete o[t.id], o;
+            }), f();
+          }
+        });
+    },
+    [m, f, u, x]
+  ), R = a(
+    (e) => {
+      let r = P.current.get(e);
+      return r || (r = B(e), P.current.set(e, r)), r;
+    },
+    [B]
+  ), A = a(
+    (e) => (b.current = e, e ? O(e, {
+      onPress: (t, n) => c.current.disabled ? !1 : !n.target?.closest("[data-canvas-node]"),
+      onActivate: (t) => {
+        u(), s.current.pan = {
+          origin: t,
+          scroll: { left: e.scrollLeft, top: e.scrollTop }
+        }, E(!0);
+      },
+      onMove: (t) => {
+        const n = s.current.pan;
+        n && (e.scrollLeft = n.scroll.left - (t.x - n.origin.x), e.scrollTop = n.scroll.top - (t.y - n.origin.y));
+      },
+      onRelease: () => {
+        s.current.pan = null, E(!1);
+      },
+      onCancel: () => {
+        s.current.pan = null, E(!1);
+      }
+    }) : void 0),
+    [u]
+  ), I = a(() => p({}), []);
+  return { offsets: y, draggingId: l, panning: h, bindViewport: A, bindNode: R, clearOffsets: I };
+}
+export {
+  Q as useCanvasGestures
+};
+//# sourceMappingURL=use-canvas-gestures.js.map

package/dist/components/node-canvas/use-canvas-gestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-canvas-gestures.js","sources":["../../../src/components/node-canvas/use-canvas-gestures.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { attachPointerGesture } from \"@/lib/dnd/sensors/gesture\";\nimport { attachEdgeAutoScroll } from \"@/lib/dnd/autoscroll\";\nimport type { Point } from \"@/lib/dnd/types\";\nimport { isInteractiveTarget } from \"@/lib/interactive-target\";\n\n/* ============================================================================\n   THE TWO GESTURES A CANVAS HAS, BOTH OVER THE EXISTING INPUT LAYER.\n\n   NOTHING HERE IMPLEMENTS POINTER HANDLING. `attachPointerGesture` already\n   owns pointer capture, the activation constraint (mouse travels, touch\n   dwells) and the touch-scroll guard — the part of a drag that was expensive\n   to get right and whose failures only appear on a device nobody was testing\n   on. This file is the same adapter the calendar is: two target models over\n   one input layer. See `lib/dnd/sensors/gesture.ts` for why that split exists.\n\n   WHAT IS **NOT** REUSED, AND WHY. `DragSession` / `resolveTarget` /\n   `attachPointerSensor` / `attachAutoScroll` are the LIST target model: a drop\n   is `{container, index}` resolved from sibling midpoints, and the whole module\n   is built around the invariant that `index` counts the container's items with\n   the dragged one already removed. A canvas node does not land BETWEEN two\n   other nodes — it lands at a POSITION — so there is no index to resolve, no\n   container to be in, and no midpoint rule to run. Driving a `DragSession` here\n   would mean inventing a fake single container and ignoring every answer it\n   gave. `attachEdgeAutoScroll` IS reused directly: the barrel's `attachAutoScroll`\n   is the session-shaped adapter over it, and the driver-shaped function beneath\n   is exported for exactly this case (the calendar takes the same door).\n\n   PANNING IS SCROLLING, DELIBERATELY. The obvious canvas pans by writing a\n   transform on the content plane. This one is a real scroll container whose\n   plane is real scrolled content, which buys four things a transform does not:\n   the wheel and trackpad pan it with no code, a touch swipe pans it natively\n   (so the touch dwell stays free to mean \"pick this node up\" rather than\n   competing with the pan), scrollbars tell you how much canvas there is, and\n   the edge auto-scroll loop above works unmodified because it scrolls\n   scrollers. The cost is that the plane has a finite extent, which is why node\n   positions are clamped to it.\n   ========================================================================= */\n\n/** Plane-local box of a node, as the layout placed it. */\nexport interface NodeBox {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface CanvasGestureOptions {\n  /** Where a node sits before any drag offset. Null for an id not on screen. */\n  layoutBoxOf: (id: string) => NodeBox | null;\n  /** Extent of the scrolled plane. Node positions are clamped inside it. */\n  planeSize: { width: number; height: number };\n  /** A press that released without activating — the click that descends. */\n  onNodeClick: (id: string) => void;\n  /** A drag that committed. Offsets stay owned here either way. */\n  onNodeDragEnd?: (event: { id: string; offset: Point }) => void;\n  disabled?: boolean;\n}\n\nexport interface CanvasGestures {\n  /** Drag offsets from the layout position, by node id. */\n  offsets: Readonly<Record<string, Point>>;\n  /** The node a pointer is currently carrying, or null. */\n  draggingId: string | null;\n  panning: boolean;\n  /** Ref callback for the scroll viewport. Stable — see the note at its use. */\n  bindViewport: (node: HTMLDivElement | null) => void;\n  /** Ref callback for one node's element. Stable per id. */\n  bindNode: (id: string) => (node: HTMLElement | null) => void;\n  /** Drop every offset — called when the layout underneath them changes. */\n  clearOffsets: () => void;\n}\n\nconst clamp = (value: number, min: number, max: number): number =>\n  Math.min(Math.max(value, min), max);\n\nexport function useCanvasGestures(options: CanvasGestureOptions): CanvasGestures {\n  const { layoutBoxOf, planeSize, onNodeClick, onNodeDragEnd, disabled } = options;\n\n  const [offsets, setOffsets] = useState<Record<string, Point>>({});\n  const [draggingId, setDraggingId] = useState<string | null>(null);\n  const [panning, setPanning] = useState(false);\n\n  /* Live values every gesture callback reads. A gesture outlives several\n     renders, so closing over props directly leaves it acting on whatever\n     existed at pointer-down — the calendar's note, and the same fix. */\n  const live = useRef({ layoutBoxOf, planeSize, onNodeClick, onNodeDragEnd, disabled, offsets });\n  live.current = { layoutBoxOf, planeSize, onNodeClick, onNodeDragEnd, disabled, offsets };\n\n  const viewport = useRef<HTMLDivElement | null>(null);\n\n  const session = useRef<{\n    /** Client-space box of the viewport. Snapshot; invalidated by scroll/resize. */\n    frame: { left: number; top: number } | null;\n    drag: { id: string; grab: Point; restore: Point | null; latest: Point | null } | null;\n    pan: { origin: Point; scroll: { left: number; top: number } } | null;\n    /** Live client point, for the auto-scroll driver. */\n    point: Point | null;\n  }>({ frame: null, drag: null, pan: null, point: null });\n\n  /**\n   * The viewport's own position on screen.\n   *\n   * MEASURED, THEN INVALIDATED — never per move. `getBoundingClientRect`\n   * forces layout, and a drag reads it on every frame of the one gesture that\n   * must not drop one. The viewport's box only moves when the PAGE scrolls or\n   * the window resizes; its own scrolling does not move it, which is what makes\n   * a snapshot safe here at all.\n   */\n  const remeasure = useCallback(() => {\n    const el = viewport.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    session.current.frame = { left: rect.left, top: rect.top };\n  }, []);\n\n  /** Client point → plane coordinates. The plane IS the scrolled content. */\n  const toPlane = useCallback((point: Point): Point | null => {\n    const el = viewport.current;\n    const frame = session.current.frame;\n    if (!el || !frame) return null;\n    return {\n      x: point.x - frame.left + el.scrollLeft,\n      y: point.y - frame.top + el.scrollTop,\n    };\n  }, []);\n\n  /** Compute and store the offset the current drag implies for `point`. */\n  const applyDrag = useCallback(\n    (point: Point) => {\n      const drag = session.current.drag;\n      if (!drag) return;\n      const plane = toPlane(point);\n      const box = live.current.layoutBoxOf(drag.id);\n      if (!plane || !box) return;\n\n      /* CLAMPED TO THE PLANE, not to the viewport. A node dragged past the\n         edge of the canvas would otherwise sit at a coordinate the scroll\n         container cannot reach, so it would be permanently invisible with no\n         way back — and the edge auto-scroll that carried it there would have\n         nothing left to scroll toward. */\n      const { width, height } = live.current.planeSize;\n      const x = clamp(plane.x - drag.grab.x, 0, Math.max(0, width - box.width));\n      const y = clamp(plane.y - drag.grab.y, 0, Math.max(0, height - box.height));\n\n      /* Recorded on the session as well as in state. `onRelease` needs the\n         offset the LAST move computed, and reading it back out of React state\n         races the final `setOffsets` — a drop that landed a frame ahead of the\n         re-render would report the second-to-last position. */\n      const next = { x: x - box.x, y: y - box.y };\n      drag.latest = next;\n      setOffsets((current) => ({ ...current, [drag.id]: next }));\n    },\n    [toPlane],\n  );\n\n  const endDrag = useCallback(() => {\n    session.current.drag = null;\n    session.current.point = null;\n    setDraggingId(null);\n  }, []);\n\n  /* ESCAPE ABANDONS THE DRAG, and restores the offset the node had when it was\n     picked up rather than dropping it to the layout position — a node the user\n     had already placed by hand must not jump home because they cancelled a\n     SECOND move of it. Window-level: the node has pointer capture, not focus,\n     so a keypress never reaches it. */\n  useEffect(() => {\n    if (!draggingId) return;\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      const drag = session.current.drag;\n      if (!drag) return;\n      event.preventDefault();\n      setOffsets((current) => {\n        const next = { ...current };\n        if (drag.restore) next[drag.id] = drag.restore;\n        else delete next[drag.id];\n        return next;\n      });\n      endDrag();\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [draggingId, endDrag]);\n\n  /* The snapshot's two invalidators, exactly as `attachSessionWindowListeners`\n     names them. Capture phase, because a scroll inside an ancestor does not\n     bubble to the window. */\n  useEffect(() => {\n    if (!draggingId && !panning) return;\n    const onShift = () => remeasure();\n    window.addEventListener(\"scroll\", onShift, { capture: true, passive: true });\n    window.addEventListener(\"resize\", onShift);\n    return () => {\n      window.removeEventListener(\"scroll\", onShift, { capture: true });\n      window.removeEventListener(\"resize\", onShift);\n    };\n  }, [draggingId, panning, remeasure]);\n\n  /* EDGE AUTO-SCROLL, for the lifetime of a node drag only. `onScrolled`\n     re-runs the MOVE with the unchanged point rather than merely remeasuring:\n     the pointer has not moved and the content has, so nothing recomputes where\n     the node should be unless the same point is fed back through. That is the\n     whole reason `AutoScrollDriver` has a second method. */\n  useEffect(() => {\n    if (!draggingId) return;\n    return attachEdgeAutoScroll({\n      getPoint: () => session.current.point,\n      onScrolled: (point) => applyDrag(point),\n    });\n  }, [draggingId, applyDrag]);\n\n  /**\n   * Swallow the click the browser fires after a completed drag.\n   *\n   * The browser dispatches `click` after `pointerup` no matter how far the\n   * pointer travelled, so without this every finished drag ALSO descends into\n   * the node it just moved. Capture phase and removed on the next tick: the\n   * click arrives synchronously after `pointerup`, and a listener that outlived\n   * the tick would eat the user's next real click.\n   */\n  function swallowNextClick(node: HTMLElement): void {\n    const swallow = (event: Event) => {\n      event.stopPropagation();\n      event.preventDefault();\n    };\n    node.addEventListener(\"click\", swallow, { capture: true, once: true });\n    setTimeout(() => node.removeEventListener(\"click\", swallow, { capture: true }), 0);\n  }\n\n  /* --- node drag ---------------------------------------------------------- */\n\n  const nodeBindings = useRef(new Map<string, (node: HTMLElement | null) => void>());\n\n  const makeNodeBinding = useCallback(\n    (id: string) => (node: HTMLElement | null) => {\n      if (!node) return;\n      return attachPointerGesture(node, {\n        onPress: (_point, event) => {\n          if (live.current.disabled) return false;\n          /* A press that landed on the consumer's own control belongs to that\n             control. Without this a button inside a node body could never be\n             clicked: the gesture would take pointer capture and the button\n             would never see the release. */\n          const target = event.target as HTMLElement | null;\n          if (isInteractiveTarget(target)) {\n            return false;\n          }\n          return true;\n        },\n        onActivate: (point) => {\n          remeasure();\n          session.current.point = point;\n          const plane = toPlane(point);\n          const box = live.current.layoutBoxOf(id);\n          if (!plane || !box) return;\n          const offset = live.current.offsets[id] ?? null;\n          session.current.drag = {\n            id,\n            /* Where inside the node it was grabbed, so it tracks the point that\n               was picked up rather than snapping a corner to the cursor. */\n            grab: {\n              x: plane.x - (box.x + (offset?.x ?? 0)),\n              y: plane.y - (box.y + (offset?.y ?? 0)),\n            },\n            restore: offset,\n            latest: offset,\n          };\n          setDraggingId(id);\n        },\n        onMove: (point) => {\n          session.current.point = point;\n          applyDrag(point);\n        },\n        onRelease: (_point, activated) => {\n          const drag = session.current.drag;\n          endDrag();\n          if (!activated) {\n            /* A press and release with no travel is a CLICK, and a click\n               descends. The activation constraint is what keeps the two apart —\n               it is also why a click cannot be handled with `onClick` on the\n               node: the gesture has pointer capture by then. */\n            if (!live.current.disabled) live.current.onNodeClick(id);\n            return;\n          }\n          swallowNextClick(node);\n          if (drag?.latest) live.current.onNodeDragEnd?.({ id, offset: drag.latest });\n        },\n        onCancel: () => {\n          const drag = session.current.drag;\n          if (drag) {\n            setOffsets((current) => {\n              const next = { ...current };\n              if (drag.restore) next[drag.id] = drag.restore;\n              else delete next[drag.id];\n              return next;\n            });\n          }\n          endDrag();\n        },\n      }) as unknown as void;\n    },\n    [applyDrag, endDrag, remeasure, toPlane],\n  );\n\n  /**\n   * Ref callbacks cached by id.\n   *\n   * THE IDENTITY HAS TO BE STABLE, and this is not an optimisation — without\n   * it the feature does not work at all. React tears down a ref whose function\n   * identity changed and attaches the new one; the first thing a drag does is\n   * set state, that re-renders, the re-render would hand React a fresh\n   * callback, and the teardown releases pointer capture. The drag would kill\n   * itself at the moment it started. The calendar learned this with a browser\n   * probe reporting \"moved 0px while still held\".\n   */\n  const bindNode = useCallback(\n    (id: string) => {\n      let cached = nodeBindings.current.get(id);\n      if (!cached) {\n        cached = makeNodeBinding(id);\n        nodeBindings.current.set(id, cached);\n      }\n      return cached;\n    },\n    [makeNodeBinding],\n  );\n\n  /* --- pan ---------------------------------------------------------------- */\n\n  /* Stable by construction — `remeasure` is the only dependency and it has an\n     empty one of its own. Same requirement as the node bindings below it: a\n     viewport ref that re-attached on every render would drop the pan gesture\n     the first time a pan set state. */\n  const bindViewport = useCallback(\n    (node: HTMLDivElement | null) => {\n      viewport.current = node;\n      if (!node) return;\n      const detach = attachPointerGesture(node, {\n        onPress: (_point, event) => {\n          if (live.current.disabled) return false;\n          /* A press that started on a node is that node's drag, not a pan.\n             Both gestures see this `pointerdown` — the node's listener is on\n             the node, this one is on the ancestor it bubbles to — and the\n             second `setPointerCapture` would take the gesture away from the\n             first. Refusing here is what keeps them from fighting. */\n          const target = event.target as HTMLElement | null;\n          return !target?.closest(\"[data-canvas-node]\");\n        },\n        onActivate: (point) => {\n          remeasure();\n          session.current.pan = {\n            origin: point,\n            scroll: { left: node.scrollLeft, top: node.scrollTop },\n          };\n          setPanning(true);\n        },\n        onMove: (point) => {\n          const pan = session.current.pan;\n          if (!pan) return;\n          /* Content follows the hand: dragging right reveals what is to the\n             LEFT, so the scroll offset moves against the pointer. */\n          node.scrollLeft = pan.scroll.left - (point.x - pan.origin.x);\n          node.scrollTop = pan.scroll.top - (point.y - pan.origin.y);\n        },\n        onRelease: () => {\n          session.current.pan = null;\n          setPanning(false);\n        },\n        onCancel: () => {\n          session.current.pan = null;\n          setPanning(false);\n        },\n      });\n      return detach as unknown as void;\n    },\n    [remeasure],\n  );\n\n  /* The per-id binding cache is deliberately NOT cleared alongside these. Its\n     entries are keyed on a node id and are correct for that id forever, and\n     dropping them would hand React a fresh callback for every node that\n     survived the re-root — which is a teardown and re-attach of a live pointer\n     gesture, for nothing. */\n  const clearOffsets = useCallback(() => setOffsets({}), []);\n\n  return { offsets, draggingId, panning, bindViewport, bindNode, clearOffsets };\n}\n"],"names":["clamp","value","min","max","useCanvasGestures","options","layoutBoxOf","planeSize","onNodeClick","onNodeDragEnd","disabled","offsets","setOffsets","useState","draggingId","setDraggingId","panning","setPanning","live","useRef","viewport","session","remeasure","useCallback","el","rect","toPlane","point","frame","applyDrag","drag","plane","box","width","height","x","y","next","current","endDrag","useEffect","onKey","event","onShift","attachEdgeAutoScroll","swallowNextClick","node","swallow","nodeBindings","makeNodeBinding","id","attachPointerGesture","_point","target","isInteractiveTarget","offset","activated","bindNode","cached","bindViewport","pan","clearOffsets"],"mappings":"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"}