@hanzo/ui 8.0.27 → 8.0.28

package/dist/product/instrument.cjs

@@ -0,0 +1,79 @@
+'use client';"use strict";
+// The ONE place a shared component says what a user just did.
+//
+// Instrumenting the COMPONENT beats instrumenting 100 apps: a product that
+// renders `DataTable`, `PrimaryButton`, `SlideOver`, `ConfirmDelete`, `Field*`,
+// `ComboBox`, `Segmented`, `SearchInput`, `OrgSwitcher`, `MenuItemView`,
+// `EmptyState` or `ThemeToggle` reports the SAME interaction vocabulary with
+// zero app code. Nothing to wire, nothing to remember, nothing to drift.
+//
+//   import { emit, useEmit, InstrumentSurface } from '@hanzo/ui'
+//   <InstrumentSurface name="billing">…</InstrumentSurface>   // optional context
+//
+// ONE event name, structured properties — the taxonomy in @hanzo/event is a
+// CLOSED set, and its own rule for a product-specific moment is "the `action`
+// property, never a new event name". So every UI interaction is
+// EVENTS.FEATURE_USED carrying { component, action, surface, id, value }.
+// Funnel moments (signup, checkout, deploy) keep their own dedicated names and
+// are emitted by the surface that owns them, not by a button.
+//
+// One stream: `track` from @hanzogui/telemetry — already a dependency of this
+// package and already THE front door (POST api.hanzo.ai/v1/event). No second
+// client, no CDN script, no `window` poking. It is SSR-safe, consent-aware,
+// honors DNT/GPC, and is fail-soft by construction, so this module inherits all
+// of that and adds no error policy of its own.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textSize = exports.useSurface = exports.InstrumentSurface = void 0;
+exports.emit = emit;
+exports.useEmit = useEmit;
+exports.labelOf = labelOf;
+const react_1 = require("react");
+// ONE dependency edge: @hanzogui/telemetry owns the transport AND re-exports the
+// @hanzo/event vocabulary, so this package never names a second source of truth.
+const telemetry_1 = require("@hanzogui/telemetry");
+/** The enclosing product area (route/module). Optional: with no provider the
+ *  events still carry component+action, and the product+path already come from
+ *  the telemetry client. */
+const SurfaceContext = (0, react_1.createContext)(undefined);
+/** Names the product area every shared component inside it reports under.
+ *  Plain provider, no element — it must not perturb any layout. */
+exports.InstrumentSurface = SurfaceContext.Provider;
+/** The current product area, or undefined outside a provider. */
+const useSurface = () => (0, react_1.useContext)(SurfaceContext);
+exports.useSurface = useSurface;
+/** Report an interaction. Callable from anywhere (module scope, event handler,
+ *  a non-React host) — the ambient telemetry client is built on first use. */
+function emit(e) {
+    (0, telemetry_1.track)(telemetry_1.EVENTS.FEATURE_USED, {
+        component: e.component,
+        action: e.action,
+        ...(e.id !== undefined ? { id: e.id } : null),
+        ...(e.value !== undefined ? { value: e.value } : null),
+        ...(e.surface !== undefined ? { surface: e.surface } : null),
+    });
+}
+/** `emit` with the surrounding `<InstrumentSurface/>` already bound — what the
+ *  shared components themselves use, so an app never labels a surface twice. */
+function useEmit() {
+    const surface = (0, exports.useSurface)();
+    return (0, react_1.useCallback)((e) => emit(surface !== undefined && e.surface === undefined ? { ...e, surface } : e), [surface]);
+}
+/** A component's own children ARE its identity — "Deploy", "Log in with Hanzo
+ *  Cloud". React hands them over as a string, or as an ARRAY when the label is
+ *  interpolated (`Log in with {brand}`), which is the common case; flattening the
+ *  string parts is the difference between a named event and an anonymous one.
+ *  Anything non-textual (an icon element) yields undefined rather than a guess. */
+function labelOf(children) {
+    if (typeof children === 'string')
+        return children.trim() || undefined;
+    if (Array.isArray(children)) {
+        const text = children.filter((c) => typeof c === 'string' || typeof c === 'number').join('');
+        return text.trim() || undefined;
+    }
+    return undefined;
+}
+/** Free text (a search box, a text field) is reported as its LENGTH — the shape
+ *  of the behaviour without the content. One helper so no component invents its
+ *  own idea of "safe to send". */
+const textSize = (s) => (s ? s.length : 0);
+exports.textSize = textSize;

package/dist/product/instrument.d.ts

@@ -37,3 +37,4 @@ export declare function labelOf(children: unknown): string | undefined;
  *  of the behaviour without the content. One helper so no component invents its
  *  own idea of "safe to send". */
 export declare const textSize: (s: string | undefined) => number;
