@usels/core 0.0.1

package/dist/elements/useResizeObserver/demo.mjs

@@ -0,0 +1,70 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef$ } from "../useRef$";
+import { useResizeObserver } from ".";
+import { Computed, useObservable } from "@legendapp/state/react";
+function UseResizeObserverDemo() {
+  const el$ = useRef$();
+  const size$ = useObservable({ width: 0, height: 0 });
+  useResizeObserver(el$, (entries) => {
+    const { width, height } = entries[0].contentRect;
+    size$.assign({
+      width: Math.round(width),
+      height: Math.round(height)
+    });
+  });
+  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__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "width: ",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              size$.width.get(),
+              "px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "height: ",
+            /* @__PURE__ */ jsxs("strong", { children: [
+              size$.height.get(),
+              "px"
+            ] })
+          ] })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ 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"
+        }
+      }
+    )
+  ] });
+}
+export {
+  UseResizeObserverDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useResizeObserver/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useResizeObserver } from \".\";\nimport { Computed, 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        <Computed>\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            </>\n          )}\n        </Computed>\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":"AA8BQ,SAEI,UAFJ,KAIe,YAJf;AA9BR,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,UAAU,qBAAqB;AAEzB,SAAR,wBAAyC;AAC9C,QAAM,MAAM,QAA6B;AACzC,QAAM,QAAQ,cAAc,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AAEnD,oBAAkB,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,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,8BAAC,YACE,gBACC,iCACE;AAAA,+BAAC,UAAK;AAAA;AAAA,YACG,qBAAC,YAAQ;AAAA,oBAAM,MAAM,IAAI;AAAA,cAAE;AAAA,eAAE;AAAA,aACtC;AAAA,UACA,qBAAC,UAAK;AAAA;AAAA,YACI,qBAAC,YAAQ;AAAA,oBAAM,OAAO,IAAI;AAAA,cAAE;AAAA,eAAE;AAAA,aACxC;AAAA,WACF,GAEJ;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/useResizeObserver/index.d.mts

@@ -0,0 +1,36 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.mjs';
+export { normalizeTargets } from '../../shared/normalizeTargets/index.mjs';
+import 'react';
+
+interface UseResizeObserverOptions {
+    box?: "content-box" | "border-box" | "device-pixel-content-box";
+}
+interface UseResizeObserverReturn {
+    isSupported: Observable<boolean>;
+    stop: () => void;
+}
+/**
+ * Observes one or more elements for size changes using the ResizeObserver API.
+ *
+ * @param target - Element(s) to observe: Ref$, Observable<Element|null>, plain Element, or an array
+ * @param callback - ResizeObserver callback. Wrap in `useCallback` to avoid stale closures —
+ *   the observer is only recreated when targets change, not on every render.
+ * @param options - Optional box model option. Note: dynamic `box` changes are not reactively
+ *   tracked; remount the hook or change a tracked target to pick up a new box value.
+ * @returns `{ isSupported, stop }` — reactive support flag and manual stop function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const handleResize = useCallback<ResizeObserverCallback>((entries) => {
+ *   const { width, height } = entries[0].contentRect;
+ *   width$.set(width);
+ * }, []);
+ * useResizeObserver(el$, handleResize);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useResizeObserver(target: MaybeElement | MaybeElement[], callback: ResizeObserverCallback, options?: UseResizeObserverOptions): UseResizeObserverReturn;
+
+export { type UseResizeObserverOptions, type UseResizeObserverReturn, useResizeObserver };

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

@@ -0,0 +1,36 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.js';
+export { normalizeTargets } from '../../shared/normalizeTargets/index.js';
+import 'react';
+
+interface UseResizeObserverOptions {
+    box?: "content-box" | "border-box" | "device-pixel-content-box";
+}
+interface UseResizeObserverReturn {
+    isSupported: Observable<boolean>;
+    stop: () => void;
+}
+/**
+ * Observes one or more elements for size changes using the ResizeObserver API.
+ *
+ * @param target - Element(s) to observe: Ref$, Observable<Element|null>, plain Element, or an array
+ * @param callback - ResizeObserver callback. Wrap in `useCallback` to avoid stale closures —
+ *   the observer is only recreated when targets change, not on every render.
+ * @param options - Optional box model option. Note: dynamic `box` changes are not reactively
+ *   tracked; remount the hook or change a tracked target to pick up a new box value.
+ * @returns `{ isSupported, stop }` — reactive support flag and manual stop function
+ *
+ * @example
+ * ```tsx
+ * const el$ = useRef$<HTMLDivElement>();
+ * const handleResize = useCallback<ResizeObserverCallback>((entries) => {
+ *   const { width, height } = entries[0].contentRect;
+ *   width$.set(width);
+ * }, []);
+ * useResizeObserver(el$, handleResize);
+ * return <div ref={el$} />;
+ * ```
+ */
+declare function useResizeObserver(target: MaybeElement | MaybeElement[], callback: ResizeObserverCallback, options?: UseResizeObserverOptions): UseResizeObserverReturn;
+
+export { type UseResizeObserverOptions, type UseResizeObserverReturn, useResizeObserver };

