@usels/core 0.0.1

package/dist/elements/useWindowSize/demo.js

@@ -0,0 +1,79 @@
+"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: () => UseWindowSizeDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import__ = require(".");
+var import_react = require("@legendapp/state/react");
+const row = {
+  display: "flex",
+  alignItems: "center",
+  padding: "8px 14px",
+  borderRadius: "6px",
+  border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+  background: "var(--sl-color-gray-6, #f1f5f9)",
+  // borderRadius: "6px",
+  gap: "24px",
+  color: "white"
+};
+function UseWindowSizeDemo() {
+  const { width: width$, height: height$ } = (0, import__.useWindowSize)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "14px",
+        background: "var(--sl-color-gray-6, #f1f5f9)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: row, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "width: ",
+            width$.get(),
+            "px"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "height: ",
+            height$.get(),
+            "px"
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            style: {
+              margin: 5,
+              fontSize: "11px",
+              color: "var(--sl-color-gray-3, #94a3b8)"
+            },
+            children: "Resize the browser window to see the values update."
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowSize/demo.tsx"],"sourcesContent":["import { useWindowSize } from \".\";\nimport { Computed } from \"@legendapp/state/react\";\n\nconst row: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  padding: \"8px 14px\",\n  borderRadius: \"6px\",\n  border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n\n  background: \"var(--sl-color-gray-6, #f1f5f9)\",\n  // borderRadius: \"6px\",\n  gap: \"24px\",\n  color: \"white\",\n};\n\nexport default function UseWindowSizeDemo() {\n  const { width: width$, height: height$ } = useWindowSize();\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\",\n        fontFamily: \"monospace\",\n        fontSize: \"14px\",\n        background: \"var(--sl-color-gray-6, #f1f5f9)\",\n      }}\n    >\n      <Computed>\n        {() => (\n          <div style={row}>\n            <span>width: {width$.get()}px</span>\n            <span>height: {height$.get()}px</span>\n          </div>\n        )}\n      </Computed>\n\n      <p\n        style={{\n          margin: 5,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Resize the browser window to see the values update.\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BM;AA9BN,eAA8B;AAC9B,mBAAyB;AAEzB,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EAER,YAAY;AAAA;AAAA,EAEZ,KAAK;AAAA,EACL,OAAO;AACT;AAEe,SAAR,oBAAqC;AAC1C,QAAM,EAAE,OAAO,QAAQ,QAAQ,QAAQ,QAAI,wBAAc;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,oDAAC,yBACE,gBACC,6CAAC,SAAI,OAAO,KACV;AAAA,uDAAC,UAAK;AAAA;AAAA,YAAQ,OAAO,IAAI;AAAA,YAAE;AAAA,aAAE;AAAA,UAC7B,6CAAC,UAAK;AAAA;AAAA,YAAS,QAAQ,IAAI;AAAA,YAAE;AAAA,aAAE;AAAA,WACjC,GAEJ;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/useWindowSize/demo.mjs

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useWindowSize } from ".";
+import { Computed } from "@legendapp/state/react";
+const row = {
+  display: "flex",
+  alignItems: "center",
+  padding: "8px 14px",
+  borderRadius: "6px",
+  border: "1px solid var(--sl-color-gray-5, #e2e8f0)",
+  background: "var(--sl-color-gray-6, #f1f5f9)",
+  // borderRadius: "6px",
+  gap: "24px",
+  color: "white"
+};
+function UseWindowSizeDemo() {
+  const { width: width$, height: height$ } = useWindowSize();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "14px",
+        background: "var(--sl-color-gray-6, #f1f5f9)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs("div", { style: row, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "width: ",
+            width$.get(),
+            "px"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "height: ",
+            height$.get(),
+            "px"
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              margin: 5,
+              fontSize: "11px",
+              color: "var(--sl-color-gray-3, #94a3b8)"
+            },
+            children: "Resize the browser window to see the values update."
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  UseWindowSizeDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowSize/demo.tsx"],"sourcesContent":["import { useWindowSize } from \".\";\nimport { Computed } from \"@legendapp/state/react\";\n\nconst row: React.CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  padding: \"8px 14px\",\n  borderRadius: \"6px\",\n  border: \"1px solid var(--sl-color-gray-5, #e2e8f0)\",\n\n  background: \"var(--sl-color-gray-6, #f1f5f9)\",\n  // borderRadius: \"6px\",\n  gap: \"24px\",\n  color: \"white\",\n};\n\nexport default function UseWindowSizeDemo() {\n  const { width: width$, height: height$ } = useWindowSize();\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\",\n        fontFamily: \"monospace\",\n        fontSize: \"14px\",\n        background: \"var(--sl-color-gray-6, #f1f5f9)\",\n      }}\n    >\n      <Computed>\n        {() => (\n          <div style={row}>\n            <span>width: {width$.get()}px</span>\n            <span>height: {height$.get()}px</span>\n          </div>\n        )}\n      </Computed>\n\n      <p\n        style={{\n          margin: 5,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Resize the browser window to see the values update.\n      </p>\n    </div>\n  );\n}\n"],"mappings":"AA8BM,cAGM,YAHN;AA9BN,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AAEzB,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EAER,YAAY;AAAA;AAAA,EAEZ,KAAK;AAAA,EACL,OAAO;AACT;AAEe,SAAR,oBAAqC;AAC1C,QAAM,EAAE,OAAO,QAAQ,QAAQ,QAAQ,IAAI,cAAc;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,YACE,gBACC,qBAAC,SAAI,OAAO,KACV;AAAA,+BAAC,UAAK;AAAA;AAAA,YAAQ,OAAO,IAAI;AAAA,YAAE;AAAA,aAAE;AAAA,UAC7B,qBAAC,UAAK;AAAA;AAAA,YAAS,QAAQ,IAAI;AAAA,YAAE;AAAA,aAAE;AAAA,WACjC,GAEJ;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/useWindowSize/index.d.mts

