@beyondwork/docx-react-component 1.0.96 → 1.0.97

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

@@ -18,8 +18,15 @@ import {
 } from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
 import {
   collectFloatingImageOverlayItems,
+  type FloatingImageOverlayItem,
   type FloatingImagePreviewDescriptor,
 } from "./floating-image-overlay-model.ts";
+import { buildSegmentStyle } from "../editor-surface/tw-page-block-view.helpers.ts";
+import { buildPictureFilterCss } from "../editor-surface/picture-effects.ts";
+
+const EMU_PER_PX = 9525;
+type FloatingShapeBody = NonNullable<FloatingImageOverlayItem["shape"]>["body"];
+type FloatingShapeBodyAnchor = NonNullable<FloatingShapeBody>["anchor"];
 
 export interface TwFloatingImageLayerProps {
   facet: WordReviewEditorLayoutFacet;
@@ -221,9 +228,9 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
       data-floating-image-count={items.length}
     >
       {items.map((item) => {
-        const interactive = plane === "front" && typeof onActivateFloatingImage === "function";
+        const interactive =
+          !item.shape && plane === "front" && typeof onActivateFloatingImage === "function";
         const commonProps = {
-          key: item.key,
           className: interactive
             ? "pointer-events-auto absolute m-0 border-0 bg-transparent p-0"
             : "pointer-events-none absolute m-0 border-0 bg-transparent p-0",
@@ -234,9 +241,21 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
             left: `${item.leftPx}px`,
             width: `${item.widthPx}px`,
             height: `${item.heightPx}px`,
+            ...(item.zIndex !== undefined ? { zIndex: item.zIndex } : {}),
           },
         } as const;
-        const content = item.src ? (
+        const imageFilter = buildPictureFilterCss(item.pictureEffects);
+        const content = item.shape ? (
+          <div
+            className="flex h-full w-full overflow-hidden"
+            title={item.detail ?? item.shape.label}
+            style={buildFloatingShapeBoxStyle(item)}
+          >
+            <span style={buildFloatingShapeTextStyle(item)}>
+              {item.shape.text}
+            </span>
+          </div>
+        ) : item.src ? (
           <img
             src={item.src}
             alt={interactive ? item.altText ?? "" : ""}
@@ -247,6 +266,8 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
               width: "100%",
               height: "100%",
               objectFit: "fill",
+              ...(imageFilter ? { filter: imageFilter } : {}),
+              ...(item.pictureEffects?.srcRect ? { clipPath: srcRectToInset(item.pictureEffects.srcRect) } : {}),
             }}
           />
         ) : (
@@ -259,13 +280,14 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
         );
         if (!interactive) {
           return (
-            <div {...commonProps} aria-hidden="true">
+            <div key={item.key} {...commonProps} aria-hidden="true">
               {content}
             </div>
           );
         }
         return (
           <button
+            key={item.key}
             {...commonProps}
             type="button"
             tabIndex={-1}
@@ -287,4 +309,92 @@ export const TwFloatingImageLayer: React.FC<TwFloatingImageLayerProps> = ({
   );
 };
 
+function buildFloatingShapeBoxStyle(
+  item: FloatingImageOverlayItem,
+): React.CSSProperties {
+  const fill = item.shape?.fill;
+  const line = item.shape?.line;
+  const style: React.CSSProperties = {
+    boxSizing: "border-box",
+    alignItems: bodyAnchorToAlignItems(item.shape?.body?.anchor),
+    justifyContent: inferTextBoxJustification(item.shape?.text),
+    padding: shapeBodyPadding(item.shape?.body),
+    textAlign: inferTextBoxTextAlign(item.shape?.text),
+    backgroundColor: "transparent",
+    border: "none",
+  };
+  if (fill?.kind === "solid" && fill.colorType === "srgbClr" && isSafeHexColor(fill.color)) {
+    style.backgroundColor = `#${fill.color}`;
+  }
+  if (line && !line.noLine && line.color && isSafeHexColor(line.color)) {
+    style.border = `${Math.max(1, Math.round((line.widthEmu ?? 9525) / EMU_PER_PX))}px solid #${line.color}`;
+  }
+  return style;
+}
+
+function bodyAnchorToAlignItems(
+  anchor: FloatingShapeBodyAnchor,
+): React.CSSProperties["alignItems"] {
+  switch (anchor) {
+    case "t":
+      return "flex-start";
+    case "b":
+      return "flex-end";
+    case "ctr":
+    default:
+      return "center";
+  }
+}
+
+function shapeBodyPadding(
+  body: FloatingShapeBody,
+): string {
+  const top = emuInsetToPx(body?.insetTopEmu, 0);
+  const right = emuInsetToPx(body?.insetRightEmu, 4);
+  const bottom = emuInsetToPx(body?.insetBottomEmu, 0);
+  const left = emuInsetToPx(body?.insetLeftEmu, 4);
+  return `${top}px ${right}px ${bottom}px ${left}px`;
+}
+
+function emuInsetToPx(value: number | undefined, fallbackPx: number): number {
+  return value === undefined ? fallbackPx : Math.max(0, Math.round(value / EMU_PER_PX));
+}
+
+function buildFloatingShapeTextStyle(
+  item: FloatingImageOverlayItem,
+): React.CSSProperties {
+  const style = buildSegmentStyle(item.shape?.marks, item.shape?.markAttrs);
+  if (item.shape?.markAttrs?.fontSize) {
+    style.fontSize = `${item.shape.markAttrs.fontSize / 2}pt`;
+  }
+  const rawColor = item.shape?.markAttrs?.textColor;
+  if (rawColor && isSafeHexColor(rawColor)) {
+    style.color = `#${rawColor}`;
+  }
+  if (!style.fontSize) {
+    style.fontSize = `${Math.max(12, Math.min(56, Math.round(item.heightPx * 0.42)))}px`;
+  }
+  if (!style.lineHeight) {
+    style.lineHeight = 1.05;
+  }
+  style.whiteSpace = "pre-wrap";
+  return style;
+}
+
+function srcRectToInset(srcRect: { top: number; right: number; bottom: number; left: number }): string {
+  return `inset(${(srcRect.top / 1000).toFixed(3)}% ${(srcRect.right / 1000).toFixed(3)}% ${(srcRect.bottom / 1000).toFixed(3)}% ${(srcRect.left / 1000).toFixed(3)}%)`;
+}
+
+function inferTextBoxJustification(text: string | undefined): React.CSSProperties["justifyContent"] {
+  return text?.startsWith("[") ? "flex-end" : "center";
+}
+
+function inferTextBoxTextAlign(text: string | undefined): React.CSSProperties["textAlign"] {
+  return text?.startsWith("[") ? "right" : "center";
+}
+
+function isSafeHexColor(value: string): boolean {
+  return /^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(value);
+}
+
 export default TwFloatingImageLayer;

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

@@ -38,6 +38,7 @@ export interface TwPageChromeEntryProps {
   activeStoryPageIndex?: number | null;
   onOpenStory?: (target: EditorStoryTarget, pageIndex: number) => void;
   visiblePageIndexRange?: { start: number; end: number } | null;
+  plainPageBands?: boolean;
   renderFrameRevision: number;
   /** Preview catalog threaded into header/footer/footnote region renderers
    *  so images (CCEP logos on 7-of-8 CCEP docs) render as real <img>s. */
@@ -62,6 +63,7 @@ function TwPageChromeEntryInner({
   activeStoryPageIndex,
   onOpenStory,
   visiblePageIndexRange,
+  plainPageBands = false,
   renderFrameRevision,
   mediaPreviews,
   activeBandRibbonProps,
@@ -208,6 +210,7 @@ function TwPageChromeEntryInner({
           widthPx={bandWidthPx}
           bandHeightPx={px(headerRegion.heightTwips)}
           isActiveSlot={Boolean(headerActive)}
+          chromeMode={plainPageBands ? "plain" : "normal"}
           sectionLabel={headerActive ? headerSectionLabel : undefined}
           onDoubleClick={handleHeaderDoubleClick}
           mediaPreviews={mediaPreviews}
@@ -223,6 +226,7 @@ function TwPageChromeEntryInner({
           widthPx={bandWidthPx}
           bandHeightPx={px(footerRegion.heightTwips)}
           isActiveSlot={Boolean(footerActive)}
+          chromeMode={plainPageBands ? "plain" : "normal"}
           sectionLabel={footerActive ? footerSectionLabel : undefined}
           onDoubleClick={handleFooterDoubleClick}
           mediaPreviews={mediaPreviews}
@@ -267,6 +271,7 @@ function propsAreEqual(
     prev.activeStoryPageIndex === next.activeStoryPageIndex &&
     prev.onOpenStory === next.onOpenStory &&
     prev.visiblePageIndexRange === next.visiblePageIndexRange &&
+    prev.plainPageBands === next.plainPageBands &&
     prev.renderFrameRevision === next.renderFrameRevision &&
     prev.rect.topPx === next.rect.topPx &&
     prev.rect.bottomPx === next.rect.bottomPx &&

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

@@ -32,6 +32,7 @@ export interface TwPageFooterBandProps {
   widthPx: number;
   /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
   isActiveSlot: boolean;
+  chromeMode?: "normal" | "plain";
   /**
    * Lane 6d.U1 — section label for the active-band ribbon (e.g. "Footer — Section 1").
    * Only rendered when `isActiveSlot` is true.
@@ -56,6 +57,7 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
   leftPx,
   widthPx,
   isActiveSlot,
+  chromeMode = "normal",
   sectionLabel,
   onDoubleClick,
   "data-testid": testId,
@@ -66,6 +68,7 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
     <div
       className="wre-page-band"
       data-page-band="footer"
+      data-page-band-chrome={chromeMode === "plain" ? "plain" : undefined}
       data-page-index={pageIndex}
       data-active={isActiveSlot ? "true" : undefined}
       data-testid={testId}

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

@@ -33,6 +33,7 @@ export interface TwPageHeaderBandProps {
   widthPx: number;
   /** True when this band is the active-story slot. Renders portal target instead of read-only DOM. */
   isActiveSlot: boolean;
+  chromeMode?: "normal" | "plain";
   /**
    * Lane 6d.U1 — section label for the active-band ribbon (e.g. "Header — Section 1").
    * Only rendered when `isActiveSlot` is true.
@@ -62,6 +63,7 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
   leftPx,
   widthPx,
   isActiveSlot,
+  chromeMode = "normal",
   sectionLabel,
   onDoubleClick,
   "data-testid": testId,
@@ -72,6 +74,7 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
     <div
       className="wre-page-band"
       data-page-band="header"
+      data-page-band-chrome={chromeMode === "plain" ? "plain" : undefined}
       data-page-index={pageIndex}
       data-active={isActiveSlot ? "true" : undefined}
       data-testid={testId}

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

@@ -148,6 +148,11 @@ export interface TwPageStackChromeLayerProps {
    * reported.
    */
   visiblePageIndexRange?: { start: number; end: number } | null;
+  /**
+   * Chrome-less visual fidelity mode: keep per-page story rendering active
+   * while suppressing editor-only inactive band tint/border.
+   */
+  plainPageBands?: boolean;
   /** Optional test id applied to the layer root. */
   "data-testid"?: string;
   /** Preview catalog threaded through to per-page chrome bands so images
@@ -173,6 +178,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   pmSurfaceElement,
   pmView,
   visiblePageIndexRange,
+  plainPageBands = false,
   "data-testid": testId,
   mediaPreviews,
   activeBandRibbonProps,
@@ -461,6 +467,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
             activeStoryPageIndex={activeStoryPageIndex}
             onOpenStory={handleOpenStoryForPage}
             visiblePageIndexRange={visiblePageIndexRange}
+            plainPageBands={plainPageBands}
             renderFrameRevision={renderFrameRevision}
             mediaPreviews={mediaPreviews}
             activeBandRibbonProps={activeBandRibbonProps}
@@ -516,6 +523,7 @@ function propsAreEqual(
     prev.pmSurfaceElement === next.pmSurfaceElement &&
     prev.pmView === next.pmView &&
     rangeEqual(prev.visiblePageIndexRange, next.visiblePageIndexRange) &&
+    prev.plainPageBands === next.plainPageBands &&
     prev["data-testid"] === next["data-testid"]
   );
 }

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

@@ -167,6 +167,28 @@ function renderSegment(
         />
       );
     }
+    case "shape": {
+      if (shouldRenderAbsoluteFloatingImageInPageOverlay(seg.anchor)) {
+        return null;
+      }
+      if (!seg.isTextBox || !seg.txbxText) {
+        return null;
+      }
+      const style = buildSegmentStyle(seg.txbxMarks, seg.txbxMarkAttrs);
+      if (seg.txbxMarkAttrs?.textColor && isSafeHexColor(seg.txbxMarkAttrs.textColor)) {
+        style.color = `#${seg.txbxMarkAttrs.textColor}`;
+      }
+      return (
+        <span
+          key={seg.segmentId}
+          data-node-type="shape"
+          style={style}
+          title={seg.detail}
+        >
+          {seg.txbxText ?? seg.label}
+        </span>
+      );
+    }
     case "field_ref":
       return (
         <span
@@ -202,6 +224,10 @@ function renderSegment(
   }
 }
 
+function isSafeHexColor(value: string): boolean {
+  return /^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(value);
+}
+
 // ---------------------------------------------------------------------------
 // Block renderers
 // ---------------------------------------------------------------------------

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

@@ -443,20 +443,22 @@
 /*
  * ─── ChromeOverlay: scope rail layer ───
  *
- * The overlay sits above PM and paints gutter handles plus optional
- * border-only line outlines.  It must not fill document content.
+ * Product scope affordance now lives directly on the scoped inline text.
+ * Keep the legacy rail layer hidden if an old host mounts it directly:
+ * no gutter markers, no rail handles, no overlay tints.
  */
 .wre-scope-rail-layer {
+  display: none;
   pointer-events: none;
 }
 
 /*
  * ─── Gutter lane tokens ───
  *
- * The scope rail and scope card chrome live in a reserved lane to the
- * left of the page frame so they visibly read as chrome (not document
- * content).  Page surfaces use 64px, canvas surfaces 48px.  Host apps
- * can override via CSS custom property.
+ * Kept for legacy gutter consumers and page-card composition. Product
+ * scope rails are hidden; scoped text is the visible scope affordance.
+ * Page surfaces use 64px, canvas surfaces 48px. Host apps can override
+ * via CSS custom property.
  */
 :root {
   --wre-gutter-lane-width: 64px;
@@ -531,12 +533,11 @@
 }
 
 /*
- * ─── Scope rail stripe ───
+ * ─── Legacy scope rail stripe ───
  *
- * The rail stripe is the rest-state representation of a scope: a 4px
- * color stripe in the gutter lane. Posture color comes from the
- * accent/warning/insert/secondary/danger tokens. Hover widens the stripe
- * via transform (zero layout cost) and reveals the edit handle.
+ * Hidden by .wre-scope-rail-layer. These rules are retained only so old
+ * direct mounts degrade consistently if they have not yet removed the
+ * rail DOM.
  */
 .wre-scope-rail-stripe {
   position: absolute;
@@ -1076,6 +1077,12 @@
   background-color: var(--color-bg-hover);
 }
 
+.wre-page-band[data-page-band-chrome="plain"],
+.wre-page-band[data-page-band-chrome="plain"]:hover {
+  background-color: transparent;
+  border-color: transparent;
+}
+
 .wre-page-band[data-active="true"] {
   background-color: var(--color-accent-soft);
   border: 1px solid var(--color-border-accent);

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

@@ -243,6 +243,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     chromeOptions,
     chromeVisibility: props.chromeVisibility,
   });
+  const plainPageBands =
+    isPageWorkspace &&
+    chromeVisibility.pageChrome &&
+    !chromeVisibility.toolbar &&
+    !chromeVisibility.alerts &&
+    !chromeVisibility.selectionOverlay &&
+    !chromeVisibility.contextToolbars &&
+    !chromeVisibility.contextAnalytics &&
+    !chromeVisibility.statusBar &&
+    !chromeVisibility.reviewRail &&
+    !chromeVisibility.shellHeader;
   const reviewRailAvailable = chromeVisibility.reviewRail && (caps?.reviewRailVisible ?? true);
   const { viewportWidth, viewportHeight } = useViewportDimensions();
   const { reviewRailOpen, setReviewRailOpen } = useReviewRailState({
@@ -1059,6 +1070,9 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                           ...(pageShellMetrics.frameHeightPx
                             ? { minHeight: `${pageShellMetrics.frameHeightPx}px` }
                             : {}),
+                          ...(pageShellMetrics.frameHeightPx
+                            ? { "--wre-page-frame-height-px": `${pageShellMetrics.frameHeightPx}px` }
+                            : {}),
                           ...(zoomScale !== 1 ? { zoom: zoomScale } : {}),
                         }
                       : zoomScale !== 1
@@ -1209,6 +1223,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             onOpenStory={handleOpenPageModeStory}
                             pmSurfaceElement={pmSurfaceElement}
                             visiblePageIndexRange={visiblePageIndexRange}
+                            plainPageBands={plainPageBands}
                             mediaPreviews={props.mediaPreviews}
                             activeBandRibbonProps={activeBandRibbonProps}
                           />