schematex 0.9.0 → 0.9.2

package/dist/{chunk-LM5X7ZNR.js → chunk-TP7LQ5PF.js}

@@ -1,21 +1,21 @@
-import { orgchart } from './chunk-E3CAJGJM.js';
-import { circuit } from './chunk-T3GV7OVF.js';
-import { blockdiagram } from './chunk-DX44TBFZ.js';
-import { ladder } from './chunk-JGCKW5RS.js';
-import { sld } from './chunk-KF3DFASA.js';
-import { entity } from './chunk-GDZNTILD.js';
-import { fishbone } from './chunk-YTGOLTLJ.js';
-import { venn } from './chunk-UOM3EDE6.js';
-import { flowchart, layoutFlowchart } from './chunk-HPEAE3JM.js';
-import { genogram } from './chunk-6NUAGU6O.js';
-import { ecomap } from './chunk-K2D6VFLP.js';
-import { pedigree } from './chunk-JN6FHUC6.js';
+import { orgchart } from './chunk-HJA7MIMV.js';
+import { circuit } from './chunk-MERU76LW.js';
+import { blockdiagram } from './chunk-IQLZUCWI.js';
+import { ladder } from './chunk-VY4JOTM2.js';
+import { sld } from './chunk-VMUNKEB2.js';
+import { entity } from './chunk-TMAOPJCT.js';
+import { fishbone } from './chunk-KR7PPCC4.js';
+import { venn } from './chunk-TWTUIUNK.js';
+import { flowchart, layoutFlowchart } from './chunk-7Z2GDS4G.js';
+import { genogram } from './chunk-2RFFCZ3I.js';
+import { ecomap, estimateTextWidth } from './chunk-VWIKDJNV.js';
+import { pedigree } from './chunk-7SVB3XA7.js';
 import { parseFrontmatter } from './chunk-2KTQ75LN.js';
-import { phylo } from './chunk-E7LXMEKX.js';
-import { sociogram } from './chunk-ABCMTAOZ.js';
-import { timing } from './chunk-IXRPRMHI.js';
-import { logic } from './chunk-CDK7KDIW.js';
-import { resolveBaseTheme, resolveTimelineTheme, cssCustomProperties, resolvePetriTheme, resolveNetworkTheme, resolveUmlClassTheme, DEFAULT_FONT_FAMILY, FONT_SIZE, resolveReliabilityTheme, STROKE_WIDTH, resolveBowtieTheme, resolveMindmapTheme } from './chunk-UK6HF6PE.js';
+import { phylo } from './chunk-VZVREOTM.js';
+import { sociogram } from './chunk-56DSMSXK.js';
+import { timing } from './chunk-MTIZIHWE.js';
+import { logic } from './chunk-JR6JNQEZ.js';
+import { resolveBaseTheme, resolveTimelineTheme, resolveStateTheme, cssCustomProperties, resolvePetriTheme, resolveNetworkTheme, resolveUmlClassTheme, DEFAULT_FONT_FAMILY, FONT_SIZE, resolveReliabilityTheme, STROKE_WIDTH, resolveBowtieTheme, resolveMindmapTheme, resolveMatrixTheme, resolveBpmnTheme } from './chunk-TYEQC7PV.js';
 import { QUOTE_PAIRS, stripQuotes, isOpenQuote, extractQuotedString, matchQuotedTitle } from './chunk-TO6PNBT3.js';
 import { el, escapeXml, group, rect, text, line, path, circle, polygon, title, desc, svgRoot, defs, multilineText } from './chunk-SYYBKDL7.js';
 