@@ -0,0 +1,17 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.mjs';
+
+interface UseWindowSizeOptions {
+    initialWidth?: number;
+    initialHeight?: number;
+    listenOrientation?: boolean;
+    includeScrollbar?: boolean;
+    type?: "inner" | "outer" | "visual";
+}
+type UseWindowSizeReturn = Observable<{
+    width: number;
+    height: number;
+}>;
+declare function useWindowSize(options?: DeepMaybeObservable<UseWindowSizeOptions>): UseWindowSizeReturn;
+
+export { type UseWindowSizeOptions, type UseWindowSizeReturn, useWindowSize };

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

@@ -0,0 +1,17 @@
+import { Observable } from '@legendapp/state';
+import { DeepMaybeObservable } from '../../types.js';
+
+interface UseWindowSizeOptions {
+    initialWidth?: number;
+    initialHeight?: number;
+    listenOrientation?: boolean;
+    includeScrollbar?: boolean;
+    type?: "inner" | "outer" | "visual";
+}
+type UseWindowSizeReturn = Observable<{
+    width: number;
+    height: number;
+}>;
+declare function useWindowSize(options?: DeepMaybeObservable<UseWindowSizeOptions>): UseWindowSizeReturn;
+
+export { type UseWindowSizeOptions, type UseWindowSizeReturn, useWindowSize };

package/dist/elements/useWindowSize/index.js

