@orangecheck/design 0.6.1 → 0.7.1

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.
@@ -1,3 +1,1837 @@
1
- export * from '@orangecheck/ui';
1
+ import { HelpCircle, Boxes, ChevronDown, Check, CornerDownLeft, Plus, Loader2, Copy } from 'lucide-react';
2
+ import * as PopoverPrimitive from '@radix-ui/react-popover';
3
+ import { clsx } from 'clsx';
4
+ import { twMerge } from 'tailwind-merge';
5
+ import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
6
+ import Link6 from 'next/link';
7
+ import { Fragment, useState, useRef, useEffect, useId } from 'react';
8
+ import { useRouter } from 'next/router';
9
+ import { useOcSession, fetchOcLinkedIdentities } from '@orangecheck/auth-client';
10
+
11
+ // src/composites/help-hint.tsx
12
+ function cn(...inputs) {
13
+ return twMerge(clsx(inputs));
14
+ }
15
+ function Popover({ ...props }) {
16
+ return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
17
+ }
18
+ function PopoverTrigger({ ...props }) {
19
+ return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
20
+ }
21
+ function PopoverContent({
22
+ className,
23
+ align = "center",
24
+ sideOffset = 4,
25
+ ...props
26
+ }) {
27
+ return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
28
+ PopoverPrimitive.Content,
29
+ {
30
+ "data-slot": "popover-content",
31
+ align,
32
+ sideOffset,
33
+ className: cn(
34
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
35
+ className
36
+ ),
37
+ ...props
38
+ }
39
+ ) });
40
+ }
41
+ function HelpHint({
42
+ title,
43
+ children,
44
+ side = "bottom",
45
+ label = "more information",
46
+ className
47
+ }) {
48
+ return /* @__PURE__ */ jsxs(Popover, { children: [
49
+ /* @__PURE__ */ jsx(
50
+ PopoverTrigger,
51
+ {
52
+ "aria-label": label,
53
+ className: cn(
54
+ "text-muted-foreground/60 hover:text-foreground inline-flex size-3.5 items-center justify-center align-middle transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
55
+ className
56
+ ),
57
+ children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-3.5", "aria-hidden": true })
58
+ }
59
+ ),
60
+ /* @__PURE__ */ jsxs(PopoverContent, { side, className: "w-72 space-y-1.5", children: [
61
+ title && /* @__PURE__ */ jsx("p", { className: "label-mono text-foreground text-[10px]", children: title }),
62
+ /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs leading-relaxed", children })
63
+ ] })
64
+ ] });
65
+ }
66
+ var TONE_CLASS = {
67
+ primary: "text-primary",
68
+ muted: "text-muted-foreground",
69
+ warning: "text-warning",
70
+ success: "text-success",
71
+ destructive: "text-destructive"
72
+ };
73
+ function SectionHeader({
74
+ label,
75
+ meta,
76
+ hint,
77
+ tone = "primary",
78
+ className = ""
79
+ }) {
80
+ return /* @__PURE__ */ jsxs("div", { className: `mb-3 flex items-baseline justify-between gap-2 ${className}`, children: [
81
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
82
+ /* @__PURE__ */ jsxs("div", { className: `label-mono ${TONE_CLASS[tone]}`, children: [
83
+ "\xA7 ",
84
+ label
85
+ ] }),
86
+ hint && /* @__PURE__ */ jsx(HelpHint, { title: hint.title, side: hint.side ?? "bottom", children: hint.body })
87
+ ] }),
88
+ meta && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 font-mono text-[10px] tracking-widest uppercase", children: meta })
89
+ ] });
90
+ }
91
+ var TONE_CLASS2 = {
92
+ info: "border-primary/30 bg-primary/5",
93
+ warning: "border-warning/40 bg-warning/5",
94
+ muted: "border-border bg-muted/20"
95
+ };
96
+ var LABEL_TONE_CLASS = {
97
+ info: "text-primary",
98
+ warning: "text-warning",
99
+ muted: "text-muted-foreground"
100
+ };
101
+ function EmptyState({
102
+ label,
103
+ children,
104
+ cta,
105
+ secondary,
106
+ tone = "info",
107
+ className = ""
108
+ }) {
109
+ return /* @__PURE__ */ jsxs("div", { className: `border p-5 md:p-6 ${TONE_CLASS2[tone]} ${className}`, children: [
110
+ /* @__PURE__ */ jsxs("div", { className: `label-mono mb-2 ${LABEL_TONE_CLASS[tone]}`, children: [
111
+ "\xA7 ",
112
+ label
113
+ ] }),
114
+ /* @__PURE__ */ jsx("div", { className: "text-foreground/85 max-w-2xl text-sm leading-relaxed", children }),
115
+ (cta || secondary) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap gap-3", children: [
116
+ cta && /* @__PURE__ */ jsx(CtaLink, { ...cta, variant: "primary" }),
117
+ secondary && /* @__PURE__ */ jsx(CtaLink, { ...secondary, variant: "secondary" })
118
+ ] })
119
+ ] });
120
+ }
121
+ function CtaLink({
122
+ label,
123
+ href,
124
+ external,
125
+ variant
126
+ }) {
127
+ const cls = variant === "primary" ? "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-9 items-center justify-center rounded-md px-4 font-mono text-[11px] font-semibold tracking-widest uppercase" : "text-muted-foreground hover:text-foreground border-input hover:bg-accent inline-flex h-9 items-center justify-center rounded-md border px-4 font-mono text-[11px] tracking-widest uppercase";
128
+ const text = external ? `${label} \u2197` : label;
129
+ if (external) {
130
+ return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer", className: cls, children: text });
131
+ }
132
+ return /* @__PURE__ */ jsx(Link6, { href, className: cls, children: text });
133
+ }
134
+ var TONE_CLASS3 = {
135
+ default: "",
136
+ primary: "text-primary",
137
+ success: "text-success",
138
+ warning: "text-warning",
139
+ destructive: "text-destructive",
140
+ muted: "text-muted-foreground"
141
+ };
142
+ var COL_CLASS = {
143
+ 1: "",
144
+ 2: "md:grid-cols-2",
145
+ 3: "md:grid-cols-3",
146
+ 4: "md:grid-cols-2 lg:grid-cols-4"
147
+ };
148
+ function StatGrid({ items, columns = 3, className = "" }) {
149
+ return /* @__PURE__ */ jsx("div", { className: `bg-border grid gap-px border ${COL_CLASS[columns]} ${className}`, children: items.map((it, i) => /* @__PURE__ */ jsx(Tile, { item: it }, `${it.label}-${i}`)) });
150
+ }
151
+ function Tile({ item }) {
152
+ const tone = item.tone ?? (item.accent ? "primary" : "default");
153
+ return /* @__PURE__ */ jsxs("div", { className: "bg-background p-5", children: [
154
+ /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 font-mono text-[10px] tracking-widest uppercase", children: item.label }),
155
+ /* @__PURE__ */ jsx(
156
+ "div",
157
+ {
158
+ className: `font-display mt-1 text-2xl font-bold tabular-nums tracking-tight ${TONE_CLASS3[tone]}`,
159
+ children: item.value
160
+ }
161
+ ),
162
+ item.sub && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/70 mt-1 font-mono text-[10px] tracking-widest uppercase", children: item.sub })
163
+ ] });
164
+ }
165
+ function StatTile({ children, ...item }) {
166
+ return /* @__PURE__ */ jsxs("div", { children: [
167
+ /* @__PURE__ */ jsx(Tile, { item }),
168
+ children
169
+ ] });
170
+ }
171
+ var FRAME = {
172
+ info: "border-primary/30 bg-primary/5",
173
+ warning: "border-warning/40 bg-warning/5",
174
+ destructive: "border-destructive/40 bg-destructive/5",
175
+ success: "border-success/40 bg-success/5",
176
+ muted: "border-border bg-muted/20"
177
+ };
178
+ var LABEL = {
179
+ info: "text-primary",
180
+ warning: "text-warning",
181
+ destructive: "text-destructive",
182
+ success: "text-success",
183
+ muted: "text-muted-foreground"
184
+ };
185
+ function Callout({ tone = "info", label, icon, children, action, className }) {
186
+ return /* @__PURE__ */ jsxs("div", { className: cn("border p-4 md:p-5", FRAME[tone], className), children: [
187
+ label && /* @__PURE__ */ jsxs("div", { className: cn("label-mono mb-2 flex items-center gap-1.5", LABEL[tone]), children: [
188
+ icon,
189
+ /* @__PURE__ */ jsxs("span", { children: [
190
+ "\xA7 ",
191
+ label
192
+ ] })
193
+ ] }),
194
+ /* @__PURE__ */ jsxs("div", { className: "text-foreground/85 text-sm leading-relaxed", children: [
195
+ !label && icon ? /* @__PURE__ */ jsx("span", { className: cn("mr-2 inline-flex align-middle", LABEL[tone]), children: icon }) : null,
196
+ children
197
+ ] }),
198
+ action && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-3", children: action })
199
+ ] });
200
+ }
201
+ function DefinitionList({ items, className }) {
202
+ return /* @__PURE__ */ jsx(
203
+ "dl",
204
+ {
205
+ className: cn(
206
+ "grid gap-x-5 gap-y-2 text-sm sm:grid-cols-[auto_1fr] sm:items-baseline",
207
+ className
208
+ ),
209
+ children: items.map((item, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
210
+ /* @__PURE__ */ jsx("dt", { className: "label-mono text-muted-foreground text-[10px]", children: item.label }),
211
+ /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono text-xs break-all", children: item.value })
212
+ ] }, i))
213
+ }
214
+ );
215
+ }
216
+ function DataRow({ children, meta, action, as, className }) {
217
+ const Tag = as ?? "div";
218
+ return /* @__PURE__ */ jsxs(
219
+ Tag,
220
+ {
221
+ className: cn(
222
+ "flex flex-col gap-1 py-3 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4",
223
+ className
224
+ ),
225
+ children: [
226
+ /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
227
+ (meta || action) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:justify-end", children: [
228
+ meta && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[11px] tracking-wide", children: meta }),
229
+ action
230
+ ] })
231
+ ]
232
+ }
233
+ );
234
+ }
235
+ var ENTRIES = [
236
+ {
237
+ slug: "home",
238
+ href: "https://ochk.io",
239
+ label: "orangecheck",
240
+ sub: "umbrella",
241
+ docsHref: "https://docs.ochk.io"
242
+ },
243
+ {
244
+ slug: "docs",
245
+ href: "https://docs.ochk.io",
246
+ label: "oc\xB7docs",
247
+ sub: "unified docs",
248
+ docsHref: "https://docs.ochk.io"
249
+ },
250
+ {
251
+ slug: "fleet",
252
+ href: "https://fleet.ochk.io",
253
+ label: "oc\xB7fleet",
254
+ sub: "managed \u2014 agent fleet",
255
+ docsHref: "https://docs.ochk.io/fleet"
256
+ },
257
+ {
258
+ slug: "me",
259
+ href: "https://me.ochk.io",
260
+ label: "oc\xB7me",
261
+ sub: "earn \u2014 consumer identity",
262
+ docsHref: "https://docs.ochk.io/me"
263
+ },
264
+ {
265
+ slug: "vault",
266
+ href: "https://vault.ochk.io",
267
+ label: "oc\xB7vault",
268
+ sub: "keep \u2014 encrypted secrets",
269
+ docsHref: "https://docs.ochk.io/vault"
270
+ },
271
+ {
272
+ slug: "attest",
273
+ href: "https://attest.ochk.io",
274
+ label: "oc\xB7attest",
275
+ sub: "am \u2014 sybil resistance",
276
+ docsHref: "https://docs.ochk.io/attest"
277
+ },
278
+ {
279
+ slug: "lock",
280
+ href: "https://lock.ochk.io",
281
+ label: "oc\xB7lock",
282
+ sub: "whisper \u2014 encryption",
283
+ docsHref: "https://docs.ochk.io/lock"
284
+ },
285
+ {
286
+ slug: "vote",
287
+ href: "https://vote.ochk.io",
288
+ label: "oc\xB7vote",
289
+ sub: "decide \u2014 polls",
290
+ docsHref: "https://docs.ochk.io/vote"
291
+ },
292
+ {
293
+ slug: "stamp",
294
+ href: "https://stamp.ochk.io",
295
+ label: "oc\xB7stamp",
296
+ sub: "declare \u2014 block-anchored",
297
+ docsHref: "https://docs.ochk.io/stamp"
298
+ },
299
+ {
300
+ slug: "agent",
301
+ href: "https://agent.ochk.io",
302
+ label: "oc\xB7agent",
303
+ sub: "delegate \u2014 scoped auth",
304
+ docsHref: "https://docs.ochk.io/agent"
305
+ },
306
+ {
307
+ slug: "pledge",
308
+ href: "https://pledge.ochk.io",
309
+ label: "oc\xB7pledge",
310
+ sub: "swear \u2014 bonded commitment",
311
+ docsHref: "https://docs.ochk.io/pledge"
312
+ }
313
+ ];
314
+ var OWNER_ENTRIES = [
315
+ {
316
+ slug: "analytics",
317
+ href: "https://analytics.ochk.io",
318
+ label: "oc\xB7analytics",
319
+ sub: "owner cockpit",
320
+ docsHref: "https://analytics.ochk.io"
321
+ }
322
+ ];
323
+ function EcosystemSwitcher({
324
+ current,
325
+ className,
326
+ showOwnerEntries = false
327
+ }) {
328
+ const [open, setOpen] = useState(false);
329
+ const containerRef = useRef(null);
330
+ useEffect(() => {
331
+ if (!open) return;
332
+ function onDoc(e) {
333
+ if (!containerRef.current) return;
334
+ if (!containerRef.current.contains(e.target)) setOpen(false);
335
+ }
336
+ function onKey(e) {
337
+ if (e.key === "Escape") setOpen(false);
338
+ }
339
+ document.addEventListener("mousedown", onDoc);
340
+ document.addEventListener("keydown", onKey);
341
+ return () => {
342
+ document.removeEventListener("mousedown", onDoc);
343
+ document.removeEventListener("keydown", onKey);
344
+ };
345
+ }, [open]);
346
+ return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative " + (className ?? ""), children: [
347
+ /* @__PURE__ */ jsxs(
348
+ "button",
349
+ {
350
+ type: "button",
351
+ "aria-haspopup": "menu",
352
+ "aria-expanded": open,
353
+ "aria-label": "Switch OrangeCheck product",
354
+ title: "Switch product",
355
+ onClick: () => setOpen((v) => !v),
356
+ className: "inline-flex items-center gap-1 px-2 py-1 transition-colors " + (open ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
357
+ children: [
358
+ /* @__PURE__ */ jsx(Boxes, { className: "h-4 w-4" }),
359
+ /* @__PURE__ */ jsx(
360
+ ChevronDown,
361
+ {
362
+ className: "h-3.5 w-3.5 transition-transform " + (open ? "rotate-180" : "")
363
+ }
364
+ )
365
+ ]
366
+ }
367
+ ),
368
+ open && /* @__PURE__ */ jsxs(
369
+ "div",
370
+ {
371
+ role: "menu",
372
+ "aria-label": "Switch OrangeCheck product",
373
+ className: "bg-background absolute right-0 top-full z-[60] mt-2 w-72 border shadow-lg",
374
+ children: [
375
+ /* @__PURE__ */ jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the family" }),
376
+ /* @__PURE__ */ jsx("ul", { className: "py-1", children: [...ENTRIES, ...showOwnerEntries ? OWNER_ENTRIES : []].map((e) => {
377
+ const isActive2 = e.slug === current;
378
+ return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
379
+ Link6,
380
+ {
381
+ href: e.href,
382
+ onClick: () => setOpen(false),
383
+ "aria-current": isActive2 ? "page" : void 0,
384
+ className: "group flex items-baseline gap-3 px-4 py-2 transition-colors " + (isActive2 ? "bg-primary/5" : "hover:bg-muted"),
385
+ children: [
386
+ /* @__PURE__ */ jsx(
387
+ "span",
388
+ {
389
+ className: "font-display flex-1 text-[12px] font-semibold tracking-tight " + (isActive2 ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
390
+ children: e.label
391
+ }
392
+ ),
393
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wider uppercase", children: e.sub }),
394
+ isActive2 && /* @__PURE__ */ jsx(Check, { className: "text-primary h-3 w-3" })
395
+ ]
396
+ }
397
+ ) }, e.slug);
398
+ }) }),
399
+ /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2 font-mono text-[10px] tracking-widest uppercase", children: /* @__PURE__ */ jsx(
400
+ Link6,
401
+ {
402
+ href: "https://docs.ochk.io",
403
+ onClick: () => setOpen(false),
404
+ className: "text-muted-foreground hover:text-foreground inline-block transition-colors",
405
+ children: "docs.ochk.io \u2192"
406
+ }
407
+ ) })
408
+ ]
409
+ }
410
+ )
411
+ ] });
412
+ }
413
+
414
+ // src/chrome/family-properties.ts
415
+ var FAMILY_PROPERTIES = [
416
+ {
417
+ slug: "home",
418
+ origin: "https://ochk.io",
419
+ hostname: "ochk.io",
420
+ label: "orangecheck",
421
+ sub: "umbrella \xB7 sign-in",
422
+ docsHref: "https://docs.ochk.io",
423
+ category: "hub"
424
+ },
425
+ {
426
+ slug: "docs",
427
+ origin: "https://docs.ochk.io",
428
+ hostname: "docs.ochk.io",
429
+ label: "oc\xB7docs",
430
+ sub: "unified reference",
431
+ docsHref: "https://docs.ochk.io",
432
+ category: "hub"
433
+ },
434
+ {
435
+ slug: "me",
436
+ origin: "https://me.ochk.io",
437
+ hostname: "me.ochk.io",
438
+ label: "oc\xB7me",
439
+ sub: "earn \u2014 consumer identity",
440
+ docsHref: "https://docs.ochk.io/me",
441
+ category: "product"
442
+ },
443
+ {
444
+ slug: "vault",
445
+ origin: "https://vault.ochk.io",
446
+ hostname: "vault.ochk.io",
447
+ label: "oc\xB7vault",
448
+ sub: "keep \u2014 encrypted secrets",
449
+ docsHref: "https://docs.ochk.io/vault",
450
+ category: "product"
451
+ },
452
+ {
453
+ slug: "fleet",
454
+ origin: "https://fleet.ochk.io",
455
+ hostname: "fleet.ochk.io",
456
+ label: "oc\xB7fleet",
457
+ sub: "managed \u2014 agent fleet",
458
+ docsHref: "https://docs.ochk.io/fleet",
459
+ category: "product"
460
+ },
461
+ {
462
+ slug: "attest",
463
+ origin: "https://attest.ochk.io",
464
+ hostname: "attest.ochk.io",
465
+ label: "oc\xB7attest",
466
+ sub: "am \u2014 sybil resistance",
467
+ docsHref: "https://docs.ochk.io/attest",
468
+ category: "protocol"
469
+ },
470
+ {
471
+ slug: "lock",
472
+ origin: "https://lock.ochk.io",
473
+ hostname: "lock.ochk.io",
474
+ label: "oc\xB7lock",
475
+ sub: "whisper \u2014 encryption",
476
+ docsHref: "https://docs.ochk.io/lock",
477
+ category: "protocol"
478
+ },
479
+ {
480
+ slug: "vote",
481
+ origin: "https://vote.ochk.io",
482
+ hostname: "vote.ochk.io",
483
+ label: "oc\xB7vote",
484
+ sub: "decide \u2014 polls",
485
+ docsHref: "https://docs.ochk.io/vote",
486
+ category: "protocol"
487
+ },
488
+ {
489
+ slug: "stamp",
490
+ origin: "https://stamp.ochk.io",
491
+ hostname: "stamp.ochk.io",
492
+ label: "oc\xB7stamp",
493
+ sub: "declare \u2014 block-anchored",
494
+ docsHref: "https://docs.ochk.io/stamp",
495
+ category: "protocol"
496
+ },
497
+ {
498
+ slug: "agent",
499
+ origin: "https://agent.ochk.io",
500
+ hostname: "agent.ochk.io",
501
+ label: "oc\xB7agent",
502
+ sub: "delegate \u2014 scoped auth",
503
+ docsHref: "https://docs.ochk.io/agent",
504
+ category: "protocol"
505
+ },
506
+ {
507
+ slug: "pledge",
508
+ origin: "https://pledge.ochk.io",
509
+ hostname: "pledge.ochk.io",
510
+ label: "oc\xB7pledge",
511
+ sub: "swear \u2014 bonded commitment",
512
+ docsHref: "https://docs.ochk.io/pledge",
513
+ category: "protocol"
514
+ },
515
+ {
516
+ slug: "analytics",
517
+ origin: "https://analytics.ochk.io",
518
+ hostname: "analytics.ochk.io",
519
+ label: "oc\xB7analytics",
520
+ sub: "owner cockpit",
521
+ docsHref: "https://analytics.ochk.io",
522
+ category: "owner"
523
+ }
524
+ ];
525
+ var SITE_STATE_LABEL = {
526
+ alpha: "alpha",
527
+ beta: "beta"
528
+ };
529
+ function findFamilyProperty(slug) {
530
+ return FAMILY_PROPERTIES.find((p) => p.slug === slug);
531
+ }
532
+ var SECTIONS = [
533
+ { category: "hub", label: "hub" },
534
+ { category: "product", label: "products" },
535
+ { category: "protocol", label: "protocols" },
536
+ { category: "owner", label: "owner" }
537
+ ];
538
+ function CategoryChip({ category }) {
539
+ if (category === "hub") return null;
540
+ const label = category === "product" ? "product" : category === "protocol" ? "protocol" : "owner";
541
+ const tone = category === "product" ? "border-primary/25 bg-primary/10 text-primary" : category === "protocol" ? "border-muted-foreground/20 bg-muted/40 text-muted-foreground/85" : "border-warning/30 bg-warning/10 text-warning";
542
+ return /* @__PURE__ */ jsx(
543
+ "span",
544
+ {
545
+ "aria-label": category === "product" ? "commercial product" : category === "protocol" ? "protocol reference" : "owner-only surface",
546
+ className: "ml-1 hidden rounded-sm border px-1.5 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase sm:inline-block " + tone,
547
+ "data-oc-category": category,
548
+ children: label
549
+ }
550
+ );
551
+ }
552
+ function SiteStateBadge({ state }) {
553
+ if (state === "live") return null;
554
+ return /* @__PURE__ */ jsx(
555
+ "span",
556
+ {
557
+ "aria-label": `site lifecycle: ${state}`,
558
+ className: "text-muted-foreground/70 ml-1 hidden font-mono text-[9px] font-medium tracking-widest uppercase sm:inline-block",
559
+ "data-oc-site-state": state,
560
+ children: SITE_STATE_LABEL[state]
561
+ }
562
+ );
563
+ }
564
+ function MenuCategoryChip({ category }) {
565
+ if (category === "hub") return null;
566
+ const label = category === "product" ? "pro" : category === "protocol" ? "spec" : "own";
567
+ const tone = category === "product" ? "bg-primary/10 text-primary" : category === "protocol" ? "bg-muted/60 text-muted-foreground/80" : "bg-warning/15 text-warning";
568
+ return /* @__PURE__ */ jsx(
569
+ "span",
570
+ {
571
+ "aria-hidden": true,
572
+ className: "inline-block shrink-0 rounded-sm px-1 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase " + tone,
573
+ children: label
574
+ }
575
+ );
576
+ }
577
+ function OcLogoDropdown({
578
+ current,
579
+ homeHref = "/",
580
+ siteState = "live",
581
+ children,
582
+ className,
583
+ triggerClassName,
584
+ popoverClassName,
585
+ showOwnerEntries = false
586
+ }) {
587
+ const [open, setOpen] = useState(false);
588
+ const containerRef = useRef(null);
589
+ const menuId = useId();
590
+ const router = useRouter();
591
+ const currentCategory = findFamilyProperty(current)?.category ?? "hub";
592
+ function handleTriggerClick(e) {
593
+ if (e.detail >= 2) {
594
+ e.preventDefault();
595
+ setOpen(false);
596
+ void router.push(homeHref);
597
+ return;
598
+ }
599
+ setOpen((v) => !v);
600
+ }
601
+ useEffect(() => {
602
+ if (!open) return;
603
+ function onDoc(e) {
604
+ if (!containerRef.current) return;
605
+ if (!containerRef.current.contains(e.target)) setOpen(false);
606
+ }
607
+ function onKey(e) {
608
+ if (e.key === "Escape") setOpen(false);
609
+ }
610
+ document.addEventListener("mousedown", onDoc);
611
+ document.addEventListener("keydown", onKey);
612
+ return () => {
613
+ document.removeEventListener("mousedown", onDoc);
614
+ document.removeEventListener("keydown", onKey);
615
+ };
616
+ }, [open]);
617
+ return /* @__PURE__ */ jsxs(
618
+ "div",
619
+ {
620
+ ref: containerRef,
621
+ className: "relative inline-flex items-center " + (className ?? ""),
622
+ "data-oc-logo-dropdown": "",
623
+ "data-oc-current-category": currentCategory,
624
+ "data-oc-site-state": siteState,
625
+ children: [
626
+ /* @__PURE__ */ jsxs(
627
+ "button",
628
+ {
629
+ type: "button",
630
+ "aria-haspopup": "menu",
631
+ "aria-expanded": open,
632
+ "aria-controls": menuId,
633
+ "aria-label": "OrangeCheck family \xB7 click to open property menu, double-click to go home",
634
+ title: "single-click \xB7 family menu \xB7 double-click \xB7 go home",
635
+ onClick: handleTriggerClick,
636
+ className: triggerClassName ?? "group hover:bg-accent/30 -mx-1.5 -my-1 flex min-h-[40px] items-center gap-2 rounded-sm px-1.5 py-1 transition-colors " + (open ? "bg-accent/20" : ""),
637
+ "data-oc-logo-dropdown-trigger": "",
638
+ "data-oc-logo-dropdown-open": open ? "true" : "false",
639
+ children: [
640
+ children,
641
+ /* @__PURE__ */ jsx(CategoryChip, { category: currentCategory }),
642
+ /* @__PURE__ */ jsx(SiteStateBadge, { state: siteState }),
643
+ /* @__PURE__ */ jsx(
644
+ ChevronDown,
645
+ {
646
+ "aria-hidden": true,
647
+ className: "text-muted-foreground/70 group-hover:text-foreground/80 h-3.5 w-3.5 shrink-0 transition-transform duration-200 " + (open ? "rotate-180" : "")
648
+ }
649
+ )
650
+ ]
651
+ }
652
+ ),
653
+ /* @__PURE__ */ jsxs(
654
+ Link6,
655
+ {
656
+ href: homeHref,
657
+ "aria-label": "go to " + homeHref + " (this site's home)",
658
+ onClick: () => setOpen(false),
659
+ tabIndex: open ? 0 : -1,
660
+ className: "hover:text-primary group/home -ml-1 hidden items-center gap-1 rounded-sm px-1.5 py-1 font-mono text-[9px] tracking-widest uppercase transition-all duration-200 sm:inline-flex " + (open ? "pointer-events-auto translate-x-0 text-muted-foreground/70 opacity-100 hover:bg-accent/30" : "pointer-events-none -translate-x-1 opacity-0"),
661
+ "data-oc-logo-dropdown-home-hint": "",
662
+ children: [
663
+ /* @__PURE__ */ jsx(
664
+ CornerDownLeft,
665
+ {
666
+ "aria-hidden": true,
667
+ className: "h-3 w-3 group-hover/home:text-primary " + (open ? "motion-safe:animate-pulse" : "")
668
+ }
669
+ ),
670
+ /* @__PURE__ */ jsx("span", { className: "text-primary/70 group-hover/home:text-primary", children: "home" })
671
+ ]
672
+ }
673
+ ),
674
+ open && /* @__PURE__ */ jsxs(
675
+ "div",
676
+ {
677
+ id: menuId,
678
+ role: "menu",
679
+ "aria-label": "OrangeCheck family",
680
+ className: popoverClassName ?? "bg-background absolute top-full left-0 z-[60] mt-2 w-[min(20rem,calc(100vw-1rem))] border shadow-lg",
681
+ "data-oc-logo-dropdown-popover": "",
682
+ children: [
683
+ /* @__PURE__ */ jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the orangecheck family" }),
684
+ /* @__PURE__ */ jsx("div", { className: "max-h-[min(28rem,70vh)] overflow-y-auto py-1", role: "none", children: SECTIONS.map(({ category, label }) => {
685
+ if (category === "owner" && !showOwnerEntries) return null;
686
+ const sectionEntries = FAMILY_PROPERTIES.filter(
687
+ (e) => e.category === category
688
+ );
689
+ if (sectionEntries.length === 0) return null;
690
+ return /* @__PURE__ */ jsxs("div", { role: "none", "data-oc-section": category, children: [
691
+ /* @__PURE__ */ jsx(
692
+ "div",
693
+ {
694
+ role: "separator",
695
+ "aria-hidden": true,
696
+ className: "text-muted-foreground/60 px-4 pt-2.5 pb-1 font-mono text-[9px] font-medium tracking-widest uppercase " + (category === "hub" ? "" : "border-t mt-1"),
697
+ children: label
698
+ }
699
+ ),
700
+ /* @__PURE__ */ jsx("ul", { role: "none", className: "pb-1", children: sectionEntries.map((e) => {
701
+ const isActive2 = e.slug === current;
702
+ const href = isActive2 ? homeHref : e.origin;
703
+ return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
704
+ Link6,
705
+ {
706
+ href,
707
+ role: "menuitem",
708
+ onClick: () => setOpen(false),
709
+ "aria-current": isActive2 ? "page" : void 0,
710
+ className: "group flex items-center gap-2 px-4 py-2 transition-colors " + (isActive2 ? "bg-primary/8 border-primary -ml-px border-l-2" : "hover:bg-muted -ml-px border-l-2 border-transparent"),
711
+ "data-oc-logo-dropdown-item": isActive2 ? "current" : "sibling",
712
+ "data-oc-entry-category": e.category,
713
+ children: [
714
+ /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
715
+ /* @__PURE__ */ jsx(
716
+ "span",
717
+ {
718
+ className: "font-display text-[12px] font-semibold tracking-tight " + (isActive2 ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
719
+ children: e.label
720
+ }
721
+ ),
722
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mt-0.5 font-mono text-[10px] tracking-wide", children: e.sub })
723
+ ] }),
724
+ /* @__PURE__ */ jsx(MenuCategoryChip, { category: e.category }),
725
+ isActive2 ? /* @__PURE__ */ jsxs("span", { className: "text-primary inline-flex shrink-0 items-center gap-1 font-mono text-[10px] tracking-widest uppercase", children: [
726
+ "home",
727
+ /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
728
+ ] }) : null
729
+ ]
730
+ }
731
+ ) }, e.slug);
732
+ }) })
733
+ ] }, category);
734
+ }) }),
735
+ /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2 font-mono text-[10px] tracking-widest uppercase", children: /* @__PURE__ */ jsx(
736
+ Link6,
737
+ {
738
+ href: "https://docs.ochk.io",
739
+ onClick: () => setOpen(false),
740
+ className: "text-muted-foreground hover:text-foreground inline-block transition-colors",
741
+ children: "docs.ochk.io \u2192"
742
+ }
743
+ ) })
744
+ ]
745
+ }
746
+ )
747
+ ]
748
+ }
749
+ );
750
+ }
751
+ function obscureIdentity(value) {
752
+ if (value.length <= 12) {
753
+ return `${value.slice(0, 4)}\u2026${value.slice(-3)}`;
754
+ }
755
+ return `${value.slice(0, 6)}\u2026${value.slice(-4)}`;
756
+ }
757
+ var IDENTITY_KIND_LABEL = {
758
+ did: "did:oc",
759
+ btc: "bitcoin",
760
+ email: "email",
761
+ nostr: "nostr"
762
+ };
763
+ async function writeClipboard(text) {
764
+ try {
765
+ if (navigator.clipboard?.writeText) {
766
+ await navigator.clipboard.writeText(text);
767
+ return true;
768
+ }
769
+ } catch {
770
+ }
771
+ try {
772
+ const ta = document.createElement("textarea");
773
+ ta.value = text;
774
+ ta.setAttribute("readonly", "");
775
+ ta.style.position = "fixed";
776
+ ta.style.top = "-1000px";
777
+ ta.style.opacity = "0";
778
+ document.body.appendChild(ta);
779
+ ta.select();
780
+ const ok = document.execCommand("copy");
781
+ document.body.removeChild(ta);
782
+ return ok;
783
+ } catch {
784
+ return false;
785
+ }
786
+ }
787
+ function CopyableDid({ did }) {
788
+ const [copied, setCopied] = useState(false);
789
+ const timerRef = useRef(null);
790
+ useEffect(
791
+ () => () => {
792
+ if (timerRef.current) clearTimeout(timerRef.current);
793
+ },
794
+ []
795
+ );
796
+ const onCopy = async () => {
797
+ const ok = await writeClipboard(did);
798
+ if (!ok) return;
799
+ setCopied(true);
800
+ if (timerRef.current) clearTimeout(timerRef.current);
801
+ timerRef.current = setTimeout(() => setCopied(false), 1600);
802
+ };
803
+ return /* @__PURE__ */ jsxs(
804
+ "button",
805
+ {
806
+ type: "button",
807
+ onClick: onCopy,
808
+ "aria-label": copied ? "OrangeCheck identity copied to clipboard" : `Copy OrangeCheck identity ${did} to clipboard`,
809
+ title: "Copy identity",
810
+ "data-oc-account-menu-copy-did": "",
811
+ "data-copied": copied ? "" : void 0,
812
+ className: "group/did hover:bg-accent focus-visible:ring-ring/60 -mx-1.5 mt-px flex w-[calc(100%+0.75rem)] items-start gap-1.5 rounded px-1.5 py-1 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none",
813
+ children: [
814
+ /* @__PURE__ */ jsx("span", { className: "text-foreground/90 min-w-0 flex-1 font-mono text-[11px] leading-tight break-all", children: did }),
815
+ /* @__PURE__ */ jsx(
816
+ "span",
817
+ {
818
+ className: "mt-px shrink-0 transition-colors " + (copied ? "text-primary" : "text-muted-foreground/50 group-hover/did:text-foreground/80"),
819
+ "aria-hidden": true,
820
+ children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
821
+ }
822
+ ),
823
+ /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copied to clipboard" : "" })
824
+ ]
825
+ }
826
+ );
827
+ }
828
+ function PromoteRow({
829
+ kind,
830
+ value,
831
+ active,
832
+ busy,
833
+ disabled,
834
+ onPromote
835
+ }) {
836
+ const [copied, setCopied] = useState(false);
837
+ const timerRef = useRef(null);
838
+ useEffect(
839
+ () => () => {
840
+ if (timerRef.current) clearTimeout(timerRef.current);
841
+ },
842
+ []
843
+ );
844
+ const onCopy = async () => {
845
+ const ok = await writeClipboard(value);
846
+ if (!ok) return;
847
+ setCopied(true);
848
+ if (timerRef.current) clearTimeout(timerRef.current);
849
+ timerRef.current = setTimeout(() => setCopied(false), 1600);
850
+ };
851
+ const kindLabel = IDENTITY_KIND_LABEL[kind];
852
+ return /* @__PURE__ */ jsxs(
853
+ "div",
854
+ {
855
+ className: "hover:bg-accent flex items-center gap-1 pr-2 transition-colors",
856
+ "data-oc-account-menu-promote-row": kind,
857
+ "data-active": active ? "" : void 0,
858
+ children: [
859
+ /* @__PURE__ */ jsxs(
860
+ "button",
861
+ {
862
+ type: "button",
863
+ role: "menuitemradio",
864
+ "aria-checked": active,
865
+ "aria-label": active ? `Showing as ${kindLabel}` : `Show as ${kindLabel}`,
866
+ disabled: disabled || active,
867
+ onClick: onPromote,
868
+ "data-oc-account-menu-promote": kind,
869
+ className: "flex min-w-0 flex-1 items-center gap-2 py-2 pl-3 text-left font-mono text-[11px] tracking-wide disabled:cursor-default",
870
+ children: [
871
+ /* @__PURE__ */ jsx(
872
+ "span",
873
+ {
874
+ className: "flex size-3.5 shrink-0 items-center justify-center rounded-full border " + (active ? "border-primary" : "border-muted-foreground/40"),
875
+ "aria-hidden": true,
876
+ children: active ? /* @__PURE__ */ jsx("span", { className: "bg-primary size-1.5 rounded-full" }) : null
877
+ }
878
+ ),
879
+ /* @__PURE__ */ jsx("span", { className: "text-foreground/90 min-w-0 flex-1 truncate", children: obscureIdentity(value) })
880
+ ]
881
+ }
882
+ ),
883
+ /* @__PURE__ */ jsx(
884
+ "button",
885
+ {
886
+ type: "button",
887
+ onClick: () => void onCopy(),
888
+ "aria-label": copied ? `${kindLabel} copied to clipboard` : `Copy ${kindLabel} to clipboard`,
889
+ title: "Copy",
890
+ "data-oc-account-menu-promote-copy": kind,
891
+ "data-copied": copied ? "" : void 0,
892
+ className: "hover:bg-background/70 focus-visible:ring-ring/60 flex size-6 shrink-0 items-center justify-center rounded transition-colors focus-visible:ring-2 focus-visible:outline-none",
893
+ children: copied ? /* @__PURE__ */ jsx(Check, { className: "text-primary size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "text-muted-foreground/50 size-3.5" })
894
+ }
895
+ ),
896
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 w-14 shrink-0 text-right text-[9px] tracking-widest uppercase", children: busy ? /* @__PURE__ */ jsx(Loader2, { className: "ml-auto size-3 animate-spin" }) : kindLabel }),
897
+ /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? "Copied to clipboard" : "" })
898
+ ]
899
+ }
900
+ );
901
+ }
902
+ function IdentityPromoteSection({
903
+ didOc,
904
+ nostrNpub,
905
+ current,
906
+ open,
907
+ setDisplayIdentity
908
+ }) {
909
+ const [identities, setIdentities] = useState(null);
910
+ const [loadFailed, setLoadFailed] = useState(false);
911
+ const [promoting, setPromoting] = useState(null);
912
+ const [promoteErr, setPromoteErr] = useState(null);
913
+ const lastFetchKeyRef = useRef(null);
914
+ useEffect(() => {
915
+ if (!open) return;
916
+ if (lastFetchKeyRef.current === didOc) return;
917
+ lastFetchKeyRef.current = didOc;
918
+ let cancelled = false;
919
+ setIdentities(null);
920
+ setLoadFailed(false);
921
+ void fetchOcLinkedIdentities().then((rows) => {
922
+ if (!cancelled) setIdentities(rows);
923
+ }).catch(() => {
924
+ if (!cancelled) setLoadFailed(true);
925
+ });
926
+ return () => {
927
+ cancelled = true;
928
+ };
929
+ }, [open, didOc]);
930
+ if (identities === null && !loadFailed) return null;
931
+ const btc = identities?.find((i) => i.kind === "btc" && i.is_primary && i.value) ?? identities?.find((i) => i.kind === "btc" && i.value);
932
+ const email = identities?.find((i) => i.kind === "email" && i.is_primary && i.value) ?? identities?.find((i) => i.kind === "email" && i.value);
933
+ const options = [
934
+ { kind: "did", value: didOc }
935
+ ];
936
+ if (btc?.value) options.push({ kind: "btc", value: btc.value });
937
+ if (email?.value) options.push({ kind: "email", value: email.value });
938
+ if (nostrNpub) options.push({ kind: "nostr", value: nostrNpub });
939
+ if (options.length < 2) return null;
940
+ const promote = async (kind) => {
941
+ if (promoting || kind === current.kind) return;
942
+ setPromoting(kind);
943
+ setPromoteErr(null);
944
+ try {
945
+ await setDisplayIdentity(kind);
946
+ } catch (e) {
947
+ setPromoteErr(e instanceof Error ? e.message : "promotion failed");
948
+ } finally {
949
+ setPromoting(null);
950
+ }
951
+ };
952
+ return /* @__PURE__ */ jsxs("div", { className: "border-border border-b p-1", "data-oc-account-menu-section": "show-as", children: [
953
+ /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 px-3 pt-2 pb-1 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 show as" }),
954
+ options.map((opt) => /* @__PURE__ */ jsx(
955
+ PromoteRow,
956
+ {
957
+ kind: opt.kind,
958
+ value: opt.value,
959
+ active: opt.kind === current.kind,
960
+ busy: promoting === opt.kind,
961
+ disabled: promoting !== null,
962
+ onPromote: () => void promote(opt.kind)
963
+ },
964
+ opt.kind
965
+ )),
966
+ promoteErr ? /* @__PURE__ */ jsx("div", { className: "text-destructive/80 px-3 pt-1 pb-2 font-mono text-[10px]", children: promoteErr }) : null
967
+ ] });
968
+ }
969
+ function OcAccountMenu(props) {
970
+ const session = useOcSession();
971
+ return /* @__PURE__ */ jsx(
972
+ OcAccountMenuView,
973
+ {
974
+ ...props,
975
+ session: {
976
+ status: session.status,
977
+ account: session.account ? {
978
+ didOc: session.account.didOc,
979
+ displayName: session.account.displayName ?? null,
980
+ displayIdentity: session.account.displayIdentity,
981
+ nostrNpub: session.account.nostrNpub ?? null
982
+ } : null,
983
+ signOut: session.signOut,
984
+ refresh: session.refresh,
985
+ setDisplayIdentity: session.setDisplayIdentity,
986
+ // Multi-account · the connected variant always forwards
987
+ // these from useOcSession(). The View variant accepts
988
+ // them as optional so sites running their own auth
989
+ // context (oc-www) can opt in incrementally.
990
+ roster: session.roster,
991
+ switchAccount: session.switchAccount,
992
+ addAccountUrl: session.addAccountUrl
993
+ }
994
+ }
995
+ );
996
+ }
997
+ function OcAccountMenuView({
998
+ current,
999
+ signInUrl = "/signin",
1000
+ signInLabel = "sign in",
1001
+ signOutRedirect = "/",
1002
+ menuItems,
1003
+ primaryNavLinks,
1004
+ secondaryNavLinks,
1005
+ showFamilyDashboard,
1006
+ build,
1007
+ siteState,
1008
+ className,
1009
+ triggerClassName,
1010
+ popoverClassName,
1011
+ session
1012
+ }) {
1013
+ const {
1014
+ status,
1015
+ account,
1016
+ signOut,
1017
+ refresh,
1018
+ setDisplayIdentity,
1019
+ roster,
1020
+ switchAccount,
1021
+ addAccountUrl
1022
+ } = session;
1023
+ const [hydrated, setHydrated] = useState(false);
1024
+ const [open, setOpen] = useState(false);
1025
+ const wrapRef = useRef(null);
1026
+ const property = findFamilyProperty(current);
1027
+ const hostname = property?.hostname ?? `${current}.ochk.io`;
1028
+ const isHome = current === "home";
1029
+ const familyDashboardEnabled = showFamilyDashboard ?? !isHome;
1030
+ useEffect(() => setHydrated(true), []);
1031
+ useEffect(() => {
1032
+ const onWake = () => {
1033
+ if (document.visibilityState === "visible") void refresh();
1034
+ };
1035
+ const onFocus = () => void refresh();
1036
+ document.addEventListener("visibilitychange", onWake);
1037
+ window.addEventListener("focus", onFocus);
1038
+ return () => {
1039
+ document.removeEventListener("visibilitychange", onWake);
1040
+ window.removeEventListener("focus", onFocus);
1041
+ };
1042
+ }, [refresh]);
1043
+ useEffect(() => {
1044
+ if (!open) return;
1045
+ const onClick = (e) => {
1046
+ if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
1047
+ };
1048
+ const onKey = (e) => {
1049
+ if (e.key === "Escape") setOpen(false);
1050
+ };
1051
+ document.addEventListener("mousedown", onClick);
1052
+ document.addEventListener("keydown", onKey);
1053
+ return () => {
1054
+ document.removeEventListener("mousedown", onClick);
1055
+ document.removeEventListener("keydown", onKey);
1056
+ };
1057
+ }, [open]);
1058
+ const signInTrigger = /* @__PURE__ */ jsx(
1059
+ "a",
1060
+ {
1061
+ href: signInUrl,
1062
+ "aria-label": signInLabel,
1063
+ "data-oc-account-menu-signin": "",
1064
+ className: triggerClassName ?? "border-input bg-background hover:bg-accent inline-flex h-8 items-center justify-center rounded-md border px-3 font-mono text-[11px] font-semibold tracking-widest uppercase transition-colors",
1065
+ children: signInLabel
1066
+ }
1067
+ );
1068
+ if (!hydrated || status === "loading") {
1069
+ return signInTrigger;
1070
+ }
1071
+ if (status !== "authenticated" || !account) {
1072
+ return signInTrigger;
1073
+ }
1074
+ const displayName = account.displayName ?? null;
1075
+ const label = displayName ?? obscureIdentity(account.displayIdentity.value);
1076
+ return /* @__PURE__ */ jsxs(
1077
+ "div",
1078
+ {
1079
+ ref: wrapRef,
1080
+ className: "relative inline-block " + (className ?? ""),
1081
+ "data-oc-account-menu": "",
1082
+ children: [
1083
+ /* @__PURE__ */ jsxs(
1084
+ "button",
1085
+ {
1086
+ type: "button",
1087
+ onClick: () => setOpen((v) => !v),
1088
+ "aria-haspopup": "menu",
1089
+ "aria-expanded": open,
1090
+ "aria-label": `Signed in as ${account.didOc}. Open account menu.`,
1091
+ className: triggerClassName ?? "border-primary/40 bg-card hover:bg-accent inline-flex h-8 items-center gap-1.5 rounded-md border px-3 font-mono text-[11px] tracking-wide transition-colors",
1092
+ "data-oc-account-menu-trigger": "",
1093
+ children: [
1094
+ /* @__PURE__ */ jsx("span", { className: "bg-primary inline-block size-1.5 rounded-full", "aria-hidden": true }),
1095
+ /* @__PURE__ */ jsx("span", { className: "text-foreground", children: label }),
1096
+ /* @__PURE__ */ jsx(
1097
+ "svg",
1098
+ {
1099
+ width: "9",
1100
+ height: "9",
1101
+ viewBox: "0 0 10 10",
1102
+ "aria-hidden": true,
1103
+ className: "opacity-60 transition-transform " + (open ? "rotate-180" : "rotate-0"),
1104
+ children: /* @__PURE__ */ jsx(
1105
+ "path",
1106
+ {
1107
+ d: "M2 4 L5 7 L8 4",
1108
+ stroke: "currentColor",
1109
+ strokeWidth: "1.5",
1110
+ fill: "none",
1111
+ strokeLinecap: "round"
1112
+ }
1113
+ )
1114
+ }
1115
+ )
1116
+ ]
1117
+ }
1118
+ ),
1119
+ open && /* @__PURE__ */ jsxs(
1120
+ "div",
1121
+ {
1122
+ role: "menu",
1123
+ "aria-label": "Account menu",
1124
+ className: popoverClassName ?? "border-border bg-popover text-popover-foreground absolute top-[calc(100%+6px)] right-0 z-50 w-[min(20rem,calc(100vw-1rem))] border shadow-xl",
1125
+ "data-oc-account-menu-popover": "",
1126
+ children: [
1127
+ /* @__PURE__ */ jsxs("div", { className: "border-border border-b p-3", children: [
1128
+ /* @__PURE__ */ jsxs("div", { className: "text-primary mb-1 font-mono text-[10px] tracking-widest uppercase", children: [
1129
+ "\xA7 signed in \xB7 ",
1130
+ hostname
1131
+ ] }),
1132
+ /* @__PURE__ */ jsx(CopyableDid, { did: account.didOc }),
1133
+ displayName ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
1134
+ ] }),
1135
+ /* @__PURE__ */ jsx(
1136
+ IdentityPromoteSection,
1137
+ {
1138
+ didOc: account.didOc,
1139
+ nostrNpub: account.nostrNpub ?? null,
1140
+ current: account.displayIdentity,
1141
+ open,
1142
+ setDisplayIdentity
1143
+ }
1144
+ ),
1145
+ /* @__PURE__ */ jsx(
1146
+ AccountsSection,
1147
+ {
1148
+ roster: roster ?? [],
1149
+ switchAccount,
1150
+ addAccountUrl,
1151
+ signOut,
1152
+ onActionStart: () => setOpen(false)
1153
+ }
1154
+ ),
1155
+ primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
1156
+ PopoverSection,
1157
+ {
1158
+ label: "navigate",
1159
+ items: primaryNavLinks,
1160
+ onItemClick: () => setOpen(false)
1161
+ }
1162
+ ) : null,
1163
+ /* @__PURE__ */ jsxs("div", { className: "p-1", "data-oc-account-menu-section": "account", children: [
1164
+ primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 px-3 pb-1 pt-2 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 account" }) : null,
1165
+ menuItems?.map((item) => {
1166
+ const onClick = () => setOpen(false);
1167
+ const cls = "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors";
1168
+ const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
1169
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
1170
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
1171
+ item.external ? /* @__PURE__ */ jsx(
1172
+ "span",
1173
+ {
1174
+ className: "text-muted-foreground/70 text-[10px]",
1175
+ "aria-hidden": true,
1176
+ children: "\u2197"
1177
+ }
1178
+ ) : null
1179
+ ] });
1180
+ return item.external ? /* @__PURE__ */ jsx(
1181
+ "a",
1182
+ {
1183
+ href: item.href,
1184
+ target: "_blank",
1185
+ rel: "noreferrer",
1186
+ onClick,
1187
+ role: "menuitem",
1188
+ className: cls,
1189
+ "data-oc-account-menu-item": "",
1190
+ children: inner
1191
+ },
1192
+ item.href
1193
+ ) : /* @__PURE__ */ jsx(
1194
+ Link6,
1195
+ {
1196
+ href: item.href,
1197
+ onClick,
1198
+ role: "menuitem",
1199
+ className: cls,
1200
+ "data-oc-account-menu-item": "",
1201
+ children: inner
1202
+ },
1203
+ item.href
1204
+ );
1205
+ }),
1206
+ familyDashboardEnabled ? /* @__PURE__ */ jsxs(
1207
+ "a",
1208
+ {
1209
+ href: "https://ochk.io/dashboard",
1210
+ target: "_blank",
1211
+ rel: "noreferrer",
1212
+ onClick: () => setOpen(false),
1213
+ role: "menuitem",
1214
+ className: "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors",
1215
+ "data-oc-account-menu-item": "",
1216
+ "data-oc-account-menu-family-dashboard": "",
1217
+ children: [
1218
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
1219
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: "family dashboard" }),
1220
+ /* @__PURE__ */ jsx(
1221
+ "span",
1222
+ {
1223
+ className: "text-muted-foreground/70 text-[10px]",
1224
+ "aria-hidden": true,
1225
+ children: "\u2197"
1226
+ }
1227
+ )
1228
+ ]
1229
+ }
1230
+ ) : null,
1231
+ /* @__PURE__ */ jsxs(
1232
+ "button",
1233
+ {
1234
+ type: "button",
1235
+ role: "menuitem",
1236
+ onClick: () => {
1237
+ setOpen(false);
1238
+ void (async () => {
1239
+ await signOut();
1240
+ if (typeof window !== "undefined") {
1241
+ window.location.assign(signOutRedirect);
1242
+ }
1243
+ })();
1244
+ },
1245
+ className: "hover:bg-accent flex w-full items-center gap-2 px-3 py-2 text-left font-mono text-[11px] tracking-wide transition-colors",
1246
+ "data-oc-account-menu-item": "",
1247
+ "data-oc-account-menu-signout": "",
1248
+ children: [
1249
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
1250
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: "sign out" })
1251
+ ]
1252
+ }
1253
+ )
1254
+ ] }),
1255
+ secondaryNavLinks && secondaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
1256
+ PopoverSection,
1257
+ {
1258
+ label: "more",
1259
+ items: secondaryNavLinks,
1260
+ onItemClick: () => setOpen(false),
1261
+ bordered: true
1262
+ }
1263
+ ) : null,
1264
+ build ? /* @__PURE__ */ jsx(BuildFooter, { hostname, build, state: siteState }) : null
1265
+ ]
1266
+ }
1267
+ )
1268
+ ]
1269
+ }
1270
+ );
1271
+ }
1272
+ function AccountsSection({
1273
+ roster,
1274
+ switchAccount,
1275
+ addAccountUrl,
1276
+ signOut,
1277
+ onActionStart
1278
+ }) {
1279
+ const [switching, setSwitching] = useState(null);
1280
+ const [err, setErr] = useState(null);
1281
+ if (!addAccountUrl) return null;
1282
+ const onSwitch = async (didOc) => {
1283
+ if (!switchAccount || switching) return;
1284
+ setSwitching(didOc);
1285
+ setErr(null);
1286
+ try {
1287
+ await switchAccount(didOc);
1288
+ } catch (e) {
1289
+ setErr(e instanceof Error ? e.message : "switch failed");
1290
+ } finally {
1291
+ setSwitching(null);
1292
+ }
1293
+ };
1294
+ return /* @__PURE__ */ jsxs("div", { className: "border-border border-b p-1", "data-oc-account-menu-section": "accounts", children: [
1295
+ /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 px-3 pt-2 pb-1 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 accounts" }),
1296
+ roster.map((peer) => /* @__PURE__ */ jsx(
1297
+ SwitchRow,
1298
+ {
1299
+ peer,
1300
+ busy: switching === peer.didOc,
1301
+ disabled: switching !== null,
1302
+ onSwitch: () => void onSwitch(peer.didOc)
1303
+ },
1304
+ peer.didOc
1305
+ )),
1306
+ /* @__PURE__ */ jsxs(
1307
+ "a",
1308
+ {
1309
+ href: addAccountUrl(),
1310
+ onClick: () => onActionStart(),
1311
+ role: "menuitem",
1312
+ "data-oc-account-menu-add-account": "",
1313
+ className: "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors",
1314
+ children: [
1315
+ /* @__PURE__ */ jsx(Plus, { className: "text-muted-foreground size-3.5 shrink-0", "aria-hidden": true }),
1316
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: roster.length === 0 ? "add another account" : "add another" })
1317
+ ]
1318
+ }
1319
+ ),
1320
+ roster.length > 0 ? /* @__PURE__ */ jsxs(
1321
+ "button",
1322
+ {
1323
+ type: "button",
1324
+ role: "menuitem",
1325
+ onClick: () => {
1326
+ onActionStart();
1327
+ void (async () => {
1328
+ try {
1329
+ await signOut({ scope: "current" });
1330
+ } catch {
1331
+ }
1332
+ })();
1333
+ },
1334
+ "data-oc-account-menu-leave-current": "",
1335
+ className: "hover:bg-accent flex w-full items-center gap-2 px-3 py-2 text-left font-mono text-[11px] tracking-wide transition-colors",
1336
+ children: [
1337
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
1338
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: "leave this account" })
1339
+ ]
1340
+ }
1341
+ ) : null,
1342
+ err ? /* @__PURE__ */ jsx("div", { className: "text-destructive/80 px-3 pt-1 pb-2 font-mono text-[10px]", children: err }) : null
1343
+ ] });
1344
+ }
1345
+ function SwitchRow({
1346
+ peer,
1347
+ busy,
1348
+ disabled,
1349
+ onSwitch
1350
+ }) {
1351
+ const label = peer.displayName ?? obscureIdentity(peer.displayIdentity.value);
1352
+ const kindLabel = IDENTITY_KIND_LABEL[peer.displayIdentity.kind];
1353
+ return /* @__PURE__ */ jsxs(
1354
+ "button",
1355
+ {
1356
+ type: "button",
1357
+ role: "menuitemradio",
1358
+ "aria-checked": false,
1359
+ "aria-label": `Switch to ${peer.didOc}`,
1360
+ disabled,
1361
+ onClick: onSwitch,
1362
+ "data-oc-account-menu-switch-row": "",
1363
+ className: "hover:bg-accent flex w-full items-center gap-2 px-3 py-2 text-left font-mono text-[11px] tracking-wide transition-colors disabled:cursor-default",
1364
+ children: [
1365
+ /* @__PURE__ */ jsx(
1366
+ "span",
1367
+ {
1368
+ className: "border-muted-foreground/40 flex size-3.5 shrink-0 items-center justify-center rounded-full border",
1369
+ "aria-hidden": true
1370
+ }
1371
+ ),
1372
+ /* @__PURE__ */ jsx("span", { className: "text-foreground/90 min-w-0 flex-1 truncate", children: label }),
1373
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 w-14 shrink-0 text-right text-[9px] tracking-widest uppercase", children: busy ? /* @__PURE__ */ jsx(Loader2, { className: "ml-auto size-3 animate-spin" }) : kindLabel })
1374
+ ]
1375
+ }
1376
+ );
1377
+ }
1378
+ function PopoverSection({
1379
+ label,
1380
+ items,
1381
+ onItemClick,
1382
+ bordered
1383
+ }) {
1384
+ const cls = "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors";
1385
+ return /* @__PURE__ */ jsxs(
1386
+ "div",
1387
+ {
1388
+ className: "p-1 " + (bordered ? "border-border border-t" : ""),
1389
+ "data-oc-account-menu-section": label,
1390
+ children: [
1391
+ /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground/60 px-3 pt-2 pb-1 font-mono text-[10px] tracking-widest uppercase", children: [
1392
+ "\xA7 ",
1393
+ label
1394
+ ] }),
1395
+ items.map((item) => {
1396
+ const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
1397
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
1398
+ /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
1399
+ item.external ? /* @__PURE__ */ jsx(
1400
+ "span",
1401
+ {
1402
+ className: "text-muted-foreground/70 text-[10px]",
1403
+ "aria-hidden": true,
1404
+ children: "\u2197"
1405
+ }
1406
+ ) : null
1407
+ ] });
1408
+ return item.external ? /* @__PURE__ */ jsx(
1409
+ "a",
1410
+ {
1411
+ href: item.href,
1412
+ target: "_blank",
1413
+ rel: "noreferrer",
1414
+ onClick: onItemClick,
1415
+ role: "menuitem",
1416
+ className: cls,
1417
+ "data-oc-account-menu-item": "",
1418
+ children: inner
1419
+ },
1420
+ item.href
1421
+ ) : /* @__PURE__ */ jsx(
1422
+ Link6,
1423
+ {
1424
+ href: item.href,
1425
+ onClick: onItemClick,
1426
+ role: "menuitem",
1427
+ className: cls,
1428
+ "data-oc-account-menu-item": "",
1429
+ children: inner
1430
+ },
1431
+ item.href
1432
+ );
1433
+ })
1434
+ ]
1435
+ }
1436
+ );
1437
+ }
1438
+ function BuildFooter({
1439
+ hostname,
1440
+ build,
1441
+ state
1442
+ }) {
1443
+ const sha = build.sha;
1444
+ const showSha = !!sha && sha !== "dev";
1445
+ const commitUrl = showSha && build.repo ? `https://github.com/${build.repo}/commit/${sha}` : null;
1446
+ return /* @__PURE__ */ jsxs(
1447
+ "div",
1448
+ {
1449
+ className: "text-muted-foreground/60 border-border border-t px-3 py-2 font-mono text-[9.5px] tracking-widest uppercase",
1450
+ "data-oc-account-menu-build": "",
1451
+ children: [
1452
+ hostname,
1453
+ state && state !== "live" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
1454
+ " \xB7 ",
1455
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/80", children: state })
1456
+ ] }) : null,
1457
+ " ",
1458
+ /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/80", children: [
1459
+ "v",
1460
+ build.version,
1461
+ showSha ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
1462
+ " \xB7 ",
1463
+ commitUrl ? /* @__PURE__ */ jsx(
1464
+ "a",
1465
+ {
1466
+ href: commitUrl,
1467
+ target: "_blank",
1468
+ rel: "noreferrer",
1469
+ className: "hover:text-foreground/90 underline decoration-dotted underline-offset-2",
1470
+ children: sha
1471
+ }
1472
+ ) : sha
1473
+ ] }) : null
1474
+ ] })
1475
+ ]
1476
+ }
1477
+ );
1478
+ }
1479
+ function isActive(pathname, link) {
1480
+ if (link.external) return false;
1481
+ if (link.matchExact) return pathname === link.href;
1482
+ if (link.href === "/") return pathname === "/";
1483
+ return pathname === link.href || pathname.startsWith(link.href + "/");
1484
+ }
1485
+ function OcPrimaryNav({ activePath, links, className }) {
1486
+ return /* @__PURE__ */ jsx(
1487
+ "nav",
1488
+ {
1489
+ "aria-label": "primary",
1490
+ className: "flex min-w-0 items-center justify-start overflow-x-auto gap-0.5 sm:gap-1 whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden " + (className ?? ""),
1491
+ "data-oc-primary-nav": "",
1492
+ children: links.map((link) => {
1493
+ const active = isActive(activePath, link);
1494
+ const className2 = "font-display relative shrink-0 px-2 py-1 sm:px-3 text-[11px] sm:text-[12px] font-semibold tracking-wider uppercase transition-colors " + (active ? 'text-primary after:bg-primary after:absolute after:inset-x-2 after:-bottom-[13px] after:h-px after:content-[""]' : "text-muted-foreground hover:text-foreground");
1495
+ const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
1496
+ link.label,
1497
+ link.external ? /* @__PURE__ */ jsx(
1498
+ "span",
1499
+ {
1500
+ "aria-hidden": true,
1501
+ className: "text-muted-foreground/60 ml-1 text-[9px]",
1502
+ children: "\u2197"
1503
+ }
1504
+ ) : null
1505
+ ] });
1506
+ return link.external ? /* @__PURE__ */ jsx(
1507
+ "a",
1508
+ {
1509
+ href: link.href,
1510
+ target: "_blank",
1511
+ rel: "noreferrer",
1512
+ className: className2,
1513
+ "data-oc-primary-nav-item": "",
1514
+ children: content
1515
+ },
1516
+ link.href
1517
+ ) : /* @__PURE__ */ jsx(
1518
+ Link6,
1519
+ {
1520
+ href: link.href,
1521
+ "aria-current": active ? "page" : void 0,
1522
+ className: className2,
1523
+ "data-oc-primary-nav-item": active ? "active" : "sibling",
1524
+ children: content
1525
+ },
1526
+ link.href
1527
+ );
1528
+ })
1529
+ }
1530
+ );
1531
+ }
1532
+ function OcDashboardShell({
1533
+ rootHref = "/dashboard",
1534
+ siteLabel,
1535
+ tools,
1536
+ active,
1537
+ eyebrow,
1538
+ title,
1539
+ description,
1540
+ children,
1541
+ className
1542
+ }) {
1543
+ const [drawerOpen, setDrawerOpen] = useState(false);
1544
+ useEffect(() => {
1545
+ if (!drawerOpen) return;
1546
+ function onKey(e) {
1547
+ if (e.key === "Escape") setDrawerOpen(false);
1548
+ }
1549
+ document.addEventListener("keydown", onKey);
1550
+ const prevOverflow = document.body.style.overflow;
1551
+ document.body.style.overflow = "hidden";
1552
+ return () => {
1553
+ document.removeEventListener("keydown", onKey);
1554
+ document.body.style.overflow = prevOverflow;
1555
+ };
1556
+ }, [drawerOpen]);
1557
+ const hasHeader = Boolean(title) || Boolean(eyebrow);
1558
+ return /* @__PURE__ */ jsxs(
1559
+ "div",
1560
+ {
1561
+ className: "container " + (className ?? ""),
1562
+ "data-oc-dashboard-shell": "",
1563
+ children: [
1564
+ /* @__PURE__ */ jsxs("div", { className: "flex min-h-[calc(100vh-3rem)] flex-col md:flex-row md:gap-8", children: [
1565
+ /* @__PURE__ */ jsx(
1566
+ Sidebar,
1567
+ {
1568
+ rootHref,
1569
+ siteLabel,
1570
+ tools,
1571
+ active,
1572
+ variant: "desktop"
1573
+ }
1574
+ ),
1575
+ /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
1576
+ /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-b py-3 md:hidden", children: [
1577
+ /* @__PURE__ */ jsxs(
1578
+ "button",
1579
+ {
1580
+ type: "button",
1581
+ onClick: () => setDrawerOpen(true),
1582
+ className: "text-muted-foreground hover:text-foreground inline-flex h-9 items-center gap-2 px-1 font-mono text-[11px] tracking-widest uppercase transition-colors",
1583
+ "aria-label": "open dashboard tools",
1584
+ "aria-expanded": drawerOpen,
1585
+ "data-oc-dashboard-mobile-trigger": "",
1586
+ children: [
1587
+ /* @__PURE__ */ jsx("span", { className: "text-[14px] leading-none", children: "\u2261" }),
1588
+ /* @__PURE__ */ jsx("span", { children: "tools" })
1589
+ ]
1590
+ }
1591
+ ),
1592
+ /* @__PURE__ */ jsx(
1593
+ Link6,
1594
+ {
1595
+ href: rootHref,
1596
+ className: "text-primary font-mono text-[11px] tracking-widest uppercase",
1597
+ children: "\xA7 dashboard"
1598
+ }
1599
+ )
1600
+ ] }),
1601
+ /* @__PURE__ */ jsxs("div", { className: "pt-6 md:pt-3", children: [
1602
+ hasHeader && /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
1603
+ eyebrow ? /* @__PURE__ */ jsx("div", { className: "label-mono text-primary mb-3 font-mono text-[10px] tracking-widest uppercase", children: eyebrow }) : null,
1604
+ title ? /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-bold tracking-tight sm:text-3xl", children: title }) : null,
1605
+ description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-3 max-w-[64ch] text-sm leading-relaxed", children: description }) : null
1606
+ ] }),
1607
+ /* @__PURE__ */ jsx("div", { className: hasHeader ? "mt-8 pb-12" : "pb-12", children })
1608
+ ] })
1609
+ ] })
1610
+ ] }),
1611
+ drawerOpen ? /* @__PURE__ */ jsxs(
1612
+ "div",
1613
+ {
1614
+ className: "fixed inset-0 z-50 md:hidden",
1615
+ role: "dialog",
1616
+ "aria-modal": "true",
1617
+ "aria-label": "dashboard tools",
1618
+ "data-oc-dashboard-drawer": "",
1619
+ children: [
1620
+ /* @__PURE__ */ jsx(
1621
+ "div",
1622
+ {
1623
+ className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
1624
+ onClick: () => setDrawerOpen(false),
1625
+ "aria-hidden": true
1626
+ }
1627
+ ),
1628
+ /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-0 left-0 h-full w-[85vw] max-w-sm border-r shadow-xl", children: /* @__PURE__ */ jsx(
1629
+ Sidebar,
1630
+ {
1631
+ rootHref,
1632
+ siteLabel,
1633
+ tools,
1634
+ active,
1635
+ variant: "drawer",
1636
+ onClose: () => setDrawerOpen(false)
1637
+ }
1638
+ ) })
1639
+ ]
1640
+ }
1641
+ ) : null
1642
+ ]
1643
+ }
1644
+ );
1645
+ }
1646
+ function Sidebar({
1647
+ rootHref,
1648
+ siteLabel,
1649
+ tools,
1650
+ active,
1651
+ variant,
1652
+ onClose
1653
+ }) {
1654
+ const isDrawer = variant === "drawer";
1655
+ return /* @__PURE__ */ jsxs(
1656
+ "aside",
1657
+ {
1658
+ className: isDrawer ? "flex h-full w-full flex-col bg-card" : "hidden md:sticky md:top-4 md:flex md:h-[calc(100vh-2rem)] md:w-56 md:shrink-0 md:flex-col md:self-start md:overflow-y-auto md:rounded md:border md:bg-card/40 lg:w-60",
1659
+ "aria-label": "dashboard tools",
1660
+ "data-oc-dashboard-sidebar": variant,
1661
+ children: [
1662
+ /* @__PURE__ */ jsxs("div", { className: "border-b px-4 py-3", children: [
1663
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
1664
+ /* @__PURE__ */ jsx(
1665
+ Link6,
1666
+ {
1667
+ href: rootHref,
1668
+ onClick: onClose,
1669
+ className: "hover:text-foreground font-display text-sm font-bold tracking-tight",
1670
+ children: "\xA7 dashboard"
1671
+ }
1672
+ ),
1673
+ isDrawer ? /* @__PURE__ */ jsx(
1674
+ "button",
1675
+ {
1676
+ type: "button",
1677
+ onClick: onClose,
1678
+ className: "text-muted-foreground hover:text-foreground -mr-2 inline-flex h-8 w-8 items-center justify-center rounded font-mono text-lg",
1679
+ "aria-label": "close navigation",
1680
+ children: "\xD7"
1681
+ }
1682
+ ) : null
1683
+ ] }),
1684
+ siteLabel ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/70 mt-1 font-mono text-[10px] tracking-widest uppercase", children: siteLabel }) : null
1685
+ ] }),
1686
+ /* @__PURE__ */ jsxs("nav", { className: "flex-1 overflow-y-auto px-2 py-3", children: [
1687
+ /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 mb-1 px-3 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 tools" }),
1688
+ /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: tools.map((tool) => {
1689
+ const isActive2 = tool.id === active;
1690
+ const innerCls = "flex items-baseline gap-2 rounded px-3 py-1.5 text-[12.5px] transition-colors " + (isActive2 ? "bg-primary/10 text-primary font-semibold" : "text-muted-foreground hover:text-foreground hover:bg-muted/30");
1691
+ const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
1692
+ tool.icon ? /* @__PURE__ */ jsx(
1693
+ "span",
1694
+ {
1695
+ className: "shrink-0 font-mono text-[11px] " + (isActive2 ? "text-primary" : "text-muted-foreground/70"),
1696
+ "aria-hidden": true,
1697
+ children: tool.icon
1698
+ }
1699
+ ) : null,
1700
+ /* @__PURE__ */ jsxs("span", { className: "flex-1 leading-tight", children: [
1701
+ /* @__PURE__ */ jsx("span", { children: tool.label }),
1702
+ tool.tagline ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 mt-0.5 block font-mono text-[10px] tracking-wide normal-case", children: tool.tagline }) : null
1703
+ ] }),
1704
+ tool.external ? /* @__PURE__ */ jsx(
1705
+ "span",
1706
+ {
1707
+ className: "text-muted-foreground/60 text-[10px]",
1708
+ "aria-hidden": true,
1709
+ children: "\u2197"
1710
+ }
1711
+ ) : null
1712
+ ] });
1713
+ return /* @__PURE__ */ jsx("li", { children: tool.external ? /* @__PURE__ */ jsx(
1714
+ "a",
1715
+ {
1716
+ href: tool.href,
1717
+ target: "_blank",
1718
+ rel: "noreferrer",
1719
+ onClick: onClose,
1720
+ className: innerCls,
1721
+ "data-oc-dashboard-tool": isActive2 ? "active" : "sibling",
1722
+ children: content
1723
+ }
1724
+ ) : /* @__PURE__ */ jsx(
1725
+ Link6,
1726
+ {
1727
+ href: tool.href,
1728
+ onClick: onClose,
1729
+ "aria-current": isActive2 ? "page" : void 0,
1730
+ className: innerCls,
1731
+ "data-oc-dashboard-tool": isActive2 ? "active" : "sibling",
1732
+ children: content
1733
+ }
1734
+ ) }, tool.id);
1735
+ }) })
1736
+ ] })
1737
+ ]
1738
+ }
1739
+ );
1740
+ }
1741
+ function OcDashboardHub({ tools, className }) {
1742
+ return /* @__PURE__ */ jsx(
1743
+ "ul",
1744
+ {
1745
+ className: "grid gap-px border-t border-l sm:grid-cols-2 " + (className ?? ""),
1746
+ "data-oc-dashboard-hub": "",
1747
+ children: tools.map((tool) => {
1748
+ const content = /* @__PURE__ */ jsxs("span", { className: "flex h-full flex-col gap-3 p-5 transition-colors", children: [
1749
+ /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-3", children: [
1750
+ tool.icon ? /* @__PURE__ */ jsx(
1751
+ "span",
1752
+ {
1753
+ className: "text-primary font-mono text-[13px]",
1754
+ "aria-hidden": true,
1755
+ children: tool.icon
1756
+ }
1757
+ ) : null,
1758
+ /* @__PURE__ */ jsx("span", { className: "font-display text-foreground text-base font-bold tracking-tight", children: tool.label }),
1759
+ tool.external ? /* @__PURE__ */ jsx(
1760
+ "span",
1761
+ {
1762
+ className: "text-muted-foreground/60 ml-auto text-xs",
1763
+ "aria-hidden": true,
1764
+ children: "\u2197"
1765
+ }
1766
+ ) : /* @__PURE__ */ jsx(
1767
+ "span",
1768
+ {
1769
+ className: "text-muted-foreground/60 ml-auto text-xs",
1770
+ "aria-hidden": true,
1771
+ children: "\u2192"
1772
+ }
1773
+ )
1774
+ ] }),
1775
+ tool.tagline ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm leading-relaxed", children: tool.tagline }) : null
1776
+ ] });
1777
+ const cls = "hover:bg-muted/30 group block border-r border-b transition-colors";
1778
+ return /* @__PURE__ */ jsx("li", { children: tool.external ? /* @__PURE__ */ jsx(
1779
+ "a",
1780
+ {
1781
+ href: tool.href,
1782
+ target: "_blank",
1783
+ rel: "noreferrer",
1784
+ className: cls,
1785
+ children: content
1786
+ }
1787
+ ) : /* @__PURE__ */ jsx(Link6, { href: tool.href, className: cls, children: content }) }, tool.id);
1788
+ })
1789
+ }
1790
+ );
1791
+ }
1792
+ function AppShell({
1793
+ eyebrow,
1794
+ title,
1795
+ description,
1796
+ headerActions,
1797
+ children,
1798
+ className
1799
+ }) {
1800
+ const hasHeader = Boolean(title);
1801
+ return /* @__PURE__ */ jsx("div", { className: "container " + (className ?? ""), children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[calc(100vh-3rem)] flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "pt-6 md:pt-8", children: [
1802
+ hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", children: [
1803
+ /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
1804
+ eyebrow && /* @__PURE__ */ jsx("div", { className: "label-mono text-primary mb-3", children: eyebrow }),
1805
+ /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-bold tracking-tight sm:text-3xl", children: title }),
1806
+ description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-3 max-w-[64ch] text-sm leading-relaxed", children: description })
1807
+ ] }),
1808
+ headerActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: headerActions })
1809
+ ] }),
1810
+ /* @__PURE__ */ jsx("div", { className: hasHeader ? "mt-8 pb-12" : "pb-12", children })
1811
+ ] }) }) }) });
1812
+ }
1813
+ var HIDE = {
1814
+ sm: "hidden sm:inline",
1815
+ md: "hidden md:inline",
1816
+ lg: "hidden lg:inline"
1817
+ };
1818
+ function LayoutSubHeader({
1819
+ product,
1820
+ status = "live \xB7 mainnet",
1821
+ tags = [],
1822
+ noHeartbeat = false,
1823
+ className
1824
+ }) {
1825
+ return /* @__PURE__ */ jsx("div", { className: cn("border-b", className), children: /* @__PURE__ */ jsxs("div", { className: "container flex flex-wrap items-center justify-between gap-x-6 gap-y-1 py-2 font-mono text-[11px]", children: [
1826
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
1827
+ !noHeartbeat && /* @__PURE__ */ jsx("span", { className: "bg-primary inline-block h-1.5 w-1.5 animate-pulse rounded-full" }),
1828
+ /* @__PURE__ */ jsx("span", { className: "text-muted-foreground tracking-widest uppercase", children: status }),
1829
+ /* @__PURE__ */ jsx("span", { className: "text-foreground", children: product })
1830
+ ] }),
1831
+ tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 tracking-widest uppercase", children: tags.map((tag, i) => /* @__PURE__ */ jsx("span", { className: tag.hideBelow ? HIDE[tag.hideBelow] : void 0, children: tag.label }, i)) })
1832
+ ] }) });
1833
+ }
1834
+
1835
+ export { AppShell, Callout, DataRow, DefinitionList, EcosystemSwitcher, EmptyState, FAMILY_PROPERTIES, HelpHint, LayoutSubHeader, OcAccountMenu, OcAccountMenuView, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, SITE_STATE_LABEL, SectionHeader, StatGrid, StatTile, findFamilyProperty };
2
1836
  //# sourceMappingURL=components.mjs.map
3
1837
  //# sourceMappingURL=components.mjs.map