@transitrix/diagrams 1.0.0

package/dist/theme/themes.js

@@ -0,0 +1,213 @@
+import { LAYER_COLORS, LEVEL_COLORS, MATURITY_COLORS, STRUCTURAL, TYPOGRAPHY, CSS_VAR, getBaseResetCss, } from './tokens.js';
+const TRANSITRIX_LIGHT = {
+    bg: '#ffffff',
+    bgSurface: '#f8fafc',
+    bgElevated: '#f1f5f9',
+    text: '#0f172a',
+    textMuted: '#64748b',
+    textInverse: '#ffffff',
+    border: '#e2e8f0',
+    divider: '#cbd5e1',
+    statusSuccessBg: '#d1fae5',
+    statusSuccessFg: '#065f46',
+    statusWarningBg: '#fef9c3',
+    statusWarningFg: '#854d0e',
+    statusInfoBg: '#e0f2fe',
+    statusInfoFg: '#0c4a6e',
+    statusErrorBg: '#fee2e2',
+    statusErrorFg: '#991b1b',
+};
+const TRANSITRIX_DARK = {
+    bg: '#0a1628',
+    bgSurface: '#0f1f3d',
+    bgElevated: '#162544',
+    text: '#f1f5f9',
+    textMuted: '#94a3b8',
+    textInverse: '#0f172a',
+    border: '#1e3a5f',
+    divider: '#1a3050',
+    statusSuccessBg: '#022c22',
+    statusSuccessFg: '#6ee7b7',
+    statusWarningBg: '#1e1500',
+    statusWarningFg: '#fcd34d',
+    statusInfoBg: '#071e2e',
+    statusInfoFg: '#7dd3fc',
+    statusErrorBg: '#2c0a0a',
+    statusErrorFg: '#fca5a5',
+};
+function adaptiveVars(t) {
+    return [
+        `${CSS_VAR.bg}:${t.bg}`,
+        `${CSS_VAR.bgSurface}:${t.bgSurface}`,
+        `${CSS_VAR.bgElevated}:${t.bgElevated}`,
+        `${CSS_VAR.text}:${t.text}`,
+        `${CSS_VAR.textMuted}:${t.textMuted}`,
+        `${CSS_VAR.textInverse}:${t.textInverse}`,
+        `${CSS_VAR.border}:${t.border}`,
+        `${CSS_VAR.divider}:${t.divider}`,
+        `${CSS_VAR.statusSuccessBg}:${t.statusSuccessBg}`,
+        `${CSS_VAR.statusSuccessFg}:${t.statusSuccessFg}`,
+        `${CSS_VAR.statusWarningBg}:${t.statusWarningBg}`,
+        `${CSS_VAR.statusWarningFg}:${t.statusWarningFg}`,
+        `${CSS_VAR.statusInfoBg}:${t.statusInfoBg}`,
+        `${CSS_VAR.statusInfoFg}:${t.statusInfoFg}`,
+        `${CSS_VAR.statusErrorBg}:${t.statusErrorBg}`,
+        `${CSS_VAR.statusErrorFg}:${t.statusErrorFg}`,
+    ].join(';') + ';';
+}
+function diagramVars(variant) {
+    const lc = LAYER_COLORS;
+    const sc = STRUCTURAL;
+    const lv = LEVEL_COLORS[variant];
+    const mat = MATURITY_COLORS[variant];
+    const levelVars = lv.map((c, i) => `--ts-level-${i}:${c}`).join(';') + ';';
+    return [
+        `${CSS_VAR.layerFactor}:${lc.factor[variant]}`,
+        `${CSS_VAR.layerGoal}:${lc.goal[variant]}`,
+        `${CSS_VAR.layerChange}:${lc.change[variant]}`,
+        `${CSS_VAR.layerActivity}:${lc.activity[variant]}`,
+        `${CSS_VAR.nodeStroke}:${sc.nodeStroke[variant]}`,
+        `${CSS_VAR.edgeStroke}:${sc.edgeStroke[variant]}`,
+        `${CSS_VAR.textPrimary}:${sc.textPrimary[variant]}`,
+        `${CSS_VAR.textSecondary}:${sc.textSecondary[variant]}`,
+        `${CSS_VAR.headerText}:${sc.headerText[variant]}`,
+        `${CSS_VAR.maturity1}:${mat[0]}`,
+        `${CSS_VAR.maturity2}:${mat[1]}`,
+        `${CSS_VAR.maturity3}:${mat[2]}`,
+        `${CSS_VAR.maturity4}:${mat[3]}`,
+        `${CSS_VAR.maturity5}:${mat[4]}`,
+    ].join(';') + ';' + levelVars;
+}
+/** CSS for the webview shell (toolbar, canvas). */
+function shellCss() {
+    const cv = CSS_VAR;
+    const t = TYPOGRAPHY;
+    // Full-height flex chain lifted from blocks-preview / activities-preview
+    // into the shared shell (per strategy hub #35). Body is a flex column
+    // sized to the iframe; #canvas takes the remaining height with its own
+    // scroll region. Without this, #canvas was content-height and any
+    // overflow-x scrollbar landed mid-panel with empty space below it — the
+    // "two-page" split flagged on goals, activities, and others.
+    //
+    // html bg + min-height are set per-theme in generateWebviewCss (literal
+    // hex / VS Code var) so they don't depend on `--ts-bg` resolving on html —
+    // CSS custom properties only cascade DOWN, and `--ts-bg` is defined on the
+    // 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;}
+svg{display:block;}`;
+}
+/** CSS for SVG diagram classes — all consume --ts-* variables. */
+function diagramClassCss() {
+    const cv = CSS_VAR;
+    const t = TYPOGRAPHY;
+    const levelCount = LEVEL_COLORS.light.length;
+    const levelRules = Array.from({ length: levelCount }, (_, i) => `.level-${i}{fill:var(--ts-level-${i});}`).join('');
+    // Typography: every <text> in a preview SVG resolves font-family, size and
+    // 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});}
+.compliance-badge-text{fill:var(${cv.textInverse});font-family:${t.fontFamily};font-size:8px;font-weight:700;}`;
+}
+/**
+ * Generates a self-contained CSS block for embedding inside a standalone SVG file.
+ * Defines all --ts-* custom properties on :root so diagram classes resolve correctly
+ * when the SVG is opened outside of VS Code.
+ * vscode-adaptive falls back to the light palette (runtime VS Code variables are unavailable).
+ */
+export function generateSvgEmbedCss(themeId) {
+    const variant = themeId === 'transitrix-dark' ? 'dark' : 'light';
+    const adaptive = themeId === 'transitrix-dark' ? TRANSITRIX_DARK : TRANSITRIX_LIGHT;
+    return `:root{${adaptiveVars(adaptive)}${diagramVars(variant)}}${diagramClassCss()}`;
+}
+/**
+ * Generates complete CSS for a static SVG diagram webview.
+ *
+ * For transitrix/transitrix-dark: sets --ts-* vars with fixed brand colors.
+ * For vscode-adaptive: maps --ts-* vars to --vscode-* CSS vars, with
+ * body.vscode-dark / body.vscode-high-contrast overrides for diagram colors.
+ */
+export function generateWebviewCss(themeId) {
+    const base = getBaseResetCss();
+    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}
+${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}
+${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}
+${classes}`;
+}

package/dist/theme/tokens.d.ts

@@ -0,0 +1,158 @@
+/** Transitrix brand palette. */
+export declare const BRAND: {
+    readonly petrol: "#004d67";
+    readonly amber: "#ffaf00";
+    readonly orange: "#ff4d00";
+};
+/** Functional status colors. */
+export declare const FUNCTIONAL: {
+    readonly success: "#1a7f5c";
+    readonly warning: "#c07030";
+    readonly error: "#b91c1c";
+    readonly info: "#1d6fa8";
+};
+/** Fill colors for FGCA notation columns. */
+export declare const LAYER_COLORS: {
+    readonly factor: {
+        readonly light: "#fef3c7";
+        readonly dark: "#292108";
+        readonly hc: "#f59e0b";
+    };
+    readonly goal: {
+        readonly light: "#e0e7ff";
+        readonly dark: "#1e1b4b";
+        readonly hc: "#818cf8";
+    };
+    readonly change: {
+        readonly light: "#dbeafe";
+        readonly dark: "#0c2042";
+        readonly hc: "#60a5fa";
+    };
+    readonly activity: {
+        readonly light: "#d4edda";
+        readonly dark: "#0a2414";
+        readonly hc: "#4ade80";
+    };
+};
+/** Level fill colors for Goals tree nodes — 8 slots, cycled by level index. */
+export declare const LEVEL_COLORS: {
+    readonly light: readonly ["#dbeafe", "#e0e7ff", "#d4edda", "#fef3c7", "#fce7f3", "#e0f2fe", "#f3e8ff", "#fef9c3"];
+    readonly dark: readonly ["#0c2042", "#1e1b4b", "#0a2414", "#292108", "#2a0c1f", "#071e2e", "#1a0c33", "#2a2107"];
+    readonly hc: readonly ["#60a5fa", "#818cf8", "#4ade80", "#f59e0b", "#f472b6", "#38bdf8", "#a78bfa", "#facc15"];
+};
+/** Structural diagram colors (nodes, edges, text). */
+export declare const STRUCTURAL: {
+    readonly nodeStroke: {
+        readonly light: "#94a3b8";
+        readonly dark: "#475569";
+        readonly hc: "#e2e8f0";
+    };
+    readonly edgeStroke: {
+        readonly light: "#94a3b8";
+        readonly dark: "#475569";
+        readonly hc: "#e2e8f0";
+    };
+    readonly textPrimary: {
+        readonly light: "#1e293b";
+        readonly dark: "#f1f5f9";
+        readonly hc: "#ffffff";
+    };
+    readonly textSecondary: {
+        readonly light: "#64748b";
+        readonly dark: "#94a3b8";
+        readonly hc: "#cbd5e1";
+    };
+    readonly headerText: {
+        readonly light: "#374151";
+        readonly dark: "#e5e7eb";
+        readonly hc: "#ffffff";
+    };
+};
+/**
+ * Maturity scale fill colors — Likert 1..5, danger→success.
+ * Used by Capability Map and any future maturity-based notation.
+ */
+export declare const MATURITY_COLORS: {
+    readonly light: readonly ["#b91c1c", "#d97706", "#ca8a04", "#65a30d", "#15803d"];
+    readonly dark: readonly ["#7f1d1d", "#92400e", "#854d0e", "#3f6212", "#14532d"];
+    readonly hc: readonly ["#f87171", "#fb923c", "#facc15", "#a3e635", "#4ade80"];
+};
+/**
+ * Typography hierarchy. All previews resolve text styling from these roles
+ * — never from inline font-* attributes on individual <text> elements.
+ *
+ * fontFamily threads through the VS Code font setting so the preview reads
+ * as part of the editor; size + weight encode the visual hierarchy.
+ */
+export declare const TYPOGRAPHY: {
+    readonly fontFamily: "var(--vscode-font-family, system-ui, -apple-system, sans-serif)";
+    readonly sizes: {
+        readonly header: 13;
+        readonly primary: 12;
+        readonly secondary: 11;
+        readonly id: 10;
+        readonly pill: 11;
+        readonly caption: 11;
+    };
+    readonly weights: {
+        readonly header: 700;
+        readonly primary: 600;
+        readonly secondary: 400;
+        readonly id: 600;
+        readonly pill: 500;
+        readonly caption: 400;
+    };
+};
+/** Adaptive shell tokens (background, text, border, status). */
+export interface AdaptiveTokens {
+    bg: string;
+    bgSurface: string;
+    bgElevated: string;
+    text: string;
+    textMuted: string;
+    textInverse: string;
+    border: string;
+    divider: string;
+    statusSuccessBg: string;
+    statusSuccessFg: string;
+    statusWarningBg: string;
+    statusWarningFg: string;
+    statusInfoBg: string;
+    statusInfoFg: string;
+    statusErrorBg: string;
+    statusErrorFg: string;
+}
+/** CSS custom property names for --ts-* variables. */
+export declare const CSS_VAR: {
+    readonly bg: "--ts-bg";
+    readonly bgSurface: "--ts-bg-surface";
+    readonly bgElevated: "--ts-bg-elevated";
+    readonly text: "--ts-text";
+    readonly textMuted: "--ts-text-muted";
+    readonly textInverse: "--ts-text-inverse";
+    readonly border: "--ts-border";
+    readonly divider: "--ts-divider";
+    readonly statusSuccessBg: "--ts-status-success-bg";
+    readonly statusSuccessFg: "--ts-status-success-fg";
+    readonly statusWarningBg: "--ts-status-warning-bg";
+    readonly statusWarningFg: "--ts-status-warning-fg";
+    readonly statusInfoBg: "--ts-status-info-bg";
+    readonly statusInfoFg: "--ts-status-info-fg";
+    readonly statusErrorBg: "--ts-status-error-bg";
+    readonly statusErrorFg: "--ts-status-error-fg";
+    readonly layerFactor: "--ts-layer-factor";
+    readonly layerGoal: "--ts-layer-goal";
+    readonly layerChange: "--ts-layer-change";
+    readonly layerActivity: "--ts-layer-activity";
+    readonly nodeStroke: "--ts-node-stroke";
+    readonly edgeStroke: "--ts-edge-stroke";
+    readonly textPrimary: "--ts-text-primary";
+    readonly textSecondary: "--ts-text-secondary";
+    readonly headerText: "--ts-header-text";
+    readonly maturity1: "--ts-maturity-1";
+    readonly maturity2: "--ts-maturity-2";
+    readonly maturity3: "--ts-maturity-3";
+    readonly maturity4: "--ts-maturity-4";
+    readonly maturity5: "--ts-maturity-5";
+};
+export declare function getBaseResetCss(): string;

package/dist/theme/tokens.js

@@ -0,0 +1,105 @@
+/** Transitrix brand palette. */
+export const BRAND = {
+    petrol: '#004d67',
+    amber: '#ffaf00',
+    orange: '#ff4d00',
+};
+/** Functional status colors. */
+export const FUNCTIONAL = {
+    success: '#1a7f5c',
+    warning: '#c07030',
+    error: '#b91c1c',
+    info: '#1d6fa8',
+};
+/** Fill colors for FGCA notation columns. */
+export const LAYER_COLORS = {
+    factor: { light: '#fef3c7', dark: '#292108', hc: '#f59e0b' },
+    goal: { light: '#e0e7ff', dark: '#1e1b4b', hc: '#818cf8' },
+    change: { light: '#dbeafe', dark: '#0c2042', hc: '#60a5fa' },
+    activity: { light: '#d4edda', dark: '#0a2414', hc: '#4ade80' },
+};
+/** Level fill colors for Goals tree nodes — 8 slots, cycled by level index. */
+export const LEVEL_COLORS = {
+    light: ['#dbeafe', '#e0e7ff', '#d4edda', '#fef3c7', '#fce7f3', '#e0f2fe', '#f3e8ff', '#fef9c3'],
+    dark: ['#0c2042', '#1e1b4b', '#0a2414', '#292108', '#2a0c1f', '#071e2e', '#1a0c33', '#2a2107'],
+    hc: ['#60a5fa', '#818cf8', '#4ade80', '#f59e0b', '#f472b6', '#38bdf8', '#a78bfa', '#facc15'],
+};
+/** Structural diagram colors (nodes, edges, text). */
+export const STRUCTURAL = {
+    nodeStroke: { light: '#94a3b8', dark: '#475569', hc: '#e2e8f0' },
+    edgeStroke: { light: '#94a3b8', dark: '#475569', hc: '#e2e8f0' },
+    textPrimary: { light: '#1e293b', dark: '#f1f5f9', hc: '#ffffff' },
+    textSecondary: { light: '#64748b', dark: '#94a3b8', hc: '#cbd5e1' },
+    headerText: { light: '#374151', dark: '#e5e7eb', hc: '#ffffff' },
+};
+/**
+ * Maturity scale fill colors — Likert 1..5, danger→success.
+ * Used by Capability Map and any future maturity-based notation.
+ */
+export const MATURITY_COLORS = {
+    light: ['#b91c1c', '#d97706', '#ca8a04', '#65a30d', '#15803d'],
+    dark: ['#7f1d1d', '#92400e', '#854d0e', '#3f6212', '#14532d'],
+    hc: ['#f87171', '#fb923c', '#facc15', '#a3e635', '#4ade80'],
+};
+/**
+ * Typography hierarchy. All previews resolve text styling from these roles
+ * — never from inline font-* attributes on individual <text> elements.
+ *
+ * fontFamily threads through the VS Code font setting so the preview reads
+ * as part of the editor; size + weight encode the visual hierarchy.
+ */
+export const TYPOGRAPHY = {
+    fontFamily: 'var(--vscode-font-family, system-ui, -apple-system, sans-serif)',
+    sizes: {
+        header: 13, // stage/column headers, diagram captions
+        primary: 12, // primary node/cell labels
+        secondary: 11, // annotations, secondary lines, meta
+        id: 10, // compact id/code chips
+        pill: 11, // pill labels (process-blueprint aspects, badges)
+        caption: 11, // figcaption under the canvas
+    },
+    weights: {
+        header: 700,
+        primary: 600,
+        secondary: 400,
+        id: 600,
+        pill: 500,
+        caption: 400,
+    },
+};
+/** CSS custom property names for --ts-* variables. */
+export const CSS_VAR = {
+    bg: '--ts-bg',
+    bgSurface: '--ts-bg-surface',
+    bgElevated: '--ts-bg-elevated',
+    text: '--ts-text',
+    textMuted: '--ts-text-muted',
+    textInverse: '--ts-text-inverse',
+    border: '--ts-border',
+    divider: '--ts-divider',
+    statusSuccessBg: '--ts-status-success-bg',
+    statusSuccessFg: '--ts-status-success-fg',
+    statusWarningBg: '--ts-status-warning-bg',
+    statusWarningFg: '--ts-status-warning-fg',
+    statusInfoBg: '--ts-status-info-bg',
+    statusInfoFg: '--ts-status-info-fg',
+    statusErrorBg: '--ts-status-error-bg',
+    statusErrorFg: '--ts-status-error-fg',
+    layerFactor: '--ts-layer-factor',
+    layerGoal: '--ts-layer-goal',
+    layerChange: '--ts-layer-change',
+    layerActivity: '--ts-layer-activity',
+    nodeStroke: '--ts-node-stroke',
+    edgeStroke: '--ts-edge-stroke',
+    textPrimary: '--ts-text-primary',
+    textSecondary: '--ts-text-secondary',
+    headerText: '--ts-header-text',
+    maturity1: '--ts-maturity-1',
+    maturity2: '--ts-maturity-2',
+    maturity3: '--ts-maturity-3',
+    maturity4: '--ts-maturity-4',
+    maturity5: '--ts-maturity-5',
+};
+export function getBaseResetCss() {
+    return `*,*:before,*:after{box-sizing:border-box;}html,body{margin:0;padding:0;}`;
+}

package/dist/typed-id.d.ts

@@ -0,0 +1,20 @@
+/** Extracts the TYPE prefix of a typed id, or null when `id` is not a typed
+ *  reference (`PRODUCT-MOBILE-1` → `PRODUCT`, `CAPABILITY-V2` → `CAPABILITY`). */
+export declare function typeOfId(id: unknown): string | null;
+/** True when `id` is a well-formed integer-terminal canonical id. */
+export declare function isCanonicalId(id: unknown): id is string;
+/** True when `id` is a well-formed canonical id whose TYPE is exactly `type`. */
+export declare function isCanonicalIdOfType(id: unknown, type: string): boolean;
+/**
+ * A read-only view of an organisation's admitted canon, used to resolve typed
+ * cross-references during validation. Phase 1 validators accept it optionally:
+ * with no catalogue they perform shape + prefix-TYPE checks only; given one,
+ * they additionally enforce the resolution rules (REQ-002, ASSERT-002/004/005…)
+ * that depend on whether a referenced artefact actually exists.
+ *
+ * The compliance previews (Phase 2+) build a catalogue by scanning the repo.
+ */
+export interface CanonCatalog {
+    /** TYPE of an admitted artefact with this id, or undefined if not admitted. */
+    typeOf(id: string): string | undefined;
+}

package/dist/typed-id.js

@@ -0,0 +1,38 @@
+// Canonical typed-ID grammar + cross-reference resolution catalogue.
+//
+// Every element ID and cross-reference in the Transitrix canon follows the
+// grammar in methodology `notations/IDS_AND_REFERENCES.md` §1:
+//
+//     <TYPE>-[<middle segment(s)>-]<INTEGER>
+//
+//   - TYPE: uppercase, starts with a letter, may contain digits and `_`
+//     (multi-word TYPEs like INTERNAL_STANDARD / PROCESS_BLUEPRINT).
+//   - middle: optional, notation-specific segments.
+//   - INTEGER: terminal positive integer, no leading zeros.
+//
+// CAPABILITY is the one exception (§2): its terminal is a V/H diagram address
+// (CAPABILITY-V1.2) rather than a plain integer. Compliance artefacts only
+// *resolve* capability ids (they never own one), so the catalogue handles
+// them; the strict integer-terminal grammar below is used only for an
+// artefact's own id (REQUIREMENT-… / ASSERTION-…).
+/** TYPE prefix of a typed id — the segment before the first hyphen. */
+const TYPE_PREFIX_RE = /^([A-Z][A-Z0-9_]*)-/;
+/** Full integer-terminal canonical id. Middle segments may be mixed-case
+ *  (real canon ids such as INTERNAL_STANDARD-coding-conventions-1 exist). */
+const CANONICAL_ID_RE = /^[A-Z][A-Z0-9_]*(?:-[A-Za-z0-9]+)*-[1-9][0-9]*$/;
+/** Extracts the TYPE prefix of a typed id, or null when `id` is not a typed
+ *  reference (`PRODUCT-MOBILE-1` → `PRODUCT`, `CAPABILITY-V2` → `CAPABILITY`). */
+export function typeOfId(id) {
+    if (typeof id !== 'string')
+        return null;
+    const m = TYPE_PREFIX_RE.exec(id);
+    return m ? m[1] : null;
+}
+/** True when `id` is a well-formed integer-terminal canonical id. */
+export function isCanonicalId(id) {
+    return typeof id === 'string' && CANONICAL_ID_RE.test(id);
+}
+/** True when `id` is a well-formed canonical id whose TYPE is exactly `type`. */
+export function isCanonicalIdOfType(id, type) {
+    return isCanonicalId(id) && typeOfId(id) === type;
+}

package/dist/validation-types.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Shared validation result shape across every notation module in this
+ * package.
+ *
+ * Before this file existed, each notation declared its own
+ * `ValidationError` / `ValidationWarning` / `ValidationResult` triple inside
+ * its own `validate.ts`. The shapes happened to agree (or almost agree —
+ * some had an optional `path` field, others didn't), but having N parallel
+ * declarations made it easy to accidentally drift one of them, and made the
+ * "what does our validator return?" answer fuzzier than it should be.
+ *
+ * The pre-release code review on 2026-05-21 called this out as a
+ * `should-fix` cross-module concern; this is the canonical shape.
+ *
+ * Notations that historically exported PREFIXED type names — `FGCA…` and
+ * `Activity…` — keep those names as type aliases re-exported from their own
+ * modules, so existing consumers continue to compile.
+ */
+export interface ValidationError {
+    code: string;
+    message: string;
+    /** Optional JSON-path-ish locator inside the source document. */
+    path?: string;
+}
+export interface ValidationWarning {
+    code: string;
+    message: string;
+    path?: string;
+}
+export interface ValidationResult {
+    valid: boolean;
+    errors: ValidationError[];
+    warnings: ValidationWarning[];
+}

package/dist/validation-types.js

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

package/dist/webview/__tests__/entry-notations.test.d.ts

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

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

@@ -0,0 +1,62 @@
+/**
+ * Step 4 parity check: every supported notation must render through the
+ * webview bundle's `render(kind, source)` API from the same example fixtures
+ * the VS Code previews consume — a valid document yields `status: 'ok'` with
+ * non-empty markup, and a malformed document degrades to the error panel
+ * (structured errors, no thrown exception reaching the JVM host).
+ */
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { api, render } from '../entry.js';
+const EXAMPLES = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../../../tests/fixtures/notation-corpus');
+// Mirrors the fixtures used by the VS Code previews. One representative
+// 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: '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' },
+    { kind: 'activity-card', file: 'activity-card/eu-programme.activity-card.transitrix.yaml', markup: 'svg' },
+    { kind: 'process-blueprint', file: 'process-blueprint/order-fulfilment.process-blueprint.transitrix.yaml', markup: 'svg' },
+    { kind: 'blocks', file: 'blocks/architecture.blocks.transitrix.yaml', markup: 'svg' },
+    { kind: 'applications', file: 'applications/portfolio-2026.applications.transitrix.yaml', markup: 'section' },
+    { kind: 'products', file: 'products/portfolio-2026.products.transitrix.yaml', markup: 'section' },
+    { kind: 'process-map', file: 'process-map/enterprise.process-map.transitrix.yaml', markup: 'section' },
+    { kind: 'scenarios', file: 'scenarios/omnichannel-2028.scenarios.transitrix.yaml', markup: 'section' },
+    { kind: 'capability-map', file: 'capability-map/business.capability-map.transitrix.yaml', markup: 'section' },
+];
+describe('webview/entry — Step 4 notation coverage', () => {
+    it('wires every supported kind (no kind left on NOTATION-NOT-WIRED)', () => {
+        // The fixture table must cover the full supported-kinds surface, so a new
+        // kind added to the bundle without a renderer fails this test loudly.
+        const covered = new Set(FIXTURES.map((f) => f.kind));
+        for (const kind of api.supportedKinds) {
+            expect(covered.has(kind)).toBe(true);
+        }
+    });
+    for (const fx of FIXTURES) {
+        it(`renders ${fx.kind} from its example fixture`, () => {
+            const source = readFileSync(path.join(EXAMPLES, fx.file), 'utf8');
+            const r = render(fx.kind, source);
+            expect(r.notation).toBe(fx.kind);
+            expect(r.errors).toEqual([]);
+            expect(r.status).toBe('ok');
+            expect(r.svg.length).toBeGreaterThan(0);
+            expect(r.svg).toContain(fx.markup === 'svg' ? '<svg ' : '<section');
+        });
+    }
+    it('degrades malformed input to the error panel for a diagram notation', () => {
+        const r = render('process-blueprint', 'process_blueprint:\n  stages: "not a list"\n');
+        expect(r.status).toBe('error');
+        expect(r.errors.length).toBeGreaterThan(0);
+        expect(r.svg).toBe('');
+    });
+    it('degrades malformed input to the error panel for a catalogue notation', () => {
+        const r = render('applications', 'applications_catalogue:\n  applications: "not a list"\n');
+        expect(r.status).toBe('error');
+        expect(r.errors.length).toBeGreaterThan(0);
+        expect(r.svg).toBe('');
+    });
+});

package/dist/webview/__tests__/entry.test.d.ts

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