@beyondwork/docx-react-component 1.0.72 → 1.0.73

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

@@ -85,6 +85,54 @@ export function resolveMarkerAlignCss(raw: string | undefined): React.CSSPropert
   }
 }
 
+/**
+ * Precompute per-tab-segment widths from the paragraph's tabStops.
+ *
+ * Returns a map `segmentId -> widthPt`. The N-th tab segment gets the
+ * width `(tabStops[N].pos - (tabStops[N-1]?.pos ?? 0)) / 20` points —
+ * the horizontal span from the previous stop (or the paragraph's
+ * content-left edge) to the current stop.
+ *
+ * This is a conservative approximation of Word's real tab algorithm
+ * (which advances to the next stop >= cumulative X considering prior
+ * content width). Without run-width measurement, the approximation
+ * holds best when the text in each zone is short relative to the zone
+ * width — which is exactly the three-zone-header / TOC case L11 needs
+ * to render correctly.
+ *
+ * Direct `block.tabStops` wins over `block.resolvedParagraphFormatting.tabStops`
+ * (consistent with other resolved fields).
+ */
+export function computeTabWidthsInPoints(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): Map<string, number> {
+  const widths = new Map<string, number>();
+  // Direct `block.tabStops` uses the public `{pos, val?, leader?}` shape;
+  // `block.resolvedParagraphFormatting.tabStops` uses the canonical
+  // `{position, align, leader?}` shape. Normalize to a single accessor.
+  const readPos = (stop: { pos?: number; position?: number }): number =>
+    stop.pos ?? stop.position ?? 0;
+
+  const rawStops: Array<{ pos?: number; position?: number }> | undefined =
+    block.tabStops ?? block.resolvedParagraphFormatting?.tabStops;
+  if (!rawStops || rawStops.length === 0) return widths;
+
+  let tabIndex = 0;
+  for (const seg of block.segments) {
+    if (seg.kind !== "tab") continue;
+    const stop = rawStops[tabIndex];
+    if (stop) {
+      const prevPos = tabIndex > 0 ? readPos(rawStops[tabIndex - 1]) : 0;
+      const widthTwips = readPos(stop) - prevPos;
+      if (widthTwips > 0) {
+        widths.set(seg.segmentId, widthTwips / 20);
+      }
+    }
+    tabIndex += 1;
+  }
+  return widths;
+}
+
 /** Build CSSProperties for a paragraph block from spacing/indent/alignment. */
 export function buildParagraphStyle(
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
@@ -203,6 +251,35 @@ export function buildParagraphStyle(
     style.marginTop = "16px";
   }
 
+  // `<w:framePr>` out-of-flow frame (ECMA-376 §17.3.1.11). L04 returns 0
+  // from measureBlockHeight for these paragraphs (a298391e) so the inline
+  // flow doesn't double-count; L11 renders them absolutely positioned.
+  // Drop-cap (dropCap="drop"|"margin") is in-flow — only the initial
+  // letter is framed — so skip the absolute switch there.
+  const framePr = block.frameProperties;
+  if (framePr && framePr.dropCap !== "drop" && framePr.dropCap !== "margin") {
+    style.position = "absolute";
+    if (typeof framePr.xTwips === "number") {
+      style.left = `${framePr.xTwips / 20}pt`;
+    }
+    if (typeof framePr.yTwips === "number") {
+      style.top = `${framePr.yTwips / 20}pt`;
+    }
+    if (typeof framePr.widthTwips === "number") {
+      style.width = `${framePr.widthTwips / 20}pt`;
+    }
+    if (typeof framePr.heightTwips === "number") {
+      if (framePr.hRule === "exact") {
+        style.height = `${framePr.heightTwips / 20}pt`;
+      } else if (framePr.hRule === "atLeast") {
+        style.minHeight = `${framePr.heightTwips / 20}pt`;
+      }
+      // hRule === "auto" (or missing) leaves the frame's vertical size
+      // content-driven. The height field is ignored — OOXML treats the
+      // value as a hint that layout engines may override.
+    }
+  }
+
   return style;
 }
 

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

