@eifi1/ui-kit 0.21.0 → 0.23.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swatch-picker.tsx"],"sourcesContent":["import { useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\n\nexport interface SwatchPickerLabels {\n  /** The \"no colour\" 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}\n\nexport const DEFAULT_SWATCH_PICKER_LABELS: SwatchPickerLabels = {\n  none: \"No colour\",\n  mixed: \"Mixed: the selected items have different colours\",\n};\n\nexport interface SwatchOption<T extends string> {\n  value: T;\n  /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an\n   *  inline background, so it does not have to be a class the kit's CSS knows.\n   *  Leave it out when `swatchClassName` paints the dot instead. For a colour that\n   *  must match a `StatusDot` / `Chip` hue elsewhere, `statusDotColor(\"teal\")` rather\n   *  than `\"var(--hue-teal)\"` written out — one table, so the two cannot drift. */\n  color?: string;\n  /** The colour's name, in the user's language. Shown in the bubble and read out;\n   *  required, because a swatch with no name is a colour only some people can read. */\n  label: string;\n  /** Classes for the swatch dot, for a palette that lives in classes rather than\n   *  values (a light/dark pair). An inline `color` would win over a class, so pass\n   *  one or the other. */\n  swatchClassName?: string;\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Groceries\"). The tile wears a dot while it has one. */\n  note?: string;\n  disabled?: boolean;\n}\n\n/**\n * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's\n * is omitted rather than shadowed, as on {@link ToggleGroup}.\n */\nexport interface SwatchPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: SwatchOption<T>[];\n  /** The chosen colour, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no colour\" tile whose value is `null`. Clearing a colour has to be\n   *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */\n  allowNone?: boolean;\n  /**\n   * \"Some of each\" — a bulk edit over rows whose colours differ. Nothing is checked\n   * (not even \"none\", whatever `value` says), and the group is described as mixed.\n   * Distinct from `value={null}`, which is an answer: \"no colour\".\n   */\n  mixed?: boolean;\n  /** See {@link IconPickerProps.activation}. Default \"automatic\". */\n  activation?: \"automatic\" | \"manual\";\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<SwatchPickerLabels>;\n}\n\n/**\n * A row of colour swatches that is one radio group.\n *\n * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading\n * above it. Each swatch is named by its `label` and shows it in a bubble on hover and\n * focus, so the name is not the screen reader's alone.\n *\n * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one\n * while nothing is checked; the arrow keys move between swatches and, by default,\n * choose as they go; Home and End jump to the ends. Left and right follow the page's\n * direction.\n */\nexport function SwatchPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  className,\n  ...rest\n}: SwatchPickerProps<T>) {\n  const text = useKitLabels(\"swatchPicker\", DEFAULT_SWATCH_PICKER_LABELS, labels);\n  const mixedId = useId();\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...options.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled })),\n  ];\n  return (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      aria-disabled={disabled || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], mixed && mixedId].filter(Boolean).join(\" \") || undefined\n      }\n      className={cn(\"flex flex-wrap items-center gap-1.5\", className)}\n    >\n      <TileRadioGroup\n        items={items}\n        checked={mixed ? undefined : value}\n        onSelect={onChange}\n        activation={activation}\n        disabled={disabled}\n        size={size}\n        tileClassName={tileClassName ? () => tileClassName : undefined}\n        renderTile={(item) => {\n          const opt = item.key === null ? undefined : byValue.get(item.key);\n          return (\n            <span\n              aria-hidden\n              // A hairline round the dot, drawn over whatever colour it is: a pale\n              // yellow swatch on a white surface is otherwise a hole in the row.\n              className={cn(\n                \"rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15\",\n                TILE_SIZE[size].swatch,\n                opt?.swatchClassName,\n              )}\n              style={{ background: opt?.color }}\n            />\n          );\n        }}\n      />\n      {/* `hidden`, not `sr-only`: a description is read from hidden text, and this\n          way it takes no room in the row. */}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA8GI,SAoBQ,KApBR;AA9GJ,SAAS,OAAO,eAAe;AAE/B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,WAAW,sBAAsB;AAUnC,MAAM,+BAAmD;AAAA,EAC9D,MAAM;AAAA,EACN,OAAO;AACT;AAuEO,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,OAAO,aAAa,gBAAgB,8BAA8B,MAAM;AAC9E,QAAM,UAAU,MAAM;AACtB,QAAM,UAAU,QAAQ,MAAM,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC;AAClF,QAAM,QAAuB;AAAA,IAC3B,GAAI,YAAY,CAAC,EAAE,KAAK,MAAM,OAAO,KAAK,KAAK,CAAC,IAAI,CAAC;AAAA,IACrD,GAAG,QAAQ,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,OAAO,EAAE,OAAO,MAAM,EAAE,MAAM,UAAU,EAAE,SAAS,EAAE;AAAA,EAC9F;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,iBAAe,YAAY;AAAA,MAC3B,oBACE,CAAC,KAAK,kBAAkB,GAAG,SAAS,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,MAE5E,WAAW,GAAG,uCAAuC,SAAS;AAAA,MAE9D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,SAAS,QAAQ,SAAY;AAAA,YAC7B,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAe,gBAAgB,MAAM,gBAAgB;AAAA,YACrD,YAAY,CAAC,SAAS;AACpB,oBAAM,MAAM,KAAK,QAAQ,OAAO,SAAY,QAAQ,IAAI,KAAK,GAAG;AAChE,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBAGX,WAAW;AAAA,oBACT;AAAA,oBACA,UAAU,IAAI,EAAE;AAAA,oBAChB,KAAK;AAAA,kBACP;AAAA,kBACA,OAAO,EAAE,YAAY,KAAK,MAAM;AAAA;AAAA,cAClC;AAAA,YAEJ;AAAA;AAAA,QACF;AAAA,QAGC,SACC,oBAAC,UAAK,IAAI,SAAS,QAAM,MACtB,eAAK,OACR;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/swatch-picker.tsx"],"sourcesContent":["import { useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\nimport { hasContent, LabelStrip } from \"./field-parts\";\n\nexport interface SwatchPickerLabels {\n  /** The \"no colour\" 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}\n\nexport const DEFAULT_SWATCH_PICKER_LABELS: SwatchPickerLabels = {\n  none: \"No colour\",\n  mixed: \"Mixed: the selected items have different colours\",\n};\n\nexport interface SwatchOption<T extends string> {\n  value: T;\n  /** Any CSS colour — a token (`var(--chart-3)`), a hex, an `oklch()`. Painted as an\n   *  inline background, so it does not have to be a class the kit's CSS knows.\n   *  Leave it out when `swatchClassName` paints the dot instead. For a colour that\n   *  must match a `StatusDot` / `Chip` hue elsewhere, `statusDotColor(\"teal\")` rather\n   *  than `\"var(--hue-teal)\"` written out — one table, so the two cannot drift. */\n  color?: string;\n  /** The colour's name, in the user's language. Shown in the bubble and read out;\n   *  required, because a swatch with no name is a colour only some people can read. */\n  label: string;\n  /** Classes for the swatch dot, for a palette that lives in classes rather than\n   *  values (a light/dark pair). An inline `color` would win over a class, so pass\n   *  one or the other. */\n  swatchClassName?: string;\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Groceries\"). 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 colour cannot be chosen right now — the whole picker's `disabledReason`,\n   * one tile at a time (the kit's later list after keksdose K3: a colour another\n   * category already wears, a flag only an owner may set). {@link Button}'s rule: a tile\n   * that is merely `disabled` is a dead square a keyboard never lands on, so nobody\n   * learns why it is dimmed.\n   *\n   * The tile looks disabled but is `aria-disabled`, not `disabled`: Tab and the arrow\n   * keys still reach it, its bubble shows the reason under its name, and the reason\n   * describes it. Choosing it — a click, Space or Enter, or an arrow under automatic\n   * activation — does nothing: the focus moves onto it and the checked colour stays\n   * where it was, as under the whole-picker lock. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n}\n\n/**\n * `onChange` is the picker's own — the chosen VALUE, not a DOM event — so the div's\n * is omitted rather than shadowed, as on {@link ToggleGroup}.\n */\nexport interface SwatchPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: SwatchOption<T>[];\n  /** The chosen colour, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no colour\" tile whose value is `null`. Clearing a colour has to be\n   *  as reachable as setting one, and a radio cannot be unchecked by clicking it. */\n  allowNone?: boolean;\n  /**\n   * \"Some of each\" — a bulk edit over rows whose colours differ. Nothing is checked\n   * (not even \"none\", whatever `value` says), and the group is described as mixed.\n   * Distinct from `value={null}`, which is an answer: \"no colour\".\n   */\n  mixed?: boolean;\n  /** See {@link IconPickerProps.activation}. Default \"automatic\". */\n  activation?: \"automatic\" | \"manual\";\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<SwatchPickerLabels>;\n  /**\n   * An 11px static label in a strip over the swatches, named by it (keksdose K2): the\n   * transaction row's flag picker stands between labelled fields and hand-builds this\n   * (`FieldLabel` + `pt-5`, transaction-flags.tsx:155) because the picker had no label.\n   * The label sits on the same line as a field's own (`top-1`, `inset-x-3`); the\n   * swatches start 20px down, below its whole line box — see `LABEL_STRIP_PAD`. With a\n   * label, `className` styles the wrapper, as on a labelled {@link ToggleGroup}; an\n   * explicit `aria-label` / `aria-labelledby` still names the group instead.\n   */\n  label?: ReactNode;\n  /** A {@link FieldHint} beside the label. Only with `label`. */\n  hint?: ReactNode;\n  /**\n   * Why the colour cannot be changed right now — {@link Button}'s `disabledReason`, for\n   * a picker that saves itself on change (keksdose K3, the flag picker in a row a\n   * read-only viewer may see). The swatches stay reachable and the arrow keys still\n   * walk them, but nothing reaches `onChange`; the reason is shown in the kit\n   * {@link Tooltip} under the row (each swatch's own name bubble sits above it) and\n   * describes the group. Wins over `disabled`.\n   */\n  disabledReason?: ReactNode;\n  /** This picker COMMITS — choosing a colour saves it. Under a locked\n   *  {@link WriteLockProvider} it takes the `disabledReason` path with the lock's\n   *  reason, as {@link Button}'s `commit` does. */\n  commit?: boolean;\n}\n\n/**\n * A row of colour swatches that is one radio group.\n *\n * Name the group with `aria-label` or `aria-labelledby` — usually the visible heading\n * above it. Each swatch is named by its `label` and shows it in a bubble on hover and\n * focus, so the name is not the screen reader's alone.\n *\n * Keyboard (the APG radio group): Tab reaches the checked swatch, or the first one\n * while nothing is checked; the arrow keys move between swatches and, by default,\n * choose as they go; Home and End jump to the ends. Left and right follow the page's\n * direction.\n */\nexport function SwatchPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  label,\n  hint,\n  disabledReason: ownDisabledReason,\n  commit,\n  className,\n  ...rest\n}: SwatchPickerProps<T>) {\n  const text = useKitLabels(\"swatchPicker\", DEFAULT_SWATCH_PICKER_LABELS, labels);\n  const mixedId = useId();\n  const labelId = useId();\n  const reasonId = useId();\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const labelled = hasContent(label);\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...options.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  const tiles = (\n    <TileRadioGroup\n      items={items}\n      checked={mixed ? undefined : value}\n      // A locked picker saves on change, so the change is swallowed — the arrow keys\n      // still move the focus (and, automatic, would choose), and nothing is chosen. A\n      // locked TILE is refused by the tiles themselves; asked again here so a reason\n      // can never become a change, whatever the tiles do.\n      onSelect={(next) => {\n        if (!locked && !hasContent(next === null ? undefined : byValue.get(next)?.disabledReason)) onChange(next);\n      }}\n      activation={activation}\n      // A reason wins over `disabled`: the tiles stay in the tab order.\n      disabled={disabled && !locked}\n      size={size}\n      tileClassName={\n        tileClassName || locked\n          ? (_item, selected) =>\n              cn(\n                // The disabled tile's look, without its `disabled`: dimmed, a\n                // not-allowed cursor, and no hover offer on a tile that cannot be\n                // chosen. Not on the selected tile, whose frame IS its state.\n                locked && \"cursor-not-allowed opacity-50\",\n                locked && !selected && \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\",\n                tileClassName,\n              )\n          : undefined\n      }\n      renderTile={(item) => {\n        const opt = item.key === null ? undefined : byValue.get(item.key);\n        return (\n          <span\n            aria-hidden\n            // A hairline round the dot, drawn over whatever colour it is: a pale\n            // yellow swatch on a white surface is otherwise a hole in the row.\n            className={cn(\n              \"rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15\",\n              TILE_SIZE[size].swatch,\n              opt?.swatchClassName,\n            )}\n            style={{ background: opt?.color }}\n          />\n        );\n      }}\n    />\n  );\n  const group = (\n    <div\n      {...rest}\n      role=\"radiogroup\"\n      aria-labelledby={\n        labelled && rest[\"aria-label\"] === undefined && rest[\"aria-labelledby\"] === undefined\n          ? labelId\n          : rest[\"aria-labelledby\"]\n      }\n      aria-disabled={disabled || locked || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], mixed && mixedId, locked && reasonId].filter(Boolean).join(\" \") ||\n        undefined\n      }\n      className={cn(\"flex flex-wrap items-center gap-1.5\", !labelled && className)}\n    >\n      {locked ? (\n        // Inside the group, round the tiles — not round the group, whose box is the\n        // caller's row item. This row inherits the group's gap, wrap and alignment, so\n        // the tiles sit exactly where they sit unlocked. Below the row: each tile's own\n        // bubble (its colour's name) is above it.\n        <Tooltip\n          label={disabledReason}\n          side=\"bottom\"\n          className=\"flex min-w-0 flex-1 gap-[inherit] [align-items:inherit] [flex-wrap:inherit] [justify-content:inherit]\"\n        >\n          <>\n            {tiles}\n            <span id={reasonId} hidden>\n              {disabledReason}\n            </span>\n          </>\n        </Tooltip>\n      ) : (\n        tiles\n      )}\n      {/* `hidden`, not `sr-only`: a description is read from hidden text, and this\n          way it takes no room in the row. */}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n    </div>\n  );\n  if (!labelled) return group;\n  return (\n    <LabelStrip labelId={labelId} label={label} hint={hint} disabled={disabled || locked} pad=\"clear\" className={className}>\n      {group}\n    </LabelStrip>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/switch.d.ts

@@ -56,6 +56,25 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
      * label WITHOUT a literal "*". No mark without a label.
      */
     required?: boolean;
+    /**
+     * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is
+     * the control that "takes effect the moment it is flipped", so it is the first one
+     * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native
+     * `disabled`, out of the tab order, so the reason never reached a keyboard.
+     *
+     * With a reason the switch is `aria-disabled` instead: still focusable, a click or
+     * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in
+     * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row
+     * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the
+     * switch anew (it moves in or out of the Tooltip), as a locked Button is.
+     */
+    disabledReason?: ReactNode;
+    /**
+     * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it
+     * is locked the `disabledReason` way with the lock's reason (which wins over its
+     * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.
+     */
+    commit?: boolean;
 }
 /**
  * A native checkbox drawn as a track and thumb, announced as a switch.

package/dist/components/switch.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { cn } from "../lib/cn.js";
 import { hasMessage, mergeDescribedBy } from "./choice-parts.js";
+import { LockedReason, useLockReason } from "./field-parts.js";
 const SIZES = {
   // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.
   sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:start-[14px]" },
@@ -23,35 +24,52 @@ const Switch = forwardRef(function Switch2({
   id,
   disabled,
   required,
+  disabledReason,
+  commit,
+  onClick,
   ...rest
 }, ref) {
   const generated = useId();
   const inputId = id ?? generated;
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
+  const looksDisabled = Boolean(disabled) || locked;
   const descriptionId = `${inputId}-description`;
   const showDescription = hasMessage(description);
   const bare = label === void 0 && !showDescription;
   const geometry = SIZES[size];
-  const control = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", bare && className), children: [
+  const track = /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", bare && !locked && className), children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         ref,
         id: bare ? id : inputId,
-        disabled,
+        disabled: locked ? void 0 : disabled,
         required,
         ...rest,
         type: "checkbox",
         role: "switch",
-        "aria-describedby": mergeDescribedBy(rest["aria-describedby"], showDescription && descriptionId),
+        "aria-disabled": locked || rest["aria-disabled"] || void 0,
+        "aria-describedby": mergeDescribedBy(
+          rest["aria-describedby"],
+          showDescription && descriptionId,
+          locked && lock.reasonId
+        ),
+        onClick: locked ? void 0 : onClick,
         onChange: (e) => {
+          if (locked) {
+            e.currentTarget.checked = !e.currentTarget.checked;
+            return;
+          }
           onChange?.(e);
           onCheckedChange?.(e.target.checked);
         },
-        className: cn(TRACK, geometry.track, inputClassName)
+        className: cn(TRACK, geometry.track, locked && "cursor-not-allowed", inputClassName)
       }
     ),
     /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(THUMB, geometry.thumb) })
   ] });
+  const control = locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: cn("shrink-0", bare && className), children: track }) : track;
   if (bare) return control;
   const cell = /* @__PURE__ */ jsx("span", { className: "flex h-5 shrink-0 items-center", children: control });
   const words = /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
@@ -61,7 +79,7 @@ const Switch = forwardRef(function Switch2({
         htmlFor: inputId,
         className: cn(
           "block text-sm leading-5 text-[var(--text-primary)]",
-          disabled ? "cursor-not-allowed" : "cursor-pointer select-none"
+          looksDisabled ? "cursor-not-allowed" : "cursor-pointer select-none"
         ),
         children: [
           label,
@@ -71,7 +89,7 @@ const Switch = forwardRef(function Switch2({
     ),
     showDescription && /* @__PURE__ */ jsx("span", { id: descriptionId, className: "mt-0.5 block text-xs text-[var(--text-muted)]", children: description })
   ] });
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start gap-3", disabled && "opacity-60", className), children: switchPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-start gap-3", looksDisabled && "opacity-60", className), children: switchPosition === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     words,
     cell
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `2px` in from each end of the track, so its\n *  checked offset is `track width − thumb − 2px`. `start-*`, never `left-*` or a\n *  `translate-x`: an inline-start offset follows the writing direction, so in a\n *  right-to-left form the thumb travels right-to-left with no `rtl:` override to\n *  keep in step. */\nconst SIZES = {\n  // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-[14px]\" },\n  // 36×20 track, 16px thumb.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-[18px]\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const control = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        disabled={disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-describedby={mergeDescribedBy(rest[\"aria-describedby\"], showDescription && descriptionId)}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 20px) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  const cell = <span className=\"flex h-5 shrink-0 items-center\">{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            disabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n          {description}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", disabled && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":";AAmHI,SAyDI,UAxDF,KADF;AAnHJ,SAAS,YAAY,aAAa;AAElC,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAiB7C,MAAM,QAAQ;AAAA;AAAA,EAEZ,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AAAA;AAAA,EAElE,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AACpE;AAWA,MAAM,QACJ;AASF,MAAM,QACJ;AA2CK,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,kBAAkB,WAAW,WAAW;AAC9C,QAAM,OAAO,UAAU,UAAa,CAAC;AACrC,QAAM,WAAW,MAAM,IAAI;AAE3B,QAAM,UACJ,qBAAC,UAAK,WAAW,GAAG,iCAAiC,QAAQ,SAAS,GACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,OAAO,KAAK;AAAA,QAChB;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAGJ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,oBAAkB,iBAAiB,KAAK,kBAAkB,GAAG,mBAAmB,aAAa;AAAA,QAC7F,UAAU,CAAC,MAAqC;AAC9C,qBAAW,CAAC;AACZ,4BAAkB,EAAE,OAAO,OAAO;AAAA,QACpC;AAAA,QACA,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc;AAAA;AAAA,IACrD;AAAA,IACA,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,OAAO,SAAS,KAAK,GAAG;AAAA,KAC1D;AAGF,MAAI,KAAM,QAAO;AAKjB,QAAM,OAAO,oBAAC,UAAK,WAAU,kCAAkC,mBAAQ;AACvE,QAAM,QACJ,qBAAC,UAAK,WAAU,kBACb;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,WAAW,uBAAuB;AAAA,QACpC;AAAA,QAEC;AAAA;AAAA,UACA,YACC,oBAAC,UAAK,eAAW,MAAC,WAAU,+BAA8B,eAE1D;AAAA;AAAA;AAAA,IAEJ;AAAA,IAED,mBACC,oBAAC,UAAK,IAAI,eAAe,WAAU,iDAChC,uBACH;AAAA,KAEJ;AAGF,SACE,oBAAC,SAAI,WAAW,GAAG,0BAA0B,YAAY,cAAc,SAAS,GAC7E,6BAAmB,QAClB,iCACG;AAAA;AAAA,IACA;AAAA,KACH,IAEA,iCACG;AAAA;AAAA,IACA;AAAA,KACH,GAEJ;AAEJ,CAAC;AACD,OAAO,cAAc;","names":["Switch"]}
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\nimport type { ChangeEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { LockedReason, useLockReason } from \"./field-parts\";\n\n/**\n * An on/off switch that is still `<input type=\"checkbox\">`, with `role=\"switch\"`.\n *\n * Kastlan's was a Radix `<button>`; this keeps the native element for the reasons\n * `Checkbox` gives (form submission, `required`, reset, `<label for>`), and adds the\n * one thing a checkbox is not: `role=\"switch\"`, which screen readers announce as\n * \"on/off\" rather than \"checked/not checked\". Use it for a setting that takes effect\n * the moment it is flipped; a choice that waits for a Save button is a checkbox.\n */\n\n/** Geometry per size. The thumb sits `2px` in from each end of the track, so its\n *  checked offset is `track width − thumb − 2px`. `start-*`, never `left-*` or a\n *  `translate-x`: an inline-start offset follows the writing direction, so in a\n *  right-to-left form the thumb travels right-to-left with no `rtl:` override to\n *  keep in step. */\nconst SIZES = {\n  // 28×16 track, 12px thumb: the dense setting rows in Kastlan's tables.\n  sm: { track: \"h-4 w-7\", thumb: \"size-3 peer-checked:start-[14px]\" },\n  // 36×20 track, 16px thumb.\n  md: { track: \"h-5 w-9\", thumb: \"size-4 peer-checked:start-[18px]\" },\n} as const;\n\nexport type SwitchSize = keyof typeof SIZES;\n\n// The track IS the input — `appearance-none` and a pill — so its box is the pointer\n// target and the focus ring lands around the whole control, not the thumb alone.\n//\n// Unchecked it takes `--border-strong`, not `--border`: a hairline-coloured track on\n// a surface-coloured card is a switch you have to look for. Checked it takes the\n// brand fill, which is the only difference in COLOUR; the thumb's position is the\n// difference in SHAPE, so the state never rests on colour alone.\nconst TRACK =\n  \"peer block shrink-0 cursor-pointer appearance-none rounded-full bg-[var(--border-strong)] transition-colors \" +\n  \"checked:bg-[var(--brand)] \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed\";\n\n// The thumb, laid over the input and ignoring the pointer so every click still reaches\n// the input. It swaps to `--brand-contrast` on the brand fill: the surface colour would\n// match the fill in some presets, and the contrast token is the one guaranteed to read\n// against --brand.\nconst THUMB =\n  \"pointer-events-none absolute start-0.5 top-1/2 -translate-y-1/2 rounded-full bg-[var(--bg-surface)] shadow-sm \" +\n  \"transition-[inset-inline-start,background-color] motion-reduce:transition-none \" +\n  \"peer-checked:bg-[var(--brand-contrast)]\";\n\nexport interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\" | \"role\"> {\n  /** `\"md\"` (36×20, default) or `\"sm\"` (28×16) — Kastlan's `default` and `sm`. */\n  size?: SwitchSize;\n  /** The words beside the switch, as a `<label for>` — see {@link Checkbox}'s\n   *  `label` for why it does not wrap the input. Without it, give the switch an\n   *  `aria-label`. */\n  label?: ReactNode;\n  /** Secondary text under the label, attached with `aria-describedby` (merged with\n   *  any the caller passed). */\n  description?: ReactNode;\n  /** Which end of the row the switch sits at when there is a label. `\"end\"` (the\n   *  default) is the settings-list shape Kastlan's profile page uses — the words at\n   *  the start, the control at the far end; `\"start\"` puts it before the words, like\n   *  a checkbox. Logical, so it follows the writing direction. */\n  switchPosition?: \"start\" | \"end\";\n  /** The new state as a boolean — Radix's `onCheckedChange`, so Kastlan's call sites\n   *  move without unwrapping the event. Fires alongside `onChange`. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Classes for the `<input>` (the track). `className` styles the outermost element:\n   *  the row when there is a label, the switch's own wrapper when there is not. */\n  inputClassName?: string;\n  /**\n   * Must be ticked to submit — a consent, an acceptance before paying. Reaches the\n   * `<input>` as the native `required` (so a `<form>` refuses to submit without it and a\n   * screen reader announces \"required\"), and draws the kit's required mark after the\n   * label, the same `aria-hidden` star as {@link Label}'s: the word is announced from\n   * the control, so a star inside the name would only be read out as noise. Write the\n   * label WITHOUT a literal \"*\". No mark without a label.\n   */\n  required?: boolean;\n  /**\n   * Why the switch cannot be flipped — {@link Button}'s `disabledReason`. A switch is\n   * the control that \"takes effect the moment it is flipped\", so it is the first one\n   * keksdose K3 names: its settings rows sat behind a `SaveGuard` that forced a native\n   * `disabled`, out of the tab order, so the reason never reached a keyboard.\n   *\n   * With a reason the switch is `aria-disabled` instead: still focusable, a click or\n   * Space flips nothing and fires no `onChange` / `onCheckedChange`, the reason is in\n   * the kit {@link Tooltip} on the track and on its `aria-describedby`, and the row\n   * fades as a disabled one does. It wins over `disabled`. Changing the lock mounts the\n   * switch anew (it moves in or out of the Tooltip), as a locked Button is.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This switch COMMITS — flipping it saves. Under a locked {@link WriteLockProvider} it\n   * is locked the `disabledReason` way with the lock's reason (which wins over its\n   * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.\n   */\n  commit?: boolean;\n}\n\n/**\n * A native checkbox drawn as a track and thumb, announced as a switch.\n *\n * Every other prop reaches the `<input>`, so it works controlled (`checked` +\n * `onChange`/`onCheckedChange`), uncontrolled (`defaultChecked`) and in a plain\n * `<form>` (`name`, `value`).\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    size = \"md\",\n    label,\n    description,\n    switchPosition = \"end\",\n    onCheckedChange,\n    onChange,\n    className,\n    inputClassName,\n    id,\n    disabled,\n    required,\n    disabledReason,\n    commit,\n    onClick,\n    ...rest\n  },\n  ref,\n) {\n  const generated = useId();\n  const inputId = id ?? generated;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  // Locked is disabled the focusable way — the row fades and the words stop inviting a\n  // click, as for `disabled`.\n  const looksDisabled = Boolean(disabled) || locked;\n  const descriptionId = `${inputId}-description`;\n  const showDescription = hasMessage(description);\n  const bare = label === undefined && !showDescription;\n  const geometry = SIZES[size];\n\n  const track = (\n    <span className={cn(\"relative inline-flex shrink-0\", bare && !locked && className)}>\n      <input\n        ref={ref}\n        id={bare ? id : inputId}\n        // A reason wins over `disabled`, as on Button: the switch stays reachable.\n        disabled={locked ? undefined : disabled}\n        required={required}\n        {...rest}\n        // After the spread: a caller's props object must not be able to turn this\n        // back into a plain checkbox, or into a text field.\n        type=\"checkbox\"\n        role=\"switch\"\n        aria-disabled={locked || rest[\"aria-disabled\"] || undefined}\n        aria-describedby={mergeDescribedBy(\n          rest[\"aria-describedby\"],\n          showDescription && descriptionId,\n          locked && lock.reasonId,\n        )}\n        // A locked switch's click is swallowed, as a locked Button's is.\n        onClick={locked ? undefined : onClick}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          if (locked) {\n            // Put the thumb back and report nothing — see Checkbox for why here and not\n            // by cancelling the click. Label clicks and Space arrive as clicks too.\n            e.currentTarget.checked = !e.currentTarget.checked;\n            return;\n          }\n          onChange?.(e);\n          onCheckedChange?.(e.target.checked);\n        }}\n        className={cn(TRACK, geometry.track, locked && \"cursor-not-allowed\", inputClassName)}\n      />\n      <span aria-hidden className={cn(THUMB, geometry.thumb)} />\n    </span>\n  );\n  // The Tooltip goes round the track, not the row — the row is the caller's layout. A\n  // bare switch hands its `className` to the wrapper, then the outermost element.\n  const control = locked ? (\n    <LockedReason lock={lock} className={cn(\"shrink-0\", bare && className)}>\n      {track}\n    </LockedReason>\n  ) : (\n    track\n  );\n\n  if (bare) return control;\n\n  // The switch's cell is one label line tall (text-sm, 20px) so it centres on the\n  // FIRST line of a label that wraps, and a description underneath does not drag it\n  // down to the middle of the paragraph.\n  const cell = <span className=\"flex h-5 shrink-0 items-center\">{control}</span>;\n  const words = (\n    <span className=\"min-w-0 flex-1\">\n      {label !== undefined && (\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block text-sm leading-5 text-[var(--text-primary)]\",\n            looksDisabled ? \"cursor-not-allowed\" : \"cursor-pointer select-none\",\n          )}\n        >\n          {label}\n          {required && (\n            <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      {showDescription && (\n        <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n          {description}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <div className={cn(\"flex items-start gap-3\", looksDisabled && \"opacity-60\", className)}>\n      {switchPosition === \"end\" ? (\n        <>\n          {words}\n          {cell}\n        </>\n      ) : (\n        <>\n          {cell}\n          {words}\n        </>\n      )}\n    </div>\n  );\n});\nSwitch.displayName = \"Switch\";\n"],"mappings":";AA+II,SAgFI,UA/EF,KADF;AA/IJ,SAAS,YAAY,aAAa;AAElC,SAAS,UAAU;AACnB,SAAS,YAAY,wBAAwB;AAC7C,SAAS,cAAc,qBAAqB;AAiB5C,MAAM,QAAQ;AAAA;AAAA,EAEZ,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AAAA;AAAA,EAElE,IAAI,EAAE,OAAO,WAAW,OAAO,mCAAmC;AACpE;AAWA,MAAM,QACJ;AASF,MAAM,QACJ;AA8DK,MAAM,SAAS,WAA0C,SAASA,QACvE;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,SAAS,KAAK;AAGpB,QAAM,gBAAgB,QAAQ,QAAQ,KAAK;AAC3C,QAAM,gBAAgB,GAAG,OAAO;AAChC,QAAM,kBAAkB,WAAW,WAAW;AAC9C,QAAM,OAAO,UAAU,UAAa,CAAC;AACrC,QAAM,WAAW,MAAM,IAAI;AAE3B,QAAM,QACJ,qBAAC,UAAK,WAAW,GAAG,iCAAiC,QAAQ,CAAC,UAAU,SAAS,GAC/E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,OAAO,KAAK;AAAA,QAEhB,UAAU,SAAS,SAAY;AAAA,QAC/B;AAAA,QACC,GAAG;AAAA,QAGJ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe,UAAU,KAAK,eAAe,KAAK;AAAA,QAClD,oBAAkB;AAAA,UAChB,KAAK,kBAAkB;AAAA,UACvB,mBAAmB;AAAA,UACnB,UAAU,KAAK;AAAA,QACjB;AAAA,QAEA,SAAS,SAAS,SAAY;AAAA,QAC9B,UAAU,CAAC,MAAqC;AAC9C,cAAI,QAAQ;AAGV,cAAE,cAAc,UAAU,CAAC,EAAE,cAAc;AAC3C;AAAA,UACF;AACA,qBAAW,CAAC;AACZ,4BAAkB,EAAE,OAAO,OAAO;AAAA,QACpC;AAAA,QACA,WAAW,GAAG,OAAO,SAAS,OAAO,UAAU,sBAAsB,cAAc;AAAA;AAAA,IACrF;AAAA,IACA,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,OAAO,SAAS,KAAK,GAAG;AAAA,KAC1D;AAIF,QAAM,UAAU,SACd,oBAAC,gBAAa,MAAY,WAAW,GAAG,YAAY,QAAQ,SAAS,GAClE,iBACH,IAEA;AAGF,MAAI,KAAM,QAAO;AAKjB,QAAM,OAAO,oBAAC,UAAK,WAAU,kCAAkC,mBAAQ;AACvE,QAAM,QACJ,qBAAC,UAAK,WAAU,kBACb;AAAA,cAAU,UACT;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,uBAAuB;AAAA,QACzC;AAAA,QAEC;AAAA;AAAA,UACA,YACC,oBAAC,UAAK,eAAW,MAAC,WAAU,+BAA8B,eAE1D;AAAA;AAAA;AAAA,IAEJ;AAAA,IAED,mBACC,oBAAC,UAAK,IAAI,eAAe,WAAU,iDAChC,uBACH;AAAA,KAEJ;AAGF,SACE,oBAAC,SAAI,WAAW,GAAG,0BAA0B,iBAAiB,cAAc,SAAS,GAClF,6BAAmB,QAClB,iCACG;AAAA;AAAA,IACA;AAAA,KACH,IAEA,iCACG;AAAA;AAAA,IACA;AAAA,KACH,GAEJ;AAEJ,CAAC;AACD,OAAO,cAAc;","names":["Switch"]}

package/dist/components/text-link.d.ts

@@ -1,16 +1,20 @@
 import * as react from 'react';
 import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { aF as KitLinkComponent } from '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import { bi as KitLinkComponent } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import './chip.js';
 import './field-sync.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -24,7 +28,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -32,11 +35,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -55,14 +54,20 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';
 
 /**
  * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a

package/dist/components/tile-radio.d.ts

@@ -2,49 +2,124 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 
 /**
- * The machinery {@link SwatchPicker} and {@link IconPicker} share: a row of square
- * tiles that behaves as ONE radio group. Private to the package — not re-exported
- * from the barrel.
+ * A row of square tiles that behaves as ONE radio group — the machinery
+ * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the
+ * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles
+ * show something of the app's own — a mark, a pattern, a symbol set the kit does not
+ * ship).
  *
  * Keksdose had three of these (the category colours, the category symbols, the
  * transaction flags) and all three were rows of `aria-pressed` buttons: a separate
  * tab stop per tile, and "pressed" on a choice that is really one-of-n. The APG radio
  * group is the shape a screen reader expects for that ("Red, radio, 2 of 7, checked")
  * and the one a keyboard expects too — a single tab stop, arrows to move.
+ *
+ * ## The container is yours
+ *
+ * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns
+ * (a wrapping row, a grid, a row beside a search box). That element must carry the
+ * group's semantics, as SwatchPicker's does:
+ *
+ * ```tsx
+ * <div role="radiogroup" aria-labelledby={headingId} className="flex flex-wrap gap-1.5">
+ *   <TileRadioGroup
+ *     items={[{ key: "dots", label: "Dots" }, { key: "lines", label: "Lines" }]}
+ *     checked={pattern}
+ *     onSelect={(key) => key && setPattern(key)}
+ *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}
+ *   />
+ * </div>
+ * ```
+ *
+ * `role="radiogroup"` and a name (`aria-label` or `aria-labelledby`) — without them a
+ * screen reader hears radios that belong to nothing, and no "2 of 7". Set
+ * `aria-disabled` on it as well when the whole group is `disabled`.
+ *
+ * ## What a tile is
+ *
+ * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by
+ * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing
+ * that label in a bubble on hover and focus — a row of unlabelled squares is the
+ * complaint that put the bubble there. It is for choices that are SEEN: a colour, a
+ * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines
+ * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}
+ * (`type="radio"`): a card names its option by its title and describes it by its text,
+ * where a tile would hide the text behind a bubble and repeat it.
+ *
+ * No strings of its own: every name is an item's `label`, the "none" tile's included.
+ *
+ * ## A tile that cannot be chosen
+ *
+ * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it
+ * and Tab never lands on it, so a dimmed square says nothing about why. Give it a
+ * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in
+ * its bubble and its description — and choosing it does nothing (0.23, the kit's later
+ * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).
  */
+/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */
 type TileSize = "sm" | "md" | "lg";
-/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). */
+/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`
+ *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them
+ *  in `renderTile` so a tile of the app's own matches theirs. */
 declare const TILE_SIZE: Record<TileSize, {
     tile: string;
     glyph: string;
     swatch: string;
 }>;
-/** One tile, whatever it shows. `key` is `null` for the "none" entry. */
+/** One tile, whatever it shows. `key` is `null` for the "none" entry — a tile of its
+ *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */
 interface TileItem<T extends string> {
     key: T | null;
     label: string;
     /** Said after the name, and shown in the bubble under it. Marks the tile with a
      *  dot, so the note is visible without hovering every tile to find it. */
     note?: string;
+    /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,
+     *  never the tab stop. */
     disabled?: boolean;
+    /**
+     * Why this tile cannot be chosen right now — a colour another category already wears,
+     * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not
+     * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble
+     * under its name (and its `note`) and describes it, and a click, Space / Enter or an
+     * arrow under automatic activation chooses nothing — the focus moves, the checked
+     * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's
+     * `disabled` still wins over it.
+     */
+    disabledReason?: ReactNode;
 }
 interface TileRadioGroupProps<T extends string> {
+    /** The tiles, in reading order. Render them inside a `role="radiogroup"` element
+     *  with a name — see the module note. */
     items: TileItem<T>[];
     /** The checked key, or `undefined` for "nothing is checked" (the mixed state, or
      *  a value that is not among the options). */
     checked: T | null | undefined;
     onSelect: (key: T | null) => void;
-    /** "automatic": an arrow key moves AND checks, the APG default. "manual": arrows
-     *  move focus only, Space or Enter checks — for a picker whose change is expensive
-     *  (a bulk edit that saves on every change). */
-    activation: "automatic" | "manual";
-    disabled: boolean;
-    size: TileSize;
-    /** What goes inside a tile. The frame, the tick and the note's dot are drawn here. */
+    /** "automatic" (default): an arrow key moves AND checks, the APG default. "manual":
+     *  arrows move focus only, Space or Enter checks — for a picker whose change is
+     *  expensive (a bulk edit that saves on every change). */
+    activation?: "automatic" | "manual";
+    /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */
+    disabled?: boolean;
+    /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default "md"; "lg" is the touch-target
+     *  size a phone surface wants. */
+    size?: TileSize;
+    /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by
+     *  `label`. Not called for the `null` ("none") item, which shows the kit's "no"
+     *  glyph. The frame, the tick and the note's dot are drawn around it. */
     renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;
-    /** Extra classes for a tile, per item. */
+    /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here
+     *  beats `size`'s (a tile that grows in a narrow card). */
     tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;
 }
+/**
+ * The tiles of one radio group, without the group element — render them inside a
+ * `role="radiogroup"` with a name (the module note above has the example). One tab stop
+ * (the checked tile, else the first that can be chosen), arrows to move — left and
+ * right follow the page's direction — Home and End to the ends, and by default the
+ * arrows choose as they go.
+ */
 declare function TileRadioGroup<T extends string>({ items, checked, onSelect, activation, disabled, size, renderTile, tileClassName, }: TileRadioGroupProps<T>): react.JSX.Element;
 
 export { TILE_SIZE, type TileItem, TileRadioGroup, type TileRadioGroupProps, type TileSize };

package/dist/components/tile-radio.js

@@ -13,21 +13,31 @@ const TILE_SIZE = {
 const TILE_BASE = "relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] disabled:cursor-not-allowed disabled:opacity-50";
 const TILE_IDLE = "border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]";
 const TILE_SELECTED = "border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]";
+const TILE_LOCKED = "cursor-not-allowed opacity-50";
+const TILE_LOCKED_IDLE = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
+function isLocked(item) {
+  const r = item.disabledReason;
+  return r !== void 0 && r !== null && r !== false && r !== "";
+}
+function isOff(item) {
+  return Boolean(item.disabled) && !isLocked(item);
+}
 function TileRadioGroup({
   items,
   checked,
   onSelect,
-  activation,
-  disabled,
-  size,
+  activation = "automatic",
+  disabled = false,
+  size = "md",
   renderTile,
   tileClassName
 }) {
   const refs = useRef([]);
   const noteId = useId();
+  const reasonId = useId();
   const s = TILE_SIZE[size];
   const checkedIndex = checked === void 0 ? -1 : items.findIndex((it) => it.key === checked);
-  const tabStop = checkedIndex >= 0 && !items[checkedIndex].disabled ? checkedIndex : items.findIndex((it) => !it.disabled);
+  const tabStop = checkedIndex >= 0 && !isOff(items[checkedIndex]) ? checkedIndex : items.findIndex((it) => !isOff(it));
   const onKeyDown = (e, index) => {
     const horizontal = horizontalStep(e.key, e.currentTarget);
     let step;
@@ -51,7 +61,7 @@ function TileRadioGroup({
         return;
     }
     e.preventDefault();
-    const enabled = items.map((it, i) => it.disabled ? -1 : i).filter((i) => i >= 0);
+    const enabled = items.map((it, i) => isOff(it) ? -1 : i).filter((i) => i >= 0);
     if (!enabled.length) return;
     const at = enabled.indexOf(index);
     let target;
@@ -59,10 +69,12 @@ function TileRadioGroup({
     else if (step === "last") target = enabled[enabled.length - 1];
     else target = enabled[(at + step + enabled.length) % enabled.length];
     refs.current[target]?.focus();
-    if (activation === "automatic") onSelect(items[target].key);
+    if (activation === "automatic" && !isLocked(items[target])) onSelect(items[target].key);
   };
   return /* @__PURE__ */ jsx(Fragment, { children: items.map((item, i) => {
     const selected = i === checkedIndex;
+    const locked = isLocked(item);
+    const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(" ");
     const button = /* @__PURE__ */ jsxs(
       "button",
       {
@@ -73,15 +85,18 @@ function TileRadioGroup({
         role: "radio",
         "aria-checked": selected,
         "aria-label": item.label,
-        "aria-describedby": item.note ? `${noteId}-${i}` : void 0,
+        "aria-describedby": describedBy || void 0,
         tabIndex: i === tabStop ? 0 : -1,
-        disabled: disabled || item.disabled,
-        onClick: () => !selected && onSelect(item.key),
+        disabled: disabled || isOff(item),
+        "aria-disabled": locked && !disabled || void 0,
+        onClick: () => !selected && !locked && onSelect(item.key),
         onKeyDown: (e) => onKeyDown(e, i),
         className: cn(
           TILE_BASE,
           s.tile,
           selected ? TILE_SELECTED : TILE_IDLE,
+          locked && TILE_LOCKED,
+          locked && !selected && TILE_LOCKED_IDLE,
           tileClassName?.(item, selected)
         ),
         children: [
@@ -96,6 +111,7 @@ function TileRadioGroup({
             ),
             /* @__PURE__ */ jsx("span", { id: `${noteId}-${i}`, hidden: true, children: item.note })
           ] }),
+          locked && /* @__PURE__ */ jsx("span", { id: `${reasonId}-${i}`, hidden: true, children: item.disabledReason }),
           selected && /* @__PURE__ */ jsx(SelectedTick, {})
         ]
       }
@@ -109,9 +125,10 @@ function TileRadioGroup({
       /* @__PURE__ */ jsx(
         Tooltip,
         {
-          label: item.note ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          label: item.note || locked ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: "block", children: item.label }),
-            /* @__PURE__ */ jsx("span", { className: "block font-normal text-[var(--text-muted)]", children: item.note })
+            item.note && /* @__PURE__ */ jsx("span", { className: "block font-normal text-[var(--text-muted)]", children: item.note }),
+            locked && /* @__PURE__ */ jsx("span", { className: "block font-normal", children: item.disabledReason })
           ] }) : item.label,
           portal: true,
           children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: button })

package/dist/components/tile-radio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * The machinery {@link SwatchPicker} and {@link IconPicker} share: a row of square\n * tiles that behaves as ONE radio group. Private to the package — not re-exported\n * from the barrel.\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n */\n\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  disabled?: boolean;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\": an arrow key moves AND checks, the APG default. \"manual\": arrows\n   *  move focus only, Space or Enter checks — for a picker whose change is expensive\n   *  (a bulk edit that saves on every change). */\n  activation: \"automatic\" | \"manual\";\n  disabled: boolean;\n  size: TileSize;\n  /** What goes inside a tile. The frame, the tick and the note's dot are drawn here. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item. */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]\";\n\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation,\n  disabled,\n  size,\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be chosen — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere.\n  const tabStop =\n    checkedIndex >= 0 && !items[checkedIndex].disabled\n      ? checkedIndex\n      : items.findIndex((it) => !it.disabled);\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    const enabled = items.map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    if (activation === \"automatic\") onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's.\n            aria-describedby={item.note ? `${noteId}-${i}` : undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            disabled={disabled || item.disabled}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own.\n            onClick={() => !selected && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-[var(--text-muted)]\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  <span className=\"block font-normal text-[var(--text-muted)]\">{item.note}</span>\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/tile-radio.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Ban, Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { Tooltip } from \"./tooltip\";\n\n/**\n * A row of square tiles that behaves as ONE radio group — the machinery\n * {@link SwatchPicker} and {@link IconPicker} are built on, public since 0.22.0 for the\n * one-of-n pickers those two do not cover (kastlan's input audit: a choice whose tiles\n * show something of the app's own — a mark, a pattern, a symbol set the kit does not\n * ship).\n *\n * Keksdose had three of these (the category colours, the category symbols, the\n * transaction flags) and all three were rows of `aria-pressed` buttons: a separate\n * tab stop per tile, and \"pressed\" on a choice that is really one-of-n. The APG radio\n * group is the shape a screen reader expects for that (\"Red, radio, 2 of 7, checked\")\n * and the one a keyboard expects too — a single tab stop, arrows to move.\n *\n * ## The container is yours\n *\n * It renders the TILES only — no wrapper — so it can sit in a layout the caller owns\n * (a wrapping row, a grid, a row beside a search box). That element must carry the\n * group's semantics, as SwatchPicker's does:\n *\n * ```tsx\n * <div role=\"radiogroup\" aria-labelledby={headingId} className=\"flex flex-wrap gap-1.5\">\n *   <TileRadioGroup\n *     items={[{ key: \"dots\", label: \"Dots\" }, { key: \"lines\", label: \"Lines\" }]}\n *     checked={pattern}\n *     onSelect={(key) => key && setPattern(key)}\n *     renderTile={(item) => <PatternGlyph pattern={item.key} className={TILE_SIZE.md.glyph} />}\n *   />\n * </div>\n * ```\n *\n * `role=\"radiogroup\"` and a name (`aria-label` or `aria-labelledby`) — without them a\n * screen reader hears radios that belong to nothing, and no \"2 of 7\". Set\n * `aria-disabled` on it as well when the whole group is `disabled`.\n *\n * ## What a tile is\n *\n * A square (28 / 32 / 44px, {@link TILE_SIZE}) holding `renderTile`'s content, NAMED by\n * the item's `label` (`aria-label`, so what is drawn inside is decoration) and showing\n * that label in a bubble on hover and focus — a row of unlabelled squares is the\n * complaint that put the bubble there. It is for choices that are SEEN: a colour, a\n * glyph, a pattern. A choice that has to be READ — a plan with a price and three lines\n * of features, an option with a sentence of explanation — is a {@link ChoiceCardGroup}\n * (`type=\"radio\"`): a card names its option by its title and describes it by its text,\n * where a tile would hide the text behind a bubble and repeat it.\n *\n * No strings of its own: every name is an item's `label`, the \"none\" tile's included.\n *\n * ## A tile that cannot be chosen\n *\n * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it\n * and Tab never lands on it, so a dimmed square says nothing about why. Give it a\n * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in\n * its bubble and its description — and choosing it does nothing (0.23, the kit's later\n * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).\n */\n\n/** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */\nexport type TileSize = \"sm\" | \"md\" | \"lg\";\n\n/** 28 / 32 / 44px. `lg` is the touch target a phone surface wants (`min-h-11`). `glyph`\n *  and `swatch` are the content sizes the kit's own pickers draw inside each — use them\n *  in `renderTile` so a tile of the app's own matches theirs. */\nexport const TILE_SIZE: Record<TileSize, { tile: string; glyph: string; swatch: string }> = {\n  sm: { tile: \"size-7\", glyph: \"size-3.5\", swatch: \"size-4\" },\n  md: { tile: \"size-8\", glyph: \"size-4\", swatch: \"size-5\" },\n  lg: { tile: \"size-11\", glyph: \"size-5\", swatch: \"size-6\" },\n};\n\n/** One tile, whatever it shows. `key` is `null` for the \"none\" entry — a tile of its\n *  own that leads back to nothing, since clicking a checked tile does not uncheck it. */\nexport interface TileItem<T extends string> {\n  key: T | null;\n  label: string;\n  /** Said after the name, and shown in the bubble under it. Marks the tile with a\n   *  dot, so the note is visible without hovering every tile to find it. */\n  note?: string;\n  /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,\n   *  never the tab stop. */\n  disabled?: boolean;\n  /**\n   * Why this tile cannot be chosen right now — a colour another category already wears,\n   * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not\n   * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble\n   * under its name (and its `note`) and describes it, and a click, Space / Enter or an\n   * arrow under automatic activation chooses nothing — the focus moves, the checked\n   * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's\n   * `disabled` still wins over it.\n   */\n  disabledReason?: ReactNode;\n}\n\nexport interface TileRadioGroupProps<T extends string> {\n  /** The tiles, in reading order. Render them inside a `role=\"radiogroup\"` element\n   *  with a name — see the module note. */\n  items: TileItem<T>[];\n  /** The checked key, or `undefined` for \"nothing is checked\" (the mixed state, or\n   *  a value that is not among the options). */\n  checked: T | null | undefined;\n  onSelect: (key: T | null) => void;\n  /** \"automatic\" (default): an arrow key moves AND checks, the APG default. \"manual\":\n   *  arrows move focus only, Space or Enter checks — for a picker whose change is\n   *  expensive (a bulk edit that saves on every change). */\n  activation?: \"automatic\" | \"manual\";\n  /** Every tile disabled. Mark the container `aria-disabled` too. Default `false`. */\n  disabled?: boolean;\n  /** 28 / 32 / 44px tiles ({@link TILE_SIZE}). Default \"md\"; \"lg\" is the touch-target\n   *  size a phone surface wants. */\n  size?: TileSize;\n  /** What goes inside a tile — `aria-hidden` decoration, since the tile is named by\n   *  `label`. Not called for the `null` (\"none\") item, which shows the kit's \"no\"\n   *  glyph. The frame, the tick and the note's dot are drawn around it. */\n  renderTile: (item: TileItem<T>, selected: boolean) => ReactNode;\n  /** Extra classes for a tile, per item, merged after the kit's — so a `size-*` here\n   *  beats `size`'s (a tile that grows in a narrow card). */\n  tileClassName?: (item: TileItem<T>, selected: boolean) => string | undefined;\n}\n\n/**\n * The tile's frame. Selection is a thicker, darker frame AND a tick in the corner —\n * never a colour change alone,\n * because the thing inside a swatch tile IS a colour, and a red frame round a red dot\n * says nothing to a reader who cannot see red.\n *\n * `focus-visible` with an offset in the surface colour, as the checkbox does: the ring\n * must not be painted in the colour of the frame it touches.\n */\nconst TILE_BASE =\n  \"relative inline-flex shrink-0 items-center justify-center rounded-md border transition-colors \" +\n  \"focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-surface)] \" +\n  \"disabled:cursor-not-allowed disabled:opacity-50\";\nconst TILE_IDLE =\n  \"border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]\";\nconst TILE_SELECTED =\n  \"border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]\";\n/** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */\nconst TILE_LOCKED = \"cursor-not-allowed opacity-50\";\n/** …and no hover offer on an idle one, which cannot be chosen. Not on the selected\n *  tile, whose frame IS its state. */\nconst TILE_LOCKED_IDLE = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\n/** `undefined`, `null`, `false` and `\"\"` are no reason — what `cond && \"…\"` gives. */\nfunction isLocked(item: TileItem<string>): boolean {\n  const r = item.disabledReason;\n  return r !== undefined && r !== null && r !== false && r !== \"\";\n}\n\n/** Out of reach: natively disabled. A reason keeps a `disabled` tile reachable. */\nfunction isOff(item: TileItem<string>): boolean {\n  return Boolean(item.disabled) && !isLocked(item);\n}\n\n/**\n * The tiles of one radio group, without the group element — render them inside a\n * `role=\"radiogroup\"` with a name (the module note above has the example). One tab stop\n * (the checked tile, else the first that can be chosen), arrows to move — left and\n * right follow the page's direction — Home and End to the ends, and by default the\n * arrows choose as they go.\n */\nexport function TileRadioGroup<T extends string>({\n  items,\n  checked,\n  onSelect,\n  activation = \"automatic\",\n  disabled = false,\n  size = \"md\",\n  renderTile,\n  tileClassName,\n}: TileRadioGroupProps<T>) {\n  const refs = useRef<Array<HTMLButtonElement | null>>([]);\n  const noteId = useId();\n  const reasonId = useId();\n  const s = TILE_SIZE[size];\n  const checkedIndex =\n    checked === undefined ? -1 : items.findIndex((it) => it.key === checked);\n  // The ONE tab stop: the checked tile, else the first that can be reached — the APG\n  // rule, so Tab into a group with nothing checked still lands somewhere. A locked\n  // tile is reachable: landing on it is how its reason is read.\n  const tabStop =\n    checkedIndex >= 0 && !isOff(items[checkedIndex])\n      ? checkedIndex\n      : items.findIndex((it) => !isOff(it));\n\n  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    // Left and right are VISUAL directions: in a right-to-left page the row runs the\n    // other way. Up and down follow reading order either way — the APG's radio group\n    // treats them as previous/next, and the tiles wrap, so there is no column to keep.\n    const horizontal = horizontalStep(e.key, e.currentTarget);\n    let step: number | \"first\" | \"last\";\n    switch (horizontal ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        step = horizontal;\n        break;\n      case \"ArrowDown\":\n        step = 1;\n        break;\n      case \"ArrowUp\":\n        step = -1;\n        break;\n      case \"Home\":\n        step = \"first\";\n        break;\n      case \"End\":\n        step = \"last\";\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    // Locked tiles are in the walk; natively disabled ones are not.\n    const enabled = items.map((it, i) => (isOff(it) ? -1 : i)).filter((i) => i >= 0);\n    if (!enabled.length) return;\n    const at = enabled.indexOf(index);\n    let target: number;\n    if (step === \"first\") target = enabled[0];\n    else if (step === \"last\") target = enabled[enabled.length - 1];\n    // Wrapping, as a native radio group does: the last tile's \"next\" is the first.\n    else target = enabled[(at + step + enabled.length) % enabled.length];\n    refs.current[target]?.focus();\n    // Onto a locked tile the focus moves and the choice does not: the checked tile\n    // stays checked, and the next arrow walks on from here.\n    if (activation === \"automatic\" && !isLocked(items[target])) onSelect(items[target].key);\n  };\n\n  return (\n    <>\n      {items.map((item, i) => {\n        const selected = i === checkedIndex;\n        const locked = isLocked(item);\n        const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(\" \");\n        const button = (\n          <button\n            ref={(el) => {\n              refs.current[i] = el;\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            aria-label={item.label}\n            // The note is a DESCRIPTION, read after the name and the state, not glued\n            // into the name — the punctuation between the two would be English's. So\n            // is a lock's reason, after the note.\n            aria-describedby={describedBy || undefined}\n            tabIndex={i === tabStop ? 0 : -1}\n            // A reason wins over the tile's own `disabled` (as on Button): reachable,\n            // and refusing. The whole group's `disabled` still wins over both.\n            disabled={disabled || isOff(item)}\n            aria-disabled={(locked && !disabled) || undefined}\n            // Clicking the checked tile again does nothing: a radio is not a toggle.\n            // \"None\" is the way back to nothing, and it is a tile of its own. A locked\n            // tile is never chosen.\n            onClick={() => !selected && !locked && onSelect(item.key)}\n            onKeyDown={(e) => onKeyDown(e, i)}\n            className={cn(\n              TILE_BASE,\n              s.tile,\n              selected ? TILE_SELECTED : TILE_IDLE,\n              locked && TILE_LOCKED,\n              locked && !selected && TILE_LOCKED_IDLE,\n              tileClassName?.(item, selected),\n            )}\n          >\n            {item.key === null ? (\n              <Ban aria-hidden className={cn(s.glyph, \"text-[var(--text-muted)]\")} />\n            ) : (\n              renderTile(item, selected)\n            )}\n            {item.note && (\n              <>\n                {/* A dot rather than a dimmed tile: dimming reads as \"disabled\", and a\n                    tile with a note is entirely available. */}\n                <span\n                  aria-hidden\n                  className=\"absolute end-0.5 top-0.5 size-1.5 rounded-full bg-[var(--text-muted)]\"\n                />\n                {/* `hidden` still serves as a description: aria-describedby reads\n                    hidden text, which is what keeps it out of the layout. */}\n                <span id={`${noteId}-${i}`} hidden>\n                  {item.note}\n                </span>\n              </>\n            )}\n            {/* The reason's description is a `hidden` copy, as on a locked Button: the\n                bubble exists only while hovered or focused once portalled, and a\n                description that comes and goes is read inconsistently. */}\n            {locked && (\n              <span id={`${reasonId}-${i}`} hidden>\n                {item.disabledReason}\n              </span>\n            )}\n            {selected && <SelectedTick />}\n          </button>\n        );\n        return (\n          // The bubble is the SIGHTED user's name for the tile — eight unlabelled\n          // squares are the complaint that put a bubble on Keksdose's (live #289).\n          // It wraps a span rather than the button, because a Tooltip hands its\n          // child an `aria-describedby`, and a tile named \"Red\" and described as\n          // \"Red\" is read out twice.\n          <Tooltip\n            key={item.key ?? \"\\u0000none\"}\n            label={\n              item.note || locked ? (\n                <>\n                  <span className=\"block\">{item.label}</span>\n                  {item.note && <span className=\"block font-normal text-[var(--text-muted)]\">{item.note}</span>}\n                  {/* The reason in the body colour: it is the news, the note is\n                      standing context. */}\n                  {locked && <span className=\"block font-normal\">{item.disabledReason}</span>}\n                </>\n              ) : (\n                item.label\n              )\n            }\n            portal\n          >\n            <span className=\"inline-flex\">{button}</span>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n}\n\n/** The tick on a selected tile — a small badge in the corner, in the text colour on\n *  the surface colour, so it reads the same over every swatch colour. */\nfunction SelectedTick() {\n  return (\n    <span\n      aria-hidden\n      className=\"absolute -bottom-1 -end-1 inline-flex size-3.5 items-center justify-center rounded-full bg-[var(--text-primary)] text-[var(--bg-surface)]\"\n    >\n      <Check strokeWidth={3} className=\"size-2.5\" />\n    </span>\n  );\n}\n"],"mappings":";AA6Qc,SAKA,UALA,KAKA,YALA;AA7Qd,SAAS,OAAO,cAAc;AAE9B,SAAS,KAAK,aAAa;AAC3B,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAgEjB,MAAM,YAA+E;AAAA,EAC1F,IAAI,EAAE,MAAM,UAAU,OAAO,YAAY,QAAQ,SAAS;AAAA,EAC1D,IAAI,EAAE,MAAM,UAAU,OAAO,UAAU,QAAQ,SAAS;AAAA,EACxD,IAAI,EAAE,MAAM,WAAW,OAAO,UAAU,QAAQ,SAAS;AAC3D;AA4DA,MAAM,YACJ;AAGF,MAAM,YACJ;AACF,MAAM,gBACJ;AAEF,MAAM,cAAc;AAGpB,MAAM,mBAAmB;AAGzB,SAAS,SAAS,MAAiC;AACjD,QAAM,IAAI,KAAK;AACf,SAAO,MAAM,UAAa,MAAM,QAAQ,MAAM,SAAS,MAAM;AAC/D;AAGA,SAAS,MAAM,MAAiC;AAC9C,SAAO,QAAQ,KAAK,QAAQ,KAAK,CAAC,SAAS,IAAI;AACjD;AASO,SAAS,eAAiC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,OAAO,OAAwC,CAAC,CAAC;AACvD,QAAM,SAAS,MAAM;AACrB,QAAM,WAAW,MAAM;AACvB,QAAM,IAAI,UAAU,IAAI;AACxB,QAAM,eACJ,YAAY,SAAY,KAAK,MAAM,UAAU,CAAC,OAAO,GAAG,QAAQ,OAAO;AAIzE,QAAM,UACJ,gBAAgB,KAAK,CAAC,MAAM,MAAM,YAAY,CAAC,IAC3C,eACA,MAAM,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;AAExC,QAAM,YAAY,CAAC,GAAqC,UAAkB;AAIxE,UAAM,aAAa,eAAe,EAAE,KAAK,EAAE,aAAa;AACxD,QAAI;AACJ,YAAQ,aAAa,eAAe,EAAE,KAAK;AAAA,MACzC,KAAK;AACH,eAAO;AACP;AAAA,MACF,KAAK;AACH,eAAO;AACP;AAAA,MACF,KAAK;AACH,eAAO;AACP;AAAA,MACF,KAAK;AACH,eAAO;AACP;AAAA,MACF,KAAK;AACH,eAAO;AACP;AAAA,MACF;AACE;AAAA,IACJ;AACA,MAAE,eAAe;AAEjB,UAAM,UAAU,MAAM,IAAI,CAAC,IAAI,MAAO,MAAM,EAAE,IAAI,KAAK,CAAE,EAAE,OAAO,CAAC,MAAM,KAAK,CAAC;AAC/E,QAAI,CAAC,QAAQ,OAAQ;AACrB,UAAM,KAAK,QAAQ,QAAQ,KAAK;AAChC,QAAI;AACJ,QAAI,SAAS,QAAS,UAAS,QAAQ,CAAC;AAAA,aAC/B,SAAS,OAAQ,UAAS,QAAQ,QAAQ,SAAS,CAAC;AAAA,QAExD,UAAS,SAAS,KAAK,OAAO,QAAQ,UAAU,QAAQ,MAAM;AACnE,SAAK,QAAQ,MAAM,GAAG,MAAM;AAG5B,QAAI,eAAe,eAAe,CAAC,SAAS,MAAM,MAAM,CAAC,EAAG,UAAS,MAAM,MAAM,EAAE,GAAG;AAAA,EACxF;AAEA,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,WAAW,MAAM;AACvB,UAAM,SAAS,SAAS,IAAI;AAC5B,UAAM,cAAc,CAAC,KAAK,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,UAAU,GAAG,QAAQ,IAAI,CAAC,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1G,UAAM,SACJ;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,OAAO;AACX,eAAK,QAAQ,CAAC,IAAI;AAAA,QACpB;AAAA,QACA,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,cAAY,KAAK;AAAA,QAIjB,oBAAkB,eAAe;AAAA,QACjC,UAAU,MAAM,UAAU,IAAI;AAAA,QAG9B,UAAU,YAAY,MAAM,IAAI;AAAA,QAChC,iBAAgB,UAAU,CAAC,YAAa;AAAA,QAIxC,SAAS,MAAM,CAAC,YAAY,CAAC,UAAU,SAAS,KAAK,GAAG;AAAA,QACxD,WAAW,CAAC,MAAM,UAAU,GAAG,CAAC;AAAA,QAChC,WAAW;AAAA,UACT;AAAA,UACA,EAAE;AAAA,UACF,WAAW,gBAAgB;AAAA,UAC3B,UAAU;AAAA,UACV,UAAU,CAAC,YAAY;AAAA,UACvB,gBAAgB,MAAM,QAAQ;AAAA,QAChC;AAAA,QAEC;AAAA,eAAK,QAAQ,OACZ,oBAAC,OAAI,eAAW,MAAC,WAAW,GAAG,EAAE,OAAO,0BAA0B,GAAG,IAErE,WAAW,MAAM,QAAQ;AAAA,UAE1B,KAAK,QACJ,iCAGE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA;AAAA,YACZ;AAAA,YAGA,oBAAC,UAAK,IAAI,GAAG,MAAM,IAAI,CAAC,IAAI,QAAM,MAC/B,eAAK,MACR;AAAA,aACF;AAAA,UAKD,UACC,oBAAC,UAAK,IAAI,GAAG,QAAQ,IAAI,CAAC,IAAI,QAAM,MACjC,eAAK,gBACR;AAAA,UAED,YAAY,oBAAC,gBAAa;AAAA;AAAA;AAAA,IAC7B;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAME;AAAA,QAAC;AAAA;AAAA,UAEC,OACE,KAAK,QAAQ,SACX,iCACE;AAAA,gCAAC,UAAK,WAAU,SAAS,eAAK,OAAM;AAAA,YACnC,KAAK,QAAQ,oBAAC,UAAK,WAAU,8CAA8C,eAAK,MAAK;AAAA,YAGrF,UAAU,oBAAC,UAAK,WAAU,qBAAqB,eAAK,gBAAe;AAAA,aACtE,IAEA,KAAK;AAAA,UAGT,QAAM;AAAA,UAEN,8BAAC,UAAK,WAAU,eAAe,kBAAO;AAAA;AAAA,QAhBjC,KAAK,OAAO;AAAA,MAiBnB;AAAA;AAAA,EAEJ,CAAC,GACH;AAEJ;AAIA,SAAS,eAAe;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAU;AAAA,MAEV,8BAAC,SAAM,aAAa,GAAG,WAAU,YAAW;AAAA;AAAA,EAC9C;AAEJ;","names":[]}