@beyondwork/docx-react-component 1.0.71 → 1.0.73

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

@@ -4,15 +4,19 @@ import type {
   SurfaceBlockSnapshot,
   SurfaceInlineSegment,
 } from "../../api/public-types.ts";
+import type { MediaPreviewDescriptor } from "../editor-surface/pm-state-from-snapshot.ts";
 import {
   buildMarkerStyle,
   buildParagraphStyle,
   buildSegmentStyle,
+  computeTabWidthsInPoints,
   hasStyleEntries,
   headingClassList,
   resolveHeadingLevel,
 } from "../editor-surface/tw-page-block-view.helpers.ts";
 
+const EMU_PER_PX = 9525;
+
 // ---------------------------------------------------------------------------
 // TwRegionBlockRenderer (P8.4)
 //
@@ -37,7 +41,27 @@ import {
 // Inline segment renderer — mirrors `tw-page-block-view`'s `renderSegment`.
 // ---------------------------------------------------------------------------
 
-function renderSegment(seg: SurfaceInlineSegment): React.ReactNode {
+/**
+ * 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": {
       const style = buildSegmentStyle(seg.marks, seg.markAttrs);
@@ -51,23 +75,83 @@ 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":
+    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
+      // to the placeholder chip — a deliberate signal that the media part
+      // exists canonical-side but no bytes have been resolved yet.
+      const preview = mediaPreviews[seg.mediaId];
+      const widthEmu = preview?.widthEmu ?? seg.anchor?.extent.widthEmu;
+      const heightEmu = preview?.heightEmu ?? seg.anchor?.extent.heightEmu;
+      if (preview?.src && seg.state !== "missing") {
+        const widthPx = widthEmu
+          ? Math.max(8, Math.round(widthEmu / EMU_PER_PX))
+          : undefined;
+        const heightPx = heightEmu
+          ? Math.max(8, Math.round(heightEmu / EMU_PER_PX))
+          : undefined;
+        return (
+          <img
+            key={seg.segmentId}
+            src={preview.src}
+            alt={seg.altText ?? ""}
+            data-node-type="image"
+            data-media-id={seg.mediaId}
+            style={{
+              display: "inline-block",
+              verticalAlign: "middle",
+              ...(widthPx ? { width: `${widthPx}px` } : {}),
+              ...(heightPx ? { height: `${heightPx}px` } : {}),
+              maxWidth: "100%",
+              objectFit: "contain",
+            }}
+          />
+        );
+      }
+      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}
           data-node-type="image"
+          data-media-id={seg.mediaId}
+          data-state={seg.state}
           style={{
             display: "inline-block",
             width: "48px",
@@ -80,6 +164,7 @@ function renderSegment(seg: SurfaceInlineSegment): React.ReactNode {
           title={seg.altText ?? "Image"}
         />
       );
+    }
     case "field_ref":
       return (
         <span
@@ -121,8 +206,12 @@ function renderSegment(seg: SurfaceInlineSegment): React.ReactNode {
 
 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"];
@@ -131,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
@@ -195,7 +285,7 @@ function RegionParagraph({
     <div {...attrs}>
       {prefixSpan}
       <span className="pm-paragraph-content">
-        {block.segments.map((seg) => renderSegment(seg))}
+        {block.segments.map((seg) => renderSegment(seg, mediaPreviews, fallbackDisplay, tabWidthsPt))}
       </span>
     </div>
   );
@@ -203,8 +293,12 @@ 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",
@@ -273,7 +367,12 @@ function RegionTable({
                   style={Object.keys(cellStyle).length > 0 ? cellStyle : undefined}
                 >
                   {cell.content.map((childBlock) => (
-                    <RegionBlockItem key={childBlock.blockId} block={childBlock} />
+                    <RegionBlockItem
+                      key={childBlock.blockId}
+                      block={childBlock}
+                      mediaPreviews={mediaPreviews}
+                      fallbackDisplay={fallbackDisplay}
+                    />
                   ))}
                 </td>
               );
@@ -311,14 +410,18 @@ 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} />;
+      return <RegionParagraph block={block} mediaPreviews={mediaPreviews} fallbackDisplay={fallbackDisplay} />;
     case "table":
-      return <RegionTable block={block} />;
+      return <RegionTable block={block} mediaPreviews={mediaPreviews} fallbackDisplay={fallbackDisplay} />;
     case "sdt_block":
       return (
         <section
@@ -328,7 +431,7 @@ function RegionBlockItem({
           style={{ margin: "8px 0" }}
         >
           {block.children.map((child) => (
-            <RegionBlockItem key={child.blockId} block={child} />
+            <RegionBlockItem key={child.blockId} block={child} mediaPreviews={mediaPreviews} fallbackDisplay={fallbackDisplay} />
           ))}
         </section>
       );
@@ -348,8 +451,26 @@ export interface TwRegionBlockRendererProps {
   blocks: readonly SurfaceBlockSnapshot[];
   /** Optional class name applied to the root wrapper. */
   className?: string;
+  /**
+   * Media preview catalog. Without it, any `kind: "image"` segment falls
+   * back to the 48×32 gray placeholder chip — the pre-existing behavior
+   * for the 7-of-8 CCEP docs whose headers carry a logo. Pass the same
+   * catalog the body renderer uses (`props.mediaPreviews` on the
+   * workspace root) to light up headers + footers + footnote bodies with
+   * 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> = {};
+
 /**
  * TwRegionBlockRenderer — read-only React renderer for a region's
  * `SurfaceBlockSnapshot[]`.  Used by the header / footer / footnote /
@@ -363,9 +484,12 @@ export interface TwRegionBlockRendererProps {
 export function TwRegionBlockRenderer({
   blocks,
   className,
+  mediaPreviews,
+  fallbackDisplay = "chip",
 }: TwRegionBlockRendererProps): React.ReactElement {
   const rootClasses = ["ProseMirror"];
   if (className) rootClasses.push(className);
+  const previews = mediaPreviews ?? EMPTY_MEDIA_PREVIEWS;
   return (
     <div
       className={rootClasses.join(" ")}
@@ -373,7 +497,12 @@ export function TwRegionBlockRenderer({
       data-region-block-renderer=""
     >
       {blocks.map((block) => (
-        <RegionBlockItem key={block.blockId} block={block} />
+        <RegionBlockItem
+          key={block.blockId}
+          block={block}
+          mediaPreviews={previews}
+          fallbackDisplay={fallbackDisplay}
+        />
       ))}
     </div>
   );

package/src/ui-tailwind/review/comment-markdown-renderer.tsx

@@ -5,7 +5,7 @@ import type {
   CommentBody,
   CommentMention,
 } from "../../api/comment-presentation-types";
-import { sanitizeMarkdown } from "../../runtime/markdown-sanitizer";
+import { sanitizeMarkdown } from "../../api/public-types";
 
 export interface CommentMarkdownRendererProps {
   body: CommentBody;

package/src/ui-tailwind/review-workspace/page-chrome.ts

@@ -1,10 +1,10 @@
 import type { CSSProperties } from "react";
 
-import type {
-  DocumentNavigationSnapshot,
-  RuntimeRenderSnapshot,
+import {
+  type DocumentNavigationSnapshot,
+  type RuntimeRenderSnapshot,
+  DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
 } from "../../api/public-types";
-import { DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP } from "../../runtime/page-layout-estimation.ts";
 import { computeLineMarkersIfEnabled } from "../page-chrome-model.ts";
 
 export interface PageChromeModel {

package/src/ui-tailwind/review-workspace/use-workspace-side-effects.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
-import { createCanvasBackend } from "../../runtime/layout/index.ts";
+import { createCanvasBackend } from "../../api/public-types.ts";
 import type { RuntimeRenderSnapshot } from "../../api/public-types.ts";
 import {
   incrementInvalidationCounter,

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
@@ -1030,6 +1037,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             onOpenStory={props.onOpenStory}
                             pmSurfaceElement={pmSurfaceElement}
                             visiblePageIndexRange={visiblePageIndexRange}
+                            mediaPreviews={props.mediaPreviews}
                           />
                         ) : null}
                       </div>