@tecture/web 0.1.1 → 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 F, createContext as se, memo as we, useContext as P, useCallback as C, useState as L, useEffect as B, useRef as V, useId as Ne, isValidElement as Ce } from "react";
-import { Position as k, useNodeId as ce, useStore as de, NodeResizer as Le, Handle as X, Panel as Me, useInternalNode as Z, getSmoothStepPath as Be, EdgeLabelRenderer as Se, MarkerType as We, ReactFlowProvider as De, useNodesState as ze, useEdgesState as Ae, useReactFlow as Ee, ReactFlow as Fe, Background as He, BackgroundVariant as Pe, Controls as Te, MiniMap as Ie } from "@xyflow/react";
-import je from "elkjs/lib/elk.bundled.js";
-import { buildSourceUrl as Re, isDeepDivable as q, buildDeepDivePrompt as $e } from "@tecture/shared";
-import Ge from "markdown-to-jsx";
-import { createPortal as Ve } from "react-dom";
-const I = {
+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 I = {
     { token: "--accent-amber-hover", value: "#fbbf24", label: "Amber Hover" },
     { token: "--accent-emerald", value: "#34d399", label: "Emerald" }
   ]
-}, Oe = [
+}, Ue = [
   { type: "System", accent: "#94a3b8", bg: "#1e293b" },
   { type: "Service", accent: "#818cf8", bg: "#1e1b4b" },
   { type: "Database", accent: "#34d399", bg: "#022c22" },
@@ -39,7 +39,7 @@ const I = {
   { type: "Storage", accent: "#2dd4bf", bg: "#042f2e" },
   { type: "External", accent: "#a1a1aa", bg: "#1c1c1e" }
 ];
-function E({ 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 E({ 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 _e() {
+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 _e() {
       )
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(E, { 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: I.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: I.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: I.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 _e() {
         ] }),
         /* @__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: I.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 _e() {
         ] }),
         /* @__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: Oe.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 _e() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(E, { 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 _e() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(E, { 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 _e() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(E, { 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 _e() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(E, { 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 _e() {
       ] })
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(E, { number: "Section 06", children: "Blueprint Decorations" }),
+      /* @__PURE__ */ e(F, { number: "Section 06", children: "Blueprint Decorations" }),
       /* @__PURE__ */ r(
         "div",
         {
@@ -951,7 +951,7 @@ function _e() {
       )
     ] }),
     /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
-      /* @__PURE__ */ e(E, { 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 _e() {
     ) })
   ] });
 }
-const Ue = {
+const Ye = {
   system: {
     label: "System",
     bg: "#0d1320",
@@ -1182,7 +1182,7 @@ const Ue = {
     ],
     accentGlow: "rgba(161,161,170,0.08)"
   }
-}, J = {
+}, te = {
   label: "Component",
   bg: "#0a0f1a",
   bgHover: "#0f1628",
@@ -1195,91 +1195,91 @@ const Ue = {
   ],
   accentGlow: "rgba(100,116,139,0.08)"
 };
-function _(t) {
-  return t ? Ue[t] ?? J : J;
+function Y(t) {
+  return t ? Ye[t] ?? te : te;
 }
-function j(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 Ye(t, a) {
-  const o = j(t), n = j(a), l = Math.abs(o.x - n.x), i = Math.abs(o.y - n.y);
-  return l > i ? o.x > n.x ? k.Left : k.Right : o.y > n.y ? k.Top : k.Bottom;
+function 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 ee(t, a, o) {
-  const n = j(t), l = j(a), i = Math.abs(n.x - l.x), s = Math.abs(n.y - l.y);
+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 ? k.Left : k.Right : c = n.y > l.y ? k.Top : k.Bottom;
-  const [h, d] = Ke(t, c, o);
-  return [h, 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 Ke(t, a, o) {
-  var d, u, g;
+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 + (((u = t.measured) == null ? void 0 : u.width) ?? 0) / 2,
-      t.internals.positionAbsolute.y + (((g = t.measured) == null ? void 0 : g.height) ?? 0) / 2
+      t.internals.positionAbsolute.x + (((h = t.measured) == null ? void 0 : h.width) ?? 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 k.Left:
-      i = 0;
+      s = 0;
       break;
     case k.Right:
-      i = l.width;
+      s = l.width;
       break;
     case k.Top:
-      s = 0;
+      i = 0;
       break;
     case k.Bottom:
-      s = l.height;
+      i = l.height;
       break;
   }
-  const c = t.internals.positionAbsolute.x + l.x + i, h = t.internals.positionAbsolute.y + l.y + s;
-  return [c, h];
+  const c = t.internals.positionAbsolute.x + l.x + s, m = t.internals.positionAbsolute.y + l.y + i;
+  return [c, m];
 }
-function Xe(t, a) {
-  const [o, n, l] = ee(t, a, "source"), [i, s, c] = ee(a, t, "target");
-  return { sx: o, sy: n, tx: i, ty: s, sourcePos: l, targetPos: c };
+function 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 Ze() {
-  const t = ce(), a = de((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(Ye(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 F(() => a, [a]);
+  return A(() => a, [a]);
 }
-const me = se(null), ue = [
+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 qe({ data: t, selected: a }) {
-  const o = t, n = _(o.nodeType), l = Ze(), i = (s) => {
-    s.stopPropagation(), o.subDiagramId && (window.location.hash = `#/diagram/${o.subDiagramId}`);
+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(
-    Je,
+    tt,
     {
       d: o,
       style: n,
       selected: a ?? !1,
       activeSides: l,
-      onDrillDown: i
+      onDrillDown: s
     }
   ) : /* @__PURE__ */ r(
     "div",
@@ -1294,16 +1294,16 @@ function qe({ data: t, selected: a }) {
         "--tw-ring-color": o.hasSubDiagram ? n.accent : void 0
       },
       children: [
-        /* @__PURE__ */ e(he, { accent: n.accent }),
-        ue.map(({ position: s, prefix: c }) => {
-          const h = l.has(s);
+        /* @__PURE__ */ e(fe, { accent: n.accent }),
+        pe.map(({ position: i, prefix: c }) => {
+          const m = l.has(i);
           return /* @__PURE__ */ e(
-            pe,
+            ge,
             {
-              position: s,
+              position: i,
               prefix: c,
               style: n,
-              isActive: h
+              isActive: m
             },
             c
           );
@@ -1318,14 +1318,14 @@ function qe({ 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 qe({ 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 qe({ data: t, selected: a }) {
             },
             children: [
               /* @__PURE__ */ e("span", { children: "Drill down" }),
-              /* @__PURE__ */ e(ge, {})
+              /* @__PURE__ */ e(be, {})
             ]
           }
         )
@@ -1373,26 +1373,26 @@ function qe({ data: t, selected: a }) {
     }
   );
 }
-const te = 16, Qe = 48;
-function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
-  const i = ce(), s = P(me), c = C(() => {
-    s == null || s.notifyLayoutChanged();
-  }, [s]), h = de(
+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 b, f, x, w;
-        let u = 200, g = Qe + 40;
-        if (!i) return { minWidth: u, minHeight: g };
-        for (const m of d.nodeLookup.values()) {
-          if (m.parentId !== i) continue;
-          const p = ((b = m.measured) == null ? void 0 : b.width) ?? 220, v = ((f = m.measured) == null ? void 0 : f.height) ?? 80, N = (((x = m.position) == null ? void 0 : x.x) ?? 0) + p + te, y = (((w = m.position) == null ? void 0 : w.y) ?? 0) + v + te;
-          N > u && (u = N), y > g && (g = y);
+        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: u, minHeight: g };
+        return { minWidth: h, minHeight: p };
       },
-      [i]
+      [s]
     ),
-    (d, u) => d.minWidth === u.minWidth && d.minHeight === u.minHeight
+    (d, h) => d.minWidth === h.minWidth && d.minHeight === h.minHeight
   );
   return /* @__PURE__ */ r(
     "div",
@@ -1409,11 +1409,11 @@ function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
       },
       children: [
         /* @__PURE__ */ e(
-          Le,
+          Me,
           {
             isVisible: o,
-            minWidth: h.minWidth,
-            minHeight: h.minHeight,
+            minWidth: m.minWidth,
+            minHeight: m.minHeight,
             onResizeEnd: c,
             lineStyle: {
               borderColor: `${a.accent}55`,
@@ -1429,18 +1429,18 @@ function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
             }
           }
         ),
-        /* @__PURE__ */ e(he, { accent: a.accent }),
-        ue.map(({ position: d, prefix: u }) => {
-          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(
-            pe,
+            ge,
             {
               position: d,
-              prefix: u,
+              prefix: h,
               style: a,
-              isActive: g
+              isActive: p
             },
-            u
+            h
           );
         }),
         /* @__PURE__ */ r(
@@ -1463,7 +1463,7 @@ function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     className: "shrink-0",
-                    children: a.iconPaths.map((d, u) => /* @__PURE__ */ e(
+                    children: a.iconPaths.map((d, h) => /* @__PURE__ */ e(
                       "path",
                       {
                         d: d.d,
@@ -1472,7 +1472,7 @@ function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
                         strokeWidth: d.strokeWidth ?? 0,
                         opacity: d.opacity ?? 1
                       },
-                      u
+                      h
                     ))
                   }
                 ),
@@ -1511,7 +1511,7 @@ function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
                   },
                   children: [
                     /* @__PURE__ */ e("span", { children: "Drill down" }),
-                    /* @__PURE__ */ e(ge, {})
+                    /* @__PURE__ */ e(be, {})
                   ]
                 }
               )
@@ -1522,8 +1522,8 @@ function Je({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
     }
   );
 }
-function he({ accent: t }) {
-  return /* @__PURE__ */ r(H, { children: [
+function fe({ accent: t }) {
+  return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e(
       "svg",
       {
@@ -1564,7 +1564,7 @@ function he({ accent: t }) {
     )
   ] });
 }
-function pe({
+function ge({
   position: t,
   prefix: a,
   style: o,
@@ -1582,7 +1582,7 @@ function pe({
   };
   return /* @__PURE__ */ r("span", { children: [
     /* @__PURE__ */ e(
-      X,
+      q,
       {
         type: "source",
         position: t,
@@ -1592,7 +1592,7 @@ function pe({
       }
     ),
     /* @__PURE__ */ e(
-      X,
+      q,
       {
         type: "target",
         position: t,
@@ -1603,7 +1603,7 @@ function pe({
     )
   ] });
 }
-function ge() {
+function be() {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -1619,33 +1619,33 @@ function ge() {
     }
   );
 }
-const et = we(qe), tt = {
+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" }
-}, re = {
+}, oe = {
   color: "#22d3ee",
   dashed: !1,
   animated: !1,
   label: "Connection"
 };
-function fe(t) {
-  return t ? tt[t] ?? re : re;
+function xe(t) {
+  return t ? at[t] ?? oe : oe;
 }
-function rt({ diagram: t }) {
-  const [a, o] = L(!1), { nodeTypes: n, edgeTypes: l } = F(() => {
-    var c, h;
-    const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
+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 ((h = d.meta) == null ? void 0 : h.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(Me, { 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 rt({ 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(lt, {}),
+              /* @__PURE__ */ e(st, {}),
               /* @__PURE__ */ e("span", { children: "Legend" }),
-              /* @__PURE__ */ e(it, { open: a })
+              /* @__PURE__ */ e(ct, { open: a })
             ]
           }
         ),
@@ -1677,8 +1677,8 @@ function rt({ 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(ae, { title: "Nodes", children: n.map((i) => /* @__PURE__ */ e(at, { type: i, style: _(i) }, i)) }),
-              l.length > 0 && /* @__PURE__ */ e(ae, { title: "Edges", children: l.map((i) => /* @__PURE__ */ e(ot, { style: fe(i) }, i)) })
+              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 rt({ diagram: t }) {
     }
   ) });
 }
-function ae({
+function ne({
   title: t,
   children: a
 }) {
@@ -1702,14 +1702,14 @@ function ae({
     /* @__PURE__ */ e("div", { className: "flex flex-col gap-1", children: a })
   ] });
 }
-function at({ 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(nt, { 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 at({ type: t, style: a }) {
     )
   ] });
 }
-function ot({ 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 ot({ style: t }) {
     /* @__PURE__ */ e("span", { style: { color: t.color }, children: t.label })
   ] });
 }
-function nt({ p: t }) {
+function it({ p: t }) {
   return /* @__PURE__ */ e(
     "path",
     {
@@ -1774,7 +1774,7 @@ function nt({ p: t }) {
     }
   );
 }
-function lt() {
+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 lt() {
     /* @__PURE__ */ e("rect", { x: "14", y: "14", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.15" })
   ] });
 }
-function it({ open: t }) {
+function ct({ open: t }) {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -1802,84 +1802,84 @@ function it({ open: t }) {
     }
   );
 }
-function st({
+function dt({
   id: t,
   source: a,
   target: o,
   markerEnd: n,
   style: l,
-  label: i,
-  labelStyle: s,
+  label: s,
+  labelStyle: i,
   labelBgStyle: c,
-  labelBgPadding: h,
+  labelBgPadding: m,
   labelBgBorderRadius: d,
-  animated: u
+  animated: h
 }) {
-  const g = Z(a), b = Z(o);
-  if (!g || !b) return null;
-  const { sx: f, sy: x, tx: w, ty: m, sourcePos: p, targetPos: v } = Xe(
-    g,
+  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
-  ), [N, y, M] = Be({
+  ), [x, v, M] = Be({
     sourceX: f,
-    sourceY: x,
-    sourcePosition: p,
-    targetPosition: v,
-    targetX: w,
-    targetY: m,
+    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${u ? " react-flow__edge-path--animated" : ""}`,
-        d: N,
+        className: `react-flow__edge-path${h ? " react-flow__edge-path--animated" : ""}`,
+        d: x,
         markerEnd: n,
         style: l
       }
     ),
-    i && /* @__PURE__ */ e(Se, { children: /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(
       "div",
       {
         style: {
           position: "absolute",
-          transform: `translate(-50%, -50%) translate(${y}px, ${M}px)`,
+          transform: `translate(-50%, -50%) translate(${v}px, ${M}px)`,
           pointerEvents: "all",
           ...c ? {
-            background: ct(c),
+            background: mt(c),
             borderRadius: d ?? 4,
-            padding: h ? `${h[1]}px ${h[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 ct(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), h = parseInt(i.slice(4, 6), 16);
-  return `rgba(${s}, ${c}, ${h}, ${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 dt(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) => mt(n, o.has(n.id))),
-    edges: t.edges.filter((n) => a.has(n.source) && a.has(n.target)).map(ut)
+    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 mt(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 mt(t, a) {
   };
   return t.parentId && (l.parentId = t.parentId, l.extent = "parent"), l;
 }
-function ut(t) {
+function pt(t) {
   var n;
-  const a = fe((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,
@@ -1925,73 +1925,73 @@ function ut(t) {
     labelBgBorderRadius: 4
   };
 }
-const ht = new je(), oe = 220, ne = 80, pt = "[top=48,left=16,bottom=16,right=16]";
-function gt(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 ft(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, v = l.get(p) ?? [];
-    v.push(m), l.set(p, v);
+  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": pt },
-    children: (l.get(m.id) ?? []).map(s)
-  } : { id: m.id, width: oe, height: ne }, c = l.get(void 0) ?? [], h = {
+  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": gt(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 ht.layout(h), u = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), b = (m) => {
-    m.id !== "root" && (u.set(m.id, { x: m.x ?? 0, y: m.y ?? 0 }), i(m.id) && g.set(m.id, {
-      width: m.width ?? oe,
-      height: m.height ?? ne
+  }, 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 ?? []) b(p);
+    for (const g of u.children ?? []) b(g);
   };
   b(d);
-  const f = /* @__PURE__ */ new Set(), x = [], w = (m) => {
-    if (f.has(m.id)) return;
-    f.add(m.id);
-    const p = n == null ? void 0 : n.nodes[m.id], v = p ? { x: p.x, y: p.y } : u.get(m.id) ?? { x: 0, y: 0 }, N = { ...m, position: v }, y = g.get(m.id), M = (p == null ? void 0 : p.width) ?? (y == null ? void 0 : y.width), D = (p == null ? void 0 : p.height) ?? (y == null ? void 0 : y.height);
-    M !== void 0 && D !== void 0 && (N.style = { ...m.style ?? {}, width: M, height: D }), x.push(N);
-    for (const $ of l.get(m.id) ?? []) w($);
+  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) w(m);
-  for (const m of t) f.has(m.id) || w(m);
-  return x;
+  for (const u of c) N(u);
+  for (const u of t) f.has(u.id) || N(u);
+  return y;
 }
-const bt = {
+const vt = {
   summary: "Reading manifest",
   diagrams: "Loading diagrams",
   descriptions: "Loading node details"
-}, xt = 150;
-function vt({ state: t }) {
-  const [a, o] = L(!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), xt);
+    const n = setTimeout(() => o(!0), yt);
     return () => clearTimeout(n);
   }, [t.status]), a ? /* @__PURE__ */ e(
     "div",
@@ -2008,7 +2008,7 @@ function vt({ state: t }) {
             borderColor: "var(--border-default)",
             backgroundColor: "rgba(10, 15, 26, 0.85)"
           },
-          children: t.status === "error" ? /* @__PURE__ */ e(kt, { message: t.message }) : /* @__PURE__ */ e(yt, { state: t })
+          children: t.status === "error" ? /* @__PURE__ */ e(Nt, { message: t.message }) : /* @__PURE__ */ e(wt, { state: t })
         }
       )
     }
@@ -2021,11 +2021,11 @@ function vt({ state: t }) {
     }
   );
 }
-function yt({
+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 yt({
         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: bt[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 yt({
           {
             className: "h-full",
             style: {
-              width: `${i * 100}%`,
+              width: `${s * 100}%`,
               backgroundColor: "var(--accent-cyan)",
               transition: "width 200ms ease-out"
             }
@@ -2086,8 +2086,8 @@ function yt({
     )
   ] });
 }
-function kt({ message: t }) {
-  return /* @__PURE__ */ r(H, { children: [
+function Nt({ message: t }) {
+  return /* @__PURE__ */ r(T, { children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -2129,169 +2129,172 @@ function kt({ message: t }) {
     )
   ] });
 }
-const T = se(null);
-function U() {
-  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 wt() {
-  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 Nt() {
-  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 Ct() {
-  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 Lt({
+function St({
   dataSource: t,
   children: a,
   reloadKey: o
 }) {
-  const [n, l] = L({
+  const [n, l] = w({
     status: "loading",
     phase: "summary",
     done: 0,
     total: 1
   });
-  B(() => {
-    let u = !1;
-    return l({ status: "loading", phase: "summary", done: 0, total: 1 }), Mt({
+  S(() => {
+    let h = !1;
+    return l({ status: "loading", phase: "summary", done: 0, total: 1 }), Bt({
       dataSource: t,
-      onState: (g) => {
-        u || l(g);
+      onState: (p) => {
+        h || l(p);
       },
-      isCancelled: () => u
+      isCancelled: () => h
     }), () => {
-      u = !0;
+      h = !0;
     };
   }, [t, o]);
-  const i = C(
-    async (u, g) => {
-      const b = await t.saveLayout(u, g);
+  const s = C(
+    async (h, p) => {
+      const b = await t.saveLayout(h, p);
       l((f) => f.status !== "ready" ? f : {
         status: "ready",
         bundle: {
           ...f.bundle,
-          layouts: { ...f.bundle.layouts, [u]: b }
+          layouts: { ...f.bundle.layouts, [h]: b }
         }
       });
     },
     [t]
-  ), s = F(
-    () => t.openInEditor ? (u) => {
-      var g;
-      return (g = t.openInEditor) == null ? void 0 : g.call(t, u);
+  ), i = A(
+    () => t.openInEditor ? (h) => {
+      var p;
+      return (p = t.openInEditor) == null ? void 0 : p.call(t, h);
     } : void 0,
     [t]
   ), c = C(
-    (u, g) => {
+    (h, p) => {
       var b;
-      (b = t.reportUsage) == null || b.call(t, u, g);
+      (b = t.reportUsage) == null || b.call(t, h, p);
     },
     [t]
-  ), h = n.status === "ready" ? n.bundle : null, d = F(() => h ? { bundle: h, saveLayout: i, openInEditor: s, reportUsage: c } : null, [h, i, s, c]);
-  return n.status !== "ready" ? /* @__PURE__ */ e(vt, { state: n }) : d ? /* @__PURE__ */ e(T.Provider, { value: d, children: a }) : null;
+  ), 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 Mt({
+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
       });
-    }, h = await Promise.all(
-      l.map(async (p) => {
-        const v = t.loadDiagram(p).then((D) => (o() || c(), D)), N = t.loadLayout(p).then((D) => (o() || c(), D)), [y, M] = await Promise.all([
+    }, 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,
-          N
+          M
         ]);
-        return { slug: p, diagram: y, layout: M };
+        return { slug: x, diagram: W, layout: I };
       })
     );
     if (o()) return;
-    const d = {}, u = {}, g = /* @__PURE__ */ new Set();
-    for (const { slug: p, diagram: v, layout: N } of h) {
-      d[p] = v, u[p] = N;
-      for (const y of v.nodes ?? []) g.add(y.id);
+    const 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 b = [...g];
-    let f = 0;
+    const f = [...b];
+    let y = 0;
     a({
       status: "loading",
       phase: "descriptions",
       done: 0,
-      total: b.length,
-      archName: n.name
+      total: f.length,
+      archName: l.name
     });
-    const x = () => {
-      f += 1, a({
+    const N = () => {
+      y += 1, a({
         status: "loading",
         phase: "descriptions",
-        done: f,
-        total: b.length,
-        archName: n.name
+        done: y,
+        total: f.length,
+        archName: l.name
       });
-    }, w = {}, m = /* @__PURE__ */ new Set();
+    }, u = {}, g = /* @__PURE__ */ new Set();
     if (await Promise.all(
-      b.map(async (p) => {
+      f.map(async (x) => {
         try {
-          const v = await t.loadNodeDetail(p);
-          w[p] = v;
+          const v = await t.loadNodeDetail(x);
+          u[x] = v;
         } catch {
-          m.add(p);
+          g.add(x);
         } finally {
-          o() || x();
+          o() || N();
         }
       })
     ), o()) return;
+    const L = await n;
+    if (o()) return;
     a({
       status: "ready",
       bundle: {
-        summary: n,
-        diagrams: d,
-        layouts: u,
-        nodes: w,
-        missingDescriptions: m
+        summary: l,
+        diagrams: h,
+        layouts: p,
+        nodes: u,
+        missingDescriptions: g,
+        drift: L
       }
     });
   } catch (n) {
@@ -2300,91 +2303,91 @@ async function Mt({
     a({ status: "error", message: l });
   }
 }
-const Bt = { architecture: et }, St = { floating: st };
-function Wt(t) {
-  return /* @__PURE__ */ e(De, { children: /* @__PURE__ */ e(At, { ...t }) });
+const Dt = { architecture: rt }, Wt = { floating: dt };
+function zt(t) {
+  return /* @__PURE__ */ e(ze, { children: /* @__PURE__ */ e(Ft, { ...t }) });
 }
-const Dt = (t) => ({
+const Et = (t) => ({
   version: 1,
   diagramId: t,
   updatedAt: "",
   nodes: {}
 });
-function zt(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
-    }, h = s.width ?? ((l = s.style) == null ? void 0 : l.width), d = s.height ?? ((i = s.style) == null ? void 0 : i.height);
-    typeof h == "number" && Number.isFinite(h) && (c.width = h), typeof d == "number" && Number.isFinite(d) && (c.height = d), a[s.id] = c;
+      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 At({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
-  const n = U(), l = wt(), i = n.diagrams[t], [s, c, h] = ze([]), [d, u, g] = Ae([]), [b, f] = L(!1), [x, w] = L(null), { getNodes: m } = Ee(), p = V(null), v = V(t);
-  v.current = t;
-  const N = V(n);
-  N.current = n, B(() => {
-    var K;
-    let S = !1;
-    f(!1), w(null), a(null);
-    const z = N.current, A = z.diagrams[t];
-    if (!A)
-      return w(`Diagram "${t}" was not loaded`), c([]), u([]), () => {
-        S = !0;
+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 ye = z.layouts[t] ?? Dt(t), { nodes: ke, edges: Y } = dt(A);
-    return ft(ke, Y, (K = A.meta) == null ? void 0 : K.direction, ye).then((G) => {
-      S || (c(G), u(Y), requestAnimationFrame(() => !S && f(!0)));
-    }).catch((G) => {
-      S || w(G.message);
+    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, u, c]);
-  const y = C(() => {
-    const S = v.current, z = {
-      nodes: zt(m())
+  }, [t, a, h, c]);
+  const v = C(() => {
+    const B = L.current, z = {
+      nodes: At(u())
     };
-    l(S, z).catch((A) => {
-      console.warn("[tecture] failed to persist layout", A);
+    l(B, z).catch((E) => {
+      console.warn("[tecture] failed to persist layout", E);
     });
-  }, [m, l]), M = C(() => {
-    p.current && clearTimeout(p.current), p.current = setTimeout(() => {
-      p.current = null, y();
+  }, [u, l]), M = C(() => {
+    g.current && clearTimeout(g.current), g.current = setTimeout(() => {
+      g.current = null, v();
     }, 150);
-  }, [y]), D = F(
+  }, [v]), W = A(
     () => ({ notifyLayoutChanged: M }),
     [M]
-  ), $ = C(() => {
+  ), I = C(() => {
     M();
-  }, [M]), xe = F(
-    () => (S, z) => {
+  }, [M]), P = A(
+    () => (B, z) => {
       a(z.id);
     },
     [a]
-  ), ve = F(
-    () => (S, z) => {
-      const A = z.data;
-      A.subDiagramId && o(A.subDiagramId);
+  ), ye = A(
+    () => (B, z) => {
+      const E = z.data;
+      E.subDiagramId && o(E.subDiagramId);
     },
     [o]
   );
-  return /* @__PURE__ */ e(me.Provider, { value: D, 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(
-      Fe,
+      Ie,
       {
-        nodes: s,
+        nodes: i,
         edges: d,
-        nodeTypes: Bt,
-        edgeTypes: St,
-        onNodesChange: h,
-        onEdgesChange: g,
-        onNodeClick: xe,
-        onNodeDoubleClick: ve,
-        onNodeDragStop: $,
+        nodeTypes: Dt,
+        edgeTypes: Wt,
+        onNodesChange: m,
+        onEdgesChange: p,
+        onNodeClick: P,
+        onNodeDoubleClick: ye,
+        onNodeDragStop: I,
         onPaneClick: () => a(null),
         fitView: !0,
         fitViewOptions: { padding: 0.2 },
@@ -2398,18 +2401,18 @@ function At({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
         },
         children: [
           /* @__PURE__ */ e(
-            He,
+            Pe,
             {
-              variant: Pe.Lines,
+              variant: He.Lines,
               gap: 20,
               size: 1,
               color: "rgba(34, 78, 130, 0.12)"
             }
           ),
           /* @__PURE__ */ e(Te, { showInteractive: !1, position: "bottom-right" }),
-          i && /* @__PURE__ */ e(rt, { diagram: i }),
+          s && /* @__PURE__ */ e(ot, { diagram: s }),
           /* @__PURE__ */ e(
-            Ie,
+            je,
             {
               position: "bottom-left",
               pannable: !0,
@@ -2422,10 +2425,10 @@ function At({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
         ]
       }
     ),
-    x && /* @__PURE__ */ e(Et, { label: `Error: ${x}` })
+    y && /* @__PURE__ */ e(It, { label: `Error: ${y}` })
   ] }) });
 }
-function Et({ label: t }) {
+function It({ label: t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -2438,13 +2441,13 @@ function Et({ label: t }) {
     }
   );
 }
-function Ft({
+function Pt({
   summary: t,
   currentDiagramId: a,
   onSelect: o,
   onGoHome: n
 }) {
-  const [l, i] = L(!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 Ft({
           {
             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 Ft({
                     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 Ft({
           "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)",
@@ -2677,10 +2680,184 @@ function Ht({
     }
   ) });
 }
-let le = !1;
-async function Pt() {
+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 le || (a.initialize({
+  return se || (a.initialize({
     startOnLoad: !1,
     theme: "dark",
     securityLevel: "strict",
@@ -2715,27 +2892,27 @@ async function Pt() {
       noteBorderColor: "#854d0e",
       noteTextColor: "#fef3c7"
     }
-  }), le = !0), a;
+  }), se = !0), a;
 }
-function Tt({ chart: t }) {
-  const [a, o] = L({ status: "loading" }), [n, l] = L(!1), s = `mermaid-${Ne().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 h = await Pt();
-        await h.parse(t);
-        const { svg: d } = await h.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 (h) {
+      } catch (m) {
         if (c) return;
-        const d = h instanceof Error ? h.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 Tt({ 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 Tt({ chart: t }) {
         }
       )
     ] }),
-    n && /* @__PURE__ */ e(It, { svg: a.svg, onClose: () => l(!1) })
+    n && /* @__PURE__ */ e(Ut, { svg: a.svg, onClose: () => l(!1) })
   ] });
 }
-function It({
+function Ut({
   svg: t,
   onClose: a
 }) {
-  return B(() => {
+  return S(() => {
     const o = (l) => {
       l.key === "Escape" && a();
     };
@@ -2825,7 +3002,7 @@ function It({
     return document.body.style.overflow = "hidden", () => {
       document.removeEventListener("keydown", o), document.body.style.overflow = n;
     };
-  }, [a]), Ve(
+  }, [a]), _e(
     /* @__PURE__ */ e(
       "div",
       {
@@ -2933,22 +3110,22 @@ function It({
     document.body
   );
 }
-function jt({ source: t }) {
+function Kt({ source: t }) {
   return /* @__PURE__ */ e("div", { className: "prose-markdown", children: /* @__PURE__ */ e(
-    Ge,
+    Ve,
     {
       options: {
         forceBlock: !0,
         overrides: {
-          pre: { component: $t },
-          a: { component: Rt }
+          pre: { component: Xt },
+          a: { component: Yt }
         }
       },
       children: t
     }
   ) });
 }
-function Rt({
+function Yt({
   href: t,
   children: a,
   ...o
@@ -2964,23 +3141,23 @@ function Rt({
     }
   );
 }
-function $t({ children: t }) {
-  const a = Gt(t);
-  return a !== null ? /* @__PURE__ */ e(Tt, { 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 Gt(t) {
+function Zt(t) {
   const a = Array.isArray(t) && t.length === 1 ? t[0] : t;
-  if (!Ce(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 Vt({ nodeId: t, onClose: a }) {
-  var d, u;
-  const o = U(), n = Nt(), l = o.nodes[t], i = o.missingDescriptions.has(t), s = _((d = l == null ? void 0 : l.meta) == null ? void 0 : d.type), c = l == null ? void 0 : l.path, h = n ? void 0 : c ? Re(o.summary.source, o.summary.sourceHost, c) : void 0;
+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 Vt({ 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 Vt({ nodeId: t, onClose: a }) {
                     children: (l == null ? void 0 : l.label) ?? t
                   }
                 ),
-                (u = l == null ? void 0 : l.meta) != null && u.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 Vt({ nodeId: t, onClose: a }) {
                     children: String(l.meta.technology)
                   }
                 ) : null,
-                c || l && q(l) ? /* @__PURE__ */ r("div", { className: "mt-1.5 flex w-full items-center gap-x-3", children: [
-                  c ? /* @__PURE__ */ e(
-                    Ot,
+                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: h
+                      path: m,
+                      accent: c.accent,
+                      onOpenInEditor: n ? () => n(m) : void 0,
+                      sourceUrl: d
                     }
                   ) : null,
-                  l && q(l) ? /* @__PURE__ */ e(
-                    _t,
+                  l && J(l) ? /* @__PURE__ */ e(
+                    tr,
                     {
-                      prompt: $e(l),
-                      accent: s.accent,
+                      prompt: Ge(l),
+                      accent: c.accent,
                       className: "ml-auto"
                     }
                   ) : null
@@ -3079,15 +3256,65 @@ function Vt({ 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(jt, { 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 O(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 O(t) {
     cursor: "pointer"
   };
 }
-function Ot({
+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 Ot({
     "button",
     {
       type: "button",
-      className: R,
-      style: O(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: O(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 _t({
+function tr({
   prompt: t,
   accent: a,
   className: o
 }) {
-  const [n, l] = L(!1), i = C(() => {
-    Ut(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: O(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 _t({
     }
   );
 }
-async function Ut(t) {
+async function rr(t) {
   var a;
   try {
     if ((a = navigator.clipboard) != null && a.writeText)
@@ -3220,9 +3447,9 @@ async function Ut(t) {
     return !1;
   }
 }
-function Yt() {
-  const [t, a] = L(!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,7 +3468,7 @@ function Yt() {
     }
   ) : null;
 }
-function be({ className: t }) {
+function ve({ className: t }) {
   return /* @__PURE__ */ e("svg", { className: `ob-cursor ${t}`, viewBox: "0 0 24 24", "aria-hidden": !0, children: /* @__PURE__ */ e(
     "path",
     {
@@ -3253,7 +3480,7 @@ function be({ className: t }) {
     }
   ) });
 }
-function W({
+function D({
   label: t,
   style: a,
   className: o = "",
@@ -3265,10 +3492,10 @@ function W({
     n
   ] });
 }
-function Kt() {
+function or() {
   return /* @__PURE__ */ r("div", { className: "ob-stage blueprint-grid", children: [
     /* @__PURE__ */ e(
-      W,
+      D,
       {
         label: "Service",
         className: "ob-click-target",
@@ -3276,7 +3503,7 @@ function Kt() {
       }
     ),
     /* @__PURE__ */ e(
-      W,
+      D,
       {
         label: "Database",
         style: { left: "6%", top: "58%", width: "34%", height: "30%" }
@@ -3296,10 +3523,10 @@ function Kt() {
       /* @__PURE__ */ e("div", { className: "ob-line", style: { width: "58%" } }),
       /* @__PURE__ */ e("div", { className: "ob-line", style: { width: "82%" } })
     ] }),
-    /* @__PURE__ */ e(be, { className: "ob-click-cursor" })
+    /* @__PURE__ */ e(ve, { className: "ob-click-cursor" })
   ] });
 }
-function Xt() {
+function nr() {
   return /* @__PURE__ */ e(
     "svg",
     {
@@ -3316,59 +3543,59 @@ function Xt() {
     }
   );
 }
-function Zt() {
+function lr() {
   return /* @__PURE__ */ r("div", { className: "ob-stage blueprint-grid", children: [
     /* @__PURE__ */ r("div", { className: "ob-level-1", children: [
       /* @__PURE__ */ e(
-        W,
+        D,
         {
           label: "User",
           style: { left: "34%", top: "3%", width: "24%", height: "20%" }
         }
       ),
       /* @__PURE__ */ e(
-        W,
+        D,
         {
           label: "Files",
           style: { left: "64%", top: "40%", width: "24%", height: "24%" }
         }
       ),
       /* @__PURE__ */ e(
-        W,
+        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(Xt, {})
+            /* @__PURE__ */ e(nr, {})
           ] })
         }
       )
     ] }),
     /* @__PURE__ */ r("div", { className: "ob-level-2", children: [
       /* @__PURE__ */ e(
-        W,
+        D,
         {
           label: "API",
           style: { left: "8%", top: "14%", width: "24%", height: "26%" }
         }
       ),
       /* @__PURE__ */ e(
-        W,
+        D,
         {
           label: "Router",
           style: { left: "40%", top: "8%", width: "24%", height: "26%" }
         }
       ),
       /* @__PURE__ */ e(
-        W,
+        D,
         {
           label: "Store",
           style: { left: "20%", top: "56%", width: "24%", height: "26%" }
         }
       ),
       /* @__PURE__ */ e(
-        W,
+        D,
         {
           label: "Worker",
           style: { left: "54%", top: "52%", width: "28%", height: "28%" }
@@ -3382,51 +3609,51 @@ function Zt() {
         style: { left: "43%", top: "64%" }
       }
     ),
-    /* @__PURE__ */ e(be, { className: "ob-drill-cursor" })
+    /* @__PURE__ */ e(ve, { className: "ob-drill-cursor" })
   ] });
 }
-function qt({
+function ir({
   open: t,
   onClose: a,
   architectureName: o,
   architectureDescription: n
 }) {
   var b;
-  const [l, i] = L(0);
-  B(() => {
-    t && i(0);
+  const [l, s] = w(0);
+  S(() => {
+    t && s(0);
   }, [t]);
-  const s = (b = (n ?? "").split(/\n\s*\n/)[0]) == null ? void 0 : b.trim(), c = [
+  const i = (b = (n ?? "").split(/\n\s*\n/)[0]) == null ? void 0 : b.trim(), c = [
     {
       eyebrow: "Architecture",
       title: o,
-      blurb: s || "An interactive map of this system — its components and how they connect.",
-      media: /* @__PURE__ */ e(Qt, { name: o })
+      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(Kt, {})
+      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(Zt, {})
+      media: /* @__PURE__ */ e(lr, {})
     }
-  ], h = c.length - 1, d = C(() => {
-    i((f) => f >= c.length - 1 ? (a(), f) : f + 1);
-  }, [c.length, a]), u = C(() => i((f) => Math.max(0, f - 1)), []);
-  B(() => {
+  ], 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 = (x) => {
-      x.key === "Escape" ? a() : x.key === "ArrowRight" ? d() : x.key === "ArrowLeft" && u();
+    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, u]);
-  const g = c[l] ?? c[0];
-  return !t || !g ? null : /* @__PURE__ */ e(
+  }, [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",
@@ -3460,7 +3687,7 @@ function qt({
                           color: "var(--text-muted)",
                           fontFamily: "var(--font-mono)"
                         },
-                        children: g.eyebrow
+                        children: p.eyebrow
                       }
                     ),
                     /* @__PURE__ */ e(
@@ -3472,7 +3699,7 @@ function qt({
                           color: "var(--text-primary)",
                           fontFamily: "var(--font-sans)"
                         },
-                        children: g.title
+                        children: p.title
                       }
                     )
                   ] }),
@@ -3518,7 +3745,7 @@ function qt({
                   borderColor: "var(--border-default)",
                   backgroundColor: "var(--bg-deep)"
                 },
-                children: g.media
+                children: p.media
               }
             ),
             /* @__PURE__ */ e(
@@ -3529,7 +3756,7 @@ function qt({
                   color: "var(--text-secondary)",
                   fontFamily: "var(--font-sans)"
                 },
-                children: g.blurb
+                children: p.blurb
               }
             ),
             /* @__PURE__ */ r(
@@ -3538,13 +3765,13 @@ function qt({
                 className: "flex items-center justify-between border-t px-6 py-4",
                 style: { borderColor: "var(--border-default)" },
                 children: [
-                  /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: c.map((f, x) => /* @__PURE__ */ e(
+                  /* @__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: x === l ? "18px" : "6px",
-                        backgroundColor: x === l ? "var(--accent-cyan)" : "var(--border-default)"
+                        width: y === l ? "18px" : "6px",
+                        backgroundColor: y === l ? "var(--accent-cyan)" : "var(--border-default)"
                       }
                     },
                     f.title
@@ -3554,7 +3781,7 @@ function qt({
                       "button",
                       {
                         type: "button",
-                        onClick: u,
+                        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)",
@@ -3577,7 +3804,7 @@ function qt({
                           fontFamily: "var(--font-mono)",
                           backgroundColor: "transparent"
                         },
-                        children: l === h ? "Got it" : "Next"
+                        children: l === m ? "Got it" : "Next"
                       }
                     )
                   ] })
@@ -3590,7 +3817,7 @@ function qt({
     }
   );
 }
-function Qt({ name: t }) {
+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",
@@ -3618,31 +3845,31 @@ function Qt({ name: t }) {
     )
   ] });
 }
-function Jt() {
-  const [t, a] = L(!0), o = C(() => a(!0), []), n = C(() => a(!1), []);
+function cr() {
+  const [t, a] = w(!0), o = C(() => a(!0), []), n = C(() => a(!1), []);
   return { open: t, openWizard: o, closeWizard: n };
 }
-let ie = null;
-function er({ diagramId: t, showDiagramList: a = !0 }) {
-  const o = U(), n = Ct(), [l, i] = L(null), s = Jt();
-  B(() => {
+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 u;
-    if (!t || t === ie) return;
-    ie = t;
-    const d = (u = o.summary.diagrams.find(
-      (g) => g.slug === t
-    )) == null ? void 0 : u.level;
+  }, [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 c = C(
     (d) => {
-      i(d), d && n("node.inspected");
+      s(d), d && n("node.inspected");
     },
     [n]
-  ), h = C((d) => {
-    i(null), window.location.hash = `#/diagram/${d}`;
+  ), m = C((d) => {
+    s(null), window.location.hash = `#/diagram/${d}`;
   }, []);
   return /* @__PURE__ */ r(
     "div",
@@ -3651,38 +3878,39 @@ function er({ diagramId: t, showDiagramList: a = !0 }) {
       style: { backgroundColor: "var(--bg-deep)" },
       children: [
         t ? /* @__PURE__ */ e(
-          Wt,
+          zt,
           {
             diagramId: t,
             onSelectNode: c,
-            onDrillIn: h
+            onDrillIn: m
           },
           t
-        ) : /* @__PURE__ */ e(rr, { message: "Opening top diagram…" }),
+        ) : /* @__PURE__ */ e(ur, { message: "Opening top diagram…" }),
         a && /* @__PURE__ */ e(
-          Ft,
+          Pt,
           {
             summary: o.summary,
             currentDiagramId: t,
-            onSelect: h,
-            onGoHome: () => h(o.summary.topDiagram)
+            onSelect: m,
+            onGoHome: () => m(o.summary.topDiagram)
           }
         ),
-        /* @__PURE__ */ e(Yt, {}),
+        /* @__PURE__ */ e(ar, {}),
+        /* @__PURE__ */ e($t, {}),
         l && /* @__PURE__ */ e(
-          Vt,
+          qt,
           {
             nodeId: l,
-            onClose: () => i(null)
+            onClose: () => s(null)
           },
           l
         ),
-        /* @__PURE__ */ e(tr, { onClick: s.openWizard }),
+        /* @__PURE__ */ e(mr, { onClick: i.openWizard }),
         /* @__PURE__ */ e(
-          qt,
+          ir,
           {
-            open: s.open,
-            onClose: s.closeWizard,
+            open: i.open,
+            onClose: i.closeWizard,
             architectureName: o.summary.name,
             architectureDescription: o.summary.description
           }
@@ -3691,7 +3919,7 @@ function er({ diagramId: t, showDiagramList: a = !0 }) {
     }
   );
 }
-function tr({ onClick: t }) {
+function mr({ onClick: t }) {
   return /* @__PURE__ */ e(
     "button",
     {
@@ -3729,7 +3957,7 @@ function tr({ onClick: t }) {
     }
   );
 }
-function rr({ message: t }) {
+function ur({ message: t }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -3742,22 +3970,22 @@ function rr({ message: t }) {
     }
   );
 }
-function ar() {
-  const [t, a] = L(() => 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 or(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 ur({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
-  const n = ar(), l = or(n);
-  return l.view === "style-guide" ? /* @__PURE__ */ e(_e, {}) : /* @__PURE__ */ e(Lt, { dataSource: t, reloadKey: a, children: /* @__PURE__ */ e(
-    er,
+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
@@ -3765,6 +3993,6 @@ function ur({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
   ) });
 }
 export {
-  ur as App
+  wr as App
 };
 //# sourceMappingURL=App.js.map