@object-ui/fields 17.3.0 → 17.6.0

package/src/widgets/SignatureField.tsx

@@ -1,140 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { Button } from '@object-ui/components';
-import { Eraser } from 'lucide-react';
-import { FieldWidgetComponentProps } from './types';
-
-/**
- * Signature field widget - provides a signature pad for capturing signatures
- * Outputs signature as a base64 PNG image
- */
-export function SignatureField({ value, onChange, readonly }: FieldWidgetComponentProps<string>) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [isDrawing, setIsDrawing] = React.useState(false);
-  const [isEmpty, setIsEmpty] = React.useState(!value);
-
-  useEffect(() => {
-    if (value && canvasRef.current) {
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext('2d');
-      if (ctx) {
-        const img = new Image();
-        img.onload = () => {
-          ctx.drawImage(img, 0, 0);
-          setIsEmpty(false);
-        };
-        img.src = value;
-      }
-    }
-  }, [value]);
-
-  const startDrawing = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
-    if (readonly) return;
-    setIsDrawing(true);
-    setIsEmpty(false);
-    
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const rect = canvas.getBoundingClientRect();
-    const x = 'touches' in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
-    const y = 'touches' in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
-
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-  };
-
-  const draw = (e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>) => {
-    if (!isDrawing || readonly) return;
-
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const rect = canvas.getBoundingClientRect();
-    const x = 'touches' in e ? e.touches[0].clientX - rect.left : e.clientX - rect.left;
-    const y = 'touches' in e ? e.touches[0].clientY - rect.top : e.clientY - rect.top;
-
-    ctx.lineTo(x, y);
-    ctx.strokeStyle = '#000';
-    ctx.lineWidth = 2;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.stroke();
-  };
-
-  const stopDrawing = () => {
-    if (!isDrawing) return;
-    setIsDrawing(false);
-
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    // Save signature as base64 PNG
-    const dataUrl = canvas.toDataURL('image/png');
-    onChange(dataUrl);
-  };
-
-  const clearSignature = () => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    setIsEmpty(true);
-    onChange('');
-  };
-
-  if (readonly && value) {
-    return (
-      <div className="border rounded p-2 bg-white">
-        <img src={value} alt="Signature" loading="lazy" className="max-w-full h-auto" />
-      </div>
-    );
-  }
-
-  if (readonly && !value) {
-    return <span className="text-sm text-muted-foreground">No signature</span>;
-  }
-
-  return (
-    <div className="space-y-2">
-      <div className="border rounded bg-white">
-        <canvas
-          ref={canvasRef}
-          width={400}
-          height={200}
-          className="w-full touch-none cursor-crosshair"
-          onMouseDown={startDrawing}
-          onMouseMove={draw}
-          onMouseUp={stopDrawing}
-          onMouseLeave={stopDrawing}
-          onTouchStart={startDrawing}
-          onTouchMove={draw}
-          onTouchEnd={stopDrawing}
-        />
-      </div>
-      <div className="flex justify-between items-center">
-        <p className="text-xs text-muted-foreground">
-          {isEmpty ? 'Sign above' : 'Signature captured'}
-        </p>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={clearSignature}
-          disabled={readonly || isEmpty}
-        >
-          <Eraser className="w-4 h-4 mr-2" />
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/widgets/SliderField.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Slider } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-
-/**
- * Slider field widget - provides a range slider input
- * Supports numeric values with configurable min, max, and step
- */
-export function SliderField({ value, onChange, field, readonly, ...props }: FieldWidgetComponentProps<number>) {
-  // Get slider-specific configuration from field metadata
-  const sliderField = field as any;
-  const min = sliderField?.min ?? 0;
-  const max = sliderField?.max ?? 100;
-  const step = sliderField?.step ?? 1;
-
-  if (readonly) {
-    return (
-      <div className="flex items-center gap-2">
-        <span className="text-sm font-medium">{value ?? min}</span>
-        <span className="text-xs text-muted-foreground">/ {max}</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex items-center gap-4">
-      <Slider
-        value={[value ?? min]}
-        onValueChange={(values) => onChange(values[0])}
-        min={min}
-        max={max}
-        step={step}
-        disabled={readonly || props.disabled}
-        className={props.className}
-      />
-      <span className="text-sm font-medium w-12 text-right">{value ?? min}</span>
-    </div>
-  );
-}

package/src/widgets/SummaryField.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { EmptyValue } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-
-/**
- * SummaryField - Read-only aggregation field
- * Values are aggregated from related records and cannot be edited
- */
-export function SummaryField({ value, field, ...props }: FieldWidgetComponentProps<any>) {
-  const summaryField = field as any;
-  const summaryType = summaryField?.summary_type || 'count';
-
-  if (value == null) {
-    return <EmptyValue className={props.className} />;
-  }
-
-  let displayValue: string;
-  if (summaryType === 'count') {
-    displayValue = String(value);
-  } else if (['sum', 'avg', 'min', 'max'].includes(summaryType)) {
-    displayValue = typeof value === 'number' ? value.toFixed(2) : String(value);
-  } else {
-    displayValue = String(value);
-  }
-
-  return (
-    <span className={`text-sm font-medium tabular-nums text-gray-700 ${props.className || ''}`}>
-      {displayValue}
-    </span>
-  );
-}

package/src/widgets/TagsField.placeholder.no-provider.test.tsx

@@ -1,68 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * The tags widget's placeholder with NO `I18nProvider` mounted
- * (objectui#3342) — standalone/embedded usage, and every test in the repo
- * that renders a field widget bare.
- *
- * Routing the copy through `useFieldTranslation()` must not turn it into a
- * raw i18n key when nothing is configured: `createSafeTranslation` probes the
- * instance and falls back to its English defaults map. This is also where the
- * Commandment #-1 pin lives: the copy shipped FROM CODE (the no-provider
- * default) carries no CJK — Chinese exists only in the zh locale pack and can
- * only arrive through a provider.
- *
- * Why a separate FILE rather than another case in
- * `TagsField.placeholder.test.tsx`: mounting `I18nProvider` calls
- * `initReactI18next`, which installs that instance as react-i18next's GLOBAL
- * default. Once any sibling test has done so there is no "no provider" state
- * left to observe in that module graph. Vitest's per-file isolation is what
- * makes this file's observation honest (same split as
- * `OptionsEmptyState.no-provider.test.tsx`).
- */
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { TagsField } from './TagsField';
-
-function renderTags(field: Record<string, unknown>) {
-  return render(
-    <TagsField
-      value={[]}
-      onChange={vi.fn()}
-      field={field as any}
-      {...({ name: 'labels' } as any)}
-    />,
-  );
-}
-
-const input = () => screen.getByRole('textbox');
-
-describe('TagsField placeholder — English fallback survives with no i18n configured', () => {
-  it('renders the English default, not a raw key', () => {
-    renderTags({ name: 'labels', type: 'tags' });
-    expect(input()).toHaveAttribute('placeholder', 'Type and press Enter to add…');
-    expect(input().getAttribute('placeholder')).not.toContain('fields.tags');
-  });
-
-  it('the code-shipped default carries no CJK (Commandment #-1)', () => {
-    renderTags({ name: 'labels', type: 'tags' });
-    // With no provider mounted, whatever renders here came from CODE
-    // (FIELD_DEFAULTS) — the commandment pin: no Chinese in the codebase.
-    // Escaped ranges on purpose: a literal CJK class would itself violate
-    // the commandment this test enforces (same shape as objectui#3321's pin).
-    expect(input().getAttribute('placeholder')).not.toMatch(/[\u3000-\u30ff\u4e00-\u9fff]/);
-  });
-
-  it('the author-declared field.placeholder still wins without a provider', () => {
-    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' });
-    expect(input()).toHaveAttribute('placeholder', 'Add product labels');
-  });
-});

