@hanzo/ui 8.27.91 → 8.29.0

package/dist/backends/gui/stepper.cjs

@@ -1,20 +1,90 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.settle = exports.parseCount = exports.formatCount = void 0;
 exports.Stepper = Stepper;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Stepper — a whole number with a button either side.
+ * Stepper — a number with a button either side.
  *
  * Both buttons are named for the thing counted (`label`), the count is a live
  * region, and each button disables at its bound instead of silently clamping.
+ *
+ * `editable` makes the count a field a person can type into, twenty-ui's
+ * NumberStepper (MIT, NOTICE): a 64px centred value at the medium weight that
+ * commits on Enter or blur — read leniently (grouping stripped, either decimal
+ * mark), held to the bounds, rounded to `step` and to `decimals` — and shows
+ * Latin digits, grouped only from five digits up. It is on by default under
+ * `<Density value="compact">`, where the buttons are 24px; a regular surface
+ * keeps the plain count it always had. `readOnly` keeps the value and the
+ * layout but lets neither the buttons nor the field change it.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
 const button_1 = require("./button.cjs");
+const input_1 = require("./input.cjs");
 const layout_1 = require("./layout.cjs");
 const slot_1 = require("./slot.cjs");
-function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER }) {
+const density_1 = require("./density.cjs");
+/** Up to `decimals` fraction digits, Latin digits, grouping from five digits up. */
+const formatCount = (n, decimals = 0) => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: Math.min(Math.max(decimals, 0), 15),
+    useGrouping: Math.abs(n) >= 10000,
+}).format(n);
+exports.formatCount = formatCount;
+/**
+ * What a person typed, as a number, or `null` when it is not one. Spaces are
+ * dropped. With both marks present the LAST is the decimal one (`1,234.5` and
+ * `1.234,5` both read 1234.5); a comma alone is a decimal mark unless it groups
+ * three digits (`12,345`).
+ */
+const parseCount = (text) => {
+    const t = text.trim().replace(/[\s_]/g, '');
+    if (!t)
+        return null;
+    const dot = t.lastIndexOf('.');
+    const comma = t.lastIndexOf(',');
+    const normal = dot >= 0 && comma >= 0
+        ? dot > comma
+            ? t.replace(/,/g, '')
+            : t.replace(/\./g, '').replace(',', '.')
+        : comma >= 0
+            ? t.replace(/,(?=\d{3}(\D|$))/g, '').replace(',', '.')
+            : t;
+    if (!/^[-+]?(\d+\.?\d*|\.\d+)$/.test(normal))
+        return null;
+    const n = Number(normal);
+    return Number.isFinite(n) ? n : null;
+};
+exports.parseCount = parseCount;
+/** A value held to the bounds and rounded to the step (from `min`) and the decimals. */
+const settle = (n, { min, max, step, decimals }) => {
+    const stepped = step > 0 ? min + Math.round((n - min) / step) * step : n;
+    const bounded = Math.min(max, Math.max(min, stepped));
+    const f = 10 ** Math.min(Math.max(decimals, 0), 15);
+    return Math.round(bounded * f) / f;
+};
+exports.settle = settle;
+function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, decimals = 0, editable, readOnly = false, }) {
     const what = label.toLowerCase();
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "icon", type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, onClick: () => onChange(value - 1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, { size: 16 }) }), (0, jsx_runtime_1.jsx)(layout_1.SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: value }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: "icon", type: "button", "aria-label": `More ${what}`, disabled: value >= max, onClick: () => onChange(value + 1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }) })] }));
+    const compact = (0, density_1.useDensity)() === 'compact';
+    const typing = editable ?? compact;
+    const size = compact ? 'icon-xs' : 'icon';
+    const [draft, setDraft] = (0, react_1.useState)(() => (0, exports.formatCount)(value, decimals));
+    (0, react_1.useEffect)(() => setDraft((0, exports.formatCount)(value, decimals)), [value, decimals]);
+    const commit = () => {
+        const n = (0, exports.parseCount)(draft);
+        if (n == null)
+            return setDraft((0, exports.formatCount)(value, decimals));
+        const next = (0, exports.settle)(n, { min, max, step, decimals });
+        setDraft((0, exports.formatCount)(next, decimals));
+        if (next !== value)
+            onChange(next);
+    };
+    const move = (dir) => onChange((0, exports.settle)(value + dir * step, { min, max, step, decimals }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: size, type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(-1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Minus, { size: 16 }) }), typing ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, slot_1.slot)('stepper-value'), "aria-label": label, size: compact ? 'sm' : 'default', 
+                        // 64 holds a short count; a longer one widens the field rather
+                        // than clipping its own digits (about 8px a character at 13px).
+                        width: Math.max(64, draft.length * 8 + 20), text: "center", fontWeight: "500", inputMode: decimals > 0 ? 'decimal' : 'numeric', value: draft, readOnly: readOnly, onChangeText: (t) => setDraft(t), onBlur: commit, onSubmitEditing: commit }), (0, jsx_runtime_1.jsx)(gui_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)(layout_1.SizableText, { role: "status", "aria-live": "polite", children: (0, exports.formatCount)(value, decimals) }) })] })) : ((0, jsx_runtime_1.jsx)(layout_1.SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: decimals > 0 ? (0, exports.formatCount)(value, decimals) : value })), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", size: size, type: "button", "aria-label": `More ${what}`, disabled: value >= max, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(1), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }) })] }));
 }

