@hanzo/ui 8.27.91 → 8.29.0

package/dist/backends/gui/phone-country-picker.cjs

@@ -0,0 +1,60 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flag = Flag;
+exports.PhoneCountryPicker = PhoneCountryPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * PhoneCountryPicker — the calling code at the start of a phone field.
+ *
+ *   <InputGroup>
+ *     <PhoneCountryPicker countries={list} value={iso} onValueChange={setIso} />
+ *     <Input value={number} onChangeText={setNumber} inputMode="tel" />
+ *   </InputGroup>
+ *
+ * A segment of the field (`Segment`) showing the country's flag and a chevron;
+ * the list it opens is found by country name, ISO code and calling code, with
+ * or without the "+". The picked country is named in a visually hidden label,
+ * since a flag alone says nothing to a screen reader. Parsing and validating the
+ * number belong to the field layer, not here. Data-free: the caller passes the
+ * countries and their calling codes.
+ *
+ * Flags are regional-indicator text (`flag`), drawn by the platform. Anatomy
+ * after twenty-ui's PhoneCountryPicker (MIT, NOTICE): 8px before the flag and 4
+ * after the chevron, a 16×12 flag with 2px corners, a globe when none.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const flag_1 = require("./flag.cjs");
+const search_list_1 = require("./search-list.cjs");
+/** The 16×12 flag box, 2px corners; a globe when there is no country. */
+function Flag({ iso, override }) {
+    const glyph = override ?? (0, flag_1.flag)(iso);
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 16, height: 12, rounded: "$2xs", overflow: "hidden", items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: glyph == null ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Globe, { size: 14, color: "$hint" })) : typeof glyph === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", lineHeight: 12, children: glyph })) : (glyph) }));
+}
+function PhoneCountryPicker({ countries, value, defaultValue = null, onValueChange, closeOnSelect = true, open, defaultOpen, onOpenChange, disabled = false, label: name = 'Country calling code', searchLabel = 'Search countries', emptyLabel = 'No country found', }) {
+    const [own, setOwn] = (0, react_1.useState)(defaultValue);
+    const iso = value !== undefined ? value : own;
+    const [shown, setShown] = (0, search_list_1.useOpen)(open, defaultOpen, onOpenChange);
+    const picked = countries.find((c) => c.value === iso);
+    const options = countries.map((c) => ({
+        value: c.value,
+        label: c.label,
+        keywords: [c.value, c.callingCode, `+${c.callingCode}`],
+        disabled: c.disabled,
+        start: ((0, jsx_runtime_1.jsx)(gui_1.XStack, { pr: "$1", children: (0, jsx_runtime_1.jsx)(Flag, { iso: c.value, override: c.flag }) })),
+        end: `+${c.callingCode}`,
+    }));
+    return ((0, jsx_runtime_1.jsx)(search_list_1.SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: iso, searchLabel: searchLabel, emptyLabel: emptyLabel, width: 280, onPick: (next) => {
+            if (value === undefined)
+                setOwn(next);
+            if (next !== iso)
+                onValueChange?.(next);
+            if (closeOnSelect)
+                setShown(false);
+        }, trigger: (0, jsx_runtime_1.jsxs)(search_list_1.Segment, { ...{ 'data-slot': 'phone-country-picker' }, disabled: disabled, open: shown, 
+            // Named by its hidden text, not an aria-label: the flag says nothing to
+            // a screen reader, and the words are the ones a translator sees.
+            gap: "$0.5", pl: "$2", pr: "$1", children: [(0, jsx_runtime_1.jsx)(Flag, { iso: picked?.value, override: picked?.flag }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14, color: "$hint" }), (0, jsx_runtime_1.jsx)(gui_1.VisuallyHidden, { children: picked ? `${name}: ${picked.label} +${picked.callingCode}` : name })] }) }));
+}

