@eifi1/ui-kit 0.25.0 → 0.26.0

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

@@ -15,7 +15,11 @@ 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/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 { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The two background classes are the idle and armed states. Before the first\n * threshold is crossed the panel previews the nearest action in its IDLE colour, so\n * the user can see what a little more drag will do; crossing the threshold flips it to\n * `armedClassName`. Passing the same value for both simply removes that feedback.\n */\nexport interface SwipeAction {\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  /** Background utility class while the action is previewed but not yet armed. */\n  className: string;\n  /** Background utility class once the drag has passed this action's threshold. */\n  armedClassName: string;\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 dimmed to solid, the icon grows and gains a filled disc, and the\n * label turns bold — plus the existing haptic tick per newly armed 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\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {active && shown && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium text-white transition-all\",\n            // Dimmed until the drag has actually passed a threshold: \"nothing will\n            // happen yet\" has to look different from \"let go and this fires\", and on\n            // a moving row a one-step colour change was too quiet to notice.\n            armed ? \"opacity-100\" : \"opacity-60\",\n            armed ? shown.armedClassName : shown.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        >\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.\n                armed ? \"size-8 scale-110 bg-white/25\" : \"size-7 bg-white/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-[var(--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 border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\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 { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useRowSwipe, type SwipeStage } from \"../hooks/use-row-swipe\";\nimport { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * One armed swipe action: what it does, and how the reveal panel presents it.\n *\n * The two background classes are the idle and armed states. Before the first\n * threshold is crossed the panel previews the nearest action in its IDLE colour, so\n * the user can see what a little more drag will do; crossing the threshold flips it to\n * `armedClassName`. Passing the same value for both simply removes that feedback.\n */\nexport interface SwipeAction {\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  /** Background utility class while the action is previewed but not yet armed. The\n   *  panel's text is white unless this sets a text colour too — and a fill that turns\n   *  light in dark mode needs one: pass the fill's contrast token\n   *  (`bg-[var(--danger)] text-[var(--danger-contrast)]`; also `--brand-contrast`,\n   *  `--success-contrast`), as the kit's own swipes do since 0.26. */\n  className: string;\n  /** Background utility class once the drag has passed this action's threshold. */\n  armedClassName: string;\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 dimmed to solid, the icon grows and gains a filled disc, and the\n * label turns bold — plus the existing haptic tick per newly armed 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\n  return (\n    <div ref={rowRef} className={cn(\"relative overflow-hidden\", className)}>\n      {active && shown && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 flex items-center gap-2 px-4\",\n            \"text-xs font-medium text-white transition-all\",\n            // Dimmed until the drag has actually passed a threshold: \"nothing will\n            // happen yet\" has to look different from \"let go and this fires\", and on\n            // a moving row a one-step colour change was too quiet to notice.\n            armed ? \"opacity-100\" : \"opacity-60\",\n            armed ? shown.armedClassName : shown.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        >\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.\n                armed ? \"size-8 scale-110 bg-white/25\" : \"size-7 bg-white/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-[var(--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 border-[var(--border)] bg-[var(--bg-surface)] px-2 py-1 text-xs font-medium text-[var(--text-primary)] shadow-sm\",\n                \"focus:not-sr-only focus:pointer-events-auto focus:inline-flex focus:items-center focus:gap-1.5\",\n                \"focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\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/translation-review-labels.d.ts

@@ -94,6 +94,10 @@ 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;
 }
 declare const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels;
 /** A status's word, from the namespace's five. */

package/dist/components/translation-review-labels.js

@@ -48,7 +48,8 @@ const DEFAULT_TRANSLATION_REVIEW_LABELS = {
   approvedToast: (count) => count === 1 ? "String approved" : `${count} strings approved`,
   groupCount: (unreviewed, total) => `${unreviewed} unreviewed / ${total}`,
   approveGroup: (count) => `Approve unreviewed (${count})`,
-  confirmGroup: (count, group) => count === 1 ? `Approve the unreviewed string in ${group}?` : `Approve all ${count} unreviewed strings in ${group}, including those not on screen?`
+  confirmGroup: (count, group) => 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`
 };
 function reviewStatusLabel(labels, status) {
   switch (status) {

package/dist/components/translation-review-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/translation-review-labels.ts"],"sourcesContent":["import type { ReviewStatus } from \"../lib/translation-review\";\n\n/**\n * The `translationReview` namespace: every word of the translation-review parts\n * (`ReviewStatusChip`, `TranslationProgress`, `TranslationLocaleTabs`,\n * `TranslationExportButton`, `TranslationReviewEditor`, `TranslationReviewPanel`).\n *\n * Its own module, like `data-table-labels.ts`: `kit-labels.tsx` and `defaults.ts` import\n * it, and neither has to load the components to get the words. The English is keksdose's\n * and kastlan's own (`translation_review.*`, `translations:*`), British.\n */\nexport interface TranslationReviewLabels {\n  /** The five statuses — the chip, the filter, the progress legend. */\n  statusMissing: string;\n  statusUnreviewed: string;\n  statusChanged: string;\n  statusNeedsChange: string;\n  statusApproved: string;\n  /** Accessible name of the status filter. */\n  statusFilter: string;\n  /** The status filter's first option. */\n  all: string;\n  /** A status filter option with its count: \"Unreviewed · 12\". */\n  filterCount: (label: string, count: number) => string;\n  /** The source filter's label — shown only when the rows come from several sources\n   *  (kastlan's screen texts and documents). */\n  source: string;\n  allSources: string;\n  /** The namespace filter's label and its \"every one\" option. */\n  namespace: string;\n  allNamespaces: string;\n  search: string;\n  /** The placeholder filter, with how many rows it would show. */\n  placeholdersOnly: (count: number) => string;\n  /** The chip on a row whose placeholders differ from the reference's. */\n  placeholderChip: string;\n  /** The key column, and the key's caption in the editor. */\n  key: string;\n  statusColumn: string;\n  /** No row matches the filters. */\n  empty: string;\n  /** In place of the text of a string the locale lacks. */\n  missingText: string;\n  /** The progress bar's label. */\n  progress: (approved: number, total: number) => string;\n  /** A locale tab's badge. */\n  localeProgress: (approved: number, total: number) => string;\n  /** Accessible name of the locale tabs. */\n  locales: string;\n  approve: string;\n  /** Send a string back: \"Needs a change\". */\n  flag: string;\n  /** \"Needs a change\" for a MISSING string: the suggestion is the translation to add. */\n  suggest: string;\n  /** Clear a verdict: back to unreviewed. */\n  reset: string;\n  /** The editor's way out without saving. */\n  cancel: string;\n  approveSelected: string;\n  resetSelected: string;\n  /** Selects every row the filters show — the phone's way into the bulk actions, where\n   *  the table has no checkboxes. */\n  selectShown: string;\n  /** Over the old wording of a row that changed since its verdict. */\n  changedSince: string;\n  reviewedWording: string;\n  reviewedReference: string;\n  /** The placeholders differ: the reference's and the text's, each a list. */\n  placeholderMismatch: (reference: string, text: string) => string;\n  lastApproved: (name: string, date: string) => string;\n  lastFlagged: (name: string, date: string) => string;\n  /** The reviewer's name once the account is gone — what `name` above becomes. */\n  erasedReviewer: string;\n  /** The editor's wording field, opened on the current text. */\n  suggestion: string;\n  /** The same field for a missing string. */\n  translation: string;\n  note: string;\n  notePlaceholder: string;\n  /** The viewer may read this locale but not review it. */\n  readOnly: string;\n  /** The reviewer is limited to some areas — `areas` is their names, joined. */\n  scope: (areas: string) => string;\n  exportCorrections: (count: number) => string;\n  /** A callback rejected and no `formatError` says better. */\n  failed: string;\n  /** 0.25: the Undo toast after an approval (`undo`) — one string, or a batch of them. */\n  approvedToast: (count: number) => string;\n  /** 0.25: a group's header under `groupBy` — how many of its rows nobody has read yet,\n   *  of how many the filters show in it. */\n  groupCount: (unreviewed: number, total: number) => string;\n  /** 0.25: a group's bulk action — approve its unreviewed rows. */\n  approveGroup: (count: number) => string;\n  /** 0.25: asked first when a group's bulk approve is larger than a page — more than the\n   *  reviewer can have had on screen. `group` is the group's name. */\n  confirmGroup: (count: number, group: string) => string;\n}\n\nexport const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels = {\n  statusMissing: \"Missing\",\n  statusUnreviewed: \"Unreviewed\",\n  statusChanged: \"Changed since review\",\n  statusNeedsChange: \"Needs a change\",\n  statusApproved: \"Approved\",\n  statusFilter: \"Status\",\n  all: \"All\",\n  filterCount: (label, count) => `${label} · ${count}`,\n  source: \"Texts\",\n  allSources: \"All texts\",\n  namespace: \"Area\",\n  allNamespaces: \"All areas\",\n  search: \"Search keys and text\",\n  placeholdersOnly: (count) => `Only placeholder problems (${count})`,\n  placeholderChip: \"Placeholders\",\n  key: \"Key\",\n  statusColumn: \"Status\",\n  empty: \"No strings match these filters.\",\n  missingText: \"Missing in this language\",\n  progress: (approved, total) => `${approved} of ${total} approved`,\n  localeProgress: (approved, total) => `${approved}/${total}`,\n  locales: \"Languages\",\n  approve: \"Approve\",\n  flag: \"Needs a change\",\n  suggest: \"Suggest translation\",\n  reset: \"Mark unreviewed\",\n  cancel: \"Cancel\",\n  approveSelected: \"Approve selected\",\n  resetSelected: \"Mark selected unreviewed\",\n  selectShown: \"Select all shown\",\n  changedSince: \"This string changed after it was reviewed. Please read it again.\",\n  reviewedWording: \"Wording when reviewed\",\n  reviewedReference: \"Reference when reviewed\",\n  placeholderMismatch: (reference, text) =>\n    `The placeholders differ from the reference — reference: ${reference}; this text: ${text}. The app fills these in, so they must stay exactly as they are.`,\n  lastApproved: (name, date) => `Approved by ${name} on ${date}`,\n  lastFlagged: (name, date) => `Marked as needing a change by ${name} on ${date}`,\n  erasedReviewer: \"a deleted account\",\n  suggestion: \"Better wording\",\n  translation: \"Translation\",\n  note: \"Note (optional)\",\n  notePlaceholder: \"What is wrong, or what to keep in mind\",\n  readOnly: \"You can read this language but not review it.\",\n  scope: (areas) => `Your review is limited to: ${areas}.`,\n  exportCorrections: (count) => `Export corrections (${count})`,\n  failed: \"That did not work. Please try again.\",\n  approvedToast: (count) => (count === 1 ? \"String approved\" : `${count} strings approved`),\n  groupCount: (unreviewed, total) => `${unreviewed} unreviewed / ${total}`,\n  approveGroup: (count) => `Approve unreviewed (${count})`,\n  confirmGroup: (count, group) =>\n    count === 1\n      ? `Approve the unreviewed string in ${group}?`\n      : `Approve all ${count} unreviewed strings in ${group}, including those not on screen?`,\n};\n\n/** A status's word, from the namespace's five. */\nexport function reviewStatusLabel(labels: TranslationReviewLabels, status: ReviewStatus): string {\n  switch (status) {\n    case \"missing\":\n      return labels.statusMissing;\n    case \"unreviewed\":\n      return labels.statusUnreviewed;\n    case \"changed\":\n      return labels.statusChanged;\n    case \"needs_change\":\n      return labels.statusNeedsChange;\n    case \"approved\":\n      return labels.statusApproved;\n  }\n}\n"],"mappings":";AAkGO,MAAM,oCAA6D;AAAA,EACxE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,KAAK;AAAA,EACL,aAAa,CAAC,OAAO,UAAU,GAAG,KAAK,SAAM,KAAK;AAAA,EAClD,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,kBAAkB,CAAC,UAAU,8BAA8B,KAAK;AAAA,EAChE,iBAAiB;AAAA,EACjB,KAAK;AAAA,EACL,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU,CAAC,UAAU,UAAU,GAAG,QAAQ,OAAO,KAAK;AAAA,EACtD,gBAAgB,CAAC,UAAU,UAAU,GAAG,QAAQ,IAAI,KAAK;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,qBAAqB,CAAC,WAAW,SAC/B,gEAA2D,SAAS,gBAAgB,IAAI;AAAA,EAC1F,cAAc,CAAC,MAAM,SAAS,eAAe,IAAI,OAAO,IAAI;AAAA,EAC5D,aAAa,CAAC,MAAM,SAAS,iCAAiC,IAAI,OAAO,IAAI;AAAA,EAC7E,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,OAAO,CAAC,UAAU,8BAA8B,KAAK;AAAA,EACrD,mBAAmB,CAAC,UAAU,uBAAuB,KAAK;AAAA,EAC1D,QAAQ;AAAA,EACR,eAAe,CAAC,UAAW,UAAU,IAAI,oBAAoB,GAAG,KAAK;AAAA,EACrE,YAAY,CAAC,YAAY,UAAU,GAAG,UAAU,iBAAiB,KAAK;AAAA,EACtE,cAAc,CAAC,UAAU,uBAAuB,KAAK;AAAA,EACrD,cAAc,CAAC,OAAO,UACpB,UAAU,IACN,oCAAoC,KAAK,MACzC,eAAe,KAAK,0BAA0B,KAAK;AAC3D;AAGO,SAAS,kBAAkB,QAAiC,QAA8B;AAC/F,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,EAClB;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/translation-review-labels.ts"],"sourcesContent":["import type { ReviewStatus } from \"../lib/translation-review\";\n\n/**\n * The `translationReview` namespace: every word of the translation-review parts\n * (`ReviewStatusChip`, `TranslationProgress`, `TranslationLocaleTabs`,\n * `TranslationExportButton`, `TranslationReviewEditor`, `TranslationReviewPanel`).\n *\n * Its own module, like `data-table-labels.ts`: `kit-labels.tsx` and `defaults.ts` import\n * it, and neither has to load the components to get the words. The English is keksdose's\n * and kastlan's own (`translation_review.*`, `translations:*`), British.\n */\nexport interface TranslationReviewLabels {\n  /** The five statuses — the chip, the filter, the progress legend. */\n  statusMissing: string;\n  statusUnreviewed: string;\n  statusChanged: string;\n  statusNeedsChange: string;\n  statusApproved: string;\n  /** Accessible name of the status filter. */\n  statusFilter: string;\n  /** The status filter's first option. */\n  all: string;\n  /** A status filter option with its count: \"Unreviewed · 12\". */\n  filterCount: (label: string, count: number) => string;\n  /** The source filter's label — shown only when the rows come from several sources\n   *  (kastlan's screen texts and documents). */\n  source: string;\n  allSources: string;\n  /** The namespace filter's label and its \"every one\" option. */\n  namespace: string;\n  allNamespaces: string;\n  search: string;\n  /** The placeholder filter, with how many rows it would show. */\n  placeholdersOnly: (count: number) => string;\n  /** The chip on a row whose placeholders differ from the reference's. */\n  placeholderChip: string;\n  /** The key column, and the key's caption in the editor. */\n  key: string;\n  statusColumn: string;\n  /** No row matches the filters. */\n  empty: string;\n  /** In place of the text of a string the locale lacks. */\n  missingText: string;\n  /** The progress bar's label. */\n  progress: (approved: number, total: number) => string;\n  /** A locale tab's badge. */\n  localeProgress: (approved: number, total: number) => string;\n  /** Accessible name of the locale tabs. */\n  locales: string;\n  approve: string;\n  /** Send a string back: \"Needs a change\". */\n  flag: string;\n  /** \"Needs a change\" for a MISSING string: the suggestion is the translation to add. */\n  suggest: string;\n  /** Clear a verdict: back to unreviewed. */\n  reset: string;\n  /** The editor's way out without saving. */\n  cancel: string;\n  approveSelected: string;\n  resetSelected: string;\n  /** Selects every row the filters show — the phone's way into the bulk actions, where\n   *  the table has no checkboxes. */\n  selectShown: string;\n  /** Over the old wording of a row that changed since its verdict. */\n  changedSince: string;\n  reviewedWording: string;\n  reviewedReference: string;\n  /** The placeholders differ: the reference's and the text's, each a list. */\n  placeholderMismatch: (reference: string, text: string) => string;\n  lastApproved: (name: string, date: string) => string;\n  lastFlagged: (name: string, date: string) => string;\n  /** The reviewer's name once the account is gone — what `name` above becomes. */\n  erasedReviewer: string;\n  /** The editor's wording field, opened on the current text. */\n  suggestion: string;\n  /** The same field for a missing string. */\n  translation: string;\n  note: string;\n  notePlaceholder: string;\n  /** The viewer may read this locale but not review it. */\n  readOnly: string;\n  /** The reviewer is limited to some areas — `areas` is their names, joined. */\n  scope: (areas: string) => string;\n  exportCorrections: (count: number) => string;\n  /** A callback rejected and no `formatError` says better. */\n  failed: string;\n  /** 0.25: the Undo toast after an approval (`undo`) — one string, or a batch of them. */\n  approvedToast: (count: number) => string;\n  /** 0.25: a group's header under `groupBy` — how many of its rows nobody has read yet,\n   *  of how many the filters show in it. */\n  groupCount: (unreviewed: number, total: number) => string;\n  /** 0.25: a group's bulk action — approve its unreviewed rows. */\n  approveGroup: (count: number) => string;\n  /** 0.25: asked first when a group's bulk approve is larger than a page — more than the\n   *  reviewer can have had on screen. `group` is the group's name. */\n  confirmGroup: (count: number, group: string) => string;\n  /** The Undo toast after a swipe bound to `clear` took a verdict back (keksdose, live\n   *  #377 rework: the swipes bound in its settings) — one string, or a batch of them.\n   *  The swipe itself is named by {@link reset}. */\n  clearedToast: (count: number) => string;\n}\n\nexport const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels = {\n  statusMissing: \"Missing\",\n  statusUnreviewed: \"Unreviewed\",\n  statusChanged: \"Changed since review\",\n  statusNeedsChange: \"Needs a change\",\n  statusApproved: \"Approved\",\n  statusFilter: \"Status\",\n  all: \"All\",\n  filterCount: (label, count) => `${label} · ${count}`,\n  source: \"Texts\",\n  allSources: \"All texts\",\n  namespace: \"Area\",\n  allNamespaces: \"All areas\",\n  search: \"Search keys and text\",\n  placeholdersOnly: (count) => `Only placeholder problems (${count})`,\n  placeholderChip: \"Placeholders\",\n  key: \"Key\",\n  statusColumn: \"Status\",\n  empty: \"No strings match these filters.\",\n  missingText: \"Missing in this language\",\n  progress: (approved, total) => `${approved} of ${total} approved`,\n  localeProgress: (approved, total) => `${approved}/${total}`,\n  locales: \"Languages\",\n  approve: \"Approve\",\n  flag: \"Needs a change\",\n  suggest: \"Suggest translation\",\n  reset: \"Mark unreviewed\",\n  cancel: \"Cancel\",\n  approveSelected: \"Approve selected\",\n  resetSelected: \"Mark selected unreviewed\",\n  selectShown: \"Select all shown\",\n  changedSince: \"This string changed after it was reviewed. Please read it again.\",\n  reviewedWording: \"Wording when reviewed\",\n  reviewedReference: \"Reference when reviewed\",\n  placeholderMismatch: (reference, text) =>\n    `The placeholders differ from the reference — reference: ${reference}; this text: ${text}. The app fills these in, so they must stay exactly as they are.`,\n  lastApproved: (name, date) => `Approved by ${name} on ${date}`,\n  lastFlagged: (name, date) => `Marked as needing a change by ${name} on ${date}`,\n  erasedReviewer: \"a deleted account\",\n  suggestion: \"Better wording\",\n  translation: \"Translation\",\n  note: \"Note (optional)\",\n  notePlaceholder: \"What is wrong, or what to keep in mind\",\n  readOnly: \"You can read this language but not review it.\",\n  scope: (areas) => `Your review is limited to: ${areas}.`,\n  exportCorrections: (count) => `Export corrections (${count})`,\n  failed: \"That did not work. Please try again.\",\n  approvedToast: (count) => (count === 1 ? \"String approved\" : `${count} strings approved`),\n  groupCount: (unreviewed, total) => `${unreviewed} unreviewed / ${total}`,\n  approveGroup: (count) => `Approve unreviewed (${count})`,\n  confirmGroup: (count, group) =>\n    count === 1\n      ? `Approve the unreviewed string in ${group}?`\n      : `Approve all ${count} unreviewed strings in ${group}, including those not on screen?`,\n  clearedToast: (count) => (count === 1 ? \"String marked unreviewed\" : `${count} strings marked unreviewed`),\n};\n\n/** A status's word, from the namespace's five. */\nexport function reviewStatusLabel(labels: TranslationReviewLabels, status: ReviewStatus): string {\n  switch (status) {\n    case \"missing\":\n      return labels.statusMissing;\n    case \"unreviewed\":\n      return labels.statusUnreviewed;\n    case \"changed\":\n      return labels.statusChanged;\n    case \"needs_change\":\n      return labels.statusNeedsChange;\n    case \"approved\":\n      return labels.statusApproved;\n  }\n}\n"],"mappings":";AAsGO,MAAM,oCAA6D;AAAA,EACxE,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,KAAK;AAAA,EACL,aAAa,CAAC,OAAO,UAAU,GAAG,KAAK,SAAM,KAAK;AAAA,EAClD,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,kBAAkB,CAAC,UAAU,8BAA8B,KAAK;AAAA,EAChE,iBAAiB;AAAA,EACjB,KAAK;AAAA,EACL,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU,CAAC,UAAU,UAAU,GAAG,QAAQ,OAAO,KAAK;AAAA,EACtD,gBAAgB,CAAC,UAAU,UAAU,GAAG,QAAQ,IAAI,KAAK;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,qBAAqB,CAAC,WAAW,SAC/B,gEAA2D,SAAS,gBAAgB,IAAI;AAAA,EAC1F,cAAc,CAAC,MAAM,SAAS,eAAe,IAAI,OAAO,IAAI;AAAA,EAC5D,aAAa,CAAC,MAAM,SAAS,iCAAiC,IAAI,OAAO,IAAI;AAAA,EAC7E,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,OAAO,CAAC,UAAU,8BAA8B,KAAK;AAAA,EACrD,mBAAmB,CAAC,UAAU,uBAAuB,KAAK;AAAA,EAC1D,QAAQ;AAAA,EACR,eAAe,CAAC,UAAW,UAAU,IAAI,oBAAoB,GAAG,KAAK;AAAA,EACrE,YAAY,CAAC,YAAY,UAAU,GAAG,UAAU,iBAAiB,KAAK;AAAA,EACtE,cAAc,CAAC,UAAU,uBAAuB,KAAK;AAAA,EACrD,cAAc,CAAC,OAAO,UACpB,UAAU,IACN,oCAAoC,KAAK,MACzC,eAAe,KAAK,0BAA0B,KAAK;AAAA,EACzD,cAAc,CAAC,UAAW,UAAU,IAAI,6BAA6B,GAAG,KAAK;AAC/E;AAGO,SAAS,kBAAkB,QAAiC,QAA8B;AAC/F,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,EAClB;AACF;","names":[]}

package/dist/components/translation-review.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { TranslationRow, TranslationReviewWrite, TranslationReviewKey, TranslationReviewFilter } from '../lib/translation-review.js';
+import { TranslationRow, TranslationReviewWrite, TranslationReviewKey, TranslationReviewFilter, TranslationReviewSwipeBinding } from '../lib/translation-review.js';
 import { TranslationReviewLabels } from './translation-review-labels.js';
 export { DEFAULT_TRANSLATION_REVIEW_LABELS } from './translation-review-labels.js';
 export { REVIEW_STATUS_TONES, ReviewStatusChip, ReviewStatusChipProps, TranslationExportButton, TranslationExportButtonProps, TranslationLocaleTab, TranslationLocaleTabs, TranslationLocaleTabsProps, TranslationProgress, TranslationProgressProps } from './translation-review-parts.js';
@@ -46,7 +46,8 @@ 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;
 }
 /** How {@link TranslationReviewPanelProps.groupBy} names a row's group. */
@@ -85,6 +86,11 @@ interface TranslationReviewPanelProps {
     /**
      * Controlled filters — for an app that keeps them in the URL (keksdose's `?status=`,
      * `?ns=`, `?q=`). Whatever is left out is the panel's own. Pair with `onFilterChange`.
+     *
+     * A field passed here is the app's, and the control shows what the app says: one the app
+     * passes but does not write back from `onFilterChange` is a control that does nothing.
+     * A development build warns about that once per field (0.25.1, Kurvenschmiede); a field
+     * left out entirely is fine — the panel keeps it.
      */
     filter?: Partial<TranslationReviewFilter>;
     /** Every filter, on every change — write them in ONE update: `useSearchParamsState`'s
@@ -119,8 +125,31 @@ 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
@@ -156,11 +185,42 @@ interface TranslationReviewPanelProps {
      * rows, and paging one area does not move another — rather than one pager cutting
      * through the headers. `storageKey` keeps persisting the ungrouped table only.
      *
-     * Groups fold (each on its own, remembered while the panel lives). On a phone they
-     * start folded when there are several — the headers are then the area list, and the
-     * reviewer opens the one to work through; on a wide screen they start open.
+     * Groups fold (each on its own, remembered while the panel lives), and a folded group's
+     * rows are not rendered at all — only its header. Which groups start open is
+     * {@link defaultGroupsOpen}: by default, on a phone they start folded when there are
+     * several — the headers are then the area list, and the reviewer opens the one to work
+     * through — and on a wide screen they start open while that is cheap (see there).
      */
     groupBy?: TranslationReviewGroupBy;
+    /**
+     * Which groups start open under {@link groupBy} (0.25.1). A group the reviewer opens or
+     * folds keeps that; this is what every other group follows.
+     *
+     * - `"auto"` (default): on a phone, open when there is one group and folded when there
+     *   are several, as in 0.25.0. On a wide screen, open while opening every group renders
+     *   at most 100 rows (each group shows up to `pageSize` of them; the budget is one page
+     *   where `pageSize` is larger) — and folded above that, the headers then being the area
+     *   list, as on a phone.
+     * - `true`: every group starts open, on a phone too.
+     * - `false`: every group starts folded, on a wide screen too.
+     *
+     * WHY A BUDGET OF ROWS (keksdose, measured on 0.25.0): a wide screen opened EVERY group.
+     * keksdose's /translations has 122 areas and ~4700 strings — 122 tables and 2053 rows at
+     * once, ~46 000 elements, 5.2 s before the panel appeared and 2.5 s for a filter click
+     * to paint, against 50 rows and 0.34 s ungrouped; its page test went from 4 s to 146 s.
+     * kastlan (~31 areas, ~1300 rows open) and Kurvenschmiede (28, ~700) had the same page.
+     * What costs is the rows on screen, so the rule counts them rather than the groups:
+     * 100 rows is two of the panel's default pages — any one or two areas still open as
+     * before, however long, and so do a dozen small ones, or a search whose hits fall in
+     * many areas — while a whole catalogue starts as its list of areas: keksdose's shape
+     * in jsdom, 122 headers and ~2100 elements instead of ~44 000 (the ungrouped panel has
+     * ~1200). The rule follows the filters: narrow them and the groups open.
+     *
+     * A boolean rather than a controlled open state: the panel already keeps each group's
+     * own state, and an app that only wants "all open" or "all folded" should not have to
+     * keep a record of 122 flags to say it.
+     */
+    defaultGroupsOpen?: boolean | "auto";
     /** A group's name. Default: `sourceLabels` for `groupBy="source"`, else the key. */
     groupLabel?: (group: string) => string;
     /** The level of the group headings. Default `h2`: the panel is a page's body, under
@@ -190,6 +250,6 @@ interface TranslationReviewPanelProps {
  * approval it takes back. A swipe on the next card while one is out is queued rather than
  * refused — a reviewer swiping down a list is faster than the server.
  */
-declare function TranslationReviewPanel({ rows: rowsProp, localeLabel, referenceLabel, onSave, onClear, readOnly, areas, areaLabels, inArea, sourceLabels, filter: filterProp, onFilterChange, progress, pageSize, storageKey, formatDate, formatError, swipe, undo: undoProp, groupBy, groupLabel, groupHeadingAs, className, labels: labelsProp, }: TranslationReviewPanelProps): react.JSX.Element;
+declare function TranslationReviewPanel({ rows: rowsProp, localeLabel, referenceLabel, onSave, onClear, readOnly, areas, areaLabels, inArea, sourceLabels, filter: filterProp, onFilterChange, progress, pageSize, storageKey, formatDate, formatError, swipe, undo: undoProp, groupBy, groupLabel, groupHeadingAs, defaultGroupsOpen, className, labels: labelsProp, }: TranslationReviewPanelProps): react.JSX.Element;
 
 export { type TranslationReviewGroupBy, TranslationReviewLabels, type TranslationReviewOrigin, TranslationReviewPanel, type TranslationReviewPanelProps, type TranslationReviewSaveInfo };

package/dist/components/translation-review.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
 import {
   DEFAULT_TRANSLATION_REVIEW_FILTER,
+  DEFAULT_TRANSLATION_REVIEW_SWIPE,
   REVIEW_STATUSES,
   filterTranslationRows,
   groupTranslationRows,
@@ -14,6 +15,7 @@ import {
   reviewUndo,
   reviewWrite,
   summariseRows,
+  translationReviewSwipePlan,
   unreviewedRows
 } from "../lib/translation-review.js";
 import { AlertBanner } from "./alert-banner.js";
@@ -40,6 +42,53 @@ import {
 import { TranslationReviewEditor as TranslationReviewEditor2 } from "./translation-review-editor.js";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS as DEFAULT_TRANSLATION_REVIEW_LABELS2 } from "./translation-review-labels.js";
 const MD_UP = "(min-width: 768px)";
+const GROUPS_OPEN_ROW_BUDGET = 100;
+function groupsFitOpen(groups, pageSize) {
+  const budget = Math.max(GROUPS_OPEN_ROW_BUDGET, pageSize);
+  let rendered = 0;
+  for (const group of groups) {
+    rendered += Math.min(group.rows.length, pageSize);
+    if (rendered > budget) return false;
+  }
+  return true;
+}
+function devWarnings() {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+const FILTER_ECHO_MS = 1500;
+function useFilterEchoCheck(filterProp) {
+  const committed = useRef(filterProp);
+  useEffect(() => {
+    committed.current = filterProp;
+  });
+  const pending = useRef(/* @__PURE__ */ new Map());
+  const warned = useRef(/* @__PURE__ */ new Set());
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  return (next) => {
+    if (filterProp === void 0 || !devWarnings()) return;
+    for (const field of Object.keys(next)) {
+      const from = filterProp[field];
+      if (from === void 0 || warned.current.has(field)) continue;
+      const seen = pending.current.get(field);
+      if (seen) seen.to = next[field];
+      else if (next[field] !== from) pending.current.set(field, { from, to: next[field] });
+    }
+    if (pending.current.size === 0) return;
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      const now = committed.current;
+      for (const [field, { from, to }] of pending.current) {
+        if (to === from || now?.[field] !== from || warned.current.has(field)) continue;
+        warned.current.add(field);
+        console.warn(
+          `[ui-kit] TranslationReviewPanel: the "${field}" filter was changed to ${JSON.stringify(to)}, but the \`filter\` prop still says ${JSON.stringify(from)}, so the control does nothing. A field passed in \`filter\` is the app's: write back every field \`onFilterChange\` reports, in one update (useSearchParamsState's setter takes the object as it is), or leave the field out of \`filter\` and the panel keeps it. (Development builds only; once per field.)`
+        );
+      }
+      pending.current.clear();
+    }, FILTER_ECHO_MS);
+  };
+}
 function TextCell({ row, labels, clamp }) {
   return row.text === "" ? /* @__PURE__ */ jsx("span", { className: "italic text-[var(--text-muted)]", children: labels.missingText }) : /* @__PURE__ */ jsx("span", { lang: row.locale, className: cn("whitespace-pre-line break-words", clamp && "line-clamp-3"), children: row.text });
 }
