@designcrowd/library.brand-page 6.2.11 → 6.2.12

package/src/brand-page-maker/composables/rich-text-editor/formatting.ts

@@ -1,41 +1,325 @@
 import type { Editor } from '@tiptap/vue-3';
-import { skipStyleDetection } from '@brand-page-maker/utils';
+import type { Mark } from 'prosemirror-model';
+import {
+  skipStyleDetection,
+  roleVarOrLiteral,
+  isRoleVarRef,
+  restoreLinkUnderlines,
+} from '@brand-page-maker/utils';
+import {
+  composeTextDecoration,
+  roleVarRef,
+  textDecorationClearsRole,
+  textDecorationFlags,
+} from '@shared/text-role-typography.util';
+import type { TextStyleDeclaration } from '@brand-page';
+
+// text-decoration is a single, combinable property (underline + line-through). Compose/decompose the
+// two flags in a stable order so a role-equality compare (roleVarOrLiteral) is deterministic.
+const DECORATION_FLAGS = ['underline', 'line-through', 'overline'] as const;
+
+const isBoldWeight = (value?: string): boolean =>
+  value === 'bold' || (value != null && Number.parseInt(value, 10) >= 600);
+
+const decorationSet = (value?: string): Set<string> =>
+  new Set((value ?? '').split(/\s+/).filter((flag) => flag && flag !== 'none'));
+
+const composeDecoration = (flags: Set<string>): string =>
+  DECORATION_FLAGS.filter((flag) => flags.has(flag)).join(' ') || 'none';
+
+/**
+ * BP-5969 (Phase A) — bold / italic / underline / strike are written as `textStyle` mark ATTRIBUTES
+ * (font-weight / font-style / text-decoration), not Tiptap semantic marks, so they sit in the same
+ * var-or-literal system as family/size: a pick equal to the role stores the role var (follows role
+ * edits), else a literal override. Each toggle ALSO unsets the legacy semantic mark, so a legacy
+ * `<strong>`/`<u>` run becomes attr-driven the moment the user toggles it (migrate-on-edit). Reading
+ * still honours both forms (see the active-state resolution in `selectionUpdate`), and the semantic
+ * extensions remain registered for rendering un-migrated docs + paste (Phase B removes them).
+ */
+export const createFormattingActions = (
+  editor: Editor,
+  // The linked role's style (canonical-linked block), else undefined (legacy/unlinked → literals).
+  getRoleStyle: () => TextStyleDeclaration | undefined = () => undefined,
+  // Render fill gives an absent run this whole-block style before the role, so toolbar state and
+  // mutations must use the same source instead of treating the run as role-only.
+  getBlockStyle: () => TextStyleDeclaration | undefined = () => undefined,
+) => {
+  // An absent attr receives the block fill, but an explicit role reference keeps following the role.
+  const effectiveValue = (attr: string, mark: unknown): string | undefined => {
+    if (typeof mark === 'string' && mark !== '') {
+      if (!isRoleVarRef(mark)) return mark;
+
+      return (getRoleStyle() as Record<string, string> | undefined)?.[attr];
+    }
+
+    return (
+      (getBlockStyle() as Record<string, string> | undefined)?.[attr] ||
+      (getRoleStyle() as Record<string, string> | undefined)?.[attr]
+    );
+  };
+
+  const effective = (attr: string): string | undefined =>
+    effectiveValue(attr, editor.getAttributes('textStyle')?.[attr]);
+
+  // A run is bold/italic/underlined via EITHER the new attr OR a legacy semantic mark — check both.
+  const boldActive = () =>
+    editor.isActive('bold') || isBoldWeight(effective('fontWeight'));
+  const italicActive = () =>
+    editor.isActive('italic') || effective('fontStyle') === 'italic';
+
+  // The text runs a decoration toggle acts on: the cursor's marks when nothing is selected (stored
+  // marks win, as typing applies them), else each text node clipped to the selection.
+  const selectedRuns = (): {
+    from: number;
+    to: number;
+    marks: readonly Mark[];
+  }[] => {
+    const { selection, storedMarks, doc } = editor.state;
+
+    if (selection.empty) {
+      return [
+        {
+          from: selection.from,
+          to: selection.to,
+          marks: storedMarks ?? selection.$from.marks(),
+        },
+      ];
+    }
+
+    const runs: { from: number; to: number; marks: readonly Mark[] }[] = [];
+
+    selection.ranges.forEach(({ $from, $to }) => {
+      doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+        if (!node.isText) return;
+
+        runs.push({
+          from: Math.max(pos, $from.pos),
+          to: Math.min(pos + node.nodeSize, $to.pos),
+          marks: node.marks,
+        });
+      });
+    });
+
+    return runs;
+  };
+
+  const runDecoration = (marks: readonly Mark[]): Set<string> => {
+    const attrs = marks.find((mark) => mark.type.name === 'textStyle')?.attrs;
+    const markValue = attrs?.textDecoration as string | undefined;
+    const localValue =
+      markValue && !isRoleVarRef(markValue)
+        ? markValue
+        : getBlockStyle()?.textDecoration;
+    const flags = decorationSet(
+      composeTextDecoration(
+        getRoleStyle()?.textDecoration,
+        localValue,
+        textDecorationClearsRole(
+          markValue,
+          attrs?.textDecorationReset === true,
+        ),
+      ),
+    );
+
+    if (marks.some((mark) => mark.type.name === 'underline')) {
+      flags.add('underline');
+    }
+
+    if (marks.some((mark) => mark.type.name === 'strike')) {
+      flags.add('line-through');
+    }
+
+    return flags;
+  };
+
+  // Active only when every selected run has the flag, so toggling a mixed selection turns it on.
+  const decorationActive = (flag: string): boolean => {
+    const runs = selectedRuns();
+
+    return (
+      runs.length > 0 &&
+      runs.every(({ marks }) => runDecoration(marks).has(flag))
+    );
+  };
+
+  // text-decoration holds both flags in one value, so each run gets its own composed value: one
+  // uniform write would drop the other flag from runs that carry it.
+  const toggleDecoration = (flag: string): void => {
+    const turnOn = !decorationActive(flag);
+    const runs = selectedRuns();
+    const decorationFor = (
+      marks: readonly Mark[],
+    ): { textDecoration: string; textDecorationReset: true | null } => {
+      const current = runDecoration(marks);
+
+      if (turnOn) current.add(flag);
+      else current.delete(flag);
+
+      const fallback = decorationSet(
+        composeTextDecoration(
+          getRoleStyle()?.textDecoration,
+          getBlockStyle()?.textDecoration,
+        ),
+      );
+      const roleFlags = textDecorationFlags(getRoleStyle()?.textDecoration);
+
+      // The role ref lets render-fill continue applying a whole-block override. Keep it only when
+      // the toggle returns to that exact fallback; every other literal must describe the complete
+      // desired result because it deliberately bypasses the block fill.
+      if (
+        current.size === fallback.size &&
+        [...current].every((currentFlag) => fallback.has(currentFlag))
+      ) {
+        return getRoleStyle()
+          ? {
+              textDecoration: roleVarRef('textDecoration')!,
+              textDecorationReset: null,
+            }
+          : {
+              textDecoration: composeDecoration(current),
+              textDecorationReset: null,
+            };
+      }
+
+      if ([...roleFlags].some((roleFlag) => !current.has(roleFlag))) {
+        return {
+          textDecoration: composeDecoration(current),
+          textDecorationReset: true,
+        };
+      }
+
+      return {
+        textDecoration: composeDecoration(current),
+        textDecorationReset: null,
+      };
+    };
+
+    // Unset both legacy decoration marks so the composed attr is the single source of truth.
+    if (editor.state.selection.empty) {
+      editor
+        .chain()
+        .focus()
+        .unsetUnderline()
+        .unsetStrike()
+        .setMark('textStyle', decorationFor(runs[0].marks))
+        .run();
+
+      return;
+    }
+
+    editor
+      .chain()
+      .focus()
+      .command(({ tr }) => {
+        const { textStyle, underline, strike } = tr.doc.type.schema.marks;
+
+        runs.forEach(({ from, to, marks }) => {
+          tr.removeMark(from, to, underline)
+            .removeMark(from, to, strike)
+            .addMark(
+              from,
+              to,
+              textStyle.create({
+                ...marks.find((mark) => mark.type === textStyle)?.attrs,
+                ...decorationFor(marks),
+              }),
+            );
+        });
+
+        return true;
+      })
+      .run();
+  };
 
