@usels/core 0.0.1-beta.3

package/dist/elements/useParentElement/demo.mjs

@@ -0,0 +1,112 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ObservableHint } from "@legendapp/state";
+import { Computed, useObservable } from "@legendapp/state/react";
+import { useEventListener } from "../../browser/useEventListener";
+import { useParentElement } from ".";
+const OFFSET_Y = -15;
+function overlayStyle(rect, color) {
+  if (!rect || rect.width === 0) return { display: "none" };
+  return {
+    position: "fixed",
+    pointerEvents: "none",
+    zIndex: 9999,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    left: `${rect.left}px`,
+    top: `${rect.top + OFFSET_Y}px`,
+    backgroundColor: color,
+    outline: `1px solid ${color.replace("28", "99")}`,
+    transition: "all 0.05s linear"
+  };
+}
+function UseParentElementDemo() {
+  const element$ = useObservable(null);
+  const parent$ = useParentElement(element$);
+  useEventListener(
+    "mousemove",
+    (e) => {
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      element$.set(el ? ObservableHint.opaque(el) : null);
+    },
+    { passive: true }
+  );
+  useEventListener(
+    "scroll",
+    () => {
+      const el = element$.peek();
+      element$.set(null);
+      element$.set(el);
+    },
+    { passive: true, capture: true }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        fontFamily: "monospace",
+        fontSize: "13px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        padding: "4px 0"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              color: "var(--sl-color-gray-3, #94a3b8)",
+              fontSize: "12px"
+            },
+            children: "Move your mouse over the page to highlight elements."
+          }
+        ),
+        /* @__PURE__ */ jsx(Computed, { children: () => {
+          const el = element$.get();
+          const parent = parent$.get();
+          return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "24px" }, children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "current:",
+              " ",
+              /* @__PURE__ */ jsx("strong", { style: { color: "#a5a5a5" }, children: el ? `<${el.tagName.toLowerCase()}>` : "\u2014" })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              "parent:",
+              " ",
+              /* @__PURE__ */ jsx("strong", { style: { color: "#3eaf7c" }, children: parent ? `<${parent.tagName.toLowerCase()}>` : "\u2014" })
+            ] })
+          ] });
+        } }),
+        /* @__PURE__ */ jsx(Computed, { children: () => {
+          const el = element$.get();
+          const parent = parent$.get();
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: overlayStyle(
+                  el?.getBoundingClientRect() ?? null,
+                  "#a5a5a528"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: overlayStyle(
+                  parent?.getBoundingClientRect() ?? null,
+                  "#3eaf7c28"
+                )
+              }
+            )
+          ] });
+        } })
+      ]
+    }
+  );
+}
+export {
+  UseParentElementDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useParentElement/demo.tsx"],"sourcesContent":["import { ObservableHint } from \"@legendapp/state\";\nimport type { OpaqueObject } from \"@legendapp/state\";\nimport { Computed, useObservable } from \"@legendapp/state/react\";\nimport { useEventListener } from \"../../browser/useEventListener\";\nimport { useParentElement } from \".\";\n\n// HARD CODE OFFSET\nconst OFFSET_Y = -15;\n\nfunction overlayStyle(\n  rect: DOMRect | null,\n  color: string,\n): React.CSSProperties {\n  if (!rect || rect.width === 0) return { display: \"none\" };\n  return {\n    position: \"fixed\",\n    pointerEvents: \"none\",\n    zIndex: 9999,\n    width: `${rect.width}px`,\n    height: `${rect.height}px`,\n    left: `${rect.left}px`,\n    top: `${rect.top + OFFSET_Y}px`,\n    backgroundColor: color,\n    outline: `1px solid ${color.replace(\"28\", \"99\")}`,\n    transition: \"all 0.05s linear\",\n  };\n}\n\nexport default function UseParentElementDemo() {\n  const element$ = useObservable<OpaqueObject<Element> | null>(null);\n  const parent$ = useParentElement(element$ as any);\n\n  useEventListener(\n    \"mousemove\",\n    (e: MouseEvent) => {\n      const el = document.elementFromPoint(e.clientX, e.clientY);\n      element$.set(el ? ObservableHint.opaque(el) : null);\n    },\n    { passive: true },\n  );\n\n  useEventListener(\n    \"scroll\",\n    () => {\n      const el = element$.peek();\n      element$.set(null);\n      element$.set(el);\n    },\n    { passive: true, capture: true },\n  );\n\n  return (\n    <div\n      style={{\n        fontFamily: \"monospace\",\n        fontSize: \"13px\",\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"4px\",\n        padding: \"4px 0\",\n      }}\n    >\n      <p\n        style={{\n          margin: 0,\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n          fontSize: \"12px\",\n        }}\n      >\n        Move your mouse over the page to highlight elements.\n      </p>\n\n      <Computed>\n        {() => {\n          const el = element$.get() as HTMLElement | null;\n          const parent = parent$.get() as HTMLElement | null;\n          return (\n            <div style={{ display: \"flex\", gap: \"24px\" }}>\n              <span>\n                current:{\" \"}\n                <strong style={{ color: \"#a5a5a5\" }}>\n                  {el ? `<${el.tagName.toLowerCase()}>` : \"—\"}\n                </strong>\n              </span>\n              <span>\n                parent:{\" \"}\n                <strong style={{ color: \"#3eaf7c\" }}>\n                  {parent ? `<${parent.tagName.toLowerCase()}>` : \"—\"}\n                </strong>\n              </span>\n            </div>\n          );\n        }}\n      </Computed>\n\n      <Computed>\n        {() => {\n          const el = element$.get() as HTMLElement | null;\n          const parent = parent$.get() as HTMLElement | null;\n          return (\n            <>\n              <div\n                style={overlayStyle(\n                  el?.getBoundingClientRect() ?? null,\n                  \"#a5a5a528\",\n                )}\n              />\n              <div\n                style={overlayStyle(\n                  parent?.getBoundingClientRect() ?? null,\n                  \"#3eaf7c28\",\n                )}\n              />\n            </>\n          );\n        }}\n      </Computed>\n    </div>\n  );\n}\n"],"mappings":"AA8DM,SAsCM,UAtCN,KAgBQ,YAhBR;AA9DN,SAAS,sBAAsB;AAE/B,SAAS,UAAU,qBAAqB;AACxC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAGjC,MAAM,WAAW;AAEjB,SAAS,aACP,MACA,OACqB;AACrB,MAAI,CAAC,QAAQ,KAAK,UAAU,EAAG,QAAO,EAAE,SAAS,OAAO;AACxD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,OAAO,GAAG,KAAK,KAAK;AAAA,IACpB,QAAQ,GAAG,KAAK,MAAM;AAAA,IACtB,MAAM,GAAG,KAAK,IAAI;AAAA,IAClB,KAAK,GAAG,KAAK,MAAM,QAAQ;AAAA,IAC3B,iBAAiB;AAAA,IACjB,SAAS,aAAa,MAAM,QAAQ,MAAM,IAAI,CAAC;AAAA,IAC/C,YAAY;AAAA,EACd;AACF;AAEe,SAAR,uBAAwC;AAC7C,QAAM,WAAW,cAA4C,IAAI;AACjE,QAAM,UAAU,iBAAiB,QAAe;AAEhD;AAAA,IACE;AAAA,IACA,CAAC,MAAkB;AACjB,YAAM,KAAK,SAAS,iBAAiB,EAAE,SAAS,EAAE,OAAO;AACzD,eAAS,IAAI,KAAK,eAAe,OAAO,EAAE,IAAI,IAAI;AAAA,IACpD;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AAEA;AAAA,IACE;AAAA,IACA,MAAM;AACJ,YAAM,KAAK,SAAS,KAAK;AACzB,eAAS,IAAI,IAAI;AACjB,eAAS,IAAI,EAAE;AAAA,IACjB;AAAA,IACA,EAAE,SAAS,MAAM,SAAS,KAAK;AAAA,EACjC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACD;AAAA;AAAA,QAED;AAAA,QAEA,oBAAC,YACE,gBAAM;AACL,gBAAM,KAAK,SAAS,IAAI;AACxB,gBAAM,SAAS,QAAQ,IAAI;AAC3B,iBACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,OAAO,GACzC;AAAA,iCAAC,UAAK;AAAA;AAAA,cACK;AAAA,cACT,oBAAC,YAAO,OAAO,EAAE,OAAO,UAAU,GAC/B,eAAK,IAAI,GAAG,QAAQ,YAAY,CAAC,MAAM,UAC1C;AAAA,eACF;AAAA,YACA,qBAAC,UAAK;AAAA;AAAA,cACI;AAAA,cACR,oBAAC,YAAO,OAAO,EAAE,OAAO,UAAU,GAC/B,mBAAS,IAAI,OAAO,QAAQ,YAAY,CAAC,MAAM,UAClD;AAAA,eACF;AAAA,aACF;AAAA,QAEJ,GACF;AAAA,QAEA,oBAAC,YACE,gBAAM;AACL,gBAAM,KAAK,SAAS,IAAI;AACxB,gBAAM,SAAS,QAAQ,IAAI;AAC3B,iBACE,iCACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,kBACL,IAAI,sBAAsB,KAAK;AAAA,kBAC/B;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,kBACL,QAAQ,sBAAsB,KAAK;AAAA,kBACnC;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,aACF;AAAA,QAEJ,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,7 @@
+import { Observable, OpaqueObject } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.mjs';
+import 'react';
+
+declare function useParentElement(element?: MaybeElement): Observable<OpaqueObject<HTMLElement | SVGElement> | null>;
+
+export { useParentElement };

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