+//# sourceMappingURL=instrument.d.ts.map

package/dist/product/instrument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"instrument.d.ts","sourceRoot":"","sources":["../../src/product/instrument.ts"],"names":[],"mappings":"AA6BA;kFACkF;AAClF,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,MAAM,GACN,OAAO,CAAA;AAEX;+EAC+E;AAC/E,MAAM,WAAW,OAAO;IACtB,8EAA8E;IAC9E,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,QAAQ,CAAA;IAChB,yEAAyE;IACzE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;0CAEsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAOD;mEACmE;AACnE,eAAO,MAAM,iBAAiB,8CAA0B,CAAA;AAExD,iEAAiE;AACjE,eAAO,MAAM,UAAU,QAAO,MAAM,GAAG,SAAuC,CAAA;AAE9E;8EAC8E;AAC9E,wBAAgB,IAAI,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAQrC;AAED;gFACgF;AAChF,wBAAgB,OAAO,IAAI,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAM9C;AAED;;;;mFAImF;AACnF,wBAAgB,OAAO,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAO7D;AAED;;kCAEkC;AAClC,eAAO,MAAM,QAAQ,GAAI,GAAG,MAAM,GAAG,SAAS,KAAG,MAA4B,CAAA"}

package/dist/product/instrument.js

@@ -0,0 +1,72 @@
+'use client';// The ONE place a shared component says what a user just did.
+//
+// Instrumenting the COMPONENT beats instrumenting 100 apps: a product that
+// renders `DataTable`, `PrimaryButton`, `SlideOver`, `ConfirmDelete`, `Field*`,
+// `ComboBox`, `Segmented`, `SearchInput`, `OrgSwitcher`, `MenuItemView`,
+// `EmptyState` or `ThemeToggle` reports the SAME interaction vocabulary with
+// zero app code. Nothing to wire, nothing to remember, nothing to drift.
+//
+//   import { emit, useEmit, InstrumentSurface } from '@hanzo/ui'
+//   <InstrumentSurface name="billing">…</InstrumentSurface>   // optional context
+//
+// ONE event name, structured properties — the taxonomy in @hanzo/event is a
+// CLOSED set, and its own rule for a product-specific moment is "the `action`
+// property, never a new event name". So every UI interaction is
+// EVENTS.FEATURE_USED carrying { component, action, surface, id, value }.
+// Funnel moments (signup, checkout, deploy) keep their own dedicated names and
+// are emitted by the surface that owns them, not by a button.
+//
+// One stream: `track` from @hanzogui/telemetry — already a dependency of this
+// package and already THE front door (POST api.hanzo.ai/v1/event). No second
+// client, no CDN script, no `window` poking. It is SSR-safe, consent-aware,
+// honors DNT/GPC, and is fail-soft by construction, so this module inherits all
+// of that and adds no error policy of its own.
+import { createContext, useCallback, useContext } from 'react';
+// ONE dependency edge: @hanzogui/telemetry owns the transport AND re-exports the
+// @hanzo/event vocabulary, so this package never names a second source of truth.
+import { EVENTS, track } from '@hanzogui/telemetry';
+/** The enclosing product area (route/module). Optional: with no provider the
+ *  events still carry component+action, and the product+path already come from
+ *  the telemetry client. */
+const SurfaceContext = createContext(undefined);
+/** Names the product area every shared component inside it reports under.
+ *  Plain provider, no element — it must not perturb any layout. */
+export const InstrumentSurface = SurfaceContext.Provider;
+/** The current product area, or undefined outside a provider. */
+export const useSurface = () => useContext(SurfaceContext);
+/** Report an interaction. Callable from anywhere (module scope, event handler,
+ *  a non-React host) — the ambient telemetry client is built on first use. */
+export function emit(e) {
+    track(EVENTS.FEATURE_USED, {
+        component: e.component,
+        action: e.action,
+        ...(e.id !== undefined ? { id: e.id } : null),
+        ...(e.value !== undefined ? { value: e.value } : null),
+        ...(e.surface !== undefined ? { surface: e.surface } : null),
+    });
+}
+/** `emit` with the surrounding `<InstrumentSurface/>` already bound — what the
+ *  shared components themselves use, so an app never labels a surface twice. */
+export function useEmit() {
+    const surface = useSurface();
+    return useCallback((e) => emit(surface !== undefined && e.surface === undefined ? { ...e, surface } : e), [surface]);
+}
+/** A component's own children ARE its identity — "Deploy", "Log in with Hanzo
+ *  Cloud". React hands them over as a string, or as an ARRAY when the label is
+ *  interpolated (`Log in with {brand}`), which is the common case; flattening the
+ *  string parts is the difference between a named event and an anonymous one.
+ *  Anything non-textual (an icon element) yields undefined rather than a guess. */
+export function labelOf(children) {
+    if (typeof children === 'string')
+        return children.trim() || undefined;
+    if (Array.isArray(children)) {
+        const text = children.filter((c) => typeof c === 'string' || typeof c === 'number').join('');
+        return text.trim() || undefined;
+    }
+    return undefined;
+}
+/** Free text (a search box, a text field) is reported as its LENGTH — the shape
+ *  of the behaviour without the content. One helper so no component invents its
+ *  own idea of "safe to send". */
+export const textSize = (s) => (s ? s.length : 0);
+//# sourceMappingURL=instrument.js.map

