@owlmeans/web-panel 0.1.18-rc.9 → 0.1.18

package/build/components/picker/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../../src/components/picker/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACrD,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACrD,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACrD,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACrD,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACrD,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACrD,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACrD,OAAO,EAAE,MAAM,gBAAgB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AAErD,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;AACzC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;AACzC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;AACzC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;AACzC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;AACzC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;AACzC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;AACzC,UAAU,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA"}

package/build/components/picker/icon-color-picker.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import type { IconColorPickerProps } from './types.js';
+/**
+ * The composite icon + colour picker — the standard editor of a mark a person chooses (a type's,
+ * a flow's, a label's). One trigger opens both halves: 24 swatches (plus a colour wheel and a hex
+ * field with `customColors`) and a searchable, categorized icon grid tinted in the chosen colour.
+ *
+ * Every pick commits at once: `onChange({ icon, color })` carries both halves as they now stand —
+ * a palette key or `#rrggbb`, a kebab-case lucide name; a half never chosen stays `undefined`. It
+ * opens as a popover from 768px up and as a bottom sheet below (`surface`), and stays open until
+ * Esc, a click outside or (on the sheet) Done.
+ */
+export declare const IconColorPicker: FC<IconColorPickerProps>;
+//# sourceMappingURL=icon-color-picker.d.ts.map

package/build/components/picker/icon-color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/picker/icon-color-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAMtD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAOnD,CAAA"}

package/build/components/picker/icon-color-picker.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PickerRoot } from './root.js';
+const present = (value) => value != null && value !== '' ? value : undefined;
+/**
+ * The composite icon + colour picker — the standard editor of a mark a person chooses (a type's,
+ * a flow's, a label's). One trigger opens both halves: 24 swatches (plus a colour wheel and a hex
+ * field with `customColors`) and a searchable, categorized icon grid tinted in the chosen colour.
+ *
+ * Every pick commits at once: `onChange({ icon, color })` carries both halves as they now stand —
+ * a palette key or `#rrggbb`, a kebab-case lucide name; a half never chosen stays `undefined`. It
+ * opens as a popover from 768px up and as a bottom sheet below (`surface`), and stays open until
+ * Esc, a click outside or (on the sheet) Done.
+ */
+export const IconColorPicker = ({ value, onChange, trigger = 'button', customColors = false, ...base }) => _jsx(PickerRoot, { ...base, mode: "both", trigger: trigger, customColors: customColors, closeOnPick: false, icon: value?.icon, color: value?.color, onIcon: icon => onChange({ icon, color: present(value?.color) }), onColor: color => onChange({ icon: present(value?.icon), color }) });
+//# sourceMappingURL=icon-color-picker.js.map

package/build/components/picker/icon-color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-color-picker.js","sourceRoot":"","sources":["../../../src/components/picker/icon-color-picker.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAEtC,MAAM,OAAO,GAAG,CAAC,KAAgC,EAAsB,EAAE,CACvE,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;AAEnD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAA6B,CACvD,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,IAAI,EAAE,EACtE,EAAE,CAAC,KAAC,UAAU,OACV,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EACtF,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EACtC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,EAChE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,GACjE,CAAA"}

package/build/components/picker/icon-picker.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { IconPickerProps } from './types.js';
+/**
+ * The icon half alone: a trigger opening the searchable, categorized grid (tinted in `color`).
+ * Commits a kebab-case lucide name on click and closes.
+ */
+export declare const IconPicker: FC<IconPickerProps>;
+//# sourceMappingURL=icon-picker.d.ts.map

package/build/components/picker/icon-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.d.ts","sourceRoot":"","sources":["../../../src/components/picker/icon-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAGjD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAIvC,CAAA"}

package/build/components/picker/icon-picker.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PickerRoot } from './root.js';
+/**
+ * The icon half alone: a trigger opening the searchable, categorized grid (tinted in `color`).
+ * Commits a kebab-case lucide name on click and closes.
+ */
+export const IconPicker = ({ value, onChange, color, trigger = 'button', ...base }) => _jsx(PickerRoot, { ...base, mode: "icon", trigger: trigger, closeOnPick: true, icon: value, color: color, onIcon: onChange, onColor: () => undefined });
+//# sourceMappingURL=icon-picker.js.map

package/build/components/picker/icon-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker.js","sourceRoot":"","sources":["../../../src/components/picker/icon-picker.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAEtC;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CACzG,KAAC,UAAU,OACL,IAAI,EAAE,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,QAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAC7E,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,GAC1C,CAAA"}

