panelui-native 0.40.0 → 0.43.0

package/src/components/map/index.tsx

@@ -128,6 +128,43 @@ function useToken(name: string, fallback: string): string {
   return typeof value === 'string' && value.length > 0 ? value : fallback;
 }
 
+/** True for a theme token name, as opposed to a literal colour. */
+function isToken(value: string | undefined): value is string {
+  return typeof value === 'string' && value.startsWith('--');
+}
+
+/**
+ * The same colour at a given alpha, for a ramp built from one hue.
+ *
+ * Style expressions are handed to the renderer as strings, so this produces
+ * `rgba()` rather than reaching for a colour type the layer would not accept.
+ */
+function withAlpha(color: string, alpha: number): string {
+  if (color.startsWith('#')) {
+    const hex = color.slice(1);
+    const full =
+      hex.length === 3
+        ? hex
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : hex.slice(0, 6);
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    if (Number.isNaN(r + g + b)) return color;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  const channels = color.match(/rgba?\(([^)]+)\)/)?.[1];
+  if (channels) {
+    const [r, g, b] = channels.split(',').map((part) => part.trim());
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  return color;
+}
+
 interface MapContextValue {
   mapRef: React.RefObject<MapRef | null>;
   cameraRef: React.RefObject<CameraRef | null>;
@@ -1025,6 +1062,28 @@ export interface MapHeatmapProps {
   data: unknown;
   /** Feature property to weight each point by. Unweighted when omitted. */
   weight?: string;
+  /**
+   * Base colour of the field — a theme token by name, or a literal. The ramp
+   * is this colour at rising opacity, so density reads as *more of the same
+   * thing* rather than as a change of subject.
+   *
+   * Defaults to `--color-chart-2`, which is a saturated accent in every theme.
+   * It is deliberately not `--color-chart-1`: that is the series colour a chart
+   * is about, and every theme starts it on something close to the foreground —
+   * near-black in a light theme, near-white in a dark one — which over a
+   * basemap is a smudge rather than a measurement.
+   */
+  color?: string;
+  /**
+   * Replace the derived ramp outright, coolest first. For the conventional
+   * heat ramp, where the hue carries the reading as well as the opacity —
+   * worth it when the field sits over varied terrain and one hue at five
+   * opacities stops being separable from what is underneath it.
+   *
+   * The first stop is drawn at the lowest density, the last at the highest.
+   * Density zero stays fully transparent either way.
+   */
+  colors?: string[];
   /**
    * Spread of a single point, in points, at street zoom. Larger blurs more.
    * The drawn radius shrinks as the map zooms out, so a point keeps covering
@@ -1037,6 +1096,12 @@ export interface MapHeatmapProps {
   opacity?: number;
   /** Above this zoom the layer fades out — see the note on the component. */
   maxZoom?: number;
+  /**
+   * Draw the points themselves as the field fades out, coloured from the same
+   * ramp by weight. Without them, zooming past `maxZoom` leaves an empty map:
+   * the layer gets out of the way, and nothing takes its place.
+   */
+  points?: boolean;
   id?: string;
 }
 
@@ -1050,30 +1115,63 @@ export interface MapHeatmapProps {
  *
  * It fades out past `maxZoom` on purpose. Zoomed far enough in, every point is
  * its own island and the blur says less than the points would — so the layer
- * gets out of the way rather than smearing five records across a street.
+ * gets out of the way rather than smearing five records across a street. Set
+ * `points` and the records themselves fade in as it goes, which is the whole
+ * handover: a field while the question is where, marks once it is which.
  *
  * The radius is tied to zoom for the mirror-image reason. Left as a fixed
  * number of screen points it would mean a different distance at every zoom:
  * a blur that reads as a city at street level covers half a continent once
  * the map is pulled out, and a field measured over land ends up sitting in
  * the sea. Scaling it with the projection keeps the claim the same one.
+ *
+ * Intensity is tied to zoom too, and in the other direction. The same points
+ * are packed into fewer pixels the further out the map goes, so a constant
+ * intensity saturates the whole field at world zoom and shows nothing but its
+ * own ceiling.
  */
 function MapHeatmap({
   data,
   weight,
+  color,
+  colors,
   radius = 24,
   intensity = 1,
   opacity = 0.85,
   maxZoom = 15,
+  points = false,
   id = 'heatmap',
 }: MapHeatmapProps) {
-  const cool = useToken('--color-muted', 'rgba(0,0,0,0.06)');
-  const warm = useToken('--color-chart-1', '#262626');
-  const hot = useToken('--color-chart-2', '#666666');
+  const base = useToken(isToken(color) ? color : '--color-chart-2', '#3b82f6');
+  const resolved = (isToken(color) ? base : color) ?? base;
+
+  /*
+   * One colour at rising opacity rather than five colours, which is how every
+   * other ramp in the library is built: a sequential scale is one quantity
+   * getting larger, and five hues say five categories. `colors` is there for
+   * the case where that is not enough.
+   */
+  const ramp = colors?.length
+    ? colors
+    : [
+        withAlpha(resolved, 0.25),
+        withAlpha(resolved, 0.45),
+        withAlpha(resolved, 0.7),
+        withAlpha(resolved, 0.9),
+        resolved,
+      ];
 
   if (!MapLibre) return null;
   const { GeoJSONSource, Layer } = MapLibre;
 
+  // Density zero is transparent rather than the coolest colour, so the map
+  // shows through everywhere nothing was measured instead of the whole
+  // viewport being tinted by the absence of data.
+  const stops = ramp.flatMap((entry, index) => [
+    0.15 + (0.85 * index) / Math.max(1, ramp.length - 1),
+    entry,
+  ]);
+
   return (
     <GeoJSONSource id={`${id}-source`} data={data}>
       <Layer
@@ -1084,7 +1182,15 @@ function MapHeatmap({
           heatmapWeight: weight
             ? ['interpolate', ['linear'], ['get', weight], 0, 0, 1, 1]
             : 1,
-          heatmapIntensity: intensity,
+          heatmapIntensity: [
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            0,
+            intensity * 0.6,
+            maxZoom,
+            intensity * 1.2,
+          ],
           // `radius` is the spread at street zoom; below that it is scaled
           // down so it keeps covering the same ground rather than the same
           // number of pixels. The stops are the projection: each zoom level
@@ -1101,21 +1207,13 @@ function MapHeatmap({
             14,
             radius,
           ],
-          // Transparent at zero rather than the coolest colour, so the map
-          // shows through everywhere nothing was measured instead of the whole
-          // viewport being tinted by the absence of data.
           heatmapColor: [
             'interpolate',
             ['linear'],
             ['heatmap-density'],
             0,
             'rgba(0,0,0,0)',
-            0.2,
-            cool,
-            0.6,
-            warm,
-            1,
-            hot,
+            ...stops,
           ],
           heatmapOpacity: [
             'interpolate',
@@ -1128,6 +1226,52 @@ function MapHeatmap({
           ],
         }}
       />
+
+      {/* The handover, in the two zoom levels the field spends fading: the
+          marks arrive as it leaves, so there is never a zoom with neither. */}
+      {points ? (
+        <Layer
+          id={`${id}-points`}
+          type="circle"
+          minzoom={maxZoom - 2}
+          style={{
+            circleRadius: weight
+              ? ['interpolate', ['linear'], ['get', weight], 0, 3, 1, 9]
+              : 5,
+            circleColor: weight
+              ? [
+                  'interpolate',
+                  ['linear'],
+                  ['get', weight],
+                  0,
+                  ramp[0] as string,
+                  1,
+                  ramp[ramp.length - 1] as string,
+                ]
+              : (ramp[ramp.length - 1] as string),
+            circleStrokeWidth: 1,
+            circleStrokeColor: 'rgba(255,255,255,0.75)',
+            circleOpacity: [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              maxZoom - 2,
+              0,
+              maxZoom,
+              0.85,
+            ],
+            circleStrokeOpacity: [
+              'interpolate',
+              ['linear'],
+              ['zoom'],
+              maxZoom - 2,
+              0,
+              maxZoom,
+              0.6,
+            ],
+          }}
+        />
+      ) : null}
     </GeoJSONSource>
   );
 }

package/src/components/menu/index.tsx

@@ -57,9 +57,9 @@ import Animated, {
 } from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
-import { CheckIcon, ChevronRightIcon } from '../../icons';
+import { Check, ChevronLeft, ChevronRight, Circle } from 'lucide-react-native';
 import { Text, textChildren } from '../../primitives/text';
-import { useDirectionSign } from '../../hooks/use-direction';
+import { useDirection, useDirectionSign } from '../../hooks/use-direction';
 import { selectionTick } from '../../utils/haptics';
 import { cn } from '../../utils/cn';
 import { Popover, type PopoverContentProps, type PopoverProps } from '../popover';
@@ -79,6 +79,19 @@ function useTint(variable: string): string | undefined {
   return typeof raw === 'string' ? raw : undefined;
 }
 
+/**
+ * The colour an indicator falls back to before the stylesheet has been read.
+ *
+ * The glyphs here are drawn by a general-purpose icon set rather than by this
+ * library's own, and that set defaults an unset colour to `currentColor` —
+ * which React Native cannot resolve and refuses to paint. A neutral mid grey
+ * is legible on either a light or a dark panel for the frame or two it lasts.
+ */
+const INDICATOR_FALLBACK = '#737373';
+
+/** Icon stroke, matched to the weight this library's own glyphs are drawn at. */
+const INDICATOR_STROKE = 2;
+
 /** How long a row takes to light up under a finger, and to let go again. */
 const PRESS_IN_DURATION = 90;
 const PRESS_OUT_DURATION = 160;
@@ -544,7 +557,17 @@ function MenuCheckboxItem({
       // An empty column rather than no column: the mark comes and goes as the
       // row is toggled, and a row whose label steps sideways each time reads
       // as a different row rather than the same one in a new state.
-      icon={checked ? <CheckIcon size={16} color={tint} /> : <MenuIndicatorSpacer />}
+      icon={
+        checked ? (
+          <Check
+            size={16}
+            strokeWidth={INDICATOR_STROKE}
+            color={tint ?? INDICATOR_FALLBACK}
+          />
+        ) : (
+          <MenuIndicatorSpacer />
+        )
+      }
       onSelect={() => {
         onCheckedChange?.(!checked);
         onSelect?.();
@@ -616,9 +639,22 @@ function MenuRadioItem({
       icon={
         selected ? (
           indicator === 'dot' ? (
-            <View className="h-2 w-2 rounded-full bg-popover-foreground" />
+            // A filled circle, not a bare View: the dot is an indicator like
+            // the tick beside it, and drawing one of the two as a rounded box
+            // is what makes them optically different sizes at the same nominal
+            // one.
+            <Circle
+              size={8}
+              strokeWidth={INDICATOR_STROKE}
+              color={tint ?? INDICATOR_FALLBACK}
+              fill={tint ?? INDICATOR_FALLBACK}
+            />
           ) : (
-            <CheckIcon size={16} color={tint} />
+            <Check
+              size={16}
+              strokeWidth={INDICATOR_STROKE}
+              color={tint ?? INDICATOR_FALLBACK}
+            />
           )
         ) : (
           // Held open, so the options stay in one column as the choice moves
@@ -690,8 +726,13 @@ export interface MenuSubTriggerProps
 function MenuSubTrigger({ className, children, icon, onSelect, ...props }: MenuSubTriggerProps) {
   const { open, toggle } = useMenuSub('Menu.SubTrigger');
   const sign = useDirectionSign();
+  const direction = useDirection();
   const reducedMotion = useReducedMotion();
   const chevronTint = useTint('--color-muted-foreground');
+  // The glyph mirrors by being the other glyph. A `scaleX` flip would work on
+  // a chevron, but it also flips the rotation below with it — and this one is
+  // already being rotated.
+  const Chevron = direction === 'rtl' ? ChevronLeft : ChevronRight;
   const progress = useSharedValue(open ? 1 : 0);
 
   useEffect(() => {
@@ -717,7 +758,11 @@ function MenuSubTrigger({ className, children, icon, onSelect, ...props }: MenuS
       className={className}
       trailing={
         <Animated.View style={chevronStyle}>
-          <ChevronRightIcon size={16} color={chevronTint} />
+          <Chevron
+            size={16}
+            strokeWidth={INDICATOR_STROKE}
+            color={chevronTint ?? INDICATOR_FALLBACK}
+          />
         </Animated.View>
       }
       onSelect={() => {

package/src/components/pagination/index.tsx

@@ -65,9 +65,10 @@ export type PaginationSize = 'sm' | 'default';
 /**
  * What the small size gives back as padding. 44pt is the smallest target a
  * finger reliably hits, and the row is allowed to get tighter than that only
- * because the reach is restored outside the paint.
+ * because the reach is restored outside the paint — so this is exactly the
+ * difference between the small target's 32pt and that 44.
  */
-const SMALL_HIT_SLOP = { top: 4, bottom: 4, left: 4, right: 4 } as const;
+const SMALL_HIT_SLOP = { top: 6, bottom: 6, left: 6, right: 6 } as const;
 
 const paginationVariants = tv({
   slots: {
@@ -91,9 +92,9 @@ const paginationVariants = tv({
       },
       sm: {
         list: 'gap-0.5',
-        item: 'h-9 min-w-9 px-1',
+        item: 'h-8 min-w-8 px-1',
         itemLabel: 'text-xs',
-        ellipsis: 'h-9 w-9',
+        ellipsis: 'h-8 w-8',
         status: 'text-xs',
         summary: 'text-xs',
       },
@@ -304,7 +305,18 @@ const PaginationRoot = forwardRef<View, PaginationProps>(
             // With nothing on the leading edge the controls are the whole row
             // and centre in it; with something there they part to the two ends,
             // which is the shape a table footer wants.
-            className: cn(children ? 'justify-between gap-3' : 'justify-center', className),
+            //
+            // Clipped, because the run is a fixed number of targets and a
+            // narrow enough container cannot hold it. Overflowing, a centred
+            // row hangs the same distance past both edges, and the leading
+            // number ends up half off the screen with nothing to say why.
+            // Inside its own bounds the shortfall at least looks deliberate,
+            // and `siblings`/`boundaries` are the knobs that fix it.
+            className: cn(
+              'overflow-hidden',
+              children ? 'justify-between gap-3' : 'justify-center',
+              className
+            ),
           })}
           {...props}
         >
@@ -312,7 +324,7 @@ const PaginationRoot = forwardRef<View, PaginationProps>(
             <PaginationStatus>{text}</PaginationStatus>
           ))}
 
-          <View className={list()}>
+          <View className={list({ className: 'max-w-full' })}>
             {controls ? <PaginationPrevious label={variant === 'simple'} /> : null}
 
             {variant === 'numbers'