@forthtilliath/react-native-kit 0.2.0 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @forthtilliath/react-native-kit
 
-Small, dependency-free-of-app-theme React Native UI components, distributed one file per component so consumers only pull in what they use.
+Small React Native building blocks — components, hooks, and framework-agnostic utils — with no opinion on your app's theme, distributed one file per export so consumers only pull in what they use.
 
 ## Install
 
@@ -18,7 +18,7 @@ Or, from within this monorepo, as a workspace dependency:
 }
 ```
 
-`react` and `react-native` are peer dependencies — install them in the consuming app if not already present.
+`react` and `react-native` are peer dependencies — install them in the consuming app if not already present. `@expo/vector-icons`, `expo-image-picker`, `expo-speech-recognition`, and `react-native-gesture-handler` are also peer dependencies, needed only if you import the components that use them (`Thumbnail`/`PickerModal`/`SwipeableRow`, `PhotoPicker`, `VoiceSearchButton`/`PickerModal`, `SwipeableRow`, respectively).
 
 ## Usage
 
@@ -70,6 +70,166 @@ The component ships with neutral default styles and no opinion on your app's the
 
 Every field of `styles` is optional — pass only the ones you want to override; the rest fall back to the defaults (`ChangelogNotesStyles` in `ChangelogNotes.tsx`).
 
+### `<Thumbnail photoUri={...} placeholderIcon="..." />`
+
+List-row thumbnail: the photo if there is one, otherwise a placeholder icon.
+
+```tsx
+import { Thumbnail } from "@forthtilliath/react-native-kit/Thumbnail";
+
+<Thumbnail
+  photoUri={container.photoUri}
+  placeholderIcon="cube-outline"
+  size={48}
+/>;
+```
+
+### `<SwipeableRow onDelete={...} deleteLabel="...">`
+
+Swipe a list row left to reveal a delete button, on top of a tap to edit it.
+
+```tsx
+import { SwipeableRow } from "@forthtilliath/react-native-kit/SwipeableRow";
+
+<SwipeableRow
+  onDelete={() => remove(item.id)}
+  deleteLabel={`Delete ${item.name}`}
+>
+  <ItemRow item={item} />
+</SwipeableRow>;
+```
+
+### `<VoiceSearchButton onResult={...} />`
+
+Microphone button to dictate a search instead of typing it. Safe to mount more than one at a time (e.g. a name field plus a search picker on the same screen) — only the instance that started listening reacts to its result.
+
+```tsx
+import { VoiceSearchButton } from "@forthtilliath/react-native-kit/VoiceSearchButton";
+
+<VoiceSearchButton onResult={setQuery} lang="en-US" />;
+```
+
+### `<PhotoPicker photoUri={...} onChange={...} savePhoto={...} photoLabel="..." />`
+
+Photo picker (camera or library) with a preview and a remove link. `savePhoto` is injected rather than hard-coded, so where/how the picked image gets persisted is entirely up to the caller.
+
+```tsx
+import { PhotoPicker } from "@forthtilliath/react-native-kit/PhotoPicker";
+
+<PhotoPicker
+  photoUri={container.photoUri}
+  onChange={(uri) => setPhotoUri(uri)}
+  savePhoto={(sourceUri) => saveContainerPhoto(sourceUri)}
+  photoLabel="of the container"
+/>;
+```
+
+### `<PickerModal visible title items onSelect onClose />`
+
+Full-screen picker: search (typed or dictated via `VoiceSearchButton`), optional sections, and "add" actions always visible above the results.
+
+```tsx
+import {
+  PickerModal,
+  type PickerItem,
+} from "@forthtilliath/react-native-kit/PickerModal";
+
+<PickerModal
+  visible={pickerVisible}
+  title="Choose a container"
+  items={containers.map((c): PickerItem => ({
+    id: c.id,
+    label: c.name,
+    imageUri: c.photoUri,
+  }))}
+  onSelect={(item) => setContainerId(item.id)}
+  onClose={() => setPickerVisible(false)}
+  extraActions={[
+    {
+      label: "Add a new container",
+      onPress: () => router.push("/containers/new"),
+    },
+  ]}
+/>;
+```
+
+Groups results into sections via each item's `group` (e.g. food groups, ingredients vs recipes) — ignored while searching, where the best global matches are shown instead. Pass `filterItems` for custom ranking (e.g. `rankByNameMatch` from this same package's `utils/`) instead of the default case-insensitive substring match.
+
+For all 5 components above, styling and (where relevant) copy work the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults) and, for `PhotoPicker`/`PickerModal`, an optional `labels` prop for the built-in French copy.
+
+### `useSubmitGuard()`
+
+Prevents a second call while a first one is still pending — e.g. a double-tap on a "Save" button before it's had time to disable, which would otherwise create duplicate submissions.
+
+```tsx
+import { useSubmitGuard } from "@forthtilliath/react-native-kit/useSubmitGuard";
+
+const { isSaving, guard } = useSubmitGuard();
+
+<Pressable
+  disabled={isSaving}
+  onPress={() =>
+    guard(async () => {
+      await save();
+    })
+  }
+>
+  <Text>{isSaving ? "Saving…" : "Save"}</Text>
+</Pressable>;
+```
+
+### `useDebouncedChange(values, delayMs, callback)`
+
+Calls `callback` `delayMs` after the last change among `values`, ignoring renders where any value is still `undefined` (not loaded yet) and the very first render where they're all defined (no trigger on mount). A new change before the delay elapses resets the timer — a real debounce, not a throttle.
+
+```tsx
+import { useDebouncedChange } from "@forthtilliath/react-native-kit/useDebouncedChange";
+
+useDebouncedChange([settingsData, itemsData], 5 * 60 * 1000, () => {
+  runAutoBackup();
+});
+```
+
+### `confirmDestructive(title, onConfirm, options?)`
+
+Generic destructive-action confirmation (title + message + Cancel/Confirm), for anything irreversible (delete, reset...). Ships with French defaults (`message`, `cancelLabel`, `confirmLabel` all overridable).
+
+```ts
+import { confirmDestructive } from "@forthtilliath/react-native-kit/confirmDestructive";
+
+confirmDestructive("Delete this item?", () => deleteItem(id), {
+  message: "This cannot be undone.",
+  cancelLabel: "Cancel",
+  confirmLabel: "Delete",
+});
+```
+
+### Utils (`utils/`)
+
+Framework-agnostic pure functions — no React or React Native import, usable from Node/web too.
+
+```ts
+import { getPeriodStartMs } from "@forthtilliath/react-native-kit/utils/getPeriodStartMs";
+import { getMostRecentIds } from "@forthtilliath/react-native-kit/utils/getMostRecentIds";
+import { nextInCycle } from "@forthtilliath/react-native-kit/utils/nextInCycle";
+import { normalizeForSearch } from "@forthtilliath/react-native-kit/utils/normalizeForSearch";
+import { rankByNameMatch } from "@forthtilliath/react-native-kit/utils/rankByNameMatch";
+import { escapeCsvField } from "@forthtilliath/react-native-kit/utils/escapeCsvField";
+import { formatCsvNumber } from "@forthtilliath/react-native-kit/utils/formatCsvNumber";
+import { escapeHtml } from "@forthtilliath/react-native-kit/utils/escapeHtml";
+```
+
+| Function                                 | What it does                                                                                                                                                       |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `getPeriodStartMs(period, now?)`         | Start timestamp (ms) for a `"today" \| "7d" \| "30d" \| "all"` period filter, or `null` for `"all"`. `"today"` is the current calendar day, not a rolling 24h.     |
+| `getMostRecentIds(rows, limit?)`         | Most recently occurring distinct ids (`{ id, occurredAt }[]`), most recent first, deduplicated, limited (default 5).                                               |
+| `nextInCycle(ids, currentId)`            | Next id in a short list (e.g. cycling through recents on tap) — wraps to the first if `currentId` is at the end or no longer in the list.                          |
+| `normalizeForSearch(text)`               | Lowercases, trims, strips accents, and expands `œ`/`æ` ligatures (which `normalize("NFD")` alone doesn't decompose) — for accent/case-insensitive search matching. |
+| `rankByNameMatch(items, query, getName)` | Ranks `items` by relevance to `query`: earlier match position first, then shorter name — for a search-as-you-type list.                                            |
+| `escapeCsvField(value)`                  | Quotes and escapes a CSV field (RFC 4180) only if it contains a `"`, `;`, or newline.                                                                              |
+| `formatCsvNumber(value, decimals?)`      | Formats a number with a comma decimal separator (French-locale spreadsheets) instead of JS's dot.                                                                  |
+| `escapeHtml(text)`                       | Basic HTML entity escaping (`&`, `<`, `>`, `"`) for inserting user text into an HTML template.                                                                     |
+
 ## Scripts
 
 ```bash
@@ -85,4 +245,4 @@ Built to `dist/` (see the `exports` field in `package.json`), so run `pnpm run b
 
 ### Testing note
 
