@donotdev/adv-comps 0.0.2 → 0.0.4

package/dist/components/Crawl/Crawl.d.ts

@@ -1,34 +1,13 @@
 /**
- * @fileoverview Crawl Component
- * @description Cinematic 3D text crawl animation component with starfield background, customizable intro text, title, and content sections. Optimized for performance and Lighthouse scores.
+ * @fileoverview Crawl Component - Thin wrapper with lazy loading
+ * @description Cinematic 3D text crawl. Intro renders immediately (eager),
+ * heavy 3D animation loads lazily after user clicks play.
  *
- * @example
- * ```tsx
- * <Crawl
- *   intro="Lorem ipsum dolor sit amet"
- *   title="LOREM IPSUM"
- *   content={[
- *     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
- *     "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
- *   ]}
- * />
- * ```
- *
- * @example
- * ```tsx
- * <Crawl
- *   title="Lorem Ipsum"
- *   content="First paragraph.\n\nSecond paragraph with <strong>bold</strong> text."
- *   duration={30}
- *   contentHeight="200vh"
- * />
- * ```
- *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { type ReactNode, type ComponentType, type CSSProperties } from 'react';
+import { type ReactNode, type CSSProperties } from 'react';
 export interface CrawlProps {
     /** Optional intro text displayed with play button overlay. Accepts ReactNode or string. */
     intro?: ReactNode | string;
@@ -50,46 +29,16 @@ export interface CrawlProps {
     'aria-label'?: string;
 }
 /**
- * Cinematic 3D text crawl component with performance optimizations.
- *
- * ## Features
- * - **Lighthouse-optimized**: Intro content immediately visible for LCP measurement
- * - **User-controlled**: Play button overlay for optional animation experience
- * - **Zero memory usage**: Animation only starts when user clicks play
- * - **Responsive**: Title wraps on mobile/tablet, stays on one line on desktop
- * - **Accessible**: Respects `prefers-reduced-motion` preference
- * - **SSR-safe**: Handles server-side rendering gracefully
+ * Cinematic 3D text crawl component with lazy loading.
  *
- * ## Behavior
- * 1. Component initially shows a play button overlay with optional intro text
- * 2. User clicks play button to start the animation
- * 3. Starfield background and animated text crawl begin
- * 4. Animation loops infinitely until user navigates away
+ * ## Performance
+ * - Intro overlay renders IMMEDIATELY (LCP-optimized)
+ * - Heavy 3D animation lazy loads after user clicks play
+ * - Zero initial bundle impact for animation code
  *
- * ## Customization
- * CSS variables can be customized via theme or global styles:
- * - `--crawl-title-size`: Title font size (responsive: 3rem → 4.5rem → 8rem)
- * - `--crawl-body-size`: Content font size (responsive: 1.6rem → 2.5rem → 3rem)
- * - `--crawl-text-color`: Text color (default: #ffc909)
- * - `--crawl-intro-color`: Intro text color (default: #4a9eff)
- * - `--crawl-perspective`: 3D perspective distance (default: 600px)
- * - `--crawl-tilt`: 3D tilt angle (default: 40deg)
- *
- * ## Content Parsing
- * When strings are provided for `intro`, `title`, or `content`:
- * - Blank lines (`\n\n`) split content into paragraphs
- * - Limited HTML tags are parsed: `u`, `br`, `i`, `em`, `strong`, `b`
- * - All other HTML is escaped for security
- *
- * @example
- * ```tsx
- * <Crawl
- *   intro="Lorem ipsum dolor sit amet"
- *   title="Lorem Ipsum"
- *   content="First paragraph.\n\nSecond paragraph with <strong>bold</strong> text."
- * />
- * ```
+ * @version 0.0.2
+ * @since 0.0.1
  */
-declare const Crawl: ComponentType<CrawlProps>;
+declare const Crawl: ({ content, intro, title, duration, contentHeight, tiltAngle, className, style, "aria-label": ariaLabel, }: CrawlProps) => import("react/jsx-runtime").JSX.Element;
 export default Crawl;
 //# sourceMappingURL=Crawl.d.ts.map

