@digilogiclabs/saas-factory-ui 2.8.1 → 2.8.2

package/dist/web/index.d.mts

@@ -5148,9 +5148,10 @@ declare function TiltCard({ accent, accentSecondary, topLabel, icon, title, subt
  * Features:
  *   - 1 to 6 dice; d6 renders as a full 3D cube (six faces, CSS
  *     transforms, standard layout — opposite faces sum to 7); d4/d8/
- *     d10/d12/d20 render as two-sided 3D polyhedron cards (numeral
- *     front + shaded back, hidden backfaces) that tumble on every
- *     axis with the same chaos-snap-then-settle motion as the cube
+ *     d10/d12/d20 render as extruded 3D polyhedron slabs (numeral
+ *     front + shaded back + stacked edge layers for real thickness)
+ *     that tumble on every axis with the same chaos-snap-then-settle
+ *     motion as the cube
  *   - Displayed face is structurally guaranteed to match the recorded
  *     value: the d6 landing rotation is DERIVED as the inverse of the
  *     face placement (one source of truth), and non-cube dice render

package/dist/web/index.d.ts

@@ -5148,9 +5148,10 @@ declare function TiltCard({ accent, accentSecondary, topLabel, icon, title, subt
  * Features:
  *   - 1 to 6 dice; d6 renders as a full 3D cube (six faces, CSS
  *     transforms, standard layout — opposite faces sum to 7); d4/d8/
- *     d10/d12/d20 render as two-sided 3D polyhedron cards (numeral
- *     front + shaded back, hidden backfaces) that tumble on every
- *     axis with the same chaos-snap-then-settle motion as the cube
+ *     d10/d12/d20 render as extruded 3D polyhedron slabs (numeral
+ *     front + shaded back + stacked edge layers for real thickness)
+ *     that tumble on every axis with the same chaos-snap-then-settle
+ *     motion as the cube
  *   - Displayed face is structurally guaranteed to match the recorded
  *     value: the d6 landing rotation is DERIVED as the inverse of the
  *     face placement (one source of truth), and non-cube dice render

package/dist/web/index.js

@@ -30983,6 +30983,8 @@ function DiceRoller({
                     )) : (() => {
                       const shape = POLY_SHAPES[sides];
                       const shown = results?.[d] ?? sides;
+                      const depth = effectiveSize * 0.18;
+                      const edgeLayers = 16;
                       const cardFaceStyle = {
                         position: "absolute",
                         inset: 0,
@@ -30991,13 +30993,53 @@ function DiceRoller({
                         backfaceVisibility: "hidden"
                       };
                       return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(import_jsx_runtime113.Fragment, { children: [
+                        Array.from({ length: edgeLayers }, (_2, li) => {
+                          const z = -depth / 2 + depth * (li + 0.5) / edgeLayers;
+                          return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+                            "svg",
+                            {
+                              viewBox: "0 0 100 100",
+                              width: "100%",
+                              height: "100%",
+                              style: {
+                                position: "absolute",
+                                inset: 0,
+                                display: "block",
+                                overflow: "visible",
+                                transform: `translateZ(${z}px)`
+                              },
+                              "aria-hidden": "true",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                                  "polygon",
+                                  {
+                                    points: shape.points,
+                                    fill: colors.face
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                                  "polygon",
+                                  {
+                                    points: shape.points,
+                                    fill: "#000",
+                                    opacity: 0.22
+                                  }
+                                )
+                              ]
+                            },
+                            li
+                          );
+                        }),
                         /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
                           "svg",
                           {
                             viewBox: "0 0 100 100",
                             width: "100%",
                             height: "100%",
-                            style: cardFaceStyle,
+                            style: {
+                              ...cardFaceStyle,
+                              transform: `translateZ(${depth / 2}px)`
+                            },
                             "aria-hidden": "true",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
@@ -31053,7 +31095,7 @@ function DiceRoller({
                             height: "100%",
                             style: {
                               ...cardFaceStyle,
-                              transform: "rotateY(180deg)"
+                              transform: `rotateY(180deg) translateZ(${depth / 2}px)`
                             },
                             "aria-hidden": "true",
                             children: [