@usels/core 0.0.1

package/dist/elements/useMouseInElement/index.js

@@ -0,0 +1,148 @@
+"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 useMouseInElement_exports = {};
+__export(useMouseInElement_exports, {
+  useMouseInElement: () => useMouseInElement
+});
+module.exports = __toCommonJS(useMouseInElement_exports);
+var import_react = require("@legendapp/state/react");
+var import_react2 = require("react");
+var import_shared = require("../../shared");
+var import_useMayObservableOptions = require("../../function/useMayObservableOptions");
+var import_useRef = require("../useRef$");
+var import_useResizeObserver = require("../useResizeObserver");
+var import_useMutationObserver = require("../useMutationObserver");
+var import_useEventListener = require("../../browser/useEventListener");
+const win = typeof window !== "undefined" ? window : null;
+function useMouseInElement(target, options) {
+  const opts$ = (0, import_useMayObservableOptions.useMayObservableOptions)(options, {
+    handleOutside: "peek",
+    windowScroll: "peek",
+    windowResize: "peek"
+  });
+  const mouse$ = (0, import_react.useObservable)({ x: 0, y: 0 });
+  const state$ = (0, import_react.useObservable)({
+    elementX: 0,
+    elementY: 0,
+    elementPositionX: 0,
+    elementPositionY: 0,
+    elementWidth: 0,
+    elementHeight: 0,
+    isOutside: true
+  });
+  const update = (0, import_react2.useCallback)(() => {
+    const el = (0, import_useRef.peekElement)(target);
+    if (!el || !(el instanceof Element)) return;
+    const rects = Array.from(el.getClientRects());
+    if (!rects.length) return;
+    const mx = mouse$.x.peek();
+    const my = mouse$.y.peek();
+    let found = false;
+    for (const rect of rects) {
+      if (mx >= rect.left && mx <= rect.right && my >= rect.top && my <= rect.bottom) {
+        state$.assign({
+          elementX: mx - rect.left,
+          elementY: my - rect.top,
+          elementPositionX: rect.left + window.scrollX,
+          elementPositionY: rect.top + window.scrollY,
+          elementWidth: rect.width,
+          elementHeight: rect.height,
+          isOutside: false
+        });
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      state$.isOutside.set(true);
+      if (opts$.handleOutside.peek() !== false) {
+        const rect = rects[0];
+        state$.assign({
+          elementX: mx - rect.left,
+          elementY: my - rect.top,
+          elementPositionX: rect.left + window.scrollX,
+          elementPositionY: rect.top + window.scrollY,
+          elementWidth: rect.width,
+          elementHeight: rect.height
+        });
+      }
+    }
+  }, []);
+  const onMouseMove = (0, import_react2.useCallback)(
+    (e) => {
+      mouse$.assign({ x: e.clientX, y: e.clientY });
+      update();
+    },
+    [update]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const stopMouse = (0, import_useEventListener.useEventListener)(
+    (0, import_shared.isWindow)(win) ? win : null,
+    "mousemove",
+    onMouseMove,
+    { passive: true }
+  );
+  const stopLeave = (0, import_useEventListener.useEventListener)(
+    typeof document !== "undefined" ? document : null,
+    "mouseleave",
+    () => state$.isOutside.set(true)
+  );
+  const stopScroll = (0, import_useEventListener.useEventListener)(
+    (0, import_shared.isWindow)(win) && opts$.windowScroll.peek() !== false ? win : null,
+    "scroll",
+    update,
+    { passive: true }
+  );
+  const stopResize = (0, import_useEventListener.useEventListener)(
+    (0, import_shared.isWindow)(win) && opts$.windowResize.peek() !== false ? win : null,
+    "resize",
+    update,
+    { passive: true }
+  );
+  const { stop: stopRO } = (0, import_useResizeObserver.useResizeObserver)(target, update);
+  const { stop: stopMO } = (0, import_useMutationObserver.useMutationObserver)(target, update, {
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+  const stop = (0, import_react2.useCallback)(() => {
+    stopMouse();
+    stopLeave();
+    stopScroll();
+    stopResize();
+    stopRO();
+    stopMO();
+  }, []);
+  return {
+    elementX: state$.elementX,
+    elementY: state$.elementY,
+    elementPositionX: state$.elementPositionX,
+    elementPositionY: state$.elementPositionY,
+    elementWidth: state$.elementWidth,
+    elementHeight: state$.elementHeight,
+    isOutside: state$.isOutside,
+    x: mouse$.x,
+    y: mouse$.y,
+    stop
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMouseInElement
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useMouseInElement/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { useCallback } from \"react\";\nimport { isWindow } from \"../../shared\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { DeepMaybeObservable } from \"../../types\";\nimport { type MaybeElement, peekElement } from \"../useRef$\";\nimport { useResizeObserver } from \"../useResizeObserver\";\nimport { useMutationObserver } from \"../useMutationObserver\";\nimport { useEventListener } from \"../../browser/useEventListener\";\n\nexport interface UseMouseInElementOptions {\n  /** Also update elementX/Y when mouse is outside the element. Default: true */\n  handleOutside?: boolean;\n  /** Re-calculate on window scroll. Default: true */\n  windowScroll?: boolean;\n  /** Re-calculate on window resize. Default: true */\n  windowResize?: boolean;\n}\n\nexport interface UseMouseInElementReturn {\n  /** Mouse X position relative to the element */\n  elementX: Observable<number>;\n  /** Mouse Y position relative to the element */\n  elementY: Observable<number>;\n  /** Element's absolute X position on the page */\n  elementPositionX: Observable<number>;\n  /** Element's absolute Y position on the page */\n  elementPositionY: Observable<number>;\n  /** Element width */\n  elementWidth: Observable<number>;\n  /** Element height */\n  elementHeight: Observable<number>;\n  /** Whether the mouse is outside the element */\n  isOutside: Observable<boolean>;\n  /** Global mouse X (clientX) */\n  x: Observable<number>;\n  /** Global mouse Y (clientY) */\n  y: Observable<number>;\n  /** Stop all observers and event listeners */\n  stop: () => void;\n}\n\n// isWindow(window) returns false in SSR (typeof window === \"undefined\"), true in browser.\nconst win = typeof window !== \"undefined\" ? window : null;\n\n/**\n * Tracks whether the mouse cursor is inside a DOM element and calculates\n * the cursor position relative to that element.\n *\n * Observes mousemove, document mouseleave, ResizeObserver, MutationObserver\n * (style/class changes), window scroll, and resize.\n *\n * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null\n * @param options - Configuration options\n * @returns Reactive mouse position values relative to the element, plus a manual `stop()` function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { elementX, elementY, isOutside } = useMouseInElement(el$);\n * return <div ref={el$} />;\n * ```\n */\nexport function useMouseInElement(\n  target: MaybeElement,\n  options?: DeepMaybeObservable<UseMouseInElementOptions>,\n): UseMouseInElementReturn {\n  // Rule 2: normalize with useMayObservableOptions\n  // Rule 3: handleOutside/windowScroll/windowResize are mount-time-only → 'peek'\n  const opts$ = useMayObservableOptions<UseMouseInElementOptions>(options, {\n    handleOutside: \"peek\",\n    windowScroll: \"peek\",\n    windowResize: \"peek\",\n  });\n\n  // Global mouse coordinates (exposed in return)\n  const mouse$ = useObservable({ x: 0, y: 0 });\n\n  // Element-relative state\n  const state$ = useObservable({\n    elementX: 0,\n    elementY: 0,\n    elementPositionX: 0,\n    elementPositionY: 0,\n    elementWidth: 0,\n    elementHeight: 0,\n    isOutside: true,\n  });\n\n  // Recalculate element-relative position from current mouse coords\n  const update = useCallback(() => {\n    const el = peekElement(target) as HTMLElement | null;\n    if (!el || !(el instanceof Element)) return;\n\n    const rects = Array.from(el.getClientRects());\n    if (!rects.length) return;\n\n    const mx = mouse$.x.peek();\n    const my = mouse$.y.peek();\n    let found = false;\n\n    for (const rect of rects) {\n      if (\n        mx >= rect.left &&\n        mx <= rect.right &&\n        my >= rect.top &&\n        my <= rect.bottom\n      ) {\n        state$.assign({\n          elementX: mx - rect.left,\n          elementY: my - rect.top,\n          elementPositionX: rect.left + window.scrollX,\n          elementPositionY: rect.top + window.scrollY,\n          elementWidth: rect.width,\n          elementHeight: rect.height,\n          isOutside: false,\n        });\n        found = true;\n        break;\n      }\n    }\n\n    if (!found) {\n      state$.isOutside.set(true);\n      if (opts$.handleOutside.peek() !== false) {\n        const rect = rects[0];\n        state$.assign({\n          elementX: mx - rect.left,\n          elementY: my - rect.top,\n          elementPositionX: rect.left + window.scrollX,\n          elementPositionY: rect.top + window.scrollY,\n          elementWidth: rect.width,\n          elementHeight: rect.height,\n        });\n      }\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Update global mouse coords then recalculate\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      mouse$.assign({ x: e.clientX, y: e.clientY });\n      update();\n    },\n    [update], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  // Always call hooks unconditionally — Rules of Hooks.\n  // null target → useEventListener registers no listener (no-op).\n  // peek() — evaluated once at render time, no reactive subscription needed.\n  const stopMouse = useEventListener(\n    isWindow(win) ? win : null,\n    \"mousemove\",\n    onMouseMove,\n    { passive: true },\n  );\n\n  // document mouseleave → force isOutside = true\n  const stopLeave = useEventListener(\n    typeof document !== \"undefined\" ? document : null,\n    \"mouseleave\",\n    () => state$.isOutside.set(true),\n  );\n\n  const stopScroll = useEventListener(\n    isWindow(win) && opts$.windowScroll.peek() !== false ? win : null,\n    \"scroll\",\n    update,\n    { passive: true },\n  );\n  const stopResize = useEventListener(\n    isWindow(win) && opts$.windowResize.peek() !== false ? win : null,\n    \"resize\",\n    update,\n    { passive: true },\n  );\n\n  // Observe element size changes\n  const { stop: stopRO } = useResizeObserver(target, update);\n\n  // Observe style/class attribute changes (e.g. CSS transitions, class toggles)\n  const { stop: stopMO } = useMutationObserver(target, update, {\n    attributes: true,\n    attributeFilter: [\"style\", \"class\"],\n  });\n\n  const stop = useCallback(() => {\n    stopMouse();\n    stopLeave();\n    stopScroll();\n    stopResize();\n    stopRO();\n    stopMO();\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    elementX: state$.elementX,\n    elementY: state$.elementY,\n    elementPositionX: state$.elementPositionX,\n    elementPositionY: state$.elementPositionY,\n    elementWidth: state$.elementWidth,\n    elementHeight: state$.elementHeight,\n    isOutside: state$.isOutside,\n    x: mouse$.x,\n    y: mouse$.y,\n    stop,\n  };\n}\n"],"mappings":"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","names":["import_react"]}

package/dist/elements/useMouseInElement/index.mjs

@@ -0,0 +1,124 @@
+import { useObservable } from "@legendapp/state/react";
+import { useCallback } from "react";
+import { isWindow } from "../../shared";
+import { useMayObservableOptions } from "../../function/useMayObservableOptions";
+import { peekElement } from "../useRef$";
+import { useResizeObserver } from "../useResizeObserver";
+import { useMutationObserver } from "../useMutationObserver";
+import { useEventListener } from "../../browser/useEventListener";
+const win = typeof window !== "undefined" ? window : null;
+function useMouseInElement(target, options) {
+  const opts$ = useMayObservableOptions(options, {
+    handleOutside: "peek",
+    windowScroll: "peek",
+    windowResize: "peek"
+  });
+  const mouse$ = useObservable({ x: 0, y: 0 });
+  const state$ = useObservable({
+    elementX: 0,
+    elementY: 0,
+    elementPositionX: 0,
+    elementPositionY: 0,
+    elementWidth: 0,
+    elementHeight: 0,
+    isOutside: true
+  });
+  const update = useCallback(() => {
+    const el = peekElement(target);
+    if (!el || !(el instanceof Element)) return;
+    const rects = Array.from(el.getClientRects());
+    if (!rects.length) return;
+    const mx = mouse$.x.peek();
+    const my = mouse$.y.peek();
+    let found = false;
+    for (const rect of rects) {
+      if (mx >= rect.left && mx <= rect.right && my >= rect.top && my <= rect.bottom) {
+        state$.assign({
+          elementX: mx - rect.left,
+          elementY: my - rect.top,
+          elementPositionX: rect.left + window.scrollX,
+          elementPositionY: rect.top + window.scrollY,
+          elementWidth: rect.width,
+          elementHeight: rect.height,
+          isOutside: false
+        });
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      state$.isOutside.set(true);
+      if (opts$.handleOutside.peek() !== false) {
+        const rect = rects[0];
+        state$.assign({
+          elementX: mx - rect.left,
+          elementY: my - rect.top,
+          elementPositionX: rect.left + window.scrollX,
+          elementPositionY: rect.top + window.scrollY,
+          elementWidth: rect.width,
+          elementHeight: rect.height
+        });
+      }
+    }
+  }, []);
+  const onMouseMove = useCallback(
+    (e) => {
+      mouse$.assign({ x: e.clientX, y: e.clientY });
+      update();
+    },
+    [update]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const stopMouse = useEventListener(
+    isWindow(win) ? win : null,
+    "mousemove",
+    onMouseMove,
+    { passive: true }
+  );
+  const stopLeave = useEventListener(
+    typeof document !== "undefined" ? document : null,
+    "mouseleave",
+    () => state$.isOutside.set(true)
+  );
+  const stopScroll = useEventListener(
+    isWindow(win) && opts$.windowScroll.peek() !== false ? win : null,
+    "scroll",
+    update,
+    { passive: true }
+  );
+  const stopResize = useEventListener(
+    isWindow(win) && opts$.windowResize.peek() !== false ? win : null,
+    "resize",
+    update,
+    { passive: true }
+  );
+  const { stop: stopRO } = useResizeObserver(target, update);
+  const { stop: stopMO } = useMutationObserver(target, update, {
+    attributes: true,
+    attributeFilter: ["style", "class"]
+  });
+  const stop = useCallback(() => {
+    stopMouse();
+    stopLeave();
+    stopScroll();
+    stopResize();
+    stopRO();
+    stopMO();
+  }, []);
+  return {
+    elementX: state$.elementX,
+    elementY: state$.elementY,
+    elementPositionX: state$.elementPositionX,
+    elementPositionY: state$.elementPositionY,
+    elementWidth: state$.elementWidth,
+    elementHeight: state$.elementHeight,
+    isOutside: state$.isOutside,
+    x: mouse$.x,
+    y: mouse$.y,
+    stop
+  };
+}
+export {
+  useMouseInElement
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/useMouseInElement/index.ts"],"sourcesContent":["import type { Observable } from \"@legendapp/state\";\nimport { useObservable } from \"@legendapp/state/react\";\nimport { useCallback } from \"react\";\nimport { isWindow } from \"../../shared\";\nimport { useMayObservableOptions } from \"../../function/useMayObservableOptions\";\nimport type { DeepMaybeObservable } from \"../../types\";\nimport { type MaybeElement, peekElement } from \"../useRef$\";\nimport { useResizeObserver } from \"../useResizeObserver\";\nimport { useMutationObserver } from \"../useMutationObserver\";\nimport { useEventListener } from \"../../browser/useEventListener\";\n\nexport interface UseMouseInElementOptions {\n  /** Also update elementX/Y when mouse is outside the element. Default: true */\n  handleOutside?: boolean;\n  /** Re-calculate on window scroll. Default: true */\n  windowScroll?: boolean;\n  /** Re-calculate on window resize. Default: true */\n  windowResize?: boolean;\n}\n\nexport interface UseMouseInElementReturn {\n  /** Mouse X position relative to the element */\n  elementX: Observable<number>;\n  /** Mouse Y position relative to the element */\n  elementY: Observable<number>;\n  /** Element's absolute X position on the page */\n  elementPositionX: Observable<number>;\n  /** Element's absolute Y position on the page */\n  elementPositionY: Observable<number>;\n  /** Element width */\n  elementWidth: Observable<number>;\n  /** Element height */\n  elementHeight: Observable<number>;\n  /** Whether the mouse is outside the element */\n  isOutside: Observable<boolean>;\n  /** Global mouse X (clientX) */\n  x: Observable<number>;\n  /** Global mouse Y (clientY) */\n  y: Observable<number>;\n  /** Stop all observers and event listeners */\n  stop: () => void;\n}\n\n// isWindow(window) returns false in SSR (typeof window === \"undefined\"), true in browser.\nconst win = typeof window !== \"undefined\" ? window : null;\n\n/**\n * Tracks whether the mouse cursor is inside a DOM element and calculates\n * the cursor position relative to that element.\n *\n * Observes mousemove, document mouseleave, ResizeObserver, MutationObserver\n * (style/class changes), window scroll, and resize.\n *\n * @param target - Element to observe: Ref$, Observable<OpaqueObject<Element>|null>, Document, Window, or null\n * @param options - Configuration options\n * @returns Reactive mouse position values relative to the element, plus a manual `stop()` function\n *\n * @example\n * ```tsx\n * const el$ = useRef$<HTMLDivElement>();\n * const { elementX, elementY, isOutside } = useMouseInElement(el$);\n * return <div ref={el$} />;\n * ```\n */\nexport function useMouseInElement(\n  target: MaybeElement,\n  options?: DeepMaybeObservable<UseMouseInElementOptions>,\n): UseMouseInElementReturn {\n  // Rule 2: normalize with useMayObservableOptions\n  // Rule 3: handleOutside/windowScroll/windowResize are mount-time-only → 'peek'\n  const opts$ = useMayObservableOptions<UseMouseInElementOptions>(options, {\n    handleOutside: \"peek\",\n    windowScroll: \"peek\",\n    windowResize: \"peek\",\n  });\n\n  // Global mouse coordinates (exposed in return)\n  const mouse$ = useObservable({ x: 0, y: 0 });\n\n  // Element-relative state\n  const state$ = useObservable({\n    elementX: 0,\n    elementY: 0,\n    elementPositionX: 0,\n    elementPositionY: 0,\n    elementWidth: 0,\n    elementHeight: 0,\n    isOutside: true,\n  });\n\n  // Recalculate element-relative position from current mouse coords\n  const update = useCallback(() => {\n    const el = peekElement(target) as HTMLElement | null;\n    if (!el || !(el instanceof Element)) return;\n\n    const rects = Array.from(el.getClientRects());\n    if (!rects.length) return;\n\n    const mx = mouse$.x.peek();\n    const my = mouse$.y.peek();\n    let found = false;\n\n    for (const rect of rects) {\n      if (\n        mx >= rect.left &&\n        mx <= rect.right &&\n        my >= rect.top &&\n        my <= rect.bottom\n      ) {\n        state$.assign({\n          elementX: mx - rect.left,\n          elementY: my - rect.top,\n          elementPositionX: rect.left + window.scrollX,\n          elementPositionY: rect.top + window.scrollY,\n          elementWidth: rect.width,\n          elementHeight: rect.height,\n          isOutside: false,\n        });\n        found = true;\n        break;\n      }\n    }\n\n    if (!found) {\n      state$.isOutside.set(true);\n      if (opts$.handleOutside.peek() !== false) {\n        const rect = rects[0];\n        state$.assign({\n          elementX: mx - rect.left,\n          elementY: my - rect.top,\n          elementPositionX: rect.left + window.scrollX,\n          elementPositionY: rect.top + window.scrollY,\n          elementWidth: rect.width,\n          elementHeight: rect.height,\n        });\n      }\n    }\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Update global mouse coords then recalculate\n  const onMouseMove = useCallback(\n    (e: MouseEvent) => {\n      mouse$.assign({ x: e.clientX, y: e.clientY });\n      update();\n    },\n    [update], // eslint-disable-line react-hooks/exhaustive-deps\n  );\n\n  // Always call hooks unconditionally — Rules of Hooks.\n  // null target → useEventListener registers no listener (no-op).\n  // peek() — evaluated once at render time, no reactive subscription needed.\n  const stopMouse = useEventListener(\n    isWindow(win) ? win : null,\n    \"mousemove\",\n    onMouseMove,\n    { passive: true },\n  );\n\n  // document mouseleave → force isOutside = true\n  const stopLeave = useEventListener(\n    typeof document !== \"undefined\" ? document : null,\n    \"mouseleave\",\n    () => state$.isOutside.set(true),\n  );\n\n  const stopScroll = useEventListener(\n    isWindow(win) && opts$.windowScroll.peek() !== false ? win : null,\n    \"scroll\",\n    update,\n    { passive: true },\n  );\n  const stopResize = useEventListener(\n    isWindow(win) && opts$.windowResize.peek() !== false ? win : null,\n    \"resize\",\n    update,\n    { passive: true },\n  );\n\n  // Observe element size changes\n  const { stop: stopRO } = useResizeObserver(target, update);\n\n  // Observe style/class attribute changes (e.g. CSS transitions, class toggles)\n  const { stop: stopMO } = useMutationObserver(target, update, {\n    attributes: true,\n    attributeFilter: [\"style\", \"class\"],\n  });\n\n  const stop = useCallback(() => {\n    stopMouse();\n    stopLeave();\n    stopScroll();\n    stopResize();\n    stopRO();\n    stopMO();\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    elementX: state$.elementX,\n    elementY: state$.elementY,\n    elementPositionX: state$.elementPositionX,\n    elementPositionY: state$.elementPositionY,\n    elementWidth: state$.elementWidth,\n    elementHeight: state$.elementHeight,\n    isOutside: state$.isOutside,\n    x: mouse$.x,\n    y: mouse$.y,\n    stop,\n  };\n}\n"],"mappings":"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","names":[]}

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

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

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

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

package/dist/elements/useMutationObserver/demo.js

@@ -0,0 +1,240 @@
+"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: () => UseMutationObserverDemo
+});
+module.exports = __toCommonJS(demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_useRef = require("../useRef$");
+var import__ = require(".");
+var import_react = require("@legendapp/state/react");
+var import_state = require("@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$ = (0, import_useRef.useRef$)();
+  const log$ = (0, import_react.useObservable)([]);
+  const active$ = (0, import_react.useObservable)(false);
+  const childCount$ = (0, import_react.useObservable)(0);
+  const stopped$ = (0, import_react.useObservable)(false);
+  const { stop, resume } = (0, import__.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(", ")}`;
+      });
+      (0, import_state.batch)(() => {
+        log$.unshift(...lines);
+        if (MAX_LOG < log$.peek().length) {
+          log$.splice(-1, 1);
+        }
+      });
+    },
+    { attributes: true, attributeOldValue: true, childList: true }
+  );
+  const toggleAttr = () => {
+    (0, import_state.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;
+    (0, import_state.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);
+    (0, import_state.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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        fontFamily: "monospace",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "16px",
+              alignItems: "center",
+              padding: "6px 12px",
+              background: "var(--sl-color-gray-6, #f1f5f9)",
+              borderRadius: "6px"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                "status:",
+                " ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "strong",
+                  {
+                    style: {
+                      color: stopped$.get() ? "var(--sl-color-red, #ef4444)" : "var(--sl-color-green, #22c55e)"
+                    },
+                    children: stopped$.get() ? "stopped" : "observing"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
+                "data-active: ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: active$.get() ? '"true"' : "\u2014" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { color: "var(--sl-color-gray-3, #94a3b8)" }, children: [
+                "children: ",
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: childCount$.get() })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: rowLabel, children: "DOM" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: toggleAttr, style: btn, children: "toggle data-active" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: addChild, style: btn, children: "add child" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: removeChild, style: btn, children: "remove child" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: () => log$.set([]), style: btn, children: "clear log" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: rowLabel, children: "Observer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => stopped$.get() ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_react.Computed, { children: () => {
+              const entries = log$.get();
+              if (!entries.length) {
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { opacity: 0.4 }, children: "\u2014 no mutations recorded yet" });
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: entries.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  style: {
+                    padding: "1px 0",
+                    opacity: Math.max(0.2, 1 - i * 0.15)
+                  },
+                  children: line
+                },
+                i
+              )) });
+            } })
+          }
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=demo.js.map

package/dist/elements/useMutationObserver/demo.js.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":[]}