@hanzo/ui 8.0.17 → 8.0.19

package/dist/chunk-57YEM34R.cjs

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var telemetry = require('@hanzogui/telemetry');
+
+// src/product/instrument.ts
+var SurfaceContext = react.createContext(void 0);
+var InstrumentSurface = SurfaceContext.Provider;
+var useSurface = () => react.useContext(SurfaceContext);
+function emit(e) {
+  telemetry.track(telemetry.EVENTS.FEATURE_USED, {
+    component: e.component,
+    action: e.action,
+    ...e.id !== void 0 ? { id: e.id } : null,
+    ...e.value !== void 0 ? { value: e.value } : null,
+    ...e.surface !== void 0 ? { surface: e.surface } : null
+  });
+}
+function useEmit() {
+  const surface = useSurface();
+  return react.useCallback(
+    (e) => emit(surface !== void 0 && e.surface === void 0 ? { ...e, surface } : e),
+    [surface]
+  );
+}
+var textSize = (s) => s ? s.length : 0;
+
+exports.InstrumentSurface = InstrumentSurface;
+exports.emit = emit;
+exports.textSize = textSize;
+exports.useEmit = useEmit;
+exports.useSurface = useSurface;
+//# sourceMappingURL=chunk-57YEM34R.cjs.map
+//# sourceMappingURL=chunk-57YEM34R.cjs.map

package/dist/chunk-57YEM34R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product/instrument.ts"],"names":["createContext","useContext","track","EVENTS","useCallback"],"mappings":";;;;;;AAkEA,IAAM,cAAA,GAAiBA,oBAAkC,MAAS,CAAA;AAI3D,IAAM,oBAAoB,cAAA,CAAe;AAGzC,IAAM,UAAA,GAAa,MAA0BC,gBAAA,CAAW,cAAc;AAItE,SAAS,KAAK,CAAA,EAAkB;AACrC,EAAAC,eAAA,CAAMC,iBAAO,YAAA,EAAc;AAAA,IACzB,WAAW,CAAA,CAAE,SAAA;AAAA,IACb,QAAQ,CAAA,CAAE,MAAA;AAAA,IACV,GAAI,EAAE,EAAA,KAAO,MAAA,GAAY,EAAE,EAAA,EAAI,CAAA,CAAE,IAAG,GAAI,IAAA;AAAA,IACxC,GAAI,EAAE,KAAA,KAAU,MAAA,GAAY,EAAE,KAAA,EAAO,CAAA,CAAE,OAAM,GAAI,IAAA;AAAA,IACjD,GAAI,EAAE,OAAA,KAAY,MAAA,GAAY,EAAE,OAAA,EAAS,CAAA,CAAE,SAAQ,GAAI;AAAA,GACxD,CAAA;AACH;AAIO,SAAS,OAAA,GAAgC;AAC9C,EAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,EAAA,OAAOC,iBAAA;AAAA,IACL,CAAC,CAAA,KAAe,IAAA,CAAK,OAAA,KAAY,MAAA,IAAa,CAAA,CAAE,OAAA,KAAY,MAAA,GAAY,EAAE,GAAG,CAAA,EAAG,OAAA,KAAY,CAAC,CAAA;AAAA,IAC7F,CAAC,OAAO;AAAA,GACV;AACF;AAKO,IAAM,QAAA,GAAW,CAAC,CAAA,KAAmC,CAAA,GAAI,EAAE,MAAA,GAAS","file":"chunk-57YEM34R.cjs","sourcesContent":["// The ONE place a shared component says what a user just did.\n//\n// Instrumenting the COMPONENT beats instrumenting 100 apps: a product that\n// renders `DataTable`, `PrimaryButton`, `SlideOver`, `ConfirmDelete`, `Field*`,\n// `ComboBox`, `Segmented`, `SearchInput`, `OrgSwitcher`, `MenuItemView`,\n// `EmptyState` or `ThemeToggle` reports the SAME interaction vocabulary with\n// zero app code. Nothing to wire, nothing to remember, nothing to drift.\n//\n//   import { emit, useEmit, InstrumentSurface } from '@hanzo/ui'\n//   <InstrumentSurface name=\"billing\">…</InstrumentSurface>   // optional context\n//\n// ONE event name, structured properties — the taxonomy in @hanzo/event is a\n// CLOSED set, and its own rule for a product-specific moment is \"the `action`\n// property, never a new event name\". So every UI interaction is\n// EVENTS.FEATURE_USED carrying { component, action, surface, id, value }.\n// Funnel moments (signup, checkout, deploy) keep their own dedicated names and\n// are emitted by the surface that owns them, not by a button.\n//\n// One stream: `track` from @hanzogui/telemetry — already a dependency of this\n// package and already THE front door (POST api.hanzo.ai/v1/event). No second\n// client, no CDN script, no `window` poking. It is SSR-safe, consent-aware,\n// honors DNT/GPC, and is fail-soft by construction, so this module inherits all\n// of that and adds no error policy of its own.\n\nimport { createContext, useCallback, useContext } from 'react'\n// ONE dependency edge: @hanzogui/telemetry owns the transport AND re-exports the\n// @hanzo/event vocabulary, so this package never names a second source of truth.\nimport { EVENTS, track } from '@hanzogui/telemetry'\n\n/** What a user did to a component. A closed set — it is the verb half of the\n *  vocabulary, and a closed verb set is what makes cross-product funnels join. */\nexport type UiAction =\n  | 'click'\n  | 'open'\n  | 'close'\n  | 'select'\n  | 'change'\n  | 'sort'\n  | 'filter'\n  | 'search'\n  | 'confirm'\n  | 'cancel'\n  | 'dismiss'\n  | 'expand'\n  | 'view'\n  | 'error'\n\n/** One interaction. `component` + `action` are required; everything else is the\n *  detail a lens groups by. Values are scrubbed downstream by @hanzo/event. */\nexport interface UiEvent {\n  /** The shared component that observed it — `DataTable`, `PrimaryButton`, … */\n  component: string\n  action: UiAction\n  /** The thing acted on: a column key, an option value, a menu item id. */\n  id?: string\n  /** A small scalar detail (sort direction, boolean state, count). Never PII —\n   *  free-text values (search terms, field contents) are reported as a LENGTH,\n   *  by the caller, not as the text. */\n  value?: string | number | boolean\n  /** The product area, when the app declared one via `<InstrumentSurface/>`. */\n  surface?: string\n}\n\n/** The enclosing product area (route/module). Optional: with no provider the\n *  events still carry component+action, and the product+path already come from\n *  the telemetry client. */\nconst SurfaceContext = createContext<string | undefined>(undefined)\n\n/** Names the product area every shared component inside it reports under.\n *  Plain provider, no element — it must not perturb any layout. */\nexport const InstrumentSurface = SurfaceContext.Provider\n\n/** The current product area, or undefined outside a provider. */\nexport const useSurface = (): string | undefined => useContext(SurfaceContext)\n\n/** Report an interaction. Callable from anywhere (module scope, event handler,\n *  a non-React host) — the ambient telemetry client is built on first use. */\nexport function emit(e: UiEvent): void {\n  track(EVENTS.FEATURE_USED, {\n    component: e.component,\n    action: e.action,\n    ...(e.id !== undefined ? { id: e.id } : null),\n    ...(e.value !== undefined ? { value: e.value } : null),\n    ...(e.surface !== undefined ? { surface: e.surface } : null),\n  })\n}\n\n/** `emit` with the surrounding `<InstrumentSurface/>` already bound — what the\n *  shared components themselves use, so an app never labels a surface twice. */\nexport function useEmit(): (e: UiEvent) => void {\n  const surface = useSurface()\n  return useCallback(\n    (e: UiEvent) => emit(surface !== undefined && e.surface === undefined ? { ...e, surface } : e),\n    [surface],\n  )\n}\n\n/** Free text (a search box, a text field) is reported as its LENGTH — the shape\n *  of the behaviour without the content. One helper so no component invents its\n *  own idea of \"safe to send\". */\nexport const textSize = (s: string | undefined): number => (s ? s.length : 0)\n"]}