@@ -0,0 +1,96 @@
+"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 useWindowSize_exports = {};
+__export(useWindowSize_exports, {
+  useWindowSize: () => useWindowSize
+});
+module.exports = __toCommonJS(useWindowSize_exports);
+var import_react = require("@legendapp/state/react");
+var import_useEventListener = require("../../browser/useEventListener");
+var import_useMediaQuery = require("../../browser/useMediaQuery");
+var import_useMayObservableOptions = require("../../function/useMayObservableOptions");
+var import_useWhenMounted = require("../../function/useWhenMounted");
+// @__NO_SIDE_EFFECTS__
+function useWindowSize(options) {
+  const opts$ = (0, import_useMayObservableOptions.useMayObservableOptions)(options, {
+    initialWidth: "peek",
+    initialHeight: "peek"
+  });
+  const size$ = (0, import_react.useObservable)({
+    width: opts$.initialWidth.peek() ?? 0,
+    height: opts$.initialHeight.peek() ?? 0
+  });
+  const update = () => {
+    if (typeof window === "undefined") return;
+    const type = opts$.type.peek() ?? "inner";
+    const includeScrollbar = opts$.includeScrollbar.peek() !== false;
+    let width;
+    let height;
+    if (type === "outer") {
+      width = window.outerWidth;
+      height = window.outerHeight;
+    } else if (type === "visual") {
+      const vp = window.visualViewport;
+      if (vp) {
+        width = vp.width * vp.scale;
+        height = vp.height * vp.scale;
+      } else {
+        width = window.innerWidth;
+        height = window.innerHeight;
+      }
+    } else {
+      if (includeScrollbar) {
+        width = window.innerWidth;
+        height = window.innerHeight;
+      } else {
+        width = document.documentElement.clientWidth;
+        height = document.documentElement.clientHeight;
+      }
+    }
+    size$.assign({ width, height });
+  };
+  (0, import_react.useMount)(update);
+  (0, import_useEventListener.useEventListener)("resize", update, { passive: true });
+  const vp$ = (0, import_useWhenMounted.useWhenMounted)(
+    () => opts$.type.peek() === "visual" ? window.visualViewport : null
+  );
+  (0, import_useEventListener.useEventListener)(vp$, "resize", update);
+  (0, import_react.useObserveEffect)((e) => {
+    opts$.type.get();
+    opts$.includeScrollbar.get();
+    if (e.num > 0) update();
+  });
+  const matches$ = (0, import_useMediaQuery.useMediaQuery)("(orientation: portrait)");
+  (0, import_react.useObserveEffect)(
+    matches$,
+    () => {
+      if (opts$.listenOrientation.get() !== false) {
+        update();
+      }
+    },
+    { immediate: false }
+  );
+  return size$;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useWindowSize
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowSize/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport {\n  useObservable,\n  useMount,\n  useObserveEffect,\n} from \"@legendapp/state/react\";\nimport { useEventListener } from \"../../browser/useEventListener\";\nimport { useMediaQuery } from \"../../browser/useMediaQuery\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport { useWhenMounted } from \"../../function/useWhenMounted\";\nimport type { DeepMaybeObservable } from \"../../types\";\n\nexport interface UseWindowSizeOptions {\n  initialWidth?: number;\n  initialHeight?: number;\n  listenOrientation?: boolean;\n  includeScrollbar?: boolean;\n  type?: \"inner\" | \"outer\" | \"visual\";\n}\n\nexport type UseWindowSizeReturn = Observable<{\n  width: number;\n  height: number;\n}>;\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useWindowSize(\n  options?: DeepMaybeObservable<UseWindowSizeOptions>,\n): UseWindowSizeReturn {\n  // Standard Pattern: normalize DeepMaybeObservable<Options> into a stable computed Observable.\n  const opts$ = useMayObservableOptions<UseWindowSizeOptions>(options, {\n    initialWidth: \"peek\",\n    initialHeight: \"peek\",\n  });\n\n  const size$ = useObservable({\n    width: opts$.initialWidth.peek() ?? 0,\n    height: opts$.initialHeight.peek() ?? 0,\n  });\n\n  const update = () => {\n    if (typeof window === \"undefined\") return;\n\n    const type = opts$.type.peek() ?? \"inner\";\n    const includeScrollbar = opts$.includeScrollbar.peek() !== false;\n\n    let width: number;\n    let height: number;\n\n    if (type === \"outer\") {\n      width = window.outerWidth;\n      height = window.outerHeight;\n    } else if (type === \"visual\") {\n      const vp = window.visualViewport;\n      if (vp) {\n        width = vp.width * vp.scale;\n        height = vp.height * vp.scale;\n      } else {\n        width = window.innerWidth;\n        height = window.innerHeight;\n      }\n    } else {\n      if (includeScrollbar) {\n        width = window.innerWidth;\n        height = window.innerHeight;\n      } else {\n        width = document.documentElement.clientWidth;\n        height = document.documentElement.clientHeight;\n      }\n    }\n\n    size$.assign({ width, height });\n  };\n\n  useMount(update);\n\n  useEventListener(\"resize\", update, { passive: true });\n\n  const vp$ = useWhenMounted(() =>\n    opts$.type.peek() === \"visual\" ? window.visualViewport : null,\n  );\n\n  useEventListener(vp$, \"resize\", update);\n\n  // type 또는 includeScrollbar가 변경되면 즉시 재측정\n  // 단일 함수 형태: opts$.type.get()/opts$.includeScrollbar.get()으로 dep 등록,\n  // update()는 .peek()만 사용하므로 추가 dep을 등록하지 않음.\n  useObserveEffect((e) => {\n    opts$.type.get();\n    opts$.includeScrollbar.get();\n    if (e.num > 0) update();\n  });\n\n  const matches$ = useMediaQuery(\"(orientation: portrait)\");\n  useObserveEffect(\n    matches$,\n    () => {\n      if (opts$.listenOrientation.get() !== false) {\n        update();\n      }\n    },\n    { immediate: false },\n  );\n\n  return size$;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAIO;AACP,8BAAiC;AACjC,2BAA8B;AAC9B,qCAAwC;AACxC,4BAA+B;AAAA;AAiBxB,SAAS,cACd,SACqB;AAErB,QAAM,YAAQ,wDAA8C,SAAS;AAAA,IACnE,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AAED,QAAM,YAAQ,4BAAc;AAAA,IAC1B,OAAO,MAAM,aAAa,KAAK,KAAK;AAAA,IACpC,QAAQ,MAAM,cAAc,KAAK,KAAK;AAAA,EACxC,CAAC;AAED,QAAM,SAAS,MAAM;AACnB,QAAI,OAAO,WAAW,YAAa;AAEnC,UAAM,OAAO,MAAM,KAAK,KAAK,KAAK;AAClC,UAAM,mBAAmB,MAAM,iBAAiB,KAAK,MAAM;AAE3D,QAAI;AACJ,QAAI;AAEJ,QAAI,SAAS,SAAS;AACpB,cAAQ,OAAO;AACf,eAAS,OAAO;AAAA,IAClB,WAAW,SAAS,UAAU;AAC5B,YAAM,KAAK,OAAO;AAClB,UAAI,IAAI;AACN,gBAAQ,GAAG,QAAQ,GAAG;AACtB,iBAAS,GAAG,SAAS,GAAG;AAAA,MAC1B,OAAO;AACL,gBAAQ,OAAO;AACf,iBAAS,OAAO;AAAA,MAClB;AAAA,IACF,OAAO;AACL,UAAI,kBAAkB;AACpB,gBAAQ,OAAO;AACf,iBAAS,OAAO;AAAA,MAClB,OAAO;AACL,gBAAQ,SAAS,gBAAgB;AACjC,iBAAS,SAAS,gBAAgB;AAAA,MACpC;AAAA,IACF;AAEA,UAAM,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EAChC;AAEA,6BAAS,MAAM;AAEf,gDAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AAEpD,QAAM,UAAM;AAAA,IAAe,MACzB,MAAM,KAAK,KAAK,MAAM,WAAW,OAAO,iBAAiB;AAAA,EAC3D;AAEA,gDAAiB,KAAK,UAAU,MAAM;AAKtC,qCAAiB,CAAC,MAAM;AACtB,UAAM,KAAK,IAAI;AACf,UAAM,iBAAiB,IAAI;AAC3B,QAAI,EAAE,MAAM,EAAG,QAAO;AAAA,EACxB,CAAC;AAED,QAAM,eAAW,oCAAc,yBAAyB;AACxD;AAAA,IACE;AAAA,IACA,MAAM;AACJ,UAAI,MAAM,kBAAkB,IAAI,MAAM,OAAO;AAC3C,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,EAAE,WAAW,MAAM;AAAA,EACrB;AAEA,SAAO;AACT;","names":[]}

