@adecore/ui 0.54.4 → 0.54.6

package/dist/UIProvider.js

@@ -4,10 +4,11 @@ import { I18nextProvider } from 'react-i18next';
 import { setFormatSource } from './format/locale.js';
 import { addUiResources } from './locales.js';
 import { startInputModality } from './modality.js';
+import { startSyncedAnimations } from './synced-animations.js';
 import { TooltipProvider } from "./Tooltip.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function UIProvider(t0) {
-  const $ = _c(7);
+  const $ = _c(8);
   const {
     i18n,
     formatSource,
@@ -43,26 +44,34 @@ export function UIProvider(t0) {
   }
   useLayoutEffect(startInputModality, t2);
   let t3;
-  if ($[2] !== children) {
-    t3 = /*#__PURE__*/_jsx(TooltipProvider, {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = [];
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  useLayoutEffect(startSyncedAnimations, t3);
+  let t4;
+  if ($[3] !== children) {
+    t4 = /*#__PURE__*/_jsx(TooltipProvider, {
       children: children
     });
-    $[2] = children;
-    $[3] = t3;
+    $[3] = children;
+    $[4] = t4;
   } else {
-    t3 = $[3];
+    t4 = $[4];
   }
-  let t4;
-  if ($[4] !== i18n || $[5] !== t3) {
-    t4 = /*#__PURE__*/_jsx(I18nextProvider, {
+  let t5;
+  if ($[5] !== i18n || $[6] !== t4) {
+    t5 = /*#__PURE__*/_jsx(I18nextProvider, {
       i18n: i18n,
-      children: t3
+      children: t4
     });
-    $[4] = i18n;
-    $[5] = t3;
+    $[5] = i18n;
     $[6] = t4;
+    $[7] = t5;
   } else {
-    t4 = $[6];
+    t5 = $[7];
   }
-  return t4;
+  return t5;
 }

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export { Slider, type SliderProps } from './Slider.tsx';
 export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
 export { Spinner, type SpinnerProps } from './Spinner.tsx';
 export { SplitButton, type SplitButtonProps } from './SplitButton.tsx';
+export { syncAnimations } from './synced-animations.ts';
 export { Stepper, type StepperProps } from './Stepper.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';
 export { Switch, type SwitchProps } from './Switch.tsx';

package/dist/index.js

@@ -57,6 +57,7 @@ export { Slider } from "./Slider.js";
 export { SlidingColumn } from "./SlidingColumn.js";
 export { Spinner } from "./Spinner.js";
 export { SplitButton } from "./SplitButton.js";
+export { syncAnimations } from './synced-animations.js';
 export { Stepper } from "./Stepper.js";
 export { Surface } from "./Surface.js";
 export { Switch } from "./Switch.js";

package/dist/synced-animations.d.ts

@@ -0,0 +1,8 @@
+interface AnimationStart {
+    readonly animationName: string;
+    readonly target: EventTarget | null;
+}
+export declare function syncAnimations(added: readonly string[]): void;
+export declare function alignAnimation({ animationName, target }: AnimationStart): void;
+export declare function startSyncedAnimations(): void;
+export {};

package/dist/synced-animations.js

@@ -0,0 +1,42 @@
+/* `spinner-hop` is the library's; an app adds its own with `syncAnimations`. */
+const names = new Set(['spinner-hop']);
+let started = false;
+const isCssAnimation = animation => 'animationName' in animation;
+/* Adds looping animations by their `@keyframes` name. A one-off animation does not belong here: on the
+   document's clock it would start long over. Neither does one that restarts on purpose, such as a caret's blink. */
+export function syncAnimations(added) {
+  for (const name of added) {
+    names.add(name);
+  }
+}
+/* Moves a listed animation that just started onto the document timeline's zero. Its own delay still
+   applies, so the dots of a spinner keep their thirds. */
+export function alignAnimation({
+  animationName,
+  target
+}) {
+  if (!names.has(animationName) || target === null || !('getAnimations' in target)) {
+    return;
+  }
+  for (const animation of target.getAnimations()) {
+    if (isCssAnimation(animation) && animation.animationName === animationName && animation.startTime !== 0) {
+      animation.startTime = 0;
+    }
+  }
+}
+/* A CSS animation starts when its element is styled, so two spinners mounted a moment apart take their
+   steps at other moments, and every step of each is a frame of its own. On one clock the steps of every
+   listed animation fall in the same frames, whatever mounted when.
+
+   On `animationstart` and not on mount, so nothing reads styles in a commit; the first step may show in
+   its own phase before it moves onto the grid. `UIProvider` starts it; a second call does nothing. */
+export function startSyncedAnimations() {
+  if (started) {
+    return;
+  }
+  started = true;
+  document.addEventListener('animationstart', alignAnimation, {
+    capture: true,
+    passive: true
+  });
+}

package/dist/theme.css

@@ -630,7 +630,8 @@
        Each dot turns half a circle over the other two, then slides back one gap at a time; the three
        are a third of a turn apart, so at every moment one dot is in the air. The hops move in steps:
        a smooth one changes every frame and keeps the compositor drawing the window at the display's
-       rate for as long as anything works. The three share their step boundaries, so a step is one frame. */
+       rate for as long as anything works. The three share their step boundaries, so a step is one frame,
+       and every spinner shares them with the others on the document's clock (`synced-animations.ts`). */
     .spinner {
         --spinner-duration: 1800ms;
         --spinner-dot: round(calc(var(--spinner-size) * 0.22), 1px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.54.4",
+  "version": "0.54.6",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/UIProvider.tsx

@@ -4,6 +4,7 @@ import { I18nextProvider } from 'react-i18next';
 import { setFormatSource, type FormatSource } from './format/locale.ts';
 import { addUiResources } from './locales.ts';
 import { startInputModality } from './modality.ts';
+import { startSyncedAnimations } from './synced-animations.ts';
 import { TooltipProvider } from './Tooltip.tsx';
 
 export interface UIProviderProps {
@@ -32,6 +33,7 @@ export function UIProvider({ i18n, formatSource, children }: UIProviderProps) {
     }
 
     useLayoutEffect(startInputModality, []);
+    useLayoutEffect(startSyncedAnimations, []);
 
     return (
         <I18nextProvider i18n={i18n}>

package/src/index.ts

@@ -78,6 +78,7 @@ export { Slider, type SliderProps } from './Slider.tsx';
 export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
 export { Spinner, type SpinnerProps } from './Spinner.tsx';
 export { SplitButton, type SplitButtonProps } from './SplitButton.tsx';
+export { syncAnimations } from './synced-animations.ts';
 export { Stepper, type StepperProps } from './Stepper.tsx';
 export { Surface, type SurfaceProps } from './Surface.tsx';
 export { Switch, type SwitchProps } from './Switch.tsx';

package/src/synced-animations.ts

@@ -0,0 +1,49 @@
+/* `spinner-hop` is the library's; an app adds its own with `syncAnimations`. */
+const names = new Set<string>(['spinner-hop']);
+
+let started = false;
+
+/* What an `animationstart` hands the listener: the target is an element, which a test fakes without a DOM. */
+interface AnimationStart {
+    readonly animationName: string;
+    readonly target: EventTarget | null;
+}
+
+const isCssAnimation = (animation: Animation): animation is CSSAnimation => 'animationName' in animation;
+
+/* Adds looping animations by their `@keyframes` name. A one-off animation does not belong here: on the
+   document's clock it would start long over. Neither does one that restarts on purpose, such as a caret's blink. */
+export function syncAnimations(added: readonly string[]): void {
+    for (const name of added) {
+        names.add(name);
+    }
+}
+
+/* Moves a listed animation that just started onto the document timeline's zero. Its own delay still
+   applies, so the dots of a spinner keep their thirds. */
+export function alignAnimation({ animationName, target }: AnimationStart): void {
+    if (!names.has(animationName) || target === null || !('getAnimations' in target)) {
+        return;
+    }
+
+    for (const animation of (target as Element).getAnimations()) {
+        if (isCssAnimation(animation) && animation.animationName === animationName && animation.startTime !== 0) {
+            animation.startTime = 0;
+        }
+    }
+}
+
+/* A CSS animation starts when its element is styled, so two spinners mounted a moment apart take their
+   steps at other moments, and every step of each is a frame of its own. On one clock the steps of every
+   listed animation fall in the same frames, whatever mounted when.
+
+   On `animationstart` and not on mount, so nothing reads styles in a commit; the first step may show in
+   its own phase before it moves onto the grid. `UIProvider` starts it; a second call does nothing. */
+export function startSyncedAnimations(): void {
+    if (started) {
+        return;
+    }
+
+    started = true;
+    document.addEventListener('animationstart', alignAnimation, { capture: true, passive: true });
+}

package/src/theme.css

@@ -630,7 +630,8 @@
        Each dot turns half a circle over the other two, then slides back one gap at a time; the three
        are a third of a turn apart, so at every moment one dot is in the air. The hops move in steps:
        a smooth one changes every frame and keeps the compositor drawing the window at the display's
-       rate for as long as anything works. The three share their step boundaries, so a step is one frame. */
+       rate for as long as anything works. The three share their step boundaries, so a step is one frame,
+       and every spinner shares them with the others on the document's clock (`synced-animations.ts`). */
     .spinner {
         --spinner-duration: 1800ms;
         --spinner-dot: round(calc(var(--spinner-size) * 0.22), 1px);