@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/src/Virtualizer.tsx

@@ -1,34 +1,73 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Virtualizer.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/virtualizer/ScrollView.tsx
+
 /**
  * Virtualizer primitive for solidaria-components.
  *
- * Phase 1 parity: provides RAC-like API and context contract with
- * a safe non-virtualized fallback render path.
+ * Provides the React Aria Components API and the React Aria scroll-view
+ * behavior. Based on:
+ * - packages/react-aria-components/src/Virtualizer.tsx
+ * - packages/react-aria/src/virtualizer/ScrollView.tsx
  */
 
 import {
-  type JSX,
   createContext,
+  createEffect,
   createMemo,
   createSignal,
   onCleanup,
-  onMount,
-  splitProps,
   useContext,
+  createTrackedEffect,
 } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type {
   DragTypes,
   DropOperation,
   DropTarget,
   ItemDropTarget,
 } from "@proyecto-viviana/solid-stately";
-import { CollectionRendererContext, type CollectionRendererContextValue } from "./Collection";
-import { filterDOMProps } from "./utils";
+import { createScrollView, useLocale } from "@proyecto-viviana/solidaria";
+import { isElementVisible } from "@proyecto-viviana/solidaria/utils";
+import {
+  CollectionRendererContext,
+  DefaultCollectionRenderer,
+  type CollectionRendererContextValue,
+  type CollectionRootProps,
+  type CollectionBranchProps,
+} from "./Collection";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   GridLayout,
   ListLayout,
   TableLayout,
   WaterfallLayout,
   calculateLinearVisibleRange,
+  resolveListRowSize,
   type DefaultVirtualizerLayoutOptions,
   type GridLayoutOptions,
   type LayoutInfo,
