@hanzo/ui 8.27.91 → 8.29.0

package/dist/product/Fact.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, XStack } from '@hanzo/gui';
 import { fontMono } from '../core/fonts.js';
+import { ProgressRing } from '../backends/gui/progress-ring.js';
 /**
  * Fact — one row of a property list: a label on the left, a value on the
  * right, a hairline separator beneath. The read-only counterpart to `Field`'s
@@ -11,7 +12,11 @@ import { fontMono } from '../core/fonts.js';
  * either could find the other. This is the one definition; the wider of the
  * two shapes won (a non-string `value` renders as given, not stringified).
  */
-export function Fact({ label, value, mono }) {
+export function Fact({ label, value, mono, variant = 'row', startIcon, progress, progressColor, progressValueText }) {
+    if (variant === 'metric') {
+        const shown = typeof value === 'string' || typeof value === 'number' ? (_jsx(Text, { fontSize: "$1", fontWeight: "500", color: "$ink", numberOfLines: 1, style: mono ? { fontFamily: fontMono } : undefined, children: value })) : (value);
+        return (_jsxs(XStack, { "data-slot": "fact", "data-variant": "metric", items: "center", gap: "$2", minH: 24, children: [_jsxs(XStack, { flex: 1, minW: 0, items: "center", gap: "$1", children: [startIcon, _jsx(Text, { fontSize: "$1", fontWeight: "500", color: "$hint", numberOfLines: 1, children: label })] }), progress !== undefined ? (_jsx(ProgressRing, { value: progress, size: "sm", ...(progressColor ? { barColor: progressColor } : null), "aria-label": `${label}${progressValueText ? `: ${progressValueText}` : ''}`, children: shown })) : (shown)] }));
+    }
     return (_jsxs(XStack, { justify: "space-between", items: "center", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", gap: "$3", children: [_jsx(Text, { fontSize: "$2", color: "$color11", children: label }), typeof value === 'string' ? (_jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "600", numberOfLines: 1, style: mono ? { fontFamily: fontMono } : undefined, children: value })) : (value)] }));
 }
 //# sourceMappingURL=Fact.js.map

package/dist/product/Fact.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fact.js","sourceRoot":"","sources":["../../src/product/Fact.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAaxC;;;;;;;;;GASG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAa;IACpD,OAAO,CACL,MAAC,MAAM,IACL,OAAO,EAAC,eAAe,EACvB,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,MAAM,EACT,iBAAiB,EAAE,CAAC,EACpB,WAAW,EAAC,cAAc,EAC1B,GAAG,EAAC,IAAI,aAER,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACjC,KAAK,GACD,EACN,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,IAAI,IACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,KAAK,EAChB,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YAEjD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACM,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Fact.js","sourceRoot":"","sources":["../../src/product/Fact.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AA4B5D;;;;;;;;;GASG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAa;IAC5H,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACzB,MAAM,KAAK,GACT,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACvD,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YACnH,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAA;QACH,OAAO,CACL,MAAC,MAAM,iBAAW,MAAM,kBAAc,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,EAAE,aAC7E,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC9C,SAAS,EACV,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,YAChE,KAAK,GACD,IACA,EACR,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,YAAY,IACX,KAAK,EAAE,QAAQ,EACf,IAAI,EAAC,IAAI,KACL,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAC5C,GAAG,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,KAAK,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,YAEzE,KAAK,GACO,CAChB,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACM,CACV,CAAA;IACH,CAAC;IACD,OAAO,CACL,MAAC,MAAM,IACL,OAAO,EAAC,eAAe,EACvB,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,MAAM,EACT,iBAAiB,EAAE,CAAC,EACpB,WAAW,EAAC,cAAc,EAC1B,GAAG,EAAC,IAAI,aAER,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACjC,KAAK,GACD,EACN,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,IAAI,IACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,KAAK,EAChB,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YAEjD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACM,CACV,CAAA;AACH,CAAC"}

package/dist/product/Field.cjs

@@ -51,12 +51,24 @@ function FieldTextArea({ value, onChange, disabled, rows = 6, }) {
             onChange(v);
         }, disabled: disabled, numberOfLines: rows }));
 }
