@hanzo/ui 8.0.11 → 8.0.13

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