animot-presenter 0.6.2 → 0.6.4

package/dist/AnimotPresenter.svelte

@@ -19,10 +19,13 @@
 	import { parseEmbedUrl } from './utils/video-embed';
 	import EmbedPlayer from './EmbedPlayer.svelte';
 	import { easeInOutCubic, getEasingFn, getBackgroundStyle, gradientShapeToCss, hashFraction, getFloatAnimName, getIdleAnimName, computeFloatAmp, computeFloatSpeed, entranceRuntimeKeyframe, exitRuntimeKeyframe, emphasisKeyframeName } from './engine/utils';
+	import { drawElementToPath } from './utils/freehand';
+	import { makePathInterpolator, makeMorphParts, fitPathToBox, resolveElementPath, resolveElementPathParts, shapeToPath, extractCombinedPath, extractFill, type PathInterpolator, type MorphPart } from './utils/path-morph';
 	import type {
 		AnimotProject, AnimotPresenterProps, CanvasElement, CodeElement, TextElement,
 		ArrowElement, ImageElement, VideoElement, ShapeElement, CounterElement, ChartElement, IconElement,
 		SvgElement, MotionPathElement, ProgressElement, ContainerElement, PathPoint,
+		DrawElement, StickyElement,
 		Slide, CodeAnimationMode, AnimatableProperty
 	} from './types';
 	import './styles/presenter.css';
@@ -75,6 +78,7 @@
 		strokeColor: ReturnType<typeof tween<string>> | null;
 		strokeWidth: TweenValue | null;
 		shapeMorph: TweenValue | null;
+		pathMorph: TweenValue | null;
 		motionPathProgress: TweenValue | null;
 		blur: TweenValue;
 		brightness: TweenValue;
@@ -84,6 +88,58 @@
 	}
 
 	interface ShapeMorphState { fromType: string; toType: string; }
+	interface PathMorphState { interp: PathInterpolator; fromColor: string; toColor: string; viewBox?: string; parts?: MorphPart[]; }
+
+	// Resolve any svg/shape element to a single morphable path `d`.
+	function resolveMorphPath(el: CanvasElement): string | null {
+		if (el.type === 'svg') return extractCombinedPath((el as SvgElement).svgContent);
+		if (el.type === 'shape') {
+			const s = el as ShapeElement;
+			return shapeToPath(s.shapeType, s.size.width, s.size.height, s.borderRadius);
+		}
+		return null;
+	}
+	function resolveMorphColor(el: CanvasElement): string {
+		if (el.type === 'shape') return (el as ShapeElement).fillColor || '#888888';
+		const svg = el as SvgElement;
+		return svg.color || extractFill(svg.svgContent) || '#888888';
+	}
+	// Resting geometry for keyframe-path elements before animateKeyframes runs,
+	// so the element never flashes its base/last shape on slide enter.
+	function restingKfMorph(el: CanvasElement): PathMorphState | null {
+		const kfs = (el.keyframes ?? []).filter((k) => k.path);
+		if (kfs.length < 1) return null;
+		const sorted = [...kfs].sort((a, b) => a.time - b.time);
+		const d = sorted[0].path as string;
+		const c = resolveMorphColor(el);
+		return { interp: () => d, fromColor: c, toColor: c, viewBox: resolveElementPath(el as any)?.viewBox };
+	}
+	// viewBox to render a morph path in — the element's own coordinate space.
+	function morphViewBox(el: CanvasElement, w: number, h: number): string {
+		if (el.type === 'svg') {
+			const s = el as SvgElement;
+			if (s.viewBox) return s.viewBox;
+			const m = s.svgContent.match(/viewBox=["']([^"']+)["']/i);
+			if (m) return m[1];
+		}
+		return `0 0 ${Math.max(1, w)} ${Math.max(1, h)}`;
+	}
+	// Linear interpolate two hex colors (#rgb/#rrggbb). Falls back to `to`.
+	function lerpHex(from: string, to: string, t: number): string {
+		const parse = (c: string): [number, number, number] | null => {
+			let h = c.trim().replace('#', '');
+			if (h.length === 3) h = h.split('').map((x) => x + x).join('');
+			if (h.length !== 6) return null;
+			const n = parseInt(h, 16);
+			return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+		};
+		const a = parse(from), b = parse(to);
+		if (!a || !b) return t < 0.5 ? from : to;
+		const r = Math.round(a[0] + (b[0] - a[0]) * t);
+		const g = Math.round(a[1] + (b[1] - a[1]) * t);
+		const bl = Math.round(a[2] + (b[2] - a[2]) * t);
+		return `rgb(${r}, ${g}, ${bl})`;
+	}
 
 	// Race a promise against an AbortSignal so awaits unwind the instant a
 	// loop is cancelled — otherwise tween.to() / setTimeout promises keep
@@ -137,6 +193,7 @@
 			for (const id of keyframeTimeouts) clearTimeout(id);
 			keyframeTimeouts = [];
 		}