@@ -0,0 +1,7 @@
+import { Observable, OpaqueObject } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.js';
+import 'react';
+
+declare function useParentElement(element?: MaybeElement): Observable<OpaqueObject<HTMLElement | SVGElement> | null>;
+
+export { useParentElement };

package/dist/elements/useParentElement/index.js

@@ -0,0 +1,47 @@
+"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 useParentElement_exports = {};
+__export(useParentElement_exports, {
+  useParentElement: () => useParentElement
+});
+module.exports = __toCommonJS(useParentElement_exports);
+var import_state = require("@legendapp/state");
+var import_react = require("@legendapp/state/react");
+var import_useRef = require("../useRef$");
+function useParentElement(element) {
+  const parent$ = (0, import_react.useObservable)(
+    null
+  );
+  const update = () => {
+    if (!element) return;
+    const el = (0, import_useRef.getElement)(element);
+    const parent = el?.parentElement ?? null;
+    parent$.set(
+      parent ? import_state.ObservableHint.opaque(parent) : null
+    );
+  };
+  (0, import_react.useMount)(update);
+  (0, import_react.useObserve)(update, { immediate: false });
+  return parent$;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useParentElement
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useParentElement/index.ts"],"sourcesContent":["import type { Observable, OpaqueObject } from \"@legendapp/state\";\nimport { ObservableHint } from \"@legendapp/state\";\nimport { useMount, useObservable, useObserve } from \"@legendapp/state/react\";\nimport { getElement } from \"../useRef$\";\nimport type { MaybeElement } from \"../useRef$\";\n\nexport function useParentElement(\n  element?: MaybeElement,\n): Observable<OpaqueObject<HTMLElement | SVGElement> | null> {\n  const parent$ = useObservable<OpaqueObject<HTMLElement | SVGElement> | null>(\n    null,\n  );\n\n  /**\n   * NOTE: plain element (non-Observable, non-Ref$)을 전달한 경우,\n   * 해당 요소가 DOM 내에서 다른 부모로 이동하더라도 자동으로 갱신되지 않습니다.\n   * 동적 감지가 필요하면 Ref$ 또는 Observable<Element>를 사용하세요.\n   */\n  const update = () => {\n    if (!element) return;\n    const el = getElement(element as MaybeElement);\n    // Document / Window 는 parentElement 프로퍼티가 없으므로 null → SSR-safe\n    const parent = (el as HTMLElement | null)?.parentElement ?? null;\n    parent$.set(\n      parent\n        ? ObservableHint.opaque(parent as unknown as HTMLElement | SVGElement)\n        : null,\n    );\n  };\n\n  useMount(update);\n  useObserve(update, { immediate: false });\n\n  return parent$;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA+B;AAC/B,mBAAoD;AACpD,oBAA2B;AAGpB,SAAS,iBACd,SAC2D;AAC3D,QAAM,cAAU;AAAA,IACd;AAAA,EACF;AAOA,QAAM,SAAS,MAAM;AACnB,QAAI,CAAC,QAAS;AACd,UAAM,SAAK,0BAAW,OAAuB;AAE7C,UAAM,SAAU,IAA2B,iBAAiB;AAC5D,YAAQ;AAAA,MACN,SACI,4BAAe,OAAO,MAA6C,IACnE;AAAA,IACN;AAAA,EACF;AAEA,6BAAS,MAAM;AACf,+BAAW,QAAQ,EAAE,WAAW,MAAM,CAAC;AAEvC,SAAO;AACT;","names":[]}

