@transitrix/diagrams 1.4.0 → 1.6.0

package/src/goals/GoalTreeView.tsx

@@ -0,0 +1,350 @@
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import ReactFlow, {
+  Controls,
+  MiniMap,
+  Background,
+  ConnectionLineType,
+  useNodesState,
+  useEdgesState,
+  type Node,
+  type Edge,
+  type NodeMouseHandler,
+  type NodeDragHandler,
+} from 'reactflow';
+import 'reactflow/dist/style.css';
+import type { Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
+import { layoutGoalTree } from './layout.js';
+import { reparent, addChild, deleteWithDescendants, moveToBacklog, restoreFromBacklog } from './mutations.js';
+import type { ThemeTokens } from './theme.js';
+import { resolveTheme } from './theme.js';
+import GoalNode, { type GoalNodeData } from './GoalNode.js';
+
+export type { ThemeTokens } from './theme.js';
+
+export interface GoalTreeViewProps {
+  tree: GoalTree;
+  layout?: GoalTreeLayout;
+  layoutOptions?: LayoutOptions;
+  theme?: ThemeTokens;
+  readOnly?: boolean;
+  showBacklog?: boolean;
+  showMiniMap?: boolean;
+  onChange?: (event: GoalTreeChange) => void;
+  onEditRequest?: (goal: Goal) => void;
+}
+
+export type GoalTreeChange =
+  | { kind: 'reparent'; sourceId: number; targetId: number; result: GoalTree }
+  | { kind: 'addChild'; parentId: number; newGoal: Goal; result: GoalTree }
+  | { kind: 'delete'; id: number; result: GoalTree }
+  | { kind: 'moveToBacklog'; id: number; result: GoalTree }
+  | { kind: 'restoreFromBacklog'; id: number; newParentId: number; result: GoalTree };
+
+const BACKLOG_DRAG_MIME = 'application/x-transitrix-goal-id';
+const nodeTypes = { goalNode: GoalNode };
+
+/** Where a card was dropped, as classified from the pointer position at drag-stop. */
+export type DropTarget = { kind: 'node'; id: number } | { kind: 'backlog' } | null;
+
+/**
+ * Pure decision: given where a dragged card was dropped, compute the mutation
+ * and the GoalTreeChange to report (or null for a no-op drop). Kept separate
+ * from the DOM/pointer-event glue in onNodeDragStop so the mutation-selection
+ * logic — which card wins reparent vs moveToBacklog vs a refused mutation —
+ * is unit-testable without needing a real drag gesture through reactflow's
+ * internal, DOM-measurement-gated dragging.
+ */
+export function computeDragOutcome(tree: GoalTree, sourceId: number, dropTarget: DropTarget): GoalTreeChange | null {
+  if (!dropTarget) return null;
+  if (dropTarget.kind === 'backlog') {
+    const mutation = moveToBacklog(tree, sourceId);
+    if (!mutation.ok || !mutation.result) return null;
+    return { kind: 'moveToBacklog', id: sourceId, result: mutation.result };
+  }
+  if (dropTarget.id === sourceId) return null;
+  const mutation = reparent(tree, sourceId, dropTarget.id);
+  if (!mutation.ok || !mutation.result) return null;
+  return { kind: 'reparent', sourceId, targetId: dropTarget.id, result: mutation.result };
+}
+
+/** Goals reachable from a root (level 0 or parent_id 0) via valid parent_id chains. */
+function partitionCanvasAndBacklog(goals: Goal[]): { canvas: Goal[]; backlog: Goal[] } {
+  const children = new Map<number, Goal[]>();
+  for (const g of goals) {
+    if (!children.has(g.parent_id)) children.set(g.parent_id, []);
+    children.get(g.parent_id)!.push(g);
+  }
+  const roots = goals.filter((g) => g.level === 0 || g.parent_id === 0);
+  const reachable = new Set<number>();
+  const stack = [...roots.map((r) => r.id)];
+  while (stack.length > 0) {
+    const id = stack.pop()!;
+    if (reachable.has(id)) continue;
+    reachable.add(id);
+    for (const child of children.get(id) ?? []) stack.push(child.id);
+  }
+  const canvas: Goal[] = [];
+  const backlog: Goal[] = [];
+  for (const g of goals) {
+    if (reachable.has(g.id)) canvas.push(g);
+    else backlog.push(g); // unreachable from any root — broken/orphaned parent chain
+  }
+  return { canvas, backlog };
+}
+
+function GoalTreeViewInner({
+  tree,
+  layout: layoutProp,
+  layoutOptions,
+  theme: themeProp,
+  readOnly = false,
+  showBacklog = false,
+  showMiniMap = false,
+  onChange,
+  onEditRequest,
+}: GoalTreeViewProps): React.ReactElement {
+  const theme = useMemo(() => resolveTheme(themeProp), [themeProp]);
+  const [collapsedIds, setCollapsedIds] = useState<Set<number>>(new Set());
+  const [hoveredId, setHoveredId] = useState<number | null>(null);
+
+  const { canvas: canvasGoals, backlog: backlogGoals } = useMemo(
+    () => partitionCanvasAndBacklog(tree.goals),
+    [tree.goals],
+  );
+
+  const layout = useMemo<GoalTreeLayout>(() => {
+    if (layoutProp) return layoutProp;
+    const hideCollapsed = [...(layoutOptions?.hideCollapsed ?? []), ...collapsedIds];
+    return layoutGoalTree(
+      { goal_types: tree.goal_types, goals: canvasGoals },
+      { ...layoutOptions, hideCollapsed },
+    );
+  }, [layoutProp, layoutOptions, collapsedIds, tree.goal_types, canvasGoals]);
+
+  const onAddChild = useCallback(
+    (parentId: number, parentLevel: number) => {
+      if (readOnly) return;
+      const before = new Set(tree.goals.map((g) => g.id));
+      const mutation = addChild(tree, parentId, { name: 'New goal', type: '', level: parentLevel + 1, parent_id: parentId });
+      if (!mutation.ok || !mutation.result) return;
+      const newGoal = mutation.result.goals.find((g) => !before.has(g.id));
+      if (!newGoal) return;
+      onChange?.({ kind: 'addChild', parentId, newGoal, result: mutation.result });
+    },
+    [tree, readOnly, onChange],
+  );
+
+  const onDeleteNode = useCallback(
+    (id: number) => {
+      if (readOnly) return;
+      const mutation = deleteWithDescendants(tree, id);
+      if (!mutation.ok || !mutation.result) return;
+      onChange?.({ kind: 'delete', id, result: mutation.result });
+    },
+    [tree, readOnly, onChange],
+  );
+
+  const onRestoreFromBacklog = useCallback(
+    (id: number, newParentId: number) => {
+      if (readOnly) return;
+      const mutation = restoreFromBacklog(tree, id, newParentId);
+      if (!mutation.ok || !mutation.result) return;
+      onChange?.({ kind: 'restoreFromBacklog', id, newParentId, result: mutation.result });
+    },
+    [tree, readOnly, onChange],
+  );
+
+  const onToggleCollapse = useCallback((id: number) => {
+    setCollapsedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const buildNodes = useCallback((): Node<GoalNodeData>[] => {
+    return layout.nodes.map((n) => ({
+      id: String(n.id),
+      type: 'goalNode',
+      position: { x: n.x, y: n.y },
+      draggable: !readOnly,
+      data: {
+        goal: n.data,
+        theme,
+        readOnly,
+        isDropTarget: hoveredId === n.id,
+        hasHiddenChildren: n.hasHiddenChildren,
+        isCollapsed: collapsedIds.has(n.id),
+        onAddChild,
+        onDelete: onDeleteNode,
+        onToggleCollapse,
+      },
+    }));
+  }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse]);
+
+  const buildEdges = useCallback((): Edge[] => {
+    return layout.edges.map((e) => ({
+      id: `e${e.source}-${e.target}`,
+      source: String(e.source),
+      target: String(e.target),
+      type: 'default',
+      style: { stroke: theme.edgeColor, strokeWidth: theme.edgeWidth },
+    }));
+  }, [layout.edges, theme]);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState<GoalNodeData>(buildNodes());
+  const [edges, setEdges, onEdgesChange] = useEdgesState(buildEdges());
+
+  // Re-sync whenever the underlying layout/theme/interaction state changes —
+  // tree/layout are host-controlled props, not owned by this component.
+  useEffect(() => {
+    setNodes(buildNodes());
+    setEdges(buildEdges());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layout, theme, readOnly, hoveredId, collapsedIds]);
+
+  const checkIntersection = useCallback(
+    (a: Node<GoalNodeData>, b: Node<GoalNodeData>): boolean => {
+      const midX = a.position.x + 125;
+      const midY = a.position.y + 40;
+      return midX > b.position.x && midX < b.position.x + 250 && midY > b.position.y && midY < b.position.y + 80;
+    },
+    [],
+  );
+
+  const onNodeDrag: NodeDragHandler = useCallback(
+    (_event, node) => {
+      if (readOnly) return;
+      const hit = nodes.find((n) => n.id !== node.id && checkIntersection(node as Node<GoalNodeData>, n));
+      setHoveredId(hit ? Number(hit.id) : null);
+    },
+    [readOnly, nodes, checkIntersection],
+  );
+
+  const onNodeDragStop: NodeDragHandler = useCallback(
+    (event, node) => {
+      if (readOnly) {
+        setHoveredId(null);
+        return;
+      }
+      const sourceId = Number(node.id);
+      const mouseEvent = event as unknown as MouseEvent;
+      const dropEl = typeof document !== 'undefined' && 'clientX' in mouseEvent
+        ? document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY)
+        : null;
+      const dropTarget: DropTarget = dropEl?.closest('[data-goaltree-backlog-zone]')
+        ? { kind: 'backlog' }
+        : hoveredId != null ? { kind: 'node', id: hoveredId } : null;
+      const change = computeDragOutcome(tree, sourceId, dropTarget);
+      if (change) onChange?.(change);
+      setHoveredId(null);
+    },
+    [readOnly, hoveredId, tree, onChange],
+  );
+
+  const onNodeDoubleClick: NodeMouseHandler = useCallback(
+    (_event, node) => {
+      const goal = tree.goals.find((g) => g.id === Number(node.id));
+      if (goal) onEditRequest?.(goal);
+    },
+    [tree.goals, onEditRequest],
+  );
+
+  const onBacklogItemDragStart = useCallback((event: React.DragEvent, goalId: number) => {
+    event.dataTransfer.setData(BACKLOG_DRAG_MIME, String(goalId));
+    event.dataTransfer.effectAllowed = 'move';
+  }, []);
+
+  const onCanvasDragOver = useCallback(
+    (event: React.DragEvent) => {
+      if (readOnly) return;
+      event.preventDefault();
+    },
+    [readOnly],
+  );
+
+  const onCanvasDrop = useCallback(
+    (event: React.DragEvent) => {
+      if (readOnly) return;
+      event.preventDefault();
+      const idStr = event.dataTransfer.getData(BACKLOG_DRAG_MIME);
+      if (!idStr) return;
+      const goalId = Number(idStr);
+      const targetEl = document.elementFromPoint(event.clientX, event.clientY);
+      const nodeEl = targetEl?.closest('.react-flow__node');
+      const targetIdAttr = nodeEl?.getAttribute('data-id');
+      if (targetIdAttr == null) return;
+      onRestoreFromBacklog(goalId, Number(targetIdAttr));
+    },
+    [readOnly, onRestoreFromBacklog],
+  );
+
+  const showBacklogPanel = showBacklog && backlogGoals.length > 0;
+
+  return (
+    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
+      {showBacklogPanel && (
+        <div
+          data-goaltree-backlog-zone
+          style={{
+            width: 220,
+            flexShrink: 0,
+            borderRight: '1px solid #e2e8f0',
+            padding: 10,
+            overflowY: 'auto',
+            background: '#f8fafc',
+          }}
+        >
+          <div style={{ fontWeight: 700, fontSize: 12, color: '#334155', marginBottom: 8 }}>Backlog</div>
+          {backlogGoals.map((goal) => (
+            <div
+              key={goal.id}
+              draggable={!readOnly}
+              onDragStart={(e) => onBacklogItemDragStart(e, goal.id)}
+              onDoubleClick={() => onEditRequest?.(goal)}
+              title="Drag onto a canvas card to set its parent"
+              style={{
+                padding: 8,
+                marginBottom: 6,
+                background: '#ffffff',
+                border: '1px solid #cbd5e1',
+                borderRadius: 6,
+                fontSize: 11,
+                cursor: readOnly ? 'default' : 'grab',
+              }}
+            >
+              <div style={{ fontWeight: 600 }}>{goal.name}</div>
+              <div style={{ color: '#64748b' }}>Level: {goal.level}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div style={{ flex: 1, position: 'relative' }} onDragOver={onCanvasDragOver} onDrop={onCanvasDrop}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={readOnly ? undefined : onNodesChange}
+          onEdgesChange={readOnly ? undefined : onEdgesChange}
+          nodeTypes={nodeTypes}
+          nodesDraggable={!readOnly}
+          nodesConnectable={false}
+          onNodeDrag={onNodeDrag}
+          onNodeDragStop={onNodeDragStop}
+          onNodeDoubleClick={onNodeDoubleClick}
+          connectionLineType={ConnectionLineType.Bezier}
+          fitView
+        >
+          <Background />
+          <Controls />
+          {showMiniMap && <MiniMap pannable zoomable />}
+        </ReactFlow>
+      </div>
+    </div>
+  );
+}
+
+export function GoalTreeView(props: GoalTreeViewProps): React.ReactElement {
+  return <GoalTreeViewInner {...props} />;
+}

package/src/goals/__tests__/GoalTreeView.test.tsx

@@ -0,0 +1,313 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, cleanup, waitFor } from '@testing-library/react';
+import { GoalTreeView, computeDragOutcome } from '../GoalTreeView.js';
+import type { GoalTree } from '../types.js';
+import type { GoalTreeChange } from '../GoalTreeView.js';
+
+// jsdom has no ResizeObserver / layout engine. reactflow keeps a node's DOM
+// wrapper `visibility: hidden` and excludes it from drag/intersection logic
+// until it has been "measured" via ResizeObserver — so the mock must
+// actually invoke its callback (with the mocked getBoundingClientRect below)
+// for nodes to become interactive, not just satisfy the constructor call.
+class MockResizeObserver {
+  #callback: ResizeObserverCallback;
+  constructor(callback: ResizeObserverCallback) {
+    this.#callback = callback;
+  }
+  observe(target: Element) {
+    queueMicrotask(() => {
+      const rect = target.getBoundingClientRect();
+      this.#callback(
+        [{ target, contentRect: rect } as ResizeObserverEntry],
+        this as unknown as ResizeObserver,
+      );
+    });
+  }
+  unobserve() {}
+  disconnect() {}
+}
+
+// jsdom also has no DOMMatrixReadOnly, which reactflow's dimension-tracking
+// uses to read the translateX/Y out of a node's computed transform. Only
+// translate() (no scale/rotate) ever appears in this component's own CSS, so
+// a minimal shim covering that one case is enough.
+class MockDOMMatrixReadOnly {
+  m41 = 0;
+  m42 = 0;
+  constructor(transform?: string) {
+    if (!transform || transform === 'none') return;
+    const t = /translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)/.exec(transform);
+    if (t) {
+      this.m41 = Number(t[1]);
+      this.m42 = Number(t[2]);
+      return;
+    }
+    const m = /matrix\(([^)]+)\)/.exec(transform);
+    if (m) {
+      const parts = m[1].split(',').map((p) => Number(p.trim()));
+      this.m41 = parts[4] ?? 0;
+      this.m42 = parts[5] ?? 0;
+    }
+  }
+}
+
+function makeTree(): GoalTree {
+  return {
+    goal_types: [
+      { name: 'Strategy', level: 0 },
+      { name: 'Business Goal', level: 1 },
+    ],
+    goals: [
+      { id: 1, name: 'Triple revenue', type: 'Strategy', level: 0, parent_id: 0 },
+      { id: 2, name: 'Launch in EU', type: 'Business Goal', level: 1, parent_id: 1 },
+      {
+        id: 3,
+        name: 'Cut churn',
+        type: 'Business Goal',
+        level: 1,
+        parent_id: 1,
+        factors: [
+          { id: 10, name: 'Support backlog', impact_type: 'risk' },
+          { id: 11, name: 'New pricing', impact_type: 'opportunity' },
+        ],
+      },
+    ],
+  };
+}
+
+beforeEach(() => {
+  (global as unknown as { ResizeObserver: unknown }).ResizeObserver = MockResizeObserver;
+  (window as unknown as { DOMMatrixReadOnly: unknown }).DOMMatrixReadOnly = MockDOMMatrixReadOnly;
+  vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function (this: Element) {
+    // Individual goal cards report their real 250x80 footprint (matters for
+    // reactflow's own drag/measurement bookkeeping); the flow container and
+    // everything else gets a generously large rect so viewport fitting has
+    // room to work with.
+    const isNode = this.classList?.contains('react-flow__node');
+    const width = isNode ? 250 : 1000;
+    const height = isNode ? 80 : 800;
+    return {
+      width, height, top: 0, left: 0, right: width, bottom: height, x: 0, y: 0,
+      toJSON() { return this; },
+    } as DOMRect;
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe('GoalTreeView', () => {
+  it('renders without crashing and shows every canvas goal', async () => {
+    render(<GoalTreeView tree={makeTree()} />);
+    await waitFor(() => {
+      expect(screen.getByText('Triple revenue')).toBeTruthy();
+      expect(screen.getByText('Launch in EU')).toBeTruthy();
+      expect(screen.getByText('Cut churn')).toBeTruthy();
+    });
+  });
+
+  it('renders factor indicators from goal.factors', async () => {
+    render(<GoalTreeView tree={makeTree()} />);
+    await waitFor(() => {
+      expect(screen.getByText('Triple revenue')).toBeTruthy();
+    });
+    // One up-caret (opportunity) and one down-caret (risk) on "Cut churn".
+    expect(screen.getByLabelText('1 positive factor')).toBeTruthy();
+    expect(screen.getByLabelText('1 negative factor')).toBeTruthy();
+  });
+
+  it('puts a goal with a broken parent_id in the backlog, not on canvas', async () => {
+    const tree: GoalTree = {
+      goal_types: [
+        { name: 'Strategy', level: 0 },
+        { name: 'Business Goal', level: 1 },
+      ],
+      goals: [
+        { id: 1, name: 'Root goal', type: 'Strategy', level: 0, parent_id: 0 },
+        // level 1 + a parent_id that resolves to nothing — not a root by
+        // either "Roots: level === 0 || parent_id === 0" clause, and
+        // unreachable from goal 1 — must land in the backlog.
+        { id: 2, name: 'Orphaned goal', type: 'Business Goal', level: 1, parent_id: 999 },
+      ],
+    };
+    render(<GoalTreeView tree={tree} showBacklog />);
+    await waitFor(() => {
+      expect(screen.getByText('Root goal')).toBeTruthy();
+    });
+    expect(screen.getByText('Orphaned goal')).toBeTruthy();
+    expect(screen.queryByText('Backlog')).toBeTruthy();
+  });
+
+  it('does not render add/delete affordances when readOnly', async () => {
+    render(<GoalTreeView tree={makeTree()} readOnly />);
+    await waitFor(() => {
+      expect(screen.getByText('Triple revenue')).toBeTruthy();
+    });
+    expect(screen.queryByLabelText('Add child goal')).toBeNull();
+    expect(screen.queryByLabelText('Delete goal')).toBeNull();
+  });
+
+  it('fires onChange with kind "addChild" when the add-child button is clicked', async () => {
+    const onChange = vi.fn<(e: GoalTreeChange) => void>();
+    render(<GoalTreeView tree={makeTree()} onChange={onChange} />);
+    await waitFor(() => {
+      expect(screen.getByText('Triple revenue')).toBeTruthy();
+    });
+    // Target the root (id 1, level 0) specifically — makeTree()'s goal_types
+    // only go up to level 1, so clicking "add child" on an existing level-1
+    // goal would be correctly refused (would exceed max level) and never
+    // fire onChange at all.
+    const rootNode = document.querySelector('.react-flow__node[data-id="1"]');
+    const addButton = rootNode!.querySelector('[aria-label="Add child goal"]')!;
+    addButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+    const event = onChange.mock.calls[0][0];
+    expect(event.kind).toBe('addChild');
+    if (event.kind === 'addChild') {
+      expect(event.result.goals.length).toBe(4);
+    }
+  });
+
+  it('fires onChange with kind "delete" when the delete button is clicked', async () => {
+    const onChange = vi.fn<(e: GoalTreeChange) => void>();
+    render(<GoalTreeView tree={makeTree()} onChange={onChange} />);
+    await waitFor(() => {
+      expect(screen.getByText('Cut churn')).toBeTruthy();
+    });
+    const deleteButtons = screen.getAllByLabelText('Delete goal');
+    deleteButtons[deleteButtons.length - 1].dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+    const event = onChange.mock.calls[0][0];
+    expect(event.kind).toBe('delete');
+  });
+
+  it('fires onChange with kind "restoreFromBacklog" when a backlog card is dropped onto a canvas card', async () => {
+    const tree: GoalTree = {
+      goal_types: [
+        { name: 'Strategy', level: 0 },
+        { name: 'Business Goal', level: 1 },
+      ],
+      goals: [
+        { id: 1, name: 'Root goal', type: 'Strategy', level: 0, parent_id: 0 },
+        { id: 2, name: 'Orphaned goal', type: 'Business Goal', level: 1, parent_id: 999 },
+      ],
+    };
+    const onChange = vi.fn<(e: GoalTreeChange) => void>();
+    render(<GoalTreeView tree={tree} onChange={onChange} showBacklog />);
+    await waitFor(() => {
+      expect(screen.getByText('Orphaned goal')).toBeTruthy();
+    });
+
+    // jsdom has no native DataTransfer; stub the minimal setData/getData
+    // surface this component's native (non-reactflow) HTML5 drag path uses
+    // and attach it directly to the dispatched events.
+    const store = new Map<string, string>();
+    const dataTransfer = {
+      setData: (k: string, v: string) => store.set(k, v),
+      getData: (k: string) => store.get(k) ?? '',
+      effectAllowed: 'move',
+    };
+    function fireDnd(el: Element, type: string, coords: { clientX: number; clientY: number }) {
+      const event = new Event(type, { bubbles: true, cancelable: true });
+      Object.defineProperty(event, 'dataTransfer', { value: dataTransfer });
+      Object.assign(event, coords);
+      el.dispatchEvent(event);
+    }
+
+    const backlogItem = screen.getByText('Orphaned goal').closest('div[draggable]')!;
+    const rootNode = document.querySelector('.react-flow__node[data-id="1"]')!;
+    // jsdom doesn't implement elementFromPoint at all (not just "returns null").
+    document.elementFromPoint = vi.fn().mockReturnValue(rootNode);
+
+    fireDnd(backlogItem, 'dragstart', { clientX: 0, clientY: 0 });
+    fireDnd(rootNode, 'drop', { clientX: 10, clientY: 10 });
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
+    const event = onChange.mock.calls[0][0];
+    expect(event.kind).toBe('restoreFromBacklog');
+    if (event.kind === 'restoreFromBacklog') {
+      expect(event.id).toBe(2);
+      expect(event.newParentId).toBe(1);
+      expect(event.result.goals.find((g) => g.id === 2)?.parent_id).toBe(1);
+    }
+  });
+
+  // Dragging a card is choreographed by reactflow's own pointer/DOM-measurement
+  // machinery (ResizeObserver-gated node "readiness", d3-drag pointer capture,
+  // viewport transform math) — faithfully simulating that in jsdom means
+  // re-implementing reactflow's internals rather than testing this component.
+  // computeDragOutcome() is the pure decision GoalTreeView's onNodeDragStop
+  // calls once reactflow reports a drag: given where a card was dropped, which
+  // mutation fires and what onChange payload it produces. Testing it directly
+  // covers the actual reparent/moveToBacklog logic without that DOM coupling.
+  describe('computeDragOutcome (reparent / moveToBacklog decision logic)', () => {
+    const tree: GoalTree = {
+      goal_types: [
+        { name: 'Strategy', level: 0 },
+        { name: 'Business Goal', level: 1 },
+      ],
+      goals: [
+        { id: 1, name: 'Goal A', type: 'Strategy', level: 0, parent_id: 0 },
+        { id: 2, name: 'Goal C', type: 'Strategy', level: 0, parent_id: 0 },
+        { id: 3, name: 'Goal B', type: 'Business Goal', level: 1, parent_id: 1 },
+      ],
+    };
+
+    it('fires a "reparent" change when dropped onto another card', () => {
+      const change = computeDragOutcome(tree, 3, { kind: 'node', id: 2 });
+      expect(change?.kind).toBe('reparent');
+      if (change?.kind === 'reparent') {
+        expect(change.sourceId).toBe(3);
+        expect(change.targetId).toBe(2);
+        expect(change.result.goals.find((g) => g.id === 3)?.parent_id).toBe(2);
+      }
+    });
+
+    it('fires a "moveToBacklog" change when dropped on the backlog zone', () => {
+      const change = computeDragOutcome(tree, 3, { kind: 'backlog' });
+      expect(change?.kind).toBe('moveToBacklog');
+      if (change?.kind === 'moveToBacklog') {
+        expect(change.id).toBe(3);
+        expect(change.result.goals.find((g) => g.id === 3)?.parent_id).toBe(0);
+      }
+    });
+
+    it('is a no-op when dropped nowhere in particular', () => {
+      expect(computeDragOutcome(tree, 3, null)).toBeNull();
+    });
+
+    it('is a no-op when dropped on itself', () => {
+      expect(computeDragOutcome(tree, 3, { kind: 'node', id: 3 })).toBeNull();
+    });
+
+    it('is a no-op when the reparent would exceed the schema max level', () => {
+      // Goal 3 is already level 1 (max); reparenting it under itself-sibling
+      // level-1 goal would push it to level 2.
+      const deeper: GoalTree = {
+        ...tree,
+        goals: [...tree.goals, { id: 4, name: 'Goal D', type: 'Business Goal', level: 1, parent_id: 1 }],
+      };
+      expect(computeDragOutcome(deeper, 3, { kind: 'node', id: 4 })).toBeNull();
+    });
+  });
+
+  it('fires onEditRequest on double-click', async () => {
+    const onEditRequest = vi.fn();
+    render(<GoalTreeView tree={makeTree()} onEditRequest={onEditRequest} />);
+    await waitFor(() => {
+      expect(screen.getByText('Triple revenue')).toBeTruthy();
+    });
+    const nodeEl = document.querySelector('.react-flow__node[data-id="1"]');
+    expect(nodeEl).toBeTruthy();
+    nodeEl!.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+
+    await waitFor(() => expect(onEditRequest).toHaveBeenCalledTimes(1));
+    expect(onEditRequest.mock.calls[0][0]).toMatchObject({ id: 1, name: 'Triple revenue' });
+  });
+});

package/src/goals/index.ts

@@ -18,3 +18,7 @@ export { parseCanonicalGoals } from './parse-canonical.js';
 export type { CanonicalGoalsResult } from './parse-canonical.js';
 export { layoutGoalTree, selectScopedGoals } from './layout.js';
 export { reparent, addChild, deleteWithDescendants, moveToBacklog, restoreFromBacklog } from './mutations.js';
+
+export { GoalTreeView } from './GoalTreeView.js';
+export type { GoalTreeViewProps, GoalTreeChange } from './GoalTreeView.js';
+export type { ThemeTokens } from './theme.js';