+		cancelKfPathRafs();
 	}
 	function setKeyframeOverride(elementId: string, prop: string, value: any) {
 		const cur = keyframeOverrides.get(elementId) ?? {};
@@ -151,10 +208,103 @@
 	function easingForTween(name: string | undefined): (t: number) => number {
 		return getEasingFn(name ?? 'ease-out');
 	}
-	function animateKeyframes(slide: Slide) {
+
+	// ── Cross-slide shape/path morph (on slide enter) ──────────────────────
+	let morphLoopAbort: AbortController | null = null;
+	// Armed at the top of animateToSlide, played only after currentSlideIndex
+	// flips so the full 0→1 morph runs while the target slide is on screen
+	// (playing before the target paints finishes the tween invisibly → snap).
+	let pendingMorphPlays: Array<{ id: string; duration: number; easing: (t: number) => number }> = [];
+	function cancelMorphLoops() {
+		if (morphLoopAbort) { morphLoopAbort.abort(); morphLoopAbort = null; }
+		pendingMorphPlays = [];
+		cancelMorphRaf();
+		if (crossMorphProg.size > 0) crossMorphProg = new Map();
+	}
+	function playCrossSlideMorphs() {
+		const plays = pendingMorphPlays;
+		pendingMorphPlays = [];
+		if (!plays.length || typeof requestAnimationFrame === 'undefined') return;
+		const maxDur = Math.max(...plays.map((p) => p.duration), 1);
+		cancelMorphRaf();
+		let startTs = 0;
+		const step = (ts: number) => {
+			if (!startTs) startTs = ts;
+			const elapsed = ts - startTs;
+			const next = new Map(crossMorphProg);
+			let done = true;
+			for (const p of plays) {
+				const lin = Math.min(1, p.duration > 0 ? elapsed / p.duration : 1);
+				next.set(p.id, p.easing(lin));
+				if (lin < 1) done = false;
+			}
+			crossMorphProg = next;
+			if (!done) {
+				morphRafId = requestAnimationFrame(step);
+			} else {
+				// Morph complete — drop both progress and morph state so the render
+				// hands off to the faithful static SVG (preserves layering/opacity).
+				morphRafId = null;
+				const cleared = new Map(crossMorphProg);
+				const pm = new Map(pathMorphStates);
+				for (const p of plays) { cleared.delete(p.id); pm.delete(p.id); }
+				crossMorphProg = cleared;
+				pathMorphStates = pm;
+			}
+		};
+		morphRafId = requestAnimationFrame(step);
+	}
+	function animateCrossSlideMorph(fromSlide: Slide | undefined, toSlide: Slide) {
+		cancelMorphLoops();
+		if (pathMorphStates.size > 0) pathMorphStates = new Map();
+		if (!fromSlide || fromSlide === toSlide) return;
+		morphLoopAbort = new AbortController();
+		const signal = morphLoopAbort.signal;
+		for (const element of toSlide.canvas.elements) {
+			try {
+				if (element.type !== 'shape' && element.type !== 'svg' && element.type !== 'draw') continue;
+				// Keyframe path-morphs own pathMorph on their slide — skip to avoid
+				// two drivers fighting (snap).
+				if (element.keyframes?.some((k) => k.path)) continue;
+				const fromEl = fromSlide.canvas.elements.find((e) => e.id === element.id);
+				if (!fromEl || (fromEl.type !== 'shape' && fromEl.type !== 'svg' && fromEl.type !== 'draw')) continue;
+				const animated = animatedElements.get(element.id) as any;
+				if (!animated?.pathMorph) continue;
+				const from = resolveElementPathParts(fromEl as any);
+				const to = resolveElementPathParts(element as any);
+				if (!from || !to) continue;
+				// Skip identical geometry (compare RAW parts — fitPathToBox reserializes
+				// and would never string-match its own source). See app copy.
+				if (from.viewBox === to.viewBox && from.parts.length === to.parts.length && from.parts.every((p, i) => p.d === to.parts[i].d)) continue;
+				const tvb = to.viewBox.split(/[\s,]+/).map(Number);
+				const fromFitted = from.parts.map((p) => ({ d: fitPathToBox(p.d, from.viewBox, tvb[2] || 100, tvb[3] || 100), fill: p.fill }));
+				const duration = (element.animationConfig?.duration ?? 800);
+				const parts = makeMorphParts(fromFitted, to.parts);
+				pathMorphStates.set(element.id, {
+					interp: parts[0].interp,
+					fromColor: parts[0].fromColor,
+					toColor: parts[0].toColor,
+					viewBox: to.viewBox,
+					parts
+				});
+				pathMorphStates = new Map(pathMorphStates);
+				if (signal.aborted) return;
+				// Drive progress via the rAF loop + crossMorphProg $state (not the
+				// tween — its reactivity doesn't cross the bundle boundary). Seed 0.
+				crossMorphProg.set(element.id, 0);
+				pendingMorphPlays.push({ id: element.id, duration, easing: getEasingFn(element.animationConfig?.easing) });
+			} catch (e) {
+				console.warn('[morph] skipped element', element.id, e);
+			}
+		}
+		if (crossMorphProg.size > 0) crossMorphProg = new Map(crossMorphProg);
+	}
+
+	function animateKeyframes(slide: Slide, fromSlide?: Slide) {
 		cancelKeyframeLoops();
 		const hasAnyKeyframes = slide.canvas.elements.some((el) => el.keyframes && el.keyframes.length > 0);
 		if (keyframeOverrides.size > 0) keyframeOverrides = new Map();
+		if (kfPathStates.size > 0) kfPathStates = new Map();
 		if (!hasAnyKeyframes) return;
 		keyframeLoopAbort = new AbortController();
 		const signal = keyframeLoopAbort.signal;
@@ -164,13 +314,19 @@
 			if (!animated) continue;
 			const sorted = [...element.keyframes].sort((a, b) => a.time - b.time);
 			const first = sorted[0];
-			// Snap tweens to KF1 instantly so the slide-displayed pose IS the start.
-			if (first.position) { animated.x?.to(first.position.x, { duration: 0 }); animated.y?.to(first.position.y, { duration: 0 }); }
-			if (first.size) { animated.width?.to(first.size.width, { duration: 0 }); animated.height?.to(first.size.height, { duration: 0 }); }
-			if (first.rotation !== undefined) animated.rotation?.to(first.rotation, { duration: 0 });
+			// If we came from another slide where this element existed, morph the
+			// first keyframe's transform props IN from the previous pose (so a
+			// slide change / loop wrap blends like every other element). openDur=0
+			// (no source) keeps the snap-to-KF1 behavior on initial load.
+			const cameFromEl = fromSlide?.canvas.elements.find((e) => e.id === element.id);
+			const openDur = cameFromEl ? Math.max(50, first.time || 600) : 0;
+			const openEase = easingForTween('ease-in-out');
+			if (first.position) { animated.x?.to(first.position.x, { duration: openDur, easing: openEase }); animated.y?.to(first.position.y, { duration: openDur, easing: openEase }); }
+			if (first.size) { animated.width?.to(first.size.width, { duration: openDur, easing: openEase }); animated.height?.to(first.size.height, { duration: openDur, easing: openEase }); }
+			if (first.rotation !== undefined) animated.rotation?.to(first.rotation, { duration: openDur, easing: openEase });
 			if (first.opacity !== undefined) animated.opacity?.to(first.opacity, { duration: 0 });
-			if (first.skewX !== undefined) animated.skewX?.to(first.skewX, { duration: 0 });
-			if (first.skewY !== undefined) animated.skewY?.to(first.skewY, { duration: 0 });
+			if (first.skewX !== undefined) animated.skewX?.to(first.skewX, { duration: openDur, easing: openEase });
+			if (first.skewY !== undefined) animated.skewY?.to(first.skewY, { duration: openDur, easing: openEase });
 			if (first.tiltX !== undefined) animated.tiltX?.to(first.tiltX, { duration: 0 });
 			if (first.tiltY !== undefined) animated.tiltY?.to(first.tiltY, { duration: 0 });
 			if (first.borderRadius !== undefined) animated.borderRadius?.to(first.borderRadius, { duration: 0 });
@@ -185,7 +341,44 @@
 			if (first.grayscale !== undefined) animated.grayscale?.to(first.grayscale, { duration: 0 });
 			if (first.backgroundColor !== undefined) setKeyframeOverride(element.id, 'backgroundColor', first.backgroundColor);
 			if (first.color !== undefined) setKeyframeOverride(element.id, 'color', first.color);
+			// Path morph: snap to the first keyframe's path (static interp) so the
+			// element shows that geometry from the start.
+			const kfColor = resolveMorphColor(element);
+			const kfVB = resolveElementPath(element as any)?.viewBox;
+			if (first.path && animated.pathMorph) {
+				const fromEl = fromSlide?.canvas.elements.find((e) => e.id === element.id);
+				let openFrom: string | null = null;
+				if (fromEl && (fromEl.type === 'shape' || fromEl.type === 'svg' || fromEl.type === 'draw')) {
+					try {
+						const fp = resolveElementPath(fromEl as any);
+						if (fp && fp.d !== first.path) {
+							const tvb = (kfVB ?? '0 0 100 100').split(/[\s,]+/).map(Number);
+							openFrom = fitPathToBox(fp.d, fp.viewBox, tvb[2] || 100, tvb[3] || 100);
+						}
+					} catch { /* skip */ }
+				}
+				if (openFrom) {
+					const openSpan = Math.max(50, first.time || 600);
+					kfPathStates.set(element.id, { interp: makePathInterpolator(openFrom, first.path), fromColor: kfColor, toColor: kfColor, viewBox: kfVB });
+					kfPathStates = new Map(kfPathStates);
+					driveKfPathMorph(element.id, openSpan, getEasingFn('ease-in-out'));
+				} else {
+					const staticD = first.path;
+					kfPathStates.set(element.id, { interp: () => staticD, fromColor: kfColor, toColor: kfColor, viewBox: kfVB });
+					kfPathStates = new Map(kfPathStates);
+					cancelKfPathRaf(element.id);
+					kfPathProg.set(element.id, 1);
+					kfPathProg = new Map(kfPathProg);
+				}
+			}
+			let kfPrevPath = first.path;
 			for (const kf of sorted.slice(1)) {
+				const kfSegFrom = kfPrevPath;
+				if (kf.path) kfPrevPath = kf.path;
+				// Fire at the PREVIOUS keyframe and animate over the gap so the
+				// element arrives AT this keyframe's time (not span ms later).
+				const kfIdx = sorted.indexOf(kf);
+				const segPrevTime = kfIdx <= 1 ? sorted[0].time : sorted[kfIdx - 1].time;
 				const tid = setTimeout(() => {
 					if (signal.aborted) return;
 					const easing = easingForTween(kf.easing);
@@ -212,7 +405,16 @@
 					if (kf.grayscale !== undefined) animated.grayscale?.to(kf.grayscale, { duration: span, easing });
 					if (kf.backgroundColor !== undefined) setKeyframeOverride(element.id, 'backgroundColor', kf.backgroundColor);
 					if (kf.color !== undefined) setKeyframeOverride(element.id, 'color', kf.color);
-				}, Math.max(0, kf.time));
+					// Path morph between the previous path and this keyframe's path.
+					if (kf.path && kfSegFrom && kf.path !== kfSegFrom && animated.pathMorph) {
+						kfPathStates.set(element.id, {
+							interp: makePathInterpolator(kfSegFrom, kf.path),
+							fromColor: kfColor, toColor: kfColor, viewBox: kfVB
+						});
+						kfPathStates = new Map(kfPathStates);
+						driveKfPathMorph(element.id, span, easing);
+					}
+				}, Math.max(0, segPrevTime));
 				keyframeTimeouts.push(tid);
 			}
 		}
