@transitrix/diagrams 1.4.0 → 1.6.0

package/dist/compliance/reverse-index.js

@@ -17,14 +17,17 @@ export function buildComplianceIndex(input) {
     const requirementsByLaw = new Map();
     const assertionsByRequirement = new Map();
     const assertionsBySubject = new Map();
+    const requirementsByParent = new Map();
     for (const r of input.requirements) {
         requirementById.set(r.id, r);
         for (const law of r.derived_from ?? [])
             push(requirementsByLaw, law, r);
+        if (r.parent)
+            push(requirementsByParent, r.parent, r);
     }
     for (const a of input.assertions) {
         push(assertionsByRequirement, a.about, a);
         push(assertionsBySubject, a.subject, a);
     }
-    return { requirementById, requirementsByLaw, assertionsByRequirement, assertionsBySubject };
+    return { requirementById, requirementsByLaw, assertionsByRequirement, assertionsBySubject, requirementsByParent };
 }

package/dist/compliance/trace.d.ts

@@ -0,0 +1,26 @@
+import type { ComplianceIndex, RequirementTrace, TraceElementCatalog } from './types.js';
+import type { ComplianceCodexDoc } from './classify.js';
+/**
+ * Builds the REQUIREMENT / CONSTRAINT traceability view.
+ *
+ * @param requirementId typed id of the element to trace
+ * @param index         reverse index built by `buildComplianceIndex`
+ * @param catalog       name-resolution map for subject / realised_via refs
+ * @param codex         optional codex artefact list (from the scanner); when
+ *                      supplied, `sources[].codex` is populated with the
+ *                      resolved codex artefact for jurisdiction display
+ */
+export declare function buildRequirementTrace(requirementId: string, index: ComplianceIndex, catalog: TraceElementCatalog, codex?: ComplianceCodexDoc[]): RequirementTrace;
+/**
+ * Convenience: build a `TraceElementCatalog` from the scanned canon's product
+ * and subject buckets. Requirements/assertions are excluded — they are indexed
+ * separately by `buildComplianceIndex`; the catalog is only for resolving the
+ * elements a trace references (subjects + realised_via).
+ */
+export declare function buildTraceElementCatalog(products: Array<{
+    id: string;
+    name: string;
+}>, subjects: Array<{
+    id: string;
+    name: string;
+}>): TraceElementCatalog;

package/dist/compliance/trace.js

