@transitrix/diagrams 1.0.0 → 1.1.0

package/src/theme/tokens.ts

@@ -1,133 +1,135 @@
-/** Transitrix brand palette. */
-export const BRAND = {
-  petrol: '#004d67',
-  amber:  '#ffaf00',
-  orange: '#ff4d00',
-} as const;
-
-/** Functional status colors. */
-export const FUNCTIONAL = {
-  success: '#1a7f5c',
-  warning: '#c07030',
-  error:   '#b91c1c',
-  info:    '#1d6fa8',
-} as const;
-
-/** 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' },
-} as const;
-
-/** 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'],
-} as const;
-
-/** 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' },
-} as const;
-
-/**
- * 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'],
-} as const;
-
-/**
- * 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,
-  },
-} as const;
-
-/** 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 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',
-} as const;
-
-export function getBaseResetCss(): string {
-  return `*,*:before,*:after{box-sizing:border-box;}html,body{margin:0;padding:0;}`;
-}
+/** Transitrix brand palette. */
+export const BRAND = {
+  petrol: '#004d67',
+  amber:  '#ffaf00',
+  orange: '#ff4d00',
+} as const;
+
+/** Functional status colors. */
+export const FUNCTIONAL = {
+  success: '#1a7f5c',
+  warning: '#c07030',
+  error:   '#b91c1c',
+  info:    '#1d6fa8',
+} as const;
+
+/** 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' },
+  activity: { light: '#d4edda', dark: '#0a2414', hc: '#4ade80' },
+} as const;
+
+/** 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'],
+} as const;
+
+/** 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' },
+} as const;
+
+/**
+ * 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'],
+} as const;
+
+/**
+ * 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,
+  },
+} as const;
+
+/** 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 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',
+  layerDriver:      '--ts-layer-driver',
+  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',
+} as const;
+
+export function getBaseResetCss(): string {
+  return `*,*:before,*:after{box-sizing:border-box;}html,body{margin:0;padding:0;}`;
+}

package/src/typed-id.ts

@@ -1,56 +1,56 @@
-// 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: unknown): string | null {
-  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: unknown): id is string {
-  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: unknown, type: string): boolean {
-  return isCanonicalId(id) && typeOfId(id) === type;
-}
-
-/**
- * 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;
-}
+// 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: unknown): string | null {
+  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: unknown): id is string {
+  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: unknown, type: string): boolean {
+  return isCanonicalId(id) && typeOfId(id) === type;
+}
+
+/**
+ * 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/src/validation-types.ts

@@ -1,36 +1,36 @@
-/**
- * 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[];
-}
+/**
+ * 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/src/webview/__tests__/entry-notations.test.ts

@@ -1,77 +1,79 @@
-/**
- * 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, type NotationKind } from '../entry.js';
-
-const EXAMPLES = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../../../tests/fixtures/notation-corpus');
-
-interface Fixture {
-  kind: NotationKind;
-  file: string;
-  /** The markup wrapper the renderer emits: an <svg> diagram or an HTML <section>. */
-  markup: 'svg' | 'section';
-}
-
-// Mirrors the fixtures used by the VS Code previews. One representative
-// example per notation is enough to prove the dispatch + renderer wiring.
-const FIXTURES: Fixture[] = [
-  { 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('');
-  });
-});
+/**
+ * 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, type NotationKind } from '../entry.js';
+
+const EXAMPLES = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../../../tests/fixtures/notation-corpus');
+
+interface Fixture {
+  kind: NotationKind;
+  file: string;
+  /** The markup wrapper the renderer emits: an <svg> diagram or an HTML <section>. */
+  markup: 'svg' | 'section';
+}
+
+// Mirrors the fixtures used by the VS Code previews. One representative
+// example per notation is enough to prove the dispatch + renderer wiring.
+const FIXTURES: Fixture[] = [
+  { 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' },
+  { 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('');
+  });
+});