package/build/components/picker/index.d.ts

@@ -0,0 +1,11 @@
+export type * from './types.js';
+export * from './icon-color-picker.js';
+export * from './icon-picker.js';
+export * from './color-picker.js';
+export { ColorSwatches } from './swatches.js';
+export { IconGrid } from './grid.js';
+export * from './tile.js';
+export * from './dot.js';
+export * from './translate.js';
+export * from './i18n.js';
+//# sourceMappingURL=index.d.ts.map

package/build/components/picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/picker/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,YAAY,CAAA;AAE/B,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA"}

package/build/components/picker/index.js

@@ -0,0 +1,10 @@
+export * from './icon-color-picker.js';
+export * from './icon-picker.js';
+export * from './color-picker.js';
+export { ColorSwatches } from './swatches.js';
+export { IconGrid } from './grid.js';
+export * from './tile.js';
+export * from './dot.js';
+export * from './translate.js';
+export * from './i18n.js';
+//# sourceMappingURL=index.js.map

package/build/components/picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/picker/index.ts"],"names":[],"mappings":"AAEA,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,WAAW,CAAA"}

package/build/components/picker/panel.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { PickerPanelProps } from './types.local.js';
+/**
+ * A picker's content: a preview header (the mark as it will render, the title, the current choice
+ * — and on the sheet a 44px Done button), then the swatches and the icon grid, scrolling between a
+ * fixed header and the surface's edge.
+ */
+export declare const PickerPanel: FC<PickerPanelProps>;
+//# sourceMappingURL=panel.d.ts.map

package/build/components/picker/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../../src/components/picker/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAQxD;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2C5C,CAAA"}

package/build/components/picker/panel.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon } from 'lucide-react';
+import { cn } from '../../@/lib/utils.js';
+import { pickerColorHelper } from '../../picker/vocabulary.js';
+import { IconBrowser } from './grid.js';
+import { SwatchGrid } from './swatches.js';
+import { IconTile } from './tile.js';
+import { BODY, DONE, HAIRLINE, HEADER, HEADER_SUMMARY, HEADER_TITLE, ICON_GRID_PAD, SECTION, SECTION_TITLE, TRIGGER_EMPTY, } from './consts.local.js';
+/**
+ * A picker's content: a preview header (the mark as it will render, the title, the current choice
+ * — and on the sheet a 44px Done button), then the swatches and the icon grid, scrolling between a
+ * fixed header and the surface's edge.
+ */
+export const PickerPanel = ({ mode, icon, color, onIcon, onColor, onCustomColor, colors, icons, customColors, text, layout, title, onDone, searchRef, }) => {
+    const resolved = pickerColorHelper.resolve(color, colors);
+    const summary = text.summary(icon, resolved, mode) ?? text.text('nothing', 'Nothing chosen yet');
+    return _jsxs("div", { "data-picker-panel": true, className: "flex min-h-0 flex-1 flex-col", children: [_jsxs("div", { className: HEADER[layout], children: [mode === 'color'
+                        ? _jsx("span", { "aria-hidden": "true", style: pickerColorHelper.styleOf(color, colors), className: cn('size-12 shrink-0 rounded-full bg-(--pick-swatch)', HAIRLINE, resolved == null && 'opacity-40') })
+                        : (icon == null || icon === '') && resolved == null
+                            ? _jsx("span", { "aria-hidden": "true", className: cn(TRIGGER_EMPTY, 'size-12 rounded-xl [&>svg]:size-5'), children: _jsx(PlusIcon, {}) })
+                            : _jsx(IconTile, { icon: icon, color: color, colors: colors, size: "lg" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { "aria-hidden": "true", className: HEADER_TITLE, children: title }), _jsx("p", { "data-picker-summary": true, className: HEADER_SUMMARY, children: summary })] }), onDone != null && _jsx("button", { type: "button", "data-picker-done": true, "aria-label": text.text('done', 'Done'), onClick: onDone, className: DONE, children: text.text('done', 'Done') })] }), _jsxs("div", { "data-picker-scroll": true, className: BODY, children: [mode !== 'icon' && _jsxs("section", { className: cn(SECTION[layout], mode === 'color' && ICON_GRID_PAD[layout]), children: [mode === 'both' && _jsx("h3", { className: SECTION_TITLE, children: text.text('color', 'Colour') }), _jsx(SwatchGrid, { value: color, onChange: onColor, onCustomChange: onCustomColor, colors: colors, customColors: customColors, text: text, layout: layout, label: text.text('color', 'Colour') })] }), mode !== 'color' && _jsxs("section", { className: cn(SECTION[layout], ICON_GRID_PAD[layout]), children: [mode === 'both' && _jsx("h3", { className: SECTION_TITLE, children: text.text('icon', 'Icon') }), _jsx(IconBrowser, { value: icon, onChange: onIcon, color: color, colors: colors, icons: icons, text: text, layout: layout, label: text.text('icon', 'Icon'), searchRef: searchRef })] })] })] });
+};
+//# sourceMappingURL=panel.js.map

