animot-presenter 0.5.22 → 0.5.24

package/dist/AnimotPresenter.svelte

@@ -29,6 +29,42 @@
 
 	type TweenValue = ReturnType<typeof tween<number>>;
 
+	// Svelte's underlying Tween.set() leaks: when retargeted before completion,
+	// the previous rAF task is aborted but its promise is NEVER fulfilled
+	// (see svelte/src/internal/client/loop.js — abort() only deletes the task,
+	// doesn't call fulfill). The presenter calls .to() on 15+ tween properties
+	// per element per slide transition, so a deck running in a loop accumulates
+	// hundreds of thousands of orphaned promises plus the async-function
+	// Contexts of any awaiter that's stuck on them. wrapTween() patches each
+	// tween instance so:
+	//   1) .to() on a value the tween is already at is a no-op (Promise.resolve)
+	//   2) Each .to() resolves the previous wrapper promise immediately on
+	//      retarget, so any await chain unwinds and releases its Context even
+	//      if the underlying Svelte promise is left dangling.
+	function wrapTween<TV extends { current: unknown; to: (v: never, o?: unknown) => Promise<void> }>(tv: TV): TV {
+		const origTo = tv.to.bind(tv);
+		let prevResolve: (() => void) | null = null;
+		(tv as unknown as { to: (v: unknown, o?: unknown) => Promise<void> }).to = (value, options) => {
+			if (tv.current === value) {
+				if (prevResolve) { const r = prevResolve; prevResolve = null; r(); }
+				return Promise.resolve();
+			}
+			if (prevResolve) { const r = prevResolve; prevResolve = null; r(); }
+			const inner = origTo(value as never, options);
+			return new Promise<void>((resolve) => {
+				prevResolve = resolve;
+				const done = () => {
+					if (prevResolve === resolve) { prevResolve = null; resolve(); }
+				};
+				inner.then(done, done);
+			});
+		};
+		return tv;
+	}
+	function mkTween<T>(value: T, options?: Parameters<typeof tween<T>>[1]): ReturnType<typeof tween<T>> {
+		return wrapTween(tween(value, options)) as ReturnType<typeof tween<T>>;
+	}
+
 	interface AnimatedElement {
 		x: TweenValue; y: TweenValue; width: TweenValue; height: TweenValue;
 		rotation: TweenValue; skewX: TweenValue; skewY: TweenValue;
@@ -49,34 +85,76 @@
 
 	interface ShapeMorphState { fromType: string; toType: string; }
 
+	// Race a promise against an AbortSignal so awaits unwind the instant a
+	// loop is cancelled — otherwise tween.to() / setTimeout promises keep
+	// pending and pin their async-function Context to the heap. Long-running
+	// loops without this leak millions of closure contexts (see commit notes).
+	function abortable<T>(p: Promise<T>, signal: AbortSignal): Promise<T> {
+		if (signal.aborted) return Promise.reject(new DOMException('aborted', 'AbortError'));
+		return new Promise<T>((resolve, reject) => {
+			const onAbort = () => reject(new DOMException('aborted', 'AbortError'));
+			signal.addEventListener('abort', onAbort, { once: true });
+			p.then(
+				(v) => { signal.removeEventListener('abort', onAbort); resolve(v); },
+				(e) => { signal.removeEventListener('abort', onAbort); reject(e); }
+			);
+		});
+	}
+	function abortableSleep(ms: number, signal: AbortSignal): Promise<void> {
+		if (signal.aborted) return Promise.reject(new DOMException('aborted', 'AbortError'));
+		return new Promise<void>((resolve, reject) => {
+			const id = setTimeout(() => { signal.removeEventListener('abort', onAbort); resolve(); }, ms);
+			const onAbort = () => { clearTimeout(id); reject(new DOMException('aborted', 'AbortError')); };
+			signal.addEventListener('abort', onAbort, { once: true });
+		});
+	}
+	function isAbortError(e: unknown): boolean {
+		return !!(e && typeof e === 'object' && (e as { name?: string }).name === 'AbortError');
+	}
+
 	// Active motion path loop cancellation tokens
 	let motionPathLoopAbort: AbortController | null = null;
 	function cancelMotionPathLoops() {
 		if (motionPathLoopAbort) { motionPathLoopAbort.abort(); motionPathLoopAbort = null; }
 	}
 
-	// Keyframe schedule loop — independent from motion-path / morph engines.
-	// Plain (non-reactive) state: no $state for the abort controller because
-	// the keyframe loop only retargets existing tweens and doesn't need to
-	// drive any reactive UI of its own. Adding reactive state here proved to
-	// crowd out the existing tween reactivity in 0.5.20.
+	// Keyframe schedule loop. Plain (non-reactive) module-scope state — adding
+	// $state for keyframe overrides in 0.5.20 broke reactivity for the existing
+	// tween-driven render. This implementation only retargets existing tweens
+	// via setTimeout; nothing here is reactive, nothing is read from render.
 	let keyframeLoopAbort: AbortController | null = null;
+	// Scheduled-but-not-yet-fired keyframe timeouts. We track these so cancel
+	// also clears them — otherwise their closures (which capture `signal`,
+	// `animated`, etc.) survive until natural firing time and pin a Context.
+	let keyframeTimeouts: ReturnType<typeof setTimeout>[] = [];
+	// Per-element overrides for keyframe-driven props that aren't tweened
+	// (backgroundColor, text color). The schedule writes these at each
+	// keyframe boundary; liveProps reads them at render time.
+	let keyframeOverrides = $state<Map<string, Record<string, any>>>(new Map());
 	function cancelKeyframeLoops() {
 		if (keyframeLoopAbort) { keyframeLoopAbort.abort(); keyframeLoopAbort = null; }
-	}
-	function easingForTween(name: string | undefined): string {
-		switch (name) {
-			case 'linear': case 'ease-in': case 'ease-out': case 'ease-in-out': return name;
-			case 'spring': return 'ease-out';
-			case 'ease': default: return 'ease-out';
+		if (keyframeTimeouts.length) {
+			for (const id of keyframeTimeouts) clearTimeout(id);
+			keyframeTimeouts = [];
 		}
 	}
+	function setKeyframeOverride(elementId: string, prop: string, value: any) {
+		const cur = keyframeOverrides.get(elementId) ?? {};
+		keyframeOverrides.set(elementId, { ...cur, [prop]: value });
+		keyframeOverrides = new Map(keyframeOverrides);
+	}
+	// Tweens take an easing FUNCTION (t→number), not a CSS keyword. Returning
+	// a string here was the cause of "r is not a function" thrown deep in the
+	// tween animation loop — `r(t)` crashed because `r` was the literal string
+	// passed in. Reuse the engine's `getEasingFn` so keyframe easing matches
+	// the slide-morph engine's vocabulary.
+	function easingForTween(name: string | undefined): (t: number) => number {
+		return getEasingFn(name ?? 'ease-out');
+	}
 	function animateKeyframes(slide: Slide) {
 		cancelKeyframeLoops();
-		// Bail if nothing on the slide actually has keyframes — avoids
-		// allocating an AbortController + iterating elements for the common
-		// case (no keyframes anywhere).
 		const hasAnyKeyframes = slide.canvas.elements.some((el) => el.keyframes && el.keyframes.length > 0);
+		if (keyframeOverrides.size > 0) keyframeOverrides = new Map();
 		if (!hasAnyKeyframes) return;
 		keyframeLoopAbort = new AbortController();
 		const signal = keyframeLoopAbort.signal;
@@ -86,6 +164,7 @@
 			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 });
@@ -104,8 +183,10 @@
 			if (first.contrast !== undefined) animated.contrast?.to(first.contrast, { duration: 0 });
 			if (first.saturate !== undefined) animated.saturate?.to(first.saturate, { duration: 0 });
 			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);
 			for (const kf of sorted.slice(1)) {
-				setTimeout(() => {
+				const tid = setTimeout(() => {
 					if (signal.aborted) return;
 					const easing = easingForTween(kf.easing);
 					const idx = sorted.indexOf(kf);
@@ -129,7 +210,10 @@
 					if (kf.contrast !== undefined) animated.contrast?.to(kf.contrast, { duration: span, easing });
 					if (kf.saturate !== undefined) animated.saturate?.to(kf.saturate, { duration: span, easing });
 					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));
+				keyframeTimeouts.push(tid);
 			}
 		}
 	}
