npm - @vpxa/aikit - Versions diffs - 0.1.359 → 0.1.361 - Mend

@vpxa/aikit 0.1.359 → 0.1.361

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/README.md +442 -442
package/package.json +3 -1
package/packages/analyzers/dist/index.d.ts +1 -1
package/packages/claude-desktop/dist/manifest.json +31 -0
package/packages/claude-desktop/dist/mcp-source.json +16 -0
package/packages/cli/dist/index.js +14 -14
package/packages/cli/dist/init-JfM6gnAO.js +7 -0
package/packages/cli/dist/mcp-entry.json +8 -0
package/packages/cli/dist/{templates-d2UQHjpi.js → templates-CNDa9H4e.js} +25 -25
package/packages/core/dist/index.d.ts +46 -3
package/packages/core/dist/index.js +1 -1
package/packages/flows/dist/index.d.ts +1 -1
package/packages/flows/dist/index.js +1 -1
package/packages/present/dist/annotation-layer.js +10 -10
package/packages/server/dist/bin.js +1 -1
package/packages/server/dist/config-B4klhHVp.js +2 -0
package/packages/server/dist/config-D3rRPB9X.js +1 -0
package/packages/server/dist/index.js +1 -1
package/packages/server/dist/observations-CfglxBMB.js +6 -0
package/packages/server/dist/observations-CrQU_HVm.js +5 -0
package/packages/server/dist/prelude-BIJWSWyX.js +2 -0
package/packages/server/dist/prelude-Dxc3G0Q2.js +1 -0
package/packages/server/dist/routes-Ct7q5jrL.js +6 -0
package/packages/server/dist/routes-DsSm9ea0.js +5 -0
package/packages/server/dist/sampling-BX1qQuXx.js +2 -0
package/packages/server/dist/sampling-QHtj6UuO.js +1 -0
package/packages/server/dist/{server-CICqmfQ_.js → server-CiPwrtSl.js} +171 -171
package/packages/server/dist/{server-BZVPmRGV.js → server-e0mFUKvp.js} +172 -170
package/packages/server/dist/{server-http-CPU9_eVT.js → server-http-B3dZd6bx.js} +1 -1
package/packages/server/dist/{server-http-D3DK1H19.js → server-http-CzScS-EZ.js} +1 -1
package/packages/server/dist/{server-stdio-BRKxFWyO.js → server-stdio-COkJ2pX9.js} +1 -1
package/packages/server/dist/{server-stdio-l8I0RW4l.js → server-stdio-DmsOjBSR.js} +1 -1
package/packages/server/viewers/architecture-static.html +794 -794
package/packages/server/viewers/report-template.html +11 -11
package/packages/server/viewers/tour-viewer.html +26 -26
package/packages/settings-ui/dist/index.html +12 -12
package/packages/tools/dist/index.d.ts +109 -14
package/packages/tools/dist/index.js +118 -98
package/scaffold/definitions/mcp-entry.json +1 -1
package/scaffold/dist/adapters/_shared.mjs +7 -6
package/scaffold/dist/adapters/claude-code.mjs +7 -7
package/scaffold/dist/adapters/claude-desktop.mjs +7 -0
package/scaffold/dist/adapters/copilot.mjs +1 -1
package/scaffold/dist/adapters/gemini.mjs +6 -6
package/scaffold/dist/adapters/hermes-agent.mjs +1 -1
package/scaffold/dist/adapters/hermes.mjs +5 -5
package/scaffold/dist/adapters/hooks.mjs +1 -1
package/scaffold/dist/adapters/opencode.mjs +7 -7
package/scaffold/dist/adapters/zed.mjs +1 -1
package/scaffold/dist/definitions/exec-hooks.mjs +1 -1
package/scaffold/dist/definitions/flows.mjs +40 -162
package/scaffold/dist/definitions/mcp-entry.json +1 -1
package/scaffold/dist/definitions/platform-capabilities.mjs +1 -0
package/scaffold/dist/definitions/protocols.mjs +22 -19
package/scaffold/dist/definitions/skills/adr-skill.mjs +1 -1
package/scaffold/dist/definitions/skills/docs.mjs +51 -1
package/scaffold/dist/definitions/skills/lesson-learned.mjs +21 -0
package/scaffold/vitest.config.mjs +1 -0
package/packages/cli/dist/init-Cvys5TD4.js +0 -7
package/packages/server/dist/config-4M54ZAT8.js +0 -2
package/packages/server/dist/config-BXd38nVn.js +0 -1
package/packages/server/dist/prelude-CfXBHLpw.js +0 -1
package/packages/server/dist/prelude-D33q42vQ.js +0 -2
package/packages/server/dist/routes-9KnBpwfe.js +0 -6
package/packages/server/dist/routes-B8hTXXR8.js +0 -5
package/packages/server/dist/sampling-Cs9MoNYX.js +0 -2
package/packages/server/dist/sampling-DFogBKrL.js +0 -1

package/packages/server/viewers/architecture-static.html CHANGED Viewed

@@ -1,9 +1,9 @@
-<!DOCTYPE html>
-<html lang="en" data-theme="auto">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>AI Kit - Architecture Static Viewer</title>
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Kit - Architecture Static Viewer</title>
                         <style id="aikit-dt-tokens">
     :root {
         --dt-bg-canvas: #0c0c0f;
@@ -248,791 +248,791 @@
             --dt-group-fill: rgba(240, 239, 232, 0.32);
         }
     }
