animot-presenter 0.1.0

package/dist/effects/ConfettiEffect.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import confetti from 'canvas-confetti';
+	import type { ConfettiConfig } from '../types';
+
+	interface Props { config: ConfettiConfig; width: number; height: number; }
+	let { config, width, height }: Props = $props();
+
+	let canvasEl: HTMLCanvasElement;
+	let myConfetti: confetti.CreateTypes | null = null;
+	let intervalId: ReturnType<typeof setInterval>;
+
+	function fireBurst() {
+		if (!myConfetti) return;
+		myConfetti({
+			particleCount: config.particleCount, spread: config.spread,
+			startVelocity: config.startVelocity, gravity: config.gravity,
+			drift: config.drift, scalar: config.scalar, colors: config.colors,
+			ticks: 200, origin: { x: 0.5, y: 0.5 }, disableForReducedMotion: false
+		});
+	}
+
+	function fireContinuous() {
+		if (!myConfetti) return;
+		myConfetti({
+			particleCount: Math.max(1, Math.floor(config.particleCount / 10)),
+			spread: config.spread, startVelocity: config.startVelocity * 0.6,
+			gravity: config.gravity, drift: config.drift, scalar: config.scalar,
+			colors: config.colors, ticks: 300, origin: { x: Math.random(), y: -0.05 },
+			disableForReducedMotion: false
+		});
+	}
+
+	function fireFireworks() {
+		if (!myConfetti) return;
+		myConfetti({
+			particleCount: config.particleCount, spread: 360,
+			startVelocity: config.startVelocity, gravity: config.gravity * 0.8,
+			drift: 0, scalar: config.scalar, colors: config.colors,
+			ticks: 150, origin: { x: 0.2 + Math.random() * 0.6, y: 0.2 + Math.random() * 0.4 },
+			disableForReducedMotion: false
+		});
+	}
+
+	function fireSnow() {
+		if (!myConfetti) return;
+		myConfetti({
+			particleCount: Math.max(1, Math.floor(config.particleCount / 8)),
+			spread: 180, startVelocity: 2, gravity: config.gravity * 0.3,
+			drift: config.drift, scalar: config.scalar * 0.8,
+			colors: ['#ffffff', '#e0e0ff', '#d0d8ff'], ticks: 600,
+			origin: { x: Math.random(), y: -0.05 }, shapes: ['circle'],
+			disableForReducedMotion: false
+		});
+	}
+
+	function startEffect() {
+		stopEffect();
+		if (!myConfetti || !config.enabled) return;
+		switch (config.mode) {
+			case 'burst': fireBurst(); break;
+			case 'continuous': fireContinuous(); intervalId = setInterval(fireContinuous, 250); break;
+			case 'fireworks': fireFireworks(); intervalId = setInterval(fireFireworks, 800); break;
+			case 'snow': fireSnow(); intervalId = setInterval(fireSnow, 150); break;
+		}
+	}
+
+	function stopEffect() { if (intervalId) clearInterval(intervalId); }
+
+	$effect(() => {
+		const _ = [config.enabled, config.mode, config.particleCount, config.spread, config.colors, config.gravity, config.drift, config.startVelocity, config.scalar];
+		if (myConfetti && config.enabled) startEffect();
+		else stopEffect();
+	});
+
+	onMount(() => {
+		myConfetti = confetti.create(canvasEl, { resize: false, useWorker: false });
+		if (config.enabled) startEffect();
+		return () => { stopEffect(); if (myConfetti) myConfetti.reset(); };
+	});
+</script>
+
+<canvas bind:this={canvasEl} {width} {height} style="position:absolute;inset:0;pointer-events:none;z-index:1;"></canvas>

package/dist/effects/ConfettiEffect.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ConfettiConfig } from '../types';
+interface Props {
+    config: ConfettiConfig;
+    width: number;
+    height: number;
+}
+declare const ConfettiEffect: import("svelte").Component<Props, {}, "">;
+type ConfettiEffect = ReturnType<typeof ConfettiEffect>;
+export default ConfettiEffect;

