@usels/core 0.0.1-beta.3

package/dist/elements/useElementVisibility/index.d.mts

@@ -0,0 +1,43 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.mjs';
+import { MaybeElement } from '../useRef_/index.mjs';
+import 'react';
+
+interface UseElementVisibilityOptions {
+    /** Initial visibility value. Default: false */
+    initialValue?: boolean;
+    /** Element used as the viewport for intersection. Maps to IntersectionObserver `root`. */
+    scrollTarget?: MaybeElement;
+    /** Margin around the root. Accepts CSS-style values. Default: "0px" */
+    rootMargin?: string;
+    /** Threshold(s) at which to trigger. Default: 0 */
+    threshold?: number | number[];
+    /**
+     * Stop observing after the element becomes visible for the first time. Default: false.
+     * Must be set at mount time; changing dynamically has no effect.
+     */
+    once?: boolean;
+}
+/**
+ * Tracks whether a DOM element is visible within the viewport (or a specified scroll container).
+ * Returns a reactive `Observable<boolean>` that updates automatically as visibility changes.
+ *
+ * `options` accepts a `DeepMaybeObservable<UseElementVisibilityOptions>`:
+ * - A plain object with per-field values
+ * - A plain object with per-field `Observable<T>` values
+ * - The entire options object wrapped in `Observable<UseElementVisibilityOptions>`
+ *
+ * @param element - The element to observe
+ * @param options - Optional configuration — plain, per-field Observable, or fully Observable
+ * @returns `Observable<boolean>` — true when element is intersecting
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const isVisible$ = useElementVisibility(el$);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useElementVisibility(element: MaybeElement, options?: DeepMaybeObservable<UseElementVisibilityOptions>): Observable<boolean>;
+
+export { type UseElementVisibilityOptions, useElementVisibility };

package/dist/elements/useElementVisibility/index.d.ts

@@ -0,0 +1,43 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.js';
+import { MaybeElement } from '../useRef_/index.js';
+import 'react';
+
+interface UseElementVisibilityOptions {
+    /** Initial visibility value. Default: false */
+    initialValue?: boolean;
+    /** Element used as the viewport for intersection. Maps to IntersectionObserver `root`. */
+    scrollTarget?: MaybeElement;
+    /** Margin around the root. Accepts CSS-style values. Default: "0px" */
+    rootMargin?: string;
+    /** Threshold(s) at which to trigger. Default: 0 */
+    threshold?: number | number[];
+    /**
+     * Stop observing after the element becomes visible for the first time. Default: false.
+     * Must be set at mount time; changing dynamically has no effect.
+     */
+    once?: boolean;
+}
+/**
+ * Tracks whether a DOM element is visible within the viewport (or a specified scroll container).
+ * Returns a reactive `Observable<boolean>` that updates automatically as visibility changes.
+ *
+ * `options` accepts a `DeepMaybeObservable<UseElementVisibilityOptions>`:
+ * - A plain object with per-field values
+ * - A plain object with per-field `Observable<T>` values
+ * - The entire options object wrapped in `Observable<UseElementVisibilityOptions>`
+ *
+ * @param element - The element to observe
+ * @param options - Optional configuration — plain, per-field Observable, or fully Observable
+ * @returns `Observable<boolean>` — true when element is intersecting
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const isVisible$ = useElementVisibility(el$);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useElementVisibility(element: MaybeElement, options?: DeepMaybeObservable<UseElementVisibilityOptions>): Observable<boolean>;
+
+export { type UseElementVisibilityOptions, useElementVisibility };

package/dist/elements/useElementVisibility/index.js

@@ -0,0 +1,58 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useElementVisibility_exports = {};
+__export(useElementVisibility_exports, {
+  useElementVisibility: () => useElementVisibility
+});
+module.exports = __toCommonJS(useElementVisibility_exports);
+var import_react = require("@legendapp/state/react");
+var import_useMayObservableOptions = require("../../function/useMayObservableOptions");
+var import_useIntersectionObserver = require("../useIntersectionObserver");
+// @__NO_SIDE_EFFECTS__
+function useElementVisibility(element, options) {
+  const opts$ = (0, import_useMayObservableOptions.useMayObservableOptions)(options, {
+    initialValue: "peek",
+    once: "peek",
+    scrollTarget: "get.element"
+  });
+  const isVisible$ = (0, import_react.useObservable)(opts$.initialValue.peek() ?? false);
+  const { stop } = (0, import_useIntersectionObserver.useIntersectionObserver)(
+    element,
+    (entries) => {
+      if (entries.length === 0) return;
+      const latest = entries.reduce((a, b) => a.time > b.time ? a : b);
+      isVisible$.set(latest.isIntersecting);
+      if (opts$.once.peek() && latest.isIntersecting) {
+        stop();
+      }
+    },
+    {
+      root: opts$.scrollTarget,
+      rootMargin: opts$.rootMargin,
+      threshold: opts$.threshold
+    }
+  );
+  return isVisible$;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useElementVisibility
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/useElementVisibility/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementVisibility/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport type { DeepMaybeObservable } from \"../../types\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { MaybeElement } from \"../useRef$\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver\";\nimport type { UseIntersectionObserverOptions } from \"../useIntersectionObserver\";\n\nexport interface UseElementVisibilityOptions {\n  /** Initial visibility value. Default: false */\n  initialValue?: boolean;\n  /** Element used as the viewport for intersection. Maps to IntersectionObserver `root`. */\n  scrollTarget?: MaybeElement;\n  /** Margin around the root. Accepts CSS-style values. Default: \"0px\" */\n  rootMargin?: string;\n  /** Threshold(s) at which to trigger. Default: 0 */\n  threshold?: number | number[];\n  /**\n   * Stop observing after the element becomes visible for the first time. Default: false.\n   * Must be set at mount time; changing dynamically has no effect.\n   */\n  once?: boolean;\n}\n\n/**\n * Tracks whether a DOM element is visible within the viewport (or a specified scroll container).\n * Returns a reactive `Observable<boolean>` that updates automatically as visibility changes.\n *\n * `options` accepts a `DeepMaybeObservable<UseElementVisibilityOptions>`:\n * - A plain object with per-field values\n * - A plain object with per-field `Observable<T>` values\n * - The entire options object wrapped in `Observable<UseElementVisibilityOptions>`\n *\n * @param element - The element to observe\n * @param options - Optional configuration — plain, per-field Observable, or fully Observable\n * @returns `Observable<boolean>` — true when element is intersecting\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const isVisible$ = useElementVisibility(el$);\n * return <div ref={el$} />;\n * ```\n */\n/*@__NO_SIDE_EFFECTS__*/\nexport function useElementVisibility(\n  element: MaybeElement,\n  options?: DeepMaybeObservable<UseElementVisibilityOptions>,\n): Observable<boolean> {\n  const opts$ = useMayObservableOptions<UseElementVisibilityOptions>(options, {\n    initialValue: \"peek\",\n    once: \"peek\",\n    scrollTarget: \"get.element\",\n  });\n\n  const isVisible$ = useObservable<boolean>(opts$.initialValue.peek() ?? false);\n\n  const { stop } = useIntersectionObserver(\n    element,\n    (entries) => {\n      if (entries.length === 0) return;\n      const latest = entries.reduce((a, b) => (a.time > b.time ? a : b));\n      isVisible$.set(latest.isIntersecting);\n\n      if (opts$.once.peek() && latest.isIntersecting) {\n        stop();\n      }\n    },\n    {\n      root: opts$.scrollTarget,\n      rootMargin: opts$.rootMargin,\n      threshold: opts$.threshold,\n    } as DeepMaybeObservable<UseIntersectionObserverOptions>,\n  );\n\n  return isVisible$;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA8B;AAE9B,qCAAwC;AAExC,qCAAwC;AAAA;AAwCjC,SAAS,qBACd,SACA,SACqB;AACrB,QAAM,YAAQ,wDAAqD,SAAS;AAAA,IAC1E,cAAc;AAAA,IACd,MAAM;AAAA,IACN,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,iBAAa,4BAAuB,MAAM,aAAa,KAAK,KAAK,KAAK;AAE5E,QAAM,EAAE,KAAK,QAAI;AAAA,IACf;AAAA,IACA,CAAC,YAAY;AACX,UAAI,QAAQ,WAAW,EAAG;AAC1B,YAAM,SAAS,QAAQ,OAAO,CAAC,GAAG,MAAO,EAAE,OAAO,EAAE,OAAO,IAAI,CAAE;AACjE,iBAAW,IAAI,OAAO,cAAc;AAEpC,UAAI,MAAM,KAAK,KAAK,KAAK,OAAO,gBAAgB;AAC9C,aAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,YAAY,MAAM;AAAA,MAClB,WAAW,MAAM;AAAA,IACnB;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}

package/dist/elements/useElementVisibility/index.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { useObservable } from "@legendapp/state/react";
+import { useMayObservableOptions } from "../../function/useMayObservableOptions";
+import { useIntersectionObserver } from "../useIntersectionObserver";
+// @__NO_SIDE_EFFECTS__
+function useElementVisibility(element, options) {
+  const opts$ = useMayObservableOptions(options, {
+    initialValue: "peek",
+    once: "peek",
+    scrollTarget: "get.element"
+  });
+  const isVisible$ = useObservable(opts$.initialValue.peek() ?? false);
+  const { stop } = useIntersectionObserver(
+    element,
+    (entries) => {
+      if (entries.length === 0) return;
+      const latest = entries.reduce((a, b) => a.time > b.time ? a : b);
+      isVisible$.set(latest.isIntersecting);
+      if (opts$.once.peek() && latest.isIntersecting) {
+        stop();
+      }
+    },
+    {
+      root: opts$.scrollTarget,
+      rootMargin: opts$.rootMargin,
+      threshold: opts$.threshold
+    }
+  );
+  return isVisible$;
+}
+export {
+  useElementVisibility
+};
+//# sourceMappingURL=index.mjs.map

package/dist/elements/useElementVisibility/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementVisibility/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport type { DeepMaybeObservable } from \"../../types\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { MaybeElement } from \"../useRef$\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver\";\nimport type { UseIntersectionObserverOptions } from \"../useIntersectionObserver\";\n\nexport interface UseElementVisibilityOptions {\n  /** Initial visibility value. Default: false */\n  initialValue?: boolean;\n  /** Element used as the viewport for intersection. Maps to IntersectionObserver `root`. */\n  scrollTarget?: MaybeElement;\n  /** Margin around the root. Accepts CSS-style values. Default: \"0px\" */\n  rootMargin?: string;\n  /** Threshold(s) at which to trigger. Default: 0 */\n  threshold?: number | number[];\n  /**\n   * Stop observing after the element becomes visible for the first time. Default: false.\n   * Must be set at mount time; changing dynamically has no effect.\n   */\n  once?: boolean;\n}\n\n/**\n * Tracks whether a DOM element is visible within the viewport (or a specified scroll container).\n * Returns a reactive `Observable<boolean>` that updates automatically as visibility changes.\n *\n * `options` accepts a `DeepMaybeObservable<UseElementVisibilityOptions>`:\n * - A plain object with per-field values\n * - A plain object with per-field `Observable<T>` values\n * - The entire options object wrapped in `Observable<UseElementVisibilityOptions>`\n *\n * @param element - The element to observe\n * @param options - Optional configuration — plain, per-field Observable, or fully Observable\n * @returns `Observable<boolean>` — true when element is intersecting\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const isVisible$ = useElementVisibility(el$);\n * return <div ref={el$} />;\n * ```\n */\n/*@__NO_SIDE_EFFECTS__*/\nexport function useElementVisibility(\n  element: MaybeElement,\n  options?: DeepMaybeObservable<UseElementVisibilityOptions>,\n): Observable<boolean> {\n  const opts$ = useMayObservableOptions<UseElementVisibilityOptions>(options, {\n    initialValue: \"peek\",\n    once: \"peek\",\n    scrollTarget: \"get.element\",\n  });\n\n  const isVisible$ = useObservable<boolean>(opts$.initialValue.peek() ?? false);\n\n  const { stop } = useIntersectionObserver(\n    element,\n    (entries) => {\n      if (entries.length === 0) return;\n      const latest = entries.reduce((a, b) => (a.time > b.time ? a : b));\n      isVisible$.set(latest.isIntersecting);\n\n      if (opts$.once.peek() && latest.isIntersecting) {\n        stop();\n      }\n    },\n    {\n      root: opts$.scrollTarget,\n      rootMargin: opts$.rootMargin,\n      threshold: opts$.threshold,\n    } as DeepMaybeObservable<UseIntersectionObserverOptions>,\n  );\n\n  return isVisible$;\n}\n"],"mappings":";AAEA,SAAS,qBAAqB;AAE9B,SAAS,+BAA+B;AAExC,SAAS,+BAA+B;AAAA;AAwCjC,SAAS,qBACd,SACA,SACqB;AACrB,QAAM,QAAQ,wBAAqD,SAAS;AAAA,IAC1E,cAAc;AAAA,IACd,MAAM;AAAA,IACN,cAAc;AAAA,EAChB,CAAC;AAED,QAAM,aAAa,cAAuB,MAAM,aAAa,KAAK,KAAK,KAAK;AAE5E,QAAM,EAAE,KAAK,IAAI;AAAA,IACf;AAAA,IACA,CAAC,YAAY;AACX,UAAI,QAAQ,WAAW,EAAG;AAC1B,YAAM,SAAS,QAAQ,OAAO,CAAC,GAAG,MAAO,EAAE,OAAO,EAAE,OAAO,IAAI,CAAE;AACjE,iBAAW,IAAI,OAAO,cAAc;AAEpC,UAAI,MAAM,KAAK,KAAK,KAAK,OAAO,gBAAgB;AAC9C,aAAK;AAAA,MACP;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM,MAAM;AAAA,MACZ,YAAY,MAAM;AAAA,MAClB,WAAW,MAAM;AAAA,IACnB;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}

package/dist/elements/useIntersectionObserver/demo.d.mts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function UseIntersectionObserverDemo(): react_jsx_runtime.JSX.Element;
+
+export { UseIntersectionObserverDemo as default };

package/dist/elements/useIntersectionObserver/demo.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function UseIntersectionObserverDemo(): react_jsx_runtime.JSX.Element;
+
+export { UseIntersectionObserverDemo as default };

package/dist/elements/useIntersectionObserver/demo.js

@@ -0,0 +1,173 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var demo_exports = {};
+__export(demo_exports, {
+  default: () => UseIntersectionObserverDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_useRef = require("../useRef$");
+var import__ = require(".");
+var import_react = require("@legendapp/state/react");
+const DEFAULT_ROOT_MARGIN = 0;
+const btnStyle = {
+  padding: "3px 10px",
+  fontSize: "12px",
+  cursor: "pointer",
+  borderRadius: "4px",
+  border: "1px solid var(--sl-color-gray-4, #94a3b8)",
+  background: "transparent",
+  fontFamily: "monospace"
+};
+function UseIntersectionObserverDemo() {
+  const el$ = (0, import_useRef.useRef$)();
+  const containerRef$ = (0, import_useRef.useRef$)();
+  const isVisible$ = (0, import_react.useObservable)(false);
+  const rootMargin$ = (0, import_react.useObservable)(DEFAULT_ROOT_MARGIN);
+  const marginString$ = (0, import_react.useObservable)(() => {
+    const m = Number(rootMargin$.get());
+    return `${isNaN(m) ? 0 : m}px`;
+  });
+  const { isActive$, pause, resume } = (0, import__.useIntersectionObserver)(
+    el$,
+    (entries) => {
+      isVisible$.set(entries[0]?.isIntersecting ?? false);
+    },
+    { threshold: 0.5, rootMargin: marginString$, root: containerRef$ }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px",
+          fontFamily: "monospace",
+          fontSize: "14px",
+          padding: "8px 12px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "isIntersecting:",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: isActive$.get() ? String(isVisible$.get()) : "\u2014 (paused)" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => isActive$.get() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: pause, style: btnStyle, children: "pause" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: resume, style: btnStyle, children: "resume" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          padding: "6px 12px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--sl-color-gray-2, #64748b)" }, children: "rootMargin:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              value: rootMargin$.get(),
+              type: "number",
+              onChange: (e) => rootMargin$.set(Number(e.target.value)),
+              style: {
+                fontFamily: "monospace",
+                fontSize: "13px",
+                padding: "2px 8px",
+                borderRadius: "4px",
+                border: "1px solid var(--sl-color-gray-4, #94a3b8)",
+                background: "var(--sl-color-gray-7, #ffffff)",
+                color: "black",
+                width: "160px"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => rootMargin$.get() !== DEFAULT_ROOT_MARGIN ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: () => rootMargin$.set(DEFAULT_ROOT_MARGIN),
+              style: btnStyle,
+              children: "default"
+            }
+          ) : null })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: containerRef$,
+        style: {
+          height: "200px",
+          overflowY: "auto",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          position: "relative"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "200px",
+                color: "var(--sl-color-gray-3, #94a3b8)",
+                fontSize: "13px",
+                fontFamily: "monospace"
+              },
+              children: "\u2193 scroll down"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref: el$,
+              style: {
+                margin: "0 16px",
+                padding: "20px",
+                borderRadius: "6px",
+                textAlign: "center",
+                fontFamily: "monospace",
+                fontSize: "13px",
+                transition: "background 0.2s, border-color 0.2s",
+                border: `2px solid ${isVisible$.get() ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #94a3b8)"}`,
+                background: isVisible$.get() ? "var(--sl-color-green-low, #dcfce7)" : "transparent"
+              },
+              children: "target element"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: "140px" } })
+        ]
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=demo.js.map

