npm - @digilogiclabs/saas-factory-ui - Versions diffs - 1.33.0 → 1.33.2 - Mend

@digilogiclabs/saas-factory-ui 1.33.0 → 1.33.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -3759,8 +3759,16 @@ declare function useEscapeKey(handler: () => void, enabled?: boolean): void;
  *   3. `prefers-color-scheme: dark` media query.
  *
  * Live-updates via a `MutationObserver` watching the root class attribute
- * and a `change` listener on the media query. Safe for SSR — returns
- * `false` when `document` is undefined.
+ * and a `change` listener on the media query.
+ *
+ * SSR-safe by construction: the FIRST render always returns `false` (or the
+ * `forced` value when provided), matching what the server renders. Detection
+ * only runs after mount in `useEffect`, so the initial client render is
+ * byte-identical to SSR — no hydration mismatch warnings. The trade-off is
+ * a brief flash of light-theme markup before the effect commits the real
+ * value; a no-flash app should also set `.dark` on `<html>` via a synchronous
+ * script tag in the document head before React hydrates (next-themes does
+ * this), in which case this hook then picks up that class on mount.
  */
 declare function useDarkMode(forced?: boolean): boolean;

package/dist/index.d.ts CHANGED Viewed

@@ -3759,8 +3759,16 @@ declare function useEscapeKey(handler: () => void, enabled?: boolean): void;
  *   3. `prefers-color-scheme: dark` media query.
  *
  * Live-updates via a `MutationObserver` watching the root class attribute
- * and a `change` listener on the media query. Safe for SSR — returns
- * `false` when `document` is undefined.
+ * and a `change` listener on the media query.
+ *
+ * SSR-safe by construction: the FIRST render always returns `false` (or the
+ * `forced` value when provided), matching what the server renders. Detection
+ * only runs after mount in `useEffect`, so the initial client render is
+ * byte-identical to SSR — no hydration mismatch warnings. The trade-off is
+ * a brief flash of light-theme markup before the effect commits the real
+ * value; a no-flash app should also set `.dark` on `<html>` via a synchronous
+ * script tag in the document head before React hydrates (next-themes does
+ * this), in which case this hook then picks up that class on mount.
  */
 declare function useDarkMode(forced?: boolean): boolean;

package/dist/index.js CHANGED Viewed

@@ -25443,11 +25443,6 @@ var import_react55 = require("react");
 function useDarkMode(forced) {
   const [dark, setDark] = (0, import_react55.useState)(() => {
     if (typeof forced === "boolean") return forced;
-    if (typeof document === "undefined") return false;
-    if (document.documentElement.classList.contains("dark")) return true;
-    if (typeof window !== "undefined" && window.matchMedia) {
-      return window.matchMedia("(prefers-color-scheme: dark)").matches;
-    }
     return false;
   });
   (0, import_react55.useEffect)(() => {
@@ -31768,8 +31763,7 @@ function BracketGenerator({
       champion: null
     };
     setBracketState(newState);
-    onStateChange?.(newState);
-  }, [effectiveParticipants, seedingStrategy, onStateChange]);
+  }, [effectiveParticipants, seedingStrategy]);
   const simulateNext = (0, import_react69.useCallback)(() => {
     setBracketState((prev) => {
       const next = prev.matches.find((m) => m.a && m.b && !m.winner);
@@ -31782,13 +31776,9 @@ function BracketGenerator({
       matches = propagateWinner(matches, completed);
       const finalMatch = matches.find((m) => m.round === prev.rounds - 1);
       const champion = finalMatch?.winner || null;
-      onMatchComplete?.(completed, completed.winner);
-      if (champion && !prev.champion) onChampion?.(champion);
-      const newState = { ...prev, matches, champion };
-      onStateChange?.(newState);
-      return newState;
+      return { ...prev, matches, champion };
     });
-  }, [onMatchComplete, onChampion, onStateChange]);
+  }, []);
   const autoPlay = (0, import_react69.useCallback)(() => {
     if (simulating) {
       if (autoRef.current) clearTimeout(autoRef.current);
@@ -31811,17 +31801,13 @@ function BracketGenerator({
         matches = propagateWinner(matches, completed);
         const finalMatch = matches.find((m) => m.round === prev.rounds - 1);
         const champion = finalMatch?.winner || null;
-        onMatchComplete?.(completed, completed.winner);
-        if (champion && !prev.champion) onChampion?.(champion);
-        const newState = { ...prev, matches, champion };
-        onStateChange?.(newState);
         if (!champion) autoRef.current = setTimeout(tick, simulateDelayMs);
         else setSimulating(false);
-        return newState;
+        return { ...prev, matches, champion };
       });
     };
     tick();
-  }, [simulating, simulateDelayMs, onMatchComplete, onChampion, onStateChange]);
+  }, [simulating, simulateDelayMs]);
   const advanceWinner = (0, import_react69.useCallback)(
     (matchId, winnerSlot) => {
       setBracketState((prev) => {
@@ -31840,15 +31826,31 @@ function BracketGenerator({
         matches = propagateWinner(matches, completed);
         const finalMatch = matches.find((x) => x.round === prev.rounds - 1);
         const champion = finalMatch?.winner || null;
-        onMatchComplete?.(completed, winner);
-        if (champion && !prev.champion) onChampion?.(champion);
-        const newState = { ...prev, matches, champion };
-        onStateChange?.(newState);
-        return newState;
+        return { ...prev, matches, champion };
       });
     },
-    [onMatchComplete, onChampion, onStateChange]
+    []
   );
+  const prevBracketStateRef = (0, import_react69.useRef)(bracketState);
+  (0, import_react69.useEffect)(() => {
+    const prev = prevBracketStateRef.current;
+    const next = bracketState;
+    if (prev === next) return;
+    if (onMatchComplete) {
+      const prevById = new Map(prev.matches.map((m) => [m.id, m]));
+      for (const m of next.matches) {
+        const before = prevById.get(m.id);
+        if (m.winner && !before?.winner) {
+          onMatchComplete(m, m.winner);
+        }
+      }
+    }
+    if (onChampion && next.champion && !prev.champion) {
+      onChampion(next.champion);
+    }
+    onStateChange?.(next);
+    prevBracketStateRef.current = next;
+  }, [bracketState, onMatchComplete, onChampion, onStateChange]);
   (0, import_react69.useEffect)(() => {
     seedBracket();
     return () => {
@@ -31940,7 +31942,7 @@ function BracketGenerator({
                 height: MATCH_H / 2,
                 cursor: hasBoth && !m.winner ? "pointer" : "default",
                 opacity: isLoss ? 0.45 : 1,
-                textDecoration: isLoss ? "line-through" : "none",
+                textDecorationLine: isLoss ? "line-through" : "none",
                 textDecorationColor: colors.faint,
                 transition: "background 0.2s, color 0.2s",
                 fontStyle: !p ? "italic" : "normal"
@@ -35475,7 +35477,7 @@ function CtaButton({
     background: isPrimary ? accent : isGhost ? "transparent" : "rgba(255,255,255,0.06)",
     color: isPrimary ? "#fff" : "rgba(255,255,255,0.8)",
     cursor: "pointer",
-    textDecoration: isGhost ? "underline" : "none",
+    textDecorationLine: isGhost ? "underline" : "none",
     textUnderlineOffset: isGhost ? 4 : void 0,
     letterSpacing: "-0.01em",
     boxShadow: isPrimary ? `0 4px 20px ${glow}33` : "none",