@usels/core 0.0.1

package/dist/browser/useMediaQuery/index.js

@@ -0,0 +1,89 @@
+"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 useMediaQuery_exports = {};
+__export(useMediaQuery_exports, {
+  evaluateSSRQuery: () => evaluateSSRQuery,
+  useMediaQuery: () => useMediaQuery
+});
+module.exports = __toCommonJS(useMediaQuery_exports);
+var import_state = require("@legendapp/state");
+var import_react = require("@legendapp/state/react");
+var import_get = require("../../function/get");
+var import_useSupported = require("../../function/useSupported");
+var import_useWhenMounted = require("../../function/useWhenMounted");
+var import_useEventListener = require("../useEventListener");
+function pxValue(value) {
+  const num = parseFloat(value);
+  const unit = value.trim().replace(/^-?\d+(?:\.\d+)?/, "").trim();
+  if (unit === "px" || unit === "") return num;
+  if (unit === "em" || unit === "rem") return num * 16;
+  return num;
+}
+function evaluateSSRQuery(query, ssrWidth) {
+  const queryStrings = query.split(",");
+  return queryStrings.some((queryString) => {
+    const not = queryString.includes("not all");
+    const minWidth = queryString.match(
+      /\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/
+    );
+    const maxWidth = queryString.match(
+      /\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/
+    );
+    let res = Boolean(minWidth || maxWidth);
+    if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);
+    if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);
+    return not ? !res : res;
+  });
+}
+// @__NO_SIDE_EFFECTS__
+function useMediaQuery(query, options = {}) {
+  const { ssrWidth } = options;
+  const isSupported = (0, import_useSupported.useSupported)(
+    () => "matchMedia" in window && typeof window.matchMedia === "function"
+  );
+  const matches$ = (0, import_react.useObservable)(
+    () => typeof ssrWidth === "number" ? evaluateSSRQuery((0, import_get.get)(query), ssrWidth) : false
+  );
+  const mql$ = (0, import_useWhenMounted.useWhenMounted)(
+    () => isSupported.get() ? import_state.ObservableHint.opaque(window.matchMedia((0, import_get.get)(query))) : null
+  );
+  (0, import_react.useObserve)(() => {
+    const mql = mql$.get();
+    if (!mql) {
+      return;
+    }
+    matches$.set(mql.matches.valueOf());
+  });
+  (0, import_useEventListener.useEventListener)(
+    mql$,
+    "change",
+    (e) => {
+      matches$.set(e.matches);
+    },
+    { passive: true }
+  );
+  return matches$;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  evaluateSSRQuery,
+  useMediaQuery
+});
+//# sourceMappingURL=index.js.map

