@hanzo/ui 8.0.61 → 8.0.63

package/dist/backends/gui/input.cjs

@@ -16,6 +16,7 @@ const react_1 = require("react");
 const slot_1 = require("./slot.cjs");
 const gesture_1 = require("./gesture.cjs");
 const focus_1 = require("./focus.cjs");
+const mask_1 = require("./mask.cjs");
 const HEIGHT = 36;
 const GUTTER = 12;
 /** Width reserved for an adornment inside the field. */
@@ -28,11 +29,11 @@ const well = (side) => ({
     items: 'center',
     justify: 'center',
 });
-const Input = /* @__PURE__ */ (0, react_1.forwardRef)(function Input({ startAdornment, endAdornment, hidePasswordToggle, type, secureTextEntry, ...props }, ref) {
+const Input = /* @__PURE__ */ (0, react_1.forwardRef)(function Input({ startAdornment, endAdornment, reveal = true, type, secureTextEntry, ...props }, ref) {
     const [revealed, setRevealed] = (0, react_1.useState)(false);
     const isPassword = type === 'password' || secureTextEntry === true;
-    const toggle = isPassword && !hidePasswordToggle;
-    const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), secureTextEntry: isPassword && !revealed, height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", ...focus_1.FOCUS, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
+    const toggle = isPassword && reveal;
+    const field = ((0, jsx_runtime_1.jsx)(gui_1.Input, { ref: ref, ...(0, slot_1.slot)('input'), ...(isPassword ? (0, mask_1.masked)(!revealed) : { type, secureTextEntry }), height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", ...focus_1.FOCUS, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
     if (!startAdornment && !endAdornment && !toggle)
         return field;
     return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('l'), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('r'), cursor: "pointer", ...(0, gesture_1.touch)(20), onPress: () => setRevealed((v) => !v), "aria-label": revealed ? 'Hide password' : 'Show password', children: revealed ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.EyeOff, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Eye, { size: 16 }) })) : endAdornment ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...well('r'), opacity: 0.6, children: endAdornment })) : null] }));

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

@@ -12,8 +12,16 @@ export type InputProps = Omit<ComponentProps<typeof GuiInput>, 'children'> & {
     startAdornment?: ReactNode;
     /** Optional trailing affordance rendered inside the field. */
     endAdornment?: ReactNode;
-    /** Suppress the built-in show/hide control for `secureTextEntry`/`type="password"`. */
-    hidePasswordToggle?: boolean;
+    /**
+     * Whether a masked field draws its own show/hide eye. Default true.
+     *
+     * `false` when the caller owns the reveal — `SecretInput` does, and so does
+     * any field that masks locally — because two controls over one boolean is a
+     * field with two states that disagree: press ours and the caller's icon still
+     * reads "show", press theirs and ours does. The field is masked by whichever
+     * was pressed last and neither control can say which.
+     */
+    reveal?: boolean;
 };
 declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Input };

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUjF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,uFAAuF;IACvF,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAYD,QAAA,MAAM,KAAK,sHAwDT,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/input.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAU,MAAM,YAAY,CAAA;AAEtD,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWjF,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAYD,QAAA,MAAM,KAAK,sHAmET,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/backends/gui/input.js

@@ -13,6 +13,7 @@ import { forwardRef, useState } from 'react';
 import { slot } from './slot.js';
 import { touch } from './gesture.js';
 import { FOCUS } from './focus.js';
+import { masked } from './mask.js';
 const HEIGHT = 36;
 const GUTTER = 12;
 /** Width reserved for an adornment inside the field. */
@@ -25,11 +26,11 @@ const well = (side) => ({
     items: 'center',
     justify: 'center',
 });
