@hanzo/ui 8.0.18 → 8.0.20

package/dist/product/index.cjs

@@ -1,8 +1,9 @@
 'use client';
 'use strict';
 
-var chunkYBXVUV7P_cjs = require('../chunk-YBXVUV7P.cjs');
-var chunk5MBAHVEO_cjs = require('../chunk-5MBAHVEO.cjs');
+var chunkJ3P63OX6_cjs = require('../chunk-J3P63OX6.cjs');
+var chunkXULZJEW2_cjs = require('../chunk-XULZJEW2.cjs');
+var chunk57YEM34R_cjs = require('../chunk-57YEM34R.cjs');
 var chunkMWBFAV3D_cjs = require('../chunk-MWBFAV3D.cjs');
 var react = require('react');
 var gui = require('@hanzo/gui');
@@ -577,14 +578,19 @@ function MenuItemView({
   hasSubmenu = false,
   onSelect
 }) {
+  const track = chunk57YEM34R_cjs.useEmit();
+  const choose = () => {
+    track({ component: "MenuItem", action: "select", id: typeof label === "string" ? label : void 0, value: selected });
+    onSelect();
+  };
   const press = () => {
-    if (!disabled) onSelect();
+    if (!disabled) choose();
   };
   const onKeyDown = (e) => {
     if (disabled) return;
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      onSelect();
+      choose();
     }
   };
   const labelColor = destructive ? DANGER : "$color12";
@@ -788,7 +794,9 @@ function ComboBox({
   const anchorRect = react.useCallback(() => rowRef.current?.getBoundingClientRect() ?? null, []);
   const anchorEl = react.useCallback(() => rowRef.current, []);
   const filtered = react.useMemo(() => filterOptions(options, value), [options, value]);
+  const track = chunk57YEM34R_cjs.useEmit();
   const pick = (v) => {
+    track({ component: "ComboBox", action: "select", id: v, value: filtered.length });
     onChange(v);
     setOpen(false);
   };
@@ -816,7 +824,10 @@ function ComboBox({
           chromeless: true,
           disabled,
           icon: /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.ChevronDown, { size: 16, opacity: 0.7 }),
-          onPress: () => setOpen((o) => !o),
+          onPress: () => {
+            track({ component: "ComboBox", action: open ? "close" : "open" });
+            setOpen((o) => !o);
+          },
           "aria-label": "Show options"
         }
       )
@@ -954,7 +965,7 @@ function AppHeader({
         onProfile ? /* @__PURE__ */ jsxRuntime.jsx(MenuRow, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.UserRound, { size: 15 }), label: "Profile", onPress: () => (setMenuOpen(false), onProfile()) }) : null,
         theme !== null ? /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { items: "center", gap: "$2.5", px: "$2", py: "$1", rounded: "$3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { flex: 1, fontSize: "$2", color: "$color12", children: "Theme" }),
-          theme ?? /* @__PURE__ */ jsxRuntime.jsx(chunkYBXVUV7P_cjs.ThemeToggle, {})
+          theme ?? /* @__PURE__ */ jsxRuntime.jsx(chunkJ3P63OX6_cjs.ThemeToggle, {})
         ] }) : null,
         onTeam ? /* @__PURE__ */ jsxRuntime.jsx(MenuRow, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.Settings2, { size: 15 }), label: "Team settings", onPress: () => (setMenuOpen(false), onTeam()) }) : null,
         onBilling ? /* @__PURE__ */ jsxRuntime.jsx(MenuRow, { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.CreditCard, { size: 15 }), label: "Billing", onPress: () => (setMenuOpen(false), onBilling()) }) : null,
@@ -1138,12 +1149,14 @@ function OrgSwitcher({ scope, orgs, pageSize = 20, current: given, create, picke
     return rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) };
   }, [given, rows, currentId]);
   const currentLabel = current.displayName || titleCase(current.name);
