@multiplatform.one/forms 6.7.0 → 7.0.0

package/src/fields/Signature/index.tsx

@@ -1,13 +1,22 @@
 import type { KnobProps } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import type { PointerEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { isWeb, XStack, YStack, useTheme as useTamaguiTheme } from "tamagui";
+import { isWeb, Text, XStack, YStack, useTheme as useTamaguiTheme } from "tamagui";
 import { getStroke } from "perfect-freehand";
-import Svg, { Path } from "react-native-svg";
+// Named import (not default): under tamagui 2.7.6 the vitest/vite pipeline
+// resolves this module's CJS build with node-style interop, so a default
+// import binds the module object instead of the Svg component. The named
+// export is identical in both react-native-svg and tamagui's web shim.
+import { Path, Svg } from "react-native-svg";
 import { Button } from "../../Button";
-import { Field, FieldLayout } from "../../fieldLayout";
+import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -233,6 +242,8 @@ export function signatureValueToSvg(
 const signatureHeightRows = 3;
 
 interface SignatureCanvasProps {
+  id?: string;
+  hasLabel?: boolean;
   value: string;
   onValueChange: (v: string) => void;
   disabled: boolean;
@@ -240,8 +251,9 @@ interface SignatureCanvasProps {
   width: number;
   height: number;
   penColor: string;
-  backgroundColor: string;
+  backgroundColor?: string;
   knobProps: KnobProps;
+  disabledSurface?: Record<string, unknown>;
   size?: SizeTokens;
   error?: string | boolean;
   clearIcon: ReactNode;
@@ -249,7 +261,17 @@ interface SignatureCanvasProps {
   hasError?: boolean;
 }
 
+function isPrimaryDrawPointer(event: GestureResponderEvent | PointerEvent<SVGSVGElement>): boolean {
+  if (!isWeb) return true;
+  const webEvent = event as PointerEvent<SVGSVGElement>;
+  if (webEvent.isPrimary === false) return false;
+  if (webEvent.pointerType === "mouse" && webEvent.button !== 0) return false;
+  return true;
+}
+
 function SignatureCanvasImpl({
+  id,
+  hasLabel,
   value,
   onValueChange,
   disabled,
@@ -259,6 +281,7 @@ function SignatureCanvasImpl({
   penColor,
   backgroundColor,
   knobProps,
+  disabledSurface,
   size,
   error,
   clearIcon,
@@ -268,17 +291,31 @@ function SignatureCanvasImpl({
   const [strokes, setStrokes] = useState<Stroke[]>([]);
   const [currentStroke, setCurrentStroke] = useState<Stroke | null>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [kbFocus, setKbFocus] = useState(false);
   const svgRef = useRef<Svg>(null);
   const isDrawing = useRef(false);
+  const strokesRef = useRef<Stroke[]>([]);
+  const currentStrokeRef = useRef<Stroke | null>(null);
+  const describedBy = useFieldDescribedBy();
   const aspectRatio = width / height;
   const resolvedSizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
   const minHeightPx = getFieldHeight(resolvedSizeToken, signatureHeightRows);
   const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
+  const canDraw = !disabled && !readOnly;
+  const canFocus = !disabled;
+  const hasInk = strokes.length > 0 || !!currentStroke;
+
+  if (isWeb) ensureKeyboardModalityTracking();
+
+  const setCommittedStrokes = useCallback((next: Stroke[]) => {
+    strokesRef.current = next;
+    setStrokes(next);
+  }, []);
 
   // Restore strokes from v2 normalized format
   useEffect(() => {
     if (!value) {
-      setStrokes([]);
+      setCommittedStrokes([]);
       return;
     }
     if (value.startsWith("data:application/json;base64,")) {
@@ -287,15 +324,15 @@ function SignatureCanvasImpl({
         const json = decodeBase64(base64);
         const parsed = JSON.parse(json);
         if (parsed?.v === 2 && Array.isArray(parsed.s)) {
-          setStrokes(parsed.s);
-        } else {
-          setStrokes([]);
+          setCommittedStrokes(parsed.s);
+          return;
         }
       } catch {
-        setStrokes([]);
+        // ignore
       }
     }
-  }, [value]);
+    setCommittedStrokes([]);
+  }, [value, setCommittedStrokes]);
 
   const saveStrokes = useCallback(
     (newStrokes: Stroke[]) => {
@@ -303,7 +340,6 @@ function SignatureCanvasImpl({
         onValueChange("");
         return;
       }
-      // Strokes are already normalized (0-1)
       const payload = { v: 2, s: newStrokes };
       const json = JSON.stringify(payload);
       const base64 = encodeBase64(json);
@@ -336,62 +372,78 @@ function SignatureCanvasImpl({
 
   const handleStart = useCallback(
     (event: GestureResponderEvent | PointerEvent<SVGSVGElement>) => {
-      if (disabled || readOnly) return;
+      if (!canDraw || !isPrimaryDrawPointer(event)) return;
       isDrawing.current = true;
       const point = getPoint(event);
+      currentStrokeRef.current = [point];
       setCurrentStroke([point]);
 
-      // Capture pointer to continue receiving events when dragging outside canvas
       if (isWeb) {
         const target = (event as PointerEvent<SVGSVGElement>).currentTarget;
         const pointerId = (event as PointerEvent<SVGSVGElement>).pointerId;
-        target.setPointerCapture(pointerId);
+        target.setPointerCapture?.(pointerId);
       }
     },
-    [disabled, getPoint],
+    [canDraw, getPoint],
   );
 
   const handleMove = useCallback(
     (event: GestureResponderEvent | PointerEvent<SVGSVGElement>) => {
-      if (!isDrawing.current || disabled) return;
+      if (!isDrawing.current || !canDraw) return;
       const point = getPoint(event);
       setCurrentStroke((prev) => {
-        if (!prev) return [point];
-        // Only add point if it's far enough - spacing encodes speed for pressure (close=thick, far=thin)
-        const lastPoint = prev[prev.length - 1];
+        const base = prev ?? currentStrokeRef.current;
+        if (!base) {
+          currentStrokeRef.current = [point];
+          return [point];
+        }
+        const lastPoint = base[base.length - 1];
         if (pointDistance(point, lastPoint) < minPointDistance) {
-          return prev;
+          return prev ?? base;
         }
-        return [...prev, point];
+        const next = [...base, point];
+        currentStrokeRef.current = next;
+        return next;
       });
     },
-    [disabled, getPoint],
+    [canDraw, getPoint],
   );
 
   const handleEnd = useCallback(() => {
     if (!isDrawing.current) return;
     isDrawing.current = false;
-    if (
-      currentStroke &&
-      currentStroke.length > 0 &&
-      dimensions.width > 0 &&
-      dimensions.height > 0
-    ) {
-      const normalized = normalizeStroke(currentStroke, dimensions.width, dimensions.height);
-      const newStrokes = [...strokes, normalized];
-      setStrokes(newStrokes);
+    const stroke = currentStrokeRef.current;
+    currentStrokeRef.current = null;
+    setCurrentStroke(null);
+    if (stroke && stroke.length > 0 && dimensions.width > 0 && dimensions.height > 0) {
+      const normalized = normalizeStroke(stroke, dimensions.width, dimensions.height);
+      const newStrokes = [...strokesRef.current, normalized];
+      setCommittedStrokes(newStrokes);
       saveStrokes(newStrokes);
     }
-    setCurrentStroke(null);
-  }, [currentStroke, strokes, saveStrokes, dimensions]);
+  }, [dimensions, saveStrokes, setCommittedStrokes]);
 
   const handleClear = useCallback(() => {
-    setStrokes([]);
+    isDrawing.current = false;
+    currentStrokeRef.current = null;
     setCurrentStroke(null);
+    setCommittedStrokes([]);
     onValueChange("");
-  }, [onValueChange]);
+  }, [onValueChange, setCommittedStrokes]);
+
+  const handlePadKeyDown = useCallback(
+    (e: { target: unknown; currentTarget: unknown; key?: string; preventDefault?: () => void }) => {
+      if (e.target !== e.currentTarget) return;
+      if (!canDraw) return;
+      if (e.key === "Backspace" || e.key === "Delete" || e.key === "Escape") {
+        if (strokesRef.current.length === 0 && !currentStrokeRef.current) return;
+        e.preventDefault?.();
+        handleClear();
+      }
+    },
+    [canDraw, handleClear],
+  );
 
-  // Denormalize strokes to current canvas size and scale stroke thickness
   const strokeSize = getScaledStrokeSize(dimensions.width || width, dimensions.height || height);
   const canvasW = dimensions.width || width;
   const canvasH = dimensions.height || height;
@@ -404,7 +456,6 @@ function SignatureCanvasImpl({
     return getSvgPathFromStroke(outlinePoints);
   });
 
-  // Current stroke - in canvas space, use scaled size
   const currentPath = currentStroke
     ? (() => {
         const pointsWithPressure = pressureFromSpacing(currentStroke);
@@ -414,50 +465,108 @@ function SignatureCanvasImpl({
     : null;
 
   const paths = currentPath ? [...completedPaths, currentPath] : completedPaths;
+  const cursor = disabled ? "not-allowed" : readOnly ? "default" : "crosshair";
 
   const svgProps = isWeb
     ? {
         onPointerDown: handleStart as (e: PointerEvent<SVGSVGElement>) => void,
         onPointerMove: handleMove as (e: PointerEvent<SVGSVGElement>) => void,
         onPointerUp: handleEnd,
-        // No onPointerLeave - pointer capture lets us draw outside the canvas
-        onLostPointerCapture: handleEnd, // End stroke if pointer capture is lost
+        onLostPointerCapture: handleEnd,
         style: {
           touchAction: "none" as const,
-          cursor: disabled
-            ? ("not-allowed" as const)
-            : readOnly
-              ? ("default" as const)
-              : ("crosshair" as const),
-          backgroundColor,
+          userSelect: "none" as const,
+          outline: "none",
+          cursor,
+          backgroundColor: "transparent",
         },
       }
     : {
-        onStartShouldSetResponder: () => !disabled,
-        onMoveShouldSetResponder: () => !disabled,
+        onStartShouldSetResponder: () => canDraw,
+        onMoveShouldSetResponder: () => canDraw,
         onResponderGrant: handleStart as (e: GestureResponderEvent) => void,
         onResponderMove: handleMove as (e: GestureResponderEvent) => void,
         onResponderRelease: handleEnd,
         onResponderTerminate: handleEnd,
-        style: { backgroundColor },
+        style: { backgroundColor: "transparent" },
       };
 
+  const frameRing = kbFocus ? ensureFocusVisibleRing({ outlineOffset: -2 }) : undefined;
+
   return (
     <YStack
+      id={id}
       position="relative"
       onLayout={handleLayout}
       {...knobProps.inputSurface}
+      {...(backgroundColor ? { backgroundColor } : undefined)}
+      {...(disabled ? disabledSurface : undefined)}
       borderRadius={cappedRadius}
       borderWidth={knobProps.borderRadius.borderWidth}
       borderColor={error ? formCommonColors.error : formInputColors.border.base}
       overflow="hidden"
-      opacity={disabled ? 0.6 : 1}
       aspectRatio={aspectRatio}
       minHeight={minHeightPx}
+      userSelect="none"
+      cursor={cursor}
+      outlineWidth={0}
+      hoverStyle={
+        disabled
+          ? undefined
+          : { borderColor: error ? formCommonColors.error : formInputColors.border.hover }
+      }
+      focusStyle={{
+        outlineWidth: 0,
+        borderColor: error ? formCommonColors.error : formInputColors.border.focus,
+      }}
+      focusVisibleStyle={ensureFocusVisibleRing({
+        outlineOffset: -2,
+        borderColor: error ? formCommonColors.error : formInputColors.border.focus,
+      })}
+      {...frameRing}
       {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+      focusable={canFocus}
+      tabIndex={isWeb ? (canFocus ? 0 : -1) : undefined}
+      onFocus={() => {
+        if (isWeb && wasKeyboardFocus()) setKbFocus(true);
+      }}
+      onBlur={() => setKbFocus(false)}
+      onKeyDown={isWeb ? handlePadKeyDown : undefined}
       aria-required={required || undefined}
       aria-invalid={hasError || undefined}
+      aria-readonly={readOnly || undefined}
+      aria-disabled={disabled || undefined}
+      aria-describedby={describedBy}
+      aria-keyshortcuts={canDraw ? "Delete Backspace Escape" : undefined}
+      data-signature="pad"
+      data-signed={hasInk ? "true" : "false"}
+      data-keyboard-ring={kbFocus ? "true" : undefined}
+      {...(!hasLabel
+        ? { "aria-label": hasInk ? t("Signature, signed") : t("Signature, empty") }
+        : null)}
     >
+      {/* Legal-pad baseline (DocuSign / Adobe Sign): X + rule behind ink. */}
+      <XStack
+        position="absolute"
+        bottom="22%"
+        left="$3"
+        right="$3"
+        alignItems="center"
+        gap="$2"
+        pointerEvents="none"
+        opacity={0.55}
+      >
+        <Text
+          color={formCommonColors.muted}
+          fontStyle="italic"
+          fontWeight="700"
+          fontSize={18}
+          lineHeight={20}
+        >
+          {t("X")}
+        </Text>
+        <YStack flex={1} height={1} backgroundColor={formCommonColors.divider} />
+      </XStack>
       <Svg
         ref={svgRef}
         width="100%"
@@ -521,7 +630,7 @@ export interface SignatureProps {
   clearIcon?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the signature pad */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
+  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
 }
 
@@ -550,7 +659,11 @@ export function Signature({
   skeleton,
   compact,
 }: SignatureProps) {
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, disabledState, id } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact,
+  });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const tamaguiTheme = useTamaguiTheme();
 
@@ -565,17 +678,20 @@ export function Signature({
     );
   }
 
-  const penColor = penColorProp ?? (tamaguiTheme.color12?.val as string) ?? "#000000";
-  const backgroundColor = backgroundColorProp ?? (tamaguiTheme.color2?.val as string) ?? "#ffffff";
+  const penColor =
+    penColorProp ?? (tamaguiTheme.color12?.val as string | undefined) ?? "currentColor";
 
   const canvasProps = {
+    id,
+    hasLabel: !!label,
     disabled: !!disabled,
     readOnly: !!readOnly,
     width,
     height,
     penColor,
-    backgroundColor,
+    backgroundColor: backgroundColorProp,
     knobProps,
+    disabledSurface: disabledState.surfaceKnobProps as Record<string, unknown> | undefined,
     size,
     clearIcon,
   };

package/src/fields/Slider/Slider.spec.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, renderHook, waitFor } from "@testing-library/react";
-import { getSize } from "@tamagui/get-token";
-import { YStack, getTokens, getVariableValue } from "tamagui";
+import { YStack } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import * as Theme from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Slider } from "./index";
@@ -304,6 +304,59 @@ describe("Slider", () => {
     });
   });
 
+  describe("value output", () => {
+    it("renders the current value beside the track", () => {
+      const result = renderWithProviders(<Slider label="Volume" value={[64]} />);
+      expect(result.container.textContent).toContain("64");
+    });
+
+    it("renders a range as min–max", () => {
+      const result = renderWithProviders(
+        <Slider label="Price" value={[25, 75]} min={0} max={100} />,
+      );
+      expect(result.container.textContent).toContain("25–75");
+    });
+  });
+
+  describe("LC-71 keyboard ring", () => {
+    const getThumb = (container: ParentNode) =>
+      container.querySelector('[role="slider"]') as HTMLElement | null;
+
+    it("paints the ring on keyboard focus and drops it on pointer-drag", async () => {
+      const spy = vi.spyOn(Theme, "wasKeyboardFocus").mockReturnValue(true);
+      try {
+        const result = renderWithProviders(<Slider label="Ring" defaultValue={[40]} />);
+        const thumb = getThumb(result.container);
+        expect(thumb).toBeTruthy();
+        expect(thumb?.getAttribute("data-kb-focus")).toBeNull();
+
+        await act(async () => {
+          fireEvent.focus(thumb!);
+        });
+        expect(thumb?.getAttribute("data-kb-focus")).toBe("true");
+
+        await act(async () => {
+          fireEvent.pointerDown(thumb!);
+        });
+        expect(thumb?.getAttribute("data-kb-focus")).toBeNull();
+      } finally {
+        spy.mockRestore();
+      }
+    });
+
+    it("does not paint the ring on pointer-origin focus", async () => {
+      const result = renderWithProviders(<Slider label="Click" defaultValue={[40]} />);
+      const thumb = getThumb(result.container);
+      expect(thumb).toBeTruthy();
+      await act(async () => {
+        fireEvent.pointerDown(document);
+        fireEvent.pointerDown(thumb!);
+        fireEvent.focus(thumb!);
+      });
+      expect(thumb?.getAttribute("data-kb-focus")).toBeNull();
+    });
+  });
+
   describe("edge cases", () => {
     it("should render with boundary value", () => {
       const result = renderWithProviders(<Slider label="Boundary" name="boundary" value={[0]} />);
@@ -401,25 +454,14 @@ describe("Slider", () => {
         expect(getThumbBaseX(100, 20)).toBe(-15);
       });
 
-      it("resolves the RENDERED thumb size: circular renders the UNSHIFTED token", () => {
-        // The ThemeableStack `circular` variant renders width =
-        // tokens.size[props.size] (unshifted) and is applied after the thumb's
-        // own size variant (getSize shift -1), so it wins. Tamagui's internal
-        // x-offset uses the MEASURED (rendered) size — the replica must too.
-        const tokens = getTokens();
-        const token = tokens.size["$1.5" as keyof typeof tokens.size] as any;
-        const unshifted = getVariableValue(token) as number;
-        const shifted = getVariableValue(getSize(token, { shift: -1 })) as number;
-        expect(getSliderThumbRenderSize("$1.5", true)).toBe(unshifted);
-        expect(getSliderThumbRenderSize("$1.5", false)).toBe(shifted);
-        // With the repo config this is 24 vs 20 — the 4px conflation behind the
-        // sweep's 1-4pt settle pop and the +2.5pt non-target thumb shift:
-        // Δ(p) = 4·(1/4 + p/200) = 2.5pt at p = 75%.
-        expect(unshifted).toBe(24);
-        expect(shifted).toBe(20);
-        const wrongBase = getThumbBaseX(75, shifted);
-        const trueBase = getThumbBaseX(75, unshifted);
-        expect(wrongBase - trueBase).toBeCloseTo(2.5);
+      it("resolves the RENDERED thumb size from the size recipe height", () => {
+        // LC-65: thumb diameter is recipe.height ($1.5 → 24, $4 → 32), not
+        // getSize(token, { shift: -1 }) and not the unshifted size ramp.
+        // Circular vs square does not change diameter (radius is the knob).
+        expect(getSliderThumbRenderSize("$1.5", true)).toBe(24);
+        expect(getSliderThumbRenderSize("$1.5", false)).toBe(24);
+        expect(getSliderThumbRenderSize("$4", true)).toBe(32);
+        expect(getSliderThumbRenderSize("$true", false)).toBe(32);
       });
 
       it("adjusts values with tamagui's snap/sort/min-steps semantics (a11y actions)", () => {