@hanzo/ui 8.0.18 → 8.0.20

package/dist/product/index.d.ts

@@ -17,6 +17,7 @@ export * from './BackendState';
 export * from './CommerceResource';
 export * from './ConfirmDelete';
 export * from './Filters';
+export * from './instrument';
 export * from './AnimatedLogo';
 export * from './brand';
 export * from './DataTable';

package/dist/product/index.js

@@ -1,8 +1,10 @@
 'use client';
-import { ThemeToggle } from '../chunk-42CU5GSF.js';
-export { AgnosticThemeToggle, ThemeToggle, ThemeToggleNext } from '../chunk-42CU5GSF.js';
-import { classifyBackend, PageHeader, BackendStateCard, DataTable, asColor } from '../chunk-23V6BPHG.js';
-export { BackendStateCard, COMPOSE_MODES, CampaignCard, ChannelBadge, DataTable, EmptyState, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, HostProvider, PageHeader, PostAgenda, PostCard, PostComposer, PrimaryButton, ProviderReadinessList, LG as SLIDEOVER_LG, SlideOver, SocialResource, SocialSummaryBar, StatusTag, ViewToggle, accentFor, asColor, classifyBackend, classifyRead, contrastText, formatPostTime, isHexColor, parsePostTime, postDayBucket, postPreview, resolveAccent, setOrgAccent, useAccent, useHost } from '../chunk-23V6BPHG.js';
+import { ThemeToggle } from '../chunk-T3UAC7ZZ.js';
+export { AgnosticThemeToggle, ThemeToggle, ThemeToggleNext } from '../chunk-T3UAC7ZZ.js';
+import { classifyBackend, PageHeader, BackendStateCard, DataTable, asColor } from '../chunk-3YH7AUKQ.js';
+export { BackendStateCard, COMPOSE_MODES, CampaignCard, ChannelBadge, DataTable, EmptyState, FieldRow, FieldSelect, FieldSlider, FieldSwitch, FieldText, FieldTextArea, HostProvider, PageHeader, PostAgenda, PostCard, PostComposer, PrimaryButton, ProviderReadinessList, LG as SLIDEOVER_LG, SlideOver, SocialResource, SocialSummaryBar, StatusTag, ViewToggle, accentFor, asColor, classifyBackend, classifyRead, contrastText, formatPostTime, isHexColor, parsePostTime, postDayBucket, postPreview, resolveAccent, setOrgAccent, useAccent, useHost } from '../chunk-3YH7AUKQ.js';
+import { useEmit, textSize } from '../chunk-P6IHE2O3.js';
+export { InstrumentSurface, emit, textSize, useEmit, useSurface } from '../chunk-P6IHE2O3.js';
 export { ACCOUNT_STATUSES, POST_STATUSES, PROVIDERS, createSocialApi, normalizeAccount, normalizeAccounts, normalizePost, normalizePosts, normalizeProviderCapability, normalizeProviders, normalizeSummary } from '../chunk-ZGTJCJ55.js';
 import { createContext, useRef, useState, useEffect, useCallback, useLayoutEffect, useMemo, cloneElement, useContext } from 'react';
 import { useTheme, XStack, Text, YStack, Card, Theme, useThemeName, Portal, Input, Button, Spinner, Popover, Separator, useControllableState } from '@hanzo/gui';
@@ -578,14 +580,19 @@ function MenuItemView({
   hasSubmenu = false,
   onSelect
 }) {
+  const track = 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";
@@ -789,7 +796,9 @@ function ComboBox({
   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);
   };
@@ -817,7 +826,10 @@ function ComboBox({
           chromeless: true,
           disabled,
           icon: /* @__PURE__ */ jsx(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"
         }
       )
@@ -1139,12 +1151,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 = useEmit();
   const select = useCallback(
     (org) => {
+      track({ component: "OrgSwitcher", action: "select", id: org });
       setOpen(false);
       scope.switchOrg(org);
     },
-    [scope]
+    [scope, track]
   );
   const submitCreate = async () => {
     const name = newName.trim();
@@ -1644,14 +1658,18 @@ function ConfirmDelete({
 }) {
   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) {
-      setErr(classifyBackend(e).message || "Failed to delete.");
+      const message2 = classifyBackend(e).message || "Failed to delete.";
+      track({ component: "ConfirmDelete", action: "error", id: confirmLabel, value: message2 });
+      setErr(message2);
       setBusy(false);
     }
   };
@@ -1669,7 +1687,18 @@ function ConfirmDelete({
           children: busy ? "Deleting\u2026" : confirmLabel
         }
       ),
-      /* @__PURE__ */ jsx(Button, { chromeless: true, onPress: () => onDone(), disabled: busy, children: "Cancel" })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          chromeless: true,
+          onPress: () => {
+            track({ component: "ConfirmDelete", action: "cancel", id: confirmLabel });
+            onDone();
+          },
+          disabled: busy,
+          children: "Cancel"
+        }
+      )
     ] })
   ] });
 }
@@ -1677,8 +1706,10 @@ function Segmented({
   options,
   value,
   onChange,
-  size = "$2"
+  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(
@@ -1689,17 +1720,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__ */ jsx(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 = 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: onChange, placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })
+    /* @__PURE__ */ jsx(Input, { flex: 1, value, onChangeText: onChangeTracked, placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })
   ] });
 }
 
@@ -2136,6 +2180,7 @@ function ToastViewport({ toasts, dismiss }) {
   );
 }
 function ToastProvider({ children }) {
+  const track = useEmit();
   const [toasts, setToasts] = useState([]);
   const timers = useRef(/* @__PURE__ */ new Map());
   const seq = useRef(0);
@@ -2152,6 +2197,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(
@@ -2160,7 +2206,7 @@ function ToastProvider({ children }) {
         );
       }
     },
-    [dismiss]
+    [dismiss, track]
   );
   useEffect(() => {
     const map = timers.current;