@inc2734/unitone-css 1.4.0 → 1.4.1

package/src/library.js

@@ -1,3 +1,5 @@
+import { createObserverScope } from './observer-scope';
+
 const layoutAttributeName = 'data-unitone-layout';
 const layoutIntersectionMargin = 200;
 const layoutIntersectionRootMargin = `${layoutIntersectionMargin}px 0px`;
@@ -40,31 +42,38 @@ const setLayoutTokens = (element, tokens) => {
  * Observes target resizes and invokes the callback when a relevant change is detected.
  *
  * @param {Element} target Target element.
- * @param {(target: Element, entry?: ResizeObserverEntry) => void} callback Callback to run.
- * @param {{ getValue?: (entry: ResizeObserverEntry) => unknown, delay?: number }} [options]
+ * @param {(target: Element) => void} callback Callback to run.
+ * @param {ReturnType<typeof createObserverScope>} scope Observer lifetime.
+ * @param {(entry: ResizeObserverEntry) => unknown} [getValue] Value to compare.
  * @returns {ResizeObserver} ResizeObserver instance.
  */
-const createResizeObserver = (target, callback, { getValue, delay = 250 } = {}) => {
-  let prevValue;
-  let isFirstEntry = true;
-
-  const observer = new ResizeObserver(
-    debounce((entries) => {
-      for (const entry of entries) {
-        const currentValue = getValue?.(entry);
-        if (isFirstEntry) {
-          prevValue = currentValue;
-          isFirstEntry = false;
-          continue;
-        }
+const createResizeObserver = (target, callback, scope, getValue) => {
+  const prevValues = new WeakMap();
+  const onResize = debounce(() => callback(target), 250);
+  const observer = new ResizeObserver((entries) => {
+    if (scope.disposed) {
+      return;
+    }
 
-        if (undefined === currentValue || currentValue !== prevValue) {
-          callback(entry.target, entry);
-          prevValue = currentValue;
-        }
+    let changed = false;
+    for (const entry of entries) {
+      const currentValue = getValue?.(entry);
+      if (
+        !prevValues.has(entry.target) ||
+        undefined === currentValue ||
+        currentValue !== prevValues.get(entry.target)
+      ) {
+        changed = true;
       }
-    }, delay),
-  );
+      prevValues.set(entry.target, currentValue);
+    }
+
+    if (changed) {
+      onResize();
+    }
+  });
+  scope.addCleanup(onResize.cancel);
+  scope.addCleanup(() => observer.disconnect());
 
   observer.observe(target);
 
@@ -77,22 +86,18 @@ const createResizeObserver = (target, callback, { getValue, delay = 250 } = {})
  * @param {Node} target Target node.
  * @param {MutationObserverInit} options Observer options.
  * @param {(entries: MutationRecord[]) => void} callback Callback to run.
- * @returns {MutationObserver} MutationObserver instance.
+ * @param {ReturnType<typeof createObserverScope>} scope Observer lifetime.
+ * @returns {void}
  */
-const createMutationObserver = (target, options, callback) => {
+const createMutationObserver = (target, options, callback, scope) => {
   const observer = new MutationObserver((entries) => {
-    requestAnimationFrame(() => {
-      if (!target?.isConnected) {
-        return;
-      }
-
+    if (!scope.disposed && target.isConnected) {
       callback(entries);
-    });
+    }
   });
 
   observer.observe(target, options);
-
-  return observer;
+  scope.addCleanup(() => observer.disconnect());
 };
 
 /**
@@ -100,12 +105,13 @@ const createMutationObserver = (target, options, callback) => {
  *
  * @param {Element} target Target element.
  * @param {(entry: IntersectionObserverEntry) => void} callback Callback to run.
- * @returns {IntersectionObserver} IntersectionObserver instance.
+ * @param {ReturnType<typeof createObserverScope>} scope Observer lifetime.
+ * @returns {void}
  */
-const createIntersectionObserver = (target, callback) => {
+const createIntersectionObserver = (target, callback, scope) => {
   const observer = new IntersectionObserver(
     ([entry]) => {
-      if (entry) {
+      if (entry && !scope.disposed) {
         callback(entry);
       }
     },
@@ -113,8 +119,7 @@ const createIntersectionObserver = (target, callback) => {
   );
 
   observer.observe(target);
-
-  return observer;
+  scope.addCleanup(() => observer.disconnect());
 };
 
 /**
@@ -122,27 +127,19 @@ const createIntersectionObserver = (target, callback) => {
  *
  * @param {Element} target Target element.
  * @param {(target: Element) => void} callback Callback to run.
+ * @param {ReturnType<typeof createObserverScope>} scope Observer lifetime.
  * @returns {() => void} Schedule function.
  */
-const createScheduledTargetCallback = (target, callback) => {
+const createScheduledTargetCallback = (target, callback, scope) => {
   let rafId = 0;
-  let defaultView;
 
   return () => {
-    defaultView = target?.ownerDocument?.defaultView;
-    if (!defaultView?.requestAnimationFrame) {
-      callback(target);
+    if (scope.disposed || rafId) {
       return;
     }
 
-    if (rafId) {
-      return;
-    }
-
-    rafId = defaultView.requestAnimationFrame(() => {
+    rafId = scope.requestAnimationFrame(() => {
       rafId = 0;
-      defaultView = null;
-
       if (target?.isConnected) {
         callback(target);
       }
@@ -151,269 +148,169 @@ const createScheduledTargetCallback = (target, callback) => {
 };
 
 /**
- * Observes resizes on the target and its direct children.
+ * Keeps resize and optional attribute observation in sync with direct children.
  *
  * @param {Element} target Target element.
+ * @param {ResizeObserver} resizeObserver Shared size observer.
  * @param {(target: Element) => void} callback Callback to run.
- * @param {{ getValue?: (entry: ResizeObserverEntry) => unknown, delay?: number, onChildList?: (entries: MutationRecord[]) => void }} [options]
- * @returns {{ resizeObserver: ResizeObserver, mutationObserver: MutationObserver }}
+ * @param {ReturnType<typeof createObserverScope>} scope Observer lifetime.
+ * @param {{ attributeFilter: string[], shouldApply: (entry: MutationRecord) => boolean }} [attributes]
+ * @returns {void}
  */
-const createDirectChildrenResizeObserver = (
-  target,
-  callback,
-  { getValue, delay = 250, onChildList } = {},
-) => {
-  const prevValues = new WeakMap();
+const observeLayoutChildren = (target, resizeObserver, callback, scope, attributes) => {
   const observedChildren = new Set();
-
-  const observer = new ResizeObserver(
-    debounce((entries) => {
-      let shouldApply = false;
-
-      for (const entry of entries) {
-        const currentValue = getValue?.(entry);
-        if (!prevValues.has(entry.target)) {
-          prevValues.set(entry.target, currentValue);
-          continue;
-        }
-
-        if (undefined === currentValue || currentValue !== prevValues.get(entry.target)) {
-          shouldApply = true;
+  const attributeObserver = attributes
+    ? new MutationObserver((entries) => {
+        if (
+          !scope.disposed &&
+          target.isConnected &&
+          hasAttributeMutation(
+            entries,
+            (entry) => entry.target.parentElement === target && attributes.shouldApply(entry),
+          )
+        ) {
+          callback(target);
         }
+      })
+    : null;
+  scope.addCleanup(() => {
+    observedChildren.clear();
+    attributeObserver?.disconnect();
+  });
 
-        prevValues.set(entry.target, currentValue);
-      }
-
-      if (shouldApply) {
-        callback(target);
-      }
-    }, delay),
-  );
-
-  const syncObservedChildren = () => {
-    Array.from(observedChildren).forEach((child) => {
+  const syncChildren = () => {
+    for (const child of observedChildren) {
       if (child.parentElement !== target) {
-        observer.unobserve(child);
+        resizeObserver.unobserve(child);
         observedChildren.delete(child);
-        prevValues.delete(child);
-      }
-    });
-
-    Array.from(target?.children ?? []).forEach((child) => {
-      if (observedChildren.has(child)) {
-        return;
       }
-
-      observer.observe(child);
-      observedChildren.add(child);
-    });
-  };
-
-  observer.observe(target);
-  syncObservedChildren();
-
-  const mutationObserver = createMutationObserver(target, { childList: true }, (entries) => {
-    if (!entries.some((entry) => 'childList' === entry.type)) {
-      return;
     }
 
-    syncObservedChildren();
-    onChildList?.(entries);
-    callback(target);
-  });
-
-  return {
-    resizeObserver: observer,
-    mutationObserver,
-  };
-};
-
-/**
- * Observes attribute changes on direct children.
- *
- * @param {Element} target Target element.
- * @param {(target: Element) => void} callback Callback to run.
- * @param {{ attributeFilter: string[], shouldApply: (entry: MutationRecord) => boolean, attributeOldValue?: boolean }} options
- * @returns {{ observer: MutationObserver, syncObservedChildren: () => void }}
- */
-const createDirectChildrenAttributeObserver = (
-  target,
-  callback,
-  { attributeFilter, shouldApply, attributeOldValue = true } = {},
-) => {
-  const observer = new MutationObserver((entries) => {
-    requestAnimationFrame(() => {
-      if (!target?.isConnected) {
-        return;
-      }
-
-      if (
-        entries.some(
-          (entry) =>
-            'attributes' === entry.type &&
-            entry.target.parentElement === target &&
-            shouldApply(entry),
-        )
-      ) {
-        callback(target);
+    attributeObserver?.disconnect();
+    for (const child of target.children) {
+      if (!observedChildren.has(child)) {
+        resizeObserver.observe(child);
+        observedChildren.add(child);
       }
-    });
-  });
-
-  const syncObservedChildren = () => {
-    observer.disconnect();
-    Array.from(target?.children ?? []).forEach((child) => {
-      observer.observe(child, {
+      attributeObserver?.observe(child, {
         attributes: true,
-        attributeFilter,
-        attributeOldValue,
+        attributeFilter: attributes.attributeFilter,
+        attributeOldValue: true,
       });
-    });
+    }
   };
 
-  syncObservedChildren();
-
-  return {
-    observer,
-    syncObservedChildren,
-  };
+  syncChildren();
+  createMutationObserver(
+    target,
+    { childList: true },
+    () => {
+      syncChildren();
+      callback(target);
+    },
+    scope,
+  );
 };
 
 /**
  * Creates a bundled observer setup for layout re-application.
  *
  * @param {Element} target Target element.
- * @param {(target: Element) => void} apply Apply function.
+ * @param {(target: Element, scope: ReturnType<typeof createObserverScope>) => void} apply Apply function.
  * @param {{
  *   getResizeValue?: (entry: ResizeObserverEntry) => unknown,
- *   delay?: number,
- *   observeResize?: boolean,
- *   observeIntersection?: boolean,
  *   observeDirectChildrenResize?: boolean,
- *   targetMutation?: { options: MutationObserverInit, shouldApply?: (entries: MutationRecord[]) => boolean },
- *   directChildMutation?: { attributeFilter: string[], shouldApply: (entry: MutationRecord) => boolean, attributeOldValue?: boolean }
+ *   targetMutation?: { options: MutationObserverInit, shouldApply: (entries: MutationRecord[]) => boolean },
+ *   directChildMutation?: { attributeFilter: string[], shouldApply: (entry: MutationRecord) => boolean }
  * }} [options]
- * @returns {void}
+ * @returns {() => void} Stops observation and cancels queued work.
  */
 const createLayoutObserver = (
   target,
   apply,
-  {
-    getResizeValue,
-    delay = 250,
-    observeResize = true,
-    observeIntersection = false,
-    observeDirectChildrenResize = false,
-    targetMutation,
-    directChildMutation,
-  } = {},
+  { getResizeValue, observeDirectChildrenResize = false, targetMutation, directChildMutation } = {},
 ) => {
-  const shouldObserveIntersection =
-    observeIntersection && 'undefined' !== typeof IntersectionObserver;
+  const scope = createObserverScope(target);
+  const shouldObserveIntersection = 'undefined' !== typeof IntersectionObserver;
   let isIntersecting = !shouldObserveIntersection || isNearViewport(target);
-  let needsApply = shouldObserveIntersection && !isIntersecting;
+  let needsApply = !isIntersecting;
 
-  const runApply = (element = target) => {
-    if (!element?.isConnected) {
+  const runApply = () => {
+    if (scope.disposed || !target.isConnected) {
       return;
     }
 
-    if (shouldObserveIntersection && !isIntersecting) {
+    if (!isIntersecting) {
       needsApply = true;
       return;
     }
 
     needsApply = false;
-    apply(element);
+    apply(target, scope);
   };
 
-  const schedule = createScheduledTargetCallback(target, runApply);
+  const schedule = createScheduledTargetCallback(target, runApply, scope);
   const scheduleApply = () => {
-    if (!target?.isConnected) {
-      return;
-    }
-
-    if (shouldObserveIntersection && !isIntersecting) {
-      needsApply = true;
+    if (scope.disposed || !target?.isConnected) {
       return;
     }
 
     needsApply = true;
-    schedule();
+    if (isIntersecting) {
+      schedule();
+    }
   };
 
-  let syncDirectChildAttributes = () => {};
-
-  const resizeBundle = !observeResize
-    ? {
-        resizeObserver: null,
-        mutationObserver: null,
-      }
-    : observeDirectChildrenResize
-      ? createDirectChildrenResizeObserver(target, scheduleApply, {
-          getValue: getResizeValue,
-          delay,
-          onChildList: () => {
-            syncDirectChildAttributes();
-          },
-        })
-      : {
-          resizeObserver: createResizeObserver(target, scheduleApply, {
-            getValue: getResizeValue,
-            delay,
-          }),
-        };
-
-  if (shouldObserveIntersection) {
-    createIntersectionObserver(target, (entry) => {
-      isIntersecting = entry.isIntersecting;
-      if (isIntersecting && needsApply) {
-        scheduleApply();
-      }
-    });
+  const resizeObserver = createResizeObserver(target, scheduleApply, scope, getResizeValue);
+  if (observeDirectChildrenResize) {
+    observeLayoutChildren(target, resizeObserver, scheduleApply, scope, directChildMutation);
   }
 
-  if (targetMutation?.options) {
-    createMutationObserver(target, targetMutation.options, (entries) => {
-      if (targetMutation.shouldApply?.(entries) ?? 0 < entries.length) {
-        scheduleApply();
-      }
-    });
+  if (shouldObserveIntersection) {
+    createIntersectionObserver(
+      target,
+      (entry) => {
+        isIntersecting = entry.isIntersecting;
+        if (isIntersecting && needsApply) {
+          scheduleApply();
+        }
+      },
+      scope,
+    );
   }
 
-  const directChildAttributeBundle =
-    directChildMutation?.attributeFilter && directChildMutation.shouldApply
-      ? createDirectChildrenAttributeObserver(target, scheduleApply, {
-          attributeFilter: directChildMutation.attributeFilter,
-          shouldApply: directChildMutation.shouldApply,
-          attributeOldValue: directChildMutation.attributeOldValue,
-        })
-      : null;
-
-  if (directChildAttributeBundle) {
-    syncDirectChildAttributes = directChildAttributeBundle.syncObservedChildren;
+  if (targetMutation) {
+    createMutationObserver(
+      target,
+      targetMutation.options,
+      (entries) => {
+        if (targetMutation.shouldApply(entries)) {
+          scheduleApply();
+        }
+      },
+      scope,
+    );
   }
 
-  if (!resizeBundle.mutationObserver && directChildAttributeBundle) {
-    createMutationObserver(target, { childList: true }, (entries) => {
-      if (!entries.some((entry) => 'childList' === entry.type)) {
-        return;
-      }
-
-      syncDirectChildAttributes();
-      scheduleApply();
-    });
+  if (isIntersecting) {
+    runApply();
   }
 
-  if (!shouldObserveIntersection || isIntersecting) {
-    runApply(target);
-  }
+  return scope.dispose;
 };
 
 const getBorderBoxInlineSize = (entry) => entry.borderBoxSize?.[0].inlineSize;
 
 const getContentRectWidth = (entry) => parseInt(entry.contentRect?.width);
 
+const getElementStyle = (element) =>
+  (element.ownerDocument.defaultView ?? window).getComputedStyle(element);
+
+const isInFlow = (element) => {
+  const { position, display } = getElementStyle(element);
+  return !['absolute', 'fixed'].includes(position) && 'none' !== display;
+};
+
 const hasLayoutBox = (element) => !!element?.isConnected && 0 < element.getClientRects().length;
 
 const isNearViewport = (element) => {
@@ -468,32 +365,51 @@ const getNormalizedInlineRect = (
 };
 
 /**
- * Returns whether the mutation list contains a matching attributes record.
+ * Compares each attribute before the batch with its final value, ignoring intermediate writes.
  *
  * @param {MutationRecord[]} entries Mutation records.
  * @param {(entry: MutationRecord) => boolean} predicate Match predicate.
  * @returns {boolean} Whether a matching attributes mutation exists.
  */
-const hasAttributeMutation = (entries, predicate) =>
-  entries.some((entry) => 'attributes' === entry.type && predicate(entry));
+const hasAttributeMutation = (entries, predicate) => {
+  const seen = new Map();
+  return entries.some((entry) => {
+    if ('attributes' !== entry.type) {
+      return false;
+    }
+    const attributes = seen.get(entry.target) ?? new Set();
+    if (attributes.has(entry.attributeName)) {
+      return false;
+    }
+    attributes.add(entry.attributeName);
+    seen.set(entry.target, attributes);
+    return predicate(entry);
+  });
+};
 
 /**
  * Coalesces repeated calls into the final call within the delay window.
  *
  * @param {Function} fn Function to wrap.
  * @param {number} delay Delay in milliseconds.
- * @returns {Function} Debounced function.
+ * @returns {Function & { cancel: () => void }} Debounced function with cancellation.
  */
 export function debounce(fn, delay) {
   let timer;
 
-  return function (...args) {
+  const debounced = function (...args) {
     const context = this;
     clearTimeout(timer);
     timer = setTimeout(() => {
+      timer = undefined;
       fn.apply(context, args);
     }, delay);
   };
+  debounced.cancel = () => {
+    clearTimeout(timer);
+    timer = undefined;
+  };
+  return debounced;
 }
 
 /**
@@ -515,14 +431,14 @@ export const setDividerLinewrap = (target) => {
     layoutTokens: withoutLayoutTokens(getLayoutTokens(child), ['-bol', '-linewrap']),
   }));
 
-  const resetChildLayouts = () => {
+  const applyChildLayouts = () => {
     childLayouts.forEach(({ child, layoutTokens }) => {
       setLayoutTokens(child, layoutTokens);
     });
   };
 
   if (!currentLayoutArray.some((value) => value.startsWith('-divider:'))) {
-    resetChildLayouts();
+    applyChildLayouts();
     return;
   }
 
@@ -532,41 +448,34 @@ export const setDividerLinewrap = (target) => {
   }
 
   if (!hasLayoutBox(target)) {
-    resetChildLayouts();
+    applyChildLayouts();
     return;
   }
 
   const defaultView =
     target?.ownerDocument?.defaultView ?? ('undefined' !== typeof window ? window : undefined);
   if (!defaultView?.getComputedStyle) {
-    resetChildLayouts();
+    applyChildLayouts();
     return;
   }
 
-  const targetStyle = defaultView.getComputedStyle(target);
+  const targetStyle = getElementStyle(target);
   const flow = {
     direction: targetStyle.getPropertyValue('direction'),
     flexDirection: targetStyle.getPropertyValue('flex-direction'),
     writingMode: targetStyle.getPropertyValue('writing-mode'),
   };
 
-  const targetChildren = childLayouts.reduce((accumulator, { child, layoutTokens }) => {
-    const style = defaultView.getComputedStyle(child);
-    const position = style.getPropertyValue('position');
-    const display = style.getPropertyValue('display');
-    if ('absolute' !== position && 'fixed' !== position && 'none' !== display) {
-      const rect = child.getBoundingClientRect();
-      accumulator.push({
-        child,
-        layoutTokens,
-        inlineRect: getNormalizedInlineRect(rect, flow),
-      });
+  const targetChildren = [];
+  for (const entry of childLayouts) {
+    if (isInFlow(entry.child)) {
+      entry.inlineRect = getNormalizedInlineRect(entry.child.getBoundingClientRect(), flow);
+      targetChildren.push(entry);
     }
-    return accumulator;
-  }, []);
+  }
 
   if (0 === targetChildren.length) {
-    resetChildLayouts();
+    applyChildLayouts();
     setLayoutTokens(target, [...currentLayoutArray, 'divider:initialized']);
     return;
   }
@@ -574,15 +483,14 @@ export const setDividerLinewrap = (target) => {
   let prevInlineRect;
   let hasWrapped = false;
   let isStack = true;
-  const nextChildLayouts = targetChildren.map(({ child, layoutTokens, inlineRect }, index) => {
-    const nextLayoutTokens = [...layoutTokens];
+  targetChildren.forEach(({ layoutTokens, inlineRect }, index) => {
     const isBeginningOfLine =
       0 === index ||
       inlineRect.start < prevInlineRect.end - layoutPositionTolerance ||
       inlineRect.start <= prevInlineRect.start + layoutPositionTolerance;
 
     if (isBeginningOfLine) {
-      nextLayoutTokens.push('-bol');
+      layoutTokens.push('-bol');
       if (0 < index) {
         hasWrapped = true;
       }
@@ -591,19 +499,12 @@ export const setDividerLinewrap = (target) => {
     }
 
     if (hasWrapped) {
-      nextLayoutTokens.push('-linewrap');
+      layoutTokens.push('-linewrap');
     }
 
     prevInlineRect = inlineRect;
-    return { child, layoutTokens: nextLayoutTokens };
-  });
-
-  const nextChildLayoutMap = new Map(
-    nextChildLayouts.map(({ child, layoutTokens }) => [child, layoutTokens]),
-  );
-  childLayouts.forEach(({ child, layoutTokens }) => {
-    setLayoutTokens(child, nextChildLayoutMap.get(child) ?? layoutTokens);
   });
+  applyChildLayouts();
 
   const nextTargetLayout = [...currentLayoutArray];
   if (isStack) {
@@ -614,56 +515,39 @@ export const setDividerLinewrap = (target) => {
   setLayoutTokens(target, nextTargetLayout);
 };
 
+const withoutAttributeTokens = (value, ignoredTokens) =>
+  withoutLayoutTokens((value ?? '').split(' '), ignoredTokens).join(' ');
+
 /**
  * Creates the observer bundle for divider layouts.
  *
  * @param {Element} target Target element.
  * @param {{ ignore?: { layout?: string[], className?: string[] } }} [args]
- * @returns {void}
+ * @returns {() => void} Stops observation and cancels queued work.
  */
 export const dividersResizeObserver = (target, args = {}) => {
   const shouldRecalculateByAttributeMutation = (entry) => {
-    if ('data-unitone-layout' === entry.attributeName) {
-      const ignoreUnitoneLayouts = [
-        ...(args?.ignore?.layout ?? []),
-        ...['divider:initialized', '-bol', '-linewrap', '-stack'],
-      ];
-
-      const current = (entry.target.getAttribute(entry.attributeName) ?? '')
-        .split(' ')
-        .filter((v) => !ignoreUnitoneLayouts.includes(v))
-        .join(' ');
-
-      const old = (entry.oldValue ?? '')
-        .split(' ')
-        .filter((v) => !ignoreUnitoneLayouts.includes(v))
-        .join(' ');
-
-      return current !== old;
-    }
-
-    if ('class' === entry.attributeName) {
-      const ignoreClassNames = [...(args?.ignore?.className ?? [])];
-
-      const current = (entry.target.getAttribute(entry.attributeName) ?? '')
-        .split(' ')
-        .filter((v) => !ignoreClassNames.includes(v))
-        .join(' ');
-
-      const old = (entry.oldValue ?? '')
-        .split(' ')
-        .filter((v) => !ignoreClassNames.includes(v))
-        .join(' ');
-
-      return current !== old;
+    const { attributeName, oldValue } = entry;
+    const currentValue = entry.target.getAttribute(attributeName);
+    const ignoredTokens =
+      layoutAttributeName === attributeName
+        ? [...(args?.ignore?.layout ?? []), 'divider:initialized', '-bol', '-linewrap', '-stack']
+        : 'class' === attributeName
+          ? [...(args?.ignore?.className ?? [])]
+          : null;
+
+    if (ignoredTokens) {
+      return (
+        withoutAttributeTokens(currentValue, ignoredTokens) !==
+        withoutAttributeTokens(oldValue, ignoredTokens)
+      );
     }
 
-    return ['style', 'dir'].includes(entry.attributeName);
+    return ['style', 'dir'].includes(attributeName) && (currentValue ?? '') !== (oldValue ?? '');
   };
 
-  createLayoutObserver(target, setDividerLinewrap, {
+  return createLayoutObserver(target, setDividerLinewrap, {
     getResizeValue: getBorderBoxInlineSize,
-    observeIntersection: true,
     observeDirectChildrenResize: true,
     targetMutation: {
       options: {
@@ -679,7 +563,6 @@ export const dividersResizeObserver = (target, args = {}) => {
     },
     directChildMutation: {
       attributeFilter: ['style', 'data-unitone-layout', 'class'],
-      attributeOldValue: true,
       shouldApply: shouldRecalculateByAttributeMutation,
     },
   });
@@ -696,13 +579,12 @@ export const setStairsStep = (target) => {
   const currentLayoutArray = withoutLayoutTokens(getLayoutTokens(target), ['stairs:initialized']);
   setLayoutTokens(target, currentLayoutArray);
 
-  const firstChild = children[0];
-  if (!firstChild) {
+  if (0 === children.length) {
     setLayoutTokens(target, [...currentLayoutArray, 'stairs:initialized']);
     return;
   }
 
-  // Reset
+  // Measure the unshifted layout before applying steps and measuring their overflow.
   target.style.removeProperty('--unitone--stairs-step-overflow-volume');
   target.style.removeProperty('--unitone--max-stairs-step');
   children.forEach((child) => {
@@ -720,12 +602,10 @@ export const setStairsStep = (target) => {
 
   const isAlternatingStairs = ['up-down', 'down-up'].includes(stairsUp);
 
-  const direction = window.getComputedStyle(target).getPropertyValue('flex-direction');
+  const direction = getElementStyle(target).getPropertyValue('flex-direction');
   const targetBottom = target.getBoundingClientRect().bottom;
   const filteredChildren = children.reduce((accumulator, child) => {
-    const position = window.getComputedStyle(child).getPropertyValue('position');
-    const display = window.getComputedStyle(child).getPropertyValue('display');
-    if ('absolute' === position || 'fixed' === position || 'none' === display) {
+    if (!isInFlow(child)) {
       return accumulator;
     }
 
@@ -744,7 +624,7 @@ export const setStairsStep = (target) => {
     const isBol =
       'row-reverse' === direction ? prevRect?.left <= rect.left : prevRect?.left >= rect.left;
 
-    if (0 === index || (firstChild === child && !prevRect) || isBol) {
+    if (0 === index || isBol) {
       stairsStep = 0;
     } else if (isAlternatingStairs) {
       stairsStep = 0 === stairsStep ? 1 : 0;
@@ -783,11 +663,10 @@ export const setStairsStep = (target) => {
  * Creates the observer bundle for stairs layouts.
  *
  * @param {Element} target Target element.
- * @returns {void}
+ * @returns {() => void} Stops observation and cancels queued work.
  */
 export const stairsResizeObserver = (target) => {
-  createLayoutObserver(target, setStairsStep, {
-    observeIntersection: true,
+  return createLayoutObserver(target, setStairsStep, {
     observeDirectChildrenResize: true,
   });
 };
@@ -800,11 +679,7 @@ export const stairsResizeObserver = (target) => {
  */
 const isIgnoredVerticalWritingMutationNode = (node) =>
   node?.nodeType === Node.ELEMENT_NODE &&
-  [
-    'vertical-writing__thresholder',
-    'vertical-writing:initialized',
-    'vertical-writing:safari',
-  ].includes(node.getAttribute('data-unitone-layout'));
+  'vertical-writing__thresholder' === node.getAttribute(layoutAttributeName);
 
 /**
  * Returns whether vertical-writing mutations require re-application.
@@ -831,9 +706,10 @@ const shouldApplyVerticalWritingMutation = (entries) =>
  * Recalculates column count and height for vertical-writing layouts.
  *
  * @param {Element} target Target element.
+ * @param {ReturnType<typeof createObserverScope>} [scope] Observer lifetime.
  * @returns {void}
  */
-export const setColumnCountForVertical = (target) => {
+const updateColumnCountForVertical = (target, scope) => {
   if (!target) {
     return;
   }
@@ -854,10 +730,7 @@ export const setColumnCountForVertical = (target) => {
   Array.from(target.children)
     .reverse()
     .some((child) => {
-      if (
-        !['absolute', 'fixed'].includes(getComputedStyle(child).position) &&
-        'none' !== getComputedStyle(child).display
-      ) {
+      if (isInFlow(child)) {
         lastChild = child;
         return true;
       }
@@ -868,11 +741,11 @@ export const setColumnCountForVertical = (target) => {
     return;
   }
 
-  const computedStyle = getComputedStyle(target);
+  const computedStyle = getElementStyle(target);
   const threshold = String(computedStyle.getPropertyValue('--unitone--threshold')).trim();
   let forceSwitch = false;
 
-  if (threshold) {
+  if (threshold && !/^[+-]?(?:0+\.?0*|\.0+)(?:[a-z]+|%)?$/i.test(threshold)) {
     const thresholder = target.ownerDocument.createElement('div');
     thresholder.setAttribute(layoutAttributeName, 'vertical-writing__thresholder');
     target.appendChild(thresholder);
@@ -892,7 +765,10 @@ export const setColumnCountForVertical = (target) => {
 
   setLayoutTokens(target, [...nextLayoutTokens, 'vertical-writing:initialized']);
 
-  requestAnimationFrame(() => {
+  const schedule = scope
+    ? (callback) => scope.requestAnimationFrame(callback)
+    : (callback) => target.ownerDocument.defaultView.requestAnimationFrame(callback);
+  schedule(() => {
     if (!target?.isConnected) {
       return;
     }
@@ -915,23 +791,30 @@ export const setColumnCountForVertical = (target) => {
 };
 
 /**
- * Creates the observer bundle for vertical-writing layouts.
+ * Recalculates vertical-writing columns without creating persistent observers.
  *
  * @param {Element} target Target element.
  * @returns {void}
  */
+export const setColumnCountForVertical = (target) => updateColumnCountForVertical(target);
+
+/**
+ * Creates the observer bundle for vertical-writing layouts.
+ *
+ * @param {Element} target Target element.
+ * @returns {() => void} Stops observation and cancels queued work.
+ */
 export const verticalsResizeObserver = (target) => {
-  const applyVerticalColumns = (element) => {
+  const applyVerticalColumns = (element, scope) => {
     if (element.parentNode?.style) {
       element.parentNode.style.height = '';
     }
 
-    setColumnCountForVertical(element);
+    updateColumnCountForVertical(element, scope);
   };
 
-  createLayoutObserver(target, applyVerticalColumns, {
+  return createLayoutObserver(target, applyVerticalColumns, {
     getResizeValue: getContentRectWidth,
-    observeIntersection: true,
     targetMutation: {
       options: {
         attributes: true,
@@ -944,111 +827,301 @@ export const verticalsResizeObserver = (target) => {
   });
 };
 
+const marqueeClones = new WeakSet();
+const marqueeStates = new WeakMap();
+
+const getMarquees = (target) =>
+  Array.from(target.querySelectorAll(':scope > [data-unitone-layout~="marquee"]'));
+
+const getMarqueeAnimation = (element) =>
+  element
+    ?.getAnimations()
+    .find(({ animationName }) => ['marquee', 'marquee-reverse'].includes(animationName));
+
 /**
- * Creates duplicated marquee content and refreshes initialization markers.
+ * Measures layout width without including transforms or rounding fractional pixels.
  *
- * @param {Element} target Target element.
- * @returns {Element | undefined} The duplicated marquee element, if created.
+ * @param {CSSStyleDeclaration} style Computed style.
+ * @param {boolean} borderBox Whether to include padding and borders.
+ * @returns {number} Width in CSS pixels.
  */
-export const setMarquee = (target) => {
-  let clonedMarquee;
-
-  const addInitializedToken = (element) => {
-    const layout = element.getAttribute('data-unitone-layout') ?? '';
-    if (layout.split(/\s+/).includes('marquee:initialized')) {
-      return;
-    }
-    element.setAttribute('data-unitone-layout', `${layout} marquee:initialized`.trim());
-  };
+const getMarqueeWidth = (style, borderBox) => {
+  const edges = ['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'].reduce(
+    (total, property) => total + (parseFloat(style[property]) || 0),
+    0,
+  );
+  const width = parseFloat(style.width) || 0;
+  return width + (borderBox ? edges : 0) - ('border-box' === style.boxSizing ? edges : 0);
+};
 
-  const removeInitializedToken = (element) => {
-    const layout = element.getAttribute('data-unitone-layout') ?? '';
-    const next = layout
-      .split(/\s+/)
-      .filter((value) => value && 'marquee:initialized' !== value)
-      .join(' ');
-    element.setAttribute('data-unitone-layout', next);
-  };
+/**
+ * Synchronizes existing animations without measuring or rebuilding copies.
+ *
+ * @param {Element[]} marquees Original and copied marquees.
+ * @param {ReturnType<typeof createObserverScope>} [scope] Observer lifetime.
+ * @returns {void}
+ */
+const syncMarqueeAnimations = ([original, ...copies], scope) => {
+  const animation = getMarqueeAnimation(original);
+  if (animation) {
+    const syncAnimations = () => {
+      if (scope?.disposed || !original.isConnected || getMarqueeAnimation(original) !== animation) {
+        return;
+      }
+      copies.forEach((element) => {
+        const copyAnimation = getMarqueeAnimation(element);
+        if (!element.isConnected || !copyAnimation) {
+          return;
+        }
 
-  const getMarquees = () => target.querySelectorAll(':scope > [data-unitone-layout~="marquee"]');
-  let marquees = getMarquees();
-  if (0 === marquees.length) {
-    return;
+        const syncTime = () => {
+          if (
+            !scope?.disposed &&
+            element.isConnected &&
+            getMarqueeAnimation(original) === animation
+          ) {
+            copyAnimation.currentTime = animation.currentTime;
+          }
+        };
+        syncTime();
+        // A pending play or pause task can otherwise apply an outdated hold time.
+        if (copyAnimation.pending) {
+          copyAnimation.ready.then(syncTime, () => {});
+        }
+      });
+    };
+    syncAnimations();
+    if (animation.pending) {
+      animation.ready.then(syncAnimations, () => {});
+    }
   }
+};
 
-  const shouldRestartAnimation = Array.from(marquees).some((marquee) =>
-    (marquee.getAttribute(layoutAttributeName) ?? '').split(/\s+/).includes('marquee:initialized'),
-  );
+/**
+ * Updates generated copies and synchronizes them with the original animation.
+ *
+ * @param {Element} target Marquee wrapper.
+ * @param {boolean} [refreshClones] Whether source content has changed; omitted for manual detection.
+ * @param {ReturnType<typeof createObserverScope>} [scope] Observer lifetime.
+ * @returns {{ originals: Element[], firstClone?: Element }} Sources and the first new copy.
+ */
+const updateMarquee = (target, refreshClones, scope) => {
+  const originals = [];
+  const clones = [];
+  for (const child of target.children) {
+    if (marqueeClones.has(child)) {
+      clones.push(child);
+    } else if (child.matches('[data-unitone-layout~="marquee"]')) {
+      originals.push(child);
+    }
+  }
+  const original = originals[0];
+  const state = marqueeStates.get(target);
+  // Observer calls know whether content changed; manual calls compare the saved markup.
+  // Form control state can change without changing its HTML attributes.
+  refreshClones ??=
+    state?.source !== original?.outerHTML || !!original?.querySelector('input, textarea, select');
+  refreshClones ||= state?.original !== original;
+
+  if (refreshClones || 1 !== originals.length) {
+    clones.forEach((clone) => clone.remove());
+    clones.length = 0;
+  }
 
-  if (1 === target.childElementCount && 1 === marquees.length) {
-    const marquee = marquees[0];
-    clonedMarquee = marquee.cloneNode(true);
-    clonedMarquee.setAttribute('aria-hidden', 'true');
-    marquee.after(clonedMarquee);
+  if (!original || !hasLayoutBox(target)) {
+    marqueeStates.delete(target);
+    return { originals };
   }
 
-  marquees = getMarquees();
+  const wrapperStyle = getElementStyle(target);
+  const originalStyle = getElementStyle(original);
+  const wrapperWidth = getMarqueeWidth(wrapperStyle, false);
+  const width = getMarqueeWidth(originalStyle, true);
+  const columnGap = wrapperStyle.columnGap;
+  const gap = (parseFloat(columnGap) || 0) * (columnGap.endsWith('%') ? wrapperWidth / 100 : 1);
+  const gapValue = `${gap}px`;
+  if (target.style.getPropertyValue('--unitone--marquee-gap') !== gapValue) {
+    target.style.setProperty('--unitone--marquee-gap', gapValue);
+  }
 
-  if (!shouldRestartAnimation) {
-    marquees.forEach((marquee) => {
-      addInitializedToken(marquee);
-    });
-    return clonedMarquee;
+  // Keep author-provided sibling content intact instead of treating it as a generated copy.
+  const canClone = 1 === originals.length && target.childElementCount - clones.length === 1;
+  const count =
+    canClone && 0 < wrapperWidth && 0 < width ? Math.ceil((wrapperWidth + gap) / (width + gap)) : 0;
+
+  clones.splice(count).forEach((clone) => clone.remove());
+
+  const lastMarquee = clones.at(-1) ?? original;
+  let firstClone;
+  const fragment = target.ownerDocument.createDocumentFragment();
+  while (clones.length < count) {
+    const clone = original.cloneNode(true);
+    clone.setAttribute('aria-hidden', 'true');
+    clone.setAttribute('inert', '');
+    marqueeClones.add(clone);
+    clones.push(clone);
+    fragment.append(clone);
+    firstClone ??= clone;
+  }
+  if (firstClone) {
+    lastMarquee.after(fragment);
   }
 
-  marquees.forEach((marquee) => {
-    removeInitializedToken(marquee);
+  [...originals, ...clones].forEach((element) => {
+    const tokens = getLayoutTokens(element);
+    if (!tokens.includes('marquee:initialized')) {
+      setLayoutTokens(element, [...tokens, 'marquee:initialized']);
+    }
   });
 
-  requestAnimationFrame(() => {
-    if (!target?.isConnected) {
-      return;
-    }
-    getMarquees().forEach((marquee) => {
-      addInitializedToken(marquee);
-    });
+  marqueeStates.set(target, {
+    original,
+    wrapperWidth,
+    width,
+    vertical: !originalStyle.writingMode.startsWith('horizontal'),
+    source: refreshClones || !state ? original.outerHTML : state.source,
   });
+  syncMarqueeAnimations([...originals, ...clones], scope);
 
-  return clonedMarquee;
+  return { originals, firstClone };
 };
 
 /**
- * Creates the observer bundle for marquee layouts.
+ * Refreshes marquee copies while retaining the original animation's progress.
  *
  * @param {Element} target Target element.
- * @returns {void}
+ * @returns {Element | undefined} The first newly created copy, if any.
+ */
+export const setMarquee = (target) => updateMarquee(target).firstClone;
+
+/**
+ * Observes marquee size and content changes without delaying resize updates.
+ *
+ * @param {Element} target Target element.
+ * @returns {() => void} Stops observation and cancels queued work.
  */
 export const marqueeResizeObserver = (target) => {
-  let clonedMarquee;
+  const scope = createObserverScope(target);
+  let isIntersecting = 'undefined' === typeof IntersectionObserver || isNearViewport(target);
+  let refreshClones = true;
+  const observedOriginals = new Set();
+  scope.addCleanup(() => {
+    observedOriginals.clear();
+    marqueeStates.delete(target);
+  });
 
-  const applyMarquee = (element) => {
-    clonedMarquee = setMarquee(element);
+  const observeMutations = () => {
+    mutationObserver.observe(target, { attributes: true, childList: true });
+    observedOriginals.forEach((element) => {
+      mutationObserver.observe(element, {
+        attributes: true,
+        childList: true,
+        characterData: true,
+        subtree: true,
+      });
+    });
   };
 
-  createLayoutObserver(target, applyMarquee, {
-    observeResize: false,
-    observeIntersection: true,
-    targetMutation: {
-      options: {
-        childList: true,
-      },
-      shouldApply: (entries) => {
-        const addedNodes = entries.flatMap((entry) => Array.from(entry.addedNodes ?? []));
-        const removedNodes = entries.flatMap((entry) => Array.from(entry.removedNodes ?? []));
+  const changesSource = (entry) =>
+    entry.target !== target ||
+    ('childList' === entry.type &&
+      [...entry.addedNodes, ...entry.removedNodes].some((node) => !marqueeClones.has(node)));
 
-        if (
-          clonedMarquee?.isConnected &&
-          1 === addedNodes.length &&
-          0 === removedNodes.length &&
-          addedNodes[0] === clonedMarquee
-        ) {
-          clonedMarquee = null;
-          return false;
-        }
+  const apply = () => {
+    if (scope.disposed || !target.isConnected || !isIntersecting) {
+      return;
+    }
 
-        clonedMarquee = null;
-        return true;
+    // Preserve pending author edits, then exclude our own DOM writes from observation.
+    refreshClones ||= mutationObserver.takeRecords().some(changesSource);
+    mutationObserver.disconnect();
+    const { originals } = updateMarquee(target, refreshClones, scope);
+    refreshClones = false;
+
+    observedOriginals.forEach((element) => {
+      if (!originals.includes(element)) {
+        resizeObserver.unobserve(element);
+        observedOriginals.delete(element);
+      }
+    });
+    originals.forEach((element) => {
+      if (!observedOriginals.has(element)) {
+        resizeObserver.observe(element, { box: 'border-box' });
+        observedOriginals.add(element);
+      }
+    });
+    observeMutations();
+  };
+
+  const scheduleApply = createScheduledTargetCallback(target, apply, scope);
+  const mutationObserver = new MutationObserver((entries) => {
+    if (!entries.some((entry) => 'childList' !== entry.type || changesSource(entry))) {
+      return;
+    }
+    refreshClones ||= entries.some(changesSource);
+    scheduleApply();
+  });
+  const resizeObserver = new ResizeObserver((entries) => {
+    // Measurements already applied by a mutation callback need no second update.
+    const state = marqueeStates.get(target);
+    if (
+      !state ||
+      entries.some((entry) => {
+        if (entry.target === target) {
+          return Math.abs(entry.contentRect.width - state.wrapperWidth) > 0.01;
+        }
+        const box = entry.borderBoxSize?.[0];
+        const width = state.vertical ? box?.blockSize : box?.inlineSize;
+        return (
+          entry.target !== state.original ||
+          undefined === width ||
+          Math.abs(width - state.width) > 0.01
+        );
+      })
+    ) {
+      apply();
+    }
+  });
+  scope.addCleanup(() => mutationObserver.disconnect());
+  scope.addCleanup(() => resizeObserver.disconnect());
+  resizeObserver.observe(target);
+  observeMutations();
+
+  if ('undefined' !== typeof IntersectionObserver) {
+    createIntersectionObserver(
+      target,
+      (entry) => {
+        const wasIntersecting = isIntersecting;
+        isIntersecting = entry.isIntersecting;
+        if (isIntersecting && !wasIntersecting) {
+          apply();
+        }
       },
-    },
+      scope,
+    );
+  }
+
+  // Re-sync copies created while CSS has paused the original animation.
+  const scheduleSync = createScheduledTargetCallback(
+    target,
+    () => syncMarqueeAnimations(getMarquees(target), scope),
+    scope,
+  );
+  const onPauseChange = () => {
+    if (getLayoutTokens(target).includes('-pause-on-hover')) {
+      scheduleSync();
+    }
+  };
+  ['pointerenter', 'pointerleave', 'focusin', 'focusout'].forEach((eventName) => {
+    target.addEventListener(eventName, onPauseChange);
+    scope.addCleanup(() => target.removeEventListener(eventName, onPauseChange));
   });
+
+  // Viewport media queries can change only the gap, without resizing either marquee box.
+  const defaultView = target.ownerDocument.defaultView;
+  defaultView.addEventListener('resize', scheduleApply);
+  scope.addCleanup(() => defaultView.removeEventListener('resize', scheduleApply));
+  apply();
+
+  return scope.dispose;
 };