@symbiote-native/vue 0.3.6 → 0.3.8

package/build/components/scroll-view/shared.js

@@ -19,7 +19,7 @@
 // onScroll composition (native attach vs Animated.event) all live here; the per-header component and
 // the children wrap live in scroll-view-sticky-header.ts (the Vue twin of the React file).
 import { defineComponent, h, isVNode, markRaw, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
-import { attachStickyScroll, buildScrollViewHandle, didContentSizeChange, forwardScrollEvent, readLayoutDimension, resolveAccessibilityProps, resolveDecelerationRate, selectScrollIntrinsics, } from '@symbiote-native/components';
+import { attachStickyScroll, buildScrollViewHandle, didContentSizeChange, forwardScrollEvent, readLayoutDimension, resolveAccessibilityProps, resolveDecelerationRate, resolveScrollForwarding, selectScrollIntrinsics, } from '@symbiote-native/components';
 import { AnimatedValue, dlog, event as animatedEvent, isClassNameValue, isNativeAnimatedAvailable, isSymbioteNode, resolveClassName, } from '@symbiote-native/engine';
 import { wrapStickyHeaders } from './sticky-header.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
@@ -196,31 +196,37 @@ export function createScrollView(platform) {
                 outerProps.decelerationRate = resolveDecelerationRate(decel);
             // onScroll: when sticky headers are active, the offset must reach the AnimatedValue. RN does
             // the same with _scrollAnimatedValueAttachment. forwardAttrs already put the user's onScroll /
-            // onLayout / scrollEventThrottle on outerProps; here we override them for the sticky branch.
+            // onLayout / scrollEventThrottle on outerProps; here we override them per the shared
+            // resolveScrollForwarding DECISIONS (which path, the 1/16 throttle defaults, inverted capture).
             const nativeStickyAvailable = hasStickyHeaders && isNativeAnimatedAvailable();
             nativeStickyWanted = nativeStickyAvailable;
+            const userThrottle = typeof attrs.scrollEventThrottle === 'number' ? attrs.scrollEventThrottle : undefined;
+            const forwarding = resolveScrollForwarding({
+                hasStickyHeaders,
+                nativeStickyAvailable,
+                invertStickyHeaders,
+                scrollEventThrottle: userThrottle,
+                maintainVisibleContentPosition: attrs.maintainVisibleContentPosition,
+                snapToAlignment: attrs.snapToAlignment,
+            });
             if (hasStickyHeaders) {
                 const userOnScroll = isHandler(attrs.onScroll) ? attrs.onScroll : undefined;
-                const userThrottle = typeof attrs.scrollEventThrottle === 'number' ? attrs.scrollEventThrottle : undefined;
-                if (nativeStickyAvailable) {
-                    // Native path (RN attachNativeEvent): the scroll value is driven on the UI thread by the
-                    // post-commit watch above, so onScroll only forwards to the user: zero JS per frame. RN
-                    // uses throttle 1 when sticky (ScrollView.js:1798); the native driver can afford it. The
-                    // user onScroll is already on outerProps via forwardAttrs.
-                    outerProps.scrollEventThrottle = userThrottle ?? 1;
-                }
-                else {
+                if (forwarding.mode === 'sticky-js') {
                     // JS fallback (no native module): Animated.event drives the value each frame and forwards
                     // the user's handler as the listener passthrough. Correct, but lags a frame under fast
-                    // scroll (the jitter), which the native path above removes on a real host.
+                    // scroll (the jitter), which the native path removes on a real host.
                     outerProps.onScroll = animatedEvent([{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }], userOnScroll === undefined
                         ? undefined
                         : { listener: (...args) => forwardScrollEvent(userOnScroll, args) });
-                    outerProps.scrollEventThrottle = userThrottle ?? 16;
+                }
+                // Native path: the value is driven on the UI thread by the post-commit watch above, so the
+                // user onScroll (already on outerProps via forwardAttrs) forwards untouched, zero JS/frame.
+                if (forwarding.scrollEventThrottle !== undefined) {
+                    outerProps.scrollEventThrottle = forwarding.scrollEventThrottle;
                 }
                 // onLayout on the scroll-view node: capture the viewport height for inverted sticky headers
                 // (RN _handleLayout), then call the user's handler. Non-inverted leaves onLayout as forwarded.
-                if (invertStickyHeaders === true) {
+                if (forwarding.capturesViewportHeight) {
                     const userOnLayout = isHandler(attrs.onLayout) ? attrs.onLayout : undefined;
                     outerProps.onLayout = (event) => {
                         const height = readLayoutDimension(event, 'height');
@@ -238,8 +244,7 @@ export function createScrollView(platform) {
             // false also preserves the cell views maintainVisibleContentPosition / snapToAlignment
             // anchor against (RN preserveChildren). iOS never flattens; both are no-ops there.
             const contentProps = { style: contentStyle, collapsable: false };
-            if (attrs.maintainVisibleContentPosition !== undefined ||
-                attrs.snapToAlignment !== undefined) {
+            if (forwarding.collapsableChildren) {
                 contentProps.collapsableChildren = false;
             }
             // contentSizeChange is synthesized from the content view's own onLayout (RN

package/build/components/scroll-view/sticky-header.js

@@ -11,9 +11,9 @@
 // @symbiote-native/components (computeStickyInterpolation); this file holds the Vue component
 // shell, the layout state, and the child-wrapping. Render shared verbatim with React via the math.
 // Vue supplies only the reactive lifecycle (refs/watch instead of useState/useEffect).
-import { defineComponent, h, isVNode, ref, shallowRef, watch, watchEffect, markRaw, } from '@vue/runtime-core';
+import { defineComponent, h, isVNode, onBeforeUnmount, ref, shallowRef, watchEffect, markRaw, } from '@vue/runtime-core';
 import { AnimatedValue, AnimatedInterpolation, Platform, dlog, } from '@symbiote-native/engine';
-import { computeStickyInterpolation, nextStickyHeaderY, readLayoutNumber, stickyDebounceMs, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
+import { createInitialStickyState, nextStickyHeaderY, readLayoutNumber, reduceSticky, STICKY_HEADER_Z_INDEX, } from '@symbiote-native/components';
 import { Animated } from '../../modules/animated/index.js';
 function isHandler(value) {
     return typeof value === 'function';
@@ -49,79 +49,95 @@ export const ScrollViewStickyHeader = defineComponent({
         const scrollAnimatedValue = isAnimatedValue(attrs.scrollAnimatedValue)
             ? attrs.scrollAnimatedValue
             : markRaw(new AnimatedValue(0));
-        const measured = ref(false);
-        const layoutY = ref(0);
-        const layoutHeight = ref(0);
-        // The animated node that drives the transform (RN's animatedTranslateY). When the scroll value
-        // is native (attachStickyScroll), this interpolation runs on the UI thread: the smooth pin.
-        // Engine node → shallowRef (held by identity, the reactivity rule); the un-measured identity
-        // stub until the effect below rebuilds it.
+        // The one folded state cell, mutated in place by reduceSticky. A plain object (NOT a ref /
+        // reactive): the render reads it gated by the reactive `version` bump + `animatedTranslateY`
+        // shallowRef below, so it never needs Vue to proxy it. The DECISIONS — zero-swallow gate,
+        // debounce delay, rebuild ranges — all live in reduceSticky.
+        const state = createInitialStickyState();
+        // A reactive tick bumped when the reducer commits a new translateY, forcing the render to re-read
+        // state.translateY (the debounced committed value).
+        const version = ref(0);
+        // The animated node that drives the transform (RN's animatedTranslateY). Engine node →
+        // shallowRef (held by identity, the reactivity rule); the un-measured identity stub until the
+        // rebuild-interpolation effect below replaces it.
         const animatedTranslateY = shallowRef(scrollAnimatedValue.interpolate({ inputRange: [-1, 0], outputRange: [0, 0] }));
-        // The debounced EXPLICIT translateY pushed to the committed transform via
-        // passthroughAnimatedPropExplicitValues, so the Fabric ShadowTree (hit-testing) knows the pinned
-        // position while the native driver animates. null until the listener first fires.
-        const translateY = ref(null);
-        let haveReceivedInitialZeroTranslateY = true;
         let debounceTimer;
-        watch(translateY, value => {
-            if (value !== 0 && value !== null)
-                haveReceivedInitialZeroTranslateY = false;
+        // The current interpolation node + its listener id, held so the next rebuild detaches the old
+        // listener (an engine call the reducer does not own) and onBeforeUnmount cleans up.
+        let interpolation;
+        let listenerId;
+        const inputs = () => ({
+            os: Platform.OS,
+            inverted: typeof attrs.inverted === 'boolean' ? attrs.inverted : undefined,
+            scrollViewHeight: typeof attrs.scrollViewHeight === 'number' ? attrs.scrollViewHeight : undefined,
+            nextHeaderLayoutY: typeof attrs.nextHeaderLayoutY === 'number' ? attrs.nextHeaderLayoutY : undefined,
         });
-        // The animated value updates several times per frame during scroll; debounce it and push the
-        // settled value into the committed transform so hit detection stays current (RN: a Fabric-only
-        // issue; symbiote is always Fabric, and worse on Android).
-        const animatedValueListener = ({ value }) => {
-            if (typeof value !== 'number')
-                return;
-            const timeout = stickyDebounceMs(Platform.OS);
-            // A freshly-rebuilt interpolation re-emits 0 to its listeners; swallow that first zero (RN).
-            if (value === 0 && !haveReceivedInitialZeroTranslateY) {
-                haveReceivedInitialZeroTranslateY = true;
-                return;
+        const runEffects = (effects) => {
+            for (const effect of effects) {
+                switch (effect.kind) {
+                    case 'rebuild-interpolation': {
+                        // Detach the old listener, build a fresh interpolation onto the shared scroll value, and
+                        // wire the settled-value listener (symbiote is always Fabric; RN attaches it only there).
+                        if (interpolation !== undefined && listenerId !== undefined) {
+                            interpolation.removeListener(listenerId);
+                            listenerId = undefined;
+                        }
+                        const next = scrollAnimatedValue.interpolate({
+                            inputRange: effect.inputRange,
+                            outputRange: effect.outputRange,
+                        });
+                        listenerId = next.addListener(({ value }) => {
+                            if (typeof value === 'number')
+                                dispatch({ kind: 'animated-tick', value });
+                        });
+                        interpolation = next;
+                        animatedTranslateY.value = next;
+                        break;
+                    }
+                    case 'schedule-debounce':
+                        // The animated value updates several times per frame; debounce the settled value into the
+                        // committed transform so hit detection stays current (a Fabric issue, worse on Android).
+                        if (debounceTimer !== undefined)
+                            clearTimeout(debounceTimer);
+                        debounceTimer = setTimeout(() => {
+                            debounceTimer = undefined;
+                            dispatch({ kind: 'debounce-fired', value: effect.value });
+                        }, effect.delay);
+                        break;
+                    case 'apply-passthrough':
+                        version.value += 1;
+                        break;
+                    case 'record-header-y':
+                        // Vue records through attrs.onLayout (the wrapper closure), which honors the public
+                        // IStickyHeaderProps contract; the reducer emits no index for it.
+                        break;
+                }
             }
-            if (debounceTimer !== undefined)
-                clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(() => {
-                translateY.value = value;
-            }, timeout);
         };
-        // Rebuild the interpolation whenever the layout / collision inputs change (the Vue twin of RN's
-        // effect, deps [measured, layoutY, layoutHeight, scrollViewHeight, nextHeaderLayoutY, inverted]).
-        // symbiote is always Fabric: listen to the settled value to keep the ShadowTree transform current
-        // for hit-testing (RN attaches this listener only under Fabric). scrollAnimatedValue is the stable
-        // const (RN lists it in deps; it never changes for one ScrollView, so the const is faithful).
-        watchEffect(onCleanup => {
-            const inverted = typeof attrs.inverted === 'boolean' ? attrs.inverted : undefined;
-            const scrollViewHeight = typeof attrs.scrollViewHeight === 'number' ? attrs.scrollViewHeight : undefined;
-            const nextHeaderLayoutY = typeof attrs.nextHeaderLayoutY === 'number' ? attrs.nextHeaderLayoutY : undefined;
-            const { inputRange, outputRange } = computeStickyInterpolation({
-                measured: measured.value,
-                inverted,
-                scrollViewHeight,
-                layoutY: layoutY.value,
-                layoutHeight: layoutHeight.value,
-                nextHeaderLayoutY,
-            });
-            const interpolation = scrollAnimatedValue.interpolate({ inputRange, outputRange });
-            const listenerId = interpolation.addListener(animatedValueListener);
-            animatedTranslateY.value = interpolation;
-            onCleanup(() => {
+        const dispatch = (action) => {
+            runEffects(reduceSticky(state, action, inputs()).effects);
+        };
+        // Rebuild whenever the collision/viewport inputs change (the Vue twin of React's inputs-changed
+        // effect, tracking [inverted, scrollViewHeight, nextHeaderLayoutY] via inputs()); also the initial
+        // build on mount. scrollAnimatedValue is the stable const (never changes for one ScrollView).
+        watchEffect(() => {
+            dispatch({ kind: 'inputs-changed' });
+        });
+        onBeforeUnmount(() => {
+            if (interpolation !== undefined && listenerId !== undefined) {
                 interpolation.removeListener(listenerId);
-                if (debounceTimer !== undefined)
-                    clearTimeout(debounceTimer);
-            });
+            }
+            if (debounceTimer !== undefined)
+                clearTimeout(debounceTimer);
         });
-        // Stable function ref (defined once, not re-created per render): record own y/height, mark
-        // measured, fire the wrapper's recorder (onHeaderLayoutY, in attrs.onLayout), then the child's
-        // own onLayout. Matches RN ScrollViewStickyHeader.js._onLayout order.
+        // Stable function ref (defined once, not re-created per render): dispatch the layout (record
+        // own y/height, mark measured, rebuild), fire the wrapper's recorder (onHeaderLayoutY, in
+        // attrs.onLayout), then the child's own onLayout. Matches RN ScrollViewStickyHeader.js._onLayout.
         const onLayout = (event) => {
             const y = readLayoutNumber(event, 'y');
             const height = readLayoutNumber(event, 'height');
-            if (y !== undefined)
-                layoutY.value = y;
-            if (height !== undefined)
-                layoutHeight.value = height;
-            measured.value = true;
+            // Keep the previous value when a field is absent (RN sets state only on a defined read).
+            dispatch({ kind: 'layout', y: y ?? state.layoutY, height: height ?? state.layoutHeight });
             const recorder = attrs.onLayout;
             if (isHandler(recorder))
                 recorder(event);
@@ -132,10 +148,12 @@ export const ScrollViewStickyHeader = defineComponent({
                 childOnLayout(event);
         };
         return () => {
+            // Read the version bump so a committed translateY re-runs render.
+            void version.value;
             // The EXPLICIT debounced translateY overrides the committed transform for hit-testing, while
             // `animatedTranslateY` does the smooth (native-driven) pin. See RN ScrollViewStickyHeader.js.
-            const passthroughAnimatedPropExplicitValues = translateY.value !== null
-                ? { style: { transform: [{ translateY: translateY.value }] } }
+            const passthroughAnimatedPropExplicitValues = state.translateY !== null
+                ? { style: { transform: [{ translateY: state.translateY }] } }
                 : null;
             // collapsable:false keeps the wrapper a real Yoga node; zIndex makes the pinned header paint
             // OVER the rows scrolling under it. The interpolation node passes inside the transform; the

package/build/components/touchable.js

@@ -11,14 +11,20 @@
 // Inputs arrive as attrs (untyped), narrowed with runtime guards. The handlers read attrs LIVE
 // (they fire on events, not render) so a re-supplied callback / timing is always honored.
 import { defineComponent, h } from '@vue/runtime-core';
-import { computePressOutWait, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
-import { dlog, } from '@symbiote-native/engine';
+import { createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, highlightPressedStyle, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
+import {} from '@symbiote-native/engine';
 import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable.js';
 import { Animated } from '../modules/animated/index.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function numberOr(value, fallback) {
     return typeof value === 'number' ? value : fallback;
 }
+// The real setTimeout the shared feedback machine schedules its deferred activation/deactivation on
+// (core/components has no timer globals). Returns a canceller so an early release flushes the timer.
+function scheduleTimeout(callback, ms) {
+    const id = setTimeout(callback, ms);
+    return () => clearTimeout(id);
+}
 function forwardExcept(attrs, handled) {
     const result = {};
     for (const key of Object.keys(attrs)) {
@@ -41,8 +47,9 @@ export const TouchableOpacity = defineComponent((_props, { slots, attrs: rawAttr
     // One Animated.Value per mount, resting at full opacity. Held by identity in setup scope (an
     // engine object, never a reactive ref). The Animated.View leaf commits it every frame.
     const opacity = new Animated.Value(RESTING_OPACITY);
-    let pressInTimer;
-    let activatedAt;
+    // The shared press-scheduling cell (delayPressIn timer + activation clock), persisted across
+    // renders in setup scope; the handlers are rebuilt each render over live attrs.
+    const runtime = createTouchableFeedbackRuntime();
     function setOpacityTo(toValue, duration) {
         Animated.timing(opacity, {
             toValue,
@@ -51,51 +58,27 @@ export const TouchableOpacity = defineComponent((_props, { slots, attrs: rawAttr
             useNativeDriver: false,
         }).start();
     }
-    function clearPressInTimer() {
-        if (pressInTimer !== undefined) {
-            clearTimeout(pressInTimer);
-            pressInTimer = undefined;
-        }
-    }
-    function activate(event) {
-        activatedAt = Date.now();
-        setOpacityTo(numberOr(rawAttrs.activeOpacity, DEFAULT_ACTIVE_OPACITY), OPACITY_ACTIVE_DURATION_MS);
-        emit('pressIn', event);
-    }
-    function deactivate(event) {
-        activatedAt = undefined;
-        setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
-        emit('pressOut', event);
-    }
-    function handlePressIn(event) {
-        const delayPressIn = numberOr(rawAttrs.delayPressIn, 0);
-        if (delayPressIn > 0) {
-            dlog(`TouchableOpacity pressIn deferred ${delayPressIn}ms`);
-            pressInTimer = setTimeout(() => {
-                pressInTimer = undefined;
-                activate(event);
-            }, delayPressIn);
-            return;
-        }
-        activate(event);
-    }
-    function handlePressOut(event) {
-        if (pressInTimer !== undefined) {
-            clearPressInTimer();
-            activate(event);
-        }
-        const heldFor = activatedAt === undefined ? 0 : Date.now() - activatedAt;
-        const wait = computePressOutWait(heldFor, numberOr(rawAttrs.minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS), numberOr(rawAttrs.delayPressOut, 0));
-        if (wait > 0) {
-            dlog(`TouchableOpacity pressOut deferred ${wait}ms`);
-            setTimeout(() => deactivate(event), wait);
-            return;
-        }
-        deactivate(event);
-    }
     return () => {
         const attrs = normalizeVueAttrs(rawAttrs);
         const style = attrs.style;
+        // Rebuilt each render so a re-supplied delay/opacity is honored (Vue's live-attr idiom); the
+        // shared machine owns the scheduling, the adapter supplies the Animated fade + emit.
+        const { handlePressIn, handlePressOut } = createTouchableFeedbackHandlers({
+            delayPressIn: numberOr(attrs.delayPressIn, 0),
+            delayPressOut: numberOr(attrs.delayPressOut, 0),
+            minPressDuration: numberOr(attrs.minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS),
+            schedule: scheduleTimeout,
+            now: Date.now,
+        }, runtime, {
+            activate(event) {
+                setOpacityTo(numberOr(attrs.activeOpacity, DEFAULT_ACTIVE_OPACITY), OPACITY_ACTIVE_DURATION_MS);
+                emit('pressIn', event);
+            },
+            deactivate(event) {
+                setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+                emit('pressOut', event);
+            },
+        });
         const pressableProps = {
             ...forwardExcept(attrs, TOUCHABLE_OPACITY_HANDLED),
             ...emitPressableEvents(emit),
@@ -119,10 +102,7 @@ export const TouchableHighlight = defineComponent((_props, { slots, attrs: rawAt
         const underlayColor = typeof attrs.underlayColor === 'string' ? attrs.underlayColor : DEFAULT_UNDERLAY_COLOR;
         const style = attrs.style;
         function pressedStyle({ pressed }) {
-            if (!pressed)
-                return style;
-            const overlay = { backgroundColor: underlayColor, opacity: activeOpacity };
-            return [style, overlay];
+            return highlightPressedStyle(pressed, style, underlayColor, activeOpacity);
         }
         const pressableProps = {
             ...forwardExcept(attrs, TOUCHABLE_HIGHLIGHT_HANDLED),

package/build/components/virtualized-list/index.js

@@ -1,11 +1,12 @@
-// VirtualizedList, the Vue lifecycle half. The windowing engine (offset table, window
-// compute, batch throttle, viewability, edge-reached, the child PLAN, the imperative-handle
-// surface) lives in @symbiote-native/components/state, shared verbatim with the React adapter. Here
-// Vue supplies only the reactivity: refs for scroll offset / viewport / measurement bumps, a
-// `computed` that runs the shared windowing math, post-flush watchers for the after-commit
-// work (batch fill, onEndReached/onStartReached, viewability, initialScroll, MVCP), and the
-// imperative handle via expose(). This is the Vue twin of the React adapter's
-// useState/useRef/useEffect over the same shared functions. It drives the Vue ScrollView,
+// VirtualizedList, the Vue lifecycle half. The orchestration — window recompute, batch throttle,
+// viewability, edge-reached, initial-scroll, MVCP, the imperative scrolls — is the framework-agnostic
+// `reduceList` state machine in @symbiote-native/components (state/virtualized-list-reducer), shared verbatim
+// with React and Angular. Here Vue supplies only the reactivity: it turns native events into ACTIONS,
+// holds ONE plain state cell (listState), runs the returned EFFECTS with Vue primitives (a native
+// scrollTo, an emit, a setTimeout, a version bump), and builds the cell/spacer VNodes off the plan.
+// A single `metrics` computed derives the window once per render (refresh-metrics); a single
+// post-flush watcher on the windowing signature runs the after-commit `commit` pass. This is the Vue
+// twin of the React adapter's one-state-cell + dispatch + runEffects. It drives the Vue ScrollView,
 // exactly as the React list drives the React ScrollView.
 //
 // Typed-emits generic component (mirrors FlatList): a GENERIC setup function
@@ -23,9 +24,10 @@
 //
 // Reactivity gotcha: the ScrollView's exposed handle is held in a shallowRef so the engine
 // node it closes over is reached by identity; a deep ref would proxy it and the imperative
-// scroll commands would silently no-op.
+// scroll commands would silently no-op. The folded listState is a PLAIN object (not reactive) —
+// mutating it never triggers Vue; the `version` ref is bumped when a transition changes render state.
 import { computed, defineComponent, getCurrentInstance, h, isVNode, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
-import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, NO_CONTENT_LENGTH_SENT, averageMeasuredLength, buildListPlan, buildOffsets, buildViewabilityPairs, computeEndReached, computeStartReached, computeViewableSet, computeWindow, diffViewable, highestMeasuredIndex, maxMinimumViewTime, offsetForIndex, readLayoutLength, readScrollOffset, throttleWindow, } from '@symbiote-native/components';
+import { DEFAULT_END_REACHED_THRESHOLD, DEFAULT_INITIAL_NUM_TO_RENDER, DEFAULT_MAX_TO_RENDER_PER_BATCH, DEFAULT_START_REACHED_THRESHOLD, DEFAULT_UPDATE_CELLS_BATCHING_PERIOD, DEFAULT_WINDOW_SIZE, EMPTY_OFFSET, FIRST_INDEX, INVERTED_X_STYLE, INVERTED_Y_STYLE, buildListPlan, buildViewabilityPairs, createInitialListState, isSeparatorGapInRange, listEffectSignature, readLayoutLength, readScrollOffset, reduceList, resolveItemKey, } from '@symbiote-native/components';
 import { dlog, } from '@symbiote-native/engine';
 import { ScrollView } from '../scroll-view';
 import { RefreshControl } from '../refresh-control.js';
@@ -120,17 +122,13 @@ function isScrollViewHandle(value) {
     return isRecord(value) && typeof value.scrollTo === 'function';
 }
 export const VirtualizedList = defineComponent((props, { attrs, expose, emit, slots, }) => {
-    // Reactive lifecycle state (the Vue twin of React's useState): a change in any of these
-    // re-runs the windowing `computed` and the render fn.
-    const scrollOffset = ref(EMPTY_OFFSET);
-    const viewportLength = ref(EMPTY_OFFSET);
+    // Bumped when a transition changes render-relevant state, so the `metrics` computed and the
+    // render fn re-run (listState is plain, non-reactive, so mutating it triggers nothing itself).
+    const version = ref(EMPTY_OFFSET);
+    const separatorVersion = ref(EMPTY_OFFSET);
     // The offset we are imperatively driving native to. A fresh object identity each push so the
     // commit path re-applies it even when the numeric value repeats. undefined = none pending.
     const commandedOffset = ref(undefined);
-    // Bumped when a NEW cell measurement lands or a batch tick fires, to request a re-render
-    // without thrashing on already-known cells (React's measuredRef + setMeasureVersion).
-    const measureVersion = ref(EMPTY_OFFSET);
-    const separatorVersion = ref(EMPTY_OFFSET);
     // shallowRef, NOT ref: the ScrollView handle closes over the engine scroll node, reached by
     // identity through the engine's WeakMap mirror. A deep ref would proxy the object and every
     // imperative scroll (scrollToOffset/Index/…) would miss the node and silently no-op.
@@ -147,20 +145,12 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         const vnodeProps = instance?.vnode.props;
         return vnodeProps != null && typeof vnodeProps[onName] === 'function';
     };
-    // Non-reactive setup-scope state (the Vue twin of React's refs that never trigger a render):
-    const measured = new Map();
-    // The previously committed window, so throttleWindow grows it by at most maxToRenderPerBatch
-    // per tick instead of snapping.
-    let committedWindow = { first: FIRST_INDEX, last: -1 };
-    let sentEndForContentLength = NO_CONTENT_LENGTH_SENT;
-    let sentStartForContentLength = NO_CONTENT_LENGTH_SENT;
-    let lastViewable = new Map();
+    // The one folded state cell (the Vue twin of React's stateRef); plus the per-gap separator
+    // overrides + the adapter-owned debounce/fill timers.
+    const listState = createInitialListState();
+    const separatorOverrides = new Map();
     let viewableTimer = null;
     let batchTimer = null;
-    let hasInteracted = false;
-    const separatorOverrides = new Map();
-    let appliedInitialScroll = false;
-    let firstVisibleKey = null;
     const narrowed = computed(() => {
         // extraData has no field of its own; reading it tracks it so a change forces a re-render
         // (RN's extraData contract).
@@ -217,47 +207,34 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
             forwarded: forwardAttrs(folded),
         };
     });
-    const keyFor = (index) => {
-        const p = narrowed.value;
-        const item = p.getItem(p.data, index);
-        return p.keyExtractor ? p.keyExtractor(item, index) : String(index);
-    };
-    // The windowing math, run through the shared @symbiote-native/components functions. It mutates the
-    // non-reactive committedWindow as it throttles (the controlled side effect React runs during
-    // render): committedWindow is plain state, so the write triggers no reactivity loop.
-    const metrics = computed(() => {
+    // The reducer inputs, folded off `narrowed`. Rebuilt per call (cheap); the viewability pairs are
+    // rebuilt here so the reduce and the effect fire against the same set.
+    const buildInputs = () => {
         const p = narrowed.value;
-        void measureVersion.value;
-        const count = p.getItemCount(p.data);
-        const gil = p.getItemLayout;
-        const data = p.data;
-        const fixedLayout = gil !== undefined
-            ? (index) => {
-                const layout = gil(data, index);
-                return { length: layout.length, offset: layout.offset };
-            }
-            : undefined;
-        const averageLength = fixedLayout !== undefined
-            ? count > FIRST_INDEX
-                ? fixedLayout(FIRST_INDEX).length
-                : EMPTY_OFFSET
-            : averageMeasuredLength(measured);
-        const { offsets, lengths, total } = buildOffsets(count, measured, fixedLayout, averageLength);
-        const target = computeWindow(count, offsets, lengths, scrollOffset.value, viewportLength.value, p.windowSize, p.initialNumToRender);
-        const throttled = throttleWindow(target, committedWindow, p.maxToRenderPerBatch);
-        committedWindow = throttled;
         return {
-            count,
-            offsets,
-            lengths,
-            total,
-            first: throttled.first,
-            last: throttled.last,
-            target,
-            fixedLayout,
-            averageLength,
+            data: p.data,
+            getItem: p.getItem,
+            getItemCount: p.getItemCount,
+            keyExtractor: p.keyExtractor,
+            getItemLayout: p.getItemLayout,
+            horizontal: p.horizontal,
+            windowSize: p.windowSize,
+            initialNumToRender: p.initialNumToRender,
+            maxToRenderPerBatch: p.maxToRenderPerBatch,
+            updateCellsBatchingPeriod: p.updateCellsBatchingPeriod,
+            onEndReachedThreshold: p.onEndReachedThreshold,
+            onStartReachedThreshold: p.onStartReachedThreshold,
+            onEndReachedActive: p.onEndReached !== undefined,
+            onStartReachedActive: p.onStartReached !== undefined,
+            viewabilityPairs: buildViewabilityPairs(p.onViewableItemsChanged, p.viewabilityConfig, p.viewabilityConfigCallbackPairs),
+            maintainVisibleContentPosition: p.maintainVisibleContentPosition,
+            initialScrollIndex: p.initialScrollIndex,
         };
-    });
+    };
+    const keyFor = (index) => {
+        const p = narrowed.value;
+        return resolveItemKey(p.getItem(p.data, index), index, p.keyExtractor);
+    };
     const scrollToPixel = (offset, animated) => {
         const p = narrowed.value;
         const clamped = Math.max(EMPTY_OFFSET, offset);
@@ -273,21 +250,92 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         dlog(`Vue VirtualizedList scrollTo offset=${clamped} pending-ref`);
         commandedOffset.value = targetOffset;
     };
-    const offsetForIndexLocal = (index, viewPosition, viewOffset) => {
-        const m = metrics.value;
-        return offsetForIndex(index, viewPosition, viewOffset, m.count, m.offsets, m.lengths, viewportLength.value);
+    // Execute the reducer's effects with Vue primitives. `inputs` is threaded through so a
+    // fire-viewable fires against the same pairs the reduce used.
+    const runEffects = (effects, inputs) => {
+        const p = narrowed.value;
+        for (const effect of effects) {
+            switch (effect.kind) {
+                case 'scroll-to':
+                    scrollToPixel(effect.offset, effect.animated);
+                    break;
+                case 'fire-end-reached':
+                    p.onEndReached?.({ distanceFromEnd: effect.distanceFromEnd });
+                    break;
+                case 'fire-start-reached':
+                    p.onStartReached?.({ distanceFromStart: effect.distanceFromStart });
+                    break;
+                case 'fire-scroll-to-index-failed':
+                    p.onScrollToIndexFailed?.({
+                        index: effect.index,
+                        highestMeasuredFrameIndex: effect.highestMeasuredFrameIndex,
+                        averageItemLength: effect.averageItemLength,
+                    });
+                    break;
+                case 'schedule-refill': {
+                    if (batchTimer !== null)
+                        clearTimeout(batchTimer);
+                    batchTimer = setTimeout(() => {
+                        batchTimer = null;
+                        dispatch({ kind: 'batch-tick' });
+                    }, effect.delay);
+                    break;
+                }
+                case 'fire-viewable': {
+                    const pairs = inputs.viewabilityPairs;
+                    const info = effect.info;
+                    const map = effect.map;
+                    const fire = () => {
+                        for (const pair of pairs)
+                            pair.onViewableItemsChanged(info);
+                        dispatch({ kind: 'viewable-fired', map });
+                    };
+                    if (viewableTimer !== null) {
+                        clearTimeout(viewableTimer);
+                        viewableTimer = null;
+                    }
+                    if (effect.delay > EMPTY_OFFSET) {
+                        viewableTimer = setTimeout(() => {
+                            viewableTimer = null;
+                            fire();
+                        }, effect.delay);
+                    }
+                    else {
+                        fire();
+                    }
+                    break;
+                }
+            }
+        }
+    };
+    const dispatch = (action) => {
+        const inputs = buildInputs();
+        const result = reduceList(listState, action, inputs);
+        runEffects(result.effects, inputs);
+        if (result.changed)
+            version.value += 1;
     };
+    // The single derive-per-render: the window is recomputed once here (refresh-metrics) and cached
+    // by the computed until `version` or the narrowed props change, so the render fn and the commit
+    // signature both read it without re-deriving (which would double-advance the throttle).
+    const metrics = computed(() => {
+        void version.value;
+        reduceList(listState, { kind: 'refresh-metrics' }, buildInputs());
+        return listState.metrics;
+    });
+    const commitSignature = computed(() => {
+        void metrics.value;
+        return listEffectSignature(listState);
+    });
     const onScroll = (event) => {
         const p = narrowed.value;
         const offset = readScrollOffset(event, p.horizontal);
         if (offset === undefined)
             return;
         dlog(`Vue VirtualizedList onScroll offset=${offset}`);
-        // First scroll is the interaction that ungates waitForInteraction configs.
-        hasInteracted = true;
-        scrollOffset.value = offset;
         // A real native scroll supersedes any pending commanded offset.
         commandedOffset.value = undefined;
+        dispatch({ kind: 'scroll', offset });
         // Compose, don't clobber: internal windowing ran first, now the user's onScroll.
         if (p.userOnScroll !== undefined)
             p.userOnScroll(event);
@@ -297,24 +345,17 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         if (length === undefined)
             return;
         dlog(`Vue VirtualizedList onLayout viewport=${length}`);
-        viewportLength.value = length;
+        dispatch({ kind: 'layout', length });
     };
     const makeCellMeasure = (index) => (event) => {
-        const p = narrowed.value;
-        if (p.getItemLayout !== undefined)
-            return;
-        const length = readLayoutLength(event, p.horizontal);
+        const length = readLayoutLength(event, narrowed.value.horizontal);
         if (length === undefined)
             return;
-        if (measured.get(index) === length)
-            return;
-        measured.set(index, length);
         dlog(`Vue VirtualizedList cell ${index} measured length=${length}`);
-        measureVersion.value += 1;
+        dispatch({ kind: 'measure', index, length });
     };
     const mergeSeparator = (gapIndex, patch) => {
-        const count = metrics.value.count;
-        if (gapIndex < FIRST_INDEX || gapIndex > count - 2)
+        if (!isSeparatorGapInRange(gapIndex, listState.metrics.count))
             return;
         separatorOverrides.set(gapIndex, { ...separatorOverrides.get(gapIndex), ...patch });
         separatorVersion.value += 1;
@@ -337,38 +378,31 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
     // ---- imperative handle (the shared IVirtualizedListHandle surface) ------
     const handle = {
         scrollToOffset: (params) => {
-            scrollToPixel(params.offset, params.animated ?? true);
+            dispatch({
+                kind: 'scroll-to-offset',
+                offset: params.offset,
+                animated: params.animated ?? true,
+            });
         },
         scrollToIndex: (params) => {
-            const p = narrowed.value;
-            const m = metrics.value;
-            // No getItemLayout AND the target is past the last measured cell: report the failure
-            // instead of scrolling to a fabricated estimate (RN VirtualizedList.js:179-195).
-            if (p.getItemLayout === undefined && params.index > highestMeasuredIndex(measured)) {
-                dlog(`Vue VirtualizedList onScrollToIndexFailed index=${params.index} ` +
-                    `highestMeasured=${highestMeasuredIndex(measured)} (no getItemLayout)`);
-                p.onScrollToIndexFailed?.({
-                    index: params.index,
-                    highestMeasuredFrameIndex: highestMeasuredIndex(measured),
-                    averageItemLength: m.averageLength,
-                });
-                return;
-            }
-            scrollToPixel(offsetForIndexLocal(params.index, params.viewPosition ?? FIRST_INDEX, params.viewOffset ?? EMPTY_OFFSET), params.animated ?? true);
+            dispatch({
+                kind: 'scroll-to-index',
+                index: params.index,
+                animated: params.animated ?? true,
+                viewPosition: params.viewPosition ?? FIRST_INDEX,
+                viewOffset: params.viewOffset ?? EMPTY_OFFSET,
+            });
         },
         scrollToItem: (params) => {
-            const p = narrowed.value;
-            const count = metrics.value.count;
-            for (let index = FIRST_INDEX; index < count; index += 1) {
-                if (p.getItem(p.data, index) === params.item) {
-                    scrollToPixel(offsetForIndexLocal(index, params.viewPosition ?? FIRST_INDEX, EMPTY_OFFSET), params.animated ?? true);
-                    return;
-                }
-            }
-            dlog('Vue VirtualizedList scrollToItem: item not found');
+            dispatch({
+                kind: 'scroll-to-item',
+                item: params.item,
+                animated: params.animated ?? true,
+                viewPosition: params.viewPosition ?? FIRST_INDEX,
+            });
         },
         scrollToEnd: (params) => {
-            scrollToPixel(Math.max(EMPTY_OFFSET, metrics.value.total - viewportLength.value), params?.animated ?? true);
+            dispatch({ kind: 'scroll-to-end', animated: params?.animated ?? true });
         },
         flashScrollIndicators: () => {
             scrollHandle.value?.flashScrollIndicators();
@@ -378,167 +412,17 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         getScrollResponder: () => scrollHandle.value,
         getScrollNode: () => scrollHandle.value?.getScrollNode() ?? null,
         recordInteraction: () => {
-            hasInteracted = true;
+            dispatch({ kind: 'record-interaction' });
         },
     };
     expose(handle);
-    // ---- after-commit effects (post-flush watchers, the Vue twin of useEffect) ----
-    // Batch fill: when the throttled window has not reached the target, schedule a re-render so
-    // the window keeps filling toward target over successive ticks (React's batch effect).
-    watch(metrics, m => {
-        if (batchTimer !== null) {
-            clearTimeout(batchTimer);
-            batchTimer = null;
-        }
-        if (m.first <= m.target.first && m.last >= m.target.last)
-            return;
-        batchTimer = setTimeout(() => {
-            batchTimer = null;
-            measureVersion.value += 1;
-        }, narrowed.value.updateCellsBatchingPeriod);
-    }, { flush: 'post' });
-    // onEndReached: fire only when the actual last cell is rendered AND within threshold; dedup by
-    // content length; re-arm on scroll away from the end (RN _maybeCallOnEdgeReached).
-    watch(() => [narrowed.value, scrollOffset.value, viewportLength.value, metrics.value], () => {
-        const p = narrowed.value;
-        if (p.onEndReached === undefined || viewportLength.value <= EMPTY_OFFSET)
-            return;
-        const m = metrics.value;
-        const { distanceFromEnd, withinThreshold } = computeEndReached(m.total, scrollOffset.value, viewportLength.value, p.onEndReachedThreshold);
-        const lastCellRendered = m.last === m.count - 1;
-        if (withinThreshold && lastCellRendered && sentEndForContentLength !== m.total) {
-            sentEndForContentLength = m.total;
-            dlog(`Vue VirtualizedList onEndReached distanceFromEnd=${distanceFromEnd} ` +
-                `(last=${m.last} of ${m.count}, contentLength=${m.total})`);
-            p.onEndReached({ distanceFromEnd });
-        }
-        if (!withinThreshold)
-            sentEndForContentLength = NO_CONTENT_LENGTH_SENT;
-    }, { flush: 'post' });
-    // onStartReached: the top-edge twin of onEndReached.
-    watch(() => [narrowed.value, scrollOffset.value, viewportLength.value, metrics.value], () => {
-        const p = narrowed.value;
-        if (p.onStartReached === undefined || viewportLength.value <= EMPTY_OFFSET)
-            return;
-        const m = metrics.value;
-        const { distanceFromStart, withinThreshold } = computeStartReached(scrollOffset.value, viewportLength.value, p.onStartReachedThreshold);
-        const firstCellRendered = m.first === FIRST_INDEX;
-        if (withinThreshold && firstCellRendered && sentStartForContentLength !== m.total) {
-            sentStartForContentLength = m.total;
-            dlog(`Vue VirtualizedList onStartReached distanceFromStart=${distanceFromStart} ` +
-                `(first=${m.first}, contentLength=${m.total})`);
-            p.onStartReached({ distanceFromStart });
-        }
-        if (!withinThreshold)
-            sentStartForContentLength = NO_CONTENT_LENGTH_SENT;
-    }, { flush: 'post' });
-    // Viewability: recompute which rendered cells clear the threshold and, if the viewable set
-    // changed, fire onViewableItemsChanged + every config/callback pair, honoring minimumViewTime.
-    watch(() => [narrowed.value, scrollOffset.value, viewportLength.value, metrics.value], () => {
-        const p = narrowed.value;
-        const m = metrics.value;
-        const pairs = buildViewabilityPairs(p.onViewableItemsChanged, p.viewabilityConfig, p.viewabilityConfigCallbackPairs);
-        if (pairs.length === EMPTY_OFFSET || viewportLength.value <= EMPTY_OFFSET)
-            return;
-        if (m.count === FIRST_INDEX)
-            return;
-        const { tokens, map } = computeViewableSet({
-            first: m.first,
-            last: m.last,
-            count: m.count,
-            offsets: m.offsets,
-            lengths: m.lengths,
-            scrollOffset: scrollOffset.value,
-            viewportLength: viewportLength.value,
-            data: p.data,
-            getItem: p.getItem,
-            keyExtractor: p.keyExtractor,
-            pairs,
-            hasInteracted,
-        });
-        const diff = diffViewable(lastViewable, map, tokens);
-        if (!diff.hasChanged)
-            return;
-        const commitAndFire = () => {
-            lastViewable = map;
-            dlog(`Vue VirtualizedList viewable=${tokens.length} changed=${diff.changed.length} ` +
-                `(window [${m.first}, ${m.last}])`);
-            const info = {
-                viewableItems: tokens,
-                changed: diff.changed,
-            };
-            for (const pair of pairs)
-                pair.onViewableItemsChanged(info);
-        };
-        const minimumViewTime = maxMinimumViewTime(pairs);
-        if (viewableTimer !== null) {
-            clearTimeout(viewableTimer);
-            viewableTimer = null;
-        }
-        if (minimumViewTime > EMPTY_OFFSET) {
-            dlog(`Vue VirtualizedList viewability debounce ${minimumViewTime}ms (window [${m.first}, ${m.last}])`);
-            viewableTimer = setTimeout(() => {
-                viewableTimer = null;
-                commitAndFire();
-            }, minimumViewTime);
-            return;
-        }
-        commitAndFire();
-    }, { flush: 'post' });
-    // initialScrollIndex: once the first viewport is known, jump to that index a single time.
-    watch(() => [narrowed.value, viewportLength.value, metrics.value], () => {
-        const p = narrowed.value;
-        if (p.initialScrollIndex === undefined || appliedInitialScroll)
-            return;
-        if (viewportLength.value <= EMPTY_OFFSET || metrics.value.count === FIRST_INDEX)
-            return;
-        appliedInitialScroll = true;
-        // The initial jump is instant (RN does not animate initialScrollIndex).
-        scrollToPixel(offsetForIndexLocal(p.initialScrollIndex, FIRST_INDEX, EMPTY_OFFSET), false);
-    }, { flush: 'post' });
-    // maintainVisibleContentPosition JS anchor adjustment: track the key of the item at
-    // minIndexForVisible; when a prepend moves it down, add the inserted extent in the leading
-    // SPACER (the off-window items native MVCP cannot see) to scrollOffset so the anchored item
-    // does not jump (RN getDerivedStateFromProps). Runs post-flush so the correction lands fast.
-    watch(() => [narrowed.value, metrics.value, scrollOffset.value], () => {
-        const p = narrowed.value;
-        const m = metrics.value;
-        if (p.maintainVisibleContentPosition === undefined || m.count === FIRST_INDEX) {
-            firstVisibleKey = null;
-            return;
-        }
-        const minIndexForVisible = p.maintainVisibleContentPosition.minIndexForVisible;
-        const newFirstVisibleKey = m.count > minIndexForVisible ? keyFor(minIndexForVisible) : null;
-        const prevKey = firstVisibleKey;
-        if (prevKey !== null && newFirstVisibleKey !== null && prevKey !== newFirstVisibleKey) {
-            let anchorIndex = -1;
-            for (let index = minIndexForVisible; index < m.count; index += 1) {
-                if (keyFor(index) === prevKey) {
-                    anchorIndex = index;
-                    break;
-                }
-            }
-            if (anchorIndex > minIndexForVisible) {
-                const spacerEnd = Math.min(anchorIndex, committedWindow.first);
-                const insertedExtent = spacerEnd > minIndexForVisible
-                    ? m.offsets[spacerEnd] - m.offsets[minIndexForVisible]
-                    : EMPTY_OFFSET;
-                if (insertedExtent > EMPTY_OFFSET) {
-                    const autoThreshold = p.maintainVisibleContentPosition.autoscrollToTopThreshold;
-                    const anchoredNearTop = autoThreshold !== undefined && scrollOffset.value <= autoThreshold;
-                    if (anchoredNearTop) {
-                        dlog(`Vue VirtualizedList MVCP autoscroll-to-top (offset=${scrollOffset.value} <= ${autoThreshold})`);
-                        scrollToPixel(EMPTY_OFFSET, true);
-                    }
-                    else {
-                        dlog(`Vue VirtualizedList MVCP adjust +${insertedExtent}px ` +
-                            `(anchor "${prevKey}" moved ${minIndexForVisible}->${anchorIndex})`);
-                        scrollToPixel(scrollOffset.value + insertedExtent, false);
-                    }
-                }
-            }
-        }
-        firstVisibleKey = newFirstVisibleKey;
+    // ---- after-commit pass (one post-flush watcher, the Vue twin of the layout effect) ----
+    // Runs the deferred effects (batch fill, edge-reached, viewability, initial-scroll, MVCP)
+    // whenever the windowing signature changes — the same dedup key every adapter shares.
+    watch(commitSignature, () => {
+        const inputs = buildInputs();
+        const result = reduceList(listState, { kind: 'commit' }, inputs);
+        runEffects(result.effects, inputs);
     }, { flush: 'post' });
     onBeforeUnmount(() => {
         if (viewableTimer !== null)
@@ -554,7 +438,7 @@ export const VirtualizedList = defineComponent((props, { attrs, expose, emit, sl
         if (p.renderItem === undefined)
             dlog('Vue VirtualizedList: no #item slot provided — cells render empty');
         dlog(`Vue VirtualizedList window [${m.first}, ${m.last}] of ${m.count} ` +
-            `(offset=${scrollOffset.value}, viewport=${viewportLength.value}, rendered=${Math.max(0, m.last - m.first + 1)})`);
+            `(offset=${listState.scrollOffset}, viewport=${listState.viewportLength}, rendered=${Math.max(0, m.last - m.first + 1)})`);
         const children = [];
         const stickySet = p.stickyHeaderIndices !== undefined ? new Set(p.stickyHeaderIndices) : undefined;
         const header = resolveElement(p.listHeaderComponent);

package/build/components/virtualized-section-list/index.js

@@ -16,7 +16,7 @@
 // when the consumer listens (read off the instance vnode props), so the inner VirtualizedList keeps
 // building RefreshControl / computing edge-reached strictly on demand.
 import { defineComponent, getCurrentInstance, h, shallowRef, } from '@vue/runtime-core';
-import { flattenSections, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
+import { flattenSections, resolveStickySectionHeaders, scrollLocationToFlatIndex, sectionEntryKey, unwrapEntryItem, } from '@symbiote-native/components';
 import { Platform, dlog, } from '@symbiote-native/engine';
 import { VirtualizedList } from '../virtualized-list/index.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
@@ -88,9 +88,7 @@ export const VirtualizedSectionList = defineComponent((props, { attrs, expose, e
         const { entries, headerIndices: indices } = flattenSections(sections, slots.sectionSeparator !== undefined);
         headerIndices = indices;
         // RN sticks section headers by default only on iOS; Android does not unless asked.
-        const stickyDefault = Platform.OS === 'ios';
-        const stickyEnabled = props.stickySectionHeadersEnabled ?? stickyDefault;
-        const stickyHeaderIndices = stickyEnabled ? indices : undefined;
+        const stickyHeaderIndices = resolveStickySectionHeaders(props.stickySectionHeadersEnabled, indices, Platform.OS);
         dlog(`Vue VirtualizedSectionList: ${sections.length} sections flattened to ${entries.length} entries`);
         // The inner list's #item slot: dispatch each flattened entry to the matching consumer slot,
         // returning its VNode[] (empty when the consumer left that slot off).

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@symbiote-native/vue",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "SymbioteNative's Vue adapter — a @vue/runtime-core createRenderer driving real native iOS/Android views through the same engine as the React adapter.",
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
@@ -45,17 +46,17 @@
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/runtime-core": "^3.5.13",
     "typescript": "~6.0.0",
-    "@symbiote-native/css-parser": "0.2.2",
-    "@symbiote-native/components": "0.2.5"
+    "@symbiote-native/components": "0.3.0",
+    "@symbiote-native/css-parser": "0.2.3"
   },
   "peerDependencies": {
-    "@symbiote-native/engine": ">=0.1.6",
+    "@symbiote-native/engine": ">=0.1.7",
     "vue": ">=3.5.0",
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@symbiote-native/engine": "0.1.6",
-    "@symbiote-native/test-utils": "0.1.5"
+    "@symbiote-native/engine": "0.1.7",
+    "@symbiote-native/test-utils": "0.1.6"
   },
   "scripts": {
     "typecheck": "tsc --build",