@newtonedev/components 0.1.9 → 0.1.11

package/dist/composites/range-inputs/HueSlider/HueSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/composites/range-inputs/HueSlider/HueSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQxD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAS,EACT,KAAK,EACL,SAAiB,EACjB,aAAqB,EACrB,QAAgB,EAChB,KAAK,GACN,EAAE,cAAc,qBA+GhB"}
+{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/composites/range-inputs/HueSlider/HueSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQxD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAS,EACT,KAAK,EACL,SAAiB,EACjB,aAAqB,EACrB,QAAgB,EAChB,KAAK,GACN,EAAE,cAAc,qBAkHhB"}

package/dist/composites/range-inputs/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/composites/range-inputs/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAK,EACL,SAAiB,EACjB,aAAqB,EACrB,QAAgB,EAChB,KAAK,GACN,EAAE,WAAW,qBAwGb"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/composites/range-inputs/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAIlD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAK,EACL,SAAiB,EACjB,aAAqB,EACrB,QAAgB,EAChB,KAAK,GACN,EAAE,WAAW,qBA2Gb"}

package/dist/fonts/measureFont.d.ts

@@ -1,7 +1,8 @@
 /**
  * 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.
  *

package/dist/fonts/measureFont.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"measureFont.d.ts","sourceRoot":"","sources":["../../src/fonts/measureFont.ts"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;GAeG;AACH,wBAAsB,mBAAmB,CACvC,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,SAAK,GACZ,OAAO,CAAC,MAAM,CAAC,CAajB"}
+{"version":3,"file":"measureFont.d.ts","sourceRoot":"","sources":["../../src/fonts/measureFont.ts"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAsB,mBAAmB,CACvC,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,SAAK,GACZ,OAAO,CAAC,MAAM,CAAC,CAiBjB"}

package/dist/index.cjs

@@ -840,10 +840,20 @@ function Icon({
 
 // src/fonts/measureFont.ts
 var REF_STRING = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ";
+function withTimeout(promise, ms, fallback) {
+  return Promise.race([
+    promise,
+    new Promise((resolve) => setTimeout(() => resolve(fallback), ms))
+  ]);
+}
 async function measureAvgCharWidth(fontFamily, fontWeight, fallback, fontSize = 16) {
   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}"`),
+      3e3,
+      []
+    );
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
     if (!ctx) return 0.55;
@@ -2488,6 +2498,7 @@ function Slider({
   const trackRef = React14__default.default.useRef(null);
   const trackWidth = React14__default.default.useRef(0);
   const trackPageX = React14__default.default.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React14__default.default.useState(0);
   const onValueChangeRef = React14__default.default.useRef(onValueChange);
   const minRef = React14__default.default.useRef(min);
   const maxRef = React14__default.default.useRef(max);
@@ -2528,7 +2539,7 @@ function Slider({
     })
   ).current;
   const ratio = max > min ? (value - min) / (max - min) : 0;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE2);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE2);
   const thumbLeft = ratio * usableWidth;
   const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
   const handleValueTextSubmit = React14__default.default.useCallback(
@@ -2563,7 +2574,9 @@ 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;
         });
@@ -2706,6 +2719,7 @@ function HueSlider({
   const trackRef = React14__default.default.useRef(null);
   const trackWidth = React14__default.default.useRef(0);
   const trackPageX = React14__default.default.useRef(0);
+  const [layoutWidth, setLayoutWidth] = React14__default.default.useState(0);
   const onValueChangeRef = React14__default.default.useRef(onValueChange);
   const minRef = React14__default.default.useRef(min);
   const maxRef = React14__default.default.useRef(max);
@@ -2743,7 +2757,7 @@ function HueSlider({
   ).current;
   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_SIZE3);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE3);
   const thumbLeft = ratio * usableWidth;
   const handleValueTextSubmit = React14__default.default.useCallback(
     (text) => {
@@ -2777,7 +2791,9 @@ 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;
         });
@@ -2865,6 +2881,7 @@ function ColorScaleSlider({
   const trackPageX = React14__default.default.useRef(0);
   const isDragging = React14__default.default.useRef(false);
   const thumbAnim = React14__default.default.useRef(new reactNative.Animated.Value(0)).current;
+  const [layoutWidth, setLayoutWidth] = React14__default.default.useState(0);
   const onValueChangeRef = React14__default.default.useRef(onValueChange);
   const disabledRef = React14__default.default.useRef(disabled);
   const colorsLengthRef = React14__default.default.useRef(colors.length);
@@ -2926,7 +2943,7 @@ function ColorScaleSlider({
   const range = maxNV - minNV;
   const clampedValue = value !== void 0 ? 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_SIZE4);
+  const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE4);
   const thumbLeft = ratio * usableWidth;
   React14__default.default.useEffect(() => {
     if (isDragging.current || !animateValue) {
@@ -2945,9 +2962,9 @@ function ColorScaleSlider({
       ref: trackRef,
       style: styles.trackContainer,
       onLayout: (e) => {
-        trackWidth.current = e.nativeEvent.layout.width;
-        const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE4);
-        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;
         });