@inc2734/unitone-css 1.4.0 → 1.4.2

package/src/library.js

@@ -1,3 +1,15 @@
+import { requestReactLayoutRefresh } from './layout-behavior-state';
+import { createObserverScope } from './observer-scope';
+
+import {
+  getMarqueeParts,
+  isReactMarquee,
+  markMarqueeCopy,
+  measureMarquee,
+  observeMarquee,
+  requestMarqueeRefresh,
+} from './layout-primitives/marquee/layout';
+
 const layoutAttributeName = 'data-unitone-layout';
 const layoutIntersectionMargin = 200;
 const layoutIntersectionRootMargin = `${layoutIntersectionMargin}px 0px`;
@@ -40,31 +52,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 +96,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 +115,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 +129,7 @@ const createIntersectionObserver = (target, callback) => {
   );
 
   observer.observe(target);
-
-  return observer;
+  scope.addCleanup(() => observer.disconnect());
 };
 
 /**
@@ -122,27 +137,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,268 +158,189 @@ 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]
+ * @param {(entries: MutationRecord[]) => boolean} [shouldApplyChildList] Filters temporary children.
+ * @returns {void}
  */
-const createDirectChildrenResizeObserver = (
+const observeLayoutChildren = (
   target,
+  resizeObserver,
   callback,
-  { getValue, delay = 250, onChildList } = {},
+  scope,
+  attributes,
+  shouldApplyChildList,
 ) => {
-  const prevValues = new WeakMap();
   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 },
+    (entries) => {
+      syncChildren();
+      if (!shouldApplyChildList || shouldApplyChildList(entries)) 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 },
+ *   shouldApplyChildList?: (entries: 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,
+    shouldApplyChildList,
   } = {},
 ) => {
-  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,
+      shouldApplyChildList,
+    );
   }
 
-  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);
-  }
+  // Keep the public callable disposer; React also uses its internal refresh operation.
+  return Object.assign(scope.dispose, { refresh: runApply });
 };
 
 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;
 
@@ -468,32 +396,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;
 }
 
 /**
@@ -502,7 +449,7 @@ export function debounce(fn, delay) {
  * @param {Element} target Target element.
  * @returns {void}
  */