package/dist/elements/useIntersectionObserver/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useIntersectionObserver/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useIntersectionObserver } from \".\";\nimport { Computed, useObservable } from \"@legendapp/state/react\";\n\nconst DEFAULT_ROOT_MARGIN = 0;\n\nconst btnStyle: React.CSSProperties = {\n  padding: \"3px 10px\",\n  fontSize: \"12px\",\n  cursor: \"pointer\",\n  borderRadius: \"4px\",\n  border: \"1px solid var(--sl-color-gray-4, #94a3b8)\",\n  background: \"transparent\",\n  fontFamily: \"monospace\",\n};\n\nexport default function UseIntersectionObserverDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const containerRef$ = useRef$<HTMLElement>();\n  const isVisible$ = useObservable(false);\n  const rootMargin$ = useObservable(DEFAULT_ROOT_MARGIN);\n\n  const marginString$ = useObservable(() => {\n    const m = Number(rootMargin$.get());\n    return `${isNaN(m) ? 0 : m}px`;\n  });\n  const { isActive$, pause, resume } = useIntersectionObserver(\n    el$,\n    (entries) => {\n      isVisible$.set(entries[0]?.isIntersecting ?? false);\n    },\n    { threshold: 0.5, rootMargin: marginString$, root: containerRef$ },\n  );\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n      {/* Status + pause/resume */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: \"16px\",\n          fontFamily: \"monospace\",\n          fontSize: \"14px\",\n          padding: \"8px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        <Computed>\n          {() => (\n            <span>\n              isIntersecting:{\" \"}\n              <strong>\n                {isActive$.get() ? String(isVisible$.get()) : \"— (paused)\"}\n              </strong>\n            </span>\n          )}\n        </Computed>\n        <Computed>\n          {() =>\n            isActive$.get() ? (\n              <button onClick={pause} style={btnStyle}>\n                pause\n              </button>\n            ) : (\n              <button onClick={resume} style={btnStyle}>\n                resume\n              </button>\n            )\n          }\n        </Computed>\n      </div>\n\n      {/* rootMargin input */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: \"8px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          padding: \"6px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        <span style={{ color: \"var(--sl-color-gray-2, #64748b)\" }}>\n          rootMargin:\n        </span>\n        <Computed>\n          {() => (\n            <input\n              value={rootMargin$.get()}\n              type=\"number\"\n              onChange={(e) => rootMargin$.set(Number(e.target.value))}\n              style={{\n                fontFamily: \"monospace\",\n                fontSize: \"13px\",\n                padding: \"2px 8px\",\n                borderRadius: \"4px\",\n                border: \"1px solid var(--sl-color-gray-4, #94a3b8)\",\n                background: \"var(--sl-color-gray-7, #ffffff)\",\n                color: \"black\",\n                width: \"160px\",\n              }}\n            />\n          )}\n        </Computed>\n        <Computed>\n          {() =>\n            rootMargin$.get() !== DEFAULT_ROOT_MARGIN ? (\n              <button\n                onClick={() => rootMargin$.set(DEFAULT_ROOT_MARGIN)}\n                style={btnStyle}\n              >\n                default\n              </button>\n            ) : null\n          }\n        </Computed>\n      </div>\n\n      {/* Scrollable container — used as root for IntersectionObserver */}\n      <div\n        ref={containerRef$}\n        style={{\n          height: \"200px\",\n          overflowY: \"auto\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          position: \"relative\",\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            height: \"200px\",\n            color: \"var(--sl-color-gray-3, #94a3b8)\",\n            fontSize: \"13px\",\n            fontFamily: \"monospace\",\n          }}\n        >\n          ↓ scroll down\n        </div>\n\n        <Computed>\n          {() => (\n            <div\n              ref={el$}\n              style={{\n                margin: \"0 16px\",\n                padding: \"20px\",\n                borderRadius: \"6px\",\n                textAlign: \"center\",\n                fontFamily: \"monospace\",\n                fontSize: \"13px\",\n                transition: \"background 0.2s, border-color 0.2s\",\n                border: `2px solid ${\n                  isVisible$.get()\n                    ? \"var(--sl-color-green, #22c55e)\"\n                    : \"var(--sl-color-gray-4, #94a3b8)\"\n                }`,\n                background: isVisible$.get()\n                  ? \"var(--sl-color-green-low, #dcfce7)\"\n                  : \"transparent\",\n              }}\n            >\n              target element\n            </div>\n          )}\n        </Computed>\n\n        <div style={{ height: \"140px\" }} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/elements/useIntersectionObserver/demo.mjs