-`react-native`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details.
+`react-native`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details. `react-native-gesture-handler` ships the same kind of Flow syntax, and `@expo/vector-icons` has its own unrelated ESM-resolution issue under Vite/Rollup — both are stubbed the same way (`src/__mocks__/react-native-gesture-handler.tsx`, `src/__mocks__/expo-vector-icons.tsx`). `expo-speech-recognition` and `expo-image-picker` wrap native modules unavailable under Vitest regardless, so they're mocked with plain spies (`src/__mocks__/expo-speech-recognition.tsx`, `src/__mocks__/expo-image-picker.ts`).

package/dist/PhotoPicker.d.ts

@@ -0,0 +1,34 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface PhotoPickerStyles {
+    photoPicker?: StyleProp<ViewStyle>;
+    photoPreview?: StyleProp<ImageStyle>;
+    photoPlaceholder?: StyleProp<ViewStyle>;
+    photoPlaceholderText?: StyleProp<TextStyle>;
+    clearLink?: StyleProp<TextStyle>;
+    iconColor?: string;
+}
+export interface PhotoPickerLabels {
+    photoTitle?: (photoLabel: string) => string;
+    editAccessibilityLabel?: (photoLabel: string) => string;
+    addAccessibilityLabel?: (photoLabel: string) => string;
+    addPlaceholderText?: string;
+    cameraPermissionTitle?: string;
+    cameraPermissionMessage?: string;
+    libraryPermissionTitle?: string;
+    libraryPermissionMessage?: string;
+    takePhoto?: string;
+    chooseFromLibrary?: string;
+    cancel?: string;
+    removePhoto?: string;
+}
+export interface PhotoPickerProps {
+    photoUri: string | null;
+    onChange: (uri: string | null) => void;
+    savePhoto: (sourceUri: string) => Promise<string>;
+    /** Used as-is in titles/accessibility labels, e.g. "of the container". */
+    photoLabel: string;
+    labels?: PhotoPickerLabels;
+    styles?: PhotoPickerStyles;
+}
+export declare function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, styles, }: PhotoPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=PhotoPicker.d.ts.map

package/dist/PhotoPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoPicker.d.ts","sourceRoot":"","sources":["../src/PhotoPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAkDD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAoGlB"}

