@object-ui/fields 17.3.0 → 17.5.0

package/src/widgets/CurrencyField.tsx

@@ -2,53 +2,84 @@ import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
 import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
-import { useLocalization } from '@object-ui/i18n';
-import { resolveFieldCurrency } from '../currency';
+import { useLocalization, useDisplayLocale, formatDisplayNumber } from '@object-ui/i18n';
+import { resolveFieldCurrency, currencyFractionDigits, currencySymbol } from '../currency';
 
 /**
  * Format currency value for display. When `currency` is undefined the value
  * is rendered as a plain number with thousands separators (no symbol),
  * because silently assuming USD is misleading for non-USD businesses.
+ *
+ * `precision` is a display width the caller resolved — either the field's
+ * authored `precision` or, when it declared none, the currency's own ISO 4217
+ * minor-unit count (see the derivation at the call site, objectui#4361).
  */
-function formatAmount(value: number, currency: string | undefined, precision: number): string {
+function formatAmount(
+  value: number,
+  currency: string | undefined,
+  precision: number,
+  locale?: string,
+): string {
   if (currency) {
     try {
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
+      return formatDisplayNumber(value, {
+        locale,
         currency,
         minimumFractionDigits: precision,
         maximumFractionDigits: precision,
-      }).format(value);
+      });
     } catch {
       return `${currency} ${value.toFixed(precision)}`;
     }
   }
   try {
-    return new Intl.NumberFormat('en-US', {
+    // No `scale` passed: this is a currency widget whose `precision` is a
+    // display width, so a `precision: 0` amount keeps its separators rather
+    // than being read as an ordinal (objectui#4033).
+    return formatDisplayNumber(value, {
+      locale,
       minimumFractionDigits: precision,
       maximumFractionDigits: precision,
-    }).format(value);
+    });
   } catch {
     return value.toFixed(precision);
   }
 }
 