package/dist/elements/useParentElement/index.mjs

@@ -0,0 +1,23 @@
+import { ObservableHint } from "@legendapp/state";
+import { useMount, useObservable, useObserve } from "@legendapp/state/react";
+import { getElement } from "../useRef$";
+function useParentElement(element) {
+  const parent$ = useObservable(
+    null
+  );
+  const update = () => {
+    if (!element) return;
+    const el = getElement(element);
+    const parent = el?.parentElement ?? null;
+    parent$.set(
+      parent ? ObservableHint.opaque(parent) : null
+    );
+  };
+  useMount(update);
+  useObserve(update, { immediate: false });
+  return parent$;
+}
+export {
+  useParentElement
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useParentElement/index.ts"],"sourcesContent":["import type { Observable, OpaqueObject } from \"@legendapp/state\";\nimport { ObservableHint } from \"@legendapp/state\";\nimport { useMount, useObservable, useObserve } from \"@legendapp/state/react\";\nimport { getElement } from \"../useRef$\";\nimport type { MaybeElement } from \"../useRef$\";\n\nexport function useParentElement(\n  element?: MaybeElement,\n): Observable<OpaqueObject<HTMLElement | SVGElement> | null> {\n  const parent$ = useObservable<OpaqueObject<HTMLElement | SVGElement> | null>(\n    null,\n  );\n\n  /**\n   * NOTE: plain element (non-Observable, non-Ref$)을 전달한 경우,\n   * 해당 요소가 DOM 내에서 다른 부모로 이동하더라도 자동으로 갱신되지 않습니다.\n   * 동적 감지가 필요하면 Ref$ 또는 Observable<Element>를 사용하세요.\n   */\n  const update = () => {\n    if (!element) return;\n    const el = getElement(element as MaybeElement);\n    // Document / Window 는 parentElement 프로퍼티가 없으므로 null → SSR-safe\n    const parent = (el as HTMLElement | null)?.parentElement ?? null;\n    parent$.set(\n      parent\n        ? ObservableHint.opaque(parent as unknown as HTMLElement | SVGElement)\n        : null,\n    );\n  };\n\n  useMount(update);\n  useObserve(update, { immediate: false });\n\n  return parent$;\n}\n"],"mappings":"AACA,SAAS,sBAAsB;AAC/B,SAAS,UAAU,eAAe,kBAAkB;AACpD,SAAS,kBAAkB;AAGpB,SAAS,iBACd,SAC2D;AAC3D,QAAM,UAAU;AAAA,IACd;AAAA,EACF;AAOA,QAAM,SAAS,MAAM;AACnB,QAAI,CAAC,QAAS;AACd,UAAM,KAAK,WAAW,OAAuB;AAE7C,UAAM,SAAU,IAA2B,iBAAiB;AAC5D,YAAQ;AAAA,MACN,SACI,eAAe,OAAO,MAA6C,IACnE;AAAA,IACN;AAAA,EACF;AAEA,WAAS,MAAM;AACf,aAAW,QAAQ,EAAE,WAAW,MAAM,CAAC;AAEvC,SAAO;AACT;","names":[]}