package/dist/PhotoPicker.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, Image, Pressable, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+const defaultStyles = {
+    photoPicker: { alignSelf: "center", marginTop: 8 },
+    photoPreview: {
+        width: 140,
+        height: 140,
+        borderRadius: 16,
+        backgroundColor: "#f9fafb",
+    },
+    photoPlaceholder: {
+        width: 140,
+        height: 140,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: "#e5e7eb",
+        backgroundColor: "#f9fafb",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6,
+    },
+    photoPlaceholderText: { fontSize: 12, color: "#6b7280" },
+    clearLink: {
+        color: "#2563eb",
+        fontSize: 13,
+        textAlign: "center",
+        marginTop: 8,
+    },
+    iconColor: "#6b7280",
+};
+const defaultLabels = {
+    photoTitle: (photoLabel) => `Photo ${photoLabel}`,
+    editAccessibilityLabel: (photoLabel) => `Photo ${photoLabel}. Modifier.`,
+    addAccessibilityLabel: (photoLabel) => `Ajouter une photo ${photoLabel}`,
+    addPlaceholderText: "Ajouter une photo",
+    cameraPermissionTitle: "Accès à l'appareil photo refusé",
+    cameraPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour prendre une photo.",
+    libraryPermissionTitle: "Accès aux photos refusé",
+    libraryPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour choisir une photo.",
+    takePhoto: "Prendre une photo",
+    chooseFromLibrary: "Choisir dans la galerie",
+    cancel: "Annuler",
+    removePhoto: "Retirer la photo",
+};
+// Photo picker (camera or library) with a preview.
+export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, styles, }) {
+    const mergedStyles = { ...defaultStyles, ...styles };
+    const t = { ...defaultLabels, ...labels };
+    async function pickFromCamera() {
+        const permission = await ImagePicker.requestCameraPermissionsAsync();
+        if (!permission.granted) {
+            Alert.alert(t.cameraPermissionTitle, t.cameraPermissionMessage);
+            return;
+        }
+        const result = await ImagePicker.launchCameraAsync({
+            mediaTypes: "images",
+            quality: 0.5,
+            allowsEditing: true,
+            aspect: [1, 1],
+        });
+        if (!result.canceled && result.assets[0]) {
+            onChange(await savePhoto(result.assets[0].uri));
+        }
+    }
+    async function pickFromLibrary() {
+        const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (!permission.granted) {
+            Alert.alert(t.libraryPermissionTitle, t.libraryPermissionMessage);
+            return;
+        }
+        const result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: "images",
+            quality: 0.5,
+            allowsEditing: true,
+            aspect: [1, 1],
+        });
+        if (!result.canceled && result.assets[0]) {
+            onChange(await savePhoto(result.assets[0].uri));
+        }
+    }
+    function handlePickPhoto() {
+        Alert.alert(t.photoTitle(photoLabel), undefined, [
+            {
+                text: t.takePhoto,
+                onPress: () => {
+                    void pickFromCamera();
+                },
+            },
+            {
+                text: t.chooseFromLibrary,
+                onPress: () => {
+                    void pickFromLibrary();
+                },
+            },
+            { text: t.cancel, style: "cancel" },
+        ]);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { style: mergedStyles.photoPicker, onPress: handlePickPhoto, accessibilityRole: "button", accessibilityLabel: photoUri
+                    ? t.editAccessibilityLabel(photoLabel)
+                    : t.addAccessibilityLabel(photoLabel), children: photoUri ? (_jsx(Image, { source: { uri: photoUri }, style: mergedStyles.photoPreview, accessibilityIgnoresInvertColors: true })) : (_jsxs(View, { style: mergedStyles.photoPlaceholder, children: [_jsx(Ionicons, { name: "camera-outline", size: 28, color: mergedStyles.iconColor }), _jsx(Text, { style: mergedStyles.photoPlaceholderText, children: t.addPlaceholderText })] })) }), photoUri ? (_jsx(Pressable, { onPress: () => {
+                    onChange(null);
+                }, accessibilityRole: "button", accessibilityLabel: t.removePhoto, children: _jsx(Text, { style: mergedStyles.clearLink, children: t.removePhoto }) })) : null] }));
+}

package/dist/PickerModal.d.ts

@@ -0,0 +1,67 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface PickerItem {
+    id: number;
+    label: string;
+    subtitle?: string;
+    imageUri?: string | null;
+    /**
+     * Groups results into sections (e.g. food groups, ingredients vs recipes)
+     * while browsing without searching. Ignored during an active search: the
+     * best global matches are shown instead, not the grouped-by-section list.
+     */
+    group?: string;
+}
+export interface PickerModalStyles {
+    container?: StyleProp<ViewStyle>;
+    header?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    close?: StyleProp<TextStyle>;
+    searchRow?: StyleProp<ViewStyle>;
+    search?: StyleProp<TextStyle>;
+    row?: StyleProp<ViewStyle>;
+    rowThumbnail?: StyleProp<ImageStyle>;
+    rowThumbnailPlaceholder?: StyleProp<ViewStyle>;
+    rowLabel?: StyleProp<TextStyle>;
+    rowSubtitle?: StyleProp<TextStyle>;
+    empty?: StyleProp<TextStyle>;
+    sectionHeader?: StyleProp<TextStyle>;
+    extraActions?: StyleProp<ViewStyle>;
+    extraActionLabel?: StyleProp<TextStyle>;
+    iconColor?: string;
+    placeholderTextColor?: string;
+}
+export interface PickerModalLabels {
+    close?: string;
+    searchPlaceholder?: string;
+    searchAccessibilityLabel?: string;
+    voiceSearchAccessibilityLabel?: string;
+    defaultEmptyMessage?: string;
+    otherGroupLabel?: string;
+}
+export interface PickerModalProps {
+    visible: boolean;
+    title: string;
+    items: PickerItem[];
+    onSelect: (item: PickerItem) => void;
+    onClose: () => void;
+    emptyMessage?: string;
+    /** Initial search text on open; defaults to empty. */
+    initialQuery?: string;
+    /** Custom filter (e.g. relevance ranking); defaults to a case-insensitive substring match. */
+    filterItems?: (items: PickerItem[], query: string) => PickerItem[];
+    /** "Add" actions always visible at the top, even when the search matches nothing. */
+    extraActions?: {
+        label: string;
+        onPress: () => void;
+    }[];
+    /**
+     * Explicit section order (e.g. "Recent" before others); sections default
+     * to alphabetical order by title. A group absent from this list is placed
+     * after, alphabetically.
+     */
+    groupOrder?: string[];
+    labels?: PickerModalLabels;
+    styles?: PickerModalStyles;
+}
+export declare function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, styles, }: PickerModalProps): import("react").JSX.Element;
+//# sourceMappingURL=PickerModal.d.ts.map

