@tecture/web 0.1.0 → 0.1.1

package/dist-lib/App.js

@@ -1,11 +1,11 @@
 import { jsxs as r, jsx as e, Fragment as H } from "react/jsx-runtime";
-import { useMemo as E, createContext as ie, memo as ye, useContext as P, useCallback as M, useState as C, useEffect as B, useRef as G, useId as ke, isValidElement as Ne } from "react";
-import { Position as y, useNodeId as se, useStore as ce, NodeResizer as we, Handle as X, Panel as Ce, useInternalNode as K, getSmoothStepPath as Le, EdgeLabelRenderer as Me, MarkerType as Se, ReactFlowProvider as Be, useNodesState as We, useEdgesState as De, useReactFlow as ze, ReactFlow as Ae, Background as Ee, BackgroundVariant as He, Controls as Pe, MiniMap as Te } from "@xyflow/react";
-import Fe from "elkjs/lib/elk.bundled.js";
-import { buildSourceUrl as Ie, isDeepDivable as Z, buildDeepDivePrompt as Re } from "@tecture/shared";
-import je from "markdown-to-jsx";
-import { createPortal as $e } from "react-dom";
-const F = {
+import { useMemo as F, createContext as se, memo as we, useContext as P, useCallback as C, useState as L, useEffect as B, useRef as V, useId as Ne, isValidElement as Ce } from "react";
+import { Position as k, useNodeId as ce, useStore as de, NodeResizer as Le, Handle as X, Panel as Me, useInternalNode as Z, getSmoothStepPath as Be, EdgeLabelRenderer as Se, MarkerType as We, ReactFlowProvider as De, useNodesState as ze, useEdgesState as Ae, useReactFlow as Ee, ReactFlow as Fe, Background as He, BackgroundVariant as Pe, Controls as Te, MiniMap as Ie } from "@xyflow/react";
+import je from "elkjs/lib/elk.bundled.js";
+import { buildSourceUrl as Re, isDeepDivable as q, buildDeepDivePrompt as $e } from "@tecture/shared";
+import Ge from "markdown-to-jsx";
+import { createPortal as Ve } from "react-dom";
+const I = {
   backgrounds: [
     { token: "--bg-deep", value: "#0a0f1a", label: "Deep" },
     { token: "--bg-surface", value: "#0f1628", label: "Surface" },
@@ -28,7 +28,7 @@ const F = {
     { token: "--accent-amber-hover", value: "#fbbf24", label: "Amber Hover" },
     { token: "--accent-emerald", value: "#34d399", label: "Emerald" }
   ]
-}, Ge = [
+}, Oe = [
   { type: "System", accent: "#94a3b8", bg: "#1e293b" },
   { type: "Service", accent: "#818cf8", bg: "#1e1b4b" },
   { type: "Database", accent: "#34d399", bg: "#022c22" },
@@ -39,7 +39,7 @@ const F = {
   { type: "Storage", accent: "#2dd4bf", bg: "#042f2e" },
   { type: "External", accent: "#a1a1aa", bg: "#1c1c1e" }
 ];
-function A({ number: t, children: a }) {
+function E({ number: t, children: a }) {
   return /* @__PURE__ */ r("div", { className: "mb-10", children: [
     /* @__PURE__ */ e("div", { className: "blueprint-annotation animate-fade-up", children: t }),
     /* @__PURE__ */ e(
@@ -52,7 +52,7 @@ function A({ number: t, children: a }) {
     )
   ] });
 }
-function q({ token: t, value: a, label: o }) {
+function Q({ token: t, value: a, label: o }) {
   return /* @__PURE__ */ r("div", { className: "group relative", children: [
     /* @__PURE__ */ e(
       "div",
@@ -68,7 +68,7 @@ function q({ token: t, value: a, label: o }) {
     ] })
   ] });
 }
-function Ve() {
+function _e() {
   return /* @__PURE__ */ r("div", { className: "blueprint-grid animate-grid-reveal min-h-screen relative", children: [
     /* @__PURE__ */ r(
       "svg",
@@ -153,19 +153,19 @@ function Ve() {
       )
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(A, { number: "Section 01", children: "Color Palette" }),
+      /* @__PURE__ */ e(E, { number: "Section 01", children: "Color Palette" }),
       /* @__PURE__ */ r("div", { className: "space-y-12", children: [
         /* @__PURE__ */ r("div", { children: [
           /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Backgrounds" }),
-          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: F.backgrounds.map((t) => /* @__PURE__ */ e(q, { ...t }, t.token)) })
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: I.backgrounds.map((t) => /* @__PURE__ */ e(Q, { ...t }, t.token)) })
         ] }),
         /* @__PURE__ */ r("div", { children: [
           /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Borders" }),
-          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: F.borders.map((t) => /* @__PURE__ */ e(q, { ...t }, t.token)) })
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: I.borders.map((t) => /* @__PURE__ */ e(Q, { ...t }, t.token)) })
         ] }),
         /* @__PURE__ */ r("div", { children: [
           /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Text" }),
-          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: F.text.map((t) => /* @__PURE__ */ r("div", { className: "group", children: [
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: I.text.map((t) => /* @__PURE__ */ r("div", { className: "group", children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -183,7 +183,7 @@ function Ve() {
         ] }),
         /* @__PURE__ */ r("div", { children: [
           /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Accents" }),
-          /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-4", children: F.accents.map((t) => /* @__PURE__ */ r("div", { className: "group", children: [
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-4", children: I.accents.map((t) => /* @__PURE__ */ r("div", { className: "group", children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -205,7 +205,7 @@ function Ve() {
         ] }),
         /* @__PURE__ */ r("div", { children: [
           /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Diagram Node Types" }),
-          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3 sm:grid-cols-5", children: Ge.map((t) => /* @__PURE__ */ r(
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3 sm:grid-cols-5", children: Oe.map((t) => /* @__PURE__ */ r(
             "div",
             {
               className: "border p-3",
@@ -222,7 +222,7 @@ function Ve() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(A, { number: "Section 02", children: "Typography" }),
+      /* @__PURE__ */ e(E, { number: "Section 02", children: "Typography" }),
       /* @__PURE__ */ r("div", { className: "space-y-12", children: [
         /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
           {
@@ -378,7 +378,7 @@ function Ve() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(A, { number: "Section 03", children: "Components" }),
+      /* @__PURE__ */ e(E, { number: "Section 03", children: "Components" }),
       /* @__PURE__ */ r("div", { className: "space-y-16", children: [
         /* @__PURE__ */ r("div", { children: [
           /* @__PURE__ */ e("h3", { className: "mb-6 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Buttons" }),
@@ -675,7 +675,7 @@ function Ve() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(A, { number: "Section 04", children: "Animation & Motion" }),
+      /* @__PURE__ */ e(E, { number: "Section 04", children: "Animation & Motion" }),
       /* @__PURE__ */ r("div", { className: "space-y-8", children: [
         /* @__PURE__ */ e(
           "div",
@@ -776,7 +776,7 @@ function Ve() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(A, { number: "Section 05", children: "Layout & Spacing" }),
+      /* @__PURE__ */ e(E, { number: "Section 05", children: "Layout & Spacing" }),
       /* @__PURE__ */ r("div", { className: "space-y-10", children: [
         /* @__PURE__ */ r("div", { children: [
           /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Container Widths" }),
@@ -880,7 +880,7 @@ function Ve() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(A, { number: "Section 06", children: "Blueprint Decorations" }),
+      /* @__PURE__ */ e(E, { number: "Section 06", children: "Blueprint Decorations" }),
       /* @__PURE__ */ r(
         "div",
         {
@@ -951,7 +951,7 @@ function Ve() {
       )
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(A, { number: "Section 07", children: "Usage Guidelines" }),
+      /* @__PURE__ */ e(E, { number: "Section 07", children: "Usage Guidelines" }),
       /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
         {
           title: "Landing pages",
@@ -1040,7 +1040,7 @@ function Ve() {
     ) })
   ] });
 }
-const Oe = {
+const Ue = {
   system: {
     label: "System",
     bg: "#0d1320",
@@ -1182,7 +1182,7 @@ const Oe = {
     ],
     accentGlow: "rgba(161,161,170,0.08)"
   }
-}, Q = {
+}, J = {
   label: "Component",
   bg: "#0a0f1a",
   bgHover: "#0f1628",
@@ -1195,59 +1195,59 @@ const Oe = {
   ],
   accentGlow: "rgba(100,116,139,0.08)"
 };
-function O(t) {
-  return t ? Oe[t] ?? Q : Q;
+function _(t) {
+  return t ? Ue[t] ?? J : J;
 }
-function I(t) {
+function j(t) {
   var a, o;
   return {
     x: t.internals.positionAbsolute.x + (((a = t.measured) == null ? void 0 : a.width) ?? 0) / 2,
     y: t.internals.positionAbsolute.y + (((o = t.measured) == null ? void 0 : o.height) ?? 0) / 2
   };
 }
-function _e(t, a) {
-  const o = I(t), n = I(a), l = Math.abs(o.x - n.x), i = Math.abs(o.y - n.y);
-  return l > i ? o.x > n.x ? y.Left : y.Right : o.y > n.y ? y.Top : y.Bottom;
+function Ye(t, a) {
+  const o = j(t), n = j(a), l = Math.abs(o.x - n.x), i = Math.abs(o.y - n.y);
+  return l > i ? o.x > n.x ? k.Left : k.Right : o.y > n.y ? k.Top : k.Bottom;
 }
-function J(t, a, o) {
-  const n = I(t), l = I(a), i = Math.abs(n.x - l.x), s = Math.abs(n.y - l.y);
+function ee(t, a, o) {
+  const n = j(t), l = j(a), i = Math.abs(n.x - l.x), s = Math.abs(n.y - l.y);
   let c;
-  i > s ? c = n.x > l.x ? y.Left : y.Right : c = n.y > l.y ? y.Top : y.Bottom;
-  const [u, d] = Ue(t, c, o);
-  return [u, d, c];
+  i > s ? c = n.x > l.x ? k.Left : k.Right : c = n.y > l.y ? k.Top : k.Bottom;
+  const [h, d] = Ke(t, c, o);
+  return [h, d, c];
 }
-function Ue(t, a, o) {
-  var d, h, g;
-  const n = (d = t.internals.handleBounds) == null ? void 0 : d[o], l = n == null ? void 0 : n.find((f) => f.position === a);
+function Ke(t, a, o) {
+  var d, u, g;
+  const n = (d = t.internals.handleBounds) == null ? void 0 : d[o], l = n == null ? void 0 : n.find((b) => b.position === a);
   if (!l)
     return [
-      t.internals.positionAbsolute.x + (((h = t.measured) == null ? void 0 : h.width) ?? 0) / 2,
+      t.internals.positionAbsolute.x + (((u = t.measured) == null ? void 0 : u.width) ?? 0) / 2,
       t.internals.positionAbsolute.y + (((g = t.measured) == null ? void 0 : g.height) ?? 0) / 2
     ];
   let i = l.width / 2, s = l.height / 2;
   switch (a) {
-    case y.Left:
+    case k.Left:
       i = 0;
       break;
-    case y.Right:
+    case k.Right:
       i = l.width;
       break;
-    case y.Top:
+    case k.Top:
       s = 0;
       break;
-    case y.Bottom:
+    case k.Bottom:
       s = l.height;
       break;
   }
-  const c = t.internals.positionAbsolute.x + l.x + i, u = t.internals.positionAbsolute.y + l.y + s;
-  return [c, u];
+  const c = t.internals.positionAbsolute.x + l.x + i, h = t.internals.positionAbsolute.y + l.y + s;
+  return [c, h];
 }
-function Ye(t, a) {
-  const [o, n, l] = J(t, a, "source"), [i, s, c] = J(a, t, "target");
+function Xe(t, a) {
+  const [o, n, l] = ee(t, a, "source"), [i, s, c] = ee(a, t, "target");
   return { sx: o, sy: n, tx: i, ty: s, sourcePos: l, targetPos: c };
 }
-function Xe() {
-  const t = se(), a = ce((o) => {
+function Ze() {
+  const t = ce(), a = de((o) => {
     if (!t) return /* @__PURE__ */ new Set();
     const n = o.nodeLookup.get(t);
     if (!n) return /* @__PURE__ */ new Set();
@@ -1256,24 +1256,24 @@ function Xe() {
       let s = null;
       if (i.source === t ? s = i.target : i.target === t && (s = i.source), !s) continue;
       const c = o.nodeLookup.get(s);
-      c && l.add(_e(n, c));
+      c && l.add(Ye(n, c));
     }
     return l;
   });
-  return E(() => a, [a]);
+  return F(() => a, [a]);
 }
-const de = ie(null), me = [
-  { position: y.Top, prefix: "top" },
-  { position: y.Bottom, prefix: "bottom" },
-  { position: y.Left, prefix: "left" },
-  { position: y.Right, prefix: "right" }
+const me = se(null), ue = [
+  { position: k.Top, prefix: "top" },
+  { position: k.Bottom, prefix: "bottom" },
+  { position: k.Left, prefix: "left" },
+  { position: k.Right, prefix: "right" }
 ];
-function Ke({ data: t, selected: a }) {
-  const o = t, n = O(o.nodeType), l = Xe(), i = (s) => {
+function qe({ data: t, selected: a }) {
+  const o = t, n = _(o.nodeType), l = Ze(), i = (s) => {
     s.stopPropagation(), o.subDiagramId && (window.location.hash = `#/diagram/${o.subDiagramId}`);
   };
   return o.isContainer || o.hasChildren ? /* @__PURE__ */ e(
-    qe,
+    Je,
     {
       d: o,
       style: n,
@@ -1294,16 +1294,16 @@ function Ke({ data: t, selected: a }) {
         "--tw-ring-color": o.hasSubDiagram ? n.accent : void 0
       },
       children: [
-        /* @__PURE__ */ e(ue, { accent: n.accent }),
-        me.map(({ position: s, prefix: c }) => {
-          const u = l.has(s);
+        /* @__PURE__ */ e(he, { accent: n.accent }),
+        ue.map(({ position: s, prefix: c }) => {
+          const h = l.has(s);
           return /* @__PURE__ */ e(
-            he,
+            pe,
             {
               position: s,
               prefix: c,
               style: n,
-              isActive: u
+              isActive: h
             },
             c
           );
@@ -1365,7 +1365,7 @@ function Ke({ data: t, selected: a }) {
             },
             children: [
               /* @__PURE__ */ e("span", { children: "Drill down" }),
-              /* @__PURE__ */ e(pe, {})
+              /* @__PURE__ */ e(ge, {})
             ]
           }
         )
@@ -1373,26 +1373,26 @@ function Ke({ data: t, selected: a }) {
     }
   );
 }
-const ee = 16, Ze = 48;
-function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
-  const i = se(), s = P(de), c = M(() => {
+const te = 16, Qe = 48;
+function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
+  const i = ce(), s = P(me), c = C(() => {
     s == null || s.notifyLayoutChanged();
-  }, [s]), u = ce(
-    M(
+  }, [s]), h = de(
+    C(
       (d) => {
-        var f, x, w, k;
-        let h = 200, g = Ze + 40;
-        if (!i) return { minWidth: h, minHeight: g };
+        var b, f, x, w;
+        let u = 200, g = Qe + 40;
+        if (!i) return { minWidth: u, minHeight: g };
         for (const m of d.nodeLookup.values()) {
           if (m.parentId !== i) continue;
-          const p = ((f = m.measured) == null ? void 0 : f.width) ?? 220, b = ((x = m.measured) == null ? void 0 : x.height) ?? 80, N = (((w = m.position) == null ? void 0 : w.x) ?? 0) + p + ee, v = (((k = m.position) == null ? void 0 : k.y) ?? 0) + b + ee;
-          N > h && (h = N), v > g && (g = v);
+          const p = ((b = m.measured) == null ? void 0 : b.width) ?? 220, v = ((f = m.measured) == null ? void 0 : f.height) ?? 80, N = (((x = m.position) == null ? void 0 : x.x) ?? 0) + p + te, y = (((w = m.position) == null ? void 0 : w.y) ?? 0) + v + te;
+          N > u && (u = N), y > g && (g = y);
         }
-        return { minWidth: h, minHeight: g };
+        return { minWidth: u, minHeight: g };
       },
       [i]
     ),
-    (d, h) => d.minWidth === h.minWidth && d.minHeight === h.minHeight
+    (d, u) => d.minWidth === u.minWidth && d.minHeight === u.minHeight
   );
   return /* @__PURE__ */ r(
     "div",
@@ -1409,11 +1409,11 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
       },
       children: [
         /* @__PURE__ */ e(
-          we,
+          Le,
           {
             isVisible: o,
-            minWidth: u.minWidth,
-            minHeight: u.minHeight,
+            minWidth: h.minWidth,
+            minHeight: h.minHeight,
             onResizeEnd: c,
             lineStyle: {
               borderColor: `${a.accent}55`,
@@ -1429,18 +1429,18 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
             }
           }
         ),
-        /* @__PURE__ */ e(ue, { accent: a.accent }),
-        me.map(({ position: d, prefix: h }) => {
+        /* @__PURE__ */ e(he, { accent: a.accent }),
+        ue.map(({ position: d, prefix: u }) => {
           const g = n.has(d);
           return /* @__PURE__ */ e(
-            he,
+            pe,
             {
               position: d,
-              prefix: h,
+              prefix: u,
               style: a,
               isActive: g
             },
-            h
+            u
           );
         }),
         /* @__PURE__ */ r(
@@ -1463,7 +1463,7 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     className: "shrink-0",
-                    children: a.iconPaths.map((d, h) => /* @__PURE__ */ e(
+                    children: a.iconPaths.map((d, u) => /* @__PURE__ */ e(
                       "path",
                       {
                         d: d.d,
@@ -1472,7 +1472,7 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
                         strokeWidth: d.strokeWidth ?? 0,
                         opacity: d.opacity ?? 1
                       },
-                      h
+                      u
                     ))
                   }
                 ),
@@ -1511,7 +1511,7 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
                   },
                   children: [
                     /* @__PURE__ */ e("span", { children: "Drill down" }),
-                    /* @__PURE__ */ e(pe, {})
+                    /* @__PURE__ */ e(ge, {})
                   ]
                 }
               )
@@ -1522,7 +1522,7 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
     }
   );
 }
-function ue({ accent: t }) {
+function he({ accent: t }) {
   return /* @__PURE__ */ r(H, { children: [
     /* @__PURE__ */ e(
       "svg",
@@ -1564,7 +1564,7 @@ function ue({ accent: t }) {
     )
   ] });
 }
-function he({
+function pe({
   position: t,
   prefix: a,
   style: o,
@@ -1603,7 +1603,7 @@ function he({
     )
   ] });
 }
-function pe() {
+function ge() {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -1619,33 +1619,33 @@ function pe() {
     }
   );
 }
-const Qe = ye(Ke), Je = {
+const et = we(qe), tt = {
   calls: { color: "#818cf8", dashed: !1, animated: !1, label: "Calls" },
   "data-flow": { color: "#34d399", dashed: !1, animated: !0, label: "Data Flow" },
   publishes: { color: "#fbbf24", dashed: !0, animated: !1, label: "Publishes" },
   subscribes: { color: "#fbbf24", dashed: !0, animated: !1, label: "Subscribes" },
   reads: { color: "#34d399", dashed: !1, animated: !1, label: "Reads" },
   writes: { color: "#fb923c", dashed: !1, animated: !1, label: "Writes" }
-}, te = {
+}, re = {
   color: "#22d3ee",
   dashed: !1,
   animated: !1,
   label: "Connection"
 };
-function ge(t) {
-  return t ? Je[t] ?? te : te;
+function fe(t) {
+  return t ? tt[t] ?? re : re;
 }
-function et({ diagram: t }) {
-  const [a, o] = C(!1), { nodeTypes: n, edgeTypes: l } = E(() => {
-    var c, u;
+function rt({ diagram: t }) {
+  const [a, o] = L(!1), { nodeTypes: n, edgeTypes: l } = F(() => {
+    var c, h;
     const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
     for (const d of t.nodes)
       typeof ((c = d.meta) == null ? void 0 : c.type) == "string" && i.add(d.meta.type);
     for (const d of t.edges)
-      typeof ((u = d.meta) == null ? void 0 : u.type) == "string" && s.add(d.meta.type);
+      typeof ((h = d.meta) == null ? void 0 : h.type) == "string" && s.add(d.meta.type);
     return { nodeTypes: [...i].sort(), edgeTypes: [...s].sort() };
   }, [t]);
-  return n.length === 0 && l.length === 0 ? null : /* @__PURE__ */ e(Ce, { position: "top-right", className: "!m-3", children: /* @__PURE__ */ r(
+  return n.length === 0 && l.length === 0 ? null : /* @__PURE__ */ e(Me, { position: "top-right", className: "!m-3", children: /* @__PURE__ */ r(
     "div",
     {
       className: "flex flex-col border shadow-lg backdrop-blur-md",
@@ -1665,9 +1665,9 @@ function et({ diagram: t }) {
             style: { color: "var(--text-muted, #94a3b8)" },
             "aria-expanded": a,
             children: [
-              /* @__PURE__ */ e(ot, {}),
+              /* @__PURE__ */ e(lt, {}),
               /* @__PURE__ */ e("span", { children: "Legend" }),
-              /* @__PURE__ */ e(nt, { open: a })
+              /* @__PURE__ */ e(it, { open: a })
             ]
           }
         ),
@@ -1677,8 +1677,8 @@ function et({ diagram: t }) {
             className: "flex flex-col gap-3 border-t px-3 py-2.5",
             style: { borderColor: "#1e2d4a", minWidth: 180 },
             children: [
-              n.length > 0 && /* @__PURE__ */ e(re, { title: "Nodes", children: n.map((i) => /* @__PURE__ */ e(tt, { type: i, style: O(i) }, i)) }),
-              l.length > 0 && /* @__PURE__ */ e(re, { title: "Edges", children: l.map((i) => /* @__PURE__ */ e(rt, { style: ge(i) }, i)) })
+              n.length > 0 && /* @__PURE__ */ e(ae, { title: "Nodes", children: n.map((i) => /* @__PURE__ */ e(at, { type: i, style: _(i) }, i)) }),
+              l.length > 0 && /* @__PURE__ */ e(ae, { title: "Edges", children: l.map((i) => /* @__PURE__ */ e(ot, { style: fe(i) }, i)) })
             ]
           }
         )
@@ -1686,7 +1686,7 @@ function et({ diagram: t }) {
     }
   ) });
 }
-function re({
+function ae({
   title: t,
   children: a
 }) {
@@ -1702,14 +1702,14 @@ function re({
     /* @__PURE__ */ e("div", { className: "flex flex-col gap-1", children: a })
   ] });
 }
-function tt({ type: t, style: a }) {
+function at({ type: t, style: a }) {
   return /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-[11px]", children: [
     /* @__PURE__ */ e(
       "span",
       {
         className: "flex h-6 w-6 shrink-0 items-center justify-center border",
         style: { background: a.bg, borderColor: a.border },
-        children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: a.iconPaths.map((o, n) => /* @__PURE__ */ e(at, { p: o }, n)) })
+        children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: a.iconPaths.map((o, n) => /* @__PURE__ */ e(nt, { p: o }, n)) })
       }
     ),
     /* @__PURE__ */ e("span", { style: { color: a.accent }, children: a.label }),
@@ -1723,7 +1723,7 @@ function tt({ type: t, style: a }) {
     )
   ] });
 }
-function rt({ style: t }) {
+function ot({ style: t }) {
   const a = t.dashed ? "4 3" : void 0;
   return /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-[11px]", children: [
     /* @__PURE__ */ r("svg", { width: "28", height: "10", className: "shrink-0", children: [
@@ -1760,7 +1760,7 @@ function rt({ style: t }) {
     /* @__PURE__ */ e("span", { style: { color: t.color }, children: t.label })
   ] });
 }
-function at({ p: t }) {
+function nt({ p: t }) {
   return /* @__PURE__ */ e(
     "path",
     {
@@ -1774,7 +1774,7 @@ function at({ p: t }) {
     }
   );
 }
-function ot() {
+function lt() {
   return /* @__PURE__ */ r("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ e("rect", { x: "3", y: "4", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5" }),
     /* @__PURE__ */ e("rect", { x: "14", y: "4", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.6" }),
@@ -1782,7 +1782,7 @@ function ot() {
     /* @__PURE__ */ e("rect", { x: "14", y: "14", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.15" })
   ] });
 }
-function nt({ open: t }) {
+function it({ open: t }) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -1802,7 +1802,7 @@ function nt({ open: t }) {
     }
   );
 }
-function lt({
+function st({
   id: t,
   source: a,
   target: o,
@@ -1811,21 +1811,21 @@ function lt({
   label: i,
   labelStyle: s,
   labelBgStyle: c,
-  labelBgPadding: u,
+  labelBgPadding: h,
   labelBgBorderRadius: d,
-  animated: h
+  animated: u
 }) {
-  const g = K(a), f = K(o);
-  if (!g || !f) return null;
-  const { sx: x, sy: w, tx: k, ty: m, sourcePos: p, targetPos: b } = Ye(
+  const g = Z(a), b = Z(o);
+  if (!g || !b) return null;
+  const { sx: f, sy: x, tx: w, ty: m, sourcePos: p, targetPos: v } = Xe(
     g,
-    f
-  ), [N, v, L] = Le({
-    sourceX: x,
-    sourceY: w,
+    b
+  ), [N, y, M] = Be({
+    sourceX: f,
+    sourceY: x,
     sourcePosition: p,
-    targetPosition: b,
-    targetX: k,
+    targetPosition: v,
+    targetX: w,
     targetY: m,
     borderRadius: 8
   });
@@ -1834,23 +1834,23 @@ function lt({
       "path",
       {
         id: t,
-        className: `react-flow__edge-path${h ? " react-flow__edge-path--animated" : ""}`,
+        className: `react-flow__edge-path${u ? " react-flow__edge-path--animated" : ""}`,
         d: N,
         markerEnd: n,
         style: l
       }
     ),
-    i && /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(
+    i && /* @__PURE__ */ e(Se, { children: /* @__PURE__ */ e(
       "div",
       {
         style: {
           position: "absolute",
-          transform: `translate(-50%, -50%) translate(${v}px, ${L}px)`,
+          transform: `translate(-50%, -50%) translate(${y}px, ${M}px)`,
           pointerEvents: "all",
           ...c ? {
-            background: it(c),
+            background: ct(c),
             borderRadius: d ?? 4,
-            padding: u ? `${u[1]}px ${u[0]}px` : "4px 6px"
+            padding: h ? `${h[1]}px ${h[0]}px` : "4px 6px"
           } : {}
         },
         children: /* @__PURE__ */ e("span", { style: s, children: i })
@@ -1858,24 +1858,24 @@ function lt({
     ) })
   ] });
 }
-function it(t) {
+function ct(t) {
   const a = t, o = a.fill ?? "#0a0f1a", n = a.fillOpacity ?? 1;
   if (n >= 1) return o;
   const l = o.replace("#", "");
   if (l.length !== 3 && l.length !== 6) return o;
-  const i = l.length === 3 ? l.split("").map((d) => d + d).join("") : l, s = parseInt(i.slice(0, 2), 16), c = parseInt(i.slice(2, 4), 16), u = parseInt(i.slice(4, 6), 16);
-  return `rgba(${s}, ${c}, ${u}, ${n})`;
+  const i = l.length === 3 ? l.split("").map((d) => d + d).join("") : l, s = parseInt(i.slice(0, 2), 16), c = parseInt(i.slice(2, 4), 16), h = parseInt(i.slice(4, 6), 16);
+  return `rgba(${s}, ${c}, ${h}, ${n})`;
 }
-function st(t) {
+function dt(t) {
   const a = new Set(t.nodes.map((n) => n.id)), o = /* @__PURE__ */ new Map();
   for (const n of t.nodes)
     n.parentId && a.has(n.parentId) && o.set(n.parentId, (o.get(n.parentId) ?? 0) + 1);
   return {
-    nodes: t.nodes.map((n) => ct(n, o.has(n.id))),
-    edges: t.edges.filter((n) => a.has(n.source) && a.has(n.target)).map(dt)
+    nodes: t.nodes.map((n) => mt(n, o.has(n.id))),
+    edges: t.edges.filter((n) => a.has(n.source) && a.has(n.target)).map(ut)
   };
 }
-function ct(t, a) {
+function mt(t, a) {
   var i, s, c;
   const o = !!((i = t.meta) != null && i.isContainer) || a, n = {
     label: t.label,
@@ -1893,9 +1893,9 @@ function ct(t, a) {
   };
   return t.parentId && (l.parentId = t.parentId, l.extent = "parent"), l;
 }
-function dt(t) {
+function ut(t) {
   var n;
-  const a = ge((n = t.meta) == null ? void 0 : n.type), o = { strokeWidth: 1.5, stroke: a.color };
+  const a = fe((n = t.meta) == null ? void 0 : n.type), o = { strokeWidth: 1.5, stroke: a.color };
   return a.dashed && (o.strokeDasharray = "5 5"), {
     id: t.id,
     source: t.source,
@@ -1905,7 +1905,7 @@ function dt(t) {
     animated: a.animated,
     style: o,
     markerEnd: {
-      type: Se.ArrowClosed,
+      type: We.ArrowClosed,
       width: 16,
       height: 16,
       color: a.color
@@ -1925,29 +1925,29 @@ function dt(t) {
     labelBgBorderRadius: 4
   };
 }
-const mt = new Fe(), ae = 220, oe = 80, ut = "[top=48,left=16,bottom=16,right=16]";
-function ht(t) {
+const ht = new je(), oe = 220, ne = 80, pt = "[top=48,left=16,bottom=16,right=16]";
+function gt(t) {
   return t === "LR" ? "RIGHT" : "DOWN";
 }
-async function pt(t, a, o, n) {
+async function ft(t, a, o, n) {
   if (t.length === 0) return t;
   const l = /* @__PURE__ */ new Map();
   for (const m of t) {
-    const p = m.parentId ?? void 0, b = l.get(p) ?? [];
-    b.push(m), l.set(p, b);
+    const p = m.parentId ?? void 0, v = l.get(p) ?? [];
+    v.push(m), l.set(p, v);
   }
   const i = (m) => {
     var p;
     return (((p = l.get(m)) == null ? void 0 : p.length) ?? 0) > 0;
   }, s = (m) => i(m.id) ? {
     id: m.id,
-    layoutOptions: { "elk.padding": ut },
+    layoutOptions: { "elk.padding": pt },
     children: (l.get(m.id) ?? []).map(s)
-  } : { id: m.id, width: ae, height: oe }, c = l.get(void 0) ?? [], u = {
+  } : { id: m.id, width: oe, height: ne }, c = l.get(void 0) ?? [], h = {
     id: "root",
     layoutOptions: {
       "elk.algorithm": "layered",
-      "elk.direction": ht(o),
+      "elk.direction": gt(o),
       "elk.edgeRouting": "ORTHOGONAL",
       "elk.spacing.nodeNode": "80",
       "elk.layered.spacing.nodeNodeBetweenLayers": "120",
@@ -1960,38 +1960,38 @@ async function pt(t, a, o, n) {
       sources: [m.source],
       targets: [m.target]
     }))
-  }, d = await mt.layout(u), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), f = (m) => {
-    m.id !== "root" && (h.set(m.id, { x: m.x ?? 0, y: m.y ?? 0 }), i(m.id) && g.set(m.id, {
-      width: m.width ?? ae,
-      height: m.height ?? oe
+  }, d = await ht.layout(h), u = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), b = (m) => {
+    m.id !== "root" && (u.set(m.id, { x: m.x ?? 0, y: m.y ?? 0 }), i(m.id) && g.set(m.id, {
+      width: m.width ?? oe,
+      height: m.height ?? ne
     }));
-    for (const p of m.children ?? []) f(p);
+    for (const p of m.children ?? []) b(p);
   };
-  f(d);
-  const x = /* @__PURE__ */ new Set(), w = [], k = (m) => {
-    if (x.has(m.id)) return;
-    x.add(m.id);
-    const p = n == null ? void 0 : n.nodes[m.id], b = p ? { x: p.x, y: p.y } : h.get(m.id) ?? { x: 0, y: 0 }, N = { ...m, position: b }, v = g.get(m.id), L = (p == null ? void 0 : p.width) ?? (v == null ? void 0 : v.width), W = (p == null ? void 0 : p.height) ?? (v == null ? void 0 : v.height);
-    L !== void 0 && W !== void 0 && (N.style = { ...m.style ?? {}, width: L, height: W }), w.push(N);
-    for (const j of l.get(m.id) ?? []) k(j);
+  b(d);
+  const f = /* @__PURE__ */ new Set(), x = [], w = (m) => {
+    if (f.has(m.id)) return;
+    f.add(m.id);
+    const p = n == null ? void 0 : n.nodes[m.id], v = p ? { x: p.x, y: p.y } : u.get(m.id) ?? { x: 0, y: 0 }, N = { ...m, position: v }, y = g.get(m.id), M = (p == null ? void 0 : p.width) ?? (y == null ? void 0 : y.width), D = (p == null ? void 0 : p.height) ?? (y == null ? void 0 : y.height);
+    M !== void 0 && D !== void 0 && (N.style = { ...m.style ?? {}, width: M, height: D }), x.push(N);
+    for (const $ of l.get(m.id) ?? []) w($);
   };
-  for (const m of c) k(m);
-  for (const m of t) x.has(m.id) || k(m);
-  return w;
+  for (const m of c) w(m);
+  for (const m of t) f.has(m.id) || w(m);
+  return x;
 }
-const gt = {
+const bt = {
   summary: "Reading manifest",
   diagrams: "Loading diagrams",
   descriptions: "Loading node details"
-}, ft = 150;
-function xt({ state: t }) {
-  const [a, o] = C(!1);
+}, xt = 150;
+function vt({ state: t }) {
+  const [a, o] = L(!1);
   return B(() => {
     if (t.status === "error") {
       o(!0);
       return;
     }
-    const n = setTimeout(() => o(!0), ft);
+    const n = setTimeout(() => o(!0), xt);
     return () => clearTimeout(n);
   }, [t.status]), a ? /* @__PURE__ */ e(
     "div",
@@ -2008,7 +2008,7 @@ function xt({ state: t }) {
             borderColor: "var(--border-default)",
             backgroundColor: "rgba(10, 15, 26, 0.85)"
           },
-          children: t.status === "error" ? /* @__PURE__ */ e(vt, { message: t.message }) : /* @__PURE__ */ e(bt, { state: t })
+          children: t.status === "error" ? /* @__PURE__ */ e(kt, { message: t.message }) : /* @__PURE__ */ e(yt, { state: t })
         }
       )
     }
@@ -2021,7 +2021,7 @@ function xt({ state: t }) {
     }
   );
 }
-function bt({
+function yt({
   state: t
 }) {
   const { phase: a, done: o, total: n, archName: l } = t, i = n > 0 ? Math.min(1, o / n) : 0, s = a !== "summary";
@@ -2048,7 +2048,7 @@ function bt({
         className: "mt-5 flex items-center justify-between text-[10px] tracking-[0.2em] uppercase",
         style: { color: "var(--text-secondary)", fontFamily: "var(--font-mono)" },
         children: [
-          /* @__PURE__ */ e("span", { children: gt[a] }),
+          /* @__PURE__ */ e("span", { children: bt[a] }),
           s && /* @__PURE__ */ r("span", { style: { color: "var(--text-muted)" }, children: [
             o,
             " / ",
@@ -2086,7 +2086,7 @@ function bt({
     )
   ] });
 }
-function vt({ message: t }) {
+function kt({ message: t }) {
   return /* @__PURE__ */ r(H, { children: [
     /* @__PURE__ */ e(
       "div",
@@ -2129,8 +2129,8 @@ function vt({ message: t }) {
     )
   ] });
 }
-const T = ie(null);
-function _() {
+const T = se(null);
+function U() {
   const t = P(T);
   if (!t)
     throw new Error(
@@ -2138,7 +2138,7 @@ function _() {
     );
   return t.bundle;
 }
-function yt() {
+function wt() {
   const t = P(T);
   if (!t)
     throw new Error(
@@ -2146,7 +2146,7 @@ function yt() {
     );
   return t.saveLayout;
 }
-function kt() {
+function Nt() {
   const t = P(T);
   if (!t)
     throw new Error(
@@ -2154,7 +2154,7 @@ function kt() {
     );
   return t.openInEditor;
 }
-function Nt() {
+function Ct() {
   const t = P(T);
   if (!t)
     throw new Error(
@@ -2162,57 +2162,57 @@ function Nt() {
     );
   return t.reportUsage;
 }
-function wt({
+function Lt({
   dataSource: t,
   children: a,
   reloadKey: o
 }) {
-  const [n, l] = C({
+  const [n, l] = L({
     status: "loading",
     phase: "summary",
     done: 0,
     total: 1
   });
   B(() => {
-    let h = !1;
-    return l({ status: "loading", phase: "summary", done: 0, total: 1 }), Ct({
+    let u = !1;
+    return l({ status: "loading", phase: "summary", done: 0, total: 1 }), Mt({
       dataSource: t,
       onState: (g) => {
-        h || l(g);
+        u || l(g);
       },
-      isCancelled: () => h
+      isCancelled: () => u
     }), () => {
-      h = !0;
+      u = !0;
     };
   }, [t, o]);
-  const i = M(
-    async (h, g) => {
-      const f = await t.saveLayout(h, g);
-      l((x) => x.status !== "ready" ? x : {
+  const i = C(
+    async (u, g) => {
+      const b = await t.saveLayout(u, g);
+      l((f) => f.status !== "ready" ? f : {
         status: "ready",
         bundle: {
-          ...x.bundle,
-          layouts: { ...x.bundle.layouts, [h]: f }
+          ...f.bundle,
+          layouts: { ...f.bundle.layouts, [u]: b }
         }
       });
     },
     [t]
-  ), s = E(
-    () => t.openInEditor ? (h) => {
+  ), s = F(
+    () => t.openInEditor ? (u) => {
       var g;
-      return (g = t.openInEditor) == null ? void 0 : g.call(t, h);
+      return (g = t.openInEditor) == null ? void 0 : g.call(t, u);
     } : void 0,
     [t]
-  ), c = M(
-    (h, g) => {
-      var f;
-      (f = t.reportUsage) == null || f.call(t, h, g);
+  ), c = C(
+    (u, g) => {
+      var b;
+      (b = t.reportUsage) == null || b.call(t, u, g);
     },
     [t]
-  ), u = n.status === "ready" ? n.bundle : null, d = E(() => u ? { bundle: u, saveLayout: i, openInEditor: s, reportUsage: c } : null, [u, i, s, c]);
-  return n.status !== "ready" ? /* @__PURE__ */ e(xt, { state: n }) : d ? /* @__PURE__ */ e(T.Provider, { value: d, children: a }) : null;
+  ), h = n.status === "ready" ? n.bundle : null, d = F(() => h ? { bundle: h, saveLayout: i, openInEditor: s, reportUsage: c } : null, [h, i, s, c]);
+  return n.status !== "ready" ? /* @__PURE__ */ e(vt, { state: n }) : d ? /* @__PURE__ */ e(T.Provider, { value: d, children: a }) : null;
 }
-async function Ct({
+async function Mt({
   dataSource: t,
   onState: a,
   isCancelled: o
@@ -2239,48 +2239,48 @@ async function Ct({
         total: s,
         archName: n.name
       });
-    }, u = await Promise.all(
+    }, h = await Promise.all(
       l.map(async (p) => {
-        const b = t.loadDiagram(p).then((W) => (o() || c(), W)), N = t.loadLayout(p).then((W) => (o() || c(), W)), [v, L] = await Promise.all([
-          b,
+        const v = t.loadDiagram(p).then((D) => (o() || c(), D)), N = t.loadLayout(p).then((D) => (o() || c(), D)), [y, M] = await Promise.all([
+          v,
           N
         ]);
-        return { slug: p, diagram: v, layout: L };
+        return { slug: p, diagram: y, layout: M };
       })
     );
     if (o()) return;
-    const d = {}, h = {}, g = /* @__PURE__ */ new Set();
-    for (const { slug: p, diagram: b, layout: N } of u) {
-      d[p] = b, h[p] = N;
-      for (const v of b.nodes ?? []) g.add(v.id);
+    const d = {}, u = {}, g = /* @__PURE__ */ new Set();
+    for (const { slug: p, diagram: v, layout: N } of h) {
+      d[p] = v, u[p] = N;
+      for (const y of v.nodes ?? []) g.add(y.id);
     }
-    const f = [...g];
-    let x = 0;
+    const b = [...g];
+    let f = 0;
     a({
       status: "loading",
       phase: "descriptions",
       done: 0,
-      total: f.length,
+      total: b.length,
       archName: n.name
     });
-    const w = () => {
-      x += 1, a({
+    const x = () => {
+      f += 1, a({
         status: "loading",
         phase: "descriptions",
-        done: x,
-        total: f.length,
+        done: f,
+        total: b.length,
         archName: n.name
       });
-    }, k = {}, m = /* @__PURE__ */ new Set();
+    }, w = {}, m = /* @__PURE__ */ new Set();
     if (await Promise.all(
-      f.map(async (p) => {
+      b.map(async (p) => {
         try {
-          const b = await t.loadNodeDetail(p);
-          k[p] = b;
+          const v = await t.loadNodeDetail(p);
+          w[p] = v;
         } catch {
           m.add(p);
         } finally {
-          o() || w();
+          o() || x();
         }
       })
     ), o()) return;
@@ -2289,8 +2289,8 @@ async function Ct({
       bundle: {
         summary: n,
         diagrams: d,
-        layouts: h,
-        nodes: k,
+        layouts: u,
+        nodes: w,
         missingDescriptions: m
       }
     });
@@ -2300,91 +2300,91 @@ async function Ct({
     a({ status: "error", message: l });
   }
 }
-const Lt = { architecture: Qe }, Mt = { floating: lt };
-function St(t) {
-  return /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(Dt, { ...t }) });
+const Bt = { architecture: et }, St = { floating: st };
+function Wt(t) {
+  return /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(At, { ...t }) });
 }
-const Bt = (t) => ({
+const Dt = (t) => ({
   version: 1,
   diagramId: t,
   updatedAt: "",
   nodes: {}
 });
-function Wt(t) {
+function zt(t) {
   var o, n, l, i;
   const a = {};
   for (const s of t) {
     const c = {
       x: ((o = s.position) == null ? void 0 : o.x) ?? 0,
       y: ((n = s.position) == null ? void 0 : n.y) ?? 0
-    }, u = s.width ?? ((l = s.style) == null ? void 0 : l.width), d = s.height ?? ((i = s.style) == null ? void 0 : i.height);
-    typeof u == "number" && Number.isFinite(u) && (c.width = u), typeof d == "number" && Number.isFinite(d) && (c.height = d), a[s.id] = c;
+    }, h = s.width ?? ((l = s.style) == null ? void 0 : l.width), d = s.height ?? ((i = s.style) == null ? void 0 : i.height);
+    typeof h == "number" && Number.isFinite(h) && (c.width = h), typeof d == "number" && Number.isFinite(d) && (c.height = d), a[s.id] = c;
   }
   return a;
 }
-function Dt({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
-  const n = _(), l = yt(), i = n.diagrams[t], [s, c, u] = We([]), [d, h, g] = De([]), [f, x] = C(!1), [w, k] = C(null), { getNodes: m } = ze(), p = G(null), b = G(t);
-  b.current = t;
-  const N = G(n);
+function At({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
+  const n = U(), l = wt(), i = n.diagrams[t], [s, c, h] = ze([]), [d, u, g] = Ae([]), [b, f] = L(!1), [x, w] = L(null), { getNodes: m } = Ee(), p = V(null), v = V(t);
+  v.current = t;
+  const N = V(n);
   N.current = n, B(() => {
-    var Y;
+    var K;
     let S = !1;
-    x(!1), k(null), a(null);
-    const D = N.current, z = D.diagrams[t];
-    if (!z)
-      return k(`Diagram "${t}" was not loaded`), c([]), h([]), () => {
+    f(!1), w(null), a(null);
+    const z = N.current, A = z.diagrams[t];
+    if (!A)
+      return w(`Diagram "${t}" was not loaded`), c([]), u([]), () => {
         S = !0;
       };
-    const be = D.layouts[t] ?? Bt(t), { nodes: ve, edges: U } = st(z);
-    return pt(ve, U, (Y = z.meta) == null ? void 0 : Y.direction, be).then(($) => {
-      S || (c($), h(U), requestAnimationFrame(() => !S && x(!0)));
-    }).catch(($) => {
-      S || k($.message);
+    const ye = z.layouts[t] ?? Dt(t), { nodes: ke, edges: Y } = dt(A);
+    return ft(ke, Y, (K = A.meta) == null ? void 0 : K.direction, ye).then((G) => {
+      S || (c(G), u(Y), requestAnimationFrame(() => !S && f(!0)));
+    }).catch((G) => {
+      S || w(G.message);
     }), () => {
       S = !0, p.current && (clearTimeout(p.current), p.current = null);
     };
-  }, [t, a, h, c]);
-  const v = M(() => {
-    const S = b.current, D = {
-      nodes: Wt(m())
+  }, [t, a, u, c]);
+  const y = C(() => {
+    const S = v.current, z = {
+      nodes: zt(m())
     };
-    l(S, D).catch((z) => {
-      console.warn("[tecture] failed to persist layout", z);
+    l(S, z).catch((A) => {
+      console.warn("[tecture] failed to persist layout", A);
     });
-  }, [m, l]), L = M(() => {
+  }, [m, l]), M = C(() => {
     p.current && clearTimeout(p.current), p.current = setTimeout(() => {
-      p.current = null, v();
+      p.current = null, y();
     }, 150);
-  }, [v]), W = E(
-    () => ({ notifyLayoutChanged: L }),
-    [L]
-  ), j = M(() => {
-    L();
-  }, [L]), fe = E(
-    () => (S, D) => {
-      a(D.id);
+  }, [y]), D = F(
+    () => ({ notifyLayoutChanged: M }),
+    [M]
+  ), $ = C(() => {
+    M();
+  }, [M]), xe = F(
+    () => (S, z) => {
+      a(z.id);
     },
     [a]
-  ), xe = E(
-    () => (S, D) => {
-      const z = D.data;
-      z.subDiagramId && o(z.subDiagramId);
+  ), ve = F(
+    () => (S, z) => {
+      const A = z.data;
+      A.subDiagramId && o(A.subDiagramId);
     },
     [o]
   );
-  return /* @__PURE__ */ e(de.Provider, { value: W, children: /* @__PURE__ */ r("div", { className: "relative h-full w-full", children: [
+  return /* @__PURE__ */ e(me.Provider, { value: D, children: /* @__PURE__ */ r("div", { className: "relative h-full w-full", children: [
     /* @__PURE__ */ r(
-      Ae,
+      Fe,
       {
         nodes: s,
         edges: d,
-        nodeTypes: Lt,
-        edgeTypes: Mt,
-        onNodesChange: u,
+        nodeTypes: Bt,
+        edgeTypes: St,
+        onNodesChange: h,
         onEdgesChange: g,
-        onNodeClick: fe,
-        onNodeDoubleClick: xe,
-        onNodeDragStop: j,
+        onNodeClick: xe,
+        onNodeDoubleClick: ve,
+        onNodeDragStop: $,
         onPaneClick: () => a(null),
         fitView: !0,
         fitViewOptions: { padding: 0.2 },
@@ -2393,23 +2393,23 @@ function Dt({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
         minZoom: 0.1,
         maxZoom: 2,
         style: {
-          opacity: f ? 1 : 0,
+          opacity: b ? 1 : 0,
           transition: "opacity 0.2s ease-in"
         },
         children: [
           /* @__PURE__ */ e(
-            Ee,
+            He,
             {
-              variant: He.Lines,
+              variant: Pe.Lines,
               gap: 20,
               size: 1,
               color: "rgba(34, 78, 130, 0.12)"
             }
           ),
-          /* @__PURE__ */ e(Pe, { showInteractive: !1, position: "bottom-right" }),
-          i && /* @__PURE__ */ e(et, { diagram: i }),
+          /* @__PURE__ */ e(Te, { showInteractive: !1, position: "bottom-right" }),
+          i && /* @__PURE__ */ e(rt, { diagram: i }),
           /* @__PURE__ */ e(
-            Te,
+            Ie,
             {
               position: "bottom-left",
               pannable: !0,
@@ -2422,10 +2422,10 @@ function Dt({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
         ]
       }
     ),
-    w && /* @__PURE__ */ e(zt, { label: `Error: ${w}` })
+    x && /* @__PURE__ */ e(Et, { label: `Error: ${x}` })
   ] }) });
 }
-function zt({ label: t }) {
+function Et({ label: t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -2438,13 +2438,13 @@ function zt({ label: t }) {
     }
   );
 }
-function At({
+function Ft({
   summary: t,
   currentDiagramId: a,
   onSelect: o,
   onGoHome: n
 }) {
-  const [l, i] = C(!0), s = t != null && a === t.topDiagram;
+  const [l, i] = L(!0), s = t != null && a === t.topDiagram;
   return /* @__PURE__ */ e("div", { className: "absolute top-3 left-3 z-10 w-64", children: /* @__PURE__ */ r(
     "div",
     {
@@ -2576,7 +2576,7 @@ function At({
         ),
         l && /* @__PURE__ */ r("ul", { className: "max-h-[60vh] overflow-y-auto py-1", children: [
           t == null ? void 0 : t.diagrams.map((c) => /* @__PURE__ */ e(
-            Et,
+            Ht,
             {
               diagram: c,
               active: c.slug === a,
@@ -2601,7 +2601,7 @@ function At({
     }
   ) });
 }
-function Et({
+function Ht({
   diagram: t,
   active: a,
   isTop: o,
@@ -2677,10 +2677,10 @@ function Et({
     }
   ) });
 }
-let ne = !1;
-async function Ht() {
+let le = !1;
+async function Pt() {
   const a = (await import("mermaid")).default;
-  return ne || (a.initialize({
+  return le || (a.initialize({
     startOnLoad: !1,
     theme: "dark",
     securityLevel: "strict",
@@ -2715,21 +2715,21 @@ async function Ht() {
       noteBorderColor: "#854d0e",
       noteTextColor: "#fef3c7"
     }
-  }), ne = !0), a;
+  }), le = !0), a;
 }
-function Pt({ chart: t }) {
-  const [a, o] = C({ status: "loading" }), [n, l] = C(!1), s = `mermaid-${ke().replace(/:/g, "")}`;
+function Tt({ chart: t }) {
+  const [a, o] = L({ status: "loading" }), [n, l] = L(!1), s = `mermaid-${Ne().replace(/:/g, "")}`;
   return B(() => {
     let c = !1;
     return o({ status: "loading" }), (async () => {
       try {
-        const u = await Ht();
-        await u.parse(t);
-        const { svg: d } = await u.render(s, t);
+        const h = await Pt();
+        await h.parse(t);
+        const { svg: d } = await h.render(s, t);
         c || o({ status: "ready", svg: d });
-      } catch (u) {
+      } catch (h) {
         if (c) return;
-        const d = u instanceof Error ? u.message : "Failed to render diagram";
+        const d = h instanceof Error ? h.message : "Failed to render diagram";
         o({ status: "error", message: d });
       }
     })(), () => {
@@ -2809,10 +2809,10 @@ function Pt({ chart: t }) {
         }
       )
     ] }),
-    n && /* @__PURE__ */ e(Tt, { svg: a.svg, onClose: () => l(!1) })
+    n && /* @__PURE__ */ e(It, { svg: a.svg, onClose: () => l(!1) })
   ] });
 }
-function Tt({
+function It({
   svg: t,
   onClose: a
 }) {
@@ -2825,7 +2825,7 @@ function Tt({
     return document.body.style.overflow = "hidden", () => {
       document.removeEventListener("keydown", o), document.body.style.overflow = n;
     };
-  }, [a]), $e(
+  }, [a]), Ve(
     /* @__PURE__ */ e(
       "div",
       {
@@ -2933,22 +2933,22 @@ function Tt({
     document.body
   );
 }
-function Ft({ source: t }) {
+function jt({ source: t }) {
   return /* @__PURE__ */ e("div", { className: "prose-markdown", children: /* @__PURE__ */ e(
-    je,
+    Ge,
     {
       options: {
         forceBlock: !0,
         overrides: {
-          pre: { component: Rt },
-          a: { component: It }
+          pre: { component: $t },
+          a: { component: Rt }
         }
       },
       children: t
     }
   ) });
 }
-function It({
+function Rt({
   href: t,
   children: a,
   ...o
@@ -2964,13 +2964,13 @@ function It({
     }
   );
 }
-function Rt({ children: t }) {
-  const a = jt(t);
-  return a !== null ? /* @__PURE__ */ e(Pt, { chart: a }) : /* @__PURE__ */ e("pre", { children: t });
+function $t({ children: t }) {
+  const a = Gt(t);
+  return a !== null ? /* @__PURE__ */ e(Tt, { chart: a }) : /* @__PURE__ */ e("pre", { children: t });
 }
-function jt(t) {
+function Gt(t) {
   const a = Array.isArray(t) && t.length === 1 ? t[0] : t;
-  if (!Ne(a)) return null;
+  if (!Ce(a)) return null;
   const o = a;
   if (o.type !== "code") return null;
   const n = o.props.className ?? "";
@@ -2978,9 +2978,9 @@ function jt(t) {
   const i = o.props.children;
   return typeof i == "string" ? i : Array.isArray(i) ? i.map((s) => String(s ?? "")).join("") : String(i ?? "");
 }
-function $t({ nodeId: t, onClose: a }) {
-  var d, h;
-  const o = _(), n = kt(), l = o.nodes[t], i = o.missingDescriptions.has(t), s = O((d = l == null ? void 0 : l.meta) == null ? void 0 : d.type), c = l == null ? void 0 : l.path, u = n ? void 0 : c ? Ie(o.summary.source, o.summary.sourceHost, c) : void 0;
+function Vt({ nodeId: t, onClose: a }) {
+  var d, u;
+  const o = U(), n = Nt(), l = o.nodes[t], i = o.missingDescriptions.has(t), s = _((d = l == null ? void 0 : l.meta) == null ? void 0 : d.type), c = l == null ? void 0 : l.path, h = n ? void 0 : c ? Re(o.summary.source, o.summary.sourceHost, c) : void 0;
   return /* @__PURE__ */ r(
     "aside",
     {
@@ -3015,7 +3015,7 @@ function $t({ nodeId: t, onClose: a }) {
                     children: (l == null ? void 0 : l.label) ?? t
                   }
                 ),
-                (h = l == null ? void 0 : l.meta) != null && h.technology ? /* @__PURE__ */ e(
+                (u = l == null ? void 0 : l.meta) != null && u.technology ? /* @__PURE__ */ e(
                   "div",
                   {
                     className: "mt-0.5 text-xs",
@@ -3023,20 +3023,20 @@ function $t({ nodeId: t, onClose: a }) {
                     children: String(l.meta.technology)
                   }
                 ) : null,
-                c || l && Z(l) ? /* @__PURE__ */ r("div", { className: "mt-1.5 flex w-full items-center gap-x-3", children: [
+                c || l && q(l) ? /* @__PURE__ */ r("div", { className: "mt-1.5 flex w-full items-center gap-x-3", children: [
                   c ? /* @__PURE__ */ e(
-                    Gt,
+                    Ot,
                     {
                       path: c,
                       accent: s.accent,
                       onOpenInEditor: n ? () => n(c) : void 0,
-                      sourceUrl: u
+                      sourceUrl: h
                     }
                   ) : null,
-                  l && Z(l) ? /* @__PURE__ */ e(
-                    Vt,
+                  l && q(l) ? /* @__PURE__ */ e(
+                    _t,
                     {
-                      prompt: Re(l),
+                      prompt: $e(l),
                       accent: s.accent,
                       className: "ml-auto"
                     }
@@ -3080,14 +3080,14 @@ function $t({ nodeId: t, onClose: a }) {
         /* @__PURE__ */ r("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: [
           !l && /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "No details available for this node." }),
           l && i && /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "Description not available." }),
-          l && !i && (l.description ? /* @__PURE__ */ e(Ft, { source: l.description }) : /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "No description provided." }))
+          l && !i && (l.description ? /* @__PURE__ */ e(jt, { source: l.description }) : /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "No description provided." }))
         ] })
       ]
     }
   );
 }
 const R = "inline-flex items-center gap-1.5 text-xs transition-opacity hover:opacity-80";
-function V(t) {
+function O(t) {
   return {
     color: t,
     fontFamily: "var(--font-mono)",
@@ -3097,7 +3097,7 @@ function V(t) {
     cursor: "pointer"
   };
 }
-function Gt({
+function Ot({
   path: t,
   accent: a,
   onOpenInEditor: o,
@@ -3126,7 +3126,7 @@ function Gt({
     {
       type: "button",
       className: R,
-      style: V(a),
+      style: O(a),
       onClick: o,
       title: t,
       children: [
@@ -3138,7 +3138,7 @@ function Gt({
     "a",
     {
       className: R,
-      style: V(a),
+      style: O(a),
       href: n,
       target: "_blank",
       rel: "noreferrer",
@@ -3150,13 +3150,13 @@ function Gt({
     }
   ) : null;
 }
-function Vt({
+function _t({
   prompt: t,
   accent: a,
   className: o
 }) {
-  const [n, l] = C(!1), i = M(() => {
-    Ot(t).then((s) => {
+  const [n, l] = L(!1), i = C(() => {
+    Ut(t).then((s) => {
       s && (l(!0), window.setTimeout(() => l(!1), 1500));
     });
   }, [t]);
@@ -3165,7 +3165,7 @@ function Vt({
     {
       type: "button",
       className: o ? `${R} ${o}` : R,
-      style: V(a),
+      style: O(a),
       onClick: i,
       title: "Copy a prompt to enrich this component's description with a coding agent",
       children: [
@@ -3204,7 +3204,7 @@ function Vt({
     }
   );
 }
-async function Ot(t) {
+async function Ut(t) {
   var a;
   try {
     if ((a = navigator.clipboard) != null && a.writeText)
@@ -3220,8 +3220,8 @@ async function Ot(t) {
     return !1;
   }
 }
-function _t() {
-  const [t, a] = C(!0);
+function Yt() {
+  const [t, a] = L(!0);
   return B(() => {
     const o = setTimeout(() => a(!1), 3500);
     return () => clearTimeout(o);
@@ -3241,27 +3241,408 @@ function _t() {
     }
   ) : null;
 }
-let le = null;
-function Ut({ diagramId: t, showDiagramList: a = !0 }) {
-  const o = _(), n = Nt(), [l, i] = C(null);
+function be({ className: t }) {
+  return /* @__PURE__ */ e("svg", { className: `ob-cursor ${t}`, viewBox: "0 0 24 24", "aria-hidden": !0, children: /* @__PURE__ */ e(
+    "path",
+    {
+      d: "M5 3 L5 19 L9.6 14.8 L12.4 21 L15 19.8 L12.2 13.9 L18 13.9 Z",
+      fill: "#e2e8f0",
+      stroke: "#0a0f1a",
+      strokeWidth: "1.2",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function W({
+  label: t,
+  style: a,
+  className: o = "",
+  children: n
+}) {
+  return /* @__PURE__ */ r("div", { className: `ob-box ${o}`, style: a, children: [
+    /* @__PURE__ */ e("span", { className: "ob-box-icon" }),
+    /* @__PURE__ */ e("span", { children: t }),
+    n
+  ] });
+}
+function Kt() {
+  return /* @__PURE__ */ r("div", { className: "ob-stage blueprint-grid", children: [
+    /* @__PURE__ */ e(
+      W,
+      {
+        label: "Service",
+        className: "ob-click-target",
+        style: { left: "6%", top: "20%", width: "34%", height: "30%" }
+      }
+    ),
+    /* @__PURE__ */ e(
+      W,
+      {
+        label: "Database",
+        style: { left: "6%", top: "58%", width: "34%", height: "30%" }
+      }
+    ),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "ob-ripple ob-click-ripple",
+        style: { left: "23%", top: "35%" }
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "ob-click-panel ob-click-slide", children: [
+      /* @__PURE__ */ e("div", { className: "ob-line accent", style: { width: "68%" } }),
+      /* @__PURE__ */ e("div", { className: "ob-line", style: { width: "100%" } }),
+      /* @__PURE__ */ e("div", { className: "ob-line", style: { width: "90%" } }),
+      /* @__PURE__ */ e("div", { className: "ob-line", style: { width: "58%" } }),
+      /* @__PURE__ */ e("div", { className: "ob-line", style: { width: "82%" } })
+    ] }),
+    /* @__PURE__ */ e(be, { className: "ob-click-cursor" })
+  ] });
+}
+function Xt() {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "9",
+      height: "9",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function Zt() {
+  return /* @__PURE__ */ r("div", { className: "ob-stage blueprint-grid", children: [
+    /* @__PURE__ */ r("div", { className: "ob-level-1", children: [
+      /* @__PURE__ */ e(
+        W,
+        {
+          label: "User",
+          style: { left: "34%", top: "3%", width: "24%", height: "20%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          label: "Files",
+          style: { left: "64%", top: "40%", width: "24%", height: "24%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          label: "Service",
+          style: { left: "28%", top: "33%", width: "30%", height: "42%" },
+          children: /* @__PURE__ */ r("span", { className: "ob-pill ob-drill-pill", children: [
+            "Drill down",
+            /* @__PURE__ */ e(Xt, {})
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r("div", { className: "ob-level-2", children: [
+      /* @__PURE__ */ e(
+        W,
+        {
+          label: "API",
+          style: { left: "8%", top: "14%", width: "24%", height: "26%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          label: "Router",
+          style: { left: "40%", top: "8%", width: "24%", height: "26%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          label: "Store",
+          style: { left: "20%", top: "56%", width: "24%", height: "26%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        W,
+        {
+          label: "Worker",
+          style: { left: "54%", top: "52%", width: "28%", height: "28%" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "ob-ripple ob-drill-ripple",
+        style: { left: "43%", top: "64%" }
+      }
+    ),
+    /* @__PURE__ */ e(be, { className: "ob-drill-cursor" })
+  ] });
+}
+function qt({
+  open: t,
+  onClose: a,
+  architectureName: o,
+  architectureDescription: n
+}) {
+  var b;
+  const [l, i] = L(0);
+  B(() => {
+    t && i(0);
+  }, [t]);
+  const s = (b = (n ?? "").split(/\n\s*\n/)[0]) == null ? void 0 : b.trim(), c = [
+    {
+      eyebrow: "Architecture",
+      title: o,
+      blurb: s || "An interactive map of this system — its components and how they connect.",
+      media: /* @__PURE__ */ e(Qt, { name: o })
+    },
+    {
+      eyebrow: "Tip · 1 of 2",
+      title: "Click a component",
+      blurb: "Click any box to open its details — the technology it uses, its source files, and a full description.",
+      media: /* @__PURE__ */ e(Kt, {})
+    },
+    {
+      eyebrow: "Tip · 2 of 2",
+      title: "Drill down for more",
+      blurb: "Boxes with a “Drill down” button go deeper — double-click one to open its sub-diagram and explore the next level.",
+      media: /* @__PURE__ */ e(Zt, {})
+    }
+  ], h = c.length - 1, d = C(() => {
+    i((f) => f >= c.length - 1 ? (a(), f) : f + 1);
+  }, [c.length, a]), u = C(() => i((f) => Math.max(0, f - 1)), []);
+  B(() => {
+    if (!t) return;
+    const f = (x) => {
+      x.key === "Escape" ? a() : x.key === "ArrowRight" ? d() : x.key === "ArrowLeft" && u();
+    };
+    return window.addEventListener("keydown", f), () => window.removeEventListener("keydown", f);
+  }, [t, a, d, u]);
+  const g = c[l] ?? c[0];
+  return !t || !g ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      className: "absolute inset-0 z-50 flex items-center justify-center",
+      style: { backgroundColor: "rgba(5, 8, 15, 0.72)" },
+      onClick: a,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "onboarding-title",
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: "animate-fade-up flex w-[min(640px,calc(100vw-32px))] flex-col border shadow-lg backdrop-blur-md",
+          style: {
+            borderColor: "var(--border-default)",
+            backgroundColor: "rgba(10, 15, 26, 0.94)"
+          },
+          onClick: (f) => f.stopPropagation(),
+          children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: "flex items-start justify-between border-b px-6 py-4",
+                style: { borderColor: "var(--border-default)" },
+                children: [
+                  /* @__PURE__ */ r("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "text-[9px] tracking-[0.32em] uppercase",
+                        style: {
+                          color: "var(--text-muted)",
+                          fontFamily: "var(--font-mono)"
+                        },
+                        children: g.eyebrow
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "div",
+                      {
+                        id: "onboarding-title",
+                        className: "mt-1 truncate text-[18px] leading-tight font-semibold tracking-tight",
+                        style: {
+                          color: "var(--text-primary)",
+                          fontFamily: "var(--font-sans)"
+                        },
+                        children: g.title
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: a,
+                      "aria-label": "Skip tour",
+                      className: "ml-4 flex h-7 w-7 shrink-0 items-center justify-center border transition-colors hover:text-white",
+                      style: {
+                        borderColor: "var(--border-default)",
+                        color: "var(--text-muted)",
+                        backgroundColor: "transparent"
+                      },
+                      children: /* @__PURE__ */ r(
+                        "svg",
+                        {
+                          width: "12",
+                          height: "12",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: [
+                            /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                            /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "border-b",
+                style: {
+                  borderColor: "var(--border-default)",
+                  backgroundColor: "var(--bg-deep)"
+                },
+                children: g.media
+              }
+            ),
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: "px-6 py-4 text-[13px] leading-relaxed",
+                style: {
+                  color: "var(--text-secondary)",
+                  fontFamily: "var(--font-sans)"
+                },
+                children: g.blurb
+              }
+            ),
+            /* @__PURE__ */ r(
+              "div",
+              {
+                className: "flex items-center justify-between border-t px-6 py-4",
+                style: { borderColor: "var(--border-default)" },
+                children: [
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: c.map((f, x) => /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "h-1.5 rounded-full transition-all",
+                      style: {
+                        width: x === l ? "18px" : "6px",
+                        backgroundColor: x === l ? "var(--accent-cyan)" : "var(--border-default)"
+                      }
+                    },
+                    f.title
+                  )) }),
+                  /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+                    l > 0 && /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: u,
+                        className: "border px-3 py-1.5 text-[10px] tracking-[0.2em] uppercase transition-colors hover:text-white",
+                        style: {
+                          borderColor: "var(--border-default)",
+                          color: "var(--text-muted)",
+                          fontFamily: "var(--font-mono)",
+                          backgroundColor: "transparent"
+                        },
+                        children: "Back"
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: d,
+                        className: "border px-4 py-1.5 text-[10px] tracking-[0.2em] uppercase transition-colors hover:text-white",
+                        style: {
+                          borderColor: "var(--accent-cyan)",
+                          color: "var(--accent-cyan)",
+                          fontFamily: "var(--font-mono)",
+                          backgroundColor: "transparent"
+                        },
+                        children: l === h ? "Got it" : "Next"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Qt({ name: t }) {
+  return /* @__PURE__ */ r("div", { className: "ob-stage blueprint-grid flex flex-col items-center justify-center text-center", children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "text-[9px] tracking-[0.4em] uppercase",
+        style: { color: "var(--accent-cyan)", fontFamily: "var(--font-mono)" },
+        children: "Architecture"
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "mt-2 px-6 text-[26px] leading-tight",
+        style: { color: "var(--text-primary)", fontFamily: "var(--font-display)" },
+        children: t
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "mt-3 text-[10px] tracking-[0.18em] uppercase",
+        style: { color: "var(--text-muted)", fontFamily: "var(--font-mono)" },
+        children: "Interactive architecture diagrams"
+      }
+    )
+  ] });
+}
+function Jt() {
+  const [t, a] = L(!0), o = C(() => a(!0), []), n = C(() => a(!1), []);
+  return { open: t, openWizard: o, closeWizard: n };
+}
+let ie = null;
+function er({ diagramId: t, showDiagramList: a = !0 }) {
+  const o = U(), n = Ct(), [l, i] = L(null), s = Jt();
   B(() => {
     t || (window.location.hash = `#/diagram/${o.summary.topDiagram}`);
   }, [t, o.summary.topDiagram]), B(() => {
-    var d;
-    if (!t || t === le) return;
-    le = t;
-    const u = (d = o.summary.diagrams.find(
-      (h) => h.slug === t
-    )) == null ? void 0 : d.level;
-    n("diagram.viewed", typeof u == "number" ? { level: u } : {});
+    var u;
+    if (!t || t === ie) return;
+    ie = t;
+    const d = (u = o.summary.diagrams.find(
+      (g) => g.slug === t
+    )) == null ? void 0 : u.level;
+    n("diagram.viewed", typeof d == "number" ? { level: d } : {});
   }, [t, o.summary.diagrams, n]);
-  const s = M(
-    (u) => {
-      i(u), u && n("node.inspected");
+  const c = C(
+    (d) => {
+      i(d), d && n("node.inspected");
     },
     [n]
-  ), c = M((u) => {
-    i(null), window.location.hash = `#/diagram/${u}`;
+  ), h = C((d) => {
+    i(null), window.location.hash = `#/diagram/${d}`;
   }, []);
   return /* @__PURE__ */ r(
     "div",
@@ -3270,37 +3651,85 @@ function Ut({ diagramId: t, showDiagramList: a = !0 }) {
       style: { backgroundColor: "var(--bg-deep)" },
       children: [
         t ? /* @__PURE__ */ e(
-          St,
+          Wt,
           {
             diagramId: t,
-            onSelectNode: s,
-            onDrillIn: c
+            onSelectNode: c,
+            onDrillIn: h
           },
           t
-        ) : /* @__PURE__ */ e(Yt, { message: "Opening top diagram…" }),
+        ) : /* @__PURE__ */ e(rr, { message: "Opening top diagram…" }),
         a && /* @__PURE__ */ e(
-          At,
+          Ft,
           {
             summary: o.summary,
             currentDiagramId: t,
-            onSelect: c,
-            onGoHome: () => c(o.summary.topDiagram)
+            onSelect: h,
+            onGoHome: () => h(o.summary.topDiagram)
           }
         ),
-        /* @__PURE__ */ e(_t, {}),
+        /* @__PURE__ */ e(Yt, {}),
         l && /* @__PURE__ */ e(
-          $t,
+          Vt,
           {
             nodeId: l,
             onClose: () => i(null)
           },
           l
+        ),
+        /* @__PURE__ */ e(tr, { onClick: s.openWizard }),
+        /* @__PURE__ */ e(
+          qt,
+          {
+            open: s.open,
+            onClose: s.closeWizard,
+            architectureName: o.summary.name,
+            architectureDescription: o.summary.description
+          }
         )
       ]
     }
   );
 }
-function Yt({ message: t }) {
+function tr({ onClick: t }) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      "aria-label": "Show getting started tour",
+      title: "Getting started",
+      className: "absolute right-4 z-10 flex h-8 w-8 items-center justify-center border shadow-lg backdrop-blur-md transition-colors hover:text-white",
+      style: {
+        // Sit just above the @xyflow Controls cluster (bottom-right) so the
+        // help affordance reads as part of the canvas controls.
+        bottom: "132px",
+        borderColor: "var(--border-default)",
+        backgroundColor: "rgba(10, 15, 26, 0.85)",
+        color: "var(--text-muted)"
+      },
+      children: /* @__PURE__ */ r(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ e("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+            /* @__PURE__ */ e("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+          ]
+        }
+      )
+    }
+  );
+}
+function rr({ message: t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -3313,22 +3742,22 @@ function Yt({ message: t }) {
     }
   );
 }
-function Xt() {
-  const [t, a] = C(() => window.location.hash);
+function ar() {
+  const [t, a] = L(() => window.location.hash);
   return B(() => {
     const o = () => a(window.location.hash);
     return window.addEventListener("hashchange", o), () => window.removeEventListener("hashchange", o);
   }, []), t;
 }
-function Kt(t) {
+function or(t) {
   if (t === "#/style-guide") return { view: "style-guide", diagramId: null };
   const a = t.match(/^#\/diagram\/([^/?#]+)/);
   return a ? { view: "architecture", diagramId: decodeURIComponent(a[1]) } : { view: "architecture", diagramId: null };
 }
-function ar({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
-  const n = Xt(), l = Kt(n);
-  return l.view === "style-guide" ? /* @__PURE__ */ e(Ve, {}) : /* @__PURE__ */ e(wt, { dataSource: t, reloadKey: a, children: /* @__PURE__ */ e(
-    Ut,
+function ur({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
+  const n = ar(), l = or(n);
+  return l.view === "style-guide" ? /* @__PURE__ */ e(_e, {}) : /* @__PURE__ */ e(Lt, { dataSource: t, reloadKey: a, children: /* @__PURE__ */ e(
+    er,
     {
       diagramId: l.diagramId,
       showDiagramList: o
@@ -3336,6 +3765,6 @@ function ar({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
   ) });
 }
 export {
-  ar as App
+  ur as App
 };
 //# sourceMappingURL=App.js.map