@hanzo/ui 8.0.26 → 8.0.28

package/dist/product/index.js

@@ -1,1913 +1,89 @@
-import { ThemeToggle } from '../chunk-77AMCLN4.js';
-export { AgnosticThemeToggle, ThemeToggle, ThemeToggleNext } from '../chunk-77AMCLN4.js';
-import { DataTable, asColor } from '../chunk-7ZNK6JSS.js';
-export { COMPOSE_MODES, CampaignCard, ChannelBadge, DataTable, PostAgenda, PostCard, PostComposer, ProviderReadinessList, LG as SLIDEOVER_LG, SlideOver, SocialResource, SocialSummaryBar, StatusTag, ViewToggle, asColor, formatPostTime, parsePostTime, postDayBucket, postPreview } from '../chunk-7ZNK6JSS.js';
-export { ACCOUNT_STATUSES, POST_STATUSES, PROVIDERS, createSocialApi, normalizeAccount, normalizeAccounts, normalizePost, normalizePosts, normalizeProviderCapability, normalizeProviders, normalizeSummary } from '../chunk-ZGTJCJ55.js';
-import { FloatingMenu, MenuItemView, renderMenuItems } from '../chunk-5CZOYONP.js';
-export { DropdownMenu, FloatingMenu, MenuItemView, MenuLabelView, MenuPanel, MenuSeparatorView, PortalTheme, SelectMenu, renderMenuItems } from '../chunk-5CZOYONP.js';
-import { classifyBackend, PageHeader, BackendStateCard } from '../chunk-GVCOAJLO.js';
-export { BackendStateCard, EmptyState, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, HostProvider, PageHeader, PrimaryButton, accentFor, classifyBackend, classifyRead, contrastText, isHexColor, resolveAccent, setOrgAccent, useAccent, useHost } from '../chunk-GVCOAJLO.js';
-import { useEmit, textSize } from '../chunk-FVQXROBK.js';
-export { InstrumentSurface, emit, labelOf, textSize, useEmit, useSurface } from '../chunk-FVQXROBK.js';
-import { createContext, useRef, useState, useEffect, useCallback, useMemo, cloneElement, useLayoutEffect, useContext } from 'react';
-import { useTheme, XStack, Text, YStack, Card, Input, Button, Spinner, Popover, Separator } from '@hanzo/gui';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, RefreshCw, Grip, CreditCard, Users, Bot, MessageCircle, AppWindow, LayoutGrid, Sparkles, UserRound, Settings2, LogOut, ChevronsUpDown, Plus, Search, Check, Trash2, Cpu, Globe, Server, Info, CircleX, CircleCheck, X } 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);
-}
-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 track = useEmit();
-  const pick = (v) => {
-    track({ component: "ComboBox", action: "select", id: v, value: filtered.length });
-    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: () => {
-            track({ component: "ComboBox", action: open ? "close" : "open" });
-            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(current) {
-  return current ? SURFACES.filter((s) => s.id !== current) : 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,
-  surfaces,
-  open,
-  user,
-  menu,
-  theme,
-  onProfile,
-  onTeam,
-  onBilling,
-  onSignOut
-}) {
-  const [appsOpen, setAppsOpen] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const items = surfaces ?? otherSurfaces(current);
-  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 current = 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 = current.displayName || titleCase(current.name);
-  const track = useEmit();
-  const select = useCallback(
-    (org) => {
-      track({ component: "OrgSwitcher", action: "select", id: org });
-      setOpen(false);
-      scope.switchOrg(org);
-    },
-    [scope, track]
-  );
-  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: current, 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 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
-    ] })
-  ] });
-}
-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 track = useEmit();
-  const go = async () => {
-    setBusy(true);
-    setErr(null);
-    track({ component: "ConfirmDelete", action: "confirm", id: confirmLabel });
-    try {
-      await run();
-      onDone();
-    } catch (e) {
-      const message2 = classifyBackend(e).message || "Failed to delete.";
-      track({ component: "ConfirmDelete", action: "error", id: confirmLabel, value: message2 });
-      setErr(message2);
-      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: () => {
-            track({ component: "ConfirmDelete", action: "cancel", id: confirmLabel });
-            onDone();
-          },
-          disabled: busy,
-          children: "Cancel"
-        }
-      )
-    ] })
-  ] });
-}
-function Segmented({
-  options,
-  value,
-  onChange,
-  size = "$2",
-  name
-}) {
-  const track = useEmit();
-  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: () => {
-          track({ component: "Segmented", action: "filter", id: name, value: o.value });
-          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,
-  name
-}) {
-  const track = useEmit();
-  const onChangeTracked = (v) => {
-    track({ component: "SearchInput", action: "search", id: name, value: textSize(v) });
-    onChange(v);
-  };
-  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: onChangeTracked, 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 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 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)
-    );
-  }) });
-}
-var ToastContext = createContext(null);
-var ACCENT2 = {
-  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 = ACCENT2[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 track = useEmit();
-  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);
-      track({ component: "Toast", action: kind === "error" ? "error" : "view", id: input.title, value: kind });
-      setToasts((ts) => [...ts, { id, kind, title: input.title, description: input.description, durationMs }]);
-      if (durationMs > 0) {
-        timers.current.set(
-          id,
-          setTimeout(() => dismiss(id), durationMs)
-        );
-      }
-    },
-    [dismiss, track]
-  );
-  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;
-}
-
-export { AnimatedLogo, AppHeader, BRANDS, BarChart, BarRows, BrandMark, CHART_OTHER, CHART_PALETTE, ComboBox, CommerceResource, ConfirmDelete, ContextMenu, Donut, Donut2 as DonutRing, FadeIn, GenericLogo, HANZO, HANZO_MARK_CONTENT, HanzoMark, HintButton, LUX, LegendDot, LineChart, MetricCard, Sparkline2 as MetricSparkline, MiniBars, OrgMark, OrgSwitcher, PARS, Panel, ProductIcon, ProviderLogo, Reorder, SERIES, SURFACES, SearchInput, Segmented, SiteFooter, SiteNav, Sparkline, ToastProvider, UtilBar, ZOO, colorForIndex, filterOptions, filterOrgs, isKnownOption, monogram, orgScope, otherSurfaces, providerInitials, resolveBrand, rowShift, targetIndex, useContainerWidth, useToast, utilColor };
-//# sourceMappingURL=index.js.map
+'use client';// @hanzo/ui/product — the product/app component layer on @hanzo/gui.
+//
+// Charts, metrics, page headers, status tags, rich empty states, combobox,
+// slide-over, toasts, drag-reorder, labeled field rows, provider/product marks,
+// theme toggle. Presentational + host-agnostic: data and effects are INJECTED as
+// props — nothing here imports an app's `~/lib`. Cross-platform (web + native +
+// desktop) because it builds only on @hanzo/gui primitives. Clean-room.
+//
+// Single collision-free namespace: where a name exists in two files the canonical
+// (Charts) keeps the name and the variant is aliased, so NOTHING is dropped.
+// Charts — the canonical Sparkline + Donut live here (dependency-free inline SVG:
+// hover tooltips, axis ticks, honest null under 2 real points).
+export * from './Charts.js';
+// Metric — resource-console stat tiles/panels/bars. Its own near-identical
+// Sparkline is preserved as `MetricSparkline` (zero loss; see CONSOLIDATION.md
+// for the eventual single-Sparkline dedup).
+export { SERIES, colorForIndex, utilColor, Sparkline as MetricSparkline, MiniBars, UtilBar, LegendDot, MetricCard, HintButton, Panel, } from './Metric.js';
+// Standalone dependency-free ring — aliased to avoid the Charts.Donut clash.
+export { Donut as DonutRing } from './Donut.js';
+// ComboBox — the typeable select. `ComboOption` comes from the ONE pure filter
+// module (ReDoS-safe literal substring), so export the component here and the
+// option type + matchers from there.
+export { ComboBox } from './ComboBox.js';
+export * from './combobox/filter.js';
+// The shared shell — brand mark, org scope + switcher, app header (the
+// console's org-scope contract + switcher hoisted here; hanzoai/ui#36).
+// `surfaces.data` is the ONE canonical cross-surface list every launcher consumes.
+export * from './surfaces.data.js';
+export * from './AppHeader.js';
+export * from './BrandMark.js';
+export * from './OrgMark.js';
+export * from './OrgSwitcher.js';
+export * from './scope.js';
+// Menu — the ONE menu system: portal-theme-safe DropdownMenu (click) + ContextMenu
+// (right-click), both rendering the SAME item spec (MenuPanel/MenuItemView) so every
+// menu across the fleet is pixel-identical. SelectMenu/ComboBox share the same spec.
+export * from './menu/index.js';
+// Site chrome — the RENDERER for @hanzo/products' header/launcher/footer models.
+// That package decides what the navigation is; these two draw it, so every
+// property shares one bar and one footer instead of a hand-written copy each.
+export * from './SiteNav.js';
+export * from './SiteFooter.js';
+// Admin surface — the honest-state + list layer every admin console renders.
+// `host` is the ONE seam an app injects its router/auth effects through;
+// `CommerceResource` is the ONE store-list surface (console Store + Commerce admin).
+export * from './host.js';
+export * from './BackendState.js';
+export * from './CommerceResource.js';
+export * from './ConfirmDelete.js';
+export * from './Filters.js';
+// Instrumentation — the ONE place a shared component reports what a user did.
+// Every component above already emits through it, so a product gets the whole
+// interaction vocabulary by rendering the library. Apps only need the optional
+// `<InstrumentSurface value="billing">` to name the area, and `emit` for the
+// one-off moments no shared component can observe.
+export * from './instrument.js';
+// The rest — every exported name below is unique across the layer.
+export * from './AnimatedLogo.js';
+export * from './brand.js';
+export * from './DataTable.js';
+export * from './EmptyState.js';
+export * from './FadeIn.js';
+export * from './Field.js';
+export * from './HanzoMark.js';
+export * from './PageHeader.js';
+export * from './PrimaryButton.js';
+export * from './ProductIcon.js';
+export * from './ProviderLogo.js';
+export * from './Reorder.js';
+export * from './SelectMenu.js';
+export * from './SlideOver.js';
+export * from './StatusTag.js';
+export * from './ThemeToggle.js';
+export { ThemeToggleNext } from './ThemeToggleNext.js';
+export * from './Toast.js';
+export * from './accent.js';
+export * from './color.js';
+// Usage — the canonical AI-usage surface (totals, chart, spend-by-model, activity)
+// now lives in ONE home: `@hanzo/usage/panel` (<UsagePanel>). The former meter/card/
+// dashboard kit here was orphaned (zero consumers) and folded into it.
+// Social — the publish surface (social.hanzo.ai) as parts: channel/post/campaign
+// cards, the summary bar, the list↔calendar toggle, the agenda, the composer, and
+// the provider-readiness list, over one pure time/preview module.
+export * from './social/index.js';
+// The gui/product theme object + tag tones (one source of truth, from
+// @hanzo/data) — the theme this layer renders against. Design-token PRIMITIVES
+// (colors, dark/light, radii, spacing) are the runtime-free `@hanzo/ui/core`.
+export { tokens, TAG_TONES, tagTone } from '@hanzo/data';
 //# sourceMappingURL=index.js.map