@@ -50,6 +89,8 @@ export interface LayoutOptionsDelegate<O> {
 export interface VirtualizerLayout<O = unknown> extends LayoutOptionsDelegate<O> {
   getVisibleRange?(context: VirtualizerRangeContext, options?: O): VirtualizerVisibleRange;
   getLayoutInfo?(index: number, context: VirtualizerLayoutInfoContext, options?: O): LayoutInfo;
+  getContentSize?(itemCount: number, context: VirtualizerLayoutInfoContext, options?: O): Size;
+  updateItemSize?(index: number, mainSize: number): boolean;
   getDropTargetFromPoint?(
     point: Point,
     itemCount: number,
@@ -80,6 +121,8 @@ export interface VirtualizerContextValue<O = unknown> {
   orientation: Orientation;
   getVisibleRange: (itemCount: number) => VirtualizerVisibleRange;
   getLayoutInfo: (index: number) => LayoutInfo;
+  getContentSize: (itemCount: number) => Size;
+  updateItemSize: (index: number, mainSize: number) => boolean;
   getDropTargetFromPoint: (point: Point, itemCount: number) => VirtualizerDropTarget | null;
   setDropTargetResolver: (resolver: VirtualizerDropTargetResolver | undefined) => void;
   setDropTargetItemCountResolver: (resolver: (() => number) | undefined) => void;
@@ -104,6 +147,27 @@ export type VirtualizerDropOperationResolver = (
 
 export const VirtualizerContext = createContext<VirtualizerContextValue<unknown> | null>(null);
 
+interface VirtualizerOptionsContextValue {
+  layout: VirtualizerLayout<unknown>;
+  layoutOptions?: unknown;
+  shouldObserveItemSize?: boolean;
+  allowsWindowScrolling: boolean;
+}
+
+const VirtualizerOptionsContext = createContext<VirtualizerOptionsContextValue | null>(null);
+
+interface VirtualizerScrollRuntime {
+  setScrollOffset: (value: number) => void;
+  setScrollOffsetX: (value: number) => void;
+  setViewportOffset: (value: number) => void;
+  setWindowViewportSize: (value: number) => void;
+  setMeasuredViewportSize: (value: number) => void;
+  setMeasuredViewportWidth: (value: number) => void;
+  allowsWindowScrolling: () => boolean;
+}
+
+const VirtualizerScrollRuntimeContext = createContext<VirtualizerScrollRuntime | null>(null);
+
 export function useVirtualizerContext<O>(): VirtualizerContextValue<O> | null {
   return useContext(VirtualizerContext) as VirtualizerContextValue<O> | null;
 }
@@ -118,6 +182,12 @@ export interface VirtualizerProps<O> extends Omit<
   layout: VirtualizerLayoutClass<O> | VirtualizerLayout<O>;
   /** Layout options consumed by the layout implementation. */
   layoutOptions?: O;
+  /**
+   * Whether to observe each item's size with a ResizeObserver and re-measure
+   * when it changes. RAC `VirtualizerProps.shouldObserveItemSize`. Estimated
+   * rows still measure once even when this is false.
+   */
+  shouldObserveItemSize?: boolean;
   /** Optional renderer for collection drop indicators in virtualized flows. */
   renderDropIndicator?: (
     index: number,
@@ -132,8 +202,6 @@ export interface VirtualizerProps<O> extends Omit<
    * so a virtualizer with unbounded height still virtualizes as the page scrolls.
    */
   allowsWindowScrolling?: boolean;
-  class?: string;
-  style?: string | JSX.CSSProperties;
 }
 
 function getObjectValue<T extends object, K extends keyof T>(
@@ -159,7 +227,8 @@ function isSameLayoutInfo(a: LayoutInfo, b: LayoutInfo): boolean {
     a.rect.x === b.rect.x &&
     a.rect.y === b.rect.y &&
     a.rect.width === b.rect.width &&
-    a.rect.height === b.rect.height
+    a.rect.height === b.rect.height &&
+    a.estimatedSize === b.estimatedSize
   );
 }
 
@@ -172,50 +241,44 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     "children",
     "layout",
     "layoutOptions",
+    "shouldObserveItemSize",
     "renderDropIndicator",
     "getDropOperation",
     "allowsWindowScrolling",
-    "class",
-    "style",
   ]);
   // The scroll view's own scroll position (its scrollTop).
-  const [scrollOffset, setScrollOffset] = createSignal(0);
+  const [scrollOffset, setScrollOffset] = createSignal(0, { ownedWrite: true });
   // The scroll view's horizontal scroll position (its scrollLeft), used as the
   // primary scroll axis when the layout's orientation is horizontal.
-  const [scrollOffsetX, setScrollOffsetX] = createSignal(0);
+  const [scrollOffsetX, setScrollOffsetX] = createSignal(0, { ownedWrite: true });
   // How far the scroll view's top edge is above the window viewport, due to the
   // page (or an ancestor) being scrolled. Mirrors upstream ScrollView.viewportOffset.
-  const [viewportOffset, setViewportOffset] = createSignal(0);
+  const [viewportOffset, setViewportOffset] = createSignal(0, { ownedWrite: true });
   // The window viewport height, used as the visible height cap when window scrolling.
-  const [windowViewportSize, setWindowViewportSize] = createSignal(0);
+  const [windowViewportSize, setWindowViewportSize] = createSignal(0, { ownedWrite: true });
   // The scroll view's own measured size (clientHeight/clientWidth).
-  const [measuredViewportSize, setMeasuredViewportSize] = createSignal(0);
-  const [measuredViewportWidth, setMeasuredViewportWidth] = createSignal(0);
+  const [measuredViewportSize, setMeasuredViewportSize] = createSignal(0, { ownedWrite: true });
+  const [measuredViewportWidth, setMeasuredViewportWidth] = createSignal(0, { ownedWrite: true });
   const allowsWindowScrolling = createMemo(() => local.allowsWindowScrolling ?? true);
-  // Whether the scroll view is actively scrolling. Mirrors upstream ScrollView's
-  // `isScrolling`: while scrolling, the content gets `pointer-events: none` so pointer
-  // events don't hit rows recycling under a stationary cursor (avoiding hover-state
-  // flicker and needless hit-testing). It flips back 300ms after the last scroll.
-  const [isScrolling, setIsScrolling] = createSignal(false);
   const [dropTargetResolver, setDropTargetResolver] = createSignal<
     VirtualizerDropTargetResolver | undefined
-  >(undefined);
+  >(undefined, { ownedWrite: true });
   const [dropTargetItemCountResolver, setDropTargetItemCountResolver] = createSignal<
     (() => number) | undefined
-  >(undefined);
+  >(undefined, { ownedWrite: true });
   const [dropTargetIndexResolver, setDropTargetIndexResolver] = createSignal<
     ((key: string | number) => number | null) | undefined
-  >(undefined);
+  >(undefined, { ownedWrite: true });
   const [dropOperationResolver, setDropOperationResolver] = createSignal<
     VirtualizerDropOperationResolver | undefined
-  >(undefined);
+  >(undefined, { ownedWrite: true });
   const [keyboardNavigationOverride, setKeyboardNavigationOverride] = createSignal<
     VirtualizerKeyboardNavigationOverride | undefined
-  >(undefined);
-  let containerRef: HTMLDivElement | undefined;
+  >(undefined, { ownedWrite: true });
   const fallbackLayout = new ListLayout();
   const visibleRangeCache = new Map<number, VirtualizerVisibleRange>();
   const layoutInfoCache = new Map<number, LayoutInfo>();
+  const [layoutEpoch, setLayoutEpoch] = createSignal(0);
 
   const layout = createMemo<VirtualizerLayout<O>>(() => {
     if (typeof local.layout === "function") {
@@ -248,7 +311,7 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     }
     return { viewportWidth: measuredViewportWidth() } as O;
   });
-  const itemSize = createMemo(() => getObjectValue(virtualOptions(), "itemSize") ?? 40);
+  const itemSize = createMemo(() => resolveListRowSize(virtualOptions()));
   const overscan = createMemo(() => getObjectValue(virtualOptions(), "overscan") ?? 2);
   const orientation = createMemo<Orientation>(
     () => getObjectValue(virtualOptions(), "orientation") ?? "vertical",
@@ -309,6 +372,7 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     return nextRange;
   };
   const getLayoutInfo = (index: number): LayoutInfo => {
+    layoutEpoch();
     const ctx: VirtualizerLayoutInfoContext = {
       viewportWidth: measuredViewportWidth(),
       viewportHeight: measuredViewportSize(),
@@ -344,6 +408,35 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     layoutInfoCache.set(index, nextInfo);
     return nextInfo;
   };
+  const getContentSize = (itemCount: number): Size => {
+    layoutEpoch();
+    const ctx: VirtualizerLayoutInfoContext = {
+      viewportWidth: measuredViewportWidth(),
+      viewportHeight: measuredViewportSize(),
+    };
+    const fromLayout = resolvedLayout().getContentSize?.(
+      itemCount,
+      ctx,
+      layoutOptionsWithViewport(),
+    );
+    if (fromLayout) return fromLayout;
+    const range = getVisibleRange(itemCount);
+    const visible = Math.max(0, range.end - range.start);
+    const main = range.offsetTop + visible * itemSize() + range.offsetBottom;
+    if (orientation() === "horizontal") {
+      return { width: main, height: Math.max(0, measuredViewportSize()) };
+    }
+    return { width: Math.max(0, measuredViewportWidth()), height: main };
+  };
+  const updateItemSize = (index: number, mainSize: number): boolean => {
+    const changed = resolvedLayout().updateItemSize?.(index, mainSize) ?? false;
+    if (changed) {
+      layoutInfoCache.clear();
+      visibleRangeCache.clear();
+      setLayoutEpoch((epoch) => epoch + 1);
+    }
+    return changed;
+  };
   const getDropTargetFromPoint = (
     point: Point,
     itemCount: number,
@@ -711,6 +804,8 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     orientation: orientation(),
     getVisibleRange,
     getLayoutInfo,
+    getContentSize,
+    updateItemSize,
     getDropTargetFromPoint,
     setDropTargetResolver: assignDropTargetResolver,
     setDropTargetItemCountResolver: assignDropTargetItemCountResolver,
@@ -730,135 +825,302 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
       getKeyboardPageNavigationTarget,
     },
     renderDropIndicator: local.renderDropIndicator,
+    CollectionRoot,
+    CollectionBranch,
   }));
 
-  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+  const scrollRuntime: VirtualizerScrollRuntime = {
+    setScrollOffset,
+    setScrollOffsetX,
+    setViewportOffset,
+    setWindowViewportSize,
+    setMeasuredViewportSize,
+    setMeasuredViewportWidth,
+    allowsWindowScrolling,
+  };
+
+  // RAC `Virtualizer.tsx:71-96`: context-only — no DOM. The collection element
+  // is the scroller; CollectionRoot owns useScrollView against that ref.
+  return (
+    <CollectionRendererContext value={collectionRenderer()}>
+      <VirtualizerContext value={contextValue()}>
+        <VirtualizerOptionsContext
+          value={{
+            layout: resolvedLayout() as VirtualizerLayout<unknown>,
+            layoutOptions: resolvedLayoutOptions(),
+            shouldObserveItemSize: local.shouldObserveItemSize,
+            allowsWindowScrolling: allowsWindowScrolling(),
+          }}
+        >
+          <VirtualizerScrollRuntimeContext value={scrollRuntime}>
+            {local.children}
+          </VirtualizerScrollRuntimeContext>
+        </VirtualizerOptionsContext>
+      </VirtualizerContext>
+    </CollectionRendererContext>
+  );
+}
+
+function resolveScrollRef(
+  scrollRef: CollectionRootProps<unknown>["scrollRef"],
+): HTMLElement | null {
+  if (!scrollRef) return null;
+  return scrollRef() ?? null;
+}
+
+/**
+ * RAC `Virtualizer.tsx:99-151` CollectionRoot: owns virtualizer scroll against
+ * `scrollRef` (the collection element) and renders the single content div.
+ */
+function CollectionRoot<T>(props: CollectionRootProps<T>): JSX.Element {
+  const virtualizer = useVirtualizerContext();
+  const runtime = useContext(VirtualizerScrollRuntimeContext);
+
+  const scrollView = createScrollView({
+    getScrollElement: () => resolveScrollRef(props.scrollRef),
+    allowsWindowScrolling: () => runtime?.allowsWindowScrolling() ?? true,
+    onScrollPositionChange: (position) => {
+      runtime?.setScrollOffset(position.y);
+      runtime?.setScrollOffsetX(position.x);
+    },
+    onViewportOffsetChange: (offset) => runtime?.setViewportOffset(offset),
+    onSizeChange: (size) => {
+      runtime?.setMeasuredViewportSize(size.height);
+      runtime?.setMeasuredViewportWidth(size.width);
+    },
+    onWindowViewportChange: (height) => runtime?.setWindowViewportSize(height),
+  });
 
-  const updateViewportSize = () => {
-    if (!containerRef) return;
-    const nextHeight = containerRef.clientHeight;
-    const nextWidth = containerRef.clientWidth;
-    if (nextHeight !== measuredViewportSize()) setMeasuredViewportSize(nextHeight);
-    if (nextWidth !== measuredViewportWidth()) setMeasuredViewportWidth(nextWidth);
+  const itemCount = () => {
+    try {
+      return Array.from(props.collection ?? []).length;
+    } catch {
+      return 0;
+    }
   };
 
-  const updateWindowViewport = () => {
-    if (typeof window === "undefined") return;
-    const next = window.innerHeight;
-    if (next !== windowViewportSize()) setWindowViewportSize(next);
+  const range = createMemo(() => {
+    if (!virtualizer) return null;
+    const count = itemCount();
+    if (count <= 0) return null;
+    // Geometry window only. Persisted focused keys render as absolutely
+    // positioned extras (PersistedVirtualItem) so scrollHeight stays the
+    // content extent. RAC VirtualizerItem does the same with layoutInfo.
+    return virtualizer.getVisibleRange(count);
+  });
+
+  // Keep collection getter allocations in a stable owner, independent of the
+  // wrapper's hydration-key order.
+  const contentProps = createMemo<JSX.HTMLAttributes<HTMLDivElement>>(() => {
+    const base = scrollView.contentProps();
+    const nextRange = range();
+    const count = itemCount();
+    const size = virtualizer && count > 0 ? virtualizer.getContentSize(count) : null;
+    const horizontal = virtualizer?.orientation === "horizontal";
+    const padStart = nextRange?.offsetTop ?? 0;
+    const padEnd = nextRange?.offsetBottom ?? 0;
+    // RAC `useScrollView` sizes the content div from `contentSize`. Windowing
+    // spacers stay so in-flow collections (GridList) still skip scrolled-off
+    // rows; `box-sizing: border-box` keeps that padding inside contentSize so
+    // absolute VirtualizerItem coordinates and the scroll extent agree.
+    return {
+      ...base,
+      style: {
+        ...(base.style as JSX.CSSProperties | undefined),
+        position: "relative",
+        "box-sizing": "border-box",
+        ...(size && size.width > 0 ? { width: `${size.width}px` } : null),
+        ...(size && size.height > 0 ? { height: `${size.height}px` } : null),
+        ...(horizontal
+          ? { "padding-left": `${padStart}px`, "padding-right": `${padEnd}px` }
+          : { "padding-top": `${padStart}px`, "padding-bottom": `${padEnd}px` }),
+      },
+    };
+  });
+
+  return (
+    <div {...contentProps()}>
+      {props.children ??
+        DefaultCollectionRenderer.CollectionRoot({
+          collection: props.collection,
+          renderDropIndicator: props.renderDropIndicator,
+        })}
+    </div>
+  );
+}
+
+function CollectionBranch<T>(props: CollectionBranchProps<T>): JSX.Element {
+  return DefaultCollectionRenderer.CollectionBranch(props);
+}
+
+/**
+ * RAC `layoutInfoToStyle` (`react-aria/src/virtualizer/VirtualizerItem.tsx`).
+ * ListLayout sets `allowOverflow`, so overflow stays visible.
+ */
+export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: "ltr" | "rtl"): JSX.CSSProperties {
+  const xProperty = dir === "rtl" ? "right" : "left";
+  return {
+    position: "absolute",
+    overflow: "visible",
+    contain: "size layout style",
+    "z-index": 0,
+    top: `${layoutInfo.rect.y}px`,
+    [xProperty]: `${layoutInfo.rect.x}px`,
+    width: `${layoutInfo.rect.width}px`,
+    height: `${layoutInfo.rect.height}px`,
   };
+}
 
-  // Recompute how far the scroll view's top edge sits above the window viewport.
-  // A negative bounding-rect top means the scroll view has been pushed up by page
-  // (or ancestor) scrolling; the offset is the amount scrolled past its top.
-  const updateViewportOffset = () => {
-    if (!containerRef || !allowsWindowScrolling()) return;
-    const rect = containerRef.getBoundingClientRect();
-    const next = rect.y < 0 ? -rect.y : 0;
-    if (next !== viewportOffset()) setViewportOffset(next);
+/**
+ * RAC VirtualizerItem (`react-aria/src/virtualizer/VirtualizerItem.tsx` +
+ * `layoutInfoToStyle`) wraps every visible view in `role="presentation"` with
+ * `contain: size layout style` and a definite width/height from layoutInfo.
+ * Pass `index` so the item is absolutely positioned; without it the wrapper
+ * stays in-flow (GridList still windows with CollectionRoot padding spacers).
+ * jsdom reports 0 for unstyled offsetHeight; skip containment then so
+ * collection tests keep seeing the children.
+ */
+export function VirtualizerItem(props: {
+  children: JSX.Element;
+  index?: number | Accessor<number>;
+}): JSX.Element {
+  const virtualizer = useVirtualizerContext();
+  const options = useContext(VirtualizerOptionsContext);
+  const locale = useLocale();
+  const [box, setBox] = createSignal<{ width: number; height: number } | null>(null);
+  const [el, setEl] = createSignal<HTMLDivElement | null>(null);
+  const resolvedIndex = (): number | null => {
+    const value = props.index;
+    if (value == null) return null;
+    return typeof value === "function" ? value() : value;
+  };
+  const layout = (): LayoutInfo | null => {
+    const index = resolvedIndex();
+    if (index == null || !virtualizer) return null;
+    return virtualizer.getLayoutInfo(index);
   };
 
-  let scrollFrame: number | undefined;
-  // Debounce handle that resets `isScrolling` after scrolling stops.
-  let scrollEndTimeout: ReturnType<typeof setTimeout> | undefined;
-  onCleanup(() => {
-    if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
-    if (scrollEndTimeout != null) clearTimeout(scrollEndTimeout);
-  });
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
 
-  onMount(() => {
-    updateViewportSize();
-    updateWindowViewport();
-    updateViewportOffset();
+    const node = el();
+    if (!node) return;
+    const info = layout();
+    const index = resolvedIndex();
 
-    const handleResize = () => {
-      updateViewportSize();
-      updateWindowViewport();
-      updateViewportOffset();
+    const measureIndexed = () => {
+      if (info == null || index == null || !virtualizer) return;
+      // RAC useVirtualizerItem.ts:37-42 — a hidden collection reports 0 and
+      // then never recovers when shown. Skip the write.
+      if (!isElementVisible(node)) return;
+      if (!info.estimatedSize && !options?.shouldObserveItemSize) return;
+      const prevHeight = node.style.height;
+      const prevWidth = node.style.width;
+      const prevContain = node.style.contain;
+      node.style.contain = "";
+      node.style.height = "";
+      node.style.width = "";
+      const width = node.scrollWidth;
+      const height = node.scrollHeight;
+      node.style.height = prevHeight;
+      node.style.width = prevWidth;
+      node.style.contain = prevContain;
+      if (height <= 0 || width <= 0) return;
+      const main = virtualizer.orientation === "horizontal" ? width : height;
+      virtualizer.updateItemSize(index, main);
     };
-    window.addEventListener("resize", handleResize);
 
-    const resizeObserver =
-      typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => updateViewportSize()) : null;
-    if (containerRef && resizeObserver) {
-      resizeObserver.observe(containerRef);
+    if (info != null && index != null && virtualizer) {
+      // RAC layout effect: estimated rows measure once even when observation
+      // is off. Two rAFs cover jsdom's first 0-height layout.
+      if (info.estimatedSize) {
+        measureIndexed();
+        const frame = requestAnimationFrame(() => {
+          measureIndexed();
+          requestAnimationFrame(measureIndexed);
+        });
+        _s2Cleanups.push(() => cancelAnimationFrame(frame));
+      }
+      // RAC ResizeObserver on the wrapper's direct children, not the wrapper
+      // (`useVirtualizerItem.ts:63-87`). The wrapper height is layout-fixed.
+      if (options?.shouldObserveItemSize && typeof ResizeObserver !== "undefined") {
+        const resizeObserver = new ResizeObserver(() => measureIndexed());
+        for (const child of node.children) {
+          resizeObserver.observe(child);
+        }
+        _s2Cleanups.push(() => resizeObserver.disconnect());
+      }
+      // A tracked effect's cleanup is its return value; a bare return here
+      // would strand the frame and the observer registered above.
+      return () => {
+        for (const c of _s2Cleanups) c();
+      };
     }
 
-    // A capturing listener on the document sees scroll events on the scroll view
-    // itself as well as on any ancestor (including the page), so a single handler
-    // can update the local scroll position or the window offset as appropriate.
-    const handleDocumentScroll = (e: Event) => {
-      if (!containerRef) return;
-      const target = e.target as Node | null;
-      const isContainer = target === containerRef;
-      const isAncestor =
-        target === document ||
-        target === (window as unknown as Node) ||
-        (target instanceof Node && target.contains(containerRef));
-      if (!isContainer && !isAncestor) return;
-      // An ancestor/page scroll only matters when the collection scrolls with the page.
-      if (!isContainer && !allowsWindowScrolling()) return;
-
-      // Flag active scrolling and (re)arm the reset for 300ms after the last scroll.
-      // Our handler is already rAF-throttled, so a plain clear/reset debounce matches
-      // upstream's scrollEndTime bookkeeping without the extra accounting.
-      if (!isScrolling()) setIsScrolling(true);
-      if (scrollEndTimeout != null) clearTimeout(scrollEndTimeout);
-      scrollEndTimeout = setTimeout(() => {
-        scrollEndTimeout = undefined;
-        setIsScrolling(false);
-      }, 300);
-
-      if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
-      scrollFrame = requestAnimationFrame(() => {
-        scrollFrame = undefined;
-        if (isContainer) {
-          const next = Math.max(0, containerRef!.scrollTop);
-          if (next !== scrollOffset()) setScrollOffset(next);
-          const nextX = Math.max(0, containerRef!.scrollLeft);
-          if (nextX !== scrollOffsetX()) setScrollOffsetX(nextX);
-        } else {
-          updateViewportOffset();
-        }
-        updateViewportSize();
+    const readBox = () => {
+      const child = node.firstElementChild as HTMLElement | null;
+      const height = child?.offsetHeight ?? 0;
+      const width = node.clientWidth;
+      if (height <= 0 || width <= 0) return;
+      setBox((current) => {
+        if (current?.width === width && current.height === height) return current;
+        return { width, height };
       });
     };
-    document.addEventListener("scroll", handleDocumentScroll, true);
-
-    onCleanup(() => {
-      window.removeEventListener("resize", handleResize);
-      resizeObserver?.disconnect();
-      document.removeEventListener("scroll", handleDocumentScroll, true);
+    readBox();
+    const frame = requestAnimationFrame(() => {
+      readBox();
+      requestAnimationFrame(readBox);
     });
+    _s2Cleanups.push(() => cancelAnimationFrame(frame));
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
+  const style = (): JSX.CSSProperties => {
+    const info = layout();
+    if (info) return layoutInfoToStyle(info, locale().direction);
+    return {
+      position: "relative",
+      "z-index": 0,
+      overflow: "visible",
+      contain: box() ? "size layout style" : undefined,
+      width: "100%",
+      height: box() ? `${box()!.height}px` : undefined,
+    };
+  };
+
   return (
-    <CollectionRendererContext.Provider value={collectionRenderer()}>
-      <VirtualizerContext.Provider value={contextValue()}>
-        <div
-          {...filteredDomProps()}
-          ref={(el) => {
-            containerRef = el;
-          }}
-          class={local.class}
-          style={local.style}
-          data-virtualizer
-        >
-          {/*
-            Content wrapper mirroring upstream ScrollView's inner content div. It
-            carries the `pointer-events: none` while-scrolling optimization and is
-            otherwise a layout-transparent passthrough (the outer div remains the
-            scroll container we measure and read scroll offsets from).
-          */}
-          <div
-            data-virtualizer-content
-            style={{ "pointer-events": isScrolling() ? "none" : undefined }}
-          >
-            {local.children}
-          </div>
-        </div>
-      </VirtualizerContext.Provider>
-    </CollectionRendererContext.Provider>
+    <div role="presentation" ref={setEl} style={style()}>
+      {props.children}
+    </div>
+  );
+}
+
+/**
+ * RAC VirtualizerItem lays persisted (focused / drop-target) views with
+ * layoutInfo absolute coordinates so they stay mounted off-screen without
+ * expanding the in-flow window or the content extent.
+ */
+export function PersistedVirtualItem(props: { index: number; children: JSX.Element }): JSX.Element {
+  const virtualizer = useVirtualizerContext();
+  const layout = () => virtualizer?.getLayoutInfo(props.index);
+  const horizontal = () => virtualizer?.orientation === "horizontal";
+  return (
+    <div
+      data-persisted-virtual-item=""
+      style={{
+        position: "absolute",
+        top: horizontal() ? 0 : `${layout()?.rect.y ?? 0}px`,
+        left: horizontal() ? `${layout()?.rect.x ?? 0}px` : 0,
+        width: layout()?.rect.width ? `${layout()?.rect.width}px` : undefined,
+        height: layout()?.rect.height ? `${layout()?.rect.height}px` : undefined,
+      }}
+    >
+      {props.children}
+    </div>
   );
 }