@usels/core 0.0.1-beta.3

package/dist/elements/useDocumentVisibility/index.js

@@ -0,0 +1,45 @@
+"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 useDocumentVisibility_exports = {};
+__export(useDocumentVisibility_exports, {
+  useDocumentVisibility: () => useDocumentVisibility
+});
+module.exports = __toCommonJS(useDocumentVisibility_exports);
+var import_react = require("@legendapp/state/react");
+// @__NO_SIDE_EFFECTS__
+function useDocumentVisibility() {
+  const visibility$ = (0, import_react.useObservable)("visible");
+  (0, import_react.useMount)(() => {
+    visibility$.set(document.visibilityState);
+    const handler = () => {
+      visibility$.set(document.visibilityState);
+    };
+    document.addEventListener("visibilitychange", handler, { passive: true });
+    return () => {
+      document.removeEventListener("visibilitychange", handler);
+    };
+  });
+  return visibility$;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDocumentVisibility
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useDocumentVisibility/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useObservable, useMount } from \"@legendapp/state/react\";\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useDocumentVisibility(): Observable<DocumentVisibilityState> {\n  // Always initialize with 'visible' to match SSR output and avoid hydration mismatch.\n  // The actual value is synced after mount.\n  const visibility$ = useObservable<DocumentVisibilityState>(\"visible\");\n\n  useMount(() => {\n    visibility$.set(document.visibilityState);\n\n    const handler = () => {\n      visibility$.set(document.visibilityState);\n    };\n\n    document.addEventListener(\"visibilitychange\", handler, { passive: true });\n\n    return () => {\n      document.removeEventListener(\"visibilitychange\", handler);\n    };\n  });\n\n  return visibility$;\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAwC;AAAA;AAGjC,SAAS,wBAA6D;AAG3E,QAAM,kBAAc,4BAAuC,SAAS;AAEpE,6BAAS,MAAM;AACb,gBAAY,IAAI,SAAS,eAAe;AAExC,UAAM,UAAU,MAAM;AACpB,kBAAY,IAAI,SAAS,eAAe;AAAA,IAC1C;AAEA,aAAS,iBAAiB,oBAAoB,SAAS,EAAE,SAAS,KAAK,CAAC;AAExE,WAAO,MAAM;AACX,eAAS,oBAAoB,oBAAoB,OAAO;AAAA,IAC1D;AAAA,EACF,CAAC;AAED,SAAO;AACT;","names":[]}

package/dist/elements/useDocumentVisibility/index.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { useObservable, useMount } from "@legendapp/state/react";
+// @__NO_SIDE_EFFECTS__
+function useDocumentVisibility() {
+  const visibility$ = useObservable("visible");
+  useMount(() => {
+    visibility$.set(document.visibilityState);
+    const handler = () => {
+      visibility$.set(document.visibilityState);
+    };
+    document.addEventListener("visibilitychange", handler, { passive: true });
+    return () => {
+      document.removeEventListener("visibilitychange", handler);
+    };
+  });
+  return visibility$;
+}
+export {
+  useDocumentVisibility
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useDocumentVisibility/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useObservable, useMount } from \"@legendapp/state/react\";\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useDocumentVisibility(): Observable<DocumentVisibilityState> {\n  // Always initialize with 'visible' to match SSR output and avoid hydration mismatch.\n  // The actual value is synced after mount.\n  const visibility$ = useObservable<DocumentVisibilityState>(\"visible\");\n\n  useMount(() => {\n    visibility$.set(document.visibilityState);\n\n    const handler = () => {\n      visibility$.set(document.visibilityState);\n    };\n\n    document.addEventListener(\"visibilitychange\", handler, { passive: true });\n\n    return () => {\n      document.removeEventListener(\"visibilitychange\", handler);\n    };\n  });\n\n  return visibility$;\n}"],"mappings":";AAEA,SAAS,eAAe,gBAAgB;AAAA;AAGjC,SAAS,wBAA6D;AAG3E,QAAM,cAAc,cAAuC,SAAS;AAEpE,WAAS,MAAM;AACb,gBAAY,IAAI,SAAS,eAAe;AAExC,UAAM,UAAU,MAAM;AACpB,kBAAY,IAAI,SAAS,eAAe;AAAA,IAC1C;AAEA,aAAS,iBAAiB,oBAAoB,SAAS,EAAE,SAAS,KAAK,CAAC;AAExE,WAAO,MAAM;AACX,eAAS,oBAAoB,oBAAoB,OAAO;AAAA,IAC1D;AAAA,EACF,CAAC;AAED,SAAO;AACT;","names":[]}

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

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

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

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