@@ -0,0 +1,153 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef$ } from "../useRef$";
+import { useIntersectionObserver } from ".";
+import { Computed, useObservable } from "@legendapp/state/react";
+const DEFAULT_ROOT_MARGIN = 0;
+const btnStyle = {
+  padding: "3px 10px",
+  fontSize: "12px",
+  cursor: "pointer",
+  borderRadius: "4px",
+  border: "1px solid var(--sl-color-gray-4, #94a3b8)",
+  background: "transparent",
+  fontFamily: "monospace"
+};
+function UseIntersectionObserverDemo() {
+  const el$ = useRef$();
+  const containerRef$ = useRef$();
+  const isVisible$ = useObservable(false);
+  const rootMargin$ = useObservable(DEFAULT_ROOT_MARGIN);
+  const marginString$ = useObservable(() => {
+    const m = Number(rootMargin$.get());
+    return `${isNaN(m) ? 0 : m}px`;
+  });
+  const { isActive$, pause, resume } = useIntersectionObserver(
+    el$,
+    (entries) => {
+      isVisible$.set(entries[0]?.isIntersecting ?? false);
+    },
+    { threshold: 0.5, rootMargin: marginString$, root: containerRef$ }
+  );
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "16px",
+          fontFamily: "monospace",
+          fontSize: "14px",
+          padding: "8px 12px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs("span", { children: [
+            "isIntersecting:",
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: isActive$.get() ? String(isVisible$.get()) : "\u2014 (paused)" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Computed, { children: () => isActive$.get() ? /* @__PURE__ */ jsx("button", { onClick: pause, style: btnStyle, children: "pause" }) : /* @__PURE__ */ jsx("button", { onClick: resume, style: btnStyle, children: "resume" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          padding: "6px 12px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "var(--sl-color-gray-2, #64748b)" }, children: "rootMargin:" }),
+          /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: rootMargin$.get(),
+              type: "number",
+              onChange: (e) => rootMargin$.set(Number(e.target.value)),
+              style: {
+                fontFamily: "monospace",
+                fontSize: "13px",
+                padding: "2px 8px",
+                borderRadius: "4px",
+                border: "1px solid var(--sl-color-gray-4, #94a3b8)",
+                background: "var(--sl-color-gray-7, #ffffff)",
+                color: "black",
+                width: "160px"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Computed, { children: () => rootMargin$.get() !== DEFAULT_ROOT_MARGIN ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => rootMargin$.set(DEFAULT_ROOT_MARGIN),
+              style: btnStyle,
+              children: "default"
+            }
+          ) : null })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef$,
+        style: {
+          height: "200px",
+          overflowY: "auto",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          position: "relative"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "200px",
+                color: "var(--sl-color-gray-3, #94a3b8)",
+                fontSize: "13px",
+                fontFamily: "monospace"
+              },
+              children: "\u2193 scroll down"
+            }
+          ),
+          /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: el$,
+              style: {
+                margin: "0 16px",
+                padding: "20px",
+                borderRadius: "6px",
+                textAlign: "center",
+                fontFamily: "monospace",
+                fontSize: "13px",
+                transition: "background 0.2s, border-color 0.2s",
+                border: `2px solid ${isVisible$.get() ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #94a3b8)"}`,
+                background: isVisible$.get() ? "var(--sl-color-green-low, #dcfce7)" : "transparent"
+              },
+              children: "target element"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { style: { height: "140px" } })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  UseIntersectionObserverDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