package/dist/browser/useMediaQuery/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/browser/useMediaQuery/index.ts"],"sourcesContent":["\"use client\";\nimport { ObservableHint, type Observable } from \"@legendapp/state\";\nimport { useObservable, useObserve } from \"@legendapp/state/react\";\nimport { get } from \"../../function/get\";\nimport { useSupported } from \"../../function/useSupported\";\nimport type { MaybeObservable } from \"../../types\";\nimport { useWhenMounted } from \"../../function/useWhenMounted\";\nimport { useEventListener } from \"../useEventListener\";\n\n// ---------------------------------------------------------------------------\n// Local helpers\n// ---------------------------------------------------------------------------\n\nfunction pxValue(value: string): number {\n  const num = parseFloat(value);\n  const unit = value\n    .trim()\n    .replace(/^-?\\d+(?:\\.\\d+)?/, \"\")\n    .trim();\n  if (unit === \"px\" || unit === \"\") return num;\n  if (unit === \"em\" || unit === \"rem\") return num * 16;\n  return num;\n}\n\nexport function evaluateSSRQuery(query: string, ssrWidth: number): boolean {\n  const queryStrings = query.split(\",\");\n  return queryStrings.some((queryString) => {\n    const not = queryString.includes(\"not all\");\n    const minWidth = queryString.match(\n      /\\(\\s*min-width:\\s*(-?\\d+(?:\\.\\d*)?[a-z]+\\s*)\\)/,\n    );\n    const maxWidth = queryString.match(\n      /\\(\\s*max-width:\\s*(-?\\d+(?:\\.\\d*)?[a-z]+\\s*)\\)/,\n    );\n    let res = Boolean(minWidth || maxWidth);\n    if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);\n    if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);\n    return not ? !res : res;\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface UseMediaQueryOptions {\n  ssrWidth?: number;\n}\n\nexport type UseMediaQueryReturn = Observable<boolean>;\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useMediaQuery(\n  query: MaybeObservable<string>,\n  options: UseMediaQueryOptions = {},\n): UseMediaQueryReturn {\n  const { ssrWidth } = options;\n\n  const isSupported = useSupported(\n    () => \"matchMedia\" in window && typeof window.matchMedia === \"function\",\n  );\n\n  const matches$ = useObservable(() =>\n    typeof ssrWidth === \"number\"\n      ? evaluateSSRQuery(get(query), ssrWidth)\n      : false,\n  );\n\n  const mql$ = useWhenMounted(() =>\n    isSupported.get()\n      ? ObservableHint.opaque(window.matchMedia(get(query)))\n      : null,\n  );\n  useObserve(() => {\n    const mql = mql$.get();\n    if (!mql) {\n      return;\n    }\n    matches$.set(mql.matches.valueOf());\n  });\n\n  useEventListener(\n    mql$,\n    \"change\",\n    (e: Event) => {\n      matches$.set((e as MediaQueryListEvent).matches);\n    },\n    { passive: true },\n  );\n\n  return matches$;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAgD;AAChD,mBAA0C;AAC1C,iBAAoB;AACpB,0BAA6B;AAE7B,4BAA+B;AAC/B,8BAAiC;AAMjC,SAAS,QAAQ,OAAuB;AACtC,QAAM,MAAM,WAAW,KAAK;AAC5B,QAAM,OAAO,MACV,KAAK,EACL,QAAQ,oBAAoB,EAAE,EAC9B,KAAK;AACR,MAAI,SAAS,QAAQ,SAAS,GAAI,QAAO;AACzC,MAAI,SAAS,QAAQ,SAAS,MAAO,QAAO,MAAM;AAClD,SAAO;AACT;AAEO,SAAS,iBAAiB,OAAe,UAA2B;AACzE,QAAM,eAAe,MAAM,MAAM,GAAG;AACpC,SAAO,aAAa,KAAK,CAAC,gBAAgB;AACxC,UAAM,MAAM,YAAY,SAAS,SAAS;AAC1C,UAAM,WAAW,YAAY;AAAA,MAC3B;AAAA,IACF;AACA,UAAM,WAAW,YAAY;AAAA,MAC3B;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,YAAY,QAAQ;AACtC,QAAI,YAAY,IAAK,OAAM,YAAY,QAAQ,SAAS,CAAC,CAAC;AAC1D,QAAI,YAAY,IAAK,OAAM,YAAY,QAAQ,SAAS,CAAC,CAAC;AAC1D,WAAO,MAAM,CAAC,MAAM;AAAA,EACtB,CAAC;AACH;AAAA;AAiBO,SAAS,cACd,OACA,UAAgC,CAAC,GACZ;AACrB,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,kBAAc;AAAA,IAClB,MAAM,gBAAgB,UAAU,OAAO,OAAO,eAAe;AAAA,EAC/D;AAEA,QAAM,eAAW;AAAA,IAAc,MAC7B,OAAO,aAAa,WAChB,qBAAiB,gBAAI,KAAK,GAAG,QAAQ,IACrC;AAAA,EACN;AAEA,QAAM,WAAO;AAAA,IAAe,MAC1B,YAAY,IAAI,IACZ,4BAAe,OAAO,OAAO,eAAW,gBAAI,KAAK,CAAC,CAAC,IACnD;AAAA,EACN;AACA,+BAAW,MAAM;AACf,UAAM,MAAM,KAAK,IAAI;AACrB,QAAI,CAAC,KAAK;AACR;AAAA,IACF;AACA,aAAS,IAAI,IAAI,QAAQ,QAAQ,CAAC;AAAA,EACpC,CAAC;AAED;AAAA,IACE;AAAA,IACA;AAAA,IACA,CAAC,MAAa;AACZ,eAAS,IAAK,EAA0B,OAAO;AAAA,IACjD;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AAEA,SAAO;AACT;","names":[]}