package/dist/PickerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerModal.d.ts","sourceRoot":"","sources":["../src/PickerModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAchF,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,uBAAuB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,UAAU,EAAE,CAAC;IACnE,qFAAqF;IACrF,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,EAAE,CAAC;IACxD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAuFD,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BA4JlB"}

package/dist/PickerModal.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Image, Modal, Pressable, SectionList, Text, TextInput, View, } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { VoiceSearchButton } from "./VoiceSearchButton.js";
+const defaultStyles = {
+    container: {
+        flex: 1,
+        backgroundColor: "#ffffff",
+        paddingTop: 60,
+        paddingHorizontal: 16,
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    title: { fontSize: 20, fontWeight: "700", color: "#111827" },
+    close: { fontSize: 16, color: "#2563eb" },
+    searchRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        marginBottom: 8,
+    },
+    search: {
+        backgroundColor: "#f9fafb",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        fontSize: 16,
+        color: "#111827",
+        flex: 1,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        backgroundColor: "#f9fafb",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        marginBottom: 8,
+    },
+    rowThumbnail: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+        backgroundColor: "#ffffff",
+    },
+    rowThumbnailPlaceholder: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+        backgroundColor: "#ffffff",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    rowLabel: { fontSize: 16, fontWeight: "600", color: "#111827" },
+    rowSubtitle: { fontSize: 13, color: "#6b7280", marginTop: 2 },
+    empty: { textAlign: "center", color: "#6b7280", marginTop: 24 },
+    sectionHeader: {
+        fontSize: 13,
+        fontWeight: "700",
+        color: "#6b7280",
+        textTransform: "uppercase",
+        marginTop: 8,
+        marginBottom: 6,
+    },
+    extraActions: { marginBottom: 4 },
+    extraActionLabel: { color: "#2563eb" },
+    iconColor: "#6b7280",
+    placeholderTextColor: "#6b7280",
+};
+const defaultLabels = {
+    close: "Fermer",
+    searchPlaceholder: "Rechercher…",
+    searchAccessibilityLabel: "Rechercher",
+    voiceSearchAccessibilityLabel: "Dicter la recherche",
+    defaultEmptyMessage: "Aucun résultat.",
+    otherGroupLabel: "Autres",
+};
+// Full-screen picker: search (typed or dictated), optional sections, and
+// "add" actions always visible above the results.
+export function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, styles, }) {
+    const merged = useMemo(() => ({ ...defaultStyles, ...styles }), [styles]);
+    const t = useMemo(() => ({ ...defaultLabels, ...labels }), [labels]);
+    const [query, setQuery] = useState(initialQuery ?? "");
+    // Reset the search each time the modal (re-)opens — adjusted during render
+    // rather than in an effect, since it only needs to happen once per
+    // visible-transition and must be visible in the very first render after it.
+    const [prevVisible, setPrevVisible] = useState(visible);
+    if (visible !== prevVisible) {
+        setPrevVisible(visible);
+        if (visible)
+            setQuery(initialQuery ?? "");
+    }
+    const isSearching = query.trim().length > 0;
+    const filtered = useMemo(() => {
+        if (!isSearching)
+            return items;
+        if (filterItems)
+            return filterItems(items, query);
+        const q = query.trim().toLowerCase();
+        return items.filter((item) => item.label.toLowerCase().includes(q));
+    }, [items, query, filterItems, isSearching]);
+    // Sections sorted by title: stable order, independent of the source
+    // groups' order. No sections during a search (results ranked by relevance,
+    // not by group), nor if no item has a group (uncategorized pickers,
+    // unchanged behavior).
+    const sections = useMemo(() => {
+        if (isSearching || !filtered.some((item) => item.group)) {
+            return [{ title: null, data: filtered }];
+        }
+        const byGroup = new Map();
+        for (const item of filtered) {
+            const key = item.group ?? t.otherGroupLabel;
+            const group = byGroup.get(key);
+            if (group)
+                group.push(item);
+            else
+                byGroup.set(key, [item]);
+        }
+        function sortIndex(groupTitle) {
+            const index = groupOrder?.indexOf(groupTitle) ?? -1;
+            return index === -1 ? (groupOrder?.length ?? 0) : index;
+        }
+        return [...byGroup.entries()]
+            .sort(([a], [b]) => sortIndex(a) - sortIndex(b) || a.localeCompare(b))
+            .map(([sectionTitle, data]) => ({ title: sectionTitle, data }));
+    }, [filtered, isSearching, groupOrder, t.otherGroupLabel]);
+    return (_jsx(Modal, { visible: visible, animationType: "slide", onRequestClose: onClose, children: _jsxs(View, { style: merged.container, children: [_jsxs(View, { style: merged.header, children: [_jsx(Text, { style: merged.title, children: title }), _jsx(Pressable, { onPress: onClose, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: t.close, children: _jsx(Text, { style: merged.close, children: t.close }) })] }), _jsxs(View, { style: merged.searchRow, children: [_jsx(TextInput, { style: merged.search, placeholder: t.searchPlaceholder, placeholderTextColor: merged.placeholderTextColor, value: query, onChangeText: setQuery, autoFocus: true, accessibilityLabel: t.searchAccessibilityLabel }), _jsx(VoiceSearchButton, { onResult: setQuery, accessibilityLabel: t.voiceSearchAccessibilityLabel })] }), _jsx(SectionList, { sections: sections, keyExtractor: (item) => String(item.id), keyboardShouldPersistTaps: "handled", stickySectionHeadersEnabled: false, ListHeaderComponent: extraActions && extraActions.length > 0 ? (_jsx(View, { style: merged.extraActions, children: extraActions.map((action) => (_jsxs(Pressable, { style: merged.row, onPress: action.onPress, accessibilityRole: "button", accessibilityLabel: action.label, children: [_jsx(Ionicons, { name: "add-circle-outline", size: 20, color: merged.iconColor }), _jsx(Text, { style: [merged.rowLabel, merged.extraActionLabel], children: action.label })] }, action.label))) })) : null, ListEmptyComponent: _jsx(Text, { style: merged.empty, children: emptyMessage ?? t.defaultEmptyMessage }), renderSectionHeader: ({ section: { title: sectionTitle }, }) => sectionTitle ? (_jsx(Text, { style: merged.sectionHeader, children: sectionTitle })) : null, renderItem: ({ item }) => (_jsxs(Pressable, { style: merged.row, onPress: () => {
+                            onSelect(item);
+                            setQuery("");
+                        }, accessibilityRole: "button", accessibilityLabel: item.subtitle ? `${item.label}, ${item.subtitle}` : item.label, children: [item.imageUri ? (_jsx(Image, { source: { uri: item.imageUri }, style: merged.rowThumbnail, accessibilityIgnoresInvertColors: true })) : item.imageUri === null ? (_jsx(View, { style: merged.rowThumbnailPlaceholder, children: _jsx(Ionicons, { name: "cube-outline", size: 18, color: merged.iconColor }) })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: merged.rowLabel, children: item.label }), item.subtitle ? (_jsx(Text, { style: merged.rowSubtitle, children: item.subtitle })) : null] })] })) })] }) }));
+}

