@eifi1/ui-kit 0.48.2 → 0.49.0

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

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
 import type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react";
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from "lucide-react";
 import { FOCUS_RING } from "./focus-ring";
@@ -13,6 +13,9 @@ import { FilterPopover } from "./data-table-filter-popover";
 import { SwipeableRow, type SwipeAction } from "./swipeable-row";
 import { DialogFrame } from "./dialog-frame";
 import { Checkbox } from "./checkbox";
+import { Chip } from "./chip";
+import { BooleanMark } from "./data-table-cells";
+import { EMPTY_FORMATTED_VALUE } from "../lib/format";
 import { useLongPress } from "../hooks/use-long-press";
 import type { DataTableLabels } from "./data-table-labels";
 import { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from "./data-table-shared";
@@ -70,19 +73,21 @@ const CARD_NO_TRUNCATE =
  * header's `sr-only` text (an actions column's), as every kit container must.
  */
 export function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {
+  const fields = filledFields(columns, row);
+  if (fields.length === 0) return null;
   return (
     <dl
       data-card-fields="stacked"
       className={cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE)}
     >
-      {columns.map((col) => (
+      {fields.map(({ col, value }) => (
         <div key={col.key} className="min-w-0">
           <dt className="text-xs uppercase tracking-wide text-muted">{col.header}</dt>
           <dd
             {...dataAttrsOf(col.cellProps?.(row))}
             className="mt-0.5 min-w-0 break-words text-secondary"
           >
-            {col.cell(row)}
+            {value}
           </dd>
         </div>
       ))}
@@ -90,6 +95,112 @@ export function StackedFields<T>({ columns, row, compact }: { columns: DataTable
   );
 }
 
+/** The most fields the default phone card shows under its title (0.49 KIT-7). */
+export const MOBILE_CARD_FIELDS = 3;
+
+/**
+ * The default phone card's columns (0.49 KIT-7), out of the phone's columns (visible,
+ * not `mobileHidden`): the title — `mobile: "primary"` or `mobilePrimary`, else the
+ * first that is not a status — the `role: "status"` columns for beside it, at most
+ * {@link MOBILE_CARD_FIELDS} fields: those marked `mobile: "secondary"` when any is,
+ * else the first after the title, and the `role: "actions"` columns, drawn after the
+ * fields. An actions column is never the title and never one of the fields, so the
+ * fields and the marks leave it on the card; only `mobileHidden` / `mobile: "hidden"`
+ * (which keep it out of `columns`) remove it.
+ */
+export function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {
+  primary: DataTableColumn<T> | null;
+  status: DataTableColumn<T>[];
+  fields: DataTableColumn<T>[];
+  actions: DataTableColumn<T>[];
+} {
+  const titles = columns.filter((c) => c.role !== "actions");
+  const primary =
+    titles.find((c) => c.mobile === "primary") ??
+    titles.find((c) => c.mobilePrimary) ??
+    titles.find((c) => c.role !== "status") ??
+    titles[0] ??
+    null;
+  const status = columns.filter((c) => c !== primary && c.role === "status");
+  const actions = columns.filter((c) => c.role === "actions");
+  const rest = titles.filter((c) => c !== primary && c.role !== "status");
+  const marked = rest.filter((c) => c.mobile === "secondary");
+  return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };
+}
+
+/** A column whose cell keeps its own clicks — `noRowLink`, or `role: "actions"`: no row
+ *  link may wrap it, and a card that draws it is not a link itself. */
+export function keepsOwnClicks<T>(col: DataTableColumn<T>): boolean {
+  return !!col.noRowLink || col.role === "actions";
+}
+
+/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a
+ *  production one, never under vitest. Read per call so a test can switch it on. */
+function devWarnings(): boolean {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+
+/**
+ * A development build's note on the default phone card (0.49 KIT-7): a `noRowLink`
+ * column past its three fields. Such a column holds the cell's own controls — a per-row
+ * delete, a link — and the card leaves it out with them, so on a phone the action is
+ * gone. Never for a `role: "actions"` column, which the card draws after its fields.
+ * Read off the declared `columns` (not the ones a person or the width hid), and only
+ * while the table lets the card choose: `enabled` is false with a `mobileCard` or
+ * `mobileDetailsInRow` (the column is then in the opened row), and a column marked
+ * `mobile: "secondary"` means the app chose. Once per table and column key; `name`
+ * (the table's `storageKey` or `urlSync` prefix) says which table, else its title
+ * column does.
+ */
+export function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void {
+  const warned = useRef<Set<string> | null>(null);
+  useEffect(() => {
+    if (!enabled || !devWarnings()) return;
+    const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== "hidden");
+    if (phone.some((c) => c.mobile === "secondary")) return;
+    const { primary, status, fields, actions } = mobileCardColumns(phone);
+    const onCard = new Set<DataTableColumn<T> | null>([primary, ...status, ...fields, ...actions]);
+    const table = name ? ` "${name}"` : primary ? ` (title column "${primary.key}")` : "";
+    warned.current ??= new Set();
+    for (const col of phone) {
+      if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;
+      warned.current.add(col.key);
+      console.warn(
+        `[ui-kit] DataTable${table}: column "${col.key}" (noRowLink) is past the phone card's three fields and ` +
+          'leaves the card — give it role: "actions" (drawn after the fields), or move its action to rowActions.',
+      );
+    }
+  }, [columns, enabled, name]);
+}
+
+/**
+ * Whether a rendered cell shows nothing worth a line (0.49 KIT-7): `null`, `undefined`,
+ * a boolean (React draws neither), `""` or blank text, and the formatters' empty value
+ * "—" ({@link EMPTY_FORMATTED_VALUE}), and `booleanColumn`'s mark for an unset value.
+ * Any other element is never empty here — its output is the component's — so a column
+ * whose empty value should drop off the card returns `null` (or "—") from `cell` for it.
+ */
+export function isEmptyCell(value: ReactNode): boolean {
+  if (value === null || value === undefined || typeof value === "boolean") return true;
+  if (isValidElement<{ value?: unknown }>(value) && value.type === BooleanMark) return value.props.value == null;
+  if (typeof value === "string") {
+    const text = value.trim();
+    return text === "" || text === EMPTY_FORMATTED_VALUE;
+  }
+  return false;
+}
+
+/** Each column's rendered cell, without the empty ones. */
+function filledFields<T>(columns: DataTableColumn<T>[], row: T): { col: DataTableColumn<T>; value: ReactNode }[] {
+  return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));
+}
+
+/** A status column's value beside the card's title: text in a neutral chip, an element
+ *  (the app's own Chip or StatusDot) as it is. */
+function StatusChip({ value }: { value: ReactNode }) {
+  return typeof value === "string" || typeof value === "number" ? <Chip size="sm">{value}</Chip> : <>{value}</>;
+}
+
 // ---------- Phone sort control (keksdose K10) ----------
 
 /**
@@ -199,7 +310,11 @@ export interface MobileRowProps<T> {
   mobileCardLinkable: boolean;
   mobileCard: DataTableProps<T>["mobileCard"];
   mobilePrimaryCol: DataTableColumn<T> | null;
+  /** The `role: "status"` columns, drawn as chips beside the title (0.49 KIT-7). */
+  mobileStatusColumns: DataTableColumn<T>[];
   mobileSecondaryColumns: DataTableColumn<T>[];
+  /** The `role: "actions"` columns, drawn after the fields at the card's end (0.49 KIT-7). */
+  mobileActionColumns: DataTableColumn<T>[];
   mobileExpandAsDialog: boolean;
   compact: boolean;
   /** The text size is Large or Extra large (§4). */
@@ -236,7 +351,9 @@ export function MobileRow<T>({
   mobileCardLinkable,
   mobileCard,
   mobilePrimaryCol,
+  mobileStatusColumns,
   mobileSecondaryColumns,
+  mobileActionColumns,
   mobileExpandAsDialog,
   compact,
   large,
@@ -305,6 +422,11 @@ export function MobileRow<T>({
   // itself is the anchor, and routing it through `linkColumn` too would nest an
   // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so
   // exactly one anchor exists per row.
+  // The default card's filled fields and status values (0.49 KIT-7): an empty one
+  // gets no line. Not computed for a `mobileCard`, which draws its own.
+  const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);
+  const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);
+  const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);
   const cardInner = (
     <>
       {/* The card's own content keeps the column it always had; the chevron sits
@@ -323,24 +445,42 @@ export function MobileRow<T>({
           mobileCard(row)
         ) : (
           <>
-            {/* Only the `data-*` half of `cellProps` — see its note. */}
-            {mobilePrimaryCol && (
-              <div {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))} className="min-w-0 break-words font-medium">
-                {mobilePrimaryCol.cell(row)}
+            {/* Only the `data-*` half of `cellProps` — see its note. The title row
+                carries the status chips at its end (0.49 KIT-7). */}
+            {(mobilePrimaryCol || statuses.length > 0) && (
+              <div data-card-head="" className="flex min-w-0 items-start justify-between gap-2">
+                {mobilePrimaryCol && (
+                  <div
+                    {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))}
+                    data-card-title=""
+                    className="min-w-0 flex-1 break-words font-medium"
+                  >
+                    {mobilePrimaryCol.cell(row)}
+                  </div>
+                )}
+                {statuses.length > 0 && (
+                  <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+                    {statuses.map(({ col, value }) => (
+                      <span key={col.key} {...dataAttrsOf(col.cellProps?.(row))} data-card-status="" className="inline-flex">
+                        <StatusChip value={value} />
+                      </span>
+                    ))}
+                  </div>
+                )}
               </div>
             )}
-            {mobileSecondaryColumns.length > 0 && large ? (
+            {fields.length > 0 && large ? (
               // §4: each label ABOVE its value at Large. Side by side, a label column
               // sized to the widest label leaves a value a sliver of a 240 px card.
               <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />
-            ) : mobileSecondaryColumns.length > 0 && (
+            ) : fields.length > 0 && (
               <dl
                 className={cn(
                   "grid grid-cols-[auto_1fr] gap-x-3",
                   compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm",
                 )}
               >
-                {mobileSecondaryColumns.map((col) => (
+                {fields.map(({ col, value }) => (
                   <Fragment key={col.key}>
                     <dt className="text-xs uppercase tracking-wide text-muted self-center">
                       {col.header}
@@ -349,12 +489,23 @@ export function MobileRow<T>({
                       {...dataAttrsOf(col.cellProps?.(row))}
                       className="min-w-0 text-secondary self-center"
                     >
-                      {col.cell(row)}
+                      {value}
                     </dd>
                   </Fragment>
                 ))}
               </dl>
             )}
+            {/* The row's actions after the fields, at the card's end (0.49 KIT-7): its
+                buttons keep their own clicks, and RowActions folds into "⋯" at Large. */}
+            {actionCells.length > 0 && (
+              <div data-card-actions="" className="flex min-w-0 flex-wrap items-center justify-end gap-2">
+                {actionCells.map(({ col, value }) => (
+                  <div key={col.key} {...dataAttrsOf(col.cellProps?.(row))} className="flex min-w-0 justify-end">
+                    {value}
+                  </div>
+                ))}
+              </div>
+            )}
           </>
         )}
       </div>

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

@@ -64,7 +64,8 @@ function swipeTone(action: SwipeAction): RowActionTone {
  * `end` then `start` — the physical `right` / `left` only where the logical side is
  * missing, as the card reads them — each action once, told apart by its `id`, else by its
  * label (two stages with one label would be one button twice). Each button runs the
- * swipe's own `onCommit`; a swipe's `danger` / `warning` / `info` tone carries over, any
+ * swipe's own `onCommit` — with no confirmation of the kit's (`confirm: false`), as the
+ * swipe has none; a swipe's `danger` / `warning` / `info` tone carries over, any
  * other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a
  * `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.
  *
@@ -94,6 +95,10 @@ export function swipePlanRowActions<T>(
           : undefined,
       tone: swipeTone(action),
       commit,
+      // A swipe commits without the kit asking (the plan's `onCommit` asks, as keksdose's
+      // does), so its button does not ask twice (0.49 KIT-12); a danger one still sits in
+      // the row's menu.
+      confirm: false,
       onSelect: action.onCommit,
     });
   }
@@ -142,6 +147,9 @@ function toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {
     icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,
     tone: a.tone,
     disabledReason: a.action.disabledReason?.(row),
+    // The table's own `confirm` asks in `runRowAction`; RowActions' default question
+    // (0.49 KIT-12) is for a delete that brought none.
+    confirm: a.action.confirm ? false : undefined,
     onSelect: () => void runRowAction(a.action, row),
   };
 }

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

@@ -406,7 +406,9 @@ export interface DataTableMobileRowProps<T>
     | "mobileCardLinkable"
     | "mobileCard"
     | "mobilePrimaryCol"
+    | "mobileStatusColumns"
     | "mobileSecondaryColumns"
+    | "mobileActionColumns"
     | "mobileExpandAsDialog"
     | "compact"
     | "large"

package/src/components/data-table.tsx

@@ -6,7 +6,15 @@ import { isTableOwnColumn, useRowActionColumn } from "./data-table-row-actions";
 import { useColumnResize } from "./data-table-resize";
 import { useRangeSelection } from "./data-table-selection";
 import { columnLabel, logicalAlign, resolveDataTableLabels } from "./data-table-shared";
-import { MobileFilters, MobileSelectBar, MobileSort, StackedFields } from "./data-table-mobile";
+import {
+  MobileFilters,
+  MobileSelectBar,
+  MobileSort,
+  StackedFields,
+  keepsOwnClicks,
+  mobileCardColumns,
+  useCardColumnWarnings,
+} from "./data-table-mobile";
 import { DataTableMobileRow, DataTableRow, type DataTableRowCtx } from "./data-table-row";
 import { DataTableHead } from "./data-table-head";
 import { DataTableLeadingRow } from "./data-table-leading-row";
@@ -61,6 +69,36 @@ export interface DataTableColumn<T> {
   // bookkeeping) that would crowd a card without aiding scanning.
   mobilePrimary?: boolean;
   mobileHidden?: boolean;
+  /**
+   * This column on the phone's default card (0.49 KIT-7; ignored with `mobileCard`):
+   * `"primary"` — the card's title, as `mobilePrimary`; `"secondary"` — one of its
+   * fields; `"hidden"` — not on the card, as `mobileHidden`. The card shows at most
+   * three fields: the columns marked `"secondary"` when any
+   * is, else the first three visible columns after the title. A field whose value is
+   * empty — the cell returns `null`, `undefined`, `""` or the formatters' empty "—" —
+   * is left out of that card. The columns the card does not show go into the opened
+   * row with `mobileDetailsInRow`. A `noRowLink` column (the cell's own buttons or link)
+   * counts as a field: past the third it leaves the card with its action, and a
+   * development build says so once per table and column key. Give a column of row
+   * actions `role: "actions"` instead: it is then no field, and the card draws it after
+   * them.
+   */
+  mobile?: "primary" | "secondary" | "hidden";
+  /**
+   * What the column is (0.49 KIT-7), for the phone's default card; the desktop table is
+   * unchanged.
+   *
+   * - `"status"`: its value sits as a chip beside the title instead of as a label/value
+   *   line, and takes none of the card's three fields. A cell that returns text is drawn
+   *   in a neutral `Chip`; one that returns an element (a `Chip` with its own tone, a
+   *   `StatusDot`) is drawn as it is.
+   * - `"actions"`: the row's buttons (`rowActionsColumn` sets it). Never the card's title
+   *   and never one of its three fields: the card draws it after them, at its end,
+   *   whether or not other columns are marked `mobile: "secondary"`; only `mobileHidden`
+   *   / `mobile: "hidden"` take it off. Its cell keeps its own clicks, as `noRowLink`:
+   *   no row link wraps it, and a card that draws it is not a link.
+   */
+  role?: "status" | "actions";
   /**
    * Set on a column whose cell renders its own `<a>` (or anything else that must
    * keep its own click): the row anchor of `rowHref` then skips it and lands on
@@ -275,7 +313,10 @@ export interface DataTableProps<T> {
    * When true, mirror filter/sort/page state into URL search params so views are
    * shareable and bookmarkable. URL params used: `f.<column>`, `sort`, `p`, `ps`.
    * URL state takes precedence over localStorage on initial load. Requires the
-   * consuming app to render inside a react-router Router.
+   * consuming app to render inside a react-router Router (0.49: only with `urlSync` — a
+   * table without it needs none). With `urlSync` and no Router, a development build
+   * throws "DataTable urlSync requires a Router"; a production build keeps the view in
+   * local state instead.
    *
    * `{ prefix }` namespaces them, for two URL-synced tables on one page:
    * `urlSync={{ prefix: "inv." }}` uses `inv.f.<column>`, `inv.sort`, `inv.p`, `inv.ps`.
@@ -1309,14 +1350,14 @@ export function DataTable<T>({
   // column panel. Resolved from `visibleColumns` for exactly that reason — off a
   // raw `columns` lookup a hidden headline would leave the row with no link at all.
   //
-  // `noRowLink` columns are skipped in BOTH steps: wrapping a cell that owns an
-  // anchor nests two links and disables the inner one (see the prop's note). If
-  // nothing visible is left to wrap, the row gets NO anchor — an anchor over the
-  // one cell there is would cancel that cell's own click and hand back nothing,
-  // and a row without a link still behaves exactly as it did before #451.
+  // `noRowLink` (and `role: "actions"`) columns are skipped in BOTH steps: wrapping a
+  // cell that owns an anchor nests two links and disables the inner one (see the prop's
+  // note). If nothing visible is left to wrap, the row gets NO anchor — an anchor
+  // over the one cell there is would cancel that cell's own click and hand back
+  // nothing, and a row without a link still behaves exactly as it did before #451.
   const linkColumn = rowHref
-    ? (visibleColumns.find((c) => c.mobilePrimary && !c.noRowLink) ??
-      visibleColumns.find((c) => !c.noRowLink))
+    ? (visibleColumns.find((c) => c.mobilePrimary && !keepsOwnClicks(c)) ??
+      visibleColumns.find((c) => !keepsOwnClicks(c)))
     : undefined;
 
   // ---- Column resize ---- (data-table-resize.ts: pointer capture, one `setWidths` per
@@ -1387,15 +1428,36 @@ export function DataTable<T>({
   // filters come through a bottom sheet (feedback #299) and the sort through the
   // opt-in `mobileSort` row (keksdose K10), both on the table's own state.
   // Memoised on `visibleColumns`: the cards compare their columns by identity (0.48.2).
-  const mobileColumns = useMemo(() => visibleColumns.filter((c) => !c.mobileHidden), [visibleColumns]);
-  const mobilePrimaryCol =
-    mobileColumns.find((c) => c.mobilePrimary) ?? mobileColumns[0] ?? null;
-  const mobileSecondaryColumns = useMemo(
-    () => mobileColumns.filter((c) => c !== mobilePrimaryCol),
-    [mobileColumns, mobilePrimaryCol],
+  const mobileColumns = useMemo(
+    () => visibleColumns.filter((c) => !c.mobileHidden && c.mobile !== "hidden"),
+    [visibleColumns],
+  );
+  // The default card (0.49 KIT-7): the title, the status chips beside it, at most three
+  // fields — the ones marked `mobile: "secondary"`, else the first after the title — and
+  // the `role: "actions"` columns after them.
+  const {
+    primary: mobilePrimaryCol,
+    status: mobileStatusColumns,
+    fields: mobileSecondaryColumns,
+    actions: mobileActionColumns,
+  } = useMemo(() => mobileCardColumns(mobileColumns), [mobileColumns]);
+  // A development build names a `noRowLink` column (a per-row delete) the card drops.
+  useCardColumnWarnings(
+    columns,
+    !mobileCard && !mobileDetailsInRow,
+    storageKey ?? (typeof urlSync === "object" ? urlSync.prefix : undefined),
   );
-  // The columns the card leaves out, for the opened row (`mobileDetailsInRow`).
-  const mobileDetailColumns = mobileDetailsInRow ? visibleColumns.filter((c) => c.mobileHidden) : [];
+  // The columns the card leaves out, for the opened row (`mobileDetailsInRow`): the
+  // hidden ones and, without a `mobileCard`, the ones past the card's three fields.
+  const onCard = new Set<DataTableColumn<T>>([
+    ...(mobilePrimaryCol ? [mobilePrimaryCol] : []),
+    ...mobileStatusColumns,
+    ...mobileSecondaryColumns,
+    ...mobileActionColumns,
+  ]);
+  const mobileDetailColumns = mobileDetailsInRow
+    ? visibleColumns.filter((c) => (mobileCard ? c.mobileHidden || c.mobile === "hidden" : !onCard.has(c)))
+    : [];
   // Large and Extra large (§4 "DataTable phone card"): the card's labels go ABOVE their
   // values, nothing in it truncates, and the rows get more room. Most of it is a
   // `large:` class; the label/value grid needs a different STRUCTURE (each pair in a
@@ -1420,7 +1482,7 @@ export function DataTable<T>({
   // opens the row and leaves the cell's own link working. A caller's `mobileCard`
   // renderer is opaque to us; a link inside one is the caller's to declare by
   // marking the column it comes from.
-  const mobileCardLinkable = mobileColumns.every((c) => !c.noRowLink);
+  const mobileCardLinkable = (mobileCard ? mobileColumns : [...onCard]).every((c) => !keepsOwnClicks(c));
   // The card list's reading direction, for the one thing on it CSS cannot flip: which
   // physical drag a logical `start`/`end` swipe action means. Read off the DOM through
   // a ref callback (it runs at commit, like a layout effect) because `dir` is an
@@ -1590,7 +1652,9 @@ export function DataTable<T>({
         mobileCardLinkable={mobileCardLinkable}
         mobileCard={mobileCard}
         mobilePrimaryCol={mobilePrimaryCol}
+        mobileStatusColumns={mobileStatusColumns}
         mobileSecondaryColumns={mobileSecondaryColumns}
+        mobileActionColumns={mobileActionColumns}
         mobileExpandAsDialog={mobileExpandAsDialog}
         compact={compact}
         large={large}

package/src/components/error-boundary.tsx

@@ -604,14 +604,14 @@ function ErrorFallback({
   const errorLine = details.message ? `${details.name}: ${details.message}` : details.name;
 
   const reloadButton = (
-    <Button key="reload" variant={mode === "error" ? "secondary" : "primary"} onClick={reloadPage}>
+    <Button key="reload" variant={mode === "error" ? "secondary" : "default"} onClick={reloadPage}>
       {text.reload}
     </Button>
   );
   // Not after a chunk failure: `React.lazy` keeps the rejected import, so Try again
   // could only throw the same error again.
   const retryButton = chunk ? null : (
-    <Button key="retry" variant={mode === "error" ? "primary" : "secondary"} onClick={reset}>
+    <Button key="retry" variant={mode === "error" ? "default" : "secondary"} onClick={reset}>
       {text.retry}
     </Button>
   );