@usels/core 0.0.1-beta.3

package/dist/elements/useElementSize/demo.js

@@ -0,0 +1,82 @@
+"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: () => UseElementSizeDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_useRef = require("../useRef$");
+var import__ = require(".");
+function UseElementSizeDemo() {
+  const el$ = (0, import_useRef.useRef$)();
+  const { width$, height$ } = (0, import__.useElementSize)(el$);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "24px",
+          fontFamily: "monospace",
+          fontSize: "14px",
+          padding: "8px 12px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "width: ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+              Math.round(width$.get()),
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "height: ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+              Math.round(height$.get()),
+              "px"
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ref: el$,
+        defaultValue: "Resize this textarea to see width & height update",
+        style: {
+          resize: "both",
+          overflow: "auto",
+          width: "300px",
+          height: "120px",
+          padding: "10px",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          fontFamily: "inherit",
+          fontSize: "14px",
+          lineHeight: "1.5"
+        }
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementSize/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useElementSize } from \".\";\n\nexport default function UseElementSizeDemo() {\n  const el$ = useRef$<HTMLTextAreaElement>();\n  const { width$, height$ } = useElementSize(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      <div\n        style={{\n          display: \"flex\",\n          gap: \"24px\",\n          fontFamily: \"monospace\",\n          fontSize: \"14px\",\n          padding: \"8px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        <>\n          <span>\n            width: <strong>{Math.round(width$.get())}px</strong>\n          </span>\n          <span>\n            height: <strong>{Math.round(height$.get())}px</strong>\n          </span>\n        </>\n      </div>\n      <textarea\n        ref={el$}\n        defaultValue=\"Resize this textarea to see width & height update\"\n        style={{\n          resize: \"both\",\n          overflow: \"auto\",\n          width: \"300px\",\n          height: \"120px\",\n          padding: \"10px\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          fontFamily: \"inherit\",\n          fontSize: \"14px\",\n          lineHeight: \"1.5\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASM;AATN,oBAAwB;AACxB,eAA+B;AAEhB,SAAR,qBAAsC;AAC3C,QAAM,UAAM,uBAA6B;AACzC,QAAM,EAAE,QAAQ,QAAQ,QAAI,yBAAe,GAAG;AAE9C,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAClE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAEA,sFACE;AAAA,uDAAC,UAAK;AAAA;AAAA,YACG,6CAAC,YAAQ;AAAA,mBAAK,MAAM,OAAO,IAAI,CAAC;AAAA,cAAE;AAAA,eAAE;AAAA,aAC7C;AAAA,UACA,6CAAC,UAAK;AAAA;AAAA,YACI,6CAAC,YAAQ;AAAA,mBAAK,MAAM,QAAQ,IAAI,CAAC;AAAA,cAAE;AAAA,eAAE;AAAA,aAC/C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,cAAa;AAAA,QACb,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,YAAY;AAAA,QACd;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/elements/useElementSize/demo.mjs

