animot-presenter 0.2.4 → 0.2.6

package/README.md

@@ -472,7 +472,7 @@ animot-presenter .animot-controls { display: none; }
 
 ## Features
 
-- **Morphing animations** — Elements with the same ID across slides smoothly morph position, size, rotation, color, opacity, and border radius
+- **Morphing animations** — Elements with the same ID across slides smoothly morph position, size, rotation, color, opacity, border radius, and CSS filters (blur, brightness, contrast, saturate, grayscale)
 - **Code highlighting** — Syntax highlighting via Shiki with typewriter, highlight-changes, and instant animation modes
 - **Shape morphing** — Rectangles, circles, triangles, stars, hexagons with smooth transitions
 - **Charts** — Animated bar, line, area, pie, and donut charts
@@ -483,7 +483,8 @@ animot-presenter .animot-controls { display: none; }
 - **Transitions** — Fade, slide, zoom, flip, and morphing (none) transition types
 - **Responsive** — Automatically scales to fit any container size
 - **Keyboard navigation** — Arrow keys, spacebar, Home/End
-- **Property sequencing** — Fine-grained control over which properties animate first
+- **CSS filters** — Blur, brightness, contrast, saturate, and grayscale on any element, animated across slides
+- **Property sequencing** — Fine-grained control over which properties animate first (including filters via the `blur` property sequence)
 
 ## JSON Schema
 
@@ -517,7 +518,12 @@ Animot JSON files follow this structure:
             "color": "#ffffff",
             "rotation": 0,
             "visible": true,
-            "zIndex": 1
+            "zIndex": 1,
+            "blur": 0,
+            "brightness": 100,
+            "contrast": 100,
+            "saturate": 100,
+            "grayscale": 0
           }
         ]
       },
@@ -563,6 +569,32 @@ You can replace the base64 data URL with a remote or local URL:
 
 This lets you keep your JSON files lightweight by hosting images separately instead of embedding them as base64. The same applies to text elements with `backgroundImage` and background `image` fields.
 
+### CSS Filters
+
+All element types support CSS filter properties that animate smoothly between slides:
+
+```json
+{
+  "id": "hero-image",
+  "type": "image",
+  "blur": 5,
+  "brightness": 120,
+  "contrast": 110,
+  "saturate": 80,
+  "grayscale": 0
+}
+```
+
+| Property     | Range   | Default | Description                     |
+|--------------|---------|---------|----------------------------------|
+| `blur`       | 0–20    | 0       | Gaussian blur in pixels          |
+| `brightness` | 0–200   | 100     | Brightness percentage (100 = normal) |
+| `contrast`   | 0–200   | 100     | Contrast percentage (100 = normal)   |
+| `saturate`   | 0–200   | 100     | Saturation percentage (100 = normal) |
+| `grayscale`  | 0–100   | 0       | Grayscale percentage (0 = none)      |
+
+Set different filter values on the same element across slides to create smooth animated transitions (e.g., blur 10 on slide 1 to blur 0 on slide 2 for a reveal effect). Use the `blur` property sequence in `animationConfig.propertySequences` to control filter animation timing independently.
+
 > **Note:** Remote URLs must allow cross-origin requests (CORS) if served from a different domain.
 
 ## Bundle Size

package/dist/AnimotPresenter.svelte

@@ -30,6 +30,11 @@
 		strokeWidth: TweenValue | null;
 		shapeMorph: TweenValue | null;
 		motionPathProgress: TweenValue | null;
+		blur: TweenValue;
+		brightness: TweenValue;
+		contrast: TweenValue;
+		saturate: TweenValue;
+		grayscale: TweenValue;
 	}
 
 	interface ShapeMorphState { fromType: string; toType: string; }
@@ -106,6 +111,22 @@
 		return { x: points[0].x, y: points[0].y, angle: 0 };
 	}
 
+	function computeMotionPathPosition(
+		mpPoint: { x: number; y: number; angle: number },
+		startPoint: { x: number; y: number; angle: number },
+		animX: number, animY: number, animW: number, animH: number
+	): { x: number; y: number } {
+		const offsetX = (animX + animW / 2) - startPoint.x;
+		const offsetY = (animY + animH / 2) - startPoint.y;
+		const angleDelta = (mpPoint.angle - startPoint.angle) * Math.PI / 180;
+		const cos = Math.cos(angleDelta);
+		const sin = Math.sin(angleDelta);
+		return {
+			x: mpPoint.x + offsetX * cos - offsetY * sin - animW / 2,
+			y: mpPoint.y + offsetX * sin + offsetY * cos - animH / 2
+		};
+	}
+
 	let {
 		src, data, autoplay = false, loop = false, controls = true, arrows = false,
 		progress: showProgress = true, keyboard = true, duration: durationOverride,
@@ -205,8 +226,26 @@
 		textTypewriterState = new Map(textTypewriterState);
 	}
 