-const Input = /* @__PURE__ */ forwardRef(function Input({ startAdornment, endAdornment, hidePasswordToggle, type, secureTextEntry, ...props }, ref) {
+const Input = /* @__PURE__ */ forwardRef(function Input({ startAdornment, endAdornment, reveal = true, type, secureTextEntry, ...props }, ref) {
     const [revealed, setRevealed] = useState(false);
     const isPassword = type === 'password' || secureTextEntry === true;
-    const toggle = isPassword && !hidePasswordToggle;
-    const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), secureTextEntry: isPassword && !revealed, height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", ...FOCUS, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
+    const toggle = isPassword && reveal;
+    const field = (_jsx(GuiInput, { ref: ref, ...slot('input'), ...(isPassword ? masked(!revealed) : { type, secureTextEntry }), height: HEIGHT, width: "100%", minW: 0, rounded: "$3", bg: "transparent", borderWidth: 1, borderColor: "$borderColor", ...FOCUS, placeholderTextColor: "$color10", fontSize: "$3", pl: startAdornment ? WELL : GUTTER, pr: endAdornment || toggle ? WELL : GUTTER, ...props }));
     if (!startAdornment && !endAdornment && !toggle)
         return field;
     return (_jsxs(XStack, { position: "relative", width: "100%", items: "center", children: [startAdornment ? (_jsx(XStack, { ...well('l'), pointerEvents: "none", opacity: 0.6, children: startAdornment })) : null, field, toggle ? (_jsx(XStack, { ...well('r'), cursor: "pointer", ...touch(20), onPress: () => setRevealed((v) => !v), "aria-label": revealed ? 'Hide password' : 'Show password', children: revealed ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) })) : endAdornment ? (_jsx(XStack, { ...well('r'), opacity: 0.6, children: endAdornment })) : null] }));

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

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

package/dist/backends/gui/mask.cjs

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * Masking, on both platforms.
+ *
+ * `secureTextEntry` is React Native's spelling and gui DROPS it on web — an
+ * input carrying only that prop renders the secret in plain text, which is the
+ * exact opposite of what the caller asked for. `type="password"` is the web
+ * spelling and gui forwards it, being an unrecognised prop. Native ignores
+ * `type` for the same reason. So masking needs BOTH names, and neither alone is
+ * safe. `readOnly` is the same story: `editable={false}` is dropped on web.
+ *
+ * A prop object is a value, so this needs no DOM: `@hanzo/ui/product/pure`
+ * exports it, and a consumer can assert that its own field really masks without
+ * mounting one.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.masked = void 0;
+/** The props that mask (or unmask) a field on web AND native. */
+const masked = (on) => (on ? { secureTextEntry: true, type: 'password' } : { secureTextEntry: false, type: 'text' });
+exports.masked = masked;

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

@@ -0,0 +1,17 @@
+/**
+ * Masking, on both platforms.
+ *
+ * `secureTextEntry` is React Native's spelling and gui DROPS it on web — an
+ * input carrying only that prop renders the secret in plain text, which is the
+ * exact opposite of what the caller asked for. `type="password"` is the web
+ * spelling and gui forwards it, being an unrecognised prop. Native ignores
+ * `type` for the same reason. So masking needs BOTH names, and neither alone is
+ * safe. `readOnly` is the same story: `editable={false}` is dropped on web.
+ *
+ * A prop object is a value, so this needs no DOM: `@hanzo/ui/product/pure`
+ * exports it, and a consumer can assert that its own field really masks without
+ * mounting one.
+ */
+/** The props that mask (or unmask) a field on web AND native. */
+export declare const masked: (on: boolean) => object;
+//# sourceMappingURL=mask.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mask.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/mask.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,iEAAiE;AACjE,eAAO,MAAM,MAAM,GAAI,IAAI,OAAO,KACiE,MAAM,CAAA"}

package/dist/backends/gui/mask.js

@@ -0,0 +1,17 @@
+/**
+ * Masking, on both platforms.
+ *
+ * `secureTextEntry` is React Native's spelling and gui DROPS it on web — an
+ * input carrying only that prop renders the secret in plain text, which is the
+ * exact opposite of what the caller asked for. `type="password"` is the web
+ * spelling and gui forwards it, being an unrecognised prop. Native ignores
+ * `type` for the same reason. So masking needs BOTH names, and neither alone is
+ * safe. `readOnly` is the same story: `editable={false}` is dropped on web.
+ *
+ * A prop object is a value, so this needs no DOM: `@hanzo/ui/product/pure`
+ * exports it, and a consumer can assert that its own field really masks without
+ * mounting one.
+ */
+/** The props that mask (or unmask) a field on web AND native. */
+export const masked = (on) => (on ? { secureTextEntry: true, type: 'password' } : { secureTextEntry: false, type: 'text' });
+//# sourceMappingURL=mask.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mask.js","sourceRoot":"","sources":["../../../src/backends/gui/mask.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,iEAAiE;AACjE,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAW,EAAE,EAAE,CACpC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,CAAW,CAAA"}

package/dist/backends/gui/switch.cjs

@@ -28,6 +28,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * with no signal in it — which is what a full page of these actually looked
  * like. Off is muted, on is filled, and the loudest treatment is the one that
  * means something.
+ *
+ * THE THUMB TAKES THE SAME TOKEN AS ITS TRACK, and that is not a copy-paste
+ * slip. gui wraps the thumb in a `t_SwitchThumb` sub-theme that INVERTS the
+ * whole ramp — measured live, `$color3` is rgb(26,26,26) at the frame and
+ * rgb(171,171,171) inside the thumb; `$color12` is rgb(250,250,250) and
+ * rgb(10,10,10). So naming one token paints both sides of the pair and the
+ * contrast is structural: the thumb cannot come out the same colour as the
+ * track it sits on, in either state, whatever the palette does later.
+ *
+ * Picking the tokens by eye instead shipped once, in 8.0.57-8.0.59, and it
+ * shipped INVISIBLE: `$color10` under the thumb resolved to the off track's own
+ * rgb(26,26,26) and `$color1` to the on track's rgb(255,255,255). The tests
+ * passed, because they asked whether the two states DIFFER from each other and
+ * never whether either one differs from the thing behind it.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");
@@ -42,7 +56,7 @@ const Switch = ({ disabled, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Switch,
     // 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: "$color10", 
+    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
@@ -51,5 +65,5 @@ const Switch = ({ disabled, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Switch,
         // 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: '$color1' } }) }));
+        activeStyle: { bg: '$color12' } }) }));
 exports.Switch = Switch;

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

@@ -23,6 +23,20 @@
  * with no signal in it — which is what a full page of these actually looked
  * like. Off is muted, on is filled, and the loudest treatment is the one that
  * means something.
+ *
+ * THE THUMB TAKES THE SAME TOKEN AS ITS TRACK, and that is not a copy-paste
+ * slip. gui wraps the thumb in a `t_SwitchThumb` sub-theme that INVERTS the
+ * whole ramp — measured live, `$color3` is rgb(26,26,26) at the frame and
+ * rgb(171,171,171) inside the thumb; `$color12` is rgb(250,250,250) and
+ * rgb(10,10,10). So naming one token paints both sides of the pair and the
+ * contrast is structural: the thumb cannot come out the same colour as the
+ * track it sits on, in either state, whatever the palette does later.
+ *
+ * Picking the tokens by eye instead shipped once, in 8.0.57-8.0.59, and it
+ * shipped INVISIBLE: `$color10` under the thumb resolved to the off track's own
+ * rgb(26,26,26) and `$color1` to the on track's rgb(255,255,255). The tests
+ * passed, because they asked whether the two states DIFFER from each other and
+ * never whether either one differs from the thing behind it.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import type { ComponentProps } from 'react';

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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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,GAAI,wBAAwB,WAAW,4CAuClD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;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,GAAI,wBAAwB,WAAW,4CAuClD,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/backends/gui/switch.js

@@ -25,6 +25,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * with no signal in it — which is what a full page of these actually looked
  * like. Off is muted, on is filled, and the loudest treatment is the one that
  * means something.
+ *
+ * THE THUMB TAKES THE SAME TOKEN AS ITS TRACK, and that is not a copy-paste
+ * slip. gui wraps the thumb in a `t_SwitchThumb` sub-theme that INVERTS the
+ * whole ramp — measured live, `$color3` is rgb(26,26,26) at the frame and
+ * rgb(171,171,171) inside the thumb; `$color12` is rgb(250,250,250) and
+ * rgb(10,10,10). So naming one token paints both sides of the pair and the
+ * contrast is structural: the thumb cannot come out the same colour as the
+ * track it sits on, in either state, whatever the palette does later.
+ *
+ * Picking the tokens by eye instead shipped once, in 8.0.57-8.0.59, and it
+ * shipped INVISIBLE: `$color10` under the thumb resolved to the off track's own
+ * rgb(26,26,26) and `$color1` to the on track's rgb(255,255,255). The tests
+ * passed, because they asked whether the two states DIFFER from each other and
+ * never whether either one differs from the thing behind it.
  */
 import { Switch as GuiSwitch } from '@hanzo/gui';
 import { slot } from './slot.js';
@@ -39,7 +53,7 @@ const Switch = ({ disabled, ...props }) => (_jsx(GuiSwitch, { ...slot('switch'),
     // 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: "$color10", 
+    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
@@ -48,6 +62,6 @@ const Switch = ({ disabled, ...props }) => (_jsx(GuiSwitch, { ...slot('switch'),
         // 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: '$color1' } }) }));
+        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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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,UAAU;QAC1B,yEAAyE;QACzE,4EAA4E;QAC5E,0EAA0E;QAC1E,sEAAsE;QACtE,uEAAuE;QACvE,0EAA0E;QAC1E,sEAAsE;QACtE,iCAAiC;QACjC,WAAW,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,GAC9B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;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"}

package/dist/chat/Code.cjs

@@ -32,5 +32,5 @@ const MONO = {
 };
 function Code({ children, language = 'text', value, actions }) {
     const text = value ?? (typeof children === 'string' ? children : '');
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('code'), width: "100%", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$color2", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", px: "$3", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: MONO, color: "$color10", children: language }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), actions, text ? (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { value: text }) : null] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { px: "$3", py: "$2.5", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: MONO, lineHeight: 20, children: children }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('code'), width: "100%", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$color2", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", px: "$3", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: MONO, color: "$color11", children: language }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), actions, text ? (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { value: text }) : null] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { px: "$3", py: "$2.5", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: MONO, lineHeight: 20, children: children }) })] }));
 }