@@ -0,0 +1,62 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef$ } from "../useRef$";
+import { useElementSize } from ".";
+function UseElementSizeDemo() {
+  const el$ = useRef$();
+  const { width$, height$ } = useElementSize(el$);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "24px",
+          fontFamily: "monospace",
+          fontSize: "14px",
+          padding: "8px 12px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "width: ",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              Math.round(width$.get()),
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "height: ",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              Math.round(height$.get()),
+              "px"
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: el$,
+        defaultValue: "Resize this textarea to see width & height update",
+        style: {
+          resize: "both",
+          overflow: "auto",
+          width: "300px",
+          height: "120px",
+          padding: "10px",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          fontFamily: "inherit",
+          fontSize: "14px",
+          lineHeight: "1.5"
+        }
+      }
+    )
+  ] });
+}
+export {
+  UseElementSizeDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementSize/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useElementSize } from \".\";\n\nexport default function UseElementSizeDemo() {\n  const el$ = useRef$<HTMLTextAreaElement>();\n  const { width$, height$ } = useElementSize(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      <div\n        style={{\n          display: \"flex\",\n          gap: \"24px\",\n          fontFamily: \"monospace\",\n          fontSize: \"14px\",\n          padding: \"8px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        <>\n          <span>\n            width: <strong>{Math.round(width$.get())}px</strong>\n          </span>\n          <span>\n            height: <strong>{Math.round(height$.get())}px</strong>\n          </span>\n        </>\n      </div>\n      <textarea\n        ref={el$}\n        defaultValue=\"Resize this textarea to see width & height update\"\n        style={{\n          resize: \"both\",\n          overflow: \"auto\",\n          width: \"300px\",\n          height: \"120px\",\n          padding: \"10px\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          fontFamily: \"inherit\",\n          fontSize: \"14px\",\n          lineHeight: \"1.5\",\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"AASM,SAWE,UAXF,KAaa,YAbb;AATN,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAEhB,SAAR,qBAAsC;AAC3C,QAAM,MAAM,QAA6B;AACzC,QAAM,EAAE,QAAQ,QAAQ,IAAI,eAAe,GAAG;AAE9C,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAClE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAEA,2CACE;AAAA,+BAAC,UAAK;AAAA;AAAA,YACG,qBAAC,YAAQ;AAAA,mBAAK,MAAM,OAAO,IAAI,CAAC;AAAA,cAAE;AAAA,eAAE;AAAA,aAC7C;AAAA,UACA,qBAAC,UAAK;AAAA;AAAA,YACI,qBAAC,YAAQ;AAAA,mBAAK,MAAM,QAAQ,IAAI,CAAC;AAAA,cAAE;AAAA,eAAE;AAAA,aAC/C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,cAAa;AAAA,QACb,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,YAAY;AAAA,QACd;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,34 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.mjs';
+import 'react';
+
+interface UseElementSizeOptions {
+    box?: "content-box" | "border-box" | "device-pixel-content-box";
+}
+interface UseElementSizeReturn {
+    width$: Observable<number>;
+    height$: Observable<number>;
+    stop: () => void;
+}
+/**
+ * Tracks the width and height of a DOM element using ResizeObserver.
+ * SVG elements use getBoundingClientRect() as fallback.
+ *
+ * @param target - Element to observe (Ref$, Observable<Element|null>, Document, Window, or null)
+ * @param initialSize - Initial size values (default: { width: 0, height: 0 })
+ * @param options - Optional box model option
+ * @returns `{ width$, height$, stop }` — reactive size observables and manual stop function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { width$, height$ } = useElementSize(el$);
+ * return <div ref={el$}>{width$.get()} x {height$.get()}</div>;
+ * ```
+ */
+declare function useElementSize(target: MaybeElement, initialSize?: {
+    width: number;
+    height: number;
+}, options?: UseElementSizeOptions): UseElementSizeReturn;
+
+export { type UseElementSizeOptions, type UseElementSizeReturn, useElementSize };

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

@@ -0,0 +1,34 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.js';
+import 'react';
+
+interface UseElementSizeOptions {
+    box?: "content-box" | "border-box" | "device-pixel-content-box";
+}
+interface UseElementSizeReturn {
+    width$: Observable<number>;
+    height$: Observable<number>;
+    stop: () => void;
+}
+/**
+ * Tracks the width and height of a DOM element using ResizeObserver.
+ * SVG elements use getBoundingClientRect() as fallback.
+ *
+ * @param target - Element to observe (Ref$, Observable<Element|null>, Document, Window, or null)
+ * @param initialSize - Initial size values (default: { width: 0, height: 0 })
+ * @param options - Optional box model option
+ * @returns `{ width$, height$, stop }` — reactive size observables and manual stop function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { width$, height$ } = useElementSize(el$);
+ * return <div ref={el$}>{width$.get()} x {height$.get()}</div>;
+ * ```
+ */
+declare function useElementSize(target: MaybeElement, initialSize?: {
+    width: number;
+    height: number;
+}, options?: UseElementSizeOptions): UseElementSizeReturn;
+
+export { type UseElementSizeOptions, type UseElementSizeReturn, useElementSize };