-</style>
-  <style>
-    * {
-      box-sizing: border-box;
-    }
-    html,
-    body {
-      height: 100%;
-      margin: 0;
-    }
-    body {
-      font-family: var(--dt-font-sans);
-      color: var(--dt-text-primary);
-      background:
-        var(--dt-bg-gradient),
-        var(--dt-bg-primary);
-    }
-    .shell {
-      min-height: 100%;
-      display: grid;
-      grid-template-rows: auto 1fr;
-    }
-    .toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 2;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      padding: 1rem 1.25rem;
-      border-bottom: 1px solid var(--dt-border-default);
-      background: var(--dt-toolbar-bg);
-      backdrop-filter: blur(16px);
-    }
-    .title h1 {
-      margin: 0;
-      font-size: 1rem;
-      font-weight: 700;
-      letter-spacing: 0.02em;
-    }
-    .title p {
-      margin: 0.2rem 0 0;
-      font-size: 0.82rem;
-      color: var(--dt-text-secondary);
-    }
-    .actions {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      gap: 0.6rem;
-    }
-    button {
-      appearance: none;
-      border: 1px solid var(--dt-border-default);
-      background: var(--dt-button-bg);
-      color: var(--dt-text-primary);
-      border-radius: 999px;
-      padding: 0.7rem 1rem;
-      font: inherit;
-      cursor: pointer;
-      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
-    }
-    button:hover {
-      background: var(--dt-button-hover);
-      transform: translateY(-1px);
-    }
-    .stage {
-      padding: 1rem;
-    }
-    .canvas-shell {
-      position: relative;
-      min-height: calc(100vh - 5.5rem);
-      border: 1px solid var(--dt-border-default);
-      border-radius: 24px;
-      background:
-        linear-gradient(var(--dt-bg-tertiary) 1px, transparent 1px),
-        linear-gradient(90deg, var(--dt-bg-tertiary) 1px, transparent 1px),
-        var(--dt-panel-bg);
-      background-size: 40px 40px, 40px 40px, 100% 100%;
-      overflow: hidden;
-      box-shadow: 0 24px 60px var(--dt-shadow-lg);
-    }
-    svg {
-      display: block;
-      width: 100%;
-      height: min(78vh, 980px);
-      min-height: 480px;
-    }
-    .empty-state {
-      position: absolute;
-      inset: 0;
-      display: none;
-      place-items: center;
-      padding: 2rem;
-      text-align: center;
-      color: var(--dt-text-secondary);
-    }
-    .empty-state.is-visible {
-      display: grid;
-    }
-    .empty-state strong {
-      display: block;
-      margin-bottom: 0.4rem;
-      color: var(--dt-text-primary);
-      font-size: 1rem;
-    }
-    .badge {
-      position: fixed;
-      right: 1rem;
-      bottom: 1rem;
-      z-index: 3;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.55rem;
-      padding: 0.55rem 0.8rem;
-      border: 1px solid var(--dt-border-default);
-      border-radius: 999px;
-      background: var(--dt-badge-bg);
-      color: var(--dt-text-secondary);
-      backdrop-filter: blur(14px);
-      font-size: 0.74rem;
-      letter-spacing: 0.04em;
-      text-transform: uppercase;
-    }
-    .badge-mark {
-      width: 0.55rem;
-      height: 0.55rem;
-      border-radius: 999px;
-      background: var(--dt-accent-fg);
-      box-shadow: 0 0 0 0.18rem rgba(6, 182, 212, 0.2);
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-    @media (max-width: 720px) {
-      .toolbar {
-        align-items: flex-start;
-        flex-direction: column;
-      }
-      .actions {
-        width: 100%;
-        justify-content: flex-start;
-      }
-      .stage {
-        padding: 0.75rem;
-      }
-      svg {
-        min-height: 420px;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="shell">
-    <header class="toolbar">
-      <div class="title">
-        <h1>Architecture Diagram</h1>
-        <p>Pure SVG C4-style renderer for inline lightweight mode.</p>
-      </div>
-      <div class="actions">
-        <button id="theme-button" type="button">Theme: Auto</button>
-      </div>
-    </header>
-    <main class="stage">
-      <div class="canvas-shell">
-        <div class="empty-state" id="empty-state" aria-live="polite"></div>
-        <svg id="diagram" role="img" aria-labelledby="diagram-title diagram-description"></svg>
-      </div>
-    </main>
-  </div>
-  <div class="badge"><span class="badge-mark"></span>AI Kit static viewer</div>
-  <script type="application/json" id="diagram-data">{}</script>
-  <script>
-    (() => {
-      const svgNs = 'http://www.w3.org/2000/svg';
-      const root = document.documentElement;
-      const svg = document.getElementById('diagram');
-      const emptyState = document.getElementById('empty-state');
-      const themeButton = document.getElementById('theme-button');
-      const themes = ['auto', 'dark', 'light'];
-      const typeVars = {
-        person: '--dt-accent-fg',
-        system: '--dt-success-fg',
-        container: '--dt-purple-fg',
-        component: '--dt-warning-fg',
-        external: '--dt-text-tertiary',
-        database: '--dt-accent-fg',
-        queue: '--dt-warning-fg',
-        boundary: '--dt-text-tertiary',
-      };
-      const leafSize = { width: 248, height: 132 };
-      const groupInset = { top: 62, right: 26, bottom: 26, left: 26, gap: 24 };
-      const rootGap = 52;
-      const canvasPadding = 48;
-      const monoFont = (getComputedStyle(document.documentElement).getPropertyValue('--dt-font-mono').trim()) || '"JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace';
-      function node(tag, attributes, text) {
-        const element = document.createElementNS(svgNs, tag);
-        if (attributes) {
-          Object.entries(attributes).forEach(([name, value]) => {
-            if (value !== undefined && value !== null) {
-              element.setAttribute(name, String(value));
-            }
-          });
-        }
-        if (text !== undefined) {
-          element.textContent = text;
-        }
-        return element;
-      }
-      function wrapText(value, maxChars, maxLines) {
-        const words = String(value || '').trim().split(/\s+/).filter(Boolean);
-        if (!words.length) {
-          return [];
-        }
-        const lines = [];
-        let current = '';
-        for (const word of words) {
-          const next = current ? current + ' ' + word : word;
-          if (next.length > maxChars && current) {
-            lines.push(current);
-            current = word;
-          } else {
-            current = next;
-          }
-        }
-        if (current) {
-          lines.push(current);
-        }
-        if (lines.length <= maxLines) {
-          return lines;
-        }
-        const clipped = lines.slice(0, maxLines);
-        clipped[maxLines - 1] = clipped[maxLines - 1].replace(/[\s.]+$/, '') + '...';
-        return clipped;
-      }
-      function cssValue(name) {
-        return getComputedStyle(root).getPropertyValue(name).trim();
-      }
-      function rgba(hex, alpha) {
-        const cleaned = String(hex || '').replace('#', '').trim();
-        const value = cleaned.length === 3
-          ? cleaned.split('').map((char) => char + char).join('')
-          : cleaned;
-        const number = Number.parseInt(value, 16);
-        const red = (number >> 16) & 255;
-        const green = (number >> 8) & 255;
-        const blue = number & 255;
-        return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
-      }
-      function accentFor(type) {
-        return cssValue(typeVars[type] || '--dt-text-tertiary');
-      }
-      function parseData() {
-        const source = document.getElementById('diagram-data');
-        if (!source) {
-          return {};
-        }
-        try {
-          return JSON.parse(source.textContent || '{}');
-        } catch (error) {
-          showEmpty('Invalid diagram JSON', String(error && error.message ? error.message : error));
-          return null;
-        }
-      }
-      function showEmpty(title, message) {
-        emptyState.classList.add('is-visible');
-        emptyState.innerHTML = '<div><strong>' + escapeHtml(title) + '</strong><span>' + escapeHtml(message) + '</span></div>';
-        svg.innerHTML = '';
-      }
-      function hideEmpty() {
-        emptyState.classList.remove('is-visible');
-        emptyState.textContent = '';
-      }
-      function escapeHtml(value) {
-        return String(value)
-          .replace(/&/g, '&amp;')
-          .replace(/</g, '&lt;')
-          .replace(/>/g, '&gt;')
-          .replace(/"/g, '&quot;')
-          .replace(/'/g, '&#39;');
-      }
-      function buildModel(raw) {
-        const nodes = Array.isArray(raw && raw.nodes) ? raw.nodes : [];
-        const edges = Array.isArray(raw && raw.edges) ? raw.edges : [];
-        const map = new Map();
-        const children = new Map();
-        nodes.forEach((item) => {
-          map.set(item.id, Object.assign({ type: 'container' }, item));
-          children.set(item.id, []);
-        });
-        nodes.forEach((item) => {
-          if (item.parent && children.has(item.parent)) {
-            children.get(item.parent).push(item.id);
-          }
-        });
-        const roots = nodes
-          .filter((item) => !item.parent || !map.has(item.parent))
-          .map((item) => item.id);
-        return { nodes, edges, map, children, roots };
-      }
-      function measureEntity(id, model, cache) {
-        if (cache.has(id)) {
-          return cache.get(id);
-        }
-        const childIds = model.children.get(id) || [];
-        if (!childIds.length) {
-          const measuredLeaf = Object.assign({ id, cols: 1, rows: 1, childIds: [] }, leafSize, { isGroup: false });
-          cache.set(id, measuredLeaf);
-          return measuredLeaf;
-        }
-        const measuredChildren = childIds.map((childId) => measureEntity(childId, model, cache));
-        const cols = childIds.length <= 2 ? Math.max(1, childIds.length) : Math.ceil(Math.sqrt(childIds.length));
-        let rowWidth = 0;
-        let rowHeight = 0;
-        let totalHeight = 0;
-        let maxWidth = 0;
-        let column = 0;
-        measuredChildren.forEach((child, index) => {
-          rowWidth += child.width;
-          if (column > 0) {
-            rowWidth += groupInset.gap;
-          }
-          rowHeight = Math.max(rowHeight, child.height);
-          column += 1;
-          const endRow = column === cols || index === measuredChildren.length - 1;
-          if (endRow) {
-            maxWidth = Math.max(maxWidth, rowWidth);
-            totalHeight += rowHeight;
-            if (index !== measuredChildren.length - 1) {
-              totalHeight += groupInset.gap;
-            }
-            rowWidth = 0;
-            rowHeight = 0;
-            column = 0;
-          }
-        });
-        const measuredGroup = {
-          id,
-          isGroup: true,
-          childIds,
-          cols,
-          width: Math.max(312, groupInset.left + maxWidth + groupInset.right),
-          height: Math.max(220, groupInset.top + totalHeight + groupInset.bottom),
-        };
-        cache.set(id, measuredGroup);
-        return measuredGroup;
-      }
-      function placeEntity(id, x, y, model, cache, positions) {
-        const measured = cache.get(id);
-        positions.set(id, { x, y, width: measured.width, height: measured.height });
-        if (!measured.isGroup) {
-          return;
-        }
-        let cursorX = x + groupInset.left;
-        let cursorY = y + groupInset.top;
-        let rowHeight = 0;
-        let column = 0;
-        measured.childIds.forEach((childId) => {
-          const child = cache.get(childId);
-          if (column === measured.cols) {
-            cursorX = x + groupInset.left;
-            cursorY += rowHeight + groupInset.gap;
-            rowHeight = 0;
-            column = 0;
-          }
-          placeEntity(childId, cursorX, cursorY, model, cache, positions);
-          cursorX += child.width + groupInset.gap;
-          rowHeight = Math.max(rowHeight, child.height);
-          column += 1;
-        });
-      }
-      function layout(model) {
-        const cache = new Map();
-        const positions = new Map();
-        const roots = model.roots.map((id) => measureEntity(id, model, cache));
-        const cols = roots.length <= 2 ? Math.max(1, roots.length) : Math.ceil(Math.sqrt(roots.length));
-        let cursorX = canvasPadding;
-        let cursorY = canvasPadding;
-        let rowHeight = 0;
-        let column = 0;
-        let maxRight = 0;
-        let maxBottom = 0;
-        model.roots.forEach((id) => {
-          const measured = cache.get(id);
-          if (column === cols) {
-            cursorX = canvasPadding;
-            cursorY += rowHeight + rootGap;
-            rowHeight = 0;
-            column = 0;
-          }
-          placeEntity(id, cursorX, cursorY, model, cache, positions);
-          maxRight = Math.max(maxRight, cursorX + measured.width);
-          maxBottom = Math.max(maxBottom, cursorY + measured.height);
-          rowHeight = Math.max(rowHeight, measured.height);
-          cursorX += measured.width + rootGap;
-          column += 1;
-        });
-        return {
-          positions,
-          width: Math.max(960, maxRight + canvasPadding),
-          height: Math.max(640, maxBottom + canvasPadding),
-        };
-      }
-      function anchor(box, target) {
-        const centerX = box.x + box.width / 2;
-        const centerY = box.y + box.height / 2;
-        const targetX = target.x + target.width / 2;
-        const targetY = target.y + target.height / 2;
-        const dx = targetX - centerX;
-        const dy = targetY - centerY;
-        if (Math.abs(dx) > Math.abs(dy)) {
-          return {
-            x: dx > 0 ? box.x + box.width : box.x,
-            y: centerY,
-          };
-        }
-        return {
-          x: centerX,
-          y: dy > 0 ? box.y + box.height : box.y,
-        };
-      }
-      function edgePath(sourceBox, targetBox) {
-        const start = anchor(sourceBox, targetBox);
-        const end = anchor(targetBox, sourceBox);
-        const dx = Math.abs(end.x - start.x);
-        const dy = Math.abs(end.y - start.y);
-        const curve = Math.max(48, Math.min(160, Math.max(dx * 0.35, dy * 0.35)));
-        const c1x = start.x + (end.x >= start.x ? curve : -curve);
-        const c2x = end.x + (end.x >= start.x ? -curve : curve);
-        return {
-          d: 'M ' + start.x + ' ' + start.y + ' C ' + c1x + ' ' + start.y + ', ' + c2x + ' ' + end.y + ', ' + end.x + ' ' + end.y,
-          labelX: (start.x + end.x) / 2,
-          labelY: (start.y + end.y) / 2 - 10,
-        };
-      }
-      function renderDefs() {
-        const defs = node('defs');
-        const marker = node('marker', {
-          id: 'arrow',
-          viewBox: '0 0 10 10',
-          refX: 8,
-          refY: 5,
-          markerWidth: 7,
-          markerHeight: 7,
-          orient: 'auto-start-reverse',
-        });
-        marker.appendChild(node('path', {
-          d: 'M 0 0 L 10 5 L 0 10 z',
-          fill: cssValue('--dt-text-secondary'),
-        }));
-        defs.appendChild(marker);
-        const filter = node('filter', {
-          id: 'node-shadow',
-          x: '-20%',
-          y: '-20%',
-          width: '140%',
-          height: '140%',
-        });
-        filter.appendChild(node('feDropShadow', {
-          dx: 0,
-          dy: 12,
-          stdDeviation: 12,
-          'flood-color': cssValue('--dt-shadow-lg'),
-        }));
-        defs.appendChild(filter);
-        Object.keys(typeVars).forEach((type) => {
-          const color = accentFor(type);
-          const gradient = node('linearGradient', {
-            id: 'grad-' + type,
-            x1: '0%',
-            y1: '0%',
-            x2: '100%',
-            y2: '100%',
-          });
-          gradient.appendChild(node('stop', {
-            offset: '0%',
-            'stop-color': rgba(color, 0.24),
-          }));
-          gradient.appendChild(node('stop', {
-            offset: '100%',
-            'stop-color': rgba(color, 0.06),
-          }));
-          defs.appendChild(gradient);
-        });
-        return defs;
-      }
-      function renderTextBlock(group, lines, x, y, fontSize, color, fontWeight, lineHeight, anchorMode) {
-        lines.forEach((line, index) => {
-          group.appendChild(node('text', {
-            x,
-            y: y + index * lineHeight,
-            fill: color,
-            'font-size': fontSize,
-            'font-weight': fontWeight,
-            'text-anchor': anchorMode || 'start',
-          }, line));
-        });
-      }
-      function renderLabelBadge(group, text, x, y, color) {
-        const width = Math.max(52, text.length * 7 + 18);
-        group.appendChild(node('rect', {
-          x,
-          y,
-          width,
-          height: 22,
-          rx: 11,
-          fill: rgba(color, 0.18),
-          stroke: rgba(color, 0.35),
-        }));
-        group.appendChild(node('text', {
-          x: x + width / 2,
-          y: y + 15,
-          fill: color,
-          'font-size': 10,
-          'font-family': monoFont,
-          'font-weight': 700,
-          'letter-spacing': '0.08em',
-          'text-anchor': 'middle',
-        }, text.toUpperCase()));
-      }
-      function renderGroup(id, model, positions, groupLayer) {
-        const data = model.map.get(id);
-        const box = positions.get(id);
-        const color = accentFor(data.type);
-        const labelWidth = Math.max(120, String(data.label || data.id).length * 8 + 32);
-        groupLayer.appendChild(node('rect', {
-          x: box.x,
-          y: box.y,
-          width: box.width,
-          height: box.height,
-          rx: 24,
-          fill: cssValue('--dt-group-fill'),
-          stroke: color,
-          'stroke-width': 1.6,
-          'stroke-dasharray': '10 8',
-        }));
-        groupLayer.appendChild(node('rect', {
-          x: box.x + 16,
-          y: box.y - 14,
-          width: labelWidth,
-          height: 28,
-          rx: 14,
-          fill: cssValue('--dt-bg-primary'),
-          stroke: color,
-        }));
-        groupLayer.appendChild(node('text', {
-          x: box.x + 28,
-          y: box.y + 4,
-          fill: color,
-          'font-size': 11,
-          'font-family': monoFont,
-          'font-weight': 700,
-          'letter-spacing': '0.08em',
-        }, String(data.label || data.id).toUpperCase()));
-      }
-      function renderLeaf(id, model, positions, nodeLayer) {
-        const data = model.map.get(id);
-        const box = positions.get(id);
-        const color = accentFor(data.type);
-        const labelLines = wrapText(data.label || data.id, 20, 2);
-        const descLines = wrapText(data.description || '', 28, 2);
-        const group = node('g');
-        group.appendChild(node('rect', {
-          x: box.x,
-          y: box.y,
-          width: box.width,
-          height: box.height,
-          rx: 22,
-          fill: 'url(#grad-' + (typeVars[data.type] ? data.type : 'external') + ')',
-          stroke: color,
-          'stroke-width': 1.8,
-          filter: 'url(#node-shadow)',
-        }));
-        group.appendChild(node('rect', {
-          x: box.x + 1,
-          y: box.y + 1,
-          width: box.width - 2,
-          height: box.height - 2,
-          rx: 21,
-          fill: cssValue('--dt-node-fill'),
-        }));
-        group.appendChild(node('rect', {
-          x: box.x + 18,
-          y: box.y + 18,
-          width: 6,
-          height: box.height - 36,
-          rx: 3,
-          fill: color,
-        }));
-        renderLabelBadge(group, data.type || 'node', box.x + 30, box.y + 16, color);
-        renderTextBlock(group, labelLines, box.x + 30, box.y + 56, 19, cssValue('--dt-text-primary'), 700, 22, 'start');
-        if (descLines.length) {
-          renderTextBlock(group, descLines, box.x + 30, box.y + 88, 12, cssValue('--dt-text-secondary'), 500, 16, 'start');
-        }
-        if (data.technology) {
-          const techY = box.y + box.height - 34;
-          const techWidth = Math.min(box.width - 48, Math.max(78, String(data.technology).length * 7 + 22));
-          group.appendChild(node('rect', {
-            x: box.x + 30,
-            y: techY,
-            width: techWidth,
-            height: 22,
-            rx: 11,
-            fill: rgba(color, 0.14),
-            stroke: rgba(color, 0.32),
-          }));
-          group.appendChild(node('text', {
-            x: box.x + 41,
-            y: techY + 15,
-            fill: cssValue('--dt-text-primary'),
-            'font-size': 10.5,
-            'font-family': monoFont,
-          }, data.technology));
-        }
-        nodeLayer.appendChild(group);
-      }
-      function renderEdge(edge, positions, edgeLayer) {
-        const source = positions.get(edge.source);
-        const target = positions.get(edge.target);
-        if (!source || !target) {
-          return;
-        }
-        const route = edgePath(source, target);
-        edgeLayer.appendChild(node('path', {
-          d: route.d,
-          fill: 'none',
-          stroke: cssValue('--dt-text-secondary'),
-          'stroke-width': 2,
-          'stroke-linecap': 'round',
-          'stroke-linejoin': 'round',
-          'marker-end': 'url(#arrow)',
-          opacity: 0.86,
-        }));
-        if (edge.label) {
-          const width = Math.max(62, String(edge.label).length * 7 + 16);
-          edgeLayer.appendChild(node('rect', {
-            x: route.labelX - width / 2,
-            y: route.labelY - 14,
-            width,
-            height: 24,
-            rx: 12,
-            fill: cssValue('--dt-bg-primary'),
-            stroke: cssValue('--dt-border-default'),
-          }));
-          edgeLayer.appendChild(node('text', {
-            x: route.labelX,
-            y: route.labelY + 2,
-            fill: cssValue('--dt-text-secondary'),
-            'font-size': 10,
-            'font-family': monoFont,
-            'text-anchor': 'middle',
-          }, edge.label));
-        }
-      }
-      function render() {
-        const raw = parseData();
-        if (raw === null) {
-          return;
-        }
-        const model = buildModel(raw);
-        if (!model.nodes.length) {
-          showEmpty('No data provided', 'Populate #diagram-data with nodes and optional edges to render the diagram.');
-          return;
-        }
-        hideEmpty();
-        const { positions, width, height } = layout(model);
-        svg.innerHTML = '';
-        svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
-        svg.setAttribute('aria-label', (raw.title || 'Architecture diagram') + ' with ' + model.nodes.length + ' nodes');
-        svg.appendChild(renderDefs());
-        const title = node('title', { id: 'diagram-title' }, raw.title || 'Architecture diagram');
-        const description = node('desc', { id: 'diagram-description' }, raw.description || 'Static architecture diagram rendered with SVG');
-        svg.appendChild(title);
-        svg.appendChild(description);
-        const edgeLayer = node('g', { 'aria-hidden': 'true' });
-        const groupLayer = node('g', { 'aria-hidden': 'true' });
-        const nodeLayer = node('g');
-        (model.edges || []).forEach((edge) => renderEdge(edge, positions, edgeLayer));
-        model.nodes.forEach((item) => {
-          if ((model.children.get(item.id) || []).length) {
-            renderGroup(item.id, model, positions, groupLayer);
-          }
-        });
-        model.nodes.forEach((item) => {
-          if (!(model.children.get(item.id) || []).length) {
-            renderLeaf(item.id, model, positions, nodeLayer);
-          }
-        });
-        svg.appendChild(edgeLayer);
-        svg.appendChild(groupLayer);
-        svg.appendChild(nodeLayer);
-      }
-      function updateThemeButton() {
-        const value = root.getAttribute('data-theme') || 'auto';
-        themeButton.textContent = 'Theme: ' + value.charAt(0).toUpperCase() + value.slice(1);
-      }
-      function cycleTheme() {
-        const current = root.getAttribute('data-theme') || 'auto';
-        const next = themes[(themes.indexOf(current) + 1) % themes.length];
-        root.setAttribute('data-theme', next);
-        updateThemeButton();
-        render();
-      }
-      themeButton.addEventListener('click', cycleTheme);
-      updateThemeButton();
-      render();
-    })();
-  </script>
-</body>
-</html>
+</style>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      height: 100%;
+      margin: 0;
+    }
+    body {
+      font-family: var(--dt-font-sans);
+      color: var(--dt-text-primary);
+      background:
+        var(--dt-bg-gradient),
+        var(--dt-bg-primary);
+    }
+    .shell {
+      min-height: 100%;
+      display: grid;
+      grid-template-rows: auto 1fr;
+    }
+    .toolbar {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 1rem 1.25rem;
+      border-bottom: 1px solid var(--dt-border-default);
+      background: var(--dt-toolbar-bg);
+      backdrop-filter: blur(16px);
+    }
+    .title h1 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 700;
+      letter-spacing: 0.02em;
+    }
+    .title p {
+      margin: 0.2rem 0 0;
+      font-size: 0.82rem;
+      color: var(--dt-text-secondary);
+    }
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 0.6rem;
+    }
+    button {
+      appearance: none;
+      border: 1px solid var(--dt-border-default);
+      background: var(--dt-button-bg);
+      color: var(--dt-text-primary);
+      border-radius: 999px;
+      padding: 0.7rem 1rem;
+      font: inherit;
+      cursor: pointer;
+      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
+    }
+    button:hover {
+      background: var(--dt-button-hover);
+      transform: translateY(-1px);
+    }
+    .stage {
+      padding: 1rem;
+    }
+    .canvas-shell {
+      position: relative;
+      min-height: calc(100vh - 5.5rem);
+      border: 1px solid var(--dt-border-default);
+      border-radius: 24px;
+      background:
+        linear-gradient(var(--dt-bg-tertiary) 1px, transparent 1px),
+        linear-gradient(90deg, var(--dt-bg-tertiary) 1px, transparent 1px),
+        var(--dt-panel-bg);
+      background-size: 40px 40px, 40px 40px, 100% 100%;
+      overflow: hidden;
+      box-shadow: 0 24px 60px var(--dt-shadow-lg);
+    }
+    svg {
+      display: block;
+      width: 100%;
+      height: min(78vh, 980px);
+      min-height: 480px;
+    }
+    .empty-state {
+      position: absolute;
+      inset: 0;
+      display: none;
+      place-items: center;
+      padding: 2rem;
+      text-align: center;
+      color: var(--dt-text-secondary);
+    }
+    .empty-state.is-visible {
+      display: grid;
+    }
+    .empty-state strong {
+      display: block;
+      margin-bottom: 0.4rem;
+      color: var(--dt-text-primary);
+      font-size: 1rem;
+    }
+    .badge {
+      position: fixed;
+      right: 1rem;
+      bottom: 1rem;
+      z-index: 3;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.55rem;
+      padding: 0.55rem 0.8rem;
+      border: 1px solid var(--dt-border-default);
+      border-radius: 999px;
+      background: var(--dt-badge-bg);
+      color: var(--dt-text-secondary);
+      backdrop-filter: blur(14px);
+      font-size: 0.74rem;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+    .badge-mark {
+      width: 0.55rem;
+      height: 0.55rem;
+      border-radius: 999px;
+      background: var(--dt-accent-fg);
+      box-shadow: 0 0 0 0.18rem rgba(6, 182, 212, 0.2);
+    }
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+    @media (max-width: 720px) {
+      .toolbar {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+      .actions {
+        width: 100%;
+        justify-content: flex-start;
+      }
+      .stage {
+        padding: 0.75rem;
+      }
+      svg {
+        min-height: 420px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="shell">
+    <header class="toolbar">
+      <div class="title">
+        <h1>Architecture Diagram</h1>
+        <p>Pure SVG C4-style renderer for inline lightweight mode.</p>
+      </div>
+      <div class="actions">
+        <button id="theme-button" type="button">Theme: Auto</button>
+      </div>
+    </header>
+    <main class="stage">
+      <div class="canvas-shell">
+        <div class="empty-state" id="empty-state" aria-live="polite"></div>
+        <svg id="diagram" role="img" aria-labelledby="diagram-title diagram-description"></svg>
+      </div>
+    </main>
+  </div>
+  <div class="badge"><span class="badge-mark"></span>AI Kit static viewer</div>
+  <script type="application/json" id="diagram-data">{}</script>
+  <script>
+    (() => {
+      const svgNs = 'http://www.w3.org/2000/svg';
+      const root = document.documentElement;
+      const svg = document.getElementById('diagram');
+      const emptyState = document.getElementById('empty-state');
+      const themeButton = document.getElementById('theme-button');
+      const themes = ['auto', 'dark', 'light'];
+      const typeVars = {
+        person: '--dt-accent-fg',
+        system: '--dt-success-fg',
+        container: '--dt-purple-fg',
+        component: '--dt-warning-fg',
+        external: '--dt-text-tertiary',
+        database: '--dt-accent-fg',
+        queue: '--dt-warning-fg',
+        boundary: '--dt-text-tertiary',
+      };
+      const leafSize = { width: 248, height: 132 };
+      const groupInset = { top: 62, right: 26, bottom: 26, left: 26, gap: 24 };
+      const rootGap = 52;
+      const canvasPadding = 48;
+      const monoFont = (getComputedStyle(document.documentElement).getPropertyValue('--dt-font-mono').trim()) || '"JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace';
+      function node(tag, attributes, text) {
+        const element = document.createElementNS(svgNs, tag);
+        if (attributes) {
+          Object.entries(attributes).forEach(([name, value]) => {
+            if (value !== undefined && value !== null) {
+              element.setAttribute(name, String(value));
+            }
+          });
+        }
+        if (text !== undefined) {
+          element.textContent = text;
+        }
+        return element;
+      }
+      function wrapText(value, maxChars, maxLines) {
+        const words = String(value || '').trim().split(/\s+/).filter(Boolean);
+        if (!words.length) {
+          return [];
+        }
+        const lines = [];
+        let current = '';
+        for (const word of words) {
+          const next = current ? current + ' ' + word : word;
+          if (next.length > maxChars && current) {
+            lines.push(current);
+            current = word;
+          } else {
+            current = next;
+          }
+        }
+        if (current) {
+          lines.push(current);
+        }
+        if (lines.length <= maxLines) {
+          return lines;
+        }
+        const clipped = lines.slice(0, maxLines);
+        clipped[maxLines - 1] = clipped[maxLines - 1].replace(/[\s.]+$/, '') + '...';
+        return clipped;
+      }
+      function cssValue(name) {
+        return getComputedStyle(root).getPropertyValue(name).trim();
+      }
+      function rgba(hex, alpha) {
+        const cleaned = String(hex || '').replace('#', '').trim();
+        const value = cleaned.length === 3
+          ? cleaned.split('').map((char) => char + char).join('')
+          : cleaned;
+        const number = Number.parseInt(value, 16);
+        const red = (number >> 16) & 255;
+        const green = (number >> 8) & 255;
+        const blue = number & 255;
+        return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
+      }
+      function accentFor(type) {
+        return cssValue(typeVars[type] || '--dt-text-tertiary');
+      }
+      function parseData() {
+        const source = document.getElementById('diagram-data');
+        if (!source) {
+          return {};
+        }
+        try {
+          return JSON.parse(source.textContent || '{}');
+        } catch (error) {
+          showEmpty('Invalid diagram JSON', String(error && error.message ? error.message : error));
+          return null;
+        }
+      }
+      function showEmpty(title, message) {
+        emptyState.classList.add('is-visible');
+        emptyState.innerHTML = '<div><strong>' + escapeHtml(title) + '</strong><span>' + escapeHtml(message) + '</span></div>';
+        svg.innerHTML = '';
+      }
+      function hideEmpty() {
+        emptyState.classList.remove('is-visible');
+        emptyState.textContent = '';
+      }
+      function escapeHtml(value) {
+        return String(value)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+      function buildModel(raw) {
+        const nodes = Array.isArray(raw && raw.nodes) ? raw.nodes : [];
+        const edges = Array.isArray(raw && raw.edges) ? raw.edges : [];
+        const map = new Map();
+        const children = new Map();
+        nodes.forEach((item) => {
+          map.set(item.id, Object.assign({ type: 'container' }, item));
+          children.set(item.id, []);
+        });
+        nodes.forEach((item) => {
+          if (item.parent && children.has(item.parent)) {
+            children.get(item.parent).push(item.id);
+          }
+        });
+        const roots = nodes
+          .filter((item) => !item.parent || !map.has(item.parent))
+          .map((item) => item.id);
+        return { nodes, edges, map, children, roots };
+      }
+      function measureEntity(id, model, cache) {
+        if (cache.has(id)) {
+          return cache.get(id);
+        }
+        const childIds = model.children.get(id) || [];
+        if (!childIds.length) {
+          const measuredLeaf = Object.assign({ id, cols: 1, rows: 1, childIds: [] }, leafSize, { isGroup: false });
+          cache.set(id, measuredLeaf);
+          return measuredLeaf;
+        }
+        const measuredChildren = childIds.map((childId) => measureEntity(childId, model, cache));
+        const cols = childIds.length <= 2 ? Math.max(1, childIds.length) : Math.ceil(Math.sqrt(childIds.length));
+        let rowWidth = 0;
+        let rowHeight = 0;
+        let totalHeight = 0;
+        let maxWidth = 0;
+        let column = 0;
+        measuredChildren.forEach((child, index) => {
+          rowWidth += child.width;
+          if (column > 0) {
+            rowWidth += groupInset.gap;
+          }
+          rowHeight = Math.max(rowHeight, child.height);
+          column += 1;
+          const endRow = column === cols || index === measuredChildren.length - 1;
+          if (endRow) {
+            maxWidth = Math.max(maxWidth, rowWidth);
+            totalHeight += rowHeight;
+            if (index !== measuredChildren.length - 1) {
+              totalHeight += groupInset.gap;
+            }
+            rowWidth = 0;
+            rowHeight = 0;
+            column = 0;
+          }
+        });
+        const measuredGroup = {
+          id,
+          isGroup: true,
+          childIds,
+          cols,
+          width: Math.max(312, groupInset.left + maxWidth + groupInset.right),
+          height: Math.max(220, groupInset.top + totalHeight + groupInset.bottom),
+        };
+        cache.set(id, measuredGroup);
+        return measuredGroup;
+      }
+      function placeEntity(id, x, y, model, cache, positions) {
+        const measured = cache.get(id);
+        positions.set(id, { x, y, width: measured.width, height: measured.height });
+        if (!measured.isGroup) {
+          return;
+        }
+        let cursorX = x + groupInset.left;
+        let cursorY = y + groupInset.top;
+        let rowHeight = 0;
+        let column = 0;
+        measured.childIds.forEach((childId) => {
+          const child = cache.get(childId);
+          if (column === measured.cols) {
+            cursorX = x + groupInset.left;
+            cursorY += rowHeight + groupInset.gap;
+            rowHeight = 0;
+            column = 0;
+          }
+          placeEntity(childId, cursorX, cursorY, model, cache, positions);
+          cursorX += child.width + groupInset.gap;
+          rowHeight = Math.max(rowHeight, child.height);
+          column += 1;
+        });
+      }
+      function layout(model) {
+        const cache = new Map();
+        const positions = new Map();
+        const roots = model.roots.map((id) => measureEntity(id, model, cache));
+        const cols = roots.length <= 2 ? Math.max(1, roots.length) : Math.ceil(Math.sqrt(roots.length));
+        let cursorX = canvasPadding;
+        let cursorY = canvasPadding;
+        let rowHeight = 0;
+        let column = 0;
+        let maxRight = 0;
+        let maxBottom = 0;
+        model.roots.forEach((id) => {
+          const measured = cache.get(id);
+          if (column === cols) {
+            cursorX = canvasPadding;
+            cursorY += rowHeight + rootGap;
+            rowHeight = 0;
+            column = 0;
+          }
+          placeEntity(id, cursorX, cursorY, model, cache, positions);
+          maxRight = Math.max(maxRight, cursorX + measured.width);
+          maxBottom = Math.max(maxBottom, cursorY + measured.height);
+          rowHeight = Math.max(rowHeight, measured.height);
+          cursorX += measured.width + rootGap;
+          column += 1;
+        });
+        return {
+          positions,
+          width: Math.max(960, maxRight + canvasPadding),
+          height: Math.max(640, maxBottom + canvasPadding),
+        };
+      }
+      function anchor(box, target) {
+        const centerX = box.x + box.width / 2;
+        const centerY = box.y + box.height / 2;
+        const targetX = target.x + target.width / 2;
+        const targetY = target.y + target.height / 2;
+        const dx = targetX - centerX;
+        const dy = targetY - centerY;
+        if (Math.abs(dx) > Math.abs(dy)) {
+          return {
+            x: dx > 0 ? box.x + box.width : box.x,
+            y: centerY,
+          };
+        }
+        return {
+          x: centerX,
+          y: dy > 0 ? box.y + box.height : box.y,
+        };
+      }
+      function edgePath(sourceBox, targetBox) {
+        const start = anchor(sourceBox, targetBox);
+        const end = anchor(targetBox, sourceBox);
+        const dx = Math.abs(end.x - start.x);
+        const dy = Math.abs(end.y - start.y);
+        const curve = Math.max(48, Math.min(160, Math.max(dx * 0.35, dy * 0.35)));
+        const c1x = start.x + (end.x >= start.x ? curve : -curve);
+        const c2x = end.x + (end.x >= start.x ? -curve : curve);
+        return {
+          d: 'M ' + start.x + ' ' + start.y + ' C ' + c1x + ' ' + start.y + ', ' + c2x + ' ' + end.y + ', ' + end.x + ' ' + end.y,
+          labelX: (start.x + end.x) / 2,
+          labelY: (start.y + end.y) / 2 - 10,
+        };
+      }
+      function renderDefs() {
+        const defs = node('defs');
+        const marker = node('marker', {
+          id: 'arrow',
+          viewBox: '0 0 10 10',
+          refX: 8,
+          refY: 5,
+          markerWidth: 7,
+          markerHeight: 7,
+          orient: 'auto-start-reverse',
+        });
+        marker.appendChild(node('path', {
+          d: 'M 0 0 L 10 5 L 0 10 z',
+          fill: cssValue('--dt-text-secondary'),
+        }));
+        defs.appendChild(marker);
+        const filter = node('filter', {
+          id: 'node-shadow',
+          x: '-20%',
+          y: '-20%',
+          width: '140%',
+          height: '140%',
+        });
+        filter.appendChild(node('feDropShadow', {
+          dx: 0,
+          dy: 12,
+          stdDeviation: 12,
+          'flood-color': cssValue('--dt-shadow-lg'),
+        }));
+        defs.appendChild(filter);
+        Object.keys(typeVars).forEach((type) => {
+          const color = accentFor(type);
+          const gradient = node('linearGradient', {
+            id: 'grad-' + type,
+            x1: '0%',
+            y1: '0%',
+            x2: '100%',
+            y2: '100%',
+          });
+          gradient.appendChild(node('stop', {
+            offset: '0%',
+            'stop-color': rgba(color, 0.24),
+          }));
+          gradient.appendChild(node('stop', {
+            offset: '100%',
+            'stop-color': rgba(color, 0.06),
+          }));
+          defs.appendChild(gradient);
+        });
+        return defs;
+      }
+      function renderTextBlock(group, lines, x, y, fontSize, color, fontWeight, lineHeight, anchorMode) {
+        lines.forEach((line, index) => {
+          group.appendChild(node('text', {
+            x,
+            y: y + index * lineHeight,
+            fill: color,
+            'font-size': fontSize,
+            'font-weight': fontWeight,
+            'text-anchor': anchorMode || 'start',
+          }, line));
+        });
+      }
+      function renderLabelBadge(group, text, x, y, color) {
+        const width = Math.max(52, text.length * 7 + 18);
+        group.appendChild(node('rect', {
+          x,
+          y,
+          width,
+          height: 22,
+          rx: 11,
+          fill: rgba(color, 0.18),
+          stroke: rgba(color, 0.35),
+        }));
+        group.appendChild(node('text', {
+          x: x + width / 2,
+          y: y + 15,
+          fill: color,
+          'font-size': 10,
+          'font-family': monoFont,
+          'font-weight': 700,
+          'letter-spacing': '0.08em',
+          'text-anchor': 'middle',
+        }, text.toUpperCase()));
+      }
+      function renderGroup(id, model, positions, groupLayer) {
+        const data = model.map.get(id);
+        const box = positions.get(id);
+        const color = accentFor(data.type);
+        const labelWidth = Math.max(120, String(data.label || data.id).length * 8 + 32);
+        groupLayer.appendChild(node('rect', {
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height,
+          rx: 24,
+          fill: cssValue('--dt-group-fill'),
+          stroke: color,
+          'stroke-width': 1.6,
+          'stroke-dasharray': '10 8',
+        }));
+        groupLayer.appendChild(node('rect', {
+          x: box.x + 16,
+          y: box.y - 14,
+          width: labelWidth,
+          height: 28,
+          rx: 14,
+          fill: cssValue('--dt-bg-primary'),
+          stroke: color,
+        }));
+        groupLayer.appendChild(node('text', {
+          x: box.x + 28,
+          y: box.y + 4,
+          fill: color,
+          'font-size': 11,
+          'font-family': monoFont,
+          'font-weight': 700,
+          'letter-spacing': '0.08em',
+        }, String(data.label || data.id).toUpperCase()));
+      }
+      function renderLeaf(id, model, positions, nodeLayer) {
+        const data = model.map.get(id);
+        const box = positions.get(id);
+        const color = accentFor(data.type);
+        const labelLines = wrapText(data.label || data.id, 20, 2);
+        const descLines = wrapText(data.description || '', 28, 2);
+        const group = node('g');
+        group.appendChild(node('rect', {
+          x: box.x,
+          y: box.y,
+          width: box.width,
+          height: box.height,
+          rx: 22,
+          fill: 'url(#grad-' + (typeVars[data.type] ? data.type : 'external') + ')',
+          stroke: color,
+          'stroke-width': 1.8,
+          filter: 'url(#node-shadow)',
+        }));
+        group.appendChild(node('rect', {
+          x: box.x + 1,
+          y: box.y + 1,
+          width: box.width - 2,
+          height: box.height - 2,
+          rx: 21,
+          fill: cssValue('--dt-node-fill'),
+        }));
+        group.appendChild(node('rect', {
+          x: box.x + 18,
+          y: box.y + 18,
+          width: 6,
+          height: box.height - 36,
+          rx: 3,
+          fill: color,
+        }));
+        renderLabelBadge(group, data.type || 'node', box.x + 30, box.y + 16, color);
+        renderTextBlock(group, labelLines, box.x + 30, box.y + 56, 19, cssValue('--dt-text-primary'), 700, 22, 'start');
+        if (descLines.length) {
+          renderTextBlock(group, descLines, box.x + 30, box.y + 88, 12, cssValue('--dt-text-secondary'), 500, 16, 'start');
+        }
+        if (data.technology) {
+          const techY = box.y + box.height - 34;
+          const techWidth = Math.min(box.width - 48, Math.max(78, String(data.technology).length * 7 + 22));
+          group.appendChild(node('rect', {
+            x: box.x + 30,
+            y: techY,
+            width: techWidth,
+            height: 22,
+            rx: 11,
+            fill: rgba(color, 0.14),
+            stroke: rgba(color, 0.32),
+          }));
+          group.appendChild(node('text', {
+            x: box.x + 41,
+            y: techY + 15,
+            fill: cssValue('--dt-text-primary'),
+            'font-size': 10.5,
+            'font-family': monoFont,
+          }, data.technology));
+        }
+        nodeLayer.appendChild(group);
+      }
+      function renderEdge(edge, positions, edgeLayer) {
+        const source = positions.get(edge.source);
+        const target = positions.get(edge.target);
+        if (!source || !target) {
+          return;
+        }
+        const route = edgePath(source, target);
+        edgeLayer.appendChild(node('path', {
+          d: route.d,
+          fill: 'none',
+          stroke: cssValue('--dt-text-secondary'),
+          'stroke-width': 2,
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          'marker-end': 'url(#arrow)',
+          opacity: 0.86,
+        }));
+        if (edge.label) {
+          const width = Math.max(62, String(edge.label).length * 7 + 16);
+          edgeLayer.appendChild(node('rect', {
+            x: route.labelX - width / 2,
+            y: route.labelY - 14,
+            width,
+            height: 24,
+            rx: 12,
+            fill: cssValue('--dt-bg-primary'),
+            stroke: cssValue('--dt-border-default'),
+          }));
+          edgeLayer.appendChild(node('text', {
+            x: route.labelX,
+            y: route.labelY + 2,
+            fill: cssValue('--dt-text-secondary'),
+            'font-size': 10,
+            'font-family': monoFont,
+            'text-anchor': 'middle',
+          }, edge.label));
+        }
+      }
+      function render() {
+        const raw = parseData();
+        if (raw === null) {
+          return;
+        }
+        const model = buildModel(raw);
+        if (!model.nodes.length) {
+          showEmpty('No data provided', 'Populate #diagram-data with nodes and optional edges to render the diagram.');
+          return;
+        }
+        hideEmpty();
+        const { positions, width, height } = layout(model);
+        svg.innerHTML = '';
+        svg.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+        svg.setAttribute('aria-label', (raw.title || 'Architecture diagram') + ' with ' + model.nodes.length + ' nodes');
+        svg.appendChild(renderDefs());
+        const title = node('title', { id: 'diagram-title' }, raw.title || 'Architecture diagram');
+        const description = node('desc', { id: 'diagram-description' }, raw.description || 'Static architecture diagram rendered with SVG');
+        svg.appendChild(title);
+        svg.appendChild(description);
+        const edgeLayer = node('g', { 'aria-hidden': 'true' });
+        const groupLayer = node('g', { 'aria-hidden': 'true' });
+        const nodeLayer = node('g');
+        (model.edges || []).forEach((edge) => renderEdge(edge, positions, edgeLayer));
+        model.nodes.forEach((item) => {
+          if ((model.children.get(item.id) || []).length) {
+            renderGroup(item.id, model, positions, groupLayer);
+          }
+        });
+        model.nodes.forEach((item) => {
+          if (!(model.children.get(item.id) || []).length) {
+            renderLeaf(item.id, model, positions, nodeLayer);
+          }
+        });
+        svg.appendChild(edgeLayer);
+        svg.appendChild(groupLayer);
+        svg.appendChild(nodeLayer);
+      }
+      function updateThemeButton() {
+        const value = root.getAttribute('data-theme') || 'auto';
+        themeButton.textContent = 'Theme: ' + value.charAt(0).toUpperCase() + value.slice(1);
+      }
+      function cycleTheme() {
+        const current = root.getAttribute('data-theme') || 'auto';
+        const next = themes[(themes.indexOf(current) + 1) % themes.length];
+        root.setAttribute('data-theme', next);
+        updateThemeButton();
+        render();
+      }
+      themeButton.addEventListener('click', cycleTheme);
+      updateThemeButton();
+      render();
+    })();
+  </script>
+</body>
+</html>