package/dist/product/instrument.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"instrument.js","sourceRoot":"","sources":["../../src/product/instrument.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,EAAE;AACF,2EAA2E;AAC3E,gFAAgF;AAChF,yEAAyE;AACzE,6EAA6E;AAC7E,yEAAyE;AACzE,EAAE;AACF,iEAAiE;AACjE,kFAAkF;AAClF,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,gEAAgE;AAChE,0EAA0E;AAC1E,+EAA+E;AAC/E,8DAA8D;AAC9D,EAAE;AACF,8EAA8E;AAC9E,6EAA6E;AAC7E,4EAA4E;AAC5E,gFAAgF;AAChF,+CAA+C;AAE/C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9D,iFAAiF;AACjF,iFAAiF;AACjF,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAoCnD;;4BAE4B;AAC5B,MAAM,cAAc,GAAG,aAAa,CAAqB,SAAS,CAAC,CAAA;AAEnE;mEACmE;AACnE,MAAM,CAAC,MAAM,iBAAiB,GAAG,cAAc,CAAC,QAAQ,CAAA;AAExD,iEAAiE;AACjE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAuB,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAA;AAE9E;8EAC8E;AAC9E,MAAM,UAAU,IAAI,CAAC,CAAU;IAC7B,KAAK,CAAC,MAAM,CAAC,YAAY,EAAE;QACzB,SAAS,EAAE,CAAC,CAAC,SAAS;QACtB,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAC7C,GAAG,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACtD,GAAG,CAAC,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;KAC7D,CAAC,CAAA;AACJ,CAAC;AAED;gFACgF;AAChF,MAAM,UAAU,OAAO;IACrB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,OAAO,WAAW,CAChB,CAAC,CAAU,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9F,CAAC,OAAO,CAAC,CACV,CAAA;AACH,CAAC;AAED;;;;mFAImF;AACnF,MAAM,UAAU,OAAO,CAAC,QAAiB;IACvC,IAAI,OAAO,QAAQ,KAAK,QAAQ;QAAE,OAAO,QAAQ,CAAC,IAAI,EAAE,IAAI,SAAS,CAAA;IACrE,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;QAC5F,OAAO,IAAI,CAAC,IAAI,EAAE,IAAI,SAAS,CAAA;IACjC,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAED;;kCAEkC;AAClC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAqB,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA"}

package/dist/product/menu/ContextMenu.cjs

@@ -0,0 +1,26 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = ContextMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const items_1 = require("./items.cjs");
+const FloatingMenu_1 = require("./FloatingMenu.cjs");
+function ContextMenu({ children, items, disabled, minWidth = 200, maxHeight }) {
+    const [state, setState] = (0, react_1.useState)({ open: false, x: 0, y: 0 });
+    const close = (0, react_1.useCallback)(() => setState((s) => (s.open ? { ...s, open: false } : s)), []);
+    // A zero-size rect at the cursor; FloatingMenu opens the panel at that point (gap 0).
+    const anchorRect = (0, react_1.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 = (0, react_1.cloneElement)(children, {
+        onContextMenu: (e) => {
+            childOnContextMenu?.(e);
+            if (disabled)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            setState({ open: true, x: e.clientX, y: e.clientY });
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [target, (0, jsx_runtime_1.jsx)(FloatingMenu_1.FloatingMenu, { open: state.open, onClose: close, anchorRect: anchorRect, gap: 0, minWidth: minWidth, maxHeight: maxHeight, children: (0, items_1.renderMenuItems)(items, close) })] }));
+}

package/dist/product/menu/ContextMenu.d.ts

@@ -9,7 +9,7 @@
  *   </ContextMenu>
  */
 import type { ReactElement } from 'react';
-import { type MenuItemSpec } from './items';
+import { type MenuItemSpec } from './items.js';
 export type ContextMenuProps = {
     /** The right-clickable target. Its `onContextMenu` is composed, not replaced. */
     children: ReactElement;
@@ -19,3 +19,4 @@ export type ContextMenuProps = {
     maxHeight?: number;
 };
 export declare function ContextMenu({ children, items, disabled, minWidth, maxHeight }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContextMenu.d.ts.map

package/dist/product/menu/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/product/menu/ContextMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,OAAO,CAAA;AAErD,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAG5D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iFAAiF;IACjF,QAAQ,EAAE,YAAY,CAAA;IACtB,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAc,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CA4BrG"}

package/dist/product/menu/ContextMenu.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useCallback, useState } from 'react';
+import { renderMenuItems } from './items.js';
+import { FloatingMenu } from './FloatingMenu.js';
+export 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)), []);
+    // A zero-size rect at the cursor; FloatingMenu opens the panel at that point (gap 0).
+    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 (_jsxs(_Fragment, { children: [target, _jsx(FloatingMenu, { open: state.open, onClose: close, anchorRect: anchorRect, gap: 0, minWidth: minWidth, maxHeight: maxHeight, children: renderMenuItems(items, close) })] }));
+}
+//# sourceMappingURL=ContextMenu.js.map

