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