package/dist/elements/useElementSize/index.js

@@ -0,0 +1,85 @@
+"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 useElementSize_exports = {};
+__export(useElementSize_exports, {
+  useElementSize: () => useElementSize
+});
+module.exports = __toCommonJS(useElementSize_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_useRef = require("../useRef$");
+var import_useResizeObserver = require("../useResizeObserver");
+function useElementSize(target, initialSize, options) {
+  const initial = initialSize ?? { width: 0, height: 0 };
+  const size$ = (0, import_react.useObservable)({ width: initial.width, height: initial.height });
+  const onResize = (0, import_react2.useCallback)((entries) => {
+    for (const entry of entries) {
+      const el = entry.target;
+      const isSvg = el.namespaceURI?.includes("svg");
+      if (isSvg) {
+        const rect = el.getBoundingClientRect();
+        size$.assign({ width: rect.width, height: rect.height });
+      } else {
+        const box = options?.box ?? "content-box";
+        let w = 0, h = 0;
+        if (box === "border-box" && entry.borderBoxSize?.length) {
+          for (const b of entry.borderBoxSize) {
+            w += b.inlineSize;
+            h += b.blockSize;
+          }
+        } else if (box === "device-pixel-content-box" && entry.devicePixelContentBoxSize?.length) {
+          for (const b of entry.devicePixelContentBoxSize) {
+            w += b.inlineSize;
+            h += b.blockSize;
+          }
+        } else if (entry.contentBoxSize?.length) {
+          for (const b of entry.contentBoxSize) {
+            w += b.inlineSize;
+            h += b.blockSize;
+          }
+        } else {
+          w = entry.contentRect.width;
+          h = entry.contentRect.height;
+        }
+        size$.assign({ width: w, height: h });
+      }
+    }
+  }, []);
+  const { stop } = (0, import_useResizeObserver.useResizeObserver)(target, onResize, { box: options?.box });
+  (0, import_react.useObserveEffect)(() => {
+    const el = (0, import_useRef.getElement)(target);
+    if (!el) {
+      size$.assign({ width: initial.width, height: initial.height });
+      return;
+    }
+    const isSvg = el.namespaceURI?.includes("svg");
+    if (!isSvg) {
+      size$.assign({
+        width: el.offsetWidth ?? initial.width,
+        height: el.offsetHeight ?? initial.height
+      });
+    }
+  });
+  return { width$: size$.width, height$: size$.height, stop };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useElementSize
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementSize/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useObserveEffect } from \"@legendapp/state/react\";\nimport { useCallback } from \"react\";\nimport { getElement, MaybeElement } from \"../useRef$\";\nimport { useResizeObserver } from \"../useResizeObserver\";\n\nexport interface UseElementSizeOptions {\n  box?: \"content-box\" | \"border-box\" | \"device-pixel-content-box\";\n}\n\nexport interface UseElementSizeReturn {\n  width$: Observable<number>;\n  height$: Observable<number>;\n  stop: () => void;\n}\n\n/**\n * Tracks the width and height of a DOM element using ResizeObserver.\n * SVG elements use getBoundingClientRect() as fallback.\n *\n * @param target - Element to observe (Ref$, Observable<Element|null>, Document, Window, or null)\n * @param initialSize - Initial size values (default: { width: 0, height: 0 })\n * @param options - Optional box model option\n * @returns `{ width$, height$, stop }` — reactive size observables and manual stop function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { width$, height$ } = useElementSize(el$);\n * return <div ref={el$}>{width$.get()} x {height$.get()}</div>;\n * ```\n */\nexport function useElementSize(\n  target: MaybeElement,\n  initialSize?: { width: number; height: number },\n  options?: UseElementSizeOptions,\n): UseElementSizeReturn {\n  const initial = initialSize ?? { width: 0, height: 0 };\n  const size$ = useObservable({ width: initial.width, height: initial.height });\n\n  const onResize = useCallback<ResizeObserverCallback>((entries) => {\n    for (const entry of entries) {\n      const el = entry.target;\n      const isSvg = (el as Element).namespaceURI?.includes(\"svg\");\n\n      if (isSvg) {\n        const rect = el.getBoundingClientRect();\n        size$.assign({ width: rect.width, height: rect.height });\n      } else {\n        const box = options?.box ?? \"content-box\";\n        let w = 0,\n          h = 0;\n        if (box === \"border-box\" && entry.borderBoxSize?.length) {\n          for (const b of entry.borderBoxSize) {\n            w += b.inlineSize;\n            h += b.blockSize;\n          }\n        } else if (\n          box === \"device-pixel-content-box\" &&\n          entry.devicePixelContentBoxSize?.length\n        ) {\n          for (const b of entry.devicePixelContentBoxSize) {\n            w += b.inlineSize;\n            h += b.blockSize;\n          }\n        } else if (entry.contentBoxSize?.length) {\n          for (const b of entry.contentBoxSize) {\n            w += b.inlineSize;\n            h += b.blockSize;\n          }\n        } else {\n          w = entry.contentRect.width;\n          h = entry.contentRect.height;\n        }\n        size$.assign({ width: w, height: h });\n      }\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const { stop } = useResizeObserver(target, onResize, { box: options?.box });\n\n  // Set initial size from offsetWidth/Height after element mounts.\n  // Uses getElement (tracked) so this re-runs when target Ref$ changes.\n  useObserveEffect(() => {\n    const el = getElement(target) as HTMLElement | null;\n    if (!el) {\n      size$.assign({ width: initial.width, height: initial.height });\n      return;\n    }\n    const isSvg = (el as Element).namespaceURI?.includes(\"svg\");\n    if (!isSvg) {\n      size$.assign({\n        width: (el as HTMLElement).offsetWidth ?? initial.width,\n        height: (el as HTMLElement).offsetHeight ?? initial.height,\n      });\n    }\n  });\n\n  return { width$: size$.width, height$: size$.height, stop };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAgD;AAChD,IAAAA,gBAA4B;AAC5B,oBAAyC;AACzC,+BAAkC;AA4B3B,SAAS,eACd,QACA,aACA,SACsB;AACtB,QAAM,UAAU,eAAe,EAAE,OAAO,GAAG,QAAQ,EAAE;AACrD,QAAM,YAAQ,4BAAc,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,OAAO,CAAC;AAE5E,QAAM,eAAW,2BAAoC,CAAC,YAAY;AAChE,eAAW,SAAS,SAAS;AAC3B,YAAM,KAAK,MAAM;AACjB,YAAM,QAAS,GAAe,cAAc,SAAS,KAAK;AAE1D,UAAI,OAAO;AACT,cAAM,OAAO,GAAG,sBAAsB;AACtC,cAAM,OAAO,EAAE,OAAO,KAAK,OAAO,QAAQ,KAAK,OAAO,CAAC;AAAA,MACzD,OAAO;AACL,cAAM,MAAM,SAAS,OAAO;AAC5B,YAAI,IAAI,GACN,IAAI;AACN,YAAI,QAAQ,gBAAgB,MAAM,eAAe,QAAQ;AACvD,qBAAW,KAAK,MAAM,eAAe;AACnC,iBAAK,EAAE;AACP,iBAAK,EAAE;AAAA,UACT;AAAA,QACF,WACE,QAAQ,8BACR,MAAM,2BAA2B,QACjC;AACA,qBAAW,KAAK,MAAM,2BAA2B;AAC/C,iBAAK,EAAE;AACP,iBAAK,EAAE;AAAA,UACT;AAAA,QACF,WAAW,MAAM,gBAAgB,QAAQ;AACvC,qBAAW,KAAK,MAAM,gBAAgB;AACpC,iBAAK,EAAE;AACP,iBAAK,EAAE;AAAA,UACT;AAAA,QACF,OAAO;AACL,cAAI,MAAM,YAAY;AACtB,cAAI,MAAM,YAAY;AAAA,QACxB;AACA,cAAM,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAAA,MACtC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,KAAK,QAAI,4CAAkB,QAAQ,UAAU,EAAE,KAAK,SAAS,IAAI,CAAC;AAI1E,qCAAiB,MAAM;AACrB,UAAM,SAAK,0BAAW,MAAM;AAC5B,QAAI,CAAC,IAAI;AACP,YAAM,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,OAAO,CAAC;AAC7D;AAAA,IACF;AACA,UAAM,QAAS,GAAe,cAAc,SAAS,KAAK;AAC1D,QAAI,CAAC,OAAO;AACV,YAAM,OAAO;AAAA,QACX,OAAQ,GAAmB,eAAe,QAAQ;AAAA,QAClD,QAAS,GAAmB,gBAAgB,QAAQ;AAAA,MACtD,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO,EAAE,QAAQ,MAAM,OAAO,SAAS,MAAM,QAAQ,KAAK;AAC5D;","names":["import_react"]}