package/dist/browser/useMediaQuery/index.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { ObservableHint } from "@legendapp/state";
+import { useObservable, useObserve } from "@legendapp/state/react";
+import { get } from "../../function/get";
+import { useSupported } from "../../function/useSupported";
+import { useWhenMounted } from "../../function/useWhenMounted";
+import { useEventListener } from "../useEventListener";
+function pxValue(value) {
+  const num = parseFloat(value);
+  const unit = value.trim().replace(/^-?\d+(?:\.\d+)?/, "").trim();
+  if (unit === "px" || unit === "") return num;
+  if (unit === "em" || unit === "rem") return num * 16;
+  return num;
+}
+function evaluateSSRQuery(query, ssrWidth) {
+  const queryStrings = query.split(",");
+  return queryStrings.some((queryString) => {
+    const not = queryString.includes("not all");
+    const minWidth = queryString.match(
+      /\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/
+    );
+    const maxWidth = queryString.match(
+      /\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/
+    );
+    let res = Boolean(minWidth || maxWidth);
+    if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);
+    if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);
+    return not ? !res : res;
+  });
+}
+// @__NO_SIDE_EFFECTS__
+function useMediaQuery(query, options = {}) {
+  const { ssrWidth } = options;
+  const isSupported = useSupported(
+    () => "matchMedia" in window && typeof window.matchMedia === "function"
+  );
+  const matches$ = useObservable(
+    () => typeof ssrWidth === "number" ? evaluateSSRQuery(get(query), ssrWidth) : false
+  );
+  const mql$ = useWhenMounted(
+    () => isSupported.get() ? ObservableHint.opaque(window.matchMedia(get(query))) : null
+  );
+  useObserve(() => {
+    const mql = mql$.get();
+    if (!mql) {
+      return;
+    }
+    matches$.set(mql.matches.valueOf());
+  });
+  useEventListener(
+    mql$,
+    "change",
+    (e) => {
+      matches$.set(e.matches);
+    },
+    { passive: true }
+  );
+  return matches$;
+}
+export {
+  evaluateSSRQuery,
+  useMediaQuery
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser/useMediaQuery/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/browser/useMediaQuery/index.ts"],"sourcesContent":["\"use client\";\nimport { ObservableHint, type Observable } from \"@legendapp/state\";\nimport { useObservable, useObserve } from \"@legendapp/state/react\";\nimport { get } from \"../../function/get\";\nimport { useSupported } from \"../../function/useSupported\";\nimport type { MaybeObservable } from \"../../types\";\nimport { useWhenMounted } from \"../../function/useWhenMounted\";\nimport { useEventListener } from \"../useEventListener\";\n\n// ---------------------------------------------------------------------------\n// Local helpers\n// ---------------------------------------------------------------------------\n\nfunction pxValue(value: string): number {\n  const num = parseFloat(value);\n  const unit = value\n    .trim()\n    .replace(/^-?\\d+(?:\\.\\d+)?/, \"\")\n    .trim();\n  if (unit === \"px\" || unit === \"\") return num;\n  if (unit === \"em\" || unit === \"rem\") return num * 16;\n  return num;\n}\n\nexport function evaluateSSRQuery(query: string, ssrWidth: number): boolean {\n  const queryStrings = query.split(\",\");\n  return queryStrings.some((queryString) => {\n    const not = queryString.includes(\"not all\");\n    const minWidth = queryString.match(\n      /\\(\\s*min-width:\\s*(-?\\d+(?:\\.\\d*)?[a-z]+\\s*)\\)/,\n    );\n    const maxWidth = queryString.match(\n      /\\(\\s*max-width:\\s*(-?\\d+(?:\\.\\d*)?[a-z]+\\s*)\\)/,\n    );\n    let res = Boolean(minWidth || maxWidth);\n    if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);\n    if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);\n    return not ? !res : res;\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface UseMediaQueryOptions {\n  ssrWidth?: number;\n}\n\nexport type UseMediaQueryReturn = Observable<boolean>;\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\n/*@__NO_SIDE_EFFECTS__*/\nexport function useMediaQuery(\n  query: MaybeObservable<string>,\n  options: UseMediaQueryOptions = {},\n): UseMediaQueryReturn {\n  const { ssrWidth } = options;\n\n  const isSupported = useSupported(\n    () => \"matchMedia\" in window && typeof window.matchMedia === \"function\",\n  );\n\n  const matches$ = useObservable(() =>\n    typeof ssrWidth === \"number\"\n      ? evaluateSSRQuery(get(query), ssrWidth)\n      : false,\n  );\n\n  const mql$ = useWhenMounted(() =>\n    isSupported.get()\n      ? ObservableHint.opaque(window.matchMedia(get(query)))\n      : null,\n  );\n  useObserve(() => {\n    const mql = mql$.get();\n    if (!mql) {\n      return;\n    }\n    matches$.set(mql.matches.valueOf());\n  });\n\n  useEventListener(\n    mql$,\n    \"change\",\n    (e: Event) => {\n      matches$.set((e as MediaQueryListEvent).matches);\n    },\n    { passive: true },\n  );\n\n  return matches$;\n}\n"],"mappings":";AACA,SAAS,sBAAuC;AAChD,SAAS,eAAe,kBAAkB;AAC1C,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAMjC,SAAS,QAAQ,OAAuB;AACtC,QAAM,MAAM,WAAW,KAAK;AAC5B,QAAM,OAAO,MACV,KAAK,EACL,QAAQ,oBAAoB,EAAE,EAC9B,KAAK;AACR,MAAI,SAAS,QAAQ,SAAS,GAAI,QAAO;AACzC,MAAI,SAAS,QAAQ,SAAS,MAAO,QAAO,MAAM;AAClD,SAAO;AACT;AAEO,SAAS,iBAAiB,OAAe,UAA2B;AACzE,QAAM,eAAe,MAAM,MAAM,GAAG;AACpC,SAAO,aAAa,KAAK,CAAC,gBAAgB;AACxC,UAAM,MAAM,YAAY,SAAS,SAAS;AAC1C,UAAM,WAAW,YAAY;AAAA,MAC3B;AAAA,IACF;AACA,UAAM,WAAW,YAAY;AAAA,MAC3B;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,YAAY,QAAQ;AACtC,QAAI,YAAY,IAAK,OAAM,YAAY,QAAQ,SAAS,CAAC,CAAC;AAC1D,QAAI,YAAY,IAAK,OAAM,YAAY,QAAQ,SAAS,CAAC,CAAC;AAC1D,WAAO,MAAM,CAAC,MAAM;AAAA,EACtB,CAAC;AACH;AAAA;AAiBO,SAAS,cACd,OACA,UAAgC,CAAC,GACZ;AACrB,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,cAAc;AAAA,IAClB,MAAM,gBAAgB,UAAU,OAAO,OAAO,eAAe;AAAA,EAC/D;AAEA,QAAM,WAAW;AAAA,IAAc,MAC7B,OAAO,aAAa,WAChB,iBAAiB,IAAI,KAAK,GAAG,QAAQ,IACrC;AAAA,EACN;AAEA,QAAM,OAAO;AAAA,IAAe,MAC1B,YAAY,IAAI,IACZ,eAAe,OAAO,OAAO,WAAW,IAAI,KAAK,CAAC,CAAC,IACnD;AAAA,EACN;AACA,aAAW,MAAM;AACf,UAAM,MAAM,KAAK,IAAI;AACrB,QAAI,CAAC,KAAK;AACR;AAAA,IACF;AACA,aAAS,IAAI,IAAI,QAAQ,QAAQ,CAAC;AAAA,EACpC,CAAC;AAED;AAAA,IACE;AAAA,IACA;AAAA,IACA,CAAC,MAAa;AACZ,eAAS,IAAK,EAA0B,OAAO;AAAA,IACjD;AAAA,IACA,EAAE,SAAS,KAAK;AAAA,EAClB;AAEA,SAAO;AACT;","names":[]}

