@digilogiclabs/saas-factory-ui 2.1.0 → 2.3.0

package/dist/web/index.js

@@ -264,6 +264,7 @@ __export(index_exports, {
   CommentSystem: () => CommentSystem,
   Container: () => Container,
   ConversionKPI: () => ConversionKPI,
+  D6_FACE_PLACEMENTS: () => D6_FACE_PLACEMENTS,
   DashboardGrid: () => DashboardGrid,
   DashboardLayout: () => DashboardLayout,
   DashboardWidget: () => DashboardWidget,
@@ -504,6 +505,7 @@ __export(index_exports, {
   createFormStore: () => createFormStore,
   createOptimizedStore: () => createOptimizedStore,
   cssAnimations: () => cssAnimations,
+  d6LandingRotation: () => d6LandingRotation,
   dailyTrendingConfig: () => dailyTrendingConfig,
   detectAuthProvider: () => detectAuthProvider,
   detectDelimiter: () => detectDelimiter,
@@ -30359,14 +30361,35 @@ var PIP_POS = {
     [75, 75]
   ]
 };
-var SHOW_ROT = {
+var D6_FACE_PLACEMENTS = {
   1: { x: 0, y: 0 },
-  2: { x: 0, y: 180 },
-  3: { x: 0, y: -90 },
-  4: { x: 0, y: 90 },
-  5: { x: -90, y: 0 },
-  6: { x: 90, y: 0 }
+  2: { x: 0, y: 90 },
+  3: { x: 90, y: 0 },
+  4: { x: -90, y: 0 },
+  5: { x: 0, y: -90 },
+  6: { x: 0, y: 180 }
 };
+function d6LandingRotation(value) {
+  const p = D6_FACE_PLACEMENTS[value];
+  return {
+    x: Math.abs(p.x) === 180 ? 180 : -p.x || 0,
+    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
+  }
+};
+function formatDieValue(v, sides) {
+  return sides > 8 && (v === 6 || v === 9) ? `${v}.` : String(v);
+}
 var MAX_COUNT = 6;
 var TUMBLE_MS = 950;
 var SETTLE_MS = 1100;
@@ -30518,6 +30541,7 @@ function Face({ value, pipColor, pipShadow, pipDiameter }) {
 }
 function DiceRoller({
   count: count2 = 2,
+  sides = 6,
   theme: theme5 = "red",
   darkMode,
   size = 80,
@@ -30546,6 +30570,7 @@ function DiceRoller({
   const dieWrapperRefs = (0, import_react70.useRef)([]);
   const cubeRefs = (0, import_react70.useRef)([]);
   const shadowRefs = (0, import_react70.useRef)([]);
+  const numeralRefs = (0, import_react70.useRef)([]);
   const currentPositionsRef = (0, import_react70.useRef)(null);
   const rollingRef = (0, import_react70.useRef)(false);
   const dieSetters = (0, import_react70.useRef)([]);
@@ -30575,6 +30600,15 @@ function DiceRoller({
     }
     return shadowSetters.current[i];
   };
+  const numeralSetters = (0, import_react70.useRef)([]);
+  const getNumeralSetter = (i) => {
+    if (!numeralSetters.current[i]) {
+      numeralSetters.current[i] = (el) => {
+        numeralRefs.current[i] = el;
+      };
+    }
+    return numeralSetters.current[i];
+  };
   const timersRef = (0, import_react70.useRef)([]);
   const rafHandleRef = (0, import_react70.useRef)(null);
   const arenaRef = (0, import_react70.useRef)(null);
@@ -30627,15 +30661,15 @@ function DiceRoller({
   const pipDiameter = Math.round(effectiveSize * 0.2);
   const faceRadius = Math.round(effectiveSize * 0.07);
   const arenaHeight = arenaHeightProp ?? Math.max(effectiveSize * 3, 200);
-  const faceTransforms = (0, import_react70.useMemo)(
-    () => [
-      `translateZ(${half}px)`,
-      `rotateY(180deg) translateZ(${half}px)`,
-      `rotateY(-90deg) translateZ(${half}px)`,
-      `rotateY(90deg) translateZ(${half}px)`,
-      `rotateX(90deg) translateZ(${half}px)`,
-      `rotateX(-90deg) translateZ(${half}px)`
-    ],
+  const faceTransformFor = (0, import_react70.useCallback)(
+    (value) => {
+      const p = D6_FACE_PLACEMENTS[value];
+      const parts = [];
+      if (p.x !== 0) parts.push(`rotateX(${p.x}deg)`);
+      if (p.y !== 0) parts.push(`rotateY(${p.y}deg)`);
+      parts.push(`translateZ(${half}px)`);
+      return parts.join(" ");
+    },
     [half]
   );
   const defaultPositions = (0, import_react70.useCallback)(
@@ -30657,11 +30691,11 @@ function DiceRoller({
     [half]
   );
   const writeCubeRotation = (0, import_react70.useCallback)(
-    (i, rx, ry, rz, withTransition) => {
+    (i, rx, ry, rz, withTransition, tiltZ = 0) => {
       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)`;
+      el.style.transform = `${tiltZ ? `rotateZ(${tiltZ}deg) ` : ""}rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;
     },
     []
   );
@@ -30691,19 +30725,23 @@ function DiceRoller({
     setResults(null);
   }, [
     clampedCount,
+    sides,
     effectiveSize,
     arena.w,
     arenaHeight,
     defaultPositions,
     half
   ]);
+  (0, import_react70.useEffect)(() => {
+    setHistory([]);
+  }, [sides]);
   const roll = (0, import_react70.useCallback)(() => {
     if (rollingRef.current) return;
     rollingRef.current = true;
     setRolling(true);
     const vals = Array.from(
       { length: clampedCount },
-      () => Math.floor(Math.random() * 6) + 1
+      () => Math.floor(Math.random() * sides) + 1
     );
     timersRef.current.forEach((t) => clearTimeout(t));
     timersRef.current = [];
@@ -30718,13 +30756,17 @@ function DiceRoller({
     const starts = currentPositionsRef.current ?? defaultPositions(w, h, clampedCount);
     const frames = simulateDice(w, h, effectiveSize, starts, clampedCount);
     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
-      );
+      if (sides === 6) {
+        writeCubeRotation(
+          i,
+          (Math.random() - 0.5) * 720,
+          (Math.random() - 0.5) * 720,
+          (Math.random() - 0.5) * 720,
+          false
+        );
+      } else {
+        writeCubeRotation(i, 0, 0, (Math.random() - 0.5) * 720, false);
+      }
       const el = dieWrapperRefs.current[i];
       if (el) el.style.transition = "none";
       const shadow = shadowRefs.current[i];
@@ -30757,18 +30799,47 @@ function DiceRoller({
       }, capturedStep * stepMs);
       timersRef.current.push(timer);
     }
+    if (sides !== 6) {
+      const flickerTicks = 8;
+      const flickerStep = Math.max(60, Math.floor(TUMBLE_MS / flickerTicks));
+      for (let f = 1; f <= flickerTicks; f++) {
+        const t = setTimeout(() => {
+          for (let i = 0; i < clampedCount; i++) {
+            const el = numeralRefs.current[i];
+            if (el)
+              el.textContent = formatDieValue(
+                Math.floor(Math.random() * sides) + 1,
+                sides
+              );
+          }
+        }, f * flickerStep);
+        timersRef.current.push(t);
+      }
+    }
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         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 tilt = (Math.random() - 0.5) * 18;
+          if (sides === 6) {
+            const tgt = d6LandingRotation(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, tilt);
+          } else {
+            const lz = (Math.random() > 0.5 ? 1 : -1) * 720 + tilt;
+            writeCubeRotation(i, 0, 0, lz, true);
+          }
         }
       });
     });
     const settleTimer = setTimeout(() => {
+      if (sides !== 6) {
+        for (let i = 0; i < clampedCount; i++) {
+          const el = numeralRefs.current[i];
+          if (el) el.textContent = formatDieValue(vals[i], sides);
+        }
+      }
       setResults(vals);
       setRolling(false);
       rollingRef.current = false;
@@ -30781,6 +30852,7 @@ function DiceRoller({
     timersRef.current.push(settleTimer);
   }, [
     clampedCount,
+    sides,
     defaultPositions,
     effectiveSize,
     half,
@@ -30826,7 +30898,7 @@ function DiceRoller({
           {
             ref: arenaRef,
             role: "img",
-            "aria-label": ariaLabel ?? `${clampedCount} dice`,
+            "aria-label": ariaLabel ?? `${clampedCount} ${sides === 6 ? "dice" : `${sides}-sided dice`}`,
             "aria-live": "polite",
             style: {
               position: "relative",
@@ -30889,7 +30961,7 @@ function DiceRoller({
                       transformStyle: "preserve-3d",
                       willChange: "transform"
                     },
-                    children: [1, 2, 3, 4, 5, 6].map((val, fi) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                    children: sides === 6 ? [1, 2, 3, 4, 5, 6].map((val) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                       "div",
                       {
                         style: {
@@ -30899,7 +30971,7 @@ function DiceRoller({
                           background: colors.face,
                           border: `1px solid ${colors.faceBorder}`,
                           borderRadius: faceRadius,
-                          transform: faceTransforms[fi],
+                          transform: faceTransformFor(val),
                           transition: "background 0.3s, border-color 0.3s"
                         },
                         children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
@@ -30913,7 +30985,64 @@ function DiceRoller({
                         )
                       },
                       val
-                    ))
+                    )) : (() => {
+                      const shape = POLY_SHAPES[sides];
+                      const shown = results?.[d] ?? sides;
+                      return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+                        "svg",
+                        {
+                          viewBox: "0 0 100 100",
+                          width: "100%",
+                          height: "100%",
+                          style: { display: "block", overflow: "visible" },
+                          "aria-hidden": "true",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                              "polygon",
+                              {
+                                points: shape.points,
+                                fill: colors.face,
+                                stroke: colors.faceBorder,
+                                strokeWidth: 2.5,
+                                strokeLinejoin: "round",
+                                style: { transition: "fill 0.3s, stroke 0.3s" }
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                              "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__ */ (0, import_jsx_runtime113.jsx)(
+                              "text",
+                              {
+                                ref: getNumeralSetter(d),
+                                x: 50,
+                                y: shape.textY,
+                                textAnchor: "middle",
+                                dominantBaseline: "central",
+                                fontSize: 100 * shape.fontScale,
+                                fontWeight: 800,
+                                fill: colors.pip,
+                                style: {
+                                  fontVariantNumeric: "tabular-nums",
+                                  transition: "fill 0.3s",
+                                  userSelect: "none"
+                                },
+                                children: formatDieValue(shown, sides)
+                              }
+                            )
+                          ]
+                        }
+                      );
+                    })()
                   }
                 )
               ] }, d);
@@ -40298,6 +40427,27 @@ function generateSchedule(teams, roundLabel) {
   }
   return rounds;
 }
+function hydrateResumeRounds(resume, teams) {
+  if (!resume?.length || teams.length < 2) return [];
+  const expected = teams.length % 2 === 0 ? teams.length - 1 : teams.length;
+  if (resume.length !== expected) return [];
+  const roster = new Set(teams.map((t) => t.toLowerCase()));
+  for (const round of resume) {
+    for (const m of round.matchups) {
+      for (const side of [m.home, m.away]) {
+        if (side !== BYE_TOKEN && !roster.has(side.toLowerCase())) return [];
+      }
+    }
+  }
+  return resume.map((round) => ({
+    label: round.label,
+    matchups: round.matchups.map((m) => ({
+      home: m.home,
+      away: m.away,
+      isBye: m.home === BYE_TOKEN || m.away === BYE_TOKEN
+    }))
+  }));
+}
 var DEFAULT_LABELS4 = {
   inputPlaceholder: "Team or player name (comma-separated for batch)",
   addButton: "Add",
@@ -40318,6 +40468,7 @@ function RoundRobinScheduler({
   darkMode,
   minTeams = 3,
   defaultTeams = [],
+  resumeRounds,
   onTeamsChange,
   onGenerate,
   labels,
@@ -40331,7 +40482,9 @@ function RoundRobinScheduler({
   const L = { ...DEFAULT_LABELS4, ...labels };
   const [teams, setTeams] = (0, import_react79.useState)(defaultTeams);
   const [input, setInput] = (0, import_react79.useState)("");
-  const [rounds, setRounds] = (0, import_react79.useState)([]);
+  const [rounds, setRounds] = (0, import_react79.useState)(
+    () => hydrateResumeRounds(resumeRounds, defaultTeams)
+  );
   const inputRef = (0, import_react79.useRef)(null);
   (0, import_react79.useEffect)(() => {
     onTeamsChange?.(teams);
@@ -40852,6 +41005,8 @@ function Scoreboard({
   maxTeams = 8,
   scoreButtons = [-1, 1, 5, 10],
   defaultTeams,
+  initialRound = 1,
+  initialHistory,
   onTeamsChange,
   onRoundAdvance,
   onNewGame,
@@ -40867,8 +41022,12 @@ function Scoreboard({
   const [teams, setTeams] = (0, import_react80.useState)(
     () => defaultTeams && defaultTeams.length >= minTeams ? defaultTeams.slice(0, maxTeams) : createDefaultTeams(seedCount, L.teamNamePrefix)
   );
-  const [round, setRound] = (0, import_react80.useState)(1);
-  const [history, setHistory] = (0, import_react80.useState)([]);
+  const [round, setRound] = (0, import_react80.useState)(
+    () => Number.isFinite(initialRound) ? Math.max(1, Math.floor(initialRound)) : 1
+  );
+  const [history, setHistory] = (0, import_react80.useState)(
+    () => initialHistory && initialHistory.length > 0 ? initialHistory.slice() : []
+  );
   const [historyOpen, setHistoryOpen] = (0, import_react80.useState)(false);
   const rootRef = (0, import_react80.useRef)(null);
   const [containerWidth, setContainerWidth] = (0, import_react80.useState)(0);