@beyondwork/docx-react-component 1.0.77 → 1.0.79

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

@@ -27,6 +27,7 @@ import { TwPageHeaderBand } from "./tw-page-header-band.tsx";
 import { TwPageFooterBand } from "./tw-page-footer-band.tsx";
 import { TwFootnoteArea } from "./tw-footnote-area.tsx";
 import type { MediaPreviewDescriptor } from "../editor-surface/pm-state-from-snapshot.ts";
+import type { TwActiveBandRibbonProps } from "./tw-active-band-ribbon.tsx";
 
 export interface TwPageChromeEntryProps {
   rect: PageOverlayRect;
@@ -40,6 +41,15 @@ export interface TwPageChromeEntryProps {
   /** Preview catalog threaded into header/footer/footnote region renderers
    *  so images (CCEP logos on 7-of-8 CCEP docs) render as real <img>s. */
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  /**
+   * Slice B (§6.20 reshape) — section-properties ribbon bundle forwarded
+   * to whichever band is active for this page. The bundle's `pageLayout`
+   * + `viewState` + `paragraphLayout` already reflect the active story;
+   * `kind` is set by the band itself. Pass `null` (or omit) when no
+   * header/footer is active anywhere — keeps the inactive-page memo
+   * stable across activate/deactivate cycles on a different page.
+   */
+  activeBandRibbonProps?: Omit<TwActiveBandRibbonProps, "kind" | "data-testid"> | null;
 }
 
 function TwPageChromeEntryInner({
@@ -52,6 +62,7 @@ function TwPageChromeEntryInner({
   visiblePageIndexRange,
   renderFrameRevision,
   mediaPreviews,
+  activeBandRibbonProps,
 }: TwPageChromeEntryProps): React.ReactElement {
   const layout = page.layout;
   const headerStory = page.stories.header;
@@ -192,6 +203,7 @@ function TwPageChromeEntryInner({
           sectionLabel={headerActive ? headerSectionLabel : undefined}
           onClick={handleHeaderClick}
           mediaPreviews={mediaPreviews}
+          ribbonProps={headerActive ? activeBandRibbonProps ?? null : null}
         />
       ) : null}
       {footerRegion && footerStory ? (
@@ -206,6 +218,7 @@ function TwPageChromeEntryInner({
           sectionLabel={footerActive ? footerSectionLabel : undefined}
           onClick={handleFooterClick}
           mediaPreviews={mediaPreviews}
+          ribbonProps={footerActive ? activeBandRibbonProps ?? null : null}
         />
       ) : null}
       {footnoteRegion ? (
@@ -249,7 +262,8 @@ function propsAreEqual(
     prev.rect.topPx === next.rect.topPx &&
     prev.rect.bottomPx === next.rect.bottomPx &&
     prev.rect.pageId === next.rect.pageId &&
-    prev.mediaPreviews === next.mediaPreviews
+    prev.mediaPreviews === next.mediaPreviews &&
+    prev.activeBandRibbonProps === next.activeBandRibbonProps
   );
 }
 

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

@@ -3,6 +3,10 @@ import React from "react";
 import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
 import type { MediaPreviewDescriptor } from "../editor-surface/pm-state-from-snapshot.ts";
 import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+import {
+  TwActiveBandRibbon,
+  type TwActiveBandRibbonProps,
+} from "./tw-active-band-ribbon.tsx";
 
 // ---------------------------------------------------------------------------
 // TwPageFooterBand (P8.5)
@@ -36,6 +40,12 @@ export interface TwPageFooterBandProps {
   onClick: () => void;
   "data-testid"?: string;
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  /**
+   * Slice B (§6.20 reshape) — section-properties ribbon that floats
+   * below the footer band when it is the active story slot. See
+   * `TwPageHeaderBandProps.ribbonProps` for shape rationale.
+   */
+  ribbonProps?: Omit<TwActiveBandRibbonProps, "kind" | "data-testid"> | null;
 }
 
 export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
@@ -50,6 +60,7 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
   onClick,
   "data-testid": testId,
   mediaPreviews,
+  ribbonProps,
 }) => {
   return (
     <div
@@ -73,6 +84,13 @@ export const TwPageFooterBand: React.FC<TwPageFooterBandProps> = React.memo(({
           {sectionLabel}
         </span>
       ) : null}
+      {isActiveSlot && ribbonProps ? (
+        <TwActiveBandRibbon
+          kind="footer"
+          {...ribbonProps}
+          data-testid={testId ? `${testId}-ribbon` : undefined}
+        />
+      ) : null}
       {isActiveSlot ? (
         <div
           data-pm-portal-slot

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

@@ -3,6 +3,10 @@ import React from "react";
 import type { SurfaceBlockSnapshot } from "../../api/public-types.ts";
 import type { MediaPreviewDescriptor } from "../editor-surface/pm-state-from-snapshot.ts";
 import { TwRegionBlockRenderer } from "./tw-region-block-renderer.tsx";
+import {
+  TwActiveBandRibbon,
+  type TwActiveBandRibbonProps,
+} from "./tw-active-band-ribbon.tsx";
 
 // ---------------------------------------------------------------------------
 // TwPageHeaderBand (P8.5)
@@ -40,6 +44,14 @@ export interface TwPageHeaderBandProps {
    *  (CCEP logos on 7-of-8 CCEP docs) render as real <img>s instead of
    *  the 48×32 placeholder chip. */
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;
+  /**
+   * Slice B (§6.20 reshape) — section-properties ribbon that floats
+   * above the band when it is the active story slot. Omit (or pass
+   * `null`) to suppress the ribbon — `isActiveSlot` alone is not
+   * sufficient because some hosts mount the band in active mode without
+   * surfacing layout controls (e.g. headless / read-only previews).
+   */
+  ribbonProps?: Omit<TwActiveBandRibbonProps, "kind" | "data-testid"> | null;
 }
 
 export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
@@ -54,6 +66,7 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
   onClick,
   "data-testid": testId,
   mediaPreviews,
+  ribbonProps,
 }) => {
   return (
     <div
@@ -77,6 +90,13 @@ export const TwPageHeaderBand: React.FC<TwPageHeaderBandProps> = React.memo(({
           {sectionLabel}
         </span>
       ) : null}
+      {isActiveSlot && ribbonProps ? (
+        <TwActiveBandRibbon
+          kind="header"
+          {...ribbonProps}
+          data-testid={testId ? `${testId}-ribbon` : undefined}
+        />
+      ) : null}
       {isActiveSlot ? (
         <div
           data-pm-portal-slot

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

@@ -80,6 +80,7 @@ import {
 } from "../chrome-overlay/tw-page-stack-overlay-layer.tsx";
 import { TwEndnoteArea } from "./tw-endnote-area.tsx";
 import { TwPageChromeEntry } from "./tw-page-chrome-entry.tsx";
+import type { TwActiveBandRibbonProps } from "./tw-active-band-ribbon.tsx";
 
 /**
  * Minimal structural type for the PM `EditorView` handle consumed by
@@ -149,6 +150,13 @@ export interface TwPageStackChromeLayerProps {
    *  in headers/footers/footnote bodies render as real <img>s. Without
    *  this, image segments fall back to the 48×32 gray placeholder chip. */
   mediaPreviews?: Record<string, import("../editor-surface/pm-state-from-snapshot.ts").MediaPreviewDescriptor>;
+  /**
+   * Slice B (§6.20 reshape) — section-properties ribbon bundle forwarded
+   * to whichever page's active band renders it. Pass `null` (or omit)
+   * when no header/footer is active to keep memo equality stable for
+   * inactive sessions.
+   */
+  activeBandRibbonProps?: Omit<TwActiveBandRibbonProps, "kind" | "data-testid"> | null;
 }
 
 const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
@@ -162,6 +170,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   visiblePageIndexRange,
   "data-testid": testId,
   mediaPreviews,
+  activeBandRibbonProps,
 }) => {
   const [rects, setRects] = React.useState<readonly PageOverlayRect[]>([]);
   const overlayRootRef = React.useRef<HTMLDivElement | null>(null);
@@ -407,6 +416,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
             visiblePageIndexRange={visiblePageIndexRange}
             renderFrameRevision={renderFrameRevision}
             mediaPreviews={mediaPreviews}
+            activeBandRibbonProps={activeBandRibbonProps}
           />
         );
       })}

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

@@ -220,12 +220,14 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     viewState.selection.activeRange.kind === "node"
       ? viewState.selection.activeRange.at
       : viewState.selection.head;
-  // Slice A (designsystem §6.20 reshape): the legacy "Layout tools"
-  // disclosure that gated this resolver is gone. Slice B (active-band
-  // ribbon) re-enables resolution when a header/footer band is the
-  // active story; until then, no consumer reads activeParagraphLayout
-  // so the resolver stays inert.
-  const shouldResolveActiveParagraphLayout = false;
+  // Slice B (designsystem §6.20 reshape): the active-band ribbon's
+  // `TwPageRuler` reads `activeParagraphLayout` when a header or footer
+  // story is the active slot, so the resolver runs only while that ribbon
+  // is mounted.  Body-mode editing skips the resolver — no consumer reads
+  // it on the body path.
+  const shouldResolveActiveParagraphLayout =
+    snapshot.activeStory.kind === "header" ||
+    snapshot.activeStory.kind === "footer";
   const effectiveSelectionMode = props.interactionGuardSnapshot?.effectiveMode ?? "edit";
   const allowLocalChromeMutations = Boolean(caps?.canEdit) && effectiveSelectionMode === "edit";
   const {
@@ -333,6 +335,53 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       onDismissSelectionToolbar: props.onDismissSelectionToolbar,
     });
 
+  // Slice B (designsystem §6.20 reshape) — section-properties ribbon
+  // bundle.  Built only while a header or footer band is the active
+  // story; the chrome layer forwards it to whichever band rendered the
+  // ribbon.  Document-level read-only governs the controls (the
+  // pageChromeReadOnly flag also disables on header/footer-active, which
+  // is the wrong polarity here — the ribbon's whole point is editing
+  // section properties from inside the header/footer).
+  const ribbonReadOnly =
+    snapshot.readOnly || effectiveSelectionMode !== "edit";
+  const activeBandRibbonProps = useMemo(() => {
+    if (
+      snapshot.activeStory.kind !== "header" &&
+      snapshot.activeStory.kind !== "footer"
+    ) {
+      return null;
+    }
+    if (!snapshot.pageLayout) {
+      return null;
+    }
+    return {
+      pageLayout: snapshot.pageLayout,
+      viewState,
+      paragraphLayout: activeParagraphLayout,
+      readOnly: ribbonReadOnly,
+      onCloseStory: props.onCloseStory,
+      onInsertSectionBreak: props.onInsertSectionBreak,
+      onUpdateSectionLayout: props.onUpdateSectionLayout,
+      onSetSectionPageNumbering: props.onSetSectionPageNumbering,
+      onSetHeaderFooterLink: props.onSetHeaderFooterLink,
+      onSetParagraphIndentation: props.onSetParagraphIndentation,
+      onSetParagraphTabStops: props.onSetParagraphTabStops,
+    };
+  }, [
+    snapshot.activeStory.kind,
+    snapshot.pageLayout,
+    viewState,
+    activeParagraphLayout,
+    ribbonReadOnly,
+    props.onCloseStory,
+    props.onInsertSectionBreak,
+    props.onUpdateSectionLayout,
+    props.onSetSectionPageNumbering,
+    props.onSetHeaderFooterLink,
+    props.onSetParagraphIndentation,
+    props.onSetParagraphTabStops,
+  ]);
+
   // Audit §2.4 — the shell header is ALWAYS present in default composition.
   // When the host does not supply a pre-assembled shell node, fall back to
   // a default TwShellHeader wired to the workspace's editor-role state so
@@ -1010,6 +1059,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             pmSurfaceElement={pmSurfaceElement}
                             visiblePageIndexRange={visiblePageIndexRange}
                             mediaPreviews={props.mediaPreviews}
+                            activeBandRibbonProps={activeBandRibbonProps}
                           />
                         ) : null}
                       </div>