package/dist/backends/gui/stepper.d.ts

@@ -5,6 +5,30 @@ export interface StepperProps {
     onChange: (n: number) => void;
     min?: number;
     max?: number;
+    /** How far one press moves the value. */
+    step?: number;
+    /** Fraction digits a typed value keeps (0: whole numbers). */
+    decimals?: number;
+    /** The count is a field. Default: on under a compact density, off elsewhere. */
+    editable?: boolean;
+    /** Shown and announced, never changed. */
+    readOnly?: boolean;
 }
-export declare function Stepper({ label, value, onChange, min, max }: StepperProps): import("react").JSX.Element;
+/** Up to `decimals` fraction digits, Latin digits, grouping from five digits up. */
+export declare const formatCount: (n: number, decimals?: number) => string;
+/**
+ * What a person typed, as a number, or `null` when it is not one. Spaces are
+ * dropped. With both marks present the LAST is the decimal one (`1,234.5` and
+ * `1.234,5` both read 1234.5); a comma alone is a decimal mark unless it groups
+ * three digits (`12,345`).
+ */
+export declare const parseCount: (text: string) => number | null;
+/** A value held to the bounds and rounded to the step (from `min`) and the decimals. */
+export declare const settle: (n: number, { min, max, step, decimals }: {
+    min: number;
+    max: number;
+    step: number;
+    decimals: number;
+}) => number;
+export declare function Stepper({ label, value, onChange, min, max, step, decimals, editable, readOnly, }: StepperProps): import("react").JSX.Element;
 //# sourceMappingURL=stepper.d.ts.map

package/dist/backends/gui/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAO,EAAE,GAA6B,EAAE,EAAE,YAAY,+BAevG"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,YAAY;IAC3B,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,oFAAoF;AACpF,eAAO,MAAM,WAAW,MAAO,MAAM,8BAIvB,CAAA;AAEd;;;;;GAKG;AACH,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,IAgBlD,CAAA;AAED,wFAAwF;AACxF,eAAO,MAAM,MAAM,MAAO,MAAM,gCAAgC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,WAK3H,CAAA;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAA6B,EAC7B,IAAQ,EACR,QAAY,EACZ,QAAQ,EACR,QAAgB,GACjB,EAAE,YAAY,+BAyEd"}

package/dist/backends/gui/stepper.js

@@ -1,18 +1,84 @@
 '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";
 /**
- * Stepper — a whole number with a button either side.
+ * Stepper — a number with a button either side.
  *
  * Both buttons are named for the thing counted (`label`), the count is a live
  * region, and each button disables at its bound instead of silently clamping.
+ *
+ * `editable` makes the count a field a person can type into, twenty-ui's
+ * NumberStepper (MIT, NOTICE): a 64px centred value at the medium weight that
+ * commits on Enter or blur — read leniently (grouping stripped, either decimal
+ * mark), held to the bounds, rounded to `step` and to `decimals` — and shows
+ * Latin digits, grouped only from five digits up. It is on by default under
+ * `<Density value="compact">`, where the buttons are 24px; a regular surface
+ * keeps the plain count it always had. `readOnly` keeps the value and the
+ * layout but lets neither the buttons nor the field change it.
  */
-import { XStack } from '@hanzo/gui';
+import { VisuallyHidden, XStack } from '@hanzo/gui';
 import { Minus, Plus } from '@hanzogui/lucide-icons-2';
+import { useEffect, useState } from 'react';
 import { Button } from './button.js';
+import { Input } from './input.js';
 import { SizableText } from './layout.js';
 import { slot } from './slot.js';
