eidotter 0.41.1 → 0.41.2

package/README.md

@@ -104,7 +104,7 @@ for client apps and `'use client'` files.
 
 Every minor with breaking or visible changes ships an upgrade guide in the package, at `node_modules/eidotter/migrations/<version>.md` (source: [`migrations/`](./migrations/)). Read every guide between your installed version and the target, oldest first. Start with [0.41.0](./migrations/0.41.0.md).
 
-0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.41.1` (0.41.0 shipped before its review fixes; use 0.41.1 or later).
+0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.41.2` (0.41.0 shipped before its review fixes; use 0.41.1 or later).
 
 ## Documentation
 

package/dist/components/registry.js

@@ -429,7 +429,8 @@ export const componentRegistry = {
             swiftui: { status: 'planned' },
         },
         changelog: [
-            { version: '0.42.0', type: 'changed', description: 'The unit can drop under the value in a narrow card (a space before the unit is the break opportunity; was a 4px margin with no break) (DMNC-1610)' },
+            { version: '0.41.1', type: 'changed', description: 'The unit can drop under the value in a narrow card (a space before the unit is the break opportunity; was a 4px margin with no break) (DMNC-1610)' },
+            { version: '0.41.2', type: 'changed', description: 'scramble: server HTML and first client render show the final value; scramble starts after mount (no hydration mismatch, DMNC-1609)' },
             { version: '0.40.0', type: 'changed', description: 'Add optional unit, note and target slots (additive; existing consumers unchanged)' },
             { version: '0.19.0', type: 'changed', description: 'Replace hardcoded font-size pixels with V.37 dos tokens' },
             { version: '0.16.0', type: 'changed', description: 'Migrate to Tailwind-first (Wave 2); deprecate size aliases; add size:sm/lg' },
@@ -664,6 +665,7 @@ export const componentRegistry = {
             react: { path: 'src/components/TextScramble', status: 'canonical' },
         },
         changelog: [
+            { version: '0.41.2', type: 'changed', description: 'SSR-safe: server HTML and first client render show the final text; scramble and reduced-motion check run after mount (no hydration mismatch, DMNC-1609)' },
             { version: '0.18.0', type: 'changed', description: 'Migrate BEM to Tailwind-first; adopt cn() and forwardRef' },
             { version: '0.10.0', type: 'added', description: 'Initial TextScramble — children string, speed, characters, delay; rAF-based reveal' },
         ],
@@ -747,12 +749,12 @@ export const componentRegistry = {
             'size:lg': { description: '40rem (CmdPalette historical 640px)', since: '0.41.0' },
             'size:full': { description: 'Viewport width minus 2x spacing-4 (Lightbox)', since: '0.41.0' },
             'inline:false': { description: 'Modal overlay: React Aria ModalOverlay, portal, scrim, focus trap (default)', since: '0.41.0' },
-            'inline:true': { description: 'Same chrome in document flow: no overlay, portal or focus trap; role=group, no aria-modal (docs, static previews)', since: '0.42.0' },
+            'inline:true': { description: 'Same chrome in document flow: no overlay, portal or focus trap; role=group, no aria-modal (docs, static previews)', since: '0.41.1' },
         },
         platforms: { react: { path: 'src/components/DosDialog', status: 'canonical' } },
         changelog: [
-            { version: '0.42.0', type: 'added', description: 'inline prop: renders the same frame, strip, head, body, footer and end control in place without ModalOverlay, portal or focus trap, as a role=group with no aria-modal; server HTML carries the chrome (DMNC-1605)' },
-            { version: '0.42.0', type: 'changed', description: 'Last end IconButton docks flush in the frame corner (0px top, 0px right, was 0px top, 4px right), the same rule as DosWindow controls (DMNC-1605)' },
+            { version: '0.41.1', type: 'added', description: 'inline prop: renders the same frame, strip, head, body, footer and end control in place without ModalOverlay, portal or focus trap, as a role=group with no aria-modal; server HTML carries the chrome (DMNC-1605)' },
+            { version: '0.41.1', type: 'changed', description: 'Last end IconButton docks flush in the frame corner (0px top, 0px right, was 0px top, 4px right), the same rule as DosWindow controls (DMNC-1605)' },
             { version: '0.41.0', type: 'added', description: 'Initial DosDialog: open/onOpenChange, placement, size, head strip (title/end/marker/decorative or ReactNode), footer, isDismissable, pop-in/out panel (150ms) over a fading scrim, reduced-motion bypass' },
         ],
     },
@@ -783,7 +785,7 @@ export const componentRegistry = {
         },
         platforms: { react: { path: 'src/components/DosWindow', status: 'canonical' } },
         changelog: [
-            { version: '0.42.0', type: 'changed', description: 'Last control IconButton docks flush in the frame corner (0px top, 0px right, was 0px top, 4px right); the inline-end overhang moved from the controls container to the last IconButton, so non-IconButton controls keep the strip padding (DMNC-1605)' },
+            { version: '0.41.1', type: 'changed', description: 'Last control IconButton docks flush in the frame corner (0px top, 0px right, was 0px top, 4px right); the inline-end overhang moved from the controls container to the last IconButton, so non-IconButton controls keep the strip padding (DMNC-1605)' },
             { version: '0.41.0', type: 'added', description: 'Initial DosWindow: title, marker, active, controls, footer, className; stable classes eidotter-window, __strip, __title, __controls, __body, __footer (DMNC-1592)' },
         ],
     },
@@ -1018,7 +1020,7 @@ export const componentRegistry = {
         },
         changelog: [
             { version: '0.40.0', type: 'added', description: 'Initial RangeBar (health metabolism family)' },
-            { version: '0.42.0', type: 'changed', description: 'Vertical legend wraps under the bar in a narrow container; legend names wrap instead of truncating and a bound moves to the next line whole; percent and target label separated by a gap and a space; lane and legend text print black on white (DMNC-1610)' },
+            { version: '0.41.1', type: 'changed', description: 'Vertical legend wraps under the bar in a narrow container; legend names wrap instead of truncating and a bound moves to the next line whole; percent and target label separated by a gap and a space; lane and legend text print black on white (DMNC-1610)' },
         ],
     },
     SeriesBars: {
@@ -1043,8 +1045,8 @@ export const componentRegistry = {
         changelog: [
             { version: '0.40.0', type: 'added', description: 'Initial SeriesBars (health metabolism family)' },
             { version: '0.41.0', type: 'changed', description: 'Goal label moved into a reserved band above the plot so it never paints over a bar (DMNC-1573)' },
-            { version: '0.42.0', type: 'added', description: 'Additive unit and format (formatValue digits/percent/signed) props: values and the goal carry the unit in the summary, value table and bar titles; a goal label that already holds the goal value is not repeated (DMNC-1610)' },
-            { version: '0.42.0', type: 'changed', description: 'Sparse ticks (tickEvery > 1) overflow into empty neighbour columns instead of truncating; first and last labels pinned to the plot edges; goal tag and ticks print black on white (DMNC-1610)' },
+            { version: '0.41.1', type: 'added', description: 'Additive unit and format (formatValue digits/percent/signed) props: values and the goal carry the unit in the summary, value table and bar titles; a goal label that already holds the goal value is not repeated (DMNC-1610)' },
+            { version: '0.41.1', type: 'changed', description: 'Sparse ticks (tickEvery > 1) overflow into empty neighbour columns instead of truncating; first and last labels pinned to the plot edges; goal tag and ticks print black on white (DMNC-1610)' },
         ],
     },
     DecayStrip: {

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

@@ -132,4 +132,4 @@ 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.1";
+export declare const version = "0.41.2";