virtua 0.2.3 → 0.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 ![npm](https://img.shields.io/npm/v/virtua) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/virtua) ![npm](https://img.shields.io/npm/dw/virtua) [![check](https://github.com/inokawa/virtua/actions/workflows/check.yml/badge.svg)](https://github.com/inokawa/virtua/actions/workflows/check.yml) [![demo](https://github.com/inokawa/virtua/actions/workflows/demo.yml/badge.svg)](https://github.com/inokawa/virtua/actions/workflows/demo.yml)
 
-A zero-config, fast and small (3kB) virtual list and grid component for [React](https://github.com/facebook/react).
+A zero-config, fast and small (~3kB) virtual list and grid component for [React](https://github.com/facebook/react).
 
 If you want to check the difference with the alternatives right away, [see comparison section](#comparison).
 
@@ -12,7 +12,7 @@ This project is a challenge to rethink virtualization. The goals are...
 
 - **Minimal setup:** This library is designed to give the best performance with no configuration, not like alternatives, and also it handles common hard things in the real world (dynamic size measurement, scroll position adjustment in bottom-up scrolling and imperative scrolling, etc).
 - **Fast:** Scrolling without frame drop needs optimization in many aspects (reduce CPU usage, reduce GC, [reduce layout recalculation](https://gist.github.com/paulirish/5d52fb081b3570c81e3a), optimize for frameworks, etc). We are trying to combine the best of them.
-- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently [about 3kB gzipped](https://bundlephobia.com/package/virtua).
+- **Small:** Its bundle size should be small as much as possible to be friendly with modern web development. Currently each components are ~3kB gzipped and the total is [~4kB gzipped](https://bundlephobia.com/package/virtua).
 - **Flexible:** Aiming to support many usecases - fixed size, dynamic size, horizontal scrolling, reverse scrolling, rtl direction, sticky, infinite scrolling, placeholder, scrollTo, dnd, table, and more. See [live demo](#demo).
 - **Framework agnostic (WIP):** Currently only for [React](https://react.dev/) but we could support [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), [Solid](https://www.solidjs.com/), [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) and more in the future.
 
@@ -32,6 +32,8 @@ npm install virtua
 
 If you use ESM and webpack 5, use react >= 18 to avoid [Can't resolve `react/jsx-runtime` error](https://github.com/facebook/react/issues/20235).
 
+If you use this lib in [legacy browsers which does not have ResizeObserver](https://caniuse.com/?search=resizeobserver), you should use [polyfill](https://github.com/juggle/resize-observer#switching-between-native-and-polyfilled-versions).
+
 ## Usage
 
 ### Vertical scroll
@@ -108,6 +110,30 @@ export const App = () => {
 };
 ```
 
+### React Server Components (RSC) support
+
+This library is marked as a Client Component. You can render RSC as children of VList.
+
+```tsx
+// page.tsx in App Router of Next.js
+import { VList } from "virtua";
+
+export default async () => {
+  return (
+    <div>
+      <div>This is Server Component</div>
+      <VList style={{ height: 300 }}>
+        {Array.from({ length: 1000 }).map((_, i) => (
+          <div key={i} style={{ border: "solid 1px gray", height: 80 }}>
+            {i}
+          </div>
+        ))}
+      </VList>
+    </div>
+  );
+};
+```
+
 And see [examples](./stories) for more usages.
 
 ## Documentation
@@ -124,10 +150,10 @@ WIP
 
 |                                                    | [virtua](https://github.com/inokawa/virtua)              | [react-virtuoso](https://github.com/petyosi/react-virtuoso)       | [react-window](https://github.com/bvaughn/react-window)                                            | [react-virtualized](https://github.com/bvaughn/react-virtualized)                                                                                                      | [@tanstack/react-virtual](https://github.com/TanStack/virtual)            | [react-cool-virtual](https://github.com/wellyshen/react-cool-virtual) |
 | :------------------------------------------------- | :------------------------------------------------------- | :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ | :-------------------------------------------------------------------- |
-| Bundle size                                        | [3.1kB gzipped](https://bundlephobia.com/package/virtua) | [16.3kB gzipped](https://bundlephobia.com/package/react-virtuoso) | [6.4kB gzipped](https://bundlephobia.com/package/react-window)                                     | [27.3kB gzipped](https://bundlephobia.com/package/react-virtualized)                                                                                                   | [2.3kB gzipped](https://bundlephobia.com/package/@tanstack/react-virtual) | [3.1kB gzipped](https://bundlephobia.com/package/react-cool-virtual)  |
+| Bundle size                                        | [4.2kB gzipped](https://bundlephobia.com/package/virtua) | [16.3kB gzipped](https://bundlephobia.com/package/react-virtuoso) | [6.4kB gzipped](https://bundlephobia.com/package/react-window)                                     | [27.3kB gzipped](https://bundlephobia.com/package/react-virtualized)                                                                                                   | [2.3kB gzipped](https://bundlephobia.com/package/@tanstack/react-virtual) | [3.1kB gzipped](https://bundlephobia.com/package/react-cool-virtual)  |
 | Vertical scroll                                    | ✅                                                       | ✅                                                                | ✅                                                                                                 | ✅                                                                                                                                                                     | 🟠 (needs customization)                                                  | 🟠 (needs customization)                                              |
 | Horizontal scroll                                  | ✅                                                       | ✅                                                                | ✅                                                                                                 | ✅                                                                                                                                                                     | 🟠 (needs customization)                                                  | 🟠 (needs customization)                                              |
-| Grid (Virtualization for both direction)           | ✅                                                       | ❌                                                                | ✅ (FixedSizeGrid / VariableSizeGrid)                                                              | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md))                                                                                     | 🟠 (needs customization)                                                  | 🟠 (needs customization)                                              |
+| Grid (Virtualization for two dimension)            | ✅                                                       | ❌                                                                | ✅ (FixedSizeGrid / VariableSizeGrid)                                                              | ✅ ([Grid](https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md))                                                                                     | 🟠 (needs customization)                                                  | 🟠 (needs customization)                                              |
 | Table                                              | 🟠 (needs customization)                                 | ✅ (TableVirtuoso)                                                | 🟠 (needs customization)                                                                           | ✅ ([Table](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md))                                                                                   | 🟠 (needs customization)                                                  | 🟠 (needs customization)                                              |
 | Window scroller                                    | ❌                                                       | ✅                                                                | ❌                                                                                                 | ✅ ([WindowScroller](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md))                                                                 | ✅                                                                        | ❌                                                                    |
 | Dynamic list size                                  | ✅                                                       | ✅                                                                | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md)) | 🟠 (needs [AutoSizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md))                                                                     | ✅                                                                        | ✅                                                                    |
@@ -136,6 +162,7 @@ WIP
 | Infinite scroll                                    | ✅                                                       | ✅                                                                | 🟠 (needs [react-window-infinite-loader](https://github.com/bvaughn/react-window-infinite-loader)) | 🟠 (needs [InfiniteLoader](https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md))                                                           | ✅                                                                        | ✅                                                                    |
 | RTL                                                | ✅                                                       | ❌                                                                | ✅                                                                                                 | ❌                                                                                                                                                                     | ❌                                                                        | ❌                                                                    |
 | SSR support                                        | ✅                                                       | ✅                                                                | ✅                                                                                                 | ✅                                                                                                                                                                     | ✅                                                                        | ✅                                                                    |
+| React Server Components (RSC) support              | ✅                                                       | ?                                                                 | ?                                                                                                  | ?                                                                                                                                                                      | ✅ (hook)                                                                 | ✅ (hook)                                                             |
 | Display exceeding browser's max element size limit | ❌                                                       | ❌                                                                | ❌                                                                                                 | ✅                                                                                                                                                                     | ❌                                                                        | ❌                                                                    |
 
 - ✅ - Built-in supported

package/lib/core/resizer.d.ts

@@ -1,5 +1,5 @@
 import { VirtualStore } from "./store";
-export declare const createResizer: (store: VirtualStore) => {
+export declare const createResizer: (store: VirtualStore, isHorizontal: boolean) => {
     _observeRoot(root: HTMLElement): () => void;
     _observeItem(el: HTMLElement, i: number): () => void;
     _isJustResized(): boolean;

package/lib/core/scroller.d.ts

@@ -6,4 +6,4 @@ export type Scroller = {
     _scrollToIndex: (index: number, count: number) => void;
     _fixScrollJump: (jump: ScrollJump, startIndex: number) => void;
 };
-export declare const createScroller: (store: VirtualStore, isJustResized: () => boolean) => Scroller;
+export declare const createScroller: (store: VirtualStore, isHorizontal: boolean, isRtl: boolean, isJustResized: () => boolean) => Scroller;

package/lib/core/store.d.ts

@@ -12,6 +12,7 @@ export declare const ACTION_WINDOW_RESIZE = 2;
 export declare const ACTION_SCROLL = 3;
 export declare const ACTION_MANUAL_SCROLL = 4;
 type Actions = [type: typeof ACTION_ITEM_RESIZE, entries: ItemResize[]] | [type: typeof ACTION_WINDOW_RESIZE, size: number] | [type: typeof ACTION_SCROLL, offset: number] | [type: typeof ACTION_MANUAL_SCROLL, offset: number];
+type Subscriber = (sync?: boolean) => void;
 export type VirtualStore = {
     _getRange(): ItemsRange;
     _isUnmeasuredItem(index: number): boolean;
@@ -21,16 +22,15 @@ export type VirtualStore = {
     _getScrollOffset(): number;
     _getViewportSize(): number;
     _getScrollSize(): number;
+    _getScrollableDomSize(): number;
     _getJump(): ScrollJump;
-    _isHorizontal(): boolean;
-    _isRtl(): boolean;
     _getItemIndexForScrollTo(offset: number): number;
     _waitForScrollDestinationItemsMeasured(): Promise<void>;
-    _subscribe(cb: () => void): () => void;
+    _subscribe(cb: Subscriber): () => void;
     _update(...action: Actions): void;
     _getScrollDirection(): ScrollDirection;
     _setScrollDirection(direction: ScrollDirection): void;
     _updateCacheLength(length: number): void;
 };
-export declare const createVirtualStore: (itemCount: number, itemSize: number, isHorizontal: boolean, isRtl: boolean, initialItemCount: number | undefined, onScrollStateChange: (scrolling: boolean) => void, onScrollOffsetChange: (offset: number) => void) => VirtualStore;
+export declare const createVirtualStore: (itemCount: number, itemSize: number, initialItemCount: number | undefined, isReverse: boolean, onScrollStateChange: (scrolling: boolean) => void, onScrollOffsetChange: (offset: number) => void) => VirtualStore;
 export {};

package/lib/core/utils.d.ts

@@ -1,5 +1,6 @@
 export declare const min: (...values: number[]) => number;
 export declare const max: (...values: number[]) => number;
+export declare const abs: (x: number) => number;
 export declare const now: () => number;
 export declare const exists: <T>(v: T) => v is Exclude<T, null | undefined>;
 export declare const range: <T>(length: number, cb: (i: number) => T) => T[];

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export { VList } from "./react/VList";
-export type { VListProps, VListHandle, CustomItemComponent, CustomItemComponentProps, CustomWindowComponent, CustomWindowComponentProps, } from "./react/VList";
+export type { VListProps, VListHandle, CustomItemComponent, CustomItemComponentProps, ScrollMode, } from "./react/VList";
 export { VGrid } from "./react/VGrid";
-export type { VGridProps, VGridHandle, CustomCellComponent, CustomCellComponentProps, CustomGridWindowComponent, CustomGridWindowComponentProps, } from "./react/VGrid";
-export type { WindowComponentAttributes } from "./react/types";
+export type { VGridProps, VGridHandle, CustomCellComponent, CustomCellComponentProps, } from "./react/VGrid";
+export type { WindowComponentAttributes, CustomWindowComponent, CustomWindowComponentProps, } from "./react/DefaultWindow";

package/lib/index.js

@@ -1,2 +1,3 @@
-var e=require("react/jsx-runtime"),t=require("react"),r=require("use-sync-external-store/shim/index.js");const n=Math.min,o=Math.max,i=Date.now,l=e=>null!=e,s=(e,t)=>Array.from({length:e},((e,r)=>t(r))),c=e=>{let t,r;return(...n)=>(t||(t=!0,r=e(...n)),r)},u=(e,t)=>{const r=e.t[t];return-1===r?e.o:r},d=(e,t,r)=>{if(!e.i)return 0;if(e.l>=t)return r?e.u[t]+u(e,t):e.u[t];let n=e.l,o=e.u[n];for(;n<=t&&(e.u[n]=o,n!==t||r);)o+=u(e,n),n++;return e.l=t,o},a=(e,t)=>d(e,t),_=(e,t,r)=>{let i=0;if(r>=0)for(;t<e.i-1;){const n=u(e,t++);if((i+=n)>=r){i-n/2>=r&&t--;break}}else for(;t>0;){const n=u(e,--t);if((i-=n)<=r){i+n/2<r&&t++;break}}return n(o(t,0),e.i-1)},h=(e,t,r,n)=>_(e,r,t-n),f=_,g=(e,t,r)=>({o:t,i:e,l:r?n(r.l,e-1):0,t:s(e,(e=>{const t=r&&r.t[e];return l(t)?t:-1})),u:s(e,(e=>{if(0===e)return 0;const t=r&&r.u[e];return l(t)?t:-1}))}),m=(e,t,r,i,l=0,s,c)=>{let _,m=t*o(l-1,0),w=0,S=[],v=g(e,t),p=0,z=[0,l];const I=new Set;return{_(){const[e,t]=z,r=a(v,e),n=h(v,w,e,r),o=f(v,n,m);return e===n&&t===o?z:z=[n,o]},h:e=>-1===v.t[e],g:e=>((e,t,r)=>{for(let n=t;n<=r;n++)if(-1===e.t[n])return!0;return!1})(v,e,f(v,e,m)),m:e=>a(v,e),S:e=>u(v,e),v:()=>w,p:()=>m,I:()=>(e=>d(e,e.i-1,!0))(v),R:()=>S,T:()=>r,M:()=>i,C:e=>h(v,e,0,0),O:()=>(_&&_[1](),new Promise(((e,t)=>{_=[()=>{Promise.resolve().then((()=>{e(),_=void 0}))},t]}))),W:e=>(I.add(e),()=>{I.delete(e)}),H(e,t){const r=(()=>{switch(e){case 1:{const e=t.filter((([e,t])=>v.t[e]!==t));if(!e.length)return!1;const r=[];return e.forEach((([e,t])=>{r.push([t-u(v,e),e]),((e,t,r)=>{e.t[t]=r,e.l=n(t,e.l)})(v,e,t)})),S=r,!0}case 2:return m!==t&&(m=t,!0);case 3:case 4:{const e=w;return(w=t)!==e}}})();r&&(I.forEach((e=>{e()})),3===e?c(w):_&&1===e&&_[0]())},k:()=>p,D(e){const t=p;p=e,0===p?s(!1):0!==t||1!==p&&2!==p||s(!0)},J(e){v.i!==e&&(v=g(e,t,v))}}},w="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,S=(e,t)=>r.useSyncExternalStore(e,t,t),v=c((e=>{const t="scrollLeft",r=e[t];e[t]=1;const n=0===e[t];return e[t]=r,n})),p=(e,t)=>{let r;const s=e.T(),c=e.M(),u=s?"scrollLeft":"scrollTop",d=()=>r?s?r.scrollWidth:r.scrollHeight:0,a=(t,n)=>{r&&(s&&c&&v(r)&&(t*=-1),n?r[u]+=t:(r[u]=t,e.D(3)))},_=async(t,r)=>{const n=()=>{let t=r();const n=d(),o=e.p();return n-(t+o)<=0&&(t=n-o),t};if(e.g(t)){do{e.H(4,n());try{await e.O()}catch(e){return}}while(e.g(t));a(n())}else{const t=n();a(t),e.H(4,t)}},h=e=>e.reduce(((e,[t])=>e+t),0);return{$(n){r=n;const o=()=>{let r=n[u];s&&c&&v(n)&&(r*=-1);const o=e.v();if(o===r)return;const i=e.k(),l=t();0!==i&&l||3===i||e.D(o>r?2:1),e.H(3,r)},d=(()=>{let t;const r=()=>{l(t)&&clearTimeout(t)},n=()=>{r(),t=setTimeout((()=>{t=null,o(),e.D(0)}),150)};return n.q=r,n})(),a=()=>{o(),d()},_=(()=>{let t=i()-50;return(...r)=>{const n=i();t+50<n&&(t=n,(t=>{if(0!==e.k()&&!t.ctrlKey&&(s?t.deltaX:t.deltaY)){const t=e.v();t>0&&t<e.I()-e.p()&&d()}})(...r))}})();return n.addEventListener("scroll",a),n.addEventListener("wheel",_,{passive:!0}),()=>{n.removeEventListener("scroll",a),n.removeEventListener("wheel",_),d.q()}},L:d,j(t){t=o(t,0),_(e.C(t),(()=>t))},A(t,r){t=o(n(t,r-1),0),_(t,(()=>e.m(t)))},F:(t,r)=>{const n=e.k();if(2===n){const e=h(t);e&&a(e,!0)}else if(3===n){const n=e.v();if(0===n);else{const o=h(t);if(e.I()-(n+e.p()+o)<=0)o&&a(n+o);else{const e=t.reduce(((e,[t,n])=>(n<r&&(e+=t),e)),0);e&&a(e,!0)}}}}}},z="current",I=e=>{const r=t.useRef();return r[z]||(r[z]=e())},b=e=>{const r=t.useRef(e);return w((()=>{r[z]=e}),[e]),r},x=t.memo((({P:r,U:n,B:o,V:i,G:l})=>{const s=t.useRef(null),c=S(o.W,(()=>o.m(i))),u=S(o.W,(()=>o.h(i)));return w((()=>n.K(s[z],i)),[i]),e.jsx(l,{ref:s,style:t.useMemo((()=>{const e=o.T(),t=o.M()?"right":"left",r={margin:0,padding:0,position:"absolute",[e?"height":"width"]:"100%",[e?"top":t]:0,[e?t:"top"]:c,visibility:u?"hidden":"visible"};return e&&(r.display="flex"),r}),[c,u]),children:r})})),y=t.forwardRef((({children:r,scrollSize:n,scrolling:o,horizontal:i,attrs:l},s)=>e.jsx("div",{ref:s,...l,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:i?n:"100%",height:i?"100%":n,pointerEvents:o?"none":"auto"})),[n,o]),children:r})}))),R=({P:r,N:n,B:o,G:i,X:l,Y:s})=>{const c=S(o.W,o.I),u=o.T();return e.jsx(i,{ref:n,scrollSize:c,scrolling:l,horizontal:u,attrs:t.useMemo((()=>({...s,style:{overflow:u?"auto hidden":"hidden auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...s.style}})),[s]),children:r})},T=t.forwardRef((({children:r,itemSize:i=40,overscan:s=4,initialItemCount:u,horizontal:d,rtl:a,element:_=y,itemElement:h="div",onScroll:f,onScrollStop:g,onRangeChange:v,...T},M)=>{const C=t.useMemo((()=>{const e=[];return t.Children.forEach(r,(t=>{(e=>!l(e)||"boolean"==typeof e)(t)||e.push(t)})),e}),[r]),O=C.length,W=b(f),H=b(g),[k,D]=t.useState(new Set),[E,J]=t.useState(!1),[$,q,L]=I((()=>{const e=m(O,i,!!d,!!a,u,(e=>{J(e),e||(D(new Set),H[z]&&H[z]())}),(e=>{W[z]&&W[z](e)})),t=(e=>{let t,r=!1;const n=e.T()?"width":"height",o=new WeakMap,i=c((()=>new ResizeObserver((i=>{const s=[];for(const{target:r,contentRect:c}of i)if(r===t)e.H(2,c[n]);else{const e=o.get(r);l(e)&&s.push([e,c[n]])}s.length&&(e.H(1,s),r=!0)}))));return{Z(e){t=e;const r=i();return r.observe(e),()=>{r.disconnect()}},K(e,t){const r=i();return o.set(e,t),r.observe(e),()=>{o.delete(e),r.unobserve(e)}},ee(){const e=r;return r=!1,e}}})(e);return[e,t,p(e,t.ee)]}));$.J(O);const[j,A]=S($.W,$._),F=S($.W,$.R),P=t.useRef(null);w((()=>{const e=P[z],t=q.Z(e),r=L.$(e);return()=>{t(),r()}}),[]),w((()=>{F.length&&L.F(F,j)}),[F]),t.useEffect((()=>{v&&v({start:j,end:A,count:O})}),[j,A]),t.useImperativeHandle(M,(()=>({get scrollOffset(){return $.v()},get scrollSize(){return L.L()},get viewportSize(){return $.p()},scrollToIndex(e){L.A(e,O)},scrollTo:L.j,scrollBy(e){L.j($.v()+e)}})),[O]);const U=o(j-s,0),B=n(A+s,O-1),V=t.useMemo((()=>{const t=[];for(let e=U;e<=B;e++)k.add(e);return k.forEach((r=>{const n=C[r];l(n)&&t.push(e.jsx(x,{U:q,B:$,V:r,G:h,P:n},(null==n?void 0:n.key)||r))})),t}),[C,k,U,B]);return e.jsx(R,{N:P,B:$,G:_,X:E,P:V,Y:T})})),M=(e,t)=>`${e}-${t}`,C=t.memo((({P:r,U:n,te:o,re:i,ne:l,oe:s,G:c})=>{const u=t.useRef(null),d=S(o.W,(()=>o.m(l))),a=S(i.W,(()=>i.m(s))),_=S(o.W,(()=>o.h(l))),h=S(i.W,(()=>i.h(s))),f=S(o.W,(()=>o.S(l))),g=S(i.W,(()=>i.S(s)));return w((()=>n.K(u[z],l,s)),[s,l]),e.jsx(c,{ref:u,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:d,[o.M()?"right":"left"]:a,visibility:_||h?"hidden":"visible",minHeight:f,minWidth:g})),[d,a,g,f,_,h]),children:r})})),O=t.forwardRef((({children:r,scrollWidth:n,scrollHeight:o,scrolling:i,attrs:l},s)=>e.jsx("div",{ref:s,...l,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:n,height:o,pointerEvents:i?"none":"auto"})),[n,o,i]),children:r})}))),W=({P:r,N:n,ie:o,le:i,G:l,X:s,Y:c})=>{const u=S(o.W,o.I),d=S(i.W,i.I);return e.jsx(l,{ref:n,scrollWidth:d,scrollHeight:u,scrolling:s,attrs:t.useMemo((()=>({...c,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...c.style}})),[c]),children:r})},H=t.forwardRef((({children:r,row:i,col:l,cellHeight:s=40,cellWidth:u=100,overscan:d=2,initialRowCount:a,initialColCount:_,rtl:h,element:f=O,cellElement:g="div",...v})=>{const[b,x]=t.useState(!1),[y,R]=t.useState(!1),[T,H,k,D,E]=I((()=>{const e=()=>{},t=m(i,s,!1,!!h,a,x,e),r=m(l,u,!0,!!h,_,R,e),n=((e,t)=>{let r,n=!1,i=!1;const l="height",s="width",u=new WeakMap,d=new Set,a=new Set,_=new Map,h=(e,t)=>`${e}-${t}`,f=c((()=>new ResizeObserver((c=>{const f=new Set,g=new Set;for(const{target:n,contentRect:o}of c)if(n===r)e.H(2,o[l]),t.H(2,o[s]);else{const e=u.get(n);if(e){const[t,r]=e,n=h(t,r),i=_.get(n),c=[o[l],o[s]];let u,d;i?(i[0]!==c[0]&&(u=!0),i[1]!==c[1]&&(d=!0)):u=d=!0,u&&f.add(t),d&&g.add(r),(u||d)&&_.set(n,c)}}if(f.size){const t=[];f.forEach((e=>{let r=0;a.forEach((t=>{const n=_.get(h(e,t));n&&(r=o(r,n[0]))})),r&&t.push([e,r])})),e.H(1,t),n=!0}if(g.size){const e=[];g.forEach((t=>{let r=0;d.forEach((e=>{const n=_.get(h(e,t));n&&(r=o(r,n[1]))})),r&&e.push([t,r])})),t.H(1,e),i=!0}}))));return{Z(e){r=e;const t=f();return t.observe(e),()=>{t.disconnect()}},K(e,t,r){const n=f();return u.set(e,[t,r]),d.add(t),a.add(r),n.observe(e),()=>{u.delete(e),n.unobserve(e)}},ee(e){const t=e?i:n;return e?i=!1:n=!1,t}}})(t,r);return[t,r,n,p(t,(()=>n.ee())),p(r,(()=>n.ee(!0)))]}));T.J(i),H.J(l);const[J,$]=S(T.W,T._),[q,L]=S(H.W,H._),j=S(T.W,T.R),A=S(H.W,H.R),F=t.useRef(null);w((()=>{const e=F[z],t=k.Z(e),r=D.$(e),n=E.$(e);return()=>{t(),r(),n()}}),[]),w((()=>{j.length&&D.F(j,J)}),[j]),w((()=>{A.length&&E.F(A,q)}),[A]);const P=t.useMemo((()=>{const e=new Map;return(t,n)=>{let o=e.get(M(t,n));return o||e.set(M(t,n),o=r({rowIndex:t,colIndex:n})),o}}),[r]),U=o(J-d,0),B=n($+d,i-1),V=o(q-d,0),G=n(L+d,l-1),K=t.useMemo((()=>{const t=[];for(let r=U;r<=B;r++)for(let n=V;n<=G;n++)t.push(e.jsx(C,{U:k,te:T,re:H,ne:r,oe:n,G:g,P:P(r,n)},M(r,n)));return t}),[P,U,B,V,G]);return e.jsx(W,{N:F,ie:T,le:H,G:f,X:b||y,P:K,Y:v})}));exports.VGrid=H,exports.VList=T;
+"use client";
+var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom");const n=Math.min,o=Math.max,i=Math.abs,l=Date.now,s=e=>null!=e,c=(e,t)=>Array.from({length:e},((e,r)=>t(r))),u=e=>{let t,r;return(...n)=>(t||(t=!0,r=e(...n)),r)},_=(e,t)=>{const r=e.t[t];return-1===r?e.o:r},a=(e,t,r)=>{if(!e.i)return 0;if(e.l>=t)return r?e.u[t]+_(e,t):e.u[t];let n=e.l,o=e.u[n];for(;n<=t&&(e.u[n]=o,n!==t||r);)o+=_(e,n),n++;return e.l=t,o},d=(e,t)=>a(e,t),h=(e,t,r)=>{let i=0;if(r>=0)for(;t<e.i-1;){const n=_(e,t++);if((i+=n)>=r){i-n/2>=r&&t--;break}}else for(;t>0;){const n=_(e,--t);if((i-=n)<=r){i+n/2<r&&t++;break}}return n(o(t,0),e.i-1)},f=(e,t,r,n)=>h(e,r,t-n),g=h,m=(e,t,r)=>({o:t,i:e,l:r?n(r.l,e-1):0,t:c(e,(e=>{const t=r&&r.t[e];return s(t)?t:-1})),u:c(e,(e=>{if(0===e)return 0;const t=r&&r.u[e];return s(t)?t:-1}))}),w=(e,t,r=0,l,s,c)=>{let u,h=t*o(r-1,0),w=0,S=[],v=m(e,t),p=0,z=[0,r];const I=new Set,b=()=>(e=>a(e,e.i-1,!0))(v);return{_(){const[e,t]=z,r=d(v,e),n=f(v,w,e,r),o=g(v,n,h);return e===n&&t===o?z:z=[n,o]},h:e=>-1===v.t[e],g:e=>((e,t,r)=>{for(let n=t;n<=r;n++)if(-1===e.t[n])return!0;return!1})(v,e,g(v,e,h)),m(e){const t=d(v,e);return l?t+o(0,h-b()):t},S:e=>_(v,e),v:()=>w,p:()=>h,I:()=>b(),R:()=>o(b(),h),T:()=>S,M:e=>f(v,e,0,0),O:()=>(u&&u[1](),new Promise(((e,t)=>{u=[()=>{Promise.resolve().then((()=>{e(),u=void 0}))},t]}))),C:e=>(I.add(e),()=>{I.delete(e)}),H(e,t){let r;const o=(()=>{switch(e){case 1:{const e=t.filter((([e,t])=>v.t[e]!==t));return!!e.length&&(S=[],e.forEach((([e,t])=>{S.push([t-_(v,e),e]),((e,t,r)=>{e.t[t]=r,e.l=n(t,e.l)})(v,e,t)})),r=!0,!0)}case 2:return h!==t&&(h=t,!0);case 3:case 4:{const n=w,o=(w=t)!==n;return o&&3===e&&(r=i(n-t)>h),o}}})();o&&(I.forEach((e=>{e(r)})),3===e?c(w):u&&1===e&&u[0]())},D:()=>p,k(e){const t=p;p=e,0===p?s(!1):0!==t||1!==p&&2!==p||s(!0)},J(e){v.i!==e&&(v=m(e,t,v))}}},S="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,v="current",p=e=>{const r=t.useRef(e);return S((()=>{r[v]=e}),[e]),r},z=(e,n,o)=>{const[i,l]=t.useState(n),s=p(n);if(t.useLayoutEffect((()=>{const t=()=>{l((()=>s[v]()))};return e.C((e=>{e?r.flushSync(t):t()}))}),[]),o){const e=n();i!==e&&l(e)}return i},I=u((e=>{const t="scrollLeft",r=e[t];e[t]=1;const n=e[t]<1;return e[t]=r,n})),b=(e,t,r,i)=>{let c;const u=t?"scrollLeft":"scrollTop",_=()=>c?t?c.scrollWidth:c.scrollHeight:0,a=(t,r)=>I(c)||r?-t:e.I()-e.p()-t,d=(n,o)=>{c&&(t&&r&&(n=a(n,o)),o?c[u]+=n:(c[u]=n,e.k(3)))},h=async(t,r)=>{const n=()=>{let t=r();const n=_(),o=e.p();return n-(t+o)<=0&&(t=n-o),t};if(e.g(t)){do{e.H(4,n());try{await e.O()}catch(e){return}}while(e.g(t));d(n())}else{const t=n();d(t),e.H(4,t)}},f=e=>e.reduce(((e,[t])=>e+t),0);return{W(n){c=n;const o=()=>{let o=n[u];t&&r&&(o=a(o));const l=e.v();if(l===o)return;const s=e.D(),c=i();0!==s&&c||3===s||e.k(l>o?2:1),e.H(3,o)},_=(()=>{let t;const r=()=>{s(t)&&clearTimeout(t)},n=()=>{r(),t=setTimeout((()=>{t=null,o(),e.k(0)}),150)};return n.$=r,n})(),d=()=>{o(),_()},h=(()=>{let r=l()-50;return(...n)=>{const o=l();r+50<o&&(r=o,(r=>{if(0!==e.D()&&!r.ctrlKey&&(t?r.deltaX:r.deltaY)){const t=e.v();t>0&&t<e.I()-e.p()&&_()}})(...n))}})();return n.addEventListener("scroll",d),n.addEventListener("wheel",h,{passive:!0}),()=>{n.removeEventListener("scroll",d),n.removeEventListener("wheel",h),_.$()}},q:_,L(t){t=o(t,0),h(e.M(t),(()=>t))},A(t,r){t=o(n(t,r-1),0),h(t,(()=>e.m(t)))},B:(t,r)=>{const n=e.D();if(2===n){const e=f(t);e&&d(e,!0)}else if(3===n){const n=e.v();if(0===n);else{const o=f(t);if(e.I()-(n+e.p()+o)<=0)o&&d(n+o);else{const e=t.reduce(((e,[t,n])=>(n<r&&(e+=t),e)),0);e&&d(e,!0)}}}}}},x=e=>{const r=t.useRef();return r[v]||(r[v]=e())},R=t.forwardRef((({children:r,attrs:n,width:o,height:i,scrolling:l},s)=>e.jsx("div",{ref:s,...n,children:e.jsx("div",{style:t.useMemo((()=>({position:"relative",visibility:"hidden",width:null!=o?o:"100%",height:null!=i?i:"100%",pointerEvents:l?"none":"auto"})),[o,i,l]),children:r})}))),y=t.memo((({F:r,P:n,U:o,j:i,V:l,G:s,K:c})=>{const u=t.useRef(null),_=z(o,(()=>o.m(i)),!0),a=z(o,(()=>o.h(i)),!0);return S((()=>n.N(u[v],i)),[i]),e.jsx(l,{ref:u,style:t.useMemo((()=>{const e=c?"right":"left",t={margin:0,padding:0,position:"absolute",[s?"height":"width"]:"100%",[s?"top":e]:0,[s?e:"top"]:_,visibility:a?"hidden":"visible"};return s&&(t.display="flex"),t}),[_,a]),children:r})})),T=({F:r,X:n,U:o,V:i,Y:l,Z:s,G:c})=>{const u=z(o,o.I);return e.jsx(i,{ref:n,width:c?u:void 0,height:c?void 0:u,scrolling:l,attrs:t.useMemo((()=>({...s,style:{overflow:c?"auto hidden":"hidden auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...s.style}})),[s]),children:r})},M=t.forwardRef((({children:r,itemSize:i=40,overscan:l=4,initialItemCount:c,horizontal:_,mode:a,element:d=R,itemElement:h="div",onScroll:f,onScrollStop:g,onRangeChange:m,...I},M)=>{const O=t.useMemo((()=>{const e=[];return t.Children.forEach(r,(t=>{(e=>!s(e)||"boolean"==typeof e)(t)||e.push(t)})),e}),[r]),C=O.length,H=p(f),D=p(g),[k,J]=t.useState(!1),[W,$,q,E,L]=x((()=>{const e=!!_,t="rtl"===a,r=w(C,i,c,"reverse"===a,(e=>{J(e),e||D[v]&&D[v]()}),(e=>{H[v]&&H[v](e)})),n=((e,t)=>{let r,n=!1;const o=t?"width":"height",i=new WeakMap,l=u((()=>new ResizeObserver((t=>{const l=[];for(const{target:n,contentRect:c}of t)if(n===r)e.H(2,c[o]);else{const e=i.get(n);s(e)&&l.push([e,c[o]])}l.length&&(e.H(1,l),n=!0)}))));return{ee(e){r=e;const t=l();return t.observe(e),()=>{t.disconnect()}},N(e,t){const r=l();return i.set(e,t),r.observe(e),()=>{i.delete(e),r.unobserve(e)}},te(){const e=n;return n=!1,e}}})(r,e);return[r,n,b(r,e,t,n.te),e,t]}));W.J(C);const[A,B]=z(W,W._),F=z(W,W.T),P=t.useRef(null);S((()=>{const e=P[v],t=$.ee(e),r=q.W(e);return()=>{t(),r()}}),[]),S((()=>{F.length&&q.B(F,A)}),[F]),t.useEffect((()=>{m&&m({start:A,end:B,count:C})}),[A,B]),t.useImperativeHandle(M,(()=>({get scrollOffset(){return W.v()},get scrollSize(){return q.q()},get viewportSize(){return W.p()},scrollToIndex(e){q.A(e,C)},scrollTo:q.L,scrollBy(e){q.L(W.v()+e)}})),[C]);const U=o(A-l,0),j=n(B+l,C-1),V=t.useMemo((()=>{const t=[];for(let r=U;r<=j;r++){const n=O[r];s(n)&&t.push(e.jsx(y,{P:$,U:W,j:r,V:h,F:n,G:E,K:L},(null==n?void 0:n.key)||r))}return t}),[O,U,j]);return e.jsx(T,{X:P,U:W,V:d,Y:k,F:V,Z:I,G:E})})),O=(e,t)=>`${e}-${t}`,C=t.memo((({F:r,P:n,re:o,ne:i,oe:l,ie:s,V:c,K:u})=>{const _=t.useRef(null),a=z(o,(()=>o.m(l)),!0),d=z(i,(()=>i.m(s)),!0),h=z(o,(()=>o.h(l)),!0),f=z(i,(()=>i.h(s)),!0),g=z(o,(()=>o.S(l)),!0),m=z(i,(()=>i.S(s)),!0);return S((()=>n.N(_[v],l,s)),[s,l]),e.jsx(c,{ref:_,style:t.useMemo((()=>({display:"grid",margin:0,padding:0,position:"absolute",top:a,[u?"right":"left"]:d,visibility:h||f?"hidden":"visible",minHeight:g,minWidth:m})),[a,d,m,g,h,f]),children:r})})),H=({F:r,X:n,le:o,se:i,V:l,Y:s,Z:c})=>{const u=z(o,o.I),_=z(i,i.I);return e.jsx(l,{ref:n,width:_,height:u,scrolling:s,attrs:t.useMemo((()=>({...c,style:{overflow:"auto",contain:"strict",width:"100%",height:"100%",padding:0,margin:0,...c.style}})),[c]),children:r})},D=t.forwardRef((({children:r,row:i,col:l,cellHeight:s=40,cellWidth:c=100,overscan:_=2,initialRowCount:a,initialColCount:d,rtl:h,element:f=R,cellElement:g="div",...m},p)=>{const[I,y]=t.useState(!1),[T,M]=t.useState(!1),[D,k,J,W,$,q]=x((()=>{const e=!!h,t=()=>{},r=w(i,s,a,!1,y,t),n=w(l,c,d,!1,M,t),_=((e,t)=>{let r,n=!1,i=!1;const l="height",s="width",c=new WeakMap,_=new Set,a=new Set,d=new Map,h=(e,t)=>`${e}-${t}`,f=u((()=>new ResizeObserver((u=>{const f=new Set,g=new Set;for(const{target:n,contentRect:o}of u)if(n===r)e.H(2,o[l]),t.H(2,o[s]);else{const e=c.get(n);if(e){const[t,r]=e,n=h(t,r),i=d.get(n),c=[o[l],o[s]];let u,_;i?(i[0]!==c[0]&&(u=!0),i[1]!==c[1]&&(_=!0)):u=_=!0,u&&f.add(t),_&&g.add(r),(u||_)&&d.set(n,c)}}if(f.size){const t=[];f.forEach((e=>{let r=0;a.forEach((t=>{const n=d.get(h(e,t));n&&(r=o(r,n[0]))})),r&&t.push([e,r])})),e.H(1,t),n=!0}if(g.size){const e=[];g.forEach((t=>{let r=0;_.forEach((e=>{const n=d.get(h(e,t));n&&(r=o(r,n[1]))})),r&&e.push([t,r])})),t.H(1,e),i=!0}}))));return{ee(e){r=e;const t=f();return t.observe(e),()=>{t.disconnect()}},N(e,t,r){const n=f();return c.set(e,[t,r]),_.add(t),a.add(r),n.observe(e),()=>{c.delete(e),n.unobserve(e)}},te(e){const t=e?i:n;return e?i=!1:n=!1,t}}})(r,n);return[r,n,_,b(r,!1,e,(()=>_.te())),b(n,!0,e,(()=>_.te(!0))),e]}));D.J(i),k.J(l);const[E,L]=z(D,D._),[A,B]=z(k,k._),F=z(D,D.T),P=z(k,k.T),U=t.useRef(null);S((()=>{const e=U[v],t=J.ee(e),r=W.W(e),n=$.W(e);return()=>{t(),r(),n()}}),[]),S((()=>{F.length&&W.B(F,E)}),[F]),S((()=>{P.length&&$.B(P,A)}),[P]),t.useImperativeHandle(p,(()=>({get scrollOffset(){return[k.v(),D.v()]},get scrollSize(){return[$.q(),W.q()]},get viewportSize(){return[k.p(),D.p()]},scrollToIndex(e,t){$.A(e,l),W.A(t,i)},scrollTo(e,t){$.L(e),W.L(t)},scrollBy(e,t){$.L(k.v()+e),W.L(D.v()+t)}})),[i,l]);const j=t.useMemo((()=>{const e=new Map;return(t,n)=>{let o=e.get(O(t,n));return o||e.set(O(t,n),o=r({rowIndex:t,colIndex:n})),o}}),[r]),V=o(E-_,0),G=n(L+_,i-1),K=o(A-_,0),N=n(B+_,l-1),Q=t.useMemo((()=>{const t=[];for(let r=V;r<=G;r++)for(let n=K;n<=N;n++)t.push(e.jsx(C,{P:J,re:D,ne:k,oe:r,ie:n,V:g,F:j(r,n),K:q},O(r,n)));return t}),[j,V,G,K,N]);return e.jsx(H,{X:U,le:D,se:k,V:f,Y:I||T,F:Q,Z:m})}));exports.VGrid=D,exports.VList=M;
 //# sourceMappingURL=index.js.map