@vpxa/aikit 0.1.350 → 0.1.352

package/packages/server/dist/index.js

@@ -4,164 +4,297 @@ import{a as e,i as t,n,r,t as i}from"./server-utils-De-aZNQa.js";import{n as a,r
 `;if(!e.diagram_type)return`# Diagram
 
 *Missing diagram type*
-`;switch(e.diagram_type){case`architecture`:return ee(e);case`workflow`:return te(e);case`sequence`:return ne(e);case`dataflow`:return re(e);case`lifecycle`:return v(e);default:{let t=e;return`# ${typeof t.meta?.title==`string`&&t.meta.title.length>0?t.meta.title:`Diagram`}\n\nUnknown diagram type: ${typeof t.diagram_type==`string`?t.diagram_type:`unknown`}`}}}function ee(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Components
+`;switch(e.diagram_type){case`architecture`:return v(e);case`workflow`:return ee(e);case`sequence`:return te(e);case`dataflow`:return y(e);case`lifecycle`:return ne(e);default:{let t=e;return`# ${typeof t.meta?.title==`string`&&t.meta.title.length>0?t.meta.title:`Diagram`}\n\nUnknown diagram type: ${typeof t.diagram_type==`string`?t.diagram_type:`unknown`}`}}}function v(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Components
 `,`| # | Type | Component | Description |`,`|---|------|-----------|-------------|`];if(e.components.forEach((e,n)=>{t.push(`| ${n+1} | ${e.type} | **${e.label}** | ${e.sublabel??``} |`)}),t.push(`
 ## Connections
 `),e.connections.length===0)t.push(`*No connections defined.*
 `);else{let n=new Map(e.components.map(e=>[e.id,e.label]));for(let r of e.connections){let e=n.get(r.from)??r.from,i=n.get(r.to)??r.to;t.push(`- **${e}** → **${i}**${r.label?`: ${r.label}`:``}`)}}if(e.boundaries?.length){t.push(`
 ## Boundaries
-`);for(let n of e.boundaries){let r=n.wraps.map(t=>e.components.find(e=>e.id===t)?.label??t).join(`, `);t.push(`- **${n.label}** (${n.kind}): ${r}`)}}return e.cards?.length&&y(t,e.cards),t.filter(Boolean).join(`
-`)}function te(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Lanes
+`);for(let n of e.boundaries){let r=n.wraps.map(t=>e.components.find(e=>e.id===t)?.label??t).join(`, `);t.push(`- **${n.label}** (${n.kind}): ${r}`)}}return e.cards?.length&&b(t,e.cards),t.filter(Boolean).join(`
+`)}function ee(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Lanes
 `];for(let[n,r]of e.lanes.entries())t.push(`${n+1}. **${r.label}**`);t.push(`
 ## Steps
 `);let n=new Map(e.lanes.map(e=>[e.id,e.label])),r=[...e.nodes].sort((e,t)=>e.lane.localeCompare(t.lane)||e.col-t.col);for(let e of r){let r=n.get(e.lane)??e.lane,i=e.tag?` (${e.tag})`:``;t.push(`- [${r}] **${e.label}**${i}${e.sublabel?` — ${e.sublabel}`:``}`)}if(e.edges.length>0){t.push(`
 ## Transitions
-`);let n=new Map(e.nodes.map(e=>[e.id,e.label]));for(let r of e.edges){let e=n.get(r.from)??r.from,i=n.get(r.to)??r.to;t.push(`- **${e}** → **${i}**${r.label?`: ${r.label}`:``}`)}}return e.cards?.length&&y(t,e.cards),t.filter(Boolean).join(`
-`)}function ne(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Participants
+`);let n=new Map(e.nodes.map(e=>[e.id,e.label]));for(let r of e.edges){let e=n.get(r.from)??r.from,i=n.get(r.to)??r.to;t.push(`- **${e}** → **${i}**${r.label?`: ${r.label}`:``}`)}}return e.cards?.length&&b(t,e.cards),t.filter(Boolean).join(`
+`)}function te(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Participants
 `];for(let n of e.participants)t.push(`- **${n.label}** (${n.type})${n.sublabel?` — ${n.sublabel}`:``}`);if(t.push(`
 ## Message Flow
-`),e.segments)for(let n of e.segments)t.push(`\n### ${n.label}`);for(let n of e.messages){let r=e.participants.find(e=>e.id===n.from)?.label??n.from,i=e.participants.find(e=>e.id===n.to)?.label??n.to,a=n.variant&&n.variant!=="default"?` [${n.variant}]`:``;t.push(`- **${r}** → **${i}**${a}: ${n.label}${n.note?` (${n.note})`:``}`)}return e.cards?.length&&y(t,e.cards),t.filter(Boolean).join(`
-`)}function re(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Stages
+`),e.segments)for(let n of e.segments)t.push(`\n### ${n.label}`);for(let n of e.messages){let r=e.participants.find(e=>e.id===n.from)?.label??n.from,i=e.participants.find(e=>e.id===n.to)?.label??n.to,a=n.variant&&n.variant!=="default"?` [${n.variant}]`:``;t.push(`- **${r}** → **${i}**${a}: ${n.label}${n.note?` (${n.note})`:``}`)}return e.cards?.length&&b(t,e.cards),t.filter(Boolean).join(`
+`)}function y(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## Stages
 `];for(let[n,r]of e.stages.entries())t.push(`${n+1}. **${r.label}**`);if(t.push(`
 ## Data Nodes
 `),e.nodes.forEach(n=>{let r=e.stages[n.stage]?.label??n.stage;t.push(`- [${r}] **${n.label}** (${n.type})${n.sublabel?` — ${n.sublabel}`:``}`)}),e.flows.length>0){t.push(`
 ## Data Flows
-`);let n=new Map(e.nodes.map(e=>[e.id,e.label]));for(let r of e.flows){let e=n.get(r.from)??r.from,i=n.get(r.to)??r.to,a=r.classification?` [${r.classification}]`:``,o=r.variant&&r.variant!=="default"?` (${r.variant})`:``;t.push(`- **${e}** → **${i}**: ${r.label}${a}${o}`)}}return e.cards?.length&&y(t,e.cards),t.filter(Boolean).join(`
-`)}function v(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## States
+`);let n=new Map(e.nodes.map(e=>[e.id,e.label]));for(let r of e.flows){let e=n.get(r.from)??r.from,i=n.get(r.to)??r.to,a=r.classification?` [${r.classification}]`:``,o=r.variant&&r.variant!=="default"?` (${r.variant})`:``;t.push(`- **${e}** → **${i}**: ${r.label}${a}${o}`)}}return e.cards?.length&&b(t,e.cards),t.filter(Boolean).join(`
+`)}function ne(e){let t=[`# ${e.meta.title}`,e.meta.subtitle?`> ${e.meta.subtitle}\n`:``,`## States
 `],n=new Map(e.lanes.map(e=>[e.id,e.label]));if(e.states.forEach(e=>{let r=n.get(e.lane)??e.lane,i=e.step?` (Step ${e.step})`:``,a=e.tag?` [${e.tag}]`:``;t.push(`- [${r}] **${e.label}** (${e.type})${i}${a}${e.sublabel?` — ${e.sublabel}`:``}`)}),e.transitions.length>0){t.push(`
 ## Transitions
-`);let n=new Map(e.states.map(e=>[e.id,e.label]));for(let r of e.transitions){let e=n.get(r.from)??r.from,i=n.get(r.to)??r.to,a=r.label?`: ${r.label}`:``,o=r.note?` (${r.note})`:``;t.push(`- **${e}** → **${i}**${a}${o}`)}}return e.cards?.length&&y(t,e.cards),t.filter(Boolean).join(`
-`)}function y(e,t){e.push(`
+`);let n=new Map(e.states.map(e=>[e.id,e.label]));for(let r of e.transitions){let e=n.get(r.from)??r.from,i=n.get(r.to)??r.to,a=r.label?`: ${r.label}`:``,o=r.note?` (${r.note})`:``;t.push(`- **${e}** → **${i}**${a}${o}`)}}return e.cards?.length&&b(t,e.cards),t.filter(Boolean).join(`
+`)}function b(e,t){e.push(`
 ## Summary
-`);for(let n of t){e.push(`\n### ${n.title}`);for(let t of n.items)e.push(`- ${t}`)}}function b(e){let t={"&":`&amp;`,"<":`&lt;`,">":`&gt;`,'"':`&quot;`,"'":`&#39;`};return String(e??``).replace(/[&<>"']/g,e=>t[e]??e)}const ie=/[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦　-〿\u{1F000}-\u{1FAFF}\u{20000}-\u{3FFFD}]/u;function x(e){let t=0;for(let n of String(e??``))t+=ie.test(n)?2:1;return t}function ae(e,t,n=0){return!(e.x+e.width+n<=t.x||t.x+t.width+n<=e.x||e.y+e.height+n<=t.y||t.y+t.height+n<=e.y)}function S(e,t){switch(t){case`left`:return{x:e.x,y:e.y+e.height/2};case`right`:return{x:e.x+e.width,y:e.y+e.height/2};case`top`:return{x:e.x+e.width/2,y:e.y};case`bottom`:return{x:e.x+e.width/2,y:e.y+e.height};default:return{x:e.x+e.width,y:e.y+e.height/2}}}function C(e,t){return t.x+t.width/2<e.x+e.width/2?`left`:t.x+t.width/2>e.x+e.width/2?`right`:t.y+t.height/2>e.y+e.height/2?`bottom`:`top`}function w(e,t){return t.x+t.width/2<e.x+e.width/2?`right`:t.x+t.width/2>e.x+e.width/2?`left`:t.y+t.height/2>e.y+e.height/2?`top`:`bottom`}function T(e,t){return e&&e!==`auto`?e:t}function E(e){return e.map((e,t)=>`${t===0?`M`:`L`} ${e.x} ${e.y}`).join(` `)}function D(e,t=10){if(e.length<3||t<=0)return E(e);let n=[`M ${e[0].x} ${e[0].y}`];for(let r=1;r<e.length-1;r++){let i=e[r-1],a=e[r],o=e[r+1],s=Math.hypot(a.x-i.x,a.y-i.y),c=Math.hypot(o.x-a.x,o.y-a.y),l=Math.min(t,s/2,c/2);if(l<1){n.push(`L ${a.x} ${a.y}`);continue}let u={x:a.x-(a.x-i.x)/s*l,y:a.y-(a.y-i.y)/s*l},d={x:a.x+(o.x-a.x)/c*l,y:a.y+(o.y-a.y)/c*l};n.push(`L ${u.x} ${u.y}`),n.push(`Q ${a.x} ${a.y} ${d.x} ${d.y}`)}let r=e[e.length-1];return n.push(`L ${r.x} ${r.y}`),n.join(` `)}const O={frontend:`c-frontend`,backend:`c-backend`,database:`c-database`,cloud:`c-cloud`,security:`c-security`,messagebus:`c-messagebus`,external:`c-external`},k={default:[`a-default`,`arrowhead`],emphasis:[`a-emphasis`,`arrowhead-emphasis`],security:[`a-security`,`arrowhead-security`],dashed:[`a-dashed`,`arrowhead-dashed`],animated:[`a-animated`,`arrowhead`]};function A(){return`<defs>
+`);for(let n of t){e.push(`\n### ${n.title}`);for(let t of n.items)e.push(`- ${t}`)}}function x(e){let t={"&":`&amp;`,"<":`&lt;`,">":`&gt;`,'"':`&quot;`,"'":`&#39;`};return String(e??``).replace(/[&<>"']/g,e=>t[e]??e)}const re=/[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠￠-￦　-〿\u{1F000}-\u{1FAFF}\u{20000}-\u{3FFFD}]/u;function S(e){let t=0;for(let n of String(e??``))t+=re.test(n)?2:1;return t}function ie(e,t,n=0){return!(e.x+e.width+n<=t.x||t.x+t.width+n<=e.x||e.y+e.height+n<=t.y||t.y+t.height+n<=e.y)}function C(e,t){switch(t){case`left`:return{x:e.x,y:e.y+e.height/2};case`right`:return{x:e.x+e.width,y:e.y+e.height/2};case`top`:return{x:e.x+e.width/2,y:e.y};case`bottom`:return{x:e.x+e.width/2,y:e.y+e.height};default:return{x:e.x+e.width,y:e.y+e.height/2}}}function w(e,t){return t.x+t.width/2<e.x+e.width/2?`left`:t.x+t.width/2>e.x+e.width/2?`right`:t.y+t.height/2>e.y+e.height/2?`bottom`:`top`}function T(e,t){return t.x+t.width/2<e.x+e.width/2?`right`:t.x+t.width/2>e.x+e.width/2?`left`:t.y+t.height/2>e.y+e.height/2?`top`:`bottom`}function E(e,t){return e&&e!==`auto`?e:t}function D(e){return e.map((e,t)=>`${t===0?`M`:`L`} ${e.x} ${e.y}`).join(` `)}function O(e,t=10){if(e.length<3||t<=0)return D(e);let n=[`M ${e[0].x} ${e[0].y}`];for(let r=1;r<e.length-1;r++){let i=e[r-1],a=e[r],o=e[r+1],s=Math.hypot(a.x-i.x,a.y-i.y),c=Math.hypot(o.x-a.x,o.y-a.y),l=Math.min(t,s/2,c/2);if(l<1){n.push(`L ${a.x} ${a.y}`);continue}let u={x:a.x-(a.x-i.x)/s*l,y:a.y-(a.y-i.y)/s*l},d={x:a.x+(o.x-a.x)/c*l,y:a.y+(o.y-a.y)/c*l};n.push(`L ${u.x} ${u.y}`),n.push(`Q ${a.x} ${a.y} ${d.x} ${d.y}`)}let r=e[e.length-1];return n.push(`L ${r.x} ${r.y}`),n.join(` `)}const k={frontend:`c-frontend`,backend:`c-backend`,database:`c-database`,cloud:`c-cloud`,security:`c-security`,messagebus:`c-messagebus`,external:`c-external`},A={default:[`a-default`,`arrowhead`],emphasis:[`a-emphasis`,`arrowhead-emphasis`],security:[`a-security`,`arrowhead-security`],dashed:[`a-dashed`,`arrowhead-dashed`],animated:[`a-animated`,`arrowhead`]};function j(){return`<defs>
     <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"><polygon points="0 0,10 3.5,0 7" class="m-default"/></marker>
     <marker id="arrowhead-emphasis" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"><polygon points="0 0,10 3.5,0 7" class="m-emphasis"/></marker>
     <marker id="arrowhead-security" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"><polygon points="0 0,10 3.5,0 7" class="m-security"/></marker>
     <marker id="arrowhead-dashed" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"><polygon points="0 0,10 3.5,0 7" class="m-dashed"/></marker>
     <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" class="c-grid" stroke-width="0.5"/></pattern>
-  </defs>`}function oe(e){let t=se(e);if(t.length>0)return{svg:`<svg viewBox="0 0 600 200"><text x="300" y="100" text-anchor="middle" fill="var(--text)">Architecture validation failed</text><text x="300" y="130" text-anchor="middle" font-size="12" fill="var(--text-muted)">${b(t.join(`; `))}</text></svg>`,cardsHtml:``};let n=new Map;for(let t of e.components){let e=t.size?.[0]??120,r=t.size?.[1]??60;n.set(t.id,{...t,x:t.pos.x,y:t.pos.y,width:e,height:r})}let r=100,i=100;for(let e of n.values())r=Math.max(r,e.x+e.width+40),i=Math.max(i,e.y+e.height+40);let a=e.meta.viewBox??[Math.max(720,Math.ceil(r/100)*100),Math.max(400,Math.ceil(i/100)*100)],o=[];if(o.push(`<svg viewBox="0 0 ${a[0]} ${a[1]}" role="img" aria-label="${b(e.meta.title)}">`),o.push(A()),o.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`),e.boundaries)for(let t of e.boundaries){let e=new Set(t.wraps),r=[...n.values()].filter(t=>e.has(t.id));if(r.length===0)continue;let i=Math.min(...r.map(e=>e.x))-30,a=Math.min(...r.map(e=>e.y))-30,s=Math.max(...r.map(e=>e.x+e.width))+30,c=Math.max(...r.map(e=>e.y+e.height))+30,l=t.kind===`security-group`?` stroke-dasharray="8,4"`:` stroke-dasharray="6,4"`,u=t.kind===`security-group`?`var(--security-stroke)`:`var(--cloud-stroke)`;o.push(`<rect x="${i}" y="${a}" width="${s-i}" height="${c-a}" rx="12" fill="var(--lane-fill)" stroke="${u}" stroke-width="1.5"${l}/>`),o.push(`<text x="${i+10}" y="${a+18}" class="t-dim" font-size="10" font-weight="600">${b(t.label)}</text>`)}for(let t of e.connections){let e=n.get(t.from),r=n.get(t.to);if(!e||!r)continue;let i=S(e,T(t.fromSide,C(e,r))),a=S(r,T(t.toSide,w(e,r))),s=(i.y+a.y)/2,c=t.route===`drop`?[i,{x:i.x,y:s},{x:a.x,y:s},a]:[i,a],[l,u]=k[t.variant??`default`]??k.default,d=t.variant===`emphasis`?1.8:1.4;if(o.push(`<path d="${E(c)}" class="${l}" stroke-width="${d}" marker-end="url(#${u})"/>`),t.label){let e={x:(i.x+a.x)/2+(t.labelDx??0),y:i.y-10+(t.labelDy??0)},n=Math.max(30,x(t.label)*4.8+10);o.push(`<rect x="${e.x-n/2}" y="${e.y-10}" width="${n}" height="14" rx="3" class="c-mask"/>`),o.push(`<text x="${e.x}" y="${e.y}" class="t-muted" font-size="8" text-anchor="middle">${b(t.label)}</text>`)}}for(let e of n.values()){let t=O[e.type]??`c-external`,n=e.x+e.width/2;e.y+e.height/2,o.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="c-mask"/>`),o.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="${t}" stroke-width="1.5"/>`),o.push(`<text x="${n}" y="${e.y+24}" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">${b(e.label)}</text>`),e.sublabel&&o.push(`<text x="${n}" y="${e.y+42}" class="t-muted" font-size="8" text-anchor="middle">${b(e.sublabel)}</text>`)}new Set(e.components.map(e=>e.type));let s=Math.max(...[...n.values()].map(e=>e.y+e.height))+60;o.push(`<text x="40" y="${s}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let c=[[`c-frontend`,`User UI`],[`c-backend`,`Service`],[`c-database`,`Data Store`],[`c-cloud`,`Infra`],[`c-security`,`Security`],[`c-messagebus`,`Queue`],[`c-external`,`External`]],l=40;for(let[e,t]of c)o.push(`<rect x="${l}" y="${s+14}" width="14" height="9" rx="2" class="${e}" stroke-width="1"/><text x="${l+20}" y="${s+22}" class="t-muted" font-size="7">${t}</text>`),l+=80;o.push(`</svg>`);let u=ce(e.cards);return{svg:o.join(`
-`),cardsHtml:u}}function se(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title is required`),e.components?.length||t.push(`At least one component required`);let n=new Set(e.components?.map(e=>e.id));n.size!==e.components?.length&&t.push(`Component IDs must be unique`);for(let r of e.connections??[])n.has(r.from)||t.push(`Connection references unknown source "${r.from}"`),n.has(r.to)||t.push(`Connection references unknown target "${r.to}"`);let r=e.components.map(e=>({id:e.id,x:e.pos.x,y:e.pos.y,width:e.size?.[0]??120,height:e.size?.[1]??60}));for(let e=0;e<r.length;e++)for(let n=e+1;n<r.length;n++)ae(r[e],r[n],10)&&t.push(`"${r[e].id}" overlaps "${r[n].id}" — move one component`);return t}function ce(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${b(e.dot)}"></div><h3>${b(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${b(e)}</li>`).join(``)}</ul></div>`).join(`
-`):``}const j={stageY:46,stageH:36,stageBottomPad:74,leftX:100,colGap:215,stageW:168,nodeW:112,nodeH:58,rowYs:[128,242,356,470,584],labelH:16,defaultViewBox:[940,720]};function le(e){let t=ue(e);if(t.length>0)throw Error(`Data-flow validation failed:\n${t.join(`
-`)}`);let n=e.meta.viewBox??j.defaultViewBox;function r(e){return j.leftX+e*j.colGap}let i=new Map;for(let t of e.nodes){let e=t.width??j.nodeW,n=t.height??j.nodeH,a=r(t.stage),o=j.rowYs[t.row]+(t.yOffset??0);i.set(t.id,{...t,width:e,height:n,cx:a,cy:o+n/2,x:a-e/2,y:o})}let a=[];a.push(`<svg viewBox="0 0 ${n[0]} ${n[1]}" role="img" aria-label="${b(e.meta.title)}">`),a.push(A()),a.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`);let o=n[1]-j.stageY-j.stageBottomPad;for(let t=0;t<e.stages.length;t++){let n=r(t),i=n-j.stageW/2;a.push(`<rect x="${i}" y="${j.stageY}" width="${j.stageW}" height="${o}" rx="10" fill="var(--lane-fill)" stroke="var(--lane-stroke)" stroke-width="1"/>`,`<text x="${n}" y="${j.stageY+22}" class="t-dim" font-size="9" font-weight="600" text-anchor="middle">${String(t+1).padStart(2,`0`)} / ${b(e.stages[t].label)}</text>`)}for(let t of e.flows){let e=i.get(t.from),n=i.get(t.to);if(!e||!n)continue;let r=S(e,T(t.fromSide,C(e,n))),o=S(n,T(t.toSide,w(e,n))),s=r.x+(o.x-r.x)/2,c=[r,...t.route===`vertical-channel`?[{x:t.channelX??r.x+44,y:r.y},{x:t.channelX??r.x+44,y:o.y}]:Math.abs(r.y-o.y)<4?[r,o]:[{x:s,y:r.y},{x:s,y:o.y}],o],[l,u]=k[t.variant??`default`]??k.default,d=t.variant===`emphasis`||t.variant===`animated`?1.8:1.4;a.push(`<path d="${E(c)}" class="${l}" stroke-width="${d}" marker-end="url(#${u})"/>`);let f={x:(r.x+o.x)/2+(t.labelDx??0),y:(r.y+o.y)/2-10+(t.labelDy??0)},p=Math.max(x(t.label),x(t.classification??``)),m=Math.max(34,p*4.9+12),h=t.classification?27:j.labelH;a.push(`<rect x="${f.x-m/2}" y="${f.y-11}" width="${m}" height="${h}" rx="4" class="c-mask"/>`),a.push(`<text x="${f.x}" y="${f.y}" class="t-muted" font-size="8" text-anchor="middle">${b(t.label)}</text>`),t.classification&&a.push(`<text x="${f.x}" y="${f.y+11}" class="t-dim" font-size="7" text-anchor="middle">${b(t.classification)}</text>`)}for(let e of i.values()){let t=O[e.type]??`c-external`,n=e.tag?`\n    <text x="${e.cx}" y="${e.y+e.height-11}" class="t-muted" font-size="7" text-anchor="middle">${b(e.tag)}</text>`:``;a.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="c-mask"/>`,`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="${t}" stroke-width="1.5"/>`,`<text x="${e.cx}" y="${e.y+21}" class="t-primary" font-size="10" font-weight="600" text-anchor="middle">${b(e.label)}</text>`,`<text x="${e.cx}" y="${e.y+37}" class="t-muted" font-size="7" text-anchor="middle">${b(e.sublabel??``)}</text>${n}`)}let s=n[1]-36;a.push(`<text x="40" y="${s-20}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let c=[[`M`,`a-emphasis`,`arrowhead-emphasis`,`primary data`],[`M`,`a-security`,`arrowhead-security`,`policy / PII`],[`M`,`a-dashed`,`arrowhead-dashed`,`async batch`]],l=40;for(let[,e,,t]of c){let n=t===`primary data`?`arrowhead-emphasis`:t===`policy / PII`?`arrowhead-security`:`arrowhead-dashed`;a.push(`<path d="M ${l} ${s} L ${l+34} ${s}" class="${e}" stroke-width="1.4" marker-end="url(#${n})"/>`),a.push(`<text x="${l+40}" y="${s+3}" class="t-muted" font-size="8">${t}</text>`),l+=130}a.push(`</svg>`);let u=de(e.cards);return{svg:a.join(`
-`),cardsHtml:u}}function ue(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),(!e.stages?.length||e.stages.length<2)&&t.push(`Need at least 2 stages`),e.nodes?.length||t.push(`At least one node required`);let n=new Set(e.nodes?.map(e=>e.id));for(let r of e.flows??[])n.has(r.from)||t.push(`Flow references unknown source "${r.from}"`),n.has(r.to)||t.push(`Flow references unknown target "${r.to}"`);return t}function de(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${b(e.dot)}"></div><h3>${b(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${b(e)}</li>`).join(``)}</ul></div>`).join(`
-`):``}const M={phaseY:126,eventY:278,outcomeY:450,phaseW:118,phaseH:62,eventW:126,eventH:58,outcomeW:118,outcomeH:58,phaseXs:[94,248,402,556,710],eventXs:[402,556,710],outcomeXs:[402,556,710],defaultViewBox:[980,660]},fe={start:`c-frontend`,active:`c-backend`,waiting:`c-cloud`,decision:`c-security`,success:`c-database`,failure:`c-security`,neutral:`c-external`,external:`c-external`};function N(e){let t=P(e);if(t.length>0)throw Error(`Lifecycle validation failed:\n${t.join(`
-`)}`);let n=e.meta.viewBox??M.defaultViewBox;function r(e){return e===`main`?`phase`:e===`terminal`?`outcome`:`event`}let i=new Map;for(let t of e.states){let e=r(t.lane),n=e===`phase`,a=e===`outcome`,o=t.width??(n?M.phaseW:a?M.outcomeW:M.eventW),s=t.height??(n?M.phaseH:a?M.outcomeH:M.eventH),c=n?M.phaseXs:a?M.outcomeXs:M.eventXs,l=c[t.col]??c[c.length-1],u=(n?M.phaseY:a?M.outcomeY:M.eventY)+(t.yOffset??0);i.set(t.id,{...t,width:o,height:s,x:l-o/2,y:u,cx:l,cy:u+s/2})}let a=[];a.push(`<svg viewBox="0 0 ${n[0]} ${n[1]}" role="img" aria-label="${b(e.meta.title)}">`),a.push(A()),a.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`);let o=n[0]-72,s=e.lanes.find(e=>e.id===`main`),c=e.lanes.find(e=>e.id===`terminal`),l=e.lanes.filter(e=>e.id!==`main`&&e.id!==`terminal`),u=[s?.label??`Lifecycle phases`,l.length?l.map(e=>e.label).join(` + `):`Interruptions`,c?.label??`Outcomes`],d=[112,264,436];for(let e=0;e<3;e++)a.push(`<path d="M 72 ${d[e]} L ${o} ${d[e]}" class="a-default" stroke-width="0.8" stroke-dasharray="3,8"/>`),a.push(`<text x="72" y="${d[e]-12}" class="t-dim" font-size="10" font-weight="600">${String(e+1).padStart(2,`0`)} / ${b(u[e])}</text>`);for(let t of e.transitions){let e=i.get(t.from),n=i.get(t.to);if(!e||!n)continue;let r=S(e,T(t.fromSide,C(e,n))),o=S(n,T(t.toSide,w(e,n))),s=(r.y+o.y)/2,c=[];c=(t.route??`auto`)===`straight`||e.lane===n.lane?[]:[{x:r.x,y:s},{x:o.x,y:s}];let l=[r,...c,o],[u,d]=k[t.variant??`default`]??k.default,f=t.variant===`emphasis`||t.variant===`animated`?2:1.1,p=D(l,t.cornerRadius??10);a.push(`<path d="${p}" class="${u}" stroke-width="${f}" marker-end="url(#${d})"/>`)}for(let e of i.values()){let t=fe[e.type]??`c-external`,n=e.step?`\n    <text x="${e.x+10}" y="${e.y+14}" class="t-muted" font-size="7" font-weight="700">${b(e.step)}</text>`:``,r=e.tag?`\n    <text x="${e.cx}" y="${e.y+e.height-11}" class="t-muted" font-size="7" text-anchor="middle">${b(e.tag)}</text>`:``;a.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="7" class="c-mask"/>`,`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="7" class="${t}" stroke-width="1.5"/>${n}`,`<text x="${e.cx}" y="${e.y+21}" class="t-primary" font-size="10" font-weight="600" text-anchor="middle">${b(e.label)}</text>`,`<text x="${e.cx}" y="${e.y+37}" class="t-muted" font-size="7" text-anchor="middle">${b(e.sublabel??``)}</text>${r}`)}let f=n[1]-98;a.push(`<text x="40" y="${f-20}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let p=[[`c-backend`,`active state`],[`c-cloud`,`waiting`],[`c-database`,`terminal success`],[`c-security`,`failure / exit`]],m=40;for(let[e,t]of p)a.push(`<rect x="${m}" y="${f-8}" width="14" height="9" rx="2" class="${e}" stroke-width="1"/><text x="${m+20}" y="${f}" class="t-muted" font-size="7">${t}</text>`),m+=110;a.push(`</svg>`);let h=F(e.cards);return{svg:a.join(`
-`),cardsHtml:h}}function P(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),e.lanes?.length||t.push(`At least one lane required`),(!e.states?.length||e.states.length<2)&&t.push(`Need at least 2 states`),e.lanes.some(e=>e.id===`main`)||t.push(`Need a lane with id "main"`);let n=new Set(e.states?.map(e=>e.id));for(let r of e.transitions??[])n.has(r.from)||t.push(`Transition references unknown source "${r.from}"`),n.has(r.to)||t.push(`Transition references unknown target "${r.to}"`);return t}function F(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${b(e.dot)}"></div><h3>${b(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${b(e)}</li>`).join(``)}</ul></div>`).join(`
-`):``}const I={topY:72,participantW:86,participantH:54,lifelineTop:142,legendY:0,leftX:62,colGap:108,labelH:16,defaultViewBox:[920,760]};function L(e){let t=R(e);if(t.length>0)throw Error(`Sequence validation failed:\n${t.join(`
-`)}`);let n=e.meta.viewBox??I.defaultViewBox;I.legendY=n[1]-54,I.lifelineTop=142;let r=n[1]-65,i=new Map(e.participants.map((e,t)=>[e.id,{...e,index:t,cx:I.leftX+t*I.colGap}])),a=[];if(a.push(`<svg viewBox="0 0 ${n[0]} ${n[1]}" role="img" aria-label="${b(e.meta.title)}">`),a.push(A()),a.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`),e.segments)for(let t of e.segments)a.push(`<rect x="48" y="${t.from}" width="${n[0]-96}" height="${t.to-t.from}" rx="10" fill="var(--lane-fill)" stroke="var(--lane-stroke)" stroke-width="1"/>`,`<text x="62" y="${t.from+18}" class="t-dim" font-size="9" font-weight="600">${b(t.label)}</text>`);for(let e of i.values())a.push(`<path d="M ${e.cx} ${I.lifelineTop} L ${e.cx} ${r}" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>`);let o={...k,return:[`a-default`,`arrowhead`]};for(let t of e.messages){let e=i.get(t.from),n=i.get(t.to);if(!e||!n)continue;let r=n.cx>e.cx?1:-1,s=e.cx+r*7,c=n.cx-r*7,l=t.variant??`default`,[u,d]=o[l]??o.default,f=l===`emphasis`?1.8:1.4,p=l===`return`||l===`dashed`?` stroke-dasharray="3,5"`:``;a.push(`<path d="M ${s} ${t.y} L ${c} ${t.y}" class="${u}" stroke-width="${f}"${p} marker-end="url(#${d})"/>`);let m=(s+c)/2,h=Math.max(34,x(t.label)*5.2+12),g=l===`security`?`t-security`:l===`dashed`?`t-messagebus`:l===`return`?`t-muted`:`t-backend`;a.push(`<rect x="${m-h/2}" y="${t.y-20}" width="${h}" height="${I.labelH}" rx="3" class="c-mask"/>`),a.push(`<text x="${m}" y="${t.y-10}" class="${g}" font-size="9" text-anchor="middle">${b(t.label)}</text>`),t.note&&a.push(`<text x="${Math.min(s,c)+12}" y="${t.y+18}" class="t-dim" font-size="7">${b(t.note)}</text>`)}if(e.activations)for(let t of e.activations){let e=i.get(t.participant);if(!e)continue;let n=O[t.type]??`c-external`,r=e.cx-5,o=t.to-t.from;a.push(`<rect x="${r}" y="${t.from}" width="10" height="${o}" rx="3" class="c-mask"/>`,`<rect x="${r}" y="${t.from}" width="10" height="${o}" rx="3" class="${n}" stroke-width="1"/>`)}for(let e of i.values()){let t=e.cx-I.participantW/2,n=O[e.type]??`c-external`;a.push(`<rect x="${t}" y="${I.topY}" width="${I.participantW}" height="${I.participantH}" rx="6" class="c-mask"/>`,`<rect x="${t}" y="${I.topY}" width="${I.participantW}" height="${I.participantH}" rx="6" class="${n}" stroke-width="1.5"/>`,`<text x="${e.cx}" y="${I.topY+22}" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">${b(e.label)}</text>`,e.sublabel?`<text x="${e.cx}" y="${I.topY+39}" class="t-muted" font-size="7" text-anchor="middle">${b(e.sublabel)}</text>`:``)}let s=I.legendY;a.push(`<text x="40" y="${s-20}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let c=[[`M`,`a-emphasis`,`arrowhead-emphasis`,`request`],[`M`,`a-default`,`arrowhead`,`return`],[`M`,`a-security`,`arrowhead-security`,`security`],[`M`,`a-dashed`,`arrowhead-dashed`,`async trace`]],l=40;for(let[,e,,t]of c){let n=t===`return`?` stroke-dasharray="3,5"`:``;a.push(`<path d="M ${l} ${s} L ${l+34} ${s}" class="${e}" stroke-width="1.4"${n} marker-end="url(#${t===`request`?`arrowhead-emphasis`:t===`return`?`arrowhead`:t===`security`?`arrowhead-security`:`arrowhead-dashed`})"/>`),a.push(`<text x="${l+40}" y="${s+3}" class="t-muted" font-size="8">${t}</text>`),l+=120}a.push(`</svg>`);let u=z(e.cards);return{svg:a.join(`
-`),cardsHtml:u}}function R(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),(!e.participants?.length||e.participants.length<2)&&t.push(`Need at least 2 participants`),e.messages?.length||t.push(`At least one message required`);let n=new Set(e.participants?.map(e=>e.id));for(let r of e.messages??[])n.has(r.from)||t.push(`Message references unknown source "${r.from}"`),n.has(r.to)||t.push(`Message references unknown target "${r.to}"`);return t}function z(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${b(e.dot)}"></div><h3>${b(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${b(e)}</li>`).join(``)}</ul></div>`).join(`
-`):``}const B={laneX:40,laneY:52,laneW:640,laneH:104,laneGap:20,laneTitleH:30,colXs:[88,220,300,430,500,625],nodeW:92,nodeH:52,defaultViewBox:[720,600]};function V(e){let t=pe(e);if(t.length>0)throw Error(`Workflow validation failed:\n${t.join(`
-`)}`);let n=new Map(e.lanes.map((e,t)=>[e.id,t]));function r(e){return B.laneY+(n.get(e)??0)*(B.laneH+B.laneGap)}function i(){return B.laneY+e.lanes.length*B.laneH+(e.lanes.length-1)*B.laneGap}let a=new Map;for(let t of e.nodes){let e=t.width??B.nodeW,n=t.height??(t.tag?68:B.nodeH),i=B.colXs[t.col],o=B.laneH-B.laneTitleH,s=r(t.lane)+B.laneTitleH+(o-n)/2+(t.yOffset??0);a.set(t.id,{...t,width:e,height:n,x:i-e/2,y:s,cx:i,cy:s+n/2})}let o=B.laneY+e.lanes.length*B.laneH+(e.lanes.length-1)*B.laneGap+124,s=e.meta.viewBox??[B.defaultViewBox[0],o],c=[];c.push(`<svg viewBox="0 0 ${s[0]} ${s[1]}" role="img" aria-label="${b(e.meta.title)}">`),c.push(A()),c.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`);for(let t=0;t<e.lanes.length;t++){let n=B.laneY+t*(B.laneH+B.laneGap);c.push(`<rect x="${B.laneX}" y="${n}" width="${B.laneW}" height="${B.laneH}" rx="10" class="c-lane" fill="var(--lane-fill)" stroke="var(--lane-stroke)" stroke-width="1"/>`),c.push(`<text x="${B.laneX+14}" y="${n+22}" class="t-dim" font-size="10" font-weight="600">${String(t+1).padStart(2,`0`)} / ${b(e.lanes[t].label)}</text>`)}let l=new Map;function u(e){let t=`${e.from}->${e.to}`;if(l.has(t))return l.get(t);let n=a.get(e.from),i=a.get(e.to),o=e=>({x:e.x,y:e.y,width:e.width,height:e.height}),s=S(o(n),T(e.fromSide,C(o(n),o(i)))),c=S(o(i),T(e.toSide,w(o(n),o(i)))),u=[];if(e.via)u=e.via;else{let t=e.route??`auto`;if(t===`straight`)u=[];else if(t===`drop`||t===`auto`&&n.lane!==i.lane){let t=r(n.lane)+B.laneH,a=t+(r(i.lane)-t)*(e.bias??.5);u=[{x:s.x,y:a},{x:c.x,y:a}]}else if(t===`outside-right`){let t=e.channelX??B.laneX+B.laneW+12;u=[{x:t,y:s.y},{x:t,y:c.y}]}else if(t===`return-left`){let t=e.channelX??Math.min(n.x,i.x)-28;u=[{x:t,y:s.y},{x:t,y:c.y}]}else if(t===`bottom-channel`){let t=e.channelY??Math.max(n.y+n.height,i.y+i.height)+32;u=[{x:s.x,y:t},{x:c.x,y:t}]}}let d=[s,...u,c],f={d:E(d),points:d};return l.set(t,f),f}for(let t of e.edges){let e=a.get(t.from),n=a.get(t.to);if(!e||!n)continue;let[r,i]=k[t.variant??`default`]??k.default,o=u(t),s=t.variant===`emphasis`||t.variant===`animated`?1.8:1.4;c.push(`<path d="${o.d}" class="${r}" stroke-width="${s}" marker-end="url(#${i})"/>`)}for(let e of a.values()){let t=O[e.type]??`c-external`,n=e.tag?`\n    <text x="${e.cx}" y="${e.y+e.height-12}" class="t-muted" font-size="7" text-anchor="middle">${b(e.tag)}</text>`:``;c.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="c-mask"/>`,`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="${t}" stroke-width="1.5"/>`,`<text x="${e.cx}" y="${e.y+21}" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">${b(e.label)}</text>`,`<text x="${e.cx}" y="${e.y+38}" class="t-muted" font-size="8" text-anchor="middle">${b(e.sublabel??``)}</text>${n}`)}for(let t of e.edges){if(!t.label)continue;let e=u(t),n={x:(e.points[0].x+e.points[e.points.length-1].x)/2+(t.labelDx??0),y:e.points[0].y-10+(t.labelDy??0)},r=Math.max(30,x(t.label)*4.8+10);c.push(`<rect x="${n.x-r/2}" y="${n.y-10}" width="${r}" height="14" rx="3" class="c-mask"/>`),c.push(`<text x="${n.x}" y="${n.y}" class="t-muted" font-size="8" text-anchor="middle">${b(t.label)}</text>`)}let d=i()+44;c.push(`<text x="40" y="${d}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let f=[[`c-frontend`,`User UI`,``],[`c-backend`,`Agent logic`,``],[`c-security`,`Policy`,``],[`c-messagebus`,`Tool action`,``],[`c-database`,`Context / trace`,``]],p=40;for(let[e,t]of f)c.push(`<rect x="${p}" y="${d+14}" width="14" height="9" rx="2" class="${e}" stroke-width="1"/><text x="${p+20}" y="${d+22}" class="t-muted" font-size="7">${t}</text>`),p+=80;c.push(`</svg>`);let m=me(e.cards);return{svg:c.join(`
-`),cardsHtml:m}}function pe(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),e.lanes?.length||t.push(`At least one lane required`),e.nodes?.length||t.push(`At least one node required`),e.edges?.length||t.push(`At least one edge required`);let n=new Set(e.lanes?.map(e=>e.id)),r=new Set(e.nodes?.map(e=>e.id));r.size!==e.nodes?.length&&t.push(`Node IDs must be unique`);for(let r of e.nodes??[])n.has(r.lane)||t.push(`Node "${r.id}" uses unknown lane "${r.lane}"`),(r.col<0||r.col>=B.colXs.length)&&t.push(`Node "${r.id}" column ${r.col} out of range 0-${B.colXs.length-1}`);for(let n of e.edges??[])r.has(n.from)||t.push(`Edge references unknown source "${n.from}"`),r.has(n.to)||t.push(`Edge references unknown target "${n.to}"`);return t}function me(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${b(e.dot)}"></div><h3>${b(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${b(e)}</li>`).join(``)}</ul></div>`).join(`
-`):``}function he(){return`<!DOCTYPE html>
+  </defs>`}function ae(e){let t=oe(e);if(t.length>0)return{svg:`<svg viewBox="0 0 600 200"><text x="300" y="100" text-anchor="middle" fill="var(--text)">Architecture validation failed</text><text x="300" y="130" text-anchor="middle" font-size="12" fill="var(--text-muted)">${x(t.join(`; `))}</text></svg>`,cardsHtml:``};let n=new Map;for(let t of e.components){let e=t.size?.[0]??120,r=t.size?.[1]??60;n.set(t.id,{...t,x:t.pos.x,y:t.pos.y,width:e,height:r})}let r=100,i=100;for(let e of n.values())r=Math.max(r,e.x+e.width+40),i=Math.max(i,e.y+e.height+40);let a=e.meta.viewBox??[Math.max(720,Math.ceil(r/100)*100),Math.max(400,Math.ceil(i/100)*100)],o=[];if(o.push(`<svg viewBox="0 0 ${a[0]} ${a[1]}" role="img" aria-label="${x(e.meta.title)}">`),o.push(j()),o.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`),e.boundaries)for(let t of e.boundaries){let e=new Set(t.wraps),r=[...n.values()].filter(t=>e.has(t.id));if(r.length===0)continue;let i=Math.min(...r.map(e=>e.x))-30,a=Math.min(...r.map(e=>e.y))-30,s=Math.max(...r.map(e=>e.x+e.width))+30,c=Math.max(...r.map(e=>e.y+e.height))+30,l=t.kind===`security-group`?` stroke-dasharray="8,4"`:` stroke-dasharray="6,4"`,u=t.kind===`security-group`?`var(--c-security-stroke)`:`var(--c-cloud-stroke)`;o.push(`<rect x="${i}" y="${a}" width="${s-i}" height="${c-a}" rx="12" fill="var(--lane-fill)" stroke="${u}" stroke-width="1.5"${l}/>`),o.push(`<text x="${i+10}" y="${a+18}" class="t-dim" font-size="10" font-weight="600">${x(t.label)}</text>`)}for(let t of e.connections){let e=n.get(t.from),r=n.get(t.to);if(!e||!r)continue;let i=C(e,E(t.fromSide,w(e,r))),a=C(r,E(t.toSide,T(e,r))),s=(i.y+a.y)/2,c=t.route===`drop`?[i,{x:i.x,y:s},{x:a.x,y:s},a]:[i,a],[l,u]=A[t.variant??`default`]??A.default,d=t.variant===`emphasis`?1.8:1.4;if(o.push(`<path d="${D(c)}" class="${l}" stroke-width="${d}" marker-end="url(#${u})"/>`),t.label){let e={x:(i.x+a.x)/2+(t.labelDx??0),y:i.y-10+(t.labelDy??0)},n=Math.max(30,S(t.label)*4.8+10);o.push(`<rect x="${e.x-n/2}" y="${e.y-10}" width="${n}" height="14" rx="3" class="c-mask"/>`),o.push(`<text x="${e.x}" y="${e.y}" class="t-muted" font-size="8" text-anchor="middle">${x(t.label)}</text>`)}}let s={};for(let e of n.values()){let t=k[e.type]??`c-external`,n=e.x+e.width/2;e.y+e.height/2,o.push(`<g class="node" data-k="${x(e.id)}">`),o.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="c-mask"/>`),o.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="${t}" stroke-width="1.5"/>`),o.push(`<text x="${n}" y="${e.y+24}" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">${x(e.label)}</text>`),e.sublabel&&o.push(`<text x="${n}" y="${e.y+42}" class="t-muted" font-size="9" text-anchor="middle">${x(e.sublabel)}</text>`),o.push(`</g>`);let r=e.type.charAt(0).toUpperCase()+e.type.slice(1),i=e.sublabel?` · ${x(e.sublabel)}`:``;s[e.id]={t:x(e.label),m:`${r}${i}`,b:`${x(e.label)} (${r})`}}new Set(e.components.map(e=>e.type));let c=Math.max(...[...n.values()].map(e=>e.y+e.height))+60;o.push(`<text x="40" y="${c}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let l=[[`c-frontend`,`User UI`],[`c-backend`,`Service`],[`c-database`,`Data Store`],[`c-cloud`,`Infra`],[`c-security`,`Security`],[`c-messagebus`,`Queue`],[`c-external`,`External`]],u=40;for(let[e,t]of l)o.push(`<rect x="${u}" y="${c+14}" width="14" height="9" rx="2" class="${e}" stroke-width="1"/><text x="${u+20}" y="${c+22}" class="t-muted" font-size="7">${t}</text>`),u+=80;o.push(`</svg>`);let d=se(e.cards);return{svg:o.join(`
+`),cardsHtml:d,detailData:s}}function oe(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title is required`),e.components?.length||t.push(`At least one component required`);let n=new Set(e.components?.map(e=>e.id));n.size!==e.components?.length&&t.push(`Component IDs must be unique`);for(let r of e.connections??[])n.has(r.from)||t.push(`Connection references unknown source "${r.from}"`),n.has(r.to)||t.push(`Connection references unknown target "${r.to}"`);let r=e.components.map(e=>({id:e.id,x:e.pos.x,y:e.pos.y,width:e.size?.[0]??120,height:e.size?.[1]??60}));for(let e=0;e<r.length;e++)for(let n=e+1;n<r.length;n++)ie(r[e],r[n],10)&&t.push(`"${r[e].id}" overlaps "${r[n].id}" — move one component`);return t}function se(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${x(e.dot)}"></div><h3>${x(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${x(e)}</li>`).join(``)}</ul></div>`).join(`
+`):``}const M={stageY:46,stageH:36,stageBottomPad:74,leftX:100,colGap:215,stageW:168,nodeW:112,nodeH:58,rowYs:[128,242,356,470,584],labelH:16,defaultViewBox:[940,720]};function ce(e){let t=le(e);if(t.length>0)throw Error(`Data-flow validation failed:\n${t.join(`
+`)}`);let n=e.meta.viewBox??M.defaultViewBox;function r(e){return M.leftX+e*M.colGap}let i=new Map;for(let t of e.nodes){let e=t.width??M.nodeW,n=t.height??M.nodeH,a=r(t.stage),o=M.rowYs[t.row]+(t.yOffset??0);i.set(t.id,{...t,width:e,height:n,cx:a,cy:o+n/2,x:a-e/2,y:o})}let a=[];a.push(`<svg viewBox="0 0 ${n[0]} ${n[1]}" role="img" aria-label="${x(e.meta.title)}">`),a.push(j()),a.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`);let o=n[1]-M.stageY-M.stageBottomPad;for(let t=0;t<e.stages.length;t++){let n=r(t),i=n-M.stageW/2;a.push(`<rect x="${i}" y="${M.stageY}" width="${M.stageW}" height="${o}" rx="10" fill="var(--lane-fill)" stroke="var(--lane-stroke)" stroke-width="1"/>`,`<text x="${n}" y="${M.stageY+22}" class="t-dim" font-size="9" font-weight="600" text-anchor="middle">${String(t+1).padStart(2,`0`)} / ${x(e.stages[t].label)}</text>`)}for(let t of e.flows){let e=i.get(t.from),n=i.get(t.to);if(!e||!n)continue;let r=C(e,E(t.fromSide,w(e,n))),o=C(n,E(t.toSide,T(e,n))),s=r.x+(o.x-r.x)/2,c=[r,...t.route===`vertical-channel`?[{x:t.channelX??r.x+44,y:r.y},{x:t.channelX??r.x+44,y:o.y}]:Math.abs(r.y-o.y)<4?[r,o]:[{x:s,y:r.y},{x:s,y:o.y}],o],[l,u]=A[t.variant??`default`]??A.default,d=t.variant===`emphasis`||t.variant===`animated`?1.8:1.4;a.push(`<path d="${D(c)}" class="${l}" stroke-width="${d}" marker-end="url(#${u})"/>`);let f={x:(r.x+o.x)/2+(t.labelDx??0),y:(r.y+o.y)/2-10+(t.labelDy??0)},p=Math.max(S(t.label),S(t.classification??``)),m=Math.max(34,p*4.9+12),h=t.classification?27:M.labelH;a.push(`<rect x="${f.x-m/2}" y="${f.y-11}" width="${m}" height="${h}" rx="4" class="c-mask"/>`),a.push(`<text x="${f.x}" y="${f.y}" class="t-muted" font-size="8" text-anchor="middle">${x(t.label)}</text>`),t.classification&&a.push(`<text x="${f.x}" y="${f.y+11}" class="t-dim" font-size="7" text-anchor="middle">${x(t.classification)}</text>`)}let s={};for(let e of i.values()){let t=k[e.type]??`c-external`,n=e.tag?`\n    <text x="${e.cx}" y="${e.y+e.height-11}" class="t-muted" font-size="7" text-anchor="middle">${x(e.tag)}</text>`:``;a.push(`<g class="node" data-k="${x(e.id)}">`),a.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="c-mask"/>`,`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="${t}" stroke-width="1.5"/>`,`<text x="${e.cx}" y="${e.y+21}" class="t-primary" font-size="10" font-weight="600" text-anchor="middle">${x(e.label)}</text>`,`<text x="${e.cx}" y="${e.y+37}" class="t-muted" font-size="7" text-anchor="middle">${x(e.sublabel??``)}</text>${n}`),a.push(`</g>`);let r=e.type.charAt(0).toUpperCase()+e.type.slice(1);s[e.id]={t:x(e.label),m:r,b:`${x(e.label)} (${r})`}}let c=n[1]-36;a.push(`<text x="40" y="${c-20}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let l=[[`M`,`a-emphasis`,`arrowhead-emphasis`,`primary data`],[`M`,`a-security`,`arrowhead-security`,`policy / PII`],[`M`,`a-dashed`,`arrowhead-dashed`,`async batch`]],u=40;for(let[,e,,t]of l){let n=t===`primary data`?`arrowhead-emphasis`:t===`policy / PII`?`arrowhead-security`:`arrowhead-dashed`;a.push(`<path d="M ${u} ${c} L ${u+34} ${c}" class="${e}" stroke-width="1.4" marker-end="url(#${n})"/>`),a.push(`<text x="${u+40}" y="${c+3}" class="t-muted" font-size="8">${t}</text>`),u+=130}a.push(`</svg>`);let d=ue(e.cards);return{svg:a.join(`
+`),cardsHtml:d,detailData:s}}function le(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),(!e.stages?.length||e.stages.length<2)&&t.push(`Need at least 2 stages`),e.nodes?.length||t.push(`At least one node required`);let n=new Set(e.nodes?.map(e=>e.id));for(let r of e.flows??[])n.has(r.from)||t.push(`Flow references unknown source "${r.from}"`),n.has(r.to)||t.push(`Flow references unknown target "${r.to}"`);return t}function ue(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${x(e.dot)}"></div><h3>${x(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${x(e)}</li>`).join(``)}</ul></div>`).join(`
+`):``}const N={phaseY:126,eventY:278,outcomeY:450,phaseW:118,phaseH:62,eventW:126,eventH:58,outcomeW:118,outcomeH:58,phaseXs:[94,248,402,556,710],eventXs:[402,556,710],outcomeXs:[402,556,710],defaultViewBox:[980,660]},de={start:`c-frontend`,active:`c-backend`,waiting:`c-cloud`,decision:`c-security`,success:`c-database`,failure:`c-security`,neutral:`c-external`,external:`c-external`};function P(e){let t=F(e);if(t.length>0)throw Error(`Lifecycle validation failed:\n${t.join(`
+`)}`);let n=e.meta.viewBox??N.defaultViewBox;function r(e){return e===`main`?`phase`:e===`terminal`?`outcome`:`event`}let i=new Map;for(let t of e.states){let e=r(t.lane),n=e===`phase`,a=e===`outcome`,o=t.width??(n?N.phaseW:a?N.outcomeW:N.eventW),s=t.height??(n?N.phaseH:a?N.outcomeH:N.eventH),c=n?N.phaseXs:a?N.outcomeXs:N.eventXs,l=c[t.col]??c[c.length-1],u=(n?N.phaseY:a?N.outcomeY:N.eventY)+(t.yOffset??0);i.set(t.id,{...t,width:o,height:s,x:l-o/2,y:u,cx:l,cy:u+s/2})}let a=[];a.push(`<svg viewBox="0 0 ${n[0]} ${n[1]}" role="img" aria-label="${x(e.meta.title)}">`),a.push(j()),a.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`);let o=n[0]-72,s=e.lanes.find(e=>e.id===`main`),c=e.lanes.find(e=>e.id===`terminal`),l=e.lanes.filter(e=>e.id!==`main`&&e.id!==`terminal`),u=[s?.label??`Lifecycle phases`,l.length?l.map(e=>e.label).join(` + `):`Interruptions`,c?.label??`Outcomes`],d=[112,264,436];for(let e=0;e<3;e++)a.push(`<path d="M 72 ${d[e]} L ${o} ${d[e]}" class="a-default" stroke-width="0.8" stroke-dasharray="3,8"/>`),a.push(`<text x="72" y="${d[e]-12}" class="t-dim" font-size="10" font-weight="600">${String(e+1).padStart(2,`0`)} / ${x(u[e])}</text>`);for(let t of e.transitions){let e=i.get(t.from),n=i.get(t.to);if(!e||!n)continue;let r=C(e,E(t.fromSide,w(e,n))),o=C(n,E(t.toSide,T(e,n))),s=(r.y+o.y)/2,c=[];c=(t.route??`auto`)===`straight`||e.lane===n.lane?[]:[{x:r.x,y:s},{x:o.x,y:s}];let l=[r,...c,o],[u,d]=A[t.variant??`default`]??A.default,f=t.variant===`emphasis`||t.variant===`animated`?2:1.1,p=O(l,t.cornerRadius??10);a.push(`<path d="${p}" class="${u}" stroke-width="${f}" marker-end="url(#${d})"/>`)}let f={};for(let e of i.values()){let t=de[e.type]??`c-external`,n=e.step?`\n    <text x="${e.x+10}" y="${e.y+14}" class="t-muted" font-size="7" font-weight="700">${x(e.step)}</text>`:``,r=e.tag?`\n    <text x="${e.cx}" y="${e.y+e.height-11}" class="t-muted" font-size="7" text-anchor="middle">${x(e.tag)}</text>`:``;a.push(`<g class="node" data-k="${x(e.id)}">`),a.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="7" class="c-mask"/>`,`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="7" class="${t}" stroke-width="1.5"/>${n}`,`<text x="${e.cx}" y="${e.y+21}" class="t-primary" font-size="10" font-weight="600" text-anchor="middle">${x(e.label)}</text>`,`<text x="${e.cx}" y="${e.y+37}" class="t-muted" font-size="7" text-anchor="middle">${x(e.sublabel??``)}</text>${r}`),a.push(`</g>`);let i=e.type.charAt(0).toUpperCase()+e.type.slice(1);f[e.id]={t:x(e.label),m:i,b:`${x(e.label)} (${i})`}}let p=n[1]-98;a.push(`<text x="40" y="${p-20}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let m=[[`c-backend`,`active state`],[`c-cloud`,`waiting`],[`c-database`,`terminal success`],[`c-security`,`failure / exit`]],h=40;for(let[e,t]of m)a.push(`<rect x="${h}" y="${p-8}" width="14" height="9" rx="2" class="${e}" stroke-width="1"/><text x="${h+20}" y="${p}" class="t-muted" font-size="7">${t}</text>`),h+=110;a.push(`</svg>`);let g=I(e.cards);return{svg:a.join(`
+`),cardsHtml:g,detailData:f}}function F(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),e.lanes?.length||t.push(`At least one lane required`),(!e.states?.length||e.states.length<2)&&t.push(`Need at least 2 states`),e.lanes.some(e=>e.id===`main`)||t.push(`Need a lane with id "main"`);let n=new Set(e.states?.map(e=>e.id));for(let r of e.transitions??[])n.has(r.from)||t.push(`Transition references unknown source "${r.from}"`),n.has(r.to)||t.push(`Transition references unknown target "${r.to}"`);return t}function I(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${x(e.dot)}"></div><h3>${x(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${x(e)}</li>`).join(``)}</ul></div>`).join(`
+`):``}const L={topY:72,participantW:86,participantH:54,lifelineTop:142,legendY:0,leftX:62,colGap:108,labelH:16,defaultViewBox:[920,760]};function R(e){let t=z(e);if(t.length>0)throw Error(`Sequence validation failed:\n${t.join(`
+`)}`);let n=e.meta.viewBox??L.defaultViewBox;L.legendY=n[1]-54,L.lifelineTop=142;let r=n[1]-65,i=new Map(e.participants.map((e,t)=>[e.id,{...e,index:t,cx:L.leftX+t*L.colGap}])),a=[];if(a.push(`<svg viewBox="0 0 ${n[0]} ${n[1]}" role="img" aria-label="${x(e.meta.title)}">`),a.push(j()),a.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`),e.segments)for(let t of e.segments)a.push(`<rect x="48" y="${t.from}" width="${n[0]-96}" height="${t.to-t.from}" rx="10" fill="var(--lane-fill)" stroke="var(--lane-stroke)" stroke-width="1"/>`,`<text x="62" y="${t.from+18}" class="t-dim" font-size="9" font-weight="600">${x(t.label)}</text>`);for(let e of i.values())a.push(`<path d="M ${e.cx} ${L.lifelineTop} L ${e.cx} ${r}" class="a-default" stroke-width="0.8" stroke-dasharray="3,7"/>`);let o={...A,return:[`a-default`,`arrowhead`]};for(let t of e.messages){let e=i.get(t.from),n=i.get(t.to);if(!e||!n)continue;let r=n.cx>e.cx?1:-1,s=e.cx+r*7,c=n.cx-r*7,l=t.variant??`default`,[u,d]=o[l]??o.default,f=l===`emphasis`?1.8:1.4,p=l===`return`||l===`dashed`?` stroke-dasharray="3,5"`:``;a.push(`<path d="M ${s} ${t.y} L ${c} ${t.y}" class="${u}" stroke-width="${f}"${p} marker-end="url(#${d})"/>`);let m=(s+c)/2,h=Math.max(34,S(t.label)*5.2+12),g=l===`security`?`t-security`:l===`dashed`?`t-messagebus`:l===`return`?`t-muted`:`t-backend`;a.push(`<rect x="${m-h/2}" y="${t.y-20}" width="${h}" height="${L.labelH}" rx="3" class="c-mask"/>`),a.push(`<text x="${m}" y="${t.y-10}" class="${g}" font-size="9" text-anchor="middle">${x(t.label)}</text>`),t.note&&a.push(`<text x="${Math.min(s,c)+12}" y="${t.y+18}" class="t-dim" font-size="7">${x(t.note)}</text>`)}if(e.activations)for(let t of e.activations){let e=i.get(t.participant);if(!e)continue;let n=k[t.type]??`c-external`,r=e.cx-5,o=t.to-t.from;a.push(`<rect x="${r}" y="${t.from}" width="10" height="${o}" rx="3" class="c-mask"/>`,`<rect x="${r}" y="${t.from}" width="10" height="${o}" rx="3" class="${n}" stroke-width="1"/>`)}let s={};for(let e of i.values()){let t=e.cx-L.participantW/2,n=k[e.type]??`c-external`;a.push(`<g class="node" data-k="${x(e.id)}">`),a.push(`<rect x="${t}" y="${L.topY}" width="${L.participantW}" height="${L.participantH}" rx="6" class="c-mask"/>`,`<rect x="${t}" y="${L.topY}" width="${L.participantW}" height="${L.participantH}" rx="6" class="${n}" stroke-width="1.5"/>`,`<text x="${e.cx}" y="${L.topY+22}" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">${x(e.label)}</text>`,e.sublabel?`<text x="${e.cx}" y="${L.topY+39}" class="t-muted" font-size="7" text-anchor="middle">${x(e.sublabel)}</text>`:``),a.push(`</g>`);let r=e.type.charAt(0).toUpperCase()+e.type.slice(1);s[e.id]={t:x(e.label),m:r,b:`${x(e.label)} (${r})`}}let c=L.legendY;a.push(`<text x="40" y="${c-20}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let l=[[`M`,`a-emphasis`,`arrowhead-emphasis`,`request`],[`M`,`a-default`,`arrowhead`,`return`],[`M`,`a-security`,`arrowhead-security`,`security`],[`M`,`a-dashed`,`arrowhead-dashed`,`async trace`]],u=40;for(let[,e,,t]of l){let n=t===`return`?` stroke-dasharray="3,5"`:``;a.push(`<path d="M ${u} ${c} L ${u+34} ${c}" class="${e}" stroke-width="1.4"${n} marker-end="url(#${t===`request`?`arrowhead-emphasis`:t===`return`?`arrowhead`:t===`security`?`arrowhead-security`:`arrowhead-dashed`})"/>`),a.push(`<text x="${u+40}" y="${c+3}" class="t-muted" font-size="8">${t}</text>`),u+=120}a.push(`</svg>`);let d=B(e.cards);return{svg:a.join(`
+`),cardsHtml:d,detailData:s}}function z(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),(!e.participants?.length||e.participants.length<2)&&t.push(`Need at least 2 participants`),e.messages?.length||t.push(`At least one message required`);let n=new Set(e.participants?.map(e=>e.id));for(let r of e.messages??[])n.has(r.from)||t.push(`Message references unknown source "${r.from}"`),n.has(r.to)||t.push(`Message references unknown target "${r.to}"`);return t}function B(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${x(e.dot)}"></div><h3>${x(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${x(e)}</li>`).join(``)}</ul></div>`).join(`
+`):``}const V={laneX:40,laneY:52,laneW:640,laneH:104,laneGap:20,laneTitleH:30,colXs:[88,220,300,430,500,625],nodeW:92,nodeH:52,defaultViewBox:[720,600]};function H(e){let t=fe(e);if(t.length>0)throw Error(`Workflow validation failed:\n${t.join(`
+`)}`);let n=new Map(e.lanes.map((e,t)=>[e.id,t]));function r(e){return V.laneY+(n.get(e)??0)*(V.laneH+V.laneGap)}function i(){return V.laneY+e.lanes.length*V.laneH+(e.lanes.length-1)*V.laneGap}let a=new Map;for(let t of e.nodes){let e=t.width??V.nodeW,n=t.height??(t.tag?68:V.nodeH),i=V.colXs[t.col],o=V.laneH-V.laneTitleH,s=r(t.lane)+V.laneTitleH+(o-n)/2+(t.yOffset??0);a.set(t.id,{...t,width:e,height:n,x:i-e/2,y:s,cx:i,cy:s+n/2})}let o=V.laneY+e.lanes.length*V.laneH+(e.lanes.length-1)*V.laneGap+124,s=e.meta.viewBox??[V.defaultViewBox[0],o],c=[];c.push(`<svg viewBox="0 0 ${s[0]} ${s[1]}" role="img" aria-label="${x(e.meta.title)}">`),c.push(j()),c.push(`<rect width="100%" height="100%" fill="url(#grid)"/>`);for(let t=0;t<e.lanes.length;t++){let n=V.laneY+t*(V.laneH+V.laneGap);c.push(`<rect x="${V.laneX}" y="${n}" width="${V.laneW}" height="${V.laneH}" rx="10" class="c-lane" fill="var(--lane-fill)" stroke="var(--lane-stroke)" stroke-width="1"/>`),c.push(`<text x="${V.laneX+14}" y="${n+22}" class="t-dim" font-size="10" font-weight="600">${String(t+1).padStart(2,`0`)} / ${x(e.lanes[t].label)}</text>`)}let l=new Map;function u(e){let t=`${e.from}->${e.to}`;if(l.has(t))return l.get(t);let n=a.get(e.from),i=a.get(e.to),o=e=>({x:e.x,y:e.y,width:e.width,height:e.height}),s=C(o(n),E(e.fromSide,w(o(n),o(i)))),c=C(o(i),E(e.toSide,T(o(n),o(i)))),u=[];if(e.via)u=e.via;else{let t=e.route??`auto`;if(t===`straight`)u=[];else if(t===`drop`||t===`auto`&&n.lane!==i.lane){let t=r(n.lane)+V.laneH,a=t+(r(i.lane)-t)*(e.bias??.5);u=[{x:s.x,y:a},{x:c.x,y:a}]}else if(t===`outside-right`){let t=e.channelX??V.laneX+V.laneW+12;u=[{x:t,y:s.y},{x:t,y:c.y}]}else if(t===`return-left`){let t=e.channelX??Math.min(n.x,i.x)-28;u=[{x:t,y:s.y},{x:t,y:c.y}]}else if(t===`bottom-channel`){let t=e.channelY??Math.max(n.y+n.height,i.y+i.height)+32;u=[{x:s.x,y:t},{x:c.x,y:t}]}}let d=[s,...u,c],f={d:D(d),points:d};return l.set(t,f),f}for(let t of e.edges){let e=a.get(t.from),n=a.get(t.to);if(!e||!n)continue;let[r,i]=A[t.variant??`default`]??A.default,o=u(t),s=t.variant===`emphasis`||t.variant===`animated`?1.8:1.4;c.push(`<path d="${o.d}" class="${r}" stroke-width="${s}" marker-end="url(#${i})"/>`)}let d={};for(let e of a.values()){let t=k[e.type]??`c-external`,n=e.tag?`\n    <text x="${e.cx}" y="${e.y+e.height-12}" class="t-muted" font-size="7" text-anchor="middle">${x(e.tag)}</text>`:``;c.push(`<g class="node" data-k="${x(e.id)}">`),c.push(`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="c-mask"/>`,`<rect x="${e.x}" y="${e.y}" width="${e.width}" height="${e.height}" rx="6" class="${t}" stroke-width="1.5"/>`,`<text x="${e.cx}" y="${e.y+21}" class="t-primary" font-size="11" font-weight="600" text-anchor="middle">${x(e.label)}</text>`,`<text x="${e.cx}" y="${e.y+38}" class="t-muted" font-size="8" text-anchor="middle">${x(e.sublabel??``)}</text>${n}`),c.push(`</g>`);let r=e.type.charAt(0).toUpperCase()+e.type.slice(1);d[e.id]={t:x(e.label),m:`${r}`,b:`${x(e.label)} (${r})`}}for(let t of e.edges){if(!t.label)continue;let e=u(t),n={x:(e.points[0].x+e.points[e.points.length-1].x)/2+(t.labelDx??0),y:e.points[0].y-10+(t.labelDy??0)},r=Math.max(30,S(t.label)*4.8+10);c.push(`<rect x="${n.x-r/2}" y="${n.y-10}" width="${r}" height="14" rx="3" class="c-mask"/>`),c.push(`<text x="${n.x}" y="${n.y}" class="t-muted" font-size="8" text-anchor="middle">${x(t.label)}</text>`)}let f=i()+44;c.push(`<text x="40" y="${f}" class="t-primary" font-size="10" font-weight="600">Legend</text>`);let p=[[`c-frontend`,`User UI`,``],[`c-backend`,`Agent logic`,``],[`c-security`,`Policy`,``],[`c-messagebus`,`Tool action`,``],[`c-database`,`Context / trace`,``]],m=40;for(let[e,t]of p)c.push(`<rect x="${m}" y="${f+14}" width="14" height="9" rx="2" class="${e}" stroke-width="1"/><text x="${m+20}" y="${f+22}" class="t-muted" font-size="7">${t}</text>`),m+=80;c.push(`</svg>`);let h=pe(e.cards);return{svg:c.join(`
+`),cardsHtml:h,detailData:d}}function fe(e){let t=[];e.schema_version!==1&&t.push(`schema_version must be 1`),e.meta?.title||t.push(`meta.title required`),e.lanes?.length||t.push(`At least one lane required`),e.nodes?.length||t.push(`At least one node required`),e.edges?.length||t.push(`At least one edge required`);let n=new Set(e.lanes?.map(e=>e.id)),r=new Set(e.nodes?.map(e=>e.id));r.size!==e.nodes?.length&&t.push(`Node IDs must be unique`);for(let r of e.nodes??[])n.has(r.lane)||t.push(`Node "${r.id}" uses unknown lane "${r.lane}"`),(r.col<0||r.col>=V.colXs.length)&&t.push(`Node "${r.id}" column ${r.col} out of range 0-${V.colXs.length-1}`);for(let n of e.edges??[])r.has(n.from)||t.push(`Edge references unknown source "${n.from}"`),r.has(n.to)||t.push(`Edge references unknown target "${n.to}"`);return t}function pe(e){return e?.length?e.map(e=>`<div class="card"><div class="card-header"><div class="card-dot ${x(e.dot)}"></div><h3>${x(e.title)}</h3></div><ul>${e.items.map(e=>`<li>&bull; ${x(e)}</li>`).join(``)}</ul></div>`).join(`
+`):``}function me(){return`<!DOCTYPE html>
 <html lang="en" data-theme="dark"[PALETTE]>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="generator" content="aikit-diagram 1.0">
 <title>[TITLE]</title>