-	// Arrow draw animation action
-	function animateStyledArrowDraw(node: SVGPathElement, params: { enabled: boolean; duration: number; dashPattern: string; startX: number; endX: number; slideIndex: number }) {
+	// Build SVG path for 3+ control points using Catmull-Rom spline
+	function buildCatmullRomPath(start: {x:number,y:number}, cps: {x:number,y:number}[], end: {x:number,y:number}): string {
+		const pts = [start, ...cps, end];
+		let d = `M ${pts[0].x} ${pts[0].y}`;
+		for (let i = 0; i < pts.length - 1; i++) {
+			const p0 = pts[i === 0 ? 0 : i - 1];
+			const p1 = pts[i];
+			const p2 = pts[i + 1];
+			const p3 = pts[i + 2 < pts.length ? i + 2 : pts.length - 1];
+			const c1x = p1.x + (p2.x - p0.x) / 6;
+			const c1y = p1.y + (p2.y - p0.y) / 6;
+			const c2x = p2.x - (p3.x - p1.x) / 6;
+			const c2y = p2.y - (p3.y - p1.y) / 6;
+			d += ` C ${c1x} ${c1y} ${c2x} ${c2y} ${p2.x} ${p2.y}`;
+		}
+		return d;
+	}
+
+	// Arrow draw/undraw/draw-undraw animation action
+	function animateStyledArrowDraw(node: SVGPathElement, params: { enabled: boolean; mode: string; duration: number; dashPattern: string; startX: number; endX: number; slideIndex: number }) {
 		let lastSlideIndex = params.slideIndex;
 		let animationId: number | null = null;
 		function runAnimation() {
@@ -215,24 +254,63 @@
 			const svg = node.closest('svg') as SVGSVGElement | null;
 			if (!svg) return;
 			const goesLeftToRight = params.endX >= params.startX;
-			svg.style.clipPath = goesLeftToRight ? 'inset(0 100% 0 0)' : 'inset(0 0 0 100%)';
-			const startTime = performance.now();
+			const mode = params.mode;
 			const dur = params.duration;
+			const startTime = performance.now();
+			if (mode === 'draw' || mode === 'draw-undraw') {
+				svg.style.clipPath = goesLeftToRight ? 'inset(0 100% 0 0)' : 'inset(0 0 0 100%)';
+			} else if (mode === 'undraw') {
+				svg.style.clipPath = 'none';
+			}
 			function animate(currentTime: number) {
 				const elapsed = currentTime - startTime;
-				const progress = Math.min(elapsed / dur, 1);
-				const eased = 1 - Math.pow(1 - progress, 3);
-				const inset = 100 * (1 - eased);
-				svg!.style.clipPath = goesLeftToRight ? `inset(0 ${inset}% 0 0)` : `inset(0 0 0 ${inset}%)`;
-				if (progress < 1) animationId = requestAnimationFrame(animate);
-				else { svg!.style.clipPath = 'none'; animationId = null; }
+				if (mode === 'draw') {
+					const progress = Math.min(elapsed / dur, 1);
+					const eased = 1 - Math.pow(1 - progress, 3);
+					const inset = 100 * (1 - eased);
+					svg!.style.clipPath = goesLeftToRight ? `inset(0 ${inset}% 0 0)` : `inset(0 0 0 ${inset}%)`;
+					if (progress < 1) { animationId = requestAnimationFrame(animate); }
+					else { svg!.style.clipPath = 'none'; animationId = null; }
+				} else if (mode === 'undraw') {
+					const progress = Math.min(elapsed / dur, 1);
+					const eased = 1 - Math.pow(1 - progress, 3);
+					const inset = 100 * eased;
+					svg!.style.clipPath = goesLeftToRight ? `inset(0 0 0 ${inset}%)` : `inset(0 ${inset}% 0 0)`;
+					if (progress < 1) { animationId = requestAnimationFrame(animate); }
+					else { svg!.style.clipPath = 'inset(0 0 0 100%)'; animationId = null; }
+				} else if (mode === 'draw-undraw') {
+					const halfDur = dur / 2;
+					if (elapsed < halfDur) {
+						const progress = Math.min(elapsed / halfDur, 1);
+						const eased = 1 - Math.pow(1 - progress, 3);
+						const inset = 100 * (1 - eased);
+						svg!.style.clipPath = goesLeftToRight ? `inset(0 ${inset}% 0 0)` : `inset(0 0 0 ${inset}%)`;
+						animationId = requestAnimationFrame(animate);
+					} else {
+						const progress = Math.min((elapsed - halfDur) / halfDur, 1);
+						const eased = 1 - Math.pow(1 - progress, 3);
+						const inset = 100 * eased;
+						svg!.style.clipPath = goesLeftToRight ? `inset(0 0 0 ${inset}%)` : `inset(0 ${inset}% 0 0)`;
+						if (progress < 1) { animationId = requestAnimationFrame(animate); }
+						else { svg!.style.clipPath = 'inset(0 0 0 100%)'; animationId = null; }
+					}
+				}
 			}
 			animationId = requestAnimationFrame(animate);
 		}
 		runAnimation();
 		return {
 			update(newParams: typeof params) {
-				if (newParams.slideIndex !== lastSlideIndex) { lastSlideIndex = newParams.slideIndex; params = newParams; runAnimation(); }
+				const slideChanged = newParams.slideIndex !== lastSlideIndex;
+				params = newParams;
+				if (!params.enabled) {
+					if (animationId) { cancelAnimationFrame(animationId); animationId = null; }
+					const svg = node.closest('svg') as SVGSVGElement | null;
+					if (svg) svg.style.clipPath = '';
+					lastSlideIndex = newParams.slideIndex;
+					return;
+				}
+				if (slideChanged) { lastSlideIndex = newParams.slideIndex; runAnimation(); }
 			},
 			destroy() { if (animationId) cancelAnimationFrame(animationId); }
 		};
@@ -254,7 +332,7 @@
 			for (const element of slide.canvas.elements) {
 				if (!animatedElements.has(element.id)) {
 					const inCurrent = getElementInSlide(currentSlide, element.id);
-					const startOpacity = inCurrent ? 1 : 0;
+					const 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;
@@ -278,7 +356,12 @@
 						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
+						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 })
 					});
 					const currentSlideEl = getElementInSlide(currentSlide, element.id);
 					elementContent.set(element.id, JSON.parse(JSON.stringify(currentSlideEl || element)));