package/dist/components/Auto/index.d.mts

@@ -0,0 +1,33 @@
+import { ReactNode, FC, ReactElement } from 'react';
+import { Selector } from '@legendapp/state';
+
+type AutoPropsIf<T> = {
+    if: Selector<T>;
+    ifReady?: never;
+    withState?: boolean;
+    children: () => ReactNode;
+    else?: ReactNode | (() => ReactNode);
+    wrap?: FC<{
+        children: ReactNode;
+    }>;
+};
+type AutoPropsIfReady<T> = {
+    if?: never;
+    ifReady: Selector<T>;
+    withState?: boolean;
+    children: () => ReactNode;
+    else?: ReactNode | (() => ReactNode);
+    wrap?: FC<{
+        children: ReactNode;
+    }>;
+};
+type AutoPropsReactive = {
+    if?: never;
+    ifReady?: never;
+    withState?: boolean;
+    children: () => ReactNode;
+};
+type AutoProps<T = unknown> = AutoPropsIf<T> | AutoPropsIfReady<T> | AutoPropsReactive;
+declare function Auto<T>({ if: ifProp, ifReady, withState, children, ...rest }: AutoProps<T>): ReactElement | null;
+
+export { Auto, type AutoProps };

package/dist/components/Auto/index.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode, FC, ReactElement } from 'react';
+import { Selector } from '@legendapp/state';
+
+type AutoPropsIf<T> = {
+    if: Selector<T>;
+    ifReady?: never;
+    withState?: boolean;
+    children: () => ReactNode;
+    else?: ReactNode | (() => ReactNode);
+    wrap?: FC<{
+        children: ReactNode;
+    }>;
+};
+type AutoPropsIfReady<T> = {
+    if?: never;
+    ifReady: Selector<T>;
+    withState?: boolean;
+    children: () => ReactNode;
+    else?: ReactNode | (() => ReactNode);
+    wrap?: FC<{
+        children: ReactNode;
+    }>;
+};
+type AutoPropsReactive = {
+    if?: never;
+    ifReady?: never;
+    withState?: boolean;
+    children: () => ReactNode;
+};
+type AutoProps<T = unknown> = AutoPropsIf<T> | AutoPropsIfReady<T> | AutoPropsReactive;
+declare function Auto<T>({ if: ifProp, ifReady, withState, children, ...rest }: AutoProps<T>): ReactElement | null;
+
+export { Auto, type AutoProps };

package/dist/components/Auto/index.js

@@ -0,0 +1,66 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Auto_exports = {};
+__export(Auto_exports, {
+  Auto: () => Auto
+});
+module.exports = __toCommonJS(Auto_exports);
+var import_react = __toESM(require("react"));
+var import_react2 = require("@legendapp/state/react");
+function Auto({
+  if: ifProp,
+  ifReady,
+  withState,
+  children,
+  ...rest
+}) {
+  if (ifProp !== void 0) {
+    const { else: elseProp, wrap } = rest;
+    return (0, import_react.createElement)(import_react2.Show, {
+      if: ifProp,
+      else: elseProp,
+      wrap,
+      children
+    });
+  }
+  if (ifReady !== void 0) {
+    const { else: elseProp, wrap } = rest;
+    return (0, import_react.createElement)(import_react2.Show, { ifReady, else: elseProp, wrap, children });
+  }
+  return (0, import_react.createElement)(
+    withState ? import_react2.Computed : import_react.default.memo(import_react2.Computed, () => true),
+    { children }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Auto
+});
+//# sourceMappingURL=index.js.map

