@eifi1/ui-kit 0.45.0 → 0.46.0

package/src/components/data-table-row-actions.tsx

@@ -1,12 +1,13 @@
 import { isValidElement, useCallback, useMemo } from "react";
 import type { ReactNode } from "react";
 import { Pencil, Trash2 } from "lucide-react";
-import { RowActions, type RowAction } from "./row-actions";
+import { RowActions, type RowAction, type RowActionTone } from "./row-actions";
 import type { SwipeAction } from "./swipeable-row";
 import type { DataTableLabels } from "./data-table-labels";
 import type {
   DataTableColumn,
   DataTableDensity,
+  DataTableDesktopSwipeActions,
   DataTableProps,
   DataTableRowAction,
   MobileSwipeActions,
@@ -20,6 +21,66 @@ import type {
  *  column-settings panel. */
 export const ROW_ACTIONS_KEY = "__rowActions";
 
+/** The key of the column derived from `mobileSwipeActions` (0.46, dev#598) — the
+ *  table's own too. */
+export const SWIPE_ACTIONS_KEY = "__swipeActions";
+
+/** A column the TABLE adds, not the caller: out of the column settings and the count,
+ *  never resized, never the totals row's header. */
+export function isTableOwnColumn(key: string): boolean {
+  return key === ROW_ACTIONS_KEY || key === SWIPE_ACTIONS_KEY;
+}
+
+/** A curtain's tone, as an icon button's (keksdose's `toneOf`): only the tones that MEAN
+ *  something on a quiet icon carry over; a status colour, a hue or an app's `paint` stays
+ *  on the curtain and reads muted. */
+function swipeTone(action: SwipeAction): RowActionTone {
+  switch (action.tone) {
+    case "danger":
+    case "warning":
+    case "info":
+      return action.tone;
+    default:
+      return "muted";
+  }
+}
+
+/**
+ * A row's swipe plan as desktop row actions (dev#598): `end` then `start` — the physical
+ * `right` / `left` only where the logical side is missing, as the card reads them — each
+ * action once, told apart by its `id`, else by its label (two stages with one label would
+ * be one button twice).
+ */
+export function swipePlanRowActions<T>(
+  plan: MobileSwipeActions | null | undefined,
+  row: T,
+  options: Pick<DataTableDesktopSwipeActions<T>, "omit" | "commit"> = {},
+): RowAction[] {
+  if (!plan) return [];
+  const out: RowAction[] = [];
+  const seen = new Set<string>();
+  for (const action of [...(plan.end ?? plan.right ?? []), ...(plan.start ?? plan.left ?? [])]) {
+    const key = action.id ?? action.label;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    if (options.omit?.(action, row)) continue;
+    const commit = typeof options.commit === "function" ? options.commit(action, row) : options.commit;
+    out.push({
+      key,
+      label: action.label,
+      icon: isValidElement(action.icon)
+        ? action.icon
+        : action.icon != null && action.icon !== false
+          ? <>{action.icon}</>
+          : undefined,
+      tone: swipeTone(action),
+      commit,
+      onSelect: action.onCommit,
+    });
+  }
+  return out;
+}
+
 interface ResolvedRowAction<T> {
   key: string;
   label: string;
@@ -81,12 +142,16 @@ export function useRowActionColumn<T>({
   rowName,
   labels,
   density,
+  mobileSwipeActions,
+  desktopSwipeActions,
 }: {
   columns: DataTableColumn<T>[];
   rowActions: DataTableProps<T>["rowActions"];
   rowName: DataTableProps<T>["rowName"];
   labels: DataTableLabels;
   density: DataTableDensity;
+  mobileSwipeActions?: DataTableProps<T>["mobileSwipeActions"];
+  desktopSwipeActions?: DataTableProps<T>["desktopSwipeActions"];
 }): {
   columns: DataTableColumn<T>[];
   swipesFromActions: (row: T) => MobileSwipeActions | null;
@@ -100,7 +165,54 @@ export function useRowActionColumn<T>({
         : [],
     [rowActions, labels],
   );
-  const columns = useMemo<DataTableColumn<T>[]>(
+  // dev#598: the desktop half of the caller's swipes. On by default, except beside
+  // `rowActions`, whose column already is the desktop's (and whose swipes these usually
+  // are). The options object is often a fresh literal per render; its parts are the deps.
+  const swipeOptions = typeof desktopSwipeActions === "object" ? desktopSwipeActions : undefined;
+  const swipeColumnOn =
+    !!mobileSwipeActions && (desktopSwipeActions === undefined ? !rowActions : desktopSwipeActions !== false);
+  const swipeOmit = swipeOptions?.omit;
+  const swipeName = swipeOptions?.name;
+  const swipeCollapse = swipeOptions?.collapse;
+  const swipeCommit = swipeOptions?.commit;
+  const swipeColumn = useMemo<DataTableColumn<T> | null>(
+    () =>
+      swipeColumnOn
+        ? {
+            key: SWIPE_ACTIONS_KEY,
+            header: <span className="sr-only">{labels.actions}</span>,
+            cell: (row) => (
+              <RowActions
+                actions={swipePlanRowActions(mobileSwipeActions!(row), row, { omit: swipeOmit, commit: swipeCommit })}
+                name={(swipeName ?? rowName)?.(row)}
+                collapse={swipeCollapse}
+                size={density === "compact" ? "2xs" : "xs"}
+                // The last column's tooltips open toward the row's start.
+                tooltipSide="start"
+                labels={{ actions: labels.actions }}
+                className="justify-end"
+              />
+            ),
+            className: "w-px whitespace-nowrap text-end",
+            headClassName: "w-px",
+            // On a phone the same actions are the card's swipes.
+            mobileHidden: true,
+            noRowLink: true,
+          }
+        : null,
+    [
+      swipeColumnOn,
+      mobileSwipeActions,
+      swipeOmit,
+      swipeCommit,
+      swipeName,
+      rowName,
+      swipeCollapse,
+      density,
+      labels.actions,
+    ],
+  );
+  const actionColumns = useMemo<DataTableColumn<T>[]>(
     () =>
       rowActions
         ? [
@@ -132,6 +244,10 @@ export function useRowActionColumn<T>({
         : columnsProp,
     [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density],
   );
+  const columns = useMemo(
+    () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),
+    [actionColumns, swipeColumn],
+  );
   const swipesFromActions = (row: T): MobileSwipeActions | null => {
     const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
     if (!swipes.length) return null;

package/src/components/data-table-shared.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
-import { ROW_ACTIONS_KEY } from "./data-table-row-actions";
+import { isTableOwnColumn } from "./data-table-row-actions";
 import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
 import type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from "./data-table";
 import type { LabelOverride } from "../i18n/kit-labels";
@@ -79,7 +79,7 @@ export function cleanAttrs(
  * should pass a string header, and that is visible in what gets announced.
  */
 export function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {
-  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
+  if (isTableOwnColumn(col.key) && labels) return labels.actions;
   return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
 }
 
@@ -162,6 +162,22 @@ export function fromOwnControl(target: EventTarget | null, row: HTMLElement): bo
   return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute("data-row-link");
 }
 
+/**
+ * The controls whose own default IS the click — a native checkbox's or radio's toggle, a
+ * label's click through to its field, a summary's disclosure (0.46, the 0.45 note from
+ * UM): cancelling the click undoes it. Each is the click's own activation target, so a
+ * click on one does not follow the link around it, and {@link RowLink} leaves its
+ * default alone.
+ */
+const OWN_DEFAULT = 'input[type="checkbox"],input[type="radio"],label,summary';
+
+/** Whether a click inside `link` landed on (or in) one of {@link OWN_DEFAULT}. */
+function onOwnDefault(target: EventTarget | null, link: HTMLElement): boolean {
+  if (!(target instanceof Element)) return false;
+  const hit = target.closest(OWN_DEFAULT);
+  return !!hit && hit !== link && link.contains(hit);
+}
+
 /** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to
  *  the browser, and the whole feature is not touching it. */
 const isPlainLeftClick = (e: React.MouseEvent) =>
@@ -220,6 +236,9 @@ export function RowLink({
         // A click in a portal a descendant opened is not a click on the link: leave
         // it (and a link inside it) alone. See `fromOutside`.
         if (fromOutside(e.target, e.currentTarget)) return;
+        // A checkbox, a radio, a label or a summary keeps its own default: cancelling
+        // it would undo the toggle, and the link is not followed from it anyway.
+        if (onOwnDefault(e.target, e.currentTarget)) return;
         if (isPlainLeftClick(e)) e.preventDefault();
       }}
       onClick={(e) => {

package/src/components/data-table.tsx

@@ -2,7 +2,7 @@ import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState
 import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from "react";
 import { Card } from "./card";
 import { Spinner } from "./spinner";
-import { ROW_ACTIONS_KEY, useRowActionColumn } from "./data-table-row-actions";
+import { isTableOwnColumn, useRowActionColumn } from "./data-table-row-actions";
 import { useColumnResize } from "./data-table-resize";
 import { useRangeSelection } from "./data-table-selection";
 import {
@@ -26,6 +26,8 @@ import { nextSorts } from "./data-table-sort";
 import type { SortCycle, SortDir, SortState } from "./data-table-sort";
 import { Pagination } from "./data-table-pagination";
 import type { SwipeAction } from "./swipeable-row";
+import type { RowActionsCollapse } from "./row-actions";
+import type { CommitScope } from "./write-lock";
 import { FullBleedDialog } from "./full-bleed-dialog";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { useAnnounce } from "../hooks/use-announce";
@@ -472,9 +474,28 @@ export interface DataTableProps<T> {
    * Mobile only, and deliberately so: the desktop table already has room for an
    * actions column, and a drag gesture on a pointer device is a worse version of a
    * button. Wraps only the row body, so an expansion panel below stays put while the
-   * row above it slides.
+   * row above it slides. The desktop's buttons for the same actions come with it — see
+   * {@link DataTableProps.desktopSwipeActions}.
    */
   mobileSwipeActions?: (row: T) => MobileSwipeActions | null;
+  /**
+   * The desktop half of `mobileSwipeActions` (0.46, keksdose dev#598 — Marcel: every
+   * table whose phone cards swipe gets a desktop actions column with the same actions):
+   * an actions column DERIVED from the very plan the card swipes with, so the two
+   * viewports offer the same functions and cannot drift. Each button runs the swipe's own
+   * `onCommit` — the same confirm, the same undo toast. The reading-end side's actions
+   * first, then the start side's, each once (by `SwipeAction.id`, else by label); a row
+   * whose plan is `null` gets an empty cell. The column is hidden on the phone, where the
+   * actions are the swipes, kept off the column settings, and its tooltips open toward
+   * the row's start.
+   *
+   * On by default wherever `mobileSwipeActions` is given, so a new swipeable table cannot
+   * forget it — except beside `rowActions`, whose column is the desktop's already (pass
+   * `true` or options to add this one too). `false` where the desktop row carries every
+   * one of those actions as its own buttons; say so at the call site. Options:
+   * {@link DataTableDesktopSwipeActions}.
+   */
+  desktopSwipeActions?: boolean | DataTableDesktopSwipeActions<T>;
   /**
    * Renders as a full-width row above the data rows in the desktop table
    * (mobile has no equivalent list-row slot, so it's desktop-only). For a
@@ -663,6 +684,27 @@ export interface MobileSwipeActions {
   right?: SwipeAction[];
 }
 
+/** How {@link DataTableProps.desktopSwipeActions} draws the column (0.46, dev#598). */
+export interface DataTableDesktopSwipeActions<T> {
+  /** Leave an action out because the row already has its own button for it — keksdose's
+   *  feedback inbox, whose status cell offers `advance` and `wont_do`
+   *  (`feedbackSwipeOmitShown`). Match on `action.id` rather than the translated label. */
+  omit?: (action: SwipeAction, row: T) => boolean;
+  /** The row's name for the "⋯" menu ("Actions for …"). Default: the table's `rowName`. */
+  name?: (row: T) => string | null | undefined;
+  /** {@link RowActionsCollapse}; default `"auto"`. A table whose rows offer more than two
+   *  actions passes `"menu"`, so the column does not switch between icons and a menu. */
+  collapse?: RowActionsCollapse;
+  /**
+   * Whether an action COMMITS, refused with the reason under a locked
+   * `WriteLockProvider` ({@link CommitScope}) — a swipe has no such state, so a plan
+   * usually returns nothing for a locked row and the desktop shows nothing either; with
+   * this the plan can stay and the desktop says why. Per action as a function. Default:
+   * no commit scope (the plan decides).
+   */
+  commit?: CommitScope | ((action: SwipeAction, row: T) => CommitScope | undefined);
+}
+
 /**
  * A totals-row cell: pinned to the scroller's bottom edge, on the header's surface.
  * The rule above it is an inset shadow rather than a `border-t`: the table collapses
@@ -774,6 +816,7 @@ export function DataTable<T>({
   mobileCard,
   mobileSort = false,
   mobileSwipeActions,
+  desktopSwipeActions,
   leadingRow,
   density = "comfortable",
   sortCycle = "tri",
@@ -820,6 +863,8 @@ export function DataTable<T>({
     rowName,
     labels,
     density,
+    mobileSwipeActions,
+    desktopSwipeActions,
   });
   const swipeActionsFor = mobileSwipeActions ?? (rowActions ? swipesFromActions : undefined);
 
@@ -1130,16 +1175,16 @@ export function DataTable<T>({
   // show — so hiding the "Account" column moves "Total" into "Name" rather than
   // dropping it — and on the first visible column when every one carries a value.
   const footerLabelCol = showFooter
-    ? (visibleColumns.find((c) => !c.footer && c.key !== ROW_ACTIONS_KEY) ?? visibleColumns[0])
+    ? (visibleColumns.find((c) => !c.footer && !isTableOwnColumn(c.key)) ?? visibleColumns[0])
     : undefined;
   const footerValue = (col: DataTableColumn<T>) => col.footer?.(sorted, slice);
   const footerHeadingId = useId();
   // Each open row's detail row, for its disclosure button's `aria-controls`.
   const detailIdBase = useId();
   // The actions column is the table's own, not one the user can hide: out of the count.
-  const columnsCountLabel = rowActions
-    ? labels.columnsCount(visibleCount - 1, totalCount - 1)
-    : labels.columnsCount(visibleCount, totalCount);
+  const ownColumns = columns.filter((c) => isTableOwnColumn(c.key)).length;
+  const ownVisible = visibleColumns.filter((c) => isTableOwnColumn(c.key)).length;
+  const columnsCountLabel = labels.columnsCount(visibleCount - ownVisible, totalCount - ownColumns);
   // Match the `md:` breakpoint at the text size in force: we render either the table or
   // the card list — never both — so we don't double up DOM nodes that screen readers and
   // integration tests would have to disambiguate. `usePhoneLayout()` itself, not its twin

package/src/components/date-format-setting.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import { Select } from "./select";
+import type { SelectProps } from "./select";
+import { useAppearanceLabels } from "./appearance-labels";
+import type { AppearanceLabels } from "./appearance-labels";
+import { useKitLocale } from "../i18n/kit-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
+import { DATE_FORMAT_PREFERENCES, dateFormatSample } from "../lib/date-format";
+import type { DateFormatPreference } from "../lib/date-format";
+
+/** 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 function DateFormatSetting({
+  value,
+  onChange,
+  label,
+  hint,
+  language,
+  labels: labelsProp,
+  ...rest
+}: DateFormatSettingProps) {
+  const labels = useAppearanceLabels(labelsProp);
+  const sampleLanguage = useKitLocale(language);
+  return (
+    <Select
+      {...rest}
+      label={label ?? labels.dateFormat}
+      hint={hint === null ? undefined : (hint ?? labels.dateFormatHelp)}
+      value={value}
+      onChange={(e) => onChange(e.target.value as DateFormatPreference)}
+    >
+      {DATE_FORMAT_PREFERENCES.map((preference) => {
+        const sample = dateFormatSample(preference, sampleLanguage);
+        return (
+          <option key={preference} value={preference}>
+            {preference === "auto" ? `${labels.dateFormatAuto} — ${sample}` : sample}
+          </option>
+        );
+      })}
+    </Select>
+  );
+}

package/src/components/swipeable-row.tsx

@@ -31,6 +31,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/src/components/tabs.tsx

@@ -78,7 +78,7 @@ export interface TabsProps<T extends string>
   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.
@@ -88,7 +88,8 @@ export interface TabsProps<T extends string>
    * 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`.
    */
@@ -269,7 +270,7 @@ export function Tabs<T extends string>({
   };
   const cueButton = cue ? (
     // The strip's bottom rule continues under the caret, so the row reads as one.
-    <div data-tabs-overflow-cue="" className="flex shrink-0 items-center self-stretch border-b border-subtle md:hidden">
+    <div data-tabs-overflow-cue="" className="flex shrink-0 items-center self-stretch border-b border-subtle">
       <IconButton
         size="sm"
         variant="ghost"

package/src/components/translation-review-editor.tsx

@@ -221,6 +221,8 @@ export function TranslationReviewEditor({
         <>
           <Textarea
             ref={wordingRef}
+            // The panel's "Needs a change" swipe on an already open row finds it here (#416).
+            data-review-wording=""
             label={missing ? labels.translation : labels.suggestion}
             lang={row.locale}
             rows={Math.min(8, Math.max(2, Math.ceil(Math.max(row.text.length, row.reference.length) / 80)))}

package/src/components/translation-review-labels.ts

@@ -52,6 +52,11 @@ export interface TranslationReviewLabels {
   flag: string;
   /** "Needs a change" for a MISSING string: the suggestion is the translation to add. */
   suggest: string;
+  /** 0.46 (keksdose B2/S3): the desktop row's button that OPENS the editor to send a
+   *  string back — its own name, apart from the editor's `flag`, which saves. */
+  flagRow: string;
+  /** The same for a MISSING string: opens the editor to add the translation. */
+  suggestRow: string;
   /** Clear a verdict: back to unreviewed. */
   reset: string;
   /** The editor's way out without saving. */
@@ -126,6 +131,8 @@ export const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels = {
   approve: "Approve",
   flag: "Needs a change",
   suggest: "Suggest translation",
+  flagRow: "Flag for a change…",
+  suggestRow: "Add a translation…",
   reset: "Mark unreviewed",
   cancel: "Cancel",
   approveSelected: "Approve selected",