@@ -347,6 +431,35 @@
 		return slide?.canvas.elements.find(el => el.id === elementId);
 	}
 
+	/**
+	 * Overlay tween-driven values + non-tweened keyframe overrides onto the
+	 * element used in render. Gated: returns the element unchanged when it
+	 * has no keyframes AND no active override — that's the 99% case and
+	 * keeps the existing slide-morph render pipeline allocation-free.
+	 */
+	function liveProps<T extends CanvasElement>(element: T): T {
+		const hasKeyframes = !!element.keyframes && element.keyframes.length > 0;
+		const overrides = keyframeOverrides.get(element.id);
+		if (!hasKeyframes && !overrides) return element;
+		const a = animatedElements.get(element.id) as any;
+		const e = element as any;
+		const out: any = { ...element };
+		if (a && hasKeyframes) {
+			if (a.borderRadius && e.borderRadius !== undefined) out.borderRadius = a.borderRadius.current;
+			if (a.fontSize && e.fontSize !== undefined) out.fontSize = a.fontSize.current;
+			if (a.fillColor && e.fillColor !== undefined) out.fillColor = a.fillColor.current;
+			if (a.strokeColor && e.strokeColor !== undefined) out.strokeColor = a.strokeColor.current;
+			if (a.strokeWidth && e.strokeWidth !== undefined) out.strokeWidth = a.strokeWidth.current;
+			if (a.blur && e.blur !== undefined) out.blur = a.blur.current;
+			if (a.brightness && e.brightness !== undefined) out.brightness = a.brightness.current;
+			if (a.contrast && e.contrast !== undefined) out.contrast = a.contrast.current;
+			if (a.saturate && e.saturate !== undefined) out.saturate = a.saturate.current;
+			if (a.grayscale && e.grayscale !== undefined) out.grayscale = a.grayscale.current;
+		}
+		if (overrides) Object.assign(out, overrides);
+		return out as T;
+	}
+
 	// Typewriter
 	function startTypewriterAnimation(elementId: string, fullText: string, speed: number) {
 		const existing = typewriterIntervals.get(elementId);
@@ -487,36 +600,71 @@
 			for (const element of slide.canvas.elements) {
 				if (!animatedElements.has(element.id)) {
 					const inCurrent = getElementInSlide(currentSlide, element.id);
-					const startOpacity = inCurrent ? ((inCurrent as any).opacity ?? 1) : 0;
+					let startOpacity = inCurrent ? ((inCurrent as any).opacity ?? 1) : 0;
 					const br = (element as any).borderRadius ?? 0;
 					const isShape = element.type === 'shape';
 					const shapeEl = isShape ? element as ShapeElement : null;
 					const isText = element.type === 'text';
 					const textEl = isText ? element as TextElement : null;
+
+					// If the element has keyframes, seed each tween with the FIRST
+					// keyframe's value instead of the persisted (last-captured)
+					// state. The persisted state is whatever was on the canvas
+					// at the moment the user captured their final keyframe; using
+					// it as the tween's starting value would cause the slide to
+					// flash at the "wrong" pose before the keyframe schedule
+					// snaps it to KF1. Doing it here also avoids depending on a
+					// duration:0 snap that the tween library may not apply
+					// synchronously.
+					const sortedKfs = element.keyframes && element.keyframes.length > 0
+						? [...element.keyframes].sort((a, b) => a.time - b.time)
+						: null;
+					const k0 = sortedKfs ? sortedKfs[0] : null;
+					const seedX = k0?.position ? k0.position.x : element.position.x;
+					const seedY = k0?.position ? k0.position.y : element.position.y;
+					const seedW = k0?.size ? k0.size.width : element.size.width;
+					const seedH = k0?.size ? k0.size.height : element.size.height;
+					const seedRot = k0?.rotation !== undefined ? k0.rotation : element.rotation;
+					const seedSkewX = k0?.skewX !== undefined ? k0.skewX : (element.skewX ?? 0);
+					const seedSkewY = k0?.skewY !== undefined ? k0.skewY : (element.skewY ?? 0);
+					const seedTiltX = k0?.tiltX !== undefined ? k0.tiltX : (element.tiltX ?? 0);
+					const seedTiltY = k0?.tiltY !== undefined ? k0.tiltY : (element.tiltY ?? 0);
+					if (k0?.opacity !== undefined) startOpacity = k0.opacity;
+					const seedBR = k0?.borderRadius !== undefined ? k0.borderRadius : br;
+					const seedFontSize = k0?.fontSize !== undefined ? k0.fontSize : (textEl ? textEl.fontSize : 0);
+					const seedFill = k0?.fillColor !== undefined ? k0.fillColor : (shapeEl ? shapeEl.fillColor : '');
+					const seedStroke = k0?.strokeColor !== undefined ? k0.strokeColor : (shapeEl ? shapeEl.strokeColor : '');
+					const seedStrokeW = k0?.strokeWidth !== undefined ? k0.strokeWidth : (shapeEl ? shapeEl.strokeWidth : 0);
+					const seedBlur = k0?.blur !== undefined ? k0.blur : (element.blur ?? 0);
+					const seedBright = k0?.brightness !== undefined ? k0.brightness : (element.brightness ?? 100);
+					const seedContrast = k0?.contrast !== undefined ? k0.contrast : (element.contrast ?? 100);
+					const seedSat = k0?.saturate !== undefined ? k0.saturate : (element.saturate ?? 100);
+					const seedGray = k0?.grayscale !== undefined ? k0.grayscale : (element.grayscale ?? 0);
+
 					animatedElements.set(element.id, {
-						x: tween(element.position.x, { duration: 500 }),
-						y: tween(element.position.y, { duration: 500 }),
-						width: tween(element.size.width, { duration: 500 }),
-						height: tween(element.size.height, { duration: 500 }),
-						rotation: tween(element.rotation, { duration: 500 }),
-						skewX: tween(element.skewX ?? 0, { duration: 500 }),
-						skewY: tween(element.skewY ?? 0, { duration: 500 }),
-						tiltX: tween(element.tiltX ?? 0, { duration: 500 }),
-						tiltY: tween(element.tiltY ?? 0, { duration: 500 }),
-						perspective: tween(element.perspective ?? 1000, { duration: 500 }),
-						opacity: tween(startOpacity, { duration: 300 }),
-						borderRadius: tween(br, { duration: 500 }),
-						fontSize: textEl ? tween(textEl.fontSize, { duration: 500 }) : null,
-						fillColor: shapeEl ? tween(shapeEl.fillColor, { duration: 500 }) : null,
-						strokeColor: shapeEl ? tween(shapeEl.strokeColor, { duration: 500 }) : null,
-						strokeWidth: shapeEl ? tween(shapeEl.strokeWidth, { duration: 500 }) : null,
-						shapeMorph: shapeEl ? tween(1, { duration: 500 }) : null,
-						motionPathProgress: element.motionPathConfig ? tween(0, { duration: 500 }) : null,
-						blur: tween(element.blur ?? 0, { duration: 500 }),
-						brightness: tween(element.brightness ?? 100, { duration: 500 }),
-						contrast: tween(element.contrast ?? 100, { duration: 500 }),
-						saturate: tween(element.saturate ?? 100, { duration: 500 }),
-						grayscale: tween(element.grayscale ?? 0, { duration: 500 })
+						x: mkTween(seedX, { duration: 500 }),
+						y: mkTween(seedY, { duration: 500 }),
+						width: mkTween(seedW, { duration: 500 }),
+						height: mkTween(seedH, { duration: 500 }),
+						rotation: mkTween(seedRot, { duration: 500 }),
+						skewX: mkTween(seedSkewX, { duration: 500 }),
+						skewY: mkTween(seedSkewY, { duration: 500 }),
+						tiltX: mkTween(seedTiltX, { duration: 500 }),
+						tiltY: mkTween(seedTiltY, { duration: 500 }),
+						perspective: mkTween(element.perspective ?? 1000, { duration: 500 }),
+						opacity: mkTween(startOpacity, { duration: 300 }),
+						borderRadius: mkTween(seedBR, { duration: 500 }),
+						fontSize: textEl ? mkTween(seedFontSize, { duration: 500 }) : null,
+						fillColor: shapeEl ? mkTween(seedFill, { duration: 500 }) : null,
+						strokeColor: shapeEl ? mkTween(seedStroke, { duration: 500 }) : null,
+						strokeWidth: shapeEl ? mkTween(seedStrokeW, { duration: 500 }) : null,
+						shapeMorph: shapeEl ? mkTween(1, { duration: 500 }) : null,
+						motionPathProgress: element.motionPathConfig ? mkTween(0, { duration: 500 }) : null,
+						blur: mkTween(seedBlur, { duration: 500 }),
+						brightness: mkTween(seedBright, { duration: 500 }),
+						contrast: mkTween(seedContrast, { duration: 500 }),
+						saturate: mkTween(seedSat, { duration: 500 }),
+						grayscale: mkTween(seedGray, { duration: 500 })
 					});
 					const currentSlideEl = getElementInSlide(currentSlide, element.id);
 					elementContent.set(element.id, JSON.parse(JSON.stringify(currentSlideEl || element)));
@@ -555,16 +703,20 @@
 					if (shouldLoop) {
 						const laps = element.motionPathConfig.laps ?? 0;
 						(async () => {
-							let lap = 0;
-							while (!signal.aborted && (laps === 0 || lap < laps)) {
-								await animated.motionPathProgress!.to(0, { duration: 0 });
-								await animated.motionPathProgress!.to(1, { duration, easing });
-								lap++;
-								if (!signal.aborted && (laps === 0 || lap < laps)) await new Promise(r => setTimeout(r, 50));
+							try {
+								let lap = 0;
+								while (!signal.aborted && (laps === 0 || lap < laps)) {
+									await abortable(animated.motionPathProgress!.to(0, { duration: 0 }), signal);
+									await abortable(animated.motionPathProgress!.to(1, { duration, easing }), signal);
+									lap++;
+									if (!signal.aborted && (laps === 0 || lap < laps)) await abortableSleep(50, signal);
+								}
+							} catch (e) {
+								if (!isAbortError(e)) throw e;
 							}
 						})();
 					} else {
-						animated.motionPathProgress.to(1, { duration, easing });
+						animated.motionPathProgress.to(1, { duration, easing }).catch(() => {});
 					}
 				}
 			}
@@ -1384,7 +1536,7 @@
 							use:decorations={{ config: element.decorations, slideDuration: currentSlide?.duration, shape: element.type === 'shape' ? { type: (element as any).shapeType, borderRadius: (element as any).borderRadius } : undefined, key: `${currentSlideIndex}-${JSON.stringify(element.decorations ?? null)}-${element.type === 'shape' ? (element as any).shapeType + ':' + ((element as any).borderRadius ?? 0) : ''}` }}
 						>
 							{#if element.type === 'code'}
-								{@const codeEl = element as CodeElement}
+								{@const codeEl = liveProps(element) as CodeElement}
 								{@const morphState = codeMorphState.get(codeEl.id)}
 								<div class="animot-code-block" class:transparent-bg={codeEl.transparentBackground} style:font-size="{codeEl.fontSize}px" style:font-weight={codeEl.fontWeight || 400} style:padding="{codeEl.padding}px" style:border-radius="{animated.borderRadius.current}px" style:background={codeEl.bgColor ?? '#0d1117'}>
 									{#if codeEl.showHeader}
@@ -1441,7 +1593,7 @@
 									</div>
 								</div>
 							{:else if element.type === 'text'}
-								{@const textEl = element as TextElement}
+								{@const textEl = liveProps(element) as TextElement}
 								{@const animFontSize = animated.fontSize?.current ?? textEl.fontSize}
 								{@const typewriterState = textTypewriterState.get(element.id)}
 								{@const displayText = typewriterState?.isAnimating ? typewriterState.fullText.slice(0, typewriterState.displayedChars) : textEl.content}
@@ -1472,7 +1624,7 @@
 									{#if !isActionTextMode}{displayText}{#if typewriterState?.isAnimating}<span class="animot-typewriter-cursor">|</span>{/if}{/if}
 								</div>
 							{:else if element.type === 'arrow'}
-								{@const arrowEl = element as ArrowElement}
+								{@const arrowEl = liveProps(element) as ArrowElement}
 								{@const cp = arrowEl.controlPoints || []}
 								{@const pathD = cp.length === 0 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} L ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : cp.length === 1 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} Q ${cp[0].x} ${cp[0].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : cp.length === 2 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} C ${cp[0].x} ${cp[0].y} ${cp[1].x} ${cp[1].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : buildCatmullRomPath(arrowEl.startPoint, cp, arrowEl.endPoint)}
 								{@const lastCp = cp.length > 0 ? cp[cp.length - 1] : arrowEl.startPoint}
@@ -1495,11 +1647,11 @@
 									{/if}
 								</svg>
 							{:else if element.type === 'image'}
-								{@const imgEl = element as ImageElement}
+								{@const imgEl = liveProps(element) as ImageElement}
 								{@const clipPath = imgEl.clipMask?.enabled ? (imgEl.clipMask.shapeType === 'circle' ? 'circle(50% at 50% 50%)' : imgEl.clipMask.shapeType === 'ellipse' ? 'ellipse(50% 50% at 50% 50%)' : imgEl.clipMask.shapeType === 'triangle' ? 'polygon(50% 0%, 0% 100%, 100% 100%)' : imgEl.clipMask.shapeType === 'star' ? 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)' : imgEl.clipMask.shapeType === 'hexagon' ? 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' : (imgEl.clipMask.borderRadius ?? 0) > 0 ? `inset(0 round ${imgEl.clipMask.borderRadius}px)` : 'none') : 'none'}
 								<img class="animot-image-element" src={imgEl.src} alt="" style:object-fit={imgEl.objectFit} style:border-radius="{imgEl.clipMask?.enabled ? 0 : imgEl.borderRadius}px" style:clip-path={clipPath} style:background-color={imgEl.backgroundColor ?? 'transparent'} />
 								{:else if element.type === 'video'}
-									{@const videoEl = element as VideoElement}
+									{@const videoEl = liveProps(element) as VideoElement}
 									{@const videoEmbed = parseEmbedUrl(videoEl.src)}
 									{#if videoEmbed}
 										<div class="animot-video-element animot-embed-wrap" style:border-radius="{videoEl.borderRadius}px" style:opacity={videoEl.opacity}>
@@ -1509,7 +1661,7 @@
 										<video class="animot-video-element" src={videoEl.src} poster={videoEl.posterImage} autoplay={videoEl.autoplay} loop={videoEl.loop} muted={videoEl.muted} controls={!!videoEl.showControls} playsinline preload="auto" style:object-fit={videoEl.objectFit} style:border-radius="{videoEl.borderRadius}px" style:opacity={videoEl.opacity}></video>
 									{/if}
 							{:else if element.type === 'shape'}
-								{@const shapeEl = element as ShapeElement}
+								{@const shapeEl = liveProps(element) as ShapeElement}
 								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
 								{@const animStroke = animated.strokeColor?.current ?? shapeEl.strokeColor}
 								{@const animStrokeWidth = animated.strokeWidth?.current ?? shapeEl.strokeWidth}
@@ -1517,15 +1669,15 @@
 								{@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 {animated.width.current} {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'}>
+								<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 = animated.width.current}
-										{@const h = animated.height.current}
+										{@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, animated.width.current, animated.height.current, animated.borderRadius.current, animFill, animStroke, animStrokeWidth, shapeEl.strokeStyle, shapeEl.strokeDashGap)}
+										{@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>
 							{:else if element.type === 'counter'}
@@ -1574,7 +1726,7 @@
 							{:else if element.type === 'motionPath'}
 								{@const mpEl = element as MotionPathElement}
 								{#if mpEl.showInPresentation}
-									<svg width="100%" height="100%" viewBox="0 0 {animated.width.current} {animated.height.current}" style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible;">
+									<svg width="100%" height="100%" viewBox="0 0 {Math.max(0, animated.width.current)} {Math.max(0, animated.height.current)}" style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible;">
 										<path d={buildPresenterPathD(mpEl.points, mpEl.closed)} stroke={mpEl.pathColor} stroke-width={mpEl.pathWidth} fill="none" stroke-dasharray="8 4" />
 									</svg>
 								{/if}
@@ -1643,6 +1795,8 @@
 	}
 
 	function renderShape(type: string, w: number, h: number, br: number, fill: string, stroke: string, sw: number, strokeStyle?: string, strokeDashGap?: number): string {
+		const nn = (v: number) => (v > 0 ? v : 0);
+		w = nn(w); h = nn(h); br = nn(br); sw = nn(sw);
 		let dashAttr = '';
 		if (strokeStyle && strokeStyle !== 'solid') {
 			const s = sw || 1;
@@ -1656,17 +1810,17 @@
 			return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 		};
 		switch (type) {
-			case 'rectangle': return `<rect x="${sw/2}" y="${sw/2}" width="${w-sw}" height="${h-sw}" rx="${br}" ry="${br}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
-			case 'circle': return `<circle cx="${w/2}" cy="${h/2}" r="${Math.min(w,h)/2-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
-			case 'ellipse': return `<ellipse cx="${w/2}" cy="${h/2}" rx="${w/2-sw/2}" ry="${h/2-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
+			case 'rectangle': return `<rect x="${sw/2}" y="${sw/2}" width="${nn(w-sw)}" height="${nn(h-sw)}" rx="${nn(Math.min(br, (w-sw)/2, (h-sw)/2))}" ry="${nn(Math.min(br, (w-sw)/2, (h-sw)/2))}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
+			case 'circle': return `<circle cx="${w/2}" cy="${h/2}" r="${nn(Math.min(w,h)/2-sw/2)}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
+			case 'ellipse': return `<ellipse cx="${w/2}" cy="${h/2}" rx="${nn(w/2-sw/2)}" ry="${nn(h/2-sw/2)}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
 			case 'triangle': return polyOrPath(`${w/2},${sw/2} ${sw/2},${h-sw/2} ${w-sw/2},${h-sw/2}`);
 			case 'star': {
-				const cx = w/2, cy = h/2, outerR = Math.min(w,h)/2-sw/2, innerR = outerR*0.4;
+				const cx = w/2, cy = h/2, outerR = nn(Math.min(w,h)/2-sw/2), innerR = outerR*0.4;
 				const pts = Array.from({length:10},(_,i)=>{const a=(i*Math.PI/5)-Math.PI/2;const r=i%2===0?outerR:innerR;return`${cx+r*Math.cos(a)},${cy+r*Math.sin(a)}`;}).join(' ');
 				return polyOrPath(pts);
 			}
 			case 'hexagon': {
-				const cx = w/2, cy = h/2, r = Math.min(w,h)/2-sw/2;
+				const cx = w/2, cy = h/2, r = nn(Math.min(w,h)/2-sw/2);
 				const pts = Array.from({length:6},(_,i)=>{const a=(i*Math.PI/3)-Math.PI/2;return`${cx+r*Math.cos(a)},${cy+r*Math.sin(a)}`;}).join(' ');
 				return polyOrPath(pts);
 			}