package/dist/chat/Code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/chat/Code.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAkBtC,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,SAAS,2CAoC9E"}
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/chat/Code.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAkBtC,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,SAAS,2CA0C9E"}

package/dist/chat/Code.js

@@ -29,6 +29,6 @@ const MONO = {
 };
 export function Code({ children, language = 'text', value, actions }) {
     const text = value ?? (typeof children === 'string' ? children : '');
-    return (_jsxs(YStack, { ...slot('code'), width: "100%", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$color2", overflow: "hidden", children: [_jsxs(XStack, { items: "center", gap: "$1", px: "$3", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", style: MONO, color: "$color10", children: language }), _jsx(XStack, { flex: 1 }), actions, text ? _jsx(CopyButton, { value: text }) : null] }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$1", style: MONO, lineHeight: 20, children: children }) })] }));
+    return (_jsxs(YStack, { ...slot('code'), width: "100%", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$color2", overflow: "hidden", children: [_jsxs(XStack, { items: "center", gap: "$1", px: "$3", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", style: MONO, color: "$color11", children: language }), _jsx(XStack, { flex: 1 }), actions, text ? _jsx(CopyButton, { value: text }) : null] }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$1", style: MONO, lineHeight: 20, children: children }) })] }));
 }
 //# sourceMappingURL=Code.js.map

