@eifi1/ui-kit 0.25.1 → 0.27.0

package/dist/wizard/stepper-nav.d.ts

@@ -1,11 +1,8 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { f as ButtonVariant } from '../feedback-BXKH-ToU.js';
+import { bA as ButtonVariant } from '../kit-labels-DQg82eHB.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-Cdn1QS2k.js';
+import '../data-table-labels-DUELeXpa.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';
@@ -14,6 +11,9 @@ import '../components/popover.js';
 import '../components/chip.js';
 import 'lucide-react';
 import '../components/field-sync.js';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
 import '../search/global-search.js';
@@ -33,19 +33,23 @@ import '../components/dialog-frame.js';
 import '../components/modal.js';
 import '../hooks/use-search-param-state.js';
 import '../components/measured-grid.js';
-import '../components/account-settings-labels.js';
+import '../components/user-avatar.js';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../shell/topbar-action-menu.js';
+import '../components/menu-item.js';
 import '../components/floating-panel.js';
+import '../hooks/use-authed-src.js';
+import '../components/account-settings-labels.js';
 import '../components/bulk-action-bar.js';
 import '../components/list.js';
-import '../components/signed-amount.js';
 import '../components/breadcrumbs.js';
 import '../components/toast.js';
 import '../components/description-list.js';
 import '../components/line-items.js';
-import '../components/progress-bar.js';
 import '../components/error-boundary.js';
 import '../components/authed-image.js';
-import '../hooks/use-authed-src.js';
 import '../components/image-grid.js';
 import '../components/lightbox.js';
 import '../components/write-lock.js';

package/dist/wizard.d.ts

@@ -6,11 +6,8 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './feedback-BXKH-ToU.js';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.js';
-import './data-table-labels-Cdn1QS2k.js';
+import './kit-labels-DQg82eHB.js';
+import './data-table-labels-DUELeXpa.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
 import './components/mini-calendar.js';
@@ -19,6 +16,9 @@ import './components/popover.js';
 import './components/chip.js';
 import 'lucide-react';
 import './components/field-sync.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
 import './tour/tour.js';
 import './search/command-palette.js';
 import './search/global-search.js';
@@ -38,19 +38,23 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './components/account-settings-labels.js';
+import './components/user-avatar.js';
+import './components/status-dot.js';
+import './components/progress-bar.js';
+import './components/signed-amount.js';
+import './shell/topbar-action-menu.js';
+import './components/menu-item.js';
 import './components/floating-panel.js';
+import './hooks/use-authed-src.js';
+import './components/account-settings-labels.js';
 import './components/bulk-action-bar.js';
 import './components/list.js';
-import './components/signed-amount.js';
 import './components/breadcrumbs.js';
 import './components/toast.js';
 import './components/description-list.js';
 import './components/line-items.js';
-import './components/progress-bar.js';
 import './components/error-boundary.js';
 import './components/authed-image.js';
-import './hooks/use-authed-src.js';
 import './components/image-grid.js';
 import './components/lightbox.js';
 import './components/write-lock.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",
@@ -99,6 +99,7 @@
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0 <2",
+    "modern-screenshot": "^4.7.0",
     "react": ">=19",
     "react-dom": ">=19",
     "react-hook-form": "^7.55.0",