-const CURRENCY_SYMBOLS: Record<string, string> = {
-  USD: '$',
-};
-
 export function CurrencyField({ value, onChange, field, readonly, error, className, ...props }: FieldWidgetComponentProps<number>) {
   const currencyField = field as any;
   // Shared precedence: field currency → currencyConfig → tenant default (ADR-0053).
   const { currency: tenantCurrency } = useLocalization();
+  const locale = useDisplayLocale();
   const currency: string | undefined = resolveFieldCurrency(currencyField, tenantCurrency);
-  const precision = currencyField?.precision ?? 2;
+  // An AUTHORED `precision` wins: it is authored metadata, and this repo's
+  // convention is that authored metadata keeps priority. Whether a declared
+  // `precision` that contradicts the currency's ISO 4217 digits (say
+  // `precision: 2` on a JPY field) should be REJECTED at publish time is a
+  // contract question, so it is filed upstream in `@objectstack/spec` rather
+  // than answered here by overriding the author (objectui#4361).
+  //
+  // An ABSENT `precision` derives from the currency instead of defaulting to a
+  // literal 2, which rendered `¥1,234.50` for a currency with no minor unit.
+  // "Absent" is genuinely distinguishable from "authored 2" here — MEASURED,
+  // not assumed: `CurrencyFieldMetadata.precision` is optional in
+  // `@object-ui/types` and `z.ZodOptional<z.ZodNumber>` (no `.default()`) in
+  // `@objectstack/spec`, so a parsed field carries no materialized 2. The only
+  // `.default(2)` on the currency surface is `CurrencyConfigSchema.precision`,
+  // a different key on the `currencyConfig` block that this widget never reads.
+  //
+  // This is the widget's ONE precision, so the derivation also reaches the edit
+  // affordances below. Deliberate: leaving `step`/blur-rounding at 2 would give
+  // a JPY field that displays whole yen while offering a 0.01 spinner step and
+  // rounding typed input to 1234.56 yen.
+  const precision =
+    currencyField?.precision ?? (currency ? currencyFractionDigits(currency) : 2);
 
   if (readonly) {
     if (value == null) return <EmptyValue />;
     return (
       <span className="text-sm font-medium tabular-nums">
-        {formatAmount(Number(value), currency, precision)}
+        {formatAmount(Number(value), currency, precision, locale)}
       </span>
     );
   }
@@ -61,7 +92,16 @@ export function CurrencyField({ value, onChange, field, readonly, error, classNa
     }
   };
 
-  const symbol = currency ? (currency === 'USD' ? '$' : currency) : '';
+  // ONE channel for the symbol (objectui#4414). This used to be a hand-written
+  // `currency === 'USD' ? '$' : currency` ternary, with a dead one-entry
+  // `CURRENCY_SYMBOLS` map sitting two lines above it restating the same fact —
+  // a table that looked like the place to add a currency but that nothing read.
+  // Both were hand copies of knowledge `Intl` already carries, and both are
+  // gone: `currencySymbol` reads the `currency` part of the SAME format the
+  // readonly branch above renders amounts with, so the two modes of this widget
+  // can no longer disagree (they did: `JPY` in the adornment, `¥1,235` in the
+  // readonly span). USD at the display-locale default is `$` either way.
+  const symbol = currency ? currencySymbol(currency, locale) : '';
 
   return (
     <div className="relative">

package/src/widgets/DateField.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
+import { useDisplayLocale } from '@object-ui/i18n';
 import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
 import { openNativePicker } from './openNativePicker';
+import { toDateInputValue } from './nativeDateValue';
 
 /**
  * DateField - Date picker input widget
  * Uses native date input and displays locale-formatted date in readonly mode
  */
 export function DateField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+  // Before the readonly early return: the hook count must not depend on a prop
+  // (objectui#4468). A bare `toLocaleDateString()` reads the MACHINE's locale,
+  // which is how a Chinese form ended up with an `8/11/2026` value in it.
+  const locale = useDisplayLocale();
   if (readonly) {
-    return value ? <span className="text-sm">{new Date(value).toLocaleDateString()}</span> : <EmptyValue />;
+    return value ? <span className="text-sm">{new Date(value).toLocaleDateString(locale)}</span> : <EmptyValue />;
   }
 
   const domProps = toDomProps(props);
@@ -19,7 +25,10 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
     <Input
       {...domProps}
       type="date"
-      value={value || ''}
+      // An API that hands back `2026-06-17T00:00:00.000Z` for a `date` field
+      // would leave this control empty too (objectui#3127). The written-back
+      // shape is unchanged: the control's own plain `YYYY-MM-DD`.
+      value={toDateInputValue(value)}
       onChange={(e) => onChange(e.target.value)}
       onClick={(e) => {
         openNativePicker(e.currentTarget);

package/src/widgets/DateTimeField.tsx

@@ -1,20 +1,26 @@
 import React from 'react';
 import { Input, EmptyValue } from '@object-ui/components';
+import { useDisplayLocale } from '@object-ui/i18n';
 import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
 import { openNativePicker } from './openNativePicker';
+import { toDateTimeInputValue, fromDateTimeInputValue } from './nativeDateValue';
 
 /**
  * DateTimeField - Combined date and time picker widget
  * Displays both date and time in locale format when readonly
  */
 export function DateTimeField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<string>) {
+  // Before the readonly early return — the hook count must not depend on a
+  // prop. See DateField for why the bare `toLocale*` calls were wrong
+  // (objectui#4468).
+  const locale = useDisplayLocale();
   if (readonly) {
     if (!value) return <EmptyValue />;
     const date = new Date(value);
     return (
       <span className="text-sm">
-        {date.toLocaleDateString()} {date.toLocaleTimeString()}
+        {date.toLocaleDateString(locale)} {date.toLocaleTimeString(locale)}
       </span>
     );
   }
@@ -25,8 +31,11 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
     <Input
       {...domProps}
       type="datetime-local"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
+      // The record's value is ISO-8601 (`…T14:30:00.000Z`), which this control
+      // rejects outright — it renders empty and the user reads that as a lost
+      // value (objectui#3127). Convert in, and back out on the same basis.
+      value={toDateTimeInputValue(value)}
+      onChange={(e) => onChange(fromDateTimeInputValue(e.target.value))}
       onClick={(e) => {
         openNativePicker(e.currentTarget);
         domProps.onClick?.(e);

package/src/widgets/FileField.tsx

@@ -5,7 +5,9 @@ import { useObjectTranslation } from '@object-ui/i18n';
 import { Upload, X, File as FileIcon, ImageIcon, Camera, Loader2 } from 'lucide-react';
 import { FieldWidgetComponentProps } from './types';
 import { toDomProps } from './toDomProps';
+import { toHostGroupProps } from './toHostGroupProps';
 import { useUploadingSignal } from './useUploadingSignal';
+import { maxSizeError, type TranslateFn } from './file-size-guard';
 import {
   fileValueForSubmit,
   readFileValues,
@@ -47,13 +49,11 @@ function useFileUploads(opts: {
     if (selectedFiles.length === 0) return;
     const newErrors: string[] = [];
 
+    // Shared with ImageField — see `file-size-guard`.
     const validFiles = selectedFiles.filter(file => {
-      if (maxSize && file.size > maxSize) {
-        const maxMB = (maxSize / (1024 * 1024)).toFixed(1);
-        newErrors.push(t('fields.file.exceedsMaxSize', {
-          defaultValue: `"${file.name}" exceeds max size (${maxMB} MB)`,
-          name: file.name, max: maxMB,
-        }));
+      const rejection = maxSizeError(t as TranslateFn, file, maxSize);
+      if (rejection) {
+        newErrors.push(rejection);
         return false;
       }
       return true;
@@ -184,10 +184,18 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
   }, [accept, processFiles]);
 
   if (readonly) {
-    if (!value) return <EmptyValue />;
+    // Readonly there is no dropzone: the field's whole rendered surface is the
+    // list of file names, so THAT is what the host's group label names
+    // (objectui#3990). The role is therefore `group` here and `button` (the
+    // dropzone) while editable — the same widget, two different surfaces. See
+    // `toHostGroupProps`; `EmptyValue`'s own `aria-label` ("No value") is
+    // outranked by `aria-labelledby` per accname, and on the `generic` role that
+    // placeholder span carries it was never exposed as a name anyway.
+    const hostGroupProps = toHostGroupProps(props);
+    if (!value) return <EmptyValue {...hostGroupProps} />;
 
     return (
-      <div className="flex flex-wrap gap-2">
+      <div {...hostGroupProps} className="flex flex-wrap gap-2">
         {views.map((file, idx) => (
           <span key={idx} className="text-sm truncate max-w-xs">
             {file.name}
@@ -240,7 +248,17 @@ export function FileField({ value, onChange, field, readonly, onUploadingChange,
             keyboard path to the hidden file input), so the DOM pass-through
             and the validation state land here (objectui#3318). `name` is
             withheld: only DOM-legal on form controls, and on this div it is
-            exactly the leak #3291 sweeps for. */}
+            exactly the leak #3291 sweeps for.
+
+            It also carries the host's label. This widget is declared
+            `labelling: 'group'` (objectui#3961) NOT because it is composite — it
+            has exactly one control — but because that one control is a
+            `div[role="button"]`, which no `<label for>` can reach. So the form
+            renderer names it by IDREF instead, and `aria-labelledby` arrives in
+            the same whitelist spread (`toDomProps` forwards the whole `aria-`
+            family). Deliberately no extra `role="group"` wrapper: there is no
+            group here, and adding one would announce a container that holds a
+            single button. */}
         <div
           {...dropzoneDomProps}
           onDragOver={handleDragOver}

package/src/widgets/FormulaField.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EmptyValue } from '@object-ui/components';
+import { useDisplayLocale } from '@object-ui/i18n';
 import { FieldWidgetComponentProps } from './types';
 
 /**
@@ -7,6 +8,10 @@ import { FieldWidgetComponentProps } from './types';
  * Values are computed on the backend and cannot be edited
  */
 export function FormulaField({ value, field, ...props }: FieldWidgetComponentProps<any>) {
+  // Before the empty-value early return — the hook count must not change when
+  // a value flips between null and set. A `date` return type used to format
+  // through the MACHINE's locale (objectui#4468).
+  const locale = useDisplayLocale();
   const formulaField = field as any;
   const returnType = formulaField?.return_type || 'text';
 
@@ -20,7 +25,7 @@ export function FormulaField({ value, field, ...props }: FieldWidgetComponentPro
   } else if (returnType === 'boolean') {
     displayValue = value ? 'Yes' : 'No';
   } else if (returnType === 'date') {
-    displayValue = new Date(value).toLocaleDateString();
+    displayValue = new Date(value).toLocaleDateString(locale);
   } else {
     displayValue = String(value);
   }

package/src/widgets/FullscreenFieldEditor.tsx

@@ -6,266 +6,55 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
-import {
-  cn,
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  Button,
-} from '@object-ui/components';
-import { Maximize2, Check, X } from 'lucide-react';
-import { useFieldTranslation } from './useFieldTranslation';
+import React from 'react';
+import { FullscreenEditor, type FullscreenEditorProps } from '@object-ui/components';
 
 /**
- * The fullscreen-edit affordance shared by every long-text widget: the "expand"
- * button plus the full-height dialog it opens.
- *
- * ## Why this is shared rather than copied
- *
- * `ObjectFormSchema.mobile.fullscreenLongText` is ONE form-level promise, and
- * `ObjectForm` projects it onto EVERY long-text field as `mobile_fullscreen`
- * (`field:textarea` → `TextAreaField`, `field:markdown` / `field:html` →
- * `RichTextField`). A user who turns the setting on gets one behaviour, so the
- * behaviour has one implementation. objectui#3301 is what the other
- * arrangement costs: the flag reached `RichTextField` for as long as the
- * feature has existed and that widget simply never read it, so half the
- * documented promise ("textarea/rich-text get an expand button") silently did
- * nothing. A second hand-written copy of the state machine is the same failure
- * with an extra step — it drifts, and nothing reports the drift.
- *
- * What is genuinely per-widget is the EDITOR, so that is the only thing
- * injected: `children` renders it against the draft. Everything a user can
- * observe about the *interaction* — when the affordance appears, that the
- * dialog seeds from the committed value, that typing stays local until "Done",
- * that "Cancel" discards — lives here, once.
- *
- * ## Draft semantics (unchanged from the original `TextAreaField` behaviour)
- *
- * The dialog edits a LOCAL draft seeded from `value` at open time and commits
- * once, on "Done". It deliberately does not stream every keystroke to the host:
- * these widgets sit in a react-hook-form field, and per-keystroke `onChange`
- * during a modal edit would mark the form dirty (and fire validation) for an
- * edit the user may still cancel. "Cancel" therefore needs no undo — nothing
- * was written.
- *
- * ## `disabled` (objectui#3402)
- *
- * The dialog is a SECOND editing surface for the same value, so a field that is
- * not interactive has to be not interactive here too. It was not: hosts landed
- * `disabled` on their inline control only, this component never declared the
- * prop at all, and a disabled long-text field therefore sat correctly greyed out
- * next to a live expand button — click it, type anything, press "Done", and the
- * edit went into form state through `onCommit`. Measured on `origin/main`
- * before the fix: inline `disabled=true`, toggle `disabled=false`, dialog input
- * `disabled=false`, `onChange` called with "EDITED WHILE DISABLED".
- *
- * The gate is shaped like the built-in path's (`FullscreenTextarea` in
- * `components/src/renderers/form/form.tsx`, objectui#3400/PR #3401), because
- * one form-level setting must keep producing one behaviour on both paths:
- *
- *  - the toggle STAYS but is `disabled` — `disabled` means "not interactive,
- *    muted", not "shown plainly", which is `readonly`'s job (and `readonly`
- *    never reaches this component at all — see below);
- *  - `openFullscreen` refuses independently of the attribute, since a
- *    programmatic dispatch and a lost `pointer-events` rule both get past it;
- *  - the dialog locks on its OWN — `disabled` is not merely a static flag, it is
- *    also the form's `isSubmitting`, which flips to true while the dialog may
- *    already be open. At that moment the toggle is no longer the gate. So the
- *    editor is told (third `children` argument) and "Done" is disabled;
- *  - and `onCommit` is gated, because that is the single point where a value can
- *    leave this component for host state. Nothing native guards it: it is a
- *    click handler on a different control reading React state.
- *
- * "Cancel" and `Esc` stay live in every state — a dialog that goes disabled
- * mid-edit must still be closable, or a submit in flight traps the user in it.
- *
- * ## Why there is no `readonly` prop
- *
- * Both hosts early-return a read-only DISPLAY before they compute the affordance
- * (`TextAreaField.tsx`, `RichTextField.tsx`), so this component is never
- * rendered for a read-only field and a `readonly` prop here would be declared
- * with no producer — the shape this package keeps deleting (objectui#3232/#3233).
- * A future host that renders an editor for read-only fields must add the prop
- * AND the producer together; do not add it "for symmetry" beforehand.
- *
- * ## `testIdPrefix`
- *
- * Each host passes its own (`textarea`, `richtext`), yielding the same
- * convention with a per-widget namespace: `<prefix>-fullscreen-toggle` /
- * `-dialog` / `-save`. One form can contain both a textarea and a markdown
- * field, so a single shared id would make a test unable to say which widget it
- * had found. The editor's own test id belongs to `children` for the same
- * reason.
- *
- * ## Copy (objectui#3404)
- *
- * Every string here goes through `useFieldTranslation()` and consumes the
- * EXISTING `form.fullscreen.*` / `common.cancel` keys — the same ones the
- * built-in branch consumes since objectui#3272. Nothing was missing from the
- * ten locale packs; this path simply never read them, so a zh session opened a
- * dialog reading `Cancel` / `Done` while a long-text field rendered by the
- * built-in branch **in the same form** read 「取消 / 完成」.
- *
- * Sharing the keys rather than minting `fields.fullscreen.*` twins is the
- * point: one form-level setting (`mobile.fullscreenLongText`) projects onto
- * both render paths, so two copies of this copy could only drift.
- *
- * `useFieldTranslation` (not bare `useObjectTranslation`) because this widget
- * is rendered without an `I18nProvider` by standalone/embedded hosts and by
- * every bare-render test in this package. Measured before the change: with no
- * provider mounted `useObjectTranslation().t('common.cancel')` returns
- * `"common.cancel"` — the raw key — and the `{{label}}` interpolation collapses
- * entirely. The safe hook's English defaults are byte-identical to the literals
- * they replaced, so the provider-less rendering is unchanged.
- *
- * Focus management, `Esc`, the overlay and the close button are Radix's, via
- * the repo's `Dialog` (`@object-ui/components`) — deliberately not re-answered
- * here.
+ * The fullscreen-edit affordance shared by every long-text widget in this
+ * package (`field:textarea` → `TextAreaField`, `field:markdown` / `field:html`
+ * → `RichTextField`).
+ *
+ * ## This is now a thin wrapper (objectui#3398)
+ *
+ * The affordance, the dialog, the draft/commit state machine and the
+ * `readOnly` / `disabled` semantics all live in `FullscreenEditor`
+ * (`@object-ui/components`). They used to live here AND, separately, in the
+ * form renderer's built-in `textarea` branch — one form-level promise
+ * (`ObjectFormSchema.mobile.fullscreenLongText`, projected onto every long-text
+ * field as `mobile_fullscreen`) answered twice, on the two render paths.
+ *
+ * Two copies of a state machine drift, and these did: objectui#3400 measured a
+ * read-only field editable through the built-in branch's dialog, objectui#3402
+ * measured the same hole for `disabled` here, and #3393 (label in the dialog
+ * title) and #3272 (i18n) each landed on one side before the other. The
+ * maintainer's ruling of 2026-08-10 was one implementation hoisted to the
+ * dependency-legal side — and the measured import graph allows exactly that
+ * direction: this package depends on `@object-ui/components`, which declares no
+ * dependency on `@object-ui/fields` in `dependencies` or `peerDependencies`.
+ *
+ * ## Why the wrapper survives the merge rather than being deleted
+ *
+ * It carries the one thing that is genuinely about THIS package: `readOnly` is
+ * not part of the contract here. Both hosts early-return a read-only DISPLAY
+ * before they compute the affordance (`TextAreaField.tsx`, `RichTextField.tsx`),
+ * so a `readOnly` reaching this component would be a prop with no producer on
+ * this path — the shape this package keeps deleting (objectui#3232/#3233). The
+ * `Omit` below is that statement in the type system, and it is why the hoist did
+ * not simply re-export the primitive. A future host that renders an editor for
+ * read-only fields must widen this type AND pass the prop together; the
+ * primitive already answers it (no affordance at all).
+ *
+ * Everything else — `value` / `onCommit` / `label` / `testIdPrefix` /
+ * `disabled` / `children` / `footer` — passes straight through, so the hosts and
+ * their pins are unchanged. `testIdPrefix` still namespaces this package's ids
+ * (`textarea-`, `richtext-`), distinct from the built-in branch's
+ * `form-textarea-`, so a test can still say which render path it found.
  */
-export interface FullscreenFieldEditorProps {
-  /**
-   * The committed value. Seeds the draft each time the dialog opens — read at
-   * open time, not held, so a value that changes underneath while the dialog is
-   * closed is picked up on the next open.
-   */
-  value: string;
-  /** Called once with the draft when the user confirms. */
-  onCommit: (next: string) => void;
-  /** Field label — the dialog title and part of the toggle's accessible name. */
-  label?: string;
-  /** Namespace for this widget's fullscreen test ids. See above. */
-  testIdPrefix: string;
-  /**
-   * The host field is not interactive (objectui#3402). Disables the toggle, the
-   * "Done" button and the write-back, and is handed to `children` so the host's
-   * own editor renders disabled too. See the `disabled` section above for why
-   * each of those is a separate line rather than belt-and-braces.
-   *
-   * **Producer**: the widget's `disabled` prop, which the form renderer computes
-   * as `disabled || fieldDisabled || isSubmitting || optionGroupGated` and
-   * forwards to registered widgets (`stripRegisteredFieldProps` does not strip
-   * it).
-   */
-  disabled?: boolean;
-  /**
-   * The editor itself, rendered inside the dialog body against the draft. The
-   * host passes the SAME editor it renders inline, so "fullscreen" is a size
-   * change rather than a second, poorer editing surface.
-   *
-   * The third argument is this component's `disabled`, and the host is expected
-   * to put it on the control it renders: only the host knows which element its
-   * editor's disabled state belongs on. Ignoring it is not a write-back hole —
-   * `onCommit` is gated here regardless — but it does leave a control that looks
-   * editable while the field is not, so both in-repo hosts apply it and their
-   * tests pin it.
-   */
-  children: (
-    draft: string,
-    setDraft: (next: string) => void,
-    disabled: boolean,
-  ) => React.ReactNode;
-  /** Optional footer status for the draft (e.g. a character counter). */
-  footer?: (draft: string) => React.ReactNode;
-  /**
-   * Extra classes for the toggle button. It is absolutely positioned by
-   * default and expects a `relative` ancestor; a host whose layout has a
-   * better home for it can re-place it here.
-   */
-  toggleClassName?: string;
-}
-
-export function FullscreenFieldEditor({
-  value,
-  onCommit,
-  label,
-  testIdPrefix,
-  disabled = false,
-  children,
-  footer,
-  toggleClassName,
-}: FullscreenFieldEditorProps) {
-  const { t } = useFieldTranslation();
-  const [open, setOpen] = useState(false);
-  const [draft, setDraft] = useState(value ?? '');
-
-  const openFullscreen = () => {
-    if (disabled) return;
-    setDraft(value ?? '');
-    setOpen(true);
-  };
-  const cancelFullscreen = () => setOpen(false);
-  const commitFullscreen = () => {
-    // THE gate: the one point where a value leaves this component for host
-    // state. `disabled` can flip to true while this dialog is open (it carries
-    // the form's `isSubmitting`), so this is checked here and not only on the
-    // way in. Closing is unconditional — see "Cancel and Esc stay live" above.
-    if (!disabled) onCommit(draft);
-    setOpen(false);
-  };
-
-  return (
-    <>
-      <button
-        type="button"
-        onClick={openFullscreen}
-        disabled={disabled}
-        className={cn(
-          'absolute top-1.5 right-1.5 inline-flex items-center justify-center size-7 rounded-md bg-background/80 text-muted-foreground hover:text-foreground hover:bg-background border shadow-sm transition-colors',
-          'disabled:opacity-50 disabled:pointer-events-none',
-          toggleClassName,
-        )}
-        aria-label={t('form.fullscreen.toggle', {
-          label: label ?? t('form.fullscreen.textFallback'),
-        })}
-        data-testid={`${testIdPrefix}-fullscreen-toggle`}
-      >
-        <Maximize2 className="size-3.5" />
-      </button>
+export type FullscreenFieldEditorProps = Omit<FullscreenEditorProps, 'readOnly'>;
 
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent
-          className="sm:max-w-3xl h-[100dvh] sm:h-[80vh] max-h-[100dvh] sm:max-h-[80vh] flex flex-col p-0 gap-0"
-          data-testid={`${testIdPrefix}-fullscreen-dialog`}
-        >
-          <DialogHeader className="p-4 border-b">
-            <DialogTitle className="text-base">{label ?? t('form.fullscreen.title')}</DialogTitle>
-            {/*
-              Parity with the built-in branch (`form.tsx`), which has carried
-              this sr-only line since #3272. Without it Radix reports no
-              `descriptionPresent` and omits `aria-describedby` altogether, so
-              the registered path's dialog had no accessible description while
-              the identical built-in one did — and `form.fullscreen.description`
-              was a key with no consumer here. (The missing-Description console
-              warning older Radix versions emitted is NOT why: @radix-ui/react-dialog
-              1.1.23 contains no `console.*` call at all, verified before adding this.)
-            */}
-            <DialogDescription className="sr-only">
-              {t('form.fullscreen.description')}
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex-1 min-h-0 p-4">{children(draft, setDraft, disabled)}</div>
-          <DialogFooter className="p-3 border-t flex-row justify-between sm:justify-end gap-2">
-            {footer?.(draft)}
-            <div className="flex gap-2 ml-auto">
-              <Button type="button" variant="ghost" onClick={cancelFullscreen}>
-                <X className="size-4 mr-1" /> {t('common.cancel')}
-              </Button>
-              <Button
-                type="button"
-                onClick={commitFullscreen}
-                disabled={disabled}
-                data-testid={`${testIdPrefix}-fullscreen-save`}
-              >
-                <Check className="size-4 mr-1" /> {t('form.fullscreen.done')}
-              </Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
+export function FullscreenFieldEditor(props: FullscreenFieldEditorProps) {
+  // `readOnly` is deliberately not forwarded — it is not in the props type, and
+  // the primitive defaults it to false, which is the behaviour both hosts rely
+  // on: they have already returned a read-only display before reaching here.
+  return <FullscreenEditor {...props} />;
 }