@digilogiclabs/saas-factory-ui 1.16.4 → 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) {
@@ -30711,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);
@@ -30756,10 +30766,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,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",