@transitrix/diagrams 1.6.0 → 1.7.6

package/dist/constraint/__tests__/example.test.d.ts

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

package/dist/constraint/__tests__/example.test.js

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import yaml from 'js-yaml';
+import { validateConstraint } from '../validate.js';
+const dir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../../../tests/fixtures/notation-corpus/constraint');
+describe('constraint worked example (notation-corpus)', () => {
+    it('validates CONSTRAINT-GDPR-RESIDENCY-1.yaml without error', () => {
+        const data = yaml.load(readFileSync(path.join(dir, 'CONSTRAINT-GDPR-RESIDENCY-1.yaml'), 'utf-8'));
+        const v = validateConstraint(data);
+        expect(v.valid, JSON.stringify(v.errors)).toBe(true);
+    });
+});

package/dist/constraint/__tests__/validate.test.d.ts

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

package/dist/constraint/__tests__/validate.test.js

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest';
+import { validateConstraint } from '../validate.js';
+function valid() {
+    return {
+        notation: 'constraint',
+        id: 'CONSTRAINT-GDPR-RESIDENCY-1',
+        name: 'EU customer personal data must be stored within EU/EEA jurisdictions',
+        statement: 'Personal data of EU customers MUST NOT be persisted outside EU / EEA jurisdictions.',
+        status: 'active',
+        zone: 'canon',
+        admitted_at: '2026-05-29',
+        admitted_by: 'v.korobeinikov',
+        gate_checks: { uniqueness: 'pass', consistency: 'pass', completeness: 'pass' },
+        valid_from: '2018-05-25',
+        valid_to: null,
+        severity: 'mandatory',
+        owner_role: 'ROLE-DPO-1',
+        applies_to: ['APPLICATION-CRM-1'],
+    };
+}
+const codes = (input, opts) => validateConstraint(input, opts).errors.map((e) => e.code);
+describe('validateConstraint — positive', () => {
+    it('accepts a well-formed constraint', () => {
+        const r = validateConstraint(valid());
+        expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+    });
+});
+describe('validateConstraint — CONST-001', () => {
+    it('flags missing required fields and wrong notation', () => {
+        const r = valid();
+        delete r.statement;
+        expect(codes(r)).toContain('CONST-001');
+        expect(codes({ ...valid(), notation: 'requirement' })).toContain('CONST-001');
+        expect(codes({ ...valid(), id: 'CONSTRAINT-001' })).toContain('CONST-001');
+    });
+});
+describe('validateConstraint — CONST-002/003', () => {
+    it('flags invalid status and severity', () => {
+        expect(codes({ ...valid(), status: 'enabled' })).toContain('CONST-002');
+        expect(codes({ ...valid(), severity: 'critical' })).toContain('CONST-003');
+    });
+});
+describe('validateConstraint — CONST-004/005 (catalog)', () => {
+    it('flags unresolved applies_to and owner_role with catalog', () => {
+        const catalog = { typeOf: () => undefined };
+        expect(codes(valid(), { catalog })).toContain('CONST-004');
+        expect(codes(valid(), { catalog })).toContain('CONST-005');
+    });
+    it('does not flag CONST-004 without catalog for well-formed applies_to', () => {
+        expect(codes(valid())).not.toContain('CONST-004');
+    });
+    it('resolves applies_to when catalogue admits the target', () => {
+        const catalog = {
+            typeOf: (id) => (id === 'APPLICATION-CRM-1' ? 'APPLICATION' : id === 'ROLE-DPO-1' ? 'ROLE' : undefined),
+        };
+        expect(validateConstraint(valid(), { catalog }).valid).toBe(true);
+    });
+});

package/dist/constraint/index.d.ts

@@ -0,0 +1,4 @@
+export { CONSTRAINT_STATUSES, CONSTRAINT_SEVERITIES } from './types.js';
+export type { ConstraintStatus, ConstraintSeverity } from './types.js';
+export { validateConstraint } from './validate.js';
+export type { ConstraintValidateOptions } from './validate.js';