package/dist/product/menu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sourceRoot":"","sources":["../../../src/product/menu/ContextMenu.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAaZ,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAqB,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAW7C,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAE,SAAS,EAAoB;IACpG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA0C,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACxG,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IAC1F,sFAAsF;IACtF,MAAM,UAAU,GAAG,WAAW,CAC5B,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAC7F,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CACnB,CAAA;IAED,MAAM,kBAAkB,GAAI,QAAQ,CAAC,KAAqD,CAAC,aAAa,CAAA;IACxG,MAAM,MAAM,GAAG,YAAY,CAAC,QAAQ,EAAE;QACpC,aAAa,EAAE,CAAC,CAAa,EAAE,EAAE;YAC/B,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAA;YACvB,IAAI,QAAQ;gBAAE,OAAM;YACpB,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAA;QACtD,CAAC;KACgC,CAAC,CAAA;IAEpC,OAAO,CACL,8BACG,MAAM,EACP,KAAC,YAAY,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,YACrH,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GACjB,IACd,CACJ,CAAA;AACH,CAAC"}

package/dist/product/menu/FloatingMenu.cjs

@@ -0,0 +1,87 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingMenu = FloatingMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const items_1 = require("./items.cjs");
+const portal_theme_1 = require("./portal-theme.cjs");
+const roving_1 = require("./roving.cjs");
+const EDGE = 8;
+function FloatingMenu({ open, onClose, anchorRect, anchorEl, gap = 4, minWidth = 200, maxHeight, autoFocus = true, children, }) {
+    const themeName = (0, portal_theme_1.useThemeName)();
+    const panelRef = (0, react_1.useRef)(null);
+    const [pos, setPos] = (0, react_1.useState)(null);
+    const setPanel = (0, react_1.useCallback)((n) => {
+        panelRef.current = n;
+    }, []);
+    const place = (0, react_1.useCallback)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const a = anchorRect();
+        if (!a)
+            return;
+        const node = panelRef.current;
+        const w = node?.offsetWidth || minWidth;
+        const h = node?.offsetHeight || 0;
+        let left = a.left;
+        let top = a.bottom + gap;
+        if (left + w > window.innerWidth - EDGE)
+            left = Math.max(EDGE, window.innerWidth - w - EDGE);
+        if (h && top + h > window.innerHeight - EDGE) {
+            const above = a.top - gap - h;
+            top = above >= EDGE ? above : Math.max(EDGE, window.innerHeight - h - EDGE);
+        }
+        setPos({ left, top });
+    }, [anchorRect, gap, minWidth]);
+    // Measure + position before paint; focus the panel for keyboard nav.
+    (0, react_1.useLayoutEffect)(() => {
+        if (!open) {
+            setPos(null);
+            return;
+        }
+        place();
+        if (autoFocus)
+            panelRef.current?.focus?.();
+    }, [open, place, autoFocus]);
+    // Dismiss on outside pointer (excluding the anchor), Escape, scroll, resize, blur.
+    (0, react_1.useEffect)(() => {
+        if (!open || typeof document === 'undefined')
+            return;
+        const onPointerDown = (e) => {
+            const t = e.target;
+            if (panelRef.current?.contains(t))
+                return;
+            const anchor = anchorEl?.();
+            if (anchor && anchor.contains(t))
+                return;
+            onClose();
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('keydown', onKey, true);
+        window.addEventListener('scroll', onClose, true);
+        window.addEventListener('resize', onClose);
+        window.addEventListener('blur', onClose);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            document.removeEventListener('keydown', onKey, true);
+            window.removeEventListener('scroll', onClose, true);
+            window.removeEventListener('resize', onClose);
+            window.removeEventListener('blur', onClose);
+        };
+    }, [open, onClose, anchorEl]);
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(gui_1.Portal, { children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(items_1.MenuPanel, { panelRef: setPanel, minWidth: minWidth, maxHeight: maxHeight, tabIndex: -1, onKeyDown: (e) => (0, roving_1.menuKeyDown)(e, onClose), style: {
+                    position: 'fixed',
+                    left: pos?.left ?? 0,
+                    top: pos?.top ?? 0,
+                    zIndex: 100000,
+                    visibility: pos ? 'visible' : 'hidden',
+                }, children: children }) }) }));
+}