@@ -0,0 +1,89 @@
+// Requirement traceability + hierarchy builder.
+//
+// Two halves, both origin-agnostic per 15-requirement.md §2.1:
+//
+//   1. Trace chain — `derived_from` sources → the REQUIREMENT / CONSTRAINT
+//      itself → any ASSERTION targeting it (`about`) → the asserted `subject`
+//      + `realised_via` elements. Assertion coverage applies to REQUIREMENT
+//      only (16-assertion.md §1); CONSTRAINT trace shows sources + hierarchy
+//      only.
+//
+//   2. Hierarchy — the `parent` chain (ancestors, root last) plus the direct
+//      children (elements whose `parent` names this one). Same-TYPE only per
+//      15-requirement.md §2.4; the chain terminates at the first missing or
+//      cyclic parent so a broken model still renders something useful.
+//
+// Pure: takes the reverse index + a name-resolution map + optional codex list;
+// no IO. `ComplianceCodexDoc` comes from the scanner so we get jurisdiction
+// alongside the codex id in the sources block.
+function byId(a, b) {
+    return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
+}
+function resolveElement(id, catalog) {
+    const name = catalog.nameById.get(id);
+    return name ? { id, name } : { id };
+}
+/**
+ * Walk the `parent` chain upward from `requirement`, stopping at the first
+ * missing or already-seen parent (cycle guard). Returns immediate parent first,
+ * root last. Empty array when the element has no `parent`.
+ */
+function collectAncestors(requirement, index) {
+    const out = [];
+    const seen = new Set([requirement.id]);
+    let current = requirement;
+    while (current?.parent && !seen.has(current.parent)) {
+        seen.add(current.parent);
+        const next = index.requirementById.get(current.parent);
+        if (!next)
+            break;
+        out.push(next);
+        current = next;
+    }
+    return out;
+}
+/**
+ * Builds the REQUIREMENT / CONSTRAINT traceability view.
+ *
+ * @param requirementId typed id of the element to trace
+ * @param index         reverse index built by `buildComplianceIndex`
+ * @param catalog       name-resolution map for subject / realised_via refs
+ * @param codex         optional codex artefact list (from the scanner); when
+ *                      supplied, `sources[].codex` is populated with the
+ *                      resolved codex artefact for jurisdiction display
+ */
+export function buildRequirementTrace(requirementId, index, catalog, codex = []) {
+    const requirement = index.requirementById.get(requirementId) ?? { id: requirementId, name: requirementId };
+    const codexById = new Map();
+    for (const c of codex)
+        codexById.set(c.id, c);
+    const sources = (requirement.derived_from ?? []).map(sid => {
+        const c = codexById.get(sid);
+        return c ? { id: sid, codex: c } : { id: sid };
+    });
+    const rawAssertions = index.assertionsByRequirement.get(requirementId) ?? [];
+    const assertions = [...rawAssertions]
+        .sort(byId)
+        .map(assertion => ({
+        assertion,
+        subject: resolveElement(assertion.subject, catalog),
+        realisedVia: (assertion.realised_via ?? []).map(rid => resolveElement(rid, catalog)),
+    }));
+    const ancestors = collectAncestors(requirement, index);
+    const children = [...(index.requirementsByParent.get(requirementId) ?? [])].sort(byId);
+    return { requirement, sources, assertions, ancestors, children };
+}
+/**
+ * Convenience: build a `TraceElementCatalog` from the scanned canon's product
+ * and subject buckets. Requirements/assertions are excluded — they are indexed
+ * separately by `buildComplianceIndex`; the catalog is only for resolving the
+ * elements a trace references (subjects + realised_via).
+ */
+export function buildTraceElementCatalog(products, subjects) {
+    const nameById = new Map();
+    for (const p of products)
+        nameById.set(p.id, p.name);
+    for (const s of subjects)
+        nameById.set(s.id, s.name);
+    return { nameById };
+}

package/dist/compliance/types.d.ts

@@ -1,5 +1,6 @@
 import type { AssertionStatus } from '../assertion/types.js';
