@beyondwork/docx-react-component 1.0.95 → 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

@@ -379,17 +379,31 @@
 /*
  * ─── Workflow inline text emphasis ───
  *
- * Since R3a the workflow scope rail + flat block tint are painted on the
- * ChromeOverlay plane (see src/ui-tailwind/chrome-overlay/).  PM
- * decorations retain ONLY inline text emphasis for postures that carry
- * unique per-text signals (candidate = dashed underline, blocked-import =
- * wavy underline, active = thin outline).  The rounded in-text background
- * boxes that previously wrapped every run are gone — the overlay's flat
- * tint handles that signal.
+ * Scopes should read as text ownership, not block selection.  PM inline
+ * decorations carry the visible border on the scoped text, while the
+ * ChromeOverlay plane supplies the gutter/action rail.  Keep this
+ * border-only: no filled boxes over document content.
  */
 .prosemirror-surface .ProseMirror .wre-workflow-inline {
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
+  border-radius: 2px;
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-edit {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 52%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-suggest {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 56%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-comment {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-insert) 48%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-view {
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-secondary) 46%, transparent);
 }
 
 .prosemirror-surface .ProseMirror .wre-workflow-inline-candidate {
@@ -408,43 +422,43 @@
 
 /*
  * Locked zone marker for inline runs: a subtle dotted right edge so the
- * reader can tell where the locked range ends when the gutter label scrolls
- * out of view.  The overlay's flat tint carries the primary signal.
+ * reader can tell where the locked range ends when the gutter handle scrolls
+ * out of view.  The rail carries the action affordance.
  */
 .prosemirror-surface .ProseMirror .wre-workflow-inline-locked-zone {
   box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-danger) 35%, transparent);
 }
 
 /*
- * `wre-workflow-inline-active` no longer emits a visual outline.  The
- * per-run inset box-shadow produced a halo around every text fragment
- * (one box per run, due to box-decoration-break: clone above), which
- * fought with the overlay's flat tint.  The class name is kept on the
- * inline decoration as a data hook (no visual), and emphasis for the
- * active scope now lives on the ChromeOverlay rail stripe + scope card.
+ * Active scope emphasis is a stronger text border plus the gutter handle.
+ * This keeps focus local to scoped text without reintroducing filled green
+ * rectangles.
  */
 .prosemirror-surface .ProseMirror .wre-workflow-inline-active {
-  /* intentionally empty — visual emphasis handled by ChromeOverlay */
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--color-accent) 72%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
 }
 
 /*
  * ─── ChromeOverlay: scope rail layer ───
  *
- * The overlay sits above PM and paints the flat block-tint + gutter labels
- * that used to be inline PM decorations.  Positions come from the render
- * kernel's anchor index, not DOM rects.
+ * 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;
@@ -471,58 +485,36 @@
   border-radius: 0.2rem;
   pointer-events: none;
   z-index: 0;
-  transition: background 140ms ease-out;
-}
-
-.wre-scope-rail-tint-accent {
-  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
-}
-.wre-scope-rail-tint-warning {
-  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
-}
-.wre-scope-rail-tint-insert {
-  background: color-mix(in srgb, var(--color-insert) 12%, transparent);
-}
-.wre-scope-rail-tint-secondary {
-  background: color-mix(in srgb, var(--color-secondary) 9%, transparent);
-}
-.wre-scope-rail-tint-danger {
-  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
-}
-
-/* §3.7 canonical scope families */
-.wre-scope-rail-tint-blocked {
-  background: var(--color-scope-tint-blocked);
-}
-.wre-scope-rail-tint-in-scope {
-  background: var(--color-scope-tint-in-scope);
-}
-.wre-scope-rail-tint-suggest {
-  background: var(--color-scope-tint-suggest);
-}
-.wre-scope-rail-tint-comment {
-  background: var(--color-scope-tint-comment);
-}
-.wre-scope-rail-tint-scheduled {
-  background: var(--color-scope-tint-scheduled);
-}
+  background: transparent;
+  transition: box-shadow 140ms ease-out;
+}
+
+.wre-scope-rail-tint-accent,
+.wre-scope-rail-tint-warning,
+.wre-scope-rail-tint-insert,
+.wre-scope-rail-tint-secondary,
+.wre-scope-rail-tint-danger,
+.wre-scope-rail-tint-blocked,
+.wre-scope-rail-tint-in-scope,
+.wre-scope-rail-tint-suggest,
+.wre-scope-rail-tint-comment,
+.wre-scope-rail-tint-scheduled,
 .wre-scope-rail-tint-proposed {
-  background: var(--color-scope-tint-proposed);
+  background: transparent;
 }
 
 .wre-scope-rail-tint-active {
-  outline: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
+  outline: 1px solid color-mix(in srgb, var(--color-accent) 52%, transparent);
   outline-offset: -1px;
 }
 
 /*
  * ─── Agent-pending shimmer (K2 / scope-card-overlay P2) ───
  *
- * Painted on every scope tint that overlaps a WorkflowCandidateRange
- * with `source: "ai"`.  A soft 1.8s pulse signals the agent is
- * thinking without competing with the active outline.  Reduced-
- * motion disables the animation and holds a static 60% opacity
- * border so the posture is still readable.
+ * Painted on every scope outline that overlaps a WorkflowCandidateRange
+ * with `source: "ai"`. A soft 1.8s pulse signals the agent is thinking
+ * without competing with the active outline. Reduced-motion disables the
+ * animation and holds a static 60% opacity outline.
  */
 @keyframes wre-agent-pulse {
   0%, 100% { opacity: 0.4; }
@@ -541,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 label pill.
+ * 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;
@@ -595,34 +586,31 @@
 .wre-scope-rail-stripe.wre-scope-rail-tint-proposed  { background: var(--color-scope-tint-proposed); }
 
 /*
- * ─── Scope rail label pill ───
+ * ─── Scope rail edit handle ───
  *
- * Shown only on stripe hover (CSS-driven).  The pill overlays the
- * stripe with icon + short posture label, anchored to the first line
- * of the scope.
+ * Shown only on stripe hover (CSS-driven). The handle overlays the
+ * stripe with a compact icon anchored to the first line of the scope.
  */
 .wre-scope-rail-label {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.2rem;
-  padding: 0.15rem 0.3rem;
-  border-radius: var(--radius-sm);
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: 999px;
   border: 1px solid transparent;
   background: var(--color-canvas, #fff);
   box-shadow: var(--shadow-sm);
-  font-size: 9.5px;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  font-weight: 600;
+  font: inherit;
   cursor: pointer;
   z-index: 2;
   opacity: 0;
   pointer-events: none;
   transition: opacity 140ms ease-out, transform 140ms ease-out;
   transform: translateX(-4px);
+  margin: 0;
 }
 
 .wre-scope-rail-stripe:hover + .wre-scope-rail-label,
@@ -697,8 +685,8 @@
 
 .wre-scope-rail-icon {
   display: inline-block;
-  width: 14px;
-  height: 14px;
+  width: 13px;
+  height: 13px;
   background-color: currentColor;
   mask-repeat: no-repeat;
   mask-position: center;
@@ -708,6 +696,10 @@
   -webkit-mask-size: contain;
 }
 
+.wre-scope-rail-label-text {
+  display: none;
+}
+
 /* Simple inline-SVG-as-mask icons so consumers don't need an icon font. */
 .wre-scope-rail-icon-lock {
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>');
@@ -1085,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}
                           />