fix(sections-editor): avoid double breadcrumb prefix in module-loader unions + add tests (#4482)

Addresses PR review findings:

- Blocker: the SchemaForm consumed-prefix re-prepend double-counted for
  module-loader-union fields, because AnyOfField ALSO re-prepends its own crumb.
  It stripped its crumb conditionally (only when at the head) but re-prepended
  unconditionally. Make the re-prepend symmetric with the strip so it composes
  correctly with the parent's re-prepend — no more ["Página de Listagem",
  "Página de Listagem", …] when drilling into a loader config.

- Testing: add Playwright CT regressions for the two focus-loss scenarios
  (array-label == item-label alt-driven label; editing a label to collide with
  an earlier sibling keeps the opened row). NOTE: the array drill-down CT tests
  do not execute in this local environment (they fail identically on origin/main
  here) and CT is not part of CI — added as the correct-layer regression guard
  following the existing pattern.

- Docs: note the consumedBreadcrumbPrefix <-> breadcrumbPathForActiveField
  tail-slice coupling, and the ArrayField reconciliation fixed-point + list-only
  mutation invariants that keep openIndex from desyncing.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: guitavano

apps/mesh/ct/tests/array-object-drilldown.ct.tsx

@@ -160,6 +160,87 @@ test("editing a drilled-in item updates the correct index", async ({
     .toEqual({ cards: [{ name: "Alpha" }, { name: "Beta2" }] });
 });
 
+test("editing a label field whose value equals the array label keeps the editor open", async ({
+  mount,
+}) => {
+  // Regression: an array labelled "Banner" whose single item is ALSO labelled
+  // "Banner" (its label comes from `alt` via titleBy). The breadcrumb is
+  // ["Banner", "Banner"]; editing `alt` must not collapse the trail and kick
+  // you back to the list. Guards the SchemaForm consumed-prefix re-prepend.
+  const meta = sectionWithProps({
+    banner: {
+      type: "array",
+      title: "Banner",
+      items: {
+        type: "object",
+        title: "Banner",
+        titleBy: "alt",
+        properties: { alt: { type: "string", title: "Alt" } },
+      },
+    },
+  });
+  const component = await mount(
+    <SchemaFormHarness
+      meta={meta}
+      resolveType={TEST_RESOLVE_TYPE}
+      initialValue={{ banner: [{ alt: "Banner" }] }}
+    />,
+  );
+
+  await component.getByRole("button", { name: "Banner", exact: true }).click();
+  await expect
+    .poll(() => readBreadcrumb(component))
+    .toEqual(["Banner", "Banner"]);
+
+  const altInput = component.getByLabel("Alt");
+  await expect(altInput).toHaveAttribute("id", "banner.0.alt");
+  await altInput.fill("Banner Sale");
+
+  // Editor stays open on the same item (does NOT drop back to the list), and
+  // the edit is applied.
+  await expect(component.getByLabel("Alt")).toHaveAttribute(
+    "id",
+    "banner.0.alt",
+  );
+  await expect(component.getByRole("button", { name: "Add item" })).toHaveCount(
+    0,
+  );
+  await expect
+    .poll(() => readFormValue(component))
+    .toEqual({ banner: [{ alt: "Banner Sale" }] });
+});
+
+test("editing a label to collide with an earlier sibling keeps the opened row", async ({
+  mount,
+}) => {
+  // Regression: drill into item 1, rename it to equal item 0's label. Selection
+  // must stay on index 1 (not snap to the first matching label at index 0).
+  // Guards the ArrayField openIndex/preferredIndex disambiguation.
+  const meta = sectionWithProps(cardArrayProps);
+  const component = await mount(
+    <SchemaFormHarness
+      meta={meta}
+      resolveType={TEST_RESOLVE_TYPE}
+      initialValue={{ cards: [{ name: "Alpha" }, { name: "Beta" }] }}
+    />,
+  );
+
+  await component.getByRole("button", { name: "Beta", exact: true }).click();
+  const nameInput = component.getByLabel("Name");
+  await expect(nameInput).toHaveAttribute("id", "cards.1.name");
+
+  await nameInput.fill("Alpha");
+
+  // Still editing index 1 — not snapped to the identically-labelled index 0.
+  await expect(component.getByLabel("Name")).toHaveAttribute(
+    "id",
+    "cards.1.name",
+  );
+  await expect
+    .poll(() => readFormValue(component))
+    .toEqual({ cards: [{ name: "Alpha" }, { name: "Alpha" }] });
+});
+
 test("deleting a row removes the right item from the array", async ({
   mount,
   page,

apps/mesh/src/web/components/sections-editor/fields/any-of-field.tsx

@@ -178,12 +178,19 @@ export function AnyOfField({
   // both label and key, so resolution still works.
   const outerCrumb = label ?? (path.includes(".") ? path.split(".")[0]! : path);
   const safeBreadcrumbPath = breadcrumbPath ?? [];
-  const nestedBreadcrumbPath =
-    isModuleLoaderUnion && safeBreadcrumbPath[0] === outerCrumb
-      ? safeBreadcrumbPath.slice(1)
-      : safeBreadcrumbPath;
+  // Strip our own crumb only when it's actually at the head. The parent
+  // SchemaForm may have already consumed it (via breadcrumbPathForActiveField)
+  // and now re-prepends it for us (via consumedBreadcrumbPrefix). Re-prepend
+  // SYMMETRICALLY — add the crumb back only when we stripped it here; otherwise
+  // the parent's re-prepend would double it (["Página de Listagem", "Página de
+  // Listagem", …]) when this loader union is the active narrowed field.
+  const strippedOwnCrumb =
+    isModuleLoaderUnion && safeBreadcrumbPath[0] === outerCrumb;
+  const nestedBreadcrumbPath = strippedOwnCrumb
+    ? safeBreadcrumbPath.slice(1)
+    : safeBreadcrumbPath;
   const nestedOnBreadcrumbChange: ((p: string[]) => void) | undefined =
-    isModuleLoaderUnion
+    strippedOwnCrumb
       ? (newPath) => {
           onBreadcrumbChange?.([outerCrumb, ...newPath]);
         }

apps/mesh/src/web/components/sections-editor/fields/array-field.tsx

@@ -342,6 +342,15 @@ export function ArrayField({
   // Keep the tracked index in step with the breadcrumb: forget it once the
   // breadcrumb no longer opens an item here, and adopt the resolved index when
   // navigation opened an item some other way (header/breadcrumb click, deep link).
+  //
+  // This set-state-during-render reconciliation converges in one extra render
+  // because `resolveArrayItemSelection` returns `preferredIndex` only when that
+  // item still matches the winning crumb: adopting the resolved index yields a
+  // fixed point on the next render (no oscillation). `openIndex` is a raw index
+  // (not tied to the stable `entries` ids), which is safe only because every
+  // index-shifting mutation (reorder, duplicate, remove) is reachable exclusively
+  // from the list view below — where `selection` is null and `openIndex` has
+  // already been forced back to null.
   if (selection === null) {
     if (openIndex !== null) setOpenIndex(null);
   } else if (selection.index !== openIndex) {

apps/mesh/src/web/components/sections-editor/schema-form-breadcrumb.ts

@@ -69,7 +69,15 @@ export function consumedBreadcrumbPrefix(
   );
 }
 
-/** Drop crumbs consumed by the active field so children see a relative trail. */
+/**
+ * Drop crumbs consumed by the active field so children see a relative trail.
+ *
+ * NOTE: {@link consumedBreadcrumbPrefix} reconstructs the dropped prefix purely
+ * by length difference, which relies on the return value always being a
+ * front-suffix of `breadcrumbPath` (this only ever drops the leading crumb).
+ * Keep it that way — dropping from the middle or rewriting a crumb would make
+ * that reconstruction silently wrong.
+ */
 export function breadcrumbPathForActiveField(
   activeKey: string,
   schema: SchemaProperty,