@hanzo/ui 8.0.23 → 8.0.25

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 (60) hide show
  1. package/README.md +59 -0
  2. package/dist/chunk-3NG33DV2.cjs +607 -0
  3. package/dist/chunk-3NG33DV2.cjs.map +1 -0
  4. package/dist/chunk-5CZOYONP.js +343 -0
  5. package/dist/chunk-5CZOYONP.js.map +1 -0
  6. package/dist/{chunk-P2P6ST6J.js → chunk-7ZNK6JSS.js} +9 -394
  7. package/dist/chunk-7ZNK6JSS.js.map +1 -0
  8. package/dist/chunk-GVCOAJLO.js +397 -0
  9. package/dist/chunk-GVCOAJLO.js.map +1 -0
  10. package/dist/chunk-GWNNLYX4.cjs +353 -0
  11. package/dist/chunk-GWNNLYX4.cjs.map +1 -0
  12. package/dist/{chunk-NBZDIMP3.cjs → chunk-ONVERVFG.cjs} +33 -438
  13. package/dist/chunk-ONVERVFG.cjs.map +1 -0
  14. package/dist/chunk-P2QU5MN5.js +555 -0
  15. package/dist/chunk-P2QU5MN5.js.map +1 -0
  16. package/dist/chunk-WHJR5S4L.cjs +418 -0
  17. package/dist/chunk-WHJR5S4L.cjs.map +1 -0
  18. package/dist/framework/CollectionBuilder.d.ts +12 -0
  19. package/dist/framework/CollectionsBrowser.d.ts +26 -19
  20. package/dist/framework/DocTypeRecords.d.ts +31 -11
  21. package/dist/framework/MediaGrid.d.ts +42 -0
  22. package/dist/framework/RecordCards.d.ts +35 -0
  23. package/dist/framework/builder-logic.d.ts +76 -0
  24. package/dist/framework/client.d.ts +31 -44
  25. package/dist/framework/core.cjs +213 -0
  26. package/dist/framework/core.cjs.map +1 -0
  27. package/dist/framework/core.d.ts +6 -0
  28. package/dist/framework/core.js +4 -0
  29. package/dist/framework/core.js.map +1 -0
  30. package/dist/framework/data.d.ts +2 -2
  31. package/dist/framework/fields.d.ts +47 -4
  32. package/dist/framework/index.cjs +1340 -0
  33. package/dist/framework/index.cjs.map +1 -0
  34. package/dist/framework/index.d.ts +9 -23
  35. package/dist/framework/index.js +1119 -0
  36. package/dist/framework/index.js.map +1 -0
  37. package/dist/framework/media.d.ts +53 -0
  38. package/dist/framework/parts.d.ts +74 -0
  39. package/dist/framework/responsive.d.ts +41 -0
  40. package/dist/framework/types.d.ts +13 -7
  41. package/dist/product/SelectMenu.d.ts +13 -1
  42. package/dist/product/index.cjs +2061 -336
  43. package/dist/product/index.cjs.map +1 -1
  44. package/dist/product/index.js +1909 -3
  45. package/dist/product/index.js.map +1 -1
  46. package/dist/product/social/index.cjs +17 -16
  47. package/dist/product/social/index.js +3 -2
  48. package/package.json +11 -5
  49. package/dist/chunk-2BM42AZR.cjs +0 -2301
  50. package/dist/chunk-2BM42AZR.cjs.map +0 -1
  51. package/dist/chunk-7P7R7FC5.js +0 -2231
  52. package/dist/chunk-7P7R7FC5.js.map +0 -1
  53. package/dist/chunk-NBZDIMP3.cjs.map +0 -1
  54. package/dist/chunk-P2P6ST6J.js.map +0 -1
  55. package/dist/framework/Loader.d.ts +0 -4
  56. package/dist/framework.cjs +0 -757
  57. package/dist/framework.cjs.map +0 -1
  58. package/dist/framework.d.ts +0 -1
  59. package/dist/framework.js +0 -727
  60. package/dist/framework.js.map +0 -1