package/src/widgets/TagsField.placeholder.test.tsx

@@ -1,95 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * The tags widget's input placeholder (objectui#3342).
- *
- * It used to be a hardcoded Chinese literal in code — a double violation:
- * Commandment #-1 (English-only codebase) AND a bypass of the i18n channel the
- * sibling widgets already use. The pinned resolution chain is:
- *
- *   1. `field.placeholder` — the field author's declaration always wins;
- *   2. `t('fields.tags.placeholder')` — the widget's own copy, from the
- *      locale packs via `useFieldTranslation()`;
- *   3. the English default in FIELD_DEFAULTS when no I18nProvider is mounted
- *      (that leg lives in `TagsField.placeholder.no-provider.test.tsx` — see
- *      its header for why it must be a separate file).
- *
- * Chinese now lives in the zh locale pack only, which is what the zh-locale
- * case below observes end-to-end.
- */
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { I18nProvider } from '@object-ui/i18n';
-import { TagsField } from './TagsField';
-
-function renderTags(
-  field: Record<string, unknown>,
-  { value = [] as string[], language }: { value?: string[]; language?: string } = {},
-) {
-  const element = (
-    <TagsField
-      value={value}
-      onChange={vi.fn()}
-      field={field as any}
-      {...({ name: 'labels' } as any)}
-    />
-  );
-  return render(
-    language ? (
-      <I18nProvider config={{ defaultLanguage: language, detectBrowserLanguage: false }}>
-        {element}
-      </I18nProvider>
-    ) : (
-      element
-    ),
-  );
-}
-
-const input = () => screen.getByRole('textbox');
-
-describe('TagsField placeholder — author declaration beats the widget copy (objectui#3342)', () => {
-  it('renders the author-declared field.placeholder', () => {
-    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' }, { language: 'en' });
-    expect(input()).toHaveAttribute('placeholder', 'Add product labels');
-  });
-
-  it('the author declaration wins even under a non-English locale', () => {
-    // The author's copy is theirs verbatim — a locale switch must not
-    // overwrite an explicit declaration with the widget's own translation.
-    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' }, { language: 'zh' });
-    expect(input()).toHaveAttribute('placeholder', 'Add product labels');
-    expect(input().getAttribute('placeholder')).not.toContain('输入后回车添加');
-  });
-});
-
-describe('TagsField placeholder — undeclared falls back to the translated key', () => {
-  it('renders the en pack copy under the en locale', () => {
-    renderTags({ name: 'labels', type: 'tags' }, { language: 'en' });
-    expect(input()).toHaveAttribute('placeholder', 'Type and press Enter to add…');
-  });
-
-  it('renders the zh pack copy under the zh locale — Chinese comes from the pack, not code', () => {
-    renderTags({ name: 'labels', type: 'tags' }, { language: 'zh' });
-    expect(input()).toHaveAttribute('placeholder', '输入后回车添加…');
-    // …and never the raw key.
-    expect(input().getAttribute('placeholder')).not.toContain('fields.tags');
-  });
-});
-
-describe('TagsField placeholder — shown only while the tag list is empty', () => {
-  it('is empty once a tag exists (the input is a continuation strip)', () => {
-    renderTags({ name: 'labels', type: 'tags', placeholder: 'Add product labels' }, {
-      value: ['alpha'],
-      language: 'en',
-    });
-    expect(input()).toHaveAttribute('placeholder', '');
-  });
-});