package/build/components/picker/panel.js.map

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

package/build/components/picker/root.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import type { PickerRootProps } from './types.local.js';
+/**
+ * The state every picker shares: open or closed, and on which surface.
+ *
+ * `surface="auto"` is decided when the picker OPENS — a popover from 768px up, a sheet below — and
+ * kept until it closes, so a resize or an on-screen keyboard never swaps the surface under the
+ * person's finger. Picks commit at once through `onIcon` / `onColor`; a single-purpose picker then
+ * closes, the composite stays open for its other half. On open, a fine pointer lands in the search
+ * field; anything else on the selected cell (no keyboard pops up on a phone).
+ */
+export declare const PickerRoot: FC<PickerRootProps>;
+//# sourceMappingURL=root.d.ts.map

package/build/components/picker/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/components/picker/root.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAUvD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA0D1C,CAAA"}

package/build/components/picker/root.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { PICKER_COLORS } from '../../picker/vocabulary/consts.js';
+import { PickerPanel } from './panel.js';
+import { PickerSurface } from './surface.js';
+import { PickerTrigger } from './trigger.js';
+import { makePickerText } from './text.js';
+import { FINE_POINTER_QUERY, POPOVER_QUERY } from './consts.local.js';
+const matches = (query) => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia(query).matches;
+/**
+ * The state every picker shares: open or closed, and on which surface.
+ *
+ * `surface="auto"` is decided when the picker OPENS — a popover from 768px up, a sheet below — and
+ * kept until it closes, so a resize or an on-screen keyboard never swaps the surface under the
+ * person's finger. Picks commit at once through `onIcon` / `onColor`; a single-purpose picker then
+ * closes, the composite stays open for its other half. On open, a fine pointer lands in the search
+ * field; anything else on the selected cell (no keyboard pops up on a phone).
+ */
+export const PickerRoot = ({ mode, icon, color, onIcon, onColor, colors = PICKER_COLORS, icons, customColors = false, trigger, closeOnPick, label, placeholder, disabled, surface = 'auto', translate, className, id, }) => {
+    const text = useMemo(() => makePickerText(translate), [translate]);
+    const [open, setOpen] = useState(false);
+    const [kind, setKind] = useState('popover');
+    const triggerRef = useRef(null);
+    const searchRef = useRef(null);
+    const title = label != null && label !== ''
+        ? label
+        : mode === 'both' ? text.text('label', 'Icon and colour')
+            : mode === 'icon' ? text.text('icon', 'Icon') : text.text('color', 'Colour');
+    const hint = placeholder ?? (mode === 'both' ? text.text('placeholder.both', 'Choose icon and colour')
+        : mode === 'icon' ? text.text('placeholder.icon', 'Choose an icon') : text.text('placeholder.color', 'Choose a colour'));
+    const show = () => {
+        if (disabled === true) {
+            return;
+        }
+        setKind(surface === 'auto' ? (matches(POPOVER_QUERY) ? 'popover' : 'sheet') : surface);
+        setOpen(true);
+    };
+    const picked = (apply) => (value) => {
+        apply(value);
+        if (closeOnPick) {
+            setOpen(false);
+        }
+    };
+    const onOpenFocus = (content) => {
+        const search = searchRef.current;
+        if (search != null && matches(FINE_POINTER_QUERY)) {
+            search.focus();
+            return;
+        }
+        ;
+        (content.querySelector('[data-roving-item][tabindex="0"]') ?? content).focus();
+    };
+    return _jsx(PickerSurface, { open: open, onOpenChange: setOpen, kind: kind, tall: mode !== 'color', title: title, onOpenFocus: onOpenFocus, onCloseFocus: () => triggerRef.current?.focus(), anchor: _jsx(PickerTrigger, { ref: triggerRef, mode: mode, variant: trigger, icon: icon, color: color, colors: colors, text: text, label: label, placeholder: hint, open: open, disabled: disabled, id: id, className: className, onOpen: show }), children: _jsx(PickerPanel, { mode: mode, icon: icon, color: color, onIcon: picked(onIcon), onColor: picked(onColor), onCustomColor: onColor, colors: colors, icons: icons, customColors: customColors, text: text, layout: kind, title: title, onDone: kind === 'sheet' ? () => setOpen(false) : undefined, searchRef: searchRef }) });
+};
+//# sourceMappingURL=root.js.map

