@cosxai/ui 0.13.2 → 0.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.13.2",
+  "version": "0.13.4",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/SignaturePad.tsx

@@ -251,13 +251,21 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
       strokeColor,
     ]);
 
-    // Restore a previously-captured value into the canvas on remount.
-    // Typed mode uses the effect above; drawn mode needs to explicitly
-    // paint the dataURL back onto the canvas so subsequent strokes
-    // continue on top of it (rather than starting from blank).
+    // Restore a previously-captured value into the canvas on MOUNT
+    // only (parent phase round-trips remount the pad). Typed mode
+    // uses the repaint effect above; drawn mode needs to explicitly
+    // paint the dataURL back so subsequent strokes continue on top.
+    //
+    // Deliberately NOT re-run on mode switch: the clear effect wipes
+    // the canvas on switch, and re-painting the old capture here
+    // resurrected the TYPED baseline inside the drawn pad (v0.13.2
+    // regression — switching Type → Draw showed the handwriting-font
+    // bake as if it had been drawn).
+    const didRestoreRef = useRef(false);
     useEffect(() => {
-      if (mode !== "drawn") return;
-      if (!value) return;
+      if (didRestoreRef.current) return;
+      didRestoreRef.current = true;
+      if (mode !== "drawn" || !value) return;
       const canvas = canvasRef.current;
       if (!canvas) return;
       const ctx = canvas.getContext("2d");
@@ -270,7 +278,7 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
       };
       img.src = value;
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mode]);
+    }, []);
 
     const clear = useCallback(() => {
       const canvas = canvasRef.current;
@@ -379,6 +387,11 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
     const canvasStyle: CSSProperties = useMemo(
       () => ({
         width,
+        // Never overflow a narrow container (phone signing surface) —
+        // the bitmap keeps its logical resolution and the pointer
+        // handlers already rescale via getBoundingClientRect, so CSS
+        // shrink is loss-free for drawing accuracy.
+        maxWidth: "100%",
         height,
         border: "1px solid var(--ck-border-subtle, #d4d4d8)",
         borderRadius: "var(--ck-radius-sm, 6px)",
@@ -401,6 +414,8 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
         fontSize: 14,
         fontFamily: "inherit",
         width,
+        maxWidth: "100%",
+        boxSizing: "border-box",
       }),
       [width],
     );