@inc2734/unitone-css 0.94.3 → 0.95.0

package/src/library.js

@@ -1,11 +1,33 @@
 const layoutAttributeName = 'data-unitone-layout';
-
+const layoutIntersectionMargin = 200;
+const layoutIntersectionRootMargin = `${layoutIntersectionMargin}px 0px`;
+
+/**
+ * Returns layout tokens from the target element.
+ *
+ * @param {Element | null | undefined} element Target element.
+ * @returns {string[]} Layout tokens.
+ */
 const getLayoutTokens = (element) =>
   (element.getAttribute(layoutAttributeName) ?? '').split(/\s+/).filter(Boolean);
 
+/**
+ * Returns tokens with the specified values removed.
+ *
+ * @param {string[]} tokens Source tokens.
+ * @param {string[]} removedTokens Tokens to remove.
+ * @returns {string[]} Filtered tokens.
+ */
 const withoutLayoutTokens = (tokens, removedTokens) =>
   tokens.filter((value) => !removedTokens.includes(value));
 
+/**
+ * Updates the layout token attribute on the element.
+ *
+ * @param {Element} element Target element.
+ * @param {string[]} tokens Tokens to set.
+ * @returns {void}
+ */
 const setLayoutTokens = (element, tokens) => {
   const nextValue = tokens.filter(Boolean).join(' ');
   if ((element.getAttribute(layoutAttributeName) ?? '') !== nextValue) {
@@ -13,9 +35,15 @@ 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]
+ * @returns {ResizeObserver} ResizeObserver instance.
+ */
 const createResizeObserver = (target, callback, { getValue, delay = 250 } = {}) => {
-  callback(target);
-
   let prevValue;
   let isFirstEntry = true;
 
@@ -42,6 +70,14 @@ const createResizeObserver = (target, callback, { getValue, delay = 250 } = {})
   return observer;
 };
 
+/**
+ * Creates a MutationObserver for the target node.
+ *
+ * @param {Node} target Target node.
+ * @param {MutationObserverInit} options Observer options.
+ * @param {(entries: MutationRecord[]) => void} callback Callback to run.
+ * @returns {MutationObserver} MutationObserver instance.
+ */
 const createMutationObserver = (target, options, callback) => {
   const observer = new MutationObserver((entries) => {
     requestAnimationFrame(() => {
@@ -58,12 +94,366 @@ const createMutationObserver = (target, options, callback) => {
   return observer;
 };
 
+/**
+ * Creates an IntersectionObserver for the target element.
+ *
+ * @param {Element} target Target element.
+ * @param {(entry: IntersectionObserverEntry) => void} callback Callback to run.
+ * @returns {IntersectionObserver} IntersectionObserver instance.
+ */
+const createIntersectionObserver = (target, callback) => {
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry) {
+        callback(entry);
+      }
+    },
+    { rootMargin: layoutIntersectionRootMargin },
+  );
+
+  observer.observe(target);
+
+  return observer;
+};
+
+/**
+ * Returns a scheduler that coalesces re-application work into a single frame.
+ *
+ * @param {Element} target Target element.
+ * @param {(target: Element) => void} callback Callback to run.
+ * @returns {() => void} Schedule function.
+ */
+const createScheduledTargetCallback = (target, callback) => {
+  let rafId = 0;
+  let defaultView;
+
+  return () => {
+    defaultView = target?.ownerDocument?.defaultView;
+    if (!defaultView?.requestAnimationFrame) {
+      callback(target);
+      return;
+    }
+
+    if (rafId) {
+      return;
+    }
+
+    rafId = defaultView.requestAnimationFrame(() => {
+      rafId = 0;
+      defaultView = null;
+
+      if (target?.isConnected) {
+        callback(target);
+      }
+    });
+  };
+};
+
+/**
+ * Observes resizes on the target and its direct children.
+ *
+ * @param {Element} target Target element.
+ * @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 }}
+ */
+const createDirectChildrenResizeObserver = (
+  target,
+  callback,
+  { getValue, delay = 250, onChildList } = {},
+) => {
+  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;
+        }
+
+        prevValues.set(entry.target, currentValue);
+      }
+
+      if (shouldApply) {
+        callback(target);
+      }
+    }, delay),
+  );
+
+  const syncObservedChildren = () => {
+    Array.from(observedChildren).forEach((child) => {
+      if (child.parentElement !== target) {
+        observer.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);
+      }
+    });
+  });
+
+  const syncObservedChildren = () => {
+    observer.disconnect();
+    Array.from(target?.children ?? []).forEach((child) => {
+      observer.observe(child, {
+        attributes: true,
+        attributeFilter,
+        attributeOldValue,
+      });
+    });
+  };
+
+  syncObservedChildren();
+
+  return {
+    observer,
+    syncObservedChildren,
+  };
+};
+
+/**
+ * Creates a bundled observer setup for layout re-application.
+ *
+ * @param {Element} target Target element.
+ * @param {(target: Element) => 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 }
+ * }} [options]
+ * @returns {void}
+ */
+const createLayoutObserver = (
+  target,
+  apply,
+  {
+    getResizeValue,
+    delay = 250,
+    observeResize = true,
+    observeIntersection = false,
+    observeDirectChildrenResize = false,
+    targetMutation,
+    directChildMutation,
+  } = {},
+) => {
+  const shouldObserveIntersection =
+    observeIntersection && 'undefined' !== typeof IntersectionObserver;
+  let isIntersecting = !shouldObserveIntersection || isNearViewport(target);
+  let needsApply = shouldObserveIntersection && !isIntersecting;
+
+  const runApply = (element = target) => {
+    if (!element?.isConnected) {
+      return;
+    }
+
+    if (shouldObserveIntersection && !isIntersecting) {
+      needsApply = true;
+      return;
+    }
+
+    needsApply = false;
+    apply(element);
+  };
+
+  const schedule = createScheduledTargetCallback(target, runApply);
+  const scheduleApply = () => {
+    if (!target?.isConnected) {
+      return;
+    }
+
+    if (shouldObserveIntersection && !isIntersecting) {
+      needsApply = true;
+      return;
+    }
+
+    needsApply = true;
+    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();
+      }
+    });
+  }
+
+  if (targetMutation?.options) {
+    createMutationObserver(target, targetMutation.options, (entries) => {
+      if (targetMutation.shouldApply?.(entries) ?? 0 < entries.length) {
+        scheduleApply();
+      }
+    });
+  }
+
+  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 (!resizeBundle.mutationObserver && directChildAttributeBundle) {
+    createMutationObserver(target, { childList: true }, (entries) => {
+      if (!entries.some((entry) => 'childList' === entry.type)) {
+        return;
+      }
+
+      syncDirectChildAttributes();
+      scheduleApply();
+    });
+  }
+
+  if (!shouldObserveIntersection || isIntersecting) {
+    runApply(target);
+  }
+};
+
 const getBorderBoxInlineSize = (entry) => entry.borderBoxSize?.[0].inlineSize;
 
 const getContentRectWidth = (entry) => parseInt(entry.contentRect?.width);
 
 const hasLayoutBox = (element) => !!element?.isConnected && 0 < element.getClientRects().length;
 