@@ -1,2231 +0,0 @@
1
- 'use client';
2
- import { ThemeToggle } from './chunk-77AMCLN4.js';
3
- import { classifyBackend, PageHeader, BackendStateCard, DataTable, asColor } from './chunk-P2P6ST6J.js';
4
- import { useEmit, textSize, labelOf } from './chunk-FVQXROBK.js';
5
- import { createContext, useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo, cloneElement, useContext } from 'react';
6
- import { useTheme, XStack, Text, YStack, Card, Theme, useThemeName, Portal, Input, Button, Spinner, Popover, Separator, useControllableState } from '@hanzo/gui';
7
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
8
- import { Check, ChevronRight, ChevronDown, RefreshCw, Grip, CreditCard, Users, Bot, MessageCircle, AppWindow, LayoutGrid, Sparkles, UserRound, Settings2, LogOut, ChevronsUpDown, Plus, Search, Trash2, Cpu, Globe, Server, Info, CircleX, CircleCheck, X } from '@hanzogui/lucide-icons-2';
9
- export { Boxes } from '@hanzogui/lucide-icons-2';
10
- import { surfaceById } from '@hanzo/products';
11
- import { HanzoLogo } from '@hanzo/logo/react';
12
- import { createPortal } from 'react-dom';
13
-
14
- var CHART_PALETTE = [
15
- "#7c5cff",
16
- "#23c562",
17
- "#ff9f45",
18
- "#3aa0ff",
19
- "#ff5d8f",
20
- "#16c0c8",
21
- "#c084fc",
22
- "#f4c245"
23
- ];
24
- var CHART_OTHER = "#64748b";
25
- var ACCENT = CHART_PALETTE[0];
26
- var GRID = "rgba(148,163,184,0.16)";
27
- var AXIS = "rgba(148,163,184,0.85)";
28
- var tone = (theme, key, fallback) => {
29
- const v = theme[key];
30
- const got = v?.get?.();
31
- return typeof got === "string" ? got : fallback;
32
- };
33
- var rampOpacity = (i, n) => n <= 1 ? 0.9 : 0.95 - i / (n - 1) * 0.62;
34
- function useContainerWidth() {
35
- const ref = useRef(null);
36
- const [w, setW] = useState(0);
37
- useEffect(() => {
38
- const el = ref.current;
39
- if (!el) return;
40
- const measure = () => setW(el.clientWidth);
41
- measure();
42
- const ro = new ResizeObserver(measure);
43
- ro.observe(el);
44
- return () => ro.disconnect();
45
- }, []);
46
- return { ref, w };
47
- }
48
- function Sparkline({
49
- values,
50
- width = 120,
51
- height = 36,
52
- color
53
- }) {
54
- const theme = useTheme();
55
- const clean = (values ?? []).filter((v) => Number.isFinite(v));
56
- if (clean.length < 2) return null;
57
- const stroke = color ?? tone(theme, "color11", "currentColor");
58
- const max = Math.max(...clean);
59
- const min = Math.min(...clean);
60
- const span = max - min || 1;
61
- const n = clean.length;
62
- const px = (i) => i / (n - 1) * (width - 2) + 1;
63
- const py = (v) => height - 2 - (v - min) / span * (height - 4);
64
- const line = clean.map((v, i) => `${i === 0 ? "M" : "L"}${px(i).toFixed(1)},${py(v).toFixed(1)}`).join(" ");
65
- const area = `${line} L${(width - 1).toFixed(1)},${height} L1,${height} Z`;
66
- return /* @__PURE__ */ jsxs("svg", { width, height, "aria-hidden": true, style: { display: "block" }, children: [
67
- /* @__PURE__ */ jsx("path", { d: area, fill: stroke, fillOpacity: 0.12 }),
68
- /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" })
69
- ] });
70
- }
71
- function Tooltip({ x, height, label, value }) {
72
- const left = Math.max(0, x - 60);
73
- return /* @__PURE__ */ jsx(
74
- "div",
75
- {
76
- style: {
77
- position: "absolute",
78
- left,
79
- top: 0,
80
- height,
81
- pointerEvents: "none",
82
- display: "flex",
83
- alignItems: "flex-start"
84
- },
85
- children: /* @__PURE__ */ jsxs(
86
- "div",
87
- {
88
- style: {
89
- background: "rgba(15,17,21,0.94)",
90
- border: "1px solid rgba(148,163,184,0.25)",
91
- borderRadius: 8,
92
- padding: "6px 9px",
93
- fontSize: 11,
94
- lineHeight: 1.35,
95
- color: "#e2e8f0",
96
- whiteSpace: "nowrap",
97
- boxShadow: "0 4px 16px rgba(0,0,0,0.4)"
98
- },
99
- children: [
100
- /* @__PURE__ */ jsx("div", { style: { color: AXIS }, children: label }),
101
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700 }, children: value })
102
- ]
103
- }
104
- )
105
- }
106
- );
107
- }
108
- function nearestIndex(clientX, rect, padL, innerW, n) {
109
- if (n <= 1) return 0;
110
- const mx = clientX - rect.left - padL;
111
- const i = Math.round(mx / (innerW || 1) * (n - 1));
112
- return Math.max(0, Math.min(n - 1, i));
113
- }
114
- function axisTicks(data) {
115
- const n = data.length;
116
- if (n === 0) return [];
117
- if (n === 1) return [{ i: 0, label: data[0].label, anchor: "middle" }];
118
- const mid = Math.floor((n - 1) / 2);
119
- const out = [
120
- { i: 0, label: data[0].label, anchor: "start" },
121
- { i: n - 1, label: data[n - 1].label, anchor: "end" }
122
- ];
123
- if (n >= 5) out.splice(1, 0, { i: mid, label: data[mid].label, anchor: "middle" });
124
- return out;
125
- }
126
- function LineChart({
127
- data,
128
- height = 210,
129
- color = ACCENT,
130
- formatValue = (v) => String(v)
131
- }) {
132
- const { ref, w } = useContainerWidth();
133
- const [hover, setHover] = useState(null);
134
- const padL = 10;
135
- const padR = 10;
136
- const padT = 12;
137
- const padB = 24;
138
- const n = data.length;
139
- const innerW = Math.max(1, w - padL - padR);
140
- const innerH = Math.max(1, height - padT - padB);
141
- const max = Math.max(...data.map((d) => d.value), 1);
142
- const x = (i) => padL + (n <= 1 ? innerW / 2 : i / (n - 1) * innerW);
143
- const y = (v) => padT + innerH - v / max * innerH;
144
- const line = data.map((d, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(d.value).toFixed(1)}`).join(" ");
145
- const area = n >= 2 ? `${line} L${x(n - 1).toFixed(1)},${(padT + innerH).toFixed(1)} L${x(0).toFixed(1)},${(padT + innerH).toFixed(1)} Z` : "";
146
- const ticks = axisTicks(data);
147
- return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", width: "100%" }, children: [
148
- w > 0 ? /* @__PURE__ */ jsxs(
149
- "svg",
150
- {
151
- width: w,
152
- height,
153
- style: { display: "block" },
154
- onMouseMove: (e) => setHover(nearestIndex(e.clientX, e.currentTarget.getBoundingClientRect(), padL, innerW, n)),
155
- onMouseLeave: () => setHover(null),
156
- children: [
157
- [0, 0.5, 1].map((g) => /* @__PURE__ */ jsx("line", { x1: padL, x2: w - padR, y1: padT + innerH * g, y2: padT + innerH * g, stroke: GRID, strokeWidth: 1 }, g)),
158
- area ? /* @__PURE__ */ jsx("path", { d: area, fill: color, fillOpacity: 0.1 }) : null,
159
- n >= 2 ? /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }) : null,
160
- hover != null && data[hover] ? /* @__PURE__ */ jsxs(Fragment, { children: [
161
- /* @__PURE__ */ jsx("line", { x1: x(hover), x2: x(hover), y1: padT, y2: padT + innerH, stroke: AXIS, strokeWidth: 1, strokeDasharray: "3 3" }),
162
- /* @__PURE__ */ jsx("circle", { cx: x(hover), cy: y(data[hover].value), r: 4, fill: color, stroke: "#0f1115", strokeWidth: 2 })
163
- ] }) : null,
164
- ticks.map((t) => /* @__PURE__ */ jsx("text", { x: x(t.i), y: height - 7, fontSize: 10, fill: AXIS, textAnchor: t.anchor, children: t.label }, t.i))
165
- ]
166
- }
167
- ) : null,
168
- hover != null && data[hover] ? /* @__PURE__ */ jsx(Tooltip, { x: x(hover), height, label: data[hover].label, value: formatValue(data[hover].value) }) : null
169
- ] });
170
- }
171
- function BarChart({
172
- data,
173
- height = 210,
174
- color = ACCENT,
175
- formatValue = (v) => String(v)
176
- }) {
177
- const { ref, w } = useContainerWidth();
178
- const [hover, setHover] = useState(null);
179
- const padL = 10;
180
- const padR = 10;
181
- const padT = 12;
182
- const padB = 24;
183
- const n = data.length;
184
- const innerW = Math.max(1, w - padL - padR);
185
- const innerH = Math.max(1, height - padT - padB);
186
- const max = Math.max(...data.map((d) => d.value), 1);
187
- const slot = innerW / Math.max(1, n);
188
- const barW = Math.max(1, Math.min(slot * 0.62, 36));
189
- const cx = (i) => padL + slot * i + slot / 2;
190
- const ticks = axisTicks(data);
191
- return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", width: "100%" }, children: [
192
- w > 0 ? /* @__PURE__ */ jsxs(
193
- "svg",
194
- {
195
- width: w,
196
- height,
197
- style: { display: "block" },
198
- onMouseMove: (e) => {
199
- const rect = e.currentTarget.getBoundingClientRect();
200
- const i = Math.floor((e.clientX - rect.left - padL) / (slot || 1));
201
- setHover(Math.max(0, Math.min(n - 1, i)));
202
- },
203
- onMouseLeave: () => setHover(null),
204
- children: [
205
- [0, 0.5, 1].map((g) => /* @__PURE__ */ jsx("line", { x1: padL, x2: w - padR, y1: padT + innerH * g, y2: padT + innerH * g, stroke: GRID, strokeWidth: 1 }, g)),
206
- data.map((d, i) => {
207
- const h = d.value / max * innerH;
208
- return /* @__PURE__ */ jsx(
209
- "rect",
210
- {
211
- x: cx(i) - barW / 2,
212
- y: padT + innerH - h,
213
- width: barW,
214
- height: Math.max(0, h),
215
- rx: Math.min(3, barW / 2),
216
- fill: color,
217
- fillOpacity: hover === i ? 1 : 0.78
218
- },
219
- i
220
- );
221
- }),
222
- ticks.map((t) => /* @__PURE__ */ jsx("text", { x: cx(t.i), y: height - 7, fontSize: 10, fill: AXIS, textAnchor: "middle", children: t.label }, t.i))
223
- ]
224
- }
225
- ) : null,
226
- hover != null && data[hover] ? /* @__PURE__ */ jsx(Tooltip, { x: cx(hover), height, label: data[hover].label, value: formatValue(data[hover].value) }) : null
227
- ] });
228
- }
229
- function Donut({
230
- slices,
231
- size = 160,
232
- thickness = 22,
233
- center,
234
- legend = false
235
- }) {
236
- const theme = useTheme();
237
- const fg = tone(theme, "color12", "currentColor");
238
- const positive = slices.filter((s) => s.value > 0);
239
- const total = positive.reduce((sum, s) => sum + s.value, 0);
240
- const r = size / 2;
241
- const rInner = r - thickness;
242
- const mid = (r + rInner) / 2;
243
- if (total <= 0) {
244
- return /* @__PURE__ */ jsx(XStack, { items: "center", justify: "center", height: size, children: /* @__PURE__ */ jsx(Text, { fontSize: "$6", color: "$color10", children: "\u2014" }) });
245
- }
246
- const ring = /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: size, height: size }, children: [
247
- /* @__PURE__ */ jsx("svg", { width: size, height: size, style: { display: "block" }, children: positive.length === 1 ? /* @__PURE__ */ jsx(
248
- "circle",
249
- {
250
- cx: r,
251
- cy: r,
252
- r: mid,
253
- fill: "none",
254
- stroke: positive[0].color ?? fg,
255
- strokeOpacity: positive[0].color ? 1 : 0.9,
256
- strokeWidth: thickness
257
- }
258
- ) : renderArcs(positive, total, r, rInner, fg) }),
259
- center ? /* @__PURE__ */ jsx(
260
- "div",
261
- {
262
- style: {
263
- position: "absolute",
264
- inset: 0,
265
- display: "flex",
266
- flexDirection: "column",
267
- alignItems: "center",
268
- justifyContent: "center",
269
- textAlign: "center",
270
- pointerEvents: "none"
271
- },
272
- children: center
273
- }
274
- ) : null
275
- ] });
276
- if (!legend) return ring;
277
- return /* @__PURE__ */ jsxs(XStack, { gap: "$4", items: "center", flexWrap: "wrap", children: [
278
- ring,
279
- /* @__PURE__ */ jsx(YStack, { gap: "$1.5", flex: 1, minW: 150, children: positive.map((s, i) => /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", children: [
280
- /* @__PURE__ */ jsx(
281
- "div",
282
- {
283
- style: {
284
- width: 10,
285
- height: 10,
286
- borderRadius: 2,
287
- backgroundColor: s.color ?? AXIS,
288
- opacity: s.color ? 1 : rampOpacity(i, positive.length)
289
- }
290
- }
291
- ),
292
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", flex: 1, numberOfLines: 1, children: s.label }),
293
- /* @__PURE__ */ jsxs(Text, { fontSize: "$2", color: "$color12", fontWeight: "600", children: [
294
- Math.round(s.value / total * 100),
295
- "%"
296
- ] })
297
- ] }, s.label)) })
298
- ] });
299
- }
300
- function renderArcs(slices, total, rOuter, rInner, fg) {
301
- let a0 = -Math.PI / 2;
302
- const paths = [];
303
- slices.forEach((s, idx) => {
304
- const frac = Math.max(0, s.value) / total;
305
- if (frac <= 0) return;
306
- const a1 = a0 + frac * Math.PI * 2;
307
- paths.push(
308
- /* @__PURE__ */ jsx(
309
- "path",
310
- {
311
- d: annularArc(rOuter, rOuter, rOuter, rInner, a0, Math.min(a1, a0 + Math.PI * 1.9999)),
312
- fill: s.color ?? fg,
313
- fillOpacity: s.color ? 1 : rampOpacity(idx, slices.length)
314
- },
315
- s.label || idx
316
- )
317
- );
318
- a0 = a1;
319
- });
320
- return /* @__PURE__ */ jsx(Fragment, { children: paths });
321
- }
322
- function polar(cx, cy, rad, a) {
323
- return [cx + rad * Math.cos(a), cy + rad * Math.sin(a)];
324
- }
325
- function annularArc(cx, cy, rOuter, rInner, a0, a1) {
326
- const large = a1 - a0 > Math.PI ? 1 : 0;
327
- const [x0, y0] = polar(cx, cy, rOuter, a0);
328
- const [x1, y1] = polar(cx, cy, rOuter, a1);
329
- const [x2, y2] = polar(cx, cy, rInner, a1);
330
- const [x3, y3] = polar(cx, cy, rInner, a0);
331
- return `M${x0},${y0} A${rOuter},${rOuter} 0 ${large} 1 ${x1},${y1} L${x2},${y2} A${rInner},${rInner} 0 ${large} 0 ${x3},${y3} Z`;
332
- }
333
- function BarRows({ bars }) {
334
- const max = Math.max(0, ...bars.map((b) => b.value));
335
- if (max <= 0) {
336
- return /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color10", children: "\u2014" });
337
- }
338
- return /* @__PURE__ */ jsx(YStack, { gap: "$2.5", children: bars.map((b) => /* @__PURE__ */ jsxs(XStack, { gap: "$3", items: "center", children: [
339
- /* @__PURE__ */ jsx(Text, { width: 64, fontSize: "$2", color: "$color11", text: "right", children: b.label }),
340
- /* @__PURE__ */ jsx(YStack, { flex: 1, height: 10, bg: "$color3", rounded: "$2", overflow: "hidden", children: /* @__PURE__ */ jsx(YStack, { height: 10, width: `${Math.max(2, b.value / max * 100)}%`, bg: "$color9", rounded: "$2" }) }),
341
- /* @__PURE__ */ jsx(Text, { width: 56, fontSize: "$2", color: "$color12", fontWeight: "600", children: b.value.toLocaleString() })
342
- ] }, b.label)) });
343
- }
344
- var SERIES = ["#6ea8fe", "#7ee787", "#f0a868", "#c792ea", "#56d4c4", "#e879a6", "#d6c15a", "#8b9bb4"];
345
- var colorForIndex = (i) => SERIES[i % SERIES.length];
346
- var TRACK = "rgba(128,128,128,0.18)";
347
- function utilColor(pct) {
348
- if (pct >= 90) return "#e5534b";
349
- if (pct >= 70) return "#f0a868";
350
- return "#7ee787";
351
- }
352
- function Sparkline2({
353
- points,
354
- width = 104,
355
- height = 30,
356
- color = SERIES[0]
357
- }) {
358
- if (!points || points.length < 2) return null;
359
- const min = Math.min(...points);
360
- const max = Math.max(...points);
361
- const span = max - min || 1;
362
- const stepX = width / (points.length - 1);
363
- const y = (v) => height - 2 - (v - min) / span * (height - 4);
364
- const d = points.map((p, i) => `${i === 0 ? "M" : "L"}${(i * stepX).toFixed(1)},${y(p).toFixed(1)}`).join(" ");
365
- return /* @__PURE__ */ jsx("svg", { width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": "trend", children: /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }) });
366
- }
367
- function MiniBars({
368
- bars,
369
- width = 320,
370
- height = 96,
371
- color = SERIES[0]
372
- }) {
373
- if (!bars.length) return null;
374
- const max = Math.max(...bars.map((b) => b.value), 1);
375
- const gap = 4;
376
- const bw = (width - gap * (bars.length - 1)) / bars.length;
377
- return /* @__PURE__ */ jsx("svg", { width: "100%", height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", role: "img", "aria-label": "bars", children: bars.map((b, i) => {
378
- const h = Math.max(1, b.value / max * (height - 2));
379
- return /* @__PURE__ */ jsx("rect", { x: i * (bw + gap), y: height - h, width: bw, height: h, rx: 2, fill: color, opacity: 0.85, children: /* @__PURE__ */ jsx("title", { children: `${b.label}: ${b.value}` }) }, b.label + i);
380
- }) });
381
- }
382
- function UtilBar({ value, width = 120, color }) {
383
- const v = Math.max(0, Math.min(100, value));
384
- return /* @__PURE__ */ jsxs("svg", { width, height: 8, viewBox: `0 0 ${width} 8`, role: "img", "aria-label": `${Math.round(v)}%`, children: [
385
- /* @__PURE__ */ jsx("rect", { x: 0, y: 1, width, height: 6, rx: 3, fill: TRACK }),
386
- /* @__PURE__ */ jsx("rect", { x: 0, y: 1, width: v / 100 * width, height: 6, rx: 3, fill: color ?? utilColor(v) })
387
- ] });
388
- }
389
- function LegendDot({ color, label, value }) {
390
- return /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [
391
- /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
392
- /* @__PURE__ */ jsx(YStack, { width: 10, height: 10, rounded: "$1", bg: color }),
393
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: label })
394
- ] }),
395
- value != null ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "500", className: "hz-mono", children: value }) : null
396
- ] });
397
- }
398
- function MetricCard({
399
- icon,
400
- label,
401
- value,
402
- caption,
403
- spark,
404
- sparkColor,
405
- delta
406
- }) {
407
- const up = delta ? delta.pct >= 0 : false;
408
- return /* @__PURE__ */ jsxs(Card, { p: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$borderColor", flex: 1, minW: 172, children: [
409
- /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [
410
- /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
411
- icon,
412
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", fontWeight: "500", children: label })
413
- ] }),
414
- delta ? /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: up ? "#7ee787" : "#e5534b", children: [
415
- up ? "\u25B2" : "\u25BC",
416
- " ",
417
- Math.abs(delta.pct),
418
- "%"
419
- ] }) : null
420
- ] }),
421
- /* @__PURE__ */ jsxs(XStack, { items: "flex-end", justify: "space-between", gap: "$2", children: [
422
- /* @__PURE__ */ jsx(Text, { fontSize: "$8", fontWeight: "500", color: "$color12", numberOfLines: 1, className: "hz-mono", children: value }),
423
- spark && spark.length >= 2 ? /* @__PURE__ */ jsx(Sparkline2, { points: spark, color: sparkColor ?? SERIES[0] }) : null
424
- ] }),
425
- caption ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: caption }) : null
426
- ] });
427
- }
428
- function HintButton({
429
- icon,
430
- iconAfter,
431
- children,
432
- onPress,
433
- disabled,
434
- hint,
435
- theme
436
- }) {
437
- const btn = /* @__PURE__ */ jsx(
438
- Button,
439
- {
440
- size: "$2",
441
- theme,
442
- icon,
443
- iconAfter,
444
- disabled,
445
- onPress: disabled ? void 0 : onPress,
446
- children
447
- }
448
- );
449
- if (!hint) return btn;
450
- return /* @__PURE__ */ jsx("span", { title: hint, style: { display: "inline-flex" }, children: btn });
451
- }
452
- function Panel({
453
- title,
454
- right,
455
- children,
456
- minW = 280,
457
- grow = true
458
- }) {
459
- return /* @__PURE__ */ jsxs(Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", flex: grow ? 1 : void 0, minW, width: grow ? void 0 : "100%", children: [
460
- /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
461
- /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "500", color: "$color12", children: title }),
462
- right
463
- ] }),
464
- children
465
- ] });
466
- }
467
- function Donut2({
468
- segments,
469
- size = 160,
470
- thickness = 18,
471
- centerValue,
472
- centerLabel,
473
- trackColor = "#2a2d2e",
474
- valueColor = "#ecedee",
475
- labelColor = "#9ba1a6"
476
- }) {
477
- const total = segments.reduce((n, s) => n + Math.max(0, s.value), 0);
478
- if (total <= 0) return null;
479
- const r = (size - thickness) / 2;
480
- const cx = size / 2;
481
- const cy = size / 2;
482
- const circ = 2 * Math.PI * r;
483
- let offset = 0;
484
- const arcs = segments.filter((s) => s.value > 0).map((s) => {
485
- const frac = s.value / total;
486
- const dash = frac * circ;
487
- const node = /* @__PURE__ */ jsx(
488
- "circle",
489
- {
490
- cx,
491
- cy,
492
- r,
493
- fill: "none",
494
- stroke: s.color,
495
- strokeWidth: thickness,
496
- strokeDasharray: `${dash} ${circ - dash}`,
497
- strokeDashoffset: -offset
498
- },
499
- s.label
500
- );
501
- offset += dash;
502
- return node;
503
- });
504
- return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": "Donut chart", children: [
505
- /* @__PURE__ */ jsx("circle", { cx, cy, r, fill: "none", stroke: trackColor, strokeWidth: thickness }),
506
- /* @__PURE__ */ jsx("g", { transform: `rotate(-90 ${cx} ${cy})`, children: arcs }),
507
- centerValue ? /* @__PURE__ */ jsx("text", { x: cx, y: cy - 2, textAnchor: "middle", fontSize: size * 0.2, fontWeight: "800", fill: valueColor, children: centerValue }) : null,
508
- centerLabel ? /* @__PURE__ */ jsx("text", { x: cx, y: cy + size * 0.13, textAnchor: "middle", fontSize: size * 0.08, fill: labelColor, children: centerLabel }) : null
509
- ] });
510
- }
511
-
512
- // src/product/combobox/filter.ts
513
- var hay = (o) => `${o.value} ${o.label ?? ""} ${o.hint ?? ""}`.toLowerCase();
514
- function filterOptions(options, query) {
515
- const q = query.trim().toLowerCase();
516
- if (!q) return options;
517
- return options.filter((o) => hay(o).includes(q));
518
- }
519
- function isKnownOption(options, value) {
520
- return options.some((o) => o.value === value);
521
- }
522
- var ITEM_MIN_HEIGHT = 30;
523
- var ITEM_RADIUS = 7;
524
- var ITEM_PX = 8;
525
- var ITEM_GAP = 8;
526
- var ICON_SLOT = 16;
527
- var PANEL_RADIUS = 12;
528
- var PANEL_PAD = 4;
529
- var PANEL_GAP = 2;
530
- var SEP_MARGIN = 4;
531
- var FONT_LABEL = 13;
532
- var FONT_MUTED = 11;
533
- var FONT_SHORTCUT = 12;
534
- var ACCENT2 = "var(--hanzo-accent, #8b5cf6)";
535
- var ACCENT_SOFT = "var(--hanzo-accent-soft, rgba(139,92,246,0.16))";
536
- var DANGER = "var(--hanzo-danger, #ef4444)";
537
- function MenuPanel({
538
- children,
539
- minWidth = 200,
540
- maxHeight = 360,
541
- onKeyDown,
542
- panelRef,
543
- ...rest
544
- }) {
545
- return /* @__PURE__ */ jsx(
546
- YStack,
547
- {
548
- ref: panelRef,
549
- role: "menu",
550
- bg: "$color2",
551
- borderColor: "$borderColor",
552
- borderWidth: 1,
553
- rounded: PANEL_RADIUS,
554
- p: PANEL_PAD,
555
- gap: PANEL_GAP,
556
- minW: minWidth,
557
- maxH: maxHeight,
558
- overflow: "scroll",
559
- shadowColor: "rgba(0,0,0,0.45)",
560
- shadowRadius: 20,
561
- shadowOffset: { width: 0, height: 10 },
562
- onKeyDown,
563
- ...rest,
564
- children
565
- }
566
- );
567
- }
568
- function MenuItemView({
569
- icon,
570
- label,
571
- description,
572
- shortcut,
573
- selected = false,
574
- disabled = false,
575
- destructive = false,
576
- hasSubmenu = false,
577
- onSelect
578
- }) {
579
- const track = useEmit();
580
- const choose = () => {
581
- track({ component: "MenuItem", action: "select", id: labelOf(label), value: selected });
582
- onSelect();
583
- };
584
- const press = () => {
585
- if (!disabled) choose();
586
- };
587
- const onKeyDown = (e) => {
588
- if (disabled) return;
589
- if (e.key === "Enter" || e.key === " ") {
590
- e.preventDefault();
591
- choose();
592
- }
593
- };
594
- const labelColor = destructive ? DANGER : "$color12";
595
- return /* @__PURE__ */ jsxs(
596
- XStack,
597
- {
598
- role: "menuitem",
599
- tabIndex: disabled ? -1 : 0,
600
- "aria-disabled": disabled || void 0,
601
- items: "center",
602
- gap: ITEM_GAP,
603
- px: ITEM_PX,
604
- minH: ITEM_MIN_HEIGHT,
605
- rounded: ITEM_RADIUS,
606
- cursor: disabled ? "default" : "pointer",
607
- opacity: disabled ? 0.4 : 1,
608
- select: "none",
609
- style: { outline: "none" },
610
- hoverStyle: disabled ? {} : { bg: ACCENT_SOFT },
611
- pressStyle: disabled ? {} : { bg: ACCENT_SOFT },
612
- focusStyle: disabled ? {} : { bg: ACCENT_SOFT },
613
- onPress: press,
614
- onKeyDown,
615
- children: [
616
- /* @__PURE__ */ jsx(XStack, { width: ICON_SLOT, height: ICON_SLOT, items: "center", justify: "center", shrink: 0, children: icon ? /* @__PURE__ */ jsx(XStack, { items: "center", justify: "center", opacity: destructive ? 1 : 0.9, style: destructive ? { color: DANGER } : void 0, children: icon }) : null }),
617
- /* @__PURE__ */ jsxs(YStack, { flex: 1, minW: 0, children: [
618
- /* @__PURE__ */ jsx(Text, { fontSize: FONT_LABEL, lineHeight: 18, color: labelColor, numberOfLines: 1, children: label }),
619
- description ? /* @__PURE__ */ jsx(Text, { fontSize: FONT_MUTED, lineHeight: 14, color: "$color11", numberOfLines: 1, children: description }) : null
620
- ] }),
621
- shortcut ? /* @__PURE__ */ jsx(Text, { fontSize: FONT_SHORTCUT, color: "$color11", shrink: 0, children: shortcut }) : null,
622
- selected ? /* @__PURE__ */ jsx(Check, { size: 14, color: ACCENT2 }) : null,
623
- hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: "var(--hanzo-muted, currentColor)", opacity: 0.6 }) : null
624
- ]
625
- }
626
- );
627
- }
628
- function MenuSeparatorView() {
629
- return /* @__PURE__ */ jsx(YStack, { height: 1, bg: "$borderColor", my: SEP_MARGIN, mx: SEP_MARGIN, role: "separator" });
630
- }
631
- function MenuLabelView({ children }) {
632
- return /* @__PURE__ */ jsx(
633
- Text,
634
- {
635
- fontSize: FONT_MUTED,
636
- color: "$color11",
637
- px: ITEM_PX,
638
- py: SEP_MARGIN,
639
- textTransform: "uppercase",
640
- letterSpacing: 0.4,
641
- select: "none",
642
- children
643
- }
644
- );
645
- }
646
- function renderMenuItems(items, close) {
647
- return items.map((it, i) => {
648
- if (it.type === "separator") return /* @__PURE__ */ jsx(MenuSeparatorView, {}, it.key ?? `sep-${i}`);
649
- if (it.type === "label") return /* @__PURE__ */ jsx(MenuLabelView, { children: it.label }, it.key ?? `lbl-${i}`);
650
- const { key, onSelect, closeOnSelect = true, ...rest } = it;
651
- return /* @__PURE__ */ jsx(
652
- MenuItemView,
653
- {
654
- ...rest,
655
- onSelect: () => {
656
- onSelect();
657
- if (closeOnSelect) close?.();
658
- }
659
- },
660
- key
661
- );
662
- });
663
- }
664
- function PortalTheme({ name, children }) {
665
- return /* @__PURE__ */ jsx(Theme, { name, children });
666
- }
667
-
668
- // src/product/menu/roving.ts
669
- function menuKeyDown(e, onClose) {
670
- if (e.key === "Escape") {
671
- onClose?.();
672
- return;
673
- }
674
- if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
675
- if (typeof document === "undefined") return;
676
- const panel = e.currentTarget;
677
- const items = Array.from(
678
- panel.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
679
- );
680
- if (items.length === 0) return;
681
- e.preventDefault();
682
- const active = document.activeElement;
683
- const current = active ? items.indexOf(active) : -1;
684
- let next;
685
- if (e.key === "Home") next = 0;
686
- else if (e.key === "End") next = items.length - 1;
687
- else if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % items.length;
688
- else next = current <= 0 ? items.length - 1 : current - 1;
689
- items[next]?.focus();
690
- }
691
- var EDGE = 8;
692
- function FloatingMenu({
693
- open,
694
- onClose,
695
- anchorRect,
696
- anchorEl,
697
- gap = 4,
698
- minWidth = 200,
699
- maxHeight,
700
- autoFocus = true,
701
- children
702
- }) {
703
- const themeName = useThemeName();
704
- const panelRef = useRef(null);
705
- const [pos, setPos] = useState(null);
706
- const setPanel = useCallback((n) => {
707
- panelRef.current = n;
708
- }, []);
709
- const place = useCallback(() => {
710
- if (typeof window === "undefined") return;
711
- const a = anchorRect();
712
- if (!a) return;
713
- const node = panelRef.current;
714
- const w = node?.offsetWidth || minWidth;
715
- const h = node?.offsetHeight || 0;
716
- let left = a.left;
717
- let top = a.bottom + gap;
718
- if (left + w > window.innerWidth - EDGE) left = Math.max(EDGE, window.innerWidth - w - EDGE);
719
- if (h && top + h > window.innerHeight - EDGE) {
720
- const above = a.top - gap - h;
721
- top = above >= EDGE ? above : Math.max(EDGE, window.innerHeight - h - EDGE);
722
- }
723
- setPos({ left, top });
724
- }, [anchorRect, gap, minWidth]);
725
- useLayoutEffect(() => {
726
- if (!open) {
727
- setPos(null);
728
- return;
729
- }
730
- place();
731
- if (autoFocus) panelRef.current?.focus?.();
732
- }, [open, place, autoFocus]);
733
- useEffect(() => {
734
- if (!open || typeof document === "undefined") return;
735
- const onPointerDown = (e) => {
736
- const t = e.target;
737
- if (panelRef.current?.contains(t)) return;
738
- const anchor = anchorEl?.();
739
- if (anchor && anchor.contains(t)) return;
740
- onClose();
741
- };
742
- const onKey = (e) => {
743
- if (e.key === "Escape") onClose();
744
- };
745
- document.addEventListener("pointerdown", onPointerDown, true);
746
- document.addEventListener("keydown", onKey, true);
747
- window.addEventListener("scroll", onClose, true);
748
- window.addEventListener("resize", onClose);
749
- window.addEventListener("blur", onClose);
750
- return () => {
751
- document.removeEventListener("pointerdown", onPointerDown, true);
752
- document.removeEventListener("keydown", onKey, true);
753
- window.removeEventListener("scroll", onClose, true);
754
- window.removeEventListener("resize", onClose);
755
- window.removeEventListener("blur", onClose);
756
- };
757
- }, [open, onClose, anchorEl]);
758
- if (!open) return null;
759
- return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(PortalTheme, { name: themeName, children: /* @__PURE__ */ jsx(
760
- MenuPanel,
761
- {
762
- panelRef: setPanel,
763
- minWidth,
764
- maxHeight,
765
- tabIndex: -1,
766
- onKeyDown: (e) => menuKeyDown(e, onClose),
767
- style: {
768
- position: "fixed",
769
- left: pos?.left ?? 0,
770
- top: pos?.top ?? 0,
771
- zIndex: 1e5,
772
- visibility: pos ? "visible" : "hidden"
773
- },
774
- children
775
- }
776
- ) }) });
777
- }
778
- function ComboBox({
779
- value,
780
- onChange,
781
- options,
782
- loading = false,
783
- error = null,
784
- onRetry,
785
- placeholder,
786
- disabled,
787
- emptyText = "No matches \u2014 press to use what you typed.",
788
- minWidth = 240
789
- }) {
790
- const [open, setOpen] = useState(false);
791
- const rowRef = useRef(null);
792
- const anchorRect = useCallback(() => rowRef.current?.getBoundingClientRect() ?? null, []);
793
- const anchorEl = useCallback(() => rowRef.current, []);
794
- const filtered = useMemo(() => filterOptions(options, value), [options, value]);
795
- const track = useEmit();
796
- const pick = (v) => {
797
- track({ component: "ComboBox", action: "select", id: v, value: filtered.length });
798
- onChange(v);
799
- setOpen(false);
800
- };
801
- return /* @__PURE__ */ jsxs(Fragment, { children: [
802
- /* @__PURE__ */ jsxs(XStack, { ref: rowRef, items: "center", gap: "$2", minW: minWidth, children: [
803
- /* @__PURE__ */ jsx(
804
- Input,
805
- {
806
- flex: 1,
807
- value,
808
- onChangeText: (v) => {
809
- onChange(v);
810
- if (!open) setOpen(true);
811
- },
812
- onFocus: () => setOpen(true),
813
- disabled,
814
- placeholder,
815
- autoCapitalize: "none"
816
- }
817
- ),
818
- /* @__PURE__ */ jsx(
819
- Button,
820
- {
821
- size: "$2",
822
- chromeless: true,
823
- disabled,
824
- icon: /* @__PURE__ */ jsx(ChevronDown, { size: 16, opacity: 0.7 }),
825
- onPress: () => {
826
- track({ component: "ComboBox", action: open ? "close" : "open" });
827
- setOpen((o) => !o);
828
- },
829
- "aria-label": "Show options"
830
- }
831
- )
832
- ] }),
833
- /* @__PURE__ */ jsx(
834
- FloatingMenu,
835
- {
836
- open,
837
- onClose: () => setOpen(false),
838
- anchorRect,
839
- anchorEl,
840
- autoFocus: false,
841
- minWidth,
842
- maxHeight: 300,
843
- children: loading ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [
844
- /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$color11" }),
845
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "Loading options\u2026" })
846
- ] }) : error ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [
847
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", flex: 1, numberOfLines: 2, children: error }),
848
- onRetry ? /* @__PURE__ */ jsx(Button, { size: "$1", chromeless: true, icon: /* @__PURE__ */ jsx(RefreshCw, { size: 12 }), onPress: onRetry, "aria-label": "Retry" }) : null
849
- ] }) : filtered.length === 0 ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", px: "$2", py: "$2", children: emptyText }) : filtered.map((o) => /* @__PURE__ */ jsx(
850
- MenuItemView,
851
- {
852
- label: o.label ?? o.value,
853
- description: o.hint,
854
- selected: o.value === value,
855
- onSelect: () => pick(o.value)
856
- },
857
- o.value
858
- ))
859
- }
860
- )
861
- ] });
862
- }
863
- var ORDER = ["ai", "console", "app", "chat", "bot", "team", "billing"];
864
- var SURFACES = ORDER.map((id) => {
865
- const s = surfaceById(id);
866
- return { id, label: s.label, href: s.href, hint: s.domain };
867
- });
868
- function otherSurfaces(current) {
869
- return current ? SURFACES.filter((s) => s.id !== current) : SURFACES;
870
- }
871
- function HanzoMark({ size = 22, color = "currentColor" }) {
872
- return /* @__PURE__ */ jsxs(
873
- "svg",
874
- {
875
- width: size,
876
- height: size,
877
- viewBox: "0 0 67 67",
878
- role: "img",
879
- "aria-label": "Hanzo",
880
- fill: color,
881
- style: { display: "block", flexShrink: 0 },
882
- children: [
883
- /* @__PURE__ */ jsx("path", { d: "M22.21 67V44.6369H0V67H22.21Z" }),
884
- /* @__PURE__ */ jsx("path", { opacity: 0.55, d: "M0 44.6369L22.21 46.8285V44.6369H0Z" }),
885
- /* @__PURE__ */ jsx("path", { d: "M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" }),
886
- /* @__PURE__ */ jsx("path", { d: "M22.21 0H0V22.3184H22.21V0Z" }),
887
- /* @__PURE__ */ jsx("path", { d: "M66.7198 0H44.5098V22.3184H66.7198V0Z" }),
888
- /* @__PURE__ */ jsx("path", { opacity: 0.55, d: "M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" }),
889
- /* @__PURE__ */ jsx("path", { d: "M66.7198 67V44.6369H44.5098V67H66.7198Z" })
890
- ]
891
- }
892
- );
893
- }
894
- function BrandMark({
895
- size = 20,
896
- wordmark = "Hanzo",
897
- animated = true
898
- }) {
899
- if (!animated) return /* @__PURE__ */ jsx(HanzoMark, { size });
900
- return /* @__PURE__ */ jsx(HanzoLogo, { animated: true, size, wordmark });
901
- }
902
- var SURFACE_ICON = {
903
- ai: Sparkles,
904
- console: LayoutGrid,
905
- app: AppWindow,
906
- chat: MessageCircle,
907
- bot: Bot,
908
- team: Users,
909
- billing: CreditCard
910
- };
911
- var openHref = (href) => {
912
- if (typeof window !== "undefined") window.open(href, "_blank", "noopener");
913
- };
914
- function MenuRow({ icon, label, onPress }) {
915
- return /* @__PURE__ */ jsxs(XStack, { onPress, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: "$color5" }, children: [
916
- icon,
917
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: label })
918
- ] });
919
- }
920
- function AppHeader({
921
- brand,
922
- wordmark = "Hanzo",
923
- onBrand,
924
- org,
925
- children,
926
- current,
927
- surfaces,
928
- open,
929
- user,
930
- menu,
931
- theme,
932
- onProfile,
933
- onTeam,
934
- onBilling,
935
- onSignOut
936
- }) {
937
- const [appsOpen, setAppsOpen] = useState(false);
938
- const [menuOpen, setMenuOpen] = useState(false);
939
- const items = surfaces ?? otherSurfaces(current);
940
- const launch = (s) => {
941
- setAppsOpen(false);
942
- if (open) open(s);
943
- else openHref(s.href);
944
- };
945
- return /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$3", height: 52, borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [
946
- /* @__PURE__ */ jsx(XStack, { items: "center", cursor: onBrand ? "pointer" : void 0, onPress: onBrand, children: brand ?? /* @__PURE__ */ jsx(BrandMark, { wordmark }) }),
947
- org ? /* @__PURE__ */ jsx(XStack, { items: "center", minW: 0, children: org }) : null,
948
- /* @__PURE__ */ jsx(XStack, { flex: 1, items: "center", minW: 0, children }),
949
- items.length > 0 ? /* @__PURE__ */ jsxs(Popover, { open: appsOpen, onOpenChange: setAppsOpen, placement: "bottom-end", children: [
950
- /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Grip, { size: 16 }), "aria-label": "Apps" }) }),
951
- /* @__PURE__ */ jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 230, bg: "$color2", borderColor: "$borderColor", children: /* @__PURE__ */ jsx(YStack, { gap: "$1", children: items.map((s) => {
952
- const Icon = SURFACE_ICON[s.id];
953
- return /* @__PURE__ */ jsxs(XStack, { onPress: () => launch(s), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: "$color5" }, children: [
954
- /* @__PURE__ */ jsx(Icon, { size: 16 }),
955
- /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$2", fontWeight: "600", color: "$color12", children: s.label }),
956
- s.hint ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: s.hint }) : null
957
- ] }, s.id);
958
- }) }) })
959
- ] }) : null,
960
- /* @__PURE__ */ jsxs(Popover, { open: menuOpen, onOpenChange: setMenuOpen, placement: "bottom-end", children: [
961
- /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(UserRound, { size: 16 }), "aria-label": "Account", children: user ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, maxW: 140, children: user }) : null }) }),
962
- /* @__PURE__ */ jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 220, bg: "$color2", borderColor: "$borderColor", children: menu ?? /* @__PURE__ */ jsxs(YStack, { gap: "$1", children: [
963
- onProfile ? /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(UserRound, { size: 15 }), label: "Profile", onPress: () => (setMenuOpen(false), onProfile()) }) : null,
964
- theme !== null ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2.5", px: "$2", py: "$1", rounded: "$3", children: [
965
- /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", children: "Theme" }),
966
- theme ?? /* @__PURE__ */ jsx(ThemeToggle, {})
967
- ] }) : null,
968
- onTeam ? /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(Settings2, { size: 15 }), label: "Team settings", onPress: () => (setMenuOpen(false), onTeam()) }) : null,
969
- onBilling ? /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(CreditCard, { size: 15 }), label: "Billing", onPress: () => (setMenuOpen(false), onBilling()) }) : null,
970
- onSignOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
971
- /* @__PURE__ */ jsx(Separator, { borderColor: "$borderColor", my: "$1" }),
972
- /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(LogOut, { size: 15 }), label: "Sign out", onPress: () => (setMenuOpen(false), onSignOut()) })
973
- ] }) : null
974
- ] }) })
975
- ] })
976
- ] });
977
- }
978
- function monogram(name) {
979
- const words = name.trim().split(/[\s._/-]+/).filter(Boolean);
980
- const letters = words.slice(0, 2).map((w) => w[0] ?? "").join("");
981
- return (letters || name.trim().slice(0, 2)).toUpperCase();
982
- }
983
- function OrgMark({ org, size = 22, maxW }) {
984
- if (org.logo) {
985
- return /* @__PURE__ */ jsx(
986
- "img",
987
- {
988
- src: org.logo,
989
- alt: "",
990
- style: {
991
- height: size,
992
- width: maxW ? "auto" : size,
993
- maxWidth: maxW ?? size,
994
- objectFit: "contain",
995
- display: "block",
996
- borderRadius: 6,
997
- flexShrink: 0
998
- }
999
- }
1000
- );
1001
- }
1002
- return /* @__PURE__ */ jsx(
1003
- YStack,
1004
- {
1005
- width: size,
1006
- height: size,
1007
- rounded: "$3",
1008
- bg: "$color4",
1009
- items: "center",
1010
- justify: "center",
1011
- style: { flexShrink: 0 },
1012
- children: /* @__PURE__ */ jsx(Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color12", children: monogram(org.displayName || org.name) })
1013
- }
1014
- );
1015
- }
1016
-
1017
- // src/product/scope.ts
1018
- function browserStorage() {
1019
- if (typeof window === "undefined") return null;
1020
- try {
1021
- return window.localStorage;
1022
- } catch {
1023
- return null;
1024
- }
1025
- }
1026
- function orgScope(config) {
1027
- const key = config.key ?? "hanzo.org";
1028
- const selectedKey = `${key}.selected`;
1029
- const store = () => config.storage ?? browserStorage();
1030
- const read = (k) => {
1031
- try {
1032
- return store()?.getItem(k) ?? null;
1033
- } catch {
1034
- return null;
1035
- }
1036
- };
1037
- const write = (k, v) => {
1038
- try {
1039
- if (v === null) store()?.removeItem(k);
1040
- else store()?.setItem(k, v);
1041
- } catch {
1042
- }
1043
- };
1044
- const goHome = () => {
1045
- if (config.navigate) return config.navigate("/");
1046
- if (typeof window !== "undefined") window.location.assign("/");
1047
- };
1048
- const doReload = () => {
1049
- if (config.reload) return config.reload();
1050
- if (typeof window !== "undefined") window.location.reload();
1051
- };
1052
- const scope = {
1053
- currentOrg: () => read(key) || config.brandOrg,
1054
- setCurrentOrg: (org) => write(key, !org || org === config.brandOrg ? null : org),
1055
- isScopedAway: () => scope.currentOrg() !== config.brandOrg,
1056
- hasSelectedOrg: () => read(selectedKey) === "1",
1057
- enterOrg: (org) => {
1058
- if (!org) return;
1059
- scope.setCurrentOrg(org);
1060
- write(selectedKey, "1");
1061
- goHome();
1062
- },
1063
- leaveOrg: () => {
1064
- write(selectedKey, null);
1065
- scope.setCurrentOrg(config.brandOrg);
1066
- goHome();
1067
- },
1068
- switchOrg: (org) => {
1069
- if (!org || org === scope.currentOrg()) return;
1070
- scope.setCurrentOrg(org);
1071
- write(selectedKey, "1");
1072
- doReload();
1073
- }
1074
- };
1075
- return scope;
1076
- }
1077
- function filterOrgs(orgs, query) {
1078
- const q = query.trim().toLowerCase();
1079
- if (!q) return orgs;
1080
- return orgs.filter(
1081
- (o) => o.name.toLowerCase().includes(q) || (o.displayName ?? "").toLowerCase().includes(q)
1082
- );
1083
- }
1084
- var titleCase = (s) => s ? s[0].toUpperCase() + s.slice(1) : s;
1085
- function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picker = false }) {
1086
- const currentId = scope.currentOrg();
1087
- const [open, setOpen] = useState(false);
1088
- const [query, setQuery] = useState("");
1089
- const [debounced, setDebounced] = useState("");
1090
- const [rows, setRows] = useState([]);
1091
- const [loading, setLoading] = useState(false);
1092
- const [loadingMore, setLoadingMore] = useState(false);
1093
- const [hasMore, setHasMore] = useState(false);
1094
- const [creating, setCreating] = useState(false);
1095
- const [newName, setNewName] = useState("");
1096
- const [busy, setBusy] = useState(false);
1097
- const [err, setErr] = useState(null);
1098
- const pageRef = useRef(0);
1099
- const reqRef = useRef(0);
1100
- useEffect(() => {
1101
- const id = setTimeout(() => setDebounced(query.trim()), 250);
1102
- return () => clearTimeout(id);
1103
- }, [query]);
1104
- const fetchPage = useCallback(
1105
- async (page, q, append) => {
1106
- if (!orgs) return;
1107
- const token = ++reqRef.current;
1108
- append ? setLoadingMore(true) : setLoading(true);
1109
- try {
1110
- const incoming = await orgs(page, q);
1111
- if (token !== reqRef.current) return;
1112
- pageRef.current = page;
1113
- setRows((prev) => {
1114
- const merged = append ? [...prev] : [];
1115
- const seen = new Set(merged.map((o) => o.name));
1116
- for (const o of incoming) if (!seen.has(o.name)) merged.push(o);
1117
- return merged;
1118
- });
1119
- setHasMore(incoming.length >= pageSize);
1120
- } catch {
1121
- if (token !== reqRef.current) return;
1122
- if (!append) setRows([]);
1123
- setHasMore(false);
1124
- } finally {
1125
- if (token === reqRef.current) {
1126
- setLoading(false);
1127
- setLoadingMore(false);
1128
- }
1129
- }
1130
- },
1131
- [orgs, pageSize]
1132
- );
1133
- useEffect(() => {
1134
- if (!open || !orgs) return;
1135
- void fetchPage(0, debounced, false);
1136
- }, [open, debounced, fetchPage, orgs]);
1137
- const loadMore = useCallback(() => {
1138
- if (loading || loadingMore || !hasMore) return;
1139
- void fetchPage(pageRef.current + 1, debounced, true);
1140
- }, [loading, loadingMore, hasMore, debounced, fetchPage]);
1141
- const visible = useMemo(() => {
1142
- if (orgs) return filterOrgs(rows, query);
1143
- return [{ name: currentId, displayName: titleCase(currentId) }];
1144
- }, [orgs, rows, query, currentId]);
1145
- const current = useMemo(() => {
1146
- if (given && given.name === currentId) return given;
1147
- return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
1148
- }, [given, rows, currentId]);
1149
- const currentLabel = current.displayName || titleCase(current.name);
1150
- const track = useEmit();
1151
- const select = useCallback(
1152
- (org) => {
1153
- track({ component: "OrgSwitcher", action: "select", id: org });
1154
- setOpen(false);
1155
- scope.switchOrg(org);
1156
- },
1157
- [scope, track]
1158
- );
1159
- const submitCreate = async () => {
1160
- const name = newName.trim();
1161
- if (!name || !create) return;
1162
- setBusy(true);
1163
- setErr(null);
1164
- try {
1165
- const org = await create(name);
1166
- scope.switchOrg(org);
1167
- } catch (e) {
1168
- setErr(e instanceof Error ? e.message : "Could not create the organization.");
1169
- setBusy(false);
1170
- }
1171
- };
1172
- return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", children: [
1173
- /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} \xB7 switch organization`, children: /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [
1174
- /* @__PURE__ */ jsx(OrgMark, { org: current, size: 30 }),
1175
- /* @__PURE__ */ jsx(Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }),
1176
- /* @__PURE__ */ jsx(ChevronsUpDown, { size: 15, color: "$color9" })
1177
- ] }) }) }),
1178
- /* @__PURE__ */ jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
1179
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }),
1180
- /* @__PURE__ */ jsx(
1181
- Input,
1182
- {
1183
- size: "$3",
1184
- placeholder: "Organization name",
1185
- value: newName,
1186
- onChangeText: setNewName,
1187
- autoCapitalize: "words",
1188
- onSubmitEditing: () => void submitCreate()
1189
- }
1190
- ),
1191
- err ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$red10", children: err }) : null,
1192
- /* @__PURE__ */ jsxs(XStack, { gap: "$2", justify: "flex-end", children: [
1193
- /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, onPress: () => setCreating(false), disabled: busy, children: "Cancel" }),
1194
- /* @__PURE__ */ jsx(
1195
- Button,
1196
- {
1197
- size: "$2",
1198
- onPress: () => void submitCreate(),
1199
- disabled: busy || !newName.trim(),
1200
- icon: busy ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : /* @__PURE__ */ jsx(Plus, { size: 14 }),
1201
- children: "Create"
1202
- }
1203
- )
1204
- ] })
1205
- ] }) : /* @__PURE__ */ jsxs(YStack, { gap: "$1", children: [
1206
- orgs ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$1", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [
1207
- /* @__PURE__ */ jsx(Search, { size: 13, opacity: 0.6 }),
1208
- /* @__PURE__ */ jsx(
1209
- Input,
1210
- {
1211
- flex: 1,
1212
- size: "$2",
1213
- borderWidth: 0,
1214
- bg: "transparent",
1215
- placeholder: "Find organization\u2026",
1216
- value: query,
1217
- onChangeText: setQuery,
1218
- autoCapitalize: "none",
1219
- autoCorrect: false
1220
- }
1221
- )
1222
- ] }) : null,
1223
- /* @__PURE__ */ jsxs(
1224
- "div",
1225
- {
1226
- style: { maxHeight: 300, overflowY: "auto", display: "flex", flexDirection: "column" },
1227
- onScroll: (e) => {
1228
- const el = e.currentTarget;
1229
- if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) loadMore();
1230
- },
1231
- children: [
1232
- loading ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [
1233
- /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$color11" }),
1234
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })
1235
- ] }) : visible.length === 0 ? /* @__PURE__ */ jsx(Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match \u201C${query.trim()}\u201D.` : "No organizations yet." }) : visible.map((org) => /* @__PURE__ */ jsxs(
1236
- XStack,
1237
- {
1238
- onPress: () => select(org.name),
1239
- cursor: "pointer",
1240
- items: "center",
1241
- gap: "$2.5",
1242
- px: "$2",
1243
- py: "$2",
1244
- rounded: "$3",
1245
- bg: org.name === currentId ? "$color4" : "transparent",
1246
- hoverStyle: { bg: "$color5" },
1247
- children: [
1248
- /* @__PURE__ */ jsx(OrgMark, { org }),
1249
- /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }),
1250
- org.name === currentId ? /* @__PURE__ */ jsx(Check, { size: 15 }) : null
1251
- ]
1252
- },
1253
- org.name
1254
- )),
1255
- loadingMore ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [
1256
- /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$color11" }),
1257
- /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: "Loading more\u2026" })
1258
- ] }) : hasMore ? /* @__PURE__ */ jsx(XStack, { onPress: loadMore, cursor: "pointer", items: "center", justify: "center", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: "$color4" }, children: /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color11", fontWeight: "600", children: "Load more" }) }) : null
1259
- ]
1260
- }
1261
- ),
1262
- create ? /* @__PURE__ */ jsxs(
1263
- XStack,
1264
- {
1265
- onPress: () => {
1266
- setCreating(true);
1267
- setErr(null);
1268
- },
1269
- cursor: "pointer",
1270
- items: "center",
1271
- gap: "$2.5",
1272
- px: "$2",
1273
- py: "$2",
1274
- mt: "$1",
1275
- rounded: "$3",
1276
- borderTopWidth: 1,
1277
- borderColor: "$borderColor",
1278
- hoverStyle: { bg: "$color5" },
1279
- children: [
1280
- /* @__PURE__ */ jsx(YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: /* @__PURE__ */ jsx(Plus, { size: 14 }) }),
1281
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: "Create organization" })
1282
- ]
1283
- }
1284
- ) : null,
1285
- picker ? /* @__PURE__ */ jsxs(
1286
- XStack,
1287
- {
1288
- onPress: () => {
1289
- setOpen(false);
1290
- scope.leaveOrg();
1291
- },
1292
- cursor: "pointer",
1293
- items: "center",
1294
- gap: "$2.5",
1295
- px: "$2",
1296
- py: "$2",
1297
- rounded: "$3",
1298
- hoverStyle: { bg: "$color5" },
1299
- children: [
1300
- /* @__PURE__ */ jsx(YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: /* @__PURE__ */ jsx(LayoutGrid, { size: 14 }) }),
1301
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: "All organizations" })
1302
- ]
1303
- }
1304
- ) : null
1305
- ] }) })
1306
- ] });
1307
- }
1308
- function DropdownMenu({
1309
- trigger,
1310
- items,
1311
- open,
1312
- defaultOpen = false,
1313
- onOpenChange,
1314
- minWidth = 200,
1315
- maxHeight
1316
- }) {
1317
- const [isOpen, setOpen] = useControllableState({
1318
- prop: open,
1319
- defaultProp: defaultOpen,
1320
- onChange: onOpenChange
1321
- });
1322
- const anchorRef = useRef(null);
1323
- const anchorRect = useCallback(() => anchorRef.current?.getBoundingClientRect() ?? null, []);
1324
- const anchorEl = useCallback(() => anchorRef.current, []);
1325
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1326
- /* @__PURE__ */ jsx(XStack, { ref: anchorRef, self: "flex-start", cursor: "pointer", onPress: () => setOpen(!isOpen), children: trigger }),
1327
- /* @__PURE__ */ jsx(
1328
- FloatingMenu,
1329
- {
1330
- open: isOpen,
1331
- onClose: () => setOpen(false),
1332
- anchorRect,
1333
- anchorEl,
1334
- minWidth,
1335
- maxHeight,
1336
- children: renderMenuItems(items, () => setOpen(false))
1337
- }
1338
- )
1339
- ] });
1340
- }
1341
- function ContextMenu({ children, items, disabled, minWidth = 200, maxHeight }) {
1342
- const [state, setState] = useState({ open: false, x: 0, y: 0 });
1343
- const close = useCallback(() => setState((s) => s.open ? { ...s, open: false } : s), []);
1344
- const anchorRect = useCallback(
1345
- () => ({ left: state.x, top: state.y, right: state.x, bottom: state.y, width: 0, height: 0 }),
1346
- [state.x, state.y]
1347
- );
1348
- const childOnContextMenu = children.props.onContextMenu;
1349
- const target = cloneElement(children, {
1350
- onContextMenu: (e) => {
1351
- childOnContextMenu?.(e);
1352
- if (disabled) return;
1353
- e.preventDefault();
1354
- e.stopPropagation();
1355
- setState({ open: true, x: e.clientX, y: e.clientY });
1356
- }
1357
- });
1358
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1359
- target,
1360
- /* @__PURE__ */ jsx(FloatingMenu, { open: state.open, onClose: close, anchorRect, gap: 0, minWidth, maxHeight, children: renderMenuItems(items, close) })
1361
- ] });
1362
- }
1363
- var isExternal = (href) => /^https?:\/\//.test(href);
1364
- var defaultLink = ({ href, children, onNavigate }) => /* @__PURE__ */ jsx(
1365
- "a",
1366
- {
1367
- href,
1368
- onClick: onNavigate,
1369
- ...isExternal(href) ? { target: "_blank", rel: "noopener noreferrer" } : null,
1370
- style: { textDecoration: "none", color: "inherit", display: "block" },
1371
- children
1372
- }
1373
- );
1374
- function ProductCell({ product, link, icon, close }) {
1375
- const glyph = icon?.(product.id);
1376
- return /* @__PURE__ */ jsx(YStack, { minW: 200, flex: 1, flexBasis: 200, children: link({
1377
- href: product.url,
1378
- onNavigate: close,
1379
- children: /* @__PURE__ */ jsxs(XStack, { gap: "$2.5", items: "flex-start", p: "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: "$color4" }, children: [
1380
- glyph ? /* @__PURE__ */ jsx(YStack, { pt: "$0.5", children: glyph }) : null,
1381
- /* @__PURE__ */ jsxs(YStack, { minW: 0, gap: "$0.5", children: [
1382
- product.verb ? /* @__PURE__ */ jsx(Text, { fontSize: 11, color: "$color10", textTransform: "uppercase", letterSpacing: 0.4, children: product.verb }) : null,
1383
- /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: product.name }),
1384
- /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", lineHeight: 16, children: product.job })
1385
- ] })
1386
- ] })
1387
- }) });
1388
- }
1389
- function Column({ title, links, link, icon, close }) {
1390
- return /* @__PURE__ */ jsxs(YStack, { minW: 160, flex: 1, gap: "$1", children: [
1391
- /* @__PURE__ */ jsx(Text, { fontSize: 11, color: "$color10", textTransform: "uppercase", letterSpacing: 0.5, px: "$2", pb: "$1", children: title }),
1392
- links.map((l) => /* @__PURE__ */ jsxs(XStack, { px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: "$color4" }, gap: "$2", items: "center", children: [
1393
- icon?.(l.id) ?? null,
1394
- link({
1395
- href: l.href,
1396
- onNavigate: close,
1397
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: l.label })
1398
- })
1399
- ] }, l.id))
1400
- ] });
1401
- }
1402
- function Launcher({ menu, link, icon, close }) {
1403
- return /* @__PURE__ */ jsxs(
1404
- YStack,
1405
- {
1406
- position: "absolute",
1407
- t: 52,
1408
- l: 0,
1409
- r: 0,
1410
- z: 50,
1411
- bg: "$background",
1412
- borderBottomWidth: 1,
1413
- borderColor: "$borderColor",
1414
- px: "$4",
1415
- py: "$4",
1416
- gap: "$3",
1417
- maxH: "80vh",
1418
- overflow: "scroll",
1419
- children: [
1420
- /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [
1421
- /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: menu.eyebrow }),
1422
- /* @__PURE__ */ jsx(XStack, { ml: "auto", children: link({
1423
- href: menu.allProducts.href,
1424
- onNavigate: close,
1425
- children: /* @__PURE__ */ jsxs(Text, { fontSize: "$2", color: "$color12", children: [
1426
- menu.allProducts.label,
1427
- " \u2192"
1428
- ] })
1429
- }) })
1430
- ] }),
1431
- /* @__PURE__ */ jsx(XStack, { gap: "$2.5", flexWrap: "wrap", children: menu.products.map((p) => /* @__PURE__ */ jsx(ProductCell, { product: p, link, icon, close }, p.id)) }),
1432
- /* @__PURE__ */ jsx(Separator, {}),
1433
- /* @__PURE__ */ jsxs(XStack, { gap: "$4", flexWrap: "wrap", items: "flex-start", children: [
1434
- /* @__PURE__ */ jsx(Column, { title: "Platform", links: menu.utilities, link, icon, close }),
1435
- /* @__PURE__ */ jsx(Column, { title: "Install", links: menu.installs, link, icon, close })
1436
- ] })
1437
- ]
1438
- }
1439
- );
1440
- }
1441
- function Cta({ action, link }) {
1442
- return /* @__PURE__ */ jsx(XStack, { bg: "$color12", px: "$3", py: "$1.5", rounded: "$3", hoverStyle: { opacity: 0.9 }, children: link({
1443
- href: action.href,
1444
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$background", children: action.label })
1445
- }) });
1446
- }
1447
- function MobilePanel({ header, menu, link, icon, close }) {
1448
- return /* @__PURE__ */ jsxs(
1449
- YStack,
1450
- {
1451
- position: "absolute",
1452
- t: 52,
1453
- l: 0,
1454
- r: 0,
1455
- z: 50,
1456
- bg: "$background",
1457
- borderBottomWidth: 1,
1458
- borderColor: "$borderColor",
1459
- px: "$3",
1460
- py: "$3",
1461
- gap: "$3",
1462
- maxH: "80vh",
1463
- overflow: "scroll",
1464
- children: [
1465
- /* @__PURE__ */ jsx(YStack, { gap: "$1", children: header.localNav.map((l) => /* @__PURE__ */ jsx(XStack, { px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: "$color4" }, children: link({
1466
- href: l.href,
1467
- onNavigate: close,
1468
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: l.label })
1469
- }) }, l.id)) }),
1470
- menu ? /* @__PURE__ */ jsxs(Fragment, { children: [
1471
- /* @__PURE__ */ jsx(Separator, {}),
1472
- /* @__PURE__ */ jsx(YStack, { gap: "$1", children: menu.products.map((p) => /* @__PURE__ */ jsxs(XStack, { px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: "$color4" }, gap: "$2", items: "center", children: [
1473
- icon?.(p.id) ?? null,
1474
- link({
1475
- href: p.url,
1476
- onNavigate: close,
1477
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: p.name })
1478
- })
1479
- ] }, p.id)) }),
1480
- /* @__PURE__ */ jsx(Separator, {}),
1481
- /* @__PURE__ */ jsx(Column, { title: "Platform", links: menu.utilities, link, icon, close }),
1482
- /* @__PURE__ */ jsx(Column, { title: "Install", links: menu.installs, link, icon, close })
1483
- ] }) : null
1484
- ]
1485
- }
1486
- );
1487
- }
1488
- function SiteNav({ header, menu, brand, actions, link = defaultLink, icon, active, meetLabel = "Meet Hanzo" }) {
1489
- const [launcher, setLauncher] = useState(false);
1490
- const [mobile, setMobile] = useState(false);
1491
- const root = useRef(null);
1492
- useEffect(() => {
1493
- if (!launcher && !mobile) return;
1494
- const dismiss = () => {
1495
- setLauncher(false);
1496
- setMobile(false);
1497
- };
1498
- const onKey = (e) => {
1499
- if (e.key === "Escape") dismiss();
1500
- };
1501
- const onDown = (e) => {
1502
- if (root.current && !root.current.contains(e.target)) dismiss();
1503
- };
1504
- document.addEventListener("keydown", onKey);
1505
- document.addEventListener("mousedown", onDown);
1506
- return () => {
1507
- document.removeEventListener("keydown", onKey);
1508
- document.removeEventListener("mousedown", onDown);
1509
- };
1510
- }, [launcher, mobile]);
1511
- return /* @__PURE__ */ jsxs(YStack, { ref: root, position: "relative", bg: "$background", children: [
1512
- /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$1", px: "$3", height: 52, borderBottomWidth: 1, borderColor: "$borderColor", children: [
1513
- brand ? /* @__PURE__ */ jsx(XStack, { items: "center", pr: "$2", children: brand }) : null,
1514
- menu ? /* @__PURE__ */ jsx(
1515
- XStack,
1516
- {
1517
- cursor: "pointer",
1518
- px: "$2.5",
1519
- py: "$1.5",
1520
- rounded: "$3",
1521
- bg: launcher ? "$color4" : "transparent",
1522
- hoverStyle: { bg: "$color4" },
1523
- onPress: () => setLauncher(!launcher),
1524
- accessibilityRole: "button",
1525
- "aria-expanded": launcher,
1526
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: meetLabel })
1527
- }
1528
- ) : null,
1529
- /* @__PURE__ */ jsx(XStack, { items: "center", gap: "$0.5", flex: 1, minW: 0, $sm: { display: "none" }, children: header.localNav.map((l) => /* @__PURE__ */ jsx(
1530
- XStack,
1531
- {
1532
- px: "$2.5",
1533
- py: "$1.5",
1534
- rounded: "$3",
1535
- hoverStyle: { bg: "$color4" },
1536
- onMouseEnter: () => launcher && setLauncher(false),
1537
- children: link({
1538
- href: l.href,
1539
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: active === l.id ? "$color12" : "$color11", children: l.label })
1540
- })
1541
- },
1542
- l.id
1543
- )) }),
1544
- /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", ml: "auto", children: [
1545
- actions,
1546
- /* @__PURE__ */ jsx(Cta, { action: header.action, link }),
1547
- /* @__PURE__ */ jsx(
1548
- XStack,
1549
- {
1550
- display: "none",
1551
- $sm: { display: "flex" },
1552
- cursor: "pointer",
1553
- px: "$2",
1554
- py: "$1.5",
1555
- rounded: "$3",
1556
- hoverStyle: { bg: "$color4" },
1557
- onPress: () => setMobile(!mobile),
1558
- accessibilityRole: "button",
1559
- "aria-label": mobile ? "Close menu" : "Open menu",
1560
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: mobile ? "Close" : "Menu" })
1561
- }
1562
- )
1563
- ] })
1564
- ] }),
1565
- launcher && menu ? /* @__PURE__ */ jsx(Launcher, { menu, link, icon, close: () => setLauncher(false) }) : null,
1566
- mobile ? /* @__PURE__ */ jsx(MobilePanel, { header, menu, link, icon, close: () => setMobile(false) }) : null
1567
- ] });
1568
- }
1569
- var isExternal2 = (href) => /^https?:\/\//.test(href);
1570
- var defaultLink2 = ({ href, children }) => /* @__PURE__ */ jsx(
1571
- "a",
1572
- {
1573
- href,
1574
- ...isExternal2(href) ? { target: "_blank", rel: "noopener noreferrer" } : null,
1575
- style: { textDecoration: "none", color: "inherit" },
1576
- children
1577
- }
1578
- );
1579
- function SiteFooter({ footer, brand, tagline, meta, link = defaultLink2 }) {
1580
- return /* @__PURE__ */ jsxs(YStack, { borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", px: "$4", py: "$5", gap: "$4", children: [
1581
- /* @__PURE__ */ jsxs(XStack, { gap: "$5", flexWrap: "wrap", items: "flex-start", children: [
1582
- brand || tagline ? /* @__PURE__ */ jsxs(YStack, { gap: "$2", minW: 200, flex: 1, children: [
1583
- brand,
1584
- tagline ? /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", lineHeight: 18, maxW: 280, children: tagline }) : null
1585
- ] }) : null,
1586
- footer.columns.map((column) => /* @__PURE__ */ jsxs(YStack, { gap: "$1.5", minW: 140, children: [
1587
- /* @__PURE__ */ jsx(Text, { fontSize: 11, color: "$color10", textTransform: "uppercase", letterSpacing: 0.5, pb: "$1", children: column.title }),
1588
- column.links.map((l) => /* @__PURE__ */ jsx(XStack, { hoverStyle: { opacity: 0.7 }, children: link({
1589
- href: l.href,
1590
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: l.label })
1591
- }) }, l.id))
1592
- ] }, column.id))
1593
- ] }),
1594
- /* @__PURE__ */ jsx(Separator, {}),
1595
- /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [
1596
- /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", children: footer.legal.copyright }),
1597
- /* @__PURE__ */ jsx(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: footer.legal.links.map((l) => /* @__PURE__ */ jsx(XStack, { hoverStyle: { opacity: 0.7 }, children: link({
1598
- href: l.href,
1599
- children: /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", children: l.label })
1600
- }) }, l.id)) }),
1601
- meta ? /* @__PURE__ */ jsx(XStack, { ml: "auto", items: "center", gap: "$3", children: meta }) : null
1602
- ] })
1603
- ] });
1604
- }
1605
- function CommerceResource({
1606
- title,
1607
- subtitle,
1608
- load,
1609
- columns,
1610
- rowKey,
1611
- empty,
1612
- hint,
1613
- actions
1614
- }) {
1615
- const [state, setState] = useState({ phase: "loading" });
1616
- const loadRef = useRef(load);
1617
- loadRef.current = load;
1618
- const reload = useCallback(() => {
1619
- setState({ phase: "loading" });
1620
- loadRef.current().then((r) => setState({ phase: "ready", data: r.rows })).catch((e) => setState({ phase: "error", error: classifyBackend(e) }));
1621
- }, []);
1622
- useEffect(() => {
1623
- reload();
1624
- }, [reload]);
1625
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1626
- /* @__PURE__ */ jsx(
1627
- PageHeader,
1628
- {
1629
- title,
1630
- subtitle,
1631
- actions: /* @__PURE__ */ jsxs(XStack, { gap: "$2", children: [
1632
- actions?.(reload),
1633
- /* @__PURE__ */ jsx(Button, { size: "$2", icon: /* @__PURE__ */ jsx(RefreshCw, { size: 15 }), onPress: reload, children: "Refresh" })
1634
- ] })
1635
- }
1636
- ),
1637
- state.phase === "error" ? /* @__PURE__ */ jsx(BackendStateCard, { state: state.error, onRetry: reload, hint }) : /* @__PURE__ */ jsx(
1638
- DataTable,
1639
- {
1640
- columns,
1641
- rows: state.phase === "ready" ? state.data : [],
1642
- loading: state.phase === "loading",
1643
- rowKey,
1644
- empty
1645
- }
1646
- )
1647
- ] });
1648
- }
1649
- function ConfirmDelete({
1650
- message,
1651
- confirmLabel,
1652
- run,
1653
- onDone
1654
- }) {
1655
- const [busy, setBusy] = useState(false);
1656
- const [err, setErr] = useState(null);
1657
- const track = useEmit();
1658
- const go = async () => {
1659
- setBusy(true);
1660
- setErr(null);
1661
- track({ component: "ConfirmDelete", action: "confirm", id: confirmLabel });
1662
- try {
1663
- await run();
1664
- onDone();
1665
- } catch (e) {
1666
- const message2 = classifyBackend(e).message || "Failed to delete.";
1667
- track({ component: "ConfirmDelete", action: "error", id: confirmLabel, value: message2 });
1668
- setErr(message2);
1669
- setBusy(false);
1670
- }
1671
- };
1672
- return /* @__PURE__ */ jsxs(YStack, { gap: "$3", children: [
1673
- /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", children: message }),
1674
- err ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$red10", children: err }) : null,
1675
- /* @__PURE__ */ jsxs(XStack, { gap: "$2", flexWrap: "wrap", children: [
1676
- /* @__PURE__ */ jsx(
1677
- Button,
1678
- {
1679
- onPress: go,
1680
- disabled: busy,
1681
- icon: /* @__PURE__ */ jsx(Trash2, { size: 15 }),
1682
- style: { backgroundColor: "#dc2626", borderColor: "#dc2626", color: "#fff" },
1683
- children: busy ? "Deleting\u2026" : confirmLabel
1684
- }
1685
- ),
1686
- /* @__PURE__ */ jsx(
1687
- Button,
1688
- {
1689
- chromeless: true,
1690
- onPress: () => {
1691
- track({ component: "ConfirmDelete", action: "cancel", id: confirmLabel });
1692
- onDone();
1693
- },
1694
- disabled: busy,
1695
- children: "Cancel"
1696
- }
1697
- )
1698
- ] })
1699
- ] });
1700
- }
1701
- function Segmented({
1702
- options,
1703
- value,
1704
- onChange,
1705
- size = "$2",
1706
- name
1707
- }) {
1708
- const track = useEmit();
1709
- return /* @__PURE__ */ jsx(XStack, { gap: "$1", flexWrap: "wrap", items: "center", children: options.map((o) => {
1710
- const active = o.value === value;
1711
- return /* @__PURE__ */ jsx(
1712
- Button,
1713
- {
1714
- size,
1715
- bg: active ? "$color5" : "transparent",
1716
- borderWidth: 1,
1717
- borderColor: active ? "$color7" : "$borderColor",
1718
- "aria-pressed": active,
1719
- onPress: () => {
1720
- track({ component: "Segmented", action: "filter", id: name, value: o.value });
1721
- onChange(o.value);
1722
- },
1723
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", fontWeight: active ? "700" : "500", color: active ? "$color12" : "$color11", children: o.label })
1724
- },
1725
- o.value
1726
- );
1727
- }) });
1728
- }
1729
- function SearchInput({
1730
- value,
1731
- onChange,
1732
- placeholder,
1733
- name
1734
- }) {
1735
- const track = useEmit();
1736
- const onChangeTracked = (v) => {
1737
- track({ component: "SearchInput", action: "search", id: name, value: textSize(v) });
1738
- onChange(v);
1739
- };
1740
- return /* @__PURE__ */ jsxs(XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$color1", children: [
1741
- /* @__PURE__ */ jsx(Search, { size: 15, color: "$color10" }),
1742
- /* @__PURE__ */ jsx(Input, { flex: 1, value, onChangeText: onChangeTracked, placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })
1743
- ] });
1744
- }
1745
-
1746
- // src/product/brand.ts
1747
- var HANZO_MARK_CONTENT = '<path d="M22.21 67V44.6369H0V67H22.21Z"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"/><path d="M22.21 0H0V22.3184H22.21V0Z"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z"/>';
1748
- var HANZO = {
1749
- id: "hanzo",
1750
- name: "Hanzo",
1751
- viewBox: "0 0 67 67",
1752
- content: HANZO_MARK_CONTENT,
1753
- href: "https://hanzo.ai"
1754
- };
1755
- var LUX = {
1756
- id: "lux",
1757
- name: "Lux",
1758
- viewBox: "0 0 100 100",
1759
- content: '<path d="M50 85 L15 25 L85 25 Z"/>',
1760
- href: "https://lux.network"
1761
- };
1762
- var ZOO = {
1763
- id: "zoo",
1764
- name: "Zoo",
1765
- viewBox: "0 0 1024 1024",
1766
- fullColor: true,
1767
- content: '<defs><clipPath id="zooClip"><circle cx="512" cy="511" r="270"/></clipPath><clipPath id="zooGClip"><circle cx="513" cy="369" r="234"/></clipPath><clipPath id="zooRClip"><circle cx="365" cy="595" r="234"/></clipPath></defs><g clip-path="url(#zooClip)"><circle cx="513" cy="369" r="234" fill="#00A652"/><circle cx="365" cy="595" r="234" fill="#ED1C24"/><circle cx="643" cy="595" r="234" fill="#2E3192"/><g clip-path="url(#zooGClip)"><circle cx="365" cy="595" r="234" fill="#FCF006"/><circle cx="643" cy="595" r="234" fill="#01ACF1"/></g><g clip-path="url(#zooRClip)"><circle cx="643" cy="595" r="234" fill="#EA018E"/></g><g clip-path="url(#zooGClip)"><g clip-path="url(#zooRClip)"><circle cx="643" cy="595" r="234" fill="#FFFFFF"/></g></g></g>',
1768
- href: "https://zoo.ngo"
1769
- };
1770
- var PARS = {
1771
- id: "pars",
1772
- name: "Pars",
1773
- viewBox: "-120 -120 240 240",
1774
- content: '<path d="M0,-100 L30,-60 L100,-40 L60,0 L100,40 L30,60 L0,100 L-30,60 L-100,40 L-60,0 L-100,-40 L-30,-60 Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M0,-70 L22,-42 L70,-28 L42,0 L70,28 L22,42 L0,70 L-22,42 L-70,28 L-42,0 L-70,-28 L-22,-42 Z" fill="currentColor" fill-opacity="0.15" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><circle r="55" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4"/><circle r="35" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4"/><circle r="8" fill="currentColor"/>',
1775
- href: "https://pars.network"
1776
- };
1777
- var BRANDS = { hanzo: HANZO, lux: LUX, zoo: ZOO, pars: PARS };
1778
- function resolveBrand(id) {
1779
- return id && BRANDS[id] || HANZO;
1780
- }
1781
-
1782
- // src/product/animatedLogo.logic.ts
1783
- var HOUSE_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
1784
- var DEFAULT_DURATION_MS = 360;
1785
- var DEFAULT_INTRO_MS = 1500;
1786
- var DEFAULT_GAP = 8;
1787
- function wordmarkText(name, surface) {
1788
- const s = surface?.trim();
1789
- return s ? `${name} ${s}` : name;
1790
- }
1791
- function isExpanded(s) {
1792
- return s.hovered || s.focused || s.introShowing;
1793
- }
1794
- function wordmarkStyle(i) {
1795
- return {
1796
- width: i.expanded ? i.naturalWidth ?? "auto" : 0,
1797
- opacity: i.expanded ? 1 : 0,
1798
- marginLeft: i.expanded ? i.gap : 0,
1799
- transition: i.reduce ? "none" : `width ${i.durationMs}ms ${i.easing}, opacity ${i.durationMs}ms ${i.easing}, margin-left ${i.durationMs}ms ${i.easing}`
1800
- };
1801
- }
1802
- function usePrefersReducedMotion() {
1803
- const [reduce, setReduce] = useState(false);
1804
- useEffect(() => {
1805
- if (typeof window === "undefined" || !window.matchMedia) return;
1806
- const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
1807
- const sync = () => setReduce(mq.matches);
1808
- sync();
1809
- mq.addEventListener("change", sync);
1810
- return () => mq.removeEventListener("change", sync);
1811
- }, []);
1812
- return reduce;
1813
- }
1814
- function AnimatedLogo({
1815
- surface,
1816
- brand = HANZO,
1817
- size = 22,
1818
- gap = DEFAULT_GAP,
1819
- introMs = DEFAULT_INTRO_MS,
1820
- durationMs = DEFAULT_DURATION_MS,
1821
- easing = HOUSE_EASE,
1822
- href,
1823
- onClick,
1824
- component,
1825
- className,
1826
- style,
1827
- "aria-label": ariaLabel
1828
- }) {
1829
- const reduce = usePrefersReducedMotion();
1830
- const label = ariaLabel ?? wordmarkText(brand.name, surface);
1831
- const [hovered, setHovered] = useState(false);
1832
- const [focused, setFocused] = useState(false);
1833
- const [introShowing, setIntroShowing] = useState(introMs > 0);
1834
- const [naturalWidth, setNaturalWidth] = useState(void 0);
1835
- const wordRef = useRef(null);
1836
- useEffect(() => {
1837
- if (introMs <= 0) return;
1838
- if (reduce) {
1839
- setIntroShowing(false);
1840
- return;
1841
- }
1842
- const t = setTimeout(() => setIntroShowing(false), introMs);
1843
- return () => clearTimeout(t);
1844
- }, [introMs, reduce]);
1845
- useLayoutEffect(() => {
1846
- const el = wordRef.current;
1847
- if (!el) return;
1848
- const measure = () => setNaturalWidth(el.scrollWidth);
1849
- measure();
1850
- const fonts = typeof document !== "undefined" && document.fonts || null;
1851
- if (fonts?.ready) fonts.ready.then(measure).catch(() => {
1852
- });
1853
- }, [brand.name, surface]);
1854
- const expanded = isExpanded({ hovered, focused, introShowing });
1855
- const ws = wordmarkStyle({ expanded, naturalWidth, gap, durationMs, easing, reduce });
1856
- const Root = component ?? "a";
1857
- const isAnchor = Root === "a";
1858
- return /* @__PURE__ */ jsxs(
1859
- Root,
1860
- {
1861
- ...isAnchor ? { href: href ?? brand.href ?? "/" } : { href: href ?? brand.href },
1862
- onClick,
1863
- "aria-label": label,
1864
- title: label,
1865
- className,
1866
- onMouseEnter: () => setHovered(true),
1867
- onMouseLeave: () => setHovered(false),
1868
- onFocus: () => setFocused(true),
1869
- onBlur: () => setFocused(false),
1870
- style: {
1871
- display: "inline-flex",
1872
- alignItems: "center",
1873
- textDecoration: "none",
1874
- color: "inherit",
1875
- cursor: "pointer",
1876
- ...style
1877
- },
1878
- children: [
1879
- /* @__PURE__ */ jsx(
1880
- "svg",
1881
- {
1882
- width: size,
1883
- height: size,
1884
- viewBox: brand.viewBox,
1885
- "aria-hidden": "true",
1886
- focusable: "false",
1887
- fill: brand.fullColor ? void 0 : "currentColor",
1888
- style: { display: "block", flexShrink: 0 },
1889
- dangerouslySetInnerHTML: { __html: brand.content }
1890
- }
1891
- ),
1892
- /* @__PURE__ */ jsx(
1893
- "span",
1894
- {
1895
- ref: wordRef,
1896
- "aria-hidden": "true",
1897
- style: {
1898
- display: "inline-block",
1899
- overflow: "hidden",
1900
- whiteSpace: "nowrap",
1901
- fontWeight: 600,
1902
- fontSize: 15,
1903
- letterSpacing: "-0.01em",
1904
- lineHeight: 1,
1905
- width: ws.width,
1906
- opacity: ws.opacity,
1907
- marginLeft: ws.marginLeft,
1908
- transition: ws.transition
1909
- },
1910
- children: label
1911
- }
1912
- )
1913
- ]
1914
- }
1915
- );
1916
- }
1917
- function FadeIn({
1918
- children,
1919
- index = 0,
1920
- step = 50,
1921
- delayMs,
1922
- style
1923
- }) {
1924
- const delay = delayMs ?? index * step;
1925
- return /* @__PURE__ */ jsx("div", { className: "hz-fade-up", style: { animationDelay: `${delay}ms`, ...style }, children });
1926
- }
1927
- function ProductIcon({
1928
- icon: Icon,
1929
- color,
1930
- size = 24
1931
- }) {
1932
- const radius = Math.round(size * 0.28);
1933
- const glyph = Math.round(size * 0.58);
1934
- const tinted = typeof color === "string" && color.trim() !== "";
1935
- if (tinted) {
1936
- return /* @__PURE__ */ jsx(
1937
- XStack,
1938
- {
1939
- width: size,
1940
- height: size,
1941
- items: "center",
1942
- justify: "center",
1943
- rounded: radius,
1944
- style: { backgroundColor: color },
1945
- children: /* @__PURE__ */ jsx(Icon, { size: glyph, color: asColor("#ffffff") })
1946
- }
1947
- );
1948
- }
1949
- return /* @__PURE__ */ jsx(XStack, { width: size, height: size, items: "center", justify: "center", rounded: radius, bg: "$color12", children: /* @__PURE__ */ jsx(Icon, { size: glyph, color: "$color1" }) });
1950
- }
1951
- var KNOWN = {
1952
- openrouter: Globe,
1953
- nvidia: Cpu
1954
- };
1955
- var isFirstParty = (provider) => {
1956
- const p = provider.trim().toLowerCase();
1957
- return p === "hanzo" || p === "zen";
1958
- };
1959
- function EnsoMark({ size, color }) {
1960
- return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 100 100", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M66.22 83.26 A37 37 0 1 1 85.57 60.20", fill: "none", stroke: color, strokeWidth: 11, strokeLinecap: "round" }) });
1961
- }
1962
- var HANZO_PATHS = [
1963
- "M22.21 67V44.6369H0V67H22.21Z",
1964
- "M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z",
1965
- "M22.21 0H0V22.3184H22.21V0Z",
1966
- "M66.7198 0H44.5098V22.3184H66.7198V0Z",
1967
- "M66.7198 67V44.6369H44.5098V67H66.7198Z"
1968
- ];
1969
- function HanzoHMark({ size, color }) {
1970
- return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 67 67", "aria-hidden": "true", children: HANZO_PATHS.map((d) => /* @__PURE__ */ jsx("path", { d, fill: color }, d)) });
1971
- }
1972
- function providerInitials(provider) {
1973
- const name = provider.trim();
1974
- if (!name) return "\u2022";
1975
- const words = name.split(/[\s/_-]+/).filter(Boolean);
1976
- if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
1977
- return name.slice(0, 2).toUpperCase();
1978
- }
1979
- function ProviderLogo({ provider, size = 24 }) {
1980
- const theme = useTheme();
1981
- const radius = Math.round(size * 0.28);
1982
- const iconSize = Math.round(size * 0.56);
1983
- if (isFirstParty(provider)) {
1984
- const fg = theme.color1?.get() ?? "#000000";
1985
- const markSize = Math.round(size * 0.66);
1986
- const isZen = provider.trim().toLowerCase() === "zen";
1987
- return /* @__PURE__ */ jsx(XStack, { width: size, height: size, items: "center", justify: "center", rounded: radius, bg: "$color12", children: isZen ? /* @__PURE__ */ jsx(EnsoMark, { size: markSize, color: fg }) : /* @__PURE__ */ jsx(HanzoHMark, { size: Math.round(size * 0.56), color: fg }) });
1988
- }
1989
- const Known = KNOWN[provider.trim().toLowerCase()];
1990
- if (Known) {
1991
- return /* @__PURE__ */ jsx(
1992
- XStack,
1993
- {
1994
- width: size,
1995
- height: size,
1996
- items: "center",
1997
- justify: "center",
1998
- rounded: radius,
1999
- bg: "$color3",
2000
- borderWidth: 1,
2001
- borderColor: "$borderColor",
2002
- children: /* @__PURE__ */ jsx(Known, { size: iconSize, color: "$color11" })
2003
- }
2004
- );
2005
- }
2006
- return /* @__PURE__ */ jsx(
2007
- XStack,
2008
- {
2009
- width: size,
2010
- height: size,
2011
- items: "center",
2012
- justify: "center",
2013
- rounded: radius,
2014
- bg: "$color3",
2015
- borderWidth: 1,
2016
- borderColor: "$borderColor",
2017
- children: /* @__PURE__ */ jsx(Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color11", children: providerInitials(provider) })
2018
- }
2019
- );
2020
- }
2021
- function GenericLogo({ size = 24 }) {
2022
- return /* @__PURE__ */ jsx(XStack, { width: size, height: size, items: "center", justify: "center", rounded: Math.round(size * 0.28), bg: "$color3", borderWidth: 1, borderColor: "$borderColor", children: /* @__PURE__ */ jsx(Server, { size: Math.round(size * 0.56), color: "$color11" }) });
2023
- }
2024
- function targetIndex(from, dy, rowH, count) {
2025
- if (rowH <= 0 || count <= 0) return from;
2026
- const raw = from + Math.round(dy / rowH);
2027
- return Math.max(0, Math.min(raw, count - 1));
2028
- }
2029
- function rowShift(i, from, to, dy, rowH) {
2030
- if (i === from) return dy;
2031
- if (from < to && i > from && i <= to) return -rowH;
2032
- if (from > to && i < from && i >= to) return rowH;
2033
- return 0;
2034
- }
2035
- function Reorder({
2036
- items,
2037
- keyOf,
2038
- rowHeight = 44,
2039
- onReorder,
2040
- renderItem
2041
- }) {
2042
- const [drag, setDrag] = useState(null);
2043
- const startRef = useRef(null);
2044
- const to = drag ? targetIndex(drag.from, drag.dy, rowHeight, items.length) : -1;
2045
- const begin = useCallback(
2046
- (index) => (e) => {
2047
- const startY = e.clientY ?? e.nativeEvent?.clientY ?? 0;
2048
- startRef.current = { from: index, startY };
2049
- setDrag({ from: index, dy: 0 });
2050
- const move = (ev) => {
2051
- if (!startRef.current) return;
2052
- setDrag({ from: startRef.current.from, dy: ev.clientY - startRef.current.startY });
2053
- };
2054
- const end = () => {
2055
- const s = startRef.current;
2056
- window.removeEventListener("pointermove", move);
2057
- window.removeEventListener("pointerup", end);
2058
- window.removeEventListener("pointercancel", end);
2059
- startRef.current = null;
2060
- setDrag((d) => {
2061
- if (s && d) {
2062
- const t = targetIndex(s.from, d.dy, rowHeight, items.length);
2063
- if (t !== s.from) onReorder(s.from, t);
2064
- }
2065
- return null;
2066
- });
2067
- };
2068
- window.addEventListener("pointermove", move);
2069
- window.addEventListener("pointerup", end);
2070
- window.addEventListener("pointercancel", end);
2071
- },
2072
- [items.length, rowHeight, onReorder]
2073
- );
2074
- return /* @__PURE__ */ jsx(YStack, { children: items.map((item, i) => {
2075
- const dragging = drag?.from === i;
2076
- const shift = drag && to >= 0 ? rowShift(i, drag.from, to, drag.dy, rowHeight) : 0;
2077
- return /* @__PURE__ */ jsx(
2078
- YStack,
2079
- {
2080
- height: rowHeight,
2081
- justify: "center",
2082
- className: "hz-drag-item",
2083
- style: {
2084
- transform: `translateY(${shift}px)`,
2085
- zIndex: dragging ? 2 : 1,
2086
- ...dragging ? { transition: "none", boxShadow: "0 8px 24px rgba(0,0,0,0.28)" } : null
2087
- },
2088
- children: renderItem(item, { onPointerDown: begin(i) }, dragging)
2089
- },
2090
- keyOf(item)
2091
- );
2092
- }) });
2093
- }
2094
- function SelectMenu({
2095
- options,
2096
- value,
2097
- onChange,
2098
- allLabel = "All",
2099
- icon,
2100
- minWidth = 130
2101
- }) {
2102
- const active = value === null ? null : options.find((o) => o.key === value) ?? null;
2103
- const triggerLabel = active ? active.label : allLabel;
2104
- const items = [
2105
- { key: "__all__", label: allLabel, selected: value === null, onSelect: () => onChange(null) },
2106
- ...options.map((o) => ({ key: o.key, label: o.label, selected: value === o.key, onSelect: () => onChange(o.key) }))
2107
- ];
2108
- return /* @__PURE__ */ jsx(
2109
- DropdownMenu,
2110
- {
2111
- minWidth: Math.max(minWidth, 160),
2112
- trigger: /* @__PURE__ */ jsx(
2113
- Button,
2114
- {
2115
- size: "$2",
2116
- minW: minWidth,
2117
- justify: "space-between",
2118
- borderWidth: 1,
2119
- borderColor: "$borderColor",
2120
- bg: value !== null ? "$color5" : "transparent",
2121
- icon,
2122
- iconAfter: /* @__PURE__ */ jsx(ChevronDown, { size: 14, opacity: 0.6 }),
2123
- children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, flex: 1, children: triggerLabel })
2124
- }
2125
- ),
2126
- items
2127
- }
2128
- );
2129
- }
2130
- var ToastContext = createContext(null);
2131
- var ACCENT3 = {
2132
- success: "$green10",
2133
- error: "$red10",
2134
- info: "$color11"
2135
- };
2136
- var ICON = {
2137
- success: CircleCheck,
2138
- error: CircleX,
2139
- info: Info
2140
- };
2141
- function ToastCard({ t, onClose }) {
2142
- const Icon = ICON[t.kind];
2143
- const accent = ACCENT3[t.kind];
2144
- return /* @__PURE__ */ jsx(
2145
- Card,
2146
- {
2147
- width: 360,
2148
- maxWidth: "90%",
2149
- p: "$3",
2150
- gap: "$2",
2151
- bg: "$color2",
2152
- borderWidth: 1,
2153
- borderColor: "$borderColor",
2154
- borderLeftWidth: 3,
2155
- borderLeftColor: accent,
2156
- rounded: "$4",
2157
- elevation: "$2",
2158
- children: /* @__PURE__ */ jsxs(XStack, { gap: "$2.5", items: "flex-start", children: [
2159
- /* @__PURE__ */ jsx(YStack, { pt: 1, children: /* @__PURE__ */ jsx(Icon, { size: 18, color: accent }) }),
2160
- /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: "$1", children: [
2161
- /* @__PURE__ */ jsx(Text, { fontSize: "$3", fontWeight: "700", color: "$color12", children: t.title }),
2162
- t.description ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: t.description }) : null
2163
- ] }),
2164
- /* @__PURE__ */ jsx(Button, { size: "$1", chromeless: true, icon: /* @__PURE__ */ jsx(X, { size: 14 }), onPress: onClose, "aria-label": "Dismiss" })
2165
- ] })
2166
- }
2167
- );
2168
- }
2169
- function ToastViewport({ toasts, dismiss }) {
2170
- const [mounted, setMounted] = useState(false);
2171
- useEffect(() => setMounted(true), []);
2172
- if (!mounted || typeof document === "undefined") return null;
2173
- return createPortal(
2174
- /* @__PURE__ */ jsx("div", { style: { position: "fixed", top: 16, right: 16, zIndex: 1e5, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(YStack, { gap: "$2", items: "flex-end", children: toasts.map((t) => /* @__PURE__ */ jsx(YStack, { pointerEvents: "auto", children: /* @__PURE__ */ jsx(ToastCard, { t, onClose: () => dismiss(t.id) }) }, t.id)) }) }),
2175
- document.body
2176
- );
2177
- }
2178
- function ToastProvider({ children }) {
2179
- const track = useEmit();
2180
- const [toasts, setToasts] = useState([]);
2181
- const timers = useRef(/* @__PURE__ */ new Map());
2182
- const seq = useRef(0);
2183
- const dismiss = useCallback((id) => {
2184
- setToasts((ts) => ts.filter((t) => t.id !== id));
2185
- const timer = timers.current.get(id);
2186
- if (timer) {
2187
- clearTimeout(timer);
2188
- timers.current.delete(id);
2189
- }
2190
- }, []);
2191
- const toast = useCallback(
2192
- (input) => {
2193
- const id = ++seq.current;
2194
- const kind = input.kind ?? "info";
2195
- const durationMs = input.durationMs ?? (kind === "error" ? 6e3 : 3500);
2196
- track({ component: "Toast", action: kind === "error" ? "error" : "view", id: input.title, value: kind });
2197
- setToasts((ts) => [...ts, { id, kind, title: input.title, description: input.description, durationMs }]);
2198
- if (durationMs > 0) {
2199
- timers.current.set(
2200
- id,
2201
- setTimeout(() => dismiss(id), durationMs)
2202
- );
2203
- }
2204
- },
2205
- [dismiss, track]
2206
- );
2207
- useEffect(() => {
2208
- const map = timers.current;
2209
- return () => map.forEach((t) => clearTimeout(t));
2210
- }, []);
2211
- const api = {
2212
- toast,
2213
- success: (title, description) => toast({ title, description, kind: "success" }),
2214
- error: (title, description) => toast({ title, description, kind: "error" }),
2215
- info: (title, description) => toast({ title, description, kind: "info" }),
2216
- dismiss
2217
- };
2218
- return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
2219
- children,
2220
- /* @__PURE__ */ jsx(ToastViewport, { toasts, dismiss })
2221
- ] });
2222
- }
2223
- function useToast() {
2224
- const ctx = useContext(ToastContext);
2225
- if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
2226
- return ctx;
2227
- }
2228
-
2229
- export { AnimatedLogo, AppHeader, BRANDS, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, ComboBox, CommerceResource, ConfirmDelete, ContextMenu, Donut, Donut2, DropdownMenu, FadeIn, FloatingMenu, GenericLogo, HANZO, HANZO_MARK_CONTENT, HanzoMark, HintButton, LUX, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, MiniBars, OrgMark, OrgSwitcher, PARS, Panel, PortalTheme, ProductIcon, ProviderLogo, Reorder, SERIES, SURFACES, SearchInput, Segmented, SelectMenu, SiteFooter, SiteNav, Sparkline, Sparkline2, ToastProvider, UtilBar, ZOO, colorForIndex, filterOptions, filterOrgs, isKnownOption, monogram, orgScope, otherSurfaces, providerInitials, renderMenuItems, resolveBrand, rowShift, targetIndex, useContainerWidth, useToast, utilColor };
2230
- //# sourceMappingURL=chunk-7P7R7FC5.js.map
2231
- //# sourceMappingURL=chunk-7P7R7FC5.js.map