package/dist/elements/useWindowSize/index.mjs

@@ -0,0 +1,76 @@
+"use client";
+import {
+  useObservable,
+  useMount,
+  useObserveEffect
+} from "@legendapp/state/react";
+import { useEventListener } from "../../browser/useEventListener";
+import { useMediaQuery } from "../../browser/useMediaQuery";
+import { useMayObservableOptions } from "../../function/useMayObservableOptions";
+import { useWhenMounted } from "../../function/useWhenMounted";
+// @__NO_SIDE_EFFECTS__
+function useWindowSize(options) {
+  const opts$ = useMayObservableOptions(options, {
+    initialWidth: "peek",
+    initialHeight: "peek"
+  });
+  const size$ = useObservable({
+    width: opts$.initialWidth.peek() ?? 0,
+    height: opts$.initialHeight.peek() ?? 0
+  });
+  const update = () => {
+    if (typeof window === "undefined") return;
+    const type = opts$.type.peek() ?? "inner";
+    const includeScrollbar = opts$.includeScrollbar.peek() !== false;
+    let width;
+    let height;
+    if (type === "outer") {
+      width = window.outerWidth;
+      height = window.outerHeight;
+    } else if (type === "visual") {
+      const vp = window.visualViewport;
+      if (vp) {
+        width = vp.width * vp.scale;
+        height = vp.height * vp.scale;
+      } else {
+        width = window.innerWidth;
+        height = window.innerHeight;
+      }
+    } else {
+      if (includeScrollbar) {
+        width = window.innerWidth;
+        height = window.innerHeight;
+      } else {
+        width = document.documentElement.clientWidth;
+        height = document.documentElement.clientHeight;
+      }
+    }
+    size$.assign({ width, height });
+  };
+  useMount(update);
+  useEventListener("resize", update, { passive: true });
+  const vp$ = useWhenMounted(
+    () => opts$.type.peek() === "visual" ? window.visualViewport : null
+  );
+  useEventListener(vp$, "resize", update);
+  useObserveEffect((e) => {
+    opts$.type.get();
+    opts$.includeScrollbar.get();
+    if (e.num > 0) update();
+  });
+  const matches$ = useMediaQuery("(orientation: portrait)");
+  useObserveEffect(
+    matches$,
+    () => {
+      if (opts$.listenOrientation.get() !== false) {
+        update();
+      }
+    },
+    { immediate: false }
+  );
+  return size$;
+}
+export {
+  useWindowSize
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useWindowSize/index.ts"],"sourcesContent":["\"use client\";\nimport type { Observable } from \"@legendapp/state\";\nimport {\n  useObservable,\n  useMount,\n  useObserveEffect,\n} from \"@legendapp/state/react\";\nimport { useEventListener } from \"../../browser/useEventListener\";\nimport { useMediaQuery } from \"../../browser/useMediaQuery\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport { useWhenMounted } from \"../../function/useWhenMounted\";\nimport type { DeepMaybeObservable } from \"../../types\";\n\nexport interface UseWindowSizeOptions {\n  initialWidth?: number;\n  initialHeight?: number;\n  listenOrientation?: boolean;\n  includeScrollbar?: boolean;\n  type?: \"inner\" | \"outer\" | \"visual\";\n}\n\nexport type UseWindowSizeReturn = Observable<{\n  width: number;\n  height: number;\n}>;\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useWindowSize(\n  options?: DeepMaybeObservable<UseWindowSizeOptions>,\n): UseWindowSizeReturn {\n  // Standard Pattern: normalize DeepMaybeObservable<Options> into a stable computed Observable.\n  const opts$ = useMayObservableOptions<UseWindowSizeOptions>(options, {\n    initialWidth: \"peek\",\n    initialHeight: \"peek\",\n  });\n\n  const size$ = useObservable({\n    width: opts$.initialWidth.peek() ?? 0,\n    height: opts$.initialHeight.peek() ?? 0,\n  });\n\n  const update = () => {\n    if (typeof window === \"undefined\") return;\n\n    const type = opts$.type.peek() ?? \"inner\";\n    const includeScrollbar = opts$.includeScrollbar.peek() !== false;\n\n    let width: number;\n    let height: number;\n\n    if (type === \"outer\") {\n      width = window.outerWidth;\n      height = window.outerHeight;\n    } else if (type === \"visual\") {\n      const vp = window.visualViewport;\n      if (vp) {\n        width = vp.width * vp.scale;\n        height = vp.height * vp.scale;\n      } else {\n        width = window.innerWidth;\n        height = window.innerHeight;\n      }\n    } else {\n      if (includeScrollbar) {\n        width = window.innerWidth;\n        height = window.innerHeight;\n      } else {\n        width = document.documentElement.clientWidth;\n        height = document.documentElement.clientHeight;\n      }\n    }\n\n    size$.assign({ width, height });\n  };\n\n  useMount(update);\n\n  useEventListener(\"resize\", update, { passive: true });\n\n  const vp$ = useWhenMounted(() =>\n    opts$.type.peek() === \"visual\" ? window.visualViewport : null,\n  );\n\n  useEventListener(vp$, \"resize\", update);\n\n  // type 또는 includeScrollbar가 변경되면 즉시 재측정\n  // 단일 함수 형태: opts$.type.get()/opts$.includeScrollbar.get()으로 dep 등록,\n  // update()는 .peek()만 사용하므로 추가 dep을 등록하지 않음.\n  useObserveEffect((e) => {\n    opts$.type.get();\n    opts$.includeScrollbar.get();\n    if (e.num > 0) update();\n  });\n\n  const matches$ = useMediaQuery(\"(orientation: portrait)\");\n  useObserveEffect(\n    matches$,\n    () => {\n      if (opts$.listenOrientation.get() !== false) {\n        update();\n      }\n    },\n    { immediate: false },\n  );\n\n  return size$;\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAAA;AAiBxB,SAAS,cACd,SACqB;AAErB,QAAM,QAAQ,wBAA8C,SAAS;AAAA,IACnE,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AAED,QAAM,QAAQ,cAAc;AAAA,IAC1B,OAAO,MAAM,aAAa,KAAK,KAAK;AAAA,IACpC,QAAQ,MAAM,cAAc,KAAK,KAAK;AAAA,EACxC,CAAC;AAED,QAAM,SAAS,MAAM;AACnB,QAAI,OAAO,WAAW,YAAa;AAEnC,UAAM,OAAO,MAAM,KAAK,KAAK,KAAK;AAClC,UAAM,mBAAmB,MAAM,iBAAiB,KAAK,MAAM;AAE3D,QAAI;AACJ,QAAI;AAEJ,QAAI,SAAS,SAAS;AACpB,cAAQ,OAAO;AACf,eAAS,OAAO;AAAA,IAClB,WAAW,SAAS,UAAU;AAC5B,YAAM,KAAK,OAAO;AAClB,UAAI,IAAI;AACN,gBAAQ,GAAG,QAAQ,GAAG;AACtB,iBAAS,GAAG,SAAS,GAAG;AAAA,MAC1B,OAAO;AACL,gBAAQ,OAAO;AACf,iBAAS,OAAO;AAAA,MAClB;AAAA,IACF,OAAO;AACL,UAAI,kBAAkB;AACpB,gBAAQ,OAAO;AACf,iBAAS,OAAO;AAAA,MAClB,OAAO;AACL,gBAAQ,SAAS,gBAAgB;AACjC,iBAAS,SAAS,gBAAgB;AAAA,MACpC;AAAA,IACF;AAEA,UAAM,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EAChC;AAEA,WAAS,MAAM;AAEf,mBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;AAEpD,QAAM,MAAM;AAAA,IAAe,MACzB,MAAM,KAAK,KAAK,MAAM,WAAW,OAAO,iBAAiB;AAAA,EAC3D;AAEA,mBAAiB,KAAK,UAAU,MAAM;AAKtC,mBAAiB,CAAC,MAAM;AACtB,UAAM,KAAK,IAAI;AACf,UAAM,iBAAiB,IAAI;AAC3B,QAAI,EAAE,MAAM,EAAG,QAAO;AAAA,EACxB,CAAC;AAED,QAAM,WAAW,cAAc,yBAAyB;AACxD;AAAA,IACE;AAAA,IACA,MAAM;AACJ,UAAI,MAAM,kBAAkB,IAAI,MAAM,OAAO;AAC3C,eAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,EAAE,WAAW,MAAM;AAAA,EACrB;AAEA,SAAO;AACT;","names":[]}