package/dist/components/Auto/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Auto/index.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  createElement,\n  type FC,\n  type ReactNode,\n  type ReactElement,\n} from \"react\";\nimport { Computed, Show } from \"@legendapp/state/react\";\nimport type { Selector } from \"@legendapp/state\";\n\ntype AutoPropsIf<T> = {\n  if: Selector<T>;\n  ifReady?: never;\n  withState?: boolean; // Show is already reactive to parent state; withState is accepted but has no effect\n  children: () => ReactNode;\n  else?: ReactNode | (() => ReactNode);\n  wrap?: FC<{ children: ReactNode }>;\n};\n\ntype AutoPropsIfReady<T> = {\n  if?: never;\n  ifReady: Selector<T>;\n  withState?: boolean; // Same as above\n  children: () => ReactNode;\n  else?: ReactNode | (() => ReactNode);\n  wrap?: FC<{ children: ReactNode }>;\n};\n\ntype AutoPropsReactive = {\n  if?: never;\n  ifReady?: never;\n  withState?: boolean;\n  children: () => ReactNode;\n};\n\nexport type AutoProps<T = unknown> =\n  | AutoPropsIf<T>\n  | AutoPropsIfReady<T>\n  | AutoPropsReactive;\n\nexport function Auto<T>({\n  if: ifProp,\n  ifReady,\n  withState,\n  children,\n  ...rest\n}: AutoProps<T>): ReactElement | null {\n  if (ifProp !== undefined) {\n    const { else: elseProp, wrap } = rest as AutoPropsIf<T>;\n    return createElement(Show<T>, {\n      if: ifProp,\n      else: elseProp,\n      wrap,\n      children,\n    });\n  }\n  if (ifReady !== undefined) {\n    const { else: elseProp, wrap } = rest as AutoPropsIfReady<T>;\n    return createElement(Show<T>, { ifReady, else: elseProp, wrap, children });\n  }\n  return createElement(\n    withState ? Computed : React.memo(Computed, () => true),\n    { children },\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAKO;AACP,IAAAA,gBAA+B;AAiCxB,SAAS,KAAQ;AAAA,EACtB,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,MAAI,WAAW,QAAW;AACxB,UAAM,EAAE,MAAM,UAAU,KAAK,IAAI;AACjC,eAAO,4BAAc,oBAAS;AAAA,MAC5B,IAAI;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACA,MAAI,YAAY,QAAW;AACzB,UAAM,EAAE,MAAM,UAAU,KAAK,IAAI;AACjC,eAAO,4BAAc,oBAAS,EAAE,SAAS,MAAM,UAAU,MAAM,SAAS,CAAC;AAAA,EAC3E;AACA,aAAO;AAAA,IACL,YAAY,yBAAW,aAAAC,QAAM,KAAK,wBAAU,MAAM,IAAI;AAAA,IACtD,EAAE,SAAS;AAAA,EACb;AACF;","names":["import_react","React"]}

package/dist/components/Auto/index.mjs

@@ -0,0 +1,34 @@
+"use client";
+import React, {
+  createElement
+} from "react";
+import { Computed, Show } from "@legendapp/state/react";
+function Auto({
+  if: ifProp,
+  ifReady,
+  withState,
+  children,
+  ...rest
+}) {
+  if (ifProp !== void 0) {
+    const { else: elseProp, wrap } = rest;
+    return createElement(Show, {
+      if: ifProp,
+      else: elseProp,
+      wrap,
+      children
+    });
+  }
+  if (ifReady !== void 0) {
+    const { else: elseProp, wrap } = rest;
+    return createElement(Show, { ifReady, else: elseProp, wrap, children });
+  }
+  return createElement(
+    withState ? Computed : React.memo(Computed, () => true),
+    { children }
+  );
+}
+export {
+  Auto
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/Auto/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Auto/index.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  createElement,\n  type FC,\n  type ReactNode,\n  type ReactElement,\n} from \"react\";\nimport { Computed, Show } from \"@legendapp/state/react\";\nimport type { Selector } from \"@legendapp/state\";\n\ntype AutoPropsIf<T> = {\n  if: Selector<T>;\n  ifReady?: never;\n  withState?: boolean; // Show is already reactive to parent state; withState is accepted but has no effect\n  children: () => ReactNode;\n  else?: ReactNode | (() => ReactNode);\n  wrap?: FC<{ children: ReactNode }>;\n};\n\ntype AutoPropsIfReady<T> = {\n  if?: never;\n  ifReady: Selector<T>;\n  withState?: boolean; // Same as above\n  children: () => ReactNode;\n  else?: ReactNode | (() => ReactNode);\n  wrap?: FC<{ children: ReactNode }>;\n};\n\ntype AutoPropsReactive = {\n  if?: never;\n  ifReady?: never;\n  withState?: boolean;\n  children: () => ReactNode;\n};\n\nexport type AutoProps<T = unknown> =\n  | AutoPropsIf<T>\n  | AutoPropsIfReady<T>\n  | AutoPropsReactive;\n\nexport function Auto<T>({\n  if: ifProp,\n  ifReady,\n  withState,\n  children,\n  ...rest\n}: AutoProps<T>): ReactElement | null {\n  if (ifProp !== undefined) {\n    const { else: elseProp, wrap } = rest as AutoPropsIf<T>;\n    return createElement(Show<T>, {\n      if: ifProp,\n      else: elseProp,\n      wrap,\n      children,\n    });\n  }\n  if (ifReady !== undefined) {\n    const { else: elseProp, wrap } = rest as AutoPropsIfReady<T>;\n    return createElement(Show<T>, { ifReady, else: elseProp, wrap, children });\n  }\n  return createElement(\n    withState ? Computed : React.memo(Computed, () => true),\n    { children },\n  );\n}\n"],"mappings":";AACA,OAAO;AAAA,EACL;AAAA,OAIK;AACP,SAAS,UAAU,YAAY;AAiCxB,SAAS,KAAQ;AAAA,EACtB,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,MAAI,WAAW,QAAW;AACxB,UAAM,EAAE,MAAM,UAAU,KAAK,IAAI;AACjC,WAAO,cAAc,MAAS;AAAA,MAC5B,IAAI;AAAA,MACJ,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACA,MAAI,YAAY,QAAW;AACzB,UAAM,EAAE,MAAM,UAAU,KAAK,IAAI;AACjC,WAAO,cAAc,MAAS,EAAE,SAAS,MAAM,UAAU,MAAM,SAAS,CAAC;AAAA,EAC3E;AACA,SAAO;AAAA,IACL,YAAY,WAAW,MAAM,KAAK,UAAU,MAAM,IAAI;AAAA,IACtD,EAAE,SAAS;AAAA,EACb;AACF;","names":[]}

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

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

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

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