-function FieldSwitch({ checked, onChange, disabled, }) {
+/**
+ * A switch, alone or as a settings row.
+ *
+ * With a `label` it is twenty-ui's SettingsRow (MIT, NOTICE): the whole 32px row
+ * is the switch's `<label>`, so a press anywhere on it toggles, with an optional
+ * leading element and a description after a middle dot, the row's hover rung
+ * and the record row's corner and inset. Without one it is the bare switch it
+ * always was.
+ */
+function FieldSwitch({ checked, onChange, disabled, label, description, start, }) {
     const track = useFieldTrack('FieldSwitch');
-    return ((0, jsx_runtime_1.jsx)(gui_1.Switch, { checked: checked, onCheckedChange: (v) => {
+    const control = ((0, jsx_runtime_1.jsx)(gui_1.Switch, { checked: checked, onCheckedChange: (v) => {
             track({ action: 'change', value: v });
             onChange(v);
         }, disabled: disabled, size: "$3", children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, {}) }));
+    if (label == null)
+        return control;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...{ 'data-slot': 'field-switch-row' }, render: "label", items: "center", gap: 8, px: 4, minH: 32, rounded: "$xs", cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: '$hover' }, children: [start, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, minW: 0, items: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$aside", numberOfLines: 1, shrink: 0, children: label }), description ? ((0, jsx_runtime_1.jsxs)(gui_1.Text, { fontSize: "$2", color: "$hint", numberOfLines: 1, shrink: 1, children: ['· ', description] })) : null] }), control] }));
 }
 /**
  * A labeled dropdown.

package/dist/product/Field.d.ts

@@ -48,10 +48,25 @@ export declare function FieldTextArea({ value, onChange, disabled, rows, }: {
     disabled?: boolean;
     rows?: number;
 }): import("react").JSX.Element;
-export declare function FieldSwitch({ checked, onChange, disabled, }: {
+/**
+ * A switch, alone or as a settings row.
+ *
+ * With a `label` it is twenty-ui's SettingsRow (MIT, NOTICE): the whole 32px row
+ * is the switch's `<label>`, so a press anywhere on it toggles, with an optional
+ * leading element and a description after a middle dot, the row's hover rung
+ * and the record row's corner and inset. Without one it is the bare switch it
+ * always was.
+ */
+export declare function FieldSwitch({ checked, onChange, disabled, label, description, start, }: {
     checked: boolean;
     onChange: (v: boolean) => void;
     disabled?: boolean;
+    /** The row's words; the switch's accessible name. */
+    label?: ReactNode;
+    /** Said after the label, quieter. */
+    description?: ReactNode;
+    /** An icon or avatar before the label. */
+    start?: ReactNode;
 }): import("react").JSX.Element;
 export declare function FieldSelect({ value, options, onChange, disabled, placeholder, }: {
     value: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/product/Field.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAiD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AA2BrF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAanF;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,EAAE,GACH,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;OAUG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,+BAoBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BAaA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BAeA;AA+CD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAuB,GACxB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,+BA4BA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BA0BA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/product/Field.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAiD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AA2BrF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAanF;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,EAAE,GACH,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;OAUG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,+BAoBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BAaA;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,GACN,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,+BA4CA;AA+CD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAuB,GACxB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,+BA4BA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BA0BA"}

package/dist/product/Field.js

@@ -43,12 +43,24 @@ export function FieldTextArea({ value, onChange, disabled, rows = 6, }) {
             onChange(v);
         }, disabled: disabled, numberOfLines: rows }));
 }
-export function FieldSwitch({ checked, onChange, disabled, }) {
+/**
+ * A switch, alone or as a settings row.
+ *
+ * With a `label` it is twenty-ui's SettingsRow (MIT, NOTICE): the whole 32px row
+ * is the switch's `<label>`, so a press anywhere on it toggles, with an optional
+ * leading element and a description after a middle dot, the row's hover rung
+ * and the record row's corner and inset. Without one it is the bare switch it
+ * always was.
+ */
+export function FieldSwitch({ checked, onChange, disabled, label, description, start, }) {
     const track = useFieldTrack('FieldSwitch');
-    return (_jsx(Switch, { checked: checked, onCheckedChange: (v) => {
+    const control = (_jsx(Switch, { checked: checked, onCheckedChange: (v) => {
             track({ action: 'change', value: v });
             onChange(v);
         }, disabled: disabled, size: "$3", children: _jsx(Switch.Thumb, {}) }));
+    if (label == null)
+        return control;
+    return (_jsxs(XStack, { ...{ 'data-slot': 'field-switch-row' }, render: "label", items: "center", gap: 8, px: 4, minH: 32, rounded: "$xs", cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: '$hover' }, children: [start, _jsxs(XStack, { flex: 1, minW: 0, items: "center", gap: 4, children: [_jsx(Text, { fontSize: "$2", color: "$aside", numberOfLines: 1, shrink: 0, children: label }), description ? (_jsxs(Text, { fontSize: "$2", color: "$hint", numberOfLines: 1, shrink: 1, children: ['· ', description] })) : null] }), control] }));
 }
 /**
  * A labeled dropdown.

package/dist/product/Field.js.map

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

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".