+  const track = chunk57YEM34R_cjs.useEmit();
   const select = react.useCallback(
     (org) => {
+      track({ component: "OrgSwitcher", action: "select", id: org });
       setOpen(false);
       scope.switchOrg(org);
     },
-    [scope]
+    [scope, track]
   );
   const submitCreate = async () => {
     const name = newName.trim();
@@ -1606,14 +1619,14 @@ function CommerceResource({
   loadRef.current = load;
   const reload = react.useCallback(() => {
     setState({ phase: "loading" });
-    loadRef.current().then((r) => setState({ phase: "ready", data: r.rows })).catch((e) => setState({ phase: "error", error: chunk5MBAHVEO_cjs.classifyBackend(e) }));
+    loadRef.current().then((r) => setState({ phase: "ready", data: r.rows })).catch((e) => setState({ phase: "error", error: chunkXULZJEW2_cjs.classifyBackend(e) }));
   }, []);
   react.useEffect(() => {
     reload();
   }, [reload]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5MBAHVEO_cjs.PageHeader,
+      chunkXULZJEW2_cjs.PageHeader,
       {
         title,
         subtitle,
@@ -1623,8 +1636,8 @@ function CommerceResource({
         ] })
       }
     ),
-    state.phase === "error" ? /* @__PURE__ */ jsxRuntime.jsx(chunk5MBAHVEO_cjs.BackendStateCard, { state: state.error, onRetry: reload, hint }) : /* @__PURE__ */ jsxRuntime.jsx(
-      chunk5MBAHVEO_cjs.DataTable,
+    state.phase === "error" ? /* @__PURE__ */ jsxRuntime.jsx(chunkXULZJEW2_cjs.BackendStateCard, { state: state.error, onRetry: reload, hint }) : /* @__PURE__ */ jsxRuntime.jsx(
+      chunkXULZJEW2_cjs.DataTable,
       {
         columns,
         rows: state.phase === "ready" ? state.data : [],
@@ -1643,14 +1656,18 @@ function ConfirmDelete({
 }) {
   const [busy, setBusy] = react.useState(false);
   const [err, setErr] = react.useState(null);
+  const track = chunk57YEM34R_cjs.useEmit();
   const go = async () => {
     setBusy(true);
     setErr(null);
+    track({ component: "ConfirmDelete", action: "confirm", id: confirmLabel });
     try {
       await run();
       onDone();
     } catch (e) {
-      setErr(chunk5MBAHVEO_cjs.classifyBackend(e).message || "Failed to delete.");
+      const message2 = chunkXULZJEW2_cjs.classifyBackend(e).message || "Failed to delete.";
+      track({ component: "ConfirmDelete", action: "error", id: confirmLabel, value: message2 });
+      setErr(message2);
       setBusy(false);
     }
   };
@@ -1668,7 +1685,18 @@ function ConfirmDelete({
           children: busy ? "Deleting\u2026" : confirmLabel
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(gui.Button, { chromeless: true, onPress: () => onDone(), disabled: busy, children: "Cancel" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Button,
+        {
+          chromeless: true,
+          onPress: () => {
+            track({ component: "ConfirmDelete", action: "cancel", id: confirmLabel });
+            onDone();
+          },
+          disabled: busy,
+          children: "Cancel"
+        }
+      )
     ] })
   ] });
 }
@@ -1676,8 +1704,10 @@ function Segmented({
   options,
   value,
   onChange,
-  size = "$2"
+  size = "$2",
+  name
 }) {
+  const track = chunk57YEM34R_cjs.useEmit();
   return /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { gap: "$1", flexWrap: "wrap", items: "center", children: options.map((o) => {
     const active = o.value === value;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1688,17 +1718,30 @@ function Segmented({
         borderWidth: 1,
         borderColor: active ? "$color7" : "$borderColor",
         "aria-pressed": active,
-        onPress: () => onChange(o.value),
+        onPress: () => {
+          track({ component: "Segmented", action: "filter", id: name, value: o.value });
+          onChange(o.value);
+        },
         children: /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: "$2", fontWeight: active ? "700" : "500", color: active ? "$color12" : "$color11", children: o.label })
       },
       o.value
     );
   }) });
 }
-function SearchInput({ value, onChange, placeholder }) {
+function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  name
+}) {
+  const track = chunk57YEM34R_cjs.useEmit();
+  const onChangeTracked = (v) => {
+    track({ component: "SearchInput", action: "search", id: name, value: chunk57YEM34R_cjs.textSize(v) });
+    onChange(v);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$color1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.Search, { size: 15, color: "$color10" }),
-    /* @__PURE__ */ jsxRuntime.jsx(gui.Input, { flex: 1, value, onChangeText: onChange, placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Input, { flex: 1, value, onChangeText: onChangeTracked, placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })
   ] });
 }
 
@@ -1901,7 +1944,7 @@ function ProductIcon({
         justify: "center",
         rounded: radius,
         style: { backgroundColor: color },
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: glyph, color: chunk5MBAHVEO_cjs.asColor("#ffffff") })
+        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: glyph, color: chunkXULZJEW2_cjs.asColor("#ffffff") })
       }
     );
   }
