@capillarytech/creatives-library 9.0.61 → 9.0.63-alpha.0

package/v2Components/FormBuilder/Functional/core/schema/initializeFormState.js

@@ -1,24 +1,22 @@
 /**
- * initializeFormState — pure walk of a layout schema that seeds default field
- * values into the normalized state (the V3 equivalent of the class component's
- * initializeStandAloneSections / initializeMultiColSection family).
+ * initializeFormState — pure schema walk that seeds default field values into
+ * the normalized state (Classic's initialize* family). `standalone` fields seed
+ * into `root`; each tabs-container pane seeds its own tab (every pane gets a
+ * tab, even `isSupported: false` — visibility is render-time, like Classic).
+ * `onlyDisplay` fields are not seeded. Defaults: checkbox => false, else the
+ * schema `value` or ''.
  *
- * Scope (Phase 1): SMS — a single-tab, standalone-only schema. Fields marked
- * `standalone: true` seed into `root`; all other data fields seed into tab 0.
- * `onlyDisplay` fields (buttons, preview, counter, tag-list) are NOT seeded —
- * they are non-data UI controls. Defaults match the class component: checkbox
- * => false; otherwise the schema's `value` if defined, else ''.
- *
- * NOTE: tab/version/language seeding is intentionally out of scope here — those
- * arrive with MobilePush (tabs) and Email (versions/languages). Parity of the
- * seeded shape against the monolith is asserted in PR3 against real fixtures.
+ * reconcileFormState (below) is the schema-CHANGE counterpart for the runtime
+ * schema mutations (CTA splices, text<->image swap).
  */
 
 import {
   createInitialState,
   emptyLiquidErrors,
 } from '../store/formReducer';
-import { SECTION_TYPE, FIELD_TYPE } from '../../constants';
+import {
+  SECTION_TYPE, CONTAINER_TYPE, FIELD_TYPE, TEMPLATE_NAME_FIELD,
+} from '../../constants';
 
 const defaultValueFor = (field) => {
   if (field.type === FIELD_TYPE.CHECKBOX) return false;
@@ -47,14 +45,85 @@ const visitSectionFields = (section, visit) => {
   }
 };
 
+/** The 'tabs' container of a schema, or null (single-tab channels). */
+const getTabsContainer = (schema) => (schema?.containers || []).find(
+  (container) => container?.type === CONTAINER_TYPE.TABS
+    && (container.isActive === undefined || container.isActive),
+) || null;
+
+/** Visit every data field of a schema, reporting the tab it belongs to (null => root). */
+const visitSchemaFields = (schema, visit) => {
+  const visitInto = (section, tabIndex) => visitSectionFields(section, (field) => {
+    if (!isDataField(field)) return;
+    visit(field, field.standalone ? null : tabIndex);
+  });
+
+  (schema?.standalone?.sections || []).forEach((section) => visitInto(section, 0));
+
+  const tabsContainer = getTabsContainer(schema);
+  (tabsContainer?.panes || []).forEach((pane, paneIndex) => {
+    (pane?.sections || []).forEach((section) => visitInto(section, paneIndex));
+    (pane?.sectionsHeaders || []).forEach((section) => visitInto(section, paneIndex));
+  });
+};
+
 let autoId = 0;
 const defaultGenerateId = () => {
   autoId += 1;
   return `fb-${autoId}`;
 };
 
