@hanzo/ui 8.27.90 → 8.28.0

package/dist/product/Filters.cjs

@@ -6,20 +6,69 @@ exports.SearchInput = SearchInput;
 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 input_1 = require("../backends/gui/input.cjs");
+const input_group_1 = require("../backends/gui/input-group.cjs");
+const density_1 = require("../backends/gui/density.cjs");
 const instrument_1 = require("./instrument.cjs");
-/** A compact segmented pill control — the ONE way filters/ranges/toggles render. */
-function Segmented({ options, value, onChange, size = '$2', name, }) {
+/** The two heights of the track and the inset that holds its thumb off the edge. */
+const TRACK = { md: { h: 32, p: 3, item: 24 }, sm: { h: 24, p: 1, item: 20 } };
+/**
+ * A compact segmented pill control — the ONE way filters/ranges/toggles render.
+ *
+ * `variant="track"` is one choice from a few as a pill track (twenty-ui's
+ * SegmentedControl, MIT, NOTICE): the options on one panel-ground capsule, the
+ * chosen one lifted onto the raised rung in full ink, the rest quiet. Radio
+ * semantics, from gui's single ToggleGroup: one tab stop, the arrows move the
+ * choice. `trackSize` md (32) or sm (24); `itemWidth` equal or content. The
+ * default `row` is the row of separate bordered buttons it has always been.
+ */
+function Segmented({ options, value, onChange, size = '$2', name, variant = 'row', trackSize = 'md', itemWidth = 'equal', disabled, 'aria-label': ariaLabel, }) {
     const track = (0, instrument_1.useEmit)();
+    const pick = (v) => {
+        track({ component: 'Segmented', action: 'filter', id: name, value: v });
+        onChange(v);
+    };
+    if (variant === 'track') {
+        const box = TRACK[trackSize];
+        // A radio group: the arrows move the CHOICE, not only the focus (gui's
+        // roving focus moves the focus; this moves the value with it).
+        const live = options.filter((o) => !o.disabled);
+        const onKeyDown = (e) => {
+            const by = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+            if (!by || disabled || live.length === 0)
+                return;
+            const at = live.findIndex((o) => o.value === value);
+            pick(live[(at + by + live.length) % live.length].value);
+        };
+        return ((0, jsx_runtime_1.jsx)(gui_1.ToggleGroup, { "data-slot": "segmented", ...{
+                type: 'single',
+                value,
+                onValueChange: (next) => next && pick(next),
+                disableDeactivation: true,
+            }, role: "radiogroup", "aria-label": ariaLabel, orientation: "horizontal", disabled: disabled, 
+            // No `unstyled` on the root: gui's ToggleGroup root does not consume it
+            // and it reached the DOM as an attribute. Every style it would reset is
+            // stated below.
+            display: "inline-flex", self: "flex-start", flexDirection: "row", items: "center", gap: "$0.5", height: box.h, p: box.p, rounded: "$10", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", opacity: disabled ? 0.5 : 1, ...{ onKeyDown }, children: options.map((o) => {
+                const on = o.value === value;
+                const iconOnly = !!o.icon && !o.label;
+                return ((0, jsx_runtime_1.jsxs)(gui_1.ToggleGroup.Item, { "data-slot": "segmented-item", value: o.value, role: "radio", "aria-checked": on, "aria-label": o['aria-label'], disabled: disabled || o.disabled, "data-state": on ? 'checked' : 'unchecked', unstyled: true, flexDirection: "row", items: "center", justify: "center", gap: "$1", height: box.item, minW: box.item, px: iconOnly ? 0 : '$2', ...(itemWidth === 'equal' ? { flex: 1, flexBasis: 0 } : null), rounded: "$10", borderWidth: 0, bg: on ? '$raised' : 'transparent', cursor: o.disabled ? 'not-allowed' : 'pointer', hoverStyle: { bg: on ? '$raised' : '$hover' }, children: [o.icon ?? null, o.label ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: "500", color: on ? '$ink' : '$aside', numberOfLines: 1, children: o.label })) : null] }, o.value));
+            }) }));
+    }
     return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$1", flexWrap: "wrap", items: "center", children: options.map((o) => {
             const active = o.value === value;
-            return ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: size, bg: active ? '$raised' : 'transparent', borderWidth: 1, borderColor: active ? '$bound' : '$borderColor', "aria-pressed": active, onPress: () => {
-                    track({ component: 'Segmented', action: 'filter', id: name, value: o.value });
-                    onChange(o.value);
-                }, children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: active ? '700' : '500', color: active ? '$ink' : '$quiet', children: o.label }) }, o.value));
+            return ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: size, bg: active ? '$raised' : 'transparent', borderWidth: 1, borderColor: active ? '$bound' : '$borderColor', "aria-pressed": active, onPress: () => pick(o.value), children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", fontWeight: active ? '700' : '500', color: active ? '$ink' : '$quiet', children: o.label }) }, o.value));
         }) }));
 }
