@beyondwork/docx-react-component 1.0.83 → 1.0.85

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -32,9 +32,12 @@ const focusRingClass =
 export function TwSuggestionCard(props: TwSuggestionCardProps) {
   const contextLabel = summarizeSuggestionContext(props.model);
   const commentDisabled = !props.model.canAddComment;
+  const replyCount = props.model.replyCount ?? 0;
   const tooltipLabel = commentDisabled
     ? props.model.disabledReason ?? "Commenting is unavailable for this selection"
-    : "Comment on suggestion";
+    : props.model.commentThreadIds?.length
+      ? "Reply to tracked change"
+      : "Start tracked-change discussion";
 
   return (
     <div
@@ -87,14 +90,15 @@ export function TwSuggestionCard(props: TwSuggestionCardProps) {
           <Tooltip.Trigger asChild>
             <button
               type="button"
-              aria-label="Comment on suggestion"
+              aria-label="Reply to tracked change"
+              data-testid="suggestion-card-reply"
               disabled={commentDisabled}
               onMouseDown={preserveEditorSelectionMouseDown}
               onClick={props.onAddComment}
               className={`inline-flex h-7 items-center gap-1 rounded-md border border-[var(--color-border-default)] px-2 text-[11px] font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-hover)] disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
             >
               <MessageSquare className="h-3 w-3" />
-              Comment
+              Reply{replyCount > 0 ? ` ${replyCount}` : ""}
             </button>
           </Tooltip.Trigger>
           <Tooltip.Portal>

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -31,23 +31,18 @@ export interface TwTableContextToolbarProps {
   /**
    * Phase D.2 — progressive-disclosure compact mode.
    *
-   * When `true`, the toolbar reduces to:
-   *   - the tier badge + size + selection label (diagnostic context)
-   *   - a single "More…" button that fires `onOpenMore`
+   * When `true`, the toolbar stays action-first:
+   *   - a small context label
+   *   - the tier's highest-frequency table actions
+   *   - a single "More…" button that opens the shared command graph
    *
-   * All action controls (Add row / Merge / Split / Fill / Style /
-   * Delete / Align / V-align / Distribute / Borders) are suppressed;
-   * the full set lives in the shared editor-action-registry and is
-   * accessed via right-click OR the "More…" button (which opens the
-   * same context menu).  Per DESIGN-EDITOR.md §6.4 ("right-click
-   * cannot be richer than the floating surface; cannot duplicate
-   * command trees") the compact variant pins that rule — there IS no
-   * richer surface to diverge from.
+   * Diagnostic metadata such as "3 x 4" or "R1 C1" is intentionally
+   * omitted from the compact surface. It belongs in properties /
+   * diagnostics, not primary editing chrome.
    *
-   * Default `false` preserves the rich in-tree behavior so no
-   * existing integrator breaks.  Phase D.2 ships the opt-in; Phase E
-   * flips the default to `true` once the end-to-end
-   * `onContextMenuRequested` wiring is proven.
+   * Default `false` preserves the rich in-tree behavior for standalone
+   * and back-compat mounts. The product selection-tool path opts into
+   * compact mode.
    */
   compact?: boolean;
   /**
@@ -146,29 +141,37 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
     : null;
   const selectionLabel = tableContext ? formatSelectionLabel(tableContext, tier) : null;
 
-  // Phase D.2 — compact variant: minimal inline affordance + one
-  // "More…" button that opens the shared context menu.  The full
-  // action set lives in editor-action-registry so right-click and
-  // "More…" always show identical options (DESIGN-EDITOR.md §6.4).
+  // Product compact variant: action-first local chrome + one "More…"
+  // button that opens the shared context menu.  The full action set
+  // still lives in editor-action-registry so right-click and "More…"
+  // stay identical; this surface only promotes the tier's obvious next
+  // actions and leaves metadata to deeper surfaces.
   if (props.compact) {
     return (
       <div
         data-testid="table-context-toolbar"
         data-tier={tier}
         data-variant="compact"
-        className="inline-flex items-center gap-[6px] rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-canvas)] px-2 py-1 shadow-[var(--shadow-float)]"
+        data-purpose="table-actions"
+        className="inline-flex max-w-[min(28rem,calc(100vw-1.5rem))] flex-wrap items-center gap-[4px] rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-bg-canvas)] px-2 py-1 shadow-[var(--shadow-float)]"
       >
-        <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
-          {tierLabel(tier)}
+        <span
+          data-testid="table-context-toolbar-label"
+          className="mr-0.5 text-[9px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]"
+        >
+          {compactTierLabel(tier)}
         </span>
-        {tableSizeLabel ? <ToolbarBadge>{tableSizeLabel}</ToolbarBadge> : null}
-        {selectionLabel ? <ToolbarBadge>{selectionLabel}</ToolbarBadge> : null}
+        <CompactTableActions
+          props={props}
+          tableContext={tableContext}
+          tier={tier}
+        />
         <button
           type="button"
           data-testid="table-context-toolbar-more"
           aria-label="Table actions menu"
           className="inline-flex h-6 items-center gap-1 rounded-[var(--radius-sm)] px-2 text-xs font-medium text-secondary hover:bg-hover focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]"
-          disabled={props.disabled}
+          disabled={props.disabled || !props.onOpenMore}
           onMouseDown={preserveEditorSelectionMouseDown}
           onClick={(ev) => {
             const rect = (ev.currentTarget as HTMLButtonElement).getBoundingClientRect();
@@ -457,6 +460,149 @@ export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
   );
 }
 
+function CompactTableActions(args: {
+  props: TwTableContextToolbarProps;
+  tableContext: TableStructureContextSnapshot | null;
+  tier: TableTier;
+}) {
+  const { props, tableContext, tier } = args;
+  switch (tier) {
+    case "caret-in-cell":
+      return (
+        <>
+          <ToolbarButton
+            ariaLabel="Insert row below"
+            capability={tableContext?.operations.addRowAfter}
+            disabled={props.disabled}
+            onClick={props.onAddRowAfter}
+          >
+            Row +
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Insert column right"
+            capability={tableContext?.operations.addColumnAfter}
+            disabled={props.disabled}
+            onClick={props.onAddColumnAfter}
+          >
+            Col +
+          </ToolbarButton>
+        </>
+      );
+    case "multi-cell":
+      return (
+        <>
+          <ToolbarButton
+            ariaLabel="Merge cells"
+            capability={tableContext?.operations.mergeCells}
+            disabled={props.disabled}
+            onClick={props.onMergeCells}
+          >
+            Merge
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Split cell"
+            capability={tableContext?.operations.splitCell}
+            disabled={props.disabled}
+            onClick={props.onSplitCell}
+          >
+            Split
+          </ToolbarButton>
+        </>
+      );
+    case "row-selected":
+      return (
+        <>
+          <ToolbarButton
+            ariaLabel="Insert row below"
+            capability={tableContext?.operations.addRowAfter}
+            disabled={props.disabled}
+            onClick={props.onAddRowAfter}
+          >
+            Row +
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Delete row"
+            capability={tableContext?.operations.deleteRow}
+            danger
+            disabled={props.disabled}
+            onClick={props.onDeleteRow}
+          >
+            Delete
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Toggle header row"
+            capability={tableContext?.operations.setRowIsHeader}
+            active={tableContext?.currentCell.isHeader}
+            disabled={props.disabled}
+            onClick={props.onToggleRowHeader}
+          >
+            Header
+          </ToolbarButton>
+        </>
+      );
+    case "column-selected":
+      return (
+        <>
+          <ToolbarButton
+            ariaLabel="Insert column right"
+            capability={tableContext?.operations.addColumnAfter}
+            disabled={props.disabled}
+            onClick={props.onAddColumnAfter}
+          >
+            Col +
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Delete column"
+            capability={tableContext?.operations.deleteColumn}
+            danger
+            disabled={props.disabled}
+            onClick={props.onDeleteColumn}
+          >
+            Delete
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Distribute columns evenly"
+            capability={tableContext?.operations.distributeColumnsEvenly}
+            disabled={props.disabled}
+            onClick={props.onDistributeColumnsEvenly}
+          >
+            Distribute
+          </ToolbarButton>
+        </>
+      );
+    case "whole-table":
+      return (
+        <>
+          <ToolbarButton
+            ariaLabel="Insert row below"
+            capability={tableContext?.operations.addRowAfter}
+            disabled={props.disabled}
+            onClick={props.onAddRowAfter}
+          >
+            Row +
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Insert column right"
+            capability={tableContext?.operations.addColumnAfter}
+            disabled={props.disabled}
+            onClick={props.onAddColumnAfter}
+          >
+            Col +
+          </ToolbarButton>
+          <ToolbarButton
+            ariaLabel="Delete table"
+            capability={tableContext?.operations.deleteTable}
+            danger
+            disabled={props.disabled}
+            onClick={props.onDeleteTable}
+          >
+            Delete
+          </ToolbarButton>
+        </>
+      );
+  }
+}
+
 function formatSelectionLabel(
   ctx: TableStructureContextSnapshot,
   tier: TableTier,
@@ -491,6 +637,10 @@ function tierLabel(tier: TableTier): string {
   }
 }
 
+function compactTierLabel(tier: TableTier): string {
+  return tier === "whole-table" ? "Table" : tierLabel(tier);
+}
+
 function tierWidthCap(tier: TableTier): string {
   switch (tier) {
     case "caret-in-cell":

package/src/ui-tailwind/chrome-overlay/tw-chrome-overlay.tsx

@@ -154,7 +154,7 @@ export interface TwChromeOverlayProps {
    */
   activeStory?: EditorStoryTarget;
   /**
-   * Fired when the user clicks a per-page header / footer band to
+   * Fired when the user double-clicks a per-page header / footer band to
    * promote it into the active editing surface.  Task 10 will route PM
    * into the matching band via React portals; today the handler is a
    * pass-through to `runtime.openStory`.

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -513,6 +513,18 @@ export function buildDecorations(
             }),
           );
           revisionCount += 1;
+        } else if (rev.kind === "property-change" || rev.kind === "formatting") {
+          const propertyChangeClass =
+            buildClassFromRevisionDisplay(revDisplayFlags) ||
+            "underline decoration-accent/70 decoration-dotted decoration-1 underline-offset-2";
+          decorations.push(
+            Decoration.inline(pmFrom, pmTo, {
+              class: propertyChangeClass,
+              "data-revision-id": rev.revisionId,
+              "data-revision-kind": rev.kind,
+            }),
+          );
+          revisionCount += 1;
         }
         continue;
       }

package/src/ui-tailwind/editor-surface/pm-page-break-decorations.ts

@@ -392,7 +392,7 @@ function buildChromeWidgetDomUncached(input: ChromeWidgetInput): HTMLElement {
   root.style.userSelect = "none";
 
   if (input.posture === "canvas") {
-    // Single dotted horizontal line with a small page-number callout.
+    // Single dotted horizontal line with an unframed page-number label.
     root.style.height = `${input.interGapPx + 1}px`;
     root.style.position = "relative";
 
@@ -406,35 +406,23 @@ function buildChromeWidgetDomUncached(input: ChromeWidgetInput): HTMLElement {
     line.style.borderTop = "1px dotted var(--color-border-default)";
     root.appendChild(line);
 
-    // L6d.U2: badge is now a true pill — `--radius-pill` geometry,
-    // hairline `--color-border-default` border, subtle `--shadow-soft`
-    // so the callout reads as a card floating over the seam line rather
-    // than text painted on top of it.  The pill is 18 px tall (10 px
-    // font + 8 px vertical padding + hairline border); re-center so the
-    // seam line bisects the pill vertically.
-    const PILL_HEIGHT_PX = 18;
-    const badge = document.createElement("span");
-    badge.className = "wre-page-chrome-canvas-badge";
-    badge.setAttribute("data-kind", "canvas-seam-badge");
-    badge.setAttribute("data-variant", "pill");
-    badge.textContent = input.nextPageLabel;
-    badge.style.position = "absolute";
-    badge.style.top = `${Math.round(input.interGapPx / 2) - Math.round(PILL_HEIGHT_PX / 2)}px`;
-    badge.style.left = "50%";
-    badge.style.transform = "translateX(-50%)";
-    badge.style.display = "inline-flex";
-    badge.style.alignItems = "center";
-    badge.style.height = `${PILL_HEIGHT_PX}px`;
-    badge.style.padding = "0 10px";
-    badge.style.fontSize = "10px";
-    badge.style.letterSpacing = "0.12em";
-    badge.style.textTransform = "uppercase";
-    badge.style.color = "var(--color-text-tertiary)";
-    badge.style.backgroundColor = "var(--color-surface)";
-    badge.style.border = "1px solid var(--color-border-default)";
-    badge.style.borderRadius = "var(--radius-pill)";
-    badge.style.boxShadow = "var(--shadow-soft)";
-    root.appendChild(badge);
+    const label = document.createElement("span");
+    label.className = "wre-page-chrome-canvas-page-number";
+    label.setAttribute("data-kind", "canvas-seam-page-number");
+    label.textContent = input.nextPageLabel;
+    label.style.position = "absolute";
+    label.style.top = `${Math.round(input.interGapPx / 2)}px`;
+    label.style.left = "50%";
+    label.style.transform = "translate(-50%, -50%)";
+    label.style.display = "inline-flex";
+    label.style.alignItems = "center";
+    label.style.padding = "0 2px";
+    label.style.fontSize = "10px";
+    label.style.letterSpacing = "0.12em";
+    label.style.textTransform = "uppercase";
+    label.style.color = "var(--color-text-tertiary)";
+    label.style.pointerEvents = "none";
+    root.appendChild(label);
     return root;
   }
 

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -562,7 +562,7 @@ function buildInlineContent(
           fieldTarget: segment.fieldTarget ?? null,
           instruction: segment.instruction,
           refreshStatus: segment.refreshStatus,
-          label: segment.label,
+          label: segment.displayText ?? segment.label,
         }),
       ];
 

package/src/ui-tailwind/editor-surface/tw-page-block-view.tsx

@@ -75,7 +75,7 @@ function renderSegment(seg: SurfaceInlineSegment, tabWidthsPt: Map<string, numbe
           data-node-type="field_ref"
           style={{ opacity: 0.6, fontSize: "0.85em" }}
         >
-          [field]
+          {seg.displayText ?? seg.label}
         </span>
       );
     case "note_ref":

package/src/ui-tailwind/page-stack/tw-page-chrome-entry.tsx

@@ -35,7 +35,8 @@ export interface TwPageChromeEntryProps {
   page: PublicPageNode;
   facet: WordReviewEditorLayoutFacet;
   activeStory: EditorStoryTarget;
-  onOpenStory?: (target: EditorStoryTarget) => void;
+  activeStoryPageIndex?: number | null;
+  onOpenStory?: (target: EditorStoryTarget, pageIndex: number) => void;
   visiblePageIndexRange?: { start: number; end: number } | null;
   renderFrameRevision: number;
   /** Preview catalog threaded into header/footer/footnote region renderers
@@ -58,6 +59,7 @@ function TwPageChromeEntryInner({
   page,
   facet,
   activeStory,
+  activeStoryPageIndex,
   onOpenStory,
   visiblePageIndexRange,
   renderFrameRevision,
@@ -129,14 +131,14 @@ function TwPageChromeEntryInner({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [facet, pageIndex, page, renderFrameRevision]);
 
-  const handleHeaderClick = React.useCallback(
-    () => headerStory && onOpenStory?.(headerStory),
-    [onOpenStory, headerStory],
+  const handleHeaderDoubleClick = React.useCallback(
+    () => headerStory && onOpenStory?.(headerStory, pageIndex),
+    [onOpenStory, headerStory, pageIndex],
   );
 
-  const handleFooterClick = React.useCallback(
-    () => footerStory && onOpenStory?.(footerStory),
-    [onOpenStory, footerStory],
+  const handleFooterDoubleClick = React.useCallback(
+    () => footerStory && onOpenStory?.(footerStory, pageIndex),
+    [onOpenStory, footerStory, pageIndex],
   );
 
   const frameHeightPx = rect.bottomPx - rect.topPx;
@@ -175,8 +177,14 @@ function TwPageChromeEntryInner({
   const sectionNumber = (page.sectionIndex ?? 0) + 1;
   const headerSectionLabel = `Header — Section ${sectionNumber}`;
   const footerSectionLabel = `Footer — Section ${sectionNumber}`;
-  const headerActive = headerStory && isActiveStoryMatch(activeStory, headerStory);
-  const footerActive = footerStory && isActiveStoryMatch(activeStory, footerStory);
+  const headerActive =
+    headerStory &&
+    isActiveStoryMatch(activeStory, headerStory) &&
+    (activeStoryPageIndex == null || activeStoryPageIndex === pageIndex);
+  const footerActive =
+    footerStory &&
+    isActiveStoryMatch(activeStory, footerStory) &&
+    (activeStoryPageIndex == null || activeStoryPageIndex === pageIndex);
 
   return (
     <div
@@ -201,7 +209,7 @@ function TwPageChromeEntryInner({
           bandHeightPx={px(headerRegion.heightTwips)}
           isActiveSlot={Boolean(headerActive)}
           sectionLabel={headerActive ? headerSectionLabel : undefined}
-          onClick={handleHeaderClick}
+          onDoubleClick={handleHeaderDoubleClick}
           mediaPreviews={mediaPreviews}
           ribbonProps={headerActive ? activeBandRibbonProps ?? null : null}
         />
@@ -216,7 +224,7 @@ function TwPageChromeEntryInner({
           bandHeightPx={px(footerRegion.heightTwips)}
           isActiveSlot={Boolean(footerActive)}
           sectionLabel={footerActive ? footerSectionLabel : undefined}
-          onClick={handleFooterClick}
+          onDoubleClick={handleFooterDoubleClick}
           mediaPreviews={mediaPreviews}
           ribbonProps={footerActive ? activeBandRibbonProps ?? null : null}
         />
@@ -256,6 +264,7 @@ function propsAreEqual(
     prev.page === next.page &&
     prev.facet === next.facet &&
     prev.activeStory === next.activeStory &&
+    prev.activeStoryPageIndex === next.activeStoryPageIndex &&
     prev.onOpenStory === next.onOpenStory &&
     prev.visiblePageIndexRange === next.visiblePageIndexRange &&
     prev.renderFrameRevision === next.renderFrameRevision &&

package/src/ui-tailwind/page-stack/tw-page-footer-band.tsx

@@ -37,7 +37,7 @@ export interface TwPageFooterBandProps {
    * Only rendered when `isActiveSlot` is true.
    */
   sectionLabel?: string;
-  onClick: () => void;
+  onDoubleClick: () => void;
   "data-testid"?: string;
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;
   /**
@@ -57,7 +57,7 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
   widthPx,
   isActiveSlot,
   sectionLabel,
-  onClick,
+  onDoubleClick,
   "data-testid": testId,
   mediaPreviews,
   ribbonProps,
@@ -69,14 +69,18 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
       data-page-index={pageIndex}
       data-active={isActiveSlot ? "true" : undefined}
       data-testid={testId}
-      onClick={onClick}
+      onDoubleClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDoubleClick();
+      }}
       style={{
         position: "absolute",
         bottom: `${bottomPx}px`,
         left: `${leftPx}px`,
         width: `${widthPx}px`,
         height: `${bandHeightPx}px`,
-        cursor: "pointer",
+        cursor: "text",
       }}
     >
       {isActiveSlot && sectionLabel ? (
@@ -95,6 +99,7 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
         <div
           data-pm-portal-slot
           data-page-band-slot="footer"
+          data-page-index={pageIndex}
           style={{ width: "100%", height: "100%" }}
         />
       ) : (

package/src/ui-tailwind/page-stack/tw-page-header-band.tsx

@@ -19,9 +19,9 @@ import {
 //     promoted this band to the active story slot (P8.10 wires the PM
 //     surface into this target via React portal).
 //
-// Clicks on the band bubble to the chrome layer's `openStory` dispatch
-// (wired in P8.8 / P8.10) so legal reviewers can promote a header into
-// the active editing surface.
+// Double-clicks on the band dispatch to the chrome layer's `openStory`
+// handler so legal reviewers can promote a header into the active editing
+// surface without single-clicking out of the main body flow.
 // ---------------------------------------------------------------------------
 
 export interface TwPageHeaderBandProps {
@@ -38,7 +38,7 @@ export interface TwPageHeaderBandProps {
    * Only rendered when `isActiveSlot` is true.
    */
   sectionLabel?: string;
-  onClick: () => void;
+  onDoubleClick: () => void;
   "data-testid"?: string;
   /** Preview catalog threaded to the region renderer so header images
    *  (CCEP logos on 7-of-8 CCEP docs) render as real <img>s instead of
@@ -63,7 +63,7 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
   widthPx,
   isActiveSlot,
   sectionLabel,
-  onClick,
+  onDoubleClick,
   "data-testid": testId,
   mediaPreviews,
   ribbonProps,
@@ -75,14 +75,18 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
       data-page-index={pageIndex}
       data-active={isActiveSlot ? "true" : undefined}
       data-testid={testId}
-      onClick={onClick}
+      onDoubleClick={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDoubleClick();
+      }}
       style={{
         position: "absolute",
         top: `${topPx}px`,
         left: `${leftPx}px`,
         width: `${widthPx}px`,
         height: `${bandHeightPx}px`,
-        cursor: "pointer",
+        cursor: "text",
       }}
     >
       {isActiveSlot && sectionLabel ? (
@@ -101,6 +105,7 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
         <div
           data-pm-portal-slot
           data-page-band-slot="header"
+          data-page-index={pageIndex}
           style={{ width: "100%", height: "100%" }}
         />
       ) : (

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -111,7 +111,7 @@ export interface TwPageStackChromeLayerProps {
   renderFrameRevision: number;
   /** Current active story target — used to promote the matching band to slot mode. */
   activeStory: EditorStoryTarget;
-  /** Fires when a band is clicked.  Task 10 routes PM into the matching band. */
+  /** Fires when a band is double-clicked. Routes PM into the matching band. */
   onOpenStory?: (target: EditorStoryTarget) => void;
   /**
    * PM surface DOM element (typically `view.dom`, i.e. the outer
@@ -189,6 +189,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   });
   const overlayRootRef = React.useRef<HTMLDivElement | null>(null);
   const rafHandleRef = React.useRef<number | null>(null);
+  const [activeStoryPageIndex, setActiveStoryPageIndex] = React.useState<number | null>(null);
 
   // --------------------------------------------------------------------
   // rAF-debounced refresh.  Mirrors the pattern in
@@ -293,6 +294,20 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
     };
   }, [refreshRects, renderFrameRevision, scrollRoot]);
 
+  React.useEffect(() => {
+    if (activeStory.kind !== "header" && activeStory.kind !== "footer") {
+      setActiveStoryPageIndex(null);
+    }
+  }, [activeStory]);
+
+  const handleOpenStoryForPage = React.useCallback(
+    (target: EditorStoryTarget, pageIndex: number) => {
+      setActiveStoryPageIndex(pageIndex);
+      onOpenStory?.(target);
+    },
+    [onOpenStory],
+  );
+
   // Observe scroll-root size changes.
   React.useEffect(() => {
     if (geometryFacet) return;
@@ -357,14 +372,17 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   React.useLayoutEffect(() => {
     if (!pmSurfaceElement) return;
     const overlay = overlayRootRef.current;
-    // Find a portal slot the ChromeLayer currently exposes.  Every
-    // visible band whose story equals `activeStory` renders a slot —
-    // so if a header variant repeats across pages, every one of those
-    // pages emits a `[data-pm-portal-slot]` div.  PM is a single DOM
-    // element, so we pick the first slot in document order via
-    // `querySelector` (singular) and park the element there.  The
-    // remaining slot divs stay empty until the next reparent.
+    // Find the active portal slot.  Double-click activation records the
+    // page index, so repeated shared header/footer stories still route PM
+    // into the actual page band the user opened.
+    const pageScopedSelector =
+      activeStoryPageIndex == null
+        ? null
+        : `[data-pm-portal-slot][data-page-index="${activeStoryPageIndex}"]`;
     const activeSlot =
+      (pageScopedSelector
+        ? overlay?.querySelector<HTMLElement>(pageScopedSelector)
+        : null) ??
       overlay?.querySelector<HTMLElement>("[data-pm-portal-slot]") ?? null;
     // Body slot lives outside the chrome overlay root.  Walk up from
     // the PM element's owner document so jsdom tests and the real
@@ -396,7 +414,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
         // updateState pass.
       }
     }
-  }, [pmSurfaceElement, pmView, activeStory, rects, scrollRoot]);
+  }, [pmSurfaceElement, pmView, activeStory, activeStoryPageIndex, rects, scrollRoot]);
 
   // --------------------------------------------------------------------
   // Render
@@ -440,7 +458,8 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
             page={page}
             facet={facet}
             activeStory={activeStory}
-            onOpenStory={onOpenStory}
+            activeStoryPageIndex={activeStoryPageIndex}
+            onOpenStory={handleOpenStoryForPage}
             visiblePageIndexRange={visiblePageIndexRange}
             renderFrameRevision={renderFrameRevision}
             mediaPreviews={mediaPreviews}