-<script>(function(){var t=null;try{var p=new URLSearchParams(location.search).get('theme');if(p==='light'||p==='dark')t=p}catch(_){}if(!t){try{t=localStorage.getItem('aikit-diagram-theme')}catch(_){}}if(t!=='light'&&t!=='dark')t=window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t)})();<\/script>
+<script>
+// Apply-before-paint: URL param > localStorage > prefers-color-scheme
+// Runs synchronously in <head> — zero flash, no FOUC.
+(function(){var t=null;try{var p=new URLSearchParams(location.search).get('theme');if(p==='light'||p==='dark')t=p}catch(_){}if(!t){try{t=localStorage.getItem('aikit-diagram-theme')}catch(_){}}if(t!=='light'&&t!=='dark')t=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';document.documentElement.setAttribute('data-theme',t)})();
+<\/script>
 <style>
-:root,[data-theme="dark"]{
---bg:#020617;--grid:#1e293b;--text:#fff;--text-muted:#94a3b8;--text-dim:#475569;--text-faint:#7d8da1;
---panel:rgba(15,23,42,0.5);--panel-border:#1e293b;--lane-fill:rgba(15,23,42,0.22);--lane-stroke:#334155;
---arrow:#64748b;--arrow-emphasis:#34d399;--mask:#0f172a;
---frontend-fill:rgba(8,51,68,0.4);--frontend-stroke:#22d3ee;
---backend-fill:rgba(6,78,59,0.4);--backend-stroke:#34d399;
---database-fill:rgba(76,29,149,0.4);--database-stroke:#a78bfa;
---cloud-fill:rgba(120,53,15,0.3);--cloud-stroke:#fbbf24;
---security-fill:rgba(136,19,55,0.4);--security-stroke:#fb7185;
---messagebus-fill:rgba(251,146,60,0.3);--messagebus-stroke:#fb923c;
---external-fill:rgba(30,41,59,0.5);--external-stroke:#94a3b8;
---toolbar-bg:rgba(15,23,42,0.8);--toolbar-border:#334155;--toolbar-text:#e2e8f0;--toolbar-hover:rgba(15,23,42,0.95);--toolbar-menu-bg:#0f172a;
+/* ═══════════════════════════════════════════════
+   Design Tokens — warm semantic palette
+   Inspired by effective-html's clay/olive/oat system
+   ═══════════════════════════════════════════════ */
+:root {
+  --serif: ui-serif, Georgia, "Times New Roman", serif;
+  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
-[data-theme="light"]{
---bg:#f8fafc;--grid:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--text-dim:#94a3b8;--text-faint:#64748b;
---panel:#fff;--panel-border:#e2e8f0;--lane-fill:rgba(248,250,252,0.65);--lane-stroke:#cbd5e1;
---arrow:#94a3b8;--arrow-emphasis:#059669;--mask:#fff;
---frontend-fill:rgba(34,211,238,0.15);--frontend-stroke:#0891b2;
---backend-fill:rgba(52,211,153,0.18);--backend-stroke:#059669;
---database-fill:rgba(167,139,250,0.2);--database-stroke:#7c3aed;
---cloud-fill:rgba(251,191,36,0.18);--cloud-stroke:#d97706;
---security-fill:rgba(251,113,133,0.15);--security-stroke:#e11d48;
---messagebus-fill:rgba(251,146,60,0.15);--messagebus-stroke:#ea580c;
---external-fill:rgba(148,163,184,0.18);--external-stroke:#64748b;
---toolbar-bg:rgba(255,255,255,0.92);--toolbar-border:#cbd5e1;--toolbar-text:#334155;--toolbar-hover:#fff;--toolbar-menu-bg:#fff;
+:root,[data-theme="dark"] {
+  /* Chrome — 3-level background hierarchy */
+  --bg: #141413; --surface: #1F1F1D; --surface2: #2A2A28;
+  /* Text — contrast cascade */
+  --ink: #FAF9F5; --body: #D1CFC5; --muted: #87867F; --dim: #57534E;
+  /* Borders */
+  --line: #3D3D3A; --line-soft: #2A2A28;
+  /* Brand accents — warm earth tones */
+  --clay: #E48A6E; --clay-soft: rgba(228,138,110,0.14);
+  --olive: #9DB07C; --olive-soft: rgba(157,176,124,0.16);
+  --gold: #D4B36F; --blue: #7FA3BC;
+  /* Diagram chrome */
+  --panel: rgba(31,31,29,0.5); --panel-border: #3D3D3A;
+  --lane-fill: rgba(31,31,29,0.22); --lane-stroke: #57534E;
+  --arrow: #87867F; --arrow-emphasis: #E48A6E; --mask: #1F1F1D;
+  /* Component fills — semantic type colors */
+  --c-frontend-fill: rgba(228,138,110,0.20); --c-frontend-stroke: #E48A6E;
+  --c-backend-fill: rgba(157,176,124,0.20);  --c-backend-stroke: #9DB07C;
+  --c-database-fill: rgba(127,163,188,0.20); --c-database-stroke: #7FA3BC;
+  --c-cloud-fill: rgba(212,179,111,0.18);    --c-cloud-stroke: #D4B36F;
+  --c-security-fill: rgba(248,113,113,0.18); --c-security-stroke: #f87171;
+  --c-messagebus-fill: rgba(251,146,60,0.18);--c-messagebus-stroke: #fb923c;
+  --c-external-fill: rgba(135,134,127,0.18); --c-external-stroke: #87867F;
+  /* Toolbar */
+  --toolbar-bg: rgba(31,31,29,0.9); --toolbar-border: #3D3D3A;
+  --toolbar-text: #D1CFC5; --toolbar-hover: rgba(42,42,40,0.95);
+  --toolbar-menu-bg: #1F1F1D;
 }
-/* Warm palette — earth tones */
-[data-palette="warm"][data-theme="dark"],[data-palette="warm"]:root{
---bg:#1c1917;--grid:#292524;--text:#fff;--text-muted:#a8a29e;--text-dim:#57534e;--text-faint:#78716c;
---panel:rgba(28,25,23,0.5);--panel-border:#292524;--lane-fill:rgba(28,25,23,0.22);--lane-stroke:#44403c;
---arrow:#78716c;--arrow-emphasis:#f59e0b;--mask:#1c1917;
---frontend-fill:rgba(69,26,3,0.4);--frontend-stroke:#d97706;
---backend-fill:rgba(54,83,20,0.4);--backend-stroke:#65a30d;
---database-fill:rgba(87,83,78,0.4);--database-stroke:#a8a29e;
---cloud-fill:rgba(120,53,15,0.3);--cloud-stroke:#f59e0b;
---security-fill:rgba(153,27,27,0.35);--security-stroke:#ef4444;
---messagebus-fill:rgba(194,65,12,0.3);--messagebus-stroke:#ea580c;
---external-fill:rgba(68,64,60,0.5);--external-stroke:#78716c;
---toolbar-bg:rgba(28,25,23,0.8);--toolbar-border:#44403c;--toolbar-text:#e7e5e4;--toolbar-hover:rgba(28,25,23,0.95);--toolbar-menu-bg:#1c1917;
-}
-[data-palette="warm"][data-theme="light"]{
---bg:#fafaf9;--grid:#e7e5e4;--text:#1c1917;--text-muted:#78716c;--text-dim:#a8a29e;--text-faint:#78716c;
---panel:#fff;--panel-border:#e7e5e4;--lane-fill:rgba(250,250,249,0.65);--lane-stroke:#d6d3d1;
---arrow:#a8a29e;--arrow-emphasis:#d97706;--mask:#fff;
---frontend-fill:rgba(217,119,6,0.12);--frontend-stroke:#b45309;
---backend-fill:rgba(101,163,13,0.15);--backend-stroke:#4d7c0f;
---database-fill:rgba(168,162,158,0.2);--database-stroke:#78716c;
---cloud-fill:rgba(245,158,11,0.15);--cloud-stroke:#d97706;
---security-fill:rgba(239,68,68,0.12);--security-stroke:#dc2626;
---messagebus-fill:rgba(234,88,12,0.12);--messagebus-stroke:#c2410c;
---external-fill:rgba(120,113,108,0.15);--external-stroke:#78716c;
---toolbar-bg:rgba(255,255,255,0.92);--toolbar-border:#d6d3d1;--toolbar-text:#44403c;--toolbar-hover:#fff;--toolbar-menu-bg:#fff;
+[data-theme="light"] {
+  --bg: #FAF9F5; --surface: #FFFFFF; --surface2: #F0EEE6;
+  --ink: #141413; --body: #3D3D3A; --muted: #87867F; --dim: #A8A29E;
+  --line: #D1CFC5; --line-soft: #E6E3DA;
+  --clay: #D97757; --clay-soft: rgba(217,119,87,0.10);
+  --olive: #788C5D; --olive-soft: rgba(120,140,93,0.12);
+  --gold: #C9A45C; --blue: #5B7E96;
+  --panel: rgba(255,255,255,0.5); --panel-border: #D1CFC5;
+  --lane-fill: rgba(250,249,245,0.65); --lane-stroke: #D1CFC5;
+  --arrow: #87867F; --arrow-emphasis: #D97757; --mask: #FFFFFF;
+  --c-frontend-fill: rgba(217,119,87,0.12); --c-frontend-stroke: #D97757;
+  --c-backend-fill: rgba(120,140,93,0.15);  --c-backend-stroke: #788C5D;
+  --c-database-fill: rgba(91,126,150,0.18); --c-database-stroke: #5B7E96;
+  --c-cloud-fill: rgba(201,164,92,0.18);    --c-cloud-stroke: #C9A45C;
+  --c-security-fill: rgba(239,68,68,0.12);  --c-security-stroke: #ef4444;
+  --c-messagebus-fill: rgba(234,88,12,0.12);--c-messagebus-stroke: #ea580c;
+  --c-external-fill: rgba(135,134,127,0.15);--c-external-stroke: #87867F;
+  --toolbar-bg: rgba(255,255,255,0.92); --toolbar-border: #D1CFC5;
+  --toolbar-text: #3D3D3A; --toolbar-hover: #FFFFFF;
+  --toolbar-menu-bg: #FFFFFF;
 }
+/* ═══════════════════════════════════════════════
+   Base + Reset
+   ═══════════════════════════════════════════════ */
 *{margin:0;padding:0;box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{
+  font-family:var(--sans);background:var(--bg);min-height:100vh;
+  padding:1.5rem;color:var(--body);-webkit-font-smoothing:antialiased;
+  transition:background .2s ease,color .2s ease
+}
+.container{max-width:1200px;margin:0 auto}
+
+/* Typography */
+h1{font-family:var(--serif);font-size:1.75rem;font-weight:500;margin-bottom:.2rem;color:var(--ink);letter-spacing:-0.01em}
+.subtitle{font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-bottom:1.5rem}
+svg .t-primary{fill:var(--ink)}
+svg .t-muted{fill:var(--muted)}
+svg .t-dim{fill:var(--dim)}
+svg .subtitle-text{fill:var(--muted)}
+svg .edge-label{fill:var(--muted)}
+/* Line/edge fills must reference arrow var for dark mode compat */
+svg .c-grid{stroke:var(--line-soft)}
+svg .m-default{fill:var(--arrow)}
+svg .m-emphasis{fill:var(--arrow-emphasis)}
+svg .m-security{fill:var(--c-security-stroke)}
+svg .m-dashed{fill:var(--arrow)}
+svg .c-mask{fill:var(--mask)}
+
+/* ═══════════════════════════════════════════════
+   Animations
+   ═══════════════════════════════════════════════ */
 @keyframes flow-dash{to{stroke-dashoffset:-20}}
 @keyframes march-ants{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-40}}
+@keyframes march{to{stroke-dashoffset:-12}}
 .a-animated{stroke-dasharray:6 4;animation:flow-dash .6s linear infinite}
-.a-marching-ants{stroke-dasharray:8 4;animation:march-ants .8s linear infinite;stroke-width:2.5!important;stroke:#34d399!important}
-body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Noto Sans Mono CJK SC','PingFang SC','Microsoft YaHei',monospace;background:var(--bg);min-height:100vh;padding:2rem;color:var(--text)}
-.container{max-width:1200px;margin:0 auto}
-h1{font-size:2rem;font-weight:400;margin-bottom:.25rem;color:var(--text)}
-.subtitle{font-size:.9rem;color:var(--text-muted);margin-bottom:1.5rem}
-.toolbar{position:fixed;top:.5rem;right:.5rem;z-index:100;display:flex;gap:.25rem}
-.toolbar .chip{background:var(--toolbar-bg);border:1px solid var(--toolbar-border);color:var(--toolbar-text);padding:.25rem .55rem;border-radius:999px;cursor:pointer;font-size:.75rem;font-family:inherit;backdrop-filter:blur(8px);transition:all .15s ease;display:flex;align-items:center;gap:.3rem}
+.a-marching-ants{stroke-dasharray:8 4;animation:march-ants .8s linear infinite;stroke-width:2.5!important;stroke:var(--arrow-emphasis)!important}
+/* Flow spotlight — dim inactive, highlight lit paths */
+.stage-flowing .edge{opacity:.13}.stage-flowing .edge-label{opacity:.13}
+.stage-flowing .node{opacity:.30}.stage-flowing .zone{opacity:.45}
+.stage-flowing .edge.lit{opacity:1;stroke:var(--clay);marker-end:url(#arrowhead-emphasis);stroke-dasharray:7 5;animation:march .9s linear infinite}
+.stage-flowing .node.lit{opacity:1}.stage-flowing .zone.lit{opacity:1}
+.stage-flowing .edge-label.lit{opacity:1;fill:var(--clay)}
+
+@media (prefers-reduced-motion:reduce){
+  html{scroll-behavior:auto}
+  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
+  .stage-flowing .edge.lit{animation:none}
+}
+
+/* ═══════════════════════════════════════════════
+   Toolbar
+   ═══════════════════════════════════════════════ */
+.toolbar{
+  position:fixed;top:.5rem;right:.5rem;z-index:100;
+  display:flex;gap:.25rem;font-family:var(--mono)
+}
+.toolbar .chip{
+  background:var(--toolbar-bg);border:1px solid var(--toolbar-border);
+  color:var(--toolbar-text);padding:.25rem .55rem;border-radius:999px;
+  cursor:pointer;font-size:.75rem;font-family:inherit;
+  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
+  transition:all .15s ease;display:flex;align-items:center;gap:.3rem
+}
 .toolbar .chip:hover{background:var(--toolbar-hover)}
-.toolbar .chip.active{background:var(--arrow-emphasis,#34d399);color:#fff;border-color:var(--arrow-emphasis,#34d399)}
+.toolbar .chip.active{background:var(--clay);color:#fff;border-color:var(--clay)}
 .toolbar .chip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
-.toolbar .menu{position:absolute;top:100%;right:0;background:var(--toolbar-menu-bg);border:1px solid var(--toolbar-border);border-radius:12px;padding:.25rem 0;display:none;min-width:180px;backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
+.toolbar .menu{
+  position:absolute;top:100%;right:0;background:var(--toolbar-menu-bg);
+  border:1px solid var(--toolbar-border);border-radius:12px;
+  padding:.25rem 0;display:none;min-width:180px;
+  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
+  box-shadow:0 8px 24px rgba(0,0,0,.3)
+}
 .toolbar .menu.show{display:block}
-.toolbar .menu button{display:block;width:100%;text-align:left;background:0 0;border:none;border-radius:0;color:var(--toolbar-text);padding:.4rem .8rem;font-size:.8rem}
+.toolbar .menu button{
+  display:block;width:100%;text-align:left;background:0 0;
+  border:none;border-radius:0;color:var(--toolbar-text);
+  padding:.4rem .8rem;font-size:.8rem;font-family:inherit;cursor:pointer
+}
 .toolbar .menu button:hover{background:var(--toolbar-hover)}
-svg{display:block;margin:0 auto;max-width:100%}
-svg text{fill:var(--text)}
-svg .subtitle-text{fill:var(--text-muted)}
-svg .edge-label{fill:var(--text-muted)}
+
+/* ═══════════════════════════════════════════════
+   SVG
+   ═══════════════════════════════════════════════ */
+svg{display:block;margin:0 auto;max-width:100%;height:auto}
+svg text{fill:var(--body);font-family:var(--sans);font-size:12px}
+/* Component type fills (from geometry.ts componentFill / arrowClassMap) */
+.c-frontend{fill:var(--c-frontend-fill);stroke:var(--c-frontend-stroke)}
+.c-backend{fill:var(--c-backend-fill);stroke:var(--c-backend-stroke)}
+.c-database{fill:var(--c-database-fill);stroke:var(--c-database-stroke)}
+.c-cloud{fill:var(--c-cloud-fill);stroke:var(--c-cloud-stroke)}
+.c-security{fill:var(--c-security-fill);stroke:var(--c-security-stroke)}
+.c-messagebus{fill:var(--c-messagebus-fill);stroke:var(--c-messagebus-stroke)}
+.c-external{fill:var(--c-external-fill);stroke:var(--c-external-stroke)}
+/* Edge classes */
+.a-default{stroke:var(--arrow);fill:none;marker-end:url(#arrowhead)}
+.a-emphasis{stroke:var(--arrow-emphasis);fill:none;marker-end:url(#arrowhead-emphasis)}
+.a-security{stroke:var(--c-security-stroke);fill:none;marker-end:url(#arrowhead-security)}
+.a-dashed{stroke:var(--arrow);fill:none;stroke-dasharray:5 4;marker-end:url(#arrowhead-dashed)}
+
+/* ═══════════════════════════════════════════════
+   Cards
+   ═══════════════════════════════════════════════ */
 .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-top:2rem}
 .card{background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:1rem;break-inside:avoid}
-.card h3{font-size:.9rem;margin-bottom:.4rem;font-weight:500;color:var(--text)}
-.card p{font-size:.8rem;color:var(--text-muted);line-height:1.5}
-.card code{font-size:.75rem;background:rgba(0,0,0,.2);padding:.1rem .3rem;border-radius:3px}
-.card .meta{font-size:.7rem;color:var(--text-dim);margin-top:.3rem}
-.legend{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:1.5rem 0;font-size:.75rem}
-.legend-item{display:flex;align-items:center;gap:.35rem;color:var(--text-muted)}
+.card h3{font-family:var(--serif);font-size:.9rem;margin-bottom:.4rem;font-weight:500;color:var(--ink)}
+.card p{font-size:.8rem;color:var(--muted);line-height:1.5}
+.card code{font-size:.75rem;background:var(--surface2);padding:.1rem .3rem;border-radius:3px;font-family:var(--mono)}
+.card .meta{font-size:.7rem;color:var(--dim);margin-top:.3rem}
+
+/* ═══════════════════════════════════════════════
+   Legend
+   ═══════════════════════════════════════════════ */
+.legend{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin:1.5rem 0;font-size:.75rem;font-family:var(--mono);color:var(--muted)}
+.legend-item{display:flex;align-items:center;gap:.35rem}
 .legend-swatch{width:12px;height:12px;border-radius:3px;border:1px solid}
+
+/* ═══════════════════════════════════════════════
+   Interactive node system (optional — activate when data-k attrs present)
+   ═══════════════════════════════════════════════ */
+.node{cursor:pointer;transition:transform .12s ease}
+.node:hover rect{filter:brightness(1.08)}
+.node.sel rect{stroke:var(--clay)!important;stroke-width:2}
+.node .mono{font-family:var(--mono);font-size:10px;fill:var(--muted)}
+.node .kind{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;fill:var(--clay)}
+
+/* Detail card — floating panel for node info */
+.detail-card{
+  position:fixed;right:1rem;bottom:1rem;width:340px;max-width:calc(100vw - 2rem);
+  background:var(--surface);border:1px solid var(--line);border-radius:12px;
+  padding:1rem 1.25rem;box-shadow:0 8px 32px rgba(0,0,0,.15);
+  font-family:var(--sans);z-index:90;display:none;max-height:40vh;overflow-y:auto
+}
+.detail-card.show{display:block}
+.detail-card h3{font-family:var(--serif);font-weight:500;font-size:1rem;color:var(--ink);margin-bottom:2px}
+.detail-card .meta{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-bottom:8px}
+.detail-card p{font-size:.8rem;line-height:1.55;color:var(--body)}
+.detail-card p code{font-family:var(--mono);font-size:.75rem;color:var(--clay);background:var(--clay-soft);padding:1px 4px;border-radius:3px}
+
+/* ═══════════════════════════════════════════════
+   Responsive
+   ═══════════════════════════════════════════════ */
+@media (max-width:880px){
+  body{padding:1rem;overflow:auto}
+  .toolbar{top:.35rem;right:.35rem}
+  .toolbar .chip{font-size:.7rem;padding:.2rem .45rem}
+  .container{overflow-x:auto}
+  h1{font-size:1.4rem}
+  .detail-card{position:static;width:auto;margin-top:1rem;max-height:none}
+}
+@media (max-width:480px){
+  body{padding:.75rem}
+  h1{font-size:1.2rem}
+  .card-grid{grid-template-columns:1fr}
+}
 </style>
 </head>
 <body>
-<div class="toolbar">
-  <button class="chip" onclick="var e=document.querySelectorAll('svg .edge,svg line,svg path,a-animated');e.forEach(function(l){l.classList.toggle('a-animated')});this.classList.toggle('active')" title="Toggle flow animation">
-    <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
+<div class="toolbar" role="toolbar" aria-label="Diagram controls">
+  <button class="chip" onclick="var e=document.querySelectorAll('svg .edge,svg line,svg path,a-animated');e.forEach(function(l){l.classList.toggle('a-animated')});this.classList.toggle('active')" title="Toggle flow animation" aria-label="Toggle flow animation">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
     Flow
   </button>
-  <button class="chip" onclick="var e=document.querySelectorAll('svg .edge,svg line,svg path');e.forEach(function(l){l.classList.toggle('a-marching-ants')});this.classList.toggle('active')" title="Toggle marching ants">
-    <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="2"/></svg>
+  <button class="chip" onclick="var e=document.querySelectorAll('svg .edge,svg line,svg path');e.forEach(function(l){l.classList.toggle('a-marching-ants')});this.classList.toggle('active')" title="Toggle trace highlight" aria-label="Toggle trace highlight">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="2"/></svg>
     Trace
   </button>
-  <button class="chip" onclick="var m=this.nextElementSibling;m.classList.toggle('show')" title="Export">☰ Export</button>
-  <div class="menu">
-    <button onclick="var s=new XMLSerializer;var d=document.querySelector('svg');if(!d)return;var b=new Blob(['<svg xmlns=\\'http://www.w3.org/2000/svg\\'>'+d.innerHTML.replace(/<g[^>]*>/g,'').replace(/<\\/g>/g,'')+'</svg>'],{type:'image/svg+xml'});var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='diagram.svg';a.click()">Download SVG</button>
-    <button onclick="var d=document.querySelector('svg');if(!d){alert('No SVG found');return}var r=(new XMLSerializer).serializeToString(d);var c=document.createElement('canvas');c.width=d.getAttribute('width')||1200;c.height=d.getAttribute('height')||800;var i=new Image;i.onload=function(){c.getContext('2d').drawImage(i,0,0);c.toBlob(function(b){var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='diagram.png';a.click()})};i.src='data:image/svg+xml;base64,'+btoa(unescape(encodeURIComponent(r)))">Download PNG</button>
+  <button class="chip" onclick="var m=this.nextElementSibling;m.classList.toggle('show')" title="Export diagram" aria-label="Export diagram" aria-haspopup="true">☰ Export</button>
+  <div class="menu" role="menu">
+    <button role="menuitem" onclick="var s=new XMLSerializer;var d=document.querySelector('svg');if(!d)return;var b=new Blob(['<svg xmlns=\\'http://www.w3.org/2000/svg\\'>'+d.innerHTML.replace(/<g[^>]*>/g,'').replace(/<\\/g>/g,'')+'</svg>'],{type:'image/svg+xml'});var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='diagram.svg';a.click()">Download SVG</button>
+    <button role="menuitem" onclick="var d=document.querySelector('svg');if(!d){alert('No SVG found');return}var r=(new XMLSerializer).serializeToString(d);var c=document.createElement('canvas');c.width=d.getAttribute('width')||1200;c.height=d.getAttribute('height')||800;var i=new Image;i.onload=function(){c.getContext('2d').drawImage(i,0,0);c.toBlob(function(b){var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='diagram.png';a.click()})};i.src='data:image/svg+xml;base64,'+btoa(unescape(encodeURIComponent(r)))">Download PNG</button>
   </div>
 </div>
 <div class="container">
@@ -170,6 +303,52 @@ svg .edge-label{fill:var(--text-muted)}
 <!-- DIAGRAM:SVG -->
 <!-- DIAGRAM:CARDS -->
 </div>
+<!-- Interactive node detail card (hidden until a node is clicked) -->
+<div class="detail-card" id="detailCard">
+  <h3 id="dTitle">Click a node</h3>
+  <div class="meta" id="dMeta"></div>
+  <p id="dBody">Click any component in the diagram to see details.</p>
+</div>
+<!-- Interactive flow data injected by renderer (optional) -->
+<script>
+(function(){
+  var nodes = document.querySelectorAll('.node');
+  var detailCard = document.getElementById('detailCard');
+  var dTitle = document.getElementById('dTitle');
+  var dMeta = document.getElementById('dMeta');
+  var dBody = document.getElementById('dBody');
+  if (!nodes.length || !detailCard) return;
+  // DETAIL data injected by renderer as JSON in a <script id="diagram-node-data"> tag
+  var detailData = {};
+  try {
+    var script = document.getElementById('diagram-node-data');
+    if (script) detailData = JSON.parse(script.textContent);
+  } catch(_) {}
+  nodes.forEach(function(n){
+    n.addEventListener('click', function(){
+      nodes.forEach(function(x){ x.classList.remove('sel'); });
+      n.classList.add('sel');
+      var key = n.getAttribute('data-k');
+      var d = detailData[key];
+      if (!d) { dTitle.textContent = key || 'Node'; dMeta.textContent = ''; dBody.textContent = 'No details available.'; return; }
+      dTitle.textContent = d.t || key;
+      dMeta.textContent = d.m || '';
+      dBody.textContent = d.b || '';
+      detailCard.classList.add('show');
+    });
+    // Keyboard accessibility
+    n.setAttribute('tabindex', '0');
+    n.setAttribute('role', 'button');
+    n.addEventListener('keydown', function(e){
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); n.click(); }
+    });
+  });
+  // Close on Escape
+  document.addEventListener('keydown', function(e){
+    if (e.key === 'Escape') { detailCard.classList.remove('show'); nodes.forEach(function(x){ x.classList.remove('sel'); }); }
+  });
+})();
+<\/script>
 </body>
-</html>`}const H=`<!-- DIAGRAM:SVG -->`;function U(e){let t=e.indexOf(H);if(t===-1)return null;let n=t+20,r=e.indexOf(H,n);if(r===-1)return null;let i=e.slice(n,r).trim();if(i.startsWith(`<svg`))return i;let a=e.slice(Math.max(0,t),r+20),o=a.match(/viewBox="([^"]+)"/),s=o?o[1]:`0 0 1200 800`,c=a.match(/width="(\d+)"/),l=c?c[1]:`1200`,u=a.match(/height="(\d+)"/);return[`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${s}" width="${l}" height="${u?u[1]:`800`}">`,`  <defs>`,`    <style>`,`      text { font-family: system-ui, -apple-system, sans-serif; }`,`      .title { font-size: 20px; font-weight: 600; fill: #fff; }`,`      .subtitle { font-size: 14px; fill: #94a3b8; }`,`    </style>`,`  </defs>`,i,`</svg>`].join(`
-`)}function ge(e){let t=e.match(/<title>([^<]+)<\/title>/);return t?t[1]:`diagram`}async function _e(e,t,n){let r=m(n);await h(r,{recursive:!0});let i=ge(e).replace(/[^a-zA-Z0-9\s-]/g,``).replace(/\s+/g,`-`).replace(/-+/g,`-`).replace(/^-|-$/g,``).toLowerCase().slice(0,80)||`diagram`,a=p(r,`${i}.html`);await g(a,e,`utf-8`);let o=null,s=U(e);s&&(o=p(r,`${i}.svg`),await g(o,s,`utf-8`));let c=null;return t&&(c=p(r,`${i}.md`),await g(c,t,`utf-8`)),{htmlPath:a,svgPath:o,mdPath:c}}const W=10*1024*1024,G=2e3;function ve(e){switch(e.diagram_type){case`architecture`:return oe(e);case`workflow`:return V(e);case`sequence`:return L(e);case`dataflow`:return le(e);case`lifecycle`:return N(e)}}function K(e,t={}){Y(e);let n=J(e);if(n.length>0)throw Error(`Diagram validation failed: ${n.join(`; `)}`);let r=t.title??e.meta.title,i=t.subtitle??e.meta.subtitle,a=t.dualOutput??!0,{svg:o,cardsHtml:s}=ve(e),c=(e.meta??{}).palette===`warm`?`warm`:`technical`;return{html:he().replaceAll(`[TITLE]`,X(r)).replaceAll(`[SUBTITLE]`,X(i??``)).replaceAll(`[PALETTE]`,c===`warm`?` data-palette="warm"`:``).replaceAll(`<!-- DIAGRAM:SVG -->`,o).replaceAll(`<!-- DIAGRAM:CARDS -->`,s),markdown:a?_(e):void 0}}function q(e,t={}){return K(e,{...t,dualOutput:!1}).html}function ye(e){return _(e)}function be(e){try{return Y(e),J(e)}catch(e){return[e.message]}}function J(e){if(!e||typeof e!=`object`)return[`Input must be an object`];if(!e.diagram_type)return[`Missing diagram_type`];if(!e.meta?.title)return[`meta.title is required`];if(e.schema_version!==1)return[`schema_version must be 1`];let t=e.diagram_type,n=e,r=n.components??n.nodes??n.participants??n.states??[],i=n.connections??n.edges??n.messages??n.flows??n.transitions??[],a=new Set(r.map(e=>e.id));if(a.size!==r.length)return[`${t}: Node/component IDs must be unique`];for(let e of i){if(e.from&&!a.has(e.from))return[`${t}: Edge references unknown source "${e.from}"`];if(e.to&&!a.has(e.to))return[`${t}: Edge references unknown target "${e.to}"`]}return[]}function Y(e){let t=JSON.stringify(e),n=Buffer.byteLength(t,`utf-8`);if(n>W)throw Error(`Input too large: ${(n/1024/1024).toFixed(1)}MB (max ${W/1024/1024}MB)`);let r=e,i=r.components??r.nodes??r.participants??[];if(i.length>500)throw Error(`Too many components/nodes: ${i.length} (max 500)`);let a=r.connections??r.edges??r.messages??r.flows??r.transitions??[];if(a.length>G)throw Error(`Too many edges/connections: ${a.length} (max ${G})`)}function xe(e){return e.replace(/[^a-zA-Z0-9-_]/g,`_`).toLowerCase().slice(0,120)}function X(e){let t={"&":`&amp;`,"<":`&lt;`,">":`&gt;`,'"':`&quot;`,"'":`&#39;`};return String(e??``).replace(/[&<>"']/g,e=>t[e]??e)}const Z=d(`server`);function Q(e,t){return t?{version:e,...f(t)}:{version:e}}function $(){return process.env.AIKIT_TRANSPORT?process.env.AIKIT_TRANSPORT:process.stdin.isTTY?`http`:`stdio`}function Se(){let e=process.argv[1];if(!e)return!1;try{return import.meta.url===l(e).href}catch{return!1}}function Ce(){return Se()?u({allowPositionals:!0,options:{transport:{type:`string`,default:$()},port:{type:`string`,default:process.env.AIKIT_PORT??`3210`}}}).values:{transport:$(),port:process.env.AIKIT_PORT??`3210`}}async function we(){let e=t=>{t.name===`ExperimentalWarning`&&t.message.includes(`SQLite`)||(process.off(`warning`,e),process.emitWarning(t),process.on(`warning`,e))};process.on(`warning`,e);let n=t(),r=Ce();if(process.on(`unhandledRejection`,e=>{Z.error(`Unhandled rejection`,Q(n,e))}),process.on(`uncaughtException`,e=>{Z.error(`Uncaught exception — exiting`,Q(n,e)),process.exit(1)}),Z.info(`Starting MCP AI Kit server`,{version:n}),r.transport===`http`){let{startHttpMode:e}=await import(`./server-http-L_WQ9v_b.js`);await e(n,r.port)}else{let{startStdioMode:e}=await import(`./server-stdio-CZuGZR4e.js`);await e(n)}}export{c as CuratedKnowledgeManager,s as applyWorkspaceRoots,a as bootstrapWorkspaceRoots,i as createSlidingWindowRateLimiter,_e as exportDiagram,U as extractSvg,n as getSessionIdHeader,we as main,r as readPositiveIntEnv,t as readVersion,q as renderHtml,ye as renderMd,K as renderToResult,e as resolveCorsOrigin,xe as sanitizeTitle,o as selectWorkspaceRoot,be as validate};
+</html>`}const U=`<!-- DIAGRAM:SVG -->`;function W(e){let t=e.indexOf(U);if(t===-1)return null;let n=t+20,r=e.indexOf(U,n);if(r===-1)return null;let i=e.slice(n,r).trim();if(i.startsWith(`<svg`))return i;let a=e.slice(Math.max(0,t),r+20),o=a.match(/viewBox="([^"]+)"/),s=o?o[1]:`0 0 1200 800`,c=a.match(/width="(\d+)"/),l=c?c[1]:`1200`,u=a.match(/height="(\d+)"/);return[`<svg xmlns="http://www.w3.org/2000/svg" viewBox="${s}" width="${l}" height="${u?u[1]:`800`}">`,`  <defs>`,`    <style>`,`      text { font-family: system-ui, -apple-system, sans-serif; }`,`      .title { font-size: 20px; font-weight: 600; fill: #fff; }`,`      .subtitle { font-size: 14px; fill: #94a3b8; }`,`    </style>`,`  </defs>`,i,`</svg>`].join(`
+`)}function he(e){let t=e.match(/<title>([^<]+)<\/title>/);return t?t[1]:`diagram`}async function ge(e,t,n){let r=m(n);await h(r,{recursive:!0});let i=he(e).replace(/[^a-zA-Z0-9\s-]/g,``).replace(/\s+/g,`-`).replace(/-+/g,`-`).replace(/^-|-$/g,``).toLowerCase().slice(0,80)||`diagram`,a=p(r,`${i}.html`);await g(a,e,`utf-8`);let o=null,s=W(e);s&&(o=p(r,`${i}.svg`),await g(o,s,`utf-8`));let c=null;return t&&(c=p(r,`${i}.md`),await g(c,t,`utf-8`)),{htmlPath:a,svgPath:o,mdPath:c}}const G=10*1024*1024,K=2e3;function _e(e){try{return JSON.stringify(e)}catch{return``}}function ve(e){switch(e.diagram_type){case`architecture`:return ae(e);case`workflow`:return H(e);case`sequence`:return R(e);case`dataflow`:return ce(e);case`lifecycle`:return P(e)}}function q(e,t={}){Y(e);let n=J(e);if(n.length>0)throw Error(`Diagram validation failed: ${n.join(`; `)}`);let r=t.title??e.meta.title,i=t.subtitle??e.meta.subtitle,a=t.dualOutput??!0,{svg:o,cardsHtml:s,detailData:c}=ve(e),l=c&&Object.keys(c).length>0?`\n<script id="diagram-node-data" type="application/json">${_e(c)}<\/script>`:``,u=e.meta?.palette===`warm`?`warm`:`technical`;return{html:me().replaceAll(`[TITLE]`,X(r)).replaceAll(`[SUBTITLE]`,X(i??``)).replaceAll(`[PALETTE]`,u===`warm`?` data-palette="warm"`:``).replaceAll(`<!-- DIAGRAM:SVG -->`,o).replaceAll(`<!-- DIAGRAM:CARDS -->`,s).replace(`</body>`,`${l}\n</body>`),markdown:a?_(e):void 0}}function ye(e,t={}){return q(e,{...t,dualOutput:!1}).html}function be(e){return _(e)}function xe(e){try{return Y(e),J(e)}catch(e){return[e.message]}}function J(e){if(!e||typeof e!=`object`)return[`Input must be an object`];if(!e.diagram_type)return[`Missing diagram_type`];if(!e.meta?.title)return[`meta.title is required`];if(e.schema_version!==1)return[`schema_version must be 1`];let t=e.diagram_type,n=e,r=n.components??n.nodes??n.participants??n.states??[],i=n.connections??n.edges??n.messages??n.flows??n.transitions??[],a=new Set(r.map(e=>e.id));if(a.size!==r.length)return[`${t}: Node/component IDs must be unique`];for(let e of i){if(e.from&&!a.has(e.from))return[`${t}: Edge references unknown source "${e.from}"`];if(e.to&&!a.has(e.to))return[`${t}: Edge references unknown target "${e.to}"`]}return[]}function Y(e){let t=JSON.stringify(e),n=Buffer.byteLength(t,`utf-8`);if(n>G)throw Error(`Input too large: ${(n/1024/1024).toFixed(1)}MB (max ${G/1024/1024}MB)`);let r=e,i=r.components??r.nodes??r.participants??[];if(i.length>500)throw Error(`Too many components/nodes: ${i.length} (max 500)`);let a=r.connections??r.edges??r.messages??r.flows??r.transitions??[];if(a.length>K)throw Error(`Too many edges/connections: ${a.length} (max ${K})`)}function Se(e){return e.replace(/[^a-zA-Z0-9-_]/g,`_`).toLowerCase().slice(0,120)}function X(e){let t={"&":`&amp;`,"<":`&lt;`,">":`&gt;`,'"':`&quot;`,"'":`&#39;`};return String(e??``).replace(/[&<>"']/g,e=>t[e]??e)}const Z=d(`server`);function Q(e,t){return t?{version:e,...f(t)}:{version:e}}function $(){return process.env.AIKIT_TRANSPORT?process.env.AIKIT_TRANSPORT:process.stdin.isTTY?`http`:`stdio`}function Ce(){let e=process.argv[1];if(!e)return!1;try{return import.meta.url===l(e).href}catch{return!1}}function we(){return Ce()?u({allowPositionals:!0,options:{transport:{type:`string`,default:$()},port:{type:`string`,default:process.env.AIKIT_PORT??`3210`}}}).values:{transport:$(),port:process.env.AIKIT_PORT??`3210`}}async function Te(){let e=t=>{t.name===`ExperimentalWarning`&&t.message.includes(`SQLite`)||(process.off(`warning`,e),process.emitWarning(t),process.on(`warning`,e))};process.on(`warning`,e);let n=t(),r=we();if(process.on(`unhandledRejection`,e=>{Z.error(`Unhandled rejection`,Q(n,e))}),process.on(`uncaughtException`,e=>{Z.error(`Uncaught exception — exiting`,Q(n,e)),process.exit(1)}),Z.info(`Starting MCP AI Kit server`,{version:n}),r.transport===`http`){let{startHttpMode:e}=await import(`./server-http-BSGdxVRV.js`);await e(n,r.port)}else{let{startStdioMode:e}=await import(`./server-stdio-CTgwgIGC.js`);await e(n)}}export{c as CuratedKnowledgeManager,s as applyWorkspaceRoots,a as bootstrapWorkspaceRoots,i as createSlidingWindowRateLimiter,ge as exportDiagram,W as extractSvg,n as getSessionIdHeader,Te as main,r as readPositiveIntEnv,t as readVersion,ye as renderHtml,be as renderMd,q as renderToResult,e as resolveCorsOrigin,Se as sanitizeTitle,o as selectWorkspaceRoot,xe as validate};