@cioky/ripple-transitions 0.1.0

package/src/presence.tsrx

@@ -0,0 +1,286 @@
+import { track, tick, effect, Context, type Children } from 'ripple';
+import { type MotionTiming } from './types.js';
+import { MotionTimingContext } from './motion.js';
+
+export function MotionProvider(props: {
+    children: Children;
+    type?: 'tween' | 'spring';
+    duration?: number;
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    easing?: string;
+}) @{
+    let parent: MotionTiming | null = null;
+    try {
+        parent = MotionTimingContext.get();
+    } catch {}
+    const merged: MotionTiming = {
+        delay: 0,
+        duration: props.duration ?? parent?.duration ?? 300,
+        type: props.type ?? parent?.type ?? 'tween',
+        stiffness: props.stiffness ?? parent?.stiffness ?? 300,
+        damping: props.damping ?? parent?.damping ?? 30,
+        mass: props.mass ?? parent?.mass ?? 1,
+        easing: props.easing ?? parent?.easing,
+    };
+    try {
+        MotionTimingContext.set(merged);
+    } catch {}
+
+    <div style="display:contents">{props.children}</div>
+}
+
+function getTargets(wrap: HTMLElement): HTMLElement[] {
+    const targets: HTMLElement[] = [];
+    const elements = wrap.querySelectorAll('*');
+    for (let i = 0; i < elements.length; i++) {
+        const el = elements[i] as HTMLElement;
+        if ((el as any).__ripple_exit) {
+            targets.push(el);
+        }
+    }
+    if (targets.length === 0) {
+        let child = wrap.firstElementChild;
+        while (child) {
+            targets.push(child as HTMLElement);
+            child = child.nextElementSibling;
+        }
+    }
+    if (targets.length === 0) {
+        targets.push(wrap);
+    }
+    return targets;
+}
+
+export function Transition(props: {
+    show: boolean;
+    children: Children;
+    onEnter?: (el: HTMLElement) => void;
+    onLeave?: (el: HTMLElement) => Promise<any> | void;
+    mode?: 'sync' | 'popLayout';
+}) @{
+    const mode = props.mode ?? 'sync';
+    let &[renderChild] = track(props.show);
+    let wrap: HTMLDivElement | undefined;
+    let activeExitCleanup: (() => void) | null = null;
+
+    effect(() => {
+        if (props.show) {
+            renderChild = true;
+            if (activeExitCleanup) {
+                activeExitCleanup();
+                activeExitCleanup = null;
+            }
+            tick().then(() => {
+                if (wrap) {
+                    const targets = getTargets(wrap);
+                    for (const target of targets) {
+                        if (props.onEnter) {
+                            props.onEnter(target);
+                        } else if ((target as any).__ripple_enter) {
+                            if ((target as any).__ripple_mounted) {
+                                delete (target as any).__ripple_mounted;
+                            } else {
+                                (target as any).__ripple_enter(target);
+                            }
+                        }
+                    }
+                }
+            });
+        } else {
+            if (wrap) {
+                const targets = getTargets(wrap);
+                const exitPromises = targets.map(target => {
+                    const exitFn = props.onLeave || (target as any).__ripple_exit;
+                    if (exitFn) {
+                        return Promise.resolve(exitFn(target)).catch(() => {});
+                    }
+                    return Promise.resolve();
+                });
+
+                if (mode === 'popLayout' && wrap.parentElement) {
+                    const parent = wrap.parentElement;
+                    const parentBefore = parent.offsetHeight;
+                    const parentRect = parent.getBoundingClientRect();
+                    const oldPosition = parent.style.position;
+                    const oldOverflow = parent.style.overflow;
+                    const oldHeight = parent.style.height;
+
+                    if (!oldPosition || oldPosition === 'static') {
+                        parent.style.position = 'relative';
+                    }
+                    parent.style.overflow = 'hidden';
+
+                    const restores: Array<() => void> = [];
+                    for (const target of targets) {
+                        const rect = target.getBoundingClientRect();
+                        const left = rect.left - parentRect.left;
+                        const top = rect.top - parentRect.top;
+
+                        const origPosition = target.style.position;
+                        const origLeft = target.style.left;
+                        const origTop = target.style.top;
+                        const origWidth = target.style.width;
+                        const origHeight = target.style.height;
+                        const origMargin = target.style.margin;
+                        const origPointerEvents = target.style.pointerEvents;
+
+                        target.style.position = 'absolute';
+                        target.style.left = `${left}px`;
+                        target.style.top = `${top}px`;
+                        target.style.width = `${rect.width}px`;
+                        target.style.height = `${rect.height}px`;
+                        target.style.margin = '0';
+                        target.style.pointerEvents = 'none';
+
+                        restores.push(() => {
+                            target.style.position = origPosition;
+                            target.style.left = origLeft;
+                            target.style.top = origTop;
+                            target.style.width = origWidth;
+                            target.style.height = origHeight;
+                            target.style.margin = origMargin;
+                            target.style.pointerEvents = origPointerEvents;
+                        });
+                    }
+
+                    void parent.offsetHeight;
+                    const parentAfter = parent.offsetHeight;
+                    parent.style.height = `${parentBefore}px`;
+
+                    const parentAnim = parent.animate([
+                        { height: `${parentBefore}px` },
+                        { height: `${parentAfter}px` }
+                    ], { duration: 200, easing: 'ease-in-out', fill: 'both' });
+                    const cleanup = () => {
+                        parentAnim.cancel();
+                        parent.style.position = oldPosition;
+                        parent.style.overflow = oldOverflow;
+                        parent.style.height = oldHeight;
+                        for (const restore of restores) restore();
+                    };
+                    activeExitCleanup = cleanup;
+
+                    Promise.all([
+                        Promise.all(exitPromises),
+                        parentAnim.finished.catch(() => {})
+                    ]).then(() => {
+                        if (activeExitCleanup === cleanup) {
+                            cleanup();
+                            activeExitCleanup = null;
+                            if (!props.show) renderChild = false;
+                        }
+                    });
+                } else {
+                    const cleanup = () => {};
+                    activeExitCleanup = cleanup;
+                    Promise.all(exitPromises).then(() => {
+                        if (activeExitCleanup === cleanup) {
+                            activeExitCleanup = null;
+                            if (!props.show) renderChild = false;
+                        }
+                    });
+                }
+            } else {
+                renderChild = false;
+            }
+        }
+    });
+
+    @if (renderChild) {
+        <div ref={wrap}>
+            {props.children}
+        </div>
+    }
+}
+
+interface ExitingItem {
+    id: number;
+    children: Children;
+    style: string;
+}
+
+export function Presence(props: {
+    children: Children;
+    mode?: 'sync' | 'wait';
+}) @{
+    const mode = props.mode ?? 'sync';
+    let &[live] = track<Children | undefined>(undefined);
+    let &[exitingItems] = track<ExitingItem[]>([]);
+    let prevChildren: Children | undefined;
+    let liveRef: HTMLDivElement | undefined;
+    let nextExitId = 1;
+    const exitingRefs = new Map<number, HTMLDivElement>();
+
+    effect(() => {
+        const newChildren = props.children;
+
+        if (prevChildren !== undefined && newChildren !== prevChildren) {
+            if (liveRef && liveRef.parentElement) {
+                const parent = liveRef.parentElement;
+                const parentRect = parent.getBoundingClientRect();
+                const childEl = liveRef.firstElementChild as HTMLElement || liveRef;
+                const childRect = childEl.getBoundingClientRect();
+                const left = childRect.left - parentRect.left;
+                const top = childRect.top - parentRect.top;
+
+                const itemId = nextExitId++;
+                const newItem: ExitingItem = {
+                    id: itemId,
+                    children: prevChildren,
+                    style: `position:absolute;left:${left}px;top:${top}px;width:${childRect.width}px;height:${childRect.height}px;pointer-events:none`
+                };
+
+                exitingItems = [...exitingItems, newItem];
+
+                tick().then(() => {
+                    const wrapper = exitingRefs.get(itemId);
+                    if (wrapper) {
+                        const target = wrapper.firstElementChild as HTMLElement || wrapper;
+                        target.getAnimations().forEach(a => a.cancel());
+                        const exitFn = (target as any).__ripple_exit;
+                        if (exitFn) {
+                            Promise.resolve(exitFn(target)).catch(() => {}).then(() => {
+                                exitingItems = exitingItems.filter(x => x.id !== itemId);
+                                exitingRefs.delete(itemId);
+                                if (mode === 'wait' && exitingItems.length === 0) {
+                                    live = props.children;
+                                }
+                            });
+                        } else {
+                            exitingItems = exitingItems.filter(x => x.id !== itemId);
+                            exitingRefs.delete(itemId);
+                            if (mode === 'wait' && exitingItems.length === 0) {
+                                live = props.children;
+                            }
+                        }
+                    }
+                });
+            }
+
+            if (mode === 'wait') {
+                live = undefined;
+            } else {
+                live = newChildren;
+            }
+        } else if (prevChildren === undefined) {
+            live = newChildren;
+        }
+
+        prevChildren = newChildren;
+    });
+
+    const hasExiting = exitingItems.length > 0;
+
+    <div style={hasExiting && live ? 'position:relative' : ''}>
+        <div ref={liveRef} style="display:contents">
+            {live}
+        </div>
+        @for (const item of exitingItems; key item.id) {
+            <div ref={(el) => { if (el) exitingRefs.set(item.id, el as HTMLDivElement); }} style={item.style}>
+                {item.children}
+            </div>
+        }
+    </div>
+}

