@dxos/react-hooks 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"src/useAsyncEffect.ts":{"bytes":2988,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useAsyncState.ts":{"bytes":2577,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useControlledState.ts":{"bytes":2462,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDebugDeps.ts":{"bytes":3041,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaultValue.ts":{"bytes":4033,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaults.ts":{"bytes":1591,"imports":[{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDynamicRef.ts":{"bytes":3728,"imports":[{"path":"@preact-signals/safe-react/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useFileDownload.ts":{"bytes":2671,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useForwardedRef.ts":{"bytes":2045,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useId.ts":{"bytes":2466,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useIsFocused.ts":{"bytes":3909,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMediaQuery.ts":{"bytes":9396,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMulticastObservable.ts":{"bytes":2972,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useRefCallback.ts":{"bytes":1818,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useResize.ts":{"bytes":2826,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useSignals.ts":{"bytes":2923,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTimeout.ts":{"bytes":3956,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTrackProps.ts":{"bytes":3997,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true}],"format":"esm"},"src/useTransitions.ts":{"bytes":7750,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":2309,"imports":[{"path":"src/useAsyncEffect.ts","kind":"import-statement","original":"./useAsyncEffect"},{"path":"src/useAsyncState.ts","kind":"import-statement","original":"./useAsyncState"},{"path":"src/useControlledState.ts","kind":"import-statement","original":"./useControlledState"},{"path":"src/useDebugDeps.ts","kind":"import-statement","original":"./useDebugDeps"},{"path":"src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"src/useDefaults.ts","kind":"import-statement","original":"./useDefaults"},{"path":"src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"},{"path":"src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"src/useMulticastObservable.ts","kind":"import-statement","original":"./useMulticastObservable"},{"path":"src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"},{"path":"src/useResize.ts","kind":"import-statement","original":"./useResize"},{"path":"src/useSignals.ts","kind":"import-statement","original":"./useSignals"},{"path":"src/useTimeout.ts","kind":"import-statement","original":"./useTimeout"},{"path":"src/useTrackProps.ts","kind":"import-statement","original":"./useTrackProps"},{"path":"src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33287},"dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/log","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["makeId","randomString","useAsyncEffect","useAsyncState","useControlledState","useDebugDeps","useDefaultValue","useDefaults","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useInterval","useIsFocused","useMediaQuery","useMulticastObservable","useOnTransition","useRefCallback","useResize","useSignalsEffect","useSignalsMemo","useStateWithRef","useTimeout","useTrackProps"],"entryPoint":"src/index.ts","inputs":{"src/useAsyncEffect.ts":{"bytesInOutput":405},"src/index.ts":{"bytesInOutput":0},"src/useAsyncState.ts":{"bytesInOutput":447},"src/useControlledState.ts":{"bytesInOutput":463},"src/useDebugDeps.ts":{"bytesInOutput":606},"src/useDefaultValue.ts":{"bytesInOutput":422},"src/useDefaults.ts":{"bytesInOutput":228},"src/useDynamicRef.ts":{"bytesInOutput":779},"src/useFileDownload.ts":{"bytesInOutput":416},"src/useForwardedRef.ts":{"bytesInOutput":343},"src/useId.ts":{"bytesInOutput":403},"src/useIsFocused.ts":{"bytesInOutput":833},"src/useMediaQuery.ts":{"bytesInOutput":1940},"src/useMulticastObservable.ts":{"bytesInOutput":368},"src/useRefCallback.ts":{"bytesInOutput":197},"src/useResize.ts":{"bytesInOutput":619},"src/useSignals.ts":{"bytesInOutput":664},"src/useTimeout.ts":{"bytesInOutput":946},"src/useTrackProps.ts":{"bytesInOutput":964},"src/useTransitions.ts":{"bytesInOutput":1406}},"bytes":13399}}}
+{"inputs":{"src/useAsyncEffect.ts":{"bytes":2988,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useAsyncState.ts":{"bytes":2577,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDynamicRef.ts":{"bytes":3589,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useControlledState.ts":{"bytes":3865,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"}],"format":"esm"},"src/useDebugDeps.ts":{"bytes":3142,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaultValue.ts":{"bytes":4033,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useDefaults.ts":{"bytes":1591,"imports":[{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useFileDownload.ts":{"bytes":2671,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useForwardedRef.ts":{"bytes":6067,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useId.ts":{"bytes":2466,"imports":[{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useIsFocused.ts":{"bytes":3921,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMediaQuery.ts":{"bytes":9256,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useMulticastObservable.ts":{"bytes":2972,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useRefCallback.ts":{"bytes":1818,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useViewportResize.ts":{"bytes":2878,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useSignals.ts":{"bytes":2776,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTimeout.ts":{"bytes":3956,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/useTransitions.ts":{"bytes":7863,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":2454,"imports":[{"path":"src/useAsyncEffect.ts","kind":"import-statement","original":"./useAsyncEffect"},{"path":"src/useAsyncState.ts","kind":"import-statement","original":"./useAsyncState"},{"path":"src/useControlledState.ts","kind":"import-statement","original":"./useControlledState"},{"path":"src/useDebugDeps.ts","kind":"import-statement","original":"./useDebugDeps"},{"path":"src/useDefaultValue.ts","kind":"import-statement","original":"./useDefaultValue"},{"path":"src/useDefaults.ts","kind":"import-statement","original":"./useDefaults"},{"path":"src/useDynamicRef.ts","kind":"import-statement","original":"./useDynamicRef"},{"path":"src/useFileDownload.ts","kind":"import-statement","original":"./useFileDownload"},{"path":"src/useForwardedRef.ts","kind":"import-statement","original":"./useForwardedRef"},{"path":"src/useId.ts","kind":"import-statement","original":"./useId"},{"path":"src/useIsFocused.ts","kind":"import-statement","original":"./useIsFocused"},{"path":"src/useMediaQuery.ts","kind":"import-statement","original":"./useMediaQuery"},{"path":"src/useMulticastObservable.ts","kind":"import-statement","original":"./useMulticastObservable"},{"path":"src/useRefCallback.ts","kind":"import-statement","original":"./useRefCallback"},{"path":"src/useViewportResize.ts","kind":"import-statement","original":"./useViewportResize"},{"path":"src/useSignals.ts","kind":"import-statement","original":"./useSignals"},{"path":"src/useTimeout.ts","kind":"import-statement","original":"./useTimeout"},{"path":"src/useTransitions.ts","kind":"import-statement","original":"./useTransitions"},{"path":"mini-virtual-list","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":34987},"dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"lodash.defaultsdeep","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"alea","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"mini-virtual-list","kind":"import-statement","external":true}],"exports":["makeId","mergeRefs","randomString","setRef","useAsyncEffect","useAsyncState","useControlledState","useDebugDeps","useDefaultValue","useDefaults","useDidTransition","useDynamicRef","useFileDownload","useForwardedRef","useId","useInterval","useIsFocused","useMediaQuery","useMergeRefs","useMulticastObservable","useOnTransition","useRefCallback","useScroller","useSignalsEffect","useSignalsMemo","useSize","useStateWithRef","useTimeout","useViewportResize"],"entryPoint":"src/index.ts","inputs":{"src/useAsyncEffect.ts":{"bytesInOutput":405},"src/index.ts":{"bytesInOutput":58},"src/useAsyncState.ts":{"bytesInOutput":447},"src/useControlledState.ts":{"bytesInOutput":761},"src/useDynamicRef.ts":{"bytesInOutput":727},"src/useDebugDeps.ts":{"bytesInOutput":643},"src/useDefaultValue.ts":{"bytesInOutput":422},"src/useDefaults.ts":{"bytesInOutput":228},"src/useFileDownload.ts":{"bytesInOutput":416},"src/useForwardedRef.ts":{"bytesInOutput":827},"src/useId.ts":{"bytesInOutput":403},"src/useIsFocused.ts":{"bytesInOutput":833},"src/useMediaQuery.ts":{"bytesInOutput":1941},"src/useMulticastObservable.ts":{"bytesInOutput":368},"src/useRefCallback.ts":{"bytesInOutput":197},"src/useViewportResize.ts":{"bytesInOutput":627},"src/useSignals.ts":{"bytesInOutput":613},"src/useTimeout.ts":{"bytesInOutput":946},"src/useTransitions.ts":{"bytesInOutput":1409}},"bytes":13307}}}

package/dist/lib/node-esm/index.mjs

@@ -43,40 +43,78 @@ var useAsyncState = (cb, deps = []) => {
 };
 
 // src/useControlledState.ts
-import { useEffect as useEffect3, useState as useState2 } from "react";
-var useControlledState = (controlledValue, onChange, ...deps) => {
-  const [value, setValue] = useState2(controlledValue);
-  useEffect3(() => {
-    if (controlledValue !== void 0) {
-      setValue(controlledValue);
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2, useState as useState3 } from "react";
+
+// src/useDynamicRef.ts
+import { useCallback, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+var useStateWithRef = (valueParam) => {
+  const [value, setValue] = useState2(valueParam);
+  const valueRef = useRef(valueParam);
+  const setter = useCallback((value2) => {
+    if (typeof value2 === "function") {
+      setValue((current) => {
+        valueRef.current = value2(current);
+        return valueRef.current;
+      });
+    } else {
+      valueRef.current = value2;
+      setValue(value2);
     }
+  }, []);
+  return [
+    value,
+    setter,
+    valueRef
+  ];
+};
+var useDynamicRef = (value) => {
+  const valueRef = useRef(value);
+  useEffect3(() => {
+    valueRef.current = value;
   }, [
-    controlledValue,
-    ...deps
+    value
   ]);
-  useEffect3(() => {
-    onChange?.(value);
+  return valueRef;
+};
+
+// src/useControlledState.ts
+var useControlledState = (valueParam, onChange) => {
+  const [value, setControlledValue] = useState3(valueParam);
+  useEffect4(() => {
+    setControlledValue(valueParam);
   }, [
-    value,
-    onChange
+    valueParam
+  ]);
+  const onChangeRef = useRef2(onChange);
+  const valueRef = useDynamicRef(valueParam);
+  const setValue = useCallback2((nextValue) => {
+    const value2 = isFunction(nextValue) ? nextValue(valueRef.current) : nextValue;
+    setControlledValue(value2);
+    onChangeRef.current?.(value2);
+  }, [
+    valueRef,
+    onChangeRef
   ]);
   return [
     value,
     setValue
   ];
 };
+function isFunction(value) {
+  return typeof value === "function";
+}
 
 // src/useDebugDeps.ts
-import { useEffect as useEffect4, useRef } from "react";
-var useDebugDeps = (deps = []) => {
-  const lastDeps = useRef([]);
-  useEffect4(() => {
+import { useEffect as useEffect5, useRef as useRef3 } from "react";
+var useDebugDeps = (deps = [], active = true) => {
+  const lastDeps = useRef3([]);
+  useEffect5(() => {
     console.group("deps changed", {
       previous: lastDeps.current.length,
       current: deps.length
     });
     for (let i = 0; i < Math.max(lastDeps.current.length ?? 0, deps.length ?? 0); i++) {
-      if (lastDeps.current[i] !== deps[i]) {
+      if (lastDeps.current[i] !== deps[i] && active) {
         console.log("changed", {
           index: i,
           previous: lastDeps.current[i],
@@ -90,11 +128,11 @@ var useDebugDeps = (deps = []) => {
 };
 
 // src/useDefaultValue.ts
-import { useEffect as useEffect5, useMemo, useState as useState3 } from "react";
+import { useEffect as useEffect6, useMemo, useState as useState4 } from "react";
 var useDefaultValue = (reactiveValue, getDefaultValue) => {
   const stableDefaultValue = useMemo(getDefaultValue, []);
-  const [value, setValue] = useState3(reactiveValue ?? stableDefaultValue);
-  useEffect5(() => {
+  const [value, setValue] = useState4(reactiveValue ?? stableDefaultValue);
+  useEffect6(() => {
     setValue(reactiveValue ?? stableDefaultValue);
   }, [
     reactiveValue,
@@ -113,39 +151,6 @@ var useDefaults = (value, defaults) => {
   ]);
 };
 
-// src/useDynamicRef.ts
-import { useCallback } from "@preact-signals/safe-react/react";
-import { useEffect as useEffect6, useRef as useRef2, useState as useState4 } from "react";
-var useStateWithRef = (value$) => {
-  const [value, setValue] = useState4(value$);
-  const valueRef = useRef2(value$);
-  const setter = useCallback((value2) => {
-    if (typeof value2 === "function") {
-      setValue((current) => {
-        valueRef.current = value2(current);
-        return valueRef.current;
-      });
-    } else {
-      valueRef.current = value2;
-      setValue(value2);
-    }
-  }, []);
-  return [
-    value,
-    setter,
-    valueRef
-  ];
-};
-var useDynamicRef = (value) => {
-  const valueRef = useRef2(value);
-  useEffect6(() => {
-    valueRef.current = value;
-  }, [
-    value
-  ]);
-  return valueRef;
-};
-
 // src/useFileDownload.ts
 import { useMemo as useMemo3 } from "react";
 var useFileDownload = () => {
@@ -160,38 +165,55 @@ var useFileDownload = () => {
 };
 
 // src/useForwardedRef.ts
-import { useEffect as useEffect7, useRef as useRef3 } from "react";
-var useForwardedRef = (ref) => {
-  const innerRef = useRef3(null);
+import { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef4 } from "react";
+var useForwardedRef = (forwardedRef) => {
+  const localRef = useRef4(null);
   useEffect7(() => {
-    if (!ref) {
-      return;
-    }
-    if (typeof ref === "function") {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
+    setRef(forwardedRef, localRef.current);
+  }, [
+    forwardedRef
+  ]);
+  return localRef;
+};
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+var mergeRefs = (refs) => {
+  return (value) => {
+    const cleanups = [];
+    for (const ref of refs) {
+      const cleanup = setRef(ref, value);
+      cleanups.push(typeof cleanup === "function" ? cleanup : () => setRef(ref, null));
     }
-  });
-  return innerRef;
+    return () => {
+      for (const cleanup of cleanups) cleanup();
+    };
+  };
+};
+var useMergeRefs = (refs) => {
+  return useMemo4(() => mergeRefs(refs), refs);
 };
 
 // src/useId.ts
 import alea from "alea";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 var Alea = alea;
 var prng = new Alea("@dxos/react-hooks");
 var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
-var useId = (namespace, propsId, opts) => useMemo4(() => makeId(namespace, propsId, opts), [
+var useId = (namespace, propsId, opts) => useMemo5(() => makeId(namespace, propsId, opts), [
   propsId
 ]);
 var makeId = (namespace, propsId, opts) => propsId ?? `${namespace}-${randomString(opts?.n ?? 4)}`;
 
 // src/useIsFocused.ts
-import { useEffect as useEffect8, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect8, useRef as useRef5, useState as useState5 } from "react";
 var useIsFocused = (inputRef) => {
   const [isFocused, setIsFocused] = useState5(void 0);
-  const isFocusedRef = useRef4(isFocused);
+  const isFocusedRef = useRef5(isFocused);
   isFocusedRef.current = isFocused;
   useEffect8(() => {
     const input = inputRef.current;
@@ -226,7 +248,7 @@ var breakpointMediaQueries = {
   "2xl": "(min-width: 1536px)"
 };
 var useMediaQuery = (query, options = {}) => {
-  const { ssr = true, fallback } = options;
+  const { ssr = false, fallback } = options;
   const queries = (Array.isArray(query) ? query : [
     query
   ]).map((query2) => query2 in breakpointMediaQueries ? breakpointMediaQueries[query2] : query2);
@@ -282,9 +304,9 @@ var useMediaQuery = (query, options = {}) => {
 };
 
 // src/useMulticastObservable.ts
-import { useMemo as useMemo5, useSyncExternalStore } from "react";
+import { useMemo as useMemo6, useSyncExternalStore } from "react";
 var useMulticastObservable = (observable) => {
-  const subscribeFn = useMemo5(() => (listener) => {
+  const subscribeFn = useMemo6(() => (listener) => {
     const subscription = observable.subscribe(listener);
     return () => subscription.unsubscribe();
   }, [
@@ -303,10 +325,10 @@ var useRefCallback = () => {
   };
 };
 
-// src/useResize.ts
-import { useLayoutEffect, useMemo as useMemo6 } from "react";
-var useResize = (handler, deps = [], delay = 800) => {
-  const debouncedHandler = useMemo6(() => {
+// src/useViewportResize.ts
+import { useLayoutEffect, useMemo as useMemo7 } from "react";
+var useViewportResize = (handler, deps = [], delay = 800) => {
+  const debouncedHandler = useMemo7(() => {
     let timeout;
     return (event) => {
       clearTimeout(timeout);
@@ -331,10 +353,9 @@ var useResize = (handler, deps = [], delay = 800) => {
 // src/useSignals.ts
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { computed, effect } from "@preact-signals/safe-react";
-import { useRef as useRef5 } from "@preact-signals/safe-react/react";
-import { useEffect as useEffect10, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef6 } from "react";
 var useSignalsEffect = (cb, deps) => {
-  const callback = useRef5(cb);
+  const callback = useRef6(cb);
   callback.current = cb;
   useEffect10(() => {
     return effect(() => {
@@ -345,16 +366,16 @@ var useSignalsEffect = (cb, deps) => {
 var useSignalsMemo = (cb, deps) => {
   var _effect = _useSignals();
   try {
-    return useMemo7(() => computed(cb), deps ?? []).value;
+    return useMemo8(() => computed(cb), deps ?? []).value;
   } finally {
     _effect.f();
   }
 };
 
 // src/useTimeout.ts
-import { useEffect as useEffect11, useRef as useRef6 } from "react";
+import { useEffect as useEffect11, useRef as useRef7 } from "react";
 var useTimeout = (callback, delay = 0, deps = []) => {
-  const callbackRef = useRef6(callback);
+  const callbackRef = useRef7(callback);
   useEffect11(() => {
     callbackRef.current = callback;
   }, [
@@ -372,7 +393,7 @@ var useTimeout = (callback, delay = 0, deps = []) => {
   ]);
 };
 var useInterval = (callback, delay = 0, deps = []) => {
-  const callbackRef = useRef6(callback);
+  const callbackRef = useRef7(callback);
   useEffect11(() => {
     callbackRef.current = callback;
   }, [
@@ -395,49 +416,17 @@ var useInterval = (callback, delay = 0, deps = []) => {
   ]);
 };
 
-// src/useTrackProps.ts
-import { useEffect as useEffect12, useRef as useRef7 } from "react";
-import { log } from "@dxos/log";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/primitives/react-hooks/src/useTrackProps.ts";
-var useTrackProps = (props, componentName = "Component", active = true) => {
-  const prevProps = useRef7(props);
-  useEffect12(() => {
-    const changes = Object.entries(props).filter(([key]) => props[key] !== prevProps.current[key]);
-    if (changes.length > 0) {
-      if (active) {
-        log.info("props changed", {
-          componentName,
-          keys: changes.map(([key]) => key).join(","),
-          props: Object.fromEntries(changes.map(([key]) => [
-            key,
-            {
-              from: prevProps.current[key],
-              to: props[key]
-            }
-          ]))
-        }, {
-          F: __dxlog_file,
-          L: 22,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-    }
-    prevProps.current = props;
-  });
-};
-
 // src/useTransitions.ts
-import { useEffect as useEffect13, useRef as useRef8, useState as useState8 } from "react";
-var isFunction = (functionToCheck) => {
+import { useEffect as useEffect12, useRef as useRef8, useState as useState8 } from "react";
+var isFunction2 = (functionToCheck) => {
   return functionToCheck instanceof Function;
 };
 var useDidTransition = (currentValue, fromValue, toValue) => {
   const [hasTransitioned, setHasTransitioned] = useState8(false);
   const previousValue = useRef8(currentValue);
-  useEffect13(() => {
-    const toValueValid = isFunction(toValue) ? toValue(currentValue) : toValue === currentValue;
-    const fromValueValid = isFunction(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
+  useEffect12(() => {
+    const toValueValid = isFunction2(toValue) ? toValue(currentValue) : toValue === currentValue;
+    const fromValueValid = isFunction2(fromValue) ? fromValue(previousValue.current) : fromValue === previousValue.current;
     if (fromValueValid && toValueValid && !hasTransitioned) {
       setHasTransitioned(true);
     } else if ((!fromValueValid || !toValueValid) && hasTransitioned) {
@@ -455,13 +444,13 @@ var useDidTransition = (currentValue, fromValue, toValue) => {
 var useOnTransition = (currentValue, fromValue, toValue, callback) => {
   const dirty = useRef8(false);
   const hasTransitioned = useDidTransition(currentValue, fromValue, toValue);
-  useEffect13(() => {
+  useEffect12(() => {
     dirty.current = false;
   }, [
     currentValue,
     dirty
   ]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (hasTransitioned && !dirty.current) {
       callback();
       dirty.current = true;
@@ -472,9 +461,14 @@ var useOnTransition = (currentValue, fromValue, toValue, callback) => {
     callback
   ]);
 };
+
+// src/index.ts
+import { useSize, useScroller } from "mini-virtual-list";
 export {
   makeId,
+  mergeRefs,
   randomString,
+  setRef,
   useAsyncEffect,
   useAsyncState,
   useControlledState,
@@ -489,14 +483,16 @@ export {
   useInterval,
   useIsFocused,
   useMediaQuery,
+  useMergeRefs,
   useMulticastObservable,
   useOnTransition,
   useRefCallback,
-  useResize,
+  useScroller,
   useSignalsEffect,
   useSignalsMemo,
+  useSize,
   useStateWithRef,
   useTimeout,
-  useTrackProps
+  useViewportResize
 };
 //# sourceMappingURL=index.mjs.map