-/** Projection of a REQUIREMENT the compliance views need. */
+import type { ComplianceCodexDoc } from './classify.js';
+/** Projection of a REQUIREMENT (or CONSTRAINT) the compliance views need. */
 export interface IndexRequirement {
     id: string;
     name: string;
@@ -14,6 +15,38 @@ export interface IndexRequirement {
      * past or imminent, CV-3 renders an urgent decoration on the cell.
      */
     deadline?: string;
+    /**
+     * Origin taxonomy (15-requirement.md §2.1): `legislative`, `process-product`,
+     * or `project-product`. Distinguishes the context from which the obligation
+     * was derived. Undefined for existing pre-taxonomy admissions (treated as
+     * `legislative` by tooling that supports origin-based filtering).
+     */
+    origin?: 'legislative' | 'process-product' | 'project-product';
+    /**
+     * Same-TYPE `parent` reference: the higher-scale obligation this one
+     * decomposes from (15-requirement.md §2.4; ELEMENT_PRIMITIVES.md §7.13 for
+     * CONSTRAINT). Origin-agnostic, structure-only. Enables the hierarchy half
+     * of the requirement traceability view.
+     */
+    parent?: string;
+    /**
+     * Motivation-layer element kind. `requirement` = positive obligation
+     * (15-requirement.md); `constraint` = restriction / prohibition
+     * (ELEMENT_PRIMITIVES.md §7.13). ASSERTION coverage applies to `requirement`
+     * only (16-assertion.md §1); the hierarchy half applies to both.
+     */
+    element_kind?: 'requirement' | 'constraint';
+    /**
+     * Longer-form description of the obligation (15-requirement.md §2). Optional;
+     * used by the requirement traceability view to show the requirement body
+     * inline. Not used by matrix / list views.
+     */
+    description?: string;
+    /**
+     * `next_review_at` review-checkpoint date (15-requirement.md §2.3; ISO 8601).
+     * Present when the author has scheduled a review; drives `REQ-STALE-001`.
+     */
+    next_review_at?: string;
 }
 /**
  * Temporal status of a requirement deadline relative to today.
@@ -93,6 +126,11 @@ export interface ComplianceIndex {
     assertionsByRequirement: Map<string, IndexAssertion[]>;
     /** Subject id (product / process / capability) → assertions about it. */
     assertionsBySubject: Map<string, IndexAssertion[]>;
+    /**
+     * Parent id → the requirements/constraints that name it in `parent`
+     * (15-requirement.md §2.4). Enables the requirement-hierarchy view.
+     */
+    requirementsByParent: Map<string, IndexRequirement[]>;
 }
 export interface LawTreeRequirement {
     requirement: IndexRequirement;
@@ -115,3 +153,58 @@ export interface ProductView {
     /** Requirements bound to the product via an assertion, requirement-id-sorted. */
     requirements: ProductRequirementStatus[];
 }
+/** A codex artefact resolved from a requirement's `derived_from` reference. */
+export interface TraceSourceRef {
+    /** Verbatim id from `derived_from`. Always present. */
+    id: string;
+    /** The codex artefact, when resolved by the scan. Absent for dangling refs. */
+    codex?: ComplianceCodexDoc;
+}
+/** A named element (subject or realising element) resolved by the trace. */
+export interface TraceElementRef {
+    id: string;
+    /** Element name when resolved by the scan; absent for dangling refs. */
+    name?: string;
+}
+/** One ASSERTION targeting the traced requirement, with subject + realising elements. */
+export interface TraceAssertionRow {
+    assertion: IndexAssertion;
+    subject: TraceElementRef;
+    /** Elements named in the assertion's `realised_via` list (may be empty). */
+    realisedVia: TraceElementRef[];
+}
+/**
+ * Requirement traceability + hierarchy view.
+ *
+ * Two halves, both origin-agnostic (15-requirement.md §2.1):
+ *  1. Trace chain — `derived_from` source(s) → the element itself → any
+ *     ASSERTION targeting it (`about`) → the asserted `subject` + `realised_via`
+ *     elements. Origin-agnostic per 15-requirement.md §2.1; assertion coverage
+ *     applies to REQUIREMENT only (16-assertion.md §1) — CONSTRAINT trace shows
+ *     only the source chain + hierarchy.
+ *  2. Hierarchy — `parent` chain (ancestors, root last of the array) + children
+ *     (any element whose `parent` names this one), sorted by id.
+ */
+export interface RequirementTrace {
+    /** The element being traced (REQUIREMENT or CONSTRAINT). Falls back to a
+     *  stub carrying the id as its name when the element is missing from the
+     *  scan (a dangling `parent` or a repository being edited). */
+    requirement: IndexRequirement;
+    /** Backward-trace: `derived_from` codex artefacts, verbatim order. */
+    sources: TraceSourceRef[];
+    /** Forward-trace via ASSERTION. Empty for CONSTRAINT elements (16-assertion.md §1) or for a REQUIREMENT with no filed assertion. */
+    assertions: TraceAssertionRow[];
+    /** Parent chain: immediate parent first, root last. Empty when the element has no `parent`. */
+    ancestors: IndexRequirement[];
+    /** Direct children: elements naming this one as their `parent`, id-sorted. */
+    children: IndexRequirement[];
+}
+/**
+ * The complementary data the trace builder needs to name subjects and realising
+ * elements. Names are resolved by looking up the id in this map; unresolved ids
+ * surface as the id alone (a dangling reference).
+ */
+export interface TraceElementCatalog {
+    /** id → human-readable name (or the id itself when unnamed). */
+    nameById: Map<string, string>;
+}

package/dist/goals/GoalNode.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Goal } from './types.js';
+import type { ThemeTokens } from './theme.js';
+export interface GoalNodeData {
+    goal: Goal;
+    theme: Required<ThemeTokens>;
+    readOnly: boolean;
+    isDropTarget: boolean;
+    hasHiddenChildren: boolean;
+    isCollapsed: boolean;
+    onAddChild: (parentId: number, parentLevel: number) => void;
+    onDelete: (id: number) => void;
+    onToggleCollapse: (id: number) => void;
+}
+declare const GoalNode: React.MemoExoticComponent<({ data }: {
+    data: GoalNodeData;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default GoalNode;

package/dist/goals/GoalNode.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { Handle, Position } from 'reactflow';
+const NODE_WIDTH = 250;
+const NODE_HEIGHT = 80;
+function impactSign(f) {
+    const t = f.impact_type;
+    if (t === 'mixed')
+        return 'both';
+    if (t === 'opportunity' || t === 'positive')
+        return 'positive';
+    return 'negative';
+}
+const GoalNode = memo(({ data }) => {
+    const { goal, theme, readOnly, isDropTarget, hasHiddenChildren, isCollapsed } = data;
+    const [openPanel, setOpenPanel] = useState(null);
+    const positive = (goal.factors ?? []).filter((f) => impactSign(f) !== 'negative');
+    const negative = (goal.factors ?? []).filter((f) => impactSign(f) !== 'positive');
+    const bg = theme.goalLevelColors[goal.level] ?? theme.goalLevelColors[0];
+    return (_jsxs("div", { className: "tx-goal-node", style: {
+            position: 'relative',
+            width: NODE_WIDTH,
+            height: NODE_HEIGHT,
+            background: bg,
+            borderRadius: 12,
+            borderStyle: 'solid',
+            borderWidth: isDropTarget ? 2 : theme.cardBorderWidth,
+            borderColor: isDropTarget ? theme.dropTargetBorderColor : theme.cardBorderColor,
+            boxShadow: '0 1px 4px rgba(0,0,0,0.12)',
+            padding: '6px 8px',
+            fontSize: 12,
+            display: 'flex',
+            alignItems: 'stretch',
+            justifyContent: 'center',
+        }, children: [_jsx(Handle, { type: "target", position: Position.Left, style: { opacity: 0 } }), _jsx(Handle, { type: "source", position: Position.Right, style: { opacity: 0 } }), _jsx("div", { style: { flexShrink: 0, display: 'flex', alignItems: 'center', width: 16 }, children: positive.length > 0 && (_jsxs("span", { role: "button", "aria-label": `${positive.length} positive factor${positive.length > 1 ? 's' : ''}`, title: `${positive.length} positive factor${positive.length > 1 ? 's' : ''}`, onClick: (e) => {
+                        e.stopPropagation();
+                        setOpenPanel(openPanel === 'positive' ? null : 'positive');
+                    }, style: { cursor: 'pointer', color: '#16a34a', fontSize: 14, lineHeight: 1, userSelect: 'none' }, children: ["\u25B2", positive.length > 1 && _jsx("span", { style: { fontSize: 9, fontWeight: 700, marginLeft: 2 }, children: positive.length })] })) }), _jsxs("div", { style: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center', padding: '0 4px' }, children: [_jsx("div", { title: goal.name, style: {
+                            fontWeight: 600,
+                            color: theme.cardTextColor,
+                            lineHeight: 1.2,
+                            overflow: 'hidden',
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                            wordBreak: 'break-word',
+                        }, children: goal.name }), _jsxs("div", { style: { fontSize: 10, color: theme.cardMetaColor, marginTop: 2 }, children: ["ID: ", goal.id, " | Lvl: ", goal.level, goal.tag ? ` | #${goal.tag}` : ''] })] }), _jsx("div", { style: { flexShrink: 0, display: 'flex', alignItems: 'center', width: 16, justifyContent: 'flex-end' }, children: negative.length > 0 && (_jsxs("span", { role: "button", "aria-label": `${negative.length} negative factor${negative.length > 1 ? 's' : ''}`, title: `${negative.length} negative factor${negative.length > 1 ? 's' : ''}`, onClick: (e) => {
+                        e.stopPropagation();
+                        setOpenPanel(openPanel === 'negative' ? null : 'negative');
+                    }, style: { cursor: 'pointer', color: '#dc2626', fontSize: 14, lineHeight: 1, userSelect: 'none' }, children: ["\u25BC", negative.length > 1 && _jsx("span", { style: { fontSize: 9, fontWeight: 700, marginLeft: 2 }, children: negative.length })] })) }), openPanel && (_jsx("div", { style: {
+                    position: 'absolute',
+                    left: 0,
+                    width: '100%',
+                    zIndex: 20,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                    ...(openPanel === 'positive' ? { bottom: 'calc(100% + 8px)' } : { top: 'calc(100% + 8px)' }),
+                }, children: (openPanel === 'positive' ? positive : negative).map((f) => (_jsxs("div", { style: {
+                        background: openPanel === 'positive' ? '#f0fdf4' : '#fef2f2',
+                        border: `1px solid ${openPanel === 'positive' ? '#bbf7d0' : '#fecaca'}`,
+                        color: openPanel === 'positive' ? '#166534' : '#991b1b',
+                        borderRadius: 4,
+                        padding: '4px 6px',
+                        fontSize: 10,
+                        textAlign: 'left',
+                    }, children: [_jsx("div", { style: { fontWeight: 700 }, children: f.name }), f.description && _jsx("div", { style: { opacity: 0.85 }, children: f.description })] }, f.id))) })), !readOnly && (_jsx("button", { type: "button", "aria-label": "Add child goal", title: "Add child goal", onClick: (e) => {
+                    e.stopPropagation();
+                    data.onAddChild(goal.id, goal.level);
+                }, style: {
+                    position: 'absolute', top: -8, right: -8, width: 16, height: 16,
+                    borderRadius: '50%', border: '1px solid #86efac', background: '#ffffff',
+                    color: '#16a34a', fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+                }, children: "+" })), !readOnly && (_jsx("button", { type: "button", "aria-label": "Delete goal", title: "Delete goal and descendants", onClick: (e) => {
+                    e.stopPropagation();
+                    data.onDelete(goal.id);
+                }, style: {
+                    position: 'absolute', bottom: -8, right: -8, width: 16, height: 16,
+                    borderRadius: '50%', border: '1px solid #fca5a5', background: '#ffffff',
+                    color: '#dc2626', fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+                }, children: "\u00D7" })), hasHiddenChildren && (_jsx("button", { type: "button", "aria-label": isCollapsed ? 'Expand branch' : 'Collapse branch', title: isCollapsed ? 'Expand branch' : 'Collapse branch', onClick: (e) => {
+                    e.stopPropagation();
+                    data.onToggleCollapse(goal.id);
+                }, style: {
+                    position: 'absolute', top: '50%', right: -8, transform: 'translateY(-50%)',
+                    width: 16, height: 16, borderRadius: '50%', border: `1px solid ${theme.cardBorderColor}`,
+                    background: '#ffffff', color: theme.cardBorderColor, fontSize: 11, lineHeight: '14px', padding: 0, cursor: 'pointer',
+                }, children: isCollapsed ? '+' : '−' }))] }));
+});
+GoalNode.displayName = 'GoalNode';
+export default GoalNode;

package/dist/goals/GoalTreeView.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import 'reactflow/dist/style.css';
+import type { Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
+import type { ThemeTokens } from './theme.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;
+};
+/** 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 declare function computeDragOutcome(tree: GoalTree, sourceId: number, dropTarget: DropTarget): GoalTreeChange | null;
+export declare function GoalTreeView(props: GoalTreeViewProps): React.ReactElement;

package/dist/goals/GoalTreeView.js

@@ -0,0 +1,228 @@
+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, showMiniMap = false, onChange, onEditRequest, }) {
+    const theme = useMemo(() => resolveTheme(themeProp), [themeProp]);
+    const [collapsedIds, setCollapsedIds] = useState(new Set());
+    const [hoveredId, setHoveredId] = useState(null);
+    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,
+            },
+        }));
+    }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse]);
+    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", { "data-goaltree-backlog-zone": true, style: {
+                    width: 220,
+                    flexShrink: 0,
+                    borderRight: '1px solid #e2e8f0',
+                    padding: 10,
+                    overflowY: 'auto',
+                    background: '#f8fafc',
+                }, 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 {};