package/dist/product/menu/FloatingMenu.d.ts

@@ -34,3 +34,4 @@ export declare function FloatingMenu({ open, onClose, anchorRect, anchorEl, gap,
     autoFocus?: boolean;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FloatingMenu.d.ts.map

package/dist/product/menu/FloatingMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingMenu.d.ts","sourceRoot":"","sources":["../../../src/product/menu/FloatingMenu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAA;AAS3E,MAAM,MAAM,QAAQ,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAElH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,UAAU,EACV,QAAQ,EACR,GAAO,EACP,QAAc,EACd,SAAS,EACT,SAAgB,EAChB,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,2FAA2F;IAC3F,UAAU,EAAE,MAAM,QAAQ,GAAG,IAAI,GAAG,SAAS,CAAA;IAC7C,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAA;IAC/C,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oFAAoF;IACpF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;CACpB,kDAsFA"}

package/dist/product/menu/FloatingMenu.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Portal } from '@hanzo/gui';
+import { MenuPanel } from './items.js';
+import { PortalTheme, useThemeName } from './portal-theme.js';
+import { menuKeyDown } from './roving.js';
+const EDGE = 8;
+export function FloatingMenu({ open, onClose, anchorRect, anchorEl, gap = 4, minWidth = 200, maxHeight, autoFocus = true, children, }) {
+    const themeName = useThemeName();
+    const panelRef = useRef(null);
+    const [pos, setPos] = useState(null);
+    const setPanel = useCallback((n) => {
+        panelRef.current = n;
+    }, []);
+    const place = useCallback(() => {
+        if (typeof window === 'undefined')
+            return;
+        const a = anchorRect();
+        if (!a)
+            return;
+        const node = panelRef.current;
+        const w = node?.offsetWidth || minWidth;
+        const h = node?.offsetHeight || 0;
+        let left = a.left;
+        let top = a.bottom + gap;
+        if (left + w > window.innerWidth - EDGE)
+            left = Math.max(EDGE, window.innerWidth - w - EDGE);
+        if (h && top + h > window.innerHeight - EDGE) {
+            const above = a.top - gap - h;
+            top = above >= EDGE ? above : Math.max(EDGE, window.innerHeight - h - EDGE);
+        }
+        setPos({ left, top });
+    }, [anchorRect, gap, minWidth]);
+    // Measure + position before paint; focus the panel for keyboard nav.
+    useLayoutEffect(() => {
+        if (!open) {
+            setPos(null);
+            return;
+        }
+        place();
+        if (autoFocus)
+            panelRef.current?.focus?.();
+    }, [open, place, autoFocus]);
+    // Dismiss on outside pointer (excluding the anchor), Escape, scroll, resize, blur.
+    useEffect(() => {
+        if (!open || typeof document === 'undefined')
+            return;
+        const onPointerDown = (e) => {
+            const t = e.target;
+            if (panelRef.current?.contains(t))
+                return;
+            const anchor = anchorEl?.();
+            if (anchor && anchor.contains(t))
+                return;
+            onClose();
+        };
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        document.addEventListener('pointerdown', onPointerDown, true);
+        document.addEventListener('keydown', onKey, true);
+        window.addEventListener('scroll', onClose, true);
+        window.addEventListener('resize', onClose);
+        window.addEventListener('blur', onClose);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown, true);
+            document.removeEventListener('keydown', onKey, true);
+            window.removeEventListener('scroll', onClose, true);
+            window.removeEventListener('resize', onClose);
+            window.removeEventListener('blur', onClose);
+        };
+    }, [open, onClose, anchorEl]);
+    if (!open)
+        return null;
+    return (_jsx(Portal, { children: _jsx(PortalTheme, { name: themeName, children: _jsx(MenuPanel, { panelRef: setPanel, minWidth: minWidth, maxHeight: maxHeight, tabIndex: -1, onKeyDown: (e) => menuKeyDown(e, onClose), style: {
+                    position: 'fixed',
+                    left: pos?.left ?? 0,
+                    top: pos?.top ?? 0,
+                    zIndex: 100000,
+                    visibility: pos ? 'visible' : 'hidden',
+                }, children: children }) }) }));
+}
+//# sourceMappingURL=FloatingMenu.js.map

