eidotter 0.41.0 → 0.41.2

package/dist/hooks/useTextScramble.js

@@ -1,7 +1,23 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import { prefersReducedMotion } from '../utils/prefersReducedMotion.js';
 const DEFAULT_CHARACTERS = '░▒▓█│┤┐└┴┬├─┼';
 const CYCLES_PER_CHAR = 4;
+// Layout effect on the client so a client-only mount swaps to the scrambled
+// frame before paint (no flash of the final text); plain effect on the server,
+// where neither runs. Either way the effect runs only after mount/hydration.
+const useClientLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+function scrambleFrame(targetText, characters, resolvedCount) {
+    let result = '';
+    for (let i = 0; i < targetText.length; i++) {
+        if (i < resolvedCount || targetText[i] === ' ') {
+            result += targetText[i];
+        }
+        else {
+            result += characters[Math.floor(Math.random() * characters.length)];
+        }
+    }
+    return result;
+}
 /**
  * Hook that animates text with a DOS-style character scramble effect.
  * Characters resolve left-to-right (CRT beam metaphor).
@@ -11,24 +27,14 @@ const CYCLES_PER_CHAR = 4;
  */
 export function useTextScramble(targetText, options) {
     const { speed = 40, characters = DEFAULT_CHARACTERS, enabled = true, delay = 0, } = options ?? {};
-    // Initialize with scrambled chars (not empty) to avoid a blank frame
-    const [display, setDisplay] = useState(() => {
-        if (!enabled || prefersReducedMotion())
-            return targetText;
-        let result = '';
-        for (let i = 0; i < targetText.length; i++) {
-            if (targetText[i] === ' ') {
-                result += ' ';
-            }
-            else {
-                result += characters[Math.floor(Math.random() * characters.length)];
-            }
-        }
-        return result;
-    });
+    // SSR-safe (DMNC-1609): the server render and the first client render both
+    // output the final text, byte-identical, so hydration never mismatches and
+    // static HTML carries real content. Randomness and the reduced-motion check
+    // live in the effect below, which only runs on the client after mount.
+    const [display, setDisplay] = useState(targetText);
     const [isScrambling, setIsScrambling] = useState(false);
     const rafRef = useRef(0);
-    useEffect(() => {
+    useClientLayoutEffect(() => {
         // Skip animation if disabled or reduced motion
         if (!enabled || prefersReducedMotion()) {
             setDisplay(targetText);
@@ -40,6 +46,9 @@ export function useTextScramble(targetText, options) {
         let cycleCount = 0;
         let lastTime = 0;
         let delayRemaining = delay;
+        // First scrambled frame, set before paint so the delay period shows
+        // glyphs rather than the final text (as the pre-SSR-fix version did).
+        setDisplay(scrambleFrame(targetText, characters, 0));
         setIsScrambling(true);
         const animate = (time) => {
             if (!lastTime)
@@ -63,20 +72,7 @@ export function useTextScramble(targetText, options) {
                     setIsScrambling(false);
                     return;
                 }
-                // Build display string: resolved chars + scrambled chars
-                let result = '';
-                for (let i = 0; i < targetText.length; i++) {
-                    if (i < resolvedCount) {
-                        result += targetText[i];
-                    }
-                    else if (targetText[i] === ' ') {
-                        result += ' ';
-                    }
-                    else {
-                        result += characters[Math.floor(Math.random() * characters.length)];
-                    }
-                }
-                setDisplay(result);
+                setDisplay(scrambleFrame(targetText, characters, resolvedCount));
             }
             rafRef.current = requestAnimationFrame(animate);
         };

package/dist/index.d.ts

@@ -127,8 +127,9 @@ export type { LegalPageProps, AddressBlockProps, DatenschutzControllerProps, Dat
 export { useTextScramble } from './hooks/useTextScramble';
 export type { UseTextScrambleOptions } from './hooks/useTextScramble';
 export { isSafeUrl, isSafeHref } from './utils';
+export type { Tone, ValueStatus, Provenance, Band, HealthLabels } from './utils/health';
 export type { SafeHrefOptions } from './utils';
 export { ZOOM_LEVELS } from './components/TimelineContainer';
 export { componentRegistry, projects, getComponentMeta, getComponentsByOrigin, getComponentsByConsumer, getVariantsUsedBy, getVariantConsumerMap, } from './components/registry';
 export type { ComponentMeta, ProjectId, ProjectInfo, VariantMeta, PlatformId, PlatformMeta, ChangelogEntry, } from './components/registry';
-export declare const version = "0.41.0";
+export declare const version = "0.41.2";