@transitrix/diagrams 1.12.1 → 1.13.0

package/dist/theme/themes.js

@@ -1,4 +1,4 @@
-import { LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, STRUCTURAL, BRAND_EMPHASIS, TYPOGRAPHY, CSS_VAR, getBaseResetCss, } from './tokens.js';
+import { LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, TREE_LEVEL_COLORS, TREE_MATURITY_COLORS, VIRTUAL_ENTITY, STRUCTURAL, BRAND_EMPHASIS, TYPOGRAPHY, CSS_VAR, getBaseResetCss, } from './tokens.js';
 const TRANSITRIX_LIGHT = {
     bg: '#ffffff',
     bgSurface: '#f8fafc',
@@ -79,6 +79,7 @@ function diagramVars(variant) {
         `${CSS_VAR.layerGoal}:${lc.goal[variant]}`,
         `${CSS_VAR.layerChange}:${lc.change[variant]}`,
         `${CSS_VAR.layerActivity}:${lc.activity[variant]}`,
+        `${CSS_VAR.virtualEntity}:${VIRTUAL_ENTITY[variant]}`,
         `${CSS_VAR.nodeStroke}:${sc.nodeStroke[variant]}`,
         `${CSS_VAR.edgeStroke}:${sc.edgeStroke[variant]}`,
         `${CSS_VAR.textPrimary}:${sc.textPrimary[variant]}`,
@@ -133,6 +134,7 @@ function diagramClassCss() {
 .layer-goal{fill:var(${cv.layerGoal});}
 .layer-change{fill:var(${cv.layerChange});}
 .layer-activity{fill:var(${cv.layerActivity});}
+.layer-virtual{fill:var(${cv.virtualEntity});stroke-dasharray:4,3;}
 ${levelRules}
 .diagram-edge{stroke:var(${cv.edgeStroke});stroke-width:1.5;fill:none;}
 .arrow-fill{fill:var(${cv.edgeStroke});}

package/dist/theme/tokens.d.ts

@@ -70,6 +70,17 @@ export declare const LAYER_COLORS: {
         readonly hc: "#4ade80";
     };
 };
+/**
+ * Virtual/synthesized entity fill — used for placeholder nodes that represent
+ * absence (e.g. a synthesized Change box when an Action skips straight to its Goal).
+ * Pale neutral tint, distinctly muted from real entity colors; border dashed to
+ * signal non-reality.
+ */
+export declare const VIRTUAL_ENTITY: {
+    readonly light: "#f3f4f6";
+    readonly dark: "#2a3134";
+    readonly hc: "#e2e8f0";
+};
 /**
  * Level fill colors for Goals tree nodes — 8 slots, cycled by level index.
  * A single-hue petrol tint ramp (level-0 lightest/root → level-7 deepest);
@@ -241,6 +252,7 @@ export declare const CSS_VAR: {
     readonly layerGoal: "--ts-layer-goal";
     readonly layerChange: "--ts-layer-change";
     readonly layerActivity: "--ts-layer-activity";
+    readonly virtualEntity: "--ts-virtual-entity";
     readonly nodeStroke: "--ts-node-stroke";
     readonly edgeStroke: "--ts-edge-stroke";
     readonly textPrimary: "--ts-text-primary";

package/dist/theme/tokens.js

@@ -38,6 +38,17 @@ export const LAYER_COLORS = {
     change: { light: '#c7e5ef', dark: '#1a3842', hc: '#60a5fa' },
     activity: { light: '#b4e0ee', dark: '#1a414e', hc: '#4ade80' },
 };
+/**
+ * Virtual/synthesized entity fill — used for placeholder nodes that represent
+ * absence (e.g. a synthesized Change box when an Action skips straight to its Goal).
+ * Pale neutral tint, distinctly muted from real entity colors; border dashed to
+ * signal non-reality.
+ */
+export const VIRTUAL_ENTITY = {
+    light: '#f3f4f6',
+    dark: '#2a3134',
+    hc: '#e2e8f0',
+};
 /**
  * Level fill colors for Goals tree nodes — 8 slots, cycled by level index.
  * A single-hue petrol tint ramp (level-0 lightest/root → level-7 deepest);
@@ -158,6 +169,7 @@ export const CSS_VAR = {
     layerGoal: '--ts-layer-goal',
     layerChange: '--ts-layer-change',
     layerActivity: '--ts-layer-activity',
+    virtualEntity: '--ts-virtual-entity',
     nodeStroke: '--ts-node-stroke',
     edgeStroke: '--ts-edge-stroke',
     textPrimary: '--ts-text-primary',

package/dist/webview/entry.js

@@ -124,7 +124,10 @@ function dispatchValidate(kind, doc) {
                 : Array.isArray(meta['__outOfScopeFactorIds'])
                     ? new Set(meta['__outOfScopeFactorIds'])
                     : undefined;
-            const v = parseCanonicalFGCA(doc, outOfScopeGoalIds, outOfScopeFactorIds);
+            const progressData = meta['__progressData'] instanceof Map
+                ? meta['__progressData']
+                : undefined;
+            const v = parseCanonicalFGCA(doc, outOfScopeGoalIds, outOfScopeFactorIds, progressData);
             const r = emptyResult(kind, v.valid ? 'ok' : 'error');
             r.errors.push(...v.errors);
             r.warnings.push(...v.warnings);
@@ -145,7 +148,10 @@ function dispatchValidate(kind, doc) {
                 : Array.isArray(meta['__outOfScopeFactorIds'])
                     ? new Set(meta['__outOfScopeFactorIds'])
                     : undefined;
-            const v = parseCanonicalFGA(doc, outOfScopeGoalIds, outOfScopeFactorIds);
+            const progressData = meta['__progressData'] instanceof Map
+                ? meta['__progressData']
+                : undefined;
+            const v = parseCanonicalFGA(doc, outOfScopeGoalIds, outOfScopeFactorIds, progressData);
             const r = emptyResult(kind, v.valid ? 'ok' : 'error');
             r.errors.push(...v.errors);
             r.warnings.push(...v.warnings);

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

@@ -14,11 +14,13 @@
  */
 import { layoutFGCAPreview } from '../fgca/preview-layout.js';
 import type { FGCADoc } from '../fgca/validate.js';
+import { type EdgeStyle } from '../edge-path.js';
 import { type NodeSizePreset } from '../node-size-presets.js';
 type FgcaLayout = ReturnType<typeof layoutFGCAPreview>;
 export interface RenderFgcaBodyOptions {
     nodeWidth?: number;
     nodeHeight?: number;
+    edgeStyle?: EdgeStyle;
 }
 /**
  * Canonical DGCA/DGA body — the column headers, node rects and edge paths that
@@ -39,6 +41,7 @@ export interface RenderFgcaOptions {
     curvature?: number;
     /** Entry curvature at the target node; defaults to `curvature` when omitted. */
     entryCurvature?: number;
+    edgeStyle?: EdgeStyle;
     nodeSizePreset?: NodeSizePreset;
     layoutOptions?: Parameters<typeof layoutFGCAPreview>[1];
     /** Show scope caption when goal-scoped projection omits goals that reference out-of-scope goals. */

package/dist/webview/render-fgca.js

@@ -13,7 +13,7 @@
  * exactly as the extension preview does.
  */
 import { layoutFGCAPreview, FGCA_NODE_W, FGCA_NODE_H, FGCA_HEADER_H as HEADER_H, FGCA_PAD as PAD, } from '../fgca/preview-layout.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { previewEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveDgcaNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText, truncateLine } from './entity-text-layout.js';
@@ -36,16 +36,19 @@ const COL_LABELS = {
 export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, bodyOptions = {}) {
     const nodeWidth = bodyOptions.nodeWidth ?? FGCA_NODE_W;
     const nodeHeight = bodyOptions.nodeHeight ?? FGCA_NODE_H;
+    const edgeStyle = bodyOptions.edgeStyle;
     const headerTruncate = Math.max(8, Math.floor((nodeWidth - 16) / 7));
+    const STALENESS_THRESHOLD_MS = 7 * 24 * 60 * 60 * 1000;
     const headerSvg = columns
         .map(({ col, x }) => `<text class="text-header" x="${x + nodeWidth / 2}" y="${PAD + HEADER_H / 2}" text-anchor="middle" dominant-baseline="central">${escXml(truncateLine(COL_LABELS[col], headerTruncate))}</text>`)
         .join('\n');
     const edgeSvg = edges
-        .map((e) => `<path d="${horizontalCubicEdgePath(e.sx, e.sy, e.tx, e.ty, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
+        .map((e) => `<path d="${previewEdgePath(e.sx, e.sy, e.tx, e.ty, edgeStyle, curvature, entryCurvature)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
         .join('\n');
     const nodeSvg = nodes
         .map((n) => {
         const entityId = n.id.slice(n.id.indexOf('_') + 1);
+        const nodeClass = n.virtual ? 'diagram-node layer-virtual' : `diagram-node layer-${n.col}`;
         const specs = layoutCenteredEntityText({
             boxX: n.x,
             boxY: n.y,
@@ -57,16 +60,35 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
             idMaxLines: 1,
         });
         const textSvg = emitCenteredTextSvg(specs, n.x + nodeWidth / 2, escXml);
+        const titleContent = `${escXml(n.label)} (${escXml(entityId)})`;
+        const typeBadge = n.type && n.col === 'activity'
+            ? `<text class="text-id" x="${n.x + nodeWidth - 6}" y="${n.y + 10}" text-anchor="end" dominant-baseline="hanging" font-size="10">${escXml(n.type)}</text>`
+            : '';
+        const progressBadge = n.progress && n.col === 'activity'
+            ? (() => {
+                const computedAt = new Date(n.progress.computedAt);
+                const now = new Date();
+                const isStale = now.getTime() - computedAt.getTime() > STALENESS_THRESHOLD_MS;
+                const className = isStale ? 'text-id' : 'text-id';
+                const opacity = isStale ? ' opacity="0.5"' : '';
+                return `<text class="${className}" x="${n.x + nodeWidth - 6}" y="${n.y + 22}" text-anchor="end" dominant-baseline="hanging" font-size="10"${opacity}>${escXml(n.progress.percent + '%')}</text>`;
+            })()
+            : '';
         return [
-            `<rect class="diagram-node layer-${n.col}" x="${n.x}" y="${n.y}" width="${nodeWidth}" height="${nodeHeight}" rx="8"/>`,
+            `<g>`,
+            `<title>${titleContent}</title>`,
+            `<rect class="${nodeClass}" x="${n.x}" y="${n.y}" width="${nodeWidth}" height="${nodeHeight}" rx="8"/>`,
             textSvg,
-        ].join('\n');
+            typeBadge,
+            progressBadge,
+            `</g>`,
+        ].filter(Boolean).join('\n');
     })
         .join('\n');
     return `${headerSvg}\n${nodeSvg}\n${edgeSvg}`;
 }
 export function renderFgcaSvg(doc, options = {}) {
-    const { variant = 'dgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal', layoutOptions, scopeCaption = false, } = options;
+    const { variant = 'dgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, edgeStyle, nodeSizePreset = 'normal', layoutOptions, scopeCaption = false, } = options;
     const hideChanges = variant === 'dga' || doc.hideChanges === true;
     const nodeSize = resolveDgcaNodeSize(parseNodeSizePreset(nodeSizePreset));
     const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, {
@@ -81,6 +103,7 @@ export function renderFgcaSvg(doc, options = {}) {
     const body = renderFgcaBody(columns, nodes, edges, curvature, entryCurvature, {
         nodeWidth: nodeSize.width,
         nodeHeight: nodeSize.height,
+        edgeStyle,
     });
     const titleSvg = title
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(title)}</text>`

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

@@ -1,10 +1,12 @@
 import type { GoalTree, GoalTreeLayout } from '../goals/types.js';
+import { type EdgeStyle } from '../edge-path.js';
 import { type NodeSizePreset } from '../node-size-presets.js';
 import { type ThemeId } from '../theme/index.js';
 export interface RenderGoalsOptions {
     treeName?: string;
     curvature?: number;
     entryCurvature?: number;
+    edgeStyle?: EdgeStyle;
     nodeSizePreset?: NodeSizePreset;
 }
 /**
@@ -16,6 +18,7 @@ export declare function renderGoalsSvg(tree: GoalTree, options?: RenderGoalsOpti
 export interface RenderGoalsLayoutOptions {
     curvature?: number;
     entryCurvature?: number;
+    edgeStyle?: EdgeStyle;
     /** Extra vertical space reserved at the top of the canvas (e.g. for a title block). */
     topInset?: number;
     /** Raw SVG injected immediately after `<defs>` — a header line or a full title block. */

package/dist/webview/render-goals.js

@@ -12,7 +12,7 @@
  */
 import { layoutGoalTree } from '../goals/layout.js';
 import { displayGoalId } from '../goals/parse-canonical.js';
-import { horizontalCubicEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
+import { previewEdgePath, DEFAULT_EDGE_CURVATURE } from '../edge-path.js';
 import { parseNodeSizePreset, resolveGoalsNodeSize } from '../node-size-presets.js';
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { emitCenteredTextSvg, layoutCenteredEntityText } from './entity-text-layout.js';
@@ -27,7 +27,7 @@ const PAD = 24;
  * with the shared theme CSS embedded so the output is self-contained.
  */
 export function renderGoalsSvg(tree, options = {}) {
-    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal' } = options;
+    const { treeName = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, edgeStyle, nodeSizePreset = 'normal' } = options;
     const nodeSize = resolveGoalsNodeSize(parseNodeSizePreset(nodeSizePreset));
     const layout = layoutGoalTree(tree, {
         nodeWidth: nodeSize.width,
@@ -41,7 +41,7 @@ export function renderGoalsSvg(tree, options = {}) {
     const title = treeName
         ? `<text class="text-header" x="${PAD}" y="${PAD - 6}">${escXml(`Goal tree — ${treeName}`)}</text>`
         : '';
-    return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, title, embedCssTheme: 'transitrix' });
+    return renderGoalsLayoutSvg(layout, { curvature, entryCurvature, edgeStyle, title, embedCssTheme: 'transitrix' });
 }
 /**
  * The single goals SVG emitter shared by every host. Takes an already-computed
@@ -52,7 +52,7 @@ export function renderGoalsSvg(tree, options = {}) {
  *     and the export path own styling).
  */
 export function renderGoalsLayoutSvg(layout, options = {}) {
-    const { curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, topInset = 0, title = '', embedCssTheme } = options;
+    const { curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, edgeStyle, topInset = 0, title = '', embedCssTheme } = options;
     const w = layout.bounds.width + PAD * 2;
     const h = layout.bounds.height + PAD * 2 + topInset;
     const ox = -layout.bounds.x + PAD;
@@ -67,7 +67,7 @@ export function renderGoalsLayoutSvg(layout, options = {}) {
         const sy = s.y + oy + s.height / 2;
         const tx = t.x + ox;
         const ty = t.y + oy + t.height / 2;
-        return horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+        return previewEdgePath(sx, sy, tx, ty, edgeStyle, curvature, entryCurvature);
     }
     const edgeSvg = layout.edges
         .map((e) => `<path d="${edgePath(e)}" class="diagram-edge" marker-end="url(#arrow)"/>`)
@@ -92,7 +92,12 @@ export function renderGoalsLayoutSvg(layout, options = {}) {
             idMaxLines: 1,
         });
         const textSvg = emitCenteredTextSvg(specs, x + n.width / 2, escXml);
+        const titleParts = [escXml(labelText), escXml(idText)];
+        if (n.data.level !== undefined)
+            titleParts.push(`level ${n.data.level}`);
+        const titleContent = titleParts.join(' — ');
         return `<g>
+  <title>${titleContent}</title>
   <rect class="diagram-node level-${level}" x="${x}" y="${y}" width="${n.width}" height="${n.height}" rx="${ENTITY_NODE_RX}"/>
   ${textSvg}
 </g>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transitrix/diagrams",
-  "version": "1.12.1",
+  "version": "1.13.0",
   "type": "module",
   "description": "Shared rendering, validation, and pure mutations for Transitrix custom diagram formats.",
   "license": "MIT",

package/src/edge-path.ts

@@ -1,8 +1,7 @@
 // Shared edge geometry for the static notation previews (Goals, FGCA, FGA,
-// Activities). All four render dependency/relationship edges as a single cubic
-// Bézier with horizontal control handles: each control point shares its
-// endpoint's Y, so the tangent is horizontal at both ends and the marker-end
-// arrow reads as perpendicular to the node's vertical edge.
+// Activities). The default path is a cubic Bézier with horizontal control
+// handles so the marker-end arrow sits flush on the node's vertical edge.
+// Goals / DGCA / DGA can switch to a straight chord or an orthogonal polyline.
 //
 // Pulling the path math here (rather than duplicating it inline in each
 // preview) makes the configurable-curvature behaviour
@@ -30,6 +29,30 @@ const MAX_HANDLE = 160;
 /** Multiplier applied to the base handle length. 1 = historical appearance. */
 export const DEFAULT_EDGE_CURVATURE = 1;
 
+/** Path shape for Goals / DGCA / DGA preview edges. Default matches today's cubic. */
+export type EdgeStyle = 'straight' | 'bezier' | 'polyline';
+export const DEFAULT_EDGE_STYLE: EdgeStyle = 'bezier';
+
+export function parseEdgeStyle(v: unknown): EdgeStyle {
+  if (v === 'straight' || v === 'bezier' || v === 'polyline') return v;
+  return DEFAULT_EDGE_STYLE;
+}
+
+/** Straight segment — the arrowhead follows the chord, not the node edge. */
+export function straightEdgePath(sx: number, sy: number, tx: number, ty: number): string {
+  return `M${sx},${sy} L${tx},${ty}`;
+}
+
+/**
+ * Orthogonal (Manhattan) polyline: horizontal out, vertical, horizontal in.
+ * The last segment is horizontal so `marker-end` still meets the node's
+ * vertical edge the same way the cubic does.
+ */
+export function orthogonalEdgePath(sx: number, sy: number, tx: number, ty: number): string {
+  const midX = sx + (tx - sx) / 2;
+  return `M${sx},${sy} H${midX} V${ty} H${tx}`;
+}
+
 /**
  * Builds the SVG `d` for a horizontal-tangent cubic Bézier from (sx,sy) to
  * (tx,ty).
@@ -89,3 +112,21 @@ export function bowedCubicEdgePath(
   const handle = Math.max(EDGE_MIN_HANDLE, Math.min(Math.abs(dx) * DX_FACTOR, MAX_HANDLE)) * curvature;
   return `M${sx},${sy} C${sx + handle},${bowY} ${tx - handle},${bowY} ${tx},${ty}`;
 }
+
+/**
+ * Picks the SVG `d` for a Goals / DGCA / DGA preview edge.
+ * Unknown styles fall back to the historical cubic.
+ */
+export function previewEdgePath(
+  sx: number,
+  sy: number,
+  tx: number,
+  ty: number,
+  style: EdgeStyle = DEFAULT_EDGE_STYLE,
+  curvature: number = DEFAULT_EDGE_CURVATURE,
+  entryCurvature?: number,
+): string {
+  if (style === 'straight') return straightEdgePath(sx, sy, tx, ty);
+  if (style === 'polyline') return orthogonalEdgePath(sx, sy, tx, ty);
+  return horizontalCubicEdgePath(sx, sy, tx, ty, curvature, entryCurvature);
+}

package/src/fgca/index.ts

@@ -3,6 +3,8 @@ export type { FGCALayoutInput } from "./layout";
 export {
   layoutFGCAPreview,
   selectScopedFGCA,
+  chainColumnOptions,
+  sanitizeChainScope,
   FGCA_NODE_W,
   FGCA_NODE_H,
   FGCA_HEADER_H,

package/src/fgca/parse-canonical.ts

@@ -89,11 +89,14 @@ export function isDgcaChangesLayerOff(input: unknown): boolean {
  *        one action or change references an out-of-scope goal, `scopeCaption` is set true.
  * @param outOfScopeFactorIds When a goal-scoped projection omits factors that exist
  *        in the catalogue, pass their IDs here to suppress FGCA-008 errors.
+ * @param progressData Optional map of action ID to progress data (percent + computedAt timestamp).
+ *        Consumed from `__progressData` metadata field if provided there.
  */
 export function parseCanonicalFGCA(
   input: unknown,
   outOfScopeGoalIds?: Set<string> | null,
   outOfScopeFactorIds?: Set<string> | null,
+  progressData?: Map<string, { percent: number; computedAt: string }> | null,
 ): CanonicalFGCAResult {
   const errors: ValidationError[] = [];
   const warnings: ValidationWarning[] = [];
@@ -322,11 +325,14 @@ export function parseCanonicalFGCA(
   const internalActivities: ActivityItem[] = activities.map((el, i) => {
     const goalRefs = checkRefArray(el!, 'goals', goalIds, GOAL_ID_RE, 'FGCA-011', `actions[${i}]`, outOfScopeGoalIds);
     const typeVal = typeof el!['type'] === 'string' ? el!['type'] : undefined;
+    const actId = String(el!['id']);
+    const progressVal = progressData?.get(actId);
     return {
-      id: String(el!['id']),
+      id: actId,
       name: String(el!['name'] ?? ''),
       goal_id: goalRefs.length > 0 ? goalRefs[0] : null,
       ...(typeVal !== undefined ? { type: typeVal } : {}),
+      ...(progressVal !== undefined ? { progress: progressVal } : {}),
     };
   });
 
@@ -400,6 +406,7 @@ export function parseCanonicalFGA(
   input: unknown,
   outOfScopeGoalIds?: Set<string> | null,
   outOfScopeFactorIds?: Set<string> | null,
+  progressData?: Map<string, { percent: number; computedAt: string }> | null,
 ): CanonicalFGAResult {
   if (!input || typeof input !== 'object') {
     return { valid: false, errors: [{ code: 'FGA-001', message: 'document root is not an object' }], warnings: [] };
@@ -428,7 +435,7 @@ export function parseCanonicalFGA(
   // codes are remapped on the way out. FGCA-009 / 010 / 014 (changes-related)
   // are unreachable here because `changes` is empty.
   const synth = { ...raw, notation: 'dgca', id: 'DGCA-FROM-DGA-1', changes: [] };
-  const r = parseCanonicalFGCA(synth, outOfScopeGoalIds, outOfScopeFactorIds);
+  const r = parseCanonicalFGCA(synth, outOfScopeGoalIds, outOfScopeFactorIds, progressData);
   const remap: Record<string, string> = {
     'FGCA-001': 'FGA-001',
     'FGCA-002': 'FGA-002',