@@ -315,11 +398,14 @@
 					const shouldLoop = element.motionPathConfig.loop;
 
 					if (shouldLoop) {
+						const laps = element.motionPathConfig.laps ?? 0;
 						(async () => {
-							while (!signal.aborted) {
+							let lap = 0;
+							while (!signal.aborted && (laps === 0 || lap < laps)) {
 								await animated.motionPathProgress!.to(0, { duration: 0 });
 								await animated.motionPathProgress!.to(1, { duration, easing });
-								if (!signal.aborted) await new Promise(r => setTimeout(r, 50));
+								lap++;
+								if (!signal.aborted && (laps === 0 || lap < laps)) await new Promise(r => setTimeout(r, 50));
 							}
 						})();
 					} else {
@@ -368,8 +454,13 @@
 						animated.skewX.to(targetEl.skewX ?? 0, { duration: 0 }); animated.skewY.to(targetEl.skewY ?? 0, { duration: 0 });
 						animated.tiltX.to(targetEl.tiltX ?? 0, { duration: 0 }); animated.tiltY.to(targetEl.tiltY ?? 0, { duration: 0 });
 						animated.perspective.to(targetEl.perspective ?? 1000, { duration: 0 });
-						animated.opacity.to(1, { duration: 0 });
+						animated.opacity.to((targetEl as any).opacity ?? 1, { duration: 0 });
 						animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: 0 });
+						animated.blur.to(targetEl.blur ?? 0, { duration: 0 });
+						animated.brightness.to(targetEl.brightness ?? 100, { duration: 0 });
+						animated.contrast.to(targetEl.contrast ?? 100, { duration: 0 });
+						animated.saturate.to(targetEl.saturate ?? 100, { duration: 0 });
+						animated.grayscale.to(targetEl.grayscale ?? 0, { duration: 0 });
 						if (targetEl.type === 'text') animated.fontSize?.to((targetEl as TextElement).fontSize, { duration: 0 });
 						if (targetEl.type === 'shape') {
 							const s = targetEl as ShapeElement;
@@ -433,7 +524,12 @@
 				await animated.tiltY.to(currentEl.tiltY ?? 0, { duration: 0 });
 				await animated.perspective.to(currentEl.perspective ?? 1000, { duration: 0 });
 				await animated.borderRadius.to((currentEl as any).borderRadius ?? 0, { duration: 0 });
-				await animated.opacity.to(1, { duration: 0 });
+				await animated.blur.to(currentEl.blur ?? 0, { duration: 0 });
+				await animated.brightness.to(currentEl.brightness ?? 100, { duration: 0 });
+				await animated.contrast.to(currentEl.contrast ?? 100, { duration: 0 });
+				await animated.saturate.to(currentEl.saturate ?? 100, { duration: 0 });
+				await animated.grayscale.to(currentEl.grayscale ?? 0, { duration: 0 });
+				await animated.opacity.to((currentEl as any).opacity ?? 1, { duration: 0 });
 				if (currentEl.type === 'text' && animated.fontSize) await animated.fontSize.to((currentEl as TextElement).fontSize, { duration: 0 });
 				if (currentEl.type === 'shape') {
 					const s = currentEl as ShapeElement;
@@ -493,7 +589,18 @@
 							if (!sequencedProps.has('skew')) { anims.push(animated.skewX.to(targetEl.skewX ?? 0, { duration: elementDuration, easing })); anims.push(animated.skewY.to(targetEl.skewY ?? 0, { duration: elementDuration, easing })); }
 							if (!sequencedProps.has('size')) { anims.push(animated.width.to(targetEl.size.width, { duration: elementDuration, easing })); anims.push(animated.height.to(targetEl.size.height, { duration: elementDuration, easing })); }
 							if (!sequencedProps.has('borderRadius')) anims.push(animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: elementDuration, easing }));
+							if (!sequencedProps.has('blur')) {
+								animated.blur.to(targetEl.blur ?? 0, { duration: elementDuration, easing });
+								animated.brightness.to(targetEl.brightness ?? 100, { duration: elementDuration, easing });
+								animated.contrast.to(targetEl.contrast ?? 100, { duration: elementDuration, easing });
+								animated.saturate.to(targetEl.saturate ?? 100, { duration: elementDuration, easing });
+								animated.grayscale.to(targetEl.grayscale ?? 0, { duration: elementDuration, easing });
+							}
 							if (!sequencedProps.has('perspective')) anims.push(animated.perspective.to(targetEl.perspective ?? 1000, { duration: elementDuration, easing }));
