@hanzo/ui 8.27.91 → 8.28.0

package/dist/backends/gui/select.cjs

@@ -14,16 +14,22 @@ const jsx_runtime_1 = require("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.
  */
 const react_1 = require("react");
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
 const control_1 = require("./control.cjs");
+const density_1 = require("./density.cjs");
+const field_1 = require("./field.cjs");
 const gesture_1 = require("./gesture.cjs");
 const ink_1 = require("./ink.cjs");
 const slot_1 = require("./slot.cjs");
 const ROW_H = 32;
-const TRIGGER_H = control_1.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
@@ -34,16 +40,26 @@ const Select = /* @__PURE__ */ Object.assign(({ disabled = false, ...props }) =>
 exports.Select = Select;
 const SelectGroup = gui_1.Select.Group;
 exports.SelectGroup = SelectGroup;
-const SelectValue = gui_1.Select.Value;
+/**
+ * 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__ */ (0, react_1.createContext)("$3");
+const SelectValue = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Select.Value, { fontSize: (0, react_1.useContext)(TriggerFont), ...props }));
 exports.SelectValue = SelectValue;
-const SelectTrigger = ({ children, disabled, ...props }) => {
+const SelectTrigger = ({ children, disabled, size, ...props }) => {
     const inherited = (0, react_1.useContext)(Disabled);
-    return ((0, jsx_runtime_1.jsxs)(gui_1.Select.Trigger, { ...(0, slot_1.slot)("select-trigger"), unstyled: true, disabled: disabled ?? inherited, ...control_1.FIELD, items: "center", justify: "space-between", gap: "$2", 
+    const density = (0, density_1.useDensity)();
+    const box = control_1.BOX[(0, density_1.fieldSize)(size, density)];
+    const invalid = (0, field_1.invalidOf)(props["aria-invalid"], (0, field_1.useField)());
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Select.Trigger, { ...(0, slot_1.slot)("select-trigger"), unstyled: true, disabled: disabled ?? inherited, ...control_1.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
@@ -52,13 +68,18 @@ 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", ...(0, gesture_1.touch)(TRIGGER_H, 44, "y"), ...props, children: [(0, ink_1.ink)(children, undefined, { size: "$3" }), (0, jsx_runtime_1.jsx)(gui_1.Select.Icon, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16, opacity: 0.5 }) })] }));
+        py: 0, cursor: "pointer", ...(0, gesture_1.touch)(box.h, 44, "y"), ...props, children: [(0, jsx_runtime_1.jsx)(TriggerFont.Provider, { value: box.font, children: (0, ink_1.ink)(children, undefined, { size: box.font }) }), (0, jsx_runtime_1.jsx)(gui_1.Select.Icon, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16, opacity: 0.5 }) })] }));
 };
 exports.SelectTrigger = SelectTrigger;
