@hanzo/ui 8.0.61 → 8.0.63

package/dist/product/CopyButton.d.ts

@@ -1,12 +1,39 @@
+/**
+ * CopyButton — copy with a confirmation tick.
+ *
+ * The tick is the point. A control that looks identical before and after leaves
+ * the reader unsure whether it fired, and the usual response is to press it
+ * again. Reverts after `CONFIRM`, and clears its timer on unmount so it cannot
+ * set state on a component that is gone.
+ *
+ * It lived inside `chat/Code.tsx` and was reachable only as `@hanzo/ui/chat`.
+ * Nobody looks in a chat module for a copy button, so every surface wrote its
+ * own — an API key here, a deposit address there, a referral link, a wire
+ * instruction — each with its own confirmation window, or none. Copying text is
+ * not a chat idea; it belongs to the product layer, and `Code` now imports it
+ * from here rather than owning it.
+ */
+import { type ReactNode } from 'react';
 export interface CopyButtonProps {
     /** The text placed on the clipboard. */
     value: string;
-    /** Resting label — the tooltip and the accessible name. */
+    /**
+     * Visible text beside the glyph — "Copy key", "Copy address". Omit for the
+     * bare square the icon form has always been.
+     *
+     * There is no second prop and no variant to pick, because the two forms differ
+     * in exactly one thing: whether the label is drawn. A control standing alone —
+     * under a minted key, beside a wire instruction — has no neighbours to explain
+     * it, and an unlabeled glyph there is a guess; inside a code header or a table
+     * row the label is noise. Passing the text is what asks for it.
+     */
+    children?: ReactNode;
+    /** The tooltip and the accessible name. Defaults to the visible text, else "Copy". */
     label?: string;
-    /** Edge of the square hit area. Default 24. */
+    /** Edge of the glyph's square. Default 24. */
     size?: number;
     /** Names the copied thing in analytics ("api-key", "address"). Never the value. */
     id?: string;
 }
-export declare function CopyButton({ value, label, size, id }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CopyButton({ value, children, label, size, id }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CopyButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/product/CopyButton.tsx"],"names":[],"mappings":"AA2BA,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAc,EAAE,IAAS,EAAE,EAAE,EAAE,EAAE,eAAe,2CAgDnF"}
+{"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/product/CopyButton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUnE,MAAM,WAAW,eAAe;IAC9B,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE,EAAE,EAAE,eAAe,2CAgEpF"}

package/dist/product/CopyButton.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CopyButton — copy with a confirmation tick.
  *
@@ -16,13 +16,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * from here rather than owning it.
  */
 import { useEffect, useRef, useState } from 'react';
-import { XStack } from '@hanzo/gui';
+import { Text, XStack } from '@hanzo/gui';
 import { Check, Copy } from '@hanzogui/lucide-icons-2';
 import { tip } from '../backends/gui/slot.js';
 import { useEmit } from './instrument.js';
 /** How long the control shows its confirmation, in ms. */
 const CONFIRM = 2000;
-export function CopyButton({ value, label = 'Copy', size = 24, id }) {
+export function CopyButton({ value, children, label, size = 24, id }) {
     const [copied, setCopied] = useState(false);
     const timer = useRef(undefined);
     const track = useEmit();
@@ -47,6 +47,20 @@ export function CopyButton({ value, label = 'Copy', size = 24, id }) {
             track({ component: 'CopyButton', action: 'error', id });
         });
     };
-    return (_jsx(XStack, { width: size, height: size, items: "center", justify: "center", rounded: "$2", cursor: "pointer", opacity: 0.7, onPress: copy, role: "button", tabIndex: 0, "aria-label": copied ? 'Copied' : label, ...tip(copied ? 'Copied' : label), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: copied ? _jsx(Check, { size: Math.round(size * 0.58) }) : _jsx(Copy, { size: Math.round(size * 0.58) }) }));
+    const name = label ?? (typeof children === 'string' ? children : 'Copy');
+    const glyph = Math.round(size * 0.58);
+    return (_jsxs(XStack
+    // The label form is a pill that sizes to its text; the icon form is the
+    // square it has always been. `height` is shared so a labeled control lines
+    // up with an unlabeled one in the same row.
+    , { 
+        // The label form is a pill that sizes to its text; the icon form is the
+        // square it has always been. `height` is shared so a labeled control lines
+        // up with an unlabeled one in the same row.
+        width: children == null ? size : undefined, height: size, px: children == null ? undefined : '$2', gap: children == null ? undefined : '$1.5', items: "center", justify: "center", rounded: "$2", cursor: "pointer", opacity: 0.7, onPress: copy, role: "button", tabIndex: 0, "aria-label": copied ? 'Copied' : name, ...tip(copied ? 'Copied' : name), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: [copied ? _jsx(Check, { size: glyph }) : _jsx(Copy, { size: glyph }), children == null ? null : (
+            // The word carries the confirmation too. A tick alone, at 14px, beside
+            // text that did not change is the smallest possible way to say the thing
+            // the control exists to say.
+            _jsx(Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, children: copied ? 'Copied' : children }))] }));
 }
 //# sourceMappingURL=CopyButton.js.map