package/dist/backends/gui/phone-country-picker.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+export type PhoneCountry = {
+    /** ISO 3166-1 alpha-2, e.g. "FR". */
+    value: string;
+    /** The country's name in the reader's language. */
+    label: string;
+    /** Without the "+", e.g. "33". */
+    callingCode: string;
+    /** Overrides the regional-indicator flag. */
+    flag?: ReactNode;
+    disabled?: boolean;
+};
+export type PhoneCountryPickerProps = {
+    countries: PhoneCountry[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (iso: string | null) => void;
+    closeOnSelect?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** The segment's name to assistive technology, before the picked country. */
+    label?: string;
+    searchLabel?: string;
+    emptyLabel?: string;
+};
+/** The 16×12 flag box, 2px corners; a globe when there is no country. */
+export declare function Flag({ iso, override }: {
+    iso?: string | null;
+    override?: ReactNode;
+}): import("react").JSX.Element;
+export declare function PhoneCountryPicker({ countries, value, defaultValue, onValueChange, closeOnSelect, open, defaultOpen, onOpenChange, disabled, label: name, searchLabel, emptyLabel, }: PhoneCountryPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=phone-country-picker.d.ts.map

package/dist/backends/gui/phone-country-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-country-picker.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/phone-country-picker.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD,MAAM,MAAM,YAAY,GAAG;IACzB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,EAAE,YAAY,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,yEAAyE;AACzE,wBAAgB,IAAI,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAepF;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,aAAoB,EACpB,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,QAAgB,EAChB,KAAK,EAAE,IAA6B,EACpC,WAAgC,EAChC,UAA+B,GAChC,EAAE,uBAAuB,+BAmDzB"}

package/dist/backends/gui/phone-country-picker.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PhoneCountryPicker — the calling code at the start of a phone field.
+ *
+ *   <InputGroup>
+ *     <PhoneCountryPicker countries={list} value={iso} onValueChange={setIso} />
+ *     <Input value={number} onChangeText={setNumber} inputMode="tel" />
+ *   </InputGroup>
+ *
+ * A segment of the field (`Segment`) showing the country's flag and a chevron;
+ * the list it opens is found by country name, ISO code and calling code, with
+ * or without the "+". The picked country is named in a visually hidden label,
+ * since a flag alone says nothing to a screen reader. Parsing and validating the
+ * number belong to the field layer, not here. Data-free: the caller passes the
+ * countries and their calling codes.
+ *
+ * Flags are regional-indicator text (`flag`), drawn by the platform. Anatomy
+ * after twenty-ui's PhoneCountryPicker (MIT, NOTICE): 8px before the flag and 4
+ * after the chevron, a 16×12 flag with 2px corners, a globe when none.
+ */
+import { SizableText, VisuallyHidden, XStack } from '@hanzo/gui';
+import { ChevronDown, Globe } from '@hanzogui/lucide-icons-2';
+import { useState } from 'react';
+import { flag } from './flag.js';
+import { SearchList, Segment, useOpen } from './search-list.js';
+/** The 16×12 flag box, 2px corners; a globe when there is no country. */
+export function Flag({ iso, override }) {
+    const glyph = override ?? flag(iso);
+    return (_jsx(XStack, { width: 16, height: 12, rounded: "$2xs", overflow: "hidden", items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: glyph == null ? (_jsx(Globe, { size: 14, color: "$hint" })) : typeof glyph === 'string' ? (_jsx(SizableText, { size: "$2", lineHeight: 12, children: glyph })) : (glyph) }));
+}
+export function PhoneCountryPicker({ countries, value, defaultValue = null, onValueChange, closeOnSelect = true, open, defaultOpen, onOpenChange, disabled = false, label: name = 'Country calling code', searchLabel = 'Search countries', emptyLabel = 'No country found', }) {
+    const [own, setOwn] = useState(defaultValue);
+    const iso = value !== undefined ? value : own;
+    const [shown, setShown] = useOpen(open, defaultOpen, onOpenChange);
+    const picked = countries.find((c) => c.value === iso);
+    const options = countries.map((c) => ({
+        value: c.value,
+        label: c.label,
+        keywords: [c.value, c.callingCode, `+${c.callingCode}`],
+        disabled: c.disabled,
+        start: (_jsx(XStack, { pr: "$1", children: _jsx(Flag, { iso: c.value, override: c.flag }) })),
+        end: `+${c.callingCode}`,
+    }));
+    return (_jsx(SearchList, { open: shown && !disabled, onOpenChange: (next) => setShown(disabled ? false : next), options: options, value: iso, searchLabel: searchLabel, emptyLabel: emptyLabel, width: 280, onPick: (next) => {
+            if (value === undefined)
+                setOwn(next);
+            if (next !== iso)
+                onValueChange?.(next);
+            if (closeOnSelect)
+                setShown(false);
+        }, trigger: _jsxs(Segment, { ...{ 'data-slot': 'phone-country-picker' }, disabled: disabled, open: shown, 
+            // Named by its hidden text, not an aria-label: the flag says nothing to
+            // a screen reader, and the words are the ones a translator sees.
+            gap: "$0.5", pl: "$2", pr: "$1", children: [_jsx(Flag, { iso: picked?.value, override: picked?.flag }), _jsx(ChevronDown, { size: 14, color: "$hint" }), _jsx(VisuallyHidden, { children: picked ? `${name}: ${picked.label} +${picked.callingCode}` : name })] }) }));
+}
+//# sourceMappingURL=phone-country-picker.js.map

package/dist/backends/gui/phone-country-picker.js.map

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

package/dist/backends/gui/popover.cjs

@@ -14,8 +14,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
  * — while the compound API spells them on Content, as `sideOffset` and `align`.
  * One value, one owner: the root holds them, Content publishes into it.
+ *
+ * `size="sm"` is the record panel (twenty-ui's Popover, MIT, NOTICE): an 8px
+ * inset, sized to its content up to the room there is, 8px clear of its anchor.
+ * A `<Density value="compact">` makes it the default for a panel that names no
+ * size. The default stays the 16px-inset, 288-wide panel every surface has. The
+ * fill stays Hanzo's near-opaque panel — not twenty-ui's translucent glass.
+ * `arrow` adds a 12×6 pointer in the panel's own fill and edge.
  */
 const gui_1 = require("@hanzo/gui");
+const density_1 = require("./density.cjs");
 const react_1 = require("react");
 const portal_theme_1 = require("../../product/menu/portal-theme.cjs");
 const place_1 = require("./place.cjs");
@@ -26,7 +34,9 @@ const Publish = /* @__PURE__ */ (0, react_1.createContext)(null);
 /** Whether the panel this one opened from is solid. A list opened inside a solid
  *  panel stands on the same ground, so the pair reads as one surface. */
 const Solid = /* @__PURE__ */ (0, react_1.createContext)(false);
-function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
+function Popover({ offset, placement, ...props }) {
+    const density = (0, density_1.useDensity)();
+    offset ??= density === 'compact' ? 8 : DEFAULT_OFFSET;
     const [placed, setPlaced] = (0, react_1.useState)({});
     const publish = (0, react_1.useCallback)((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
     return ((0, jsx_runtime_1.jsx)(Publish.Provider, { value: publish, children: (0, jsx_runtime_1.jsx)(gui_1.Popover, { offset: placed.offset ?? offset, placement: (0, place_1.place)(placement ?? DEFAULT_SIDE, placed.align), ...props }) }));
@@ -37,12 +47,18 @@ const PopoverAnchor = gui_1.Popover.Anchor;
 exports.PopoverAnchor = PopoverAnchor;
 const PopoverClose = gui_1.Popover.Close;
 exports.PopoverClose = PopoverClose;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, solid, ...props }) => {
+const PopoverContent = ({ sideOffset, align, solid, size, arrow = false, children, ...props }) => {
     const themeName = (0, portal_theme_1.useThemeName)();
+    const density = (0, density_1.useDensity)();
     const publish = (0, react_1.useContext)(Publish);
     const inherited = (0, react_1.useContext)(Solid);
     const opaque = solid ?? inherited;
-    (0, react_1.useEffect)(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
-    return ((0, jsx_runtime_1.jsx)(Solid.Provider, { value: opaque, children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(gui_1.Popover.Content, { ...(0, slot_1.slot)('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), bg: opaque ? 'var(--popover)' : '$panel', borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }) }));
+    const small = (size ?? (density === 'compact' ? 'sm' : 'default')) === 'sm';
+    const offset = sideOffset ?? (density === 'compact' ? 8 : DEFAULT_OFFSET);
+    (0, react_1.useEffect)(() => publish?.({ offset, align }), [publish, offset, align]);
+    const ground = opaque ? 'var(--popover)' : '$panel';
+    return ((0, jsx_runtime_1.jsx)(Solid.Provider, { value: opaque, children: (0, jsx_runtime_1.jsx)(portal_theme_1.PortalTheme, { name: themeName, children: (0, jsx_runtime_1.jsx)(density_1.Density, { value: density, children: (0, jsx_runtime_1.jsxs)(gui_1.Popover.Content, { ...(0, slot_1.slot)('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), ...(small ? { 'data-size': 'sm' } : null), bg: ground, borderWidth: 1, borderColor: "$borderColor", rounded: "$4", ...(small
+                        ? { p: '$2', gap: '$1', maxW: 'var(--hanzogui-popper-available-width, 100vw)' }
+                        : { p: '$4', width: 288 }), ...props, children: [arrow ? (0, jsx_runtime_1.jsx)(gui_1.Popover.Arrow, { ...(0, slot_1.slot)('popover-arrow'), size: 8.5, bg: ground, borderWidth: 1, borderColor: "$borderColor" }) : null, children] }) }) }) }));
 };
 exports.PopoverContent = PopoverContent;

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

@@ -8,6 +8,13 @@
  * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
  * — while the compound API spells them on Content, as `sideOffset` and `align`.
  * One value, one owner: the root holds them, Content publishes into it.
+ *
+ * `size="sm"` is the record panel (twenty-ui's Popover, MIT, NOTICE): an 8px
+ * inset, sized to its content up to the room there is, 8px clear of its anchor.
+ * A `<Density value="compact">` makes it the default for a panel that names no
+ * size. The default stays the 16px-inset, 288-wide panel every surface has. The
+ * fill stays Hanzo's near-opaque panel — not twenty-ui's translucent glass.
+ * `arrow` adds a 12×6 pointer in the panel's own fill and edge.
  */
 import { Popover as GuiPopover } from '@hanzo/gui';
 import { type ComponentProps } from 'react';
@@ -30,7 +37,11 @@ export type PopoverContentProps = ComponentProps<typeof GuiPopover.Content> & {
      * lit edge, and any popover opened from inside it is solid too.
      */
     solid?: boolean;
+    /** `sm`: an 8px inset, content-sized up to the room there is. Unset, the nearest `<Density>` decides. */
+    size?: 'default' | 'sm';
+    /** A 12×6 pointer toward the anchor, in the panel's fill (gui's arrow is a turned square: 8.5 across is 12 wide, 6 out). */
+    arrow?: boolean;
 };
-declare const PopoverContent: ({ sideOffset, align, solid, ...props }: PopoverContentProps) => import("react").JSX.Element;
+declare const PopoverContent: ({ sideOffset, align, solid, size, arrow, children, ...props }: PopoverContentProps) => import("react").JSX.Element;
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
 //# sourceMappingURL=popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAM3C,YAAY,EAAE,KAAK,EAAE,CAAA;AAWrB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAuB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAY9E;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,cAAc,2CAA6D,mBAAmB,gCAuBnG,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/popover.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAA;AAEd,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAM3C,YAAY,EAAE,KAAK,EAAE,CAAA;AAWrB,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,QAAQ,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAElG,iBAAS,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAc7D;AAED,QAAA,MAAM,cAAc,EAAE,OAAO,UAAU,CAAC,OAA4B,CAAA;AACpE,QAAA,MAAM,aAAa,EAAE,OAAO,UAAU,CAAC,MAA0B,CAAA;AACjE,QAAA,MAAM,YAAY,EAAE,OAAO,UAAU,CAAC,KAAwB,CAAA;AAE9D,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,yGAAyG;IACzG,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,4HAA4H;IAC5H,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,cAAc,kEAA2E,mBAAmB,gCAkCjH,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,CAAA"}

package/dist/backends/gui/popover.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Popover — floating panel anchored to a trigger.
  *
@@ -10,8 +10,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * gui keeps BOTH placement facts on the popper ROOT — `offset` and `placement`
  * — while the compound API spells them on Content, as `sideOffset` and `align`.
  * One value, one owner: the root holds them, Content publishes into it.
+ *
+ * `size="sm"` is the record panel (twenty-ui's Popover, MIT, NOTICE): an 8px
+ * inset, sized to its content up to the room there is, 8px clear of its anchor.
+ * A `<Density value="compact">` makes it the default for a panel that names no
+ * size. The default stays the 16px-inset, 288-wide panel every surface has. The
+ * fill stays Hanzo's near-opaque panel — not twenty-ui's translucent glass.
+ * `arrow` adds a 12×6 pointer in the panel's own fill and edge.
  */
 import { Popover as GuiPopover } from '@hanzo/gui';
+import { Density, useDensity } from './density.js';
 import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
 import { PortalTheme, useThemeName } from '../../product/menu/portal-theme.js';
 import { place } from './place.js';
@@ -22,7 +30,9 @@ const Publish = /* @__PURE__ */ createContext(null);
 /** Whether the panel this one opened from is solid. A list opened inside a solid
  *  panel stands on the same ground, so the pair reads as one surface. */
 const Solid = /* @__PURE__ */ createContext(false);
-function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
+function Popover({ offset, placement, ...props }) {
+    const density = useDensity();
+    offset ??= density === 'compact' ? 8 : DEFAULT_OFFSET;
     const [placed, setPlaced] = useState({});
     const publish = useCallback((p) => setPlaced((prev) => ({ ...prev, ...p })), []);
     return (_jsx(Publish.Provider, { value: publish, children: _jsx(GuiPopover, { offset: placed.offset ?? offset, placement: place(placement ?? DEFAULT_SIDE, placed.align), ...props }) }));
@@ -30,13 +40,19 @@ function Popover({ offset = DEFAULT_OFFSET, placement, ...props }) {
 const PopoverTrigger = GuiPopover.Trigger;
 const PopoverAnchor = GuiPopover.Anchor;
 const PopoverClose = GuiPopover.Close;
-const PopoverContent = ({ sideOffset = DEFAULT_OFFSET, align, solid, ...props }) => {
+const PopoverContent = ({ sideOffset, align, solid, size, arrow = false, children, ...props }) => {
     const themeName = useThemeName();
+    const density = useDensity();
     const publish = useContext(Publish);
     const inherited = useContext(Solid);
     const opaque = solid ?? inherited;
-    useEffect(() => publish?.({ offset: sideOffset, align }), [publish, sideOffset, align]);
-    return (_jsx(Solid.Provider, { value: opaque, children: _jsx(PortalTheme, { name: themeName, children: _jsx(GuiPopover.Content, { ...slot('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), bg: opaque ? 'var(--popover)' : '$panel', borderWidth: 1, borderColor: "$borderColor", rounded: "$4", p: "$4", width: 288, ...props }) }) }));
+    const small = (size ?? (density === 'compact' ? 'sm' : 'default')) === 'sm';
+    const offset = sideOffset ?? (density === 'compact' ? 8 : DEFAULT_OFFSET);
+    useEffect(() => publish?.({ offset, align }), [publish, offset, align]);
+    const ground = opaque ? 'var(--popover)' : '$panel';
+    return (_jsx(Solid.Provider, { value: opaque, children: _jsx(PortalTheme, { name: themeName, children: _jsx(Density, { value: density, children: _jsxs(GuiPopover.Content, { ...slot('popover-content'), ...(opaque ? { 'data-material': 'solid' } : null), ...(small ? { 'data-size': 'sm' } : null), bg: ground, borderWidth: 1, borderColor: "$borderColor", rounded: "$4", ...(small
+                        ? { p: '$2', gap: '$1', maxW: 'var(--hanzogui-popper-available-width, 100vw)' }
+                        : { p: '$4', width: 288 }), ...props, children: [arrow ? _jsx(GuiPopover.Arrow, { ...slot('popover-arrow'), size: 8.5, bg: ground, borderWidth: 1, borderColor: "$borderColor" }) : null, children] }) }) }) }));
 };
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
 //# sourceMappingURL=popover.js.map

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

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

package/dist/backends/gui/progress-ring.cjs

@@ -0,0 +1,38 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressRing = ProgressRing;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ProgressRing — a small circular progress, for a row that has no room for a
+ * bar: the context left in a composer, a sync that is 40% through, a metric.
+ *
+ * After twenty-ui's ProgressRing (MIT, NOTICE): 14px (`sm`) or 16px (`md`), a
+ * 2px stroke starting at 12 o'clock, the track on the strong edge rung and the
+ * indicator on the accent (`--primary`, monochrome until an org picks one).
+ * The indicator's dash eases over 300ms with round caps (square at 0%, where a
+ * round cap would draw a dot). `value={null}` shows a quarter and turns once
+ * every 1.5s (`data-motion="orbit"`, still under reduced motion).
+ *
+ * Children are a label drawn to the LEFT of the ring, 8px from it — a value
+ * ("40%") or a name — and also name the progressbar for assistive technology
+ * unless `aria-label` says otherwise.
+ *
+ * A plain <svg>, as Donut and the grid patterns are: the ring is drawn, not
+ * laid out, and gui tokens reach it as the custom properties gui emits.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const slot_1 = require("./slot.cjs");
+const SIZE = { sm: 14, md: 16 };
+const STROKE = 2;
+function ProgressRing({ value, size = 'md', barColor = 'var(--primary)', children, 'aria-label': label, ...props }) {
+    const id = (0, react_1.useId)();
+    const d = SIZE[size];
+    const r = (d - STROKE) / 2;
+    const circ = 2 * Math.PI * r;
+    const indeterminate = value === null;
+    const v = indeterminate ? 25 : Math.max(0, Math.min(100, value));
+    const offset = circ * (1 - v / 100);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('progress-ring'), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : v, "aria-label": label, "aria-labelledby": label || !children ? undefined : `${id}-label`, display: "inline-flex", items: "center", gap: "$2", shrink: 0, ...props, children: [children ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: `${id}-label`, size: "$1", color: "$ink", numberOfLines: 1, textAlign: "right", children: children })) : null, (0, jsx_runtime_1.jsxs)("svg", { width: d, height: d, viewBox: `0 0 ${d} ${d}`, "aria-hidden": true, "data-motion": indeterminate ? 'orbit' : undefined, style: { flexShrink: 0, transform: 'rotate(-90deg)', transformOrigin: 'center' }, children: [(0, jsx_runtime_1.jsx)("circle", { cx: d / 2, cy: d / 2, r: r, fill: "none", stroke: "var(--rim)", strokeWidth: STROKE }), (0, jsx_runtime_1.jsx)("circle", { cx: d / 2, cy: d / 2, r: r, fill: "none", stroke: barColor, strokeWidth: STROKE, strokeDasharray: circ, strokeDashoffset: offset, strokeLinecap: v > 0 ? 'round' : 'butt', style: { transition: 'stroke-dashoffset 300ms ease' } })] })] }));
+}

package/dist/backends/gui/progress-ring.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ProgressRing — a small circular progress, for a row that has no room for a
+ * bar: the context left in a composer, a sync that is 40% through, a metric.
+ *
+ * After twenty-ui's ProgressRing (MIT, NOTICE): 14px (`sm`) or 16px (`md`), a
+ * 2px stroke starting at 12 o'clock, the track on the strong edge rung and the
+ * indicator on the accent (`--primary`, monochrome until an org picks one).
+ * The indicator's dash eases over 300ms with round caps (square at 0%, where a
+ * round cap would draw a dot). `value={null}` shows a quarter and turns once
+ * every 1.5s (`data-motion="orbit"`, still under reduced motion).
+ *
+ * Children are a label drawn to the LEFT of the ring, 8px from it — a value
+ * ("40%") or a name — and also name the progressbar for assistive technology
+ * unless `aria-label` says otherwise.
+ *
+ * A plain <svg>, as Donut and the grid patterns are: the ring is drawn, not
+ * laid out, and gui tokens reach it as the custom properties gui emits.
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+declare const SIZE: {
+    readonly sm: 14;
+    readonly md: 16;
+};
+export type ProgressRingProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    /** 0–100, or `null` for indeterminate. */
+    value: number | null;
+    size?: keyof typeof SIZE;
+    /** The indicator's colour, any CSS colour or custom property. */
+    barColor?: string;
+    /** A label drawn left of the ring; names it unless `aria-label` is given. */
+    children?: ReactNode;
+    'aria-label'?: string;
+};
+export declare function ProgressRing({ value, size, barColor, children, 'aria-label': label, ...props }: ProgressRingProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=progress-ring.d.ts.map

package/dist/backends/gui/progress-ring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-ring.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/progress-ring.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlE,QAAA,MAAM,IAAI;aAAK,EAAE,EAAE,EAAE;aAAE,EAAE,EAAE,EAAE;CAAW,CAAA;AAGxC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,0CAA0C;IAC1C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,IAAI,CAAA;IACxB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAW,EACX,QAA2B,EAC3B,QAAQ,EACR,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAoDnB"}

package/dist/backends/gui/progress-ring.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ProgressRing — a small circular progress, for a row that has no room for a
+ * bar: the context left in a composer, a sync that is 40% through, a metric.
+ *
+ * After twenty-ui's ProgressRing (MIT, NOTICE): 14px (`sm`) or 16px (`md`), a
+ * 2px stroke starting at 12 o'clock, the track on the strong edge rung and the
+ * indicator on the accent (`--primary`, monochrome until an org picks one).
+ * The indicator's dash eases over 300ms with round caps (square at 0%, where a
+ * round cap would draw a dot). `value={null}` shows a quarter and turns once
+ * every 1.5s (`data-motion="orbit"`, still under reduced motion).
+ *
+ * Children are a label drawn to the LEFT of the ring, 8px from it — a value
+ * ("40%") or a name — and also name the progressbar for assistive technology
+ * unless `aria-label` says otherwise.
+ *
+ * A plain <svg>, as Donut and the grid patterns are: the ring is drawn, not
+ * laid out, and gui tokens reach it as the custom properties gui emits.
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { useId } from 'react';
+import { slot } from './slot.js';
+const SIZE = { sm: 14, md: 16 };
+const STROKE = 2;
+export function ProgressRing({ value, size = 'md', barColor = 'var(--primary)', children, 'aria-label': label, ...props }) {
+    const id = useId();
+    const d = SIZE[size];
+    const r = (d - STROKE) / 2;
+    const circ = 2 * Math.PI * r;
+    const indeterminate = value === null;
+    const v = indeterminate ? 25 : Math.max(0, Math.min(100, value));
+    const offset = circ * (1 - v / 100);
+    return (_jsxs(XStack, { ...slot('progress-ring'), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": indeterminate ? undefined : v, "aria-label": label, "aria-labelledby": label || !children ? undefined : `${id}-label`, display: "inline-flex", items: "center", gap: "$2", shrink: 0, ...props, children: [children ? (_jsx(SizableText, { id: `${id}-label`, size: "$1", color: "$ink", numberOfLines: 1, textAlign: "right", children: children })) : null, _jsxs("svg", { width: d, height: d, viewBox: `0 0 ${d} ${d}`, "aria-hidden": true, "data-motion": indeterminate ? 'orbit' : undefined, style: { flexShrink: 0, transform: 'rotate(-90deg)', transformOrigin: 'center' }, children: [_jsx("circle", { cx: d / 2, cy: d / 2, r: r, fill: "none", stroke: "var(--rim)", strokeWidth: STROKE }), _jsx("circle", { cx: d / 2, cy: d / 2, r: r, fill: "none", stroke: barColor, strokeWidth: STROKE, strokeDasharray: circ, strokeDashoffset: offset, strokeLinecap: v > 0 ? 'round' : 'butt', style: { transition: 'stroke-dashoffset 300ms ease' } })] })] }));
+}
+//# sourceMappingURL=progress-ring.js.map

package/dist/backends/gui/progress-ring.js.map

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

package/dist/backends/gui/progress.cjs

@@ -3,14 +3,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Progress = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/** Progress — determinate bar; `value` is 0–100. */
+/**
+ * Progress — a horizontal bar; `value` is 0–100, or `null` for "working, how
+ * far unknown".
+ *
+ * Two shapes. `pill` (the default, unchanged) is a rounded bar on the edge
+ * track. `line` is the record kit's (twenty-ui's ProgressBar, MIT — NOTICE): no
+ * track unless asked, square ends unless `ends="round"`, the ink as the fill, and a
+ * minimum fill of min(12px, 50%) for any value strictly between 0 and 100 — a
+ * job 1% done is visibly started, which a 3px sliver is not. Its width eases
+ * over 300ms.
+ *
+ * `value={null}` on either draws the indeterminate sweep: a quarter-width bar
+ * crossing the track every 1.5s (`data-motion="sweep"`, stopped under reduced
+ * motion). `size` is the thickness, `md` 8 (both shapes' default) or `sm` 6.
+ */
 const gui_1 = require("@hanzo/gui");
 const sx_1 = require("../../sx.cjs");
 const slot_1 = require("./slot.cjs");
-const Progress = ({ value, indicatorClassName, indicatorColor, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Progress, { ...(0, slot_1.slot)('progress'), value: value ?? 0, height: 8, width: "100%", bg: "$edge", rounded: "$10", overflow: "hidden", ...props, children: (0, jsx_runtime_1.jsx)(gui_1.Progress.Indicator, { ...(0, slot_1.slot)('progress-indicator'), 
-        // Same reason as the slider's fill: `$ink` is the foreground rung, and
-        // a type colour stretched across a bar is a lit slab. 6.93:1 over the
-        // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
-        // longer competing with the text beside it for attention.
-        bg: indicatorColor ?? '$soft', ...(0, sx_1.sx)(indicatorClassName) }) }));
+const HEIGHT = { sm: 6, md: 8 };
+const Progress = ({ value, indicatorClassName, indicatorColor, variant = 'pill', size = 'md', ends = 'square', track = false, ...props }) => {
+    const indeterminate = value === null;
+    const line = variant === 'line';
+    const v = Math.max(0, Math.min(100, value ?? 0));
+    const rounded = ends === 'round';
+    return ((0, jsx_runtime_1.jsx)(gui_1.Progress, { ...(0, slot_1.slot)('progress'), "data-variant": variant, value: indeterminate ? null : v, height: HEIGHT[size], width: "100%", bg: line ? (track ? '$edge' : 'transparent') : '$edge', rounded: line && !rounded ? 0 : '$10', overflow: "hidden", ...props, children: indeterminate ? ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('progress-indicator'), "data-motion": "sweep", width: "25%", height: "100%", rounded: line && !rounded ? 0 : '$10', bg: indicatorColor ?? (line ? '$ink' : '$soft'), ...(0, sx_1.sx)(indicatorClassName) })) : line ? ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('progress-indicator'), height: "100%", minW: v > 0 && v < 100 ? 'min(12px, 50%)' : 0, rounded: rounded ? '$10' : 0, bg: indicatorColor ?? '$ink', 
+            // Inline, as Textarea's grown height is: a style prop would mint an
+            // atomic class per value, and no sheet can ship a hundred of them.
+            style: { width: `${v}%`, transition: 'width 300ms linear' }, ...(0, sx_1.sx)(indicatorClassName) })) : ((0, jsx_runtime_1.jsx)(gui_1.Progress.Indicator, { ...(0, slot_1.slot)('progress-indicator'), 
+            // Same reason as the slider's fill: `$ink` is the foreground rung, and
+            // a type colour stretched across a bar is a lit slab. 6.93:1 over the
+            // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
+            // longer competing with the text beside it for attention.
+            bg: indicatorColor ?? '$soft', ...(0, sx_1.sx)(indicatorClassName) })) }));
+};
 exports.Progress = Progress;

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

@@ -1,7 +1,21 @@
-/** Progress — determinate bar; `value` is 0–100. */
+/**
+ * Progress — a horizontal bar; `value` is 0–100, or `null` for "working, how
+ * far unknown".
+ *
+ * Two shapes. `pill` (the default, unchanged) is a rounded bar on the edge
+ * track. `line` is the record kit's (twenty-ui's ProgressBar, MIT — NOTICE): no
+ * track unless asked, square ends unless `ends="round"`, the ink as the fill, and a
+ * minimum fill of min(12px, 50%) for any value strictly between 0 and 100 — a
+ * job 1% done is visibly started, which a 3px sliver is not. Its width eases
+ * over 300ms.
+ *
+ * `value={null}` on either draws the indeterminate sweep: a quarter-width bar
+ * crossing the track every 1.5s (`data-motion="sweep"`, stopped under reduced
+ * motion). `size` is the thickness, `md` 8 (both shapes' default) or `sm` 6.
+ */
 import { Progress as GuiProgress } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
-export type ProgressProps = ComponentProps<typeof GuiProgress> & {
+export type ProgressProps = Omit<ComponentProps<typeof GuiProgress>, 'size'> & {
     /**
      * Class for the moving bar, not the track. Callers colour the bar by
      * threshold (green/amber/red), which the track's own className cannot express
@@ -11,7 +25,15 @@ export type ProgressProps = ComponentProps<typeof GuiProgress> & {
     indicatorClassName?: string;
     /** The moving bar's colour, a theme token: a status rung where the value is a state. */
     indicatorColor?: ComponentProps<typeof GuiProgress.Indicator>['bg'];
+    /** `pill` (default) or the record kit's `line`. */
+    variant?: 'pill' | 'line';
+    /** Thickness: `md` 8 (default) or `sm` 6. */
+    size?: 'sm' | 'md';
+    /** `line` only: `square` ends (default) or `round`. A name of its own, since `rounded` is gui's corner style. */
+    ends?: 'square' | 'round';
+    /** `line` only: draw the track under the bar. */
+    track?: boolean;
 };
-declare const Progress: ({ value, indicatorClassName, indicatorColor, ...props }: ProgressProps) => import("react").JSX.Element;
+declare const Progress: ({ value, indicatorClassName, indicatorColor, variant, size, ends, track, ...props }: ProgressProps) => import("react").JSX.Element;
 export { Progress };
 //# sourceMappingURL=progress.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/progress.tsx"],"names":[],"mappings":"AAEA,oDAAoD;AACpD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,YAAY,CAAA;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,GAAG;IAC/D;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wFAAwF;IACxF,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAA;CACpE,CAAA;AAED,QAAA,MAAM,QAAQ,4DAA6D,aAAa,gCAqBvF,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/progress.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAQ,MAAM,YAAY,CAAA;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG;IAC7E;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wFAAwF;IACxF,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAA;IACnE,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,iHAAiH;IACjH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,QAAA,MAAM,QAAQ,wFASX,aAAa,gCAoDf,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/backends/gui/progress.js

@@ -1,14 +1,38 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-/** Progress — determinate bar; `value` is 0–100. */
-import { Progress as GuiProgress } from '@hanzo/gui';
+/**
+ * Progress — a horizontal bar; `value` is 0–100, or `null` for "working, how
+ * far unknown".
+ *
+ * Two shapes. `pill` (the default, unchanged) is a rounded bar on the edge
+ * track. `line` is the record kit's (twenty-ui's ProgressBar, MIT — NOTICE): no
+ * track unless asked, square ends unless `ends="round"`, the ink as the fill, and a
+ * minimum fill of min(12px, 50%) for any value strictly between 0 and 100 — a
+ * job 1% done is visibly started, which a 3px sliver is not. Its width eases
+ * over 300ms.
+ *
+ * `value={null}` on either draws the indeterminate sweep: a quarter-width bar
+ * crossing the track every 1.5s (`data-motion="sweep"`, stopped under reduced
+ * motion). `size` is the thickness, `md` 8 (both shapes' default) or `sm` 6.
+ */
+import { Progress as GuiProgress, View } from '@hanzo/gui';
 import { sx } from '../../sx.js';
 import { slot } from './slot.js';
-const Progress = ({ value, indicatorClassName, indicatorColor, ...props }) => (_jsx(GuiProgress, { ...slot('progress'), value: value ?? 0, height: 8, width: "100%", bg: "$edge", rounded: "$10", overflow: "hidden", ...props, children: _jsx(GuiProgress.Indicator, { ...slot('progress-indicator'), 
-        // Same reason as the slider's fill: `$ink` is the foreground rung, and
-        // a type colour stretched across a bar is a lit slab. 6.93:1 over the
-        // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
-        // longer competing with the text beside it for attention.
-        bg: indicatorColor ?? '$soft', ...sx(indicatorClassName) }) }));
+const HEIGHT = { sm: 6, md: 8 };
+const Progress = ({ value, indicatorClassName, indicatorColor, variant = 'pill', size = 'md', ends = 'square', track = false, ...props }) => {
+    const indeterminate = value === null;
+    const line = variant === 'line';
+    const v = Math.max(0, Math.min(100, value ?? 0));
+    const rounded = ends === 'round';
+    return (_jsx(GuiProgress, { ...slot('progress'), "data-variant": variant, value: indeterminate ? null : v, height: HEIGHT[size], width: "100%", bg: line ? (track ? '$edge' : 'transparent') : '$edge', rounded: line && !rounded ? 0 : '$10', overflow: "hidden", ...props, children: indeterminate ? (_jsx(View, { ...slot('progress-indicator'), "data-motion": "sweep", width: "25%", height: "100%", rounded: line && !rounded ? 0 : '$10', bg: indicatorColor ?? (line ? '$ink' : '$soft'), ...sx(indicatorClassName) })) : line ? (_jsx(View, { ...slot('progress-indicator'), height: "100%", minW: v > 0 && v < 100 ? 'min(12px, 50%)' : 0, rounded: rounded ? '$10' : 0, bg: indicatorColor ?? '$ink', 
+            // Inline, as Textarea's grown height is: a style prop would mint an
+            // atomic class per value, and no sheet can ship a hundred of them.
+            style: { width: `${v}%`, transition: 'width 300ms linear' }, ...sx(indicatorClassName) })) : (_jsx(GuiProgress.Indicator, { ...slot('progress-indicator'), 
+            // Same reason as the slider's fill: `$ink` is the foreground rung, and
+            // a type colour stretched across a bar is a lit slab. 6.93:1 over the
+            // track against WCAG 1.4.11's 3:1 — legible with room to spare, and no
+            // longer competing with the text beside it for attention.
+            bg: indicatorColor ?? '$soft', ...sx(indicatorClassName) })) }));
+};
 export { Progress };
 //# sourceMappingURL=progress.js.map