package/src/widgets/TagsField.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { Badge, Input, EmptyValue, cn } from '@object-ui/components';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-import { useFieldTranslation } from './useFieldTranslation';
-
-/**
- * TagsField - free-form list of string tags. Type a value and press Enter (or
- * comma) to add it; click a tag's × to remove it. The stored value is a
- * string[]. Used for the `tags` field type.
- */
-export function TagsField({ value, onChange, field, readonly, className, error, ...props }: FieldWidgetComponentProps<string[]>) {
-  const tags: string[] = Array.isArray(value) ? value : value == null ? [] : [value as unknown as string];
-  const [draft, setDraft] = React.useState('');
-  // Unconditional hook call (rules-of-hooks): before the readonly early return.
-  const { t } = useFieldTranslation();
-
-  if (readonly) {
-    if (tags.length === 0) return <EmptyValue />;
-    return (
-      <div className="flex flex-wrap gap-1">
-        {tags.map((t) => <Badge key={t} variant="secondary">{t}</Badge>)}
-      </div>
-    );
-  }
-
-  const addTag = (raw: string) => {
-    const t = raw.trim();
-    if (!t || tags.includes(t)) return;
-    onChange([...tags, t]);
-    setDraft('');
-  };
-
-  const removeTag = (t: string) => onChange(tags.filter((x) => x !== t));
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' || e.key === ',') {
-      e.preventDefault();
-      addTag(draft);
-    } else if (e.key === 'Backspace' && draft === '' && tags.length > 0) {
-      removeTag(tags[tags.length - 1]);
-    }
-  };
-
-  return (
-    <div className={cn('flex flex-wrap items-center gap-1.5 rounded-md border border-input bg-background p-1.5', className)}>
-      {tags.map((t) => (
-        <Badge key={t} variant="secondary" className="gap-1">
-          {t}
-          <button
-            type="button"
-            onClick={() => removeTag(t)}
-            className="ml-0.5 rounded-full text-muted-foreground hover:text-foreground"
-            aria-label={`Remove ${t}`}
-          >
-            ×
-          </button>
-        </Badge>
-      ))}
-      <Input
-        // DOM pass-through onto the real focusable control (objectui#3318):
-        // the whitelist spread carries the form renderer's id /
-        // aria-describedby to the input the user actually types in.
-        {...toDomProps(props)}
-        value={draft}
-        onChange={(e) => setDraft(e.target.value)}
-        onKeyDown={onKeyDown}
-        onBlur={() => addTag(draft)}
-        disabled={props.disabled}
-        // Placeholder chain (objectui#3342): the author-declared
-        // `field.placeholder` wins; otherwise the widget's own copy arrives
-        // via `useFieldTranslation()` — `fields.tags.placeholder` in the
-        // locale packs, English default from FIELD_DEFAULTS when no
-        // I18nProvider is mounted. This used to be a hardcoded Chinese
-        // literal (Commandment #-1); Chinese now lives in the zh pack only.
-        // Shown only while the list is empty — once a tag exists the input is
-        // a small continuation strip and the hint would be noise.
-        placeholder={tags.length === 0 ? field?.placeholder || t('fields.tags.placeholder') : ''}
-        className="h-7 flex-1 border-0 bg-transparent p-0 px-1 shadow-none focus-visible:ring-0 min-w-[8ch]"
-        // AFTER the spread so this widget's own computation wins (the #3222
-        // discipline): `error` is the published validation slot, and
-        // `!!undefined` yields an explicit "false" — a valid field SAYS it is
-        // valid rather than staying mute.
-        aria-invalid={!!error}
-      />
-    </div>
-  );
-}

