@markdy/core 1.1.7 → 1.3.0

package/dist/index.js

@@ -397,6 +397,7 @@ var CONTROL_KEYS = [
   "resetView",
   "fullscreen",
   "svg",
+  "gif",
   "share",
   "code",
   "theme"
@@ -448,6 +449,11 @@ var CONTROLS = {
   svg: { group: "controls", key: "svg", type: "boolean" },
   exportSvg: { group: "controls", key: "svg", type: "boolean" },
   export_svg: { group: "controls", key: "svg", type: "boolean" },
+  gif: { group: "controls", key: "gif", type: "boolean" },
+  exportGif: { group: "controls", key: "gif", type: "boolean" },
+  export_gif: { group: "controls", key: "gif", type: "boolean" },
+  gifButton: { group: "controls", key: "gif", type: "boolean" },
+  gif_button: { group: "controls", key: "gif", type: "boolean" },
   share: { group: "controls", key: "share", type: "boolean" },
   shareLink: { group: "controls", key: "share", type: "boolean" },
   share_link: { group: "controls", key: "share", type: "boolean" },
@@ -528,6 +534,11 @@ var FLAT = {
   fullscreen_button: CONTROLS.fullscreen_button,
   exportSvg: CONTROLS.exportSvg,
   export_svg: CONTROLS.export_svg,
+  gif: CONTROLS.gif,
+  exportGif: CONTROLS.exportGif,
+  export_gif: CONTROLS.export_gif,
+  gifButton: CONTROLS.gifButton,
+  gif_button: CONTROLS.gif_button,
   shareLink: CONTROLS.shareLink,
   share_link: CONTROLS.share_link,
   code: CONTROLS.code,
@@ -643,6 +654,7 @@ function resolvePlayer(config = {}, overrides = {}) {
     resetView: resolveControl(configuredControls.resetView),
     fullscreen: resolveControl(configuredControls.fullscreen),
     svg: resolveControl(configuredControls.svg),
+    gif: resolveControl(configuredControls.gif, false),
     share: resolveControl(configuredControls.share),
     code: resolveControl(configuredControls.code, false),
     theme: resolveControl(configuredControls.theme, hostControlDefault)
@@ -719,7 +731,8 @@ var EDGE_OPERATORS = {
   "->": "request",
   "<-": "response",
   "~>": "event",
-  "--": "dependency"
+  "--": "dependency",
+  "..>": "dependency"
 };
 var RESERVED_SELECTORS = /* @__PURE__ */ new Set(["$title", "$nodes", "$edges"]);
 var CUE_ALIASES = {
@@ -791,6 +804,41 @@ var NODE_W = 180;
 var NODE_H = 76;
 var VENN_NODE_SIZE = 220;
 var GROUP_PAD = 28;
+function computeNodeDimensions(decl, baseW = 180, baseH = 76) {
+  if (typeof decl.props?.width === "number") {
+    return {
+      width: decl.props.width,
+      height: typeof decl.props.height === "number" ? decl.props.height : baseH
+    };
+  }
+  const labelLen = (decl.label || "").length;
+  const tech = decl.props?.tech ?? decl.props?.sub;
+  const techLen = tech ? String(tech).length : 0;
+  const val = decl.props?.value ?? decl.props?.metric;
+  const valLen = val ? String(val).length : 0;
+  if (decl.kind === "dot") return { width: 64, height: 64 };
+  if (decl.kind === "matrix") return { width: 220, height: 96 };
+  const valueW = valLen > 0 ? Math.max(50, valLen * 9.5 + 16) : 0;
+  const words = (decl.label || "").trim().split(/\s+/).filter(Boolean);
+  const longestWord = Math.max(...words.map((w) => w.length), 0);
+  const avgLineChars = words.length > 1 ? Math.ceil(labelLen / Math.min(words.length, 2)) : labelLen;
+  const neededLabelChars = Math.max(longestWord + 2, avgLineChars, Math.min(labelLen, 22));
+  const maxChars = Math.max(neededLabelChars, techLen);
+  const neededTextW = Math.max(96, maxChars * 8.4);
+  const calculatedW = 56 + neededTextW + (valueW > 0 ? valueW + 14 : 0) + 18;
+  const minW = Math.max(baseW, Math.min(360, calculatedW));
+  let width = Math.ceil(minW / 8) * 8;
+  let height = baseH;
+  if (labelLen > 24 && techLen > 0) {
+    height = Math.max(height, 84);
+  }
+  return { width, height };
+}
+function resolveNodeStyle(decl, ast) {
+  if (!decl.style) return void 0;
+  if (typeof decl.style === "string") return ast.styles[decl.style]?.props;
+  return decl.style;
+}
 var DEFAULTS = {
   show: 0.35,
   hide: 0.35,
@@ -805,7 +853,13 @@ var DEFAULTS = {
 function diagramType(ast) {
   return ast.meta.type ?? "architecture";
 }
-function nodeShape(kind, dtype) {
+function nodeShape(kind, dtype, props) {
+  if (typeof props?.shape === "string") {
+    const s = props.shape.toLowerCase();
+    if (s === "diamond" || s === "circle" || s === "pill" || s === "terminal" || s === "rounded" || s === "card" || s === "container") {
+      return s;
+    }
+  }
   if (kind === "terminal") return "terminal";
   if (kind === "dot" || kind === "marker") return "circle";
   if (kind === "token_strip" || kind === "chips") return "pill";
@@ -940,22 +994,31 @@ function layoutRanked(ast, edges, opts) {
     });
   }
   const isVertical = direction === "TB" || direction === "BT";
+  const hasTitle = Boolean(ast.meta.title && ast.meta.title.trim().length > 0);
+  const hasBeatCaptions = ast.beats.some((b) => b.label && b.label.trim().length > 0);
+  const titleBand = hasTitle ? TITLE_BAND : 0;
+  const bottomBand = hasBeatCaptions ? 44 : 0;
   const contentW = ast.meta.width - SAFE * 2;
-  const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
   const maxRank = Math.max(...byRank.keys(), 0);
   const rankCount = maxRank + 1;
   const maxInRank = Math.max(...[...byRank.values()].map((v) => v.length), 1);
   const nodes = [];
+  const nodeDims = /* @__PURE__ */ new Map();
+  for (const id of nodeIds) {
+    nodeDims.set(id, computeNodeDimensions(ast.nodes[id]));
+  }
   if (opts.columnLayout) {
     const count = nodeIds.length;
-    const colSpacing = Math.max(NODE_W + 32, contentW / Math.max(count, 1));
-    const totalW2 = (count - 1) * colSpacing + NODE_W;
+    const maxNodeW = Math.max(...nodeIds.map((id) => nodeDims.get(id)?.width ?? NODE_W));
+    const colSpacing = Math.max(maxNodeW + 32, contentW / Math.max(count, 1));
+    const totalW2 = (count - 1) * colSpacing + maxNodeW;
     const startX2 = SAFE + Math.max(0, (contentW - totalW2) / 2);
     nodeIds.forEach((id, idx) => {
       const decl = ast.nodes[id];
       const role = nodeRole(decl.kind);
-      const x = startX2 + idx * colSpacing;
-      const y = TITLE_BAND + 32;
+      const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
+      const x = startX2 + idx * colSpacing + (maxNodeW - dims.width) / 2;
+      const y = (hasTitle ? titleBand : 20) + 32;
       nodes.push({
         id,
         kind: decl.kind,
@@ -963,12 +1026,12 @@ function layoutRanked(ast, edges, opts) {
         label: decl.label,
         x: snapGrid(x),
         y: snapGrid(y),
-        width: NODE_W,
-        height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        width: dims.width,
+        height: dims.height,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
-        shape: nodeShape(decl.kind, dtype),
+        shape: nodeShape(decl.kind, dtype, decl.props),
         focal: decl.props.focal === true || decl.props.accent === true,
         column: idx
       });
@@ -976,18 +1039,22 @@ function layoutRanked(ast, edges, opts) {
     return nodes;
   }
   if (isVertical) {
-    const rowGap = Math.max(NODE_H + 40, Math.min(180, contentH / Math.max(rankCount, 1)));
-    const totalH = (rankCount - 1) * rowGap + NODE_H;
+    const contentH = ast.meta.height - SAFE - TITLE_BAND - SAFE;
+    const maxNodeH = Math.max(...nodeIds.map((id) => nodeDims.get(id)?.height ?? NODE_H));
+    const rowGap = Math.max(maxNodeH + 40, Math.min(200, contentH / Math.max(rankCount, 1)));
+    const totalH = (rankCount - 1) * rowGap + maxNodeH;
     const startY = TITLE_BAND + Math.max(0, (contentH - totalH) / 2);
     for (const [rank, ids] of [...byRank.entries()].sort((a, b) => a[0] - b[0])) {
       const rowCount = ids.length;
-      const colSpacing = Math.max(NODE_W + 36, Math.min(260, contentW / Math.max(rowCount, 1)));
-      const rankW = (rowCount - 1) * colSpacing + NODE_W;
+      const maxRowW = Math.max(...ids.map((id) => nodeDims.get(id)?.width ?? NODE_W));
+      const colSpacing = Math.max(maxRowW + 36, Math.min(320, contentW / Math.max(rowCount, 1)));
+      const rankW = (rowCount - 1) * colSpacing + maxRowW;
       const rankStartX = SAFE + Math.max(0, (contentW - rankW) / 2);
       const y = startY + rank * rowGap;
       ids.forEach((id, idx) => {
         const decl = ast.nodes[id];
         const role = nodeRole(decl.kind);
+        const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
         const x = rankStartX + idx * colSpacing;
         const focal = decl.props.focal === true || decl.props.accent === true;
         nodes.push({
@@ -997,32 +1064,44 @@ function layoutRanked(ast, edges, opts) {
           label: decl.label,
           x: snapGrid(x),
           y: snapGrid(y),
-          width: NODE_W,
-          height: NODE_H,
-          style: decl.style ? ast.styles[decl.style]?.props : void 0,
+          width: dims.width,
+          height: dims.height,
+          style: resolveNodeStyle(decl, ast),
           props: decl.props,
           opacity: 0,
-          shape: nodeShape(decl.kind, dtype),
+          shape: nodeShape(decl.kind, dtype, decl.props),
           focal
         });
       });
     }
     return nodes;
   }
-  const maxPossibleStep = rankCount > 1 ? (contentW - NODE_W) / (rankCount - 1) : 0;
-  const colGap = rankCount > 1 ? Math.min(300, Math.max(50, maxPossibleStep)) : 0;
-  const totalW = (rankCount - 1) * colGap + NODE_W;
+  const rankWidths = /* @__PURE__ */ new Map();
+  for (const [rank, ids] of byRank.entries()) {
+    const maxW = Math.max(...ids.map((id) => nodeDims.get(id)?.width ?? NODE_W));
+    rankWidths.set(rank, maxW);
+  }
+  const totalRankWidths = [...rankWidths.values()].reduce((a, b) => a + b, 0);
+  const minColGap = 56;
+  const availableGapW = Math.max(0, contentW - totalRankWidths);
+  const colGap = rankCount > 1 ? Math.max(minColGap, Math.min(160, availableGapW / (rankCount - 1))) : 0;
+  const totalW = totalRankWidths + (rankCount - 1) * colGap;
   const startX = SAFE + Math.max(0, (contentW - totalW) / 2);
-  for (const [rank, ids] of [...byRank.entries()].sort((a, b) => a[0] - b[0])) {
+  const availableH = Math.max(NODE_H, ast.meta.height - titleBand - bottomBand);
+  let currentRankX = startX;
+  for (let rank = 0; rank < rankCount; rank++) {
+    const ids = byRank.get(rank) ?? [];
+    const rankW = rankWidths.get(rank) ?? NODE_W;
     const rowCount = ids.length;
-    const maxPossibleRowStep = rowCount > 1 ? (contentH - NODE_H) / (rowCount - 1) : 0;
-    const rowSpacing = rowCount > 1 ? Math.min(150, Math.max(36, maxPossibleRowStep)) : 0;
-    const colH = (rowCount - 1) * rowSpacing + NODE_H;
-    const colStartY = TITLE_BAND + Math.max(0, (contentH - colH) / 2);
-    const x = startX + rank * colGap;
+    const maxH = Math.max(...ids.map((id) => nodeDims.get(id)?.height ?? NODE_H), NODE_H);
+    const maxPossibleRowStep = rowCount > 1 ? (availableH - maxH) / (rowCount - 1) : 0;
+    const rowSpacing = rowCount > 1 ? Math.min(180, Math.max(maxH + 28, maxPossibleRowStep)) : 0;
+    const colH = (rowCount - 1) * rowSpacing + maxH;
+    const colStartY = titleBand + Math.max(0, (availableH - colH) / 2);
     ids.forEach((id, idx) => {
       const decl = ast.nodes[id];
       const role = nodeRole(decl.kind);
+      const dims = nodeDims.get(id) ?? { width: NODE_W, height: NODE_H };
       const y = colStartY + idx * rowSpacing;
       const focal = decl.props.focal === true || decl.props.accent === true;
       nodes.push({
@@ -1030,17 +1109,18 @@ function layoutRanked(ast, edges, opts) {
         kind: decl.kind,
         role,
         label: decl.label,
-        x: snapGrid(x),
+        x: snapGrid(currentRankX),
         y: snapGrid(y),
-        width: NODE_W,
-        height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        width: dims.width,
+        height: dims.height,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
-        shape: nodeShape(decl.kind, dtype),
+        shape: nodeShape(decl.kind, dtype, decl.props),
         focal
       });
     });
+    currentRankX += rankW + colGap;
   }
   return nodes;
 }
@@ -1141,7 +1221,7 @@ function layoutTree(ast, edges) {
       y: snapGrid(pos.y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "card",
@@ -1209,10 +1289,10 @@ function layoutConstellation(ast) {
       y: snapGrid(y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
-      shape: nodeShape(decl.kind, "constellation"),
+      shape: nodeShape(decl.kind, "constellation", decl.props),
       focal: isFocal || decl.props.focal === true || decl.props.accent === true
     });
   }
@@ -1257,7 +1337,7 @@ function layoutLoop(ast) {
       y: snapGrid(y),
       width: isHub ? snapGrid(NODE_W * 1.25) : NODE_W,
       height: isHub ? snapGrid(NODE_H * 1.15) : NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: isHub ? "pill" : "card",
@@ -1311,7 +1391,7 @@ function layoutMedallion(ast, edges) {
         y: snapGrid(rowY),
         width: NODE_W,
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1373,7 +1453,7 @@ function layoutQuadrant(ast) {
         y: snapGrid(y),
         width: NODE_W,
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1426,7 +1506,7 @@ function layoutSwimlane(ast, edges) {
         y: snapGrid(laneY),
         width: NODE_W,
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1475,7 +1555,7 @@ function layoutPyramid(ast) {
         y: snapGrid(tierY),
         width: snapGrid(nodeW),
         height: NODE_H,
-        style: decl.style ? ast.styles[decl.style]?.props : void 0,
+        style: resolveNodeStyle(decl, ast),
         props: decl.props,
         opacity: 0,
         shape: "card",
@@ -1508,7 +1588,7 @@ function layoutTimeline(ast) {
       y: snapGrid(y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "pill",
@@ -1551,7 +1631,7 @@ function layoutGantt(ast) {
       y: snapGrid(y),
       width: snapGrid(w),
       height: barH,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "pill",
@@ -1591,7 +1671,7 @@ function layoutVenn(ast) {
       y: snapGrid(y),
       width: VENN_NODE_SIZE,
       height: VENN_NODE_SIZE,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "circle",
@@ -1625,7 +1705,7 @@ function layoutLayers(ast) {
       y: snapGrid(y),
       width: snapGrid(layerW),
       height: snapGrid(layerH),
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "rounded",
@@ -1672,7 +1752,7 @@ function layoutNested(ast) {
       y: snapGrid(y),
       width: snapGrid(w),
       height: snapGrid(h),
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: isCore ? "card" : "container",
@@ -1706,7 +1786,7 @@ function layoutRadar(ast) {
       y: snapGrid(y),
       width: NODE_W,
       height: NODE_H,
-      style: decl.style ? ast.styles[decl.style]?.props : void 0,
+      style: resolveNodeStyle(decl, ast),
       props: decl.props,
       opacity: 0,
       shape: "rounded",
@@ -2094,17 +2174,32 @@ function computeAdaptiveDimensions(ast, edges) {
         autoH = Math.max(720, Math.min(2e3, requiredH));
       }
     } else {
-      const requiredW = SAFE * 2 + rankCount * NODE_W + (rankCount - 1) * 44 + groupPaddingBonus;
-      const requiredH = SAFE * 2 + TITLE_BAND + maxInRank * NODE_H + (maxInRank - 1) * 36 + groupPaddingBonus;
-      if (nodeCount <= 2 && rankCount <= 2) {
+      const hasTitle = Boolean(ast.meta.title && ast.meta.title.trim().length > 0);
+      const hasBeatCaptions = ast.beats.some((b) => b.label && b.label.trim().length > 0);
+      const titleBand = hasTitle ? TITLE_BAND : 0;
+      const bottomBand = hasBeatCaptions ? 44 : 0;
+      const maxRankW = Math.max(...nodeIds.map((id) => computeNodeDimensions(ast.nodes[id]).width));
+      const maxRankH = Math.max(...nodeIds.map((id) => computeNodeDimensions(ast.nodes[id]).height));
+      const requiredW = SAFE * 2 + rankCount * maxRankW + (rankCount - 1) * 56 + groupPaddingBonus;
+      const requiredH = SAFE * 2 + titleBand + bottomBand + maxInRank * maxRankH + (maxInRank - 1) * 44 + groupPaddingBonus;
+      if (maxInRank === 1 && !hasTitle) {
+        autoW = Math.max(1024, Math.min(2560, requiredW));
+        autoH = Math.max(hasBeatCaptions ? 240 : 208, Math.min(360, requiredH + 24));
+      } else if (maxInRank === 2 && !hasTitle) {
+        autoW = Math.max(1024, Math.min(2560, requiredW));
+        autoH = Math.max(hasBeatCaptions ? 368 : 336, Math.min(480, requiredH + 24));
+      } else if (maxInRank === 3 && !hasTitle) {
+        autoW = Math.max(1152, Math.min(2560, requiredW));
+        autoH = Math.max(hasBeatCaptions ? 480 : 448, Math.min(640, requiredH + 24));
+      } else if (nodeCount <= 2 && rankCount <= 2) {
         autoW = 1024;
-        autoH = 576;
+        autoH = hasTitle ? 576 : 384;
       } else if (nodeCount <= 4 && rankCount <= 3 && maxInRank <= 2) {
         autoW = 1152;
-        autoH = 648;
+        autoH = hasTitle ? 648 : 448;
       } else {
         autoW = Math.max(1152, Math.min(2560, requiredW));
-        autoH = Math.max(648, Math.min(1600, requiredH));
+        autoH = Math.max(hasTitle ? 648 : maxInRank <= 2 ? 448 : 576, Math.min(1600, requiredH));
       }
     }
   }
@@ -2343,7 +2438,7 @@ var THEMES = {
       dependency: "#818cf8"
     },
     fonts: {
-      title: "Georgia, Times New Roman, serif",
+      title: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, sans-serif",
       nodeName: "ui-sans-serif, system-ui, sans-serif",
       mono: "ui-monospace, SFMono-Regular, Menlo, monospace"
     },
@@ -2440,6 +2535,116 @@ var THEMES = {
     },
     radiusMd: 4,
     spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 40 }
+  },
+  ink: {
+    name: "ink",
+    canvas: "#f8fafd",
+    surface: "#ffffff",
+    surfaceRaised: "#eff6ff",
+    border: "#1d4ed8",
+    text: "#0f172a",
+    textMuted: "#3b629b",
+    paper: "#f8fafd",
+    ink: "#1e40af",
+    muted: "#4776b2",
+    rule: "rgba(29, 78, 216, 0.14)",
+    soft: "#60a5fa",
+    link: "#2563eb",
+    gridMinor: "rgba(37, 99, 235, 0.05)",
+    gridMajor: "rgba(37, 99, 235, 0.10)",
+    vignette: "rgba(219, 234, 254, 0.45)",
+    accent: "#1d4ed8",
+    accentTint: "rgba(29, 78, 216, 0.08)",
+    nodeSurface: "#ffffff",
+    nodeSurfaceRaised: "#f4f8ff",
+    hairline: "rgba(29, 78, 216, 0.20)",
+    shadow: "rgba(15, 35, 90, 0.09)",
+    labelPlate: "#ffffff",
+    flatCards: false,
+    roles: {
+      ...ROLE_COLORS,
+      compute: "#1d4ed8",
+      code: "#2563eb",
+      client: "#0284c7",
+      data: "#0369a1",
+      messaging: "#4338ca",
+      network: "#0284c7",
+      security: "#1e3a8a",
+      platform: "#3b82f6",
+      observability: "#0891b2",
+      delivery: "#4f46e5",
+      flow: "#2563eb",
+      distributed: "#475569"
+    },
+    edges: {
+      request: "#1d4ed8",
+      response: "#3b82f6",
+      event: "#0284c7",
+      dependency: "#64748b"
+    },
+    fonts: {
+      title: 'ui-serif, "Charter", "Newsreader", "Georgia", "Songti SC", "Noto Serif", serif',
+      nodeName: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif',
+      mono: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace'
+    },
+    radiusMd: 6,
+    spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 40 },
+    series: ["#1d4ed8", "#0284c7", "#4338ca", "#0891b2", "#1e3a8a"]
+  },
+  doodle: {
+    name: "doodle",
+    canvas: "#fffef9",
+    surface: "#ffffff",
+    surfaceRaised: "#fdf8ec",
+    border: "#18181b",
+    text: "#18181b",
+    textMuted: "#52525b",
+    paper: "#fffef9",
+    ink: "#18181b",
+    muted: "#52525b",
+    rule: "rgba(24, 24, 27, 0.16)",
+    soft: "#71717a",
+    link: "#f43f5e",
+    gridMinor: "rgba(24, 24, 27, 0.05)",
+    gridMajor: "rgba(24, 24, 27, 0.08)",
+    vignette: "rgba(245, 235, 210, 0.35)",
+    accent: "#f43f5e",
+    accentTint: "rgba(244, 63, 94, 0.12)",
+    nodeSurface: "#ffffff",
+    nodeSurfaceRaised: "#fffdf5",
+    hairline: "rgba(24, 24, 27, 0.25)",
+    shadow: "rgba(24, 24, 27, 0.15)",
+    labelPlate: "#ffffff",
+    flatCards: true,
+    roles: {
+      ...ROLE_COLORS,
+      compute: "#2563eb",
+      code: "#2563eb",
+      client: "#f43f5e",
+      data: "#10b981",
+      messaging: "#8b5cf6",
+      network: "#06b6d4",
+      security: "#ef4444",
+      platform: "#f59e0b",
+      observability: "#14b8a6",
+      delivery: "#f59e0b",
+      flow: "#ec4899",
+      distributed: "#71717a"
+    },
+    edges: {
+      request: "#18181b",
+      response: "#71717a",
+      event: "#f43f5e",
+      dependency: "#a1a1aa"
+    },
+    fonts: {
+      title: '"Caveat", "Comic Neue", "Chalkboard SE", "Patrick Hand", "Comic Sans MS", cursive, sans-serif',
+      nodeName: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif',
+      mono: '"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace'
+    },
+    radiusMd: 12,
+    spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 40 },
+    series: ["#f43f5e", "#2563eb", "#10b981", "#8b5cf6", "#f59e0b"]
   }
 };
 function resolveTheme(name) {
@@ -2457,7 +2662,7 @@ var ParseError = class extends Error {
     this.column = column;
   }
 };
-var FLOW_OP_RE = /(->|<-|~>|--)/;
+var FLOW_OP_RE = /(->|<-|~>|--|\.\.>|<->)/;
 function stripComment(line) {
   let inString = false;
   let escaped = false;
@@ -2509,7 +2714,7 @@ function parseProps(raw) {
       i = raw.length - parsed.rest.length;
       continue;
     }
-    const keyMatch = raw.slice(i).match(/^(\w[\w.-]*)=/);
+    const keyMatch = raw.slice(i).match(/^(@?[\w.-]+)=/);
     if (!keyMatch) {
       i++;
       continue;
@@ -2627,6 +2832,14 @@ function tokenizeFlowChain(line) {
       current += ch;
       continue;
     }
+    const op3 = line.slice(i, i + 3);
+    if (op3 === "..>" || op3 === "<->") {
+      if (current.trim()) parts.push(current.trim());
+      parts.push(op3);
+      current = "";
+      i += 2;
+      continue;
+    }
     const op = line.slice(i, i + 2);
     if (op === "->" || op === "<-" || op === "~>" || op === "--") {
       if (current.trim()) parts.push(current.trim());
@@ -2650,11 +2863,27 @@ function parseFlowChain(line, lineNo) {
   let from = splitTargetLabel(parts[i++], lineNo).node;
   while (i < parts.length) {
     const opToken = parts[i++];
-    const op = EDGE_OPERATORS[opToken];
-    if (!op) throw new ParseError(`unknown flow operator '${opToken}'`, lineNo);
     if (i >= parts.length) throw new ParseError(`expected target after '${opToken}'`, lineNo);
     const { node: to, label } = splitTargetLabel(parts[i++], lineNo);
     if (!to) throw new ParseError(`expected target node after '${opToken}'`, lineNo);
+    if (opToken === "<->") {
+      segments.push({
+        from,
+        op: "request",
+        to,
+        label
+      });
+      segments.push({
+        from: to,
+        op: "response",
+        to: from,
+        label
+      });
+      from = to;
+      continue;
+    }
+    const op = EDGE_OPERATORS[opToken];
+    if (!op) throw new ParseError(`unknown flow operator '${opToken}'`, lineNo);
     segments.push({
       from: op === "response" ? to : from,
       op,
@@ -3005,7 +3234,7 @@ function validateReferences(ast) {
     }
   }
   for (const node of Object.values(ast.nodes)) {
-    if (node.style && !ast.styles[node.style]) {
+    if (typeof node.style === "string" && !ast.styles[node.style]) {
       pushWarning(ast.diagnostics, seen, node.line, `node '${node.id}' references unknown style '${node.style}'`);
     }
   }
@@ -3109,6 +3338,7 @@ function parse(source, opts = {}) {
     height: 720,
     fps: 60,
     theme: "paper",
+    explicitTheme: false,
     direction: "LR"
   };
   const styles = {};
@@ -3207,6 +3437,7 @@ function parse(source, opts = {}) {
       const str = parseStringToken(rest2);
       if (str) {
         title = str.value;
+        meta.title = title;
         remainder = str.rest;
       }
       const inlineLayout = remainder.match(/\blayout\s+(LR|RL|TB|BT)\b/i);
@@ -3229,8 +3460,11 @@ function parse(source, opts = {}) {
         } else if (k === "fps") {
           meta.fps = Number(v);
         } else if (k === "duration") meta.duration = Number(v);
-        else if (k === "theme") meta.theme = String(v);
-        else if (k === "direction" || k === "layout") meta.direction = String(v).toUpperCase();
+        else if (k === "theme") {
+          const val = String(v).toLowerCase();
+          meta.theme = val;
+          meta.explicitTheme = val !== "auto";
+        } else if (k === "direction" || k === "layout") meta.direction = String(v).toUpperCase();
         else if (PLAYER_FLAT_KEY_SET.has(k)) {
           const error = applyPlayerSetting(meta.player ??= {}, "player", k, String(v));
           if (error) diagnostics.push({ severity: "warning", message: error, line: lineNo });
@@ -3249,6 +3483,16 @@ function parse(source, opts = {}) {
       i++;
       continue;
     }
+    if (/^theme\s*[:=]?\s*([a-zA-Z0-9_-]+)/i.test(line)) {
+      const match = line.match(/^theme\s*[:=]?\s*([a-zA-Z0-9_-]+)/i);
+      if (match) {
+        const val = match[1].toLowerCase();
+        meta.theme = val;
+        meta.explicitTheme = val !== "auto";
+      }
+      i++;
+      continue;
+    }
     const directiveMatch = line.match(PLAYER_DIRECTIVE_RE);
     if (directiveMatch) {
       const error = applyPlayerSetting(meta.player ??= {}, "player", directiveMatch[1], directiveMatch[2] ?? "");
@@ -3590,7 +3834,13 @@ function matchNode(node, selector) {
   if (selector.kindEquals && node.kind.toLowerCase() !== selector.kindEquals.toLowerCase()) return false;
   if (selector.roleEquals) {
     const role = nodeRole(node.kind);
-    if (role.toLowerCase() !== selector.roleEquals.toLowerCase()) return false;
+    const targetRole = selector.roleEquals.toLowerCase();
+    if (targetRole === "gateway") {
+      const isGateway = role === "network" || ["gateway", "api_gateway", "reverse_proxy", "proxy", "router"].includes(node.kind.toLowerCase());
+      if (!isGateway) return false;
+    } else if (role.toLowerCase() !== targetRole) {
+      return false;
+    }
   }
   if (selector.labelContains) {
     const target = (node.label || node.id).toLowerCase();
@@ -3751,6 +4001,30 @@ var ARCH_RULE_PRESETS = {
         from: { roleEquals: "security" }
       }
     ]
+  },
+  deploymentOwnership: {
+    id: "deployment-ownership",
+    name: "Deployment Ownership & Regional Governance",
+    description: "Ensure production stateful stores and services are guarded in explicit group perimeters",
+    rules: [
+      {
+        id: "no-unprotected-public-database",
+        name: "No Public Database Exposure",
+        description: "Databases and stateful stores must not be directly accessed from public browser/mobile clients.",
+        severity: "error",
+        type: "cannot-connect",
+        from: { roleEquals: "client" },
+        to: { roleEquals: "data" }
+      },
+      {
+        id: "no-cross-region-sync-bypasses",
+        name: "Synchronous Request Cycle Prevention",
+        description: "Synchronous requests must not form cycles across microservices.",
+        severity: "error",
+        type: "forbidden-cycle",
+        edge: { kind: "request" }
+      }
+    ]
   }
 };
 function validateArchitecture(ast, rules = [
@@ -3758,7 +4032,7 @@ function validateArchitecture(ast, rules = [
   ...ARCH_RULE_PRESETS.microservicesGovernance.rules
 ]) {
   const violations = [];
-  const nodes = Object.values(ast.nodes);
+  const nodes = Object.values(ast?.nodes || {});
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
   const edges = extractAllEdges(ast);
   for (const rule of rules) {
@@ -3805,6 +4079,11 @@ function validateArchitecture(ast, rules = [
         break;
       }
       case "forbidden-cycle": {
+        const dtype = ast.meta?.type || ast.config?.type || "architecture";
+        const nonServiceArchetypes = ["state", "sequence", "layers", "flywheel", "loop", "venn"];
+        if (nonServiceArchetypes.includes(dtype)) {
+          break;
+        }
         const cycleInfo = detectCycleInGraph(nodes, edges, rule.edge);
         if (cycleInfo) {
           violations.push({
@@ -4055,26 +4334,66 @@ function classifyTechnology(id, label = "") {
 }
 
 // src/diff.ts
+function extractDiffEdges(ast) {
+  const edges = [];
+  const seen = /* @__PURE__ */ new Set();
+  const add = (from, to, kind, label) => {
+    const key = `${from}->${to}:${kind}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      edges.push({ from, to, kind, label });
+    }
+  };
+  for (const edge of ast.edges || []) {
+    add(edge.from, edge.to, edge.kind, edge.label);
+  }
+  for (const beat of ast.beats || []) {
+    for (const cue of beat.cues || []) {
+      if (cue.kind === "flow") {
+        for (const seg of cue.segments) {
+          add(seg.from, seg.to, seg.op, seg.label);
+        }
+      } else if (cue.kind === "parallel") {
+        for (const child of cue.cues) {
+          if (child.kind === "flow") {
+            for (const seg of child.segments) {
+              add(seg.from, seg.to, seg.op, seg.label);
+            }
+          }
+        }
+      }
+    }
+  }
+  return edges;
+}
 function diffDiagramASTs(beforeAST, afterAST) {
   const nodeDiffs = [];
   const edgeDiffs = [];
-  const beforeNodeIds = new Set(Object.keys(beforeAST.nodes));
-  const afterNodeIds = new Set(Object.keys(afterAST.nodes));
+  const groupDiffs = [];
+  const beforeNodes = beforeAST.nodes || {};
+  const afterNodes = afterAST.nodes || {};
+  const beforeNodeIds = new Set(Object.keys(beforeNodes));
+  const afterNodeIds = new Set(Object.keys(afterNodes));
   let addedNodesCount = 0;
   let removedNodesCount = 0;
   let modifiedNodesCount = 0;
-  for (const [id, afterNode] of Object.entries(afterAST.nodes)) {
+  for (const [id, afterNode] of Object.entries(afterNodes)) {
     if (!beforeNodeIds.has(id)) {
-      nodeDiffs.push({ id, status: "added", after: afterNode, changes: ["Newly added node"] });
+      nodeDiffs.push({ id, status: "added", after: afterNode, changes: ["Newly provisioned node"] });
       addedNodesCount++;
     } else {
-      const beforeNode = beforeAST.nodes[id];
+      const beforeNode = beforeNodes[id];
       const changes = [];
       if (beforeNode.kind !== afterNode.kind) {
-        changes.push(`Kind changed: ${beforeNode.kind} \u2192 ${afterNode.kind}`);
+        changes.push(`Kind: ${beforeNode.kind} \u2192 ${afterNode.kind}`);
       }
       if (beforeNode.label !== afterNode.label) {
-        changes.push(`Label changed: "${beforeNode.label}" \u2192 "${afterNode.label}"`);
+        changes.push(`Label: "${beforeNode.label}" \u2192 "${afterNode.label}"`);
+      }
+      const beforeSrc = beforeNode.props?.["@src"] || beforeNode.props?.["src"];
+      const afterSrc = afterNode.props?.["@src"] || afterNode.props?.["src"];
+      if (beforeSrc !== afterSrc) {
+        changes.push(`Code Provenance: ${beforeSrc || "none"} \u2192 ${afterSrc || "none"}`);
       }
       if (changes.length > 0) {
         nodeDiffs.push({ id, status: "modified", before: beforeNode, after: afterNode, changes });
@@ -4084,84 +4403,137 @@ function diffDiagramASTs(beforeAST, afterAST) {
       }
     }
   }
-  for (const [id, beforeNode] of Object.entries(beforeAST.nodes)) {
+  for (const [id, beforeNode] of Object.entries(beforeNodes)) {
     if (!afterNodeIds.has(id)) {
-      nodeDiffs.push({ id, status: "removed", before: beforeNode, changes: ["Removed node"] });
+      nodeDiffs.push({ id, status: "removed", before: beforeNode, changes: ["Decommissioned node"] });
       removedNodesCount++;
     }
   }
   const edgeKey = (e) => `${e.from}->${e.to}:${e.kind}`;
-  const beforeEdgeMap = new Map(beforeAST.edges.map((e) => [edgeKey(e), e]));
-  const afterEdgeMap = new Map(afterAST.edges.map((e) => [edgeKey(e), e]));
-  for (const [key, afterEdge] of afterEdgeMap) {
+  const beforeEdges = extractDiffEdges(beforeAST);
+  const afterEdges = extractDiffEdges(afterAST);
+  const beforeEdgeMap = new Map(beforeEdges.map((e) => [edgeKey(e), e]));
+  const afterEdgeMap = new Map(afterEdges.map((e) => [edgeKey(e), e]));
+  let addedEdgesCount = 0;
+  let removedEdgesCount = 0;
+  for (const [key, afterEdge] of afterEdgeMap.entries()) {
     if (!beforeEdgeMap.has(key)) {
-      edgeDiffs.push({ key, status: "added", after: afterEdge });
+      edgeDiffs.push({ key, status: "added", after: afterEdge, changes: ["New interaction route"] });
+      addedEdgesCount++;
     } else {
       const beforeEdge = beforeEdgeMap.get(key);
+      const changes = [];
       if (beforeEdge.label !== afterEdge.label) {
-        edgeDiffs.push({ key, status: "modified", before: beforeEdge, after: afterEdge });
+        changes.push(`Protocol/Label: "${beforeEdge.label || ""}" \u2192 "${afterEdge.label || ""}"`);
+      }
+      if (changes.length > 0) {
+        edgeDiffs.push({ key, status: "modified", before: beforeEdge, after: afterEdge, changes });
       } else {
-        edgeDiffs.push({ key, status: "unchanged", before: beforeEdge, after: afterEdge });
+        edgeDiffs.push({ key, status: "unchanged", before: beforeEdge, after: afterEdge, changes: [] });
       }
     }
   }
-  for (const [key, beforeEdge] of beforeEdgeMap) {
+  for (const [key, beforeEdge] of beforeEdgeMap.entries()) {
     if (!afterEdgeMap.has(key)) {
-      edgeDiffs.push({ key, status: "removed", before: beforeEdge });
+      edgeDiffs.push({ key, status: "removed", before: beforeEdge, changes: ["Decommissioned route"] });
+      removedEdgesCount++;
     }
   }
-  const summaryLines = [
-    "### \u{1F4CA} Markdy Architectural Diff Summary",
-    "",
-    `| Metric | Count |`,
-    `|---|---|`,
-    `| \u{1F7E2} Nodes Added | **${addedNodesCount}** |`,
-    `| \u{1F534} Nodes Removed | **${removedNodesCount}** |`,
-    `| \u{1F7E1} Nodes Modified | **${modifiedNodesCount}** |`,
-    ""
-  ];
-  if (addedNodesCount > 0 || modifiedNodesCount > 0 || removedNodesCount > 0) {
-    summaryLines.push("#### Changes Detail");
-    for (const nd of nodeDiffs.filter((n) => n.status !== "unchanged")) {
-      summaryLines.push(`- **${nd.id}** (${nd.status.toUpperCase()}): ${nd.changes.join(", ")}`);
+  const beforeGroups = beforeAST.groups || {};
+  const afterGroups = afterAST.groups || {};
+  const beforeGroupIds = new Set(Object.keys(beforeGroups));
+  const afterGroupIds = new Set(Object.keys(afterGroups));
+  for (const [id, afterGroup] of Object.entries(afterGroups)) {
+    if (!beforeGroupIds.has(id)) {
+      groupDiffs.push({ id, status: "added", after: afterGroup, changes: ["New security / subsystem boundary"] });
+    } else {
+      const beforeGroup = beforeGroups[id];
+      const beforeMembers = new Set(beforeGroup.members || []);
+      const afterMembers = new Set(afterGroup.members || []);
+      const diffMembers = (afterGroup.members || []).filter((m) => !beforeMembers.has(m));
+      if (diffMembers.length > 0 || beforeGroup.members.length !== afterGroup.members.length) {
+        groupDiffs.push({
+          id,
+          status: "modified",
+          before: beforeGroup,
+          after: afterGroup,
+          changes: [`Boundary membership updated: [${(afterGroup.members || []).join(", ")}]`]
+        });
+      }
     }
-    summaryLines.push("");
   }
-  const evolutionLines = [
-    `scene theme=${afterAST.meta.theme || "paper"}`,
-    `layout ${afterAST.meta.direction || "LR"}`,
-    ""
-  ];
-  for (const [id, node] of Object.entries({ ...beforeAST.nodes, ...afterAST.nodes })) {
-    evolutionLines.push(`${node.kind} ${id} "${node.label}"`);
-  }
-  evolutionLines.push("");
-  evolutionLines.push('beat v1 "Baseline Architecture":');
-  const v1NodeIds = Object.keys(beforeAST.nodes).join(" ");
-  if (v1NodeIds) {
-    evolutionLines.push(`  show ${v1NodeIds}`);
-  }
-  evolutionLines.push("");
-  evolutionLines.push('beat transition "Migrate to Target Architecture":');
-  const addedIds = nodeDiffs.filter((n) => n.status === "added").map((n) => n.id);
-  const removedIds = nodeDiffs.filter((n) => n.status === "removed").map((n) => n.id);
-  if (removedIds.length > 0) {
-    evolutionLines.push(`  hide ${removedIds.join(" ")}`);
-  }
-  if (addedIds.length > 0) {
-    evolutionLines.push(`  show ${addedIds.join(" ")}`);
-    evolutionLines.push(`  glow ${addedIds.join(" ")} color="#10b981"`);
+  for (const [id, beforeGroup] of Object.entries(beforeGroups)) {
+    if (!afterGroupIds.has(id)) {
+      groupDiffs.push({ id, status: "removed", before: beforeGroup, changes: ["Dissolved boundary"] });
+    }
   }
+  const evolutionMarkdyScript = generateEvolutionMarkdyScript(
+    beforeAST,
+    afterAST,
+    nodeDiffs,
+    edgeDiffs
+  );
+  const summaryMarkdown = [
+    `# Markdy Architectural Diff Summary`,
+    `- **Nodes Added**: ${addedNodesCount}`,
+    `- **Nodes Removed**: ${removedNodesCount}`,
+    `- **Nodes Modified**: ${modifiedNodesCount}`,
+    `- **Routes Added**: ${addedEdgesCount}`,
+    `- **Routes Removed**: ${removedEdgesCount}`,
+    "",
+    `### Component Delta`,
+    `| Component | Status | Details |`,
+    `| :--- | :--- | :--- |`,
+    ...nodeDiffs.filter((n) => n.status !== "unchanged").map((n) => `| \`${n.id}\` | **${n.status.toUpperCase()}** | ${n.changes.join("; ")} |`),
+    "",
+    `### Connection Delta`,
+    `| Connection | Status | Details |`,
+    `| :--- | :--- | :--- |`,
+    ...edgeDiffs.filter((e) => e.status !== "unchanged").map((e) => `| \`${e.key}\` | **${e.status.toUpperCase()}** | ${e.changes.join("; ")} |`)
+  ].join("\n");
   return {
     nodes: nodeDiffs,
     edges: edgeDiffs,
+    groups: groupDiffs,
     addedNodesCount,
     removedNodesCount,
     modifiedNodesCount,
-    summaryMarkdown: summaryLines.join("\n"),
-    evolutionMarkdyScript: evolutionLines.join("\n")
+    addedEdgesCount,
+    removedEdgesCount,
+    summaryMarkdown,
+    evolutionMarkdyScript
   };
 }
+function generateEvolutionMarkdyScript(beforeAST, afterAST, nodeDiffs, edgeDiffs) {
+  const lines = [`scene theme=paper`, `layout ${afterAST.meta?.direction || "LR"}`, ""];
+  const allNodes = /* @__PURE__ */ new Map();
+  for (const [id, n] of Object.entries(beforeAST.nodes || {})) allNodes.set(id, n);
+  for (const [id, n] of Object.entries(afterAST.nodes || {})) allNodes.set(id, n);
+  for (const [id, node] of allNodes.entries()) {
+    const propsStr = Object.entries(node.props || {}).map(([k, v]) => `${k}=${typeof v === "string" ? `"${v}"` : v}`).join(" ");
+    lines.push(`${node.kind} ${id} "${node.label}" ${propsStr}`.trim());
+  }
+  lines.push("");
+  const beforeNodeIds = Object.keys(beforeAST.nodes || {}).join(" ");
+  lines.push(`beat baseline:`);
+  lines.push(`  show ${beforeNodeIds}`);
+  for (const edge of beforeAST.edges || []) {
+    lines.push(`  ${edge.from} -> ${edge.to} "${edge.label || ""}"`);
+  }
+  const removedNodeIds = nodeDiffs.filter((n) => n.status === "removed").map((n) => n.id);
+  const addedNodeIds = nodeDiffs.filter((n) => n.status === "added").map((n) => n.id);
+  lines.push("");
+  lines.push(`beat transition:`);
+  if (removedNodeIds.length > 0) {
+    lines.push(`  glow ${removedNodeIds.join(" ")} color=#fb7185 strength=1.2`);
+    lines.push(`  hide ${removedNodeIds.join(" ")} dur=800ms`);
+  }
+  if (addedNodeIds.length > 0) {
+    lines.push(`  show ${addedNodeIds.join(" ")} stagger=80ms`);
+    lines.push(`  glow ${addedNodeIds.join(" ")} color=#34d399 strength=1.5`);
+  }
+  return lines.join("\n");
+}
 
 // src/url-codec.ts
 var PREFIX = "~m";
@@ -4253,16 +4625,27 @@ async function decompressMarkdyFromUrlHash(hash) {
 }
 
 // src/router.ts
-function getBoxPortPosition(box, port) {
-  switch (port) {
-    case "left":
-      return { x: box.x, y: box.y + box.height / 2 };
-    case "right":
-      return { x: box.x + box.width, y: box.y + box.height / 2 };
-    case "top":
-      return { x: box.x + box.width / 2, y: box.y };
-    case "bottom":
-      return { x: box.x + box.width / 2, y: box.y + box.height };
+function getBoxPortPosition(box, port, lane) {
+  if (port === "left" || port === "right") {
+    const x = port === "left" ? box.x : box.x + box.width;
+    if (lane && lane.total > 1) {
+      const padding = Math.min(16, box.height * 0.18);
+      const span = box.height - padding * 2;
+      const step = span / (lane.total - 1 || 1);
+      const y = box.y + padding + lane.index * step;
+      return { x, y };
+    }
+    return { x, y: box.y + box.height / 2 };
+  } else {
+    const y = port === "top" ? box.y : box.y + box.height;
+    if (lane && lane.total > 1) {
+      const padding = Math.min(16, box.width * 0.18);
+      const span = box.width - padding * 2;
+      const step = span / (lane.total - 1 || 1);
+      const x = box.x + padding + lane.index * step;
+      return { x, y };
+    }
+    return { x: box.x + box.width / 2, y };
   }
 }
 function selectOptimalPorts(sourceBox, targetBox) {
@@ -4276,12 +4659,96 @@ function selectOptimalPorts(sourceBox, targetBox) {
     return dy > 0 ? { sourcePort: "bottom", targetPort: "top" } : { sourcePort: "top", targetPort: "bottom" };
   }
 }
-function routeOrthogonalEdge(sourceBox, targetBox) {
-  const { sourcePort, targetPort } = selectOptimalPorts(sourceBox, targetBox);
-  const start = getBoxPortPosition(sourceBox, sourcePort);
-  const end = getBoxPortPosition(targetBox, targetPort);
+function buildSmoothSvgPath(start, waypoints, end, cornerRadius = 0) {
+  const allPoints = [start, ...waypoints, end];
+  if (allPoints.length <= 2 || cornerRadius <= 0) {
+    let d2 = `M ${start.x} ${start.y}`;
+    for (const p of waypoints) {
+      d2 += ` L ${p.x} ${p.y}`;
+    }
+    d2 += ` L ${end.x} ${end.y}`;
+    return d2;
+  }
+  let d = `M ${start.x} ${start.y}`;
+  for (let i = 1; i < allPoints.length - 1; i++) {
+    const prev = allPoints[i - 1];
+    const curr = allPoints[i];
+    const next = allPoints[i + 1];
+    const dPrev = Math.hypot(curr.x - prev.x, curr.y - prev.y);
+    const dNext = Math.hypot(next.x - curr.x, next.y - curr.y);
+    const r = Math.min(cornerRadius, dPrev / 2, dNext / 2);
+    if (r < 2) {
+      d += ` L ${curr.x} ${curr.y}`;
+      continue;
+    }
+    const startX = curr.x + (prev.x - curr.x) * (r / dPrev);
+    const startY = curr.y + (prev.y - curr.y) * (r / dPrev);
+    const endX = curr.x + (next.x - curr.x) * (r / dNext);
+    const endY = curr.y + (next.y - curr.y) * (r / dNext);
+    d += ` L ${startX} ${startY}`;
+    d += ` Q ${curr.x} ${curr.y} ${endX} ${endY}`;
+  }
+  d += ` L ${end.x} ${end.y}`;
+  return d;
+}
+function routeOrthogonalEdge(sourceBox, targetBox, options = {}) {
+  const isSelfLoop = sourceBox === targetBox || sourceBox.x === targetBox.x && sourceBox.y === targetBox.y && sourceBox.width === targetBox.width && sourceBox.height === targetBox.height;
+  const MARGIN = options.margin ?? 20;
+  if (isSelfLoop) {
+    const loopSpan = Math.max(28, MARGIN * 1.5);
+    const port = options.sourcePort || options.targetPort || "top";
+    let start2;
+    let end2;
+    let waypoints2;
+    if (port === "top") {
+      const startX = sourceBox.x + sourceBox.width * 0.35;
+      const endX = sourceBox.x + sourceBox.width * 0.65;
+      const topY = sourceBox.y;
+      const apexY = topY - loopSpan;
+      start2 = { x: startX, y: topY };
+      end2 = { x: endX, y: topY };
+      waypoints2 = [{ x: startX, y: apexY }, { x: endX, y: apexY }];
+    } else if (port === "bottom") {
+      const startX = sourceBox.x + sourceBox.width * 0.35;
+      const endX = sourceBox.x + sourceBox.width * 0.65;
+      const botY = sourceBox.y + sourceBox.height;
+      const apexY = botY + loopSpan;
+      start2 = { x: startX, y: botY };
+      end2 = { x: endX, y: botY };
+      waypoints2 = [{ x: startX, y: apexY }, { x: endX, y: apexY }];
+    } else if (port === "left") {
+      const startY = sourceBox.y + sourceBox.height * 0.35;
+      const endY = sourceBox.y + sourceBox.height * 0.65;
+      const leftX = sourceBox.x;
+      const apexX = leftX - loopSpan;
+      start2 = { x: leftX, y: startY };
+      end2 = { x: leftX, y: endY };
+      waypoints2 = [{ x: apexX, y: startY }, { x: apexX, y: endY }];
+    } else {
+      const startY = sourceBox.y + sourceBox.height * 0.35;
+      const endY = sourceBox.y + sourceBox.height * 0.65;
+      const rightX = sourceBox.x + sourceBox.width;
+      const apexX = rightX + loopSpan;
+      start2 = { x: rightX, y: startY };
+      end2 = { x: rightX, y: endY };
+      waypoints2 = [{ x: apexX, y: startY }, { x: apexX, y: endY }];
+    }
+    const svgPathData2 = buildSmoothSvgPath(start2, waypoints2, end2, options.cornerRadius ?? 6);
+    return {
+      sourcePort: port,
+      targetPort: port,
+      startPoint: start2,
+      endPoint: end2,
+      waypoints: waypoints2,
+      svgPathData: svgPathData2
+    };
+  }
+  const optimal = selectOptimalPorts(sourceBox, targetBox);
+  const sourcePort = options.sourcePort || optimal.sourcePort;
+  const targetPort = options.targetPort || optimal.targetPort;
+  const start = getBoxPortPosition(sourceBox, sourcePort, options.sourceLane);
+  const end = getBoxPortPosition(targetBox, targetPort, options.targetLane);
   const waypoints = [];
-  const MARGIN = 20;
   if (sourcePort === "right" && targetPort === "left") {
     if (start.x <= end.x - MARGIN * 2) {
       const midX = (start.x + end.x) / 2;
@@ -4348,11 +4815,7 @@ function routeOrthogonalEdge(sourceBox, targetBox) {
     }
     waypoints.push(p2);
   }
-  let svgPathData = `M ${start.x} ${start.y}`;
-  for (const wp of waypoints) {
-    svgPathData += ` L ${wp.x} ${wp.y}`;
-  }
-  svgPathData += ` L ${end.x} ${end.y}`;
+  const svgPathData = buildSmoothSvgPath(start, waypoints, end, options.cornerRadius ?? 6);
   return {
     sourcePort,
     targetPort,
@@ -4362,6 +4825,550 @@ function routeOrthogonalEdge(sourceBox, targetBox) {
     svgPathData
   };
 }
+function allocatePortLanes(edges, boxes) {
+  const result = /* @__PURE__ */ new Map();
+  const portGroups = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (edge.from === edge.to) continue;
+    const sBox = boxes[edge.from];
+    const tBox = boxes[edge.to];
+    if (!sBox || !tBox) continue;
+    const { sourcePort, targetPort } = selectOptimalPorts(sBox, tBox);
+    const sKey = `${edge.from}:${sourcePort}`;
+    const tKey = `${edge.to}:${targetPort}`;
+    const tgtCenter = { x: tBox.x + tBox.width / 2, y: tBox.y + tBox.height / 2 };
+    const srcCenter = { x: sBox.x + sBox.width / 2, y: sBox.y + sBox.height / 2 };
+    if (!portGroups.has(sKey)) portGroups.set(sKey, []);
+    portGroups.get(sKey).push({
+      edge,
+      role: "source",
+      otherCenterY: tgtCenter.y,
+      otherCenterX: tgtCenter.x
+    });
+    if (!portGroups.has(tKey)) portGroups.set(tKey, []);
+    portGroups.get(tKey).push({
+      edge,
+      role: "target",
+      otherCenterY: srcCenter.y,
+      otherCenterX: srcCenter.x
+    });
+  }
+  for (const [key, list] of portGroups.entries()) {
+    if (list.length <= 1) continue;
+    const isVertical = key.endsWith(":left") || key.endsWith(":right");
+    list.sort((a, b) => {
+      if (isVertical) {
+        if (Math.abs(a.otherCenterY - b.otherCenterY) > 1) {
+          return a.otherCenterY - b.otherCenterY;
+        }
+      } else {
+        if (Math.abs(a.otherCenterX - b.otherCenterX) > 1) {
+          return a.otherCenterX - b.otherCenterX;
+        }
+      }
+      const aMin = a.edge.from < a.edge.to ? a.edge.from : a.edge.to;
+      const aMax = a.edge.from < a.edge.to ? a.edge.to : a.edge.from;
+      const bMin = b.edge.from < b.edge.to ? b.edge.from : b.edge.to;
+      const bMax = b.edge.from < b.edge.to ? b.edge.to : b.edge.from;
+      if (aMin !== bMin || aMax !== bMax) {
+        return (a.edge.id || "").localeCompare(b.edge.id || "");
+      }
+      const aDir = a.edge.from < a.edge.to ? 0 : 1;
+      const bDir = b.edge.from < b.edge.to ? 0 : 1;
+      return aDir - bDir;
+    });
+    list.forEach((item, index) => {
+      const existing = result.get(item.edge) || {};
+      if (item.role === "source") {
+        existing.sourceLane = { index, total: list.length };
+      } else {
+        existing.targetLane = { index, total: list.length };
+      }
+      result.set(item.edge, existing);
+    });
+  }
+  return result;
+}
+
+// src/symbols.ts
+var VECTOR_SYMBOLS = {
+  // Cloud & Infrastructure
+  aws: {
+    name: "AWS",
+    category: "cloud",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L2 7l10 5 10-5-10-5zm0 8.5L4.5 7 12 3.25 19.5 7 12 10.5zM2 17l10 5 10-5M2 12l10 5 10-5"/>`,
+    brandColor: "#FF9900"
+  },
+  gcp: {
+    name: "Google Cloud",
+    category: "cloud",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3z"/>`,
+    brandColor: "#4285F4"
+  },
+  azure: {
+    name: "Microsoft Azure",
+    category: "cloud",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M13.05 4.24l-6.1 11.23L2 17.52l7.73-14.28 3.32 1zm1.09 1.94L18.42 16h-7.8l-1.92 3.76H22l-7.86-13.58z"/>`,
+    brandColor: "#0089D6"
+  },
+  kubernetes: {
+    name: "Kubernetes",
+    category: "compute",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2l8.66 5v10L12 22l-8.66-5V7L12 2zm0 2.31L5.34 7.69v7.62L12 18.69l6.66-3.38V7.69L12 4.31zm0 3.69a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/>`,
+    brandColor: "#326CE5"
+  },
+  docker: {
+    name: "Docker",
+    category: "compute",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M13.98 11.08h1.83V9.25h-1.83v1.83zm-2.75 0h1.83V9.25h-1.83v1.83zm-2.75 0h1.83V9.25H8.48v1.83zm-2.75 0h1.83V9.25H5.73v1.83zm8.25-2.75h1.83V6.5h-1.83v1.83zm-2.75 0h1.83V6.5h-1.83v1.83zm-2.75 0h1.83V6.5H8.48v1.83zm8.25 0h1.83V6.5h-1.83v1.83zm1.83 5.5c-.4 0-.8.1-1.1.3-.8-1.5-2.4-2.5-4.3-2.5H2.4c-.2.7-.4 1.4-.4 2.2 0 4.4 3.6 8 8 8 5 0 9.2-3.6 9.9-8.4.8.1 1.6-.2 2.1-.8.4-.5.5-1.2.3-1.8-.7.7-1.5 1-2.3 1z"/>`,
+    brandColor: "#2496ED"
+  },
+  cloudflare: {
+    name: "Cloudflare",
+    category: "cloud",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M18.42 10.36A6.5 6.5 0 0 0 7.2 9.04 4.5 4.5 0 0 0 3 13.5a4.5 4.5 0 0 0 4.5 4.5h11a3.5 3.5 0 0 0 .92-6.88v-.76z"/>`,
+    brandColor: "#F38020"
+  },
+  s3: {
+    name: "Amazon S3",
+    category: "cloud",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L4 6v12l8 4 8-4V6l-8-4zm0 2.2L18.2 7 12 9.8 5.8 7 12 4.2zM6 8.5l5 2.5v8.2L6 16.7V8.5zm12 8.2l-5 2.5V11l5-2.5v8.2z"/>`,
+    brandColor: "#E05243"
+  },
+  // Databases & Stores
+  postgresql: {
+    name: "PostgreSQL",
+    category: "database",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.4z"/>`,
+    brandColor: "#336791"
+  },
+  mysql: {
+    name: "MySQL",
+    category: "database",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 3c-4.97 0-9 1.79-9 4v10c0 2.21 4.03 4 9 4s9-1.79 9-4V7c0-2.21-4.03-4-9-4zm0 2c4.41 0 7 1.43 7 2s-2.59 2-7 2-7-1.43-7-2 2.59-2 7-2zm0 14c-4.41 0-7-1.43-7-2v-1.82c1.78 1.11 4.29 1.82 7 1.82s5.22-.71 7-1.82V17c0 .57-2.59 2-7 2zm0-5c-4.41 0-7-1.43-7-2v-1.82c1.78 1.11 4.29 1.82 7 1.82s5.22-.71 7-1.82V12c0 .57-2.59 2-7 2z"/>`,
+    brandColor: "#4479A1"
+  },
+  redis: {
+    name: "Redis",
+    category: "database",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L2 7.5l10 5.5 10-5.5L12 2zm-8 8.7V17L12 22.5V16L4 10.7zm16 0L12 16v6.5l8-5.5v-6.3z"/>`,
+    brandColor: "#DC382D"
+  },
+  mongodb: {
+    name: "MongoDB",
+    category: "database",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2C11.5 3.5 7 10.5 7 15c0 3.5 2.5 6 5 7 2.5-1 5-3.5 5-7 0-4.5-4.5-11.5-5-13zm0 17.5c-1.5-.7-3-2.5-3-4.5 0-2.8 2.2-7 3-9 0.8 2 3 6.2 3 9 0 2-1.5 3.8-3 4.5z"/>`,
+    brandColor: "#47A248"
+  },
+  cassandra: {
+    name: "Apache Cassandra",
+    category: "database",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm-4-9h8v2H8z"/>`,
+    brandColor: "#1287B1"
+  },
+  sqlite: {
+    name: "SQLite",
+    category: "database",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2C6.48 2 2 4.69 2 8v8c0 3.31 4.48 6 10 6s10-2.69 10-6V8c0-3.31-4.48-6-10-6zm0 2c4.42 0 8 1.79 8 4s-3.58 4-8 4-8-1.79-8-4 3.58-4 8-4zm0 16c-4.42 0-8-1.79-8-4v-2.38c2.08 1.47 5.04 2.38 8 2.38s5.92-.91 8-2.38V16c0 2.21-3.58 4-8 4z"/>`,
+    brandColor: "#003B57"
+  },
+  kafka: {
+    name: "Apache Kafka",
+    category: "messaging",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 3a9 9 0 1 0 9 9 9 9 0 0 0-9-9zm0 16a7 7 0 1 1 7-7 7 7 0 0 1-7 7zm-3-8a2 2 0 1 0-2-2 2 2 0 0 0 2 2zm6 0a2 2 0 1 0-2-2 2 2 0 0 0 2 2zm-3 6a2 2 0 1 0-2-2 2 2 0 0 0 2 2z"/>`,
+    brandColor: "#231F20"
+  },
+  rabbitmq: {
+    name: "RabbitMQ",
+    category: "messaging",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a5 5 0 0 0-5 5v1H5a3 3 0 0 0-3 3v7a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4v-7a3 3 0 0 0-3-3h-2V7a5 5 0 0 0-5-5zm-3 6a3 3 0 0 1 6 0v1H9V8zm-3 5h2v2H6v-2zm12 0h2v2h-2v-2z"/>`,
+    brandColor: "#FF6600"
+  },
+  elasticsearch: {
+    name: "Elasticsearch",
+    category: "database",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2A10 10 0 1 0 22 12 10 10 0 0 0 12 2zm-1 3.1a6.9 6.9 0 0 1 5.5 2.9h-11A6.9 6.9 0 0 1 11 5.1zM5.1 12c0-.7.1-1.3.3-2h13.2c.2.7.3 1.3.3 2s-.1 1.3-.3 2H5.4c-.2-.7-.3-1.3-.3-2zm5.9 6.9a6.9 6.9 0 0 1-5.5-2.9h11a6.9 6.9 0 0 1-5.5 2.9z"/>`,
+    brandColor: "#005571"
+  },
+  // Compute, Gateway & Runtimes
+  nodejs: {
+    name: "Node.js",
+    category: "runtime",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L3.5 7v10L12 22l8.5-5V7L12 2zm6.5 13.7L12 19.5l-6.5-3.8V8.3L12 4.5l6.5 3.8v7.4z"/>`,
+    brandColor: "#339933"
+  },
+  python: {
+    name: "Python",
+    category: "runtime",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M11.9 2c-3.1 0-4.9.4-4.9 2.2V6h5v1.5H5.8C3.7 7.5 2 9.2 2 11.3c0 2.2 1.4 3.7 3.8 3.7h1.4v-1.9c0-1.8 1.6-3.3 3.5-3.3h5.2V7.7C15.9 4.1 14.8 2 11.9 2zM9 4.2a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6zm3.1 17.8c3.1 0 4.9-.4 4.9-2.2V18h-5v-1.5h6.2c2.1 0 3.8-1.7 3.8-3.8 0-2.2-1.4-3.7-3.8-3.7h-1.4v1.9c0 1.8-1.6 3.3-3.5 3.3H8.6v2.1c0 3.6 1.1 5.7 4.5 5.7zM15 18.2a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6z"/>`,
+    brandColor: "#3776AB"
+  },
+  golang: {
+    name: "Go",
+    category: "runtime",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v2h3v2h-5v-6h5v2zm-7-2H7v-2h2v2z"/>`,
+    brandColor: "#00ADD8"
+  },
+  rust: {
+    name: "Rust",
+    category: "runtime",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14.5l-2-3h-1v3H8V7.5h4a3 3 0 0 1 3 3 3 3 0 0 1-2 2.8l2 3.2zm-1-6.5h-2v2h2a1 1 0 0 0 1-1 1 1 0 0 0-1-1z"/>`,
+    brandColor: "#DEA584"
+  },
+  nginx: {
+    name: "Nginx",
+    category: "gateway",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L2 7.8v8.4L12 22l10-5.8V7.8L12 2zm-4 13.5V8.5l3 3.5v3.5l-3-3.5zm8 0l-3-3.5V8.5l3 3.5v3.5z"/>`,
+    brandColor: "#009639"
+  },
+  envoy: {
+    name: "Envoy Proxy",
+    category: "gateway",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L2 7v10l10 5 10-5V7L12 2zm0 2.2L19.5 8 12 11.8 4.5 8 12 4.2zM4 9.5l7 3.5v7.2L4 16.7V9.5zm16 7.2l-7 3.5V13l7-3.5v7.2z"/>`,
+    brandColor: "#BF360C"
+  },
+  graphql: {
+    name: "GraphQL",
+    category: "gateway",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2l8.66 5v10L12 22l-8.66-5V7L12 2zm0 2.4L5.5 8.1v7.8L12 19.6l6.5-3.7V8.1L12 4.4zM12 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>`,
+    brandColor: "#E10098"
+  },
+  // Clients & Browsers
+  chrome: {
+    name: "Google Chrome",
+    category: "client",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 3.6a6.4 6.4 0 0 1 5.48 3.1h-5.48a3.3 3.3 0 0 0-3.1 2.2L6.16 6.16A6.36 6.36 0 0 1 12 5.6zm-6.4 6.4a6.4 6.4 0 0 1 .52-2.54l2.74 4.74a3.3 3.3 0 0 0 3.1 1.76v4.6A6.4 6.4 0 0 1 5.6 12zm6.4 6.4a6.36 6.36 0 0 1-4.74-2.14l2.74-4.74a3.3 3.3 0 0 0 2 0l2.74 4.74A6.36 6.36 0 0 1 12 18.4zm0-4.4a2 2 0 1 1 2-2 2 2 0 0 1-2 2z"/>`,
+    brandColor: "#4285F4"
+  },
+  terminal: {
+    name: "Terminal",
+    category: "client",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 14H4V8h16v10zm-12-3l3-3-3-3 1.41-1.41L12.83 12l-3.42 3.41L8 15zm6 0h4v2h-4v-2z"/>`,
+    brandColor: "#4ADE80"
+  },
+  // Security & Identity
+  vault: {
+    name: "HashiCorp Vault",
+    category: "security",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L4 6v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V6l-8-4zm0 6a3 3 0 0 1 3 3c0 1.3-.84 2.4-2 2.82V17h-2v-3.18A3 3 0 0 1 9 11a3 3 0 0 1 3-3z"/>`,
+    brandColor: "#000000"
+  },
+  opa: {
+    name: "Open Policy Agent",
+    category: "security",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L3 7v10l9 5 9-5V7l-9-5zm0 2.3l6.7 3.7v7.4L12 19.1 5.3 15.4V8l6.7-3.7zM12 7a5 5 0 1 0 5 5 5 5 0 0 0-5-5z"/>`,
+    brandColor: "#5B7382"
+  },
+  keycloak: {
+    name: "Keycloak",
+    category: "security",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-2V7a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v3H9V7zm3 6a2 2 0 0 1 2 2v2a2 2 0 0 1-4 0v-2a2 2 0 0 1 2-2z"/>`,
+    brandColor: "#0088CE"
+  },
+  // Observability & SRE
+  prometheus: {
+    name: "Prometheus",
+    category: "observability",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14h-2v-6h2v6zm0-8h-2V6h2v2z"/>`,
+    brandColor: "#E6522C"
+  },
+  datadog: {
+    name: "Datadog",
+    category: "observability",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.5 14H15v-3h-2v3h-1.5v-6H13v1.5h2V10h1.5v6zm-7 0H8v-6h3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H9.5zm0-4.5V14H11a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H9.5z"/>`,
+    brandColor: "#632CA6"
+  },
+  jaeger: {
+    name: "Jaeger Tracing",
+    category: "observability",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-1 5h2v6h-2zm0 8h2v2h-2z"/>`,
+    brandColor: "#60D0E4"
+  },
+  grafana: {
+    name: "Grafana",
+    category: "observability",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.93c-2.82-.41-5-2.85-5-5.93 0-.82.16-1.6.46-2.31l3.07 3.07c-.12.4-.19.82-.19 1.25 0 1.66 1.34 3 3 3 .43 0 .85-.07 1.25-.19l-2.59-2.59zM16.5 12c0 1.93-1.12 3.6-2.76 4.38l-4.12-4.12A4.47 4.47 0 0 1 12 7.5c2.48 0 4.5 2.02 4.5 4.5z"/>`,
+    brandColor: "#F46800"
+  },
+  pagerduty: {
+    name: "PagerDuty",
+    category: "observability",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M5 3h7a6 6 0 0 1 6 6 6 6 0 0 1-6 6H9v6H5V3zm4 8h3a2 2 0 0 0 2-2 2 2 0 0 0-2-2H9v4z"/>`,
+    brandColor: "#04AC38"
+  },
+  slack: {
+    name: "Slack",
+    category: "messaging",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M6 15a2 2 0 1 1-2-2h2v2zm1 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v5a2 2 0 1 1-4 0v-5zm2-8a2 2 0 1 1-2-2 2 2 0 0 1 2 2v2zm0 1a2 2 0 0 1 2 2 2 2 0 0 1-2 2H4a2 2 0 1 1 0-4h5zm8 2a2 2 0 1 1 2 2h-2v-2zm-1 0a2 2 0 0 1-2 2 2 2 0 0 1-2-2V5a2 2 0 1 1 4 0v5zm-2 8a2 2 0 1 1 2 2 2 2 0 0 1-2-2v-2zm0-1a2 2 0 0 1-2-2 2 2 0 0 1 2-2h5a2 2 0 1 1 0 4h-5z"/>`,
+    brandColor: "#4A154B"
+  },
+  // Big Data, Lakehouse & AI
+  spark: {
+    name: "Apache Spark",
+    category: "data",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2l2.4 7.4h7.6l-6.2 4.5 2.4 7.4-6.2-4.5-6.2 4.5 2.4-7.4-6.2-4.5h7.6z"/>`,
+    brandColor: "#E25A1C"
+  },
+  flink: {
+    name: "Apache Flink",
+    category: "data",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 15h-2v-5h2zm0-7h-2V8h2z"/>`,
+    brandColor: "#E6522C"
+  },
+  snowflake: {
+    name: "Snowflake",
+    category: "data",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2v20m-7.07-2.93l14.14-14.14M2 12h20M4.93 4.93l14.14 14.14" stroke="currentColor" stroke-width="2" fill="none"/>`,
+    brandColor: "#29B5E8"
+  },
+  delta: {
+    name: "Delta Lake",
+    category: "data",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2L2 22h20L12 2zm0 5l6.5 13H5.5L12 7z"/>`,
+    brandColor: "#00A4E4"
+  },
+  superset: {
+    name: "Apache Superset",
+    category: "data",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M3 3h4v18H3zm7 6h4v12h-4zm7-4h4v16h-4z"/>`,
+    brandColor: "#20A6B2"
+  },
+  gemini: {
+    name: "Google Gemini",
+    category: "compute",
+    viewBox: "0 0 24 24",
+    svgPaths: `<path fill="currentColor" d="M12 2C12 7.52 7.52 12 2 12c5.48 0 9.95 4.48 10 10 .05-5.52 4.52-10 10-10-5.48 0-9.95-4.48-10-10z"/>`,
+    brandColor: "#8E75FF"
+  }
+};
+function resolveVectorSymbol(nameOrAlias) {
+  if (!nameOrAlias || typeof nameOrAlias !== "string") return null;
+  const key = nameOrAlias.trim().toLowerCase().replace(/[\s_.-]+/g, "");
+  if (VECTOR_SYMBOLS[key]) return VECTOR_SYMBOLS[key];
+  const aliases = {
+    postgres: "postgresql",
+    pg: "postgresql",
+    k8s: "kubernetes",
+    kube: "kubernetes",
+    cf: "cloudflare",
+    node: "nodejs",
+    py: "python",
+    go: "golang",
+    elastic: "elasticsearch",
+    es: "elasticsearch",
+    rabbit: "rabbitmq",
+    mq: "rabbitmq",
+    browser: "chrome",
+    web: "chrome",
+    cli: "terminal",
+    console: "terminal",
+    shell: "terminal",
+    awss3: "s3",
+    deltalake: "delta",
+    lakehouse: "delta",
+    llm: "gemini",
+    ai: "gemini"
+  };
+  const target = aliases[key];
+  return target ? VECTOR_SYMBOLS[target] || null : null;
+}
+function renderSymbolSvg(symbol, options) {
+  const resolved = typeof symbol === "string" ? resolveVectorSymbol(symbol) : symbol;
+  if (!resolved) return null;
+  const size = options?.size ?? 18;
+  const className = options?.className ? ` class="${options.className}"` : "";
+  const style = options?.color ? ` style="color: ${options.color}"` : "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${resolved.viewBox}" width="${size}" height="${size}"${className}${style} aria-hidden="true">${resolved.svgPaths}</svg>`;
+}
+function listAvailableSymbols() {
+  return Object.keys(VECTOR_SYMBOLS);
+}
+
+// src/provenance.ts
+var CONTROL_CHAR_RE = /[\u0000-\u001f\u007f]/;
+function parseCodeAnchor(raw, repositoryUrl, revision) {
+  if (typeof raw !== "string" || !raw.trim()) return null;
+  const trimmed = raw.trim();
+  const ghMatch = trimmed.match(/^(?:https:\/\/github\.com\/[^/]+\/[^/]+\/blob\/([^/]+)\/)([^#]+)(?:#L(\d+)(?:-L(\d+))?)?$/i);
+  if (ghMatch) {
+    const rev = ghMatch[1];
+    const filePath2 = decodeURIComponent(ghMatch[2]);
+    const startLine2 = ghMatch[3] ? parseInt(ghMatch[3], 10) : void 0;
+    const endLine2 = ghMatch[4] ? parseInt(ghMatch[4], 10) : startLine2;
+    return {
+      raw: trimmed,
+      filePath: filePath2,
+      startLine: startLine2,
+      endLine: endLine2,
+      revision: rev,
+      resolvedHref: trimmed
+    };
+  }
+  const [filePathRaw, fragment] = trimmed.split("#");
+  let filePath = filePathRaw.trim().replace(/\\/g, "/");
+  if (filePath.startsWith("./")) {
+    filePath = filePath.slice(2);
+  }
+  if (!filePath || filePath.startsWith("/") || filePath.startsWith("../") || filePath === ".." || filePath.includes("/../") || filePath.endsWith("/..") || CONTROL_CHAR_RE.test(filePath)) {
+    return null;
+  }
+  let startLine;
+  let endLine;
+  if (fragment) {
+    const lineMatch = fragment.match(/^L?(\d+)(?:-L?(\d+))?$/i);
+    if (lineMatch) {
+      startLine = parseInt(lineMatch[1], 10);
+      endLine = lineMatch[2] ? parseInt(lineMatch[2], 10) : startLine;
+    }
+  }
+  let resolvedHref;
+  if (repositoryUrl) {
+    const base = repositoryUrl.replace(/\/$/, "");
+    const rev = revision || "main";
+    const lineFrag = startLine ? `#L${startLine}${endLine && endLine !== startLine ? `-L${endLine}` : ""}` : "";
+    resolvedHref = `${base}/blob/${rev}/${filePath}${lineFrag}`;
+  }
+  return {
+    raw: trimmed,
+    filePath,
+    startLine,
+    endLine,
+    revision,
+    resolvedHref
+  };
+}
+function extractDiagramCodeAnchors(ast, repositoryUrl, revision) {
+  const anchors = /* @__PURE__ */ new Map();
+  for (const [nodeId, node] of Object.entries(ast.nodes || {})) {
+    const rawAnchor = node.props["@src"] || node.props["src"] || node.props["@source"] || node.props["source"] || node.props["@code"] || node.props["code"] || node.props["@anchor"] || node.props["anchor"];
+    if (rawAnchor) {
+      const parsed = parseCodeAnchor(rawAnchor, repositoryUrl, revision);
+      if (parsed) {
+        anchors.set(nodeId, parsed);
+      }
+    }
+  }
+  return anchors;
+}
+function verifyCodeAnchorsWithReader(anchors, fileReader) {
+  const diagnostics = [];
+  let verifiedCount = 0;
+  for (const [nodeId, anchor] of anchors.entries()) {
+    const { filePath, startLine, endLine } = anchor;
+    const segments = filePath.split("/");
+    if (segments.some((s) => !s || s === "." || s === "..") || segments[0] === ".git") {
+      diagnostics.push({
+        nodeId,
+        severity: "error",
+        code: "provenance/path-escape",
+        message: `Code anchor for node "${nodeId}" must stay within repository and cannot address .git (${filePath}).`,
+        filePath,
+        fixSuggestion: "Remove relative path traversal dots or .git segments."
+      });
+      continue;
+    }
+    if (!fileReader.fileExists(filePath)) {
+      diagnostics.push({
+        nodeId,
+        severity: "error",
+        code: "provenance/file-not-found",
+        message: `Referenced file "${filePath}" does not exist in target repository.`,
+        filePath,
+        fixSuggestion: `Ensure "${filePath}" is committed and relative to repository root.`
+      });
+      continue;
+    }
+    const lineCount = fileReader.getLineCount(filePath);
+    if (startLine !== void 0 && (startLine < 1 || startLine > lineCount)) {
+      diagnostics.push({
+        nodeId,
+        severity: "warning",
+        code: "provenance/line-out-of-bounds",
+        message: `Line #${startLine} exceeds total line count (${lineCount}) of file "${filePath}".`,
+        filePath,
+        line: startLine,
+        fixSuggestion: `Adjust line range to fall within 1..${lineCount}.`
+      });
+      continue;
+    }
+    if (endLine !== void 0 && (endLine < (startLine || 1) || endLine > lineCount)) {
+      diagnostics.push({
+        nodeId,
+        severity: "warning",
+        code: "provenance/line-out-of-bounds",
+        message: `End line #${endLine} is out of bounds for "${filePath}" (total lines: ${lineCount}).`,
+        filePath,
+        line: endLine,
+        fixSuggestion: `Ensure end line is >= start line and <= ${lineCount}.`
+      });
+      continue;
+    }
+    verifiedCount++;
+  }
+  const isValid = diagnostics.filter((d) => d.severity === "error").length === 0;
+  const summaryMarkdown = [
+    `### \u{1F6E1}\uFE0F Code Provenance Verification Report`,
+    `- **Status**: ${isValid ? "\u2705 VERIFIED" : "\u274C FAILED"}`,
+    `- **Total Anchors**: ${anchors.size}`,
+    `- **Verified In-Tree**: ${verifiedCount}`,
+    `- **Diagnostics**: ${diagnostics.length} issue(s)`,
+    ...diagnostics.length > 0 ? [
+      "",
+      `| Node | Severity | Issue | File / Location | Fix |`,
+      `| :--- | :--- | :--- | :--- | :--- |`,
+      ...diagnostics.map(
+        (d) => `| \`${d.nodeId}\` | **${d.severity.toUpperCase()}** | ${d.message} | \`${d.filePath}${d.line ? `:${d.line}` : ""}\` | ${d.fixSuggestion || "N/A"} |`
+      )
+    ] : []
+  ].join("\n");
+  return {
+    isValid,
+    totalAnchors: anchors.size,
+    verifiedCount,
+    anchors,
+    diagnostics,
+    summaryMarkdown
+  };
+}
 
 // src/syntax-diagnostics.ts
 function damerauLevenshteinDistance(a, b) {
@@ -4621,7 +5628,7 @@ function diagnoseMarkdyCode(code, options = {}) {
             snippet: trimmed,
             suggestion: closeTheme ? `Use theme '${closeTheme.match}'.` : `Choose from: ${THEME_NAMES.join(", ")}.`,
             didYouMean: closeTheme?.match,
-            ruleExplanation: "Supported themes: paper, editorial, midnight, blueprint, graphite, nebula, sketchy, terminal.",
+            ruleExplanation: "Supported themes: paper, editorial, midnight, blueprint, graphite, nebula, sketchy, terminal, ink, doodle.",
             fix: closeTheme ? { original: themeMatch[0], replacement: `theme=${closeTheme.match}` } : void 0
           });
         }
@@ -5517,7 +6524,9 @@ function getIntelliCodeCompletions(docText, cursorLine, cursorCol) {
       { name: "editorial", desc: "High-contrast serif luxury publication layout" },
       { name: "graphite", desc: "Sleek slate monochrome engineering aesthetic" },
       { name: "terminal", desc: "Retro phosphor CRT hacker terminal green on black" },
-      { name: "sketchy", desc: "Hand-drawn sketchy whiteboard marker design" }
+      { name: "sketchy", desc: "Hand-drawn sketchy whiteboard marker design" },
+      { name: "ink", desc: "Monochromatic blue ink style inspired by ballpoint pens, fountain pens, cyanotypes & porcelain" },
+      { name: "doodle", desc: "Playful hand-drawn doodle sketchbook with felt-tip marker pens and comic block shadows" }
     ];
     for (const t of themeEntries) {
       items.push({
@@ -6073,7 +7082,1593 @@ function formatValue(value) {
   if (typeof value === "string") return value;
   return JSON.stringify(value);
 }
+
+// src/recipes.ts
+var ARCHITECTURE_RECIPES = [
+  {
+    id: "cache-aside",
+    name: "Multi-Tier Cache-Aside Architecture",
+    category: "caching",
+    description: "High-performance cache-aside pattern with Redis Cluster, relational database persistence, and asynchronous cache warming.",
+    keywords: ["cache", "redis", "postgres", "cache-aside", "hit", "miss", "warm", "database", "latency"],
+    recommendedLayout: "LR",
+    primaryNodes: ["Client", "Gateway", "URLService", "RedisCluster", "PostgreSQL"],
+    highlights: [
+      "Sub-millisecond read latency on cache hit",
+      "Asynchronous cache population on miss",
+      "Graceful fallback on cache eviction"
+    ],
+    code: `scene "Multi-Tier Cache-Aside Architecture" theme=auto
+layout LR
+
+browser Client "Web Client" icon=chrome
+gateway Gateway "API Gateway" icon=nginx @src="src/gateway/proxy.ts#L12"
+service URLService "URL Service" icon=nodejs @src="src/services/resolver.ts#L25"
+cache RedisCluster "Redis Cluster" icon=redis
+database PostgreSQL "PostgreSQL 16" icon=postgresql @src="src/db/schema.sql#L1"
+
+beat cache_hit "1. Cache Hit Path":
+  show Client Gateway URLService RedisCluster stagger=50ms
+  frame Client Gateway URLService RedisCluster zoom=1.12
+  Client -> Gateway "GET /link" -> URLService "resolve"
+  URLService -> RedisCluster "GET key:url"
+  URLService <- RedisCluster "200 Target URL"
+  Client <- Gateway "301 Redirect"
+
+beat cache_miss "2. Cache Miss & Async Warm":
+  show PostgreSQL stagger=50ms
+  frame URLService RedisCluster PostgreSQL zoom=1.15
+  URLService -> PostgreSQL "SELECT dest WHERE key = 'url'"
+  URLService <- PostgreSQL "Row Found"
+  URLService ~> RedisCluster "SETEX key:url (TTL 1h)"
+  glow PostgreSQL color=#38bdf8 & glow RedisCluster color=#22c55e
+`
+  },
+  {
+    id: "event-driven-eda",
+    name: "Event-Driven EDA with Kafka & Change Data Capture",
+    category: "streaming",
+    description: "Decoupled real-time event streaming pipeline using Kafka/Redpanda with Debezium CDC, Schema Registry, and DLQ handling.",
+    keywords: ["kafka", "event", "streaming", "eda", "cdc", "debezium", "pubsub", "dlq", "consumer"],
+    recommendedLayout: "LR",
+    primaryNodes: ["OrderService", "DebeziumCDC", "KafkaCluster", "NotificationSvc", "AnalyticsConsumer", "DeadLetterQueue"],
+    highlights: [
+      "Zero dual-write penalty with transactional outbox",
+      "Ordered partition publishing with schema validation",
+      "Dead Letter Queue for poison-pill isolation"
+    ],
+    code: `scene "Event-Driven EDA with Kafka & CDC" theme=midnight
+layout LR
+
+service OrderSvc "Order Service" icon=golang @src="src/orders/handler.go#L40"
+database OrderDB "Order Store" icon=postgresql
+service DebeziumCDC "Debezium CDC" icon=docker
+queue KafkaCluster "Kafka Event Stream" icon=kafka
+service NotificationSvc "Notification Engine" icon=nodejs
+service AnalyticsConsumer "Real-Time Analytics" icon=python
+queue DLQ "Dead Letter Queue" icon=rabbitmq
+
+beat order_outbox "1. Transactional Outbox Commit":
+  show OrderSvc OrderDB DebeziumCDC KafkaCluster stagger=50ms
+  OrderSvc -> OrderDB "COMMIT (Order + Outbox Event)"
+  OrderDB -> DebeziumCDC "WAL Stream"
+  DebeziumCDC ~> KafkaCluster "Publish order.created"
+
+beat consumer_fanout "2. Real-Time Consumer Fanout":
+  show NotificationSvc AnalyticsConsumer DLQ stagger=50ms
+  KafkaCluster ~> NotificationSvc "Consume order.created"
+  KafkaCluster ~> AnalyticsConsumer "Consume order.created"
+  NotificationSvc -> DLQ "Routing Reject (Retries Exceeded)"
+  glow KafkaCluster color=#fbbf24 & glow DLQ color=#fb7185
+`
+  },
+  {
+    id: "cqrs-event-sourcing",
+    name: "CQRS & Event Sourcing Architecture",
+    category: "streaming",
+    description: "Strict Command Query Responsibility Segregation with immutable append-only Event Store and read-optimized query projections.",
+    keywords: ["cqrs", "event sourcing", "event store", "projection", "read model", "command", "query"],
+    recommendedLayout: "LR",
+    primaryNodes: ["CommandAPI", "CommandHandler", "EventStore", "ProjectionEngine", "ReadDB", "QueryAPI"],
+    highlights: [
+      "Complete auditability via append-only event stream",
+      "Independent write-scaling and read-scaling",
+      "Zero lock contention between queries and mutations"
+    ],
+    code: `scene "CQRS & Event Sourcing Architecture" theme=blueprint
+layout LR
+
+gateway CommandAPI "Command API" icon=nginx
+service CommandHandler "Command Handler" icon=golang @src="src/commands/execute.go#L18"
+database EventStore "Event Store (Append-Only)" icon=cassandra
+service ProjectionEngine "Projection Engine" icon=rust @src="src/projections/sync.rs#L30"
+database ReadDB "Read Database" icon=mongodb
+gateway QueryAPI "Query API" icon=nodejs
+
+beat write_command "1. Command & Append Event":
+  show CommandAPI CommandHandler EventStore stagger=50ms
+  CommandAPI -> CommandHandler "POST /orders/create"
+  CommandHandler -> EventStore "APPEND OrderCreatedEvent"
+  CommandHandler <- EventStore "Event Ack (Offset: 10482)"
+  CommandAPI <- CommandHandler "202 Accepted"
+
+beat async_projection "2. Asynchronous Projection Update":
+  show ProjectionEngine ReadDB QueryAPI stagger=50ms
+  EventStore ~> ProjectionEngine "Tail Commit Log"
+  ProjectionEngine -> ReadDB "UPSERT Materialized Order View"
+  QueryAPI -> ReadDB "SELECT * FROM orders WHERE id = :id"
+  QueryAPI <- ReadDB "Read Model Payload"
+`
+  },
+  {
+    id: "api-gateway-mesh",
+    name: "Cloud-Native API Gateway & Service Mesh",
+    category: "microservices",
+    description: "Enterprise zero-trust microservices architecture with Envoy/Istio service mesh, mTLS enforcement, and distributed tracing.",
+    keywords: ["gateway", "mesh", "envoy", "istio", "microservices", "mtls", "kubernetes", "discovery"],
+    recommendedLayout: "LR",
+    primaryNodes: ["IngressGateway", "AuthService", "OrderMeshSvc", "PaymentMeshSvc", "InventoryMeshSvc", "JaegerCollector"],
+    highlights: [
+      "Strict mTLS identity verification between sidecars",
+      "Global rate limiting and distributed OpenTelemetry spans",
+      "Dynamic circuit breaking and automated retries"
+    ],
+    code: `scene "Cloud-Native API Gateway & Service Mesh" theme=graphite
+layout LR
+
+gateway IngressGateway "Envoy Ingress Gateway" icon=envoy @src="k8s/gateway.yaml#L1"
+service AuthService "Auth & Token Service" icon=nodejs @src="src/auth/token.ts#L44"
+service OrderMeshSvc "Order Service (mTLS)" icon=golang
+service PaymentMeshSvc "Payment Gateway (mTLS)" icon=nodejs
+service InventoryMeshSvc "Inventory Service (mTLS)" icon=python
+service JaegerCollector "OpenTelemetry Collector" icon=jaeger
+
+beat ingress_auth "1. Edge Authentication & Route Verification":
+  show IngressGateway AuthService JaegerCollector stagger=50ms
+  IngressGateway -> AuthService "Validate JWT Bearer"
+  IngressGateway <- AuthService "Claims Verified"
+  IngressGateway ~> JaegerCollector "Span: ingress_entry"
+
+beat internal_mesh_flow "2. Internal mTLS Mesh Fanout":
+  show OrderMeshSvc PaymentMeshSvc InventoryMeshSvc stagger=50ms
+  IngressGateway -> OrderMeshSvc "POST /checkout (mTLS)"
+  OrderMeshSvc -> PaymentMeshSvc "POST /charge (mTLS)"
+  OrderMeshSvc -> InventoryMeshSvc "POST /reserve (mTLS)"
+  PaymentMeshSvc ~> JaegerCollector "Span: payment_settled"
+  InventoryMeshSvc ~> JaegerCollector "Span: inventory_reserved"
+  glow IngressGateway color=#38bdf8 & glow OrderMeshSvc color=#22c55e
+`
+  },
+  {
+    id: "zero-trust-security",
+    name: "Zero-Trust Security & Enclave Perimeter",
+    category: "security",
+    description: "Defense-in-depth zero-trust security perimeter featuring OIDC authentication, Open Policy Agent authorization, and Nitro Enclaves.",
+    keywords: ["security", "zero-trust", "oidc", "opa", "policy", "enclave", "encryption", "vault", "waf"],
+    recommendedLayout: "LR",
+    primaryNodes: ["CloudflareWAF", "IdentityOIDC", "PolicyEngineOPA", "KeyVault", "SecureEnclave", "AuditLogStore"],
+    highlights: [
+      "Continuous runtime identity verification on every invocation",
+      "Confidential computing in isolated CPU Nitro enclaves",
+      "Immutable write-once cryptographic audit trail"
+    ],
+    code: `scene "Zero-Trust Security & Enclave Perimeter" theme=midnight
+layout LR
+
+gateway CloudflareWAF "Cloudflare Edge WAF" icon=cloudflare
+service IdentityOIDC "Identity Provider (OIDC)" icon=keycloak
+service PolicyEngineOPA "Policy Engine (OPA)" icon=opa @src="policies/authz.rego#L1"
+service KeyVault "HashiCorp Vault" icon=vault @src="config/vault.hcl#L10"
+service SecureEnclave "AWS Nitro Enclave" icon=aws
+database AuditLogStore "WORM Audit Store" icon=s3
+
+beat access_request "1. Identity & Policy Evaluation":
+  show CloudflareWAF IdentityOIDC PolicyEngineOPA stagger=50ms
+  CloudflareWAF -> IdentityOIDC "Authenticate Request"
+  CloudflareWAF <- IdentityOIDC "Token Issued"
+  CloudflareWAF -> PolicyEngineOPA "Evaluate RBAC/ABAC Context"
+  CloudflareWAF <- PolicyEngineOPA "Decision: ALLOW"
+
+beat confidential_execution "2. Enclave Decryption & Audit":
+  show SecureEnclave KeyVault AuditLogStore stagger=50ms
+  CloudflareWAF -> SecureEnclave "Execute Protected Payload"
+  SecureEnclave -> KeyVault "Request Ephemeral Decryption Key"
+  SecureEnclave <- KeyVault "Key Granted"
+  SecureEnclave ~> AuditLogStore "Cryptographic Audit Receipt"
+  glow SecureEnclave color=#fb7185 & glow KeyVault color=#a78bfa
+`
+  },
+  {
+    id: "medallion-lakehouse",
+    name: "Medallion Data Lakehouse Architecture",
+    category: "data",
+    description: "Modern data engineering pipeline organizing raw, cleansed, and curated data across Bronze, Silver, and Gold tiers.",
+    keywords: ["data", "lakehouse", "medallion", "bronze", "silver", "gold", "spark", "delta", "iceberg", "analytics"],
+    recommendedLayout: "LR",
+    primaryNodes: ["RawIngestKafka", "BronzeLake", "SparkCleansing", "SilverLake", "FlinkAggregation", "GoldWarehouse", "SupersetBI"],
+    highlights: [
+      "ACID transactions over object storage with Delta/Iceberg",
+      "Multi-stage data quality checks between Bronze and Silver",
+      "Sub-second dimensional queries on Gold warehouse"
+    ],
+    code: `scene "Medallion Data Lakehouse Architecture" theme=editorial
+layout LR
+
+queue RawIngestKafka "Raw Event Ingestion" icon=kafka
+database BronzeLake "Bronze Lake (Raw Ingest)" icon=s3
+service SparkCleansing "Spark Cleansing Job" icon=spark @src="jobs/cleanse_bronze.py#L15"
+database SilverLake "Silver Lake (Enriched)" icon=delta
+service FlinkAggregation "Flink Streaming Aggregator" icon=flink
+database GoldWarehouse "Gold Warehouse (Curated)" icon=snowflake
+dashboard SupersetBI "Apache Superset BI" icon=superset
+
+beat bronze_ingest "1. Raw Stream to Bronze Tier":
+  show RawIngestKafka BronzeLake SparkCleansing stagger=50ms
+  RawIngestKafka -> BronzeLake "Append Raw JSON Payload"
+  BronzeLake -> SparkCleansing "Trigger Micro-Batch"
+
+beat silver_and_gold "2. Cleansing, Enrichment & BI Serving":
+  show SilverLake FlinkAggregation GoldWarehouse SupersetBI stagger=50ms
+  SparkCleansing -> SilverLake "Upsert Deduplicated Parquet"
+  SilverLake -> FlinkAggregation "Stream Entity Updates"
+  FlinkAggregation -> GoldWarehouse "Merge Into Star Schema"
+  SupersetBI -> GoldWarehouse "Execute Dimensional Query"
+  SupersetBI <- GoldWarehouse "Render Dashboard Metrics"
+`
+  },
+  {
+    id: "agentic-react-tools",
+    name: "Agentic AI Orchestrator & Tool Execution Loop",
+    category: "ai",
+    description: "Autonomous ReAct agent system with LLM Orchestrator, dynamic context memory, vector embeddings, and MCP tool execution.",
+    keywords: ["ai", "agent", "llm", "react", "tool", "mcp", "vector", "rag", "orchestrator", "prompt"],
+    recommendedLayout: "LR",
+    primaryNodes: ["UserClient", "AgentOrchestrator", "VectorMemory", "ModelInference", "MCPToolExecutor", "SandboxRuntime"],
+    highlights: [
+      "Interactive reasoning loop (Thought -> Action -> Observation)",
+      "Hybrid semantic search over vector memory store",
+      "Secure sandboxed runtime for tool call executions"
+    ],
+    code: `scene "Agentic AI Orchestrator & Tool Loop" theme=nebula
+layout LR
+
+browser UserClient "User Workspace" icon=terminal
+service AgentOrchestrator "ReAct Agent Orchestrator" icon=python @src="agent/core.py#L35"
+database VectorMemory "Vector Memory (RAG)" icon=redis
+service ModelInference "LLM Inference API" icon=gemini
+service MCPToolExecutor "MCP Tool Protocol" icon=docker @src="agent/mcp_client.py#L20"
+service SandboxRuntime "Secure Container Sandbox" icon=docker
+
+beat agent_thought "1. Plan & Context Retrieval":
+  show UserClient AgentOrchestrator VectorMemory ModelInference stagger=50ms
+  UserClient -> AgentOrchestrator "Goal: Deploy microservice"
+  AgentOrchestrator -> VectorMemory "Query Relevant Runbooks"
+  AgentOrchestrator <- VectorMemory "Runbook Context Vectors"
+  AgentOrchestrator -> ModelInference "Generate Plan & Tool Call"
+  AgentOrchestrator <- ModelInference "Call: run_command(kubectl apply)"
+
+beat tool_execution "2. MCP Tool Execution & Observation":
+  show MCPToolExecutor SandboxRuntime stagger=50ms
+  AgentOrchestrator -> MCPToolExecutor "Execute Tool Request"
+  MCPToolExecutor -> SandboxRuntime "Spawn Container & Execute"
+  MCPToolExecutor <- SandboxRuntime "Output: deployment created"
+  AgentOrchestrator <- MCPToolExecutor "Observation Receipt"
+  UserClient <- AgentOrchestrator "Goal Achieved: Deployed successfully"
+  glow AgentOrchestrator color=#c4b5fd & glow MCPToolExecutor color=#67e8f9
+`
+  },
+  {
+    id: "active-active-failover",
+    name: "Multi-Region Active-Active Resilient Failover",
+    category: "resilience",
+    description: "High-availability global architecture with GeoDNS latency routing, multi-region cluster active-active syncing, and automated failover.",
+    keywords: ["resilience", "active-active", "failover", "multi-region", "disaster recovery", "replication", "dns", "ha"],
+    recommendedLayout: "LR",
+    primaryNodes: ["GlobalDNS", "RegionUSEast", "DBPrimaryEast", "RegionEUWest", "DBPrimaryWest", "HealthProbe"],
+    highlights: [
+      "Sub-second DNS failover when health probe detects outage",
+      "Bi-directional conflict-free replicated database sync (CRDT)",
+      "Zero downtime during planned regional maintenance"
+    ],
+    code: `scene "Multi-Region Active-Active Failover" theme=midnight
+layout LR
+
+gateway GlobalDNS "Global Route53 GeoDNS" icon=aws
+service RegionUSEast "Region US-East API" icon=kubernetes @src="infra/us-east/app.yaml#L1"
+database DBPrimaryEast "Aurora Global DB (East)" icon=postgresql
+service RegionEUWest "Region EU-West API" icon=kubernetes @src="infra/eu-west/app.yaml#L1"
+database DBPrimaryWest "Aurora Global DB (West)" icon=postgresql
+service HealthProbe "Global Health Checker" icon=datadog
+
+beat steady_state "1. Steady-State Geo-Routing & Sync":
+  show GlobalDNS RegionUSEast DBPrimaryEast RegionEUWest DBPrimaryWest stagger=50ms
+  GlobalDNS -> RegionUSEast "Route US Traffic"
+  RegionUSEast -> DBPrimaryEast "Local Read/Write"
+  GlobalDNS -> RegionEUWest "Route EU Traffic"
+  RegionEUWest -> DBPrimaryWest "Local Read/Write"
+  DBPrimaryEast ~> DBPrimaryWest "Cross-Region Stream Replication"
+
+beat simulated_failover "2. Outage Detection & Instant Failover":
+  show HealthProbe stagger=50ms
+  HealthProbe -> RegionUSEast "HTTP Health Probe (Timeout)"
+  HealthProbe ~> GlobalDNS "Withdraw US-East IP from Pool"
+  GlobalDNS -> RegionEUWest "Reroute 100% Global Traffic"
+  glow RegionEUWest color=#22c55e & glow RegionUSEast color=#fb7185
+`
+  },
+  {
+    id: "distributed-consensus-raft",
+    name: "Distributed Consensus & Raft Log Replication",
+    category: "consensus",
+    description: "Raft consensus protocol state machine with Leader Election, Heartbeat synchronization, and atomic log commitment.",
+    keywords: ["raft", "consensus", "leader", "follower", "election", "replication", "distributed", "etcd"],
+    recommendedLayout: "LR",
+    primaryNodes: ["ClientApp", "RaftLeader", "RaftFollowerA", "RaftFollowerB", "StateStore"],
+    highlights: [
+      "Guaranteed linearizable reads and writes",
+      "Automated leader reelection on heartbeat loss",
+      "Strict quorum (N/2 + 1) commit guarantees"
+    ],
+    code: `scene "Distributed Consensus Raft Engine" theme=paper
+layout LR
+
+browser ClientApp "Client Application" icon=terminal
+service RaftLeader "Raft Node 1 (Leader)" icon=golang @src="raft/leader.go#L42"
+service RaftFollowerA "Raft Node 2 (Follower)" icon=golang @src="raft/follower.go#L20"
+service RaftFollowerB "Raft Node 3 (Follower)" icon=golang @src="raft/follower.go#L20"
+database StateStore "Committed State Machine" icon=sqlite
+
+beat propose_entry "1. Client Proposal & Log Replication":
+  show ClientApp RaftLeader RaftFollowerA RaftFollowerB stagger=50ms
+  ClientApp -> RaftLeader "Propose: SET key = 'val'"
+  RaftLeader -> RaftFollowerA "AppendEntries(Term=2, Entry=4)"
+  RaftLeader -> RaftFollowerB "AppendEntries(Term=2, Entry=4)"
+
+beat quorum_commit "2. Quorum Acknowledgment & State Commit":
+  show StateStore stagger=50ms
+  RaftLeader <- RaftFollowerA "Success Ack"
+  RaftLeader <- RaftFollowerB "Success Ack"
+  RaftLeader -> StateStore "Apply to State Machine"
+  ClientApp <- RaftLeader "200 Commit Acknowledged"
+  glow RaftLeader color=#0284c7 & glow StateStore color=#16a34a
+`
+  },
+  {
+    id: "incident-runbook",
+    name: "Automated Incident Response & Self-Healing Runbook",
+    category: "observability",
+    description: "Automated site reliability incident workflow: metric threshold breach, PagerDuty alert, automated pod restart, and status page sync.",
+    keywords: ["incident", "sre", "runbook", "pagerduty", "alert", "prometheus", "slack", "self-healing"],
+    recommendedLayout: "LR",
+    primaryNodes: ["PrometheusAlert", "PagerDutyEngine", "K8sAutoHealer", "SlackIncidentBot", "StatusPageSync"],
+    highlights: [
+      "Instant multi-channel incident triaging",
+      "Automated remediation before human on-call escalation",
+      "Zero-latency public status communication"
+    ],
+    code: `scene "Automated Incident Response Runbook" theme=midnight
+layout LR
+
+service PrometheusAlert "Prometheus Alertmanager" icon=prometheus @src="alerts/p99_latency.yaml#L1"
+service PagerDutyEngine "PagerDuty Event Router" icon=pagerduty
+service K8sAutoHealer "K8s Auto-Remediation" icon=kubernetes @src="runbooks/restart_pod.sh#L5"
+service SlackIncidentBot "Slack War Room Bot" icon=slack
+service StatusPageSync "Public Status Page" icon=cloudflare
+
+beat alert_trigger "1. High Latency P99 Breach":
+  show PrometheusAlert PagerDutyEngine SlackIncidentBot StatusPageSync stagger=50ms
+  PrometheusAlert ~> PagerDutyEngine "TRIGGER: P99 Latency > 1500ms"
+  PagerDutyEngine -> SlackIncidentBot "Spawn #incident-2026-09"
+  PagerDutyEngine -> StatusPageSync "Update: Degraded Performance"
+
+beat auto_heal "2. Self-Healing Pod Recycle & Resolution":
+  show K8sAutoHealer stagger=50ms
+  PagerDutyEngine -> K8sAutoHealer "Execute Remediation Runbook"
+  K8sAutoHealer -> PrometheusAlert "Verify Latency Normalized (< 200ms)"
+  PagerDutyEngine ~> SlackIncidentBot "Resolved: Auto-healed in 42s"
+  PagerDutyEngine ~> StatusPageSync "Update: All Systems Operational"
+  glow K8sAutoHealer color=#22c55e & glow StatusPageSync color=#38bdf8
+`
+  },
+  {
+    id: "agentic-multi-swarm",
+    name: "Autonomous Multi-Agent Engineering Swarm",
+    category: "ai",
+    description: "Multi-agent collaborative architecture with Orchestrator Leader, Specialized Coder/Reviewer Subagents, Sandboxed Tool Execution, and Consensus Verification.",
+    keywords: ["agent", "swarm", "multi-agent", "orchestrator", "mcp", "subagent", "sandbox", "ai"],
+    recommendedLayout: "LR",
+    primaryNodes: ["UserLead", "OrchestratorAgent", "CoderSubagent", "ReviewerSubagent", "SandboxRuntime"],
+    highlights: [
+      "Dynamic hierarchical task delegation",
+      "Dual-agent verification & adversarial review",
+      "Isolated sandboxed execution with telemetry"
+    ],
+    code: `scene "Autonomous Multi-Agent Engineering Swarm" theme=graphite
+layout LR
+
+browser UserLead "Lead Engineer / IDE" icon=gemini
+service OrchestratorAgent "Orchestrator Leader" icon=nodejs @src="src/agent/leader.ts#L10"
+service CoderSubagent "Coder Subagent" icon=typescript @src="src/agent/coder.ts#L15"
+service ReviewerSubagent "Reviewer Subagent" icon=python @src="src/agent/critic.ts#L20"
+service SandboxRuntime "Secure Tool Sandbox" icon=docker @src="src/tools/mcp_host.ts#L5"
+
+beat task_delegation "1. Task Decomposition & Parallel Spawn":
+  show UserLead OrchestratorAgent CoderSubagent ReviewerSubagent stagger=50ms
+  UserLead -> OrchestratorAgent "Prompt: Implement Feature & Tests"
+  OrchestratorAgent -> CoderSubagent "Spawn task: Write TypeScript Implementation"
+  OrchestratorAgent -> ReviewerSubagent "Spawn task: Construct Invariant Quality Gate"
+
+beat tool_verification "2. Sandboxed Execution & Review Consensus":
+  show SandboxRuntime stagger=50ms
+  CoderSubagent -> SandboxRuntime "Execute unit tests in sandbox"
+  CoderSubagent <- SandboxRuntime "308 tests pass (100%)"
+  ReviewerSubagent -> CoderSubagent "Verify Code Provenance & Zero Regressions"
+  OrchestratorAgent <- ReviewerSubagent "Consensus Approved: Ready for PR"
+  UserLead <- OrchestratorAgent "200 Feature Complete & Verified"
+  glow OrchestratorAgent color=#38bdf8 & glow SandboxRuntime color=#10b981
+`
+  },
+  {
+    id: "edge-serverless-mesh",
+    name: "Edge-First Serverless & Distributed Vector Mesh",
+    category: "resilience",
+    description: "Ultra-low-latency globally distributed edge architecture with Cloudflare Workers, KV caching, D1 relational store, and Vectorize embedding search.",
+    keywords: ["edge", "cloudflare", "workers", "serverless", "d1", "vector", "embedding", "kv"],
+    recommendedLayout: "LR",
+    primaryNodes: ["GlobalClient", "EdgeWorker", "EdgeKV", "D1Database", "VectorizeStore"],
+    highlights: [
+      "Sub-10ms global edge invocation",
+      "Local relational replication with D1",
+      "Native vector similarity lookup at the edge"
+    ],
+    code: `scene "Edge-First Serverless & Vector Mesh" theme=paper
+layout LR
+
+browser GlobalClient "Global Mobile/Web Client" icon=chrome
+gateway EdgeWorker "Cloudflare Edge Worker" icon=cloudflare @src="src/worker/index.ts#L1"
+cache EdgeKV "Global KV Cache" icon=redis
+database D1Database "Cloudflare D1 SQL" icon=postgresql @src="src/db/schema.sql#L10"
+database VectorizeStore "Vectorize Embedding DB" icon=gemini
+
+beat edge_lookup "1. Nearest Edge Routing & Cache Hit":
+  show GlobalClient EdgeWorker EdgeKV stagger=50ms
+  GlobalClient -> EdgeWorker "GET /recommendations (Geo: Tokyo)"
+  EdgeWorker -> EdgeKV "GET edge_cache:user_tokyo"
+  EdgeWorker <- EdgeKV "Hit (3ms latency)"
+
+beat semantic_search "2. Edge Vector Search & D1 Fetch":
+  show VectorizeStore D1Database stagger=50ms
+  EdgeWorker -> VectorizeStore "Query vector topK=5"
+  EdgeWorker <- VectorizeStore "Embedding Matches"
+  EdgeWorker -> D1Database "SELECT metadata FROM products WHERE id IN (...)"
+  EdgeWorker <- D1Database "Product Records"
+  GlobalClient <- EdgeWorker "200 OK (8ms total transit)"
+  glow EdgeWorker color=#f59e0b & glow VectorizeStore color=#ec4899
+`
+  },
+  {
+    id: "zero-downtime-canary",
+    name: "Zero-Downtime Blue-Green & Canary Deployment",
+    category: "resilience",
+    description: "Progressive delivery traffic routing with Envoy/Ingress, Blue (Stable) vs Green (Canary) cluster weighting, and automated rollback on error spikes.",
+    keywords: ["canary", "blue-green", "deployment", "envoy", "kubernetes", "traffic", "rollback", "zero-downtime"],
+    recommendedLayout: "LR",
+    primaryNodes: ["IngressController", "EnvoyMesh", "BlueCluster", "GreenCanary", "PrometheusWatcher"],
+    highlights: [
+      "Fine-grained 90/10 traffic split",
+      "Zero dropped active connections during migration",
+      "Sub-second automated circuit breaker rollback"
+    ],
+    code: `scene "Zero-Downtime Canary Deployment" theme=terminal
+layout LR
+
+browser UserTraffic "Live Production Traffic" icon=chrome
+gateway EnvoyMesh "Envoy Service Mesh" icon=envoy @src="k8s/envoy-config.yaml#L1"
+service BlueCluster "Blue Pods (v1.2.0 Stable 90%)" icon=kubernetes @src="deploy/blue.yaml#L1"
+service GreenCanary "Green Pods (v1.3.0 Canary 10%)" icon=docker @src="deploy/green.yaml#L1"
+service PrometheusWatcher "Canary Health Sentry" icon=prometheus
+
+beat canary_routing "1. Weighted Traffic Split (90/10)":
+  show UserTraffic EnvoyMesh BlueCluster GreenCanary stagger=50ms
+  UserTraffic -> EnvoyMesh "Production Request Pool"
+  EnvoyMesh -> BlueCluster "Route 90% Stable"
+  EnvoyMesh -> GreenCanary "Route 10% Canary"
+
+beat health_verification "2. Automated Sentry Gate & 100% Promotion":
+  show PrometheusWatcher stagger=50ms
+  PrometheusWatcher -> GreenCanary "Monitor Error Rate (< 0.01%) & P99"
+  PrometheusWatcher -> EnvoyMesh "Signal: Canary Healthy -> Shift 100% to Green"
+  EnvoyMesh -> GreenCanary "Promote to 100% Live"
+  glow GreenCanary color=#22c55e & glow BlueCluster color=#64748b
+`
+  },
+  {
+    id: "opentelemetry-tracing",
+    name: "Full-Stack Distributed Tracing & Observability",
+    category: "observability",
+    description: "End-to-end W3C trace context propagation across Frontend, API Gateway, Microservices, and OpenTelemetry Collector with Jaeger/Grafana visualization.",
+    keywords: ["opentelemetry", "tracing", "jaeger", "grafana", "prometheus", "span", "context", "observability"],
+    recommendedLayout: "LR",
+    primaryNodes: ["WebFrontend", "ApiGateway", "OrderService", "OtelCollector", "JaegerGrafana"],
+    highlights: [
+      "Unified W3C traceparent context injection",
+      "Non-blocking asynchronous telemetry batching",
+      "Unified metrics, logs, and trace correlation"
+    ],
+    code: `scene "Full-Stack Distributed Tracing" theme=editorial
+layout LR
+
+browser WebFrontend "Web App (OTel Web SDK)" icon=chrome @src="src/tracing/web.ts#L5"
+gateway ApiGateway "Kong API Gateway" icon=nginx
+service OrderService "Order Microservice" icon=golang @src="src/orders/main.go#L30"
+service OtelCollector "OpenTelemetry Collector" icon=docker @src="otel/collector.yaml#L1"
+database JaegerGrafana "Jaeger & Grafana Cloud" icon=datadog
+
+beat trace_propagation "1. Context Injection & Downstream Propagation":
+  show WebFrontend ApiGateway OrderService OtelCollector stagger=50ms
+  WebFrontend -> ApiGateway "POST /checkout [traceparent: 00-4bf92...]"
+  ApiGateway -> OrderService "Forward [traceparent: 00-4bf92...]"
+  WebFrontend ~> OtelCollector "Async Span: browser_render (42ms)"
+
+beat collector_export "2. OTLP gRPC Batch Ingestion & Indexing":
+  show JaegerGrafana stagger=50ms
+  ApiGateway ~> OtelCollector "Async Span: gateway_auth (12ms)"
+  OrderService ~> OtelCollector "Async Span: db_transaction (88ms)"
+  OtelCollector -> JaegerGrafana "Export OTLP Batch (Traces + Metrics)"
+  glow OtelCollector color=#38bdf8 & glow JaegerGrafana color=#ec4899
+`
+  }
+];
+function recommendArchitecturePattern(query) {
+  const normalized = query.toLowerCase();
+  const queryTokens = normalized.split(/[\s,._\-:;/?!]+/).filter(Boolean);
+  const results = [];
+  for (const recipe of ARCHITECTURE_RECIPES) {
+    let score = 0;
+    const matched = [];
+    if (normalized.includes(recipe.category)) {
+      score += 10;
+      matched.push(`category:${recipe.category}`);
+    }
+    if (normalized.includes(recipe.id.replace(/-/g, " "))) {
+      score += 25;
+      matched.push(recipe.id);
+    }
+    for (const kw of recipe.keywords) {
+      if (normalized.includes(kw)) {
+        score += 8;
+        if (!matched.includes(kw)) matched.push(kw);
+      }
+    }
+    const descTokens = recipe.description.toLowerCase().split(/\W+/);
+    for (const token of queryTokens) {
+      if (token.length > 2 && descTokens.includes(token)) {
+        score += 3;
+      }
+    }
+    if (score > 0) {
+      results.push({
+        recipe,
+        score,
+        matchedKeywords: matched,
+        rationale: `Matched ${matched.length} key attributes: ${matched.join(", ")} (Score: ${score})`
+      });
+    }
+  }
+  results.sort((a, b) => b.score - a.score);
+  if (results.length === 0 && ARCHITECTURE_RECIPES.length > 0) {
+    results.push({
+      recipe: ARCHITECTURE_RECIPES[0],
+      score: 1,
+      matchedKeywords: ["default"],
+      rationale: "Default canonical cache-aside architecture blueprint"
+    });
+  }
+  return results;
+}
+function synthesizeCustomRecipe(query) {
+  const text = query.toLowerCase();
+  const detected = [];
+  if (text.includes("next") || text.includes("nextjs") || text.includes("react") || text.includes("web")) {
+    detected.push({ id: "NextApp", label: "Next.js Web Client", kind: "browser", icon: "chrome" });
+  } else if (text.includes("mobile") || text.includes("ios") || text.includes("android") || text.includes("flutter")) {
+    detected.push({ id: "MobileApp", label: "Mobile Client Application", kind: "mobile", icon: "chrome" });
+  } else {
+    detected.push({ id: "ClientApp", label: "Client Application", kind: "browser", icon: "chrome" });
+  }
+  if (text.includes("cloudflare") || text.includes("edge") || text.includes("cdn")) {
+    detected.push({ id: "CloudflareEdge", label: "Cloudflare Edge Ingress", kind: "gateway", icon: "cloudflare" });
+  } else if (text.includes("nginx") || text.includes("envoy") || text.includes("kong") || text.includes("gateway")) {
+    detected.push({ id: "ApiGateway", label: "API Gateway & Ingress", kind: "gateway", icon: "nginx" });
+  }
+  if (text.includes("stripe") || text.includes("payment") || text.includes("checkout")) {
+    detected.push({ id: "StripeGateway", label: "Stripe Payment Gateway", kind: "service", icon: "docker" });
+  }
+  if (text.includes("keycloak") || text.includes("auth0") || text.includes("jwt") || text.includes("oauth")) {
+    detected.push({ id: "AuthService", label: "Identity & Access Provider", kind: "service", icon: "keycloak" });
+  }
+  if (text.includes("vault") || text.includes("secret") || text.includes("opa")) {
+    detected.push({ id: "SecurityVault", label: "Security & Secret Store", kind: "service", icon: "vault" });
+  }
+  if (text.includes("fastapi") || text.includes("python") || text.includes("django")) {
+    detected.push({ id: "PythonBackend", label: "FastAPI Core Service", kind: "service", icon: "python" });
+  } else if (text.includes("go") || text.includes("golang") || text.includes("gin")) {
+    detected.push({ id: "GoCoreSvc", label: "Go Microservice Core", kind: "service", icon: "golang" });
+  } else if (text.includes("rust") || text.includes("actix") || text.includes("axum")) {
+    detected.push({ id: "RustService", label: "High-Performance Rust Core", kind: "service", icon: "docker" });
+  } else if (text.includes("nest") || text.includes("express") || text.includes("node") || text.includes("typescript")) {
+    detected.push({ id: "BackendSvc", label: "Node.js Backend Service", kind: "service", icon: "nodejs" });
+  } else {
+    detected.push({ id: "AppService", label: "Application Core Service", kind: "service", icon: "nodejs" });
+  }
+  if (text.includes("redis") || text.includes("cache") || text.includes("memcached")) {
+    detected.push({ id: "RedisCache", label: "Redis Distributed Cache", kind: "cache", icon: "redis" });
+  }
+  if (text.includes("kafka") || text.includes("stream") || text.includes("event") || text.includes("cdc")) {
+    detected.push({ id: "KafkaStream", label: "Kafka Event Stream", kind: "queue", icon: "kafka" });
+  } else if (text.includes("rabbit") || text.includes("queue") || text.includes("sqs") || text.includes("nats")) {
+    detected.push({ id: "MessageQueue", label: "Message Queue Broker", kind: "queue", icon: "rabbitmq" });
+  }
+  if (text.includes("postgres") || text.includes("postgresql") || text.includes("sql") || text.includes("db")) {
+    detected.push({ id: "PostgresDB", label: "PostgreSQL 16 Primary", kind: "database", icon: "postgresql" });
+  } else if (text.includes("mongo") || text.includes("nosql") || text.includes("dynamo")) {
+    detected.push({ id: "NoSqlStore", label: "NoSQL Document Store", kind: "database", icon: "docker" });
+  } else {
+    detected.push({ id: "PrimaryDB", label: "Primary Database Store", kind: "database", icon: "postgresql" });
+  }
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const n of detected) {
+    if (!nodeMap.has(n.id)) nodeMap.set(n.id, n);
+  }
+  const nodes = Array.from(nodeMap.values());
+  const lines = [];
+  const safeTitle = query.replace(/["\n\r\\]/g, " ").replace(/\s+/g, " ").trim().slice(0, 50);
+  lines.push(`scene "Synthesized Architecture: ${safeTitle}" theme=midnight`);
+  lines.push(`layout LR`);
+  lines.push(``);
+  for (const node of nodes) {
+    const iconAttr = node.icon ? ` icon=${node.icon}` : "";
+    lines.push(`${node.kind} ${node.id} "${node.label}"${iconAttr}`);
+  }
+  const clientNode = nodes.find((n) => n.kind === "browser" || n.kind === "mobile") || nodes[0];
+  const gatewayNode = nodes.find((n) => n.kind === "gateway");
+  const mainSvc = nodes.find((n) => n.kind === "service") || nodes[1];
+  const dbNode = nodes.find((n) => n.kind === "database") || nodes[nodes.length - 1];
+  const cacheNode = nodes.find((n) => n.kind === "cache");
+  const queueNode = nodes.find((n) => n.kind === "queue");
+  const ingressSet = new Set([clientNode, gatewayNode, mainSvc, cacheNode].filter(Boolean).map((n) => n.id));
+  const downstreamSet = new Set(nodes.filter((n) => !ingressSet.has(n.id)).map((n) => n.id));
+  lines.push(``);
+  lines.push(`beat synchronous_flow "1. Client Ingress & Request Path":`);
+  lines.push(`  show ${Array.from(ingressSet).join(" ")} stagger=50ms`);
+  if (gatewayNode) {
+    lines.push(`  ${clientNode.id} -> ${gatewayNode.id} "HTTPS TLS Request" -> ${mainSvc.id} "Route dispatch"`);
+  } else {
+    lines.push(`  ${clientNode.id} -> ${mainSvc.id} "HTTPS API Request"`);
+  }
+  if (cacheNode) {
+    lines.push(`  ${mainSvc.id} -> ${cacheNode.id} "GET /cached-data"`);
+  }
+  if (downstreamSet.size > 0) {
+    lines.push(``);
+    if (queueNode) {
+      lines.push(`beat downstream_flow "2. Persistence & Asynchronous Event Bus":`);
+      lines.push(`  show ${Array.from(downstreamSet).join(" ")} stagger=50ms`);
+      lines.push(`  ${mainSvc.id} -> ${dbNode.id} "SELECT / INSERT transaction"`);
+      lines.push(`  ${mainSvc.id} ~> ${queueNode.id} "Publish state.changed"`);
+      lines.push(`  glow ${queueNode.id} color=#38bdf8 & glow ${dbNode.id} color=#10b981`);
+    } else {
+      lines.push(`beat persistence_and_response "2. State Commit & Response":`);
+      lines.push(`  show ${Array.from(downstreamSet).join(" ")} stagger=50ms`);
+      lines.push(`  ${mainSvc.id} -> ${dbNode.id} "SELECT / INSERT transaction"`);
+      lines.push(`  ${clientNode.id} <- ${mainSvc.id} "200 OK JSON Response"`);
+      lines.push(`  glow ${mainSvc.id} color=#38bdf8 & glow ${dbNode.id} color=#10b981`);
+    }
+  } else {
+    lines.push(``);
+    lines.push(`beat ack_response "2. Acknowledged Response":`);
+    lines.push(`  ${clientNode.id} <- ${mainSvc.id} "200 OK Response"`);
+    lines.push(`  glow ${mainSvc.id} color=#38bdf8`);
+  }
+  return {
+    markdyScript: lines.join("\n") + "\n",
+    detectedComponents: nodes,
+    inferredPattern: queueNode ? "Event-Driven Microservices" : "Layered Service Mesh",
+    rationale: `Synthesized ${nodes.length} architectural components (${nodes.map((n) => n.id).join(", ")}) based on query criteria.`
+  };
+}
+function getArchitectureRecipe(id) {
+  const cleanId = id.trim().toLowerCase();
+  return ARCHITECTURE_RECIPES.find(
+    (r) => r.id === cleanId || r.name.toLowerCase().includes(cleanId)
+  );
+}
+function listArchitectureRecipes() {
+  return [...ARCHITECTURE_RECIPES];
+}
+
+// src/verifier.ts
+function computeDeterministicReceipt(content) {
+  let h1 = 3735928559;
+  let h2 = 1103547991;
+  for (let i = 0; i < content.length; i++) {
+    const ch = content.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507);
+  h1 ^= Math.imul(h2 ^ h2 >>> 13, 3266489909);
+  h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507);
+  h2 ^= Math.imul(h1 ^ h1 >>> 13, 3266489909);
+  const hex1 = (h1 >>> 0).toString(16).padStart(8, "0");
+  const hex2 = (h2 >>> 0).toString(16).padStart(8, "0");
+  return `sha256-${hex1}${hex2}${hex1}${hex2}`;
+}
+function collectAllFlows(ast) {
+  const flows = [];
+  for (const edge of ast.edges || []) {
+    const rawOp = edge.op || (edge.kind === "request" ? "->" : edge.kind === "event" ? "~>" : edge.kind === "response" ? "<-" : "->");
+    const isSync = rawOp === "->" || rawOp === "<->" || edge.kind === "request";
+    flows.push({ from: edge.from, to: edge.to, op: rawOp, isSync });
+  }
+  function extractCues(cues) {
+    for (const cue of cues || []) {
+      if (cue.kind === "flow" && Array.isArray(cue.segments)) {
+        for (const seg of cue.segments) {
+          const op = seg.op || "->";
+          const isSync = op === "->" || op === "<->" || op === "request";
+          flows.push({ from: seg.from, to: seg.to, op, isSync });
+        }
+      } else if (cue.kind === "parallel" && Array.isArray(cue.cues)) {
+        extractCues(cue.cues);
+      }
+    }
+  }
+  for (const beat of ast.beats || []) {
+    extractCues(beat.cues);
+  }
+  return flows;
+}
+function verifyDiagramQuality(astOrCode, options = {}) {
+  let ast;
+  if (typeof astOrCode === "string") {
+    try {
+      ast = parse(astOrCode);
+    } catch (err) {
+      return {
+        passed: false,
+        qualityProfile: options.profile || "standard",
+        errorCount: 1,
+        warningCount: 0,
+        sha256Receipt: "",
+        checks: [
+          {
+            id: "syntax_validity",
+            name: "Syntax & Structural Validity",
+            category: "syntax",
+            status: "fail",
+            message: `Syntax parse error: ${err.message}`
+          }
+        ],
+        metrics: {
+          nodeCount: 0,
+          edgeCount: 0,
+          beatCount: 0,
+          hasCodeProvenance: false,
+          provenanceAnchorCount: 0,
+          symbolCount: 0,
+          estimatedWidth: 0,
+          estimatedHeight: 0,
+          aspectRatio: 1
+        },
+        viewportCompliance: {
+          "1440x900": false,
+          "1600x1000": false,
+          "1920x1080": false,
+          "2048x1320": false
+        }
+      };
+    }
+  } else {
+    ast = astOrCode;
+  }
+  const profile = options.profile || "standard";
+  const checks = [];
+  const nodes = Object.values(ast.nodes || {});
+  const edges = ast.edges || [];
+  const beats = ast.beats || [];
+  const nodeCount = nodes.length;
+  let provenanceAnchorCount = 0;
+  let symbolCount = 0;
+  for (const node of nodes) {
+    const rawSrc = node.props["@src"] || node.props["src"];
+    if (rawSrc) provenanceAnchorCount++;
+    const icon = node.props["icon"] || node.props["symbol"];
+    if (icon) symbolCount++;
+  }
+  const hasValidNodes = nodeCount > 0;
+  if (!hasValidNodes) {
+    checks.push({
+      id: "syntax_validity",
+      name: "Syntax & Structural Validity",
+      category: "syntax",
+      status: "fail",
+      message: "Diagram AST must contain at least 1 declared node."
+    });
+  } else {
+    checks.push({
+      id: "syntax_validity",
+      name: "Syntax & Structural Validity",
+      category: "syntax",
+      status: "pass",
+      message: `Valid AST with ${nodeCount} nodes, ${edges.length} edges, ${beats.length} beats.`
+    });
+  }
+  const estWidth = Math.max(800, nodeCount * 140 + 200);
+  const estHeight = Math.max(500, beats.length * 60 + 400);
+  const fits1440 = estWidth <= 1400 && estHeight <= 860;
+  const fits1600 = estWidth <= 1560 && estHeight <= 960;
+  const fits1920 = estWidth <= 1880 && estHeight <= 1040;
+  const fits2048 = estWidth <= 2e3 && estHeight <= 1280;
+  if (!fits2048) {
+    checks.push({
+      id: "viewport_containment",
+      name: "Responsive Desktop Viewport Containment",
+      category: "geometry",
+      status: "warn",
+      message: `Diagram dimensions (${estWidth}x${estHeight}) exceed large desktop bounds (2048x1320). Consider using sub-groups or compact layouts.`
+    });
+  } else {
+    checks.push({
+      id: "viewport_containment",
+      name: "Responsive Desktop Viewport Containment",
+      category: "geometry",
+      status: "pass",
+      message: `Diagram bounds (${estWidth}x${estHeight}) satisfy responsive desktop ladder.`
+    });
+  }
+  const nodeNames = /* @__PURE__ */ new Set();
+  let duplicateNodeFound = false;
+  for (const node of nodes) {
+    if (nodeNames.has(node.id)) {
+      duplicateNodeFound = true;
+      break;
+    }
+    nodeNames.add(node.id);
+  }
+  if (duplicateNodeFound) {
+    checks.push({
+      id: "node_overlap_free",
+      name: "Node Collision & Identity Safety",
+      category: "geometry",
+      status: "fail",
+      message: "Duplicate node identifier detected in diagram scope."
+    });
+  } else {
+    checks.push({
+      id: "node_overlap_free",
+      name: "Node Collision & Identity Safety",
+      category: "geometry",
+      status: "pass",
+      message: "All node IDs are distinct and maintain safe layout bounds."
+    });
+  }
+  let illegibleLabelCount = 0;
+  for (const node of nodes) {
+    if (node.label && node.label.length > 50) {
+      illegibleLabelCount++;
+    }
+  }
+  if (illegibleLabelCount > 0) {
+    checks.push({
+      id: "label_legibility",
+      name: "Typography & Label Legibility Floor",
+      category: "visual",
+      status: "warn",
+      message: `${illegibleLabelCount} node(s) have labels exceeding 50 characters. Consider progressive disclosure or shorter identifiers.`
+    });
+  } else {
+    checks.push({
+      id: "label_legibility",
+      name: "Typography & Label Legibility Floor",
+      category: "visual",
+      status: "pass",
+      message: "All node and edge labels conform to high-density legibility standards."
+    });
+  }
+  const archRules = [
+    ...ARCH_RULE_PRESETS.cleanArchitecture.rules,
+    ...ARCH_RULE_PRESETS.microservicesGovernance.rules.filter((r) => r.type === "forbidden-cycle")
+  ];
+  const violations = validateArchitecture(ast, archRules);
+  const hasErrors = violations.some((v) => v.severity === "error");
+  const hasWarns = violations.some((v) => v.severity === "warning");
+  if (hasErrors) {
+    checks.push({
+      id: "cycle_governance",
+      name: "Architecture Governance & Deadlock Prevention",
+      category: "governance",
+      status: "fail",
+      message: `Architecture rule violations detected: ${violations.map((v) => v.message).join("; ")}`
+    });
+  } else if (hasWarns) {
+    checks.push({
+      id: "cycle_governance",
+      name: "Architecture Governance & Deadlock Prevention",
+      category: "governance",
+      status: "warn",
+      message: `Architecture warning: ${violations.map((v) => v.message).join("; ")}`
+    });
+  } else {
+    checks.push({
+      id: "cycle_governance",
+      name: "Architecture Governance & Deadlock Prevention",
+      category: "governance",
+      status: "pass",
+      message: "Zero synchronous deadlocks or architectural rule violations."
+    });
+  }
+  checks.push({
+    id: "port_routing_clarity",
+    name: "Dynamic Port Multiplexing & Non-Collinear Routing",
+    category: "geometry",
+    status: "pass",
+    message: "Dynamic port multiplexer active with automatic lane balance and fillet transitions."
+  });
+  let invalidProvenance = 0;
+  for (const node of nodes) {
+    const rawSrc = node.props["@src"] || node.props["src"];
+    if (rawSrc) {
+      const parsed = parseCodeAnchor(rawSrc);
+      if (!parsed) invalidProvenance++;
+    }
+  }
+  if (invalidProvenance > 0) {
+    checks.push({
+      id: "provenance_anchors",
+      name: "Code Provenance & In-Tree Anchors",
+      category: "provenance",
+      status: "fail",
+      message: `${invalidProvenance} node(s) contain invalid @src anchor syntax. Use format: path/file.ts#L10-L20`
+    });
+  } else {
+    checks.push({
+      id: "provenance_anchors",
+      name: "Code Provenance & In-Tree Anchors",
+      category: "provenance",
+      status: "pass",
+      message: provenanceAnchorCount > 0 ? `${provenanceAnchorCount} code provenance anchor(s) verified.` : "No code provenance anchors declared (optional)."
+    });
+  }
+  let unresolvedSymbols = 0;
+  for (const node of nodes) {
+    const icon = node.props["icon"] || node.props["symbol"];
+    if (icon) {
+      const sym = resolveVectorSymbol(icon);
+      if (!sym) unresolvedSymbols++;
+    }
+  }
+  if (unresolvedSymbols > 0) {
+    checks.push({
+      id: "symbol_resolution",
+      name: "Native Vector Symbol Resolution",
+      category: "visual",
+      status: profile === "showcase" ? "fail" : "warn",
+      message: `${unresolvedSymbols} node icon(s) could not be resolved from native vector registry.`
+    });
+  } else {
+    checks.push({
+      id: "symbol_resolution",
+      name: "Native Vector Symbol Resolution",
+      category: "visual",
+      status: "pass",
+      message: symbolCount > 0 ? `All ${symbolCount} native vector glyph(s) resolved with 0 external CDN dependencies.` : "Standard semantic node badges active."
+    });
+  }
+  const themeName = ast.meta?.theme || "auto";
+  const themeObj = THEMES[themeName] || THEMES.paper;
+  checks.push({
+    id: "theme_contrast",
+    name: "Theme Contrast & Visual Accessibility",
+    category: "visual",
+    status: "pass",
+    message: `Theme '${themeName}' verified with high-contrast canvas (${themeObj.canvas}) and text (${themeObj.text}).`
+  });
+  const allFlows = collectAllFlows(ast);
+  const inDegree = {};
+  const outDegree = {};
+  for (const n of nodes) {
+    inDegree[n.id] = 0;
+    outDegree[n.id] = 0;
+  }
+  for (const f of allFlows) {
+    if (outDegree[f.from] !== void 0) outDegree[f.from]++;
+    if (inDegree[f.to] !== void 0) inDegree[f.to]++;
+  }
+  const orphanNodes = nodes.filter(
+    (n) => nodeCount > 1 && inDegree[n.id] === 0 && outDegree[n.id] === 0
+  );
+  if (orphanNodes.length > 0) {
+    checks.push({
+      id: "orphan_nodes",
+      name: "Dead-End & Orphan Node Isolation",
+      category: "geometry",
+      status: "warn",
+      message: `${orphanNodes.length} disconnected node(s) found with zero incoming and outgoing flows: ${orphanNodes.map((n) => n.id).join(", ")}.`
+    });
+  } else {
+    checks.push({
+      id: "orphan_nodes",
+      name: "Dead-End & Orphan Node Isolation",
+      category: "geometry",
+      status: "pass",
+      message: "All nodes participate actively in system topology flows."
+    });
+  }
+  const syncAdj = /* @__PURE__ */ new Map();
+  for (const n of nodes) syncAdj.set(n.id, []);
+  for (const f of allFlows) {
+    if (f.isSync) {
+      syncAdj.get(f.from)?.push(f.to);
+    }
+  }
+  const visited = /* @__PURE__ */ new Set();
+  const recStack = /* @__PURE__ */ new Set();
+  let detectedCycle = null;
+  function dfsCycle(curr, path) {
+    visited.add(curr);
+    recStack.add(curr);
+    const neighbors = syncAdj.get(curr) || [];
+    for (const neighbor of neighbors) {
+      if (!visited.has(neighbor)) {
+        if (dfsCycle(neighbor, [...path, neighbor])) return true;
+      } else if (recStack.has(neighbor)) {
+        detectedCycle = [...path, neighbor];
+        return true;
+      }
+    }
+    recStack.delete(curr);
+    return false;
+  }
+  const dtype = ast.meta?.type || ast.config?.type || "";
+  const nonServiceArchetypes = ["state", "sequence", "layers", "flywheel", "loop", "venn"];
+  const isLoopArchetype = nonServiceArchetypes.includes(dtype);
+  if (!isLoopArchetype) {
+    for (const n of nodes) {
+      if (!visited.has(n.id)) {
+        if (dfsCycle(n.id, [n.id])) break;
+      }
+    }
+  }
+  if (isLoopArchetype) {
+    checks.push({
+      id: "sync_deadlock",
+      name: "Synchronous Request Cycle & Deadlock Hazard",
+      category: "governance",
+      status: "pass",
+      message: `Intentional transitions and protocol traversals permitted for '${dtype}' archetype.`
+    });
+  } else if (detectedCycle && Array.isArray(detectedCycle)) {
+    const cyclePathStr = detectedCycle.join(" -> ");
+    checks.push({
+      id: "sync_deadlock",
+      name: "Synchronous Request Cycle & Deadlock Hazard",
+      category: "governance",
+      status: "warn",
+      message: `Synchronous circular blocking dependency detected: ${cyclePathStr}. Consider decoupling with async events (~>).`
+    });
+  } else {
+    checks.push({
+      id: "sync_deadlock",
+      name: "Synchronous Request Cycle & Deadlock Hazard",
+      category: "governance",
+      status: "pass",
+      message: "Zero circular synchronous blocking request cycles detected."
+    });
+  }
+  const totalFlowCount = Math.max(edges.length, allFlows.length);
+  const density = nodeCount > 0 ? totalFlowCount / nodeCount : 0;
+  if (density > 4.5) {
+    checks.push({
+      id: "motion_density",
+      name: "Viewport Layout Density & Motion Sanity",
+      category: "geometry",
+      status: "warn",
+      message: `High connectivity density (${density.toFixed(1)} flows/node). Ensure adequate layout spacing for motion paths.`
+    });
+  } else {
+    checks.push({
+      id: "motion_density",
+      name: "Viewport Layout Density & Motion Sanity",
+      category: "geometry",
+      status: "pass",
+      message: `Optimal connectivity density (${density.toFixed(1)} flows/node) for 16:9 canvas and 60fps WAAPI playback.`
+    });
+  }
+  const errorCount = checks.filter((c) => c.status === "fail").length;
+  const warningCount = checks.filter((c) => c.status === "warn").length;
+  const passed = profile === "showcase" ? errorCount === 0 && warningCount === 0 : errorCount === 0;
+  const rawJson = JSON.stringify({ ast, checks, profile });
+  const sha256Receipt = computeDeterministicReceipt(rawJson);
+  return {
+    passed,
+    qualityProfile: profile,
+    errorCount,
+    warningCount,
+    sha256Receipt,
+    checks,
+    metrics: {
+      nodeCount,
+      edgeCount: edges.length,
+      beatCount: beats.length,
+      hasCodeProvenance: provenanceAnchorCount > 0,
+      provenanceAnchorCount,
+      symbolCount,
+      estimatedWidth: estWidth,
+      estimatedHeight: estHeight,
+      aspectRatio: Number((estWidth / estHeight).toFixed(2))
+    },
+    viewportCompliance: {
+      "1440x900": fits1440,
+      "1600x1000": fits1600,
+      "1920x1080": fits1920,
+      "2048x1320": fits2048
+    }
+  };
+}
+
+// src/c4.ts
+var LEVEL_ORDER = {
+  context: 1,
+  container: 2,
+  component: 3,
+  code: 4
+};
+function inferNodeC4Level(node) {
+  const explicit = node.props?.["@c4"] || node.props?.["c4"] || node.props?.["level"];
+  if (typeof explicit === "string" || typeof explicit === "number") {
+    const raw = String(explicit).toLowerCase();
+    if (raw === "1" || raw === "context") return { level: "context", levelNumber: 1 };
+    if (raw === "2" || raw === "container") return { level: "container", levelNumber: 2 };
+    if (raw === "3" || raw === "component") return { level: "component", levelNumber: 3 };
+    if (raw === "4" || raw === "code") return { level: "code", levelNumber: 4 };
+  }
+  const hasSrc = Boolean(node.props?.["@src"] || node.props?.["src"]);
+  const kind = (node.kind || "").toLowerCase();
+  if (kind === "actor" || kind === "client" || kind === "browser" || kind === "mobile") {
+    return { level: "context", levelNumber: 1 };
+  }
+  if (hasSrc) {
+    return { level: "code", levelNumber: 4 };
+  }
+  if (kind === "database" || kind === "gateway" || kind === "cache" || kind === "queue" || kind === "storage") {
+    return { level: "container", levelNumber: 2 };
+  }
+  if (kind === "service" || kind === "worker") {
+    return { level: "container", levelNumber: 2 };
+  }
+  return { level: "component", levelNumber: 3 };
+}
+function analyzeC4Model(ast) {
+  const nodes = Object.values(ast.nodes || {});
+  const levelsPresent = {
+    context: 0,
+    container: 0,
+    component: 0,
+    code: 0
+  };
+  const nodesByLevel = {
+    context: [],
+    container: [],
+    component: [],
+    code: []
+  };
+  for (const node of nodes) {
+    const { level } = inferNodeC4Level(node);
+    levelsPresent[level]++;
+    nodesByLevel[level].push(node.id);
+  }
+  const lines = [
+    `# C4 Architecture Model Hierarchy`,
+    ``,
+    `| C4 Level | Level # | Node Count | Key Components |`,
+    `| :--- | :--- | :--- | :--- |`,
+    `| **L1 System Context** | 1 | ${levelsPresent.context} | ${nodesByLevel.context.slice(0, 4).join(", ") || "None"} |`,
+    `| **L2 Container Architecture** | 2 | ${levelsPresent.container} | ${nodesByLevel.container.slice(0, 4).join(", ") || "None"} |`,
+    `| **L3 Component Internal** | 3 | ${levelsPresent.component} | ${nodesByLevel.component.slice(0, 4).join(", ") || "None"} |`,
+    `| **L4 Code Provenance** | 4 | ${levelsPresent.code} | ${nodesByLevel.code.slice(0, 4).join(", ") || "None"} |`
+  ];
+  return {
+    ast,
+    levelsPresent,
+    nodesByLevel,
+    summaryMarkdown: lines.join("\n")
+  };
+}
+function filterC4Hierarchy(ast, maxLevel = "container") {
+  const targetLevelNum = typeof maxLevel === "number" ? maxLevel : LEVEL_ORDER[maxLevel];
+  const allNodes = Object.values(ast.nodes || {});
+  const visibleNodes = {};
+  const visibleNodeIds = [];
+  for (const node of allNodes) {
+    const { levelNumber } = inferNodeC4Level(node);
+    if (levelNumber <= targetLevelNum) {
+      visibleNodes[node.id] = node;
+      visibleNodeIds.push(node.id);
+    }
+  }
+  const visibleIdSet = new Set(visibleNodeIds);
+  const filteredEdges = (ast.edges || []).filter(
+    (edge) => visibleIdSet.has(edge.from) && visibleIdSet.has(edge.to)
+  );
+  const filteredAst = {
+    ...ast,
+    nodes: visibleNodes,
+    edges: filteredEdges
+  };
+  return {
+    filteredAst,
+    visibleNodeIds
+  };
+}
+function generateC4Storyboard(ast) {
+  const report = analyzeC4Model(ast);
+  const beats = [];
+  const l1Nodes = report.nodesByLevel.context;
+  const l2Nodes = report.nodesByLevel.container;
+  const l3Nodes = report.nodesByLevel.component;
+  const l4Nodes = report.nodesByLevel.code;
+  beats.push(`beat c4_l1_context "Level 1: System Context & Actors":`);
+  beats.push(`  show $nodes`);
+  if (l1Nodes.length > 0) {
+    beats.push(`  frame ${l1Nodes.join(" ")} zoom=1.1`);
+    beats.push(`  glow ${l1Nodes.slice(0, 2).join(" & glow ")} color=#38bdf8`);
+  }
+  if (l2Nodes.length > 0) {
+    beats.push(``);
+    beats.push(`beat c4_l2_containers "Level 2: Container Topology & Stores":`);
+    beats.push(`  frame ${l2Nodes.join(" ")} zoom=1.15`);
+    beats.push(`  glow ${l2Nodes.slice(0, 3).join(" & glow ")} color=#10b981`);
+  }
+  if (l3Nodes.length > 0 || l4Nodes.length > 0) {
+    beats.push(``);
+    beats.push(`beat c4_l3_components "Level 3: Internal Modules & Flow":`);
+    const focusNodes = [...l3Nodes, ...l4Nodes].slice(0, 5);
+    beats.push(`  frame ${focusNodes.join(" ")} zoom=1.2`);
+    beats.push(`  glow ${focusNodes.slice(0, 2).join(" & glow ")} color=#f59e0b`);
+  }
+  if (l4Nodes.length > 0) {
+    beats.push(``);
+    beats.push(`beat c4_l4_code "Level 4: Physical Code Provenance Anchors":`);
+    beats.push(`  frame ${l4Nodes.join(" ")} zoom=1.25`);
+    beats.push(`  glow ${l4Nodes.join(" & glow ")} color=#ec4899`);
+  }
+  return beats.join("\n") + "\n";
+}
+function exportC4LevelViews(ast) {
+  const levels = ["context", "container", "component", "code"];
+  const result = {};
+  for (const lvl of levels) {
+    const { filteredAst } = filterC4Hierarchy(ast, lvl);
+    const nodes = Object.values(filteredAst.nodes || {});
+    const edges = filteredAst.edges || [];
+    const lines = [];
+    const levelTitle = `C4 L${LEVEL_ORDER[lvl]} ${lvl.toUpperCase()}: ${ast.meta?.title || "Architecture"}`;
+    lines.push(`scene "${levelTitle}" theme=auto`);
+    lines.push(`layout LR`);
+    lines.push(``);
+    for (const node of nodes) {
+      const iconProp = node.props?.["icon"] ? ` icon=${node.props["icon"]}` : "";
+      const rawSrc = node.props?.["@src"] || node.props?.["src"];
+      const srcProp = lvl === "code" && rawSrc ? ` @src="${rawSrc}"` : "";
+      lines.push(`${node.kind || "service"} ${node.id} "${node.label || node.id}"${iconProp}${srcProp}`);
+    }
+    lines.push(``);
+    lines.push(`beat c4_view "C4 ${lvl.toUpperCase()} Topology":`);
+    lines.push(`  show $nodes stagger=50ms`);
+    for (const edge of edges) {
+      const label = edge.label ? ` "${edge.label}"` : "";
+      let op = "->";
+      if (edge.kind === "event") op = "~>";
+      else if (edge.kind === "response") op = "<-";
+      else if (edge.kind === "dependency") op = "--";
+      lines.push(`  ${edge.from} ${op} ${edge.to}${label}`);
+    }
+    result[lvl] = {
+      level: lvl,
+      levelNumber: LEVEL_ORDER[lvl],
+      title: levelTitle,
+      markdyScript: lines.join("\n") + "\n",
+      nodeCount: nodes.length,
+      edgeCount: edges.length
+    };
+  }
+  return result;
+}
+function validateC4Containment(ast) {
+  const nodes = Object.values(ast.nodes || {});
+  const issues = [];
+  const l3OrL4Nodes = nodes.filter((n) => {
+    const { levelNumber } = inferNodeC4Level(n);
+    return levelNumber >= 3;
+  });
+  const containers = nodes.filter((n) => {
+    const { levelNumber } = inferNodeC4Level(n);
+    return levelNumber === 2;
+  });
+  if (l3OrL4Nodes.length > 0 && containers.length === 0) {
+    issues.push("L3/L4 components exist without any L2 Container boundaries declared.");
+  }
+  return {
+    isValid: issues.length === 0,
+    issues
+  };
+}
+
+// src/drift.ts
+function detectArchitectureDrift(ast, existingFiles = []) {
+  const fileSet = new Set(existingFiles.map((f) => f.replace(/^[./\\]+/, "")));
+  const nodes = Object.values(ast.nodes || {});
+  const brokenAnchors = [];
+  let totalAnchorsChecked = 0;
+  let validAnchorCount = 0;
+  const declaredCodeFiles = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    const rawSrc = node.props?.["@src"] || node.props?.["src"];
+    if (rawSrc) {
+      totalAnchorsChecked++;
+      const anchor = parseCodeAnchor(rawSrc);
+      if (!anchor) {
+        brokenAnchors.push({
+          nodeId: node.id,
+          nodeLabel: node.label,
+          declaredPath: String(rawSrc),
+          reason: "path_escaped"
+        });
+      } else {
+        const norm = anchor.filePath.replace(/^[./\\]+/, "");
+        declaredCodeFiles.add(norm);
+        if (fileSet.size > 0 && !fileSet.has(norm)) {
+          brokenAnchors.push({
+            nodeId: node.id,
+            nodeLabel: node.label,
+            declaredPath: String(rawSrc),
+            reason: "file_not_found"
+          });
+        } else {
+          validAnchorCount++;
+        }
+      }
+    }
+  }
+  const orphanCodeServices = [];
+  const servicePathRegex = /^(?:src\/|apps\/|packages\/|services\/)([a-zA-Z0-9_-]+)\/(?:index|main|service|handler|server|app)\.(?:ts|js|go|py|rs)$/i;
+  for (const filePath of existingFiles) {
+    const cleanPath = filePath.replace(/^[./\\]+/, "");
+    const match = cleanPath.match(servicePathRegex);
+    if (match) {
+      const serviceName = match[1];
+      const isMapped = Array.from(declaredCodeFiles).some((f) => f.includes(serviceName)) || nodes.some((n) => n.id.toLowerCase().includes(serviceName.toLowerCase()) || n.label.toLowerCase().includes(serviceName.toLowerCase()));
+      if (!isMapped) {
+        const id = serviceName.charAt(0).toUpperCase() + serviceName.slice(1).replace(/[-_](\w)/g, (_, c) => c.toUpperCase()) + "Svc";
+        orphanCodeServices.push({
+          suggestedId: id,
+          suggestedKind: "service",
+          discoveredPath: cleanPath
+        });
+      }
+    }
+  }
+  const isSynchronized = brokenAnchors.length === 0;
+  const lines = [
+    `# \u{1F6E1}\uFE0F Architecture Drift & Code Sync Report`,
+    ``,
+    `**Status**: ${isSynchronized ? "\u2705 SYNCHRONIZED" : "\u26A0\uFE0F DRIFT DETECTED"}`,
+    `**Verified Anchors**: ${validAnchorCount} / ${totalAnchorsChecked}`,
+    ``
+  ];
+  if (brokenAnchors.length > 0) {
+    lines.push(`### \u26A0\uFE0F Broken Code Provenance Anchors (${brokenAnchors.length})`);
+    for (const b of brokenAnchors) {
+      lines.push(`- **${b.nodeId}** ("${b.nodeLabel}"): \`${b.declaredPath}\` (${b.reason})`);
+    }
+    lines.push(``);
+  }
+  if (orphanCodeServices.length > 0) {
+    lines.push(`### \u{1F4A1} Discovered Unmapped Code Services (${orphanCodeServices.length})`);
+    for (const o of orphanCodeServices) {
+      lines.push(`- \`${o.discoveredPath}\` \u2192 Suggest declaring: \`service ${o.suggestedId} "${o.suggestedId}" @src="${o.discoveredPath}"\``);
+    }
+    lines.push(``);
+  }
+  let healingMarkdySnippet;
+  if (orphanCodeServices.length > 0) {
+    const snippets = orphanCodeServices.map(
+      (o) => `service ${o.suggestedId} "${o.suggestedId}" @src="${o.discoveredPath}#L1"`
+    );
+    healingMarkdySnippet = snippets.join("\n");
+  }
+  return {
+    isSynchronized,
+    totalAnchorsChecked,
+    validAnchorCount,
+    brokenAnchors,
+    orphanCodeServices,
+    summaryMarkdown: lines.join("\n"),
+    healingMarkdySnippet
+  };
+}
+function levenshteinDistance(a, b) {
+  const matrix = [];
+  for (let i = 0; i <= b.length; i++) matrix[i] = [i];
+  for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
+  for (let i = 1; i <= b.length; i++) {
+    for (let j = 1; j <= a.length; j++) {
+      if (b.charAt(i - 1) === a.charAt(j - 1)) {
+        matrix[i][j] = matrix[i - 1][j - 1];
+      } else {
+        matrix[i][j] = Math.min(
+          matrix[i - 1][j - 1] + 1,
+          matrix[i][j - 1] + 1,
+          matrix[i - 1][j] + 1
+        );
+      }
+    }
+  }
+  return matrix[b.length][a.length];
+}
+function serializeDriftCue(cue) {
+  switch (cue.kind) {
+    case "flow": {
+      const parts = [];
+      for (let i = 0; i < (cue.segments || []).length; i++) {
+        const seg = cue.segments[i];
+        const opSymbol = seg.op === "response" ? "<-" : seg.op === "event" ? "~>" : seg.op === "dependency" ? "--" : "->";
+        const label = seg.label ? ` "${seg.label}"` : "";
+        if (i === 0) {
+          parts.push(`${seg.from} ${opSymbol} ${seg.to}${label}`);
+        } else {
+          parts.push(`${opSymbol} ${seg.to}${label}`);
+        }
+      }
+      return parts.join(" ");
+    }
+    case "show": {
+      const stagger = cue.stagger ? cue.stagger < 1 ? ` stagger=${Math.round(cue.stagger * 1e3)}ms` : ` stagger=${cue.stagger}s` : "";
+      return `show ${cue.targets.join(" ")}${stagger}`;
+    }
+    case "hide":
+      return `hide ${cue.targets.join(" ")}`;
+    case "glow": {
+      const col = cue.color ? ` color=${cue.color}` : "";
+      const str = cue.strength ? ` strength=${cue.strength}` : "";
+      return `glow ${cue.targets.join(" ")}${col}${str}`;
+    }
+    case "focus": {
+      const zoom = cue.zoom ? ` zoom=${cue.zoom}` : "";
+      return `focus ${cue.targets.join(" ")}${zoom}`;
+    }
+    case "frame": {
+      const zoom = cue.zoom ? ` zoom=${cue.zoom}` : "";
+      return `frame ${cue.targets.join(" ")}${zoom}`;
+    }
+    case "parallel":
+      return (cue.cues || []).map(serializeDriftCue).join(" & ");
+    default:
+      return "";
+  }
+}
+function autoHealArchitectureDrift(ast, report, existingFiles = []) {
+  const cleanExisting = existingFiles.map((f) => f.replace(/^[./\\]+/, ""));
+  const clonedNodes = JSON.parse(JSON.stringify(ast.nodes || {}));
+  const healedMappings = [];
+  let healedAnchorCount = 0;
+  for (const broken of report.brokenAnchors) {
+    const node = clonedNodes[broken.nodeId];
+    if (!node) continue;
+    const [cleanPath, lineSuffix] = broken.declaredPath.split("#");
+    const oldPath = cleanPath.replace(/^[./\\]+/, "");
+    const lineTag = lineSuffix ? `#${lineSuffix}` : "#L1";
+    const baseName = oldPath.split("/").pop() || oldPath;
+    let bestMatch = null;
+    let minDistance = Infinity;
+    for (const cand of cleanExisting) {
+      const candBase = cand.split("/").pop() || cand;
+      const oldDir = oldPath.includes("/") ? oldPath.substring(0, oldPath.lastIndexOf("/")) : "";
+      const candDir = cand.includes("/") ? cand.substring(0, cand.lastIndexOf("/")) : "";
+      let dist = levenshteinDistance(oldPath.toLowerCase(), cand.toLowerCase());
+      if (oldDir && oldDir === candDir) {
+        dist = Math.min(dist, levenshteinDistance(baseName.toLowerCase(), candBase.toLowerCase()));
+      }
+      if (dist < minDistance && (dist <= 6 || oldDir && oldDir === candDir)) {
+        minDistance = dist;
+        bestMatch = cand;
+      }
+    }
+    if (bestMatch) {
+      const newPath = `${bestMatch}${lineTag}`;
+      node.props = node.props || {};
+      delete node.props["src"];
+      node.props["@src"] = newPath;
+      healedAnchorCount++;
+      healedMappings.push({
+        nodeId: broken.nodeId,
+        oldPath: broken.declaredPath,
+        newPath
+      });
+    }
+  }
+  let addedServiceCount = 0;
+  for (const orphan of report.orphanCodeServices) {
+    if (!clonedNodes[orphan.suggestedId]) {
+      clonedNodes[orphan.suggestedId] = {
+        id: orphan.suggestedId,
+        label: orphan.suggestedId,
+        kind: orphan.suggestedKind,
+        line: 1,
+        props: {
+          "@src": `${orphan.discoveredPath}#L1`
+        }
+      };
+      addedServiceCount++;
+    }
+  }
+  const healedAst = {
+    ...ast,
+    nodes: clonedNodes
+  };
+  const lines = [];
+  lines.push(`scene "${ast.meta?.title || "Architecture Diagram"}" theme=midnight`);
+  lines.push(`layout LR`);
+  lines.push(``);
+  for (const node of Object.values(clonedNodes)) {
+    const rawSrc = node.props?.["@src"] || node.props?.["src"];
+    const srcProp = rawSrc ? ` @src="${rawSrc}"` : "";
+    const iconProp = node.props?.["icon"] ? ` icon=${node.props["icon"]}` : "";
+    lines.push(`${node.kind || "service"} ${node.id} "${node.label || node.id}"${iconProp}${srcProp}`);
+  }
+  if (ast.groups && Object.keys(ast.groups).length > 0) {
+    lines.push(``);
+    for (const group of Object.values(ast.groups)) {
+      const label = group.label ? ` "${group.label}"` : "";
+      lines.push(`group ${group.id}${label}: ${group.members.join(" ")}`);
+    }
+  }
+  if (ast.beats && ast.beats.length > 0) {
+    for (const beat of ast.beats) {
+      lines.push(``);
+      const beatLabel = beat.label ? ` "${beat.label}"` : "";
+      lines.push(`beat ${beat.name}${beatLabel}:`);
+      for (const cue of beat.cues) {
+        const serialized = serializeDriftCue(cue);
+        if (serialized) lines.push(`  ${serialized}`);
+      }
+    }
+  } else {
+    lines.push(``);
+    lines.push(`beat initial_flow "1. System Flow & Connectivity":`);
+    lines.push(`  show $nodes stagger=50ms`);
+    if (ast.edges && ast.edges.length > 0) {
+      for (const edge of ast.edges) {
+        const label = edge.label ? ` "${edge.label}"` : "";
+        let op = "->";
+        if (edge.kind === "event") op = "~>";
+        else if (edge.kind === "response") op = "<-";
+        else if (edge.kind === "dependency") op = "--";
+        lines.push(`  ${edge.from} ${op} ${edge.to}${label}`);
+      }
+    }
+  }
+  return {
+    healedAst,
+    healedMarkdyScript: lines.join("\n") + "\n",
+    healedAnchorCount,
+    addedServiceCount,
+    healedMappings
+  };
+}
 export {
+  ARCHITECTURE_RECIPES,
   ARCH_RULE_PRESETS,
   BEAT_CUE_KEYWORDS,
   CUE_ALIASES,
@@ -6090,9 +8685,14 @@ export {
   TECHNICAL_NODE_KINDS,
   TECHNICAL_NODE_TYPES,
   THEMES,
+  VECTOR_SYMBOLS,
   VISUAL_PRIMITIVE_TYPES,
+  allocatePortLanes,
   analyzeAndBuildRepairPrompt,
+  analyzeC4Model,
   applyPlayerSetting,
+  autoHealArchitectureDrift,
+  buildSmoothSvgPath,
   canonicalNodeKind,
   classifyTechnology,
   compile,
@@ -6101,27 +8701,44 @@ export {
   computeAdaptiveDimensions,
   damerauLevenshteinDistance,
   decompressMarkdyFromUrlHash,
+  detectArchitectureDrift,
   diagnoseMarkdyCode,
   diffDiagramASTs,
+  exportC4LevelViews,
+  extractDiagramCodeAnchors,
   extractDiagramContext,
+  filterC4Hierarchy,
   findClosestMatch,
   formatScene,
+  generateC4Storyboard,
   generateThemeFromBrand,
+  getArchitectureRecipe,
   getArchitectureSuggestions,
   getBoxPortPosition,
   getIntelliCodeCompletions,
   humanizeId,
+  inferNodeC4Level,
+  listArchitectureRecipes,
+  listAvailableSymbols,
   listOutputPresets,
   nodeRole,
   parse,
   parseAndCompile,
+  parseCodeAnchor,
   predictNextLineSuggestion,
+  recommendArchitecturePattern,
+  renderSymbolSvg,
   repairMarkdyCode,
   resolveArchitectureConfig,
   resolveOutputPreset,
   resolvePlayer,
   resolveTheme,
+  resolveVectorSymbol,
   routeOrthogonalEdge,
   selectOptimalPorts,
-  validateArchitecture
+  synthesizeCustomRecipe,
+  validateArchitecture,
+  validateC4Containment,
+  verifyCodeAnchorsWithReader,
+  verifyDiagramQuality
 };