@digilogiclabs/saas-factory-ui 1.16.1 → 1.16.2

package/dist/index.js

@@ -30500,10 +30500,11 @@ function DiceRoller({
   const [rolling, setRolling] = (0, import_react66.useState)(false);
   const [results, setResults] = (0, import_react66.useState)(null);
   const [history, setHistory] = (0, import_react66.useState)([]);
-  const [rotations, setRotations] = (0, import_react66.useState)(
-    () => Array.from({ length: MAX_COUNT }, () => ({ x: 0, y: 0, z: 0, tr: true }))
-  );
-  const [positions, setPositions] = (0, import_react66.useState)(null);
+  const dieWrapperRefs = (0, import_react66.useRef)([]);
+  const cubeRefs = (0, import_react66.useRef)([]);
+  const shadowRefs = (0, import_react66.useRef)([]);
+  const currentPositionsRef = (0, import_react66.useRef)(null);
+  const rollingRef = (0, import_react66.useRef)(false);
   const timersRef = (0, import_react66.useRef)([]);
   const rafHandleRef = (0, import_react66.useRef)(null);
   const arenaRef = (0, import_react66.useRef)(null);
@@ -30574,15 +30575,54 @@ function DiceRoller({
     })),
     []
   );
+  const writeDiePosition = (0, import_react66.useCallback)(
+    (i, x, y) => {
+      const el = dieWrapperRefs.current[i];
+      if (!el) return;
+      el.style.transform = `translate3d(${x - half}px, ${y - half}px, 0)`;
+    },
+    [half]
+  );
+  const writeCubeRotation = (0, import_react66.useCallback)(
+    (i, rx, ry, rz, withTransition) => {
+      const el = cubeRefs.current[i];
+      if (!el) return;
+      el.style.transition = withTransition ? "transform 0.95s cubic-bezier(0.12,0.8,0.22,1)" : "none";
+      el.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;
+    },
+    []
+  );
   (0, import_react66.useEffect)(() => {
+    const w = arenaRef.current?.offsetWidth ?? arena.w;
+    const h = arenaRef.current?.offsetHeight ?? arenaHeight;
+    if (w === 0 || h === 0) return;
+    const initial = defaultPositions(w, h, clampedCount);
+    currentPositionsRef.current = initial;
+    for (let i = 0; i < clampedCount; i++) {
+      const pos = initial[i];
+      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)`;
+      }
+      const cube = cubeRefs.current[i];
+      if (cube) {
+        cube.style.transition = "none";
+        cube.style.transform = "rotateX(0deg) rotateY(0deg) rotateZ(0deg)";
+      }
+    }
     setResults(null);
-    setPositions(null);
-    setRotations(
-      Array.from({ length: MAX_COUNT }, () => ({ x: 0, y: 0, z: 0, tr: true }))
-    );
-  }, [clampedCount, effectiveSize]);
+  }, [
+    clampedCount,
+    effectiveSize,
+    arena.w,
+    arenaHeight,
+    defaultPositions,
+    half
+  ]);
   const roll = (0, import_react66.useCallback)(() => {
-    if (rolling) return;
+    if (rollingRef.current) return;
+    rollingRef.current = true;
     setRolling(true);
     const vals = Array.from(
       { length: clampedCount },
@@ -30590,21 +30630,29 @@ function DiceRoller({
     );
     timersRef.current.forEach((t) => clearTimeout(t));
     timersRef.current = [];
+    if (rafHandleRef.current != null) {
+      cancelAnimationFrame(rafHandleRef.current);
+      rafHandleRef.current = null;
+    }
     const w = arenaRef.current?.offsetWidth ?? 400;
     const h = arenaRef.current?.offsetHeight ?? 260;
-    const starts = positions ?? defaultPositions(w, h, clampedCount);
+    const starts = currentPositionsRef.current ?? defaultPositions(w, h, clampedCount);
     if (reducedMotion) {
-      setPositions(defaultPositions(w, h, clampedCount));
-      setRotations((prev) => {
-        const n = [...prev];
-        for (let i = 0; i < clampedCount; i++) {
-          const tgt = SHOW_ROT[vals[i]];
-          n[i] = { x: tgt.x, y: tgt.y, z: 0, tr: false };
+      const final = defaultPositions(w, h, clampedCount);
+      currentPositionsRef.current = final;
+      for (let i = 0; i < clampedCount; i++) {
+        const p = final[i];
+        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)`;
         }
-        return n;
-      });
+        const tgt = SHOW_ROT[vals[i]];
+        writeCubeRotation(i, tgt.x, tgt.y, 0, true);
+      }
       setResults(vals);
       setRolling(false);