-/** A search input with a leading magnifier. */
-function SearchInput({ value, onChange, placeholder, name, }) {
+/**
+ * A search input with a leading magnifier, on the one field box: an
+ * `InputGroup`, so the glyph sits in the row (lifting while the field has focus)
+ * and `actions` sit beside the field rather than inside it — twenty-ui's
+ * SearchInput (MIT, NOTICE). Regular density keeps the sunken ground it always
+ * had; compact takes the group's own.
+ */
+function SearchInput({ value, onChange, placeholder, name, size, actions, autoFocus, }) {
+    const compact = (0, density_1.useDensity)() === 'compact';
     const track = (0, instrument_1.useEmit)();
     // The QUERY IS NEVER SENT — only how long it was. The shape of the behaviour
     // (did people search? how specifically?) without the content.
@@ -27,5 +76,8 @@ function SearchInput({ value, onChange, placeholder, name, }) {
         track({ component: 'SearchInput', action: 'search', id: name, value: (0, instrument_1.textSize)(v) });
         onChange(v);
     };
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$sunken", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16, color: "$soft" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { flex: 1, value: value, onChangeText: onChangeTracked, placeholder: placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })] }));
+    const field = ((0, jsx_runtime_1.jsx)(input_group_1.InputGroup, { size: size, flex: 1, minW: 180, gap: "$2", ...(compact ? null : { bg: '$sunken' }), start: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16, color: "$ink" }), children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: value, onChangeText: onChangeTracked, placeholder: placeholder, autoFocus: autoFocus }) }));
+    if (!actions)
+        return field;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, minW: 180, width: "100%", items: "center", gap: "$2", children: [field, (0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, items: "center", gap: "$2", children: actions })] }));
 }

package/dist/product/Filters.d.ts

@@ -7,28 +7,59 @@
  * — the same separation-of-concerns move `ui/Metric.tsx` made out of `gpus/`.
  * `inference/parts.tsx` re-exports them, so there is exactly one definition.
  */
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import { Button } from '@hanzo/gui';
-/** One pill in a segmented control. */
+import type { FieldSize } from '../backends/gui/control.js';
+/** One pill in a segmented control. `icon` leads the label; an icon-only option needs `aria-label`. */
 export type Option<T extends string> = {
     label: string;
     value: T;
+    icon?: ReactNode;
+    /** Names an icon-only option for assistive technology. */
+    'aria-label'?: string;
+    disabled?: boolean;
 };