package/dist/product/menu/FloatingMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingMenu.js","sourceRoot":"","sources":["../../../src/product/menu/FloatingMenu.tsx"],"names":[],"mappings":"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"}

package/dist/product/menu/index.cjs

@@ -0,0 +1,30 @@
+'use client';"use strict";
+// @hanzo/ui/product menu — Portal-theme-safe DropdownMenu (click) and ContextMenu
+// (right-click) render the SAME item spec (items.tsx) at the same geometry (32px
+// row, 8px gutter, 44px tap).
+//
+// They do NOT yet share a renderer: DropdownMenu builds its rows out of gui `Menu`
+// compound parts (which need the Menu context), ContextMenu builds them out of
+// `renderMenuItems` inside a bare `FloatingMenu` portal anchored at the cursor.
+// Collapsing the two means giving the cursor-anchored case a Menu context; until
+// that lands, the spec and the geometry constants are what keep them identical.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalTheme = exports.renderMenuItems = exports.MenuLabelView = exports.MenuSeparatorView = exports.MenuItemView = exports.MenuPanel = exports.FloatingMenu = exports.ContextMenu = exports.DropdownMenu = void 0;
+// The ONE DropdownMenu lives in the gui BACKEND (it is a component-API member,
+// not a product-layer piece). It grew the declarative `trigger`/`items` form that
+// used to be a second, separate component here, so there is one name, one API and
+// one rendering — reachable from `@hanzo/ui` and from `@hanzo/ui/product` alike.
+var dropdown_menu_1 = require("../../backends/gui/dropdown-menu.cjs");
+Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenu; } });
+var ContextMenu_1 = require("./ContextMenu.cjs");
+Object.defineProperty(exports, "ContextMenu", { enumerable: true, get: function () { return ContextMenu_1.ContextMenu; } });
+var FloatingMenu_1 = require("./FloatingMenu.cjs");
+Object.defineProperty(exports, "FloatingMenu", { enumerable: true, get: function () { return FloatingMenu_1.FloatingMenu; } });
+var items_1 = require("./items.cjs");
+Object.defineProperty(exports, "MenuPanel", { enumerable: true, get: function () { return items_1.MenuPanel; } });
+Object.defineProperty(exports, "MenuItemView", { enumerable: true, get: function () { return items_1.MenuItemView; } });
+Object.defineProperty(exports, "MenuSeparatorView", { enumerable: true, get: function () { return items_1.MenuSeparatorView; } });
+Object.defineProperty(exports, "MenuLabelView", { enumerable: true, get: function () { return items_1.MenuLabelView; } });
+Object.defineProperty(exports, "renderMenuItems", { enumerable: true, get: function () { return items_1.renderMenuItems; } });
+var portal_theme_1 = require("./portal-theme.cjs");
+Object.defineProperty(exports, "PortalTheme", { enumerable: true, get: function () { return portal_theme_1.PortalTheme; } });

package/dist/product/menu/index.d.ts

@@ -1,5 +1,6 @@
-export { DropdownMenu, type DropdownMenuProps } from '../../backends/gui/dropdown-menu';
-export { ContextMenu, type ContextMenuProps } from './ContextMenu';
-export { FloatingMenu, type RectLike } from './FloatingMenu';
-export { MenuPanel, MenuItemView, MenuSeparatorView, MenuLabelView, renderMenuItems, type MenuItemSpec, } from './items';
-export { PortalTheme } from './portal-theme';
+export { DropdownMenu, type DropdownMenuProps } from '../../backends/gui/dropdown-menu.js';
+export { ContextMenu, type ContextMenuProps } from './ContextMenu.js';
+export { FloatingMenu, type RectLike } from './FloatingMenu.js';
+export { MenuPanel, MenuItemView, MenuSeparatorView, MenuLabelView, renderMenuItems, type MenuItemSpec, } from './items.js';
+export { PortalTheme } from './portal-theme.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/product/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/product/menu/index.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACvF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,KAAK,YAAY,GAClB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/product/menu/index.js