package/dist/{chunk-YBXVUV7P.cjs → chunk-J3P63OX6.cjs}

@@ -1,13 +1,13 @@
 'use client';
 'use strict';
 
+var chunk57YEM34R_cjs = require('./chunk-57YEM34R.cjs');
 var nextTheme = require('@hanzogui/next-theme');
 var react = require('react');
 var gui = require('@hanzo/gui');
 var lucideIcons2 = require('@hanzogui/lucide-icons-2');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/product/ThemeToggleNext.tsx
 var STORAGE_KEY = "theme";
 function readDomTheme() {
   if (typeof document === "undefined") return void 0;
@@ -44,8 +44,10 @@ function AgnosticThemeToggle({
   const [internal, setInternal] = react.useState(() => theme ?? defaultTheme ?? readDomTheme() ?? "dark");
   const current = controlled ? theme : internal;
   const isDark = current === "dark";
+  const track = chunk57YEM34R_cjs.useEmit();
   const toggle = () => {
     const next = isDark ? "light" : "dark";
+    track({ component: "ThemeToggle", action: "change", value: next });
     if (!controlled) {
       setInternal(next);
       applyDomTheme(next);
@@ -64,7 +66,7 @@ function AgnosticThemeToggle({
     }
   );
 }
-var NextThemeToggle = react.lazy(() => import('./ThemeToggleNext-ICB5KL5J.cjs'));
+var NextThemeToggle = react.lazy(() => import('./ThemeToggleNext-LI3SBFW7.cjs'));
 var NextThemeBoundary = class extends react.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
@@ -99,5 +101,5 @@ exports.AgnosticThemeToggle = AgnosticThemeToggle;
 exports.ThemeToggle = ThemeToggle;
 exports.ThemeToggleNext = ThemeToggleNext;
 exports.ThemeToggleNext_default = ThemeToggleNext_default;
-//# sourceMappingURL=chunk-YBXVUV7P.cjs.map
-//# sourceMappingURL=chunk-YBXVUV7P.cjs.map
+//# sourceMappingURL=chunk-J3P63OX6.cjs.map
+//# sourceMappingURL=chunk-J3P63OX6.cjs.map

package/dist/chunk-J3P63OX6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product/ThemeToggle.tsx","../src/product/ThemeToggleNext.tsx"],"names":["useState","useEmit","jsx","Button","Sun","Moon","lazy","Component","Suspense","useThemeSetting"],"mappings":"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","file":"chunk-J3P63OX6.cjs","sourcesContent":["'use client'\n\n/**\n * ThemeToggle — flips between dark and light. Framework-agnostic by default so\n * Vite / Tauri / Express hosts can use it with NO Next dependency:\n *\n *   • Controlled:  <ThemeToggle theme={theme} onToggle={setTheme} />   (host owns theme)\n *   • Uncontrolled (agnostic): <ThemeToggle onThemeChange={fn} />       (toggles the DOM\n *                              `.dark` class + persists to localStorage)\n *   • Uncontrolled (no props): <ThemeToggle />                          (console/Next —\n *                              falls back to the OPTIONAL @hanzogui/next-theme path;\n *                              if it cannot load, degrades to the agnostic DOM toggle)\n *\n * Shows the action's target icon (a sun in dark mode, a moon in light mode).\n */\nimport type { ReactNode } from 'react'\nimport { Component, Suspense, lazy, useState } from 'react'\nimport { Button } from '@hanzo/gui'\nimport { Moon, Sun } from '@hanzogui/lucide-icons-2'\n\nimport { useEmit } from './instrument'\n\nexport type ThemeMode = 'light' | 'dark'\n\nexport type ThemeToggleProps = {\n  /** Controlled theme. Pair with `onToggle`/`onThemeChange` to fully control it. */\n  theme?: ThemeMode\n  /** Seed for uncontrolled mode (default: read from the DOM `.dark` class, else 'dark'). */\n  defaultTheme?: ThemeMode\n  /** Called with the next theme on toggle (alias of `onThemeChange`). */\n  onToggle?: (next: ThemeMode) => void\n  /** Called with the next theme on toggle. */\n  onThemeChange?: (next: ThemeMode) => void\n  /** @hanzo/gui Button size token (default \"$2\"). */\n  size?: string\n  /** aria-label override. */\n  label?: string\n}\n\nconst STORAGE_KEY = 'theme'\n\nfunction readDomTheme(): ThemeMode | undefined {\n  if (typeof document === 'undefined') return undefined\n  const el = document.documentElement\n  if (el.classList.contains('dark')) return 'dark'\n  if (el.classList.contains('light')) return 'light'\n  try {\n    const ls = window.localStorage.getItem(STORAGE_KEY)\n    if (ls === 'light' || ls === 'dark') return ls\n  } catch {\n    /* localStorage may be unavailable */\n  }\n  return undefined\n}\n\nfunction applyDomTheme(next: ThemeMode): void {\n  if (typeof document === 'undefined') return\n  const el = document.documentElement\n  el.classList.toggle('dark', next === 'dark')\n  el.classList.toggle('light', next === 'light')\n  el.style.colorScheme = next\n  try {\n    window.localStorage.setItem(STORAGE_KEY, next)\n  } catch {\n    /* ignore */\n  }\n}\n\n/**\n * The framework-agnostic toggle button. Controlled when `theme` is provided; otherwise\n * self-managed via the DOM `.dark` class. No framework dependency — safe on any host.\n */\nexport function AgnosticThemeToggle({\n  theme,\n  defaultTheme,\n  onToggle,\n  onThemeChange,\n  size = '$2',\n  label,\n}: ThemeToggleProps) {\n  const controlled = theme !== undefined\n  const [internal, setInternal] = useState<ThemeMode>(() => theme ?? defaultTheme ?? readDomTheme() ?? 'dark')\n  const current: ThemeMode = controlled ? (theme as ThemeMode) : internal\n  const isDark = current === 'dark'\n  const track = useEmit()\n\n  const toggle = () => {\n    const next: ThemeMode = isDark ? 'light' : 'dark'\n    track({ component: 'ThemeToggle', action: 'change', value: next })\n    if (!controlled) {\n      setInternal(next)\n      applyDomTheme(next)\n    }\n    onToggle?.(next)\n    onThemeChange?.(next)\n  }\n\n  return (\n    <Button\n      size={size as never}\n      chromeless\n      icon={isDark ? <Sun size={16} /> : <Moon size={16} />}\n      onPress={toggle}\n      aria-label={label ?? (isDark ? 'Switch to light theme' : 'Switch to dark theme')}\n    />\n  )\n}\n\n// @hanzogui/next-theme is an OPTIONAL dependency — loaded only on the uncontrolled,\n// no-props path (console/Next). Lazily code-split so non-Next hosts never need it at\n// runtime; if it fails to load, the boundary below degrades to the agnostic toggle.\nconst NextThemeToggle = lazy(() => import('./ThemeToggleNext'))\n\nclass NextThemeBoundary extends Component<{ fallback: ReactNode; children: ReactNode }, { failed: boolean }> {\n  state = { failed: false }\n  static getDerivedStateFromError() {\n    return { failed: true }\n  }\n  render() {\n    return this.state.failed ? this.props.fallback : this.props.children\n  }\n}\n\nexport function ThemeToggle(props: ThemeToggleProps) {\n  const injected =\n    props.theme !== undefined || props.onToggle !== undefined || props.onThemeChange !== undefined\n  if (injected) return <AgnosticThemeToggle {...props} />\n\n  // No props → keep the existing console/Next behaviour via the optional next-theme\n  // path, degrading to the agnostic DOM toggle if it is not installed.\n  const fallback = <AgnosticThemeToggle {...props} />\n  return (\n    <NextThemeBoundary fallback={fallback}>\n      <Suspense fallback={fallback}>\n        <NextThemeToggle size={props.size} label={props.label} />\n      </Suspense>\n    </NextThemeBoundary>\n  )\n}\n","'use client'\n\n/**\n * ThemeToggleNext — the @hanzogui/next-theme binding (console / Next). This is the ONLY\n * module that imports @hanzogui/next-theme, so it stays an OPTIONAL dependency: the base\n * ThemeToggle lazy-loads it (default export) and non-Next hosts never pull it in unless\n * they import this component directly. UI is delegated to the framework-agnostic button\n * in controlled mode, so every toggle looks identical.\n */\nimport { useThemeSetting } from '@hanzogui/next-theme'\nimport { AgnosticThemeToggle, type ThemeToggleProps } from './ThemeToggle'\n\nfunction ThemeToggleNext({ size, label }: Pick<ThemeToggleProps, 'size' | 'label'>) {\n  const { current, resolvedTheme, set } = useThemeSetting()\n  const isDark = (resolvedTheme ?? current ?? 'dark') !== 'light'\n  return (\n    <AgnosticThemeToggle\n      theme={isDark ? 'dark' : 'light'}\n      onToggle={(next) => set(next)}\n      size={size}\n      label={label}\n    />\n  )\n}\n\nexport default ThemeToggleNext\nexport { ThemeToggleNext }\n"]}

package/dist/chunk-P6IHE2O3.js

@@ -0,0 +1,29 @@
+'use client';
+import { createContext, useContext, useCallback } from 'react';
+import { track, EVENTS } from '@hanzogui/telemetry';
+
+// src/product/instrument.ts
+var SurfaceContext = createContext(void 0);
+var InstrumentSurface = SurfaceContext.Provider;
+var useSurface = () => useContext(SurfaceContext);
+function emit(e) {
+  track(EVENTS.FEATURE_USED, {
+    component: e.component,
+    action: e.action,
+    ...e.id !== void 0 ? { id: e.id } : null,
+    ...e.value !== void 0 ? { value: e.value } : null,
+    ...e.surface !== void 0 ? { surface: e.surface } : null
+  });
+}
+function useEmit() {
+  const surface = useSurface();
+  return useCallback(
+    (e) => emit(surface !== void 0 && e.surface === void 0 ? { ...e, surface } : e),
+    [surface]
+  );
+}
+var textSize = (s) => s ? s.length : 0;
+
+export { InstrumentSurface, emit, textSize, useEmit, useSurface };
+//# sourceMappingURL=chunk-P6IHE2O3.js.map
+//# sourceMappingURL=chunk-P6IHE2O3.js.map

package/dist/chunk-P6IHE2O3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product/instrument.ts"],"names":[],"mappings":";;;;AAkEA,IAAM,cAAA,GAAiB,cAAkC,MAAS,CAAA;AAI3D,IAAM,oBAAoB,cAAA,CAAe;AAGzC,IAAM,UAAA,GAAa,MAA0B,UAAA,CAAW,cAAc;AAItE,SAAS,KAAK,CAAA,EAAkB;AACrC,EAAA,KAAA,CAAM,OAAO,YAAA,EAAc;AAAA,IACzB,WAAW,CAAA,CAAE,SAAA;AAAA,IACb,QAAQ,CAAA,CAAE,MAAA;AAAA,IACV,GAAI,EAAE,EAAA,KAAO,MAAA,GAAY,EAAE,EAAA,EAAI,CAAA,CAAE,IAAG,GAAI,IAAA;AAAA,IACxC,GAAI,EAAE,KAAA,KAAU,MAAA,GAAY,EAAE,KAAA,EAAO,CAAA,CAAE,OAAM,GAAI,IAAA;AAAA,IACjD,GAAI,EAAE,OAAA,KAAY,MAAA,GAAY,EAAE,OAAA,EAAS,CAAA,CAAE,SAAQ,GAAI;AAAA,GACxD,CAAA;AACH;AAIO,SAAS,OAAA,GAAgC;AAC9C,EAAA,MAAM,UAAU,UAAA,EAAW;AAC3B,EAAA,OAAO,WAAA;AAAA,IACL,CAAC,CAAA,KAAe,IAAA,CAAK,OAAA,KAAY,MAAA,IAAa,CAAA,CAAE,OAAA,KAAY,MAAA,GAAY,EAAE,GAAG,CAAA,EAAG,OAAA,KAAY,CAAC,CAAA;AAAA,IAC7F,CAAC,OAAO;AAAA,GACV;AACF;AAKO,IAAM,QAAA,GAAW,CAAC,CAAA,KAAmC,CAAA,GAAI,EAAE,MAAA,GAAS","file":"chunk-P6IHE2O3.js","sourcesContent":["// The ONE place a shared component says what a user just did.\n//\n// Instrumenting the COMPONENT beats instrumenting 100 apps: a product that\n// renders `DataTable`, `PrimaryButton`, `SlideOver`, `ConfirmDelete`, `Field*`,\n// `ComboBox`, `Segmented`, `SearchInput`, `OrgSwitcher`, `MenuItemView`,\n// `EmptyState` or `ThemeToggle` reports the SAME interaction vocabulary with\n// zero app code. Nothing to wire, nothing to remember, nothing to drift.\n//\n//   import { emit, useEmit, InstrumentSurface } from '@hanzo/ui'\n//   <InstrumentSurface name=\"billing\">…</InstrumentSurface>   // optional context\n//\n// ONE event name, structured properties — the taxonomy in @hanzo/event is a\n// CLOSED set, and its own rule for a product-specific moment is \"the `action`\n// property, never a new event name\". So every UI interaction is\n// EVENTS.FEATURE_USED carrying { component, action, surface, id, value }.\n// Funnel moments (signup, checkout, deploy) keep their own dedicated names and\n// are emitted by the surface that owns them, not by a button.\n//\n// One stream: `track` from @hanzogui/telemetry — already a dependency of this\n// package and already THE front door (POST api.hanzo.ai/v1/event). No second\n// client, no CDN script, no `window` poking. It is SSR-safe, consent-aware,\n// honors DNT/GPC, and is fail-soft by construction, so this module inherits all\n// of that and adds no error policy of its own.\n\nimport { createContext, useCallback, useContext } from 'react'\n// ONE dependency edge: @hanzogui/telemetry owns the transport AND re-exports the\n// @hanzo/event vocabulary, so this package never names a second source of truth.\nimport { EVENTS, track } from '@hanzogui/telemetry'\n\n/** What a user did to a component. A closed set — it is the verb half of the\n *  vocabulary, and a closed verb set is what makes cross-product funnels join. */\nexport type UiAction =\n  | 'click'\n  | 'open'\n  | 'close'\n  | 'select'\n  | 'change'\n  | 'sort'\n  | 'filter'\n  | 'search'\n  | 'confirm'\n  | 'cancel'\n  | 'dismiss'\n  | 'expand'\n  | 'view'\n  | 'error'\n\n/** One interaction. `component` + `action` are required; everything else is the\n *  detail a lens groups by. Values are scrubbed downstream by @hanzo/event. */\nexport interface UiEvent {\n  /** The shared component that observed it — `DataTable`, `PrimaryButton`, … */\n  component: string\n  action: UiAction\n  /** The thing acted on: a column key, an option value, a menu item id. */\n  id?: string\n  /** A small scalar detail (sort direction, boolean state, count). Never PII —\n   *  free-text values (search terms, field contents) are reported as a LENGTH,\n   *  by the caller, not as the text. */\n  value?: string | number | boolean\n  /** The product area, when the app declared one via `<InstrumentSurface/>`. */\n  surface?: string\n}\n\n/** The enclosing product area (route/module). Optional: with no provider the\n *  events still carry component+action, and the product+path already come from\n *  the telemetry client. */\nconst SurfaceContext = createContext<string | undefined>(undefined)\n\n/** Names the product area every shared component inside it reports under.\n *  Plain provider, no element — it must not perturb any layout. */\nexport const InstrumentSurface = SurfaceContext.Provider\n\n/** The current product area, or undefined outside a provider. */\nexport const useSurface = (): string | undefined => useContext(SurfaceContext)\n\n/** Report an interaction. Callable from anywhere (module scope, event handler,\n *  a non-React host) — the ambient telemetry client is built on first use. */\nexport function emit(e: UiEvent): void {\n  track(EVENTS.FEATURE_USED, {\n    component: e.component,\n    action: e.action,\n    ...(e.id !== undefined ? { id: e.id } : null),\n    ...(e.value !== undefined ? { value: e.value } : null),\n    ...(e.surface !== undefined ? { surface: e.surface } : null),\n  })\n}\n\n/** `emit` with the surrounding `<InstrumentSurface/>` already bound — what the\n *  shared components themselves use, so an app never labels a surface twice. */\nexport function useEmit(): (e: UiEvent) => void {\n  const surface = useSurface()\n  return useCallback(\n    (e: UiEvent) => emit(surface !== undefined && e.surface === undefined ? { ...e, surface } : e),\n    [surface],\n  )\n}\n\n/** Free text (a search box, a text field) is reported as its LENGTH — the shape\n *  of the behaviour without the content. One helper so no component invents its\n *  own idea of \"safe to send\". */\nexport const textSize = (s: string | undefined): number => (s ? s.length : 0)\n"]}

package/dist/{chunk-42CU5GSF.js → chunk-T3UAC7ZZ.js}

@@ -1,11 +1,11 @@
 'use client';
+import { useEmit } from './chunk-P6IHE2O3.js';
 import { useThemeSetting } from '@hanzogui/next-theme';
 import { lazy, useState, Suspense, Component } from 'react';
 import { Button } from '@hanzo/gui';
 import { Sun, Moon } from '@hanzogui/lucide-icons-2';
 import { jsx } from 'react/jsx-runtime';
 
-// src/product/ThemeToggleNext.tsx
 var STORAGE_KEY = "theme";
 function readDomTheme() {
   if (typeof document === "undefined") return void 0;
@@ -42,8 +42,10 @@ function AgnosticThemeToggle({
   const [internal, setInternal] = useState(() => theme ?? defaultTheme ?? readDomTheme() ?? "dark");
   const current = controlled ? theme : internal;
   const isDark = current === "dark";
+  const track = useEmit();
   const toggle = () => {
     const next = isDark ? "light" : "dark";
+    track({ component: "ThemeToggle", action: "change", value: next });
     if (!controlled) {
       setInternal(next);
       applyDomTheme(next);
@@ -62,7 +64,7 @@ function AgnosticThemeToggle({
     }
   );
 }
-var NextThemeToggle = lazy(() => import('./ThemeToggleNext-7727UR5W.js'));
+var NextThemeToggle = lazy(() => import('./ThemeToggleNext-OMBC67MO.js'));
 var NextThemeBoundary = class extends Component {
   state = { failed: false };
   static getDerivedStateFromError() {
@@ -94,5 +96,5 @@ function ThemeToggleNext({ size, label }) {
 var ThemeToggleNext_default = ThemeToggleNext;
 
 export { AgnosticThemeToggle, ThemeToggle, ThemeToggleNext, ThemeToggleNext_default };
-//# sourceMappingURL=chunk-42CU5GSF.js.map
-//# sourceMappingURL=chunk-42CU5GSF.js.map
+//# sourceMappingURL=chunk-T3UAC7ZZ.js.map
+//# sourceMappingURL=chunk-T3UAC7ZZ.js.map

package/dist/chunk-T3UAC7ZZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product/ThemeToggle.tsx","../src/product/ThemeToggleNext.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-T3UAC7ZZ.js","sourcesContent":["'use client'\n\n/**\n * ThemeToggle — flips between dark and light. Framework-agnostic by default so\n * Vite / Tauri / Express hosts can use it with NO Next dependency:\n *\n *   • Controlled:  <ThemeToggle theme={theme} onToggle={setTheme} />   (host owns theme)\n *   • Uncontrolled (agnostic): <ThemeToggle onThemeChange={fn} />       (toggles the DOM\n *                              `.dark` class + persists to localStorage)\n *   • Uncontrolled (no props): <ThemeToggle />                          (console/Next —\n *                              falls back to the OPTIONAL @hanzogui/next-theme path;\n *                              if it cannot load, degrades to the agnostic DOM toggle)\n *\n * Shows the action's target icon (a sun in dark mode, a moon in light mode).\n */\nimport type { ReactNode } from 'react'\nimport { Component, Suspense, lazy, useState } from 'react'\nimport { Button } from '@hanzo/gui'\nimport { Moon, Sun } from '@hanzogui/lucide-icons-2'\n\nimport { useEmit } from './instrument'\n\nexport type ThemeMode = 'light' | 'dark'\n\nexport type ThemeToggleProps = {\n  /** Controlled theme. Pair with `onToggle`/`onThemeChange` to fully control it. */\n  theme?: ThemeMode\n  /** Seed for uncontrolled mode (default: read from the DOM `.dark` class, else 'dark'). */\n  defaultTheme?: ThemeMode\n  /** Called with the next theme on toggle (alias of `onThemeChange`). */\n  onToggle?: (next: ThemeMode) => void\n  /** Called with the next theme on toggle. */\n  onThemeChange?: (next: ThemeMode) => void\n  /** @hanzo/gui Button size token (default \"$2\"). */\n  size?: string\n  /** aria-label override. */\n  label?: string\n}\n\nconst STORAGE_KEY = 'theme'\n\nfunction readDomTheme(): ThemeMode | undefined {\n  if (typeof document === 'undefined') return undefined\n  const el = document.documentElement\n  if (el.classList.contains('dark')) return 'dark'\n  if (el.classList.contains('light')) return 'light'\n  try {\n    const ls = window.localStorage.getItem(STORAGE_KEY)\n    if (ls === 'light' || ls === 'dark') return ls\n  } catch {\n    /* localStorage may be unavailable */\n  }\n  return undefined\n}\n\nfunction applyDomTheme(next: ThemeMode): void {\n  if (typeof document === 'undefined') return\n  const el = document.documentElement\n  el.classList.toggle('dark', next === 'dark')\n  el.classList.toggle('light', next === 'light')\n  el.style.colorScheme = next\n  try {\n    window.localStorage.setItem(STORAGE_KEY, next)\n  } catch {\n    /* ignore */\n  }\n}\n\n/**\n * The framework-agnostic toggle button. Controlled when `theme` is provided; otherwise\n * self-managed via the DOM `.dark` class. No framework dependency — safe on any host.\n */\nexport function AgnosticThemeToggle({\n  theme,\n  defaultTheme,\n  onToggle,\n  onThemeChange,\n  size = '$2',\n  label,\n}: ThemeToggleProps) {\n  const controlled = theme !== undefined\n  const [internal, setInternal] = useState<ThemeMode>(() => theme ?? defaultTheme ?? readDomTheme() ?? 'dark')\n  const current: ThemeMode = controlled ? (theme as ThemeMode) : internal\n  const isDark = current === 'dark'\n  const track = useEmit()\n\n  const toggle = () => {\n    const next: ThemeMode = isDark ? 'light' : 'dark'\n    track({ component: 'ThemeToggle', action: 'change', value: next })\n    if (!controlled) {\n      setInternal(next)\n      applyDomTheme(next)\n    }\n    onToggle?.(next)\n    onThemeChange?.(next)\n  }\n\n  return (\n    <Button\n      size={size as never}\n      chromeless\n      icon={isDark ? <Sun size={16} /> : <Moon size={16} />}\n      onPress={toggle}\n      aria-label={label ?? (isDark ? 'Switch to light theme' : 'Switch to dark theme')}\n    />\n  )\n}\n\n// @hanzogui/next-theme is an OPTIONAL dependency — loaded only on the uncontrolled,\n// no-props path (console/Next). Lazily code-split so non-Next hosts never need it at\n// runtime; if it fails to load, the boundary below degrades to the agnostic toggle.\nconst NextThemeToggle = lazy(() => import('./ThemeToggleNext'))\n\nclass NextThemeBoundary extends Component<{ fallback: ReactNode; children: ReactNode }, { failed: boolean }> {\n  state = { failed: false }\n  static getDerivedStateFromError() {\n    return { failed: true }\n  }\n  render() {\n    return this.state.failed ? this.props.fallback : this.props.children\n  }\n}\n\nexport function ThemeToggle(props: ThemeToggleProps) {\n  const injected =\n    props.theme !== undefined || props.onToggle !== undefined || props.onThemeChange !== undefined\n  if (injected) return <AgnosticThemeToggle {...props} />\n\n  // No props → keep the existing console/Next behaviour via the optional next-theme\n  // path, degrading to the agnostic DOM toggle if it is not installed.\n  const fallback = <AgnosticThemeToggle {...props} />\n  return (\n    <NextThemeBoundary fallback={fallback}>\n      <Suspense fallback={fallback}>\n        <NextThemeToggle size={props.size} label={props.label} />\n      </Suspense>\n    </NextThemeBoundary>\n  )\n}\n","'use client'\n\n/**\n * ThemeToggleNext — the @hanzogui/next-theme binding (console / Next). This is the ONLY\n * module that imports @hanzogui/next-theme, so it stays an OPTIONAL dependency: the base\n * ThemeToggle lazy-loads it (default export) and non-Next hosts never pull it in unless\n * they import this component directly. UI is delegated to the framework-agnostic button\n * in controlled mode, so every toggle looks identical.\n */\nimport { useThemeSetting } from '@hanzogui/next-theme'\nimport { AgnosticThemeToggle, type ThemeToggleProps } from './ThemeToggle'\n\nfunction ThemeToggleNext({ size, label }: Pick<ThemeToggleProps, 'size' | 'label'>) {\n  const { current, resolvedTheme, set } = useThemeSetting()\n  const isDark = (resolvedTheme ?? current ?? 'dark') !== 'light'\n  return (\n    <AgnosticThemeToggle\n      theme={isDark ? 'dark' : 'light'}\n      onToggle={(next) => set(next)}\n      size={size}\n      label={label}\n    />\n  )\n}\n\nexport default ThemeToggleNext\nexport { ThemeToggleNext }\n"]}

package/dist/{chunk-5MBAHVEO.cjs → chunk-XULZJEW2.cjs}

@@ -1,6 +1,7 @@
 'use client';
 'use strict';
 
+var chunk57YEM34R_cjs = require('./chunk-57YEM34R.cjs');
 var chunkMWBFAV3D_cjs = require('./chunk-MWBFAV3D.cjs');
 var react = require('react');
 var gui = require('@hanzo/gui');
@@ -93,6 +94,7 @@ function DataTable({
   sort,
   onSortChange
 }) {
+  const track = chunk57YEM34R_cjs.useEmit();
   const minTableW = columns.reduce((sum, c) => sum + (c.width ?? FLEX_MIN_COL_W), 0) + (columns.length + 1) * 12;
   return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { style: { overflowX: "auto", overflowY: "visible" }, children: /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { minW: minTableW, children: [
@@ -114,7 +116,10 @@ function DataTable({
             "aria-label": sortable ? `Sort by ${c.header}` : void 0,
             cursor: sortable ? "pointer" : void 0,
             hoverStyle: sortable ? { opacity: 0.75 } : void 0,
-            onPress: sortable ? () => onSortChange?.(c.key) : void 0,
+            onPress: sortable ? () => {
+              track({ component: "DataTable", action: "sort", id: c.key, value: sort?.key === c.key && sort?.dir === "asc" ? "desc" : "asc" });
+              onSortChange?.(c.key);
+            } : void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 gui.Text,
@@ -149,7 +154,10 @@ function DataTable({
               bg: expanded ? "$color2" : void 0,
               hoverStyle: onRowPress ? { bg: "$color2" } : void 0,
               cursor: onRowPress ? "pointer" : void 0,
-              onPress: onRowPress ? () => onRowPress(row) : void 0,
+              onPress: onRowPress ? () => {
+                track({ component: "DataTable", action: "select", id: rowKey(row), value: rows.length });
+                onRowPress(row);
+              } : void 0,
               children: columns.map((c) => {
                 const cell = c.render ? c.render(row) : String(row[c.key] ?? "");
                 return /* @__PURE__ */ jsxRuntime.jsx(
@@ -236,6 +244,12 @@ function useAccent() {
 }
 function PrimaryButton(props) {
   const { accent, contrast } = useAccent();
+  const track = chunk57YEM34R_cjs.useEmit();
+  const onPress = (e) => {
+    track({ component: "PrimaryButton", action: "click", id: typeof props.children === "string" ? props.children : props["aria-label"] });
+    props.onPress?.(e);
+  };
+  props = { ...props, onPress };
   if (accent) {
     return /* @__PURE__ */ jsxRuntime.jsx(gui.Button, { style: { backgroundColor: accent, color: contrast, borderColor: accent }, ...props });
   }
@@ -252,6 +266,7 @@ function EmptyState({
   primary,
   secondary
 }) {
+  const track = chunk57YEM34R_cjs.useEmit();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     gui.Card,
     {
@@ -291,7 +306,11 @@ function EmptyState({
             {
               icon: primary.icon,
               iconAfter: primary.href ? /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.ExternalLink, { size: 15 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.ArrowRight, { size: 15 }),
-              onPress: () => primary.href ? openHref(primary.href) : primary.onPress?.(),
+              onPress: () => {
+                track({ component: "EmptyState", action: "click", id: title, value: primary.label });
+                if (primary.href) openHref(primary.href);
+                else primary.onPress?.();
+              },
               children: primary.label
             }
           ) : null,
@@ -301,7 +320,11 @@ function EmptyState({
               chromeless: true,
               icon: secondary.icon,
               iconAfter: secondary.href ? /* @__PURE__ */ jsxRuntime.jsx(lucideIcons2.ExternalLink, { size: 14 }) : void 0,
-              onPress: () => secondary.href ? openHref(secondary.href) : secondary.onPress?.(),
+              onPress: () => {
+                track({ component: "EmptyState", action: "click", id: title, value: secondary.label });
+                if (secondary.href) openHref(secondary.href);
+                else secondary.onPress?.();
+              },
               children: secondary.label
             }
           ) : null
@@ -310,11 +333,17 @@ function EmptyState({
     }
   );
 }
+var FieldNameContext = react.createContext(void 0);
+function useFieldTrack(component) {
+  const track = chunk57YEM34R_cjs.useEmit();
+  const name = react.useContext(FieldNameContext);
+  return (e) => track({ component, id: name, ...e });
+}
 function FieldRow({ label, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { gap: "$3", items: "flex-start", flexWrap: "wrap", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldNameContext.Provider, { value: label, children: /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { gap: "$3", items: "flex-start", flexWrap: "wrap", children: [
     /* @__PURE__ */ jsxRuntime.jsx(gui.Label, { width: "100%", pt: "$2", color: "$color11", fontSize: "$3", $md: { width: 180 }, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { flex: 1, minW: 0, $md: { minW: 240 }, children })
-  ] });
+  ] }) });
 }
 function FieldText({
   value,
@@ -323,11 +352,15 @@ function FieldText({
   secure,
   placeholder
 }) {
+  const track = useFieldTrack("FieldText");
   return /* @__PURE__ */ jsxRuntime.jsx(
     gui.Input,
     {
       value,
-      onChangeText: onChange,
+      onChangeText: (v) => {
+        track({ action: "change", value: secure ? 0 : chunk57YEM34R_cjs.textSize(v) });
+        onChange(v);
+      },
       disabled,
       secureTextEntry: secure,
       placeholder,
@@ -341,14 +374,39 @@ function FieldTextArea({
   disabled,
   rows = 6
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(gui.TextArea, { value, onChangeText: onChange, disabled, numberOfLines: rows });
+  const track = useFieldTrack("FieldTextArea");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.TextArea,
+    {
+      value,
+      onChangeText: (v) => {
+        track({ action: "change", value: chunk57YEM34R_cjs.textSize(v) });
+        onChange(v);
+      },
+      disabled,
+      numberOfLines: rows
+    }
+  );
 }
 function FieldSwitch({
   checked,
   onChange,
   disabled
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(gui.Switch, { checked, onCheckedChange: onChange, disabled, size: "$3", children: /* @__PURE__ */ jsxRuntime.jsx(gui.Switch.Thumb, {}) });
+  const track = useFieldTrack("FieldSwitch");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.Switch,
+    {
+      checked,
+      onCheckedChange: (v) => {
+        track({ action: "change", value: v });
+        onChange(v);
+      },
+      disabled,
+      size: "$3",
+      children: /* @__PURE__ */ jsxRuntime.jsx(gui.Switch.Thumb, {})
+    }
+  );
 }
 var CHEVRON = `data:image/svg+xml,${encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9a9a9a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>'
@@ -382,12 +440,16 @@ function FieldSelect({
   disabled,
   placeholder = "Select\u2026"
 }) {
+  const track = useFieldTrack("FieldSelect");
   const showPlaceholder = value === "" || !options.includes(value);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "select",
     {
       value: showPlaceholder ? "" : value,
-      onChange: (e) => onChange(e.currentTarget.value),
+      onChange: (e) => {
+        track({ action: "change", value: e.currentTarget.value });
+        onChange(e.currentTarget.value);
+      },
       disabled,
       "aria-label": placeholder,
       style: selectStyle(disabled),
@@ -406,6 +468,7 @@ function FieldSlider({
   onChange,
   disabled
 }) {
+  const track = useFieldTrack("FieldSlider");
   return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { gap: "$3", items: "center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { width: 56, fontSize: "$3", color: "$color11", children: value }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -416,7 +479,10 @@ function FieldSlider({
         max,
         step,
         value: [value],
-        onValueChange: (v) => onChange(v[0] ?? min),
+        onValueChange: (v) => {
+          track({ action: "change", value: v[0] ?? min });
+          onChange(v[0] ?? min);
+        },
         disabled,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.Track, { children: /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.TrackActive, {}) }),
@@ -504,8 +570,12 @@ function SlideOver({
   zIndex = 1e3,
   children
 }) {
+  const track = chunk57YEM34R_cjs.useEmit();
   const panelRef = react.useRef(null);
   const openerRef = react.useRef(null);
+  react.useEffect(() => {
+    track({ component: "SlideOver", action: open ? "open" : "close", id: typeof title === "string" ? title : ariaLabel });
+  }, [open]);
   react.useEffect(() => {
     if (!open) return;
     openerRef.current = typeof document !== "undefined" ? document.activeElement : null;
@@ -1178,5 +1248,5 @@ exports.resolveAccent = resolveAccent;
 exports.setOrgAccent = setOrgAccent;
 exports.useAccent = useAccent;
 exports.useHost = useHost;
-//# sourceMappingURL=chunk-5MBAHVEO.cjs.map
-//# sourceMappingURL=chunk-5MBAHVEO.cjs.map
+//# sourceMappingURL=chunk-XULZJEW2.cjs.map
+//# sourceMappingURL=chunk-XULZJEW2.cjs.map