@tecture/web 0.1.0 → 0.2.0

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 { jsxs as r, jsx as e, Fragment as T } from "react/jsx-runtime";
+import { useMemo as A, createContext as de, memo as Ne, useContext as j, useCallback as C, useState as w, useEffect as S, useRef as U, useId as Ce, isValidElement as Le } from "react";
+import { Position as k, useNodeId as me, useStore as ue, NodeResizer as Me, Handle as q, Panel as Se, useInternalNode as Q, getSmoothStepPath as Be, EdgeLabelRenderer as De, MarkerType as We, ReactFlowProvider as ze, useNodesState as Ee, useEdgesState as Ae, useReactFlow as Fe, ReactFlow as Ie, Background as Pe, BackgroundVariant as He, Controls as Te, MiniMap as je } from "@xyflow/react";
+import Re from "elkjs/lib/elk.bundled.js";
+import { driftForNode as $e, buildSourceUrl as Oe, isDeepDivable as J, buildDeepDivePrompt as Ge } from "@tecture/shared";
+import Ve from "markdown-to-jsx";
+import { createPortal as _e } from "react-dom";
+const $ = {
   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 = [
+}, Ue = [
   { 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 F({ 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 ee({ 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 Ke() {
   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(F, { 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: $.backgrounds.map((t) => /* @__PURE__ */ e(ee, { ...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: $.borders.map((t) => /* @__PURE__ */ e(ee, { ...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: $.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: $.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: Ue.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(F, { 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(F, { 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(F, { 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(F, { 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(F, { 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(F, { 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 Ye = {
   system: {
     label: "System",
     bg: "#0d1320",
@@ -1182,7 +1182,7 @@ const Oe = {
     ],
     accentGlow: "rgba(161,161,170,0.08)"
   }
-}, Q = {
+}, te = {
   label: "Component",
   bg: "#0a0f1a",
   bgHover: "#0f1628",
@@ -1195,91 +1195,91 @@ const Oe = {
   ],
   accentGlow: "rgba(100,116,139,0.08)"
 };
-function O(t) {
-  return t ? Oe[t] ?? Q : Q;
+function Y(t) {
+  return t ? Ye[t] ?? te : te;
 }
-function I(t) {
+function O(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 Xe(t, a) {
+  const o = O(t), n = O(a), l = Math.abs(o.x - n.x), s = Math.abs(o.y - n.y);
+  return l > s ? 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 re(t, a, o) {
+  const n = O(t), l = O(a), s = Math.abs(n.x - l.x), i = 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];
+  s > i ? c = n.x > l.x ? k.Left : k.Right : c = n.y > l.y ? k.Top : k.Bottom;
+  const [m, d] = Ze(t, c, o);
+  return [m, 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 Ze(t, a, o) {
+  var d, h, p;
+  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.y + (((g = t.measured) == null ? void 0 : g.height) ?? 0) / 2
+      t.internals.positionAbsolute.y + (((p = t.measured) == null ? void 0 : p.height) ?? 0) / 2
     ];
-  let i = l.width / 2, s = l.height / 2;
+  let s = l.width / 2, i = l.height / 2;
   switch (a) {
-    case y.Left:
-      i = 0;
+    case k.Left:
+      s = 0;
       break;
-    case y.Right:
-      i = l.width;
+    case k.Right:
+      s = l.width;
       break;
-    case y.Top:
-      s = 0;
+    case k.Top:
+      i = 0;
       break;
-    case y.Bottom:
-      s = l.height;
+    case k.Bottom:
+      i = 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 + s, m = t.internals.positionAbsolute.y + l.y + i;
+  return [c, m];
 }
-function Ye(t, a) {
-  const [o, n, l] = J(t, a, "source"), [i, s, c] = J(a, t, "target");
-  return { sx: o, sy: n, tx: i, ty: s, sourcePos: l, targetPos: c };
+function qe(t, a) {
+  const [o, n, l] = re(t, a, "source"), [s, i, c] = re(a, t, "target");
+  return { sx: o, sy: n, tx: s, ty: i, sourcePos: l, targetPos: c };
 }
-function Xe() {
-  const t = se(), a = ce((o) => {
+function Qe() {
+  const t = me(), a = ue((o) => {
     if (!t) return /* @__PURE__ */ new Set();
     const n = o.nodeLookup.get(t);
     if (!n) return /* @__PURE__ */ new Set();
     const l = /* @__PURE__ */ new Set();
-    for (const i of o.edges) {
-      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));
+    for (const s of o.edges) {
+      let i = null;
+      if (s.source === t ? i = s.target : s.target === t && (i = s.source), !i) continue;
+      const c = o.nodeLookup.get(i);
+      c && l.add(Xe(n, c));
     }
     return l;
   });
-  return E(() => a, [a]);
+  return A(() => 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 he = de(null), pe = [
+  { 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) => {
-    s.stopPropagation(), o.subDiagramId && (window.location.hash = `#/diagram/${o.subDiagramId}`);
+function Je({ data: t, selected: a }) {
+  const o = t, n = Y(o.nodeType), l = Qe(), s = (i) => {
+    i.stopPropagation(), o.subDiagramId && (window.location.hash = `#/diagram/${o.subDiagramId}`);
   };
   return o.isContainer || o.hasChildren ? /* @__PURE__ */ e(
-    qe,
+    tt,
     {
       d: o,
       style: n,
       selected: a ?? !1,
       activeSides: l,
-      onDrillDown: i
+      onDrillDown: s
     }
   ) : /* @__PURE__ */ r(
     "div",
@@ -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(fe, { accent: n.accent }),
+        pe.map(({ position: i, prefix: c }) => {
+          const m = l.has(i);
           return /* @__PURE__ */ e(
-            he,
+            ge,
             {
-              position: s,
+              position: i,
               prefix: c,
               style: n,
-              isActive: u
+              isActive: m
             },
             c
           );
@@ -1318,14 +1318,14 @@ function Ke({ data: t, selected: a }) {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             className: "shrink-0",
-            children: n.iconPaths.map((s, c) => /* @__PURE__ */ e(
+            children: n.iconPaths.map((i, c) => /* @__PURE__ */ e(
               "path",
               {
-                d: s.d,
-                fill: s.fill ?? "none",
-                stroke: s.stroke ?? "none",
-                strokeWidth: s.strokeWidth ?? 0,
-                opacity: s.opacity ?? 1
+                d: i.d,
+                fill: i.fill ?? "none",
+                stroke: i.stroke ?? "none",
+                strokeWidth: i.strokeWidth ?? 0,
+                opacity: i.opacity ?? 1
               },
               c
             ))
@@ -1354,7 +1354,7 @@ function Ke({ data: t, selected: a }) {
         o.hasSubDiagram && /* @__PURE__ */ r(
           "div",
           {
-            onClick: i,
+            onClick: s,
             className: "mx-auto mt-2 flex w-fit cursor-pointer items-center gap-1 px-2.5 py-0.5 text-[10px] font-medium transition-opacity hover:opacity-80",
             style: {
               background: `${n.accent}10`,
@@ -1365,7 +1365,7 @@ function Ke({ data: t, selected: a }) {
             },
             children: [
               /* @__PURE__ */ e("span", { children: "Drill down" }),
-              /* @__PURE__ */ e(pe, {})
+              /* @__PURE__ */ e(be, {})
             ]
           }
         )
@@ -1373,24 +1373,24 @@ 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(() => {
-    s == null || s.notifyLayoutChanged();
-  }, [s]), u = ce(
-    M(
+const ae = 16, et = 48;
+function tt({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
+  const s = me(), i = j(he), c = C(() => {
+    i == null || i.notifyLayoutChanged();
+  }, [i]), m = ue(
+    C(
       (d) => {
-        var f, x, w, k;
-        let h = 200, g = Ze + 40;
-        if (!i) return { minWidth: h, 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);
+        var b, f, y, N;
+        let h = 200, p = et + 40;
+        if (!s) return { minWidth: h, minHeight: p };
+        for (const u of d.nodeLookup.values()) {
+          if (u.parentId !== s) continue;
+          const g = ((b = u.measured) == null ? void 0 : b.width) ?? 220, L = ((f = u.measured) == null ? void 0 : f.height) ?? 80, x = (((y = u.position) == null ? void 0 : y.x) ?? 0) + g + ae, v = (((N = u.position) == null ? void 0 : N.y) ?? 0) + L + ae;
+          x > h && (h = x), v > p && (p = v);
         }
-        return { minWidth: h, minHeight: g };
+        return { minWidth: h, minHeight: p };
       },
-      [i]
+      [s]
     ),
     (d, h) => d.minWidth === h.minWidth && d.minHeight === h.minHeight
   );
@@ -1409,11 +1409,11 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
       },
       children: [
         /* @__PURE__ */ e(
-          we,
+          Me,
           {
             isVisible: o,
-            minWidth: u.minWidth,
-            minHeight: u.minHeight,
+            minWidth: m.minWidth,
+            minHeight: m.minHeight,
             onResizeEnd: c,
             lineStyle: {
               borderColor: `${a.accent}55`,
@@ -1429,16 +1429,16 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
             }
           }
         ),
-        /* @__PURE__ */ e(ue, { accent: a.accent }),
-        me.map(({ position: d, prefix: h }) => {
-          const g = n.has(d);
+        /* @__PURE__ */ e(fe, { accent: a.accent }),
+        pe.map(({ position: d, prefix: h }) => {
+          const p = n.has(d);
           return /* @__PURE__ */ e(
-            he,
+            ge,
             {
               position: d,
               prefix: h,
               style: a,
-              isActive: g
+              isActive: p
             },
             h
           );
@@ -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(be, {})
                   ]
                 }
               )
@@ -1522,8 +1522,8 @@ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
     }
   );
 }
-function ue({ accent: t }) {
-  return /* @__PURE__ */ r(H, { children: [
+function fe({ accent: t }) {
+  return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e(
       "svg",
       {
@@ -1564,7 +1564,7 @@ function ue({ accent: t }) {
     )
   ] });
 }
-function he({
+function ge({
   position: t,
   prefix: a,
   style: o,
@@ -1582,7 +1582,7 @@ function he({
   };
   return /* @__PURE__ */ r("span", { children: [
     /* @__PURE__ */ e(
-      X,
+      q,
       {
         type: "source",
         position: t,
@@ -1592,7 +1592,7 @@ function he({
       }
     ),
     /* @__PURE__ */ e(
-      X,
+      q,
       {
         type: "target",
         position: t,
@@ -1603,7 +1603,7 @@ function he({
     )
   ] });
 }
-function pe() {
+function be() {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -1619,33 +1619,33 @@ function pe() {
     }
   );
 }
-const Qe = ye(Ke), Je = {
+const rt = Ne(Je), at = {
   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 = {
+}, oe = {
   color: "#22d3ee",
   dashed: !1,
   animated: !1,
   label: "Connection"
 };
-function ge(t) {
-  return t ? Je[t] ?? te : te;
+function xe(t) {
+  return t ? at[t] ?? oe : oe;
 }
-function et({ diagram: t }) {
-  const [a, o] = C(!1), { nodeTypes: n, edgeTypes: l } = E(() => {
-    var c, u;
-    const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
+function ot({ diagram: t }) {
+  const [a, o] = w(!1), { nodeTypes: n, edgeTypes: l } = A(() => {
+    var c, m;
+    const s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set();
     for (const d of t.nodes)
-      typeof ((c = d.meta) == null ? void 0 : c.type) == "string" && i.add(d.meta.type);
+      typeof ((c = d.meta) == null ? void 0 : c.type) == "string" && s.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);
-    return { nodeTypes: [...i].sort(), edgeTypes: [...s].sort() };
+      typeof ((m = d.meta) == null ? void 0 : m.type) == "string" && i.add(d.meta.type);
+    return { nodeTypes: [...s].sort(), edgeTypes: [...i].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(Se, { position: "top-right", className: "!m-3", children: /* @__PURE__ */ r(
     "div",
     {
       className: "flex flex-col border shadow-lg backdrop-blur-md",
@@ -1660,14 +1660,14 @@ function et({ diagram: t }) {
           "button",
           {
             type: "button",
-            onClick: () => o((i) => !i),
+            onClick: () => o((s) => !s),
             className: "flex items-center gap-2 px-3 py-1.5 text-[10px] tracking-[0.2em] uppercase transition-colors hover:text-white",
             style: { color: "var(--text-muted, #94a3b8)" },
             "aria-expanded": a,
             children: [
-              /* @__PURE__ */ e(ot, {}),
+              /* @__PURE__ */ e(st, {}),
               /* @__PURE__ */ e("span", { children: "Legend" }),
-              /* @__PURE__ */ e(nt, { open: a })
+              /* @__PURE__ */ e(ct, { 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(ne, { title: "Nodes", children: n.map((s) => /* @__PURE__ */ e(nt, { type: s, style: Y(s) }, s)) }),
+              l.length > 0 && /* @__PURE__ */ e(ne, { title: "Edges", children: l.map((s) => /* @__PURE__ */ e(lt, { style: xe(s) }, s)) })
             ]
           }
         )
@@ -1686,7 +1686,7 @@ function et({ diagram: t }) {
     }
   ) });
 }
-function re({
+function ne({
   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 nt({ 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(it, { 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 lt({ 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 it({ p: t }) {
   return /* @__PURE__ */ e(
     "path",
     {
@@ -1774,7 +1774,7 @@ function at({ p: t }) {
     }
   );
 }
-function ot() {
+function st() {
   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 ct({ open: t }) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -1802,84 +1802,84 @@ function nt({ open: t }) {
     }
   );
 }
-function lt({
+function dt({
   id: t,
   source: a,
   target: o,
   markerEnd: n,
   style: l,
-  label: i,
-  labelStyle: s,
+  label: s,
+  labelStyle: i,
   labelBgStyle: c,
-  labelBgPadding: u,
+  labelBgPadding: m,
   labelBgBorderRadius: d,
   animated: h
 }) {
-  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(
-    g,
-    f
-  ), [N, v, L] = Le({
-    sourceX: x,
-    sourceY: w,
-    sourcePosition: p,
-    targetPosition: b,
-    targetX: k,
-    targetY: m,
+  const p = Q(a), b = Q(o);
+  if (!p || !b) return null;
+  const { sx: f, sy: y, tx: N, ty: u, sourcePos: g, targetPos: L } = qe(
+    p,
+    b
+  ), [x, v, M] = Be({
+    sourceX: f,
+    sourceY: y,
+    sourcePosition: g,
+    targetPosition: L,
+    targetX: N,
+    targetY: u,
     borderRadius: 8
   });
-  return /* @__PURE__ */ r(H, { children: [
+  return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e(
       "path",
       {
         id: t,
         className: `react-flow__edge-path${h ? " react-flow__edge-path--animated" : ""}`,
-        d: N,
+        d: x,
         markerEnd: n,
         style: l
       }
     ),
-    i && /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(
       "div",
       {
         style: {
           position: "absolute",
-          transform: `translate(-50%, -50%) translate(${v}px, ${L}px)`,
+          transform: `translate(-50%, -50%) translate(${v}px, ${M}px)`,
           pointerEvents: "all",
           ...c ? {
-            background: it(c),
+            background: mt(c),
             borderRadius: d ?? 4,
-            padding: u ? `${u[1]}px ${u[0]}px` : "4px 6px"
+            padding: m ? `${m[1]}px ${m[0]}px` : "4px 6px"
           } : {}
         },
-        children: /* @__PURE__ */ e("span", { style: s, children: i })
+        children: /* @__PURE__ */ e("span", { style: i, children: s })
       }
     ) })
   ] });
 }
-function it(t) {
+function mt(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 s = l.length === 3 ? l.split("").map((d) => d + d).join("") : l, i = parseInt(s.slice(0, 2), 16), c = parseInt(s.slice(2, 4), 16), m = parseInt(s.slice(4, 6), 16);
+  return `rgba(${i}, ${c}, ${m}, ${n})`;
 }
-function st(t) {
+function ut(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) => ht(n, o.has(n.id))),
+    edges: t.edges.filter((n) => a.has(n.source) && a.has(n.target)).map(pt)
   };
 }
-function ct(t, a) {
-  var i, s, c;
-  const o = !!((i = t.meta) != null && i.isContainer) || a, n = {
+function ht(t, a) {
+  var s, i, c;
+  const o = !!((s = t.meta) != null && s.isContainer) || a, n = {
     label: t.label,
-    nodeType: (s = t.meta) == null ? void 0 : s.type,
+    nodeType: (i = t.meta) == null ? void 0 : i.type,
     technology: typeof ((c = t.meta) == null ? void 0 : c.technology) == "string" ? t.meta.technology : void 0,
     hasSubDiagram: !!t.subDiagramId,
     subDiagramId: t.subDiagramId ?? void 0,
@@ -1893,9 +1893,9 @@ function ct(t, a) {
   };
   return t.parentId && (l.parentId = t.parentId, l.extent = "parent"), l;
 }
-function dt(t) {
+function pt(t) {
   var n;
-  const a = ge((n = t.meta) == null ? void 0 : n.type), o = { strokeWidth: 1.5, stroke: a.color };
+  const a = xe((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,73 +1925,73 @@ 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 ft = new Re(), le = 220, ie = 80, gt = "[top=48,left=16,bottom=16,right=16]";
+function bt(t) {
   return t === "LR" ? "RIGHT" : "DOWN";
 }
-async function pt(t, a, o, n) {
+async function xt(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);
+  for (const u of t) {
+    const g = u.parentId ?? void 0, L = l.get(g) ?? [];
+    L.push(u), l.set(g, L);
   }
-  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 },
-    children: (l.get(m.id) ?? []).map(s)
-  } : { id: m.id, width: ae, height: oe }, c = l.get(void 0) ?? [], u = {
+  const s = (u) => {
+    var g;
+    return (((g = l.get(u)) == null ? void 0 : g.length) ?? 0) > 0;
+  }, i = (u) => s(u.id) ? {
+    id: u.id,
+    layoutOptions: { "elk.padding": gt },
+    children: (l.get(u.id) ?? []).map(i)
+  } : { id: u.id, width: le, height: ie }, c = l.get(void 0) ?? [], m = {
     id: "root",
     layoutOptions: {
       "elk.algorithm": "layered",
-      "elk.direction": ht(o),
+      "elk.direction": bt(o),
       "elk.edgeRouting": "ORTHOGONAL",
       "elk.spacing.nodeNode": "80",
       "elk.layered.spacing.nodeNodeBetweenLayers": "120",
       "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
       "elk.hierarchyHandling": "INCLUDE_CHILDREN"
     },
-    children: c.map(s),
-    edges: a.map((m) => ({
-      id: m.id,
-      sources: [m.source],
-      targets: [m.target]
+    children: c.map(i),
+    edges: a.map((u) => ({
+      id: u.id,
+      sources: [u.source],
+      targets: [u.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 ft.layout(m), h = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), b = (u) => {
+    u.id !== "root" && (h.set(u.id, { x: u.x ?? 0, y: u.y ?? 0 }), s(u.id) && p.set(u.id, {
+      width: u.width ?? le,
+      height: u.height ?? ie
     }));
-    for (const p of m.children ?? []) f(p);
+    for (const g of u.children ?? []) b(g);
   };
-  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(), y = [], N = (u) => {
+    if (f.has(u.id)) return;
+    f.add(u.id);
+    const g = n == null ? void 0 : n.nodes[u.id], L = g ? { x: g.x, y: g.y } : h.get(u.id) ?? { x: 0, y: 0 }, x = { ...u, position: L }, v = p.get(u.id), M = (g == null ? void 0 : g.width) ?? (v == null ? void 0 : v.width), W = (g == null ? void 0 : g.height) ?? (v == null ? void 0 : v.height);
+    M !== void 0 && W !== void 0 && (x.style = { ...u.style ?? {}, width: M, height: W }), y.push(x);
+    for (const I of l.get(u.id) ?? []) N(I);
   };
-  for (const m of c) k(m);
-  for (const m of t) x.has(m.id) || k(m);
-  return w;
+  for (const u of c) N(u);
+  for (const u of t) f.has(u.id) || N(u);
+  return y;
 }
-const gt = {
+const vt = {
   summary: "Reading manifest",
   diagrams: "Loading diagrams",
   descriptions: "Loading node details"
-}, ft = 150;
-function xt({ state: t }) {
-  const [a, o] = C(!1);
-  return B(() => {
+}, yt = 150;
+function kt({ state: t }) {
+  const [a, o] = w(!1);
+  return S(() => {
     if (t.status === "error") {
       o(!0);
       return;
     }
-    const n = setTimeout(() => o(!0), ft);
+    const n = setTimeout(() => o(!0), yt);
     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(Nt, { message: t.message }) : /* @__PURE__ */ e(wt, { state: t })
         }
       )
     }
@@ -2021,11 +2021,11 @@ function xt({ state: t }) {
     }
   );
 }
-function bt({
+function wt({
   state: t
 }) {
-  const { phase: a, done: o, total: n, archName: l } = t, i = n > 0 ? Math.min(1, o / n) : 0, s = a !== "summary";
-  return /* @__PURE__ */ r(H, { children: [
+  const { phase: a, done: o, total: n, archName: l } = t, s = n > 0 ? Math.min(1, o / n) : 0, i = a !== "summary";
+  return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -2048,8 +2048,8 @@ 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] }),
-          s && /* @__PURE__ */ r("span", { style: { color: "var(--text-muted)" }, children: [
+          /* @__PURE__ */ e("span", { children: vt[a] }),
+          i && /* @__PURE__ */ r("span", { style: { color: "var(--text-muted)" }, children: [
             o,
             " / ",
             n
@@ -2076,7 +2076,7 @@ function bt({
           {
             className: "h-full",
             style: {
-              width: `${i * 100}%`,
+              width: `${s * 100}%`,
               backgroundColor: "var(--accent-cyan)",
               transition: "width 200ms ease-out"
             }
@@ -2086,8 +2086,8 @@ function bt({
     )
   ] });
 }
-function vt({ message: t }) {
-  return /* @__PURE__ */ r(H, { children: [
+function Nt({ message: t }) {
+  return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -2129,169 +2129,172 @@ function vt({ message: t }) {
     )
   ] });
 }
-const T = ie(null);
-function _() {
-  const t = P(T);
+const R = de(null);
+function V() {
+  const t = j(R);
   if (!t)
     throw new Error(
       "useArchitectureBundle must be used inside ArchitectureBundleProvider"
     );
   return t.bundle;
 }
-function yt() {
-  const t = P(T);
+function Ct() {
+  const t = j(R);
   if (!t)
     throw new Error(
       "useSaveLayout must be used inside ArchitectureBundleProvider"
     );
   return t.saveLayout;
 }
-function kt() {
-  const t = P(T);
+function Lt() {
+  const t = j(R);
   if (!t)
     throw new Error(
       "useOpenInEditor must be used inside ArchitectureBundleProvider"
     );
   return t.openInEditor;
 }
-function Nt() {
-  const t = P(T);
+function Mt() {
+  const t = j(R);
   if (!t)
     throw new Error(
       "useReportUsage must be used inside ArchitectureBundleProvider"
     );
   return t.reportUsage;
 }
-function wt({
+function St({
   dataSource: t,
   children: a,
   reloadKey: o
 }) {
-  const [n, l] = C({
+  const [n, l] = w({
     status: "loading",
     phase: "summary",
     done: 0,
     total: 1
   });
-  B(() => {
+  S(() => {
     let h = !1;
-    return l({ status: "loading", phase: "summary", done: 0, total: 1 }), Ct({
+    return l({ status: "loading", phase: "summary", done: 0, total: 1 }), Bt({
       dataSource: t,
-      onState: (g) => {
-        h || l(g);
+      onState: (p) => {
+        h || l(p);
       },
       isCancelled: () => h
     }), () => {
       h = !0;
     };
   }, [t, o]);
-  const i = M(
-    async (h, g) => {
-      const f = await t.saveLayout(h, g);
-      l((x) => x.status !== "ready" ? x : {
+  const s = C(
+    async (h, p) => {
+      const b = await t.saveLayout(h, p);
+      l((f) => f.status !== "ready" ? f : {
         status: "ready",
         bundle: {
-          ...x.bundle,
-          layouts: { ...x.bundle.layouts, [h]: f }
+          ...f.bundle,
+          layouts: { ...f.bundle.layouts, [h]: b }
         }
       });
     },
     [t]
-  ), s = E(
+  ), i = A(
     () => t.openInEditor ? (h) => {
-      var g;
-      return (g = t.openInEditor) == null ? void 0 : g.call(t, h);
+      var p;
+      return (p = t.openInEditor) == null ? void 0 : p.call(t, h);
     } : void 0,
     [t]
-  ), c = M(
-    (h, g) => {
-      var f;
-      (f = t.reportUsage) == null || f.call(t, h, g);
+  ), c = C(
+    (h, p) => {
+      var b;
+      (b = t.reportUsage) == null || b.call(t, h, p);
     },
     [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;
+  ), m = n.status === "ready" ? n.bundle : null, d = A(() => m ? { bundle: m, saveLayout: s, openInEditor: i, reportUsage: c } : null, [m, s, i, c]);
+  return n.status !== "ready" ? /* @__PURE__ */ e(kt, { state: n }) : d ? /* @__PURE__ */ e(R.Provider, { value: d, children: a }) : null;
 }
-async function Ct({
+async function Bt({
   dataSource: t,
   onState: a,
   isCancelled: o
 }) {
   try {
     a({ status: "loading", phase: "summary", done: 0, total: 1 });
-    const n = await t.loadSummary();
+    const n = t.loadDrift ? t.loadDrift().catch(() => null) : Promise.resolve(null), l = await t.loadSummary();
     if (o()) return;
-    const l = n.diagrams.map((p) => p.slug);
+    const s = l.diagrams.map((x) => x.slug);
     let i = 0;
-    const s = l.length * 2;
+    const c = s.length * 2;
     a({
       status: "loading",
       phase: "diagrams",
       done: 0,
-      total: s,
-      archName: n.name
+      total: c,
+      archName: l.name
     });
-    const c = () => {
+    const m = () => {
       i += 1, a({
         status: "loading",
         phase: "diagrams",
         done: i,
-        total: s,
-        archName: n.name
+        total: c,
+        archName: l.name
       });
-    }, u = 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,
-          N
+    }, d = await Promise.all(
+      s.map(async (x) => {
+        const v = t.loadDiagram(x).then((P) => (o() || m(), P)), M = t.loadLayout(x).then((P) => (o() || m(), P)), [W, I] = await Promise.all([
+          v,
+          M
         ]);
-        return { slug: p, diagram: v, layout: L };
+        return { slug: x, diagram: W, layout: I };
       })
     );
     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 h = {}, p = {}, b = /* @__PURE__ */ new Set();
+    for (const { slug: x, diagram: v, layout: M } of d) {
+      h[x] = v, p[x] = M;
+      for (const W of v.nodes ?? []) b.add(W.id);
     }
-    const f = [...g];
-    let x = 0;
+    const f = [...b];
+    let y = 0;
     a({
       status: "loading",
       phase: "descriptions",
       done: 0,
       total: f.length,
-      archName: n.name
+      archName: l.name
     });
-    const w = () => {
-      x += 1, a({
+    const N = () => {
+      y += 1, a({
         status: "loading",
         phase: "descriptions",
-        done: x,
+        done: y,
         total: f.length,
-        archName: n.name
+        archName: l.name
       });
-    }, k = {}, m = /* @__PURE__ */ new Set();
+    }, u = {}, g = /* @__PURE__ */ new Set();
     if (await Promise.all(
-      f.map(async (p) => {
+      f.map(async (x) => {
         try {
-          const b = await t.loadNodeDetail(p);
-          k[p] = b;
+          const v = await t.loadNodeDetail(x);
+          u[x] = v;
         } catch {
-          m.add(p);
+          g.add(x);
         } finally {
-          o() || w();
+          o() || N();
         }
       })
     ), o()) return;
+    const L = await n;
+    if (o()) return;
     a({
       status: "ready",
       bundle: {
-        summary: n,
-        diagrams: d,
-        layouts: h,
-        nodes: k,
-        missingDescriptions: m
+        summary: l,
+        diagrams: h,
+        layouts: p,
+        nodes: u,
+        missingDescriptions: g,
+        drift: L
       }
     });
   } catch (n) {
@@ -2300,91 +2303,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 Dt = { architecture: rt }, Wt = { floating: dt };
+function zt(t) {
+  return /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ e(Ft, { ...t }) });
 }
-const Bt = (t) => ({
+const Et = (t) => ({
   version: 1,
   diagramId: t,
   updatedAt: "",
   nodes: {}
 });
-function Wt(t) {
-  var o, n, l, i;
+function At(t) {
+  var o, n, l, s;
   const a = {};
-  for (const s of t) {
+  for (const i 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;
+      x: ((o = i.position) == null ? void 0 : o.x) ?? 0,
+      y: ((n = i.position) == null ? void 0 : n.y) ?? 0
+    }, m = i.width ?? ((l = i.style) == null ? void 0 : l.width), d = i.height ?? ((s = i.style) == null ? void 0 : s.height);
+    typeof m == "number" && Number.isFinite(m) && (c.width = m), typeof d == "number" && Number.isFinite(d) && (c.height = d), a[i.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);
-  N.current = n, B(() => {
-    var Y;
-    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([]), () => {
-        S = !0;
+function Ft({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
+  const n = V(), l = Ct(), s = n.diagrams[t], [i, c, m] = Ee([]), [d, h, p] = Ae([]), [b, f] = w(!1), [y, N] = w(null), { getNodes: u } = Fe(), g = U(null), L = U(t);
+  L.current = t;
+  const x = U(n);
+  x.current = n, S(() => {
+    var Z;
+    let B = !1;
+    f(!1), N(null), a(null);
+    const z = x.current, E = z.diagrams[t];
+    if (!E)
+      return N(`Diagram "${t}" was not loaded`), c([]), h([]), () => {
+        B = !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 ke = z.layouts[t] ?? Et(t), { nodes: we, edges: X } = ut(E);
+    return xt(we, X, (Z = E.meta) == null ? void 0 : Z.direction, ke).then((_) => {
+      B || (c(_), h(X), requestAnimationFrame(() => !B && f(!0)));
+    }).catch((_) => {
+      B || N(_.message);
     }), () => {
-      S = !0, p.current && (clearTimeout(p.current), p.current = null);
+      B = !0, g.current && (clearTimeout(g.current), g.current = null);
     };
   }, [t, a, h, c]);
-  const v = M(() => {
-    const S = b.current, D = {
-      nodes: Wt(m())
+  const v = C(() => {
+    const B = L.current, z = {
+      nodes: At(u())
     };
-    l(S, D).catch((z) => {
-      console.warn("[tecture] failed to persist layout", z);
+    l(B, z).catch((E) => {
+      console.warn("[tecture] failed to persist layout", E);
     });
-  }, [m, l]), L = M(() => {
-    p.current && clearTimeout(p.current), p.current = setTimeout(() => {
-      p.current = null, v();
+  }, [u, l]), M = C(() => {
+    g.current && clearTimeout(g.current), g.current = setTimeout(() => {
+      g.current = null, v();
     }, 150);
-  }, [v]), W = E(
-    () => ({ notifyLayoutChanged: L }),
-    [L]
-  ), j = M(() => {
-    L();
-  }, [L]), fe = E(
-    () => (S, D) => {
-      a(D.id);
+  }, [v]), W = A(
+    () => ({ notifyLayoutChanged: M }),
+    [M]
+  ), I = C(() => {
+    M();
+  }, [M]), P = A(
+    () => (B, z) => {
+      a(z.id);
     },
     [a]
-  ), xe = E(
-    () => (S, D) => {
-      const z = D.data;
-      z.subDiagramId && o(z.subDiagramId);
+  ), ye = A(
+    () => (B, z) => {
+      const E = z.data;
+      E.subDiagramId && o(E.subDiagramId);
     },
     [o]
   );
-  return /* @__PURE__ */ e(de.Provider, { value: W, children: /* @__PURE__ */ r("div", { className: "relative h-full w-full", children: [
+  return /* @__PURE__ */ e(he.Provider, { value: W, children: /* @__PURE__ */ r("div", { className: "relative h-full w-full", children: [
     /* @__PURE__ */ r(
-      Ae,
+      Ie,
       {
-        nodes: s,
+        nodes: i,
         edges: d,
-        nodeTypes: Lt,
-        edgeTypes: Mt,
-        onNodesChange: u,
-        onEdgesChange: g,
-        onNodeClick: fe,
-        onNodeDoubleClick: xe,
-        onNodeDragStop: j,
+        nodeTypes: Dt,
+        edgeTypes: Wt,
+        onNodesChange: m,
+        onEdgesChange: p,
+        onNodeClick: P,
+        onNodeDoubleClick: ye,
+        onNodeDragStop: I,
         onPaneClick: () => a(null),
         fitView: !0,
         fitViewOptions: { padding: 0.2 },
@@ -2393,12 +2396,12 @@ 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,
+            Pe,
             {
               variant: He.Lines,
               gap: 20,
@@ -2406,10 +2409,10 @@ function Dt({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
               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" }),
+          s && /* @__PURE__ */ e(ot, { diagram: s }),
           /* @__PURE__ */ e(
-            Te,
+            je,
             {
               position: "bottom-left",
               pannable: !0,
@@ -2422,10 +2425,10 @@ function Dt({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
         ]
       }
     ),
-    w && /* @__PURE__ */ e(zt, { label: `Error: ${w}` })
+    y && /* @__PURE__ */ e(It, { label: `Error: ${y}` })
   ] }) });
 }
-function zt({ label: t }) {
+function It({ label: t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -2438,13 +2441,13 @@ function zt({ label: t }) {
     }
   );
 }
-function At({
+function Pt({
   summary: t,
   currentDiagramId: a,
   onSelect: o,
   onGoHome: n
 }) {
-  const [l, i] = C(!0), s = t != null && a === t.topDiagram;
+  const [l, s] = w(!0), i = t != null && a === t.topDiagram;
   return /* @__PURE__ */ e("div", { className: "absolute top-3 left-3 z-10 w-64", children: /* @__PURE__ */ r(
     "div",
     {
@@ -2459,16 +2462,16 @@ function At({
           {
             type: "button",
             onClick: n,
-            disabled: s,
+            disabled: i,
             className: "group flex w-full flex-col items-start gap-1 px-3 pt-2.5 pb-3 text-left transition-colors disabled:cursor-default",
             style: {
               background: "transparent",
               border: "none",
               borderBottom: "1px solid var(--border-default)",
-              cursor: s ? "default" : "pointer"
+              cursor: i ? "default" : "pointer"
             },
-            title: s ? void 0 : "Return to entry diagram",
-            "aria-label": s ? "Architecture title block" : "Return to entry diagram",
+            title: i ? void 0 : "Return to entry diagram",
+            "aria-label": i ? "Architecture title block" : "Return to entry diagram",
             children: [
               /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between", children: [
                 /* @__PURE__ */ e(
@@ -2482,7 +2485,7 @@ function At({
                     children: "Architecture"
                   }
                 ),
-                !s && /* @__PURE__ */ r(
+                !i && /* @__PURE__ */ r(
                   "span",
                   {
                     className: "flex items-center gap-1 text-[9px] tracking-[0.2em] uppercase opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100",
@@ -2532,7 +2535,7 @@ function At({
           "button",
           {
             type: "button",
-            onClick: () => i((c) => !c),
+            onClick: () => s((c) => !c),
             className: "flex w-full items-center justify-between px-3 py-2 transition-colors hover:text-white",
             style: {
               color: "var(--text-muted)",
@@ -2576,7 +2579,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 +2604,7 @@ function At({
     }
   ) });
 }
-function Et({
+function Ht({
   diagram: t,
   active: a,
   isTop: o,
@@ -2677,10 +2680,184 @@ function Et({
     }
   ) });
 }
-let ne = !1;
-async function Ht() {
+const H = {
+  error: "#f87171",
+  warn: "#fbbf24",
+  info: "#38bdf8"
+}, Tt = {
+  "missing-path": "Missing paths",
+  "unverified-edge": "Unverified edges",
+  "undeclared-dependency": "Undeclared dependencies",
+  "unmapped-external": "Unmapped externals",
+  "skipped-node": "Skipped nodes",
+  "skipped-edge": "Skipped edges"
+}, jt = [
+  "missing-path",
+  "unverified-edge",
+  "undeclared-dependency",
+  "unmapped-external",
+  "skipped-node",
+  "skipped-edge"
+];
+function Rt(t) {
+  return t.summary.errors > 0 ? H.error : t.summary.warns > 0 ? H.warn : H.info;
+}
+function $t() {
+  const t = V(), [a, o] = w(!1), n = t.drift, l = A(() => {
+    if (!n) return [];
+    const i = /* @__PURE__ */ new Map();
+    for (const c of n.findings) {
+      const m = i.get(c.kind) ?? [];
+      m.push(c), i.set(c.kind, m);
+    }
+    return jt.filter((c) => i.has(c)).map((c) => ({
+      kind: c,
+      findings: i.get(c) ?? []
+    }));
+  }, [n]);
+  if (!n || n.findings.length === 0) return null;
+  const s = Rt(n);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "absolute top-3 left-1/2 z-10 flex -translate-x-1/2 flex-col items-center",
+      style: { fontFamily: "var(--font-mono)" },
+      children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            onClick: () => o((i) => !i),
+            "aria-expanded": a,
+            className: "flex items-center gap-2 border px-3 py-1.5 text-[10px] tracking-[0.2em] uppercase shadow-lg backdrop-blur-md transition-colors hover:text-white",
+            style: {
+              backgroundColor: "rgba(10, 15, 26, 0.85)",
+              borderColor: "var(--border-default)",
+              color: s
+            },
+            title: "Code-vs-architecture drift findings from the evidence script",
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "inline-block h-1.5 w-1.5 rounded-full",
+                  style: { backgroundColor: s }
+                }
+              ),
+              /* @__PURE__ */ r("span", { children: [
+                "Drift: ",
+                n.findings.length
+              ] })
+            ]
+          }
+        ),
+        a && /* @__PURE__ */ r(
+          "div",
+          {
+            className: "mt-2 flex flex-col overflow-y-auto border shadow-lg backdrop-blur-md",
+            style: {
+              width: "min(560px, calc(100vw - 24px))",
+              maxHeight: "min(480px, calc(100vh - 96px))",
+              backgroundColor: "rgba(10, 15, 26, 0.9)",
+              borderColor: "var(--border-default)"
+            },
+            children: [
+              /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "flex items-center justify-between border-b px-4 py-2 text-[10px]",
+                  style: {
+                    borderColor: "var(--border-default)",
+                    color: "var(--text-muted)"
+                  },
+                  children: [
+                    /* @__PURE__ */ r("span", { children: [
+                      "generated ",
+                      Gt(n.generatedAt),
+                      " · codegraph schema v",
+                      n.codegraphSchemaVersion
+                    ] }),
+                    /* @__PURE__ */ r("span", { children: [
+                      n.summary.errors,
+                      " err / ",
+                      n.summary.warns,
+                      " warn /",
+                      " ",
+                      n.summary.infos,
+                      " info"
+                    ] })
+                  ]
+                }
+              ),
+              n.staleIndex && /* @__PURE__ */ r(
+                "div",
+                {
+                  className: "border-b px-4 py-2 text-[11px]",
+                  style: {
+                    borderColor: "var(--border-default)",
+                    color: H.warn
+                  },
+                  children: [
+                    "Index may be stale — files changed after the last CodeGraph sync. Run ",
+                    /* @__PURE__ */ e("code", { children: "codegraph sync" }),
+                    " and re-run the evidence script."
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "flex flex-col gap-3 px-4 py-3", children: l.map(({ kind: i, findings: c }) => /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ r(
+                  "div",
+                  {
+                    className: "text-[9px] tracking-[0.25em] uppercase",
+                    style: { color: "var(--text-muted)" },
+                    children: [
+                      Tt[i],
+                      " (",
+                      c.length,
+                      ")"
+                    ]
+                  }
+                ),
+                c.map((m, d) => /* @__PURE__ */ e(Ot, { finding: m }, `${i}-${d}`))
+              ] }, i)) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function Ot({ finding: t }) {
+  var n, l;
+  const a = H[t.severity], o = t.nodeId ?? (t.edge ? `${t.edge.sourceId} → ${t.edge.targetId}` : (n = t.evidence) == null ? void 0 : n.package);
+  return /* @__PURE__ */ r("div", { className: "flex items-start gap-2 text-[11px] leading-snug", children: [
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: "mt-1 inline-block h-1.5 w-1.5 shrink-0 rounded-full",
+        style: { backgroundColor: a },
+        title: t.severity
+      }
+    ),
+    /* @__PURE__ */ r("span", { style: { color: "var(--text-primary, #e2e8f0)" }, children: [
+      o ? /* @__PURE__ */ e("span", { className: "mr-1.5", style: { color: a }, children: o }) : null,
+      t.message,
+      (l = t.evidence) != null && l.edgeKinds ? /* @__PURE__ */ r("span", { className: "ml-1.5", style: { color: "var(--text-muted)" }, children: [
+        "(",
+        Object.entries(t.evidence.edgeKinds).map(([s, i]) => `${s}:${i}`).join(", "),
+        ")"
+      ] }) : null
+    ] })
+  ] });
+}
+function Gt(t) {
+  const a = Date.parse(t);
+  return Number.isNaN(a) ? t : new Date(a).toLocaleString();
+}
+let se = !1;
+async function Vt() {
   const a = (await import("mermaid")).default;
-  return ne || (a.initialize({
+  return se || (a.initialize({
     startOnLoad: !1,
     theme: "dark",
     securityLevel: "strict",
@@ -2715,27 +2892,27 @@ async function Ht() {
       noteBorderColor: "#854d0e",
       noteTextColor: "#fef3c7"
     }
-  }), ne = !0), a;
+  }), se = !0), a;
 }
-function Pt({ chart: t }) {
-  const [a, o] = C({ status: "loading" }), [n, l] = C(!1), s = `mermaid-${ke().replace(/:/g, "")}`;
-  return B(() => {
+function _t({ chart: t }) {
+  const [a, o] = w({ status: "loading" }), [n, l] = w(!1), i = `mermaid-${Ce().replace(/:/g, "")}`;
+  return S(() => {
     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 m = await Vt();
+        await m.parse(t);
+        const { svg: d } = await m.render(i, t);
         c || o({ status: "ready", svg: d });
-      } catch (u) {
+      } catch (m) {
         if (c) return;
-        const d = u instanceof Error ? u.message : "Failed to render diagram";
+        const d = m instanceof Error ? m.message : "Failed to render diagram";
         o({ status: "error", message: d });
       }
     })(), () => {
       c = !0;
     };
-  }, [t, s]), a.status === "loading" ? /* @__PURE__ */ e(
+  }, [t, i]), a.status === "loading" ? /* @__PURE__ */ e(
     "div",
     {
       className: "mermaid-block",
@@ -2763,7 +2940,7 @@ function Pt({ chart: t }) {
       }
     ),
     /* @__PURE__ */ e("pre", { style: { margin: 0 }, children: /* @__PURE__ */ e("code", { className: "lang-mermaid", children: t }) })
-  ] }) : /* @__PURE__ */ r(H, { children: [
+  ] }) : /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ r("div", { className: "mermaid-block group relative", children: [
       /* @__PURE__ */ e(
         "button",
@@ -2809,14 +2986,14 @@ function Pt({ chart: t }) {
         }
       )
     ] }),
-    n && /* @__PURE__ */ e(Tt, { svg: a.svg, onClose: () => l(!1) })
+    n && /* @__PURE__ */ e(Ut, { svg: a.svg, onClose: () => l(!1) })
   ] });
 }
-function Tt({
+function Ut({
   svg: t,
   onClose: a
 }) {
-  return B(() => {
+  return S(() => {
     const o = (l) => {
       l.key === "Escape" && a();
     };
@@ -2825,7 +3002,7 @@ function Tt({
     return document.body.style.overflow = "hidden", () => {
       document.removeEventListener("keydown", o), document.body.style.overflow = n;
     };
-  }, [a]), $e(
+  }, [a]), _e(
     /* @__PURE__ */ e(
       "div",
       {
@@ -2933,22 +3110,22 @@ function Tt({
     document.body
   );
 }
-function Ft({ source: t }) {
+function Kt({ source: t }) {
   return /* @__PURE__ */ e("div", { className: "prose-markdown", children: /* @__PURE__ */ e(
-    je,
+    Ve,
     {
       options: {
         forceBlock: !0,
         overrides: {
-          pre: { component: Rt },
-          a: { component: It }
+          pre: { component: Xt },
+          a: { component: Yt }
         }
       },
       children: t
     }
   ) });
 }
-function It({
+function Yt({
   href: t,
   children: a,
   ...o
@@ -2964,23 +3141,23 @@ function It({
     }
   );
 }
-function Rt({ children: t }) {
-  const a = jt(t);
-  return a !== null ? /* @__PURE__ */ e(Pt, { chart: a }) : /* @__PURE__ */ e("pre", { children: t });
+function Xt({ children: t }) {
+  const a = Zt(t);
+  return a !== null ? /* @__PURE__ */ e(_t, { chart: a }) : /* @__PURE__ */ e("pre", { children: t });
 }
-function jt(t) {
+function Zt(t) {
   const a = Array.isArray(t) && t.length === 1 ? t[0] : t;
-  if (!Ne(a)) return null;
+  if (!Le(a)) return null;
   const o = a;
   if (o.type !== "code") return null;
   const n = o.props.className ?? "";
   if (!(n === "lang-mermaid" || n === "language-mermaid" || n.split(/\s+/).includes("lang-mermaid") || n.split(/\s+/).includes("language-mermaid"))) return null;
-  const i = o.props.children;
-  return typeof i == "string" ? i : Array.isArray(i) ? i.map((s) => String(s ?? "")).join("") : String(i ?? "");
+  const s = o.props.children;
+  return typeof s == "string" ? s : Array.isArray(s) ? s.map((i) => String(i ?? "")).join("") : String(s ?? "");
 }
-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 qt({ nodeId: t, onClose: a }) {
+  var h, p;
+  const o = V(), n = Lt(), l = o.nodes[t], s = o.missingDescriptions.has(t), i = o.drift && l ? $e(o.drift, l.diagramId, t) : [], c = Y((h = l == null ? void 0 : l.meta) == null ? void 0 : h.type), m = l == null ? void 0 : l.path, d = n ? void 0 : m ? Oe(o.summary.source, o.summary.sourceHost, m) : void 0;
   return /* @__PURE__ */ r(
     "aside",
     {
@@ -3003,8 +3180,8 @@ function $t({ nodeId: t, onClose: a }) {
                   "div",
                   {
                     className: "blueprint-annotation mb-1",
-                    style: { color: s.accent },
-                    children: s.label
+                    style: { color: c.accent },
+                    children: c.label
                   }
                 ),
                 /* @__PURE__ */ e(
@@ -3015,7 +3192,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(
+                (p = l == null ? void 0 : l.meta) != null && p.technology ? /* @__PURE__ */ e(
                   "div",
                   {
                     className: "mt-0.5 text-xs",
@@ -3023,21 +3200,21 @@ 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 ? /* @__PURE__ */ e(
-                    Gt,
+                m || l && J(l) ? /* @__PURE__ */ r("div", { className: "mt-1.5 flex w-full items-center gap-x-3", children: [
+                  m ? /* @__PURE__ */ e(
+                    er,
                     {
-                      path: c,
-                      accent: s.accent,
-                      onOpenInEditor: n ? () => n(c) : void 0,
-                      sourceUrl: u
+                      path: m,
+                      accent: c.accent,
+                      onOpenInEditor: n ? () => n(m) : void 0,
+                      sourceUrl: d
                     }
                   ) : null,
-                  l && Z(l) ? /* @__PURE__ */ e(
-                    Vt,
+                  l && J(l) ? /* @__PURE__ */ e(
+                    tr,
                     {
-                      prompt: Re(l),
-                      accent: s.accent,
+                      prompt: Ge(l),
+                      accent: c.accent,
                       className: "ml-auto"
                     }
                   ) : null
@@ -3079,15 +3256,65 @@ 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 && s && /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "Description not available." }),
+          l && !s && (l.description ? /* @__PURE__ */ e(Kt, { source: l.description }) : /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "No description provided." })),
+          i.length > 0 && /* @__PURE__ */ e(Jt, { findings: i })
         ] })
       ]
     }
   );
 }
-const R = "inline-flex items-center gap-1.5 text-xs transition-opacity hover:opacity-80";
-function V(t) {
+const Qt = {
+  error: "#f87171",
+  warn: "#fbbf24",
+  info: "#38bdf8"
+};
+function Jt({ findings: t }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "mt-4 border-t pt-3",
+      style: { borderColor: "var(--border-default)" },
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "mb-2 text-[9px] tracking-[0.25em] uppercase",
+            style: { color: "var(--text-muted)", fontFamily: "var(--font-mono)" },
+            children: [
+              "Evidence (",
+              t.length,
+              ")"
+            ]
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex flex-col gap-1.5", children: t.map((a, o) => /* @__PURE__ */ r(
+          "div",
+          {
+            className: "flex items-start gap-2 text-[11px] leading-snug",
+            style: { fontFamily: "var(--font-mono)" },
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "mt-1 inline-block h-1.5 w-1.5 shrink-0 rounded-full",
+                  style: {
+                    backgroundColor: Qt[a.severity]
+                  },
+                  title: a.severity
+                }
+              ),
+              /* @__PURE__ */ e("span", { style: { color: "var(--text-primary, #e2e8f0)" }, children: a.message })
+            ]
+          },
+          o
+        )) })
+      ]
+    }
+  );
+}
+const G = "inline-flex items-center gap-1.5 text-xs transition-opacity hover:opacity-80";
+function K(t) {
   return {
     color: t,
     fontFamily: "var(--font-mono)",
@@ -3097,13 +3324,13 @@ function V(t) {
     cursor: "pointer"
   };
 }
-function Gt({
+function er({
   path: t,
   accent: a,
   onOpenInEditor: o,
   sourceUrl: n
 }) {
-  const l = t.endsWith("/"), i = /* @__PURE__ */ r(
+  const l = t.endsWith("/"), s = /* @__PURE__ */ r(
     "svg",
     {
       width: "11",
@@ -3125,48 +3352,48 @@ function Gt({
     "button",
     {
       type: "button",
-      className: R,
-      style: V(a),
+      className: G,
+      style: K(a),
       onClick: o,
       title: t,
       children: [
-        i,
+        s,
         /* @__PURE__ */ e("span", { children: l ? "Open folder" : "Open file" })
       ]
     }
   ) : n ? /* @__PURE__ */ r(
     "a",
     {
-      className: R,
-      style: V(a),
+      className: G,
+      style: K(a),
       href: n,
       target: "_blank",
       rel: "noreferrer",
       title: t,
       children: [
-        i,
+        s,
         /* @__PURE__ */ e("span", { children: l ? "View folder" : "View file" })
       ]
     }
   ) : null;
 }
-function Vt({
+function tr({
   prompt: t,
   accent: a,
   className: o
 }) {
-  const [n, l] = C(!1), i = M(() => {
-    Ot(t).then((s) => {
-      s && (l(!0), window.setTimeout(() => l(!1), 1500));
+  const [n, l] = w(!1), s = C(() => {
+    rr(t).then((i) => {
+      i && (l(!0), window.setTimeout(() => l(!1), 1500));
     });
   }, [t]);
   return /* @__PURE__ */ r(
     "button",
     {
       type: "button",
-      className: o ? `${R} ${o}` : R,
-      style: V(a),
-      onClick: i,
+      className: o ? `${G} ${o}` : G,
+      style: K(a),
+      onClick: s,
       title: "Copy a prompt to enrich this component's description with a coding agent",
       children: [
         n ? /* @__PURE__ */ e(
@@ -3204,7 +3431,7 @@ function Vt({
     }
   );
 }
-async function Ot(t) {
+async function rr(t) {
   var a;
   try {
     if ((a = navigator.clipboard) != null && a.writeText)
@@ -3220,9 +3447,9 @@ async function Ot(t) {
     return !1;
   }
 }
-function _t() {
-  const [t, a] = C(!0);
-  return B(() => {
+function ar() {
+  const [t, a] = w(!0);
+  return S(() => {
     const o = setTimeout(() => a(!1), 3500);
     return () => clearTimeout(o);
   }, []), t ? /* @__PURE__ */ e(
@@ -3241,27 +3468,408 @@ function _t() {
     }
   ) : null;
 }
-let le = null;
-function Ut({ diagramId: t, showDiagramList: a = !0 }) {
-  const o = _(), n = Nt(), [l, i] = C(null);
-  B(() => {
+function ve({ 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 D({
+  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 or() {
+  return /* @__PURE__ */ r("div", { className: "ob-stage blueprint-grid", children: [
+    /* @__PURE__ */ e(
+      D,
+      {
+        label: "Service",
+        className: "ob-click-target",
+        style: { left: "6%", top: "20%", width: "34%", height: "30%" }
+      }
+    ),
+    /* @__PURE__ */ e(
+      D,
+      {
+        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(ve, { className: "ob-click-cursor" })
+  ] });
+}
+function nr() {
+  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 lr() {
+  return /* @__PURE__ */ r("div", { className: "ob-stage blueprint-grid", children: [
+    /* @__PURE__ */ r("div", { className: "ob-level-1", children: [
+      /* @__PURE__ */ e(
+        D,
+        {
+          label: "User",
+          style: { left: "34%", top: "3%", width: "24%", height: "20%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        D,
+        {
+          label: "Files",
+          style: { left: "64%", top: "40%", width: "24%", height: "24%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        D,
+        {
+          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(nr, {})
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r("div", { className: "ob-level-2", children: [
+      /* @__PURE__ */ e(
+        D,
+        {
+          label: "API",
+          style: { left: "8%", top: "14%", width: "24%", height: "26%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        D,
+        {
+          label: "Router",
+          style: { left: "40%", top: "8%", width: "24%", height: "26%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        D,
+        {
+          label: "Store",
+          style: { left: "20%", top: "56%", width: "24%", height: "26%" }
+        }
+      ),
+      /* @__PURE__ */ e(
+        D,
+        {
+          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(ve, { className: "ob-drill-cursor" })
+  ] });
+}
+function ir({
+  open: t,
+  onClose: a,
+  architectureName: o,
+  architectureDescription: n
+}) {
+  var b;
+  const [l, s] = w(0);
+  S(() => {
+    t && s(0);
+  }, [t]);
+  const i = (b = (n ?? "").split(/\n\s*\n/)[0]) == null ? void 0 : b.trim(), c = [
+    {
+      eyebrow: "Architecture",
+      title: o,
+      blurb: i || "An interactive map of this system — its components and how they connect.",
+      media: /* @__PURE__ */ e(sr, { 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(or, {})
+    },
+    {
+      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(lr, {})
+    }
+  ], m = c.length - 1, d = C(() => {
+    s((f) => f >= c.length - 1 ? (a(), f) : f + 1);
+  }, [c.length, a]), h = C(() => s((f) => Math.max(0, f - 1)), []);
+  S(() => {
+    if (!t) return;
+    const f = (y) => {
+      y.key === "Escape" ? a() : y.key === "ArrowRight" ? d() : y.key === "ArrowLeft" && h();
+    };
+    return window.addEventListener("keydown", f), () => window.removeEventListener("keydown", f);
+  }, [t, a, d, h]);
+  const p = c[l] ?? c[0];
+  return !t || !p ? 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: p.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: p.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: p.media
+              }
+            ),
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: "px-6 py-4 text-[13px] leading-relaxed",
+                style: {
+                  color: "var(--text-secondary)",
+                  fontFamily: "var(--font-sans)"
+                },
+                children: p.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, y) => /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "h-1.5 rounded-full transition-all",
+                      style: {
+                        width: y === l ? "18px" : "6px",
+                        backgroundColor: y === 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: h,
+                        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 === m ? "Got it" : "Next"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function sr({ 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 cr() {
+  const [t, a] = w(!0), o = C(() => a(!0), []), n = C(() => a(!1), []);
+  return { open: t, openWizard: o, closeWizard: n };
+}
+let ce = null;
+function dr({ diagramId: t, showDiagramList: a = !0 }) {
+  const o = V(), n = Mt(), [l, s] = w(null), i = cr();
+  S(() => {
     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 } : {});
+  }, [t, o.summary.topDiagram]), S(() => {
+    var h;
+    if (!t || t === ce) return;
+    ce = t;
+    const d = (h = o.summary.diagrams.find(
+      (p) => p.slug === t
+    )) == null ? void 0 : h.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) => {
+      s(d), d && n("node.inspected");
     },
     [n]
-  ), c = M((u) => {
-    i(null), window.location.hash = `#/diagram/${u}`;
+  ), m = C((d) => {
+    s(null), window.location.hash = `#/diagram/${d}`;
   }, []);
   return /* @__PURE__ */ r(
     "div",
@@ -3270,37 +3878,86 @@ function Ut({ diagramId: t, showDiagramList: a = !0 }) {
       style: { backgroundColor: "var(--bg-deep)" },
       children: [
         t ? /* @__PURE__ */ e(
-          St,
+          zt,
           {
             diagramId: t,
-            onSelectNode: s,
-            onDrillIn: c
+            onSelectNode: c,
+            onDrillIn: m
           },
           t
-        ) : /* @__PURE__ */ e(Yt, { message: "Opening top diagram…" }),
+        ) : /* @__PURE__ */ e(ur, { message: "Opening top diagram…" }),
         a && /* @__PURE__ */ e(
-          At,
+          Pt,
           {
             summary: o.summary,
             currentDiagramId: t,
-            onSelect: c,
-            onGoHome: () => c(o.summary.topDiagram)
+            onSelect: m,
+            onGoHome: () => m(o.summary.topDiagram)
           }
         ),
-        /* @__PURE__ */ e(_t, {}),
+        /* @__PURE__ */ e(ar, {}),
+        /* @__PURE__ */ e($t, {}),
         l && /* @__PURE__ */ e(
-          $t,
+          qt,
           {
             nodeId: l,
-            onClose: () => i(null)
+            onClose: () => s(null)
           },
           l
+        ),
+        /* @__PURE__ */ e(mr, { onClick: i.openWizard }),
+        /* @__PURE__ */ e(
+          ir,
+          {
+            open: i.open,
+            onClose: i.closeWizard,
+            architectureName: o.summary.name,
+            architectureDescription: o.summary.description
+          }
         )
       ]
     }
   );
 }
-function Yt({ message: t }) {
+function mr({ 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 ur({ message: t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -3313,22 +3970,22 @@ function Yt({ message: t }) {
     }
   );
 }
-function Xt() {
-  const [t, a] = C(() => window.location.hash);
-  return B(() => {
+function hr() {
+  const [t, a] = w(() => window.location.hash);
+  return S(() => {
     const o = () => a(window.location.hash);
     return window.addEventListener("hashchange", o), () => window.removeEventListener("hashchange", o);
   }, []), t;
 }
-function Kt(t) {
+function pr(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 wr({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
+  const n = hr(), l = pr(n);
+  return l.view === "style-guide" ? /* @__PURE__ */ e(Ke, {}) : /* @__PURE__ */ e(St, { dataSource: t, reloadKey: a, children: /* @__PURE__ */ e(
+    dr,
     {
       diagramId: l.diagramId,
       showDiagramList: o
@@ -3336,6 +3993,6 @@ function ar({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
   ) });
 }
 export {
-  ar as App
+  wr as App
 };
 //# sourceMappingURL=App.js.map