package/dist/product/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../src/product/CopyButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAEtC,0DAA0D;AAC1D,MAAM,OAAO,GAAG,IAAI,CAAA;AAapB,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,EAAE,EAAmB;IAClF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,KAAK,GAAG,MAAM,CAA4C,SAAS,CAAC,CAAA;IAC1E,MAAM,KAAK,GAAG,OAAO,EAAE,CAAA;IAEvB,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAEtD,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,2EAA2E;QAC3E,2EAA2E;QAC3E,4BAA4B;QAC5B,SAAS,EAAE,SAAS;YAClB,EAAE,SAAS,CAAC,KAAK,CAAC;aACjB,IAAI,CAAC,GAAG,EAAE;YACT,wEAAwE;YACxE,eAAe;YACf,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,CAAA;YAC5E,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;YAC3B,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAA;QAC7D,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,yEAAyE;YACzE,oEAAoE;YACpE,KAAK,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QACzD,CAAC,CAAC,CAAA;IACN,CAAC,CAAA;IAED,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAC,IAAI,EACZ,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,KACjC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,EAClC,UAAU,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,EACzC,UAAU,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,YAE5B,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,GAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,GAAI,GACrF,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"CopyButton.js","sourceRoot":"","sources":["../../src/product/CopyButton.tsx"],"names":[],"mappings":"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"}

package/dist/product/DataTable.cjs

@@ -8,7 +8,7 @@ const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const instrument_1 = require("./instrument.cjs");
 /** Skeleton rows in the real column layout — an honest "loading", never a void. */
 function SkeletonRows({ columns, count = 6 }) {
-    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { children: Array.from({ length: count }).map((_, r) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", children: columns.map((c, i) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, items: c.align === 'right' ? 'flex-end' : 'flex-start', children: (0, jsx_runtime_1.jsx)("div", { className: "skeleton", style: { height: 12, borderRadius: 6, width: `${[62, 40, 54, 34, 48][(i + r) % 5]}%` }, "aria-hidden": true }) }, c.key))) }, r))) }));
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { children: Array.from({ length: count }).map((_, r) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", children: columns.map((c, i) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, items: c.align === 'right' ? 'flex-end' : 'flex-start', children: (0, jsx_runtime_1.jsx)("div", { className: "hz-skeleton", style: { height: 12, borderRadius: 6, width: `${[62, 40, 54, 34, 48][(i + r) % 5]}%` }, "aria-hidden": true }) }, c.key))) }, r))) }));
 }
 function DataTable({ columns, rows, loading, empty = 'Nothing here yet.', rowKey, onRowPress, isRowExpanded, renderExpanded, sort, onSortChange, }) {
     // Every table in the fleet reports the same two interactions with no app code.
@@ -31,10 +31,10 @@ function DataTable({ columns, rows, loading, empty = 'Nothing here yet.', rowKey
                                             track({ component: 'DataTable', action: 'sort', id: c.key, value: sort?.key === c.key && sort?.dir === 'asc' ? 'desc' : 'asc' });
                                             onSortChange?.(c.key);
                                         }
-                                        : undefined, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "500", color: active ? '$color12' : '$color10', text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'tnum' : undefined, children: c.header }), Caret ? (0, jsx_runtime_1.jsx)(Caret, { size: 12, color: active ? '$color12' : '$color9' }) : null] }, c.key));
+                                        : undefined, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "500", color: active ? '$color12' : '$color10', text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'hz-tnum' : undefined, children: c.header }), Caret ? (0, jsx_runtime_1.jsx)(Caret, { size: 12, color: active ? '$color12' : '$color9' }) : null] }, c.key));
                             }) }), loading ? ((0, jsx_runtime_1.jsx)(SkeletonRows, { columns: columns })) : rows.length > 0 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { children: rows.map((row) => {
                                 const expanded = (isRowExpanded?.(row) ?? false) && !!renderExpanded;
-                                return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { className: "row", py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", bg: expanded ? '$color2' : undefined, hoverStyle: onRowPress ? { bg: '$color2' } : undefined, cursor: onRowPress ? 'pointer' : undefined, onPress: onRowPress
+                                return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { className: "hz-row", py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", bg: expanded ? '$color2' : undefined, hoverStyle: onRowPress ? { bg: '$color2' } : undefined, cursor: onRowPress ? 'pointer' : undefined, onPress: onRowPress
                                                 ? () => {
                                                     track({ component: 'DataTable', action: 'select', id: rowKey(row), value: rows.length });
                                                     onRowPress(row);
@@ -49,7 +49,7 @@ function DataTable({ columns, rows, loading, empty = 'Nothing here yet.', rowKey
                                                 // and always picks up the numeric mono/align styling. Element
                                                 // renders (Text/badges/cells) pass through untouched.
                                                 const cell = c.render ? c.render(row) : String(row[c.key] ?? '');
-                                                return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, justify: "center", items: c.align === 'right' ? 'flex-end' : 'flex-start', children: typeof cell === 'string' || typeof cell === 'number' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", numberOfLines: 1, color: "$color12", text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'mono' : undefined, children: cell })) : (cell) }, c.key));
+                                                return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, justify: "center", items: c.align === 'right' ? 'flex-end' : 'flex-start', children: typeof cell === 'string' || typeof cell === 'number' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", numberOfLines: 1, color: "$color12", text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'hz-mono' : undefined, children: cell })) : (cell) }, c.key));
                                             }) }), expanded && renderExpanded ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { borderTopWidth: 1, borderColor: "$borderColor", bg: "$color1", children: renderExpanded(row) })) : null] }, rowKey(row)));
                             }) })) : null] }) }), !loading && rows.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { py: "$8", px: "$4", items: "center", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(gui_1.Text, { color: "$color10", fontSize: "$3", text: "center", children: empty }) })) : null] }));
 }

