# Mirror Original Custom-Field Controls — request

**Goal:** Make every original-language ACF control in the Edit Translation modal structurally and visually mirror its corresponding translated control at initial render while remaining read-only and excluded from save serialization.

## Context

The Custom Fields disclosure in `plugins/international-press-zone/admin/src/pages/content-translate.js` currently renders source values as bespoke display `<div>` elements and translated values through `TextareaControl()`. The element and style-system mismatch produces different heights, shapes, padding, native behavior, and responsive rendering.

The existing translated textarea is canonical. Preserve its pre-change geometry, computed styles, `min-height`, and `resize: vertical` behavior. Do not obtain equality by shrinking, normalizing, or disabling resizing on both sides.

The unchanged backend row shape is produced by `includes/Compatibility/ACFIntegration.php` and attached by `includes/API/TranslationsController.php`:

```text
{
  token,
  label,
  type,
  mode,
  source_value,
  target_value
}
```

## Files

- Modify `plugins/international-press-zone/admin/src/pages/content-translate.js:1688-1745` — render source and translated ACF groups through one closed, shared labeled-group seam.
- Modify `plugins/international-press-zone/admin/src/styles/pages/_translations.scss:338-407` — remove obsolete source-display geometry and generic read-only presentation that makes paired controls differ.
- Modify `plugins/international-press-zone/admin/tests/content-translate-accordions.test.js` — pin shared control structure, metadata isolation, accessibility, and unchanged serialization.
- Modify `plugins/international-press-zone/tests/e2e/translations-types-fields.spec.js:660-808` — add before/after geometry and computed-style parity coverage using explicit edge-case fixtures and screenshots.

Generated `plugins/international-press-zone/admin/dist/**` files are ephemeral build outputs and must not be committed or included in the task diff.

## Contract

### Shared labeled-group seam

Add a local seam in `content-translate.js` with this behavioral signature:

```text
buildAcfFieldGroup({
  side: "source" | "translation",
  field,
  value,
  direction,
  status
}): HTMLElement
```

The seam returns the complete labeled group. It does not accept an unrestricted attribute bag.

For both sides it must:

- Create the value control through the existing `TextareaControl()` component.
- Use identical neutral ACF/control classes, field-type sizing calculation, `rows`, value normalization, and side-provided language direction.
- Map `textarea` and `wysiwyg` to the existing multiline variant; map all other currently supported types to the existing single-line variant.
- Produce a real associated label and a distinct accessible name containing source/translation context.
- Associate each visible copy-mode description with the corresponding source or translated control through a unique description ID.

For `side: "source"` it must:

- Set the native textarea read-only without disabling it, preserving keyboard focus, text selection/copying, and scrolling.
- Emit zero `data-acf-token` and `data-acf-mode` attributes.
- Use the source control ID `ipz-ct-acf-${field.token}-source`.

For `side: "translation"` it must:

- Preserve the translated control ID exactly as `ipz-ct-acf-${field.token}`.
- Preserve the current copy/processing read-only rules.
- Emit exactly one translated control per field carrying the existing `data-acf-token` and `data-acf-mode` values.
- Preserve current input lifecycle, tab behavior, generation behavior, and payload collection.

The serializer contract remains:

- Select only translated controls whose mode is `translate`.
- Exclude copy-mode controls.
- Keep processing controls’ metadata intact while they remain read-only and Save remains unavailable.
- Emit the same payload as before this change for equivalent translated edits.

### Styling

- Keep universal modal textarea `min-height` and `resize` declarations unchanged and authoritative.
- Make the source textarea inherit the translated textarea’s current default geometry and full visual treatment.
- Remove obsolete `.ipz-ct-acf-value` display-box geometry when it has no remaining consumer.
- Prevent generic `[readonly]` rules from changing only one member’s background, color, font metrics, border, radius, shadow, padding, overflow, focus geometry, or dimensions.
- If copy/processing state requires communication, use the existing description/status treatment or a separate indicator; do not alter only one paired surface.
- Any ACF-specific selector must be narrowly scoped under `#ipz-modal-container`; do not use `!important` and do not override the canonical textarea `min-height` or `resize` behavior.
- Preserve the existing equal desktop columns and stacked layout at `max-width: 782px`.
- Use SCSS only; no inline or runtime-injected CSS.

