@eifi1/ui-kit 0.45.0 → 0.46.1

package/dist/components/date-format-setting.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { SelectProps } from "./select.js";
+import type { AppearanceLabels } from "./appearance-labels.js";
+import type { LabelOverride } from "../i18n/kit-labels.js";
+import type { DateFormatPreference } from "../lib/date-format.js";
+/** A {@link Select}'s props minus the value, the change handler and the options, which
+ *  this owns. */
+export interface DateFormatSettingProps extends Omit<SelectProps, "value" | "onChange" | "children" | "multiple"> {
+    value: DateFormatPreference;
+    onChange: (value: DateFormatPreference) => void;
+    /** The field's label. Default: the kit's `appearance.dateFormat` ("Date format"). */
+    label?: ReactNode;
+    /** The line under it. Default: the kit's `appearance.dateFormatHelp`; `null` for none. */
+    hint?: ReactNode;
+    /** The interface language the samples are rendered for — `"auto"`'s sample is that
+     *  language's shape. Default: the provider's locale. */
+    language?: string;
+    /** The `appearance` namespace, for this instance. */
+    labels?: LabelOverride<AppearanceLabels>;
+}
+/**
+ * The date format (0.46, keksdose's Settings ▸ Appearance select, feedback #180): "Follow
+ * language" and four explicit shapes, each option labelled by the date it produces —
+ * 01.08.2026, 01/08/2026, 08/01/2026, 2026-08-01 — rendered live by the resolver the
+ * app's dates go through ({@link dateFormatSample}), and `auto` as "Follow language —
+ * 01 Aug 2026". The words are the kit's `appearance` namespace; the value and where it
+ * is kept are the app's (see `formatDateWithPreference` and `dateFormatterFor`).
+ */
+export declare function DateFormatSetting({ value, onChange, label, hint, language, labels: labelsProp, ...rest }: DateFormatSettingProps): import("react").JSX.Element;

package/dist/components/date-format-setting.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "./select.js";
+import { useAppearanceLabels } from "./appearance-labels.js";
+import { useKitLocale } from "../i18n/kit-labels.js";
+import { DATE_FORMAT_PREFERENCES, dateFormatSample } from "../lib/date-format.js";
+function DateFormatSetting({
+  value,
+  onChange,
+  label,
+  hint,
+  language,
+  labels: labelsProp,
+  ...rest
+}) {
+  const labels = useAppearanceLabels(labelsProp);
+  const sampleLanguage = useKitLocale(language);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...rest,
+      label: label ?? labels.dateFormat,
+      hint: hint === null ? void 0 : hint ?? labels.dateFormatHelp,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      children: DATE_FORMAT_PREFERENCES.map((preference) => {
+        const sample = dateFormatSample(preference, sampleLanguage);
+        return /* @__PURE__ */ jsx("option", { value: preference, children: preference === "auto" ? `${labels.dateFormatAuto} \u2014 ${sample}` : sample }, preference);
+      })
+    }
+  );
+}
+export {
+  DateFormatSetting
+};
+//# sourceMappingURL=date-format-setting.js.map

package/dist/components/date-format-setting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/date-format-setting.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./select\";\nimport type { SelectProps } from \"./select\";\nimport { useAppearanceLabels } from \"./appearance-labels\";\nimport type { AppearanceLabels } from \"./appearance-labels\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { DATE_FORMAT_PREFERENCES, dateFormatSample } from \"../lib/date-format\";\nimport type { DateFormatPreference } from \"../lib/date-format\";\n\n/** A {@link Select}'s props minus the value, the change handler and the options, which\n *  this owns. */\nexport interface DateFormatSettingProps extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\" | \"multiple\"> {\n  value: DateFormatPreference;\n  onChange: (value: DateFormatPreference) => void;\n  /** The field's label. Default: the kit's `appearance.dateFormat` (\"Date format\"). */\n  label?: ReactNode;\n  /** The line under it. Default: the kit's `appearance.dateFormatHelp`; `null` for none. */\n  hint?: ReactNode;\n  /** The interface language the samples are rendered for — `\"auto\"`'s sample is that\n   *  language's shape. Default: the provider's locale. */\n  language?: string;\n  /** The `appearance` namespace, for this instance. */\n  labels?: LabelOverride<AppearanceLabels>;\n}\n\n/**\n * The date format (0.46, keksdose's Settings ▸ Appearance select, feedback #180): \"Follow\n * language\" and four explicit shapes, each option labelled by the date it produces —\n * 01.08.2026, 01/08/2026, 08/01/2026, 2026-08-01 — rendered live by the resolver the\n * app's dates go through ({@link dateFormatSample}), and `auto` as \"Follow language —\n * 01 Aug 2026\". The words are the kit's `appearance` namespace; the value and where it\n * is kept are the app's (see `formatDateWithPreference` and `dateFormatterFor`).\n */\nexport function DateFormatSetting({\n  value,\n  onChange,\n  label,\n  hint,\n  language,\n  labels: labelsProp,\n  ...rest\n}: DateFormatSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const sampleLanguage = useKitLocale(language);\n  return (\n    <Select\n      {...rest}\n      label={label ?? labels.dateFormat}\n      hint={hint === null ? undefined : (hint ?? labels.dateFormatHelp)}\n      value={value}\n      onChange={(e) => onChange(e.target.value as DateFormatPreference)}\n    >\n      {DATE_FORMAT_PREFERENCES.map((preference) => {\n        const sample = dateFormatSample(preference, sampleLanguage);\n        return (\n          <option key={preference} value={preference}>\n            {preference === \"auto\" ? `${labels.dateFormatAuto} — ${sample}` : sample}\n          </option>\n        );\n      })}\n    </Select>\n  );\n}\n"],"mappings":";AAwDU;AAvDV,SAAS,cAAc;AAEvB,SAAS,2BAA2B;AAEpC,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB,wBAAwB;AA2BnD,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,iBAAiB,aAAa,QAAQ;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,SAAS,OAAO;AAAA,MACvB,MAAM,SAAS,OAAO,SAAa,QAAQ,OAAO;AAAA,MAClD;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAA6B;AAAA,MAE/D,kCAAwB,IAAI,CAAC,eAAe;AAC3C,cAAM,SAAS,iBAAiB,YAAY,cAAc;AAC1D,eACE,oBAAC,YAAwB,OAAO,YAC7B,yBAAe,SAAS,GAAG,OAAO,cAAc,WAAM,MAAM,KAAK,UADvD,UAEb;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/row-actions.d.ts

@@ -201,10 +201,17 @@ export interface RowActionsColumnOptions<T> {
     /**
      * The column's name as plain text — the column-settings checklist and the phone
      * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left
-     * out, the header shows the provider's `rowActions.actions` to a screen reader and
-     * the plain-text places fall back to the column's `key`.
+     * out, the heading shows the provider's `rowActions.actions` and the plain-text
+     * places fall back to the column's `key`.
      */
     headerText?: string;
+    /**
+     * The heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE "Actions" heading on
+     * every table with an actions column). Default: `headerText`, else the provider's
+     * `rowActions.actions` ("Actions"), shown, end-aligned over the buttons. A node
+     * replaces it; `false` keeps the pre-0.46.1 heading, named for a screen reader only.
+     */
+    header?: ReactNode | false;
     labels?: LabelOverride<RowActionsLabels>;
     /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */
     column?: Partial<DataTableColumn<T>>;
@@ -215,10 +222,10 @@ export interface RowActionsColumnOptions<T> {
  *
  *     columns={[...columns, rowActionsColumn({ actions: (r) => [...], name: (r) => r.name })]}
  *
- * The header is visually hidden (the icons say what the column is), the column hugs its
- * content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the
+ * The heading says "Actions" on screen (0.46.1; `header` changes or hides it), the
+ * column hugs its content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the
  * buttons keep their own clicks. On a phone it is a line of the card like any column;
  * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it
  * then shows in the opened row instead).
  */
-export declare function rowActionsColumn<T>({ key, actions, name, collapse, size, glyphSize, tooltipSide, headerText, labels, column, }: RowActionsColumnOptions<T>): DataTableColumn<T>;
+export declare function rowActionsColumn<T>({ key, actions, name, collapse, size, glyphSize, tooltipSide, headerText, header, labels, column, }: RowActionsColumnOptions<T>): DataTableColumn<T>;

package/dist/components/row-actions.js

@@ -276,9 +276,14 @@ function InlineAction({
     }
   );
 }
