@hanzo/ui 8.27.91 → 8.29.0

package/dist/backends/gui/select.js

@@ -11,16 +11,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * `Picker` is the other select: the platform's own, for a list the platform
  * should show — every country, on a phone.
+ *
+ * Rows are concentric in the panel: a 4px inset inside an 8px panel takes a 4px
+ * row radius (`$xs`). Under `<Density value="compact">` the list takes the
+ * record density twenty-ui's Select draws (MIT, NOTICE): 13px rows in the quiet
+ * ink on the hover rung, and the density crosses the portal with the list.
  */
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, } from "react";
 import { Select as GuiSelect, SelectSeparator as GuiSelectSeparator, Text, XStack, } from "@hanzo/gui";
 import { Check, ChevronDown, ChevronUp } from "@hanzogui/lucide-icons-2";
-import { BOX, CONTROL_H, EDGE, FIELD, FILL } from "./control.js";
+import { BOX, EDGE, FIELD, FILL } from "./control.js";
+import { Density, fieldSize, useDensity } from "./density.js";
+import { invalidOf, useField } from "./field.js";
 import { touch } from "./gesture.js";
 import { ink } from "./ink.js";
 import { slot } from "./slot.js";
 const ROW_H = 32;
-const TRIGGER_H = CONTROL_H;
 /**
  * Disabling the control is one fact with two spellings: gui puts `disabled` on
  * the Trigger, the compound API puts it on the root. The root declares it and
@@ -29,15 +35,25 @@ const TRIGGER_H = CONTROL_H;
 const Disabled = /* @__PURE__ */ createContext(false);
 const Select = /* @__PURE__ */ Object.assign(({ disabled = false, ...props }) => (_jsx(Disabled.Provider, { value: disabled, children: _jsx(GuiSelect, { ...props }) })), GuiSelect);
 const SelectGroup = GuiSelect.Group;
