@udixio/ui-react 1.6.4 → 2.1.0

package/src/lib/effects/ThemeProvider.tsx

@@ -1,4 +1,9 @@
-import { type API, type ConfigInterface, loader } from '@udixio/theme';
+import {
+  type API,
+  type ConfigInterface,
+  ContextOptions,
+  loader,
+} from '@udixio/theme';
 import { useEffect, useRef, useState } from 'react';
 import { TailwindPlugin } from '@udixio/tailwind';
 
@@ -11,78 +16,98 @@ export const ThemeProvider = ({
   config,
   throttleDelay = 100, // Délai par défaut de 300ms
   onLoad,
+  loadTheme = false,
 }: {
-  config: ConfigInterface;
+  config: Readonly<ConfigInterface>;
   onLoad?: (api: API) => void;
   throttleDelay?: number;
+  loadTheme?: boolean;
 }) => {
-  const [outputCss, setOutputCss] = useState<null | string>(null);
+  const [themeApi, setThemeApi] = useState<API | null>(null);
 
-  // Refs pour gérer le throttling
+  // Charger l'API du thème une fois au montage
+  useEffect(() => {
+    (async () => {
+      const api = await loader(config, loadTheme);
+      setThemeApi(api);
+    })();
+  }, []);
+
+  const [outputCss, setOutputCss] = useState<string | null>(null);
+
+  // Throttle avec exécution en tête (leading) et en fin (trailing)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastSourceColorRef = useRef<string>(config.sourceColor);
-  const isInitialLoadRef = useRef<boolean>(true);
+  const lastExecTimeRef = useRef<number>(0);
+  const lastArgsRef = useRef<Partial<ContextOptions> | null>(null);
 
   useEffect(() => {
-    // Si c'est le premier chargement, on applique immédiatement
-    if (isInitialLoadRef.current) {
-      isInitialLoadRef.current = false;
-      lastSourceColorRef.current = config.sourceColor;
-      applyThemeChange(config.sourceColor);
-      return;
-    }
+    if (!themeApi) return; // Attendre que l'API soit prête
 
-    // Si la couleur n'a pas changé, on ne fait rien
-    if (config.sourceColor === lastSourceColorRef.current) {
-      return;
-    }
+    const ctx: Partial<ContextOptions> = {
+      ...config,
+      // Assurer la compatibilité avec l'API qui attend sourceColorHex
+      sourceColor: config.sourceColor,
+    };
 
-    // Annuler le timeout précédent s'il existe
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
+    const now = Date.now();
+    const timeSinceLast = now - lastExecTimeRef.current;
 
-    // Programmer un nouveau changement de thème avec un délai
-    timeoutRef.current = setTimeout(async () => {
-      lastSourceColorRef.current = config.sourceColor;
-      await applyThemeChange(config.sourceColor);
-      timeoutRef.current = null;
-    }, throttleDelay);
+    const invoke = async (args: Partial<ContextOptions>) => {
+      // applique et notifie
+      await applyThemeChange(args);
+    };
 
-    // Cleanup function pour annuler le timeout si le composant se démonte
-    return () => {
+    // Leading: si délai écoulé ou jamais exécuté, exécuter tout de suite
+    if (lastExecTimeRef.current === 0 || timeSinceLast >= throttleDelay) {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
-    };
-  }, [config.sourceColor, throttleDelay]);
-
-  const applyThemeChange = async (sourceColor: string) => {
-    if (!isValidHexColor(sourceColor)) {
-      throw new Error('Invalid hex color');
+      lastArgsRef.current = null;
+      lastExecTimeRef.current = now;
+      void invoke(ctx);
+    } else {
+      // Sinon, mémoriser la dernière requête et programmer une exécution en trailing
+      lastArgsRef.current = ctx;
+      if (!timeoutRef.current) {
+        const remaining = Math.max(0, throttleDelay - timeSinceLast);
+        timeoutRef.current = setTimeout(async () => {
+          timeoutRef.current = null;
+          const args = lastArgsRef.current;
+          lastArgsRef.current = null;
+          if (args) {
+            lastExecTimeRef.current = Date.now();
+            await invoke(args);
+          }
+        }, remaining);
+      }
     }
 
-    try {
-      // Mesure du temps de chargement de l'API
-      const api = await loader({
-        ...config,
-        sourceColor,
-      });
-      onLoad?.(api);
+    // Cleanup: au changement de dépendances, ne rien faire ici (on gère trailing)
+    return () => {};
+  }, [config, throttleDelay, themeApi]);
 
-      const generatedCss = api.plugins
-        .getPlugin(TailwindPlugin)
-        .getInstance().outputCss;
-
-      if (generatedCss) {
-        setOutputCss(generatedCss);
+  const applyThemeChange = async (ctx: Partial<ContextOptions>) => {
+    if (typeof ctx.sourceColor == 'string') {
+      if (!isValidHexColor(ctx.sourceColor)) {
+        throw new Error('Invalid hex color');
       }
-    } catch (err) {
-      throw new Error(
-        err instanceof Error ? err.message : 'Theme loading failed',
-      );
     }
+
+    if (!themeApi) {
+      // L'API n'est pas prête; ignorer silencieusement car l'effet principal attend themeApi
+      return;
+    }
+    themeApi.context.update(ctx);
+
+    await themeApi.load();
+
+    const outputCss = themeApi?.plugins
+      .getPlugin(TailwindPlugin)
+      .getInstance().outputCss;
+    setOutputCss(outputCss);
+
+    onLoad?.(themeApi);
   };
 
   // Cleanup lors du démontage du composant
@@ -90,6 +115,7 @@ export const ThemeProvider = ({
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
   }, []);

package/src/lib/effects/block-scroll.effect.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef } from 'react';
+
+type ScrollIntent =
+  | {
+      type: 'intent';
+      source: 'wheel' | 'touch' | 'keyboard';
+      deltaX: number;
+      deltaY: number;
+      originalEvent: Event;
+    }
+  | {
+      type: 'scrollbar';
+      scrollTop: number;
+      scrollLeft: number;
+      maxScrollTop: number;
+      maxScrollLeft: number;
+    };
+
+type BlockScrollProps = {
+  onScroll?: (evt: ScrollIntent) => void; // log des intentions + du scroll via scrollbar
+  touch?: boolean;
+  el: HTMLElement;
+};
+
+export const BlockScroll: React.FC<BlockScrollProps> = ({
+  onScroll,
+  el,
+  touch = true,
+}) => {
+  const lastTouch = useRef<{ x: number; y: number } | null>(null);
+  const lastScrollTop = useRef<number>(0);
+  const lastScrollLeft = useRef<number>(0);
+
+  useEffect(() => {
+    if (!el) return;
+
+    // Initialize last known scroll positions to block scrollbar-based scrolling
+    lastScrollTop.current = el.scrollTop;
+    lastScrollLeft.current = el.scrollLeft;
+
+    const emitIntent = (payload: Extract<ScrollIntent, { type: 'intent' }>) => {
+      // Log the desired deltaY for every scroll attempt (wheel/touch/keyboard)
+      onScroll?.(payload);
+    };
+
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      emitIntent({
+        type: 'intent',
+        source: 'wheel',
+        deltaX: e.deltaX,
+        deltaY: e.deltaY,
+        originalEvent: e,
+      });
+    };
+
+    const onTouchStart = (e: TouchEvent) => {
+      if (!touch) return;
+      const t = e.touches[0];
+      if (t) lastTouch.current = { x: t.clientX, y: t.clientY };
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (!touch) return;
+      const t = e.touches[0];
+      if (!t || !lastTouch.current) return;
+      e.preventDefault();
+      const dx = lastTouch.current.x - t.clientX;
+      const dy = lastTouch.current.y - t.clientY;
+      lastTouch.current = { x: t.clientX, y: t.clientY };
+      emitIntent({
+        type: 'intent',
+        source: 'touch',
+        deltaX: dx,
+        deltaY: dy,
+        originalEvent: e,
+      });
+    };
+
+    const onTouchEnd = () => {
+      if (!touch) return;
+      lastTouch.current = null;
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const line = 40;
+      const page = el.clientHeight * 0.9;
+      let dx = 0,
+        dy = 0;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          dy = line;
+          break;
+        case 'ArrowUp':
+          dy = -line;
+          break;
+        case 'ArrowRight':
+          dx = line;
+          break;
+        case 'ArrowLeft':
+          dx = -line;
+          break;
+        case 'PageDown':
+          dy = page;
+          break;
+        case 'PageUp':
+          dy = -page;
+          break;
+        case 'Home':
+          dy = Number.NEGATIVE_INFINITY;
+          break;
+        case 'End':
+          dy = Number.POSITIVE_INFINITY;
+          break;
+        case ' ':
+          dy = e.shiftKey ? -page : page;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      emitIntent({
+        type: 'intent',
+        source: 'keyboard',
+        deltaX: dx,
+        deltaY: dy,
+        originalEvent: e,
+      });
+    };
+
+    // const onScrollEvent = (e) => {
+    //   const currentScrollTop = e.target.scrollTop;
+    //   const currentScrollLeft = e.target.scrollLeft;
+    //
+    //   // Check if scroll position changed from last known position
+    //   if (
+    //     currentScrollTop !== lastScrollTop.current ||
+    //     currentScrollLeft !== lastScrollLeft.current
+    //   ) {
+    //     console.log('onScrollllllllllll', e, document);
+    //     onScroll?.({
+    //       type: 'scrollbar',
+    //       scrollTop: currentScrollTop,
+    //       scrollLeft: currentScrollLeft,
+    //       maxScrollTop: e.target.scrollHeight - e.target.clientHeight,
+    //       maxScrollLeft: e.target.scrollWidth - e.target.clientWidth,
+    //     });
+    //   }
+    //
+    //   // Update last known scroll positions
+    //   lastScrollTop.current = currentScrollTop;
+    //   lastScrollLeft.current = currentScrollLeft;
+    //
+    //   document.querySelector('html')?.scrollTo({ top: 0 });
+    // };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    el.addEventListener('touchstart', onTouchStart, { passive: true });
+    el.addEventListener('touchmove', onTouchMove, { passive: false });
+    el.addEventListener('touchend', onTouchEnd, { passive: true });
+    el.addEventListener('keydown', onKeyDown);
+    // el.addEventListener('scroll', onScrollEvent, { passive: true });
+
+    return () => {
+      el.removeEventListener('wheel', onWheel as EventListener);
+      el.removeEventListener('touchstart', onTouchStart as EventListener);
+      el.removeEventListener('touchmove', onTouchMove as EventListener);
+      el.removeEventListener('touchend', onTouchEnd as EventListener);
+      el.removeEventListener('keydown', onKeyDown as EventListener);
+      // el.removeEventListener('scroll', onScrollEvent as EventListener);
+    };
+  }, [onScroll]);
+};

package/src/lib/effects/custom-scroll/custom-scroll.effect.tsx

@@ -90,21 +90,32 @@ export const CustomScroll = ({
     handleScrollThrottledRef.current = throttle(
       throttleDuration,
       (latestValue, scrollOrientation: 'x' | 'y') => {
-        if (!containerSize.current || !contentScrollSize.current) return;
+        if (
+          !containerSize.current ||
+          !contentScrollSize.current ||
+          !ref.current
+        )
+          return;
         if (onScroll) {
           if (orientation === 'horizontal' && scrollOrientation === 'x') {
             onScroll({
               scrollProgress: latestValue,
-              scroll: latestValue * contentScrollSize.current.width,
-              scrollTotal: contentScrollSize.current.width,
+              scroll:
+                latestValue *
+                (contentScrollSize.current.width - ref.current.clientWidth),
+              scrollTotal:
+                contentScrollSize.current.width - ref.current.clientWidth,
               scrollVisible: containerSize.current.width,
             });
           }
           if (orientation === 'vertical' && scrollOrientation === 'y') {
             onScroll({
               scrollProgress: latestValue,
-              scroll: latestValue * contentScrollSize.current.height,
-              scrollTotal: contentScrollSize.current.height,
+              scroll:
+                latestValue *
+                (contentScrollSize.current.height - ref.current.clientHeight),
+              scrollTotal:
+                contentScrollSize.current.height - ref.current.clientHeight,
               scrollVisible: containerSize.current.height,
             });
           }

package/src/lib/effects/index.ts

@@ -3,3 +3,4 @@ export * from './custom-scroll';
 export * from './smooth-scroll.effect';
 export * from './SyncedFixedWrapper';
 export * from './ThemeProvider';
+export * from './AnimateOnScroll';

package/src/lib/effects/scrollDriven.ts

@@ -0,0 +1,239 @@
+import { CSSProperties } from 'react';
+
+export type InitAnimationOptions = {
+  once?: boolean;
+};
+
+let initialized = false;
+let teardown: (() => void) | null = null;
+
+function supportsScrollTimeline(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    // @ts-ignore
+    if (window.CSS && typeof window.CSS.supports === 'function') {
+      // @ts-ignore
+      return (
+        CSS.supports('animation-timeline: view()') ||
+        CSS.supports('animation-timeline: scroll()') ||
+        CSS.supports('view-timeline-name: --a')
+      );
+    }
+  } catch {}
+  return false;
+}
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || !('matchMedia' in window)) return false;
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+// Helpers to read CSS custom properties used by the Tailwind plugin
+function readVar(el: Element, name: string): string | null {
+  const v = getComputedStyle(el).getPropertyValue(name).trim();
+  return v || null;
+}
+
+function parsePercentFromRangeToken(token?: string | null): number | null {
+  if (!token) return null;
+  // Expect patterns like "entry 20%", "cover 80%", "center 60%" etc.
+  const parts = token.split(/\s+/);
+  const last = parts[parts.length - 1];
+  if (!last) return null;
+  if (last.endsWith('%')) {
+    const n = parseFloat(last);
+    if (!isNaN(n)) return Math.max(0, Math.min(100, n)) / 100;
+  }
+  // px not supported for now (would require element size); fallback null
+  return null;
+}
+
+function getRange(el: Element): { start: number; end: number } {
+  const startToken = readVar(el, '--udx-range-start');
+  const endToken = readVar(el, '--udx-range-end');
+  const start = parsePercentFromRangeToken(startToken) ?? 0.2; // default entry 20%
+  const end = parsePercentFromRangeToken(endToken) ?? 0.5; // default cover 50%
+  // Ensure sane ordering
+  const s = Math.max(0, Math.min(1, start));
+  const e = Math.max(s + 0.001, Math.min(1, end));
+  return { start: s, end: e };
+}
+
+function num(val: string | null | undefined, unit?: 'px' | 'deg'): number | null {
+  if (!val) return null;
+  const v = val.trim();
+  if (unit && v.endsWith(unit)) {
+    const n = parseFloat(v);
+    return isNaN(n) ? null : n;
+  }
+  // Try plain number
+  const n = parseFloat(v);
+  return isNaN(n) ? null : n;
+}
+
+function lerp(a: number, b: number, t: number) {
+  return a + (b - a) * t;
+}
+
+function applyProgress(el: HTMLElement, from: CSSProperties, to: CSSProperties, p: number) {
+  // Opacity
+  const o0 = from.opacity != null ? Number(from.opacity) : 1;
+  const o1 = to.opacity != null ? Number(to.opacity) : 1;
+  const op = lerp(o0, o1, p);
+  el.style.opacity = String(op);
+
+  // Transform: translateX/Y (px only), scale, rotate (deg)
+  const fx = num((from as any)['--tw-enter-translate-x'] as any) ??
+             num((from as any)['--tw-exit-translate-x'] as any) ?? 0;
+  const fy = num((from as any)['--tw-enter-translate-y'] as any) ??
+             num((from as any)['--tw-exit-translate-y'] as any) ?? 0;
+  const tx = num((to as any)['--tw-enter-translate-x'] as any) ??
+             num((to as any)['--tw-exit-translate-x'] as any) ?? 0;
+  const ty = num((to as any)['--tw-enter-translate-y'] as any) ??
+             num((to as any)['--tw-exit-translate-y'] as any) ?? 0;
+
+  const fs = num((from as any)['--tw-enter-scale'] as any) ??
+             num((from as any)['--tw-exit-scale'] as any) ?? 1;
+  const ts = num((to as any)['--tw-enter-scale'] as any) ??
+             num((to as any)['--tw-exit-scale'] as any) ?? 1;
+
+  const fr = num((from as any)['--tw-enter-rotate'] as any) ??
+             num((from as any)['--tw-exit-rotate'] as any) ?? 0;
+  const tr = num((to as any)['--tw-enter-rotate'] as any) ??
+             num((to as any)['--tw-exit-rotate'] as any) ?? 0;
+
+  const x = lerp(fx, tx, p);
+  const y = lerp(fy, ty, p);
+  const s = lerp(fs, ts, p);
+  const r = lerp(fr, tr, p);
+
+  const transforms: string[] = [];
+  if (x !== 0 || y !== 0) transforms.push(`translate3d(${x}px, ${y}px, 0)`);
+  if (s !== 1) transforms.push(`scale(${s})`);
+  if (r !== 0) transforms.push(`rotate(${r}deg)`);
+  el.style.transform = transforms.length ? transforms.join(' ') : 'none';
+}
+
+function buildFromTo(el: Element): { from: CSSProperties; to: CSSProperties } | null {
+  const cls = el.classList;
+  const isIn = cls.contains('animate-in');
+  const isOut = cls.contains('animate-out');
+  if (!isIn && !isOut) return null;
+
+  const cs = getComputedStyle(el as Element);
+  const enter = {
+    opacity: num(cs.getPropertyValue('--tw-enter-opacity')) ?? undefined,
+    '--tw-enter-translate-x': cs.getPropertyValue('--tw-enter-translate-x') || undefined,
+    '--tw-enter-translate-y': cs.getPropertyValue('--tw-enter-translate-y') || undefined,
+    '--tw-enter-scale': cs.getPropertyValue('--tw-enter-scale') || undefined,
+    '--tw-enter-rotate': cs.getPropertyValue('--tw-enter-rotate') || undefined,
+  } as CSSProperties & Record<string, any>;
+  const exit = {
+    opacity: num(cs.getPropertyValue('--tw-exit-opacity')) ?? undefined,
+    '--tw-exit-translate-x': cs.getPropertyValue('--tw-exit-translate-x') || undefined,
+    '--tw-exit-translate-y': cs.getPropertyValue('--tw-exit-translate-y') || undefined,
+    '--tw-exit-scale': cs.getPropertyValue('--tw-exit-scale') || undefined,
+    '--tw-exit-rotate': cs.getPropertyValue('--tw-exit-rotate') || undefined,
+  } as CSSProperties & Record<string, any>;
+
+  if (isIn) {
+    // from enter vars to neutral
+    return {
+      from: enter,
+      to: { opacity: 1, '--tw-enter-translate-x': '0', '--tw-enter-translate-y': '0', '--tw-enter-scale': '1', '--tw-enter-rotate': '0' } as any,
+    };
+  }
+  if (isOut) {
+    // from neutral to exit vars
+    return {
+      from: { opacity: 1, '--tw-exit-translate-x': '0', '--tw-exit-translate-y': '0', '--tw-exit-scale': '1', '--tw-exit-rotate': '0' } as any,
+      to: exit,
+    };
+  }
+  return null;
+}
+
+function findTargets(): HTMLElement[] {
+  const selector = [
+    '.udx-view',
+    '.udx-view-x',
+    '.udx-view-y',
+    '.udx-view-inline',
+    '.udx-view-block',
+    '[data-udx-view]'
+  ]
+    .map((s) => `${s}.animate-in, ${s}.animate-out`)
+    .join(', ');
+  return Array.from(document.querySelectorAll<HTMLElement>(selector));
+}
+
+export function initScrollViewFallback(options: InitAnimationOptions = {}) {
+  if (initialized) return teardown || (() => {});
+  if (typeof window === 'undefined') return () => {};
+  if (supportsScrollTimeline() || prefersReducedMotion()) {
+    initialized = true; // No-op in supporting browsers or reduced motion
+    return () => {};
+  }
+
+  initialized = true;
+  const once = options.once ?? true;
+  const seen = new WeakSet<Element>();
+  let rafId: number | null = null;
+
+  const measure = () => {
+    const targets = findTargets();
+    const vh = window.innerHeight || 0;
+    for (const el of targets) {
+      const rect = el.getBoundingClientRect();
+      const visible = Math.min(rect.bottom, vh) - Math.max(rect.top, 0);
+      const visibleClamped = Math.max(0, Math.min(visible, rect.height));
+      const ratio = rect.height > 0 ? visibleClamped / rect.height : 0;
+
+      const { start, end } = getRange(el);
+      let p = (ratio - start) / (end - start);
+      p = Math.max(0, Math.min(1, p));
+
+      if (once && seen.has(el) && p < 1) p = 1;
+
+      const fe = buildFromTo(el);
+      if (!fe) continue;
+      const { from, to } = fe;
+      applyProgress(el, from, to, p);
+
+      if (p >= 1 && once) seen.add(el);
+    }
+  };
+
+  const onScroll = () => {
+    if (rafId != null) return;
+    rafId = window.requestAnimationFrame(() => {
+      rafId = null;
+      measure();
+    });
+  };
+
+  // Initial run and listeners
+  measure();
+  window.addEventListener('scroll', onScroll, { passive: true });
+  window.addEventListener('resize', onScroll);
+
+  const mo = new MutationObserver(() => {
+    onScroll();
+  });
+  mo.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+  });
+
+  teardown = () => {
+    window.removeEventListener('scroll', onScroll);
+    window.removeEventListener('resize', onScroll);
+    if (rafId != null) cancelAnimationFrame(rafId);
+    mo.disconnect();
+    initialized = false;
+    teardown = null;
+  };
+
+  return teardown;
+}