@digilogiclabs/saas-factory-ui 1.33.2 → 1.34.0

package/dist/index.d.mts

@@ -4987,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;
@@ -5074,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

@@ -4987,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;
@@ -5074,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

@@ -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
@@ -33326,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,
@@ -33352,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) {
@@ -33380,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,
@@ -33807,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;
@@ -33821,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);
@@ -33869,7 +33887,7 @@ function RandomPlayerPicker({
       schedule();
     }
     winnerTimer.current = setTimeout(() => {
-      const picked = pool[winnerIdx];
+      const picked = pool[finalWinnerIdx];
       if (!picked) {
         setSpinning(false);
         return;
@@ -33916,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);
@@ -35061,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",
               {