package/src/slide.ts

@@ -0,0 +1,220 @@
+import { type TransitionOptions } from './types.js';
+import { MotionTimingContext } from './motion.js';
+
+function withTiming(options: TransitionOptions = {}): TransitionOptions {
+    try {
+        const ctx = MotionTimingContext.get();
+        if (!ctx) return options;
+        return {
+            delay: options.delay ?? 0,
+            duration: options.duration ?? ctx.duration,
+            type: options.type ?? ctx.type,
+            stiffness: options.stiffness ?? ctx.stiffness,
+            damping: options.damping ?? ctx.damping,
+            mass: options.mass ?? ctx.mass,
+            easing: options.easing ?? ctx.easing,
+        };
+    } catch {
+        return options;
+    }
+}
+
+function getNaturalSize(el: HTMLElement, isY: boolean): { size: number; paddingStart: string; paddingEnd: string } {
+    const originalStyle = el.style.cssText;
+    const prop = isY ? 'height' : 'width';
+    const padStart = isY ? 'paddingTop' : 'paddingLeft';
+    const padEnd = isY ? 'paddingBottom' : 'paddingRight';
+
+    // Temporarily clear styles to measure natural size
+    el.style[prop as any] = '';
+    el.style.overflow = '';
+    el.style[padStart as any] = '';
+    el.style[padEnd as any] = '';
+
+    const size = isY ? el.offsetHeight : el.offsetWidth;
+    const computed = getComputedStyle(el);
+    const paddingStartVal = computed[padStart as any];
+    const paddingEndVal = computed[padEnd as any];
+
+    el.style.cssText = originalStyle;
+
+    return { size, paddingStart: paddingStartVal, paddingEnd: paddingEndVal };
+}
+
+function getCurrentSlideState(el: HTMLElement, isY: boolean, withFade: boolean) {
+    const cs = getComputedStyle(el);
+    const prop = isY ? 'height' : 'width';
+    const padStart = isY ? 'paddingTop' : 'paddingLeft';
+    const padEnd = isY ? 'paddingBottom' : 'paddingRight';
+
+    const state: Record<string, any> = {
+        [prop]: cs[prop as any],
+        [padStart]: cs[padStart as any],
+        [padEnd]: cs[padEnd as any],
+        overflow: 'hidden'
+    };
+    if (withFade) {
+        state.opacity = parseFloat(cs.opacity || '1');
+    }
+    return state;
+}
+
+function applyStyles(target: HTMLElement, styles: Record<string, any>) {
+    for (const [key, val] of Object.entries(styles)) {
+        if (val === undefined || val === null) continue;
+        if (key === 'transform' || key === 'opacity' || key === 'overflow') {
+            (target.style as any)[key] = String(val);
+        } else {
+            (target.style as any)[key] = typeof val === 'number' ? `${val}px` : String(val);
+        }
+    }
+}
+export function slide(options: TransitionOptions & { fade?: boolean; axis?: 'x' | 'y' } = {}) {
+    const { fade: withFade = true, axis = 'y', ...transitionOpts } = options;
+    const isY = axis === 'y';
+    const prop = isY ? 'height' : 'width';
+    const padStart = isY ? 'paddingTop' : 'paddingLeft';
+    const padEnd = isY ? 'paddingBottom' : 'paddingRight';
+
+    return (el: HTMLElement) => {
+        if (!el) return;
+
+        const transition = withTiming(transitionOpts);
+        const { delay = 0, duration = 300, easing = 'ease-in-out' } = transition;
+
+        const enterFn = (target: HTMLElement) => {
+            const prevExit = (target as any).__ripple_exit_anim;
+            let startState: Record<string, any>;
+            let adjDuration = duration;
+
+            if (prevExit && prevExit.playState !== 'finished') {
+                // Interrupted exit: read current state and calculate progress
+                const progress = prevExit.currentTime ? Math.max(0, Math.min(1, Number(prevExit.currentTime) / duration)) : 0.5;
+                adjDuration = Math.max(50, duration * progress);
+
+                startState = getCurrentSlideState(target, isY, withFade);
+                prevExit.cancel();
+                delete (target as any).__ripple_exit_anim;
+            } else {
+                // Normal enter starts at 0
+                startState = {
+                    [prop]: '0px',
+                    [padStart]: '0px',
+                    [padEnd]: '0px',
+                    overflow: 'hidden'
+                };
+                if (withFade) {
+                    startState.opacity = 0;
+                }
+            }
+
+            const { size, paddingStart, paddingEnd } = getNaturalSize(target, isY);
+            const endState: Record<string, any> = {
+                [prop]: `${size}px`,
+                [padStart]: paddingStart,
+                [padEnd]: paddingEnd,
+                overflow: 'hidden'
+            };
+            if (withFade) {
+                endState.opacity = 1;
+            }
+
+            const prevAnim = (target as any).__ripple_anim;
+            if (prevAnim && prevAnim.playState !== 'finished') {
+                prevAnim.cancel();
+            }
+
+            applyStyles(target, startState);
+            const mountAnim = target.animate([startState, endState], { delay, duration: adjDuration, easing, fill: 'both' });
+            (target as any).__ripple_anim = mountAnim;
+
+            mountAnim.finished.then(() => {
+                if ((target as any).__ripple_anim === mountAnim) {
+                    try { mountAnim.commitStyles(); mountAnim.cancel(); } catch {}
+                    target.style[prop as any] = '';
+                    target.style.overflow = '';
+                    target.style[padStart as any] = '';
+                    target.style[padEnd as any] = '';
+                    if (withFade) target.style.opacity = '';
+                    delete (target as any).__ripple_anim;
+                }
+            }).catch(() => {});
+
+            return mountAnim.finished;
+        };
+
+        const exitFn = (target: HTMLElement) => {
+            const prevAnim = (target as any).__ripple_anim;
+            let startState: Record<string, any>;
+            let adjDuration = duration;
+
+            if (prevAnim && prevAnim.playState !== 'finished') {
+                // Interrupted enter: read current state and calculate progress
+                const progress = prevAnim.currentTime ? Math.max(0, Math.min(1, Number(prevAnim.currentTime) / duration)) : 0.5;
+                adjDuration = Math.max(50, duration * progress);
+
+                startState = getCurrentSlideState(target, isY, withFade);
+                prevAnim.cancel();
+                delete (target as any).__ripple_anim;
+            } else {
+                // Normal exit starts at current natural size
+                const { size, paddingStart, paddingEnd } = getNaturalSize(target, isY);
+                startState = {
+                    [prop]: `${size}px`,
+                    [padStart]: paddingStart,
+                    [padEnd]: paddingEnd,
+                    overflow: 'hidden'
+                };
+                if (withFade) {
+                    startState.opacity = 1;
+                }
+            }
+
+            const endState: Record<string, any> = {
+                [prop]: '0px',
+                [padStart]: '0px',
+                [padEnd]: '0px',
+                overflow: 'hidden'
+            };
+            if (withFade) {
+                endState.opacity = 0;
+            }
+
+            const prevExit = (target as any).__ripple_exit_anim;
+            if (prevExit && prevExit.playState !== 'finished') {
+                prevExit.cancel();
+            }
+
+            applyStyles(target, startState);
+            const exitAnim = target.animate([startState, endState], { delay, duration: adjDuration, easing, fill: 'both' });
+            (target as any).__ripple_exit_anim = exitAnim;
+            exitAnim.finished.then(() => {
+                if ((target as any).__ripple_exit_anim === exitAnim) {
+                    try { exitAnim.commitStyles(); exitAnim.cancel(); } catch {}
+                    delete (target as any).__ripple_exit_anim;
+                }
+            }).catch(() => {});
+            return exitAnim.finished;
+        };
+
+        // Register handlers
+        (el as any).__ripple_enter = enterFn;
+        (el as any).__ripple_exit = exitFn;
+
+        // Run enter immediately
+        (el as any).__ripple_mounted = true;
+        enterFn(el);
+
+        return () => {
+            const a = (el as any).__ripple_anim;
+            if (a && a.playState !== 'finished') a.cancel();
+            const ea = (el as any).__ripple_exit_anim;
+            if (ea && ea.playState !== 'finished') ea.cancel();
+
+            delete (el as any).__ripple_enter;
+            delete (el as any).__ripple_exit;
+            delete (el as any).__ripple_anim;
+            delete (el as any).__ripple_exit_anim;
+        };
+    };
+}