-/** A compact segmented pill control — the ONE way filters/ranges/toggles render. */
-export declare function Segmented<T extends string>({ options, value, onChange, size, name, }: {
+/**
+ * A compact segmented pill control — the ONE way filters/ranges/toggles render.
+ *
+ * `variant="track"` is one choice from a few as a pill track (twenty-ui's
+ * SegmentedControl, MIT, NOTICE): the options on one panel-ground capsule, the
+ * chosen one lifted onto the raised rung in full ink, the rest quiet. Radio
+ * semantics, from gui's single ToggleGroup: one tab stop, the arrows move the
+ * choice. `trackSize` md (32) or sm (24); `itemWidth` equal or content. The
+ * default `row` is the row of separate bordered buttons it has always been.
+ */
+export declare function Segmented<T extends string>({ options, value, onChange, size, name, variant, trackSize, itemWidth, disabled, 'aria-label': ariaLabel, }: {
     options: Option<T>[];
     value: T;
     onChange: (v: T) => void;
     size?: ComponentProps<typeof Button>['size'];
     /** Names the filter in analytics (`status`, `range`); defaults to `Segmented`. */
     name?: string;
+    variant?: 'row' | 'track';
+    trackSize?: 'md' | 'sm';
+    itemWidth?: 'equal' | 'content';
+    disabled?: boolean;
+    /** Names the choice for assistive technology. */
+    'aria-label'?: string;
 }): import("react").JSX.Element;
-/** A search input with a leading magnifier. */
-export declare function SearchInput({ value, onChange, placeholder, name, }: {
+/**
+ * A search input with a leading magnifier, on the one field box: an
+ * `InputGroup`, so the glyph sits in the row (lifting while the field has focus)
+ * and `actions` sit beside the field rather than inside it — twenty-ui's
+ * SearchInput (MIT, NOTICE). Regular density keeps the sunken ground it always
+ * had; compact takes the group's own.
+ */
+export declare function SearchInput({ value, onChange, placeholder, name, size, actions, autoFocus, }: {
     value: string;
     onChange: (v: string) => void;
     placeholder?: string;
     /** Names the search box in analytics; defaults to `SearchInput`. */
     name?: string;
+    /** The field box (control.ts `BOX`). Unset, the nearest `<Density>` decides. */
+    size?: FieldSize;
+    /** Controls after the field, 8px from it: a filter toggle, a "new" button. */
+    actions?: ReactNode;
+    autoFocus?: boolean;
 }): import("react").JSX.Element;
 //# sourceMappingURL=Filters.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../src/product/Filters.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,MAAM,EAAuB,MAAM,YAAY,CAAA;AAKxD,uCAAuC;AACvC,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,MAAM,IAAI;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAA;AAElE,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAW,EACX,IAAI,GACL,EAAE;IACD,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;IACpB,KAAK,EAAE,CAAC,CAAA;IACR,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5C,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BA2BA;AAED,+CAA+C;AAC/C,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BAcA"}
+{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../src/product/Filters.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,MAAM,EAA+C,MAAM,YAAY,CAAA;AAMhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAIxD,uGAAuG;AACvG,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,MAAM,IAAI;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,CAAC,CAAA;IACR,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAKD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAW,EACX,IAAI,EACJ,OAAe,EACf,SAAgB,EAChB,SAAmB,EACnB,QAAQ,EACR,YAAY,EAAE,SAAS,GACxB,EAAE;IACD,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;IACpB,KAAK,EAAE,CAAC,CAAA;IACR,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5C,kFAAkF;IAClF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,GAAG,OAAO,CAAA;IACzB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,+BA6GA;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,+BA8BA"}

package/dist/product/Filters.js

@@ -1,21 +1,70 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Text, XStack } from '@hanzo/gui';
+import { Button, Text, ToggleGroup as GuiToggleGroup, XStack } from '@hanzo/gui';
 import { Search } from '@hanzogui/lucide-icons-2';
+import { Input } from '../backends/gui/input.js';
+import { InputGroup } from '../backends/gui/input-group.js';
+import { useDensity } from '../backends/gui/density.js';
 import { textSize, useEmit } from './instrument.js';
-/** A compact segmented pill control — the ONE way filters/ranges/toggles render. */
-export function Segmented({ options, value, onChange, size = '$2', name, }) {
+/** The two heights of the track and the inset that holds its thumb off the edge. */
+const TRACK = { md: { h: 32, p: 3, item: 24 }, sm: { h: 24, p: 1, item: 20 } };
+/**
+ * A compact segmented pill control — the ONE way filters/ranges/toggles render.
+ *
+ * `variant="track"` is one choice from a few as a pill track (twenty-ui's
+ * SegmentedControl, MIT, NOTICE): the options on one panel-ground capsule, the
+ * chosen one lifted onto the raised rung in full ink, the rest quiet. Radio
+ * semantics, from gui's single ToggleGroup: one tab stop, the arrows move the
+ * choice. `trackSize` md (32) or sm (24); `itemWidth` equal or content. The
+ * default `row` is the row of separate bordered buttons it has always been.
+ */
+export function Segmented({ options, value, onChange, size = '$2', name, variant = 'row', trackSize = 'md', itemWidth = 'equal', disabled, 'aria-label': ariaLabel, }) {
     const track = useEmit();
+    const pick = (v) => {
+        track({ component: 'Segmented', action: 'filter', id: name, value: v });
+        onChange(v);
+    };
+    if (variant === 'track') {
+        const box = TRACK[trackSize];
+        // A radio group: the arrows move the CHOICE, not only the focus (gui's
+        // roving focus moves the focus; this moves the value with it).
+        const live = options.filter((o) => !o.disabled);
+        const onKeyDown = (e) => {
+            const by = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+            if (!by || disabled || live.length === 0)
+                return;
+            const at = live.findIndex((o) => o.value === value);
+            pick(live[(at + by + live.length) % live.length].value);
+        };
+        return (_jsx(GuiToggleGroup, { "data-slot": "segmented", ...{
+                type: 'single',
+                value,
+                onValueChange: (next) => next && pick(next),
+                disableDeactivation: true,
+            }, role: "radiogroup", "aria-label": ariaLabel, orientation: "horizontal", disabled: disabled, 
+            // No `unstyled` on the root: gui's ToggleGroup root does not consume it
+            // and it reached the DOM as an attribute. Every style it would reset is
+            // stated below.
+            display: "inline-flex", self: "flex-start", flexDirection: "row", items: "center", gap: "$0.5", height: box.h, p: box.p, rounded: "$10", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", opacity: disabled ? 0.5 : 1, ...{ onKeyDown }, children: options.map((o) => {
+                const on = o.value === value;
+                const iconOnly = !!o.icon && !o.label;
+                return (_jsxs(GuiToggleGroup.Item, { "data-slot": "segmented-item", value: o.value, role: "radio", "aria-checked": on, "aria-label": o['aria-label'], disabled: disabled || o.disabled, "data-state": on ? 'checked' : 'unchecked', unstyled: true, flexDirection: "row", items: "center", justify: "center", gap: "$1", height: box.item, minW: box.item, px: iconOnly ? 0 : '$2', ...(itemWidth === 'equal' ? { flex: 1, flexBasis: 0 } : null), rounded: "$10", borderWidth: 0, bg: on ? '$raised' : 'transparent', cursor: o.disabled ? 'not-allowed' : 'pointer', hoverStyle: { bg: on ? '$raised' : '$hover' }, children: [o.icon ?? null, o.label ? (_jsx(Text, { fontSize: "$2", fontWeight: "500", color: on ? '$ink' : '$aside', numberOfLines: 1, children: o.label })) : null] }, o.value));
+            }) }));
+    }
     return (_jsx(XStack, { gap: "$1", flexWrap: "wrap", items: "center", children: options.map((o) => {
             const active = o.value === value;
-            return (_jsx(Button, { size: size, bg: active ? '$raised' : 'transparent', borderWidth: 1, borderColor: active ? '$bound' : '$borderColor', "aria-pressed": active, onPress: () => {
-                    track({ component: 'Segmented', action: 'filter', id: name, value: o.value });
-                    onChange(o.value);
-                }, children: _jsx(Text, { fontSize: "$2", fontWeight: active ? '700' : '500', color: active ? '$ink' : '$quiet', children: o.label }) }, o.value));
+            return (_jsx(Button, { size: size, bg: active ? '$raised' : 'transparent', borderWidth: 1, borderColor: active ? '$bound' : '$borderColor', "aria-pressed": active, onPress: () => pick(o.value), children: _jsx(Text, { fontSize: "$2", fontWeight: active ? '700' : '500', color: active ? '$ink' : '$quiet', children: o.label }) }, o.value));
         }) }));
 }
-/** A search input with a leading magnifier. */
-export function SearchInput({ value, onChange, placeholder, name, }) {
+/**
+ * A search input with a leading magnifier, on the one field box: an
+ * `InputGroup`, so the glyph sits in the row (lifting while the field has focus)
+ * and `actions` sit beside the field rather than inside it — twenty-ui's
+ * SearchInput (MIT, NOTICE). Regular density keeps the sunken ground it always
+ * had; compact takes the group's own.
+ */
+export function SearchInput({ value, onChange, placeholder, name, size, actions, autoFocus, }) {
+    const compact = useDensity() === 'compact';
     const track = useEmit();
     // The QUERY IS NEVER SENT — only how long it was. The shape of the behaviour
     // (did people search? how specifically?) without the content.
@@ -23,6 +72,9 @@ export function SearchInput({ value, onChange, placeholder, name, }) {
         track({ component: 'SearchInput', action: 'search', id: name, value: textSize(v) });
         onChange(v);
     };
-    return (_jsxs(XStack, { flex: 1, minW: 180, items: "center", gap: "$2", px: "$3", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", bg: "$sunken", children: [_jsx(Search, { size: 16, color: "$soft" }), _jsx(Input, { flex: 1, value: value, onChangeText: onChangeTracked, placeholder: placeholder, borderWidth: 0, bg: "transparent", px: "$0", fontSize: "$3" })] }));
+    const field = (_jsx(InputGroup, { size: size, flex: 1, minW: 180, gap: "$2", ...(compact ? null : { bg: '$sunken' }), start: _jsx(Search, { size: 16, color: "$ink" }), children: _jsx(Input, { value: value, onChangeText: onChangeTracked, placeholder: placeholder, autoFocus: autoFocus }) }));
+    if (!actions)
+        return field;
+    return (_jsxs(XStack, { flex: 1, minW: 180, width: "100%", items: "center", gap: "$2", children: [field, _jsx(XStack, { shrink: 0, items: "center", gap: "$2", children: actions })] }));
 }
 //# sourceMappingURL=Filters.js.map

package/dist/product/Filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filters.js","sourceRoot":"","sources":["../../src/product/Filters.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAYZ,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAEjD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAKhD,oFAAoF;AACpF,MAAM,UAAU,SAAS,CAAmB,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,IAAI,GAQL;IACC,MAAM,KAAK,GAAG,OAAO,EAAE,CAAA;IACvB,OAAO,CACL,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,YAC5C,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACjB,MAAM,MAAM,GAAG,CAAC,CAAC,KAAK,KAAK,KAAK,CAAA;YAChC,OAAO,CACL,KAAC,MAAM,IAEL,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EACtC,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,kBACjC,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAA;oBAC7E,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;gBACnB,CAAC,YAED,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,YACtF,CAAC,CAAC,KAAK,GACH,IAbF,CAAC,CAAC,KAAK,CAcL,CACV,CAAA;QACH,CAAC,CAAC,GACK,CACV,CAAA;AACH,CAAC;AAED,+CAA+C;AAC/C,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAI,GAOL;IACC,MAAM,KAAK,GAAG,OAAO,EAAE,CAAA;IACvB,6EAA6E;IAC7E,8DAA8D;IAC9D,MAAM,eAAe,GAAG,CAAC,CAAS,EAAE,EAAE;QACpC,KAAK,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;QACnF,QAAQ,CAAC,CAAC,CAAC,CAAA;IACb,CAAC,CAAA;IACD,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,WAAW,EAAE,CAAC,EAAE,WAAW,EAAC,cAAc,EAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,SAAS,aAC9H,KAAC,MAAM,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG,EAClC,KAAC,KAAK,IAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,EAAC,aAAa,EAAC,EAAE,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,GAAG,IACzI,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Filters.js","sourceRoot":"","sources":["../../src/product/Filters.tsx"],"names":[],"mappings":"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"}

package/dist/product/MenuRow.cjs

@@ -1,16 +1,95 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_ROW = void 0;
+exports.MenuRowContent = MenuRowContent;
 exports.MenuRow = MenuRow;
 exports.MenuLabel = MenuLabel;
 exports.MenuRule = MenuRule;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * MenuRow — ONE row for the identity sheets: `OrgSwitcher`, `UserMenu`, and
+ * whatever a surface adds to either through `footer`.
+ *
+ * The anatomy is always the same — a leading dot or icon, a label, an optional
+ * second line, and a check on the chosen one — and it was written four times:
+ * once inside the org switcher, once inside the account menu, and twice more in
+ * the console, which had to draw its own to put project rows in the same sheet.
+ * Four copies is four sets of numbers, and they disagreed: the same sheet held
+ * rows a step apart in their gutter and two different hover tints.
+ *
+ * A row also has to SAY what it is. A row that can be current is one of a set
+ * exactly one of which holds (`menuitemradio`, inside the caller's `group`); a
+ * row without the notion is an action (`menuitem`). The presence of `active`
+ * decides it, so no call site states it twice and none of them can forget.
+ *
+ * Every sheet these rows sit in is a `menu`, and a menu owns menu items, groups
+ * and separators — nothing else. The choice used to be a `radiogroup` of `radio`
+ * rows, the pair gui's `role` union carries whole, and axe fails a `radiogroup`
+ * inside a `menu` outright (`aria-required-children`: "children which are not
+ * allowed"). `group` + `menuitemradio` + `aria-checked` is the pair ARIA names
+ * for a single choice inside a menu. gui's union is React Native's role set and
+ * lacks `menuitemradio`, so the one cast below says it; the attribute reaches
+ * the DOM as written.
+ *
+ * THE ANATOMY IS SHARED. `MenuRowContent` is what sits inside any menu row — the
+ * leading slot (a dot, an icon, an icon in its tinted well, an avatar, a drag
+ * grip), the label with its contextual text, the second line, the shortcut keys,
+ * and the trailing check or submenu chevron — and `DropdownMenuItem`'s
+ * declarative rows render it inside gui's own `Menu.Item`, so a menu item and a
+ * sheet row are one anatomy with each keeping its own role.
+ *
+ * `size="row"` is the record geometry (twenty-ui's MenuItem, MIT, NOTICE): 32px,
+ * 4px inset, 8px gap, a 4px corner concentric in an 8px panel, the hover tint one
+ * rung up, the label in the secondary ink. The default stays the sheet row these
+ * screens were drawn with.
+ */
+const react_1 = require("react");
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const press_1 = require("../backends/gui/press.cjs");
-function MenuRow({ label, sub, dot, icon, active, danger, onPress }) {
+const shortcut_1 = require("../backends/gui/shortcut.cjs");
+const gesture_1 = require("../backends/gui/gesture.cjs");
+/** The record row's geometry, shared with DropdownMenu so a menu and a list are one row. */
+exports.MENU_ROW = { h: 32, px: 4, gap: 8, icon: 16, chevron: 14, well: 4 };
+/** The label's ink. The sheet row keeps the red it was drawn with; the record row reads the error state. */
+const labelColor = (tone, quiet) => tone === 'danger' ? (quiet ? '$bad' : '$red10') : tone === 'placeholder' ? '$hint' : quiet ? '$aside' : '$ink';
+/** A key, a chord or a sequence, as the kit's Shortcut keycaps (spoken once). A node is the caller's own rendering. */
+const keys = (shortcut) => {
+    if (shortcut == null || shortcut === false)
+        return null;
+    if (typeof shortcut === 'string')
+        return (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: [shortcut] });
+    if (Array.isArray(shortcut))
+        return (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: shortcut });
+    return shortcut;
+};
+function MenuRowContent({ label, sub, contextual, contextualPosition = 'left', dot, icon, iconContainer = false, grip = 'never', shortcut, check = false, submenu = false, tone = 'default', quiet = false, hovered = false, subColor = '$hint', }) {
+    const lead = dot ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 8, height: 8, rounded: "$10", bg: dot }) : icon;
+    const swap = grip === 'onHover' && hovered;
+    const leading = grip === 'always' || swap ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.GripVertical, { size: exports.MENU_ROW.icon, color: "$hush" })) : lead && iconContainer ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { p: exports.MENU_ROW.well, rounded: "$xs", bg: "$hover", items: "center", justify: "center", shrink: 0, children: lead })) : (lead);
+    const dim = contextual != null && contextual !== '' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$hint", numberOfLines: 1, pl: 4, shrink: 1, children: contextual })) : null;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [grip !== 'never' ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, items: "center", justify: "center", minW: exports.MENU_ROW.icon, children: leading })) : (leading ?? null), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", minW: 0, children: [typeof label === 'string' || typeof label === 'number' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: labelColor(tone, quiet), numberOfLines: 1, shrink: 1, children: label })) : (label), contextualPosition === 'left' ? dim : null] }), sub ? (typeof sub === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: subColor, numberOfLines: 1, children: sub })) : (sub)) : null] }), contextualPosition === 'right' ? dim : null, shortcut != null ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, children: keys(shortcut) }) : null, check ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: exports.MENU_ROW.icon, strokeWidth: 2 }) : null, submenu ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { shrink: 0, animation: "quick", rotate: submenu === 'open' ? '90deg' : '0deg', ...{ 'data-open': submenu === 'open' ? '' : undefined }, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: exports.MENU_ROW.chevron, color: "$hush" }) })) : null] }));
+}
+function MenuRow({ label, sub, dot, icon, active, danger, placeholder, focused = false, disabled = false, actions, actionsVisibility = 'hover', variant = 'default', selected = false, size = 'default', onPress, ...content }) {
     const selectable = active !== undefined;
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, press_1.press)(onPress), ...{ role: selectable ? (gui_1.isWeb ? 'menuitemradio' : 'radio') : 'menuitem' }, "aria-checked": selectable ? !!active : undefined, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: active ? '$edge' : 'transparent', hoverStyle: { bg: '$raised' }, focusVisibleStyle: press_1.RING, children: [dot ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 8, height: 8, rounded: "$10", bg: dot }) : icon, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: danger ? '$red10' : '$ink', numberOfLines: 1, children: label }), sub ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: sub })) : null] }), active ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16 }) : null] }));
+    const row = size === 'row';
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [within, setWithin] = (0, react_1.useState)(false);
+    const shown = actionsVisibility === 'always' || hovered || within;
+    const lit = variant === 'suggestion' && selected ? '$raised' : focused ? '$hover' : active ? '$edge' : 'transparent';
+    const run = disabled ? undefined : onPress;
+    const hover = { onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false) };
+    const body = ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, press_1.press)(run), ...{ role: selectable ? (gui_1.isWeb ? 'menuitemradio' : 'radio') : 'menuitem' }, "aria-checked": selectable ? !!active : undefined, "aria-disabled": disabled || undefined, ...(variant === 'suggestion' ? { 'aria-selected': selected } : null), cursor: disabled ? 'default' : 'pointer', items: "center", ...(row
+            ? { gap: exports.MENU_ROW.gap, px: exports.MENU_ROW.px, minH: exports.MENU_ROW.h, rounded: '$xs', ...(0, gesture_1.touch)(exports.MENU_ROW.h, 44, 'y') }
+            : { gap: '$2.5', px: '$2', py: '$2', rounded: '$3' }), bg: lit, opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: variant === 'suggestion' && selected ? '$raised' : row ? '$hover' : '$raised' }, focusVisibleStyle: press_1.RING, ...(actions ? { flex: 1, minW: 0 } : hover), onFocus: () => setWithin(true), onBlur: () => setWithin(false), children: (0, jsx_runtime_1.jsx)(MenuRowContent, { ...content, label: label, sub: sub, dot: dot, icon: icon, check: !!active, tone: danger ? 'danger' : placeholder ? 'placeholder' : 'default', quiet: row, hovered: hovered, subColor: row ? '$hint' : '$soft' }) }));
+    if (!actions)
+        return body;
+    // The actions sit BESIDE the row, not inside it: a control inside a
+    // `menuitem` is a nested interactive. One hover covers both.
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...{ 'data-slot': 'menu-row-with-actions' }, items: "center", gap: exports.MENU_ROW.gap, ...hover, children: [body, (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...{ 'data-slot': 'menu-row-actions' }, role: "group", shrink: 0, items: "center", gap: "$1", opacity: shown ? 1 : 0, 
+                // A finger cannot hover: on a coarse pointer the actions are always there.
+                $touchable: { opacity: 1 }, animation: "75ms", children: actions })] }));
 }
 /**
  * A quiet heading over a group of rows — "Organization", "Project", "Theme".

package/dist/product/MenuRow.d.ts

@@ -22,25 +22,95 @@
  * for a single choice inside a menu. gui's union is React Native's role set and
  * lacks `menuitemradio`, so the one cast below says it; the attribute reaches
  * the DOM as written.
+ *
+ * THE ANATOMY IS SHARED. `MenuRowContent` is what sits inside any menu row — the
+ * leading slot (a dot, an icon, an icon in its tinted well, an avatar, a drag
+ * grip), the label with its contextual text, the second line, the shortcut keys,
+ * and the trailing check or submenu chevron — and `DropdownMenuItem`'s
+ * declarative rows render it inside gui's own `Menu.Item`, so a menu item and a
+ * sheet row are one anatomy with each keeping its own role.
+ *
+ * `size="row"` is the record geometry (twenty-ui's MenuItem, MIT, NOTICE): 32px,
+ * 4px inset, 8px gap, a 4px corner concentric in an 8px panel, the hover tint one
+ * rung up, the label in the secondary ink. The default stays the sheet row these
+ * screens were drawn with.
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+import { type ShortcutKeys } from '../backends/gui/shortcut.js';
 /** The tier hue a row may carry. Monochrome by default — only the genuine states
  *  take a colour (a live network green, a caution amber). */
 export type DotColor = '$green10' | '$yellow10' | '$soft' | '$faint' | '$dim';