package/dist/components/Crawl/Crawl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Crawl.d.ts","sourceRoot":"","sources":["../../../src/components/Crawl/Crawl.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,UAAU;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,sFAAsF;IACtF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,oFAAoF;IACpF,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,QAAA,MAAM,KAAK,EAAE,aAAa,CAAC,UAAU,CAsXpC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Crawl.d.ts","sourceRoot":"","sources":["../../../src/components/Crawl/Crawl.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AASf,MAAM,WAAW,UAAU;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,sFAAsF;IACtF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,oFAAoF;IACpF,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,GAAI,2GAUZ,UAAU,4CA+GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Crawl/Crawl.js

@@ -1,95 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // packages/adv-comps/src/components/Crawl/Crawl.tsx
 /**
- * @fileoverview Crawl Component
- * @description Cinematic 3D text crawl animation component with starfield background, customizable intro text, title, and content sections. Optimized for performance and Lighthouse scores.
+ * @fileoverview Crawl Component - Thin wrapper with lazy loading
+ * @description Cinematic 3D text crawl. Intro renders immediately (eager),
+ * heavy 3D animation loads lazily after user clicks play.
  *
- * @example
- * ```tsx
- * <Crawl
- *   intro="Lorem ipsum dolor sit amet"
- *   title="LOREM IPSUM"
- *   content={[
- *     "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
- *     "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
- *   ]}
- * />
- * ```
- *
- * @example
- * ```tsx
- * <Crawl
- *   title="Lorem Ipsum"
- *   content="First paragraph.\n\nSecond paragraph with <strong>bold</strong> text."
- *   duration={30}
- *   contentHeight="200vh"
- * />
- * ```
- *
- * @version 0.0.1
+ * @version 0.0.2
  * @since 0.0.1
  * @author AMBROISE PARK Consulting
  */
-import { useEffect, useRef, useState, useMemo, isValidElement, } from 'react';
+import { useState, useMemo, lazy, Suspense, } from 'react';
 import { cn } from '@donotdev/components';
-import { isClient } from '@donotdev/core';
 import { parseHtml } from '../../utils/parseHtml';
+// Lazy load heavy 3D animation content
+const CrawlContent = lazy(() => import('./CrawlContent'));
 /**
- * Cinematic 3D text crawl component with performance optimizations.
- *
- * ## Features
- * - **Lighthouse-optimized**: Intro content immediately visible for LCP measurement
- * - **User-controlled**: Play button overlay for optional animation experience
- * - **Zero memory usage**: Animation only starts when user clicks play
- * - **Responsive**: Title wraps on mobile/tablet, stays on one line on desktop
- * - **Accessible**: Respects `prefers-reduced-motion` preference
- * - **SSR-safe**: Handles server-side rendering gracefully
+ * Cinematic 3D text crawl component with lazy loading.
  *
- * ## Behavior
- * 1. Component initially shows a play button overlay with optional intro text
- * 2. User clicks play button to start the animation
- * 3. Starfield background and animated text crawl begin
- * 4. Animation loops infinitely until user navigates away
+ * ## Performance
+ * - Intro overlay renders IMMEDIATELY (LCP-optimized)
+ * - Heavy 3D animation lazy loads after user clicks play
+ * - Zero initial bundle impact for animation code
  *
- * ## Customization
- * CSS variables can be customized via theme or global styles:
- * - `--crawl-title-size`: Title font size (responsive: 3rem → 4.5rem → 8rem)
- * - `--crawl-body-size`: Content font size (responsive: 1.6rem → 2.5rem → 3rem)
- * - `--crawl-text-color`: Text color (default: #ffc909)
- * - `--crawl-intro-color`: Intro text color (default: #4a9eff)
- * - `--crawl-perspective`: 3D perspective distance (default: 600px)
- * - `--crawl-tilt`: 3D tilt angle (default: 40deg)
- *
- * ## Content Parsing
- * When strings are provided for `intro`, `title`, or `content`:
- * - Blank lines (`\n\n`) split content into paragraphs
- * - Limited HTML tags are parsed: `u`, `br`, `i`, `em`, `strong`, `b`
- * - All other HTML is escaped for security
- *
- * @example
- * ```tsx
- * <Crawl
- *   intro="Lorem ipsum dolor sit amet"
- *   title="Lorem Ipsum"
- *   content="First paragraph.\n\nSecond paragraph with <strong>bold</strong> text."
- * />
- * ```
+ * @version 0.0.2
+ * @since 0.0.1
  */
 const Crawl = ({ content, intro, title, duration = 26, contentHeight = '150vh', tiltAngle, className, style, 'aria-label': ariaLabel, }) => {
-    // Normalize intro/title/content to ReactNodes. When strings are provided,
-    // parse limited inline HTML and wrap paragraphs automatically.
-    const renderStringAsParagraphs = (value) => {
-        if (!value || typeof value !== 'string')
-            return null;
-        // Split by blank lines to form paragraphs
-        const blocks = value
-            .split(/\n\s*\n/) // blank line delimiter
-            .map((block) => block.trim())
-            .filter((block) => block.length > 0);
-        return blocks.map((block, idx) => (_jsx("p", { children: parseHtml(block, {
-                allowedTags: ['u', 'br', 'i', 'em', 'strong', 'b'],
-            }) }, `p-${idx}`)));
-    };
+    const [showPlayOverlay, setShowPlayOverlay] = useState(true);
+    // Parse intro immediately (lightweight)
     const resolvedIntro = useMemo(() => {
         if (intro == null)
             return null;
@@ -97,110 +35,10 @@ const Crawl = ({ content, intro, title, duration = 26, contentHeight = '150vh',
                 allowedTags: ['u', 'br', 'i', 'em', 'strong', 'b'],
             }) })) : (intro);
     }, [intro]);
