@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/icon-picker-labels.ts

@@ -1,13 +0,0 @@
-// The English words of ./icon-picker, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./icon-picker re-exports them.
-
-import type { IconPickerLabels } from "./icon-picker";
-
-export const DEFAULT_ICON_PICKER_LABELS: IconPickerLabels = {
-  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`),
-};

package/src/components/icon-picker.tsx

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

package/src/components/image-grid-labels.ts

@@ -1,11 +0,0 @@
-// The English words of ./image-grid, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./image-grid re-exports them.
-
-import type { ImageGridLabels } from "./image-grid";
-
-export const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {
-  list: "Images",
-  item: (index, count) => `Image ${index} of ${count}`,
-  actions: (name) => `Actions for ${name}`,
-};

package/src/components/image-grid.tsx

@@ -1,202 +0,0 @@
-import { useState } from "react";
-import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
-import { FileText } from "lucide-react";
-
-import { cn } from "../lib/cn";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import type { AuthedFetcher } from "../hooks/use-authed-src";
-import { AuthedImage } from "./authed-image";
-import { Lightbox, imageItemKind } from "./lightbox";
-import type { ImageItem, LightboxLabels } from "./lightbox";
-import { DEFAULT_IMAGE_GRID_LABELS } from "./image-grid-labels";
-
-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". */
-  item: (index: number, count: number) => string;
-  /** The name of the group of per-image actions, given the image's name. */
-  actions: (name: string) => string;
-}
-
-// Defined in ./image-grid-labels, which holds no component code (0.34, KS U8).
-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. */
-  fetcher?: AuthedFetcher | null;
-  /**
-   * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of
-   * the thumbnail's corner), never inside it: a button inside a button is invalid HTML
-   * and a screen reader flattens it into the outer one's name, where it cannot be
-   * reached. Use `IconButton variant="overlay"` for controls that sit on a photo.
-   */
-  renderActions?: (item: ImageItem, index: number) => ReactNode;
-  /**
-   * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that
-   * image. Given, the grid opens nothing — for a caller that keeps the lightbox's
-   * index in the URL, or that opens something else.
-   */
-  onOpen?: (index: number) => void;
-  /**
-   * A fixed column count. Left out, the grid is responsive: as many columns of at
-   * least {@link minTileSize} px as fit, so the same grid is three across in a card on
-   * a phone and eight across on a desktop page — no breakpoints to choose.
-   */
-  columns?: number;
-  /** The smallest a tile may be in the responsive layout. Default 96 (px). */
-  minTileSize?: number;
-  /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's
-   *  own proportions (a floor plan), within a square-ish box. */
-  aspect?: "square" | "video" | "auto";
-  /** Props for the built-in lightbox (ignored with {@link onOpen}). */
-  lightbox?: {
-    loop?: boolean;
-    zoom?: boolean;
-    download?: boolean;
-    onDownload?: (item: ImageItem, index: number) => void;
-    labels?: LabelOverride<LightboxLabels>;
-  };
-  labels?: LabelOverride<ImageGridLabels>;
-}
-
-const ASPECT_CLASS = {
-  square: "aspect-square",
-  video: "aspect-video",
-  auto: "aspect-[4/3]",
-} as const;
-
-/**
- * A file name as stem and extension, so a tile can cut the stem and keep the
- * extension whole: "floor-plan-level-2.p / df" (a break inside the extension) told the
- * reader less than "floor-plan-le….pdf" does. A leading dot (".env") or an
- * "extension" longer than five characters is not treated as one.
- */
-export function splitFileName(name: string): [stem: string, ext: string] {
-  const dot = name.lastIndexOf(".");
-  if (dot <= 0 || name.length - dot > 6) return [name, ""];
-  return [name.slice(0, dot), name.slice(dot)];
-}
-
-/**
- * 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
- * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no
- * loading state and nowhere to put a delete.
- *
- * Each tile is a real `<button>` named by the image's alt, with the actions beside it
- * and the caption below it — outside the button, so the name stays the alt and the
- * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while
- * loading, a "couldn't load" tile on failure.
- */
-export function ImageGrid({
-  items,
-  fetcher,
-  renderActions,
-  onOpen,
-  columns,
-  minTileSize = 96,
-  aspect = "square",
-  lightbox,
-  labels: labelsProp,
-  className,
-  style,
-  ...rest
-}: ImageGridProps) {
-  const labels = useKitLabels("imageGrid", DEFAULT_IMAGE_GRID_LABELS, labelsProp);
-  const [openIndex, setOpenIndex] = useState<number | null>(null);
-  const count = items.length;
-
-  const gridStyle: CSSProperties = {
-    gridTemplateColumns:
-      columns !== undefined
-        ? `repeat(${columns}, minmax(0, 1fr))`
-        : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,
-    ...style,
-  };
-
-  return (
-    <>
-      <ul aria-label={labels.list} {...rest} className={cn("grid gap-2", className)} style={gridStyle}>
-        {items.map((item, i) => {
-          const name = item.alt || labels.item(i + 1, count);
-          const kind = imageItemKind(item);
-          const actions = renderActions?.(item, i);
-          return (
-            <li key={item.key ?? item.src} className="relative min-w-0">
-              <button
-                type="button"
-                aria-label={name}
-                onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}
-                className={cn(
-                  "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],
-                )}
-              >
-                {kind === "file" ? (
-                  <span className="flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-secondary">
-                    <FileText aria-hidden className="size-6 shrink-0 text-muted" />
-                    <FileNameLabel name={item.fileName ?? item.alt ?? ""} />
-                  </span>
-                ) : (
-                  <AuthedImage
-                    src={item.thumbnailSrc ?? item.src}
-                    // The button is named already; the picture inside it is decoration
-                    // to a reader, or the name would be read twice.
-                    alt=""
-                    fetcher={fetcher}
-                    loading="lazy"
-                    wrapperClassName="h-full w-full"
-                    className={cn("h-full w-full", aspect === "auto" ? "object-contain" : "object-cover")}
-                  />
-                )}
-              </button>
-              {actions !== undefined && actions !== null && actions !== false && (
-                <div
-                  role="group"
-                  aria-label={labels.actions(name)}
-                  // A backdrop behind the whole group, in the inverse token the overlay
-                  // buttons use: a translucent disc alone took most of its colour from
-                  // the picture, and on a pale photo or the light file tile the glyphs
-                  // washed out. Two layers of the inverse keep them readable over any
-                  // picture, in both themes.
-                  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"
-                >
-                  {actions}
-                </div>
-              )}
-              {item.caption !== undefined && item.caption !== null && item.caption !== false && (
-                <div className="mt-1 line-clamp-2 text-xs text-secondary">{item.caption}</div>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-      {!onOpen && (
-        <Lightbox
-          open={openIndex !== null}
-          onClose={() => setOpenIndex(null)}
-          items={items}
-          index={openIndex ?? 0}
-          onIndexChange={setOpenIndex}
-          fetcher={fetcher}
-          {...lightbox}
-        />
-      )}
-    </>
-  );
-}
-
-/** One line: the stem truncates, the extension never does. */
-function FileNameLabel({ name }: { name: string }) {
-  const [stem, ext] = splitFileName(name);
-  return (
-    <span aria-hidden className="flex max-w-full min-w-0">
-      <span className="min-w-0 truncate">{stem}</span>
-      {ext && <span className="shrink-0">{ext}</span>}
-    </span>
-  );
-}

package/src/components/inline-confirm.tsx

@@ -1,116 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { HTMLAttributes, KeyboardEvent, ReactNode, RefObject } from "react";
-import { cn } from "../lib/cn";
-import { Button } from "./button";
-import type { CommitScope } from "./write-lock";
-
-/**
- * "Confirm in place": a destructive press swaps its row (or a header) for a question with
- * the action and Cancel — for a card that must work without a `ConfirmProvider`, where
- * the question belongs beside the thing it names.
- *
- * Written three times since 0.34 — PasskeysSetting, PushDevicesSetting and
- * NotificationInbox's "Clear all" — and the copies drifted: the passkeys' had no `commit`
- * and no `pending`, so under a locked `WriteLockProvider` (the demo) a passkey could
- * still be deleted (refactor audit 2026-10-30, DUP-10). One copy now:
- *
- * - **Focus moves to Cancel** on open, so the Enter that pressed the trigger cannot also
- *   answer the question.
- * - **Cancel, or Escape on either button, leaves**, and focus goes back to
- *   `returnFocusRef` — the trigger, which the caller renders again in the prompt's place;
- *   otherwise the focus falls to `<body>` with the unmounted prompt. A confirm that
- *   succeeded returns nothing: the row it named is usually gone.
- * - **The action is a `commit` control** in `commit`'s scope, `pending` while `busy`.
- *
- * @internal Not part of the barrel; the cards that use it are.
- */
-export interface InlineConfirmProps extends Omit<HTMLAttributes<HTMLElement>, "children" | "prompt"> {
-  /** The question, announced when it appears (`role="alert"`). */
-  prompt: ReactNode;
-  /** The action's words ("Delete", "Remove", "Clear all"). */
-  confirmLabel: ReactNode;
-  /** The action's accessible name, when its words do not say what it acts on. */
-  confirmName?: string;
-  cancelLabel: ReactNode;
-  onConfirm: () => void;
-  /** Cancel, or Escape on either button: the caller closes the prompt. */
-  onLeave: () => void;
-  /** The action's request runs: the action is `pending`. */
-  busy?: boolean;
-  /** The action's write-lock scope ({@link Button}'s `commit`). */
-  commit?: CommitScope;
-  /** Where focus goes once the prompt has left by Cancel or Escape: the trigger. */
-  returnFocusRef?: RefObject<HTMLElement | null>;
-  /** The element the prompt replaces: a list row (`li`) or a header (`div`). */
-  as?: "li" | "div";
-}
-
-export function InlineConfirm({
-  prompt,
-  confirmLabel,
-  confirmName,
-  cancelLabel,
-  onConfirm,
-  onLeave,
-  busy = false,
-  commit,
-  returnFocusRef,
-  as: Tag = "div",
-  className,
-  ...rest
-}: InlineConfirmProps) {
-  const cancelRef = useRef<HTMLButtonElement>(null);
-  // Set by a leave, read when the prompt unmounts: by then the caller has rendered the
-  // trigger again and its ref is attached (refs attach before passive effects run).
-  const left = useRef(false);
-
-  useEffect(() => {
-    cancelRef.current?.focus();
-  }, []);
-  useEffect(() => {
-    const leaving = left;
-    // Read at unmount on purpose: the node wanted is the trigger rendered in this
-    // prompt's place, not whatever the ref held when the prompt opened.
-    const trigger = returnFocusRef;
-    return () => {
-      if (leaving.current) trigger?.current?.focus();
-    };
-  }, [returnFocusRef]);
-
-  const leave = () => {
-    left.current = true;
-    onLeave();
-  };
-  const escapeLeaves = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      leave();
-    }
-  };
-
-  return (
-    <Tag {...rest} className={cn("space-y-2", className)}>
-      <p role="alert" className="text-sm">
-        {prompt}
-      </p>
-      <div className="flex flex-wrap gap-2">
-        <Button
-          type="button"
-          size="sm"
-          variant="danger"
-          commit={commit}
-          pending={busy}
-          aria-label={confirmName}
-          onClick={onConfirm}
-          onKeyDown={escapeLeaves}
-        >
-          {confirmLabel}
-        </Button>
-        <Button ref={cancelRef} type="button" size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
-          {cancelLabel}
-        </Button>
-      </div>
-    </Tag>
-  );
-}

package/src/components/inline-edit-field-labels.ts

@@ -1,11 +0,0 @@
-// The English words of ./inline-edit-field, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./inline-edit-field re-exports them.
-
-import type { InlineEditLabels } from "./inline-edit-field";
-
-export const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels = {
-  edit: (label) => `Edit ${label}`,
-  failed: "The change could not be saved.",
-  empty: "Empty",
-};