@eifi1/ui-kit 0.33.1 → 0.35.0

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

@@ -1,8 +1,8 @@
-import * as react from 'react';
-import { ComponentType, ReactNode, ComponentPropsWithoutRef } from 'react';
-import { TileSize } from './tile-radio.js';
-
-interface IconPickerLabels {
+import type { ComponentPropsWithRef, ComponentType, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { TileSize } from "./tile-radio.js";
+import { DEFAULT_ICON_PICKER_LABELS } from "./icon-picker-labels.js";
+export interface IconPickerLabels {
     /** The "no icon" tile's name, when `allowNone` is set. */
     none: string;
     /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */
@@ -14,8 +14,8 @@ interface IconPickerLabels {
     /** Announced as the search narrows the grid. Receives the number of matches. */
     resultCount: (count: number) => string;
 }
-declare const DEFAULT_ICON_PICKER_LABELS: IconPickerLabels;
-interface IconOption<T extends string> {
+export { DEFAULT_ICON_PICKER_LABELS };
+export interface IconOption<T extends string> {
     value: T;
     /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`
      *  — the tile's name is `label`. */
@@ -42,7 +42,7 @@ interface IconOption<T extends string> {
      */
     disabledReason?: ReactNode;
 }
-interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children" | "defaultValue"> {
+export interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children" | "defaultValue"> {
     options: IconOption<T>[];
     /** The chosen icon, or `null` for none. */
     value: T | null;
@@ -73,7 +73,7 @@ interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithoutRe
      */
     tileClassName?: string;
     disabled?: boolean;
-    labels?: Partial<IconPickerLabels>;
+    labels?: LabelOverride<IconPickerLabels>;
     /**
      * An 11px static label in a strip over the picker, naming the grid — keksdose K2,
      * {@link SwatchPickerProps.label}'s twin: a symbol picker standing in a form row
@@ -82,7 +82,9 @@ interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithoutRe
      * styles the wrapper.
      */
     label?: ReactNode;
-    /** A {@link FieldHint} beside the label. Only with `label`. */
+    /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since
+     *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a
+     *  touch screen (§4), is a caption under the grid, describing it. */
     hint?: ReactNode;
 }
 /**
@@ -95,6 +97,4 @@ interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithoutRe
  * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a
  * right-to-left page), Home and End.
  */
-declare function IconPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, searchable, size, tileClassName, disabled, labels, label, hint, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: IconPickerProps<T>): react.JSX.Element;
-
-export { DEFAULT_ICON_PICKER_LABELS, type IconOption, IconPicker, type IconPickerLabels, type IconPickerProps };
+export declare function IconPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, searchable, size, tileClassName, disabled, labels, label, hint, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: IconPickerProps<T>): import("react").JSX.Element;

package/dist/components/icon-picker.js

@@ -5,17 +5,10 @@ import { cn } from "../lib/cn.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { SearchField } from "./search-field.js";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio.js";
-import { hasContent, LabelStrip } from "./field-parts.js";
-const DEFAULT_ICON_PICKER_LABELS = {
-  none: "No icon",
-  mixed: "Mixed: the selected items have different icons",
-  search: "Search icons",
-  noResults: "No icons match",
-  resultCount: (count) => count === 1 ? "1 icon" : `${count} icons`
-};
-function fold(text, locale) {
-  return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase(locale);
-}
+import { hasContent } from "../lib/presence.js";
+import { foldForSearch } from "../lib/text-match.js";
+import { LabelStrip, useFieldMessages } from "./field-parts.js";
+import { DEFAULT_ICON_PICKER_LABELS } from "./icon-picker-labels.js";
 function IconPicker({
   options,
   value,
@@ -42,11 +35,16 @@ function IconPicker({
   const mixedId = useId();
   const labelId = useId();
   const labelled = hasContent(label);
+  const messages = useFieldMessages({
+    hint: labelled ? hint : void 0,
+    describedBy: ariaDescribedBy,
+    reasonId: mixed && mixedId
+  });
   const [query, setQuery] = useState("");
-  const needle = fold(query.trim(), locale);
+  const needle = foldForSearch(query.trim(), locale);
   const visible = useMemo(
     () => needle ? options.filter(
-      (o) => [o.label, ...o.keywords ?? []].some((w) => fold(w, locale).includes(needle))
+      (o) => [o.label, ...o.keywords ?? []].some((w) => foldForSearch(w, locale).includes(needle))
     ) : options,
     [options, needle, locale]
   );
@@ -80,7 +78,7 @@ function IconPicker({
         role: "radiogroup",
         "aria-label": ariaLabel,
         "aria-labelledby": labelled && ariaLabel === void 0 && ariaLabelledBy === void 0 ? labelId : ariaLabelledBy,
-        "aria-describedby": [ariaDescribedBy, mixed && mixedId].filter(Boolean).join(" ") || void 0,
+        "aria-describedby": messages.describedBy,
         "aria-disabled": disabled || void 0,
         className: "flex flex-wrap items-center gap-1.5",
         children: /* @__PURE__ */ jsx(
@@ -99,14 +97,14 @@ function IconPicker({
               return Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: TILE_SIZE[size].glyph }) : null;
             },
             tileClassName: (_item, selected) => cn(
-              selected ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]",
+              selected ? "text-primary" : "text-secondary",
               tileClassName
             )
           }
         )
       }
     ),
-    needle && visible.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: text.noResults }),
+    needle && visible.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted", children: text.noResults }),
     mixed && /* @__PURE__ */ jsx("span", { id: mixedId, hidden: true, children: text.mixed }),
     searchable && // Typing moves no focus and the grid changes silently, so the count is said.
     // `sr-only-fixed`: this sits inside a consumer's markup and must not extend
@@ -114,7 +112,10 @@ function IconPicker({
     /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-atomic": true, className: "sr-only-fixed", children: needle ? text.resultCount(visible.length) : "" })
   ] });
   if (!labelled) return picker;
-  return /* @__PURE__ */ jsx(LabelStrip, { labelId, label, hint, disabled, pad: "clear", className, children: picker });
+  return /* @__PURE__ */ jsxs(LabelStrip, { labelId, label, hint: messages.labelHint, disabled, className, children: [
+    picker,
+    messages.below
+  ] });
 }
 export {
   DEFAULT_ICON_PICKER_LABELS,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { hasContent, LabelStrip } from \"./field-parts\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\nexport const DEFAULT_ICON_PICKER_LABELS: IconPickerLabels = {\n  none: \"No icon\",\n  mixed: \"Mixed: the selected items have different icons\",\n  search: \"Search icons\",\n  noResults: \"No icons match\",\n  resultCount: (count) => (count === 1 ? \"1 icon\" : `${count} icons`),\n};\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS symbol cannot be chosen right now — {@link SwatchOption.disabledReason}'s\n   * twin: the tile is `aria-disabled` but reachable by Tab and the arrow keys, the reason\n   * shows in its bubble under its name and describes it, and choosing it does nothing.\n   * Wins over `disabled`. Kept through a search like any other tile.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: Partial<IconPickerLabels>;\n  /**\n   * An 11px static label in a strip over the picker, naming the grid — keksdose K2,\n   * {@link SwatchPickerProps.label}'s twin: a symbol picker standing in a form row\n   * beside labelled fields, with its label on their line. With `searchable` the strip\n   * is over the search box too, which keeps its own name. With a label, `className`\n   * styles the wrapper.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. */\n  hint?: ReactNode;\n}\n\n/** Case- and accent-insensitive, so \"cafe\" finds \"Café\". */\nfunction fold(text: string, locale: string | undefined): string {\n  return text.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").toLocaleLowerCase(locale);\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const labelId = useId();\n  const labelled = hasContent(label);\n  const [query, setQuery] = useState(\"\");\n  const needle = fold(query.trim(), locale);\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            [o.label, ...(o.keywords ?? [])].some((w) => fold(w, locale).includes(needle)),\n          )\n        : options,\n    [options, needle, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n\n  const picker = (\n    <div {...rest} className={cn(\"space-y-2\", !labelled && className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        // The strip's label names the GRID, unless the caller named it already.\n        aria-labelledby={labelled && ariaLabel === undefined && ariaLabelledBy === undefined ? labelId : ariaLabelledBy}\n        aria-describedby={[ariaDescribedBy, mixed && mixedId].filter(Boolean).join(\" \") || undefined}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          // A locked tile is refused by the tiles themselves; asked again here so a\n          // reason can never become a change, whatever the tiles do.\n          onSelect={(next) => {\n            if (!hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n          }}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            cn(\n              selected ? \"text-[var(--text-primary)]\" : \"text-[var(--text-secondary)]\",\n              tileClassName,\n            )\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-[var(--text-muted)]\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return picker;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={hint} disabled={disabled} pad=\"clear\" className={className}>\n      {picker}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithRef, ComponentType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { hasContent } from \"../lib/presence\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { LabelStrip, useFieldMessages } from \"./field-parts\";\nimport { DEFAULT_ICON_PICKER_LABELS } from \"./icon-picker-labels\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\n// Defined in ./icon-picker-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ICON_PICKER_LABELS };\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  /** Out of the choice and out of reach — skipped by the arrow keys and Tab. With a\n   *  `disabledReason` the tile stays reachable instead and says why. */\n  disabled?: boolean;\n  /**\n   * Why THIS symbol cannot be chosen right now — {@link SwatchOption.disabledReason}'s\n   * twin: the tile is `aria-disabled` but reachable by Tab and the arrow keys, the reason\n   * shows in its bubble under its name and describes it, and choosing it does nothing.\n   * Wins over `disabled`. Kept through a search like any other tile.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: LabelOverride<IconPickerLabels>;\n  /**\n   * An 11px static label in a strip over the picker, naming the grid — keksdose K2,\n   * {@link SwatchPickerProps.label}'s twin: a symbol picker standing in a form row\n   * beside labelled fields, with its label on their line. With `searchable` the strip\n   * is over the search box too, which keeps its own name. With a label, `className`\n   * styles the wrapper.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. {@link Select}'s rule since\n   *  0.34 (DUP-2, refactor audit 2026-10): plain TEXT, and a FieldHint at Large and on a\n   *  touch screen (§4), is a caption under the grid, describing it. */\n  hint?: ReactNode;\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const labelId = useId();\n  const labelled = hasContent(label);\n  // The label line's \"?\", or the caption under the grid (DUP-2). Only with a label.\n  const messages = useFieldMessages({\n    hint: labelled ? hint : undefined,\n    describedBy: ariaDescribedBy,\n    reasonId: mixed && mixedId,\n  });\n  const [query, setQuery] = useState(\"\");\n  // Case- and accent-insensitive, so \"cafe\" finds \"Café\" — every kit list's fold (DUP-5).\n  const needle = foldForSearch(query.trim(), locale);\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            [o.label, ...(o.keywords ?? [])].some((w) => foldForSearch(w, locale).includes(needle)),\n          )\n        : options,\n    [options, needle, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({\n      key: o.value,\n      label: o.label,\n      note: o.note,\n      disabled: o.disabled,\n      disabledReason: o.disabledReason,\n    })),\n  ];\n\n  const picker = (\n    <div {...rest} className={cn(\"space-y-2\", !labelled && className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        // The strip's label names the GRID, unless the caller named it already.\n        aria-labelledby={labelled && ariaLabel === undefined && ariaLabelledBy === undefined ? labelId : ariaLabelledBy}\n        aria-describedby={messages.describedBy}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          // A locked tile is refused by the tiles themselves; asked again here so a\n          // reason can never become a change, whatever the tiles do.\n          onSelect={(next) => {\n            if (!hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n          }}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            cn(\n              selected ? \"text-primary\" : \"text-secondary\",\n              tileClassName,\n            )\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-muted\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return picker;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={messages.labelHint} disabled={disabled} className={className}>\n      {picker}\n      {messages.below}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/image-grid-labels.d.ts

@@ -0,0 +1,2 @@
+import type { ImageGridLabels } from "./image-grid.js";
+export declare const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels;

package/dist/components/image-grid-labels.js

@@ -0,0 +1,10 @@
+"use client";
+const DEFAULT_IMAGE_GRID_LABELS = {
+  list: "Images",
+  item: (index, count) => `Image ${index} of ${count}`,
+  actions: (name) => `Actions for ${name}`
+};
+export {
+  DEFAULT_IMAGE_GRID_LABELS
+};
+//# sourceMappingURL=image-grid-labels.js.map

package/dist/components/image-grid-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/image-grid-labels.ts"],"sourcesContent":["// The English words of ./image-grid, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./image-grid re-exports them.\n\nimport type { ImageGridLabels } from \"./image-grid\";\n\nexport const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {\n  list: \"Images\",\n  item: (index, count) => `Image ${index} of ${count}`,\n  actions: (name) => `Actions for ${name}`,\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,CAAC,OAAO,UAAU,SAAS,KAAK,OAAO,KAAK;AAAA,EAClD,SAAS,CAAC,SAAS,eAAe,IAAI;AACxC;","names":[]}

package/dist/components/image-grid.d.ts

@@ -1,9 +1,9 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { AuthedFetcher } from '../hooks/use-authed-src.js';
-import { ImageItem, LightboxLabels } from './lightbox.js';
-
-interface ImageGridLabels {
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { AuthedFetcher } from "../hooks/use-authed-src.js";
+import type { ImageItem, LightboxLabels } from "./lightbox.js";
+import { DEFAULT_IMAGE_GRID_LABELS } from "./image-grid-labels.js";
+export interface ImageGridLabels {
     /** The list's accessible name. */
     list: string;
     /** An open button's name when an item's `alt` is empty: "Image 3 of 7". */
@@ -11,8 +11,8 @@ interface ImageGridLabels {
     /** The name of the group of per-image actions, given the image's name. */
     actions: (name: string) => string;
 }
-declare const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels;
-interface ImageGridProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"> {
+export { DEFAULT_IMAGE_GRID_LABELS };
+export interface ImageGridProps extends Omit<ComponentPropsWithRef<"ul">, "children"> {
     items: readonly ImageItem[];
     /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only
      *  images are fetched for the grid; a file (PDF) tile shows its icon and name. */
@@ -47,9 +47,9 @@ interface ImageGridProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"
         zoom?: boolean;
         download?: boolean;
         onDownload?: (item: ImageItem, index: number) => void;
-        labels?: Partial<LightboxLabels>;
+        labels?: LabelOverride<LightboxLabels>;
     };
-    labels?: Partial<ImageGridLabels>;
+    labels?: LabelOverride<ImageGridLabels>;
 }
 /**
  * A file name as stem and extension, so a tile can cut the stem and keep the
@@ -57,7 +57,7 @@ interface ImageGridProps extends Omit<ComponentPropsWithoutRef<"ul">, "children"
  * reader less than "floor-plan-le….pdf" does. A leading dot (".env") or an
  * "extension" longer than five characters is not treated as one.
  */
-declare function splitFileName(name: string): [stem: string, ext: string];
+export declare function splitFileName(name: string): [stem: string, ext: string];
 /**
  * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect
  * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each
@@ -69,6 +69,4 @@ declare function splitFileName(name: string): [stem: string, ext: string];
  * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while
  * loading, a "couldn't load" tile on failure.
  */
-declare function ImageGrid({ items, fetcher, renderActions, onOpen, columns, minTileSize, aspect, lightbox, labels: labelsProp, className, style, ...rest }: ImageGridProps): react.JSX.Element;
-
-export { DEFAULT_IMAGE_GRID_LABELS, ImageGrid, type ImageGridLabels, type ImageGridProps, splitFileName };
+export declare function ImageGrid({ items, fetcher, renderActions, onOpen, columns, minTileSize, aspect, lightbox, labels: labelsProp, className, style, ...rest }: ImageGridProps): import("react").JSX.Element;

package/dist/components/image-grid.js

@@ -6,11 +6,7 @@ import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { AuthedImage } from "./authed-image.js";
 import { Lightbox, imageItemKind } from "./lightbox.js";
-const DEFAULT_IMAGE_GRID_LABELS = {
-  list: "Images",
-  item: (index, count) => `Image ${index} of ${count}`,
-  actions: (name) => `Actions for ${name}`
-};
+import { DEFAULT_IMAGE_GRID_LABELS } from "./image-grid-labels.js";
 const ASPECT_CLASS = {
   square: "aspect-square",
   video: "aspect-video",
@@ -62,12 +58,12 @@ function ImageGrid({
                 "aria-label": name,
                 onClick: () => onOpen ? onOpen(i) : setOpenIndex(i),
                 className: cn(
-                  "block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]",
-                  "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+                  "block w-full overflow-hidden rounded-md border border-subtle bg-hover",
+                  "focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand",
                   ASPECT_CLASS[aspect]
                 ),
-                children: kind === "file" ? /* @__PURE__ */ jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]", children: [
-                  /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6 shrink-0 text-[var(--text-muted)]" }),
+                children: kind === "file" ? /* @__PURE__ */ jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-secondary", children: [
+                  /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6 shrink-0 text-muted" }),
                   /* @__PURE__ */ jsx(FileNameLabel, { name: item.fileName ?? item.alt ?? "" })
                 ] }) : /* @__PURE__ */ jsx(
                   AuthedImage,
@@ -91,7 +87,7 @@ function ImageGrid({
                 children: actions
               }
             ),
-            item.caption !== void 0 && item.caption !== null && item.caption !== false && /* @__PURE__ */ jsx("div", { className: "mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]", children: item.caption })
+            item.caption !== void 0 && item.caption !== null && item.caption !== false && /* @__PURE__ */ jsx("div", { className: "mt-1 line-clamp-2 text-xs text-secondary", children: item.caption })
           ] }, item.key ?? item.src);
         })
       }

package/dist/components/image-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/image-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { FileText } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { AuthedImage } from \"./authed-image\";\nimport { Lightbox, imageItemKind } from \"./lightbox\";\nimport type { ImageItem, LightboxLabels } from \"./lightbox\";\n\nexport interface ImageGridLabels {\n  /** The list's accessible name. */\n  list: string;\n  /** An open button's name when an item's `alt` is empty: \"Image 3 of 7\". */\n  item: (index: number, count: number) => string;\n  /** The name of the group of per-image actions, given the image's name. */\n  actions: (name: string) => string;\n}\n\nexport const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {\n  list: \"Images\",\n  item: (index, count) => `Image ${index} of ${count}`,\n  actions: (name) => `Actions for ${name}`,\n};\n\nexport interface ImageGridProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n  items: readonly ImageItem[];\n  /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only\n   *  images are fetched for the grid; a file (PDF) tile shows its icon and name. */\n  fetcher?: AuthedFetcher | null;\n  /**\n   * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of\n   * the thumbnail's corner), never inside it: a button inside a button is invalid HTML\n   * and a screen reader flattens it into the outer one's name, where it cannot be\n   * reached. Use `IconButton variant=\"overlay\"` for controls that sit on a photo.\n   */\n  renderActions?: (item: ImageItem, index: number) => ReactNode;\n  /**\n   * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that\n   * image. Given, the grid opens nothing — for a caller that keeps the lightbox's\n   * index in the URL, or that opens something else.\n   */\n  onOpen?: (index: number) => void;\n  /**\n   * A fixed column count. Left out, the grid is responsive: as many columns of at\n   * least {@link minTileSize} px as fit, so the same grid is three across in a card on\n   * a phone and eight across on a desktop page — no breakpoints to choose.\n   */\n  columns?: number;\n  /** The smallest a tile may be in the responsive layout. Default 96 (px). */\n  minTileSize?: number;\n  /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's\n   *  own proportions (a floor plan), within a square-ish box. */\n  aspect?: \"square\" | \"video\" | \"auto\";\n  /** Props for the built-in lightbox (ignored with {@link onOpen}). */\n  lightbox?: {\n    loop?: boolean;\n    zoom?: boolean;\n    download?: boolean;\n    onDownload?: (item: ImageItem, index: number) => void;\n    labels?: Partial<LightboxLabels>;\n  };\n  labels?: Partial<ImageGridLabels>;\n}\n\nconst ASPECT_CLASS = {\n  square: \"aspect-square\",\n  video: \"aspect-video\",\n  auto: \"aspect-[4/3]\",\n} as const;\n\n/**\n * A file name as stem and extension, so a tile can cut the stem and keep the\n * extension whole: \"floor-plan-level-2.p / df\" (a break inside the extension) told the\n * reader less than \"floor-plan-le….pdf\" does. A leading dot (\".env\") or an\n * \"extension\" longer than five characters is not treated as one.\n */\nexport function splitFileName(name: string): [stem: string, ext: string] {\n  const dot = name.lastIndexOf(\".\");\n  if (dot <= 0 || name.length - dot > 6) return [name, \"\"];\n  return [name.slice(0, dot), name.slice(dot)];\n}\n\n/**\n * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect\n * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each\n * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no\n * loading state and nowhere to put a delete.\n *\n * Each tile is a real `<button>` named by the image's alt, with the actions beside it\n * and the caption below it — outside the button, so the name stays the alt and the\n * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while\n * loading, a \"couldn't load\" tile on failure.\n */\nexport function ImageGrid({\n  items,\n  fetcher,\n  renderActions,\n  onOpen,\n  columns,\n  minTileSize = 96,\n  aspect = \"square\",\n  lightbox,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: ImageGridProps) {\n  const labels = useKitLabels(\"imageGrid\", DEFAULT_IMAGE_GRID_LABELS, labelsProp);\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n  const count = items.length;\n\n  const gridStyle: CSSProperties = {\n    gridTemplateColumns:\n      columns !== undefined\n        ? `repeat(${columns}, minmax(0, 1fr))`\n        : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,\n    ...style,\n  };\n\n  return (\n    <>\n      <ul\n        aria-label={labels.list}\n        {...rest}\n        className={cn(\"grid gap-2\", className)}\n        style={gridStyle}\n      >\n        {items.map((item, i) => {\n          const name = item.alt || labels.item(i + 1, count);\n          const kind = imageItemKind(item);\n          const actions = renderActions?.(item, i);\n          return (\n            <li key={item.key ?? item.src} className=\"relative min-w-0\">\n              <button\n                type=\"button\"\n                aria-label={name}\n                onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}\n                className={cn(\n                  \"block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]\",\n                  \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n                  ASPECT_CLASS[aspect],\n                )}\n              >\n                {kind === \"file\" ? (\n                  <span className=\"flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]\">\n                    <FileText aria-hidden className=\"size-6 shrink-0 text-[var(--text-muted)]\" />\n                    <FileNameLabel name={item.fileName ?? item.alt ?? \"\"} />\n                  </span>\n                ) : (\n                  <AuthedImage\n                    src={item.thumbnailSrc ?? item.src}\n                    // The button is named already; the picture inside it is decoration\n                    // to a reader, or the name would be read twice.\n                    alt=\"\"\n                    fetcher={fetcher}\n                    loading=\"lazy\"\n                    wrapperClassName=\"h-full w-full\"\n                    className={cn(\"h-full w-full\", aspect === \"auto\" ? \"object-contain\" : \"object-cover\")}\n                  />\n                )}\n              </button>\n              {actions !== undefined && actions !== null && actions !== false && (\n                <div\n                  role=\"group\"\n                  aria-label={labels.actions(name)}\n                  // A backdrop behind the whole group, in the inverse token the overlay\n                  // buttons use: a translucent disc alone took most of its colour from\n                  // the picture, and on a pale photo or the light file tile the glyphs\n                  // washed out. Two layers of the inverse keep them readable over any\n                  // picture, in both themes.\n                  className=\"absolute end-1 top-1 flex gap-1 rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_40%,transparent)] p-0.5 backdrop-blur-sm\"\n                >\n                  {actions}\n                </div>\n              )}\n              {item.caption !== undefined && item.caption !== null && item.caption !== false && (\n                <div className=\"mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]\">{item.caption}</div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n      {!onOpen && (\n        <Lightbox\n          open={openIndex !== null}\n          onClose={() => setOpenIndex(null)}\n          items={items}\n          index={openIndex ?? 0}\n          onIndexChange={setOpenIndex}\n          fetcher={fetcher}\n          {...lightbox}\n        />\n      )}\n    </>\n  );\n}\n\n/** One line: the stem truncates, the extension never does. */\nfunction FileNameLabel({ name }: { name: string }) {\n  const [stem, ext] = splitFileName(name);\n  return (\n    <span aria-hidden className=\"flex max-w-full min-w-0\">\n      <span className=\"min-w-0 truncate\">{stem}</span>\n      {ext && <span className=\"shrink-0\">{ext}</span>}\n    </span>\n  );\n}\n"],"mappings":";AA0HI,mBAyBgB,KADF,YAxBd;AA1HJ,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,UAAU,qBAAqB;AAYjC,MAAM,4BAA6C;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,CAAC,OAAO,UAAU,SAAS,KAAK,OAAO,KAAK;AAAA,EAClD,SAAS,CAAC,SAAS,eAAe,IAAI;AACxC;AA0CA,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AACR;AAQO,SAAS,cAAc,MAA2C;AACvE,QAAM,MAAM,KAAK,YAAY,GAAG;AAChC,MAAI,OAAO,KAAK,KAAK,SAAS,MAAM,EAAG,QAAO,CAAC,MAAM,EAAE;AACvD,SAAO,CAAC,KAAK,MAAM,GAAG,GAAG,GAAG,KAAK,MAAM,GAAG,CAAC;AAC7C;AAaO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS,aAAa,aAAa,2BAA2B,UAAU;AAC9E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,QAAQ,MAAM;AAEpB,QAAM,YAA2B;AAAA,IAC/B,qBACE,YAAY,SACR,UAAU,OAAO,sBACjB,gCAAgC,WAAW;AAAA,IACjD,GAAG;AAAA,EACL;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,OAAO;AAAA,QAClB,GAAG;AAAA,QACJ,WAAW,GAAG,cAAc,SAAS;AAAA,QACrC,OAAO;AAAA,QAEN,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,gBAAM,OAAO,KAAK,OAAO,OAAO,KAAK,IAAI,GAAG,KAAK;AACjD,gBAAM,OAAO,cAAc,IAAI;AAC/B,gBAAM,UAAU,gBAAgB,MAAM,CAAC;AACvC,iBACE,qBAAC,QAA8B,WAAU,oBACvC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,SAAS,MAAO,SAAS,OAAO,CAAC,IAAI,aAAa,CAAC;AAAA,gBACnD,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,aAAa,MAAM;AAAA,gBACrB;AAAA,gBAEC,mBAAS,SACR,qBAAC,UAAK,WAAU,sHACd;AAAA,sCAAC,YAAS,eAAW,MAAC,WAAU,4CAA2C;AAAA,kBAC3E,oBAAC,iBAAc,MAAM,KAAK,YAAY,KAAK,OAAO,IAAI;AAAA,mBACxD,IAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK,KAAK,gBAAgB,KAAK;AAAA,oBAG/B,KAAI;AAAA,oBACJ;AAAA,oBACA,SAAQ;AAAA,oBACR,kBAAiB;AAAA,oBACjB,WAAW,GAAG,iBAAiB,WAAW,SAAS,mBAAmB,cAAc;AAAA;AAAA,gBACtF;AAAA;AAAA,YAEJ;AAAA,YACC,YAAY,UAAa,YAAY,QAAQ,YAAY,SACxD;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO,QAAQ,IAAI;AAAA,gBAM/B,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA,YAED,KAAK,YAAY,UAAa,KAAK,YAAY,QAAQ,KAAK,YAAY,SACvE,oBAAC,SAAI,WAAU,0DAA0D,eAAK,SAAQ;AAAA,eA5CjF,KAAK,OAAO,KAAK,GA8C1B;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,IACC,CAAC,UACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,cAAc;AAAA,QACpB,SAAS,MAAM,aAAa,IAAI;AAAA,QAChC;AAAA,QACA,OAAO,aAAa;AAAA,QACpB,eAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KAEJ;AAEJ;AAGA,SAAS,cAAc,EAAE,KAAK,GAAqB;AACjD,QAAM,CAAC,MAAM,GAAG,IAAI,cAAc,IAAI;AACtC,SACE,qBAAC,UAAK,eAAW,MAAC,WAAU,2BAC1B;AAAA,wBAAC,UAAK,WAAU,oBAAoB,gBAAK;AAAA,IACxC,OAAO,oBAAC,UAAK,WAAU,YAAY,eAAI;AAAA,KAC1C;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/image-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { FileText } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { AuthedImage } from \"./authed-image\";\nimport { Lightbox, imageItemKind } from \"./lightbox\";\nimport type { ImageItem, LightboxLabels } from \"./lightbox\";\nimport { DEFAULT_IMAGE_GRID_LABELS } from \"./image-grid-labels\";\n\nexport interface ImageGridLabels {\n  /** The list's accessible name. */\n  list: string;\n  /** An open button's name when an item's `alt` is empty: \"Image 3 of 7\". */\n  item: (index: number, count: number) => string;\n  /** The name of the group of per-image actions, given the image's name. */\n  actions: (name: string) => string;\n}\n\n// Defined in ./image-grid-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_IMAGE_GRID_LABELS };\n\nexport interface ImageGridProps extends Omit<ComponentPropsWithRef<\"ul\">, \"children\"> {\n  items: readonly ImageItem[];\n  /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only\n   *  images are fetched for the grid; a file (PDF) tile shows its icon and name. */\n  fetcher?: AuthedFetcher | null;\n  /**\n   * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of\n   * the thumbnail's corner), never inside it: a button inside a button is invalid HTML\n   * and a screen reader flattens it into the outer one's name, where it cannot be\n   * reached. Use `IconButton variant=\"overlay\"` for controls that sit on a photo.\n   */\n  renderActions?: (item: ImageItem, index: number) => ReactNode;\n  /**\n   * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that\n   * image. Given, the grid opens nothing — for a caller that keeps the lightbox's\n   * index in the URL, or that opens something else.\n   */\n  onOpen?: (index: number) => void;\n  /**\n   * A fixed column count. Left out, the grid is responsive: as many columns of at\n   * least {@link minTileSize} px as fit, so the same grid is three across in a card on\n   * a phone and eight across on a desktop page — no breakpoints to choose.\n   */\n  columns?: number;\n  /** The smallest a tile may be in the responsive layout. Default 96 (px). */\n  minTileSize?: number;\n  /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's\n   *  own proportions (a floor plan), within a square-ish box. */\n  aspect?: \"square\" | \"video\" | \"auto\";\n  /** Props for the built-in lightbox (ignored with {@link onOpen}). */\n  lightbox?: {\n    loop?: boolean;\n    zoom?: boolean;\n    download?: boolean;\n    onDownload?: (item: ImageItem, index: number) => void;\n    labels?: LabelOverride<LightboxLabels>;\n  };\n  labels?: LabelOverride<ImageGridLabels>;\n}\n\nconst ASPECT_CLASS = {\n  square: \"aspect-square\",\n  video: \"aspect-video\",\n  auto: \"aspect-[4/3]\",\n} as const;\n\n/**\n * A file name as stem and extension, so a tile can cut the stem and keep the\n * extension whole: \"floor-plan-level-2.p / df\" (a break inside the extension) told the\n * reader less than \"floor-plan-le….pdf\" does. A leading dot (\".env\") or an\n * \"extension\" longer than five characters is not treated as one.\n */\nexport function splitFileName(name: string): [stem: string, ext: string] {\n  const dot = name.lastIndexOf(\".\");\n  if (dot <= 0 || name.length - dot > 6) return [name, \"\"];\n  return [name.slice(0, dot), name.slice(dot)];\n}\n\n/**\n * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect\n * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each\n * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no\n * loading state and nowhere to put a delete.\n *\n * Each tile is a real `<button>` named by the image's alt, with the actions beside it\n * and the caption below it — outside the button, so the name stays the alt and the\n * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while\n * loading, a \"couldn't load\" tile on failure.\n */\nexport function ImageGrid({\n  items,\n  fetcher,\n  renderActions,\n  onOpen,\n  columns,\n  minTileSize = 96,\n  aspect = \"square\",\n  lightbox,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: ImageGridProps) {\n  const labels = useKitLabels(\"imageGrid\", DEFAULT_IMAGE_GRID_LABELS, labelsProp);\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n  const count = items.length;\n\n  const gridStyle: CSSProperties = {\n    gridTemplateColumns:\n      columns !== undefined\n        ? `repeat(${columns}, minmax(0, 1fr))`\n        : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,\n    ...style,\n  };\n\n  return (\n    <>\n      <ul\n        aria-label={labels.list}\n        {...rest}\n        className={cn(\"grid gap-2\", className)}\n        style={gridStyle}\n      >\n        {items.map((item, i) => {\n          const name = item.alt || labels.item(i + 1, count);\n          const kind = imageItemKind(item);\n          const actions = renderActions?.(item, i);\n          return (\n            <li key={item.key ?? item.src} className=\"relative min-w-0\">\n              <button\n                type=\"button\"\n                aria-label={name}\n                onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}\n                className={cn(\n                  \"block w-full overflow-hidden rounded-md border border-subtle bg-hover\",\n                  \"focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand\",\n                  ASPECT_CLASS[aspect],\n                )}\n              >\n                {kind === \"file\" ? (\n                  <span className=\"flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-secondary\">\n                    <FileText aria-hidden className=\"size-6 shrink-0 text-muted\" />\n                    <FileNameLabel name={item.fileName ?? item.alt ?? \"\"} />\n                  </span>\n                ) : (\n                  <AuthedImage\n                    src={item.thumbnailSrc ?? item.src}\n                    // The button is named already; the picture inside it is decoration\n                    // to a reader, or the name would be read twice.\n                    alt=\"\"\n                    fetcher={fetcher}\n                    loading=\"lazy\"\n                    wrapperClassName=\"h-full w-full\"\n                    className={cn(\"h-full w-full\", aspect === \"auto\" ? \"object-contain\" : \"object-cover\")}\n                  />\n                )}\n              </button>\n              {actions !== undefined && actions !== null && actions !== false && (\n                <div\n                  role=\"group\"\n                  aria-label={labels.actions(name)}\n                  // A backdrop behind the whole group, in the inverse token the overlay\n                  // buttons use: a translucent disc alone took most of its colour from\n                  // the picture, and on a pale photo or the light file tile the glyphs\n                  // washed out. Two layers of the inverse keep them readable over any\n                  // picture, in both themes.\n                  className=\"absolute end-1 top-1 flex gap-1 rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_40%,transparent)] p-0.5 backdrop-blur-sm\"\n                >\n                  {actions}\n                </div>\n              )}\n              {item.caption !== undefined && item.caption !== null && item.caption !== false && (\n                <div className=\"mt-1 line-clamp-2 text-xs text-secondary\">{item.caption}</div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n      {!onOpen && (\n        <Lightbox\n          open={openIndex !== null}\n          onClose={() => setOpenIndex(null)}\n          items={items}\n          index={openIndex ?? 0}\n          onIndexChange={setOpenIndex}\n          fetcher={fetcher}\n          {...lightbox}\n        />\n      )}\n    </>\n  );\n}\n\n/** One line: the stem truncates, the extension never does. */\nfunction FileNameLabel({ name }: { name: string }) {\n  const [stem, ext] = splitFileName(name);\n  return (\n    <span aria-hidden className=\"flex max-w-full min-w-0\">\n      <span className=\"min-w-0 truncate\">{stem}</span>\n      {ext && <span className=\"shrink-0\">{ext}</span>}\n    </span>\n  );\n}\n"],"mappings":";AAwHI,mBAyBgB,KADF,YAxBd;AAxHJ,SAAS,gBAAgB;AAEzB,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,oBAAwC;AAEjD,SAAS,mBAAmB;AAC5B,SAAS,UAAU,qBAAqB;AAExC,SAAS,iCAAiC;AAsD1C,MAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AACR;AAQO,SAAS,cAAc,MAA2C;AACvE,QAAM,MAAM,KAAK,YAAY,GAAG;AAChC,MAAI,OAAO,KAAK,KAAK,SAAS,MAAM,EAAG,QAAO,CAAC,MAAM,EAAE;AACvD,SAAO,CAAC,KAAK,MAAM,GAAG,GAAG,GAAG,KAAK,MAAM,GAAG,CAAC;AAC7C;AAaO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS,aAAa,aAAa,2BAA2B,UAAU;AAC9E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,QAAQ,MAAM;AAEpB,QAAM,YAA2B;AAAA,IAC/B,qBACE,YAAY,SACR,UAAU,OAAO,sBACjB,gCAAgC,WAAW;AAAA,IACjD,GAAG;AAAA,EACL;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,OAAO;AAAA,QAClB,GAAG;AAAA,QACJ,WAAW,GAAG,cAAc,SAAS;AAAA,QACrC,OAAO;AAAA,QAEN,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,gBAAM,OAAO,KAAK,OAAO,OAAO,KAAK,IAAI,GAAG,KAAK;AACjD,gBAAM,OAAO,cAAc,IAAI;AAC/B,gBAAM,UAAU,gBAAgB,MAAM,CAAC;AACvC,iBACE,qBAAC,QAA8B,WAAU,oBACvC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY;AAAA,gBACZ,SAAS,MAAO,SAAS,OAAO,CAAC,IAAI,aAAa,CAAC;AAAA,gBACnD,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,aAAa,MAAM;AAAA,gBACrB;AAAA,gBAEC,mBAAS,SACR,qBAAC,UAAK,WAAU,wGACd;AAAA,sCAAC,YAAS,eAAW,MAAC,WAAU,8BAA6B;AAAA,kBAC7D,oBAAC,iBAAc,MAAM,KAAK,YAAY,KAAK,OAAO,IAAI;AAAA,mBACxD,IAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK,KAAK,gBAAgB,KAAK;AAAA,oBAG/B,KAAI;AAAA,oBACJ;AAAA,oBACA,SAAQ;AAAA,oBACR,kBAAiB;AAAA,oBACjB,WAAW,GAAG,iBAAiB,WAAW,SAAS,mBAAmB,cAAc;AAAA;AAAA,gBACtF;AAAA;AAAA,YAEJ;AAAA,YACC,YAAY,UAAa,YAAY,QAAQ,YAAY,SACxD;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO,QAAQ,IAAI;AAAA,gBAM/B,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA,YAED,KAAK,YAAY,UAAa,KAAK,YAAY,QAAQ,KAAK,YAAY,SACvE,oBAAC,SAAI,WAAU,4CAA4C,eAAK,SAAQ;AAAA,eA5CnE,KAAK,OAAO,KAAK,GA8C1B;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,IACC,CAAC,UACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,cAAc;AAAA,QACpB,SAAS,MAAM,aAAa,IAAI;AAAA,QAChC;AAAA,QACA,OAAO,aAAa;AAAA,QACpB,eAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KAEJ;AAEJ;AAGA,SAAS,cAAc,EAAE,KAAK,GAAqB;AACjD,QAAM,CAAC,MAAM,GAAG,IAAI,cAAc,IAAI;AACtC,SACE,qBAAC,UAAK,eAAW,MAAC,WAAU,2BAC1B;AAAA,wBAAC,UAAK,WAAU,oBAAoB,gBAAK;AAAA,IACxC,OAAO,oBAAC,UAAK,WAAU,YAAY,eAAI;AAAA,KAC1C;AAEJ;","names":[]}

package/dist/components/inline-edit-field-labels.d.ts

@@ -0,0 +1,2 @@
+import type { InlineEditLabels } from "./inline-edit-field.js";
+export declare const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels;

package/dist/components/inline-edit-field-labels.js

@@ -0,0 +1,10 @@
+"use client";
+const DEFAULT_INLINE_EDIT_LABELS = {
+  edit: (label) => `Edit ${label}`,
+  failed: "The change could not be saved.",
+  empty: "Empty"
+};
+export {
+  DEFAULT_INLINE_EDIT_LABELS
+};
+//# sourceMappingURL=inline-edit-field-labels.js.map

package/dist/components/inline-edit-field-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/inline-edit-field-labels.ts"],"sourcesContent":["// The English words of ./inline-edit-field, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./inline-edit-field re-exports them.\n\nimport type { InlineEditLabels } from \"./inline-edit-field\";\n\nexport const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels = {\n  edit: (label) => `Edit ${label}`,\n  failed: \"The change could not be saved.\",\n  empty: \"Empty\",\n};\n"],"mappings":";AAMO,MAAM,6BAA+C;AAAA,EAC1D,MAAM,CAAC,UAAU,QAAQ,KAAK;AAAA,EAC9B,QAAQ;AAAA,EACR,OAAO;AACT;","names":[]}

package/dist/components/inline-edit-field.d.ts

@@ -1,12 +1,12 @@
-import * as react from 'react';
-import { ReactNode, InputHTMLAttributes } from 'react';
-import { CommitScope } from './write-lock.js';
-
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { type CommitScope } from "./write-lock.js";
+import { DEFAULT_INLINE_EDIT_LABELS } from "./inline-edit-field-labels.js";
 /**
  * Every string {@link InlineEditField} says on its own behalf — the `inlineEdit`
  * namespace of `<UiKitProvider labels>`, overridable per instance through `labels`.
  */
-interface InlineEditLabels {
+export interface InlineEditLabels {
     /** The display button's tooltip and description — what pressing it does. Receives
      *  the field's `label` ("Budget name" → "Edit Budget name"). */
     edit: (label: string) => string;
@@ -15,9 +15,9 @@ interface InlineEditLabels {
     /** What the display shows for an empty value, when no `placeholder` is given. */
     empty: string;
 }
-declare const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels;
+export { DEFAULT_INLINE_EDIT_LABELS };
 /** What an `editor` render prop is handed: the draft and the means to end the edit. */
-interface InlineEditorProps<T> {
+export interface InlineEditorProps<T> {
     /** The draft — seeded from `value` each time the editor opens. */
     value: T;
     /** Replace the draft (every keystroke). */
@@ -104,7 +104,7 @@ interface InlineEditFieldBaseProps<T> {
     inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type">;
     /** Classes for the root. */
     className?: string;
-    labels?: Partial<InlineEditLabels>;
+    labels?: LabelOverride<InlineEditLabels>;
 }
 type EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;
 /**
@@ -114,7 +114,7 @@ type EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;
  *
  * ```tsx
  * editor={(p) => (
- *   <NumberInput calculator={false} ariaLabel={p.label} value={p.value} onChange={p.onChange}
+ *   <NumberInput calculator={false} aria-label={p.label} value={p.value} onChange={p.onChange}
  *     onCommit={p.commit} aria-invalid={p.invalid || undefined} aria-describedby={p.describedBy} />
  * )}
  * ```
@@ -125,7 +125,7 @@ type EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;
  * "inside" across a portal, so a picker or a phone keypad the editor opens does not
  * end the edit.
  */
-type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> & ([T] extends [string] ? {
+export type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> & ([T] extends [string] ? {
     editor?: EditorRender<T>;
 } : {
     editor: EditorRender<T>;
@@ -163,6 +163,4 @@ type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> & ([T] exten
  *   onCommit={(name) => rename.mutateAsync({ id: budget.id, name })} inputProps={{ maxLength: 120 }} />
  * ```
  */
-declare function InlineEditField<T = string>(props: InlineEditFieldProps<T>): react.JSX.Element;
-
-export { DEFAULT_INLINE_EDIT_LABELS, InlineEditField, type InlineEditFieldProps, type InlineEditLabels, type InlineEditorProps };
+export declare function InlineEditField<T = string>(props: InlineEditFieldProps<T>): import("react").JSX.Element;

package/dist/components/inline-edit-field.js

@@ -2,20 +2,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { hasContent } from "../lib/presence.js";
 import { useAnnounce } from "../hooks/use-announce.js";
+import { claimEscape } from "../hooks/use-dismiss.js";
+import { isImeEnter } from "../lib/ime.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-import { Input, Spinner } from "./ui.js";
+import { Input } from "./input.js";
+import { Spinner } from "./spinner.js";
+import { FIELD_ERROR_CLASS } from "./field-parts.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
-const DEFAULT_INLINE_EDIT_LABELS = {
-  edit: (label) => `Edit ${label}`,
-  failed: "The change could not be saved.",
-  empty: "Empty"
-};
-function hasContent(node) {
-  return node !== void 0 && node !== null && node !== false && node !== "";
-}
+import { DEFAULT_INLINE_EDIT_LABELS } from "./inline-edit-field-labels.js";
 function RenderEditor({ render, ...props }) {
   return render(props);
 }
@@ -166,12 +164,12 @@ function InlineEditField(props) {
   const onKeyDown = (e) => {
     if (e.defaultPrevented) return;
     if (e.key === "Escape") {
-      e.preventDefault();
+      claimEscape(e);
       e.stopPropagation();
       cancel();
       return;
     }
-    if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.shiftKey) {
+    if (e.key === "Enter" && !isImeEnter(e) && !e.shiftKey) {
       e.preventDefault();
       save();
     }
@@ -191,7 +189,7 @@ function InlineEditField(props) {
   };
   const private_ = redact ? { "data-private": true } : void 0;
   const shown = display ? display(value) : value === null || value === void 0 ? "" : String(value);
-  const content = hasContent(shown) ? shown : /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: placeholder ?? labels.empty });
+  const content = hasContent(shown) ? shown : /* @__PURE__ */ jsx("span", { className: "text-muted", children: placeholder ?? labels.empty });
   const alignClass = align === "end" ? "text-end" : "text-start";
   let body;
   if (readOnly) {
@@ -241,7 +239,7 @@ function InlineEditField(props) {
             ) }),
             pending && /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4 shrink-0" })
           ] }),
-          failed && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-caption leading-tight text-[var(--danger)]", children: failure })
+          failed && /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: failure })
         ]
       }
     );