package/dist/chat/Code.js.map

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/chat/Code.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD;;;;;;;;GAQG;AACH,MAAM,IAAI,GAAG;IACX,UAAU,EAAE,wEAAwE;CAC5E,CAAA;AAYV,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,EAAE,OAAO,EAAa;IAC7E,MAAM,IAAI,GAAG,KAAK,IAAI,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAEpE,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,EAAE,EAAC,SAAS,EACZ,QAAQ,EAAC,QAAQ,aAEjB,MAAC,MAAM,IACL,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,IAAI,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,MAAM,EACT,iBAAiB,EAAE,CAAC,EACpB,WAAW,EAAC,cAAc,aAE1B,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,YACjD,QAAQ,GACG,EACd,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,GAAI,EAClB,OAAO,EACP,IAAI,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IACnC,EAET,KAAC,MAAM,IAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACvB,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,YAC/C,QAAQ,GACG,GACP,IACF,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/chat/Code.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAElD;;;;;;;;GAQG;AACH,MAAM,IAAI,GAAG;IACX,UAAU,EAAE,wEAAwE;CAC5E,CAAA;AAYV,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,EAAE,OAAO,EAAa;IAC7E,MAAM,IAAI,GAAG,KAAK,IAAI,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAEpE,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,MAAM,CAAC,EAChB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,EAAE,EAAC,SAAS,EACZ,QAAQ,EAAC,QAAQ,aAEjB,MAAC,MAAM,IACL,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,IAAI,EACR,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,MAAM,EACT,iBAAiB,EAAE,CAAC,EACpB,WAAW,EAAC,cAAc,aAQ1B,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAC,UAAU,YACjD,QAAQ,GACG,EACd,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,GAAI,EAClB,OAAO,EACP,IAAI,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,IAAI,IACnC,EAET,KAAC,MAAM,IAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACvB,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,YAC/C,QAAQ,GACG,GACP,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/core/css.cjs

