@transitrix/diagrams 1.5.0 → 1.7.6

package/dist/goals/GoalTreeView.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import ReactFlow, { Controls, MiniMap, Background, ConnectionLineType, useNodesState, useEdgesState, } from 'reactflow';
+import 'reactflow/dist/style.css';
+import { layoutGoalTree } from './layout.js';
+import { reparent, addChild, deleteWithDescendants, moveToBacklog, restoreFromBacklog } from './mutations.js';
+import { resolveTheme } from './theme.js';
+import GoalNode from './GoalNode.js';
+const BACKLOG_DRAG_MIME = 'application/x-transitrix-goal-id';
+const nodeTypes = { goalNode: GoalNode };
+/**
+ * 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, sourceId, dropTarget) {
+    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) {
+    const children = new Map();
+    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();
+    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 = [];
+    const backlog = [];
+    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, defaultBacklogOpen = true, showMiniMap = false, onChange, onEditRequest, onFactorClick, }) {
+    const theme = useMemo(() => resolveTheme(themeProp), [themeProp]);
+    const [collapsedIds, setCollapsedIds] = useState(new Set());
+    const [hoveredId, setHoveredId] = useState(null);
+    const [isBacklogOpen, setIsBacklogOpen] = useState(defaultBacklogOpen);
+    const { canvas: canvasGoals, backlog: backlogGoals } = useMemo(() => partitionCanvasAndBacklog(tree.goals), [tree.goals]);
+    const layout = useMemo(() => {
+        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, parentLevel) => {
+        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) => {
+        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, newParentId) => {
+        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) => {
+        setCollapsedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }, []);
+    const buildNodes = useCallback(() => {
+        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,
+                onFactorClick,
+            },
+        }));
+    }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse, onFactorClick]);
+    const buildEdges = useCallback(() => {
+        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(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, b) => {
+        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 = useCallback((_event, node) => {
+        if (readOnly)
+            return;
+        const hit = nodes.find((n) => n.id !== node.id && checkIntersection(node, n));
+        setHoveredId(hit ? Number(hit.id) : null);
+    }, [readOnly, nodes, checkIntersection]);
+    const onNodeDragStop = useCallback((event, node) => {
+        if (readOnly) {
+            setHoveredId(null);
+            return;
+        }
+        const sourceId = Number(node.id);
+        const mouseEvent = event;
+        const dropEl = typeof document !== 'undefined' && 'clientX' in mouseEvent
+            ? document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY)
+            : null;
+        const 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 = 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, goalId) => {
+        event.dataTransfer.setData(BACKLOG_DRAG_MIME, String(goalId));
+        event.dataTransfer.effectAllowed = 'move';
+    }, []);
+    const onCanvasDragOver = useCallback((event) => {
+        if (readOnly)
+            return;
+        event.preventDefault();
+    }, [readOnly]);
+    const onCanvasDrop = useCallback((event) => {
+        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 (_jsxs("div", { style: { display: 'flex', width: '100%', height: '100%' }, children: [showBacklogPanel && (_jsxs("div", { ...(isBacklogOpen ? { 'data-goaltree-backlog-zone': true } : {}), style: {
+                    width: isBacklogOpen ? 220 : 28,
+                    flexShrink: 0,
+                    borderRight: '1px solid #e2e8f0',
+                    background: '#f8fafc',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    position: 'relative',
+                }, children: [_jsx("button", { type: "button", "aria-label": isBacklogOpen ? 'Collapse backlog' : 'Expand backlog', title: isBacklogOpen ? 'Collapse backlog' : 'Expand backlog', onClick: () => setIsBacklogOpen((v) => !v), style: {
+                            alignSelf: 'flex-end',
+                            margin: '6px 6px 0 6px',
+                            width: 16,
+                            height: 16,
+                            border: '1px solid #cbd5e1',
+                            borderRadius: 4,
+                            background: '#ffffff',
+                            color: '#64748b',
+                            fontSize: 10,
+                            lineHeight: '14px',
+                            padding: 0,
+                            cursor: 'pointer',
+                            flexShrink: 0,
+                        }, children: isBacklogOpen ? '◀' : '▶' }), isBacklogOpen && (_jsxs("div", { style: { padding: '4px 10px 10px', overflowY: 'auto', flex: 1 }, children: [_jsx("div", { style: { fontWeight: 700, fontSize: 12, color: '#334155', marginBottom: 8 }, children: "Backlog" }), backlogGoals.map((goal) => (_jsxs("div", { 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',
+                                }, children: [_jsx("div", { style: { fontWeight: 600 }, children: goal.name }), _jsxs("div", { style: { color: '#64748b' }, children: ["Level: ", goal.level] })] }, goal.id)))] }))] })), _jsx("div", { style: { flex: 1, position: 'relative' }, onDragOver: onCanvasDragOver, onDrop: onCanvasDrop, children: _jsxs(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: true, children: [_jsx(Background, {}), _jsx(Controls, {}), showMiniMap && _jsx(MiniMap, { pannable: true, zoomable: true })] }) })] }));
+}
+export function GoalTreeView(props) {
+    return _jsx(GoalTreeViewInner, { ...props });
+}

package/dist/goals/__tests__/GoalTreeView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/goals/__tests__/GoalTreeView.test.js

@@ -0,0 +1,337 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _MockResizeObserver_callback;
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, waitFor } from '@testing-library/react';
+import { GoalTreeView, computeDragOutcome } 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 {
+    constructor(callback) {
+        _MockResizeObserver_callback.set(this, void 0);
+        __classPrivateFieldSet(this, _MockResizeObserver_callback, callback, "f");
+    }
+    observe(target) {
+        queueMicrotask(() => {
+            const rect = target.getBoundingClientRect();
+            __classPrivateFieldGet(this, _MockResizeObserver_callback, "f").call(this, [{ target, contentRect: rect }], this);
+        });
+    }
+    unobserve() { }
+    disconnect() { }
+}
+_MockResizeObserver_callback = new WeakMap();
+// 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 {
+    constructor(transform) {
+        this.m41 = 0;
+        this.m42 = 0;
+        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() {
+    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.ResizeObserver = MockResizeObserver;
+    window.DOMMatrixReadOnly = MockDOMMatrixReadOnly;
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+        // 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; },
+        };
+    });
+});
+afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+});
+describe('GoalTreeView', () => {
+    it('renders without crashing and shows every canvas goal', async () => {
+        render(_jsx(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(_jsx(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 = {
+            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(_jsx(GoalTreeView, { tree: tree, showBacklog: true }));
+        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(_jsx(GoalTreeView, { tree: makeTree(), readOnly: true }));
+        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();
+        render(_jsx(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();
+        render(_jsx(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 = {
+            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();
+        render(_jsx(GoalTreeView, { tree: tree, onChange: onChange, showBacklog: true }));
+        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();
+        const dataTransfer = {
+            setData: (k, v) => store.set(k, v),
+            getData: (k) => store.get(k) ?? '',
+            effectAllowed: 'move',
+        };
+        function fireDnd(el, type, coords) {
+            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 = {
+            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 = {
+                ...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 onFactorClick with the clicked factor when a popover item is clicked', async () => {
+        const onFactorClick = vi.fn();
+        render(_jsx(GoalTreeView, { tree: makeTree(), onFactorClick: onFactorClick }));
+        await waitFor(() => {
+            expect(screen.getByText('Cut churn')).toBeTruthy();
+        });
+        // Open the negative-factor panel on "Cut churn" (id=3, has risk factor "Support backlog")
+        const negativeBadge = screen.getByLabelText('1 negative factor');
+        negativeBadge.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        // The popover item for the risk factor should now be in the DOM
+        const factorItem = await waitFor(() => screen.getByText('Support backlog'));
+        factorItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => expect(onFactorClick).toHaveBeenCalledTimes(1));
+        expect(onFactorClick.mock.calls[0][0]).toMatchObject({ id: 10, name: 'Support backlog', impact_type: 'risk' });
+    });
+    it('backlog panel is collapsible — toggle hides and restores content', async () => {
+        const tree = {
+            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 },
+            ],
+        };
+        render(_jsx(GoalTreeView, { tree: tree, showBacklog: true }));
+        await waitFor(() => {
+            expect(screen.getByText('Backlog')).toBeTruthy();
+        });
+        // Collapse
+        screen.getByLabelText('Collapse backlog').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => {
+            expect(screen.queryByText('Backlog')).toBeNull();
+        });
+        // Expand again
+        screen.getByLabelText('Expand backlog').dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        await waitFor(() => {
+            expect(screen.getByText('Backlog')).toBeTruthy();
+        });
+    });
+    it('fires onEditRequest on double-click', async () => {
+        const onEditRequest = vi.fn();
+        render(_jsx(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/dist/goals/__tests__/mutations.test.js

@@ -93,3 +93,42 @@ describe('restoreFromBacklog', () => {
         expect(r.result.goals.find(g => g.id === 3).parent_id).toBe(1);
     });
 });
+describe('reparent — descendant type relabeling and level cap', () => {
+    const DEEP = {
+        goal_types: [
+            { name: 'Strategy', level: 0 },
+            { name: 'Business Goal', level: 1 },
+            { name: 'Project', level: 2 },
+            { name: 'Task', level: 3 },
+        ],
+        goals: [
+            { id: 1, name: 'Root', type: 'Strategy', level: 0, parent_id: 0 },
+            { id: 2, name: 'BG1', type: 'Business Goal', level: 1, parent_id: 1 },
+            { id: 3, name: 'Proj1', type: 'Project', level: 2, parent_id: 2 },
+            { id: 4, name: 'Task1', type: 'Task', level: 3, parent_id: 3 },
+        ],
+    };
+    it('relabels descendant types via getTypeForLevel when reparenting shifts levels', () => {
+        // Move Proj1 (id=3, level=2) directly under Root (id=1, level=0); delta = -1
+        // Task1 (child of Proj1, level=3): new level = 2, type should be 'Project'
+        const r = reparent(DEEP, 3, 1);
+        expect(r.ok).toBe(true);
+        const proj = r.result.goals.find(g => g.id === 3);
+        const task = r.result.goals.find(g => g.id === 4);
+        expect(proj.level).toBe(1);
+        expect(proj.type).toBe('Business Goal');
+        expect(task.level).toBe(2);
+        expect(task.type).toBe('Project');
+    });
+    it('caps descendant level at maxLevel and refuses when that violates GOALS-012', () => {
+        // Move Root (id=1, level=0) under Root2 (id=5, level=0); delta = +1
+        // BG1: 1→2, Proj1: 2→3 (maxLevel), Task1: 3→4, capped at 3
+        // Task1 (capped level=3) under Proj1 (level=3) violates GOALS-012 → refused
+        const tree = {
+            ...DEEP,
+            goals: [...DEEP.goals, { id: 5, name: 'Root2', type: 'Strategy', level: 0, parent_id: 0 }],
+        };
+        const r = reparent(tree, 1, 5);
+        expect(r.ok).toBe(false);
+    });
+});

package/dist/goals/__tests__/parse-canonical.test.js

@@ -107,8 +107,10 @@ describe('parseCanonicalGoals', () => {
     it('maps canonical IDs to internal numeric ids; parent_id is the parent\'s mapped id', () => {
         const r = parseCanonicalGoals(VALID);
         expect(r.parsed?.goals[0].id).toBe(1);
+        expect(r.parsed?.goals[0].canonical_id).toBe('GOAL-1');
         expect(r.parsed?.goals[0].parent_id).toBe(0);
         expect(r.parsed?.goals[1].id).toBe(2);
+        expect(r.parsed?.goals[1].canonical_id).toBe('GOAL-2');
         expect(r.parsed?.goals[1].parent_id).toBe(1);
     });
 });

package/dist/goals/index.d.ts

@@ -4,3 +4,6 @@ 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';

package/dist/goals/index.js

@@ -2,3 +2,4 @@ export { validateGoalTree } from './validate.js';
 export { parseCanonicalGoals } from './parse-canonical.js';
 export { layoutGoalTree, selectScopedGoals } from './layout.js';
 export { reparent, addChild, deleteWithDescendants, moveToBacklog, restoreFromBacklog } from './mutations.js';
+export { GoalTreeView } from './GoalTreeView.js';

package/dist/goals/layout.js

@@ -1,3 +1,4 @@
+import { displayGoalId } from './parse-canonical.js';
 const DEFAULT_NODE_WIDTH = 250;
 const DEFAULT_NODE_HEIGHT = 80;
 const DEFAULT_RANK_SEP = 80;
@@ -21,7 +22,7 @@ export function selectScopedGoals(goals, scope) {
             children.set(g.parent_id, []);
         children.get(g.parent_id).push(g.id);
     }
-    const root = goals.find(g => String(g.id) === scope.rootGoalId);
+    const root = goals.find(g => displayGoalId(g) === scope.rootGoalId);
     if (!root)
         return [];
     const keep = new Set();