panelui-native 0.63.0 → 0.65.0

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

@@ -73,6 +73,7 @@ import {
   isValidElement,
   useContext,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -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;

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,
@@ -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);
@@ -657,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';

package/src/components/number-input/index.tsx

@@ -34,6 +34,7 @@ import { AnimatedPressable } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
 import { selectionTick } from '../../utils/haptics';
 import { Label } from '../label';
+import { normalize, precisionOf } from './number-input-math';
 
 /** Wait before a held button starts repeating — a tap must not trip it. */
 const REPEAT_DELAY = 400;
@@ -156,32 +157,6 @@ export interface NumberInputProps
   haptics?: boolean;
 }
 
-/** Decimals implied by `step`, so display and math round to the same place. */
-function precisionOf(step: number): number {
-  if (!isFinite(step)) return 0;
-  const s = String(step);
-  const dot = s.indexOf('.');
-  return dot === -1 ? 0 : s.length - dot - 1;
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-/**
- * Snaps to the nearest step from a finite base (or 0 when `min` is open), then
- * rounds to the step's precision so 0.1 + 0.2 does not drift to 0.30000004.
- */
-function normalize(value: number, min: number, max: number, step: number): number {
-  const base = isFinite(min) ? min : 0;
-  const snapped = isFinite(step) && step > 0
-    ? Math.round((value - base) / step) * step + base
-    : value;
-  const p = precisionOf(step);
-  const factor = 10 ** p;
-  return clamp(Math.round(snapped * factor) / factor, min, max);
-}
-
 /**
  * A number stepped by buttons or typed by hand, reconciled to one clamped,
  * step-snapped value. See the file header for why it keeps both affordances.

package/src/components/number-input/number-input-math.ts

@@ -0,0 +1,50 @@
+/** JavaScript numbers carry about fifteen reliable decimal digits. */
+const MAX_DECIMAL_PRECISION = 15;
+
+/** Decimals `step` implies, before the reliable-digits ceiling is applied. */
+function requestedPrecision(step: number): number {
+  if (!Number.isFinite(step)) return 0;
+
+  const [coefficient = '', exponentText] = Math.abs(step).toString().toLowerCase().split('e');
+  const decimals = coefficient.split('.')[1]?.length ?? 0;
+  const exponent = exponentText === undefined ? 0 : Number(exponentText);
+
+  return Math.max(0, decimals - exponent);
+}
+
+/** Decimals implied by `step`, including numbers written with an exponent. */
+export function precisionOf(step: number): number {
+  return Math.min(MAX_DECIMAL_PRECISION, requestedPrecision(step));
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Snaps to the nearest step from a finite base, then clears binary drift at
+ * the step's decimal precision.
+ */
+export function normalize(value: number, min: number, max: number, step: number): number {
+  const base = Number.isFinite(min) ? min : 0;
+  const offset = (value - base) / step;
+  const snapped =
+    Number.isFinite(step) && step > 0 && Number.isFinite(offset)
+      ? Math.round(offset) * step + base
+      : value;
+
+  // A step finer than the reliable-digit ceiling cannot be tidied at its own
+  // precision: rounding at the ceiling instead lands on zero and takes the
+  // value with it. The snap already placed it on the step, so leave it there.
+  if (requestedPrecision(step) > MAX_DECIMAL_PRECISION) return clamp(snapped, min, max);
+
+  const precision = precisionOf(step);
+  const factor = 10 ** precision;
+  const scaled = snapped * factor;
+  // Keep the established rounding path while it is safe. toFixed avoids
+  // turning a finite large value into Infinity when scaling would overflow.
+  const rounded = Number.isFinite(scaled)
+    ? Math.round(scaled) / factor
+    : Number(snapped.toFixed(precision));
+  return clamp(rounded, min, max);
+}

package/src/components/plot/index.tsx

@@ -68,6 +68,7 @@ import {
   isValidElement,
   useContext,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -328,7 +329,7 @@ const PlotRoot = forwardRef<PlotHandle, PlotProps>(function PlotRoot(
   const [size, setSize] = useState({ width: 0, height: 0 });
   const [series, setSeries] = useState<[string, string][]>([]);
   const [activeIndexJS, setActiveIndexJS] = useState(-1);
-  const clipId = useRef(`panelui-plot-${Math.random().toString(36).slice(2, 9)}`).current;
+  const clipId = `panelui-plot-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const reveal = useSharedValue(0);
   const domainMin = useSharedValue(0);

package/src/components/radio-group/index.tsx

@@ -45,7 +45,7 @@ const itemVariants = tv({
     // `self-start` matters: the group is a column, so without it Yoga stretches
     // the row to the full width and the dead space to the right of the label
     // becomes part of the target. Tapping nothing would select the option.
-    row: 'flex-row items-center gap-2.5 self-start',
+    row: 'min-h-12 min-w-12 flex-row items-center gap-2.5 self-start',
     indicator:
       'h-5 w-5 items-center justify-center rounded-full border border-input bg-background',
     label: 'text-sm text-foreground',
@@ -248,7 +248,6 @@ const RadioGroupItem = forwardRef<View, RadioGroupItemProps>(
         accessibilityLabel={label}
         disabled={disabled}
         onPress={() => context.onValueChange(value)}
-        hitSlop={variant === 'card' ? undefined : 8}
         className={slots.row({ className })}
       >
         {body}

package/src/components/sortable/index.tsx

@@ -89,6 +89,7 @@ import { useCSSVariable } from 'uniwind';
 import { GripVerticalIcon, IconColorProvider } from '../../icons';
 import { cn } from '../../utils/cn';
 import { impactKnock, selectionTick } from '../../utils/haptics';
+import { moveWithPinned, stepWithPinned } from './reorder';
 
 /**
  * Rows getting out of the way of the one being carried. Quick, because they
@@ -228,66 +229,6 @@ function slotCenter(
   return offset + (self === undefined ? 0 : (heights[self] ?? 0)) / 2;
 }
 
-/**
- * The order after a row has moved, with pinned rows left where they were.
- *
- * The move is applied first, to the whole list, so a carried row can be dragged
- * *past* a pinned one — refusing the move instead would make a pinned row a
- * wall, and a row that holds its place is not the same as a row nothing may
- * cross. The pinned ids are then put back at the indices they occupy in the
- * laid-out order, and everything else falls into the slots that are left, in
- * the order the move produced.
- *
- * `laid` rather than `list` is what the fixed indices are read from, because
- * that is the one order a pinned row is guaranteed to be correctly placed in:
- * it is where it was rendered, and holding its slot is the whole point.
- */
-function moveWithPinned(
-  list: readonly string[],
-  laid: readonly string[],
-  pinned: Record<string, boolean>,
-  id: string,
-  from: number,
-  to: number
-): string[] {
-  'worklet';
-  const moved = [...list];
-  moved.splice(from, 1);
-  moved.splice(to, 0, id);
-
-  const next: (string | undefined)[] = [];
-  let anyPinned = false;
-  for (let i = 0; i < moved.length; i += 1) next.push(undefined);
-  for (let i = 0; i < laid.length && i < next.length; i += 1) {
-    const at = laid[i];
-    if (at !== undefined && pinned[at]) {
-      next[i] = at;
-      anyPinned = true;
-    }
-  }
-  if (!anyPinned) return moved;
-
-  const free: string[] = [];
-  for (let i = 0; i < moved.length; i += 1) {
-    const at = moved[i];
-    if (at !== undefined && !pinned[at]) free.push(at);
-  }
-
-  const result: string[] = [];
-  let f = 0;
-  for (let i = 0; i < next.length; i += 1) {
-    const held = next[i];
-    if (held !== undefined) {
-      result.push(held);
-      continue;
-    }
-    const take = free[f];
-    f += 1;
-    if (take !== undefined) result.push(take);
-  }
-  return result;
-}
-
 /**
  * Where the dragged row belongs now, given where its edges have reached.
  *
@@ -760,15 +701,22 @@ function SortableRoot({
       const current = rendered.value.indexOf(id);
       if (current < 0) return;
 
-      const to = current + delta;
-      if (to < 0 || to >= rendered.value.length) return;
+      const next = stepWithPinned(
+        rendered.value,
+        rendered.value,
+        pinned.value,
+        id,
+        current,
+        delta
+      );
+      const to = next.indexOf(id);
+      if (to === current) return;
 
-      const next = reorderItems(rendered.value, current, to);
       order.value = next;
       if (haptics) selectionTick();
       onReorder?.(next, { id, from: current, to });
     },
-    [haptics, onReorder, order, rendered]
+    [haptics, onReorder, order, pinned, rendered]
   );
 
   const context = useMemo<SortableContextValue>(