@transitrix/diagrams 1.5.0 → 1.6.0

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

@@ -0,0 +1,296 @@
+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 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/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/theme.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Theme tokens for GoalTreeView — replaces DSM's Redux selectors
+ * (selectDiagramParams, selectGoalLevelColors) with a plain prop. Hosts
+ * that already carry Transitrix's --ts-* CSS custom properties (Studio)
+ * can pass those through; hosts with their own theme store (DSM) map
+ * their own values onto this shape.
+ */
+export interface ThemeTokens {
+    /** Card fill colour per goal level (0..7). Falls back to DEFAULT_GOAL_LEVEL_COLORS for missing levels. */
+    goalLevelColors?: Record<number, string>;
+    cardBorderColor?: string;
+    cardBorderWidth?: number;
+    cardTextColor?: string;
+    cardMetaColor?: string;
+    edgeColor?: string;
+    edgeWidth?: number;
+    /** Border colour a card takes on while it's a highlighted drop target during drag. */
+    dropTargetBorderColor?: string;
+}
+export declare const DEFAULT_GOAL_LEVEL_COLORS: Record<number, string>;
+export declare const DEFAULT_THEME: Required<ThemeTokens>;
+export declare function resolveTheme(theme?: ThemeTokens): Required<ThemeTokens>;

package/dist/goals/theme.js

@@ -0,0 +1,32 @@
+export const DEFAULT_GOAL_LEVEL_COLORS = {
+    0: '#e0e7ff',
+    1: '#c7d2fe',
+    2: '#a5b4fc',
+    3: '#93c5fd',
+    4: '#bae6fd',
+    5: '#bbf7d0',
+    6: '#fef08a',
+    7: '#fed7aa',
+};
+export const DEFAULT_THEME = {
+    goalLevelColors: DEFAULT_GOAL_LEVEL_COLORS,
+    cardBorderColor: '#94a3b8',
+    cardBorderWidth: 1,
+    cardTextColor: '#0f172a',
+    cardMetaColor: '#64748b',
+    edgeColor: '#94a3b8',
+    edgeWidth: 1.5,
+    dropTargetBorderColor: '#2563eb',
+};
+export function resolveTheme(theme) {
+    return {
+        goalLevelColors: theme?.goalLevelColors ?? DEFAULT_THEME.goalLevelColors,
+        cardBorderColor: theme?.cardBorderColor ?? DEFAULT_THEME.cardBorderColor,
+        cardBorderWidth: theme?.cardBorderWidth ?? DEFAULT_THEME.cardBorderWidth,
+        cardTextColor: theme?.cardTextColor ?? DEFAULT_THEME.cardTextColor,
+        cardMetaColor: theme?.cardMetaColor ?? DEFAULT_THEME.cardMetaColor,
+        edgeColor: theme?.edgeColor ?? DEFAULT_THEME.edgeColor,
+        edgeWidth: theme?.edgeWidth ?? DEFAULT_THEME.edgeWidth,
+        dropTargetBorderColor: theme?.dropTargetBorderColor ?? DEFAULT_THEME.dropTargetBorderColor,
+    };
+}

package/dist/index.d.ts

@@ -6,7 +6,8 @@ export * from "./geometry";
 export * from "./applications/index";
 export * from "./assertion/index";
 export * from "./blocks/index";
-export * from "./capability-map/index";
+export type { CapabilityType, CapabilityNode, CapabilityMapHeader, CapabilityMapFile, CapabilityTreeNode, CapabilityTreeEdge, CapabilityTreeLevelCounts, CapabilityTreeLayout, RenderCapabilityTreeOptions, } from "./capability-map/index";
+export { validateCapabilityMap, layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_RANK_SEP, TREE_NODE_SEP, renderCapabilityTreeSvg, } from "./capability-map/index";
 export * from "./change/index";
 export * from "./compliance/index";
 export * from "./compliance-matrix/index";

package/dist/index.js

@@ -6,7 +6,7 @@ export * from "./geometry";
 export * from "./applications/index";
 export * from "./assertion/index";
 export * from "./blocks/index";
