ark-floating-scroll 1.0.0

package/README.md

@@ -0,0 +1,87 @@
+# optimised-scroll
+
+A high-performance virtualized list component for React. Renders only the items visible in the viewport, dramatically reducing DOM nodes and improving performance for long lists.
+
+## Installation
+
+```bash
+npm install optimised-scroll
+```
+
+**Peer dependencies:** React ≥ 16.8.0
+
+## Quick Start
+
+```tsx
+import { VirtualList } from "optimised-scroll";
+
+const items = Array.from({ length: 10000 }, (_, i) => `Item ${i}`);
+
+function App() {
+  return (
+    <VirtualList
+      items={items}
+      itemHeight={40}
+      height={500}
+      renderItem={(item, index) => (
+        <div style={{ padding: "8px", borderBottom: "1px solid #eee" }}>
+          {item}
+        </div>
+      )}
+    />
+  );
+}
+```
+
+## API
+
+### `<VirtualList<T>>`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `T[]` | *required* | Array of items to render |
+| `itemHeight` | `number` | *required* | Fixed height of each item in pixels |
+| `height` | `number` | `400` | Height of the scrollable container |
+| `width` | `number \| string` | `"100%"` | Width of the scrollable container |
+| `overscan` | `number` | `5` | Extra items rendered above/below viewport |
+| `renderItem` | `(item: T, index: number) => ReactNode` | `String(item)` | Custom render function |
+| `className` | `string` | — | CSS class for the outer container |
+| `style` | `CSSProperties` | — | Inline styles for the outer container |
+
+## How It Works
+
+1. **Scroll Detection** — Listens to the container's `scroll` event, throttled via `requestAnimationFrame` for smooth 60fps updates.
+2. **Range Calculation** — Computes `startIndex` and `endIndex` from `scrollTop / itemHeight`, adding an `overscan` buffer.
+3. **DOM Recycling** — Only the visible slice of items is mounted in the DOM. Items outside the viewport are unmounted, keeping memory usage constant regardless of list size.
+
+## TypeScript
+
+Full type definitions are included. The component is generic — your `items` type flows through to `renderItem`:
+
+```tsx
+interface User {
+  id: number;
+  name: string;
+}
+
+<VirtualList<User>
+  items={users}
+  itemHeight={60}
+  renderItem={(user) => <div>{user.name}</div>}
+/>
+```
+
+## Examples
+
+The `examples/` directory includes interactive demos (simple list, typed objects, dynamic add/remove).
+
+```bash
+npm run demo
+# opens at http://localhost:5173
+```
+
+Open DevTools → Elements to confirm only ~20-30 DOM nodes exist regardless of list size.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+interface VirtualListProps<T> {
+    /** Array of items to render */
+    items: T[];
+    /** Fixed height of each item in pixels */
+    itemHeight: number;
+    /** Height of the scrollable container in pixels (default: 400) */
+    height?: number;
+    /** Width of the scrollable container (default: "100%") */
+    width?: number | string;
+    /** Number of extra items to render above/below the viewport (default: 5) */
+    overscan?: number;
+    /** Custom render function for each item */
+    renderItem?: (item: T, index: number) => ReactNode;
+    /** CSS class for the outer container */
+    className?: string;
+    /** Inline styles for the outer container */
+    style?: CSSProperties;
+}
+/**
+ * A virtualized list component that renders only the items visible
+ * in the viewport, plus a configurable overscan buffer.
+ */
+declare function VirtualList<T>({ items, itemHeight, height, width, overscan, renderItem, className, style, }: VirtualListProps<T>): React.JSX.Element;
+
+export { VirtualList, type VirtualListProps };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+interface VirtualListProps<T> {
+    /** Array of items to render */
+    items: T[];
+    /** Fixed height of each item in pixels */
+    itemHeight: number;
+    /** Height of the scrollable container in pixels (default: 400) */
+    height?: number;
+    /** Width of the scrollable container (default: "100%") */
+    width?: number | string;
+    /** Number of extra items to render above/below the viewport (default: 5) */
+    overscan?: number;
+    /** Custom render function for each item */
+    renderItem?: (item: T, index: number) => ReactNode;
+    /** CSS class for the outer container */
+    className?: string;
+    /** Inline styles for the outer container */
+    style?: CSSProperties;
+}
+/**
+ * A virtualized list component that renders only the items visible
+ * in the viewport, plus a configurable overscan buffer.
+ */
+declare function VirtualList<T>({ items, itemHeight, height, width, overscan, renderItem, className, style, }: VirtualListProps<T>): React.JSX.Element;
+
+export { VirtualList, type VirtualListProps };

