@beyondwork/docx-react-component 1.0.53 → 1.0.54

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

@@ -97,10 +97,17 @@ const MODE_OPTIONS: ReadonlyArray<{ mode: WorkflowScopeMode; label: string }> =
 ];
 
 const SEVERITY_COLOR: Record<IssueSeverity, string> = {
-  low: "var(--color-secondary)",
-  medium: "var(--color-warning)",
-  high: "var(--color-warning)",
-  blocker: "var(--color-danger)",
+  low:     "var(--color-semantic-info)",
+  medium:  "var(--color-semantic-warning)",
+  high:    "var(--color-semantic-error)",
+  blocker: "var(--color-semantic-error)",
+};
+
+const SEVERITY_SOFT: Record<IssueSeverity, string> = {
+  low:     "var(--color-semantic-info-soft)",
+  medium:  "var(--color-semantic-warning-soft)",
+  high:    "var(--color-semantic-error-soft)",
+  blocker: "var(--color-semantic-error-soft)",
 };
 
 const SEVERITY_LABEL: Record<IssueSeverity, string> = {
@@ -151,14 +158,18 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
   }, []);
 
   // --- Escape + click-outside ---------------------------------------------
+  // Pinned cards survive Escape and click-outside; only unpinned cards
+  // are dismissed by those gestures.
   React.useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
+        if (pinned) return; // pinned cards are immune to Escape
         event.stopPropagation();
         onClose();
       }
     };
     const onPointerDown = (event: PointerEvent) => {
+      if (pinned) return; // pinned cards are immune to click-outside
       const root = rootRef.current;
       if (!root) return;
       if (event.target instanceof Node && root.contains(event.target)) return;
@@ -170,7 +181,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
       window.removeEventListener("keydown", onKey, true);
       window.removeEventListener("pointerdown", onPointerDown, true);
     };
