@forthtilliath/react-native-kit 0.13.0 → 0.14.1

package/README.md

@@ -1,6 +1,6 @@
 # @forthtilliath/react-native-kit
 
-Small React Native building blocks — components, hooks, and framework-agnostic utils — with no opinion on your app's theme, distributed one file per export (grouped under `components/{picker,theme,update,list,settings}/`, `hooks/`, `utils/{format,helpers}/`) so consumers only pull in what they use.
+Small React Native building blocks — components, hooks, and a framework-agnostic util — with no opinion on your app's theme, distributed one file per export (grouped under `components/{picker,theme,list,settings}/`, `hooks/`, `utils/helpers/`) so consumers only pull in what they use. Update-checking UI (`ChangelogNotes`, `UpdateAvailableBanner`, `useUpdateCheck`) lives in the sibling `@forthtilliath/expo-release-updates-ui` package instead.
 
 ## Install
 
@@ -25,7 +25,7 @@ Or, from within this monorepo, as a workspace dependency:
 Each component is its own module — import the file you need directly:
 
 ```ts
-import { ChangelogNotes } from "@forthtilliath/react-native-kit/components/update/ChangelogNotes";
+import { PhotoPicker } from "@forthtilliath/react-native-kit/components/picker/PhotoPicker";
 ```
 
 This is the recommended way to import: Metro (React Native's bundler) doesn't reliably tree-shake, so pulling from a single deep-import path keeps peer dependencies you don't use (`expo-image-picker`, `expo-speech-recognition`, `react-native-gesture-handler`...) out of your bundle entirely, rather than merely unused.
@@ -33,56 +33,11 @@ This is the recommended way to import: Metro (React Native's bundler) doesn't re
 A root barrel is also available for convenience:
 
 ```ts
-import {
-  ChangelogNotes,
-  useSubmitGuard,
-} from "@forthtilliath/react-native-kit";
+import { PhotoPicker, useSubmitGuard } from "@forthtilliath/react-native-kit";
 ```
 
 **Avoid the barrel under Jest (or any other CommonJS `require` consumer).** `export * from` re-exports are evaluated eagerly on `require()` — unlike Metro's ESM bundling, there's no tree-shaking to skip the unused ones. Requiring the barrel from _any_ file, even one that only wants a framework-agnostic util like `getMostRecentIds`, pulls in every component's module graph, including native-module imports (`expo-speech-recognition` via `VoiceSearchButton`/`PickerModal`) that don't exist in a Jest environment — this throws `Cannot find native module '...'` at require time, not just at runtime for an unrendered component. Deep imports only ever load the one module you asked for, so they don't have this problem in any environment.
 
-### `<ChangelogNotes notes={...} styles={...} />`
-
-Renders GitHub-style release notes — as produced by `@forthtilliath/expo-release-updates`'s `parseChangelogNotes` — as headings, bulleted items, and bold-aware text, instead of showing the raw Markdown syntax in a plain `Text`.
-
-```tsx
-<ChangelogNotes notes={release.notes} />
-```
-
-It understands the small subset of Markdown GitHub release notes actually use:
-
-| `notes` input                             | Rendered as                                                                 |
-| ----------------------------------------- | --------------------------------------------------------------------------- |
-| `### Added`                               | a heading `Text` — `"Added"`                                                |
-| `- Export history to CSV.`                | a row (`View`) with a `•` bullet `Text` and an item `Text`                  |
-| `**Auto-backup**: saves every 5 minutes.` | a plain `Text`, with the bold segment split into its own bold-styled `Text` |
-
-A full example, mixing all three:
-
-```tsx
-<ChangelogNotes
-  notes={`### Added\n- **Auto-backup**: saves every 5 minutes.\n- Export history to CSV.\n\nSee the full changelog for details.`}
-/>
-```
-
-The component ships with neutral default styles and no opinion on your app's theme. Override any subset via the `styles` prop to match your colors/dark mode:
-
-```tsx
-<ChangelogNotes
-  notes={release.notes}
-  styles={{
-    heading: { color: colors.text, fontWeight: "700" },
-    itemRow: { gap: 8 },
-    bullet: { color: colors.primary },
-    itemText: { color: colors.textMuted },
-    text: { color: colors.textMuted },
-    bold: { color: colors.text, fontWeight: "700" },
-  }}
-/>
-```
-
-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.
@@ -345,51 +300,9 @@ import { ThemeOptionList } from "@forthtilliath/react-native-kit/components/them
 <ThemeOptionList value={themePreference} onChange={setThemePreference} />;
 ```
 
-### `useUpdateCheck(options)`
-
-Checks once per mount (e.g. app launch) whether a newer release is available, throttled to at most one real check per `minIntervalMs` (default 12h) and silent for a release the user already dismissed. Has no opinion on where "when did we last check" / "which version did the user dismiss" are persisted — both are read/written entirely through the options you pass in.
-
-```tsx
-import { useUpdateCheck } from "@forthtilliath/react-native-kit/hooks/useUpdateCheck";
-
-const update = useUpdateCheck({
-  currentVersion: Constants.expoConfig?.version ?? "0.0.0",
-  checkForUpdate: fetchLatestRelease,
-  compareVersions,
-  getLastCheck: () => ({
-    lastCheckedAt: settings?.lastUpdateCheckAt ?? null,
-    dismissedVersion: settings?.dismissedUpdateVersion ?? null,
-  }),
-  onChecked: (lastCheckedAt) =>
-    updateSettings({ lastUpdateCheckAt: lastCheckedAt }),
-});
-
-if (update.status === "available") {
-  // update.release.version / .notes / .apkUrl
-}
-```
-
-### `<UpdateAvailableBanner version notes onPress onDismiss />`
-
-Dismissible banner announcing an available update: version, release notes (rendered via `ChangelogNotes`), an action button and a dismiss button. Has no opinion on what the action does (e.g. navigate to an update screen) or on how/whether dismissal is persisted.
-
-```tsx
-import { UpdateAvailableBanner } from "@forthtilliath/react-native-kit/components/update/UpdateAvailableBanner";
-
-{
-  update.status === "available" && (
-    <UpdateAvailableBanner
-      version={update.release.version}
-      notes={update.release.notes}
-      onPress={() => router.push("/settings/update")}
-      onDismiss={() => {
-        dismissUpdateVersion(update.release.version);
-        update.dismiss();
-      }}
-    />
-  );
-}
-```
+> `useUpdateCheck`, `<UpdateAvailableBanner>` and `<ChangelogNotes>` moved to
+> [`@forthtilliath/expo-release-updates-ui`](../expo-release-updates-ui#readme) —
+> install that package alongside this one if you need them.
 
 ### Settings screens (`components/settings/`)
 
@@ -528,7 +441,7 @@ import { ThemeSettingsScreen } from "@forthtilliath/react-native-kit/components/
 
 #### `<UpdateSettingsScreen currentVersion checkForUpdate compareVersions downloadAndInstallApk />`
 
-The full "check for update" screen: installed version, a manual check button, the available-update box (changelog + install button) or an up-to-date/error message, download progress, and — if `fetchReleaseHistory` is passed — a list of past releases. Checks automatically once on mount. Pairs naturally with `@forthtilliath/expo-release-updates` and `useUpdateCheck`/`UpdateAvailableBanner` above (same `checkForUpdate`/`compareVersions` you already pass those), but takes plain functions so it isn't tied to that package's exact shape.
+The full "check for update" screen: installed version, a manual check button, the available-update box (changelog + install button) or an up-to-date/error message, download progress, and — if `fetchReleaseHistory` is passed — a list of past releases. Checks automatically once on mount. Renders release notes via `@forthtilliath/expo-release-updates-ui`'s `ChangelogNotes`, and pairs naturally with that package's `useUpdateCheck`/`UpdateAvailableBanner` (same `checkForUpdate`/`compareVersions` you already pass those), but takes plain functions so it isn't tied to that package's exact shape.
 
 ```tsx
 import { UpdateSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/UpdateSettingsScreen";
@@ -657,31 +570,20 @@ import { PrivacySettingsScreen } from "@forthtilliath/react-native-kit/component
 
 For all 7 components above, styling works the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults), and where relevant an optional `labels` prop for the built-in French copy.
 
-### Utils (`utils/`)
+### Utils (`utils/helpers/`)
+
+`confirmDestructive` is the only remaining util here — it wraps React Native's `Alert`, so it isn't framework-agnostic (see its own section above).
 
-Framework-agnostic pure functions — no React or React Native import, usable from Node/web too.
+The framework-agnostic helpers that used to live here (`getPeriodStartMs`, `getMostRecentIds`, `nextInCycle`, `normalizeForSearch`, `rankByNameMatch`, `escapeCsvField`, `formatCsvNumber`, `escapeHtml`) moved to [`@forthtilliath/ts-kit`](../ts-kit#readme) — no React Native dependency on them, so they're usable from Node/web too. They're still re-exported from this package's root barrel for convenience:
 
 ```ts
-import { getPeriodStartMs } from "@forthtilliath/react-native-kit/utils/helpers/getPeriodStartMs";
-import { getMostRecentIds } from "@forthtilliath/react-native-kit/utils/helpers/getMostRecentIds";
-import { nextInCycle } from "@forthtilliath/react-native-kit/utils/helpers/nextInCycle";
-import { normalizeForSearch } from "@forthtilliath/react-native-kit/utils/helpers/normalizeForSearch";
-import { rankByNameMatch } from "@forthtilliath/react-native-kit/utils/helpers/rankByNameMatch";
-import { escapeCsvField } from "@forthtilliath/react-native-kit/utils/format/escapeCsvField";
-import { formatCsvNumber } from "@forthtilliath/react-native-kit/utils/format/formatCsvNumber";
-import { escapeHtml } from "@forthtilliath/react-native-kit/utils/format/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.                                                                     |
+import {
+  getPeriodStartMs,
+  getMostRecentIds,
+} from "@forthtilliath/react-native-kit";
+```
+
+Prefer importing straight from `ts-kit` (deep import, see its README) if you don't otherwise need this package.
 
 ## Scripts
 

package/dist/components/index.d.ts

@@ -2,5 +2,4 @@ export * from "./list";
 export * from "./picker";
 export * from "./settings";
 export * from "./theme";
-export * from "./update";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/components/index.js

@@ -2,4 +2,3 @@ export * from "./list";
 export * from "./picker";
 export * from "./settings";
 export * from "./theme";
-export * from "./update";

package/dist/components/picker/PickerModal.d.ts

@@ -1,4 +1,5 @@
-import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { PickerModalLabels, PickerModalStyles } from "./PickerModal.styles.js";
+export type { PickerModalLabels, PickerModalStyles, } from "./PickerModal.styles.js";
 export interface PickerItem {
     id: number;
     label: string;
@@ -11,34 +12,6 @@ export interface PickerItem {
      */
     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>;
-    extraActionIconColor?: string;
-    rowThumbnailPlaceholderIconColor?: 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;

package/dist/components/picker/PickerModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PickerModal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PickerModal.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAMjC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AAEjC,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,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;AAID,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,+BAwJlB"}

package/dist/components/picker/PickerModal.js

@@ -1,90 +1,11 @@
 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 { Modal, Pressable, SectionList, Text, TextInput, View, } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { defaultLabels, defaultStyles } from "./PickerModal.styles.js";
+import { PickerModalRow } from "./PickerModalRow.js";
+import { usePickerModalSections } from "./usePickerModalSections.js";
 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" },
-    extraActionIconColor: "#2563eb",
-    rowThumbnailPlaceholderIconColor: "#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, }) {
@@ -139,33 +60,10 @@ export function PickerModal({ visible, title, items, onSelect, onClose, emptyMes
         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.extraActionIconColor }), _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.rowThumbnailPlaceholderIconColor }) })) : 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] })] })) })] }) }));
+    const sections = usePickerModalSections(filtered, isSearching, groupOrder, t.otherGroupLabel);
+    function handleSelect(item) {
+        onSelect(item);
+        setQuery("");
+    }
+    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.extraActionIconColor }), _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 }) => (_jsx(PickerModalRow, { item: item, styles: merged, onSelect: handleSelect })) })] }) }));
 }

package/dist/components/picker/PickerModal.styles.d.ts

@@ -0,0 +1,32 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+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>;
+    extraActionIconColor?: string;
+    rowThumbnailPlaceholderIconColor?: string;
+    placeholderTextColor?: string;
+}
+export interface PickerModalLabels {
+    close?: string;
+    searchPlaceholder?: string;
+    searchAccessibilityLabel?: string;
+    voiceSearchAccessibilityLabel?: string;
+    defaultEmptyMessage?: string;
+    otherGroupLabel?: string;
+}
+export declare const defaultStyles: Required<PickerModalStyles>;
+export declare const defaultLabels: Required<PickerModalLabels>;
+//# sourceMappingURL=PickerModal.styles.d.ts.map

package/dist/components/picker/PickerModal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerModal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PickerModal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,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,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,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,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CAyErD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CAOrD,CAAC"}

package/dist/components/picker/PickerModal.styles.js

@@ -0,0 +1,82 @@
+export 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" },
+    extraActionIconColor: "#2563eb",
+    rowThumbnailPlaceholderIconColor: "#6b7280",
+    placeholderTextColor: "#6b7280",
+};
+export const defaultLabels = {
+    close: "Fermer",
+    searchPlaceholder: "Rechercher…",
+    searchAccessibilityLabel: "Rechercher",
+    voiceSearchAccessibilityLabel: "Dicter la recherche",
+    defaultEmptyMessage: "Aucun résultat.",
+    otherGroupLabel: "Autres",
+};

package/dist/components/picker/PickerModalRow.d.ts

@@ -0,0 +1,17 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { PickerItem } from "./PickerModal.js";
+export interface PickerModalRowStyles {
+    row: StyleProp<ViewStyle>;
+    rowThumbnail: StyleProp<ImageStyle>;
+    rowThumbnailPlaceholder: StyleProp<ViewStyle>;
+    rowThumbnailPlaceholderIconColor: string;
+    rowLabel: StyleProp<TextStyle>;
+    rowSubtitle: StyleProp<TextStyle>;
+}
+export interface PickerModalRowProps {
+    item: PickerItem;
+    styles: PickerModalRowStyles;
+    onSelect: (item: PickerItem) => void;
+}
+export declare function PickerModalRow({ item, styles, onSelect, }: PickerModalRowProps): import("react").JSX.Element;
+//# sourceMappingURL=PickerModalRow.d.ts.map

package/dist/components/picker/PickerModalRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerModalRow.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PickerModalRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1B,YAAY,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACpC,uBAAuB,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9C,gCAAgC,EAAE,MAAM,CAAC;IACzC,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAKD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BAmCrB"}

package/dist/components/picker/PickerModalRow.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, Pressable, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+// One result row: thumbnail (photo, placeholder icon, or nothing depending
+// on `imageUri`), label, and optional subtitle. Extracted from PickerModal's
+// `renderItem` to keep that file under the project's 300-line-per-file rule.
+export function PickerModalRow({ item, styles, onSelect, }) {
+    return (_jsxs(Pressable, { style: styles.row, onPress: () => {
+            onSelect(item);
+        }, accessibilityRole: "button", accessibilityLabel: item.subtitle ? `${item.label}, ${item.subtitle}` : item.label, children: [item.imageUri ? (_jsx(Image, { source: { uri: item.imageUri }, style: styles.rowThumbnail, accessibilityIgnoresInvertColors: true })) : item.imageUri === null ? (_jsx(View, { style: styles.rowThumbnailPlaceholder, children: _jsx(Ionicons, { name: "cube-outline", size: 18, color: styles.rowThumbnailPlaceholderIconColor }) })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: styles.rowLabel, children: item.label }), item.subtitle ? (_jsx(Text, { style: styles.rowSubtitle, children: item.subtitle })) : null] })] }));
+}

package/dist/components/picker/usePickerModalSections.d.ts

@@ -0,0 +1,7 @@
+import type { PickerItem } from "./PickerModal.js";
+export interface PickerModalSection {
+    title: string | null;
+    data: PickerItem[];
+}
+export declare function usePickerModalSections(filtered: PickerItem[], isSearching: boolean, groupOrder: string[] | undefined, otherGroupLabel: string): PickerModalSection[];
+//# sourceMappingURL=usePickerModalSections.d.ts.map

package/dist/components/picker/usePickerModalSections.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePickerModalSections.d.ts","sourceRoot":"","sources":["../../../src/components/picker/usePickerModalSections.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,EAAE,UAAU,EAAE,CAAC;CACpB;AAMD,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,UAAU,EAAE,EACtB,WAAW,EAAE,OAAO,EACpB,UAAU,EAAE,MAAM,EAAE,GAAG,SAAS,EAChC,eAAe,EAAE,MAAM,GACtB,kBAAkB,EAAE,CAoBtB"}

package/dist/components/picker/usePickerModalSections.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+// 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).
+export function usePickerModalSections(filtered, isSearching, groupOrder, otherGroupLabel) {
+    return 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 ?? 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, otherGroupLabel]);
+}

package/dist/components/settings/UpdateSettingsScreen.d.ts

@@ -1,49 +1,5 @@
-import type { StyleProp, TextStyle, ViewStyle } from "react-native";
-import type { ChangelogNotesStyles } from "../update/ChangelogNotes.js";
-export interface UpdateSettingsScreenRelease {
-    version: string;
-    notes: string;
-    apkUrl: string;
-}
-export interface UpdateSettingsScreenHistoryEntry {
-    version: string;
-    notes: string;
-    publishedAt?: string | null;
-}
-export interface UpdateSettingsScreenLabels {
-    installedVersionLabel?: string;
-    checkButton?: string;
-    upToDate?: string;
-    checkError?: string;
-    downloadError?: string;
-    availableTitle?: (version: string) => string;
-    installButton?: (version: string) => string;
-    installButtonAccessibilityLabel?: (version: string) => string;
-    downloadingLabel?: (percent: number) => string;
-    downloadingHint?: string;
-    historyTitle?: string;
-}
-export interface UpdateSettingsScreenStyles {
-    container?: StyleProp<ViewStyle>;
-    infoBox?: StyleProp<ViewStyle>;
-    infoLabel?: StyleProp<TextStyle>;
-    infoValue?: StyleProp<TextStyle>;
-    helpText?: StyleProp<TextStyle>;
-    errorText?: StyleProp<TextStyle>;
-    button?: StyleProp<ViewStyle>;
-    buttonDisabled?: StyleProp<ViewStyle>;
-    buttonText?: StyleProp<TextStyle>;
-    activityIndicatorColor?: string;
-    updateAvailableBox?: StyleProp<ViewStyle>;
-    updateAvailableTitle?: StyleProp<TextStyle>;
-    changelog?: StyleProp<ViewStyle>;
-    changelogTitle?: StyleProp<TextStyle>;
-    changelogEntry?: StyleProp<ViewStyle>;
-    changelogEntryHeader?: StyleProp<ViewStyle>;
-    changelogVersion?: StyleProp<TextStyle>;
-    changelogDate?: StyleProp<TextStyle>;
-    notes?: ChangelogNotesStyles;
-}
+import type { UpdateSettingsScreenHistoryEntry, UpdateSettingsScreenLabels, UpdateSettingsScreenRelease, UpdateSettingsScreenStyles } from "./UpdateSettingsScreen.styles.js";
+export type { UpdateSettingsScreenHistoryEntry, UpdateSettingsScreenLabels, UpdateSettingsScreenRelease, UpdateSettingsScreenStyles, } from "./UpdateSettingsScreen.styles.js";
 export interface UpdateSettingsScreenProps {
     currentVersion: string;
     /** Fetches the latest available release, or `null` if there is none. */