@transitrix/diagrams 1.0.0 → 1.0.1

package/dist/target-state/validate.js

@@ -1,59 +1,83 @@
-// TARGET_STATE validator — methodology notations/ELEMENT_PRIMITIVES.md §7.17.
+// TARGET_STATE validator — methodology notations/ELEMENT_PRIMITIVES.md §7.18.
 //
-// Implements TARGET_STATE-001..002. Goal-satisfaction lives on the
-// `target_state_satisfies_goal` REL kind (elements/17-relations.md §3) and is
-// never inline here; a `goals:` field on a TARGET_STATE is flagged.
-import { typeOfId } from '../typed-id.js';
-import { validateElementEnvelope } from '../element-envelope.js';
-/** Composition fields and the TYPE each entry must carry. */
-const COMPOSITION_TYPES = {
-    capabilities: 'CAPABILITY',
-    processes: 'PROCESS',
-    applications: 'APPLICATION',
-};
-export function validateTargetState(input) {
+// Codes:
+//   TSTATE-001 — shape / id grammar / required envelope fields.
+//   TSTATE-002 — composition list entry malformed or wrong TYPE.
+//   TSTATE-003 — forbidden inline `goals` field — TARGET_STATE → GOAL
+//                satisfaction is a `target_state_satisfies_goal` REL
+//                (elements/17-relations.md §3), never inline here.
+//
+// CAPABILITY ids use the V/H sub-grammar (IDS_AND_REFERENCES.md §2): the
+// integer-terminal isCanonicalId would reject them. So the composition entry
+// check accepts any id whose TYPE prefix matches; existence is enforced only
+// when a `CanonCatalog` is supplied.
+import { typeOfId, isCanonicalIdOfType } from '../typed-id.js';
+import { TARGET_STATE_COMPOSITION_FIELDS } from './types.js';
+const REQUIRED_STRING_FIELDS = [
+    'name', 'admitted_at', 'admitted_by', 'valid_from',
+];
+export function validateTargetState(input, options = {}) {
     const errors = [];
     const warnings = [];
-    const { record, errors: envErrors } = validateElementEnvelope(input, {
-        notation: 'target-state',
-        idType: 'TARGET_STATE',
-        code: 'TARGET_STATE-001',
-    });
-    errors.push(...envErrors);
-    if (!record)
+    if (input === null || typeof input !== 'object' || Array.isArray(input)) {
+        errors.push({ code: 'TSTATE-001', message: 'TargetState must be a YAML mapping.' });
         return { valid: false, errors, warnings };
-    // TARGET_STATE-002 — composition entries must carry the right TYPE prefix.
-    for (const [field, expectedType] of Object.entries(COMPOSITION_TYPES)) {
-        const value = record[field];
-        if (value === undefined)
+    }
+    const t = input;
+    // TSTATE-001 — id grammar + notation tag + envelope.
+    if (!isCanonicalIdOfType(t.id, 'TARGET_STATE')) {
+        errors.push({ code: 'TSTATE-001', message: `id "${String(t.id)}" must match TARGET_STATE-[<middle>-]<INTEGER>.`, path: 'id' });
+    }
+    if (t.notation !== 'target-state') {
+        errors.push({ code: 'TSTATE-001', message: 'notation must be the fixed value "target-state".', path: 'notation' });
+    }
+    if (t.zone !== undefined && t.zone !== 'canon') {
+        errors.push({ code: 'TSTATE-001', message: 'zone must be "canon" for a TARGET_STATE.', path: 'zone' });
+    }
+    else if (t.zone === undefined) {
+        errors.push({ code: 'TSTATE-001', message: 'zone is required.', path: 'zone' });
+    }
+    for (const field of REQUIRED_STRING_FIELDS) {
+        const v = t[field];
+        if (typeof v !== 'string' || v.trim() === '') {
+            errors.push({ code: 'TSTATE-001', message: `${field} is required.`, path: field });
+        }
+    }
+    if (t.gate_checks === null || typeof t.gate_checks !== 'object') {
+        errors.push({ code: 'TSTATE-001', message: 'gate_checks is required and must be a mapping.', path: 'gate_checks' });
+    }
+    if (!('valid_to' in t) || !(typeof t.valid_to === 'string' || t.valid_to === null)) {
+        errors.push({ code: 'TSTATE-001', message: 'valid_to is required (an ISO date string or null).', path: 'valid_to' });
+    }
+    // TSTATE-002 — composition list TYPE checks.
+    for (const [field, expectedType] of Object.entries(TARGET_STATE_COMPOSITION_FIELDS)) {
+        const list = t[field];
+        if (list === undefined)
             continue;
-        if (!Array.isArray(value)) {
-            errors.push({
-                code: 'TARGET_STATE-002',
-                message: `${field} must be a list of ${expectedType} typed IDs.`,
-                path: field,
-            });
+        if (!Array.isArray(list)) {
+            errors.push({ code: 'TSTATE-001', message: `${field} must be a list of typed IDs.`, path: field });
             continue;
         }
-        value.forEach((ref, i) => {
-            // CAPABILITY uses a V/H terminal (e.g. CAPABILITY-V1.2) rather than a
-            // plain integer; the prefix-TYPE gate is what this validator enforces,
-            // and the V/H grammar is owned by the capability-map module.
-            if (typeOfId(ref) !== expectedType) {
-                errors.push({
-                    code: 'TARGET_STATE-002',
-                    message: `${field}[${i}] "${String(ref)}" must be a ${expectedType} typed ID.`,
-                    path: `${field}[${i}]`,
-                });
+        list.forEach((ref, i) => {
+            const refType = typeOfId(ref);
+            if (!refType) {
+                errors.push({ code: 'TSTATE-002', message: `${field}[${i}] "${String(ref)}" is not a resolvable typed ID.`, path: `${field}[${i}]` });
+                return;
+            }
+            if (refType !== expectedType) {
+                errors.push({ code: 'TSTATE-002', message: `${field}[${i}] TYPE "${refType}" must be ${expectedType}.`, path: `${field}[${i}]` });
+                return;
+            }
+            if (options.catalog && options.catalog.typeOf(ref) === undefined) {
+                errors.push({ code: 'TSTATE-002', message: `${field}[${i}] "${String(ref)}" does not resolve to an admitted ${expectedType}.`, path: `${field}[${i}]` });
             }
         });
     }
-    // TARGET_STATE-001 — `goals:` is not an inline field on this element. Goal
-    // satisfaction is a target_state_satisfies_goal REL (§7.17).
-    if ('goals' in record) {
+    // TSTATE-003 — `goals` is not an inline field on TARGET_STATE.
+    if ('goals' in t) {
         errors.push({
-            code: 'TARGET_STATE-001',
-            message: 'goals is not an inline field on TARGET_STATE — use a target_state_satisfies_goal REL.',
+            code: 'TSTATE-003',
+            message: 'goals must not be inline on a TARGET_STATE — TARGET_STATE → GOAL satisfaction is a target_state_satisfies_goal REL.',
             path: 'goals',
         });
     }

package/dist/theme/themes.js

@@ -95,10 +95,10 @@ function shellCss() {
     // body[data-theme] selector, so html itself can't read it. Without that
     // explicit html bg, the iframe's underlying VS Code editor background
     // showed through any uncovered area below short diagrams.
-    return `html,body{height:100%;}
-body{background:var(${cv.bg});color:var(${cv.text});display:flex;flex-direction:column;}
-#toolbar{position:sticky;top:0;z-index:10;padding:6px 12px;border-bottom:1px solid var(${cv.border});font-family:${t.fontFamily};font-size:${t.sizes.secondary}px;color:var(${cv.textMuted});background:var(${cv.bg});flex-shrink:0;}
-#canvas{flex:1;min-height:0;padding:16px;overflow:auto;}
+    return `html,body{height:100%;}
+body{background:var(${cv.bg});color:var(${cv.text});display:flex;flex-direction:column;}
+#toolbar{position:sticky;top:0;z-index:10;padding:6px 12px;border-bottom:1px solid var(${cv.border});font-family:${t.fontFamily};font-size:${t.sizes.secondary}px;color:var(${cv.textMuted});background:var(${cv.bg});flex-shrink:0;}
+#canvas{flex:1;min-height:0;padding:16px;overflow:auto;}
 svg{display:block;}`;
 }
 /** CSS for SVG diagram classes — all consume --ts-* variables. */
@@ -111,29 +111,29 @@ function diagramClassCss() {
     // weight from these classes instead of inline attributes. That is the
     // contract every notation preview honours so the catalogue reads as one
     // visual family.
-    return `.diagram-node{stroke:var(${cv.nodeStroke});stroke-width:1;}
-.layer-factor{fill:var(${cv.layerFactor});}
-.layer-goal{fill:var(${cv.layerGoal});}
-.layer-change{fill:var(${cv.layerChange});}
-.layer-activity{fill:var(${cv.layerActivity});}
-${levelRules}
-.diagram-edge{stroke:var(${cv.edgeStroke});stroke-width:1.5;fill:none;}
-.arrow-fill{fill:var(${cv.edgeStroke});}
-.text-header{fill:var(${cv.headerText});font-family:${t.fontFamily};font-size:${t.sizes.header}px;font-weight:${t.weights.header};}
-.text-primary{fill:var(${cv.textPrimary});font-family:${t.fontFamily};font-size:${t.sizes.primary}px;font-weight:${t.weights.primary};}
-.text-secondary{fill:var(${cv.textSecondary});font-family:${t.fontFamily};font-size:${t.sizes.secondary}px;font-weight:${t.weights.secondary};}
-.text-id{fill:var(${cv.textSecondary});font-family:${t.fontFamily};font-size:${t.sizes.id}px;font-weight:${t.weights.id};}
-.text-pill{fill:var(${cv.textPrimary});font-family:${t.fontFamily};font-size:${t.sizes.pill}px;font-weight:${t.weights.pill};}
-.maturity-1{fill:var(${cv.maturity1});}
-.maturity-2{fill:var(${cv.maturity2});}
-.maturity-3{fill:var(${cv.maturity3});}
-.maturity-4{fill:var(${cv.maturity4});}
-.maturity-5{fill:var(${cv.maturity5});}
-.compliance-gap{fill:var(${cv.statusWarningBg});stroke:var(${cv.statusWarningFg});}
-.compliance-gap text{fill:var(${cv.statusWarningFg});}
-.compliance-deadline{fill:var(${cv.statusErrorBg});stroke:var(${cv.statusErrorFg});}
-.compliance-deadline text{fill:var(${cv.statusErrorFg});}
-.compliance-badge{fill:var(${cv.statusErrorFg});}
+    return `.diagram-node{stroke:var(${cv.nodeStroke});stroke-width:1;}
+.layer-factor{fill:var(${cv.layerFactor});}
+.layer-goal{fill:var(${cv.layerGoal});}
+.layer-change{fill:var(${cv.layerChange});}
+.layer-activity{fill:var(${cv.layerActivity});}
+${levelRules}
+.diagram-edge{stroke:var(${cv.edgeStroke});stroke-width:1.5;fill:none;}
+.arrow-fill{fill:var(${cv.edgeStroke});}
+.text-header{fill:var(${cv.headerText});font-family:${t.fontFamily};font-size:${t.sizes.header}px;font-weight:${t.weights.header};dominant-baseline:central;}
+.text-primary{fill:var(${cv.textPrimary});font-family:${t.fontFamily};font-size:${t.sizes.primary}px;font-weight:${t.weights.primary};dominant-baseline:central;}
+.text-secondary{fill:var(${cv.textSecondary});font-family:${t.fontFamily};font-size:${t.sizes.secondary}px;font-weight:${t.weights.secondary};dominant-baseline:central;}
+.text-id{fill:var(${cv.textSecondary});font-family:${t.fontFamily};font-size:${t.sizes.id}px;font-weight:${t.weights.id};dominant-baseline:central;}
+.text-pill{fill:var(${cv.textPrimary});font-family:${t.fontFamily};font-size:${t.sizes.pill}px;font-weight:${t.weights.pill};dominant-baseline:central;}
+.maturity-1{fill:var(${cv.maturity1});}
+.maturity-2{fill:var(${cv.maturity2});}
+.maturity-3{fill:var(${cv.maturity3});}
+.maturity-4{fill:var(${cv.maturity4});}
+.maturity-5{fill:var(${cv.maturity5});}
+.compliance-gap{fill:var(${cv.statusWarningBg});stroke:var(${cv.statusWarningFg});}
+.compliance-gap text{fill:var(${cv.statusWarningFg});}
+.compliance-deadline{fill:var(${cv.statusErrorBg});stroke:var(${cv.statusErrorFg});}
+.compliance-deadline text{fill:var(${cv.statusErrorFg});}
+.compliance-badge{fill:var(${cv.statusErrorFg});}
 .compliance-badge-text{fill:var(${cv.textInverse});font-family:${t.fontFamily};font-size:8px;font-weight:700;}`;
 }
 /**
@@ -159,55 +159,55 @@ export function generateWebviewCss(themeId) {
     const shell = shellCss();
     const classes = diagramClassCss();
     if (themeId === 'transitrix') {
-        return `${base}
-html{background:${TRANSITRIX_LIGHT.bg};min-height:100vh;}
-body[data-theme="transitrix"]{${adaptiveVars(TRANSITRIX_LIGHT)}${diagramVars('light')}}
-${shell}
+        return `${base}
+html{background:${TRANSITRIX_LIGHT.bg};min-height:100vh;}
+body[data-theme="transitrix"]{${adaptiveVars(TRANSITRIX_LIGHT)}${diagramVars('light')}}
+${shell}
 ${classes}`;
     }
     if (themeId === 'transitrix-dark') {
-        return `${base}
-html{background:${TRANSITRIX_DARK.bg};min-height:100vh;}
-body[data-theme="transitrix-dark"]{${adaptiveVars(TRANSITRIX_DARK)}${diagramVars('dark')}}
-${shell}
+        return `${base}
+html{background:${TRANSITRIX_DARK.bg};min-height:100vh;}
+body[data-theme="transitrix-dark"]{${adaptiveVars(TRANSITRIX_DARK)}${diagramVars('dark')}}
+${shell}
 ${classes}`;
     }
     // vscode-adaptive: map --ts-shell vars to --vscode-* CSS variables;
     // layer/level/structural colors follow the VS Code theme body class.
     const cv = CSS_VAR;
-    return `${base}
-html{background:var(--vscode-editor-background,${TRANSITRIX_LIGHT.bg});min-height:100vh;}
-body[data-theme="vscode-adaptive"]{
-  ${cv.bg}:var(--vscode-editor-background);
-  ${cv.bgSurface}:var(--vscode-sideBar-background,var(--vscode-editor-background));
-  ${cv.bgElevated}:var(--vscode-editorHoverWidget-background,var(--vscode-editor-background));
-  ${cv.text}:var(--vscode-foreground);
-  ${cv.textMuted}:var(--vscode-descriptionForeground);
-  ${cv.textInverse}:var(--vscode-editor-background);
-  ${cv.border}:var(--vscode-panel-border);
-  ${cv.divider}:var(--vscode-panel-border);
-  ${cv.statusSuccessBg}:${TRANSITRIX_LIGHT.statusSuccessBg};
-  ${cv.statusSuccessFg}:${TRANSITRIX_LIGHT.statusSuccessFg};
-  ${cv.statusWarningBg}:${TRANSITRIX_LIGHT.statusWarningBg};
-  ${cv.statusWarningFg}:${TRANSITRIX_LIGHT.statusWarningFg};
-  ${cv.statusInfoBg}:${TRANSITRIX_LIGHT.statusInfoBg};
-  ${cv.statusInfoFg}:${TRANSITRIX_LIGHT.statusInfoFg};
-  ${cv.statusErrorBg}:${TRANSITRIX_LIGHT.statusErrorBg};
-  ${cv.statusErrorFg}:${TRANSITRIX_LIGHT.statusErrorFg};
-  ${diagramVars('light')}
-}
-body[data-theme="vscode-adaptive"].vscode-dark{
-  ${cv.statusSuccessBg}:${TRANSITRIX_DARK.statusSuccessBg};
-  ${cv.statusSuccessFg}:${TRANSITRIX_DARK.statusSuccessFg};
-  ${cv.statusWarningBg}:${TRANSITRIX_DARK.statusWarningBg};
-  ${cv.statusWarningFg}:${TRANSITRIX_DARK.statusWarningFg};
-  ${cv.statusInfoBg}:${TRANSITRIX_DARK.statusInfoBg};
-  ${cv.statusInfoFg}:${TRANSITRIX_DARK.statusInfoFg};
-  ${cv.statusErrorBg}:${TRANSITRIX_DARK.statusErrorBg};
-  ${cv.statusErrorFg}:${TRANSITRIX_DARK.statusErrorFg};
-  ${diagramVars('dark')}
-}
-body[data-theme="vscode-adaptive"].vscode-high-contrast{${diagramVars('hc')}}
-${shell}
+    return `${base}
+html{background:var(--vscode-editor-background,${TRANSITRIX_LIGHT.bg});min-height:100vh;}
+body[data-theme="vscode-adaptive"]{
+  ${cv.bg}:var(--vscode-editor-background);
+  ${cv.bgSurface}:var(--vscode-sideBar-background,var(--vscode-editor-background));
+  ${cv.bgElevated}:var(--vscode-editorHoverWidget-background,var(--vscode-editor-background));
+  ${cv.text}:var(--vscode-foreground);
+  ${cv.textMuted}:var(--vscode-descriptionForeground);
+  ${cv.textInverse}:var(--vscode-editor-background);
+  ${cv.border}:var(--vscode-panel-border);
+  ${cv.divider}:var(--vscode-panel-border);
+  ${cv.statusSuccessBg}:${TRANSITRIX_LIGHT.statusSuccessBg};
+  ${cv.statusSuccessFg}:${TRANSITRIX_LIGHT.statusSuccessFg};
+  ${cv.statusWarningBg}:${TRANSITRIX_LIGHT.statusWarningBg};
+  ${cv.statusWarningFg}:${TRANSITRIX_LIGHT.statusWarningFg};
+  ${cv.statusInfoBg}:${TRANSITRIX_LIGHT.statusInfoBg};
+  ${cv.statusInfoFg}:${TRANSITRIX_LIGHT.statusInfoFg};
+  ${cv.statusErrorBg}:${TRANSITRIX_LIGHT.statusErrorBg};
+  ${cv.statusErrorFg}:${TRANSITRIX_LIGHT.statusErrorFg};
+  ${diagramVars('light')}
+}
+body[data-theme="vscode-adaptive"].vscode-dark{
+  ${cv.statusSuccessBg}:${TRANSITRIX_DARK.statusSuccessBg};
+  ${cv.statusSuccessFg}:${TRANSITRIX_DARK.statusSuccessFg};
+  ${cv.statusWarningBg}:${TRANSITRIX_DARK.statusWarningBg};
+  ${cv.statusWarningFg}:${TRANSITRIX_DARK.statusWarningFg};
+  ${cv.statusInfoBg}:${TRANSITRIX_DARK.statusInfoBg};
+  ${cv.statusInfoFg}:${TRANSITRIX_DARK.statusInfoFg};
+  ${cv.statusErrorBg}:${TRANSITRIX_DARK.statusErrorBg};
+  ${cv.statusErrorFg}:${TRANSITRIX_DARK.statusErrorFg};
+  ${diagramVars('dark')}
+}
+body[data-theme="vscode-adaptive"].vscode-high-contrast{${diagramVars('hc')}}
+${shell}
 ${classes}`;
 }

package/dist/webview/__tests__/entry.test.js

@@ -1,16 +1,16 @@
 import { describe, expect, it } from 'vitest';
 import { api, render } from '../entry.js';
-const VALID_GOALS_DOC = `
-notation: goals
-id: GOALS-WEBVIEW-1
-name: "Webview entry smoke test"
-goal_types:
-  - { name: "Strategy", level: 0 }
-goals:
-  - id: GOAL-MOON-1
-    name: "Reach the moon"
-    type: "Strategy"
-    level: 0
+const VALID_GOALS_DOC = `
+notation: goals
+id: GOALS-WEBVIEW-1
+name: "Webview entry smoke test"
+goal_types:
+  - { name: "Strategy", level: 0 }
+goals:
+  - id: GOAL-MOON-1
+    name: "Reach the moon"
+    type: "Strategy"
+    level: 0
 `;
 describe('webview/entry — Step 2 host API', () => {
     it('exposes a version + supportedKinds + render() trio', () => {

package/dist/webview/render-activities.d.ts

@@ -4,8 +4,10 @@ export interface RenderActivitiesOptions {
     title?: string;
     /** Network column / row gaps. Defaults match `layoutActivities`. */
     gaps?: ActivitiesLayoutOptions;
-    /** Edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
+    /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
     curvature?: number;
+    /** Entry curvature at the target node; defaults to `curvature` when omitted. */
+    entryCurvature?: number;
 }
 /**
  * Render the network (PSND) view of an already-validated ActivityDoc to a

package/dist/webview/render-activities.js

@@ -49,7 +49,7 @@ function truncate(s, maxLen) {
  * than short-circuiting.
  */
 export function renderActivitiesSvg(doc, options = {}) {
-    const { title = '', gaps = {}, curvature = DEFAULT_EDGE_CURVATURE } = options;
+    const { title = '', gaps = {}, curvature = DEFAULT_EDGE_CURVATURE, entryCurvature } = options;
     const layout = layoutActivities(doc, gaps);
     if (layout.nodes.length === 0) {
         return `<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0"></svg>`;
@@ -80,7 +80,7 @@ export function renderActivitiesSvg(doc, options = {}) {
         const ty = t.y + oy + t.height / 2;
         const cls = e.isCritical ? 'diagram-edge critical-edge' : 'diagram-edge';
         const marker = `url(#${e.isCritical ? 'arrow-crit' : 'arrow'})`;
-        return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature)}" class="${cls}" marker-end="${marker}"/>`;
+        return `<path d="${horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature)}" class="${cls}" marker-end="${marker}"/>`;
     })
         .join('\n');
     const nodeSvg = layout.nodes

package/dist/webview/render-activity-card.js

@@ -12,18 +12,17 @@
  * CROSS-DOCUMENT RESOLUTION CAVEAT
  * The Activity Card is the only MULTI-DOCUMENT Studio notation: the card YAML
  * names a project Activity, and the project's name, dates, motivation chain
- * (Factors → Goals → Changes) and child activities are pulled BY REFERENCE from
- * the canonical element + relation store (`canon/elements/**`,
+ * (Drivers → Assessments → Goals → Changes) and child activities are pulled BY
+ * REFERENCE from the canonical element + relation store (`canon/elements/**`,
  * `canon/relations/**`; see `../activity-card/resolver.ts`). That resolution
  * requires reading those files from disk, which is NOT available inside the
  * JCEF host. We therefore resolve from the single in-memory card document
- * ONLY: we synthesise
- * a minimal `ResolvedActivityCard` whose project carries just the referenced
- * project id (no resolved name/dates), whose milestones come straight from the
- * card's own `milestones[]`, and whose motivation chain + child activities are
- * empty (those cannot resolve without the siblings). The SVG layout is shared
- * with the VS Code path via `layoutActivityCard`, so a single-document card
- * still renders its title, dates band and milestone timeline.
+ * ONLY: we synthesise a minimal `ResolvedActivityCard` whose project carries
+ * just the referenced project id (no resolved name/dates), whose milestones
+ * come straight from the card's own `milestones[]`, and whose chain sections
+ * and child activities are empty. The SVG layout is shared with the VS Code
+ * path via `layoutActivityCard`, so a single-document card still renders its
+ * title, dates band and milestone section.
  */
 import { layoutActivityCard, ARCHIMATE_CLASS } from '../activity-card/layout.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
@@ -35,13 +34,6 @@ function truncate(text, maxChars) {
         return text;
     return text.slice(0, Math.max(0, maxChars - 1)) + '…';
 }
-/**
- * Build a single-document resolution of the card: everything that can be read
- * straight off the card YAML, with the cross-document fields left empty. This
- * mirrors what `resolveActivityCard` produces, minus the parts that need the
- * canon element + relation store (project name/dates, motivation chain, child
- * activities).
- */
 function resolveSingleDoc(doc) {
     const card = doc.activity_card;
     const rawMilestones = Array.isArray(card?.milestones) ? card.milestones : [];
@@ -62,74 +54,113 @@ function resolveSingleDoc(doc) {
         // only. The layout falls back to '—' for the unknown date fields.
         project: { id: card?.project ?? '', name: card?.project ?? '' },
         milestones,
-        motivation: { factors: [], goals: [], changes: [] },
+        motivation: { drivers: [], goals: [], changes: [] },
+        assessments: [],
         childActivities: [],
+        notes: card?.notes,
     };
 }
 function buildBody(layout, ox, oy) {
     const parts = [];
     // Outer card.
     parts.push(`<rect class="diagram-node level-0" x="${ox}" y="${oy}" width="${layout.bounds.width}" height="${layout.bounds.height}" rx="8"/>`);
-    // Title (project name / id).
-    parts.push(`<text class="text-header" x="${layout.title.x + ox}" y="${layout.title.y + oy}" dominant-baseline="central" font-size="18">${escXml(truncate(layout.title.name, 70))}</text>`);
-    // Dates band.
+    // Title row.
+    parts.push(`<text class="text-header" x="${layout.titleRow.x + ox}" y="${layout.titleRow.y + oy}" style="dominant-baseline:central" font-size="18">${escXml(truncate(layout.titleRow.name, 60))}</text>`);
+    // Activity type badge.
+    if (layout.activityTypeBadge) {
+        const b = layout.activityTypeBadge;
+        parts.push(`<rect class="diagram-node level-2" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="4"/>`);
+        parts.push(`<text class="text-secondary" style="dominant-baseline:central;text-anchor:middle" x="${b.x + ox + b.width / 2}" y="${b.y + oy + b.height / 2}">${escXml(b.label)}</text>`);
+    }
+    // Status badge.
+    if (layout.statusBadge) {
+        const b = layout.statusBadge;
+        parts.push(`<rect class="diagram-node level-3" x="${b.x + ox}" y="${b.y + oy}" width="${b.width}" height="${b.height}" rx="4"/>`);
+        parts.push(`<text class="text-secondary" style="dominant-baseline:central;text-anchor:middle" x="${b.x + ox + b.width / 2}" y="${b.y + oy + b.height / 2}">${escXml(b.label)}</text>`);
+    }
+    // Date fields.
     for (const d of layout.dateFields) {
         parts.push(`<rect class="diagram-node level-2" x="${d.x + ox}" y="${d.y + oy}" width="${d.width}" height="${d.height}" rx="6"/>`);
-        parts.push(`<text class="text-secondary" x="${d.x + ox + 12}" y="${d.y + oy + 18}" dominant-baseline="central">${escXml(d.label)}</text>`);
-        parts.push(`<text class="text-primary" x="${d.x + ox + 12}" y="${d.y + oy + 40}" dominant-baseline="central">${escXml(d.value)}</text>`);
+        parts.push(`<text class="text-secondary" x="${d.x + ox + 12}" y="${d.y + oy + 18}" style="dominant-baseline:central">${escXml(d.label)}</text>`);
+        parts.push(`<text class="text-primary" x="${d.x + ox + 12}" y="${d.y + oy + 40}" style="dominant-baseline:central">${escXml(d.value)}</text>`);
     }
-    // Section headers.
-    for (const s of layout.sectionHeaders) {
-        parts.push(`<text class="text-header" x="${s.x + ox}" y="${s.y + oy + s.height / 2}" dominant-baseline="central">${escXml(s.label)}</text>`);
+    // Stakeholder role slots (2-column grid).
+    for (const s of layout.stakeholderRoleSlots) {
+        parts.push(`<rect class="diagram-node level-2" x="${s.x + ox}" y="${s.y + oy}" width="${s.width}" height="${s.height}" rx="6"/>`);
+        parts.push(`<text class="text-secondary" x="${s.x + ox + 10}" y="${s.y + oy + 16}" style="dominant-baseline:central">${escXml(s.role)}</text>`);
+        parts.push(`<text class="text-primary" x="${s.x + ox + 10}" y="${s.y + oy + 36}" style="dominant-baseline:central">${escXml(truncate(s.name, 40))}</text>`);
+    }
+    // Description row.
+    if (layout.descriptionRow) {
+        const r = layout.descriptionRow;
+        parts.push(`<rect class="diagram-node level-2" x="${r.x + ox}" y="${r.y + oy}" width="${r.width}" height="${r.height}" rx="6"/>`);
+        parts.push(`<text class="text-secondary" x="${r.x + ox + 12}" y="${r.y + oy + 22}" style="dominant-baseline:central">${escXml(r.label)}</text>`);
+        r.valueLines.forEach((line, i) => {
+            parts.push(`<text class="text-primary" x="${r.x + ox + 12}" y="${r.y + oy + 44 + i * 18}" style="dominant-baseline:central">${escXml(line)}</text>`);
+        });
+    }
+    // Chain sections (Drivers → Assessments → Goals → Changes).
+    const SECTION_LEVEL = {
+        drivers: 4,
+        assessments: 5,
+        goals: 5,
+        changes: 6,
+    };
+    for (let si = 0; si < layout.chainSections.length; si++) {
+        const section = layout.chainSections[si];
+        const level = SECTION_LEVEL[section.type] ?? 5;
+        // Section outer box.
+        parts.push(`<rect class="diagram-node level-1" x="${section.x + ox}" y="${section.y + oy}" width="${section.width}" height="${section.height}" rx="6"/>`);
+        // Section header label + subtitle.
+        parts.push(`<text class="text-header" x="${section.x + ox + 12}" y="${section.y + oy + 14}" style="dominant-baseline:central">${escXml(section.label)}<tspan class="text-secondary" font-size="11"> (${escXml(section.subtitle)})</tspan></text>`);
+        if (section.isEmpty) {
+            // Gap indicator.
+            parts.push(`<text class="text-secondary" x="${section.x + ox + 12}" y="${section.y + oy + 24 + 8 + 16}" style="dominant-baseline:central">— not on file</text>`);
+        }
+        else {
+            for (const n of section.nodes) {
+                parts.push(`<rect class="diagram-node level-${level}" x="${n.x + ox}" y="${n.y + oy}" width="${n.width}" height="${n.height}" rx="4"/>`);
+                parts.push(`<text class="text-primary" x="${n.x + ox + 10}" y="${n.y + oy + (n.meta ? 16 : n.height / 2)}" style="dominant-baseline:central">${escXml(truncate(n.name, 80))}</text>`);
+                if (n.meta) {
+                    parts.push(`<text class="text-secondary" x="${n.x + ox + 10}" y="${n.y + oy + 30}" style="dominant-baseline:central">${escXml(n.meta)}</text>`);
+                }
+            }
+        }
+        // Connector arrow to next section.
+        if (si < layout.chainSections.length - 1) {
+            const nextSection = layout.chainSections[si + 1];
+            const arrowX = section.x + ox + section.width / 2;
+            const arrowTopY = section.y + oy + section.height;
+            const arrowBotY = nextSection.y + oy;
+            const midY = (arrowTopY + arrowBotY) / 2;
+            parts.push(`<path class="diagram-edge" d="M${arrowX},${arrowTopY} L${arrowX},${arrowBotY}" fill="none" marker-end="url(#ac-arrow)"/>`);
+            void midY; // midpoint available for future label placement
+        }
     }
     // Milestones.
     for (const m of layout.milestones) {
         parts.push(`<rect class="diagram-node level-3" x="${m.x + ox}" y="${m.y + oy}" width="${m.width}" height="${m.height}" rx="6"/>`);
-        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 16}" dominant-baseline="central">${escXml(m.date)}</text>`);
-        parts.push(`<text class="text-primary" x="${m.x + ox + 10}" y="${m.y + oy + 36}" dominant-baseline="central">${escXml(truncate(m.name, 22))}</text>`);
-        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 52}" dominant-baseline="central" font-style="italic">(${escXml(m.archimateClass)})</text>`);
-    }
-    // Motivation chain — edges first (under nodes).
-    const nodeById = new Map();
-    for (const col of [
-        layout.chainColumns.factors,
-        layout.chainColumns.goals,
-        layout.chainColumns.changes,
-    ]) {
-        for (const n of col)
-            nodeById.set(n.id, n);
-    }
-    for (const e of layout.chainEdges) {
-        const s = nodeById.get(e.sourceId);
-        const t = nodeById.get(e.targetId);
-        if (!s || !t)
-            continue;
-        const x1 = s.x + s.width + ox;
-        const y1 = s.y + s.height / 2 + oy;
-        const x2 = t.x + ox;
-        const y2 = t.y + t.height / 2 + oy;
-        const mx = (x1 + x2) / 2;
-        parts.push(`<path class="diagram-edge" d="M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}" fill="none" marker-end="url(#ac-arrow)"/>`);
-    }
-    const chainLevels = [
-        [layout.chainColumns.factors, 4],
-        [layout.chainColumns.goals, 5],
-        [layout.chainColumns.changes, 6],
-    ];
-    for (const [col, level] of chainLevels) {
-        for (const n of col) {
-            parts.push(`<rect class="diagram-node level-${level}" x="${n.x + ox}" y="${n.y + oy}" width="${n.width}" height="${n.height}" rx="6"/>`);
-            parts.push(`<text class="text-pill" x="${n.x + ox + n.width / 2}" y="${n.y + oy + n.height / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncate(n.name, Math.floor(n.width / 7)))}</text>`);
-        }
+        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 16}" style="dominant-baseline:central">${escXml(m.date)}</text>`);
+        parts.push(`<text class="text-primary" x="${m.x + ox + 10}" y="${m.y + oy + 36}" style="dominant-baseline:central">${escXml(truncate(m.name, 22))}</text>`);
+        parts.push(`<text class="text-secondary" x="${m.x + ox + 10}" y="${m.y + oy + 52}" style="dominant-baseline:central">(${escXml(m.archimateClass)})</text>`);
     }
     // Child activities.
     for (const a of layout.childActivities) {
         parts.push(`<rect class="diagram-node level-1" x="${a.x + ox}" y="${a.y + oy}" width="${a.width}" height="${a.height}" rx="6"/>`);
-        parts.push(`<text class="text-primary" x="${a.x + ox + 12}" y="${a.y + oy + a.height / 2}" dominant-baseline="central">${escXml(truncate(a.name, 48))} <tspan class="text-secondary" font-style="italic">(${escXml(a.archimateClass)})</tspan></text>`);
+        parts.push(`<text class="text-primary" x="${a.x + ox + 12}" y="${a.y + oy + a.height / 2}" style="dominant-baseline:central">${escXml(truncate(a.name, 48))} <tspan class="text-secondary">(${escXml(a.archimateClass)})</tspan></text>`);
         if (a.meta) {
-            parts.push(`<text class="text-secondary" x="${a.x + a.width + ox - 12}" y="${a.y + oy + a.height / 2}" text-anchor="end" dominant-baseline="central">${escXml(truncate(a.meta, 40))}</text>`);
+            parts.push(`<text class="text-secondary" x="${a.x + a.width + ox - 12}" y="${a.y + oy + a.height / 2}" style="dominant-baseline:central;text-anchor:end">${escXml(truncate(a.meta, 40))}</text>`);
         }
     }
+    // Footer — notes.
+    if (layout.footerRow) {
+        const r = layout.footerRow;
+        parts.push(`<rect class="diagram-node level-2" x="${r.x + ox}" y="${r.y + oy}" width="${r.width}" height="${r.height}" rx="6"/>`);
+        parts.push(`<text class="text-secondary" x="${r.x + ox + 12}" y="${r.y + oy + 22}" style="dominant-baseline:central">${escXml(r.label)}</text>`);
+        r.valueLines.forEach((line, i) => {
+            parts.push(`<text class="text-primary" x="${r.x + ox + 12}" y="${r.y + oy + 44 + i * 18}" style="dominant-baseline:central">${escXml(line)}</text>`);
+        });
+    }
     return parts.join('\n');
 }
 export function renderActivityCardSvg(doc, options = {}) {
@@ -139,9 +170,8 @@ export function renderActivityCardSvg(doc, options = {}) {
     const { title = '' } = options;
     const resolved = resolveSingleDoc(doc);
     const layout = layoutActivityCard(resolved);
-    if (layout.bounds.width <= 0 || layout.bounds.height <= 0) {
+    if (layout.bounds.width <= 0 || layout.bounds.height <= 0)
         return EMPTY_SVG;
-    }
     const titleH = title ? 28 : 0;
     const w = layout.bounds.width + PAD * 2;
     const h = layout.bounds.height + PAD * 2 + titleH;
@@ -151,18 +181,15 @@ export function renderActivityCardSvg(doc, options = {}) {
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD + 14}">${escXml(`Activity Card — ${title}`)}</text>`
         : '';
-    // Embed the shared theme CSS inside the SVG so the rendered output is
-    // self-contained — the JCEF host page only needs to drop the SVG into the
-    // DOM and styling resolves without any cooperation from the host stylesheet.
     const embedCss = generateSvgEmbedCss('transitrix');
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
-<style>${embedCss}</style>
-<defs>
-  <marker id="ac-arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
-    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
-  </marker>
-</defs>
-${titleSvg}
-${body}
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
+<style>${embedCss}</style>
+<defs>
+  <marker id="ac-arrow" markerWidth="8" markerHeight="8" refX="8" refY="3" orient="auto">
+    <path d="M0,0 L0,6 L8,3 z" class="arrow-fill"/>
+  </marker>
+</defs>
+${titleSvg}
+${body}
 </svg>`;
 }

package/dist/webview/render-fgca.d.ts

@@ -4,5 +4,9 @@ export interface RenderFgcaOptions {
     variant?: 'fgca' | 'fga';
     /** Optional heading rendered as a left-anchored `text-header` line. */
     title?: string;
+    /** Exit edge curvature; 1 = default, 0 = straight, higher = stronger arc. */
+    curvature?: number;
+    /** Entry curvature at the target node; defaults to `curvature` when omitted. */
+    entryCurvature?: number;
 }
 export declare function renderFgcaSvg(doc: FGCADoc, options?: RenderFgcaOptions): string;