-export const createFormattingActions = (editor: Editor) => {
   return {
-    toggleBold: () => editor.chain().focus().toggleBold().run(),
-    toggleItalic: () => editor.chain().focus().toggleItalic().run(),
-    toggleUnderline: () => editor.chain().focus().toggleUnderline().run(),
-    toggleStrike: () => editor.chain().focus().toggleStrike().run(),
-    // Colour is an element-first override that must NOT detach the element from its
-    // global text style (unlike typography edits, which do). `skipStyleDetection`
-    // marks the transaction so the detach handler leaves `textStyleType` intact —
-    // same reason `toggleTextColorAll` below skips it.
+    toggleBold: () =>
+      editor
+        .chain()
+        .focus()
+        .unsetBold()
+        .setMark('textStyle', {
+          fontWeight: roleVarOrLiteral(
+            'fontWeight',
+            boldActive() ? 'normal' : 'bold',
+            getRoleStyle(),
+          ),
+        })
+        .run(),
+    toggleItalic: () =>
+      editor
+        .chain()
+        .focus()
+        .unsetItalic()
+        .setMark('textStyle', {
+          fontStyle: roleVarOrLiteral(
+            'fontStyle',
+            italicActive() ? 'normal' : 'italic',
+            getRoleStyle(),
+          ),
+        })
+        .run(),
+    toggleUnderline: () => toggleDecoration('underline'),
+    toggleStrike: () => toggleDecoration('line-through'),
+    // Colour is an element-first override that must NOT detach the element from its global text style
+    // (unlike typography edits, which do). `skipStyleDetection` marks the transaction so the detach
+    // handler leaves `textStyleType` intact — same reason `toggleTextColorAll` below skips it.
     toggleTextColor: (color: string) =>
       skipStyleDetection(
         editor.chain().focus().setMark('textStyle', { color }),
       ).run(),
     toggleBackgroundColor: (color: string) =>
       editor.chain().focus().setHighlight({ color }).run(),
+    // *All (role application): write the role var ref to every run so it follows the container class,
+    // clearing any legacy semantic mark that would otherwise pin it.
     toggleBoldAll: () => {
-      skipStyleDetection(editor.chain().selectAll().toggleBold()).run();
+      skipStyleDetection(
+        editor
+          .chain()
+          .selectAll()
+          .unsetBold()
+          .setMark('textStyle', { fontWeight: roleVarRef('fontWeight') }),
+      ).run();
     },
     toggleItalicAll: () => {
-      skipStyleDetection(editor.chain().selectAll().toggleItalic()).run();
+      skipStyleDetection(
+        editor
+          .chain()
+          .selectAll()
+          .unsetItalic()
+          .setMark('textStyle', { fontStyle: roleVarRef('fontStyle') }),
+      ).run();
     },
     toggleUnderlineAll: () => {
-      skipStyleDetection(editor.chain().selectAll().toggleUnderline()).run();
+      skipStyleDetection(
+        editor
+          .chain()
+          .selectAll()
+          .unsetUnderline()
+          .unsetStrike()
+          .setTextDecoration(roleVarRef('textDecoration')!)
+          .command(restoreLinkUnderlines(editor)),
+      ).run();
     },
     toggleStrikeAll: () => {
-      skipStyleDetection(editor.chain().selectAll().toggleStrike()).run();
+      skipStyleDetection(
+        editor
+          .chain()
+          .selectAll()
+          .unsetUnderline()
+          .unsetStrike()
+          .setTextDecoration(roleVarRef('textDecoration')!)
+          .command(restoreLinkUnderlines(editor)),
+      ).run();
     },
     toggleTextColorAll: (color: string) => {
       skipStyleDetection(
         editor.chain().selectAll().setMark('textStyle', { color }),
       ).run();
     },
-    unsetAllMarks: () => {
-      skipStyleDetection(editor.chain().selectAll().unsetAllMarks()).run();
-    },
+    // Effective active-state (attr OR legacy mark) for the toolbar buttons.
+    boldActive,
+    italicActive,
+    underlineActive: () => decorationActive('underline'),
+    strikeActive: () => decorationActive('line-through'),
   };
 };