package/dist/elements/useRef$/index.js

@@ -0,0 +1,89 @@
+"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 useRef_exports = {};
+__export(useRef_exports, {
+  getElement: () => getElement,
+  isRef$: () => isRef$,
+  peekElement: () => peekElement,
+  useRef$: () => useRef$
+});
+module.exports = __toCommonJS(useRef_exports);
+var import_state = require("@legendapp/state");
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_shared = require("../../shared");
+function useRef$(externalRef) {
+  const el$ = (0, import_react.useObservable)(null);
+  const extRef = (0, import_react2.useRef)(externalRef);
+  extRef.current = externalRef;
+  return (0, import_react2.useMemo)(
+    () => Object.assign(
+      (node) => {
+        const ext = extRef.current;
+        if (typeof ext === "function") {
+          ext(node);
+        } else if (ext != null && "current" in ext) {
+          ext.current = node;
+        }
+        el$.set(node ? import_state.ObservableHint.opaque(node) : null);
+      },
+      {
+        get: () => el$.get(),
+        peek: () => el$.peek()
+      }
+    ),
+    []
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+}
+function isRef$(v) {
+  return typeof v === "function" && !(0, import_state.isObservable)(v) && "get" in v && "peek" in v;
+}
+function getElement(v) {
+  if (isRef$(v)) {
+    const raw = v.get();
+    return raw ? raw.valueOf() : null;
+  }
+  if ((0, import_shared.isWindow)(v)) return v;
+  if ((0, import_state.isObservable)(v)) {
+    const val = v.get();
+    return val ? val.valueOf() : null;
+  }
+  return v;
+}
+function peekElement(v) {
+  if (isRef$(v)) {
+    const raw = v.peek();
+    return raw ? raw.valueOf() : null;
+  }
+  if ((0, import_shared.isWindow)(v)) return v;
+  if ((0, import_state.isObservable)(v)) {
+    const val = v.peek();
+    return val ? val.valueOf() : null;
+  }
+  return v;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getElement,
+  isRef$,
+  peekElement,
+  useRef$
+});
+//# sourceMappingURL=index.js.map