package/dist/function/get/index.d.mts

@@ -0,0 +1,45 @@
+import { MaybeObservable } from '../../types.mjs';
+import '@legendapp/state';
+
+/**
+ * Extracts the value from a MaybeObservable
+ * If the value is an Observable, calls .get() to extract it
+ * Otherwise returns the value as-is
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @returns The extracted value
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { get } from '@usels/core'
+ *
+ * const value = get('hello')           // 'hello'
+ * const obsValue = get(observable(42)) // 42
+ * ```
+ */
+declare function get<T>(maybeObservable: MaybeObservable<T>): T;
+declare function get<T>(maybeObservable: MaybeObservable<T> | undefined): T | undefined;
+/**
+ * Extracts a property value from a MaybeObservable object
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @param key - The property key to extract
+ * @returns The property value, or undefined if not found
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { get } from '@usels/core'
+ *
+ * const obj = { name: 'John' }
+ * const obs$ = observable({ name: 'Jane' })
+ *
+ * get(obj, 'name')    // 'John'
+ * get(obs$, 'name')   // 'Jane'
+ * get(obs$, 'age')    // undefined
+ * ```
+ */
+declare function get<T, K extends keyof T>(maybeObservable: MaybeObservable<T>, key: K): T[K] | undefined;
+
+export { get };