package/dist/elements/useElementSize/index.mjs

@@ -0,0 +1,61 @@
+import { useObservable, useObserveEffect } from "@legendapp/state/react";
+import { useCallback } from "react";
+import { getElement } from "../useRef$";
+import { useResizeObserver } from "../useResizeObserver";
+function useElementSize(target, initialSize, options) {
+  const initial = initialSize ?? { width: 0, height: 0 };
+  const size$ = useObservable({ width: initial.width, height: initial.height });
+  const onResize = useCallback((entries) => {
+    for (const entry of entries) {
+      const el = entry.target;
+      const isSvg = el.namespaceURI?.includes("svg");
+      if (isSvg) {
+        const rect = el.getBoundingClientRect();
+        size$.assign({ width: rect.width, height: rect.height });
+      } else {
+        const box = options?.box ?? "content-box";
+        let w = 0, h = 0;
+        if (box === "border-box" && entry.borderBoxSize?.length) {
+          for (const b of entry.borderBoxSize) {
+            w += b.inlineSize;
+            h += b.blockSize;
+          }
+        } else if (box === "device-pixel-content-box" && entry.devicePixelContentBoxSize?.length) {
+          for (const b of entry.devicePixelContentBoxSize) {
+            w += b.inlineSize;
+            h += b.blockSize;
+          }
+        } else if (entry.contentBoxSize?.length) {
+          for (const b of entry.contentBoxSize) {
+            w += b.inlineSize;
+            h += b.blockSize;
+          }
+        } else {
+          w = entry.contentRect.width;
+          h = entry.contentRect.height;
+        }
+        size$.assign({ width: w, height: h });
+      }
+    }
+  }, []);
+  const { stop } = useResizeObserver(target, onResize, { box: options?.box });
+  useObserveEffect(() => {
+    const el = getElement(target);
+    if (!el) {
+      size$.assign({ width: initial.width, height: initial.height });
+      return;
+    }
+    const isSvg = el.namespaceURI?.includes("svg");
+    if (!isSvg) {
+      size$.assign({
+        width: el.offsetWidth ?? initial.width,
+        height: el.offsetHeight ?? initial.height
+      });
+    }
+  });
+  return { width$: size$.width, height$: size$.height, stop };
+}
+export {
+  useElementSize
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementSize/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useObserveEffect } from \"@legendapp/state/react\";\nimport { useCallback } from \"react\";\nimport { getElement, MaybeElement } from \"../useRef$\";\nimport { useResizeObserver } from \"../useResizeObserver\";\n\nexport interface UseElementSizeOptions {\n  box?: \"content-box\" | \"border-box\" | \"device-pixel-content-box\";\n}\n\nexport interface UseElementSizeReturn {\n  width$: Observable<number>;\n  height$: Observable<number>;\n  stop: () => void;\n}\n\n/**\n * Tracks the width and height of a DOM element using ResizeObserver.\n * SVG elements use getBoundingClientRect() as fallback.\n *\n * @param target - Element to observe (Ref$, Observable<Element|null>, Document, Window, or null)\n * @param initialSize - Initial size values (default: { width: 0, height: 0 })\n * @param options - Optional box model option\n * @returns `{ width$, height$, stop }` — reactive size observables and manual stop function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { width$, height$ } = useElementSize(el$);\n * return <div ref={el$}>{width$.get()} x {height$.get()}</div>;\n * ```\n */\nexport function useElementSize(\n  target: MaybeElement,\n  initialSize?: { width: number; height: number },\n  options?: UseElementSizeOptions,\n): UseElementSizeReturn {\n  const initial = initialSize ?? { width: 0, height: 0 };\n  const size$ = useObservable({ width: initial.width, height: initial.height });\n\n  const onResize = useCallback<ResizeObserverCallback>((entries) => {\n    for (const entry of entries) {\n      const el = entry.target;\n      const isSvg = (el as Element).namespaceURI?.includes(\"svg\");\n\n      if (isSvg) {\n        const rect = el.getBoundingClientRect();\n        size$.assign({ width: rect.width, height: rect.height });\n      } else {\n        const box = options?.box ?? \"content-box\";\n        let w = 0,\n          h = 0;\n        if (box === \"border-box\" && entry.borderBoxSize?.length) {\n          for (const b of entry.borderBoxSize) {\n            w += b.inlineSize;\n            h += b.blockSize;\n          }\n        } else if (\n          box === \"device-pixel-content-box\" &&\n          entry.devicePixelContentBoxSize?.length\n        ) {\n          for (const b of entry.devicePixelContentBoxSize) {\n            w += b.inlineSize;\n            h += b.blockSize;\n          }\n        } else if (entry.contentBoxSize?.length) {\n          for (const b of entry.contentBoxSize) {\n            w += b.inlineSize;\n            h += b.blockSize;\n          }\n        } else {\n          w = entry.contentRect.width;\n          h = entry.contentRect.height;\n        }\n        size$.assign({ width: w, height: h });\n      }\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const { stop } = useResizeObserver(target, onResize, { box: options?.box });\n\n  // Set initial size from offsetWidth/Height after element mounts.\n  // Uses getElement (tracked) so this re-runs when target Ref$ changes.\n  useObserveEffect(() => {\n    const el = getElement(target) as HTMLElement | null;\n    if (!el) {\n      size$.assign({ width: initial.width, height: initial.height });\n      return;\n    }\n    const isSvg = (el as Element).namespaceURI?.includes(\"svg\");\n    if (!isSvg) {\n      size$.assign({\n        width: (el as HTMLElement).offsetWidth ?? initial.width,\n        height: (el as HTMLElement).offsetHeight ?? initial.height,\n      });\n    }\n  });\n\n  return { width$: size$.width, height$: size$.height, stop };\n}\n"],"mappings":"AACA,SAAS,eAAe,wBAAwB;AAChD,SAAS,mBAAmB;AAC5B,SAAS,kBAAgC;AACzC,SAAS,yBAAyB;AA4B3B,SAAS,eACd,QACA,aACA,SACsB;AACtB,QAAM,UAAU,eAAe,EAAE,OAAO,GAAG,QAAQ,EAAE;AACrD,QAAM,QAAQ,cAAc,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,OAAO,CAAC;AAE5E,QAAM,WAAW,YAAoC,CAAC,YAAY;AAChE,eAAW,SAAS,SAAS;AAC3B,YAAM,KAAK,MAAM;AACjB,YAAM,QAAS,GAAe,cAAc,SAAS,KAAK;AAE1D,UAAI,OAAO;AACT,cAAM,OAAO,GAAG,sBAAsB;AACtC,cAAM,OAAO,EAAE,OAAO,KAAK,OAAO,QAAQ,KAAK,OAAO,CAAC;AAAA,MACzD,OAAO;AACL,cAAM,MAAM,SAAS,OAAO;AAC5B,YAAI,IAAI,GACN,IAAI;AACN,YAAI,QAAQ,gBAAgB,MAAM,eAAe,QAAQ;AACvD,qBAAW,KAAK,MAAM,eAAe;AACnC,iBAAK,EAAE;AACP,iBAAK,EAAE;AAAA,UACT;AAAA,QACF,WACE,QAAQ,8BACR,MAAM,2BAA2B,QACjC;AACA,qBAAW,KAAK,MAAM,2BAA2B;AAC/C,iBAAK,EAAE;AACP,iBAAK,EAAE;AAAA,UACT;AAAA,QACF,WAAW,MAAM,gBAAgB,QAAQ;AACvC,qBAAW,KAAK,MAAM,gBAAgB;AACpC,iBAAK,EAAE;AACP,iBAAK,EAAE;AAAA,UACT;AAAA,QACF,OAAO;AACL,cAAI,MAAM,YAAY;AACtB,cAAI,MAAM,YAAY;AAAA,QACxB;AACA,cAAM,OAAO,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAAA,MACtC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,KAAK,IAAI,kBAAkB,QAAQ,UAAU,EAAE,KAAK,SAAS,IAAI,CAAC;AAI1E,mBAAiB,MAAM;AACrB,UAAM,KAAK,WAAW,MAAM;AAC5B,QAAI,CAAC,IAAI;AACP,YAAM,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,OAAO,CAAC;AAC7D;AAAA,IACF;AACA,UAAM,QAAS,GAAe,cAAc,SAAS,KAAK;AAC1D,QAAI,CAAC,OAAO;AACV,YAAM,OAAO;AAAA,QACX,OAAQ,GAAmB,eAAe,QAAQ;AAAA,QAClD,QAAS,GAAmB,gBAAgB,QAAQ;AAAA,MACtD,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO,EAAE,QAAQ,MAAM,OAAO,SAAS,MAAM,QAAQ,KAAK;AAC5D;","names":[]}

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

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

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

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