package/dist/elements/useRef$/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useRef$/index.ts"],"sourcesContent":["import { isObservable, ObservableHint } from \"@legendapp/state\";\nimport type { Observable, OpaqueObject } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { type Ref, type RefObject, useMemo, useRef } from \"react\";\nimport { isWindow } from \"../../shared\";\n\nexport type Ref$<T> = ((node: T | null) => void) & {\n  /** returns element, registers tracking when called inside useObserve */\n  get(): OpaqueObject<T> | null;\n  /** returns element without registering tracking */\n  peek(): OpaqueObject<T> | null;\n};\n\n/**\n * A value that resolves to an Element, Document, Window, or null.\n *\n * - `Ref$<T>` — React-managed element ref (created via `useRef$()`). Primary choice.\n * - `Document` / `Window` — stable global singletons, always safe to pass raw.\n * - `Observable<OpaqueObject<Element> | null>` — for imperatively obtained elements.\n *   Use `ObservableHint.opaque(el)` when storing: `observable(ObservableHint.opaque(el))`.\n *\n * Raw `HTMLElement` is intentionally excluded: in React's render model, elements\n * don't exist at hook call time, making raw element references inherently stale.\n */\nexport type MaybeElement =\n  | Ref$<any>\n  | Document\n  | Window\n  | null\n  | Observable<OpaqueObject<Element> | null>;\n\n/**\n * Creates an observable element ref. Can be used as a drop-in replacement for\n * `useRef`, composed with callback refs, or used with `forwardRef`.\n *\n * The element is wrapped with `opaqueObject` to prevent legendapp/state\n * from making DOM properties reactive (deep observation).\n *\n * @param externalRef - Optional. Accepts callback ref, RefObject, or null (forwardRef compatible).\n * @returns A callable ref that is also observable via `get`/`peek`\n *\n * @example\n * ```tsx\n * // standalone — useRef replacement\n * const el$ = useRef$<HTMLDivElement>();\n * return <div ref={el$} />;\n *\n * // forwardRef compatible\n * const Component = forwardRef<HTMLDivElement>((props, ref) => {\n *   const el$ = useRef$(ref);\n *   return <div ref={el$} />;\n * });\n *\n * // callback ref composition\n * const myRef = useCallback((node: HTMLDivElement | null) => {\n *   node?.focus();\n * }, []);\n * const el$ = useRef$(myRef);\n * return <div ref={el$} />;\n * ```\n */\nexport function useRef$<T extends Element = Element>(\n  externalRef?: Ref<T> | null,\n): Ref$<T> {\n  const el$ = useObservable<OpaqueObject<T> | null>(null);\n\n  // store externalRef — simple assignment each render, no new closure\n  const extRef = useRef(externalRef);\n  extRef.current = externalRef;\n\n  return useMemo(\n    () =>\n      Object.assign(\n        (node: T | null) => {\n          const ext = extRef.current;\n          if (typeof ext === \"function\") {\n            ext(node);\n          } else if (ext != null && \"current\" in ext) {\n            (ext as RefObject<T | null>).current = node;\n          }\n          (el$ as any).set(node ? ObservableHint.opaque(node) : null);\n        },\n        {\n          get: () => el$.get(),\n          peek: () => el$.peek(),\n        },\n      ) as Ref$<T>,\n    [], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n}\n\n/** Type guard for Ref$ — distinguishes it from Observable and raw values */\nexport function isRef$(v: unknown): v is Ref$<Element> {\n  return (\n    typeof v === \"function\" && !isObservable(v) && \"get\" in v && \"peek\" in v\n  );\n}\n\n/** Unwraps MaybeElement with tracking (use inside useObserve) */\nexport function getElement(\n  v: MaybeElement,\n): HTMLElement | Document | Window | null {\n  if (isRef$(v)) {\n    const raw = v.get();\n    return raw\n      ? ((raw as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  if (isWindow(v)) return v;\n  if (isObservable(v)) {\n    const val = (v as Observable<OpaqueObject<Element> | null>).get();\n    return val\n      ? ((val as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  return v as Document | null;\n}\n\n/** Unwraps MaybeElement without tracking (use inside setup/peek) */\nexport function peekElement(\n  v: MaybeElement,\n): HTMLElement | Document | Window | null {\n  if (isRef$(v)) {\n    const raw = v.peek();\n    return raw\n      ? ((raw as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  if (isWindow(v)) return v;\n  if (isObservable(v)) {\n    const val = (v as Observable<OpaqueObject<Element> | null>).peek();\n    return val\n      ? ((val as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  return v as Document | null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAE7C,mBAA8B;AAC9B,IAAAA,gBAA0D;AAC1D,oBAAyB;AAyDlB,SAAS,QACd,aACS;AACT,QAAM,UAAM,4BAAsC,IAAI;AAGtD,QAAM,aAAS,sBAAO,WAAW;AACjC,SAAO,UAAU;AAEjB,aAAO;AAAA,IACL,MACE,OAAO;AAAA,MACL,CAAC,SAAmB;AAClB,cAAM,MAAM,OAAO;AACnB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,IAAI;AAAA,QACV,WAAW,OAAO,QAAQ,aAAa,KAAK;AAC1C,UAAC,IAA4B,UAAU;AAAA,QACzC;AACA,QAAC,IAAY,IAAI,OAAO,4BAAe,OAAO,IAAI,IAAI,IAAI;AAAA,MAC5D;AAAA,MACA;AAAA,QACE,KAAK,MAAM,IAAI,IAAI;AAAA,QACnB,MAAM,MAAM,IAAI,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,IACF,CAAC;AAAA;AAAA,EACH;AACF;AAGO,SAAS,OAAO,GAAgC;AACrD,SACE,OAAO,MAAM,cAAc,KAAC,2BAAa,CAAC,KAAK,SAAS,KAAK,UAAU;AAE3E;AAGO,SAAS,WACd,GACwC;AACxC,MAAI,OAAO,CAAC,GAAG;AACb,UAAM,MAAM,EAAE,IAAI;AAClB,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,UAAI,wBAAS,CAAC,EAAG,QAAO;AACxB,UAAI,2BAAa,CAAC,GAAG;AACnB,UAAM,MAAO,EAA+C,IAAI;AAChE,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,SAAO;AACT;AAGO,SAAS,YACd,GACwC;AACxC,MAAI,OAAO,CAAC,GAAG;AACb,UAAM,MAAM,EAAE,KAAK;AACnB,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,UAAI,wBAAS,CAAC,EAAG,QAAO;AACxB,UAAI,2BAAa,CAAC,GAAG;AACnB,UAAM,MAAO,EAA+C,KAAK;AACjE,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,SAAO;AACT;","names":["import_react"]}

package/dist/elements/useRef$/index.mjs

