@beyondwork/docx-react-component 1.0.84 → 1.0.85

package/src/ui/editor-command-bag.ts

@@ -14,6 +14,7 @@ import type {
   WorkspaceMode,
 } from "../api/public-types.ts";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
+import type { MarkupDisplay } from "./headless/comment-decoration-model.ts";
 
 type CommandHandler = (...args: any[]) => unknown;
 
@@ -22,6 +23,7 @@ export interface EditorCommandBag {
   onZoomChange?(level: ZoomLevel): void;
   onActiveRailTabChange(value: ReviewRailTab): void;
   onShowTrackedChangesChange(show: boolean): void;
+  onReviewMarkupModeChange?(mode: MarkupDisplay): void;
   onUndo(): void;
   onRedo(): void;
   onSetParagraphStyle?(styleId: string): void;
@@ -102,7 +104,7 @@ export interface EditorCommandBag {
   /** Open the footer story for a specific page (double-click on its band). */
   onOpenFooterStoryForPage?(pageIndex: number): void;
   /**
-   * P8.11 — per-page header/footer band click handler.  Receives the
+   * P8.11 — per-page header/footer band double-click handler. Receives the
    * exact `EditorStoryTarget` the band represents; the command bag wires
    * this to `runtime.openStory(target)`.
    */

package/src/ui/headless/revision-decoration-model.ts

@@ -225,6 +225,19 @@ export function buildClassFromRevisionDisplay(
     parts.push("text-secondary");
   }
 
+  // Formatting/property-change revisions carry their semantics through
+  // `kind` even when markup posture has no underline/strike flag. Give
+  // mounted suggestion authoring a visible, non-destructive cue instead
+  // of silently relying on the sidebar/card path.
+  if (
+    parts.length === 0 &&
+    (display.kind === "formatting" || display.kind === "property-change")
+  ) {
+    parts.push(
+      "underline decoration-accent/70 decoration-dotted decoration-1 underline-offset-2",
+    );
+  }
+
   // Surface the author palette color as a CSS variable the renderer
   // can pick up via `var(--wre-revision-author)`. Consumer stylesheet
   // composes this into ring/underline color when the palette slot is

package/src/ui/headless/selection-tool-types.ts

@@ -81,6 +81,8 @@ export interface SuggestionReviewSelectionToolModel extends BaseSelectionToolMod
   canReject: boolean;
   canEditSuggestion: boolean;
   canAddComment: boolean;
+  commentThreadIds?: string[];
+  replyCount?: number;
 }
 
 export type StructureContextKind = "table" | "image" | "object" | "list";

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%" }}
         />
       ) : (