@transitrix/diagrams 1.0.0 → 1.1.0

package/dist/theme/themes.js

@@ -62,6 +62,7 @@ function diagramVars(variant) {
     const mat = MATURITY_COLORS[variant];
     const levelVars = lv.map((c, i) => `--ts-level-${i}:${c}`).join(';') + ';';
     return [
+        `${CSS_VAR.layerDriver}:${lc.driver[variant]}`,
         `${CSS_VAR.layerFactor}:${lc.factor[variant]}`,
         `${CSS_VAR.layerGoal}:${lc.goal[variant]}`,
         `${CSS_VAR.layerChange}:${lc.change[variant]}`,
@@ -95,10 +96,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 +112,30 @@ 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-driver{fill:var(${cv.layerDriver});}
+.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 +161,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/theme/tokens.d.ts

@@ -11,8 +11,13 @@ export declare const FUNCTIONAL: {
     readonly error: "#b91c1c";
     readonly info: "#1d6fa8";
 };
-/** Fill colors for FGCA notation columns. */
+/** Fill colors for FGCA/DGCA notation columns. */
 export declare const LAYER_COLORS: {
+    readonly driver: {
+        readonly light: "#fef3c7";
+        readonly dark: "#292108";
+        readonly hc: "#f59e0b";
+    };
     readonly factor: {
         readonly light: "#fef3c7";
         readonly dark: "#292108";
@@ -140,6 +145,7 @@ export declare const CSS_VAR: {
     readonly statusInfoFg: "--ts-status-info-fg";
     readonly statusErrorBg: "--ts-status-error-bg";
     readonly statusErrorFg: "--ts-status-error-fg";
+    readonly layerDriver: "--ts-layer-driver";
     readonly layerFactor: "--ts-layer-factor";
     readonly layerGoal: "--ts-layer-goal";
     readonly layerChange: "--ts-layer-change";

package/dist/theme/tokens.js

@@ -11,8 +11,9 @@ export const FUNCTIONAL = {
     error: '#b91c1c',
     info: '#1d6fa8',
 };
-/** Fill colors for FGCA notation columns. */
+/** Fill colors for FGCA/DGCA notation columns. */
 export const LAYER_COLORS = {
+    driver: { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
     factor: { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
     goal: { light: '#e0e7ff', dark: '#1e1b4b', hc: '#818cf8' },
     change: { light: '#dbeafe', dark: '#0c2042', hc: '#60a5fa' },
@@ -85,6 +86,7 @@ export const CSS_VAR = {
     statusInfoFg: '--ts-status-info-fg',
     statusErrorBg: '--ts-status-error-bg',
     statusErrorFg: '--ts-status-error-fg',
+    layerDriver: '--ts-layer-driver',
     layerFactor: '--ts-layer-factor',
     layerGoal: '--ts-layer-goal',
     layerChange: '--ts-layer-change',

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

@@ -15,6 +15,8 @@ const EXAMPLES = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../
 // example per notation is enough to prove the dispatch + renderer wiring.
 const FIXTURES = [
     { kind: 'goals', file: 'goals/strategy-2026.goals.transitrix.yaml', markup: 'svg' },
+    { kind: 'dgca', file: 'dgca/strategy-2026.dgca.transitrix.yaml', markup: 'svg' },
+    { kind: 'dga', file: 'dga/strategy-2026.dga.transitrix.yaml', markup: 'svg' },
     { kind: 'fgca', file: 'fgca/strategy-2026.fgca.transitrix.yaml', markup: 'svg' },
     { kind: 'fga', file: 'fga/strategy-2026.fga.transitrix.yaml', markup: 'svg' },
     { kind: 'activities', file: 'activities/platform-launch.activities.transitrix.yaml', markup: 'svg' },

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', () => {