@lightningtv/solid 2.10.5 → 2.10.7

package/dist/src/primitives/Column.jsx

@@ -1,5 +1,5 @@
 import { combineStyles } from '@lightningtv/solid';
-import { navigableForwardFocus, navigableHandleNavigation } from './utils/handleNavigation.js';
+import { navigableForwardFocus, handleNavigation } from './utils/handleNavigation.js';
 import { scrollColumn } from './utils/withScrolling.js';
 import { chainFunctions } from './utils/chainFunctions.js';
 const ColumnStyles = {
@@ -18,8 +18,10 @@ function scrollToIndex(index) {
     scrollColumn(index, this);
     this.children[index]?.setFocus();
 }
+const onUp = handleNavigation('up');
+const onDown = handleNavigation('down');
 export const Column = (props) => {
-    return (<view {...props} onUp={/* @once */chainFunctions(props.onUp, navigableHandleNavigation)} onDown={/* @once */chainFunctions(props.onDown, navigableHandleNavigation)} selected={props.selected || 0} scrollToIndex={scrollToIndex} forwardFocus={navigableForwardFocus} onLayout={
+    return (<view {...props} onUp={/* @once */chainFunctions(props.onUp, onUp)} onDown={/* @once */chainFunctions(props.onDown, onDown)} selected={props.selected || 0} scrollToIndex={scrollToIndex} forwardFocus={navigableForwardFocus} onLayout={
         /* @once */
         props.selected ? chainFunctions(props.onLayout, scrollColumn) : props.onLayout} onSelectedChanged={
         /* @once */ chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scrollColumn : undefined)} style={/* @once */combineStyles(props.style, ColumnStyles)}/>);

package/dist/src/primitives/Column.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Column.jsx","sourceRoot":"","sources":["../../../src/primitives/Column.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,aAAa,EAAmB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EACL,qBAAqB,EAAE,yBAAyB,EACjD,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,MAAM,YAAY,GAAe;IAC/B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;IACP,UAAU,EAAE;QACV,CAAC,EAAE;YACD,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,aAAa;SACtB;KACF;CACF,CAAC;AAEF,SAAS,aAAa,CAAoB,KAAa;IACrD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAA2B,CAAC,KAAK,EAAE,EAAE;IACtD,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,IAAI,EAAE,yBAAyB,CAAC,CAAC,CACxE,MAAM,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAC5E,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,CAC9B,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,QAAQ,CAAC,CAAC;QACR,WAAW;QACX,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QACxE,CAAC,CACD,iBAAiB,CAAC,CAAC;QACjB,WAAW,CAAC,cAAc,CACxB,KAAK,CAAC,iBAAiB,EACvB,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAEtD,CAAC,CACD,KAAK,CAAC,CAAC,WAAY,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,EAC5D,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Column.jsx","sourceRoot":"","sources":["../../../src/primitives/Column.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,aAAa,EAAmB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EACL,qBAAqB,EAAE,gBAAgB,EACxC,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAG3D,MAAM,YAAY,GAAe;IAC/B,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,EAAE;IACP,UAAU,EAAE;QACV,CAAC,EAAE;YACD,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,aAAa;SACtB;KACF;CACF,CAAC;AAEF,SAAS,aAAa,CAAoB,KAAa;IACrD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC1B,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACpC,MAAM,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAA2B,CAAC,KAAK,EAAE,EAAE;IACtD,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,IAAI,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CACnD,MAAM,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CACzD,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,CAC9B,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,QAAQ,CAAC,CAAC;QACR,WAAW;QACX,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QACxE,CAAC,CACD,iBAAiB,CAAC,CAAC;QACjB,WAAW,CAAC,cAAc,CACxB,KAAK,CAAC,iBAAiB,EACvB,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAEtD,CAAC,CACD,KAAK,CAAC,CAAC,WAAY,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,EAC5D,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/primitives/Row.jsx

@@ -1,6 +1,6 @@
 import { combineStyles } from '@lightningtv/solid';
 import { chainFunctions } from './utils/chainFunctions.js';
-import { navigableForwardFocus, navigableHandleNavigation } from './utils/handleNavigation.js';
+import { handleNavigation, navigableForwardFocus } from './utils/handleNavigation.js';
 import { scrollRow } from './utils/withScrolling.js';
 const RowStyles = {
     display: 'flex',
@@ -17,8 +17,10 @@ function scrollToIndex(index) {
     scrollRow(index, this);
     this.children[index]?.setFocus();
 }
+const onLeft = handleNavigation('left');
+const onRight = handleNavigation('right');
 export const Row = (props) => {
-    return (<view {...props} selected={props.selected || 0} onLeft={/* @once */chainFunctions(props.onLeft, navigableHandleNavigation)} onRight={/* @once */chainFunctions(props.onRight, navigableHandleNavigation)} forwardFocus={navigableForwardFocus} scrollToIndex={scrollToIndex} onLayout={
+    return (<view {...props} selected={props.selected || 0} onLeft={/* @once */chainFunctions(props.onLeft, onLeft)} onRight={/* @once */chainFunctions(props.onRight, onRight)} forwardFocus={navigableForwardFocus} scrollToIndex={scrollToIndex} onLayout={
         /* @once */
         props.selected ? chainFunctions(props.onLayout, scrollRow) : props.onLayout} onSelectedChanged={
         /* @once */ chainFunctions(props.onSelectedChanged, props.scroll !== 'none' ? scrollRow : undefined)} style={/* @once */combineStyles(props.style, RowStyles)}/>);

package/dist/src/primitives/Row.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Row.jsx","sourceRoot":"","sources":["../../../src/primitives/Row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAqC,MAAM,oBAAoB,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,qBAAqB,EAAE,yBAAyB,EACjD,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,MAAM,SAAS,GAAe;IAC5B,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,EAAE;IACP,UAAU,EAAE;QACV,CAAC,EAAE;YACD,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,aAAa;SACtB;KACF;CACF,CAAC;AAEF,SAAS,aAAa,CAAoB,KAAa;IACrD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACvB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,GAAwB,CAAC,KAAK,EAAE,EAAE;IAChD,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,CAC9B,MAAM,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAC5E,OAAO,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAC9E,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC;QACR,WAAW;QACX,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QACrE,CAAC,CACD,iBAAiB,CAAC,CAAC;QACjB,WAAW,CAAC,cAAc,CACxB,KAAK,CAAC,iBAAiB,EACvB,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAEnD,CAAC,CACD,KAAK,CAAC,CAAC,WAAY,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACzD,CACH,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Row.jsx","sourceRoot":"","sources":["../../../src/primitives/Row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAqC,MAAM,oBAAoB,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,MAAM,SAAS,GAAe;IAC5B,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,EAAE;IACP,UAAU,EAAE;QACV,CAAC,EAAE;YACD,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,aAAa;SACtB;KACF;CACF,CAAC;AAEF,SAAS,aAAa,CAAoB,KAAa;IACrD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACtB,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACvB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;AACnC,CAAC;AAED,MAAM,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;AACxC,MAAM,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE1C,MAAM,CAAC,MAAM,GAAG,GAAwB,CAAC,KAAK,EAAE,EAAE;IAChD,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,CAC9B,MAAM,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CACzD,OAAO,CAAC,CAAC,WAAY,cAAc,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAC5D,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,QAAQ,CAAC,CAAC;QACR,WAAW;QACX,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QACrE,CAAC,CACD,iBAAiB,CAAC,CAAC;QACjB,WAAW,CAAC,cAAc,CACxB,KAAK,CAAC,iBAAiB,EACvB,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAEnD,CAAC,CACD,KAAK,CAAC,CAAC,WAAY,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,EACzD,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/primitives/Virtual.d.ts

@@ -7,10 +7,11 @@ export type VirtualProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
     bufferSize?: number;
     wrap?: boolean;
     scrollIndex?: number;
-    doScroll?: lngp.Scroller;
     onEndReached?: () => void;
     onEndReachedThreshold?: number;
-    fallback?: s.JSX.Element;
+    debugInfo?: boolean;
+    factorScale?: boolean;
+    uniformSize?: boolean;
     children: (item: s.Accessor<T>, index: s.Accessor<number>) => s.JSX.Element;
 };
 export declare function VirtualRow<T>(props: VirtualProps<T>): lng.JSX.Element;

package/dist/src/primitives/Virtual.jsx

@@ -3,12 +3,10 @@ import * as lng from '@lightningtv/solid';
 import * as lngp from '@lightningtv/solid/primitives';
 import { List } from '@solid-primitives/list';
 import * as utils from '../utils.js';
-function createVirtual(component, props, scrollFn, keyHandlers) {
+function createVirtual(component, props, keyHandlers) {
     const [cursor, setCursor] = s.createSignal(props.selected ?? 0);
     const bufferSize = s.createMemo(() => props.bufferSize || 2);
-    const scrollIndex = s.createMemo(() => {
-        return props.scrollIndex || 0;
-    });
+    const scrollIndex = s.createMemo(() => props.scrollIndex || 0);
     const items = s.createMemo(() => props.each || []);
     const itemCount = s.createMemo(() => items().length);
     const scrollType = s.createMemo(() => props.scroll || 'auto');
@@ -18,158 +16,363 @@ function createVirtual(component, props, scrollFn, keyHandlers) {
         }
         return props.selected || 0;
     };
-    const start = () => {
-        if (itemCount() === 0)
+    let cachedScaledSize;
+    let targetPosition;
+    let cachedAnimationController;
+    const uniformSize = s.createMemo(() => {
+        return props.uniformSize !== false;
+    });
+    const [slice, setSlice] = s.createSignal({
+        start: 0,
+        slice: [],
+        selected: 0,
+        delta: 0,
+        shiftBy: 0,
+        atStart: true,
+    });
+    function normalizeDeltaForWindow(delta, windowLen) {
+        if (!windowLen)
             return 0;
-        if (props.wrap) {
-            return utils.mod(cursor() - Math.max(bufferSize(), scrollIndex()), itemCount());
-        }
-        if (scrollType() === 'always') {
-            return Math.min(Math.max(cursor() - bufferSize(), 0), itemCount() - props.displaySize - bufferSize());
+        const half = windowLen / 2;
+        if (delta > half)
+            return delta - windowLen;
+        if (delta < -half)
+            return delta + windowLen;
+        return delta;
+    }
+    function computeSize(selected = 0) {
+        if (uniformSize() && cachedScaledSize) {
+            return cachedScaledSize;
         }
-        if (scrollType() === 'auto') {
-            return utils.clamp(cursor() - Math.max(bufferSize(), scrollIndex()), 0, Math.max(0, itemCount() - props.displaySize - bufferSize()));
+        else if (viewRef) {
+            const gap = viewRef.gap || 0;
+            const isRow = component === lngp.Row;
+            const dimension = isRow ? 'width' : 'height';
+            const prevSelectedChild = viewRef.children[selected];
+            if (prevSelectedChild instanceof lng.ElementNode) {
+                const itemSize = prevSelectedChild[dimension] || 0;
+                const focusStyle = prevSelectedChild.style?.focus;
+                const scale = (focusStyle?.scale ?? prevSelectedChild.scale ?? 1);
+                const scaledSize = itemSize * (props.factorScale ? scale : 1) + gap;
+                cachedScaledSize = scaledSize;
+                return scaledSize;
+            }
         }
-        return utils.clamp(cursor() - bufferSize(), 0, Math.max(0, itemCount() - props.displaySize));
-    };
-    const end = () => {
-        if (itemCount() === 0)
-            return 0;
-        if (props.wrap) {
-            return (start() + props.displaySize + bufferSize()) % itemCount();
+        return 0;
+    }
+    function computeSlice(c, delta, prev) {
+        const total = itemCount();
+        if (total === 0)
+            return { start: 0, slice: [], selected: 0, delta, shiftBy: 0, atStart: true };
+        const length = props.displaySize + bufferSize();
+        let start = prev.start;
+        let selected = prev.selected;
+        let atStart = prev.atStart;
+        let shiftBy = -delta;
+        switch (scrollType()) {
+            case 'always':
+                if (props.wrap) {
+                    start = utils.mod(c - 1, total);
+                    selected = 1;
+                }
+                else {
+                    start = utils.clamp(c - bufferSize(), 0, Math.max(0, total - props.displaySize - bufferSize()));
+                    if (delta === 0 && c > 3) {
+                        shiftBy = c < 3 ? -c : -2;
+                        selected = 2;
+                    }
+                    else {
+                        selected =
+                            c < bufferSize()
+                                ? c
+                                : c >= total - props.displaySize
+                                    ? c - (total - props.displaySize) + bufferSize()
+                                    : bufferSize();
+                    }
+                }
+                break;
+            case 'auto':
+                if (props.wrap) {
+                    if (scrollIndex() && prev.selected < scrollIndex()) {
+                        start = total - 1;
+                        selected = Math.max(1, prev.selected + delta);
+                    }
+                    else {
+                        start = utils.mod(c - (scrollIndex() || 1), total);
+                        selected = Math.max(1, prev.selected);
+                    }
+                }
+                else {
+                    if (delta < 0) {
+                        // Moving left
+                        if (prev.start > 0 && prev.selected >= props.displaySize) {
+                            // Move selection left inside slice
+                            start = prev.start;
+                            selected = prev.selected - 1;
+                        }
+                        else if (prev.start > 0) {
+                            // Move selection left inside slice
+                            start = prev.start - 1;
+                            selected = prev.selected;
+                            // shiftBy = 0;
+                        }
+                        else if (prev.start === 0 && !prev.atStart) {
+                            start = 0;
+                            selected = prev.selected - 1;
+                            atStart = true;
+                        }
+                        else if (selected >= props.displaySize - 1) {
+                            // Shift window left, keep selection pinned
+                            start = 0;
+                            selected = prev.selected - 1;
+                        }
+                        else {
+                            start = 0;
+                            selected = prev.selected - 1;
+                            shiftBy = 0;
+                        }
+                    }
+                    else if (delta > 0) {
+                        // Moving right
+                        if (prev.selected < scrollIndex()) {
+                            // Move selection right inside slice
+                            start = prev.start;
+                            selected = prev.selected + 1;
+                            shiftBy = 0;
+                        }
+                        else if (prev.selected === scrollIndex()) {
+                            start = prev.start;
+                            selected = prev.selected + 1;
+                            atStart = false;
+                        }
+                        else if (prev.start === 0 && prev.selected === 0) {
+                            start = 0;
+                            selected = 1;
+                            atStart = false;
+                        }
+                        else if (prev.start >= total - props.displaySize) {
+                            // At end: clamp slice, selection drifts right
+                            start = prev.start;
+                            selected = c - start;
+                            shiftBy = 0;
+                        }
+                        else {
+                            // Shift window right, keep selection pinned
+                            start = prev.start + 1;
+                            selected = Math.max(prev.selected, scrollIndex() + 1);
+                            ;
+                        }
+                    }
+                    else {
+                        // Initial setup
+                        if (c > 0) {
+                            start = Math.min(c - (scrollIndex() || 1), total - props.displaySize - bufferSize());
+                            selected = Math.max(scrollIndex() || 1, c - start);
+                            shiftBy = total - c < 3 ? c - total : -1;
+                            atStart = false;
+                        }
+                        else {
+                            start = prev.start;
+                            selected = prev.selected;
+                        }
+                    }
+                }
+                break;
+            case 'edge':
+                const startScrolling = Math.max(1, props.displaySize - 1);
+                if (props.wrap) {
+                    if (delta > 0) {
+                        if (prev.selected < startScrolling) {
+                            selected = prev.selected + 1;
+                            shiftBy = 0;
+                        }
+                        else {
+                            start = utils.mod(prev.start + 1, total);
+                            selected = startScrolling;
+                        }
+                    }
+                    else if (delta < 0) {
+                        if (prev.selected > 1) {
+                            selected = prev.selected - 1;
+                            shiftBy = 0;
+                        }
+                        else {
+                            start = utils.mod(prev.start - 1, total);
+                            selected = 1;
+                        }
+                    }
+                    else {
+                        start = utils.mod(c - 1, total);
+                        selected = 1;
+                    }
+                }
+                else {
+                    if (delta === 0 && c > 0) {
+                        //initial setup
+                        selected = c > startScrolling ? startScrolling : c;
+                        start = Math.max(0, c - startScrolling + 1);
+                        shiftBy = c > startScrolling ? -1 : 0;
+                        atStart = c < startScrolling;
+                    }
+                    else if (delta > 0) {
+                        if (prev.selected < startScrolling - 1) {
+                            selected = prev.selected + 1;
+                            shiftBy = 0;
+                        }
+                        else {
+                            start = prev.start + 1;
+                            selected = prev.selected;
+                            atStart = false;
+                        }
+                    }
+                    else if (delta < 0) {
+                        if (prev.selected > 1) {
+                            selected = prev.selected - 1;
+                            shiftBy = 0;
+                        }
+                        else if (c > 1) {
+                            start = Math.max(0, c - 1);
+                            selected = 1;
+                        }
+                        else if (!atStart) {
+                            start = 0;
+                            selected = 0;
+                            atStart = true;
+                        }
+                        else {
+                            start = 0;
+                            selected = 0;
+                            shiftBy = 0;
+                            atStart = true;
+                        }
+                    }
+                }
+                break;
+            case 'none':
+            default:
+                start = 0;
+                selected = c;
+                shiftBy = 0;
+                break;
         }
-        return Math.min(itemCount(), start() + props.displaySize + bufferSize());
-    };
-    const getSlice = s.createMemo(() => {
-        if (itemCount() === 0)
-            return [];
-        if (!props.wrap) {
-            return items().slice(start(), end());
+        let newSlice = prev.slice;
+        if (start !== prev.start || newSlice.length === 0) {
+            newSlice = props.wrap
+                ? Array.from({ length }, (_, i) => items()[utils.mod(start + i, total)])
+                : items().slice(start, start + length);
         }
-        // Wrapping slice
-        const sIdx = start();
-        const eIdx = (sIdx + props.displaySize + bufferSize()) % itemCount();
-        if (sIdx < eIdx) {
-            return items().slice(sIdx, eIdx);
+        const state = { start, slice: newSlice, selected, delta, shiftBy, atStart };
+        if (props.debugInfo) {
+            console.log(`[Virtual]`, {
+                cursor: c,
+                delta,
+                start,
+                selected,
+                shiftBy,
+                slice: state.slice,
+            });
         }
-        return [...items().slice(sIdx), ...items().slice(0, eIdx)];
-    });
-    const [slice, setSlice] = s.createSignal(getSlice());
+        return state;
+    }
     let viewRef;
     function scrollToIndex(index) {
         if (itemCount() === 0)
             return;
-        let target = index;
-        if (props.wrap) {
-            target = utils.mod(index, itemCount());
-        }
-        else {
-            target = utils.clamp(index, 0, itemCount() - 1);
-        }
-        updateSelected([target]);
+        updateSelected([utils.clamp(index, 0, itemCount() - 1)]);
+    }
+    let lastNavTime = 0;
+    function getAdaptiveDuration(duration = 250) {
+        const now = performance.now();
+        const delta = now - lastNavTime;
+        lastNavTime = now;
+        if (delta < duration)
+            return delta;
+        return duration;
     }
     const onSelectedChanged = function (_idx, elm, _active, _lastIdx) {
         let idx = _idx;
         let lastIdx = _lastIdx || 0;
         let active = _active;
         const initialRun = idx === lastIdx;
+        const total = itemCount();
+        const isRow = component === lngp.Row;
+        const axis = isRow ? 'x' : 'y';
+        if (props.onSelectedChanged) {
+            props.onSelectedChanged.call(this, idx, this, active, lastIdx);
+        }
         if (initialRun && !props.wrap)
             return;
+        const rawDelta = idx - (lastIdx ?? 0);
+        const windowLen = elm?.children?.length ?? props.displaySize + bufferSize();
+        const delta = props.wrap
+            ? normalizeDeltaForWindow(rawDelta, windowLen)
+            : rawDelta;
         if (!initialRun) {
-            if (props.wrap) {
-                setCursor(c => utils.mod(c + idx - lastIdx, itemCount()));
-            }
-            else {
-                setCursor(c => utils.clamp(c + idx - lastIdx, 0, Math.max(0, itemCount() - 1)));
-            }
-            setSlice(getSlice());
-            const c = cursor();
-            const scroll = scrollType();
-            if (props.wrap) {
-                this.selected = Math.max(bufferSize(), scrollIndex());
-            }
-            else if (props.scrollIndex) {
-                this.selected = Math.min(c, props.scrollIndex);
-                if (c >= itemCount() - props.displaySize + bufferSize()) {
-                    this.selected = c - (itemCount() - props.displaySize) + bufferSize();
-                }
-            }
-            else if (scroll === 'always' || scroll === 'auto') {
-                if (c < bufferSize()) {
-                    this.selected = c;
-                }
-                else if (c >= itemCount() - props.displaySize) {
-                    this.selected = c - (itemCount() - props.displaySize) + bufferSize();
-                }
-                else {
-                    this.selected = bufferSize();
-                }
-            }
-            if (props.onEndReachedThreshold !== undefined && cursor() >= items().length - props.onEndReachedThreshold) {
+            setCursor(c => {
+                const next = c + delta;
+                return props.wrap
+                    ? utils.mod(next, total)
+                    : utils.clamp(next, 0, total - 1);
+            });
+            const newState = computeSlice(cursor(), delta, slice());
+            setSlice(newState);
+            elm.selected = newState.selected;
+            if (props.onEndReachedThreshold !== undefined &&
+                cursor() >= itemCount() - props.onEndReachedThreshold) {
                 props.onEndReached?.();
             }
+            if (newState.shiftBy === 0)
+                return;
         }
-        const isRow = component === lngp.Row;
-        const prevChildPos = isRow
-            ? this.x + active.x
-            : this.y + active.y;
+        const prevChildPos = (targetPosition ?? this[axis]) + active[axis];
         queueMicrotask(() => {
-            this.updateLayout();
-            if (this._initialPosition === undefined && props.wrap) {
-                this.offset = 0;
-                const axis = isRow ? 'x' : 'y';
-                this._initialPosition = this[axis];
-                if (scrollIndex() > 0) {
-                    active = this.children[1];
-                }
+            elm.updateLayout();
+            const childSize = computeSize(slice().selected);
+            if (cachedAnimationController && cachedAnimationController.state === 'running') {
+                cachedAnimationController.stop();
+                ;
             }
-            if (component === lngp.Row) {
-                this.lng.x = this._targetPosition = prevChildPos - active.x;
-            }
-            else {
-                this.lng.y = this._targetPosition = prevChildPos - active.y;
-            }
-            scrollFn(idx, elm, active, lastIdx);
+            this.lng[axis] = prevChildPos - active[axis];
+            let offset = this.lng[axis] + (childSize * slice().shiftBy);
+            targetPosition = offset;
+            cachedAnimationController = this.animate({ [axis]: offset }, { ...this.animationSettings, duration: getAdaptiveDuration(this.animationSettings?.duration) }).start();
         });
     };
-    const chainedOnSelectedChanged = lngp.chainFunctions(props.onSelectedChanged, onSelectedChanged);
-    const updateSelected = ([selected, _items]) => {
-        if (!viewRef || selected === undefined)
+    const updateSelected = ([sel, _items]) => {
+        if (!viewRef || sel === undefined || itemCount() === 0)
             return;
-        const sel = selected;
         const item = items()[sel];
-        let active = viewRef.children.find(x => x.item === item);
-        const lastSelected = viewRef.selected;
-        if (active instanceof lng.ElementNode) {
-            viewRef.selected = viewRef.children.indexOf(active);
-            chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
-            active.setFocus();
-        }
-        else {
-            setCursor(sel);
-            setSlice(getSlice());
-            queueMicrotask(() => {
-                viewRef.updateLayout();
-                active = viewRef.children.find(x => x.item === item);
-                if (active instanceof lng.ElementNode) {
-                    viewRef.selected = viewRef.children.indexOf(active);
-                    chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
-                }
-            });
-        }
+        setCursor(sel);
+        const newState = computeSlice(cursor(), 0, slice());
+        setSlice(newState);
+        queueMicrotask(() => {
+            viewRef.updateLayout();
+            if (slice().shiftBy) {
+                const isRow = component === lngp.Row;
+                const axis = isRow ? 'x' : 'y';
+                const childSize = computeSize(slice().selected);
+                viewRef.lng[axis] = viewRef.lng[axis] + (childSize * slice().shiftBy);
+                targetPosition = viewRef.lng[axis];
+            }
+            let activeIndex = viewRef.children.findIndex(x => x.item === item);
+            if (activeIndex === -1)
+                return;
+            viewRef.selected = activeIndex;
+            viewRef.children[activeIndex]?.setFocus();
+        });
     };
-    s.createEffect(s.on([() => props.selected, items], updateSelected));
+    s.createEffect(s.on([() => props.selected, items], updateSelected, { defer: true }));
     s.createEffect(s.on(items, () => {
-        if (!viewRef)
+        if (!viewRef || itemCount() === 0)
             return;
         if (cursor() >= itemCount()) {
-            setCursor(Math.max(0, itemCount() - 1));
+            setCursor(itemCount() - 1);
         }
-        setSlice(getSlice());
-    }, { defer: true }));
-    return (<view {...props} ref={lngp.chainRefs(el => { viewRef = el; }, props.ref)} selected={selected()} cursor={cursor()} {...keyHandlers} forwardFocus={/* @once */lngp.navigableForwardFocus} scrollToIndex={/* @once */scrollToIndex} onCreate={/* @once */props.selected
-            ? lngp.chainFunctions(props.onCreate, scrollFn)
-            : props.onCreate} onSelectedChanged={/* @once */chainedOnSelectedChanged} style={/* @once */lng.combineStyles(props.style, component === lngp.Row
+        const newState = computeSlice(cursor(), 0, slice());
+        setSlice(newState);
+        viewRef.selected = newState.selected;
+    }));
+    return (<view {...props} {...keyHandlers} ref={lngp.chainRefs(el => { viewRef = el; }, props.ref)} selected={selected()} cursor={cursor()} forwardFocus={/* @once */lngp.navigableForwardFocus} scrollToIndex={/* @once */scrollToIndex} onSelectedChanged={/* @once */onSelectedChanged} style={/* @once */lng.combineStyles(props.style, component === lngp.Row
             ? {
                 display: 'flex',
                 gap: 30,
@@ -181,19 +384,19 @@ function createVirtual(component, props, scrollFn, keyHandlers) {
                 gap: 30,
                 transition: { y: { duration: 250, easing: 'ease-out' } },
             })}>
-      <List each={slice()}>{props.children}</List>
+      <List each={slice().slice}>{props.children}</List>
     </view>);
 }
 export function VirtualRow(props) {
-    return createVirtual(lngp.Row, props, props.doScroll || lngp.withScrolling(true), {
-        onLeft: lngp.chainFunctions(props.onLeft, lngp.navigableHandleNavigation),
-        onRight: lngp.chainFunctions(props.onRight, lngp.navigableHandleNavigation),
+    return createVirtual(lngp.Row, props, {
+        onLeft: lngp.chainFunctions(props.onLeft, lngp.handleNavigation('left')),
+        onRight: lngp.chainFunctions(props.onRight, lngp.handleNavigation('right')),
     });
 }
 export function VirtualColumn(props) {
-    return createVirtual(lngp.Column, props, props.doScroll || lngp.withScrolling(false), {
-        onUp: lngp.chainFunctions(props.onUp, lngp.navigableHandleNavigation),
-        onDown: lngp.chainFunctions(props.onDown, lngp.navigableHandleNavigation),
+    return createVirtual(lngp.Column, props, {
+        onUp: lngp.chainFunctions(props.onUp, lngp.handleNavigation('up')),
+        onDown: lngp.chainFunctions(props.onDown, lngp.handleNavigation('down')),
     });
 }
 //# sourceMappingURL=Virtual.jsx.map