@@ -2135,6 +2178,7 @@ function ToastViewport({ toasts, dismiss }) {
   );
 }
 function ToastProvider({ children }) {
+  const track = chunk57YEM34R_cjs.useEmit();
   const [toasts, setToasts] = react.useState([]);
   const timers = react.useRef(/* @__PURE__ */ new Map());
   const seq = react.useRef(0);
@@ -2151,6 +2195,7 @@ function ToastProvider({ children }) {
       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(
@@ -2159,7 +2204,7 @@ function ToastProvider({ children }) {
         );
       }
     },
-    [dismiss]
+    [dismiss, track]
   );
   react.useEffect(() => {
     const map = timers.current;
@@ -2185,171 +2230,191 @@ function useToast() {
 
 Object.defineProperty(exports, "AgnosticThemeToggle", {
   enumerable: true,
-  get: function () { return chunkYBXVUV7P_cjs.AgnosticThemeToggle; }
+  get: function () { return chunkJ3P63OX6_cjs.AgnosticThemeToggle; }
 });
 Object.defineProperty(exports, "ThemeToggle", {
   enumerable: true,
-  get: function () { return chunkYBXVUV7P_cjs.ThemeToggle; }
+  get: function () { return chunkJ3P63OX6_cjs.ThemeToggle; }
 });
 Object.defineProperty(exports, "ThemeToggleNext", {
   enumerable: true,
-  get: function () { return chunkYBXVUV7P_cjs.ThemeToggleNext; }
+  get: function () { return chunkJ3P63OX6_cjs.ThemeToggleNext; }
 });
 Object.defineProperty(exports, "BackendStateCard", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.BackendStateCard; }
+  get: function () { return chunkXULZJEW2_cjs.BackendStateCard; }
 });
 Object.defineProperty(exports, "COMPOSE_MODES", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.COMPOSE_MODES; }
+  get: function () { return chunkXULZJEW2_cjs.COMPOSE_MODES; }
 });
 Object.defineProperty(exports, "CampaignCard", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.CampaignCard; }
+  get: function () { return chunkXULZJEW2_cjs.CampaignCard; }
 });
 Object.defineProperty(exports, "ChannelBadge", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.ChannelBadge; }
+  get: function () { return chunkXULZJEW2_cjs.ChannelBadge; }
 });
 Object.defineProperty(exports, "DataTable", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.DataTable; }
+  get: function () { return chunkXULZJEW2_cjs.DataTable; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.EmptyState; }
+  get: function () { return chunkXULZJEW2_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "FieldRow", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.FieldRow; }
+  get: function () { return chunkXULZJEW2_cjs.FieldRow; }
 });
 Object.defineProperty(exports, "FieldSelect", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.FieldSelect; }
+  get: function () { return chunkXULZJEW2_cjs.FieldSelect; }
 });
 Object.defineProperty(exports, "FieldSlider", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.FieldSlider; }
+  get: function () { return chunkXULZJEW2_cjs.FieldSlider; }
 });
 Object.defineProperty(exports, "FieldSwitch", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.FieldSwitch; }
+  get: function () { return chunkXULZJEW2_cjs.FieldSwitch; }
 });
 Object.defineProperty(exports, "FieldText", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.FieldText; }
+  get: function () { return chunkXULZJEW2_cjs.FieldText; }
 });
 Object.defineProperty(exports, "FieldTextArea", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.FieldTextArea; }
+  get: function () { return chunkXULZJEW2_cjs.FieldTextArea; }
 });
 Object.defineProperty(exports, "HostProvider", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.HostProvider; }
+  get: function () { return chunkXULZJEW2_cjs.HostProvider; }
 });
 Object.defineProperty(exports, "PageHeader", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.PageHeader; }
+  get: function () { return chunkXULZJEW2_cjs.PageHeader; }
 });
 Object.defineProperty(exports, "PostAgenda", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.PostAgenda; }
+  get: function () { return chunkXULZJEW2_cjs.PostAgenda; }
 });
 Object.defineProperty(exports, "PostCard", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.PostCard; }
+  get: function () { return chunkXULZJEW2_cjs.PostCard; }
 });
 Object.defineProperty(exports, "PostComposer", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.PostComposer; }
+  get: function () { return chunkXULZJEW2_cjs.PostComposer; }
 });
 Object.defineProperty(exports, "PrimaryButton", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.PrimaryButton; }