package/dist/effects/ParticlesBackground.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ParticlesConfig } from '../types';
+
+	interface Props { config: ParticlesConfig; width: number; height: number; }
+	let { config, width, height }: Props = $props();
+
+	let canvasEl: HTMLCanvasElement;
+	let animFrameId: number;
+
+	interface Particle { x: number; y: number; vx: number; vy: number; size: number; opacity: number; }
+	let particles: Particle[] = [];
+
+	function initParticles() {
+		particles = [];
+		for (let i = 0; i < config.count; i++) particles.push(createParticle(true));
+	}
+
+	function createParticle(randomPosition: boolean): Particle {
+		const size = config.minSize + Math.random() * (config.maxSize - config.minSize);
+		const speed = config.speed * 0.5;
+		let vx = 0, vy = 0;
+		switch (config.direction) {
+			case 'up': vx = (Math.random() - 0.5) * speed * 0.3; vy = -speed * (0.3 + Math.random() * 0.7); break;
+			case 'down': vx = (Math.random() - 0.5) * speed * 0.3; vy = speed * (0.3 + Math.random() * 0.7); break;
+			case 'left': vx = -speed * (0.3 + Math.random() * 0.7); vy = (Math.random() - 0.5) * speed * 0.3; break;
+			case 'right': vx = speed * (0.3 + Math.random() * 0.7); vy = (Math.random() - 0.5) * speed * 0.3; break;
+			default: { const angle = Math.random() * Math.PI * 2; vx = Math.cos(angle) * speed * (0.3 + Math.random() * 0.7); vy = Math.sin(angle) * speed * (0.3 + Math.random() * 0.7); }
+		}
+		return {
+			x: randomPosition ? Math.random() * width : (config.direction === 'right' ? -size : config.direction === 'left' ? width + size : Math.random() * width),
+			y: randomPosition ? Math.random() * height : (config.direction === 'down' ? -size : config.direction === 'up' ? height + size : Math.random() * height),
+			vx, vy, size, opacity: config.opacity * (0.3 + Math.random() * 0.7),
+		};
+	}
+
+	function drawShape(ctx: CanvasRenderingContext2D, p: Particle) {
+		ctx.globalAlpha = p.opacity;
+		ctx.fillStyle = config.color;
+		switch (config.shape) {
+			case 'square': ctx.fillRect(p.x - p.size / 2, p.y - p.size / 2, p.size, p.size); break;
+			case 'triangle': {
+				ctx.beginPath(); ctx.moveTo(p.x, p.y - p.size);
+				ctx.lineTo(p.x - p.size * 0.866, p.y + p.size * 0.5);
+				ctx.lineTo(p.x + p.size * 0.866, p.y + p.size * 0.5);
+				ctx.closePath(); ctx.fill(); break;
+			}
+			case 'star': {
+				ctx.beginPath();
+				for (let i = 0; i < 5; i++) {
+					const outerAngle = (i * 2 * Math.PI / 5) - Math.PI / 2;
+					const innerAngle = outerAngle + Math.PI / 5;
+					const outerR = p.size, innerR = p.size * 0.4;
+					if (i === 0) ctx.moveTo(p.x + outerR * Math.cos(outerAngle), p.y + outerR * Math.sin(outerAngle));
+					else ctx.lineTo(p.x + outerR * Math.cos(outerAngle), p.y + outerR * Math.sin(outerAngle));
+					ctx.lineTo(p.x + innerR * Math.cos(innerAngle), p.y + innerR * Math.sin(innerAngle));
+				}
+				ctx.closePath(); ctx.fill(); break;
+			}
+			default:
+				ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();
+		}
+	}
+
+	function drawConnections(ctx: CanvasRenderingContext2D) {
+		if (config.connectDistance <= 0) return;
+		const maxDist = config.connectDistance;
+		const maxDistSq = maxDist * maxDist;
+		ctx.strokeStyle = config.color; ctx.lineWidth = 1;
+		for (let i = 0; i < particles.length; i++) {
+			for (let j = i + 1; j < particles.length; j++) {
+				const dx = particles[i].x - particles[j].x;
+				const dy = particles[i].y - particles[j].y;
+				const distSq = dx * dx + dy * dy;
+				if (distSq < maxDistSq) {
+					ctx.globalAlpha = config.opacity * 0.6 * (1 - Math.sqrt(distSq) / maxDist);
+					ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y);
+					ctx.lineTo(particles[j].x, particles[j].y); ctx.stroke();
+				}
+			}
+		}
+	}
+
+	function animate() {
+		const ctx = canvasEl?.getContext('2d');
+		if (!ctx) return;
+		ctx.clearRect(0, 0, width, height);
+		drawConnections(ctx);
+		const margin = config.maxSize * 2;
+		for (const p of particles) {
+			p.x += p.vx; p.y += p.vy;
+			if (p.x < -margin) p.x = width + margin;
+			if (p.x > width + margin) p.x = -margin;
+			if (p.y < -margin) p.y = height + margin;
+			if (p.y > height + margin) p.y = -margin;
+			drawShape(ctx, p);
+		}
+		ctx.globalAlpha = 1;
+		animFrameId = requestAnimationFrame(animate);
+	}
+
+	$effect(() => {
+		const _ = [config.count, config.color, config.opacity, config.minSize, config.maxSize, config.speed, config.shape, config.connectDistance, config.direction, width, height];
+		if (canvasEl) initParticles();
+	});
+
+	onMount(() => {
+		initParticles();
+		animFrameId = requestAnimationFrame(animate);
+		return () => { if (animFrameId) cancelAnimationFrame(animFrameId); };
+	});
+</script>
+
+<canvas bind:this={canvasEl} {width} {height} style="position:absolute;inset:0;pointer-events:none;z-index:0;"></canvas>