package/dist/index.js

@@ -0,0 +1,133 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  VirtualList: () => VirtualList
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/VirtualList.tsx
+var import_react = __toESM(require("react"));
+function defaultRenderItem(item, index) {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, String(item));
+}
+function VirtualList({
+  items,
+  itemHeight,
+  height = 400,
+  width = "100%",
+  overscan = 5,
+  renderItem = defaultRenderItem,
+  className,
+  style
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react.useState)(0);
+  const rafRef = (0, import_react.useRef)(null);
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const visibleCount = Math.ceil(height / itemHeight);
+  const endIndex = Math.min(
+    items.length,
+    Math.floor(scrollTop / itemHeight) + visibleCount + overscan
+  );
+  const handleScroll = (0, import_react.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = requestAnimationFrame(() => {
+      setScrollTop(container.scrollTop);
+      rafRef.current = null;
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+  const visibleItems = [];
+  for (let i = startIndex; i < endIndex; i++) {
+    visibleItems.push(
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          key: i,
+          style: {
+            position: "absolute",
+            top: i * itemHeight,
+            left: 0,
+            right: 0,
+            height: itemHeight,
+            overflow: "hidden"
+          }
+        },
+        renderItem(items[i], i)
+      )
+    );
+  }
+  const containerStyle = {
+    overflow: "auto",
+    height,
+    width,
+    position: "relative",
+    willChange: "transform",
+    ...style
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      onScroll: handleScroll
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          height: totalHeight,
+          position: "relative",
+          width: "100%"
+        }
+      },
+      visibleItems
+    )
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VirtualList
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/VirtualList.tsx"],"sourcesContent":["export { VirtualList } from \"./VirtualList\";\nexport type { VirtualListProps } from \"./VirtualList\";\n","import React, {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  CSSProperties,\n  ReactNode,\n} from \"react\";\n\nexport interface VirtualListProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /** Fixed height of each item in pixels */\n  itemHeight: number;\n  /** Height of the scrollable container in pixels (default: 400) */\n  height?: number;\n  /** Width of the scrollable container (default: \"100%\") */\n  width?: number | string;\n  /** Number of extra items to render above/below the viewport (default: 5) */\n  overscan?: number;\n  /** Custom render function for each item */\n  renderItem?: (item: T, index: number) => ReactNode;\n  /** CSS class for the outer container */\n  className?: string;\n  /** Inline styles for the outer container */\n  style?: CSSProperties;\n}\n\nfunction defaultRenderItem<T>(item: T, index: number): ReactNode {\n  return <div>{String(item)}</div>;\n}\n\n/**\n * A virtualized list component that renders only the items visible\n * in the viewport, plus a configurable overscan buffer.\n */\nexport function VirtualList<T>({\n  items,\n  itemHeight,\n  height = 400,\n  width = \"100%\",\n  overscan = 5,\n  renderItem = defaultRenderItem,\n  className,\n  style,\n}: VirtualListProps<T>) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scrollTop, setScrollTop] = useState(0);\n  const rafRef = useRef<number | null>(null);\n\n  const totalHeight = items.length * itemHeight;\n\n  // Calculate visible range with overscan buffer\n  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n  const visibleCount = Math.ceil(height / itemHeight);\n  const endIndex = Math.min(\n    items.length,\n    Math.floor(scrollTop / itemHeight) + visibleCount + overscan\n  );\n\n  const handleScroll = useCallback(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Use rAF to throttle scroll updates for smooth performance\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      setScrollTop(container.scrollTop);\n      rafRef.current = null;\n    });\n  }, []);\n\n  // Clean up rAF on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  // Build only the visible items\n  const visibleItems: ReactNode[] = [];\n  for (let i = startIndex; i < endIndex; i++) {\n    visibleItems.push(\n      <div\n        key={i}\n        style={{\n          position: \"absolute\",\n          top: i * itemHeight,\n          left: 0,\n          right: 0,\n          height: itemHeight,\n          overflow: \"hidden\",\n        }}\n      >\n        {renderItem(items[i], i)}\n      </div>\n    );\n  }\n\n  const containerStyle: CSSProperties = {\n    overflow: \"auto\",\n    height,\n    width,\n    position: \"relative\",\n    willChange: \"transform\",\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      onScroll={handleScroll}\n    >\n      {/* Spacer div to maintain correct scrollbar size */}\n      <div\n        style={{\n          height: totalHeight,\n          position: \"relative\",\n          width: \"100%\",\n        }}\n      >\n        {visibleItems}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAOO;AAqBP,SAAS,kBAAqB,MAAS,OAA0B;AAC/D,SAAO,6BAAAA,QAAA,cAAC,aAAK,OAAO,IAAI,CAAE;AAC5B;AAMO,SAAS,YAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,mBAAe,qBAAuB,IAAI;AAChD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,CAAC;AAC5C,QAAM,aAAS,qBAAsB,IAAI;AAEzC,QAAM,cAAc,MAAM,SAAS;AAGnC,QAAM,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,YAAY,UAAU,IAAI,QAAQ;AAC5E,QAAM,eAAe,KAAK,KAAK,SAAS,UAAU;AAClD,QAAM,WAAW,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,KAAK,MAAM,YAAY,UAAU,IAAI,eAAe;AAAA,EACtD;AAEA,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAGhB,QAAI,OAAO,YAAY,MAAM;AAC3B,2BAAqB,OAAO,OAAO;AAAA,IACrC;AAEA,WAAO,UAAU,sBAAsB,MAAM;AAC3C,mBAAa,UAAU,SAAS;AAChC,aAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAGL,8BAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,OAAO,YAAY,MAAM;AAC3B,6BAAqB,OAAO,OAAO;AAAA,MACrC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,eAA4B,CAAC;AACnC,WAAS,IAAI,YAAY,IAAI,UAAU,KAAK;AAC1C,iBAAa;AAAA,MACX,6BAAAA,QAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACZ;AAAA;AAAA,QAEC,WAAW,MAAM,CAAC,GAAG,CAAC;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAgC;AAAA,IACpC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,IAGV,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EACF;AAEJ;","names":["React"]}

