sibujs 3.3.2 → 3.4.0

package/dist/index.js

@@ -19,13 +19,17 @@ import {
   deepSignal,
   defer,
   each,
+  enhance,
+  enhanceAll,
   getAction,
   getSlot,
   html,
   lazy,
+  lazyIsland,
   longPress,
   match,
   mount,
+  mountIslands,
   nextTick,
   onCleanup,
   onMount,
@@ -34,6 +38,7 @@ import {
   ref,
   registerAction,
   registerComponent,
+  registerIsland,
   resolveComponent,
   setGlobalErrorHandler,
   show,
@@ -44,13 +49,10 @@ import {
   transition,
   trapFocus,
   unregisterComponent,
+  unregisterIsland,
   when,
   writable
-} from "./chunk-2ARSB7NG.js";
-import {
-  __resetIdCounter,
-  createId
-} from "./chunk-CCSJMTRN.js";
+} from "./chunk-APFRCIRI.js";
 import {
   a,
   abbr,
@@ -188,36 +190,36 @@ import {
   use,
   var_,
   video
-} from "./chunk-6TCOWMGY.js";
+} from "./chunk-3Z2NGWQI.js";
 import {
   watch
-} from "./chunk-RLTFJYDN.js";
+} from "./chunk-H5FI5WDP.js";
+import {
+  __resetIdCounter,
+  createId
+} from "./chunk-CCSJMTRN.js";
 import {
   trustHTML
 } from "./chunk-EX77FXTT.js";
 import {
   context
-} from "./chunk-5VH3GIDX.js";
+} from "./chunk-RT3IYFN2.js";
 import {
   SVG_NS,
   tagFactory
-} from "./chunk-ZEUP4TUD.js";
+} from "./chunk-JNGGM2XE.js";
 import {
   bindDynamic
-} from "./chunk-QCFBIVIQ.js";
+} from "./chunk-K35BAR4P.js";
 import {
   derived
-} from "./chunk-G6N3LMO2.js";
-import {
-  checkLeaks,
-  dispose,
-  registerDisposer
-} from "./chunk-5VGSK6D2.js";
+} from "./chunk-ITWCTZYH.js";
+import "./chunk-7ZHH77QA.js";
 import "./chunk-L3GAGWCC.js";
 import {
   effect,
   on
-} from "./chunk-N5TQVEKE.js";
+} from "./chunk-BUKYCWHX.js";
 import {
   disableSSR,
   enableSSR,
@@ -227,17 +229,22 @@ import {
   runInSSRContext,
   withSSR
 } from "./chunk-S3NFJO6L.js";
+import {
+  checkLeaks,
+  dispose,
+  registerDisposer
+} from "./chunk-5VGSK6D2.js";
 import {
   batch,
   enqueueBatchedSignal,
   isBatching,
   signal
-} from "./chunk-JCQG2I2G.js";
+} from "./chunk-KZBEVFXZ.js";
 import {
   retrack,
   setMaxDrainIterations,
   untracked
-} from "./chunk-4NJEAPLI.js";
+} from "./chunk-OOUQUCNN.js";
 import "./chunk-COY6PUD2.js";
 export {
   DynamicComponent,
@@ -311,6 +318,8 @@ export {
   em,
   embed,
   enableSSR,
+  enhance,
+  enhanceAll,
   enqueueBatchedSignal,
   fieldset,
   figcaption,
@@ -343,6 +352,7 @@ export {
   kbd,
   label,
   lazy,
+  lazyIsland,
   legend,
   li,
   line,
@@ -361,6 +371,7 @@ export {
   meta,
   meter,
   mount,
+  mountIslands,
   nav,
   nextTick,
   noscript,
@@ -391,6 +402,7 @@ export {
   registerAction,
   registerComponent,
   registerDisposer,
+  registerIsland,
   resolveComponent,
   retrack,
   rp,
@@ -443,6 +455,7 @@ export {
   u,
   ul,
   unregisterComponent,
+  unregisterIsland,
   untracked,
   use,
   var_,

package/dist/motion.cjs

@@ -27,6 +27,7 @@ __export(motion_exports, {
   fadeIn: () => fadeIn,
   fadeOut: () => fadeOut,
   flipIn: () => flipIn,
+  prefersReducedMotion: () => prefersReducedMotion,
   pulse: () => pulse,
   reducedMotion: () => reducedMotion,
   scaleDown: () => scaleDown,
@@ -43,6 +44,37 @@ __export(motion_exports, {
 });
 module.exports = __toCommonJS(motion_exports);
 
+// src/core/dev.ts
+function isDev() {
+  return typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
+    // The bare `__SIBU_DEV__` is a bundler define that only exists in
+    // production builds; under the test runner it is always undefined, so
+    // this branch is unreachable here.
+    /* v8 ignore next 2 */
+    typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
+  );
+}
+var _isDev = isDev();
+function devWarn(message) {
+  if (_isDev) {
+    console.warn(`[SibuJS] ${message}`);
+  }
+}
+
+// src/core/rendering/dispose.ts
+var elementDisposers = /* @__PURE__ */ new WeakMap();
+var _isDev2 = isDev();
+var activeBindingCount = 0;
+function registerDisposer(node, teardown) {
+  let disposers = elementDisposers.get(node);
+  if (!disposers) {
+    disposers = [];
+    elementDisposers.set(node, disposers);
+  }
+  disposers.push(teardown);
+  if (_isDev2) activeBindingCount++;
+}
+
 // src/ui/transition.ts
 function transition(element, options = {}) {
   const {
@@ -115,6 +147,7 @@ function transition(element, options = {}) {
       }
     });
   }
+  registerDisposer(element, cancelPending);
   return { enter, leave };
 }
 function spring(element, keyframes, options = {}) {
@@ -130,181 +163,8 @@ function spring(element, keyframes, options = {}) {
   });
 }
 
-// src/ui/animationPresets.ts
-var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-function createPreset(keyframes, defaults, overrides) {
-  const opts = {
-    ...defaults,
-    ...overrides,
-    fill: overrides?.fill ?? defaults.fill ?? "forwards"
-  };
-  if (prefersReducedMotion()) {
-    return {
-      keyframes: [keyframes[keyframes.length - 1]],
-      options: { ...opts, duration: 0, delay: 0 }
-    };
-  }
-  return { keyframes, options: opts };
-}
-function applyPreset(el, preset) {
-  return new Promise((resolve) => {
-    const anim = el.animate(preset.keyframes, preset.options);
-    anim.onfinish = () => resolve();
-    anim.oncancel = () => resolve();
-  });
-}
-function fadeIn(opts) {
-  return createPreset([{ opacity: 0 }, { opacity: 1 }], { duration: 300, easing: "ease-out" }, opts);
-}
-function fadeOut(opts) {
-  return createPreset([{ opacity: 1 }, { opacity: 0 }], { duration: 300, easing: "ease-in" }, opts);
-}
-var slideOffsets = {
-  up: "translateY(20px)",
-  down: "translateY(-20px)",
-  left: "translateX(20px)",
-  right: "translateX(-20px)"
-};
-function slideIn(direction = "up", opts) {
-  return createPreset(
-    [
-      { transform: slideOffsets[direction], opacity: 0 },
-      { transform: "translate(0, 0)", opacity: 1 }
-    ],
-    { duration: 400, easing: "cubic-bezier(0.16, 1, 0.3, 1)" },
-    opts
-  );
-}
-function slideOut(direction = "down", opts) {
-  return createPreset(
-    [
-      { transform: "translate(0, 0)", opacity: 1 },
-      { transform: slideOffsets[direction], opacity: 0 }
-    ],
-    { duration: 300, easing: "cubic-bezier(0.4, 0, 1, 1)" },
-    opts
-  );
-}
-function scaleUp(opts) {
-  return createPreset(
-    [
-      { transform: "scale(0.85)", opacity: 0 },
-      { transform: "scale(1)", opacity: 1 }
-    ],
-    { duration: 350, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
-    opts
-  );
-}
-function scaleDown(opts) {
-  return createPreset(
-    [
-      { transform: "scale(1)", opacity: 1 },
-      { transform: "scale(0.85)", opacity: 0 }
-    ],
-    { duration: 250, easing: "ease-in" },
-    opts
-  );
-}
-function bounceIn(opts) {
-  return createPreset(
-    [
-      { transform: "scale(0.3)", opacity: 0 },
-      { transform: "scale(1.05)", opacity: 0.8, offset: 0.5 },
-      { transform: "scale(0.95)", opacity: 0.9, offset: 0.7 },
-      { transform: "scale(1)", opacity: 1 }
-    ],
-    { duration: 500, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
-    opts
-  );
-}
-function bounceOut(opts) {
-  return createPreset(
-    [
-      { transform: "scale(1)", opacity: 1 },
-      { transform: "scale(1.05)", opacity: 0.9, offset: 0.3 },
-      { transform: "scale(0.3)", opacity: 0 }
-    ],
-    { duration: 400, easing: "ease-in" },
-    opts
-  );
-}
-function flipIn(axis = "x", opts) {
-  const prop = axis === "x" ? "rotateX" : "rotateY";
-  return createPreset(
-    [
-      { transform: `perspective(400px) ${prop}(90deg)`, opacity: 0 },
-      { transform: `perspective(400px) ${prop}(-10deg)`, opacity: 1, offset: 0.6 },
-      { transform: `perspective(400px) ${prop}(0deg)`, opacity: 1 }
-    ],
-    { duration: 500, easing: "ease-out" },
-    opts
-  );
-}
-function shake(opts) {
-  return createPreset(
-    [
-      { transform: "translateX(0)" },
-      { transform: "translateX(-8px)", offset: 0.1 },
-      { transform: "translateX(8px)", offset: 0.2 },
-      { transform: "translateX(-6px)", offset: 0.3 },
-      { transform: "translateX(6px)", offset: 0.4 },
-      { transform: "translateX(-4px)", offset: 0.5 },
-      { transform: "translateX(4px)", offset: 0.6 },
-      { transform: "translateX(-2px)", offset: 0.7 },
-      { transform: "translateX(0)" }
-    ],
-    { duration: 500, easing: "ease-out", fill: "none" },
-    opts
-  );
-}
-function pulse(opts) {
-  return createPreset(
-    [{ transform: "scale(1)" }, { transform: "scale(1.08)", offset: 0.5 }, { transform: "scale(1)" }],
-    { duration: 400, easing: "ease-in-out", fill: "none" },
-    opts
-  );
-}
-function animate(el, preset) {
-  return applyPreset(el, preset);
-}
-function stagger(elements, preset, delayBetween = 50) {
-  const promises = elements.map(
-    (el, i) => applyPreset(el, {
-      keyframes: preset.keyframes,
-      options: {
-        ...preset.options,
-        delay: (preset.options.delay || 0) + i * delayBetween
-      }
-    })
-  );
-  return Promise.all(promises).then(() => {
-  });
-}
-async function sequence(steps) {
-  for (const step of steps) {
-    await applyPreset(step.el, step.preset);
-  }
-}
-
-// src/core/dev.ts
-function isDev() {
-  return typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : (
-    // The bare `__SIBU_DEV__` is a bundler define that only exists in
-    // production builds; under the test runner it is always undefined, so
-    // this branch is unreachable here.
-    /* v8 ignore next 2 */
-    typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : typeof process !== "undefined" && process.env?.NODE_ENV !== "production"
-  );
-}
-var _isDev = isDev();
-function devWarn(message) {
-  if (_isDev) {
-    console.warn(`[SibuJS] ${message}`);
-  }
-}
-
 // src/reactivity/track-core.ts
-var _isDev2 = isDev();
+var _isDev3 = isDev();
 var POOL_MAX = 4096;
 var nodePool = [];
 function createNode() {
@@ -396,7 +256,7 @@ function safeInvoke(sub) {
   try {
     sub();
   } catch (err) {
-    if (_isDev2) devWarn(`Subscriber threw during notification: ${err instanceof Error ? err.message : String(err)}`);
+    if (_isDev3) devWarn(`Subscriber threw during notification: ${err instanceof Error ? err.message : String(err)}`);
   }
 }
 var suspendDepth = 0;
@@ -718,14 +578,14 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _isDev3 = isDev();
-var _runtimeVersion = true ? "3.3.2" : "dev";
+var _isDev4 = isDev();
+var _runtimeVersion = true ? "3.4.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
   const existing = g[REGISTRY_KEY];
   if (existing) {
-    if (_isDev3 && !existing.__dupWarned) {
+    if (_isDev4 && !existing.__dupWarned) {
       existing.__dupWarned = true;
       devWarn(
         `Multiple instances of the reactive runtime detected on this page (active: ${existing.version}, duplicate: ${_runtimeVersion}). Reactivity still works \u2014 all copies share the first one \u2014 but de-duplicate sibujs in your bundler (e.g. Vite optimizeDeps.exclude: ['sibujs'] or resolve.dedupe: ['sibujs']).`
@@ -827,7 +687,7 @@ var isBatching = API2.isBatching;
 
 // src/core/signals/signal.ts
 var _g = globalThis;
-var _isDev4 = isDev();
+var _isDev5 = isDev();
 function signal(initial, options) {
   const state = {
     value: initial,
@@ -838,7 +698,7 @@ function signal(initial, options) {
     __activeNode: null,
     __name: void 0
   };
-  const debugName = _isDev4 ? options?.name : void 0;
+  const debugName = _isDev5 ? options?.name : void 0;
   const equalsFn = options?.equals;
   if (debugName) state.__name = debugName;
   function get() {
@@ -855,7 +715,7 @@ function signal(initial, options) {
       if (equalsFn(prev, newValue)) return;
       state.value = newValue;
       state.__v++;
-      if (_isDev4) {
+      if (_isDev5) {
         const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
         if (hook) hook.emit("signal:update", { signal: state, name: debugName, oldValue: prev, newValue });
       }
@@ -863,7 +723,7 @@ function signal(initial, options) {
         notifySubscribers2(state);
       }
     };
-  } else if (_isDev4) {
+  } else if (_isDev5) {
     set = (next) => {
       const prev = state.value;
       const newValue = typeof next === "function" ? next(prev) : next;
@@ -888,13 +748,190 @@ function signal(initial, options) {
       }
     };
   }
-  if (_isDev4) {
+  if (_isDev5) {
     const hook = _g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
     if (hook) hook.emit("signal:create", { signal: state, name: debugName, getter: get, initial });
   }
   return [get, set];
 }
 
+// src/ui/reducedMotion.ts
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function reducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    const [reduced2] = signal(false);
+    return { reduced: reduced2, dispose: () => {
+    } };
+  }
+  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const [reduced, setReduced] = signal(mql.matches);
+  const handler = (event) => {
+    setReduced(event.matches);
+  };
+  mql.addEventListener("change", handler);
+  function dispose() {
+    mql.removeEventListener("change", handler);
+  }
+  return { reduced, dispose };
+}
+
+// src/ui/animationPresets.ts
+function createPreset(keyframes, defaults, overrides) {
+  const opts = {
+    ...defaults,
+    ...overrides,
+    fill: overrides?.fill ?? defaults.fill ?? "forwards"
+  };
+  if (prefersReducedMotion()) {
+    return {
+      keyframes: [keyframes[keyframes.length - 1]],
+      options: { ...opts, duration: 0, delay: 0 }
+    };
+  }
+  return { keyframes, options: opts };
+}
+function applyPreset(el, preset) {
+  return new Promise((resolve) => {
+    const anim = el.animate(preset.keyframes, preset.options);
+    anim.onfinish = () => resolve();
+    anim.oncancel = () => resolve();
+  });
+}
+function fadeIn(opts) {
+  return createPreset([{ opacity: 0 }, { opacity: 1 }], { duration: 300, easing: "ease-out" }, opts);
+}
+function fadeOut(opts) {
+  return createPreset([{ opacity: 1 }, { opacity: 0 }], { duration: 300, easing: "ease-in" }, opts);
+}
+var slideOffsets = {
+  up: "translateY(20px)",
+  down: "translateY(-20px)",
+  left: "translateX(20px)",
+  right: "translateX(-20px)"
+};
+function slideIn(direction = "up", opts) {
+  return createPreset(
+    [
+      { transform: slideOffsets[direction], opacity: 0 },
+      { transform: "translate(0, 0)", opacity: 1 }
+    ],
+    { duration: 400, easing: "cubic-bezier(0.16, 1, 0.3, 1)" },
+    opts
+  );
+}
+function slideOut(direction = "down", opts) {
+  return createPreset(
+    [
+      { transform: "translate(0, 0)", opacity: 1 },
+      { transform: slideOffsets[direction], opacity: 0 }
+    ],
+    { duration: 300, easing: "cubic-bezier(0.4, 0, 1, 1)" },
+    opts
+  );
+}
+function scaleUp(opts) {
+  return createPreset(
+    [
+      { transform: "scale(0.85)", opacity: 0 },
+      { transform: "scale(1)", opacity: 1 }
+    ],
+    { duration: 350, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+    opts
+  );
+}
+function scaleDown(opts) {
+  return createPreset(
+    [
+      { transform: "scale(1)", opacity: 1 },
+      { transform: "scale(0.85)", opacity: 0 }
+    ],
+    { duration: 250, easing: "ease-in" },
+    opts
+  );
+}
+function bounceIn(opts) {
+  return createPreset(
+    [
+      { transform: "scale(0.3)", opacity: 0 },
+      { transform: "scale(1.05)", opacity: 0.8, offset: 0.5 },
+      { transform: "scale(0.95)", opacity: 0.9, offset: 0.7 },
+      { transform: "scale(1)", opacity: 1 }
+    ],
+    { duration: 500, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+    opts
+  );
+}
+function bounceOut(opts) {
+  return createPreset(
+    [
+      { transform: "scale(1)", opacity: 1 },
+      { transform: "scale(1.05)", opacity: 0.9, offset: 0.3 },
+      { transform: "scale(0.3)", opacity: 0 }
+    ],
+    { duration: 400, easing: "ease-in" },
+    opts
+  );
+}
+function flipIn(axis = "x", opts) {
+  const prop = axis === "x" ? "rotateX" : "rotateY";
+  return createPreset(
+    [
+      { transform: `perspective(400px) ${prop}(90deg)`, opacity: 0 },
+      { transform: `perspective(400px) ${prop}(-10deg)`, opacity: 1, offset: 0.6 },
+      { transform: `perspective(400px) ${prop}(0deg)`, opacity: 1 }
+    ],
+    { duration: 500, easing: "ease-out" },
+    opts
+  );
+}
+function shake(opts) {
+  return createPreset(
+    [
+      { transform: "translateX(0)" },
+      { transform: "translateX(-8px)", offset: 0.1 },
+      { transform: "translateX(8px)", offset: 0.2 },
+      { transform: "translateX(-6px)", offset: 0.3 },
+      { transform: "translateX(6px)", offset: 0.4 },
+      { transform: "translateX(-4px)", offset: 0.5 },
+      { transform: "translateX(4px)", offset: 0.6 },
+      { transform: "translateX(-2px)", offset: 0.7 },
+      { transform: "translateX(0)" }
+    ],
+    { duration: 500, easing: "ease-out", fill: "none" },
+    opts
+  );
+}
+function pulse(opts) {
+  return createPreset(
+    [{ transform: "scale(1)" }, { transform: "scale(1.08)", offset: 0.5 }, { transform: "scale(1)" }],
+    { duration: 400, easing: "ease-in-out", fill: "none" },
+    opts
+  );
+}
+function animate(el, preset) {
+  return applyPreset(el, preset);
+}
+function stagger(elements, preset, delayBetween = 50) {
+  const promises = elements.map(
+    (el, i) => applyPreset(el, {
+      keyframes: preset.keyframes,
+      options: {
+        ...preset.options,
+        delay: (preset.options.delay || 0) + i * delayBetween
+      }
+    })
+  );
+  return Promise.all(promises).then(() => {
+  });
+}
+async function sequence(steps) {
+  for (const step of steps) {
+    await applyPreset(step.el, step.preset);
+  }
+}
+
 // src/ui/TransitionGroup.ts
 function TransitionGroup(options) {
   const [elements, setElements] = signal([]);
@@ -909,6 +946,7 @@ function TransitionGroup(options) {
     if (options.leave) {
       await options.leave(el);
     }
+    positions.delete(el);
     setElements((prev) => prev.filter((e) => e !== el));
   }
   function track3(newElements) {
@@ -975,27 +1013,7 @@ function viewTransition(callback) {
   return { start, isTransitioning };
 }
 
-// src/ui/reducedMotion.ts
-function reducedMotion() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    const [reduced2] = signal(false);
-    return { reduced: reduced2, dispose: () => {
-    } };
-  }
-  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
-  const [reduced, setReduced] = signal(mql.matches);
-  const handler = (event) => {
-    setReduced(event.matches);
-  };
-  mql.addEventListener("change", handler);
-  function dispose() {
-    mql.removeEventListener("change", handler);
-  }
-  return { reduced, dispose };
-}
-
 // src/ui/springSignal.ts
-var prefersReducedMotion2 = () => typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
 function springSignal(initial, options) {
   const stiffness = options?.stiffness ?? 0.15;
   const damping = options?.damping ?? 0.8;
@@ -1031,7 +1049,7 @@ function springSignal(initial, options) {
   }
   function set(newTarget) {
     target = newTarget;
-    if (prefersReducedMotion2()) {
+    if (prefersReducedMotion()) {
       current = newTarget;
       velocity = 0;
       if (rafId !== null) {
@@ -1065,6 +1083,7 @@ function springSignal(initial, options) {
   fadeIn,
   fadeOut,
   flipIn,
+  prefersReducedMotion,
   pulse,
   reducedMotion,
   scaleDown,

package/dist/motion.d.cts

@@ -134,6 +134,13 @@ declare function viewTransition(callback: () => void | Promise<void>): {
     isTransitioning: () => boolean;
 };
 
+/**
+ * One-shot check of the `prefers-reduced-motion: reduce` media query. Returns
+ * false under SSR / where `matchMedia` is unavailable. Use this for imperative
+ * "should I animate right now?" decisions; use {@link reducedMotion} when you
+ * need a value that reacts to the user changing the setting.
+ */
+declare function prefersReducedMotion(): boolean;
 /**
  * reducedMotion returns a reactive boolean tracking whether the user
  * prefers reduced motion via the `prefers-reduced-motion` media query.
@@ -185,4 +192,4 @@ interface SpringOptions {
  */
 declare function springSignal(initial: number, options?: SpringOptions): [get: () => number, set: (target: number) => void, dispose: () => void];
 
-export { type AnimationPreset, type PresetOptions, type SlideDirection, type SpringOptions, TransitionGroup, type TransitionGroupOptions, type TransitionOptions, animate, bounceIn, bounceOut, fadeIn, fadeOut, flipIn, pulse, reducedMotion, scaleDown, scaleUp, sequence, shake, slideIn, slideOut, spring, springSignal, stagger, transition, viewTransition };
+export { type AnimationPreset, type PresetOptions, type SlideDirection, type SpringOptions, TransitionGroup, type TransitionGroupOptions, type TransitionOptions, animate, bounceIn, bounceOut, fadeIn, fadeOut, flipIn, prefersReducedMotion, pulse, reducedMotion, scaleDown, scaleUp, sequence, shake, slideIn, slideOut, spring, springSignal, stagger, transition, viewTransition };