package/dist/elements/useIntersectionObserver/demo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useIntersectionObserver/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useIntersectionObserver } from \".\";\nimport { Computed, useObservable } from \"@legendapp/state/react\";\n\nconst DEFAULT_ROOT_MARGIN = 0;\n\nconst btnStyle: React.CSSProperties = {\n  padding: \"3px 10px\",\n  fontSize: \"12px\",\n  cursor: \"pointer\",\n  borderRadius: \"4px\",\n  border: \"1px solid var(--sl-color-gray-4, #94a3b8)\",\n  background: \"transparent\",\n  fontFamily: \"monospace\",\n};\n\nexport default function UseIntersectionObserverDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const containerRef$ = useRef$<HTMLElement>();\n  const isVisible$ = useObservable(false);\n  const rootMargin$ = useObservable(DEFAULT_ROOT_MARGIN);\n\n  const marginString$ = useObservable(() => {\n    const m = Number(rootMargin$.get());\n    return `${isNaN(m) ? 0 : m}px`;\n  });\n  const { isActive$, pause, resume } = useIntersectionObserver(\n    el$,\n    (entries) => {\n      isVisible$.set(entries[0]?.isIntersecting ?? false);\n    },\n    { threshold: 0.5, rootMargin: marginString$, root: containerRef$ },\n  );\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n      {/* Status + pause/resume */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: \"16px\",\n          fontFamily: \"monospace\",\n          fontSize: \"14px\",\n          padding: \"8px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        <Computed>\n          {() => (\n            <span>\n              isIntersecting:{\" \"}\n              <strong>\n                {isActive$.get() ? String(isVisible$.get()) : \"— (paused)\"}\n              </strong>\n            </span>\n          )}\n        </Computed>\n        <Computed>\n          {() =>\n            isActive$.get() ? (\n              <button onClick={pause} style={btnStyle}>\n                pause\n              </button>\n            ) : (\n              <button onClick={resume} style={btnStyle}>\n                resume\n              </button>\n            )\n          }\n        </Computed>\n      </div>\n\n      {/* rootMargin input */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: \"8px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          padding: \"6px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        <span style={{ color: \"var(--sl-color-gray-2, #64748b)\" }}>\n          rootMargin:\n        </span>\n        <Computed>\n          {() => (\n            <input\n              value={rootMargin$.get()}\n              type=\"number\"\n              onChange={(e) => rootMargin$.set(Number(e.target.value))}\n              style={{\n                fontFamily: \"monospace\",\n                fontSize: \"13px\",\n                padding: \"2px 8px\",\n                borderRadius: \"4px\",\n                border: \"1px solid var(--sl-color-gray-4, #94a3b8)\",\n                background: \"var(--sl-color-gray-7, #ffffff)\",\n                color: \"black\",\n                width: \"160px\",\n              }}\n            />\n          )}\n        </Computed>\n        <Computed>\n          {() =>\n            rootMargin$.get() !== DEFAULT_ROOT_MARGIN ? (\n              <button\n                onClick={() => rootMargin$.set(DEFAULT_ROOT_MARGIN)}\n                style={btnStyle}\n              >\n                default\n              </button>\n            ) : null\n          }\n        </Computed>\n      </div>\n\n      {/* Scrollable container — used as root for IntersectionObserver */}\n      <div\n        ref={containerRef$}\n        style={{\n          height: \"200px\",\n          overflowY: \"auto\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          position: \"relative\",\n        }}\n      >\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            height: \"200px\",\n            color: \"var(--sl-color-gray-3, #94a3b8)\",\n            fontSize: \"13px\",\n            fontFamily: \"monospace\",\n          }}\n        >\n          ↓ scroll down\n        </div>\n\n        <Computed>\n          {() => (\n            <div\n              ref={el$}\n              style={{\n                margin: \"0 16px\",\n                padding: \"20px\",\n                borderRadius: \"6px\",\n                textAlign: \"center\",\n                fontFamily: \"monospace\",\n                fontSize: \"13px\",\n                transition: \"background 0.2s, border-color 0.2s\",\n                border: `2px solid ${\n                  isVisible$.get()\n                    ? \"var(--sl-color-green, #22c55e)\"\n                    : \"var(--sl-color-gray-4, #94a3b8)\"\n                }`,\n                background: isVisible$.get()\n                  ? \"var(--sl-color-green-low, #dcfce7)\"\n                  : \"transparent\",\n              }}\n            >\n              target element\n            </div>\n          )}\n        </Computed>\n\n        <div style={{ height: \"140px\" }} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/elements/useIntersectionObserver/index.d.mts