-    const resolvedTitle = useMemo(() => {
-        if (!title)
-            return null;
-        return typeof title === 'string' ? (_jsx("h2", { className: "dndev-crawl-title", children: parseHtml(title, {
-                allowedTags: ['u', 'br', 'i', 'em', 'strong', 'b'],
-            }) })) : (title);
-    }, [title]);
-    const resolvedContent = useMemo(() => {
-        if (isValidElement(content))
-            return content;
-        if (Array.isArray(content)) {
-            // string[] → each item becomes a paragraph
-            const items = content
-                .map((item) => (typeof item === 'string' ? item.trim() : ''))
-                .filter((s) => s && s.length > 0);
-            return items.map((item, idx) => (_jsx("p", { children: parseHtml(item, {
-                    allowedTags: ['u', 'br', 'i', 'em', 'strong', 'b'],
-                }) }, `c-${idx}`)));
-        }
-        if (typeof content === 'string') {
-            return renderStringAsParagraphs(content);
-        }
-        return content;
-    }, [content]);
-    const textRef = useRef(null);
-    const containerRef = useRef(null);
-    const [showPlayOverlay, setShowPlayOverlay] = useState(false);
-    const [isAnimationActive, setIsAnimationActive] = useState(false);
-    const [isPaused, setIsPaused] = useState(false);
-    const [isHydrated, setIsHydrated] = useState(false);
-    // SSR-safe hydration
-    useEffect(() => {
-        setIsHydrated(true);
-        // Always show play overlay (LCP) - intro is optional
-        setShowPlayOverlay(true);
-    }, []);
-    // Handle play button click
     const handlePlayClick = () => {
         setShowPlayOverlay(false);
-        setIsAnimationActive(true);
-        setIsPaused(false);
-    };
-    // Handle container click (pause when animation is active)
-    const handleContainerClick = (e) => {
-        if (isAnimationActive && !isPaused && !showPlayOverlay) {
-            setIsPaused(true);
-        }
     };