package/dist/elements/useResizeObserver/index.js

@@ -0,0 +1,74 @@
+"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 useResizeObserver_exports = {};
+__export(useResizeObserver_exports, {
+  normalizeTargets: () => import_normalizeTargets2.normalizeTargets,
+  useResizeObserver: () => useResizeObserver
+});
+module.exports = __toCommonJS(useResizeObserver_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_normalizeTargets = require("../../shared/normalizeTargets");
+var import_normalizeTargets2 = require("../../shared/normalizeTargets");
+function useResizeObserver(target, callback, options) {
+  const isSupported$ = (0, import_react.useObservable)(
+    typeof ResizeObserver !== "undefined"
+  );
+  const observerRef = (0, import_react2.useRef)(null);
+  const callbackRef = (0, import_react2.useRef)(callback);
+  callbackRef.current = callback;
+  const optionsRef = (0, import_react2.useRef)(options);
+  optionsRef.current = options;
+  const mountedRef = (0, import_react2.useRef)(false);
+  const cleanup = () => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+  const setup = () => {
+    if (!isSupported$.peek()) return;
+    cleanup();
+    const targets = (0, import_normalizeTargets.normalizeTargets)(target);
+    if (!targets.length) return;
+    observerRef.current = new ResizeObserver(
+      (...args) => callbackRef.current(...args)
+    );
+    targets.forEach((el) => {
+      observerRef.current.observe(el, { box: optionsRef.current?.box });
+    });
+  };
+  (0, import_react2.useEffect)(() => {
+    mountedRef.current = true;
+    setup();
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, []);
+  (0, import_react.useObserve)(() => {
+    (0, import_normalizeTargets.normalizeTargets)(target);
+    if (mountedRef.current) setup();
+  });
+  return { isSupported: isSupported$, stop: cleanup };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  normalizeTargets,
+  useResizeObserver
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useResizeObserver/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useObserve } from \"@legendapp/state/react\";\nimport { useEffect, useRef } from \"react\";\nimport { normalizeTargets } from \"../../shared/normalizeTargets\";\nimport { MaybeElement } from \"../useRef$\";\n\nexport { normalizeTargets } from \"../../shared/normalizeTargets\";\n\nexport interface UseResizeObserverOptions {\n  box?: \"content-box\" | \"border-box\" | \"device-pixel-content-box\";\n}\n\nexport interface UseResizeObserverReturn {\n  isSupported: Observable<boolean>;\n  stop: () => void;\n}\n\n/**\n * Observes one or more elements for size changes using the ResizeObserver API.\n *\n * @param target - Element(s) to observe: Ref$, Observable<Element|null>, plain Element, or an array\n * @param callback - ResizeObserver callback. Wrap in `useCallback` to avoid stale closures —\n *   the observer is only recreated when targets change, not on every render.\n * @param options - Optional box model option. Note: dynamic `box` changes are not reactively\n *   tracked; remount the hook or change a tracked target to pick up a new box value.\n * @returns `{ isSupported, stop }` — reactive support flag and manual stop function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const handleResize = useCallback<ResizeObserverCallback>((entries) => {\n *   const { width, height } = entries[0].contentRect;\n *   width$.set(width);\n * }, []);\n * useResizeObserver(el$, handleResize);\n * return <div ref={el$} />;\n * ```\n */\nexport function useResizeObserver(\n  target: MaybeElement | MaybeElement[],\n  callback: ResizeObserverCallback,\n  options?: UseResizeObserverOptions,\n): UseResizeObserverReturn {\n  const isSupported$ = useObservable<boolean>(\n    typeof ResizeObserver !== \"undefined\",\n  );\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  // Always use the latest callback without recreating the observer on every render.\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n\n  // Always use the latest options in setup() without reactive tracking.\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  // Guards useObserve's initial synchronous run (before DOM is committed) from\n  // calling setup(). Only useMount triggers the first setup, ensuring elements\n  // are available in the DOM before observation begins.\n  const mountedRef = useRef(false);\n\n  const cleanup = () => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n  };\n\n  const setup = () => {\n    if (!isSupported$.peek()) return;\n    cleanup();\n\n    const targets = normalizeTargets(target);\n    if (!targets.length) return;\n\n    observerRef.current = new ResizeObserver((...args) =>\n      callbackRef.current(...args),\n    );\n    targets.forEach((el) => {\n      observerRef.current!.observe(el, { box: optionsRef.current?.box });\n    });\n  };\n\n  // Initial setup after DOM is committed; cleanup on unmount.\n  // useEffect is used directly (instead of useMount/useUnmount) because\n  // Legend-State's useEffectOnce delays cleanup via queueMicrotask in test\n  // environments, making synchronous post-unmount assertions unreliable.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    mountedRef.current = true;\n    setup();\n    return () => {\n      mountedRef.current = false;\n      cleanup();\n    };\n  }, []);\n\n  // Re-run setup whenever observable targets (Ref$ or Observable<Element>) change.\n  // Reading normalizeTargets(target) here registers observable dependencies so\n  // useObserve re-fires when a tracked target value changes.\n  // mountedRef guard prevents a redundant setup on the initial synchronous run.\n  useObserve(() => {\n    normalizeTargets(target);\n    if (mountedRef.current) setup();\n  });\n\n  return { isSupported: isSupported$, stop: cleanup };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA0C;AAC1C,IAAAA,gBAAkC;AAClC,8BAAiC;AAGjC,IAAAC,2BAAiC;AAgC1B,SAAS,kBACd,QACA,UACA,SACyB;AACzB,QAAM,mBAAe;AAAA,IACnB,OAAO,mBAAmB;AAAA,EAC5B;AACA,QAAM,kBAAc,sBAA8B,IAAI;AAGtD,QAAM,kBAAc,sBAAO,QAAQ;AACnC,cAAY,UAAU;AAGtB,QAAM,iBAAa,sBAAO,OAAO;AACjC,aAAW,UAAU;AAKrB,QAAM,iBAAa,sBAAO,KAAK;AAE/B,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,WAAW;AAChC,gBAAY,UAAU;AAAA,EACxB;AAEA,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,aAAa,KAAK,EAAG;AAC1B,YAAQ;AAER,UAAM,cAAU,0CAAiB,MAAM;AACvC,QAAI,CAAC,QAAQ,OAAQ;AAErB,gBAAY,UAAU,IAAI;AAAA,MAAe,IAAI,SAC3C,YAAY,QAAQ,GAAG,IAAI;AAAA,IAC7B;AACA,YAAQ,QAAQ,CAAC,OAAO;AACtB,kBAAY,QAAS,QAAQ,IAAI,EAAE,KAAK,WAAW,SAAS,IAAI,CAAC;AAAA,IACnE,CAAC;AAAA,EACH;AAOA,+BAAU,MAAM;AACd,eAAW,UAAU;AACrB,UAAM;AACN,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAML,+BAAW,MAAM;AACf,kDAAiB,MAAM;AACvB,QAAI,WAAW,QAAS,OAAM;AAAA,EAChC,CAAC;AAED,SAAO,EAAE,aAAa,cAAc,MAAM,QAAQ;AACpD;","names":["import_react","import_normalizeTargets"]}

package/dist/elements/useResizeObserver/index.mjs

@@ -0,0 +1,49 @@
+import { useObservable, useObserve } from "@legendapp/state/react";
+import { useEffect, useRef } from "react";
+import { normalizeTargets } from "../../shared/normalizeTargets";
+import { normalizeTargets as normalizeTargets2 } from "../../shared/normalizeTargets";
+function useResizeObserver(target, callback, options) {
+  const isSupported$ = useObservable(
+    typeof ResizeObserver !== "undefined"
+  );
+  const observerRef = useRef(null);
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const mountedRef = useRef(false);
+  const cleanup = () => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+  const setup = () => {
+    if (!isSupported$.peek()) return;
+    cleanup();
+    const targets = normalizeTargets(target);
+    if (!targets.length) return;
+    observerRef.current = new ResizeObserver(
+      (...args) => callbackRef.current(...args)
+    );
+    targets.forEach((el) => {
+      observerRef.current.observe(el, { box: optionsRef.current?.box });
+    });
+  };
+  useEffect(() => {
+    mountedRef.current = true;
+    setup();
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, []);
+  useObserve(() => {
+    normalizeTargets(target);
+    if (mountedRef.current) setup();
+  });
+  return { isSupported: isSupported$, stop: cleanup };
+}
+export {
+  normalizeTargets2 as normalizeTargets,
+  useResizeObserver
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useResizeObserver/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useObserve } from \"@legendapp/state/react\";\nimport { useEffect, useRef } from \"react\";\nimport { normalizeTargets } from \"../../shared/normalizeTargets\";\nimport { MaybeElement } from \"../useRef$\";\n\nexport { normalizeTargets } from \"../../shared/normalizeTargets\";\n\nexport interface UseResizeObserverOptions {\n  box?: \"content-box\" | \"border-box\" | \"device-pixel-content-box\";\n}\n\nexport interface UseResizeObserverReturn {\n  isSupported: Observable<boolean>;\n  stop: () => void;\n}\n\n/**\n * Observes one or more elements for size changes using the ResizeObserver API.\n *\n * @param target - Element(s) to observe: Ref$, Observable<Element|null>, plain Element, or an array\n * @param callback - ResizeObserver callback. Wrap in `useCallback` to avoid stale closures —\n *   the observer is only recreated when targets change, not on every render.\n * @param options - Optional box model option. Note: dynamic `box` changes are not reactively\n *   tracked; remount the hook or change a tracked target to pick up a new box value.\n * @returns `{ isSupported, stop }` — reactive support flag and manual stop function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const handleResize = useCallback<ResizeObserverCallback>((entries) => {\n *   const { width, height } = entries[0].contentRect;\n *   width$.set(width);\n * }, []);\n * useResizeObserver(el$, handleResize);\n * return <div ref={el$} />;\n * ```\n */\nexport function useResizeObserver(\n  target: MaybeElement | MaybeElement[],\n  callback: ResizeObserverCallback,\n  options?: UseResizeObserverOptions,\n): UseResizeObserverReturn {\n  const isSupported$ = useObservable<boolean>(\n    typeof ResizeObserver !== \"undefined\",\n  );\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  // Always use the latest callback without recreating the observer on every render.\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n\n  // Always use the latest options in setup() without reactive tracking.\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  // Guards useObserve's initial synchronous run (before DOM is committed) from\n  // calling setup(). Only useMount triggers the first setup, ensuring elements\n  // are available in the DOM before observation begins.\n  const mountedRef = useRef(false);\n\n  const cleanup = () => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n  };\n\n  const setup = () => {\n    if (!isSupported$.peek()) return;\n    cleanup();\n\n    const targets = normalizeTargets(target);\n    if (!targets.length) return;\n\n    observerRef.current = new ResizeObserver((...args) =>\n      callbackRef.current(...args),\n    );\n    targets.forEach((el) => {\n      observerRef.current!.observe(el, { box: optionsRef.current?.box });\n    });\n  };\n\n  // Initial setup after DOM is committed; cleanup on unmount.\n  // useEffect is used directly (instead of useMount/useUnmount) because\n  // Legend-State's useEffectOnce delays cleanup via queueMicrotask in test\n  // environments, making synchronous post-unmount assertions unreliable.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    mountedRef.current = true;\n    setup();\n    return () => {\n      mountedRef.current = false;\n      cleanup();\n    };\n  }, []);\n\n  // Re-run setup whenever observable targets (Ref$ or Observable<Element>) change.\n  // Reading normalizeTargets(target) here registers observable dependencies so\n  // useObserve re-fires when a tracked target value changes.\n  // mountedRef guard prevents a redundant setup on the initial synchronous run.\n  useObserve(() => {\n    normalizeTargets(target);\n    if (mountedRef.current) setup();\n  });\n\n  return { isSupported: isSupported$, stop: cleanup };\n}\n"],"mappings":"AACA,SAAS,eAAe,kBAAkB;AAC1C,SAAS,WAAW,cAAc;AAClC,SAAS,wBAAwB;AAGjC,SAAS,oBAAAA,yBAAwB;AAgC1B,SAAS,kBACd,QACA,UACA,SACyB;AACzB,QAAM,eAAe;AAAA,IACnB,OAAO,mBAAmB;AAAA,EAC5B;AACA,QAAM,cAAc,OAA8B,IAAI;AAGtD,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAGtB,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AAKrB,QAAM,aAAa,OAAO,KAAK;AAE/B,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,WAAW;AAChC,gBAAY,UAAU;AAAA,EACxB;AAEA,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,aAAa,KAAK,EAAG;AAC1B,YAAQ;AAER,UAAM,UAAU,iBAAiB,MAAM;AACvC,QAAI,CAAC,QAAQ,OAAQ;AAErB,gBAAY,UAAU,IAAI;AAAA,MAAe,IAAI,SAC3C,YAAY,QAAQ,GAAG,IAAI;AAAA,IAC7B;AACA,YAAQ,QAAQ,CAAC,OAAO;AACtB,kBAAY,QAAS,QAAQ,IAAI,EAAE,KAAK,WAAW,SAAS,IAAI,CAAC;AAAA,IACnE,CAAC;AAAA,EACH;AAOA,YAAU,MAAM;AACd,eAAW,UAAU;AACrB,UAAM;AACN,WAAO,MAAM;AACX,iBAAW,UAAU;AACrB,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,CAAC;AAML,aAAW,MAAM;AACf,qBAAiB,MAAM;AACvB,QAAI,WAAW,QAAS,OAAM;AAAA,EAChC,CAAC;AAED,SAAO,EAAE,aAAa,cAAc,MAAM,QAAQ;AACpD;","names":["normalizeTargets"]}

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

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

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

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

