@number10/phaserjsx 0.5.2 → 0.6.1

package/dist/{TransformOriginView-2QSoN8wM.cjs → TransformOriginView-Dw_HKnFH.cjs}

@@ -8027,7 +8027,7 @@ const strategies = {
   stack: new StackLayoutStrategy()
 };
 const LAYOUT_CYCLE_EPSILON = 0.5;
-const LAYOUT_CYCLE_TIME_MS = 100;
+const LAYOUT_CYCLE_TIME_MS = 20;
 const LAYOUT_CYCLE_MAX = 5;
 const LAYOUT_MAX_SIZE = 2e5;
 const layoutCycleGuard = /* @__PURE__ */ new WeakMap();
@@ -8496,6 +8496,28 @@ function numberToRgb(num) {
     b: num & 255
   };
 }
+function rgbToHsl(r, g, b) {
+  const red = r / 255;
+  const green = g / 255;
+  const blue = b / 255;
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const delta = max - min;
+  const light = (max + min) / 2;
+  if (delta === 0) {
+    return { h: 0, s: 0, l: light };
+  }
+  const saturationValue = light > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+  let hueValue = 0;
+  if (max === red) {
+    hueValue = (green - blue) / delta + (green < blue ? 6 : 0);
+  } else if (max === green) {
+    hueValue = (blue - red) / delta + 2;
+  } else {
+    hueValue = (red - green) / delta + 4;
+  }
+  return { h: hueValue / 6, s: saturationValue, l: light };
+}
 function lighten(color, amount) {
   const rgb = numberToRgb(color);
   const factor = Math.max(0, Math.min(1, amount));
@@ -12112,13 +12134,14 @@ function Particles(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("particles", { ...props });
 }
 function preprocessSvgForTinting(svg) {
-  return svg.replace(/fill="currentColor"/gi, 'fill="#FFFFFF"').replace(/fill='currentColor'/gi, "fill='#FFFFFF'").replace(/fill:\s*currentColor/gi, "fill: #FFFFFF").replace(/fill="#000000"/gi, 'fill="#FFFFFF"').replace(/fill="#000"/gi, 'fill="#FFFFFF"').replace(/fill='#000000'/gi, "fill='#FFFFFF'").replace(/fill='#000'/gi, "fill='#FFFFFF'");
+  return svg.replace(/fill="currentColor"/gi, 'fill="#FFFFFF"').replace(/fill='currentColor'/gi, "fill='#FFFFFF'").replace(/fill:\s*currentColor/gi, "fill: #FFFFFF").replace(/stroke="currentColor"/gi, 'stroke="#FFFFFF"').replace(/stroke='currentColor'/gi, "stroke='#FFFFFF'").replace(/stroke:\s*currentColor/gi, "stroke: #FFFFFF").replace(/fill="#000000"/gi, 'fill="#FFFFFF"').replace(/fill="#000"/gi, 'fill="#FFFFFF"').replace(/fill='#000000'/gi, "fill='#FFFFFF'").replace(/fill='#000'/gi, "fill='#FFFFFF'").replace(/stroke="#000000"/gi, 'stroke="#FFFFFF"').replace(/stroke="#000"/gi, 'stroke="#FFFFFF"').replace(/stroke='#000000'/gi, "stroke='#FFFFFF'").replace(/stroke='#000'/gi, "stroke='#FFFFFF'");
 }
 async function svgToTexture(scene, key, svgOrUrl, width = 32, height = 32) {
   const trimmed = svgOrUrl.trim();
   let finalUrl;
   let shouldRevokeUrl = false;
-  if (trimmed.startsWith("<svg")) {
+  const isSvgString = trimmed.startsWith("<svg") || trimmed.startsWith("<!--");
+  if (isSvgString && trimmed.includes("<svg")) {
     const processedSvg = preprocessSvgForTinting(trimmed);
     const blob = new Blob([processedSvg], { type: "image/svg+xml" });
     finalUrl = URL.createObjectURL(blob);
@@ -12937,15 +12960,11 @@ function Accordion(props) {
   const animated = props.animated ?? themed.animated ?? false;
   const animationConfig = props.animationConfig ?? themed.animationConfig ?? "gentle";
   const [measuredHeight, setMeasuredHeight] = useState(maxHeight);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (autoHeight && isOpen && measurementRef.current) {
-      setTimeout(() => {
-        if (measurementRef.current) {
-          const height = measurementRef.current.height;
-          setMeasuredHeight(height);
-          setContentHeight(height);
-        }
-      }, 0);
+      const height = measurementRef.current.height;
+      setMeasuredHeight(height);
+      setContentHeight(height);
     }
   }, [isOpen, autoHeight]);
   const [contentHeight, setContentHeight] = useSpring(
@@ -13397,7 +13416,9 @@ function WrapText(props) {
       if (measureRafRef.current !== null) {
         return;
       }
-      measureRafRef.current = requestAnimationFrame(() => {
+      if (!container.scene) return;
+      measureRafRef.current = 1;
+      getRenderContext(container.scene).deferLayout(() => {
         measureRafRef.current = null;
         performMeasure();
       });
@@ -13442,10 +13463,7 @@ function WrapText(props) {
   }, [scene, wrap, measureWidth]);
   useEffect(() => {
     return () => {
-      if (measureRafRef.current !== null) {
-        cancelAnimationFrame(measureRafRef.current);
-        measureRafRef.current = null;
-      }
+      measureRafRef.current = null;
     };
   }, []);
   const measuredWidth = containerWidth > 0 ? containerWidth : lastWidthRef.current;
@@ -13896,95 +13914,84 @@ function CharText(props) {
       props.onApiReady(api);
     }
   }, [containerReady, props.onApiReady]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!internalRef.current) return;
     const container = internalRef.current;
     const scene = container.scene;
     const prevText = chars.map((c) => c.char).join("");
     if (displayedText === prevText) return;
-    const timeoutId = setTimeout(() => {
-      const startX = padLeft;
-      const startY = padTop;
-      const effectiveMaxWidth = multiline && props.maxWidth !== void 0 && typeof props.maxWidth === "number" ? props.maxWidth - horizontalPadding : multiline && props.width !== void 0 && typeof props.width === "number" ? props.width - horizontalPadding : Infinity;
-      let lines;
-      let allChars;
-      if (multiline) {
-        lines = breakIntoLines(
-          displayedText,
-          scene,
-          effectiveMaxWidth,
-          textStyle,
-          charSpacing,
-          multiline,
-          wordWrap
-        );
-        positionLinesVertically(lines, lineHeight);
-        lines = handleOverflow(lines, maxLines, textOverflow);
-        allChars = [];
-        for (const line of lines) {
-          for (const charInfo of line.chars) {
-            allChars.push(charInfo);
-          }
+    const startX = padLeft;
+    const startY = padTop;
+    const effectiveMaxWidth = multiline && props.maxWidth !== void 0 && typeof props.maxWidth === "number" ? props.maxWidth - horizontalPadding : multiline && props.width !== void 0 && typeof props.width === "number" ? props.width - horizontalPadding : Infinity;
+    let lines;
+    let allChars;
+    if (multiline) {
+      lines = breakIntoLines(
+        displayedText,
+        scene,
+        effectiveMaxWidth,
+        textStyle,
+        charSpacing,
+        multiline,
+        wordWrap
+      );
+      positionLinesVertically(lines, lineHeight);
+      lines = handleOverflow(lines, maxLines, textOverflow);
+      allChars = [];
+      for (const line of lines) {
+        for (const charInfo of line.chars) {
+          allChars.push(charInfo);
         }
-      } else {
-        allChars = [];
-        let currentX = 0;
-        for (let i = 0; i < displayedText.length; i++) {
-          const char = displayedText.charAt(i);
-          const tempText = scene.add.text(0, 0, char, textStyle ?? {});
-          const charWidth = tempText.width;
-          const charHeight = tempText.height;
-          tempText.destroy();
-          allChars.push({
-            char,
-            textObject: null,
-            x: currentX,
-            y: 0,
-            width: charWidth,
-            height: charHeight,
-            lineIndex: 0,
-            charIndex: i,
-            lineCharIndex: i
-          });
-          currentX += charWidth + charSpacing;
-        }
-        lines = allChars.length > 0 ? [createLineInfo(allChars, 0, charSpacing)] : [];
-      }
-      const usedTextObjects = [];
-      for (const charInfo of allChars) {
-        const textObj = getTextObject(
-          scene,
-          container,
-          textStyle,
-          textObjectPool,
-          activeTextObjects
-        );
-        textObj.setText(charInfo.char);
-        textObj.setPosition(startX + charInfo.x, startY + charInfo.y);
-        charInfo.textObject = textObj;
-        usedTextObjects.push(textObj);
       }
-      const currentActive = [...activeTextObjects.current];
-      for (const textObj of currentActive) {
-        if (!usedTextObjects.includes(textObj)) {
-          returnToPool(textObj, textObjectPool, activeTextObjects);
-        }
+    } else {
+      allChars = [];
+      let currentX = 0;
+      for (let i = 0; i < displayedText.length; i++) {
+        const char = displayedText.charAt(i);
+        const tempText = scene.add.text(0, 0, char, textStyle ?? {});
+        const charWidth = tempText.width;
+        const charHeight = tempText.height;
+        tempText.destroy();
+        allChars.push({
+          char,
+          textObject: null,
+          x: currentX,
+          y: 0,
+          width: charWidth,
+          height: charHeight,
+          lineIndex: 0,
+          charIndex: i,
+          lineCharIndex: i
+        });
+        currentX += charWidth + charSpacing;
       }
-      const calculatedWidth = lines.length > 0 ? Math.max(...lines.map((l) => l.width)) : 0;
-      let calculatedHeight = 0;
-      if (lines.length > 0) {
-        const lastLine = lines[lines.length - 1];
-        if (lastLine) {
-          calculatedHeight = lastLine.y + lastLine.height;
-        }
+      lines = allChars.length > 0 ? [createLineInfo(allChars, 0, charSpacing)] : [];
+    }
+    const usedTextObjects = [];
+    for (const charInfo of allChars) {
+      const textObj = getTextObject(scene, container, textStyle, textObjectPool, activeTextObjects);
+      textObj.setText(charInfo.char);
+      textObj.setPosition(startX + charInfo.x, startY + charInfo.y);
+      charInfo.textObject = textObj;
+      usedTextObjects.push(textObj);
+    }
+    const currentActive = [...activeTextObjects.current];
+    for (const textObj of currentActive) {
+      if (!usedTextObjects.includes(textObj)) {
+        returnToPool(textObj, textObjectPool, activeTextObjects);
       }
-      setChars(allChars);
-      setWidth(calculatedWidth + horizontalPadding);
-      setHeight(calculatedHeight + verticalPadding);
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-    };
+    }
+    const calculatedWidth = lines.length > 0 ? Math.max(...lines.map((l) => l.width)) : 0;
+    let calculatedHeight = 0;
+    if (lines.length > 0) {
+      const lastLine = lines[lines.length - 1];
+      if (lastLine) {
+        calculatedHeight = lastLine.y + lastLine.height;
+      }
+    }
+    setChars(allChars);
+    setWidth(calculatedWidth + horizontalPadding);
+    setHeight(calculatedHeight + verticalPadding);
   }, [
     displayedText,
     textStyle,
@@ -14001,7 +14008,7 @@ function CharText(props) {
     props.maxWidth,
     props.width
   ]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!internalRef.current || !showCursor) {
       if (cursorRef.current) {
         cursorRef.current.setVisible(false);
@@ -14015,97 +14022,95 @@ function CharText(props) {
     const container = internalRef.current;
     const scene = container.scene;
     if (chars.length === 0 && displayedText.length > 0) return;
-    setTimeout(() => {
-      const startX = padLeft;
-      const startY = padTop;
-      let cursorX = startX;
-      let cursorY = startY;
-      const clampedPosition = Math.max(0, Math.min(cursorPosition, displayedText.length));
-      let charBeforeCursor = null;
-      for (const char of chars) {
-        if (char.charIndex < clampedPosition) {
-          if (!charBeforeCursor || char.charIndex > charBeforeCursor.charIndex) {
-            charBeforeCursor = char;
-          }
-        }
-      }
-      const charBeforeCursorInText = clampedPosition > 0 ? displayedText.charAt(clampedPosition - 1) : null;
-      const isAfterNewline = charBeforeCursorInText === "\n";
-      if (charBeforeCursor) {
-        if (isAfterNewline) {
-          const nextLineIndex = charBeforeCursor.lineIndex + 1;
-          const firstCharOfNextLine = chars.find((c) => c.lineIndex === nextLineIndex);
-          if (firstCharOfNextLine) {
-            cursorX = startX + firstCharOfNextLine.x;
-            cursorY = startY + firstCharOfNextLine.y;
-          } else {
-            cursorX = startX;
-            const lineHeightPx = charBeforeCursor.height * lineHeight;
-            cursorY = startY + charBeforeCursor.y + lineHeightPx;
-          }
-        } else {
-          cursorX = startX + charBeforeCursor.x + charBeforeCursor.width + charSpacing;
-          cursorY = startY + charBeforeCursor.y;
-        }
-      } else if (chars.length > 0 && chars[0]) {
-        const firstChar = chars[0];
-        cursorX = startX + firstChar.x;
-        cursorY = startY + firstChar.y;
-      } else {
-        cursorX = startX;
-        cursorY = startY;
-      }
-      let cursorHeight = 20;
+    const startX = padLeft;
+    const startY = padTop;
+    let cursorX = startX;
+    let cursorY = startY;
+    const clampedPosition = Math.max(0, Math.min(cursorPosition, displayedText.length));
+    let charBeforeCursor = null;
+    for (const char of chars) {
+      if (char.charIndex < clampedPosition) {
+        if (!charBeforeCursor || char.charIndex > charBeforeCursor.charIndex) {
+          charBeforeCursor = char;
+        }
+      }
+    }
+    const charBeforeCursorInText = clampedPosition > 0 ? displayedText.charAt(clampedPosition - 1) : null;
+    const isAfterNewline = charBeforeCursorInText === "\n";
+    if (charBeforeCursor) {
       if (isAfterNewline) {
-        const nextLineIndex = charBeforeCursor ? charBeforeCursor.lineIndex + 1 : 0;
+        const nextLineIndex = charBeforeCursor.lineIndex + 1;
         const firstCharOfNextLine = chars.find((c) => c.lineIndex === nextLineIndex);
         if (firstCharOfNextLine) {
-          cursorHeight = firstCharOfNextLine.height;
-        } else if (charBeforeCursor) {
-          cursorHeight = charBeforeCursor.height;
-        } else if (chars.length > 0 && chars[0]) {
-          cursorHeight = chars[0].height;
+          cursorX = startX + firstCharOfNextLine.x;
+          cursorY = startY + firstCharOfNextLine.y;
+        } else {
+          cursorX = startX;
+          const lineHeightPx = charBeforeCursor.height * lineHeight;
+          cursorY = startY + charBeforeCursor.y + lineHeightPx;
         }
+      } else {
+        cursorX = startX + charBeforeCursor.x + charBeforeCursor.width + charSpacing;
+        cursorY = startY + charBeforeCursor.y;
+      }
+    } else if (chars.length > 0 && chars[0]) {
+      const firstChar = chars[0];
+      cursorX = startX + firstChar.x;
+      cursorY = startY + firstChar.y;
+    } else {
+      cursorX = startX;
+      cursorY = startY;
+    }
+    let cursorHeight = 20;
+    if (isAfterNewline) {
+      const nextLineIndex = charBeforeCursor ? charBeforeCursor.lineIndex + 1 : 0;
+      const firstCharOfNextLine = chars.find((c) => c.lineIndex === nextLineIndex);
+      if (firstCharOfNextLine) {
+        cursorHeight = firstCharOfNextLine.height;
       } else if (charBeforeCursor) {
         cursorHeight = charBeforeCursor.height;
       } else if (chars.length > 0 && chars[0]) {
         cursorHeight = chars[0].height;
       }
-      if (!cursorRef.current) {
-        cursorRef.current = scene.add.rectangle(
-          cursorX,
-          cursorY,
-          cursorWidth,
-          cursorHeight,
-          cursorColor
-        );
-        cursorRef.current.setOrigin(0, 0);
-        container.add(cursorRef.current);
-        cursorTweenRef.current = scene.tweens.add({
-          targets: cursorRef.current,
-          alpha: { from: 1, to: 0 },
-          duration: cursorBlinkSpeed,
-          yoyo: true,
-          repeat: -1
-        });
-      } else {
-        cursorRef.current.setPosition(cursorX, cursorY);
-        cursorRef.current.setSize(cursorWidth, cursorHeight);
-        cursorRef.current.setFillStyle(cursorColor);
-        cursorRef.current.setVisible(true);
-        if (cursorTweenRef.current) {
-          cursorTweenRef.current.stop();
-        }
-        cursorRef.current.setAlpha(1);
-        cursorTweenRef.current = scene.tweens.add({
-          targets: cursorRef.current,
-          alpha: { from: 1, to: 0 },
-          duration: cursorBlinkSpeed,
-          yoyo: true,
-          repeat: -1
-        });
+    } else if (charBeforeCursor) {
+      cursorHeight = charBeforeCursor.height;
+    } else if (chars.length > 0 && chars[0]) {
+      cursorHeight = chars[0].height;
+    }
+    if (!cursorRef.current) {
+      cursorRef.current = scene.add.rectangle(
+        cursorX,
+        cursorY,
+        cursorWidth,
+        cursorHeight,
+        cursorColor
+      );
+      cursorRef.current.setOrigin(0, 0);
+      container.add(cursorRef.current);
+      cursorTweenRef.current = scene.tweens.add({
+        targets: cursorRef.current,
+        alpha: { from: 1, to: 0 },
+        duration: cursorBlinkSpeed,
+        yoyo: true,
+        repeat: -1
+      });
+    } else {
+      cursorRef.current.setPosition(cursorX, cursorY);
+      cursorRef.current.setSize(cursorWidth, cursorHeight);
+      cursorRef.current.setFillStyle(cursorColor);
+      cursorRef.current.setVisible(true);
+      if (cursorTweenRef.current) {
+        cursorTweenRef.current.stop();
       }
-    }, 10);
+      cursorRef.current.setAlpha(1);
+      cursorTweenRef.current = scene.tweens.add({
+        targets: cursorRef.current,
+        alpha: { from: 1, to: 0 },
+        duration: cursorBlinkSpeed,
+        yoyo: true,
+        repeat: -1
+      });
+    }
     return () => {
       if (cursorTweenRef.current) {
         cursorTweenRef.current.stop();
@@ -14123,7 +14128,7 @@ function CharText(props) {
     padTop,
     charSpacing
   ]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!internalRef.current) return;
     const container = internalRef.current;
     const scene = container.scene;
@@ -14133,43 +14138,41 @@ function CharText(props) {
       return;
     }
     if (chars.length === 0) return;
-    setTimeout(() => {
-      const startX = padLeft;
-      const startY = padTop;
-      const lineGroups = /* @__PURE__ */ new Map();
-      for (const char of chars) {
-        if (char && char.charIndex >= selectionStart && char.charIndex < selectionEnd) {
-          const lineIndex = char.lineIndex;
-          if (!lineGroups.has(lineIndex)) {
-            lineGroups.set(lineIndex, []);
-          }
-          lineGroups.get(lineIndex)?.push(char);
-        }
-      }
-      for (const [_lineIndex, lineChars] of lineGroups) {
-        if (lineChars.length === 0) continue;
-        const firstChar = lineChars[0];
-        const lastChar = lineChars[lineChars.length - 1];
-        if (firstChar && lastChar) {
-          const selectionX = startX + firstChar.x;
-          const selectionY = startY + firstChar.y;
-          const selectionWidth = lastChar.x + lastChar.width - firstChar.x + (lineChars.length > 1 ? charSpacing : 0);
-          const selectionHeight = firstChar.height;
-          const selectionRect = scene.add.rectangle(
-            selectionX,
-            selectionY,
-            selectionWidth,
-            selectionHeight,
-            selectionColor,
-            selectionAlpha
-          );
-          selectionRect.setOrigin(0, 0);
-          container.add(selectionRect);
-          container.moveDown(selectionRect);
-          selectionRefs.current.push(selectionRect);
-        }
+    const startX = padLeft;
+    const startY = padTop;
+    const lineGroups = /* @__PURE__ */ new Map();
+    for (const char of chars) {
+      if (char && char.charIndex >= selectionStart && char.charIndex < selectionEnd) {
+        const lineIndex = char.lineIndex;
+        if (!lineGroups.has(lineIndex)) {
+          lineGroups.set(lineIndex, []);
+        }
+        lineGroups.get(lineIndex)?.push(char);
+      }
+    }
+    for (const [_lineIndex, lineChars] of lineGroups) {
+      if (lineChars.length === 0) continue;
+      const firstChar = lineChars[0];
+      const lastChar = lineChars[lineChars.length - 1];
+      if (firstChar && lastChar) {
+        const selectionX = startX + firstChar.x;
+        const selectionY = startY + firstChar.y;
+        const selectionWidth = lastChar.x + lastChar.width - firstChar.x + (lineChars.length > 1 ? charSpacing : 0);
+        const selectionHeight = firstChar.height;
+        const selectionRect = scene.add.rectangle(
+          selectionX,
+          selectionY,
+          selectionWidth,
+          selectionHeight,
+          selectionColor,
+          selectionAlpha
+        );
+        selectionRect.setOrigin(0, 0);
+        container.add(selectionRect);
+        container.moveDown(selectionRect);
+        selectionRefs.current.push(selectionRect);
       }
-    }, 15);
+    }
     return () => {
       selectionRefs.current.forEach((rect) => rect.destroy());
       selectionRefs.current = [];
@@ -14254,11 +14257,9 @@ function CharTextInput(props) {
   const selectionStart = selectionAnchor >= 0 ? Math.min(selectionAnchor, cursorPosition) : -1;
   const selectionEnd = selectionAnchor >= 0 ? Math.max(selectionAnchor, cursorPosition) : -1;
   const redraw = useRedraw();
-  useEffect(() => {
-    const timer = setTimeout(() => redraw(), 0);
-    return () => {
-      clearTimeout(timer);
-    };
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+    redraw();
   }, [containerRef.current]);
   useEffect(() => {
     if (!containerRef.current) return;
@@ -14733,7 +14734,7 @@ function ScrollView(props) {
   };
   const resolvedSnapThreshold = typeof snap === "object" && "positions" in snap ? snap.threshold ?? snapThreshold : snapThreshold;
   const effectiveSnapThreshold = resolvedSnapThreshold === void 0 || resolvedSnapThreshold < 0 ? Infinity : resolvedSnapThreshold;
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!initialScroll) return;
     const allowAnimate = hasMountedRef.current;
     if (snap && typeof snap === "object" && "positions" in snap) {
@@ -15048,12 +15049,10 @@ function ScrollView(props) {
   };
   const redraw = useRedraw();
   const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    const timer1 = setTimeout(() => redraw(), 0);
-    const timer2 = setTimeout(() => setVisible(true), 2);
+  useLayoutEffect(() => {
+    redraw();
+    setVisible(true);
     return () => {
-      clearTimeout(timer1);
-      clearTimeout(timer2);
       if (wheelSnapTimeoutRef.current) {
         clearTimeout(wheelSnapTimeoutRef.current);
       }
@@ -15748,22 +15747,19 @@ function Joystick(props) {
   const activeTweenRef = useRef(null);
   const isDraggingRef = useRef(false);
   const currentThumbPosRef = useRef({ x: 0, y: 0 });
-  useEffect(() => {
-    setTimeout(() => {
-      const size2 = getLayoutSize(outerRef.current);
-      console.log(`Joystick size: ${JSON.stringify(size2)}`);
-      if (size2 != null) {
-        const newCenter = { x: size2.width / 2, y: size2.height / 2 };
-        setCenter(newCenter);
-        setSize({ width: size2.width, height: size2.height });
-        if (!isDraggingRef.current && !activeTweenRef.current) {
-          currentThumbPosRef.current = newCenter;
-          if (thumbRef.current != null) {
-            thumbRef.current.setPosition(newCenter.x, newCenter.y);
-          }
+  useLayoutEffect(() => {
+    const size2 = getLayoutSize(outerRef.current);
+    if (size2 != null) {
+      const newCenter = { x: size2.width / 2, y: size2.height / 2 };
+      setCenter(newCenter);
+      setSize({ width: size2.width, height: size2.height });
+      if (!isDraggingRef.current && !activeTweenRef.current) {
+        currentThumbPosRef.current = newCenter;
+        if (thumbRef.current != null) {
+          thumbRef.current.setPosition(newCenter.x, newCenter.y);
         }
       }
-    }, 0);
+    }
   }, [outerRef]);
   const themeType = props.joystickTheme?.theme;
   const themeTint = props.joystickTheme?.tint;
@@ -15901,11 +15897,8 @@ function NineSliceButton(props) {
   const ref = useRef(null);
   const { applyEffect, stopEffects } = useGameObjectEffect(ref);
   const [show, setShow] = useState(false);
-  useEffect(() => {
-    const timer = setTimeout(() => setShow(true), 0);
-    return () => {
-      clearTimeout(timer);
-    };
+  useLayoutEffect(() => {
+    setShow(true);
   }, []);
   const innerWidth = (ref.current?.width ?? 0) - leftWidth - rightWidth;
   const innerHeight = (ref.current?.height ?? 0) - (topHeight ?? 0) - (bottomHeight ?? 0);
@@ -15979,14 +15972,14 @@ function RefOriginView({
   const handleOuterRef = (container) => {
     if (!container) return;
     outerRef.current = container;
-    setTimeout(() => {
+    getRenderContext(container.scene).deferLayout(() => {
       const width2 = container.width;
       const height2 = container.height;
       const actualWidth = Number.isNaN(width2) ? 0 : width2;
       const actualHeight = Number.isNaN(height2) ? 0 : height2;
       if (actualHeight !== numericDimension.y || actualWidth !== numericDimension.x)
         setNumericWidth({ x: actualWidth, y: actualHeight });
-    }, 0);
+    });
   };
   const pivotX = numericDimension.x * originX;
   const pivotY = numericDimension.y * originY;
@@ -16406,11 +16399,13 @@ function BaseSlider(props) {
           height: isHorizontal ? trackHeight : trackLength,
           backgroundColor: themed.trackColor ?? 4473924,
           cornerRadius: themed.trackBorderRadius ?? trackHeight / 2,
+          alignItems: "start",
+          padding: 0,
           direction: "stack",
           onTouch: handleTrackTouch,
           theme: nestedTheme,
           children: [
-            props.renderTrack ? /* @__PURE__ */ jsxRuntime.jsx(View, { children: props.renderTrack(fillStartPercentage, isRange ? fillEndPercentage : void 0) }, Math.random()) : /* @__PURE__ */ jsxRuntime.jsx(
+            props.renderTrack ? /* @__PURE__ */ jsxRuntime.jsx(View, { children: props.renderTrack(fillStartPercentage, isRange ? fillEndPercentage : void 0) }) : /* @__PURE__ */ jsxRuntime.jsx(
               View,
               {
                 x: isHorizontal ? fillStartPos : 0,
@@ -17086,6 +17081,7 @@ exports.releaseSVGTextures = releaseSVGTextures;
 exports.remountAll = remountAll;
 exports.resolveEffect = resolveEffect;
 exports.resolveSize = resolveSize;
+exports.rgbToHsl = rgbToHsl;
 exports.rgbToNumber = rgbToNumber;
 exports.shallowEqual = shallowEqual;
 exports.shouldComponentUpdate = shouldComponentUpdate;
@@ -17117,4 +17113,4 @@ exports.useViewportSize = useViewportSize;
 exports.useWorldLayoutRect = useWorldLayoutRect;
 exports.viewportRegistry = viewportRegistry;
 exports.withHooks = withHooks;
-//# sourceMappingURL=TransformOriginView-2QSoN8wM.cjs.map
+//# sourceMappingURL=TransformOriginView-Dw_HKnFH.cjs.map