-const SelectItem = ({ children, value, ...props }) => ((0, jsx_runtime_1.jsxs)(gui_1.Select.Item, { value: value, ...(0, slot_1.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", ...(0, gesture_1.touch)(ROW_H, 44, "y"), hoverStyle: { bg: "$raised" }, focusStyle: { bg: "$raised" }, ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.Select.ItemText, { children: children }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", r: "$2", items: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(gui_1.Select.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16 }) }) })] }));
+const SelectItem = ({ children, value, ...props }) => {
+    const compact = (0, density_1.useDensity)() === "compact";
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Select.Item, { value: value, ...(0, slot_1.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", ...(0, gesture_1.touch)(ROW_H, 44, "y"), hoverStyle: { bg: compact ? "$hover" : "$raised" }, focusStyle: { bg: compact ? "$hover" : "$raised" }, ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.Select.ItemText, { ...(compact ? { fontSize: "$2", color: "$aside" } : null), children: children }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", r: "$2", items: "center", justify: "center", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(gui_1.Select.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, strokeWidth: 2 }) }) })] }));
+};
 exports.SelectItem = SelectItem;
 /** Depth-first stamp of `index` onto every `SelectItem` in render order. */
 const stampIndices = (children, next) => react_1.Children.map(children, (child) => {
@@ -77,10 +98,14 @@ const SelectScrollDownButton = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Select.S
 exports.SelectScrollDownButton = SelectScrollDownButton;
 const SelectContent = ({ children, ...props }) => {
     let n = 0;
-    return ((0, jsx_runtime_1.jsxs)(gui_1.Select.Content, { ...(0, slot_1.slot)("select-content"), ...props, children: [(0, jsx_runtime_1.jsx)(SelectScrollUpButton, {}), (0, jsx_runtime_1.jsx)(gui_1.Select.Viewport, { minW: 128, p: "$1", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", children: stampIndices(children, () => n++) }), (0, jsx_runtime_1.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 = (0, density_1.useDensity)();
+    return ((0, jsx_runtime_1.jsx)(gui_1.Select.Content, { ...(0, slot_1.slot)("select-content"), ...props, children: (0, jsx_runtime_1.jsxs)(density_1.Density, { value: density, children: [(0, jsx_runtime_1.jsx)(SelectScrollUpButton, {}), (0, jsx_runtime_1.jsx)(gui_1.Select.Viewport, { minW: 128, p: "$1", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: stampIndices(children, () => n++) }), (0, jsx_runtime_1.jsx)(SelectScrollDownButton, {})] }) }));
 };
 exports.SelectContent = SelectContent;
-const SelectLabel = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Select.Label, { ...(0, slot_1.slot)("select-label"), px: "$2", py: "$1.5", fontSize: "$1", color: "$quiet", ...props }));
+const SelectLabel = (props) => ((0, jsx_runtime_1.jsx)(gui_1.Select.Label, { ...(0, slot_1.slot)("select-label"), px: "$2", py: "$1.5", fontSize: "$1", fontWeight: "500", color: "$quiet", ...props }));
 exports.SelectLabel = SelectLabel;
 const SelectSeparator = (props) => ((0, jsx_runtime_1.jsx)(gui_1.SelectSeparator, { ...(0, slot_1.slot)("select-separator"), my: "$1", borderColor: "$borderColor", ...props }));
 exports.SelectSeparator = SelectSeparator;
@@ -96,11 +121,20 @@ 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__ */ (0, react_1.forwardRef)(function Picker({ id, name, value, defaultValue, onChange, required, disabled, autoComplete, children, size = "default", fill = false, ...props }, ref) {
-    const box = control_1.BOX[size];
-    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ref: ref, render: (0, jsx_runtime_1.jsx)("select", { id: id, name: name, value: value, defaultValue: defaultValue, onChange: onChange, required: required, disabled: disabled, autoComplete: autoComplete }), ...(0, slot_1.slot)("picker"), componentName: "Input", ...control_1.FIELD, ...control_1.EDGE, ...(fill ? control_1.FILL : null), display: "block", 
+const Picker = /* @__PURE__ */ (0, react_1.forwardRef)(function Picker({ id, name, value, defaultValue, onChange, required, disabled, autoComplete, children, size, fill = false, ...props }, ref) {
+    const density = (0, density_1.useDensity)();
+    const resolved = (0, density_1.fieldSize)(size, density);
+    const box = control_1.BOX[resolved];
+    const dense = resolved === "sm" || resolved === "xs";
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ref: ref, render: (0, jsx_runtime_1.jsx)("select", { id: id, name: name, value: value, defaultValue: defaultValue, onChange: onChange, required: required, disabled: disabled, autoComplete: autoComplete }), ...(0, slot_1.slot)("picker"), componentName: "Input", ...control_1.FIELD, ...control_1.EDGE, ...(density === "compact" ? { bg: "$panel" } : null), ...(fill ? control_1.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 }));
 });
 exports.Picker = Picker;

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

@@ -9,6 +9,11 @@
  *
  * `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 { type ComponentProps, type ReactNode } from "react";
 import { Select as GuiSelect, SelectSeparator as GuiSelectSeparator, type TextProps } from "@hanzo/gui";
@@ -24,8 +29,12 @@ export type SelectProps = ComponentProps<typeof GuiSelect> & {
 type SelectRoot = ((props: SelectProps) => ReactNode) & typeof GuiSelect;
 declare const Select: SelectRoot;
 declare const SelectGroup: typeof GuiSelect.Group;
-declare const SelectValue: typeof GuiSelect.Value;
-export type SelectTriggerProps = ComponentProps<typeof GuiSelect.Trigger>;
+export type SelectValueProps = ComponentProps<typeof GuiSelect.Value>;
+declare const SelectValue: (props: SelectValueProps) => import("react").JSX.Element;
+export type SelectTriggerProps = Omit<ComponentProps<typeof GuiSelect.Trigger>, "size"> & {
+    /** The box, as `Input`'s (control.ts `BOX`). Unset, the nearest `<Density>` decides. */
+    size?: FieldSize;
+};
 export type SelectContentProps = ComponentProps<typeof GuiSelect.Content>;
 export type SelectItemProps = Omit<ComponentProps<typeof GuiSelect.Item>, "index"> & {
     index?: number;
@@ -33,7 +42,7 @@ export type SelectItemProps = Omit<ComponentProps<typeof GuiSelect.Item>, "index
 export type SelectLabelProps = ComponentProps<typeof GuiSelect.Label>;
 export type SelectSeparatorProps = ComponentProps<typeof GuiSelectSeparator>;
 export type SelectScrollButtonProps = ComponentProps<typeof GuiSelect.ScrollUpButton>;
-declare const SelectTrigger: ({ children, disabled, ...props }: SelectTriggerProps) => import("react").JSX.Element;
+declare const SelectTrigger: ({ children, disabled, size, ...props }: SelectTriggerProps) => import("react").JSX.Element;
 declare const SelectItem: ({ children, value, ...props }: SelectItemProps) => import("react").JSX.Element;
 declare const SelectScrollUpButton: (props: SelectScrollButtonProps) => import("react").JSX.Element;
 declare const SelectScrollDownButton: (props: SelectScrollButtonProps) => import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/select.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,EAOL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AACd,OAAO,EACL,MAAM,IAAI,SAAS,EACnB,eAAe,IAAI,kBAAkB,EAGrC,KAAK,SAAS,EACf,MAAM,YAAY,CAAA;AAGnB,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAe7E,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,KAAK,UAAU,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,SAAS,CAAC,GAAG,OAAO,SAAS,CAAA;AAExE,QAAA,MAAM,MAAM,EAAE,UAOC,CAAA;AACf,QAAA,MAAM,WAAW,EAAE,OAAO,SAAS,CAAC,KAAuB,CAAA;AAC3D,QAAA,MAAM,WAAW,EAAE,OAAO,SAAS,CAAC,KAAuB,CAAA;AAE3D,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,CAAA;AACzE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,OAAO,CAAC,CAAA;AACzE,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,EACrC,OAAO,CACR,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AACD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAA;AACrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAC5E,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,SAAS,CAAC,cAAc,CAChC,CAAA;AAED,QAAA,MAAM,aAAa,qCAIhB,kBAAkB,gCAwCpB,CAAA;AAED,QAAA,MAAM,UAAU,kCAAmC,eAAe,gCAkCjE,CAAA;AAcD,QAAA,MAAM,oBAAoB,UAAW,uBAAuB,gCAU3D,CAAA;AAED,QAAA,MAAM,sBAAsB,UAAW,uBAAuB,gCAU7D,CAAA;AAED,QAAA,MAAM,aAAa,2BAA4B,kBAAkB,gCAkBhE,CAAA;AAED,QAAA,MAAM,WAAW,UAAW,gBAAgB,gCAS3C,CAAA;AAED,QAAA,MAAM,eAAe,UAAW,oBAAoB,gCAOnD,CAAA;AAKD,iGAAiG;AACjG,KAAK,MAAM,GAAG,IAAI,CAChB,cAAc,CAAC,QAAQ,CAAC,EACxB,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,CAC9G,CAAA;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,MAAM,CAAC,GACzE,MAAM,GAAG;IACP,iFAAiF;IACjF,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAEH;;;;;;;;;GASG;AACH,QAAA,MAAM,MAAM,wHA4CV,CAAA;AAEF,OAAO,EACL,MAAM,EACN,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/select.tsx"],"names":[],"mappings":"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"}

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