package/src/spring.ts

@@ -0,0 +1,165 @@
+import { type TransitionOptions } from './types.js';
+
+export function springValues(
+    from: number,
+    to: number,
+    options: { stiffness?: number; damping?: number; mass?: number; frames?: number } = {}
+): number[] {
+    const { stiffness = 300, damping = 30, mass = 1, frames = 60 } = options;
+    const omega0 = Math.sqrt(stiffness / mass);
+    const zeta = damping / (2 * Math.sqrt(mass * stiffness));
+    const omega1 = omega0 * Math.sqrt(Math.max(0, 1 - zeta * zeta));
+    const duration = Math.min(2, zeta > 0 ? 3 / (zeta * omega0) : 2);
+    const values: number[] = [];
+    for (let i = 0; i <= frames; i++) {
+        const t = (i / frames) * duration;
+        const decay = Math.exp(-zeta * omega0 * t);
+        let norm: number;
+        if (zeta < 1) {
+            norm = 1 - decay * Math.cos(omega1 * t) - (zeta / Math.sqrt(1 - zeta * zeta)) * decay * Math.sin(omega1 * t);
+        } else {
+            norm = 1 - decay * (1 + omega0 * t);
+        }
+        values.push(from + (to - from) * norm);
+    }
+    return values;
+}
+
+interface TransformComponents {
+    translateX: number;
+    translateY: number;
+    scaleX: number;
+    scaleY: number;
+    rotate: number;
+}
+
+function parseTransform(val: string): TransformComponents {
+    const comps: TransformComponents = {
+        translateX: 0,
+        translateY: 0,
+        scaleX: 1,
+        scaleY: 1,
+        rotate: 0
+    };
+
+    if (!val || val === 'none' || val === 'undefined') {
+        return comps;
+    }
+
+    if (val.startsWith('matrix')) {
+        const nums = val.match(/-?\d*\.?\d+/g)?.map(Number) || [];
+        if (nums.length === 6) {
+            const [a, b, c, d, tx, ty] = nums;
+            comps.translateX = tx;
+            comps.translateY = ty;
+            comps.scaleX = Math.sqrt(a * a + b * b);
+            comps.scaleY = Math.sqrt(c * c + d * d);
+            comps.rotate = Math.atan2(b, a) * (180 / Math.PI);
+        } else if (nums.length === 16) {
+            comps.scaleX = Math.sqrt(nums[0]*nums[0] + nums[1]*nums[1] + nums[2]*nums[2]);
+            comps.scaleY = Math.sqrt(nums[4]*nums[4] + nums[5]*nums[5] + nums[6]*nums[6]);
+            comps.translateX = nums[12];
+            comps.translateY = nums[13];
+            comps.rotate = Math.atan2(nums[1], nums[0]) * (180 / Math.PI);
+        }
+        return comps;
+    }
+
+    const translateMatch = val.match(/translate\(\s*(-?\d+\.?\d*)(px)?\s*,\s*(-?\d+\.?\d*)(px)?\s*\)/);
+    if (translateMatch) {
+        comps.translateX = parseFloat(translateMatch[1]);
+        comps.translateY = parseFloat(translateMatch[3]);
+    }
+    const translateXMatch = val.match(/translateX\(\s*(-?\d+\.?\d*)(px)?\s*\)/);
+    if (translateXMatch) comps.translateX = parseFloat(translateXMatch[1]);
+    
+    const translateYMatch = val.match(/translateY\(\s*(-?\d+\.?\d*)(px)?\s*\)/);
+    if (translateYMatch) comps.translateY = parseFloat(translateYMatch[1]);
+
+    const scaleMatch = val.match(/scale\(\s*(-?\d+\.?\d*)\s*\)/);
+    if (scaleMatch) {
+        const s = parseFloat(scaleMatch[1]);
+        comps.scaleX = s;
+        comps.scaleY = s;
+    }
+    const scaleXYMatch = val.match(/scale\(\s*(-?\d+\.?\d*)\s*,\s*(-?\d+\.?\d*)\s*\)/);
+    if (scaleXYMatch) {
+        comps.scaleX = parseFloat(scaleXYMatch[1]);
+        comps.scaleY = parseFloat(scaleXYMatch[2]);
+    }
+
+    const rotateMatch = val.match(/rotate\(\s*(-?\d+\.?\d*)(deg|rad)?\s*\)/);
+    if (rotateMatch) {
+        let r = parseFloat(rotateMatch[1]);
+        if (rotateMatch[2] === 'rad') {
+            r = r * (180 / Math.PI);
+        }
+        comps.rotate = r;
+    }
+
+    return comps;
+}
+export function getSpringKeyframes(initial: any, animate: any, options: Required<TransitionOptions>): Keyframe[] {
+    const keys = Object.keys(animate);
+    const frames = 60;
+    const interpolations: Record<string, Array<{ values: number[] } | string>> = {};
+
+    for (const k of keys) {
+        let fromVal = String(initial?.[k] ?? animate[k]);
+        let toVal = String(animate[k]);
+
+        if (k === 'transform') {
+            const fromComps = parseTransform(fromVal);
+            const toComps = parseTransform(toVal);
+            fromVal = `translate(${fromComps.translateX}px, ${fromComps.translateY}px) scale(${fromComps.scaleX}, ${fromComps.scaleY}) rotate(${fromComps.rotate}deg)`;
+            toVal = `translate(${toComps.translateX}px, ${toComps.translateY}px) scale(${toComps.scaleX}, ${toComps.scaleY}) rotate(${toComps.rotate}deg)`;
+        }
+
+        const numRegex = /-?\d*\.?\d+/g;
+        const fromNums = fromVal.match(numRegex)?.map(Number) || [];
+        const toNums = toVal.match(numRegex)?.map(Number) || [];
+
+        if (fromNums.length > 0 && fromNums.length === toNums.length) {
+            const parts = toVal.split(numRegex);
+            const springData: Array<{ values: number[] } | string> = [];
+
+            for (let idx = 0; idx < fromNums.length; idx++) {
+                springData.push(parts[idx]);
+                let vals = springValues(fromNums[idx], toNums[idx], {
+                    stiffness: options.stiffness,
+                    damping: options.damping,
+                    mass: options.mass,
+                    frames
+                });
+                if (k === 'opacity') {
+                    vals = vals.map(v => Math.max(0, Math.min(1, v)));
+                }
+                springData.push({ values: vals });
+            }
+            springData.push(parts[parts.length - 1]);
+            interpolations[k] = springData;
+        } else {
+            interpolations[k] = [toVal];
+        }
+    }
+
+    const result: Keyframe[] = [];
+    for (let i = 0; i <= frames; i++) {
+        const kf: Record<string, any> = {};
+        for (const k of keys) {
+            const data = interpolations[k];
+            let str = '';
+            for (const item of data) {
+                if (typeof item === 'string') {
+                    str += item;
+                } else {
+                    str += item.values[i];
+                }
+            }
+            kf[k] = str;
+        }
+        result.push(kf);
+    }
+    return result;
+}
+