package/dist/elements/useElementVisibility/demo.js

@@ -0,0 +1,110 @@
+"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: () => UseElementVisibilityDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@legendapp/state/react");
+var import_useRef = require("../useRef$");
+var import__ = require(".");
+function UseElementVisibilityDemo() {
+  const el$ = (0, import_useRef.useRef$)();
+  const isVisible$ = (0, import__.useElementVisibility)(el$, { threshold: 0.5 });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "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: [
+          "isVisible:",
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "strong",
+            {
+              style: {
+                color: isVisible$.get() ? "var(--sl-color-green, #22c55e)" : "inherit"
+              },
+              children: String(isVisible$.get())
+            }
+          )
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        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/useElementVisibility/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementVisibility/demo.tsx"],"sourcesContent":["import { Computed } from \"@legendapp/state/react\";\nimport { useRef$ } from \"../useRef$\";\nimport { useElementVisibility } from \".\";\n\nexport default function UseElementVisibilityDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const isVisible$ = useElementVisibility(el$, { threshold: 0.5 });\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n      {/* Status bar */}\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              isVisible:{\" \"}\n              <strong\n                style={{\n                  color: isVisible$.get()\n                    ? \"var(--sl-color-green, #22c55e)\"\n                    : \"inherit\",\n                }}\n              >\n                {String(isVisible$.get())}\n              </strong>\n            </span>\n          )}\n        </Computed>\n      </div>\n\n      {/* Scrollable container */}\n      <div\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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBY;AAzBZ,mBAAyB;AACzB,oBAAwB;AACxB,eAAqC;AAEtB,SAAR,2BAA4C;AACjD,QAAM,UAAM,uBAAwB;AACpC,QAAM,iBAAa,+BAAqB,KAAK,EAAE,WAAW,IAAI,CAAC;AAE/D,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAM,GAEjE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAEA,sDAAC,yBACE,gBACC,6CAAC,UAAK;AAAA;AAAA,UACO;AAAA,UACX;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO,WAAW,IAAI,IAClB,mCACA;AAAA,cACN;AAAA,cAEC,iBAAO,WAAW,IAAI,CAAC;AAAA;AAAA,UAC1B;AAAA,WACF,GAEJ;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,UAAU;AAAA,QACZ;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,QAAQ;AAAA,gBACR,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cACD;AAAA;AAAA,UAED;AAAA,UAEA,4CAAC,yBACE,gBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,QAAQ,aACN,WAAW,IAAI,IACX,mCACA,iCACN;AAAA,gBACA,YAAY,WAAW,IAAI,IACvB,uCACA;AAAA,cACN;AAAA,cACD;AAAA;AAAA,UAED,GAEJ;AAAA,UAEA,4CAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,GAAG;AAAA;AAAA;AAAA,IACnC;AAAA,KACF;AAEJ;","names":[]}

