@lightningtv/solid 3.0.0-2 → 3.0.0-21

package/dist/src/primitives/utils/createBlurredImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBlurredImage.js","sourceRoot":"","sources":["../../../../src/primitives/utils/createBlurredImage.ts"],"names":[],"mappings":"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"}

package/dist/src/primitives/utils/createSpriteMap.d.ts

@@ -1,4 +1,4 @@
-import { type IRendererTexture } from '@lightningtv/core';
+import { type TextureMap } from '../../core/index.js';
 export interface SpriteDef {
     name: string | number;
     x: number;
@@ -6,4 +6,4 @@ export interface SpriteDef {
     width: number;
     height: number;
 }
-export declare function createSpriteMap(src: string, subTextures: SpriteDef[]): Record<string, IRendererTexture>;
+export declare function createSpriteMap(src: string, subTextures: SpriteDef[]): Record<string, InstanceType<TextureMap['SubTexture']>>;

package/dist/src/primitives/utils/createSpriteMap.js

@@ -1,4 +1,4 @@
-import { renderer } from '@lightningtv/core';
+import { renderer } from '../../core/index.js';
 export function createSpriteMap(src, subTextures) {
     const spriteMapTexture = renderer.createTexture('ImageTexture', {
         src,

package/dist/src/primitives/utils/createSpriteMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"createSpriteMap.js","sourceRoot":"","sources":["../../../../src/primitives/utils/createSpriteMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAUpE,MAAM,UAAU,eAAe,CAC7B,GAAW,EACX,WAAwB;IAExB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE;QAC9D,GAAG;KACJ,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC,MAAM,CAAmC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;QACrE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QAClC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,EAAE;YACjD,OAAO,EAAE,gBAAgB;YACzB,CAAC;YACD,CAAC;YACD,KAAK;YACL,MAAM;SACP,CAAC,CAAC;QACH,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}
+{"version":3,"file":"createSpriteMap.js","sourceRoot":"","sources":["../../../../src/primitives/utils/createSpriteMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAUhE,MAAM,UAAU,eAAe,CAC7B,GAAW,EACX,WAAwB;IAExB,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,EAAE;QAC9D,GAAG;KACJ,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC,MAAM,CAEvB,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;QACX,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QAClC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,EAAE;YACjD,OAAO,EAAE,gBAAgB;YACzB,CAAC;YACD,CAAC;YACD,KAAK;YACL,MAAM;SACP,CAA2C,CAAC;QAC7C,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/dist/src/primitives/utils/handleNavigation.d.ts

@@ -1,5 +1,79 @@
-import { ElementNode } from '@lightningtv/core';
-import { type KeyHandler } from '@lightningtv/core/focusManager';
-import type { OnSelectedChanged } from '../types.js';
-export declare function onGridFocus(onSelectedChanged: OnSelectedChanged | undefined): (this: ElementNode) => boolean;
-export declare function handleNavigation(direction: 'up' | 'right' | 'down' | 'left'): KeyHandler;
+import * as lng from '../../index.js';
+import * as lngp from '../index.js';
+/** @deprecated Use {@link navigableForwardFocus} instead */
+export declare function onGridFocus(_?: lngp.OnSelectedChanged): lng.ForwardFocusHandler;
+/**
+ * Forwards focus to the first focusable child of a {@link lngp.NavigableElement} and
+ * selects it.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   forwardFocus={navigableForwardFocus}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export declare const navigableForwardFocus: lng.ForwardFocusHandler;
+export declare function handleNavigation(direction: 'up' | 'right' | 'down' | 'left'): lng.KeyHandler;
+/**
+ * Handles navigation key events for navigable elements, \
+ * such as {@link lngp.Row} and {@link lngp.Column}.
+ *
+ * Uses {@link moveSelection} to select the next or previous child based on the key pressed.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   onUp={navigableHandleNavigation}
+ *   onDown={navigableHandleNavigation}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export declare const navigableHandleNavigation: lng.KeyHandler;
+/**
+ * Moves the selection within a {@link lngp.NavigableElement}.
+ */
+export declare function moveSelection(el: lngp.NavigableElement, delta: number): boolean;
+/**
+ * Forwards focus to the closest or first focusable child of a {@link lngp.NavigableElement} and
+ * selects it.
+ *
+ * To determine the closest child, it uses the distance between the center of the previous focused element
+ * and the center of each child element.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   forwardFocus={spatialForwardFocus}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export declare const spatialForwardFocus: lng.ForwardFocusHandler;
+/**
+ * Handles spatial navigation within a {@link lngp.NavigableElement} by moving focus
+ * based on the arrow keys pressed.
+ *
+ * This function allows for navigation in a grid-like manner for flex-wrap containers, \
+ * where pressing the arrow keys will either:
+ * - move focus to the next/prev child in the same row/column
+ * - or find the closest child in the next/prev row/column.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   display="flex"
+ *   flexWrap="wrap"
+ *   onUp={spatialHandleNavigation}
+ *   onDown={spatialHandleNavigation}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export declare const spatialHandleNavigation: lng.KeyHandler;

package/dist/src/primitives/utils/handleNavigation.js

@@ -1,81 +1,254 @@
-import { ElementNode, assertTruthy, Config } from '@lightningtv/core';
-export function onGridFocus(onSelectedChanged) {
-    return function () {
-        if (!this || this.children.length === 0)
-            return false;
-        this.selected = this.selected || 0;
-        let child = this.selected
-            ? this.children[this.selected]
-            : this.selectedNode;
-        while (child?.skipFocus) {
-            this.selected++;
-            child = this.children[this.selected];
+import * as s from 'solid-js';
+import * as lng from '../../index.js';
+function idxInArray(idx, arr) {
+    return idx === 0 || (idx >= 0 && idx < arr.length);
+}
+function findFirstFocusableChildIdx(el, from = 0, delta = 1) {
+    for (let i = from;; i += delta) {
+        if (!idxInArray(i, el.children)) {
+            if (el.wrap) {
+                i = (i + el.children.length) % el.children.length;
+            }
+            else
+                break;
         }
-        if (!(child instanceof ElementNode))
-            return false;
-        child.setFocus();
-        if (onSelectedChanged) {
-            const grid = this;
-            onSelectedChanged.call(grid, grid.selected, grid, child);
+        if (!el.children[i]?.skipFocus) {
+            return i;
         }
-        return true;
+    }
+    return -1;
+}
+function selectChild(el, index) {
+    const child = el.children[index];
+    if (child == null || child.skipFocus) {
+        el.selected = -1;
+        return false;
+    }
+    const lastSelected = el.selected;
+    el.selected = index;
+    if (!lng.isFocused(child)) {
+        child.setFocus();
+    }
+    // Always call onSelectedChanged on first focus for clients
+    el.onSelectedChanged?.(index, el, child, lastSelected);
+    return true;
+}
+/** @deprecated Use {@link navigableForwardFocus} instead */
+export function onGridFocus(_) {
+    return function () {
+        return navigableForwardFocus.call(this, this);
     };
 }
+/**
+ * Forwards focus to the first focusable child of a {@link lngp.NavigableElement} and
+ * selects it.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   forwardFocus={navigableForwardFocus}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const navigableForwardFocus = function () {
+    const navigable = this;
+    let selected = navigable.selected;
+    if (selected !== 0) {
+        selected = lng.clamp(selected, 0, this.children.length - 1);
+        while (!idxInArray(selected, this.children)) {
+            selected--;
+        }
+    }
+    selected = findFirstFocusableChildIdx(navigable, selected);
+    // update selected as firstfocusable maybe different if first element has skipFocus
+    navigable.selected = selected;
+    return selectChild(navigable, selected);
+};
 export function handleNavigation(direction) {
     return function () {
-        const numChildren = this.children.length;
-        const wrap = this.wrap;
-        const lastSelected = this.selected || 0;
-        if (numChildren === 0) {
+        return moveSelection(this, direction === 'up' || direction === 'left' ? -1 : 1);
+    };
+}
+/**
+ * Handles navigation key events for navigable elements, \
+ * such as {@link lngp.Row} and {@link lngp.Column}.
+ *
+ * Uses {@link moveSelection} to select the next or previous child based on the key pressed.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   onUp={navigableHandleNavigation}
+ *   onDown={navigableHandleNavigation}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const navigableHandleNavigation = function (e) {
+    return moveSelection(this, e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1);
+};
+/**
+ * Moves the selection within a {@link lngp.NavigableElement}.
+ */
+export function moveSelection(el, delta) {
+    let selected = findFirstFocusableChildIdx(el, el.selected + delta, delta);
+    if (selected === -1) {
+        if (!idxInArray(el.selected, el.children) ||
+            el.children[el.selected]?.skipFocus ||
+            lng.isFocused(el.children[el.selected])) {
             return false;
         }
-        if (direction === 'right' || direction === 'down') {
-            do {
-                this.selected = ((this.selected || 0) % numChildren) + 1;
-                if (this.selected >= numChildren) {
-                    if (!wrap) {
-                        this.selected = -1;
-                        break;
-                    }
-                    this.selected = 0;
-                }
-            } while (this.children[this.selected]?.skipFocus);
-        }
-        else if (direction === 'left' || direction === 'up') {
-            do {
-                this.selected = ((this.selected || 0) % numChildren) - 1;
-                if (this.selected < 0) {
-                    if (!wrap) {
-                        this.selected = -1;
-                        break;
-                    }
-                    this.selected = numChildren - 1;
-                }
-            } while (this.children[this.selected]?.skipFocus);
-        }
-        if (this.selected === -1) {
-            this.selected = lastSelected;
-            if (this.children[this.selected]?.states.has(Config.focusStateKey || '$focus')) {
-                // This child is already focused, so bubble up to next handler
-                return false;
+        selected = el.selected;
+    }
+    const active = el.children[selected];
+    if (el.plinko) {
+        // Set the next item to have the same selected index
+        // so we move up / down directly
+        const lastSelectedChild = el.children[el.selected];
+        lng.assertTruthy(lastSelectedChild instanceof lng.ElementNode);
+        const num = lastSelectedChild.selected || 0;
+        active.selected =
+            num < active.children.length ? num : active.children.length - 1;
+    }
+    return selectChild(el, selected);
+}
+function distanceBetweenRectCenters(a, b) {
+    const dx = Math.abs(a.x + a.width / 2 - (b.x + b.width / 2)) / 2;
+    const dy = Math.abs(a.y + a.height / 2 - (b.y + b.height / 2)) / 2;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+function findClosestFocusableChildIdx(el, prevEl) {
+    // select child closest to the previous active element
+    const prevRect = lng.getElementScreenRect(prevEl);
+    const elRect = lng.getElementScreenRect(el);
+    const childRect = { x: 0, y: 0, width: 0, height: 0 };
+    let closestIdx = -1;
+    let closestDist = Infinity;
+    for (const [idx, child] of el.children.entries()) {
+        if (!child.skipFocus) {
+            lng.getElementScreenRect(child, el, childRect);
+            childRect.x += elRect.x;
+            childRect.y += elRect.y;
+            const distance = distanceBetweenRectCenters(prevRect, childRect);
+            if (distance < closestDist) {
+                closestDist = distance;
+                closestIdx = idx;
             }
         }
-        const active = this.children[this.selected || 0];
-        assertTruthy(active instanceof ElementNode);
-        const navigableThis = this;
-        navigableThis.onSelectedChanged &&
-            navigableThis.onSelectedChanged.call(navigableThis, navigableThis.selected, navigableThis, active, lastSelected);
-        if (this.plinko) {
-            // Set the next item to have the same selected index
-            // so we move up / down directly
-            const lastSelectedChild = this.children[lastSelected];
-            assertTruthy(lastSelectedChild instanceof ElementNode);
-            const num = lastSelectedChild.selected || 0;
-            active.selected =
-                num < active.children.length ? num : active.children.length - 1;
-        }
-        active.setFocus();
-        return true;
-    };
+    }
+    return closestIdx;
 }
+/**
+ * Forwards focus to the closest or first focusable child of a {@link lngp.NavigableElement} and
+ * selects it.
+ *
+ * To determine the closest child, it uses the distance between the center of the previous focused element
+ * and the center of each child element.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   forwardFocus={spatialForwardFocus}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const spatialForwardFocus = function () {
+    const prevEl = s.untrack(lng.activeElement);
+    if (prevEl) {
+        const idx = findClosestFocusableChildIdx(this, prevEl);
+        const selected = selectChild(this, idx);
+        if (selected)
+            return true;
+    }
+    const idx = findFirstFocusableChildIdx(this);
+    return selectChild(this, idx);
+};
+/**
+ * Handles spatial navigation within a {@link lngp.NavigableElement} by moving focus
+ * based on the arrow keys pressed.
+ *
+ * This function allows for navigation in a grid-like manner for flex-wrap containers, \
+ * where pressing the arrow keys will either:
+ * - move focus to the next/prev child in the same row/column
+ * - or find the closest child in the next/prev row/column.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   display="flex"
+ *   flexWrap="wrap"
+ *   onUp={spatialHandleNavigation}
+ *   onDown={spatialHandleNavigation}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const spatialHandleNavigation = function (e) {
+    let selected = this.selected;
+    if (typeof selected !== 'number' || !idxInArray(selected, this.children)) {
+        selected = findFirstFocusableChildIdx(this);
+        return selectChild(this, selected);
+    }
+    const prevChild = this.children[selected];
+    const move = { x: 0, y: 0 };
+    switch (e.key) {
+        case 'ArrowLeft':
+            move.x = -1;
+            break;
+        case 'ArrowRight':
+            move.x = 1;
+            break;
+        case 'ArrowUp':
+            move.y = -1;
+            break;
+        case 'ArrowDown':
+            move.y = 1;
+            break;
+        default:
+            return false;
+    }
+    const flexDir = this.flexDirection === 'column' ? 'y' : 'x';
+    const crossDir = flexDir === 'x' ? 'y' : 'x';
+    const flexDelta = move[flexDir];
+    const crossDelta = move[crossDir];
+    // Select next/prev child in the current column/row
+    if (flexDelta !== 0) {
+        for (let i = selected + flexDelta; idxInArray(i, this.children); i += flexDelta) {
+            const child = this.children[i];
+            if (child.skipFocus)
+                continue;
+            // Different column/row
+            if (child[crossDir] !== prevChild[crossDir])
+                break;
+            return selectChild(this, i);
+        }
+    }
+    // Find child in next/prev column/row
+    else {
+        let closestIdx = -1;
+        let closestDist = Infinity;
+        for (let i = selected + crossDelta; idxInArray(i, this.children); i += crossDelta) {
+            const child = this.children[i];
+            if (child.skipFocus)
+                continue;
+            // Same column/row, skip
+            if (child[crossDir] === prevChild[crossDir])
+                continue;
+            // Different column/row, check distance
+            const distance = Math.abs(child[flexDir] - prevChild[flexDir]);
+            if (distance >= closestDist)
+                break; // getting further away
+            closestDist = distance;
+            closestIdx = i;
+        }
+        return selectChild(this, closestIdx);
+    }
+    return false;
+};
 //# sourceMappingURL=handleNavigation.js.map

package/dist/src/primitives/utils/handleNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"handleNavigation.js","sourceRoot":"","sources":["../../../../src/primitives/utils/handleNavigation.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"handleNavigation.js","sourceRoot":"","sources":["../../../../src/primitives/utils/handleNavigation.ts"],"names":[],"mappings":"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"}

package/dist/src/primitives/utils/withScrolling.d.ts

@@ -1,10 +1,22 @@
-import type { ElementNode, ElementText } from '@lightningtv/core';
+import type { ElementNode, ElementText } from '../../core/index.js';
+export type Scroller = (selected: number | ElementNode, component?: ElementNode, selectedElement?: ElementNode | ElementText, lastSelected?: number) => void;
 export interface ScrollableElement extends ElementNode {
     scrollIndex?: number;
+    scroll?: 'always' | 'none' | 'edge' | 'auto' | 'center' | 'bounded';
     selected: number;
     offset?: number;
     endOffset?: number;
+    upCount?: number;
+    onScrolled?: (elm: ScrollableElement, offset: number, isInitial: boolean) => void;
     _targetPosition?: number;
     _screenOffset?: number;
+    _initialPosition?: number;
 }
-export declare function withScrolling(isRow: boolean): (selected: number | ElementNode, component?: ElementNode, selectedElement?: ElementNode | ElementText, lastSelected?: number) => void;
+/**
+ * Checks if the selected index is in the non-scrollable zone (last upCount items).
+ */
+export declare function checkIsInNonScrollableZone(componentRef: ScrollableElement): boolean;
+/** @deprecated Use {@link scrollRow} or {@link scrollColumn} */
+export declare function withScrolling(isRow: boolean): Scroller;
+export declare const scrollRow: Scroller;
+export declare const scrollColumn: Scroller;

package/dist/src/primitives/utils/withScrolling.js

@@ -8,6 +8,17 @@ const isNotShown = (node) => {
   Edge starts scrolling when it reaches the edge of the viewport.
   Always scroll moves the list every time
 */
+/**
+ * Checks if the selected index is in the non-scrollable zone (last upCount items).
+ */
+export function checkIsInNonScrollableZone(componentRef) {
+    const totalItems = componentRef.children.length;
+    const upCount = componentRef.upCount || 6;
+    const selected = componentRef.selected || 0;
+    const nonScrollableZoneStart = Math.max(0, totalItems - upCount);
+    return selected >= nonScrollableZoneStart;
+}
+/** @deprecated Use {@link scrollRow} or {@link scrollColumn} */
 export function withScrolling(isRow) {
     const dimension = isRow ? 'width' : 'height';
     const axis = isRow ? 'x' : 'y';
@@ -19,17 +30,22 @@ export function withScrolling(isRow) {
         }
         if (!componentRef ||
             componentRef.scroll === 'none' ||
+            selected === lastSelected ||
             !componentRef.children.length)
             return;
+        if (componentRef._initialPosition === undefined) {
+            componentRef._initialPosition = componentRef[axis];
+        }
         const lng = componentRef.lng;
-        const screenSize = isRow ? lng.stage.root.width : lng.stage.root.height;
+        const screenSize = isRow ? lng.stage.root.w : lng.stage.root.h;
         // Determine if movement is incremental or decremental
         const isIncrementing = lastSelected === undefined || lastSelected - 1 !== selected;
         if (componentRef._screenOffset === undefined) {
             if (componentRef.parent.clipping) {
                 const p = componentRef.parent;
                 componentRef.endOffset =
-                    screenSize - ((isRow ? p.absX : p.absY) || 0) - p[dimension];
+                    componentRef.endOffset ??
+                        screenSize - ((isRow ? p.absX : p.absY) || 0) - p[dimension];
             }
             componentRef._screenOffset =
                 componentRef.offset ??
@@ -37,10 +53,16 @@ export function withScrolling(isRow) {
         }
         const screenOffset = componentRef._screenOffset;
         const gap = componentRef.gap || 0;
-        const scroll = componentRef.scroll || 'auto';
+        // when creating we set scroll to always so we setup the right location for selected and scrollIndex
+        const scroll = componentRef.scroll ||
+            (lastSelected === undefined
+                ? componentRef.scrollIndex
+                    ? 'center'
+                    : 'always'
+                : 'auto');
         // Allows manual position control
         const targetPosition = componentRef._targetPosition ?? componentRef[axis];
-        const rootPosition = isIncrementing || scroll === 'auto'
+        const rootPosition = isIncrementing
             ? Math.min(targetPosition, componentRef[axis])
             : Math.max(targetPosition, componentRef[axis]);
         componentRef.offset = componentRef.offset ?? rootPosition;
@@ -61,7 +83,7 @@ export function withScrolling(isRow) {
         const maxOffset = Math.min(screenSize -
             containerSize -
             screenOffset -
-            (componentRef.endOffset || 2 * gap), offset);
+            (componentRef.endOffset ?? 2 * gap), offset);
         // Determine the next element based on whether incrementing or decrementing
         const nextIndex = isIncrementing ? selected + 1 : selected - 1;
         const nextElement = componentRef.children[nextIndex] || null;
@@ -74,6 +96,37 @@ export function withScrolling(isRow) {
         else if (scroll === 'always') {
             nextPosition = -selectedPosition + offset;
         }
+        else if (scroll === 'bounded') {
+            const totalItems = componentRef.children.length;
+            const upCount = componentRef.upCount || 6;
+            const nonScrollableZoneStart = Math.max(0, totalItems - upCount);
+            const isInNonScrollableZone = selected >= nonScrollableZoneStart;
+            const isFirstOfNonScrollableZone = selected === nonScrollableZoneStart;
+            const isEnteringZone = isFirstOfNonScrollableZone &&
+                lastSelected !== undefined &&
+                lastSelected < nonScrollableZoneStart;
+            if (!isInNonScrollableZone) {
+                nextPosition = -selectedPosition + offset;
+            }
+            else if (isIncrementing) {
+                if (isEnteringZone) {
+                    const firstOfZoneElement = componentRef.children[nonScrollableZoneStart];
+                    const firstOfZonePosition = firstOfZoneElement?.[axis] ?? 0;
+                    nextPosition = firstOfZoneElement
+                        ? -firstOfZonePosition + offset
+                        : rootPosition;
+                }
+                else {
+                    nextPosition = rootPosition;
+                }
+            }
+            else if (isFirstOfNonScrollableZone) {
+                nextPosition = -selectedPosition + offset;
+            }
+            else {
+                nextPosition = rootPosition;
+            }
+        }
         else if (scroll === 'center') {
             const centerPosition = -selectedPosition +
                 (screenSize - selectedSizeScaled) / 2 -
@@ -99,7 +152,7 @@ export function withScrolling(isRow) {
                 }
             }
             else if (isIncrementing) {
-                nextPosition = -selectedPosition + offset;
+                nextPosition = rootPosition - selectedSize - gap;
             }
             else {
                 nextPosition = rootPosition + selectedSize + gap;
@@ -113,15 +166,21 @@ export function withScrolling(isRow) {
         }
         // Prevent container from moving beyond bounds
         nextPosition =
-            isIncrementing && scroll !== 'always'
+            isIncrementing && scroll !== 'always' && scroll !== 'bounded'
                 ? Math.max(nextPosition, maxOffset)
                 : Math.min(nextPosition, offset);
         // Update position if it has changed
         if (componentRef[axis] !== nextPosition) {
+            if (componentRef.onScrolled) {
+                const isInitial = nextPosition === componentRef._initialPosition;
+                componentRef.onScrolled(componentRef, nextPosition, isInitial);
+            }
             componentRef[axis] = nextPosition;
             // Store the new position to keep track during animations
             componentRef._targetPosition = nextPosition;
         }
     };
 }
+export const scrollRow = /* @__PURE__ */ withScrolling(true);
+export const scrollColumn = /* @__PURE__ */ withScrolling(false);
 //# sourceMappingURL=withScrolling.js.map