-    // Handle pause button click (resume)
-    const handlePauseClick = (e) => {
-        e.stopPropagation();
-        setIsPaused(false);
-    };
-    // Animation style - only active when user requests it
-    const animationStyle = useMemo(() => {
-        const style = {
-            '--crawl-content-height': contentHeight,
-            animationName: isAnimationActive ? 'dndev-crawl-animation' : 'none',
-            animationDuration: `${duration}s`,
-            animationTimingFunction: 'linear',
-            animationIterationCount: 'infinite',
-            animationFillMode: 'forwards',
-            animationPlayState: isPaused ? 'paused' : 'running',
-        };
-        // Only override CSS default if tiltAngle is explicitly provided
-        if (tiltAngle !== undefined) {
-            style['--crawl-tilt'] = `${tiltAngle}deg`;
-        }
-        return style;
-    }, [isAnimationActive, isPaused, duration, contentHeight, tiltAngle]);
-    // Handle reduced motion preference
-    useEffect(() => {
-        if (!isHydrated || !isClient() || !textRef.current)
-            return;
-        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-        const handleChange = () => {
-            if (mediaQuery.matches && textRef.current) {
-                textRef.current.classList.add('dndev-crawl-reduced-motion');
-            }
-        };
-        handleChange(); // Check initial state
-        mediaQuery.addEventListener('change', handleChange);
-        return () => mediaQuery.removeEventListener('change', handleChange);
-    }, [isHydrated]);
-    // Intersection Observer - auto-pause when scrolled out of view
-    useEffect(() => {
-        if (!isHydrated ||
-            !isClient() ||
-            !isAnimationActive ||
-            !containerRef.current)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            const isVisible = entries[0]?.isIntersecting ?? true;
-            if (!isVisible) {
-                setIsPaused(true);
-            }
-        }, { threshold: 0.1 });
-        observer.observe(containerRef.current);
-        return () => observer.disconnect();
-    }, [isHydrated, isAnimationActive]);
-    return (_jsxs("div", { ref: containerRef, className: cn('dndev-crawl-container', 'dndev-relative dndev-overflow-hidden', className), style: { ...style, height: 'calc(100dvh - var(--header-height))' }, onClick: handleContainerClick, "aria-label": ariaLabel || 'Animated text crawl', role: "region", "aria-live": "polite", children: [!showPlayOverlay && (_jsx("div", { className: "dndev-crawl-3d-container", children: _jsx("div", { ref: textRef, className: "dndev-crawl-text", style: {
-                        ...animationStyle,
-                        willChange: isAnimationActive && !isPaused ? 'transform' : 'auto',
-                    }, children: _jsxs("div", { className: "dndev-crawl-content", children: [resolvedTitle, resolvedContent] }) }) })), showPlayOverlay && isHydrated && (_jsxs("div", { className: "dndev-absolute dndev-inset-0 dndev-flex dndev-flex-col dndev-items-center dndev-justify-center", style: {
+    return (_jsxs("div", { className: cn('dndev-crawl-container', 'dndev-relative dndev-overflow-hidden', className), style: { ...style, height: 'calc(100dvh - var(--header-height))' }, "aria-label": ariaLabel || 'Animated text crawl', role: "region", "aria-live": "polite", children: [showPlayOverlay && (_jsxs("div", { className: "dndev-absolute dndev-inset-0 dndev-flex dndev-flex-col dndev-items-center dndev-justify-center", style: {
                     zIndex: 30,
                     backgroundColor: 'rgba(0, 0, 0, 0.6)',
                     backdropFilter: 'blur(4px)',
@@ -219,7 +57,6 @@ const Crawl = ({ content, intro, title, duration = 26, contentHeight = '150vh',
                             backdropFilter: 'blur(4px)',
                             cursor: 'pointer',
                             transition: 'all var(--dur-normal) var(--ease-in-out)',
-                            transformOrigin: 'center',
                         }, onMouseEnter: (e) => {
                             e.currentTarget.style.backgroundColor =
                                 'rgba(255, 255, 255, 0.3)';
@@ -230,45 +67,6 @@ const Crawl = ({ content, intro, title, duration = 26, contentHeight = '150vh',
                                 'rgba(255, 255, 255, 0.2)';
                             e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.4)';
                             e.currentTarget.style.transform = 'scale(1)';
-                        }, "aria-label": "Start animated introduction", children: _jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "white", style: { marginInlineStart: '4px' }, children: _jsx("path", { d: "M8 5v14l11-7z" }) }) })] })), isPaused && isAnimationActive && isHydrated && (_jsx("div", { className: "dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center", style: {
-                    zIndex: 30,
-                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                    backdropFilter: 'blur(2px)',
-                }, onClick: handlePauseClick, children: _jsx("button", { style: {
-                        width: '96px',
-                        height: '96px',
-                        borderRadius: '50%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                        border: '4px solid rgba(255, 255, 255, 0.4)',
-                        backdropFilter: 'blur(4px)',
-                        cursor: 'pointer',
-                        transition: 'all var(--dur-normal) var(--ease-in-out)',
-                        transformOrigin: 'center',
-                    }, onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor =
-                            'rgba(255, 255, 255, 0.3)';
-                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.6)';
-                        e.currentTarget.style.transform = 'scale(1.1)';
-                    }, onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor =
-                            'rgba(255, 255, 255, 0.2)';
-                        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.4)';
-                        e.currentTarget.style.transform = 'scale(1)';
-                    }, "aria-label": "Resume animation", children: _jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "white", children: _jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) }) }) })), isAnimationActive && (_jsxs("div", { className: "dndev-crawl-stars", children: [_jsx("div", { className: "dndev-crawl-stars-layer-1" }), _jsx("div", { className: "dndev-crawl-stars-layer-2" }), _jsx("div", { className: "dndev-crawl-stars-layer-3" })] })), !isHydrated && (_jsxs("div", { className: "dndev-absolute dndev-inset-0 dndev-flex dndev-flex-col dndev-items-center dndev-justify-center", style: { zIndex: 20, backgroundColor: 'rgba(0, 0, 0, 0.5)' }, children: [resolvedIntro && (_jsx("div", { className: "dndev-w-full", style: {
-                            paddingInline: 'var(--content-padding)',
-                            marginBottom: '3rem',
-                        }, children: _jsx("div", { className: "dndev-crawl-intro-content", children: resolvedIntro }) })), _jsx("div", { style: {
-                            width: '96px',
-                            height: '96px',
-                            borderRadius: '50%',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                            border: '4px solid rgba(255, 255, 255, 0.4)',
-                        }, children: _jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "white", style: { marginInlineStart: '4px' }, children: _jsx("path", { d: "M8 5v14l11-7z" }) }) })] }))] }));
+                        }, "aria-label": "Start animated introduction", children: _jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "white", style: { marginInlineStart: '4px' }, children: _jsx("path", { d: "M8 5v14l11-7z" }) }) })] })), !showPlayOverlay && (_jsx(Suspense, { fallback: null, children: _jsx(CrawlContent, { title: title, content: content, duration: duration, contentHeight: contentHeight, tiltAngle: tiltAngle }) }))] }));
 };
 export default Crawl;