package/src/brand-page-maker/composables/rich-text-editor/hyperlink.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { Editor } from '@tiptap/vue-3';
-import { getRteExtensions } from './getRteExtensions';
+import { getRteExtensions } from '@shared/rte-extensions.util';
 import { useHyperlink } from './hyperlink';
 import { DEFAULT_LINK_COLOR } from '@src/constants/rich-text-editor.constants';
 
@@ -79,3 +79,84 @@ describe('useHyperlink — applyHyperlinkToEditor retains styling, overrides col
     expect(markTypes(run)).toContain('link');
   });
 });
+
+// Each test loads a stored link into a fresh editor, as after a reload: nothing from the session
+// that made the link is left to restore from.
+describe('useHyperlink — removeHyperlink after a reload', () => {
+  let editors: Editor[] = [];
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const linkRun = (color: string) => ({
+    type: 'text',
+    text: 'guide',
+    marks: [
+      { type: 'link', attrs: { href: 'https://example.com' } },
+      { type: 'underline' },
+      { type: 'textStyle', attrs: { color } },
+    ],
+  });
+  const textRun = (text: string, color?: string) => ({
+    type: 'text',
+    text,
+    ...(color ? { marks: [{ type: 'textStyle', attrs: { color } }] } : {}),
+  });
+
+  const unlink = (runs: object[]) => {
+    const editor = new Editor({
+      extensions: getRteExtensions({ restrictStarterKit: true }),
+      content: { type: 'doc', content: [{ type: 'paragraph', content: runs }] },
+    });
+
+    editors.push(editor);
+
+    const text = editor.state.doc.textContent;
+    const from = text.indexOf('guide') + 1;
+
+    editor.commands.setTextSelection({ from, to: from + 'guide'.length });
+    useHyperlink(editor).removeHyperlink();
+
+    let marks: { type: string; color?: unknown }[] = [];
+
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isText && pos <= from && from < pos + node.nodeSize)
+        marks = node.marks.map((mark) => ({
+          type: mark.type.name,
+          color: mark.attrs.color,
+        }));
+    });
+
+    return marks;
+  };
+
+  it('gives link-blue text the colour of the text before it', () => {
+    expect(
+      unlink([
+        textRun('Read our ', '#111111'),
+        linkRun(DEFAULT_LINK_COLOR),
+        textRun(' today', '#222222'),
+      ]),
+    ).toEqual([{ type: 'textStyle', color: '#111111' }]);
+  });
+
+  it('uses the text after the link when nothing comes before it', () => {
+    expect(
+      unlink([linkRun(DEFAULT_LINK_COLOR), textRun(' today', '#222222')]),
+    ).toEqual([{ type: 'textStyle', color: '#222222' }]);
+  });
+
+  it('leaves no colour when the text around the link has none', () => {
+    expect(unlink([textRun('Read our '), linkRun(DEFAULT_LINK_COLOR)])).toEqual(
+      [],
+    );
+  });
+
+  it('keeps a colour the user picked for the link', () => {
+    expect(
+      unlink([textRun('Read our ', '#111111'), linkRun('#ff0000')]),
+    ).toEqual([{ type: 'textStyle', color: '#ff0000' }]);
+  });
+});

