@dxos/ui-editor 0.8.4-main.fcfe5033a5 → 0.9.0

package/src/extensions/scrolling/auto-scroll.ts

@@ -0,0 +1,261 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { StateEffect } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+import { addEventListener, combine, throttle } from '@dxos/async';
+import { Domino } from '@dxos/ui';
+import { getSize } from '@dxos/ui-theme';
+
+import { crawlerActiveEffect, crawlerLineEffect } from './crawler';
+
+/** Enable or disable autoscroll. */
+export const autoScrollEffect = StateEffect.define<boolean>();
+
+export type AutoScrollProps = {
+  /**
+   * If true, immediately jump to the bottom and re-pin whenever the size of the
+   * document view (the scroll container) changes — e.g. when a sidebar toggles
+   * or the window is resized. This avoids the visible "stuck near bottom" gap
+   * that otherwise appears because the previous `scrollTop` no longer reaches
+   * the new content height.
+   * @default true
+   */
+  scrollOnResize?: boolean;
+};
+
+/**
+ * Extension that supports pinning the scroll position and automatically scrolls to the bottom when content is added.
+ */
+export const autoScroll = ({ scrollOnResize = true }: AutoScrollProps = {}) => {
+  let buttonContainer: HTMLDivElement | undefined;
+  let isPinned = true;
+  let jumpPending = false;
+  let enabled = true;
+  let firstUpdate = true;
+  // Latches once the thread streams real content. Until then (initial open of a populated
+  // thread, whose height grows only as widgets measure) we snap instantly; afterwards we follow
+  // the bottom smoothly — so the first paint jumps to the end, then streaming eases.
+  let streamed = false;
+
+  const setPinned = (pinned: boolean) => {
+    buttonContainer?.classList.toggle('opacity-0', pinned);
+    isPinned = pinned;
+  };
+
+  return [
+    // Update listener for scrolling when content changes.
+    EditorView.updateListener.of((update) => {
+      const { view, heightChanged, state, startState } = update;
+
+      // Handle enable/disable effect.
+      for (const tr of update.transactions) {
+        for (const effect of tr.effects) {
+          if (effect.is(autoScrollEffect)) {
+            enabled = effect.value;
+            if (enabled) {
+              setPinned(true);
+              view.dispatch({
+                effects: crawlerActiveEffect.of({ active: true }),
+              });
+            } else {
+              view.dispatch({
+                effects: crawlerActiveEffect.of({ active: false }),
+              });
+            }
+          }
+        }
+      }
+
+      if (!enabled) {
+        return;
+      }
+
+      // Jump to bottom instantly when content first appears (either inserted into
+      // an empty doc, or present as initialValue when the editor is created).
+      if (isPinned && (firstUpdate || startState.doc.length === 0) && state.doc.length > 0) {
+        firstUpdate = false;
+        jumpPending = true;
+        requestAnimationFrame(() => {
+          view.scrollDOM.scrollTop = view.scrollDOM.scrollHeight;
+          jumpPending = false;
+        });
+        return;
+      }
+      firstUpdate = false;
+
+      // Suppress crawl while the initial jump is pending.
+      if (jumpPending) {
+        return;
+      }
+
+      // Maybe scroll if doc changed and pinned.
+      // NOTE: Geometry changed is triggered when widgets change height (e.g., toggle tool block).
+      if (heightChanged) {
+        if (isPinned) {
+          // NOTE: Use scroll geometry instead of coordsAtPos to avoid forced layout/scroll side-effects.
+          const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+          const delta = scrollHeight - scrollTop - clientHeight;
+          if (update.docChanged) {
+            streamed = true;
+          }
+          if (delta > 0) {
+            setPinned(true);
+            // Before the thread has streamed any real content, height grows only from layout
+            // (widgets measuring on open) — snap instantly so we don't animate through the
+            // backlog. Once content has streamed, follow the bottom smoothly with the spring,
+            // including reflow frames interleaved with token edits. Both keep following until
+            // the height stabilizes.
+            view.dispatch({ effects: crawlerActiveEffect.of({ active: true, instant: !streamed }) });
+          } else if (delta < -1) {
+            setPinned(false);
+          }
+        } else {
+          // TODO(burdon): Should re-pin if content shrinks.
+          if (state.doc.length === 0) {
+            setPinned(true);
+          }
+        }
+      }
+    }),
+
+    // Re-pin and jump to bottom when the scroll container itself resizes (e.g. sidebar toggle,
+    // window resize). Doc-driven height changes are handled by the updateListener above; this
+    // observer covers the case where the viewport changes while the doc length is unchanged.
+    scrollOnResize
+      ? ViewPlugin.fromClass(
+          class {
+            private readonly observer: ResizeObserver;
+            private firstObservation = true;
+            private destroyed = false;
+            constructor(view: EditorView) {
+              // Throttle so a continuous drag-resize (or a flurry of layout changes) coalesces
+              // into a single re-pin per ~50ms instead of dispatching every frame.
+              const onResize = throttle(() => {
+                if (this.destroyed || !enabled) {
+                  return;
+                }
+
+                setPinned(true);
+                requestAnimationFrame(() => {
+                  if (this.destroyed) {
+                    return;
+                  }
+
+                  view.scrollDOM.scrollTo({ top: view.scrollDOM.scrollHeight, behavior: 'instant' });
+                  view.dispatch({ effects: crawlerActiveEffect.of({ active: false }) });
+                });
+              }, 50);
+
+              this.observer = new ResizeObserver(() => {
+                // Skip the initial fire that ResizeObserver emits on `observe()`.
+                if (this.firstObservation) {
+                  this.firstObservation = false;
+                  return;
+                }
+                onResize();
+              });
+
+              this.observer.observe(view.scrollDOM);
+            }
+            destroy() {
+              this.destroyed = true;
+              this.observer.disconnect();
+            }
+          },
+        )
+      : [],
+
+    // Detect user scroll and unpin (or re-pin if scrolled to the bottom).
+    ViewPlugin.fromClass(
+      class {
+        private readonly cleanup: () => void;
+        constructor(view: EditorView) {
+          // Re-pin check is throttled so the listener doesn't thrash while scrolling, but
+          // unpinning must be immediate — otherwise content arriving during the throttle
+          // window re-applies the crawl effect and yanks the viewport back to the bottom.
+          const onUserScroll = throttle(() => {
+            requestAnimationFrame(() => {
+              const { scrollTop, scrollHeight, clientHeight } = view.scrollDOM;
+              const delta = scrollHeight - scrollTop - clientHeight;
+              // Sub-pixel tolerance: fractional scroll positions can leave delta at e.g. 0.5
+              // even when the user is visually at the bottom.
+              const pinned = Math.abs(delta) <= 1;
+              setPinned(pinned);
+              if (!pinned) {
+                view.dispatch({ effects: crawlerActiveEffect.of({ active: false }) });
+              }
+            });
+          }, 500);
+
+          this.cleanup = createUserScrollDetector(view.scrollDOM, () => {
+            if (isPinned) {
+              setPinned(false);
+              view.dispatch({ effects: crawlerActiveEffect.of({ active: false }) });
+            }
+            onUserScroll();
+          });
+        }
+        destroy() {
+          this.cleanup();
+        }
+      },
+    ),
+
+    // Scroll button.
+    ViewPlugin.fromClass(
+      class {
+        constructor(view: EditorView) {
+          const icon = Domino.of('dx-icon' as any)
+            .classNames(getSize(4))
+            .attributes({ icon: 'ph--arrow-down--regular' });
+          const button = Domino.of('button')
+            .classNames('dx-button bg-accent-bg')
+            .attributes({ 'data-density': 'md' })
+            .append(icon)
+            .on('click', () => {
+              setPinned(true);
+              view.dispatch({
+                effects: [
+                  crawlerLineEffect.of({ line: -1, position: 'end', behavior: 'smooth' }),
+                  // Re-engage the follower so it keeps tracking the bottom as content continues
+                  // to stream after the catch-up jump.
+                  crawlerActiveEffect.of({ active: true, instant: !streamed }),
+                ],
+              });
+            });
+
+          buttonContainer = Domino.of('div')
+            .classNames('cm-scroll-button transition-opacity duration-300 opacity-0 z-1')
+            .append(button).root as HTMLDivElement;
+
+          view.scrollDOM.parentElement!.appendChild(buttonContainer);
+        }
+      },
+    ),
+  ];
+};
+
+/**
+ * Attaches listeners to detect genuine user-initiated scrolling on an element.
+ * Two sources are covered:
+ *   - `wheel`: fires only from physical mouse wheel / trackpad gestures.
+ *   - `pointerdown` on the scrollbar gutter: detected by comparing clientX to
+ *     the element's clientWidth (the content area, excluding the scrollbar).
+ * Returns a cleanup function that removes the listeners.
+ */
+// TODO(burdon): Still jumps when widgets are rendered.
+// - Track position of specific element/line in document and scroll relative to that.
+function createUserScrollDetector(element: HTMLElement, onUserScroll: () => void): () => void {
+  return combine(
+    addEventListener(element, 'wheel', () => onUserScroll(), { passive: true }),
+    addEventListener(element, 'pointerdown', (event) => {
+      // If the pointer lands beyond the content width it hit the scrollbar gutter.
+      if (event.clientX > element.getBoundingClientRect().right - (element.offsetWidth - element.clientWidth)) {
+        onUserScroll();
+      }
+    }),
+  );
+}

