@cosxai/ui 0.13.0 → 0.13.2

package/package.json

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

package/src/primitives/SignaturePad.tsx

@@ -156,14 +156,53 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
         return;
       }
       let cancelled = false;
-      void fonts.ready.then(() => {
-        if (cancelled) return;
-        setFontReady(true);
-      });
+      // Actively REQUEST the typed font. @font-face registration
+      // (fontsource CSS etc.) doesn't fetch the file until some
+      // rendered text uses it — and this component's only consumer
+      // of the font is the canvas, whose fillText silently falls
+      // back to the next family when the face isn't loaded yet.
+      // fonts.load() forces the fetch; fonts.ready is the safety
+      // net for browsers without it / faces not registered.
+      const kick =
+        typeof fonts.load === "function"
+          ? fonts.load(`32px ${typedFontFamily}`).catch(() => [])
+          : Promise.resolve([]);
+      void kick
+        .then(() => fonts.ready)
+        .then(() => {
+          if (cancelled) return;
+          setFontReady(true);
+        });
       return () => {
         cancelled = true;
       };
-    }, [fontReady]);
+      // typedFontFamily is config-stable per consumer; re-kicking on
+      // change is correct anyway.
+    }, [fontReady, typedFontFamily]);
+
+    // Mode switch — clear the canvas so a stale typed baseline
+    // doesn't hang around behind a drawn signature (or vice versa).
+    // MUST be declared BEFORE the typed-repaint + drawn-restore
+    // effects: effects run in declaration order, and v0.13.0 had
+    // this clear declared LAST — on switching to typed mode with a
+    // prefilled name the repaint painted first and this then wiped
+    // it (QA 2026-07-17: Type tab showed an empty pad until the
+    // signer edited the name). Skips the mount run so a parent-held
+    // captured value isn't nulled on first render.
+    const prevModeRef = useRef(mode);
+    useEffect(() => {
+      if (prevModeRef.current === mode) return;
+      prevModeRef.current = mode;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      dirtyRef.current = false;
+      onChange(null);
+      // Only fire when mode itself changes.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode]);
 
     // Repaint on typedName / mode / fontReady change. Drawn mode
     // doesn't repaint imperatively — strokes are appended as the user
@@ -233,20 +272,6 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mode]);
 
-    // Mode switch — clear the canvas so a stale typed baseline
-    // doesn't hang around behind a drawn signature (or vice versa).
-    useEffect(() => {
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      dirtyRef.current = false;
-      onChange(null);
-      // Only fire when mode itself changes.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mode]);
-
     const clear = useCallback(() => {
       const canvas = canvasRef.current;
       if (canvas) {