@@ -0,0 +1,114 @@
+"use strict";
+/**
+ * Substitute a CSS value's `var()` references — the step jsdom does not take.
+ *
+ * The theme rungs read a token and carry the literal behind it:
+ *
+ *     borderColor: 'var(--border, rgb(255 255 255 / .10))'
+ *
+ * A browser resolves that: `--border` if a stylesheet declares it, the literal
+ * otherwise. jsdom resolves nothing — `getComputedStyle(el).borderColor` hands
+ * back the `var(...)` text verbatim — so every consumer that tried to assert the
+ * contrast of a border in a unit test compared a colour to a function call and
+ * either asserted the wrong thing or gave up and asserted nothing.
+ *
+ * Neither half of that is worth fixing by weakening the rung. The `var()` first
+ * is what lets a host that mounts @hanzo/design's sheet follow the live cascade
+ * and invert with it; the literal behind it is what keeps a host that mounts
+ * neither on the value the WCAG audit measured. So the value stays, and the TEST
+ * gets the resolver:
+ *
+ *     import { substitute } from '@hanzo/ui/css'
+ *
+ *     const border = substitute(getComputedStyle(el).borderColor)
+ *     expect(contrast(border, bg)).toBeGreaterThan(3)
+ *
+ * With no `vars` map that is exactly right, and not an approximation: jsdom
+ * mounts no design stylesheet, so nothing declares `--border`, so the fallback
+ * IS the value a browser would compute under the same conditions. Pass a map to
+ * model a host that declares its own tokens.
+ *
+ * Pure, dependency-free and DOM-free, so it loads under any runner — which is
+ * why it is `@hanzo/ui/css` and not part of `@hanzo/ui/core`. That subpath is
+ * ESM-only on purpose (@hanzo/design, which its tokens come from, publishes no
+ * `require` condition), and a jest consumer is exactly the caller that needs
+ * this one. Importing nothing is what lets it ship both.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.substitute = substitute;
+/** A value that references a custom property nothing declares is invalid at
+ *  computed-value time: CSS drops the WHOLE declaration, not just the `var()`.
+ *  Carried as a sentinel so the outer call can return '' for the whole value. */
+const INVALID = Symbol('invalid');
+/** Index of the `)` closing the `(` at `open`, or -1 if unbalanced. */
+function close(value, open) {
+    let depth = 0;
+    for (let i = open; i < value.length; i++) {
+        if (value[i] === '(')
+            depth++;
+        else if (value[i] === ')' && --depth === 0)
+            return i;
+    }
+    return -1;
+}
+/** Index of the first comma at depth 0, or -1. `var()` takes at most one
+ *  fallback and the fallback may itself contain commas — `rgb(255 255 255 / .1)`
+ *  does not, but `var(--a, var(--b, red))` does — so only the FIRST counts. */
+function comma(inner) {
+    let depth = 0;
+    for (let i = 0; i < inner.length; i++) {
+        if (inner[i] === '(')
+            depth++;
+        else if (inner[i] === ')')
+            depth--;
+        else if (inner[i] === ',' && depth === 0)
+            return i;
+    }
+    return -1;
+}
+function expand(value, vars, seen) {
+    const start = value.indexOf('var(');
+    if (start === -1)
+        return value;
+    const end = close(value, start + 3);
+    if (end === -1)
+        return value; // unbalanced — not a value we can reason about
+    const inner = value.slice(start + 4, end);
+    const split = comma(inner);
+    const name = (split === -1 ? inner : inner.slice(0, split)).trim();
+    const fallback = split === -1 ? undefined : inner.slice(split + 1).trim();
+    let resolved;
+    if (seen.has(name)) {
+        // A cycle (`--a: var(--b)`, `--b: var(--a)`) is invalid at computed-value
+        // time too, and left unguarded it is an infinite recursion.
+        resolved = INVALID;
+    }
+    else if (name in vars) {
+        resolved = expand(vars[name], vars, new Set(seen).add(name));
+    }
+    else if (fallback !== undefined) {
+        resolved = expand(fallback, vars, seen);
+    }
+    else {
+        resolved = INVALID;
+    }
+    if (resolved === INVALID)
+        return INVALID;
+    const rest = expand(value.slice(end + 1), vars, seen);
+    if (rest === INVALID)
+        return INVALID;
+    return value.slice(0, start) + resolved + rest;
+}
+/**
+ * `value` with every `var()` reference replaced by what it resolves to.
+ *
+ * `vars` maps custom-property names (with the leading `--`) to their declared
+ * values and defaults to none, which is the jsdom case. Returns '' when the
+ * value references something undeclared with no fallback, or references itself
+ * — both are invalid at computed-value time, and a browser drops the whole
+ * declaration rather than part of it.
+ */
+function substitute(value, vars = {}) {
+    const out = expand(value, vars, new Set());
+    return out === INVALID ? '' : out;
+}

