@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/locations-map/LocationsMapShell.tsx

@@ -1,527 +1,546 @@
-import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from "react";
-import {
-    ActivityIndicator,
-    Pressable,
-    ScrollView,
-    StyleSheet,
-    Text,
-    View,
-} from "react-native";
-import { ChevronRight, MapPin, X } from "lucide-react-native";
-import Animated, {
-    Easing,
-    interpolate,
-    useAnimatedStyle,
-    useSharedValue,
-    withTiming,
-} from "react-native-reanimated";
-import { useTheme } from "../../contexts/ThemeContext";
-import type { ResolvedTheme } from "../../types/Theme";
-import {
-    LOCATION_CATEGORY_META,
-    useLocations,
-    type LocationCategory,
-    type MapLocation,
-} from "../../hooks/useLocations";
-import { LocationSheet } from "./LocationSheet";
-import type { LocationsMapViewProps } from "./LocationsMapView";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { getContrastColor } from "../../helpers/getContrastColor";
-import { Header } from "../header/Header";
-import { SPACE } from "../../helpers/layout";
-
-export type LocationsMapProps = {
-    fullScreen?: boolean;
-    showFilters?: boolean;
-    /** Header flottant au-dessus de la carte (titre + cloche + profil). */
-    overlayHeader?: boolean;
-    overlayTitle?: string;
-};
-
-const CATEGORIES = Object.keys(LOCATION_CATEGORY_META) as LocationCategory[];
-const NOOP_NAV = { canGoBack: () => false, goBack: () => undefined };
-const PANEL_OPEN = { duration: 300, easing: Easing.out(Easing.cubic) };
-const PANEL_CLOSE = { duration: 260, easing: Easing.in(Easing.cubic) };
-
-export type LocationsMapShellProps = LocationsMapProps & {
-    MapCanvas: ComponentType<LocationsMapViewProps>;
-};
-
-function RoundCtrl({
-    onPress,
-    children,
-    label,
-    radius,
-    backgroundColor,
-    borderColor,
-}: {
-    onPress: () => void;
-    children: ReactNode;
-    label: string;
-    radius: number;
-    backgroundColor: string;
-    borderColor: string;
-}) {
-    return (
-        <Pressable
-            onPress={onPress}
-            accessibilityLabel={label}
-            style={[
-                styles.roundCtrl,
-                {
-                    borderRadius: radius,
-                    backgroundColor,
-                    borderColor,
-                },
-            ]}
-        >
-            {children}
-        </Pressable>
-    );
-}
-
-function FilterPanel({
-    title,
-    onClose,
-    children,
-}: {
-    title: string;
-    onClose: () => void;
-    children: ReactNode;
-}) {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const progress = useSharedValue(0);
-    const widthSv = useSharedValue(0);
-    const closing = useRef(false);
-    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    useEffect(() => {
-        return () => {
-            if (closeTimer.current) clearTimeout(closeTimer.current);
-        };
-    }, []);
-
-    const close = () => {
-        if (closing.current) return;
-        closing.current = true;
-        progress.value = withTiming(0, PANEL_CLOSE);
-        closeTimer.current = setTimeout(onClose, PANEL_CLOSE.duration);
-    };
-
-    const panelStyle = useAnimatedStyle(() => {
-        const width = widthSv.value;
-        if (width <= 0) return { opacity: 0 };
-        return {
-            opacity: 1,
-            transform: [
-                { translateX: interpolate(progress.value, [0, 1], [-width, 0]) },
-            ],
-        };
-    }, []);
-
-    return (
-        <Animated.View
-            onLayout={(event) => {
-                const nextWidth = event.nativeEvent.layout.width;
-                if (nextWidth <= 0) return;
-                const firstLayout = widthSv.value <= 0;
-                widthSv.value = nextWidth;
-                if (firstLayout) progress.value = withTiming(1, PANEL_OPEN);
-            }}
-            style={[styles.filterPanelOuter, panelStyle]}
-        >
-            <View
-                style={[
-                    styles.filterPanel,
-                    cardStyle(theme),
-                    { borderRadius: t.radii.lg },
-                ]}
-            >
-                <View style={styles.filterPanelHead}>
-                    <Text style={[styles.filterPanelTitle, { color: theme.colors.onSurface }]}>
-                        {title}
-                    </Text>
-                    <Pressable
-                        onPress={close}
-                        hitSlop={8}
-                        accessibilityRole="button"
-                        accessibilityLabel="Fermer les filtres"
-                        style={[
-                            styles.closeBtn,
-                            {
-                                backgroundColor: theme.colors.background,
-                                borderRadius: t.radii.pill,
-                            },
-                        ]}
-                    >
-                        <X size={16} color={theme.colors.onSurface} />
-                    </Pressable>
-                </View>
-                {children}
-            </View>
-        </Animated.View>
-    );
-}
-
-export function LocationsMapShell({
-    fullScreen = false,
-    showFilters = true,
-    overlayHeader = false,
-    overlayTitle = "Carte",
-    MapCanvas,
-}: LocationsMapShellProps): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const themedStyles = createThemedStyles(theme);
-    const { locations, isLoading, error, center } = useLocations();
-    const [filters, setFilters] = useState<Set<LocationCategory>>(new Set());
-    const [selected, setSelected] = useState<MapLocation | null>(null);
-    const [filtersOpen, setFiltersOpen] = useState(false);
-
-    const toggle = (category: LocationCategory) => {
-        setFilters((prev) => {
-            const next = new Set(prev);
-            if (next.has(category)) next.delete(category);
-            else next.add(category);
-            return next;
-        });
-    };
-
-    const visible = useMemo(() => {
-        if (filters.size === 0) return locations;
-        return locations.filter((loc) => filters.has(loc.category));
-    }, [filters, locations]);
-
-    const selectedCategories = CATEGORIES.filter((c) => filters.has(c));
-    const showChipBar = selectedCategories.length > 0;
-
-    const filterLabel =
-        filters.size === 0
-            ? "Tous les points"
-            : filters.size === 1
-              ? LOCATION_CATEGORY_META[[...filters][0]!].label
-              : `${filters.size} filtres`;
-
-    const selectLocation = (location: MapLocation) => {
-        setSelected(location);
-        setFiltersOpen(false);
-    };
-
-    const roundRadius = t.radii.pill;
-
-    return (
-        <View style={[styles.wrap, fullScreen && styles.fullScreen]}>
-            <View
-                style={[
-                    styles.mapShell,
-                    themedStyles.mapShell,
-                    fullScreen ? styles.mapShellFull : styles.mapShellFixed,
-                ]}
-            >
-                {isLoading ? (
-                    <View style={styles.center}>
-                        <ActivityIndicator color={theme.colors.primary} />
-                        <Text style={themedStyles.muted}>Chargement de la carte…</Text>
-                    </View>
-                ) : (
-                    <>
-                        <MapCanvas
-                            locations={visible}
-                            center={center}
-                            selectedId={selected?.id}
-                            onSelect={selectLocation}
-                        />
-                        {error ? (
-                            <View style={[styles.center, styles.mapOverlayMessage]} pointerEvents="none">
-                                <Text style={{ color: theme.colors.error, textAlign: "center" }}>
-                                    {error}
-                                </Text>
-                            </View>
-                        ) : null}
-                        {!error && visible.length === 0 ? (
-                            <View style={[styles.center, styles.mapOverlayMessage]} pointerEvents="none">
-                                <Text style={themedStyles.muted}>Aucun point à afficher.</Text>
-                            </View>
-                        ) : null}
-                    </>
-                )}
-            </View>
-
-            <View style={styles.topOverlay} pointerEvents="box-none">
-                {overlayHeader ? (
-                    <Header
-                        overlay
-                        options={{ title: overlayTitle, headerBackVisible: false }}
-                        route={{ name: overlayTitle }}
-                        navigation={NOOP_NAV}
-                    />
-                ) : null}
-
-                {showFilters ? (
-                    <View style={styles.filtersOverlay} pointerEvents="box-none">
-                        {showChipBar ? (
-                            <ScrollView
-                                horizontal
-                                showsHorizontalScrollIndicator={false}
-                                style={styles.chipScrollView}
-                                contentContainerStyle={styles.chipScroll}
-                            >
-                                <RoundCtrl
-                                    label="Ouvrir les filtres"
-                                    onPress={() => setFiltersOpen(true)}
-                                    radius={roundRadius}
-                                    backgroundColor={theme.colors.surface}
-                                    borderColor={theme.colors.border}
-                                >
-                                    <ChevronRight size={16} color={theme.colors.onSurface} />
-                                </RoundCtrl>
-                                {selectedCategories.map((category) => {
-                                    const meta = LOCATION_CATEGORY_META[category];
-                                    const fg = getContrastColor(meta.color);
-                                    return (
-                                        <Pressable
-                                            key={category}
-                                            onPress={() => toggle(category)}
-                                            style={[
-                                                styles.chip,
-                                                {
-                                                    backgroundColor: meta.color,
-                                                    borderRadius: t.radii.pill,
-                                                },
-                                            ]}
-                                        >
-                                            <Text style={[styles.chipText, { color: fg }]}>
-                                                {meta.label}
-                                            </Text>
-                                        </Pressable>
-                                    );
-                                })}
-                                <RoundCtrl
-                                    label="Effacer les filtres"
-                                    onPress={() => setFilters(new Set())}
-                                    radius={roundRadius}
-                                    backgroundColor={theme.colors.surface}
-                                    borderColor={theme.colors.border}
-                                >
-                                    <X size={16} color={theme.colors.onSurface} />
-                                </RoundCtrl>
-                            </ScrollView>
-                        ) : (
-                            <Pressable
-                                onPress={() => setFiltersOpen(true)}
-                                style={[
-                                    styles.filterTrigger,
-                                    cardStyle(theme),
-                                    { borderRadius: t.radii.pill },
-                                ]}
-                            >
-                                <Text style={[styles.filterTriggerText, { color: theme.colors.onSurface }]}>
-                                    {filterLabel}
-                                </Text>
-                                <ChevronRight size={16} color={theme.colors.onSurface} />
-                            </Pressable>
-                        )}
-                        {filtersOpen ? (
-                            <FilterPanel title={filterLabel} onClose={() => setFiltersOpen(false)}>
-                                <View style={styles.filterList}>
-                                    {CATEGORIES.map((category) => {
-                                        const meta = LOCATION_CATEGORY_META[category];
-                                        const active = filters.has(category);
-                                        const bg = active ? meta.color : theme.colors.background;
-                                        const fg = active ? getContrastColor(meta.color) : t.colors.muted;
-                                        return (
-                                            <Pressable
-                                                key={category}
-                                                onPress={() => toggle(category)}
-                                                style={[
-                                                    styles.filterRow,
-                                                    {
-                                                        backgroundColor: bg,
-                                                        borderRadius: t.radii.md,
-                                                    },
-                                                ]}
-                                            >
-                                                <MapPin size={16} color={fg} />
-                                                <Text style={[styles.filterRowText, { color: fg }]}>
-                                                    {meta.label}
-                                                </Text>
-                                            </Pressable>
-                                        );
-                                    })}
-                                </View>
-                            </FilterPanel>
-                        ) : null}
-                    </View>
-                ) : null}
-            </View>
-
-            {selected ? (
-                <View style={styles.sheetOverlay} pointerEvents="box-none">
-                    <LocationSheet location={selected} onClose={() => setSelected(null)} />
-                </View>
-            ) : null}
-        </View>
-    );
-}
-
-const createThemedStyles = (theme: ResolvedTheme) =>
-    StyleSheet.create({
-        mapShell: {
-            backgroundColor: theme.colors.surface,
-            borderRadius: theme.radii.lg,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            ...theme.shadow.soft,
-        },
-        muted: {
-            color: theme.colors.muted ?? theme.colors.onBackground,
-        },
-    });
-
-const styles = StyleSheet.create({
-    wrap: {
-        position: "relative",
-    },
-    fullScreen: {
-        flex: 1,
-    },
-    topOverlay: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        zIndex: 2,
-    },
-    filtersOverlay: {
-        overflow: "visible",
-        paddingBottom: 8,
-    },
-    filterTrigger: {
-        alignSelf: "flex-start",
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-        marginHorizontal: SPACE.pageX,
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-    },
-    filterTriggerText: {
-        fontSize: 14,
-        fontWeight: "700",
-    },
-    chipScrollView: {
-        alignSelf: "stretch",
-        flexGrow: 0,
-        overflow: "visible",
-    },
-    chipScroll: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-        paddingHorizontal: SPACE.pageX,
-        paddingVertical: 8,
-        flexGrow: 0,
-    },
-    chip: {
-        paddingHorizontal: 14,
-        paddingVertical: 10,
-    },
-    chipText: {
-        fontSize: 13,
-        fontWeight: "700",
-    },
-    roundCtrl: {
-        width: SPACE.iconHit,
-        height: SPACE.iconHit,
-        alignItems: "center",
-        justifyContent: "center",
-        borderWidth: 1,
-        ...({
-            shadowColor: "#0F172A",
-            shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.08,
-            shadowRadius: 3,
-            elevation: 2,
-        } as const),
-    },
-    closeBtn: {
-        width: 28,
-        height: 28,
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        flexShrink: 0,
-    },
-    filterPanelOuter: {
-        position: "absolute",
-        top: 0,
-        left: SPACE.pageX,
-        right: SPACE.pageX,
-        zIndex: 4,
-    },
-    filterPanel: {
-        overflow: "hidden",
-        paddingHorizontal: 16,
-        paddingTop: 18,
-        paddingBottom: 20,
-        gap: 16,
-    },
-    filterPanelHead: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    filterPanelTitle: {
-        fontSize: 15,
-        fontWeight: "800",
-    },
-    filterList: {
-        gap: 10,
-    },
-    filterRow: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 10,
-        paddingHorizontal: 14,
-        paddingVertical: 12,
-    },
-    filterRowText: {
-        fontSize: 14,
-        fontWeight: "600",
-    },
-    mapShell: {
-        overflow: "hidden",
-        position: "relative",
-    },
-    mapShellFixed: {
-        height: 320,
-    },
-    mapShellFull: {
-        flex: 1,
-        minHeight: 280,
-        borderRadius: 0,
-        borderWidth: 0,
-    },
-    sheetOverlay: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        zIndex: 3,
-        justifyContent: "flex-end",
-    },
-    center: {
-        flex: 1,
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 16,
-        gap: 8,
-    },
-    mapOverlayMessage: {
-        ...StyleSheet.absoluteFillObject,
-        backgroundColor: "rgba(255,255,255,0.72)",
-        zIndex: 1,
-    },
-});
+import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from "react";
+import {
+    ActivityIndicator,
+    Pressable,
+    ScrollView,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { ChevronRight, MapPin, X } from "lucide-react-native";
+import Animated, {
+    Easing,
+    interpolate,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from "react-native-reanimated";
+import { useTheme } from "../../contexts/ThemeContext";
+import type { ResolvedTheme } from "../../types/Theme";
+import {
+    LOCATION_CATEGORY_META,
+    useLocations,
+    type LocationCategory,
+    type MapLocation,
+} from "../../hooks/useLocations";
+import { LocationSheet } from "./LocationSheet";
+import type { LocationsMapViewProps } from "./LocationsMapView";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { getContrastColor } from "../../helpers/getContrastColor";
+import { Header, DEFAULT_HEADER_ACTIONS, type AppHeaderConfig } from "../header/Header";
+import { useHeaderConfig } from "../../contexts/HeaderConfigContext";
+import { SPACE } from "../../helpers/layout";
+
+export type LocationsMapProps = {
+    fullScreen?: boolean;
+    showFilters?: boolean;
+    /** Header flottant au-dessus de la carte (même navbar que le layout, sans titre). */
+    overlayHeader?: boolean;
+    /**
+     * @deprecated Ignoré — la navbar n’affiche plus de titre d’écran.
+     * Conservé pour compatibilité des configs CMS existantes.
+     */
+    overlayTitle?: string;
+    /** Override optionnel ; sinon config du layout via `HeaderConfigProvider`. */
+    headerConfig?: AppHeaderConfig | null;
+};
+
+const CATEGORIES = Object.keys(LOCATION_CATEGORY_META) as LocationCategory[];
+const NOOP_NAV = { canGoBack: () => false, goBack: () => undefined };
+const PANEL_OPEN = { duration: 300, easing: Easing.out(Easing.cubic) };
+const PANEL_CLOSE = { duration: 260, easing: Easing.in(Easing.cubic) };
+
+export type LocationsMapShellProps = LocationsMapProps & {
+    MapCanvas: ComponentType<LocationsMapViewProps>;
+};
+
+function RoundCtrl({
+    onPress,
+    children,
+    label,
+    radius,
+    backgroundColor,
+    borderColor,
+}: {
+    onPress: () => void;
+    children: ReactNode;
+    label: string;
+    radius: number;
+    backgroundColor: string;
+    borderColor: string;
+}) {
+    return (
+        <Pressable
+            onPress={onPress}
+            accessibilityLabel={label}
+            style={[
+                styles.roundCtrl,
+                {
+                    borderRadius: radius,
+                    backgroundColor,
+                    borderColor,
+                },
+            ]}
+        >
+            {children}
+        </Pressable>
+    );
+}
+
+function FilterPanel({
+    title,
+    onClose,
+    children,
+}: {
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+}) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const progress = useSharedValue(0);
+    const widthSv = useSharedValue(0);
+    const closing = useRef(false);
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(() => {
+        return () => {
+            if (closeTimer.current) clearTimeout(closeTimer.current);
+        };
+    }, []);
+
+    const close = () => {
+        if (closing.current) return;
+        closing.current = true;
+        progress.value = withTiming(0, PANEL_CLOSE);
+        closeTimer.current = setTimeout(onClose, PANEL_CLOSE.duration);
+    };
+
+    const panelStyle = useAnimatedStyle(() => {
+        const width = widthSv.value;
+        if (width <= 0) return { opacity: 0 };
+        return {
+            opacity: 1,
+            transform: [
+                { translateX: interpolate(progress.value, [0, 1], [-width, 0]) },
+            ],
+        };
+    }, []);
+
+    return (
+        <Animated.View
+            onLayout={(event) => {
+                const nextWidth = event.nativeEvent.layout.width;
+                if (nextWidth <= 0) return;
+                const firstLayout = widthSv.value <= 0;
+                widthSv.value = nextWidth;
+                if (firstLayout) progress.value = withTiming(1, PANEL_OPEN);
+            }}
+            style={[styles.filterPanelOuter, panelStyle]}
+        >
+            <View
+                style={[
+                    styles.filterPanel,
+                    cardStyle(theme),
+                    { borderRadius: t.radii.lg },
+                ]}
+            >
+                <View style={styles.filterPanelHead}>
+                    <Text style={[styles.filterPanelTitle, { color: theme.colors.onSurface }]}>
+                        {title}
+                    </Text>
+                    <Pressable
+                        onPress={close}
+                        hitSlop={8}
+                        accessibilityRole="button"
+                        accessibilityLabel="Fermer les filtres"
+                        style={[
+                            styles.closeBtn,
+                            {
+                                backgroundColor: theme.colors.background,
+                                borderRadius: t.radii.pill,
+                            },
+                        ]}
+                    >
+                        <X size={16} color={theme.colors.onSurface} />
+                    </Pressable>
+                </View>
+                {children}
+            </View>
+        </Animated.View>
+    );
+}
+
+export function LocationsMapShell({
+    fullScreen = false,
+    showFilters = true,
+    overlayHeader = false,
+    headerConfig: headerConfigProp,
+    MapCanvas,
+}: LocationsMapShellProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const layoutHeaderConfig = useHeaderConfig();
+    const { locations, isLoading, error, center } = useLocations();
+    const [filters, setFilters] = useState<Set<LocationCategory>>(new Set());
+    const [selected, setSelected] = useState<MapLocation | null>(null);
+    const [filtersOpen, setFiltersOpen] = useState(false);
+
+    const overlayHeaderConfig: AppHeaderConfig = useMemo(() => {
+        const raw = headerConfigProp ?? layoutHeaderConfig;
+        if (raw?.elements?.length) {
+            return {
+                elements: raw.elements.filter((el) => el.type !== "title"),
+            };
+        }
+        return { elements: DEFAULT_HEADER_ACTIONS.map((a) => ({ ...a })) };
+    }, [headerConfigProp, layoutHeaderConfig]);
+
+    const toggle = (category: LocationCategory) => {
+        setFilters((prev) => {
+            const next = new Set(prev);
+            if (next.has(category)) next.delete(category);
+            else next.add(category);
+            return next;
+        });
+    };
+
+    const visible = useMemo(() => {
+        if (filters.size === 0) return locations;
+        return locations.filter((loc) => filters.has(loc.category));
+    }, [filters, locations]);
+
+    const selectedCategories = CATEGORIES.filter((c) => filters.has(c));
+    const showChipBar = selectedCategories.length > 0;
+
+    const filterLabel =
+        filters.size === 0
+            ? "Tous les points"
+            : filters.size === 1
+              ? LOCATION_CATEGORY_META[[...filters][0]!].label
+              : `${filters.size} filtres`;
+
+    const selectLocation = (location: MapLocation) => {
+        setSelected(location);
+        setFiltersOpen(false);
+    };
+
+    const roundRadius = t.radii.pill;
+
+    return (
+        <View style={[styles.wrap, fullScreen && styles.fullScreen]}>
+            <View
+                style={[
+                    styles.mapShell,
+                    themedStyles.mapShell,
+                    fullScreen ? styles.mapShellFull : styles.mapShellFixed,
+                ]}
+            >
+                {isLoading ? (
+                    <View style={styles.center}>
+                        <ActivityIndicator color={theme.colors.primary} />
+                        <Text style={themedStyles.muted}>Chargement de la carte…</Text>
+                    </View>
+                ) : (
+                    <>
+                        <MapCanvas
+                            locations={visible}
+                            center={center}
+                            selectedId={selected?.id}
+                            onSelect={selectLocation}
+                        />
+                        {error ? (
+                            <View style={[styles.center, styles.mapOverlayMessage]} pointerEvents="none">
+                                <Text style={{ color: theme.colors.error, textAlign: "center" }}>
+                                    {error}
+                                </Text>
+                            </View>
+                        ) : null}
+                        {!error && visible.length === 0 ? (
+                            <View style={[styles.center, styles.mapOverlayMessage]} pointerEvents="none">
+                                <Text style={themedStyles.muted}>Aucun point à afficher.</Text>
+                            </View>
+                        ) : null}
+                    </>
+                )}
+            </View>
+
+            <View style={styles.topOverlay} pointerEvents="box-none">
+                {overlayHeader ? (
+                    <Header
+                        overlay
+                        options={{ headerBackVisible: false }}
+                        route={{ name: "map" }}
+                        navigation={NOOP_NAV}
+                        headerConfig={overlayHeaderConfig}
+                    />
+                ) : null}
+
+                {showFilters ? (
+                    <View style={styles.filtersOverlay} pointerEvents="box-none">
+                        {showChipBar ? (
+                            <ScrollView
+                                horizontal
+                                showsHorizontalScrollIndicator={false}
+                                style={styles.chipScrollView}
+                                contentContainerStyle={styles.chipScroll}
+                            >
+                                <RoundCtrl
+                                    label="Ouvrir les filtres"
+                                    onPress={() => setFiltersOpen(true)}
+                                    radius={roundRadius}
+                                    backgroundColor={theme.colors.surface}
+                                    borderColor={theme.colors.border}
+                                >
+                                    <ChevronRight size={16} color={theme.colors.onSurface} />
+                                </RoundCtrl>
+                                {selectedCategories.map((category) => {
+                                    const meta = LOCATION_CATEGORY_META[category];
+                                    const fg = getContrastColor(meta.color);
+                                    return (
+                                        <Pressable
+                                            key={category}
+                                            onPress={() => toggle(category)}
+                                            style={[
+                                                styles.chip,
+                                                {
+                                                    backgroundColor: meta.color,
+                                                    borderRadius: t.radii.pill,
+                                                },
+                                            ]}
+                                        >
+                                            <Text style={[styles.chipText, { color: fg }]}>
+                                                {meta.label}
+                                            </Text>
+                                        </Pressable>
+                                    );
+                                })}
+                                <RoundCtrl
+                                    label="Effacer les filtres"
+                                    onPress={() => setFilters(new Set())}
+                                    radius={roundRadius}
+                                    backgroundColor={theme.colors.surface}
+                                    borderColor={theme.colors.border}
+                                >
+                                    <X size={16} color={theme.colors.onSurface} />
+                                </RoundCtrl>
+                            </ScrollView>
+                        ) : (
+                            <Pressable
+                                onPress={() => setFiltersOpen(true)}
+                                style={[
+                                    styles.filterTrigger,
+                                    cardStyle(theme),
+                                    { borderRadius: t.radii.pill },
+                                ]}
+                            >
+                                <Text style={[styles.filterTriggerText, { color: theme.colors.onSurface }]}>
+                                    {filterLabel}
+                                </Text>
+                                <ChevronRight size={16} color={theme.colors.onSurface} />
+                            </Pressable>
+                        )}
+                        {filtersOpen ? (
+                            <FilterPanel title={filterLabel} onClose={() => setFiltersOpen(false)}>
+                                <View style={styles.filterList}>
+                                    {CATEGORIES.map((category) => {
+                                        const meta = LOCATION_CATEGORY_META[category];
+                                        const active = filters.has(category);
+                                        const bg = active ? meta.color : theme.colors.background;
+                                        const fg = active ? getContrastColor(meta.color) : t.colors.muted;
+                                        return (
+                                            <Pressable
+                                                key={category}
+                                                onPress={() => toggle(category)}
+                                                style={[
+                                                    styles.filterRow,
+                                                    {
+                                                        backgroundColor: bg,
+                                                        borderRadius: t.radii.md,
+                                                    },
+                                                ]}
+                                            >
+                                                <MapPin size={16} color={fg} />
+                                                <Text style={[styles.filterRowText, { color: fg }]}>
+                                                    {meta.label}
+                                                </Text>
+                                            </Pressable>
+                                        );
+                                    })}
+                                </View>
+                            </FilterPanel>
+                        ) : null}
+                    </View>
+                ) : null}
+            </View>
+
+            {selected ? (
+                <View style={styles.sheetOverlay} pointerEvents="box-none">
+                    <LocationSheet location={selected} onClose={() => setSelected(null)} />
+                </View>
+            ) : null}
+        </View>
+    );
+}
+
+const createThemedStyles = (theme: ResolvedTheme) =>
+    StyleSheet.create({
+        mapShell: {
+            backgroundColor: theme.colors.surface,
+            borderRadius: theme.radii.lg,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            ...theme.shadow.soft,
+        },
+        muted: {
+            color: theme.colors.muted ?? theme.colors.onBackground,
+        },
+    });
+
+const styles = StyleSheet.create({
+    wrap: {
+        position: "relative",
+    },
+    fullScreen: {
+        flex: 1,
+    },
+    topOverlay: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 2,
+    },
+    filtersOverlay: {
+        overflow: "visible",
+        paddingBottom: 8,
+    },
+    filterTrigger: {
+        alignSelf: "flex-start",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        marginHorizontal: SPACE.pageX,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+    },
+    filterTriggerText: {
+        fontSize: 14,
+        fontWeight: "700",
+    },
+    chipScrollView: {
+        alignSelf: "stretch",
+        flexGrow: 0,
+        overflow: "visible",
+    },
+    chipScroll: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        paddingHorizontal: SPACE.pageX,
+        paddingVertical: 8,
+        flexGrow: 0,
+    },
+    chip: {
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+    },
+    chipText: {
+        fontSize: 13,
+        fontWeight: "700",
+    },
+    roundCtrl: {
+        width: SPACE.iconHit,
+        height: SPACE.iconHit,
+        alignItems: "center",
+        justifyContent: "center",
+        borderWidth: 1,
+        ...({
+            shadowColor: "#0F172A",
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.08,
+            shadowRadius: 3,
+            elevation: 2,
+        } as const),
+    },
+    closeBtn: {
+        width: 28,
+        height: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        flexShrink: 0,
+    },
+    filterPanelOuter: {
+        position: "absolute",
+        top: 0,
+        left: SPACE.pageX,
+        right: SPACE.pageX,
+        zIndex: 4,
+    },
+    filterPanel: {
+        overflow: "hidden",
+        paddingHorizontal: 16,
+        paddingTop: 18,
+        paddingBottom: 20,
+        gap: 16,
+    },
+    filterPanelHead: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    filterPanelTitle: {
+        fontSize: 15,
+        fontWeight: "800",
+    },
+    filterList: {
+        gap: 10,
+    },
+    filterRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+    },
+    filterRowText: {
+        fontSize: 14,
+        fontWeight: "600",
+    },
+    mapShell: {
+        overflow: "hidden",
+        position: "relative",
+    },
+    mapShellFixed: {
+        height: 320,
+    },
+    mapShellFull: {
+        flex: 1,
+        minHeight: 280,
+        borderRadius: 0,
+        borderWidth: 0,
+    },
+    sheetOverlay: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 3,
+        justifyContent: "flex-end",
+    },
+    center: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 16,
+        gap: 8,
+    },
+    mapOverlayMessage: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "rgba(255,255,255,0.72)",
+        zIndex: 1,
+    },
+});