+							if (!sequencedProps.has('opacity')) {
+								const targetOpacity = (targetEl as any).opacity ?? 1;
+								if (animated.opacity.current !== targetOpacity) anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
+							}
 							const sortedSeqs = [...propertySequences].sort((a, b) => a.order - b.order);
 							let cumulativeDelay = 0;
 							for (const seq of sortedSeqs) {
@@ -506,6 +613,13 @@
 									else if (seq.property === 'skew') { animated.skewX.to(targetEl.skewX ?? 0, { duration: seqDuration, easing }); animated.skewY.to(targetEl.skewY ?? 0, { duration: seqDuration, easing }); }
 									else if (seq.property === 'size') { animated.width.to(targetEl.size.width, { duration: seqDuration, easing }); animated.height.to(targetEl.size.height, { duration: seqDuration, easing }); }
 									else if (seq.property === 'borderRadius') animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: seqDuration, easing });
+									else if (seq.property === 'blur') {
+										animated.blur.to(targetEl.blur ?? 0, { duration: seqDuration, easing });
+										animated.brightness.to(targetEl.brightness ?? 100, { duration: seqDuration, easing });
+										animated.contrast.to(targetEl.contrast ?? 100, { duration: seqDuration, easing });
+										animated.saturate.to(targetEl.saturate ?? 100, { duration: seqDuration, easing });
+										animated.grayscale.to(targetEl.grayscale ?? 0, { duration: seqDuration, easing });
+									}
 									else if (seq.property === 'color' && targetEl.type === 'shape') {
 										const s = targetEl as ShapeElement;
 										animated.fillColor?.to(s.fillColor, { duration: seqDuration, easing });
@@ -513,6 +627,7 @@
 										animated.strokeWidth?.to(s.strokeWidth, { duration: seqDuration, easing });
 									}
 									else if (seq.property === 'perspective') animated.perspective.to(targetEl.perspective ?? 1000, { duration: seqDuration, easing });
+									else if (seq.property === 'opacity') animated.opacity.to((targetEl as any).opacity ?? 1, { duration: seqDuration, easing });
 								}, seqDelay);
 								cumulativeDelay = seqDelay + seqDuration;
 							}
@@ -529,6 +644,17 @@
 							anims.push(animated.tiltY.to(targetEl.tiltY ?? 0, { duration: elementDuration, easing }));
 							anims.push(animated.perspective.to(targetEl.perspective ?? 1000, { duration: elementDuration, easing }));
 							anims.push(animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: elementDuration, easing }));
+							anims.push(animated.blur.to(targetEl.blur ?? 0, { duration: elementDuration, easing }));
+							anims.push(animated.brightness.to(targetEl.brightness ?? 100, { duration: elementDuration, easing }));
+							anims.push(animated.contrast.to(targetEl.contrast ?? 100, { duration: elementDuration, easing }));
+							anims.push(animated.saturate.to(targetEl.saturate ?? 100, { duration: elementDuration, easing }));
+							anims.push(animated.grayscale.to(targetEl.grayscale ?? 0, { duration: elementDuration, easing }));
+							// Opacity interpolation for morphing elements
+							const currOpacity = animated.opacity.current;
+							const targetOpacity = (targetEl as any).opacity ?? 1;
+							if (currOpacity !== targetOpacity) {
+								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
+							}
 						}
 						// Motion path progress — await reset, then animate forward
 						if (animated.motionPathProgress && targetEl.motionPathConfig) {
@@ -575,6 +701,11 @@
 							anims.push(animated.tiltY.to(targetEl.tiltY ?? 0, { duration: 0 }));
 							anims.push(animated.perspective.to(targetEl.perspective ?? 1000, { duration: 0 }));
 							anims.push(animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: 0 }));
+							anims.push(animated.blur.to(targetEl.blur ?? 0, { duration: 0 }));
+							anims.push(animated.brightness.to(targetEl.brightness ?? 100, { duration: 0 }));
+							anims.push(animated.contrast.to(targetEl.contrast ?? 100, { duration: 0 }));
+							anims.push(animated.saturate.to(targetEl.saturate ?? 100, { duration: 0 }));
+							anims.push(animated.grayscale.to(targetEl.grayscale ?? 0, { duration: 0 }));
 							if (targetEl.type === 'text' && animated.fontSize) {
 								anims.push(animated.fontSize.to((targetEl as TextElement).fontSize, { duration: 0 }));
 							}
@@ -585,10 +716,11 @@
 								if (animated.strokeWidth) anims.push(animated.strokeWidth.to(s.strokeWidth, { duration: 0 }));
 							}
 							const entrance = targetEl.animationConfig?.entrance ?? 'fade';
+							const targetOpacity = (targetEl as any).opacity ?? 1;
 							if (entrance === 'fade') {
-								anims.push(animated.opacity.to(1, { duration: elementDuration / 2, easing }));
+								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration / 2, easing }));
 							} else {
-								anims.push(animated.opacity.to(1, { duration: 0 }));
+								anims.push(animated.opacity.to(targetOpacity, { duration: 0 }));
 							}
 						}
 						return anims;
