@inc2734/unitone-css 1.4.0 → 1.4.2

package/src/observer-scope.js

@@ -0,0 +1,53 @@
+/**
+ * Owns the resources and queued work of one layout observer initialization.
+ *
+ * @param {Element} target Target element.
+ * @returns {object} Observer lifetime and cleanup helpers.
+ */
+export const createObserverScope = (target) => {
+  const defaultView = target.ownerDocument.defaultView;
+  const cleanups = new Set();
+  const frames = new Set();
+  let disposed = false;
+
+  return {
+    get disposed() {
+      return disposed;
+    },
+    addCleanup(cleanup) {
+      if (disposed) {
+        cleanup();
+      } else {
+        cleanups.add(cleanup);
+      }
+    },
+    requestAnimationFrame(callback) {
+      if (disposed) {
+        return 0;
+      }
+      if (!defaultView?.requestAnimationFrame) {
+        callback();
+        return 0;
+      }
+
+      const id = defaultView.requestAnimationFrame((time) => {
+        frames.delete(id);
+        if (!disposed) {
+          callback(time);
+        }
+      });
+      frames.add(id);
+      return id;
+    },
+    dispose() {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      frames.forEach((id) => defaultView.cancelAnimationFrame(id));
+      frames.clear();
+      cleanups.forEach((cleanup) => cleanup());
+      cleanups.clear();
+    },
+  };
+};

package/src/register-layout-initializer.js

@@ -22,29 +22,29 @@ const getRegistry = () => {
   return globalThis[INITIALIZER_REGISTRY_KEY];
 };
 
-const initializeInitializer = (initializer, root) => {
-  if (!initializer.enabled() || root?.nodeType !== Node.ELEMENT_NODE) {
-    return;
-  }
-
-  const targets = new Set();
-
-  if (root.matches?.(initializer.selector)) {
-    targets.add(root);
-  }
-
-  root.querySelectorAll?.(initializer.selector).forEach((target) => {
-    targets.add(target);
-  });
-
-  targets.forEach((target) => {
+const initializeTarget = (initializer, target) => {
+  if (!target?.isConnected || target.nodeType !== Node.ELEMENT_NODE) return;
+  if (!initializer.enabled() || !target.matches?.(initializer.selector)) {
     if (initializer.initialized.has(target)) {
-      return;
+      initializer.cleanups.get(target)?.();
+      initializer.cleanups.delete(target);
+      initializer.initialized.delete(target);
+      initializer.reset?.(target);
     }
+    return;
+  }
+  if (initializer.initialized.has(target)) return;
+  const cleanup = initializer.initialize(target);
+  initializer.initialized.add(target);
+  if (typeof cleanup === 'function') initializer.cleanups.set(target, cleanup);
+};
 
-    initializer.initialize(target);
-    initializer.initialized.add(target);
-  });
+const initializeInitializer = (initializer, root) => {
+  if (!root?.isConnected || root.nodeType !== Node.ELEMENT_NODE) return;
+  initializeTarget(initializer, root);
+  root
+    .querySelectorAll?.(initializer.selector)
+    .forEach((target) => initializeTarget(initializer, target));
 };
 
 const initializeNode = (root) => {
@@ -58,6 +58,27 @@ const initializeNode = (root) => {
   });
 };
 