@@ -0,0 +1,19 @@
+'use client';// @hanzo/ui/product menu — Portal-theme-safe DropdownMenu (click) and ContextMenu
+// (right-click) render the SAME item spec (items.tsx) at the same geometry (32px
+// row, 8px gutter, 44px tap).
+//
+// They do NOT yet share a renderer: DropdownMenu builds its rows out of gui `Menu`
+// compound parts (which need the Menu context), ContextMenu builds them out of
+// `renderMenuItems` inside a bare `FloatingMenu` portal anchored at the cursor.
+// Collapsing the two means giving the cursor-anchored case a Menu context; until
+// that lands, the spec and the geometry constants are what keep them identical.
+// The ONE DropdownMenu lives in the gui BACKEND (it is a component-API member,
+// not a product-layer piece). It grew the declarative `trigger`/`items` form that
+// used to be a second, separate component here, so there is one name, one API and
+// one rendering — reachable from `@hanzo/ui` and from `@hanzo/ui/product` alike.
+export { DropdownMenu } from '../../backends/gui/dropdown-menu.js';
+export { ContextMenu } from './ContextMenu.js';
+export { FloatingMenu } from './FloatingMenu.js';
+export { MenuPanel, MenuItemView, MenuSeparatorView, MenuLabelView, renderMenuItems, } from './items.js';
+export { PortalTheme } from './portal-theme.js';
+//# sourceMappingURL=index.js.map

package/dist/product/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/product/menu/index.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,iFAAiF;AACjF,8BAA8B;AAC9B,EAAE;AACF,mFAAmF;AACnF,+EAA+E;AAC/E,gFAAgF;AAChF,iFAAiF;AACjF,gFAAgF;AAEhF,+EAA+E;AAC/E,kFAAkF;AAClF,kFAAkF;AAClF,iFAAiF;AACjF,OAAO,EAAE,YAAY,EAA0B,MAAM,kCAAkC,CAAA;AACvF,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,YAAY,EAAiB,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EACL,SAAS,EACT,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,eAAe,GAEhB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/product/menu/items.cjs