@@ -0,0 +1,62 @@
+import { isObservable, ObservableHint } from "@legendapp/state";
+import { useObservable } from "@legendapp/state/react";
+import { useMemo, useRef } from "react";
+import { isWindow } from "../../shared";
+function useRef$(externalRef) {
+  const el$ = useObservable(null);
+  const extRef = useRef(externalRef);
+  extRef.current = externalRef;
+  return useMemo(
+    () => Object.assign(
+      (node) => {
+        const ext = extRef.current;
+        if (typeof ext === "function") {
+          ext(node);
+        } else if (ext != null && "current" in ext) {
+          ext.current = node;
+        }
+        el$.set(node ? ObservableHint.opaque(node) : null);
+      },
+      {
+        get: () => el$.get(),
+        peek: () => el$.peek()
+      }
+    ),
+    []
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+}
+function isRef$(v) {
+  return typeof v === "function" && !isObservable(v) && "get" in v && "peek" in v;
+}
+function getElement(v) {
+  if (isRef$(v)) {
+    const raw = v.get();
+    return raw ? raw.valueOf() : null;
+  }
+  if (isWindow(v)) return v;
+  if (isObservable(v)) {
+    const val = v.get();
+    return val ? val.valueOf() : null;
+  }
+  return v;
+}
+function peekElement(v) {
+  if (isRef$(v)) {
+    const raw = v.peek();
+    return raw ? raw.valueOf() : null;
+  }
+  if (isWindow(v)) return v;
+  if (isObservable(v)) {
+    const val = v.peek();
+    return val ? val.valueOf() : null;
+  }
+  return v;
+}
+export {
+  getElement,
+  isRef$,
+  peekElement,
+  useRef$
+};
+//# sourceMappingURL=index.mjs.map

package/dist/elements/useRef$/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useRef$/index.ts"],"sourcesContent":["import { isObservable, ObservableHint } from \"@legendapp/state\";\nimport type { Observable, OpaqueObject } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { type Ref, type RefObject, useMemo, useRef } from \"react\";\nimport { isWindow } from \"../../shared\";\n\nexport type Ref$<T> = ((node: T | null) => void) & {\n  /** returns element, registers tracking when called inside useObserve */\n  get(): OpaqueObject<T> | null;\n  /** returns element without registering tracking */\n  peek(): OpaqueObject<T> | null;\n};\n\n/**\n * A value that resolves to an Element, Document, Window, or null.\n *\n * - `Ref$<T>` — React-managed element ref (created via `useRef$()`). Primary choice.\n * - `Document` / `Window` — stable global singletons, always safe to pass raw.\n * - `Observable<OpaqueObject<Element> | null>` — for imperatively obtained elements.\n *   Use `ObservableHint.opaque(el)` when storing: `observable(ObservableHint.opaque(el))`.\n *\n * Raw `HTMLElement` is intentionally excluded: in React's render model, elements\n * don't exist at hook call time, making raw element references inherently stale.\n */\nexport type MaybeElement =\n  | Ref$<any>\n  | Document\n  | Window\n  | null\n  | Observable<OpaqueObject<Element> | null>;\n\n/**\n * Creates an observable element ref. Can be used as a drop-in replacement for\n * `useRef`, composed with callback refs, or used with `forwardRef`.\n *\n * The element is wrapped with `opaqueObject` to prevent legendapp/state\n * from making DOM properties reactive (deep observation).\n *\n * @param externalRef - Optional. Accepts callback ref, RefObject, or null (forwardRef compatible).\n * @returns A callable ref that is also observable via `get`/`peek`\n *\n * @example\n * ```tsx\n * // standalone — useRef replacement\n * const el$ = useRef$<HTMLDivElement>();\n * return <div ref={el$} />;\n *\n * // forwardRef compatible\n * const Component = forwardRef<HTMLDivElement>((props, ref) => {\n *   const el$ = useRef$(ref);\n *   return <div ref={el$} />;\n * });\n *\n * // callback ref composition\n * const myRef = useCallback((node: HTMLDivElement | null) => {\n *   node?.focus();\n * }, []);\n * const el$ = useRef$(myRef);\n * return <div ref={el$} />;\n * ```\n */\nexport function useRef$<T extends Element = Element>(\n  externalRef?: Ref<T> | null,\n): Ref$<T> {\n  const el$ = useObservable<OpaqueObject<T> | null>(null);\n\n  // store externalRef — simple assignment each render, no new closure\n  const extRef = useRef(externalRef);\n  extRef.current = externalRef;\n\n  return useMemo(\n    () =>\n      Object.assign(\n        (node: T | null) => {\n          const ext = extRef.current;\n          if (typeof ext === \"function\") {\n            ext(node);\n          } else if (ext != null && \"current\" in ext) {\n            (ext as RefObject<T | null>).current = node;\n          }\n          (el$ as any).set(node ? ObservableHint.opaque(node) : null);\n        },\n        {\n          get: () => el$.get(),\n          peek: () => el$.peek(),\n        },\n      ) as Ref$<T>,\n    [], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n}\n\n/** Type guard for Ref$ — distinguishes it from Observable and raw values */\nexport function isRef$(v: unknown): v is Ref$<Element> {\n  return (\n    typeof v === \"function\" && !isObservable(v) && \"get\" in v && \"peek\" in v\n  );\n}\n\n/** Unwraps MaybeElement with tracking (use inside useObserve) */\nexport function getElement(\n  v: MaybeElement,\n): HTMLElement | Document | Window | null {\n  if (isRef$(v)) {\n    const raw = v.get();\n    return raw\n      ? ((raw as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  if (isWindow(v)) return v;\n  if (isObservable(v)) {\n    const val = (v as Observable<OpaqueObject<Element> | null>).get();\n    return val\n      ? ((val as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  return v as Document | null;\n}\n\n/** Unwraps MaybeElement without tracking (use inside setup/peek) */\nexport function peekElement(\n  v: MaybeElement,\n): HTMLElement | Document | Window | null {\n  if (isRef$(v)) {\n    const raw = v.peek();\n    return raw\n      ? ((raw as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  if (isWindow(v)) return v;\n  if (isObservable(v)) {\n    const val = (v as Observable<OpaqueObject<Element> | null>).peek();\n    return val\n      ? ((val as OpaqueObject<Element>).valueOf() as HTMLElement)\n      : null;\n  }\n  return v as Document | null;\n}\n"],"mappings":"AAAA,SAAS,cAAc,sBAAsB;AAE7C,SAAS,qBAAqB;AAC9B,SAAmC,SAAS,cAAc;AAC1D,SAAS,gBAAgB;AAyDlB,SAAS,QACd,aACS;AACT,QAAM,MAAM,cAAsC,IAAI;AAGtD,QAAM,SAAS,OAAO,WAAW;AACjC,SAAO,UAAU;AAEjB,SAAO;AAAA,IACL,MACE,OAAO;AAAA,MACL,CAAC,SAAmB;AAClB,cAAM,MAAM,OAAO;AACnB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,IAAI;AAAA,QACV,WAAW,OAAO,QAAQ,aAAa,KAAK;AAC1C,UAAC,IAA4B,UAAU;AAAA,QACzC;AACA,QAAC,IAAY,IAAI,OAAO,eAAe,OAAO,IAAI,IAAI,IAAI;AAAA,MAC5D;AAAA,MACA;AAAA,QACE,KAAK,MAAM,IAAI,IAAI;AAAA,QACnB,MAAM,MAAM,IAAI,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,IACF,CAAC;AAAA;AAAA,EACH;AACF;AAGO,SAAS,OAAO,GAAgC;AACrD,SACE,OAAO,MAAM,cAAc,CAAC,aAAa,CAAC,KAAK,SAAS,KAAK,UAAU;AAE3E;AAGO,SAAS,WACd,GACwC;AACxC,MAAI,OAAO,CAAC,GAAG;AACb,UAAM,MAAM,EAAE,IAAI;AAClB,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,MAAI,SAAS,CAAC,EAAG,QAAO;AACxB,MAAI,aAAa,CAAC,GAAG;AACnB,UAAM,MAAO,EAA+C,IAAI;AAChE,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,SAAO;AACT;AAGO,SAAS,YACd,GACwC;AACxC,MAAI,OAAO,CAAC,GAAG;AACb,UAAM,MAAM,EAAE,KAAK;AACnB,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,MAAI,SAAS,CAAC,EAAG,QAAO;AACxB,MAAI,aAAa,CAAC,GAAG;AACnB,UAAM,MAAO,EAA+C,KAAK;AACjE,WAAO,MACD,IAA8B,QAAQ,IACxC;AAAA,EACN;AACA,SAAO;AACT;","names":[]}

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