-export const setDividerLinewrap = (target) => {
+const updateDividerLinewrap = (target) => {
   const children = Array.from(target?.children ?? []);
   const currentLayoutArray = withoutLayoutTokens(getLayoutTokens(target), [
     'divider:initialized',
@@ -515,14 +462,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 +479,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 +514,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 +530,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 +546,56 @@ export const setDividerLinewrap = (target) => {
   setLayoutTokens(target, nextTargetLayout);
 };
 
+const withoutAttributeTokens = (value, ignoredTokens) =>
+  withoutLayoutTokens((value ?? '').split(/\s+/).filter(Boolean), ignoredTokens)
+    .sort()
+    .join(' ');
+
+const hasChangedAttribute = (entry) => {
+  const current = entry.target.getAttribute(entry.attributeName);
+  // Behaviors may append their tokens in different orders on the same element.
+  if (['data-unitone-layout', 'class'].includes(entry.attributeName)) {
+    return withoutAttributeTokens(current, []) !== withoutAttributeTokens(entry.oldValue, []);
+  }
+  return (current ?? '') !== (entry.oldValue ?? '');
+};
+
+/** Refreshes the layout, deferring React-managed targets to their component. */
+export const setDividerLinewrap = (target) => {
+  if (!requestReactLayoutRefresh(target)) updateDividerLinewrap(target);
+};
+
 /**
  * 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 = {}) => {
+  if (!args.reactOwned && requestReactLayoutRefresh(target)) return () => {};
   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;
+    const { attributeName, oldValue } = entry;
+    const currentValue = entry.target.getAttribute(attributeName);
+    const ignoredTokens =
+      layoutAttributeName === attributeName
+        ? [...(args?.ignore?.layout ?? [])]
+        : 'class' === attributeName
+          ? [...(args?.ignore?.className ?? [])]
+          : null;
+
+    if (ignoredTokens) {
+      return (
+        withoutAttributeTokens(currentValue, ignoredTokens) !==
+        withoutAttributeTokens(oldValue, ignoredTokens)
+      );
     }
 
-    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;
-    }
-
-    return ['style', 'dir'].includes(entry.attributeName);
+    return ['style', 'dir'].includes(attributeName) && (currentValue ?? '') !== (oldValue ?? '');
   };
 
-  createLayoutObserver(target, setDividerLinewrap, {
+  return createLayoutObserver(target, updateDividerLinewrap, {
     getResizeValue: getBorderBoxInlineSize,
-    observeIntersection: true,
     observeDirectChildrenResize: true,
     targetMutation: {
       options: {
@@ -679,7 +611,6 @@ export const dividersResizeObserver = (target, args = {}) => {
     },
     directChildMutation: {
       attributeFilter: ['style', 'data-unitone-layout', 'class'],
-      attributeOldValue: true,
       shouldApply: shouldRecalculateByAttributeMutation,
     },
   });
@@ -691,18 +622,17 @@ export const dividersResizeObserver = (target, args = {}) => {
  * @param {Element} target Target element.
  * @returns {void}
  */
-export const setStairsStep = (target) => {
+const updateStairsStep = (target) => {
   const children = Array.from(target.children);
   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 +650,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 +672,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;
@@ -779,16 +707,33 @@ export const setStairsStep = (target) => {
   setLayoutTokens(target, [...currentLayoutArray, 'stairs:initialized']);
 };
 
+/** Refreshes the layout, deferring React-managed targets to their component. */
+export const setStairsStep = (target) => {
+  if (!requestReactLayoutRefresh(target)) updateStairsStep(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,
+export const stairsResizeObserver = (target, args = {}) => {
+  if (!args.reactOwned && requestReactLayoutRefresh(target)) return () => {};
+  return createLayoutObserver(target, updateStairsStep, {
     observeDirectChildrenResize: true,
+    targetMutation: {
+      options: {
+        attributes: true,
+        attributeFilter: ['style', 'class', 'dir', 'data-unitone-layout'],
+        attributeOldValue: true,
+      },
+      shouldApply: (entries) => hasAttributeMutation(entries, hasChangedAttribute),
+    },
+    directChildMutation: {
+      attributeFilter: ['style', 'class', 'dir', 'data-unitone-layout'],
+      shouldApply: hasChangedAttribute,
+    },
   });
 };
 
@@ -800,11 +745,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.
@@ -813,10 +754,9 @@ const isIgnoredVerticalWritingMutationNode = (node) =>
  * @returns {boolean} Whether re-application is required.
  */
 const shouldApplyVerticalWritingMutation = (entries) =>
+  hasAttributeMutation(entries, hasChangedAttribute) ||
   entries.some((entry) => {
-    if ('attributes' === entry.type) {
-      return true;
-    }
+    if ('characterData' === entry.type) return true;
 
     if ('childList' !== entry.type) {
       return false;
@@ -831,9 +771,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 +795,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 +806,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 +830,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,27 +856,40 @@ 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 verticalsResizeObserver = (target) => {
-  const applyVerticalColumns = (element) => {
+export const setColumnCountForVertical = (target) => {
+  if (!requestReactLayoutRefresh(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, args = {}) => {
+  if (!args.reactOwned && requestReactLayoutRefresh(target)) return () => {};
+  const applyVerticalColumns = (element, scope) => {
     if (element.parentNode?.style) {
       element.parentNode.style.height = '';
     }
 
-    setColumnCountForVertical(element);
+    updateColumnCountForVertical(element, scope);
   };
 
-  createLayoutObserver(target, applyVerticalColumns, {
-    getResizeValue: getContentRectWidth,
-    observeIntersection: true,
+  return createLayoutObserver(target, applyVerticalColumns, {
+    observeDirectChildrenResize: true,
+    shouldApplyChildList: shouldApplyVerticalWritingMutation,
     targetMutation: {
       options: {
         attributes: true,
-        attributeFilter: ['style'],
+        attributeFilter: ['style', 'class', 'dir', 'data-unitone-layout'],
+        attributeOldValue: true,
+        characterData: true,
         childList: true,
         subtree: true,
       },
@@ -944,111 +898,94 @@ export const verticalsResizeObserver = (target) => {
   });
 };
 
-/**
- * Creates duplicated marquee content and refreshes initialization markers.
- *
- * @param {Element} target Target element.
- * @returns {Element | undefined} The duplicated marquee element, if created.
- */
-export const setMarquee = (target) => {
-  let clonedMarquee;
+const marqueeStates = new WeakMap();
+
+/** Updates copied items while keeping the original nodes and animation intact. */
+const updateMarquee = (target) => {
+  let parts = getMarqueeParts(target);
+  const { marquee, originals } = parts;
+  if (!marquee) return;
+  const state = marqueeStates.get(target);
+  const source = originals.map((item) => item.outerHTML).join('');
+  // Snapshots exclude generated nodes, so author additions after copies are detected too.
+  if (
+    state?.marquee !== marquee ||
+    state?.source !== source ||
+    originals.some(
+      (item) =>
+        item.matches('input, textarea, select') || item.querySelector('input, textarea, select'),
+    )
+  ) {
+    parts.copies.forEach((copy) => copy.remove());
+    parts.copies = [];
+  }
 
-  const addInitializedToken = (element) => {
-    const layout = element.getAttribute('data-unitone-layout') ?? '';
-    if (layout.split(/\s+/).includes('marquee:initialized')) {
-      return;
+  let firstClone;
+  const renderCopies = (groups) => {
+    const count = groups * originals.length;
+    parts.copies.splice(count).forEach((copy) => copy.remove());
+    const fragment = target.ownerDocument.createDocumentFragment();
+    while (parts.copies.length < count) {
+      const copy = originals[parts.copies.length % originals.length].cloneNode(true);
+      markMarqueeCopy(copy);
+      parts.copies.push(copy);
+      fragment.append(copy);
+      firstClone ??= copy;
     }
-    element.setAttribute('data-unitone-layout', `${layout} marquee:initialized`.trim());
-  };
-
-  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);
+    if (fragment.childNodes.length) marquee.append(fragment);
   };
 
-  const getMarquees = () => target.querySelectorAll(':scope > [data-unitone-layout~="marquee"]');
-  let marquees = getMarquees();
-  if (0 === marquees.length) {
-    return;
+  let layout = measureMarquee(target, parts);
+  if (layout.groups && !parts.copies.length) {
+    renderCopies(1);
+    layout = measureMarquee(target, parts);
   }
-
-  const shouldRestartAnimation = Array.from(marquees).some((marquee) =>
-    (marquee.getAttribute(layoutAttributeName) ?? '').split(/\s+/).includes('marquee:initialized'),
-  );
-
-  if (1 === target.childElementCount && 1 === marquees.length) {
-    const marquee = marquees[0];
-    clonedMarquee = marquee.cloneNode(true);
-    clonedMarquee.setAttribute('aria-hidden', 'true');
-    marquee.after(clonedMarquee);
+  renderCopies(layout.groups);
+  if (marquee) {
+    const travel = `${layout.rtl ? layout.distance : -layout.distance}px`;
+    if (marquee.style.getPropertyValue('--unitone--marquee-travel') !== travel) {
+      marquee.style.setProperty('--unitone--marquee-travel', travel);
+    }
+    if (layout.distance > 0) {
+      const tokens = getLayoutTokens(marquee);
+      if (!tokens.includes('marquee:initialized'))
+        setLayoutTokens(marquee, [...tokens, 'marquee:initialized']);
+    }
   }
+  marqueeStates.set(target, { marquee, source });
+  return firstClone?.isConnected ? firstClone : undefined;
+};
 
-  marquees = getMarquees();
-
-  if (!shouldRestartAnimation) {
-    marquees.forEach((marquee) => {
-      addInitializedToken(marquee);
-    });
-    return clonedMarquee;
+/**
+ * Refreshes copied items without restarting the animation.
+ * React-owned marquees receive a refresh request and render copies through React.
+ *
+ * @param {Element} target Marquee wrapper.
+ * @returns {Element | undefined} The first newly created HTML item copy, if any.
+ */
+export const setMarquee = (target) => {
+  if (isReactMarquee(target)) {
+    requestMarqueeRefresh(target);
+    return;
   }
-
-  marquees.forEach((marquee) => {
-    removeInitializedToken(marquee);
-  });
-
-  requestAnimationFrame(() => {
-    if (!target?.isConnected) {
-      return;
-    }
-    getMarquees().forEach((marquee) => {
-      addInitializedToken(marquee);
-    });
-  });
-
-  return clonedMarquee;
+  return updateMarquee(target);
 };
 
 /**
- * Creates the observer bundle for marquee layouts.
+ * Observes marquee and original item sizes and content changes.
+ * React components own their observer lifetime and generated children.
  *
- * @param {Element} target Target element.
- * @returns {void}
+ * @param {Element} target Marquee wrapper.
+ * @returns {() => void} Stops observation and cancels queued work.
  */
 export const marqueeResizeObserver = (target) => {
-  let clonedMarquee;
-
-  const applyMarquee = (element) => {
-    clonedMarquee = setMarquee(element);
+  if (isReactMarquee(target)) {
+    return observeMarquee(target, () => requestMarqueeRefresh(target), { listenForRefresh: false })
+      .dispose;
+  }
+  const controller = observeMarquee(target, () => updateMarquee(target));
+  return () => {
+    controller.dispose();
+    marqueeStates.delete(target);
   };
-
-  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 ?? []));
-
-        if (
-          clonedMarquee?.isConnected &&
-          1 === addedNodes.length &&
-          0 === removedNodes.length &&
-          addedNodes[0] === clonedMarquee
-        ) {
-          clonedMarquee = null;
-          return false;
-        }
-
-        clonedMarquee = null;
-        return true;
-      },
-    },
-  });
 };