@hanzo/ui 8.0.8 → 8.0.12

package/dist/product/index.js

@@ -1,5 +1,3107 @@
 'use client';
-export { AppHeader, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, ComboBox, ContextMenu, Boxes as CustomModelMark, DataTable, Donut, Donut2 as DonutRing, DropdownMenu, EmptyState, FadeIn, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, FloatingMenu, GenericLogo, HanzoMark, HintButton, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, Sparkline2 as MetricSparkline, MiniBars, OrgSwitcher, PageHeader, Panel, PortalTheme, PrimaryButton, ProductIcon, ProviderLogo, Reorder, SERIES, LG as SLIDEOVER_LG, SURFACES, SelectMenu, SlideOver, Sparkline, StatusTag, ToastProvider, UtilBar, asColor, colorForIndex, filterOptions, filterOrgs, isKnownOption, orgScope, otherSurfaces, providerInitials, renderMenuItems, rowShift, targetIndex, useToast, utilColor } from '../chunk-GDGVXU7W.js';
+import { ThemeToggle } from '../chunk-42CU5GSF.js';
 export { AgnosticThemeToggle, ThemeToggle, ThemeToggleNext } from '../chunk-42CU5GSF.js';
+import { createContext, useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo, cloneElement, useContext, useSyncExternalStore } from 'react';
+import { useTheme, XStack, Text, YStack, Card, Theme, useThemeName, Portal, Input, Button, Spinner, Popover, Separator, useControllableState, Label, TextArea, Switch, Slider, ScrollView } from '@hanzo/gui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Check, ChevronRight, ChevronDown, RefreshCw, Grip, CreditCard, Users, Bot, MessageCircle, AppWindow, LayoutGrid, Sparkles, UserRound, Settings2, LogOut, ChevronsUpDown, Plus, Search, TriangleAlert, ChevronUp, Trash2, ExternalLink, ArrowRight, Cpu, Globe, Server, X, Pencil, Calendar, AlertTriangle, CheckCircle2, List, Info, CircleX, CircleCheck } from '@hanzogui/lucide-icons-2';
+export { Boxes as CustomModelMark } from '@hanzogui/lucide-icons-2';
+import { surfaceById } from '@hanzo/products';
+import { HanzoLogo } from '@hanzo/logo/react';
+import { createPortal } from 'react-dom';
+
+var CHART_PALETTE = [
+  "#7c5cff",
+  "#23c562",
+  "#ff9f45",
+  "#3aa0ff",
+  "#ff5d8f",
+  "#16c0c8",
+  "#c084fc",
+  "#f4c245"
+];
+var CHART_OTHER = "#64748b";
+var ACCENT = CHART_PALETTE[0];
+var GRID = "rgba(148,163,184,0.16)";
+var AXIS = "rgba(148,163,184,0.85)";
+var tone = (theme, key, fallback) => {
+  const v = theme[key];
+  const got = v?.get?.();
+  return typeof got === "string" ? got : fallback;
+};
+var rampOpacity = (i, n) => n <= 1 ? 0.9 : 0.95 - i / (n - 1) * 0.62;
+function useContainerWidth() {
+  const ref = useRef(null);
+  const [w, setW] = useState(0);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => setW(el.clientWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return { ref, w };
+}
+function Sparkline({
+  values,
+  width = 120,
+  height = 36,
+  color
+}) {
+  const theme = useTheme();
+  const clean = (values ?? []).filter((v) => Number.isFinite(v));
+  if (clean.length < 2) return null;
+  const stroke = color ?? tone(theme, "color11", "currentColor");
+  const max = Math.max(...clean);
+  const min = Math.min(...clean);
+  const span = max - min || 1;
+  const n = clean.length;
+  const px = (i) => i / (n - 1) * (width - 2) + 1;
+  const py = (v) => height - 2 - (v - min) / span * (height - 4);
+  const line = clean.map((v, i) => `${i === 0 ? "M" : "L"}${px(i).toFixed(1)},${py(v).toFixed(1)}`).join(" ");
+  const area = `${line} L${(width - 1).toFixed(1)},${height} L1,${height} Z`;
+  return /* @__PURE__ */ jsxs("svg", { width, height, "aria-hidden": true, style: { display: "block" }, children: [
+    /* @__PURE__ */ jsx("path", { d: area, fill: stroke, fillOpacity: 0.12 }),
+    /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" })
+  ] });
+}
+function Tooltip({ x, height, label, value }) {
+  const left = Math.max(0, x - 60);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left,
+        top: 0,
+        height,
+        pointerEvents: "none",
+        display: "flex",
+        alignItems: "flex-start"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            background: "rgba(15,17,21,0.94)",
+            border: "1px solid rgba(148,163,184,0.25)",
+            borderRadius: 8,
+            padding: "6px 9px",
+            fontSize: 11,
+            lineHeight: 1.35,
+            color: "#e2e8f0",
+            whiteSpace: "nowrap",
+            boxShadow: "0 4px 16px rgba(0,0,0,0.4)"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { color: AXIS }, children: label }),
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 700 }, children: value })
+          ]
+        }
+      )
+    }
+  );
+}
+function nearestIndex(clientX, rect, padL, innerW, n) {
+  if (n <= 1) return 0;
+  const mx = clientX - rect.left - padL;
+  const i = Math.round(mx / (innerW || 1) * (n - 1));
+  return Math.max(0, Math.min(n - 1, i));
+}
+function axisTicks(data) {
+  const n = data.length;
+  if (n === 0) return [];
+  if (n === 1) return [{ i: 0, label: data[0].label, anchor: "middle" }];
+  const mid = Math.floor((n - 1) / 2);
+  const out = [
+    { i: 0, label: data[0].label, anchor: "start" },
+    { i: n - 1, label: data[n - 1].label, anchor: "end" }
+  ];
+  if (n >= 5) out.splice(1, 0, { i: mid, label: data[mid].label, anchor: "middle" });
+  return out;
+}
+function LineChart({
+  data,
+  height = 210,
+  color = ACCENT,
+  formatValue = (v) => String(v)
+}) {
+  const { ref, w } = useContainerWidth();
+  const [hover, setHover] = useState(null);
+  const padL = 10;
+  const padR = 10;
+  const padT = 12;
+  const padB = 24;
+  const n = data.length;
+  const innerW = Math.max(1, w - padL - padR);
+  const innerH = Math.max(1, height - padT - padB);
+  const max = Math.max(...data.map((d) => d.value), 1);
+  const x = (i) => padL + (n <= 1 ? innerW / 2 : i / (n - 1) * innerW);
+  const y = (v) => padT + innerH - v / max * innerH;
+  const line = data.map((d, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(1)},${y(d.value).toFixed(1)}`).join(" ");
+  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` : "";
+  const ticks = axisTicks(data);
+  return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", width: "100%" }, children: [
+    w > 0 ? /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: w,
+        height,
+        style: { display: "block" },
+        onMouseMove: (e) => setHover(nearestIndex(e.clientX, e.currentTarget.getBoundingClientRect(), padL, innerW, n)),
+        onMouseLeave: () => setHover(null),
+        children: [
+          [0, 0.5, 1].map((g) => /* @__PURE__ */ jsx("line", { x1: padL, x2: w - padR, y1: padT + innerH * g, y2: padT + innerH * g, stroke: GRID, strokeWidth: 1 }, g)),
+          area ? /* @__PURE__ */ jsx("path", { d: area, fill: color, fillOpacity: 0.1 }) : null,
+          n >= 2 ? /* @__PURE__ */ jsx("path", { d: line, fill: "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" }) : null,
+          hover != null && data[hover] ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("line", { x1: x(hover), x2: x(hover), y1: padT, y2: padT + innerH, stroke: AXIS, strokeWidth: 1, strokeDasharray: "3 3" }),
+            /* @__PURE__ */ jsx("circle", { cx: x(hover), cy: y(data[hover].value), r: 4, fill: color, stroke: "#0f1115", strokeWidth: 2 })
+          ] }) : null,
+          ticks.map((t) => /* @__PURE__ */ jsx("text", { x: x(t.i), y: height - 7, fontSize: 10, fill: AXIS, textAnchor: t.anchor, children: t.label }, t.i))
+        ]
+      }
+    ) : null,
+    hover != null && data[hover] ? /* @__PURE__ */ jsx(Tooltip, { x: x(hover), height, label: data[hover].label, value: formatValue(data[hover].value) }) : null
+  ] });
+}
+function BarChart({
+  data,
+  height = 210,
+  color = ACCENT,
+  formatValue = (v) => String(v)
+}) {
+  const { ref, w } = useContainerWidth();
+  const [hover, setHover] = useState(null);
+  const padL = 10;
+  const padR = 10;
+  const padT = 12;
+  const padB = 24;
+  const n = data.length;
+  const innerW = Math.max(1, w - padL - padR);
+  const innerH = Math.max(1, height - padT - padB);
+  const max = Math.max(...data.map((d) => d.value), 1);
+  const slot = innerW / Math.max(1, n);
+  const barW = Math.max(1, Math.min(slot * 0.62, 36));
+  const cx = (i) => padL + slot * i + slot / 2;
+  const ticks = axisTicks(data);
+  return /* @__PURE__ */ jsxs("div", { ref, style: { position: "relative", width: "100%" }, children: [
+    w > 0 ? /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: w,
+        height,
+        style: { display: "block" },
+        onMouseMove: (e) => {
+          const rect = e.currentTarget.getBoundingClientRect();
+          const i = Math.floor((e.clientX - rect.left - padL) / (slot || 1));
+          setHover(Math.max(0, Math.min(n - 1, i)));
+        },
+        onMouseLeave: () => setHover(null),
+        children: [
+          [0, 0.5, 1].map((g) => /* @__PURE__ */ jsx("line", { x1: padL, x2: w - padR, y1: padT + innerH * g, y2: padT + innerH * g, stroke: GRID, strokeWidth: 1 }, g)),
+          data.map((d, i) => {
+            const h = d.value / max * innerH;
+            return /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: cx(i) - barW / 2,
+                y: padT + innerH - h,
+                width: barW,
+                height: Math.max(0, h),
+                rx: Math.min(3, barW / 2),
+                fill: color,
+                fillOpacity: hover === i ? 1 : 0.78
+              },
+              i
+            );
+          }),
+          ticks.map((t) => /* @__PURE__ */ jsx("text", { x: cx(t.i), y: height - 7, fontSize: 10, fill: AXIS, textAnchor: "middle", children: t.label }, t.i))
+        ]
+      }
+    ) : null,
+    hover != null && data[hover] ? /* @__PURE__ */ jsx(Tooltip, { x: cx(hover), height, label: data[hover].label, value: formatValue(data[hover].value) }) : null
+  ] });
+}
+function Donut({
+  slices,
+  size = 160,
+  thickness = 22,
+  center,
+  legend = false
+}) {
+  const theme = useTheme();
+  const fg = tone(theme, "color12", "currentColor");
+  const positive = slices.filter((s) => s.value > 0);
+  const total = positive.reduce((sum, s) => sum + s.value, 0);
+  const r = size / 2;
+  const rInner = r - thickness;
+  const mid = (r + rInner) / 2;
+  if (total <= 0) {
+    return /* @__PURE__ */ jsx(XStack, { items: "center", justify: "center", height: size, children: /* @__PURE__ */ jsx(Text, { fontSize: "$6", color: "$color10", children: "\u2014" }) });
+  }
+  const ring = /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: size, height: size }, children: [
+    /* @__PURE__ */ jsx("svg", { width: size, height: size, style: { display: "block" }, children: positive.length === 1 ? /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: r,
+        cy: r,
+        r: mid,
+        fill: "none",
+        stroke: positive[0].color ?? fg,
+        strokeOpacity: positive[0].color ? 1 : 0.9,
+        strokeWidth: thickness
+      }
+    ) : renderArcs(positive, total, r, rInner, fg) }),
+    center ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          textAlign: "center",
+          pointerEvents: "none"
+        },
+        children: center
+      }
+    ) : null
+  ] });
+  if (!legend) return ring;
+  return /* @__PURE__ */ jsxs(XStack, { gap: "$4", items: "center", flexWrap: "wrap", children: [
+    ring,
+    /* @__PURE__ */ jsx(YStack, { gap: "$1.5", flex: 1, minW: 150, children: positive.map((s, i) => /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: 2,
+            backgroundColor: s.color ?? AXIS,
+            opacity: s.color ? 1 : rampOpacity(i, positive.length)
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", flex: 1, numberOfLines: 1, children: s.label }),
+      /* @__PURE__ */ jsxs(Text, { fontSize: "$2", color: "$color12", fontWeight: "600", children: [
+        Math.round(s.value / total * 100),
+        "%"
+      ] })
+    ] }, s.label)) })
+  ] });
+}
+function renderArcs(slices, total, rOuter, rInner, fg) {
+  let a0 = -Math.PI / 2;
+  const paths = [];
+  slices.forEach((s, idx) => {
+    const frac = Math.max(0, s.value) / total;
+    if (frac <= 0) return;
+    const a1 = a0 + frac * Math.PI * 2;
+    paths.push(
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: annularArc(rOuter, rOuter, rOuter, rInner, a0, Math.min(a1, a0 + Math.PI * 1.9999)),
+          fill: s.color ?? fg,
+          fillOpacity: s.color ? 1 : rampOpacity(idx, slices.length)
+        },
+        s.label || idx
+      )
+    );
+    a0 = a1;
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: paths });
+}
+function polar(cx, cy, rad, a) {
+  return [cx + rad * Math.cos(a), cy + rad * Math.sin(a)];
+}
+function annularArc(cx, cy, rOuter, rInner, a0, a1) {
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, rOuter, a0);
+  const [x1, y1] = polar(cx, cy, rOuter, a1);
+  const [x2, y2] = polar(cx, cy, rInner, a1);
+  const [x3, y3] = polar(cx, cy, rInner, a0);
+  return `M${x0},${y0} A${rOuter},${rOuter} 0 ${large} 1 ${x1},${y1} L${x2},${y2} A${rInner},${rInner} 0 ${large} 0 ${x3},${y3} Z`;
+}
+function BarRows({ bars }) {
+  const max = Math.max(0, ...bars.map((b) => b.value));
+  if (max <= 0) {
+    return /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color10", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx(YStack, { gap: "$2.5", children: bars.map((b) => /* @__PURE__ */ jsxs(XStack, { gap: "$3", items: "center", children: [
+    /* @__PURE__ */ jsx(Text, { width: 64, fontSize: "$2", color: "$color11", text: "right", children: b.label }),
+    /* @__PURE__ */ jsx(YStack, { flex: 1, height: 10, bg: "$color3", rounded: "$2", overflow: "hidden", children: /* @__PURE__ */ jsx(YStack, { height: 10, width: `${Math.max(2, b.value / max * 100)}%`, bg: "$color9", rounded: "$2" }) }),
+    /* @__PURE__ */ jsx(Text, { width: 56, fontSize: "$2", color: "$color12", fontWeight: "600", children: b.value.toLocaleString() })
+  ] }, b.label)) });
+}
+var SERIES = ["#6ea8fe", "#7ee787", "#f0a868", "#c792ea", "#56d4c4", "#e879a6", "#d6c15a", "#8b9bb4"];
+var colorForIndex = (i) => SERIES[i % SERIES.length];
+var TRACK = "rgba(128,128,128,0.18)";
+function utilColor(pct) {
+  if (pct >= 90) return "#e5534b";
+  if (pct >= 70) return "#f0a868";
+  return "#7ee787";
+}
+function Sparkline2({
+  points,
+  width = 104,
+  height = 30,
+  color = SERIES[0]
+}) {
+  if (!points || points.length < 2) return null;
+  const min = Math.min(...points);
+  const max = Math.max(...points);
+  const span = max - min || 1;
+  const stepX = width / (points.length - 1);
+  const y = (v) => height - 2 - (v - min) / span * (height - 4);
+  const d = points.map((p, i) => `${i === 0 ? "M" : "L"}${(i * stepX).toFixed(1)},${y(p).toFixed(1)}`).join(" ");
+  return /* @__PURE__ */ jsx("svg", { width, height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": "trend", children: /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }) });
+}
+function MiniBars({
+  bars,
+  width = 320,
+  height = 96,
+  color = SERIES[0]
+}) {
+  if (!bars.length) return null;
+  const max = Math.max(...bars.map((b) => b.value), 1);
+  const gap = 4;
+  const bw = (width - gap * (bars.length - 1)) / bars.length;
+  return /* @__PURE__ */ jsx("svg", { width: "100%", height, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", role: "img", "aria-label": "bars", children: bars.map((b, i) => {
+    const h = Math.max(1, b.value / max * (height - 2));
+    return /* @__PURE__ */ jsx("rect", { x: i * (bw + gap), y: height - h, width: bw, height: h, rx: 2, fill: color, opacity: 0.85, children: /* @__PURE__ */ jsx("title", { children: `${b.label}: ${b.value}` }) }, b.label + i);
+  }) });
+}
+function UtilBar({ value, width = 120, color }) {
+  const v = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsxs("svg", { width, height: 8, viewBox: `0 0 ${width} 8`, role: "img", "aria-label": `${Math.round(v)}%`, children: [
+    /* @__PURE__ */ jsx("rect", { x: 0, y: 1, width, height: 6, rx: 3, fill: TRACK }),
+    /* @__PURE__ */ jsx("rect", { x: 0, y: 1, width: v / 100 * width, height: 6, rx: 3, fill: color ?? utilColor(v) })
+  ] });
+}
+function LegendDot({ color, label, value }) {
+  return /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+      /* @__PURE__ */ jsx(YStack, { width: 10, height: 10, rounded: "$1", bg: color }),
+      /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: label })
+    ] }),
+    value != null ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "500", className: "hz-mono", children: value }) : null
+  ] });
+}
+function MetricCard({
+  icon,
+  label,
+  value,
+  caption,
+  spark,
+  sparkColor,
+  delta
+}) {
+  const up = delta ? delta.pct >= 0 : false;
+  return /* @__PURE__ */ jsxs(Card, { p: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$borderColor", flex: 1, minW: 172, children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [
+      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+        icon,
+        /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", fontWeight: "500", children: label })
+      ] }),
+      delta ? /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: up ? "#7ee787" : "#e5534b", children: [
+        up ? "\u25B2" : "\u25BC",
+        " ",
+        Math.abs(delta.pct),
+        "%"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(XStack, { items: "flex-end", justify: "space-between", gap: "$2", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "$8", fontWeight: "500", color: "$color12", numberOfLines: 1, className: "hz-mono", children: value }),
+      spark && spark.length >= 2 ? /* @__PURE__ */ jsx(Sparkline2, { points: spark, color: sparkColor ?? SERIES[0] }) : null
+    ] }),
+    caption ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: caption }) : null
+  ] });
+}
+function HintButton({
+  icon,
+  iconAfter,
+  children,
+  onPress,
+  disabled,
+  hint,
+  theme
+}) {
+  const btn = /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "$2",
+      theme,
+      icon,
+      iconAfter,
+      disabled,
+      onPress: disabled ? void 0 : onPress,
+      children
+    }
+  );
+  if (!hint) return btn;
+  return /* @__PURE__ */ jsx("span", { title: hint, style: { display: "inline-flex" }, children: btn });
+}
+function Panel({
+  title,
+  right,
+  children,
+  minW = 280,
+  grow = true
+}) {
+  return /* @__PURE__ */ jsxs(Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", flex: grow ? 1 : void 0, minW, width: grow ? void 0 : "100%", children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "500", color: "$color12", children: title }),
+      right
+    ] }),
+    children
+  ] });
+}
+function Donut2({
+  segments,
+  size = 160,
+  thickness = 18,
+  centerValue,
+  centerLabel,
+  trackColor = "#2a2d2e",
+  valueColor = "#ecedee",
+  labelColor = "#9ba1a6"
+}) {
+  const total = segments.reduce((n, s) => n + Math.max(0, s.value), 0);
+  if (total <= 0) return null;
+  const r = (size - thickness) / 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circ = 2 * Math.PI * r;
+  let offset = 0;
+  const arcs = segments.filter((s) => s.value > 0).map((s) => {
+    const frac = s.value / total;
+    const dash = frac * circ;
+    const node = /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: "none",
+        stroke: s.color,
+        strokeWidth: thickness,
+        strokeDasharray: `${dash} ${circ - dash}`,
+        strokeDashoffset: -offset
+      },
+      s.label
+    );
+    offset += dash;
+    return node;
+  });
+  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": "Donut chart", children: [
+    /* @__PURE__ */ jsx("circle", { cx, cy, r, fill: "none", stroke: trackColor, strokeWidth: thickness }),
+    /* @__PURE__ */ jsx("g", { transform: `rotate(-90 ${cx} ${cy})`, children: arcs }),
+    centerValue ? /* @__PURE__ */ jsx("text", { x: cx, y: cy - 2, textAnchor: "middle", fontSize: size * 0.2, fontWeight: "800", fill: valueColor, children: centerValue }) : null,
+    centerLabel ? /* @__PURE__ */ jsx("text", { x: cx, y: cy + size * 0.13, textAnchor: "middle", fontSize: size * 0.08, fill: labelColor, children: centerLabel }) : null
+  ] });
+}
+
+// src/product/combobox/filter.ts
+var hay = (o) => `${o.value} ${o.label ?? ""} ${o.hint ?? ""}`.toLowerCase();
+function filterOptions(options, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return options;
+  return options.filter((o) => hay(o).includes(q));
+}
+function isKnownOption(options, value) {
+  return options.some((o) => o.value === value);
+}
+var ITEM_MIN_HEIGHT = 30;
+var ITEM_RADIUS = 7;
+var ITEM_PX = 8;
+var ITEM_GAP = 8;
+var ICON_SLOT = 16;
+var PANEL_RADIUS = 12;
+var PANEL_PAD = 4;
+var PANEL_GAP = 2;
+var SEP_MARGIN = 4;
+var FONT_LABEL = 13;
+var FONT_MUTED = 11;
+var FONT_SHORTCUT = 12;
+var ACCENT2 = "var(--hanzo-accent, #8b5cf6)";
+var ACCENT_SOFT = "var(--hanzo-accent-soft, rgba(139,92,246,0.16))";
+var DANGER = "var(--hanzo-danger, #ef4444)";
+function MenuPanel({
+  children,
+  minWidth = 200,
+  maxHeight = 360,
+  onKeyDown,
+  panelRef,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    YStack,
+    {
+      ref: panelRef,
+      role: "menu",
+      bg: "$color2",
+      borderColor: "$borderColor",
+      borderWidth: 1,
+      rounded: PANEL_RADIUS,
+      p: PANEL_PAD,
+      gap: PANEL_GAP,
+      minW: minWidth,
+      maxH: maxHeight,
+      overflow: "scroll",
+      shadowColor: "rgba(0,0,0,0.45)",
+      shadowRadius: 20,
+      shadowOffset: { width: 0, height: 10 },
+      onKeyDown,
+      ...rest,
+      children
+    }
+  );
+}
+function MenuItemView({
+  icon,
+  label,
+  description,
+  shortcut,
+  selected = false,
+  disabled = false,
+  destructive = false,
+  hasSubmenu = false,
+  onSelect
+}) {
+  const press = () => {
+    if (!disabled) onSelect();
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect();
+    }
+  };
+  const labelColor = destructive ? DANGER : "$color12";
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled || void 0,
+      items: "center",
+      gap: ITEM_GAP,
+      px: ITEM_PX,
+      minH: ITEM_MIN_HEIGHT,
+      rounded: ITEM_RADIUS,
+      cursor: disabled ? "default" : "pointer",
+      opacity: disabled ? 0.4 : 1,
+      select: "none",
+      style: { outline: "none" },
+      hoverStyle: disabled ? {} : { bg: ACCENT_SOFT },
+      pressStyle: disabled ? {} : { bg: ACCENT_SOFT },
+      focusStyle: disabled ? {} : { bg: ACCENT_SOFT },
+      onPress: press,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(XStack, { width: ICON_SLOT, height: ICON_SLOT, items: "center", justify: "center", shrink: 0, children: icon ? /* @__PURE__ */ jsx(XStack, { items: "center", justify: "center", opacity: destructive ? 1 : 0.9, style: destructive ? { color: DANGER } : void 0, children: icon }) : null }),
+        /* @__PURE__ */ jsxs(YStack, { flex: 1, minW: 0, children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: FONT_LABEL, lineHeight: 18, color: labelColor, numberOfLines: 1, children: label }),
+          description ? /* @__PURE__ */ jsx(Text, { fontSize: FONT_MUTED, lineHeight: 14, color: "$color11", numberOfLines: 1, children: description }) : null
+        ] }),
+        shortcut ? /* @__PURE__ */ jsx(Text, { fontSize: FONT_SHORTCUT, color: "$color11", shrink: 0, children: shortcut }) : null,
+        selected ? /* @__PURE__ */ jsx(Check, { size: 14, color: ACCENT2 }) : null,
+        hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight, { size: 14, color: "var(--hanzo-muted, currentColor)", opacity: 0.6 }) : null
+      ]
+    }
+  );
+}
+function MenuSeparatorView() {
+  return /* @__PURE__ */ jsx(YStack, { height: 1, bg: "$borderColor", my: SEP_MARGIN, mx: SEP_MARGIN, role: "separator" });
+}
+function MenuLabelView({ children }) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      fontSize: FONT_MUTED,
+      color: "$color11",
+      px: ITEM_PX,
+      py: SEP_MARGIN,
+      textTransform: "uppercase",
+      letterSpacing: 0.4,
+      select: "none",
+      children
+    }
+  );
+}
+function renderMenuItems(items, close) {
+  return items.map((it, i) => {
+    if (it.type === "separator") return /* @__PURE__ */ jsx(MenuSeparatorView, {}, it.key ?? `sep-${i}`);
+    if (it.type === "label") return /* @__PURE__ */ jsx(MenuLabelView, { children: it.label }, it.key ?? `lbl-${i}`);
+    const { key, onSelect, closeOnSelect = true, ...rest } = it;
+    return /* @__PURE__ */ jsx(
+      MenuItemView,
+      {
+        ...rest,
+        onSelect: () => {
+          onSelect();
+          if (closeOnSelect) close?.();
+        }
+      },
+      key
+    );
+  });
+}
+function PortalTheme({ name, children }) {
+  return /* @__PURE__ */ jsx(Theme, { name, children });
+}
+
+// src/product/menu/roving.ts
+function menuKeyDown(e, onClose) {
+  if (e.key === "Escape") {
+    onClose?.();
+    return;
+  }
+  if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+  if (typeof document === "undefined") return;
+  const panel = e.currentTarget;
+  const items = Array.from(
+    panel.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+  );
+  if (items.length === 0) return;
+  e.preventDefault();
+  const active = document.activeElement;
+  const current2 = active ? items.indexOf(active) : -1;
+  let next;
+  if (e.key === "Home") next = 0;
+  else if (e.key === "End") next = items.length - 1;
+  else if (e.key === "ArrowDown") next = current2 < 0 ? 0 : (current2 + 1) % items.length;
+  else next = current2 <= 0 ? items.length - 1 : current2 - 1;
+  items[next]?.focus();
+}
+var EDGE = 8;
+function FloatingMenu({
+  open,
+  onClose,
+  anchorRect,
+  anchorEl,
+  gap = 4,
+  minWidth = 200,
+  maxHeight,
+  autoFocus = true,
+  children
+}) {
+  const themeName = useThemeName();
+  const panelRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  const setPanel = useCallback((n) => {
+    panelRef.current = n;
+  }, []);
+  const place = useCallback(() => {
+    if (typeof window === "undefined") return;
+    const a = anchorRect();
+    if (!a) return;
+    const node = panelRef.current;
+    const w = node?.offsetWidth || minWidth;
+    const h = node?.offsetHeight || 0;
+    let left = a.left;
+    let top = a.bottom + gap;
+    if (left + w > window.innerWidth - EDGE) left = Math.max(EDGE, window.innerWidth - w - EDGE);
+    if (h && top + h > window.innerHeight - EDGE) {
+      const above = a.top - gap - h;
+      top = above >= EDGE ? above : Math.max(EDGE, window.innerHeight - h - EDGE);
+    }
+    setPos({ left, top });
+  }, [anchorRect, gap, minWidth]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    place();
+    if (autoFocus) panelRef.current?.focus?.();
+  }, [open, place, autoFocus]);
+  useEffect(() => {
+    if (!open || typeof document === "undefined") return;
+    const onPointerDown = (e) => {
+      const t = e.target;
+      if (panelRef.current?.contains(t)) return;
+      const anchor = anchorEl?.();
+      if (anchor && anchor.contains(t)) return;
+      onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("scroll", onClose, true);
+    window.addEventListener("resize", onClose);
+    window.addEventListener("blur", onClose);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("scroll", onClose, true);
+      window.removeEventListener("resize", onClose);
+      window.removeEventListener("blur", onClose);
+    };
+  }, [open, onClose, anchorEl]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(PortalTheme, { name: themeName, children: /* @__PURE__ */ jsx(
+    MenuPanel,
+    {
+      panelRef: setPanel,
+      minWidth,
+      maxHeight,
+      tabIndex: -1,
+      onKeyDown: (e) => menuKeyDown(e, onClose),
+      style: {
+        position: "fixed",
+        left: pos?.left ?? 0,
+        top: pos?.top ?? 0,
+        zIndex: 1e5,
+        visibility: pos ? "visible" : "hidden"
+      },
+      children
+    }
+  ) }) });
+}
+function ComboBox({
+  value,
+  onChange,
+  options,
+  loading = false,
+  error = null,
+  onRetry,
+  placeholder,
+  disabled,
+  emptyText = "No matches \u2014 press to use what you typed.",
+  minWidth = 240
+}) {
+  const [open, setOpen] = useState(false);
+  const rowRef = useRef(null);
+  const anchorRect = useCallback(() => rowRef.current?.getBoundingClientRect() ?? null, []);
+  const anchorEl = useCallback(() => rowRef.current, []);
+  const filtered = useMemo(() => filterOptions(options, value), [options, value]);
+  const pick = (v) => {
+    onChange(v);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(XStack, { ref: rowRef, items: "center", gap: "$2", minW: minWidth, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          flex: 1,
+          value,
+          onChangeText: (v) => {
+            onChange(v);
+            if (!open) setOpen(true);
+          },
+          onFocus: () => setOpen(true),
+          disabled,
+          placeholder,
+          autoCapitalize: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "$2",
+          chromeless: true,
+          disabled,
+          icon: /* @__PURE__ */ jsx(ChevronDown, { size: 16, opacity: 0.7 }),
+          onPress: () => setOpen((o) => !o),
+          "aria-label": "Show options"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      FloatingMenu,
+      {
+        open,
+        onClose: () => setOpen(false),
+        anchorRect,
+        anchorEl,
+        autoFocus: false,
+        minWidth,
+        maxHeight: 300,
+        children: loading ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [
+          /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$color11" }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "Loading options\u2026" })
+        ] }) : error ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", flex: 1, numberOfLines: 2, children: error }),
+          onRetry ? /* @__PURE__ */ jsx(Button, { size: "$1", chromeless: true, icon: /* @__PURE__ */ jsx(RefreshCw, { size: 12 }), onPress: onRetry, "aria-label": "Retry" }) : null
+        ] }) : filtered.length === 0 ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", px: "$2", py: "$2", children: emptyText }) : filtered.map((o) => /* @__PURE__ */ jsx(
+          MenuItemView,
+          {
+            label: o.label ?? o.value,
+            description: o.hint,
+            selected: o.value === value,
+            onSelect: () => pick(o.value)
+          },
+          o.value
+        ))
+      }
+    )
+  ] });
+}
+var ORDER = ["ai", "console", "app", "chat", "bot", "team", "billing"];
+var SURFACES = ORDER.map((id) => {
+  const s = surfaceById(id);
+  return { id, label: s.label, href: s.href, hint: s.domain };
+});
+function otherSurfaces(current2) {
+  return current2 ? SURFACES.filter((s) => s.id !== current2) : SURFACES;
+}
+function HanzoMark({ size = 22, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 67 67",
+      role: "img",
+      "aria-label": "Hanzo",
+      fill: color,
+      style: { display: "block", flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M22.21 67V44.6369H0V67H22.21Z" }),
+        /* @__PURE__ */ jsx("path", { opacity: 0.55, d: "M0 44.6369L22.21 46.8285V44.6369H0Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M22.21 0H0V22.3184H22.21V0Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M66.7198 0H44.5098V22.3184H66.7198V0Z" }),
+        /* @__PURE__ */ jsx("path", { opacity: 0.55, d: "M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" }),
+        /* @__PURE__ */ jsx("path", { d: "M66.7198 67V44.6369H44.5098V67H66.7198Z" })
+      ]
+    }
+  );
+}
+function BrandMark({
+  size = 20,
+  wordmark = "Hanzo",
+  animated = true
+}) {
+  if (!animated) return /* @__PURE__ */ jsx(HanzoMark, { size });
+  return /* @__PURE__ */ jsx(HanzoLogo, { animated: true, size, wordmark });
+}
+var SURFACE_ICON = {
+  ai: Sparkles,
+  console: LayoutGrid,
+  app: AppWindow,
+  chat: MessageCircle,
+  bot: Bot,
+  team: Users,
+  billing: CreditCard
+};
+var openHref = (href) => {
+  if (typeof window !== "undefined") window.open(href, "_blank", "noopener");
+};
+function MenuRow({ icon, label, onPress }) {
+  return /* @__PURE__ */ jsxs(XStack, { onPress, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: "$color5" }, children: [
+    icon,
+    /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: label })
+  ] });
+}
+function AppHeader({
+  brand,
+  wordmark = "Hanzo",
+  onBrand,
+  org,
+  children,
+  current: current2,
+  surfaces,
+  open,
+  user,
+  menu,
+  theme,
+  onProfile,
+  onTeam,
+  onBilling,
+  onSignOut
+}) {
+  const [appsOpen, setAppsOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const items = surfaces ?? otherSurfaces(current2);
+  const launch = (s) => {
+    setAppsOpen(false);
+    if (open) open(s);
+    else openHref(s.href);
+  };
+  return /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$3", height: 52, borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [
+    /* @__PURE__ */ jsx(XStack, { items: "center", cursor: onBrand ? "pointer" : void 0, onPress: onBrand, children: brand ?? /* @__PURE__ */ jsx(BrandMark, { wordmark }) }),
+    org ? /* @__PURE__ */ jsx(XStack, { items: "center", minW: 0, children: org }) : null,
+    /* @__PURE__ */ jsx(XStack, { flex: 1, items: "center", minW: 0, children }),
+    items.length > 0 ? /* @__PURE__ */ jsxs(Popover, { open: appsOpen, onOpenChange: setAppsOpen, placement: "bottom-end", children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Grip, { size: 16 }), "aria-label": "Apps" }) }),
+      /* @__PURE__ */ jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 230, bg: "$color2", borderColor: "$borderColor", children: /* @__PURE__ */ jsx(YStack, { gap: "$1", children: items.map((s) => {
+        const Icon = SURFACE_ICON[s.id];
+        return /* @__PURE__ */ jsxs(XStack, { onPress: () => launch(s), cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", hoverStyle: { bg: "$color5" }, children: [
+          /* @__PURE__ */ jsx(Icon, { size: 16 }),
+          /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$2", fontWeight: "600", color: "$color12", children: s.label }),
+          s.hint ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: s.hint }) : null
+        ] }, s.id);
+      }) }) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Popover, { open: menuOpen, onOpenChange: setMenuOpen, placement: "bottom-end", children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(UserRound, { size: 16 }), "aria-label": "Account", children: user ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, maxW: 140, children: user }) : null }) }),
+      /* @__PURE__ */ jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 220, bg: "$color2", borderColor: "$borderColor", children: menu ?? /* @__PURE__ */ jsxs(YStack, { gap: "$1", children: [
+        onProfile ? /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(UserRound, { size: 15 }), label: "Profile", onPress: () => (setMenuOpen(false), onProfile()) }) : null,
+        theme !== null ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2.5", px: "$2", py: "$1", rounded: "$3", children: [
+          /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", children: "Theme" }),
+          theme ?? /* @__PURE__ */ jsx(ThemeToggle, {})
+        ] }) : null,
+        onTeam ? /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(Settings2, { size: 15 }), label: "Team settings", onPress: () => (setMenuOpen(false), onTeam()) }) : null,
+        onBilling ? /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(CreditCard, { size: 15 }), label: "Billing", onPress: () => (setMenuOpen(false), onBilling()) }) : null,
+        onSignOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, { borderColor: "$borderColor", my: "$1" }),
+          /* @__PURE__ */ jsx(MenuRow, { icon: /* @__PURE__ */ jsx(LogOut, { size: 15 }), label: "Sign out", onPress: () => (setMenuOpen(false), onSignOut()) })
+        ] }) : null
+      ] }) })
+    ] })
+  ] });
+}
+function monogram(name) {
+  const words = name.trim().split(/[\s._/-]+/).filter(Boolean);
+  const letters = words.slice(0, 2).map((w) => w[0] ?? "").join("");
+  return (letters || name.trim().slice(0, 2)).toUpperCase();
+}
+function OrgMark({ org, size = 22, maxW }) {
+  if (org.logo) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: org.logo,
+        alt: "",
+        style: {
+          height: size,
+          width: maxW ? "auto" : size,
+          maxWidth: maxW ?? size,
+          objectFit: "contain",
+          display: "block",
+          borderRadius: 6,
+          flexShrink: 0
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    YStack,
+    {
+      width: size,
+      height: size,
+      rounded: "$3",
+      bg: "$color4",
+      items: "center",
+      justify: "center",
+      style: { flexShrink: 0 },
+      children: /* @__PURE__ */ jsx(Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color12", children: monogram(org.displayName || org.name) })
+    }
+  );
+}
+
+// src/product/scope.ts
+function browserStorage() {
+  if (typeof window === "undefined") return null;
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+function orgScope(config) {
+  const key = config.key ?? "hanzo.org";
+  const selectedKey = `${key}.selected`;
+  const store = () => config.storage ?? browserStorage();
+  const read = (k) => {
+    try {
+      return store()?.getItem(k) ?? null;
+    } catch {
+      return null;
+    }
+  };
+  const write = (k, v) => {
+    try {
+      if (v === null) store()?.removeItem(k);
+      else store()?.setItem(k, v);
+    } catch {
+    }
+  };
+  const goHome = () => {
+    if (config.navigate) return config.navigate("/");
+    if (typeof window !== "undefined") window.location.assign("/");
+  };
+  const doReload = () => {
+    if (config.reload) return config.reload();
+    if (typeof window !== "undefined") window.location.reload();
+  };
+  const scope = {
+    currentOrg: () => read(key) || config.brandOrg,
+    setCurrentOrg: (org) => write(key, !org || org === config.brandOrg ? null : org),
+    isScopedAway: () => scope.currentOrg() !== config.brandOrg,
+    hasSelectedOrg: () => read(selectedKey) === "1",
+    enterOrg: (org) => {
+      if (!org) return;
+      scope.setCurrentOrg(org);
+      write(selectedKey, "1");
+      goHome();
+    },
+    leaveOrg: () => {
+      write(selectedKey, null);
+      scope.setCurrentOrg(config.brandOrg);
+      goHome();
+    },
+    switchOrg: (org) => {
+      if (!org || org === scope.currentOrg()) return;
+      scope.setCurrentOrg(org);
+      write(selectedKey, "1");
+      doReload();
+    }
+  };
+  return scope;
+}
+function filterOrgs(orgs, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return orgs;
+  return orgs.filter(
+    (o) => o.name.toLowerCase().includes(q) || (o.displayName ?? "").toLowerCase().includes(q)
+  );
+}
+var titleCase = (s) => s ? s[0].toUpperCase() + s.slice(1) : s;
+function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picker = false }) {
+  const currentId = scope.currentOrg();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [debounced, setDebounced] = useState("");
+  const [rows, setRows] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState(null);
+  const pageRef = useRef(0);
+  const reqRef = useRef(0);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(query.trim()), 250);
+    return () => clearTimeout(id);
+  }, [query]);
+  const fetchPage = useCallback(
+    async (page, q, append) => {
+      if (!orgs) return;
+      const token = ++reqRef.current;
+      append ? setLoadingMore(true) : setLoading(true);
+      try {
+        const incoming = await orgs(page, q);
+        if (token !== reqRef.current) return;
+        pageRef.current = page;
+        setRows((prev) => {
+          const merged = append ? [...prev] : [];
+          const seen = new Set(merged.map((o) => o.name));
+          for (const o of incoming) if (!seen.has(o.name)) merged.push(o);
+          return merged;
+        });
+        setHasMore(incoming.length >= pageSize);
+      } catch {
+        if (token !== reqRef.current) return;
+        if (!append) setRows([]);
+        setHasMore(false);
+      } finally {
+        if (token === reqRef.current) {
+          setLoading(false);
+          setLoadingMore(false);
+        }
+      }
+    },
+    [orgs, pageSize]
+  );
+  useEffect(() => {
+    if (!open || !orgs) return;
+    void fetchPage(0, debounced, false);
+  }, [open, debounced, fetchPage, orgs]);
+  const loadMore = useCallback(() => {
+    if (loading || loadingMore || !hasMore) return;
+    void fetchPage(pageRef.current + 1, debounced, true);
+  }, [loading, loadingMore, hasMore, debounced, fetchPage]);
+  const visible = useMemo(() => {
+    if (orgs) return filterOrgs(rows, query);
+    return [{ name: currentId, displayName: titleCase(currentId) }];
+  }, [orgs, rows, query, currentId]);
+  const current2 = useMemo(() => {
+    if (given && given.name === currentId) return given;
+    return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
+  }, [given, rows, currentId]);
+  const currentLabel = current2.displayName || titleCase(current2.name);
+  const select = useCallback(
+    (org) => {
+      setOpen(false);
+      scope.switchOrg(org);
+    },
+    [scope]
+  );
+  const submitCreate = async () => {
+    const name = newName.trim();
+    if (!name || !create) return;
+    setBusy(true);
+    setErr(null);
+    try {
+      const org = await create(name);
+      scope.switchOrg(org);
+    } catch (e) {
+      setErr(e instanceof Error ? e.message : "Could not create the organization.");
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { chromeless: true, height: 44, px: "$2", justify: "flex-start", "aria-label": `${currentLabel} \xB7 switch organization`, children: /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2.5", flex: 1, minW: 0, children: [
+      /* @__PURE__ */ jsx(OrgMark, { org: current2, size: 30 }),
+      /* @__PURE__ */ jsx(Text, { flex: 1, minW: 0, fontSize: "$4", fontWeight: "800", color: "$color12", numberOfLines: 1, children: currentLabel }),
+      /* @__PURE__ */ jsx(ChevronsUpDown, { size: 15, color: "$color9" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Popover.Content, { bordered: true, elevate: true, p: "$2", width: 300, bg: "$color2", borderColor: "$borderColor", children: creating ? /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "700", children: "Create organization" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: "$3",
+          placeholder: "Organization name",
+          value: newName,
+          onChangeText: setNewName,
+          autoCapitalize: "words",
+          onSubmitEditing: () => void submitCreate()
+        }
+      ),
+      err ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$red10", children: err }) : null,
+      /* @__PURE__ */ jsxs(XStack, { gap: "$2", justify: "flex-end", children: [
+        /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, onPress: () => setCreating(false), disabled: busy, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "$2",
+            onPress: () => void submitCreate(),
+            disabled: busy || !newName.trim(),
+            icon: busy ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : /* @__PURE__ */ jsx(Plus, { size: 14 }),
+            children: "Create"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(YStack, { gap: "$1", children: [
+      orgs ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$1", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", children: [
+        /* @__PURE__ */ jsx(Search, { size: 13, opacity: 0.6 }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            flex: 1,
+            size: "$2",
+            borderWidth: 0,
+            bg: "transparent",
+            placeholder: "Find organization\u2026",
+            value: query,
+            onChangeText: setQuery,
+            autoCapitalize: "none",
+            autoCorrect: false
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: { maxHeight: 300, overflowY: "auto", display: "flex", flexDirection: "column" },
+          onScroll: (e) => {
+            const el = e.currentTarget;
+            if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) loadMore();
+          },
+          children: [
+            loading ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$3", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$color11" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "Loading organizations\u2026" })
+            ] }) : visible.length === 0 ? /* @__PURE__ */ jsx(Text, { px: "$2", py: "$2", fontSize: "$2", color: "$color10", children: query.trim() ? `No organizations match \u201C${query.trim()}\u201D.` : "No organizations yet." }) : visible.map((org) => /* @__PURE__ */ jsxs(
+              XStack,
+              {
+                onPress: () => select(org.name),
+                cursor: "pointer",
+                items: "center",
+                gap: "$2.5",
+                px: "$2",
+                py: "$2",
+                rounded: "$3",
+                bg: org.name === currentId ? "$color4" : "transparent",
+                hoverStyle: { bg: "$color5" },
+                children: [
+                  /* @__PURE__ */ jsx(OrgMark, { org }),
+                  /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$2", color: "$color12", numberOfLines: 1, children: org.displayName || org.name }),
+                  org.name === currentId ? /* @__PURE__ */ jsx(Check, { size: 15 }) : null
+                ]
+              },
+              org.name
+            )),
+            loadingMore ? /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", px: "$2", py: "$2", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: "small", color: "$color11" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: "Loading more\u2026" })
+            ] }) : hasMore ? /* @__PURE__ */ jsx(XStack, { onPress: loadMore, cursor: "pointer", items: "center", justify: "center", px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: "$color4" }, children: /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color11", fontWeight: "600", children: "Load more" }) }) : null
+          ]
+        }
+      ),
+      create ? /* @__PURE__ */ jsxs(
+        XStack,
+        {
+          onPress: () => {
+            setCreating(true);
+            setErr(null);
+          },
+          cursor: "pointer",
+          items: "center",
+          gap: "$2.5",
+          px: "$2",
+          py: "$2",
+          mt: "$1",
+          rounded: "$3",
+          borderTopWidth: 1,
+          borderColor: "$borderColor",
+          hoverStyle: { bg: "$color5" },
+          children: [
+            /* @__PURE__ */ jsx(YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: /* @__PURE__ */ jsx(Plus, { size: 14 }) }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: "Create organization" })
+          ]
+        }
+      ) : null,
+      picker ? /* @__PURE__ */ jsxs(
+        XStack,
+        {
+          onPress: () => {
+            setOpen(false);
+            scope.leaveOrg();
+          },
+          cursor: "pointer",
+          items: "center",
+          gap: "$2.5",
+          px: "$2",
+          py: "$2",
+          rounded: "$3",
+          hoverStyle: { bg: "$color5" },
+          children: [
+            /* @__PURE__ */ jsx(YStack, { width: 22, height: 22, rounded: "$3", bg: "$color3", items: "center", justify: "center", children: /* @__PURE__ */ jsx(LayoutGrid, { size: 14 }) }),
+            /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: "All organizations" })
+          ]
+        }
+      ) : null
+    ] }) })
+  ] });
+}
+function DropdownMenu({
+  trigger,
+  items,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  minWidth = 200,
+  maxHeight
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    prop: open,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  const anchorRef = useRef(null);
+  const anchorRect = useCallback(() => anchorRef.current?.getBoundingClientRect() ?? null, []);
+  const anchorEl = useCallback(() => anchorRef.current, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(XStack, { ref: anchorRef, self: "flex-start", cursor: "pointer", onPress: () => setOpen(!isOpen), children: trigger }),
+    /* @__PURE__ */ jsx(
+      FloatingMenu,
+      {
+        open: isOpen,
+        onClose: () => setOpen(false),
+        anchorRect,
+        anchorEl,
+        minWidth,
+        maxHeight,
+        children: renderMenuItems(items, () => setOpen(false))
+      }
+    )
+  ] });
+}
+function ContextMenu({ children, items, disabled, minWidth = 200, maxHeight }) {
+  const [state, setState] = useState({ open: false, x: 0, y: 0 });
+  const close = useCallback(() => setState((s) => s.open ? { ...s, open: false } : s), []);
+  const anchorRect = useCallback(
+    () => ({ left: state.x, top: state.y, right: state.x, bottom: state.y, width: 0, height: 0 }),
+    [state.x, state.y]
+  );
+  const childOnContextMenu = children.props.onContextMenu;
+  const target = cloneElement(children, {
+    onContextMenu: (e) => {
+      childOnContextMenu?.(e);
+      if (disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setState({ open: true, x: e.clientX, y: e.clientY });
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    target,
+    /* @__PURE__ */ jsx(FloatingMenu, { open: state.open, onClose: close, anchorRect, gap: 0, minWidth, maxHeight, children: renderMenuItems(items, close) })
+  ] });
+}
+var isExternal = (href) => /^https?:\/\//.test(href);
+var defaultLink = ({ href, children, onNavigate }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    href,
+    onClick: onNavigate,
+    ...isExternal(href) ? { target: "_blank", rel: "noopener noreferrer" } : null,
+    style: { textDecoration: "none", color: "inherit", display: "block" },
+    children
+  }
+);
+function ProductCell({ product, link, icon, close }) {
+  const glyph = icon?.(product.id);
+  return /* @__PURE__ */ jsx(YStack, { minW: 200, flex: 1, flexBasis: 200, children: link({
+    href: product.url,
+    onNavigate: close,
+    children: /* @__PURE__ */ jsxs(XStack, { gap: "$2.5", items: "flex-start", p: "$2.5", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: "$color4" }, children: [
+      glyph ? /* @__PURE__ */ jsx(YStack, { pt: "$0.5", children: glyph }) : null,
+      /* @__PURE__ */ jsxs(YStack, { minW: 0, gap: "$0.5", children: [
+        product.verb ? /* @__PURE__ */ jsx(Text, { fontSize: 11, color: "$color10", textTransform: "uppercase", letterSpacing: 0.4, children: product.verb }) : null,
+        /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: product.name }),
+        /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", lineHeight: 16, children: product.job })
+      ] })
+    ] })
+  }) });
+}
+function Column({ title, links, link, icon, close }) {
+  return /* @__PURE__ */ jsxs(YStack, { minW: 160, flex: 1, gap: "$1", children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: 11, color: "$color10", textTransform: "uppercase", letterSpacing: 0.5, px: "$2", pb: "$1", children: title }),
+    links.map((l) => /* @__PURE__ */ jsxs(XStack, { px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: "$color4" }, gap: "$2", items: "center", children: [
+      icon?.(l.id) ?? null,
+      link({
+        href: l.href,
+        onNavigate: close,
+        children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: l.label })
+      })
+    ] }, l.id))
+  ] });
+}
+function Launcher({ menu, link, icon, close }) {
+  return /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      position: "absolute",
+      t: 52,
+      l: 0,
+      r: 0,
+      z: 50,
+      bg: "$background",
+      borderBottomWidth: 1,
+      borderColor: "$borderColor",
+      px: "$4",
+      py: "$4",
+      gap: "$3",
+      maxH: "80vh",
+      overflow: "scroll",
+      children: [
+        /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: menu.eyebrow }),
+          /* @__PURE__ */ jsx(XStack, { ml: "auto", children: link({
+            href: menu.allProducts.href,
+            onNavigate: close,
+            children: /* @__PURE__ */ jsxs(Text, { fontSize: "$2", color: "$color12", children: [
+              menu.allProducts.label,
+              " \u2192"
+            ] })
+          }) })
+        ] }),
+        /* @__PURE__ */ jsx(XStack, { gap: "$2.5", flexWrap: "wrap", children: menu.products.map((p) => /* @__PURE__ */ jsx(ProductCell, { product: p, link, icon, close }, p.id)) }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs(XStack, { gap: "$4", flexWrap: "wrap", items: "flex-start", children: [
+          /* @__PURE__ */ jsx(Column, { title: "Platform", links: menu.utilities, link, icon, close }),
+          /* @__PURE__ */ jsx(Column, { title: "Install", links: menu.installs, link, icon, close })
+        ] })
+      ]
+    }
+  );
+}
+function Cta({ action, link }) {
+  return /* @__PURE__ */ jsx(XStack, { bg: "$color12", px: "$3", py: "$1.5", rounded: "$3", hoverStyle: { opacity: 0.9 }, children: link({
+    href: action.href,
+    children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$background", children: action.label })
+  }) });
+}
+function MobilePanel({ header, menu, link, icon, close }) {
+  return /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      position: "absolute",
+      t: 52,
+      l: 0,
+      r: 0,
+      z: 50,
+      bg: "$background",
+      borderBottomWidth: 1,
+      borderColor: "$borderColor",
+      px: "$3",
+      py: "$3",
+      gap: "$3",
+      maxH: "80vh",
+      overflow: "scroll",
+      children: [
+        /* @__PURE__ */ jsx(YStack, { gap: "$1", children: header.localNav.map((l) => /* @__PURE__ */ jsx(XStack, { px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: "$color4" }, children: link({
+          href: l.href,
+          onNavigate: close,
+          children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: l.label })
+        }) }, l.id)) }),
+        menu ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx(YStack, { gap: "$1", children: menu.products.map((p) => /* @__PURE__ */ jsxs(XStack, { px: "$2", py: "$1.5", rounded: "$3", hoverStyle: { bg: "$color4" }, gap: "$2", items: "center", children: [
+            icon?.(p.id) ?? null,
+            link({
+              href: p.url,
+              onNavigate: close,
+              children: /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: p.name })
+            })
+          ] }, p.id)) }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx(Column, { title: "Platform", links: menu.utilities, link, icon, close }),
+          /* @__PURE__ */ jsx(Column, { title: "Install", links: menu.installs, link, icon, close })
+        ] }) : null
+      ]
+    }
+  );
+}
+function SiteNav({ header, menu, brand, actions, link = defaultLink, icon, active, meetLabel = "Meet Hanzo" }) {
+  const [launcher, setLauncher] = useState(false);
+  const [mobile, setMobile] = useState(false);
+  const root = useRef(null);
+  useEffect(() => {
+    if (!launcher && !mobile) return;
+    const dismiss = () => {
+      setLauncher(false);
+      setMobile(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") dismiss();
+    };
+    const onDown = (e) => {
+      if (root.current && !root.current.contains(e.target)) dismiss();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", onDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", onDown);
+    };
+  }, [launcher, mobile]);
+  return /* @__PURE__ */ jsxs(YStack, { ref: root, position: "relative", bg: "$background", children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$1", px: "$3", height: 52, borderBottomWidth: 1, borderColor: "$borderColor", children: [
+      brand ? /* @__PURE__ */ jsx(XStack, { items: "center", pr: "$2", children: brand }) : null,
+      menu ? /* @__PURE__ */ jsx(
+        XStack,
+        {
+          cursor: "pointer",
+          px: "$2.5",
+          py: "$1.5",
+          rounded: "$3",
+          bg: launcher ? "$color4" : "transparent",
+          hoverStyle: { bg: "$color4" },
+          onPress: () => setLauncher(!launcher),
+          accessibilityRole: "button",
+          "aria-expanded": launcher,
+          children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: meetLabel })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(XStack, { items: "center", gap: "$0.5", flex: 1, minW: 0, $sm: { display: "none" }, children: header.localNav.map((l) => /* @__PURE__ */ jsx(
+        XStack,
+        {
+          px: "$2.5",
+          py: "$1.5",
+          rounded: "$3",
+          hoverStyle: { bg: "$color4" },
+          onMouseEnter: () => launcher && setLauncher(false),
+          children: link({
+            href: l.href,
+            children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: active === l.id ? "$color12" : "$color11", children: l.label })
+          })
+        },
+        l.id
+      )) }),
+      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", ml: "auto", children: [
+        actions,
+        /* @__PURE__ */ jsx(Cta, { action: header.action, link }),
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            display: "none",
+            $sm: { display: "flex" },
+            cursor: "pointer",
+            px: "$2",
+            py: "$1.5",
+            rounded: "$3",
+            hoverStyle: { bg: "$color4" },
+            onPress: () => setMobile(!mobile),
+            accessibilityRole: "button",
+            "aria-label": mobile ? "Close menu" : "Open menu",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", children: mobile ? "Close" : "Menu" })
+          }
+        )
+      ] })
+    ] }),
+    launcher && menu ? /* @__PURE__ */ jsx(Launcher, { menu, link, icon, close: () => setLauncher(false) }) : null,
+    mobile ? /* @__PURE__ */ jsx(MobilePanel, { header, menu, link, icon, close: () => setMobile(false) }) : null
+  ] });
+}
+var isExternal2 = (href) => /^https?:\/\//.test(href);
+var defaultLink2 = ({ href, children }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    href,
+    ...isExternal2(href) ? { target: "_blank", rel: "noopener noreferrer" } : null,
+    style: { textDecoration: "none", color: "inherit" },
+    children
+  }
+);
+function SiteFooter({ footer, brand, tagline, meta, link = defaultLink2 }) {
+  return /* @__PURE__ */ jsxs(YStack, { borderTopWidth: 1, borderColor: "$borderColor", bg: "$background", px: "$4", py: "$5", gap: "$4", children: [
+    /* @__PURE__ */ jsxs(XStack, { gap: "$5", flexWrap: "wrap", items: "flex-start", children: [
+      brand || tagline ? /* @__PURE__ */ jsxs(YStack, { gap: "$2", minW: 200, flex: 1, children: [
+        brand,
+        tagline ? /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", lineHeight: 18, maxW: 280, children: tagline }) : null
+      ] }) : null,
+      footer.columns.map((column) => /* @__PURE__ */ jsxs(YStack, { gap: "$1.5", minW: 140, children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 11, color: "$color10", textTransform: "uppercase", letterSpacing: 0.5, pb: "$1", children: column.title }),
+        column.links.map((l) => /* @__PURE__ */ jsx(XStack, { hoverStyle: { opacity: 0.7 }, children: link({
+          href: l.href,
+          children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: l.label })
+        }) }, l.id))
+      ] }, column.id))
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", children: footer.legal.copyright }),
+      /* @__PURE__ */ jsx(XStack, { items: "center", gap: "$3", flexWrap: "wrap", children: footer.legal.links.map((l) => /* @__PURE__ */ jsx(XStack, { hoverStyle: { opacity: 0.7 }, children: link({
+        href: l.href,
+        children: /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "$color10", children: l.label })
+      }) }, l.id)) }),
+      meta ? /* @__PURE__ */ jsx(XStack, { ml: "auto", items: "center", gap: "$3", children: meta }) : null
+    ] })
+  ] });
+}
+var HostCtx = createContext({});
+var HostProvider = ({ actions, children }) => /* @__PURE__ */ jsx(HostCtx.Provider, { value: actions, children });
+var useHost = () => useContext(HostCtx);
+function classifyBackend(e) {
+  const status = typeof e?.status === "number" ? e.status : 0;
+  const message = e instanceof Error ? e.message : String(e);
+  if (status === 503) return { kind: "not-initialized", message };
+  if (status === 404 || status === 405) return { kind: "unavailable", message };
+  if (status === 501) return { kind: "not-implemented", message };
+  if (status === 402) return { kind: "billing", message };
+  if (status === 401) return { kind: "signin", message };
+  if (status === 403) return { kind: "access", message };
+  return { kind: "error", message };
+}
+function classifyRead(e) {
+  const s = classifyBackend(e);
+  return s.kind === "billing" ? null : s;
+}
+var TITLES = {
+  "not-initialized": "Backend not initialized",
+  unavailable: "Not available on this deployment yet",
+  "not-implemented": "Not yet available",
+  access: "Not enabled for your account",
+  signin: "Your session expired",
+  billing: "Add credits to continue",
+  error: "Could not reach the backend"
+};
+var BODIES = {
+  "not-initialized": "The /v1 route is mounted but its runtime (or the console API key it proxies to) is not configured on this deployment yet. Real data appears here once it is \u2014 no placeholder data is shown.",
+  unavailable: "This endpoint is not mounted at the gateway on this host yet. The view lights up automatically once the route is live.",
+  // 501 — a real, planned capability whose body ships in a later phase.
+  "not-implemented": "This capability is planned but not wired yet. The backend answers honestly rather than pretending it worked \u2014 nothing here is fabricated, and the view lights up automatically once it ships.",
+  // 403 for a SIGNED-IN user — never "sign in".
+  access: "You're signed in, but this isn't enabled for your organization on this deployment, or it's an admin-only surface. It appears here automatically once your account has access \u2014 nothing is fabricated.",
+  // 401 — the session itself lapsed; re-auth returns to this exact page.
+  signin: "Your session has expired or isn\u2019t recognized here. Sign in again to continue where you left off.",
+  // Empty → the card shows the backend's own message (the honest "Insufficient
+  // balance. Please add credits…" from the gateway billing gate).
+  billing: "",
+  error: ""
+};
+function BackendStateCard({
+  state,
+  onRetry,
+  hint
+}) {
+  const { signIn, addCredits } = useHost();
+  return /* @__PURE__ */ jsxs(Card, { borderWidth: 1, borderColor: "$borderColor", p: "$4", gap: "$2", maxWidth: 640, children: [
+    /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", children: [
+      /* @__PURE__ */ jsx(TriangleAlert, { size: 16 }),
+      /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "700", children: TITLES[state.kind] })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", children: BODIES[state.kind] || state.message }),
+    hint ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: hint }) : null,
+    state.kind === "signin" && signIn ? /* @__PURE__ */ jsx(Button, { size: "$2", theme: "light", self: "flex-start", onPress: signIn, children: "Sign in again" }) : state.kind === "billing" && addCredits ? (
+      // 402 — the org has no funded balance. Offer a top-up CTA (and keep Retry so
+      // a returning, funded caller can reload in place).
+      /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", children: [
+        /* @__PURE__ */ jsx(Button, { size: "$2", theme: "light", self: "flex-start", icon: /* @__PURE__ */ jsx(CreditCard, { size: 14 }), onPress: addCredits, children: "Add credits" }),
+        onRetry ? /* @__PURE__ */ jsx(Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" }) : null
+      ] })
+    ) : onRetry ? /* @__PURE__ */ jsx(Button, { size: "$2", self: "flex-start", onPress: onRetry, children: "Retry" }) : null
+  ] });
+}
+function PageHeader({
+  title,
+  subtitle,
+  actions
+}) {
+  return (
+    // flexWrap lets the actions drop below the title on narrow screens; flex={1}
+    // minW={0} lets the title column shrink so a long subtitle WRAPS instead of
+    // running off the viewport (a flex child defaults to min-width:auto = content
+    // width, which would overflow on mobile).
+    /* @__PURE__ */ jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$3", flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsxs(YStack, { gap: "$1", flex: 1, minW: 200, children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "$7", fontWeight: "500", letterSpacing: -0.4, children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", children: subtitle }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsx(XStack, { gap: "$2", items: "center", flexWrap: "wrap", width: "100%", $md: { width: "auto", justify: "flex-end" }, children: actions }) : null
+    ] })
+  );
+}
+function SkeletonRows({ columns, count = 6 }) {
+  return /* @__PURE__ */ jsx(YStack, { children: Array.from({ length: count }).map((_, r) => /* @__PURE__ */ jsx(XStack, { py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", children: columns.map((c, i) => /* @__PURE__ */ jsx(YStack, { width: c.width, flex: c.width ? void 0 : 1, minW: c.width ? void 0 : FLEX_MIN_COL_W, items: c.align === "right" ? "flex-end" : "flex-start", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "hz-skeleton",
+      style: { height: 12, borderRadius: 6, width: `${[62, 40, 54, 34, 48][(i + r) % 5]}%` },
+      "aria-hidden": true
+    }
+  ) }, c.key)) }, r)) });
+}
+function DataTable({
+  columns,
+  rows,
+  loading,
+  empty = "Nothing here yet.",
+  rowKey,
+  onRowPress,
+  isRowExpanded,
+  renderExpanded,
+  sort,
+  onSortChange
+}) {
+  const minTableW = columns.reduce((sum, c) => sum + (c.width ?? FLEX_MIN_COL_W), 0) + (columns.length + 1) * 12;
+  return /* @__PURE__ */ jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx(YStack, { style: { overflowX: "auto", overflowY: "visible" }, children: /* @__PURE__ */ jsxs(YStack, { minW: minTableW, children: [
+      /* @__PURE__ */ jsx(XStack, { bg: "$color1", py: "$2.5", px: "$3", gap: "$3", borderBottomWidth: 1, borderColor: "$borderColor", role: "row", children: columns.map((c) => {
+        const sortable = c.sortable === true && !!onSortChange;
+        const active = sortable && sort?.key === c.key;
+        const Caret = !sortable ? null : !active ? ChevronsUpDown : sort?.dir === "asc" ? ChevronUp : ChevronDown;
+        return /* @__PURE__ */ jsxs(
+          XStack,
+          {
+            width: c.width,
+            flex: c.width ? void 0 : 1,
+            minW: c.width ? void 0 : FLEX_MIN_COL_W,
+            items: "center",
+            gap: "$1",
+            justify: c.align === "right" ? "flex-end" : "flex-start",
+            role: "columnheader",
+            "aria-sort": sortable ? active ? sort?.dir === "asc" ? "ascending" : "descending" : "none" : void 0,
+            "aria-label": sortable ? `Sort by ${c.header}` : void 0,
+            cursor: sortable ? "pointer" : void 0,
+            hoverStyle: sortable ? { opacity: 0.75 } : void 0,
+            onPress: sortable ? () => onSortChange?.(c.key) : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  fontSize: "$1",
+                  fontWeight: "500",
+                  color: active ? "$color12" : "$color10",
+                  text: c.align === "right" ? "right" : "left",
+                  className: c.mono ? "hz-tnum" : void 0,
+                  children: c.header
+                }
+              ),
+              Caret ? /* @__PURE__ */ jsx(Caret, { size: 12, color: active ? "$color12" : "$color9" }) : null
+            ]
+          },
+          c.key
+        );
+      }) }),
+      loading ? /* @__PURE__ */ jsx(SkeletonRows, { columns }) : rows.length > 0 ? /* @__PURE__ */ jsx(YStack, { children: rows.map((row) => {
+        const expanded = (isRowExpanded?.(row) ?? false) && !!renderExpanded;
+        return /* @__PURE__ */ jsxs(YStack, { children: [
+          /* @__PURE__ */ jsx(
+            XStack,
+            {
+              className: "hz-row",
+              py: "$2.5",
+              px: "$3",
+              gap: "$3",
+              borderTopWidth: 1,
+              borderColor: "$borderColor",
+              items: "center",
+              bg: expanded ? "$color2" : void 0,
+              hoverStyle: onRowPress ? { bg: "$color2" } : void 0,
+              cursor: onRowPress ? "pointer" : void 0,
+              onPress: onRowPress ? () => onRowPress(row) : void 0,
+              children: columns.map((c) => {
+                const cell = c.render ? c.render(row) : String(row[c.key] ?? "");
+                return /* @__PURE__ */ jsx(
+                  YStack,
+                  {
+                    width: c.width,
+                    flex: c.width ? void 0 : 1,
+                    minW: c.width ? void 0 : FLEX_MIN_COL_W,
+                    justify: "center",
+                    items: c.align === "right" ? "flex-end" : "flex-start",
+                    children: typeof cell === "string" || typeof cell === "number" ? /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        fontSize: "$3",
+                        numberOfLines: 1,
+                        color: "$color12",
+                        text: c.align === "right" ? "right" : "left",
+                        className: c.mono ? "hz-mono" : void 0,
+                        children: cell
+                      }
+                    ) : cell
+                  },
+                  c.key
+                );
+              })
+            }
+          ),
+          expanded && renderExpanded ? /* @__PURE__ */ jsx(YStack, { borderTopWidth: 1, borderColor: "$borderColor", bg: "$color1", children: renderExpanded(row) }) : null
+        ] }, rowKey(row));
+      }) }) : null
+    ] }) }),
+    !loading && rows.length === 0 ? /* @__PURE__ */ jsx(YStack, { py: "$8", px: "$4", items: "center", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: /* @__PURE__ */ jsx(Text, { color: "$color10", fontSize: "$3", text: "center", children: empty }) }) : null
+  ] });
+}
+var FLEX_MIN_COL_W = 120;
+function CommerceResource({
+  title,
+  subtitle,
+  load,
+  columns,
+  rowKey,
+  empty,
+  hint,
+  actions
+}) {
+  const [state, setState] = useState({ phase: "loading" });
+  const loadRef = useRef(load);
+  loadRef.current = load;
+  const reload = useCallback(() => {
+    setState({ phase: "loading" });
+    loadRef.current().then((r) => setState({ phase: "ready", data: r.rows })).catch((e) => setState({ phase: "error", error: classifyBackend(e) }));
+  }, []);
+  useEffect(() => {
+    reload();
+  }, [reload]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title,
+        subtitle,
+        actions: /* @__PURE__ */ jsxs(XStack, { gap: "$2", children: [
+          actions?.(reload),
+          /* @__PURE__ */ jsx(Button, { size: "$2", icon: /* @__PURE__ */ jsx(RefreshCw, { size: 15 }), onPress: reload, children: "Refresh" })
+        ] })
+      }
+    ),
+    state.phase === "error" ? /* @__PURE__ */ jsx(BackendStateCard, { state: state.error, onRetry: reload, hint }) : /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        columns,
+        rows: state.phase === "ready" ? state.data : [],
+        loading: state.phase === "loading",
+        rowKey,
+        empty
+      }
+    )
+  ] });
+}
+function ConfirmDelete({
+  message,
+  confirmLabel,
+  run,
+  onDone
+}) {
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState(null);
+  const go = async () => {
+    setBusy(true);
+    setErr(null);
+    try {
+      await run();
+      onDone();
+    } catch (e) {
+      setErr(classifyBackend(e).message || "Failed to delete.");
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$3", children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", children: message }),
+    err ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$red10", children: err }) : null,
+    /* @__PURE__ */ jsxs(XStack, { gap: "$2", flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onPress: go,
+          disabled: busy,
+          icon: /* @__PURE__ */ jsx(Trash2, { size: 15 }),
+          style: { backgroundColor: "#dc2626", borderColor: "#dc2626", color: "#fff" },
+          children: busy ? "Deleting\u2026" : confirmLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { chromeless: true, onPress: () => onDone(), disabled: busy, children: "Cancel" })
+    ] })
+  ] });
+}
+function Segmented({
+  options,
+  value,
+  onChange,
+  size = "$2"
+}) {
+  return /* @__PURE__ */ jsx(XStack, { gap: "$1", flexWrap: "wrap", items: "center", children: options.map((o) => {
+    const active = o.value === value;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        size,
+        bg: active ? "$color5" : "transparent",
+        borderWidth: 1,
+        borderColor: active ? "$color7" : "$borderColor",
+        "aria-pressed": active,
+        onPress: () => onChange(o.value),
+        children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", fontWeight: active ? "700" : "500", color: active ? "$color12" : "$color11", children: o.label })
+      },
+      o.value
+    );
+  }) });
+}
+function SearchInput({ value, onChange, placeholder }) {
+  return /* @__PURE__ */ jsxs(XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$color1", children: [
+    /* @__PURE__ */ jsx(Search, { size: 15, color: "$color10" }),
+    /* @__PURE__ */ jsx(Input, { flex: 1, value, onChangeText: onChange, placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })
+  ] });
+}
+
+// src/product/brand.ts
+var HANZO_MARK_CONTENT = '<path d="M22.21 67V44.6369H0V67H22.21Z"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"/><path d="M22.21 0H0V22.3184H22.21V0Z"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z"/>';
+var HANZO = {
+  id: "hanzo",
+  name: "Hanzo",
+  viewBox: "0 0 67 67",
+  content: HANZO_MARK_CONTENT,
+  href: "https://hanzo.ai"
+};
+var LUX = {
+  id: "lux",
+  name: "Lux",
+  viewBox: "0 0 100 100",
+  content: '<path d="M50 85 L15 25 L85 25 Z"/>',
+  href: "https://lux.network"
+};
+var ZOO = {
+  id: "zoo",
+  name: "Zoo",
+  viewBox: "0 0 1024 1024",
+  fullColor: true,
+  content: '<defs><clipPath id="zooClip"><circle cx="512" cy="511" r="270"/></clipPath><clipPath id="zooGClip"><circle cx="513" cy="369" r="234"/></clipPath><clipPath id="zooRClip"><circle cx="365" cy="595" r="234"/></clipPath></defs><g clip-path="url(#zooClip)"><circle cx="513" cy="369" r="234" fill="#00A652"/><circle cx="365" cy="595" r="234" fill="#ED1C24"/><circle cx="643" cy="595" r="234" fill="#2E3192"/><g clip-path="url(#zooGClip)"><circle cx="365" cy="595" r="234" fill="#FCF006"/><circle cx="643" cy="595" r="234" fill="#01ACF1"/></g><g clip-path="url(#zooRClip)"><circle cx="643" cy="595" r="234" fill="#EA018E"/></g><g clip-path="url(#zooGClip)"><g clip-path="url(#zooRClip)"><circle cx="643" cy="595" r="234" fill="#FFFFFF"/></g></g></g>',
+  href: "https://zoo.ngo"
+};
+var PARS = {
+  id: "pars",
+  name: "Pars",
+  viewBox: "-120 -120 240 240",
+  content: '<path d="M0,-100 L30,-60 L100,-40 L60,0 L100,40 L30,60 L0,100 L-30,60 L-100,40 L-60,0 L-100,-40 L-30,-60 Z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M0,-70 L22,-42 L70,-28 L42,0 L70,28 L22,42 L0,70 L-22,42 L-70,28 L-42,0 L-70,-28 L-22,-42 Z" fill="currentColor" fill-opacity="0.15" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><circle r="55" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4"/><circle r="35" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4"/><circle r="8" fill="currentColor"/>',
+  href: "https://pars.network"
+};
+var BRANDS = { hanzo: HANZO, lux: LUX, zoo: ZOO, pars: PARS };
+function resolveBrand(id) {
+  return id && BRANDS[id] || HANZO;
+}
+
+// src/product/animatedLogo.logic.ts
+var HOUSE_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";
+var DEFAULT_DURATION_MS = 360;
+var DEFAULT_INTRO_MS = 1500;
+var DEFAULT_GAP = 8;
+function wordmarkText(name, surface) {
+  const s = surface?.trim();
+  return s ? `${name} ${s}` : name;
+}
+function isExpanded(s) {
+  return s.hovered || s.focused || s.introShowing;
+}
+function wordmarkStyle(i) {
+  return {
+    width: i.expanded ? i.naturalWidth ?? "auto" : 0,
+    opacity: i.expanded ? 1 : 0,
+    marginLeft: i.expanded ? i.gap : 0,
+    transition: i.reduce ? "none" : `width ${i.durationMs}ms ${i.easing}, opacity ${i.durationMs}ms ${i.easing}, margin-left ${i.durationMs}ms ${i.easing}`
+  };
+}
+function usePrefersReducedMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setReduce(mq.matches);
+    sync();
+    mq.addEventListener("change", sync);
+    return () => mq.removeEventListener("change", sync);
+  }, []);
+  return reduce;
+}
+function AnimatedLogo({
+  surface,
+  brand = HANZO,
+  size = 22,
+  gap = DEFAULT_GAP,
+  introMs = DEFAULT_INTRO_MS,
+  durationMs = DEFAULT_DURATION_MS,
+  easing = HOUSE_EASE,
+  href,
+  onClick,
+  component,
+  className,
+  style,
+  "aria-label": ariaLabel
+}) {
+  const reduce = usePrefersReducedMotion();
+  const label = ariaLabel ?? wordmarkText(brand.name, surface);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [introShowing, setIntroShowing] = useState(introMs > 0);
+  const [naturalWidth, setNaturalWidth] = useState(void 0);
+  const wordRef = useRef(null);
+  useEffect(() => {
+    if (introMs <= 0) return;
+    if (reduce) {
+      setIntroShowing(false);
+      return;
+    }
+    const t = setTimeout(() => setIntroShowing(false), introMs);
+    return () => clearTimeout(t);
+  }, [introMs, reduce]);
+  useLayoutEffect(() => {
+    const el = wordRef.current;
+    if (!el) return;
+    const measure = () => setNaturalWidth(el.scrollWidth);
+    measure();
+    const fonts = typeof document !== "undefined" && document.fonts || null;
+    if (fonts?.ready) fonts.ready.then(measure).catch(() => {
+    });
+  }, [brand.name, surface]);
+  const expanded = isExpanded({ hovered, focused, introShowing });
+  const ws = wordmarkStyle({ expanded, naturalWidth, gap, durationMs, easing, reduce });
+  const Root = component ?? "a";
+  const isAnchor = Root === "a";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ...isAnchor ? { href: href ?? brand.href ?? "/" } : { href: href ?? brand.href },
+      onClick,
+      "aria-label": label,
+      title: label,
+      className,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        textDecoration: "none",
+        color: "inherit",
+        cursor: "pointer",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: size,
+            height: size,
+            viewBox: brand.viewBox,
+            "aria-hidden": "true",
+            focusable: "false",
+            fill: brand.fullColor ? void 0 : "currentColor",
+            style: { display: "block", flexShrink: 0 },
+            dangerouslySetInnerHTML: { __html: brand.content }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: wordRef,
+            "aria-hidden": "true",
+            style: {
+              display: "inline-block",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              fontWeight: 600,
+              fontSize: 15,
+              letterSpacing: "-0.01em",
+              lineHeight: 1,
+              width: ws.width,
+              opacity: ws.opacity,
+              marginLeft: ws.marginLeft,
+              transition: ws.transition
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function isHexColor(v) {
+  return typeof v === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v.trim());
+}
+function resolveAccent(theme) {
+  if (!theme || !theme.isEnabled) return null;
+  const hex = (theme.colorPrimary ?? "").trim();
+  return isHexColor(hex) ? hex : null;
+}
+function expandHex(hex) {
+  const h = hex.trim().toLowerCase();
+  if (h.length === 4) return `#${h[1]}${h[1]}${h[2]}${h[2]}${h[3]}${h[3]}`;
+  return h;
+}
+function contrastText(hex) {
+  if (!isHexColor(hex)) return "#ffffff";
+  const h = expandHex(hex);
+  const r = parseInt(h.slice(1, 3), 16) / 255;
+  const g = parseInt(h.slice(3, 5), 16) / 255;
+  const b = parseInt(h.slice(5, 7), 16) / 255;
+  const lin = (c) => c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  const luminance = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+function accentFor(theme) {
+  const hex = resolveAccent(theme);
+  return { accent: hex, contrast: hex ? contrastText(hex) : "#ffffff" };
+}
+var DEFAULT = { accent: null, contrast: "#ffffff" };
+var current = DEFAULT;
+var listeners = /* @__PURE__ */ new Set();
+function setOrgAccent(theme) {
+  const next = accentFor(theme);
+  if (next.accent === current.accent) return;
+  current = next.accent ? next : DEFAULT;
+  for (const l of listeners) l();
+}
+function subscribe(cb) {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+}
+function useAccent() {
+  return useSyncExternalStore(
+    subscribe,
+    () => current,
+    () => DEFAULT
+  );
+}
+function PrimaryButton(props) {
+  const { accent, contrast } = useAccent();
+  if (accent) {
+    return /* @__PURE__ */ jsx(Button, { style: { backgroundColor: accent, color: contrast, borderColor: accent }, ...props });
+  }
+  return /* @__PURE__ */ jsx(Button, { theme: "light", ...props });
+}
+function openHref2(href) {
+  if (typeof window !== "undefined") window.open(href, "_blank", "noopener");
+}
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  bullets,
+  primary,
+  secondary
+}) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderStyle: "dashed",
+      p: "$6",
+      gap: "$4",
+      items: "center",
+      maxWidth: 640,
+      self: "center",
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsx(
+          YStack,
+          {
+            width: 48,
+            height: 48,
+            items: "center",
+            justify: "center",
+            rounded: "$4",
+            bg: "$color3",
+            children: /* @__PURE__ */ jsx(Icon, { size: 24 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(YStack, { gap: "$2", items: "center", maxW: 480, children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "$6", fontWeight: "500", text: "center", letterSpacing: -0.3, children: title }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", text: "center", children: description })
+        ] }),
+        bullets && bullets.length ? /* @__PURE__ */ jsx(YStack, { gap: "$2", self: "stretch", maxW: 420, mx: "auto", children: bullets.map((b) => /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "flex-start", children: [
+          /* @__PURE__ */ jsx(YStack, { pt: "$1", children: /* @__PURE__ */ jsx(Check, { size: 14, color: "$color10" }) }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color11", flex: 1, children: b })
+        ] }, b)) }) : null,
+        primary || secondary ? /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", flexWrap: "wrap", justify: "center", children: [
+          primary ? /* @__PURE__ */ jsx(
+            PrimaryButton,
+            {
+              icon: primary.icon,
+              iconAfter: primary.href ? /* @__PURE__ */ jsx(ExternalLink, { size: 15 }) : /* @__PURE__ */ jsx(ArrowRight, { size: 15 }),
+              onPress: () => primary.href ? openHref2(primary.href) : primary.onPress?.(),
+              children: primary.label
+            }
+          ) : null,
+          secondary ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              chromeless: true,
+              icon: secondary.icon,
+              iconAfter: secondary.href ? /* @__PURE__ */ jsx(ExternalLink, { size: 14 }) : void 0,
+              onPress: () => secondary.href ? openHref2(secondary.href) : secondary.onPress?.(),
+              children: secondary.label
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function FadeIn({
+  children,
+  index = 0,
+  step = 50,
+  delayMs,
+  style
+}) {
+  const delay = delayMs ?? index * step;
+  return /* @__PURE__ */ jsx("div", { className: "hz-fade-up", style: { animationDelay: `${delay}ms`, ...style }, children });
+}
+function FieldRow({ label, children }) {
+  return /* @__PURE__ */ jsxs(XStack, { gap: "$3", items: "flex-start", flexWrap: "wrap", children: [
+    /* @__PURE__ */ jsx(Label, { width: "100%", pt: "$2", color: "$color11", fontSize: "$3", $md: { width: 180 }, children: label }),
+    /* @__PURE__ */ jsx(YStack, { flex: 1, minW: 0, $md: { minW: 240 }, children })
+  ] });
+}
+function FieldText({
+  value,
+  onChange,
+  disabled,
+  secure,
+  placeholder
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      value,
+      onChangeText: onChange,
+      disabled,
+      secureTextEntry: secure,
+      placeholder,
+      autoCapitalize: "none"
+    }
+  );
+}
+function FieldTextArea({
+  value,
+  onChange,
+  disabled,
+  rows = 6
+}) {
+  return /* @__PURE__ */ jsx(TextArea, { value, onChangeText: onChange, disabled, numberOfLines: rows });
+}
+function FieldSwitch({
+  checked,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx(Switch, { checked, onCheckedChange: onChange, disabled, size: "$3", children: /* @__PURE__ */ jsx(Switch.Thumb, {}) });
+}
+var CHEVRON = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9a9a9a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'
+)}`;
+function selectStyle(disabled) {
+  return {
+    width: "100%",
+    boxSizing: "border-box",
+    appearance: "none",
+    WebkitAppearance: "none",
+    MozAppearance: "none",
+    background: `var(--background) url("${CHEVRON}") no-repeat right 10px center`,
+    color: "var(--color12)",
+    border: "1px solid var(--borderColor)",
+    borderRadius: 9,
+    padding: "9px 34px 9px 12px",
+    fontSize: 14,
+    lineHeight: "20px",
+    fontFamily: "inherit",
+    height: 40,
+    outline: "none",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1
+  };
+}
+var OPTION_STYLE = { background: "var(--color2)", color: "var(--color12)" };
+function FieldSelect({
+  value,
+  options,
+  onChange,
+  disabled,
+  placeholder = "Select\u2026"
+}) {
+  const showPlaceholder = value === "" || !options.includes(value);
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      value: showPlaceholder ? "" : value,
+      onChange: (e) => onChange(e.currentTarget.value),
+      disabled,
+      "aria-label": placeholder,
+      style: selectStyle(disabled),
+      children: [
+        showPlaceholder ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, style: OPTION_STYLE, children: placeholder }) : null,
+        options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, style: OPTION_STYLE, children: opt }, opt))
+      ]
+    }
+  );
+}
+function FieldSlider({
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs(XStack, { gap: "$3", items: "center", children: [
+    /* @__PURE__ */ jsx(Text, { width: 56, fontSize: "$3", color: "$color11", children: value }),
+    /* @__PURE__ */ jsxs(
+      Slider,
+      {
+        flex: 1,
+        min,
+        max,
+        step,
+        value: [value],
+        onValueChange: (v) => onChange(v[0] ?? min),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Slider.Track, { children: /* @__PURE__ */ jsx(Slider.TrackActive, {}) }),
+          /* @__PURE__ */ jsx(Slider.Thumb, { index: 0, circular: true })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/product/color.ts
+var asColor = (hex) => hex;
+function ProductIcon({
+  icon: Icon,
+  color,
+  size = 24
+}) {
+  const radius = Math.round(size * 0.28);
+  const glyph = Math.round(size * 0.58);
+  const tinted = typeof color === "string" && color.trim() !== "";
+  if (tinted) {
+    return /* @__PURE__ */ jsx(
+      XStack,
+      {
+        width: size,
+        height: size,
+        items: "center",
+        justify: "center",
+        rounded: radius,
+        style: { backgroundColor: color },
+        children: /* @__PURE__ */ jsx(Icon, { size: glyph, color: asColor("#ffffff") })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(XStack, { width: size, height: size, items: "center", justify: "center", rounded: radius, bg: "$color12", children: /* @__PURE__ */ jsx(Icon, { size: glyph, color: "$color1" }) });
+}
+var KNOWN = {
+  openrouter: Globe,
+  nvidia: Cpu
+};
+var isFirstParty = (provider) => {
+  const p = provider.trim().toLowerCase();
+  return p === "hanzo" || p === "zen";
+};
+function EnsoMark({ size, color }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 100 100", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M66.22 83.26 A37 37 0 1 1 85.57 60.20", fill: "none", stroke: color, strokeWidth: 11, strokeLinecap: "round" }) });
+}
+var HANZO_PATHS = [
+  "M22.21 67V44.6369H0V67H22.21Z",
+  "M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z",
+  "M22.21 0H0V22.3184H22.21V0Z",
+  "M66.7198 0H44.5098V22.3184H66.7198V0Z",
+  "M66.7198 67V44.6369H44.5098V67H66.7198Z"
+];
+function HanzoHMark({ size, color }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 67 67", "aria-hidden": "true", children: HANZO_PATHS.map((d) => /* @__PURE__ */ jsx("path", { d, fill: color }, d)) });
+}
+function providerInitials(provider) {
+  const name = provider.trim();
+  if (!name) return "\u2022";
+  const words = name.split(/[\s/_-]+/).filter(Boolean);
+  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+function ProviderLogo({ provider, size = 24 }) {
+  const theme = useTheme();
+  const radius = Math.round(size * 0.28);
+  const iconSize = Math.round(size * 0.56);
+  if (isFirstParty(provider)) {
+    const fg = theme.color1?.get() ?? "#000000";
+    const markSize = Math.round(size * 0.66);
+    const isZen = provider.trim().toLowerCase() === "zen";
+    return /* @__PURE__ */ jsx(XStack, { width: size, height: size, items: "center", justify: "center", rounded: radius, bg: "$color12", children: isZen ? /* @__PURE__ */ jsx(EnsoMark, { size: markSize, color: fg }) : /* @__PURE__ */ jsx(HanzoHMark, { size: Math.round(size * 0.56), color: fg }) });
+  }
+  const Known = KNOWN[provider.trim().toLowerCase()];
+  if (Known) {
+    return /* @__PURE__ */ jsx(
+      XStack,
+      {
+        width: size,
+        height: size,
+        items: "center",
+        justify: "center",
+        rounded: radius,
+        bg: "$color3",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        children: /* @__PURE__ */ jsx(Known, { size: iconSize, color: "$color11" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    XStack,
+    {
+      width: size,
+      height: size,
+      items: "center",
+      justify: "center",
+      rounded: radius,
+      bg: "$color3",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      children: /* @__PURE__ */ jsx(Text, { fontSize: Math.round(size * 0.4), fontWeight: "800", color: "$color11", children: providerInitials(provider) })
+    }
+  );
+}
+function GenericLogo({ size = 24 }) {
+  return /* @__PURE__ */ jsx(XStack, { width: size, height: size, items: "center", justify: "center", rounded: Math.round(size * 0.28), bg: "$color3", borderWidth: 1, borderColor: "$borderColor", children: /* @__PURE__ */ jsx(Server, { size: Math.round(size * 0.56), color: "$color11" }) });
+}
+function targetIndex(from, dy, rowH, count) {
+  if (rowH <= 0 || count <= 0) return from;
+  const raw = from + Math.round(dy / rowH);
+  return Math.max(0, Math.min(raw, count - 1));
+}
+function rowShift(i, from, to, dy, rowH) {
+  if (i === from) return dy;
+  if (from < to && i > from && i <= to) return -rowH;
+  if (from > to && i < from && i >= to) return rowH;
+  return 0;
+}
+function Reorder({
+  items,
+  keyOf,
+  rowHeight = 44,
+  onReorder,
+  renderItem
+}) {
+  const [drag, setDrag] = useState(null);
+  const startRef = useRef(null);
+  const to = drag ? targetIndex(drag.from, drag.dy, rowHeight, items.length) : -1;
+  const begin = useCallback(
+    (index) => (e) => {
+      const startY = e.clientY ?? e.nativeEvent?.clientY ?? 0;
+      startRef.current = { from: index, startY };
+      setDrag({ from: index, dy: 0 });
+      const move = (ev) => {
+        if (!startRef.current) return;
+        setDrag({ from: startRef.current.from, dy: ev.clientY - startRef.current.startY });
+      };
+      const end = () => {
+        const s = startRef.current;
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", end);
+        window.removeEventListener("pointercancel", end);
+        startRef.current = null;
+        setDrag((d) => {
+          if (s && d) {
+            const t = targetIndex(s.from, d.dy, rowHeight, items.length);
+            if (t !== s.from) onReorder(s.from, t);
+          }
+          return null;
+        });
+      };
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", end);
+      window.addEventListener("pointercancel", end);
+    },
+    [items.length, rowHeight, onReorder]
+  );
+  return /* @__PURE__ */ jsx(YStack, { children: items.map((item, i) => {
+    const dragging = drag?.from === i;
+    const shift = drag && to >= 0 ? rowShift(i, drag.from, to, drag.dy, rowHeight) : 0;
+    return /* @__PURE__ */ jsx(
+      YStack,
+      {
+        height: rowHeight,
+        justify: "center",
+        className: "hz-drag-item",
+        style: {
+          transform: `translateY(${shift}px)`,
+          zIndex: dragging ? 2 : 1,
+          ...dragging ? { transition: "none", boxShadow: "0 8px 24px rgba(0,0,0,0.28)" } : null
+        },
+        children: renderItem(item, { onPointerDown: begin(i) }, dragging)
+      },
+      keyOf(item)
+    );
+  }) });
+}
+function SelectMenu({
+  options,
+  value,
+  onChange,
+  allLabel = "All",
+  icon,
+  minWidth = 130
+}) {
+  const active = value === null ? null : options.find((o) => o.key === value) ?? null;
+  const triggerLabel = active ? active.label : allLabel;
+  const items = [
+    { key: "__all__", label: allLabel, selected: value === null, onSelect: () => onChange(null) },
+    ...options.map((o) => ({ key: o.key, label: o.label, selected: value === o.key, onSelect: () => onChange(o.key) }))
+  ];
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      minWidth: Math.max(minWidth, 160),
+      trigger: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "$2",
+          minW: minWidth,
+          justify: "space-between",
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          bg: value !== null ? "$color5" : "transparent",
+          icon,
+          iconAfter: /* @__PURE__ */ jsx(ChevronDown, { size: 14, opacity: 0.6 }),
+          children: /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, flex: 1, children: triggerLabel })
+        }
+      ),
+      items
+    }
+  );
+}
+var LG = 1024;
+var lockCount = 0;
+var savedOverflow = "";
+function lockScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    savedOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) document.body.style.overflow = savedOverflow;
+}
+function SlideOver({
+  open,
+  onClose,
+  side = "right",
+  size = 420,
+  title,
+  icon: Icon,
+  iconColor,
+  headerRight,
+  ariaLabel,
+  zIndex = 1e3,
+  children
+}) {
+  const panelRef = useRef(null);
+  const openerRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    openerRef.current = typeof document !== "undefined" ? document.activeElement : null;
+    lockScroll();
+    const t = window.setTimeout(() => {
+      const el = panelRef.current;
+      if (el && typeof el.focus === "function") el.focus();
+    }, 0);
+    return () => {
+      window.clearTimeout(t);
+      unlockScroll();
+      const opener = openerRef.current;
+      if (opener && opener instanceof HTMLElement && typeof opener.focus === "function") opener.focus();
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  const offscreen = side === "right" ? "translateX(100%)" : "translateX(-100%)";
+  const edge = side === "right" ? { r: 0 } : { l: 0 };
+  return /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      overflow: "hidden",
+      pointerEvents: open ? "auto" : "none",
+      "aria-hidden": !open,
+      style: { position: "fixed", inset: 0, zIndex },
+      children: [
+        /* @__PURE__ */ jsx(
+          YStack,
+          {
+            position: "absolute",
+            t: 0,
+            l: 0,
+            r: 0,
+            b: 0,
+            bg: "rgba(0,0,0,0.55)",
+            className: "hz-fade",
+            style: { opacity: open ? 1 : 0 },
+            onPress: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          YStack,
+          {
+            ref: panelRef,
+            tabIndex: -1,
+            role: "dialog",
+            "aria-modal": open ? true : void 0,
+            "aria-label": typeof title === "string" ? title : ariaLabel,
+            position: "absolute",
+            t: 0,
+            b: 0,
+            ...edge,
+            width: "100%",
+            $lg: { width: size, maxW: "100vw" },
+            bg: "$color1",
+            borderLeftWidth: side === "right" ? 1 : 0,
+            borderRightWidth: side === "left" ? 1 : 0,
+            borderColor: "$borderColor",
+            className: "hz-slide hz-elevation-4",
+            style: {
+              transform: open ? "translateX(0)" : offscreen,
+              height: "100dvh",
+              paddingTop: "env(safe-area-inset-top)",
+              paddingBottom: "env(safe-area-inset-bottom)"
+            },
+            children: title !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                XStack,
+                {
+                  items: "center",
+                  gap: "$2.5",
+                  px: "$4",
+                  height: 56,
+                  borderBottomWidth: 1,
+                  borderColor: "$borderColor",
+                  children: [
+                    Icon ? /* @__PURE__ */ jsx(Icon, { size: 18, color: iconColor ? asColor(iconColor) : void 0 }) : null,
+                    /* @__PURE__ */ jsx(Text, { flex: 1, fontSize: "$5", fontWeight: "700", color: "$color12", numberOfLines: 1, children: title }),
+                    headerRight,
+                    /* @__PURE__ */ jsx(Button, { chromeless: true, width: 44, height: 44, icon: /* @__PURE__ */ jsx(X, { size: 18 }), onPress: onClose, "aria-label": "Close" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(ScrollView, { flex: 1, children: /* @__PURE__ */ jsx(YStack, { flex: 1, p: "$4", gap: "$3", children }) })
+            ] }) : (
+              // Bare mode — the caller owns the full panel layout (e.g. the nav drawer
+              // renders its own header + scroll + footer).
+              children
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var toneOf = (status) => {
+  const s = status.toLowerCase();
+  if (s === "green") return "green";
+  if (s === "yellow") return "yellow";
+  if (s === "red") return "red";
+  if (["ready", "active", "running", "available", "ok", "live", "succeeded", "connected", "synced", "imported"].includes(s)) return "green";
+  if (["creating", "provisioning", "pending", "updating", "attaching", "building", "deploying", "queued", "importing"].includes(s))
+    return "yellow";
+  if (["error", "failed", "degraded", "down", "canceled", "conflict"].includes(s)) return "red";
+  return "neutral";
+};
+var TONE_BG = {
+  green: "$color5",
+  yellow: "$color4",
+  red: "$color4",
+  neutral: "$color3"
+};
+var TONE_FG = {
+  green: "$color12",
+  yellow: "$color12",
+  red: "$color12",
+  neutral: "$color11"
+};
+function StatusTag({ status }) {
+  const tone2 = toneOf(status ?? "");
+  return /* @__PURE__ */ jsx(Text, { fontSize: "$1", px: "$2", py: "$1", rounded: "$2", bg: TONE_BG[tone2], color: TONE_FG[tone2], children: status || "unknown" });
+}
+var ToastContext = createContext(null);
+var ACCENT3 = {
+  success: "$green10",
+  error: "$red10",
+  info: "$color11"
+};
+var ICON = {
+  success: CircleCheck,
+  error: CircleX,
+  info: Info
+};
+function ToastCard({ t, onClose }) {
+  const Icon = ICON[t.kind];
+  const accent = ACCENT3[t.kind];
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      width: 360,
+      maxWidth: "90%",
+      p: "$3",
+      gap: "$2",
+      bg: "$color2",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderLeftWidth: 3,
+      borderLeftColor: accent,
+      rounded: "$4",
+      elevation: "$2",
+      children: /* @__PURE__ */ jsxs(XStack, { gap: "$2.5", items: "flex-start", children: [
+        /* @__PURE__ */ jsx(YStack, { pt: 1, children: /* @__PURE__ */ jsx(Icon, { size: 18, color: accent }) }),
+        /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: "$1", children: [
+          /* @__PURE__ */ jsx(Text, { fontSize: "$3", fontWeight: "700", color: "$color12", children: t.title }),
+          t.description ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: t.description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Button, { size: "$1", chromeless: true, icon: /* @__PURE__ */ jsx(X, { size: 14 }), onPress: onClose, "aria-label": "Dismiss" })
+      ] })
+    }
+  );
+}
+function ToastViewport({ toasts, dismiss }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { style: { position: "fixed", top: 16, right: 16, zIndex: 1e5, pointerEvents: "none" }, children: /* @__PURE__ */ jsx(YStack, { gap: "$2", items: "flex-end", children: toasts.map((t) => /* @__PURE__ */ jsx(YStack, { pointerEvents: "auto", children: /* @__PURE__ */ jsx(ToastCard, { t, onClose: () => dismiss(t.id) }) }, t.id)) }) }),
+    document.body
+  );
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const timers = useRef(/* @__PURE__ */ new Map());
+  const seq = useRef(0);
+  const dismiss = useCallback((id) => {
+    setToasts((ts) => ts.filter((t) => t.id !== id));
+    const timer = timers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
+  }, []);
+  const toast = useCallback(
+    (input) => {
+      const id = ++seq.current;
+      const kind = input.kind ?? "info";
+      const durationMs = input.durationMs ?? (kind === "error" ? 6e3 : 3500);
+      setToasts((ts) => [...ts, { id, kind, title: input.title, description: input.description, durationMs }]);
+      if (durationMs > 0) {
+        timers.current.set(
+          id,
+          setTimeout(() => dismiss(id), durationMs)
+        );
+      }
+    },
+    [dismiss]
+  );
+  useEffect(() => {
+    const map = timers.current;
+    return () => map.forEach((t) => clearTimeout(t));
+  }, []);
+  const api = {
+    toast,
+    success: (title, description) => toast({ title, description, kind: "success" }),
+    error: (title, description) => toast({ title, description, kind: "error" }),
+    info: (title, description) => toast({ title, description, kind: "info" }),
+    dismiss
+  };
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastViewport, { toasts, dismiss })
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
+  return ctx;
+}
+var META = {
+  x: { label: "X", bg: "#0f0f12", fg: "#e6e6ea", mark: "\u{1D54F}" },
+  facebook: { label: "Facebook", bg: "#1877f2", fg: "#ffffff", mark: "f" },
+  instagram: { label: "Instagram", bg: "#e1306c", fg: "#ffffff", mark: "IG" },
+  linkedin: { label: "LinkedIn", bg: "#0a66c2", fg: "#ffffff", mark: "in" },
+  tiktok: { label: "TikTok", bg: "#111114", fg: "#25f4ee", mark: "TT" },
+  youtube: { label: "YouTube", bg: "#ff0000", fg: "#ffffff", mark: "\u25B6" },
+  threads: { label: "Threads", bg: "#111114", fg: "#e6e6ea", mark: "@" }
+};
+function ChannelBadge({
+  channel,
+  showLabel = false,
+  size = 22
+}) {
+  const m = META[channel] ?? META.x;
+  return /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+    /* @__PURE__ */ jsx(
+      YStack,
+      {
+        width: size,
+        height: size,
+        items: "center",
+        justify: "center",
+        rounded: "$2",
+        bg: m.bg,
+        children: /* @__PURE__ */ jsx(Text, { fontSize: "$1", fontWeight: "800", color: m.fg, children: m.mark })
+      }
+    ),
+    showLabel ? /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: m.label }) : null
+  ] });
+}
+var money = (cents) => `$${Math.round((cents || 0) / 100).toLocaleString()}`;
+function CampaignCard({ campaign }) {
+  const pct = campaign.budget > 0 ? Math.min(100, campaign.spend / campaign.budget * 100) : 0;
+  return /* @__PURE__ */ jsxs(Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "flex-start", justify: "space-between", gap: "$2", children: [
+      /* @__PURE__ */ jsxs(YStack, { gap: "$1", children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "$4", fontWeight: "700", children: campaign.name }),
+        /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: campaign.channel })
+      ] }),
+      /* @__PURE__ */ jsx(StatusTag, { status: campaign.status })
+    ] }),
+    campaign.objective ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color11", children: campaign.objective }) : null,
+    /* @__PURE__ */ jsxs(YStack, { gap: "$1.5", children: [
+      /* @__PURE__ */ jsxs(XStack, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color11", children: [
+          money(campaign.spend),
+          " spent"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color11", children: [
+          money(campaign.budget),
+          " budget"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(YStack, { height: 6, rounded: "$2", bg: "$color3", overflow: "hidden", children: /* @__PURE__ */ jsx(YStack, { height: 6, rounded: "$2", bg: "$color9", width: `${pct}%` }) })
+    ] })
+  ] });
+}
+
+// src/product/social/format.ts
+function formatPostTime(unix) {
+  if (!unix) return "\u2014";
+  return new Date(unix * 1e3).toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+function postDayBucket(unix) {
+  const d = new Date(unix * 1e3);
+  const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+  const label = d.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" });
+  return { key, label };
+}
+function postPreview(s) {
+  const t = s.trim();
+  return t.length > 72 ? `${t.slice(0, 72)}\u2026` : t || "\u2014";
+}
+function parsePostTime(dt) {
+  const ms = Date.parse(dt.trim());
+  return Number.isFinite(ms) && ms > 0 ? Math.floor(ms / 1e3) : 0;
+}
+function PostCard({
+  post,
+  onEdit,
+  onDelete
+}) {
+  const mediaCount = post.media?.length ?? 0;
+  return /* @__PURE__ */ jsxs(Card, { p: "$3", gap: "$2.5", borderWidth: 1, borderColor: "$borderColor", width: "100%", children: [
+    /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
+      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+        /* @__PURE__ */ jsx(ChannelBadge, { channel: post.channel }),
+        /* @__PURE__ */ jsx(StatusTag, { status: post.status })
+      ] }),
+      /* @__PURE__ */ jsxs(XStack, { gap: "$1", children: [
+        onEdit ? /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Pencil, { size: 15 }), onPress: () => onEdit(post) }) : null,
+        onDelete ? /* @__PURE__ */ jsx(Button, { size: "$2", chromeless: true, icon: /* @__PURE__ */ jsx(Trash2, { size: 15 }), onPress: () => onDelete(post) }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", color: "$color12", children: post.content }),
+    /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [
+      post.scheduleAt ? /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color11", children: formatPostTime(post.scheduleAt) }) : /* @__PURE__ */ jsx(YStack, {}),
+      mediaCount ? /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color10", children: [
+        mediaCount,
+        " media"
+      ] }) : null
+    ] })
+  ] });
+}
+function PostAgenda({ posts, onOpen }) {
+  const days = useMemo(() => {
+    const timed = posts.filter((p) => (p.scheduleAt ?? 0) > 0).sort((a, b) => (a.scheduleAt ?? 0) - (b.scheduleAt ?? 0));
+    const groups = [];
+    const index = /* @__PURE__ */ new Map();
+    for (const p of timed) {
+      const { key, label } = postDayBucket(p.scheduleAt ?? 0);
+      let i = index.get(key);
+      if (i === void 0) {
+        i = groups.length;
+        index.set(key, i);
+        groups.push({ label, items: [] });
+      }
+      groups[i].items.push(p);
+    }
+    return groups;
+  }, [posts]);
+  if (days.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: Calendar,
+        title: "Nothing on the calendar",
+        description: "Scheduled and timed posts appear here, grouped by day. Compose a post and pick Schedule to plan ahead."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(YStack, { gap: "$4", children: days.map((d) => /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$color11", children: d.label }),
+    d.items.map((p) => /* @__PURE__ */ jsxs(
+      XStack,
+      {
+        items: "center",
+        justify: "space-between",
+        gap: "$3",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        rounded: "$4",
+        px: "$4",
+        py: "$3",
+        cursor: "pointer",
+        hoverStyle: { bg: "$color2" },
+        onPress: () => onOpen(p),
+        children: [
+          /* @__PURE__ */ jsxs(YStack, { gap: "$1", flex: 1, children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: "$3", children: postPreview(p.content) }),
+            /* @__PURE__ */ jsxs(XStack, { gap: "$2", items: "center", children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: p.channel }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color10", children: [
+                "\xB7 ",
+                formatPostTime(p.scheduleAt ?? 0)
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(StatusTag, { status: p.status })
+        ]
+      },
+      p.id
+    ))
+  ] }, d.label)) });
+}
+var COMPOSE_MODES = ["draft", "schedule", "now"];
+var COMPOSE_LABEL = {
+  draft: "Save draft",
+  schedule: "Schedule",
+  now: "Publish now"
+};
+function PostComposer({
+  channels,
+  providers,
+  onSubmit
+}) {
+  const [content, setContent] = useState("");
+  const [channel, setChannel] = useState(channels[0] ?? "x");
+  const [mode, setMode] = useState("draft");
+  const [scheduleAt, setScheduleAt] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const cap = providers.find((p) => p.provider === channel);
+  const unconfigured = (mode === "now" || mode === "schedule") && !!cap && !cap.credentialsConfigured;
+  const submit = async () => {
+    if (!content.trim()) {
+      setError("Content is required.");
+      return;
+    }
+    let status = "draft";
+    let at = 0;
+    if (mode === "schedule") {
+      at = parsePostTime(scheduleAt);
+      if (at <= Math.floor(Date.now() / 1e3)) {
+        setError("Pick a future date and time to schedule.");
+        return;
+      }
+      status = "scheduled";
+    } else if (mode === "now") {
+      status = "scheduled";
+    }
+    setSaving(true);
+    setError(null);
+    const message = await onSubmit({ content: content.trim(), channel, status, scheduleAt: at }, mode);
+    if (message) {
+      setError(message);
+      setSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$3", p: "$4", children: [
+    /* @__PURE__ */ jsx(FieldRow, { label: "Content", children: /* @__PURE__ */ jsx(FieldTextArea, { value: content, onChange: setContent, disabled: saving }) }),
+    /* @__PURE__ */ jsx(FieldRow, { label: "Channel", children: /* @__PURE__ */ jsx(FieldSelect, { value: channel, options: channels, onChange: setChannel, disabled: saving }) }),
+    /* @__PURE__ */ jsx(FieldRow, { label: "When", children: /* @__PURE__ */ jsx(
+      FieldSelect,
+      {
+        value: mode,
+        options: [...COMPOSE_MODES],
+        onChange: (v) => setMode(v),
+        disabled: saving
+      }
+    ) }),
+    mode === "schedule" ? /* @__PURE__ */ jsx(FieldRow, { label: "Schedule at", children: /* @__PURE__ */ jsx(
+      FieldText,
+      {
+        value: scheduleAt,
+        onChange: setScheduleAt,
+        placeholder: "2026-07-15 09:00",
+        disabled: saving
+      }
+    ) }) : null,
+    unconfigured ? /* @__PURE__ */ jsxs(XStack, { items: "flex-start", gap: "$2", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { size: 14, color: "var(--yellow10)" }),
+      /* @__PURE__ */ jsxs(Text, { fontSize: "$1", color: "$color10", children: [
+        channel,
+        " isn\u2019t configured to publish yet \u2014 needs ",
+        cap?.missingCredentials.join(", "),
+        ". The post is saved and marked failed on publish until credentials are supplied."
+      ] })
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$red10", children: error }) : null,
+    /* @__PURE__ */ jsx(PrimaryButton, { onPress: submit, disabled: saving, children: saving ? "Working\u2026" : COMPOSE_LABEL[mode] })
+  ] });
+}
+function ProviderReadinessList({ providers }) {
+  return /* @__PURE__ */ jsxs(YStack, { gap: "$2", children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: "$2", color: "$color10", children: "Network publish-readiness" }),
+    providers.map((p) => /* @__PURE__ */ jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", py: "$1", children: [
+      /* @__PURE__ */ jsxs(XStack, { items: "center", gap: "$2", children: [
+        p.credentialsConfigured ? /* @__PURE__ */ jsx(CheckCircle2, { size: 14, color: "var(--green10)" }) : /* @__PURE__ */ jsx(AlertTriangle, { size: 14, color: "var(--yellow10)" }),
+        /* @__PURE__ */ jsx(Text, { fontSize: "$2", children: p.provider })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: p.credentialsConfigured ? "Ready" : `needs ${p.missingCredentials.join(", ")}` })
+    ] }, p.provider))
+  ] });
+}
+function SocialSummaryBar({ summary }) {
+  const cells = [
+    { label: "Posts", value: summary.posts },
+    { label: "Scheduled", value: summary.scheduled },
+    { label: "Published", value: summary.published },
+    { label: "Accounts", value: summary.accounts }
+  ];
+  return /* @__PURE__ */ jsx(XStack, { gap: "$3", flexWrap: "wrap", children: cells.map((c) => /* @__PURE__ */ jsxs(
+    YStack,
+    {
+      gap: "$1",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      rounded: "$4",
+      px: "$4",
+      py: "$3",
+      minW: 140,
+      children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: "$1", color: "$color10", children: c.label }),
+        /* @__PURE__ */ jsx(Text, { fontSize: "$6", fontWeight: "500", className: "hz-tnum", children: c.value })
+      ]
+    },
+    c.label
+  )) });
+}
+var OPTIONS = [
+  { id: "list", label: "List", icon: List },
+  { id: "calendar", label: "Calendar", icon: Calendar }
+];
+function ViewToggle({
+  view,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(XStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: OPTIONS.map((o) => {
+    const Icon = o.icon;
+    const active = view === o.id;
+    return /* @__PURE__ */ jsxs(
+      XStack,
+      {
+        items: "center",
+        gap: "$2",
+        px: "$3",
+        py: "$2",
+        cursor: "pointer",
+        bg: active ? "$color4" : "transparent",
+        hoverStyle: { bg: active ? "$color4" : "$color2" },
+        onPress: () => onChange(o.id),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { size: 14 }),
+          /* @__PURE__ */ jsx(Text, { fontSize: "$2", fontWeight: active ? "500" : "400", children: o.label })
+        ]
+      },
+      o.id
+    );
+  }) });
+}
+
+export { AnimatedLogo, AppHeader, BRANDS, BackendStateCard, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, COMPOSE_MODES, CampaignCard, ChannelBadge, ComboBox, CommerceResource, ConfirmDelete, ContextMenu, DataTable, Donut, Donut2 as DonutRing, DropdownMenu, EmptyState, FadeIn, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, FloatingMenu, GenericLogo, HANZO, HANZO_MARK_CONTENT, HanzoMark, HintButton, HostProvider, LUX, LegendDot, LineChart, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, MetricCard, Sparkline2 as MetricSparkline, MiniBars, OrgMark, OrgSwitcher, PARS, PageHeader, Panel, PortalTheme, PostAgenda, PostCard, PostComposer, PrimaryButton, ProductIcon, ProviderLogo, ProviderReadinessList, Reorder, SERIES, LG as SLIDEOVER_LG, SURFACES, SearchInput, Segmented, SelectMenu, SiteFooter, SiteNav, SlideOver, SocialSummaryBar, Sparkline, StatusTag, ToastProvider, UtilBar, ViewToggle, ZOO, accentFor, asColor, classifyBackend, classifyRead, colorForIndex, contrastText, filterOptions, filterOrgs, formatPostTime, isHexColor, isKnownOption, monogram, orgScope, otherSurfaces, parsePostTime, postDayBucket, postPreview, providerInitials, renderMenuItems, resolveAccent, resolveBrand, rowShift, setOrgAccent, targetIndex, useAccent, useContainerWidth, useHost, useToast, utilColor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map