package/dist/effects/ParticlesBackground.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ParticlesConfig } from '../types';
+interface Props {
+    config: ParticlesConfig;
+    width: number;
+    height: number;
+}
+declare const ParticlesBackground: import("svelte").Component<Props, {}, "">;
+type ParticlesBackground = ReturnType<typeof ParticlesBackground>;
+export default ParticlesBackground;

package/dist/element.d.ts

@@ -0,0 +1,24 @@
+import type { AnimotProject } from './types';
+import './styles/presenter.css';
+declare class AnimotPresenterElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _component;
+    private _data;
+    private _onslidechange;
+    private _oncomplete;
+    set data(value: AnimotProject | null);
+    get data(): AnimotProject | null;
+    set onslidechange(fn: ((index: number, total: number) => void) | null);
+    set oncomplete(fn: (() => void) | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private _getProps;
+    private _mount;
+    private _unmount;
+    private _remount;
+    goto(index: number): void;
+    next(): void;
+    prev(): void;
+}
+export { AnimotPresenterElement };

package/dist/element.js

@@ -0,0 +1,128 @@
+/**
+ * Web Component wrapper for AnimotPresenter.
+ * Registers <animot-presenter> custom element for use in any framework or vanilla HTML.
+ */
+import { mount, unmount } from 'svelte';
+import AnimotPresenter from './AnimotPresenter.svelte';
+// Inject floating animation CSS into the document (once)
+import './styles/presenter.css';
+const BOOLEAN_ATTRS = new Set(['autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard']);
+const NUMBER_ATTRS = new Set(['duration', 'start-slide']);
+class AnimotPresenterElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['src', 'autoplay', 'loop', 'controls', 'arrows', 'progress', 'keyboard', 'duration', 'start-slide'];
+    }
+    _component = null;
+    _data = null;
+    _onslidechange = null;
+    _oncomplete = null;
+    // Public API: set data programmatically
+    set data(value) {
+        this._data = value;
+        this._remount();
+    }
+    get data() {
+        return this._data;
+    }
+    set onslidechange(fn) {
+        this._onslidechange = fn;
+        this._remount();
+    }
+    set oncomplete(fn) {
+        this._oncomplete = fn;
+        this._remount();
+    }
+    connectedCallback() {
+        this._mount();
+    }
+    disconnectedCallback() {
+        this._unmount();
+    }
+    attributeChangedCallback() {
+        this._remount();
+    }
+    _getProps() {
+        const props = {};
+        // String attributes
+        const src = this.getAttribute('src');
+        if (src)
+            props.src = src;
+        // Boolean attributes (presence = true)
+        for (const attr of BOOLEAN_ATTRS) {
+            props[attr] = this.hasAttribute(attr);
+        }
+        // Number attributes
+        const duration = this.getAttribute('duration');
+        if (duration)
+            props.duration = Number(duration);
+        const startSlide = this.getAttribute('start-slide');
+        if (startSlide)
+            props.startSlide = Number(startSlide);
+        // Programmatic props
+        if (this._data)
+            props.data = this._data;
+        if (this._onslidechange) {
+            props.onslidechange = this._onslidechange;
+        }
+        else {
+            // Dispatch custom event for vanilla JS listeners
+            props.onslidechange = (index, total) => {
+                this.dispatchEvent(new CustomEvent('slidechange', { detail: { index, total }, bubbles: true }));
+            };
+        }
+        if (this._oncomplete) {
+            props.oncomplete = this._oncomplete;
+        }
+        else {
+            props.oncomplete = () => {
+                this.dispatchEvent(new CustomEvent('complete', { bubbles: true }));
+            };
+        }
+        return props;
+    }
+    _mount() {
+        if (this._component)
+            return;
+        // Ensure the element has dimensions
+        if (!this.style.display) {
+            this.style.display = 'block';
+        }
+        this._component = mount(AnimotPresenter, {
+            target: this,
+            props: this._getProps()
+        });
+    }
+    _unmount() {
+        if (this._component) {
+            unmount(this._component);
+            this._component = null;
+        }
+    }
+    _remount() {
+        if (!this.isConnected)
+            return;
+        this._unmount();
+        this._mount();
+    }
+    // Public methods that proxy to the Svelte component
+    goto(index) {
+        const btn = this.querySelector('.animot-controls button');
+        // Fire a custom event the component can listen to
+        this.dispatchEvent(new CustomEvent('animot-goto', { detail: { index } }));
+    }
+    next() {
+        const nextBtn = this.querySelectorAll('.animot-controls button')[2];
+        if (nextBtn && !nextBtn.disabled)
+            nextBtn.click();
+    }
+    prev() {
+        const prevBtn = this.querySelectorAll('.animot-controls button')[0];
+        if (prevBtn && !prevBtn.disabled)
+            prevBtn.click();
+    }
+}
+// Register the custom element
+if (typeof customElements !== 'undefined' && !customElements.get('animot-presenter')) {
+    customElements.define('animot-presenter', AnimotPresenterElement);
+}
+export { AnimotPresenterElement };