package/dist/SwipeableRow.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface SwipeableRowStyles {
+    deleteAction?: StyleProp<ViewStyle>;
+    deleteActionText?: StyleProp<TextStyle>;
+    deleteIconColor?: string;
+}
+export interface SwipeableRowProps {
+    children: ReactNode;
+    onDelete: () => void;
+    deleteLabel: string;
+    deleteText?: string;
+    styles?: SwipeableRowStyles;
+}
+export declare function SwipeableRow({ children, onDelete, deleteLabel, deleteText, styles, }: SwipeableRowProps): import("react").JSX.Element;
+//# sourceMappingURL=SwipeableRow.d.ts.map

package/dist/SwipeableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../src/SwipeableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAiBD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAqB,EACrB,MAAM,GACP,EAAE,iBAAiB,+BA6BnB"}

package/dist/SwipeableRow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Pressable, Text } from "react-native";
+import { Swipeable } from "react-native-gesture-handler";
+import { Ionicons } from "@expo/vector-icons";
+const defaultStyles = {
+    deleteAction: {
+        backgroundColor: "#dc2626",
+        justifyContent: "center",
+        alignItems: "center",
+        width: 84,
+        marginBottom: 10,
+        borderRadius: 12,
+        gap: 2,
+    },
+    deleteActionText: { color: "#ffffff", fontSize: 11, fontWeight: "600" },
+    deleteIconColor: "#ffffff",
+};
+// Swipe a list row left to reveal a delete button, on top of a tap to edit it.
+export function SwipeableRow({ children, onDelete, deleteLabel, deleteText = "Delete", styles, }) {
+    const merged = { ...defaultStyles, ...styles };
+    const swipeableRef = useRef(null);
+    return (_jsx(Swipeable, { ref: swipeableRef, renderRightActions: () => (_jsxs(Pressable, { style: merged.deleteAction, onPress: () => {
+                swipeableRef.current?.close();
+                onDelete();
+            }, accessibilityRole: "button", accessibilityLabel: deleteLabel, children: [_jsx(Ionicons, { name: "trash-outline", size: 22, color: merged.deleteIconColor }), _jsx(Text, { style: merged.deleteActionText, children: deleteText })] })), children: children }));
+}

package/dist/Thumbnail.d.ts