package/dist/product/DataTable.js

@@ -5,7 +5,7 @@ import { ChevronDown, ChevronsUpDown, ChevronUp } from '@hanzogui/lucide-icons-2
 import { useEmit } from './instrument.js';
 /** Skeleton rows in the real column layout — an honest "loading", never a void. */
 function SkeletonRows({ columns, count = 6 }) {
-    return (_jsx(YStack, { children: Array.from({ length: count }).map((_, r) => (_jsx(XStack, { py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", children: columns.map((c, i) => (_jsx(YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, items: c.align === 'right' ? 'flex-end' : 'flex-start', children: _jsx("div", { className: "skeleton", style: { height: 12, borderRadius: 6, width: `${[62, 40, 54, 34, 48][(i + r) % 5]}%` }, "aria-hidden": true }) }, c.key))) }, r))) }));
+    return (_jsx(YStack, { children: Array.from({ length: count }).map((_, r) => (_jsx(XStack, { py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", children: columns.map((c, i) => (_jsx(YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, items: c.align === 'right' ? 'flex-end' : 'flex-start', children: _jsx("div", { className: "hz-skeleton", style: { height: 12, borderRadius: 6, width: `${[62, 40, 54, 34, 48][(i + r) % 5]}%` }, "aria-hidden": true }) }, c.key))) }, r))) }));
 }
 export function DataTable({ columns, rows, loading, empty = 'Nothing here yet.', rowKey, onRowPress, isRowExpanded, renderExpanded, sort, onSortChange, }) {
     // Every table in the fleet reports the same two interactions with no app code.
@@ -28,10 +28,10 @@ export function DataTable({ columns, rows, loading, empty = 'Nothing here yet.',
                                             track({ component: 'DataTable', action: 'sort', id: c.key, value: sort?.key === c.key && sort?.dir === 'asc' ? 'desc' : 'asc' });
                                             onSortChange?.(c.key);
                                         }
-                                        : undefined, children: [_jsx(Text, { fontSize: "$1", fontWeight: "500", color: active ? '$color12' : '$color10', text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'tnum' : undefined, children: c.header }), Caret ? _jsx(Caret, { size: 12, color: active ? '$color12' : '$color9' }) : null] }, c.key));
+                                        : undefined, children: [_jsx(Text, { fontSize: "$1", fontWeight: "500", color: active ? '$color12' : '$color10', text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'hz-tnum' : undefined, children: c.header }), Caret ? _jsx(Caret, { size: 12, color: active ? '$color12' : '$color9' }) : null] }, c.key));
                             }) }), loading ? (_jsx(SkeletonRows, { columns: columns })) : rows.length > 0 ? (_jsx(YStack, { children: rows.map((row) => {
                                 const expanded = (isRowExpanded?.(row) ?? false) && !!renderExpanded;
-                                return (_jsxs(YStack, { children: [_jsx(XStack, { className: "row", py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", bg: expanded ? '$color2' : undefined, hoverStyle: onRowPress ? { bg: '$color2' } : undefined, cursor: onRowPress ? 'pointer' : undefined, onPress: onRowPress
+                                return (_jsxs(YStack, { children: [_jsx(XStack, { className: "hz-row", py: "$2.5", px: "$3", gap: "$3", borderTopWidth: 1, borderColor: "$borderColor", items: "center", bg: expanded ? '$color2' : undefined, hoverStyle: onRowPress ? { bg: '$color2' } : undefined, cursor: onRowPress ? 'pointer' : undefined, onPress: onRowPress
                                                 ? () => {
                                                     track({ component: 'DataTable', action: 'select', id: rowKey(row), value: rows.length });
                                                     onRowPress(row);
@@ -46,7 +46,7 @@ export function DataTable({ columns, rows, loading, empty = 'Nothing here yet.',
                                                 // and always picks up the numeric mono/align styling. Element
                                                 // renders (Text/badges/cells) pass through untouched.
                                                 const cell = c.render ? c.render(row) : String(row[c.key] ?? '');
-                                                return (_jsx(YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, justify: "center", items: c.align === 'right' ? 'flex-end' : 'flex-start', children: typeof cell === 'string' || typeof cell === 'number' ? (_jsx(Text, { fontSize: "$3", numberOfLines: 1, color: "$color12", text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'mono' : undefined, children: cell })) : (cell) }, c.key));
+                                                return (_jsx(YStack, { width: c.width, flex: c.width ? undefined : 1, minW: c.width ? undefined : FLEX_MIN_COL_W, justify: "center", items: c.align === 'right' ? 'flex-end' : 'flex-start', children: typeof cell === 'string' || typeof cell === 'number' ? (_jsx(Text, { fontSize: "$3", numberOfLines: 1, color: "$color12", text: c.align === 'right' ? 'right' : 'left', className: c.mono ? 'hz-mono' : undefined, children: cell })) : (cell) }, c.key));
                                             }) }), expanded && renderExpanded ? (_jsx(YStack, { borderTopWidth: 1, borderColor: "$borderColor", bg: "$color1", children: renderExpanded(row) })) : null] }, rowKey(row)));
                             }) })) : null] }) }), !loading && rows.length === 0 ? (_jsx(YStack, { py: "$8", px: "$4", items: "center", gap: "$1", borderTopWidth: 1, borderColor: "$borderColor", children: _jsx(Text, { color: "$color10", fontSize: "$3", text: "center", children: empty }) })) : null] }));
 }

package/dist/product/DataTable.js.map

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

package/dist/product/FadeIn.cjs

@@ -5,5 +5,5 @@ exports.FadeIn = FadeIn;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function FadeIn({ children, index = 0, step = 50, delayMs, style, }) {
     const delay = delayMs ?? index * step;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "fade-up", style: { animationDelay: `${delay}ms`, ...style }, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "hz-fade-up", style: { animationDelay: `${delay}ms`, ...style }, children: children }));
 }

