@almadar/ui 5.122.2 → 5.122.4

package/dist/avl/index.cjs

@@ -5162,7 +5162,7 @@ var init_Modal = __esm({
       const isDragging = React91.useRef(false);
       const [closing, setClosing] = React91.useState(false);
       const wasOpenRef = React91.useRef(isOpen);
-      React91.useEffect(() => {
+      React91.useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -5367,7 +5367,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  React91.useEffect(() => {
+  React91.useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -14735,7 +14735,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/avl/index.js

@@ -5116,7 +5116,7 @@ var init_Modal = __esm({
       const isDragging = useRef(false);
       const [closing, setClosing] = useState(false);
       const wasOpenRef = useRef(isOpen);
-      useEffect(() => {
+      useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -5321,7 +5321,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -14689,7 +14689,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/components/index.cjs

@@ -4122,7 +4122,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  React74.useEffect(() => {
+  React74.useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -6168,7 +6168,7 @@ var init_Modal = __esm({
       const isDragging = React74.useRef(false);
       const [closing, setClosing] = React74.useState(false);
       const wasOpenRef = React74.useRef(isOpen);
-      React74.useEffect(() => {
+      React74.useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -6847,7 +6847,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React74 from 'react';
-import React74__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, Suspense, lazy, useSyncExternalStore, useLayoutEffect, useId } from 'react';
+import React74__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, Suspense, lazy, useSyncExternalStore, useId } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScopeChain, useCurrentPagePath, useGameAudioContextOptional, useEntitySchemaOptional, TraitScopeProvider } from '@almadar/ui/providers';
@@ -4077,7 +4077,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -6123,7 +6123,7 @@ var init_Modal = __esm({
       const isDragging = useRef(false);
       const [closing, setClosing] = useState(false);
       const wasOpenRef = useRef(isOpen);
-      useEffect(() => {
+      useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -6802,7 +6802,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/providers/index.cjs

@@ -1333,7 +1333,7 @@ var init_Modal = __esm({
       const isDragging = React84.useRef(false);
       const [closing, setClosing] = React84.useState(false);
       const wasOpenRef = React84.useRef(isOpen);
-      React84.useEffect(() => {
+      React84.useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -1538,7 +1538,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  React84.useEffect(() => {
+  React84.useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -11259,7 +11259,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/providers/index.js

@@ -1,5 +1,5 @@
 import * as React84 from 'react';
-import React84__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, lazy, useLayoutEffect, useId, useSyncExternalStore } from 'react';
+import React84__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useLayoutEffect, lazy, useId, useSyncExternalStore } from 'react';
 import { EventBusContext, useTraitScopeChain, useEntitySchemaOptional, TraitScopeProvider, useCurrentPagePath, useGameAudioContextOptional } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import { clsx } from 'clsx';
@@ -1288,7 +1288,7 @@ var init_Modal = __esm({
       const isDragging = useRef(false);
       const [closing, setClosing] = useState(false);
       const wasOpenRef = useRef(isOpen);
-      useEffect(() => {
+      useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -1493,7 +1493,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -11214,7 +11214,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/runtime/index.cjs

@@ -1811,7 +1811,7 @@ var init_Modal = __esm({
       const isDragging = React82.useRef(false);
       const [closing, setClosing] = React82.useState(false);
       const wasOpenRef = React82.useRef(isOpen);
-      React82.useEffect(() => {
+      React82.useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -2016,7 +2016,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  React82.useEffect(() => {
+  React82.useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -11327,7 +11327,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/dist/runtime/index.js

@@ -1,5 +1,5 @@
 import * as React82 from 'react';
-import React82__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useSyncExternalStore, lazy, useLayoutEffect, useId } from 'react';
+import React82__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, useSyncExternalStore, useLayoutEffect, lazy, useId } from 'react';
 import { EventBusContext, useTraitScopeChain, useEntitySchemaOptional, useEntitySchema, getAllPages, OrbitalProvider, TraitScopeProvider, ServerBridgeProvider, useCurrentPagePath, useGameAudioContextOptional, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge } from '@almadar/ui/providers';
 export { EntitySchemaProvider, ServerBridgeProvider, TraitContext, TraitProvider, useEntitySchema, useEntitySchemaOptional, useServerBridge, useTrait, useTraitContext } from '@almadar/ui/providers';
 import { createLogger, setNamespaceLevel, isLogLevelEnabled } from '@almadar/logger';
@@ -1767,7 +1767,7 @@ var init_Modal = __esm({
       const isDragging = useRef(false);
       const [closing, setClosing] = useState(false);
       const wasOpenRef = useRef(isOpen);
-      useEffect(() => {
+      useLayoutEffect(() => {
         if (wasOpenRef.current && !isOpen) setClosing(true);
         wasOpenRef.current = isOpen;
       }, [isOpen]);
@@ -1972,7 +1972,7 @@ function usePresence(show, opts) {
     setMounted(false);
     onExitedRef.current?.();
   }, [clearSafe]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const moving = animate && isMotionEnabled();
     if (show && !prev.current) {
       setExiting(false);
@@ -11283,7 +11283,7 @@ var init_Skeleton = __esm({
     init_Box();
     init_Stack();
     init_Stack();
-    pulseClass = "animate-pulse bg-muted/60 rounded";
+    pulseClass = "almadar-shimmer animate-shimmer rounded";
     Skeleton.displayName = "Skeleton";
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.122.2",
+  "version": "5.122.4",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [

package/tailwind-preset.cjs

@@ -385,6 +385,10 @@ module.exports = {
             transform: 'var(--motion-modal-enter-to-transform, translateZ(0))',
           },
         },
+        shimmer: {
+          '0%': { backgroundPosition: '200% 0' },
+          '100%': { backgroundPosition: '-200% 0' },
+        },
         'modal-out': {
           '0%': {
             opacity: 'var(--motion-modal-exit-from-opacity, 1)',
@@ -506,7 +510,7 @@ module.exports = {
         // Motion-token-driven durations/easings (fall back to legacy
         // --transition-* so themes that haven't migrated keep working).
         'modal-in': 'modal-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
-        'modal-out': 'modal-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'modal-out': 'modal-out var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'overlay-in': 'overlay-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'overlay-out': 'overlay-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'slide-up': 'slide-up var(--duration-slow, var(--transition-slow, 400ms)) var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
@@ -520,6 +524,7 @@ module.exports = {
         'fade-out': 'fade-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'page-in': 'page-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
         'page-out': 'page-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'shimmer': 'shimmer var(--duration-shimmer, 1.5s) var(--easing-linear, linear) infinite',
       },
       // Density-axis spacing scale. Tailwind's default `p-3` / `gap-4` resolve
       // here so existing classes keep working — but now read from tokens.

package/themes/_base.css

@@ -162,7 +162,7 @@
     --motion-modal-exit-from-opacity: 1;
     --motion-modal-exit-from-transform: translateZ(0);
     --motion-modal-exit-to-opacity: 0;
-    --motion-modal-exit-to-transform: scale(0.96) translateY(8px);
+    --motion-modal-exit-to-transform: scale(0.92) translateY(16px);
 
     --motion-slide-up-from-opacity: 0;
     --motion-slide-up-from-transform: translateY(16px);
@@ -214,6 +214,28 @@
     --motion-page-exit-from-transform: translateZ(0);
     --motion-page-exit-to-opacity: 0;
     --motion-page-exit-to-transform: translateY(-8px);
+
+    /* ----------------------------------------------------------------
+     * Skeleton shimmer — the loading-placeholder sweep. Two color stops
+     * (base + highlight) drive the gradient; --duration-shimmer the loop.
+     * Override per theme to restyle the placeholder tone.
+     * ---------------------------------------------------------------- */
+    --skeleton-base: var(--color-muted, rgba(128, 128, 128, 0.18));
+    --skeleton-highlight: var(--color-surface, rgba(255, 255, 255, 0.55));
+    --duration-shimmer: 1.5s;
+}
+
+/* The shimmer gradient background. Pair with the `animate-shimmer` utility
+ * (defined in tailwind-preset) which sweeps background-position. */
+.almadar-shimmer {
+    background-image: linear-gradient(
+        90deg,
+        var(--skeleton-base) 0%,
+        var(--skeleton-highlight) 50%,
+        var(--skeleton-base) 100%
+    );
+    background-size: 200% 100%;
+    background-repeat: no-repeat;
 }
 
 /* ----------------------------------------------------------------