@@ -403,6 +605,62 @@
 	let textTypewriterState = $state<Map<string, {fullText: string, displayedChars: number, isAnimating: boolean}>>(new Map());
 	let typewriterIntervals = new Map<string, ReturnType<typeof setInterval>>();
 	let shapeMorphStates = $state<Map<string, ShapeMorphState>>(new Map());
+	let pathMorphStates = $state<Map<string, PathMorphState>>(new Map());
+	// Within-slide keyframe path morph (separate from cross-slide pathMorphStates
+	// so the render keeps interpolating even at progress=1, since the element's
+	// base svgContent is NOT the keyframe target).
+	let kfPathStates = $state<Map<string, PathMorphState>>(new Map());
+	// Cross-slide morph progress, driven by a manual rAF loop into this
+	// component-owned $state map. The @animotion Tween's reactive `.current`
+	// does NOT propagate re-renders across the packaged-bundle boundary (it
+	// does in the editor app), so reading the tween in the template never
+	// repaints → snap. A $state map we own DOES repaint (same as
+	// pathMorphStates), and the manual loop is the pattern motion paths use.
+	let crossMorphProg = $state<Map<string, number>>(new Map());
+	let kfPathProg = $state<Map<string, number>>(new Map());
+	let morphRafId: number | null = null;
+	function cancelMorphRaf() {
+		if (morphRafId !== null && typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(morphRafId);
+		morphRafId = null;
+	}
+	let kfPathRafIds = new Map<string, number>();
+	function cancelKfPathRafs() {
+		if (typeof cancelAnimationFrame !== 'undefined') {
+			for (const id of kfPathRafIds.values()) cancelAnimationFrame(id);
+		}
+		kfPathRafIds.clear();
+		if (kfPathProg.size > 0) kfPathProg = new Map();
+	}
+	function cancelKfPathRaf(elementId: string) {
+		const rafId = kfPathRafIds.get(elementId);
+		if (rafId !== undefined && typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(rafId);
+		kfPathRafIds.delete(elementId);
+	}
+	function driveKfPathMorph(elementId: string, duration: number, easing: (t: number) => number) {
+		if (typeof requestAnimationFrame === 'undefined') {
+			kfPathProg.set(elementId, 1);
+			kfPathProg = new Map(kfPathProg);
+			return;
+		}
+		cancelKfPathRaf(elementId);
+		kfPathProg.set(elementId, 0);
+		kfPathProg = new Map(kfPathProg);
+		let startTs = 0;
+		const span = Math.max(1, duration);
+		const step = (ts: number) => {
+			if (!startTs) startTs = ts;
+			const lin = Math.min(1, (ts - startTs) / span);
+			const next = new Map(kfPathProg);
+			next.set(elementId, easing(lin));
+			kfPathProg = next;
+			if (lin < 1) {
+				kfPathRafIds.set(elementId, requestAnimationFrame(step));
+			} else {
+				kfPathRafIds.delete(elementId);
+			}
+		};
+		kfPathRafIds.set(elementId, requestAnimationFrame(step));
+	}
 	let autoplayTimer: ReturnType<typeof setTimeout> | null = null;
 	let menuVisible = $state(true);
 	let mouseIdleTimer: ReturnType<typeof setTimeout> | null = null;
@@ -713,6 +971,10 @@
 						strokeColor: shapeEl ? mkTween(seedStroke, { duration: 500 }) : null,
 						strokeWidth: shapeEl ? mkTween(seedStrokeW, { duration: 500 }) : null,
 						shapeMorph: shapeEl ? mkTween(1, { duration: 500 }) : null,
+						// Raw tween (NOT mkTween): wrapTween's `current === value` guard
+						// would skip the deferred play-to-1 (pathMorph inits to 1 and the
+						// arm's async to(0) hasn't applied yet) → cross-slide morph snaps.
+						pathMorph: (element.type === 'svg' || element.type === 'draw' || shapeEl) ? tween(1, { duration: 500 }) : null,
 						motionPathProgress: element.motionPathConfig ? mkTween(0, { duration: 500 }) : null,
 						blur: mkTween(seedBlur, { duration: 500 }),
 						brightness: mkTween(seedBright, { duration: 500 }),
@@ -784,6 +1046,7 @@
 		clearAllTypewriterAnimations();
 		cancelMotionPathLoops();
 		cancelKeyframeLoops();
+		cancelMorphLoops();
 		const firstSlide = slides[0];
 		if (!firstSlide) { isTransitioning = false; return; }
 
@@ -845,6 +1108,7 @@
 		previousChartContent = new Map();
 		previousProgressContent = new Map();
 		shapeMorphStates = new Map();
+		pathMorphStates = new Map();
 		elementContent = new Map(elementContent);
 		currentSlideIndex = 0;
 		isTransitioning = false;
@@ -877,9 +1141,14 @@
 		isTransitioning = true;
 		transitionDirection = targetIndex > currentSlideIndex ? 'forward' : 'backward';
 		const targetSlide = slides[targetIndex];
+		// Slide we're leaving — `currentSlideIndex` flips to target mid-function
+		// and `currentSlide` derives from it, so morph source geometry must read
+		// from this snapshot.
+		const sourceSlide = slides[currentSlideIndex];
 		clearAllTypewriterAnimations();
 		cancelMotionPathLoops();
 		cancelKeyframeLoops();
+		cancelMorphLoops();
 		// Manual arrow nav and the autoplay timer are both forms of "user
 		// is moving forward in the deck" — both should swap narration to
 		// the new slide. The pause button is what stops audio. Without
@@ -891,6 +1160,11 @@
 		transitionDurationMs = duration;
 		const hasSlideTransition = transition.type !== 'none';
 
+		// Cross-slide shape/path morph: set up BEFORE the flip + transition so
+		// the first render shows the source geometry and morphs to target
+		// concurrently (no target→source flash), and fires on the loop wrap.
+		animateCrossSlideMorph(sourceSlide, targetSlide);
+
 		if (hasSlideTransition) {
 			// Phase 2 sprint-1 polish — fire per-element exit presets BEFORE
 			// the slide-level CSS transition starts, then WAIT for them to
@@ -987,6 +1261,9 @@
 				}
 			}
 			codeHighlights = new Map(codeHighlights);
+			// Do NOT clear pathMorphStates — animateCrossSlideMorph() armed it at
+			// the top of this function and its tween is mid-flight; wiping it makes
+			// the cross-slide morph vanish behind the slide transition.
 			shapeMorphStates = new Map();
 			codeMorphState = newCodeMorphState;
 			previousCodeContent = newPreviousCodeContent;
@@ -995,6 +1272,7 @@
 			elementContent = newElementContent;
 			animatedElements = new Map(animatedElements);
 			currentSlideIndex = targetIndex;
+			playCrossSlideMorphs();
 			for (const elementId of allElementIds) {
 				const targetEl = getElementInSlide(targetSlide, elementId);
 				if (targetEl?.type === 'text') {
@@ -1009,7 +1287,7 @@
 			firePresenterEntrancePresets(targetIndex);
 			await new Promise(r => setTimeout(r, duration * 0.6));
 			transitionClass = '';
-			animateKeyframes(targetSlide);
+			animateKeyframes(targetSlide, sourceSlide);
 			animateMotionPaths(targetSlide);
 			isTransitioning = false;
 			onslidechange?.(targetIndex, slides.length);
@@ -1256,18 +1534,16 @@
 								if (animated.strokeColor) anims.push(animated.strokeColor.to(ts.strokeColor, { duration: elementDuration, easing }));
 								if (animated.strokeWidth) anims.push(animated.strokeWidth.to(ts.strokeWidth, { duration: elementDuration, easing }));
 							}
-							if (cs.shapeType !== ts.shapeType && animated.shapeMorph) {
-								shapeMorphStates.set(elementId, { fromType: cs.shapeType, toType: ts.shapeType });
-								shapeMorphStates = new Map(shapeMorphStates);
-								anims.push(animated.shapeMorph.to(0, { duration: 0 }));
-								anims.push(animated.shapeMorph.to(1, { duration: elementDuration, easing }));
-							}
+							// Shape→shape geometry change is handled by the flubber path
+							// morph below (true geometric morph, not a crossfade).
 						} else if (targetEl.type === 'shape' && !propertySequences?.length) {
 							const s = targetEl as ShapeElement;
 							if (animated.fillColor) anims.push(animated.fillColor.to(s.fillColor, { duration: elementDuration, easing }));
 							if (animated.strokeColor) anims.push(animated.strokeColor.to(s.strokeColor, { duration: elementDuration, easing }));
 							if (animated.strokeWidth) anims.push(animated.strokeWidth.to(s.strokeWidth, { duration: elementDuration, easing }));
 						}
+						// Cross-slide shape/path morph is handled on slide ENTER by
+						// animateCrossSlideMorph (transition-independent), not here.
 						if (!currentEl) {
 							// Snap ALL properties to target instantly — the tween may hold
 							// stale values from a previous slide where the element last appeared
@@ -1385,11 +1661,14 @@
 			}
 		}
 		codeHighlights = new Map(codeHighlights);