-export function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER }) {
+import { useDensity } from './density.js';
+/** Up to `decimals` fraction digits, Latin digits, grouping from five digits up. */
+export const formatCount = (n, decimals = 0) => new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: Math.min(Math.max(decimals, 0), 15),
+    useGrouping: Math.abs(n) >= 10000,
+}).format(n);
+/**
+ * What a person typed, as a number, or `null` when it is not one. Spaces are
+ * dropped. With both marks present the LAST is the decimal one (`1,234.5` and
+ * `1.234,5` both read 1234.5); a comma alone is a decimal mark unless it groups
+ * three digits (`12,345`).
+ */
+export const parseCount = (text) => {
+    const t = text.trim().replace(/[\s_]/g, '');
+    if (!t)
+        return null;
+    const dot = t.lastIndexOf('.');
+    const comma = t.lastIndexOf(',');
+    const normal = dot >= 0 && comma >= 0
+        ? dot > comma
+            ? t.replace(/,/g, '')
+            : t.replace(/\./g, '').replace(',', '.')
+        : comma >= 0
+            ? t.replace(/,(?=\d{3}(\D|$))/g, '').replace(',', '.')
+            : t;
+    if (!/^[-+]?(\d+\.?\d*|\.\d+)$/.test(normal))
+        return null;
+    const n = Number(normal);
+    return Number.isFinite(n) ? n : null;
+};
+/** A value held to the bounds and rounded to the step (from `min`) and the decimals. */
+export const settle = (n, { min, max, step, decimals }) => {
+    const stepped = step > 0 ? min + Math.round((n - min) / step) * step : n;
+    const bounded = Math.min(max, Math.max(min, stepped));
+    const f = 10 ** Math.min(Math.max(decimals, 0), 15);
+    return Math.round(bounded * f) / f;
+};
+export function Stepper({ label, value, onChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, decimals = 0, editable, readOnly = false, }) {
     const what = label.toLowerCase();
-    return (_jsxs(XStack, { ...slot('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [_jsx(Button, { variant: "outline", size: "icon", type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, onClick: () => onChange(value - 1), children: _jsx(Minus, { size: 16 }) }), _jsx(SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: value }), _jsx(Button, { variant: "outline", size: "icon", type: "button", "aria-label": `More ${what}`, disabled: value >= max, onClick: () => onChange(value + 1), children: _jsx(Plus, { size: 16 }) })] }));
+    const compact = useDensity() === 'compact';
+    const typing = editable ?? compact;
+    const size = compact ? 'icon-xs' : 'icon';
+    const [draft, setDraft] = useState(() => formatCount(value, decimals));
+    useEffect(() => setDraft(formatCount(value, decimals)), [value, decimals]);
+    const commit = () => {
+        const n = parseCount(draft);
+        if (n == null)
+            return setDraft(formatCount(value, decimals));
+        const next = settle(n, { min, max, step, decimals });
+        setDraft(formatCount(next, decimals));
+        if (next !== value)
+            onChange(next);
+    };
+    const move = (dir) => onChange(settle(value + dir * step, { min, max, step, decimals }));
+    return (_jsxs(XStack, { ...slot('stepper'), role: "group", "aria-label": label, items: "center", gap: "$1", children: [_jsx(Button, { variant: "outline", size: size, type: "button", "aria-label": `Fewer ${what}`, disabled: value <= min, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(-1), children: _jsx(Minus, { size: 16 }) }), typing ? (_jsxs(_Fragment, { children: [_jsx(Input, { ...slot('stepper-value'), "aria-label": label, size: compact ? 'sm' : 'default', 
+                        // 64 holds a short count; a longer one widens the field rather
+                        // than clipping its own digits (about 8px a character at 13px).
+                        width: Math.max(64, draft.length * 8 + 20), text: "center", fontWeight: "500", inputMode: decimals > 0 ? 'decimal' : 'numeric', value: draft, readOnly: readOnly, onChangeText: (t) => setDraft(t), onBlur: commit, onSubmitEditing: commit }), _jsx(VisuallyHidden, { children: _jsx(SizableText, { role: "status", "aria-live": "polite", children: formatCount(value, decimals) }) })] })) : (_jsx(SizableText, { role: "status", "aria-live": "polite", minW: 32, text: "center", children: decimals > 0 ? formatCount(value, decimals) : value })), _jsx(Button, { variant: "outline", size: size, type: "button", "aria-label": `More ${what}`, disabled: value >= max, ...(readOnly ? { 'aria-disabled': true, opacity: 0.5, pointerEvents: 'none' } : null), onClick: () => move(1), children: _jsx(Plus, { size: 16 }) })] }));
 }
 //# sourceMappingURL=stepper.js.map

package/dist/backends/gui/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;GAKG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAW7B,MAAM,UAAU,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC,gBAAgB,EAAgB;IACtG,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;IAChC,OAAO,CACL,MAAC,MAAM,OAAK,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,KAAK,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAClF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,gBAAa,SAAS,IAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,YACzI,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACZ,EACT,KAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,eAAW,QAAQ,EAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAC,QAAQ,YAClE,KAAK,GACM,EACd,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,gBAAa,QAAQ,IAAI,EAAE,EAAE,QAAQ,EAAE,KAAK,IAAI,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,YACxI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,GACX,IACF,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/backends/gui/stepper.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/switch.cjs

@@ -50,28 +50,43 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * this file was measured — both thumbs came out the same colour as the track
  * behind them, off and on, exactly as 8.0.57 did. A flat name cannot say "and
  * the opposite of that, one level down", so this file names rungs on purpose.
+ *
+ * THREE SIZES, and the record two are twenty-ui's (MIT, NOTICE): `md` a 32×20
+ * pill with a 16px thumb, `sm` 24×16 with a 12px thumb, each with no edge and
+ * the thumb 2px in. `default` stays the 36×20 pill with its hairline; under
+ * `<Density value="compact">` a switch that names no size is `md`. The tokens do
+ * not change with the size — the inverting thumb works on every one.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
-const TRACK_W = 36;
-const TRACK_H = 20;
-const THUMB = 16;
-const Switch = ({ disabled, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Switch, { ...(0, slot_1.slot)('switch'), width: TRACK_W, height: TRACK_H, minHeight: TRACK_H, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
-    // Without an explicit border the UA's 2px outset button border shows.
-    borderWidth: 1, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
-    // Stated rather than left to a `disabledStyle` this backend uses nowhere
-    // else: a control that ignores its own disabled prop looks identical to a
-    // live one, and the page this was found on had a disabled switch sitting
-    // beside eight enabled ones with nothing to tell them apart.
-    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(TRACK_H, 44, 'y'), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { ...(0, slot_1.slot)('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color3", 
-        // `bg`, and it is the only one of the three spellings that is both typed
-        // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
-        // `backgroundColor` paints but is not in that type; `background` is in it
-        // and compiles to a SEPARATE `_background-` class that races the base
-        // `_bg-` one on load order rather than replacing it; `bg` replaces it.
-        // Consumers build with ignoreBuildErrors, so the first would have shipped
-        // an error nobody sees and the second a colour that lands or does not
-        // depending on stylesheet order.
-        activeStyle: { bg: '$color12' } }) }));
+const density_1 = require("./density.cjs");
+/** Each size's track, thumb and edge. The edge is what keeps the UA's button border off. */
+const SIZE = {
+    default: { w: 36, h: 20, thumb: 16, edge: 1 },
+    md: { w: 32, h: 20, thumb: 16, edge: 0 },
+    sm: { w: 24, h: 16, thumb: 12, edge: 0 },
+};
+const Switch = ({ disabled, size, ...props }) => {
+    const compact = (0, density_1.useDensity)() === 'compact';
+    const box = SIZE[size ?? (compact ? 'md' : 'default')];
+    return ((0, jsx_runtime_1.jsx)(gui_1.Switch, { ...(0, slot_1.slot)('switch'), "data-size": size ?? (compact ? 'md' : 'default'), width: box.w, height: box.h, minHeight: box.h, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
+        // Without an explicit border the UA's 2px outset button border shows; the
+        // record sizes draw none and say so with a zero.
+        borderWidth: box.edge, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
+        // Stated rather than left to a `disabledStyle` this backend uses nowhere
+        // else: a control that ignores its own disabled prop looks identical to a
+        // live one, and the page this was found on had a disabled switch sitting
+        // beside eight enabled ones with nothing to tell them apart.
+        disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...(0, gesture_1.touch)(box.h, 44, 'y'), ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { ...(0, slot_1.slot)('switch-thumb'), width: box.thumb, height: box.thumb, backgroundColor: "$color3", 
+            // `bg`, and it is the only one of the three spellings that is both typed
+            // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
+            // `backgroundColor` paints but is not in that type; `background` is in it
+            // and compiles to a SEPARATE `_background-` class that races the base
+            // `_bg-` one on load order rather than replacing it; `bg` replaces it.
+            // Consumers build with ignoreBuildErrors, so the first would have shipped
+            // an error nobody sees and the second a colour that lands or does not
+            // depending on stylesheet order.
+            activeStyle: { bg: '$color12' } }) }));
+};
 exports.Switch = Switch;

package/dist/backends/gui/switch.d.ts

@@ -45,10 +45,20 @@
  * this file was measured — both thumbs came out the same colour as the track
  * behind them, off and on, exactly as 8.0.57 did. A flat name cannot say "and
  * the opposite of that, one level down", so this file names rungs on purpose.
+ *
+ * THREE SIZES, and the record two are twenty-ui's (MIT, NOTICE): `md` a 32×20
+ * pill with a 16px thumb, `sm` 24×16 with a 12px thumb, each with no edge and
+ * the thumb 2px in. `default` stays the 36×20 pill with its hairline; under
+ * `<Density value="compact">` a switch that names no size is `md`. The tokens do
+ * not change with the size — the inverting thumb works on every one.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
-export type SwitchProps = ComponentProps<typeof GuiSwitch>;
-declare const Switch: ({ disabled, ...props }: SwitchProps) => import("react").JSX.Element;
+export type SwitchSize = 'default' | 'md' | 'sm';
+export type SwitchProps = Omit<ComponentProps<typeof GuiSwitch>, 'size'> & {
+    /** `default` 36×20; `md` 32×20 and `sm` 24×16, the record pair. Unset, the nearest `<Density>` decides. */
+    size?: SwitchSize;
+};
+declare const Switch: ({ disabled, size, ...props }: SwitchProps) => import("react").JSX.Element;
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/backends/gui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAQ3C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAE1D,QAAA,MAAM,MAAM,2BAA4B,WAAW,gCAuClD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAShD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE,MAAM,CAAC,GAAG;IACzE,2GAA2G;IAC3G,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,MAAM,iCAAkC,WAAW,gCA6CxD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/switch.js

@@ -47,29 +47,44 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * this file was measured — both thumbs came out the same colour as the track
  * behind them, off and on, exactly as 8.0.57 did. A flat name cannot say "and
  * the opposite of that, one level down", so this file names rungs on purpose.
+ *
+ * THREE SIZES, and the record two are twenty-ui's (MIT, NOTICE): `md` a 32×20
+ * pill with a 16px thumb, `sm` 24×16 with a 12px thumb, each with no edge and
+ * the thumb 2px in. `default` stays the 36×20 pill with its hairline; under
+ * `<Density value="compact">` a switch that names no size is `md`. The tokens do
+ * not change with the size — the inverting thumb works on every one.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
-const TRACK_W = 36;
-const TRACK_H = 20;
-const THUMB = 16;
-const Switch = ({ disabled, ...props }) => (_jsx(GuiSwitch, { ...slot('switch'), width: TRACK_W, height: TRACK_H, minHeight: TRACK_H, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
-    // Without an explicit border the UA's 2px outset button border shows.
-    borderWidth: 1, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
-    // Stated rather than left to a `disabledStyle` this backend uses nowhere
-    // else: a control that ignores its own disabled prop looks identical to a
-    // live one, and the page this was found on had a disabled switch sitting
-    // beside eight enabled ones with nothing to tell them apart.
-    disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...touch(TRACK_H, 44, 'y'), ...props, children: _jsx(GuiSwitch.Thumb, { ...slot('switch-thumb'), width: THUMB, height: THUMB, backgroundColor: "$color3", 
-        // `bg`, and it is the only one of the three spellings that is both typed
-        // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
-        // `backgroundColor` paints but is not in that type; `background` is in it
-        // and compiles to a SEPARATE `_background-` class that races the base
-        // `_bg-` one on load order rather than replacing it; `bg` replaces it.
-        // Consumers build with ignoreBuildErrors, so the first would have shipped
-        // an error nobody sees and the second a colour that lands or does not
-        // depending on stylesheet order.
-        activeStyle: { bg: '$color12' } }) }));
+import { useDensity } from './density.js';
+/** Each size's track, thumb and edge. The edge is what keeps the UA's button border off. */
+const SIZE = {
+    default: { w: 36, h: 20, thumb: 16, edge: 1 },
+    md: { w: 32, h: 20, thumb: 16, edge: 0 },
+    sm: { w: 24, h: 16, thumb: 12, edge: 0 },
+};
+const Switch = ({ disabled, size, ...props }) => {
+    const compact = useDensity() === 'compact';
+    const box = SIZE[size ?? (compact ? 'md' : 'default')];
+    return (_jsx(GuiSwitch, { ...slot('switch'), "data-size": size ?? (compact ? 'md' : 'default'), width: box.w, height: box.h, minHeight: box.h, padding: 2, flexShrink: 0, backgroundColor: "$color3", 
+        // Without an explicit border the UA's 2px outset button border shows; the
+        // record sizes draw none and say so with a zero.
+        borderWidth: box.edge, borderColor: "$borderColor", activeStyle: { backgroundColor: '$color12', borderColor: '$color12' }, 
+        // Stated rather than left to a `disabledStyle` this backend uses nowhere
+        // else: a control that ignores its own disabled prop looks identical to a
+        // live one, and the page this was found on had a disabled switch sitting
+        // beside eight enabled ones with nothing to tell them apart.
+        disabled: disabled, opacity: disabled ? 0.5 : 1, cursor: disabled ? 'not-allowed' : 'pointer', ...touch(box.h, 44, 'y'), ...props, children: _jsx(GuiSwitch.Thumb, { ...slot('switch-thumb'), width: box.thumb, height: box.thumb, backgroundColor: "$color3", 
+            // `bg`, and it is the only one of the three spellings that is both typed
+            // and correct. The Thumb's activeStyle is typed as the SHORTHAND style set:
+            // `backgroundColor` paints but is not in that type; `background` is in it
+            // and compiles to a SEPARATE `_background-` class that races the base
+            // `_bg-` one on load order rather than replacing it; `bg` replaces it.
+            // Consumers build with ignoreBuildErrors, so the first would have shipped
+            // an error nobody sees and the second a colour that lands or does not
+            // depending on stylesheet order.
+            activeStyle: { bg: '$color12' } }) }));
+};
 export { Switch };
 //# sourceMappingURL=switch.js.map

package/dist/backends/gui/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,OAAO,GAAG,EAAE,CAAA;AAClB,MAAM,KAAK,GAAG,EAAE,CAAA;AAIhB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACtD,KAAC,SAAS,OACJ,IAAI,CAAC,QAAQ,CAAC,EAClB,KAAK,EAAE,OAAO,EACd,MAAM,EAAE,OAAO,EACf,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAC,SAAS;IACzB,sEAAsE;IACtE,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE;IACrE,yEAAyE;IACzE,0EAA0E;IAC1E,yEAAyE;IACzE,6DAA6D;IAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC,KACvB,KAAK,YAET,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,EACb,eAAe,EAAC,SAAS;QACzB,yEAAyE;QACzE,4EAA4E;QAC5E,0EAA0E;QAC1E,sEAAsE;QACtE,uEAAuE;QACvE,0EAA0E;QAC1E,sEAAsE;QACtE,iCAAiC;QACjC,WAAW,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAC/B,GACQ,CACb,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAItC,4FAA4F;AAC5F,MAAM,IAAI,GAA8E;IACtF,OAAO,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IAC7C,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACxC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;CACzC,CAAA;AAOD,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IAC3D,MAAM,OAAO,GAAG,UAAU,EAAE,KAAK,SAAS,CAAA;IAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IACtD,OAAO,CACP,KAAC,SAAS,OACJ,IAAI,CAAC,QAAQ,CAAC,eACP,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,EAC/C,KAAK,EAAE,GAAG,CAAC,CAAC,EACZ,MAAM,EAAE,GAAG,CAAC,CAAC,EACb,SAAS,EAAE,GAAG,CAAC,CAAC,EAChB,OAAO,EAAE,CAAC,EACV,UAAU,EAAE,CAAC,EACb,eAAe,EAAC,SAAS;QACzB,0EAA0E;QAC1E,iDAAiD;QACjD,WAAW,EAAE,GAAG,CAAC,IAAI,EACrB,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,EAAE,eAAe,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE;QACrE,yEAAyE;QACzE,0EAA0E;QAC1E,yEAAyE;QACzE,6DAA6D;QAC7D,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,KACrB,KAAK,YAET,KAAC,SAAS,CAAC,KAAK,OACV,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,MAAM,EAAE,GAAG,CAAC,KAAK,EACjB,eAAe,EAAC,SAAS;YACzB,yEAAyE;YACzE,4EAA4E;YAC5E,0EAA0E;YAC1E,sEAAsE;YACtE,uEAAuE;YACvE,0EAA0E;YAC1E,sEAAsE;YACtE,iCAAiC;YACjC,WAAW,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,GAC/B,GACQ,CACX,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/tabs.cjs

@@ -3,30 +3,76 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/** Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor. */
+/**
+ * Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor.
+ *
+ * Two looks. The default is the segmented pill: a 36px track on the hover rung
+ * with the chosen tab lifted onto the ground. `variant="line"` is the record
+ * page's strip (twenty-ui's Tabs, MIT, NOTICE): a transparent list over a 1px
+ * baseline, 40px tabs whose label sits in an inner box (8×8 at `md`, 4×8 at
+ * `sm`, 8px corner) that takes the hover rung under the pointer, and a 1px line
+ * in the ink under the chosen tab. A tab takes a `startIcon`, an `endIcon` and a
+ * `badge`, and `highlighted` rings it (a drop target during a drag). Vertical
+ * orientation moves the baseline to the end edge.
+ *
+ * The variant and the chosen value ride a context from the root, because gui
+ * paints a tab's `activeStyle` but tells nothing else inside it which tab is
+ * chosen — and the line has to know where to draw.
+ */
 const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
 const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const ROW_H = 36;
-const Tabs = (p) => (0, jsx_runtime_1.jsx)(gui_1.Tabs, { ...(0, slot_1.slot)('tabs'), flexDirection: "column", gap: "$2", ...p });
+const LINE_H = 40;
+const LineContext = /* @__PURE__ */ (0, react_1.createContext)({ variant: 'default', value: undefined, vertical: false });
+const Tabs = ({ variant = 'default', value, defaultValue, onValueChange, orientation, ...p }) => {
+    const [own, setOwn] = (0, react_1.useState)(defaultValue);
+    const current = value ?? own;
+    return ((0, jsx_runtime_1.jsx)(LineContext.Provider, { value: { variant, value: current, vertical: orientation === 'vertical' }, children: (0, jsx_runtime_1.jsx)(gui_1.Tabs, { ...(0, slot_1.slot)('tabs'), flexDirection: orientation === 'vertical' ? 'row' : 'column', gap: "$2", ...(value !== undefined ? { value } : { defaultValue }), onValueChange: (v) => {
+                setOwn(v);
+                onValueChange?.(v);
+            }, ...(orientation ? { orientation } : null), ...(variant === 'line' ? { 'data-variant': 'line' } : null), ...p }) }));
+};
 exports.Tabs = Tabs;
-const TabsList = (p) => ((0, jsx_runtime_1.jsx)(gui_1.Tabs.List, { ...(0, slot_1.slot)('tabs-list'), items: "center", justify: "center", self: "flex-start", height: ROW_H, p: 3, gap: 2, bg: "$hover", rounded: "$4", ...p }));
+const TabsList = (p) => {
+    const { variant, vertical } = (0, react_1.useContext)(LineContext);
+    if (variant === 'line')
+        return ((0, jsx_runtime_1.jsx)(gui_1.Tabs.List, { ...(0, slot_1.slot)('tabs-list'), ...(vertical
+                ? { flexDirection: 'column', borderRightWidth: 1, items: 'stretch' }
+                : { flexDirection: 'row', borderBottomWidth: 1, items: 'flex-end' }), borderColor: "$borderColor", bg: "transparent", gap: "$1", p: 0, rounded: 0, justify: "flex-start", ...p }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.Tabs.List, { ...(0, slot_1.slot)('tabs-list'), items: "center", justify: "center", self: "flex-start", height: ROW_H, p: 3, gap: 2, bg: "$hover", rounded: "$4", ...p }));
+};
 exports.TabsList = TabsList;
-const TabsTrigger = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { ...(0, slot_1.slot)('tabs-trigger'), unstyled: true, items: "center", justify: "center", height: "100%", px: "$3", gap: "$1.5", rounded: "$3", cursor: "pointer", ...(0, gesture_1.touch)(ROW_H, 44, 'y'), hoverStyle: { bg: '$edge' }, focusStyle: { bg: '$edge' }, 
-    // The selected tab. gui's `Tabs.Tab` spreads `activeStyle` only for the tab
-    // whose `value` is current, and the `unstyled` frame drops its OWN active
-    // default (`...!unstyled && !activeStyle && {…}` in the compiled frame) — so
-    // without this the active tab is painted identically to the rest and the row
-    // reads as though nothing is chosen. A raised `$background` pill on the
-    // `$hover` track: shadcn's `data-[state=active]:bg-background shadow-sm`.
-    activeStyle: {
-        bg: '$background',
-        shadowColor: '$shadowColor',
-        shadowOpacity: 0.12,
-        shadowRadius: 3,
-        shadowOffset: { width: 0, height: 1 },
-    }, ...p, children: (0, ink_1.ink)(children, undefined, { size: '$2', fontWeight: '500' }) }));
+/** The record strip's tab: an inner box that hovers, and the line under the chosen one. */
+const LineTab = ({ children, startIcon, endIcon, badge, size = 'md', highlighted = false, disabled, value, ...p }) => {
+    const { value: current, vertical } = (0, react_1.useContext)(LineContext);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const chosen = current === value;
+    const tone = disabled ? '$hush' : chosen ? '$ink' : '$aside';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs.Tab, { ...(0, slot_1.slot)('tabs-trigger'), "data-variant": "line", ...(chosen ? { 'data-chosen': '' } : null), unstyled: true, value: value, disabled: disabled, position: "relative", items: "center", justify: "center", minH: LINE_H, p: 0, bg: "transparent", borderWidth: 0, cursor: disabled ? 'default' : 'pointer', ...(0, gesture_1.touch)(LINE_H, 44, 'y'), onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false), ...p, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('tabs-trigger-box'), items: "center", gap: "$1", px: "$2", py: size === 'sm' ? '$1' : '$2', rounded: highlighted ? '$xs' : '$3', bg: hovered && !disabled ? '$hover' : 'transparent', ...(highlighted ? { outlineWidth: 1, outlineStyle: 'solid', outlineColor: 'var(--primary)', outlineOffset: -1 } : null), children: [startIcon, (0, ink_1.ink)(children, undefined, { size: '$2', fontWeight: '500', color: tone, numberOfLines: 1 }), badge, endIcon] }), chosen ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('tabs-indicator'), position: "absolute", bg: "$ink", ...(vertical ? { r: -1, t: 0, b: 0, width: 1 } : { b: -1, l: 0, r: 0, height: 1 }) })) : null] }));
+};
+const TabsTrigger = (props) => {
+    const { variant } = (0, react_1.useContext)(LineContext);
+    if (variant === 'line')
+        return (0, jsx_runtime_1.jsx)(LineTab, { ...props });
+    const { children, startIcon, endIcon, badge, size: _size, highlighted: _highlighted, ...p } = props;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs.Tab, { ...(0, slot_1.slot)('tabs-trigger'), unstyled: true, items: "center", justify: "center", height: "100%", px: "$3", gap: "$1.5", rounded: "$3", cursor: "pointer", ...(0, gesture_1.touch)(ROW_H, 44, 'y'), hoverStyle: { bg: '$edge' }, focusStyle: { bg: '$edge' }, 
+        // The selected tab. gui's `Tabs.Tab` spreads `activeStyle` only for the tab
+        // whose `value` is current, and the `unstyled` frame drops its OWN active
+        // default (`...!unstyled && !activeStyle && {…}` in the compiled frame) — so
+        // without this the active tab is painted identically to the rest and the row
+        // reads as though nothing is chosen. A raised `$background` pill on the
+        // `$hover` track: shadcn's `data-[state=active]:bg-background shadow-sm`.
+        activeStyle: {
+            bg: '$background',
+            shadowColor: '$shadowColor',
+            shadowOpacity: 0.12,
+            shadowRadius: 3,
+            shadowOffset: { width: 0, height: 1 },
+        }, ...p, children: [startIcon, (0, ink_1.ink)(children, undefined, { size: '$2', fontWeight: '500' }), badge, endIcon] }));
+};
 exports.TabsTrigger = TabsTrigger;
 const TabsContent = ({ children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Tabs.Content, { ...(0, slot_1.slot)('tabs-content'), flex: 1, ...p, children: (0, ink_1.ink)(children) }));
 exports.TabsContent = TabsContent;