package/dist/constraint/index.js

@@ -0,0 +1,2 @@
+export { CONSTRAINT_STATUSES, CONSTRAINT_SEVERITIES } from './types.js';
+export { validateConstraint } from './validate.js';

package/dist/constraint/types.d.ts

@@ -0,0 +1,4 @@
+export declare const CONSTRAINT_STATUSES: readonly ["active", "proposed", "deprecated", "retired"];
+export type ConstraintStatus = (typeof CONSTRAINT_STATUSES)[number];
+export declare const CONSTRAINT_SEVERITIES: readonly ["mandatory", "recommended", "advisory"];
+export type ConstraintSeverity = (typeof CONSTRAINT_SEVERITIES)[number];

package/dist/constraint/types.js

@@ -0,0 +1,2 @@
+export const CONSTRAINT_STATUSES = ['active', 'proposed', 'deprecated', 'retired'];
+export const CONSTRAINT_SEVERITIES = ['mandatory', 'recommended', 'advisory'];

package/dist/constraint/validate.d.ts

@@ -0,0 +1,7 @@
+import type { ValidationResult } from '../validation-types.js';
+import { type CanonCatalog } from '../typed-id.js';
+export interface ConstraintValidateOptions {
+    /** When provided, CONST-004/005 enforce artefact existence for cross-refs. */
+    catalog?: CanonCatalog;
+}
+export declare function validateConstraint(input: unknown, options?: ConstraintValidateOptions): ValidationResult;

package/dist/constraint/validate.js