@@ -8,6 +8,7 @@ import {
   buildMarkerStyle,
   buildParagraphStyle,
   buildSegmentStyle,
+  computeTabWidthsInPoints,
   hasStyleEntries,
   headingClassList,
   resolveHeadingLevel,
@@ -18,7 +19,7 @@ import {
 // ---------------------------------------------------------------------------
 
 /** Render a single inline segment. */
-function renderSegment(seg: SurfaceInlineSegment): React.ReactNode {
+function renderSegment(seg: SurfaceInlineSegment, tabWidthsPt: Map<string, number>): React.ReactNode {
   switch (seg.kind) {
     case "text": {
       const style = buildSegmentStyle(seg.marks, seg.markAttrs);
@@ -32,16 +33,22 @@ function renderSegment(seg: SurfaceInlineSegment): React.ReactNode {
         </span>
       );
     }
-    case "tab":
+    case "tab": {
+      const widthPt = tabWidthsPt.get(seg.segmentId);
+      const tabStyle: React.CSSProperties =
+        typeof widthPt === "number"
+          ? { display: "inline-block", width: `${widthPt}pt`, minWidth: "8px" }
+          : { display: "inline-block", width: "32px", minWidth: "8px" };
       return (
         <span
           key={seg.segmentId}
           data-node-type="tab"
-          style={{ display: "inline-block", width: "32px", minWidth: "8px" }}
+          style={tabStyle}
         >
           {"\u00A0"}
         </span>
       );
+    }
     case "hard_break":
       return <br key={seg.segmentId} />;
     case "image":
@@ -114,6 +121,7 @@ function ParagraphBlock({
   }
 
   const pStyle = buildParagraphStyle(block);
+  const tabWidthsPt = computeTabWidthsInPoints(block);
   const attrs: React.HTMLAttributes<HTMLParagraphElement> & {
     "data-heading-level"?: string;
     "data-numbered"?: string;
@@ -177,7 +185,7 @@ function ParagraphBlock({
     <p {...attrs}>
       {prefixSpan}
       <span className="pm-paragraph-content">
-        {block.segments.map((seg) => renderSegment(seg))}
+        {block.segments.map((seg) => renderSegment(seg, tabWidthsPt))}
       </span>
     </p>
   );

package/src/ui-tailwind/page-stack/floating-image-overlay-model.ts

@@ -101,40 +101,57 @@ export function collectFloatingImageOverlayItems(input: {
   );
   const items: FloatingImageOverlayItem[] = [];
 
-  walkSurfaceBlocks(surface.blocks, (segment) => {
-    if (segment.kind !== "image" || !shouldRenderAbsoluteFloatingImageInPageOverlay(segment.anchor)) {
-      return;
-    }
-
-    const pages = resolveTargetPages(facet, segment.from, activeStory);
-    for (const page of pages) {
-      const pageRect = rectByPageIndex.get(page.pageIndex);
-      if (!pageRect) {
-        continue;
+  const collectFromStory = (
+    blocks: readonly SurfaceBlockSnapshot[],
+    storyTarget: EditorStoryTarget,
+  ) => {
+    walkSurfaceBlocks(blocks, (segment) => {
+      if (
+        segment.kind !== "image" ||
+        !shouldRenderAbsoluteFloatingImageInPageOverlay(segment.anchor)
+      ) {
+        return;
       }
-      const localRect = resolveFloatingImageLocalRect(page, activeStory, segment, pxPerTwip);
-      if (!localRect) {
-        continue;
+
+      const pages = resolveTargetPages(facet, segment.from, storyTarget);
+      for (const page of pages) {
+        const pageRect = rectByPageIndex.get(page.pageIndex);
+        if (!pageRect) {
+          continue;
+        }
+        const localRect = resolveFloatingImageLocalRect(page, storyTarget, segment, pxPerTwip);
+        if (!localRect) {
+          continue;
+        }
+        const preview = input.mediaPreviews?.[segment.mediaId];
+        items.push({
+          key: `${segment.segmentId}:${page.pageId}`,
+          mediaId: segment.mediaId,
+          from: segment.from,
+          to: segment.to,
+          pageId: page.pageId,
+          pageIndex: page.pageIndex,
+          topPx: pageRect.topPx + localRect.topPx,
+          leftPx: localRect.leftPx,
+          widthPx: localRect.widthPx,
+          heightPx: localRect.heightPx,
+          behindDoc: Boolean(segment.anchor?.behindDoc),
+          src: preview?.src ?? null,
+          altText: segment.altText ?? null,
+          detail: segment.detail ?? null,
+        });
       }
-      const preview = input.mediaPreviews?.[segment.mediaId];
-      items.push({
-        key: `${segment.segmentId}:${page.pageId}`,
-        mediaId: segment.mediaId,
-        from: segment.from,
-        to: segment.to,
-        pageId: page.pageId,
-        pageIndex: page.pageIndex,
-        topPx: pageRect.topPx + localRect.topPx,
-        leftPx: localRect.leftPx,
-        widthPx: localRect.widthPx,
-        heightPx: localRect.heightPx,
-        behindDoc: Boolean(segment.anchor?.behindDoc),
-        src: preview?.src ?? null,
-        altText: segment.altText ?? null,
-        detail: segment.detail ?? null,
-      });
-    }
-  });
+    });
+  };
+
+  // coord-01 §9 / §5.1 — CCEP logos live in header stories; collect from
+  // the main story for the active-story case AND from every secondary
+  // story so header/footer images reach the overlay regardless of which
+  // story is active in the editor.
+  collectFromStory(surface.blocks, activeStory);
+  for (const secondary of surface.secondaryStories ?? []) {
+    collectFromStory(secondary.blocks, secondary.target);
+  }
 
   return items;
 }

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

@@ -80,7 +80,11 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
           style={{ width: "100%", height: "100%" }}
         />
       ) : (
-        <TwRegionBlockRenderer blocks={blocks} mediaPreviews={mediaPreviews} />
+        <TwRegionBlockRenderer
+          blocks={blocks}
+          mediaPreviews={mediaPreviews}
+          fallbackDisplay="hidden"
+        />
       )}
     </div>
   );

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

@@ -84,7 +84,11 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
           style={{ width: "100%", height: "100%" }}
         />
       ) : (
-        <TwRegionBlockRenderer blocks={blocks} mediaPreviews={mediaPreviews} />
+        <TwRegionBlockRenderer
+          blocks={blocks}
+          mediaPreviews={mediaPreviews}
+          fallbackDisplay="hidden"
+        />
       )}
     </div>
   );

package/src/ui-tailwind/page-stack/tw-region-block-renderer.tsx

@@ -9,6 +9,7 @@ import {
   buildMarkerStyle,
   buildParagraphStyle,
   buildSegmentStyle,
+  computeTabWidthsInPoints,
   hasStyleEntries,
   headingClassList,
   resolveHeadingLevel,
@@ -40,9 +41,26 @@ const EMU_PER_PX = 9525;
 // Inline segment renderer — mirrors `tw-page-block-view`'s `renderSegment`.
 // ---------------------------------------------------------------------------
 
+/**
+ * Fallback visual for image segments that cannot resolve real bytes
+ * (no preview in `mediaPreviews`, or `seg.state === "missing"`).
+ *
+ * - `"chip"` (default) — 48×32 gray placeholder. Valuable dev-mode signal;
+ *   correct for the body renderer.
+ * - `"hidden"` — zero-size, `aria-hidden` span. Correct inside header/
+ *   footer bands, where the chip geometry visibly disrupts layout.
+ *
+ * The DOM node (with `data-node-type="image"` + `data-state`) is still
+ * emitted under `"hidden"` so diagnostics + tests can still see that an
+ * image segment was present.
+ */
+export type RegionImageFallbackDisplay = "chip" | "hidden";
+
 function renderSegment(
   seg: SurfaceInlineSegment,
   mediaPreviews: Record<string, MediaPreviewDescriptor>,
+  fallbackDisplay: RegionImageFallbackDisplay,
+  tabWidthsPt: Map<string, number>,
 ): React.ReactNode {
   switch (seg.kind) {
     case "text": {
@@ -57,19 +75,32 @@ function renderSegment(
         </span>
       );
     }
-    case "tab":
+    case "tab": {
+      const widthPt = tabWidthsPt.get(seg.segmentId);
+      const tabStyle: React.CSSProperties =
+        typeof widthPt === "number"
+          ? { display: "inline-block", width: `${widthPt}pt`, minWidth: "8px" }
+          : { display: "inline-block", width: "32px", minWidth: "8px" };
       return (
         <span
           key={seg.segmentId}
           data-node-type="tab"
-          style={{ display: "inline-block", width: "32px", minWidth: "8px" }}
+          style={tabStyle}
         >
           {"\u00A0"}
         </span>
       );
+    }
     case "hard_break":
       return <br key={seg.segmentId} />;
     case "image": {
+      // §5.1 gap 3 — floating-anchor images are owned by the absolute
+      // floating-image overlay (`TwFloatingImageLayer`). Emitting them
+      // inline here would double-paint the CCEP header logo on every
+      // page. Skip entirely so only the overlay renders them.
+      if (seg.anchor?.display === "floating") {
+        return null;
+      }
       // Mirror body-renderer behavior (`pm-state-from-snapshot.ts` :500+):
       // look up the preview via `seg.mediaId` and render a real <img> when
       // available. Without a preview (or `state === "missing"`), fall back
@@ -103,6 +134,18 @@ function renderSegment(
           />
         );
       }
+      if (fallbackDisplay === "hidden") {
+        return (
+          <span
+            key={seg.segmentId}
+            data-node-type="image"
+            data-media-id={seg.mediaId}
+            data-state={seg.state}
+            aria-hidden="true"
+            style={{ display: "inline-block", width: 0, height: 0 }}
+          />
+        );
+      }
       return (
         <span
           key={seg.segmentId}
@@ -164,9 +207,11 @@ function renderSegment(
 function RegionParagraph({
   block,
   mediaPreviews,
+  fallbackDisplay,
 }: {
   block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>;
   mediaPreviews: Record<string, MediaPreviewDescriptor>;
+  fallbackDisplay: RegionImageFallbackDisplay;
 }): React.ReactElement {
   const headingLevel = resolveHeadingLevel(block.styleId, block.outlineLevel);
   const classes: string[] = ["leading-relaxed"];
@@ -175,6 +220,7 @@ function RegionParagraph({
   }
 
   const pStyle = buildParagraphStyle(block);
+  const tabWidthsPt = computeTabWidthsInPoints(block);
 
   // Numbering prefix span — matches tw-page-block-view so region content that
   // happens to carry numbering (e.g. footnote bodies authored as lists) shows
@@ -239,7 +285,7 @@ function RegionParagraph({
     <div {...attrs}>
       {prefixSpan}
       <span className="pm-paragraph-content">
-        {block.segments.map((seg) => renderSegment(seg, mediaPreviews))}
+        {block.segments.map((seg) => renderSegment(seg, mediaPreviews, fallbackDisplay, tabWidthsPt))}
       </span>
     </div>
   );
@@ -248,9 +294,11 @@ function RegionParagraph({
 function RegionTable({
   block,
   mediaPreviews,
+  fallbackDisplay,
 }: {
   block: Extract<SurfaceBlockSnapshot, { kind: "table" }>;
   mediaPreviews: Record<string, MediaPreviewDescriptor>;
+  fallbackDisplay: RegionImageFallbackDisplay;
 }): React.ReactElement {
   const tableStyle: React.CSSProperties = {
     borderCollapse: "collapse",
@@ -323,6 +371,7 @@ function RegionTable({
                       key={childBlock.blockId}
                       block={childBlock}
                       mediaPreviews={mediaPreviews}
+                      fallbackDisplay={fallbackDisplay}
                     />
                   ))}
                 </td>
@@ -362,15 +411,17 @@ function RegionOpaque({
 function RegionBlockItem({
   block,
   mediaPreviews,
+  fallbackDisplay,
 }: {
   block: SurfaceBlockSnapshot;
   mediaPreviews: Record<string, MediaPreviewDescriptor>;
+  fallbackDisplay: RegionImageFallbackDisplay;
 }): React.ReactElement | null {
   switch (block.kind) {
     case "paragraph":
-      return <RegionParagraph block={block} mediaPreviews={mediaPreviews} />;
+      return <RegionParagraph block={block} mediaPreviews={mediaPreviews} fallbackDisplay={fallbackDisplay} />;
     case "table":
-      return <RegionTable block={block} mediaPreviews={mediaPreviews} />;
+      return <RegionTable block={block} mediaPreviews={mediaPreviews} fallbackDisplay={fallbackDisplay} />;
     case "sdt_block":
       return (
         <section
@@ -380,7 +431,7 @@ function RegionBlockItem({
           style={{ margin: "8px 0" }}
         >
           {block.children.map((child) => (
-            <RegionBlockItem key={child.blockId} block={child} mediaPreviews={mediaPreviews} />
+            <RegionBlockItem key={child.blockId} block={child} mediaPreviews={mediaPreviews} fallbackDisplay={fallbackDisplay} />
           ))}
         </section>
       );
@@ -409,6 +460,13 @@ export interface TwRegionBlockRendererProps {
    * real image bytes.
    */
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  /**
+   * Behavior for image segments that can't resolve real bytes.
+   * Defaults to `"chip"` for back-compat with body-renderer parity;
+   * pass `"hidden"` inside header/footer bands where the 48×32 chip
+   * disrupts band geometry (§5.5 tuning-phase handover).
+   */
+  fallbackDisplay?: RegionImageFallbackDisplay;
 }
 
 const EMPTY_MEDIA_PREVIEWS: Record<string, MediaPreviewDescriptor> = {};
@@ -427,6 +485,7 @@ export function TwRegionBlockRenderer({
   blocks,
   className,
   mediaPreviews,
+  fallbackDisplay = "chip",
 }: TwRegionBlockRendererProps): React.ReactElement {
   const rootClasses = ["ProseMirror"];
   if (className) rootClasses.push(className);
@@ -438,7 +497,12 @@ export function TwRegionBlockRenderer({
       data-region-block-renderer=""
     >
       {blocks.map((block) => (
-        <RegionBlockItem key={block.blockId} block={block} mediaPreviews={previews} />
+        <RegionBlockItem
+          key={block.blockId}
+          block={block}
+          mediaPreviews={previews}
+          fallbackDisplay={fallbackDisplay}
+        />
       ))}
     </div>
   );

package/src/ui-tailwind/theme/editor-theme.css

@@ -1058,30 +1058,29 @@
  * `data-story-active="header|footer"` and the body PM surface dims to
  * 0.65 so the active band reads as the focal surface.
  */
+/*
+ * Designsystem §6.20 — inactive = low-contrast tint (color.bg.muted),
+ * active = tint color.accent.soft + border color.border.accent.
+ * The 3px top accent stripe was the prior signal; §6.20 rejects it in
+ * favor of a border/tint-led active state that reads as "a focal frame"
+ * rather than "a colored line draped across the top".
+ */
 .wre-page-band {
-  opacity: 0.6;
-  transition: opacity var(--motion-fast, 120ms) ease-out;
+  background-color: var(--color-bg-muted);
+  border: 1px solid transparent;
+  transition:
+    background-color var(--motion-fast, 120ms) ease-out,
+    border-color var(--motion-fast, 120ms) ease-out;
   pointer-events: auto;
 }
 
 .wre-page-band:hover {
-  opacity: 0.85;
+  background-color: color-mix(in srgb, var(--color-bg-muted) 80%, var(--color-surface));
 }
 
 .wre-page-band[data-active="true"] {
-  opacity: 1;
-}
-
-.wre-page-band[data-active="true"]::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: var(--color-accent);
-  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
-  pointer-events: none;
+  background-color: var(--color-accent-soft);
+  border: 1px solid var(--color-border-accent);
 }
 
 .wre-page-band__label {

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -351,21 +351,28 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const defaultShellActiveMode: ShellHeaderMode = editorRoleToShellMode(
     viewState.editorRole,
   );
+  // coord-11 §21 — host-supplied shellHeader wins; otherwise the default
+  // TwShellHeader mounts only when `chromeVisibility.shellHeader === true`
+  // (default for every preset except `selection`). The `selection` preset
+  // is intended for minimal embeds (incl. visual-fidelity `chrome=none`)
+  // and must not paint a workspace mode-tab header.
   const renderedShell =
-    props.shellHeader !== undefined ? (
-      props.shellHeader
-    ) : (
-      <TwShellHeader
-        modes={defaultShellModes}
-        activeMode={defaultShellActiveMode}
-        onModeChange={(mode) => {
-          const nextRole = shellModeToEditorRole(mode);
-          if (nextRole !== null && nextRole !== viewState.editorRole) {
-            props.onEditorRoleChange?.(nextRole);
-          }
-        }}
-      />
-    );
+    props.shellHeader !== undefined
+      ? props.shellHeader
+      : chromeVisibility.shellHeader
+        ? (
+          <TwShellHeader
+            modes={defaultShellModes}
+            activeMode={defaultShellActiveMode}
+            onModeChange={(mode) => {
+              const nextRole = shellModeToEditorRole(mode);
+              if (nextRole !== null && nextRole !== viewState.editorRole) {
+                props.onEditorRoleChange?.(nextRole);
+              }
+            }}
+          />
+        )
+        : null;
 
   // Audit §2.5 — context band mounts as a composition-level sibling of
   // the toolbar so the workspace row becomes