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

@digilogiclabs/saas-factory-ui 1.33.0 → 1.34.0

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 (13) 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;
@@ -4979,9 +4987,9 @@ interface RandomPlayerPickerProps {
      * Visual intensity preset. Default "normal".
      *   - "subtle" / "normal": current behavior — shorter spins, standard
      *     ease-out curve.
-     *   - "dramatic": physics-like spin — 1.5× duration, ease-out-quart
+     *   - "dramatic": physics-like spin — 2.5× duration, inertia-style
      *     curve so motion continues through the full duration with a slow
-     *     winding-down tail, +4 extra revolutions, plus more
+     *     winding-down tail, +12 extra revolutions, plus more
      *     particles/glow/shake on reveal.
      */
     intensity?: RandomPlayerIntensity;
@@ -5066,6 +5074,40 @@ interface HeroBannerCta {
 interface HeroBannerSlide {
     /** Background image URL. */
     image?: string;
+    /**
+     * Render this slide's image as a real `<img>` (with `fetchpriority="high"`,
+     * `loading="eager"`, `decoding="async"`) instead of a CSS `background-image`.
+     *
+     * Set this on the first slide to make it a reliable LCP target. CSS
+     * backgrounds are valid LCP candidates but the browser discovers them
+     * later (after CSS parse), and `<link rel="preload">` connects to real
+     * `<img>` elements far more reliably than to `background-image` URLs.
+     *
+     * Only the slide with `priority: true` swaps to `<img>`; all other slides
+     * stay on CSS `background-image` (cheaper to cycle). The `imageFilter`,
+     * `bgColor`, overlays, and accent layers all still apply.
+     */
+    priority?: boolean;
+    /**
+     * Optional alt text for the priority `<img>`. Defaults to empty (decorative)
+     * — appropriate when the slide already carries semantic text via headline /
+     * kicker.
+     */
+    imageAlt?: string;
+    /**
+     * Optional intrinsic width of the priority image (in pixels). When set with
+     * `imageHeight`, emitted as the `<img>` `width` HTML attribute. Lets the
+     * browser compute aspect ratio for the preload connection without waiting
+     * for image headers. Has no layout effect when the parent already sizes
+     * the image via absolute positioning (the default). Ignored unless
+     * `priority` is true.
+     */
+    imageWidth?: number;
+    /**
+     * Optional intrinsic height of the priority image (in pixels). Companion
+     * to `imageWidth`. See `imageWidth` for usage notes.
+     */
+    imageHeight?: number;
     /** CSS gradient string (e.g. `"linear-gradient(135deg,#0f172a,#0f4c75)"`). */
     gradient?: string;
     /** Fallback solid background color. */

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;
@@ -4979,9 +4987,9 @@ interface RandomPlayerPickerProps {
      * Visual intensity preset. Default "normal".
      *   - "subtle" / "normal": current behavior — shorter spins, standard
      *     ease-out curve.
-     *   - "dramatic": physics-like spin — 1.5× duration, ease-out-quart
+     *   - "dramatic": physics-like spin — 2.5× duration, inertia-style
      *     curve so motion continues through the full duration with a slow
-     *     winding-down tail, +4 extra revolutions, plus more
+     *     winding-down tail, +12 extra revolutions, plus more
      *     particles/glow/shake on reveal.
      */
     intensity?: RandomPlayerIntensity;
@@ -5066,6 +5074,40 @@ interface HeroBannerCta {
 interface HeroBannerSlide {
     /** Background image URL. */
     image?: string;
+    /**
+     * Render this slide's image as a real `<img>` (with `fetchpriority="high"`,
+     * `loading="eager"`, `decoding="async"`) instead of a CSS `background-image`.
+     *
+     * Set this on the first slide to make it a reliable LCP target. CSS
+     * backgrounds are valid LCP candidates but the browser discovers them
+     * later (after CSS parse), and `<link rel="preload">` connects to real
+     * `<img>` elements far more reliably than to `background-image` URLs.
+     *
+     * Only the slide with `priority: true` swaps to `<img>`; all other slides
+     * stay on CSS `background-image` (cheaper to cycle). The `imageFilter`,
+     * `bgColor`, overlays, and accent layers all still apply.
+     */
+    priority?: boolean;
+    /**
+     * Optional alt text for the priority `<img>`. Defaults to empty (decorative)
+     * — appropriate when the slide already carries semantic text via headline /
+     * kicker.
+     */
+    imageAlt?: string;
+    /**
+     * Optional intrinsic width of the priority image (in pixels). When set with
+     * `imageHeight`, emitted as the `<img>` `width` HTML attribute. Lets the
+     * browser compute aspect ratio for the preload connection without waiting
+     * for image headers. Has no layout effect when the parent already sizes
+     * the image via absolute positioning (the default). Ignored unless
+     * `priority` is true.
+     */
+    imageWidth?: number;
+    /**
+     * Optional intrinsic height of the priority image (in pixels). Companion
+     * to `imageWidth`. See `imageWidth` for usage notes.
+     */
+    imageHeight?: number;
     /** CSS gradient string (e.g. `"linear-gradient(135deg,#0f172a,#0f4c75)"`). */
     gradient?: string;
     /** Fallback solid background color. */

package/dist/index.js CHANGED Viewed

@@ -10,8 +10,8 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+var __commonJS = (cb, mod2) => function __require() {
+  return mod2 || (0, cb[__getOwnPropNames(cb)[0]])((mod2 = { exports: {} }).exports, mod2), mod2.exports;
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -25,15 +25,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+var __toESM = (mod2, isNodeMode, target) => (target = mod2 != null ? __create(__getProtoOf(mod2)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
+  isNodeMode || !mod2 || !mod2.__esModule ? __defProp(target, "default", { value: mod2, enumerable: true }) : target,
+  mod2
 ));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 // src/config/constants.ts
@@ -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"
@@ -33324,8 +33326,8 @@ var WEDGE_PALETTE = [
   "#14b8a6",
   "#f97316"
 ];
-var DEFAULT_EASING = "cubic-bezier(0.12, 0.78, 0.22, 1)";
-var DRAMATIC_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+var DEFAULT_EASING = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+var DRAMATIC_EASING = "cubic-bezier(0.39, 0.575, 0.565, 1)";
 var INTENSITY_CONFIG = {
   subtle: {
     particles: 14,
@@ -33350,9 +33352,9 @@ var INTENSITY_CONFIG = {
     shakePeak: 10,
     glowMult: 1.45,
     pulseStroke: 8,
-    durationMult: 1.5,
+    durationMult: 2.5,
     easing: DRAMATIC_EASING,
-    revsBoost: 4
+    revsBoost: 12
   }
 };
 function polar(cx, cy, r, a) {
@@ -33378,6 +33380,20 @@ function weightedIndex(pool) {
   }
   return pool.length - 1;
 }
+function mod(value, divisor) {
+  return (value % divisor + divisor) % divisor;
+}
+function wheelIndexAtPointer(rotation, count2) {
+  if (count2 < 1) return -1;
+  const wedgeDeg = 360 / count2;
+  const localDegAtPointer = mod(-rotation, 360);
+  return Math.min(count2 - 1, Math.floor(localDegAtPointer / wedgeDeg));
+}
+function reelIndexAtCenter(reelY, centerOffsetPx, rowHeight, count2) {
+  if (count2 < 1) return -1;
+  const centerRow = Math.round((reelY + centerOffsetPx) / rowHeight);
+  return mod(centerRow, count2);
+}
 function ReelStage({
   pool,
   winner,
@@ -33805,7 +33821,9 @@ function RandomPlayerPicker({
     const winnerIdx = weightedIndex(pool);
     const minRev = minRevolutions + intensityCfg.revsBoost;
     const maxRev = maxRevolutions + intensityCfg.revsBoost;
-    const revolutions = minRev + Math.random() * (maxRev - minRev);
+    const minFullRevs = Math.ceil(minRev);
+    const maxFullRevs = Math.max(minFullRevs, Math.floor(maxRev));
+    const revolutions = minFullRevs + Math.floor(Math.random() * (maxFullRevs - minFullRevs + 1));
     const wedgeMidRad = winnerIdx * anglePerWedge + anglePerWedge / 2;
     const wedgeMidDeg = wedgeMidRad * 180 / Math.PI;
     const wheelWobble = (Math.random() - 0.5) * (anglePerWedge * 180 / Math.PI) * 0.6;
@@ -33819,10 +33837,12 @@ function RandomPlayerPicker({
     const currentCenterRow = Math.round(
       (reelY + centerOffsetPx) / reelRowHeight
     );
-    const currentCenterMod = (currentCenterRow % n + n) % n;
+    const currentCenterMod = mod(currentCenterRow, n);
     const targetRowOffset = (winnerIdx - currentCenterMod + n) % n;
     const reelRevRows = Math.round(revolutions * n);
     const finalReelY = reelY + (reelRevRows + targetRowOffset) * reelRowHeight;
+    const settledWinnerIdx = mode === "reel" ? reelIndexAtCenter(finalReelY, centerOffsetPx, reelRowHeight, n) : wheelIndexAtPointer(finalRotation, n);
+    const finalWinnerIdx = settledWinnerIdx >= 0 && settledWinnerIdx < pool.length ? settledWinnerIdx : winnerIdx;
     const effectiveDuration = reducedMotion ? 250 : Math.round(spinDuration * intensityCfg.durationMult);
     setSpinning(true);
     setWinner(null);
@@ -33867,7 +33887,7 @@ function RandomPlayerPicker({
       schedule();
     }
     winnerTimer.current = setTimeout(() => {
-      const picked = pool[winnerIdx];
+      const picked = pool[finalWinnerIdx];
       if (!picked) {
         setSpinning(false);
         return;
@@ -33914,7 +33934,7 @@ function RandomPlayerPicker({
       }
       if (removeWinners) {
         popTimer.current = setTimeout(() => {
-          setPool((p) => p.filter((_, i) => i !== winnerIdx));
+          setPool((p) => p.filter((_, i) => i !== finalWinnerIdx));
           setWinner(null);
           setRotation(0);
           setReelY(0);
@@ -35059,23 +35079,46 @@ function DynamicHeroBanner({
           const filter = IMAGE_FILTERS[slide.imageFilter ?? imageFilter] ?? IMAGE_FILTERS.cinematic;
           const slideOverlayOpacity = slide.overlayOpacity ?? overlayOpacity;
           const slideAlign = slide.textAlign ?? textAlign;
+          const usePriorityImg = slide.priority === true && !!slide.image;
+          const bgDivStyle = usePriorityImg ? {
+            position: "absolute",
+            inset: 0,
+            backgroundColor: slide.bgColor ?? "#0c0e14",
+            transform: isCurrent ? "scale(1)" : "scale(1.06)",
+            transition: reducedMotion ? "none" : `transform ${autoPlayInterval}ms linear`
+          } : {
+            position: "absolute",
+            inset: 0,
+            backgroundImage: slide.image ? `url(${slide.image})` : slide.gradient ?? "none",
+            backgroundColor: slide.bgColor ?? "#0c0e14",
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            filter,
+            transform: isCurrent ? "scale(1)" : "scale(1.06)",
+            transition: reducedMotion ? "none" : `transform ${autoPlayInterval}ms linear`
+          };
           return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { style: bgStyle(i), "aria-hidden": !isCurrent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { style: bgDivStyle, children: usePriorityImg && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+              "img",
               {
+                src: slide.image,
+                alt: slide.imageAlt ?? "",
+                width: slide.imageWidth && slide.imageHeight ? slide.imageWidth : void 0,
+                height: slide.imageWidth && slide.imageHeight ? slide.imageHeight : void 0,
+                fetchPriority: "high",
+                loading: "eager",
+                decoding: "async",
                 style: {
                   position: "absolute",
                   inset: 0,
-                  backgroundImage: slide.image ? `url(${slide.image})` : slide.gradient ?? "none",
-                  backgroundColor: slide.bgColor ?? "#0c0e14",
-                  backgroundSize: "cover",
-                  backgroundPosition: "center",
-                  filter,
-                  transform: isCurrent ? "scale(1)" : "scale(1.06)",
-                  transition: reducedMotion ? "none" : `transform ${autoPlayInterval}ms linear`
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  objectPosition: "center",
+                  filter
                 }
               }
-            ),
+            ) }),
             /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
               "div",
               {
@@ -35475,7 +35518,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",