@newtonedev/components 0.1.9 → 0.1.11

package/package.json

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

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx

@@ -38,6 +38,7 @@ export function ColorScaleSlider({
   const trackPageX = React.useRef(0);
   const isDragging = React.useRef(false);
   const thumbAnim = React.useRef(new Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React.useState(0);
 
   // Mutable refs to avoid stale closures in PanResponder
   const onValueChangeRef = React.useRef(onValueChange);
@@ -104,7 +105,7 @@ export function ColorScaleSlider({
     ? Math.min(maxNV, Math.max(minNV, value))
     : (maxNV + minNV) / 2;
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;
 
   // Sync animated thumb position: animate on prop-driven changes, instant during drag
@@ -131,10 +132,9 @@ export function ColorScaleSlider({
         ref={trackRef}
         style={styles.trackContainer}
         onLayout={(e) => {
-          trackWidth.current = e.nativeEvent.layout.width;
-          // Set thumb position immediately on layout (no animation)
-          const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE);
-          thumbAnim.setValue(ratio * newUsableWidth);
+          const w = e.nativeEvent.layout.width;
+          trackWidth.current = w;
+          setLayoutWidth(w);
           trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
             if (pageX != null) trackPageX.current = pageX;
           });

package/src/composites/range-inputs/HueSlider/HueSlider.tsx

@@ -44,6 +44,7 @@ export function HueSlider({
   const trackRef = React.useRef<View>(null);
   const trackWidth = React.useRef(0);
   const trackPageX = React.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React.useState(0);
 
   // Mutable refs to avoid stale closures in PanResponder
   const onValueChangeRef = React.useRef(onValueChange);
@@ -80,7 +81,7 @@ export function HueSlider({
   // For wrapping ranges (max > 359), convert stored value to slider range
   const sliderValue = max > 359 && value < min ? value + 360 : value;
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;
 
   const handleValueTextSubmit = React.useCallback(
@@ -123,7 +124,9 @@ export function HueSlider({
         ref={trackRef}
         style={styles.trackContainer}
         onLayout={(e) => {
-          trackWidth.current = e.nativeEvent.layout.width;
+          const w = e.nativeEvent.layout.width;
+          trackWidth.current = w;
+          setLayoutWidth(w);
           trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
             if (pageX != null) trackPageX.current = pageX;
           });

package/src/composites/range-inputs/Slider/Slider.tsx

@@ -26,6 +26,7 @@ export function Slider({
   const trackRef = React.useRef<View>(null);
   const trackWidth = React.useRef(0);
   const trackPageX = React.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React.useState(0);
 
   // Mutable refs to avoid stale closures in PanResponder
   const onValueChangeRef = React.useRef(onValueChange);
@@ -62,7 +63,7 @@ export function Slider({
   ).current;
 
   const ratio = max > min ? (value - min) / (max - min) : 0;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;
   const fillWidth = thumbLeft + THUMB_SIZE / 2;
 
@@ -106,7 +107,9 @@ export function Slider({
         ref={trackRef}
         style={styles.trackContainer}
         onLayout={(e) => {
-          trackWidth.current = e.nativeEvent.layout.width;
+          const w = e.nativeEvent.layout.width;
+          trackWidth.current = w;
+          setLayoutWidth(w);
           trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
             if (pageX != null) trackPageX.current = pageX;
           });

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;