@beyondwork/docx-react-component 1.0.132 → 1.0.134

package/dist/{chunk-QUTVR72L.js → chunk-3YR47WTD.js}

@@ -1,6 +1,6 @@
 import {
   resolvePageOverlayRectsFromGeometry
-} from "./chunk-UP2KDOYE.js";
+} from "./chunk-74R5B2EZ.js";
 import {
   buildPageAnchorAttributes,
   buildPageAnchorSelector,
@@ -8,7 +8,7 @@ import {
   resolveChromePreset,
   resolveChromePresetOptions,
   resolveChromeVisibilityForPreset
-} from "./chunk-W2I47J2Q.js";
+} from "./chunk-NJFKPDNG.js";
 import {
   DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
   DEFAULT_PX_PER_TWIP,
@@ -20,19 +20,19 @@ import {
   incrementInvalidationCounter,
   recordPerfSample,
   sanitizeMarkdown
-} from "./chunk-LPLJZJT2.js";
+} from "./chunk-O4EDZR44.js";
 import {
   createCanvasBackend
 } from "./chunk-OVLZQ6FZ.js";
 import {
   storyTargetKey
-} from "./chunk-U3UMKA7B.js";
+} from "./chunk-XBQFDBXE.js";
 import {
   EMU_PER_INCH,
   EMU_PER_PX,
   ROTATION_UNITS_PER_DEGREE,
   TWIPS_PER_PX
-} from "./chunk-RYMMKOFI.js";
+} from "./chunk-5KTJKTNE.js";
 import {
   createPublicNodeAnchor,
   createPublicRangeAnchor
@@ -1870,6 +1870,43 @@ function TwToolbar(props) {
   const showPostFormattingDivider = showListActionsInRow || showSpacingActionsInRow || showInsertActionsInRow || showUpdateActionsInRow || showCompactOverflow;
   const zoomLabel = typeof zoomLevel === "number" ? `${zoomLevel}%` : zoomLevel === "pageWidth" ? "Fit width" : "Fit page";
   const showZoomSteppers = responsiveTier === "wide";
+  const bulletedListState = resolveListCommandControl({
+    canEdit,
+    editDisabledReason,
+    callback: props.onToggleBulletedList,
+    availability: getListCommandAvailability(props.activeListReadback, "toggle-bulleted")
+  });
+  const numberedListState = resolveListCommandControl({
+    canEdit,
+    editDisabledReason,
+    callback: props.onToggleNumberedList,
+    availability: getListCommandAvailability(props.activeListReadback, "toggle-numbered")
+  });
+  const outdentState = resolveListCommandControl({
+    canEdit,
+    editDisabledReason,
+    callback: props.onOutdent,
+    availability: getListCommandAvailability(props.activeListReadback, "outdent")
+  });
+  const indentState = resolveListCommandControl({
+    canEdit,
+    editDisabledReason,
+    callback: props.onIndent,
+    availability: getListCommandAvailability(props.activeListReadback, "indent")
+  });
+  const restartNumberingState = resolveListCommandControl({
+    canEdit,
+    editDisabledReason,
+    callback: props.onRestartNumbering,
+    availability: getListCommandAvailability(props.activeListReadback, "restart-numbering")
+  });
+  const continueNumberingState = resolveListCommandControl({
+    canEdit,
+    editDisabledReason,
+    callback: props.onContinueNumbering,
+    availability: getListCommandAvailability(props.activeListReadback, "continue-numbering")
+  });
+  const activeListKind = props.activeListReadback?.listKind;
   return /* @__PURE__ */ jsxs6(
     "header",
     {
@@ -1885,7 +1922,7 @@ function TwToolbar(props) {
       },
       className: [
         "shrink-0 rounded-[var(--radius-sm)] border border-[var(--color-border-subtle)]",
-        "bg-[var(--color-bg-chrome)] px-2.5",
+        "bg-[var(--color-bg-chrome)] px-2.5 shadow-[var(--shadow-soft)]",
         isCompact ? "flex min-h-10 flex-wrap items-center gap-1.5 py-1.5" : "flex items-center gap-1"
       ].join(" "),
       children: [
@@ -2054,9 +2091,9 @@ function TwToolbar(props) {
               {
                 icon: List,
                 label: "Bulleted list",
-                active: Boolean(props.activeListContext && !props.activeListContext.isOrdered),
-                disabled: !canEdit || !props.onToggleBulletedList,
-                disabledReason: editDisabledReason,
+                active: activeListKind ? activeListKind === "bulleted" : Boolean(props.activeListContext && !props.activeListContext.isOrdered),
+                disabled: bulletedListState.disabled,
+                disabledReason: bulletedListState.disabledReason,
                 onClick: props.onToggleBulletedList
               }
             ),
@@ -2065,9 +2102,9 @@ function TwToolbar(props) {
               {
                 icon: Rows32,
                 label: "Numbered list",
-                active: Boolean(props.activeListContext?.isOrdered),
-                disabled: !canEdit || !props.onToggleNumberedList,
-                disabledReason: editDisabledReason,
+                active: activeListKind ? activeListKind === "numbered" : Boolean(props.activeListContext?.isOrdered),
+                disabled: numberedListState.disabled,
+                disabledReason: numberedListState.disabledReason,
                 onClick: props.onToggleNumberedList
               }
             )
@@ -2078,8 +2115,8 @@ function TwToolbar(props) {
               {
                 icon: Outdent,
                 label: "Outdent",
-                disabled: !canEdit || !props.onOutdent,
-                disabledReason: editDisabledReason,
+                disabled: outdentState.disabled,
+                disabledReason: outdentState.disabledReason,
                 onClick: props.onOutdent
               }
             ),
@@ -2088,8 +2125,8 @@ function TwToolbar(props) {
               {
                 icon: Indent,
                 label: "Indent",
-                disabled: !canEdit || !props.onIndent,
-                disabledReason: editDisabledReason,
+                disabled: indentState.disabled,
+                disabledReason: indentState.disabledReason,
                 onClick: props.onIndent
               }
             )
@@ -2099,8 +2136,8 @@ function TwToolbar(props) {
               ToolbarTextButton,
               {
                 ariaLabel: "Restart numbering",
-                disabled: !canEdit || !props.onRestartNumbering,
-                disabledReason: editDisabledReason,
+                disabled: restartNumberingState.disabled,
+                disabledReason: restartNumberingState.disabledReason,
                 onClick: props.onRestartNumbering,
                 children: "Restart"
               }
@@ -2109,8 +2146,8 @@ function TwToolbar(props) {
               ToolbarTextButton,
               {
                 ariaLabel: "Continue numbering",
-                disabled: !canEdit || !props.onContinueNumbering,
-                disabledReason: editDisabledReason,
+                disabled: continueNumberingState.disabled,
+                disabledReason: continueNumberingState.disabledReason,
                 onClick: props.onContinueNumbering,
                 children: "Continue"
               }
@@ -2154,6 +2191,7 @@ function TwToolbar(props) {
             ToolbarCompactOverflow,
             {
               activeListContext: props.activeListContext,
+              activeListReadback: props.activeListReadback,
               canEdit,
               canInsertStructural,
               editDisabledReason,
@@ -2687,8 +2725,59 @@ function ToolbarFontSizeSelect(props) {
     }
   );
 }
+function getListCommandAvailability(readback, command) {
+  return readback?.commandSupport.find((entry) => entry.command === command);
+}
+function resolveListCommandControl(input) {
+  if (!input.canEdit) {
+    return { disabled: true, disabledReason: input.editDisabledReason };
+  }
+  if (!input.callback) {
+    return { disabled: true };
+  }
+  if (input.availability?.enabled === false) {
+    return { disabled: true, disabledReason: input.availability.reason };
+  }
+  return { disabled: false };
+}
 function ToolbarCompactOverflow(props) {
   const [open, setOpen] = React4.useState(false);
+  const bulletedListState = resolveListCommandControl({
+    canEdit: props.canEdit,
+    editDisabledReason: props.editDisabledReason,
+    callback: props.onToggleBulletedList,
+    availability: getListCommandAvailability(props.activeListReadback, "toggle-bulleted")
+  });
+  const numberedListState = resolveListCommandControl({
+    canEdit: props.canEdit,
+    editDisabledReason: props.editDisabledReason,
+    callback: props.onToggleNumberedList,
+    availability: getListCommandAvailability(props.activeListReadback, "toggle-numbered")
+  });
+  const outdentState = resolveListCommandControl({
+    canEdit: props.canEdit,
+    editDisabledReason: props.editDisabledReason,
+    callback: props.onOutdent,
+    availability: getListCommandAvailability(props.activeListReadback, "outdent")
+  });
+  const indentState = resolveListCommandControl({
+    canEdit: props.canEdit,
+    editDisabledReason: props.editDisabledReason,
+    callback: props.onIndent,
+    availability: getListCommandAvailability(props.activeListReadback, "indent")
+  });
+  const restartNumberingState = resolveListCommandControl({
+    canEdit: props.canEdit,
+    editDisabledReason: props.editDisabledReason,
+    callback: props.onRestartNumbering,
+    availability: getListCommandAvailability(props.activeListReadback, "restart-numbering")
+  });
+  const continueNumberingState = resolveListCommandControl({
+    canEdit: props.canEdit,
+    editDisabledReason: props.editDisabledReason,
+    callback: props.onContinueNumbering,
+    availability: getListCommandAvailability(props.activeListReadback, "continue-numbering")
+  });
   const overflowGroups = [
     props.showStyleSelectors || props.showInlineFormatting || props.showTextColors ? "Format" : null,
     props.showListActions || props.showParagraphActions || props.showParagraphAlignment || props.showListContinuation ? "Paragraph" : null,
@@ -2905,8 +2994,8 @@ function ToolbarCompactOverflow(props) {
           ToolbarMenuButton,
           {
             ariaLabel: "Bulleted list",
-            disabled: !props.canEdit || !props.onToggleBulletedList,
-            disabledReason: props.editDisabledReason,
+            disabled: bulletedListState.disabled,
+            disabledReason: bulletedListState.disabledReason,
             icon: /* @__PURE__ */ jsx6(List, { className: "h-3.5 w-3.5" }),
             label: "Bulleted list",
             onClick: () => {
@@ -2919,8 +3008,8 @@ function ToolbarCompactOverflow(props) {
           ToolbarMenuButton,
           {
             ariaLabel: "Numbered list",
-            disabled: !props.canEdit || !props.onToggleNumberedList,
-            disabledReason: props.editDisabledReason,
+            disabled: numberedListState.disabled,
+            disabledReason: numberedListState.disabledReason,
             icon: /* @__PURE__ */ jsx6(Rows32, { className: "h-3.5 w-3.5" }),
             label: "Numbered list",
             onClick: () => {
@@ -2949,8 +3038,8 @@ function ToolbarCompactOverflow(props) {
             ToolbarMenuButton,
             {
               ariaLabel: "Outdent",
-              disabled: !props.canEdit || !props.onOutdent,
-              disabledReason: props.editDisabledReason,
+              disabled: outdentState.disabled,
+              disabledReason: outdentState.disabledReason,
               icon: /* @__PURE__ */ jsx6(Outdent, { className: "h-3.5 w-3.5" }),
               label: "Outdent",
               onClick: () => {
@@ -2963,8 +3052,8 @@ function ToolbarCompactOverflow(props) {
             ToolbarMenuButton,
             {
               ariaLabel: "Indent",
-              disabled: !props.canEdit || !props.onIndent,
-              disabledReason: props.editDisabledReason,
+              disabled: indentState.disabled,
+              disabledReason: indentState.disabledReason,
               icon: /* @__PURE__ */ jsx6(Indent, { className: "h-3.5 w-3.5" }),
               label: "Indent",
               onClick: () => {
@@ -2979,8 +3068,8 @@ function ToolbarCompactOverflow(props) {
             ToolbarMenuButton,
             {
               ariaLabel: "Restart numbering",
-              disabled: !props.canEdit || !props.onRestartNumbering,
-              disabledReason: props.editDisabledReason,
+              disabled: restartNumberingState.disabled,
+              disabledReason: restartNumberingState.disabledReason,
               icon: /* @__PURE__ */ jsx6(Rows32, { className: "h-3.5 w-3.5" }),
               label: "Restart numbering",
               onClick: () => {
@@ -2993,8 +3082,8 @@ function ToolbarCompactOverflow(props) {
             ToolbarMenuButton,
             {
               ariaLabel: "Continue numbering",
-              disabled: !props.canEdit || !props.onContinueNumbering,
-              disabledReason: props.editDisabledReason,
+              disabled: continueNumberingState.disabled,
+              disabledReason: continueNumberingState.disabledReason,
               icon: /* @__PURE__ */ jsx6(Rows32, { className: "h-3.5 w-3.5" }),
               label: "Continue numbering",
               onClick: () => {
@@ -7904,294 +7993,6 @@ function resolveSkeletalPageOverlayRectsFromLayout(facet) {
   }
   return rects;
 }
-function pageOverlayLastBottom(rects) {
-  let bottom = 0;
-  for (const rect of rects) {
-    if (rect.bottomPx > bottom) bottom = rect.bottomPx;
-  }
-  return bottom;
-}
-function extendFinalPageOverlayRectToFlowHeight(rects, flowHeightPx) {
-  if (rects.length === 0 || !Number.isFinite(flowHeightPx)) return rects;
-  const last = rects[rects.length - 1];
-  if (flowHeightPx <= last.bottomPx + 1) return rects;
-  return [
-    ...rects.slice(0, -1),
-    {
-      ...last,
-      bottomPx: flowHeightPx,
-      heightPx: Math.max(0, flowHeightPx - last.topPx)
-    }
-  ];
-}
-function extendPageOverlayRectsAcrossTableBoundaryGaps(rects, tableBoundaryIndices) {
-  if (rects.length === 0 || tableBoundaryIndices.length === 0) return rects;
-  const tableBoundaries = new Set(tableBoundaryIndices);
-  const byPageIndex = /* @__PURE__ */ new Map();
-  for (const rect of rects) {
-    byPageIndex.set(rect.pageIndex, rect);
-  }
-  let changed = false;
-  const bridged = rects.map((rect) => {
-    if (!tableBoundaries.has(rect.pageIndex)) return rect;
-    const next = byPageIndex.get(rect.pageIndex + 1);
-    if (!next || next.topPx <= rect.bottomPx + 1) return rect;
-    changed = true;
-    return {
-      ...rect,
-      bottomPx: next.topPx,
-      heightPx: Math.max(0, next.topPx - rect.topPx)
-    };
-  });
-  return changed ? bridged : rects;
-}
-function mergePageOverlayRectsByPageIndex(baseRects, flowRects) {
-  if (baseRects.length === 0 || flowRects.length === 0) return baseRects;
-  const flowByIndex = /* @__PURE__ */ new Map();
-  for (const rect of flowRects) {
-    flowByIndex.set(rect.pageIndex, rect);
-  }
-  return baseRects.map((rect) => flowByIndex.get(rect.pageIndex) ?? rect);
-}
-function normalizeVisiblePageIndexRange(range, pageCount) {
-  if (!range || pageCount <= 0) return null;
-  const start = Math.max(0, Math.min(range.start, pageCount));
-  const end = Math.max(start, Math.min(range.end, pageCount));
-  if (start >= end) return null;
-  return { start, end };
-}
-function collectBoundaryIndicesForVisibleRange(range, pageCount) {
-  if (pageCount <= 1) return [];
-  const startBoundaryIndex = Math.max(0, range.start - 1);
-  const endBoundaryIndex = Math.min(pageCount - 2, range.end - 1);
-  if (startBoundaryIndex > endBoundaryIndex) return [];
-  const indices = [];
-  for (let index = startBoundaryIndex; index <= endBoundaryIndex; index += 1) {
-    indices.push(index);
-  }
-  return indices;
-}
-function parsePageBoundaryIndex(prevPageId) {
-  const match = /^page-(\d+)$/.exec(prevPageId);
-  if (!match) return void 0;
-  return Number.parseInt(match[1] ?? "", 10);
-}
-function collectTableEmbeddedBoundaryIndices(queryRoot) {
-  if (!queryRoot) return [];
-  const indices = [];
-  const widgets = Array.from(
-    queryRoot.querySelectorAll("[data-page-frame-end]")
-  );
-  for (const widget of widgets) {
-    const prevPageId = widget.getAttribute("data-page-frame-end");
-    if (!prevPageId) continue;
-    const boundaryIndex = parsePageBoundaryIndex(prevPageId);
-    if (boundaryIndex === void 0) continue;
-    if (widget.closest("[data-pm-table-root='true'], table")) {
-      indices.push(boundaryIndex);
-    }
-  }
-  return indices;
-}
-function containsTableBoundaryRisk(queryRoot) {
-  if (!queryRoot) return false;
-  if (queryRoot.getElementsByTagName("table").length > 0) return true;
-  const descendants = queryRoot.getElementsByTagName("*");
-  for (let i = 0; i < descendants.length; i += 1) {
-    const element = descendants[i];
-    if (element.getAttribute("data-pm-table-root") === "true") {
-      return true;
-    }
-  }
-  return false;
-}
-function resolvePageOverlayRects(input, legacyPageCount) {
-  let widgets;
-  let pageCount;
-  let scrollHeight;
-  if (Array.isArray(input)) {
-    const [scrollRoot, count] = input;
-    if (!scrollRoot || count <= 0) return [];
-    widgets = measureWidgetsViaOffsetChain(scrollRoot);
-    pageCount = count;
-    scrollHeight = scrollRoot.clientHeight;
-  } else if (input !== null && typeof input === "object" && "widgets" in input) {
-    widgets = input.widgets;
-    pageCount = input.pageCount;
-    scrollHeight = input.scrollHeight;
-  } else if (input && legacyPageCount !== void 0) {
-    const scrollRoot = input;
-    if (legacyPageCount <= 0) return [];
-    widgets = measureWidgetsViaOffsetChain(scrollRoot);
-    pageCount = legacyPageCount;
-    scrollHeight = scrollRoot.clientHeight;
-  } else {
-    return [];
-  }
-  if (pageCount <= 0) return [];
-  const boundaries = [...widgets].sort((a, b) => a.topPx - b.topPx);
-  const normalizedVisiblePageIndexRange = Array.isArray(input) ? null : normalizeVisiblePageIndexRange(input.visiblePageIndexRange, pageCount);
-  const boundaryByIndex = /* @__PURE__ */ new Map();
-  boundaries.forEach((boundary, index) => {
-    const boundaryIndex = boundary.boundaryIndex ?? parsePageBoundaryIndex(boundary.prevPageId) ?? index;
-    boundaryByIndex.set(boundaryIndex, boundary);
-  });
-  const pageStart = normalizedVisiblePageIndexRange?.start ?? 0;
-  const pageEnd = normalizedVisiblePageIndexRange?.end ?? pageCount;
-  const rects = [];
-  for (let pageIndex = pageStart; pageIndex < pageEnd; pageIndex += 1) {
-    const boundaryBefore = pageIndex === 0 ? null : boundaryByIndex.get(pageIndex - 1) ?? null;
-    const boundaryAfter = pageIndex === pageCount - 1 ? null : boundaryByIndex.get(pageIndex) ?? null;
-    let pageId = null;
-    if (boundaryBefore) pageId = boundaryBefore.nextPageId;
-    else if (boundaryAfter) pageId = boundaryAfter.prevPageId;
-    if (!pageId) pageId = `page-${pageIndex}`;
-    const topPx = boundaryBefore ? boundaryBefore.bottomPx : 0;
-    const bottomPx = boundaryAfter ? boundaryAfter.topPx : scrollHeight;
-    if (bottomPx <= topPx) continue;
-    rects.push({
-      pageId,
-      pageIndex,
-      topPx,
-      bottomPx,
-      heightPx: bottomPx - topPx
-    });
-  }
-  return rects;
-}
-function measureWidgetsViaBoundingRect(queryRoot, originElement, options) {
-  if (!queryRoot || !originElement) return [];
-  const originRect = originElement.getBoundingClientRect();
-  const normalizedVisiblePageIndexRange = normalizeVisiblePageIndexRange(
-    options?.visiblePageIndexRange,
-    options?.pageCount ?? 0
-  );
-  const queryOne = typeof queryRoot.querySelector === "function" ? queryRoot.querySelector.bind(queryRoot) : null;
-  const widgets = normalizedVisiblePageIndexRange && queryOne && options?.pageCount ? collectBoundaryIndicesForVisibleRange(
-    normalizedVisiblePageIndexRange,
-    options.pageCount
-  ).map(
-    (boundaryIndex) => queryOne(`[data-page-frame-end="page-${boundaryIndex}"]`)
-  ).filter((widget) => widget !== null) : Array.from(
-    queryRoot.querySelectorAll("[data-page-frame-end]")
-  );
-  const out = [];
-  for (const widget of widgets) {
-    const prevPageId = widget.getAttribute("data-page-frame-end");
-    const nextPageId = widget.getAttribute("data-page-frame-start");
-    if (!prevPageId || !nextPageId) continue;
-    const rect = widget.getBoundingClientRect();
-    out.push({
-      prevPageId,
-      nextPageId,
-      boundaryIndex: parsePageBoundaryIndex(prevPageId),
-      topPx: rect.top - originRect.top,
-      bottomPx: rect.bottom - originRect.top
-    });
-  }
-  return out;
-}
-function measureWidgetsViaOffsetChain(scrollRoot, options) {
-  const normalizedVisiblePageIndexRange = normalizeVisiblePageIndexRange(
-    options?.visiblePageIndexRange,
-    options?.pageCount ?? 0
-  );
-  const queryOne = typeof scrollRoot.querySelector === "function" ? scrollRoot.querySelector.bind(scrollRoot) : null;
-  const widgets = normalizedVisiblePageIndexRange && queryOne && options?.pageCount ? collectBoundaryIndicesForVisibleRange(
-    normalizedVisiblePageIndexRange,
-    options.pageCount
-  ).map(
-    (boundaryIndex) => queryOne(`[data-page-frame-end="page-${boundaryIndex}"]`)
-  ).filter((widget) => widget !== null) : Array.from(
-    scrollRoot.querySelectorAll("[data-page-frame-end]")
-  );
-  const out = [];
-  for (const widget of widgets) {
-    const prevPageId = widget.getAttribute("data-page-frame-end");
-    const nextPageId = widget.getAttribute("data-page-frame-start");
-    if (!prevPageId || !nextPageId) continue;
-    const topPx = resolveOffsetTop(widget, scrollRoot);
-    const bottomPx = topPx + resolveOffsetHeight(widget);
-    out.push({
-      prevPageId,
-      nextPageId,
-      boundaryIndex: parsePageBoundaryIndex(prevPageId),
-      topPx,
-      bottomPx
-    });
-  }
-  return out;
-}
-function resolveOffsetTop(widget, scrollRoot) {
-  let node = widget;
-  let top = 0;
-  while (node) {
-    top += node.offsetTop ?? 0;
-    const parent = node.offsetParent;
-    if (parent === scrollRoot || parent === null) break;
-    node = parent;
-  }
-  return top;
-}
-function resolveOffsetHeight(widget) {
-  return widget.offsetHeight ?? 0;
-}
-function readElementFlowHeight(element, options = {}) {
-  if (!element) return 0;
-  let height = 0;
-  height = Math.max(height, element.clientHeight || 0);
-  if (options.includeScrollHeight !== false) {
-    height = Math.max(height, element.scrollHeight || 0);
-  }
-  if (height <= 0) {
-    const rect = element.getBoundingClientRect();
-    height = Math.max(height, rect.height || 0);
-  }
-  return height;
-}
-function readOverlayFlowHeight(origin) {
-  if (!origin) return 0;
-  const parent = origin.parentElement instanceof HTMLElement ? origin.parentElement : null;
-  const parentHeight = readElementFlowHeight(parent);
-  if (parentHeight > 0) return parentHeight;
-  return readElementFlowHeight(origin, { includeScrollHeight: false });
-}
-function reconcilePageStackRectsWithFlow(input) {
-  const { baseRects, pageCount, scrollRoot, originElement } = input;
-  if (baseRects.length === 0 || pageCount <= 0) return baseRects;
-  const flowHeight = readOverlayFlowHeight(originElement);
-  if (flowHeight <= 0) return baseRects;
-  const geometryBottom = pageOverlayLastBottom(baseRects);
-  const tableBoundaryRisk = containsTableBoundaryRisk(scrollRoot);
-  if (!tableBoundaryRisk && flowHeight <= geometryBottom + 1) {
-    return extendFinalPageOverlayRectToFlowHeight(baseRects, flowHeight);
-  }
-  const bridgedBase = extendPageOverlayRectsAcrossTableBoundaryGaps(
-    baseRects,
-    tableBoundaryRisk ? collectTableEmbeddedBoundaryIndices(scrollRoot) : []
-  );
-  const extendedBase = extendFinalPageOverlayRectToFlowHeight(
-    bridgedBase,
-    flowHeight
-  );
-  if (!originElement || !scrollRoot) return extendedBase;
-  if (flowHeight <= pageOverlayLastBottom(bridgedBase) + 1) {
-    return extendedBase;
-  }
-  const widgets = measureWidgetsViaBoundingRect(scrollRoot, originElement, {
-    pageCount,
-    visiblePageIndexRange: null
-  });
-  if (widgets.length === 0) return extendedBase;
-  const flowRects = resolvePageOverlayRects({
-    widgets,
-    pageCount,
-    scrollHeight: flowHeight,
-    visiblePageIndexRange: null
-  });
-  const merged = mergePageOverlayRectsByPageIndex(extendedBase, flowRects);
-  return extendFinalPageOverlayRectToFlowHeight(merged, flowHeight);
-}
 var resolvePageOverlayRectsFromGeometry2 = resolvePageOverlayRectsFromGeometry;
 function resolvePageOverlayRectsFromUiApi(ui, pageCount, visiblePageIndexRange, pageIds) {
   if (pageCount <= 0) return [];
@@ -8249,17 +8050,6 @@ var TwPageStackOverlayLayer = ({
     },
     []
   );
-  const reconcilePaperRectsWithFlow = React14.useCallback(
-    (baseRects, pageCount) => {
-      return reconcilePageStackRectsWithFlow({
-        baseRects,
-        pageCount,
-        scrollRoot,
-        originElement: overlayRootRef.current
-      });
-    },
-    [scrollRoot]
-  );
   const refreshRectsNow = React14.useCallback(() => {
     const pageCount = facet.getPageCount();
     const skeletalRects = resolveSkeletalPageOverlayRectsFromLayout(facet);
@@ -8300,51 +8090,11 @@ var TwPageStackOverlayLayer = ({
       setRectsIfChanged(skeletalRects);
       return;
     }
-    if (!scrollRoot) {
-      setRectsIfChanged(skeletalRects);
-      return;
-    }
-    const origin = overlayRootRef.current;
-    incrementInvalidationCounter("overlay.page.dom_fallback");
-    if (origin) {
-      incrementInvalidationCounter("overlay.page.dom.degraded");
-      const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
-        pageCount,
-        visiblePageIndexRange: null
-      });
-      const originRect = origin.getBoundingClientRect();
-      const domRects = resolvePageOverlayRects({
-        widgets,
-        pageCount,
-        scrollHeight: (
-          // geometry:allow-dom-fallback
-          origin.clientHeight > 0 ? origin.clientHeight : originRect.height
-        ),
-        visiblePageIndexRange: null
-      });
-      const reconciled = reconcilePaperRectsWithFlow(domRects, pageCount);
-      setRectsIfChanged(reconciled.length > 0 ? reconciled : skeletalRects);
-    } else {
-      incrementInvalidationCounter("overlay.page.dom.degraded");
-      const widgets = measureWidgetsViaOffsetChain(scrollRoot, {
-        pageCount,
-        visiblePageIndexRange: null
-      });
-      const domRects = resolvePageOverlayRects({
-        widgets,
-        pageCount,
-        // geometry:allow-dom-fallback
-        scrollHeight: scrollRoot.clientHeight,
-        visiblePageIndexRange: null
-      });
-      const reconciled = reconcilePaperRectsWithFlow(domRects, pageCount);
-      setRectsIfChanged(reconciled.length > 0 ? reconciled : skeletalRects);
-    }
+    incrementInvalidationCounter("overlay.page.skeletal_fallback");
+    setRectsIfChanged(skeletalRects);
   }, [
     facet,
     geometryFacet,
-    reconcilePaperRectsWithFlow,
-    scrollRoot,
     setRectsIfChanged,
     ui
   ]);
@@ -8375,33 +8125,6 @@ var TwPageStackOverlayLayer = ({
       }
     };
   }, [refreshRects, renderFrameRevision, scrollRoot]);
-  React14.useEffect(() => {
-    if (geometryFacet) return;
-    if (!scrollRoot) return;
-    const runtime = scrollRoot.ownerDocument?.defaultView;
-    if (!runtime?.ResizeObserver) return;
-    const observer = new runtime.ResizeObserver(() => refreshRects());
-    observer.observe(scrollRoot);
-    return () => observer.disconnect();
-  }, [geometryFacet, scrollRoot, refreshRects]);
-  React14.useEffect(() => {
-    if (geometryFacet) return;
-    if (!scrollRoot) return;
-    const runtime = scrollRoot.ownerDocument?.defaultView;
-    if (!runtime?.MutationObserver) return;
-    const observer = new runtime.MutationObserver((records) => {
-      const overlay = overlayRootRef.current;
-      if (overlay) {
-        const allSelf = records.every(
-          (r) => r.target instanceof Node && overlay.contains(r.target)
-        );
-        if (allSelf) return;
-      }
-      refreshRects();
-    });
-    observer.observe(scrollRoot, { childList: true, subtree: false });
-    return () => observer.disconnect();
-  }, [geometryFacet, scrollRoot, refreshRects]);
   if (rects.length === 0) {
     return /* @__PURE__ */ jsx28(
       "div",
@@ -9043,6 +8766,18 @@ function emuToPx(emu, pxPerTwip) {
   return emu / EMU_PER_PX * zoomFactor;
 }
 
+// src/ui-tailwind/editor-surface/media-src-policy.ts
+var SAFE_DATA_IMAGE_PREFIX_RE = /^data:image\/(?:png|jpe?g|gif|webp|bmp);base64,/iu;
+var MAX_NUMBERING_PICTURE_BULLET_DATA_URL_LENGTH = 1024 * 1024;
+function sanitizeNumberingPictureBulletSrc(src) {
+  if (typeof src !== "string") return null;
+  const trimmed = src.trim();
+  if (trimmed.length === 0) return null;
+  if (trimmed.length > MAX_NUMBERING_PICTURE_BULLET_DATA_URL_LENGTH) return null;
+  if (!SAFE_DATA_IMAGE_PREFIX_RE.test(trimmed)) return null;
+  return trimmed;
+}
+
 // src/ui-tailwind/page-stack/tw-region-block-renderer.tsx
 import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var EMU_PER_PX2 = 9525;
@@ -9157,6 +8892,10 @@ function renderSegment(seg, mediaPreviews, fallbackDisplay, tabInfoBySegment) {
         "span",
         {
           "data-node-type": "field_ref",
+          "data-generated-field": "true",
+          "data-field-family": seg.fieldFamily,
+          "data-field-target": seg.fieldTarget,
+          "data-field-refresh-status": seg.refreshStatus,
           style: { opacity: 0.6, fontSize: "0.85em" },
           children: seg.displayText ?? seg.label
         },
@@ -9206,6 +8945,9 @@ function RegionParagraph({
   const markerWidth = resolvedNumbering?.geometry?.markerLane?.width;
   const markerStart = resolvedNumbering?.geometry?.markerLane?.start;
   const markerJustification = resolvedNumbering?.geometry?.markerJustification;
+  const pictureBulletSrc = sanitizeNumberingPictureBulletSrc(
+    resolvedNumbering?.picBulletMediaId ? mediaPreviews[resolvedNumbering.picBulletMediaId]?.src : null
+  );
   const prefixSpan = numberingPrefix != null ? /* @__PURE__ */ jsx29(
     "span",
     {
@@ -9216,7 +8958,9 @@ function RegionParagraph({
         ...!markerRunProperties ? ["text-tertiary", "font-[family-name:var(--font-legal-sans)]"] : []
       ].join(" "),
       contentEditable: false,
-      "data-numbering-prefix": numberingPrefix,
+      "data-numbering-marker": "true",
+      "data-numbering-prefix": pictureBulletSrc ? "" : numberingPrefix,
+      ...pictureBulletSrc ? { "data-numbering-picture-bullet": resolvedNumbering?.pictureBulletPosture?.status ?? "media-rendered" } : {},
       ...typeof resolvedNumbering?.level === "number" ? { "data-numbering-level": String(resolvedNumbering.level) } : {},
       ...numberingSuffix ? { "data-numbering-suffix": numberingSuffix } : {},
       style: buildMarkerStyle(
@@ -9227,7 +8971,20 @@ function RegionParagraph({
         markerStart,
         markerJustification
       ),
-      children: numberingPrefix
+      children: pictureBulletSrc ? /* @__PURE__ */ jsx29(
+        "img",
+        {
+          src: pictureBulletSrc,
+          alt: "",
+          "aria-hidden": "true",
+          style: {
+            maxWidth: "100%",
+            maxHeight: "100%",
+            objectFit: "contain",
+            display: "block"
+          }
+        }
+      ) : numberingPrefix
     }
   ) : null;
   const attrs = {
@@ -9566,18 +9323,7 @@ function findScrollAnchor(root, options) {
         offsetWithinBlock: viewportTopFramePx - blockTop
       };
     }
-  }
-  const rootRect = root.getBoundingClientRect();
-  const rootTop = rootRect.top;
-  for (const block of blocks) {
-    const rect = block.getBoundingClientRect();
-    if (rect.bottom < rootTop) continue;
-    const blockId = block.getAttribute("data-block-id");
-    if (!blockId) continue;
-    return {
-      blockId,
-      offsetWithinBlock: rootTop - rect.top
-    };
+    return null;
   }
   return null;
 }
@@ -9595,17 +9341,9 @@ function resolveScrollTopForAnchor(root, anchor, options) {
       const rect = geometry.rects[0];
       return rect.topPx + anchor.offsetWithinBlock;
     }
+    return null;
   }
-  const selector = `[data-block-id="${cssEscape(anchor.blockId)}"]`;
-  const block = root.querySelector(selector);
-  if (!block) return null;
-  const rootRect = root.getBoundingClientRect();
-  const blockRect = block.getBoundingClientRect();
-  const delta = blockRect.top - rootRect.top + anchor.offsetWithinBlock;
-  return root.scrollTop + delta;
-}
-function cssEscape(value) {
-  return value.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch}`);
+  return null;
 }
 
 // src/ui-tailwind/chrome/collab-top-nav-container.tsx
@@ -10945,7 +10683,17 @@ function TwSelectionToolStructure(props) {
           onSetCellVerticalAlign: props.onSetCellVerticalAlign
         }
       );
-    case "list":
+    case "list": {
+      const continueState = resolveListToolbarButtonState({
+        canMutate: props.model.canMutate,
+        callback: props.onContinueNumbering,
+        availability: getListCommandAvailability2(props.activeListReadback, "continue-numbering")
+      });
+      const restartState = resolveListToolbarButtonState({
+        canMutate: props.model.canMutate,
+        callback: props.onRestartNumbering,
+        availability: getListCommandAvailability2(props.activeListReadback, "restart-numbering")
+      });
       return /* @__PURE__ */ jsxs34(
         "div",
         {
@@ -10957,7 +10705,8 @@ function TwSelectionToolStructure(props) {
               ToolbarButton3,
               {
                 ariaLabel: "Continue numbering",
-                disabled: !props.model.canMutate || !props.onContinueNumbering,
+                disabled: continueState.disabled,
+                disabledReason: continueState.disabledReason,
                 onClick: props.onContinueNumbering,
                 children: "Continue"
               }
@@ -10966,7 +10715,8 @@ function TwSelectionToolStructure(props) {
               ToolbarButton3,
               {
                 ariaLabel: "Restart numbering",
-                disabled: !props.model.canMutate || !props.onRestartNumbering,
+                disabled: restartState.disabled,
+                disabledReason: restartState.disabledReason,
                 onClick: props.onRestartNumbering,
                 children: "Restart"
               }
@@ -10974,15 +10724,31 @@ function TwSelectionToolStructure(props) {
           ]
         }
       );
+    }
   }
 }
+function getListCommandAvailability2(readback, command) {
+  return readback?.commandSupport.find((entry) => entry.command === command);
+}
+function resolveListToolbarButtonState(input) {
+  if (!input.canMutate || !input.callback) {
+    return { disabled: true };
+  }
+  if (input.availability?.enabled === false) {
+    return { disabled: true, disabledReason: input.availability.reason };
+  }
+  return { disabled: false };
+}
 function ToolbarButton3(props) {
+  const disabledReason = props.disabled && props.disabledReason ? props.disabledReason : void 0;
   return /* @__PURE__ */ jsx43(
     "button",
     {
       type: "button",
       "aria-label": props.ariaLabel,
       disabled: props.disabled,
+      "data-disabled-reason": disabledReason,
+      title: disabledReason ? `Not available: ${disabledReason}` : void 0,
       onMouseDown: preserveEditorSelectionMouseDown,
       onClick: props.onClick,
       className: "inline-flex h-7 items-center rounded-md border border-border px-2 text-[length:var(--text-xs)] font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40",
@@ -11371,6 +11137,7 @@ function renderTool(props, tool, density) {
           onSetImageFrame: props.onSetImageFrame,
           onRestartNumbering: props.onRestartNumbering,
           onContinueNumbering: props.onContinueNumbering,
+          activeListReadback: props.activeListReadback,
           onToggleRowHeader: props.onToggleRowHeader,
           onToggleRowCantSplit: props.onToggleRowCantSplit,
           onDistributeColumnsEvenly: props.onDistributeColumnsEvenly,
@@ -11571,6 +11338,7 @@ var EDITOR_ACTION_REGISTRY = [
     group: "clipboard",
     targetKinds: [
       "plain-text",
+      "list-item",
       "table-cell",
       "image",
       "hyperlink",
@@ -11589,9 +11357,11 @@ var EDITOR_ACTION_REGISTRY = [
     group: "clipboard",
     targetKinds: [
       "plain-text",
+      "list-item",
       "table-cell",
       "image",
       "hyperlink",
+      "generated-field",
       "suggestion",
       "comment-anchor",
       "opaque-block",
@@ -11606,6 +11376,7 @@ var EDITOR_ACTION_REGISTRY = [
     group: "clipboard",
     targetKinds: [
       "plain-text",
+      "list-item",
       "table-cell",
       "hyperlink",
       "suggestion",
@@ -11766,28 +11537,28 @@ var EDITOR_ACTION_REGISTRY = [
     id: "list-bulleted",
     label: "Bulleted list",
     group: "formatting",
-    targetKinds: ["plain-text", "table-cell"],
+    targetKinds: ["list-item", "plain-text", "table-cell"],
     callback: "onToggleBulletedList"
   }),
   mk({
     id: "list-numbered",
     label: "Numbered list",
     group: "formatting",
-    targetKinds: ["plain-text", "table-cell"],
+    targetKinds: ["list-item", "plain-text", "table-cell"],
     callback: "onToggleNumberedList"
   }),
   mk({
     id: "paragraph-outdent",
     label: "Decrease indent",
     group: "formatting",
-    targetKinds: ["plain-text", "table-cell"],
+    targetKinds: ["list-item", "plain-text", "table-cell"],
     callback: "onOutdent"
   }),
   mk({
     id: "paragraph-indent",
     label: "Increase indent",
     group: "formatting",
-    targetKinds: ["plain-text", "table-cell"],
+    targetKinds: ["list-item", "plain-text", "table-cell"],
     callback: "onIndent"
   }),
   mkArg({
@@ -12136,6 +11907,23 @@ var EDITOR_ACTION_REGISTRY = [
     targetKinds: ["hyperlink"],
     callback: "onOpenHyperlink"
   }),
+  // -------- Generated fields --------
+  mk({
+    id: "field-refresh",
+    label: "Refresh field",
+    description: "Refresh generated field results through the runtime field updater.",
+    group: "misc",
+    targetKinds: ["generated-field"],
+    callback: "onUpdateFields"
+  }),
+  mk({
+    id: "toc-refresh",
+    label: "Refresh table of contents",
+    description: "Refresh TOC entries through the runtime table-of-contents updater.",
+    group: "misc",
+    targetKinds: ["toc-field"],
+    callback: "onUpdateTableOfContents"
+  }),
   // -------- Workflow scope --------
   mk({
     id: "scope-open-card",
@@ -12721,13 +12509,40 @@ function hasAncestorAttributeValue(el, attribute, expected, root) {
   }
   return false;
 }
+function hasAncestorAttributeValueInsensitive(el, attribute, expected, root) {
+  const normalizedExpected = expected.toLowerCase();
+  let cursor = el;
+  while (cursor) {
+    if (cursor.getAttribute?.(attribute)?.toLowerCase() === normalizedExpected) {
+      return true;
+    }
+    if (cursor === root) return false;
+    cursor = cursor.parentElement;
+  }
+  return false;
+}
 function resolveTargetKind(target, options = {}) {
   const kinds = [];
   const el = toElement(target);
   if (el) {
     const { root } = options;
+    const insideNumberingMarker = hasAncestorAttributeValue(
+      el,
+      "data-numbering-marker",
+      "true",
+      root
+    );
+    const insideListItem = insideNumberingMarker || hasAncestorAttributeValue(el, "data-numbered", "true", root);
+    const insideGeneratedField = hasAncestorAttributeValue(el, "data-generated-field", "true", root) || hasAncestorAttributeValue(el, "data-node-type", "field_ref_atom", root) || hasAncestorAttributeValue(el, "data-node-type", "field_ref", root);
+    if (insideListItem) kinds.push("list-item");
+    if (insideGeneratedField) {
+      kinds.push("generated-field");
+      if (hasAncestorAttributeValueInsensitive(el, "data-field-family", "TOC", root)) {
+        kinds.push("toc-field");
+      }
+    }
     if (hasAncestorTag(el, "a", root)) kinds.push("hyperlink");
-    if (hasAncestorTag(el, "img", root)) {
+    if (!insideNumberingMarker && hasAncestorTag(el, "img", root)) {
       kinds.push("image");
     }
     if (hasAncestorTag(el, "td", root) || hasAncestorTag(el, "th", root)) {
@@ -12763,7 +12578,9 @@ function resolveTargetKind(target, options = {}) {
       if (!kinds.includes("template-slot")) kinds.push("template-slot");
     }
   }
-  if (!kinds.includes("plain-text")) kinds.push("plain-text");
+  if (!kinds.includes("generated-field") && !kinds.includes("plain-text")) {
+    kinds.push("plain-text");
+  }
   return kinds;
 }
 
@@ -13029,45 +12846,17 @@ var TwFloatingImageLayer = ({
   const [pageRects, setPageRects] = React25.useState([]);
   const refreshPageRectsNow = React25.useCallback(() => {
     const pageCount = facet.getPageCount();
-    if (geometryFacet) {
-      const geometryRects = resolvePageOverlayRectsFromGeometry2(
-        geometryFacet,
-        pageCount,
-        visiblePageIndexRange
-      );
-      if (geometryRects !== null) {
-        setPageRects(geometryRects);
-        return;
-      }
-      setPageRects([]);
-      return;
-    }
-    if (!scrollRoot) {
-      setPageRects([]);
-      return;
-    }
-    const origin = overlayRootRef.current;
-    if (!origin) {
+    if (!geometryFacet) {
       setPageRects([]);
       return;
     }
-    const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
+    const geometryRects = resolvePageOverlayRectsFromGeometry2(
+      geometryFacet,
       pageCount,
       visiblePageIndexRange
-    });
-    const originRect = origin.getBoundingClientRect();
-    setPageRects(
-      resolvePageOverlayRects({
-        widgets,
-        pageCount,
-        scrollHeight: (
-          // geometry:allow-dom-fallback
-          origin.clientHeight > 0 ? origin.clientHeight : originRect.height
-        ),
-        visiblePageIndexRange
-      })
     );
-  }, [facet, geometryFacet, scrollRoot, visiblePageIndexRange]);
+    setPageRects(geometryRects ?? []);
+  }, [facet, geometryFacet, visiblePageIndexRange]);
   const refreshPageRects = React25.useCallback(() => {
     if (!scrollRoot) {
       refreshPageRectsNow();
@@ -13097,47 +12886,6 @@ var TwFloatingImageLayer = ({
       }
     };
   }, [refreshPageRects, renderFrameRevision, scrollRoot]);
-  React25.useEffect(() => {
-    if (geometryFacet) {
-      return;
-    }
-    if (!scrollRoot) {
-      return;
-    }
-    const runtime = scrollRoot.ownerDocument?.defaultView;
-    if (!runtime?.ResizeObserver) {
-      return;
-    }
-    const observer = new runtime.ResizeObserver(() => refreshPageRects());
-    observer.observe(scrollRoot);
-    return () => observer.disconnect();
-  }, [geometryFacet, refreshPageRects, scrollRoot]);
-  React25.useEffect(() => {
-    if (geometryFacet) {
-      return;
-    }
-    if (!scrollRoot) {
-      return;
-    }
-    const runtime = scrollRoot.ownerDocument?.defaultView;
-    if (!runtime?.MutationObserver) {
-      return;
-    }
-    const observer = new runtime.MutationObserver((records) => {
-      const overlay = overlayRootRef.current;
-      if (overlay) {
-        const allSelf = records.every(
-          (record) => record.target instanceof Node && overlay.contains(record.target)
-        );
-        if (allSelf) {
-          return;
-        }
-      }
-      refreshPageRects();
-    });
-    observer.observe(scrollRoot, { childList: true, subtree: false });
-    return () => observer.disconnect();
-  }, [geometryFacet, refreshPageRects, scrollRoot]);
   const items = React25.useMemo(() => {
     const viewportScale = geometryFacet?.getViewport().pxPerTwip;
     const pxPerTwip = typeof viewportScale === "number" && viewportScale > 0 ? viewportScale : void 0;
@@ -15405,6 +15153,21 @@ function resolveRoleChromePreset(basePreset, role) {
   }
   return basePreset;
 }
+function resolveActiveListReadback(rows, activeListContext, selection) {
+  if (!activeListContext) {
+    return null;
+  }
+  const selectionPoint = selection.activeRange.kind === "range" ? selection.head : selection.activeRange.kind === "node" ? selection.activeRange.at : selection.activeRange.lastKnownRange.from;
+  const matchingSelectionRow = rows.find(
+    (row) => row.numberingInstanceId === activeListContext.numberingInstanceId && row.level === activeListContext.level && selectionPoint >= row.authoredTextRange.from && selectionPoint <= row.authoredTextRange.to
+  );
+  if (matchingSelectionRow) {
+    return matchingSelectionRow;
+  }
+  return rows.find(
+    (row) => row.numberingInstanceId === activeListContext.numberingInstanceId && row.level === activeListContext.level
+  ) ?? null;
+}
 function TwReviewWorkspace(inputProps) {
   const props = {
     ...inputProps,
@@ -15519,6 +15282,14 @@ function TwReviewWorkspace(inputProps) {
     () => uiApi?.scope.list().length,
     [uiApi, renderFrameRevision]
   );
+  const activeListReadback = useMemo15(
+    () => resolveActiveListReadback(
+      uiApi?.lists.list() ?? [],
+      props.activeListContext,
+      viewState.selection
+    ),
+    [uiApi, props.activeListContext, viewState.selection, renderFrameRevision]
+  );
   const headings = props.documentNavigation?.headings ?? [];
   const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
   const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
@@ -15787,6 +15558,7 @@ function TwReviewWorkspace(inputProps) {
                 zoomLevel: props.zoomLevel,
                 formattingState: props.formattingState,
                 activeListContext: props.activeListContext,
+                activeListReadback,
                 styleCatalog: props.styleCatalog,
                 showTrackedChanges: trackedChangesAuthoringEnabled,
                 showSidebarToggle: responsiveChrome.showSidebarToggle,
@@ -15998,6 +15770,7 @@ function TwReviewWorkspace(inputProps) {
                               onSetImageFrame: props.onSetImageFrame,
                               onRestartNumbering: props.onRestartNumbering,
                               onContinueNumbering: props.onContinueNumbering,
+                              activeListReadback,
                               onToggleRowHeader: props.onToggleRowHeader,
                               onToggleRowCantSplit: props.onToggleRowCantSplit,
                               onDistributeColumnsEvenly: props.onDistributeColumnsEvenly,
@@ -17175,25 +16948,23 @@ var TwPageStackChromeLayerInner = ({
     const pageCount = facet.getPageCount();
     const uiRects = resolveUiPageRects(pageCount);
     if (uiRects !== null) return uiRects;
-    if (!geometryFacet) return [];
-    const warm = resolvePageOverlayRectsFromGeometry2(
-      geometryFacet,
-      pageCount,
-      visiblePageIndexRange
+    if (geometryFacet) {
+      const warm = resolvePageOverlayRectsFromGeometry2(
+        geometryFacet,
+        pageCount,
+        visiblePageIndexRange
+      );
+      if (warm !== null) return warm;
+    }
+    return resolveSkeletalPageOverlayRectsFromLayout(facet).filter(
+      (rect) => !visiblePageIndexRange || rect.pageIndex >= visiblePageIndexRange.start && rect.pageIndex < visiblePageIndexRange.end
     );
-    return warm ?? [];
   });
   const overlayRootRef = React34.useRef(null);
   const rafHandleRef = React34.useRef(null);
   const [activeStoryPageIndex, setActiveStoryPageIndex] = React34.useState(null);
   const refreshRectsNow = React34.useCallback(() => {
     const pageCount = facet.getPageCount();
-    const reconcileDomRects = (baseRects) => reconcilePageStackRectsWithFlow({
-      baseRects,
-      pageCount,
-      scrollRoot,
-      originElement: overlayRootRef.current
-    });
     const uiRects = resolveUiPageRects(pageCount);
     if (uiRects !== null) {
       setRects(uiRects);
@@ -17212,47 +16983,11 @@ var TwPageStackChromeLayerInner = ({
       setRects([]);
       return;
     }
-    if (!scrollRoot) {
-      setRects([]);
-      return;
-    }
-    const origin = overlayRootRef.current;
-    if (origin) {
-      const widgets = measureWidgetsViaBoundingRect(scrollRoot, origin, {
-        pageCount,
-        visiblePageIndexRange
-      });
-      const originRect = origin.getBoundingClientRect();
-      const scrollHeight = (
-        // geometry:allow-dom-fallback
-        origin.clientHeight > 0 ? origin.clientHeight : originRect.height > 0 ? originRect.height : scrollRoot.clientHeight
-      );
-      const domRects = resolvePageOverlayRects({
-        widgets,
-        pageCount,
-        scrollHeight,
-        visiblePageIndexRange
-      });
-      setRects(
-        reconcileDomRects(domRects)
-      );
-    } else {
-      const widgets = measureWidgetsViaOffsetChain(scrollRoot, {
-        pageCount,
-        visiblePageIndexRange
-      });
-      const domRects = resolvePageOverlayRects({
-        widgets,
-        pageCount,
-        // geometry:allow-dom-fallback
-        scrollHeight: scrollRoot.clientHeight,
-        visiblePageIndexRange
-      });
-      setRects(
-        reconcileDomRects(domRects)
-      );
-    }
-  }, [facet, geometryFacet, resolveUiPageRects, scrollRoot, visiblePageIndexRange]);
+    const skeletalRects = resolveSkeletalPageOverlayRectsFromLayout(facet).filter(
+      (rect) => !visiblePageIndexRange || rect.pageIndex >= visiblePageIndexRange.start && rect.pageIndex < visiblePageIndexRange.end
+    );
+    setRects(skeletalRects);
+  }, [facet, geometryFacet, resolveUiPageRects, visiblePageIndexRange]);
   const refreshRects = React34.useCallback(() => {
     if (!scrollRoot) {
       refreshRectsNow();
@@ -17292,33 +17027,6 @@ var TwPageStackChromeLayerInner = ({
     },
     [onOpenStory]
   );
-  React34.useEffect(() => {
-    if (geometryFacet) return;
-    if (!scrollRoot) return;
-    const runtime = scrollRoot.ownerDocument?.defaultView;
-    if (!runtime?.ResizeObserver) return;
-    const observer = new runtime.ResizeObserver(() => refreshRects());
-    observer.observe(scrollRoot);
-    return () => observer.disconnect();
-  }, [geometryFacet, scrollRoot, refreshRects]);
-  React34.useEffect(() => {
-    if (geometryFacet) return;
-    if (!scrollRoot) return;
-    const runtime = scrollRoot.ownerDocument?.defaultView;
-    if (!runtime?.MutationObserver) return;
-    const observer = new runtime.MutationObserver((records) => {
-      const overlay = overlayRootRef.current;
-      if (overlay) {
-        const allSelf = records.every(
-          (r) => r.target instanceof Node && overlay.contains(r.target)
-        );
-        if (allSelf) return;
-      }
-      refreshRects();
-    });
-    observer.observe(scrollRoot, { childList: true, subtree: false });
-    return () => observer.disconnect();
-  }, [geometryFacet, scrollRoot, refreshRects]);
   React34.useLayoutEffect(() => {
     if (!pmSurfaceElement) return;
     const overlay = overlayRootRef.current;
@@ -18798,6 +18506,7 @@ export {
   TwCommandPaletteMount,
   UiApiProvider,
   shouldRenderAbsoluteFloatingImageInPageOverlay,
+  sanitizeNumberingPictureBulletSrc,
   TwChromeOverlay,
   TwScopeRailLayer,
   buildPictureFilterCss,