package/dist/core/css.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Substitute a CSS value's `var()` references — the step jsdom does not take.
+ *
+ * The theme rungs read a token and carry the literal behind it:
+ *
+ *     borderColor: 'var(--border, rgb(255 255 255 / .10))'
+ *
+ * A browser resolves that: `--border` if a stylesheet declares it, the literal
+ * otherwise. jsdom resolves nothing — `getComputedStyle(el).borderColor` hands
+ * back the `var(...)` text verbatim — so every consumer that tried to assert the
+ * contrast of a border in a unit test compared a colour to a function call and
+ * either asserted the wrong thing or gave up and asserted nothing.
+ *
+ * Neither half of that is worth fixing by weakening the rung. The `var()` first
+ * is what lets a host that mounts @hanzo/design's sheet follow the live cascade
+ * and invert with it; the literal behind it is what keeps a host that mounts
+ * neither on the value the WCAG audit measured. So the value stays, and the TEST
+ * gets the resolver:
+ *
+ *     import { substitute } from '@hanzo/ui/css'
+ *
+ *     const border = substitute(getComputedStyle(el).borderColor)
+ *     expect(contrast(border, bg)).toBeGreaterThan(3)
+ *
+ * With no `vars` map that is exactly right, and not an approximation: jsdom
+ * mounts no design stylesheet, so nothing declares `--border`, so the fallback
+ * IS the value a browser would compute under the same conditions. Pass a map to
+ * model a host that declares its own tokens.
+ *
+ * Pure, dependency-free and DOM-free, so it loads under any runner — which is
+ * why it is `@hanzo/ui/css` and not part of `@hanzo/ui/core`. That subpath is
+ * ESM-only on purpose (@hanzo/design, which its tokens come from, publishes no
+ * `require` condition), and a jest consumer is exactly the caller that needs
+ * this one. Importing nothing is what lets it ship both.
+ */
+/**
+ * `value` with every `var()` reference replaced by what it resolves to.
+ *
+ * `vars` maps custom-property names (with the leading `--`) to their declared
+ * values and defaults to none, which is the jsdom case. Returns '' when the
+ * value references something undeclared with no fallback, or references itself
+ * — both are invalid at computed-value time, and a browser drops the whole
+ * declaration rather than part of it.
+ */
+export declare function substitute(value: string, vars?: Record<string, string>): string;
+//# sourceMappingURL=css.d.ts.map

