@transitrix/diagrams 1.10.0 → 1.11.0

package/dist/process-blueprint/validate.js

@@ -1,13 +1,27 @@
 const ID_GRAMMAR_RE = /^[A-Z][A-Z_]*(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const PROCESS_BLUEPRINT_ID_RE = /^PROCESS_BLUEPRINT(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const STAGE_ID_RE = /^STAGE(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
+const PROCESS_ID_RE = /^PROCESS(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const APPLICATION_ID_RE = /^APPLICATION(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const ROLE_ID_RE = /^ROLE(-[A-Z0-9][A-Z0-9_]*)*-\d+$/;
 const ASPECT_CATEGORIES = ['systems', 'actors', 'equipment', 'information_entities'];
+const RESTATED_COLUMN_FIELDS = ['name', 'goal', 'result'];
 function isNonEmptyString(v) {
     return typeof v === 'string' && v.trim().length > 0;
 }
-export function validateProcessBlueprint(input) {
+function isProcessColumnId(id) {
+    return PROCESS_ID_RE.test(id);
+}
+function isStageColumnId(id) {
+    return STAGE_ID_RE.test(id);
+}
+function isColumnId(id) {
+    return isStageColumnId(id) || isProcessColumnId(id);
+}
+function fieldIsPresent(record, key) {
+    return Object.prototype.hasOwnProperty.call(record, key);
+}
+export function validateProcessBlueprint(input, options = {}) {
     const errors = [];
     const warnings = [];
     if (!input || typeof input !== 'object') {
@@ -47,6 +61,7 @@ export function validateProcessBlueprint(input) {
         return { valid: false, errors, warnings };
     }
     const stageIds = new Set();
+    const processColumnIds = [];
     for (let i = 0; i < stagesRaw.length; i++) {
         const s = stagesRaw[i];
         const path = `stages[${i}]`;
@@ -55,31 +70,68 @@ export function validateProcessBlueprint(input) {
             continue;
         }
         if (!isNonEmptyString(s['id'])) {
-            errors.push({ code: 'BP-005', message: `${path}.id is required` });
+            errors.push({ code: 'BP-006', message: `${path}.id is required` });
+            continue;
+        }
+        const sid = s['id'].trim();
+        if (stageIds.has(sid)) {
+            errors.push({ code: 'BP-006', message: `Duplicate stage id: "${sid}"` });
         }
         else {
-            const sid = s['id'].trim();
-            if (stageIds.has(sid)) {
-                errors.push({ code: 'BP-006', message: `Duplicate stage id: "${sid}"` });
-            }
-            else {
-                stageIds.add(sid);
+            stageIds.add(sid);
+        }
+        if (!isColumnId(sid)) {
+            errors.push({
+                code: 'BP-006',
+                message: `${path}.id "${sid}" must match STAGE-[<middle>-]<INTEGER> or PROCESS-[<middle>-]<INTEGER>`,
+            });
+            continue;
+        }
+        if (isProcessColumnId(sid)) {
+            processColumnIds.push(sid);
+            for (const field of RESTATED_COLUMN_FIELDS) {
+                if (fieldIsPresent(s, field)) {
+                    errors.push({
+                        code: 'BP-013',
+                        message: `${path}.${field} must not be restated on a PROCESS-… column — derive it from the process element`,
+                    });
+                }
             }
-            if (!STAGE_ID_RE.test(sid)) {
-                errors.push({
-                    code: 'BP-006',
-                    message: `${path}.id "${sid}" must match STAGE-[<middle>-]<INTEGER>`,
-                });
+            if (options.catalog) {
+                const resolved = options.catalog.typeOf(sid);
+                if (resolved !== 'PROCESS') {
+                    errors.push({
+                        code: 'BP-012',
+                        message: `${path}.id "${sid}" must resolve to an admitted PROCESS element`,
+                    });
+                }
             }
         }
-        if (!isNonEmptyString(s['name'])) {
-            errors.push({ code: 'BP-005', message: `${path}.name is required` });
-        }
-        if (!isNonEmptyString(s['goal'])) {
-            errors.push({ code: 'BP-005', message: `${path}.goal is required` });
+        else {
+            if (!isNonEmptyString(s['name'])) {
+                errors.push({ code: 'BP-005', message: `${path}.name is required` });
+            }
+            if (!isNonEmptyString(s['goal'])) {
+                errors.push({ code: 'BP-005', message: `${path}.goal is required` });
+            }
+            if (!isNonEmptyString(s['result'])) {
+                errors.push({ code: 'BP-005', message: `${path}.result is required` });
+            }
         }
-        if (!isNonEmptyString(s['result'])) {
-            errors.push({ code: 'BP-005', message: `${path}.result is required` });
+    }
+    const parentProcess = isNonEmptyString(pb['process']) ? pb['process'].trim() : undefined;
+    if (parentProcess && options.processParentEdges && processColumnIds.length > 0) {
+        const linked = new Set(options.processParentEdges
+            .filter((e) => e.to === parentProcess)
+            .map((e) => e.from));
+        for (const child of processColumnIds) {
+            if (!linked.has(child)) {
+                warnings.push({
+                    code: 'BP-014',
+                    message: `Column "${child}" is a PROCESS-… id and process_blueprint.process is "${parentProcess}", ` +
+                        `but no in-effect process_parent REL links that column to that parent`,
+                });
+            }
         }
     }
     const usedStageIds = new Set();
@@ -105,7 +157,7 @@ export function validateProcessBlueprint(input) {
             if (!Array.isArray(entryStages) || entryStages.length === 0) {
                 errors.push({
                     code: 'BP-007',
-                    message: `${path}.stages must be a non-empty array of STAGE-… ids`,
+                    message: `${path}.stages must be a non-empty array of declared column ids`,
                 });
             }
             else {

package/dist/repo-validate/check-process-parent.d.ts

@@ -0,0 +1,8 @@
+import type { ProcessParentEdge } from '../process-blueprint/validate.js';
+import type { RepoFinding, RepoModelInput } from './types.js';
+/** Inclusive window: in effect at `asOf` iff valid_from ≤ asOf and (valid_to is null or asOf ≤ valid_to). */
+export declare function relationInEffectAt(data: Record<string, unknown>, asOf: string): boolean;
+export declare function todayIsoDate(now?: Date): string;
+/** In-effect `process_parent` edges (child → parent) among loaded REL files. */
+export declare function collectInEffectProcessParentEdges(input: RepoModelInput, asOf?: string): ProcessParentEdge[];
+export declare function checkProcessParentSemantics(input: RepoModelInput, findings: RepoFinding[]): void;

package/dist/repo-validate/check-process-parent.js

@@ -0,0 +1,172 @@
+// process_parent relation checks — 17-relations.md §3 / §5 (REL-007, REL-008)
+// and endpoint TYPE (PROCESS → PROCESS), plus the in-effect edge collector
+// that process-blueprint BP-014 consumes.
+//
+// REL-007 is single-file (from === to). REL-008 is cross-cutting over the
+// admitted process_parent graph and is a warning, parallel to REL-006.
+import { docId, endpointId } from './validate-repo.js';
+const PScope = 'repo';
+function isProcessNotation(n) {
+    return n === 'process';
+}
+function isoDate(value) {
+    return typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value) ? value.slice(0, 10) : undefined;
+}
+/** Inclusive window: in effect at `asOf` iff valid_from ≤ asOf and (valid_to is null or asOf ≤ valid_to). */
+export function relationInEffectAt(data, asOf) {
+    const from = isoDate(data['valid_from']);
+    if (from && from > asOf)
+        return false;
+    const to = data['valid_to'];
+    if (to === null || to === undefined)
+        return true;
+    const toDate = isoDate(to);
+    if (!toDate)
+        return true;
+    return asOf <= toDate;
+}
+export function todayIsoDate(now = new Date()) {
+    return now.toISOString().slice(0, 10);
+}
+/** In-effect `process_parent` edges (child → parent) among loaded REL files. */
+export function collectInEffectProcessParentEdges(input, asOf = todayIsoDate()) {
+    const edges = [];
+    for (const doc of input.relations) {
+        if (!doc.data)
+            continue;
+        if (doc.data['type'] !== 'process_parent')
+            continue;
+        if (!relationInEffectAt(doc.data, asOf))
+            continue;
+        const fromId = endpointId(doc.data['from']) ?? endpointId(doc.data['source']);
+        const toId = endpointId(doc.data['to']) ?? endpointId(doc.data['target']);
+        if (!fromId || !toId)
+            continue;
+        edges.push({ from: fromId, to: toId });
+    }
+    return edges;
+}
+function processParentRels(input) {
+    const out = [];
+    for (const doc of input.relations) {
+        if (!doc.data)
+            continue;
+        if (doc.data['type'] !== 'process_parent')
+            continue;
+        const fromId = endpointId(doc.data['from']) ?? endpointId(doc.data['source']);
+        const toId = endpointId(doc.data['to']) ?? endpointId(doc.data['target']);
+        if (!fromId || !toId)
+            continue;
+        out.push({ relId: docId(doc) ?? '', fromId, toId });
+    }
+    return out;
+}
+/** REL-007 — process_parent self-reference. */
+function checkSelfReference(rels, findings) {
+    for (const rel of rels) {
+        if (rel.fromId === rel.toId) {
+            findings.push({
+                scope: PScope,
+                id: rel.relId,
+                ruleId: 'REL-007',
+                message: `REL-007: process_parent relation '${rel.relId}' has from equal to to ('${rel.fromId}').`,
+            });
+        }
+    }
+}
+/** REL-008 — cycle in the process_parent graph (warning). */
+function checkCycle(rels, findings) {
+    const childrenOf = new Map();
+    const relByChildParent = new Map();
+    const nodes = new Set();
+    for (const rel of rels) {
+        if (rel.fromId === rel.toId)
+            continue;
+        nodes.add(rel.fromId);
+        nodes.add(rel.toId);
+        const list = childrenOf.get(rel.fromId);
+        if (list)
+            list.push(rel.toId);
+        else
+            childrenOf.set(rel.fromId, [rel.toId]);
+        relByChildParent.set(`${rel.fromId}\0${rel.toId}`, rel.relId);
+    }
+    const UNVISITED = 0;
+    const VISITING = 1;
+    const DONE = 2;
+    const state = new Map();
+    let hit;
+    function walk(id) {
+        const s = state.get(id) ?? UNVISITED;
+        if (s === DONE)
+            return false;
+        if (s === VISITING) {
+            hit = id;
+            return true;
+        }
+        state.set(id, VISITING);
+        for (const parent of childrenOf.get(id) ?? []) {
+            if (nodes.has(parent) && walk(parent))
+                return true;
+        }
+        state.set(id, DONE);
+        return false;
+    }
+    for (const id of nodes) {
+        if (walk(id))
+            break;
+    }
+    if (!hit)
+        return;
+    const relId = [...relByChildParent.entries()].find(([key]) => key.startsWith(`${hit}\0`))?.[1] ?? hit;
+    findings.push({
+        scope: PScope,
+        id: relId,
+        ruleId: 'REL-008',
+        severity: 'warning',
+        message: `REL-008: process_parent graph contains a cycle involving '${hit}'.`,
+    });
+}
+/**
+ * Endpoint TYPE for process_parent: both ends must be PROCESS when they
+ * resolve. Unknown endpoints stay with referential integrity; this pass only
+ * fires when the element exists and is the wrong notation.
+ */
+function checkEndpointTypes(input, rels, findings) {
+    const elementById = new Map();
+    for (const doc of input.elements) {
+        const id = docId(doc);
+        if (id && doc.data)
+            elementById.set(id, doc.data);
+    }
+    for (const rel of rels) {
+        const from = elementById.get(rel.fromId);
+        if (from && !isProcessNotation(from['notation'])) {
+            findings.push({
+                scope: PScope,
+                id: rel.relId,
+                ruleId: 'REL-002',
+                message: `Layer-semantics: '${rel.relId}' type 'process_parent' requires from to be ` +
+                    `PROCESS; got notation='${from['notation']}'.`,
+            });
+        }
+        const to = elementById.get(rel.toId);
+        if (to && !isProcessNotation(to['notation'])) {
+            findings.push({
+                scope: PScope,
+                id: rel.relId,
+                ruleId: 'REL-002',
+                message: `Layer-semantics: '${rel.relId}' type 'process_parent' requires to to be ` +
+                    `PROCESS; got notation='${to['notation']}'.`,
+            });
+        }
+    }
+}
+export function checkProcessParentSemantics(input, findings) {
+    const rels = processParentRels(input);
+    if (rels.length === 0)
+        return;
+    checkSelfReference(rels, findings);
+    checkCycle(rels, findings);
+    checkEndpointTypes(input, rels, findings);
+}

package/dist/repo-validate/index.d.ts

@@ -1,3 +1,4 @@
 export { validateRepoModel } from './validate-repo.js';
 export { resolveRepoModel } from './resolve-model.js';
+export { checkProcessParentSemantics, collectInEffectProcessParentEdges, todayIsoDate, } from './check-process-parent.js';
 export type { RepoDoc, RepoFinding, RepoModelInput, ResolvedElementRecord, ResolvedRelationRecord, ResolvedRepoModel } from './types.js';

package/dist/repo-validate/index.js

@@ -1,2 +1,3 @@
 export { validateRepoModel } from './validate-repo.js';
 export { resolveRepoModel } from './resolve-model.js';
+export { checkProcessParentSemantics, collectInEffectProcessParentEdges, todayIsoDate, } from './check-process-parent.js';

package/dist/repo-validate/validate-repo.js

@@ -30,6 +30,7 @@ import { checkStrategyChainSemantics } from './check-strategy-chain.js';
 import { checkElementHygiene } from './check-element-hygiene.js';
 import { checkVersionedAttributes } from './check-versioned-attributes.js';
 import { checkCandidateFields } from './check-candidate-fields.js';
+import { checkProcessParentSemantics } from './check-process-parent.js';
 const PScope = 'repo';
 /** Statuses that, per lint.py's policy check, require an owner. */
 const OWNER_REQUIRED_STATUSES = new Set(['Active', 'Production']);
@@ -154,6 +155,7 @@ function checkReferentialIntegrity(input, findings) {
  *   realizes        — BUSINESS_SERVICE → CAPABILITY           (25-business-services.md)
  *   hosts           — NODE → TECHNOLOGY_SERVICE               (25-nodes.md / 26-technology-services.md)
  *   uses            — APPLICATION → TECHNOLOGY_SERVICE        (26-technology-services.md)
+ *   process_parent  — PROCESS → PROCESS (17-relations.md §3; REL-007/008)
  *
  * Implemented element checks:
  *   TSVC-003        — TECHNOLOGY_SERVICE.node must resolve to NODE notation
@@ -407,6 +409,7 @@ export function validateRepoModel(input) {
     checkAtomicity(input, findings);
     checkReferentialIntegrity(input, findings);
     checkLayerSemantics(input, findings);
+    checkProcessParentSemantics(input, findings);
     checkPolicy(input, findings);
     // Phase 7 — strategy-chain semantic rules ported from DSM's Go Validate*
     // functions (GOALS-010, ACT-006..009, FGCA-008..011).

package/dist/webview/render-fgca.js

@@ -67,7 +67,7 @@ export function renderFgcaBody(columns, nodes, edges, curvature, entryCurvature,
 }
 export function renderFgcaSvg(doc, options = {}) {
     const { variant = 'dgca', title = '', curvature = DEFAULT_EDGE_CURVATURE, entryCurvature, nodeSizePreset = 'normal', layoutOptions, } = options;
-    const hideChanges = variant === 'dga';
+    const hideChanges = variant === 'dga' || doc.hideChanges === true;
     const nodeSize = resolveDgcaNodeSize(parseNodeSizePreset(nodeSizePreset));
     const { nodes, edges, columns, width, height } = layoutFGCAPreview(doc, {
         hideChanges,

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

@@ -64,13 +64,31 @@ export interface ProcessDiagramLayout {
     flows: ProcessFlow[];
     associations: ProcessAssociation[];
 }
+export interface BpmnTypography {
+    taskFontPx: number;
+    headerFontPx: number;
+    labelFontPx: number;
+    taskChars: number;
+    taskLineH: number;
+    labelChars: number;
+    labelLineH: number;
+    headerCharW: number;
+}
+/** Interactive-preview / default-export type sizes. */
+export declare const DEFAULT_BPMN_TYPOGRAPHY: BpmnTypography;
+/** Presentation-export type sizes (20 px floor, wrap tuned to default node boxes). */
+export declare const PRESENTATION_BPMN_TYPOGRAPHY: BpmnTypography;
 export interface RenderProcessOptions {
     /** Raw SVG injected after `<style>` — a title line or full title block. */
     title?: string;
     /** Extra vertical space (px) reserved above the pool for a title block. */
     topInset?: number;
+    /** Label metrics. Omit for the interactive-preview defaults. */
+    typography?: BpmnTypography;
 }
-export declare const BPMN_PROCESS_CSS = "\n.bpmn-pool { fill: var(--ts-bg-surface,#f8fafc); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-pool-name { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }\n.bpmn-lane { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }\n.bpmn-lane-header { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }\n.bpmn-pool-label { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 11px; font-weight: 700; }\n.bpmn-lane-label { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 11px; font-weight: 600; }\n.bpmn-task { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-task-name { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 11px; text-anchor: middle; }\n.bpmn-event { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); }\n.bpmn-event-start { stroke-width: 1.5; }\n.bpmn-event-end { stroke-width: 4; }\n.bpmn-event-label { fill: var(--ts-text-secondary,#516970); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 10px; text-anchor: middle; }\n.bpmn-gateway { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-gateway-marker { stroke: var(--ts-node-stroke,#004d67); stroke-width: 2.5; stroke-linecap: round; fill: none; }\n.bpmn-gateway-label { fill: var(--ts-text-secondary,#516970); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 10px; text-anchor: middle; }\n.bpmn-seq-flow { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; }\n.bpmn-default-mark { stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; }\n.bpmn-assoc { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1; stroke-dasharray: 4 2; }\n.bpmn-data-obj { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }\n.bpmn-data-obj-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }\n.bpmn-event-intermediate { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }\n.bpmn-event-icon { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }\n";
+export declare function bpmnProcessCss(t?: BpmnTypography): string;
+/** Default-preview CSS (11 px / 10 px). Presentation export builds its own via `bpmnProcessCss`. */
+export declare const BPMN_PROCESS_CSS: string;
 /**
  * Canonical body emitter, shared by every host (VS Code, JCEF, static export).
  *

package/dist/webview/render-process.js

@@ -14,6 +14,28 @@
  */
 import { generateSvgEmbedCss } from '../theme/index.js';
 import { escXml } from './render-util.js';
+/** Interactive-preview / default-export type sizes. */
+export const DEFAULT_BPMN_TYPOGRAPHY = {
+    taskFontPx: 11,
+    headerFontPx: 11,
+    labelFontPx: 10,
+    taskChars: 14,
+    taskLineH: 14,
+    labelChars: 18,
+    labelLineH: 13,
+    headerCharW: 6.5,
+};
+/** Presentation-export type sizes (20 px floor, wrap tuned to default node boxes). */
+export const PRESENTATION_BPMN_TYPOGRAPHY = {
+    taskFontPx: 20,
+    headerFontPx: 20,
+    labelFontPx: 20,
+    taskChars: 9,
+    taskLineH: 22,
+    labelChars: 14,
+    labelLineH: 22,
+    headerCharW: 11.5,
+};
 // ---------------------------------------------------------------------------
 // Constants — match DEFAULT_LAYOUT_DIAGRAM_OPTIONS in src/layout-options.ts
 // ---------------------------------------------------------------------------
@@ -21,43 +43,49 @@ import { escXml } from './render-util.js';
 const LANE_LABEL_BAND = 44;
 /** End margin (px) along the header height axis for rotated pool/lane captions. */
 const HEADER_LABEL_AXIS_PAD = 32;
-/** Estimated horizontal advance (px) per character at the header label font size. */
-const HEADER_LABEL_CHAR_W = 6.5;
-/** Maximum characters per wrapped line inside a task box. */
-const TASK_CHARS = 14;
-/** Line height for wrapped task-name text (px). */
-const TASK_LINE_H = 14;
-/** Maximum characters per line for below-element labels (events, gateways). */
-const LABEL_CHARS = 18;
-/** Line height for multi-line below-element labels (px). */
-const LABEL_LINE_H = 13;
+/** Active wrap/font metrics for the current render call (sync, restored after). */
+let typo = DEFAULT_BPMN_TYPOGRAPHY;
+function runWithTypography(t, fn) {
+    const prev = typo;
+    typo = t;
+    try {
+        return fn();
+    }
+    finally {
+        typo = prev;
+    }
+}
 // ---------------------------------------------------------------------------
 // BPMN-specific CSS — no font-style:italic per CLAUDE.md design rule
 // ---------------------------------------------------------------------------
-export const BPMN_PROCESS_CSS = `
+export function bpmnProcessCss(t = DEFAULT_BPMN_TYPOGRAPHY) {
+    return `
 .bpmn-pool { fill: var(--ts-bg-surface,#f8fafc); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }
 .bpmn-pool-name { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }
 .bpmn-lane { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }
 .bpmn-lane-header { fill: var(--ts-bg-elevated,#f1f5f9); stroke: var(--ts-node-stroke,#004d67); stroke-width: 0.75; }
-.bpmn-pool-label { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 11px; font-weight: 700; }
-.bpmn-lane-label { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 11px; font-weight: 600; }
+.bpmn-pool-label { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: ${t.headerFontPx}px; font-weight: 700; }
+.bpmn-lane-label { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: ${t.headerFontPx}px; font-weight: 600; }
 .bpmn-task { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }
-.bpmn-task-name { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 11px; text-anchor: middle; }
+.bpmn-task-name { fill: var(--ts-text-primary,#0d2b35); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: ${t.taskFontPx}px; text-anchor: middle; }
 .bpmn-event { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); }
 .bpmn-event-start { stroke-width: 1.5; }
 .bpmn-event-end { stroke-width: 4; }
-.bpmn-event-label { fill: var(--ts-text-secondary,#516970); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 10px; text-anchor: middle; }
+.bpmn-event-label { fill: var(--ts-text-secondary,#516970); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: ${t.labelFontPx}px; text-anchor: middle; }
 .bpmn-gateway { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; }
 .bpmn-gateway-marker { stroke: var(--ts-node-stroke,#004d67); stroke-width: 2.5; stroke-linecap: round; fill: none; }
-.bpmn-gateway-label { fill: var(--ts-text-secondary,#516970); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: 10px; text-anchor: middle; }
+.bpmn-gateway-label { fill: var(--ts-text-secondary,#516970); font-family: var(--vscode-font-family, system-ui, -apple-system, sans-serif); font-size: ${t.labelFontPx}px; text-anchor: middle; }
 .bpmn-seq-flow { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; }
 .bpmn-default-mark { stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; }
 .bpmn-assoc { fill: none; stroke: var(--ts-edge-stroke,#004d67); stroke-width: 1; stroke-dasharray: 4 2; }
 .bpmn-data-obj { fill: var(--ts-bg,#ffffff); stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }
-.bpmn-data-obj-label { fill: var(--ts-text-secondary,#516970); font-size: 10px; text-anchor: middle; }
+.bpmn-data-obj-label { fill: var(--ts-text-secondary,#516970); font-size: ${t.labelFontPx}px; text-anchor: middle; }
 .bpmn-event-intermediate { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1; }
 .bpmn-event-icon { fill: none; stroke: var(--ts-node-stroke,#004d67); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
 `;
+}
+/** Default-preview CSS (11 px / 10 px). Presentation export builds its own via `bpmnProcessCss`. */
+export const BPMN_PROCESS_CSS = bpmnProcessCss(DEFAULT_BPMN_TYPOGRAPHY);
 // ---------------------------------------------------------------------------
 // Internal helpers
 // ---------------------------------------------------------------------------
@@ -73,28 +101,29 @@ function wordTruncate(text, maxChars) {
     return (lastSpace > maxChars / 2 ? cut.slice(0, lastSpace) : cut) + '…';
 }
 function fitRotatedHeaderText(name, spanPx) {
-    const maxChars = Math.max(4, Math.floor(spanPx / HEADER_LABEL_CHAR_W));
+    const maxChars = Math.max(4, Math.floor(spanPx / typo.headerCharW));
     return wordTruncate(name, maxChars);
 }
 function wrapTaskName(name) {
     if (!name)
         return [];
+    const limit = typo.taskChars;
     const words = name.split(/\s+/);
     const lines = [];
     let cur = '';
     for (const w of words) {
-        const token = w.length > TASK_CHARS ? w.slice(0, TASK_CHARS - 1) + '…' : w;
+        const token = w.length > limit ? w.slice(0, limit - 1) + '…' : w;
         if (!cur) {
             cur = token;
         }
-        else if (cur.length + 1 + token.length <= TASK_CHARS) {
+        else if (cur.length + 1 + token.length <= limit) {
             cur += ' ' + token;
         }
         else {
             lines.push(cur);
             if (lines.length === 3) {
-                if (lines[2].length > TASK_CHARS - 1)
-                    lines[2] = lines[2].slice(0, TASK_CHARS - 1) + '…';
+                if (lines[2].length > limit - 1)
+                    lines[2] = lines[2].slice(0, limit - 1) + '…';
                 return lines;
             }
             cur = token;
@@ -103,28 +132,29 @@ function wrapTaskName(name) {
     if (cur && lines.length < 3)
         lines.push(cur);
     if (lines.length === 0)
-        lines.push(name.slice(0, TASK_CHARS));
+        lines.push(name.slice(0, limit));
     return lines;
 }
 function taskNameSvg(name, cx, cy) {
     if (!name)
         return '';
     const lines = wrapTaskName(name);
-    const totalH = lines.length * TASK_LINE_H;
-    const startY = cy - totalH / 2 + TASK_LINE_H * 0.8;
+    const totalH = lines.length * typo.taskLineH;
+    const startY = cy - totalH / 2 + typo.taskLineH * 0.8;
     const tspans = lines
-        .map((ln, i) => `<tspan x="${r(cx)}" y="${r(startY + i * TASK_LINE_H)}">${escXml(ln)}</tspan>`)
+        .map((ln, i) => `<tspan x="${r(cx)}" y="${r(startY + i * typo.taskLineH)}">${escXml(ln)}</tspan>`)
         .join('');
     return `<text class="bpmn-task-name">${tspans}</text>`;
 }
 function wrapBelowLabel(name) {
+    const limit = typo.labelChars;
     const words = name.split(/\s+/).filter(Boolean);
     const allLines = [];
     let cur = '';
     for (const word of words) {
-        const tok = word.length > LABEL_CHARS ? word.slice(0, LABEL_CHARS - 1) + '…' : word;
+        const tok = word.length > limit ? word.slice(0, limit - 1) + '…' : word;
         const test = cur ? `${cur} ${tok}` : tok;
-        if (test.length <= LABEL_CHARS) {
+        if (test.length <= limit) {
             cur = test;
         }
         else {
@@ -136,12 +166,12 @@ function wrapBelowLabel(name) {
     if (cur)
         allLines.push(cur);
     if (allLines.length === 0)
-        return [name.slice(0, LABEL_CHARS)];
+        return [name.slice(0, limit)];
     if (allLines.length <= 3)
         return allLines;
     const lines = allLines.slice(0, 3);
     const last = lines[2];
-    lines[2] = last.length + 1 <= LABEL_CHARS ? last + '…' : last.slice(0, LABEL_CHARS - 1) + '…';
+    lines[2] = last.length + 1 <= limit ? last + '…' : last.slice(0, limit - 1) + '…';
     return lines;
 }
 function belowLabelSvg(name, cls, cx, belowY, minX = 0) {
@@ -155,7 +185,7 @@ function belowLabelSvg(name, cls, cx, belowY, minX = 0) {
         return `<text class="${cls}" x="${r(textX)}" y="${startY}">${escXml(lines[0])}</text>`;
     }
     const tspans = lines
-        .map((ln, i) => `<tspan x="${r(textX)}" dy="${i === 0 ? 0 : LABEL_LINE_H}">${escXml(ln)}</tspan>`)
+        .map((ln, i) => `<tspan x="${r(textX)}" dy="${i === 0 ? 0 : typo.labelLineH}">${escXml(ln)}</tspan>`)
         .join('');
     return `<text class="${cls}" x="${r(textX)}" y="${startY}">${tspans}</text>`;
 }
@@ -378,15 +408,18 @@ export function renderProcessBody(layout, ox, oy) {
  */
 export function renderProcessLayoutSvg(layout, options = {}) {
     const { title = '', topInset = title ? 32 : 0 } = options;
-    const pb = layout.poolBounds;
-    const PAD = 16;
-    const svgW = r(pb.x + pb.width + PAD);
-    const svgH = r(pb.y + pb.height + PAD + topInset);
-    const embedCss = generateSvgEmbedCss('transitrix') + BPMN_PROCESS_CSS;
-    const body = renderProcessBody(layout, 0, topInset);
-    return (`<svg xmlns="http://www.w3.org/2000/svg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">\n` +
-        `<style>${embedCss}</style>\n` +
-        (title ? `${title}\n` : '') +
-        `${body}\n` +
-        `</svg>`);
+    const t = options.typography ?? DEFAULT_BPMN_TYPOGRAPHY;
+    return runWithTypography(t, () => {
+        const pb = layout.poolBounds;
+        const PAD = 16;
+        const svgW = r(pb.x + pb.width + PAD);
+        const svgH = r(pb.y + pb.height + PAD + topInset);
+        const embedCss = generateSvgEmbedCss('transitrix') + bpmnProcessCss(t);
+        const body = renderProcessBody(layout, 0, topInset);
+        return (`<svg xmlns="http://www.w3.org/2000/svg" width="${svgW}" height="${svgH}" viewBox="0 0 ${svgW} ${svgH}">\n` +
+            `<style>${embedCss}</style>\n` +
+            (title ? `${title}\n` : '') +
+            `${body}\n` +
+            `</svg>`);
+    });
 }

package/package.json

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