package/src/widgets/TextAreaField.tsx

@@ -1,213 +0,0 @@
-import React, { useId } from 'react';
-import { Textarea, EmptyValue } from '@object-ui/components';
-import { CharacterCount } from './CharacterCount';
-import { FullscreenFieldEditor } from './FullscreenFieldEditor';
-import { FieldWidgetComponentProps } from './types';
-import { toDomProps } from './toDomProps';
-
-/**
- * TextAreaField - Multi-line text input widget
- * Supports configurable row count and preserves whitespace in readonly mode.
- *
- * Mobile UX (round 3): when the FIELD METADATA carries `mobile_fullscreen:
- * true`, an "expand" affordance opens a fullscreen edit dialog — much easier
- * on phones than tapping a 4-row textarea trapped between other fields.
- *
- * That flag has exactly one producer: `ObjectForm` stamps it onto every
- * long-text field when `ObjectFormSchema.mobile.fullscreenLongText` is set
- * (`plugin-form/src/ObjectForm.tsx`). It reaches this widget on `field` — the
- * single metadata carrier since objectui#3233. A `SchemaRenderer`-hosted node
- * arrives there too: the registry adapter (`withFieldCarrier`) maps the SDUI
- * `schema` node onto `field` before the widget sees it.
- *
- * The affordance, the dialog and the draft/commit semantics live in the shared
- * `FullscreenFieldEditor` — the same producer stamps the same flag on
- * rich-text fields, and `RichTextField` renders it from there too
- * (objectui#3301). Only the EDITOR differs per widget; here it is a
- * full-height `Textarea`.
- *
- * There is deliberately NO widget-prop override. A `mobileFullscreen`
- * (camelCase) prop was read here and written by nobody in the repo, and the
- * snake_case `mobile_fullscreen` prop cannot arrive either: the form renderer
- * strips both `mobile_fullscreen` and `fullscreen` from the props it forwards
- * to registered widgets (`stripRegisteredFieldProps` in
- * `components/src/renderers/form/form.tsx`). Reading keys nobody produces
- * documented a contract that never held and invited the next author to pass a
- * silently-ignored prop, so the reads are gone (objectui#3232). If a host
- * override is ever genuinely needed, declare ONE key on
- * `FieldWidgetComponentProps`, stop stripping it, and have a host pass it.
- *
- * ## The character counter (objectui#3408, shared across surfaces in #3417)
- *
- * Both editing surfaces below — the inline `<Textarea>` and the fullscreen
- * dialog's — render the SAME `CharacterCount`, which owns the three-node
- * GOV.UK shape (decorative digits / accessible description / gated status
- * region) and the debounce and threshold behind it. Until #3417 the fullscreen
- * footer had its own hand-written copy that was digits and nothing else, which
- * is what a second copy of a UI always costs: it drifts, and nothing reports
- * the drift.
- *
- * This widget's remaining job is the part only it can do — mint the two
- * description ids and name each one in the `aria-describedby` of the control
- * it describes. The surfaces differ in exactly one behaviour, and it is
- * declared rather than implied: `announceNearLimit`. Inline announces
- * (unchanged since #3408); the fullscreen dialog does not.
- */
-
-export function TextAreaField({ value, onChange, field, readonly, error, ...props }: FieldWidgetComponentProps<string>) {
-  // `useId` sits above the `readonly` early return because a hook may not sit
-  // behind a conditional return: the readonly branch renders no counter, so
-  // the ids go unused there, but moving the call down would desync hook order
-  // the moment a field toggles readonly. `maxLength` is derived here for the
-  // same reason the ids are — proximity to the hook, not because the readonly
-  // branch wants it.
-  const textareaField = field as any;
-  // Spec FieldSchema declares camelCase `maxLength`; `max_length` is the legacy
-  // objectui spelling. Dual-read (framework#1878 §3 recheck) — without this a
-  // spec-authored maxLength gave neither the textarea cap nor the counter.
-  const maxLength = textareaField?.maxLength ?? textareaField?.max_length;
-
-  /**
-   * Two description ids off one `useId()` — one per editing surface.
-   *
-   * They cannot be a single id. The dialog edits a LOCAL draft (see
-   * `FullscreenFieldEditor`), so the moment the user types in it the two
-   * surfaces are counting different strings; one shared id would point both
-   * textareas at whichever sentence rendered last. Both derive from the widget
-   * instance, so two textareas on one form never collide either.
-   */
-  const instanceId = useId();
-  const descriptionId = `${instanceId}-charcount`;
-  const fullscreenDescriptionId = `${instanceId}-fullscreen-charcount`;
-
-  if (readonly) {
-    return (
-      <div className="text-sm whitespace-pre-wrap">
-        {value || <EmptyValue />}
-      </div>
-    );
-  }
-
-  const rows = textareaField?.rows || 4;
-  // Mobile fullscreen opt-in travels on the field metadata and nowhere else.
-  // That metadata has exactly one carrier (`field`, objectui#3233), so this is
-  // a single read — a misspelled flag has no read path to quietly catch it.
-  const showFullscreenButton = Boolean(textareaField?.mobile_fullscreen);
-
-  const domProps = toDomProps(props);
-  // Resolved once and given to BOTH editing surfaces (objectui#3402). It used
-  // to reach the inline `<Textarea>` alone, so a disabled field greyed out
-  // correctly while its expand button stayed live and the dialog wrote the edit
-  // straight back through `onCommit`. `disabled` also carries the form's
-  // `isSubmitting`, so that hole was open for the duration of every submit.
-  const disabled = Boolean(domProps.disabled);
-
-  // APPENDED, never assigned (objectui#3408). `<FormControl>` is a Radix Slot
-  // and already hands the control an `aria-describedby` naming the field's
-  // description and error message; it arrives here through `toDomProps`'
-  // `aria-*` pass-through. Overwriting it would trade "no cap announced" for
-  // "no error announced" — a strictly worse bug, and a silent one.
-  const describedBy =
-    [domProps['aria-describedby'], maxLength ? descriptionId : undefined]
-      .filter(Boolean)
-      .join(' ') || undefined;
-
-  return (
-    <div className="relative">
-      <Textarea
-        {...domProps}
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={textareaField?.placeholder}
-        disabled={readonly || disabled}
-        rows={rows}
-        maxLength={maxLength}
-        aria-invalid={!!error}
-        // After the spread so the composed value wins over the raw host one.
-        aria-describedby={describedBy}
-        className={domProps.className}
-      />
-      {maxLength && (
-        /*
-          The INLINE surface's counter. `announceNearLimit` because this is the
-          surface the user types into with the rest of the form around them —
-          the near-limit warning is the one thing worth interrupting for, and
-          it is threshold-gated and debounced so it interrupts about five times
-          over a run that fills a 500-character cap rather than 52.
-        */
-        <CharacterCount
-          length={(value || '').length}
-          maxLength={maxLength}
-          descriptionId={descriptionId}
-          announceNearLimit
-          className="absolute bottom-2 right-2 text-xs text-gray-400"
-          testId="textarea-character-count"
-        />
-      )}
-
-      {showFullscreenButton && (
-        <FullscreenFieldEditor
-          value={value ?? ''}
-          onCommit={onChange}
-          label={textareaField?.label}
-          testIdPrefix="textarea"
-          disabled={disabled}
-          /*
-            The FULLSCREEN surface's counter (objectui#3417). This slot used to
-            render a bare `{n}/{max}` span: no accessible name, no association
-            with the dialog's textarea, nothing `aria-live`. A screen reader
-            heard "5 slash 500" if browse mode happened to sweep it and not one
-            word while the input had focus — the same field, the same cap, and
-            the inline surface three nodes richer since objectui#3408.
-
-            `announceNearLimit={false}` is the ruling on #3417, and it is a
-            choice about this SURFACE rather than a saving on effort: a
-            fullscreen modal is opened deliberately to write at length, the
-            description below already delivers the cap on focus, and the
-            dialog's textarea carries the same native `maxLength` stop. Adding
-            a second live region inside a modal would also put two of them in
-            one document, since the inline one stays mounted behind the overlay.
-          */
-          footer={(draft) =>
-            maxLength ? (
-              <CharacterCount
-                length={draft.length}
-                maxLength={maxLength}
-                descriptionId={fullscreenDescriptionId}
-                announceNearLimit={false}
-                className="text-xs text-muted-foreground self-center"
-                testId="textarea-fullscreen-character-count"
-              />
-            ) : null
-          }
-        >
-          {(draft, setDraft, editorDisabled) => (
-            <Textarea
-              autoFocus
-              value={draft}
-              onChange={(e) => setDraft(e.target.value)}
-              disabled={editorDisabled}
-              maxLength={maxLength}
-              placeholder={textareaField?.placeholder}
-              /*
-                Assigned, not appended — and that is a statement about THIS
-                element, not a relaxation of the rule above. The inline control
-                composes because `<FormControl>` hands it an `aria-describedby`
-                through `domProps`; this one is constructed here from scratch,
-                `domProps` never reaches it, and the ids the host would have
-                supplied name nodes OUTSIDE the dialog, which Radix `aria-hidden`s
-                while the modal is open. There is nothing to preserve. Should
-                this editor ever be given host-supplied ids, compose them the
-                way `describedBy` above does rather than adding a second
-                assignment.
-              */
-              aria-describedby={maxLength ? fullscreenDescriptionId : undefined}
-              className="h-full min-h-full resize-none text-base"
-              data-testid="textarea-fullscreen-input"
-            />
-          )}
-        </FullscreenFieldEditor>
-      )}
-    </div>
-  );
-}