@@ -0,0 +1,92 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PANEL_PAD = exports.PANEL_RADIUS = void 0;
+exports.MenuPanel = MenuPanel;
+exports.MenuItemView = MenuItemView;
+exports.MenuSeparatorView = MenuSeparatorView;
+exports.MenuLabelView = MenuLabelView;
+exports.renderMenuItems = renderMenuItems;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gesture_1 = require("../../backends/gui/gesture.cjs");
+// ── Geometry — literal px, 8-grid. ROW_H matches the gui backend's DropdownMenu
+//    row exactly; two menu geometries would be two design systems. ──────────────
+const ITEM_MIN_HEIGHT = 32;
+const TAP_MIN = 44;
+const ITEM_RADIUS = 7;
+const ITEM_PX = 8;
+const ITEM_GAP = 8;
+const ICON_SLOT = 16;
+exports.PANEL_RADIUS = 12;
+exports.PANEL_PAD = 4;
+const PANEL_GAP = 2;
+const SEP_MARGIN = 4;
+const FONT_LABEL = 13;
+const FONT_MUTED = 11;
+const FONT_SHORTCUT = 12;
+// ── Colour — brand purple accent via CSS vars (fallbacks keep it correct even when
+//    @hanzo/brand is not loaded, e.g. a bare Vite/Tauri host); everything else uses
+//    theme-adaptive Tamagui tokens. ──────────────────────────────────────────────
+const ACCENT = 'var(--hanzo-accent, #8b5cf6)';
+const ACCENT_SOFT = 'var(--hanzo-accent-soft, rgba(139,92,246,0.16))';
+const DANGER = 'var(--hanzo-danger, #ef4444)';
+// ── Surface ───────────────────────────────────────────────────────────────────
+function MenuPanel({ children, minWidth = 200, maxHeight = 360, onKeyDown, panelRef, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack
+    // Web DOM ref; Gui forwards it to the underlying node. Cast (not @ts-expect-error)
+    // so it is env-agnostic — the ref type is strict under the pkg build, loose here.
+    , { 
+        // Web DOM ref; Gui forwards it to the underlying node. Cast (not @ts-expect-error)
+        // so it is env-agnostic — the ref type is strict under the pkg build, loose here.
+        ref: panelRef, role: "menu", bg: "$color2", borderColor: "$borderColor", borderWidth: 1, rounded: exports.PANEL_RADIUS, p: exports.PANEL_PAD, gap: PANEL_GAP, minW: minWidth, maxH: maxHeight, overflow: "scroll", 
+        // Subtle border + ambient elevation, minimal shadow.
+        shadowColor: "rgba(0,0,0,0.45)", shadowRadius: 20, shadowOffset: { width: 0, height: 10 }, onKeyDown: onKeyDown, ...rest, children: children }));
+}
+// ── Item — the ONE row ──────────────────────────────────────────────────────────
+const instrument_1 = require("../instrument.cjs");
+function MenuItemView({ icon, label, description, shortcut, selected = false, disabled = false, destructive = false, hasSubmenu = false, onSelect, }) {
+    const track = (0, instrument_1.useEmit)();
+    const choose = () => {
+        track({ component: 'MenuItem', action: 'select', id: (0, instrument_1.labelOf)(label), value: selected });
+        onSelect();
+    };
+    const press = () => {
+        if (!disabled)
+            choose();
+    };
+    const onKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            choose();
+        }
+    };
+    const labelColor = destructive ? DANGER : '$color12';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { role: "menuitem", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, items: "center", gap: ITEM_GAP, px: ITEM_PX, minH: ITEM_MIN_HEIGHT, ...(0, gesture_1.touch)(ITEM_MIN_HEIGHT, TAP_MIN, 'y'), rounded: ITEM_RADIUS, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.4 : 1, select: "none", style: { outline: 'none' }, hoverStyle: disabled ? {} : { bg: ACCENT_SOFT }, pressStyle: disabled ? {} : { bg: ACCENT_SOFT }, focusStyle: disabled ? {} : { bg: ACCENT_SOFT }, onPress: press, onKeyDown: onKeyDown, children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { width: ICON_SLOT, height: ICON_SLOT, items: "center", justify: "center", shrink: 0, children: icon ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", justify: "center", opacity: destructive ? 1 : 0.9, style: destructive ? { color: DANGER } : undefined, children: icon })) : null }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: FONT_LABEL, lineHeight: 18, color: labelColor, numberOfLines: 1, children: label }), description ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: FONT_MUTED, lineHeight: 14, color: "$color11", numberOfLines: 1, children: description })) : null] }), shortcut ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: FONT_SHORTCUT, color: "$color11", shrink: 0, children: shortcut })) : null, selected ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14, color: ACCENT }) : null, hasSubmenu ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: 14, color: "var(--hanzo-muted, currentColor)", opacity: 0.6 }) : null] }));
+}
+// ── Separator ───────────────────────────────────────────────────────────────────
+function MenuSeparatorView() {
+    return (0, jsx_runtime_1.jsx)(gui_1.YStack, { height: 1, bg: "$borderColor", my: SEP_MARGIN, mx: SEP_MARGIN, role: "separator" });
+}
+// ── Section label ────────────────────────────────────────────────────────────────
+function MenuLabelView({ children }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: FONT_MUTED, color: "$color11", px: ITEM_PX, py: SEP_MARGIN, textTransform: "uppercase", letterSpacing: 0.4, select: "none", children: children }));
+}
+// ── The single render path shared by every menu ──────────────────────────────────
+function renderMenuItems(items, close) {
+    return items.map((it, i) => {
+        if (it.type === 'separator')
+            return (0, jsx_runtime_1.jsx)(MenuSeparatorView, {}, it.key ?? `sep-${i}`);
+        if (it.type === 'label')
+            return (0, jsx_runtime_1.jsx)(MenuLabelView, { children: it.label }, it.key ?? `lbl-${i}`);
+        const { key, onSelect, closeOnSelect = true, ...rest } = it;
+        return ((0, jsx_runtime_1.jsx)(MenuItemView, { ...rest, onSelect: () => {
+                onSelect();
+                if (closeOnSelect)
+                    close?.();
+            } }, key));
+    });
+}

package/dist/product/menu/items.d.ts

@@ -10,7 +10,7 @@
  *
  * Panel   — bg $color2 (#111 dark), hairline border, radius 12, inner pad 4, subtle
  *           border+ambient elevation.
- * Item    — height 30 (28–32 band), px 8, gap 8, radius 7; icon in a fixed 16px slot
+ * Item    — height 32 (the DropdownMenu row), px 8, gap 8, radius 7; icon in a fixed 16px slot
  *           on the left; label 13px $color12; right affordance (shortcut / check /
  *           chevron) right-aligned. States: hover/active/focus → accent-soft, focus
  *           visible; selected → check + purple; disabled → muted, no hover.
@@ -66,3 +66,4 @@ export declare function MenuLabelView({ children }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function renderMenuItems(items: MenuItemSpec[], close?: () => void): ReactNode;
+//# sourceMappingURL=items.d.ts.map

package/dist/product/menu/items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../src/product/menu/items.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAcrD,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,SAAS,IAAI,CAAA;AAe1B,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kBAAkB;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,GACD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAGlD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAc,EACd,SAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,2CA0BA;AAKD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,WAAmB,EACnB,UAAkB,EAClB,QAAQ,GACT,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,eAAe,CAAC,2CAkElF;AAGD,wBAAgB,iBAAiB,4CAEhC;AAGD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAclE;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,IAAI,GAAG,SAAS,CAgBpF"}