@@ -0,0 +1,115 @@
+// CONSTRAINT validator — methodology ELEMENT_PRIMITIVES.md §7.13 (sibling to
+// 15-requirement.md). Implements CONST-001..005 for the compliance suite (#518 C4).
+import { typeOfId, isCanonicalIdOfType } from '../typed-id.js';
+import { CONSTRAINT_STATUSES, CONSTRAINT_SEVERITIES } from './types.js';
+const REQUIRED_FIELDS = [
+    'notation',
+    'name',
+    'statement',
+    'status',
+    'zone',
+    'admitted_at',
+    'admitted_by',
+    'gate_checks',
+    'valid_from',
+];
+export function validateConstraint(input, options = {}) {
+    const errors = [];
+    const warnings = [];
+    if (input === null || typeof input !== 'object' || Array.isArray(input)) {
+        errors.push({ code: 'CONST-001', message: 'Constraint must be a YAML mapping.' });
+        return { valid: false, errors, warnings };
+    }
+    const c = input;
+    if (!isCanonicalIdOfType(c.id, 'CONSTRAINT')) {
+        errors.push({
+            code: 'CONST-001',
+            message: `id "${String(c.id)}" must match CONSTRAINT-[<middle>-]<INTEGER>.`,
+            path: 'id',
+        });
+    }
+    if (c.notation !== 'constraint') {
+        errors.push({ code: 'CONST-001', message: 'notation must be the fixed value "constraint".', path: 'notation' });
+    }
+    for (const f of REQUIRED_FIELDS) {
+        if (f === 'notation')
+            continue;
+        if (f === 'gate_checks') {
+            if (c.gate_checks === null || typeof c.gate_checks !== 'object') {
+                errors.push({ code: 'CONST-001', message: 'gate_checks is required and must be a mapping.', path: 'gate_checks' });
+            }
+            continue;
+        }
+        const v = c[f];
+        if (typeof v !== 'string' || v.trim() === '') {
+            errors.push({ code: 'CONST-001', message: `${f} is required.`, path: f });
+        }
+    }
+    if (c.zone !== 'canon') {
+        errors.push({ code: 'CONST-001', message: 'zone must be "canon" for a CONSTRAINT.', path: 'zone' });
+    }
+    if (!('valid_to' in c) || !(typeof c.valid_to === 'string' || c.valid_to === null)) {
+        errors.push({ code: 'CONST-001', message: 'valid_to is required (an ISO date string or null).', path: 'valid_to' });
+    }
+    const status = typeof c.status === 'string' ? c.status.trim() : '';
+    if (status && !CONSTRAINT_STATUSES.includes(status)) {
+        errors.push({
+            code: 'CONST-002',
+            message: `status must be one of ${CONSTRAINT_STATUSES.join(', ')}.`,
+            path: 'status',
+        });
+    }
+    if (c.severity !== undefined) {
+        const severity = typeof c.severity === 'string' ? c.severity.trim() : '';
+        if (!severity || !CONSTRAINT_SEVERITIES.includes(severity)) {
+            errors.push({
+                code: 'CONST-003',
+                message: `severity must be one of ${CONSTRAINT_SEVERITIES.join(', ')}.`,
+                path: 'severity',
+            });
+        }
+    }
+    if (c.applies_to !== undefined) {
+        if (!Array.isArray(c.applies_to)) {
+            errors.push({ code: 'CONST-001', message: 'applies_to must be a list of typed IDs.', path: 'applies_to' });
+        }
+        else {
+            c.applies_to.forEach((ref, i) => {
+                const type = typeOfId(ref);
+                if (!type) {
+                    errors.push({
+                        code: 'CONST-004',
+                        message: `applies_to[${i}] "${String(ref)}" is not a resolvable typed ID.`,
+                        path: `applies_to[${i}]`,
+                    });
+                    return;
+                }
+                if (options.catalog && options.catalog.typeOf(ref) === undefined) {
+                    errors.push({
+                        code: 'CONST-004',
+                        message: `applies_to[${i}] "${String(ref)}" does not resolve to an admitted artefact.`,
+                        path: `applies_to[${i}]`,
+                    });
+                }
+            });
+        }
+    }
+    if (c.owner_role !== undefined) {
+        const role = c.owner_role;
+        if (typeof role !== 'string' || !isCanonicalIdOfType(role, 'ROLE')) {
+            errors.push({
+                code: 'CONST-005',
+                message: `owner_role "${String(role)}" must be a typed ROLE id.`,
+                path: 'owner_role',
+            });
+        }
+        else if (options.catalog && options.catalog.typeOf(role) === undefined) {
+            errors.push({
+                code: 'CONST-005',
+                message: `owner_role "${role}" does not resolve to an admitted artefact.`,
+                path: 'owner_role',
+            });
+        }
+    }
+    return { valid: errors.length === 0, errors, warnings };
+}

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

@@ -32,6 +32,29 @@ describe('parseCanonicalFGCA', () => {
         expect(r.parsed?.changes).toHaveLength(1);
         expect(r.parsed?.activities).toHaveLength(1);
     });
