@hanzo/ui 8.0.22 → 8.0.24

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