package/dist/engine/utils.d.ts

@@ -0,0 +1,22 @@
+export declare function easeInOutCubic(t: number): number;
+export declare function interpolateColor(color1: string, color2: string, progress: number): string;
+export declare function hashFraction(str: string, salt?: number): number;
+export declare function getFloatAnimName(direction: string, seed: string): string;
+export declare function computeFloatAmp(cfg: {
+    amplitude: number;
+    amplitudeRandomness?: number;
+}, seed: string): number;
+export declare function computeFloatSpeed(cfg: {
+    speed: number;
+    speedRandomness?: number;
+}, seed: string): number;
+export declare function getBackgroundStyle(bg: {
+    type: string;
+    color?: string;
+    gradient?: {
+        type: string;
+        angle?: number;
+        colors: string[];
+    };
+    image?: string;
+}): string;

package/dist/engine/utils.js

@@ -0,0 +1,72 @@
+export function easeInOutCubic(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+export function interpolateColor(color1, color2, progress) {
+    if (color1 === 'transparent')
+        color1 = '#00000000';
+    if (color2 === 'transparent')
+        color2 = '#00000000';
+    const hex1 = color1.replace('#', '');
+    const hex2 = color2.replace('#', '');
+    const r1 = parseInt(hex1.substring(0, 2), 16) || 0;
+    const g1 = parseInt(hex1.substring(2, 4), 16) || 0;
+    const b1 = parseInt(hex1.substring(4, 6), 16) || 0;
+    const a1 = hex1.length === 8 ? parseInt(hex1.substring(6, 8), 16) / 255 : 1;
+    const r2 = parseInt(hex2.substring(0, 2), 16) || 0;
+    const g2 = parseInt(hex2.substring(2, 4), 16) || 0;
+    const b2 = parseInt(hex2.substring(4, 6), 16) || 0;
+    const a2 = hex2.length === 8 ? parseInt(hex2.substring(6, 8), 16) / 255 : 1;
+    const r = Math.round(r1 + (r2 - r1) * progress);
+    const g = Math.round(g1 + (g2 - g1) * progress);
+    const b = Math.round(b1 + (b2 - b1) * progress);
+    const a = a1 + (a2 - a1) * progress;
+    if (a < 1) {
+        return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+    }
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+export function hashFraction(str, salt = 0) {
+    let hash = salt;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) - hash) + str.charCodeAt(i);
+        hash |= 0;
+    }
+    return (Math.abs(hash) % 1000) / 1000;
+}
+export function getFloatAnimName(direction, seed) {
+    const h = Math.floor(hashFraction(seed) * 100);
+    switch (direction) {
+        case 'vertical': return 'float-vertical';
+        case 'horizontal': return 'float-horizontal';
+        case 'both':
+        default:
+            return `float-both-${h % 4}`;
+    }
+}
+export function computeFloatAmp(cfg, seed) {
+    const r = cfg.amplitudeRandomness ?? 0;
+    if (r === 0)
+        return cfg.amplitude;
+    return cfg.amplitude * (1 - r + r * hashFraction(seed, 1));
+}
+export function computeFloatSpeed(cfg, seed) {
+    const r = cfg.speedRandomness ?? 0;
+    if (r === 0)
+        return cfg.speed;
+    return cfg.speed * (1 - r + r * hashFraction(seed, 2));
+}
+export function getBackgroundStyle(bg) {
+    if (bg.type === 'transparent')
+        return 'background: transparent';
+    if (bg.type === 'solid')
+        return `background-color: ${bg.color ?? 'transparent'}`;
+    if (bg.type === 'gradient' && bg.gradient) {
+        const { type, angle = 135, colors } = bg.gradient;
+        if (type === 'linear')
+            return `background: linear-gradient(${angle}deg, ${colors.join(', ')})`;
+        return `background: radial-gradient(circle, ${colors.join(', ')})`;
+    }
+    if (bg.type === 'image' && bg.image)
+        return `background-image: url(${bg.image}); background-size: cover; background-position: center`;
+    return 'background: transparent';
+}

