@usels/core 0.0.1

package/dist/elements/useMutationObserver/demo.mjs

@@ -0,0 +1,220 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef$ } from "../useRef$";
+import { useMutationObserver } from ".";
+import { Computed, useObservable } from "@legendapp/state/react";
+import { batch, beginBatch, endBatch } from "@legendapp/state";
+const MAX_LOG = 6;
+const btn = {
+  height: "26px",
+  padding: "0 10px",
+  fontSize: "12px",
+  cursor: "pointer",
+  borderRadius: "4px",
+  border: "1px solid var(--sl-color-gray-4, #94a3b8)",
+  background: "transparent",
+  fontFamily: "monospace",
+  display: "inline-flex",
+  alignItems: "center",
+  margin: 0
+};
+const rowLabel = {
+  fontSize: "11px",
+  color: "var(--sl-color-gray-3, #94a3b8)",
+  alignSelf: "center",
+  userSelect: "none",
+  minWidth: "52px"
+};
+function UseMutationObserverDemo() {
+  const el$ = useRef$();
+  const log$ = useObservable([]);
+  const active$ = useObservable(false);
+  const childCount$ = useObservable(0);
+  const stopped$ = useObservable(false);
+  const { stop, resume } = useMutationObserver(
+    el$,
+    (records) => {
+      const lines = records.map((r) => {
+        if (r.type === "attributes") {
+          return `[attributes]  ${r.attributeName}  \u2190 was: ${r.oldValue ?? "\u2014"}`;
+        }
+        const a = r.addedNodes.length;
+        const rm = r.removedNodes.length;
+        return `[childList]   ${[a && `+${a} added`, rm && `-${rm} removed`].filter(Boolean).join(", ")}`;
+      });
+      batch(() => {
+        log$.unshift(...lines);
+        if (MAX_LOG < log$.peek().length) {
+          log$.splice(-1, 1);
+        }
+      });
+    },
+    { attributes: true, attributeOldValue: true, childList: true }
+  );
+  const toggleAttr = () => {
+    batch(() => {
+      const el = el$.peek();
+      if (!el) return;
+      const next = !active$.peek();
+      active$.set(next);
+      if (next) el.setAttribute("data-active", "true");
+      else el.removeAttribute("data-active");
+    });
+  };
+  const addChild = () => {
+    const el = el$.peek();
+    if (!el) return;
+    beginBatch();
+    childCount$.set((n) => n + 1);
+    const span = document.createElement("span");
+    span.textContent = `child-${childCount$.peek()}`;
+    span.style.cssText = "display:block;font-size:12px;font-family:monospace;color:var(--sl-color-gray-2,#475569);padding:1px 0";
+    el.appendChild(span);
+    endBatch();
+  };
+  const removeChild = () => {
+    const el = el$.peek();
+    if (!el) return;
+    const last = el.querySelector("span:last-of-type");
+    if (!last) return;
+    el.removeChild(last);
+    childCount$.set((n) => Math.max(0, n - 1));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "16px",
+              alignItems: "center",
+              padding: "6px 12px",
+              background: "var(--sl-color-gray-6, #f1f5f9)",
+              borderRadius: "6px"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs("span", { children: [
+                "status:",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "strong",
+                  {
+                    style: {
+                      color: stopped$.get() ? "var(--sl-color-red, #ef4444)" : "var(--sl-color-green, #22c55e)"
+                    },
+                    children: stopped$.get() ? "stopped" : "observing"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
+                "data-active: ",
+                /* @__PURE__ */ jsx("strong", { children: active$.get() ? '"true"' : "\u2014" })
+              ] }) }),
+              /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsxs("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
+                "children: ",
+                /* @__PURE__ */ jsx("strong", { children: childCount$.get() })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx("span", { style: rowLabel, children: "DOM" }),
+          /* @__PURE__ */ jsx("button", { onClick: toggleAttr, style: btn, children: "toggle data-active" }),
+          /* @__PURE__ */ jsx("button", { onClick: addChild, style: btn, children: "add child" }),
+          /* @__PURE__ */ jsx("button", { onClick: removeChild, style: btn, children: "remove child" }),
+          /* @__PURE__ */ jsx("button", { onClick: () => log$.set([]), style: btn, children: "clear log" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx("span", { style: rowLabel, children: "Observer" }),
+          /* @__PURE__ */ jsx(Computed, { children: () => stopped$.get() ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                resume();
+                stopped$.set(false);
+              },
+              style: {
+                ...btn,
+                borderColor: "var(--sl-color-green, #22c55e)",
+                color: "var(--sl-color-green, #22c55e)"
+              },
+              children: "resume observe()"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                stop();
+                stopped$.set(true);
+              },
+              style: {
+                ...btn,
+                borderColor: "var(--sl-color-red, #ef4444)",
+                color: "var(--sl-color-red, #ef4444)"
+              },
+              children: "stop observe()"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(Computed, { children: () => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: el$,
+            style: {
+              minHeight: "52px",
+              padding: "8px 12px",
+              borderRadius: "6px",
+              border: `1px dashed ${active$.get() ? "var(--sl-color-green, #22c55e)" : "var(--sl-color-gray-4, #94a3b8)"}`,
+              background: active$.get() ? "var(--sl-color-green-low, #f0fdf4)" : "transparent",
+              transition: "border-color 0.2s, background 0.2s"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              minHeight: "80px",
+              maxHeight: "168px",
+              overflowY: "auto",
+              padding: "8px 12px",
+              background: "var(--sl-color-gray-6, #f1f5f9)",
+              borderRadius: "6px",
+              fontSize: "12px"
+            },
+            children: /* @__PURE__ */ jsx(Computed, { children: () => {
+              const entries = log$.get();
+              if (!entries.length) {
+                return /* @__PURE__ */ jsx("span", { style: { opacity: 0.4 }, children: "\u2014 no mutations recorded yet" });
+              }
+              return /* @__PURE__ */ jsx(Fragment, { children: entries.map((line, i) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: "1px 0",
+                    opacity: Math.max(0.2, 1 - i * 0.15)
+                  },
+                  children: line
+                },
+                i
+              )) });
+            } })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  UseMutationObserverDemo as default
+};
+//# sourceMappingURL=demo.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useMutationObserver/demo.tsx"],"sourcesContent":["import { useRef$ } from \"../useRef$\";\nimport { useMutationObserver } from \".\";\nimport { Computed, useObservable } from \"@legendapp/state/react\";\nimport { batch, beginBatch, endBatch } from \"@legendapp/state\";\n\nconst MAX_LOG = 6;\n\nconst btn: React.CSSProperties = {\n  height: \"26px\",\n  padding: \"0 10px\",\n  fontSize: \"12px\",\n  cursor: \"pointer\",\n  borderRadius: \"4px\",\n  border: \"1px solid var(--sl-color-gray-4, #94a3b8)\",\n  background: \"transparent\",\n  fontFamily: \"monospace\",\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  margin: 0,\n};\n\nconst rowLabel: React.CSSProperties = {\n  fontSize: \"11px\",\n  color: \"var(--sl-color-gray-3, #94a3b8)\",\n  alignSelf: \"center\",\n  userSelect: \"none\",\n  minWidth: \"52px\",\n};\n\nexport default function UseMutationObserverDemo() {\n  const el$ = useRef$<HTMLDivElement>();\n  const log$ = useObservable<string[]>([]);\n  const active$ = useObservable(false);\n  const childCount$ = useObservable(0);\n  const stopped$ = useObservable(false);\n\n  const { stop, resume } = useMutationObserver(\n    el$,\n    (records) => {\n      const lines = records.map((r): string => {\n        if (r.type === \"attributes\") {\n          return `[attributes]  ${r.attributeName}  ← was: ${\n            r.oldValue ?? \"—\"\n          }`;\n        }\n        const a = r.addedNodes.length;\n        const rm = r.removedNodes.length;\n        return `[childList]   ${[a && `+${a} added`, rm && `-${rm} removed`]\n          .filter(Boolean)\n          .join(\", \")}`;\n      });\n      batch(() => {\n        log$.unshift(...lines);\n        if (MAX_LOG < log$.peek().length) {\n          log$.splice(-1, 1);\n        }\n      });\n    },\n    { attributes: true, attributeOldValue: true, childList: true },\n  );\n\n  const toggleAttr = () => {\n    batch(() => {\n      const el = el$.peek();\n      if (!el) return;\n\n      const next = !active$.peek();\n      active$.set(next);\n      if (next) el.setAttribute(\"data-active\", \"true\");\n      else el.removeAttribute(\"data-active\");\n    });\n  };\n\n  const addChild = () => {\n    const el = el$.peek();\n    if (!el) return;\n    beginBatch();\n    childCount$.set((n) => n + 1);\n    const span = document.createElement(\"span\");\n    span.textContent = `child-${childCount$.peek()}`;\n    span.style.cssText =\n      \"display:block;font-size:12px;font-family:monospace;\" +\n      \"color:var(--sl-color-gray-2,#475569);padding:1px 0\";\n    el.appendChild(span);\n    endBatch();\n  };\n\n  const removeChild = () => {\n    const el = el$.peek();\n    if (!el) return;\n    const last = el.querySelector(\"span:last-of-type\");\n    if (!last) return;\n    el.removeChild(last);\n    childCount$.set((n) => Math.max(0, n - 1));\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      {/* Status bar */}\n      <div\n        style={{\n          display: \"flex\",\n          gap: \"16px\",\n          alignItems: \"center\",\n          padding: \"6px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n        }}\n      >\n        <Computed>\n          {() => (\n            <span>\n              status:{\" \"}\n              <strong\n                style={{\n                  color: stopped$.get()\n                    ? \"var(--sl-color-red, #ef4444)\"\n                    : \"var(--sl-color-green, #22c55e)\",\n                }}\n              >\n                {stopped$.get() ? \"stopped\" : \"observing\"}\n              </strong>\n            </span>\n          )}\n        </Computed>\n        <Computed>\n          {() => (\n            <span style={{ color: \"var(--sl-color-gray-3, #94a3b8)\" }}>\n              data-active: <strong>{active$.get() ? '\"true\"' : \"—\"}</strong>\n            </span>\n          )}\n        </Computed>\n        <Computed>\n          {() => (\n            <span style={{ color: \"var(--sl-color-gray-3, #94a3b8)\" }}>\n              children: <strong>{childCount$.get()}</strong>\n            </span>\n          )}\n        </Computed>\n      </div>\n\n      {/* DOM mutation actions */}\n      <div style={{ display: \"flex\", gap: \"6px\", alignItems: \"center\" }}>\n        <span style={rowLabel}>DOM</span>\n        <button onClick={toggleAttr} style={btn}>\n          toggle data-active\n        </button>\n        <button onClick={addChild} style={btn}>\n          add child\n        </button>\n        <button onClick={removeChild} style={btn}>\n          remove child\n        </button>\n        <button onClick={() => log$.set([])} style={btn}>\n          clear log\n        </button>\n      </div>\n\n      {/* Observer control */}\n      <div style={{ display: \"flex\", gap: \"6px\", alignItems: \"center\" }}>\n        <span style={rowLabel}>Observer</span>\n        <Computed>\n          {() =>\n            stopped$.get() ? (\n              <button\n                onClick={() => {\n                  resume();\n                  stopped$.set(false);\n                }}\n                style={{\n                  ...btn,\n                  borderColor: \"var(--sl-color-green, #22c55e)\",\n                  color: \"var(--sl-color-green, #22c55e)\",\n                }}\n              >\n                resume observe()\n              </button>\n            ) : (\n              <button\n                onClick={() => {\n                  stop();\n                  stopped$.set(true);\n                }}\n                style={{\n                  ...btn,\n                  borderColor: \"var(--sl-color-red, #ef4444)\",\n                  color: \"var(--sl-color-red, #ef4444)\",\n                }}\n              >\n                stop observe()\n              </button>\n            )\n          }\n        </Computed>\n      </div>\n\n      {/* Observed target element — children appended/removed by buttons above */}\n      <Computed>\n        {() => (\n          <div\n            ref={el$}\n            style={{\n              minHeight: \"52px\",\n              padding: \"8px 12px\",\n              borderRadius: \"6px\",\n              border: `1px dashed ${\n                active$.get()\n                  ? \"var(--sl-color-green, #22c55e)\"\n                  : \"var(--sl-color-gray-4, #94a3b8)\"\n              }`,\n              background: active$.get()\n                ? \"var(--sl-color-green-low, #f0fdf4)\"\n                : \"transparent\",\n              transition: \"border-color 0.2s, background 0.2s\",\n            }}\n          />\n        )}\n      </Computed>\n\n      {/* Mutation log */}\n      <div\n        style={{\n          minHeight: \"80px\",\n          maxHeight: \"168px\",\n          overflowY: \"auto\",\n          padding: \"8px 12px\",\n          background: \"var(--sl-color-gray-6, #f1f5f9)\",\n          borderRadius: \"6px\",\n          fontSize: \"12px\",\n        }}\n      >\n        <Computed>\n          {() => {\n            const entries = log$.get();\n            if (!entries.length) {\n              return (\n                <span style={{ opacity: 0.4 }}>\n                  — no mutations recorded yet\n                </span>\n              );\n            }\n            return (\n              <>\n                {entries.map((line, i) => (\n                  <div\n                    key={i}\n                    style={{\n                      padding: \"1px 0\",\n                      opacity: Math.max(0.2, 1 - i * 0.15),\n                    }}\n                  >\n                    {line}\n                  </div>\n                ))}\n              </>\n            );\n          }}\n        </Computed>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,15 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.mjs';
+import 'react';
+
+interface UseMutationObserverOptions extends MutationObserverInit {
+}
+interface UseMutationObserverReturn {
+    isSupported: Observable<boolean>;
+    stop: () => void;
+    resume: () => void;
+    takeRecords: () => MutationRecord[];
+}
+declare function useMutationObserver(target: MaybeElement | MaybeElement[], callback: MutationCallback, options?: UseMutationObserverOptions): UseMutationObserverReturn;
+
+export { type UseMutationObserverOptions, type UseMutationObserverReturn, useMutationObserver };

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

@@ -0,0 +1,15 @@
+import { Observable } from '@legendapp/state';
+import { MaybeElement } from '../useRef_/index.js';
+import 'react';
+
+interface UseMutationObserverOptions extends MutationObserverInit {
+}
+interface UseMutationObserverReturn {
+    isSupported: Observable<boolean>;
+    stop: () => void;
+    resume: () => void;
+    takeRecords: () => MutationRecord[];
+}
+declare function useMutationObserver(target: MaybeElement | MaybeElement[], callback: MutationCallback, options?: UseMutationObserverOptions): UseMutationObserverReturn;
+
+export { type UseMutationObserverOptions, type UseMutationObserverReturn, useMutationObserver };

package/dist/elements/useMutationObserver/index.js

@@ -0,0 +1,69 @@
+"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 useMutationObserver_exports = {};
+__export(useMutationObserver_exports, {
+  useMutationObserver: () => useMutationObserver
+});
+module.exports = __toCommonJS(useMutationObserver_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_useResizeObserver = require("../useResizeObserver");
+function useMutationObserver(target, callback, options) {
+  const isSupported$ = (0, import_react.useObservable)(
+    typeof MutationObserver !== "undefined"
+  );
+  const observerRef = (0, import_react2.useRef)(null);
+  const isMounted = (0, import_react2.useRef)(false);
+  const cleanup = () => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+  const setup = () => {
+    if (!isSupported$.peek() || !isMounted.current) return;
+    cleanup();
+    const targets = (0, import_useResizeObserver.normalizeTargets)(target);
+    const uniqueTargets = [...new Set(targets)];
+    if (!uniqueTargets.length) return;
+    observerRef.current = new MutationObserver(callback);
+    uniqueTargets.forEach((el) => {
+      observerRef.current.observe(el, options);
+    });
+  };
+  (0, import_react.useMount)(() => {
+    isMounted.current = true;
+    setup();
+    return () => {
+      isMounted.current = false;
+      cleanup();
+    };
+  });
+  (0, import_react.useObserve)(() => {
+    (0, import_useResizeObserver.normalizeTargets)(target);
+    setup();
+  });
+  const takeRecords = () => {
+    return observerRef.current?.takeRecords() ?? [];
+  };
+  return { isSupported: isSupported$, stop: cleanup, resume: setup, takeRecords };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMutationObserver
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useMutationObserver/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useMount, useObserve } from \"@legendapp/state/react\";\nimport { useRef } from \"react\";\nimport type { MaybeElement } from \"../useRef$\";\nimport { normalizeTargets } from \"../useResizeObserver\";\n\nexport interface UseMutationObserverOptions extends MutationObserverInit {}\n\nexport interface UseMutationObserverReturn {\n  isSupported: Observable<boolean>;\n  stop: () => void;\n  resume: () => void;\n  takeRecords: () => MutationRecord[];\n}\n\nexport function useMutationObserver(\n  target: MaybeElement | MaybeElement[],\n  callback: MutationCallback,\n  options?: UseMutationObserverOptions,\n): UseMutationObserverReturn {\n  const isSupported$ = useObservable<boolean>(\n    typeof MutationObserver !== \"undefined\",\n  );\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isMounted = useRef(false);\n\n  const cleanup = () => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n  };\n\n  const setup = () => {\n    if (!isSupported$.peek() || !isMounted.current) return;\n    cleanup();\n\n    const targets = normalizeTargets(target);\n    const uniqueTargets = [...new Set(targets)];\n\n    if (!uniqueTargets.length) return;\n\n    observerRef.current = new MutationObserver(callback);\n    uniqueTargets.forEach((el) => {\n      observerRef.current!.observe(el, options);\n    });\n  };\n\n  useMount(() => {\n    isMounted.current = true;\n    setup();\n    return () => {\n      isMounted.current = false;\n      cleanup();\n    };\n  });\n\n  useObserve(() => {\n    normalizeTargets(target);\n    setup();\n  });\n\n  const takeRecords = (): MutationRecord[] => {\n    return observerRef.current?.takeRecords() ?? [];\n  };\n\n  return { isSupported: isSupported$, stop: cleanup, resume: setup, takeRecords };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAoD;AACpD,IAAAA,gBAAuB;AAEvB,+BAAiC;AAW1B,SAAS,oBACd,QACA,UACA,SAC2B;AAC3B,QAAM,mBAAe;AAAA,IACnB,OAAO,qBAAqB;AAAA,EAC9B;AACA,QAAM,kBAAc,sBAAgC,IAAI;AACxD,QAAM,gBAAY,sBAAO,KAAK;AAE9B,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,WAAW;AAChC,gBAAY,UAAU;AAAA,EACxB;AAEA,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,aAAa,KAAK,KAAK,CAAC,UAAU,QAAS;AAChD,YAAQ;AAER,UAAM,cAAU,2CAAiB,MAAM;AACvC,UAAM,gBAAgB,CAAC,GAAG,IAAI,IAAI,OAAO,CAAC;AAE1C,QAAI,CAAC,cAAc,OAAQ;AAE3B,gBAAY,UAAU,IAAI,iBAAiB,QAAQ;AACnD,kBAAc,QAAQ,CAAC,OAAO;AAC5B,kBAAY,QAAS,QAAQ,IAAI,OAAO;AAAA,IAC1C,CAAC;AAAA,EACH;AAEA,6BAAS,MAAM;AACb,cAAU,UAAU;AACpB,UAAM;AACN,WAAO,MAAM;AACX,gBAAU,UAAU;AACpB,cAAQ;AAAA,IACV;AAAA,EACF,CAAC;AAED,+BAAW,MAAM;AACf,mDAAiB,MAAM;AACvB,UAAM;AAAA,EACR,CAAC;AAED,QAAM,cAAc,MAAwB;AAC1C,WAAO,YAAY,SAAS,YAAY,KAAK,CAAC;AAAA,EAChD;AAEA,SAAO,EAAE,aAAa,cAAc,MAAM,SAAS,QAAQ,OAAO,YAAY;AAChF;","names":["import_react"]}

package/dist/elements/useMutationObserver/index.mjs

@@ -0,0 +1,45 @@
+import { useObservable, useMount, useObserve } from "@legendapp/state/react";
+import { useRef } from "react";
+import { normalizeTargets } from "../useResizeObserver";
+function useMutationObserver(target, callback, options) {
+  const isSupported$ = useObservable(
+    typeof MutationObserver !== "undefined"
+  );
+  const observerRef = useRef(null);
+  const isMounted = useRef(false);
+  const cleanup = () => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  };
+  const setup = () => {
+    if (!isSupported$.peek() || !isMounted.current) return;
+    cleanup();
+    const targets = normalizeTargets(target);
+    const uniqueTargets = [...new Set(targets)];
+    if (!uniqueTargets.length) return;
+    observerRef.current = new MutationObserver(callback);
+    uniqueTargets.forEach((el) => {
+      observerRef.current.observe(el, options);
+    });
+  };
+  useMount(() => {
+    isMounted.current = true;
+    setup();
+    return () => {
+      isMounted.current = false;
+      cleanup();
+    };
+  });
+  useObserve(() => {
+    normalizeTargets(target);
+    setup();
+  });
+  const takeRecords = () => {
+    return observerRef.current?.takeRecords() ?? [];
+  };
+  return { isSupported: isSupported$, stop: cleanup, resume: setup, takeRecords };
+}
+export {
+  useMutationObserver
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useMutationObserver/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable, useMount, useObserve } from \"@legendapp/state/react\";\nimport { useRef } from \"react\";\nimport type { MaybeElement } from \"../useRef$\";\nimport { normalizeTargets } from \"../useResizeObserver\";\n\nexport interface UseMutationObserverOptions extends MutationObserverInit {}\n\nexport interface UseMutationObserverReturn {\n  isSupported: Observable<boolean>;\n  stop: () => void;\n  resume: () => void;\n  takeRecords: () => MutationRecord[];\n}\n\nexport function useMutationObserver(\n  target: MaybeElement | MaybeElement[],\n  callback: MutationCallback,\n  options?: UseMutationObserverOptions,\n): UseMutationObserverReturn {\n  const isSupported$ = useObservable<boolean>(\n    typeof MutationObserver !== \"undefined\",\n  );\n  const observerRef = useRef<MutationObserver | null>(null);\n  const isMounted = useRef(false);\n\n  const cleanup = () => {\n    observerRef.current?.disconnect();\n    observerRef.current = null;\n  };\n\n  const setup = () => {\n    if (!isSupported$.peek() || !isMounted.current) return;\n    cleanup();\n\n    const targets = normalizeTargets(target);\n    const uniqueTargets = [...new Set(targets)];\n\n    if (!uniqueTargets.length) return;\n\n    observerRef.current = new MutationObserver(callback);\n    uniqueTargets.forEach((el) => {\n      observerRef.current!.observe(el, options);\n    });\n  };\n\n  useMount(() => {\n    isMounted.current = true;\n    setup();\n    return () => {\n      isMounted.current = false;\n      cleanup();\n    };\n  });\n\n  useObserve(() => {\n    normalizeTargets(target);\n    setup();\n  });\n\n  const takeRecords = (): MutationRecord[] => {\n    return observerRef.current?.takeRecords() ?? [];\n  };\n\n  return { isSupported: isSupported$, stop: cleanup, resume: setup, takeRecords };\n}\n"],"mappings":"AACA,SAAS,eAAe,UAAU,kBAAkB;AACpD,SAAS,cAAc;AAEvB,SAAS,wBAAwB;AAW1B,SAAS,oBACd,QACA,UACA,SAC2B;AAC3B,QAAM,eAAe;AAAA,IACnB,OAAO,qBAAqB;AAAA,EAC9B;AACA,QAAM,cAAc,OAAgC,IAAI;AACxD,QAAM,YAAY,OAAO,KAAK;AAE9B,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,WAAW;AAChC,gBAAY,UAAU;AAAA,EACxB;AAEA,QAAM,QAAQ,MAAM;AAClB,QAAI,CAAC,aAAa,KAAK,KAAK,CAAC,UAAU,QAAS;AAChD,YAAQ;AAER,UAAM,UAAU,iBAAiB,MAAM;AACvC,UAAM,gBAAgB,CAAC,GAAG,IAAI,IAAI,OAAO,CAAC;AAE1C,QAAI,CAAC,cAAc,OAAQ;AAE3B,gBAAY,UAAU,IAAI,iBAAiB,QAAQ;AACnD,kBAAc,QAAQ,CAAC,OAAO;AAC5B,kBAAY,QAAS,QAAQ,IAAI,OAAO;AAAA,IAC1C,CAAC;AAAA,EACH;AAEA,WAAS,MAAM;AACb,cAAU,UAAU;AACpB,UAAM;AACN,WAAO,MAAM;AACX,gBAAU,UAAU;AACpB,cAAQ;AAAA,IACV;AAAA,EACF,CAAC;AAED,aAAW,MAAM;AACf,qBAAiB,MAAM;AACvB,UAAM;AAAA,EACR,CAAC;AAED,QAAM,cAAc,MAAwB;AAC1C,WAAO,YAAY,SAAS,YAAY,KAAK,CAAC;AAAA,EAChD;AAEA,SAAO,EAAE,aAAa,cAAc,MAAM,SAAS,QAAQ,OAAO,YAAY;AAChF;","names":[]}

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

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

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

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

package/dist/elements/useParentElement/demo.js

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

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

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