@digilogiclabs/saas-factory-ui 2.8.2 → 2.9.0

package/dist/web/index.mjs

@@ -30227,6 +30227,7 @@ function TiltCard({
 import {
   useCallback as useCallback41,
   useEffect as useEffect51,
+  useId as useId3,
   useMemo as useMemo26,
   useRef as useRef40,
   useState as useState66
@@ -30366,17 +30367,192 @@ function d6LandingRotation(value) {
     y: Math.abs(p.y) === 180 ? 180 : -p.y || 0
   };
 }
-var POLY_SHAPES = {
-  4: { points: "50,8 93,86 7,86", textY: 62, fontScale: 0.3 },
-  8: { points: "50,4 96,50 50,96 4,50", textY: 51, fontScale: 0.33 },
-  10: { points: "50,4 93,44 50,96 7,44", textY: 47, fontScale: 0.3 },
-  12: { points: "50,4 95,37 78,93 22,93 5,37", textY: 54, fontScale: 0.33 },
-  20: {
-    points: "50,3 91,26 91,74 50,97 9,74 9,26",
-    textY: 51,
-    fontScale: 0.33
+var PHI = (1 + Math.sqrt(5)) / 2;
+var dot3 = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+var cross3 = (a, b) => [
+  a[1] * b[2] - a[2] * b[1],
+  a[2] * b[0] - a[0] * b[2],
+  a[0] * b[1] - a[1] * b[0]
+];
+var sub3 = (a, b) => [
+  a[0] - b[0],
+  a[1] - b[1],
+  a[2] - b[2]
+];
+var scale3 = (a, s) => [a[0] * s, a[1] * s, a[2] * s];
+var len3 = (a) => Math.hypot(a[0], a[1], a[2]);
+var norm3 = (a) => scale3(a, 1 / len3(a));
+function rotateAround(p, axis, angle) {
+  const cosA = Math.cos(angle);
+  const sinA = Math.sin(angle);
+  const t1 = scale3(p, cosA);
+  const t2 = scale3(cross3(axis, p), sinA);
+  const t3 = scale3(axis, dot3(axis, p) * (1 - cosA));
+  return [t1[0] + t2[0] + t3[0], t1[1] + t2[1] + t3[1], t1[2] + t2[2] + t3[2]];
+}
+function rotationTo(from, to) {
+  const c = dot3(from, to);
+  if (c > 1 - 1e-9) return (p) => p;
+  const axis = c < -1 + 1e-9 ? norm3(
+    Math.abs(from[0]) < 0.9 ? cross3(from, [1, 0, 0]) : cross3(from, [0, 1, 0])
+  ) : norm3(cross3(from, to));
+  const angle = Math.acos(Math.max(-1, Math.min(1, c)));
+  return (p) => rotateAround(p, axis, angle);
+}
+function solidVertices(sides) {
+  switch (sides) {
+    case 4:
+      return [
+        [1, 1, 1],
+        [1, -1, -1],
+        [-1, 1, -1],
+        [-1, -1, 1]
+      ];
+    case 8:
+      return [
+        [1, 0, 0],
+        [-1, 0, 0],
+        [0, 1, 0],
+        [0, -1, 0],
+        [0, 0, 1],
+        [0, 0, -1]
+      ];
+    case 10: {
+      const h = 0.15;
+      const cos36 = Math.cos(Math.PI / 5);
+      const zApex = 2 * h / (1 - cos36) * cos36 + h;
+      const verts = [
+        [0, 0, zApex],
+        [0, 0, -zApex]
+      ];
+      for (let k = 0; k < 10; k++) {
+        const a = k * Math.PI / 5;
+        verts.push([Math.cos(a), Math.sin(a), k % 2 === 0 ? h : -h]);
+      }
+      return verts;
+    }
+    case 12: {
+      const v = [];
+      for (const sx of [1, -1])
+        for (const sy of [1, -1])
+          for (const sz of [1, -1]) v.push([sx, sy, sz]);
+      const b = 1 / PHI;
+      for (const s1 of [1, -1])
+        for (const s2 of [1, -1]) {
+          v.push([0, s1 * b, s2 * PHI]);
+          v.push([s1 * b, s2 * PHI, 0]);
+          v.push([s2 * PHI, 0, s1 * b]);
+        }
+      return v;
+    }
+    case 20: {
+      const v = [];
+      for (const s1 of [1, -1])
+        for (const s2 of [1, -1]) {
+          v.push([0, s1, s2 * PHI]);
+          v.push([s1, s2 * PHI, 0]);
+          v.push([s2 * PHI, 0, s1]);
+        }
+      return v;
+    }
   }
-};
+}
+function computeFaces(verts) {
+  const faces = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (let i = 0; i < verts.length; i++)
+    for (let j = i + 1; j < verts.length; j++)
+      for (let k = j + 1; k < verts.length; k++) {
+        let n = cross3(sub3(verts[j], verts[i]), sub3(verts[k], verts[i]));
+        if (len3(n) < 1e-9) continue;
+        n = norm3(n);
+        let d = dot3(n, verts[i]);
+        if (d < 0) {
+          n = scale3(n, -1);
+          d = -d;
+        }
+        if (verts.some((p) => dot3(n, p) > d + 1e-4)) continue;
+        const ids = verts.flatMap(
+          (p, idx) => Math.abs(dot3(n, p) - d) < 1e-4 ? [idx] : []
+        );
+        const key = ids.join(",");
+        if (seen.has(key)) continue;
+        seen.add(key);
+        faces.push({ normal: n, ids });
+      }
+  return faces;
+}
+var polyhedronCache = /* @__PURE__ */ new Map();
+function buildPolyhedron(sides) {
+  const cached = polyhedronCache.get(sides);
+  if (cached) return cached;
+  let verts = solidVertices(sides);
+  const rough = computeFaces(verts);
+  const front = rough.reduce(
+    (best, f) => f.normal[2] > best.normal[2] + 1e-9 ? f : best
+  );
+  const rot = rotationTo(front.normal, [0, 0, 1]);
+  verts = verts.map(rot);
+  const rMax = Math.max(...verts.map(len3));
+  verts = verts.map((p) => scale3(p, 1 / rMax));
+  const raw = computeFaces(verts);
+  const built = raw.map((f) => {
+    const faceVerts = f.ids.map((i) => verts[i]);
+    const centroid = scale3(
+      faceVerts.reduce((a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]]),
+      1 / faceVerts.length
+    );
+    const w = f.normal;
+    let vRaw = sub3([0, 1, 0], scale3(w, w[1]));
+    if (len3(vRaw) < 1e-6) vRaw = sub3([0, 0, 1], scale3(w, w[2]));
+    const v = norm3(vRaw);
+    const u = cross3(v, w);
+    const pts = faceVerts.map((p) => [
+      dot3(sub3(p, centroid), u),
+      dot3(sub3(p, centroid), v)
+    ]).sort((a, b) => Math.atan2(a[1], a[0]) - Math.atan2(b[1], b[0]));
+    return { normal: w, centroid, u, v, pts, value: 0 };
+  });
+  built.sort((a, b) => b.normal[2] - a.normal[2]);
+  const oppOf = (i) => built.findIndex((g) => dot3(built[i].normal, g.normal) < -0.9999);
+  const pool = [];
+  for (let v2 = 1; v2 < sides; v2++) pool.push(v2);
+  built[0].value = sides;
+  const opp0 = oppOf(0);
+  if (opp0 >= 0) {
+    built[opp0].value = 1;
+    pool.splice(pool.indexOf(1), 1);
+  }
+  for (let i = 1; i < built.length; i++) {
+    if (built[i].value !== 0) continue;
+    const v2 = pool.shift();
+    built[i].value = v2;
+    const j = oppOf(i);
+    if (j >= 0 && built[j].value === 0) {
+      built[j].value = sides + 1 - v2;
+      pool.splice(pool.indexOf(sides + 1 - v2), 1);
+    }
+  }
+  const faceRadius = Math.max(
+    ...built.flatMap((f) => f.pts.map(([x, y]) => Math.hypot(x, y)))
+  );
+  const edgeDist = (pts) => Math.min(
+    ...pts.map((p1, i2) => {
+      const p2 = pts[(i2 + 1) % pts.length];
+      const dx = p2[0] - p1[0];
+      const dy = p2[1] - p1[1];
+      const t = Math.max(
+        0,
+        Math.min(1, -(p1[0] * dx + p1[1] * dy) / (dx * dx + dy * dy))
+      );
+      return Math.hypot(p1[0] + t * dx, p1[1] + t * dy);
+    })
+  );
+  const faceInradius = Math.min(...built.map((f) => edgeDist(f.pts)));
+  const result = { faces: built, faceRadius, faceInradius };
+  polyhedronCache.set(sides, result);
+  return result;
+}
 function formatDieValue(v, sides) {
   return sides > 8 && (v === 6 || v === 9) ? `${v}.` : String(v);
 }
@@ -30601,6 +30777,7 @@ function DiceRoller({
     }
     return numeralSetters.current[i];
   };
+  const sheenGradientId = useId3();
   const timersRef = useRef40([]);
   const rafHandleRef = useRef40(null);
   const arenaRef = useRef40(null);
@@ -30986,99 +31163,97 @@ function DiceRoller({
                       },
                       val
                     )) : (() => {
-                      const shape = POLY_SHAPES[sides];
+                      const geo = buildPolyhedron(sides);
+                      const R = effectiveSize / 2;
+                      const S = Math.ceil(geo.faceRadius * R * 2) + 6;
+                      const fontSize = geo.faceInradius * R * 1.15;
                       const shown = results?.[d] ?? sides;
-                      const depth = effectiveSize * 0.18;
-                      const edgeLayers = 16;
-                      const cardFaceStyle = {
-                        position: "absolute",
-                        inset: 0,
-                        display: "block",
-                        overflow: "visible",
-                        backfaceVisibility: "hidden"
-                      };
-                      return /* @__PURE__ */ jsxs86(Fragment30, { children: [
-                        Array.from({ length: edgeLayers }, (_2, li) => {
-                          const z = -depth / 2 + depth * (li + 0.5) / edgeLayers;
-                          return /* @__PURE__ */ jsxs86(
-                            "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__ */ jsx113(
-                                  "polygon",
-                                  {
-                                    points: shape.points,
-                                    fill: colors.face
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx113(
-                                  "polygon",
-                                  {
-                                    points: shape.points,
-                                    fill: "#000",
-                                    opacity: 0.22
-                                  }
-                                )
-                              ]
-                            },
-                            li
-                          );
-                        }),
-                        /* @__PURE__ */ jsxs86(
+                      return /* @__PURE__ */ jsx113(Fragment30, { children: geo.faces.map((f, fi) => {
+                        const m = `matrix3d(${f.u[0]},${f.u[1]},${f.u[2]},0,${f.v[0]},${f.v[1]},${f.v[2]},0,${f.normal[0]},${f.normal[1]},${f.normal[2]},0,${f.centroid[0] * R},${f.centroid[1] * R},${f.centroid[2] * R},1)`;
+                        const gid = `${sheenGradientId}-${d}-${fi}`;
+                        const pts = f.pts.map(
+                          ([x, y]) => `${(x * R + S / 2).toFixed(2)},${(y * R + S / 2).toFixed(2)}`
+                        ).join(" ");
+                        return /* @__PURE__ */ jsxs86(
                           "svg",
                           {
-                            viewBox: "0 0 100 100",
-                            width: "100%",
-                            height: "100%",
+                            width: S,
+                            height: S,
+                            viewBox: `0 0 ${S} ${S}`,
                             style: {
-                              ...cardFaceStyle,
-                              transform: `translateZ(${depth / 2}px)`
+                              position: "absolute",
+                              left: "50%",
+                              top: "50%",
+                              marginLeft: -S / 2,
+                              marginTop: -S / 2,
+                              overflow: "visible",
+                              transform: m,
+                              // Convex solid: a face is either front-
+                              // facing or hidden behind nearer faces,
+                              // so hiding backfaces is both correct
+                              // and the mirrored-numeral guard.
+                              backfaceVisibility: "hidden"
                             },
                             "aria-hidden": "true",
                             children: [
-                              /* @__PURE__ */ jsx113(
-                                "polygon",
+                              /* @__PURE__ */ jsx113("defs", { children: /* @__PURE__ */ jsxs86(
+                                "radialGradient",
                                 {
-                                  points: shape.points,
-                                  fill: colors.face,
-                                  stroke: colors.faceBorder,
-                                  strokeWidth: 2.5,
-                                  strokeLinejoin: "round",
-                                  style: { transition: "fill 0.3s, stroke 0.3s" }
+                                  id: gid,
+                                  cx: "32%",
+                                  cy: "26%",
+                                  r: "80%",
+                                  children: [
+                                    /* @__PURE__ */ jsx113(
+                                      "stop",
+                                      {
+                                        offset: "0%",
+                                        stopColor: "#fff",
+                                        stopOpacity: "0.38"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx113(
+                                      "stop",
+                                      {
+                                        offset: "55%",
+                                        stopColor: "#fff",
+                                        stopOpacity: "0.08"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx113(
+                                      "stop",
+                                      {
+                                        offset: "100%",
+                                        stopColor: "#fff",
+                                        stopOpacity: "0"
+                                      }
+                                    )
+                                  ]
                                 }
-                              ),
+                              ) }),
                               /* @__PURE__ */ jsx113(
                                 "polygon",
                                 {
-                                  points: shape.points,
-                                  fill: "none",
+                                  points: pts,
+                                  fill: colors.face,
                                   stroke: colors.faceBorder,
                                   strokeWidth: 1.5,
                                   strokeLinejoin: "round",
-                                  opacity: 0.55,
-                                  transform: "translate(50 50) scale(0.76) translate(-50 -50)"
+                                  style: {
+                                    transition: "fill 0.3s, stroke 0.3s"
+                                  }
                                 }
                               ),
+                              /* @__PURE__ */ jsx113("polygon", { points: pts, fill: `url(#${gid})` }),
                               /* @__PURE__ */ jsx113(
                                 "text",
                                 {
-                                  ref: getNumeralSetter(d),
-                                  x: 50,
-                                  y: shape.textY,
+                                  ref: fi === 0 ? getNumeralSetter(d) : void 0,
+                                  x: S / 2,
+                                  y: S / 2,
                                   textAnchor: "middle",
                                   dominantBaseline: "central",
-                                  fontSize: 100 * shape.fontScale,
+                                  fontSize,
                                   fontWeight: 800,
                                   fill: colors.pip,
                                   style: {
@@ -31086,59 +31261,17 @@ function DiceRoller({
                                     transition: "fill 0.3s",
                                     userSelect: "none"
                                   },
-                                  children: formatDieValue(shown, sides)
+                                  children: formatDieValue(
+                                    fi === 0 ? shown : f.value,
+                                    sides
+                                  )
                                 }
                               )
                             ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs86(
-                          "svg",
-                          {
-                            viewBox: "0 0 100 100",
-                            width: "100%",
-                            height: "100%",
-                            style: {
-                              ...cardFaceStyle,
-                              transform: `rotateY(180deg) translateZ(${depth / 2}px)`
-                            },
-                            "aria-hidden": "true",
-                            children: [
-                              /* @__PURE__ */ jsx113(
-                                "polygon",
-                                {
-                                  points: shape.points,
-                                  fill: colors.face,
-                                  stroke: colors.faceBorder,
-                                  strokeWidth: 2.5,
-                                  strokeLinejoin: "round",
-                                  style: { transition: "fill 0.3s, stroke 0.3s" }
-                                }
-                              ),
-                              /* @__PURE__ */ jsx113(
-                                "polygon",
-                                {
-                                  points: shape.points,
-                                  fill: "none",
-                                  stroke: colors.faceBorder,
-                                  strokeWidth: 1.5,
-                                  strokeLinejoin: "round",
-                                  opacity: 0.55,
-                                  transform: "translate(50 50) scale(0.76) translate(-50 -50)"
-                                }
-                              ),
-                              /* @__PURE__ */ jsx113(
-                                "polygon",
-                                {
-                                  points: shape.points,
-                                  fill: "#000",
-                                  opacity: 0.14
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ] });
+                          },
+                          fi
+                        );
+                      }) });
                     })()
                   }
                 )
@@ -44118,6 +44251,7 @@ export {
   audioAppTabs,
   audioPlayerVariants,
   breadcrumbsVariants,
+  buildPolyhedron,
   cn,
   commonValidators,
   containerVariants2 as containerVariants,