+      rollingRef.current = false;
       const total2 = vals.reduce((a, b) => a + b, 0);
       onRoll?.(vals, total2);
       if (showHistory) {
@@ -30613,24 +30661,24 @@ function DiceRoller({
       return;
     }
     const frames = simulateDice(w, h, effectiveSize, starts, clampedCount);
-    setRotations((prev) => {
-      const n = [...prev];
-      for (let i = 0; i < clampedCount; i++) {
-        n[i] = {
-          x: (Math.random() - 0.5) * 720,
-          y: (Math.random() - 0.5) * 720,
-          z: (Math.random() - 0.5) * 720,
-          tr: false
-        };
-      }
-      return n;
-    });
+    for (let i = 0; i < clampedCount; i++) {
+      writeCubeRotation(
+        i,
+        (Math.random() - 0.5) * 720,
+        (Math.random() - 0.5) * 720,
+        (Math.random() - 0.5) * 720,
+        false
+      );
+      const el = dieWrapperRefs.current[i];
+      if (el) el.style.transition = "none";
+      const shadow = shadowRefs.current[i];
+      if (shadow) shadow.style.opacity = "0.2";
+    }
+    if (dieWrapperRefs.current[0]) {
+      dieWrapperRefs.current[0].offsetHeight;
+    }
     const playbackMs = TUMBLE_MS;
     const startTime = typeof performance !== "undefined" ? performance.now() : Date.now();
-    if (rafHandleRef.current != null) {
-      cancelAnimationFrame(rafHandleRef.current);
-      rafHandleRef.current = null;
-    }
     const tick = (now) => {
       const elapsed = now - startTime;
       const progress = Math.max(0, Math.min(1, elapsed / playbackMs));
@@ -30638,34 +30686,43 @@ function DiceRoller({
         frames.length - 1,
         Math.floor(progress * frames.length)
       );
-      setPositions(frames[idx].slice(0, clampedCount));
+      const frame = frames[idx];
+      if (frame) {
+        for (let i = 0; i < clampedCount; i++) {
+          const p = frame[i];
+          if (p) writeDiePosition(i, p.x, p.y);
+        }
+        currentPositionsRef.current = frame.slice(0, clampedCount);
+      }
       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";
+        }
       }
     };
     rafHandleRef.current = requestAnimationFrame(tick);
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        setRotations((prev) => {
-          const n = [...prev];
-          for (let i = 0; i < clampedCount; i++) {
-            const tgt = SHOW_ROT[vals[i]];
-            n[i] = {
-              x: tgt.x + (Math.random() > 0.5 ? 720 : -720),
-              y: tgt.y,
-              z: (Math.random() > 0.5 ? 1 : -1) * 360,
-              tr: true
-            };
-          }
-          return n;
-        });
+        for (let i = 0; i < clampedCount; i++) {
+          const tgt = SHOW_ROT[vals[i]];
+          const lx = tgt.x + (Math.random() > 0.5 ? 720 : -720);
+          const ly = tgt.y;
+          const lz = (Math.random() > 0.5 ? 1 : -1) * 360;
+          writeCubeRotation(i, lx, ly, lz, true);
+        }
       });
     });
     const settleTimer = setTimeout(() => {
       setResults(vals);
       setRolling(false);
+      rollingRef.current = false;
       const total2 = vals.reduce((a, b) => a + b, 0);
       onRoll?.(vals, total2);
       if (showHistory) {
@@ -30674,13 +30731,14 @@ function DiceRoller({
     }, SETTLE_MS);
     timersRef.current.push(settleTimer);
   }, [
-    rolling,
     clampedCount,
-    positions,
     defaultPositions,
     effectiveSize,
+    half,
     reducedMotion,
     onRoll,
+    writeCubeRotation,
+    writeDiePosition,
     showHistory,
     historyMax
   ]);
@@ -30706,7 +30764,6 @@ function DiceRoller({
     },
     []
   );
-  const activePositions = positions ?? defaultPositions(arena.w, arenaHeight, clampedCount);
   const total = results ? results.reduce((a, b) => a + b, 0) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
     "div",
@@ -30734,27 +30791,22 @@ function DiceRoller({
               cursor: trigger === "click" ? "pointer" : void 0
             },
             children: Array.from({ length: clampedCount }, (_, d) => {
-              const rot = rotations[d] ?? { x: 0, y: 0, z: 0, tr: true };
-              const pos = activePositions[d] ?? {
-                x: arena.w / 2,
-                y: arenaHeight / 2
-              };
-              const translate = `translate3d(${pos.x - half}px, ${pos.y - half}px, 0)`;
               return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
                 "div",
                 {
+                  ref: (el) => {
+                    dieWrapperRefs.current[d] = el;
+                  },
                   style: {
                     position: "absolute",
                     left: 0,
                     top: 0,
                     width: effectiveSize,
                     height: effectiveSize,
-                    transform: translate,
                     // 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",
-                    transition: rolling ? "transform 0.04s linear" : "transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94)",
                     willChange: "transform",
                     zIndex: 2,
                     perspective: 700
@@ -30763,6 +30815,9 @@ function DiceRoller({
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
+                        ref: (el) => {
+                          shadowRefs.current[d] = el;
+                        },
                         style: {
                           position: "absolute",
                           bottom: -6,
@@ -30772,7 +30827,7 @@ function DiceRoller({
                           background: `radial-gradient(ellipse,${colors.shadow} 0%,transparent 70%)`,
                           borderRadius: "50%",
                           pointerEvents: "none",
-                          opacity: rolling ? 0.2 : 0.85,
+                          opacity: 0.85,
                           transition: "opacity 0.3s"
                         }
                       }
@@ -30780,13 +30835,14 @@ function DiceRoller({
                     /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
+                        ref: (el) => {
+                          cubeRefs.current[d] = el;
+                        },
                         style: {
                           width: "100%",
                           height: "100%",
                           position: "relative",
                           transformStyle: "preserve-3d",
-                          transition: rot.tr ? "transform 0.95s cubic-bezier(0.12,0.8,0.22,1)" : "none",
-                          transform: `rotateX(${rot.x}deg) rotateY(${rot.y}deg) rotateZ(${rot.z}deg)`,
                           willChange: "transform"
                         },
                         children: [1, 2, 3, 4, 5, 6].map((val, fi) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(