@eifi1/ui-kit 0.32.2 → 0.33.1

package/src/components/swipeable-row.tsx

@@ -1,32 +1,134 @@
 import { useEffect, useRef, useState } from "react";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
+import type { StatusDotTone } from "./status-dot";
 import { useRowSwipe, type SwipeStage } from "../hooks/use-row-swipe";
 import { DEFAULT_SWIPEABLE_ROW_LABELS, useKitLabels } from "../i18n/kit-labels";
 
 /**
- * One armed swipe action: what it does, and how the reveal panel presents it.
- *
- * The two background classes are the idle and armed states. Before the first
- * threshold is crossed the panel previews the nearest action in its IDLE colour, so
- * the user can see what a little more drag will do; crossing the threshold flips it to
- * `armedClassName`. Passing the same value for both simply removes that feedback.
+ * What a swipe action's panel means — the vocabulary Chip, ProgressBar and StatusDot
+ * already share, so a curtain can be "the colour of the status it produces" by name:
+ * brand, neutral, success, warning, danger, info, income, expense, and the categorical
+ * hues blue, indigo, purple, teal and orange.
+ */
+export type SwipeTone = StatusDotTone;
+
+/**
+ * An app's own fill for a documented exception (0.33, docs/colour-roles-harmonization.md
+ * §12.6) — a curtain that must be exactly its status pill's palette fill, or two
+ * strengths of one tone. CSS colours or `var()`s, the same in both themes unless the app
+ * passes a variable it declares per theme in its own stylesheet. The kit cannot measure
+ * these, so the app's tests pin the pair.
  */