package/dist/index.mjs

@@ -0,0 +1,101 @@
+// src/VirtualList.tsx
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useEffect
+} from "react";
+function defaultRenderItem(item, index) {
+  return /* @__PURE__ */ React.createElement("div", null, String(item));
+}
+function VirtualList({
+  items,
+  itemHeight,
+  height = 400,
+  width = "100%",
+  overscan = 5,
+  renderItem = defaultRenderItem,
+  className,
+  style
+}) {
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const rafRef = useRef(null);
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const visibleCount = Math.ceil(height / itemHeight);
+  const endIndex = Math.min(
+    items.length,
+    Math.floor(scrollTop / itemHeight) + visibleCount + overscan
+  );
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+    }
+    rafRef.current = requestAnimationFrame(() => {
+      setScrollTop(container.scrollTop);
+      rafRef.current = null;
+    });
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, []);
+  const visibleItems = [];
+  for (let i = startIndex; i < endIndex; i++) {
+    visibleItems.push(
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: i,
+          style: {
+            position: "absolute",
+            top: i * itemHeight,
+            left: 0,
+            right: 0,
+            height: itemHeight,
+            overflow: "hidden"
+          }
+        },
+        renderItem(items[i], i)
+      )
+    );
+  }
+  const containerStyle = {
+    overflow: "auto",
+    height,
+    width,
+    position: "relative",
+    willChange: "transform",
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      onScroll: handleScroll
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          height: totalHeight,
+          position: "relative",
+          width: "100%"
+        }
+      },
+      visibleItems
+    )
+  );
+}
+export {
+  VirtualList
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/VirtualList.tsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  CSSProperties,\n  ReactNode,\n} from \"react\";\n\nexport interface VirtualListProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /** Fixed height of each item in pixels */\n  itemHeight: number;\n  /** Height of the scrollable container in pixels (default: 400) */\n  height?: number;\n  /** Width of the scrollable container (default: \"100%\") */\n  width?: number | string;\n  /** Number of extra items to render above/below the viewport (default: 5) */\n  overscan?: number;\n  /** Custom render function for each item */\n  renderItem?: (item: T, index: number) => ReactNode;\n  /** CSS class for the outer container */\n  className?: string;\n  /** Inline styles for the outer container */\n  style?: CSSProperties;\n}\n\nfunction defaultRenderItem<T>(item: T, index: number): ReactNode {\n  return <div>{String(item)}</div>;\n}\n\n/**\n * A virtualized list component that renders only the items visible\n * in the viewport, plus a configurable overscan buffer.\n */\nexport function VirtualList<T>({\n  items,\n  itemHeight,\n  height = 400,\n  width = \"100%\",\n  overscan = 5,\n  renderItem = defaultRenderItem,\n  className,\n  style,\n}: VirtualListProps<T>) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scrollTop, setScrollTop] = useState(0);\n  const rafRef = useRef<number | null>(null);\n\n  const totalHeight = items.length * itemHeight;\n\n  // Calculate visible range with overscan buffer\n  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n  const visibleCount = Math.ceil(height / itemHeight);\n  const endIndex = Math.min(\n    items.length,\n    Math.floor(scrollTop / itemHeight) + visibleCount + overscan\n  );\n\n  const handleScroll = useCallback(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Use rAF to throttle scroll updates for smooth performance\n    if (rafRef.current !== null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      setScrollTop(container.scrollTop);\n      rafRef.current = null;\n    });\n  }, []);\n\n  // Clean up rAF on unmount\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n    };\n  }, []);\n\n  // Build only the visible items\n  const visibleItems: ReactNode[] = [];\n  for (let i = startIndex; i < endIndex; i++) {\n    visibleItems.push(\n      <div\n        key={i}\n        style={{\n          position: \"absolute\",\n          top: i * itemHeight,\n          left: 0,\n          right: 0,\n          height: itemHeight,\n          overflow: \"hidden\",\n        }}\n      >\n        {renderItem(items[i], i)}\n      </div>\n    );\n  }\n\n  const containerStyle: CSSProperties = {\n    overflow: \"auto\",\n    height,\n    width,\n    position: \"relative\",\n    willChange: \"transform\",\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      onScroll={handleScroll}\n    >\n      {/* Spacer div to maintain correct scrollbar size */}\n      <div\n        style={{\n          height: totalHeight,\n          position: \"relative\",\n          width: \"100%\",\n        }}\n      >\n        {visibleItems}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAAA,OAAO;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAqBP,SAAS,kBAAqB,MAAS,OAA0B;AAC/D,SAAO,oCAAC,aAAK,OAAO,IAAI,CAAE;AAC5B;AAMO,SAAS,YAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,SAAS,OAAsB,IAAI;AAEzC,QAAM,cAAc,MAAM,SAAS;AAGnC,QAAM,aAAa,KAAK,IAAI,GAAG,KAAK,MAAM,YAAY,UAAU,IAAI,QAAQ;AAC5E,QAAM,eAAe,KAAK,KAAK,SAAS,UAAU;AAClD,QAAM,WAAW,KAAK;AAAA,IACpB,MAAM;AAAA,IACN,KAAK,MAAM,YAAY,UAAU,IAAI,eAAe;AAAA,EACtD;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAGhB,QAAI,OAAO,YAAY,MAAM;AAC3B,2BAAqB,OAAO,OAAO;AAAA,IACrC;AAEA,WAAO,UAAU,sBAAsB,MAAM;AAC3C,mBAAa,UAAU,SAAS;AAChC,aAAO,UAAU;AAAA,IACnB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,OAAO,YAAY,MAAM;AAC3B,6BAAqB,OAAO,OAAO;AAAA,MACrC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,eAA4B,CAAC;AACnC,WAAS,IAAI,YAAY,IAAI,UAAU,KAAK;AAC1C,iBAAa;AAAA,MACX;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACZ;AAAA;AAAA,QAEC,WAAW,MAAM,CAAC,GAAG,CAAC;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAgC;AAAA,IACpC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA;AAAA,IAGV;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,QACT;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EACF;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "ark-floating-scroll",
+  "version": "1.0.0",
+  "description": "A high-performance virtualized list component for React that renders only visible items",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "jest",
+    "demo": "vite examples",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "virtual-list",
+    "virtualized",
+    "scroll",
+    "performance",
+    "windowing"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "ts-jest": "^29.4.6",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}