panelui-native 0.62.0 → 0.65.0

package/src/components/form/use-form.ts

@@ -174,6 +174,8 @@ export function useForm<T extends Record<string, any>>({
   const validatorsRef = useRef<
     Partial<Record<keyof T, (value: any, values: T) => string | undefined | Promise<string | undefined>>>
   >({});
+  const validationOwnersRef = useRef<Partial<Record<keyof T, symbol>>>({});
+  const submissionLockedRef = useRef(false);
 
   const [state, dispatch] = useReducer(reducer<T>, {
     values: defaultValues,
@@ -196,31 +198,46 @@ export function useForm<T extends Record<string, any>>({
   const valuesRef = useRef(state.values);
   valuesRef.current = state.values;
 
-  const setFieldValue = useCallback(<K extends keyof T>(name: K, value: T[K]) => {
-    valuesRef.current = { ...valuesRef.current, [name]: value } as T;
-    dispatch({ type: 'SET_VALUE', name, value });
+  /* Only the latest owner of a field may commit validation state. A value,
+   * validator or manual-error change claims ownership too, invalidating any
+   * result that was calculated from the state before that change. */
+  const claimFieldValidation = useCallback(<K extends keyof T>(name: K) => {
+    const owner = Symbol();
+    validationOwnersRef.current[name] = owner;
+    return owner;
   }, []);
 
+  const setFieldValue = useCallback(
+    <K extends keyof T>(name: K, value: T[K]) => {
+      claimFieldValidation(name);
+      valuesRef.current = { ...valuesRef.current, [name]: value } as T;
+      dispatch({ type: 'SET_VALUE', name, value });
+    },
+    [claimFieldValidation]
+  );
+
   const setFieldTouched = useCallback(<K extends keyof T>(name: K, touched = true) => {
     dispatch({ type: 'SET_TOUCHED', name, touched });
   }, []);
 
   const setFieldError = useCallback(
     <K extends keyof T>(name: K, error: string | undefined) => {
+      claimFieldValidation(name);
       dispatch({ type: 'SET_ERROR', name, error });
     },
-    []
+    [claimFieldValidation]
   );
 
   const registerValidator = useCallback(
     <K extends keyof T>(name: K, validator?: Validator<T, K>) => {
+      claimFieldValidation(name);
       if (validator) {
         validatorsRef.current[name] = validator;
       } else {
         delete validatorsRef.current[name];
       }
     },
-    []
+    [claimFieldValidation]
   );
 
   const getFieldState = useCallback(
@@ -235,81 +252,100 @@ export function useForm<T extends Record<string, any>>({
   const validateField = useCallback(async <K extends keyof T>(name: K) => {
     const validator = validatorsRef.current[name];
     if (!validator) return true;
+    const owner = claimFieldValidation(name);
     const values = valuesRef.current;
     const error = await runValidator(name, validator, values);
-    dispatch({ type: 'SET_ERROR', name, error });
+    if (validationOwnersRef.current[name] === owner) {
+      dispatch({ type: 'SET_ERROR', name, error });
+    }
     return !error;
-  }, []);
+  }, [claimFieldValidation]);
 
   const handleSubmit = useCallback(async () => {
-    const values = valuesRef.current;
-    /*
-     * Every field the form knows of, which is not the same as every key of
-     * `defaultValues`: a field can register a validator under a name that was
-     * never declared there. Submitting only the declared ones meant such a
-     * field was never validated and never blocked anything, so a form of
-     * required-but-undeclared fields submitted itself while still empty.
-     *
-     * It is still a mistake to name a field that `defaultValues` does not
-     * declare — its value stays undefined and never reaches `onSubmit` —
-     * which is why `useField` says so. Validating it anyway is what turns
-     * that mistake into a visible error instead of a silent submit.
-     */
-    const names = Array.from(
-      new Set([...Object.keys(values), ...Object.keys(validatorsRef.current)])
-    ) as (keyof T)[];
-    dispatch({ type: 'TOUCH_ALL', names });
+    // Reducer state cannot guard two calls made before React renders again.
+    if (submissionLockedRef.current) return;
+    submissionLockedRef.current = true;
+    try {
+      const values = valuesRef.current;
+      /*
+       * Every field the form knows of, which is not the same as every key of
+       * `defaultValues`: a field can register a validator under a name that was
+       * never declared there. Submitting only the declared ones meant such a
+       * field was never validated and never blocked anything, so a form of
+       * required-but-undeclared fields submitted itself while still empty.
+       *
+       * It is still a mistake to name a field that `defaultValues` does not
+       * declare — its value stays undefined and never reaches `onSubmit` —
+       * which is why `useField` says so. Validating it anyway is what turns
+       * that mistake into a visible error instead of a silent submit.
+       */
+      const names = Array.from(
+        new Set([...Object.keys(values), ...Object.keys(validatorsRef.current)])
+      ) as (keyof T)[];
+      const validationOwners = new Map(
+        names.map((name) => [name, claimFieldValidation(name)] as const)
+      );
+      dispatch({ type: 'TOUCH_ALL', names });
 
-    const fieldErrorEntries = await Promise.all(
-      names.map(async (name) => {
-        const validator = validatorsRef.current[name];
-        const error = validator
-          ? await runValidator(name, validator, values)
-          : undefined;
-        return [name, error] as const;
-      })
-    );
+      const fieldErrorEntries = await Promise.all(
+        names.map(async (name) => {
+          const validator = validatorsRef.current[name];
+          const error = validator
+            ? await runValidator(name, validator, values)
+            : undefined;
+          return [name, error] as const;
+        })
+      );
 
-    /*
-     * Same reasoning as a field's rule, one level up: a cross-field check that
-     * throws must not take the screen, and must not let the submit through.
-     * It belongs to no single field, so it blocks without marking one — there
-     * is no field whose error line would be the honest place to put it.
-     */
-    let formErrors: FieldErrors<T> = {};
-    let formValidateThrew = false;
-    if (validate) {
-      try {
-        formErrors = await validate(values);
-      } catch (error) {
-        console.error(
-          '[PanelUI] The form-level validate() threw, so the form is being ' +
-            'treated as invalid and the submit was not run.',
-          error
-        );
-        formValidateThrew = true;
+      /*
+       * Same reasoning as a field's rule, one level up: a cross-field check that
+       * throws must not take the screen, and must not let the submit through.
+       * It belongs to no single field, so it blocks without marking one — there
+       * is no field whose error line would be the honest place to put it.
+       */
+      let formErrors: FieldErrors<T> = {};
+      let formValidateThrew = false;
+      if (validate) {
+        try {
+          formErrors = await validate(values);
+        } catch (error) {
+          console.error(
+            '[PanelUI] The form-level validate() threw, so the form is being ' +
+              'treated as invalid and the submit was not run.',
+            error
+          );
+          formValidateThrew = true;
+        }
       }
-    }
 
-    const cleared = Object.fromEntries(names.map((name) => [name, undefined]));
-    const nextErrors: FieldErrors<T> = {
-      ...cleared,
-      ...Object.fromEntries(fieldErrorEntries.filter(([, error]) => error !== undefined)),
-      ...formErrors,
-    };
-    dispatch({ type: 'SET_ERRORS', errors: nextErrors });
+      const cleared = Object.fromEntries(names.map((name) => [name, undefined]));
+      const nextErrors: FieldErrors<T> = {
+        ...cleared,
+        ...Object.fromEntries(fieldErrorEntries.filter(([, error]) => error !== undefined)),
+        ...formErrors,
+      };
+      const ownedErrors = Object.fromEntries(
+        names
+          .filter((name) => validationOwnersRef.current[name] === validationOwners.get(name))
+          .map((name) => [name, nextErrors[name]])
+      ) as FieldErrors<T>;
+      dispatch({ type: 'SET_ERRORS', errors: ownedErrors });
 
-    if (formValidateThrew || Object.values(nextErrors).some(Boolean)) return;
+      if (formValidateThrew || Object.values(nextErrors).some(Boolean)) return;
 
-    dispatch({ type: 'SUBMIT_START' });
-    try {
-      await onSubmit(values);
+      dispatch({ type: 'SUBMIT_START' });
+      try {
+        await onSubmit(values);
+      } finally {
+        dispatch({ type: 'SUBMIT_END' });
+      }
     } finally {
-      dispatch({ type: 'SUBMIT_END' });
+      submissionLockedRef.current = false;
     }
-  }, [validate, onSubmit]);
+  }, [claimFieldValidation, validate, onSubmit]);
 
   const reset = useCallback((values: T = defaultsRef.current) => {
+    validationOwnersRef.current = {};
     valuesRef.current = values;
     dispatch({ type: 'RESET', values });
   }, []);

package/src/components/heatmap-chart/index.tsx

@@ -42,6 +42,7 @@ import {
   isValidElement,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -402,9 +403,7 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
 ) {
   const [width, setWidth] = useState(0);
   const [activeCell, setActiveCellState] = useState<HeatmapCell | null>(null);
-  const clipId = useRef(
-    `panelui-heat-${Math.random().toString(36).slice(2, 9)}`
-  ).current;
+  const clipId = `panelui-heat-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const reveal = useSharedValue(0);
   const reducedMotion = useReducedMotion();

package/src/components/hex-chart/index.tsx

@@ -73,6 +73,7 @@ import {
   isValidElement,
   useContext,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -269,7 +270,7 @@ const HexChartRoot = forwardRef<HexChartHandle, HexChartProps>(function HexChart
     density = 0.55,
     shape = 'blob',
     cellGap = 0.14,
-    animationDuration = 900,
+    animationDuration = 620,
     status = 'ready',
     activeIndex: activeIndexProp,
     onActiveIndexChange,
@@ -282,9 +283,7 @@ const HexChartRoot = forwardRef<HexChartHandle, HexChartProps>(function HexChart
   const [internalActive, setInternalActive] = useState(-1);
   const reveal = useSharedValue(0);
   const reducedMotion = useReducedMotion();
-  const clipId = useRef(
-    `panelui-hex-${Math.random().toString(36).slice(2, 9)}`
-  ).current;
+  const clipId = `panelui-hex-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const controlled = activeIndexProp !== undefined;
   const activeIndex = controlled ? activeIndexProp : internalActive;
@@ -413,7 +412,7 @@ const HexChartRoot = forwardRef<HexChartHandle, HexChartProps>(function HexChart
       reveal.value = 0;
       reveal.value = withTiming(1, {
         duration: animationDuration,
-        easing: Easing.bezier(0.85, 0, 0.15, 1),
+        easing: Easing.out(Easing.cubic),
       });
     },
     [reducedMotion, animationDuration, reveal]

package/src/components/kpi/index.tsx

@@ -28,7 +28,9 @@
  */
 import { createContext, forwardRef, useContext, useMemo, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { ArrowDown, ArrowUp, Minus } from 'lucide-react-native';
+import ArrowDown from 'lucide-react-native/icons/arrow-down';
+import ArrowUp from 'lucide-react-native/icons/arrow-up';
+import Minus from 'lucide-react-native/icons/minus';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';

package/src/components/line-chart/index.tsx

@@ -48,6 +48,7 @@ import {
   isValidElement,
   useContext,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -221,7 +222,7 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
     xDataKey = 'date',
     status = 'ready',
     aspectRatio = 2,
-    animationDuration = 1100,
+    animationDuration = 700,
     domainDuration = 500,
     yDomain,
     curve = 'monotone',
@@ -235,7 +236,7 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [series, setSeries] = useState<[string, string][]>([]);
   const [activeIndexJS, setActiveIndexJS] = useState(-1);
-  const clipId = useRef(`panelui-clip-${Math.random().toString(36).slice(2, 9)}`).current;
+  const clipId = `panelui-clip-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const reveal = useSharedValue(0);
   const domainMin = useSharedValue(0);
@@ -341,17 +342,27 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
       reveal.value = 0;
       reveal.value = withTiming(1, {
         duration: animationDuration,
-        easing: Easing.bezier(0.85, 0, 0.15, 1),
+        easing: Easing.out(Easing.cubic),
       });
     },
     [reducedMotion, animationDuration, reveal]
   );
 
   useEffect(() => {
-    if (revealed.current || loading || plot.width <= 0 || !data.length) return;
+    /*
+     * Going back to `loading` arms the reveal again. Without this a chart that
+     * is refetched comes back fully drawn on the frame the data lands, which
+     * reads as the loading state having been for nothing.
+     */
+    if (loading) {
+      revealed.current = false;
+      reveal.value = 0;
+      return;
+    }
+    if (revealed.current || plot.width <= 0 || !data.length) return;
     revealed.current = true;
     playReveal();
-  }, [loading, plot.width, data.length, playReveal]);
+  }, [loading, plot.width, data.length, playReveal, reveal]);
 
   // `replay()` re-runs the reveal — for a control the caller wires up.
   useImperativeHandle(ref, () => ({ replay: playReveal }), [playReveal]);
@@ -647,7 +658,7 @@ export interface LineChartAreaProps {
 function LineChartArea({ dataKey, color, colorIndex = 1, opacity = 0.18 }: LineChartAreaProps) {
   const { data, plot, domainMin, domainMax, curve, status, clipId } = useChart('LineChart.Area');
   const fill = useSeriesColor(color, colorIndex);
-  const gradientId = useRef(`panelui-area-${Math.random().toString(36).slice(2, 9)}`).current;
+  const gradientId = `panelui-area-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const values = useMemo(() => columnValues(data, dataKey), [data, dataKey]);
   const loading = status === 'loading';

package/src/components/map/index.tsx

@@ -36,13 +36,14 @@ import {
   isValidElement,
   useCallback,
   useContext,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
   type ReactNode,
 } from 'react';
-import { Pressable, View, type ViewProps } from 'react-native';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { tv } from 'tailwind-variants';
 import { CompassIcon, CrosshairIcon, MinusIcon, PlusIcon } from '../../icons';
@@ -64,9 +65,15 @@ import {
   type StyleSpecification,
   type ViewState,
 } from './maplibre';
+import {
+  describeMapFeatures,
+  type MapFeatureAccessibility,
+  type MapFeatureAccessibilityDescription,
+} from './map-accessibility';
 
 export { hasMapLibre, CARTO_SOURCE };
 export type { BasemapSource, BasemapTokens, LngLat, LngLatBounds, ViewState };
+export type { MapFeatureAccessibility } from './map-accessibility';
 
 const mapVariants = tv({
   slots: {
@@ -172,7 +179,16 @@ interface MapContextValue {
   ready: boolean;
 }
 
-const MapContext = createContext<MapContextValue | null>(null);
+interface AccessibleFeatureGroup {
+  features: MapFeatureAccessibilityDescription[];
+  onPress?: (feature: unknown) => void;
+}
+
+interface InternalMapContextValue extends MapContextValue {
+  registerAccessibleFeatures(id: string, group: AccessibleFeatureGroup | null): void;
+}
+
+const MapContext = createContext<InternalMapContextValue | null>(null);
 
 /**
  * The map's camera and view state, from inside it.
@@ -293,6 +309,21 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
   const mapRef = useRef<MapRef | null>(null);
   const cameraRef = useRef<CameraRef | null>(null);
   const [ready, setReady] = useState(false);
+  const [accessibleFeatureGroups, setAccessibleFeatureGroups] = useState(
+    () => new globalThis.Map<string, AccessibleFeatureGroup>()
+  );
+
+  const registerAccessibleFeatures = useCallback(
+    (id: string, group: AccessibleFeatureGroup | null) => {
+      setAccessibleFeatureGroups((current) => {
+        const next = new globalThis.Map(current);
+        if (group?.features.length) next.set(id, group);
+        else next.delete(id);
+        return next;
+      });
+    },
+    []
+  );
 
   // Every colour the style needs, resolved from the active theme. Hooks run
   // unconditionally, so they sit above the renderer check rather than inside it.
@@ -344,7 +375,10 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
     []
   );
 
-  const context = useMemo(() => ({ mapRef, cameraRef, ready }), [ready]);
+  const context = useMemo(
+    () => ({ mapRef, cameraRef, ready, registerAccessibleFeatures }),
+    [ready, registerAccessibleFeatures]
+  );
 
   if (!hasMapLibre || !MapLibre) {
     return <MapUnavailable className={className} {...props} />;
@@ -370,6 +404,8 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
           touchZoom={interactive}
           touchRotate={rotatable}
           touchPitch={rotatable}
+          accessible={false}
+          importantForAccessibility="no"
           onDidFinishLoadingMap={() => {
             setReady(true);
             onReady?.();
@@ -400,12 +436,41 @@ const MapRoot = forwardRef<MapHandle, MapProps>(function MapRoot(
           {textChildren(children)}
         </MapLibreMap>
       </MapContext.Provider>
+      <View
+        accessibilityRole="list"
+        style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden' }}
+      >
+        {[...accessibleFeatureGroups].flatMap(([groupId, group]) =>
+          group.features.map(({ feature, label, hint, state }, index) =>
+            group.onPress ? (
+              <Pressable
+                key={`${groupId}-${index}`}
+                accessibilityRole="button"
+                accessibilityLabel={label}
+                accessibilityHint={hint}
+                accessibilityState={state}
+                onPress={() => group.onPress?.(feature)}
+              />
+            ) : (
+              <View
+                key={`${groupId}-${index}`}
+                accessible
+                accessibilityRole="text"
+                accessibilityLabel={label}
+                accessibilityHint={hint}
+                accessibilityState={state}
+              />
+            )
+          )
+        )}
+      </View>
     </View>
   );
 });
 MapRoot.displayName = 'Map';
 
-export interface MapMarkerProps {
+export interface MapMarkerProps
+  extends Omit<PressableProps, 'children' | 'onPress' | 'style'> {
   /** Where the marker sits, `[longitude, latitude]`. */
   lngLat: LngLat;
   /**
@@ -415,6 +480,8 @@ export interface MapMarkerProps {
   anchor?: 'center' | 'top' | 'bottom' | 'left' | 'right';
   /** Pressing the marker. Adds a button role when given. */
   onPress?: () => void;
+  /** Explicit spoken name. Other React Native accessibility props pass through too. */
+  accessibilityLabel?: string;
   className?: string;
   /** Defaults to a dot. Anything else replaces it. */
   children?: ReactNode;
@@ -432,6 +499,8 @@ function MapMarker({
   onPress,
   className,
   children,
+  accessibilityState,
+  ...props
 }: MapMarkerProps) {
   const slots = mapVariants();
   const [open, setOpen] = useState(false);
@@ -471,21 +540,28 @@ function MapMarker({
    * the default pin keeps the box real, which is also the right drawing: a
    * label with nothing to label is a caption floating on its own.
    */
+  const pressable = onPress || popups.length > 0;
   const body = (
-    <View className={cn('items-center', className)}>
+    <View
+      {...(!pressable ? props : {})}
+      accessibilityState={!pressable ? accessibilityState : undefined}
+      className={cn('items-center', className)}
+    >
       {content.length > 0 ? content : <View className={slots.pin()} />}
       {labels}
     </View>
   );
 
-  const pressable = onPress || popups.length > 0;
-
   return (
     <MarkerContext.Provider value={lngLat}>
       <Marker lngLat={lngLat} anchor={anchor}>
         {pressable ? (
           <Pressable
+            {...props}
             accessibilityRole="button"
+            accessibilityState={
+              popups.length > 0 ? { ...accessibilityState, expanded: open } : accessibilityState
+            }
             onPress={() => {
               if (popups.length > 0) setOpen((was) => !was);
               onPress?.();
@@ -906,6 +982,8 @@ export interface MapGeoJSONProps {
   fillOpacity?: number;
   /** Fires with the pressed feature. */
   onPress?: (feature: unknown) => void;
+  /** Describes each inline GeoJSON feature for the synchronized nonvisual list. */
+  accessibility?: (feature: unknown, index: number) => MapFeatureAccessibility;
   id?: string;
 }
 
@@ -924,10 +1002,12 @@ function MapGeoJSON({
   strokeWidth = 1,
   fillOpacity = 0.7,
   onPress,
+  accessibility,
   id = 'geojson',
 }: MapGeoJSONProps) {
   const defaultFill = useToken('--color-primary', '#262626');
   const defaultStroke = useToken('--color-border', 'rgba(0,0,0,0.1)');
+  useAccessibleMapFeatures(id, data, accessibility, onPress);
 
   if (!MapLibre) return null;
   const { GeoJSONSource, Layer } = MapLibre;
@@ -976,6 +1056,8 @@ export interface MapClusterProps {
   maxZoom?: number;
   /** Fires with the pressed cluster or point. */
   onPress?: (feature: unknown) => void;
+  /** Describes each source point for the synchronized nonvisual list. */
+  accessibility?: (feature: unknown, index: number) => MapFeatureAccessibility;
   id?: string;
 }
 
@@ -993,12 +1075,14 @@ function MapCluster({
   radius = 50,
   maxZoom = 14,
   onPress,
+  accessibility,
   id = 'cluster',
 }: MapClusterProps) {
   const fill = useToken('--color-primary', '#262626');
   const onFill = useToken('--color-primary-foreground', '#fafafa');
   const bubble = color ?? fill;
   const ink = textColor ?? onFill;
+  useAccessibleMapFeatures(id, data, accessibility, onPress);
 
   if (!MapLibre) return null;
   const { GeoJSONSource, Layer } = MapLibre;
@@ -1057,6 +1141,25 @@ function MapCluster({
 }
 MapCluster.displayName = 'Map.Cluster';
 
+function useAccessibleMapFeatures(
+  id: string,
+  data: unknown,
+  accessibility: MapGeoJSONProps['accessibility'],
+  onPress?: (feature: unknown) => void
+) {
+  const registerAccessibleFeatures = useContext(MapContext)?.registerAccessibleFeatures;
+  const features = useMemo(
+    () => (accessibility ? describeMapFeatures(data, accessibility) : []),
+    [accessibility, data]
+  );
+
+  useEffect(() => {
+    if (!accessibility || !registerAccessibleFeatures) return;
+    registerAccessibleFeatures(id, { features, onPress });
+    return () => registerAccessibleFeatures(id, null);
+  }, [accessibility, features, id, onPress, registerAccessibleFeatures]);
+}
+
 export interface MapHeatmapProps {
   /** Point features to spread. */
   data: unknown;

package/src/components/map/map-accessibility.ts

@@ -0,0 +1,41 @@
+import type { AccessibilityState } from 'react-native';
+
+/** The nonvisual description of one feature in a GeoJSON-backed layer. */
+export interface MapFeatureAccessibility {
+  /** The feature's spoken name. */
+  label: string;
+  /** What activating the feature does, when the layer has `onPress`. */
+  hint?: string;
+  /** Selection, disabled, expanded, checked, or busy state. */
+  state?: AccessibilityState;
+}
+
+export type MapFeatureAccessibilityDescription = MapFeatureAccessibility & {
+  feature: unknown;
+};
+
+/**
+ * Describes the features in inline GeoJSON without maintaining a second list.
+ * URL sources cannot be read synchronously and remain decorative.
+ */
+export function describeMapFeatures(
+  data: unknown,
+  describe: (feature: unknown, index: number) => MapFeatureAccessibility
+): MapFeatureAccessibilityDescription[] {
+  const record = isRecord(data) ? data : null;
+  const features =
+    record?.type === 'FeatureCollection' && Array.isArray(record.features)
+      ? record.features
+      : record?.type === 'Feature'
+        ? [data]
+        : [];
+
+  return features.map((feature, index) => ({
+    feature,
+    ...describe(feature, index),
+  }));
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}

package/src/components/map/maplibre.ts

@@ -119,6 +119,8 @@ interface MapLibreModule {
     touchZoom?: boolean;
     touchRotate?: boolean;
     touchPitch?: boolean;
+    accessible?: boolean;
+    importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
     onPress?: (event: NativeEvent<{ coordinates: LngLat }>) => void;
     onDidFinishLoadingMap?: () => void;
     onRegionDidChange?: (event: NativeEvent<ViewState>) => void;

package/src/components/menu/index.tsx

@@ -57,7 +57,10 @@ import Animated, {
 } from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
-import { Check, ChevronLeft, ChevronRight, Circle } from 'lucide-react-native';
+import Check from 'lucide-react-native/icons/check';
+import ChevronLeft from 'lucide-react-native/icons/chevron-left';
+import ChevronRight from 'lucide-react-native/icons/chevron-right';
+import Circle from 'lucide-react-native/icons/circle';
 import { Text, textChildren } from '../../primitives/text';
 import { useDirection, useDirectionSign } from '../../hooks/use-direction';
 import { selectionTick } from '../../utils/haptics';