-export type MenuRowProps = {
-    label: string;
+/** The record row's geometry, shared with DropdownMenu so a menu and a list are one row. */
+export declare const MENU_ROW: {
+    readonly h: 32;
+    readonly px: 4;
+    readonly gap: 8;
+    readonly icon: 16;
+    readonly chevron: 14;
+    readonly well: 4;
+};
+export type MenuRowShortcut = ReactNode | string | ShortcutKeys;
+export type MenuRowContentProps = {
+    label: ReactNode;
     /** A second, muted line under the label. */
-    sub?: string;
+    sub?: ReactNode;
+    /** Dimmed text beside the label — a count, a type, an id. */
+    contextual?: ReactNode;
+    /** `left` sits right after the label; `right` is pushed to the trailing end. */
+    contextualPosition?: 'left' | 'right';
     /** A tier dot in place of an icon. */
     dot?: DotColor;
+    /** The leading slot: an icon, an Avatar, a logo. */
     icon?: ReactNode;
+    /** Seat the icon in its tinted well (4px padding, 4px corner). */
+    iconContainer?: boolean;
+    /** A drag grip: `always` in place of the icon, `onHover` swapping with it. */
+    grip?: 'never' | 'always' | 'onHover';
+    /** Keys: a ReactNode, one key, or a list read as one chord. */
+    shortcut?: MenuRowShortcut;
+    /** The trailing check of the chosen row. */
+    check?: boolean;
+    /** A submenu chevron; `open` turns it a quarter. */
+    submenu?: boolean | 'open';
+    /** `danger` for a destructive row, `placeholder` for a row that offers rather than does. */
+    tone?: 'default' | 'danger' | 'placeholder';
+    /** The record row reads in the secondary ink; the sheet row in full ink. */
+    quiet?: boolean;
+    /** Whether the row is under the pointer, for the hover-only grip. */
+    hovered?: boolean;
+    /** The second line's rung: the sheet's softer one or a menu's quiet one. */
+    subColor?: '$soft' | '$hint';
+};
+export declare function MenuRowContent({ label, sub, contextual, contextualPosition, dot, icon, iconContainer, grip, shortcut, check, submenu, tone, quiet, hovered, subColor, }: MenuRowContentProps): import("react").JSX.Element;
+export type MenuRowProps = Omit<MenuRowContentProps, 'check' | 'tone' | 'quiet' | 'hovered' | 'subColor' | 'label' | 'sub'> & {
+    label: string;
+    /** A second, muted line under the label. */
+    sub?: string;
     /** Whether this row is the chosen one — see the note above on what it decides. */
     active?: boolean;
     /** The destructive register — sign out, delete, revoke. */
     danger?: boolean;
-    onPress: () => void;
+    /** A row that offers rather than does: "Add a field", "No value". */
+    placeholder?: boolean;
+    /** Keyboard-highlighted from outside (a list whose cursor is not focus). */
+    focused?: boolean;
+    disabled?: boolean;
+    /** Trailing actions: shown on hover or focus on a pointer, always on touch. */
+    actions?: ReactNode;
+    actionsVisibility?: 'hover' | 'always';
+    /**
+     * `suggestion` is a typeahead row (an @-mention, a variable): its selection
+     * follows a caret, not the pointer, so the selected row is a rung stronger
+     * than hover.
+     */
+    variant?: 'default' | 'suggestion';
+    /** With `variant="suggestion"`, the row the caret is on. */
+    selected?: boolean;
+    /** `row` is the record geometry; the default is the identity sheet's. */
+    size?: 'default' | 'row';
+    onPress?: () => void;
 };
-export declare function MenuRow({ label, sub, dot, icon, active, danger, onPress }: MenuRowProps): import("react").JSX.Element;
+export declare function MenuRow({ label, sub, dot, icon, active, danger, placeholder, focused, disabled, actions, actionsVisibility, variant, selected, size, onPress, ...content }: MenuRowProps): import("react").JSX.Element;
 /**
  * A quiet heading over a group of rows — "Organization", "Project", "Theme".
  *

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

@@ -1 +1 @@
-{"version":3,"file":"MenuRow.d.ts","sourceRoot":"","sources":["../../src/product/MenuRow.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC;6DAC6D;AAC7D,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE7E,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,GAAG,CAAC,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,YAAY,+BAgCvF;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAM9D;AAED,+CAA+C;AAC/C,wBAAgB,QAAQ,gCAEvB"}
+{"version":3,"file":"MenuRow.d.ts","sourceRoot":"","sources":["../../src/product/MenuRow.tsx"],"names":[],"mappings":"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"}

package/dist/product/MenuRow.js

@@ -1,11 +1,88 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * MenuRow — ONE row for the identity sheets: `OrgSwitcher`, `UserMenu`, and
+ * whatever a surface adds to either through `footer`.
+ *
+ * The anatomy is always the same — a leading dot or icon, a label, an optional
+ * second line, and a check on the chosen one — and it was written four times:
+ * once inside the org switcher, once inside the account menu, and twice more in
+ * the console, which had to draw its own to put project rows in the same sheet.
+ * Four copies is four sets of numbers, and they disagreed: the same sheet held
+ * rows a step apart in their gutter and two different hover tints.
+ *
+ * A row also has to SAY what it is. A row that can be current is one of a set
+ * exactly one of which holds (`menuitemradio`, inside the caller's `group`); a
+ * row without the notion is an action (`menuitem`). The presence of `active`
+ * decides it, so no call site states it twice and none of them can forget.
+ *
+ * Every sheet these rows sit in is a `menu`, and a menu owns menu items, groups
+ * and separators — nothing else. The choice used to be a `radiogroup` of `radio`
+ * rows, the pair gui's `role` union carries whole, and axe fails a `radiogroup`
+ * inside a `menu` outright (`aria-required-children`: "children which are not
+ * allowed"). `group` + `menuitemradio` + `aria-checked` is the pair ARIA names
+ * for a single choice inside a menu. gui's union is React Native's role set and
+ * lacks `menuitemradio`, so the one cast below says it; the attribute reaches
+ * the DOM as written.
+ *
+ * THE ANATOMY IS SHARED. `MenuRowContent` is what sits inside any menu row — the
+ * leading slot (a dot, an icon, an icon in its tinted well, an avatar, a drag
+ * grip), the label with its contextual text, the second line, the shortcut keys,
+ * and the trailing check or submenu chevron — and `DropdownMenuItem`'s
+ * declarative rows render it inside gui's own `Menu.Item`, so a menu item and a
+ * sheet row are one anatomy with each keeping its own role.
+ *
+ * `size="row"` is the record geometry (twenty-ui's MenuItem, MIT, NOTICE): 32px,
+ * 4px inset, 8px gap, a 4px corner concentric in an 8px panel, the hover tint one
+ * rung up, the label in the secondary ink. The default stays the sheet row these
+ * screens were drawn with.
+ */
+import { useState } from 'react';
 import { Text, XStack, YStack, isWeb } from '@hanzo/gui';
-import { Check } from '@hanzogui/lucide-icons-2';
+import { Check, ChevronRight, GripVertical } from '@hanzogui/lucide-icons-2';
 import { press, RING } from '../backends/gui/press.js';
-export function MenuRow({ label, sub, dot, icon, active, danger, onPress }) {
+import { Shortcut } from '../backends/gui/shortcut.js';
+import { touch } from '../backends/gui/gesture.js';
+/** The record row's geometry, shared with DropdownMenu so a menu and a list are one row. */
+export const MENU_ROW = { h: 32, px: 4, gap: 8, icon: 16, chevron: 14, well: 4 };
+/** The label's ink. The sheet row keeps the red it was drawn with; the record row reads the error state. */
+const labelColor = (tone, quiet) => tone === 'danger' ? (quiet ? '$bad' : '$red10') : tone === 'placeholder' ? '$hint' : quiet ? '$aside' : '$ink';
+/** A key, a chord or a sequence, as the kit's Shortcut keycaps (spoken once). A node is the caller's own rendering. */
+const keys = (shortcut) => {
+    if (shortcut == null || shortcut === false)
+        return null;
+    if (typeof shortcut === 'string')
+        return _jsx(Shortcut, { keys: [shortcut] });
+    if (Array.isArray(shortcut))
+        return _jsx(Shortcut, { keys: shortcut });
+    return shortcut;
+};
+export function MenuRowContent({ label, sub, contextual, contextualPosition = 'left', dot, icon, iconContainer = false, grip = 'never', shortcut, check = false, submenu = false, tone = 'default', quiet = false, hovered = false, subColor = '$hint', }) {
+    const lead = dot ? _jsx(YStack, { width: 8, height: 8, rounded: "$10", bg: dot }) : icon;
+    const swap = grip === 'onHover' && hovered;
+    const leading = grip === 'always' || swap ? (_jsx(GripVertical, { size: MENU_ROW.icon, color: "$hush" })) : lead && iconContainer ? (_jsx(XStack, { p: MENU_ROW.well, rounded: "$xs", bg: "$hover", items: "center", justify: "center", shrink: 0, children: lead })) : (lead);
+    const dim = contextual != null && contextual !== '' ? (_jsx(Text, { fontSize: "$2", color: "$hint", numberOfLines: 1, pl: 4, shrink: 1, children: contextual })) : null;
+    return (_jsxs(_Fragment, { children: [grip !== 'never' ? (_jsx(XStack, { shrink: 0, items: "center", justify: "center", minW: MENU_ROW.icon, children: leading })) : (leading ?? null), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsxs(XStack, { items: "center", minW: 0, children: [typeof label === 'string' || typeof label === 'number' ? (_jsx(Text, { fontSize: "$2", color: labelColor(tone, quiet), numberOfLines: 1, shrink: 1, children: label })) : (label), contextualPosition === 'left' ? dim : null] }), sub ? (typeof sub === 'string' ? (_jsx(Text, { fontSize: "$1", color: subColor, numberOfLines: 1, children: sub })) : (sub)) : null] }), contextualPosition === 'right' ? dim : null, shortcut != null ? _jsx(XStack, { shrink: 0, children: keys(shortcut) }) : null, check ? _jsx(Check, { size: MENU_ROW.icon, strokeWidth: 2 }) : null, submenu ? (_jsx(XStack, { shrink: 0, animation: "quick", rotate: submenu === 'open' ? '90deg' : '0deg', ...{ 'data-open': submenu === 'open' ? '' : undefined }, children: _jsx(ChevronRight, { size: MENU_ROW.chevron, color: "$hush" }) })) : null] }));
+}
+export function MenuRow({ label, sub, dot, icon, active, danger, placeholder, focused = false, disabled = false, actions, actionsVisibility = 'hover', variant = 'default', selected = false, size = 'default', onPress, ...content }) {
     const selectable = active !== undefined;
-    return (_jsxs(XStack, { ...press(onPress), ...{ role: selectable ? (isWeb ? 'menuitemradio' : 'radio') : 'menuitem' }, "aria-checked": selectable ? !!active : undefined, cursor: "pointer", items: "center", gap: "$2.5", px: "$2", py: "$2", rounded: "$3", bg: active ? '$edge' : 'transparent', hoverStyle: { bg: '$raised' }, focusVisibleStyle: RING, children: [dot ? _jsx(YStack, { width: 8, height: 8, rounded: "$10", bg: dot }) : icon, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$2", color: danger ? '$red10' : '$ink', numberOfLines: 1, children: label }), sub ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, children: sub })) : null] }), active ? _jsx(Check, { size: 16 }) : null] }));
+    const row = size === 'row';
+    const [hovered, setHovered] = useState(false);
+    const [within, setWithin] = useState(false);
+    const shown = actionsVisibility === 'always' || hovered || within;
+    const lit = variant === 'suggestion' && selected ? '$raised' : focused ? '$hover' : active ? '$edge' : 'transparent';
+    const run = disabled ? undefined : onPress;
+    const hover = { onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false) };
+    const body = (_jsx(XStack, { ...press(run), ...{ role: selectable ? (isWeb ? 'menuitemradio' : 'radio') : 'menuitem' }, "aria-checked": selectable ? !!active : undefined, "aria-disabled": disabled || undefined, ...(variant === 'suggestion' ? { 'aria-selected': selected } : null), cursor: disabled ? 'default' : 'pointer', items: "center", ...(row
+            ? { gap: MENU_ROW.gap, px: MENU_ROW.px, minH: MENU_ROW.h, rounded: '$xs', ...touch(MENU_ROW.h, 44, 'y') }
+            : { gap: '$2.5', px: '$2', py: '$2', rounded: '$3' }), bg: lit, opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: variant === 'suggestion' && selected ? '$raised' : row ? '$hover' : '$raised' }, focusVisibleStyle: RING, ...(actions ? { flex: 1, minW: 0 } : hover), onFocus: () => setWithin(true), onBlur: () => setWithin(false), children: _jsx(MenuRowContent, { ...content, label: label, sub: sub, dot: dot, icon: icon, check: !!active, tone: danger ? 'danger' : placeholder ? 'placeholder' : 'default', quiet: row, hovered: hovered, subColor: row ? '$hint' : '$soft' }) }));
+    if (!actions)
+        return body;
+    // The actions sit BESIDE the row, not inside it: a control inside a
+    // `menuitem` is a nested interactive. One hover covers both.
+    return (_jsxs(XStack, { ...{ 'data-slot': 'menu-row-with-actions' }, items: "center", gap: MENU_ROW.gap, ...hover, children: [body, _jsx(XStack, { ...{ 'data-slot': 'menu-row-actions' }, role: "group", shrink: 0, items: "center", gap: "$1", opacity: shown ? 1 : 0, 
+                // A finger cannot hover: on a coarse pointer the actions are always there.
+                $touchable: { opacity: 1 }, animation: "75ms", children: actions })] }));
 }
 /**
  * A quiet heading over a group of rows — "Organization", "Project", "Theme".