@@ -659,6 +791,13 @@
 		elementContent = newElementContent;
 		currentSlideIndex = targetIndex;
 		isTransitioning = false;
+		// Ensure elements not on the new slide are fully hidden
+		const newSlide = slides[targetIndex];
+		for (const elementId of allElementIds) {
+			const onSlide = getElementInSlide(newSlide, elementId);
+			const animated = animatedElements.get(elementId);
+			if (!onSlide && animated) { animated.opacity.to(0, { duration: 0 }); }
+		}
 		animateMotionPaths(slides[targetIndex]);
 		onslidechange?.(targetIndex, slides.length);
 		if (targetIndex === slides.length - 1 && !loop) oncomplete?.();
@@ -877,8 +1016,14 @@
 					{@const mpElement = mpConfig ? currentSlide?.canvas.elements.find(el => el.id === mpConfig.motionPathId) as MotionPathElement | undefined : undefined}
 					{@const mpProgress = animated?.motionPathProgress?.current ?? 0}
 					{@const mpPoint = mpElement && mpConfig ? getPresenterPointOnPath(mpElement.points, mpElement.closed, (mpConfig.startPercent + (mpConfig.endPercent - mpConfig.startPercent) * mpProgress) / 100) : null}
-					{@const elemX = mpPoint ? mpPoint.x - (animated?.width.current ?? 0) / 2 : animated?.x.current ?? 0}
-					{@const elemY = mpPoint ? mpPoint.y - (animated?.height.current ?? 0) / 2 : animated?.y.current ?? 0}
+					{@const mpStartPoint = mpElement && mpConfig ? getPresenterPointOnPath(mpElement.points, mpElement.closed, mpConfig.startPercent / 100) : null}
+					{@const mpPos = mpPoint && mpStartPoint && animated
+						? computeMotionPathPosition(mpPoint, mpStartPoint,
+							animated.x.current, animated.y.current,
+							animated.width.current, animated.height.current)
+						: null}
+					{@const elemX = mpPos ? mpPos.x : (animated?.x.current ?? 0)}
+					{@const elemY = mpPos ? mpPos.y : (animated?.y.current ?? 0)}
 					{@const mpRotation = mpPoint && mpConfig?.autoRotate
 						? mpPoint.angle + (mpConfig.orientationOffset ?? 0)
 						: null}
@@ -899,22 +1044,52 @@
 							style:--float-speed="{hasFloat ? computeFloatSpeed(floatCfg, floatGroupId || elementId) : 3}s"
 							style:--float-delay="{hashFraction(floatGroupId || elementId, 3) * 2}s"
 							style:animation-name={hasFloat ? getFloatAnimName(floatCfg!.direction, floatGroupId || elementId) : 'none'}
+							style:filter={(() => { const parts: string[] = []; const b = animated.blur.current; const br2 = animated.brightness.current; const c = animated.contrast.current; const s = animated.saturate.current; const g = animated.grayscale.current; if (b) parts.push(`blur(${b}px)`); if (br2 !== 100) parts.push(`brightness(${br2}%)`); if (c !== 100) parts.push(`contrast(${c}%)`); if (s !== 100) parts.push(`saturate(${s}%)`); if (g) parts.push(`grayscale(${g}%)`); return parts.length ? parts.join(' ') : 'none'; })()}
 						>
 							{#if element.type === 'code'}
 								{@const codeEl = 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">
+								<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}
-										<div class="animot-code-header" class:macos={codeEl.headerStyle === 'macos'}>
+										<div class="animot-code-header" class:macos={codeEl.headerStyle === 'macos'} class:windows={codeEl.headerStyle === 'windows'} style:border-radius="{codeEl.headerRadius ?? animated.borderRadius.current}px {codeEl.headerRadius ?? animated.borderRadius.current}px 0 0">
 											{#if codeEl.headerStyle === 'macos'}
 												<div class="animot-window-controls">
 													<span class="animot-control close"></span>
 													<span class="animot-control minimize"></span>
 													<span class="animot-control maximize"></span>
 												</div>
+											{:else if codeEl.headerStyle === 'windows'}
+												<div class="animot-window-controls">
+													<span class="animot-control win-minimize">
+														<svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5h6" stroke="currentColor" stroke-width="1.2"/></svg>
+													</span>
+													<span class="animot-control win-maximize">
+														<svg width="10" height="10" viewBox="0 0 10 10"><rect x="1.5" y="1.5" width="7" height="7" rx="0.5" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
+													</span>
+													<span class="animot-control win-close">
+														<svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" stroke-width="1.2"/></svg>
+													</span>
+												</div>
 											{/if}
-											<span class="animot-filename">{codeEl.filename}</span>
+											<div class="animot-filename-tab" style:border-radius="{codeEl.tabRadius ?? 6}px">
+												<svg class="animot-file-icon" width="14" height="14" viewBox="0 0 16 16" fill="none">
+													<path d="M4 1h5.5L13 4.5V14a1 1 0 01-1 1H4a1 1 0 01-1-1V2a1 1 0 011-1z" stroke="currentColor" stroke-width="1.2" opacity="0.5"/>
+													<path d="M9.5 1v3.5H13" stroke="currentColor" stroke-width="1.2" opacity="0.5"/>
+												</svg>
+												<span class="animot-filename">{codeEl.filename}</span>
+											</div>
+											<button class="animot-copy-code-btn" onclick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(codeEl.code); const btn = e.currentTarget as HTMLElement; btn.classList.add('copied'); setTimeout(() => btn.classList.remove('copied'), 1500); }}>
+												<span class="animot-copy-label">Copy</span><span class="animot-copied-label">Copied!</span>
+												<svg class="animot-copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+												<svg class="animot-check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+											</button>
 										</div>