package/dist/elements/useElementVisibility/demo.mjs

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Computed } from "@legendapp/state/react";
+import { useRef$ } from "../useRef$";
+import { useElementVisibility } from ".";
+function UseElementVisibilityDemo() {
+  const el$ = useRef$();
+  const isVisible$ = useElementVisibility(el$, { threshold: 0.5 });
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx(
+      "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: [
+          "isVisible:",
+          " ",
+          /* @__PURE__ */ jsx(
+            "strong",
+            {
+              style: {
+                color: isVisible$.get() ? "var(--sl-color-green, #22c55e)" : "inherit"
+              },
+              children: String(isVisible$.get())
+            }
+          )
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        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 {
+  UseElementVisibilityDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementVisibility/demo.tsx"],"sourcesContent":["import { Computed } from \"@legendapp/state/react\";\nimport { useRef$ } from \"../useRef$\";\nimport { useElementVisibility } from \".\";\n\nexport default function UseElementVisibilityDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const isVisible$ = useElementVisibility(el$, { threshold: 0.5 });\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n      {/* Status bar */}\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              isVisible:{\" \"}\n              <strong\n                style={{\n                  color: isVisible$.get()\n                    ? \"var(--sl-color-green, #22c55e)\"\n                    : \"inherit\",\n                }}\n              >\n                {String(isVisible$.get())}\n              </strong>\n            </span>\n          )}\n        </Computed>\n      </div>\n\n      {/* Scrollable container */}\n      <div\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":"AAyBY,SAEE,KAFF;AAzBZ,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,4BAA4B;AAEtB,SAAR,2BAA4C;AACjD,QAAM,MAAM,QAAwB;AACpC,QAAM,aAAa,qBAAqB,KAAK,EAAE,WAAW,IAAI,CAAC;AAE/D,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,MAAM,GAEjE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAEA,8BAAC,YACE,gBACC,qBAAC,UAAK;AAAA;AAAA,UACO;AAAA,UACX;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,OAAO,WAAW,IAAI,IAClB,mCACA;AAAA,cACN;AAAA,cAEC,iBAAO,WAAW,IAAI,CAAC;AAAA;AAAA,UAC1B;AAAA,WACF,GAEJ;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,UAAU;AAAA,QACZ;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,gBAAgB;AAAA,gBAChB,QAAQ;AAAA,gBACR,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cACD;AAAA;AAAA,UAED;AAAA,UAEA,oBAAC,YACE,gBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,QAAQ;AAAA,gBACR,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,QAAQ,aACN,WAAW,IAAI,IACX,mCACA,iCACN;AAAA,gBACA,YAAY,WAAW,IAAI,IACvB,uCACA;AAAA,cACN;AAAA,cACD;AAAA;AAAA,UAED,GAEJ;AAAA,UAEA,oBAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,GAAG;AAAA;AAAA;AAAA,IACnC;AAAA,KACF;AAEJ;","names":[]}