@newtonedev/components 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {

package/src/fonts/measureFont.ts

@@ -5,10 +5,19 @@
 const REF_STRING =
   'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ';
 
+/** Race a promise against a timeout. Resolves with fallback if the promise doesn't settle in time. */
+function withTimeout<T>(promise: Promise<T>, ms: number, fallback: T): Promise<T> {
+  return Promise.race([
+    promise,
+    new Promise<T>((resolve) => setTimeout(() => resolve(fallback), ms)),
+  ]);
+}
+
 /**
  * Measure the average character width ratio for a font using the Canvas API.
  *
- * Waits for the font to load via `document.fonts.load()` before measuring.
+ * Waits for the font to load via `document.fonts.load()` before measuring,
+ * with a 3-second timeout to prevent hangs when fonts fail to load silently.
  * Falls back to 0.55 if the browser context is unavailable, the font fails
  * to load, or canvas is not supported.
  *
@@ -29,7 +38,11 @@ export async function measureAvgCharWidth(
 ): Promise<number> {
   if (typeof document === 'undefined') return 0.55;
   try {
-    await document.fonts.load(`${fontWeight} ${fontSize}px "${fontFamily}"`);
+    await withTimeout(
+      document.fonts.load(`${fontWeight} ${fontSize}px "${fontFamily}"`),
+      3000,
+      [] as FontFace[],
+    );
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     if (!ctx) return 0.55;