package/dist/elements/useWindowFocus/demo.js

@@ -0,0 +1,104 @@
+"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: () => UseWindowFocusDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require(".");
+var import_react = require("@legendapp/state/react");
+const dot = {
+  display: "inline-block",
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  marginRight: "6px",
+  verticalAlign: "middle"
+};
+function UseWindowFocusDemo() {
+  const focused$ = (0, import__.useWindowFocus)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => {
+          const focused = focused$.get();
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                padding: "10px 14px",
+                borderRadius: "6px",
+                border: `1px solid ${focused ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #94a3b8)"}`,
+                background: focused ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-gray-6, #f8fafc)",
+                transition: "border-color 0.2s, background 0.2s"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    style: {
+                      ...dot,
+                      background: focused ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #94a3b8)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  "focused$.get() =",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "strong",
+                    {
+                      style: {
+                        color: focused ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-3, #64748b)"
+                      },
+                      children: String(focused)
+                    }
+                  )
+                ] })
+              ]
+            }
+          );
+        } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: "11px",
+              color: "var(--sl-color-gray-3, #94a3b8)"
+            },
+            children: "Click outside this window or switch tabs to see the value change."
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowFocus/demo.tsx"],"sourcesContent":["import { useWindowFocus } from \".\";\nimport { Computed } from \"@legendapp/state/react\";\n\nconst dot: React.CSSProperties = {\n  display: \"inline-block\",\n  width: \"8px\",\n  height: \"8px\",\n  borderRadius: \"50%\",\n  marginRight: \"6px\",\n  verticalAlign: \"middle\",\n};\n\nexport default function UseWindowFocusDemo() {\n  const focused$ = useWindowFocus();\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"10px\",\n        fontFamily: \"monospace\",\n        fontSize: \"13px\",\n      }}\n    >\n      <Computed>\n        {() => {\n          const focused = focused$.get();\n          return (\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                padding: \"10px 14px\",\n                borderRadius: \"6px\",\n                border: `1px solid ${focused ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-gray-4, #94a3b8)\"}`,\n                background: focused\n                  ? \"var(--sl-color-green-low, #f0fdf4)\"\n                  : \"var(--sl-color-gray-6, #f8fafc)\",\n                transition: \"border-color 0.2s, background 0.2s\",\n              }}\n            >\n              <span\n                style={{\n                  ...dot,\n                  background: focused\n                    ? \"var(--sl-color-green, #22c55e)\"\n                    : \"var(--sl-color-gray-4, #94a3b8)\",\n                }}\n              />\n              <span>\n                focused$.get() ={\" \"}\n                <strong\n                  style={{\n                    color: focused\n                      ? \"var(--sl-color-green, #22c55e)\"\n                      : \"var(--sl-color-gray-3, #64748b)\",\n                  }}\n                >\n                  {String(focused)}\n                </strong>\n              </span>\n            </div>\n          );\n        }}\n      </Computed>\n\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Click outside this window or switch tabs to see the value change.\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Cc;AA1Cd,eAA+B;AAC/B,mBAAyB;AAEzB,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,eAAe;AACjB;AAEe,SAAR,qBAAsC;AAC3C,QAAM,eAAW,yBAAe;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA,oDAAC,yBACE,gBAAM;AACL,gBAAM,UAAU,SAAS,IAAI;AAC7B,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,QAAQ,aAAa,UAAU,mCAAmC,iCAAiC;AAAA,gBACnG,YAAY,UACR,uCACA;AAAA,gBACJ,YAAY;AAAA,cACd;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,sBACL,GAAG;AAAA,sBACH,YAAY,UACR,mCACA;AAAA,oBACN;AAAA;AAAA,gBACF;AAAA,gBACA,6CAAC,UAAK;AAAA;AAAA,kBACa;AAAA,kBACjB;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO;AAAA,wBACL,OAAO,UACH,mCACA;AAAA,sBACN;AAAA,sBAEC,iBAAO,OAAO;AAAA;AAAA,kBACjB;AAAA,mBACF;AAAA;AAAA;AAAA,UACF;AAAA,QAEJ,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,OAAO;AAAA,YACT;AAAA,YACD;AAAA;AAAA,QAED;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/elements/useWindowFocus/demo.mjs

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useWindowFocus } from ".";
+import { Computed } from "@legendapp/state/react";
+const dot = {
+  display: "inline-block",
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  marginRight: "6px",
+  verticalAlign: "middle"
+};
+function UseWindowFocusDemo() {
+  const focused$ = useWindowFocus();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Computed, { children: () => {
+          const focused = focused$.get();
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                padding: "10px 14px",
+                borderRadius: "6px",
+                border: `1px solid ${focused ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #94a3b8)"}`,
+                background: focused ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-gray-6, #f8fafc)",
+                transition: "border-color 0.2s, background 0.2s"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      ...dot,
+                      background: focused ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #94a3b8)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "focused$.get() =",
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    "strong",
+                    {
+                      style: {
+                        color: focused ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-3, #64748b)"
+                      },
+                      children: String(focused)
+                    }
+                  )
+                ] })
+              ]
+            }
+          );
+        } }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: "11px",
+              color: "var(--sl-color-gray-3, #94a3b8)"
+            },
+            children: "Click outside this window or switch tabs to see the value change."
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  UseWindowFocusDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowFocus/demo.tsx"],"sourcesContent":["import { useWindowFocus } from \".\";\nimport { Computed } from \"@legendapp/state/react\";\n\nconst dot: React.CSSProperties = {\n  display: \"inline-block\",\n  width: \"8px\",\n  height: \"8px\",\n  borderRadius: \"50%\",\n  marginRight: \"6px\",\n  verticalAlign: \"middle\",\n};\n\nexport default function UseWindowFocusDemo() {\n  const focused$ = useWindowFocus();\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"10px\",\n        fontFamily: \"monospace\",\n        fontSize: \"13px\",\n      }}\n    >\n      <Computed>\n        {() => {\n          const focused = focused$.get();\n          return (\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                padding: \"10px 14px\",\n                borderRadius: \"6px\",\n                border: `1px solid ${focused ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-gray-4, #94a3b8)\"}`,\n                background: focused\n                  ? \"var(--sl-color-green-low, #f0fdf4)\"\n                  : \"var(--sl-color-gray-6, #f8fafc)\",\n                transition: \"border-color 0.2s, background 0.2s\",\n              }}\n            >\n              <span\n                style={{\n                  ...dot,\n                  background: focused\n                    ? \"var(--sl-color-green, #22c55e)\"\n                    : \"var(--sl-color-gray-4, #94a3b8)\",\n                }}\n              />\n              <span>\n                focused$.get() ={\" \"}\n                <strong\n                  style={{\n                    color: focused\n                      ? \"var(--sl-color-green, #22c55e)\"\n                      : \"var(--sl-color-gray-3, #64748b)\",\n                  }}\n                >\n                  {String(focused)}\n                </strong>\n              </span>\n            </div>\n          );\n        }}\n      </Computed>\n\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Click outside this window or switch tabs to see the value change.\n      </p>\n    </div>\n  );\n}\n"],"mappings":"AA0Cc,cAQA,YARA;AA1Cd,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAEzB,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,eAAe;AACjB;AAEe,SAAR,qBAAsC;AAC3C,QAAM,WAAW,eAAe;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA,4BAAC,YACE,gBAAM;AACL,gBAAM,UAAU,SAAS,IAAI;AAC7B,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,YAAY;AAAA,gBACZ,SAAS;AAAA,gBACT,cAAc;AAAA,gBACd,QAAQ,aAAa,UAAU,mCAAmC,iCAAiC;AAAA,gBACnG,YAAY,UACR,uCACA;AAAA,gBACJ,YAAY;AAAA,cACd;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,sBACL,GAAG;AAAA,sBACH,YAAY,UACR,mCACA;AAAA,oBACN;AAAA;AAAA,gBACF;AAAA,gBACA,qBAAC,UAAK;AAAA;AAAA,kBACa;AAAA,kBACjB;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO;AAAA,wBACL,OAAO,UACH,mCACA;AAAA,sBACN;AAAA,sBAEC,iBAAO,OAAO;AAAA;AAAA,kBACjB;AAAA,mBACF;AAAA;AAAA;AAAA,UACF;AAAA,QAEJ,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,OAAO;AAAA,YACT;AAAA,YACD;AAAA;AAAA,QAED;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -0,0 +1,5 @@
+import { Observable } from '@legendapp/state';
+
+declare function useWindowFocus(): Observable<boolean>;
+
+export { useWindowFocus };

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

