@beyondwork/docx-react-component 1.0.73 → 1.0.74

package/src/session/import/workflow-scope-import.ts

@@ -6,12 +6,13 @@
  *
  * P6-clean: `CommentThread` reaches through `src/model/review/`; every
  * workflow type comes from `src/api/public-types.ts` (an allowed surface
- * for the session layer). Anchor-shape conversion reaches through the
- * shared boundary helper at `src/api/anchor-conversion.ts` (relocated in
- * slice 5e-6g).
+ * for the session layer). Anchor-shape conversion is no longer needed —
+ * L02's FLAT WINS collapse (2026-04-24, `5b2f6f56`) made `CanonicalAnchor`,
+ * `InternalEditorAnchorProjection`, and the public `EditorAnchorProjection`
+ * structurally identical, so `thread.anchor` flows directly into the
+ * `WorkflowScope.anchor` slot without a helper call.
  */
 
-import { toPublicAnchorProjection } from "../../api/anchor-conversion.ts";
 import type {
   WorkflowMetadataSnapshot,
   WorkflowOverlay,
@@ -155,7 +156,7 @@ export function createClmWorkflowScope(
       scopeId,
       version,
       mode: directive.mode,
-      anchor: toPublicAnchorProjection(thread.anchor),
+      anchor: thread.anchor,
       storyTarget: { kind: "main" },
       workItemId,
       label: directive.description,
@@ -166,7 +167,7 @@ export function createClmWorkflowScope(
     scopeId,
     version,
     mode: directive.mode,
-    anchor: toPublicAnchorProjection(thread.anchor),
+    anchor: thread.anchor,
     storyTarget: { kind: "main" },
     label: directive.description,
     metadata: createClmScopeMetadata(directive),
@@ -240,8 +241,8 @@ export function getNextClmScopeVersion(
   anchor: Extract<CommentThread["anchor"], { kind: "range" }>,
 ): number {
   const anchorRange = {
-    from: anchor.range.from,
-    to: anchor.range.to,
+    from: anchor.from,
+    to: anchor.to,
   };
   const overlappingVersions = scopes.flatMap((scope) => {
     if (scope.anchor.kind !== "range") {

package/src/shell/session-bootstrap.ts

@@ -1139,6 +1139,9 @@ function createLoadingRuntimeBridge(input: {
     },
     getScope: () => null,
     compileScopeBundleById: () => null,
+    compileScopeList: () => [],
+    compileScopeCardById: () => null,
+    compileScopeRailSnapshot: () => ({ segments: [] }),
     getMarkerBackedScopeIds: () => new Set<string>(),
     debug: createLoadingDebugFacet(),
     removeScope: () => undefined,
@@ -1281,6 +1284,7 @@ function createLoadingRuntimeBridge(input: {
     getPerfCountersSnapshot: () => ({}),
     resetPerfCounters: () => undefined,
     setVisibleBlockRange: () => undefined,
+    setVisibleBlockRanges: () => undefined,
     requestViewportRefresh: () => undefined,
     addInvisibleScope: () => ({ scopeId: "", anchor: { kind: "range", from: 0, to: 0, assoc: { start: -1, end: 1 } } }),
     setScopeVisibility: () => undefined,

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -24,7 +24,7 @@ export function createSurfaceDocumentBuildKey(input: {
   showUnsupportedObjectPreviews?: boolean;
   isPageWorkspace?: boolean;
 }): string {
-  const vp = input.surface?.viewportBlockRange ?? null;
+  const ranges = input.surface?.viewportBlockRanges ?? null;
   return JSON.stringify({
     surfaceIdentity:
       input.surface === undefined || input.surface === null
@@ -34,7 +34,10 @@ export function createSurfaceDocumentBuildKey(input: {
     mediaPreviewKey: input.mediaPreviewKey,
     showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? false,
     isPageWorkspace: input.isPageWorkspace ?? false,
-    viewport: vp ? `${vp.start}:${vp.end}` : "full",
+    // Serialize all intervals (sorted by start) — disjoint viewport+caret
+    // ranges must key distinctly from a single merged range so PM rebuilds
+    // when the caret's page comes into/out of the realized set.
+    viewport: ranges ? ranges.map((r) => `${r.start}:${r.end}`).join("|") : "full",
   });
 }
 

package/src/ui-tailwind/page-stack/use-visible-block-range.ts

@@ -11,19 +11,29 @@ import * as React from "react";
 const ESTIMATED_BLOCKS_PER_PAGE_FALLBACK = 50;
 
 /**
- * Block-range hook — returns the range of surface block indices that should
- * be rendered in PM as "real" (non-placeholder) blocks.
+ * Block-range hook — returns the block-index intervals that should be
+ * rendered in PM as "real" (non-placeholder) blocks.
  *
  * Sources of truth:
  * 1. IntersectionObserver on `[data-page-frame]` markers in the PM DOM.
  * 2. Selection head block-index — always included (selection-guard).
  * 3. Overscan — ±N pages around the visible set to avoid jank when scrolling.
  *
- * If the selection is far off-screen, the returned range spans both the
- * visible window AND the selection's page (with the gap between filled in).
- * Gap-filling is a deliberate correctness choice: position preservation does
- * NOT require continuous viewport coverage, but continuous coverage simplifies
- * the snapshot-projection step downstream.
+ * Contract: the hook returns a **list of disjoint intervals**, not a single
+ * contiguous range. When the caret is far off-screen the hook emits the
+ * viewport window AND the caret's page as two separate intervals rather
+ * than merging them into one; this keeps the gap between them virtualized
+ * (placeholder-culled) instead of being forced to realize the full gap as
+ * real blocks. Earlier implementations merged them for projection
+ * simplicity; on long documents with an off-screen caret that quietly
+ * defeated virtualization and dominated steady-state scroll cost. See
+ * `docs/wiki/performance.md` §"Viewport realization".
+ *
+ * `useVisibleBlockRanges` is the canonical multi-interval hook.
+ * `useVisibleBlockRange` is the legacy single-range helper that returns
+ * the bounding hull of whatever `useVisibleBlockRanges` would have emitted
+ * — still available for call sites that really need a scalar (typically
+ * none; most callers should switch to the multi-range form).
  */
 export interface VisibleBlockRangeInput {
   pageMarkers: readonly HTMLElement[];
@@ -57,7 +67,14 @@ function readBlockIndex(el: HTMLElement, attr: string): number | null {
   return Number.isFinite(n) ? n : null;
 }
 
-export function useVisibleBlockRange(input: VisibleBlockRangeInput): BlockRange {
+/**
+ * Multi-interval hook. Returns the list of non-overlapping block-index
+ * intervals that should be real in the surface projection. Typical output:
+ * a single interval covering viewport + overscan. When the caret's page is
+ * outside that interval, a second interval covering just the caret's page
+ * is appended, leaving the gap between the two virtualized.
+ */
+export function useVisibleBlockRanges(input: VisibleBlockRangeInput): readonly BlockRange[] {
   const { pageMarkers, overscanPages, selectionBlockIndex, totalBlockCount } = input;
   const [visiblePages, setVisiblePages] = React.useState<Set<number>>(() => new Set());
 
@@ -101,11 +118,11 @@ export function useVisibleBlockRange(input: VisibleBlockRangeInput): BlockRange
   }, [pageMarkers]);
 
   return React.useMemo(() => {
-    if (totalBlockCount <= 0) return { start: 0, end: 0 };
+    if (totalBlockCount <= 0) return [];
     if (visiblePages.size === 0 && selectionBlockIndex === null) {
       // No visibility signal yet — return initial-load window (first 2 × overscanPages worth).
       const initialEnd = Math.min(totalBlockCount, (overscanPages * 2 + 1) * ESTIMATED_BLOCKS_PER_PAGE_FALLBACK);
-      return { start: 0, end: initialEnd };
+      return initialEnd > 0 ? [{ start: 0, end: initialEnd }] : [];
     }
 
     // Expand visiblePages by ±overscanPages.
@@ -130,45 +147,84 @@ export function useVisibleBlockRange(input: VisibleBlockRangeInput): BlockRange
       maxBlock = Math.min(totalBlockCount, (overscanPages * 2 + 1) * ESTIMATED_BLOCKS_PER_PAGE_FALLBACK);
     }
 
-    // Selection-guard: if selection is outside [minBlock, maxBlock), extend to cover
-    // the entire page that contains the selection.
-    if (selectionBlockIndex !== null) {
-      if (selectionBlockIndex < minBlock) {
-        // Find the page that contains selectionBlockIndex and extend to its start.
-        for (const marker of pageMarkers) {
-          const first = readBlockIndex(marker, "data-page-first-block-index");
-          const last = readBlockIndex(marker, "data-page-last-block-index");
-          if (first !== null && last !== null && selectionBlockIndex >= first && selectionBlockIndex <= last) {
-            if (first < minBlock) minBlock = first;
-            break;
-          }
-        }
-        // Fallback: just include the block itself.
-        if (selectionBlockIndex < minBlock) minBlock = selectionBlockIndex;
-      }
-      if (selectionBlockIndex >= maxBlock) {
-        // Find the page that contains selectionBlockIndex and extend to its end.
-        for (const marker of pageMarkers) {
-          const first = readBlockIndex(marker, "data-page-first-block-index");
-          const last = readBlockIndex(marker, "data-page-last-block-index");
-          if (first !== null && last !== null && selectionBlockIndex >= first && selectionBlockIndex <= last) {
-            if (last + 1 > maxBlock) maxBlock = last + 1;
-            break;
-          }
-        }
-        // Fallback: just include the block itself.
-        if (selectionBlockIndex >= maxBlock) maxBlock = selectionBlockIndex + 1;
-      }
-    }
-
-    // Clamp to doc bounds.
-    return {
+    const viewportRange: BlockRange = {
       start: Math.max(0, minBlock),
       end: Math.min(totalBlockCount, maxBlock),
     };
+
+    // Selection-guard: when the selection is inside viewportRange, it's
+    // already realized — nothing to do. When it's outside, emit the
+    // caret's page as a SECOND interval instead of extending viewportRange
+    // to cover the gap. On long documents with the caret far from the
+    // viewport this avoids realizing the entire gap as real blocks (the
+    // pre-fix behavior that dominated steady-state scroll cost).
+    if (
+      selectionBlockIndex === null ||
+      (selectionBlockIndex >= viewportRange.start &&
+        selectionBlockIndex < viewportRange.end)
+    ) {
+      return viewportRange.end > viewportRange.start ? [viewportRange] : [];
+    }
+
+    // Resolve the page that contains the selection.
+    let selStart = selectionBlockIndex;
+    let selEnd = selectionBlockIndex + 1;
+    for (const marker of pageMarkers) {
+      const first = readBlockIndex(marker, "data-page-first-block-index");
+      const last = readBlockIndex(marker, "data-page-last-block-index");
+      if (
+        first !== null &&
+        last !== null &&
+        selectionBlockIndex >= first &&
+        selectionBlockIndex <= last
+      ) {
+        selStart = first;
+        selEnd = last + 1;
+        break;
+      }
+    }
+    const selectionRange: BlockRange = {
+      start: Math.max(0, selStart),
+      end: Math.min(totalBlockCount, selEnd),
+    };
+    if (selectionRange.end <= selectionRange.start) {
+      return viewportRange.end > viewportRange.start ? [viewportRange] : [];
+    }
+
+    // Sort ascending by `start` so the facet layer sees a canonical order
+    // and can dedupe with a simple serialization. Runtime's
+    // `normalizeViewportRanges` merges touching/overlapping intervals, so
+    // we don't need to handle that here.
+    const ranges: BlockRange[] =
+      selectionRange.start < viewportRange.start
+        ? [selectionRange, viewportRange]
+        : [viewportRange, selectionRange];
+    return ranges;
   }, [visiblePages, selectionBlockIndex, pageMarkers, overscanPages, totalBlockCount]);
 }
 
+/**
+ * Legacy single-range wrapper. Returns the bounding hull of the multi-range
+ * result. Prefer {@link useVisibleBlockRanges} — this wrapper widens the
+ * realized window back to one contiguous interval and reintroduces the
+ * scroll-cost regression it was refactored to eliminate.
+ *
+ * @deprecated use {@link useVisibleBlockRanges}.
+ */
+export function useVisibleBlockRange(input: VisibleBlockRangeInput): BlockRange {
+  const ranges = useVisibleBlockRanges(input);
+  return React.useMemo(() => {
+    if (ranges.length === 0) return { start: 0, end: 0 };
+    let start = ranges[0]!.start;
+    let end = ranges[0]!.end;
+    for (let i = 1; i < ranges.length; i += 1) {
+      if (ranges[i]!.start < start) start = ranges[i]!.start;
+      if (ranges[i]!.end > end) end = ranges[i]!.end;
+    }
+    return { start, end };
+  }, [ranges]);
+}
+
 /**
  * L7 Phase 2.8 — sibling hook returning the visible sequential page index
  * range for chrome-overlay viewport culling. Reuses the same

package/src/ui-tailwind/review-workspace/use-page-markers.ts

@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import type { RuntimeRenderSnapshot } from "../../api/public-types.ts";
 import {
   useVisibleBlockRange,
+  useVisibleBlockRanges,
   useVisiblePageIndexRange,
 } from "../page-stack/use-visible-block-range.ts";
 
@@ -14,7 +15,15 @@ export interface UsePageMarkersOptions {
 
 export interface PageMarkersResult {
   pageMarkers: readonly HTMLElement[];
+  /**
+   * Bounding hull of {@link visibleBlockRanges}. Kept on the result for
+   * back-compat with call sites that only consumed a single range; the
+   * runtime now receives the disjoint ranges directly via
+   * `setVisibleBlockRanges`.
+   */
   visibleBlockRange: ReturnType<typeof useVisibleBlockRange>;
+  /** The canonical multi-interval realization set. */
+  visibleBlockRanges: ReturnType<typeof useVisibleBlockRanges>;
   visiblePageIndexRange: ReturnType<typeof useVisiblePageIndexRange>;
 }
 
@@ -99,13 +108,26 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
     return null;
   }, [snapshot.selection, snapshot.surface]);
 
-  const visibleBlockRange = useVisibleBlockRange({
+  const visibleBlockRanges = useVisibleBlockRanges({
     pageMarkers,
     overscanPages: 2,
     selectionBlockIndex,
     totalBlockCount: snapshot.surface?.blocks.length ?? 0,
   });
 
+  // Bounding hull of the disjoint ranges for the back-compat `visibleBlockRange`
+  // result field + for the effect's dep key (below).
+  const visibleBlockRange = useMemo(() => {
+    if (visibleBlockRanges.length === 0) return { start: 0, end: 0 };
+    let start = visibleBlockRanges[0]!.start;
+    let end = visibleBlockRanges[0]!.end;
+    for (let i = 1; i < visibleBlockRanges.length; i += 1) {
+      if (visibleBlockRanges[i]!.start < start) start = visibleBlockRanges[i]!.start;
+      if (visibleBlockRanges[i]!.end > end) end = visibleBlockRanges[i]!.end;
+    }
+    return { start, end };
+  }, [visibleBlockRanges]);
+
   // L7 Phase 2.8 — viewport cull for `TwPageStackChromeLayer`. Returns
   // `null` while the IntersectionObserver hasn't reported yet; the chrome
   // layer treats null as "render every page" so first paint is
@@ -117,14 +139,33 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
     overscanPages: 2,
   });
 
-  // Push the visible range into the layout facet (which delegates to the
-  // runtime's viewport-culling machinery). Depend on `[start, end]` values
-  // (not the range object) so identity-preserving updates are a no-op.
+  // Stable fingerprint of the current disjoint-range set; used as the effect
+  // dep so identity-preserving recomputes (same intervals, new memo array
+  // reference) don't re-fire the viewport refresh.
+  const visibleRangesKey = useMemo(
+    () => visibleBlockRanges.map((r) => `${r.start}:${r.end}`).join("|"),
+    [visibleBlockRanges],
+  );
+
+  // Push the visible ranges into the layout facet (which delegates to the
+  // runtime's viewport-culling machinery). When the caret is off-screen
+  // this emits two disjoint intervals; when on-screen, one. Runtime
+  // `normalizeViewportRanges` merges touching intervals, so we don't have
+  // to worry about minor overlap when overscan and selection-page touch.
   useEffect(() => {
     if (!layoutFacet) return;
-    layoutFacet.setVisibleBlockRange(visibleBlockRange);
+    layoutFacet.setVisibleBlockRanges(visibleBlockRanges);
     layoutFacet.requestViewportRefresh();
-  }, [layoutFacet, visibleBlockRange.start, visibleBlockRange.end]);
+    // visibleRangesKey captures the structural change; visibleBlockRanges
+    // identity alone is not a stable dep because the hook re-allocates on
+    // each render even when intervals are unchanged.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layoutFacet, visibleRangesKey]);
 
-  return { pageMarkers, visibleBlockRange, visiblePageIndexRange };
+  return {
+    pageMarkers,
+    visibleBlockRange,
+    visibleBlockRanges,
+    visiblePageIndexRange,
+  };
 }

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

@@ -19,7 +19,6 @@ export interface UseWorkspaceSideEffectsOptions {
   pageShellMetrics: PageShellMetrics;
   isPageWorkspace: boolean;
   activeStoryKind: RuntimeRenderSnapshot["activeStory"]["kind"];
-  setLayoutToolsOpen: Dispatch<SetStateAction<boolean>>;
   showDrawerReviewRail: boolean;
   setReviewRailOpen: Dispatch<SetStateAction<boolean>>;
   onOpenHeaderStory?: () => void;
@@ -61,7 +60,6 @@ export function useWorkspaceSideEffects(
     pageShellMetrics,
     isPageWorkspace,
     activeStoryKind,
-    setLayoutToolsOpen,
     showDrawerReviewRail,
     setReviewRailOpen,
     onOpenHeaderStory,
@@ -69,17 +67,19 @@ export function useWorkspaceSideEffects(
     onDismissSelectionToolbar,
   } = options;
 
+  // Slice A (designsystem §6.20 reshape, 2026-04-24): isPageWorkspace +
+  // activeStoryKind referenced here so the prop sweep stays a no-op
+  // type-checker pass even though the auto-open-layout-tools effect
+  // they fed retired with the strip. Slice B mounts an active-band
+  // ribbon that observes activeStoryKind directly.
+  void isPageWorkspace;
+  void activeStoryKind;
+
   useEffect(() => {
     recordPerfSample("workspace.chrome");
     incrementInvalidationCounter("workspace.chrome.recomputes");
   }, [activeParagraphLayout, pageChromeModel, pageShellMetrics]);
 
-  useEffect(() => {
-    if (isPageWorkspace && activeStoryKind !== "main") {
-      setLayoutToolsOpen(true);
-    }
-  }, [isPageWorkspace, activeStoryKind, setLayoutToolsOpen]);
-
   // P8.11 — deprecation shim for the legacy `onOpenHeaderStory` /
   // `onOpenFooterStory` props. Per-page chrome bands route clicks via
   // `onOpenStory` + `runtime.openStory` directly; the workspace-level

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

@@ -25,7 +25,6 @@ import { shouldRenderSelectionToolKind } from "../ui/headless/scoped-chrome-poli
 import type { EditorCommandBag } from "../ui/editor-command-bag.ts";
 import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor-selection";
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
-import { TwLayoutPanel } from "./chrome/tw-layout-panel";
 import { TwPageRuler } from "./chrome/tw-page-ruler";
 import { ChromePresetToolbar } from "./chrome/chrome-preset-toolbar";
 import {
@@ -70,7 +69,6 @@ import { useLayoutFacetRenderSignal } from "./review-workspace/use-layout-facet-
 import { useScrollRootCapture } from "./review-workspace/use-scroll-root-capture.ts";
 import { usePmSurfaceCapture } from "./review-workspace/use-pm-surface-capture.ts";
 import { TwReviewWorkspaceNavigator } from "./review-workspace/tw-review-workspace-navigator.tsx";
-import { TwReviewWorkspacePageToolbar } from "./review-workspace/tw-review-workspace-page-toolbar.tsx";
 
 export {
   FRAME_PX_PER_TWIP_AT_96DPI,
@@ -145,7 +143,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const isPageWorkspace = props.workspaceMode === "page";
   const markupDisplay = props.markupDisplay;
   const [navOpen, setNavOpen] = useState(false);
-  const [layoutToolsOpen, setLayoutToolsOpen] = useState(false);
 
   // Scope card state — tracks which scope's card is currently open so
   // the ChromeOverlay's card layer renders the right one. Open/close
@@ -227,8 +224,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     viewState.selection.activeRange.kind === "node"
       ? viewState.selection.activeRange.at
       : viewState.selection.head;
-  const shouldResolveActiveParagraphLayout =
-    isPageWorkspace && chromeVisibility.pageChrome && layoutToolsOpen;
+  // 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;
   const effectiveSelectionMode = props.interactionGuardSnapshot?.effectiveMode ?? "edit";
   const allowLocalChromeMutations = Boolean(caps?.canEdit) && effectiveSelectionMode === "edit";
   const {
@@ -331,7 +332,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       pageShellMetrics,
       isPageWorkspace,
       activeStoryKind: snapshot.activeStory.kind,
-      setLayoutToolsOpen,
       showDrawerReviewRail: responsiveChrome.showDrawerReviewRail,
       setReviewRailOpen,
       onOpenHeaderStory: props.onOpenHeaderStory,
@@ -778,35 +778,13 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 data-workspace-canvas={isPageWorkspace ? "true" : undefined}
                 data-workspace-mode={isPageWorkspace ? "page" : "canvas"}
               >
-                <TwReviewWorkspacePageToolbar
-                  enabled={isPageWorkspace && chromeVisibility.pageChrome && Boolean(snapshot.pageLayout)}
-                  pageLayout={snapshot.pageLayout}
-                  activeStory={snapshot.activeStory}
-                  activePage={activePage}
-                  pageCount={props.documentNavigation?.pageCount ?? 1}
-                  headerVariant={headerVariant}
-                  footerVariant={footerVariant}
-                  allowLocalChromeMutations={allowLocalChromeMutations}
-                  pageChromeReadOnly={pageChromeReadOnly}
-                  layoutToolsOpen={layoutToolsOpen}
-                  setLayoutToolsOpen={setLayoutToolsOpen}
-                  viewState={viewState}
-                  activeParagraphLayout={activeParagraphLayout}
-                  dismissSelectionToolbar={dismissSelectionToolbar}
-                  runWithSelectionToolbarDismiss={runWithSelectionToolbarDismiss}
-                  {...(props.onCloseStory ? { onCloseStory: props.onCloseStory } : {})}
-                  {...(props.onOpenHeaderStory ? { onOpenHeaderStory: props.onOpenHeaderStory } : {})}
-                  {...(props.onOpenFooterStory ? { onOpenFooterStory: props.onOpenFooterStory } : {})}
-                  {...(props.onSetHeaderFooterLink ? { onSetHeaderFooterLink: props.onSetHeaderFooterLink } : {})}
-                  {...(props.onSetParagraphIndentation ? { onSetParagraphIndentation: props.onSetParagraphIndentation } : {})}
-                  {...(props.onSetParagraphTabStops ? { onSetParagraphTabStops: props.onSetParagraphTabStops } : {})}
-                  {...(props.onRestartNumbering ? { onRestartNumbering: props.onRestartNumbering } : {})}
-                  {...(props.onContinueNumbering ? { onContinueNumbering: props.onContinueNumbering } : {})}
-                  {...(props.onInsertSectionBreak ? { onInsertSectionBreak: props.onInsertSectionBreak } : {})}
-                  {...(props.onDeleteSectionBreak ? { onDeleteSectionBreak: props.onDeleteSectionBreak } : {})}
-                  {...(props.onUpdateSectionLayout ? { onUpdateSectionLayout: props.onUpdateSectionLayout } : {})}
-                  {...(props.onSetSectionPageNumbering ? { onSetSectionPageNumbering: props.onSetSectionPageNumbering } : {})}
-                />
+                {/*
+                 * Slice A (designsystem §6.20 reshape, 2026-04-24):
+                 * the legacy "Page N of M · Section N · orientation
+                 * · Layout tools" strip mounted here is gone;
+                 * section-properties controls move to the on-demand
+                 * band-activation ribbon (Slice B).
+                 */}
                 {chromeVisibility.selectionOverlay &&
                 gatedSelectionTool &&
                 shouldRenderSelectionToolKind(scopedChromePolicy, gatedSelectionTool.kind) ? (

package/src/validation/compatibility-engine.ts

@@ -848,7 +848,7 @@ function toRevisionAffectedAnchor(
 ) {
   switch (revision.anchor.kind) {
     case "range":
-      return createPublicRangeAnchor(revision.anchor.range.from, revision.anchor.range.to);
+      return createPublicRangeAnchor(revision.anchor.from, revision.anchor.to);
     case "node":
       return createPublicRangeAnchor(revision.anchor.at, revision.anchor.at + 1);
     case "detached":

package/src/ui-tailwind/chrome/tw-layout-panel.tsx

@@ -1,114 +0,0 @@
-import React from "react";
-
-import type {
-  PageLayoutSnapshot,
-  SectionPageNumberingPatch,
-  SectionBreakType,
-  SectionLayoutPatch,
-} from "../../api/public-types";
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-export interface TwLayoutPanelProps {
-  pageLayout: PageLayoutSnapshot;
-  readOnly: boolean;
-  onInsertSectionBreak?: (type: SectionBreakType) => void;
-  onDeleteSectionBreak?: (sectionIndex: number) => void;
-  onUpdateSectionLayout?: (sectionIndex: number, patch: SectionLayoutPatch) => void;
-  onSetSectionPageNumbering?: (
-    sectionIndex: number,
-    patch: SectionPageNumberingPatch | null,
-  ) => void;
-}
-
-export function TwLayoutPanel(props: TwLayoutPanelProps) {
-  const nextOrientation = props.pageLayout.orientation === "portrait" ? "landscape" : "portrait";
-  const titlePageEnabled = props.pageLayout.differentFirstPage;
-
-  return (
-    <div className="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm">
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Section
-      </span>
-      <ToolbarButton
-        ariaLabel="Insert next-page section break"
-        disabled={props.readOnly || !props.onInsertSectionBreak}
-        onClick={() => props.onInsertSectionBreak?.("nextPage")}
-      >
-        Next-page break
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel={`Switch section to ${nextOrientation}`}
-        disabled={props.readOnly || !props.onUpdateSectionLayout}
-        onClick={() =>
-          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
-            pageSize: {
-              orientation: nextOrientation,
-              width: props.pageLayout.pageHeight,
-              height: props.pageLayout.pageWidth,
-            },
-          })}
-      >
-        {nextOrientation === "landscape" ? "Landscape" : "Portrait"}
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Delete current section break"
-        disabled={props.readOnly || props.pageLayout.sectionIndex === 0 || !props.onDeleteSectionBreak}
-        onClick={() => props.onDeleteSectionBreak?.(props.pageLayout.sectionIndex)}
-      >
-        Delete break
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Restart page numbering at 1"
-        disabled={props.readOnly || !props.onSetSectionPageNumbering}
-        onClick={() =>
-          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
-            ...(props.pageLayout.pageNumbering ?? {}),
-            start: 1,
-          })}
-      >
-        Restart numbering
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Use roman page numbering"
-        disabled={props.readOnly || !props.onSetSectionPageNumbering}
-        onClick={() =>
-          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
-            ...(props.pageLayout.pageNumbering ?? {}),
-            format: "roman",
-          })}
-      >
-        Roman numerals
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Toggle different first page"
-        disabled={props.readOnly || !props.onUpdateSectionLayout}
-        onClick={() =>
-          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
-            titlePage: !titlePageEnabled,
-          })}
-      >
-        {titlePageEnabled ? "Same first page" : "Different first page"}
-      </ToolbarButton>
-    </div>
-  );
-}
-
-function ToolbarButton(props: {
-  ariaLabel: string;
-  children: React.ReactNode;
-  disabled: boolean;
-  onClick?: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={props.ariaLabel}
-      disabled={props.disabled}
-      onMouseDown={preserveEditorSelectionMouseDown}
-      onClick={props.onClick}
-      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      {props.children}
-    </button>
-  );
-}