@digilogiclabs/saas-factory-ui 1.16.3 → 1.16.5

package/dist/index.js

@@ -30630,7 +30630,10 @@ function DiceRoller({
     (i, x, y, sx = 1, sy = 1) => {
       const el = dieWrapperRefs.current[i];
       if (!el) return;
-      el.style.transform = `translate3d(${x - half}px, ${y - half}px, 0) scale3d(${sx}, ${sy}, 1)`;
+      el.style.setProperty("--dice-x", `${x - half}px`);
+      el.style.setProperty("--dice-y", `${y - half}px`);
+      el.style.setProperty("--dice-sx", String(sx));
+      el.style.setProperty("--dice-sy", String(sy));
     },
     [half]
   );
@@ -30644,9 +30647,10 @@ function DiceRoller({
     []
   );
   (0, import_react66.useEffect)(() => {
-    const w = arenaRef.current?.offsetWidth ?? arena.w;
-    const h = arenaRef.current?.offsetHeight ?? arenaHeight;
-    if (w === 0 || h === 0) return;
+    const rawW = arenaRef.current?.offsetWidth ?? 0;
+    const rawH = arenaRef.current?.offsetHeight ?? 0;
+    const w = rawW > 20 ? rawW : arena.w > 20 ? arena.w : 400;
+    const h = rawH > 20 ? rawH : arenaHeight > 20 ? arenaHeight : 260;
     const initial = defaultPositions(w, h, clampedCount);
     currentPositionsRef.current = initial;
     for (let i = 0; i < clampedCount; i++) {
@@ -30654,7 +30658,10 @@ function DiceRoller({
       const el = dieWrapperRefs.current[i];
       if (el) {
         el.style.transition = "transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94)";
-        el.style.transform = `translate3d(${pos.x - half}px, ${pos.y - half}px, 0) scale3d(1, 1, 1)`;
+        el.style.setProperty("--dice-x", `${pos.x - half}px`);
+        el.style.setProperty("--dice-y", `${pos.y - half}px`);
+        el.style.setProperty("--dice-sx", "1");
+        el.style.setProperty("--dice-sy", "1");
       }
       const cube = cubeRefs.current[i];
       if (cube) {
@@ -30685,9 +30692,24 @@ function DiceRoller({
       cancelAnimationFrame(rafHandleRef.current);
       rafHandleRef.current = null;
     }
-    const w = arenaRef.current?.offsetWidth ?? 400;
-    const h = arenaRef.current?.offsetHeight ?? 260;
+    const rawW = arenaRef.current?.offsetWidth ?? 0;
+    const rawH = arenaRef.current?.offsetHeight ?? 0;
+    const w = rawW > 20 ? rawW : 400;
+    const h = rawH > 20 ? rawH : 260;
     const starts = currentPositionsRef.current ?? defaultPositions(w, h, clampedCount);
+    if (typeof console !== "undefined") {
+      console.log("[DiceRoller] roll()", {
+        rawArena: { w: rawW, h: rawH },
+        physicsArena: { w, h },
+        clampedCount,
+        effectiveSize,
+        starts,
+        refs: {
+          die: dieWrapperRefs.current.map((el) => !!el),
+          cube: cubeRefs.current.map((el) => !!el)
+        }
+      });
+    }
     if (reducedMotion) {
       const final = defaultPositions(w, h, clampedCount);
       currentPositionsRef.current = final;
@@ -30696,7 +30718,10 @@ function DiceRoller({
         const el = dieWrapperRefs.current[i];
         if (el) {
           el.style.transition = "transform 0.2s ease-out";
-          el.style.transform = `translate3d(${p.x - half}px, ${p.y - half}px, 0) scale3d(1, 1, 1)`;
+          el.style.setProperty("--dice-x", `${p.x - half}px`);
+          el.style.setProperty("--dice-y", `${p.y - half}px`);
+          el.style.setProperty("--dice-sx", "1");
+          el.style.setProperty("--dice-sy", "1");
         }
         const tgt = SHOW_ROT[vals[i]];
         writeCubeRotation(i, tgt.x, tgt.y, 0, true);
@@ -30728,40 +30753,55 @@ function DiceRoller({
     if (dieWrapperRefs.current[0]) {
       dieWrapperRefs.current[0].offsetHeight;
     }
-    const playbackMs = TUMBLE_MS;
-    const startTime = typeof performance !== "undefined" ? performance.now() : Date.now();
-    const tick = (now) => {
-      const elapsed = now - startTime;
-      const progress = Math.max(0, Math.min(1, elapsed / playbackMs));
-      const idx = Math.min(
-        frames.length - 1,
-        Math.floor(progress * frames.length)
-      );
-      const frame = frames[idx];
-      if (frame) {
+    const stepMs = Math.max(20, Math.floor(TUMBLE_MS / frames.length));
+    for (let s = 0; s < frames.length; s++) {
+      const capturedStep = s;
+      const timer = setTimeout(() => {
+        const frame = frames[capturedStep];
+        if (!frame) return;
         for (let i = 0; i < clampedCount; i++) {
           const p = frame[i];
-          if (p) writeDiePosition(i, p.x, p.y, p.sx, p.sy);
+          if (!p) continue;
+          writeDiePosition(i, p.x, p.y, p.sx, p.sy);
         }
-        currentPositionsRef.current = frame.slice(0, clampedCount).map((f) => ({
-          x: f.x,
-          y: f.y
-        }));
-      }
-      if (progress < 1) {
-        rafHandleRef.current = requestAnimationFrame(tick);
-      } else {
-        rafHandleRef.current = null;
-        for (let i = 0; i < clampedCount; i++) {
-          const el = dieWrapperRefs.current[i];
-          if (el)
-            el.style.transition = "transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94)";
-          const shadow = shadowRefs.current[i];
-          if (shadow) shadow.style.opacity = "0.85";
+        if (capturedStep === 0 && typeof console !== "undefined") {
+          const el0 = dieWrapperRefs.current[0];
+          const el1 = dieWrapperRefs.current[1];
+          const describe = (el) => {
+            if (!el) return null;
+            const rect = el.getBoundingClientRect();
+            return {
+              inlineTransform: el.style.transform,
+              diceX: el.style.getPropertyValue("--dice-x"),
+              diceY: el.style.getPropertyValue("--dice-y"),
+              computedTransform: typeof getComputedStyle !== "undefined" ? getComputedStyle(el).transform : "n/a",
+              rect: {
+                x: Math.round(rect.x),
+                y: Math.round(rect.y),
+                w: Math.round(rect.width),
+                h: Math.round(rect.height)
+              }
+            };
+          };
+          console.log("[DiceRoller] first frame written", {
+            frame0: frame,
+            el0: describe(el0),
+            el1: describe(el1)
+          });
         }
-      }
-    };
-    rafHandleRef.current = requestAnimationFrame(tick);
+        currentPositionsRef.current = frame.slice(0, clampedCount).map((f) => ({ x: f.x, y: f.y }));
+        if (capturedStep === frames.length - 1) {
+          for (let i = 0; i < clampedCount; i++) {
+            const el = dieWrapperRefs.current[i];
+            if (el)
+              el.style.transition = "transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94)";
+            const shadow = shadowRefs.current[i];
+            if (shadow) shadow.style.opacity = "0.85";
+          }
+        }
+      }, capturedStep * stepMs);
+      timersRef.current.push(timer);
+    }
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         for (let i = 0; i < clampedCount; i++) {
@@ -30845,24 +30885,30 @@ function DiceRoller({
               cursor: trigger === "click" ? "pointer" : void 0
             },
             children: Array.from({ length: clampedCount }, (_, d) => {
+              const wrapperStyle = {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: effectiveSize,
+                height: effectiveSize,
+                transform: "translate3d(var(--dice-x, 0px), var(--dice-y, 0px), 0) scale3d(var(--dice-sx, 1), var(--dice-sy, 1), 1)",
+                // Parent must preserve 3D so the inner cube's rotateX/Y/Z
+                // still renders with depth — otherwise adding a transform
+                // to the wrapper would flatten its children into 2D.
+                transformStyle: "preserve-3d",
+                willChange: "transform",
+                zIndex: 2,
+                perspective: 700,
+                "--dice-x": "0px",
+                "--dice-y": "0px",
+                "--dice-sx": "1",
+                "--dice-sy": "1"
+              };
               return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
                 "div",
                 {
                   ref: getDieSetter(d),
-                  style: {
-                    position: "absolute",
-                    left: 0,
-                    top: 0,
-                    width: effectiveSize,
-                    height: effectiveSize,
-                    // Parent must preserve 3D so the inner cube's rotateX/Y/Z
-                    // still renders with depth — otherwise adding a transform
-                    // to the wrapper would flatten its children into 2D.
-                    transformStyle: "preserve-3d",
-                    willChange: "transform",
-                    zIndex: 2,
-                    perspective: 700
-                  },
+                  style: wrapperStyle,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",