react-native-agenda-kit 0.1.0

package/src/agenda/AgendaList.tsx

@@ -0,0 +1,370 @@
+/**
+ * The agenda: one `Animated.ScrollView`, absolute slots over a declared layout,
+ * a skeleton backdrop behind it and the stuck header over it.
+ *
+ * Compat with the react-native-calendars screen's `AgendaList` JSX, plus two things the library
+ * only pretended to do: real sticky headers and real pull-to-refresh.
+ */
+
+import {
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { RefreshControl, StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+import Animated, {
+  scrollTo,
+  useAnimatedReaction,
+  useAnimatedRef,
+  useSharedValue,
+  type AnimatedRef,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { runOnJS, scheduleOnUI } from 'react-native-worklets';
+import { useKitTheme } from '../theme';
+import { useCalendarContext } from '../core/CalendarContext';
+import { clampIndex, dayIndexOf } from '../core/dateKey';
+import { bsearchLE } from '../core/worklets';
+import type { AgendaListProps, DateString, MoveOrigin } from '../types';
+import { AgendaBackdrop } from './AgendaBackdrop';
+import { AgendaWindow } from './AgendaWindow';
+import { buildAgendaLayout, type AgendaRowRef } from './buildAgendaLayout';
+import { BUCKET_REST } from './constants';
+import { StickyHeaderOverlay, type StickyInputs } from './StickyHeaderOverlay';
+import { useAgendaScrollSync, type AgendaTables } from './useAgendaScrollSync';
+
+const MY_ORIGIN: MoveOrigin = 'agenda';
+const EMPTY_TABLES: AgendaTables = { offsets: [], sectionOffset: [], sectionStart: [], monthOfSection: [] };
+
+const defaultGetItemType = (item: unknown): string =>
+  (item as { itemCustomHeightType?: string })?.itemCustomHeightType ?? 'Regular';
+
+const defaultKeyExtractor = (item: unknown, index: number): string =>
+  (item as { id?: string })?.id ?? `row-${index}`;
+
+/** Every scroll this list issues goes through here; see `programmaticY` in the sync. */
+const scrollListTo = (
+  ref: AnimatedRef<Animated.ScrollView>,
+  programmaticY: SharedValue<number>,
+  moving: SharedValue<number>,
+  y: number,
+  animated: boolean,
+) => {
+  'worklet';
+  moving.value = 0;
+  programmaticY.value = animated ? y : -1;
+  scrollTo(ref, 0, y, animated);
+};
+
+type Range = { first: number; last: number };
+const AgendaListInner = <T,>({
+  sections,
+  renderItem,
+  renderSectionHeader,
+  itemHeightByType,
+  sectionHeaderHeight = 32,
+  getItemType = defaultGetItemType,
+  keyExtractor = defaultKeyExtractor,
+  stickySectionHeadersEnabled = false,
+  refreshing = false,
+  onRefresh,
+  decelerationRate = 0.985,
+  backdrop,
+  rowGroundColor,
+  ref,
+  onDragBegin,
+  onSettle,
+}: AgendaListProps<T>) => {
+  const { colors } = useKitTheme();
+  const { range, store, dateRef, setDate, commitDate, reduceMotion } = useCalendarContext();
+  const listRef = useAnimatedRef<Animated.ScrollView>();
+
+  const headerIntern = useRef(new Map<DateString, Extract<AgendaRowRef<T>, { kind: 'header' }>>());
+  const heightForType = useCallback(
+    (type: string) => itemHeightByType[type] ?? itemHeightByType.Regular ?? 0,
+    [itemHeightByType],
+  );
+  const layout = useMemo(
+    () =>
+      buildAgendaLayout<T>({
+        sections,
+        sectionHeaderHeight,
+        heightForType,
+        getItemType,
+        keyExtractor,
+        headerIntern: headerIntern.current,
+      }),
+    [sections, sectionHeaderHeight, heightForType, getItemType, keyExtractor],
+  );
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+
+  const tablesSV = useSharedValue<AgendaTables>(EMPTY_TABLES);
+  const viewportSV = useSharedValue(0);
+
+  // Mount at the committed day with zero scroll: `contentOffset` is honoured on
+  // the first frame (M0), and the first window already holds its rows.
+  const [initialSection] = useState(() => clampIndex(range, dayIndexOf(range, dateRef.current)));
+  const [initialOffset] = useState(() => layout.sectionOffset[initialSection] ?? 0);
+  const [contentOffset] = useState(() => ({ x: 0, y: initialOffset }));
+  const [windowRange, setWindowRange] = useState<Range>(() => {
+    const row = layout.sectionStart[initialSection] ?? 0;
+    return { first: Math.max(0, row - BUCKET_REST), last: row + 4 * BUCKET_REST };
+  });
+  const [fastMotion, setFastMotion] = useState(false);
+
+  /**
+   * A long programmatic move lands on rows that are not mounted. The destination
+   * slice mounts first, beside the current rows; the jump happens once it exists
+   * and the slice is released by the next window update. No skeleton frames.
+   */
+  const [jumpRange, setJumpRange] = useState<Range | null>(null);
+  const pendingJumpY = useRef<number | null>(null);
+  const releaseJump = useRef(false);
+
+  const onWindowChange = useCallback((first: number, last: number) => {
+    setWindowRange((was) => (was.first === first && was.last === last ? was : { first, last }));
+    if (releaseJump.current) {
+      releaseJump.current = false;
+      setJumpRange(null);
+    }
+  }, []);
+
+  const onCommitDate = useCallback(
+    (idx: number) => commitDate(idx, 'listDrag', MY_ORIGIN),
+    [commitDate],
+  );
+
+  const { scrollY, currentSection, moving, fast, programmaticY, windowFirst, windowLast, scrollHandler, applyOffset } =
+    useAgendaScrollSync({
+      tablesSV,
+      viewportSV,
+      headerHeight: sectionHeaderHeight,
+      dayIndex: store.dayIndex,
+      listDragSeq: store.listDragSeq,
+      onWindowChange,
+      onCommitDate,
+      onFastChange: setFastMotion,
+      onDragBegin,
+      onSettle,
+    });
+
+  /**
+   * Publish the tables; if the content changed under a laid-out list, keep the
+   * doctor's day in place — the current section plus how far into it we were —
+   * in the same commit that resizes the content.
+   *
+   * The anchor is computed ON the UI thread, which owns `scrollY` and
+   * `currentSection`: read from JS they can predate a queued re-anchor or
+   * `onLayout`'s seeding, and a rebuild landing in that gap kept the wrong offset.
+   */
+  const prevSectionOffset = useRef<readonly number[] | null>(null);
+  useLayoutEffect(() => {
+    const prev = prevSectionOffset.current;
+    const next = layout.sectionOffset;
+    prevSectionOffset.current = next;
+    tablesSV.value = {
+      offsets: layout.offsets,
+      sectionOffset: layout.sectionOffset,
+      sectionStart: layout.sectionStart,
+      monthOfSection: layout.monthOfSection,
+    };
+    if (prev === null || (prev.length === next.length && prev.every((v, i) => v === next[i]))) return;
+    scheduleOnUI(() => {
+      'worklet';
+      // No viewport yet means no position to keep: `onLayout` anchors on the day.
+      if (viewportSV.value === 0) return;
+      const s = currentSection.value;
+      const from = prev[s];
+      const to = next[s];
+      if (from === undefined || to === undefined) return;
+      const y = to + (scrollY.value - from);
+      if (Math.abs(y - scrollY.value) <= 1) return;
+      scrollListTo(listRef, programmaticY, moving, y, false);
+      // Owned now: the next rebuild may be queued before this scroll's event arrives.
+      scrollY.value = y;
+    });
+  }, [currentSection, layout, listRef, moving, programmaticY, scrollY, tablesSV, viewportSV]);
+
+  const prepareJump = useCallback(
+    (y: number) => {
+      const H = viewportSV.value || 800;
+      const { offsets, rows } = layoutRef.current;
+      pendingJumpY.current = y;
+      setJumpRange({
+        first: bsearchLE(offsets, y - 0.5 * H) & -BUCKET_REST,
+        last: Math.min(rows.length - 1, bsearchLE(offsets, y + 2 * H) | (BUCKET_REST - 1)),
+      });
+    },
+    [viewportSV],
+  );
+
+  // Moves from other surfaces. Our own are ignored: that is the echo-proofing.
+  useAnimatedReaction(
+    () => store.move.value,
+    (m, prev) => {
+      if (!prev || m.seq === prev.seq || m.origin === MY_ORIGIN || viewportSV.value === 0) return;
+      const { offsets, sectionOffset } = tablesSV.value;
+      const y = sectionOffset[m.idx];
+      if (y === undefined) return;
+      const top = offsets[windowFirst.value] ?? 0;
+      const bottom = offsets[windowLast.value + 1] ?? offsets[offsets.length - 1] ?? 0;
+      if (y >= top && y + viewportSV.value <= bottom) scrollListTo(listRef, programmaticY, moving, y, m.animated);
+      else runOnJS(prepareJump)(y);
+    },
+    [prepareJump],
+  );
+
+  useLayoutEffect(() => {
+    const y = pendingJumpY.current;
+    if (jumpRange === null || y === null) return;
+    pendingJumpY.current = null;
+    releaseJump.current = true;
+    scheduleOnUI(() => {
+      'worklet';
+      scrollListTo(listRef, programmaticY, moving, y, false);
+    });
+  }, [jumpRange, listRef, moving, programmaticY]);
+
+  const scrollToY = useCallback(
+    (y: number, animated: boolean) => {
+      const anim = animated && !reduceMotion;
+      scheduleOnUI(() => {
+        'worklet';
+        if (viewportSV.value > 0) scrollListTo(listRef, programmaticY, moving, y, anim);
+      });
+    },
+    [listRef, moving, programmaticY, reduceMotion, viewportSV],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      // Dates outside the window are dropped by design: the section list is a
+      // pure function of the window and must not grow.
+      scrollToDate: (date: DateString, animated = true) => {
+        const idx = layout.sectionByTitle.get(date);
+        if (idx === undefined) return;
+        setDate(date, 'propUpdate', MY_ORIGIN, animated);
+        scrollToY(layout.sectionOffset[idx], animated);
+      },
+      scrollToSection: (title: DateString, animated = true) => {
+        const idx = layout.sectionByTitle.get(title);
+        if (idx !== undefined) scrollToY(layout.sectionOffset[idx], animated);
+      },
+      scrollToOffset: ({ offset, animated = true }) => scrollToY(offset, animated),
+    }),
+    [layout, scrollToY, setDate],
+  );
+
+  const laidOut = useRef(false);
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      viewportSV.value = e.nativeEvent.layout.height;
+      if (laidOut.current) return;
+      laidOut.current = true;
+      const fallback = initialOffset;
+      scheduleOnUI(() => {
+        'worklet';
+        // Anchor on the committed DAY in the tables as they are now, not on the
+        // first render's pixel offset: rows that change between mount and first
+        // layout (shimmer → data) move that day, and the re-anchor above cannot
+        // act without a viewport. The list opened on the right pixel of the wrong
+        // day — 238 px early on the fixture (2026-09-11). Also covers a device
+        // that ignores `contentOffset` on mount.
+        const target = tablesSV.value.sectionOffset[store.dayIndex.value] ?? fallback;
+        if (Math.abs(scrollY.value - target) > 1) scrollListTo(listRef, programmaticY, moving, target, false);
+        // No scroll event follows when the native offset already matches.
+        scrollY.value = target;
+        applyOffset(target, 0);
+      });
+    },
+    [applyOffset, initialOffset, listRef, moving, programmaticY, scrollY, store, tablesSV, viewportSV],
+  );
+
+  const refreshControl = useMemo(
+    () =>
+      onRefresh ? (
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          tintColor={colors.accent}
+          colors={[colors.accent]}
+          progressBackgroundColor={colors.surface}
+        />
+      ) : undefined,
+    [colors.accent, colors.surface, onRefresh, refreshing],
+  );
+
+  const contentStyle = useMemo(() => ({ height: layout.totalHeight }), [layout.totalHeight]);
+  const sticky = useMemo<StickyInputs>(
+    () => ({ scrollY, currentSection, fast, tablesSV }),
+    [currentSection, fast, scrollY, tablesSV],
+  );
+  const titleAt = useCallback((s: number): DateString | undefined => {
+    const { rows, sectionStart } = layoutRef.current;
+    const row = rows[sectionStart[s]];
+    return row?.kind === 'header' ? row.title : undefined;
+  }, []);
+
+  return (
+    <View style={styles.host}>
+      {backdrop ? (
+        <AgendaBackdrop scrollY={scrollY} tileHeight={backdrop.tileHeight} renderTile={backdrop.renderTile} />
+      ) : null}
+      <Animated.ScrollView
+        ref={listRef}
+        onLayout={onLayout}
+        onScroll={scrollHandler}
+        scrollEventThrottle={16}
+        contentOffset={contentOffset}
+        decelerationRate={decelerationRate}
+        refreshControl={refreshControl}
+        removeClippedSubviews
+      >
+        <View style={contentStyle}>
+          <AgendaWindow
+            layout={layout}
+            first={windowRange.first}
+            last={windowRange.last}
+            extraFirst={jumpRange?.first}
+            extraLast={jumpRange?.last}
+            renderItem={renderItem}
+            renderSectionHeader={renderSectionHeader}
+            sections={sections}
+            getItemType={getItemType}
+            fastMotion={fastMotion}
+            deferRows={backdrop !== undefined}
+            groundColor={rowGroundColor}
+            scrollY={scrollY}
+            viewportSV={viewportSV}
+          />
+        </View>
+      </Animated.ScrollView>
+      {stickySectionHeadersEnabled ? (
+        <StickyHeaderOverlay
+          initialSection={initialSection}
+          sectionCount={sections.length}
+          titleAt={titleAt}
+          height={sectionHeaderHeight}
+          sticky={sticky}
+          renderSectionHeader={renderSectionHeader}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+export const AgendaList = memo(AgendaListInner) as typeof AgendaListInner;
+
+const styles = StyleSheet.create({
+  // Clips at the list's own top edge. The sticky overlay's push-up translates its
+  // host — clip and all — out of the list, and the calendar sits right above: an
+  // unclipped host drew the outgoing header over the calendar's knob at every day
+  // crossing, so the knob and its gap flickered (2026-09-11).
+  host: { flex: 1, overflow: 'hidden' },
+});

package/src/agenda/AgendaSlot.tsx

@@ -0,0 +1,88 @@
+/**
+ * One row or header, parked at its declared offset.
+ *
+ * Slots take the row's DATA plus a stable render function, never `children`: a
+ * child element is a new object every parent render, so `memo` would never bail
+ * out and every window commit would re-render every mounted row (M1: p90 69 ms).
+ *
+ * `overflow: 'hidden'` is the safety mechanism: a row taller than its declaration
+ * is clipped in place instead of shifting every offset below it, and the DEV
+ * drift check (`heights.ts`) makes the wrong number loud.
+ */
+
+import { memo, useMemo, type ReactElement } from 'react';
+import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
+import { needsMeasure, reportHeight } from './heights';
+import type { AgendaSection, DateString } from '../types';
+
+type ItemSlotProps<T> = {
+  top: number;
+  height: number;
+  /** Row type — the drift check's key. */
+  type: string;
+  item: T;
+  index: number;
+  section: AgendaSection<T>;
+  renderItem: (info: { item: T; index: number; section: AgendaSection<T> }) => ReactElement | null;
+  /**
+   * Draw nothing: the backdrop shows through. A prop on the same component, never a
+   * different component — changing the element type under a key remounts the row.
+   */
+  deferred: boolean;
+  groundColor?: string;
+};
+
+const AgendaItemSlotInner = <T,>({
+  top,
+  height,
+  type,
+  item,
+  index,
+  section,
+  renderItem,
+  deferred,
+  groundColor,
+}: ItemSlotProps<T>) => {
+  const style = useMemo(
+    () => [styles.slot, { top, height, backgroundColor: deferred ? undefined : groundColor }],
+    [deferred, groundColor, height, top],
+  );
+  if (deferred) return null;
+
+  const content = renderItem({ item, index, section });
+  if (__DEV__ && needsMeasure(type, height)) {
+    // Measure the CHILD: the slot is `height` by construction.
+    const onLayout = (e: LayoutChangeEvent) => reportHeight(type, height, e.nativeEvent.layout.height);
+    return (
+      <View style={style}>
+        <View onLayout={onLayout}>{content}</View>
+      </View>
+    );
+  }
+  return <View style={style}>{content}</View>;
+};
+
+export const AgendaItemSlot = memo(AgendaItemSlotInner) as typeof AgendaItemSlotInner;
+
+type HeaderSlotProps = {
+  top: number;
+  height: number;
+  title: DateString;
+  renderSectionHeader: (title: DateString) => ReactElement | null;
+  groundColor?: string;
+};
+
+export const AgendaHeaderSlot = memo(
+  ({ top, height, title, renderSectionHeader, groundColor }: HeaderSlotProps) => {
+    const style = useMemo(
+      () => [styles.slot, { top, height, backgroundColor: groundColor }],
+      [groundColor, height, top],
+    );
+    return <View style={style}>{renderSectionHeader(title)}</View>;
+  },
+);
+AgendaHeaderSlot.displayName = 'AgendaHeaderSlot';
+
+const styles = StyleSheet.create({
+  slot: { position: 'absolute', left: 0, right: 0, overflow: 'hidden' },
+});

package/src/agenda/AgendaWindow.tsx

@@ -0,0 +1,183 @@
+/**
+ * The mounted slice of the list, keyed by row.
+ *
+ * DO NOT RECYCLE. A slot pool was built twice and measured worse on the device
+ * (p99 300 → 1000–1550 ms): keyed by row, a row that stays in the window has
+ * identical props and `memo` makes it free; a pool hands slots new rows and forces
+ * a full prop diff across every card.
+ *
+ * DO NOT KEEP ROWS MOUNTED "to avoid recreating them". Measured in release on the
+ * SM-F415F (2026-09-11): a grow-only window doubled the mounted views and took slow
+ * draw frames from ~180 to ~900 per 12 flings (p50 27 → 37 ms); pre-mounting the
+ * whole range (5,000 views, +130 MB) put every frame above 60 ms. Every mounted row
+ * costs frame time, on screen or not — the window stays tight.
+ *
+ * Deferral (only with a backdrop): a row ENTERING the window while the list is
+ * fast renders nothing and the backdrop shows through; a row already drawn stays
+ * drawn. When fast motion ends, deferred rows are released nearest the viewport
+ * first — every visible row in one batch, then a batch per frame — as transitions,
+ * so a new drag's window commit never waits behind them.
+ */
+
+import { memo, startTransition, useEffect, useLayoutEffect, useRef, useState, type ReactElement } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import { bsearchLE } from '../core/worklets';
+import type { AgendaSection, DateString } from '../types';
+import { AgendaHeaderSlot, AgendaItemSlot } from './AgendaSlot';
+import type { AgendaLayout } from './buildAgendaLayout';
+import { UPGRADE_BATCH } from './constants';
+
+const NO_KEYS: ReadonlySet<string> = new Set();
+
+type Props<T> = {
+  layout: AgendaLayout<T>;
+  first: number;
+  last: number;
+  /** A second slice mounted while a long programmatic jump is pending — its rows exist before the list moves. */
+  extraFirst?: number;
+  extraLast?: number;
+  renderItem: (info: { item: T; index: number; section: AgendaSection<T> }) => ReactElement | null;
+  renderSectionHeader: (title: DateString) => ReactElement | null;
+  sections: AgendaSection<T>[];
+  getItemType: (item: T) => string;
+  fastMotion: boolean;
+  deferRows: boolean;
+  groundColor?: string;
+  scrollY: SharedValue<number>;
+  viewportSV: SharedValue<number>;
+};
+
+const AgendaWindowInner = <T,>({
+  layout,
+  first,
+  last,
+  extraFirst,
+  extraLast,
+  renderItem,
+  renderSectionHeader,
+  sections,
+  getItemType,
+  fastMotion,
+  deferRows,
+  groundColor,
+  scrollY,
+  viewportSV,
+}: Props<T>) => {
+  const { rows, offsets, heights } = layout;
+  const start = Math.max(0, first);
+  const end = Math.min(last, rows.length - 1);
+
+  /** Rows deferred in the last commit, and the window that commit drew. */
+  const heldRef = useRef<ReadonlySet<string>>(NO_KEYS);
+  const drawnRef = useRef({ layout, start: 0, end: -1 });
+  const [released, setReleased] = useState<ReadonlySet<string>>(NO_KEYS);
+
+  const prev = drawnRef.current;
+  const sameLayout = prev.layout === layout;
+  const held = heldRef.current;
+  let nextHeld: Set<string> | null = null;
+  const slots: ReactElement[] = [];
+
+  const pushRow = (i: number) => {
+    const row = rows[i];
+    if (row.kind === 'header') {
+      slots.push(
+        <AgendaHeaderSlot
+          key={row.key}
+          top={offsets[i]}
+          // The layout's pixel-snapped height, not the declared constant: with the
+          // constant, a header ending a fraction short of the next row's top left a
+          // hairline of backdrop between them.
+          height={heights[i]}
+          title={row.title}
+          renderSectionHeader={renderSectionHeader}
+          groundColor={groundColor}
+        />,
+      );
+      return;
+    }
+    let deferred = false;
+    if (deferRows) {
+      deferred = held.has(row.key)
+        ? fastMotion || !released.has(row.key)
+        : fastMotion && !(sameLayout && i >= prev.start && i <= prev.end);
+      if (deferred) (nextHeld ??= new Set()).add(row.key);
+    }
+    slots.push(
+      <AgendaItemSlot
+        key={row.key}
+        top={offsets[i]}
+        height={heights[i]}
+        type={getItemType(row.item)}
+        item={row.item}
+        index={row.indexInSection}
+        section={sections[row.section]}
+        renderItem={renderItem}
+        deferred={deferred}
+        groundColor={groundColor}
+      />,
+    );
+  };
+
+  for (let i = start; i <= end; i += 1) pushRow(i);
+  if (extraFirst !== undefined && extraLast !== undefined) {
+    const xEnd = Math.min(extraLast, rows.length - 1);
+    for (let i = Math.max(0, extraFirst); i <= xEnd; i += 1) {
+      if (i < start || i > end) pushRow(i);
+    }
+  }
+
+  const heldNow: ReadonlySet<string> = nextHeld ?? NO_KEYS;
+  // Committed in a layout effect, so a render React discards cannot leave the
+  // refs describing rows that never mounted.
+  useLayoutEffect(() => {
+    heldRef.current = heldNow;
+    drawnRef.current = { layout, start, end };
+  });
+
+  const hasHeld = heldNow.size > 0;
+  useEffect(() => {
+    if (fastMotion || !hasHeld) return;
+    const { layout: l, start: s, end: e } = drawnRef.current;
+    const y = scrollY.value;
+    const top = bsearchLE(l.offsets, y);
+    const bottom = bsearchLE(l.offsets, y + viewportSV.value);
+    const focus = (top + bottom) >> 1;
+
+    // Sorted ONCE; each frame then only pops a batch.
+    const queue: string[] = [];
+    const distance: number[] = [];
+    let visible = 0;
+    for (let i = s; i <= e; i += 1) {
+      const row = l.rows[i];
+      if (row.kind !== 'item' || !heldRef.current.has(row.key)) continue;
+      queue.push(row.key);
+      distance.push(Math.abs(i - focus));
+      if (i >= top && i <= bottom) visible += 1;
+    }
+    const order = queue.map((_, k) => k).sort((a, b) => distance[a] - distance[b]);
+
+    let cursor = 0;
+    let frame = 0;
+    const releaseNext = () => {
+      const n = cursor === 0 ? Math.max(UPGRADE_BATCH, visible) : UPGRADE_BATCH;
+      const batch = order.slice(cursor, cursor + n).map((k) => queue[k]);
+      const isFirst = cursor === 0;
+      cursor += n;
+      startTransition(() => {
+        setReleased((was) => {
+          const next = new Set(isFirst ? NO_KEYS : was);
+          for (const key of batch) next.add(key);
+          return next;
+        });
+      });
+      if (cursor < order.length) frame = requestAnimationFrame(releaseNext);
+    };
+    frame = requestAnimationFrame(releaseNext);
+    return () => cancelAnimationFrame(frame);
+  }, [fastMotion, hasHeld, scrollY, viewportSV]);
+
+  return <>{slots}</>;
+};
+
+export const AgendaWindow = memo(AgendaWindowInner) as typeof AgendaWindowInner;