@@ -0,0 +1,16 @@
+import type { ImageStyle, StyleProp, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+export interface ThumbnailStyles {
+    thumbnail?: StyleProp<ImageStyle>;
+    placeholder?: StyleProp<ViewStyle>;
+    iconColor?: string;
+}
+export interface ThumbnailProps {
+    photoUri: string | null;
+    /** Icon shown in place of a photo, e.g. "cube-outline", "restaurant-outline". */
+    placeholderIcon: keyof typeof Ionicons.glyphMap;
+    size?: number;
+    styles?: ThumbnailStyles;
+}
+export declare function Thumbnail({ photoUri, placeholderIcon, size, styles, }: ThumbnailProps): import("react").JSX.Element;
+//# sourceMappingURL=Thumbnail.d.ts.map

package/dist/Thumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../src/Thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,iFAAiF;IACjF,eAAe,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAgBD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,eAAe,EACf,IAAmB,EACnB,MAAM,GACP,EAAE,cAAc,+BAuBhB"}

package/dist/Thumbnail.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const DEFAULT_SIZE = 48;
+const defaultStyles = {
+    thumbnail: { borderRadius: 10, backgroundColor: "#f3f4f6" },
+    placeholder: {
+        borderRadius: 10,
+        backgroundColor: "#f3f4f6",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    iconColor: "#6b7280",
+};
+// List-row thumbnail (photo, or a placeholder icon when there is none).
+export function Thumbnail({ photoUri, placeholderIcon, size = DEFAULT_SIZE, styles, }) {
+    const merged = { ...defaultStyles, ...styles };
+    const dimensions = { width: size, height: size };
+    if (photoUri) {
+        return (_jsx(Image, { source: { uri: photoUri }, style: [dimensions, merged.thumbnail], accessibilityIgnoresInvertColors: true }));
+    }
+    return (_jsx(View, { style: [dimensions, merged.placeholder], children: _jsx(Ionicons, { name: placeholderIcon, size: Math.round(size * 0.46), color: merged.iconColor }) }));
+}

package/dist/VoiceSearchButton.d.ts

@@ -0,0 +1,14 @@
+export interface VoiceSearchButtonStyles {
+    iconColor?: string;
+    iconColorActive?: string;
+}
+export interface VoiceSearchButtonProps {
+    onResult: (transcript: string) => void;
+    accessibilityLabel?: string;
+    stopAccessibilityLabel?: string;
+    /** BCP 47 locale passed to the speech recognizer. */
+    lang?: string;
+    styles?: VoiceSearchButtonStyles;
+}
+export declare function VoiceSearchButton({ onResult, accessibilityLabel, stopAccessibilityLabel, lang, styles, }: VoiceSearchButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=VoiceSearchButton.d.ts.map

package/dist/VoiceSearchButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceSearchButton.d.ts","sourceRoot":"","sources":["../src/VoiceSearchButton.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAaD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,kBAAmC,EACnC,sBAA4C,EAC5C,IAAc,EACd,MAAM,GACP,EAAE,sBAAsB,+BAwDxB"}

package/dist/VoiceSearchButton.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Pressable } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { ExpoSpeechRecognitionModule, useSpeechRecognitionEvent, } from "expo-speech-recognition";
+const defaultStyles = {
+    iconColor: "#2563eb",
+    iconColorActive: "#dc2626",
+};
+// Microphone button to dictate a search instead of typing it. Recognition
+// events are global to the native module (not scoped to one instance): more
+// than one button can be mounted at the same time (e.g. a name field plus a
+// search picker on the same screen). `requestedRef` distinguishes the button
+// that started THIS session from other mounted instances, so only it reacts
+// to the result instead of all of them.
+export function VoiceSearchButton({ onResult, accessibilityLabel = "Voice search", stopAccessibilityLabel = "Stop voice search", lang = "en-US", styles, }) {
+    const merged = { ...defaultStyles, ...styles };
+    const [isListening, setIsListening] = useState(false);
+    const requestedRef = useRef(false);
+    useSpeechRecognitionEvent("start", () => {
+        if (requestedRef.current)
+            setIsListening(true);
+    });
+    useSpeechRecognitionEvent("end", () => {
+        if (requestedRef.current) {
+            setIsListening(false);
+            requestedRef.current = false;
+        }
+    });
+    useSpeechRecognitionEvent("error", () => {
+        if (requestedRef.current) {
+            setIsListening(false);
+            requestedRef.current = false;
+        }
+    });
+    useSpeechRecognitionEvent("result", (event) => {
+        if (!requestedRef.current)
+            return;
+        const transcript = event.results[0]?.transcript;
+        if (transcript)
+            onResult(transcript);
+    });
+    async function handlePress() {
+        if (isListening) {
+            ExpoSpeechRecognitionModule.stop();
+            return;
+        }
+        const permission = await ExpoSpeechRecognitionModule.requestPermissionsAsync();
+        if (!permission.granted)
+            return;
+        requestedRef.current = true;
+        ExpoSpeechRecognitionModule.start({ lang, interimResults: false });
+    }
+    return (_jsx(Pressable, { onPress: () => {
+            void handlePress();
+        }, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: isListening ? stopAccessibilityLabel : accessibilityLabel, children: _jsx(Ionicons, { name: isListening ? "mic" : "mic-outline", size: 20, color: isListening ? merged.iconColorActive : merged.iconColor }) }));
+}

package/dist/confirmDestructive.d.ts

@@ -0,0 +1,7 @@
+export interface ConfirmDestructiveOptions {
+    message?: string;
+    cancelLabel?: string;
+    confirmLabel?: string;
+}
+export declare function confirmDestructive(title: string, onConfirm: () => void, options?: ConfirmDestructiveOptions): void;
+//# sourceMappingURL=confirmDestructive.d.ts.map

package/dist/confirmDestructive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmDestructive.d.ts","sourceRoot":"","sources":["../src/confirmDestructive.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAQD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,IAAI,EACrB,OAAO,GAAE,yBAA8B,QAWxC"}

package/dist/confirmDestructive.js

@@ -0,0 +1,13 @@
+import { Alert } from "react-native";
+const DEFAULT_MESSAGE = "Cette action est définitive.";
+const DEFAULT_CANCEL_LABEL = "Annuler";
+const DEFAULT_CONFIRM_LABEL = "Supprimer";
+// Confirmation destructive générique (titre + message + Annuler/Confirmer),
+// pour toute action irréversible (suppression, réinitialisation...).
+export function confirmDestructive(title, onConfirm, options = {}) {
+    const { message = DEFAULT_MESSAGE, cancelLabel = DEFAULT_CANCEL_LABEL, confirmLabel = DEFAULT_CONFIRM_LABEL, } = options;
+    Alert.alert(title, message, [
+        { text: cancelLabel, style: "cancel" },
+        { text: confirmLabel, style: "destructive", onPress: onConfirm },
+    ]);
+}

package/dist/useDebouncedChange.d.ts

@@ -0,0 +1,2 @@
+export declare function useDebouncedChange(values: unknown[], delayMs: number, callback: () => void): void;
+//# sourceMappingURL=useDebouncedChange.d.ts.map

package/dist/useDebouncedChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedChange.d.ts","sourceRoot":"","sources":["../src/useDebouncedChange.ts"],"names":[],"mappings":"AASA,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,OAAO,EAAE,EACjB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,IAAI,QAkBrB"}

package/dist/useDebouncedChange.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from "react";
+// Déclenche `callback` `delayMs` après le dernier changement parmi `values`,
+// en ignorant tout rendu tant qu'au moins une valeur vaut `undefined` (ex: une
+// donnée pas encore chargée) et le tout premier rendu où elles le sont toutes
+// (pour éviter un déclenchement au montage). Le délai est annulé si une
+// nouvelle valeur arrive avant qu'il n'expire (vrai debounce). `values` doit
+// avoir la même longueur à chaque rendu, comme pour un tableau de
+// dépendances de useEffect classique.
+export function useDebouncedChange(values, delayMs, callback) {
+    const hasInitializedRef = useRef(false);
+    useEffect(() => {
+        if (values.some((value) => value === undefined))
+            return;
+        if (!hasInitializedRef.current) {
+            hasInitializedRef.current = true;
+            return;
+        }
+        const timeout = setTimeout(callback, delayMs);
+        return () => {
+            clearTimeout(timeout);
+        };
+        // eslint-disable-next-line @eslint-react/exhaustive-deps, react-hooks/exhaustive-deps -- `values` IS the dependency list, by design (caller-provided, variable length not expected to change).
+    }, values);
+}

package/dist/useSubmitGuard.d.ts

@@ -0,0 +1,5 @@
+export declare function useSubmitGuard(): {
+    isSaving: boolean;
+    guard: (action: () => Promise<void>) => Promise<void>;
+};
+//# sourceMappingURL=useSubmitGuard.d.ts.map

package/dist/useSubmitGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubmitGuard.d.ts","sourceRoot":"","sources":["../src/useSubmitGuard.ts"],"names":[],"mappings":"AAKA,wBAAgB,cAAc;;oBAGC,MAAM,OAAO,CAAC,IAAI,CAAC;EAWjD"}

package/dist/useSubmitGuard.js

@@ -0,0 +1,19 @@
+import { useState } from "react";
+// Empêche un second appel pendant qu'un premier est encore en cours (ex:
+// double-tap sur un bouton "Enregistrer" avant qu'il n'ait eu le temps de se
+// désactiver, qui créerait plusieurs soumissions identiques).
+export function useSubmitGuard() {
+    const [isSaving, setIsSaving] = useState(false);
+    async function guard(action) {
+        if (isSaving)
+            return;
+        setIsSaving(true);
+        try {
+            await action();
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }
+    return { isSaving, guard };
+}

package/dist/utils/escapeCsvField.d.ts

@@ -0,0 +1,2 @@
+export declare function escapeCsvField(value: string): string;
+//# sourceMappingURL=escapeCsvField.d.ts.map

package/dist/utils/escapeCsvField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escapeCsvField.d.ts","sourceRoot":"","sources":["../../src/utils/escapeCsvField.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGpD"}

package/dist/utils/escapeCsvField.js

@@ -0,0 +1,8 @@
+// Échappe un champ CSV (RFC 4180) : entoure de guillemets et double les
+// guillemets internes si la valeur contient un guillemet, un point-virgule
+// (délimiteur) ou un saut de ligne — sinon la valeur est renvoyée telle quelle.
+export function escapeCsvField(value) {
+    if (!/[";\n]/.test(value))
+        return value;
+    return `"${value.replace(/"/g, '""')}"`;
+}

package/dist/utils/escapeHtml.d.ts

@@ -0,0 +1,2 @@
+export declare function escapeHtml(text: string): string;
+//# sourceMappingURL=escapeHtml.d.ts.map

package/dist/utils/escapeHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"escapeHtml.d.ts","sourceRoot":"","sources":["../../src/utils/escapeHtml.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAM/C"}

package/dist/utils/escapeHtml.js

@@ -0,0 +1,9 @@
+// Échappement HTML basique (esperluette, chevrons, guillemets) pour insérer
+// du texte utilisateur dans un gabarit HTML sans dépendance de templating.
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}

package/dist/utils/formatCsvNumber.d.ts

@@ -0,0 +1,2 @@
+export declare function formatCsvNumber(value: number, decimals?: number): string;
+//# sourceMappingURL=formatCsvNumber.d.ts.map

package/dist/utils/formatCsvNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatCsvNumber.d.ts","sourceRoot":"","sources":["../../src/utils/formatCsvNumber.ts"],"names":[],"mappings":"AAGA,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAEnE"}

package/dist/utils/formatCsvNumber.js

@@ -0,0 +1,6 @@
+// Nombre brut (pas de suffixe d'unité) pour rester exploitable dans un
+// tableur (somme, moyenne...), avec la virgule décimale attendue par Excel
+// en locale française plutôt que le point de JS.
+export function formatCsvNumber(value, decimals = 1) {
+    return value.toFixed(decimals).replace(".", ",");
+}

package/dist/utils/getMostRecentIds.d.ts

@@ -0,0 +1,6 @@
+export interface RecentIdRow {
+    id: number | null;
+    occurredAt: string;
+}
+export declare function getMostRecentIds(rows: RecentIdRow[], limit?: number): number[];
+//# sourceMappingURL=getMostRecentIds.d.ts.map

package/dist/utils/getMostRecentIds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMostRecentIds.d.ts","sourceRoot":"","sources":["../../src/utils/getMostRecentIds.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,EAAE,EACnB,KAAK,SAAgB,GACpB,MAAM,EAAE,CAcV"}

package/dist/utils/getMostRecentIds.js

@@ -0,0 +1,19 @@
+const DEFAULT_LIMIT = 5;
+// Ids distincts les plus récents, du plus récent au plus ancien — utile pour
+// un sélecteur "récents" (aliment, récipient, ou tout autre entité datée).
+// `id` peut être null (référence supprimée depuis) : ignoré, on ne peut plus
+// le proposer.
+export function getMostRecentIds(rows, limit = DEFAULT_LIMIT) {
+    const sorted = [...rows].sort((a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime());
+    const seen = new Set();
+    const result = [];
+    for (const row of sorted) {
+        if (row.id == null || seen.has(row.id))
+            continue;
+        seen.add(row.id);
+        result.push(row.id);
+        if (result.length >= limit)
+            break;
+    }
+    return result;
+}

package/dist/utils/getPeriodStartMs.d.ts

@@ -0,0 +1,3 @@
+export type PeriodFilter = "all" | "today" | "7d" | "30d";
+export declare function getPeriodStartMs(period: PeriodFilter, now?: Date): number | null;
+//# sourceMappingURL=getPeriodStartMs.d.ts.map

package/dist/utils/getPeriodStartMs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getPeriodStartMs.d.ts","sourceRoot":"","sources":["../../src/utils/getPeriodStartMs.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAC;AAK1D,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,YAAY,EACpB,GAAG,OAAa,GACf,MAAM,GAAG,IAAI,CASf"}

package/dist/utils/getPeriodStartMs.js

@@ -0,0 +1,14 @@
+// Timestamp (ms) à partir duquel un enregistrement est inclus pour cette
+// période, ou null pour "all" (pas de filtre de date). "today" part du début
+// du jour calendaire courant, pas d'il y a 24h glissantes.
+export function getPeriodStartMs(period, now = new Date()) {
+    if (period === "all")
+        return null;
+    if (period === "today") {
+        const startOfDay = new Date(now);
+        startOfDay.setHours(0, 0, 0, 0);
+        return startOfDay.getTime();
+    }
+    const days = period === "7d" ? 7 : 30;
+    return now.getTime() - days * 24 * 60 * 60 * 1000;
+}

package/dist/utils/nextInCycle.d.ts

@@ -0,0 +1,2 @@
+export declare function nextInCycle(ids: number[], currentId: number | null): number | null;
+//# sourceMappingURL=nextInCycle.d.ts.map

package/dist/utils/nextInCycle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nextInCycle.d.ts","sourceRoot":"","sources":["../../src/utils/nextInCycle.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CACzB,GAAG,EAAE,MAAM,EAAE,EACb,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,MAAM,GAAG,IAAI,CAIf"}

package/dist/utils/nextInCycle.js

@@ -0,0 +1,9 @@
+// Élément suivant dans une liste courte (ex: cycler sur tap entre quelques
+// éléments récents). Reprend au début si l'actuel n'y est plus (supprimé, ou
+// hors de la liste) ou si on est en bout de liste.
+export function nextInCycle(ids, currentId) {
+    if (ids.length === 0)
+        return null;
+    const currentIndex = currentId == null ? -1 : ids.indexOf(currentId);
+    return ids[(currentIndex + 1) % ids.length] ?? null;
+}

package/dist/utils/normalizeForSearch.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeForSearch(text: string): string;
+//# sourceMappingURL=normalizeForSearch.d.ts.map

package/dist/utils/normalizeForSearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalizeForSearch.d.ts","sourceRoot":"","sources":["../../src/utils/normalizeForSearch.ts"],"names":[],"mappings":"AASA,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMvD"}

package/dist/utils/normalizeForSearch.js

@@ -0,0 +1,15 @@
+// Les ligatures œ/æ ne se décomposent PAS via normalize("NFD") (contrairement
+// aux lettres accentuées) : ce sont des lettres Unicode à part entière, pas
+// une base + un signe combinant. Sans ce remplacement explicite, chercher
+// "Œuf" (avec la vraie ligature) ne trouve jamais "Oeuf" dans une base qui
+// l'orthographie sans ligature (comme la plupart des bases de données texte).
+function expandLigatures(text) {
+    return text.replace(/[œŒ]/g, "oe").replace(/[æÆ]/g, "ae");
+}
+export function normalizeForSearch(text) {
+    return expandLigatures(text)
+        .normalize("NFD")
+        .replace(/[̀-ͯ]/g, "")
+        .toLowerCase()
+        .trim();
+}

package/dist/utils/rankByNameMatch.d.ts

@@ -0,0 +1,2 @@
+export declare function rankByNameMatch<T>(items: T[], query: string, getName: (item: T) => string): T[];
+//# sourceMappingURL=rankByNameMatch.d.ts.map

package/dist/utils/rankByNameMatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rankByNameMatch.d.ts","sourceRoot":"","sources":["../../src/utils/rankByNameMatch.ts"],"names":[],"mappings":"AAsBA,wBAAgB,eAAe,CAAC,CAAC,EAC/B,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAC3B,CAAC,EAAE,CAiBL"}

package/dist/utils/rankByNameMatch.js

@@ -0,0 +1,33 @@
+import { normalizeForSearch } from "./normalizeForSearch.js";
+// Cache le nom normalisé de chaque élément par référence d'objet : utile pour
+// des listes figées (constantes de module) cherchées à chaque frappe clavier
+// dans un champ de recherche, pour éviter de renormaliser tous les noms à
+// chaque appel.
+const normalizedNameCache = new WeakMap();
+function getNormalizedName(item, getName) {
+    if (typeof item !== "object" || item === null)
+        return normalizeForSearch(getName(item));
+    const cached = normalizedNameCache.get(item);
+    if (cached !== undefined)
+        return cached;
+    const normalized = normalizeForSearch(getName(item));
+    normalizedNameCache.set(item, normalized);
+    return normalized;
+}
+// Classe des éléments par pertinence vis-à-vis d'une recherche texte :
+// position du match dans le nom (plus tôt = plus pertinent), puis longueur
+// du nom. Générique pour être réutilisable par n'importe quelle liste
+// d'éléments ayant un nom affichable.
+export function rankByNameMatch(items, query, getName) {
+    const normalizedQuery = normalizeForSearch(query);
+    const matches = [];
+    for (const item of items) {
+        const matchIndex = getNormalizedName(item, getName).indexOf(normalizedQuery);
+        if (matchIndex !== -1) {
+            matches.push({ item, matchIndex });
+        }
+    }
+    matches.sort((a, b) => a.matchIndex - b.matchIndex ||
+        getName(a.item).length - getName(b.item).length);
+    return matches.map((m) => m.item);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -23,15 +23,23 @@
     "@forthtilliath/expo-release-updates": "0.2.0"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=15.0.0",
+    "expo-image-picker": ">=54.0.0",
+    "expo-speech-recognition": ">=1.0.0",
     "react": ">=19",
-    "react-native": ">=0.81"
+    "react-native": ">=0.81",
+    "react-native-gesture-handler": ">=2.20.0"
   },
   "devDependencies": {
+    "@expo/vector-icons": "^15.0.2",
     "@types/react": "^19.2.17",
     "@types/react-test-renderer": "^19.1.0",
     "eslint": "10.7.0",
+    "expo-image-picker": "~57.0.7",
+    "expo-speech-recognition": "^56.0.1",
     "react": "^19.2.7",
     "react-native": "0.86.0",
+    "react-native-gesture-handler": "~2.32.0",
     "react-test-renderer": "19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",