package/dist/highlight/CodeMorph.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { highlightCode } from './highlighter';
+	import type { CodeAnimationMode } from '../types';
+
+	interface Props {
+		oldCode: string;
+		newCode: string;
+		language: string;
+		theme: string;
+		mode: CodeAnimationMode;
+		speed?: number;
+		highlightColor?: string;
+		highlightDuration?: number;
+		showLineNumbers?: boolean;
+		onComplete?: () => void;
+	}
+
+	let {
+		oldCode, newCode, language = 'javascript', theme = 'github-dark',
+		mode = 'highlight-changes', speed = 50, highlightColor = '#facc15',
+		highlightDuration = 1000, showLineNumbers = false, onComplete
+	}: Props = $props();
+
+	const durationSec = $derived(highlightDuration / 1000);
+	let displayedHtml = $state('');
+	let changedWordIndices = $state<Set<number>>(new Set());
+	let isAnimating = $state(false);
+
+	function tokenize(code: string): string[] {
+		return code.match(/[a-zA-Z_][a-zA-Z0-9_]*|\d+|\s+|./g) || [];
+	}
+
+	function findChangedWords(oldStr: string, newStr: string): Set<number> {
+		const oldTokens = tokenize(oldStr);
+		const newTokens = tokenize(newStr);
+		const changed = new Set<number>();
+		let oldIdx = 0, newIdx = 0;
+		while (newIdx < newTokens.length) {
+			if (oldIdx < oldTokens.length && oldTokens[oldIdx] === newTokens[newIdx]) {
+				oldIdx++; newIdx++;
+			} else {
+				if (newTokens[newIdx].trim()) changed.add(newIdx);
+				newIdx++;
+				if (oldIdx < oldTokens.length && oldTokens[oldIdx] !== newTokens[newIdx - 1]) oldIdx++;
+			}
+		}
+		return changed;
+	}
+
+	function sleep(ms: number): Promise<void> { return new Promise(r => setTimeout(r, ms)); }
+
+	async function animateTypewriter() {
+		isAnimating = true;
+		let diffStart = 0;
+		while (diffStart < oldCode.length && diffStart < newCode.length && oldCode[diffStart] === newCode[diffStart]) diffStart++;
+		const delayMs = 1000 / speed;
+		for (let i = diffStart; i <= newCode.length; i++) {
+			displayedHtml = await highlightCode(newCode.substring(0, i), language, theme, { showLineNumbers });
+			await sleep(delayMs);
+		}
+		isAnimating = false;
+		onComplete?.();
+	}
+
+	async function animateHighlight() {
+		isAnimating = true;
+		changedWordIndices = findChangedWords(oldCode, newCode);
+		const baseHtml = await highlightCode(newCode, language, theme, { showLineNumbers });
+		displayedHtml = wrapChangedWords(newCode, baseHtml, changedWordIndices);
+		await sleep(highlightDuration);
+		displayedHtml = baseHtml;
+		changedWordIndices = new Set();
+		isAnimating = false;
+		onComplete?.();
+	}
+
+	function wrapChangedWords(code: string, html: string, changed: Set<number>): string {
+		if (changed.size === 0) return html;
+		const tokens = tokenize(code);
+		const changedTokens = new Set<string>();
+		for (const idx of changed) {
+			if (tokens[idx] && tokens[idx].trim()) changedTokens.add(tokens[idx]);
+		}
+		let result = html;
+		for (const token of changedTokens) {
+			const escaped = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+			const regex = new RegExp(`(>)([^<]*?)(\\b${escaped}\\b)([^<]*?)(<)`, 'g');
+			result = result.replace(regex, (_, open, before, word, after, close) => {
+				return `${open}${before}<mark class="word-highlight">${word}</mark>${after}${close}`;
+			});
+		}
+		return result;
+	}
+
+	onMount(async () => {
+		if (mode === 'instant' || oldCode === newCode) {
+			displayedHtml = await highlightCode(newCode, language, theme, { showLineNumbers });
+		} else if (mode === 'typewriter') {
+			await animateTypewriter();
+		} else if (mode === 'highlight-changes') {
+			await animateHighlight();
+		}
+	});
+</script>
+
+<div class="code-morph" class:animating={isAnimating} style:--highlight-color={highlightColor} style:--duration="{durationSec}s">{@html displayedHtml}</div>
+
+<style>
+	.code-morph {
+		width: 100%; height: 100%; margin: 0; padding: 0;
+		background: transparent; font-family: var(--font-mono, 'JetBrains Mono', monospace);
+		font-size: inherit; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word;
+		color: #e6edf3; box-sizing: border-box; overflow: visible;
+	}
+	.code-morph :global(pre) {
+		margin: 0; padding: 16px; background: transparent !important;
+		font-family: var(--font-mono); font-size: inherit; line-height: 1.6; overflow: visible;
+	}
+	.code-morph :global(code) { font-family: inherit; font-size: inherit; font-weight: inherit; }
+	.code-morph :global(.line-number) {
+		display: inline-block; width: 2.5em; margin-right: 1em;
+		text-align: right; color: #6e7681; user-select: none; opacity: 0.6;
+	}
+	.code-morph :global(.word-highlight) {
+		background: var(--highlight-color, #facc15); color: #000;
+		border-radius: 3px; padding: 1px 3px; margin: 0 -3px;
+		box-decoration-break: clone;
+		animation: fadeHighlight var(--duration, 1s) ease-out forwards;
+	}
+	@keyframes fadeHighlight {
+		0% { background: var(--highlight-color, #facc15); color: #000; }
+		70% { background: var(--highlight-color, #facc15); color: #000; }
+		100% { background: transparent; color: inherit; }
+	}
+</style>

package/dist/highlight/CodeMorph.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { CodeAnimationMode } from '../types';
+interface Props {
+    oldCode: string;
+    newCode: string;
+    language: string;
+    theme: string;
+    mode: CodeAnimationMode;
+    speed?: number;
+    highlightColor?: string;
+    highlightDuration?: number;
+    showLineNumbers?: boolean;
+    onComplete?: () => void;
+}
+declare const CodeMorph: import("svelte").Component<Props, {}, "">;
+type CodeMorph = ReturnType<typeof CodeMorph>;
+export default CodeMorph;

package/dist/highlight/highlighter-web.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CDN-only highlighter that uses shiki/bundle/web (fewer languages, smaller bundle).
+ * The Svelte package uses highlighter.ts which imports from full shiki.
+ */
+import { type Highlighter } from 'shiki/bundle/web';
+export declare function getHighlighter(): Promise<Highlighter>;
+export interface HighlightOptions {
+    showLineNumbers?: boolean;
+}
+export declare function highlightCode(code: string, language: string, theme?: string, options?: HighlightOptions): Promise<string>;

package/dist/highlight/highlighter-web.js

@@ -0,0 +1,54 @@
+/**
+ * CDN-only highlighter that uses shiki/bundle/web (fewer languages, smaller bundle).
+ * The Svelte package uses highlighter.ts which imports from full shiki.
+ */
+import { createHighlighter } from 'shiki/bundle/web';
+let highlighterPromise = null;
+const THEMES = ['github-dark', 'github-light', 'dracula', 'nord', 'one-dark-pro', 'vitesse-dark'];
+export async function getHighlighter() {
+    if (!highlighterPromise) {
+        highlighterPromise = createHighlighter({ themes: THEMES, langs: [] });
+    }
+    return highlighterPromise;
+}
+export async function highlightCode(code, language, theme = 'github-dark', options = {}) {
+    try {
+        const highlighter = await getHighlighter();
+        const loadedLangs = highlighter.getLoadedLanguages();
+        if (!loadedLangs.includes(language)) {
+            // Lazy-load the requested language from the web bundle
+            try {
+                await highlighter.loadLanguage(language);
+            }
+            catch {
+                // Language not available in web bundle, fall back to plaintext
+                language = 'javascript';
+                if (!loadedLangs.includes('javascript')) {
+                    await highlighter.loadLanguage('javascript');
+                }
+            }
+        }
+        const html = highlighter.codeToHtml(code, { lang: language, theme });
+        if (options.showLineNumbers)
+            return addLineNumbers(html);
+        return html;
+    }
+    catch (e) {
+        console.error('Highlighting error:', e);
+        return `<pre><code>${escapeHtml(code)}</code></pre>`;
+    }
+}
+function addLineNumbers(html) {
+    const codeMatch = html.match(/<code[^>]*>([\s\S]*)<\/code>/);
+    if (!codeMatch)
+        return html;
+    const codeContent = codeMatch[1];
+    const codeLines = codeContent.split('\n');
+    const numberedLines = codeLines.map((line, i) => {
+        return `<span class="line-number">${i + 1}</span>${line}`;
+    }).join('\n');
+    return html.replace(codeMatch[1], numberedLines);
+}
+function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
+}