package/dist/components/Crawl/CrawlContent.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @fileoverview CrawlContent - Heavy 3D animation content (lazy loaded)
+ * @description Contains the 3D perspective animation, starfield, and text crawl.
+ * Lazy loaded after user clicks play to keep initial bundle small.
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { type ReactNode } from 'react';
+export interface CrawlContentProps {
+    /** Optional title rendered at the start of the crawl */
+    title?: ReactNode | string;
+    /** Main crawl content */
+    content: ReactNode | string | string[];
+    /** Duration of the crawl animation in seconds */
+    duration?: number;
+    /** Height of the content area in viewport units */
+    contentHeight?: string;
+    /** Tilt angle for the 3D perspective effect */
+    tiltAngle?: number;
+    /** Callback when animation is paused */
+    onPause?: () => void;
+    /** Callback when animation resumes */
+    onResume?: () => void;
+}
+/**
+ * Heavy 3D crawl animation content - lazy loaded
+ */
+declare const CrawlContent: ({ content, title, duration, contentHeight, tiltAngle, onPause, onResume, }: CrawlContentProps) => import("react/jsx-runtime").JSX.Element;
+export default CrawlContent;
+//# sourceMappingURL=CrawlContent.d.ts.map

package/dist/components/Crawl/CrawlContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CrawlContent.d.ts","sourceRoot":"","sources":["../../../src/components/Crawl/CrawlContent.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,EAKL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,yBAAyB;IACzB,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACvC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,GAAI,4EAQnB,iBAAiB,4CAgKnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/Crawl/CrawlContent.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// packages/adv-comps/src/components/Crawl/CrawlContent.tsx
+/**
+ * @fileoverview CrawlContent - Heavy 3D animation content (lazy loaded)
+ * @description Contains the 3D perspective animation, starfield, and text crawl.
+ * Lazy loaded after user clicks play to keep initial bundle small.
+ *
+ * @version 0.0.1
+ * @since 0.0.1
+ * @author AMBROISE PARK Consulting
+ */
+import { useEffect, useRef, useState, useMemo, isValidElement, } from 'react';
+import { isClient } from '@donotdev/core';
+import { parseHtml } from '../../utils/parseHtml';
+/**
+ * Heavy 3D crawl animation content - lazy loaded
+ */
+const CrawlContent = ({ content, title, duration = 26, contentHeight = '150vh', tiltAngle, onPause, onResume, }) => {
+    const textRef = useRef(null);
+    const [isPaused, setIsPaused] = useState(false);
+    // Normalize title/content to ReactNodes
+    const renderStringAsParagraphs = (value) => {
+        if (!value || typeof value !== 'string')
+            return null;
+        const blocks = value
+            .split(/\n\s*\n/)
+            .map((block) => block.trim())
+            .filter((block) => block.length > 0);
+        return blocks.map((block, idx) => (_jsx("p", { children: parseHtml(block, {
+                allowedTags: ['u', 'br', 'i', 'em', 'strong', 'b'],
+            }) }, `p-${idx}`)));
+    };
+    const resolvedTitle = useMemo(() => {
+        if (!title)
+            return null;
+        return typeof title === 'string' ? (_jsx("h2", { className: "dndev-crawl-title", children: parseHtml(title, {
+                allowedTags: ['u', 'br', 'i', 'em', 'strong', 'b'],
+            }) })) : (title);
+    }, [title]);
+    const resolvedContent = useMemo(() => {
+        if (isValidElement(content))
+            return content;
+        if (Array.isArray(content)) {
+            const items = content
+                .map((item) => (typeof item === 'string' ? item.trim() : ''))
+                .filter((s) => s && s.length > 0);
+            return items.map((item, idx) => (_jsx("p", { children: parseHtml(item, {
+                    allowedTags: ['u', 'br', 'i', 'em', 'strong', 'b'],
+                }) }, `c-${idx}`)));
+        }
+        if (typeof content === 'string') {
+            return renderStringAsParagraphs(content);
+        }
+        return content;
+    }, [content]);
+    // Animation style
+    const animationStyle = useMemo(() => {
+        const style = {
+            '--crawl-content-height': contentHeight,
+            animationName: 'dndev-crawl-animation',
+            animationDuration: `${duration}s`,
+            animationTimingFunction: 'linear',
+            animationIterationCount: 'infinite',
+            animationFillMode: 'forwards',
+            animationPlayState: isPaused ? 'paused' : 'running',
+        };
+        if (tiltAngle !== undefined) {
+            style['--crawl-tilt'] = `${tiltAngle}deg`;
+        }
+        return style;
+    }, [isPaused, duration, contentHeight, tiltAngle]);
+    // Handle reduced motion preference
+    useEffect(() => {
+        if (!isClient() || !textRef.current)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const handleChange = () => {
+            if (mediaQuery.matches && textRef.current) {
+                textRef.current.classList.add('dndev-crawl-reduced-motion');
+            }
+        };
+        handleChange();
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+    // Handle click to pause
+    const handleClick = () => {
+        if (isPaused) {
+            setIsPaused(false);
+            onResume?.();
+        }
+        else {
+            setIsPaused(true);
+            onPause?.();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "dndev-crawl-3d-container", onClick: handleClick, children: _jsx("div", { ref: textRef, className: "dndev-crawl-text", style: {
+                        ...animationStyle,
+                        willChange: !isPaused ? 'transform' : 'auto',
+                    }, children: _jsxs("div", { className: "dndev-crawl-content", children: [resolvedTitle, resolvedContent] }) }) }), isPaused && (_jsx("div", { className: "dndev-absolute dndev-inset-0 dndev-flex dndev-items-center dndev-justify-center", style: {
+                    zIndex: 30,
+                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                    backdropFilter: 'blur(2px)',
+                }, onClick: handleClick, children: _jsx("button", { style: {
+                        width: '96px',
+                        height: '96px',
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                        border: '4px solid rgba(255, 255, 255, 0.4)',
+                        backdropFilter: 'blur(4px)',
+                        cursor: 'pointer',
+                        transition: 'all var(--dur-normal) var(--ease-in-out)',
+                    }, "aria-label": "Resume animation", children: _jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "white", children: _jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) }) }) })), _jsxs("div", { className: "dndev-crawl-stars", children: [_jsx("div", { className: "dndev-crawl-stars-layer-1" }), _jsx("div", { className: "dndev-crawl-stars-layer-2" }), _jsx("div", { className: "dndev-crawl-stars-layer-3" })] })] }));
+};
+export default CrawlContent;