package/build/components/picker/root.js.map

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

package/build/components/picker/roving.d.ts

@@ -0,0 +1,8 @@
+import type { RovingGrid, RovingGridOptions } from './types.local.js';
+/**
+ * Arrow-key focus across the buttons of a grid (or one row): a single tab stop, the arrows move
+ * within it — Left/Right along, Up/Down a whole row (counted from the layout, so it follows
+ * whatever the CSS grid wrapped to), Home/End to the ends. Enter and Space are the buttons' own.
+ */
+export declare const useRovingGrid: ({ count, selected, onExitUp, grid }: RovingGridOptions) => RovingGrid;
+//# sourceMappingURL=roving.d.ts.map

package/build/components/picker/roving.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving.d.ts","sourceRoot":"","sources":["../../../src/components/picker/roving.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAKrE;;;;GAIG;AACH,eAAO,MAAM,aAAa,wCAAgD,iBAAiB,KAAG,UAyD7F,CAAA"}

package/build/components/picker/roving.js

@@ -0,0 +1,62 @@
+import { useCallback, useRef, useState } from 'react';
+/** What marks a roving item inside the container. */
+const ITEM = '[data-roving-item]';
+/**
+ * Arrow-key focus across the buttons of a grid (or one row): a single tab stop, the arrows move
+ * within it — Left/Right along, Up/Down a whole row (counted from the layout, so it follows
+ * whatever the CSS grid wrapped to), Home/End to the ends. Enter and Space are the buttons' own.
+ */
+export const useRovingGrid = ({ count, selected, onExitUp, grid = true }) => {
+    const ref = useRef(null);
+    const [current, setCurrent] = useState(null);
+    const active = Math.min(Math.max(current ?? selected, 0), Math.max(count - 1, 0));
+    const items = () => Array.from(ref.current?.querySelectorAll(ITEM) ?? []);
+    const columnsOf = (list) => {
+        const top = list[0]?.offsetTop;
+        const first = list.findIndex(item => item.offsetTop !== top);
+        return first < 0 ? list.length : Math.max(first, 1);
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        const list = items();
+        const from = list.indexOf(event.target);
+        if (from < 0) {
+            return;
+        }
+        const columns = grid ? columnsOf(list) : list.length;
+        const step = {
+            ArrowRight: 1, ArrowLeft: -1, ...(grid ? { ArrowDown: columns, ArrowUp: -columns } : {}),
+        };
+        let to;
+        if (event.key === 'Home') {
+            to = 0;
+        }
+        else if (event.key === 'End') {
+            to = list.length - 1;
+        }
+        else if (event.key in step) {
+            to = from + step[event.key];
+            if (event.key === 'ArrowUp' && to < 0 && onExitUp != null) {
+                event.preventDefault();
+                onExitUp();
+                return;
+            }
+            to = Math.min(Math.max(to, 0), list.length - 1);
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        setCurrent(to);
+        list[to]?.focus();
+    };
+    const tabIndexOf = (index) => index === active ? 0 : -1;
+    const focusCurrent = useCallback(() => {
+        const list = items();
+        (list.find(item => item.tabIndex === 0) ?? list[0])?.focus();
+    }, []);
+    return { ref, onKeyDown, tabIndexOf, setCurrent, focusCurrent };
+};
+//# sourceMappingURL=roving.js.map

package/build/components/picker/roving.js.map

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

package/build/components/picker/surface.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+import type { PickerSurfaceProps } from './types.local.js';
+/**
+ * Where a picker's panel opens: a popover beside the trigger, or a sheet from the bottom edge.
+ *
+ * The popover is MODAL. That is what makes it work inside an application's own Dialog or Sheet:
+ * the topmost scroll lock and focus scope are its own, so the mouse wheel scrolls it and focus stays
+ * in it, where a non-modal one portalled outside the dialog is locked out of both. It keeps 12px off
+ * the viewport's edges and never grows past the space it has (`--radix-popover-content-available-height`),
+ * scrolling inside instead.
+ *
+ * The sheet has no close cross: a grab handle, the panel's own Done button, Esc, or a tap outside
+ * close it. Both surfaces state their own colours (`bg-popover text-popover-foreground`) — they are
+ * portalled to the document body and inherit nothing. Focus goes in on open and back to the trigger
+ * on close, by hand, because the trigger is an anchor rather than a Radix trigger.
+ */
+export declare const PickerSurface: FC<PickerSurfaceProps>;
+//# sourceMappingURL=surface.d.ts.map

package/build/components/picker/surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../../src/components/picker/surface.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAG1D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuChD,CAAA"}

package/build/components/picker/surface.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { cn } from '../../@/lib/utils.js';
+import { Popover, PopoverAnchor, PopoverContent } from '../../@/components/ui/popover.js';
+import { Sheet, SheetContent, SheetTitle } from '../../@/components/ui/sheet.js';
+import { GRAB, POPOVER, SHEET, TALL } from './consts.local.js';
+/**
+ * Where a picker's panel opens: a popover beside the trigger, or a sheet from the bottom edge.
+ *
+ * The popover is MODAL. That is what makes it work inside an application's own Dialog or Sheet:
+ * the topmost scroll lock and focus scope are its own, so the mouse wheel scrolls it and focus stays
+ * in it, where a non-modal one portalled outside the dialog is locked out of both. It keeps 12px off
+ * the viewport's edges and never grows past the space it has (`--radix-popover-content-available-height`),
+ * scrolling inside instead.
+ *
+ * The sheet has no close cross: a grab handle, the panel's own Done button, Esc, or a tap outside
+ * close it. Both surfaces state their own colours (`bg-popover text-popover-foreground`) — they are
+ * portalled to the document body and inherit nothing. Focus goes in on open and back to the trigger
+ * on close, by hand, because the trigger is an anchor rather than a Radix trigger.
+ */
+export const PickerSurface = ({ open, onOpenChange, kind, tall, anchor, title, onOpenFocus, onCloseFocus, children }) => {
+    const popover = useRef(null);
+    const sheet = useRef(null);
+    const focusIn = (content) => (event) => {
+        event.preventDefault();
+        if (content != null) {
+            onOpenFocus(content);
+        }
+    };
+    const focusBack = (event) => {
+        event.preventDefault();
+        onCloseFocus();
+    };
+    return _jsxs(_Fragment, { children: [_jsxs(Popover, { open: open && kind === 'popover', onOpenChange: onOpenChange, modal: true, children: [_jsx(PopoverAnchor, { asChild: true, children: anchor }), _jsx(PopoverContent, { ref: popover, "data-picker-surface": "popover", "aria-label": title, align: "start", sideOffset: 6, collisionPadding: 12, onOpenAutoFocus: event => focusIn(popover.current)(event), onCloseAutoFocus: focusBack, className: cn(POPOVER, tall && TALL.popover), children: kind === 'popover' && children })] }), _jsx(Sheet, { open: open && kind === 'sheet', onOpenChange: onOpenChange, children: _jsxs(SheetContent, { ref: sheet, side: "bottom", showCloseButton: false, "aria-describedby": undefined, "data-picker-surface": "sheet", onOpenAutoFocus: event => focusIn(sheet.current)(event), onCloseAutoFocus: focusBack, className: cn(SHEET, tall && TALL.sheet), children: [_jsx(SheetTitle, { className: "sr-only", children: title }), _jsx("div", { "aria-hidden": "true", className: GRAB }), kind === 'sheet' && children] }) })] });
+};
+//# sourceMappingURL=surface.js.map

package/build/components/picker/surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"surface.js","sourceRoot":"","sources":["../../../src/components/picker/surface.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA;AACzF,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAA;AAE9D;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B,CACnD,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,EACtF,EAAE;IACF,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IACnD,MAAM,KAAK,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IAEjD,MAAM,OAAO,GAAG,CAAC,OAA8B,EAAE,EAAE,CAAC,CAAC,KAAY,EAAQ,EAAE;QACzE,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;YACpB,WAAW,CAAC,OAAO,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,CAAA;IACD,MAAM,SAAS,GAAG,CAAC,KAAY,EAAQ,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,YAAY,EAAE,CAAA;IAChB,CAAC,CAAA;IAED,OAAO,8BACL,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,IAAI,IAAI,KAAK,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,mBAC1E,KAAC,aAAa,IAAC,OAAO,kBAAE,MAAM,GAAiB,EAC/C,KAAC,cAAc,IACb,GAAG,EAAE,OAAO,yBAAsB,SAAS,gBAAa,KAAK,EAC7D,KAAK,EAAC,OAAO,EAAC,UAAU,EAAE,CAAC,EAAE,gBAAgB,EAAE,EAAE,EACjD,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE,gBAAgB,EAAE,SAAS,EACtF,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,YAC5C,IAAI,KAAK,SAAS,IAAI,QAAQ,GAAkB,IAC1C,EACV,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,IAAI,IAAI,KAAK,OAAO,EAAE,YAAY,EAAE,YAAY,YAC/D,MAAC,YAAY,IACX,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,eAAe,EAAE,KAAK,sBAAoB,SAAS,yBAAsB,OAAO,EAC1G,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE,gBAAgB,EAAE,SAAS,EACpF,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,aAExC,KAAC,UAAU,IAAC,SAAS,EAAC,SAAS,YAAE,KAAK,GAAc,EACpD,6BAAiB,MAAM,EAAC,SAAS,EAAE,IAAI,GAAI,EAC1C,IAAI,KAAK,OAAO,IAAI,QAAQ,IAChB,GACT,IACP,CAAA;AACL,CAAC,CAAA"}

package/build/components/picker/swatches/custom.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { CustomColorProps } from '../types.local.js';
+/**
+ * The opt-in custom colour: a row that opens a colour wheel (react-colorful — accessible sliders,
+ * touch) and a hex field. The wheel commits as it moves, like a native colour input; the field
+ * commits a full `#rrggbb` while typing and a short `#rgb` on Enter or blur, always normalized to
+ * lowercase six digits. Anything else marks the field invalid and changes nothing.
+ */
+export declare const CustomColor: FC<CustomColorProps>;
+//# sourceMappingURL=custom.d.ts.map

package/build/components/picker/swatches/custom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom.d.ts","sourceRoot":"","sources":["../../../../src/components/picker/swatches/custom.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,EAAE,EAAiB,MAAM,OAAO,CAAA;AAK3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAMzD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA2F5C,CAAA"}

package/build/components/picker/swatches/custom.js

@@ -0,0 +1,65 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { ChevronDownIcon } from 'lucide-react';
+import { HexColorPicker } from 'react-colorful';
+import { cn } from '../../../@/lib/utils.js';
+import { pickerColorHelper } from '../../../picker/vocabulary.js';
+import { CUSTOM_DISC, CUSTOM_PANEL, CUSTOM_ROW, CUSTOM_START, FIELD, FIELD_ERROR, FULL_HEX, HAIRLINE, HEX_FIELD, RAINBOW, SWATCH_SELECTED, WHEEL_STYLE, } from '../consts.local.js';
+/**
+ * The opt-in custom colour: a row that opens a colour wheel (react-colorful — accessible sliders,
+ * touch) and a hex field. The wheel commits as it moves, like a native colour input; the field
+ * commits a full `#rrggbb` while typing and a short `#rgb` on Enter or blur, always normalized to
+ * lowercase six digits. Anything else marks the field invalid and changes nothing.
+ */
+export const CustomColor = ({ value, onChange, text }) => {
+    const [open, setOpen] = useState(value != null);
+    const [draft, setDraft] = useState(value?.key ?? '');
+    const [checked, setChecked] = useState(false);
+    const typing = useRef(false);
+    const panelId = useId();
+    const errorId = useId();
+    // Follow the committed value, but never under the person's fingers.
+    useEffect(() => {
+        if (!typing.current) {
+            setDraft(value?.key ?? '');
+        }
+    }, [value?.key]);
+    const normalized = pickerColorHelper.normalizeHex(draft);
+    const invalid = checked && draft.trim() !== '' && normalized == null;
+    const label = text.text('custom', 'Custom colour');
+    const commit = (hex) => {
+        if (hex !== value?.key) {
+            onChange(hex);
+        }
+    };
+    const onText = (event) => {
+        const next = event.target.value;
+        setDraft(next);
+        setChecked(false);
+        const full = FULL_HEX.test(next.trim()) ? pickerColorHelper.normalizeHex(next) : null;
+        if (full != null) {
+            commit(full);
+        }
+    };
+    const settle = () => {
+        setChecked(true);
+        if (normalized != null) {
+            setDraft(normalized);
+            commit(normalized);
+        }
+    };
+    const onKey = (event) => {
+        if (event.key === 'Enter') {
+            // Never the enclosing form's submit.
+            event.preventDefault();
+            settle();
+        }
+    };
+    const onWheel = (hex) => {
+        setDraft(hex);
+        setChecked(false);
+        commit(hex);
+    };
+    return _jsxs(_Fragment, { children: [_jsxs("button", { type: "button", "data-picker-color": "custom", "data-selected": value != null || undefined, "aria-label": value != null ? `${label}: ${value.label}` : label, "aria-expanded": open, "aria-controls": open ? panelId : undefined, onClick: () => setOpen(!open), className: CUSTOM_ROW, children: [_jsx("span", { "aria-hidden": "true", style: value != null ? pickerColorHelper.styleOf(value.key) : undefined, className: cn(CUSTOM_DISC, HAIRLINE, value != null ? 'bg-(--pick-swatch)' : RAINBOW, value != null && SWATCH_SELECTED) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), value != null && _jsx("span", { className: "font-mono text-xs text-muted-foreground", children: value.label }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn('size-4 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none', open && 'rotate-180') })] }), open && _jsxs("div", { id: panelId, className: CUSTOM_PANEL, children: [_jsx(HexColorPicker, { color: normalized ?? value?.key ?? CUSTOM_START, onChange: onWheel, style: WHEEL_STYLE }), _jsx("input", { "data-picker-hex": true, type: "text", inputMode: "text", autoComplete: "off", autoCapitalize: "off", spellCheck: false, enterKeyHint: "done", maxLength: 7, placeholder: CUSTOM_START, "aria-label": text.text('hex', 'Hex colour'), "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : undefined, value: draft, onChange: onText, onKeyDown: onKey, onFocus: () => { typing.current = true; }, onBlur: () => { typing.current = false; settle(); }, className: cn(FIELD, HEX_FIELD) }), invalid && _jsx("p", { id: errorId, className: FIELD_ERROR, children: text.text('invalidHex', 'Enter a colour like #3b82f6') })] })] });
+};
+//# sourceMappingURL=custom.js.map

package/build/components/picker/swatches/custom.js.map

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

package/build/components/picker/swatches.d.ts

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+import type { ColorSwatchesProps } from './types.js';
+import type { SwatchGridProps } from './types.local.js';
+/**
+ * The swatch grid every picker shares, laid out for its surface: twelve to a row in a popover,
+ * as many 44px cells as fit in a sheet or below 768px. One tab stop; the arrows move in two
+ * dimensions. A swatch is a `<button type="button">` named by its colour and pressed while chosen.
+ */
+export declare const SwatchGrid: FC<SwatchGridProps>;
+/**
+ * The colour swatches inline — for a dialog or sheet the application already owns. Commits on
+ * click; `customColors` adds the colour wheel and hex field. Strings through `translate` (English
+ * without it — never an implicit i18n read).
+ */
+export declare const ColorSwatches: FC<ColorSwatchesProps>;
+//# sourceMappingURL=swatches.d.ts.map

package/build/components/picker/swatches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatches.d.ts","sourceRoot":"","sources":["../../../src/components/picker/swatches.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AACpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAMvD;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAiC1C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAShD,CAAA"}

package/build/components/picker/swatches.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cn } from '../../@/lib/utils.js';
+import { pickerColorHelper } from '../../picker/vocabulary.js';
+import { PICKER_COLORS } from '../../picker/vocabulary/consts.js';
+import { CustomColor } from './swatches/custom.js';
+import { useRovingGrid } from './roving.js';
+import { makePickerText } from './text.js';
+import { PICK_SCOPE, SWATCH, SWATCH_DISC, SWATCH_SELECTED, SWATCHES } from './consts.local.js';
+/**
+ * The swatch grid every picker shares, laid out for its surface: twelve to a row in a popover,
+ * as many 44px cells as fit in a sheet or below 768px. One tab stop; the arrows move in two
+ * dimensions. A swatch is a `<button type="button">` named by its colour and pressed while chosen.
+ */
+export const SwatchGrid = ({ value, onChange, onCustomChange, colors, customColors, text, layout, label, className }) => {
+    const resolved = pickerColorHelper.resolve(value, colors);
+    const selected = resolved == null || resolved.custom ? -1 : colors.findIndex(color => color.key === resolved.key);
+    const roving = useRovingGrid({ count: colors.length, selected });
+    return _jsxs("div", { className: className, children: [_jsx("div", { ref: roving.ref, role: "group", "aria-label": label, onKeyDown: roving.onKeyDown, "data-picker-swatches": true, className: SWATCHES[layout], children: colors.map((color, index) => {
+                    const named = pickerColorHelper.resolve(color.key, colors);
+                    const name = named != null ? text.color(named) : color.key;
+                    const chosen = index === selected;
+                    return _jsx("button", { type: "button", "data-roving-item": true, "data-picker-color": color.key, "aria-label": name, "aria-pressed": chosen, title: name, tabIndex: roving.tabIndexOf(index), onFocus: () => roving.setCurrent(index), onClick: () => onChange(color.key), style: pickerColorHelper.styleOf(color.key, colors), className: cn(PICK_SCOPE, SWATCH), children: _jsx("span", { "aria-hidden": "true", className: cn(SWATCH_DISC, chosen && SWATCH_SELECTED) }) }, color.key);
+                }) }), customColors && _jsx(CustomColor, { value: resolved?.custom === true ? resolved : null, onChange: onCustomChange ?? onChange, text: text })] });
+};
+/**
+ * The colour swatches inline — for a dialog or sheet the application already owns. Commits on
+ * click; `customColors` adds the colour wheel and hex field. Strings through `translate` (English
+ * without it — never an implicit i18n read).
+ */
+export const ColorSwatches = ({ value, onChange, colors = PICKER_COLORS, customColors = false, translate, label, className }) => {
+    const text = useMemo(() => makePickerText(translate), [translate]);
+    return _jsx(SwatchGrid, { value: value, onChange: onChange, colors: colors, customColors: customColors, text: text, layout: "inline", label: label ?? text.text('color', 'Colour'), className: className });
+};
+//# sourceMappingURL=swatches.js.map

package/build/components/picker/swatches.js.map

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

package/build/components/picker/text.d.ts

@@ -0,0 +1,5 @@
+import type { PickerTranslate } from './types.js';
+import type { PickerText } from './types.local.js';
+/** Every string a picker shows, through one `translate` (English without one). Built once per render. */
+export declare const makePickerText: (translate?: PickerTranslate) => PickerText;
+//# sourceMappingURL=text.d.ts.map

package/build/components/picker/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/components/picker/text.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAU9D,yGAAyG;AACzG,eAAO,MAAM,cAAc,eAAe,eAAe,KAAa,UA+BrE,CAAA"}

package/build/components/picker/text.js

@@ -0,0 +1,29 @@
+import { PICKER_COLORS } from '../../picker/vocabulary/consts.js';
+const english = (_key, fallback) => fallback;
+const humanize = (name) => {
+    const words = name.replace(/-/g, ' ');
+    return words === '' ? name : words[0].toUpperCase() + words.slice(1);
+};
+/** Every string a picker shows, through one `translate` (English without one). Built once per render. */
+export const makePickerText = (translate = english) => {
+    const text = (key, fallback) => translate(key, fallback);
+    // Only the palette's own names translate; an application palette's labels are shown as given
+    // (a status palette may well have a key called `red` labelled "Blocked").
+    const color = (resolved) => !resolved.custom && PICKER_COLORS.some(entry => entry.key === resolved.key && entry.label === resolved.label)
+        ? translate(`colors.${resolved.key}`, resolved.label)
+        : resolved.label;
+    const icon = (name) => humanize(name);
+    const category = (value) => translate(`categories.${value}`, humanize(value));
+    // Filled after translation: a `{count}` placeholder is never one i18next interpolates or strips.
+    const count = (value) => translate('results', 'Icons found: {count}').replace('{count}', String(value));
+    const empty = (query) => translate('empty', 'No icons match “{query}”').replace('{query}', query);
+    const summary = (iconName, resolved, mode) => {
+        const parts = [
+            mode !== 'color' && iconName != null && iconName !== '' ? icon(iconName) : null,
+            mode !== 'icon' && resolved != null ? color(resolved) : null,
+        ].filter((part) => part != null);
+        return parts.length > 0 ? parts.join(' · ') : null;
+    };
+    return { text, color, icon, category, count, empty, summary };
+};
+//# sourceMappingURL=text.js.map