package/dist/product/FadeIn.js

@@ -2,6 +2,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FadeIn({ children, index = 0, step = 50, delayMs, style, }) {
     const delay = delayMs ?? index * step;
-    return (_jsx("div", { className: "fade-up", style: { animationDelay: `${delay}ms`, ...style }, children: children }));
+    return (_jsx("div", { className: "hz-fade-up", style: { animationDelay: `${delay}ms`, ...style }, children: children }));
 }
 //# sourceMappingURL=FadeIn.js.map

package/dist/product/FadeIn.js.map

@@ -1 +1 @@
-{"version":3,"file":"FadeIn.js","sourceRoot":"","sources":["../../src/product/FadeIn.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAcZ,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,EAAE,EACT,OAAO,EACP,KAAK,GAWN;IACC,MAAM,KAAK,GAAG,OAAO,IAAI,KAAK,GAAG,IAAI,CAAA;IACrC,OAAO,CACL,cAAK,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,EAAE,YACvE,QAAQ,GACL,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"FadeIn.js","sourceRoot":"","sources":["../../src/product/FadeIn.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAcZ,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,EACR,KAAK,GAAG,CAAC,EACT,IAAI,GAAG,EAAE,EACT,OAAO,EACP,KAAK,GAWN;IACC,MAAM,KAAK,GAAG,OAAO,IAAI,KAAK,GAAG,IAAI,CAAA;IACrC,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,EAAE,YAC1E,QAAQ,GACL,CACP,CAAA;AACH,CAAC"}

package/dist/product/Field.cjs

@@ -18,7 +18,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const gui_1 = require("@hanzo/gui");
 const instrument_1 = require("./instrument.cjs");
-const SecretInput_1 = require("./SecretInput.cjs");
+const mask_1 = require("../backends/gui/mask.cjs");
 // The label the caller ALREADY typed on the FieldRow becomes the analytics name —
 // so an app never labels a field twice and no field reports as "unnamed".
 const FieldNameContext = (0, react_1.createContext)(undefined);
@@ -37,12 +37,12 @@ function useFieldTrack(component) {
 function FieldRow({ label, children }) {
     return ((0, jsx_runtime_1.jsx)(FieldNameContext.Provider, { value: label, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", items: "flex-start", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { width: "100%", pt: "$2", color: "$color11", fontSize: "$3", "$md": { width: 180 }, children: label }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1, minW: 0, "$md": { minW: 240 }, children: children })] }) }));
 }
-function FieldText({ value, onChange, disabled, secure, placeholder, }) {
+function FieldText({ value, onChange, disabled, secure, placeholder, autoComplete, id, }) {
     const track = useFieldTrack('FieldText');
     return ((0, jsx_runtime_1.jsx)(gui_1.Input, { value: value, onChangeText: (v) => {
             track({ action: 'change', value: secure ? 0 : (0, instrument_1.textSize)(v) });
             onChange(v);
-        }, disabled: disabled, ...(0, SecretInput_1.masked)(Boolean(secure)), placeholder: placeholder, autoCapitalize: "none" }));
+        }, disabled: disabled, ...(0, mask_1.masked)(Boolean(secure)), placeholder: placeholder, autoComplete: autoComplete, id: id, autoCapitalize: "none" }));
 }
 function FieldTextArea({ value, onChange, disabled, rows = 6, }) {
     const track = useFieldTrack('FieldTextArea');

package/dist/product/Field.d.ts

@@ -15,12 +15,32 @@ export declare function FieldRow({ label, children }: {
     label: string;
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function FieldText({ value, onChange, disabled, secure, placeholder, }: {
+export declare function FieldText({ value, onChange, disabled, secure, placeholder, autoComplete, id, }: {
     value: string;
     onChange: (v: string) => void;
     disabled?: boolean;
     secure?: boolean;
     placeholder?: string;
+    /**
+     * What the browser may fill this with — "email", "current-password",
+     * "one-time-code", or "off". A sign-in form built out of these rows could not
+     * say it, so password managers had nothing to go on: they either filled
+     * nothing or filled the wrong row, and every surface that cared dropped back
+     * to a raw `<input>` to get the one attribute.
+     */
+    autoComplete?: string;
+    /**
+     * The field's DOM id — what an external `<label for>` points at, and the
+     * second thing autofill reads after `autoComplete`.
+     *
+     * There is deliberately no `name`. `name` is @hanzo/gui's OWN prop (it names a
+     * styled component and a theme) and it is consumed before it can reach the
+     * DOM — measured, not assumed. Accepting one here would type-check, render
+     * nothing, and leave a caller believing their form posts a field it does not.
+     * `autoComplete` is the attribute that actually drives autofill; these rows
+     * are controlled React fields, so nothing depends on a native form post.
+     */
+    id?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function FieldTextArea({ value, onChange, disabled, rows, }: {
     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,2CAanF;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,GACZ,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;CACrB,2CAkBA;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,2CAaA;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,2CAeA;AA0CD,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,2CA4BA;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,2CA0BA"}
+{"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,2CAanF;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,2CAoBA;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,2CAaA;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,2CAeA;AA0CD,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,2CA4BA;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,2CA0BA"}

package/dist/product/Field.js

@@ -10,7 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import { Input, Label, Switch, TextArea, Slider, Text, XStack, YStack, } from '@hanzo/gui';
 import { textSize, useEmit } from './instrument.js';
-import { masked } from './SecretInput.js';
+import { masked } from '../backends/gui/mask.js';
 // The label the caller ALREADY typed on the FieldRow becomes the analytics name —
 // so an app never labels a field twice and no field reports as "unnamed".
 const FieldNameContext = createContext(undefined);
@@ -29,12 +29,12 @@ function useFieldTrack(component) {
 export function FieldRow({ label, children }) {
     return (_jsx(FieldNameContext.Provider, { value: label, children: _jsxs(XStack, { gap: "$3", items: "flex-start", flexWrap: "wrap", children: [_jsx(Label, { width: "100%", pt: "$2", color: "$color11", fontSize: "$3", "$md": { width: 180 }, children: label }), _jsx(YStack, { flex: 1, minW: 0, "$md": { minW: 240 }, children: children })] }) }));
 }
-export function FieldText({ value, onChange, disabled, secure, placeholder, }) {
+export function FieldText({ value, onChange, disabled, secure, placeholder, autoComplete, id, }) {
     const track = useFieldTrack('FieldText');
     return (_jsx(Input, { value: value, onChangeText: (v) => {
             track({ action: 'change', value: secure ? 0 : textSize(v) });
             onChange(v);
-        }, disabled: disabled, ...masked(Boolean(secure)), placeholder: placeholder, autoCapitalize: "none" }));
+        }, disabled: disabled, ...masked(Boolean(secure)), placeholder: placeholder, autoComplete: autoComplete, id: id, autoCapitalize: "none" }));
 }
 export function FieldTextArea({ value, onChange, disabled, rows = 6, }) {
     const track = useFieldTrack('FieldTextArea');

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/Fieldset.cjs

@@ -4,9 +4,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Fieldset = Fieldset;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const gui_1 = require("@hanzo/gui");
-function Fieldset({ title, icon, description, action, danger, children }) {
+function Fieldset({ title, icon, description, action, danger, grow = false, minW = 280, children, }) {
     const edge = danger ? '$red9' : '$borderColor';
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: "100%", p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: edge, bg: "$color2", children: [title || action ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", justify: "space-between", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", flex: 1, minW: 0, children: [icon, title ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", fontWeight: "500", color: danger ? '$red10' : '$color12', children: title })) : null] }), action] })) : null, description ? (
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack
+    // Full width when it owns the line; flexing with a floor when it shares
+    // one. Setting both `width: 100%` and `flex: 1` makes the group overflow
+    // its row by its own gap, so it is one or the other.
+    , { 
+        // Full width when it owns the line; flexing with a floor when it shares
+        // one. Setting both `width: 100%` and `flex: 1` makes the group overflow
+        // its row by its own gap, so it is one or the other.
+        width: grow ? undefined : '100%', flex: grow ? 1 : undefined, minW: grow ? minW : 0, p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: edge, bg: "$color2", children: [title || action ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", justify: "space-between", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", flex: 1, minW: 0, children: [icon, title ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$3", fontWeight: "500", color: danger ? '$red10' : '$color12', children: title })) : null] }), action] })) : null, description ? (
             // Sits under the legend, not beside it: a description that shares the
             // line with the title competes with it and wraps first on a phone.
             (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color11", children: description })) : null, (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$3", children: children })] }));

package/dist/product/Fieldset.d.ts

@@ -29,7 +29,18 @@ export type FieldsetProps = {
     action?: ReactNode;
     /** The destructive register — irreversible actions only. */
     danger?: boolean;
+    /**
+     * Share the width of a ROW of groups instead of taking all of it. Default
+     * false, which is the settings page: one group per line, full width.
+     *
+     * A settings page is a column, but a settings TAB is often two — "Profile"
+     * beside "Password", "Region" beside "Limits" — and a group with no way to
+     * flex forced every such layout to wrap the group in a sizing box of its own.
+     */
+    grow?: boolean;
+    /** Floor for the group's width when it is sharing a row. Default 280. */
+    minW?: number;
     children: ReactNode;
 };
-export declare function Fieldset({ title, icon, description, action, danger, children }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
+export declare function Fieldset({ title, icon, description, action, danger, grow, minW, children, }: FieldsetProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Fieldset.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/product/Fieldset.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,aAAa,GAAG;IAC1B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAqC7F"}
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/product/Fieldset.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,MAAM,aAAa,GAAG;IAC1B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAM,EACN,MAAM,EACN,IAAY,EACZ,IAAU,EACV,QAAQ,GACT,EAAE,aAAa,2CA0Cf"}

package/dist/product/Fieldset.js

@@ -1,9 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, XStack, YStack } from '@hanzo/gui';
-export function Fieldset({ title, icon, description, action, danger, children }) {
+export function Fieldset({ title, icon, description, action, danger, grow = false, minW = 280, children, }) {
     const edge = danger ? '$red9' : '$borderColor';
-    return (_jsxs(YStack, { width: "100%", p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: edge, bg: "$color2", children: [title || action ? (_jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", flexWrap: "wrap", children: [_jsxs(XStack, { items: "center", gap: "$2", flex: 1, minW: 0, children: [icon, title ? (_jsx(Text, { fontSize: "$3", fontWeight: "500", color: danger ? '$red10' : '$color12', children: title })) : null] }), action] })) : null, description ? (
+    return (_jsxs(YStack
+    // Full width when it owns the line; flexing with a floor when it shares
+    // one. Setting both `width: 100%` and `flex: 1` makes the group overflow
+    // its row by its own gap, so it is one or the other.
+    , { 
+        // Full width when it owns the line; flexing with a floor when it shares
+        // one. Setting both `width: 100%` and `flex: 1` makes the group overflow
+        // its row by its own gap, so it is one or the other.
+        width: grow ? undefined : '100%', flex: grow ? 1 : undefined, minW: grow ? minW : 0, p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: edge, bg: "$color2", children: [title || action ? (_jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", flexWrap: "wrap", children: [_jsxs(XStack, { items: "center", gap: "$2", flex: 1, minW: 0, children: [icon, title ? (_jsx(Text, { fontSize: "$3", fontWeight: "500", color: danger ? '$red10' : '$color12', children: title })) : null] }), action] })) : null, description ? (
             // Sits under the legend, not beside it: a description that shares the
             // line with the title competes with it and wraps first on a phone.
             _jsx(Text, { fontSize: "$2", color: "$color11", children: description })) : null, _jsx(YStack, { gap: "$3", children: children })] }));

package/dist/product/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/product/Fieldset.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAsBZ,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAgBjD,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAiB;IAC5F,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAA;IAC9C,OAAO,CACL,MAAC,MAAM,IACL,KAAK,EAAC,MAAM,EACZ,CAAC,EAAC,IAAI,EACN,GAAG,EAAC,IAAI,EACR,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,IAAI,EACjB,EAAE,EAAC,SAAS,aAEX,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,CACjB,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,aACrE,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,aAC7C,IAAI,EACJ,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,YACvE,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACD,EACR,MAAM,IACA,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,WAAW,CAAC,CAAC,CAAC;YACb,sEAAsE;YACtE,mEAAmE;YACnE,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACjC,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EAER,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,YAAE,QAAQ,GAAU,IAC7B,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/product/Fieldset.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAsBZ,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AA2BjD,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAM,EACN,MAAM,EACN,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,GAAG,EACV,QAAQ,GACM;IACd,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAA;IAC9C,OAAO,CACL,MAAC,MAAM;IACL,wEAAwE;IACxE,yEAAyE;IACzE,qDAAqD;;QAFrD,wEAAwE;QACxE,yEAAyE;QACzE,qDAAqD;QACrD,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAChC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EACrB,CAAC,EAAC,IAAI,EACN,GAAG,EAAC,IAAI,EACR,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,IAAI,EACjB,EAAE,EAAC,SAAS,aAEX,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,CACjB,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,eAAe,EAAC,QAAQ,EAAC,MAAM,aACrE,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,aAC7C,IAAI,EACJ,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,YACvE,KAAK,GACD,CACR,CAAC,CAAC,CAAC,IAAI,IACD,EACR,MAAM,IACA,CACV,CAAC,CAAC,CAAC,IAAI,EAEP,WAAW,CAAC,CAAC,CAAC;YACb,sEAAsE;YACtE,mEAAmE;YACnE,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACjC,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,EAER,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,YAAE,QAAQ,GAAU,IAC7B,CACV,CAAA;AACH,CAAC"}

package/dist/product/Metric.cjs

@@ -63,7 +63,7 @@ function UtilBar({ value, width = 120, color }) {
 }
 /** A legend row: color swatch + label + value. */
 function LegendDot({ color, label, value }) {
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 10, height: 10, rounded: "$1", bg: color }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color11", children: label })] }), value != null ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", fontWeight: "500", className: "mono", children: value })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 10, height: 10, rounded: "$1", bg: color }), (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color11", children: label })] }), value != null ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", fontWeight: "500", className: "hz-mono", children: value })) : null] }));
 }
 /**
  * One overview metric tile. `value` is pre-formatted by the caller (so an absent
@@ -72,7 +72,7 @@ function LegendDot({ color, label, value }) {
  */
 function MetricCard({ icon, label, value, caption, spark, sparkColor, delta, }) {
     const up = delta ? delta.pct >= 0 : false;
-    return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { p: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$borderColor", flex: 1, minW: 172, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [icon, (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color11", fontWeight: "500", children: label })] }), delta ? ((0, jsx_runtime_1.jsxs)(gui_1.Text, { fontSize: "$1", color: up ? '#7ee787' : '#e5534b', children: [up ? '▲' : '▼', " ", Math.abs(delta.pct), "%"] })) : null] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "flex-end", justify: "space-between", gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$8", fontWeight: "500", color: "$color12", numberOfLines: 1, className: "mono", children: value }), spark && spark.length >= 2 ? (0, jsx_runtime_1.jsx)(Sparkline, { points: spark, color: sparkColor ?? exports.SERIES[0] }) : null] }), caption ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: caption })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { p: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$borderColor", flex: 1, minW: 172, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [icon, (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color11", fontWeight: "500", children: label })] }), delta ? ((0, jsx_runtime_1.jsxs)(gui_1.Text, { fontSize: "$1", color: up ? '#7ee787' : '#e5534b', children: [up ? '▲' : '▼', " ", Math.abs(delta.pct), "%"] })) : null] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "flex-end", justify: "space-between", gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$8", fontWeight: "500", color: "$color12", numberOfLines: 1, className: "hz-mono", children: value }), spark && spark.length >= 2 ? (0, jsx_runtime_1.jsx)(Sparkline, { points: spark, color: sparkColor ?? exports.SERIES[0] }) : null] }), caption ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: caption })) : null] }));
 }
 /**
  * A button that is either a real action (onPress) or HONESTLY disabled with a
@@ -91,6 +91,9 @@ function HintButton({ icon, iconAfter, children, onPress, disabled, hint, theme,
  * inside a vertical rail (a column YStack) so each panel sizes to its content and
  * stacks — flex-grow in a column with no fixed height collapses them onto each other.
  */