package/dist/elements/useElementBounding/demo.js

@@ -0,0 +1,86 @@
+"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: () => UseElementBoundingDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_useRef = require("../useRef$");
+var import__ = require(".");
+function UseElementBoundingDemo() {
+  const el$ = (0, import_useRef.useRef$)();
+  const { x$, y$, top$, left$, width$, height$ } = (0, import__.useElementBounding)(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: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+          gap: "6px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          padding: "10px 14px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          ["x", x$.get()],
+          ["y", y$.get()],
+          ["top", top$.get()],
+          ["left", left$.get()],
+          ["width", width$.get()],
+          ["height", height$.get()]
+        ].map(([label, val]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+          label,
+          ": ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+            Math.round(val),
+            "px"
+          ] })
+        ] }, label))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: el$,
+        style: {
+          resize: "both",
+          overflow: "auto",
+          width: "240px",
+          height: "100px",
+          padding: "12px",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          color: "var(--sl-color-gray-3, #94a3b8)",
+          userSelect: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: "resize me \u2198"
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementBounding/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useElementBounding } from \".\";\n\nexport default function UseElementBoundingDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const { x$, y$, top$, left$, width$, height$ } = useElementBounding(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      {/* Bounding values readout */}\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(3, 1fr)\",\n          gap: \"6px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          padding: \"10px 14px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        {(\n          [\n            [\"x\", x$.get()],\n            [\"y\", y$.get()],\n            [\"top\", top$.get()],\n            [\"left\", left$.get()],\n            [\"width\", width$.get()],\n            [\"height\", height$.get()],\n          ] as [string, number][]\n        ).map(([label, val]) => (\n          <span key={label}>\n            {label}: <strong>{Math.round(val)}px</strong>\n          </span>\n        ))}\n      </div>\n\n      {/* Resizable target element */}\n      <div\n        ref={el$}\n        style={{\n          resize: \"both\",\n          overflow: \"auto\",\n          width: \"240px\",\n          height: \"100px\",\n          padding: \"12px\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n          userSelect: \"none\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        resize me ↘\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUM;AAVN,oBAAwB;AACxB,eAAmC;AAEpB,SAAR,yBAA0C;AAC/C,QAAM,UAAM,uBAAwB;AACpC,QAAM,EAAE,IAAI,IAAI,MAAM,OAAO,QAAQ,QAAQ,QAAI,6BAAmB,GAAG;AAEvE,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAElE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAGE;AAAA,UACE,CAAC,KAAK,GAAG,IAAI,CAAC;AAAA,UACd,CAAC,KAAK,GAAG,IAAI,CAAC;AAAA,UACd,CAAC,OAAO,KAAK,IAAI,CAAC;AAAA,UAClB,CAAC,QAAQ,MAAM,IAAI,CAAC;AAAA,UACpB,CAAC,SAAS,OAAO,IAAI,CAAC;AAAA,UACtB,CAAC,UAAU,QAAQ,IAAI,CAAC;AAAA,QAC1B,EACA,IAAI,CAAC,CAAC,OAAO,GAAG,MAChB,6CAAC,UACE;AAAA;AAAA,UAAM;AAAA,UAAE,6CAAC,YAAQ;AAAA,iBAAK,MAAM,GAAG;AAAA,YAAE;AAAA,aAAE;AAAA,aAD3B,KAEX,CACD;AAAA;AAAA,IACH;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,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,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,QAClB;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/elements/useElementBounding/demo.mjs

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef$ } from "../useRef$";
+import { useElementBounding } from ".";
+function UseElementBoundingDemo() {
+  const el$ = useRef$();
+  const { x$, y$, top$, left$, width$, height$ } = useElementBounding(el$);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+          gap: "6px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          padding: "10px 14px",
+          background: "var(--sl-color-gray-6, #f1f5f9)",
+          borderRadius: "6px"
+        },
+        children: [
+          ["x", x$.get()],
+          ["y", y$.get()],
+          ["top", top$.get()],
+          ["left", left$.get()],
+          ["width", width$.get()],
+          ["height", height$.get()]
+        ].map(([label, val]) => /* @__PURE__ */ jsxs("span", { children: [
+          label,
+          ": ",
+          /* @__PURE__ */ jsxs("strong", { children: [
+            Math.round(val),
+            "px"
+          ] })
+        ] }, label))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: el$,
+        style: {
+          resize: "both",
+          overflow: "auto",
+          width: "240px",
+          height: "100px",
+          padding: "12px",
+          border: "1px solid var(--sl-color-gray-5, #cbd5e1)",
+          borderRadius: "6px",
+          fontFamily: "monospace",
+          fontSize: "13px",
+          color: "var(--sl-color-gray-3, #94a3b8)",
+          userSelect: "none",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: "resize me \u2198"
+      }
+    )
+  ] });
+}
+export {
+  UseElementBoundingDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementBounding/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useElementBounding } from \".\";\n\nexport default function UseElementBoundingDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const { x$, y$, top$, left$, width$, height$ } = useElementBounding(el$);\n\n  return (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"12px\" }}>\n      {/* Bounding values readout */}\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(3, 1fr)\",\n          gap: \"6px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          padding: \"10px 14px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        {(\n          [\n            [\"x\", x$.get()],\n            [\"y\", y$.get()],\n            [\"top\", top$.get()],\n            [\"left\", left$.get()],\n            [\"width\", width$.get()],\n            [\"height\", height$.get()],\n          ] as [string, number][]\n        ).map(([label, val]) => (\n          <span key={label}>\n            {label}: <strong>{Math.round(val)}px</strong>\n          </span>\n        ))}\n      </div>\n\n      {/* Resizable target element */}\n      <div\n        ref={el$}\n        style={{\n          resize: \"both\",\n          overflow: \"auto\",\n          width: \"240px\",\n          height: \"100px\",\n          padding: \"12px\",\n          border: \"1px solid var(--sl-color-gray-5, #cbd5e1)\",\n          borderRadius: \"6px\",\n          fontFamily: \"monospace\",\n          fontSize: \"13px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n          userSelect: \"none\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        resize me ↘\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAUM,cAuBe,YAvBf;AAVN,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAEpB,SAAR,yBAA0C;AAC/C,QAAM,MAAM,QAAwB;AACpC,QAAM,EAAE,IAAI,IAAI,MAAM,OAAO,QAAQ,QAAQ,IAAI,mBAAmB,GAAG;AAEvE,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAO,GAElE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,qBAAqB;AAAA,UACrB,KAAK;AAAA,UACL,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,cAAc;AAAA,QAChB;AAAA,QAGE;AAAA,UACE,CAAC,KAAK,GAAG,IAAI,CAAC;AAAA,UACd,CAAC,KAAK,GAAG,IAAI,CAAC;AAAA,UACd,CAAC,OAAO,KAAK,IAAI,CAAC;AAAA,UAClB,CAAC,QAAQ,MAAM,IAAI,CAAC;AAAA,UACpB,CAAC,SAAS,OAAO,IAAI,CAAC;AAAA,UACtB,CAAC,UAAU,QAAQ,IAAI,CAAC;AAAA,QAC1B,EACA,IAAI,CAAC,CAAC,OAAO,GAAG,MAChB,qBAAC,UACE;AAAA;AAAA,UAAM;AAAA,UAAE,qBAAC,YAAQ;AAAA,iBAAK,MAAM,GAAG;AAAA,YAAE;AAAA,aAAE;AAAA,aAD3B,KAEX,CACD;AAAA;AAAA,IACH;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,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,OAAO;AAAA,UACP,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,QAClB;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,46 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.mjs';
+import { DeepMaybeObservable } from '../../types.mjs';
+import 'react';
+
+interface UseElementBoundingOptions {
+    /** Reset all values to 0 when element unmounts. Default: true */
+    reset?: boolean;
+    /** Re-calculate on window resize. Default: true */
+    windowResize?: boolean;
+    /** Re-calculate on window scroll. Default: true */
+    windowScroll?: boolean;
+    /** Calculate immediately on mount. Default: true */
+    immediate?: boolean;
+    /** Use requestAnimationFrame to read rect after CSS transforms settle. Default: true */
+    useCssTransforms?: boolean;
+}
+interface UseElementBoundingReturn {
+    x$: Observable<number>;
+    y$: Observable<number>;
+    top$: Observable<number>;
+    right$: Observable<number>;
+    bottom$: Observable<number>;
+    left$: Observable<number>;
+    width$: Observable<number>;
+    height$: Observable<number>;
+    update: () => void;
+}
+/**
+ * Tracks the bounding rect of a DOM element (x, y, top, right, bottom, left, width, height).
+ * Observes ResizeObserver, MutationObserver (style/class changes), window scroll, and resize.
+ *
+ * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null
+ * @param options - Configuration options
+ * @returns Reactive bounding rect values plus a manual `update()` function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { top$, left$, width$, height$ } = useElementBounding(el$);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useElementBounding(target: MaybeElement, options?: DeepMaybeObservable<UseElementBoundingOptions>): UseElementBoundingReturn;
+
+export { type UseElementBoundingOptions, type UseElementBoundingReturn, useElementBounding };

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

@@ -0,0 +1,46 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.js';
+import { DeepMaybeObservable } from '../../types.js';
+import 'react';
+
+interface UseElementBoundingOptions {
+    /** Reset all values to 0 when element unmounts. Default: true */
+    reset?: boolean;
+    /** Re-calculate on window resize. Default: true */
+    windowResize?: boolean;
+    /** Re-calculate on window scroll. Default: true */
+    windowScroll?: boolean;
+    /** Calculate immediately on mount. Default: true */
+    immediate?: boolean;
+    /** Use requestAnimationFrame to read rect after CSS transforms settle. Default: true */
+    useCssTransforms?: boolean;
+}
+interface UseElementBoundingReturn {
+    x$: Observable<number>;
+    y$: Observable<number>;
+    top$: Observable<number>;
+    right$: Observable<number>;
+    bottom$: Observable<number>;
+    left$: Observable<number>;
+    width$: Observable<number>;
+    height$: Observable<number>;
+    update: () => void;
+}
+/**
+ * Tracks the bounding rect of a DOM element (x, y, top, right, bottom, left, width, height).
+ * Observes ResizeObserver, MutationObserver (style/class changes), window scroll, and resize.
+ *
+ * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null
+ * @param options - Configuration options
+ * @returns Reactive bounding rect values plus a manual `update()` function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const { top$, left$, width$, height$ } = useElementBounding(el$);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useElementBounding(target: MaybeElement, options?: DeepMaybeObservable<UseElementBoundingOptions>): UseElementBoundingReturn;
+
+export { type UseElementBoundingOptions, type UseElementBoundingReturn, useElementBounding };

package/dist/elements/useElementBounding/index.js

@@ -0,0 +1,122 @@
+"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 useElementBounding_exports = {};
+__export(useElementBounding_exports, {
+  useElementBounding: () => useElementBounding
+});
+module.exports = __toCommonJS(useElementBounding_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_useRef = require("../useRef$");
+var import_useResizeObserver = require("../useResizeObserver");
+var import_useMutationObserver = require("../useMutationObserver");
+var import_useEventListener = require("../../browser/useEventListener");
+var import_shared = require("../../shared");
+var import_useMayObservableOptions = require("../../function/useMayObservableOptions");
+const ZERO = {
+  x: 0,
+  y: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+const win = typeof window !== "undefined" ? window : null;
+function useElementBounding(target, options) {
+  const opts$ = (0, import_useMayObservableOptions.useMayObservableOptions)(options, {
+    immediate: "peek"
+  });
+  const bounding$ = (0, import_react.useObservable)({ ...ZERO });
+  const unmountedRef = (0, import_react2.useRef)(false);
+  const rafRef = (0, import_react2.useRef)(null);
+  const recalculate = (0, import_react2.useCallback)(() => {
+    const el = (0, import_useRef.peekElement)(target);
+    if (!el || !(el instanceof Element)) {
+      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    bounding$.assign({
+      x: rect.x,
+      y: rect.y,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height
+    });
+  }, []);
+  const update = (0, import_react2.useCallback)(() => {
+    if (opts$.useCssTransforms.peek() !== false) {
+      rafRef.current = requestAnimationFrame(() => {
+        if (!unmountedRef.current) recalculate();
+      });
+    } else {
+      recalculate();
+    }
+  }, [recalculate]);
+  (0, import_useResizeObserver.useResizeObserver)(target, update);
+  (0, import_useMutationObserver.useMutationObserver)(target, update, {
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+  (0, import_useEventListener.useEventListener)(
+    (0, import_shared.isWindow)(win) && opts$.windowScroll.peek() !== false ? win : null,
+    "scroll",
+    update,
+    { passive: true }
+  );
+  (0, import_useEventListener.useEventListener)(
+    (0, import_shared.isWindow)(win) && opts$.windowResize.peek() !== false ? win : null,
+    "resize",
+    update,
+    { passive: true }
+  );
+  (0, import_react2.useEffect)(() => {
+    unmountedRef.current = false;
+    if (opts$.immediate.peek() !== false) update();
+    return () => {
+      unmountedRef.current = true;
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });
+    };
+  }, []);
+  return {
+    x$: bounding$.x,
+    y$: bounding$.y,
+    top$: bounding$.top,
+    right$: bounding$.right,
+    bottom$: bounding$.bottom,
+    left$: bounding$.left,
+    width$: bounding$.width,
+    height$: bounding$.height,
+    update
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useElementBounding
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementBounding/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport { type MaybeElement, peekElement } from \"../useRef$\";\nimport { useResizeObserver } from \"../useResizeObserver\";\nimport { useMutationObserver } from \"../useMutationObserver\";\nimport { useEventListener } from \"../../browser/useEventListener\";\nimport { isWindow } from \"../../shared\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { DeepMaybeObservable } from \"../../types\";\n\nexport interface UseElementBoundingOptions {\n  /** Reset all values to 0 when element unmounts. Default: true */\n  reset?: boolean;\n  /** Re-calculate on window resize. Default: true */\n  windowResize?: boolean;\n  /** Re-calculate on window scroll. Default: true */\n  windowScroll?: boolean;\n  /** Calculate immediately on mount. Default: true */\n  immediate?: boolean;\n  /** Use requestAnimationFrame to read rect after CSS transforms settle. Default: true */\n  useCssTransforms?: boolean;\n}\n\nexport interface UseElementBoundingReturn {\n  x$: Observable<number>;\n  y$: Observable<number>;\n  top$: Observable<number>;\n  right$: Observable<number>;\n  bottom$: Observable<number>;\n  left$: Observable<number>;\n  width$: Observable<number>;\n  height$: Observable<number>;\n  update: () => void;\n}\n\nconst ZERO = {\n  x: 0,\n  y: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n// isWindow(window) returns false in SSR (typeof window === \"undefined\"), true in browser.\nconst win = typeof window !== \"undefined\" ? window : null;\n\n/**\n * Tracks the bounding rect of a DOM element (x, y, top, right, bottom, left, width, height).\n * Observes ResizeObserver, MutationObserver (style/class changes), window scroll, and resize.\n *\n * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null\n * @param options - Configuration options\n * @returns Reactive bounding rect values plus a manual `update()` function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { top$, left$, width$, height$ } = useElementBounding(el$);\n * return <div ref={el$} />;\n * ```\n */\nexport function useElementBounding(\n  target: MaybeElement,\n  options?: DeepMaybeObservable<UseElementBoundingOptions>,\n): UseElementBoundingReturn {\n  const opts$ = useMayObservableOptions<UseElementBoundingOptions>(options, {\n    immediate: \"peek\",\n  });\n\n  const bounding$ = useObservable({ ...ZERO });\n\n  // Guards rAF callbacks from updating state after unmount.\n  const unmountedRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n\n  const recalculate = useCallback(() => {\n    const el = peekElement(target) as Element | null;\n    if (!el || !(el instanceof Element)) {\n      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });\n      return;\n    }\n    const rect = el.getBoundingClientRect();\n    bounding$.assign({\n      x: rect.x,\n      y: rect.y,\n      top: rect.top,\n      right: rect.right,\n      bottom: rect.bottom,\n      left: rect.left,\n      width: rect.width,\n      height: rect.height,\n    });\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const update = useCallback(() => {\n    if (opts$.useCssTransforms.peek() !== false) {\n      rafRef.current = requestAnimationFrame(() => {\n        if (!unmountedRef.current) recalculate();\n      });\n    } else {\n      recalculate();\n    }\n  }, [recalculate]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Observe size changes\n  useResizeObserver(target, update);\n\n  // Observe style/class attribute changes (e.g. CSS transitions, class toggles)\n  useMutationObserver(target, update, {\n    attributes: true,\n    attributeFilter: [\"style\", \"class\"],\n  });\n\n  // Observe window scroll / resize (always call hooks unconditionally — Rules of Hooks)\n  // isWindow(win) is false in SSR, so target becomes null outside the browser.\n  // peek() — evaluated once at render time, no reactive subscription needed.\n  useEventListener(\n    isWindow(win) && opts$.windowScroll.peek() !== false ? win : null,\n    \"scroll\",\n    update,\n    { passive: true },\n  );\n  useEventListener(\n    isWindow(win) && opts$.windowResize.peek() !== false ? win : null,\n    \"resize\",\n    update,\n    { passive: true },\n  );\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    unmountedRef.current = false;\n    if (opts$.immediate.peek() !== false) update();\n    return () => {\n      unmountedRef.current = true;\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });\n    };\n  }, []);\n\n  return {\n    x$: bounding$.x,\n    y$: bounding$.y,\n    top$: bounding$.top,\n    right$: bounding$.right,\n    bottom$: bounding$.bottom,\n    left$: bounding$.left,\n    width$: bounding$.width,\n    height$: bounding$.height,\n    update,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA8B;AAC9B,IAAAA,gBAA+C;AAC/C,oBAA+C;AAC/C,+BAAkC;AAClC,iCAAoC;AACpC,8BAAiC;AACjC,oBAAyB;AACzB,qCAAwC;AA4BxC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,GAAG;AAAA,EACH,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAGA,MAAM,MAAM,OAAO,WAAW,cAAc,SAAS;AAiB9C,SAAS,mBACd,QACA,SAC0B;AAC1B,QAAM,YAAQ,wDAAmD,SAAS;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,gBAAY,4BAAc,EAAE,GAAG,KAAK,CAAC;AAG3C,QAAM,mBAAe,sBAAO,KAAK;AACjC,QAAM,aAAS,sBAAsB,IAAI;AAEzC,QAAM,kBAAc,2BAAY,MAAM;AACpC,UAAM,SAAK,2BAAY,MAAM;AAC7B,QAAI,CAAC,MAAM,EAAE,cAAc,UAAU;AACnC,UAAI,MAAM,MAAM,KAAK,MAAM,MAAO,WAAU,OAAO,EAAE,GAAG,KAAK,CAAC;AAC9D;AAAA,IACF;AACA,UAAM,OAAO,GAAG,sBAAsB;AACtC,cAAU,OAAO;AAAA,MACf,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,KAAK,KAAK;AAAA,MACV,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,aAAS,2BAAY,MAAM;AAC/B,QAAI,MAAM,iBAAiB,KAAK,MAAM,OAAO;AAC3C,aAAO,UAAU,sBAAsB,MAAM;AAC3C,YAAI,CAAC,aAAa,QAAS,aAAY;AAAA,MACzC,CAAC;AAAA,IACH,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAGhB,kDAAkB,QAAQ,MAAM;AAGhC,sDAAoB,QAAQ,QAAQ;AAAA,IAClC,YAAY;AAAA,IACZ,iBAAiB,CAAC,SAAS,OAAO;AAAA,EACpC,CAAC;AAKD;AAAA,QACE,wBAAS,GAAG,KAAK,MAAM,aAAa,KAAK,MAAM,QAAQ,MAAM;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AACA;AAAA,QACE,wBAAS,GAAG,KAAK,MAAM,aAAa,KAAK,MAAM,QAAQ,MAAM;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AAGA,+BAAU,MAAM;AACd,iBAAa,UAAU;AACvB,QAAI,MAAM,UAAU,KAAK,MAAM,MAAO,QAAO;AAC7C,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,UAAI,OAAO,YAAY,MAAM;AAC3B,6BAAqB,OAAO,OAAO;AACnC,eAAO,UAAU;AAAA,MACnB;AACA,UAAI,MAAM,MAAM,KAAK,MAAM,MAAO,WAAU,OAAO,EAAE,GAAG,KAAK,CAAC;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,MAAM,UAAU;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB,SAAS,UAAU;AAAA,IACnB,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,SAAS,UAAU;AAAA,IACnB;AAAA,EACF;AACF;","names":["import_react"]}

package/dist/elements/useElementBounding/index.mjs

@@ -0,0 +1,98 @@
+import { useObservable } from "@legendapp/state/react";
+import { useCallback, useEffect, useRef } from "react";
+import { peekElement } from "../useRef$";
+import { useResizeObserver } from "../useResizeObserver";
+import { useMutationObserver } from "../useMutationObserver";
+import { useEventListener } from "../../browser/useEventListener";
+import { isWindow } from "../../shared";
+import { useMayObservableOptions } from "../../function/useMayObservableOptions";
+const ZERO = {
+  x: 0,
+  y: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: 0,
+  height: 0
+};
+const win = typeof window !== "undefined" ? window : null;
+function useElementBounding(target, options) {
+  const opts$ = useMayObservableOptions(options, {
+    immediate: "peek"
+  });
+  const bounding$ = useObservable({ ...ZERO });
+  const unmountedRef = useRef(false);
+  const rafRef = useRef(null);
+  const recalculate = useCallback(() => {
+    const el = peekElement(target);
+    if (!el || !(el instanceof Element)) {
+      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    bounding$.assign({
+      x: rect.x,
+      y: rect.y,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height
+    });
+  }, []);
+  const update = useCallback(() => {
+    if (opts$.useCssTransforms.peek() !== false) {
+      rafRef.current = requestAnimationFrame(() => {
+        if (!unmountedRef.current) recalculate();
+      });
+    } else {
+      recalculate();
+    }
+  }, [recalculate]);
+  useResizeObserver(target, update);
+  useMutationObserver(target, update, {
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+  useEventListener(
+    isWindow(win) && opts$.windowScroll.peek() !== false ? win : null,
+    "scroll",
+    update,
+    { passive: true }
+  );
+  useEventListener(
+    isWindow(win) && opts$.windowResize.peek() !== false ? win : null,
+    "resize",
+    update,
+    { passive: true }
+  );
+  useEffect(() => {
+    unmountedRef.current = false;
+    if (opts$.immediate.peek() !== false) update();
+    return () => {
+      unmountedRef.current = true;
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });
+    };
+  }, []);
+  return {
+    x$: bounding$.x,
+    y$: bounding$.y,
+    top$: bounding$.top,
+    right$: bounding$.right,
+    bottom$: bounding$.bottom,
+    left$: bounding$.left,
+    width$: bounding$.width,
+    height$: bounding$.height,
+    update
+  };
+}
+export {
+  useElementBounding
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useElementBounding/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { useCallback, useEffect, useRef } from \"react\";\nimport { type MaybeElement, peekElement } from \"../useRef$\";\nimport { useResizeObserver } from \"../useResizeObserver\";\nimport { useMutationObserver } from \"../useMutationObserver\";\nimport { useEventListener } from \"../../browser/useEventListener\";\nimport { isWindow } from \"../../shared\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { DeepMaybeObservable } from \"../../types\";\n\nexport interface UseElementBoundingOptions {\n  /** Reset all values to 0 when element unmounts. Default: true */\n  reset?: boolean;\n  /** Re-calculate on window resize. Default: true */\n  windowResize?: boolean;\n  /** Re-calculate on window scroll. Default: true */\n  windowScroll?: boolean;\n  /** Calculate immediately on mount. Default: true */\n  immediate?: boolean;\n  /** Use requestAnimationFrame to read rect after CSS transforms settle. Default: true */\n  useCssTransforms?: boolean;\n}\n\nexport interface UseElementBoundingReturn {\n  x$: Observable<number>;\n  y$: Observable<number>;\n  top$: Observable<number>;\n  right$: Observable<number>;\n  bottom$: Observable<number>;\n  left$: Observable<number>;\n  width$: Observable<number>;\n  height$: Observable<number>;\n  update: () => void;\n}\n\nconst ZERO = {\n  x: 0,\n  y: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n  width: 0,\n  height: 0,\n};\n\n// isWindow(window) returns false in SSR (typeof window === \"undefined\"), true in browser.\nconst win = typeof window !== \"undefined\" ? window : null;\n\n/**\n * Tracks the bounding rect of a DOM element (x, y, top, right, bottom, left, width, height).\n * Observes ResizeObserver, MutationObserver (style/class changes), window scroll, and resize.\n *\n * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null\n * @param options - Configuration options\n * @returns Reactive bounding rect values plus a manual `update()` function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { top$, left$, width$, height$ } = useElementBounding(el$);\n * return <div ref={el$} />;\n * ```\n */\nexport function useElementBounding(\n  target: MaybeElement,\n  options?: DeepMaybeObservable<UseElementBoundingOptions>,\n): UseElementBoundingReturn {\n  const opts$ = useMayObservableOptions<UseElementBoundingOptions>(options, {\n    immediate: \"peek\",\n  });\n\n  const bounding$ = useObservable({ ...ZERO });\n\n  // Guards rAF callbacks from updating state after unmount.\n  const unmountedRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n\n  const recalculate = useCallback(() => {\n    const el = peekElement(target) as Element | null;\n    if (!el || !(el instanceof Element)) {\n      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });\n      return;\n    }\n    const rect = el.getBoundingClientRect();\n    bounding$.assign({\n      x: rect.x,\n      y: rect.y,\n      top: rect.top,\n      right: rect.right,\n      bottom: rect.bottom,\n      left: rect.left,\n      width: rect.width,\n      height: rect.height,\n    });\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const update = useCallback(() => {\n    if (opts$.useCssTransforms.peek() !== false) {\n      rafRef.current = requestAnimationFrame(() => {\n        if (!unmountedRef.current) recalculate();\n      });\n    } else {\n      recalculate();\n    }\n  }, [recalculate]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Observe size changes\n  useResizeObserver(target, update);\n\n  // Observe style/class attribute changes (e.g. CSS transitions, class toggles)\n  useMutationObserver(target, update, {\n    attributes: true,\n    attributeFilter: [\"style\", \"class\"],\n  });\n\n  // Observe window scroll / resize (always call hooks unconditionally — Rules of Hooks)\n  // isWindow(win) is false in SSR, so target becomes null outside the browser.\n  // peek() — evaluated once at render time, no reactive subscription needed.\n  useEventListener(\n    isWindow(win) && opts$.windowScroll.peek() !== false ? win : null,\n    \"scroll\",\n    update,\n    { passive: true },\n  );\n  useEventListener(\n    isWindow(win) && opts$.windowResize.peek() !== false ? win : null,\n    \"resize\",\n    update,\n    { passive: true },\n  );\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    unmountedRef.current = false;\n    if (opts$.immediate.peek() !== false) update();\n    return () => {\n      unmountedRef.current = true;\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n      if (opts$.reset.peek() !== false) bounding$.assign({ ...ZERO });\n    };\n  }, []);\n\n  return {\n    x$: bounding$.x,\n    y$: bounding$.y,\n    top$: bounding$.top,\n    right$: bounding$.right,\n    bottom$: bounding$.bottom,\n    left$: bounding$.left,\n    width$: bounding$.width,\n    height$: bounding$.height,\n    update,\n  };\n}\n"],"mappings":"AACA,SAAS,qBAAqB;AAC9B,SAAS,aAAa,WAAW,cAAc;AAC/C,SAA4B,mBAAmB;AAC/C,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,+BAA+B;AA4BxC,MAAM,OAAO;AAAA,EACX,GAAG;AAAA,EACH,GAAG;AAAA,EACH,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AACV;AAGA,MAAM,MAAM,OAAO,WAAW,cAAc,SAAS;AAiB9C,SAAS,mBACd,QACA,SAC0B;AAC1B,QAAM,QAAQ,wBAAmD,SAAS;AAAA,IACxE,WAAW;AAAA,EACb,CAAC;AAED,QAAM,YAAY,cAAc,EAAE,GAAG,KAAK,CAAC;AAG3C,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,SAAS,OAAsB,IAAI;AAEzC,QAAM,cAAc,YAAY,MAAM;AACpC,UAAM,KAAK,YAAY,MAAM;AAC7B,QAAI,CAAC,MAAM,EAAE,cAAc,UAAU;AACnC,UAAI,MAAM,MAAM,KAAK,MAAM,MAAO,WAAU,OAAO,EAAE,GAAG,KAAK,CAAC;AAC9D;AAAA,IACF;AACA,UAAM,OAAO,GAAG,sBAAsB;AACtC,cAAU,OAAO;AAAA,MACf,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,KAAK,KAAK;AAAA,MACV,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,MACb,MAAM,KAAK;AAAA,MACX,OAAO,KAAK;AAAA,MACZ,QAAQ,KAAK;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,YAAY,MAAM;AAC/B,QAAI,MAAM,iBAAiB,KAAK,MAAM,OAAO;AAC3C,aAAO,UAAU,sBAAsB,MAAM;AAC3C,YAAI,CAAC,aAAa,QAAS,aAAY;AAAA,MACzC,CAAC;AAAA,IACH,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAGhB,oBAAkB,QAAQ,MAAM;AAGhC,sBAAoB,QAAQ,QAAQ;AAAA,IAClC,YAAY;AAAA,IACZ,iBAAiB,CAAC,SAAS,OAAO;AAAA,EACpC,CAAC;AAKD;AAAA,IACE,SAAS,GAAG,KAAK,MAAM,aAAa,KAAK,MAAM,QAAQ,MAAM;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AACA;AAAA,IACE,SAAS,GAAG,KAAK,MAAM,aAAa,KAAK,MAAM,QAAQ,MAAM;AAAA,IAC7D;AAAA,IACA;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AAGA,YAAU,MAAM;AACd,iBAAa,UAAU;AACvB,QAAI,MAAM,UAAU,KAAK,MAAM,MAAO,QAAO;AAC7C,WAAO,MAAM;AACX,mBAAa,UAAU;AACvB,UAAI,OAAO,YAAY,MAAM;AAC3B,6BAAqB,OAAO,OAAO;AACnC,eAAO,UAAU;AAAA,MACnB;AACA,UAAI,MAAM,MAAM,KAAK,MAAM,MAAO,WAAU,OAAO,EAAE,GAAG,KAAK,CAAC;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL,IAAI,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd,MAAM,UAAU;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB,SAAS,UAAU;AAAA,IACnB,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,SAAS,UAAU;AAAA,IACnB;AAAA,EACF;AACF;","names":[]}

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

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

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

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