-const SelectValue = GuiSelect.Value;
-const SelectTrigger = ({ children, disabled, ...props }) => {
+/**
+ * The trigger's rung, handed to the value it shows. `ink()` sizes a string
+ * child; `SelectValue` is an element and drew gui's own 14px whatever the box,
+ * so a 32px compact trigger showed its value a rung larger than the Input
+ * beside it. The trigger provides its box's rung and the value reads it.
+ */
+const TriggerFont = /* @__PURE__ */ createContext("$3");
+const SelectValue = (props) => (_jsx(GuiSelect.Value, { fontSize: useContext(TriggerFont), ...props }));
+const SelectTrigger = ({ children, disabled, size, ...props }) => {
     const inherited = useContext(Disabled);
-    return (_jsxs(GuiSelect.Trigger, { ...slot("select-trigger"), unstyled: true, disabled: disabled ?? inherited, ...FIELD, items: "center", justify: "space-between", gap: "$2", 
+    const density = useDensity();
+    const box = BOX[fieldSize(size, density)];
+    const invalid = invalidOf(props["aria-invalid"], useField());
+    return (_jsxs(GuiSelect.Trigger, { ...slot("select-trigger"), unstyled: true, disabled: disabled ?? inherited, ...FIELD, ...(density === "compact" ? { bg: "$panel" } : null), ...(invalid ? { borderColor: "$red7", "aria-invalid": true } : null), px: box.gutter, items: "center", justify: "space-between", gap: "$2", 
         // A FLOOR, not a pin. `height` alone clips a child taller than the box, and
         // the build stays green while it does — that is why 01ac46dce moved Button
         // off a pinned height. Select and Input kept theirs, so the same trap was
         // still armed in the two controls that sit in every form.
-        height: "auto", minHeight: TRIGGER_H, 
+        height: "auto", minHeight: box.h, 
         // The trigger states its own vertical padding because otherwise something
         // else states it. `unstyled` does not survive gui's ListItem (it is
         // destructured into a local and never reaches the frame), so the frame
@@ -46,12 +62,17 @@ const SelectTrigger = ({ children, disabled, ...props }) => {
         // 14 + a 20px line + 14 + 2px of border rendered a 50px Select beside a 36px
         // Input. At 0 the floor decides again and `items="center"` does the
         // centring, which is exactly how the Input already behaves.
-        py: 0, cursor: "pointer", ...touch(TRIGGER_H, 44, "y"), ...props, children: [ink(children, undefined, { size: "$3" }), _jsx(GuiSelect.Icon, { children: _jsx(ChevronDown, { size: 16, opacity: 0.5 }) })] }));
+        py: 0, cursor: "pointer", ...touch(box.h, 44, "y"), ...props, children: [_jsx(TriggerFont.Provider, { value: box.font, children: ink(children, undefined, { size: box.font }) }), _jsx(GuiSelect.Icon, { children: _jsx(ChevronDown, { size: 16, opacity: 0.5 }) })] }));
+};
+const SelectItem = ({ children, value, ...props }) => {
+    const compact = useDensity() === "compact";
+    return (_jsxs(GuiSelect.Item, { value: value, ...slot("select-item"), unstyled: true, index: props.index ?? 0, items: "center", 
+        // Start-aligned. gui's ListItem centres its row on the main axis, which set
+        // every option's label in the middle of the list with the tick on the far edge.
+        justify: "flex-start", gap: "$2", minH: ROW_H, pl: compact ? "$1" : "$2", pr: "$7", 
+        // Concentric: the panel is 8, its inset 4, so a row is 4.
+        rounded: "$xs", cursor: "pointer", ...touch(ROW_H, 44, "y"), hoverStyle: { bg: compact ? "$hover" : "$raised" }, focusStyle: { bg: compact ? "$hover" : "$raised" }, ...props, children: [_jsx(GuiSelect.ItemText, { ...(compact ? { fontSize: "$2", color: "$aside" } : null), children: children }), _jsx(XStack, { position: "absolute", r: "$2", items: "center", justify: "center", pointerEvents: "none", children: _jsx(GuiSelect.ItemIndicator, { children: _jsx(Check, { size: 16, strokeWidth: 2 }) }) })] }));
 };
-const SelectItem = ({ children, value, ...props }) => (_jsxs(GuiSelect.Item, { value: value, ...slot("select-item"), unstyled: true, index: props.index ?? 0, items: "center", 
-    // Start-aligned. gui's ListItem centres its row on the main axis, which set
-    // every option's label in the middle of the list with the tick on the far edge.
-    justify: "flex-start", gap: "$2", minH: ROW_H, pl: "$2", pr: "$7", rounded: "$2", cursor: "pointer", ...touch(ROW_H, 44, "y"), hoverStyle: { bg: "$raised" }, focusStyle: { bg: "$raised" }, ...props, children: [_jsx(GuiSelect.ItemText, { children: children }), _jsx(XStack, { position: "absolute", r: "$2", items: "center", justify: "center", pointerEvents: "none", children: _jsx(GuiSelect.ItemIndicator, { children: _jsx(Check, { size: 16 }) }) })] }));
 /** Depth-first stamp of `index` onto every `SelectItem` in render order. */
 const stampIndices = (children, next) => Children.map(children, (child) => {
     if (!isValidElement(child))
@@ -67,9 +88,13 @@ const SelectScrollUpButton = (props) => (_jsx(GuiSelect.ScrollUpButton, { ...slo
 const SelectScrollDownButton = (props) => (_jsx(GuiSelect.ScrollDownButton, { ...slot("select-scroll-down-button"), items: "center", justify: "center", py: "$1", ...props, children: _jsx(ChevronDown, { size: 16 }) }));
 const SelectContent = ({ children, ...props }) => {
     let n = 0;
-    return (_jsxs(GuiSelect.Content, { ...slot("select-content"), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(GuiSelect.Viewport, { minW: 128, p: "$1", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", children: stampIndices(children, () => n++) }), _jsx(SelectScrollDownButton, {})] }));
+    // Read on the trigger's side of the portal and re-provided inside it: a
+    // context does not cross gui's portal, a provider placed in the portalled
+    // children does.
+    const density = useDensity();
+    return (_jsx(GuiSelect.Content, { ...slot("select-content"), ...props, children: _jsxs(Density, { value: density, children: [_jsx(SelectScrollUpButton, {}), _jsx(GuiSelect.Viewport, { minW: 128, p: "$1", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: stampIndices(children, () => n++) }), _jsx(SelectScrollDownButton, {})] }) }));
 };
-const SelectLabel = (props) => (_jsx(GuiSelect.Label, { ...slot("select-label"), px: "$2", py: "$1.5", fontSize: "$1", color: "$quiet", ...props }));
+const SelectLabel = (props) => (_jsx(GuiSelect.Label, { ...slot("select-label"), px: "$2", py: "$1.5", fontSize: "$1", fontWeight: "500", color: "$quiet", ...props }));
 const SelectSeparator = (props) => (_jsx(GuiSelectSeparator, { ...slot("select-separator"), my: "$1", borderColor: "$borderColor", ...props }));
 /** The select's own inset: Chromium pads a select's text 4px inside its box. */
 const INSET = 4;
@@ -83,12 +108,21 @@ const INSET = 4;
  * select's own 4px, and the Input theme's ink, edge and two edge states (`EDGE`)
  * — a native control gui does not draw, so it names what gui's Input carries.
  */
-const Picker = /* @__PURE__ */ forwardRef(function Picker({ id, name, value, defaultValue, onChange, required, disabled, autoComplete, children, size = "default", fill = false, ...props }, ref) {
-    const box = BOX[size];
-    return (_jsx(Text, { ref: ref, render: _jsx("select", { id: id, name: name, value: value, defaultValue: defaultValue, onChange: onChange, required: required, disabled: disabled, autoComplete: autoComplete }), ...slot("picker"), componentName: "Input", ...FIELD, ...EDGE, ...(fill ? FILL : null), display: "block", 
+const Picker = /* @__PURE__ */ forwardRef(function Picker({ id, name, value, defaultValue, onChange, required, disabled, autoComplete, children, size, fill = false, ...props }, ref) {
+    const density = useDensity();
+    const resolved = fieldSize(size, density);
+    const box = BOX[resolved];
+    const dense = resolved === "sm" || resolved === "xs";
+    return (_jsx(Text, { ref: ref, render: _jsx("select", { id: id, name: name, value: value, defaultValue: defaultValue, onChange: onChange, required: required, disabled: disabled, autoComplete: autoComplete }), ...slot("picker"), componentName: "Input", ...FIELD, ...EDGE, ...(density === "compact" ? { bg: "$panel" } : null), ...(fill ? FILL : null), display: "block", 
         // A floor, as the trigger's: the riser and the line make the box, and a
         // larger font grows it rather than clipping the chosen option.
-        minH: box.h, width: "100%", minW: 0, pl: box.gutter - INSET, pr: box.gutter - INSET, py: box.riser, color: "$color", fontFamily: "$body", fontSize: "$3", lineHeight: "$3", cursor: "pointer", ...props, children: children }));
+        minH: box.h, width: "100%", minW: 0, pl: box.gutter - INSET, pr: box.gutter - INSET, 
+        // Chromium ignores line-height on a <select> and sets its text on
+        // `normal` (19px at 13px Zen), so the record sizes cannot be built from a
+        // riser and a line the way the regular one is: 7 + 19 + 7 + 2 came out 35
+        // in a 32px box. They take no vertical padding and let the floor decide;
+        // the menulist centres its own text.
+        py: dense ? 0 : box.riser, color: "$color", fontFamily: "$body", fontSize: box.font, lineHeight: dense ? 16 : "$3", cursor: "pointer", ...props, children: children }));
 });
 export { Picker, Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
 //# sourceMappingURL=select.js.map

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

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

package/dist/backends/gui/shortcut.cjs

@@ -0,0 +1,122 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.combinations = exports.keyName = void 0;
+exports.formatShortcut = formatShortcut;
+exports.speakShortcut = speakShortcut;
+exports.Shortcut = Shortcut;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Shortcut — a keyboard shortcut as keycaps, named for the platform it is read
+ * on, and spoken as one phrase.
+ *
+ * A shortcut is one combination (`['Mod', 'K']`) or a sequence of them
+ * (`[['G'], ['P']]`, "G then P"). Key names translate per platform: `Mod` and
+ * `CommandOrControl` are ⌘ on a Mac and Ctrl elsewhere, `Alt` is ⌥ on a Mac,
+ * Enter is ⏎, arrows and Escape take their glyphs. The whole thing is one image
+ * to assistive technology, labelled in words ("Command + K", "G then P"), and
+ * the caps inside it are hidden — a screen reader hears the shortcut once, not
+ * a list of symbols.
+ *
+ * The platform is read through `useSyncExternalStore` with a server answer of
+ * "other", so a server render and the first client render agree and a Mac
+ * swaps Ctrl for ⌘ right after hydration rather than mismatching it.
+ *
+ * Re-expressed from twenty-ui's Shortcut and formatShortcut (MIT, see NOTICE):
+ * keys, text and button variants, a `desktop` visibility that hides it under a
+ * coarse pointer, keys 4px apart in a combination.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const kbd_1 = require("./kbd.cjs");
+const slot_1 = require("./slot.cjs");
+/** Every key name the two platforms spell differently, by its lowercase alias. */
+const KEYS = (platform) => {
+    const mac = platform === 'mac';
+    const mod = mac ? { glyph: '⌘', word: 'Command' } : { glyph: 'Ctrl', word: 'Control' };
+    return {
+        mod,
+        commandorcontrol: mod,
+        cmdorctrl: mod,
+        command: { glyph: '⌘', word: 'Command' },
+        cmd: { glyph: '⌘', word: 'Command' },
+        meta: { glyph: '⌘', word: 'Command' },
+        control: mac ? { glyph: '⌃', word: 'Control' } : { glyph: 'Ctrl', word: 'Control' },
+        ctrl: mac ? { glyph: '⌃', word: 'Control' } : { glyph: 'Ctrl', word: 'Control' },
+        alt: mac ? { glyph: '⌥', word: 'Option' } : { glyph: 'Alt', word: 'Alt' },
+        option: mac ? { glyph: '⌥', word: 'Option' } : { glyph: 'Alt', word: 'Alt' },
+        shift: { glyph: '⇧', word: 'Shift' },
+        enter: { glyph: '⏎', word: 'Enter' },
+        return: { glyph: '⏎', word: 'Enter' },
+        backspace: { glyph: '⌫', word: 'Backspace' },
+        delete: { glyph: '⌦', word: 'Delete' },
+        escape: { glyph: 'esc', word: 'Escape' },
+        esc: { glyph: 'esc', word: 'Escape' },
+        tab: { glyph: '⇥', word: 'Tab' },
+        space: { glyph: 'Space', word: 'Space' },
+        arrowup: { glyph: '↑', word: 'Up arrow' },
+        arrowdown: { glyph: '↓', word: 'Down arrow' },
+        arrowleft: { glyph: '←', word: 'Left arrow' },
+        arrowright: { glyph: '→', word: 'Right arrow' },
+        up: { glyph: '↑', word: 'Up arrow' },
+        down: { glyph: '↓', word: 'Down arrow' },
+        left: { glyph: '←', word: 'Left arrow' },
+        right: { glyph: '→', word: 'Right arrow' },
+    };
+};
+/** A key's glyph and word on `platform`; a plain key is itself, a letter uppercased. */
+const keyName = (key, platform) => {
+    const known = KEYS(platform)[key.toLowerCase()];
+    if (known)
+        return known;
+    const label = key.length === 1 ? key.toUpperCase() : key;
+    return { glyph: label, word: label };
+};
+exports.keyName = keyName;
+/** `keys` as a list of combinations, whichever shape it was given in. */
+const combinations = (keys) => keys.length > 0 && Array.isArray(keys[0]) ? keys.map((c) => [...c]) : [[...keys]];
+exports.combinations = combinations;
+/** The shortcut as text, without rendering: "⌘K", "Ctrl K", "G then P". */
+function formatShortcut(keys, options = {}) {
+    const platform = options.platform ?? detect();
+    const join = options.combinationSeparator ?? (platform === 'mac' ? '' : ' ');
+    return (0, exports.combinations)(keys)
+        .map((c) => c.map((k) => (0, exports.keyName)(k, platform).glyph).join(join))
+        .join(` ${options.sequenceJoinLabel ?? 'then'} `);
+}
+/** The shortcut in words, for assistive technology: "Command + K", "G then P". */
+function speakShortcut(keys, platform, then = 'then') {
+    return (0, exports.combinations)(keys)
+        .map((c) => c.map((k) => (0, exports.keyName)(k, platform).word).join(' + '))
+        .join(` ${then} `);
+}
+/** macOS and iOS read as a Mac; anything else, or no navigator, does not. */
+function detect() {
+    if (typeof navigator === 'undefined')
+        return 'other';
+    const nav = navigator;
+    const p = nav.userAgentData?.platform ?? nav.platform ?? nav.userAgent ?? '';
+    return /mac|iphone|ipad|ipod/i.test(p) ? 'mac' : 'other';
+}
+const never = () => () => { };
+function Shortcut({ keys, platform, variant = 'keys', visibility = 'always', sequenceJoinLabel = 'then', combinationSeparator, ...props }) {
+    const detected = (0, react_1.useSyncExternalStore)(never, detect, () => 'other');
+    const on = platform ?? detected;
+    const label = speakShortcut(keys, on, sequenceJoinLabel);
+    const hidden = visibility === 'desktop' ? { $touchable: { display: 'none' } } : null;
+    const frame = {
+        ...(0, slot_1.slot)('shortcut'),
+        'data-variant': variant,
+        role: 'img',
+        'aria-label': label,
+        display: 'inline-flex',
+        items: 'center',
+        ...hidden,
+    };
+    if (variant === 'text' || variant === 'button') {
+        const text = formatShortcut(keys, { platform: on, sequenceJoinLabel, combinationSeparator });
+        return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...frame, ...(variant === 'button' ? { gap: 6, ml: '$1', opacity: 0.5 } : null), ...props, children: [variant === 'button' ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, width: 1, height: 8, opacity: 0.4, style: { backgroundColor: 'currentColor' } })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { "aria-hidden": true, size: "$2", ...(variant === 'button' ? { fontWeight: '500' } : null), children: text })] }));
+    }
+    const combos = (0, exports.combinations)(keys);
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...frame, gap: "$1", ...props, children: combos.map((combo, i) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { "aria-hidden": true, display: "inline-flex", items: "center", gap: "$1", children: [i > 0 ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$hint", children: sequenceJoinLabel })) : null, combo.map((k, j) => ((0, jsx_runtime_1.jsx)(kbd_1.Kbd, { variant: "cap", children: (0, exports.keyName)(k, on).glyph }, j)))] }, i))) }));
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Shortcut — a keyboard shortcut as keycaps, named for the platform it is read
+ * on, and spoken as one phrase.
+ *
+ * A shortcut is one combination (`['Mod', 'K']`) or a sequence of them
+ * (`[['G'], ['P']]`, "G then P"). Key names translate per platform: `Mod` and
+ * `CommandOrControl` are ⌘ on a Mac and Ctrl elsewhere, `Alt` is ⌥ on a Mac,
+ * Enter is ⏎, arrows and Escape take their glyphs. The whole thing is one image
+ * to assistive technology, labelled in words ("Command + K", "G then P"), and
+ * the caps inside it are hidden — a screen reader hears the shortcut once, not
+ * a list of symbols.
+ *
+ * The platform is read through `useSyncExternalStore` with a server answer of
+ * "other", so a server render and the first client render agree and a Mac
+ * swaps Ctrl for ⌘ right after hydration rather than mismatching it.
+ *
+ * Re-expressed from twenty-ui's Shortcut and formatShortcut (MIT, see NOTICE):
+ * keys, text and button variants, a `desktop` visibility that hides it under a
+ * coarse pointer, keys 4px apart in a combination.
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps } from 'react';
+export type ShortcutPlatform = 'mac' | 'other';
+/** One combination, or a sequence of combinations pressed one after another. */
+export type ShortcutKeys = readonly string[] | readonly (readonly string[])[];
+type Name = {
+    glyph: string;
+    word: string;
+};
+/** A key's glyph and word on `platform`; a plain key is itself, a letter uppercased. */
+export declare const keyName: (key: string, platform: ShortcutPlatform) => Name;
+/** `keys` as a list of combinations, whichever shape it was given in. */
+export declare const combinations: (keys: ShortcutKeys) => string[][];
+export type FormatOptions = {
+    platform?: ShortcutPlatform;
+    /** Between combinations of a sequence. Default "then". */
+    sequenceJoinLabel?: string;
+    /** Between the keys of one combination. Default none on a Mac, a space elsewhere. */
+    combinationSeparator?: string;
+};
+/** The shortcut as text, without rendering: "⌘K", "Ctrl K", "G then P". */
+export declare function formatShortcut(keys: ShortcutKeys, options?: FormatOptions): string;
+/** The shortcut in words, for assistive technology: "Command + K", "G then P". */
+export declare function speakShortcut(keys: ShortcutKeys, platform: ShortcutPlatform, then?: string): string;
+export type ShortcutProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    keys: ShortcutKeys;
+    /** Default: the platform the page is read on. */
+    platform?: ShortcutPlatform;
+    /** `keys` draws keycaps; `text` plain text in the surrounding type; `button` the quiet hint inside a Button. */
+    variant?: 'keys' | 'text' | 'button';
+    /** `desktop` hides it under a coarse pointer, where there is no keyboard to press it on. */
+    visibility?: 'always' | 'desktop';
+    sequenceJoinLabel?: string;
+    combinationSeparator?: string;
+};
+export declare function Shortcut({ keys, platform, variant, visibility, sequenceJoinLabel, combinationSeparator, ...props }: ShortcutProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=shortcut.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/shortcut.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAIjE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,OAAO,CAAA;AAC9C,gFAAgF;AAChF,MAAM,MAAM,YAAY,GAAG,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,CAAA;AAE7E,KAAK,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAqC3C,wFAAwF;AACxF,eAAO,MAAM,OAAO,QAAS,MAAM,YAAY,gBAAgB,KAAG,IAKjE,CAAA;AAED,yEAAyE;AACzE,eAAO,MAAM,YAAY,SAAU,YAAY,KAAG,MAAM,EAAE,EACuD,CAAA;AAEjH,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qFAAqF;IACrF,oBAAoB,CAAC,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,2EAA2E;AAC3E,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAMtF;AAED,kFAAkF;AAClF,wBAAgB,aAAa,CAAC,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,IAAI,SAAS,GAAG,MAAM,CAInG;AAYD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,IAAI,EAAE,YAAY,CAAA;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,gHAAgH;IAChH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;IACpC,4FAA4F;IAC5F,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,QAAQ,EACR,OAAgB,EAChB,UAAqB,EACrB,iBAA0B,EAC1B,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,aAAa,+BAoDf"}

package/dist/backends/gui/shortcut.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shortcut — a keyboard shortcut as keycaps, named for the platform it is read
+ * on, and spoken as one phrase.
+ *
+ * A shortcut is one combination (`['Mod', 'K']`) or a sequence of them
+ * (`[['G'], ['P']]`, "G then P"). Key names translate per platform: `Mod` and
+ * `CommandOrControl` are ⌘ on a Mac and Ctrl elsewhere, `Alt` is ⌥ on a Mac,
+ * Enter is ⏎, arrows and Escape take their glyphs. The whole thing is one image
+ * to assistive technology, labelled in words ("Command + K", "G then P"), and
+ * the caps inside it are hidden — a screen reader hears the shortcut once, not
+ * a list of symbols.
+ *
+ * The platform is read through `useSyncExternalStore` with a server answer of
+ * "other", so a server render and the first client render agree and a Mac
+ * swaps Ctrl for ⌘ right after hydration rather than mismatching it.
+ *
+ * Re-expressed from twenty-ui's Shortcut and formatShortcut (MIT, see NOTICE):
+ * keys, text and button variants, a `desktop` visibility that hides it under a
+ * coarse pointer, keys 4px apart in a combination.
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { useSyncExternalStore } from 'react';
+import { Kbd } from './kbd.js';
+import { slot } from './slot.js';
+/** Every key name the two platforms spell differently, by its lowercase alias. */
+const KEYS = (platform) => {
+    const mac = platform === 'mac';
+    const mod = mac ? { glyph: '⌘', word: 'Command' } : { glyph: 'Ctrl', word: 'Control' };
+    return {
+        mod,
+        commandorcontrol: mod,
+        cmdorctrl: mod,
+        command: { glyph: '⌘', word: 'Command' },
+        cmd: { glyph: '⌘', word: 'Command' },
+        meta: { glyph: '⌘', word: 'Command' },
+        control: mac ? { glyph: '⌃', word: 'Control' } : { glyph: 'Ctrl', word: 'Control' },
+        ctrl: mac ? { glyph: '⌃', word: 'Control' } : { glyph: 'Ctrl', word: 'Control' },
+        alt: mac ? { glyph: '⌥', word: 'Option' } : { glyph: 'Alt', word: 'Alt' },
+        option: mac ? { glyph: '⌥', word: 'Option' } : { glyph: 'Alt', word: 'Alt' },
+        shift: { glyph: '⇧', word: 'Shift' },
+        enter: { glyph: '⏎', word: 'Enter' },
+        return: { glyph: '⏎', word: 'Enter' },
+        backspace: { glyph: '⌫', word: 'Backspace' },
+        delete: { glyph: '⌦', word: 'Delete' },
+        escape: { glyph: 'esc', word: 'Escape' },
+        esc: { glyph: 'esc', word: 'Escape' },
+        tab: { glyph: '⇥', word: 'Tab' },
+        space: { glyph: 'Space', word: 'Space' },
+        arrowup: { glyph: '↑', word: 'Up arrow' },
+        arrowdown: { glyph: '↓', word: 'Down arrow' },
+        arrowleft: { glyph: '←', word: 'Left arrow' },
+        arrowright: { glyph: '→', word: 'Right arrow' },
+        up: { glyph: '↑', word: 'Up arrow' },
+        down: { glyph: '↓', word: 'Down arrow' },
+        left: { glyph: '←', word: 'Left arrow' },
+        right: { glyph: '→', word: 'Right arrow' },
+    };
+};
+/** A key's glyph and word on `platform`; a plain key is itself, a letter uppercased. */
+export const keyName = (key, platform) => {
+    const known = KEYS(platform)[key.toLowerCase()];
+    if (known)
+        return known;
+    const label = key.length === 1 ? key.toUpperCase() : key;
+    return { glyph: label, word: label };
+};
+/** `keys` as a list of combinations, whichever shape it was given in. */
+export const combinations = (keys) => keys.length > 0 && Array.isArray(keys[0]) ? keys.map((c) => [...c]) : [[...keys]];
+/** The shortcut as text, without rendering: "⌘K", "Ctrl K", "G then P". */
+export function formatShortcut(keys, options = {}) {
+    const platform = options.platform ?? detect();
+    const join = options.combinationSeparator ?? (platform === 'mac' ? '' : ' ');
+    return combinations(keys)
+        .map((c) => c.map((k) => keyName(k, platform).glyph).join(join))
+        .join(` ${options.sequenceJoinLabel ?? 'then'} `);
+}
+/** The shortcut in words, for assistive technology: "Command + K", "G then P". */
+export function speakShortcut(keys, platform, then = 'then') {
+    return combinations(keys)
+        .map((c) => c.map((k) => keyName(k, platform).word).join(' + '))
+        .join(` ${then} `);
+}
+/** macOS and iOS read as a Mac; anything else, or no navigator, does not. */
+function detect() {
+    if (typeof navigator === 'undefined')
+        return 'other';
+    const nav = navigator;
+    const p = nav.userAgentData?.platform ?? nav.platform ?? nav.userAgent ?? '';
+    return /mac|iphone|ipad|ipod/i.test(p) ? 'mac' : 'other';
+}
+const never = () => () => { };
+export function Shortcut({ keys, platform, variant = 'keys', visibility = 'always', sequenceJoinLabel = 'then', combinationSeparator, ...props }) {
+    const detected = useSyncExternalStore(never, detect, () => 'other');
+    const on = platform ?? detected;
+    const label = speakShortcut(keys, on, sequenceJoinLabel);
+    const hidden = visibility === 'desktop' ? { $touchable: { display: 'none' } } : null;
+    const frame = {
+        ...slot('shortcut'),
+        'data-variant': variant,
+        role: 'img',
+        'aria-label': label,
+        display: 'inline-flex',
+        items: 'center',
+        ...hidden,
+    };
+    if (variant === 'text' || variant === 'button') {
+        const text = formatShortcut(keys, { platform: on, sequenceJoinLabel, combinationSeparator });
+        return (_jsxs(XStack, { ...frame, ...(variant === 'button' ? { gap: 6, ml: '$1', opacity: 0.5 } : null), ...props, children: [variant === 'button' ? (_jsx(XStack, { "aria-hidden": true, width: 1, height: 8, opacity: 0.4, style: { backgroundColor: 'currentColor' } })) : null, _jsx(SizableText, { "aria-hidden": true, size: "$2", ...(variant === 'button' ? { fontWeight: '500' } : null), children: text })] }));
+    }
+    const combos = combinations(keys);
+    return (_jsx(XStack, { ...frame, gap: "$1", ...props, children: combos.map((combo, i) => (_jsxs(XStack, { "aria-hidden": true, display: "inline-flex", items: "center", gap: "$1", children: [i > 0 ? (_jsx(SizableText, { size: "$1", color: "$hint", children: sequenceJoinLabel })) : null, combo.map((k, j) => (_jsx(Kbd, { variant: "cap", children: keyName(k, on).glyph }, j)))] }, i))) }));
+}
+//# sourceMappingURL=shortcut.js.map

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

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

package/dist/backends/gui/skeleton.cjs

@@ -1,14 +1,45 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeleton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const box_1 = require("../../box.cjs");
-const cn_1 = require("../../core/cn.cjs");
-const Skeleton = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box
-// Announced as busy so a screen reader says "loading" rather than reading
-// out an empty box, or nothing at all. A boolean, not the string "true":
-// gui types the ARIA states as booleans and React writes the attribute out
-// either way.
-, { "aria-busy": true, "aria-live": "polite", "data-motion": "pulse", className: (0, cn_1.cn)('rounded-md bg-muted', className), ...props }));
+exports.SKELETON_HEIGHT = void 0;
 exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Skeleton — the shape of content that has not arrived. ONE implementation:
+ * `@hanzo/ui`'s `Skeleton` is this, and `@hanzo/ui/product`'s `Skeleton` (with
+ * `Skeleton.Text`) is this with its own defaults.
+ *
+ * It is a box with a highlight sweeping across it and nothing else, so the SIZE
+ * is the caller's to state and should match what will land there. A skeleton
+ * that is not the size of its content is worse than none: the page reflows when
+ * the real thing appears, which is the jump the skeleton existed to prevent.
+ *
+ * After twenty-ui's Skeleton (MIT, NOTICE): the base is the hover rung, the
+ * highlight a faint glass band, 4px corners, a 1.5s sweep (`--duration-loop`,
+ * stopped under reduced motion), height presets xs 13 / s 16 / m 24 / l 32 /
+ * xl 40, and two layouts — `inline` takes a line box of the text around it
+ * (it holds a zero-width non-joiner, so it is a line tall with no height
+ * given), `block` is a box of its own. The highlight is `--glass` rather than
+ * the panel rung: twenty-ui's is 2% black on light and 3% white on dark, and
+ * the panel rung is a SOLID step that sits darker than the hover rung in the
+ * dark theme, which would sweep a shadow instead of a light.
+ *
+ * Hidden from assistive technology: a placeholder is scenery, and the content
+ * is what should be read when it lands.
+ *
+ * Class notation is still read (`<Skeleton className="h-4 w-32" />`), the way
+ * `Box` reads it, so call sites written against the Box version keep their
+ * sizes; a class it does not know stays a class.
+ */
+const gui_1 = require("@hanzo/gui");
+const tw_1 = require("../../tw.cjs");
+const slot_1 = require("./slot.cjs");
+/** The height presets, px. */
+exports.SKELETON_HEIGHT = { xs: 13, s: 16, m: 24, l: 32, xl: 40 };
+/** The band that sweeps: transparent, the glass light, transparent. */
+const BAND = 'linear-gradient(90deg, transparent 0%, var(--glass, rgba(128, 128, 128, 0.08)) 50%, transparent 100%)';
+function Skeleton({ size, layout = 'inline', animated = true, className, ...props }) {
+    const { props: read, rest } = (0, tw_1.tw)(className);
+    const height = size ? exports.SKELETON_HEIGHT[size] : layout === 'block' ? '1em' : undefined;
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('skeleton'), "aria-hidden": true, "data-layout": layout, "data-motion": animated ? 'shimmer' : undefined, display: layout === 'inline' ? 'inline-flex' : 'flex', width: "100%", ...(height === undefined ? null : { height }), rounded: "$xs", bg: "$hover", backgroundImage: animated ? BAND : undefined, backgroundSize: "160px 100%", backgroundRepeat: "no-repeat", overflow: "hidden", ...read, ...(rest ? { className: rest } : null), ...props, children: layout === 'inline' && height === undefined && !('height' in props) && !('height' in read) ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", "aria-hidden": true, children: '‌' })) : null }));
+}

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

@@ -1,12 +1,50 @@
 /**
- * Skeleton — the shape of content that has not arrived.
+ * Skeleton — the shape of content that has not arrived. ONE implementation:
+ * `@hanzo/ui`'s `Skeleton` is this, and `@hanzo/ui/product`'s `Skeleton` (with
+ * `Skeleton.Text`) is this with its own defaults.
  *
- * It is a box with the pulse on it and nothing else, so the SIZE is the caller's
- * to state and should match what will land there. A skeleton that is not the
- * size of its content is worse than none: the page reflows when the real thing
- * appears, which is the jump the skeleton existed to prevent.
+ * It is a box with a highlight sweeping across it and nothing else, so the SIZE
+ * is the caller's to state and should match what will land there. A skeleton
+ * that is not the size of its content is worse than none: the page reflows when
+ * the real thing appears, which is the jump the skeleton existed to prevent.
+ *
+ * After twenty-ui's Skeleton (MIT, NOTICE): the base is the hover rung, the
+ * highlight a faint glass band, 4px corners, a 1.5s sweep (`--duration-loop`,
+ * stopped under reduced motion), height presets xs 13 / s 16 / m 24 / l 32 /
+ * xl 40, and two layouts — `inline` takes a line box of the text around it
+ * (it holds a zero-width non-joiner, so it is a line tall with no height
+ * given), `block` is a box of its own. The highlight is `--glass` rather than
+ * the panel rung: twenty-ui's is 2% black on light and 3% white on dark, and
+ * the panel rung is a SOLID step that sits darker than the hover rung in the
+ * dark theme, which would sweep a shadow instead of a light.
+ *
+ * Hidden from assistive technology: a placeholder is scenery, and the content
+ * is what should be read when it lands.
+ *
+ * Class notation is still read (`<Skeleton className="h-4 w-32" />`), the way
+ * `Box` reads it, so call sites written against the Box version keep their
+ * sizes; a class it does not know stays a class.
  */
-import * as React from 'react';
-import { Box } from '../../box.js';
-export declare const Skeleton: ({ className, ...props }: React.ComponentProps<typeof Box>) => React.JSX.Element;
+import { YStack } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+import { type ClassValue } from '../../tw.js';
+/** The height presets, px. */
+export declare const SKELETON_HEIGHT: {
+    readonly xs: 13;
+    readonly s: 16;
+    readonly m: 24;
+    readonly l: 32;
+    readonly xl: 40;
+};
+export type SkeletonSize = keyof typeof SKELETON_HEIGHT;
+export type SkeletonProps = Omit<ComponentProps<typeof YStack>, 'children' | 'size'> & {
+    /** A height preset; a `height` given beside it wins. */
+    size?: SkeletonSize;
+    /** `inline` (default) is a line of the surrounding text; `block` is a box. */
+    layout?: 'inline' | 'block';
+    /** The sweep; off, a still block. Off under reduced motion regardless. */
+    animated?: boolean;
+    className?: ClassValue;
+};
+export declare function Skeleton({ size, layout, animated, className, ...props }: SkeletonProps): import("react").JSX.Element;
 //# sourceMappingURL=skeleton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,eAAO,MAAM,QAAQ,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,sBAYjF,CAAA"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAM,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAG9C,8BAA8B;AAC9B,eAAO,MAAM,eAAe;aAAK,EAAE,EAAE,EAAE;aAAE,CAAC,EAAE,EAAE;aAAE,CAAC,EAAE,EAAE;aAAE,CAAC,EAAE,EAAE;aAAE,EAAE,EAAE,EAAE;CAAW,CAAA;AAE/E,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,eAAe,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACrF,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB,CAAA;AAKD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAiB,EAAE,QAAe,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA+BxG"}