+// Inspect detached subtrees without relying on selectors that may have changed before removal.
+const disposeNode = (root) => {
+  const registry = getRegistry();
+  if (!registry || root?.isConnected || root?.nodeType !== Node.ELEMENT_NODE) {
+    return;
+  }
+
+  [root, ...root.querySelectorAll('*')].forEach((target) => {
+    registry.initializers.forEach((initializer) => {
+      const cleanup = initializer.cleanups?.get(target);
+      if (!cleanup || target.isConnected) {
+        return;
+      }
+
+      initializer.cleanups.delete(target);
+      initializer.initialized.delete(target);
+      cleanup();
+    });
+  });
+};
+
 const flushPendingNodes = () => {
   const registry = getRegistry();
   if (!registry) {
@@ -82,25 +103,44 @@ const observeDocument = () => {
 
   registry.observer = new MutationObserver((entries) => {
     entries.forEach((entry) => {
+      if (entry.type === 'attributes') {
+        registry.initializers.forEach((initializer) => initializeTarget(initializer, entry.target));
+        return;
+      }
+      entry.removedNodes.forEach(disposeNode);
       entry.addedNodes.forEach((addedNode) => {
-        if (addedNode?.nodeType === Node.ELEMENT_NODE) {
+        if (addedNode?.isConnected && addedNode.nodeType === Node.ELEMENT_NODE) {
           registry.pendingNodes.add(addedNode);
         }
       });
     });
 
+    registry.pendingNodes.forEach((node) => {
+      if (!node.isConnected) {
+        registry.pendingNodes.delete(node);
+      }
+    });
+
     if (!registry.rafId && 0 < registry.pendingNodes.size) {
       registry.rafId = requestAnimationFrame(flushPendingNodes);
     }
   });
 
   registry.observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['data-unitone-layout', 'data-unitone-react-layout'],
     childList: true,
     subtree: true,
   });
 };
 
-export const registerLayoutInitializer = ({ key, selector, initialize, enabled = () => true }) => {
+export const registerLayoutInitializer = ({
+  key,
+  selector,
+  initialize,
+  reset,
+  enabled = () => true,
+}) => {
   const registry = getRegistry();
   if (!registry || registry.initializers.has(key)) {
     return;
@@ -109,8 +149,10 @@ export const registerLayoutInitializer = ({ key, selector, initialize, enabled =
   const initializer = {
     selector,
     initialize,
+    reset,
     enabled,
     initialized: new WeakSet(),
+    cleanups: new WeakMap(),
   };
 
   registry.initializers.set(key, initializer);

package/src/use-layout-behaviors.js

@@ -0,0 +1,60 @@
+'use client';
+
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { dividersResizeObserver, stairsResizeObserver, verticalsResizeObserver } from './library';
+import { layoutRefreshEvent, resetLayoutBehavior } from './layout-behavior-state';
+
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const observers = {
+  divider: dividersResizeObserver,
+  stairs: stairsResizeObserver,
+  vertical: verticalsResizeObserver,
+};
+
+/** React owns observer lifetimes; calculations and resize handling remain shared with HTML. */
+export const useLayoutBehaviors = (enabled, forwardedRef) => {
+  const targetRef = useRef(null);
+  const lifetimeRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => targetRef.current);
+
+  const dispose = () => {
+    const lifetime = lifetimeRef.current;
+    if (!lifetime) return;
+    lifetime.target.removeEventListener(layoutRefreshEvent, lifetime.refresh);
+    lifetime.controllers.forEach((controller, name) => {
+      controller.dispose();
+      resetLayoutBehavior(lifetime.target, name);
+    });
+    lifetimeRef.current = null;
+  };
+
+  useBrowserLayoutEffect(() => dispose, []);
+  useBrowserLayoutEffect(() => {
+    const target = targetRef.current;
+    if (lifetimeRef.current?.target !== target) dispose();
+    if (!target) return;
+    if (!lifetimeRef.current) {
+      const controllers = new Map();
+      const refresh = () => controllers.forEach((controller) => controller.refresh());
+      lifetimeRef.current = { target, controllers, refresh };
+      target.addEventListener(layoutRefreshEvent, refresh);
+    }
+    const { controllers } = lifetimeRef.current;
+    for (const [name, observe] of Object.entries(observers)) {
+      if (!enabled[name]) {
+        if (controllers.has(name)) {
+          controllers.get(name).dispose();
+          controllers.delete(name);
+          resetLayoutBehavior(target, name);
+        }
+      } else if (!controllers.has(name)) {
+        const stop = observe(target, { reactOwned: true });
+        controllers.set(name, { dispose: stop, refresh: stop.refresh });
+      } else {
+        controllers.get(name).refresh();
+      }
+    }
+  });
+
+  return targetRef;
+};