package/dist/backends/gui/tabs.d.ts

@@ -1,13 +1,42 @@
-/** Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor. */
+/**
+ * Tabs — `TabsTrigger` is gui's `Tabs.Tab`; rows meet the 44px touch floor.
+ *
+ * Two looks. The default is the segmented pill: a 36px track on the hover rung
+ * with the chosen tab lifted onto the ground. `variant="line"` is the record
+ * page's strip (twenty-ui's Tabs, MIT, NOTICE): a transparent list over a 1px
+ * baseline, 40px tabs whose label sits in an inner box (8×8 at `md`, 4×8 at
+ * `sm`, 8px corner) that takes the hover rung under the pointer, and a 1px line
+ * in the ink under the chosen tab. A tab takes a `startIcon`, an `endIcon` and a
+ * `badge`, and `highlighted` rings it (a drop target during a drag). Vertical
+ * orientation moves the baseline to the end edge.
+ *
+ * The variant and the chosen value ride a context from the root, because gui
+ * paints a tab's `activeStyle` but tells nothing else inside it which tab is
+ * chosen — and the line has to know where to draw.
+ */
 import { Tabs as GuiTabs } from '@hanzo/gui';
-import type { ComponentProps } from 'react';
-export type TabsProps = ComponentProps<typeof GuiTabs>;
+import { type ComponentProps, type ReactNode } from 'react';
+export type TabsProps = ComponentProps<typeof GuiTabs> & {
+    /** `line` is the underlined record strip; the default is the segmented pill. */
+    variant?: 'default' | 'line';
+};
 export type TabsListProps = ComponentProps<typeof GuiTabs.List>;