package/src/extensions/{scroller.ts → scrolling/crawler.ts}

@@ -40,10 +40,15 @@ export type ScrollToProps = {
 };
 
 /** Scroll to a specific line. */
-export const scrollerLineEffect = StateEffect.define<ScrollToProps>();
+export const crawlerLineEffect = StateEffect.define<ScrollToProps>();
 
-/** Start/stop crawling the end of the document. */
-export const scrollerCrawlEffect = StateEffect.define<boolean>();
+/**
+ * Start/stop crawling the end of the document.
+ * `instant: true` snaps to the bottom each frame (no easing) — used for non-streaming height
+ * growth (e.g. widgets measuring when a populated thread is first opened); the default eases
+ * with the spring for live streaming.
+ */
+export const crawlerActiveEffect = StateEffect.define<{ active: boolean; instant?: boolean }>();
 
 /**
  * Helper function to scroll to a specific line.
@@ -51,22 +56,29 @@ export const scrollerCrawlEffect = StateEffect.define<boolean>();
  */
 export const scrollToLine = (view: EditorView, options: ScrollToProps) => {
   view.dispatch({
-    effects: scrollerLineEffect.of(options),
+    effects: crawlerLineEffect.of(options),
   });
 };
 
-export type ScrollerOptions = {
+export type CrawlerOptions = {
   /** Threshold in px to trigger scroll from bottom. */
   overScroll?: number;
 };
 
 /**
- * Extension that provides smooth scrolling to specific lines in the editor.
+ * Imperative scroll-control primitive for streaming editor views.
+ *
+ * Owns the scroll-related effects (`crawlerLineEffect`, `crawlerActiveEffect`), the spring
+ * crawler that follows the bottom of the document, and the `.cm-scroller` theme (overflow,
+ * scrollbar styling, and the `::after` overscroll spacer).
+ *
+ * Use directly for jump-to-line navigation, or pair with `autoScroll` for a pin-to-bottom
+ * streaming policy. The composite `streamScroll` bundles both for the common case.
  */
-export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
+export const crawler = ({ overScroll = 0 }: CrawlerOptions = {}) => {
   // ViewPlugin to manage scroll animations.
-  const scrollPlugin = ViewPlugin.fromClass(
-    class ScrollerPlugin {
+  const crawlerPlugin = ViewPlugin.fromClass(
+    class CrawlerPlugin {
       private readonly crawler: ReturnType<typeof createCrawler>;
       constructor(private readonly view: EditorView) {
         this.crawler = createCrawler(this.view);
@@ -81,9 +93,9 @@ export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
         this.crawler.cancel();
       }
 
-      crawl(start = false) {
-        if (start) {
-          this.crawler.scroll();
+      crawl({ active, instant }: { active: boolean; instant?: boolean } = { active: false }) {
+        if (active) {
+          this.crawler.scroll(instant);
         } else {
           this.crawler.cancel();
         }
@@ -126,18 +138,18 @@ export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
   );
 
   return [
-    scrollPlugin,
+    crawlerPlugin,
 
-    // Listen for effect.s
+    // Listen for effect.
     EditorView.updateListener.of((update) => {
       update.transactions.forEach((transaction) => {
         try {
-          const plugin = update.view.plugin(scrollPlugin);
+          const plugin = update.view.plugin(crawlerPlugin);
           if (plugin) {
             for (const effect of transaction.effects) {
-              if (effect.is(scrollerCrawlEffect)) {
+              if (effect.is(crawlerActiveEffect)) {
                 plugin.crawl(effect.value);
-              } else if (effect.is(scrollerLineEffect)) {
+              } else if (effect.is(crawlerLineEffect)) {
                 plugin.scroll(effect.value);
               }
             }
@@ -150,13 +162,13 @@ export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
 
     // Styles.
     EditorView.theme({
-      '.cm-content': {
-        paddingBottom: `${overScroll}px`,
-      },
       '.cm-scroller': {
         overflowY: 'scroll',
-        overflowAnchor: 'none',
-        paddingBottom: '0',
+        // Browser scroll-anchoring: when widgets above the viewport resize (e.g. tool blocks
+        // expanding their TogglePanel), the browser picks a stable element near the viewport
+        // top and adjusts `scrollTop` so the user's view doesn't jump. Auto-scroll's pinning
+        // logic still has the final word when pinned (forces scrollTop to scrollHeight).
+        overflowAnchor: 'auto',
       },
       '.cm-scroller.cm-hide-scrollbar::-webkit-scrollbar': {
         display: 'none',
@@ -168,6 +180,16 @@ export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
       '&:hover .cm-scroller::-webkit-scrollbar-thumb': {
         background: 'var(--color-scrollbar-thumb)',
       },
+      // Spacer below the last text line. Implemented as a real block pseudo-element
+      // (rather than `padding-bottom` on `.cm-content`) so it materializes in the
+      // scroller's `scrollHeight` regardless of how `padding` is reset by the base
+      // theme or downstream classes — this is what gives auto-scroll its head-room
+      // so the last line stays `overScroll` px above the viewport bottom.
+      '.cm-content::after': {
+        content: '""',
+        display: 'block',
+        height: `${overScroll}px`,
+      },
       '.cm-scroll-button': {
         position: 'absolute',
         bottom: '0.5rem',
@@ -180,65 +202,84 @@ export const scroller = ({ overScroll = 0 }: ScrollerOptions = {}) => {
 /**
  * Creates a smooth crawler that follows the live bottom of a CodeMirror 6 EditorView.
  *
- * Uses a velocity-based approach with easing:
- * - Accelerates smoothly when content starts arriving.
- * - Maintains a steady cruise velocity during continuous streaming.
- * - Decelerates smoothly when content stops arriving.
+ * Uses a critically-damped spring: each frame applies a restoring force toward the
+ * target and a damping force opposing current velocity. With damping = 2·ω, the
+ * system is critically damped — fastest approach without overshoot. The spring
+ * naturally sprints when far behind and eases as it approaches, so streaming
+ * content is followed tightly without the jerk of explicit accel/decel state.
+ *
+ * Integration uses real elapsed wall-clock time so the perceived speed stays
+ * constant when requestAnimationFrame is throttled (e.g. low-power mode dropping
+ * from 60Hz to 30Hz).
  *
- * @param accel Acceleration in px/frame^2 for ease-in/ease-out.
- * @param maxVelocity Maximum scroll velocity in px/frame.
- * @param snapThreshold Snap-to-target threshold in px.
+ * @param omega Spring stiffness in rad/s. Higher = snappier follow. ~12–18 feels good.
+ * @param snapThreshold Snap-to-target distance threshold in px.
+ * @param snapVelocity Snap-to-target velocity threshold in px/s.
  */
-export function createCrawler(view: EditorView, accel = 0.15, maxVelocity = 1, snapThreshold = 0.5) {
+export function createCrawler(view: EditorView, omega = 5, snapThreshold = 5, snapVelocity = 50) {
   const el = view.scrollDOM;
 
   let currentTop = 0;
   let velocity = 0;
   let rafId: number | null = null;
+  let lastTime = 0;
+  let instant = false;
+
+  function frame(now: number) {
+    // Clamp dt to handle long pauses (tab backgrounded) and the first frame.
+    const dt = lastTime === 0 ? 1 / 60 : Math.min(0.1, (now - lastTime) / 1000);
+    lastTime = now;
 
-  function frame() {
     const targetTop = el.scrollHeight - el.clientHeight;
     const delta = targetTop - currentTop;
-    const absDelta = Math.abs(delta);
 
-    if (absDelta < snapThreshold && Math.abs(velocity) < snapThreshold) {
+    // Instant mode: snap to the bottom each frame (no easing) and keep following while the
+    // height is still growing (e.g. widgets measuring on open), stopping once it stabilizes.
+    if (instant) {
       el.scrollTop = targetTop;
       currentTop = targetTop;
       velocity = 0;
-      rafId = null;
+      if (Math.abs(delta) < snapThreshold) {
+        rafId = null;
+        lastTime = 0;
+        return;
+      }
+      rafId = requestAnimationFrame(frame);
       return;
     }
 
-    // Stopping distance at current velocity: v^2 / (2 * accel).
-    const stoppingDistance = (velocity * velocity) / (2 * accel);
-    const direction = Math.sign(delta);
-
-    if (velocity !== 0 && (absDelta <= stoppingDistance || direction !== Math.sign(velocity))) {
-      // Decelerate: close enough to target or moving the wrong way.
-      velocity -= Math.sign(velocity) * Math.min(accel, Math.abs(velocity));
-    } else {
-      // Accelerate toward target, capped at maxVelocity.
-      velocity += direction * accel;
-      velocity = Math.sign(velocity) * Math.min(Math.abs(velocity), maxVelocity);
+    if (Math.abs(delta) < snapThreshold && Math.abs(velocity) < snapVelocity) {
+      el.scrollTop = targetTop;
+      currentTop = targetTop;
+      velocity = 0;
+      rafId = null;
+      lastTime = 0;
+      return;
     }
 
-    currentTop += velocity;
+    // Critically-damped spring: a = ω²·delta − 2ω·v.
+    const accel = omega * omega * delta - 2 * omega * velocity;
+    velocity += accel * dt;
+    currentTop += velocity * dt;
     el.scrollTop = currentTop;
     rafId = requestAnimationFrame(frame);
   }
 
   return {
-    scroll: () => {
+    scroll: (useInstant = false) => {
+      instant = useInstant;
       if (rafId === null) {
         currentTop = el.scrollTop;
+        lastTime = 0;
         rafId = requestAnimationFrame(frame);
       }
     },
     cancel: () => {
       if (rafId !== null) {
         cancelAnimationFrame(rafId);
-        rafId = null;
         velocity = 0;
+        lastTime = 0;
+        rafId = null;
       }
     },
   };

package/src/extensions/scrolling/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './auto-scroll';
+export * from './crawler';
+export * from './scroll-past-end';
+export * from './scrollbar-autohide';
+export * from './scroller';

package/src/extensions/{scroll-past-end.ts → scrolling/scroll-past-end.ts}

@@ -12,15 +12,15 @@ import { EditorView, ViewPlugin } from '@codemirror/view';
  */
 const scrollPastEndPlugin = ViewPlugin.fromClass(
   class {
-    height = 1000;
-    attrs: { style: string } | null = { style: 'padding-bottom: 1000px' };
+    _height = 1_000;
+    _attrs: { style: string } | null = { style: `padding-bottom: ${this._height}px` };
 
     update({ view }: { view: EditorView }) {
       const lastLineBlock = view.lineBlockAt(view.state.doc.length);
       const height = view.dom.clientHeight - lastLineBlock.height - view.documentPadding.top - 0.5;
-      if (height >= 0 && height !== this.height) {
-        this.height = height;
-        this.attrs = { style: `padding-bottom: ${height}px` };
+      if (height >= 0 && height !== this._height) {
+        this._height = height;
+        this._attrs = { style: `padding-bottom: ${height}px` };
       }
     }
   },
@@ -28,5 +28,5 @@ const scrollPastEndPlugin = ViewPlugin.fromClass(
 
 export const scrollPastEnd = (): Extension => [
   scrollPastEndPlugin,
-  EditorView.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?.attrs ?? null),
+  EditorView.contentAttributes.of((view) => view.plugin(scrollPastEndPlugin)?._attrs ?? null),
 ];

package/src/extensions/scrolling/scrollbar-autohide.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+
+export type ScrollbarAutohideOptions = {
+  /**
+   * Milliseconds of scroll inactivity before the scrollbar fades out again.
+   * @default 800
+   */
+  timeout?: number;
+};
+
+/**
+ * macOS-style overlay scrollbar: the thumb is hidden until the user scrolls, then fades out after a
+ * short idle `timeout`. Opt-in — include it in the editor's extension list. Independent of the
+ * default hover behaviour in the base theme (which still reveals the thumb on hover).
+ */
+export const scrollbarAutohide = ({ timeout = 800 }: ScrollbarAutohideOptions = {}): Extension => [
+  ViewPlugin.fromClass(
+    // NOTE: Uses TS `private`/plain fields rather than ES `#private`. CodeMirror's plugin lifecycle
+    // (and the source/prebundled double-load in dev) can invoke `destroy` with a `this` that the
+    // WeakMap-based `#private` transpilation rejects ("private field on non-instance"), crashing
+    // editor teardown. Plain fields avoid the membership check.
+    class {
+      private readonly _scroller: HTMLElement;
+      private _timer?: ReturnType<typeof setTimeout>;
+
+      constructor(view: EditorView) {
+        this._scroller = view.scrollDOM;
+        this._scroller.addEventListener('scroll', this._handleScroll, { passive: true });
+      }
+
+      destroy(): void {
+        this._scroller.removeEventListener('scroll', this._handleScroll);
+        clearTimeout(this._timer);
+        this._scroller.classList.remove('cm-scrolling');
+      }
+
+      // Show the thumb while scrolling; remove the class once scrolling has been idle for `timeout`.
+      private readonly _handleScroll = (): void => {
+        this._scroller.classList.add('cm-scrolling');
+        clearTimeout(this._timer);
+        this._timer = setTimeout(() => this._scroller.classList.remove('cm-scrolling'), timeout);
+      };
+    },
+  ),
+  EditorView.theme({
+    // Reveal the thumb only while actively scrolling.
+    '.cm-scroller.cm-scrolling::-webkit-scrollbar-thumb': {
+      background: 'var(--color-scrollbar-thumb)',
+    },
+    // Suppress the base theme's hover-reveal (higher specificity via `:not(.cm-scrolling)`), so a
+    // hovered/focused-but-idle editor keeps the thumb hidden.
+    '&:hover .cm-scroller:not(.cm-scrolling)::-webkit-scrollbar-thumb': {
+      background: 'transparent',
+    },
+  }),
+];

package/src/extensions/scrolling/scroller.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+
+import { isTruthy } from '@dxos/util';
+
+import { type AutoScrollProps, autoScroll as autoScrollExtension } from './auto-scroll';
+import { type CrawlerOptions, crawler } from './crawler';
+
+export type ScrollerOptions = CrawlerOptions &
+  AutoScrollProps & {
+    /**
+     * Include the auto-scroll policy (pin-to-bottom, user-scroll unpin, scroll-to-bottom button).
+     * Set to `false` to get only the crawler primitive (line jumps, theme, overscroll spacer).
+     * @default true
+     */
+    autoScroll?: boolean;
+  };
+
+/**
+ * Composite scroll extension for streaming editor views (chat threads, transcripts, logs).
+ */
+export const scroller = ({ overScroll, scrollOnResize, autoScroll = true }: ScrollerOptions = {}): Extension[] => {
+  return [crawler({ overScroll }), autoScroll && autoScrollExtension({ scrollOnResize })].filter(isTruthy);
+};