torch-glare 2.4.2 → 2.4.3

package/apps/lib/components/FormBuilder/context.ts

@@ -2,17 +2,12 @@
 
 import { createContext, useContext } from "react";
 
-export type FormBuilderMode = "edit" | "view";
 export type FieldDirection = "horizontal" | "vertical";
 
 /** Loading flag — drives the Submit spinner and disables inputs. */
 export const LoadingContext = createContext<boolean>(false);
 export const useLoading = () => useContext(LoadingContext);
 
-/** Edit vs read-only. Fields render `DisplayField` in `"view"`. */
-export const ModeContext = createContext<FormBuilderMode>("edit");
-export const useMode = () => useContext(ModeContext);
-
 /**
  * The `<form>`'s `id`. Provided by the FormBuilder root so a `FormBuilder.Submit` rendered
  * **outside** the `<form>` element — the absolute header's action pill, or the drawer header —
@@ -62,6 +57,8 @@ export interface StepperContextValue {
   goToStep: (index: number) => void;
   /** Field names registered per step, for per-step validation. */
   stepFields: Record<number, Set<string>>;
+  /** Steps that have passed validation — stay checked even after navigating back. */
+  completedSteps: Set<number>;
 }
 export const StepperContext = createContext<StepperContextValue | null>(null);
 export const useStepper = () => {

package/apps/lib/components/FormBuilder/fields/ChoiceFields.tsx

@@ -4,7 +4,6 @@ import { LabeledCheckBox } from "../../LabeledCheckBox";
 import { RadioGroup } from "../../Radio";
 import { RadioCard } from "../../RadioCard";
 import { useLoading } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { CheckboxFieldProps, RadioCardsFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -16,7 +15,7 @@ import { FieldShell } from "./FieldShell";
 export function CheckboxField({ subLabel, ...props }: CheckboxFieldProps) {
   const loading = useLoading();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "boolean", value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <div className="flex w-full items-center ps-2.5">
           <LabeledCheckBox
@@ -36,12 +35,8 @@ export function CheckboxField({ subLabel, ...props }: CheckboxFieldProps) {
 /** `FormBuilder.RadioCards` — radio options rendered as cards (Glare `RadioCard`). */
 export function RadioCardsField(props: RadioCardsFieldProps) {
   const loading = useLoading();
-  const options = props.options.map((o) => ({
-    label: typeof o.label === "string" ? o.label : String(o.value),
-    value: o.value,
-  }));
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "option", value: v, options })}>
+    <FieldShell {...props}>
       {(field) => (
         <RadioGroup
           value={field.value ?? ""}

package/apps/lib/components/FormBuilder/fields/ColorField.tsx

@@ -15,24 +15,7 @@ export function ColorField(props: ColorFieldProps) {
   const loading = useLoading();
 
   return (
-    <FieldShell
-      {...props}
-      view={(v) =>
-        v
-          ? {
-              valueNode: (
-                <span className="inline-flex items-center gap-2">
-                  <span
-                    className="h-4 w-4 rounded-[4px] border border-border-presentation-action-primary"
-                    style={{ background: String(v) }}
-                  />
-                  {String(v)}
-                </span>
-              ),
-            }
-          : { value: "" }
-      }
-    >
+    <FieldShell {...props}>
       {(field) => {
         const value = typeof field.value === "string" ? field.value : "";
         const disabled = props.disabled || loading;

package/apps/lib/components/FormBuilder/fields/CustomField.tsx

@@ -6,11 +6,6 @@ import { FieldShell } from "./FieldShell";
 /** `FormBuilder.Custom` — render any control, keeping the FieldSection + validation wiring. */
 export function CustomField(props: CustomFieldProps) {
   return (
-    <FieldShell
-      {...props}
-      view={(v) => ({ valueNode: props.formatView ? props.formatView(v) : String(v ?? "—") })}
-    >
-      {(field, fieldState) => props.render({ field, fieldState })}
-    </FieldShell>
+    <FieldShell {...props}>{(field, fieldState) => props.render({ field, fieldState })}</FieldShell>
   );
 }

package/apps/lib/components/FormBuilder/fields/DateField.tsx

@@ -2,7 +2,6 @@
 
 import { DatePicker } from "../../DatePicker";
 import { useCell } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { DateFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -12,11 +11,10 @@ import { FieldShell } from "./FieldShell";
  * `.DateTime` (date + time). All back onto the one Glare `DatePicker`.
  */
 export function DateField(props: DateFieldProps) {
-  const kind = props.mode === "range" ? "daterange" : props.mode === "multiple" ? "dates" : "date";
   const cell = useCell();
 
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind, value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <DatePicker
           mode={props.mode ?? "single"}

package/apps/lib/components/FormBuilder/fields/FieldArray.tsx

@@ -4,17 +4,14 @@ import { useFormContext, useFieldArray, type FieldValues, type ArrayPath } from
 
 import { Button } from "../../Button";
 import { Card } from "../../Card";
-import { useMode } from "../context";
 import type { FieldArrayProps } from "../types";
 
 /**
  * `FormBuilder.FieldArray` — a repeating list of sub-fields (RHF `useFieldArray`).
- * `children` renders one row's fields; name them `${rowName}.field`. Add/Remove is
- * hidden in view mode.
+ * `children` renders one row's fields; name them `${rowName}.field`.
  */
 export function FieldArray(props: FieldArrayProps) {
   const form = useFormContext<FieldValues>();
-  const mode = useMode();
   const { fields, append, remove } = useFieldArray({
     control: form.control,
     name: props.name as ArrayPath<FieldValues>,
@@ -22,7 +19,7 @@ export function FieldArray(props: FieldArrayProps) {
 
   if (props.hidden) return null;
 
-  const addButton = mode !== "view" && (
+  const addButton = (
     <Button
       type="button"
       size="S"
@@ -55,16 +52,14 @@ export function FieldArray(props: FieldArrayProps) {
       <div className="flex flex-col gap-3">
         {fields.map((f, index) => (
           <Card key={f.id} className="relative gap-3 pr-8">
-            {mode !== "view" && (
-              <button
-                type="button"
-                aria-label="Remove"
-                onClick={() => remove(index)}
-                className="absolute right-2 top-2 inline-flex h-[22px] w-[22px] items-center justify-center rounded-full text-content-presentation-state-negative transition-colors hover:bg-background-presentation-action-hover"
-              >
-                <i className="ri-close-line text-[16px]" />
-              </button>
-            )}
+            <button
+              type="button"
+              aria-label="Remove"
+              onClick={() => remove(index)}
+              className="absolute right-2 top-2 inline-flex h-[22px] w-[22px] items-center justify-center rounded-full text-content-presentation-state-negative transition-colors hover:bg-background-presentation-action-hover"
+            >
+              <i className="ri-close-line text-[16px]" />
+            </button>
             {props.children(`${props.name}.${index}`, index, () => remove(index))}
           </Card>
         ))}

package/apps/lib/components/FormBuilder/fields/FieldShell.tsx

@@ -15,9 +15,7 @@ import { FieldSection } from "../../../layouts/FieldSection";
 import { FormField, FormItem, FormControl } from "../../Form";
 import { FieldHint } from "../../FieldHint";
 import { Tooltip } from "../../Tooltip";
-import { DisplayField } from "../DisplayField";
-import { useMode, useDirection, useStepRegistry, useCell } from "../context";
-import type { FieldView } from "../viewFormat";
+import { useDirection, useStepRegistry, useCell } from "../context";
 
 export interface FieldShellProps {
   name: string;
@@ -28,20 +26,18 @@ export interface FieldShellProps {
   hidden?: boolean;
   /** Force the field's layout direction, overriding the form's `useDirection()` context. */
   direction?: "horizontal" | "vertical" | "flexible";
-  /** Edit-mode input, wired to the react-hook-form field. */
+  /** The input, wired to the react-hook-form field. */
   children: (
     field: ControllerRenderProps<FieldValues, string>,
     fieldState: ControllerFieldState,
   ) => ReactNode;
-  /** Read-only rendering (view mode) computed from the current value. */
-  view?: (value: unknown) => FieldView;
 }
 
 /**
  * Shared wrapper for every `FormBuilder.*` field: the FieldSection row + the RHF
- * `FormField`/`FormItem`/`FormControl`/`FormMessage` scaffolding in edit mode, or
- * `DisplayField` in view mode. Also registers the field name into the enclosing
- * `FormBuilder.Step` (if any) so the stepper can validate per step.
+ * `FormField`/`FormItem`/`FormControl`/`FormMessage` scaffolding. Also registers the
+ * field name into the enclosing `FormBuilder.Step` (if any) so the stepper can
+ * validate per step.
  */
 export function FieldShell({
   name,
@@ -52,10 +48,8 @@ export function FieldShell({
   hidden,
   direction: directionProp,
   children,
-  view,
 }: FieldShellProps) {
   const form = useFormContext();
-  const mode = useMode();
   const cell = useCell();
   const ctxDirection = useDirection();
   // A field may pin its own direction (e.g. RichText forces vertical), else the form's. When
@@ -82,13 +76,8 @@ export function FieldShell({
 
   // Cell mode (inside FormBuilder.Table): render just the control — no FieldSection label/row.
   // Errors surface as a tooltip on the control rather than a stacked FieldHint, so a row stays
-  // one line tall. Step registration + view formatting above still apply.
+  // one line tall. Step registration above still applies.
   if (cell) {
-    if (mode === "view") {
-      const value = form.getValues(name);
-      const v = view ? view(value) : { value: value == null ? "" : String(value) };
-      return <DisplayField value={v.value} valueNode={v.valueNode} />;
-    }
     return (
       <FormField
         control={form.control}
@@ -111,21 +100,6 @@ export function FieldShell({
     );
   }
 
-  if (mode === "view") {
-    const value = form.getValues(name);
-    const v = view ? view(value) : { value: value == null ? "" : String(value) };
-    return (
-      <FieldSection
-        label={label}
-        secondaryLabel={description}
-        direction={direction}
-        className={fullWidth ? "max-w-full" : undefined}
-      >
-        <DisplayField value={v.value} valueNode={v.valueNode} />
-      </FieldSection>
-    );
-  }
-
   return (
     <FieldSection
       label={label}

package/apps/lib/components/FormBuilder/fields/FileField.tsx

@@ -2,7 +2,6 @@
 
 import { ImageAttachment } from "../../ImageAttachment";
 import { useLoading } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { FileFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -10,7 +9,7 @@ import { FieldShell } from "./FieldShell";
 export function FileField(props: FileFieldProps & { image?: boolean }) {
   const loading = useLoading();
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "file", value: v })}>
+    <FieldShell {...props}>
       {(field) => {
         const current: unknown = field.value;
         const fileName = Array.isArray(current)

package/apps/lib/components/FormBuilder/fields/OptionListFields.tsx

@@ -7,7 +7,6 @@ import { Label } from "../../Label";
 import { RadioGroup, Radio } from "../../Radio";
 import { Checkbox } from "../../Checkbox";
 import { useLoading } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { OptionItem, OptionsFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -66,10 +65,7 @@ function OptionRow({
 export function RadioListField(props: OptionsFieldProps) {
   const loading = useLoading();
   return (
-    <FieldShell
-      {...props}
-      view={(v) => formatFieldView({ kind: "option", value: v, options: props.options })}
-    >
+    <FieldShell {...props}>
       {(field) => (
         <RadioGroup value={field.value ?? ""} onValueChange={field.onChange} className="w-full">
           <OptionBox>
@@ -102,10 +98,7 @@ export function RadioListField(props: OptionsFieldProps) {
 export function CheckboxGroupField(props: OptionsFieldProps) {
   const loading = useLoading();
   return (
-    <FieldShell
-      {...props}
-      view={(v) => formatFieldView({ kind: "multi", value: v, options: props.options })}
-    >
+    <FieldShell {...props}>
       {(field) => {
         const selected: string[] = Array.isArray(field.value) ? field.value : [];
         const toggle = (value: string, checked: boolean) => {

package/apps/lib/components/FormBuilder/fields/OtpField.tsx

@@ -2,7 +2,6 @@
 
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "../../InputOTP";
 import { useLoading } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { OtpFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -12,7 +11,7 @@ export function OtpField(props: OtpFieldProps) {
   const length = props.length ?? 6;
 
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <InputOTP
           maxLength={length}

package/apps/lib/components/FormBuilder/fields/PhoneField.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { Select, SelectTrigger, SelectContent, SelectItem } from "../../Select";
+import { SearchableSelect } from "../../SearchableSelect";
 import { InputField } from "../../InputField";
+import { cn } from "../../../utils/cn";
 import { useLoading, useCell } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { PhoneFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 import { COUNTRIES, countryByCode, countryByDial, flagEmoji } from "./countries";
@@ -11,6 +11,14 @@ import { COUNTRIES, countryByCode, countryByDial, flagEmoji } from "./countries"
 // Dial codes longest-first, so "+1" doesn't shadow "+1…"-style codes when prefix-matching.
 const DIALS = [...new Set(COUNTRIES.map((c) => c.dial))].sort((a, b) => b.length - a.length);
 
+// Country picker rows. Keyed by the unique ISO code; the row shows flag + dial, but `searchText`
+// makes filtering match the country NAME (typing a dial code won't match).
+const COUNTRY_OPTIONS = COUNTRIES.map((c) => ({
+  value: c.code,
+  label: `${flagEmoji(c.code)} ${c.dial}`,
+  searchText: c.name,
+}));
+
 function splitPhone(value: unknown, defaultDial: string): { dial: string; number: string } {
   const s = typeof value === "string" ? value.trim() : "";
   if (!s) return { dial: defaultDial, number: "" };
@@ -26,8 +34,9 @@ function splitPhone(value: unknown, defaultDial: string): { dial: string; number
 }
 
 /**
- * `FormBuilder.Phone` — country dial-code (every country) + number. The picker is keyed by the
- * unique ISO code (dial codes repeat); the value is stored as a `"+<dial> <number>"` string.
+ * `FormBuilder.Phone` — country dial-code (every country) + number. The picker is a
+ * `SearchableSelect` keyed by the unique ISO code (dial codes repeat) — type to filter by
+ * country name or dial. The value is stored as a `"+<dial> <number>"` string.
  */
 export function PhoneField(props: PhoneFieldProps) {
   const loading = useLoading();
@@ -35,7 +44,7 @@ export function PhoneField(props: PhoneFieldProps) {
   const defaultDial = props.defaultCountry ?? "+964"; // Iraq
 
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "text", value: v })}>
+    <FieldShell {...props}>
       {(field) => {
         const { dial, number } = splitPhone(field.value, defaultDial);
         const country = countryByDial(dial);
@@ -43,25 +52,17 @@ export function PhoneField(props: PhoneFieldProps) {
         const commit = (d: string, n: string) => field.onChange(n ? `${d} ${n}` : d);
         return (
           <div className="flex w-full min-w-0 items-center gap-2">
-            <Select
-              value={country?.code ?? ""}
+            {/* Searchable country picker — filter by name or dial; rows carry the full country name. */}
+            <SearchableSelect
+              options={COUNTRY_OPTIONS}
+              value={country?.code ?? null}
               onValueChange={(code) => commit(countryByCode(code)?.dial ?? dial, number)}
-              disabled={disabled}
-            >
-              {/* Compact trigger — flag + dial. The dropdown rows carry the full country name. */}
-              <SelectTrigger size="XL" onTable={cell} className="shrink-0">
-                <span className="whitespace-nowrap">
-                  {country ? `${flagEmoji(country.code)} ${country.dial}` : dial}
-                </span>
-              </SelectTrigger>
-              <SelectContent>
-                {COUNTRIES.map((c) => (
-                  <SelectItem key={c.code} value={c.code}>
-                    {`${flagEmoji(c.code)} ${c.name} ${c.dial}`}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+              placeholder="+964"
+              size="M"
+              onTable={cell}
+              inputClassName="w-[100px] min-w-[0px]"
+              className={cn("w-[113px] shrink-0", disabled && "pointer-events-none opacity-60")}
+            />
             <div className="min-w-0 flex-1">
               <InputField
                 type="tel"

package/apps/lib/components/FormBuilder/fields/RichTextEditorField.tsx

@@ -6,7 +6,6 @@ import type { OutputData } from "@editorjs/editorjs";
 // statically re-exports `TextEditor` (which loads EditorJS at module init) and would drag
 // it into the SSR bundle, crashing server rendering. This path stays SSR-safe (lazy inside).
 import { RichTextField as RichTextEditor } from "../../TextEditor/RichTextField";
-import { formatFieldView } from "../viewFormat";
 import type { BaseFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -18,12 +17,7 @@ import { FieldShell } from "./FieldShell";
  */
 export function RichTextField(props: BaseFieldProps) {
   return (
-    <FieldShell
-      {...props}
-      direction="vertical"
-      fullWidth
-      view={(v) => formatFieldView({ kind: "richtext", value: v })}
-    >
+    <FieldShell {...props} direction="vertical" fullWidth>
       {(field) => (
         <RichTextEditor
           data={field.value as OutputData | undefined}

package/apps/lib/components/FormBuilder/fields/SelectField.tsx

@@ -5,7 +5,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { BadgeField } from "../../BadgeField";
 import type { Tag } from "../../../hooks/useTagSelection";
 import { useLoading, useCell } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { SelectFieldProps, SearchableSelectFieldProps, OptionsFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -15,10 +14,7 @@ export function SelectField(props: SelectFieldProps) {
   const cell = useCell();
 
   return (
-    <FieldShell
-      {...props}
-      view={(v) => formatFieldView({ kind: "option", value: v, options: props.options })}
-    >
+    <FieldShell {...props}>
       {(field) => (
         <Select
           value={typeof field.value === "string" ? field.value : ""}
@@ -48,10 +44,7 @@ export function SelectField(props: SelectFieldProps) {
 export function SearchableSelectField(props: SearchableSelectFieldProps) {
   const cell = useCell();
   return (
-    <FieldShell
-      {...props}
-      view={(v) => formatFieldView({ kind: "option", value: v, options: props.options })}
-    >
+    <FieldShell {...props}>
       {(field) => (
         <SearchableSelect
           options={props.options}
@@ -75,10 +68,7 @@ export function SearchableSelectField(props: SearchableSelectFieldProps) {
 export function MultiSelectField(props: OptionsFieldProps) {
   const cell = useCell();
   return (
-    <FieldShell
-      {...props}
-      view={(v) => formatFieldView({ kind: "multi", value: v, options: props.options })}
-    >
+    <FieldShell {...props}>
       {(field) => {
         const selected = new Set<string>(Array.isArray(field.value) ? field.value : []);
         const tags: Tag[] = props.options.map((opt) => ({

package/apps/lib/components/FormBuilder/fields/SignatureField.tsx

@@ -22,25 +22,7 @@ export function SignatureField(props: SignatureFieldProps) {
   const penColor = props.penColor ?? "#111827";
 
   return (
-    <FieldShell
-      {...props}
-      direction="vertical"
-      fullWidth
-      view={(v) =>
-        typeof v === "string" && v
-          ? {
-              valueNode: (
-                // eslint-disable-next-line @next/next/no-img-element -- data-URL preview, no optimization applies
-                <img
-                  src={v}
-                  alt="Signature"
-                  className="max-h-[120px] rounded-[8px] border border-border-presentation-action-primary bg-white"
-                />
-              ),
-            }
-          : { value: "" }
-      }
-    >
+    <FieldShell {...props} direction="vertical" fullWidth>
       {(field) => (
         <SignaturePad
           value={typeof field.value === "string" ? field.value : ""}

package/apps/lib/components/FormBuilder/fields/SliderField.tsx

@@ -29,12 +29,7 @@ export function SliderField(props: SliderFieldProps) {
   const fmt = (n: number) => `${n}${suffix}`;
 
   return (
-    <FieldShell
-      {...props}
-      view={(v) => ({
-        value: Array.isArray(v) ? `${fmt(v[0])} – ${fmt(v[1])}` : v == null ? "" : fmt(v as number),
-      })}
-    >
+    <FieldShell {...props}>
       {(field) => {
         const raw = field.value;
         const values: number[] = props.range

package/apps/lib/components/FormBuilder/fields/SwitchBoxField.tsx

@@ -2,7 +2,6 @@
 
 import { Switch } from "../../Switch";
 import { useLoading } from "../context";
-import { formatFieldView } from "../viewFormat";
 import type { SwitchBoxFieldProps } from "../types";
 import { FieldShell } from "./FieldShell";
 
@@ -18,7 +17,7 @@ export function SwitchBoxField({ subLabel, ...props }: SwitchBoxFieldProps) {
   const loading = useLoading();
   const hasSubLabel = subLabel != null && subLabel !== "";
   return (
-    <FieldShell {...props} view={(v) => formatFieldView({ kind: "boolean", value: v })}>
+    <FieldShell {...props}>
       {(field) => (
         <div className="flex w-full items-center justify-end gap-[10px] rounded-[8px] bg-background-presentation-form-field-primary px-[10px] py-[6px]">
           {hasSubLabel && (

package/apps/lib/components/FormBuilder/fields/TableField.tsx

@@ -24,7 +24,7 @@ import { SectionBlock } from "../../SectionBlock";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../Table";
 import { Checkbox } from "../../Checkbox";
 import { Button } from "../../Button";
-import { CellContext, useLoading, useMode } from "../context";
+import { CellContext, useLoading } from "../context";
 import type { TableColumn, TableFieldProps } from "../types";
 
 const ALIGN: Record<NonNullable<TableColumn["align"]>, string> = {
@@ -41,9 +41,7 @@ const ALIGN: Record<NonNullable<TableColumn["align"]>, string> = {
 export function TableField(props: TableFieldProps) {
   const { name, columns, selectable = true, reorderable = true } = props;
   const form = useFormContext<FieldValues>();
-  const mode = useMode();
   const loading = useLoading();
-  const isView = mode === "view";
 
   const { fields, append, remove, move, replace } = useFieldArray({
     control: form.control,
@@ -60,8 +58,8 @@ export function TableField(props: TableFieldProps) {
 
   if (props.hidden) return null;
 
-  const showHandle = reorderable && !isView;
-  const showSelect = selectable && !isView;
+  const showHandle = reorderable;
+  const showSelect = selectable;
 
   const toggleRow = (id: string) =>
     setSelected((prev) => {
@@ -193,31 +191,29 @@ export function TableField(props: TableFieldProps) {
           </TableRow>
         )}
 
-        {!isView && (
-          <TableRow className="h-[40px]">
-            <TableCell
-              colSpan={totalCols}
-              className="border-t-2 border-transparent hover:border-border-presentation-table-action-hover hover:bg-background-presentation-table-acton-hover"
+        <TableRow className="h-[40px]">
+          <TableCell
+            colSpan={totalCols}
+            className="border-t-2 border-transparent hover:border-border-presentation-table-action-hover hover:bg-background-presentation-table-acton-hover"
+          >
+            <button
+              type="button"
+              disabled={loading}
+              onClick={() => append((props.defaultItem ?? {}) as never)}
+              className="flex w-full items-center justify-start gap-2 typography-body-medium-semibold text-content-presentation-action-light-primary [&_i]:text-[20px]"
             >
-              <button
-                type="button"
-                disabled={loading}
-                onClick={() => append((props.defaultItem ?? {}) as never)}
-                className="flex w-full items-center justify-start gap-2 typography-body-medium-semibold text-content-presentation-action-light-primary [&_i]:text-[20px]"
-              >
-                <i className="ri-add-line" />
-                {props.addLabel ?? "Add New"}
-              </button>
-            </TableCell>
-          </TableRow>
-        )}
+              <i className="ri-add-line" />
+              {props.addLabel ?? "Add New"}
+            </button>
+          </TableCell>
+        </TableRow>
       </TableBody>
     </Table>
   );
 
-  // Header actions on the right of the SectionBlock title row (edit mode only): a "Delete Row"
-  // that's disabled until rows are selected, and a primary "Add New".
-  const headerActions = !isView ? (
+  // Header actions on the right of the SectionBlock title row: a "Delete Row" that's disabled
+  // until rows are selected, and a primary "Add New".
+  const headerActions = (
     <>
       {selectable && (
         <Button
@@ -242,7 +238,7 @@ export function TableField(props: TableFieldProps) {
         {props.addLabel ?? "Add New"}
       </Button>
     </>
-  ) : undefined;
+  );
 
   return (
     <SectionBlock