@tecture/web 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/LICENSE +21 -0
  3. package/dist-lib/App.d.ts +9 -0
  4. package/dist-lib/App.js +3341 -0
  5. package/dist-lib/App.js.map +1 -0
  6. package/dist-lib/StyleGuide.d.ts +1 -0
  7. package/dist-lib/architecture/ArchitectureBundleContext.d.ts +39 -0
  8. package/dist-lib/architecture/ArchitectureNode.d.ts +4 -0
  9. package/dist-lib/architecture/ArchitectureView.d.ts +6 -0
  10. package/dist-lib/architecture/DiagramCanvas.d.ts +7 -0
  11. package/dist-lib/architecture/DiagramList.d.ts +9 -0
  12. package/dist-lib/architecture/KeyboardHint.d.ts +1 -0
  13. package/dist-lib/architecture/LayoutPersistenceContext.d.ts +4 -0
  14. package/dist-lib/architecture/Legend.d.ts +6 -0
  15. package/dist-lib/architecture/LoadingSplash.d.ts +8 -0
  16. package/dist-lib/architecture/MarkdownContent.d.ts +5 -0
  17. package/dist-lib/architecture/MermaidBlock.d.ts +5 -0
  18. package/dist-lib/architecture/NodeDetailPanel.d.ts +6 -0
  19. package/dist-lib/architecture/dataSource.d.ts +32 -0
  20. package/dist-lib/architecture/dataSource.js +57 -0
  21. package/dist-lib/architecture/dataSource.js.map +1 -0
  22. package/dist-lib/architecture/edgeStyles.d.ts +7 -0
  23. package/dist-lib/architecture/edges/FloatingEdge.d.ts +2 -0
  24. package/dist-lib/architecture/edges/utils.d.ts +12 -0
  25. package/dist-lib/architecture/hooks/useActiveHandleSides.d.ts +1 -0
  26. package/dist-lib/architecture/layout.d.ts +3 -0
  27. package/dist-lib/architecture/nodeStyles.d.ts +18 -0
  28. package/dist-lib/architecture/transform.d.ts +15 -0
  29. package/dist-lib/style.css +1 -0
  30. package/dist-lib/styleEntry.d.ts +0 -0
  31. package/dist-lib/styles.js +2 -0
  32. package/dist-lib/styles.js.map +1 -0
  33. package/package.json +75 -0
