@digilogiclabs/saas-factory-ui 1.16.4 → 1.16.6

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) {
@@ -30697,35 +30704,13 @@ function DiceRoller({
         clampedCount,
         effectiveSize,
         starts,
+        reducedMotion,
         refs: {
           die: dieWrapperRefs.current.map((el) => !!el),
           cube: cubeRefs.current.map((el) => !!el)
         }
       });
     }
-    if (reducedMotion) {
-      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) scale3d(1, 1, 1)`;
-        }
-        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) {
-        setHistory((prev) => [{ vals, total: total2 }, ...prev].slice(0, historyMax));
-      }
-      return;
-    }
     const frames = simulateDice(w, h, effectiveSize, starts, clampedCount);
     for (let i = 0; i < clampedCount; i++) {
       writeCubeRotation(
@@ -30756,10 +30741,27 @@ function DiceRoller({
         }
         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,
-            el0transform: el0?.style.transform,
-            el0bounds: el0 ? { w: el0.offsetWidth, h: el0.offsetHeight } : null
+            el0: describe(el0),
+            el1: describe(el1)
           });
         }
         currentPositionsRef.current = frame.slice(0, clampedCount).map((f) => ({ x: f.x, y: f.y }));
@@ -30858,85 +30860,83 @@ function DiceRoller({
               cursor: trigger === "click" ? "pointer" : void 0
             },
             children: Array.from({ length: clampedCount }, (_, d) => {
-              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
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+              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: wrapperStyle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                  "div",
+                  {
+                    ref: getShadowSetter(d),
+                    style: {
+                      position: "absolute",
+                      bottom: -6,
+                      left: "12%",
+                      width: "76%",
+                      height: 10,
+                      background: `radial-gradient(ellipse,${colors.shadow} 0%,transparent 70%)`,
+                      borderRadius: "50%",
+                      pointerEvents: "none",
+                      opacity: 0.85,
+                      transition: "opacity 0.3s"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                  "div",
+                  {
+                    ref: getCubeSetter(d),
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      position: "relative",
+                      transformStyle: "preserve-3d",
+                      willChange: "transform"
+                    },
+                    children: [1, 2, 3, 4, 5, 6].map((val, fi) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
                       "div",
                       {
-                        ref: getShadowSetter(d),
                         style: {
                           position: "absolute",
-                          bottom: -6,
-                          left: "12%",
-                          width: "76%",
-                          height: 10,
-                          background: `radial-gradient(ellipse,${colors.shadow} 0%,transparent 70%)`,
-                          borderRadius: "50%",
-                          pointerEvents: "none",
-                          opacity: 0.85,
-                          transition: "opacity 0.3s"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-                      "div",
-                      {
-                        ref: getCubeSetter(d),
-                        style: {
-                          width: "100%",
-                          height: "100%",
-                          position: "relative",
-                          transformStyle: "preserve-3d",
-                          willChange: "transform"
+                          width: effectiveSize,
+                          height: effectiveSize,
+                          background: colors.face,
+                          border: `1px solid ${colors.faceBorder}`,
+                          borderRadius: faceRadius,
+                          transform: faceTransforms[fi],
+                          transition: "background 0.3s, border-color 0.3s"
                         },
-                        children: [1, 2, 3, 4, 5, 6].map((val, fi) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-                          "div",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                          Face,
                           {
-                            style: {
-                              position: "absolute",
-                              width: effectiveSize,
-                              height: effectiveSize,
-                              background: colors.face,
-                              border: `1px solid ${colors.faceBorder}`,
-                              borderRadius: faceRadius,
-                              transform: faceTransforms[fi],
-                              transition: "background 0.3s, border-color 0.3s"
-                            },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-                              Face,
-                              {
-                                value: val,
-                                pipColor: colors.pip,
-                                pipShadow: colors.pipShadow,
-                                pipDiameter
-                              }
-                            )
-                          },
-                          val
-                        ))
-                      }
-                    )
-                  ]
-                },
-                d
-              );
+                            value: val,
+                            pipColor: colors.pip,
+                            pipShadow: colors.pipShadow,
+                            pipDiameter
+                          }
+                        )
+                      },
+                      val
+                    ))
+                  }
+                )
+              ] }, d);
             })
           }
         ),