@udixio/ui-react 2.10.10 → 2.10.12

package/src/lib/components/ProgressIndicator.tsx

@@ -43,13 +43,9 @@ export const ProgressIndicator = ({
   };
 
   useEffect(() => {
-    if (
-      (variant === 'circular-indeterminate' ||
-        variant === 'linear-indeterminate') &&
-      completedPercentage !== 100
-    ) {
+    if (variant === 'circular-indeterminate' && completedPercentage !== 100) {
       const interval = setInterval(() => {
-        setCompletedPercentage(togglePercentage ? 10 : 90);
+        setCompletedPercentage(togglePercentage ? 20 : 40);
         setTogglePercentage(!togglePercentage);
       }, getTransitionRotate() * 1000);
       return () => clearInterval(interval);
@@ -83,26 +79,62 @@ export const ProgressIndicator = ({
 
   return (
     <>
-      {(variant === 'linear-determinate' ||
-        variant == 'linear-indeterminate') && (
+      {variant === 'linear-indeterminate' && (
+        <div className={styles.progressIndicator} {...restProps}>
+          <motion.div
+            animate={{
+              width: ['0%', '0%', '0%', '20%'],
+              marginLeft: ['0px', '0px', '6px', '6px'],
+              marginRight: ['0px', '0px', '6px', '6px'],
+            }}
+            transition={{
+              duration: 1.5,
+              repeat: Infinity,
+              ease: 'easeInOut',
+              times: [0, 0.499, 0.5, 1],
+            }}
+            style={{ flexShrink: 0 }}
+            className={styles.activeIndicator}
+          />
+          <motion.div
+            animate={{ width: ['0%', '40%', '100%'] }}
+            transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}
+            style={{ flexShrink: 0 }}
+            className={styles.firstTrack}
+          />
+          <motion.div
+            animate={{ width: ['20%', '60%', '20%'] }}
+            transition={{
+              duration: 1.5,
+              repeat: Infinity,
+              ease: 'easeInOut',
+              times: [0, 0.5, 1],
+            }}
+            style={{ flexShrink: 0, marginLeft: '6px' }}
+            className={styles.activeIndicator}
+          />
+          <div style={{ marginLeft: '6px' }} className={styles.lastTrack} />
+        </div>
+      )}
+      {variant === 'linear-determinate' && (
         <div className={styles.progressIndicator} {...restProps}>
           <div
             style={{
               width: `${completedPercentage}%`,
               transition: `width ${transitionDuration}ms ease-in-out ${completedPercentage == 100 ? ', max-height 200ms 0.5s ease-in-out' : ''}`,
             }}
-            className={styles.track}
+            className={styles.activeIndicator}
           ></div>
           <div
             style={{
               marginLeft: completedPercentage != 100 ? '6px' : '0px',
               transition: `width ${transitionDuration}ms ease-in-out ${completedPercentage == 100 ? `, max-height 200ms 0.5s ease-in-out, margin-left ${transitionDuration}ms ${transitionDuration / 1.5}ms` : ''}`,
             }}
-            className={styles.activeIndicator}
+            className={styles.lastTrack}
           ></div>
           <div
             style={{
-              width: `4 px`,
+              width: `4px`,
               transition: `width ${transitionDuration}ms ease-in-out, max-height 200ms 0.5s ease-in-out`,
             }}
             className={styles.stop}
@@ -112,17 +144,25 @@ export const ProgressIndicator = ({
       {(variant === 'circular-determinate' ||
         variant == 'circular-indeterminate') && (
         <motion.svg
-          key={togglePercentage + ''}
+          key={
+            variant === 'circular-indeterminate'
+              ? togglePercentage + ''
+              : 'static'
+          }
           width="48"
           height="48"
           viewBox="0 0 48 48"
           initial={{ rotate: -90 }}
-          animate={{ rotate: 270 }}
-          transition={{
-            repeat: Infinity,
-            duration: getTransitionRotate(),
-            ease: 'linear',
-          }}
+          animate={{ rotate: variant === 'circular-indeterminate' ? 270 : -90 }}
+          transition={
+            variant === 'circular-indeterminate'
+              ? {
+                  repeat: Infinity,
+                  duration: getTransitionRotate(),
+                  ease: 'linear',
+                }
+              : { duration: transitionDuration / 1000 }
+          }
           className={styles.progressIndicator}
           {...(restProps as any)}
         >
@@ -133,8 +173,12 @@ export const ProgressIndicator = ({
             style={{
               strokeLinecap: 'round',
             }}
-            initial="hidden"
-            animate="visible"
+            initial={
+              variant === 'circular-indeterminate' ? 'hidden' : 'determinate'
+            }
+            animate={
+              variant === 'circular-indeterminate' ? 'visible' : 'determinate'
+            }
             className={styles.activeIndicator}
             variants={{
               hidden: {
@@ -143,14 +187,24 @@ export const ProgressIndicator = ({
               visible: {
                 pathLength: togglePercentage ? 90 / 100 : 10 / 100,
               },
+              determinate: {
+                pathLength: completedPercentage / 100,
+              },
             }}
             transition={{
-              pathLength: {
-                type: 'tween',
-                ease: 'linear',
-                duration: getTransitionRotate(),
-                bounce: 0,
-              },
+              pathLength:
+                variant === 'circular-indeterminate'
+                  ? {
+                      type: 'tween',
+                      ease: 'linear',
+                      duration: getTransitionRotate(),
+                      bounce: 0,
+                    }
+                  : {
+                      type: 'tween',
+                      ease: 'easeInOut',
+                      duration: transitionDuration / 1000,
+                    },
             }}
           />
         </motion.svg>

package/src/lib/effects/ThemeProvider.tsx

@@ -2,10 +2,17 @@ import {
   type API,
   type ConfigInterface,
   ContextOptions,
+  FontPlugin,
   loader,
+  serializeThemeContext,
 } from '@udixio/theme';
 import { useEffect, useRef, useState } from 'react';
 import { TailwindPlugin } from '@udixio/tailwind';
+import type {
+  WorkerInboundMessage,
+  WorkerOutboundMessage,
+} from './theme.worker';
+import ThemeWorker from './theme.worker?worker&inline';
 
 function isValidHexColor(hexColorString: string) {
   const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
@@ -14,7 +21,7 @@ function isValidHexColor(hexColorString: string) {
 
 export const ThemeProvider = ({
   config,
-  throttleDelay = 100, // Délai par défaut de 300ms
+  throttleDelay = 100,
   onLoad,
   loadTheme = false,
 }: {
@@ -24,16 +31,48 @@ export const ThemeProvider = ({
   loadTheme?: boolean;
 }) => {
   const [themeApi, setThemeApi] = useState<API | null>(null);
+  const [outputCss, setOutputCss] = useState<string | null>(null);
+
+  const workerRef = useRef<Worker | null>(null);
+  const generationRef = useRef(0);
+  const lastAppliedIdRef = useRef(0);
+  const themeApiRef = useRef<API | null>(null);
+  const firstLoadDoneRef = useRef(false);
+  const onLoadRef = useRef(onLoad);
+  useEffect(() => {
+    onLoadRef.current = onLoad;
+  }, [onLoad]);
 
-  // Charger l'API du thème une fois au montage
+  // Initialisation de l'API et du Worker
   useEffect(() => {
+    let cancelled = false;
+
     (async () => {
       const api = await loader(config, loadTheme);
+      if (cancelled) return;
+
+      themeApiRef.current = api;
       setThemeApi(api);
+
+      const worker = new ThemeWorker() as Worker;
+      workerRef.current = worker;
+
+      worker.onmessage = (e: MessageEvent<WorkerOutboundMessage>) => {
+        if (e.data.id > lastAppliedIdRef.current) {
+          lastAppliedIdRef.current = e.data.id;
+          firstLoadDoneRef.current = true;
+          setOutputCss(e.data.css);
+          onLoadRef.current?.(themeApiRef.current!);
+        }
+      };
     })();
-  }, []);
 
-  const [outputCss, setOutputCss] = useState<string | null>(null);
+    return () => {
+      cancelled = true;
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, []);
 
   // Throttle avec exécution en tête (leading) et en fin (trailing)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -41,11 +80,10 @@ export const ThemeProvider = ({
   const lastArgsRef = useRef<Partial<ContextOptions> | null>(null);
 
   useEffect(() => {
-    if (!themeApi) return; // Attendre que l'API soit prête
+    if (!themeApi) return;
 
     const ctx: Partial<ContextOptions> = {
       ...config,
-      // Assurer la compatibilité avec l'API qui attend sourceColorHex
       sourceColor: config.sourceColor,
     };
 
@@ -53,11 +91,9 @@ export const ThemeProvider = ({
     const timeSinceLast = now - lastExecTimeRef.current;
 
     const invoke = async (args: Partial<ContextOptions>) => {
-      // applique et notifie
       await applyThemeChange(args);
     };
 
-    // 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);
@@ -67,7 +103,6 @@ export const ThemeProvider = ({
       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);
@@ -83,34 +118,43 @@ export const ThemeProvider = ({
       }
     }
 
-    // Cleanup: au changement de dépendances, ne rien faire ici (on gère trailing)
     return () => {};
   }, [config, throttleDelay, themeApi]);
 
   const applyThemeChange = async (ctx: Partial<ContextOptions>) => {
-    if (typeof ctx.sourceColor == 'string') {
-      if (!isValidHexColor(ctx.sourceColor)) {
-        throw new Error('Invalid hex color');
-      }
+    if (typeof ctx.sourceColor === 'string' && !isValidHexColor(ctx.sourceColor)) {
+      throw new Error('Invalid hex color');
     }
 
-    if (!themeApi) {
-      // L'API n'est pas prête; ignorer silencieusement car l'effet principal attend themeApi
-      return;
-    }
-    themeApi.context.update(ctx);
+    const api = themeApiRef.current;
+    if (!api) return;
+
+    // Toujours évaluer sur le main thread (rapide)
+    api.context.update(ctx);
+    api.palettes.sync((ctx as any).palettes);
 
-    await themeApi.load();
+    const worker = workerRef.current;
 
-    const outputCss = themeApi?.plugins
-      .getPlugin(TailwindPlugin)
-      .getInstance().outputCss;
-    setOutputCss(outputCss);
+    // Fallback synchrone : premier rendu ou Worker pas encore prêt
+    if (!worker || !firstLoadDoneRef.current) {
+      await api.load();
+      const css = api.plugins.getPlugin(TailwindPlugin).getInstance().outputCss;
+      setOutputCss(css);
+      firstLoadDoneRef.current = true;
+      onLoad?.(api);
+      return;
+    }
 
-    onLoad?.(themeApi);
+    // Offload au Worker
+    const id = ++generationRef.current;
+    worker.postMessage({
+      id,
+      snapshot: serializeThemeContext(api),
+      tailwindOptions: api.plugins.getPlugin(TailwindPlugin).options,
+      fontOptions: api.plugins.getPlugin(FontPlugin).options,
+    } satisfies WorkerInboundMessage);
   };
 
-  // Cleanup lors du démontage du composant
   useEffect(() => {
     return () => {
       if (timeoutRef.current) {

package/src/lib/effects/theme.worker.ts

@@ -0,0 +1,97 @@
+import {
+  loader,
+  getVariantByName,
+  Hct,
+  FontPlugin,
+} from '@udixio/theme';
+import type { API, FontPluginOptions, ThemeContextSnapshot } from '@udixio/theme';
+import { TailwindPlugin } from '@udixio/tailwind';
+import type { TailwindPluginOptions } from '@udixio/tailwind';
+
+export interface WorkerInboundMessage {
+  id: number;
+  snapshot: ThemeContextSnapshot;
+  tailwindOptions: TailwindPluginOptions;
+  fontOptions: FontPluginOptions;
+}
+
+export interface WorkerOutboundMessage {
+  id: number;
+  css: string;
+}
+
+let workerApi: API | null = null;
+let latestMessage: WorkerInboundMessage | null = null;
+let processing = false;
+
+async function processLatest() {
+  if (processing || !latestMessage) return;
+  processing = true;
+
+  const msg = latestMessage;
+  latestMessage = null;
+
+  const { snapshot, tailwindOptions, fontOptions } = msg;
+
+  const palettesCallbacks = Object.fromEntries(
+    Object.entries(snapshot.palettes).map(([key, { hue, chroma }]) => [
+      key,
+      () => ({ hue, chroma }),
+    ]),
+  );
+
+  try {
+    if (!workerApi) {
+      // Initialisation unique — coût amorti sur tous les messages suivants
+      workerApi = await loader(
+        {
+          sourceColor: Hct.from(
+            snapshot.sourceColor.hue,
+            snapshot.sourceColor.chroma,
+            snapshot.sourceColor.tone,
+          ),
+          isDark: snapshot.isDark,
+          contrastLevel: snapshot.contrastLevel,
+          variant: getVariantByName(snapshot.variantName),
+          plugins: [new FontPlugin(fontOptions), new TailwindPlugin(tailwindOptions)],
+        },
+        false,
+      );
+      workerApi.palettes.sync(palettesCallbacks);
+    } else {
+      // Mise à jour légère — pas de re-bootstrap
+      workerApi.context.update({
+        isDark: snapshot.isDark,
+        contrastLevel: snapshot.contrastLevel,
+        sourceColor: Hct.from(
+          snapshot.sourceColor.hue,
+          snapshot.sourceColor.chroma,
+          snapshot.sourceColor.tone,
+        ),
+        variant: getVariantByName(snapshot.variantName),
+      });
+      workerApi.palettes.sync(palettesCallbacks);
+
+      // Mise à jour des options plugins si elles ont changé
+      workerApi.plugins.getPlugin(TailwindPlugin).options = tailwindOptions;
+      workerApi.plugins.getPlugin(FontPlugin).options = fontOptions;
+    }
+
+    await workerApi.load();
+
+    const css = workerApi.plugins.getPlugin(TailwindPlugin).getInstance().outputCss;
+    self.postMessage({ id: msg.id, css } satisfies WorkerOutboundMessage);
+  } catch (e) {
+    console.error('[Worker] error during processLatest:', e);
+    workerApi = null; // reset state for clean retry
+  } finally {
+    processing = false;
+    // Traite le prochain message s'il est arrivé pendant le traitement
+    processLatest();
+  }
+}
+
+self.onmessage = (event: MessageEvent<WorkerInboundMessage>) => {
+  latestMessage = event.data;
+  processLatest();
+};

package/src/lib/interfaces/progress-indicator.interface.ts

@@ -31,5 +31,11 @@ export interface ProgressIndicatorInterface {
   };
   states: { isVisible: boolean };
 
-  elements: ['progressIndicator', 'stop', 'activeIndicator', 'track'];
+  elements: [
+    'progressIndicator',
+    'stop',
+    'activeIndicator',
+    'lastTrack',
+    'firstTrack',
+  ];
 }

package/src/lib/styles/card.style.ts

@@ -8,7 +8,7 @@ import {
 
 const cardConfig: ClassNameComponent<CardInterface> = ({
   variant,
-  isInteractive,
+  interactive,
 }) => ({
   card: classNames(
     ' rounded-xl overflow-hidden ',
@@ -16,7 +16,7 @@ const cardConfig: ClassNameComponent<CardInterface> = ({
     variant === 'elevated' && 'bg-surface-container-low shadow-1',
     variant === 'filled' && 'bg-surface-container-highest',
     {
-      'group/card': isInteractive,
+      'group/card cursor-pointer': interactive,
     },
   ),
 });

package/src/lib/styles/carousel-item.style.ts

@@ -6,13 +6,9 @@ import {
   defaultClassNames,
 } from '../utils';
 
-export const carouselItemConfig: ClassNameComponent<CarouselItemInterface> = ({
-  width,
-}) => {
+export const carouselItemConfig: ClassNameComponent<CarouselItemInterface> = () => {
   return {
     carouselItem: classNames('rounded-[28px] overflow-hidden flex-none', {
-      hidden: width === undefined,
-      'flex-1': width == null,
     }),
   };
 };

package/src/lib/styles/progress-indicator.style.ts

@@ -12,19 +12,27 @@ const progressIndicatorConfig: ClassNameComponent<
   progressIndicator: classNames(
     (variant === 'linear-determinate' || variant == 'linear-indeterminate') &&
       'flex w-full h-1',
+    variant === 'linear-indeterminate' &&
+      'relative overflow-hidden rounded-full',
   ),
-  track: classNames('h-full rounded-full bg-primary rounded-l-full', {
-    'max-h-0': !isVisible,
-    'max-h-full': isVisible,
-  }),
-  activeIndicator: classNames(
+  firstTrack: classNames(
+    (variant === 'linear-determinate' || variant === 'linear-indeterminate') &&
+      'h-full rounded-full bg-primary-container',
     {
       'max-h-0': !isVisible,
       'max-h-full': isVisible,
     },
-    (variant === 'linear-determinate' || variant == 'linear-indeterminate') &&
-      'h-full flex-1 rounded-full bg-primary-container',
-
+  ),
+  activeIndicator: classNames(
+    'h-full rounded-full bg-primary',
+    variant === 'linear-determinate' && {
+      'rounded-l-full': true,
+    },
+    (variant === 'linear-indeterminate' ||
+      variant === 'linear-determinate') && {
+      'max-h-0': !isVisible,
+      'max-h-full': isVisible,
+    },
     (variant === 'circular-determinate' ||
       variant == 'circular-indeterminate') && [
       'stroke-primary fill-transparent ',
@@ -34,6 +42,14 @@ const progressIndicatorConfig: ClassNameComponent<
       },
     ],
   ),
+  lastTrack: classNames(
+    (variant === 'linear-determinate' || variant == 'linear-indeterminate') &&
+      'h-full flex-1 rounded-full bg-primary-container',
+    {
+      'max-h-0': !isVisible,
+      'max-h-full': isVisible,
+    },
+  ),
   stop: classNames(
     'absolute top-1/2 -translate-y-1/2 right-0 bg-primary rounded-full size-1',
     {

package/vite.config.ts

@@ -32,10 +32,6 @@ export default defineConfig(async () => ({
       brotliSize: true,
     }),
   ],
-  // Uncomment this if you are using workers.
-  // worker: {
-  //  plugins: [ nxViteTsPaths() ],
-  // },
   // Configuration for building your library.
   // See: https://vitejs.dev/guide/build.html#library-mode
   build: {