-export type TabsTriggerProps = ComponentProps<typeof GuiTabs.Tab>;
+export type TabsTriggerProps = Omit<ComponentProps<typeof GuiTabs.Tab>, 'size'> & {
+    /** A 16px icon before the label (line variant). */
+    startIcon?: ReactNode;
+    /** An icon after the label. */
+    endIcon?: ReactNode;
+    /** A count or marker after the label. */
+    badge?: ReactNode;
+    /** `sm` tightens the inner box to 4×8 (line variant). */
+    size?: 'sm' | 'md';
+    /** Ringed as a drop target. */
+    highlighted?: boolean;
+};
 export type TabsContentProps = ComponentProps<typeof GuiTabs.Content>;
-declare const Tabs: (p: TabsProps) => import("react").JSX.Element;
+declare const Tabs: ({ variant, value, defaultValue, onValueChange, orientation, ...p }: TabsProps) => import("react").JSX.Element;
 declare const TabsList: (p: TabsListProps) => import("react").JSX.Element;
-declare const TabsTrigger: ({ children, ...p }: TabsTriggerProps) => import("react").JSX.Element;
+declare const TabsTrigger: (props: TabsTriggerProps) => import("react").JSX.Element;
 declare const TabsContent: ({ children, ...p }: TabsContentProps) => import("react").JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/backends/gui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tabs.tsx"],"names":[],"mappings":"AAEA,gFAAgF;AAChF,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAO3C,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;AACtD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AAC/D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAA;AACjE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA;AAErE,QAAA,MAAM,IAAI,MAAO,SAAS,gCAAyE,CAAA;AAEnG,QAAA,MAAM,QAAQ,MAAO,aAAa,gCAajC,CAAA;AAED,QAAA,MAAM,WAAW,uBAAwB,gBAAgB,gCA+BxD,CAAA;AAED,QAAA,MAAM,WAAW,uBAAwB,gBAAgB,gCAIxD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/tabs.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,IAAI,IAAI,OAAO,EAAkB,MAAM,YAAY,CAAA;AAC5D,OAAO,EAAuC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWhG,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IACvD,gFAAgF;IAChF,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;CAC7B,CAAA;AACD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AAC/D,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAChF,mDAAmD;IACnD,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AACD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA;AAErE,QAAA,MAAM,IAAI,uEAAoF,SAAS,gCAoBtG,CAAA;AAED,QAAA,MAAM,QAAQ,MAAO,aAAa,gCAgCjC,CAAA;AAwDD,QAAA,MAAM,WAAW,UAAW,gBAAgB,gCAuC3C,CAAA;AAED,QAAA,MAAM,WAAW,uBAAwB,gBAAgB,gCAIxD,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}