+									{:else}
+										<button class="animot-copy-code-btn animot-floating" onclick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(codeEl.code); const btn = e.currentTarget as HTMLElement; btn.classList.add('copied'); setTimeout(() => btn.classList.remove('copied'), 1500); }}>
+											<span class="animot-copy-label">Copy</span><span class="animot-copied-label">Copied!</span>
+											<svg class="animot-copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+											<svg class="animot-check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+										</button>
 									{/if}
 									<div class="animot-code-content">
 										<div class="animot-highlighted-code">
@@ -951,7 +1126,6 @@
 									style:border-radius="{textEl.borderRadius}px"
 									style:text-align={textEl.textAlign}
 									style:justify-content={textEl.textAlign === 'center' ? 'center' : textEl.textAlign === 'right' ? 'flex-end' : 'flex-start'}
-									style:opacity={textEl.opacity ?? 1}
 									style:-webkit-text-stroke={textEl.textStroke?.enabled ? `${textEl.textStroke.width}px ${textEl.textStroke.color}` : '0'}
 									style:text-shadow={textEl.textShadow?.enabled ? `${textEl.textShadow.offsetX}px ${textEl.textShadow.offsetY}px ${textEl.textShadow.blur}px ${textEl.textShadow.color}` : 'none'}
 								>