package/dist/core/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/core/css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AA8DH;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,GAAG,MAAM,CAGnF"}

package/dist/core/css.js

@@ -0,0 +1,112 @@
+/**
+ * Substitute a CSS value's `var()` references — the step jsdom does not take.
+ *
+ * The theme rungs read a token and carry the literal behind it:
+ *
+ *     borderColor: 'var(--border, rgb(255 255 255 / .10))'
+ *
+ * A browser resolves that: `--border` if a stylesheet declares it, the literal
+ * otherwise. jsdom resolves nothing — `getComputedStyle(el).borderColor` hands
+ * back the `var(...)` text verbatim — so every consumer that tried to assert the
+ * contrast of a border in a unit test compared a colour to a function call and
+ * either asserted the wrong thing or gave up and asserted nothing.
+ *
+ * Neither half of that is worth fixing by weakening the rung. The `var()` first
+ * is what lets a host that mounts @hanzo/design's sheet follow the live cascade
+ * and invert with it; the literal behind it is what keeps a host that mounts
+ * neither on the value the WCAG audit measured. So the value stays, and the TEST
+ * gets the resolver:
+ *
+ *     import { substitute } from '@hanzo/ui/css'
+ *
+ *     const border = substitute(getComputedStyle(el).borderColor)
+ *     expect(contrast(border, bg)).toBeGreaterThan(3)
+ *
+ * With no `vars` map that is exactly right, and not an approximation: jsdom
+ * mounts no design stylesheet, so nothing declares `--border`, so the fallback
+ * IS the value a browser would compute under the same conditions. Pass a map to
+ * model a host that declares its own tokens.
+ *
+ * Pure, dependency-free and DOM-free, so it loads under any runner — which is
+ * why it is `@hanzo/ui/css` and not part of `@hanzo/ui/core`. That subpath is
+ * ESM-only on purpose (@hanzo/design, which its tokens come from, publishes no
+ * `require` condition), and a jest consumer is exactly the caller that needs
+ * this one. Importing nothing is what lets it ship both.
+ */
+/** A value that references a custom property nothing declares is invalid at
+ *  computed-value time: CSS drops the WHOLE declaration, not just the `var()`.
+ *  Carried as a sentinel so the outer call can return '' for the whole value. */
+const INVALID = Symbol('invalid');
+/** Index of the `)` closing the `(` at `open`, or -1 if unbalanced. */
+function close(value, open) {
+    let depth = 0;
+    for (let i = open; i < value.length; i++) {
+        if (value[i] === '(')
+            depth++;
+        else if (value[i] === ')' && --depth === 0)
+            return i;
+    }
+    return -1;
+}
+/** Index of the first comma at depth 0, or -1. `var()` takes at most one
+ *  fallback and the fallback may itself contain commas — `rgb(255 255 255 / .1)`
+ *  does not, but `var(--a, var(--b, red))` does — so only the FIRST counts. */
+function comma(inner) {
+    let depth = 0;
+    for (let i = 0; i < inner.length; i++) {
+        if (inner[i] === '(')
+            depth++;
+        else if (inner[i] === ')')
+            depth--;
+        else if (inner[i] === ',' && depth === 0)
+            return i;
+    }
+    return -1;
+}
+function expand(value, vars, seen) {
+    const start = value.indexOf('var(');
+    if (start === -1)
+        return value;
+    const end = close(value, start + 3);
+    if (end === -1)
+        return value; // unbalanced — not a value we can reason about
+    const inner = value.slice(start + 4, end);
+    const split = comma(inner);
+    const name = (split === -1 ? inner : inner.slice(0, split)).trim();
+    const fallback = split === -1 ? undefined : inner.slice(split + 1).trim();
+    let resolved;
+    if (seen.has(name)) {
+        // A cycle (`--a: var(--b)`, `--b: var(--a)`) is invalid at computed-value
+        // time too, and left unguarded it is an infinite recursion.
+        resolved = INVALID;
+    }
+    else if (name in vars) {
+        resolved = expand(vars[name], vars, new Set(seen).add(name));
+    }
+    else if (fallback !== undefined) {
+        resolved = expand(fallback, vars, seen);
+    }
+    else {
+        resolved = INVALID;
+    }
+    if (resolved === INVALID)
+        return INVALID;
+    const rest = expand(value.slice(end + 1), vars, seen);
+    if (rest === INVALID)
+        return INVALID;
+    return value.slice(0, start) + resolved + rest;
+}
+/**
+ * `value` with every `var()` reference replaced by what it resolves to.
+ *
+ * `vars` maps custom-property names (with the leading `--`) to their declared
+ * values and defaults to none, which is the jsdom case. Returns '' when the
+ * value references something undeclared with no fallback, or references itself
+ * — both are invalid at computed-value time, and a browser drops the whole
+ * declaration rather than part of it.
+ */
+export function substitute(value, vars = {}) {
+    const out = expand(value, vars, new Set());
+    return out === INVALID ? '' : out;
+}
+//# sourceMappingURL=css.js.map

package/dist/core/css.js.map

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

package/dist/product/CopyButton.cjs

@@ -25,7 +25,7 @@ const slot_1 = require("../backends/gui/slot.cjs");
 const instrument_1 = require("./instrument.cjs");
 /** How long the control shows its confirmation, in ms. */
 const CONFIRM = 2000;
-function CopyButton({ value, label = 'Copy', size = 24, id }) {
+function CopyButton({ value, children, label, size = 24, id }) {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const timer = (0, react_1.useRef)(undefined);
     const track = (0, instrument_1.useEmit)();
@@ -50,5 +50,19 @@ function CopyButton({ value, label = 'Copy', size = 24, id }) {
             track({ component: 'CopyButton', action: 'error', id });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(gui_1.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, ...(0, slot_1.tip)(copied ? 'Copied' : label), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: copied ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: Math.round(size * 0.58) }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: Math.round(size * 0.58) }) }));
+    const name = label ?? (typeof children === 'string' ? children : 'Copy');
+    const glyph = Math.round(size * 0.58);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.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, ...(0, slot_1.tip)(copied ? 'Copied' : name), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: glyph }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.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.
+            (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", numberOfLines: 1, children: copied ? 'Copied' : children }))] }));
 }