-function RowActionsHeader({ text, labels }) {
+function RowActionsHeader({
+  text,
+  labels,
+  hidden
+}) {
   const resolved = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS, labels);
-  return /* @__PURE__ */ jsx("span", { className: "sr-only", children: text ?? resolved.actions });
+  const word = text ?? resolved.actions;
+  return hidden ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: word }) : /* @__PURE__ */ jsx(Fragment, { children: word });
 }
 function rowActionsColumn({
   key = "actions",
@@ -289,12 +294,13 @@ function rowActionsColumn({
   glyphSize,
   tooltipSide,
   headerText,
+  header,
   labels,
   column
 }) {
   return {
     key,
-    header: /* @__PURE__ */ jsx(RowActionsHeader, { text: headerText, labels }),
+    header: header === false || header == null ? /* @__PURE__ */ jsx(RowActionsHeader, { text: headerText, labels, hidden: header === false }) : header,
     headerText,
     cell: (row) => /* @__PURE__ */ jsx(
       RowActions,
@@ -309,7 +315,8 @@ function rowActionsColumn({
       }
     ),
     className: "w-px whitespace-nowrap text-end",
-    headClassName: "w-px",
+    // The heading over the buttons, at the row's end (0.46.1).
+    headClassName: "w-px text-end",
     noRowLink: true,
     ...column
   };

package/dist/components/row-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/row-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Popover } from \"./popover\";\nimport { Button } from \"./button\";\nimport { CompactControls } from \"./field-parts\";\nimport { IconButton } from \"./icon-button\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport type { IconButtonGlyphSize, IconButtonSize } from \"./icon-button\";\nimport type { TooltipSide } from \"./tooltip\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { DEFAULT_ROW_ACTIONS_LABELS } from \"./row-actions-labels\";\n\n/**\n * A row's actions — inline icons at Normal, one \"⋯\" menu at Large and above\n * (docs/text-size-harmonization.md §10.8).\n *\n * At Large an IconButton shows its label as text (§4). In a dense row — a register's\n * action column, a list row's end — every label at once does not fit: Kurvenschmiede\n * has 44 IconButtons in rows, kastlan 119. So a row's actions collapse instead, into\n * the menu the user roster has used since 0.31 (`UserRowActions`, now built on this):\n * one \"⋯\" button, and a menu with each action's icon AND words, where a locked one stays\n * listed and says why.\n *\n * The data is the roster's `UserRowActionList`, generalised: entries, and `false` /\n * `null` for the ones a condition left out (`row.locked || {…}`).\n *\n * 0.33 (§10.16): an action carries its state at both sizes — a toggle (`pressed`), a\n * disclosure (`expanded`, `controls`), a tone, a tour anchor (`dataTour`) — so a row\n * with an \"on\" share button or a tour step no longer keeps hand-rolled IconButtons at\n * Normal and this only at Large (keksdose k15).\n */\n\n/** An action's colour: IconButton's tone inline; in the menu the glyph takes it and the\n *  words keep the text colour, except `danger`, whose words are the danger text. */\nexport type RowActionTone = \"default\" | \"muted\" | \"info\" | \"warning\" | \"danger\";\n\n/** One action of a row. */\nexport interface RowAction {\n  /** React key. Default: the label. */\n  key?: string;\n  /** The action's name: the inline icon's name and tooltip, the menu entry's words. */\n  label: string;\n  /**\n   * Runs it. The kit sends nothing — the app opens its confirmation or calls its API.\n   * Optional only beside `href`; an action has one or the other (or both: `onSelect`\n   * then runs as the link is followed).\n   */\n  onSelect?: () => void;\n  /**\n   * The action NAVIGATES — an edit page, a mail to compose (0.32.1, kastlan's 0.32\n   * report): a real link inline and in the menu, so open in a new tab, a middle click\n   * and the URL on hover work, which `onSelect` + `navigate` lost. The kit's link rule\n   * applies ({@link Button}'s `href`): in-app through the provider's `linkComponent`, an\n   * external or `#anchor` one a plain `<a>`, `mailto:` included.\n   *\n   * A link cannot carry a reason or a spinner, so an action with a `disabledReason`\n   * (or under a write lock, with `commit`) or `pending` stays a button and says why.\n   */\n  href?: string;\n  /** With `href`: leaves the app — a new tab, and a screen reader is told so. */\n  external?: boolean;\n  /**\n   * The glyph: a Lucide icon (`Pencil`), or an element (`<Pencil />`, an app's own\n   * svg) — DataTable's `rowActions` hand their `icon` node through. Inline, an action\n   * without one is a small text button; in the menu it is the words alone.\n   */\n  icon?: LucideIcon | ReactElement;\n  /**\n   * `danger` for delete, revoke, erase: the quiet red of IconButton's `tone=\"danger\"`\n   * inline, the danger text tone in the menu. `muted` (an open or add that should not\n   * compete), `info` (a notice-worthy, harmless action: keksdose's reconcile) and\n   * `warning` (a flag that wants attention): IconButton's tone inline; in the menu the\n   * glyph takes it and the words keep the text colour, so `muted` looks like `default`\n   * there (0.33).\n   */\n  tone?: RowActionTone;\n  /** Why it is not available for this row. It stays listed, focusable, and says so — an\n   *  action that silently vanished would leave the reader looking for it. */\n  disabledReason?: ReactNode;\n  /**\n   * This action COMMITS — it saves, sends, deletes: under a locked\n   * {@link WriteLockProvider} it is refused with the lock's reason, as {@link Button}'s\n   * `commit` is, inline and in the menu alike. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /**\n   * In flight — the request it started has not answered. Inline, the icon turns into\n   * IconButton's spinner (`pending`); collapsed, the \"⋯\" button does, since the menu\n   * closed when the action was chosen. Either way nothing in the row can be pressed again\n   * until it settles: the \"⋯\" opens no menu while busy.\n   */\n  pending?: boolean;\n  /**\n   * Not available for a moment, with nothing to explain — another action of the list\n   * is in flight (an admin panel's `busy`). The plain `disabled`; a lasting refusal is a\n   * `disabledReason`, which says why.\n   */\n  disabled?: boolean;\n  /** Leave it out for this row. */\n  hidden?: boolean;\n  /**\n   * A toggle (0.33): `aria-pressed` and IconButton's \"on\" look inline, `aria-pressed` on\n   * the menu entry. Keep the label the same in both states (\"Share budget\"): the pressed\n   * state already says whether it is on. Not on an `href` action — a link is not a\n   * toggle — nor with `expanded`.\n   */\n  pressed?: boolean;\n  /**\n   * Opens or closes something IN THE PAGE (0.33) — a share card under the row, an\n   * add-category row: `aria-expanded`, inline and on the menu entry. Not with `pressed`:\n   * a disclosure says open, not on. Not on an `href` action.\n   */\n  expanded?: boolean;\n  /** The `id` of what `expanded` opens: `aria-controls`, inline and on the menu entry. */\n  controls?: string;\n  /**\n   * A tour anchor (0.33, §10.18): `data-tour` on ONE element per action at a time.\n   * Inline, on the action's own control (the IconButton, the small text button, the\n   * link). Collapsed, on an `aria-hidden` box laid over the \"⋯\" button — `[data-tour=x]`\n   * resolves to a box the size of the \"⋯\", whose `data-slot=\"row-actions\"` box holds the\n   * button, two anchored actions in one row don't fight over one attribute, and a tap\n   * still reaches the button. Never on the entry in the open menu: the kit's tour takes\n   * the first visible match and the menu is portalled after the row, so a copy there\n   * would never be found, only make the selector match twice. The kit's name for it, as\n   * `AppShellNavItem.dataTour`.\n   */\n  dataTour?: string;\n}\n\n/** What a row's actions may be: entries, and `false` / `null` / `undefined` for the ones\n *  a condition left out. */\nexport type RowActionList = readonly (RowAction | false | null | undefined)[];\n\nexport interface RowActionsLabels {\n  /** The menu button's name when the row has no name of its own; also the actions\n   *  column's (hidden) header in {@link rowActionsColumn}. */\n  actions: string;\n  /** The menu button's name, given the row's: \"Actions for Ada Example\". */\n  actionsFor: (name: string) => string;\n}\n\n// Defined in ./row-actions-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ROW_ACTIONS_LABELS };\n\n/**\n * - `\"auto\"` (default): the icons inline at Normal; the \"⋯\" menu at Large and Extra\n *   large once there are two or more (§10.8). A single action stays inline at every\n *   size, with its label as text at Large — one label fits a row, and a menu of one is\n *   a detour.\n * - `\"menu\"`: the menu at every size — the roster's choice, whose actions grow (§2.4\n *   there) and do not fit a phone card as a strip.\n * - `\"inline\"`: the icons at every size — for a row the app knows has room; at Large\n *   each then shows its label (IconButton's `labelVisible`).\n */\nexport type RowActionsCollapse = \"auto\" | \"menu\" | \"inline\";\n\n/** The sizes a row action comes in: IconButton's row steps. `2xs` is DataTable's\n *  compact density. At Large every one is at least a 48 px target (IconButton). */\nexport type RowActionsSize = Extract<IconButtonSize, \"md\" | \"sm\" | \"xs\" | \"2xs\">;\n\nexport interface RowActionsProps {\n  actions: RowActionList;\n  /** The row's name, for the menu button's name — \"Actions for Ada Example\". Without it\n   *  (or `null`, as API fields often are) the button is \"Actions\". */\n  name?: string | null;\n  /** When the actions collapse into the menu — see {@link RowActionsCollapse}. */\n  collapse?: RowActionsCollapse;\n  /** The inline icons' and the \"⋯\" button's size. Default `xs`, a list row's action. */\n  size?: RowActionsSize;\n  /** The menu's width. Default `\"15rem\"`, in rem so it grows with the words (§3.2). */\n  menuWidth?: `${number}rem`;\n  /** On the wrapper: the inline strip, or the box round the \"⋯\" button. */\n  className?: string;\n  /** The inline glyphs' size, IconButton's `glyphSize` — e.g. 14 in a dense header strip\n   *  (keksdose's category group header). The \"⋯\" button keeps its box's own. */\n  glyphSize?: IconButtonGlyphSize;\n  /** The inline tooltips' side, IconButton's `tooltipSide` — `\"start\"` for a table's last\n   *  column, so a bubble does not run off the row's end. Per row: every inline action. */\n  tooltipSide?: TooltipSide;\n  labels?: LabelOverride<RowActionsLabels>;\n}\n\nfunction visibleActions(actions: RowActionList): RowAction[] {\n  return actions.filter((a): a is RowAction => Boolean(a) && !(a as RowAction).hidden);\n}\n\n/** An action's glyph as a node: a component is rendered, an element is used as is. */\nfunction glyphOf(icon: RowAction[\"icon\"]): ReactNode {\n  if (icon === undefined) return null;\n  if (isValidElement(icon)) return icon;\n  const Icon = icon as LucideIcon;\n  return <Icon />;\n}\n\n/** The menu glyph's tint per tone (0.33): the words keep the text colour, so the glyph\n *  carries `info` and `warning` — IconButton's toned colours. `danger` colours the words\n *  through Button's tone, and `muted` is the default look in a menu. */\nconst MENU_GLYPH_TONE: Partial<Record<RowActionTone, string>> = {\n  info: \"text-info\",\n  warning: \"text-warning\",\n};\n\n/** The state an action's control says, inline and in the menu alike: `aria-expanded` and\n *  `aria-controls` for a disclosure (a toggle's `aria-pressed` goes through the button's\n *  own `pressed`, which also draws the \"on\" look). */\nfunction stateAttrs(action: RowAction) {\n  return {\n    \"aria-expanded\": action.expanded,\n    \"aria-controls\": action.expanded === undefined ? undefined : action.controls,\n  };\n}\n\n/** An action's tone on its inline control, for a caller's CSS and a test: `data-tone`,\n *  left off for the default look. */\nfunction toneAttr(tone: RowActionTone | undefined) {\n  return { \"data-tone\": tone === undefined || tone === \"default\" ? undefined : tone };\n}\n\n/**\n * A row's actions, inline or as a \"⋯\" menu — see {@link RowActionsCollapse}. Every\n * control stops its click (and the Enter/Space it stands for) from reaching the row, so\n * a clickable row or a DataTable `rowLink` does not open as well; in a DataTable column\n * also set `noRowLink: true`, as {@link rowActionsColumn} does.\n *\n * Inline, the icons sit in a {@link CompactControls} region at Normal: their labels\n * stay the names and the tooltips, and a locked one keeps its reason in the tooltip — a\n * line under one icon of a row would break the row. In the menu a locked action's\n * reason is a line under its words at Large and on touch (Button's\n * `disabledReasonDisplay`).\n *\n * The menu is portalled, so a table's scroller cannot clip it; Escape and an outside\n * press close it, and focus goes back to the \"⋯\" button, which is where a confirmation\n * dialog then returns it.\n */\nexport function RowActions({\n  actions,\n  name,\n  collapse = \"auto\",\n  size = \"xs\",\n  menuWidth = \"15rem\",\n  className,\n  glyphSize,\n  tooltipSide,\n  labels: labelsProp,\n}: RowActionsProps) {\n  const labels = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);\n  const large = useLargeText();\n  const entries = visibleActions(actions);\n  if (entries.length === 0) return null;\n  const asMenu = collapse === \"menu\" || (collapse === \"auto\" && large && entries.length > 1);\n  if (!asMenu) {\n    const strip = (\n      <div data-slot=\"row-actions\" className={cn(\"inline-flex items-center gap-0.5\", className)}>\n        {entries.map((action) => (\n          <InlineAction\n            key={action.key ?? action.label}\n            action={action}\n            size={size}\n            glyphSize={glyphSize}\n            tooltipSide={tooltipSide}\n          />\n        ))}\n      </div>\n    );\n    // Compact at Normal (no room for a reason line in a row); at Large an inline action\n    // is the app's choice (\"inline\") or the row's only one, and shows its words.\n    return large ? strip : <CompactControls>{strip}</CompactControls>;\n  }\n  const title = name ? labels.actionsFor(name) : labels.actions;\n  // The menu closed when the action was chosen, so what is in flight shows on \"⋯\".\n  const busy = entries.some((action) => action.pending);\n  const anchored = entries.filter((action) => action.dataTour);\n  return (\n    // The \"⋯\" in a box of its own, the inline strip's slot: the tour anchors of the\n    // collapsed actions lie over the button in it (see `dataTour`), and `className`\n    // places the box as it places the strip.\n    <div data-slot=\"row-actions\" className={cn(\"relative inline-flex\", className)}>\n      <Popover\n        width={menuWidth}\n        aria-label={title}\n        className=\"p-1\"\n        trigger={({ open, toggle, ref }) => (\n          <IconButton\n            ref={ref}\n            size={size}\n            label={title}\n            // \"⋯\" is read by everyone as \"more actions\"; the menu it opens is the words.\n            labelVisible={false}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            pending={busy}\n            stopPropagation\n            onClick={toggle}\n          >\n            <MoreHorizontal />\n          </IconButton>\n        )}\n        // React carries an event out of a portal along the COMPONENT tree, so a click in\n        // the menu reached a clickable row or a DataTable `onRowClick` the menu was opened\n        // from, though the panel is nowhere near it in the page — only the \"⋯\" trigger\n        // stopped its own (keksdose's 0.32 report). Stopped on the PANEL itself, its padding\n        // and border included (0.32.2: 0.32.1 stopped it on an inner box, and a click on\n        // the panel's `p-1` still went through): clicks, and the Enter / Space a row also\n        // listens for. Escape goes on, to the popover's own handler that closes it.\n        onClick={stopClick}\n        onKeyDown={stopActivationKeys}\n      >\n        {(close) => (\n          <ul data-slot=\"row-actions-menu\" className=\"space-y-0.5\">\n            {entries.map((action) => (\n              <li key={action.key ?? action.label}>\n                <MenuAction action={action} close={close} />\n              </li>\n            ))}\n          </ul>\n        )}\n      </Popover>\n      {anchored.map((action) => (\n        // The More cell's TourAnchor: decoration over the button, which keeps every tap.\n        <span\n          key={action.key ?? action.label}\n          aria-hidden\n          data-tour={action.dataTour}\n          className=\"pointer-events-none absolute inset-0\"\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction stopClick(e: MouseEvent) {\n  e.stopPropagation();\n}\n\nfunction stopActivationKeys(e: KeyboardEvent) {\n  if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n}\n\n/**\n * The `href` an action renders as a link with, or `undefined` for a button: a link\n * cannot carry a reason or a spinner (Button's link form has neither), so a refused\n * action — its own `disabledReason`, or a write lock on a `commit` — and a pending one\n * stay buttons and say so.\n */\nfunction useActionHref(action: RowAction): string | undefined {\n  const reason = useCommitReason(action.commit, action.disabledReason);\n  const refused = reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n  return action.href !== undefined && !action.pending && !refused ? action.href : undefined;\n}\n\n/** One entry of the \"⋯\" menu: the words, as a link for an `href`, else a button. */\nfunction MenuAction({ action, close }: { action: RowAction; close: () => void }) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const glyphTone = action.tone === undefined ? undefined : MENU_GLYPH_TONE[action.tone];\n  const words = (\n    <>\n      {glyph && (\n        <span\n          aria-hidden\n          data-tone={glyphTone ? action.tone : undefined}\n          className={cn(\"flex shrink-0 [&_svg]:size-4\", glyphTone)}\n        >\n          {glyph}\n        </span>\n      )}\n      {action.label}\n    </>\n  );\n  const tone = action.tone === \"danger\" ? \"danger\" : undefined;\n  const select = () => {\n    close();\n    action.onSelect?.();\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        stretch\n        tone={tone}\n        disabled={action.disabled}\n        className=\"w-full justify-start text-start\"\n        onClick={select}\n      >\n        {words}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      {...stateAttrs(action)}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      stretch\n      tone={tone}\n      pressed={action.pressed}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      className=\"w-full justify-start text-start\"\n      onClick={select}\n    >\n      {words}\n    </Button>\n  );\n}\n\n/** One inline action: an IconButton with its icon, else a small text button — each a\n *  link for an `href` (see {@link useActionHref}). The control carries the action's\n *  state, its tone and its tour anchor. */\nfunction InlineAction({\n  action,\n  size,\n  glyphSize,\n  tooltipSide,\n}: {\n  action: RowAction;\n  size: RowActionsSize;\n  glyphSize?: IconButtonGlyphSize;\n  tooltipSide?: TooltipSide;\n}) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const iconTone = action.tone === \"default\" ? undefined : action.tone;\n  // A text button has Button's two tones; `info` and `warning` are a glyph's colours.\n  const textTone = action.tone === \"danger\" || action.tone === \"muted\" ? action.tone : undefined;\n  const marks = { \"data-tour\": action.dataTour, ...toneAttr(action.tone) };\n  if (glyph) {\n    if (href !== undefined) {\n      return (\n        <IconButton\n          {...marks}\n          href={href}\n          external={action.external}\n          size={size}\n          glyphSize={glyphSize}\n          label={action.label}\n          tooltipSide={tooltipSide}\n          tone={iconTone}\n          disabled={action.disabled}\n          stopPropagation\n          onClick={() => action.onSelect?.()}\n        >\n          {glyph}\n        </IconButton>\n      );\n    }\n    return (\n      <IconButton\n        {...marks}\n        {...stateAttrs(action)}\n        size={size}\n        glyphSize={glyphSize}\n        label={action.label}\n        tooltipSide={tooltipSide}\n        tone={iconTone}\n        pressed={action.pressed}\n        disabledReason={action.disabledReason}\n        commit={action.commit}\n        pending={action.pending}\n        disabled={action.disabled}\n        stopPropagation\n        onClick={() => action.onSelect?.()}\n      >\n        {glyph}\n      </IconButton>\n    );\n  }\n  // A row listening for clicks must not open as well (IconButton's stopPropagation).\n  const stop = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation();\n      action.onSelect?.();\n    },\n    onKeyDown: (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n    },\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        {...marks}\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        tone={textTone}\n        disabled={action.disabled}\n        {...stop}\n      >\n        {action.label}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      {...marks}\n      {...stateAttrs(action)}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone={textTone}\n      pressed={action.pressed}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      {...stop}\n    >\n      {action.label}\n    </Button>\n  );\n}\n\n/** The actions column's hidden header, in the provider's words. */\nfunction RowActionsHeader({ text, labels }: { text?: string; labels?: LabelOverride<RowActionsLabels> }) {\n  const resolved = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labels);\n  return <span className=\"sr-only\">{text ?? resolved.actions}</span>;\n}\n\nexport interface RowActionsColumnOptions<T> {\n  /** The column's key. Default `\"actions\"`. */\n  key?: string;\n  /** The row's actions — `false` / `null` for the ones a condition leaves out. */\n  actions: (row: T) => RowActionList;\n  /** The row's name, for the \"⋯\" button's name (\"Actions for Ada Example\"). `null` and\n   *  `undefined` both mean \"Actions\". */\n  name?: (row: T) => string | null | undefined;\n  collapse?: RowActionsCollapse;\n  /** Default `xs`. */\n  size?: RowActionsSize;\n  /** See {@link RowActionsProps.glyphSize}. */\n  glyphSize?: IconButtonGlyphSize;\n  /** See {@link RowActionsProps.tooltipSide} — `\"start\"` in a table's last column. */\n  tooltipSide?: TooltipSide;\n  /**\n   * The column's name as plain text — the column-settings checklist and the phone\n   * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left\n   * out, the header shows the provider's `rowActions.actions` to a screen reader and\n   * the plain-text places fall back to the column's `key`.\n   */\n  headerText?: string;\n  labels?: LabelOverride<RowActionsLabels>;\n  /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A DataTable column of {@link RowActions} — an app's action column in one line\n * (§10.8): inline icons at Normal, the \"⋯\" menu at Large with two or more actions.\n *\n *     columns={[...columns, rowActionsColumn({ actions: (r) => [...], name: (r) => r.name })]}\n *\n * The header is visually hidden (the icons say what the column is), the column hugs its\n * content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the\n * buttons keep their own clicks. On a phone it is a line of the card like any column;\n * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it\n * then shows in the opened row instead).\n */\nexport function rowActionsColumn<T>({\n  key = \"actions\",\n  actions,\n  name,\n  collapse,\n  size,\n  glyphSize,\n  tooltipSide,\n  headerText,\n  labels,\n  column,\n}: RowActionsColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header: <RowActionsHeader text={headerText} labels={labels} />,\n    headerText,\n    cell: (row) => (\n      <RowActions\n        actions={actions(row)}\n        name={name?.(row)}\n        collapse={collapse}\n        size={size}\n        glyphSize={glyphSize}\n        tooltipSide={tooltipSide}\n        labels={labels}\n      />\n    ),\n    className: \"w-px whitespace-nowrap text-end\",\n    headClassName: \"w-px\",\n    noRowLink: true,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/row-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Popover } from \"./popover\";\nimport { Button } from \"./button\";\nimport { CompactControls } from \"./field-parts\";\nimport { IconButton } from \"./icon-button\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport type { IconButtonGlyphSize, IconButtonSize } from \"./icon-button\";\nimport type { TooltipSide } from \"./tooltip\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { DEFAULT_ROW_ACTIONS_LABELS } from \"./row-actions-labels\";\n\n/**\n * A row's actions — inline icons at Normal, one \"⋯\" menu at Large and above\n * (docs/text-size-harmonization.md §10.8).\n *\n * At Large an IconButton shows its label as text (§4). In a dense row — a register's\n * action column, a list row's end — every label at once does not fit: Kurvenschmiede\n * has 44 IconButtons in rows, kastlan 119. So a row's actions collapse instead, into\n * the menu the user roster has used since 0.31 (`UserRowActions`, now built on this):\n * one \"⋯\" button, and a menu with each action's icon AND words, where a locked one stays\n * listed and says why.\n *\n * The data is the roster's `UserRowActionList`, generalised: entries, and `false` /\n * `null` for the ones a condition left out (`row.locked || {…}`).\n *\n * 0.33 (§10.16): an action carries its state at both sizes — a toggle (`pressed`), a\n * disclosure (`expanded`, `controls`), a tone, a tour anchor (`dataTour`) — so a row\n * with an \"on\" share button or a tour step no longer keeps hand-rolled IconButtons at\n * Normal and this only at Large (keksdose k15).\n */\n\n/** An action's colour: IconButton's tone inline; in the menu the glyph takes it and the\n *  words keep the text colour, except `danger`, whose words are the danger text. */\nexport type RowActionTone = \"default\" | \"muted\" | \"info\" | \"warning\" | \"danger\";\n\n/** One action of a row. */\nexport interface RowAction {\n  /** React key. Default: the label. */\n  key?: string;\n  /** The action's name: the inline icon's name and tooltip, the menu entry's words. */\n  label: string;\n  /**\n   * Runs it. The kit sends nothing — the app opens its confirmation or calls its API.\n   * Optional only beside `href`; an action has one or the other (or both: `onSelect`\n   * then runs as the link is followed).\n   */\n  onSelect?: () => void;\n  /**\n   * The action NAVIGATES — an edit page, a mail to compose (0.32.1, kastlan's 0.32\n   * report): a real link inline and in the menu, so open in a new tab, a middle click\n   * and the URL on hover work, which `onSelect` + `navigate` lost. The kit's link rule\n   * applies ({@link Button}'s `href`): in-app through the provider's `linkComponent`, an\n   * external or `#anchor` one a plain `<a>`, `mailto:` included.\n   *\n   * A link cannot carry a reason or a spinner, so an action with a `disabledReason`\n   * (or under a write lock, with `commit`) or `pending` stays a button and says why.\n   */\n  href?: string;\n  /** With `href`: leaves the app — a new tab, and a screen reader is told so. */\n  external?: boolean;\n  /**\n   * The glyph: a Lucide icon (`Pencil`), or an element (`<Pencil />`, an app's own\n   * svg) — DataTable's `rowActions` hand their `icon` node through. Inline, an action\n   * without one is a small text button; in the menu it is the words alone.\n   */\n  icon?: LucideIcon | ReactElement;\n  /**\n   * `danger` for delete, revoke, erase: the quiet red of IconButton's `tone=\"danger\"`\n   * inline, the danger text tone in the menu. `muted` (an open or add that should not\n   * compete), `info` (a notice-worthy, harmless action: keksdose's reconcile) and\n   * `warning` (a flag that wants attention): IconButton's tone inline; in the menu the\n   * glyph takes it and the words keep the text colour, so `muted` looks like `default`\n   * there (0.33).\n   */\n  tone?: RowActionTone;\n  /** Why it is not available for this row. It stays listed, focusable, and says so — an\n   *  action that silently vanished would leave the reader looking for it. */\n  disabledReason?: ReactNode;\n  /**\n   * This action COMMITS — it saves, sends, deletes: under a locked\n   * {@link WriteLockProvider} it is refused with the lock's reason, as {@link Button}'s\n   * `commit` is, inline and in the menu alike. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /**\n   * In flight — the request it started has not answered. Inline, the icon turns into\n   * IconButton's spinner (`pending`); collapsed, the \"⋯\" button does, since the menu\n   * closed when the action was chosen. Either way nothing in the row can be pressed again\n   * until it settles: the \"⋯\" opens no menu while busy.\n   */\n  pending?: boolean;\n  /**\n   * Not available for a moment, with nothing to explain — another action of the list\n   * is in flight (an admin panel's `busy`). The plain `disabled`; a lasting refusal is a\n   * `disabledReason`, which says why.\n   */\n  disabled?: boolean;\n  /** Leave it out for this row. */\n  hidden?: boolean;\n  /**\n   * A toggle (0.33): `aria-pressed` and IconButton's \"on\" look inline, `aria-pressed` on\n   * the menu entry. Keep the label the same in both states (\"Share budget\"): the pressed\n   * state already says whether it is on. Not on an `href` action — a link is not a\n   * toggle — nor with `expanded`.\n   */\n  pressed?: boolean;\n  /**\n   * Opens or closes something IN THE PAGE (0.33) — a share card under the row, an\n   * add-category row: `aria-expanded`, inline and on the menu entry. Not with `pressed`:\n   * a disclosure says open, not on. Not on an `href` action.\n   */\n  expanded?: boolean;\n  /** The `id` of what `expanded` opens: `aria-controls`, inline and on the menu entry. */\n  controls?: string;\n  /**\n   * A tour anchor (0.33, §10.18): `data-tour` on ONE element per action at a time.\n   * Inline, on the action's own control (the IconButton, the small text button, the\n   * link). Collapsed, on an `aria-hidden` box laid over the \"⋯\" button — `[data-tour=x]`\n   * resolves to a box the size of the \"⋯\", whose `data-slot=\"row-actions\"` box holds the\n   * button, two anchored actions in one row don't fight over one attribute, and a tap\n   * still reaches the button. Never on the entry in the open menu: the kit's tour takes\n   * the first visible match and the menu is portalled after the row, so a copy there\n   * would never be found, only make the selector match twice. The kit's name for it, as\n   * `AppShellNavItem.dataTour`.\n   */\n  dataTour?: string;\n}\n\n/** What a row's actions may be: entries, and `false` / `null` / `undefined` for the ones\n *  a condition left out. */\nexport type RowActionList = readonly (RowAction | false | null | undefined)[];\n\nexport interface RowActionsLabels {\n  /** The menu button's name when the row has no name of its own; also the actions\n   *  column's (hidden) header in {@link rowActionsColumn}. */\n  actions: string;\n  /** The menu button's name, given the row's: \"Actions for Ada Example\". */\n  actionsFor: (name: string) => string;\n}\n\n// Defined in ./row-actions-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ROW_ACTIONS_LABELS };\n\n/**\n * - `\"auto\"` (default): the icons inline at Normal; the \"⋯\" menu at Large and Extra\n *   large once there are two or more (§10.8). A single action stays inline at every\n *   size, with its label as text at Large — one label fits a row, and a menu of one is\n *   a detour.\n * - `\"menu\"`: the menu at every size — the roster's choice, whose actions grow (§2.4\n *   there) and do not fit a phone card as a strip.\n * - `\"inline\"`: the icons at every size — for a row the app knows has room; at Large\n *   each then shows its label (IconButton's `labelVisible`).\n */\nexport type RowActionsCollapse = \"auto\" | \"menu\" | \"inline\";\n\n/** The sizes a row action comes in: IconButton's row steps. `2xs` is DataTable's\n *  compact density. At Large every one is at least a 48 px target (IconButton). */\nexport type RowActionsSize = Extract<IconButtonSize, \"md\" | \"sm\" | \"xs\" | \"2xs\">;\n\nexport interface RowActionsProps {\n  actions: RowActionList;\n  /** The row's name, for the menu button's name — \"Actions for Ada Example\". Without it\n   *  (or `null`, as API fields often are) the button is \"Actions\". */\n  name?: string | null;\n  /** When the actions collapse into the menu — see {@link RowActionsCollapse}. */\n  collapse?: RowActionsCollapse;\n  /** The inline icons' and the \"⋯\" button's size. Default `xs`, a list row's action. */\n  size?: RowActionsSize;\n  /** The menu's width. Default `\"15rem\"`, in rem so it grows with the words (§3.2). */\n  menuWidth?: `${number}rem`;\n  /** On the wrapper: the inline strip, or the box round the \"⋯\" button. */\n  className?: string;\n  /** The inline glyphs' size, IconButton's `glyphSize` — e.g. 14 in a dense header strip\n   *  (keksdose's category group header). The \"⋯\" button keeps its box's own. */\n  glyphSize?: IconButtonGlyphSize;\n  /** The inline tooltips' side, IconButton's `tooltipSide` — `\"start\"` for a table's last\n   *  column, so a bubble does not run off the row's end. Per row: every inline action. */\n  tooltipSide?: TooltipSide;\n  labels?: LabelOverride<RowActionsLabels>;\n}\n\nfunction visibleActions(actions: RowActionList): RowAction[] {\n  return actions.filter((a): a is RowAction => Boolean(a) && !(a as RowAction).hidden);\n}\n\n/** An action's glyph as a node: a component is rendered, an element is used as is. */\nfunction glyphOf(icon: RowAction[\"icon\"]): ReactNode {\n  if (icon === undefined) return null;\n  if (isValidElement(icon)) return icon;\n  const Icon = icon as LucideIcon;\n  return <Icon />;\n}\n\n/** The menu glyph's tint per tone (0.33): the words keep the text colour, so the glyph\n *  carries `info` and `warning` — IconButton's toned colours. `danger` colours the words\n *  through Button's tone, and `muted` is the default look in a menu. */\nconst MENU_GLYPH_TONE: Partial<Record<RowActionTone, string>> = {\n  info: \"text-info\",\n  warning: \"text-warning\",\n};\n\n/** The state an action's control says, inline and in the menu alike: `aria-expanded` and\n *  `aria-controls` for a disclosure (a toggle's `aria-pressed` goes through the button's\n *  own `pressed`, which also draws the \"on\" look). */\nfunction stateAttrs(action: RowAction) {\n  return {\n    \"aria-expanded\": action.expanded,\n    \"aria-controls\": action.expanded === undefined ? undefined : action.controls,\n  };\n}\n\n/** An action's tone on its inline control, for a caller's CSS and a test: `data-tone`,\n *  left off for the default look. */\nfunction toneAttr(tone: RowActionTone | undefined) {\n  return { \"data-tone\": tone === undefined || tone === \"default\" ? undefined : tone };\n}\n\n/**\n * A row's actions, inline or as a \"⋯\" menu — see {@link RowActionsCollapse}. Every\n * control stops its click (and the Enter/Space it stands for) from reaching the row, so\n * a clickable row or a DataTable `rowLink` does not open as well; in a DataTable column\n * also set `noRowLink: true`, as {@link rowActionsColumn} does.\n *\n * Inline, the icons sit in a {@link CompactControls} region at Normal: their labels\n * stay the names and the tooltips, and a locked one keeps its reason in the tooltip — a\n * line under one icon of a row would break the row. In the menu a locked action's\n * reason is a line under its words at Large and on touch (Button's\n * `disabledReasonDisplay`).\n *\n * The menu is portalled, so a table's scroller cannot clip it; Escape and an outside\n * press close it, and focus goes back to the \"⋯\" button, which is where a confirmation\n * dialog then returns it.\n */\nexport function RowActions({\n  actions,\n  name,\n  collapse = \"auto\",\n  size = \"xs\",\n  menuWidth = \"15rem\",\n  className,\n  glyphSize,\n  tooltipSide,\n  labels: labelsProp,\n}: RowActionsProps) {\n  const labels = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labelsProp);\n  const large = useLargeText();\n  const entries = visibleActions(actions);\n  if (entries.length === 0) return null;\n  const asMenu = collapse === \"menu\" || (collapse === \"auto\" && large && entries.length > 1);\n  if (!asMenu) {\n    const strip = (\n      <div data-slot=\"row-actions\" className={cn(\"inline-flex items-center gap-0.5\", className)}>\n        {entries.map((action) => (\n          <InlineAction\n            key={action.key ?? action.label}\n            action={action}\n            size={size}\n            glyphSize={glyphSize}\n            tooltipSide={tooltipSide}\n          />\n        ))}\n      </div>\n    );\n    // Compact at Normal (no room for a reason line in a row); at Large an inline action\n    // is the app's choice (\"inline\") or the row's only one, and shows its words.\n    return large ? strip : <CompactControls>{strip}</CompactControls>;\n  }\n  const title = name ? labels.actionsFor(name) : labels.actions;\n  // The menu closed when the action was chosen, so what is in flight shows on \"⋯\".\n  const busy = entries.some((action) => action.pending);\n  const anchored = entries.filter((action) => action.dataTour);\n  return (\n    // The \"⋯\" in a box of its own, the inline strip's slot: the tour anchors of the\n    // collapsed actions lie over the button in it (see `dataTour`), and `className`\n    // places the box as it places the strip.\n    <div data-slot=\"row-actions\" className={cn(\"relative inline-flex\", className)}>\n      <Popover\n        width={menuWidth}\n        aria-label={title}\n        className=\"p-1\"\n        trigger={({ open, toggle, ref }) => (\n          <IconButton\n            ref={ref}\n            size={size}\n            label={title}\n            // \"⋯\" is read by everyone as \"more actions\"; the menu it opens is the words.\n            labelVisible={false}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            pending={busy}\n            stopPropagation\n            onClick={toggle}\n          >\n            <MoreHorizontal />\n          </IconButton>\n        )}\n        // React carries an event out of a portal along the COMPONENT tree, so a click in\n        // the menu reached a clickable row or a DataTable `onRowClick` the menu was opened\n        // from, though the panel is nowhere near it in the page — only the \"⋯\" trigger\n        // stopped its own (keksdose's 0.32 report). Stopped on the PANEL itself, its padding\n        // and border included (0.32.2: 0.32.1 stopped it on an inner box, and a click on\n        // the panel's `p-1` still went through): clicks, and the Enter / Space a row also\n        // listens for. Escape goes on, to the popover's own handler that closes it.\n        onClick={stopClick}\n        onKeyDown={stopActivationKeys}\n      >\n        {(close) => (\n          <ul data-slot=\"row-actions-menu\" className=\"space-y-0.5\">\n            {entries.map((action) => (\n              <li key={action.key ?? action.label}>\n                <MenuAction action={action} close={close} />\n              </li>\n            ))}\n          </ul>\n        )}\n      </Popover>\n      {anchored.map((action) => (\n        // The More cell's TourAnchor: decoration over the button, which keeps every tap.\n        <span\n          key={action.key ?? action.label}\n          aria-hidden\n          data-tour={action.dataTour}\n          className=\"pointer-events-none absolute inset-0\"\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction stopClick(e: MouseEvent) {\n  e.stopPropagation();\n}\n\nfunction stopActivationKeys(e: KeyboardEvent) {\n  if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n}\n\n/**\n * The `href` an action renders as a link with, or `undefined` for a button: a link\n * cannot carry a reason or a spinner (Button's link form has neither), so a refused\n * action — its own `disabledReason`, or a write lock on a `commit` — and a pending one\n * stay buttons and say so.\n */\nfunction useActionHref(action: RowAction): string | undefined {\n  const reason = useCommitReason(action.commit, action.disabledReason);\n  const refused = reason !== undefined && reason !== null && reason !== false && reason !== \"\";\n  return action.href !== undefined && !action.pending && !refused ? action.href : undefined;\n}\n\n/** One entry of the \"⋯\" menu: the words, as a link for an `href`, else a button. */\nfunction MenuAction({ action, close }: { action: RowAction; close: () => void }) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const glyphTone = action.tone === undefined ? undefined : MENU_GLYPH_TONE[action.tone];\n  const words = (\n    <>\n      {glyph && (\n        <span\n          aria-hidden\n          data-tone={glyphTone ? action.tone : undefined}\n          className={cn(\"flex shrink-0 [&_svg]:size-4\", glyphTone)}\n        >\n          {glyph}\n        </span>\n      )}\n      {action.label}\n    </>\n  );\n  const tone = action.tone === \"danger\" ? \"danger\" : undefined;\n  const select = () => {\n    close();\n    action.onSelect?.();\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        stretch\n        tone={tone}\n        disabled={action.disabled}\n        className=\"w-full justify-start text-start\"\n        onClick={select}\n      >\n        {words}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      {...stateAttrs(action)}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      stretch\n      tone={tone}\n      pressed={action.pressed}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      className=\"w-full justify-start text-start\"\n      onClick={select}\n    >\n      {words}\n    </Button>\n  );\n}\n\n/** One inline action: an IconButton with its icon, else a small text button — each a\n *  link for an `href` (see {@link useActionHref}). The control carries the action's\n *  state, its tone and its tour anchor. */\nfunction InlineAction({\n  action,\n  size,\n  glyphSize,\n  tooltipSide,\n}: {\n  action: RowAction;\n  size: RowActionsSize;\n  glyphSize?: IconButtonGlyphSize;\n  tooltipSide?: TooltipSide;\n}) {\n  const href = useActionHref(action);\n  const glyph = glyphOf(action.icon);\n  const iconTone = action.tone === \"default\" ? undefined : action.tone;\n  // A text button has Button's two tones; `info` and `warning` are a glyph's colours.\n  const textTone = action.tone === \"danger\" || action.tone === \"muted\" ? action.tone : undefined;\n  const marks = { \"data-tour\": action.dataTour, ...toneAttr(action.tone) };\n  if (glyph) {\n    if (href !== undefined) {\n      return (\n        <IconButton\n          {...marks}\n          href={href}\n          external={action.external}\n          size={size}\n          glyphSize={glyphSize}\n          label={action.label}\n          tooltipSide={tooltipSide}\n          tone={iconTone}\n          disabled={action.disabled}\n          stopPropagation\n          onClick={() => action.onSelect?.()}\n        >\n          {glyph}\n        </IconButton>\n      );\n    }\n    return (\n      <IconButton\n        {...marks}\n        {...stateAttrs(action)}\n        size={size}\n        glyphSize={glyphSize}\n        label={action.label}\n        tooltipSide={tooltipSide}\n        tone={iconTone}\n        pressed={action.pressed}\n        disabledReason={action.disabledReason}\n        commit={action.commit}\n        pending={action.pending}\n        disabled={action.disabled}\n        stopPropagation\n        onClick={() => action.onSelect?.()}\n      >\n        {glyph}\n      </IconButton>\n    );\n  }\n  // A row listening for clicks must not open as well (IconButton's stopPropagation).\n  const stop = {\n    onClick: (e: MouseEvent) => {\n      e.stopPropagation();\n      action.onSelect?.();\n    },\n    onKeyDown: (e: KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") e.stopPropagation();\n    },\n  };\n  if (href !== undefined) {\n    return (\n      <Button\n        {...marks}\n        href={href}\n        external={action.external}\n        variant=\"ghost\"\n        size=\"sm\"\n        tone={textTone}\n        disabled={action.disabled}\n        {...stop}\n      >\n        {action.label}\n      </Button>\n    );\n  }\n  return (\n    <Button\n      {...marks}\n      {...stateAttrs(action)}\n      type=\"button\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone={textTone}\n      pressed={action.pressed}\n      disabledReason={action.disabledReason}\n      commit={action.commit}\n      pending={action.pending}\n      disabled={action.disabled}\n      {...stop}\n    >\n      {action.label}\n    </Button>\n  );\n}\n\n/** The actions column's heading, in the provider's words: on screen since 0.46.1 (keksdose\n *  dev#598 rework), a screen reader's name only with `hidden`. */\nfunction RowActionsHeader({\n  text,\n  labels,\n  hidden,\n}: {\n  text?: string;\n  labels?: LabelOverride<RowActionsLabels>;\n  hidden?: boolean;\n}) {\n  const resolved = useKitLabels(\"rowActions\", DEFAULT_ROW_ACTIONS_LABELS, labels);\n  const word = text ?? resolved.actions;\n  return hidden ? <span className=\"sr-only\">{word}</span> : <>{word}</>;\n}\n\nexport interface RowActionsColumnOptions<T> {\n  /** The column's key. Default `\"actions\"`. */\n  key?: string;\n  /** The row's actions — `false` / `null` for the ones a condition leaves out. */\n  actions: (row: T) => RowActionList;\n  /** The row's name, for the \"⋯\" button's name (\"Actions for Ada Example\"). `null` and\n   *  `undefined` both mean \"Actions\". */\n  name?: (row: T) => string | null | undefined;\n  collapse?: RowActionsCollapse;\n  /** Default `xs`. */\n  size?: RowActionsSize;\n  /** See {@link RowActionsProps.glyphSize}. */\n  glyphSize?: IconButtonGlyphSize;\n  /** See {@link RowActionsProps.tooltipSide} — `\"start\"` in a table's last column. */\n  tooltipSide?: TooltipSide;\n  /**\n   * The column's name as plain text — the column-settings checklist and the phone\n   * card's label read it (`DataTableColumn.headerText`). Pass the app's own word; left\n   * out, the heading shows the provider's `rowActions.actions` and the plain-text\n   * places fall back to the column's `key`.\n   */\n  headerText?: string;\n  /**\n   * The heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE \"Actions\" heading on\n   * every table with an actions column). Default: `headerText`, else the provider's\n   * `rowActions.actions` (\"Actions\"), shown, end-aligned over the buttons. A node\n   * replaces it; `false` keeps the pre-0.46.1 heading, named for a screen reader only.\n   */\n  header?: ReactNode | false;\n  labels?: LabelOverride<RowActionsLabels>;\n  /** Anything else for the column (`mobileHidden`, `cellProps`…), merged last. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A DataTable column of {@link RowActions} — an app's action column in one line\n * (§10.8): inline icons at Normal, the \"⋯\" menu at Large with two or more actions.\n *\n *     columns={[...columns, rowActionsColumn({ actions: (r) => [...], name: (r) => r.name })]}\n *\n * The heading says \"Actions\" on screen (0.46.1; `header` changes or hides it), the\n * column hugs its content at the row's end, and `noRowLink` keeps a `rowHref` anchor off it, so the\n * buttons keep their own clicks. On a phone it is a line of the card like any column;\n * set `column: { mobileHidden: true }` to drop it there (with `mobileDetailsInRow` it\n * then shows in the opened row instead).\n */\nexport function rowActionsColumn<T>({\n  key = \"actions\",\n  actions,\n  name,\n  collapse,\n  size,\n  glyphSize,\n  tooltipSide,\n  headerText,\n  header,\n  labels,\n  column,\n}: RowActionsColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header:\n      header === false || header == null ? (\n        <RowActionsHeader text={headerText} labels={labels} hidden={header === false} />\n      ) : (\n        header\n      ),\n    headerText,\n    cell: (row) => (\n      <RowActions\n        actions={actions(row)}\n        name={name?.(row)}\n        collapse={collapse}\n        size={size}\n        glyphSize={glyphSize}\n        tooltipSide={tooltipSide}\n        labels={labels}\n      />\n    ),\n    className: \"w-px whitespace-nowrap text-end\",\n    // The heading over the buttons, at the row's end (0.46.1).\n    headClassName: \"w-px text-end\",\n    noRowLink: true,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/components/swipeable-row.d.ts

@@ -23,6 +23,14 @@ export interface SwipePaint {
 interface SwipeActionBase {
     onCommit: () => void;
     label: string;
+    /**
+     * What the action IS, apart from its words (0.46, keksdose dev#598): `"approve"`,
+     * `"wont_do"`. The swipe itself never reads it; DataTable's desktop column does — one
+     * button per id, and `desktopSwipeActions.omit` can name the actions the row already
+     * has a button for without matching on a translated label. The kit's own plans
+     * (`feedbackSwipePlan`, `TranslationReviewPanel`'s binding) set their binding's ids.
+     */
+    id?: string;
     /** Rendered inside the panel. Icons stay the consumer's choice — this package
      *  ships no opinion about which icon set an app uses. */
     icon?: ReactNode;

package/dist/components/swipeable-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white\n * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes and inline style for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"] };\n  return {\n    className: armed ? PAINT_ARMED : PAINT_IDLE,\n    style: {\n      \"--swipe-paint-fill\": action.paint.fill,\n      \"--swipe-paint-fg\": action.paint.foreground,\n    } as CSSProperties,\n  };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            // No dimming: a tone or a paint says \"not yet armed\" with the soft→solid\n            // step, which keeps its label readable at both ends (the 0.33 rule; the\n            // dimmed path went with `className` / `armedClassName` in 0.35).\n            look.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-surface\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/swipeable-row.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport type { StatusDotTone } from \"./status-dot\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot\n * already share, so a curtain can be \"the colour of the status it produces\" by name:\n * brand, neutral, success, warning, danger, info, income, expense, and the categorical\n * hues blue, indigo, purple, teal and orange.\n */\nexport type SwipeTone = StatusDotTone;\n\n/**\n * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md\n * §12.6) — a curtain that must be exactly its status pill's palette fill, or two\n * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app\n * passes a variable it declares per theme in its own stylesheet. The kit cannot measure\n * these, so the app's tests pin the pair.\n */\nexport interface SwipePaint {\n  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */\n  fill: string;\n  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */\n  foreground: string;\n}\n\ninterface SwipeActionBase {\n  onCommit: () => void;\n  label: string;\n  /**\n   * What the action IS, apart from its words (0.46, keksdose dev#598): `\"approve\"`,\n   * `\"wont_do\"`. The swipe itself never reads it; DataTable's desktop column does — one\n   * button per id, and `desktopSwipeActions.omit` can name the actions the row already\n   * has a button for without matching on a translated label. The kit's own plans\n   * (`feedbackSwipePlan`, `TranslationReviewPanel`'s binding) set their binding's ids.\n   */\n  id?: string;\n  /** Rendered inside the panel. Icons stay the consumer's choice — this package\n   *  ships no opinion about which icon set an app uses. */\n  icon?: ReactNode;\n}\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The panel has two states. Before the first threshold is crossed it previews the\n * nearest action IDLE, so the user can see what a little more drag will do; crossing\n * the threshold ARMS it — \"let go and this fires\".\n *\n * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the\n * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);\n * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid\n * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at\n * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every\n * dark-mode pastel.\n *\n * **`paint`** follows the same rule for an app's documented exception (see\n * {@link SwipePaint}). The old path, a `className` / `armedClassName` pair under a white\n * label and dimmed idle, was deprecated in 0.33 and removed in 0.35 (round 0.35 R1).\n */\nexport type SwipeAction = SwipeActionBase &\n  (\n    | {\n        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */\n        tone: SwipeTone;\n        paint?: never;\n      }\n    | {\n        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,\n         *  armed `fill` under `foreground`. */\n        paint: SwipePaint;\n        tone?: never;\n      }\n  );\n\n/**\n * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a\n * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair\n * takes Chip's soft money look, the well under the money colour; neutral the active\n * fill under the secondary ink); armed is the plain fill, not `-hover`, under the\n * fill's own foreground. Measured in every shipped preset by\n * theme/__tests__/tokens-css-audit.test.ts.\n */\nexport const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {\n  brand: { idle: \"bg-brand-soft text-brand-muted\", armed: \"bg-brand text-brand-contrast\" },\n  neutral: { idle: \"bg-active text-secondary\", armed: \"bg-neutral text-neutral-contrast\" },\n  success: { idle: \"bg-success-soft text-success\", armed: \"bg-success text-success-contrast\" },\n  warning: { idle: \"bg-warning-soft text-warning\", armed: \"bg-warning text-warning-contrast\" },\n  danger: { idle: \"bg-danger-soft text-danger\", armed: \"bg-danger text-danger-contrast\" },\n  info: { idle: \"bg-info-soft text-info\", armed: \"bg-info text-info-contrast\" },\n  income: { idle: \"bg-surface-2 text-money-pos\", armed: \"bg-money-pos text-money-income-contrast\" },\n  expense: { idle: \"bg-surface-2 text-money-neg\", armed: \"bg-money-neg text-money-expense-contrast\" },\n  blue: { idle: \"bg-hue-blue-soft text-hue-blue\", armed: \"bg-hue-blue text-hue-blue-contrast\" },\n  indigo: { idle: \"bg-hue-indigo-soft text-hue-indigo\", armed: \"bg-hue-indigo text-hue-indigo-contrast\" },\n  purple: { idle: \"bg-hue-purple-soft text-hue-purple\", armed: \"bg-hue-purple text-hue-purple-contrast\" },\n  teal: { idle: \"bg-hue-teal-soft text-hue-teal\", armed: \"bg-hue-teal text-hue-teal-contrast\" },\n  orange: { idle: \"bg-hue-orange-soft text-hue-orange\", armed: \"bg-hue-orange text-hue-orange-contrast\" },\n};\n\n/** `paint`'s two looks, from the two custom properties the panel carries inline. The\n *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */\nconst PAINT_IDLE = \"bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary\";\nconst PAINT_ARMED = \"bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]\";\n\n/** The panel's colour classes and inline style for one action and state. */\nfunction panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties } {\n  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? \"armed\" : \"idle\"] };\n  return {\n    className: armed ? PAINT_ARMED : PAINT_IDLE,\n    style: {\n      \"--swipe-paint-fill\": action.paint.fill,\n      \"--swipe-paint-fg\": action.paint.foreground,\n    } as CSSProperties,\n  };\n}\n\n/**\n * `right`/`left` are PHYSICAL drag directions in every writing direction, and stay so on\n * purpose: a swipe is a movement of the finger across the glass, the gesture hook\n * measures it in screen pixels, and \"which way is destructive\" is an app decision that\n * RTL guidelines do not agree on. An app that wants mirrored actions in RTL swaps the\n * two arrays itself. What the component does mirror is everything it lays out: the\n * reveal panel's contents hug the physical edge being uncovered, and the keyboard\n * buttons sit at the row's logical END.\n */\nexport interface SwipeableRowProps {\n  /** Actions committed by dragging (physically) RIGHT, nearest threshold first. */\n  right?: SwipeAction[];\n  /** Actions committed by dragging (physically) LEFT, nearest threshold first. */\n  left?: SwipeAction[];\n  /** Turn the gesture off — an open editor, a pending mutation, a locked row. This\n   *  also withdraws the keyboard buttons below: a row that must not be acted on must\n   *  not be actionable by ANY input. */\n  enabled?: boolean;\n  /** Names the revealed action buttons as a set (\"Row actions\"), for a reader that\n   *  reaches the group before it reaches any one button. Default:\n   *  `swipeableRow.actions` from the {@link UiKitProvider}, else English. */\n  actionsLabel?: string;\n  className?: string;\n  children: ReactNode;\n}\n\n/** How much of the row stays on screen at full drag. A row that can be pulled\n *  entirely off its own track reads as already deleted, and there is nothing left to\n *  drag back; a sliver keeps the gesture reversible and the row identifiable. */\nconst PEEK_PX = 40;\n\n/**\n * A row whose horizontal drag reveals actions underneath it.\n *\n * The reveal panel spans the FULL row width (Keksdose feedback #174). It used to be\n * two half-width blocks side by side, which capped the drag at half the row so the\n * opposite panel could never be exposed — and on a row bound to three actions that\n * left ~55px between stages on a phone, close enough that the wrong one committed.\n * Only the side being dragged toward is painted now, so full width costs nothing:\n * at rest the content covers both anyway, and a drag only ever reveals one side.\n *\n * Thresholds are still not fixed pixel values — they are spread evenly across the\n * available drag, which is now the row width less a {@link PEEK_PX} sliver. A fixed\n * 72/150/228px ladder overshoots a narrow phone; a proportional one keeps every\n * action reachable and roughly doubles the room between them.\n *\n * **Whether the action will fire is stated three ways, not one** (feedback #174): the\n * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a\n * filled disc, and the label turns bold — plus the existing haptic tick per newly armed\n * stage. A colour\n * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot\n * distinguish the two tones.\n *\n * Clicks that follow a drag are swallowed in the capture phase: without that, a swipe\n * would also fire whatever click handler the row content carries (expanding it, opening\n * a dialog) on top of the action it just committed.\n *\n * ## The keyboard path is buttons, and deliberately not a typed gesture\n *\n * Every action here used to live exclusively inside a pointer drag — `onCommit` had no\n * other caller — so with a keyboard, with a screen reader, or on any input that cannot\n * express 120px of horizontal travel, the row's actions did not exist at all. That is\n * not a rough edge on a phone control: {@link DataTable} mounts this for every row of\n * its mobile layout, and the actions an app puts here are its destructive ones.\n *\n * The rejected fix was to map the gesture onto keys — arrows nudging `dx`, a chord that\n * \"swipes\". That invents a private idiom with nothing to discover it by, and it makes\n * the keyboard imitate a touchscreen instead of doing the job the touchscreen is doing.\n * So each action is ALSO a real button, `sr-only` until it takes focus and then shown at\n * the row's trailing edge, firing the identical `onCommit`: one definition of what an\n * action is, two ways to reach it, and nothing to drift apart. `sr-only` hides from\n * the eye and not from the accessibility tree, so the row also ANNOUNCES what can be\n * done to it rather than keeping it behind a gesture nobody can hear.\n */\nexport function SwipeableRow({\n  right,\n  left,\n  enabled = true,\n  actionsLabel,\n  className,\n  children,\n}: SwipeableRowProps) {\n  const labels = useKitLabels(\"swipeableRow\", DEFAULT_SWIPEABLE_ROW_LABELS, {\n    actions: actionsLabel,\n  });\n  const rowRef = useRef<HTMLDivElement>(null);\n  const [rowWidth, setRowWidth] = useState(0);\n  useEffect(() => {\n    const el = rowRef.current;\n    if (!el) return;\n    setRowWidth(el.clientWidth);\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      for (const e of entries) setRowWidth(e.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const rightActions = right ?? [];\n  const leftActions = left ?? [];\n  const active = enabled && (rightActions.length > 0 || leftActions.length > 0);\n  // The whole row less a sliver, not half of it (feedback #174). `Math.max` keeps a\n  // very narrow row (or one measured before layout) from producing a zero or\n  // negative drag, which would arm every stage at once.\n  const maxDrag = rowWidth > 0 ? Math.max(96, Math.round(rowWidth - PEEK_PX)) : 200;\n  const spread = (actions: SwipeAction[]): SwipeStage[] =>\n    actions.map((a, i) => ({\n      threshold: Math.round((maxDrag * (i + 1)) / (actions.length + 1)),\n      onCommit: a.onCommit,\n    }));\n\n  const swipe = useRowSwipe({\n    enabled: active,\n    rightStages: spread(rightActions),\n    leftStages: spread(leftActions),\n    maxDrag,\n  });\n\n  // A haptic tick per newly armed threshold, so each stage is felt and not only seen.\n  const armedNow = swipe.dx >= 0 ? swipe.armedRightIndex : swipe.armedLeftIndex;\n  const prevArmed = useRef(-1);\n  useEffect(() => {\n    if (armedNow > prevArmed.current && armedNow >= 0) navigator.vibrate?.(12);\n    prevArmed.current = armedNow;\n  }, [armedNow]);\n\n  // Index -1 (nothing armed yet) still previews the nearest action, idle-coloured.\n  const dx = swipe.dx;\n  // Only the side being dragged toward is painted, which is what makes a full-width\n  // panel safe.\n  //\n  // The side has to SURVIVE the release, though, and that is what this ref is for\n  // (Keksdose feedback dev#467): *\"Swiping a category to the left with no option — if\n  // letting it go it gets, for the way back, the background color of the opposite\n  // swipe direction where there should be no color change at all.\"* On release dx\n  // snaps to 0 while the row itself slides back over 150ms, so a plain `dx < 0` read\n  // \"right\" for exactly the frames where the left side was still uncovered — and\n  // painted the RIGHT action's colour into the gap. With no left action at all that\n  // colour was the only thing the gesture ever showed.\n  //\n  // Adjusted during render rather than in an effect: an effect would repaint a frame\n  // later (visibly, at 150ms). State set while rendering re-renders this component\n  // before anything is committed, so the released frame already has the right side.\n  const [lastSide, setLastSide] = useState<\"left\" | \"right\">(\"right\");\n  const side = dx === 0 ? null : dx < 0 ? \"left\" : \"right\";\n  if (side && side !== lastSide) setLastSide(side);\n  const draggingLeft = side ? side === \"left\" : lastSide === \"left\";\n  const shown = draggingLeft\n    ? leftActions[Math.max(0, swipe.armedLeftIndex)]\n    : rightActions[Math.max(0, swipe.armedRightIndex)];\n  const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;\n  const look = shown ? panelLook(shown, armed) : null;\n\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {/* The card under the panel. A dark theme's washes are translucent, and a tone's\n          idle pair is measured as that wash ON the card — so the card is there, whatever\n          the row happens to sit in. */}\n      {active && shown && <div aria-hidden className=\"pointer-events-none absolute inset-0 bg-surface\" />}\n      {active && shown && look && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium transition-all\",\n            // No dimming: a tone or a paint says \"not yet armed\" with the soft→solid\n            // step, which keeps its label readable at both ends (the 0.33 rule; the\n            // dimmed path went with `className` / `armedClassName` in 0.35).\n            look.className,\n            // The panel is anchored to the edge the row is uncovering, so the label\n            // sits where the eye already is rather than across the screen. That edge is\n            // physical, while a flex row starts at the INLINE start — so in RTL the two\n            // directions swap, or the label sat under the row on the covered side.\n            draggingLeft ? \"flex-row-reverse rtl:flex-row\" : \"rtl:flex-row-reverse\",\n          )}\n          style={look.style}\n        >\n          {shown.icon && (\n            <span\n              className={cn(\n                \"flex shrink-0 items-center justify-center rounded-full transition-all\",\n                // Armed, the icon gets a disc of its own and grows — a second,\n                // non-colour signal, and the one that stays readable at a glance. In\n                // the label's own colour (0.33): a white disc vanished on a dark\n                // theme's pastel fill, and the label's colour works on every pair.\n                armed ? \"size-8 scale-110 bg-current/20\" : \"size-7 bg-current/10\",\n              )}\n            >\n              {shown.icon}\n            </span>\n          )}\n          <span className={cn(\"truncate transition-all\", armed && \"text-sm font-semibold\")}>\n            {shown.label}\n          </span>\n        </div>\n      )}\n      <div\n        // Capture phase: the row's own click handler lives on a DESCENDANT, so a\n        // bubble-phase listener here would run after it — too late to suppress.\n        onClickCapture={(e) => {\n          if (!swipe.consumeClick()) return;\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        className={cn(\n          \"relative bg-surface\",\n          // A mouse drag is a supported way to swipe (use-row-swipe gates only on\n          // the button, not the pointer type), and a horizontal mouse drag over\n          // text also SELECTS that text — so committing an action left the row\n          // highlighted blue. Suppressed only while dragging, so text in a row at\n          // rest stays selectable.\n          swipe.dragging ? \"select-none\" : \"transition-transform duration-150 motion-reduce:transition-none\",\n        )}\n        style={{\n          transform: dx !== 0 ? `translate3d(${dx}px,0,0)` : undefined,\n          touchAction: active ? \"pan-y\" : undefined,\n        }}\n        {...(active ? swipe.handlers : {})}\n      >\n        {children}\n      </div>\n      {active && (\n        <div\n          role=\"group\"\n          aria-label={labels.actions}\n          // OUTSIDE the sliding div on purpose: an action that travels with the row it\n          // acts on is a moving target, and the drag transform would carry it off the\n          // screen mid-gesture.\n          //\n          // `pointer-events-none` here, restored on a button only once it HAS focus: a\n          // sr-only button is clipped to nothing but is still a hit target, and this\n          // strip sits at the row's trailing edge — exactly where a drag toward the\n          // start begins.\n          //\n          // `end-0`/`pe-2`, not `right-0`/`pr-2`: in RTL the right edge is where the\n          // row's title starts, and a focused button there covered it.\n          // A gesture that silently failed to start because it landed on an invisible\n          // button is not a bug anyone would find by looking at the screen.\n          className=\"pointer-events-none absolute inset-y-0 end-0 z-10 flex items-center gap-1 pe-2\"\n        >\n          {/* Both sides, each still nearest-threshold first, so the tab order reads in\n              the order the gesture arms them. */}\n          {[...rightActions, ...leftActions].map((action, i) => (\n            <button\n              key={`${action.label}-${i}`}\n              type=\"button\"\n              onClick={action.onCommit}\n              className={cn(\n                \"sr-only whitespace-nowrap rounded-md border-subtle bg-surface text-xs font-medium text-primary shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                // The box's padding and border only once it shows (0.32.1, keksdose's\n                // 0.32 report). Unconditional, `px-2` and `border` beat `sr-only`'s\n                // `padding: 0` and `border-width: 0`, so the hidden button was a 1 px\n                // box with 2 × 0.5rem of padding round it: 26 px at Extra large, running\n                // past the row's end from the strip's start — invisible under its clip,\n                // but counted in the page's scroll width (§4: nothing overflows).\n                \"focus:border focus:px-2 focus:py-1\",\n                FOCUS_RING,\n              )}\n            >\n              {/* The label is the button's accessible name, so the caller's icon is\n                  decoration on top of it rather than a second reading of it. */}\n              {action.icon && (\n                <span aria-hidden=\"true\" className=\"[&_svg]:size-4\">\n                  {action.icon}\n                </span>\n              )}\n              {action.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/tabs.d.ts

@@ -62,7 +62,7 @@ export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutR
     onChange: (id: T) => void;
     className?: string;
     /**
-     * The caret beside a SCROLLING strip below `md` (0.40, kk run 79 gap 1): a › while
+     * The caret beside a SCROLLING strip (0.40, kk run 79 gap 1): a › while
      * tabs lie past the strip's end — a tap scrolls it on by three quarters of its width —
      * turning into a ‹ at the end, which goes back to the first. Shown only while the strip
      * actually overflows.
@@ -72,7 +72,8 @@ export interface TabsProps<T extends string> extends Omit<ComponentPropsWithoutR
      * off (keksdose live #410, whose `tab-strip-more.tsx` this replaces). One button that
      * turns round rather than two that come and go, so the strip's width never changes
      * under the thumb. Out of the tab order — the keyboard walks the strip with the arrow
-     * keys, which bring the focused tab into view. From `md` up nothing changes. Ignored on
+     * keys, which bring the focused tab into view. At every width since 0.46 (keksdose live
+     * #410 round 3: eleven report tabs overflow a laptop too); before, `md:hidden`. Ignored on
      * a vertical strip (a side nav is a column, not a row). Names:
      * `tabs.more` / `tabs.backToFirst`.
      */

package/dist/components/tabs.js

@@ -63,7 +63,7 @@ function Tabs({
   };
   const cueButton = cue ? (
     // The strip's bottom rule continues under the caret, so the row reads as one.
-    /* @__PURE__ */ jsx("div", { "data-tabs-overflow-cue": "", className: "flex shrink-0 items-center self-stretch border-b border-subtle md:hidden", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { "data-tabs-overflow-cue": "", className: "flex shrink-0 items-center self-stretch border-b border-subtle", children: /* @__PURE__ */ jsx(
       IconButton,
       {
         size: "sm",