+const isNearViewport = (element) => {
+  if (!hasLayoutBox(element)) {
+    return false;
+  }
+
+  const defaultView = element?.ownerDocument?.defaultView;
+  if (!defaultView) {
+    return true;
+  }
+
+  const rect = element.getBoundingClientRect();
+  const viewportWidth = defaultView.innerWidth;
+  const viewportHeight = defaultView.innerHeight;
+
+  return (
+    rect.bottom > -layoutIntersectionMargin &&
+    rect.right > 0 &&
+    rect.top < viewportHeight + layoutIntersectionMargin &&
+    rect.left < viewportWidth
+  );
+};
+
+/**
+ * Returns whether the mutation list contains a matching attributes record.
+ *
+ * @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));
+
+/**
+ * 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.
+ */
 export function debounce(fn, delay) {
   let timer;
 
@@ -76,6 +466,12 @@ export function debounce(fn, delay) {
   };
 }
 
+/**
+ * Recalculates line wrapping state for divider layouts.
+ *
+ * @param {Element} target Target element.
+ * @returns {void}
+ */
 export const setDividerLinewrap = (target) => {
   const children = Array.from(target?.children ?? []);
   const firstChild = children[0];
@@ -144,68 +540,83 @@ export const setDividerLinewrap = (target) => {
   setLayoutTokens(target, nextTargetLayout);
 };
 
+/**
+ * Creates the observer bundle for divider layouts.
+ *
+ * @param {Element} target Target element.
+ * @param {{ ignore?: { layout?: string[], className?: string[] } }} [args]
+ * @returns {void}
+ */
 export const dividersResizeObserver = (target, args = {}) => {
-  const mObserverArgs = {
-    attributes: true,
-    attributeFilter: ['style', 'data-unitone-layout', 'class'],
-    attributeOldValue: true,
-    subtree: true,
-    characterData: true,
-  };
-
-  const observer = createResizeObserver(target, setDividerLinewrap, {
-    getValue: getBorderBoxInlineSize,
-  });
+  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 mObserver = createMutationObserver(target, mObserverArgs, (entries) => {
-    for (const entry of entries) {
-      if ('attributes' === entry.type && '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(' ');
-
-        if (current !== old) {
-          setDividerLinewrap(target);
-        }
-      } else if ('attributes' === entry.type && 'class' === entry.attributeName) {
-        const ignoreClassNames = [...(args?.ignore?.className ?? [])];
+    if ('class' === entry.attributeName) {
+      const ignoreClassNames = [...(args?.ignore?.className ?? [])];
 
-        const current = (entry.target.getAttribute(entry.attributeName) ?? '')
-          .split(' ')
-          .filter((v) => !ignoreClassNames.includes(v))
-          .join(' ');
+      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(' ');
+      const old = (entry.oldValue ?? '')
+        .split(' ')
+        .filter((v) => !ignoreClassNames.includes(v))
+        .join(' ');
 
-        if (current !== old) {
-          setDividerLinewrap(target);
-        }
-      } else if ('attributes' === entry.type && 'style' === entry.attributeName) {
-        setDividerLinewrap(target);
-      }
+      return current !== old;
     }
-  });
 
-  return {
-    resizeObserver: observer,
-    mutationObserver: mObserver,
+    return 'style' === entry.attributeName;
   };
+
+  createLayoutObserver(target, setDividerLinewrap, {
+    getResizeValue: getBorderBoxInlineSize,
+    observeIntersection: true,
+    observeDirectChildrenResize: true,
+    targetMutation: {
+      options: {
+        attributes: true,
+        attributeFilter: ['style', 'data-unitone-layout', 'class'],
+        attributeOldValue: true,
+      },
+      shouldApply: (entries) =>
+        hasAttributeMutation(
+          entries,
+          (entry) => entry.target === target && shouldRecalculateByAttributeMutation(entry),
+        ),
+    },
+    directChildMutation: {
+      attributeFilter: ['style', 'data-unitone-layout', 'class'],
+      attributeOldValue: true,
+      shouldApply: shouldRecalculateByAttributeMutation,
+    },
+  });
 };
 
+/**
+ * Recalculates step values for stairs layouts.
+ *
+ * @param {Element} target Target element.
+ * @returns {void}
+ */
 export const setStairsStep = (target) => {
   const children = Array.from(target.children);
   const currentLayoutArray = withoutLayoutTokens(getLayoutTokens(target), ['stairs:initialized']);
@@ -294,33 +705,79 @@ export const setStairsStep = (target) => {
   setLayoutTokens(target, [...currentLayoutArray, 'stairs:initialized']);
 };
 
+/**
+ * Creates the observer bundle for stairs layouts.
+ *
+ * @param {Element} target Target element.
+ * @returns {void}
+ */
 export const stairsResizeObserver = (target) => {
-  return createResizeObserver(target, setStairsStep);
+  createLayoutObserver(target, setStairsStep, {
+    observeIntersection: true,
+    observeDirectChildrenResize: true,
+  });
 };
 
+/**
+ * Returns whether the node should be ignored by vertical-writing mutation handling.
+ *
+ * @param {Node | null | undefined} node Target node.
+ * @returns {boolean} Whether the node should be ignored.
+ */
+const isIgnoredVerticalWritingMutationNode = (node) =>
+  node?.nodeType === Node.ELEMENT_NODE &&
+  [
+    'vertical-writing__thresholder',
+    'vertical-writing:initialized',
+    'vertical-writing:safari',
+  ].includes(node.getAttribute('data-unitone-layout'));
+
+/**
+ * Returns whether vertical-writing mutations require re-application.
+ *
+ * @param {MutationRecord[]} entries Mutation records.
+ * @returns {boolean} Whether re-application is required.
+ */
+const shouldApplyVerticalWritingMutation = (entries) =>
+  entries.some((entry) => {
+    if ('attributes' === entry.type) {
+      return true;
+    }
+
+    if ('childList' !== entry.type) {
+      return false;
+    }
+
+    return [...entry.addedNodes, ...entry.removedNodes].some(
+      (node) => !isIgnoredVerticalWritingMutationNode(node),
+    );
+  });
+
+/**
+ * Recalculates column count and height for vertical-writing layouts.
+ *
+ * @param {Element} target Target element.
+ * @returns {void}
+ */
 export const setColumnCountForVertical = (target) => {
   if (!target) {
     return;
   }
 
-  let currentLayoutArray = (target.getAttribute('data-unitone-layout') ?? '').split(/\s+/);
-  if (
-    currentLayoutArray.some((value) =>
-      ['vertical-writing:initialized', 'vertical-writing:safari', '-force-switch'].includes(value),
-    )
-  ) {
-    currentLayoutArray = currentLayoutArray.filter(
-      (value) =>
-        !['vertical-writing:initialized', 'vertical-writing:safari', '-force-switch'].includes(
-          value,
-        ),
-    );
-    target.setAttribute('data-unitone-layout', currentLayoutArray.join(' '));
-  }
+  const currentLayoutTokens = getLayoutTokens(target);
+  const baseLayoutTokens = withoutLayoutTokens(currentLayoutTokens, [
+    'vertical-writing:safari',
+    '-force-switch',
+  ]);
+  const nextLayoutTokens = withoutLayoutTokens(currentLayoutTokens, [
+    'vertical-writing:initialized',
+    'vertical-writing:safari',
+    '-force-switch',
+  ]);
+  setLayoutTokens(target, baseLayoutTokens);
 
   let lastChild;
-  [].slice
-    .call(target.children)
+  Array.from(target.children)
     .reverse()
     .some((child) => {
       if (
@@ -333,130 +790,92 @@ export const setColumnCountForVertical = (target) => {
     });
 
   if (!lastChild) {
-    currentLayoutArray.push('vertical-writing:initialized');
-    target.setAttribute('data-unitone-layout', currentLayoutArray.join(' '));
+    setLayoutTokens(target, [...nextLayoutTokens, 'vertical-writing:initialized']);
     return;
   }
 
-  // Process of the threshold
   const computedStyle = getComputedStyle(target);
   const threshold = String(computedStyle.getPropertyValue('--unitone--threshold')).trim();
   let forceSwitch = false;
 
-  setTimeout(() => {
-    if (!target?.isConnected) {
-      return;
+  if (threshold) {
+    const thresholder = target.ownerDocument.createElement('div');
+    thresholder.setAttribute(layoutAttributeName, 'vertical-writing__thresholder');
+    target.appendChild(thresholder);
+    forceSwitch = thresholder.offsetWidth >= target.offsetWidth;
+    thresholder.remove();
+  }
+
+  if (forceSwitch) {
+    nextLayoutTokens.push('-force-switch');
+  } else {
+    const maybeSafari =
+      target.getBoundingClientRect().left > lastChild.getBoundingClientRect().left;
+    if (maybeSafari) {
+      nextLayoutTokens.push('vertical-writing:safari');
     }
+  }
 
-    if (!!threshold) {
-      const thresholder = document.createElement('div');
-      thresholder.setAttribute('data-unitone-layout', 'vertical-writing__thresholder');
-      target.appendChild(thresholder);
-      forceSwitch = thresholder.offsetWidth >= target.offsetWidth;
-      if (thresholder.parentNode) {
-        thresholder.parentNode.removeChild(thresholder);
-      }
+  setLayoutTokens(target, [...nextLayoutTokens, 'vertical-writing:initialized']);
+
+  requestAnimationFrame(() => {
+    if (!target?.isConnected) {
+      return;
     }
 
-    if (forceSwitch) {
-      currentLayoutArray.push('-force-switch');
-      if (target.parentNode?.style) {
+    if (target.parentNode?.style) {
+      if (forceSwitch) {
         target.parentNode.style.height = '';
-      }
-    } else {
-      // For Safari
-      const maybeSafari =
-        target.getBoundingClientRect().left > lastChild.getBoundingClientRect().left;
-      if (maybeSafari) {
-        currentLayoutArray.push('vertical-writing:safari');
+        return;
       }
 
-      target.setAttribute('data-unitone-layout', currentLayoutArray.join(' '));
-
-      requestAnimationFrame(() => {
-        if (!target?.isConnected) {
-          return;
-        }
+      const targetRect = target.getBoundingClientRect();
+      const lastChildRect = lastChild.getBoundingClientRect();
 
-        const targetRect = target.getBoundingClientRect();
-        const lastChildRect = lastChild.getBoundingClientRect();
-
-        const targetY = targetRect.top + targetRect.height;
-        const lastChildY = lastChildRect.top + lastChildRect.height;
-        if (targetY !== lastChildY) {
-          if (target.parentNode?.style) {
-            target.parentNode.style.height = `${Math.ceil(lastChildY - targetRect.top)}px`;
-          }
-        }
-      });
+      const targetY = targetRect.top + targetRect.height;
+      const lastChildY = lastChildRect.top + lastChildRect.height;
+      target.parentNode.style.height =
+        targetY !== lastChildY ? `${Math.ceil(lastChildY - targetRect.top)}px` : '';
     }
-
-    currentLayoutArray.push('vertical-writing:initialized');
-    target.setAttribute('data-unitone-layout', currentLayoutArray.join(' '));
-  }, 250);
+  });
 };
 
+/**
+ * Creates the observer bundle for vertical-writing layouts.
+ *
+ * @param {Element} target Target element.
+ * @returns {void}
+ */
 export const verticalsResizeObserver = (target) => {
-  let prevWidth = 0;
-
-  const observer = new ResizeObserver(
-    debounce((entries) => {
-      for (const entry of entries) {
-        const width = entry.contentRect?.width;
-        if (parseInt(width) !== parseInt(prevWidth)) {
-          prevWidth = width;
-          entry.target.parentNode.style.height = '';
-          setColumnCountForVertical(entry.target);
-        }
-      }
-    }, 250),
-  );
-
-  observer.observe(target);
+  const applyVerticalColumns = (element) => {
+    if (element.parentNode?.style) {
+      element.parentNode.style.height = '';
+    }
 
-  const mObserverArgs = {
-    attributes: true,
-    attributeFilter: ['style'],
-    childList: true,
-    subtree: true,
+    setColumnCountForVertical(element);
   };
 
-  const mObserver = new MutationObserver((entries) => {
-    requestAnimationFrame(() => {
-      if (0 < entries.length) {
-        const entry = entries[0];
-        const addedNode = entry.addedNodes?.[0];
-        const removedNode = entry.removedNodes?.[0];
-        if (
-          (addedNode?.nodeType === Node.ELEMENT_NODE &&
-            'vertical-writing__thresholder' === addedNode.getAttribute('data-unitone-layout')) ||
-          (removedNode?.nodeType === Node.ELEMENT_NODE &&
-            'vertical-writing__thresholder' === removedNode.getAttribute('data-unitone-layout')) ||
-          (addedNode?.nodeType === Node.ELEMENT_NODE &&
-            'vertical-writing:initialized' === addedNode.getAttribute('data-unitone-layout')) ||
-          (removedNode?.nodeType === Node.ELEMENT_NODE &&
-            'vertical-writing:initialized' === removedNode.getAttribute('data-unitone-layout')) ||
-          (addedNode?.nodeType === Node.ELEMENT_NODE &&
-            'vertical-writing:safari' === addedNode.getAttribute('data-unitone-layout')) ||
-          (removedNode?.nodeType === Node.ELEMENT_NODE &&
-            'vertical-writing:safari' === removedNode.getAttribute('data-unitone-layout'))
-        ) {
-          return;
-        }
-
-        setColumnCountForVertical(target);
-      }
-    });
+  createLayoutObserver(target, applyVerticalColumns, {
+    getResizeValue: getContentRectWidth,
+    observeIntersection: true,
+    targetMutation: {
+      options: {
+        attributes: true,
+        attributeFilter: ['style'],
+        childList: true,
+        subtree: true,
+      },
+      shouldApply: shouldApplyVerticalWritingMutation,
+    },
   });
-
-  mObserver.observe(target, mObserverArgs);
-
-  return {
-    resizeObserver: observer,
-    mutationObserver: mObserver,
-  };
 };
 
+/**
+ * Writes the computed 1em value to a CSS custom property for Firefox.
+ *
+ * @param {HTMLElement} target Target element.
+ * @returns {void}
+ */
 export const setResult1emPxForFireFox = (target) => {
   const ownerDocument = target.ownerDocument;
   const defaultView = ownerDocument.defaultView;
@@ -471,6 +890,12 @@ export const setResult1emPxForFireFox = (target) => {
   target.style.setProperty('--unitone--result--1em-px', fontSize);
 };
 
+/**
+ * Creates the observer bundle for the Firefox 1em measurement workaround.
+ *
+ * @param {HTMLElement} target Target element.
+ * @returns {void}
+ */
 export const result1emPxForFireFoxObserver = (target) => {
   const ownerDocument = target.ownerDocument;
   const defaultView = ownerDocument.defaultView;
@@ -480,26 +905,25 @@ export const result1emPxForFireFoxObserver = (target) => {
     return;
   }
 
-  const mObserverArgs = {
-    attributes: true,
-    attributeFilter: ['style', 'data-unitone-layout', 'class'],
-    characterData: true,
-  };
-
-  const observer = createResizeObserver(target, setResult1emPxForFireFox, {
-    getValue: getBorderBoxInlineSize,
+  createLayoutObserver(target, setResult1emPxForFireFox, {
+    getResizeValue: getBorderBoxInlineSize,
+    targetMutation: {
+      options: {
+        attributes: true,
+        attributeFilter: ['style', 'data-unitone-layout', 'class'],
+        characterData: true,
+      },
+      shouldApply: () => true,
+    },
   });
-
-  const mObserver = createMutationObserver(target, mObserverArgs, () => {
-    setResult1emPxForFireFox(target);
-  });
-
-  return {
-    resizeObserver: observer,
-    mutationObserver: mObserver,
-  };
 };
 
+/**
+ * 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;
 
@@ -526,6 +950,10 @@ export const setMarquee = (target) => {
     return;
   }
 
+  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);
@@ -534,6 +962,14 @@ export const setMarquee = (target) => {
   }
 
   marquees = getMarquees();
+
+  if (!shouldRestartAnimation) {
+    marquees.forEach((marquee) => {
+      addInitializedToken(marquee);
+    });
+    return clonedMarquee;
+  }
+
   marquees.forEach((marquee) => {
     removeInitializedToken(marquee);
   });
@@ -550,6 +986,12 @@ export const setMarquee = (target) => {
   return clonedMarquee;
 };
 
+/**
+ * Creates the observer bundle for marquee layouts.
+ *
+ * @param {Element} target Target element.
+ * @returns {void}
+ */
 export const marqueeResizeObserver = (target) => {
   let clonedMarquee;
 
@@ -557,38 +999,30 @@ export const marqueeResizeObserver = (target) => {
     clonedMarquee = setMarquee(element);
   };
 
-  const observer = createResizeObserver(target, applyMarquee, {
-    getValue: getContentRectWidth,
-  });
-
-  const mObserverArgs = {
-    childList: true,
-  };
-
-  const mObserver = createMutationObserver(target, mObserverArgs, (entries) => {
-    if (!target?.isConnected) {
-      return;
-    }
-
-    const addedNodes = entries.flatMap((entry) => Array.from(entry.addedNodes ?? []));
-    const removedNodes = entries.flatMap((entry) => Array.from(entry.removedNodes ?? []));
+  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;
-    }
+        if (
+          clonedMarquee?.isConnected &&
+          1 === addedNodes.length &&
+          0 === removedNodes.length &&
+          addedNodes[0] === clonedMarquee
+        ) {
+          clonedMarquee = null;
+          return false;
+        }
 
-    clonedMarquee = null;
-    applyMarquee(target);
+        clonedMarquee = null;
+        return true;
+      },
+    },
   });
-
-  return {
-    resizeObserver: observer,
-    mutationObserver: mObserver,
-  };
 };