react-layout-virtual 0.0.4 → 0.0.7

package/dist/ReactLayoutVirtual.d.ts

@@ -3,16 +3,11 @@
  * @license MIT
  * @author Alexandr Kalabin
  */
-import React from 'react';
-export interface ListItemProps<T = unknown> {
-    data: T;
-    ref: React.Ref<HTMLDivElement> | undefined;
-    index: number;
-}
+import { type ListItemProps } from './ReactRenderer';
 export interface VirtualizedListReactProps<T> {
-    scrollerRef?: React.RefObject<HTMLDivElement>;
+    scrollerRef?: React.RefObject<HTMLElement>;
     overscanHeight?: number;
     data: T[];
     renderItem: (props: ListItemProps<T>) => React.ReactNode;
 }
-export default function VirtualizedListReact<T>(props: VirtualizedListReactProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function VirtualizedListReact<ItemData = unknown>(props: VirtualizedListReactProps<ItemData>): import("react/jsx-runtime").JSX.Element;

package/dist/ReactRenderer.d.ts

@@ -3,34 +3,38 @@
  * @license MIT
  * @author Alexandr Kalabin
  */
-import { ScrollableContainer } from "layout-virtual";
-import type { IRangeRenderer, ScrollDirection, IItemStore, IItem, VirtualScrollStructure } from "layout-virtual/types";
+import { BaseRenderer } from 'layout-virtual/core';
+import type { IRangeRenderer, ScrollDirection, VirtualScrollStructure } from "layout-virtual/types";
+export interface ListItemProps<T = unknown> {
+    data: T;
+    ref: React.Ref<HTMLDivElement> | undefined;
+    index: number;
+}
+export type ItemRenderer<T> = React.FC<ListItemProps<T>>;
 type ReactRendererOptions = {
     itemsSetter: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;
 } & VirtualScrollStructure;
 interface IReactRenderer {
     commit: () => void;
 }
-export default class ReactRenderer implements IRangeRenderer, IReactRenderer {
+export default class ReactRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType, ItemRenderer<DataType>>, IReactRenderer {
     private _store;
-    private _scrollableContainer;
-    private _renderedIndexRegistry;
-    private _renderedItemsRegistry;
+    private _renderItem;
     private _itemsSetter;
     private _renderedRangeRefPool;
     private _listItems;
     private _flushItems;
-    private _getRenderedBoundaryIndex;
     constructor(opts: ReactRendererOptions);
-    render(startIndex: number, endIndex: number, direction: ScrollDirection): number;
     renderRange(startIndex: number, endIndex: number, direction: ScrollDirection): void;
-    removeRange(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection): {
+        itemsToRemove: Element[];
+        removedHeight: number;
+    };
     clear(): void;
-    getIndex(item: Element): number | undefined;
-    getItem(index: number): Element | undefined;
-    get scrollableContainer(): ScrollableContainer;
-    attach(store: IItemStore<IItem>): void;
+    setData(store: DataType[]): void;
+    setRenderItem(renderItem: ItemRenderer<DataType>): void;
     flush(): Promise<void>;
     commit(): void;
+    get dataSize(): number;
 }
 export {};

package/dist/index.d.ts

@@ -4,4 +4,4 @@
  * @author Alexandr Kalabin
  */
 export { default } from './ReactLayoutVirtual';
-export { type ListItemProps } from './ReactLayoutVirtual';
+export { type ListItemProps } from './ReactRenderer';

package/dist/index.js

@@ -1,6 +1,7 @@
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as n,useState as s,useLayoutEffect as i,useEffect as o}from"react";import{flushSync as l,createPortal as h}from"react-dom";import a,{ScrollableContainer as d,ArrayItemStore as c,DynamicListLayout as u}from"layout-virtual";class f{t=null;i;o=/* @__PURE__ */new Map;l=/* @__PURE__ */new Map;h;u=/* @__PURE__ */new Map;m=[];v=()=>{this.h(this.m)};p(e){const t="first"===e?this.i.getFirstItem():"last"===e?this.i.getLastItem():null;if(t)return this.getIndex(t)}constructor(e){this.i=new d({...e}),this.h=e.itemsSetter}render(e,t,r){const n=this.p("first"),s=this.p("last");let i=e,o=t,l=n,h=s,a=0;return"down"===r?(console.log("SCROLLING DOWN"),void 0!==l&&void 0!==s&&(h=Math.min(i-1,s),i=Math.max(s+1,i),l<=h&&(a=this.removeRange(l,h,r)))):"up"===r&&(console.log("SCROLLING UP"),void 0!==h&&void 0!==n&&(l=Math.max(o+1,n),o=Math.min(n-1,o),l<=h&&(a=this.removeRange(l,h,r)))),i<o&&this.renderRange(i,o,r),a}renderRange(t,r,n){console.log("_renderRange",t,r,n),t>r&&console.error("_renderRange",t,r,n);const s=this.t,i=this.m,o=[],l=this.u;if(s){for(let n=t;n<=r;n++){const t=s.getByIndex(n);if(t){const r=t.render,s=l.get(n)||{current:null,idx:n};l.set(n,s),o.push(/* @__PURE__ */e(r,{data:t.data,ref:s,index:n},n))}}this.m="down"===n?i.concat(o):"up"===n?o.concat(i):this.m}}removeRange(e,t,r){const n=this.o,s=this.l;let i=0,o=1/0,l=0;for(let h=e;h<=t;h++){const e=s.get(h);if(e){const{offsetTop:t,offsetHeight:r}=e,a=getComputedStyle(e),d=parseFloat(a.marginTop),c=parseFloat(a.marginBottom);o=Math.min(o,t-d),l=Math.max(l,t+r+c),s.delete(h),n.delete(e),i++}}return i&&(this.m="down"===r?this.m.slice(i):"up"===r?this.m.slice(0,-i):this.m),console.log("_removeItems startIndex:",e,"endIndex:",t,"removedHeight:",l>o?l-o:0,"removedItemsCount:",i),l>o?l-o:0}clear(){this.o.clear(),this.l.clear(),this.m=[],this.h(this.m)}getIndex(e){return this.o.get(e)}getItem(e){return this.l.get(e)}get scrollableContainer(){return this.i}attach(e){this.t=e}flush(){return l(this.v),Promise.resolve()}commit(){const e=this.o,t=this.l,r=this.u;for(const n of r.values()){const{idx:r,current:s}=n;s&&(e.set(s,r),t.set(r,s))}r.clear()}}function m(l){const{overscanHeight:d=200,data:m,renderItem:v,scrollerRef:p}=l,g=n(null),I=p??g,w=n(null),R=n(null),_=n(null),x=n(null),M=n(null),C=n(null),[y,S]=s([]),H=n(void 0);i(()=>{H.current=new f({container:I.current,scrollHeightFiller:w.current,viewportContainer:R.current,scrollCanvas:_.current,topSpacer:x.current,contentLayer:M.current,bottomSpacer:C.current,itemsSetter:S});const e=new c,t=new u({overscanHeight:d,renderer:H.current}),r=new a({store:e,layout:t});for(let n=0;n<m.length;n++)r.insert({data:m[n],render:v},n)},[]),o(()=>{H.current?.commit()},[y]);const L=/* @__PURE__ */t(r,{children:[
-/* @__PURE__ */e("div",{ref:w}),
-/* @__PURE__ */e("div",{ref:R,children:/* @__PURE__ */t("div",{ref:_,children:[
-/* @__PURE__ */e("div",{ref:x}),
-/* @__PURE__ */e("div",{ref:M,children:y}),
-/* @__PURE__ */e("div",{ref:C})]})})]});return p&&p.current?h(L,p.current):/* @__PURE__ */e("div",{ref:I,children:L})}export{m as default};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as n,useState as i,useLayoutEffect as s,useEffect as o}from"react";import{flushSync as l,createPortal as c}from"react-dom";import{BaseRenderer as h,DynamicListLayout as a,LayoutVirtual as d}from"layout-virtual/core";class u extends h{t=[];i=null;o;l=/* @__PURE__ */new Map;h=[];u=()=>{this.o(this.h)};constructor(e){super(e),this.o=e.itemsSetter}renderRange(t,r,n){const i=this.t,s=this.h,o=[],l=this.l;for(let c=t;c<=r;c++){const t=i[c];if(t){const r=this.i;if(r){const n=l.get(c)||{current:null,idx:c};l.set(c,n),o.push(/* @__PURE__ */e(r,{data:t,ref:n,index:c},c))}}}this.h="down"===n?s.concat(o):"up"===n?o.concat(s):this.h}removeRange(e,t,r){const n=super.removeRange(e,t),i=n.itemsToRemove.length;return i&&(this.h="down"===r?this.h.slice(i):"up"===r?this.h.slice(0,-i):this.h),n}clear(){super.clear(),this.h=[],this.o(this.h)}setData(e){this.t=e}setRenderItem(e){this.i=e}flush(){return l(this.u),Promise.resolve()}commit(){const e=this.l;for(const t of e.values()){const{idx:e,current:r}=t;r&&this.registerElement(e,r)}e.clear()}get dataSize(){return this.t.length}}function f(l){const{overscanHeight:h=200,data:f,renderItem:m,scrollerRef:p}=l,v=n(null),g=n(null),w=n(null),x=n(null),R=n(null),_=n(null),I=n(null),[S,y]=i([]),H=n(void 0);s(()=>{H.current=new u({container:p?.current||v.current,scrollHeightFiller:g.current,viewportContainer:w.current,scrollCanvas:x.current,topSpacer:R.current,contentLayer:_.current,bottomSpacer:I.current,itemsSetter:y});const e=new a({overscanHeight:h,renderer:H.current}),t=new d({layout:e});t.setData(f),t.setRenderItem(m)},[]),o(()=>{H.current?.commit()},[S]);const C=/* @__PURE__ */t(r,{children:[
+/* @__PURE__ */e("div",{ref:g}),
+/* @__PURE__ */e("div",{ref:w,children:/* @__PURE__ */t("div",{ref:x,children:[
+/* @__PURE__ */e("div",{ref:R}),
+/* @__PURE__ */e("div",{ref:_,children:S}),
+/* @__PURE__ */e("div",{ref:I})]})})]});return p&&p.current?c(C,p.current):/* @__PURE__ */e("div",{ref:v,children:C})}export{f as default};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/ReactRenderer.tsx","../src/ReactLayoutVirtual.tsx"],"sourcesContent":["/**\n * @fileoverview ReactRenderer.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { flushSync } from 'react-dom';\nimport { BaseRenderer } from 'layout-virtual/core';\nimport type { IRangeRenderer, ScrollDirection, VirtualScrollStructure } from \"layout-virtual/types\";\n\nexport interface ListItemProps<T = unknown> {\n  data: T;\n  ref: React.Ref<HTMLDivElement> | undefined;\n  index: number;\n}\n\nexport type ItemRenderer<T> = React.FC<ListItemProps<T>>;\n\ntype ReactRendererOptions = {\n  itemsSetter: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;\n} & VirtualScrollStructure;\n\ninterface IReactRenderer {\n  commit: () => void;\n}\n\ntype IndexedRef = React.RefObject<HTMLDivElement | null> & { idx: number };\n\nexport default class ReactRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType, ItemRenderer<DataType>>, IReactRenderer {\n  private _store: DataType[] = [];\n  private _renderItem: ItemRenderer<DataType> | null = null;\n  private _itemsSetter: React.Dispatch<React.SetStateAction<React.ReactNode[]>>;\n  private _renderedRangeRefPool = new Map<number, IndexedRef>();\n  private _listItems: React.ReactNode[] = [];\n  private _flushItems = () => { this._itemsSetter(this._listItems); };\n\n  constructor(opts: ReactRendererOptions) {\n    super(opts);\n    this._itemsSetter = opts.itemsSetter;\n  }\n\n  renderRange(startIndex: number, endIndex: number, direction: ScrollDirection) {\n    const store = this._store;\n    const listItems = this._listItems;\n    const itemsToAdd: React.ReactNode[] = [];\n    const refPool = this._renderedRangeRefPool;\n\n    for (let index = startIndex; index <= endIndex; index++) {\n      const data = store[index];\n\n      if (data) {\n        const ListItem = this._renderItem;\n\n        if (ListItem) {\n          const ref: IndexedRef = refPool.get(index) || { current: null, idx: index };\n\n          refPool.set(index, ref);\n          itemsToAdd.push(<ListItem data={data} key={index} ref={ref} index={index} />);\n        }\n      }\n    }\n\n    this._listItems = direction === 'down' \n      ? listItems.concat(itemsToAdd)\n      : direction === 'up'\n        ? itemsToAdd.concat(listItems)\n        : this._listItems;\n  }\n\n  removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection) {\n    const removal = super.removeRange(startIndex, endIndex);\n    const removedItemsCount = removal.itemsToRemove.length;\n\n    if (removedItemsCount) {\n      this._listItems = direction === 'down'\n        ? this._listItems.slice(removedItemsCount)\n        : direction === 'up'\n          ? this._listItems.slice(0, -removedItemsCount)\n          : this._listItems;\n    }\n\n    return removal;\n  }\n\n  clear() {\n    super.clear();\n    this._listItems = [];\n    this._itemsSetter(this._listItems);\n  }\n\n  setData(store: DataType[]) {\n    this._store = store;\n  }\n\n  setRenderItem(renderItem: ItemRenderer<DataType>) {\n    this._renderItem = renderItem;\n  }\n\n  flush() {\n    flushSync(this._flushItems);\n    return Promise.resolve();\n  }\n\n  commit() {\n    const renderedRefs = this._renderedRangeRefPool;\n\n    for (const ref of renderedRefs.values()) {\n      const { idx, current: element } = ref;\n\n      if (element) {\n        this.registerElement(idx, element);\n      }\n    }\n\n    renderedRefs.clear();\n  }\n\n  get dataSize() {\n    return this._store.length;\n  }\n}\n","/**\n * @fileoverview VirtualizedList React component.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { useRef, useLayoutEffect, useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport ReactRenderer, { type ListItemProps, type ItemRenderer } from './ReactRenderer';\n\nexport interface VirtualizedListReactProps<T> {\n  scrollerRef?: React.RefObject<HTMLElement>;\n  overscanHeight?: number; \n  data: T[];\n  renderItem: (props: ListItemProps<T>) => React.ReactNode;\n}\n\nexport default function VirtualizedListReact<ItemData = unknown>(props: VirtualizedListReactProps<ItemData>) {\n  const { overscanHeight = 200, data, renderItem, scrollerRef } = props;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const scrollHeightFillerRef = useRef<HTMLDivElement>(null);\n  const viewportContainerRef = useRef<HTMLDivElement>(null);\n  const scrollCanvasRef = useRef<HTMLDivElement>(null);\n  const topSpacerRef = useRef<HTMLDivElement>(null);\n  const contentLayerRef = useRef<HTMLDivElement>(null);\n  const bottomSpacerRef = useRef<HTMLDivElement>(null);\n  const [visibleItems, setVisibleItems] = useState<React.ReactNode[]>([]);\n  const renderer = useRef<ReactRenderer<ItemData> | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    renderer.current = new ReactRenderer<ItemData>({\n      container: scrollerRef?.current || containerRef.current!,\n      scrollHeightFiller: scrollHeightFillerRef.current!,\n      viewportContainer: viewportContainerRef.current!,\n      scrollCanvas: scrollCanvasRef.current!,\n      topSpacer: topSpacerRef.current!,\n      contentLayer: contentLayerRef.current!,\n      bottomSpacer: bottomSpacerRef.current!,\n      itemsSetter: setVisibleItems,\n    });\n\n    const layout = new DynamicListLayout<ItemData, ItemRenderer<ItemData>>({ overscanHeight, renderer: renderer.current });\n    const list = new LayoutVirtual<ItemData, ItemRenderer<ItemData>>({ layout });\n\n    list.setData(data);\n    list.setRenderItem(renderItem);\n  }, []);\n\n  useEffect(() => {\n    renderer.current?.commit();\n  }, [visibleItems]);\n\n  const scrollerContent = <>\n    <div ref={scrollHeightFillerRef}></div>\n    <div ref={viewportContainerRef}>\n      <div ref={scrollCanvasRef}>\n        <div ref={topSpacerRef}></div>\n        <div ref={contentLayerRef}>{ visibleItems }</div>\n        <div ref={bottomSpacerRef}></div>\n      </div>\n    </div>\n  </>;\n\n  return (\n    scrollerRef && scrollerRef.current \n      ? createPortal(scrollerContent, scrollerRef.current)\n      : <div ref={containerRef}>{ scrollerContent }</div>\n  );\n};\n"],"names":["ReactRenderer","BaseRenderer","_store","_renderItem","_itemsSetter","_renderedRangeRefPool","Map","_listItems","_flushItems","this","constructor","opts","super","itemsSetter","renderRange","startIndex","endIndex","direction","store","listItems","itemsToAdd","refPool","index","data","ListItem","ref","get","current","idx","set","push","concat","removeRange","removal","removedItemsCount","itemsToRemove","length","slice","clear","setData","setRenderItem","renderItem","flush","flushSync","Promise","resolve","commit","renderedRefs","values","element","registerElement","dataSize","VirtualizedListReact","props","overscanHeight","scrollerRef","containerRef","useRef","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","setVisibleItems","useState","renderer","useLayoutEffect","container","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","layout","DynamicListLayout","list","LayoutVirtual","useEffect","scrollerContent","jsxs","Fragment","children","jsx","createPortal"],"mappings":"sSA4BA,MAAqBA,UAA0CC,EACrDC,EAAqB,GACrBC,EAA6C,KAC7CC,EACAC,qBAA4BC,IAC5BC,EAAgC,GAChCC,EAAc,KAAQC,KAAKL,EAAaK,KAAKF,IAErD,WAAAG,CAAYC,GACVC,MAAMD,GACNF,KAAKL,EAAeO,EAAKE,WAC3B,CAEA,WAAAC,CAAYC,EAAoBC,EAAkBC,GAChD,MAAMC,EAAQT,KAAKP,EACbiB,EAAYV,KAAKF,EACjBa,EAAgC,GAChCC,EAAUZ,KAAKJ,EAErB,IAAA,IAASiB,EAAQP,EAAYO,GAASN,EAAUM,IAAS,CACvD,MAAMC,EAAOL,EAAMI,GAEnB,GAAIC,EAAM,CACR,MAAMC,EAAWf,KAAKN,EAEtB,GAAIqB,EAAU,CACZ,MAAMC,EAAkBJ,EAAQK,IAAIJ,IAAU,CAAEK,QAAS,KAAMC,IAAKN,GAEpED,EAAQQ,IAAIP,EAAOG,GACnBL,EAAWU,sBAAMN,EAAA,CAASD,OAAwBE,MAAUH,SAAjBA,GAC7C,CACF,CACF,CAEAb,KAAKF,EAA2B,SAAdU,EACdE,EAAUY,OAAOX,GACH,OAAdH,EACEG,EAAWW,OAAOZ,GAClBV,KAAKF,CACb,CAEA,WAAAyB,CAAYjB,EAAoBC,EAAkBC,GAChD,MAAMgB,EAAUrB,MAAMoB,YAAYjB,EAAYC,GACxCkB,EAAoBD,EAAQE,cAAcC,OAUhD,OARIF,IACFzB,KAAKF,EAA2B,SAAdU,EACdR,KAAKF,EAAW8B,MAAMH,GACR,OAAdjB,EACER,KAAKF,EAAW8B,MAAM,GAAIH,GAC1BzB,KAAKF,GAGN0B,CACT,CAEA,KAAAK,GACE1B,MAAM0B,QACN7B,KAAKF,EAAa,GAClBE,KAAKL,EAAaK,KAAKF,EACzB,CAEA,OAAAgC,CAAQrB,GACNT,KAAKP,EAASgB,CAChB,CAEA,aAAAsB,CAAcC,GACZhC,KAAKN,EAAcsC,CACrB,CAEA,KAAAC,GAEE,OADAC,EAAUlC,KAAKD,GACRoC,QAAQC,SACjB,CAEA,MAAAC,GACE,MAAMC,EAAetC,KAAKJ,EAE1B,IAAA,MAAWoB,KAAOsB,EAAaC,SAAU,CACvC,MAAMpB,IAAEA,EAAKD,QAASsB,GAAYxB,EAE9BwB,GACFxC,KAAKyC,gBAAgBtB,EAAKqB,EAE9B,CAEAF,EAAaT,OACf,CAEA,YAAIa,GACF,OAAO1C,KAAKP,EAAOkC,MACrB,ECrGF,SAAwBgB,EAAyCC,GAC/D,MAAMC,eAAEA,EAAiB,IAAA/B,KAAKA,EAAAkB,WAAMA,EAAAc,YAAYA,GAAgBF,EAC1DG,EAAeC,EAAuB,MACtCC,EAAwBD,EAAuB,MAC/CE,EAAuBF,EAAuB,MAC9CG,EAAkBH,EAAuB,MACzCI,EAAeJ,EAAuB,MACtCK,EAAkBL,EAAuB,MACzCM,EAAkBN,EAAuB,OACxCO,EAAcC,GAAmBC,EAA4B,IAC9DC,EAAWV,OAA4C,GAE7DW,EAAgB,KACdD,EAASxC,QAAU,IAAI3B,EAAwB,CAC7CqE,UAAWd,GAAa5B,SAAW6B,EAAa7B,QAChD2C,mBAAoBZ,EAAsB/B,QAC1C4C,kBAAmBZ,EAAqBhC,QACxC6C,aAAcZ,EAAgBjC,QAC9B8C,UAAWZ,EAAalC,QACxB+C,aAAcZ,EAAgBnC,QAC9BgD,aAAcZ,EAAgBpC,QAC9Bd,YAAaoD,IAGf,MAAMW,EAAS,IAAIC,EAAoD,CAAEvB,iBAAgBa,SAAUA,EAASxC,UACtGmD,EAAO,IAAIC,EAAgD,CAAEH,WAEnEE,EAAKvC,QAAQhB,GACbuD,EAAKtC,cAAcC,IAClB,IAEHuC,EAAU,KACRb,EAASxC,SAASmB,UACjB,CAACkB,IAEJ,MAAMiB,iBAAkBC,EAAAC,EAAA,CACtBC,SAAA;eAAAC,EAAC,MAAA,CAAI5D,IAAKiC;iBACT,MAAA,CAAIjC,IAAKkC,EACRyB,wBAAAF,EAAC,MAAA,CAAIzD,IAAKmC,EACRwB,SAAA;eAAAC,EAAC,MAAA,CAAI5D,IAAKoC;iBACT,MAAA,CAAIpC,IAAKqC,EAAmBsB,SAAApB;eAC7BqB,EAAC,MAAA,CAAI5D,IAAKsC,YAKhB,OACER,GAAeA,EAAY5B,QACvB2D,EAAaL,EAAiB1B,EAAY5B,wBAC1C0D,EAAC,MAAA,CAAI5D,IAAK+B,EAAgB4B,SAAAH,GAElC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-virtual",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "React virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",
@@ -43,7 +43,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "layout-virtual": "^0.0.3"
+    "layout-virtual": "^0.1.2"
   },
   "peerDependencies": {
     "react": "^19.2.5",