-  }, [onClose]);
+  }, [onClose, pinned]);
 
   // --- Focus trap ----------------------------------------------------------
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -201,7 +212,8 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
   return (
     <div
       ref={rootRef}
-      className="wre-scope-card pointer-events-auto absolute flex w-80 max-w-[22rem] flex-col gap-2 rounded-lg border border-border bg-canvas p-3 text-sm shadow-[var(--shadow-float)]"
+      className="wre-scope-card pointer-events-auto absolute flex min-w-[320px] max-w-[500px] flex-col gap-2 rounded-[var(--radius-xl)] border border-[var(--color-border-default)] bg-[var(--color-bg-canvas)] p-[14px] text-sm shadow-[var(--shadow-float)]"
+      style={{ padding: "calc(14px * var(--space-density-multiplier))" }}
       role="dialog"
       aria-modal="false"
       aria-labelledby={headerId}
@@ -215,7 +227,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
       <div className="flex items-center justify-between gap-2">
         <div
           id={headerId}
-          className="flex min-w-0 flex-1 items-center gap-2 text-xs font-medium text-primary"
+          className="flex min-w-0 flex-1 items-center gap-2 text-xs font-medium text-[var(--color-text-primary)]"
         >
           <span
             className={`wre-scope-rail-icon wre-scope-rail-icon-${posturePresentationIcon(model.posture)}`}
@@ -226,7 +238,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
             {postureLabel}
           </span>
           {model.label ? (
-            <span className="truncate text-tertiary">· {model.label}</span>
+            <span className="truncate text-[var(--color-text-tertiary)]">· {model.label}</span>
           ) : null}
         </div>
         <div className="flex items-center gap-1">
@@ -237,8 +249,8 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
               aria-pressed={pinned ? "true" : "false"}
               className={`flex h-6 w-6 items-center justify-center rounded-sm text-[10px] font-semibold uppercase tracking-[0.06em] transition-colors ${
                 pinned
-                  ? "bg-surface text-accent"
-                  : "text-tertiary hover:bg-surface hover:text-primary"
+                  ? "bg-surface text-[var(--color-accent-primary)]"
+                  : "text-[var(--color-text-tertiary)] hover:bg-surface hover:text-[var(--color-text-primary)]"
               }`}
               onClick={onTogglePin}
               data-testid="scope-card-pin"
@@ -264,7 +276,7 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
         <div
           role="group"
           aria-label="Scope mode"
-          className="flex gap-1 rounded-md border border-border bg-surface p-0.5"
+          className="flex items-center gap-0 border-b border-[var(--color-border-default)]"
         >
           {MODE_OPTIONS.map(({ mode, label }) => {
             const active = model.posture === mode;
@@ -273,10 +285,10 @@ export const TwScopeCard: React.FC<TwScopeCardProps> = ({
                 key={mode}
                 type="button"
                 aria-pressed={active ? "true" : "false"}
-                className={`flex-1 rounded-sm px-2 py-1 text-xs font-medium transition-colors ${
+                className={`px-3 py-1.5 text-xs font-medium border-b-2 transition-colors ${
                   active
-                    ? "bg-canvas text-primary shadow-sm"
-                    : "text-secondary hover:bg-canvas hover:text-primary"
+                    ? "border-[var(--color-accent-primary)] text-[var(--color-text-primary)]"
+                    : "border-transparent text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)]"
                 }`}
                 onClick={() => onModeChange(mode)}
                 data-testid={`scope-card-mode-${mode}`}
@@ -382,10 +394,13 @@ const IssueRow: React.FC<{
       <div className="flex items-center gap-1.5 text-[11px]">
         <span
           aria-hidden="true"
-          className="inline-block h-2 w-2 rounded-full"
-          style={{ background: SEVERITY_COLOR[issue.severity] }}
-        />
-        <span className="font-semibold text-primary">
+          className="inline-flex items-center rounded-[var(--radius-sm)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.08em]"
+          style={{
+            color: SEVERITY_COLOR[issue.severity],
+            backgroundColor: SEVERITY_SOFT[issue.severity],
+          }}
+          data-testid="scope-card-severity-badge"
+        >
           {SEVERITY_LABEL[issue.severity]}
         </span>
         {issue.owner ? (

package/src/ui-tailwind/chrome-overlay/tw-table-continuation-header.tsx

@@ -0,0 +1,94 @@
+/**
+ * Renders repeated header rows for a multi-page table on a continuation page.
+ *
+ * Architecture: one PM view → one `<table>` DOM element per table. NodeView
+ * cannot clip rows by page, so header repetition on continuation pages must
+ * come from a chrome overlay. This component renders an absolutely-positioned
+ * `<table>` (header rows only) at the Y-offset of the table's first row on
+ * this page, computed from `facet.getTableBodyYOffsetOnPage`. Visual-only
+ * (`aria-hidden`, `pointer-events: none`); no effect on PM doc structure.
+ */
+
+import React from "react";
+import type { SurfaceTableRowSnapshot } from "../../api/public-types.ts";
+import type { WordReviewEditorLayoutFacet } from "../../runtime/layout/public-facet.ts";
+
+export interface TwTableContinuationHeaderProps {
+  blockId: string;
+  pageIndex: number;
+  facet: WordReviewEditorLayoutFacet;
+  /** Pre-resolved header rows (from `SurfaceTableBlock.rows[ref.sourceRowIndex]`). */
+  headerRows: readonly SurfaceTableRowSnapshot[];
+  /** px-per-twip conversion factor from the page layout. */
+  pxPerTwip: number;
+  /** Top edge of the page body in px (absolute within the page frame). */
+  bodyOriginTopPx: number;
+}
+
+function TwTableContinuationHeaderInner({
+  blockId,
+  pageIndex,
+  facet,
+  headerRows,
+  pxPerTwip,
+  bodyOriginTopPx,
+}: TwTableContinuationHeaderProps): React.ReactElement | null {
+  const yOffsetTwips = facet.getTableBodyYOffsetOnPage(blockId, pageIndex);
+  if (yOffsetTwips === null || headerRows.length === 0) return null;
+
+  const topPx = bodyOriginTopPx + yOffsetTwips * pxPerTwip;
+
+  return (
+    <div
+      aria-hidden
+      style={{
+        position: "absolute",
+        top: `${topPx}px`,
+        left: 0,
+        right: 0,
+        pointerEvents: "none",
+        overflow: "hidden",
+      }}
+    >
+      <table style={{ width: "100%", borderCollapse: "collapse" }}>
+        <tbody>
+          {headerRows.map((row, ri) => (
+            <tr key={ri}>
+              {row.cells.map((cell, ci) => (
+                <td
+                  key={ci}
+                  colSpan={cell.colspan ?? 1}
+                  style={{
+                    backgroundColor: cell.backgroundColor ?? undefined,
+                    verticalAlign: cell.verticalAlign ?? "top",
+                    borderTop: cell.borderTop ?? undefined,
+                    borderRight: cell.borderRight ?? undefined,
+                    borderBottom: cell.borderBottom ?? undefined,
+                    borderLeft: cell.borderLeft ?? undefined,
+                    padding: "2px 4px",
+                  }}
+                >
+                  {cell.content
+                    .filter((b) => b.kind === "paragraph")
+                    .map((b, bi) =>
+                      b.kind === "paragraph" ? (
+                        <span key={bi}>
+                          {b.segments
+                            .map((s) => ("text" in s ? s.text : ""))
+                            .join("")}
+                        </span>
+                      ) : null,
+                    )}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export const TwTableContinuationHeader = React.memo(
+  TwTableContinuationHeaderInner,
+);

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

@@ -308,24 +308,37 @@ function buildChromeWidgetDomUncached(input: ChromeWidgetInput): HTMLElement {
     line.style.right = "0";
     line.style.top = `${Math.round(input.interGapPx / 2)}px`;
     line.style.height = "0";
-    line.style.borderTop = "1px dotted var(--color-border, rgba(0,0,0,0.3))";
+    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) - 9}px`;
+    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, #6b7280)";
-    badge.style.backgroundColor =
-      "var(--color-surface, rgba(255,255,255,0.9))";
-    badge.style.padding = "0 8px";
+    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);
     return root;
   }
@@ -360,7 +373,7 @@ function buildChromeWidgetDomUncached(input: ChromeWidgetInput): HTMLElement {
   label.style.fontSize = "10px";
   label.style.letterSpacing = "0.12em";
   label.style.textTransform = "uppercase";
-  label.style.color = "var(--color-tertiary, #6b7280)";
+  label.style.color = "var(--color-text-tertiary)";
   // Intentionally no background, no border, no padding — the label floats
   // transparently in the workspace-canvas gap.
   root.appendChild(label);

package/src/ui-tailwind/editor-surface/scroll-anchor.ts

@@ -0,0 +1,93 @@
+/**
+ * Lane 6d — Slice U3: workspace-mode scroll anchoring.
+ *
+ * Capturing a scroll anchor before toggling `workspaceMode` between
+ * `canvas` and `page` — then restoring it after the new chrome has
+ * painted — keeps the user's viewport over the same paragraph even
+ * though the page-break widgets add ~112 px of vertical spacer per
+ * boundary in page mode.
+ *
+ * The anchor is keyed on `data-block-id` rather than pixel offset so
+ * it survives arbitrary height changes across the toggle.  Each helper
+ * does a single DOM read or a single `scrollTop` write — no mutation
+ * observers, no rAF loops — so the inverted-PM contract is preserved.
+ */
+
+export interface ScrollAnchor {
+  /** `data-block-id` of the topmost block straddling or below scrollTop. */
+  blockId: string;
+  /**
+   * Offset of the viewport's top edge within that block's rect, in CSS
+   * pixels.  `restoreScrollAnchor` adds this back so the block's
+   * leading edge lands in the same relative spot after the toggle.
+   */
+  offsetWithinBlock: number;
+}
+
+/**
+ * Find the scroll anchor for `root` — the scroll container whose
+ * `scrollTop` / `getBoundingClientRect` we will read.
+ *
+ * Returns `null` when the root has no `[data-block-id]` descendants or
+ * when the root itself has zero height (e.g. disconnected during the
+ * toggle).
+ */
+export function findScrollAnchor(root: HTMLElement | null): ScrollAnchor | null {
+  if (!root) return null;
+  const blocks = root.querySelectorAll<HTMLElement>("[data-block-id]");
+  if (blocks.length === 0) return null;
+  const rootRect = root.getBoundingClientRect();
+  const rootTop = rootRect.top;
+  // Walk blocks in document order; pick the first one whose bottom is
+  // >= the scroll root's top edge.  That's the topmost block at least
+  // partially visible (or the one just below when the viewport sits in
+  // a gap between blocks).
+  for (const block of blocks) {
+    const rect = block.getBoundingClientRect();
+    if (rect.bottom < rootTop) continue;
+    const blockId = block.getAttribute("data-block-id");
+    if (!blockId) continue;
+    return {
+      blockId,
+      offsetWithinBlock: rootTop - rect.top,
+    };
+  }
+  return null;
+}
+
+/**
+ * Restore an earlier anchor by finding the same `data-block-id` under
+ * `root` and adjusting `scrollTop` so the block's leading edge sits at
+ * the same offset relative to the viewport.
+ *
+ * Graceful no-op when the anchor's block no longer exists (deletion
+ * mid-toggle, doc swap) or when the new root is empty.
+ */
+export function restoreScrollAnchor(
+  root: HTMLElement | null,
+  anchor: ScrollAnchor | null,
+): void {
+  if (!root || !anchor) return;
+  const selector = `[data-block-id="${cssEscape(anchor.blockId)}"]`;
+  const block = root.querySelector<HTMLElement>(selector);
+  if (!block) return;
+  const rootRect = root.getBoundingClientRect();
+  const blockRect = block.getBoundingClientRect();
+  // We want, post-restore, `blockRect.top === rootRect.top - offsetWithinBlock`
+  // (i.e. the block's leading edge sits `offsetWithinBlock` px above the
+  // viewport top because the viewport sat that far INTO the block at
+  // capture time).  Scrolling by `delta` shifts rects by `-delta`, so
+  // solve for delta: delta = blockRect.top - rootRect.top + offsetWithinBlock.
+  const delta = blockRect.top - rootRect.top + anchor.offsetWithinBlock;
+  root.scrollTop = root.scrollTop + delta;
+}
+
+/**
+ * Minimal CSS.escape shim for attribute selectors — `data-block-id`
+ * values include UUIDs or runtime-offset strings, so escape anything
+ * that isn't a safe word-char.  Avoids depending on DOM `CSS.escape`
+ * which may be absent under some JSDOM builds.
+ */
+function cssEscape(value: string): string {
+  return value.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch}`);
+}

package/src/ui-tailwind/index.ts

@@ -56,6 +56,17 @@ export {
   type TwModeDockAction,
   type TwModeDockProps,
 } from "./chrome/tw-mode-dock";
+export {
+  TwPasteDropToast,
+  type TwPasteDropToastProps,
+} from "./chrome/tw-paste-drop-toast";
+export {
+  TwCommandPalette,
+  isCommandPaletteOpenShortcut,
+  type CommandPaletteGroup,
+  type CommandPaletteItem,
+  type TwCommandPaletteProps,
+} from "./chrome/tw-command-palette";
 
 // Collab chrome (P9) — mount when chromePreset === "collab"; each
 // component is pure presentational and takes snapshots + callbacks.

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

@@ -17,9 +17,11 @@ import React from "react";
 import type {
   EditorStoryTarget,
   PublicPageNode,
+  SurfaceTableRowSnapshot,
   WordReviewEditorLayoutFacet,
 } from "../../api/public-types.ts";
 import type { PageOverlayRect } from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
+import { TwTableContinuationHeader } from "../chrome-overlay/tw-table-continuation-header.tsx";
 import { FRAME_PX_PER_TWIP_AT_96DPI } from "../tw-review-workspace.tsx";
 import { TwPageHeaderBand } from "./tw-page-header-band.tsx";
 import { TwPageFooterBand } from "./tw-page-footer-band.tsx";
@@ -85,6 +87,32 @@ function TwPageChromeEntryInner({
     [facet, pageIndex, page, renderFrameRevision],
   );
 
+  // Continuation table header entries: only non-empty for continuation pages
+  // of multi-page tables (isContinuationPage && repeatedHeaderRows.length > 0).
+  const continuationTableEntries = React.useMemo((): Array<{
+    blockId: string;
+    headerRows: readonly SurfaceTableRowSnapshot[];
+  }> => {
+    const bodyBlocks = facet.getStoryBlocksForRegion(pageIndex, "body");
+    const entries: Array<{
+      blockId: string;
+      headerRows: readonly SurfaceTableRowSnapshot[];
+    }> = [];
+    for (const { blockSnapshot } of bodyBlocks) {
+      if (blockSnapshot.kind !== "table") continue;
+      const plan = facet.getTableRenderPlan(blockSnapshot.blockId, pageIndex);
+      if (!plan || plan.repeatedHeaderRows.length === 0) continue;
+      const headerRows = plan.repeatedHeaderRows
+        .map((ref) => blockSnapshot.rows[ref.sourceRowIndex])
+        .filter((r): r is SurfaceTableRowSnapshot => r !== undefined);
+      if (headerRows.length > 0) {
+        entries.push({ blockId: blockSnapshot.blockId, headerRows });
+      }
+    }
+    return entries;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [facet, pageIndex, page, renderFrameRevision]);
+
   const handleHeaderClick = React.useCallback(
     () => headerStory && onOpenStory?.(headerStory),
     [onOpenStory, headerStory],
@@ -125,6 +153,15 @@ function TwPageChromeEntryInner({
   const bandWidthPx = px(layout.pageWidth - layout.marginLeft - layout.marginRight);
   const bandLeftPx = px(layout.marginLeft);
 
+  // L6d.U1 — 1-based section label for the active-band ribbon.  The
+  // `sectionIndex` on the page is 0-based; reviewers expect "Section 1"
+  // not "Section 0", matching Word's section-break dialog numbering.
+  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);
+
   return (
     <div
       data-page-chrome-frame=""
@@ -146,7 +183,8 @@ function TwPageChromeEntryInner({
           leftPx={bandLeftPx}
           widthPx={bandWidthPx}
           bandHeightPx={px(headerRegion.heightTwips)}
-          isActiveSlot={isActiveStoryMatch(activeStory, headerStory)}
+          isActiveSlot={Boolean(headerActive)}
+          sectionLabel={headerActive ? headerSectionLabel : undefined}
           onClick={handleHeaderClick}
         />
       ) : null}
@@ -158,7 +196,8 @@ function TwPageChromeEntryInner({
           leftPx={bandLeftPx}
           widthPx={bandWidthPx}
           bandHeightPx={px(footerRegion.heightTwips)}
-          isActiveSlot={isActiveStoryMatch(activeStory, footerStory)}
+          isActiveSlot={Boolean(footerActive)}
+          sectionLabel={footerActive ? footerSectionLabel : undefined}
           onClick={handleFooterClick}
         />
       ) : null}
@@ -172,6 +211,17 @@ function TwPageChromeEntryInner({
           heightPx={px(footnoteRegion.heightTwips)}
         />
       ) : null}
+      {continuationTableEntries.map(({ blockId, headerRows }) => (
+        <TwTableContinuationHeader
+          key={`table-cont-${blockId}`}
+          blockId={blockId}
+          pageIndex={pageIndex}
+          facet={facet}
+          headerRows={headerRows}
+          pxPerTwip={FRAME_PX_PER_TWIP_AT_96DPI}
+          bodyOriginTopPx={px(layout.marginTop)}
+        />
+      ))}
     </div>
   );
 }

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

@@ -27,6 +27,11 @@ export interface TwPageFooterBandProps {
   widthPx: number;
   /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
   isActiveSlot: boolean;
+  /**
+   * Lane 6d.U1 — section label for the active-band ribbon (e.g. "Footer — Section 1").
+   * Only rendered when `isActiveSlot` is true.
+   */
+  sectionLabel?: string;
   onClick: () => void;
   "data-testid"?: string;
 }
@@ -39,13 +44,16 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
   leftPx,
   widthPx,
   isActiveSlot,
+  sectionLabel,
   onClick,
   "data-testid": testId,
 }) => {
   return (
     <div
+      className="wre-page-band"
       data-page-band="footer"
       data-page-index={pageIndex}
+      data-active={isActiveSlot ? "true" : undefined}
       data-testid={testId}
       onClick={onClick}
       style={{
@@ -57,6 +65,11 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
         cursor: "pointer",
       }}
     >
+      {isActiveSlot && sectionLabel ? (
+        <span className="wre-page-band__label" data-kind="page-band-label">
+          {sectionLabel}
+        </span>
+      ) : null}
       {isActiveSlot ? (
         <div
           data-pm-portal-slot

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

@@ -28,6 +28,11 @@ export interface TwPageHeaderBandProps {
   widthPx: number;
   /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
   isActiveSlot: boolean;
+  /**
+   * Lane 6d.U1 — section label for the active-band ribbon (e.g. "Header — Section 1").
+   * Only rendered when `isActiveSlot` is true.
+   */
+  sectionLabel?: string;
   onClick: () => void;
   "data-testid"?: string;
 }
@@ -40,13 +45,16 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
   leftPx,
   widthPx,
   isActiveSlot,
+  sectionLabel,
   onClick,
   "data-testid": testId,
 }) => {
   return (
     <div
+      className="wre-page-band"
       data-page-band="header"
       data-page-index={pageIndex}
+      data-active={isActiveSlot ? "true" : undefined}
       data-testid={testId}
       onClick={onClick}
       style={{
@@ -58,6 +66,11 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
         cursor: "pointer",
       }}
     >
+      {isActiveSlot && sectionLabel ? (
+        <span className="wre-page-band__label" data-kind="page-band-label">
+          {sectionLabel}
+        </span>
+      ) : null}
       {isActiveSlot ? (
         <div
           data-pm-portal-slot

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

@@ -361,6 +361,14 @@ export const TwPageStackChromeLayer: React.FC<TwPageStackChromeLayerProps> = ({
       ref={overlayRootRef}
       data-page-stack-chrome-layer=""
       data-testid={testId ?? "page-stack-chrome-layer"}
+      // L6d.U1 — expose the active-story kind so the CSS can dim the
+      // body when an H/F story is being edited and un-dim again when
+      // the active story is the main body.
+      data-story-active={
+        activeStory.kind === "header" || activeStory.kind === "footer"
+          ? activeStory.kind
+          : undefined
+      }
       style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
     >
       {rects.map((rect, pageIndex) => {