package/dist-lib/App.js ADDED
@@ -0,0 +1,3341 @@
1
+ import { jsxs as r, jsx as e, Fragment as H } from "react/jsx-runtime";
2
+ 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";
3
+ 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";
4
+ import Fe from "elkjs/lib/elk.bundled.js";
5
+ import { buildSourceUrl as Ie, isDeepDivable as Z, buildDeepDivePrompt as Re } from "@tecture/shared";
6
+ import je from "markdown-to-jsx";
7
+ import { createPortal as $e } from "react-dom";
8
+ const F = {
9
+ backgrounds: [
10
+ { token: "--bg-deep", value: "#0a0f1a", label: "Deep" },
11
+ { token: "--bg-surface", value: "#0f1628", label: "Surface" },
12
+ { token: "--bg-elevated", value: "#141d33", label: "Elevated" }
13
+ ],
14
+ borders: [
15
+ { token: "--border-default", value: "#1e2d4a", label: "Default" },
16
+ { token: "--border-accent", value: "rgba(37, 99, 235, 0.25)", label: "Accent" },
17
+ { token: "--grid-line", value: "#1a2744", label: "Grid Line" }
18
+ ],
19
+ text: [
20
+ { token: "--text-primary", value: "#e2e8f0", label: "Primary" },
21
+ { token: "--text-secondary", value: "#94a3b8", label: "Secondary" },
22
+ { token: "--text-muted", value: "#64748b", label: "Muted" }
23
+ ],
24
+ accents: [
25
+ { token: "--accent-cyan", value: "#22d3ee", label: "Cyan" },
26
+ { token: "--accent-blue", value: "#3b82f6", label: "Blue" },
27
+ { token: "--accent-amber", value: "#f59e0b", label: "Amber" },
28
+ { token: "--accent-amber-hover", value: "#fbbf24", label: "Amber Hover" },
29
+ { token: "--accent-emerald", value: "#34d399", label: "Emerald" }
30
+ ]
31
+ }, Ge = [
32
+ { type: "System", accent: "#94a3b8", bg: "#1e293b" },
33
+ { type: "Service", accent: "#818cf8", bg: "#1e1b4b" },
34
+ { type: "Database", accent: "#34d399", bg: "#022c22" },
35
+ { type: "Queue", accent: "#fbbf24", bg: "#1c1a00" },
36
+ { type: "Gateway", accent: "#a78bfa", bg: "#1e1338" },
37
+ { type: "Frontend", accent: "#38bdf8", bg: "#0c1929" },
38
+ { type: "Cache", accent: "#fb923c", bg: "#1c1006" },
39
+ { type: "Storage", accent: "#2dd4bf", bg: "#042f2e" },
40
+ { type: "External", accent: "#a1a1aa", bg: "#1c1c1e" }
41
+ ];
42
+ function A({ number: t, children: a }) {
43
+ return /* @__PURE__ */ r("div", { className: "mb-10", children: [
44
+ /* @__PURE__ */ e("div", { className: "blueprint-annotation animate-fade-up", children: t }),
45
+ /* @__PURE__ */ e(
46
+ "h2",
47
+ {
48
+ className: "animate-fade-up delay-100 font-display mt-3 text-2xl tracking-tight",
49
+ style: { color: "var(--text-primary)" },
50
+ children: a
51
+ }
52
+ )
53
+ ] });
54
+ }
55
+ function q({ token: t, value: a, label: o }) {
56
+ return /* @__PURE__ */ r("div", { className: "group relative", children: [
57
+ /* @__PURE__ */ e(
58
+ "div",
59
+ {
60
+ className: "h-20 border transition-transform duration-200 group-hover:-translate-y-1",
61
+ style: { backgroundColor: a, borderColor: "var(--border-default)" }
62
+ }
63
+ ),
64
+ /* @__PURE__ */ r("div", { className: "mt-2.5", children: [
65
+ /* @__PURE__ */ e("div", { className: "text-xs font-medium", style: { color: "var(--text-primary)" }, children: o }),
66
+ /* @__PURE__ */ e("div", { className: "mt-0.5 font-mono text-[11px]", style: { color: "var(--text-muted)" }, children: t }),
67
+ /* @__PURE__ */ e("div", { className: "mt-0.5 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: a })
68
+ ] })
69
+ ] });
70
+ }
71
+ function Ve() {
72
+ return /* @__PURE__ */ r("div", { className: "blueprint-grid animate-grid-reveal min-h-screen relative", children: [
73
+ /* @__PURE__ */ r(
74
+ "svg",
75
+ {
76
+ className: "absolute top-6 right-6 opacity-20 pointer-events-none",
77
+ width: "40",
78
+ height: "40",
79
+ viewBox: "0 0 40 40",
80
+ children: [
81
+ /* @__PURE__ */ e("line", { x1: "20", y1: "0", x2: "20", y2: "40", stroke: "var(--accent-cyan)", strokeWidth: "0.5", className: "animate-draw" }),
82
+ /* @__PURE__ */ e("line", { x1: "0", y1: "20", x2: "40", y2: "20", stroke: "var(--accent-cyan)", strokeWidth: "0.5", className: "animate-draw" }),
83
+ /* @__PURE__ */ e("circle", { cx: "20", cy: "20", r: "8", stroke: "var(--accent-cyan)", strokeWidth: "0.5", fill: "none", className: "animate-draw" })
84
+ ]
85
+ }
86
+ ),
87
+ /* @__PURE__ */ r(
88
+ "svg",
89
+ {
90
+ className: "absolute bottom-6 left-6 opacity-20 pointer-events-none",
91
+ width: "40",
92
+ height: "40",
93
+ viewBox: "0 0 40 40",
94
+ children: [
95
+ /* @__PURE__ */ e("line", { x1: "20", y1: "0", x2: "20", y2: "40", stroke: "var(--accent-cyan)", strokeWidth: "0.5", className: "animate-draw" }),
96
+ /* @__PURE__ */ e("line", { x1: "0", y1: "20", x2: "40", y2: "20", stroke: "var(--accent-cyan)", strokeWidth: "0.5", className: "animate-draw" }),
97
+ /* @__PURE__ */ e("circle", { cx: "20", cy: "20", r: "8", stroke: "var(--accent-cyan)", strokeWidth: "0.5", fill: "none", className: "animate-draw" })
98
+ ]
99
+ }
100
+ ),
101
+ /* @__PURE__ */ r(
102
+ "nav",
103
+ {
104
+ className: "animate-fade-up mx-auto flex max-w-5xl items-center justify-between px-6 py-6 border-b",
105
+ style: { borderColor: "var(--border-default)" },
106
+ children: [
107
+ /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
108
+ /* @__PURE__ */ e("a", { href: "/", className: "font-display text-xl tracking-wide", style: { color: "var(--text-primary)" }, children: "Tecture IO" }),
109
+ /* @__PURE__ */ e("span", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "|" }),
110
+ /* @__PURE__ */ e("span", { className: "text-xs", style: { color: "var(--text-secondary)" }, children: "Style Guide" })
111
+ ] }),
112
+ /* @__PURE__ */ e("div", { className: "blueprint-annotation", style: { fontSize: "10px" }, children: "REV 1.0" })
113
+ ]
114
+ }
115
+ ),
116
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 pt-20 pb-16", children: [
117
+ /* @__PURE__ */ r(
118
+ "div",
119
+ {
120
+ className: "animate-fade-up delay-100 mb-6 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs",
121
+ style: {
122
+ borderColor: "var(--border-default)",
123
+ backgroundColor: "var(--bg-surface)",
124
+ color: "var(--text-secondary)"
125
+ },
126
+ children: [
127
+ /* @__PURE__ */ e(
128
+ "span",
129
+ {
130
+ className: "h-1.5 w-1.5 rounded-full animate-pulse-glow",
131
+ style: { backgroundColor: "var(--accent-cyan)" }
132
+ }
133
+ ),
134
+ "Blueprint Design System"
135
+ ]
136
+ }
137
+ ),
138
+ /* @__PURE__ */ e(
139
+ "h1",
140
+ {
141
+ className: "animate-fade-up delay-200 font-display text-4xl tracking-tight sm:text-5xl md:text-6xl",
142
+ style: { color: "#e2e8f0" },
143
+ children: "Style Guide"
144
+ }
145
+ ),
146
+ /* @__PURE__ */ e(
147
+ "p",
148
+ {
149
+ className: "animate-fade-up delay-300 mt-4 max-w-2xl text-base leading-relaxed",
150
+ style: { color: "var(--text-secondary)" },
151
+ children: "A living reference for the Tecture IO blueprint design system. Use these tokens, patterns, and components to build cohesive interfaces across the application."
152
+ }
153
+ )
154
+ ] }),
155
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
156
+ /* @__PURE__ */ e(A, { number: "Section 01", children: "Color Palette" }),
157
+ /* @__PURE__ */ r("div", { className: "space-y-12", children: [
158
+ /* @__PURE__ */ r("div", { children: [
159
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Backgrounds" }),
160
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: F.backgrounds.map((t) => /* @__PURE__ */ e(q, { ...t }, t.token)) })
161
+ ] }),
162
+ /* @__PURE__ */ r("div", { children: [
163
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Borders" }),
164
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: F.borders.map((t) => /* @__PURE__ */ e(q, { ...t }, t.token)) })
165
+ ] }),
166
+ /* @__PURE__ */ r("div", { children: [
167
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Text" }),
168
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4", children: F.text.map((t) => /* @__PURE__ */ r("div", { className: "group", children: [
169
+ /* @__PURE__ */ e(
170
+ "div",
171
+ {
172
+ className: "flex h-20 items-center justify-center border",
173
+ style: { backgroundColor: "var(--bg-deep)", borderColor: "var(--border-default)" },
174
+ children: /* @__PURE__ */ e("span", { className: "text-lg font-medium", style: { color: t.value }, children: "Aa" })
175
+ }
176
+ ),
177
+ /* @__PURE__ */ r("div", { className: "mt-2.5", children: [
178
+ /* @__PURE__ */ e("div", { className: "text-xs font-medium", style: { color: "var(--text-primary)" }, children: t.label }),
179
+ /* @__PURE__ */ e("div", { className: "mt-0.5 font-mono text-[11px]", style: { color: "var(--text-muted)" }, children: t.token }),
180
+ /* @__PURE__ */ e("div", { className: "mt-0.5 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: t.value })
181
+ ] })
182
+ ] }, t.token)) })
183
+ ] }),
184
+ /* @__PURE__ */ r("div", { children: [
185
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Accents" }),
186
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-5 gap-4", children: F.accents.map((t) => /* @__PURE__ */ r("div", { className: "group", children: [
187
+ /* @__PURE__ */ e(
188
+ "div",
189
+ {
190
+ className: "h-20 border transition-transform duration-200 group-hover:-translate-y-1",
191
+ style: {
192
+ background: `linear-gradient(135deg, ${t.value}22, ${t.value}66)`,
193
+ borderColor: t.value
194
+ }
195
+ }
196
+ ),
197
+ /* @__PURE__ */ r("div", { className: "mt-2.5", children: [
198
+ /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
199
+ /* @__PURE__ */ e("span", { className: "h-2.5 w-2.5 rounded-full", style: { backgroundColor: t.value } }),
200
+ /* @__PURE__ */ e("span", { className: "text-xs font-medium", style: { color: "var(--text-primary)" }, children: t.label })
201
+ ] }),
202
+ /* @__PURE__ */ e("div", { className: "mt-0.5 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: t.value })
203
+ ] })
204
+ ] }, t.token)) })
205
+ ] }),
206
+ /* @__PURE__ */ r("div", { children: [
207
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Diagram Node Types" }),
208
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-3 sm:grid-cols-5", children: Ge.map((t) => /* @__PURE__ */ r(
209
+ "div",
210
+ {
211
+ className: "border p-3",
212
+ style: { backgroundColor: t.bg, borderColor: `${t.accent}33` },
213
+ children: [
214
+ /* @__PURE__ */ e("div", { className: "mb-2 h-1 w-6", style: { backgroundColor: t.accent } }),
215
+ /* @__PURE__ */ e("div", { className: "text-xs font-medium", style: { color: t.accent }, children: t.type }),
216
+ /* @__PURE__ */ e("div", { className: "mt-1 font-mono text-[9px]", style: { color: `${t.accent}99` }, children: t.accent })
217
+ ]
218
+ },
219
+ t.type
220
+ )) })
221
+ ] })
222
+ ] })
223
+ ] }),
224
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
225
+ /* @__PURE__ */ e(A, { number: "Section 02", children: "Typography" }),
226
+ /* @__PURE__ */ r("div", { className: "space-y-12", children: [
227
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
228
+ {
229
+ name: "Inter",
230
+ variable: "--font-sans · --font-display",
231
+ usage: "Body, UI, and display headings (600 weight, tight tracking)",
232
+ sample: "Architecture",
233
+ style: { fontFamily: "var(--font-sans)", fontWeight: 600, letterSpacing: "-0.02em" }
234
+ },
235
+ {
236
+ name: "JetBrains Mono",
237
+ variable: "--font-mono",
238
+ usage: "Code, annotations, technical labels",
239
+ sample: "tecture.io/api",
240
+ style: { fontFamily: "var(--font-mono)" }
241
+ }
242
+ ].map((t) => /* @__PURE__ */ r(
243
+ "div",
244
+ {
245
+ className: "relative border p-6 overflow-hidden",
246
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
247
+ children: [
248
+ /* @__PURE__ */ e("svg", { className: "absolute top-0 left-0", width: "16", height: "16", viewBox: "0 0 16 16", children: /* @__PURE__ */ e("path", { d: "M0 16 L0 0 L16 0", stroke: "var(--accent-cyan)", strokeWidth: "1.5", fill: "none", opacity: "0.3" }) }),
249
+ /* @__PURE__ */ e("div", { className: "text-3xl mb-4", style: { ...t.style, color: "var(--text-primary)" }, children: t.sample }),
250
+ /* @__PURE__ */ e("div", { className: "text-xs font-semibold", style: { color: "var(--text-primary)" }, children: t.name }),
251
+ /* @__PURE__ */ e("div", { className: "mt-1 font-mono text-[10px]", style: { color: "var(--accent-cyan)" }, children: t.variable }),
252
+ /* @__PURE__ */ e("div", { className: "mt-1 text-xs", style: { color: "var(--text-muted)" }, children: t.usage })
253
+ ]
254
+ },
255
+ t.name
256
+ )) }),
257
+ /* @__PURE__ */ r("div", { children: [
258
+ /* @__PURE__ */ e("h3", { className: "mb-6 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Type Scale" }),
259
+ /* @__PURE__ */ r(
260
+ "div",
261
+ {
262
+ className: "border p-8 space-y-8",
263
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
264
+ children: [
265
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
266
+ /* @__PURE__ */ e(
267
+ "span",
268
+ {
269
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
270
+ style: { color: "var(--text-muted)" },
271
+ children: "7xl — 72px"
272
+ }
273
+ ),
274
+ /* @__PURE__ */ e(
275
+ "span",
276
+ {
277
+ className: "font-display text-7xl tracking-tight",
278
+ style: { color: "var(--text-primary)" },
279
+ children: "Heading"
280
+ }
281
+ )
282
+ ] }),
283
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
284
+ /* @__PURE__ */ e(
285
+ "span",
286
+ {
287
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
288
+ style: { color: "var(--text-muted)" },
289
+ children: "5xl — 48px"
290
+ }
291
+ ),
292
+ /* @__PURE__ */ e(
293
+ "span",
294
+ {
295
+ className: "font-display text-5xl tracking-tight",
296
+ style: { color: "var(--text-primary)" },
297
+ children: "Page Title"
298
+ }
299
+ )
300
+ ] }),
301
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
302
+ /* @__PURE__ */ e(
303
+ "span",
304
+ {
305
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
306
+ style: { color: "var(--text-muted)" },
307
+ children: "2xl — 24px"
308
+ }
309
+ ),
310
+ /* @__PURE__ */ e(
311
+ "span",
312
+ {
313
+ className: "font-display text-2xl tracking-tight",
314
+ style: { color: "var(--text-primary)" },
315
+ children: "Section Heading"
316
+ }
317
+ )
318
+ ] }),
319
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
320
+ /* @__PURE__ */ e(
321
+ "span",
322
+ {
323
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
324
+ style: { color: "var(--text-muted)" },
325
+ children: "lg — 18px"
326
+ }
327
+ ),
328
+ /* @__PURE__ */ e("span", { className: "text-lg font-semibold tracking-tight", style: { color: "var(--text-primary)" }, children: "App Header / Nav Title" })
329
+ ] }),
330
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
331
+ /* @__PURE__ */ e(
332
+ "span",
333
+ {
334
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
335
+ style: { color: "var(--text-muted)" },
336
+ children: "sm — 14px"
337
+ }
338
+ ),
339
+ /* @__PURE__ */ e("span", { className: "text-sm font-semibold", style: { color: "var(--text-primary)" }, children: "Card Title / Label" })
340
+ ] }),
341
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
342
+ /* @__PURE__ */ e(
343
+ "span",
344
+ {
345
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
346
+ style: { color: "var(--text-muted)" },
347
+ children: "sm — 14px"
348
+ }
349
+ ),
350
+ /* @__PURE__ */ e("span", { className: "text-sm leading-relaxed", style: { color: "var(--text-muted)" }, children: "Body text and descriptions use a relaxed line-height for comfortable reading across longer passages." })
351
+ ] }),
352
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
353
+ /* @__PURE__ */ e(
354
+ "span",
355
+ {
356
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
357
+ style: { color: "var(--text-muted)" },
358
+ children: "xs — 12px"
359
+ }
360
+ ),
361
+ /* @__PURE__ */ e("span", { className: "text-xs", style: { color: "var(--text-secondary)" }, children: "Metadata · Updated Apr 18, 2026 · 3 diagrams" })
362
+ ] }),
363
+ /* @__PURE__ */ r("div", { className: "flex items-baseline gap-6", children: [
364
+ /* @__PURE__ */ e(
365
+ "span",
366
+ {
367
+ className: "shrink-0 w-28 font-mono text-[10px] text-right",
368
+ style: { color: "var(--text-muted)" },
369
+ children: "11px mono"
370
+ }
371
+ ),
372
+ /* @__PURE__ */ e("span", { className: "blueprint-annotation", children: "Blueprint Annotation" })
373
+ ] })
374
+ ]
375
+ }
376
+ )
377
+ ] })
378
+ ] })
379
+ ] }),
380
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
381
+ /* @__PURE__ */ e(A, { number: "Section 03", children: "Components" }),
382
+ /* @__PURE__ */ r("div", { className: "space-y-16", children: [
383
+ /* @__PURE__ */ r("div", { children: [
384
+ /* @__PURE__ */ e("h3", { className: "mb-6 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Buttons" }),
385
+ /* @__PURE__ */ r(
386
+ "div",
387
+ {
388
+ className: "border p-8",
389
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
390
+ children: [
391
+ /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-4", children: [
392
+ /* @__PURE__ */ e(
393
+ "button",
394
+ {
395
+ className: "rounded-none px-6 py-2.5 text-sm font-semibold transition-all hover:brightness-110",
396
+ style: { backgroundColor: "#f59e0b", color: "#0a0f1a" },
397
+ children: "Primary Action"
398
+ }
399
+ ),
400
+ /* @__PURE__ */ e(
401
+ "button",
402
+ {
403
+ className: "rounded-none border px-6 py-2.5 text-sm font-medium transition-all",
404
+ style: { borderColor: "rgba(34, 211, 238, 0.4)", color: "#22d3ee" },
405
+ children: "Secondary Action"
406
+ }
407
+ ),
408
+ /* @__PURE__ */ e(
409
+ "button",
410
+ {
411
+ className: "rounded-none border px-4 py-1.5 text-sm font-medium transition-all",
412
+ style: {
413
+ borderColor: "var(--border-default)",
414
+ backgroundColor: "var(--bg-surface)",
415
+ color: "var(--text-secondary)"
416
+ },
417
+ children: "Ghost"
418
+ }
419
+ ),
420
+ /* @__PURE__ */ e(
421
+ "button",
422
+ {
423
+ className: "rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors",
424
+ style: { borderColor: "rgba(113, 113, 122, 0.5)", color: "#a1a1aa" },
425
+ children: "Nav Item"
426
+ }
427
+ )
428
+ ] }),
429
+ /* @__PURE__ */ e("div", { className: "mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4", children: [
430
+ { label: "Primary", desc: "Main CTA — amber bg, dark text, no border-radius", token: "--accent-amber" },
431
+ { label: "Secondary", desc: "Cyan border at 40% opacity, cyan text, no border-radius", token: "--accent-cyan" },
432
+ { label: "Ghost", desc: "Surface bg, default border, secondary text, no border-radius", token: "--border-default" },
433
+ { label: "Nav Item", desc: "Zinc border, rounded-lg, smaller padding, xs text", token: "zinc-700/50" }
434
+ ].map((t) => /* @__PURE__ */ r("div", { children: [
435
+ /* @__PURE__ */ e("div", { className: "text-xs font-medium", style: { color: "var(--text-primary)" }, children: t.label }),
436
+ /* @__PURE__ */ e("div", { className: "mt-1 text-[11px] leading-relaxed", style: { color: "var(--text-muted)" }, children: t.desc })
437
+ ] }, t.label)) })
438
+ ]
439
+ }
440
+ )
441
+ ] }),
442
+ /* @__PURE__ */ r("div", { children: [
443
+ /* @__PURE__ */ e("h3", { className: "mb-6 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Cards" }),
444
+ /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
445
+ /* @__PURE__ */ r("div", { children: [
446
+ /* @__PURE__ */ e("div", { className: "mb-2 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "List Card (authenticated view)" }),
447
+ /* @__PURE__ */ r("div", { className: "group flex items-start gap-3 rounded-xl border border-zinc-800 bg-zinc-900/50 p-4 transition-all hover:border-zinc-600 hover:bg-zinc-900", children: [
448
+ /* @__PURE__ */ e("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-zinc-800/80 text-zinc-500 transition-colors group-hover:bg-zinc-700/80 group-hover:text-zinc-400", children: /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
449
+ /* @__PURE__ */ e("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2" }),
450
+ /* @__PURE__ */ e("path", { d: "M8 7h8M8 11h8M8 15h4" })
451
+ ] }) }),
452
+ /* @__PURE__ */ r("div", { className: "min-w-0", children: [
453
+ /* @__PURE__ */ e("div", { className: "truncate text-sm font-medium text-zinc-200 group-hover:text-white", children: "Example Architecture" }),
454
+ /* @__PURE__ */ r("div", { className: "mt-0.5 flex items-center gap-2 text-xs text-zinc-500", children: [
455
+ /* @__PURE__ */ e("span", { children: "4 diagrams" }),
456
+ /* @__PURE__ */ e("span", { children: "·" }),
457
+ /* @__PURE__ */ e("span", { children: "Updated Apr 18, 2026" })
458
+ ] }),
459
+ /* @__PURE__ */ e("div", { className: "mt-1 truncate text-xs text-zinc-500", children: "Microservices architecture for the payment platform" })
460
+ ] })
461
+ ] })
462
+ ] }),
463
+ /* @__PURE__ */ r("div", { children: [
464
+ /* @__PURE__ */ e("div", { className: "mb-2 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "Feature Card (landing page)" }),
465
+ /* @__PURE__ */ r(
466
+ "div",
467
+ {
468
+ className: "relative border p-6 overflow-hidden",
469
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
470
+ children: [
471
+ /* @__PURE__ */ e(
472
+ "div",
473
+ {
474
+ className: "absolute top-3 right-4 font-mono text-[10px] select-none",
475
+ style: { color: "var(--text-muted)" },
476
+ children: "FIG.01"
477
+ }
478
+ ),
479
+ /* @__PURE__ */ e("svg", { className: "absolute top-0 left-0", width: "16", height: "16", viewBox: "0 0 16 16", children: /* @__PURE__ */ e("path", { d: "M0 16 L0 0 L16 0", stroke: "var(--accent-cyan)", strokeWidth: "1.5", fill: "none", opacity: "0.3" }) }),
480
+ /* @__PURE__ */ e(
481
+ "div",
482
+ {
483
+ className: "mb-3 flex h-9 w-9 items-center justify-center border",
484
+ style: {
485
+ borderColor: "rgba(34, 211, 238, 0.2)",
486
+ backgroundColor: "rgba(34, 211, 238, 0.05)",
487
+ color: "var(--accent-cyan)"
488
+ },
489
+ children: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e("path", { d: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) })
490
+ }
491
+ ),
492
+ /* @__PURE__ */ e("h3", { className: "text-sm font-semibold", style: { color: "var(--text-primary)" }, children: "Feature Title" }),
493
+ /* @__PURE__ */ e("p", { className: "mt-2 text-sm leading-relaxed", style: { color: "var(--text-muted)" }, children: "Description text explaining the feature. Uses relaxed line-height for readability." })
494
+ ]
495
+ }
496
+ )
497
+ ] }),
498
+ /* @__PURE__ */ r("div", { children: [
499
+ /* @__PURE__ */ e("div", { className: "mb-2 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "Step Card (landing page)" }),
500
+ /* @__PURE__ */ r(
501
+ "div",
502
+ {
503
+ className: "relative border p-6 overflow-hidden",
504
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
505
+ children: [
506
+ /* @__PURE__ */ e(
507
+ "div",
508
+ {
509
+ className: "absolute top-2 right-3 font-mono text-4xl font-bold select-none",
510
+ style: { color: "rgba(34, 211, 238, 0.08)" },
511
+ children: "01"
512
+ }
513
+ ),
514
+ /* @__PURE__ */ e("svg", { className: "absolute top-0 left-0", width: "16", height: "16", viewBox: "0 0 16 16", children: /* @__PURE__ */ e("path", { d: "M0 16 L0 0 L16 0", stroke: "var(--accent-cyan)", strokeWidth: "1.5", fill: "none", opacity: "0.3" }) }),
515
+ /* @__PURE__ */ r("div", { className: "relative", children: [
516
+ /* @__PURE__ */ e("h3", { className: "text-sm font-semibold", style: { color: "var(--text-primary)" }, children: "Step Title" }),
517
+ /* @__PURE__ */ e("p", { className: "mt-2 text-sm leading-relaxed", style: { color: "var(--text-muted)" }, children: "Step description with instructions for the user to follow." })
518
+ ] })
519
+ ]
520
+ }
521
+ )
522
+ ] }),
523
+ /* @__PURE__ */ r("div", { children: [
524
+ /* @__PURE__ */ e("div", { className: "mb-2 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "Empty State" }),
525
+ /* @__PURE__ */ r(
526
+ "div",
527
+ {
528
+ className: "flex flex-col items-center justify-center py-12 text-center border rounded-xl",
529
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
530
+ children: [
531
+ /* @__PURE__ */ e("div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-800/80 text-zinc-500", children: /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e("path", { d: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" }) }) }),
532
+ /* @__PURE__ */ e("p", { className: "text-sm font-medium text-zinc-300", children: "No items yet" }),
533
+ /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-zinc-500", children: "Description of what will appear here." })
534
+ ]
535
+ }
536
+ )
537
+ ] })
538
+ ] })
539
+ ] }),
540
+ /* @__PURE__ */ r("div", { children: [
541
+ /* @__PURE__ */ e("h3", { className: "mb-6 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Badges & Indicators" }),
542
+ /* @__PURE__ */ e(
543
+ "div",
544
+ {
545
+ className: "border p-8",
546
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
547
+ children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-4", children: [
548
+ /* @__PURE__ */ r(
549
+ "div",
550
+ {
551
+ className: "inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs",
552
+ style: {
553
+ borderColor: "var(--border-default)",
554
+ backgroundColor: "var(--bg-surface)",
555
+ color: "var(--text-secondary)"
556
+ },
557
+ children: [
558
+ /* @__PURE__ */ e(
559
+ "span",
560
+ {
561
+ className: "h-1.5 w-1.5 rounded-full animate-pulse-glow",
562
+ style: { backgroundColor: "var(--accent-cyan)" }
563
+ }
564
+ ),
565
+ "Status Pill"
566
+ ]
567
+ }
568
+ ),
569
+ /* @__PURE__ */ e(
570
+ "span",
571
+ {
572
+ className: "border px-2 py-0.5 text-[10px] font-medium",
573
+ style: {
574
+ backgroundColor: "rgba(34, 211, 238, 0.1)",
575
+ borderColor: "rgba(34, 211, 238, 0.2)",
576
+ color: "#22d3ee"
577
+ },
578
+ children: "Tag Label"
579
+ }
580
+ ),
581
+ /* @__PURE__ */ e("span", { className: "text-xs font-medium uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Section Label" }),
582
+ /* @__PURE__ */ e("span", { className: "blueprint-annotation", children: "Annotation" }),
583
+ /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "FIG.01" })
584
+ ] })
585
+ }
586
+ )
587
+ ] }),
588
+ /* @__PURE__ */ r("div", { children: [
589
+ /* @__PURE__ */ e("h3", { className: "mb-6 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Code & Terminal" }),
590
+ /* @__PURE__ */ r("div", { className: "border overflow-hidden", style: { borderColor: "#1e2d4a", backgroundColor: "#0f1628" }, children: [
591
+ /* @__PURE__ */ e("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
592
+ /* @__PURE__ */ e("span", { className: "text-xs font-medium", style: { color: "#e2e8f0" }, children: "Terminal Command" }),
593
+ /* @__PURE__ */ e(
594
+ "span",
595
+ {
596
+ className: "border px-2 py-0.5 text-[10px] font-medium",
597
+ style: {
598
+ backgroundColor: "rgba(34, 211, 238, 0.1)",
599
+ borderColor: "rgba(34, 211, 238, 0.2)",
600
+ color: "#22d3ee"
601
+ },
602
+ children: "Example"
603
+ }
604
+ )
605
+ ] }) }),
606
+ /* @__PURE__ */ r("div", { className: "px-4 pb-3", children: [
607
+ /* @__PURE__ */ e("p", { className: "text-xs mb-2", style: { color: "#64748b" }, children: "Instruction text above the command:" }),
608
+ /* @__PURE__ */ e(
609
+ "pre",
610
+ {
611
+ className: "overflow-x-auto border px-4 py-3 text-xs leading-relaxed",
612
+ style: { backgroundColor: "#0a0f1a", borderColor: "#1e2d4a", color: "#e2e8f0" },
613
+ children: /* @__PURE__ */ r("code", { children: [
614
+ /* @__PURE__ */ e("span", { style: { color: "rgba(34, 211, 238, 0.5)" }, children: "$" }),
615
+ " npx @tecture/core --port 3001"
616
+ ] })
617
+ }
618
+ )
619
+ ] })
620
+ ] })
621
+ ] }),
622
+ /* @__PURE__ */ r("div", { children: [
623
+ /* @__PURE__ */ e("h3", { className: "mb-6 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Icon Containers" }),
624
+ /* @__PURE__ */ e(
625
+ "div",
626
+ {
627
+ className: "border p-8",
628
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
629
+ children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-end gap-6", children: [
630
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
631
+ /* @__PURE__ */ e("div", { className: "mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-800/80 text-zinc-500", children: /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ e("path", { d: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" }) }) }),
632
+ /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "48 × 48" })
633
+ ] }),
634
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
635
+ /* @__PURE__ */ e(
636
+ "div",
637
+ {
638
+ className: "mb-2 flex h-10 w-10 items-center justify-center border",
639
+ style: {
640
+ borderColor: "rgba(34, 211, 238, 0.2)",
641
+ backgroundColor: "rgba(34, 211, 238, 0.05)",
642
+ color: "var(--accent-cyan)"
643
+ },
644
+ children: /* @__PURE__ */ e("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e("path", { d: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) })
645
+ }
646
+ ),
647
+ /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "40 × 40" })
648
+ ] }),
649
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
650
+ /* @__PURE__ */ e(
651
+ "div",
652
+ {
653
+ className: "mb-2 flex h-9 w-9 items-center justify-center border",
654
+ style: {
655
+ borderColor: "rgba(34, 211, 238, 0.2)",
656
+ backgroundColor: "rgba(34, 211, 238, 0.05)",
657
+ color: "var(--accent-cyan)"
658
+ },
659
+ children: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ e("path", { d: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) })
660
+ }
661
+ ),
662
+ /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "36 × 36" })
663
+ ] }),
664
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
665
+ /* @__PURE__ */ e("div", { className: "mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-800/80 text-zinc-500", children: /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
666
+ /* @__PURE__ */ e("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2" }),
667
+ /* @__PURE__ */ e("path", { d: "M8 7h8M8 11h8M8 15h4" })
668
+ ] }) }),
669
+ /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "32 × 32" })
670
+ ] })
671
+ ] })
672
+ }
673
+ )
674
+ ] })
675
+ ] })
676
+ ] }),
677
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
678
+ /* @__PURE__ */ e(A, { number: "Section 04", children: "Animation & Motion" }),
679
+ /* @__PURE__ */ r("div", { className: "space-y-8", children: [
680
+ /* @__PURE__ */ e(
681
+ "div",
682
+ {
683
+ className: "border p-8",
684
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
685
+ children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-8 sm:grid-cols-2", children: [
686
+ {
687
+ name: "fade-up",
688
+ class: "animate-fade-up",
689
+ duration: "0.7s",
690
+ easing: "cubic-bezier(0.16, 1, 0.3, 1)",
691
+ desc: "Primary entrance animation. Elements rise 24px with opacity fade."
692
+ },
693
+ {
694
+ name: "draw-line",
695
+ class: "animate-draw",
696
+ duration: "2s",
697
+ easing: "cubic-bezier(0.16, 1, 0.3, 1)",
698
+ desc: "SVG stroke animation for blueprint lines and decorative elements."
699
+ },
700
+ {
701
+ name: "pulse-glow",
702
+ class: "animate-pulse-glow",
703
+ duration: "3s infinite",
704
+ easing: "ease-in-out",
705
+ desc: "Continuous cyan halo pulse for live status indicators."
706
+ },
707
+ {
708
+ name: "grid-reveal",
709
+ class: "animate-grid-reveal",
710
+ duration: "1.5s",
711
+ easing: "ease-out",
712
+ desc: "Background fade-in for the blueprint grid container."
713
+ },
714
+ {
715
+ name: "slide-in-right",
716
+ class: "animate-slide-in-right",
717
+ duration: "0.2s",
718
+ easing: "ease-out",
719
+ desc: "Panel entrance from right edge. Used for side panels and drawers."
720
+ }
721
+ ].map((t) => /* @__PURE__ */ r("div", { className: "flex gap-4", children: [
722
+ /* @__PURE__ */ e(
723
+ "div",
724
+ {
725
+ className: "shrink-0 flex h-10 w-10 items-center justify-center border",
726
+ style: { borderColor: "var(--border-default)" },
727
+ children: t.name === "pulse-glow" ? /* @__PURE__ */ e(
728
+ "span",
729
+ {
730
+ className: "h-3 w-3 rounded-full animate-pulse-glow",
731
+ style: { backgroundColor: "var(--accent-cyan)" }
732
+ }
733
+ ) : /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ e("path", { d: "M2 14L8 2L14 14", stroke: "var(--accent-cyan)", strokeWidth: "1", opacity: "0.5" }) })
734
+ }
735
+ ),
736
+ /* @__PURE__ */ r("div", { children: [
737
+ /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
738
+ /* @__PURE__ */ e("span", { className: "text-xs font-semibold", style: { color: "var(--text-primary)" }, children: t.name }),
739
+ /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--accent-cyan)" }, children: t.duration })
740
+ ] }),
741
+ /* @__PURE__ */ e("div", { className: "mt-0.5 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: t.easing }),
742
+ /* @__PURE__ */ e("div", { className: "mt-1 text-xs leading-relaxed", style: { color: "var(--text-muted)" }, children: t.desc })
743
+ ] })
744
+ ] }, t.name)) })
745
+ }
746
+ ),
747
+ /* @__PURE__ */ r("div", { children: [
748
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Stagger Delays" }),
749
+ /* @__PURE__ */ r(
750
+ "div",
751
+ {
752
+ className: "border p-6",
753
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
754
+ children: [
755
+ /* @__PURE__ */ e("div", { className: "flex gap-2", children: [100, 200, 300, 400, 500, 600, 700, 800].map((t) => /* @__PURE__ */ r("div", { className: "flex-1 text-center", children: [
756
+ /* @__PURE__ */ e(
757
+ "div",
758
+ {
759
+ className: "h-2 mb-2",
760
+ style: {
761
+ backgroundColor: "var(--accent-cyan)",
762
+ opacity: 0.15 + t / 800 * 0.85
763
+ }
764
+ }
765
+ ),
766
+ /* @__PURE__ */ r("span", { className: "font-mono text-[9px]", style: { color: "var(--text-muted)" }, children: [
767
+ t,
768
+ "ms"
769
+ ] })
770
+ ] }, t)) }),
771
+ /* @__PURE__ */ e("div", { className: "mt-3 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "Apply with .delay-100 through .delay-800 classes for cascading entrance effects" })
772
+ ]
773
+ }
774
+ )
775
+ ] })
776
+ ] })
777
+ ] }),
778
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
779
+ /* @__PURE__ */ e(A, { number: "Section 05", children: "Layout & Spacing" }),
780
+ /* @__PURE__ */ r("div", { className: "space-y-10", children: [
781
+ /* @__PURE__ */ r("div", { children: [
782
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Container Widths" }),
783
+ /* @__PURE__ */ e("div", { className: "space-y-3", children: [
784
+ { label: "max-w-5xl", width: "64rem (1024px)", usage: "Landing hero, wide layouts" },
785
+ { label: "max-w-4xl", width: "56rem (896px)", usage: "Standard content sections, authenticated views" },
786
+ { label: "max-w-2xl", width: "42rem (672px)", usage: "Narrow text blocks, descriptions" },
787
+ { label: "max-w-xl", width: "36rem (576px)", usage: "Hero description paragraphs" }
788
+ ].map((t) => /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
789
+ /* @__PURE__ */ e(
790
+ "span",
791
+ {
792
+ className: "shrink-0 w-24 font-mono text-[11px] text-right",
793
+ style: { color: "var(--accent-cyan)" },
794
+ children: t.label
795
+ }
796
+ ),
797
+ /* @__PURE__ */ e(
798
+ "div",
799
+ {
800
+ className: "flex-1 h-6 border flex items-center px-3",
801
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-elevated)" },
802
+ children: /* @__PURE__ */ r("span", { className: "text-[10px]", style: { color: "var(--text-muted)" }, children: [
803
+ t.width,
804
+ " — ",
805
+ t.usage
806
+ ] })
807
+ }
808
+ )
809
+ ] }, t.label)) })
810
+ ] }),
811
+ /* @__PURE__ */ r("div", { children: [
812
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Grid Patterns" }),
813
+ /* @__PURE__ */ r("div", { className: "space-y-6", children: [
814
+ /* @__PURE__ */ r("div", { children: [
815
+ /* @__PURE__ */ e("div", { className: "mb-2 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "2 columns — sm:grid-cols-2, gap-3" }),
816
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-3", children: [1, 2].map((t) => /* @__PURE__ */ e(
817
+ "div",
818
+ {
819
+ className: "h-12 border flex items-center justify-center",
820
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-elevated)" },
821
+ children: /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: t })
822
+ },
823
+ t
824
+ )) })
825
+ ] }),
826
+ /* @__PURE__ */ r("div", { children: [
827
+ /* @__PURE__ */ e("div", { className: "mb-2 font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: "3 columns — sm:grid-cols-3, gap-6" }),
828
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-6", children: [1, 2, 3].map((t) => /* @__PURE__ */ e(
829
+ "div",
830
+ {
831
+ className: "h-12 border flex items-center justify-center",
832
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-elevated)" },
833
+ children: /* @__PURE__ */ e("span", { className: "font-mono text-[10px]", style: { color: "var(--text-muted)" }, children: t })
834
+ },
835
+ t
836
+ )) })
837
+ ] })
838
+ ] })
839
+ ] }),
840
+ /* @__PURE__ */ r("div", { children: [
841
+ /* @__PURE__ */ e("h3", { className: "mb-4 text-xs font-semibold uppercase tracking-wider", style: { color: "var(--text-muted)" }, children: "Common Spacing Values" }),
842
+ /* @__PURE__ */ e(
843
+ "div",
844
+ {
845
+ className: "border p-6",
846
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
847
+ children: /* @__PURE__ */ e("div", { className: "space-y-3", children: [
848
+ { label: "px-6", value: "24px", usage: "Page horizontal padding" },
849
+ { label: "py-6", value: "24px", usage: "Nav vertical padding" },
850
+ { label: "p-6", value: "24px", usage: "Feature card padding" },
851
+ { label: "p-4", value: "16px", usage: "List card padding" },
852
+ { label: "gap-6", value: "24px", usage: "Feature card grid gap" },
853
+ { label: "gap-3", value: "12px", usage: "List card grid gap, inline element gap" },
854
+ { label: "gap-2", value: "8px", usage: "Tight inline spacing" },
855
+ { label: "mt-12", value: "48px", usage: "Grid top margin after section header" },
856
+ { label: "py-20", value: "80px", usage: "Section vertical padding" },
857
+ { label: "pt-24", value: "96px", usage: "Hero top padding" }
858
+ ].map((t) => /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
859
+ /* @__PURE__ */ e(
860
+ "span",
861
+ {
862
+ className: "shrink-0 w-16 font-mono text-[11px] text-right",
863
+ style: { color: "var(--accent-cyan)" },
864
+ children: t.label
865
+ }
866
+ ),
867
+ /* @__PURE__ */ e(
868
+ "div",
869
+ {
870
+ className: "shrink-0 w-12 font-mono text-[10px]",
871
+ style: { color: "var(--text-muted)" },
872
+ children: t.value
873
+ }
874
+ ),
875
+ /* @__PURE__ */ e("div", { className: "flex-1 text-[11px]", style: { color: "var(--text-muted)" }, children: t.usage })
876
+ ] }, t.label)) })
877
+ }
878
+ )
879
+ ] })
880
+ ] })
881
+ ] }),
882
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
883
+ /* @__PURE__ */ e(A, { number: "Section 06", children: "Blueprint Decorations" }),
884
+ /* @__PURE__ */ r(
885
+ "div",
886
+ {
887
+ className: "border p-8",
888
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
889
+ children: [
890
+ /* @__PURE__ */ r("div", { className: "grid grid-cols-1 gap-10 sm:grid-cols-3", children: [
891
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
892
+ /* @__PURE__ */ e(
893
+ "div",
894
+ {
895
+ className: "mx-auto relative w-24 h-24 border",
896
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-deep)" },
897
+ children: /* @__PURE__ */ e("svg", { className: "absolute top-0 left-0", width: "16", height: "16", viewBox: "0 0 16 16", children: /* @__PURE__ */ e("path", { d: "M0 16 L0 0 L16 0", stroke: "var(--accent-cyan)", strokeWidth: "1.5", fill: "none", opacity: "0.3" }) })
898
+ }
899
+ ),
900
+ /* @__PURE__ */ e("div", { className: "mt-3 text-xs font-medium", style: { color: "var(--text-primary)" }, children: "Corner Bracket" }),
901
+ /* @__PURE__ */ e("div", { className: "mt-1 text-[10px]", style: { color: "var(--text-muted)" }, children: "Top-left of feature cards" })
902
+ ] }),
903
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
904
+ /* @__PURE__ */ e(
905
+ "div",
906
+ {
907
+ className: "mx-auto flex items-center justify-center w-24 h-24 border",
908
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-deep)" },
909
+ children: /* @__PURE__ */ r("svg", { width: "40", height: "40", viewBox: "0 0 40 40", children: [
910
+ /* @__PURE__ */ e("line", { x1: "20", y1: "0", x2: "20", y2: "40", stroke: "var(--accent-cyan)", strokeWidth: "0.5" }),
911
+ /* @__PURE__ */ e("line", { x1: "0", y1: "20", x2: "40", y2: "20", stroke: "var(--accent-cyan)", strokeWidth: "0.5" }),
912
+ /* @__PURE__ */ e("circle", { cx: "20", cy: "20", r: "8", stroke: "var(--accent-cyan)", strokeWidth: "0.5", fill: "none" })
913
+ ] })
914
+ }
915
+ ),
916
+ /* @__PURE__ */ e("div", { className: "mt-3 text-xs font-medium", style: { color: "var(--text-primary)" }, children: "Registration Mark" }),
917
+ /* @__PURE__ */ e("div", { className: "mt-1 text-[10px]", style: { color: "var(--text-muted)" }, children: "Page corners at 20% opacity" })
918
+ ] }),
919
+ /* @__PURE__ */ r("div", { className: "text-center", children: [
920
+ /* @__PURE__ */ e(
921
+ "div",
922
+ {
923
+ className: "mx-auto w-24 h-24 blueprint-grid border",
924
+ style: { borderColor: "var(--border-default)" }
925
+ }
926
+ ),
927
+ /* @__PURE__ */ e("div", { className: "mt-3 text-xs font-medium", style: { color: "var(--text-primary)" }, children: "Blueprint Grid" }),
928
+ /* @__PURE__ */ e("div", { className: "mt-1 text-[10px]", style: { color: "var(--text-muted)" }, children: "100px major / 20px minor grid" })
929
+ ] })
930
+ ] }),
931
+ /* @__PURE__ */ e("div", { className: "mt-10 flex justify-center", children: /* @__PURE__ */ r(
932
+ "div",
933
+ {
934
+ className: "inline-block border border-dashed px-8 py-4",
935
+ style: { borderColor: "var(--border-default)" },
936
+ children: [
937
+ /* @__PURE__ */ e(
938
+ "div",
939
+ {
940
+ className: "font-mono text-[10px] tracking-widest uppercase mb-1",
941
+ style: { color: "var(--text-muted)" },
942
+ children: "Title Block"
943
+ }
944
+ ),
945
+ /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "Used as footer element — dashed border, centered" })
946
+ ]
947
+ }
948
+ ) })
949
+ ]
950
+ }
951
+ )
952
+ ] }),
953
+ /* @__PURE__ */ r("section", { className: "mx-auto max-w-5xl px-6 py-16", children: [
954
+ /* @__PURE__ */ e(A, { number: "Section 07", children: "Usage Guidelines" }),
955
+ /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2", children: [
956
+ {
957
+ title: "Landing pages",
958
+ items: [
959
+ "Use blueprint-grid background with animate-grid-reveal",
960
+ "Apply .font-display on hero headings (Inter 600, -0.02em tracking)",
961
+ "Stagger entrance animations with delay-100 to delay-800",
962
+ "Include registration marks in page corners",
963
+ "Use corner brackets on feature cards",
964
+ "Buttons: rounded-none (angular, blueprint aesthetic)"
965
+ ]
966
+ },
967
+ {
968
+ title: "Authenticated views",
969
+ items: [
970
+ "Plain bg-deep background (no blueprint grid)",
971
+ "Inter for all text at normal / medium weight",
972
+ "Cards: rounded-xl with zinc-800 borders",
973
+ "Hover states: lighten borders and backgrounds",
974
+ "Use max-w-4xl for content containers",
975
+ "Buttons: rounded-lg for nav items"
976
+ ]
977
+ },
978
+ {
979
+ title: "Dark theme principles",
980
+ items: [
981
+ "Three-tier background depth: deep → surface → elevated",
982
+ "Text hierarchy: primary → secondary → muted",
983
+ "Borders at low opacity to maintain depth without harsh lines",
984
+ "Accent colors at reduced opacity for backgrounds (5–10%)",
985
+ "Cyan as the primary accent, amber for CTAs only"
986
+ ]
987
+ },
988
+ {
989
+ title: "Motion principles",
990
+ items: [
991
+ "All entrances use cubic-bezier(0.16, 1, 0.3, 1) — fast start, gentle settle",
992
+ "Stagger sibling elements by 100ms increments",
993
+ "Keep hover transitions simple: transition-all or transition-colors",
994
+ "Reserve pulse-glow for live status indicators only",
995
+ "SVG blueprint lines use animate-draw for progressive reveal"
996
+ ]
997
+ }
998
+ ].map((t) => /* @__PURE__ */ r(
999
+ "div",
1000
+ {
1001
+ className: "relative border p-6 overflow-hidden",
1002
+ style: { borderColor: "var(--border-default)", backgroundColor: "var(--bg-surface)" },
1003
+ children: [
1004
+ /* @__PURE__ */ e("svg", { className: "absolute top-0 left-0", width: "16", height: "16", viewBox: "0 0 16 16", children: /* @__PURE__ */ e("path", { d: "M0 16 L0 0 L16 0", stroke: "var(--accent-cyan)", strokeWidth: "1.5", fill: "none", opacity: "0.3" }) }),
1005
+ /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", style: { color: "var(--text-primary)" }, children: t.title }),
1006
+ /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: t.items.map((a, o) => /* @__PURE__ */ r(
1007
+ "li",
1008
+ {
1009
+ className: "flex gap-2 text-xs leading-relaxed",
1010
+ style: { color: "var(--text-muted)" },
1011
+ children: [
1012
+ /* @__PURE__ */ e("span", { style: { color: "var(--accent-cyan)" }, children: "·" }),
1013
+ a
1014
+ ]
1015
+ },
1016
+ o
1017
+ )) })
1018
+ ]
1019
+ },
1020
+ t.title
1021
+ )) })
1022
+ ] }),
1023
+ /* @__PURE__ */ e("footer", { className: "py-12 text-center", children: /* @__PURE__ */ r(
1024
+ "div",
1025
+ {
1026
+ className: "mx-auto inline-block border border-dashed px-8 py-4",
1027
+ style: { borderColor: "var(--border-default)" },
1028
+ children: [
1029
+ /* @__PURE__ */ e(
1030
+ "div",
1031
+ {
1032
+ className: "font-mono text-[10px] tracking-widest uppercase mb-1",
1033
+ style: { color: "var(--text-muted)" },
1034
+ children: "Style Guide"
1035
+ }
1036
+ ),
1037
+ /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "Tecture IO Blueprint Design System — Rev 1.0" })
1038
+ ]
1039
+ }
1040
+ ) })
1041
+ ] });
1042
+ }
1043
+ const Oe = {
1044
+ system: {
1045
+ label: "System",
1046
+ bg: "#0d1320",
1047
+ bgHover: "#111827",
1048
+ border: "#1e3a5f",
1049
+ accent: "#94a3b8",
1050
+ text: "#e2e8f0",
1051
+ iconPaths: [
1052
+ { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", fill: "#94a3b8", opacity: 0.1 },
1053
+ { d: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z", stroke: "#94a3b8", strokeWidth: 1.5 },
1054
+ { d: "M3.27 6.96L12 12.01l8.73-5.05", stroke: "#94a3b8", strokeWidth: 1.5 },
1055
+ { d: "M12 22.08V12", stroke: "#94a3b8", strokeWidth: 1.5 }
1056
+ ],
1057
+ accentGlow: "rgba(148,163,184,0.08)"
1058
+ },
1059
+ person: {
1060
+ label: "Person",
1061
+ bg: "#0f1419",
1062
+ bgHover: "#151c24",
1063
+ border: "#334155",
1064
+ accent: "#cbd5e1",
1065
+ text: "#f1f5f9",
1066
+ iconPaths: [
1067
+ { d: "M12 12a4 4 0 100-8 4 4 0 000 8z", fill: "#cbd5e1", opacity: 0.1 },
1068
+ { d: "M12 12a4 4 0 100-8 4 4 0 000 8z", stroke: "#cbd5e1", strokeWidth: 1.5 },
1069
+ { d: "M4 21a8 8 0 0116 0", stroke: "#cbd5e1", strokeWidth: 1.5 }
1070
+ ],
1071
+ accentGlow: "rgba(203,213,225,0.08)"
1072
+ },
1073
+ service: {
1074
+ label: "Service",
1075
+ bg: "#0d1025",
1076
+ bgHover: "#131738",
1077
+ border: "#252680",
1078
+ accent: "#818cf8",
1079
+ text: "#e0e7ff",
1080
+ iconPaths: [
1081
+ { d: "M12 15a3 3 0 100-6 3 3 0 000 6z", fill: "#818cf8", opacity: 0.1 },
1082
+ { d: "M12 15a3 3 0 100-6 3 3 0 000 6z", stroke: "#818cf8", strokeWidth: 1.5 },
1083
+ { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z", stroke: "#818cf8", strokeWidth: 1.5 }
1084
+ ],
1085
+ accentGlow: "rgba(129,140,248,0.08)"
1086
+ },
1087
+ database: {
1088
+ label: "Database",
1089
+ bg: "#081a14",
1090
+ bgHover: "#0c2a1e",
1091
+ border: "#065f46",
1092
+ accent: "#34d399",
1093
+ text: "#d1fae5",
1094
+ iconPaths: [
1095
+ { d: "M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4v10c0 2.21-3.582 4-8 4s-8-1.79-8-4V7z", fill: "#34d399", opacity: 0.1 },
1096
+ { d: "M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4", stroke: "#34d399", strokeWidth: 1.5 }
1097
+ ],
1098
+ accentGlow: "rgba(52,211,153,0.08)"
1099
+ },
1100
+ queue: {
1101
+ label: "Queue",
1102
+ bg: "#18140a",
1103
+ bgHover: "#241e10",
1104
+ border: "#854d0e",
1105
+ accent: "#fbbf24",
1106
+ text: "#fef3c7",
1107
+ iconPaths: [
1108
+ { d: "M4 4h16v5H4zM4 13h16v5H4z", fill: "#fbbf24", opacity: 0.08 },
1109
+ { d: "M21 12l-18 0", stroke: "#fbbf24", strokeWidth: 1.5 },
1110
+ { d: "M4 4h16v5H4zM4 13h16v5H4z", stroke: "#fbbf24", strokeWidth: 1.5 },
1111
+ { d: "M8 8h.01M8 17h.01", stroke: "#fbbf24", strokeWidth: 2.5 }
1112
+ ],
1113
+ accentGlow: "rgba(251,191,36,0.08)"
1114
+ },
1115
+ gateway: {
1116
+ label: "Gateway",
1117
+ bg: "#100d20",
1118
+ bgHover: "#181535",
1119
+ border: "#4c1d95",
1120
+ accent: "#a78bfa",
1121
+ text: "#ede9fe",
1122
+ iconPaths: [
1123
+ { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", fill: "#a78bfa", opacity: 0.1 },
1124
+ { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z", stroke: "#a78bfa", strokeWidth: 1.5 },
1125
+ { d: "M9 12l2 2 4-4", stroke: "#a78bfa", strokeWidth: 2 }
1126
+ ],
1127
+ accentGlow: "rgba(167,139,250,0.08)"
1128
+ },
1129
+ frontend: {
1130
+ label: "Frontend",
1131
+ bg: "#081420",
1132
+ bgHover: "#0c1e35",
1133
+ border: "#0c4a6e",
1134
+ accent: "#38bdf8",
1135
+ text: "#e0f2fe",
1136
+ iconPaths: [
1137
+ { d: "M3 5a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z", fill: "#38bdf8", opacity: 0.1 },
1138
+ { d: "M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z", stroke: "#38bdf8", strokeWidth: 1.5 },
1139
+ { d: "M3 13h18", stroke: "#38bdf8", strokeWidth: 1.5 },
1140
+ { d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3", stroke: "#38bdf8", strokeWidth: 1.5 }
1141
+ ],
1142
+ accentGlow: "rgba(56,189,248,0.08)"
1143
+ },
1144
+ cache: {
1145
+ label: "Cache",
1146
+ bg: "#18100a",
1147
+ bgHover: "#241810",
1148
+ border: "#7c2d12",
1149
+ accent: "#fb923c",
1150
+ text: "#ffedd5",
1151
+ iconPaths: [
1152
+ { d: "M13 10V3L4 14h7v7l9-11h-7z", fill: "#fb923c", opacity: 0.1 },
1153
+ { d: "M13 10V3L4 14h7v7l9-11h-7z", stroke: "#fb923c", strokeWidth: 1.5 }
1154
+ ],
1155
+ accentGlow: "rgba(251,146,60,0.08)"
1156
+ },
1157
+ storage: {
1158
+ label: "Storage",
1159
+ bg: "#081816",
1160
+ bgHover: "#0c2826",
1161
+ border: "#134e4a",
1162
+ accent: "#2dd4bf",
1163
+ text: "#ccfbf1",
1164
+ iconPaths: [
1165
+ { d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z", fill: "#2dd4bf", opacity: 0.1 },
1166
+ { d: "M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2h6l2-2h6a2 2 0 012 2v12z", stroke: "#2dd4bf", strokeWidth: 1.5 }
1167
+ ],
1168
+ accentGlow: "rgba(45,212,191,0.08)"
1169
+ },
1170
+ external: {
1171
+ label: "External",
1172
+ bg: "#0d1118",
1173
+ bgHover: "#141a22",
1174
+ border: "#1e2d4a",
1175
+ accent: "#a1a1aa",
1176
+ text: "#e4e4e7",
1177
+ iconPaths: [
1178
+ { d: "M12 21a9 9 0 100-18 9 9 0 000 18z", fill: "#a1a1aa", opacity: 0.08 },
1179
+ { d: "M12 21a9 9 0 100-18 9 9 0 000 18z", stroke: "#a1a1aa", strokeWidth: 1.5 },
1180
+ { d: "M3.6 9h16.8M3.6 15h16.8", stroke: "#a1a1aa", strokeWidth: 1.5 },
1181
+ { d: "M12 3c2.2 2.5 3.5 5.5 3.5 9s-1.3 6.5-3.5 9c-2.2-2.5-3.5-5.5-3.5-9s1.3-6.5 3.5-9z", stroke: "#a1a1aa", strokeWidth: 1.5 }
1182
+ ],
1183
+ accentGlow: "rgba(161,161,170,0.08)"
1184
+ }
1185
+ }, Q = {
1186
+ label: "Component",
1187
+ bg: "#0a0f1a",
1188
+ bgHover: "#0f1628",
1189
+ border: "#1e2d4a",
1190
+ accent: "#64748b",
1191
+ text: "#e2e8f0",
1192
+ iconPaths: [
1193
+ { d: "M20 7l-8-4-8 4v10l8 4 8-4V7z", fill: "#64748b", opacity: 0.1 },
1194
+ { d: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4", stroke: "#64748b", strokeWidth: 1.5 }
1195
+ ],
1196
+ accentGlow: "rgba(100,116,139,0.08)"
1197
+ };
1198
+ function O(t) {
1199
+ return t ? Oe[t] ?? Q : Q;
1200
+ }
1201
+ function I(t) {
1202
+ var a, o;
1203
+ return {
1204
+ x: t.internals.positionAbsolute.x + (((a = t.measured) == null ? void 0 : a.width) ?? 0) / 2,
1205
+ y: t.internals.positionAbsolute.y + (((o = t.measured) == null ? void 0 : o.height) ?? 0) / 2
1206
+ };
1207
+ }
1208
+ function _e(t, a) {
1209
+ const o = I(t), n = I(a), l = Math.abs(o.x - n.x), i = Math.abs(o.y - n.y);
1210
+ return l > i ? o.x > n.x ? y.Left : y.Right : o.y > n.y ? y.Top : y.Bottom;
1211
+ }
1212
+ function J(t, a, o) {
1213
+ const n = I(t), l = I(a), i = Math.abs(n.x - l.x), s = Math.abs(n.y - l.y);
1214
+ let c;
1215
+ i > s ? c = n.x > l.x ? y.Left : y.Right : c = n.y > l.y ? y.Top : y.Bottom;
1216
+ const [u, d] = Ue(t, c, o);
1217
+ return [u, d, c];
1218
+ }
1219
+ function Ue(t, a, o) {
1220
+ var d, h, g;
1221
+ const n = (d = t.internals.handleBounds) == null ? void 0 : d[o], l = n == null ? void 0 : n.find((f) => f.position === a);
1222
+ if (!l)
1223
+ return [
1224
+ t.internals.positionAbsolute.x + (((h = t.measured) == null ? void 0 : h.width) ?? 0) / 2,
1225
+ t.internals.positionAbsolute.y + (((g = t.measured) == null ? void 0 : g.height) ?? 0) / 2
1226
+ ];
1227
+ let i = l.width / 2, s = l.height / 2;
1228
+ switch (a) {
1229
+ case y.Left:
1230
+ i = 0;
1231
+ break;
1232
+ case y.Right:
1233
+ i = l.width;
1234
+ break;
1235
+ case y.Top:
1236
+ s = 0;
1237
+ break;
1238
+ case y.Bottom:
1239
+ s = l.height;
1240
+ break;
1241
+ }
1242
+ const c = t.internals.positionAbsolute.x + l.x + i, u = t.internals.positionAbsolute.y + l.y + s;
1243
+ return [c, u];
1244
+ }
1245
+ function Ye(t, a) {
1246
+ const [o, n, l] = J(t, a, "source"), [i, s, c] = J(a, t, "target");
1247
+ return { sx: o, sy: n, tx: i, ty: s, sourcePos: l, targetPos: c };
1248
+ }
1249
+ function Xe() {
1250
+ const t = se(), a = ce((o) => {
1251
+ if (!t) return /* @__PURE__ */ new Set();
1252
+ const n = o.nodeLookup.get(t);
1253
+ if (!n) return /* @__PURE__ */ new Set();
1254
+ const l = /* @__PURE__ */ new Set();
1255
+ for (const i of o.edges) {
1256
+ let s = null;
1257
+ if (i.source === t ? s = i.target : i.target === t && (s = i.source), !s) continue;
1258
+ const c = o.nodeLookup.get(s);
1259
+ c && l.add(_e(n, c));
1260
+ }
1261
+ return l;
1262
+ });
1263
+ return E(() => a, [a]);
1264
+ }
1265
+ const de = ie(null), me = [
1266
+ { position: y.Top, prefix: "top" },
1267
+ { position: y.Bottom, prefix: "bottom" },
1268
+ { position: y.Left, prefix: "left" },
1269
+ { position: y.Right, prefix: "right" }
1270
+ ];
1271
+ function Ke({ data: t, selected: a }) {
1272
+ const o = t, n = O(o.nodeType), l = Xe(), i = (s) => {
1273
+ s.stopPropagation(), o.subDiagramId && (window.location.hash = `#/diagram/${o.subDiagramId}`);
1274
+ };
1275
+ return o.isContainer || o.hasChildren ? /* @__PURE__ */ e(
1276
+ qe,
1277
+ {
1278
+ d: o,
1279
+ style: n,
1280
+ selected: a ?? !1,
1281
+ activeSides: l,
1282
+ onDrillDown: i
1283
+ }
1284
+ ) : /* @__PURE__ */ r(
1285
+ "div",
1286
+ {
1287
+ className: `group relative border px-5 py-4 text-center ${o.hasSubDiagram ? "transition-shadow duration-200 hover:ring-1 hover:ring-offset-1 hover:ring-offset-transparent" : ""}`,
1288
+ style: {
1289
+ background: n.bg,
1290
+ borderColor: n.border,
1291
+ color: n.text,
1292
+ minWidth: 160,
1293
+ cursor: "pointer",
1294
+ "--tw-ring-color": o.hasSubDiagram ? n.accent : void 0
1295
+ },
1296
+ children: [
1297
+ /* @__PURE__ */ e(ue, { accent: n.accent }),
1298
+ me.map(({ position: s, prefix: c }) => {
1299
+ const u = l.has(s);
1300
+ return /* @__PURE__ */ e(
1301
+ he,
1302
+ {
1303
+ position: s,
1304
+ prefix: c,
1305
+ style: n,
1306
+ isActive: u
1307
+ },
1308
+ c
1309
+ );
1310
+ }),
1311
+ /* @__PURE__ */ e("div", { className: "mx-auto mb-2.5 flex items-center justify-center", children: /* @__PURE__ */ e(
1312
+ "svg",
1313
+ {
1314
+ width: "28",
1315
+ height: "28",
1316
+ viewBox: "0 0 24 24",
1317
+ fill: "none",
1318
+ strokeLinecap: "round",
1319
+ strokeLinejoin: "round",
1320
+ className: "shrink-0",
1321
+ children: n.iconPaths.map((s, c) => /* @__PURE__ */ e(
1322
+ "path",
1323
+ {
1324
+ d: s.d,
1325
+ fill: s.fill ?? "none",
1326
+ stroke: s.stroke ?? "none",
1327
+ strokeWidth: s.strokeWidth ?? 0,
1328
+ opacity: s.opacity ?? 1
1329
+ },
1330
+ c
1331
+ ))
1332
+ }
1333
+ ) }),
1334
+ /* @__PURE__ */ e(
1335
+ "div",
1336
+ {
1337
+ className: "truncate text-[13px] leading-tight font-semibold tracking-tight",
1338
+ style: { fontFamily: "var(--font-sans)" },
1339
+ children: o.label
1340
+ }
1341
+ ),
1342
+ o.technology && /* @__PURE__ */ e(
1343
+ "div",
1344
+ {
1345
+ className: "mx-auto mt-1 w-fit px-1.5 py-px text-[9px] leading-tight font-medium",
1346
+ style: {
1347
+ color: `${n.accent}99`,
1348
+ fontFamily: "var(--font-mono)",
1349
+ letterSpacing: "0.08em"
1350
+ },
1351
+ children: o.technology
1352
+ }
1353
+ ),
1354
+ o.hasSubDiagram && /* @__PURE__ */ r(
1355
+ "div",
1356
+ {
1357
+ onClick: i,
1358
+ 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",
1359
+ style: {
1360
+ background: `${n.accent}10`,
1361
+ color: n.accent,
1362
+ border: `1px solid ${n.accent}25`,
1363
+ fontFamily: "var(--font-mono)",
1364
+ letterSpacing: "0.05em"
1365
+ },
1366
+ children: [
1367
+ /* @__PURE__ */ e("span", { children: "Drill down" }),
1368
+ /* @__PURE__ */ e(pe, {})
1369
+ ]
1370
+ }
1371
+ )
1372
+ ]
1373
+ }
1374
+ );
1375
+ }
1376
+ const ee = 16, Ze = 48;
1377
+ function qe({ d: t, style: a, selected: o, activeSides: n, onDrillDown: l }) {
1378
+ const i = se(), s = P(de), c = M(() => {
1379
+ s == null || s.notifyLayoutChanged();
1380
+ }, [s]), u = ce(
1381
+ M(
1382
+ (d) => {
1383
+ var f, x, w, k;
1384
+ let h = 200, g = Ze + 40;
1385
+ if (!i) return { minWidth: h, minHeight: g };
1386
+ for (const m of d.nodeLookup.values()) {
1387
+ if (m.parentId !== i) continue;
1388
+ 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;
1389
+ N > h && (h = N), v > g && (g = v);
1390
+ }
1391
+ return { minWidth: h, minHeight: g };
1392
+ },
1393
+ [i]
1394
+ ),
1395
+ (d, h) => d.minWidth === h.minWidth && d.minHeight === h.minHeight
1396
+ );
1397
+ return /* @__PURE__ */ r(
1398
+ "div",
1399
+ {
1400
+ className: "group relative",
1401
+ style: {
1402
+ width: "100%",
1403
+ height: "100%",
1404
+ background: `${a.accent}08`,
1405
+ border: `1.5px dashed ${a.accent}80`,
1406
+ color: a.text,
1407
+ cursor: "pointer",
1408
+ boxShadow: `inset 0 0 0 1px ${a.accent}14`
1409
+ },
1410
+ children: [
1411
+ /* @__PURE__ */ e(
1412
+ we,
1413
+ {
1414
+ isVisible: o,
1415
+ minWidth: u.minWidth,
1416
+ minHeight: u.minHeight,
1417
+ onResizeEnd: c,
1418
+ lineStyle: {
1419
+ borderColor: `${a.accent}55`,
1420
+ borderWidth: 1
1421
+ },
1422
+ handleStyle: {
1423
+ width: 9,
1424
+ height: 9,
1425
+ background: a.accent,
1426
+ border: `2px solid ${a.bg}`,
1427
+ borderRadius: 0,
1428
+ boxShadow: `0 0 0 1px ${a.accent}`
1429
+ }
1430
+ }
1431
+ ),
1432
+ /* @__PURE__ */ e(ue, { accent: a.accent }),
1433
+ me.map(({ position: d, prefix: h }) => {
1434
+ const g = n.has(d);
1435
+ return /* @__PURE__ */ e(
1436
+ he,
1437
+ {
1438
+ position: d,
1439
+ prefix: h,
1440
+ style: a,
1441
+ isActive: g
1442
+ },
1443
+ h
1444
+ );
1445
+ }),
1446
+ /* @__PURE__ */ r(
1447
+ "div",
1448
+ {
1449
+ className: "pointer-events-auto absolute top-0 right-0 left-0 flex items-center justify-between gap-2 px-3 py-2",
1450
+ style: {
1451
+ borderBottom: `1px dashed ${a.accent}55`,
1452
+ background: `${a.bg}e6`
1453
+ },
1454
+ children: [
1455
+ /* @__PURE__ */ r("div", { className: "flex min-w-0 items-center gap-2", children: [
1456
+ /* @__PURE__ */ e(
1457
+ "svg",
1458
+ {
1459
+ width: "16",
1460
+ height: "16",
1461
+ viewBox: "0 0 24 24",
1462
+ fill: "none",
1463
+ strokeLinecap: "round",
1464
+ strokeLinejoin: "round",
1465
+ className: "shrink-0",
1466
+ children: a.iconPaths.map((d, h) => /* @__PURE__ */ e(
1467
+ "path",
1468
+ {
1469
+ d: d.d,
1470
+ fill: d.fill ?? "none",
1471
+ stroke: d.stroke ?? "none",
1472
+ strokeWidth: d.strokeWidth ?? 0,
1473
+ opacity: d.opacity ?? 1
1474
+ },
1475
+ h
1476
+ ))
1477
+ }
1478
+ ),
1479
+ /* @__PURE__ */ e(
1480
+ "div",
1481
+ {
1482
+ className: "truncate text-[12px] leading-tight font-semibold tracking-tight",
1483
+ style: { fontFamily: "var(--font-sans)" },
1484
+ children: t.label
1485
+ }
1486
+ ),
1487
+ t.technology && /* @__PURE__ */ e(
1488
+ "span",
1489
+ {
1490
+ className: "shrink-0 text-[9px] leading-tight font-medium",
1491
+ style: {
1492
+ color: `${a.accent}99`,
1493
+ fontFamily: "var(--font-mono)",
1494
+ letterSpacing: "0.08em"
1495
+ },
1496
+ children: t.technology
1497
+ }
1498
+ )
1499
+ ] }),
1500
+ t.hasSubDiagram && /* @__PURE__ */ r(
1501
+ "div",
1502
+ {
1503
+ onClick: l,
1504
+ className: "flex shrink-0 cursor-pointer items-center gap-1 px-2 py-0.5 text-[10px] font-medium transition-opacity hover:opacity-80",
1505
+ style: {
1506
+ background: `${a.accent}10`,
1507
+ color: a.accent,
1508
+ border: `1px solid ${a.accent}25`,
1509
+ fontFamily: "var(--font-mono)",
1510
+ letterSpacing: "0.05em"
1511
+ },
1512
+ children: [
1513
+ /* @__PURE__ */ e("span", { children: "Drill down" }),
1514
+ /* @__PURE__ */ e(pe, {})
1515
+ ]
1516
+ }
1517
+ )
1518
+ ]
1519
+ }
1520
+ )
1521
+ ]
1522
+ }
1523
+ );
1524
+ }
1525
+ function ue({ accent: t }) {
1526
+ return /* @__PURE__ */ r(H, { children: [
1527
+ /* @__PURE__ */ e(
1528
+ "svg",
1529
+ {
1530
+ className: "pointer-events-none absolute top-0 left-0",
1531
+ width: "12",
1532
+ height: "12",
1533
+ viewBox: "0 0 12 12",
1534
+ children: /* @__PURE__ */ e(
1535
+ "path",
1536
+ {
1537
+ d: "M0 12 L0 0 L12 0",
1538
+ stroke: t,
1539
+ strokeWidth: "1.5",
1540
+ fill: "none",
1541
+ opacity: "0.3"
1542
+ }
1543
+ )
1544
+ }
1545
+ ),
1546
+ /* @__PURE__ */ e(
1547
+ "svg",
1548
+ {
1549
+ className: "pointer-events-none absolute right-0 bottom-0",
1550
+ width: "12",
1551
+ height: "12",
1552
+ viewBox: "0 0 12 12",
1553
+ children: /* @__PURE__ */ e(
1554
+ "path",
1555
+ {
1556
+ d: "M12 0 L12 12 L0 12",
1557
+ stroke: t,
1558
+ strokeWidth: "1.5",
1559
+ fill: "none",
1560
+ opacity: "0.3"
1561
+ }
1562
+ )
1563
+ }
1564
+ )
1565
+ ] });
1566
+ }
1567
+ function he({
1568
+ position: t,
1569
+ prefix: a,
1570
+ style: o,
1571
+ isActive: n
1572
+ }) {
1573
+ const l = {
1574
+ background: o.accent,
1575
+ width: 6,
1576
+ height: 6,
1577
+ border: `2px solid ${o.bg}`,
1578
+ boxShadow: `0 0 0 1px ${o.accent}`,
1579
+ opacity: n ? 1 : 0,
1580
+ transition: "opacity 0.2s ease",
1581
+ borderRadius: 0
1582
+ };
1583
+ return /* @__PURE__ */ r("span", { children: [
1584
+ /* @__PURE__ */ e(
1585
+ X,
1586
+ {
1587
+ type: "source",
1588
+ position: t,
1589
+ id: `${a}-source`,
1590
+ isConnectable: !1,
1591
+ style: l
1592
+ }
1593
+ ),
1594
+ /* @__PURE__ */ e(
1595
+ X,
1596
+ {
1597
+ type: "target",
1598
+ position: t,
1599
+ id: `${a}-target`,
1600
+ isConnectable: !1,
1601
+ style: l
1602
+ }
1603
+ )
1604
+ ] });
1605
+ }
1606
+ function pe() {
1607
+ return /* @__PURE__ */ e(
1608
+ "svg",
1609
+ {
1610
+ width: "8",
1611
+ height: "8",
1612
+ viewBox: "0 0 24 24",
1613
+ fill: "none",
1614
+ stroke: "currentColor",
1615
+ strokeWidth: "2.5",
1616
+ strokeLinecap: "round",
1617
+ strokeLinejoin: "round",
1618
+ children: /* @__PURE__ */ e("polyline", { points: "9 18 15 12 9 6" })
1619
+ }
1620
+ );
1621
+ }
1622
+ const Qe = ye(Ke), Je = {
1623
+ calls: { color: "#818cf8", dashed: !1, animated: !1, label: "Calls" },
1624
+ "data-flow": { color: "#34d399", dashed: !1, animated: !0, label: "Data Flow" },
1625
+ publishes: { color: "#fbbf24", dashed: !0, animated: !1, label: "Publishes" },
1626
+ subscribes: { color: "#fbbf24", dashed: !0, animated: !1, label: "Subscribes" },
1627
+ reads: { color: "#34d399", dashed: !1, animated: !1, label: "Reads" },
1628
+ writes: { color: "#fb923c", dashed: !1, animated: !1, label: "Writes" }
1629
+ }, te = {
1630
+ color: "#22d3ee",
1631
+ dashed: !1,
1632
+ animated: !1,
1633
+ label: "Connection"
1634
+ };
1635
+ function ge(t) {
1636
+ return t ? Je[t] ?? te : te;
1637
+ }
1638
+ function et({ diagram: t }) {
1639
+ const [a, o] = C(!1), { nodeTypes: n, edgeTypes: l } = E(() => {
1640
+ var c, u;
1641
+ const i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
1642
+ for (const d of t.nodes)
1643
+ typeof ((c = d.meta) == null ? void 0 : c.type) == "string" && i.add(d.meta.type);
1644
+ for (const d of t.edges)
1645
+ typeof ((u = d.meta) == null ? void 0 : u.type) == "string" && s.add(d.meta.type);
1646
+ return { nodeTypes: [...i].sort(), edgeTypes: [...s].sort() };
1647
+ }, [t]);
1648
+ return n.length === 0 && l.length === 0 ? null : /* @__PURE__ */ e(Ce, { position: "top-right", className: "!m-3", children: /* @__PURE__ */ r(
1649
+ "div",
1650
+ {
1651
+ className: "flex flex-col border shadow-lg backdrop-blur-md",
1652
+ style: {
1653
+ background: "rgba(10, 15, 26, 0.85)",
1654
+ borderColor: "#1e2d4a",
1655
+ color: "var(--text, #e2e8f0)",
1656
+ fontFamily: "var(--font-mono)"
1657
+ },
1658
+ children: [
1659
+ /* @__PURE__ */ r(
1660
+ "button",
1661
+ {
1662
+ type: "button",
1663
+ onClick: () => o((i) => !i),
1664
+ className: "flex items-center gap-2 px-3 py-1.5 text-[10px] tracking-[0.2em] uppercase transition-colors hover:text-white",
1665
+ style: { color: "var(--text-muted, #94a3b8)" },
1666
+ "aria-expanded": a,
1667
+ children: [
1668
+ /* @__PURE__ */ e(ot, {}),
1669
+ /* @__PURE__ */ e("span", { children: "Legend" }),
1670
+ /* @__PURE__ */ e(nt, { open: a })
1671
+ ]
1672
+ }
1673
+ ),
1674
+ a && /* @__PURE__ */ r(
1675
+ "div",
1676
+ {
1677
+ className: "flex flex-col gap-3 border-t px-3 py-2.5",
1678
+ style: { borderColor: "#1e2d4a", minWidth: 180 },
1679
+ children: [
1680
+ n.length > 0 && /* @__PURE__ */ e(re, { title: "Nodes", children: n.map((i) => /* @__PURE__ */ e(tt, { type: i, style: O(i) }, i)) }),
1681
+ l.length > 0 && /* @__PURE__ */ e(re, { title: "Edges", children: l.map((i) => /* @__PURE__ */ e(rt, { style: ge(i) }, i)) })
1682
+ ]
1683
+ }
1684
+ )
1685
+ ]
1686
+ }
1687
+ ) });
1688
+ }
1689
+ function re({
1690
+ title: t,
1691
+ children: a
1692
+ }) {
1693
+ return /* @__PURE__ */ r("div", { className: "flex flex-col gap-1.5", children: [
1694
+ /* @__PURE__ */ e(
1695
+ "div",
1696
+ {
1697
+ className: "text-[9px] tracking-[0.25em] uppercase",
1698
+ style: { color: "var(--text-muted, #64748b)" },
1699
+ children: t
1700
+ }
1701
+ ),
1702
+ /* @__PURE__ */ e("div", { className: "flex flex-col gap-1", children: a })
1703
+ ] });
1704
+ }
1705
+ function tt({ type: t, style: a }) {
1706
+ return /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-[11px]", children: [
1707
+ /* @__PURE__ */ e(
1708
+ "span",
1709
+ {
1710
+ className: "flex h-6 w-6 shrink-0 items-center justify-center border",
1711
+ style: { background: a.bg, borderColor: a.border },
1712
+ 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)) })
1713
+ }
1714
+ ),
1715
+ /* @__PURE__ */ e("span", { style: { color: a.accent }, children: a.label }),
1716
+ a.label.toLowerCase() !== t && /* @__PURE__ */ e(
1717
+ "span",
1718
+ {
1719
+ className: "text-[9px] uppercase tracking-wider",
1720
+ style: { color: "var(--text-muted, #64748b)" },
1721
+ children: t
1722
+ }
1723
+ )
1724
+ ] });
1725
+ }
1726
+ function rt({ style: t }) {
1727
+ const a = t.dashed ? "4 3" : void 0;
1728
+ return /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-[11px]", children: [
1729
+ /* @__PURE__ */ r("svg", { width: "28", height: "10", className: "shrink-0", children: [
1730
+ /* @__PURE__ */ e(
1731
+ "line",
1732
+ {
1733
+ x1: "1",
1734
+ y1: "5",
1735
+ x2: "22",
1736
+ y2: "5",
1737
+ stroke: t.color,
1738
+ strokeWidth: "1.5",
1739
+ strokeDasharray: a
1740
+ }
1741
+ ),
1742
+ /* @__PURE__ */ e(
1743
+ "polygon",
1744
+ {
1745
+ points: "22,2 28,5 22,8",
1746
+ fill: t.color
1747
+ }
1748
+ ),
1749
+ t.animated && /* @__PURE__ */ e("circle", { cx: "12", cy: "5", r: "1.5", fill: t.color, children: /* @__PURE__ */ e(
1750
+ "animate",
1751
+ {
1752
+ attributeName: "cx",
1753
+ from: "1",
1754
+ to: "22",
1755
+ dur: "1.4s",
1756
+ repeatCount: "indefinite"
1757
+ }
1758
+ ) })
1759
+ ] }),
1760
+ /* @__PURE__ */ e("span", { style: { color: t.color }, children: t.label })
1761
+ ] });
1762
+ }
1763
+ function at({ p: t }) {
1764
+ return /* @__PURE__ */ e(
1765
+ "path",
1766
+ {
1767
+ d: t.d,
1768
+ fill: t.fill ?? "none",
1769
+ stroke: t.stroke ?? "none",
1770
+ strokeWidth: t.strokeWidth ?? 0,
1771
+ opacity: t.opacity ?? 1,
1772
+ strokeLinecap: "round",
1773
+ strokeLinejoin: "round"
1774
+ }
1775
+ );
1776
+ }
1777
+ function ot() {
1778
+ return /* @__PURE__ */ r("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: [
1779
+ /* @__PURE__ */ e("rect", { x: "3", y: "4", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5" }),
1780
+ /* @__PURE__ */ e("rect", { x: "14", y: "4", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.6" }),
1781
+ /* @__PURE__ */ e("rect", { x: "3", y: "14", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.35" }),
1782
+ /* @__PURE__ */ e("rect", { x: "14", y: "14", width: "7", height: "7", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.15" })
1783
+ ] });
1784
+ }
1785
+ function nt({ open: t }) {
1786
+ return /* @__PURE__ */ e(
1787
+ "svg",
1788
+ {
1789
+ width: "8",
1790
+ height: "8",
1791
+ viewBox: "0 0 24 24",
1792
+ fill: "none",
1793
+ stroke: "currentColor",
1794
+ strokeWidth: "2.5",
1795
+ strokeLinecap: "round",
1796
+ strokeLinejoin: "round",
1797
+ style: {
1798
+ transform: `rotate(${t ? 180 : 0}deg)`,
1799
+ transition: "transform 0.15s ease"
1800
+ },
1801
+ children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" })
1802
+ }
1803
+ );
1804
+ }
1805
+ function lt({
1806
+ id: t,
1807
+ source: a,
1808
+ target: o,
1809
+ markerEnd: n,
1810
+ style: l,
1811
+ label: i,
1812
+ labelStyle: s,
1813
+ labelBgStyle: c,
1814
+ labelBgPadding: u,
1815
+ labelBgBorderRadius: d,
1816
+ animated: h
1817
+ }) {
1818
+ const g = K(a), f = K(o);
1819
+ if (!g || !f) return null;
1820
+ const { sx: x, sy: w, tx: k, ty: m, sourcePos: p, targetPos: b } = Ye(
1821
+ g,
1822
+ f
1823
+ ), [N, v, L] = Le({
1824
+ sourceX: x,
1825
+ sourceY: w,
1826
+ sourcePosition: p,
1827
+ targetPosition: b,
1828
+ targetX: k,
1829
+ targetY: m,
1830
+ borderRadius: 8
1831
+ });
1832
+ return /* @__PURE__ */ r(H, { children: [
1833
+ /* @__PURE__ */ e(
1834
+ "path",
1835
+ {
1836
+ id: t,
1837
+ className: `react-flow__edge-path${h ? " react-flow__edge-path--animated" : ""}`,
1838
+ d: N,
1839
+ markerEnd: n,
1840
+ style: l
1841
+ }
1842
+ ),
1843
+ i && /* @__PURE__ */ e(Me, { children: /* @__PURE__ */ e(
1844
+ "div",
1845
+ {
1846
+ style: {
1847
+ position: "absolute",
1848
+ transform: `translate(-50%, -50%) translate(${v}px, ${L}px)`,
1849
+ pointerEvents: "all",
1850
+ ...c ? {
1851
+ background: it(c),
1852
+ borderRadius: d ?? 4,
1853
+ padding: u ? `${u[1]}px ${u[0]}px` : "4px 6px"
1854
+ } : {}
1855
+ },
1856
+ children: /* @__PURE__ */ e("span", { style: s, children: i })
1857
+ }
1858
+ ) })
1859
+ ] });
1860
+ }
1861
+ function it(t) {
1862
+ const a = t, o = a.fill ?? "#0a0f1a", n = a.fillOpacity ?? 1;
1863
+ if (n >= 1) return o;
1864
+ const l = o.replace("#", "");
1865
+ if (l.length !== 3 && l.length !== 6) return o;
1866
+ 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);
1867
+ return `rgba(${s}, ${c}, ${u}, ${n})`;
1868
+ }
1869
+ function st(t) {
1870
+ const a = new Set(t.nodes.map((n) => n.id)), o = /* @__PURE__ */ new Map();
1871
+ for (const n of t.nodes)
1872
+ n.parentId && a.has(n.parentId) && o.set(n.parentId, (o.get(n.parentId) ?? 0) + 1);
1873
+ return {
1874
+ nodes: t.nodes.map((n) => ct(n, o.has(n.id))),
1875
+ edges: t.edges.filter((n) => a.has(n.source) && a.has(n.target)).map(dt)
1876
+ };
1877
+ }
1878
+ function ct(t, a) {
1879
+ var i, s, c;
1880
+ const o = !!((i = t.meta) != null && i.isContainer) || a, n = {
1881
+ label: t.label,
1882
+ nodeType: (s = t.meta) == null ? void 0 : s.type,
1883
+ technology: typeof ((c = t.meta) == null ? void 0 : c.technology) == "string" ? t.meta.technology : void 0,
1884
+ hasSubDiagram: !!t.subDiagramId,
1885
+ subDiagramId: t.subDiagramId ?? void 0,
1886
+ isContainer: o,
1887
+ hasChildren: a
1888
+ }, l = {
1889
+ id: t.id,
1890
+ type: "architecture",
1891
+ position: { x: 0, y: 0 },
1892
+ data: n
1893
+ };
1894
+ return t.parentId && (l.parentId = t.parentId, l.extent = "parent"), l;
1895
+ }
1896
+ function dt(t) {
1897
+ var n;
1898
+ const a = ge((n = t.meta) == null ? void 0 : n.type), o = { strokeWidth: 1.5, stroke: a.color };
1899
+ return a.dashed && (o.strokeDasharray = "5 5"), {
1900
+ id: t.id,
1901
+ source: t.source,
1902
+ target: t.target,
1903
+ type: "floating",
1904
+ label: t.label,
1905
+ animated: a.animated,
1906
+ style: o,
1907
+ markerEnd: {
1908
+ type: Se.ArrowClosed,
1909
+ width: 16,
1910
+ height: 16,
1911
+ color: a.color
1912
+ },
1913
+ labelStyle: {
1914
+ fontSize: 10,
1915
+ fill: "#94a3b8",
1916
+ fontWeight: 500,
1917
+ letterSpacing: "0.04em",
1918
+ fontFamily: "var(--font-mono)"
1919
+ },
1920
+ labelBgStyle: {
1921
+ fill: "#0a0f1a",
1922
+ fillOpacity: 0.92
1923
+ },
1924
+ labelBgPadding: [6, 4],
1925
+ labelBgBorderRadius: 4
1926
+ };
1927
+ }
1928
+ const mt = new Fe(), ae = 220, oe = 80, ut = "[top=48,left=16,bottom=16,right=16]";
1929
+ function ht(t) {
1930
+ return t === "LR" ? "RIGHT" : "DOWN";
1931
+ }
1932
+ async function pt(t, a, o, n) {
1933
+ if (t.length === 0) return t;
1934
+ const l = /* @__PURE__ */ new Map();
1935
+ for (const m of t) {
1936
+ const p = m.parentId ?? void 0, b = l.get(p) ?? [];
1937
+ b.push(m), l.set(p, b);
1938
+ }
1939
+ const i = (m) => {
1940
+ var p;
1941
+ return (((p = l.get(m)) == null ? void 0 : p.length) ?? 0) > 0;
1942
+ }, s = (m) => i(m.id) ? {
1943
+ id: m.id,
1944
+ layoutOptions: { "elk.padding": ut },
1945
+ children: (l.get(m.id) ?? []).map(s)
1946
+ } : { id: m.id, width: ae, height: oe }, c = l.get(void 0) ?? [], u = {
1947
+ id: "root",
1948
+ layoutOptions: {
1949
+ "elk.algorithm": "layered",
1950
+ "elk.direction": ht(o),
1951
+ "elk.edgeRouting": "ORTHOGONAL",
1952
+ "elk.spacing.nodeNode": "80",
1953
+ "elk.layered.spacing.nodeNodeBetweenLayers": "120",
1954
+ "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
1955
+ "elk.hierarchyHandling": "INCLUDE_CHILDREN"
1956
+ },
1957
+ children: c.map(s),
1958
+ edges: a.map((m) => ({
1959
+ id: m.id,
1960
+ sources: [m.source],
1961
+ targets: [m.target]
1962
+ }))
1963
+ }, d = await mt.layout(u), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), f = (m) => {
1964
+ m.id !== "root" && (h.set(m.id, { x: m.x ?? 0, y: m.y ?? 0 }), i(m.id) && g.set(m.id, {
1965
+ width: m.width ?? ae,
1966
+ height: m.height ?? oe
1967
+ }));
1968
+ for (const p of m.children ?? []) f(p);
1969
+ };
1970
+ f(d);
1971
+ const x = /* @__PURE__ */ new Set(), w = [], k = (m) => {
1972
+ if (x.has(m.id)) return;
1973
+ x.add(m.id);
1974
+ 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);
1975
+ L !== void 0 && W !== void 0 && (N.style = { ...m.style ?? {}, width: L, height: W }), w.push(N);
1976
+ for (const j of l.get(m.id) ?? []) k(j);
1977
+ };
1978
+ for (const m of c) k(m);
1979
+ for (const m of t) x.has(m.id) || k(m);
1980
+ return w;
1981
+ }
1982
+ const gt = {
1983
+ summary: "Reading manifest",
1984
+ diagrams: "Loading diagrams",
1985
+ descriptions: "Loading node details"
1986
+ }, ft = 150;
1987
+ function xt({ state: t }) {
1988
+ const [a, o] = C(!1);
1989
+ return B(() => {
1990
+ if (t.status === "error") {
1991
+ o(!0);
1992
+ return;
1993
+ }
1994
+ const n = setTimeout(() => o(!0), ft);
1995
+ return () => clearTimeout(n);
1996
+ }, [t.status]), a ? /* @__PURE__ */ e(
1997
+ "div",
1998
+ {
1999
+ className: "blueprint-grid flex h-screen w-screen items-center justify-center",
2000
+ style: { backgroundColor: "var(--bg-deep)" },
2001
+ role: "status",
2002
+ "aria-live": "polite",
2003
+ children: /* @__PURE__ */ e(
2004
+ "div",
2005
+ {
2006
+ className: "animate-fade-up min-w-[320px] max-w-[420px] border px-6 py-5 shadow-lg backdrop-blur-md",
2007
+ style: {
2008
+ borderColor: "var(--border-default)",
2009
+ backgroundColor: "rgba(10, 15, 26, 0.85)"
2010
+ },
2011
+ children: t.status === "error" ? /* @__PURE__ */ e(vt, { message: t.message }) : /* @__PURE__ */ e(bt, { state: t })
2012
+ }
2013
+ )
2014
+ }
2015
+ ) : /* @__PURE__ */ e(
2016
+ "div",
2017
+ {
2018
+ className: "blueprint-grid h-screen w-screen",
2019
+ style: { backgroundColor: "var(--bg-deep)" },
2020
+ "aria-hidden": !0
2021
+ }
2022
+ );
2023
+ }
2024
+ function bt({
2025
+ state: t
2026
+ }) {
2027
+ const { phase: a, done: o, total: n, archName: l } = t, i = n > 0 ? Math.min(1, o / n) : 0, s = a !== "summary";
2028
+ return /* @__PURE__ */ r(H, { children: [
2029
+ /* @__PURE__ */ e(
2030
+ "div",
2031
+ {
2032
+ className: "text-[9px] tracking-[0.32em] uppercase",
2033
+ style: { color: "var(--text-muted)", fontFamily: "var(--font-mono)" },
2034
+ children: "Architecture"
2035
+ }
2036
+ ),
2037
+ /* @__PURE__ */ e(
2038
+ "div",
2039
+ {
2040
+ className: "mt-1 truncate text-[18px] leading-tight font-semibold tracking-tight",
2041
+ style: { color: "var(--text-primary)", fontFamily: "var(--font-sans)" },
2042
+ children: l ?? "Loading architecture…"
2043
+ }
2044
+ ),
2045
+ /* @__PURE__ */ r(
2046
+ "div",
2047
+ {
2048
+ className: "mt-5 flex items-center justify-between text-[10px] tracking-[0.2em] uppercase",
2049
+ style: { color: "var(--text-secondary)", fontFamily: "var(--font-mono)" },
2050
+ children: [
2051
+ /* @__PURE__ */ e("span", { children: gt[a] }),
2052
+ s && /* @__PURE__ */ r("span", { style: { color: "var(--text-muted)" }, children: [
2053
+ o,
2054
+ " / ",
2055
+ n
2056
+ ] })
2057
+ ]
2058
+ }
2059
+ ),
2060
+ /* @__PURE__ */ e(
2061
+ "div",
2062
+ {
2063
+ className: "mt-2 h-[2px] w-full overflow-hidden",
2064
+ style: { backgroundColor: "var(--border-default)" },
2065
+ children: a === "summary" ? /* @__PURE__ */ e(
2066
+ "div",
2067
+ {
2068
+ className: "h-full w-1/3",
2069
+ style: {
2070
+ backgroundColor: "var(--accent-cyan)",
2071
+ animation: "rf-edge-dash 1.2s linear infinite"
2072
+ }
2073
+ }
2074
+ ) : /* @__PURE__ */ e(
2075
+ "div",
2076
+ {
2077
+ className: "h-full",
2078
+ style: {
2079
+ width: `${i * 100}%`,
2080
+ backgroundColor: "var(--accent-cyan)",
2081
+ transition: "width 200ms ease-out"
2082
+ }
2083
+ }
2084
+ )
2085
+ }
2086
+ )
2087
+ ] });
2088
+ }
2089
+ function vt({ message: t }) {
2090
+ return /* @__PURE__ */ r(H, { children: [
2091
+ /* @__PURE__ */ e(
2092
+ "div",
2093
+ {
2094
+ className: "text-[9px] tracking-[0.32em] uppercase",
2095
+ style: { color: "var(--accent-amber)", fontFamily: "var(--font-mono)" },
2096
+ children: "Failed to load"
2097
+ }
2098
+ ),
2099
+ /* @__PURE__ */ e(
2100
+ "div",
2101
+ {
2102
+ className: "mt-2 text-[14px] leading-snug",
2103
+ style: { color: "var(--text-primary)", fontFamily: "var(--font-sans)" },
2104
+ children: "Could not load the architecture."
2105
+ }
2106
+ ),
2107
+ /* @__PURE__ */ e(
2108
+ "div",
2109
+ {
2110
+ className: "mt-1 text-[11px] leading-relaxed break-words",
2111
+ style: { color: "var(--text-muted)", fontFamily: "var(--font-mono)" },
2112
+ children: t
2113
+ }
2114
+ ),
2115
+ /* @__PURE__ */ e(
2116
+ "button",
2117
+ {
2118
+ type: "button",
2119
+ onClick: () => window.location.reload(),
2120
+ className: "mt-4 border px-3 py-1.5 text-[10px] tracking-[0.2em] uppercase transition-colors hover:text-white",
2121
+ style: {
2122
+ borderColor: "var(--border-default)",
2123
+ color: "var(--accent-cyan)",
2124
+ fontFamily: "var(--font-mono)",
2125
+ backgroundColor: "transparent"
2126
+ },
2127
+ children: "Retry"
2128
+ }
2129
+ )
2130
+ ] });
2131
+ }
2132
+ const T = ie(null);
2133
+ function _() {
2134
+ const t = P(T);
2135
+ if (!t)
2136
+ throw new Error(
2137
+ "useArchitectureBundle must be used inside ArchitectureBundleProvider"
2138
+ );
2139
+ return t.bundle;
2140
+ }
2141
+ function yt() {
2142
+ const t = P(T);
2143
+ if (!t)
2144
+ throw new Error(
2145
+ "useSaveLayout must be used inside ArchitectureBundleProvider"
2146
+ );
2147
+ return t.saveLayout;
2148
+ }
2149
+ function kt() {
2150
+ const t = P(T);
2151
+ if (!t)
2152
+ throw new Error(
2153
+ "useOpenInEditor must be used inside ArchitectureBundleProvider"
2154
+ );
2155
+ return t.openInEditor;
2156
+ }
2157
+ function Nt() {
2158
+ const t = P(T);
2159
+ if (!t)
2160
+ throw new Error(
2161
+ "useReportUsage must be used inside ArchitectureBundleProvider"
2162
+ );
2163
+ return t.reportUsage;
2164
+ }
2165
+ function wt({
2166
+ dataSource: t,
2167
+ children: a,
2168
+ reloadKey: o
2169
+ }) {
2170
+ const [n, l] = C({
2171
+ status: "loading",
2172
+ phase: "summary",
2173
+ done: 0,
2174
+ total: 1
2175
+ });
2176
+ B(() => {
2177
+ let h = !1;
2178
+ return l({ status: "loading", phase: "summary", done: 0, total: 1 }), Ct({
2179
+ dataSource: t,
2180
+ onState: (g) => {
2181
+ h || l(g);
2182
+ },
2183
+ isCancelled: () => h
2184
+ }), () => {
2185
+ h = !0;
2186
+ };
2187
+ }, [t, o]);
2188
+ const i = M(
2189
+ async (h, g) => {
2190
+ const f = await t.saveLayout(h, g);
2191
+ l((x) => x.status !== "ready" ? x : {
2192
+ status: "ready",
2193
+ bundle: {
2194
+ ...x.bundle,
2195
+ layouts: { ...x.bundle.layouts, [h]: f }
2196
+ }
2197
+ });
2198
+ },
2199
+ [t]
2200
+ ), s = E(
2201
+ () => t.openInEditor ? (h) => {
2202
+ var g;
2203
+ return (g = t.openInEditor) == null ? void 0 : g.call(t, h);
2204
+ } : void 0,
2205
+ [t]
2206
+ ), c = M(
2207
+ (h, g) => {
2208
+ var f;
2209
+ (f = t.reportUsage) == null || f.call(t, h, g);
2210
+ },
2211
+ [t]
2212
+ ), u = n.status === "ready" ? n.bundle : null, d = E(() => u ? { bundle: u, saveLayout: i, openInEditor: s, reportUsage: c } : null, [u, i, s, c]);
2213
+ return n.status !== "ready" ? /* @__PURE__ */ e(xt, { state: n }) : d ? /* @__PURE__ */ e(T.Provider, { value: d, children: a }) : null;
2214
+ }
2215
+ async function Ct({
2216
+ dataSource: t,
2217
+ onState: a,
2218
+ isCancelled: o
2219
+ }) {
2220
+ try {
2221
+ a({ status: "loading", phase: "summary", done: 0, total: 1 });
2222
+ const n = await t.loadSummary();
2223
+ if (o()) return;
2224
+ const l = n.diagrams.map((p) => p.slug);
2225
+ let i = 0;
2226
+ const s = l.length * 2;
2227
+ a({
2228
+ status: "loading",
2229
+ phase: "diagrams",
2230
+ done: 0,
2231
+ total: s,
2232
+ archName: n.name
2233
+ });
2234
+ const c = () => {
2235
+ i += 1, a({
2236
+ status: "loading",
2237
+ phase: "diagrams",
2238
+ done: i,
2239
+ total: s,
2240
+ archName: n.name
2241
+ });
2242
+ }, u = await Promise.all(
2243
+ l.map(async (p) => {
2244
+ const b = t.loadDiagram(p).then((W) => (o() || c(), W)), N = t.loadLayout(p).then((W) => (o() || c(), W)), [v, L] = await Promise.all([
2245
+ b,
2246
+ N
2247
+ ]);
2248
+ return { slug: p, diagram: v, layout: L };
2249
+ })
2250
+ );
2251
+ if (o()) return;
2252
+ const d = {}, h = {}, g = /* @__PURE__ */ new Set();
2253
+ for (const { slug: p, diagram: b, layout: N } of u) {
2254
+ d[p] = b, h[p] = N;
2255
+ for (const v of b.nodes ?? []) g.add(v.id);
2256
+ }
2257
+ const f = [...g];
2258
+ let x = 0;
2259
+ a({
2260
+ status: "loading",
2261
+ phase: "descriptions",
2262
+ done: 0,
2263
+ total: f.length,
2264
+ archName: n.name
2265
+ });
2266
+ const w = () => {
2267
+ x += 1, a({
2268
+ status: "loading",
2269
+ phase: "descriptions",
2270
+ done: x,
2271
+ total: f.length,
2272
+ archName: n.name
2273
+ });
2274
+ }, k = {}, m = /* @__PURE__ */ new Set();
2275
+ if (await Promise.all(
2276
+ f.map(async (p) => {
2277
+ try {
2278
+ const b = await t.loadNodeDetail(p);
2279
+ k[p] = b;
2280
+ } catch {
2281
+ m.add(p);
2282
+ } finally {
2283
+ o() || w();
2284
+ }
2285
+ })
2286
+ ), o()) return;
2287
+ a({
2288
+ status: "ready",
2289
+ bundle: {
2290
+ summary: n,
2291
+ diagrams: d,
2292
+ layouts: h,
2293
+ nodes: k,
2294
+ missingDescriptions: m
2295
+ }
2296
+ });
2297
+ } catch (n) {
2298
+ if (o()) return;
2299
+ const l = n instanceof Error ? n.message : String(n);
2300
+ a({ status: "error", message: l });
2301
+ }
2302
+ }
2303
+ const Lt = { architecture: Qe }, Mt = { floating: lt };
2304
+ function St(t) {
2305
+ return /* @__PURE__ */ e(Be, { children: /* @__PURE__ */ e(Dt, { ...t }) });
2306
+ }
2307
+ const Bt = (t) => ({
2308
+ version: 1,
2309
+ diagramId: t,
2310
+ updatedAt: "",
2311
+ nodes: {}
2312
+ });
2313
+ function Wt(t) {
2314
+ var o, n, l, i;
2315
+ const a = {};
2316
+ for (const s of t) {
2317
+ const c = {
2318
+ x: ((o = s.position) == null ? void 0 : o.x) ?? 0,
2319
+ y: ((n = s.position) == null ? void 0 : n.y) ?? 0
2320
+ }, u = s.width ?? ((l = s.style) == null ? void 0 : l.width), d = s.height ?? ((i = s.style) == null ? void 0 : i.height);
2321
+ typeof u == "number" && Number.isFinite(u) && (c.width = u), typeof d == "number" && Number.isFinite(d) && (c.height = d), a[s.id] = c;
2322
+ }
2323
+ return a;
2324
+ }
2325
+ function Dt({ diagramId: t, onSelectNode: a, onDrillIn: o }) {
2326
+ 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);
2327
+ b.current = t;
2328
+ const N = G(n);
2329
+ N.current = n, B(() => {
2330
+ var Y;
2331
+ let S = !1;
2332
+ x(!1), k(null), a(null);
2333
+ const D = N.current, z = D.diagrams[t];
2334
+ if (!z)
2335
+ return k(`Diagram "${t}" was not loaded`), c([]), h([]), () => {
2336
+ S = !0;
2337
+ };
2338
+ const be = D.layouts[t] ?? Bt(t), { nodes: ve, edges: U } = st(z);
2339
+ return pt(ve, U, (Y = z.meta) == null ? void 0 : Y.direction, be).then(($) => {
2340
+ S || (c($), h(U), requestAnimationFrame(() => !S && x(!0)));
2341
+ }).catch(($) => {
2342
+ S || k($.message);
2343
+ }), () => {
2344
+ S = !0, p.current && (clearTimeout(p.current), p.current = null);
2345
+ };
2346
+ }, [t, a, h, c]);
2347
+ const v = M(() => {
2348
+ const S = b.current, D = {
2349
+ nodes: Wt(m())
2350
+ };
2351
+ l(S, D).catch((z) => {
2352
+ console.warn("[tecture] failed to persist layout", z);
2353
+ });
2354
+ }, [m, l]), L = M(() => {
2355
+ p.current && clearTimeout(p.current), p.current = setTimeout(() => {
2356
+ p.current = null, v();
2357
+ }, 150);
2358
+ }, [v]), W = E(
2359
+ () => ({ notifyLayoutChanged: L }),
2360
+ [L]
2361
+ ), j = M(() => {
2362
+ L();
2363
+ }, [L]), fe = E(
2364
+ () => (S, D) => {
2365
+ a(D.id);
2366
+ },
2367
+ [a]
2368
+ ), xe = E(
2369
+ () => (S, D) => {
2370
+ const z = D.data;
2371
+ z.subDiagramId && o(z.subDiagramId);
2372
+ },
2373
+ [o]
2374
+ );
2375
+ return /* @__PURE__ */ e(de.Provider, { value: W, children: /* @__PURE__ */ r("div", { className: "relative h-full w-full", children: [
2376
+ /* @__PURE__ */ r(
2377
+ Ae,
2378
+ {
2379
+ nodes: s,
2380
+ edges: d,
2381
+ nodeTypes: Lt,
2382
+ edgeTypes: Mt,
2383
+ onNodesChange: u,
2384
+ onEdgesChange: g,
2385
+ onNodeClick: fe,
2386
+ onNodeDoubleClick: xe,
2387
+ onNodeDragStop: j,
2388
+ onPaneClick: () => a(null),
2389
+ fitView: !0,
2390
+ fitViewOptions: { padding: 0.2 },
2391
+ colorMode: "dark",
2392
+ proOptions: { hideAttribution: !0 },
2393
+ minZoom: 0.1,
2394
+ maxZoom: 2,
2395
+ style: {
2396
+ opacity: f ? 1 : 0,
2397
+ transition: "opacity 0.2s ease-in"
2398
+ },
2399
+ children: [
2400
+ /* @__PURE__ */ e(
2401
+ Ee,
2402
+ {
2403
+ variant: He.Lines,
2404
+ gap: 20,
2405
+ size: 1,
2406
+ color: "rgba(34, 78, 130, 0.12)"
2407
+ }
2408
+ ),
2409
+ /* @__PURE__ */ e(Pe, { showInteractive: !1, position: "bottom-right" }),
2410
+ i && /* @__PURE__ */ e(et, { diagram: i }),
2411
+ /* @__PURE__ */ e(
2412
+ Te,
2413
+ {
2414
+ position: "bottom-left",
2415
+ pannable: !0,
2416
+ zoomable: !0,
2417
+ nodeColor: "#22d3ee",
2418
+ nodeStrokeColor: "#1e2d4a",
2419
+ maskColor: "rgba(10, 15, 26, 0.7)"
2420
+ }
2421
+ )
2422
+ ]
2423
+ }
2424
+ ),
2425
+ w && /* @__PURE__ */ e(zt, { label: `Error: ${w}` })
2426
+ ] }) });
2427
+ }
2428
+ function zt({ label: t }) {
2429
+ return /* @__PURE__ */ e(
2430
+ "div",
2431
+ {
2432
+ className: "pointer-events-none absolute inset-0 flex items-center justify-center",
2433
+ style: {
2434
+ color: "var(--text-muted)",
2435
+ fontFamily: "var(--font-mono)"
2436
+ },
2437
+ children: /* @__PURE__ */ e("span", { className: "text-xs tracking-[0.3em] uppercase", children: t })
2438
+ }
2439
+ );
2440
+ }
2441
+ function At({
2442
+ summary: t,
2443
+ currentDiagramId: a,
2444
+ onSelect: o,
2445
+ onGoHome: n
2446
+ }) {
2447
+ const [l, i] = C(!0), s = t != null && a === t.topDiagram;
2448
+ return /* @__PURE__ */ e("div", { className: "absolute top-3 left-3 z-10 w-64", children: /* @__PURE__ */ r(
2449
+ "div",
2450
+ {
2451
+ className: "border shadow-lg backdrop-blur-md",
2452
+ style: {
2453
+ borderColor: "var(--border-default)",
2454
+ backgroundColor: "rgba(10, 15, 26, 0.85)"
2455
+ },
2456
+ children: [
2457
+ /* @__PURE__ */ r(
2458
+ "button",
2459
+ {
2460
+ type: "button",
2461
+ onClick: n,
2462
+ disabled: s,
2463
+ 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",
2464
+ style: {
2465
+ background: "transparent",
2466
+ border: "none",
2467
+ borderBottom: "1px solid var(--border-default)",
2468
+ cursor: s ? "default" : "pointer"
2469
+ },
2470
+ title: s ? void 0 : "Return to entry diagram",
2471
+ "aria-label": s ? "Architecture title block" : "Return to entry diagram",
2472
+ children: [
2473
+ /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between", children: [
2474
+ /* @__PURE__ */ e(
2475
+ "span",
2476
+ {
2477
+ className: "text-[9px] tracking-[0.32em] uppercase",
2478
+ style: {
2479
+ color: "var(--text-muted)",
2480
+ fontFamily: "var(--font-mono)"
2481
+ },
2482
+ children: "Architecture"
2483
+ }
2484
+ ),
2485
+ !s && /* @__PURE__ */ r(
2486
+ "span",
2487
+ {
2488
+ 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",
2489
+ style: {
2490
+ color: "var(--accent-cyan)",
2491
+ fontFamily: "var(--font-mono)"
2492
+ },
2493
+ children: [
2494
+ /* @__PURE__ */ r(
2495
+ "svg",
2496
+ {
2497
+ width: "8",
2498
+ height: "8",
2499
+ viewBox: "0 0 24 24",
2500
+ fill: "none",
2501
+ stroke: "currentColor",
2502
+ strokeWidth: "2.5",
2503
+ strokeLinecap: "round",
2504
+ strokeLinejoin: "round",
2505
+ children: [
2506
+ /* @__PURE__ */ e("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
2507
+ /* @__PURE__ */ e("polyline", { points: "12 19 5 12 12 5" })
2508
+ ]
2509
+ }
2510
+ ),
2511
+ "Entry"
2512
+ ]
2513
+ }
2514
+ )
2515
+ ] }),
2516
+ /* @__PURE__ */ e(
2517
+ "span",
2518
+ {
2519
+ className: "truncate text-[15px] leading-tight font-semibold tracking-tight transition-colors group-hover:text-white group-focus-visible:text-white",
2520
+ style: {
2521
+ color: "var(--text-primary)",
2522
+ fontFamily: "var(--font-sans)",
2523
+ maxWidth: "100%"
2524
+ },
2525
+ children: (t == null ? void 0 : t.name) ?? "…"
2526
+ }
2527
+ )
2528
+ ]
2529
+ }
2530
+ ),
2531
+ /* @__PURE__ */ r(
2532
+ "button",
2533
+ {
2534
+ type: "button",
2535
+ onClick: () => i((c) => !c),
2536
+ className: "flex w-full items-center justify-between px-3 py-2 transition-colors hover:text-white",
2537
+ style: {
2538
+ color: "var(--text-muted)",
2539
+ background: "transparent",
2540
+ border: "none",
2541
+ borderBottom: l ? "1px solid var(--border-default)" : "1px solid transparent"
2542
+ },
2543
+ "aria-expanded": l,
2544
+ children: [
2545
+ /* @__PURE__ */ r(
2546
+ "span",
2547
+ {
2548
+ className: "text-[10px] tracking-[0.3em] uppercase",
2549
+ style: { fontFamily: "var(--font-mono)" },
2550
+ children: [
2551
+ "Diagrams ",
2552
+ t ? `· ${t.diagrams.length}` : ""
2553
+ ]
2554
+ }
2555
+ ),
2556
+ /* @__PURE__ */ e(
2557
+ "svg",
2558
+ {
2559
+ width: "10",
2560
+ height: "10",
2561
+ viewBox: "0 0 24 24",
2562
+ fill: "none",
2563
+ stroke: "currentColor",
2564
+ strokeWidth: "2.5",
2565
+ strokeLinecap: "round",
2566
+ strokeLinejoin: "round",
2567
+ style: {
2568
+ transform: l ? "rotate(90deg)" : "rotate(0deg)",
2569
+ transition: "transform 150ms ease"
2570
+ },
2571
+ children: /* @__PURE__ */ e("polyline", { points: "9 18 15 12 9 6" })
2572
+ }
2573
+ )
2574
+ ]
2575
+ }
2576
+ ),
2577
+ l && /* @__PURE__ */ r("ul", { className: "max-h-[60vh] overflow-y-auto py-1", children: [
2578
+ t == null ? void 0 : t.diagrams.map((c) => /* @__PURE__ */ e(
2579
+ Et,
2580
+ {
2581
+ diagram: c,
2582
+ active: c.slug === a,
2583
+ isTop: c.slug === t.topDiagram,
2584
+ onSelect: o
2585
+ },
2586
+ c.slug
2587
+ )),
2588
+ !t && /* @__PURE__ */ e(
2589
+ "li",
2590
+ {
2591
+ className: "px-3 py-2 text-[11px]",
2592
+ style: {
2593
+ color: "var(--text-muted)",
2594
+ fontFamily: "var(--font-mono)"
2595
+ },
2596
+ children: "Loading…"
2597
+ }
2598
+ )
2599
+ ] })
2600
+ ]
2601
+ }
2602
+ ) });
2603
+ }
2604
+ function Et({
2605
+ diagram: t,
2606
+ active: a,
2607
+ isTop: o,
2608
+ onSelect: n
2609
+ }) {
2610
+ return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ r(
2611
+ "button",
2612
+ {
2613
+ type: "button",
2614
+ onClick: () => n(t.slug),
2615
+ className: "flex w-full flex-col items-start gap-0.5 px-3 py-2 text-left transition-colors",
2616
+ style: {
2617
+ background: a ? "rgba(34, 211, 238, 0.08)" : "transparent",
2618
+ borderLeft: a ? "2px solid var(--accent-cyan)" : "2px solid transparent",
2619
+ color: a ? "var(--text-primary)" : "var(--text-secondary)",
2620
+ cursor: "pointer",
2621
+ border: "none",
2622
+ borderLeftWidth: "2px"
2623
+ },
2624
+ children: [
2625
+ /* @__PURE__ */ r("div", { className: "flex w-full items-center gap-2", children: [
2626
+ /* @__PURE__ */ r(
2627
+ "span",
2628
+ {
2629
+ className: "text-[9px] tracking-[0.2em] uppercase",
2630
+ style: {
2631
+ color: a ? "var(--accent-cyan)" : "var(--text-muted)",
2632
+ fontFamily: "var(--font-mono)"
2633
+ },
2634
+ children: [
2635
+ "L",
2636
+ t.level ?? "?"
2637
+ ]
2638
+ }
2639
+ ),
2640
+ /* @__PURE__ */ e(
2641
+ "span",
2642
+ {
2643
+ className: "truncate text-[13px] leading-tight font-medium",
2644
+ style: { fontFamily: "var(--font-sans)" },
2645
+ children: t.name
2646
+ }
2647
+ ),
2648
+ o && /* @__PURE__ */ e(
2649
+ "span",
2650
+ {
2651
+ className: "ml-auto px-1 py-px text-[8px] tracking-[0.2em] uppercase",
2652
+ style: {
2653
+ color: "var(--accent-amber)",
2654
+ fontFamily: "var(--font-mono)"
2655
+ },
2656
+ children: "Entry"
2657
+ }
2658
+ )
2659
+ ] }),
2660
+ /* @__PURE__ */ r(
2661
+ "span",
2662
+ {
2663
+ className: "text-[10px] tracking-wider",
2664
+ style: {
2665
+ color: "var(--text-muted)",
2666
+ fontFamily: "var(--font-mono)"
2667
+ },
2668
+ children: [
2669
+ t.nodeCount,
2670
+ "n · ",
2671
+ t.edgeCount,
2672
+ "e"
2673
+ ]
2674
+ }
2675
+ )
2676
+ ]
2677
+ }
2678
+ ) });
2679
+ }
2680
+ let ne = !1;
2681
+ async function Ht() {
2682
+ const a = (await import("mermaid")).default;
2683
+ return ne || (a.initialize({
2684
+ startOnLoad: !1,
2685
+ theme: "dark",
2686
+ securityLevel: "strict",
2687
+ fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
2688
+ themeVariables: {
2689
+ background: "#0a0f1a",
2690
+ primaryColor: "#0f1628",
2691
+ primaryBorderColor: "#1e3a5f",
2692
+ primaryTextColor: "#e2e8f0",
2693
+ secondaryColor: "#141d33",
2694
+ secondaryBorderColor: "#1e2d4a",
2695
+ secondaryTextColor: "#e2e8f0",
2696
+ tertiaryColor: "#0d1320",
2697
+ tertiaryBorderColor: "#1e2d4a",
2698
+ tertiaryTextColor: "#e2e8f0",
2699
+ lineColor: "#64748b",
2700
+ textColor: "#e2e8f0",
2701
+ mainBkg: "#0f1628",
2702
+ nodeBorder: "#1e3a5f",
2703
+ clusterBkg: "rgba(20, 29, 51, 0.6)",
2704
+ clusterBorder: "#1e2d4a",
2705
+ actorBkg: "#0f1628",
2706
+ actorBorder: "#1e3a5f",
2707
+ actorTextColor: "#e2e8f0",
2708
+ actorLineColor: "#64748b",
2709
+ signalColor: "#94a3b8",
2710
+ signalTextColor: "#e2e8f0",
2711
+ labelBoxBkgColor: "#141d33",
2712
+ labelBoxBorderColor: "#1e2d4a",
2713
+ labelTextColor: "#e2e8f0",
2714
+ noteBkgColor: "#18140a",
2715
+ noteBorderColor: "#854d0e",
2716
+ noteTextColor: "#fef3c7"
2717
+ }
2718
+ }), ne = !0), a;
2719
+ }
2720
+ function Pt({ chart: t }) {
2721
+ const [a, o] = C({ status: "loading" }), [n, l] = C(!1), s = `mermaid-${ke().replace(/:/g, "")}`;
2722
+ return B(() => {
2723
+ let c = !1;
2724
+ return o({ status: "loading" }), (async () => {
2725
+ try {
2726
+ const u = await Ht();
2727
+ await u.parse(t);
2728
+ const { svg: d } = await u.render(s, t);
2729
+ c || o({ status: "ready", svg: d });
2730
+ } catch (u) {
2731
+ if (c) return;
2732
+ const d = u instanceof Error ? u.message : "Failed to render diagram";
2733
+ o({ status: "error", message: d });
2734
+ }
2735
+ })(), () => {
2736
+ c = !0;
2737
+ };
2738
+ }, [t, s]), a.status === "loading" ? /* @__PURE__ */ e(
2739
+ "div",
2740
+ {
2741
+ className: "mermaid-block",
2742
+ style: {
2743
+ color: "var(--text-muted)",
2744
+ fontFamily: "var(--font-mono)",
2745
+ fontSize: 11
2746
+ },
2747
+ children: "Rendering diagram…"
2748
+ }
2749
+ ) : a.status === "error" ? /* @__PURE__ */ r("div", { className: "mermaid-block", children: [
2750
+ /* @__PURE__ */ r(
2751
+ "div",
2752
+ {
2753
+ className: "mb-1",
2754
+ style: {
2755
+ color: "var(--accent-amber)",
2756
+ fontFamily: "var(--font-mono)",
2757
+ fontSize: 11
2758
+ },
2759
+ children: [
2760
+ "Mermaid error: ",
2761
+ a.message
2762
+ ]
2763
+ }
2764
+ ),
2765
+ /* @__PURE__ */ e("pre", { style: { margin: 0 }, children: /* @__PURE__ */ e("code", { className: "lang-mermaid", children: t }) })
2766
+ ] }) : /* @__PURE__ */ r(H, { children: [
2767
+ /* @__PURE__ */ r("div", { className: "mermaid-block group relative", children: [
2768
+ /* @__PURE__ */ e(
2769
+ "button",
2770
+ {
2771
+ type: "button",
2772
+ onClick: () => l(!0),
2773
+ "aria-label": "Enlarge diagram",
2774
+ title: "Enlarge diagram",
2775
+ className: "mermaid-enlarge absolute top-2 right-2 flex h-7 w-7 items-center justify-center border transition-colors",
2776
+ style: {
2777
+ borderColor: "var(--border-default)",
2778
+ backgroundColor: "rgba(10, 15, 26, 0.85)",
2779
+ color: "var(--text-muted)",
2780
+ backdropFilter: "blur(6px)"
2781
+ },
2782
+ children: /* @__PURE__ */ r(
2783
+ "svg",
2784
+ {
2785
+ width: "12",
2786
+ height: "12",
2787
+ viewBox: "0 0 24 24",
2788
+ fill: "none",
2789
+ stroke: "currentColor",
2790
+ strokeWidth: "2",
2791
+ strokeLinecap: "round",
2792
+ strokeLinejoin: "round",
2793
+ children: [
2794
+ /* @__PURE__ */ e("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
2795
+ /* @__PURE__ */ e("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
2796
+ /* @__PURE__ */ e("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
2797
+ /* @__PURE__ */ e("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
2798
+ ]
2799
+ }
2800
+ )
2801
+ }
2802
+ ),
2803
+ /* @__PURE__ */ e(
2804
+ "div",
2805
+ {
2806
+ className: "mermaid-svg",
2807
+ style: { overflowX: "auto" },
2808
+ dangerouslySetInnerHTML: { __html: a.svg }
2809
+ }
2810
+ )
2811
+ ] }),
2812
+ n && /* @__PURE__ */ e(Tt, { svg: a.svg, onClose: () => l(!1) })
2813
+ ] });
2814
+ }
2815
+ function Tt({
2816
+ svg: t,
2817
+ onClose: a
2818
+ }) {
2819
+ return B(() => {
2820
+ const o = (l) => {
2821
+ l.key === "Escape" && a();
2822
+ };
2823
+ document.addEventListener("keydown", o);
2824
+ const n = document.body.style.overflow;
2825
+ return document.body.style.overflow = "hidden", () => {
2826
+ document.removeEventListener("keydown", o), document.body.style.overflow = n;
2827
+ };
2828
+ }, [a]), $e(
2829
+ /* @__PURE__ */ e(
2830
+ "div",
2831
+ {
2832
+ role: "dialog",
2833
+ "aria-modal": "true",
2834
+ "aria-label": "Enlarged diagram",
2835
+ onClick: a,
2836
+ className: "animate-fade-up fixed inset-0 z-50 flex items-center justify-center",
2837
+ style: {
2838
+ backgroundColor: "rgba(10, 15, 26, 0.88)",
2839
+ backdropFilter: "blur(12px)",
2840
+ WebkitBackdropFilter: "blur(12px)",
2841
+ animationDuration: "0.18s"
2842
+ },
2843
+ children: /* @__PURE__ */ r(
2844
+ "div",
2845
+ {
2846
+ onClick: (o) => o.stopPropagation(),
2847
+ className: "relative flex flex-col border shadow-2xl",
2848
+ style: {
2849
+ borderColor: "var(--border-default)",
2850
+ backgroundColor: "rgba(10, 15, 26, 0.95)",
2851
+ maxWidth: "92vw",
2852
+ maxHeight: "90vh"
2853
+ },
2854
+ children: [
2855
+ /* @__PURE__ */ r(
2856
+ "div",
2857
+ {
2858
+ className: "flex items-center justify-between border-b px-5 py-3",
2859
+ style: { borderColor: "var(--border-default)" },
2860
+ children: [
2861
+ /* @__PURE__ */ e(
2862
+ "div",
2863
+ {
2864
+ className: "blueprint-annotation",
2865
+ style: { color: "var(--accent-cyan)" },
2866
+ children: "Diagram"
2867
+ }
2868
+ ),
2869
+ /* @__PURE__ */ r(
2870
+ "div",
2871
+ {
2872
+ className: "flex items-center gap-3 text-[10px] tracking-[0.2em] uppercase",
2873
+ style: {
2874
+ color: "var(--text-muted)",
2875
+ fontFamily: "var(--font-mono)"
2876
+ },
2877
+ children: [
2878
+ /* @__PURE__ */ e("span", { children: "ESC to close" }),
2879
+ /* @__PURE__ */ e(
2880
+ "button",
2881
+ {
2882
+ type: "button",
2883
+ onClick: a,
2884
+ "aria-label": "Close diagram",
2885
+ className: "flex h-7 w-7 items-center justify-center border transition-colors hover:text-white",
2886
+ style: {
2887
+ borderColor: "var(--border-default)",
2888
+ color: "var(--text-muted)",
2889
+ backgroundColor: "transparent"
2890
+ },
2891
+ children: /* @__PURE__ */ r(
2892
+ "svg",
2893
+ {
2894
+ width: "12",
2895
+ height: "12",
2896
+ viewBox: "0 0 24 24",
2897
+ fill: "none",
2898
+ stroke: "currentColor",
2899
+ strokeWidth: "2.5",
2900
+ strokeLinecap: "round",
2901
+ strokeLinejoin: "round",
2902
+ children: [
2903
+ /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
2904
+ /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
2905
+ ]
2906
+ }
2907
+ )
2908
+ }
2909
+ )
2910
+ ]
2911
+ }
2912
+ )
2913
+ ]
2914
+ }
2915
+ ),
2916
+ /* @__PURE__ */ e(
2917
+ "div",
2918
+ {
2919
+ className: "mermaid-lightbox-body",
2920
+ style: {
2921
+ padding: 24,
2922
+ overflow: "auto",
2923
+ maxHeight: "calc(90vh - 52px)"
2924
+ },
2925
+ dangerouslySetInnerHTML: { __html: t }
2926
+ }
2927
+ )
2928
+ ]
2929
+ }
2930
+ )
2931
+ }
2932
+ ),
2933
+ document.body
2934
+ );
2935
+ }
2936
+ function Ft({ source: t }) {
2937
+ return /* @__PURE__ */ e("div", { className: "prose-markdown", children: /* @__PURE__ */ e(
2938
+ je,
2939
+ {
2940
+ options: {
2941
+ forceBlock: !0,
2942
+ overrides: {
2943
+ pre: { component: Rt },
2944
+ a: { component: It }
2945
+ }
2946
+ },
2947
+ children: t
2948
+ }
2949
+ ) });
2950
+ }
2951
+ function It({
2952
+ href: t,
2953
+ children: a,
2954
+ ...o
2955
+ }) {
2956
+ const n = !t || t.startsWith("#") || t.startsWith("/") || typeof window < "u" && t.startsWith(window.location.origin);
2957
+ return /* @__PURE__ */ e(
2958
+ "a",
2959
+ {
2960
+ href: t,
2961
+ ...o,
2962
+ ...n ? {} : { target: "_blank", rel: "noopener noreferrer" },
2963
+ children: a
2964
+ }
2965
+ );
2966
+ }
2967
+ function Rt({ children: t }) {
2968
+ const a = jt(t);
2969
+ return a !== null ? /* @__PURE__ */ e(Pt, { chart: a }) : /* @__PURE__ */ e("pre", { children: t });
2970
+ }
2971
+ function jt(t) {
2972
+ const a = Array.isArray(t) && t.length === 1 ? t[0] : t;
2973
+ if (!Ne(a)) return null;
2974
+ const o = a;
2975
+ if (o.type !== "code") return null;
2976
+ const n = o.props.className ?? "";
2977
+ if (!(n === "lang-mermaid" || n === "language-mermaid" || n.split(/\s+/).includes("lang-mermaid") || n.split(/\s+/).includes("language-mermaid"))) return null;
2978
+ const i = o.props.children;
2979
+ return typeof i == "string" ? i : Array.isArray(i) ? i.map((s) => String(s ?? "")).join("") : String(i ?? "");
2980
+ }
2981
+ function $t({ nodeId: t, onClose: a }) {
2982
+ var d, h;
2983
+ 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;
2984
+ return /* @__PURE__ */ r(
2985
+ "aside",
2986
+ {
2987
+ className: "animate-slide-in-right absolute top-3 right-3 z-10 flex flex-col border shadow-lg backdrop-blur-md",
2988
+ style: {
2989
+ width: "min(520px, calc(100vw - 24px))",
2990
+ maxHeight: "calc(100vh - 24px)",
2991
+ backgroundColor: "rgba(10, 15, 26, 0.85)",
2992
+ borderColor: "var(--border-default)"
2993
+ },
2994
+ children: [
2995
+ /* @__PURE__ */ r(
2996
+ "div",
2997
+ {
2998
+ className: "flex shrink-0 items-start justify-between border-b px-5 py-4",
2999
+ style: { borderColor: "var(--border-default)" },
3000
+ children: [
3001
+ /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: [
3002
+ /* @__PURE__ */ e(
3003
+ "div",
3004
+ {
3005
+ className: "blueprint-annotation mb-1",
3006
+ style: { color: s.accent },
3007
+ children: s.label
3008
+ }
3009
+ ),
3010
+ /* @__PURE__ */ e(
3011
+ "div",
3012
+ {
3013
+ className: "truncate text-base leading-tight font-semibold tracking-tight",
3014
+ style: { color: "var(--text-primary)", fontFamily: "var(--font-sans)" },
3015
+ children: (l == null ? void 0 : l.label) ?? t
3016
+ }
3017
+ ),
3018
+ (h = l == null ? void 0 : l.meta) != null && h.technology ? /* @__PURE__ */ e(
3019
+ "div",
3020
+ {
3021
+ className: "mt-0.5 text-xs",
3022
+ style: { color: "var(--text-muted)", fontFamily: "var(--font-mono)" },
3023
+ children: String(l.meta.technology)
3024
+ }
3025
+ ) : null,
3026
+ c || l && Z(l) ? /* @__PURE__ */ r("div", { className: "mt-1.5 flex w-full items-center gap-x-3", children: [
3027
+ c ? /* @__PURE__ */ e(
3028
+ Gt,
3029
+ {
3030
+ path: c,
3031
+ accent: s.accent,
3032
+ onOpenInEditor: n ? () => n(c) : void 0,
3033
+ sourceUrl: u
3034
+ }
3035
+ ) : null,
3036
+ l && Z(l) ? /* @__PURE__ */ e(
3037
+ Vt,
3038
+ {
3039
+ prompt: Re(l),
3040
+ accent: s.accent,
3041
+ className: "ml-auto"
3042
+ }
3043
+ ) : null
3044
+ ] }) : null
3045
+ ] }),
3046
+ /* @__PURE__ */ e(
3047
+ "button",
3048
+ {
3049
+ type: "button",
3050
+ onClick: a,
3051
+ "aria-label": "Close details",
3052
+ className: "flex h-7 w-7 shrink-0 items-center justify-center border transition-colors hover:text-white",
3053
+ style: {
3054
+ borderColor: "var(--border-default)",
3055
+ color: "var(--text-muted)",
3056
+ backgroundColor: "transparent"
3057
+ },
3058
+ children: /* @__PURE__ */ r(
3059
+ "svg",
3060
+ {
3061
+ width: "12",
3062
+ height: "12",
3063
+ viewBox: "0 0 24 24",
3064
+ fill: "none",
3065
+ stroke: "currentColor",
3066
+ strokeWidth: "2.5",
3067
+ strokeLinecap: "round",
3068
+ strokeLinejoin: "round",
3069
+ children: [
3070
+ /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
3071
+ /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
3072
+ ]
3073
+ }
3074
+ )
3075
+ }
3076
+ )
3077
+ ]
3078
+ }
3079
+ ),
3080
+ /* @__PURE__ */ r("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: [
3081
+ !l && /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "No details available for this node." }),
3082
+ l && i && /* @__PURE__ */ e("div", { className: "text-xs", style: { color: "var(--text-muted)" }, children: "Description not available." }),
3083
+ 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." }))
3084
+ ] })
3085
+ ]
3086
+ }
3087
+ );
3088
+ }
3089
+ const R = "inline-flex items-center gap-1.5 text-xs transition-opacity hover:opacity-80";
3090
+ function V(t) {
3091
+ return {
3092
+ color: t,
3093
+ fontFamily: "var(--font-mono)",
3094
+ background: "transparent",
3095
+ border: "none",
3096
+ padding: 0,
3097
+ cursor: "pointer"
3098
+ };
3099
+ }
3100
+ function Gt({
3101
+ path: t,
3102
+ accent: a,
3103
+ onOpenInEditor: o,
3104
+ sourceUrl: n
3105
+ }) {
3106
+ const l = t.endsWith("/"), i = /* @__PURE__ */ r(
3107
+ "svg",
3108
+ {
3109
+ width: "11",
3110
+ height: "11",
3111
+ viewBox: "0 0 24 24",
3112
+ fill: "none",
3113
+ stroke: "currentColor",
3114
+ strokeWidth: "2",
3115
+ strokeLinecap: "round",
3116
+ strokeLinejoin: "round",
3117
+ children: [
3118
+ /* @__PURE__ */ e("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
3119
+ /* @__PURE__ */ e("polyline", { points: "15 3 21 3 21 9" }),
3120
+ /* @__PURE__ */ e("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
3121
+ ]
3122
+ }
3123
+ );
3124
+ return o ? /* @__PURE__ */ r(
3125
+ "button",
3126
+ {
3127
+ type: "button",
3128
+ className: R,
3129
+ style: V(a),
3130
+ onClick: o,
3131
+ title: t,
3132
+ children: [
3133
+ i,
3134
+ /* @__PURE__ */ e("span", { children: l ? "Open folder" : "Open file" })
3135
+ ]
3136
+ }
3137
+ ) : n ? /* @__PURE__ */ r(
3138
+ "a",
3139
+ {
3140
+ className: R,
3141
+ style: V(a),
3142
+ href: n,
3143
+ target: "_blank",
3144
+ rel: "noreferrer",
3145
+ title: t,
3146
+ children: [
3147
+ i,
3148
+ /* @__PURE__ */ e("span", { children: l ? "View folder" : "View file" })
3149
+ ]
3150
+ }
3151
+ ) : null;
3152
+ }
3153
+ function Vt({
3154
+ prompt: t,
3155
+ accent: a,
3156
+ className: o
3157
+ }) {
3158
+ const [n, l] = C(!1), i = M(() => {
3159
+ Ot(t).then((s) => {
3160
+ s && (l(!0), window.setTimeout(() => l(!1), 1500));
3161
+ });
3162
+ }, [t]);
3163
+ return /* @__PURE__ */ r(
3164
+ "button",
3165
+ {
3166
+ type: "button",
3167
+ className: o ? `${R} ${o}` : R,
3168
+ style: V(a),
3169
+ onClick: i,
3170
+ title: "Copy a prompt to enrich this component's description with a coding agent",
3171
+ children: [
3172
+ n ? /* @__PURE__ */ e(
3173
+ "svg",
3174
+ {
3175
+ width: "11",
3176
+ height: "11",
3177
+ viewBox: "0 0 24 24",
3178
+ fill: "none",
3179
+ stroke: "currentColor",
3180
+ strokeWidth: "2.5",
3181
+ strokeLinecap: "round",
3182
+ strokeLinejoin: "round",
3183
+ children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" })
3184
+ }
3185
+ ) : /* @__PURE__ */ r(
3186
+ "svg",
3187
+ {
3188
+ width: "11",
3189
+ height: "11",
3190
+ viewBox: "0 0 24 24",
3191
+ fill: "none",
3192
+ stroke: "currentColor",
3193
+ strokeWidth: "2",
3194
+ strokeLinecap: "round",
3195
+ strokeLinejoin: "round",
3196
+ children: [
3197
+ /* @__PURE__ */ e("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
3198
+ /* @__PURE__ */ e("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
3199
+ ]
3200
+ }
3201
+ ),
3202
+ /* @__PURE__ */ e("span", { children: n ? "Copied" : "Copy deep-dive prompt" })
3203
+ ]
3204
+ }
3205
+ );
3206
+ }
3207
+ async function Ot(t) {
3208
+ var a;
3209
+ try {
3210
+ if ((a = navigator.clipboard) != null && a.writeText)
3211
+ return await navigator.clipboard.writeText(t), !0;
3212
+ } catch {
3213
+ }
3214
+ try {
3215
+ const o = document.createElement("textarea");
3216
+ o.value = t, o.style.position = "fixed", o.style.top = "0", o.style.left = "0", o.style.opacity = "0", document.body.appendChild(o), o.focus(), o.select();
3217
+ const n = document.execCommand("copy");
3218
+ return document.body.removeChild(o), n;
3219
+ } catch {
3220
+ return !1;
3221
+ }
3222
+ }
3223
+ function _t() {
3224
+ const [t, a] = C(!0);
3225
+ return B(() => {
3226
+ const o = setTimeout(() => a(!1), 3500);
3227
+ return () => clearTimeout(o);
3228
+ }, []), t ? /* @__PURE__ */ e(
3229
+ "div",
3230
+ {
3231
+ className: "pointer-events-none absolute bottom-6 left-1/2 z-10 -translate-x-1/2 border px-3 py-1.5 shadow-lg backdrop-blur-md transition-opacity duration-1000",
3232
+ style: {
3233
+ borderColor: "var(--border-default)",
3234
+ backgroundColor: "rgba(10, 15, 26, 0.85)",
3235
+ color: "var(--text-muted)",
3236
+ fontFamily: "var(--font-mono)",
3237
+ fontSize: "10px",
3238
+ letterSpacing: "0.05em"
3239
+ },
3240
+ children: "Scroll to zoom · Drag to pan · Click for details · Double-click to drill"
3241
+ }
3242
+ ) : null;
3243
+ }
3244
+ let le = null;
3245
+ function Ut({ diagramId: t, showDiagramList: a = !0 }) {
3246
+ const o = _(), n = Nt(), [l, i] = C(null);
3247
+ B(() => {
3248
+ t || (window.location.hash = `#/diagram/${o.summary.topDiagram}`);
3249
+ }, [t, o.summary.topDiagram]), B(() => {
3250
+ var d;
3251
+ if (!t || t === le) return;
3252
+ le = t;
3253
+ const u = (d = o.summary.diagrams.find(
3254
+ (h) => h.slug === t
3255
+ )) == null ? void 0 : d.level;
3256
+ n("diagram.viewed", typeof u == "number" ? { level: u } : {});
3257
+ }, [t, o.summary.diagrams, n]);
3258
+ const s = M(
3259
+ (u) => {
3260
+ i(u), u && n("node.inspected");
3261
+ },
3262
+ [n]
3263
+ ), c = M((u) => {
3264
+ i(null), window.location.hash = `#/diagram/${u}`;
3265
+ }, []);
3266
+ return /* @__PURE__ */ r(
3267
+ "div",
3268
+ {
3269
+ className: "relative h-screen w-screen overflow-hidden",
3270
+ style: { backgroundColor: "var(--bg-deep)" },
3271
+ children: [
3272
+ t ? /* @__PURE__ */ e(
3273
+ St,
3274
+ {
3275
+ diagramId: t,
3276
+ onSelectNode: s,
3277
+ onDrillIn: c
3278
+ },
3279
+ t
3280
+ ) : /* @__PURE__ */ e(Yt, { message: "Opening top diagram…" }),
3281
+ a && /* @__PURE__ */ e(
3282
+ At,
3283
+ {
3284
+ summary: o.summary,
3285
+ currentDiagramId: t,
3286
+ onSelect: c,
3287
+ onGoHome: () => c(o.summary.topDiagram)
3288
+ }
3289
+ ),
3290
+ /* @__PURE__ */ e(_t, {}),
3291
+ l && /* @__PURE__ */ e(
3292
+ $t,
3293
+ {
3294
+ nodeId: l,
3295
+ onClose: () => i(null)
3296
+ },
3297
+ l
3298
+ )
3299
+ ]
3300
+ }
3301
+ );
3302
+ }
3303
+ function Yt({ message: t }) {
3304
+ return /* @__PURE__ */ e(
3305
+ "div",
3306
+ {
3307
+ className: "blueprint-grid pointer-events-none absolute inset-0 flex items-center justify-center",
3308
+ style: {
3309
+ color: "var(--text-muted)",
3310
+ fontFamily: "var(--font-mono)"
3311
+ },
3312
+ children: /* @__PURE__ */ e("span", { className: "text-xs tracking-[0.3em] uppercase", children: t })
3313
+ }
3314
+ );
3315
+ }
3316
+ function Xt() {
3317
+ const [t, a] = C(() => window.location.hash);
3318
+ return B(() => {
3319
+ const o = () => a(window.location.hash);
3320
+ return window.addEventListener("hashchange", o), () => window.removeEventListener("hashchange", o);
3321
+ }, []), t;
3322
+ }
3323
+ function Kt(t) {
3324
+ if (t === "#/style-guide") return { view: "style-guide", diagramId: null };
3325
+ const a = t.match(/^#\/diagram\/([^/?#]+)/);
3326
+ return a ? { view: "architecture", diagramId: decodeURIComponent(a[1]) } : { view: "architecture", diagramId: null };
3327
+ }
3328
+ function ar({ dataSource: t, reloadKey: a, showDiagramList: o = !0 }) {
3329
+ const n = Xt(), l = Kt(n);
3330
+ return l.view === "style-guide" ? /* @__PURE__ */ e(Ve, {}) : /* @__PURE__ */ e(wt, { dataSource: t, reloadKey: a, children: /* @__PURE__ */ e(
3331
+ Ut,
3332
+ {
3333
+ diagramId: l.diagramId,
3334
+ showDiagramList: o
3335
+ }
3336
+ ) });
3337
+ }
3338
+ export {
3339
+ ar as App
3340
+ };
3341
+ //# sourceMappingURL=App.js.map