@@ -1253,7 +1253,7 @@ var CLASS_PALETTE = [
 function buildCss2(t) {
   return `
 .lt-dtree { font-family: system-ui, -apple-system, sans-serif; }
-.lt-dtree-title { font: 500 16px sans-serif; fill: ${t.text}; }
+.lt-dtree-title { font: 700 16px sans-serif; fill: ${t.text}; }
 .lt-dtree-edge { fill: none; stroke: ${t.stroke}; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
 .lt-dtree-edge-optimal { fill: none; stroke: ${t.positive}; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
 .lt-dtree-edge-leader { fill: none; stroke: ${t.stroke}; stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.55; }
@@ -1585,7 +1585,7 @@ function renderDecisionTree(ast, config) {
   children.push(desc(`Decision tree (${ast.mode} mode) with ${layout.nodes.length} nodes and ${layout.edges.length} edges`));
   children.push(el("style", {}, buildCss2(t)));
   if (ast.title) {
-    children.push(text({ x: 20, y: 24, class: "lt-dtree-title" }, ast.title));
+    children.push(text({ x: width / 2, y: 24, class: "lt-dtree-title", "text-anchor": "middle" }, ast.title));
   }
   const inner = [];
   for (const e of layout.edges) {
@@ -4124,40 +4124,42 @@ function shiftPathY(d, dy) {
 
 // src/diagrams/state/renderer.ts
 var ARROW_MARKER_ID = "lt-state-arrow";
-var STYLE = `
-.lt-state-body { fill: #ffffff; stroke: #2a2a2a; stroke-width: 1.6; }
-.lt-state-name { font: 600 12px system-ui, sans-serif; fill: #1a1a1a; }
-.lt-state-div  { stroke: #2a2a2a; stroke-width: 1; }
-.lt-state-activity { font: 11px ui-monospace, monospace; fill: #444; }
+function buildStyle(t) {
+  return `
+.lt-state-body { fill: ${t.stateFill}; stroke: ${t.stateStroke}; stroke-width: 1.6; }
+.lt-state-name { font: 600 12px system-ui, sans-serif; fill: ${t.stateText}; }
+.lt-state-div  { stroke: ${t.stateStroke}; stroke-width: 1; }
+.lt-state-activity { font: 11px ui-monospace, monospace; fill: ${t.activityText}; }
 
-.lt-composite-body { fill: #fafafa; stroke: #2a2a2a; stroke-width: 1.6; }
-.lt-composite-title { font: 600 12px system-ui, sans-serif; fill: #1a1a1a; }
-.lt-composite-titlebar { fill: #f0f0f0; stroke: #2a2a2a; stroke-width: 1; }
-.lt-region-div { stroke: #888; stroke-width: 1; stroke-dasharray: 6 4; }
+.lt-composite-body { fill: ${t.compositeFill}; stroke: ${t.stateStroke}; stroke-width: 1.6; }
+.lt-composite-title { font: 600 12px system-ui, sans-serif; fill: ${t.stateText}; }
+.lt-composite-titlebar { fill: ${t.compositeTitlebar}; stroke: ${t.stateStroke}; stroke-width: 1; }
+.lt-region-div { stroke: ${t.regionDiv}; stroke-width: 1; stroke-dasharray: 6 4; }
 
-.lt-ps-initial { fill: #1a1a1a; }
-.lt-ps-final-outer { fill: #ffffff; stroke: #1a1a1a; stroke-width: 1.6; }
-.lt-ps-final-inner { fill: #1a1a1a; }
-.lt-ps-choice { fill: #ffffff; stroke: #1a1a1a; stroke-width: 1.6; }
-.lt-ps-junction { fill: #1a1a1a; }
-.lt-ps-bar { fill: #1a1a1a; }
-.lt-ps-history-body { fill: #ffffff; stroke: #1a1a1a; stroke-width: 1.6; }
-.lt-ps-history-text { font: 600 11px serif; fill: #1a1a1a; }
-.lt-ps-terminate { stroke: #1a1a1a; stroke-width: 2; }
-.lt-ps-entrypoint { fill: #ffffff; stroke: #1a1a1a; stroke-width: 1.6; }
-.lt-ps-exitpoint  { fill: #ffffff; stroke: #1a1a1a; stroke-width: 1.6; }
+.lt-ps-initial { fill: ${t.psInk}; }
+.lt-ps-final-outer { fill: ${t.stateFill}; stroke: ${t.psInk}; stroke-width: 1.6; }
+.lt-ps-final-inner { fill: ${t.psInk}; }
+.lt-ps-choice { fill: ${t.stateFill}; stroke: ${t.psInk}; stroke-width: 1.6; }
+.lt-ps-junction { fill: ${t.psInk}; }
+.lt-ps-bar { fill: ${t.psInk}; }
+.lt-ps-history-body { fill: ${t.stateFill}; stroke: ${t.psInk}; stroke-width: 1.6; }
+.lt-ps-history-text { font: 600 11px serif; fill: ${t.psInk}; }
+.lt-ps-terminate { stroke: ${t.psInk}; stroke-width: 2; }
+.lt-ps-entrypoint { fill: ${t.stateFill}; stroke: ${t.psInk}; stroke-width: 1.6; }
+.lt-ps-exitpoint  { fill: ${t.stateFill}; stroke: ${t.psInk}; stroke-width: 1.6; }
 
-.lt-transition { stroke: #2a2a2a; stroke-width: 1.4; fill: none; }
-.lt-transition-label { font: 11px system-ui, sans-serif; fill: #1a1a1a; }
-.lt-transition-label-bg { fill: #ffffff; opacity: 0.92; }
+.lt-transition { stroke: ${t.transitionStroke}; stroke-width: 1.4; fill: none; }
+.lt-transition-label { font: 11px system-ui, sans-serif; fill: ${t.transitionLabel}; }
+.lt-transition-label-bg { fill: ${t.labelBg}; opacity: 0.92; }
 
-.lt-note-body { fill: #fff8c5; stroke: #b79400; stroke-width: 1; }
-.lt-note-text { font: 11px system-ui, sans-serif; fill: #2a2a2a; }
-.lt-note-leader { stroke: #b79400; stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
+.lt-note-body { fill: ${t.noteFill}; stroke: ${t.noteStroke}; stroke-width: 1; }
+.lt-note-text { font: 11px system-ui, sans-serif; fill: ${t.noteText}; }
+.lt-note-leader { stroke: ${t.noteStroke}; stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
 
-.lt-title { font: 600 14px system-ui, sans-serif; fill: #1a1a1a; }
+.lt-title { font: 700 16px system-ui, sans-serif; fill: ${t.stateText}; }
 `;
-function renderArrowMarker() {
+}
+function renderArrowMarker(t) {
   return el(
     "marker",
     {
@@ -4169,7 +4171,7 @@ function renderArrowMarker() {
       orient: "auto",
       markerUnits: "strokeWidth"
     },
-    [polygon({ points: "0,0 10,3 0,6", fill: "#2a2a2a" })]
+    [polygon({ points: "0,0 10,3 0,6", fill: t.transitionStroke })]
   );
 }
 function activityText2(a) {
@@ -4400,12 +4402,12 @@ function renderNote(n) {
   }
   return group({ class: "lt-note", "data-target": n.note.target }, parts);
 }
-function renderStateDiagram(ast, _config) {
+function renderStateDiagram(ast, config) {
   const layout = layoutStateDiagram(ast);
-  return renderLayout(layout);
+  return renderLayout(layout, resolveStateTheme(config?.theme ?? "default"));
 }
-function renderLayout(layout) {
-  const titleNode = layout.title ? text({ x: 16, y: 22, class: "lt-title" }, layout.title) : "";
+function renderLayout(layout, t) {
+  const titleNode = layout.title ? text({ x: layout.width / 2, y: 22, class: "lt-title", "text-anchor": "middle" }, layout.title) : "";
   return svgRoot(
     {
       width: layout.width,
@@ -4417,7 +4419,7 @@ function renderLayout(layout) {
     [
       el("title", {}, escapeXml(`State Diagram${layout.title ? " \u2014 " + layout.title : ""}`)),
       el("desc", {}, "UML 2.5 / Harel statechart rendered by Schematex"),
-      defs([renderArrowMarker(), el("style", {}, STYLE)]),
+      defs([renderArrowMarker(t), el("style", {}, buildStyle(t))]),
       titleNode,
       // Composite clusters first so simple-state bodies sit on top.
       group({ class: "lt-clusters" }, layout.clusters.map(renderComposite)),
@@ -4437,7 +4439,7 @@ var state = {
   parse: parseStateDiagram,
   render(text2, config) {
     const ast = parseStateDiagram(text2);
-    return renderStateDiagram(ast);
+    return renderStateDiagram(ast, config);
   }
 };
 
@@ -5787,7 +5789,7 @@ function resolveAnchor(id, port, fallback, equipById, instById) {
 }
 
 // src/diagrams/pid/renderer.ts
-var STYLE2 = `
+var STYLE = `
 .lt-pid-equip { fill: #ffffff; stroke: #1d1d1d; stroke-width: 1.6; }
 .lt-pid-equip-tag { font: 600 11px system-ui, sans-serif; fill: #1d1d1d; }
 .lt-pid-tray-line { stroke: #555; stroke-width: 1; fill: none; }
@@ -5813,7 +5815,7 @@ var STYLE2 = `
 .lt-pid-line-tag-bg { fill: #ffffff; stroke: #1d1d1d; stroke-width: 0.6; }
 .lt-pid-line-tag-text { font: 9px ui-monospace, monospace; fill: #1d1d1d; }
 
-.lt-pid-title { font: 600 14px system-ui, sans-serif; fill: #1d1d1d; }
+.lt-pid-title { font: 700 16px system-ui, sans-serif; fill: #1d1d1d; }
 
 .lt-pid-unknown-box { fill: none; stroke: #c0392b; stroke-width: 1.6; stroke-dasharray: 5 3; }
 .lt-pid-unknown-mark { font: 700 18px system-ui, sans-serif; fill: #c0392b; }
@@ -5988,7 +5990,7 @@ function renderLayout2(layout) {
       }
     }
   }
-  const titleNode = layout.title ? text({ x: 16, y: 22, class: "lt-pid-title" }, layout.title) : "";
+  const titleNode = layout.title ? text({ x: layout.width / 2, y: 22, class: "lt-pid-title", "text-anchor": "middle" }, layout.title) : "";
   return svgRoot(
     {
       width: layout.width,
@@ -6014,7 +6016,7 @@ function renderLayout2(layout) {
           },
           [polygon({ points: "0,0 10,3 0,6", fill: "#1d1d1d" })]
         ),
-        el("style", {}, STYLE2)
+        el("style", {}, STYLE)
       ]),
       titleNode,
       // Z-order: process pipes behind equipment; signal lines + instruments above.
@@ -7386,7 +7388,7 @@ function headerHeightFor(lineCount) {
 function buildCss3(t) {
   return `
 .prisma { font-family: system-ui, -apple-system, sans-serif; }
-.prisma-title { font: 600 17px sans-serif; fill: ${t.text}; }
+.prisma-title { font: 700 16px sans-serif; fill: ${t.text}; }
 .prisma-subtitle { font: 400 12px sans-serif; fill: ${t.textMuted}; }
 
 .prisma-stage { stroke-width: 1.1; stroke: #90a4ae; }
@@ -8269,7 +8271,7 @@ function ellipsePerimeterPoint(cx, cy, rx, ry, tx, ty) {
 function isWideGlyph(cp) {
   return cp >= 12288 && cp <= 40959 || cp >= 44032 && cp <= 55203 || cp >= 65280 && cp <= 65519;
 }
-function estimateTextWidth(s, charW) {
+function estimateTextWidth2(s, charW) {
   let w = 0;
   for (const ch of s) {
     w += isWideGlyph(ch.codePointAt(0) ?? 0) ? charW * 1.7 : charW;
@@ -8278,10 +8280,10 @@ function estimateTextWidth(s, charW) {
 }
 function sizeEllipse(uc) {
   const C2 = USECASE_CONST;
-  const nameW = estimateTextWidth(uc.name, C2.CHAR_W_NAME);
+  const nameW = estimateTextWidth2(uc.name, C2.CHAR_W_NAME);
   let widest = nameW;
   if (uc.stereotype) {
-    widest = Math.max(widest, estimateTextWidth(`\xAB${uc.stereotype}\xBB`, C2.CHAR_W_EXT));
+    widest = Math.max(widest, estimateTextWidth2(`\xAB${uc.stereotype}\xBB`, C2.CHAR_W_EXT));
   }
   let stack = 0;
   if (uc.stereotype) stack += C2.STEREO_LH;
@@ -8291,9 +8293,9 @@ function sizeEllipse(uc) {
     stack += 8;
     stack += C2.EXTPOINT_LH;
     stack += uc.extensionPoints.length * C2.EXTPOINT_LH;
-    widest = Math.max(widest, estimateTextWidth(C2.EXT_HEADER, C2.CHAR_W_EXT));
+    widest = Math.max(widest, estimateTextWidth2(C2.EXT_HEADER, C2.CHAR_W_EXT));
     for (const ep of uc.extensionPoints) {
-      widest = Math.max(widest, estimateTextWidth(ep, C2.CHAR_W_EXT) + 16);
+      widest = Math.max(widest, estimateTextWidth2(ep, C2.CHAR_W_EXT) + 16);
     }
   }
   const rx = Math.max(C2.MIN_RX, widest / 2 * Math.SQRT2 + C2.ELLIPSE_PAD_X);
@@ -8549,7 +8551,7 @@ function layoutUsecase(ast) {
     let right = b.x + b.width;
     const isRect = b.actor.kind === "external" || b.actor.kind === "system";
     if (!isRect) {
-      const labelW = estimateTextWidth(b.actor.name, 6.4);
+      const labelW = estimateTextWidth2(b.actor.name, 6.4);
       const cx = b.x + b.width / 2;
       left = Math.min(left, cx - labelW / 2);
       right = Math.max(right, cx + labelW / 2);
@@ -13514,6 +13516,7 @@ var DET = "sx-net-detail";
 var GLY = "sx-net-glyph";
 var GLYL = "sx-net-glyph-line";
 var ITX = "sx-net-icontext";
+var ITAG = "sx-net-icontag";
 var CLOUD = "sx-net-cloud-body";
 var CTX = "sx-net-cloudtext";
 var r2 = (n) => Math.round(n * 100) / 100;
@@ -13557,7 +13560,7 @@ function switchBox(b, glyph) {
 }
 function poeSwitch(b) {
   const cx = b.x + b.w / 2;
-  return group({}, [switchBox(b, "straight"), text({ class: ITX, x: r2(cx), y: r2(b.y + b.h * 0.78 + 8), "text-anchor": "middle" }, "PoE")]);
+  return group({}, [switchBox(b, "straight"), text({ class: ITAG, x: r2(cx), y: r2(b.y + b.h * 0.78 + 8), "text-anchor": "middle" }, "PoE")]);
 }
 function firewall(b) {
   const cx = b.x + b.w / 2, cy = b.y + b.h / 2;
@@ -13612,7 +13615,7 @@ function serverFarm(b, d) {
   for (let i = 2; i >= 0; i--) {
     parts.push(server({ x: b.x + i * off, y: b.y - i * off * 0.5, w: b.w - 2 * off, h: b.h - off }));
   }
-  if (d.count) parts.push(text({ class: ITX, x: r2(b.x + b.w - 6), y: r2(b.y + b.h - 2), "text-anchor": "end" }, `\xD7${d.count}`));
+  if (d.count) parts.push(text({ class: ITAG, x: r2(b.x + b.w - 6), y: r2(b.y + b.h - 2), "text-anchor": "end" }, `\xD7${d.count}`));
   return group({}, parts);
 }
 function pc(b) {
@@ -13750,9 +13753,9 @@ function drawDeviceIcon(d, b) {
     case "router":
       return router(b);
     case "gateway":
-      return group({}, [router(b), text({ class: ITX, x: r2(b.x + b.w / 2), y: r2(b.y + b.h - 1), "text-anchor": "middle" }, "GW")]);
+      return group({}, [router(b), text({ class: ITAG, x: r2(b.x + b.w / 2), y: r2(b.y + b.h - 1), "text-anchor": "middle" }, "GW")]);
     case "vpngw":
-      return group({}, [router(b), text({ class: ITX, x: r2(b.x + b.w / 2), y: r2(b.y + b.h - 1), "text-anchor": "middle" }, "VPN")]);
+      return group({}, [router(b), text({ class: ITAG, x: r2(b.x + b.w / 2), y: r2(b.y + b.h - 1), "text-anchor": "middle" }, "VPN")]);
     case "switch":
       return switchBox(b, "straight");
     case "l3switch":
@@ -14232,16 +14235,54 @@ function layoutNetwork2(ast) {
       depth: gb.depth
     });
   }
+  const labelClearsDevices = (x, y, halfW) => {
+    const margin = 6;
+    for (const b of boxes) {
+      const e = effBox(b);
+      if (x + halfW >= e.left - margin && x - halfW <= e.right + margin && y + 5 >= e.top - margin && y - 5 <= e.bottom + margin) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const placedLabels = [];
+  const labelClearsPlaced = (x, y) => placedLabels.every((p) => Math.abs(p.x - x) > 90 || Math.abs(p.y - y) > 16);
   const linkGeoms = links.map((link) => {
     const a = boxById.get(link.from);
     const b = boxById.get(link.to);
     const p1 = edgePoint(a, b.cx, b.cy);
     const p2 = edgePoint(b, a.cx, a.cy);
+    const hasAnnotation = Boolean(
+      link.label || link.speed || link.mode || link.vlans && link.vlans.length
+    );
+    let labelT = 0.5;
+    if (hasAnnotation) {
+      const annLen = (link.mode ? link.mode.length + 3 : 0) + (link.vlans && link.vlans.length ? 6 + link.vlans.join(",").length + 3 : 0) + (link.speed ? link.speed.length + 3 : 0) + (link.label ? link.label.length : 0);
+      const halfW = annLen * 5.4 / 2;
+      const candidates = [0.5, 0.38, 0.62, 0.28, 0.72, 0.2, 0.8, 0.14, 0.86];
+      const at = (t) => ({
+        x: p1.x + (p2.x - p1.x) * t,
+        y: p1.y + (p2.y - p1.y) * t
+      });
+      const strict = candidates.find((t) => {
+        const p = at(t);
+        return labelClearsDevices(p.x, p.y, halfW) && labelClearsPlaced(p.x, p.y);
+      });
+      const relaxed = strict ?? candidates.find((t) => {
+        const p = at(t);
+        return labelClearsDevices(p.x, p.y, halfW);
+      });
+      labelT = relaxed ?? 0.5;
+      placedLabels.push({
+        x: p1.x + (p2.x - p1.x) * labelT,
+        y: p1.y + (p2.y - p1.y) * labelT
+      });
+    }
     return {
       link,
       points: [p1, p2],
-      labelX: (p1.x + p2.x) / 2,
-      labelY: (p1.y + p2.y) / 2
+      labelX: p1.x + (p2.x - p1.x) * labelT,
+      labelY: p1.y + (p2.y - p1.y) * labelT
     };
   });
   const width = maxX - minX + 2 * NET_CONST.PAD;
@@ -14269,11 +14310,12 @@ function buildCss8(t) {
 .sx-net-glyph { fill: ${t.deviceAccent}; stroke: none; }
 .sx-net-glyph-line { fill: none; stroke: ${t.deviceAccent}; stroke-width: 1.4; }
 .sx-net-icontext { font: 700 8px sans-serif; fill: ${t.deviceAccent}; }
+.sx-net-icontag { font: 700 8px sans-serif; fill: ${t.subLabel}; paint-order: stroke; stroke: ${t.bg}; stroke-width: 2.5px; stroke-linejoin: round; }
 .sx-net-cloud-body { fill: ${t.cloudFill}; stroke: ${t.cloudStroke}; stroke-width: 2; }
 .sx-net-cloudtext { font: 600 13px sans-serif; fill: ${t.text}; }
 .sx-net-bus { stroke: ${t.deviceStroke}; stroke-width: 4; stroke-linecap: round; }
-.sx-net-label { font: 12px sans-serif; fill: ${t.label}; }
-.sx-net-sublabel { font: 10px sans-serif; fill: ${t.subLabel}; }
+.sx-net-label { font: 12px sans-serif; fill: ${t.label}; paint-order: stroke; stroke: ${t.bg}; stroke-width: 3px; stroke-linejoin: round; }
+.sx-net-sublabel { font: 10px sans-serif; fill: ${t.subLabel}; paint-order: stroke; stroke: ${t.bg}; stroke-width: 3px; stroke-linejoin: round; }
 .sx-net-link { fill: none; stroke-width: 2; }
 .sx-net-link-wireless, .sx-net-link-vpn { stroke-dasharray: 5 4; }
 .sx-net-link-lag { stroke-width: 3; }
@@ -16208,7 +16250,7 @@ function renderUmlClassLayout(layout, config) {
 .sx-umlclass-edge-label { fill: ${theme.edgeLabel}; font-size: ${FONT_SIZE.small + 1}px; font-weight: 500; }
 .sx-umlclass-edge-name { fill: ${theme.edgeLabel}; font-size: ${FONT_SIZE.label}px; font-style: italic; }
 .sx-umlclass-edge-name-halo { fill: ${theme.bg}; stroke: ${theme.bg}; stroke-width: ${UMLCLASS_CONST.EDGE_LABEL_HALO}; stroke-linejoin: round; }
-.sx-umlclass-title { fill: ${theme.nameText}; font-size: ${FONT_SIZE.title}px; font-weight: 600; }
+.sx-umlclass-title { fill: ${theme.nameText}; font-size: ${FONT_SIZE.title}px; font-weight: 700; }
 .sx-umlclass-package { fill: ${theme.packageFill}; stroke: ${theme.packageStroke}; stroke-width: 1; }
 .sx-umlclass-package-label { fill: ${theme.packageLabel}; font-size: ${FONT_SIZE.label}px; font-weight: 600; }
 `.trim()
@@ -17592,7 +17634,7 @@ function renderFaultTreeLayout(layout, config) {
   const inner = [];
   if (ast.title) {
     inner.push(
-      text({ x: FAULTTREE_CONST.CANVAS_PAD, y: 22, class: "sx-ft-title", "font-family": fontFamily }, ast.title)
+      text({ x: layout.width / 2, y: 22, class: "sx-ft-title", "font-family": fontFamily, "text-anchor": "middle" }, ast.title)
     );
   }
   for (const box of layout.cutSetBoxes) {
@@ -18289,7 +18331,7 @@ function renderBowtieLayout(layout, config) {
   ];
   const inner = [];
   if (ast.title) {
-    inner.push(text({ x: BOWTIE_CONST.PAGE_PAD, y: BOWTIE_CONST.PAGE_PAD + 6, class: "sx-bowtie-title", "font-family": fontFamily }, ast.title));
+    inner.push(text({ x: layout.width / 2, y: BOWTIE_CONST.PAGE_PAD + 6, class: "sx-bowtie-title", "font-family": fontFamily, "text-anchor": "middle" }, ast.title));
   }
   if (layout.hazardTie) {
     inner.push(line({ x1: layout.hazardTie.x, y1: layout.hazardTie.y1, x2: layout.hazardTie.x, y2: layout.hazardTie.y2, class: "sx-bowtie-line" }));
@@ -18917,7 +18959,7 @@ function renderEventTreeLayout(layout, config) {
   ];
   const inner = [];
   if (ast.title) {
-    inner.push(text({ x: EVENTTREE_CONST.CANVAS_PAD, y: EVENTTREE_CONST.CANVAS_PAD + 4, class: "sx-et-title", "font-family": fontFamily }, ast.title));
+    inner.push(text({ x: layout.width / 2, y: EVENTTREE_CONST.CANVAS_PAD + 4, class: "sx-et-title", "font-family": fontFamily, "text-anchor": "middle" }, ast.title));
   }
   for (const h of layout.headers) {
     inner.push(
@@ -20111,7 +20153,7 @@ function renderHeaderBlock(layout) {
   const x0 = FMEA_CONST.CANVAS_PAD;
   let y = FMEA_CONST.CANVAS_PAD + 14;
   if (ast.title) {
-    out.push(text({ x: x0, y, class: "sx-fmea-title" }, ast.title));
+    out.push(text({ x: layout.width / 2, y, class: "sx-fmea-title", "text-anchor": "middle" }, ast.title));
     y += FMEA_CONST.TITLE_H - 8;
   }
   const metaEntries = Object.entries(ast.metadata);
@@ -20894,7 +20936,7 @@ function renderCausalLoopLayout(layout, config) {
   if (ast.title) {
     inner.push(
       text(
-        { x: CAUSALLOOP_CONST.CANVAS_PAD, y: 20, class: "sx-cld-title", "font-family": fontFamily },
+        { x: layout.width / 2, y: 20, class: "sx-cld-title", "font-family": fontFamily, "text-anchor": "middle" },
         ast.title
       )
     );
@@ -22721,7 +22763,7 @@ function renderGitGraphLayout(layout, config) {
   const width = layout.width + pad * 2;
   const height = layout.height + pad * 2;
   const a11y = ast.title ?? "Git commit graph";
-  const styleBlock = buildStyle(pal, ast.showBranches);
+  const styleBlock = buildStyle2(pal, ast.showBranches);
   const children = [
     title(a11y),
     desc(summarise6(layout)),
@@ -22937,7 +22979,7 @@ function renderCommitLabel(id, x, y, rotate, fontFamily) {
     id
   );
 }
-function buildStyle(pal, showBranches) {
+function buildStyle2(pal, showBranches) {
   const laneStyle = showBranches ? `
 .sx-gg-lane { stroke-width: ${STROKE_WIDTH.thick}; stroke-linecap: round; opacity: 0.9; }
 .sx-gg-pill { stroke: none; }
@@ -23559,7 +23601,8 @@ function layoutEpc(ast) {
     const shift = (maxCrossExtent - rankWidths[r6]) / 2 + EPC_CONST.CANVAS_PAD;
     for (const id of ranks[r6]) crossPos.set(id, crossPos.get(id) + shift);
   }
-  const crossExtent = maxCrossExtent + EPC_CONST.CANVAS_PAD * 2 + EPC_CONST.BACK_MARGIN;
+  const backMargin = backSet.size > 0 ? EPC_CONST.BACK_MARGIN : 0;
+  const crossExtent = maxCrossExtent + EPC_CONST.CANVAS_PAD * 2 + backMargin;
   const flaggedIds = /* @__PURE__ */ new Set();
   for (const v of analysis.violations) {
     if (v.severity === "error") for (const id of v.nodes) flaggedIds.add(id);
@@ -23840,7 +23883,7 @@ function renderEpcLayout(layout, config) {
   ];
   const inner = [];
   if (ast.title) {
-    inner.push(text({ x: EPC_CONST.CANVAS_PAD, y: 22, class: "sx-epc-title", "font-family": fontFamily }, ast.title));
+    inner.push(text({ x: layout.width / 2, y: 22, class: "sx-epc-title", "font-family": fontFamily, "text-anchor": "middle" }, ast.title));
   }
   for (const e of layout.edges) inner.push(renderEdge6(e));
   for (const n of layout.nodes) inner.push(renderNode3(n));
@@ -24578,7 +24621,7 @@ function renderIdef0Layout(layout, config) {
   const inner = [];
   if (ast.title) {
     inner.push(
-      text({ x: IDEF0_CONST.MARGIN, y: 24, class: "sx-idef0-title", "font-family": fontFamily }, ast.title)
+      text({ x: layout.width / 2, y: 24, class: "sx-idef0-title", "font-family": fontFamily, "text-anchor": "middle" }, ast.title)
     );
   }
   for (const a of layout.arrows) {
@@ -25399,7 +25442,7 @@ function renderThreatModelLayout(layout, config) {
   if (layout.ast.title) {
     inner.push(
       text(
-        { x: TM_CONST.PAD, y: 24, class: "sx-tm-title", "font-family": fontFamily },
+        { x: layout.width / 2, y: 24, class: "sx-tm-title", "font-family": fontFamily, "text-anchor": "middle" },
         layout.ast.title
       )
     );
@@ -28317,7 +28360,8 @@ function layoutSipoc(ast) {
 var QFD_CELL = 46;
 var QFD_WHAT_LABEL_W = 190;
 var QFD_WEIGHT_W = 46;
-var QFD_HOW_LABEL_H = 130;
+var QFD_HOW_FONT = 11.5;
+var QFD_HOW_ANGLE_SIN = Math.sin(60 * Math.PI / 180);
 var QFD_FOOTER_H = 64;
 var QFD_PAD = 24;
 function layoutQfd(ast) {
@@ -28329,7 +28373,11 @@ function layoutQfd(ast) {
   const roofH = Math.ceil(cellW / 2 * cols) + 8;
   const whatLabelW = QFD_WHAT_LABEL_W;
   const weightW = QFD_WEIGHT_W;
-  const howLabelH = QFD_HOW_LABEL_H;
+  const maxHowW = Math.max(
+    0,
+    ...(ast.qfd?.hows ?? []).map((h) => estimateTextWidth(h.label, QFD_HOW_FONT))
+  );
+  const howLabelH = Math.max(48, Math.min(220, Math.ceil(maxHowW * QFD_HOW_ANGLE_SIN) + 26));
   const footerH = QFD_FOOTER_H;
   const gridX0 = QFD_PAD + whatLabelW + weightW;
   const gridY0 = QFD_PAD + titleH + roofH + howLabelH;
@@ -28466,76 +28514,78 @@ var HEAT_RAMP = [
   "#ef4444",
   "#b91c1c"
 ];
-var CSS2 = `
+function buildMatrixCss(t) {
+  return `
 .sx-matrix { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
-.sx-matrix-title { font: 600 16px sans-serif; fill: #111; }
-.sx-matrix-grid { stroke: #e5e7eb; stroke-width: 1; fill: none; }
-.sx-matrix-mid { stroke: #9ca3af; stroke-width: 1.2; stroke-dasharray: 4 3; fill: none; }
-.sx-matrix-plot-border { stroke: #374151; stroke-width: 1.2; fill: none; }
-.sx-matrix-axis-label { font: 500 12px sans-serif; fill: #374151; }
-.sx-matrix-axis-end { font: 500 11px sans-serif; fill: #6b7280; }
-.sx-matrix-quad-annot { font: 600 13px sans-serif; fill: #475569; opacity: 0.75; }
-.sx-matrix-quad-desc { font: 400 10.5px sans-serif; fill: #64748b; opacity: 0.85; }
-.sx-matrix-corr-header { font: 600 11.5px sans-serif; fill: #1f2937; text-anchor: middle; }
-.sx-matrix-corr-rowlabel { font: 500 11.5px sans-serif; fill: #1f2937; text-anchor: end; dominant-baseline: central; }
-.sx-matrix-corr-margin { font: 500 11px sans-serif; fill: #374151; text-anchor: middle; dominant-baseline: central; }
-.sx-matrix-corr-margin-best { font: 700 11.5px sans-serif; fill: #111; text-anchor: middle; dominant-baseline: central; }
-.sx-matrix-corr-grid { stroke: #d1d5db; stroke-width: 0.8; fill: none; }
-.sx-matrix-corr-rowbg-a { fill: #f0fdf4; }
-.sx-matrix-corr-rowbg-b { fill: #fff; }
-.sx-matrix-cell-label { font: 500 12px sans-serif; fill: #1f2937; text-anchor: middle; }
-.sx-matrix-cell-title { font: 600 13px sans-serif; fill: #111827; }
-.sx-matrix-cell-subtitle { font: 400 11px sans-serif; fill: #6b7280; }
-.sx-matrix-cell-item { font: 500 12px sans-serif; fill: #1f2937; }
-.sx-matrix-cell-value { font: 600 18px sans-serif; fill: #111; text-anchor: middle; }
+.sx-matrix-title { font: 700 16px sans-serif; fill: ${t.inkStrong}; }
+.sx-matrix-grid { stroke: ${t.gridFaint}; stroke-width: 1; fill: none; }
+.sx-matrix-mid { stroke: ${t.gridStrong}; stroke-width: 1.2; stroke-dasharray: 4 3; fill: none; }
+.sx-matrix-plot-border { stroke: ${t.inkMuted}; stroke-width: 1.2; fill: none; }
+.sx-matrix-axis-label { font: 500 12px sans-serif; fill: ${t.inkMuted}; }
+.sx-matrix-axis-end { font: 500 11px sans-serif; fill: ${t.inkFaint}; }
+.sx-matrix-quad-annot { font: 600 13px sans-serif; fill: ${t.inkMuted}; opacity: 0.75; }
+.sx-matrix-quad-desc { font: 400 10.5px sans-serif; fill: ${t.inkFaint}; opacity: 0.85; }
+.sx-matrix-corr-header { font: 600 11.5px sans-serif; fill: ${t.ink}; text-anchor: middle; }
+.sx-matrix-corr-rowlabel { font: 500 11.5px sans-serif; fill: ${t.ink}; text-anchor: end; dominant-baseline: central; }
+.sx-matrix-corr-margin { font: 500 11px sans-serif; fill: ${t.inkMuted}; text-anchor: middle; dominant-baseline: central; }
+.sx-matrix-corr-margin-best { font: 700 11.5px sans-serif; fill: ${t.inkStrong}; text-anchor: middle; dominant-baseline: central; }
+.sx-matrix-corr-grid { stroke: ${t.grid}; stroke-width: 0.8; fill: none; }
+.sx-matrix-corr-rowbg-a { fill: ${t.surfaceTint}; }
+.sx-matrix-corr-rowbg-b { fill: ${t.surface}; }
+.sx-matrix-cell-label { font: 500 12px sans-serif; fill: ${t.ink}; text-anchor: middle; }
+.sx-matrix-cell-title { font: 600 13px sans-serif; fill: ${t.inkStrong}; }
+.sx-matrix-cell-subtitle { font: 400 11px sans-serif; fill: ${t.inkFaint}; }
+.sx-matrix-cell-item { font: 500 12px sans-serif; fill: ${t.ink}; }
+.sx-matrix-cell-value { font: 600 18px sans-serif; fill: ${t.inkStrong}; text-anchor: middle; }
 .sx-matrix-bubble { stroke-width: 1.5; }
-.sx-matrix-label { font: 500 11px sans-serif; fill: #111827; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
-.sx-matrix-leader { stroke: #94a3b8; stroke-width: 0.6; opacity: 0.7; fill: none; }
-.sx-matrix-legend-text { font: 500 11px sans-serif; fill: #374151; }
-.sx-matrix-offchart { fill: #ea580c; }
-.sx-sipoc-header { font: 700 13px sans-serif; fill: #fff; text-anchor: middle; dominant-baseline: central; }
-.sx-sipoc-headbox { stroke: #fff; stroke-width: 1; }
-.sx-sipoc-cell { fill: #fff; stroke: #cbd5e1; stroke-width: 1; }
-.sx-sipoc-cell-alt { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1; }
-.sx-sipoc-process { fill: #eff6ff; stroke: #cbd5e1; stroke-width: 1; }
-.sx-sipoc-item { font: 500 12px sans-serif; fill: #1f2937; text-anchor: middle; dominant-baseline: central; }
-.sx-sipoc-step { font: 600 12px sans-serif; fill: #1e3a8a; text-anchor: middle; dominant-baseline: central; }
-.sx-qfd-grid { stroke: #cbd5e1; stroke-width: 1; fill: none; }
-.sx-qfd-cellbg { fill: #fff; }
-.sx-qfd-cellbg-alt { fill: #f8fafc; }
-.sx-qfd-what { font: 500 12px sans-serif; fill: #1f2937; text-anchor: end; dominant-baseline: central; }
-.sx-qfd-how { font: 500 11.5px sans-serif; fill: #1f2937; }
-.sx-qfd-weight { font: 600 12px sans-serif; fill: #111; text-anchor: middle; dominant-baseline: central; }
-.sx-qfd-weight-head { font: 600 10px sans-serif; fill: #475569; text-anchor: middle; dominant-baseline: central; }
-.sx-qfd-rel-strong { fill: #2563eb; }
-.sx-qfd-rel-medium { fill: #93c5fd; stroke: #2563eb; stroke-width: 1.4; }
-.sx-qfd-rel-weak { fill: none; stroke: #2563eb; stroke-width: 1.4; }
-.sx-qfd-roof-cell { fill: #f8fafc; stroke: #94a3b8; stroke-width: 0.8; }
-.sx-qfd-roof-cell-filled { fill: #eef2ff; stroke: #64748b; stroke-width: 0.9; }
+.sx-matrix-label { font: 500 11px sans-serif; fill: ${t.inkStrong}; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
+.sx-matrix-leader { stroke: ${t.gridStrong}; stroke-width: 0.6; opacity: 0.7; fill: none; }
+.sx-matrix-legend-text { font: 500 11px sans-serif; fill: ${t.inkMuted}; }
+.sx-matrix-offchart { fill: ${t.warnDeep}; }
+.sx-sipoc-header { font: 700 13px sans-serif; fill: ${t.onHeader}; text-anchor: middle; dominant-baseline: central; }
+.sx-sipoc-headbox { stroke: ${t.surface}; stroke-width: 1; }
+.sx-sipoc-cell { fill: ${t.surface}; stroke: ${t.gridMid}; stroke-width: 1; }
+.sx-sipoc-cell-alt { fill: ${t.surfaceAlt}; stroke: ${t.gridMid}; stroke-width: 1; }
+.sx-sipoc-process { fill: ${t.accentTint}; stroke: ${t.gridMid}; stroke-width: 1; }
+.sx-sipoc-item { font: 500 12px sans-serif; fill: ${t.ink}; text-anchor: middle; dominant-baseline: central; }
+.sx-sipoc-step { font: 600 12px sans-serif; fill: ${t.accentDeep}; text-anchor: middle; dominant-baseline: central; }
+.sx-qfd-grid { stroke: ${t.gridMid}; stroke-width: 1; fill: none; }
+.sx-qfd-cellbg { fill: ${t.surface}; }
+.sx-qfd-cellbg-alt { fill: ${t.surfaceAlt}; }
+.sx-qfd-what { font: 500 12px sans-serif; fill: ${t.ink}; text-anchor: end; dominant-baseline: central; }
+.sx-qfd-how { font: 500 11.5px sans-serif; fill: ${t.ink}; }
+.sx-qfd-weight { font: 600 12px sans-serif; fill: ${t.inkStrong}; text-anchor: middle; dominant-baseline: central; }
+.sx-qfd-weight-head { font: 600 10px sans-serif; fill: ${t.inkMuted}; text-anchor: middle; dominant-baseline: central; }
+.sx-qfd-rel-strong { fill: ${t.accent}; }
+.sx-qfd-rel-medium { fill: ${t.accentSoft}; stroke: ${t.accent}; stroke-width: 1.4; }
+.sx-qfd-rel-weak { fill: none; stroke: ${t.accent}; stroke-width: 1.4; }
+.sx-qfd-roof-cell { fill: ${t.surfaceAlt}; stroke: ${t.gridStrong}; stroke-width: 0.8; }
+.sx-qfd-roof-cell-filled { fill: ${t.roofFilled}; stroke: ${t.inkFaint}; stroke-width: 0.9; }
 .sx-qfd-corr { font: 700 13px sans-serif; text-anchor: middle; dominant-baseline: central; }
-.sx-qfd-corr-strong-pos { fill: #15803d; }
-.sx-qfd-corr-pos { fill: #16a34a; }
-.sx-qfd-corr-neg { fill: #dc2626; }
-.sx-qfd-corr-strong-neg { fill: #b91c1c; }
-.sx-qfd-imp-band { fill: #eff6ff; stroke: #cbd5e1; stroke-width: 1; }
-.sx-qfd-imp-head { font: 600 11px sans-serif; fill: #1e3a8a; text-anchor: end; dominant-baseline: central; }
-.sx-qfd-imp-value { font: 700 13px sans-serif; fill: #1e3a8a; text-anchor: middle; dominant-baseline: central; }
-.sx-qfd-imp-value-top { font: 800 14px sans-serif; fill: #dc2626; text-anchor: middle; dominant-baseline: central; }
-.sx-qfd-dir { font: 700 13px sans-serif; fill: #475569; text-anchor: middle; dominant-baseline: central; }
-.sx-punnett-corner { fill: #f1f5f9; stroke: #94a3b8; stroke-width: 1; }
-.sx-punnett-cornerline { stroke: #cbd5e1; stroke-width: 1; }
-.sx-punnett-corner-p1 { font: 600 11px sans-serif; fill: #1e3a8a; dominant-baseline: hanging; }
-.sx-punnett-corner-p2 { font: 600 11px sans-serif; fill: #1e3a8a; }
-.sx-punnett-header { fill: #e2e8f0; stroke: #94a3b8; stroke-width: 1; }
-.sx-punnett-gamete { font: 700 14px ui-monospace, "SF Mono", Menlo, monospace; fill: #0f172a; text-anchor: middle; dominant-baseline: central; }
-.sx-punnett-cell { stroke: #94a3b8; stroke-width: 1; }
-.sx-punnett-genotype { font: 700 15px ui-monospace, "SF Mono", Menlo, monospace; fill: #0f172a; text-anchor: middle; dominant-baseline: central; }
-.sx-punnett-footer-head { font: 700 13px sans-serif; fill: #111; }
-.sx-punnett-legend { font: 500 12.5px sans-serif; fill: #1f2937; dominant-baseline: central; }
-.sx-punnett-geno-ratio { font: 500 12px sans-serif; fill: #475569; }
-.sx-punnett-hint { font: 500 13px sans-serif; fill: #64748b; text-anchor: middle; }
+.sx-qfd-corr-strong-pos { fill: ${t.positiveDeep}; }
+.sx-qfd-corr-pos { fill: ${t.positive}; }
+.sx-qfd-corr-neg { fill: ${t.negative}; }
+.sx-qfd-corr-strong-neg { fill: ${t.negativeDeep}; }
+.sx-qfd-imp-band { fill: ${t.accentTint}; stroke: ${t.gridMid}; stroke-width: 1; }
+.sx-qfd-imp-head { font: 600 11px sans-serif; fill: ${t.accentDeep}; text-anchor: end; dominant-baseline: central; }
+.sx-qfd-imp-value { font: 700 13px sans-serif; fill: ${t.accentDeep}; text-anchor: middle; dominant-baseline: central; }
+.sx-qfd-imp-value-top { font: 800 14px sans-serif; fill: ${t.negative}; text-anchor: middle; dominant-baseline: central; }
+.sx-qfd-dir { font: 700 13px sans-serif; fill: ${t.inkMuted}; text-anchor: middle; dominant-baseline: central; }
+.sx-punnett-corner { fill: ${t.cornerFill}; stroke: ${t.gridStrong}; stroke-width: 1; }
+.sx-punnett-cornerline { stroke: ${t.gridMid}; stroke-width: 1; }
+.sx-punnett-corner-p1 { font: 600 11px sans-serif; fill: ${t.accentDeep}; dominant-baseline: hanging; }
+.sx-punnett-corner-p2 { font: 600 11px sans-serif; fill: ${t.accentDeep}; }
+.sx-punnett-header { fill: ${t.headerFill}; stroke: ${t.gridStrong}; stroke-width: 1; }
+.sx-punnett-gamete { font: 700 14px ui-monospace, "SF Mono", Menlo, monospace; fill: ${t.inkStrong}; text-anchor: middle; dominant-baseline: central; }
+.sx-punnett-cell { stroke: ${t.gridStrong}; stroke-width: 1; }
+.sx-punnett-genotype { font: 700 15px ui-monospace, "SF Mono", Menlo, monospace; fill: ${t.inkStrong}; text-anchor: middle; dominant-baseline: central; }
+.sx-punnett-footer-head { font: 700 13px sans-serif; fill: ${t.inkStrong}; }
+.sx-punnett-legend { font: 500 12.5px sans-serif; fill: ${t.ink}; dominant-baseline: central; }
+.sx-punnett-geno-ratio { font: 500 12px sans-serif; fill: ${t.inkMuted}; }
+.sx-punnett-hint { font: 500 13px sans-serif; fill: ${t.inkFaint}; text-anchor: middle; }
 `.trim();
-function axisArrow() {
+}
+function axisArrow(t) {
   return el(
     "marker",
     {
@@ -28547,7 +28597,7 @@ function axisArrow() {
       markerHeight: 8,
       orient: "auto-start-reverse"
     },
-    [el("path", { d: "M0,0 L10,5 L0,10 z", fill: "#374151" })]
+    [el("path", { d: "M0,0 L10,5 L0,10 z", fill: t.border })]
   );
 }
 function bubbleFill(p, categories) {
@@ -29334,7 +29384,8 @@ function wrapToLines(textStr, maxChars, maxLines) {
   kept[maxLines - 1] = kept[maxLines - 1].replace(/\s+\S*$/, "") + "\u2026";
   return kept;
 }
-function renderSipocAST(ast) {
+function renderSipocAST(ast, config) {
+  const t = resolveMatrixTheme(config?.theme ?? "default");
   const sipoc = ast.sipoc ?? { suppliers: [], inputs: [], process: [], outputs: [], customers: [] };
   const lay = layoutSipoc(ast);
   const nodes = [];
@@ -29416,7 +29467,7 @@ function renderSipocAST(ast) {
       desc(
         `SIPOC scoping table \u2014 ${sipoc.suppliers.length} supplier(s), ${sipoc.inputs.length} input(s), ${sipoc.process.length} process step(s), ${sipoc.outputs.length} output(s), ${sipoc.customers.length} customer(s)`
       ),
-      defs([el("style", {}, CSS2)]),
+      defs([el("style", {}, buildMatrixCss(t))]),
       ...nodes
     ]
   );
@@ -29455,7 +29506,8 @@ function renderQfdRelationshipSymbol(strength, cx, cy, r6) {
     class: "sx-qfd-rel-weak"
   });
 }
-function renderQfdAST(ast) {
+function renderQfdAST(ast, config) {
+  const t = resolveMatrixTheme(config?.theme ?? "default");
   const qfd = ast.qfd ?? { whats: [], hows: [], relationships: [], roof: [], normalize: false };
   const lay = layoutQfd(ast);
   const importance = computeQfdImportance(qfd);
@@ -29645,7 +29697,7 @@ function renderQfdAST(ast) {
       desc(
         `QFD House of Quality \u2014 ${qfd.whats.length} customer requirement(s), ${qfd.hows.length} engineering characteristic(s), ${qfd.relationships.length} relationship(s); technical importance computed per column`
       ),
-      defs([el("style", {}, CSS2)]),
+      defs([el("style", {}, buildMatrixCss(t))]),
       ...nodes
     ]
   );
@@ -29659,7 +29711,8 @@ function genotypeText(parent, genes) {
     return a === dom ? a + b : b === dom ? b + a : a + b;
   }).join("");
 }
-function renderPunnettAST(ast) {
+function renderPunnettAST(ast, config) {
+  const t = resolveMatrixTheme(config?.theme ?? "default");
   const pd = ast.punnett;
   const lay = layoutPunnett(ast);
   const svgWrap = (body, descText2) => svgRoot(
@@ -29675,7 +29728,7 @@ function renderPunnettAST(ast) {
     [
       title(ast.title ? `Punnett square \u2014 ${escapeXml(ast.title)}` : "Punnett square"),
       desc(descText2),
-      defs([el("style", {}, CSS2)]),
+      defs([el("style", {}, buildMatrixCss(t))]),
       ...body
     ]
   );
@@ -29770,10 +29823,11 @@ function renderPunnettAST(ast) {
   const descText = `Punnett square \u2014 ${pd.genes.length === 1 ? "monohybrid" : pd.genes.length === 2 ? "dihybrid" : `${pd.genes.length}-gene`} cross ${genotypeText(pd.parent1, pd.genes)} \xD7 ${genotypeText(pd.parent2, pd.genes)}; phenotype ratio ${footer.phenotypeRatio}`;
   return svgWrap(nodes, descText);
 }
-function renderMatrixAST(ast) {
-  if (ast.mode === "sipoc") return renderSipocAST(ast);
-  if (ast.mode === "qfd") return renderQfdAST(ast);
-  if (ast.mode === "punnett") return renderPunnettAST(ast);
+function renderMatrixAST(ast, config) {
+  if (ast.mode === "sipoc") return renderSipocAST(ast, config);
+  if (ast.mode === "qfd") return renderQfdAST(ast, config);
+  if (ast.mode === "punnett") return renderPunnettAST(ast, config);
+  const t = resolveMatrixTheme(config?.theme ?? "default");
   const lay = layoutMatrix(ast);
   const needsLegendSpace = lay.categories.length > 0 || ast.mode === "correlation";
   const extraWidth = needsLegendSpace && lay.plot.x0 + lay.plot.w + 140 > lay.canvasWidth ? 160 : 0;
@@ -29807,14 +29861,14 @@ function renderMatrixAST(ast) {
       desc(
         `Matrix diagram${ast.template ? ` (${ast.template} template)` : ""}, ${ast.mode} mode, ${ast.points.length} point(s)`
       ),
-      defs([el("style", {}, CSS2), axisArrow()]),
+      defs([el("style", {}, buildMatrixCss(t)), axisArrow(t)]),
       ...body
     ]
   );
 }
-function renderMatrix(text2) {
+function renderMatrix(text2, config) {
   const ast = parseMatrix(text2);
-  return renderMatrixAST(ast);
+  return renderMatrixAST(ast, config);
 }
 
 // src/diagrams/matrix/index.ts
@@ -29825,8 +29879,8 @@ var matrix = {
     return first.startsWith("matrix");
   },
   parse: parseMatrix,
-  render(text2) {
-    return renderMatrix(text2);
+  render(text2, config) {
+    return renderMatrix(text2, config);
   }
 };
 
@@ -32026,7 +32080,7 @@ var WIRE_COLOR_MAP = {
 function buildCss12(t) {
   return `
 .lt-bb { font-family: system-ui, -apple-system, sans-serif; }
-.lt-bb-title { font: 600 16px sans-serif; fill: ${t.text}; }
+.lt-bb-title { font: 700 16px sans-serif; fill: ${t.text}; }
 .lt-bb-substrate { fill: #e7d8b6; stroke: #b08c4f; stroke-width: 1.5; }
 .lt-bb-rail-pos { fill: #fde2e2; stroke: #dc2626; stroke-width: 0.6; }
 .lt-bb-rail-neg { fill: #dde7fa; stroke: #2563eb; stroke-width: 0.6; }
@@ -32173,7 +32227,7 @@ function renderBreadboardLayout(layout, config) {
   const theme = resolveBaseTheme(config?.theme ?? "default");
   const css = buildCss12(theme);
   const titleStr = layout.ast.title ?? "Breadboard";
-  const titleNode = layout.ast.title ? text({ x: BB_CONST.MARGIN, y: 22, class: "lt-bb-title" }, layout.ast.title) : "";
+  const titleNode = layout.ast.title ? text({ x: layout.width / 2, y: 22, class: "lt-bb-title", "text-anchor": "middle" }, layout.ast.title) : "";
   const substrate = renderSubstrate(layout.substrate);
   const parts = layout.parts.map(renderPart).join("\n");
   const wires = layout.wires.map(renderWire).join("\n");
@@ -33036,26 +33090,19 @@ function routeMessageFlow(f, objCenter, poolByLabel) {
 
 // src/diagrams/bpmn/renderer.ts
 var FONT_FAMILY = "system-ui, -apple-system, 'Segoe UI', sans-serif";
-var STROKE = "#1f2937";
-var STROKE_LIGHT = "#94a3b8";
-var POOL_FILL = "#ffffff";
-var LANE_FILL = "#fafbfc";
-var TASK_FILL = "#ffffff";
-var GATEWAY_FILL = "#fffbeb";
-var EVENT_FILL = "#ffffff";
-var LABEL_BAND_FILL = "#f1f5f9";
 function renderBpmn(textInput, config) {
   const ast = parseBpmn(textInput);
   const layout = layoutBpmn(ast);
-  return renderBpmnLayout(layout);
+  return renderBpmnLayout(layout, config);
 }
-function renderBpmnLayout(layout, _config) {
+function renderBpmnLayout(layout, config) {
   const { width, height, ast } = layout;
+  const t = resolveBpmnTheme(config?.theme ?? "default");
   const out = [];
   out.push(title(ast.title ?? "BPMN diagram"));
   out.push(desc(`BPMN ${ast.direction} \u2014 ${ast.pools.length} pool(s), ${layout.objects.length} flow object(s).`));
-  out.push(buildDefs());
-  for (const pl2 of layout.pools) out.push(renderPool(pl2));
+  out.push(buildDefs(t));
+  for (const pl2 of layout.pools) out.push(renderPool(pl2, t));
   for (const lan of layout.lanes) {
     out.push(
       group({ class: "schematex-bpmn-lane" }, [
@@ -33064,8 +33111,8 @@ function renderBpmnLayout(layout, _config) {
           y: lan.y,
           width: lan.width - lan.labelHeight,
           height: lan.height,
-          fill: LANE_FILL,
-          stroke: STROKE,
+          fill: t.laneFill,
+          stroke: t.bpmnStroke,
           "stroke-width": 1
         }),
         rect({
@@ -33073,8 +33120,8 @@ function renderBpmnLayout(layout, _config) {
           y: lan.y,
           width: lan.labelHeight,
           height: lan.height,
-          fill: LABEL_BAND_FILL,
-          stroke: STROKE,
+          fill: t.labelBandFill,
+          stroke: t.bpmnStroke,
           "stroke-width": 1
         }),
         text(
@@ -33086,15 +33133,15 @@ function renderBpmnLayout(layout, _config) {
             "dominant-baseline": "middle",
             "font-family": FONT_FAMILY,
             "font-size": 12,
-            fill: STROKE
+            fill: t.bpmnText
           },
           lan.lane.label
         )
       ])
     );
   }
-  for (const fl of layout.flows) out.push(renderFlow2(fl));
-  for (const ol of layout.objects) out.push(renderObject(ol));
+  for (const fl of layout.flows) out.push(renderFlow2(fl, t));
+  for (const ol of layout.objects) out.push(renderObject(ol, t));
   return svgRoot(
     {
       width,
@@ -33105,7 +33152,7 @@ function renderBpmnLayout(layout, _config) {
     out
   );
 }
-function buildDefs() {
+function buildDefs(t) {
   return defs([
     // Sequence flow — filled triangle.
     el(
@@ -33122,7 +33169,7 @@ function buildDefs() {
       [
         el("path", {
           d: "M 0 0 L 10 5 L 0 10 z",
-          fill: STROKE
+          fill: t.flowStroke
         })
       ]
     ),
@@ -33141,8 +33188,8 @@ function buildDefs() {
       [
         el("path", {
           d: "M 0 0 L 10 5 L 0 10 z",
-          fill: "#ffffff",
-          stroke: STROKE,
+          fill: t.poolFill,
+          stroke: t.msgFlowStroke,
           "stroke-width": 1
         })
       ]
@@ -33160,12 +33207,12 @@ function buildDefs() {
         orient: "auto"
       },
       [
-        el("circle", { cx: 5, cy: 5, r: 3, fill: "#ffffff", stroke: STROKE })
+        el("circle", { cx: 5, cy: 5, r: 3, fill: t.poolFill, stroke: t.msgFlowStroke })
       ]
     )
   ]);
 }
-function renderPool(pl2) {
+function renderPool(pl2, t) {
   const labelCx = pl2.labelX + pl2.labelWidth / 2;
   const labelCy = pl2.labelY + pl2.height / 2;
   if (pl2.pool.blackbox) {
@@ -33175,8 +33222,8 @@ function renderPool(pl2) {
         y: pl2.y,
         width: pl2.width,
         height: pl2.height,
-        fill: POOL_FILL,
-        stroke: STROKE,
+        fill: t.poolFill,
+        stroke: t.bpmnStroke,
         "stroke-width": 1.5
       }),
       rect({
@@ -33184,8 +33231,8 @@ function renderPool(pl2) {
         y: pl2.y,
         width: pl2.labelWidth,
         height: pl2.height,
-        fill: LABEL_BAND_FILL,
-        stroke: STROKE,
+        fill: t.labelBandFill,
+        stroke: t.bpmnStroke,
         "stroke-width": 1
       }),
       text(
@@ -33198,7 +33245,7 @@ function renderPool(pl2) {
           "font-family": FONT_FAMILY,
           "font-size": 13,
           "font-weight": "bold",
-          fill: STROKE
+          fill: t.bpmnText
         },
         pl2.pool.label
       )
@@ -33210,8 +33257,8 @@ function renderPool(pl2) {
       y: pl2.y,
       width: pl2.width,
       height: pl2.height,
-      fill: POOL_FILL,
-      stroke: STROKE,
+      fill: t.poolFill,
+      stroke: t.bpmnStroke,
       "stroke-width": 1.5
     }),
     rect({
@@ -33219,8 +33266,8 @@ function renderPool(pl2) {
       y: pl2.y,
       width: pl2.labelWidth,
       height: pl2.height,
-      fill: LABEL_BAND_FILL,
-      stroke: STROKE,
+      fill: t.labelBandFill,
+      stroke: t.bpmnStroke,
       "stroke-width": 1
     }),
     text(
@@ -33233,19 +33280,19 @@ function renderPool(pl2) {
         "font-family": FONT_FAMILY,
         "font-size": 13,
         "font-weight": "bold",
-        fill: STROKE
+        fill: t.bpmnText
       },
       pl2.pool.label
     )
   ]);
 }
-function renderObject(ol) {
+function renderObject(ol, t) {
   const o = ol.obj;
-  if ("gatewayKind" in o) return renderGateway(ol);
-  if ("marker" in o) return renderActivity(ol);
-  return renderEvent2(ol);
+  if ("gatewayKind" in o) return renderGateway(ol, t);
+  if ("marker" in o) return renderActivity(ol, t);
+  return renderEvent2(ol, t);
 }
-function renderActivity(ol) {
+function renderActivity(ol, t) {
   const a = ol.obj;
   const isSubproc = a.kind === "subprocess-collapsed";
   const cx = ol.x + ol.width / 2;
@@ -33258,8 +33305,8 @@ function renderActivity(ol) {
       height: ol.height,
       rx: 10,
       ry: 10,
-      fill: TASK_FILL,
-      stroke: STROKE,
+      fill: t.taskFill,
+      stroke: t.taskStroke,
       "stroke-width": 1.5
     }),
     multilineText(
@@ -33270,14 +33317,14 @@ function renderActivity(ol) {
         "dominant-baseline": "middle",
         "font-family": FONT_FAMILY,
         "font-size": 12,
-        fill: STROKE
+        fill: t.bpmnText
       },
       a.label,
       14
     )
   ];
   if (a.kind === "task" && a.marker !== "abstract") {
-    children.push(taskMarker(ol.x + 6, ol.y + 6, a.marker));
+    children.push(taskMarker(ol.x + 6, ol.y + 6, a.marker, t));
   }
   if (isSubproc) {
     const mx = cx;
@@ -33289,53 +33336,53 @@ function renderActivity(ol) {
         width: 12,
         height: 12,
         fill: "none",
-        stroke: STROKE,
+        stroke: t.bpmnStroke,
         "stroke-width": 1
       }),
       el("path", {
         d: `M ${mx - 4} ${my} L ${mx + 4} ${my} M ${mx} ${my - 4} L ${mx} ${my + 4}`,
-        stroke: STROKE,
+        stroke: t.bpmnStroke,
         "stroke-width": 1
       })
     );
   }
   return group({ class: `schematex-bpmn-task marker-${a.marker}` }, children);
 }
-function taskMarker(x, y, marker) {
+function taskMarker(x, y, marker, t) {
   const cx = x + 7;
   const cy = y + 7;
   if (marker === "user") {
     return el("g", { class: "marker-user" }, [
-      el("circle", { cx, cy: cy - 1, r: 2.5, fill: "none", stroke: STROKE, "stroke-width": 1 }),
+      el("circle", { cx, cy: cy - 1, r: 2.5, fill: "none", stroke: t.bpmnStroke, "stroke-width": 1 }),
       el("path", {
         d: `M ${cx - 5} ${cy + 6} Q ${cx} ${cy + 1} ${cx + 5} ${cy + 6}`,
         fill: "none",
-        stroke: STROKE,
+        stroke: t.bpmnStroke,
         "stroke-width": 1
       })
     ]);
   }
   if (marker === "service") {
     return el("g", { class: "marker-service" }, [
-      el("circle", { cx, cy, r: 4, fill: "none", stroke: STROKE, "stroke-width": 1 }),
-      el("circle", { cx, cy, r: 1.5, fill: STROKE }),
+      el("circle", { cx, cy, r: 4, fill: "none", stroke: t.bpmnStroke, "stroke-width": 1 }),
+      el("circle", { cx, cy, r: 1.5, fill: t.bpmnStroke }),
       el("path", {
         d: `M ${cx} ${cy - 6} L ${cx} ${cy - 4} M ${cx} ${cy + 4} L ${cx} ${cy + 6} M ${cx - 6} ${cy} L ${cx - 4} ${cy} M ${cx + 4} ${cy} L ${cx + 6} ${cy}`,
-        stroke: STROKE,
+        stroke: t.bpmnStroke,
         "stroke-width": 1
       })
     ]);
   }
   if (marker === "send") {
     return el("g", { class: "marker-send" }, [
-      el("rect", { x: cx - 5, y: cy - 3, width: 10, height: 7, fill: STROKE }),
-      el("path", { d: `M ${cx - 5} ${cy - 3} L ${cx} ${cy + 1} L ${cx + 5} ${cy - 3}`, stroke: "#ffffff", "stroke-width": 1, fill: "none" })
+      el("rect", { x: cx - 5, y: cy - 3, width: 10, height: 7, fill: t.bpmnStroke }),
+      el("path", { d: `M ${cx - 5} ${cy - 3} L ${cx} ${cy + 1} L ${cx + 5} ${cy - 3}`, stroke: t.poolFill, "stroke-width": 1, fill: "none" })
     ]);
   }
   if (marker === "receive") {
     return el("g", { class: "marker-receive" }, [
-      el("rect", { x: cx - 5, y: cy - 3, width: 10, height: 7, fill: "none", stroke: STROKE, "stroke-width": 1 }),
-      el("path", { d: `M ${cx - 5} ${cy - 3} L ${cx} ${cy + 1} L ${cx + 5} ${cy - 3}`, stroke: STROKE, "stroke-width": 1, fill: "none" })
+      el("rect", { x: cx - 5, y: cy - 3, width: 10, height: 7, fill: "none", stroke: t.bpmnStroke, "stroke-width": 1 }),
+      el("path", { d: `M ${cx - 5} ${cy - 3} L ${cx} ${cy + 1} L ${cx + 5} ${cy - 3}`, stroke: t.bpmnStroke, "stroke-width": 1, fill: "none" })
     ]);
   }
   if (marker === "manual") {
@@ -33343,7 +33390,7 @@ function taskMarker(x, y, marker) {
       el("path", {
         d: `M ${cx - 3} ${cy + 4} L ${cx - 3} ${cy} L ${cx - 1.5} ${cy} L ${cx - 1.5} ${cy - 4} L ${cx} ${cy - 4} L ${cx} ${cy} L ${cx + 1.5} ${cy} L ${cx + 1.5} ${cy + 1} L ${cx + 3} ${cy + 1} L ${cx + 3} ${cy + 4} z`,
         fill: "none",
-        stroke: STROKE,
+        stroke: t.bpmnStroke,
         "stroke-width": 1
       })
     ]);
@@ -33353,19 +33400,19 @@ function taskMarker(x, y, marker) {
       el("path", {
         d: `M ${cx - 4} ${cy - 5} Q ${cx - 6} ${cy} ${cx - 4} ${cy + 5} L ${cx + 4} ${cy + 5} Q ${cx + 2} ${cy} ${cx + 4} ${cy - 5} z`,
         fill: "none",
-        stroke: STROKE,
+        stroke: t.bpmnStroke,
         "stroke-width": 1
       }),
       el("path", {
         d: `M ${cx - 2} ${cy - 2} L ${cx + 2} ${cy - 2} M ${cx - 2} ${cy} L ${cx + 2} ${cy} M ${cx - 2} ${cy + 2} L ${cx + 2} ${cy + 2}`,
-        stroke: STROKE,
+        stroke: t.bpmnStroke,
         "stroke-width": 0.8
       })
     ]);
   }
   return "";
 }
-function renderGateway(ol) {
+function renderGateway(ol, t) {
   const g = ol.obj;
   const cx = ol.x + ol.width / 2;
   const cy = ol.y + ol.height / 2;
@@ -33377,7 +33424,7 @@ function renderGateway(ol) {
     inner.push(
       el("path", {
         d: `M ${cx - a} ${cy - a} L ${cx + a} ${cy + a} M ${cx + a} ${cy - a} L ${cx - a} ${cy + a}`,
-        stroke: STROKE,
+        stroke: t.gatewayGlyph,
         "stroke-width": 2.5,
         "stroke-linecap": "round"
       })
@@ -33387,7 +33434,7 @@ function renderGateway(ol) {
     inner.push(
       el("path", {
         d: `M ${cx - a} ${cy} L ${cx + a} ${cy} M ${cx} ${cy - a} L ${cx} ${cy + a}`,
-        stroke: STROKE,
+        stroke: t.gatewayGlyph,
         "stroke-width": 2.5,
         "stroke-linecap": "round"
       })
@@ -33399,7 +33446,7 @@ function renderGateway(ol) {
         cy,
         r: r6 * 0.45,
         fill: "none",
-        stroke: STROKE,
+        stroke: t.gatewayGlyph,
         "stroke-width": 2
       })
     );
@@ -33410,7 +33457,7 @@ function renderGateway(ol) {
         cy,
         r: r6 * 0.55,
         fill: "none",
-        stroke: STROKE,
+        stroke: t.gatewayGlyph,
         "stroke-width": 1
       })
     );
@@ -33424,7 +33471,7 @@ function renderGateway(ol) {
       el("polygon", {
         points: pts.join(" "),
         fill: "none",
-        stroke: STROKE,
+        stroke: t.gatewayGlyph,
         "stroke-width": 1.2
       })
     );
@@ -33437,22 +33484,22 @@ function renderGateway(ol) {
       "text-anchor": "middle",
       "font-family": FONT_FAMILY,
       "font-size": 11,
-      fill: STROKE
+      fill: t.bpmnText
     },
     labelStr
   ) : "";
   return group({ class: `schematex-bpmn-gateway kind-${g.gatewayKind}` }, [
     el("polygon", {
       points,
-      fill: GATEWAY_FILL,
-      stroke: STROKE,
+      fill: t.gatewayFill,
+      stroke: t.gatewayStroke,
       "stroke-width": 1.5
     }),
     ...inner,
     labelEl
   ]);
 }
-function renderEvent2(ol) {
+function renderEvent2(ol, t) {
   const e = ol.obj;
   const cx = ol.x + ol.width / 2;
   const cy = ol.y + ol.height / 2;
@@ -33460,14 +33507,16 @@ function renderEvent2(ol) {
   const isEnd = e.kind === "end";
   const isIntermediate = e.kind === "intermediate";
   const strokeW = isEnd ? 3 : 1.2;
+  const fill = isEnd ? t.endFill : isIntermediate ? t.intermediateFill : t.startFill;
+  const ring = isEnd ? t.endStroke : isIntermediate ? t.intermediateStroke : t.startStroke;
   const children = [];
   children.push(
     el("circle", {
       cx,
       cy,
       r: r6,
-      fill: EVENT_FILL,
-      stroke: STROKE,
+      fill,
+      stroke: ring,
       "stroke-width": strokeW
     })
   );
@@ -33478,16 +33527,16 @@ function renderEvent2(ol) {
         cy,
         r: r6 - 3,
         fill: "none",
-        stroke: STROKE,
+        stroke: ring,
         "stroke-width": 1.2
       })
     );
   }
   const filled = e.throwCatch === "throw" && (isIntermediate || isEnd);
   if (e.trigger === "message") {
-    children.push(messageGlyph(cx, cy, r6 * 0.55, filled));
+    children.push(messageGlyph(cx, cy, r6 * 0.55, filled, t));
   } else if (e.trigger === "timer") {
-    children.push(timerGlyph(cx, cy, r6 * 0.55));
+    children.push(timerGlyph(cx, cy, r6 * 0.55, t));
   }
   if (e.label) {
     children.push(
@@ -33498,7 +33547,7 @@ function renderEvent2(ol) {
           "text-anchor": "middle",
           "font-family": FONT_FAMILY,
           "font-size": 11,
-          fill: STROKE
+          fill: t.bpmnText
         },
         e.label
       )
@@ -33506,7 +33555,7 @@ function renderEvent2(ol) {
   }
   return group({ class: `schematex-bpmn-event kind-${e.kind} trigger-${e.trigger}` }, children);
 }
-function messageGlyph(cx, cy, size, filled) {
+function messageGlyph(cx, cy, size, filled, t) {
   const w = size;
   const h = size * 0.7;
   const x = cx - w / 2;
@@ -33517,19 +33566,19 @@ function messageGlyph(cx, cy, size, filled) {
       y,
       width: w,
       height: h,
-      fill: filled ? STROKE : "#ffffff",
-      stroke: STROKE,
+      fill: filled ? t.bpmnStroke : t.poolFill,
+      stroke: t.bpmnStroke,
       "stroke-width": 1
     }),
     el("path", {
       d: `M ${x} ${y} L ${cx} ${y + h * 0.55} L ${x + w} ${y}`,
-      stroke: filled ? "#ffffff" : STROKE,
+      stroke: filled ? t.poolFill : t.bpmnStroke,
       "stroke-width": 1,
       fill: "none"
     })
   ]);
 }
-function timerGlyph(cx, cy, size) {
+function timerGlyph(cx, cy, size, t) {
   const r6 = size / 2;
   const ticks = [];
   for (let k = 0; k < 12; k++) {
@@ -33541,18 +33590,18 @@ function timerGlyph(cx, cy, size) {
     ticks.push(`M ${t1x} ${t1y} L ${t2x} ${t2y}`);
   }
   return el("g", { class: "trigger-timer" }, [
-    el("circle", { cx, cy, r: r6, fill: "none", stroke: STROKE, "stroke-width": 1 }),
-    el("path", { d: ticks.join(" "), stroke: STROKE, "stroke-width": 0.8 }),
+    el("circle", { cx, cy, r: r6, fill: "none", stroke: t.bpmnStroke, "stroke-width": 1 }),
+    el("path", { d: ticks.join(" "), stroke: t.bpmnStroke, "stroke-width": 0.8 }),
     // Hands
     el("path", {
       d: `M ${cx} ${cy} L ${cx} ${cy - r6 * 0.7} M ${cx} ${cy} L ${cx + r6 * 0.5} ${cy}`,
-      stroke: STROKE,
+      stroke: t.bpmnStroke,
       "stroke-width": 1.2,
       "stroke-linecap": "round"
     })
   ]);
 }
-function renderFlow2(fl) {
+function renderFlow2(fl, t) {
   const f = fl.flow;
   const isMessage = f.kind === "message";
   const dasharray = isMessage ? "6 4" : void 0;
@@ -33562,7 +33611,7 @@ function renderFlow2(fl) {
     path({
       d: fl.path,
       fill: "none",
-      stroke: isMessage ? STROKE_LIGHT : STROKE,
+      stroke: isMessage ? t.msgFlowStroke : t.flowStroke,
       "stroke-width": 1.4,
       "stroke-dasharray": dasharray,
       "marker-start": markerStart,
@@ -33575,8 +33624,8 @@ function renderFlow2(fl) {
       children.push(
         el("polygon", {
           points: diamondPoints(head.x, head.y, 5),
-          fill: "#ffffff",
-          stroke: STROKE,
+          fill: t.poolFill,
+          stroke: t.flowStroke,
           "stroke-width": 1
         })
       );
@@ -33588,7 +33637,7 @@ function renderFlow2(fl) {
       children.push(
         el("path", {
           d: `M ${head.x - 4} ${head.y + 4} L ${head.x + 4} ${head.y - 4}`,
-          stroke: STROKE,
+          stroke: t.flowStroke,
           "stroke-width": 1.5
         })
       );
@@ -33603,7 +33652,7 @@ function renderFlow2(fl) {
           "text-anchor": "middle",
           "font-family": FONT_FAMILY,
           "font-size": 10,
-          fill: STROKE
+          fill: t.bpmnText
         },
         f.label
       )
@@ -33635,7 +33684,7 @@ var bpmn = {
   },
   parse: parseBpmn,
   render(text2, config) {
-    return renderBpmn(text2);
+    return renderBpmn(text2, config);
   }
 };
 
@@ -36117,5 +36166,5 @@ function renderWithPlugin(prepared, plugin, config) {
 }
 
 export { GEOMETRY, bowtie2 as bowtie, causalloop, decisiontree, drawDeviceIcon, epc, eventtree, faulttree, fmea, gitgraph, iconSize, idef0, markov, network, parse, parseResult, pert, petri, pid, prisma, render, renderEquip, renderPreview, renderResult, sequence, state, threatmodel, timeline, umlclass, usecase, welding };
-//# sourceMappingURL=chunk-LM5X7ZNR.js.map
-//# sourceMappingURL=chunk-LM5X7ZNR.js.map
+//# sourceMappingURL=chunk-TP7LQ5PF.js.map
+//# sourceMappingURL=chunk-TP7LQ5PF.js.map