@multiplatform.one/components 6.7.0 → 7.0.0

package/src/Wheel/index.tsx

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type { GetProps, SizeTokens } from "tamagui";
 import { View, getTokens, isWeb, styled, Text } from "tamagui";
@@ -12,6 +12,9 @@ export interface WheelItem<T = string | number> {
   label?: string;
 }
 
+/** iOS 14 multi-column highlight joining (CupertinoPicker capStart/capEnd). */
+export type WheelHighlightEdges = "all" | "start" | "end" | "none";
+
 export interface WheelProps<T = string | number> {
   /** Array of items to display */
   items: (T | WheelItem<T>)[];
@@ -23,6 +26,8 @@ export interface WheelProps<T = string | number> {
   visibleItems?: 3 | 5 | 7;
   /** Height of each item */
   itemHeight?: number;
+  /** Column width in px. Items are absolutely positioned, so this is the painted width. */
+  width?: number;
   /** Custom render function for items */
   renderItem?: (item: T, index: number, isSelected: boolean) => ReactNode;
   /** Whether the wheel is disabled */
@@ -34,6 +39,11 @@ export interface WheelProps<T = string | number> {
    * instead of rubber-banding. Uses virtual rows with modulo item indexing.
    */
   loop?: boolean;
+  /**
+   * How the iOS selection fill rounds and insets. `"all"` is a standalone
+   * column; `"start"` / `"end"` / `"none"` join adjacent columns into one band.
+   */
+  highlightEdges?: WheelHighlightEdges;
   /** Accessible name for the picker (web renders role="slider"). */
   "aria-label"?: string;
 }
@@ -45,6 +55,23 @@ const friction = 0.95; // Apple's PKScrollViewDecelerationFrictionFactor
 const minVelocity = 0.5; // Minimum velocity before snapping
 const momentumMultiplier = 0.8; // Velocity multiplier for momentum feel
 const rubberBandConstant = 0.55; // Apple's rubber-banding constant
+const tapSlopPx = 8;
+
+/**
+ * Flutter CupertinoPicker / UIPickerView cylinder. diameterRatio 1.07 and
+ * squeeze 1.45 are the Cupertino defaults — a shallow drum, not a 70° fan.
+ */
+const diameterRatio = 1.07;
+const squeeze = 1.45;
+const perspectivePx = 400;
+const defaultColumnWidth = 88;
+
+/** Type scale for wheel numerals — iOS UIPickerView is ~21pt at default size. */
+const wheelFontBySize: Record<"small" | "medium" | "large", SizeTokens> = {
+  small: "$6",
+  medium: "$8",
+  large: "$9",
+};
 
 /** Durations for discrete snaps (mirrors theme animationConfig). */
 const transitionDurationsMs: Record<string, number> = {
@@ -59,9 +86,9 @@ const transitionDurationsMs: Record<string, number> = {
 };
 
 // The interactive wrapper is a raw <div>, so the non-removable focus-visible
-// ring (W12 / DG-A11Y-01 contract: 2px solid $outlineColor, offset 2) has to
-// come from an injected stylesheet — inline styles cannot express
-// :focus-visible. Same one-shot pattern as the forms Spinner motion styles.
+// ring (W12 / DG-A11Y-01 / LC-71: 2px solid $outlineColor) has to come from
+// an injected stylesheet — inline styles cannot express :focus-visible.
+// Inset (−2px): the viewport clips overflow to radius (LC-71 clipping arm).
 const WHEEL_FOCUS_STYLE_ID = "mp1-wheel-focus";
 function ensureWheelFocusStyles() {
   if (!isWeb || typeof document === "undefined") return;
@@ -69,10 +96,19 @@ function ensureWheelFocusStyles() {
   const style = document.createElement("style");
   style.id = WHEEL_FOCUS_STYLE_ID;
   style.textContent =
-    ".mp1-wheel-wrapper:focus-visible { outline: 2px solid var(--outlineColor, rgba(0,0,0,0.5)); outline-offset: 2px; }";
+    ".mp1-wheel-wrapper:focus-visible { outline: 2px solid var(--outlineColor, rgba(0,0,0,0.5)); outline-offset: -2px; }";
   document.head.appendChild(style);
 }
 
+const wheelMaskStyle: CSSProperties | undefined = isWeb
+  ? {
+      WebkitMaskImage:
+        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
+      maskImage:
+        "linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, #000 32%, #000 68%, rgba(0,0,0,0.28) 100%)",
+    }
+  : undefined;
+
 // ── Styled components ─────────────────────────────────────────
 
 const WheelContainer = styled(View, {
@@ -80,7 +116,6 @@ const WheelContainer = styled(View, {
   position: "relative",
   overflow: "hidden",
   userSelect: "none",
-  width: 80, // Default width for wheel column
 });
 
 const WheelItemContainer = styled(View, {
@@ -98,28 +133,9 @@ const SelectionIndicator = styled(View, {
   position: "absolute",
   left: 0,
   right: 0,
-  borderTopWidth: 1,
-  borderBottomWidth: 1,
-  borderColor: "$borderColor",
-  backgroundColor: "$color3",
-  opacity: 0.3,
   pointerEvents: "none",
 });
 
-const FadeOverlay = styled(View, {
-  name: "WheelFadeOverlay",
-  position: "absolute",
-  left: 0,
-  right: 0,
-  pointerEvents: "none",
-  variants: {
-    edge: {
-      top: { top: 0 },
-      bottom: { bottom: 0 },
-    },
-  } as const,
-});
-
 // ── Helper functions ──────────────────────────────────────────
 
 function normalizeItem<T>(item: T | WheelItem<T>): WheelItem<T> {
@@ -181,43 +197,56 @@ function rubberBand(offset: number, dimension: number): number {
   return offset < 0 ? -result : result;
 }
 
-// Calculate 3D transform for wheel effect
+/**
+ * Project a row onto the Cupertino cylinder. Angle 0 sits in the selection
+ * band; off-center rows recede with rotateX + foreshortening (not opacity —
+ * row text stays on the AA $color11 ramp).
+ */
 function getItemTransform(
   index: number,
   scrollOffset: number,
   itemHeight: number,
   containerHeight: number,
 ): { translateY: number; rotateX: number; scale: number; opacity: number } {
-  const centerY = containerHeight / 2;
-  // Rows are laid out so the row at `scrollOffset / itemHeight` sits under the
-  // selection indicator (which is centered at `containerHeight / 2`), hence the
-  // `(containerHeight - itemHeight) / 2` padding shift.
-  const itemCenterY =
-    index * itemHeight + itemHeight / 2 - scrollOffset + (containerHeight - itemHeight) / 2;
-  const distanceFromCenter = itemCenterY - centerY;
-  const normalizedDistance = distanceFromCenter / (containerHeight / 2);
-
-  // Rotation: items rotate on X-axis as they move away from center
-  // Max rotation is about 70 degrees at the edges
-  const rotateX = normalizedDistance * -70;
-
-  // Scale: items get smaller as they rotate away
-  const scale = 1 - Math.abs(normalizedDistance) * 0.3;
-
-  // Opacity: keep visible rows at full alpha so $color11/$color12 clear WCAG AA
-  // (≥4.5:1). Depth cue comes from rotateX/scale + edge fades, not text alpha.
-  const opacity = 1;
-
-  // Y position adjusted for 3D perspective effect
-  // Items appear to curve back
-  const curveOffset = Math.abs(normalizedDistance) * normalizedDistance * itemHeight * 0.5;
-  const translateY = itemCenterY - itemHeight / 2 + curveOffset;
-
+  const radius = (containerHeight * diameterRatio) / 2;
+  const angle = (index * itemHeight - scrollOffset) / squeeze / Math.max(radius, 1);
+  const clamped = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, angle));
+  const centerTop = (containerHeight - itemHeight) / 2;
+  const translateY = centerTop + radius * Math.sin(clamped);
+  const rotateX = -(clamped * 180) / Math.PI;
+  const scale = Math.max(0.72, Math.min(1, Math.cos(clamped)));
   return {
     translateY,
-    rotateX: Math.max(-85, Math.min(85, rotateX)),
-    scale: Math.max(0.5, Math.min(1, scale)),
-    opacity,
+    rotateX,
+    scale,
+    opacity: 1,
+  };
+}
+
+function tokenPx(token: string | number, scale: "radius" | "space"): number {
+  if (typeof token === "number") return token;
+  const key = String(token).replace(/^\$/, "");
+  const val = (getTokens() as { [k: string]: Record<string, { val?: number }> })[scale]?.[key]?.val;
+  if (typeof val === "number") return val;
+  return scale === "radius" ? 9 : 8;
+}
+
+function highlightBandStyle(
+  edges: WheelHighlightEdges,
+  radiusToken: string | number,
+  pointy: boolean,
+): CSSProperties {
+  const r = pointy ? 0 : tokenPx(radiusToken, "radius");
+  const inset = tokenPx("$2", "space");
+  const capStart = edges === "all" || edges === "start";
+  const capEnd = edges === "all" || edges === "end";
+  return {
+    borderStartStartRadius: capStart ? r : 0,
+    borderStartEndRadius: capEnd ? r : 0,
+    borderEndStartRadius: capStart ? r : 0,
+    borderEndEndRadius: capEnd ? r : 0,
+    marginInlineStart: capStart ? inset : 0,
+    marginInlineEnd: capEnd ? inset : 0,
   };
 }
 
@@ -229,22 +258,28 @@ export function Wheel<T = string | number>({
   onChange,
   visibleItems = 5,
   itemHeight: itemHeightProp,
+  width: widthProp,
   renderItem,
   disabled = false,
   size: sizeProp,
   loop = false,
+  highlightEdges = "all",
   "aria-label": ariaLabel,
 }: WheelProps<T>) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  // Row text and row geometry derive from the size knob (spec Wheel:
-  // rows consume sizeToken, SP-FIXED); explicit props eject.
-  const size = sizeProp ?? (knobProps.sizeToken as SizeTokens);
-  const itemHeight = itemHeightProp ?? (getTokens().size as any)?.[knobProps.sizeToken]?.val ?? 40;
+  const sizeKnob = (knobProps.size as "small" | "medium" | "large") ?? "medium";
+  const size = sizeProp ?? wheelFontBySize[sizeKnob] ?? "$8";
+  // Row geometry rides nestedControl (density-aware, 32px at medium — iOS
+  // UIPickerView item extent). Explicit itemHeight ejects.
+  const itemHeight = itemHeightProp ?? knobProps.nestedControl.px ?? 32;
+  const columnWidth = widthProp ?? defaultColumnWidth;
   ensureWheelFocusStyles();
   // LC-25: discrete snaps (keyboard / controlled value) tween; drag stays 1:1.
-  const motionTransition = (knobProps.transition as string | undefined) || "quick";
-  const snapDurationMs = transitionDurationsMs[motionTransition] ?? 100;
+  // knobProps.transition is undefined at animation "none" (which also carries
+  // prefers-reduced-motion) — snaps must JUMP then, not fall back to a tween.
+  const motionTransition = knobProps.transition as string | undefined;
+  const snapDurationMs = motionTransition ? (transitionDurationsMs[motionTransition] ?? 100) : 0;
   const containerRef = useRef<HTMLDivElement>(null);
   const [scrollOffset, setScrollOffset] = useState(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -266,6 +301,8 @@ export function Wheel<T = string | number>({
   // Drag state
   const isDraggingRef = useRef(false);
   const lastYRef = useRef(0);
+  const downYRef = useRef(0);
+  const dragDistanceRef = useRef(0);
   const lastTimeRef = useRef(0);
   const dragVelocitiesRef = useRef<number[]>([]);
 
@@ -274,6 +311,13 @@ export function Wheel<T = string | number>({
   const minOffset = 0;
   const maxOffset = n > 0 ? (n - 1) * itemHeight : 0;
 
+  const liveDataIndex =
+    n === 0
+      ? 0
+      : loopEnabled
+        ? modIndex(Math.round(scrollOffset / itemHeight), n)
+        : Math.max(0, Math.min(Math.round(scrollOffset / itemHeight), n - 1));
+
   const runSnapComplete = useCallback(
     (finalOffset: number, dataIndex: number) => {
       const safeIdx = Math.max(0, Math.min(dataIndex, n - 1));
@@ -400,9 +444,35 @@ export function Wheel<T = string | number>({
     [n, itemHeight, loopEnabled, animateToOffset],
   );
 
-  // Momentum animation (iOS-style deceleration)
+  const hitTestDataIndex = useCallback(
+    (tapY: number): number | null => {
+      if (n === 0) return null;
+      const offset = scrollOffsetRef.current;
+      const centerRow = Math.round(offset / itemHeight);
+      const rowBuffer = paddingItems + 5;
+      let best: { dataIndex: number; dist: number } | null = null;
+      for (let vr = centerRow - rowBuffer; vr <= centerRow + rowBuffer; vr++) {
+        if (!loopEnabled && (vr < 0 || vr >= n)) continue;
+        const dataIndex = loopEnabled ? modIndex(vr, n) : vr;
+        const { translateY } = getItemTransform(vr, offset, itemHeight, containerHeight);
+        const dist = Math.abs(translateY + itemHeight / 2 - tapY);
+        if (!best || dist < best.dist) best = { dataIndex, dist };
+      }
+      if (best && best.dist <= itemHeight) return best.dataIndex;
+      return null;
+    },
+    [n, itemHeight, paddingItems, loopEnabled, containerHeight],
+  );
+
+  // Momentum animation (iOS-style deceleration). LC-68: at animation "none"
+  // / PRM there is no coast — jump to the nearest row (Apple Reduce Motion,
+  // GOV.UK scroll-behavior:auto, Material spatial-motion off).
   const startMomentum = useCallback(
     (initialVelocity: number) => {
+      if (snapDurationMs <= 0) {
+        snapToNearestRow(false);
+        return;
+      }
       let velocity = initialVelocity * momentumMultiplier;
       let offset = scrollOffsetRef.current;
 
@@ -420,12 +490,12 @@ export function Wheel<T = string | number>({
           }
         }
 
+        scrollOffsetRef.current = offset;
         setScrollOffset(offset);
 
         if (Math.abs(velocity) > minVelocity) {
           animationRef.current = requestAnimationFrame(animate);
         } else {
-          scrollOffsetRef.current = offset;
           snapToNearestRow(true);
         }
       };
@@ -434,7 +504,7 @@ export function Wheel<T = string | number>({
       if (animationRef.current) cancelAnimationFrame(animationRef.current);
       animationRef.current = requestAnimationFrame(animate);
     },
-    [loopEnabled, minOffset, maxOffset, containerHeight, itemHeight, snapToNearestRow],
+    [loopEnabled, minOffset, maxOffset, containerHeight, snapToNearestRow, snapDurationMs],
   );
 
   // Handle pointer/mouse down
@@ -450,12 +520,14 @@ export function Wheel<T = string | number>({
 
       isDraggingRef.current = true;
       lastYRef.current = e.clientY;
+      downYRef.current = e.clientY;
+      dragDistanceRef.current = 0;
       lastTimeRef.current = performance.now();
       dragVelocitiesRef.current = [];
 
-      // Capture pointer for drag outside element
       if (isWeb && containerRef.current) {
         containerRef.current.setPointerCapture(e.pointerId);
+        containerRef.current.style.cursor = "grabbing";
       }
     },
     [disabled],
@@ -470,6 +542,7 @@ export function Wheel<T = string | number>({
       const currentTime = performance.now();
       const deltaY = lastYRef.current - currentY;
       const deltaTime = currentTime - lastTimeRef.current;
+      dragDistanceRef.current += Math.abs(deltaY);
 
       // Calculate velocity
       if (deltaTime > 0) {
@@ -507,9 +580,24 @@ export function Wheel<T = string | number>({
 
       isDraggingRef.current = false;
 
-      // Release pointer capture
       if (isWeb && containerRef.current) {
-        containerRef.current.releasePointerCapture(e.pointerId);
+        try {
+          containerRef.current.releasePointerCapture(e.pointerId);
+        } catch {
+          // already released
+        }
+        containerRef.current.style.cursor = disabled ? "not-allowed" : "grab";
+      }
+
+      // iOS: a tap on a visible row snaps that row to center.
+      if (dragDistanceRef.current < tapSlopPx) {
+        const rect = containerRef.current?.getBoundingClientRect();
+        const tapY = e.clientY - (rect?.top ?? 0);
+        const tapped = hitTestDataIndex(tapY);
+        if (tapped != null) {
+          snapToIndex(tapped, true);
+          return;
+        }
       }
 
       // Calculate average velocity for momentum
@@ -526,7 +614,7 @@ export function Wheel<T = string | number>({
         snapToNearestRow(true);
       }
     },
-    [snapToNearestRow, startMomentum],
+    [snapToNearestRow, startMomentum, hitTestDataIndex, snapToIndex, disabled],
   );
 
   // Handle mouse wheel
@@ -554,6 +642,7 @@ export function Wheel<T = string | number>({
         }
       }
 
+      scrollOffsetRef.current = newOffset;
       setScrollOffset(newOffset);
 
       if (animationRef.current) cancelAnimationFrame(animationRef.current);
@@ -565,7 +654,7 @@ export function Wheel<T = string | number>({
         }, 100);
       });
     },
-    [disabled, loopEnabled, minOffset, maxOffset, itemHeight, snapToNearestRow],
+    [disabled, loopEnabled, minOffset, maxOffset, snapToNearestRow],
   );
 
   // Handle keyboard
@@ -663,42 +752,52 @@ export function Wheel<T = string | number>({
   const itemColor = (isSelected: boolean) =>
     disabled ? "$color10" : isSelected ? "$color12" : "$color11";
 
+  const radiusToken = knobProps.borderRadius.borderRadius as string | number;
+  const highlightStyle = highlightBandStyle(highlightEdges, radiusToken, Boolean(knobProps.pointy));
+  const highlightSmoothClass =
+    "className" in knobProps.borderRadius && typeof knobProps.borderRadius.className === "string"
+      ? knobProps.borderRadius.className
+      : undefined;
+
+  const renderItemNode = (dataIndex: number, isSelected: boolean) => {
+    const item = items[dataIndex];
+    const itemValue = getItemValue(item);
+    if (renderItem) return renderItem(itemValue, dataIndex, isSelected);
+    return (
+      <Text
+        {...knobProps.body}
+        fontSize={size}
+        fontWeight={isSelected && !disabled ? "600" : "400"}
+        color={itemColor(isSelected)}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        maxWidth="100%"
+        px="$2"
+      >
+        {getItemLabel(item)}
+      </Text>
+    );
+  };
+
   return (
     <WheelContainer
       height={containerHeight}
+      width={columnWidth}
+      minWidth={columnWidth}
       {...knobProps.containerRadius}
       data-testid="wheel"
       data-disabled={disabled ? true : undefined}
       aria-disabled={disabled || undefined}
       opacity={1}
     >
-      {/* Selection indicator */}
-      <SelectionIndicator top={paddingItems * itemHeight} height={itemHeight} />
-
-      {/* Subtle edge cue only — strong fades washed numerals below AA visually */}
-      <FadeOverlay
-        edge="top"
-        height={paddingItems * itemHeight}
-        {...(isWeb
-          ? {
-              style: {
-                background:
-                  "linear-gradient(to bottom, color-mix(in srgb, var(--background) 18%, transparent) 0%, transparent 100%)",
-              } as React.CSSProperties,
-            }
-          : {})}
-      />
-      <FadeOverlay
-        edge="bottom"
-        height={paddingItems * itemHeight}
-        {...(isWeb
-          ? {
-              style: {
-                background:
-                  "linear-gradient(to top, color-mix(in srgb, var(--background) 18%, transparent) 0%, transparent 100%)",
-              } as React.CSSProperties,
-            }
-          : {})}
+      {/* iOS 14+ selection fill — LC-71 selected=fill, never hairline borders */}
+      <SelectionIndicator
+        className={highlightSmoothClass}
+        backgroundColor="$color4"
+        top={paddingItems * itemHeight}
+        height={itemHeight}
+        style={highlightStyle}
+        data-testid="wheel-selection"
       />
 
       {/* Interactive container */}
@@ -722,12 +821,13 @@ export function Wheel<T = string | number>({
             width: "100%",
             height: containerHeight,
             position: "relative",
-            perspective: "1000px",
+            perspective: `${perspectivePx}px`,
             perspectiveOrigin: "center center",
             overflow: "hidden",
             userSelect: "none",
             touchAction: "none",
             cursor: disabled ? "not-allowed" : "grab",
+            ...wheelMaskStyle,
           }}
           onPointerDown={handlePointerDown as any}
           onPointerMove={handlePointerMove as any}
@@ -737,9 +837,7 @@ export function Wheel<T = string | number>({
           data-testid="wheel-wrapper"
         >
           {renderRows.map(({ virtualRow, dataIndex }) => {
-            const item = items[dataIndex];
-            const isSelected = dataIndex === selectedIndex;
-            const itemValue = getItemValue(item);
+            const isSelected = dataIndex === liveDataIndex;
             const transform = getItemTransform(
               virtualRow,
               scrollOffset,
@@ -749,14 +847,12 @@ export function Wheel<T = string | number>({
 
             if (Math.abs(transform.rotateX) > 85) return null;
 
-            const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
-
             return (
               <div
-                key={rowKey}
+                key={`${dataIndex}-${virtualRow}`}
                 data-testid="wheel-item"
                 data-index={dataIndex}
-                data-selected={isSelected}
+                data-selected={isSelected ? true : undefined}
                 aria-hidden={isSelected ? undefined : true}
                 style={{
                   position: "absolute",
@@ -774,18 +870,7 @@ export function Wheel<T = string | number>({
                   backfaceVisibility: "hidden",
                 }}
               >
-                {renderItem ? (
-                  renderItem(itemValue, dataIndex, isSelected)
-                ) : (
-                  <Text
-                    {...knobProps.body}
-                    fontSize={size}
-                    fontWeight={isSelected && !disabled ? "600" : "400"}
-                    color={itemColor(isSelected)}
-                  >
-                    {getItemLabel(item)}
-                  </Text>
-                )}
+                {renderItemNode(dataIndex, isSelected)}
               </div>
             );
           })}
@@ -805,9 +890,7 @@ export function Wheel<T = string | number>({
           onPointerCancel={handlePointerUp as any}
         >
           {renderRows.map(({ virtualRow, dataIndex }) => {
-            const item = items[dataIndex];
-            const isSelected = dataIndex === selectedIndex;
-            const itemValue = getItemValue(item);
+            const isSelected = dataIndex === liveDataIndex;
             const transform = getItemTransform(
               virtualRow,
               scrollOffset,
@@ -817,11 +900,9 @@ export function Wheel<T = string | number>({
 
             if (Math.abs(transform.rotateX) > 85) return null;
 
-            const rowKey = loopEnabled ? `${dataIndex}-${virtualRow}` : String(itemValue);
-
             return (
               <View
-                key={rowKey}
+                key={`${dataIndex}-${virtualRow}`}
                 position="absolute"
                 left={0}
                 right={0}
@@ -832,19 +913,9 @@ export function Wheel<T = string | number>({
                 pointerEvents="none"
                 y={transform.translateY}
                 scale={transform.scale}
+                rotateX={`${transform.rotateX}deg`}
               >
-                {renderItem ? (
-                  renderItem(itemValue, dataIndex, isSelected)
-                ) : (
-                  <Text
-                    {...knobProps.body}
-                    fontSize={size}
-                    fontWeight={isSelected && !disabled ? "600" : "400"}
-                    color={itemColor(isSelected)}
-                  >
-                    {getItemLabel(item)}
-                  </Text>
-                )}
+                {renderItemNode(dataIndex, isSelected)}
               </View>
             );
           })}

package/src/actions/DestructiveAction.tsx

@@ -7,7 +7,7 @@
 
 import { Button, formatActionLabel, type ButtonProps } from "@multiplatform.one/forms";
 import { useCallback, useState, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { Paragraph, YStack } from "tamagui";
 import { ConfirmDialog } from "../feedback/ConfirmDialog";
 import { withInterp } from "../shared/t";

package/src/charts/BarChart.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import type { YStackProps } from "tamagui";
 import { XAxis, YAxis } from "./Axis";
 import { ChartSurface } from "./ChartSurface";
@@ -42,6 +42,12 @@ export interface BarChartProps
   title?: string;
   /** Override the generated accessible summary. */
   label?: string;
+  /**
+   * Pin the value axis to this `[min, max]` instead of deriving it from the
+   * dataset. Explicit domains are not niced (a 0–255 stat scale stays 0–255,
+   * not 0–260) so charts that share a measure stay comparable.
+   */
+  domain?: [number, number];
 }
 
 /**
@@ -62,6 +68,7 @@ export function BarChart({
   valueFormatter,
   title,
   label,
+  domain: domainProp,
   onDatumPress,
   onDatumHoverIn,
   onDatumHoverOut,
@@ -78,10 +85,13 @@ export function BarChart({
   return (
     <ChartSurface label={ariaLabel} height={height} width={width} {...stackProps}>
       {(size) => {
-        const domain = valueDomain(data.map((datum) => datum.value));
+        const domain = domainProp ?? valueDomain(data.map((datum) => datum.value));
+        // Explicit domains stay literal (nice: false) so a shared 0–255
+        // scale does not drift to 0–260. Auto domains still nice for ticks.
+        const nice = domainProp ? false : undefined;
         // Ticks come from the domain alone, so the margin scale needs no
         // meaningful range yet — the plot rectangle depends on label widths.
-        const marginScale = createLinearScale({ domain, range: [0, 1] });
+        const marginScale = createLinearScale({ domain, range: [0, 1], nice });
         const tickValues = getLinearTicks(marginScale, yTicks);
         const plot = computeCartesianPlot(size, {
           showXAxis,
@@ -97,6 +107,7 @@ export function BarChart({
         const yScale = createLinearScale({
           domain,
           range: [plot.y + plot.height, plot.y],
+          nice,
         });
         return (
           <>

package/src/charts/LineChart.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import type { YStackProps } from "tamagui";
 import { XAxis, YAxis } from "./Axis";
 import { ChartSurface } from "./ChartSurface";

package/src/charts/PieChart.tsx

@@ -1,5 +1,5 @@
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { Text, XStack, YStack, type YStackProps } from "tamagui";
 import { componentColors } from "../componentColors";
 import { ChartSurface } from "./ChartSurface";

package/src/charts/Sparkline.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import type { YStackProps } from "tamagui";
 import { ChartSurface } from "./ChartSurface";
 import { describeChart } from "./accessibility";