@sincpro/mobile-ui 1.0.1 → 2.0.0

package/dist/views/FormViewV2.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display } from "../Display/index.js";
 import { ErrorBoundary, Feedback } from "../Feedback/index.js";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
 import { useBottomInset } from "../layouts/BottomInset.js";
 import Container from "../layouts/Container.js";
 import { AppBar } from "../Navigation/Navigation.AppBar.js";
@@ -10,13 +11,31 @@ import { useTheme } from "../theme/index.js";
 import { FormViewProvider, useFormView } from "./FormViewV2.context.js";
 import React from "react";
 import { RefreshControl, View } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
-function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, withContainer = true, children, }) {
+const RefreshErrorContext = React.createContext(undefined);
+export async function refreshFormData(onRefresh, onRefreshError, setShowRefreshing) {
+    setShowRefreshing(true);
+    try {
+        await onRefresh?.();
+    }
+    catch (error) {
+        console.error("[FormViewV2] Refresh failed", error);
+        try {
+            onRefreshError?.(error);
+        }
+        catch (callbackError) {
+            console.error("[FormViewV2] onRefreshError callback failed", callbackError);
+        }
+    }
+    finally {
+        setShowRefreshing(false);
+    }
+}
+function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onBack, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
     const wrapperProps = withContainer
         ? { edges: ["bottom", "left", "right"] }
         : { style: { flex: 1 } };
-    return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+    return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
 }
 function Header({ variant = "default", tone, actions, children, topSpacing, background, }) {
     const { name, description, onBack } = useFormView();
@@ -36,24 +55,24 @@ function HeaderActionsBar({ children }) {
 function HeaderSegmented(props) {
     return _jsx(SegmentedControl, { ...props });
 }
-function Content({ withMargin = false, children, }) {
+function Content({ withMargin = false, keyboardToolbar = false, keyboardFormProps, children, }) {
     const { name, isLoading, isEmpty, hasError, errorMessage, item, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useFormView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
+    const onRefreshError = React.useContext(RefreshErrorContext);
     const handleRefresh = React.useCallback(async () => {
-        setShowRefreshing(true);
-        if (onRefresh) {
-            await onRefresh();
-        }
-        setShowRefreshing(false);
-    }, [onRefresh, setShowRefreshing]);
+        await refreshFormData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
     const isCenteredContent = isLoading || isEmpty || !item || hasError;
-    return (_jsx(KeyboardAwareScrollView, { bottomOffset: 20, contentContainerStyle: {
-            flexGrow: 1,
-            justifyContent: isCenteredContent ? "center" : "flex-start",
-            alignItems: isCenteredContent ? "center" : "stretch",
-            paddingBottom: bottomInset,
-        }, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { flex: 1, backgroundColor: theme.bg.page }, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
+    return (_jsx(KeyboardForm, { ...keyboardFormProps, contentContainerStyle: [
+            {
+                flexGrow: 1,
+                justifyContent: isCenteredContent ? "center" : "flex-start",
+                alignItems: isCenteredContent ? "center" : "stretch",
+                paddingBottom: bottomInset,
+            },
+            keyboardFormProps?.contentContainerStyle,
+        ], keyboardShouldPersistTaps: keyboardFormProps?.keyboardShouldPersistTaps ?? "handled", refreshControl: keyboardFormProps?.refreshControl ?? (_jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing })), style: [{ flex: 1, backgroundColor: theme.bg.page }, keyboardFormProps?.style], toolbar: keyboardToolbar, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
 }
 /**
  * @deprecated Content already handles isEmpty/!item by rendering Feedback.Empty internally.

package/dist/views/ListViewV2.context.d.ts

@@ -17,8 +17,9 @@ interface ListViewContextValue<T> {
     onBack?: () => void;
     onLoadMore?: () => void;
     loadingMore?: boolean;
+    hasMore: boolean;
 }
-export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, children, }: {
+export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, children, }: {
     name: string;
     description?: string;
     items: T[];
@@ -34,6 +35,7 @@ export declare function ListViewProvider<T>({ name, description, items, isLoadin
     onBack?: () => void;
     onLoadMore?: () => void;
     loadingMore?: boolean;
+    hasMore?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function useListView<T>(): ListViewContextValue<T>;

package/dist/views/ListViewV2.context.js

@@ -1,27 +1,47 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 const Context = createContext(null);
-export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, children, }) {
+export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, hasMore = true, children, }) {
     const [showRefreshing, setShowRefreshing] = useState(false);
-    return (_jsx(Context.Provider, { value: {
-            name,
-            description,
-            items,
-            isLoading,
-            hasError,
-            errorMessage,
-            readonly,
-            showRefreshing,
-            setShowRefreshing,
-            onRefresh,
-            onRetry,
-            onPressItem,
-            onDeleteItem,
-            onSearch,
-            onBack,
-            onLoadMore,
-            loadingMore,
-        }, children: children }));
+    const value = useMemo(() => ({
+        name,
+        description,
+        items,
+        isLoading,
+        hasError,
+        errorMessage,
+        readonly,
+        showRefreshing,
+        setShowRefreshing,
+        onRefresh,
+        onRetry,
+        onPressItem,
+        onDeleteItem,
+        onSearch,
+        onBack,
+        onLoadMore,
+        loadingMore,
+        hasMore,
+    }), [
+        name,
+        description,
+        items,
+        isLoading,
+        hasError,
+        errorMessage,
+        readonly,
+        showRefreshing,
+        onRefresh,
+        onRetry,
+        onPressItem,
+        onDeleteItem,
+        onSearch,
+        onBack,
+        onLoadMore,
+        loadingMore,
+        hasMore,
+    ]);
+    return _jsx(Context.Provider, { value: value, children: children });
 }
 export function useListView() {
     const context = useContext(Context);

package/dist/views/ListViewV2.d.ts

@@ -1,8 +1,9 @@
 import { type SearchHistoryProps } from "../Display/Display.SearchHistory.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
-import React, { ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { IRowItem } from "./types/IListView.js";
+import React, { ReactNode, type Ref } from "react";
+import { FlatList, type FlatListProps, type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
     name: string;
     description?: string;
@@ -12,6 +13,7 @@ interface ListViewProps<T> {
     errorMessage?: string;
     readonly?: boolean;
     onRefresh?: () => Promise<void>;
+    onRefreshError?: (error: unknown) => void;
     onRetry?: () => void;
     onPressItem?: (item: T) => void;
     onDeleteItem?: (item: T) => void;
@@ -21,11 +23,13 @@ interface ListViewProps<T> {
     onLoadMore?: () => void;
     /** Show a footer spinner while the next page loads. */
     loadingMore?: boolean;
+    hasMore?: boolean;
     backgroundColor?: string;
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
+export declare function refreshListData(onRefresh: (() => Promise<void>) | undefined, onRefreshError: ((error: unknown) => void) | undefined, setShowRefreshing: (value: boolean) => void): Promise<void>;
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
 interface HeaderProps {
     /** AppBar display variant. `large` = big title (list/index). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
@@ -79,14 +83,21 @@ declare function FilterChip({ label, active, onPress }: FilterChipProps): React.
 declare function FilterChips({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
-declare function Content({ children, withMargin, }: {
+type ListScrollProps = Pick<ScrollViewProps, "keyboardShouldPersistTaps" | "keyboardDismissMode" | "testID">;
+export type ListViewVirtualizationProps = Pick<FlatListProps<IRowItem<unknown>>, "initialNumToRender" | "maxToRenderPerBatch" | "windowSize" | "updateCellsBatchingPeriod" | "removeClippedSubviews" | "extraData" | "getItemLayout" | "onViewableItemsChanged" | "viewabilityConfig" | "onEndReachedThreshold" | "maintainVisibleContentPosition">;
+interface ListContentOptions {
+    listProps?: ListViewVirtualizationProps;
+    listRef?: Ref<FlatList<IRowItem<unknown>>>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+}
+declare function Content({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
     children?: (item: any) => ReactNode;
     withMargin?: boolean;
-}): React.JSX.Element;
-declare function ContentList({ children, contentWithMargin, }: {
+} & ListScrollProps & ListContentOptions): React.JSX.Element;
+declare function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
     children?: (item: any) => ReactNode;
     contentWithMargin: boolean;
-}): React.JSX.Element;
+} & ListScrollProps & ListContentOptions): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;

package/dist/views/ListViewV2.js

@@ -11,15 +11,34 @@ import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { ListViewProvider, useListView } from "./ListViewV2.context.js";
 import { toRowItems } from "./types/IListView.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
 import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
-function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, backgroundColor, withContainer = true, children, }) {
+const RefreshErrorContext = createContext(undefined);
+export async function refreshListData(onRefresh, onRefreshError, setShowRefreshing) {
+    setShowRefreshing(true);
+    try {
+        await onRefresh?.();
+    }
+    catch (error) {
+        console.error("[ListViewV2] Refresh failed", error);
+        try {
+            onRefreshError?.(error);
+        }
+        catch (callbackError) {
+            console.error("[ListViewV2] onRefreshError callback failed", callbackError);
+        }
+    }
+    finally {
+        setShowRefreshing(false);
+    }
+}
+function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, hasMore = true, backgroundColor, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
     const wrapperProps = withContainer
         ? { edges: ["bottom", "left", "right"] }
         : { className: "flex-1 bg-bg-page" };
     // Propagate contentWithMargin to ContentList via context
-    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isLoading: isLoading, items: items, loadingMore: loadingMore, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onLoadMore: onLoadMore, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, hasMore: hasMore, isLoading: isLoading, items: items, loadingMore: loadingMore, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onLoadMore: onLoadMore, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
 }
 function Header({ variant = "large", tone, actions, children, background, topSpacing, }) {
     const { name, description, onBack } = useListView();
@@ -29,6 +48,10 @@ function HeaderSearch({ searchQuery = "" }) {
     const { name, onSearch } = useListView();
     const [query, setQuery] = useState(searchQuery);
     const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+    const onSearchRef = React.useRef(onSearch);
+    useEffect(() => {
+        onSearchRef.current = onSearch;
+    }, [onSearch]);
     useEffect(() => {
         const timeout = setTimeout(() => {
             setDebouncedQuery(query);
@@ -36,10 +59,10 @@ function HeaderSearch({ searchQuery = "" }) {
         return () => clearTimeout(timeout);
     }, [query]);
     useEffect(() => {
-        if (onSearch && debouncedQuery !== undefined) {
-            onSearch(debouncedQuery);
+        if (debouncedQuery !== undefined) {
+            onSearchRef.current?.(debouncedQuery);
         }
-    }, [debouncedQuery, onSearch]);
+    }, [debouncedQuery]);
     if (!onSearch) {
         return null;
     }
@@ -95,50 +118,53 @@ function FilterChip({ label, active = false, onPress }) {
 function FilterChips({ children }) {
     return (_jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, gap: 8 }, horizontal: true, showsHorizontalScrollIndicator: false, style: { flexGrow: 0 }, children: children }));
 }
-function Content({ children, withMargin = true, }) {
+function rowKey(item) {
+    return String(item.id ?? item.index);
+}
+function Content({ children, withMargin = true, keyboardShouldPersistTaps = "handled", keyboardDismissMode = "none", testID, listProps, listRef, contentContainerStyle, }) {
     const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
+    const onRefreshError = useContext(RefreshErrorContext);
     const handleRefresh = useCallback(async () => {
-        setShowRefreshing(true);
-        if (onRefresh) {
-            await onRefresh();
-        }
-        setShowRefreshing(false);
-    }, [onRefresh, setShowRefreshing]);
+        await refreshListData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
     if (isLoading) {
         return _jsx(Feedback.Loading, { message: `Cargando ${name}...` });
     }
     if (hasError) {
-        return (_jsx(ScrollView, { contentContainerStyle: {
-                flexGrow: 1,
-                justifyContent: "center",
-                alignItems: "center",
-                paddingBottom: bottomInset,
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
+        return (_jsx(ScrollView, { contentContainerStyle: [
+                {
+                    flexGrow: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    paddingBottom: bottomInset,
+                },
+                contentContainerStyle,
+            ], keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, testID: testID, children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
     }
     if (items.length === 0) {
-        return (_jsx(ScrollView, { contentContainerStyle: {
-                flexGrow: 1,
-                justifyContent: "center",
-                alignItems: "center",
-                paddingBottom: bottomInset,
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Empty, {}) }));
+        return (_jsx(ScrollView, { contentContainerStyle: [
+                {
+                    flexGrow: 1,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    paddingBottom: bottomInset,
+                },
+                contentContainerStyle,
+            ], keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, testID: testID, children: _jsx(Feedback.Empty, {}) }));
     }
-    return (_jsxs(View, { style: { flex: 1, backgroundColor: theme.bg.page }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentWithMargin: withMargin, children: children })] }));
+    return (_jsxs(View, { style: { flex: 1, backgroundColor: theme.bg.page }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentContainerStyle: contentContainerStyle, contentWithMargin: withMargin, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, listProps: listProps, listRef: listRef, testID: testID, children: children })] }));
 }
-function ContentList({ children, contentWithMargin, }) {
-    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, } = useListView();
+function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }) {
+    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, hasMore, } = useListView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
     const rowItems = useMemo(() => toRowItems(items), [items]);
+    const onRefreshError = useContext(RefreshErrorContext);
     const handleRefresh = useCallback(async () => {
-        setShowRefreshing(true);
-        if (onRefresh) {
-            await onRefresh();
-        }
-        setShowRefreshing(false);
-    }, [onRefresh, setShowRefreshing]);
+        await refreshListData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
     const renderItem = useCallback(({ item }) => {
         if (children) {
             return _jsx(_Fragment, { children: children(item) });
@@ -153,7 +179,15 @@ function ContentList({ children, contentWithMargin, }) {
             marginTop: 2,
             paddingHorizontal: contentWithMargin ? 4 : 0,
             backgroundColor: theme.bg.page,
-        }, children: _jsx(FlatList, { contentContainerStyle: bottomInset ? { paddingBottom: bottomInset } : undefined, data: rowItems, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : undefined, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
+        }, children: _jsx(FlatList, { ...listProps, contentContainerStyle: [
+                bottomInset ? { paddingBottom: bottomInset } : undefined,
+                contentContainerStyle,
+            ], data: rowItems, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, keyExtractor: rowKey, ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : undefined, onEndReached: onLoadMore
+                ? () => {
+                    if (hasMore && !loadingMore && !showRefreshing)
+                        onLoadMore();
+                }
+                : undefined, onEndReachedThreshold: listProps?.onEndReachedThreshold ?? 0.5, ref: listRef, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false, testID: testID }) }));
 }
 function Footer({ children }) {
     const { items } = useListView();

package/dist/views/types/IListView.js

@@ -15,6 +15,7 @@ export function toRowItem(item, index, mapKeys) {
     if (typeof item === "string" || typeof item === "number") {
         return {
             id: item,
+            index,
             rowTitle: String(item),
             rowSubtitle: undefined,
             readonly: false,
@@ -22,11 +23,11 @@ export function toRowItem(item, index, mapKeys) {
     }
     const rowItem = Object.create(Object.getPrototypeOf(item));
     Object.assign(rowItem, item, {
-        id: item[mapper.id] || "N/A",
-        index: index,
-        rowTitle: item[mapper.rowTitle] || "N/A",
-        rowSubtitle: item[mapper.rowSubtitle] || undefined,
-        readonly: item[mapper.readOnly] || false,
+        id: item[mapper.id] ?? index,
+        index,
+        rowTitle: item[mapper.rowTitle] ?? "N/A",
+        rowSubtitle: item[mapper.rowSubtitle] ?? undefined,
+        readonly: item[mapper.readOnly] ?? false,
     });
     return rowItem;
 }

package/dist/widgets/CollectionOptions.d.ts

@@ -0,0 +1,15 @@
+import { type CollectionField, type CollectionQuery, type CriteriaField, type SavedCollectionQuery } from "../utils/criteria.js";
+export interface CollectionOptionsProps {
+    visible: boolean;
+    value: CollectionQuery;
+    fields: readonly CriteriaField[];
+    sortFields?: readonly CollectionField[];
+    groupFields?: readonly CollectionField[];
+    savedQueries?: readonly SavedCollectionQuery[];
+    onApply: (query: CollectionQuery) => void;
+    onClose: () => void;
+    onSave?: (label: string, query: CollectionQuery) => void | Promise<void>;
+    title?: string;
+    testID?: string;
+}
+export default function CollectionOptions(props: CollectionOptionsProps): import("react").JSX.Element | null;

package/dist/widgets/CollectionOptions.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import Button from "../Actions/Actions.Button.js";
+import IconButton from "../Actions/Actions.IconButton.js";
+import Input from "../Form/Form.Input.js";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { describeCriteria, moveCollectionEntry, validateCriteria, } from "../utils/criteria.js";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import FilterBuilder from "./FilterBuilder.js";
+import QueryChoice from "./QueryChoice.js";
+import { vars } from "nativewind";
+import { useState } from "react";
+import { Keyboard, Modal, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+export default function CollectionOptions(props) {
+    return props.visible ? _jsx(OptionsEditor, { ...props }) : null;
+}
+const sections = [
+    { id: "filter", label: "Filtros" },
+    { id: "sort", label: "Ordenar" },
+    { id: "group", label: "Agrupar" },
+    { id: "saved", label: "Guardados" },
+];
+function OptionsEditor({ value, fields, sortFields = [], groupFields = [], savedQueries = [], onApply, onClose, onSave, title = "Configurar colección", testID, }) {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+    const insets = useSafeAreaInsets();
+    const [draft, setDraft] = useState(value);
+    const [section, setSection] = useState("filter");
+    const [editing, setEditing] = useState(false);
+    const [label, setLabel] = useState("");
+    const [error, setError] = useState();
+    const [status, setStatus] = useState();
+    const [saving, setSaving] = useState(false);
+    const problem = () => validateCriteria(draft.filter, fields) ??
+        (draft.sort.some((sort) => !sortFields.some((field) => field.id === sort.field))
+            ? "El orden contiene un campo no disponible."
+            : undefined) ??
+        (draft.groupBy.some((id) => !groupFields.some((field) => field.id === id))
+            ? "El agrupado contiene un campo no disponible."
+            : undefined);
+    const close = () => {
+        if (!saving) {
+            Keyboard.dismiss();
+            onClose();
+        }
+    };
+    const ordered = section === "sort" ? draft.sort.map((entry) => entry.field) : draft.groupBy;
+    const available = section === "sort" ? sortFields : groupFields;
+    const updateOrder = (next) => setDraft((current) => section === "sort"
+        ? {
+            ...current,
+            sort: next.map((field) => current.sort.find((entry) => entry.field === field) ?? {
+                field,
+                direction: "asc",
+            }),
+        }
+        : { ...current, groupBy: next });
+    return (_jsx(Modal, { animationType: reducedMotion ? "none" : "slide", onRequestClose: close, presentationStyle: "fullScreen", visible: true, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: close, style: [
+                vars(themeToVars(theme)),
+                {
+                    flex: 1,
+                    backgroundColor: theme.bg.page,
+                    paddingTop: insets.top,
+                    paddingBottom: insets.bottom,
+                },
+            ], testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between gap-3 px-4", children: [_jsx(Typography.Text, { accessibilityRole: "header", semibold: true, style: { flex: 1, minWidth: 0 }, variant: "bodyReadable", children: title }), _jsx(IconButton, { accessibilityLabel: "Cancelar configuraci\u00F3n", disabled: saving, icon: "close", onPress: close })] }), _jsx(View, { accessibilityRole: "tablist", className: "flex-row flex-wrap px-4 gap-2", children: sections.map((item) => (_jsx(Pressable, { accessibilityLabel: item.label, accessibilityRole: "tab", accessibilityState: {
+                            selected: item.id === section,
+                            disabled: editing || saving,
+                        }, disabled: editing || saving, onPress: () => {
+                            Keyboard.dismiss();
+                            setSection(item.id);
+                            setError(undefined);
+                            setStatus(undefined);
+                        }, style: { minHeight: 48, justifyContent: "center", paddingHorizontal: 8 }, children: _jsx(Typography.Text, { className: section === item.id ? "text-text-accent" : "text-text-secondary", semibold: section === item.id, variant: "bodyLarge", children: item.label }) }, item.id))) }), _jsxs(KeyboardForm, { contentContainerStyle: { padding: 16, gap: 16 }, children: [!editing ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodyLarge", children: describeCriteria(draft.filter, fields) })) : null, section === "filter" ? (_jsx(FilterBuilder, { fields: fields, onChange: (filter) => {
+                                setError(undefined);
+                                setDraft({ ...draft, filter });
+                            }, onEditingChange: setEditing, value: draft.filter })) : section === "saved" ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { variant: "bodyReadable", children: "Una configuraci\u00F3n incluye b\u00FAsqueda, condiciones, orden y niveles de agrupaci\u00F3n. Cargarla todav\u00EDa no modifica la colecci\u00F3n." }), !savedQueries.length ? (_jsx(Typography.Text, { children: "No hay configuraciones guardadas." })) : (savedQueries.map((saved) => (_jsx(Button, { disabled: saving, onPress: () => {
+                                        setDraft(saved.query);
+                                        setError(undefined);
+                                        setStatus(`Configuración ${saved.label} cargada. Pulsa Aplicar configuración.`);
+                                    }, title: `Cargar ${saved.label}`, variant: "secondary" }, saved.id)))), onSave ? (_jsxs(_Fragment, { children: [_jsx(Input, { editable: !saving, label: "Nombre de la configuraci\u00F3n", onChangeText: setLabel, testID: "collection-query-name", value: label }), _jsx(Button, { loading: saving, onPress: () => {
+                                                const invalid = problem();
+                                                if (invalid || !label.trim()) {
+                                                    setError(invalid ?? "Escribe un nombre para guardar.");
+                                                    return;
+                                                }
+                                                setError(undefined);
+                                                setStatus(undefined);
+                                                setSaving(true);
+                                                Promise.resolve()
+                                                    .then(() => onSave(label.trim(), draft))
+                                                    .then(() => {
+                                                    setStatus("Configuración guardada. Pulsa Aplicar configuración para usarla.");
+                                                }, (cause) => {
+                                                    console.error("[CollectionOptions] Save failed", cause);
+                                                    setError("No se pudo guardar. Conservamos la configuración para reintentar.");
+                                                })
+                                                    .finally(() => setSaving(false));
+                                            }, title: "Guardar configuraci\u00F3n" })] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { variant: "bodyReadable", children: section === "sort"
+                                        ? "El primer campo tiene prioridad; los siguientes resuelven empates."
+                                        : "Los grupos se anidan en este orden. La app aplica los niveles al conjunto completo." }), !ordered.length ? (_jsx(Typography.Text, { children: section === "sort" ? "Sin orden configurado." : "Sin agrupación." })) : null, ordered.map((id, index) => {
+                                    const field = available.find((item) => item.id === id);
+                                    const sort = draft.sort.find((entry) => entry.field === id);
+                                    return (_jsxs(View, { className: "gap-2 border-b border-border-light pb-3", children: [_jsxs(Typography.Text, { semibold: true, variant: "bodyReadable", children: [index + 1, ". ", field?.label ?? `${id} (no disponible)`] }), section === "sort" ? (_jsx(Button, { onPress: () => setDraft({
+                                                    ...draft,
+                                                    sort: draft.sort.map((entry) => entry.field === id
+                                                        ? {
+                                                            ...entry,
+                                                            direction: entry.direction === "asc" ? "desc" : "asc",
+                                                        }
+                                                        : entry),
+                                                }), title: `${field?.label ?? id}: ${sort?.direction === "asc" ? (field?.ascLabel ?? "Ascendente") : (field?.descLabel ?? "Descendente")}`, variant: "secondary" })) : null, _jsxs(View, { className: "flex-row flex-wrap gap-2", children: [_jsx(Button, { accessibilityLabel: `Subir ${field?.label ?? id}`, disabled: index === 0, onPress: () => updateOrder(moveCollectionEntry(ordered, index, -1)), title: "Subir", variant: "link" }), _jsx(Button, { accessibilityLabel: `Bajar ${field?.label ?? id}`, disabled: index === ordered.length - 1, onPress: () => updateOrder(moveCollectionEntry(ordered, index, 1)), title: "Bajar", variant: "link" }), _jsx(Button, { accessibilityLabel: `Quitar ${field?.label ?? id}`, onPress: () => updateOrder(ordered.filter((key) => key !== id)), title: "Quitar", variant: "link" })] })] }, id));
+                                }), available.some((field) => !ordered.includes(field.id)) ? (_jsx(QueryChoice, { label: section === "sort"
+                                        ? "Añadir criterio de orden"
+                                        : "Añadir nivel de agrupación", onChange: (id) => updateOrder([...ordered, id]), options: available
+                                        .filter((field) => !ordered.includes(field.id))
+                                        .map((field) => ({ label: field.label, value: field.id })), value: undefined })) : null] })), status ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", children: status })) : null, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null] }), _jsxs(View, { className: "px-4 py-3 border-t border-border-light gap-2", children: [editing ? (_jsx(Typography.Text, { children: "Guarda o cancela la condici\u00F3n antes de aplicar." })) : null, _jsx(Button, { disabled: editing || saving, onPress: () => {
+                                const invalid = problem();
+                                if (invalid) {
+                                    setError(invalid);
+                                    return;
+                                }
+                                Keyboard.dismiss();
+                                onApply(draft);
+                            }, title: "Aplicar configuraci\u00F3n" })] })] }) }));
+}

package/dist/widgets/FilterBar.d.ts

@@ -0,0 +1,21 @@
+import { type SearchBarProps } from "../Navigation/Navigation.SearchBar.js";
+export interface FilterBarOption {
+    id: string;
+    label: string;
+    selected: boolean;
+    disabled?: boolean;
+}
+export interface FilterBarProps {
+    filters: readonly FilterBarOption[];
+    onFilterPress: (id: string) => void;
+    search?: SearchBarProps;
+    onOpenFilters?: () => void;
+    filtersLabel?: string;
+    onClearFilters?: () => void;
+    clearLabel?: string;
+    resultsLabel?: string;
+    layout?: "auto" | "scroll" | "wrap";
+    className?: string;
+    testID?: string;
+}
+export declare function FilterBar({ filters, onFilterPress, search, onOpenFilters, filtersLabel, onClearFilters, clearLabel, resultsLabel, layout, className, testID, }: FilterBarProps): import("react").JSX.Element;

package/dist/widgets/FilterBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";
+import IconButton from "../Actions/Actions.IconButton.js";
+import SearchBar from "../Navigation/Navigation.SearchBar.js";
+import Pressable from "../primitives/Pressable.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useWindowDimensions, View } from "react-native";
+export function FilterBar({ filters, onFilterPress, search, onOpenFilters, filtersLabel = "Más filtros", onClearFilters, clearLabel = "Limpiar filtros", resultsLabel, layout = "auto", className, testID, }) {
+    const { fontScale } = useWindowDimensions();
+    const selectedCount = filters.filter((filter) => filter.selected).length;
+    const filterLayout = layout === "auto" ? (fontScale > 1.3 ? "wrap" : "scroll") : layout;
+    return (_jsxs(View, { className: cn("gap-2", className), testID: testID, children: [search || onOpenFilters ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [search ? (_jsx(View, { className: "flex-1 min-w-0", children: _jsx(SearchBar, { ...search }) })) : null, onOpenFilters ? (_jsx(IconButton, { accessibilityLabel: filtersLabel, icon: "sliders", onPress: onOpenFilters })) : null] })) : null, _jsx(FilterButtonGroup, { className: "p-0", layout: filterLayout, testID: testID ? `${testID}-options` : undefined, children: filters.map((filter) => (_jsx(FilterButton, { active: filter.selected, disabled: filter.disabled, onPress: () => onFilterPress(filter.id), testID: testID ? `${testID}-${filter.id}` : undefined, title: filter.label, variant: "mobile" }, filter.id))) }), resultsLabel || (selectedCount > 0 && onClearFilters) ? (_jsxs(View, { className: "flex-row flex-wrap items-center justify-between gap-x-3", children: [resultsLabel ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-text-secondary", variant: "bodyLarge", children: resultsLabel })) : null, selectedCount > 0 && onClearFilters ? (_jsx(Pressable, { accessibilityLabel: clearLabel, accessibilityRole: "button", onPress: onClearFilters, style: { minHeight: 48, minWidth: 48, justifyContent: "center" }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodyLarge", children: clearLabel }) })) : null] })) : null] }));
+}

package/dist/widgets/FilterBuilder.d.ts

@@ -0,0 +1,10 @@
+import { type CriteriaField, type CriteriaGroup } from "../utils/criteria.js";
+export interface FilterBuilderProps {
+    fields: readonly CriteriaField[];
+    value: CriteriaGroup;
+    onChange: (value: CriteriaGroup) => void;
+    onEditingChange?: (editing: boolean) => void;
+    className?: string;
+    testID?: string;
+}
+export default function FilterBuilder({ fields, value, onChange, onEditingChange, className, testID, }: FilterBuilderProps): import("react").JSX.Element;