@@ -960,25 +1134,27 @@
 							{:else if element.type === 'arrow'}
 								{@const arrowEl = 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}` : `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}`}
-								{@const endAngle = cp.length === 0 ? Math.atan2(arrowEl.endPoint.y - arrowEl.startPoint.y, arrowEl.endPoint.x - arrowEl.startPoint.x) : cp.length === 1 ? Math.atan2(arrowEl.endPoint.y - cp[0].y, arrowEl.endPoint.x - cp[0].x) : Math.atan2(arrowEl.endPoint.y - cp[1].y, arrowEl.endPoint.x - cp[1].x)}
+								{@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}
+								{@const endAngle = Math.atan2(arrowEl.endPoint.y - lastCp.y, arrowEl.endPoint.x - lastCp.x)}
 								{@const headAngle = Math.PI / 6}
 								{@const headSize = arrowEl.headSize}
 								{@const arrowHeadPath = `M ${arrowEl.endPoint.x - headSize * Math.cos(endAngle - headAngle)} ${arrowEl.endPoint.y - headSize * Math.sin(endAngle - headAngle)} L ${arrowEl.endPoint.x} ${arrowEl.endPoint.y} L ${arrowEl.endPoint.x - headSize * Math.cos(endAngle + headAngle)} ${arrowEl.endPoint.y - headSize * Math.sin(endAngle + headAngle)}`}
 								{@const arrowAnimMode = arrowEl.animation?.mode ?? 'none'}
 								{@const arrowAnimDuration = arrowEl.animation?.duration ?? 500}
 								{@const isStyledArrow = arrowEl.style !== 'solid'}
+								{@const isDrawType = arrowAnimMode === 'draw' || arrowAnimMode === 'undraw' || arrowAnimMode === 'draw-undraw'}
 								{@const baseDashArray = arrowEl.style === 'dashed' ? '10,5' : arrowEl.style === 'dotted' ? '2,5' : 'none'}
-								<svg class="animot-arrow-element" class:arrow-animate-draw={arrowAnimMode === 'draw' && !isStyledArrow} class:arrow-animate-grow={arrowAnimMode === 'grow'} viewBox="0 0 {arrowEl.size.width} {arrowEl.size.height}" preserveAspectRatio="none" style="--arrow-anim-duration: {arrowAnimDuration}ms;">
-									<path class="arrow-path" d={pathD} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-dasharray={baseDashArray} stroke-linecap="round" stroke-linejoin="round" use:animateStyledArrowDraw={{ enabled: arrowAnimMode === 'draw' && isStyledArrow, duration: arrowAnimDuration, dashPattern: baseDashArray, startX: arrowEl.startPoint.x, endX: arrowEl.endPoint.x, slideIndex: currentSlideIndex }} />
+								<svg class="animot-arrow-element" class:arrow-animate-draw={arrowAnimMode === 'draw' && !isStyledArrow} class:arrow-animate-undraw={arrowAnimMode === 'undraw' && !isStyledArrow} class:arrow-animate-draw-undraw={arrowAnimMode === 'draw-undraw' && !isStyledArrow} class:arrow-animate-grow={arrowAnimMode === 'grow'} viewBox="0 0 {arrowEl.size.width} {arrowEl.size.height}" preserveAspectRatio="none" style="--arrow-anim-duration: {arrowAnimDuration}ms;">
+									<path class="arrow-path" d={pathD} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-dasharray={baseDashArray} stroke-linecap="round" stroke-linejoin="round" use:animateStyledArrowDraw={{ enabled: isDrawType && isStyledArrow, mode: arrowAnimMode, duration: arrowAnimDuration, dashPattern: baseDashArray, startX: arrowEl.startPoint.x, endX: arrowEl.endPoint.x, slideIndex: currentSlideIndex }} />
 									{#if arrowEl.showHead !== false}
-										<path class="arrow-head" class:arrow-head-styled-draw={arrowAnimMode === 'draw' && isStyledArrow} d={arrowHeadPath} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-linecap="round" stroke-linejoin="round" style={arrowAnimMode === 'draw' && isStyledArrow ? `--arrow-anim-duration: ${arrowAnimDuration}ms;` : ''} />
+										<path class="arrow-head" class:arrow-head-styled-draw={isDrawType && isStyledArrow} class:arrow-head-undraw={arrowAnimMode === 'undraw'} class:arrow-head-draw-undraw={arrowAnimMode === 'draw-undraw'} d={arrowHeadPath} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-linecap="round" stroke-linejoin="round" style={isDrawType && isStyledArrow ? `--arrow-anim-duration: ${arrowAnimDuration}ms;` : ''} />
 									{/if}
 								</svg>
 							{:else if element.type === 'image'}
 								{@const imgEl = 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:opacity={imgEl.opacity} style:filter={imgEl.blur ? `blur(${imgEl.blur}px)` : 'none'} style:clip-path={clipPath} style:background-color={imgEl.backgroundColor ?? 'transparent'} />
+								<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 === 'shape'}
 								{@const shapeEl = element as ShapeElement}
 								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
@@ -988,15 +1164,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}" style:opacity={shapeEl.opacity} 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 {animated.width.current} {animated.height.current}" 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 sw = animStrokeWidth}
-										<g style:opacity={1 - morphProgress}>{@html renderShape(mState!.fromType, w, h, animated.borderRadius.current, animFill, animStroke, sw)}</g>
-										<g style:opacity={morphProgress}>{@html renderShape(mState!.toType, w, h, animated.borderRadius.current, animFill, animStroke, sw)}</g>
+										<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)}
+										{@html renderShape(effectiveShapeType ?? shapeEl.shapeType, animated.width.current, animated.height.current, animated.borderRadius.current, animFill, animStroke, animStrokeWidth, shapeEl.strokeStyle, shapeEl.strokeDashGap)}
 									{/if}
 								</svg>
 							{:else if element.type === 'counter'}
@@ -1008,7 +1184,7 @@
 							{: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 }; })()}
-								<div class="animot-svg-element" style:opacity={svgEl.opacity}>
+								<div class="animot-svg-element">
 									<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}
@@ -1018,7 +1194,7 @@
 							{:else if element.type === 'motionPath'}
 								{@const mpEl = element as MotionPathElement}
 								{#if mpEl.showInPresentation}
-									<svg width="100%" height="100%" style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible;">
+									<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;">
 										<path d={buildPresenterPathD(mpEl.points, mpEl.closed)} stroke={mpEl.pathColor} stroke-width={mpEl.pathWidth} fill="none" stroke-dasharray="8 4" />
 									</svg>
 								{/if}
@@ -1064,21 +1240,29 @@
 </div>
 
 <script module lang="ts">
-	function renderShape(type: string, w: number, h: number, br: number, fill: string, stroke: string, sw: number): string {
+	function renderShape(type: string, w: number, h: number, br: number, fill: string, stroke: string, sw: number, strokeStyle?: string, strokeDashGap?: number): string {
+		let dashAttr = '';
+		if (strokeStyle && strokeStyle !== 'solid') {
+			const s = sw || 1;
+			const gap = strokeDashGap ?? (strokeStyle === 'dashed' ? s * 3 : s * 2);
+			const da = strokeStyle === 'dashed' ? `${s * 3},${gap}` : `${s * 0.1},${gap}`;
+			const lc = strokeStyle === 'dotted' ? 'round' : 'butt';
+			dashAttr = ` stroke-dasharray="${da}" stroke-linecap="${lc}"`;
+		}
 		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}"/>`;
-			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}"/>`;
-			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}"/>`;
-			case 'triangle': return `<polygon points="${w/2},${sw/2} ${sw/2},${h-sw/2} ${w-sw/2},${h-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+			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 'triangle': return `<polygon points="${w/2},${sw/2} ${sw/2},${h-sw/2} ${w-sw/2},${h-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 			case 'star': {
 				const cx = w/2, cy = h/2, outerR = 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 `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+				return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 			}
 			case 'hexagon': {
 				const cx = w/2, cy = h/2, r = 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 `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+				return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 			}
 			default: return '';
 		}
@@ -1143,19 +1327,34 @@
 
 	/* Code */
 	.animot-code-block {
-		width: 100%; height: 100%; background: #0d1117; overflow: hidden;
+		width: 100%; height: 100%; overflow: hidden;
 		display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
 		margin: 0; box-sizing: border-box;
 	}