+// Classic's `this.formElements` KEEP set for the formData prune (Classic.js:1879-1898):
+// one flat set across standalone sections + every pane's `sections` (not headers).
+// Per-type quirks ported as-is: multicols collects inputFields cols only when NOT
+// onlyDisplay (skips tagList-); col-label collects inputFields even when onlyDisplay
+// (skips template-label-/tagList-); actionFields are never collected.
+const collectFormElements = (schema) => {
+  const keep = new Set();
+  const visitSection = (section) => {
+    if (!section) return;
+    switch (section.type) {
+      case SECTION_TYPE.PARENT:
+        (section.childSections || []).forEach(visitSection);
+        break;
+      case SECTION_TYPE.MULTICOLS:
+        (section.inputFields || []).forEach((row) => (row?.cols || []).forEach((col) => {
+          if (col?.id && !col.onlyDisplay && col.id.indexOf('tagList-') === -1) keep.add(col.id);
+        }));
+        break;
+      case SECTION_TYPE.COL_LABEL:
+        (section.inputFields || []).forEach((field) => {
+          if (field?.id && field.id.indexOf('template-label-') === -1 && field.id.indexOf('tagList-') === -1) {
+            keep.add(field.id);
+          }
+        });
+        break;
+      default:
+        break;
+    }
+  };
+  (schema?.standalone?.sections || []).forEach(visitSection);
+  (getTabsContainer(schema)?.panes || []).forEach((pane) => {
+    (pane?.sections || []).forEach(visitSection);
+  });
+  return keep;
+};
+
+// Tab keys Classic's prune never deletes (Classic.js:1893); tabKey/base live
+// outside `fields` in the normalized shape.
+const TAB_PRUNE_EXCEPTIONS = new Set(['name', 'imagePreview', 'image']);
+
+/** Copy of `source` keeping only formElements ids + the prune exceptions. */
+const pruneToFormElements = (source, formElements) => {
+  const kept = {};
+  Object.keys(source || {}).forEach((key) => {
+    if (formElements.has(key) || TAB_PRUNE_EXCEPTIONS.has(key)) kept[key] = source[key];
+  });
+  return kept;
+};
+
 /**
- * @param {object} schema  the layout `definition` (with `.channel`, `.standalone`, …)
+ * @param {object} schema  the layout `definition` (with `.channel`, `.standalone`, `.containers`, …)
  * @param {object} [opts]
  * @param {() => string} [opts.generateId]  tab-key generator (injectable for tests)
  * @returns normalized state with defaults seeded
@@ -63,23 +132,101 @@ export default function initializeFormState(schema = {}, opts = {}) {
   const generateId = opts.generateId || defaultGenerateId;
   const channel = schema.channel || null;
 
+  const tabsContainer = getTabsContainer(schema);
+  const tabCount = Math.max(tabsContainer?.panes?.length || 0, 1);
+
   const state = createInitialState(channel);
-  // SMS uses exactly one tab (index 0), marked base.
-  const tab0 = { fields: {}, base: true, tabKey: generateId() };
-  state.tabs = [tab0];
-  state.errors = { root: {}, tabs: [{}] };
+  // Tab 0 is always the base tab (formData[0].base === true in the legacy dialect).
+  state.tabs = Array.from({ length: tabCount }, (unused, index) => ({
+    fields: {},
+    ...(index === 0 ? { base: true } : {}),
+    tabKey: generateId(),
+  }));
+  state.errors = { root: {}, tabs: state.tabs.map(() => ({})) };
   state.validity = { isFormValid: false, liquidErrorMessage: emptyLiquidErrors() };
 
-  // Seed each leaf field's default in a single walk: standalone fields go to `root`,
-  // the rest to tab 0. onlyDisplay (non-data) fields are skipped.
-  const seedField = (field) => {
-    if (!isDataField(field)) return;
-    const target = field.standalone ? state.root : tab0.fields;
-    if (target[field.id] === undefined) target[field.id] = defaultValueFor(field);
-  };
-
-  const sections = schema.standalone?.sections;
-  if (sections) sections.forEach((section) => visitSectionFields(section, seedField));
+  visitSchemaFields(schema, (field, tabIndex) => {
+    const target = tabIndex == null ? state.root : state.tabs[tabIndex]?.fields;
+    if (target && target[field.id] === undefined) target[field.id] = defaultValueFor(field);
+  });
 
   return state;
 }
+
+/**
+ * reconcileFormState — apply a CHANGED schema to an existing state without losing
+ * user input (Classic's `initialiseForm(schema, false, resetTabKeys=false)`).
+ *
+ * - Seeds newly-appeared fields; keeps every existing value, tabKey, active tab.
+ * - PRUNES fields whose schema rows departed, exactly like Classic (1889-1897):
+ *   required for the CTA flows — a Deeplink <-> External Link radio switch
+ *   replaces the select row with a text row, and the orphaned seeded-'' key
+ *   would otherwise fail validation ("Validation failed for android").
+ * - Root: non-object keys not in the walk are pruned; `template-name` restored
+ *   (Classic.js:1900-1904). Errors follow the field lifecycle (pruned fields
+ *   lose flags, new fields seed `false` — validation needs pre-existing maps).
+ *
+ * Pure: returns a new state; dispatch it via hydrate()/reconcileSchema().
+ */
+export const reconcileFormState = (state, schema = {}, opts = {}) => {
+  const generateId = opts.generateId || defaultGenerateId;
+  if (!state) return initializeFormState(schema, opts);
+
+  const tabsContainer = getTabsContainer(schema);
+  const tabCount = Math.max(tabsContainer?.panes?.length || 0, state.tabs?.length || 0, 1);
+
+  // Collect the schema's current data-field ids per slot.
+  const rootIds = new Set();
+  const tabIds = Array.from({ length: tabCount }, () => new Map());
+  visitSchemaFields(schema, (field, tabIndex) => {
+    if (tabIndex == null) rootIds.add(field.id);
+    else if (tabIds[tabIndex]) tabIds[tabIndex].set(field.id, field);
+  });
+
+  // Root: keep schema-known + object-valued keys, seed new ones, restore template-name.
+  const nextRoot = {};
+  Object.keys(state.root || {}).forEach((key) => {
+    const value = state.root[key];
+    const isObjectValue = value !== null && typeof value === 'object';
+    if (rootIds.has(key) || isObjectValue || key === TEMPLATE_NAME_FIELD) nextRoot[key] = value;
+  });
+  visitSchemaFields(schema, (field, tabIndex) => {
+    if (tabIndex == null && nextRoot[field.id] === undefined) nextRoot[field.id] = defaultValueFor(field);
+  });
+
+  // Tabs: prune schema-departed fields, seed new ones, extend to new panes.
+  // Seeds are ALSO filtered by the keep-set: Classic seeds then prunes, so an id
+  // excluded from formElements (tagList-*, template-label-*) never survives a re-init.
+  const formElements = collectFormElements(schema);
+  const nextTabs = Array.from({ length: tabCount }, (unused, index) => {
+    const existing = state.tabs?.[index];
+    const fields = pruneToFormElements(existing?.fields, formElements);
+    tabIds[index]?.forEach((field, fieldId) => {
+      if (fields[fieldId] === undefined && formElements.has(fieldId)) fields[fieldId] = defaultValueFor(field);
+    });
+    return {
+      fields,
+      ...(existing?.base || index === 0 ? { base: true } : {}),
+      tabKey: existing?.tabKey !== undefined ? existing.tabKey : generateId(),
+      ...(existing?.name !== undefined ? { name: existing.name } : {}),
+    };
+  });
+
+  // Errors mirror the field lifecycle: pruned fields lose their flags, new ones seed false.
+  const prevTabErrors = state.errors?.tabs || [];
+  const nextTabErrors = Array.from({ length: tabCount }, (unused, index) => {
+    const seeded = pruneToFormElements(prevTabErrors[index], formElements);
+    tabIds[index]?.forEach((unusedField, fieldId) => {
+      if (seeded[fieldId] === undefined) seeded[fieldId] = false;
+    });
+    return seeded;
+  });
+
+  return {
+    ...state,
+    meta: { ...state.meta, channel: schema.channel || state.meta?.channel || null },
+    root: nextRoot,
+    tabs: nextTabs,
+    errors: { root: { ...(state.errors?.root || {}) }, tabs: nextTabErrors },
+  };
+};