package/dist/elements/useDocumentVisibility/demo.js

@@ -0,0 +1,130 @@
+"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: () => UseDocumentVisibilityDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import__ = require(".");
+var import_react2 = require("@legendapp/state/react");
+const dot = {
+  display: "inline-block",
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  marginRight: "6px",
+  verticalAlign: "middle"
+};
+function StateRow({
+  label,
+  value
+}) {
+  const visible = value === "visible";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "10px 14px",
+        borderRadius: "6px",
+        border: `1px solid ${visible ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-orange, #f97316)"}`,
+        background: visible ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-orange-low, #fff7ed)",
+        transition: "border-color 0.3s, background 0.3s",
+        gap: "10px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              ...dot,
+              background: visible ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-orange, #f97316)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--sl-color-gray-2, #64748b)", minWidth: "80px" }, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "strong",
+          {
+            style: {
+              color: visible ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-orange, #f97316)"
+            },
+            children: [
+              '"',
+              value,
+              '"'
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function UseDocumentVisibilityDemo() {
+  const visibility$ = (0, import__.useDocumentVisibility)();
+  const delayed$ = (0, import_react2.useObservable)("visible");
+  const timerRef = (0, import_react.useRef)(null);
+  (0, import_react2.useObserveEffect)(() => {
+    const state = visibility$.get();
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    if (state === "hidden") {
+      delayed$.set("hidden");
+    } else {
+      timerRef.current = setTimeout(() => {
+        delayed$.set("visible");
+      }, 2e3);
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateRow, { label: "Instant", value: visibility$.get() }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateRow, { label: "2s delay", value: delayed$.get() }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: "11px",
+              color: "var(--sl-color-gray-3, #94a3b8)"
+            },
+            children: [
+              "Switch to another tab and come back \u2014 the 2s delay row stays",
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: '"hidden"' }),
+              " long enough to confirm the transition."
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=demo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useDocumentVisibility/demo.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useDocumentVisibility } from \".\";\nimport {\n  Computed,\n  useObservable,\n  useObserveEffect,\n} 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\nfunction StateRow({\n  label,\n  value,\n}: {\n  label: string;\n  value: DocumentVisibilityState;\n}) {\n  const visible = value === \"visible\";\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        padding: \"10px 14px\",\n        borderRadius: \"6px\",\n        border: `1px solid ${visible ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-orange, #f97316)\"}`,\n        background: visible\n          ? \"var(--sl-color-green-low, #f0fdf4)\"\n          : \"var(--sl-color-orange-low, #fff7ed)\",\n        transition: \"border-color 0.3s, background 0.3s\",\n        gap: \"10px\",\n      }}\n    >\n      <span\n        style={{\n          ...dot,\n          background: visible\n            ? \"var(--sl-color-green, #22c55e)\"\n            : \"var(--sl-color-orange, #f97316)\",\n        }}\n      />\n      <span style={{ color: \"var(--sl-color-gray-2, #64748b)\", minWidth: \"80px\" }}>\n        {label}\n      </span>\n      <strong\n        style={{\n          color: visible\n            ? \"var(--sl-color-green, #22c55e)\"\n            : \"var(--sl-color-orange, #f97316)\",\n        }}\n      >\n        &quot;{value}&quot;\n      </strong>\n    </div>\n  );\n}\n\nexport default function UseDocumentVisibilityDemo() {\n  const visibility$ = useDocumentVisibility();\n  // Delayed display: stays on 'hidden' for 2s after returning to visible\n  const delayed$ = useObservable<DocumentVisibilityState>(\"visible\");\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useObserveEffect(() => {\n    const state = visibility$.get();\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    if (state === \"hidden\") {\n      delayed$.set(\"hidden\");\n    } else {\n      timerRef.current = setTimeout(() => {\n        delayed$.set(\"visible\");\n      }, 2000);\n    }\n  });\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\",\n        fontFamily: \"monospace\",\n        fontSize: \"13px\",\n      }}\n    >\n      <Computed>\n        {() => <StateRow label=\"Instant\" value={visibility$.get()} />}\n      </Computed>\n      <Computed>\n        {() => <StateRow label=\"2s delay\" value={delayed$.get()} />}\n      </Computed>\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Switch to another tab and come back — the 2s delay row stays{\" \"}\n        <strong>&quot;hidden&quot;</strong> long enough to confirm the transition.\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCM;AAxCN,mBAAuB;AACvB,eAAsC;AACtC,IAAAA,gBAIO;AAEP,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,eAAe;AACjB;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAU,UAAU;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,cAAc;AAAA,QACd,QAAQ,aAAa,UAAU,mCAAmC,iCAAiC;AAAA,QACnG,YAAY,UACR,uCACA;AAAA,QACJ,YAAY;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,GAAG;AAAA,cACH,YAAY,UACR,mCACA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA,4CAAC,UAAK,OAAO,EAAE,OAAO,mCAAmC,UAAU,OAAO,GACvE,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO,UACH,mCACA;AAAA,YACN;AAAA,YACD;AAAA;AAAA,cACQ;AAAA,cAAM;AAAA;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EACF;AAEJ;AAEe,SAAR,4BAA6C;AAClD,QAAM,kBAAc,gCAAsB;AAE1C,QAAM,eAAW,6BAAuC,SAAS;AACjE,QAAM,eAAW,qBAA6C,IAAI;AAElE,sCAAiB,MAAM;AACrB,UAAM,QAAQ,YAAY,IAAI;AAC9B,QAAI,SAAS,YAAY,KAAM,cAAa,SAAS,OAAO;AAC5D,QAAI,UAAU,UAAU;AACtB,eAAS,IAAI,QAAQ;AAAA,IACvB,OAAO;AACL,eAAS,UAAU,WAAW,MAAM;AAClC,iBAAS,IAAI,SAAS;AAAA,MACxB,GAAG,GAAI;AAAA,IACT;AAAA,EACF,CAAC;AAED,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,0BACE,gBAAM,4CAAC,YAAS,OAAM,WAAU,OAAO,YAAY,IAAI,GAAG,GAC7D;AAAA,QACA,4CAAC,0BACE,gBAAM,4CAAC,YAAS,OAAM,YAAW,OAAO,SAAS,IAAI,GAAG,GAC3D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,OAAO;AAAA,YACT;AAAA,YACD;AAAA;AAAA,cAC8D;AAAA,cAC7D,4CAAC,YAAO,sBAAkB;AAAA,cAAS;AAAA;AAAA;AAAA,QACrC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_react"]}

package/dist/elements/useDocumentVisibility/demo.mjs

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useDocumentVisibility } from ".";
+import {
+  Computed,
+  useObservable,
+  useObserveEffect
+} from "@legendapp/state/react";
+const dot = {
+  display: "inline-block",
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  marginRight: "6px",
+  verticalAlign: "middle"
+};
+function StateRow({
+  label,
+  value
+}) {
+  const visible = value === "visible";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "10px 14px",
+        borderRadius: "6px",
+        border: `1px solid ${visible ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-orange, #f97316)"}`,
+        background: visible ? "var(--sl-color-green-low, #f0fdf4)" : "var(--sl-color-orange-low, #fff7ed)",
+        transition: "border-color 0.3s, background 0.3s",
+        gap: "10px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              ...dot,
+              background: visible ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-orange, #f97316)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { color: "var(--sl-color-gray-2, #64748b)", minWidth: "80px" }, children: label }),
+        /* @__PURE__ */ jsxs(
+          "strong",
+          {
+            style: {
+              color: visible ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-orange, #f97316)"
+            },
+            children: [
+              '"',
+              value,
+              '"'
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function UseDocumentVisibilityDemo() {
+  const visibility$ = useDocumentVisibility();
+  const delayed$ = useObservable("visible");
+  const timerRef = useRef(null);
+  useObserveEffect(() => {
+    const state = visibility$.get();
+    if (timerRef.current !== null) clearTimeout(timerRef.current);
+    if (state === "hidden") {
+      delayed$.set("hidden");
+    } else {
+      timerRef.current = setTimeout(() => {
+        delayed$.set("visible");
+      }, 2e3);
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsx(StateRow, { label: "Instant", value: visibility$.get() }) }),
+        /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsx(StateRow, { label: "2s delay", value: delayed$.get() }) }),
+        /* @__PURE__ */ jsxs(
+          "p",
+          {
+            style: {
+              margin: 0,
+              fontSize: "11px",
+              color: "var(--sl-color-gray-3, #94a3b8)"
+            },
+            children: [
+              "Switch to another tab and come back \u2014 the 2s delay row stays",
+              " ",
+              /* @__PURE__ */ jsx("strong", { children: '"hidden"' }),
+              " long enough to confirm the transition."
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  UseDocumentVisibilityDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useDocumentVisibility/demo.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { useDocumentVisibility } from \".\";\nimport {\n  Computed,\n  useObservable,\n  useObserveEffect,\n} 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\nfunction StateRow({\n  label,\n  value,\n}: {\n  label: string;\n  value: DocumentVisibilityState;\n}) {\n  const visible = value === \"visible\";\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        padding: \"10px 14px\",\n        borderRadius: \"6px\",\n        border: `1px solid ${visible ? \"var(--sl-color-green, #22c55e)\" : \"var(--sl-color-orange, #f97316)\"}`,\n        background: visible\n          ? \"var(--sl-color-green-low, #f0fdf4)\"\n          : \"var(--sl-color-orange-low, #fff7ed)\",\n        transition: \"border-color 0.3s, background 0.3s\",\n        gap: \"10px\",\n      }}\n    >\n      <span\n        style={{\n          ...dot,\n          background: visible\n            ? \"var(--sl-color-green, #22c55e)\"\n            : \"var(--sl-color-orange, #f97316)\",\n        }}\n      />\n      <span style={{ color: \"var(--sl-color-gray-2, #64748b)\", minWidth: \"80px\" }}>\n        {label}\n      </span>\n      <strong\n        style={{\n          color: visible\n            ? \"var(--sl-color-green, #22c55e)\"\n            : \"var(--sl-color-orange, #f97316)\",\n        }}\n      >\n        &quot;{value}&quot;\n      </strong>\n    </div>\n  );\n}\n\nexport default function UseDocumentVisibilityDemo() {\n  const visibility$ = useDocumentVisibility();\n  // Delayed display: stays on 'hidden' for 2s after returning to visible\n  const delayed$ = useObservable<DocumentVisibilityState>(\"visible\");\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useObserveEffect(() => {\n    const state = visibility$.get();\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    if (state === \"hidden\") {\n      delayed$.set(\"hidden\");\n    } else {\n      timerRef.current = setTimeout(() => {\n        delayed$.set(\"visible\");\n      }, 2000);\n    }\n  });\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\",\n        fontFamily: \"monospace\",\n        fontSize: \"13px\",\n      }}\n    >\n      <Computed>\n        {() => <StateRow label=\"Instant\" value={visibility$.get()} />}\n      </Computed>\n      <Computed>\n        {() => <StateRow label=\"2s delay\" value={delayed$.get()} />}\n      </Computed>\n      <p\n        style={{\n          margin: 0,\n          fontSize: \"11px\",\n          color: \"var(--sl-color-gray-3, #94a3b8)\",\n        }}\n      >\n        Switch to another tab and come back — the 2s delay row stays{\" \"}\n        <strong>&quot;hidden&quot;</strong> long enough to confirm the transition.\n      </p>\n    </div>\n  );\n}\n"],"mappings":"AAwCM,cAWA,YAXA;AAxCN,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,MAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,eAAe;AACjB;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAU,UAAU;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,cAAc;AAAA,QACd,QAAQ,aAAa,UAAU,mCAAmC,iCAAiC;AAAA,QACnG,YAAY,UACR,uCACA;AAAA,QACJ,YAAY;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,GAAG;AAAA,cACH,YAAY,UACR,mCACA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,UAAK,OAAO,EAAE,OAAO,mCAAmC,UAAU,OAAO,GACvE,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO,UACH,mCACA;AAAA,YACN;AAAA,YACD;AAAA;AAAA,cACQ;AAAA,cAAM;AAAA;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EACF;AAEJ;AAEe,SAAR,4BAA6C;AAClD,QAAM,cAAc,sBAAsB;AAE1C,QAAM,WAAW,cAAuC,SAAS;AACjE,QAAM,WAAW,OAA6C,IAAI;AAElE,mBAAiB,MAAM;AACrB,UAAM,QAAQ,YAAY,IAAI;AAC9B,QAAI,SAAS,YAAY,KAAM,cAAa,SAAS,OAAO;AAC5D,QAAI,UAAU,UAAU;AACtB,eAAS,IAAI,QAAQ;AAAA,IACvB,OAAO;AACL,eAAS,UAAU,WAAW,MAAM;AAClC,iBAAS,IAAI,SAAS;AAAA,MACxB,GAAG,GAAI;AAAA,IACT;AAAA,EACF,CAAC;AAED,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,oBAAC,YAAS,OAAM,WAAU,OAAO,YAAY,IAAI,GAAG,GAC7D;AAAA,QACA,oBAAC,YACE,gBAAM,oBAAC,YAAS,OAAM,YAAW,OAAO,SAAS,IAAI,GAAG,GAC3D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,OAAO;AAAA,YACT;AAAA,YACD;AAAA;AAAA,cAC8D;AAAA,cAC7D,oBAAC,YAAO,sBAAkB;AAAA,cAAS;AAAA;AAAA;AAAA,QACrC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

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

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

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