package/dist/function/get/index.d.ts

@@ -0,0 +1,45 @@
+import { MaybeObservable } from '../../types.js';
+import '@legendapp/state';
+
+/**
+ * Extracts the value from a MaybeObservable
+ * If the value is an Observable, calls .get() to extract it
+ * Otherwise returns the value as-is
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @returns The extracted value
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { get } from '@usels/core'
+ *
+ * const value = get('hello')           // 'hello'
+ * const obsValue = get(observable(42)) // 42
+ * ```
+ */
+declare function get<T>(maybeObservable: MaybeObservable<T>): T;
+declare function get<T>(maybeObservable: MaybeObservable<T> | undefined): T | undefined;
+/**
+ * Extracts a property value from a MaybeObservable object
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @param key - The property key to extract
+ * @returns The property value, or undefined if not found
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { get } from '@usels/core'
+ *
+ * const obj = { name: 'John' }
+ * const obs$ = observable({ name: 'Jane' })
+ *
+ * get(obj, 'name')    // 'John'
+ * get(obs$, 'name')   // 'Jane'
+ * get(obs$, 'age')    // undefined
+ * ```
+ */
+declare function get<T, K extends keyof T>(maybeObservable: MaybeObservable<T>, key: K): T[K] | undefined;
+
+export { get };

package/dist/function/get/index.js

@@ -0,0 +1,39 @@
+"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 get_exports = {};
+__export(get_exports, {
+  get: () => get
+});
+module.exports = __toCommonJS(get_exports);
+var import_state = require("@legendapp/state");
+function get(maybeObservable, key) {
+  const value = (0, import_state.isObservable)(maybeObservable) ? maybeObservable.get() : maybeObservable;
+  if (key === void 0) {
+    return value;
+  }
+  if (value !== null && value !== void 0 && typeof value === "object") {
+    return value[key];
+  }
+  return void 0;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  get
+});
+//# sourceMappingURL=index.js.map

