@digilogiclabs/saas-factory-ui 1.26.0 → 1.27.0

package/dist/index.d.mts

@@ -3609,6 +3609,22 @@ declare function useOptimizedMemo<T>(factory: () => T, deps: React.DependencyLis
 
 declare function useLockBody(): void;
 
+/**
+ * Tracks a CSS media query.
+ *
+ * Always returns `false` on the server and on the client's first
+ * render so SSR markup matches the hydrated DOM — reading
+ * `window.matchMedia` during useState init caused React #418 in
+ * consumers that branched rendered markup on the result (e.g. a
+ * mobile-vs-desktop layout switch) because the server always
+ * rendered `false` while clients matching the query rendered
+ * `true`. The actual value is read in `useEffect` after commit
+ * and kept in sync via a `matchMedia` change listener.
+ *
+ * The trade-off is one extra render on the client before the
+ * correct value applies — acceptable because the correct markup
+ * is an enhancement, not the initial content.
+ */
 declare function useMediaQuery(query: string): boolean;
 
 interface IntersectionObserverOptions {
@@ -3751,10 +3767,19 @@ declare function useDarkMode(forced?: boolean): boolean;
  * Returns `true` when the user has requested reduced motion via
  * `prefers-reduced-motion: reduce`.
  *
- * Reads the media query synchronously during state init so the
- * first render already honors the preference — no flash of full
- * motion on first paint. Re-subscribes to changes via `matchMedia`
- * listener. SSR-safe (returns `false` when `window` is undefined).
+ * Always returns `false` on the server and on the client's first
+ * render so that SSR markup and the hydrated DOM match — reading
+ * `window.matchMedia` during useState init caused React #418 in
+ * consumers that rendered the value into inline style attributes
+ * (e.g. DynamicHeroBanner's `transition`) because the server
+ * rendered `false` while clients with the preference rendered
+ * `true`. The actual preference is read in `useEffect` after the
+ * initial commit and via a `matchMedia` change listener.
+ *
+ * The trade-off is one extra render/paint before the preference
+ * takes effect — acceptable because reduced-motion is an
+ * accessibility preference about the *next* animation, not a
+ * hard visual flash.
  */
 declare function usePrefersReducedMotion(): boolean;
 

package/dist/index.d.ts

@@ -3609,6 +3609,22 @@ declare function useOptimizedMemo<T>(factory: () => T, deps: React.DependencyLis
 
 declare function useLockBody(): void;
 
+/**
+ * Tracks a CSS media query.
+ *
+ * Always returns `false` on the server and on the client's first
+ * render so SSR markup matches the hydrated DOM — reading
+ * `window.matchMedia` during useState init caused React #418 in
+ * consumers that branched rendered markup on the result (e.g. a
+ * mobile-vs-desktop layout switch) because the server always
+ * rendered `false` while clients matching the query rendered
+ * `true`. The actual value is read in `useEffect` after commit
+ * and kept in sync via a `matchMedia` change listener.
+ *
+ * The trade-off is one extra render on the client before the
+ * correct value applies — acceptable because the correct markup
+ * is an enhancement, not the initial content.
+ */
 declare function useMediaQuery(query: string): boolean;
 
 interface IntersectionObserverOptions {
@@ -3751,10 +3767,19 @@ declare function useDarkMode(forced?: boolean): boolean;
  * Returns `true` when the user has requested reduced motion via
  * `prefers-reduced-motion: reduce`.
  *
- * Reads the media query synchronously during state init so the
- * first render already honors the preference — no flash of full
- * motion on first paint. Re-subscribes to changes via `matchMedia`
- * listener. SSR-safe (returns `false` when `window` is undefined).
+ * Always returns `false` on the server and on the client's first
+ * render so that SSR markup and the hydrated DOM match — reading
+ * `window.matchMedia` during useState init caused React #418 in
+ * consumers that rendered the value into inline style attributes
+ * (e.g. DynamicHeroBanner's `transition`) because the server
+ * rendered `false` while clients with the preference rendered
+ * `true`. The actual preference is read in `useEffect` after the
+ * initial commit and via a `matchMedia` change listener.
+ *
+ * The trade-off is one extra render/paint before the preference
+ * takes effect — acceptable because reduced-motion is an
+ * accessibility preference about the *next* animation, not a
+ * hard visual flash.
  */
 declare function usePrefersReducedMotion(): boolean;
 

package/dist/index.js

@@ -25018,22 +25018,15 @@ function useLockBody() {
 // src/hooks/web/use-media-query.ts
 var import_react50 = require("react");
 function useMediaQuery(query) {
-  const [matches, setMatches] = (0, import_react50.useState)(() => {
-    if (typeof window !== "undefined") {
-      return window.matchMedia(query).matches;
-    }
-    return false;
-  });
+  const [matches, setMatches] = (0, import_react50.useState)(false);
   (0, import_react50.useEffect)(() => {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined" || !window.matchMedia) return;
     const media = window.matchMedia(query);
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
+    setMatches(media.matches);
     const listener = () => setMatches(media.matches);
     media.addEventListener("change", listener);
     return () => media.removeEventListener("change", listener);
-  }, [matches, query]);
+  }, [query]);
   return matches;
 }
 
@@ -25493,13 +25486,11 @@ function useDarkMode(forced) {
 // src/hooks/web/use-prefers-reduced-motion.ts
 var import_react56 = require("react");
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = (0, import_react56.useState)(() => {
-    if (typeof window === "undefined" || !window.matchMedia) return false;
-    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  });
+  const [reduced, setReduced] = (0, import_react56.useState)(false);
   (0, import_react56.useEffect)(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
     const read = () => setReduced(mq.matches);
     mq.addEventListener("change", read);
     return () => mq.removeEventListener("change", read);
@@ -34375,9 +34366,21 @@ var TRANSITIONS = {
   }
 };
 var STAT_SIZES = {
-  sm: { value: "clamp(18px,2.5vw,26px)", label: "clamp(9px,1vw,11px)", divider: 24 },
-  md: { value: "clamp(22px,3.5vw,36px)", label: "clamp(10px,1.2vw,13px)", divider: 32 },
-  lg: { value: "clamp(28px,4.5vw,48px)", label: "clamp(11px,1.3vw,14px)", divider: 40 }
+  sm: {
+    value: "clamp(18px,2.5vw,26px)",
+    label: "clamp(9px,1vw,11px)",
+    divider: 24
+  },
+  md: {
+    value: "clamp(22px,3.5vw,36px)",
+    label: "clamp(10px,1.2vw,13px)",
+    divider: 32
+  },
+  lg: {
+    value: "clamp(28px,4.5vw,48px)",
+    label: "clamp(11px,1.3vw,14px)",
+    divider: 40
+  }
 };
 var STAT_BG = {
   glass: {
@@ -34754,9 +34757,7 @@ function DynamicHeroBanner({
     [current, slideCount, goTo]
   );
   const prev = (0, import_react72.useCallback)(
-    () => goTo(
-      (current - 1 + Math.max(slideCount, 1)) % Math.max(slideCount, 1)
-    ),
+    () => goTo((current - 1 + Math.max(slideCount, 1)) % Math.max(slideCount, 1)),
     [current, slideCount, goTo]
   );
   (0, import_react72.useEffect)(() => {
@@ -34841,12 +34842,26 @@ function DynamicHeroBanner({
         overflow: "hidden",
         background: backgroundColor,
         fontFamily: bodyFontFamily,
+        // Expose accent/glow as CSS custom properties so hover rules in the
+        // injected `<style>` block can reference them without prop drilling.
+        ["--dll-hero-accent"]: resolvedTheme.accent,
+        ["--dll-hero-glow"]: resolvedTheme.glow,
         ...style
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("style", { children: `${loadGoogleFonts ? `@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');` : ""}
 @keyframes dllHeroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
-@media(prefers-reduced-motion:reduce){.dll-hero-banner *{animation-duration:.01ms!important;transition-duration:.01ms!important}}` }),
+.dll-hero-cta{transition:transform .25s cubic-bezier(.2,.8,.3,1),background-color .25s,box-shadow .25s,color .25s,border-color .25s,filter .25s}
+.dll-hero-cta:hover{transform:translateY(-2px)}
+.dll-hero-cta:focus-visible{outline:2px solid var(--dll-hero-accent,#fff);outline-offset:3px}
+.dll-hero-cta--primary:hover{filter:brightness(1.08);box-shadow:0 10px 32px color-mix(in srgb, var(--dll-hero-glow, #3b82f6) 40%, transparent)}
+.dll-hero-cta--secondary:hover{background:rgba(255,255,255,0.12)!important;border-color:rgba(255,255,255,0.38)!important;color:#fff!important}
+.dll-hero-cta--ghost:hover{color:var(--dll-hero-accent,#fff)!important}
+.dll-hero-dot{transition:all .35s}
+.dll-hero-dot:hover{background:rgba(255,255,255,0.55)!important;transform:scaleY(1.15)}
+.dll-hero-arrow{transition:opacity .25s,background-color .25s,transform .25s}
+.dll-hero-arrow:hover{background:rgba(255,255,255,0.16)!important;transform:translateY(-50%) scale(1.06)}
+@media(prefers-reduced-motion:reduce){.dll-hero-cta:hover,.dll-hero-dot:hover,.dll-hero-arrow:hover{transform:none!important}}` }),
         slides.map((slide, i) => {
           const isCurrent = i === current;
           const filter = IMAGE_FILTERS[slide.imageFilter ?? imageFilter] ?? IMAGE_FILTERS.cinematic;
@@ -35113,6 +35128,7 @@ function DynamicHeroBanner({
               type: "button",
               onClick: prev,
               "aria-label": "Previous slide",
+              className: "dll-hero-arrow",
               style: {
                 position: "absolute",
                 top: "50%",
@@ -35144,6 +35160,7 @@ function DynamicHeroBanner({
               type: "button",
               onClick: next,
               "aria-label": "Next slide",
+              className: "dll-hero-arrow",
               style: {
                 position: "absolute",
                 top: "50%",
@@ -35192,6 +35209,7 @@ function DynamicHeroBanner({
                 "aria-selected": i === current,
                 "aria-label": `Go to slide ${i + 1}`,
                 onClick: () => goTo(i),
+                className: "dll-hero-dot",
                 style: {
                   width: i === current ? 28 : 10,
                   height: 10,
@@ -35199,7 +35217,6 @@ function DynamicHeroBanner({
                   border: "none",
                   background: i === current ? resolvedTheme.accent : "rgba(255,255,255,0.25)",
                   cursor: "pointer",
-                  transition: "all 0.35s",
                   padding: 0
                 }
               },
@@ -35250,6 +35267,7 @@ function CtaButton({
   const variant = cta.variant ?? (index === 0 ? "primary" : "secondary");
   const isPrimary = variant === "primary";
   const isGhost = variant === "ghost";
+  const ctaClass = `dll-hero-cta dll-hero-cta--${variant}`;
   const buttonStyle = {
     fontFamily: bodyFont,
     fontSize: "clamp(13px,1.2vw,15px)",
@@ -35263,7 +35281,6 @@ function CtaButton({
     textDecoration: isGhost ? "underline" : "none",
     textUnderlineOffset: isGhost ? 4 : void 0,
     letterSpacing: "-0.01em",
-    transition: "all 0.25s",
     boxShadow: isPrimary ? `0 4px 20px ${glow}33` : "none",
     display: "inline-flex",
     alignItems: "center",
@@ -35288,6 +35305,7 @@ function CtaButton({
         href: cta.href,
         onClick: cta.onClick,
         "aria-label": cta.ariaLabel,
+        className: ctaClass,
         style: buttonStyle,
         children: content
       }
@@ -35302,6 +35320,7 @@ function CtaButton({
         target: cta.target,
         rel: cta.rel,
         "aria-label": cta.ariaLabel,
+        className: ctaClass,
         style: buttonStyle,
         children: content
       }
@@ -35313,6 +35332,7 @@ function CtaButton({
       type: "button",
       onClick: cta.onClick,
       "aria-label": cta.ariaLabel,
+      className: ctaClass,
       style: buttonStyle,
       children: content
     }