-export * from "./capability-map/index";
+export { validateCapabilityMap, layoutCapabilityTree, TREE_NODE_WIDTH, TREE_NODE_HEIGHT, TREE_RANK_SEP, TREE_NODE_SEP, renderCapabilityTreeSvg, } from "./capability-map/index";
 export * from "./change/index";
 export * from "./compliance/index";
 export * from "./compliance-matrix/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",
@@ -43,8 +43,11 @@
     "reactflow": "^11.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^19.2.3",
+    "jsdom": "^29.1.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "reactflow": "^11.11.4",

package/src/capability-map/CapabilityCardNode.tsx

@@ -0,0 +1,146 @@
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+import type { Capability } from './dsm-schema.js';
+import type { ThemeTokens } from './dsm-theme.js';
+
+const CARD_WIDTH = 250;
+const CARD_HEIGHT = 64;
+
+function latestMaturityLevel(cap: Capability): number | undefined {
+  if (!cap.maturity || cap.maturity.length === 0) return undefined;
+  return [...cap.maturity].sort((a, b) => b.date.localeCompare(a.date))[0].level;
+}
+
+export interface CapabilityCardNodeData {
+  capability: Capability;
+  theme: Required<ThemeTokens>;
+  maturityColours: Record<number, string>;
+  readOnly: boolean;
+  isDropTarget: boolean;
+  hasHiddenChildren: boolean;
+  isCollapsed: boolean;
+  onAddChild: (parentId: number) => void;
+  onDelete: (id: number) => void;
+  onToggleCollapse: (id: number) => void;
+}
+
+const CapabilityCardNode = memo(({ data }: { data: CapabilityCardNodeData }) => {
+  const { capability, theme, maturityColours, readOnly, isDropTarget, hasHiddenChildren, isCollapsed } = data;
+  const maturity = latestMaturityLevel(capability);
+  const dotColour = maturity !== undefined ? maturityColours[maturity] : undefined;
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: CARD_WIDTH,
+        height: CARD_HEIGHT,
+        background: theme.cardFill,
+        borderRadius: 8,
+        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 10px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ opacity: 0 }} />
+      <Handle type="source" position={Position.Right} style={{ opacity: 0 }} />
+
+      {dotColour && (
+        <span
+          title={`Maturity ${maturity}`}
+          aria-label={`Maturity ${maturity}`}
+          style={{
+            position: 'absolute', top: 6, left: 6, width: 8, height: 8, borderRadius: '50%', background: dotColour,
+          }}
+        />
+      )}
+
+      <div
+        title={capability.name}
+        style={{
+          fontWeight: 600,
+          fontSize: 12,
+          color: theme.cardTextColor,
+          marginLeft: dotColour ? 12 : 0,
+          overflow: 'hidden',
+          display: '-webkit-box',
+          WebkitLineClamp: 2,
+          WebkitBoxOrient: 'vertical',
+          wordBreak: 'break-word',
+          lineHeight: 1.2,
+        }}
+      >
+        {capability.name}
+      </div>
+      <div style={{ fontSize: 10, color: theme.cardMetaColor, marginTop: 2, marginLeft: dotColour ? 12 : 0 }}>
+        {capability.address}
+      </div>
+
+      {!readOnly && (
+        <button
+          type="button"
+          aria-label="Add child capability"
+          title="Add child capability"
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onAddChild(capability.id);
+          }}
+          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',
+          }}
+        >
+          +
+        </button>
+      )}
+
+      {!readOnly && (
+        <button
+          type="button"
+          aria-label="Delete capability"
+          title="Delete capability and descendants"
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onDelete(capability.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',
+          }}
+        >
+          &times;
+        </button>
+      )}
+
+      {hasHiddenChildren && (
+        <button
+          type="button"
+          aria-label={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          title={isCollapsed ? 'Expand branch' : 'Collapse branch'}
+          onClick={(e) => {
+            e.stopPropagation();
+            data.onToggleCollapse(capability.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',
+          }}
+        >
+          {isCollapsed ? '+' : '−'}
+        </button>
+      )}
+    </div>
+  );
+});
+
+CapabilityCardNode.displayName = 'CapabilityCardNode';
+
+export default CapabilityCardNode;