-export interface SwipeAction {
+export interface SwipePaint {
+  /** The armed panel's fill; idle shows a 14 % wash of it on the card. */
+  fill: string;
+  /** The text and icon colour ON `fill`, armed. Idle text is the body ink. */
+  foreground: string;
+}
+
+interface SwipeActionBase {
   onCommit: () => void;
   label: string;
   /** Rendered inside the panel. Icons stay the consumer's choice — this package
    *  ships no opinion about which icon set an app uses. */
   icon?: ReactNode;
-  /** 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;
+}
+
+/**
+ * One armed swipe action: what it does, and how the reveal panel presents it.
+ *
+ * The panel has two states. Before the first threshold is crossed it previews the
+ * nearest action IDLE, so the user can see what a little more drag will do; crossing
+ * the threshold ARMS it — "let go and this fires".
+ *
+ * **`tone`** (0.33) is how the kit paints it: idle, the tone's soft wash under the
+ * tone's own text colour (`bg-danger-soft text-danger`, Chip's soft look, ≥ 4.5:1);
+ * armed, the tone's solid fill under its `-contrast` foreground (≥ 5:1). The soft→solid
+ * step is the signal. It replaces a panel dimmed to 60 % at idle, whose label sat at
+ * 2.4–4.5:1 on the kit's own swipes, and a white label that was unreadable on every
+ * dark-mode pastel.
+ *
+ * **`paint`** follows the same rule for an app's documented exception (see
+ * {@link SwipePaint}). **`className` / `armedClassName`** is the old path, kept so
+ * existing call sites compile; there the label is white unless the classes set a
+ * colour, and the idle panel is still dimmed.
+ */
+export type SwipeAction = SwipeActionBase &
+  (
+    | {
+        /** The kit paints the panel: the tone's wash idle, its fill and `-contrast` armed. */
+        tone: SwipeTone;
+        paint?: never;
+        className?: never;
+        armedClassName?: never;
+      }
+    | {
+        /** A documented app exception: idle a 14 % wash of `fill` under the body ink,
+         *  armed `fill` under `foreground`. */
+        paint: SwipePaint;
+        tone?: never;
+        className?: never;
+        armedClassName?: never;
+      }
+    | {
+        tone?: never;
+        paint?: never;
+        /** @deprecated 0.33 — pass `tone`, or `paint` for an exception. Background
+         *  utility class while the action is previewed but not yet armed; the panel is
+         *  dimmed then, and its text is white unless this sets a text colour. */
+        className: string;
+        /** @deprecated 0.33 — pass `tone`, or `paint`. Background utility class once
+         *  the drag has passed this action's threshold. */
+        armedClassName: string;
+      }
+  );
+
+/**
+ * Each tone's panel, idle and armed. Literal class strings, because Tailwind finds a
+ * class by reading the source. Idle is Chip's soft recipe for the tone (the money pair
+ * takes Chip's soft money look, the well under the money colour; neutral the active
+ * fill under the secondary ink); armed is the plain fill, not `-hover`, under the
+ * fill's own foreground. Measured in every shipped preset by
+ * theme/__tests__/tokens-css-audit.test.ts.
+ */
+export const SWIPE_TONE: Record<SwipeTone, { idle: string; armed: string }> = {
+  brand: { idle: "bg-brand-soft text-brand-muted", armed: "bg-brand text-brand-contrast" },
+  neutral: { idle: "bg-active text-secondary", armed: "bg-neutral text-neutral-contrast" },
+  success: { idle: "bg-success-soft text-success", armed: "bg-success text-success-contrast" },
+  warning: { idle: "bg-warning-soft text-warning", armed: "bg-warning text-warning-contrast" },
+  danger: { idle: "bg-danger-soft text-danger", armed: "bg-danger text-danger-contrast" },
+  info: { idle: "bg-info-soft text-info", armed: "bg-info text-info-contrast" },
+  income: { idle: "bg-surface-2 text-money-pos", armed: "bg-money-pos text-money-income-contrast" },
+  expense: { idle: "bg-surface-2 text-money-neg", armed: "bg-money-neg text-money-expense-contrast" },
+  blue: { idle: "bg-hue-blue-soft text-hue-blue", armed: "bg-hue-blue text-hue-blue-contrast" },
+  indigo: { idle: "bg-hue-indigo-soft text-hue-indigo", armed: "bg-hue-indigo text-hue-indigo-contrast" },
+  purple: { idle: "bg-hue-purple-soft text-hue-purple", armed: "bg-hue-purple text-hue-purple-contrast" },
+  teal: { idle: "bg-hue-teal-soft text-hue-teal", armed: "bg-hue-teal text-hue-teal-contrast" },
+  orange: { idle: "bg-hue-orange-soft text-hue-orange", armed: "bg-hue-orange text-hue-orange-contrast" },
+};
+
+/** `paint`'s two looks, from the two custom properties the panel carries inline. The
+ *  idle wash is `--brand-bg`'s recipe (14 % of the fill into the card). */
+const PAINT_IDLE = "bg-[color-mix(in_oklab,var(--swipe-paint-fill)_14%,var(--bg-surface))] text-primary";
+const PAINT_ARMED = "bg-[var(--swipe-paint-fill)] text-[var(--swipe-paint-fg)]";
+
+/** The panel's colour classes, inline style and dimming for one action and state. */
+function panelLook(action: SwipeAction, armed: boolean): { className: string; style?: CSSProperties; dim: boolean } {
+  if (action.tone) return { className: SWIPE_TONE[action.tone][armed ? "armed" : "idle"], dim: false };
+  if (action.paint) {
+    return {
+      className: armed ? PAINT_ARMED : PAINT_IDLE,
+      style: {
+        "--swipe-paint-fill": action.paint.fill,
+        "--swipe-paint-fg": action.paint.foreground,
+      } as CSSProperties,
+      dim: false,
+    };
+  }
+  // The deprecated path, as it was: white text under the caller's fill, dimmed idle.
+  return { className: cn("text-white", armed ? action.armedClassName : action.className), dim: !armed };
 }
 
 /**
@@ -76,8 +178,9 @@ const PEEK_PX = 40;
  * action reachable and roughly doubles the room between them.
  *
  * **Whether the action will fire is stated three ways, not one** (feedback #174): the
- * panel goes from dimmed to solid, the icon grows and gains a filled disc, and the
- * label turns bold — plus the existing haptic tick per newly armed stage. A colour
+ * panel goes from the tone's soft wash to its solid fill, the icon grows and gains a
+ * filled disc, and the label turns bold — plus the existing haptic tick per newly armed
+ * stage. A colour
  * shift alone is easy to miss mid-gesture, and it is invisible to anyone who cannot
  * distinguish the two tones.
  *
@@ -180,33 +283,41 @@ export function SwipeableRow({
     ? leftActions[Math.max(0, swipe.armedLeftIndex)]
     : rightActions[Math.max(0, swipe.armedRightIndex)];
   const armed = draggingLeft ? swipe.armedLeftIndex >= 0 : swipe.armedRightIndex >= 0;
+  const look = shown ? panelLook(shown, armed) : null;
 
   return (
     <div ref={rowRef} className={cn("relative overflow-hidden", className)}>
-      {active && shown && (
+      {/* The card under the panel. A dark theme's washes are translucent, and a tone's
+          idle pair is measured as that wash ON the card — so the card is there, whatever
+          the row happens to sit in. */}
+      {active && shown && <div aria-hidden className="pointer-events-none absolute inset-0 bg-surface" />}
+      {active && shown && look && (
         <div
           className={cn(
             "pointer-events-none absolute inset-0 flex items-center gap-2 px-4",
-            "text-xs font-medium text-white transition-all",
-            // Dimmed until the drag has actually passed a threshold: "nothing will
-            // happen yet" has to look different from "let go and this fires", and on
-            // a moving row a one-step colour change was too quiet to notice.
-            armed ? "opacity-100" : "opacity-60",
-            armed ? shown.armedClassName : shown.className,
+            "text-xs font-medium transition-all",
+            look.className,
+            // The old path only: dimmed until the drag has passed a threshold. A tone
+            // or a paint says it with the soft→solid step instead, which keeps its
+            // label readable at both ends.
+            look.dim && "opacity-60",
             // The panel is anchored to the edge the row is uncovering, so the label
             // sits where the eye already is rather than across the screen. That edge is
             // physical, while a flex row starts at the INLINE start — so in RTL the two
             // directions swap, or the label sat under the row on the covered side.
             draggingLeft ? "flex-row-reverse rtl:flex-row" : "rtl:flex-row-reverse",
           )}
+          style={look.style}
         >
           {shown.icon && (
             <span
               className={cn(
                 "flex shrink-0 items-center justify-center rounded-full transition-all",
                 // Armed, the icon gets a disc of its own and grows — a second,
-                // non-colour signal, and the one that stays readable at a glance.
-                armed ? "size-8 scale-110 bg-white/25" : "size-7 bg-white/10",
+                // non-colour signal, and the one that stays readable at a glance. In
+                // the label's own colour (0.33): a white disc vanished on a dark
+                // theme's pastel fill, and the label's colour works on every pair.
+                armed ? "size-8 scale-110 bg-current/20" : "size-7 bg-current/10",
               )}
             >
               {shown.icon}

package/src/components/switch.tsx

@@ -10,6 +10,7 @@ import {
   type DisabledReasonDisplay,
 } from "./field-parts";
 import { FOCUS_RING } from "./focus-ring";
+import type { CommitScope } from "./write-lock";
 
 /**
  * An on/off switch that is still `<input type="checkbox">`, with `role="switch"`.
@@ -117,7 +118,7 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
    * is locked the `disabledReason` way with the lock's reason (which wins over its
    * own). No provider, or an unlocked one: no effect. Button's `commit`, for K3.
    */
-  commit?: boolean;
+  commit?: CommitScope;
 }
 
 /**

package/src/components/table.tsx

@@ -162,7 +162,8 @@ export interface TableProps extends ComponentPropsWithRef<"table"> {
   /** Tint every other body row. */
   zebra?: boolean;
   /** Tint the body row under the pointer. Off by default: a static table whose rows
-   *  light up promises a click that does nothing. */
+   *  light up promises a click that does nothing. With `zebra`, a tinted row hovers to
+   *  the card colour (0.33): the hover tint is too close to the well. */
   hover?: boolean;
   /** Classes for the overflow wrapper around the `<table>` (a max-height, a border). */
   wrapperClassName?: string;
@@ -518,6 +519,12 @@ export function TableRow({ valign, variant = "row", bordered, className, ref: re
         body && (bordered ?? rowDividers) && "border-b border-[var(--border)]",
         record && zebra && "even:bg-[var(--bg-surface-2)]",
         record && hover && "transition-colors hover:bg-[var(--bg-hover)]",
+        // A zebra row rests on the well, and `--bg-hover` sits only 1.00–1.02:1 from it
+        // (0.33: the light well is the page colour): it hovers to the card instead, the
+        // one fill that both steps 1.09–1.13:1 from the well and keeps every text role at
+        // 4.5:1 (docs/colour-roles-harmonization.md §12.2). `even:hover:` outranks the
+        // row's own `hover:`.
+        record && zebra && hover && "even:hover:bg-surface",
         ROW_VARIANT[variant],
         // On the row as well, for a raw `<td>` of the caller's, which inherits it.
         valign && VALIGN[valign],

package/src/components/toggle-group.tsx

@@ -4,7 +4,7 @@ import { cn } from "../lib/cn";
 import { horizontalStep } from "../lib/direction";
 import { FIELD_INVALID, FloatingField, Label } from "./ui";
 import { Tooltip } from "./tooltip";
-import { useCommitReason } from "./write-lock";
+import { useCommitReason, type CommitScope } from "./write-lock";
 import {
   DISABLED_REASON_LINE_CLASS,
   FIELD_CAPTION_CLASS,
@@ -172,7 +172,7 @@ export interface ToggleGroupBaseProps<T extends string>
    * must render refused, never live-and-discarding. No provider, or an unlocked one:
    * no effect.
    */
-  commit?: boolean;
+  commit?: CommitScope;
 }
 
 /**
@@ -200,7 +200,9 @@ export interface ToggleGroupBaseProps<T extends string>
  *
  *     md: 1 + 20 + 18 + 2 + 1 = 42        sm: 1 + 20 + 16 + 4 + 1 = 42
  */
-const CHROME_PAD: Record<"sm" | "md", string> = { md: "pt-5 pb-0.5", sm: "pt-5 pb-1" };
+// At Large the chrome's label stands above it (0.33, §10.17): no strip, the same moat top
+// and bottom.
+const CHROME_PAD: Record<"sm" | "md", string> = { md: "pt-5 pb-0.5 large:pt-0.5", sm: "pt-5 pb-1 large:pt-1" };
 const CHROME_SEGMENT: Record<"sm" | "md", string> = { md: "py-0 leading-[1.125rem]", sm: "py-0 leading-4" };
 
 /**

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

@@ -16,6 +16,7 @@ import { Caption, SectionLabel } from "./text";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "./translation-review-labels";
 import type { TranslationReviewLabels } from "./translation-review-labels";
 import { Button, Textarea } from "./ui";
+import { COMMIT_EXCEPT_BILLING } from "./write-lock";
 
 /** A callback may return a promise: resolve and the editor closes, reject and it stays
  *  open with the error. */
@@ -84,6 +85,10 @@ function Then({ label, text }: { label: string; text: string }) {
  * Every action waits for its callback: the buttons hold while the promise is out, a
  * resolution closes the editor through `onClose`, and a rejection keeps it open with what
  * was typed and the error under the buttons.
+ *
+ * Each verdict is a `commit` exempt from billing (`COMMIT_EXCEPT_BILLING`, 0.33): a review
+ * is an admin route, which a lapsed plan never locks (docs/billing-harmonization.md
+ * §12.13, §12.36); a demo's lock still holds it.
  */
 export function TranslationReviewEditor({
   row,
@@ -234,7 +239,7 @@ export function TranslationReviewEditor({
             {!missing && (
               <Button
                 variant="primary"
-                commit
+                commit={COMMIT_EXCEPT_BILLING}
                 pending={busy === "approve"}
                 disabled={busy !== null}
                 onClick={() => save("APPROVED")}
@@ -244,7 +249,7 @@ export function TranslationReviewEditor({
             )}
             <Button
               variant={missing ? "primary" : "danger"}
-              commit
+              commit={COMMIT_EXCEPT_BILLING}
               pending={busy === "flag"}
               disabled={busy !== null || !canFlag}
               onClick={() => save("NEEDS_CHANGE")}
@@ -254,7 +259,7 @@ export function TranslationReviewEditor({
             {review && onClear && (
               <Button
                 variant="ghost"
-                commit
+                commit={COMMIT_EXCEPT_BILLING}
                 pending={busy === "clear"}
                 disabled={busy !== null}
                 onClick={() => void run("clear", () => onClear({ locale: row.locale, key: row.key }))}

package/src/components/translation-review.tsx

@@ -44,7 +44,7 @@ import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translat
 import type { TranslationReviewLabels } from "./translation-review-labels";
 import { ReviewStatusChip, TranslationProgress } from "./translation-review-parts";
 import { Button, IconButton, Select } from "./ui";
-import { useWriteLock } from "./write-lock";
+import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock";
 
 export {
   REVIEW_STATUS_TONES,
@@ -457,7 +457,10 @@ export function TranslationReviewPanel({
 }: TranslationReviewPanelProps) {
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   const locale = useKitLocale();
-  const lock = useWriteLock();
+  // A verdict is an admin route, which a lapsed plan never locks
+  // (docs/billing-harmonization.md §12.13, §12.36): the buttons take
+  // COMMIT_EXCEPT_BILLING, and the swipes read the lock as they see it.
+  const lock = useWriteLock(COMMIT_EXCEPT_BILLING);
   // The phone layout DataTable switches its layout on, so "a phone" means the same here
   // as in the table, at every text size: `usePhoneLayout()` itself (§10.4; 0.32.1,
   // keksdose's 0.32 report — `!useBreakpoint("md")` could disagree with it at 767.5 px).
@@ -742,7 +745,7 @@ export function TranslationReviewPanel({
             type="button"
             size="xs"
             tone="muted"
-            commit
+            commit={COMMIT_EXCEPT_BILLING}
             label={labels.approve}
             // The icon alone at every text size (docs/text-size-harmonization.md §10.8):
             // the row's one action, in a hugging column of a dense table beside the
@@ -773,10 +776,9 @@ export function TranslationReviewPanel({
           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)]",
+          // SwipeableRow paints the tone: its soft wash idle, its fill and that fill's
+          // foreground armed (0.33).
+          tone: "success",
         };
       case "edit":
         return {
@@ -789,23 +791,17 @@ export function TranslationReviewPanel({
             setOpenId(r.id);
             setFocusId(r.id);
           },
-          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)]",
+          tone: missing ? "brand" : "danger",
         };
       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 step back, not a verdict: neither the approval's green nor the send-back's
+          // red. `neutral` is the pair this swipe improvised and 0.33 made a token: the
+          // muted ink as a fill under the surface colour.
+          tone: "neutral",
         };
     }
   };
@@ -943,7 +939,7 @@ export function TranslationReviewPanel({
             <Button
               variant="secondary"
               size="sm"
-              commit
+              commit={COMMIT_EXCEPT_BILLING}
               // The visible words say what; the group's name, read after them, says where.
               aria-describedby={titleId}
               pending={isQueued(key) && confirming !== g.key}
@@ -974,7 +970,7 @@ export function TranslationReviewPanel({
                     }}
                     variant="primary"
                     size="sm"
-                    commit
+                    commit={COMMIT_EXCEPT_BILLING}
                     aria-describedby={questionId}
                     pending={isQueued(key)}
                     disabled={busy}
@@ -1090,7 +1086,7 @@ export function TranslationReviewPanel({
           <Button
             variant="primary"
             size="sm"
-            commit
+            commit={COMMIT_EXCEPT_BILLING}
             pending={isQueued("bulk-approve")}
             disabled={busy || toApprove.length === 0}
             onClick={() => void approveSelected()}
@@ -1102,7 +1098,7 @@ export function TranslationReviewPanel({
             <Button
               variant="ghost"
               size="sm"
-              commit
+              commit={COMMIT_EXCEPT_BILLING}
               pending={isQueued("bulk-reset")}
               disabled={busy || toReset.length === 0}
               onClick={() => void resetSelected()}