+    it('accepts ACTION-* ids (methodology 1.0) alongside legacy ACTIVITY-*', () => {
+        const r = parseCanonicalFGCA({
+            ...VALID,
+            actions: [
+                { id: 'ACTION-CRM-EU-1', name: 'CRM rollout', changes: ['CHANGE-1'] },
+                { id: 'ACTIVITY-2', name: 'Legacy workstream', changes: ['CHANGE-1'] },
+            ],
+        });
+        expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+        expect(r.parsed?.activities.map((a) => a.id)).toEqual(['ACTION-CRM-EU-1', 'ACTIVITY-2']);
+    });
+    it('defaults changes to [] when view_config.layers.changes is off (DGA-in-dgca)', () => {
+        const r = parseCanonicalFGCA({
+            ...VALID,
+            changes: undefined,
+            view_config: { layers: { changes: 'off' } },
+            actions: [
+                { id: 'ACTION-DISCOVERY-1', name: 'Gap assessment', goals: ['GOAL-1'] },
+            ],
+        });
+        expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+        expect(r.parsed?.changes).toEqual([]);
+    });
     it('FGCA-001: rejects non-object input', () => {
         expect(parseCanonicalFGCA(null).errors[0].code).toBe('FGCA-001');
         expect(parseCanonicalFGCA('string').errors[0].code).toBe('FGCA-001');
@@ -178,6 +201,14 @@ describe('parseCanonicalFGA', () => {
         expect(r.parsed?.goals).toHaveLength(1);
         expect(r.parsed?.activities).toHaveLength(1);
     });
+    it('accepts ACTION-* ids in FGA mode', () => {
+        const r = parseCanonicalFGA({
+            ...VALID_FGA,
+            actions: [{ id: 'ACTION-GDPR-DSR-WORKFLOW-1', name: 'DSR workflow', goals: ['GOAL-1'] }],
+        });
+        expect(r.valid, JSON.stringify(r.errors)).toBe(true);
+        expect(r.parsed?.activities[0].id).toBe('ACTION-GDPR-DSR-WORKFLOW-1');
+    });
     it('populates activity.goal_id from activity.goals[] (the FGA edge-driving field)', () => {
         // The "FGA nodes render, no edges" bug: activities had no resolvable
         // goal_id, so the renderer drew no goal → activity edges.

package/dist/fgca/parse-canonical.d.ts

@@ -6,7 +6,7 @@
  *
  * - Flat top-level arrays, no `fgca:` wrapper.
  * - Typed string IDs per `IDS_AND_REFERENCES.md` (`FACTOR-1`,
- *   `GOAL-RET-1`, `CHANGE-1`, `ACTIVITY-ONBOARD-1`).
+ *   `GOAL-RET-1`, `CHANGE-1`, `ACTION-ONBOARD-1` (legacy `ACTIVITY-*` accepted).
  * - Plural canonical-direction cross-references: `goal.factors`,
  *   `change.goals`, `activity.changes`, `activity.goals`.
  * - Per-notation validation codes `FGCA-001 … FGCA-015`.

package/dist/fgca/parse-canonical.js

@@ -6,7 +6,7 @@
  *
  * - Flat top-level arrays, no `fgca:` wrapper.
  * - Typed string IDs per `IDS_AND_REFERENCES.md` (`FACTOR-1`,
- *   `GOAL-RET-1`, `CHANGE-1`, `ACTIVITY-ONBOARD-1`).
+ *   `GOAL-RET-1`, `CHANGE-1`, `ACTION-ONBOARD-1` (legacy `ACTIVITY-*` accepted).
  * - Plural canonical-direction cross-references: `goal.factors`,
  *   `change.goals`, `activity.changes`, `activity.goals`.
  * - Per-notation validation codes `FGCA-001 … FGCA-015`.
@@ -31,7 +31,8 @@ const DRIVER_ID_RE = /^DRIVER(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const FACTOR_OR_DRIVER_ID_RE = /^(FACTOR|DRIVER)(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const GOAL_ID_RE = /^GOAL(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const CHANGE_ID_RE = /^CHANGE(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
-const ACTIVITY_ID_RE = /^ACTIVITY(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
+// ACTION is canonical since methodology 1.0; ACTIVITY accepted for legacy docs.
+const ACTION_OR_ACTIVITY_ID_RE = /^(ACTION|ACTIVITY)(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const FGCA_DOC_ID_RE = /^(FGCA|DGCA)(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const CONSTRAINT_ID_RE = /^CONSTRAINT(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 function isNonEmptyString(v) {
@@ -42,6 +43,16 @@ function asObjectArray(v) {
         return null;
     return v.map((el) => (el && typeof el === 'object' ? el : null));
 }
+/** DGA mode (`view_config.layers.changes: off`) may omit the changes layer. */
+function isChangesLayerOff(raw) {
+    const vc = raw['view_config'];
+    if (!vc || typeof vc !== 'object')
+        return false;
+    const layers = vc['layers'];
+    if (!layers || typeof layers !== 'object')
+        return false;
+    return layers['changes'] === 'off';
+}
 /**
  * Validate canonical FGCA YAML and, on success, return an internal-form
  * `FGCADoc` ready for `buildFGCALayout`.
@@ -87,7 +98,10 @@ export function parseCanonicalFGCA(input) {
     }
     const factorsRaw = asObjectArray(raw['factors']);
     const goalsRaw = asObjectArray(raw['goals']);
-    const changesRaw = asObjectArray(raw['changes']);
+    let changesRaw = asObjectArray(raw['changes']);
+    if (changesRaw === null && raw['changes'] === undefined && isChangesLayerOff(raw)) {
+        changesRaw = [];
+    }
     const activitiesRaw = asObjectArray(raw['actions']);
     if (activitiesRaw === null && 'activities' in raw) {
         errors.push({ code: 'FGCA-004', message: '"activities" key is not accepted — rename to "actions"', path: 'actions' });
@@ -145,7 +159,7 @@ export function parseCanonicalFGCA(input) {
     factors.forEach((el, i) => checkLayerElement(el, `factors[${i}]`, FACTOR_OR_DRIVER_ID_RE, factorIds));
     goals.forEach((el, i) => checkLayerElement(el, `goals[${i}]`, GOAL_ID_RE, goalIds));
     changes.forEach((el, i) => checkLayerElement(el, `changes[${i}]`, CHANGE_ID_RE, changeIds));
-    activities.forEach((el, i) => checkLayerElement(el, `activities[${i}]`, ACTIVITY_ID_RE, activityIds));
+    activities.forEach((el, i) => checkLayerElement(el, `activities[${i}]`, ACTION_OR_ACTIVITY_ID_RE, activityIds));
     if (errors.length > 0)
         return { valid: false, errors, warnings };
     // Cross-refs.

package/dist/goals/GoalNode.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Goal } from './types.js';
+import type { Factor, Goal } from './types.js';
 import type { ThemeTokens } from './theme.js';
 export interface GoalNodeData {
     goal: Goal;
@@ -11,6 +11,7 @@ export interface GoalNodeData {
     onAddChild: (parentId: number, parentLevel: number) => void;
     onDelete: (id: number) => void;
     onToggleCollapse: (id: number) => void;
+    onFactorClick?: (factor: Factor) => void;
 }
 declare const GoalNode: React.MemoExoticComponent<({ data }: {
     data: GoalNodeData;

package/dist/goals/GoalNode.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useState } from 'react';
 import { Handle, Position } from 'reactflow';
+import { displayGoalId } from './parse-canonical.js';
 const NODE_WIDTH = 250;
 const NODE_HEIGHT = 80;
 function impactSign(f) {
@@ -44,7 +45,7 @@ const GoalNode = memo(({ data }) => {
                             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) => {
+                        }, children: goal.name }), _jsxs("div", { style: { fontSize: 10, color: theme.cardMetaColor, marginTop: 2 }, children: ["ID: ", displayGoalId(goal), " | 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: {
@@ -56,7 +57,10 @@ const GoalNode = memo(({ data }) => {
                     flexDirection: 'column',
                     gap: 4,
                     ...(openPanel === 'positive' ? { bottom: 'calc(100% + 8px)' } : { top: 'calc(100% + 8px)' }),
-                }, children: (openPanel === 'positive' ? positive : negative).map((f) => (_jsxs("div", { style: {
+                }, children: (openPanel === 'positive' ? positive : negative).map((f) => (_jsxs("div", { onClick: (e) => {
+                        e.stopPropagation();
+                        data.onFactorClick?.(f);
+                    }, style: {
                         background: openPanel === 'positive' ? '#f0fdf4' : '#fef2f2',
                         border: `1px solid ${openPanel === 'positive' ? '#bbf7d0' : '#fecaca'}`,
                         color: openPanel === 'positive' ? '#166534' : '#991b1b',
@@ -64,6 +68,7 @@ const GoalNode = memo(({ data }) => {
                         padding: '4px 6px',
                         fontSize: 10,
                         textAlign: 'left',
+                        cursor: data.onFactorClick ? 'pointer' : 'default',
                     }, 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);

package/dist/goals/GoalTreeView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import 'reactflow/dist/style.css';
-import type { Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
+import type { Factor, Goal, GoalTree, GoalTreeLayout, LayoutOptions } from './types.js';
 import type { ThemeTokens } from './theme.js';
 export type { ThemeTokens } from './theme.js';
 export interface GoalTreeViewProps {
@@ -10,9 +10,11 @@ export interface GoalTreeViewProps {
     theme?: ThemeTokens;
     readOnly?: boolean;
     showBacklog?: boolean;
+    defaultBacklogOpen?: boolean;
     showMiniMap?: boolean;
     onChange?: (event: GoalTreeChange) => void;
     onEditRequest?: (goal: Goal) => void;
+    onFactorClick?: (factor: Factor) => void;
 }
 export type GoalTreeChange = {
     kind: 'reparent';

package/dist/goals/GoalTreeView.js

@@ -61,10 +61,11 @@ function partitionCanvasAndBacklog(goals) {
     }
     return { canvas, backlog };
 }
-function GoalTreeViewInner({ tree, layout: layoutProp, layoutOptions, theme: themeProp, readOnly = false, showBacklog = false, showMiniMap = false, onChange, onEditRequest, }) {
+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)
@@ -126,9 +127,10 @@ function GoalTreeViewInner({ tree, layout: layoutProp, layoutOptions, theme: the
                 onAddChild,
                 onDelete: onDeleteNode,
                 onToggleCollapse,
+                onFactorClick,
             },
         }));
-    }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse]);
+    }, [layout.nodes, theme, readOnly, hoveredId, collapsedIds, onAddChild, onDeleteNode, onToggleCollapse, onFactorClick]);
     const buildEdges = useCallback(() => {
         return layout.edges.map((e) => ({
             id: `e${e.source}-${e.target}`,
@@ -206,22 +208,37 @@ function GoalTreeViewInner({ tree, layout: layoutProp, layoutOptions, theme: the
         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,
+    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',
-                    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',
+                    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: 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 })] }) })] }));
+                            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.js

@@ -281,6 +281,47 @@ describe('GoalTreeView', () => {
             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 }));

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/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();

package/dist/goals/mutations.js

@@ -16,12 +16,12 @@ function getTypeForLevel(tree, level) {
     const gt = tree.goal_types.find(t => t.level === level);
     return gt?.name ?? '';
 }
-function updateDescendantLevels(goals, id, levelDelta) {
-    for (const g of goals) {
+function updateDescendantLevels(clone, id, levelDelta, maxLevel) {
+    for (const g of clone.goals) {
         if (g.parent_id === id) {
-            g.level += levelDelta;
-            g.type = '';
-            updateDescendantLevels(goals, g.id, levelDelta);
+            g.level = Math.min(g.level + levelDelta, maxLevel);
+            g.type = getTypeForLevel(clone, g.level);
+            updateDescendantLevels(clone, g.id, levelDelta, maxLevel);
         }
     }
 }
@@ -67,7 +67,7 @@ export function reparent(tree, sourceId, targetId) {
     source.level = newLevel;
     source.type = getTypeForLevel(clone, newLevel);
     if (levelDelta !== 0)
-        updateDescendantLevels(clone.goals, sourceId, levelDelta);
+        updateDescendantLevels(clone, sourceId, levelDelta, maxLevel);
     const v = validateGoalTree(clone);
     if (!v.valid)
         return refusalError(v.errors[0]?.message ?? 'Validation failed after reparent');