package/dist/function/get/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/function/get/index.ts"],"sourcesContent":["import { isObservable } from \"@legendapp/state\";\nimport { MaybeObservable } from \"../../types\";\n\n/**\n * Extracts the value from a MaybeObservable\n * If the value is an Observable, calls .get() to extract it\n * Otherwise returns the value as-is\n *\n * @param maybeObservable - A value that might be an Observable\n * @returns The extracted value\n *\n * @example\n * ```ts\n * import { observable } from '@legendapp/state'\n * import { get } from '@usels/core'\n *\n * const value = get('hello')           // 'hello'\n * const obsValue = get(observable(42)) // 42\n * ```\n */\nexport function get<T>(maybeObservable: MaybeObservable<T>): T;\nexport function get<T>(maybeObservable: MaybeObservable<T> | undefined): T | undefined;\n\n/**\n * Extracts a property value from a MaybeObservable object\n *\n * @param maybeObservable - A value that might be an Observable\n * @param key - The property key to extract\n * @returns The property value, or undefined if not found\n *\n * @example\n * ```ts\n * import { observable } from '@legendapp/state'\n * import { get } from '@usels/core'\n *\n * const obj = { name: 'John' }\n * const obs$ = observable({ name: 'Jane' })\n *\n * get(obj, 'name')    // 'John'\n * get(obs$, 'name')   // 'Jane'\n * get(obs$, 'age')    // undefined\n * ```\n */\nexport function get<T, K extends keyof T>(\n  maybeObservable: MaybeObservable<T>,\n  key: K,\n): T[K] | undefined;\n\n// Implementation\nexport function get<T>(\n  maybeObservable: MaybeObservable<T>,\n  key?: keyof T,\n): any {\n  // Extract the base value\n  const value = isObservable(maybeObservable)\n    ? maybeObservable.get()\n    : maybeObservable;\n\n  // If no key provided, return the value (single-arg overload)\n  if (key === undefined) {\n    return value;\n  }\n\n  // If key provided, extract property (two-arg overload)\n  if (value !== null && value !== undefined && typeof value === \"object\") {\n    return (value as any)[key];\n  }\n\n  return undefined;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6B;AAiDtB,SAAS,IACd,iBACA,KACK;AAEL,QAAM,YAAQ,2BAAa,eAAe,IACtC,gBAAgB,IAAI,IACpB;AAGJ,MAAI,QAAQ,QAAW;AACrB,WAAO;AAAA,EACT;AAGA,MAAI,UAAU,QAAQ,UAAU,UAAa,OAAO,UAAU,UAAU;AACtE,WAAQ,MAAc,GAAG;AAAA,EAC3B;AAEA,SAAO;AACT;","names":[]}

package/dist/function/get/index.mjs

@@ -0,0 +1,15 @@
+import { isObservable } from "@legendapp/state";
+function get(maybeObservable, key) {
+  const value = isObservable(maybeObservable) ? maybeObservable.get() : maybeObservable;
+  if (key === void 0) {
+    return value;
+  }
+  if (value !== null && value !== void 0 && typeof value === "object") {
+    return value[key];
+  }
+  return void 0;
+}
+export {
+  get
+};
+//# sourceMappingURL=index.mjs.map

package/dist/function/get/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/function/get/index.ts"],"sourcesContent":["import { isObservable } from \"@legendapp/state\";\nimport { MaybeObservable } from \"../../types\";\n\n/**\n * Extracts the value from a MaybeObservable\n * If the value is an Observable, calls .get() to extract it\n * Otherwise returns the value as-is\n *\n * @param maybeObservable - A value that might be an Observable\n * @returns The extracted value\n *\n * @example\n * ```ts\n * import { observable } from '@legendapp/state'\n * import { get } from '@usels/core'\n *\n * const value = get('hello')           // 'hello'\n * const obsValue = get(observable(42)) // 42\n * ```\n */\nexport function get<T>(maybeObservable: MaybeObservable<T>): T;\nexport function get<T>(maybeObservable: MaybeObservable<T> | undefined): T | undefined;\n\n/**\n * Extracts a property value from a MaybeObservable object\n *\n * @param maybeObservable - A value that might be an Observable\n * @param key - The property key to extract\n * @returns The property value, or undefined if not found\n *\n * @example\n * ```ts\n * import { observable } from '@legendapp/state'\n * import { get } from '@usels/core'\n *\n * const obj = { name: 'John' }\n * const obs$ = observable({ name: 'Jane' })\n *\n * get(obj, 'name')    // 'John'\n * get(obs$, 'name')   // 'Jane'\n * get(obs$, 'age')    // undefined\n * ```\n */\nexport function get<T, K extends keyof T>(\n  maybeObservable: MaybeObservable<T>,\n  key: K,\n): T[K] | undefined;\n\n// Implementation\nexport function get<T>(\n  maybeObservable: MaybeObservable<T>,\n  key?: keyof T,\n): any {\n  // Extract the base value\n  const value = isObservable(maybeObservable)\n    ? maybeObservable.get()\n    : maybeObservable;\n\n  // If no key provided, return the value (single-arg overload)\n  if (key === undefined) {\n    return value;\n  }\n\n  // If key provided, extract property (two-arg overload)\n  if (value !== null && value !== undefined && typeof value === \"object\") {\n    return (value as any)[key];\n  }\n\n  return undefined;\n}\n"],"mappings":"AAAA,SAAS,oBAAoB;AAiDtB,SAAS,IACd,iBACA,KACK;AAEL,QAAM,QAAQ,aAAa,eAAe,IACtC,gBAAgB,IAAI,IACpB;AAGJ,MAAI,QAAQ,QAAW;AACrB,WAAO;AAAA,EACT;AAGA,MAAI,UAAU,QAAQ,UAAU,UAAa,OAAO,UAAU,UAAU;AACtE,WAAQ,MAAc,GAAG;AAAA,EAC3B;AAEA,SAAO;AACT;","names":[]}