package/src/brand-page-maker/composables/rich-text-editor/hyperlink.ts

@@ -2,14 +2,7 @@ import { ref, computed } from 'vue';
 import type { Editor } from '@tiptap/vue-3';
 import { DEFAULT_LINK_COLOR } from '@src/constants/rich-text-editor.constants';
 
-// Store original colors before applying hyperlinks
-const originalColors = new WeakMap<any, string | null>();
-
-export const isHrefPageId = (href: string) => {
-  if (!href) return false;
-
-  return href.startsWith('pageid:');
-};
+export { isHrefPageId } from '@shared/rte-link.util';
 
 export const getPageIdFromHref = (href: string) => {
   if (!href) return href;
@@ -26,29 +19,25 @@ export const getHrefForPage = (pageId: string) => {
 export const useHyperlink = (editor: Editor) => {
   const hyperlinkUrl = ref('');
 
-  const storeOriginalColor = () => {
-    const currentTextStyle = editor.getAttributes('textStyle');
-    const originalColor = currentTextStyle.color || null;
+  // Nothing stores the colour text had before it became a link, so on unlink the nearest
+  // unlinked text stands in: the last run before the link, else the first after it.
+  const surroundingColor = (from: number, to: number): string | null => {
+    let before: string | null | undefined;
+    let after: string | null | undefined;
 
-    // Store the original color using the editor instance as key
-    originalColors.set(editor, originalColor);
+    editor.state.doc.descendants((node, pos) => {
+      if (!node.isText || node.marks.some((mark) => mark.type.name === 'link'))
+        return;
 
-    return originalColor;
-  };
-
-  const restoreOriginalColor = () => {
-    const originalColor = originalColors.get(editor);
+      const color =
+        node.marks.find((mark) => mark.type.name === 'textStyle')?.attrs
+          .color || null;
 
-    if (originalColor) {
-      // Restore the original color
-      editor.chain().focus().setColor(originalColor).run();
-    } else {
-      // No original color, remove color completely
-      editor.chain().focus().unsetColor().run();
-    }
+      if (pos + node.nodeSize <= from) before = color;
+      else if (pos >= to && after === undefined) after = color;
+    });
 
-    // Clean up stored color
-    originalColors.delete(editor);
+    return before !== undefined ? before : (after ?? null);
   };
 
   const setHyperlinkUrl = (url: string) => {
@@ -56,8 +45,6 @@ export const useHyperlink = (editor: Editor) => {
 
     hyperlinkUrl.value = safeUrl;
 
-    storeOriginalColor();
-
     // Set the link, apply blue color, and add underline by default
     editor
       .chain()
@@ -88,8 +75,6 @@ export const useHyperlink = (editor: Editor) => {
     text?: string,
     selection?: { from: number; to: number },
   ) => {
-    storeOriginalColor();
-
     const from = selection?.from ?? editor.state.selection.from;
     const to = selection?.to ?? editor.state.selection.to;
     const currentText = editor.state.doc.textBetween(from, to);
@@ -134,11 +119,20 @@ export const useHyperlink = (editor: Editor) => {
       .run();
   };
 
+  // Unlinking drops the link's own look: its underline, and the link blue for the colour of the
+  // text around it. A colour the user picked for the link stays.
   const removeHyperlink = (clearUrlValue = false) => {
-    editor.chain().focus().unsetLink().unsetUnderline().run();
+    const { from, to } = editor.state.selection;
+    const chain = editor.chain().focus().unsetLink().unsetUnderline();
+
+    if (editor.getAttributes('textStyle').color === DEFAULT_LINK_COLOR) {
+      const color = surroundingColor(from, to);
+
+      if (color) chain.setColor(color);
+      else chain.unsetColor();
+    }
 
-    // Restore original color (or remove color if there was none)
-    restoreOriginalColor();
+    chain.run();
 
     if (clearUrlValue) {
       setHyperlinkUrlValue('');

package/src/brand-page-maker/composables/rich-text-editor/keepMarksOnEmpty.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/vue-3';
+import { getRteExtensions } from '@shared/rte-extensions.util';
+import {
+  KeepMarksOnEmpty,
+  keepMarksOnEmptyPluginKey,
+} from './keepMarksOnEmpty';
+
+// When a field is fully cleared, ProseMirror drops every mark, so a clear-and-retype
+// would lose the run's colour/typography. KeepMarksOnEmpty captures the cleared run's
+// marks into its plugin state; the composable's first-type seed reads that state and
+// re-applies them (that seed lives in useRichTextEditor and is covered by the live smoke).
+// These tests pin the capture contract the seed depends on.
+describe('KeepMarksOnEmpty', () => {
+  let editors: Editor[] = [];
+
+  const mk = (content = '') => {
+    const e = new Editor({
+      extensions: [
+        ...getRteExtensions({ restrictStarterKit: true }),
+        KeepMarksOnEmpty,
+      ],
+      content,
+    });
+
+    editors.push(e);
+
+    return e;
+  };
+
+  afterEach(() => {
+    editors.forEach((e) => e.destroy());
+    editors = [];
+  });
+
+  const clearAll = (e: Editor) => {
+    e.commands.selectAll();
+    e.commands.deleteSelection();
+  };
+
+  const captured = (e: Editor) => keepMarksOnEmptyPluginKey.getState(e.state);
+
+  const capturedColour = (e: Editor) =>
+    captured(e)?.find((m) => m.type.name === 'textStyle')?.attrs.color ?? null;
+
+  it("captures the cleared run's colour so the seed can restore it", () => {
+    const e = mk('<p><span style="color: rgb(255, 0, 0)">Hello</span></p>');
+
+    clearAll(e);
+
+    expect(capturedColour(e)).toBe('rgb(255, 0, 0)');
+  });
+
+  it('captures nothing for a genuinely fresh (never-populated) field', () => {
+    const e = mk('');
+
+    clearAll(e);
+
+    // Nothing to preserve → the first-type seed (not this plugin) owns the fresh case.
+    expect(captured(e)).toBeNull();
+  });
+
+  it('captures nothing when the cleared run had no marks', () => {
+    const e = mk('<p>plain</p>');
+
+    clearAll(e);
+
+    expect(captured(e)).toBeNull();
+  });
+
+  it('drops the capture once the field has content again', () => {
+    const e = mk('<p><span style="color: rgb(0, 128, 0)">Hi</span></p>');
+
+    clearAll(e);
+    expect(capturedColour(e)).toBe('rgb(0, 128, 0)');
+
+    e.commands.insertContent('X');
+    expect(captured(e)).toBeNull();
+  });
+});

package/src/brand-page-maker/composables/rich-text-editor/keepMarksOnEmpty.ts

@@ -0,0 +1,75 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey, type EditorState } from 'prosemirror-state';
+import type { Mark } from 'prosemirror-model';
+
+/**
+ * Clearing all text in an RTE field drops every mark: ProseMirror empties
+ * `storedMarks` and the emptied block has no run left to inherit from, so the next
+ * character is typed bare. For an *edit* that is wrong — the user cleared text, not
+ * formatting — and post-ADR-0020 (the first-type seed no longer re-applies the role
+ * colour) it silently strips the run's colour on every clear-and-retype.
+ *
+ * This plugin remembers the marks of the run that was just cleared, in its own plugin
+ * *state* — deliberately not `storedMarks`, which a later plugin's appendTransaction can
+ * reset before the next keystroke (observed on the real Backspace path). The composable's
+ * first-type seed reads it via `keepMarksOnEmptyPluginKey.getState(state)` and re-applies
+ * those marks instead of the role/element defaults, so the previous style survives the
+ * retype. A genuinely fresh field never captures anything (state stays null), so the seed
+ * keeps owning that case.
+ */
+export const keepMarksOnEmptyPluginKey = new PluginKey<readonly Mark[] | null>(
+  'keepMarksOnEmpty',
+);
+
+// Marks of the first inline run — the leading style the retype should continue in
+// (mixed-style runs collapse to the first, where the cursor lands after a clear).
+const firstRunMarks = (state: EditorState): readonly Mark[] | null => {
+  let marks: readonly Mark[] | null = null;
+
+  state.doc.descendants((node) => {
+    if (marks) return false;
+
+    if (node.isText) {
+      marks = node.marks;
+
+      return false;
+    }
+
+    return true;
+  });
+
+  return marks;
+};
+
+export const KeepMarksOnEmpty = Extension.create({
+  name: 'keepMarksOnEmpty',
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<readonly Mark[] | null>({
+        key: keepMarksOnEmptyPluginKey,
+        state: {
+          init: () => null,
+          apply(tr, value, oldState, newState) {
+            // Capture the leading run's marks at the moment the field is emptied.
+            if (
+              tr.docChanged &&
+              oldState.doc.textContent !== '' &&
+              newState.doc.textContent === ''
+            ) {
+              const marks = firstRunMarks(oldState);
+
+              return marks && marks.length > 0 ? marks : null;
+            }
+
+            // Drop the capture once the field has content again (the retype landed).
+            if (newState.doc.textContent !== '') return null;
+
+            // Field still empty, awaiting the retype — hold the capture.
+            return value;
+          },
+        },
+      }),
+    ];
+  },
+});