+  get: function () { return chunkXULZJEW2_cjs.PrimaryButton; }
 });
 Object.defineProperty(exports, "ProviderReadinessList", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.ProviderReadinessList; }
+  get: function () { return chunkXULZJEW2_cjs.ProviderReadinessList; }
 });
 Object.defineProperty(exports, "SLIDEOVER_LG", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.LG; }
+  get: function () { return chunkXULZJEW2_cjs.LG; }
 });
 Object.defineProperty(exports, "SlideOver", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.SlideOver; }
+  get: function () { return chunkXULZJEW2_cjs.SlideOver; }
 });
 Object.defineProperty(exports, "SocialResource", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.SocialResource; }
+  get: function () { return chunkXULZJEW2_cjs.SocialResource; }
 });
 Object.defineProperty(exports, "SocialSummaryBar", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.SocialSummaryBar; }
+  get: function () { return chunkXULZJEW2_cjs.SocialSummaryBar; }
 });
 Object.defineProperty(exports, "StatusTag", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.StatusTag; }
+  get: function () { return chunkXULZJEW2_cjs.StatusTag; }
 });
 Object.defineProperty(exports, "ViewToggle", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.ViewToggle; }
+  get: function () { return chunkXULZJEW2_cjs.ViewToggle; }
 });
 Object.defineProperty(exports, "accentFor", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.accentFor; }
+  get: function () { return chunkXULZJEW2_cjs.accentFor; }
 });
 Object.defineProperty(exports, "asColor", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.asColor; }
+  get: function () { return chunkXULZJEW2_cjs.asColor; }
 });
 Object.defineProperty(exports, "classifyBackend", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.classifyBackend; }
+  get: function () { return chunkXULZJEW2_cjs.classifyBackend; }
 });
 Object.defineProperty(exports, "classifyRead", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.classifyRead; }
+  get: function () { return chunkXULZJEW2_cjs.classifyRead; }
 });
 Object.defineProperty(exports, "contrastText", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.contrastText; }
+  get: function () { return chunkXULZJEW2_cjs.contrastText; }
 });
 Object.defineProperty(exports, "formatPostTime", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.formatPostTime; }
+  get: function () { return chunkXULZJEW2_cjs.formatPostTime; }
 });
 Object.defineProperty(exports, "isHexColor", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.isHexColor; }
+  get: function () { return chunkXULZJEW2_cjs.isHexColor; }
 });
 Object.defineProperty(exports, "parsePostTime", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.parsePostTime; }
+  get: function () { return chunkXULZJEW2_cjs.parsePostTime; }
 });
 Object.defineProperty(exports, "postDayBucket", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.postDayBucket; }
+  get: function () { return chunkXULZJEW2_cjs.postDayBucket; }
 });
 Object.defineProperty(exports, "postPreview", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.postPreview; }
+  get: function () { return chunkXULZJEW2_cjs.postPreview; }
 });
 Object.defineProperty(exports, "resolveAccent", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.resolveAccent; }
+  get: function () { return chunkXULZJEW2_cjs.resolveAccent; }
 });
 Object.defineProperty(exports, "setOrgAccent", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.setOrgAccent; }
+  get: function () { return chunkXULZJEW2_cjs.setOrgAccent; }
 });
 Object.defineProperty(exports, "useAccent", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.useAccent; }
+  get: function () { return chunkXULZJEW2_cjs.useAccent; }
 });
 Object.defineProperty(exports, "useHost", {
   enumerable: true,
-  get: function () { return chunk5MBAHVEO_cjs.useHost; }
+  get: function () { return chunkXULZJEW2_cjs.useHost; }
+});
+Object.defineProperty(exports, "InstrumentSurface", {
+  enumerable: true,
+  get: function () { return chunk57YEM34R_cjs.InstrumentSurface; }
+});
+Object.defineProperty(exports, "emit", {
+  enumerable: true,
+  get: function () { return chunk57YEM34R_cjs.emit; }
+});
+Object.defineProperty(exports, "textSize", {
+  enumerable: true,
+  get: function () { return chunk57YEM34R_cjs.textSize; }
+});
+Object.defineProperty(exports, "useEmit", {
+  enumerable: true,
+  get: function () { return chunk57YEM34R_cjs.useEmit; }
+});
+Object.defineProperty(exports, "useSurface", {
+  enumerable: true,
+  get: function () { return chunk57YEM34R_cjs.useSurface; }
 });
 Object.defineProperty(exports, "ACCOUNT_STATUSES", {
   enumerable: true,