@@ -0,0 +1,5 @@
+import { Observable } from '@legendapp/state';
+
+declare function useWindowFocus(): Observable<boolean>;
+
+export { useWindowFocus };

package/dist/elements/useWindowFocus/index.js

@@ -0,0 +1,42 @@
+"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 useWindowFocus_exports = {};
+__export(useWindowFocus_exports, {
+  useWindowFocus: () => useWindowFocus
+});
+module.exports = __toCommonJS(useWindowFocus_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("@legendapp/state/react");
+var import_useEventListener = require("../../browser/useEventListener");
+// @__NO_SIDE_EFFECTS__
+function useWindowFocus() {
+  const focused$ = (0, import_react.useObservable)(false);
+  (0, import_react2.useMount)(() => {
+    focused$.set(document.hasFocus());
+  });
+  (0, import_useEventListener.useEventListener)("focus", () => focused$.set(true), { passive: true });
+  (0, import_useEventListener.useEventListener)("blur", () => focused$.set(false), { passive: true });
+  return focused$;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useWindowFocus
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowFocus/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { useMount } from \"@legendapp/state/react\";\nimport { useEventListener } from \"../../browser/useEventListener\";\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useWindowFocus(): Observable<boolean> {\n  // Always initialize with false to match SSR output and avoid hydration mismatch.\n  // The actual value is synced after mount.\n  const focused$ = useObservable<boolean>(false);\n\n  useMount(() => {\n    focused$.set(document.hasFocus());\n  });\n\n  useEventListener(\"focus\", () => focused$.set(true), { passive: true });\n  useEventListener(\"blur\", () => focused$.set(false), { passive: true });\n\n  return focused$;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA8B;AAC9B,IAAAA,gBAAyB;AACzB,8BAAiC;AAAA;AAG1B,SAAS,iBAAsC;AAGpD,QAAM,eAAW,4BAAuB,KAAK;AAE7C,8BAAS,MAAM;AACb,aAAS,IAAI,SAAS,SAAS,CAAC;AAAA,EAClC,CAAC;AAED,gDAAiB,SAAS,MAAM,SAAS,IAAI,IAAI,GAAG,EAAE,SAAS,KAAK,CAAC;AACrE,gDAAiB,QAAQ,MAAM,SAAS,IAAI,KAAK,GAAG,EAAE,SAAS,KAAK,CAAC;AAErE,SAAO;AACT;","names":["import_react"]}

package/dist/elements/useWindowFocus/index.mjs

@@ -0,0 +1,18 @@
+"use client";
+import { useObservable } from "@legendapp/state/react";
+import { useMount } from "@legendapp/state/react";
+import { useEventListener } from "../../browser/useEventListener";
+// @__NO_SIDE_EFFECTS__
+function useWindowFocus() {
+  const focused$ = useObservable(false);
+  useMount(() => {
+    focused$.set(document.hasFocus());
+  });
+  useEventListener("focus", () => focused$.set(true), { passive: true });
+  useEventListener("blur", () => focused$.set(false), { passive: true });
+  return focused$;
+}
+export {
+  useWindowFocus
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowFocus/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { useMount } from \"@legendapp/state/react\";\nimport { useEventListener } from \"../../browser/useEventListener\";\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useWindowFocus(): Observable<boolean> {\n  // Always initialize with false to match SSR output and avoid hydration mismatch.\n  // The actual value is synced after mount.\n  const focused$ = useObservable<boolean>(false);\n\n  useMount(() => {\n    focused$.set(document.hasFocus());\n  });\n\n  useEventListener(\"focus\", () => focused$.set(true), { passive: true });\n  useEventListener(\"blur\", () => focused$.set(false), { passive: true });\n\n  return focused$;\n}\n"],"mappings":";AAEA,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAAA;AAG1B,SAAS,iBAAsC;AAGpD,QAAM,WAAW,cAAuB,KAAK;AAE7C,WAAS,MAAM;AACb,aAAS,IAAI,SAAS,SAAS,CAAC;AAAA,EAClC,CAAC;AAED,mBAAiB,SAAS,MAAM,SAAS,IAAI,IAAI,GAAG,EAAE,SAAS,KAAK,CAAC;AACrE,mBAAiB,QAAQ,MAAM,SAAS,IAAI,KAAK,GAAG,EAAE,SAAS,KAAK,CAAC;AAErE,SAAO;AACT;","names":[]}

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

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

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

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