@digilogiclabs/saas-factory-ui 1.26.1 → 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);