@@ -66,6 +115,7 @@ function TranslationReviewPanel({
   groupBy,
   groupLabel,
   groupHeadingAs = "h2",
+  defaultGroupsOpen = "auto",
   className,
   labels: labelsProp
 }) {
@@ -76,12 +126,14 @@ function TranslationReviewPanel({
   const baseId = useId();
   const rootRef = useRef(null);
   const editable = !readOnly && onSave !== void 0;
-  const undoOn = undoProp ?? (swipe || groupBy !== void 0);
+  const binding = swipe === true ? DEFAULT_TRANSLATION_REVIEW_SWIPE : swipe || null;
+  const undoOn = undoProp ?? (binding !== null || groupBy !== void 0);
   const [ownFilter, setOwnFilter] = useState(DEFAULT_TRANSLATION_REVIEW_FILTER);
   const filter = { ...ownFilter };
   for (const [name, value] of Object.entries(filterProp ?? {})) {
     if (value !== void 0) Object.assign(filter, { [name]: value });
   }
+  const echoFilter = useFilterEchoCheck(filterProp);
   const [openId, setOpenId] = useState(null);
   const [focusId, setFocusId] = useState(null);
   const [selected, setSelected] = useState(() => /* @__PURE__ */ new Set());
@@ -117,9 +169,12 @@ function TranslationReviewPanel({
   }, [visible, groupBy]);
   const groupName = (key) => groupLabel?.(key) ?? (groupBy === "source" ? sourceLabels?.[key] : void 0) ?? (key || "\u2014");
   const [groupOpen, setGroupOpen] = useState({});
-  const groupOpenByDefault = !(phone && (groups?.length ?? 0) > 1);
+  const groupOpenByDefault = defaultGroupsOpen !== "auto" ? defaultGroupsOpen : groups !== null && (phone ? groups.length <= 1 : groupsFitOpen(groups, pageSize));
   const isGroupOpen = (key) => groupOpen[key] ?? groupOpenByDefault;
   const setGroupOpenFor = (key, open) => setGroupOpen((prev) => ({ ...prev, [key]: open }));
+  const keepGroupOpen = (key) => {
+    if (key !== void 0) setGroupOpen((prev) => key in prev ? prev : { ...prev, [key]: true });
+  };
   const [confirming, setConfirming] = useState(null);
   const confirmFocus = useRef(null);
   const [groupSorts, setGroupSorts] = useState([]);
@@ -127,6 +182,7 @@ function TranslationReviewPanel({
     const next = { ...filter, ...patch };
     setOwnFilter(next);
     onFilterChange?.(next);
+    echoFilter(next);
     setSelected(/* @__PURE__ */ new Set());
   };
   const run = (key, action) => {
@@ -149,9 +205,9 @@ function TranslationReviewPanel({
     tail.current = step;
     return step;
   };
-  const sayApproved = (targets, description) => {
+  const sayDone = (targets, description, 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;
     if (!save || back.clears.length > 0 && !clear) {
@@ -171,13 +227,20 @@ 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;
   };
+  const clearRow = async (row) => {
+    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);
+  };
   const saveFromEditor = async (row, write) => {
     const toasted = undoOn && write.verdict === "APPROVED";
     await onSave?.([write], { origin: "editor", toasted });
-    if (toasted) sayApproved([row], row.key);
+    if (toasted) sayDone([row], row.key);
   };
   const keepFocusAt = (groupKey) => {
     const check = () => {
@@ -276,33 +339,53 @@ function TranslationReviewPanel({
       )
     });
   }
-  const swipeActions = (r) => {
-    if (!editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+  const swipeAction = (r, id, groupKey) => {
     const missing = r.text === "";
-    return {
-      end: missing || r.status === "approved" ? [] : [
-        {
+    switch (id) {
+      case "approve":
+        return {
           label: labels.approve,
           icon: /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": true }),
           onCommit: () => void approve(`row:${r.id}`, [r], "swipe", r.key),
-          className: "bg-[var(--success)]",
-          armedClassName: "bg-[var(--success)]"
-        }
-      ],
-      start: [
-        {
+          // 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: /* @__PURE__ */ jsx(PencilLine, { className: "size-4", "aria-hidden": true }),
           // Opens the editor rather than sending the string back: "needs a change"
           // with neither a note nor a better wording tells nobody anything.
           onCommit: () => {
+            keepGroupOpen(groupKey);
             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: /* @__PURE__ */ jsx(RotateCcw, { className: "size-4", "aria-hidden": true }),
+          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)]"
+        };
+    }
+  };
+  const swipeActions = (r, groupKey) => {
+    if (!binding || !editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+    const plan = translationReviewSwipePlan(binding, r, { canClear: onClear !== void 0 });
+    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))
     };
   };
   const toggleIn = (prev, many, checked) => {
@@ -345,6 +428,7 @@ function TranslationReviewPanel({
       } : { storageKey },
       isExpanded: (r) => r.id === openId,
       onRowClick: (r) => {
+        if (openId !== r.id) keepGroupOpen(group?.key);
         setFocusId(null);
         setOpenId((open) => open === r.id ? null : r.id);
       },
@@ -376,7 +460,7 @@ function TranslationReviewPanel({
           r.placeholderMismatch && /* @__PURE__ */ jsx(Chip, { size: "sm", tone: "danger", variant: "outline", children: labels.placeholderChip })
         ] })
       ] }),
-      mobileSwipeActions: swipe ? swipeActions : void 0,
+      mobileSwipeActions: binding ? (r) => swipeActions(r, group?.key) : void 0,
       selection: selectionFor(list)
     }
   );
@@ -386,6 +470,8 @@ function TranslationReviewPanel({
     const questionId = `${baseId}-confirm-${index}`;
     const targets = editable ? unreviewedRows(g.rows) : [];
     const key = `group:${g.key}`;
+    const open = isGroupOpen(g.key);
+    const body = open || groupOpen[g.key] === false;
     return /* @__PURE__ */ jsxs(
       Disclosure,
       {
@@ -393,10 +479,10 @@ function TranslationReviewPanel({
         headingAs: groupHeadingAs,
         title: /* @__PURE__ */ jsx("span", { id: titleId, children: name }),
         hint: labels.groupCount(g.summary.unreviewed, g.summary.total),
-        open: isGroupOpen(g.key),
-        onOpenChange: (open) => {
-          setGroupOpenFor(g.key, open);
-          if (!open) setConfirming((c) => c === g.key ? null : c);
+        open,
+        onOpenChange: (next) => {
+          setGroupOpenFor(g.key, next);
+          if (!next) setConfirming((c) => c === g.key ? null : c);
         },
         trailing: targets.length > 0 ? /* @__PURE__ */ jsxs(
           Button,
@@ -416,7 +502,7 @@ function TranslationReviewPanel({
         ) : void 0,
         bodyClassName: "space-y-0 px-0 pb-0 border-t border-[var(--border)]",
         children: [
-          confirming === g.key && targets.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] p-3", children: /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", size: "sm", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+          body && confirming === g.key && targets.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] p-3", children: /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", size: "sm", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
             /* @__PURE__ */ jsx("p", { id: questionId, children: labels.confirmGroup(targets.length, name) }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
               /* @__PURE__ */ jsx(
@@ -453,7 +539,7 @@ function TranslationReviewPanel({
               )
             ] })
           ] }) }) }),
-          table(g.rows, { name })
+          body && table(g.rows, { key: g.key, name })
         ]
       },
       g.key