## Behavior and edge cases

- Default paired geometry must match on initial render. Intentional user resizing after render may make an editable translated control diverge.
- Preserve the existing language-level `sourceDir` and `targetDir`; do not add content-based direction detection.
- Null or missing values use the existing safe string normalization.
- Unknown field types retain the current single-line fallback.
- Visible labels may repeat, but control and description IDs must remain unique within the mounted language panel.
- Empty values, long/wrapped text, LTR and RTL source/target pairs, `text`, `textarea`, `wysiwyg`, `link`, translate mode, copy mode, and processing state must retain paired initial geometry.
- Source controls remain focusable, readable, selectable, and non-saveable in light and dark mode.

## Out of scope

- PHP, REST, or ACF backend contract changes.
- Changes to field translatability or mode mapping.
- New field-specific editors.
- Modal/disclosure redesign.
- Global modal textarea geometry changes.
- Content-based direction detection.
- Committing generated `admin/dist/**` output.
- Unrelated refactoring.

## Acceptance

All build, unit, browser, screenshot, and Playwright work must run remotely through the project’s `/ipz-e2e` workflow on the registry-selected Debian host. No local fallback is permitted.

### Pre-fix visual proof

Before changing implementation, run the focused Playwright scenario against the current source and record:

- Source element is not a textarea while translated element is a textarea.
- Paired bounding boxes or computed styles differ.
- Canonical translated bounding-box heights and computed values, including `resize: vertical`.
- A before screenshot of the expanded Custom Fields disclosure.

Expected: the focused assertion fails specifically on source/translation structural or visual parity and preserves the recorded translated-control baseline for the post-fix comparison.

### Unit/component regression

Run the remote admin test command selected by the expert/project gate for `admin/tests/content-translate-accordions.test.js` plus existing `admin/tests/form-controls.test.js` and `admin/tests/textarea-lifecycle.test.js`.

Expected PASS:

- Both source and translated value elements are `TEXTAREA` controls created through the shared component contract.
- Source is read-only, keyboard-focusable, labeled with source context, and has no token/mode metadata.
- Each field has exactly one translated metadata-bearing control with its existing translated ID.
- Copy descriptions are uniquely and correctly associated.
- Only translated `mode="translate"` controls serialize; copy controls do not; payloads are unchanged.
- Existing disclosure, tab-state, editing, generation, and lifecycle assertions remain green.

### Focused browser regression

Run `tests/e2e/translations-types-fields.spec.js` through `/ipz-e2e` on Chromium and Firefox after the remote `cd admin && npm run build` verification.

Expected PASS at 375×667, 768×1024, and 1280×720 in light and dark mode:

- Every source and translated value element is `TEXTAREA`.
- Source is read-only; translated editability matches translate, copy, and processing state.
- Initial paired width and height are equal within a documented subpixel tolerance.
- Paired computed values match for `box-sizing`, padding, border width, border radius, line height, font family/size/weight, background, color, box shadow, min/max height, overflow, and `resize`.
- Default and keyboard-focus states preserve equal geometry and visible focus indication.
- The translated control’s recorded pre-fix heights and computed geometry remain unchanged, including `resize: vertical`.
- Fixtures explicitly exercise empty values, long/wrapped values, LTR and RTL, `text`, `textarea`, `wysiwyg`, `link`, translate mode, copy mode, and processing state.
- Zero source controls carry save metadata; exactly one translated control per field carries token/mode metadata.
- Saved/generated payloads remain unchanged.
- An after screenshot records the corrected disclosure.

### Release gates

Run every release gate required by `plugins/international-press-zone/.claude/agents/expert.md` and its selected skill documents through `/ipz-e2e`. Expected: all required gates pass, the final diff contains only authoritative source/test/document changes, and no `admin/dist/**` file is added or modified by the task.