+		// Do NOT clear pathMorphStates (same fix as the slide-transition branch) —
+		// animateCrossSlideMorph() armed it at the top and its tween is mid-flight.
 		shapeMorphStates = new Map();
 		codeMorphState = newCodeMorphState;
 		previousCodeContent = newPreviousCodeContent;
 		elementContent = newElementContent;
 		currentSlideIndex = targetIndex;
+		playCrossSlideMorphs();
 		isTransitioning = false;
 		// Ensure elements not on the new slide are fully hidden. Phase 2:
 		// skip elements with an active runtime exit registration — their
@@ -1403,7 +1682,7 @@
 			const hasActiveExit = !!reg?.get(elementId)?.exit;
 			if (!onSlide && animated && !hasActiveExit) { animated.opacity.to(0, { duration: 0 }); }
 		}
-		animateKeyframes(slides[targetIndex]);
+		animateKeyframes(slides[targetIndex], sourceSlide);
 		animateMotionPaths(slides[targetIndex]);
 		onslidechange?.(targetIndex, slides.length);
 		if (targetIndex === slides.length - 1 && !loop) oncomplete?.();
@@ -1418,7 +1697,7 @@
 		autoplayTimer = setTimeout(() => {
 			if (currentSlideIndex < slides.length - 1) animateToSlide(currentSlideIndex + 1);
 			else if (loop) {
-				const loopMode = project?.settings?.loopMode ?? 'reset';
+				const loopMode = project?.settings?.loopMode ?? ((project as any)?.mode === 'flow' ? 'reset' : 'transition');
 				if (loopMode === 'transition') animateToSlide(0);
 				else resetToFirstSlide();
 			}
@@ -1432,7 +1711,7 @@
 		if (currentSlideIndex < slides.length - 1) {
 			animateToSlide(currentSlideIndex + 1);
 		} else if (loop) {
-			const loopMode = project?.settings?.loopMode ?? 'reset';
+			const loopMode = project?.settings?.loopMode ?? ((project as any)?.mode === 'flow' ? 'reset' : 'transition');
 			if (loopMode === 'transition') {
 				animateToSlide(0);
 			} else {
@@ -1661,7 +1940,11 @@
 	aria-label="Animot Presentation"
 >
 	{#if loading}
-		<div class="animot-loading"><div class="animot-spinner"></div></div>
+		<!-- Skeleton placeholder — brand-aligned shimmer instead of a spinning
+		     circle. Single full-bleed surface with a purple aurora glow and
+		     a horizontal sweep keyframe. Reads as "content loading" without
+		     the ugly default web-component spinner. -->
+		<div class="animot-loading"><div class="animot-skeleton"></div></div>
 	{:else if error}
 		<div class="animot-error">{error}</div>
 	{:else if project && currentSlide}
@@ -1898,21 +2181,27 @@
 								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
 								{@const animStroke = animated.strokeColor?.current ?? shapeEl.strokeColor}
 								{@const animStrokeWidth = animated.strokeWidth?.current ?? shapeEl.strokeWidth}
-								{@const mState = shapeMorphStates.get(element.id)}
-								{@const morphProgress = animated.shapeMorph?.current ?? 1}
-								{@const effectiveShapeType = mState ? (morphProgress >= 1 ? mState.toType : (morphProgress <= 0 ? mState.fromType : null)) : shapeEl.shapeType}
-								{@const isMorphing = mState && morphProgress > 0 && morphProgress < 1}
-								<svg class="animot-shape-element" viewBox="0 0 {Math.max(0, animated.width.current)} {Math.max(0, animated.height.current)}" fill-opacity={shapeEl.fillOpacity ?? 1} stroke-opacity={shapeEl.strokeOpacity ?? 1} style:filter={shapeEl.boxShadow?.enabled ? `drop-shadow(${shapeEl.boxShadow.offsetX}px ${shapeEl.boxShadow.offsetY}px ${shapeEl.boxShadow.blur}px ${shapeEl.boxShadow.color})` : 'none'}>
-									{#if isMorphing}
-										{@const w = Math.max(0, animated.width.current)}
-										{@const h = Math.max(0, animated.height.current)}
-										{@const sw = animStrokeWidth}
-										<g style:opacity={1 - morphProgress}>{@html renderShape(mState!.fromType, w, h, animated.borderRadius.current, animFill, animStroke, sw, shapeEl.strokeStyle, shapeEl.strokeDashGap)}</g>
-										<g style:opacity={morphProgress}>{@html renderShape(mState!.toType, w, h, animated.borderRadius.current, animFill, animStroke, sw, shapeEl.strokeStyle, shapeEl.strokeDashGap)}</g>
-									{:else}
-										{@html renderShape(effectiveShapeType ?? shapeEl.shapeType, Math.max(0, animated.width.current), Math.max(0, animated.height.current), animated.borderRadius.current, animFill, animStroke, animStrokeWidth, shapeEl.strokeStyle, shapeEl.strokeDashGap)}
-									{/if}
-								</svg>
+								{@const shapeKpm = kfPathStates.get(element.id)}
+								{@const shapePm = pathMorphStates.get(element.id)}
+								{@const shapePmProg = crossMorphProg.get(elementId) ?? (animated.pathMorph?.current ?? 1)}
+								{@const shapeKpmProg = kfPathProg.get(elementId) ?? (animated.pathMorph?.current ?? 1)}
+								{@const shapeMorphProg = shapeKpm ? shapeKpmProg : shapePmProg}
+								{@const shapeMorphActive = shapeKpm ?? ((shapePm && shapePmProg > 0 && shapePmProg < 1) ? shapePm : restingKfMorph(element))}
+								{#if shapeMorphActive}
+									<svg class="animot-shape-element" width="100%" height="100%" viewBox={shapeMorphActive.viewBox ?? `0 0 ${Math.max(1, animated.width.current)} ${Math.max(1, animated.height.current)}`} preserveAspectRatio="none">
+										{#if shapeMorphActive.parts && shapeMorphActive.parts.length > 1}
+											{#each shapeMorphActive.parts as part}
+												<path d={part.interp(Math.max(0, Math.min(1, shapeMorphProg)))} fill={(element as any).morphColor ?? part.toColor} fill-rule="evenodd" />
+											{/each}
+										{:else}
+											<path d={shapeMorphActive.interp(Math.max(0, Math.min(1, shapeMorphProg)))} fill={animFill} stroke={animStroke} stroke-width={animStrokeWidth} />
+										{/if}
+									</svg>
+								{:else}
+									<svg class="animot-shape-element" viewBox="0 0 {Math.max(0, animated.width.current)} {Math.max(0, animated.height.current)}" fill-opacity={shapeEl.fillOpacity ?? 1} stroke-opacity={shapeEl.strokeOpacity ?? 1} style:filter={shapeEl.boxShadow?.enabled ? `drop-shadow(${shapeEl.boxShadow.offsetX}px ${shapeEl.boxShadow.offsetY}px ${shapeEl.boxShadow.blur}px ${shapeEl.boxShadow.color})` : 'none'}>
+										{@html renderShape(shapeEl.shapeType, Math.max(0, animated.width.current), Math.max(0, animated.height.current), animated.borderRadius.current, animFill, animStroke, animStrokeWidth, shapeEl.strokeStyle, shapeEl.strokeDashGap)}
+									</svg>
+								{/if}
 							{:else if element.type === 'counter'}
 								<CounterRenderer element={element as CounterElement} slideId={currentSlide?.id ?? ''} />
 							{:else if element.type === 'chart'}
@@ -1934,28 +2223,41 @@
 								<IconRenderer element={element as IconElement} />
 							{:else if element.type === 'svg'}
 								{@const svgEl = element as SvgElement}
-								{@const svgParsed = (() => { const m = svgEl.svgContent.trim().match(/^<svg([^>]*)>([\s\S]*)<\/svg>$/i); if (m) { const vb = m[1].match(/viewBox=["']([^"']+)["']/i); return { inner: m[2], viewBox: vb ? vb[1] : null }; } return { inner: svgEl.svgContent, viewBox: null }; })()}
-								{@const svgAnimMode = svgEl.animation?.mode ?? 'none'}
-								{@const svgAnimDur = svgEl.animation?.duration ?? 800}
-								{@const svgAnimLoop = svgEl.animation?.loop ?? false}
-								{@const svgAnimReverse = svgEl.animation?.direction === 'reverse'}
-								<div
-									class="animot-svg-element"
-									use:traceSvgPaths={{
-										enabled: svgAnimMode !== 'none',
-										mode: svgAnimMode as 'none' | 'draw' | 'undraw' | 'draw-undraw' | 'flow',
-										duration: svgAnimDur,
-										loop: svgAnimLoop,
-										reverse: svgAnimReverse,
-										key: `${svgEl.id}-${svgAnimMode}-${svgAnimDur}-${currentSlideIndex}`
-									}}
-								>
-									<svg width="100%" height="100%" viewBox={svgEl.viewBox ?? svgParsed.viewBox ?? `0 0 ${svgEl.size.width} ${svgEl.size.height}`} preserveAspectRatio={svgEl.preserveAspectRatio} xmlns="http://www.w3.org/2000/svg">
-										<g style={svgEl.color ? `fill:${svgEl.color};stroke:${svgEl.color}` : ''}>
-											{@html svgParsed.inner}
-										</g>
-									</svg>
-								</div>
+								{@const kpm = kfPathStates.get(element.id)}
+									{@const pm = pathMorphStates.get(element.id)}
+									{@const pmProg = crossMorphProg.get(elementId) ?? (animated.pathMorph?.current ?? 1)}
+									{@const kpmProg = kfPathProg.get(elementId) ?? (animated.pathMorph?.current ?? 1)}
+									{@const morphProg = kpm ? kpmProg : pmProg}
+									{@const svgMorph = kpm ?? ((pm && pmProg > 0 && pmProg < 1) ? pm : restingKfMorph(element))}
+									{#if svgMorph}
+										<svg class="animot-svg-element" width="100%" height="100%" viewBox={svgMorph.viewBox ?? morphViewBox(element, animated.width.current, animated.height.current)} preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+											{#each (svgMorph.parts ?? [{ interp: svgMorph.interp, fromColor: svgMorph.fromColor, toColor: svgMorph.toColor }]) as part}
+												<path d={part.interp(Math.max(0, Math.min(1, morphProg)))} fill={(element as any).morphColor ?? part.toColor} fill-rule="evenodd" />
+											{/each}
+										</svg>								{:else}
+									{@const svgParsed = (() => { const m = svgEl.svgContent.trim().match(/^<svg([^>]*)>([\s\S]*)<\/svg>$/i); if (m) { const vb = m[1].match(/viewBox=["']([^"']+)["']/i); return { inner: m[2], viewBox: vb ? vb[1] : null }; } return { inner: svgEl.svgContent, viewBox: null }; })()}
+									{@const svgAnimMode = svgEl.animation?.mode ?? 'none'}
+									{@const svgAnimDur = svgEl.animation?.duration ?? 800}
+									{@const svgAnimLoop = svgEl.animation?.loop ?? false}
+									{@const svgAnimReverse = svgEl.animation?.direction === 'reverse'}
+									<div
+										class="animot-svg-element"
+										use:traceSvgPaths={{
+											enabled: svgAnimMode !== 'none',
+											mode: svgAnimMode as 'none' | 'draw' | 'undraw' | 'draw-undraw' | 'flow',
+											duration: svgAnimDur,
+											loop: svgAnimLoop,
+											reverse: svgAnimReverse,
+											key: `${svgEl.id}-${svgAnimMode}-${svgAnimDur}-${currentSlideIndex}`
+										}}
+									>
+										<svg width="100%" height="100%" viewBox={svgEl.viewBox ?? svgParsed.viewBox ?? `0 0 ${svgEl.size.width} ${svgEl.size.height}`} preserveAspectRatio={svgEl.preserveAspectRatio} xmlns="http://www.w3.org/2000/svg">
+											<g style={svgEl.color ? `fill:${svgEl.color};stroke:${svgEl.color}` : ''}>
+												{@html svgParsed.inner}
+											</g>
+										</svg>
+									</div>
+								{/if}
 							{:else if element.type === 'motionPath'}
 								{@const mpEl = element as MotionPathElement}
 								{#if mpEl.showInPresentation}
@@ -1963,6 +2265,31 @@
 										<path d={buildPresenterPathD(mpEl.points, mpEl.closed)} stroke={mpEl.pathColor} stroke-width={mpEl.pathWidth} fill="none" stroke-dasharray="8 4" />
 									</svg>
 								{/if}
+							{:else if element.type === 'draw'}
+								{@const drawEl = element as DrawElement}
+								{@const dkpm = kfPathStates.get(element.id)}
+									{@const dpm = pathMorphStates.get(element.id)}
+									{@const pmProg = crossMorphProg.get(elementId) ?? (animated.pathMorph?.current ?? 1)}
+									{@const kpmProg = kfPathProg.get(elementId) ?? (animated.pathMorph?.current ?? 1)}
+									{@const morphProg = dkpm ? kpmProg : pmProg}
+									{@const drawMorph = dkpm ?? ((dpm && pmProg > 0 && pmProg < 1) ? dpm : restingKfMorph(element))}
+									{@const drawPath = drawElementToPath(drawEl)}
+									<svg class="animot-draw-element" width="100%" height="100%" viewBox={drawMorph?.viewBox ?? drawPath.viewBox} preserveAspectRatio="none" style="display:block;overflow:visible;" xmlns="http://www.w3.org/2000/svg">
+										{#if drawMorph}
+											{#each (drawMorph.parts ?? [{ interp: drawMorph.interp, fromColor: drawMorph.fromColor, toColor: drawMorph.toColor }]) as part}
+												<path d={part.interp(Math.max(0, Math.min(1, morphProg)))} fill={(element as any).morphColor ?? part.toColor} fill-rule="evenodd" />
+											{/each}
+										{:else}
+											<path d={drawPath.d} fill={drawEl.color} />
+										{/if}
+									</svg>
+							{:else if element.type === 'sticky'}
+								{@const stickyEl = element as StickyElement}
+								<div class="animot-sticky-element" style:background={stickyEl.bgColor} style:color={stickyEl.textColor} style:border-radius="{stickyEl.borderRadius}px" style:padding="{stickyEl.padding}px" style:box-shadow={stickyEl.shadow === false ? 'none' : '0 10px 24px rgba(0,0,0,0.30), 0 3px 6px rgba(0,0,0,0.20)'}>
+									<div class="animot-sticky-sheen"></div>
+									<div class="animot-sticky-fold"></div>
+									<div class="animot-sticky-text" style:font-size="{stickyEl.fontSize}px" style:font-family="'{stickyEl.fontFamily}', sans-serif" style:font-weight={stickyEl.fontWeight} style:text-align={stickyEl.textAlign}>{stickyEl.text}</div>
+								</div>
 							{/if}
 						</div>
 					{/if}
@@ -2282,8 +2609,51 @@
 	.animot-progress-fill { height: 100%; background: linear-gradient(135deg, #7c3aed, #ec4899); transition: width 0.6s ease; }
 
 	/* Loading / Error */
-	.animot-loading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
-	.animot-spinner { width: 32px; height: 32px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #7c3aed; border-radius: 50%; animation: animot-spin 0.8s linear infinite; }
+	.animot-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		background:
+			radial-gradient(circle at 70% 30%, rgba(168, 66, 255, 0.12), transparent 60%),
+			radial-gradient(circle at 25% 75%, rgba(34, 199, 214, 0.08), transparent 65%),
+			rgba(8, 10, 24, 0.8);
+	}
+	.animot-skeleton {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+	.animot-skeleton::before,
+	.animot-skeleton::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
+	.animot-skeleton::before {
+		background: linear-gradient(
+			115deg,
+			transparent 30%,
+			rgba(168, 66, 255, 0.18) 50%,
+			transparent 70%
+		);
+		background-size: 220% 100%;
+		animation: animot-shimmer 1.6s linear infinite;
+	}
+	.animot-skeleton::after {
+		background: radial-gradient(circle at 50% 50%, rgba(168, 66, 255, 0.08), transparent 60%);
+		animation: animot-pulse 2s ease-in-out infinite;
+	}
+	@keyframes animot-shimmer {
+		0%   { background-position: 220% 0; }
+		100% { background-position: -220% 0; }
+	}
+	@keyframes animot-pulse {
+		0%, 100% { opacity: 0.6; }
+		50%      { opacity: 1; }
+	}
 	@keyframes animot-spin { to { transform: rotate(360deg); } }
 	.animot-error { color: #ef4444; padding: 20px; text-align: center; font-family: system-ui, sans-serif; }
 </style>