package/dist/function/peek/index.d.mts

@@ -0,0 +1,46 @@
+import { MaybeObservable } from '../../types.mjs';
+import '@legendapp/state';
+
+/**
+ * Extracts the value from a MaybeObservable **without** registering a tracking dependency.
+ * If the value is an Observable, calls `.peek()` to extract it non-reactively.
+ * Otherwise returns the value as-is.
+ *
+ * Use this for mount-time-only options that should not trigger re-runs when changed.
+ * Prefer `get()` inside reactive contexts (`useObserve`, `useObservable`) when reactivity is needed.
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @returns The extracted value (no tracking dependency registered)
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { peek } from '@usels/core'
+ *
+ * const value = peek('hello')           // 'hello'
+ * const obsValue = peek(observable(42)) // 42  — no dep registered
+ * ```
+ */
+declare function peek<T>(maybeObservable: MaybeObservable<T>): T;
+declare function peek<T>(maybeObservable: MaybeObservable<T> | undefined): T | undefined;
+/**
+ * Extracts a property value from a MaybeObservable object **without** registering a tracking dependency.
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @param key - The property key to extract
+ * @returns The property value, or undefined if not found
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { peek } from '@usels/core'
+ *
+ * const obs$ = observable({ initialValue: true, rootMargin: '0px' })
+ *
+ * peek(obs$, 'initialValue')  // true  — no dep registered (mount-time-only read)
+ * peek(obs$, 'rootMargin')    // '0px' — no dep registered
+ * ```
+ */
+declare function peek<T, K extends keyof T>(maybeObservable: MaybeObservable<T>, key: K): T[K] | undefined;
+
+export { peek };

package/dist/function/peek/index.d.ts

@@ -0,0 +1,46 @@
+import { MaybeObservable } from '../../types.js';
+import '@legendapp/state';
+
+/**
+ * Extracts the value from a MaybeObservable **without** registering a tracking dependency.
+ * If the value is an Observable, calls `.peek()` to extract it non-reactively.
+ * Otherwise returns the value as-is.
+ *
+ * Use this for mount-time-only options that should not trigger re-runs when changed.
+ * Prefer `get()` inside reactive contexts (`useObserve`, `useObservable`) when reactivity is needed.
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @returns The extracted value (no tracking dependency registered)
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { peek } from '@usels/core'
+ *
+ * const value = peek('hello')           // 'hello'
+ * const obsValue = peek(observable(42)) // 42  — no dep registered
+ * ```
+ */
+declare function peek<T>(maybeObservable: MaybeObservable<T>): T;
+declare function peek<T>(maybeObservable: MaybeObservable<T> | undefined): T | undefined;
+/**
+ * Extracts a property value from a MaybeObservable object **without** registering a tracking dependency.
+ *
+ * @param maybeObservable - A value that might be an Observable
+ * @param key - The property key to extract
+ * @returns The property value, or undefined if not found
+ *
+ * @example
+ * ```ts
+ * import { observable } from '@legendapp/state'
+ * import { peek } from '@usels/core'
+ *
+ * const obs$ = observable({ initialValue: true, rootMargin: '0px' })
+ *
+ * peek(obs$, 'initialValue')  // true  — no dep registered (mount-time-only read)
+ * peek(obs$, 'rootMargin')    // '0px' — no dep registered
+ * ```
+ */
+declare function peek<T, K extends keyof T>(maybeObservable: MaybeObservable<T>, key: K): T[K] | undefined;
+
+export { peek };