sibujs 1.0.0-beta.1

package/dist/motion.d.cts

@@ -0,0 +1,146 @@
+/**
+ * Animation hooks for SibuJS.
+ * Provides declarative transition and spring animations for elements.
+ */
+interface TransitionOptions {
+    /** CSS property to animate (e.g., "opacity", "transform") */
+    property?: string;
+    /** Duration in milliseconds */
+    duration?: number;
+    /** CSS easing function */
+    easing?: string;
+    /** Delay before animation starts (ms) */
+    delay?: number;
+    /** CSS class to add during enter transition */
+    enterClass?: string;
+    /** CSS class to add during leave transition */
+    leaveClass?: string;
+    /** CSS class when element is active/visible */
+    activeClass?: string;
+    /** Callback when enter transition completes */
+    onEnterDone?: () => void;
+    /** Callback when leave transition completes */
+    onLeaveDone?: () => void;
+}
+/**
+ * transition provides enter/leave animation control for elements.
+ * Returns functions to trigger enter and leave animations.
+ *
+ * @param element The target element to animate
+ * @param options Transition configuration
+ * @returns Object with enter() and leave() trigger functions
+ *
+ * @example
+ * ```ts
+ * const box = div({ class: "box", nodes: "Hello" });
+ * const { enter, leave } = transition(box, {
+ *   duration: 300,
+ *   enterClass: "fade-in",
+ *   leaveClass: "fade-out",
+ * });
+ *
+ * enter(); // Plays enter animation
+ * leave(); // Plays leave animation
+ * ```
+ */
+declare function transition(element: HTMLElement, options?: TransitionOptions): {
+    enter: () => Promise<void>;
+    leave: () => Promise<void>;
+};
+/**
+ * Spring-like animation using Web Animations API.
+ * Provides physics-based animation feel.
+ *
+ * @param element Element to animate
+ * @param keyframes Animation keyframes
+ * @param options Spring configuration
+ * @returns Promise that resolves when animation completes
+ *
+ * @example
+ * ```ts
+ * await spring(box, [
+ *   { transform: "scale(0.8)", opacity: 0 },
+ *   { transform: "scale(1.05)", opacity: 1, offset: 0.7 },
+ *   { transform: "scale(1)", opacity: 1 },
+ * ], { duration: 400 });
+ * ```
+ */
+declare function spring(element: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<void>;
+
+/**
+ * Animation presets for SibuJS.
+ * Pre-built keyframe animations that work with the Web Animations API.
+ * All presets respect reduced motion preferences.
+ */
+interface AnimationPreset {
+    keyframes: Keyframe[];
+    options: KeyframeAnimationOptions;
+}
+interface PresetOptions {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    fill?: FillMode;
+}
+declare function fadeIn(opts?: PresetOptions): AnimationPreset;
+declare function fadeOut(opts?: PresetOptions): AnimationPreset;
+type SlideDirection = "up" | "down" | "left" | "right";
+declare function slideIn(direction?: SlideDirection, opts?: PresetOptions): AnimationPreset;
+declare function slideOut(direction?: SlideDirection, opts?: PresetOptions): AnimationPreset;
+declare function scaleUp(opts?: PresetOptions): AnimationPreset;
+declare function scaleDown(opts?: PresetOptions): AnimationPreset;
+declare function bounceIn(opts?: PresetOptions): AnimationPreset;
+declare function bounceOut(opts?: PresetOptions): AnimationPreset;
+declare function flipIn(axis?: "x" | "y", opts?: PresetOptions): AnimationPreset;
+declare function shake(opts?: PresetOptions): AnimationPreset;
+declare function pulse(opts?: PresetOptions): AnimationPreset;
+/**
+ * Apply a preset to an element. Returns a promise that resolves when done.
+ */
+declare function animate(el: HTMLElement, preset: AnimationPreset): Promise<void>;
+/**
+ * Apply a preset to multiple elements with staggered delay.
+ */
+declare function stagger(elements: HTMLElement[], preset: AnimationPreset, delayBetween?: number): Promise<void>;
+/**
+ * Run multiple animations in sequence.
+ */
+declare function sequence(steps: Array<{
+    el: HTMLElement;
+    preset: AnimationPreset;
+}>): Promise<void>;
+
+/**
+ * TransitionGroup manages enter/leave/move animations on a dynamic set of elements.
+ * Tracks element positions for FLIP-style move animations.
+ */
+interface TransitionGroupOptions {
+    enter?: (el: HTMLElement) => void | Promise<void>;
+    leave?: (el: HTMLElement) => void | Promise<void>;
+    move?: (el: HTMLElement) => void;
+}
+declare function TransitionGroup(options: TransitionGroupOptions): {
+    add: (el: HTMLElement) => void;
+    remove: (el: HTMLElement) => Promise<void>;
+    track: (elements: HTMLElement[]) => void;
+};
+
+/**
+ * viewTransition wraps the View Transitions API (document.startViewTransition).
+ * Falls back to calling the callback directly when the API is unavailable.
+ */
+declare function viewTransition(callback: () => void | Promise<void>): {
+    start: () => Promise<void>;
+    isTransitioning: () => boolean;
+};
+
+/**
+ * reducedMotion returns a reactive boolean tracking whether the user
+ * prefers reduced motion via the `prefers-reduced-motion` media query.
+ */
+declare function reducedMotion(): {
+    reduced: () => boolean;
+    dispose: () => void;
+};
+
+export { type AnimationPreset, type PresetOptions, type SlideDirection, TransitionGroup, type TransitionGroupOptions, type TransitionOptions, animate, bounceIn, bounceOut, fadeIn, fadeOut, flipIn, pulse, reducedMotion, scaleDown, scaleUp, sequence, shake, slideIn, slideOut, spring, stagger, transition, viewTransition };

package/dist/motion.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Animation hooks for SibuJS.
+ * Provides declarative transition and spring animations for elements.
+ */
+interface TransitionOptions {
+    /** CSS property to animate (e.g., "opacity", "transform") */
+    property?: string;
+    /** Duration in milliseconds */
+    duration?: number;
+    /** CSS easing function */
+    easing?: string;
+    /** Delay before animation starts (ms) */
+    delay?: number;
+    /** CSS class to add during enter transition */
+    enterClass?: string;
+    /** CSS class to add during leave transition */
+    leaveClass?: string;
+    /** CSS class when element is active/visible */
+    activeClass?: string;
+    /** Callback when enter transition completes */
+    onEnterDone?: () => void;
+    /** Callback when leave transition completes */
+    onLeaveDone?: () => void;
+}
+/**
+ * transition provides enter/leave animation control for elements.
+ * Returns functions to trigger enter and leave animations.
+ *
+ * @param element The target element to animate
+ * @param options Transition configuration
+ * @returns Object with enter() and leave() trigger functions
+ *
+ * @example
+ * ```ts
+ * const box = div({ class: "box", nodes: "Hello" });
+ * const { enter, leave } = transition(box, {
+ *   duration: 300,
+ *   enterClass: "fade-in",
+ *   leaveClass: "fade-out",
+ * });
+ *
+ * enter(); // Plays enter animation
+ * leave(); // Plays leave animation
+ * ```
+ */
+declare function transition(element: HTMLElement, options?: TransitionOptions): {
+    enter: () => Promise<void>;
+    leave: () => Promise<void>;
+};
+/**
+ * Spring-like animation using Web Animations API.
+ * Provides physics-based animation feel.
+ *
+ * @param element Element to animate
+ * @param keyframes Animation keyframes
+ * @param options Spring configuration
+ * @returns Promise that resolves when animation completes
+ *
+ * @example
+ * ```ts
+ * await spring(box, [
+ *   { transform: "scale(0.8)", opacity: 0 },
+ *   { transform: "scale(1.05)", opacity: 1, offset: 0.7 },
+ *   { transform: "scale(1)", opacity: 1 },
+ * ], { duration: 400 });
+ * ```
+ */
+declare function spring(element: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<void>;
+
+/**
+ * Animation presets for SibuJS.
+ * Pre-built keyframe animations that work with the Web Animations API.
+ * All presets respect reduced motion preferences.
+ */
+interface AnimationPreset {
+    keyframes: Keyframe[];
+    options: KeyframeAnimationOptions;
+}
+interface PresetOptions {
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    fill?: FillMode;
+}
+declare function fadeIn(opts?: PresetOptions): AnimationPreset;
+declare function fadeOut(opts?: PresetOptions): AnimationPreset;
+type SlideDirection = "up" | "down" | "left" | "right";
+declare function slideIn(direction?: SlideDirection, opts?: PresetOptions): AnimationPreset;
+declare function slideOut(direction?: SlideDirection, opts?: PresetOptions): AnimationPreset;
+declare function scaleUp(opts?: PresetOptions): AnimationPreset;
+declare function scaleDown(opts?: PresetOptions): AnimationPreset;
+declare function bounceIn(opts?: PresetOptions): AnimationPreset;
+declare function bounceOut(opts?: PresetOptions): AnimationPreset;
+declare function flipIn(axis?: "x" | "y", opts?: PresetOptions): AnimationPreset;
+declare function shake(opts?: PresetOptions): AnimationPreset;
+declare function pulse(opts?: PresetOptions): AnimationPreset;
+/**
+ * Apply a preset to an element. Returns a promise that resolves when done.
+ */
+declare function animate(el: HTMLElement, preset: AnimationPreset): Promise<void>;
+/**
+ * Apply a preset to multiple elements with staggered delay.
+ */
+declare function stagger(elements: HTMLElement[], preset: AnimationPreset, delayBetween?: number): Promise<void>;
+/**
+ * Run multiple animations in sequence.
+ */
+declare function sequence(steps: Array<{
+    el: HTMLElement;
+    preset: AnimationPreset;
+}>): Promise<void>;
+
+/**
+ * TransitionGroup manages enter/leave/move animations on a dynamic set of elements.
+ * Tracks element positions for FLIP-style move animations.
+ */
+interface TransitionGroupOptions {
+    enter?: (el: HTMLElement) => void | Promise<void>;
+    leave?: (el: HTMLElement) => void | Promise<void>;
+    move?: (el: HTMLElement) => void;
+}
+declare function TransitionGroup(options: TransitionGroupOptions): {
+    add: (el: HTMLElement) => void;
+    remove: (el: HTMLElement) => Promise<void>;
+    track: (elements: HTMLElement[]) => void;
+};
+
+/**
+ * viewTransition wraps the View Transitions API (document.startViewTransition).
+ * Falls back to calling the callback directly when the API is unavailable.
+ */
+declare function viewTransition(callback: () => void | Promise<void>): {
+    start: () => Promise<void>;
+    isTransitioning: () => boolean;
+};
+
+/**
+ * reducedMotion returns a reactive boolean tracking whether the user
+ * prefers reduced motion via the `prefers-reduced-motion` media query.
+ */
+declare function reducedMotion(): {
+    reduced: () => boolean;
+    dispose: () => void;
+};
+
+export { type AnimationPreset, type PresetOptions, type SlideDirection, TransitionGroup, type TransitionGroupOptions, type TransitionOptions, animate, bounceIn, bounceOut, fadeIn, fadeOut, flipIn, pulse, reducedMotion, scaleDown, scaleUp, sequence, shake, slideIn, slideOut, spring, stagger, transition, viewTransition };

package/dist/motion.js

@@ -0,0 +1,346 @@
+import {
+  signal
+} from "./chunk-M5GNLDEO.js";
+import "./chunk-MLKGABMK.js";
+
+// src/ui/transition.ts
+function transition(element, options = {}) {
+  const {
+    property = "all",
+    duration = 300,
+    easing = "ease",
+    delay = 0,
+    enterClass,
+    leaveClass,
+    activeClass,
+    onEnterDone,
+    onLeaveDone
+  } = options;
+  const transitionValue = `${property} ${duration}ms ${easing} ${delay}ms`;
+  function enter() {
+    return new Promise((resolve) => {
+      element.style.transition = transitionValue;
+      if (enterClass) element.classList.add(enterClass);
+      if (leaveClass) element.classList.remove(leaveClass);
+      void element.offsetHeight;
+      if (activeClass) element.classList.add(activeClass);
+      const done = () => {
+        if (enterClass) element.classList.remove(enterClass);
+        onEnterDone?.();
+        resolve();
+      };
+      if (duration > 0) {
+        setTimeout(done, duration + delay);
+      } else {
+        done();
+      }
+    });
+  }
+  function leave() {
+    return new Promise((resolve) => {
+      element.style.transition = transitionValue;
+      if (activeClass) element.classList.remove(activeClass);
+      if (leaveClass) element.classList.add(leaveClass);
+      if (enterClass) element.classList.remove(enterClass);
+      const done = () => {
+        if (leaveClass) element.classList.remove(leaveClass);
+        onLeaveDone?.();
+        resolve();
+      };
+      if (duration > 0) {
+        setTimeout(done, duration + delay);
+      } else {
+        done();
+      }
+    });
+  }
+  return { enter, leave };
+}
+function spring(element, keyframes, options = {}) {
+  const defaults = {
+    duration: 300,
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    fill: "forwards"
+  };
+  return new Promise((resolve) => {
+    const animation = element.animate(keyframes, { ...defaults, ...options });
+    animation.onfinish = () => resolve();
+    animation.oncancel = () => resolve();
+  });
+}
+
+// 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/ui/TransitionGroup.ts
+function TransitionGroup(options) {
+  const [elements, setElements] = signal([]);
+  const positions = /* @__PURE__ */ new Map();
+  function add(el) {
+    setElements((prev) => [...prev, el]);
+    if (options.enter) {
+      options.enter(el);
+    }
+  }
+  async function remove(el) {
+    if (options.leave) {
+      await options.leave(el);
+    }
+    setElements((prev) => prev.filter((e) => e !== el));
+  }
+  function track(newElements) {
+    const oldPositions = /* @__PURE__ */ new Map();
+    for (const el of elements()) {
+      if (typeof el.getBoundingClientRect === "function") {
+        oldPositions.set(el, el.getBoundingClientRect());
+      }
+    }
+    const currentSet = new Set(elements());
+    for (const el of newElements) {
+      if (!currentSet.has(el)) {
+        if (options.enter) {
+          options.enter(el);
+        }
+      }
+    }
+    const newSet = new Set(newElements);
+    for (const el of elements()) {
+      if (!newSet.has(el)) {
+        if (options.leave) {
+          options.leave(el);
+        }
+      }
+    }
+    setElements(newElements);
+    if (options.move) {
+      for (const el of newElements) {
+        const oldRect = oldPositions.get(el);
+        if (oldRect && typeof el.getBoundingClientRect === "function") {
+          const newRect = el.getBoundingClientRect();
+          if (oldRect.left !== newRect.left || oldRect.top !== newRect.top) {
+            options.move(el);
+          }
+        }
+      }
+    }
+    positions.clear();
+    for (const el of newElements) {
+      if (typeof el.getBoundingClientRect === "function") {
+        positions.set(el, el.getBoundingClientRect());
+      }
+    }
+  }
+  return { add, remove, track };
+}
+
+// src/ui/viewTransition.ts
+function viewTransition(callback) {
+  const [isTransitioning, setIsTransitioning] = signal(false);
+  async function start() {
+    setIsTransitioning(true);
+    try {
+      if (typeof document !== "undefined" && "startViewTransition" in document && typeof document.startViewTransition === "function") {
+        const transition2 = document.startViewTransition(callback);
+        await transition2.finished;
+      } else {
+        await callback();
+      }
+    } finally {
+      setIsTransitioning(false);
+    }
+  }
+  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 };
+}
+export {
+  TransitionGroup,
+  animate,
+  bounceIn,
+  bounceOut,
+  fadeIn,
+  fadeOut,
+  flipIn,
+  pulse,
+  reducedMotion,
+  scaleDown,
+  scaleUp,
+  sequence,
+  shake,
+  slideIn,
+  slideOut,
+  spring,
+  stagger,
+  transition,
+  viewTransition
+};