@@ -107,6 +108,9 @@
     "sonner": ">=2"
   },
   "peerDependenciesMeta": {
+    "modern-screenshot": {
+      "optional": true
+    },
     "react-hook-form": {
       "optional": true
     },
@@ -142,6 +146,7 @@
     "husky": "^9.1.7",
     "jsdom": "^30.0.1",
     "lucide-react": "^1.47.0",
+    "modern-screenshot": "^4.7.0",
     "react-hook-form": "^7.88.0",
     "react-router": "^8.3.0",
     "recharts": "^3.8.1",

package/src/components/data-table.tsx

@@ -399,6 +399,11 @@ export interface DataTableProps<T> {
    * key/value rows) with a compact custom layout, while keeping the shared
    * clickable/expandable row wrapper. Use when the stacked label/value grid
    * wastes space (feedback #317). Desktop is unaffected.
+   *
+   * It replaces the WHOLE body, `mobilePrimary` included: a column's
+   * `mobilePrimary` cell is not drawn when `mobileCard` is set, so anything that
+   * cell carried (keksdose's environment and rework chips, 0.27) must be drawn by
+   * the card itself — as `FeedbackMobileCard` does.
    */
   mobileCard?: (row: T) => ReactNode;
   /**
@@ -1116,8 +1121,15 @@ export function DataTable<T>({
       label: a.label,
       icon: a.icon,
       onCommit: () => void runRowAction(a.action, row),
-      className: a.tone === "danger" ? "bg-[var(--danger)]" : "bg-[var(--brand)]",
-      armedClassName: a.tone === "danger" ? "bg-[var(--danger-hover)]" : "bg-[var(--brand-hover)]",
+      // Each fill's own text colour — the fills are pastels in dark mode (0.26).
+      className:
+        a.tone === "danger"
+          ? "bg-[var(--danger)] text-[var(--danger-contrast)]"
+          : "bg-[var(--brand)] text-[var(--brand-contrast)]",
+      armedClassName:
+        a.tone === "danger"
+          ? "bg-[var(--danger-hover)] text-[var(--danger-contrast)]"
+          : "bg-[var(--brand-hover)] text-[var(--brand-contrast)]",
     });
     return {
       start: swipes.filter((a) => a.swipe === "start").map(toSwipe),

package/src/components/swipeable-row.tsx

@@ -18,7 +18,11 @@ export interface SwipeAction {
   /** Rendered inside the panel. Icons stay the consumer's choice — this package
    *  ships no opinion about which icon set an app uses. */
   icon?: ReactNode;
-  /** Background utility class while the action is previewed but not yet armed. */
+  /** Background utility class while the action is previewed but not yet armed. The
+   *  panel's text is white unless this sets a text colour too — and a fill that turns
+   *  light in dark mode needs one: pass the fill's contrast token
+   *  (`bg-[var(--danger)] text-[var(--danger-contrast)]`; also `--brand-contrast`,
+   *  `--success-contrast`), as the kit's own swipes do since 0.26. */
   className: string;
   /** Background utility class once the drag has passed this action's threshold. */
   armedClassName: string;

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

@@ -94,6 +94,10 @@ export interface TranslationReviewLabels {
   /** 0.25: asked first when a group's bulk approve is larger than a page — more than the
    *  reviewer can have had on screen. `group` is the group's name. */
   confirmGroup: (count: number, group: string) => string;
+  /** The Undo toast after a swipe bound to `clear` took a verdict back (keksdose, live
+   *  #377 rework: the swipes bound in its settings) — one string, or a batch of them.
+   *  The swipe itself is named by {@link reset}. */
+  clearedToast: (count: number) => string;
 }
 
 export const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels = {
@@ -150,6 +154,7 @@ export const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels = {
     count === 1
       ? `Approve the unreviewed string in ${group}?`
       : `Approve all ${count} unreviewed strings in ${group}, including those not on screen?`,
+  clearedToast: (count) => (count === 1 ? "String marked unreviewed" : `${count} strings marked unreviewed`),
 };
 
 /** A status's word, from the namespace's five. */

package/src/components/translation-review.tsx

@@ -7,6 +7,7 @@ import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
   DEFAULT_TRANSLATION_REVIEW_FILTER,
+  DEFAULT_TRANSLATION_REVIEW_SWIPE,
   REVIEW_STATUSES,
   filterTranslationRows,
   groupTranslationRows,
@@ -14,12 +15,15 @@ import {
   reviewUndo,
   reviewWrite,
   summariseRows,
+  translationReviewSwipePlan,
   unreviewedRows,
 } from "../lib/translation-review";
 import type {
   ReviewStatus,
   TranslationReviewFilter,
   TranslationReviewKey,
+  TranslationReviewSwipeAction,
+  TranslationReviewSwipeBinding,
   TranslationReviewWrite,
   TranslationRow,
   TranslationRowGroup,
@@ -33,6 +37,7 @@ import type { DataTableColumn, DataTableProps, MobileSwipeActions, SortState } f
 import { Disclosure } from "./disclosure";
 import { SearchField } from "./search-field";
 import { toast } from "./toast";
+import type { SwipeAction } from "./swipeable-row";
 import { ToggleGroup } from "./toggle-group";
 import { TranslationReviewEditor } from "./translation-review-editor";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels";
@@ -101,7 +106,8 @@ export interface TranslationReviewSaveInfo {
   /** The open editor, a row's approve button, a swipe on a phone card, a group's
    *  "Approve unreviewed", the selection's bulk bar, or an Undo pressed on the toast. */
   origin: TranslationReviewOrigin;
-  /** The panel shows its own toast for this write (an approval's Undo toast). */
+  /** The panel shows its own toast for this write (an approval's Undo toast, or a
+   *  swiped `clear`'s). */
   toasted: boolean;
 }
 
@@ -181,8 +187,31 @@ export interface TranslationReviewPanelProps {
    *
    * Off by default, so no existing page gains a gesture on the bump. Phones only; the
    * desktop table keeps its approve button.
+   *
+   * A BINDING instead of `true` (keksdose — Marcel's live #377 rework, 2026-10-03: *"Add
+   * the swipe options to be shown also to the settings /settings#interaction area where
+   * the other swipe options are defined"*): keksdose lets the user bind every list's
+   * swipes in Settings → Interaction, per side a primary action at the first threshold and
+   * a secondary one at a longer drag, and a fixed mapping is one its settings cannot
+   * reach. So each logical side takes an ordered ladder of
+   * {@link TranslationReviewSwipeAction}s — index 0 at the first threshold, index 1 at the
+   * longer drag, as {@link SwipeableRow} stages them:
+   *
+   *     swipe={{ end: ["approve", "clear"], start: ["edit"] }}
+   *
+   * `approve` (with Undo), `edit` (the editor, cursor in the wording — "Needs a change"),
+   * `clear` (the verdict taken back, with Undo, which stores it again; only with
+   * `onClear`). An action a row cannot offer drops out and the ladder closes up behind it
+   * ({@link translationReviewSwipePlan}): `approve` on an approved or missing string,
+   * `clear` on a row with no verdict. Every rule above still holds for every binding —
+   * no side swipes in a `readOnly` locale, under a write lock, with the editor open or
+   * the row's write out.
+   *
+   * `true` is {@link DEFAULT_TRANSLATION_REVIEW_SWIPE} — `{ end: ["approve"], start:
+   * ["edit"] }`, 0.25's mapping exactly — and `false` or nothing is no swipe. A binding
+   * turns the Undo toast on by default, as `true` does.
    */
-  swipe?: boolean;
+  swipe?: boolean | TranslationReviewSwipeBinding;
   /**
    * Answer every approval with the kit's Undo toast (`toast.undo`): a row's button, a
    * swipe, the editor's Approve, a group's and the selection's bulk approve. Undo stores
@@ -435,7 +464,9 @@ export function TranslationReviewPanel({
   const baseId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const editable = !readOnly && onSave !== undefined;
-  const undoOn = undoProp ?? (swipe || groupBy !== undefined);
+  const binding: TranslationReviewSwipeBinding | null =
+    swipe === true ? DEFAULT_TRANSLATION_REVIEW_SWIPE : swipe || null;
+  const undoOn = undoProp ?? (binding !== null || groupBy !== undefined);
 
   const [ownFilter, setOwnFilter] = useState<TranslationReviewFilter>(DEFAULT_TRANSLATION_REVIEW_FILTER);
   // The app's fields over the panel's own; a field the app leaves `undefined` is the
@@ -546,10 +577,12 @@ export function TranslationReviewPanel({
   };
 
   /** "String approved — Undo", once `targets` (as they were BEFORE the write) are
-   *  approved. Undo goes through the same queue as every write. */
-  const sayApproved = (targets: readonly TranslationRow[], description?: ReactNode) => {
+   *  approved — or, after a swiped `clear`, "String marked unreviewed — Undo". Either way
+   *  Undo puts back what the rows said before ({@link reviewUndo}), through the same queue
+   *  as every write. */
+  const sayDone = (targets: readonly TranslationRow[], description?: ReactNode, cleared = false) => {
     const back = reviewUndo(targets);
-    const message = labels.approvedToast(targets.length);
+    const message = (cleared ? labels.clearedToast : labels.approvedToast)(targets.length);
     const save = onSave;
     const clear = onClear;
     // Taking back the approval of a row that had no verdict is a clear: without
@@ -578,16 +611,27 @@ export function TranslationReviewPanel({
     if (!onSave || targets.length === 0) return false;
     const save = onSave;
     const ok = await run(key, () => save(targets.map((r) => reviewWrite(r, "APPROVED")), { origin, toasted: undoOn }));
-    if (ok && undoOn) sayApproved(targets, description);
+    if (ok && undoOn) sayDone(targets, description);
     return ok;
   };
 
+  /** A swipe bound to `clear`: the row's verdict taken back, answered like an approval —
+   *  the Undo toast stores the verdict again. Under the row's own key, so it queues behind
+   *  (and never overlaps) an approval of the same row. */
+  const clearRow = async (row: TranslationRow) => {
+    if (!onClear || row.review === null) return;
+    const clear = onClear;
+    const keys = [{ locale: row.locale, key: row.key }];
+    const ok = await run(`row:${row.id}`, () => clear(keys, { origin: "swipe", toasted: undoOn }));
+    if (ok && undoOn) sayDone([row], row.key, true);
+  };
+
   /** The editor's own save: it waits, closes and shows its errors itself, so it does
    *  not go through the queue — but an approval there is answered like any other. */
   const saveFromEditor = async (row: TranslationRow, write: TranslationReviewWrite) => {
     const toasted = undoOn && write.verdict === "APPROVED";
     await onSave?.([write], { origin: "editor", toasted });
-    if (toasted) sayApproved([row], row.key);
+    if (toasted) sayDone([row], row.key);
   };
 
   /**
@@ -713,29 +757,22 @@ export function TranslationReviewPanel({
     });
   }
 
-  /**
-   * A phone card's swipes: Approve toward the end, "Needs a change" toward the start.
-   * None where the row must not be acted on — the same conditions under which its
-   * buttons are locked or absent.
-   */
-  const swipeActions = (r: TranslationRow, groupKey?: string): MobileSwipeActions | null => {
-    if (!editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+  /** One bound swipe action on one row, as {@link SwipeableRow} draws and commits it. */
+  const swipeAction = (r: TranslationRow, id: TranslationReviewSwipeAction, groupKey?: string): SwipeAction => {
     const missing = r.text === "";
-    return {
-      end:
-        missing || r.status === "approved"
-          ? []
-          : [
-              {
-                label: labels.approve,
-                icon: <Check className="size-4" aria-hidden />,
-                onCommit: () => void approve(`row:${r.id}`, [r], "swipe", r.key),
-                className: "bg-[var(--success)]",
-                armedClassName: "bg-[var(--success)]",
-              },
-            ],
-      start: [
-        {
+    switch (id) {
+      case "approve":
+        return {
+          label: labels.approve,
+          icon: <Check className="size-4" aria-hidden />,
+          onCommit: () => void approve(`row:${r.id}`, [r], "swipe", r.key),
+          // Text on the fill in its own contrast colour: the fills are pastels in dark
+          // mode, where SwipeableRow's default white text was unreadable (0.26).
+          className: "bg-[var(--success)] text-[var(--success-contrast)]",
+          armedClassName: "bg-[var(--success)] text-[var(--success-contrast)]",
+        };
+      case "edit":
+        return {
           label: missing ? labels.suggest : labels.flag,
           icon: <PencilLine className="size-4" aria-hidden />,
           // Opens the editor rather than sending the string back: "needs a change"
@@ -745,10 +782,40 @@ export function TranslationReviewPanel({
             setOpenId(r.id);
             setFocusId(r.id);
           },
-          className: missing ? "bg-[var(--brand)]" : "bg-[var(--danger)]",
-          armedClassName: missing ? "bg-[var(--brand-hover)]" : "bg-[var(--danger-hover)]",
-        },
-      ],
+          className: missing
+            ? "bg-[var(--brand)] text-[var(--brand-contrast)]"
+            : "bg-[var(--danger)] text-[var(--danger-contrast)]",
+          armedClassName: missing
+            ? "bg-[var(--brand-hover)] text-[var(--brand-contrast)]"
+            : "bg-[var(--danger-hover)] text-[var(--danger-contrast)]",
+        };
+      case "clear":
+        return {
+          label: labels.reset,
+          icon: <RotateCcw className="size-4" aria-hidden />,
+          onCommit: () => void clearRow(r),
+          // A step back, not a verdict: neither the approval's green nor the send-back's red.
+          // The surface colour as text: white on the grey in light mode, the dark page on
+          // the light grey in dark mode.
+          className: "bg-[var(--text-muted)] text-[var(--bg-surface)]",
+          armedClassName: "bg-[var(--text-secondary)] text-[var(--bg-surface)]",
+        };
+    }
+  };
+
+  /**
+   * A phone card's swipes: the binding ({@link TranslationReviewPanelProps.swipe}) resolved
+   * against the row, each side's ladder closed up over what the row cannot offer. None
+   * where the row must not be acted on — the same conditions under which its buttons are
+   * locked or absent.
+   */
+  const swipeActions = (r: TranslationRow, groupKey?: string): MobileSwipeActions | null => {
+    if (!binding || !editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+    const plan = translationReviewSwipePlan(binding, r, { canClear: onClear !== undefined });
+    if (plan.start.length === 0 && plan.end.length === 0) return null;
+    return {
+      start: plan.start.map((id) => swipeAction(r, id, groupKey)),
+      end: plan.end.map((id) => swipeAction(r, id, groupKey)),
     };
   };
 
@@ -834,7 +901,7 @@ export function TranslationReviewPanel({
           </div>
         </div>
       )}
-      mobileSwipeActions={swipe ? (r) => swipeActions(r, group?.key) : undefined}
+      mobileSwipeActions={binding ? (r) => swipeActions(r, group?.key) : undefined}
       selection={selectionFor(list)}
     />
   );

package/src/feedback/feedback-attachment.tsx

@@ -65,16 +65,32 @@ export interface FeedbackAttachmentFieldLabels {
   attachmentUploadFailed?: (name: string) => string;
 }
 
+/**
+ * English, in the feedback contract's wording since 0.27.0 (docs/feedback-harmonization.md
+ * §4.2: keksdose's `feedback.*` keys are the canon, and the kit owns them now). Three
+ * strings moved with it:
+ *
+ * - `attachmentAdd` "Attach image" → **"Add attachment"**: the field takes a PDF or a text
+ *   log as well wherever the app passes `FEEDBACK_ATTACHMENT_ACCEPT` (keksdose feedback
+ *   #87), and a button that says "image" over a picker that offers a PDF is wrong in one
+ *   of the two places.
+ * - `attachmentPaste` → keksdose's longer line, which says WHY one would paste — a region
+ *   snip shows one corner rather than the whole page (Steering Design feedback #39).
+ * - `attachmentLimit` for one: "remove **it**", as keksdose's `attachments_full_one`;
+ *   "remove one" of a single file read oddly.
+ */
 export const DEFAULT_FEEDBACK_ATTACHMENT_LABELS: FeedbackAttachmentFieldLabels = {
-  attachmentAdd: "Attach image",
+  attachmentAdd: "Add attachment",
   attachmentCapture: "Capture screenshot",
-  attachmentPaste: "…or paste a screenshot from the clipboard.",
+  attachmentPaste: "…or paste a screenshot straight from the clipboard, so you can show one corner rather than the whole page.",
   attachmentRemove: "Remove attachment",
   attachmentList: "Attachments",
   attachmentScreenshot: "Screenshot",
   attachmentRemoveFile: (name) => `Remove ${name}`,
   attachmentLimit: (max) =>
-    `Up to ${max} ${max === 1 ? "attachment" : "attachments"} — remove one to add another.`,
+    max === 1
+      ? "Up to 1 attachment — remove it to add another."
+      : `Up to ${max} attachments — remove one to add another.`,
   attachmentUploading: "Uploading…",
   attachmentUploadFailed: (name) => `“${name}” could not be uploaded`,
 };