-function Panel({ title, right, children, minW = 280, grow = true, }) {
-    return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", flex: grow ? 1 : undefined, minW: minW, width: grow ? undefined : '100%', children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$4", fontWeight: "500", color: "$color12", children: title }), right] }), children] }));
+function Panel({ title, icon, description, right, children, minW = 280, grow = true, }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", flex: grow ? 1 : undefined, minW: minW, width: grow ? undefined : '100%', children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", flex: 1, minW: 0, children: [icon, (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$4", fontWeight: "500", color: "$color12", children: title })] }), right] }), description ? (
+            // Under the title, not beside it: a description sharing the line with a
+            // right-hand control is the first thing to wrap on a phone.
+            (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color11", children: description })) : null, children] }));
 }

package/dist/product/Metric.d.ts

@@ -93,8 +93,15 @@ export declare function HintButton({ icon, iconAfter, children, onPress, disable
  * inside a vertical rail (a column YStack) so each panel sizes to its content and
  * stacks — flex-grow in a column with no fixed height collapses them onto each other.
  */
-export declare function Panel({ title, right, children, minW, grow, }: {
+export declare function Panel({ title, icon, description, right, children, minW, grow, }: {
     title: string;
+    /** Glyph before the title, at the title's own size. Names the panel's subject
+     *  at a glance in a wall of them. */
+    icon?: ReactNode;
+    /** One line under the title saying what the panel shows — units, window,
+     *  source. A number is not self-describing, and the caption every console
+     *  wanted was being smuggled in as the first child. */
+    description?: string;
     right?: ReactNode;
     children: ReactNode;
     minW?: number;

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

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

package/dist/product/Metric.js

@@ -51,7 +51,7 @@ export function UtilBar({ value, width = 120, color }) {
 }
 /** A legend row: color swatch + label + value. */
 export function LegendDot({ color, label, value }) {
-    return (_jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(YStack, { width: 10, height: 10, rounded: "$1", bg: color }), _jsx(Text, { fontSize: "$2", color: "$color11", children: label })] }), value != null ? (_jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "500", className: "mono", children: value })) : null] }));
+    return (_jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(YStack, { width: 10, height: 10, rounded: "$1", bg: color }), _jsx(Text, { fontSize: "$2", color: "$color11", children: label })] }), value != null ? (_jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "500", className: "hz-mono", children: value })) : null] }));
 }
 /**
  * One overview metric tile. `value` is pre-formatted by the caller (so an absent
@@ -60,7 +60,7 @@ export function LegendDot({ color, label, value }) {
  */
 export function MetricCard({ icon, label, value, caption, spark, sparkColor, delta, }) {
     const up = delta ? delta.pct >= 0 : false;
-    return (_jsxs(Card, { p: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$borderColor", flex: 1, minW: 172, children: [_jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [icon, _jsx(Text, { fontSize: "$2", color: "$color11", fontWeight: "500", children: label })] }), delta ? (_jsxs(Text, { fontSize: "$1", color: up ? '#7ee787' : '#e5534b', children: [up ? '▲' : '▼', " ", Math.abs(delta.pct), "%"] })) : null] }), _jsxs(XStack, { items: "flex-end", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$8", fontWeight: "500", color: "$color12", numberOfLines: 1, className: "mono", children: value }), spark && spark.length >= 2 ? _jsx(Sparkline, { points: spark, color: sparkColor ?? SERIES[0] }) : null] }), caption ? (_jsx(Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: caption })) : null] }));
+    return (_jsxs(Card, { p: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$borderColor", flex: 1, minW: 172, children: [_jsxs(XStack, { items: "center", gap: "$2", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [icon, _jsx(Text, { fontSize: "$2", color: "$color11", fontWeight: "500", children: label })] }), delta ? (_jsxs(Text, { fontSize: "$1", color: up ? '#7ee787' : '#e5534b', children: [up ? '▲' : '▼', " ", Math.abs(delta.pct), "%"] })) : null] }), _jsxs(XStack, { items: "flex-end", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$8", fontWeight: "500", color: "$color12", numberOfLines: 1, className: "hz-mono", children: value }), spark && spark.length >= 2 ? _jsx(Sparkline, { points: spark, color: sparkColor ?? SERIES[0] }) : null] }), caption ? (_jsx(Text, { fontSize: "$1", color: "$color10", numberOfLines: 1, children: caption })) : null] }));
 }
 /**
  * A button that is either a real action (onPress) or HONESTLY disabled with a
@@ -79,7 +79,10 @@ export function HintButton({ icon, iconAfter, children, onPress, disabled, hint,
  * inside a vertical rail (a column YStack) so each panel sizes to its content and
  * stacks — flex-grow in a column with no fixed height collapses them onto each other.
  */
-export function Panel({ title, right, children, minW = 280, grow = true, }) {
-    return (_jsxs(Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", flex: grow ? 1 : undefined, minW: minW, width: grow ? undefined : '100%', children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$4", fontWeight: "500", color: "$color12", children: title }), right] }), children] }));
+export function Panel({ title, icon, description, right, children, minW = 280, grow = true, }) {
+    return (_jsxs(Card, { p: "$4", gap: "$3", borderWidth: 1, borderColor: "$borderColor", flex: grow ? 1 : undefined, minW: minW, width: grow ? undefined : '100%', children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", flex: 1, minW: 0, children: [icon, _jsx(Text, { fontSize: "$4", fontWeight: "500", color: "$color12", children: title })] }), right] }), description ? (
+            // Under the title, not beside it: a description sharing the line with a
+            // right-hand control is the first thing to wrap on a phone.
+            _jsx(Text, { fontSize: "$2", color: "$color11", children: description })) : null, children] }));
 }
 //# sourceMappingURL=Metric.js.map