-	.animot-code-block.transparent-bg { background: transparent; box-shadow: none; }
-	.animot-code-block.transparent-bg .animot-code-header { background: transparent; border-bottom-color: rgba(255,255,255,0.1); }
-	.animot-code-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #161b22; border-bottom: 1px solid #30363d; flex-shrink: 0; }
-	.animot-window-controls { display: flex; gap: 8px; }
-	.animot-control { width: 12px; height: 12px; border-radius: 50%; display: block; }
+	.animot-code-block.transparent-bg { background: transparent !important; box-shadow: none; }
+	.animot-code-block.transparent-bg .animot-code-header { background: transparent; border-bottom-color: rgba(255,255,255,0.06); }
+	.animot-code-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; min-height: 40px; }
+	.animot-window-controls { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
+	.macos .animot-control { width: 12px; height: 12px; border-radius: 50%; display: block; }
 	.macos .animot-control.close { background: #ff5f57; }
 	.macos .animot-control.minimize { background: #febc2e; }
 	.macos .animot-control.maximize { background: #28c840; }
-	.animot-filename { color: #8b949e; font-size: 14px; flex: 1; }
+	.windows .animot-window-controls { order: 99; margin-left: auto; gap: 0; }
+	.windows .animot-control { display: flex; align-items: center; justify-content: center; width: 28px; height: 24px; border-radius: 4px; color: rgba(255,255,255,0.45); }
+	.animot-filename-tab { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 4px 10px; max-width: 220px; color: rgba(255,255,255,0.4); }
+	.animot-file-icon { flex-shrink: 0; }
+	.animot-filename { color: rgba(255,255,255,0.55); font-size: 12px; line-height: 18px; }
+	.animot-copy-code-btn { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; margin-left: auto; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: rgba(255,255,255,0.4); cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.15s, color 0.15s; flex-shrink: 0; font-size: 12px; font-family: inherit; white-space: nowrap; }
+	.animot-copy-code-btn:hover { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); }
+	.animot-copy-code-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
+	.animot-copy-code-btn .animot-check-icon { display: none; }
+	.animot-copy-code-btn .animot-copied-label { display: none; }
+	.animot-copy-code-btn.copied .animot-copy-icon { display: none; }
+	.animot-copy-code-btn.copied .animot-copy-label { display: none; }
+	.animot-copy-code-btn.copied .animot-check-icon { display: block; color: #4ade80; }
+	.animot-copy-code-btn.copied .animot-copied-label { display: inline; color: #4ade80; }
+	.animot-copy-code-btn.animot-floating { position: absolute; top: 8px; right: 8px; z-index: 2; }
+	.animot-code-block:hover .animot-copy-code-btn { opacity: 1; }
 	.animot-code-content { flex: 1; overflow: hidden; position: relative; }
 	.animot-highlighted-code { width: 100%; height: 100%; }
 	.animot-code-content :global(pre), .animot-highlighted-code :global(pre) { margin: 0; padding: 16px; background: transparent !important; line-height: 1.6; font-size: inherit; overflow: visible; }
@@ -1170,11 +1369,19 @@
 	/* Arrow */
 	.animot-arrow-element { width: 100%; height: 100%; }
 	.arrow-animate-draw .arrow-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: animot-arrow-draw var(--arrow-anim-duration, 500ms) ease-out forwards; }
+	.arrow-animate-undraw .arrow-path { stroke-dasharray: 1000; stroke-dashoffset: 0; animation: animot-arrow-undraw var(--arrow-anim-duration, 500ms) ease-out forwards; }
+	.arrow-animate-draw-undraw .arrow-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: animot-arrow-draw-undraw var(--arrow-anim-duration, 500ms) ease-out forwards; }
 	.arrow-head-styled-draw { opacity: 0; animation: animot-arrow-head-appear var(--arrow-anim-duration, 500ms) ease-out forwards; animation-delay: calc(var(--arrow-anim-duration, 500ms) * 0.7); }
 	.arrow-animate-draw .arrow-head { opacity: 0; animation: animot-arrow-head-appear var(--arrow-anim-duration, 500ms) ease-out forwards; animation-delay: calc(var(--arrow-anim-duration, 500ms) * 0.7); }
+	.arrow-animate-undraw .arrow-head, .arrow-head-undraw { opacity: 1; animation: animot-arrow-head-disappear var(--arrow-anim-duration, 500ms) ease-out forwards; }
+	.arrow-animate-draw-undraw .arrow-head, .arrow-head-draw-undraw { opacity: 0; animation: animot-arrow-head-draw-undraw var(--arrow-anim-duration, 500ms) ease-out forwards; }
 	.arrow-animate-grow { transform-origin: left center; animation: animot-arrow-grow var(--arrow-anim-duration, 500ms) ease-out forwards; }
 	@keyframes animot-arrow-draw { to { stroke-dashoffset: 0; } }
+	@keyframes animot-arrow-undraw { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 1000; } }
+	@keyframes animot-arrow-draw-undraw { 0% { stroke-dashoffset: 1000; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1000; } }
 	@keyframes animot-arrow-head-appear { from { opacity: 0; } to { opacity: 1; } }
+	@keyframes animot-arrow-head-disappear { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
+	@keyframes animot-arrow-head-draw-undraw { 0% { opacity: 0; } 35% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }
 	@keyframes animot-arrow-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
 
 	/* Image */