@reforma/components 0.1.6 → 0.2.1

package/dist/Scrollable/Scrollable.d.ts

@@ -15,7 +15,6 @@ export type ScrollableProps = {
      * Prefer a child with `slot={SCROLLABLE_OVERLAY_SLOT}` (see {@link filterSlots}); this prop overrides that slot when set.
      */
     overlay?: React.ReactNode;
-    poolingInterval?: number;
     onScroll?: (e: Event) => void;
     alwaysShowScrollbar?: boolean;
     vertical?: boolean;
@@ -40,5 +39,5 @@ export type ScrollableProps = {
  * The same flags are available from {@link useScrollable}.
  * Overlay UI: pass a child with `slot={SCROLLABLE_OVERLAY_SLOT}`, or use the `overlay` prop.
  */
-export declare function Scrollable({ ref: userRef, children, className, containerClass, contentClass, containerRef, contentRef, overlay, onScroll, alwaysShowScrollbar, vertical, horizontal, poolingInterval, gap, stickToBottom, edgeFade, ...attrs }: ScrollableProps): import("react").JSX.Element;
+export declare function Scrollable({ ref: userRef, children, className, containerClass, contentClass, containerRef, contentRef, overlay, onScroll, alwaysShowScrollbar, vertical, horizontal, gap, stickToBottom, edgeFade, ...attrs }: ScrollableProps): import("react").JSX.Element;
 //# sourceMappingURL=Scrollable.d.ts.map

package/dist/Scrollable/Scrollable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollable.d.ts","sourceRoot":"","sources":["../../src/Scrollable/Scrollable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAA6B,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,iIAAiI;AACjI,eAAO,MAAM,uBAAuB,YAAY,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,oBAAoB,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAE3D;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACvB,GAAG,EAAE,OAAO,EACZ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACV,eAAe,EACf,GAAO,EACP,aAAqB,EACrB,QAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,+BAuJjB"}
+{"version":3,"file":"Scrollable.d.ts","sourceRoot":"","sources":["../../src/Scrollable/Scrollable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAA6B,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,iIAAiI;AACjI,eAAO,MAAM,uBAAuB,YAAY,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,oBAAoB,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAC;AAE3D;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACvB,GAAG,EAAE,OAAO,EACZ,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,OAAO,EACP,QAAQ,EACR,mBAAmB,EACnB,QAAQ,EACR,UAAU,EACV,GAAO,EACP,aAAqB,EACrB,QAAgB,EAChB,GAAG,KAAK,EACX,EAAE,eAAe,+BAyJjB"}

package/dist/Scrollable/Scrollable.js

@@ -1,17 +1,17 @@
-import { mergeRefs as v, cn as J } from "@reforma/lib";
-import { useMemo as t, useRef as K, useCallback as z } from "react";
-import { useStickToBottom as N } from "../hooks/useStickToBottom.js";
+import { mergeRefs as v, cn as G } from "@reforma/lib";
+import { useMemo as t, useRef as J, useCallback as z } from "react";
+import { useStickToBottom as K } from "../hooks/useStickToBottom.js";
 import { filterSlots as g } from "../Slot/Slot.js";
-import { ScrollableContext as Q } from "./scrollable-context.js";
-import U from "./Scrollable.module.css.js";
+import { ScrollableContext as N } from "./scrollable-context.js";
+import Q from "./Scrollable.module.css.js";
 import { elementScrollAxisSource as h } from "./scrollAxisSource.js";
-import { ScrollChromeBars as W } from "./ScrollChromeBars.js";
-import { ScrollChromeRoot as X } from "./ScrollChromeRoot.js";
-import { ScrollContainer as Z } from "./ScrollContainer.js";
-import { useScrollChrome as $ } from "./useScrollChrome.js";
-import { jsx as m, jsxs as tt } from "react/jsx-runtime";
+import { ScrollChromeBars as U } from "./ScrollChromeBars.js";
+import { ScrollChromeRoot as W } from "./ScrollChromeRoot.js";
+import { ScrollContainer as X } from "./ScrollContainer.js";
+import { useScrollChrome as Z } from "./useScrollChrome.js";
+import { jsx as m, jsxs as $ } from "react/jsx-runtime";
 const E = "overlay";
-function St({
+function mt({
   ref: H,
   children: a,
   className: V,
@@ -24,19 +24,26 @@ function St({
   alwaysShowScrollbar: L,
   vertical: O,
   horizontal: P,
-  poolingInterval: T,
-  gap: j = 0,
+  gap: T = 0,
   stickToBottom: r = !1,
-  edgeFade: A = !1,
-  ...M
+  edgeFade: j = !1,
+  ...A
 }) {
-  const w = t(() => g(a, E), [a]), B = t(() => g(a, (e) => e !== E, null), [a]), D = y ?? w, f = K(null), c = z(() => f.current, []), s = O ?? !0, i = P ?? !1, _ = t(() => s ? h(c, "vertical") : null, [c, s]), F = t(() => i ? h(c, "horizontal") : null, [c, i]), o = $({
-    verticalSource: _,
-    horizontalSource: F,
-    gap: j,
-    alwaysShowScrollbar: L,
-    poolingInterval: T
-  }), l = r !== !1, I = t(() => l ? typeof r == "object" && r !== null ? {
+  const M = t(() => g(a, E), [a]), w = t(() => g(a, (e) => e !== E, null), [a]), B = y ?? M, f = J(null), c = z(() => f.current, []), s = O ?? !0, i = P ?? !1, D = t(
+    // The getter is stored and called from effects, not during render.
+    // eslint-disable-next-line react-hooks/refs -- elementScrollAxisSource does not read `.current` now
+    () => s ? h(c, "vertical") : null,
+    [c, s]
+  ), _ = t(
+    // eslint-disable-next-line react-hooks/refs -- elementScrollAxisSource does not read `.current` now
+    () => i ? h(c, "horizontal") : null,
+    [c, i]
+  ), o = Z({
+    verticalSource: D,
+    horizontalSource: _,
+    gap: T,
+    alwaysShowScrollbar: L
+  }), l = r !== !1, F = t(() => l ? typeof r == "object" && r !== null ? {
     resize: "instant",
     ...r,
     enabled: r.enabled !== !1
@@ -47,7 +54,7 @@ function St({
   } : {
     enabled: !1,
     initial: !1
-  }, [l, r]), u = N(I), {
+  }, [l, r]), u = K(F), {
     scrollRef: b,
     contentRef: R
   } = u, {
@@ -55,7 +62,7 @@ function St({
   } = o, C = z(() => {
     const e = f.current;
     e && (e.scrollTop = 0);
-  }, []), Y = t(() => ({
+  }, []), I = t(() => ({
     stickToBottom: l ? u : null,
     scrollToTop: C,
     get atVerticalStart() {
@@ -70,39 +77,39 @@ function St({
     get atHorizontalEnd() {
       return n.current.atHorizontalEnd;
     }
-  }), [n, C, l, u]), q = t(() => v(f, S, b), [S, b]), G = t(() => v(d, R), [d, R]);
-  return /* @__PURE__ */ m(Q, {
-    value: Y,
-    children: /* @__PURE__ */ tt(X, {
-      ...M,
+  }), [n, C, l, u]), Y = t(() => v(f, S, b), [S, b]), q = t(() => v(d, R), [d, R]);
+  return /* @__PURE__ */ m(N, {
+    value: I,
+    children: /* @__PURE__ */ $(W, {
+      ...A,
       ref: H,
       rootRef: o.rootRef,
       className: V,
       vertical: s,
       horizontal: i,
-      edgeFade: A,
+      edgeFade: j,
       rootPointerHandlers: o.rootPointerHandlers,
-      children: [/* @__PURE__ */ m(Z, {
-        ref: q,
-        contentRef: G,
-        containerClass: J(l && U.containerStickToBottom, x),
+      children: [/* @__PURE__ */ m(X, {
+        ref: Y,
+        contentRef: q,
+        containerClass: G(l && Q.containerStickToBottom, x),
         contentClass: k,
         onScroll: p ? (e) => {
           p(e.nativeEvent);
         } : void 0,
-        children: B
-      }), /* @__PURE__ */ m(W, {
+        children: w
+      }), /* @__PURE__ */ m(U, {
         vertical: s,
         horizontal: i,
         setScrollbarV: o.setScrollbarV,
         setScrollbarH: o.setScrollbarH,
         onPointerDown: o.handlePointerDown
-      }), D]
+      }), B]
     })
   });
 }
 export {
   E as SCROLLABLE_OVERLAY_SLOT,
-  St as Scrollable
+  mt as Scrollable
 };
 //# sourceMappingURL=Scrollable.js.map

package/dist/Scrollable/Scrollable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrollable.js","sources":["../../src/Scrollable/Scrollable.tsx"],"sourcesContent":["import { cn, mergeRefs } from '@reforma/lib';\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport { useStickToBottom } from '../hooks/useStickToBottom';\nimport { filterSlots } from '../Slot';\nimport { ScrollableContext } from './scrollable-context';\nimport styles from './Scrollable.module.css';\nimport { elementScrollAxisSource } from './scrollAxisSource';\nimport { ScrollChromeBars } from './ScrollChromeBars';\nimport { ScrollChromeRoot } from './ScrollChromeRoot';\nimport { ScrollContainer } from './ScrollContainer';\nimport { useScrollChrome } from './useScrollChrome';\n\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport type { StickToBottomOptions } from '../hooks/useStickToBottom';\nimport type { ScrollableContextValue } from './scrollable-context';\n\n/** `slot` value for children rendered in the overlay layer (with {@link useScrollable}), same pattern as {@link filterSlots}. */\nexport const SCROLLABLE_OVERLAY_SLOT = 'overlay';\n\nexport type ScrollableProps = {\n    children?: React.ReactNode;\n\n    ref?: Ref<HTMLDivElement | null>;\n    containerRef?: Ref<HTMLDivElement | null>;\n    contentRef?: Ref<HTMLDivElement | null>;\n\n    className?: string;\n    containerClass?: string;\n    contentClass?: string;\n\n    /**\n     * Optional overlay region after the scroll container, inside `useScrollable` context.\n     * Prefer a child with `slot={SCROLLABLE_OVERLAY_SLOT}` (see {@link filterSlots}); this prop overrides that slot when set.\n     */\n    overlay?: React.ReactNode;\n    poolingInterval?: number;\n    onScroll?: (e: Event) => void;\n    alwaysShowScrollbar?: boolean;\n    vertical?: boolean;\n    horizontal?: boolean;\n    gap?: number;\n    /**\n     * Stick-to-bottom for the scrollport.\n     * The hook always mounts; refs are always attached. Activity is controlled by `enabled`:\n     * - `false` — inert (`enabled: false`), `useScrollable().stickToBottom` is `null`\n     * - `true` / options — active; pause with `enabled: false` or `setEnabled(false)` without tearing down refs\n     */\n    stickToBottom?: boolean | StickToBottomOptions;\n    edgeFade?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onScroll'>;\n\n/**\n * Custom scroll container with optional stick-to-bottom.\n *\n * The **root** element exposes scroll-edge hints when the corresponding axis is enabled:\n * - Vertical: `data-scroll-v-start`, `data-scroll-v-end` (near top / bottom).\n * - Horizontal: `data-scroll-h-start`, `data-scroll-h-end` (near left / right).\n * Values are booleans in React; in the DOM they appear as `\"true\"` / `\"false\"`.\n * The same flags are available from {@link useScrollable}.\n * Overlay UI: pass a child with `slot={SCROLLABLE_OVERLAY_SLOT}`, or use the `overlay` prop.\n */\nexport function Scrollable({\n    ref: userRef,\n    children,\n    className,\n    containerClass,\n    contentClass,\n    containerRef,\n    contentRef,\n    overlay,\n    onScroll,\n    alwaysShowScrollbar,\n    vertical,\n    horizontal,\n    poolingInterval,\n    gap = 0,\n    stickToBottom = false,\n    edgeFade = false,\n    ...attrs\n}: ScrollableProps) {\n    const overlayFromSlot = useMemo(\n        (): ReactNode => filterSlots(children, SCROLLABLE_OVERLAY_SLOT),\n        [children]\n    );\n\n    const scrollChildren = useMemo(\n        (): ReactNode => filterSlots(\n            children,\n            slot => slot !== SCROLLABLE_OVERLAY_SLOT,\n            null\n        ),\n        [children]\n    );\n\n    const overlayResolved = overlay ?? overlayFromSlot;\n\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n    const getScrollElement = useCallback(\n        () => scrollContainerRef.current,\n        []\n    );\n\n    const isVerticalEnabled = vertical ?? true;\n    const isHorizontalEnabled = horizontal ?? false;\n\n    const verticalSource = useMemo(\n        () => (isVerticalEnabled ? elementScrollAxisSource(getScrollElement, 'vertical') : null),\n        [getScrollElement, isVerticalEnabled]\n    );\n\n    const horizontalSource = useMemo(\n        () => (isHorizontalEnabled ? elementScrollAxisSource(getScrollElement, 'horizontal') : null),\n        [getScrollElement, isHorizontalEnabled]\n    );\n\n    const chrome = useScrollChrome({\n        verticalSource,\n        horizontalSource,\n        gap,\n        alwaysShowScrollbar,\n        poolingInterval,\n    });\n\n    // Hook always runs (Rules of Hooks). Behavior is gated by `enabled`, not by omitting refs:\n    // - `false` → enabled: false (inert listeners, no pin, context null)\n    // - `true` / options → active (options.enabled can still pause at runtime)\n    const stickConfigured = stickToBottom !== false;\n    const stickToBottomHookOptions = useMemo((): StickToBottomOptions => {\n        if (!stickConfigured) {\n            return { enabled: false, initial: false };\n        }\n\n        if (typeof stickToBottom === 'object' && stickToBottom !== null) {\n            return {\n                resize: 'instant',\n                ...stickToBottom,\n                enabled: stickToBottom.enabled !== false,\n            };\n        }\n\n        return { enabled: true, initial: 'instant', resize: 'instant' };\n    }, [stickConfigured, stickToBottom]);\n\n    const stickToBottomInstance = useStickToBottom(stickToBottomHookOptions);\n    const { scrollRef: stickScrollRef, contentRef: stickContentRef } = stickToBottomInstance;\n\n    const { edgesRef } = chrome;\n\n    const scrollToTop = useCallback(() => {\n        const el = scrollContainerRef.current;\n\n        if (el) {\n            el.scrollTop = 0;\n        }\n    }, []);\n\n    const scrollableContextValue = useMemo<ScrollableContextValue>(\n        () => ({\n            stickToBottom: stickConfigured ? stickToBottomInstance : null,\n            scrollToTop,\n            get atVerticalStart() {\n                return edgesRef.current.atVerticalStart;\n            },\n            get atVerticalEnd() {\n                return edgesRef.current.atVerticalEnd;\n            },\n            get atHorizontalStart() {\n                return edgesRef.current.atHorizontalStart;\n            },\n            get atHorizontalEnd() {\n                return edgesRef.current.atHorizontalEnd;\n            },\n        }),\n        [edgesRef, scrollToTop, stickConfigured, stickToBottomInstance]\n    );\n\n    // mergeRefs() returns a new callback every call — memoize so React does not\n    // detach/reattach stick listeners on every parent render (e.g. isAtBottom flips).\n    const containerMergedRef = useMemo(\n        () => mergeRefs<HTMLDivElement>(scrollContainerRef, containerRef, stickScrollRef),\n        [containerRef, stickScrollRef]\n    );\n\n    const contentMergedRef = useMemo(\n        () => mergeRefs<HTMLDivElement>(contentRef, stickContentRef),\n        [contentRef, stickContentRef]\n    );\n\n    return (\n        <ScrollableContext value={ scrollableContextValue }>\n            <ScrollChromeRoot\n                { ...attrs as HTMLAttributes<HTMLDivElement> }\n                ref={ userRef }\n                rootRef={ chrome.rootRef }\n                className={ className }\n                vertical={ isVerticalEnabled }\n                horizontal={ isHorizontalEnabled }\n                edgeFade={ edgeFade }\n                rootPointerHandlers={ chrome.rootPointerHandlers }\n            >\n                <ScrollContainer\n                    ref={ containerMergedRef }\n                    contentRef={ contentMergedRef }\n                    containerClass={ cn(\n                        stickConfigured && styles.containerStickToBottom,\n                        containerClass\n                    ) }\n                    contentClass={ contentClass }\n                    onScroll={ onScroll\n                        ? (e) => {\n                            onScroll(e.nativeEvent);\n                        }\n                        : undefined }\n                >\n                    { scrollChildren }\n                </ScrollContainer>\n\n                <ScrollChromeBars\n                    vertical={ isVerticalEnabled }\n                    horizontal={ isHorizontalEnabled }\n                    setScrollbarV={ chrome.setScrollbarV }\n                    setScrollbarH={ chrome.setScrollbarH }\n                    onPointerDown={ chrome.handlePointerDown }\n                />\n\n                { overlayResolved }\n            </ScrollChromeRoot>\n        </ScrollableContext>\n    );\n}\n"],"names":["SCROLLABLE_OVERLAY_SLOT","Scrollable","userRef","children","className","containerClass","contentClass","containerRef","contentRef","overlay","onScroll","alwaysShowScrollbar","vertical","horizontal","poolingInterval","gap","stickToBottom","edgeFade","attrs","overlayFromSlot","useMemo","filterSlots","scrollChildren","slot","overlayResolved","scrollContainerRef","useRef","getScrollElement","useCallback","isVerticalEnabled","isHorizontalEnabled","verticalSource","elementScrollAxisSource","horizontalSource","chrome","useScrollChrome","stickConfigured","stickToBottomHookOptions","stickToBottomInstance","useStickToBottom","stickScrollRef","stickContentRef","edgesRef","scrollToTop","el","scrollableContextValue","containerMergedRef","mergeRefs","contentMergedRef","ScrollableContext","ScrollChromeRoot","_jsx","ScrollContainer","cn","styles","ScrollChromeBars"],"mappings":"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"}
+{"version":3,"file":"Scrollable.js","sources":["../../src/Scrollable/Scrollable.tsx"],"sourcesContent":["import { cn, mergeRefs } from '@reforma/lib';\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport { useStickToBottom } from '../hooks/useStickToBottom';\nimport { filterSlots } from '../Slot';\nimport { ScrollableContext } from './scrollable-context';\nimport styles from './Scrollable.module.css';\nimport { elementScrollAxisSource } from './scrollAxisSource';\nimport { ScrollChromeBars } from './ScrollChromeBars';\nimport { ScrollChromeRoot } from './ScrollChromeRoot';\nimport { ScrollContainer } from './ScrollContainer';\nimport { useScrollChrome } from './useScrollChrome';\n\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport type { StickToBottomOptions } from '../hooks/useStickToBottom';\nimport type { ScrollableContextValue } from './scrollable-context';\n\n/** `slot` value for children rendered in the overlay layer (with {@link useScrollable}), same pattern as {@link filterSlots}. */\nexport const SCROLLABLE_OVERLAY_SLOT = 'overlay';\n\nexport type ScrollableProps = {\n    children?: React.ReactNode;\n\n    ref?: Ref<HTMLDivElement | null>;\n    containerRef?: Ref<HTMLDivElement | null>;\n    contentRef?: Ref<HTMLDivElement | null>;\n\n    className?: string;\n    containerClass?: string;\n    contentClass?: string;\n\n    /**\n     * Optional overlay region after the scroll container, inside `useScrollable` context.\n     * Prefer a child with `slot={SCROLLABLE_OVERLAY_SLOT}` (see {@link filterSlots}); this prop overrides that slot when set.\n     */\n    overlay?: React.ReactNode;\n    onScroll?: (e: Event) => void;\n    alwaysShowScrollbar?: boolean;\n    vertical?: boolean;\n    horizontal?: boolean;\n    gap?: number;\n    /**\n     * Stick-to-bottom for the scrollport.\n     * The hook always mounts; refs are always attached. Activity is controlled by `enabled`:\n     * - `false` — inert (`enabled: false`), `useScrollable().stickToBottom` is `null`\n     * - `true` / options — active; pause with `enabled: false` or `setEnabled(false)` without tearing down refs\n     */\n    stickToBottom?: boolean | StickToBottomOptions;\n    edgeFade?: boolean;\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onScroll'>;\n\n/**\n * Custom scroll container with optional stick-to-bottom.\n *\n * The **root** element exposes scroll-edge hints when the corresponding axis is enabled:\n * - Vertical: `data-scroll-v-start`, `data-scroll-v-end` (near top / bottom).\n * - Horizontal: `data-scroll-h-start`, `data-scroll-h-end` (near left / right).\n * Values are booleans in React; in the DOM they appear as `\"true\"` / `\"false\"`.\n * The same flags are available from {@link useScrollable}.\n * Overlay UI: pass a child with `slot={SCROLLABLE_OVERLAY_SLOT}`, or use the `overlay` prop.\n */\nexport function Scrollable({\n    ref: userRef,\n    children,\n    className,\n    containerClass,\n    contentClass,\n    containerRef,\n    contentRef,\n    overlay,\n    onScroll,\n    alwaysShowScrollbar,\n    vertical,\n    horizontal,\n    gap = 0,\n    stickToBottom = false,\n    edgeFade = false,\n    ...attrs\n}: ScrollableProps) {\n    const overlayFromSlot = useMemo(\n        (): ReactNode => filterSlots(children, SCROLLABLE_OVERLAY_SLOT),\n        [children]\n    );\n\n    const scrollChildren = useMemo(\n        (): ReactNode => filterSlots(\n            children,\n            slot => slot !== SCROLLABLE_OVERLAY_SLOT,\n            null\n        ),\n        [children]\n    );\n\n    const overlayResolved = overlay ?? overlayFromSlot;\n\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n    const getScrollElement = useCallback(\n        () => scrollContainerRef.current,\n        []\n    );\n\n    const isVerticalEnabled = vertical ?? true;\n    const isHorizontalEnabled = horizontal ?? false;\n\n    const verticalSource = useMemo(\n        // The getter is stored and called from effects, not during render.\n        // eslint-disable-next-line react-hooks/refs -- elementScrollAxisSource does not read `.current` now\n        () => (isVerticalEnabled ? elementScrollAxisSource(getScrollElement, 'vertical') : null),\n        [getScrollElement, isVerticalEnabled]\n    );\n\n    const horizontalSource = useMemo(\n        // eslint-disable-next-line react-hooks/refs -- elementScrollAxisSource does not read `.current` now\n        () => (isHorizontalEnabled ? elementScrollAxisSource(getScrollElement, 'horizontal') : null),\n        [getScrollElement, isHorizontalEnabled]\n    );\n\n    const chrome = useScrollChrome({\n        verticalSource,\n        horizontalSource,\n        gap,\n        alwaysShowScrollbar,\n    });\n\n    // Hook always runs (Rules of Hooks). Behavior is gated by `enabled`, not by omitting refs:\n    // - `false` → enabled: false (inert listeners, no pin, context null)\n    // - `true` / options → active (options.enabled can still pause at runtime)\n    const stickConfigured = stickToBottom !== false;\n    const stickToBottomHookOptions = useMemo((): StickToBottomOptions => {\n        if (!stickConfigured) {\n            return { enabled: false, initial: false };\n        }\n\n        if (typeof stickToBottom === 'object' && stickToBottom !== null) {\n            return {\n                resize: 'instant',\n                ...stickToBottom,\n                enabled: stickToBottom.enabled !== false,\n            };\n        }\n\n        return { enabled: true, initial: 'instant', resize: 'instant' };\n    }, [stickConfigured, stickToBottom]);\n\n    const stickToBottomInstance = useStickToBottom(stickToBottomHookOptions);\n    const { scrollRef: stickScrollRef, contentRef: stickContentRef } = stickToBottomInstance;\n\n    const { edgesRef } = chrome;\n\n    const scrollToTop = useCallback(() => {\n        const el = scrollContainerRef.current;\n\n        if (el) {\n            el.scrollTop = 0;\n        }\n    }, []);\n\n    const scrollableContextValue = useMemo<ScrollableContextValue>(\n        () => ({\n            stickToBottom: stickConfigured ? stickToBottomInstance : null,\n            scrollToTop,\n            get atVerticalStart() {\n                return edgesRef.current.atVerticalStart;\n            },\n            get atVerticalEnd() {\n                return edgesRef.current.atVerticalEnd;\n            },\n            get atHorizontalStart() {\n                return edgesRef.current.atHorizontalStart;\n            },\n            get atHorizontalEnd() {\n                return edgesRef.current.atHorizontalEnd;\n            },\n        }),\n        [edgesRef, scrollToTop, stickConfigured, stickToBottomInstance]\n    );\n\n    // mergeRefs() returns a new callback every call — memoize so React does not\n    // detach/reattach stick listeners on every parent render (e.g. isAtBottom flips).\n    const containerMergedRef = useMemo(\n        () => mergeRefs<HTMLDivElement>(scrollContainerRef, containerRef, stickScrollRef),\n        [containerRef, stickScrollRef]\n    );\n\n    const contentMergedRef = useMemo(\n        () => mergeRefs<HTMLDivElement>(contentRef, stickContentRef),\n        [contentRef, stickContentRef]\n    );\n\n    return (\n        <ScrollableContext value={ scrollableContextValue }>\n            <ScrollChromeRoot\n                { ...attrs as HTMLAttributes<HTMLDivElement> }\n                ref={ userRef }\n                rootRef={ chrome.rootRef }\n                className={ className }\n                vertical={ isVerticalEnabled }\n                horizontal={ isHorizontalEnabled }\n                edgeFade={ edgeFade }\n                rootPointerHandlers={ chrome.rootPointerHandlers }\n            >\n                <ScrollContainer\n                    ref={ containerMergedRef }\n                    contentRef={ contentMergedRef }\n                    containerClass={ cn(\n                        stickConfigured && styles.containerStickToBottom,\n                        containerClass\n                    ) }\n                    contentClass={ contentClass }\n                    onScroll={ onScroll\n                        ? (e) => {\n                            onScroll(e.nativeEvent);\n                        }\n                        : undefined }\n                >\n                    { scrollChildren }\n                </ScrollContainer>\n\n                <ScrollChromeBars\n                    vertical={ isVerticalEnabled }\n                    horizontal={ isHorizontalEnabled }\n                    setScrollbarV={ chrome.setScrollbarV }\n                    setScrollbarH={ chrome.setScrollbarH }\n                    onPointerDown={ chrome.handlePointerDown }\n                />\n\n                { overlayResolved }\n            </ScrollChromeRoot>\n        </ScrollableContext>\n    );\n}\n"],"names":["SCROLLABLE_OVERLAY_SLOT","Scrollable","userRef","children","className","containerClass","contentClass","containerRef","contentRef","overlay","onScroll","alwaysShowScrollbar","vertical","horizontal","gap","stickToBottom","edgeFade","attrs","overlayFromSlot","useMemo","filterSlots","scrollChildren","slot","overlayResolved","scrollContainerRef","useRef","getScrollElement","useCallback","isVerticalEnabled","isHorizontalEnabled","verticalSource","elementScrollAxisSource","horizontalSource","chrome","useScrollChrome","stickConfigured","stickToBottomHookOptions","stickToBottomInstance","useStickToBottom","stickScrollRef","stickContentRef","edgesRef","scrollToTop","el","scrollableContextValue","containerMergedRef","mergeRefs","contentMergedRef","ScrollableContext","ScrollChromeRoot","_jsx","ScrollContainer","cn","styles","ScrollChromeBars"],"mappings":"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"}

package/dist/Scrollable/useScrollChrome.d.ts

@@ -15,7 +15,6 @@ export type UseScrollChromeOptions = {
     sourceKey?: unknown;
     gap?: number;
     alwaysShowScrollbar?: boolean;
-    poolingInterval?: number;
 };
 export type UseScrollChromeResult = {
     rootRef: React.RefObject<HTMLDivElement | null>;
@@ -34,5 +33,5 @@ export type UseScrollChromeResult = {
  * Custom scrollbar chrome driven by direct DOM updates — no React state on scroll.
  * Shared by {@link Scrollable} and app-local scroll chrome (e.g. layers tree, frame page).
  */
-export declare function useScrollChrome({ verticalSource, horizontalSource, sourceKey, gap, alwaysShowScrollbar, poolingInterval, }: UseScrollChromeOptions): UseScrollChromeResult;
+export declare function useScrollChrome({ verticalSource, horizontalSource, sourceKey, gap, alwaysShowScrollbar, }: UseScrollChromeOptions): UseScrollChromeResult;
 //# sourceMappingURL=useScrollChrome.d.ts.map

package/dist/Scrollable/useScrollChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollChrome.d.ts","sourceRoot":"","sources":["../../src/Scrollable/useScrollChrome.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,cAAc,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,6EAA6E;IAC7E,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE;QACjB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;CACL,CAAC;AA0FF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC5B,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,GAAO,EACP,mBAAmB,EACnB,eAAe,GAClB,EAAE,sBAAsB,GAAG,qBAAqB,CAsRhD"}
+{"version":3,"file":"useScrollChrome.d.ts","sourceRoot":"","sources":["../../src/Scrollable/useScrollChrome.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,MAAM,MAAM,iBAAiB,GAAG;IAC5B,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,cAAc,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACzC,gBAAgB,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC3C;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC7C,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,6EAA6E;IAC7E,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE;QACjB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;CACL,CAAC;AAuFF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC5B,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,GAAO,EACP,mBAAmB,GACtB,EAAE,sBAAsB,GAAG,qBAAqB,CA0ShD"}

package/dist/Scrollable/useScrollChrome.js

@@ -1,177 +1,192 @@
-import { useRef as a, useCallback as g, useMemo as q, useLayoutEffect as L, useEffect as C } from "react";
+import { useRef as p, useCallback as h, useMemo as X, useLayoutEffect as C, useEffect as Y } from "react";
 import H from "./Scrollable.module.css.js";
-const N = {
+const _ = {
   start: "atVerticalStart",
   end: "atVerticalEnd",
   startAttr: "data-scroll-v-start",
   endAttr: "data-scroll-v-end",
   showAttr: "data-scroll-show-v"
-}, Z = {
+}, $ = {
   start: "atHorizontalStart",
   end: "atHorizontalEnd",
   startAttr: "data-scroll-h-start",
   endAttr: "data-scroll-h-end",
   showAttr: "data-scroll-show-h"
 };
-function I(n, o, c) {
-  o[c.start] = !1, o[c.end] = !1, n && (n.removeAttribute(c.startAttr), n.removeAttribute(c.endAttr), n.removeAttribute(c.showAttr));
+function x(r, c, i) {
+  c[i.start] = !1, c[i.end] = !1, r && (r.removeAttribute(i.startAttr), r.removeAttribute(i.endAttr), r.removeAttribute(i.showAttr));
 }
-function x(n, o, c, m, b, l, z) {
-  if (!o) {
-    I(n, b, l);
+function I(r, c, i, d, m, S) {
+  if (!c) {
+    x(r, d, m);
     return;
   }
-  const p = o.getMetrics();
-  if (!p || p.clientSize <= 0 || p.scrollSize <= 0) {
-    I(n, b, l);
+  const A = c.getMetrics();
+  if (!A || A.clientSize <= 0 || A.scrollSize <= 0) {
+    x(r, d, m);
     return;
   }
   const {
-    offset: S,
-    scrollSize: h,
-    clientSize: A
-  } = p, R = 1, f = z / A * 100, w = A / h * 100 - f * 2, O = S / h * 100 + f, i = w < 100 - f * 2, v = i ? S <= R : !0, E = i ? S + A >= h - R : !0;
-  m.current = h, c && (c.style.setProperty("--ms-thumb-length", `${w}%`), c.style.setProperty("--ms-thumb-offset", `${O}%`)), b[l.start] = v, b[l.end] = E, n && (n.setAttribute(l.startAttr, String(v)), n.setAttribute(l.endAttr, String(E)), n.setAttribute(l.showAttr, i ? "true" : "false"));
+    offset: E,
+    scrollSize: O,
+    clientSize: g
+  } = A, b = 1, v = S / g * 100, w = g / O * 100 - v * 2, R = E / O * 100 + v, D = w < 100 - v * 2, f = D ? E <= b : !0, l = D ? E + g >= O - b : !0;
+  i && (i.style.setProperty("--ms-thumb-length", `${w}%`), i.style.setProperty("--ms-thumb-offset", `${R}%`)), d[m.start] = f, d[m.end] = l, r && (r.setAttribute(m.startAttr, String(f)), r.setAttribute(m.endAttr, String(l)), r.setAttribute(m.showAttr, D ? "true" : "false"));
 }
-function Q({
-  verticalSource: n,
-  horizontalSource: o,
-  sourceKey: c,
-  gap: m = 0,
-  alwaysShowScrollbar: b,
-  poolingInterval: l
+function Z({
+  verticalSource: r,
+  horizontalSource: c,
+  sourceKey: i,
+  gap: d = 0,
+  alwaysShowScrollbar: m
 }) {
-  const z = a(null), p = a(null), S = a(null), h = a({
+  const S = p(null), A = p(null), E = p(null), O = p({
     atVerticalStart: !0,
     atVerticalEnd: !0,
     atHorizontalStart: !0,
     atHorizontalEnd: !0
-  }), A = a(null), R = a(!1), f = a(null), w = a(0), O = a(0), i = a({
+  }), g = p(null), b = p({
     hovered: !1,
     dragging: !1
-  }), v = a(n), E = a(o);
-  v.current = n, E.current = o;
-  const F = g((t) => {
-    p.current = t;
-  }, []), G = g((t) => {
-    S.current = t;
-  }, []), d = g(() => {
-    const t = z.current;
+  }), v = p(r), w = p(c);
+  v.current = r, w.current = c;
+  const R = h((t) => {
+    A.current = t;
+  }, []), D = h((t) => {
+    E.current = t;
+  }, []), f = h(() => {
+    const t = S.current;
     if (!t)
       return;
     const {
       hovered: e,
-      dragging: s
-    } = i.current;
-    t.classList.toggle(H.hover, b || e), t.classList.toggle(H.inDrag, s);
-  }, [b]), u = g(() => {
-    R.current = !1;
-    const t = z.current, e = h.current;
-    x(t, v.current, p.current, w, e, N, m), x(t, E.current, S.current, O, e, Z, m);
-  }, [m]), M = g((t, e) => {
-    const s = e ? v.current : E.current, r = s?.getMetrics();
-    !s || !r || r.clientSize <= 0 || (t.preventDefault(), t.stopPropagation(), f.current = {
-      source: s,
+      dragging: n
+    } = b.current;
+    t.classList.toggle(H.hover, m || e), t.classList.toggle(H.inDrag, n);
+  }, [m]), l = h(() => {
+    const t = S.current, e = O.current;
+    I(t, v.current, A.current, e, _, d), I(t, w.current, E.current, e, $, d);
+  }, [d]), V = h((t, e) => {
+    const n = e ? v.current : w.current, s = n?.getMetrics();
+    !n || !s || s.clientSize <= 0 || (t.preventDefault(), t.stopPropagation(), g.current = {
+      source: n,
       isVertical: e,
-      fromScrollOffset: r.offset,
-      fromScrollSize: r.scrollSize,
+      fromScrollOffset: s.offset,
+      fromScrollSize: s.scrollSize,
       fromOffset: e ? t.screenY : t.screenX,
-      totalDistance: r.clientSize - m * 2
+      totalDistance: s.clientSize - d * 2
     });
-  }, [m]), P = g((t) => {
-    const e = f.current;
+  }, [d]), L = h((t) => {
+    const e = g.current;
     if (!e || e.totalDistance === 0)
       return;
     t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation();
     const {
-      source: s,
-      isVertical: r,
-      fromOffset: D,
-      fromScrollOffset: X,
-      fromScrollSize: Y,
-      totalDistance: _
-    } = e, $ = ((r ? t.screenY : t.screenX) - D) / _;
-    s.setOffset(X + Y * $);
-  }, []), V = g((t) => {
-    t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), f.current = null;
-  }, []), T = g((t) => {
+      source: n,
+      isVertical: s,
+      fromOffset: u,
+      fromScrollOffset: a,
+      fromScrollSize: o,
+      totalDistance: P
+    } = e, T = ((s ? t.screenY : t.screenX) - u) / P;
+    n.setOffset(a + o * T);
+  }, []), M = h((t) => {
+    t.preventDefault(), t.stopPropagation(), t.stopImmediatePropagation(), g.current = null;
+  }, []), F = h((t) => {
     const e = t.target.classList.contains(H.scrollbarV);
-    M(t, e), i.current.dragging = !0, d();
-    const s = new AbortController();
-    document.addEventListener("pointermove", (r) => {
-      P(r);
+    V(t, e), b.current.dragging = !0, f();
+    const n = new AbortController();
+    document.addEventListener("pointermove", (s) => {
+      L(s);
     }, {
-      signal: s.signal,
+      signal: n.signal,
       capture: !0
-    }), document.addEventListener("pointerup", (r) => {
-      s.abort(), P(r), V(r), i.current.dragging = !1, d();
+    }), document.addEventListener("pointerup", (s) => {
+      n.abort(), L(s), M(s), b.current.dragging = !1, f();
     }, {
-      signal: s.signal,
+      signal: n.signal,
       capture: !0
     });
-  }, [M, P, V, d]), U = q(() => ({
+  }, [V, L, M, f]), G = X(() => ({
     onPointerEnter: () => {
-      i.current.hovered = !0, d();
+      b.current.hovered = !0, f();
     },
     onPointerLeave: () => {
-      i.current.hovered = !1, d();
+      b.current.hovered = !1, f();
     }
-  }), [d]);
-  return L(() => {
-    d();
-  }, [d]), L(() => {
-    u();
-  }, [u, c, n, o]), L(() => {
+  }), [f]);
+  return C(() => {
+    f();
+  }, [f]), C(() => {
+    l();
+  }, [l, i, r, c]), C(() => {
     if (typeof ResizeObserver > "u")
       return;
-    const t = /* @__PURE__ */ new Set(), e = new ResizeObserver(() => u());
-    for (const s of [n, o]) {
-      const r = s?.getObserveElement?.();
-      r && !t.has(r) && (t.add(r), e.observe(r));
+    const t = /* @__PURE__ */ new Set(), e = new ResizeObserver(() => l()), n = [], s = () => {
+      const a = /* @__PURE__ */ new Set();
+      for (const o of [r, c]) {
+        const P = o?.getObserveElement?.();
+        if (!P)
+          continue;
+        a.add(P);
+        const z = P.firstElementChild;
+        z && a.add(z);
+      }
+      for (const o of t)
+        a.has(o) || (e.unobserve(o), t.delete(o));
+      for (const o of a)
+        t.has(o) || (t.add(o), e.observe(o));
+    };
+    s();
+    for (const a of [r, c]) {
+      const o = a?.getObserveElement?.();
+      o && !n.includes(o) && n.push(o);
     }
+    const u = typeof MutationObserver > "u" ? null : new MutationObserver(() => {
+      s(), l();
+    });
+    for (const a of n)
+      u?.observe(a, {
+        childList: !0
+      });
     if (t.size === 0) {
-      e.disconnect();
+      e.disconnect(), u?.disconnect();
       return;
     }
     return () => {
-      e.disconnect();
+      e.disconnect(), u?.disconnect();
     };
-  }, [u, c, n, o]), C(() => {
-    const t = [], e = /* @__PURE__ */ new Set(), s = () => {
-      u(), requestAnimationFrame(() => {
-        R.current = !0;
-      });
+  }, [l, i, r, c]), Y(() => {
+    const t = [], e = /* @__PURE__ */ new Set();
+    let n = 0;
+    const s = () => {
+      l(), cancelAnimationFrame(n), n = requestAnimationFrame(() => l());
     };
-    for (const r of [n, o]) {
-      if (!r?.subscribe)
+    for (const u of [r, c]) {
+      if (!u?.subscribe)
         continue;
-      const D = r.getObserveElement?.();
-      if (D) {
-        if (e.has(D))
+      const a = u.getObserveElement?.();
+      if (a) {
+        if (e.has(a))
           continue;
-        e.add(D);
+        e.add(a);
       }
-      t.push(r.subscribe(s));
+      t.push(u.subscribe(s));
     }
     return () => {
-      t.forEach((r) => r());
+      cancelAnimationFrame(n), t.forEach((u) => u()), g.current = null;
     };
-  }, [u, c, n, o]), C(() => (A.current = setInterval(() => {
-    const t = v.current?.getMetrics(), e = E.current?.getMetrics();
-    (R.current || t != null && t.scrollSize !== w.current || e != null && e.scrollSize !== O.current) && u();
-  }, l ?? 100), () => {
-    A.current && clearInterval(A.current), f.current = null;
-  }), [u, l]), {
-    rootRef: z,
-    edgesRef: h,
-    setScrollbarV: F,
-    setScrollbarH: G,
-    redraw: u,
-    handlePointerDown: T,
-    rootPointerHandlers: U
+  }, [l, i, r, c]), {
+    rootRef: S,
+    edgesRef: O,
+    setScrollbarV: R,
+    setScrollbarH: D,
+    redraw: l,
+    handlePointerDown: F,
+    rootPointerHandlers: G
   };
 }
 export {
-  Q as useScrollChrome
+  Z as useScrollChrome
 };
 //# sourceMappingURL=useScrollChrome.js.map