@@ -0,0 +1,47 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.mjs';
+import { MaybeElement } from '../useRef_/index.mjs';
+import 'react';
+
+interface UseIntersectionObserverOptions {
+    /** Whether to start observing immediately on mount. Default: true */
+    immediate?: boolean;
+    /** The element or document used as the viewport. Default: browser viewport */
+    root?: MaybeElement;
+    /** Margin around the root. Accepts CSS-style values. Default: "0px" */
+    rootMargin?: string;
+    /** Threshold(s) at which to trigger the callback. Default: 0 */
+    threshold?: number | number[];
+}
+interface UseIntersectionObserverReturn {
+    isSupported$: Observable<boolean>;
+    isActive$: Observable<boolean>;
+    stop: () => void;
+    pause: () => void;
+    resume: () => void;
+}
+/**
+ * Reactive wrapper around the IntersectionObserver API.
+ * Observes one or more elements for intersection changes with pause/resume/stop support.
+ *
+ * @param target - Element(s) to observe: Ref$, Observable, raw Element, or array of these
+ * @param callback - Called when intersection state changes
+ * @param options - IntersectionObserver options plus an `immediate` flag
+ * @returns `{ isSupported$, isActive$, pause, resume, stop }`
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { isActive$, pause, resume } = useIntersectionObserver(
+ *   el$,
+ *   (entries) => {
+ *     entries.forEach(entry => console.log(entry.isIntersecting));
+ *   },
+ *   { threshold: 0.5 },
+ * );
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useIntersectionObserver(target: MaybeElement | MaybeElement[], callback: IntersectionObserverCallback, options?: DeepMaybeObservable<UseIntersectionObserverOptions>): UseIntersectionObserverReturn;
+
+export { type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, useIntersectionObserver };