@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/Select/index.tsx

@@ -11,14 +11,22 @@ import {
   FloatingFocusManager,
 } from "@floating-ui/react";
 import type { AnyFormApi } from "../../types";
-import { menuRowFrame, useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  MIN_PRESS_TARGET,
+  ensureKeyboardModalityTracking,
+  keyboardFocusRingProps,
+  menuRowFrame,
+  sizeRecipeForToken,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Pressable as RNPressable } from "react-native";
 import { Paragraph, Text, View, YStack, isWeb, styled } from "tamagui";
 import { Chip, type ChipProps } from "../../Chip";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
-import { Input as InputParts } from "../../InputParts";
+import { Input as InputParts, FocusContext } from "../../InputParts";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { warnSelectTooFewOptions } from "../../shared/devWarn";
 import {
@@ -28,7 +36,7 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
-import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList";
+import { ScrollArrow } from "../../shared/floatingList";
 import {
   FloatingPanel,
   useFloatingPanel,
@@ -91,21 +99,35 @@ export interface SelectProps {
 // same frame DropdownMenu items and MentionInput suggestions use. Listbox
 // concerns stay local: `default` cursor, gap, and the form-input color ramp.
 
+// LC-71: Tamagui maps `focusVisibleStyle` onto mouse/:focus, so the ring is
+// painted from `wasKeyboardFocus()` (inset — overlay overflow clips it).
+// LC-72 CONTAINER-CLIP: rows stay square; the panel radius cuts the corners.
+const selectRowOutlineRest = {
+  outlineWidth: 0,
+  outlineStyle: "solid" as const,
+  outlineColor: "transparent",
+  borderRadius: 0,
+};
+
 const SelectRow = styled(View, {
   name: "SelectRow",
   ...menuRowFrame,
+  ...selectRowOutlineRest,
   gap: "$2",
   cursor: "default",
-  hoverStyle: { backgroundColor: formInputColors.background.focus },
-  focusStyle: { outlineStyle: "none" as any },
-  focusVisibleStyle: { outlineStyle: "none" as any },
+  hoverStyle: {
+    backgroundColor: formInputColors.background.focus,
+    borderRadius: 0,
+  },
+  // Do not put outlineWidth here — Tamagui maps these onto mouse :focus and
+  // they beat instance ring props. Rows paint the ring via selectItemRingProps.
   variants: {
     selected: {
-      true: { backgroundColor: formInputColors.background.base },
+      true: { backgroundColor: formInputColors.background.base, borderRadius: 0 },
       false: { backgroundColor: "transparent" },
     },
     active: {
-      true: { backgroundColor: formInputColors.background.focus },
+      true: { backgroundColor: formInputColors.background.focus, borderRadius: 0 },
       false: {},
     },
     size: {
@@ -194,6 +216,61 @@ function groupOptions(options: SelectOption[]): {
   return { items, flatOptions };
 }
 
+/** LC-71: trigger rings on keyboard-origin only; list rows inherit that modality. */
+function useSelectKeyboardRing() {
+  const [kbTrigger, setKbTrigger] = useState(false);
+  const [kbNav, setKbNav] = useState(false);
+  if (isWeb) ensureKeyboardModalityTracking();
+  const onTriggerFocus = useCallback(() => {
+    if (wasKeyboardFocus()) setKbTrigger(true);
+  }, []);
+  const onTriggerBlur = useCallback(() => setKbTrigger(false), []);
+  const onTriggerPointerDown = useCallback(() => {
+    setKbTrigger(false);
+    setKbNav(false);
+  }, []);
+  return {
+    kbTrigger,
+    kbNav,
+    setKbNav,
+    onTriggerFocus,
+    onTriggerBlur,
+    onTriggerPointerDown,
+  };
+}
+
+function selectTriggerRingProps(kbTrigger: boolean, open: boolean) {
+  if (kbTrigger && !open) {
+    return { ...keyboardFocusRingProps, "data-kb-ring": "true" as const };
+  }
+  return { ...selectRowOutlineRest, "data-kb-ring": undefined };
+}
+
+function selectItemRingProps(isActive: boolean, kbNav: boolean) {
+  if (isActive && kbNav) {
+    return {
+      ...keyboardFocusRingProps,
+      "data-kb-ring": "true" as const,
+      // Inline beats Tamagui :focus/:focus-visible classes that otherwise
+      // clamp outlineWidth back to 0 (same trap as LC-71 on Tabs).
+      style: {
+        outline: "2px solid var(--outlineColor, var(--c-outlineColor, CanvasText))",
+        outlineOffset: "-2px",
+      },
+    };
+  }
+  return { ...selectRowOutlineRest, "data-kb-ring": undefined };
+}
+
+/** Paints the Input.Box ring via FocusContext — keyboard-origin only (LC-71). */
+function SyncKeyboardFocusToBox({ active }: { active: boolean }) {
+  const { setFocused } = FocusContext.useStyledContext();
+  useEffect(() => {
+    setFocused(active);
+  }, [active, setFocused]);
+  return null;
+}
+
 interface SelectItemHandlers {
   getItemProps: any;
   handleSelect: (index: number, event?: MouseEvent) => void;
@@ -206,6 +283,8 @@ interface SelectItemHandlers {
   isTypingRef: { current: { isTyping: boolean } };
   listItemsRef: RefObject<Array<HTMLElement | null>>;
   multiple?: boolean;
+  kbNav: boolean;
+  setKbNav: (next: boolean) => void;
 }
 
 // ── Memoized option row ──────────────────────────────────────
@@ -250,6 +329,7 @@ const SelectItem = memo(function SelectItem({
           } else if (isDown(event.key) || isUp(event.key)) {
             event.preventDefault();
             event.stopPropagation();
+            ctx.setKbNav(true);
             if (optionCount === 0) return;
             const nextIndex = isDown(event.key)
               ? index + 1 >= optionCount
@@ -265,6 +345,12 @@ const SelectItem = memo(function SelectItem({
         onClick(event: MouseEvent) {
           if (ctx.allowSelectRef.current) ctx.handleSelect(index, event);
         },
+        onFocus() {
+          ctx.setKbNav(wasKeyboardFocus());
+        },
+        onPointerDown() {
+          ctx.setKbNav(false);
+        },
         onMouseUp() {
           if (!ctx.allowMouseUpRef.current) {
             ctx.allowMouseUpRef.current = true;
@@ -280,6 +366,7 @@ const SelectItem = memo(function SelectItem({
           });
         },
       })}
+      {...selectItemRingProps(Boolean(isActive), ctx.kbNav)}
       role="option"
       tabIndex={-1}
       selected={isSelected}
@@ -365,6 +452,8 @@ function FloatingSelectCore({
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
   const [controlledScrolling, setControlledScrolling] = useState(false);
+  const { kbTrigger, kbNav, setKbNav, onTriggerFocus, onTriggerBlur, onTriggerPointerDown } =
+    useSelectKeyboardRing();
 
   const labelCacheRef = useRef<Map<string, string>>(new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
@@ -507,13 +596,19 @@ function FloatingSelectCore({
     const scrollContentHeight = dropdownElement.scrollHeight;
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
 
+    // Cover-alignment (OVERLAY_ANCHOR_GAP rule): the panel's border-box top
+    // coincides with the trigger's border-box top EXACTLY, so frame, corner
+    // arc and row text all line up (panel border draws over trigger border;
+    // row content = panel.top + border + offsetTop lands on the trigger's
+    // content edge). Subtracting the border here shifted the whole panel 1px
+    // up and made the corner arcs visibly diverge from the trigger's.
     let idealTop: number;
     if (selectedIndex >= 0) {
-      idealTop = triggerBounds.top - borderTopWidth - selectedItem.offsetTop;
+      idealTop = triggerBounds.top - selectedItem.offsetTop;
     } else if (panel.placement.startsWith("top")) {
       idealTop = triggerBounds.bottom - totalContentHeight;
     } else {
-      idealTop = triggerBounds.top - borderTopWidth - (selectedItem.offsetTop ?? 0);
+      idealTop = triggerBounds.top - (selectedItem.offsetTop ?? 0);
     }
     const idealBottom = idealTop + totalContentHeight;
     const pinnedTop = Math.max(panelViewportPadding, idealTop);
@@ -580,7 +675,9 @@ function FloatingSelectCore({
     if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
       const maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
       if (selectedIndex >= 0) {
-        const neededScroll = top + borderTopWidth + selectedItem.offsetTop - triggerBounds.top;
+        // Row-over-trigger: row y (top + border + offsetTop − scroll) must
+        // land on the trigger's content edge (trigger.top + border).
+        const neededScroll = top + selectedItem.offsetTop - triggerBounds.top;
         const clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
         if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
           programmaticScrollRef.current++;
@@ -758,6 +855,8 @@ function FloatingSelectCore({
     isTypingRef: stateRef,
     listItemsRef,
     multiple,
+    kbNav,
+    setKbNav,
   };
 
   const referenceProps = getReferenceProps({
@@ -773,6 +872,7 @@ function FloatingSelectCore({
         event.key === "k"
       ) {
         event.preventDefault();
+        setKbNav(true);
         setOpen(true);
         setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
       }
@@ -795,9 +895,10 @@ function FloatingSelectCore({
   boxEventProps["aria-autocomplete"] = "none";
   if (id) boxEventProps.id = id;
   if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;
-  else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;
-  // Standalone triggers (no label prop) still need a name (axe button-name)
-  else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  // A labelled trigger is already named: the sibling Label wires
+  // `aria-labelledby` onto this id itself, so naming it again here doubles the
+  // spoken name. Standalone triggers (no label) still need one (axe button-name).
+  else if (!(hasLabel && id) && placeholder) boxEventProps["aria-label"] = placeholder;
   if (describedBy) boxEventProps["aria-describedby"] = describedBy;
 
   const handleScroll = useCallback(
@@ -835,15 +936,35 @@ function FloatingSelectCore({
     <>
       <InputParts.Box
         {...boxEventProps}
+        {...selectTriggerRingProps(kbTrigger, open)}
+        onFocus={(e: any) => {
+          boxEventProps.onFocus?.(e);
+          onTriggerFocus();
+        }}
+        // XGroup types omit capture-phase handlers; forwarded to the DOM node at
+        // runtime (same pattern as AdaptivePopup/FloatingPanel onClickCapture).
+        {...({ onFocusCapture: onTriggerFocus } as Record<string, unknown>)}
+        onBlur={(e: any) => {
+          boxEventProps.onBlur?.(e);
+          onTriggerBlur();
+        }}
+        onPointerDown={(e: any) => {
+          boxEventProps.onPointerDown?.(e);
+          onTriggerPointerDown();
+        }}
         data-testid="select-trigger"
         cursor="pointer"
         disabled={disabled}
+        // One surface owner (OVERLAY_ANCHOR_GAP rule): the open listbox
+        // covers this trigger exactly, so the trigger's outer focus ring
+        // must not paint — it would ghost around the panel's corners.
+        suppressFocusRing={open}
         size={knobProps.sizeToken}
         // LC-54 PRESS-FLOOR: the size knob may shrink chrome (compact → $3
         // = 36px) but the trigger's press target never drops below 44 —
         // same minHeight floor the house Button holds. Without it a compact
         // Select sat 36px beside 44px Inputs/Buttons in one control row.
-        minHeight={44}
+        minHeight={MIN_PRESS_TARGET}
         {...(inTableCell
           ? // Chromeless in cells (the floor above still applies).
             {}
@@ -852,7 +973,7 @@ function FloatingSelectCore({
               borderWidth: knobProps.borderRadius.borderWidth,
             })}
       >
-        <SyncFocusToOpen open={open} />
+        <SyncKeyboardFocusToBox active={kbTrigger && !open} />
         <View
           flex={1}
           // LC-18 (UX-021): trigger inset rides the space knob so trigger text
@@ -937,10 +1058,12 @@ function FloatingSelectCore({
                   if (isDown) {
                     e.preventDefault();
                     e.stopPropagation();
+                    setKbNav(true);
                     setActiveIndex((prev) => (prev == null ? 0 : prev + 1 >= count ? 0 : prev + 1));
                   } else if (isUp) {
                     e.preventDefault();
                     e.stopPropagation();
+                    setKbNav(true);
                     setActiveIndex((prev) =>
                       prev == null ? count - 1 : prev - 1 < 0 ? count - 1 : prev - 1,
                     );
@@ -1053,6 +1176,8 @@ function NativeSelectCore({
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState<number | null>(0);
   const listRef = useRef<HTMLElement | null>(null);
+  const { kbTrigger, kbNav, setKbNav, onTriggerFocus, onTriggerBlur, onTriggerPointerDown } =
+    useSelectKeyboardRing();
 
   const labelCacheRef = useRef<Map<string, string>>(new Map());
   for (const o of options) labelCacheRef.current.set(o.value, o.label);
@@ -1122,12 +1247,14 @@ function NativeSelectCore({
       const isUp = e.key === "ArrowUp" || e.key === "k";
       if (isDown) {
         e.preventDefault();
+        setKbNav(true);
         setActiveIndex((prev) => {
           const next = prev == null ? 0 : prev + 1;
           return next >= count ? 0 : next;
         });
       } else if (isUp) {
         e.preventDefault();
+        setKbNav(true);
         setActiveIndex((prev) => {
           const next = prev == null ? count - 1 : prev - 1;
           return next < 0 ? count - 1 : next;
@@ -1141,7 +1268,7 @@ function NativeSelectCore({
         }
       }
     },
-    [options, activeIndex, handleSelect],
+    [options, activeIndex, handleSelect, setKbNav],
   );
 
   const listContent = (
@@ -1153,7 +1280,13 @@ function NativeSelectCore({
     // VoiceOver blob.
     <View
       ref={listRef as any}
-      {...(isWeb ? { tabIndex: 0, onKeyDown: handleListKeyDown } : undefined)}
+      {...(isWeb
+        ? {
+            tabIndex: 0,
+            onKeyDown: handleListKeyDown,
+            onFocus: () => setKbNav(wasKeyboardFocus()),
+          }
+        : undefined)}
       outlineStyle="none"
     >
       {groupLabel && (
@@ -1177,6 +1310,7 @@ function NativeSelectCore({
             key={isWeb ? option.value : undefined}
             flexDirection="row"
             alignItems="center"
+            borderRadius={0}
             // LC-18 (UX-021): sheet rows ride the space knob like the floating
             // menu rows — panelPadding inset + gap fragment.
             {...knobProps.gap}
@@ -1184,6 +1318,8 @@ function NativeSelectCore({
             height={knobProps.sizeToken}
             onPress={isWeb ? () => handleSelect(option.value) : undefined}
             onMouseEnter={() => setActiveIndex(i)}
+            onPointerDown={isWeb ? () => setKbNav(false) : undefined}
+            {...(isWeb ? selectItemRingProps(active, kbNav) : undefined)}
             hoverStyle={
               activeIndex != null
                 ? {
@@ -1264,13 +1400,14 @@ function NativeSelectCore({
           size={knobProps.sizeToken}
           // LC-54 PRESS-FLOOR: ≥44px trigger target at every size (matches
           // the web trigger branch above).
-          minHeight={44}
+          minHeight={MIN_PRESS_TARGET}
           {...(inTableCell
             ? {}
             : {
                 borderRadius: knobProps.borderRadius.borderRadius,
                 borderWidth: knobProps.borderRadius.borderWidth,
               })}
+          {...(isWeb ? selectTriggerRingProps(kbTrigger, open) : undefined)}
           data-testid="select-trigger"
           id={id}
           // Web: the box is the combobox control (ARIA + keyboard). Native:
@@ -1285,9 +1422,10 @@ function NativeSelectCore({
                 "aria-expanded": open,
                 "aria-autocomplete": "none",
                 // Standalone (no label): fall back to placeholder so the
-                // trigger still has a name (axe button-name)
+                // trigger still has a name (axe button-name). Labelled: the
+                // sibling Label wires `aria-labelledby` onto this id itself —
+                // naming it here too doubles the spoken name.
                 "aria-label": ariaLabel ?? (!hasLabel ? placeholder : undefined),
-                "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : undefined,
                 "aria-describedby": describedBy,
                 tabIndex: disabled ? -1 : 0,
               }
@@ -1297,16 +1435,21 @@ function NativeSelectCore({
           // setOpen(prev => !prev) here double-toggles and the sheet never
           // appears (batched true then !prev → false).
           onPress={isWeb && !disabled ? () => setOpen((prev) => !prev) : undefined}
+          onFocus={isWeb ? onTriggerFocus : undefined}
+          onBlur={isWeb ? onTriggerBlur : undefined}
+          onPointerDown={isWeb ? onTriggerPointerDown : undefined}
           onKeyDown={(e: KeyboardEvent) => {
             if (
               ["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) ||
               e.code === "Space"
             ) {
               e.preventDefault();
+              setKbNav(true);
               if (!open) setOpen(true);
             }
           }}
         >
+          <SyncKeyboardFocusToBox active={kbTrigger && !open} />
           <View
             flex={1}
             // LC-18 (UX-021): trigger inset rides the space knob (matches the
@@ -1428,7 +1571,14 @@ export function Select({
   if (skeleton) {
     return (
       <InputParts size={sizeProp || knobProps.sizeToken}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
+        {label && (
+          <Skeleton
+            variant="text"
+            width="30%"
+            // Label bone tracks the recipe type channel (LC-20 mirrors anatomy).
+            height={sizeRecipeForToken(String(sizeProp || knobProps.sizeToken)).fontSize}
+          />
+        )}
         <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
       </InputParts>
     );

package/src/fields/Signature/Signature.spec.tsx

@@ -1,11 +1,32 @@
+import { fireEvent } from "@testing-library/react";
 import { beforeAll, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
-import { Signature } from "./index";
+import { Signature, signatureValueToSvg } from "./index";
 
 const clearIcon = <span data-testid="clear-icon" />;
 
-// Canvas is not available in jsdom; mock getContext
+function encodeSignature(strokes: number[][][]): string {
+  const json = JSON.stringify({ v: 2, s: strokes });
+  return `data:application/json;base64,${btoa(json)}`;
+}
+
+const inkedValue = encodeSignature([
+  [
+    [0.1, 0.2, 0.5],
+    [0.4, 0.3, 0.5],
+    [0.7, 0.25, 0.5],
+  ],
+]);
+
+function getPad(container: HTMLElement): HTMLElement {
+  const label = container.querySelector("label[for]") as HTMLLabelElement | null;
+  const id = label?.htmlFor;
+  const pad = id ? (container.querySelector(`#${CSS.escape(id)}`) as HTMLElement | null) : null;
+  if (!pad) throw new Error("signature pad not found");
+  return pad;
+}
+
 beforeAll(() => {
   HTMLCanvasElement.prototype.getContext = vi.fn(() => ({
     clearRect: vi.fn(),
@@ -46,7 +67,7 @@ describe("Signature", () => {
       const result = renderWithProviders(
         <Signature label="Loading" name="l" clearIcon={clearIcon} skeleton />,
       );
-      expect(result.container.querySelector("canvas")).toBeNull();
+      expect(result.container.querySelector("svg")).toBeNull();
     });
 
     it("renders disabled state", () => {
@@ -54,6 +75,7 @@ describe("Signature", () => {
         <Signature label="Disabled" name="d" clearIcon={clearIcon} disabled />,
       );
       expect(result.findTextElement("Disabled")).toBeDefined();
+      expect(getPad(result.container).getAttribute("tabindex")).toBe("-1");
     });
   });
 
@@ -67,4 +89,101 @@ describe("Signature", () => {
       expect(result.findTextElement("Signature")).toBeDefined();
     });
   });
+
+  describe("pad anatomy", () => {
+    it("associates the label with the pad (htmlFor resolves)", () => {
+      const result = renderWithProviders(
+        <Signature label="Your Signature" name="sig" clearIcon={clearIcon} />,
+      );
+      const pad = getPad(result.container);
+      expect(pad.getAttribute("tabindex")).toBe("0");
+      expect(result.container.textContent).toContain("X");
+    });
+
+    it("keeps an aria-label fallback when no label is given", () => {
+      const result = renderWithProviders(<Signature name="sig" clearIcon={clearIcon} />);
+      const pad = result.container.querySelector('[aria-label^="Signature"]') as HTMLElement | null;
+      expect(pad).toBeTruthy();
+      expect(pad?.getAttribute("tabindex")).toBe("0");
+    });
+  });
+
+  describe("LC-71 RING-ANATOMY", () => {
+    it("is a keyboard tab stop whose pointer focus paints no ring", () => {
+      const result = renderWithProviders(
+        <Signature label="Signature" name="sig" clearIcon={clearIcon} />,
+      );
+      const pad = getPad(result.container);
+      expect(pad.getAttribute("tabindex")).toBe("0");
+
+      fireEvent.pointerDown(document);
+      fireEvent.focus(pad);
+      expect(pad.getAttribute("data-keyboard-ring")).toBeNull();
+
+      const svg = result.container.querySelector("svg") as SVGSVGElement | null;
+      expect(svg).toBeTruthy();
+      expect(svg?.style.outline).toContain("none");
+    });
+  });
+
+  describe("clear", () => {
+    it("clears from the pad via Delete when keyboard-focused", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Signature
+          label="Signature"
+          name="sig"
+          value={inkedValue}
+          onChange={onChange}
+          clearIcon={clearIcon}
+        />,
+      );
+      const pad = getPad(result.container);
+      expect(pad.getAttribute("data-signed")).toBe("true");
+
+      fireEvent.keyDown(document, { key: "Tab" });
+      fireEvent.focus(pad);
+      fireEvent.keyDown(pad, { key: "Delete" });
+      expect(onChange).toHaveBeenCalledWith("");
+    });
+
+    it("does not recommit an in-progress stroke after Clear (SB-M-808)", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Signature
+          label="Signature"
+          name="sig"
+          value={inkedValue}
+          onChange={onChange}
+          clearIcon={clearIcon}
+        />,
+      );
+      const svg = result.container.querySelector("svg") as SVGSVGElement | null;
+      expect(svg).toBeTruthy();
+      const clear = result.findTextElement("Clear");
+      expect(clear).toBeDefined();
+
+      fireEvent.pointerDown(svg!, { pointerId: 1, clientX: 20, clientY: 20, isPrimary: true });
+      fireEvent.pointerMove(svg!, { pointerId: 1, clientX: 40, clientY: 30, isPrimary: true });
+      fireEvent.click(clear as Element);
+      fireEvent.pointerUp(svg!, { pointerId: 1, clientX: 40, clientY: 30, isPrimary: true });
+      fireEvent.lostPointerCapture(svg!, { pointerId: 1 });
+
+      expect(onChange).toHaveBeenCalledWith("");
+      expect(onChange.mock.calls.at(-1)?.[0]).toBe("");
+    });
+  });
+});
+
+describe("signatureValueToSvg", () => {
+  it("returns empty for an empty value", () => {
+    expect(signatureValueToSvg("")).toBe("");
+  });
+
+  it("emits filled paths for v2 strokes", () => {
+    const svg = signatureValueToSvg(inkedValue, 200, 80, "#111");
+    expect(svg).toContain("<svg");
+    expect(svg).toContain("<path");
+    expect(svg).toContain('fill="#111"');
+  });
 });