@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.
- package/dist/backends/gui/index.d.ts +2 -0
- package/dist/backends/shadcn/aspect-ratio.d.ts +4 -0
- package/dist/backends/shadcn/avatar.d.ts +6 -0
- package/dist/backends/shadcn/badge.d.ts +9 -0
- package/dist/backends/shadcn/button.d.ts +19 -0
- package/dist/backends/shadcn/card.d.ts +9 -0
- package/dist/backends/shadcn/checkbox.d.ts +9 -0
- package/dist/backends/shadcn/collapsible.d.ts +5 -0
- package/dist/backends/shadcn/command.d.ts +80 -0
- package/dist/backends/shadcn/dialog.d.ts +15 -0
- package/dist/backends/shadcn/dropdown-menu.d.ts +34 -0
- package/dist/backends/shadcn/index.d.ts +23 -0
- package/dist/backends/shadcn/input.d.ts +11 -0
- package/dist/backends/shadcn/label.d.ts +4 -0
- package/dist/backends/shadcn/popover.d.ts +7 -0
- package/dist/backends/shadcn/progress.d.ts +4 -0
- package/dist/backends/shadcn/scroll-area.d.ts +5 -0
- package/dist/backends/shadcn/select.d.ts +13 -0
- package/dist/backends/shadcn/separator.d.ts +4 -0
- package/dist/backends/shadcn/slider.d.ts +4 -0
- package/dist/backends/shadcn/switch.d.ts +4 -0
- package/dist/backends/shadcn/tabs.d.ts +7 -0
- package/dist/backends/shadcn/textarea.d.ts +4 -0
- package/dist/backends/shadcn/toaster.d.ts +10 -0
- package/dist/backends/shadcn/tooltip.d.ts +7 -0
- package/dist/backends/shadcn/utils.d.ts +8 -0
- package/dist/components.d.ts +1 -0
- package/dist/core/cn.d.ts +11 -0
- package/dist/core/fonts.d.ts +26 -0
- package/dist/core/index.d.ts +3 -0
- package/dist/core/tokens.d.ts +16 -0
- package/dist/gitops.cjs +3 -3
- package/dist/gitops.d.ts +1 -1
- package/dist/gitops.js +1 -1
- package/dist/index.cjs +1138 -291
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1017 -3
- package/dist/index.js.map +1 -1
- package/dist/models/ModelSelector.d.ts +23 -0
- package/dist/models/catalog.d.ts +53 -0
- package/dist/models/index.d.ts +5 -0
- package/dist/models/types.d.ts +39 -0
- package/dist/primitives/AspectRatio.d.ts +1 -0
- package/dist/primitives/Avatar.d.ts +1 -0
- package/dist/primitives/AvatarFallback.d.ts +1 -0
- package/dist/primitives/AvatarImage.d.ts +1 -0
- package/dist/primitives/Badge.d.ts +1 -0
- package/dist/primitives/Button.d.ts +1 -0
- package/dist/primitives/Card.d.ts +1 -0
- package/dist/primitives/CardAction.d.ts +1 -0
- package/dist/primitives/CardContent.d.ts +1 -0
- package/dist/primitives/CardDescription.d.ts +1 -0
- package/dist/primitives/CardFooter.d.ts +1 -0
- package/dist/primitives/CardHeader.d.ts +1 -0
- package/dist/primitives/CardTitle.d.ts +1 -0
- package/dist/primitives/Checkbox.d.ts +1 -0
- package/dist/primitives/Collapsible.d.ts +1 -0
- package/dist/primitives/CollapsibleContent.d.ts +1 -0
- package/dist/primitives/CollapsibleTrigger.d.ts +1 -0
- package/dist/primitives/Command.d.ts +1 -0
- package/dist/primitives/CommandDialog.d.ts +1 -0
- package/dist/primitives/CommandEmpty.d.ts +1 -0
- package/dist/primitives/CommandGroup.d.ts +1 -0
- package/dist/primitives/CommandInput.d.ts +1 -0
- package/dist/primitives/CommandItem.d.ts +1 -0
- package/dist/primitives/CommandList.d.ts +1 -0
- package/dist/primitives/CommandSeparator.d.ts +1 -0
- package/dist/primitives/CommandShortcut.d.ts +1 -0
- package/dist/primitives/Dialog.d.ts +1 -0
- package/dist/primitives/DialogClose.d.ts +1 -0
- package/dist/primitives/DialogContent.d.ts +1 -0
- package/dist/primitives/DialogDescription.d.ts +1 -0
- package/dist/primitives/DialogFooter.d.ts +1 -0
- package/dist/primitives/DialogHeader.d.ts +1 -0
- package/dist/primitives/DialogOverlay.d.ts +1 -0
- package/dist/primitives/DialogPortal.d.ts +1 -0
- package/dist/primitives/DialogTitle.d.ts +1 -0
- package/dist/primitives/DialogTrigger.d.ts +1 -0
- package/dist/primitives/DropdownMenu.d.ts +1 -0
- package/dist/primitives/DropdownMenuCheckboxItem.d.ts +1 -0
- package/dist/primitives/DropdownMenuContent.d.ts +1 -0
- package/dist/primitives/DropdownMenuGroup.d.ts +1 -0
- package/dist/primitives/DropdownMenuItem.d.ts +1 -0
- package/dist/primitives/DropdownMenuLabel.d.ts +1 -0
- package/dist/primitives/DropdownMenuPortal.d.ts +1 -0
- package/dist/primitives/DropdownMenuRadioGroup.d.ts +1 -0
- package/dist/primitives/DropdownMenuRadioItem.d.ts +1 -0
- package/dist/primitives/DropdownMenuSeparator.d.ts +1 -0
- package/dist/primitives/DropdownMenuShortcut.d.ts +1 -0
- package/dist/primitives/DropdownMenuSub.d.ts +1 -0
- package/dist/primitives/DropdownMenuSubContent.d.ts +1 -0
- package/dist/primitives/DropdownMenuSubTrigger.d.ts +1 -0
- package/dist/primitives/DropdownMenuTrigger.d.ts +1 -0
- package/dist/primitives/Input.d.ts +1 -0
- package/dist/primitives/Label.d.ts +1 -0
- package/dist/primitives/Popover.d.ts +1 -0
- package/dist/primitives/PopoverAnchor.d.ts +1 -0
- package/dist/primitives/PopoverContent.d.ts +1 -0
- package/dist/primitives/PopoverTrigger.d.ts +1 -0
- package/dist/primitives/Progress.d.ts +1 -0
- package/dist/primitives/ScrollArea.d.ts +1 -0
- package/dist/primitives/ScrollBar.d.ts +1 -0
- package/dist/primitives/Select.d.ts +1 -0
- package/dist/primitives/SelectContent.d.ts +1 -0
- package/dist/primitives/SelectGroup.d.ts +1 -0
- package/dist/primitives/SelectItem.d.ts +1 -0
- package/dist/primitives/SelectLabel.d.ts +1 -0
- package/dist/primitives/SelectScrollDownButton.d.ts +1 -0
- package/dist/primitives/SelectScrollUpButton.d.ts +1 -0
- package/dist/primitives/SelectSeparator.d.ts +1 -0
- package/dist/primitives/SelectTrigger.d.ts +1 -0
- package/dist/primitives/SelectValue.d.ts +1 -0
- package/dist/primitives/Separator.d.ts +1 -0
- package/dist/primitives/Slider.d.ts +1 -0
- package/dist/primitives/Switch.d.ts +1 -0
- package/dist/primitives/Tabs.d.ts +1 -0
- package/dist/primitives/TabsContent.d.ts +1 -0
- package/dist/primitives/TabsList.d.ts +1 -0
- package/dist/primitives/TabsTrigger.d.ts +1 -0
- package/dist/primitives/Textarea.d.ts +1 -0
- package/dist/primitives/Toaster.d.ts +1 -0
- package/dist/primitives/Tooltip.d.ts +1 -0
- package/dist/primitives/TooltipContent.d.ts +1 -0
- package/dist/primitives/TooltipProvider.d.ts +1 -0
- package/dist/primitives/TooltipTrigger.d.ts +1 -0
- package/dist/primitives/badgeVariants.d.ts +1 -0
- package/dist/primitives/buttonVariants.d.ts +1 -0
- package/dist/primitives/index.d.ts +1 -0
- package/dist/primitives/toast.d.ts +1 -0
- package/dist/product/AnimatedLogo.d.ts +47 -0
- package/dist/product/BackendState.d.ts +42 -0
- package/dist/product/Charts.d.ts +4 -0
- package/dist/product/CommerceResource.d.ts +32 -0
- package/dist/product/ConfirmDelete.d.ts +8 -0
- package/dist/product/DataTable.d.ts +30 -2
- package/dist/product/Field.d.ts +7 -2
- package/dist/product/Filters.d.ts +29 -0
- package/dist/product/PrimaryButton.d.ts +5 -0
- package/dist/product/SiteFooter.d.ts +28 -0
- package/dist/product/SiteNav.d.ts +60 -0
- package/dist/product/accent.d.ts +33 -0
- package/dist/product/animatedLogo.logic.d.ts +52 -0
- package/dist/product/brand.d.ts +45 -0
- package/dist/product/host.d.ts +21 -0
- package/dist/product/index.cjs +3516 -265
- package/dist/product/index.cjs.map +1 -1
- package/dist/product/index.d.ts +11 -0
- package/dist/product/index.js +3402 -1
- package/dist/product/index.js.map +1 -1
- package/dist/product/social/CampaignCard.d.ts +13 -0
- package/dist/product/social/ChannelBadge.d.ts +14 -0
- package/dist/product/social/PostAgenda.d.ts +5 -0
- package/dist/product/social/PostCard.d.ts +6 -0
- package/dist/product/social/PostComposer.d.ts +24 -0
- package/dist/product/social/ProviderReadinessList.d.ts +4 -0
- package/dist/product/social/SocialResource.d.ts +7 -0
- package/dist/product/social/SocialSummaryBar.d.ts +4 -0
- package/dist/product/social/ViewToggle.d.ts +5 -0
- package/dist/product/social/api.d.ts +128 -0
- package/dist/product/social/format.d.ts +16 -0
- package/dist/product/social/index.d.ts +11 -0
- package/dist/product/surfaces.data.d.ts +1 -0
- package/dist/styles/hanzo-motion.css +52 -0
- package/package.json +90 -15
- package/dist/chunk-M2ILMK44.cjs +0 -2104
- package/dist/chunk-M2ILMK44.cjs.map +0 -1
- package/dist/chunk-YSURJUOA.js +0 -2035
- package/dist/chunk-YSURJUOA.js.map +0 -1
package/dist/chunk-M2ILMK44.cjs
DELETED
|
@@ -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
|