@@ -0,0 +1,60 @@
+import { OpaqueObject, Observable } from '@legendapp/state';
+import { Ref } from 'react';
+
+type Ref$<T> = ((node: T | null) => void) & {
+    /** returns element, registers tracking when called inside useObserve */
+    get(): OpaqueObject<T> | null;
+    /** returns element without registering tracking */
+    peek(): OpaqueObject<T> | null;
+};
+/**
+ * A value that resolves to an Element, Document, Window, or null.
+ *
+ * - `Ref$<T>` — React-managed element ref (created via `useRef$()`). Primary choice.
+ * - `Document` / `Window` — stable global singletons, always safe to pass raw.
+ * - `Observable<OpaqueObject<Element> | null>` — for imperatively obtained elements.
+ *   Use `ObservableHint.opaque(el)` when storing: `observable(ObservableHint.opaque(el))`.
+ *
+ * Raw `HTMLElement` is intentionally excluded: in React's render model, elements
+ * don't exist at hook call time, making raw element references inherently stale.
+ */
+type MaybeElement = Ref$<any> | Document | Window | null | Observable<OpaqueObject<Element> | null>;
+/**
+ * Creates an observable element ref. Can be used as a drop-in replacement for
+ * `useRef`, composed with callback refs, or used with `forwardRef`.
+ *
+ * The element is wrapped with `opaqueObject` to prevent legendapp/state
+ * from making DOM properties reactive (deep observation).
+ *
+ * @param externalRef - Optional. Accepts callback ref, RefObject, or null (forwardRef compatible).
+ * @returns A callable ref that is also observable via `get`/`peek`
+ *
+ * @example
+ * ```tsx
+ * // standalone — useRef replacement
+ * const el$ = useRef$<HTMLDivElement>();
+ * return <div ref={el$} />;
+ *
+ * // forwardRef compatible
+ * const Component = forwardRef<HTMLDivElement>((props, ref) => {
+ *   const el$ = useRef$(ref);
+ *   return <div ref={el$} />;
+ * });
+ *
+ * // callback ref composition
+ * const myRef = useCallback((node: HTMLDivElement | null) => {
+ *   node?.focus();
+ * }, []);
+ * const el$ = useRef$(myRef);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useRef$<T extends Element = Element>(externalRef?: Ref<T> | null): Ref$<T>;
+/** Type guard for Ref$ — distinguishes it from Observable and raw values */
+declare function isRef$(v: unknown): v is Ref$<Element>;
+/** Unwraps MaybeElement with tracking (use inside useObserve) */
+declare function getElement(v: MaybeElement): HTMLElement | Document | Window | null;
+/** Unwraps MaybeElement without tracking (use inside setup/peek) */
+declare function peekElement(v: MaybeElement): HTMLElement | Document | Window | null;
+
+export { type MaybeElement, type Ref$, getElement, isRef$, peekElement, useRef$ };

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