package/v2Components/FormBuilder/Functional/core/store/formReducer.js

@@ -6,13 +6,27 @@ export const ActionTypes = {
   HYDRATE: 'fb/HYDRATE',
   FIELD_CHANGED: 'fb/FIELD_CHANGED',
   VALIDATION_RESULT: 'fb/VALIDATION_RESULT',
+  SET_ACTIVE_TAB: 'fb/SET_ACTIVE_TAB',
+  RECONCILE_SCHEMA: 'fb/RECONCILE_SCHEMA',
 };
 
 export const emptyLiquidErrors = () => ({ STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] });
 
+// Fresh tab keys for hydrated states that arrive without them (Classic parity:
+// resetTabKeys assigns _.uniqueId() keys on every edit/parent push, Classic.js:453-461).
+let hydrateTabKeySeq = 0;
+const nextHydrateTabKey = () => {
+  hydrateTabKeySeq += 1;
+  return `fb-tab-${hydrateTabKeySeq}`;
+};
+
+const hasTabKey = (key) => key !== undefined && key !== '';
+
 /** Build a clean initial normalized state for a channel (no fields seeded). */
 export const createInitialState = (channel = null) => ({
-  meta: { channel, baseTabIndex: 0 },
+  // activeTabIndex is 0-based (Android=0, iOS=1 for MOBILEPUSH). The legacy
+  // `currentTab` the containers see is 1-based — converted at the shell boundary.
+  meta: { channel, baseTabIndex: 0, activeTabIndex: 0 },
   root: {},
   tabs: [],
   errors: { root: {}, tabs: [] },
@@ -29,7 +43,7 @@ export const hydrate = (state) => ({ type: ActionTypes.HYDRATE, state });
  * otherwise it targets tabs[tabIndex].fields.
  */
 export const fieldChanged = ({ fieldId, value, tabIndex = null }) => ({
-  type: ActionTypes?.FIELD_CHANGED,
+  type: ActionTypes.FIELD_CHANGED,
   fieldId,
   value,
   tabIndex,
@@ -43,20 +57,75 @@ export const validationResult = ({ errors, isFormValid, liquidErrorMessage }) =>
   liquidErrorMessage,
 });
 
+/** Switch the active tab (0-based). No-op (identity preserved) when unchanged or out of range. */
+export const setActiveTab = (tabIndex) => ({ type: ActionTypes.SET_ACTIVE_TAB, tabIndex });
+
+/**
+ * Reconcile the current state onto a mutated schema (CTA splices, text<->image
+ * swap). Runs INSIDE the reducer: a shell-side `stateRef` snapshot can be stale
+ * when a container setState cascade commits before a prior dispatch renders
+ * (it clobbered edit-template hydration). The reconciler travels in the action
+ * because the schema module imports from this file (circular otherwise).
+ */
+export const reconcileSchema = (schema, reconciler) => ({
+  type: ActionTypes.RECONCILE_SCHEMA,
+  schema,
+  reconciler,
+});
+
 // ---- reducer -----------------------------------------------------------------
 
 export default function formReducer(state, action) {
   switch (action?.type) {
-    case ActionTypes.HYDRATE:
-      return action?.state || state;
+    case ActionTypes.HYDRATE: {
+      const next = action?.state;
+      if (!next) return state;
+      // CapTab panes are keyed by tabKey — a key-less hydrate (Edit's setEditState
+      // pushes tabs without keys) would leave no pane active. Preserve the existing
+      // key at the same position, else assign a fresh one (Classic: resetTabKeys).
+      let tabs = next?.tabs;
+      if (Array.isArray(tabs) && tabs.some((tab) => tab && !hasTabKey(tab.tabKey))) {
+        tabs = tabs.map((tab, index) => {
+          if (!tab || hasTabKey(tab.tabKey)) return tab;
+          const prevKey = state?.tabs?.[index]?.tabKey;
+          return { ...tab, tabKey: hasTabKey(prevKey) ? prevKey : nextHydrateTabKey() };
+        });
+      }
+      const hydrated = tabs === next?.tabs ? next : { ...next, tabs };
+      // A hydrate replaces the data tree but must not lose UI position: an edit-load
+      // or parent push while the user sits on the iOS tab keeps them there. States
+      // built by fromLegacy/initializeFormState carry activeTabIndex 0 by default.
+      const prevActive = state?.meta?.activeTabIndex ?? 0;
+      const nextActive = hydrated?.meta?.activeTabIndex ?? 0;
+      if (prevActive !== nextActive && hydrated?.tabs?.[prevActive] !== undefined) {
+        return { ...hydrated, meta: { ...hydrated.meta, activeTabIndex: prevActive } };
+      }
+      return hydrated;
+    }
+
+    case ActionTypes.RECONCILE_SCHEMA: {
+      if (!action?.schema || typeof action?.reconciler !== 'function') return state;
+      return action.reconciler(state, action.schema);
+    }
+
+    case ActionTypes.SET_ACTIVE_TAB: {
+      const { tabIndex } = action;
+      if (
+        typeof tabIndex !== 'number'
+        || tabIndex === state?.meta?.activeTabIndex
+        || tabIndex < 0
+        || (state?.tabs?.length ? tabIndex >= state.tabs.length : tabIndex > 0)
+      ) return state;
+      return { ...state, meta: { ...state.meta, activeTabIndex: tabIndex } };
+    }
 
     case ActionTypes.FIELD_CHANGED: {
       const { fieldId, value, tabIndex } = action;
       if (tabIndex == null) {
-        if (state?.root[fieldId] === value) return state; // no-op keeps identity
+        if (state?.root?.[fieldId] === value) return state; // no-op keeps identity
         return { ...state, root: { ...state.root, [fieldId]: value } };
       }
-      const tab = state?.tabs[tabIndex];
+      const tab = state?.tabs?.[tabIndex];
       if (!tab) return state;
       if (tab?.fields?.[fieldId] === value) return state; // no-op keeps identity
       return {

package/v2Components/FormBuilder/Functional/core/store/toLegacyFormData.js

@@ -1,24 +1,12 @@
 /**
- * toLegacyFormData — codec between the normalized V3 state and the legacy
- * `formData` dialect that the channel containers + `getChannelData` consume.
+ * toLegacyFormData — codec between the normalized V3 state and the legacy formData
+ * dialect the containers consume; it keeps the migration invisible to them.
  *
- * This is the compatibility contract that keeps the migration invisible to the
- * containers and the backend: the functional engine works in the normalized
- * shape, but emits `onChange(legacyFormData, ...)` and builds the save payload
- * from the exact same shape the class component produced.
- *
- * LEGACY DIALECT (SMS example):
- *   {
- *     'template-name': 'My SMS',                                   // root (standalone) fields
- *     0: { 'sms-editor': 'hi', 'unicode-validity': false,         // tab fields
- *          base: true, tabKey: '...' },                           // tab metadata
- *     base: <SAME REFERENCE as formData[0]>,                       // alias of the base tab
- *   }
- *
- * INVARIANT (unit-tested): toLegacy(fromLegacy(x)) deep-equals x.
- *   - root fields  <-> top-level non-numeric keys (excluding `base`)
- *   - tabs[i]      <-> numeric key i; base/tabKey/name are metadata, the rest are fields
- *   - `base`       <-> the SAME object reference as the base tab (never a copy)
+ * Dialect: root fields are top-level non-numeric keys; tabs[i] is numeric key i
+ * (base/tabKey/name are metadata, the rest are fields); `base` is the SAME object
+ * reference as the base tab, never a copy. Example:
+ *   { 'template-name': 'My SMS', 0: { 'sms-editor': 'hi', base: true, tabKey: '…' }, base: <ref to [0]> }
+ * Invariant (unit-tested): toLegacy(fromLegacy(x)) deep-equals x.
  */
 
 const isTabKey = (key) => /^\d+$/.test(key);
@@ -57,7 +45,9 @@ export const fromLegacy = (legacy = {}, { channel = null } = {}) => {
   const baseTabIndex = foundBase === -1 ? 0 : foundBase;
 
   return {
-    meta: { channel, baseTabIndex },
+    // activeTabIndex is UI position, not data — parsed states start at 0; the
+    // reducer's HYDRATE preserves the user's current tab when replacing state.
+    meta: { channel, baseTabIndex, activeTabIndex: 0 },
     root,
     tabs,
     errors: { root: {}, tabs: tabs?.map(() => ({})) },

package/v2Components/FormBuilder/Functional/layout/FieldSlot.js

@@ -17,8 +17,12 @@ const FieldSlot = React.memo(({
   onFieldChange,
   onFieldBlur,
   onEvent,
+  intl,
+  restrictPersonalization,
 }) => {
-  const renderContext = { checkValidation, channel };
+  // intl is identity-stable across renders (locale changes remount the app), and
+  // restrictPersonalization is a primitive — both memo-safe.
+  const renderContext = { checkValidation, channel, intl, restrictPersonalization };
   return (
     <Renderer
       field={field}
@@ -44,6 +48,8 @@ FieldSlot.propTypes = {
   onFieldChange: PropTypes.func.isRequired,
   onFieldBlur: PropTypes.func,
   onEvent: PropTypes.func,
+  intl: PropTypes.object,
+  restrictPersonalization: PropTypes.bool,
 };
 
 FieldSlot.defaultProps = {
@@ -54,6 +60,8 @@ FieldSlot.defaultProps = {
   channel: '',
   onFieldBlur: undefined,
   onEvent: undefined,
+  intl: undefined,
+  restrictPersonalization: false,
 };
 
 export default FieldSlot;

package/v2Components/FormBuilder/Functional/layout/SchemaForm.js

@@ -1,20 +1,37 @@
 /**
  * SchemaForm — top of the schema-driven render. Walks the standalone sections
- * (SMS shape). Container/tabs handling is added when MobilePush/Email migrate.
+ * and any active containers (MOBILEPUSH: one 'tabs' container with the
+ * Android/iOS panes). Either part may be absent: hosts delete `standalone`
+ * entirely in embedded/full mode (removeStandAlone), and single-tab channels
+ * (SMS) have no `containers`.
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import Section from './Section';
+import TabsContainer from './TabsContainer';
+import { CONTAINER_TYPE } from '../constants';
 
 const SchemaForm = ({ schema, renderContext }) => {
-  if (!schema?.standalone) return null;
+  const containers = (schema?.containers || []).filter(
+    (container) => container && (container.isActive === undefined || container.isActive),
+  );
+  if (!schema?.standalone && !containers.length) return null;
   return (
     <>
-      {schema.standalone?.sections?.map((section, index) => (
+      {schema?.standalone?.sections?.map((section, index) => (
         // The schema is a frozen, never-reordered layout descriptor, so the index is a stable key here.
         <Section key={index} section={section} renderContext={renderContext} />
       ))}
+      {containers.map((container, index) => (
+        container.type === CONTAINER_TYPE.TABS ? (
+          <TabsContainer
+            key={container.id || `container-${index}`}
+            container={container}
+            renderContext={renderContext}
+          />
+        ) : null
+      ))}
     </>
   );
 };

package/v2Components/FormBuilder/Functional/layout/Section.js

@@ -24,7 +24,10 @@ export const renderField = (field, renderContext) => {
   const Renderer = renderContext?.registry?.resolve(field.type);
   if (!Renderer) return null; // unknown/unsupported type -> nothing (dead branches don't exist here)
 
-  const tabIndex = field.standalone ? null : renderContext?.activeTabIndex;
+  // Fields inside a tabs-container pane resolve against THEIR pane's tab
+  // (paneTabIndex, set by TabsContainer); standalone-section fields against the
+  // active tab; `standalone: true` fields live at the root.
+  const tabIndex = field.standalone ? null : (renderContext?.paneTabIndex ?? renderContext?.activeTabIndex);
   const value = selectFieldValue(renderContext?.state, { fieldId: field?.id, tabIndex });
   const error = legacyError(renderContext?.errorData, field, tabIndex);
 
@@ -42,6 +45,8 @@ export const renderField = (field, renderContext) => {
         onFieldChange={renderContext?.onFieldChange}
         onFieldBlur={renderContext?.onFieldBlur}
         onEvent={renderContext?.onEvent}
+        intl={renderContext?.intl}
+        restrictPersonalization={renderContext?.restrictPersonalization}
       />
     );
   }

package/v2Components/FormBuilder/Functional/layout/TabsContainer.js

@@ -0,0 +1,85 @@
+/**
+ * TabsContainer — channel-agnostic renderer for a schema 'tabs' container
+ * (MOBILEPUSH: the Android/iOS platform panes). Replaces the class component's
+ * renderContainer 'tabs' case (Classic.js:4246-4328) with state-driven tab
+ * activation — no DOM scans, no setTimeout — while keeping the exact container
+ * contract: pane keys come from the bound tab's tabKey, unsupported panes are
+ * skipped WITHOUT reserving an index (pane→tab binding shifts, matching the
+ * class's paneIndex behavior), and the container's injected onTabChange still
+ * receives the 1-based active index (bridged by the shell via onTabSwitch).
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import Section from './Section';
+
+const hasTabKey = (key) => key !== undefined && key !== '';
+
+const TabsContainer = ({ container, renderContext }) => {
+  if (!container?.panes?.length) return null;
+
+  const tabs = renderContext?.state?.tabs || [];
+  const activeTabIndex = renderContext?.activeTabIndex ?? 0;
+
+  const renderedPanes = [];
+  let supportedOrdinal = 0; // class parity: only supported panes advance the index
+  container.panes.forEach((pane, paneIndex) => {
+    const isPaneSupported = typeof pane.isSupported === 'boolean' ? pane.isSupported : true;
+    if (!isPaneSupported) return;
+    const tabIndex = supportedOrdinal;
+    supportedOrdinal += 1;
+
+    // Fields inside this pane read/write their OWN tab; everything else in the
+    // context is shared. (paneTabIndex is consumed by Section.renderField.)
+    const paneContext = { ...renderContext, paneTabIndex: tabIndex };
+    const paneTabKey = tabs[tabIndex]?.tabKey;
+    const headerSections = pane.sectionsHeaders || container.tabContent?.sections || [];
+
+    renderedPanes.push({
+      // Class parity: panes render eagerly (forceRender). Hidden-pane reconciliation
+      // stays cheap through the FieldSlot memo boundaries. Lazy activation is a
+      // deliberate post-rollout follow-up (see the MPUSH design doc §9).
+      forceRender: true,
+      // The div wrapper + onInput stop are Classic verbatim (Classic.js:4278).
+      tab: (
+        <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
+          {headerSections.map((section, index) => (
+            <Section key={`hdr-${index}`} section={section} renderContext={paneContext} />
+          ))}
+        </div>
+      ),
+      key: hasTabKey(paneTabKey) ? `${paneTabKey}` : `${paneIndex}`,
+      content: (pane.sections || []).map((section, index) => (
+        <Section key={`sec-${index}`} section={section} renderContext={paneContext} />
+      )),
+    });
+  });
+
+  // Must resolve through the SAME fallback chain as the pane keys — a divergent
+  // fallback leaves no pane matching activeKey and CapTab renders nothing.
+  const activeKey = tabs[activeTabIndex]?.tabKey;
+  const resolvedActiveKey = hasTabKey(activeKey)
+    ? `${activeKey}`
+    : (renderedPanes[activeTabIndex]?.key ?? renderedPanes[0]?.key ?? '1');
+
+  return (
+    <CapTab
+      className={`cap-tabs-${container.id} fb-tabs-full-width`}
+      activeKey={resolvedActiveKey}
+      onChange={(key) => renderContext?.onTabSwitch?.(container, key)}
+      panes={renderedPanes}
+    />
+  );
+};
+
+TabsContainer.propTypes = {
+  container: PropTypes.object,
+  renderContext: PropTypes.object.isRequired,
+};
+
+TabsContainer.defaultProps = {
+  container: null,
+};
+
+export default TabsContainer;