@@ -0,0 +1,60 @@
+import { OpaqueObject, Observable } from '@legendapp/state';
+import { Ref } from 'react';
+
+type Ref$<T> = ((node: T | null) => void) & {
+    /** returns element, registers tracking when called inside useObserve */
+    get(): OpaqueObject<T> | null;
+    /** returns element without registering tracking */
+    peek(): OpaqueObject<T> | null;
+};
+/**
+ * A value that resolves to an Element, Document, Window, or null.
+ *
+ * - `Ref$<T>` — React-managed element ref (created via `useRef$()`). Primary choice.
+ * - `Document` / `Window` — stable global singletons, always safe to pass raw.
+ * - `Observable<OpaqueObject<Element> | null>` — for imperatively obtained elements.
+ *   Use `ObservableHint.opaque(el)` when storing: `observable(ObservableHint.opaque(el))`.
+ *
+ * Raw `HTMLElement` is intentionally excluded: in React's render model, elements
+ * don't exist at hook call time, making raw element references inherently stale.
+ */
+type MaybeElement = Ref$<any> | Document | Window | null | Observable<OpaqueObject<Element> | null>;
+/**
+ * Creates an observable element ref. Can be used as a drop-in replacement for
+ * `useRef`, composed with callback refs, or used with `forwardRef`.
+ *
+ * The element is wrapped with `opaqueObject` to prevent legendapp/state
+ * from making DOM properties reactive (deep observation).
+ *
+ * @param externalRef - Optional. Accepts callback ref, RefObject, or null (forwardRef compatible).
+ * @returns A callable ref that is also observable via `get`/`peek`
+ *
+ * @example
+ * ```tsx
+ * // standalone — useRef replacement
+ * const el$ = useRef$<HTMLDivElement>();
+ * return <div ref={el$} />;
+ *
+ * // forwardRef compatible
+ * const Component = forwardRef<HTMLDivElement>((props, ref) => {
+ *   const el$ = useRef$(ref);
+ *   return <div ref={el$} />;
+ * });
+ *
+ * // callback ref composition
+ * const myRef = useCallback((node: HTMLDivElement | null) => {
+ *   node?.focus();
+ * }, []);
+ * const el$ = useRef$(myRef);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useRef$<T extends Element = Element>(externalRef?: Ref<T> | null): Ref$<T>;
+/** Type guard for Ref$ — distinguishes it from Observable and raw values */
+declare function isRef$(v: unknown): v is Ref$<Element>;
+/** Unwraps MaybeElement with tracking (use inside useObserve) */
+declare function getElement(v: MaybeElement): HTMLElement | Document | Window | null;
+/** Unwraps MaybeElement without tracking (use inside setup/peek) */
+declare function peekElement(v: MaybeElement): HTMLElement | Document | Window | null;
+
+export { type MaybeElement, type Ref$, getElement, isRef$, peekElement, useRef$ };

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

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

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

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

package/dist/elements/useResizeObserver/demo.js

@@ -0,0 +1,90 @@
+"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: () => UseResizeObserverDemo
+});
+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");
+function UseResizeObserverDemo() {
+  const el$ = (0, import_useRef.useRef$)();
+  const size$ = (0, import_react.useObservable)({ width: 0, height: 0 });
+  (0, import__.useResizeObserver)(el$, (entries) => {
+    const { width, height } = entries[0].contentRect;
+    size$.assign({
+      width: Math.round(width),
+      height: Math.round(height)
+    });
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "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)("span", { children: [
+            "width: ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+              size$.width.get(),
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "height: ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
+              size$.height.get(),
+              "px"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ref: el$,
+        defaultValue: "resize this textarea",
+        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/useResizeObserver/demo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useResizeObserver/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useResizeObserver } from \".\";\nimport { useObservable } from \"@legendapp/state/react\";\n\nexport default function UseResizeObserverDemo() {\n  const el$ = useRef$<HTMLTextAreaElement>();\n  const size$ = useObservable({ width: 0, height: 0 });\n\n  useResizeObserver(el$, (entries) => {\n    const { width, height } = entries[0].contentRect;\n\n    size$.assign({\n      width: Math.round(width),\n      height: Math.round(height),\n    });\n  });\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        <span>\n          width: <strong>{size$.width.get()}px</strong>\n        </span>\n        <span>\n          height: <strong>{size$.height.get()}px</strong>\n        </span>\n      </div>\n      <textarea\n        ref={el$}\n        defaultValue=\"resize this textarea\"\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;AA+BiB;AA/BjB,oBAAwB;AACxB,eAAkC;AAClC,mBAA8B;AAEf,SAAR,wBAAyC;AAC9C,QAAM,UAAM,uBAA6B;AACzC,QAAM,YAAQ,4BAAc,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAEnD,kCAAkB,KAAK,CAAC,YAAY;AAClC,UAAM,EAAE,OAAO,OAAO,IAAI,QAAQ,CAAC,EAAE;AAErC,UAAM,OAAO;AAAA,MACX,OAAO,KAAK,MAAM,KAAK;AAAA,MACvB,QAAQ,KAAK,MAAM,MAAM;AAAA,IAC3B,CAAC;AAAA,EACH,CAAC;AAED,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;AAAA,uDAAC,UAAK;AAAA;AAAA,YACG,6CAAC,YAAQ;AAAA,oBAAM,MAAM,IAAI;AAAA,cAAE;AAAA,eAAE;AAAA,aACtC;AAAA,UACA,6CAAC,UAAK;AAAA;AAAA,YACI,6CAAC,YAAQ;AAAA,oBAAM,OAAO,IAAI;AAAA,cAAE;AAAA,eAAE;AAAA,aACxC;AAAA;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":[]}