animot-presenter 0.1.0

package/dist/highlight/highlighter.d.ts

@@ -0,0 +1,6 @@
+import { type Highlighter } from 'shiki';
+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.js

@@ -0,0 +1,45 @@
+import { createHighlighter } from 'shiki';
+let highlighterPromise = null;
+const THEMES = ['github-dark', 'github-light', 'dracula', 'nord', 'one-dark-pro', 'vitesse-dark'];
+const LANGUAGES = [
+    'javascript', 'typescript', 'python', 'rust', 'go', 'java', 'cpp', 'c',
+    'csharp', 'php', 'ruby', 'swift', 'kotlin', 'html', 'css', 'scss',
+    'json', 'yaml', 'markdown', 'sql', 'bash', 'shell', 'dockerfile', 'svelte', 'vue', 'jsx', 'tsx'
+];
+export async function getHighlighter() {
+    if (!highlighterPromise) {
+        highlighterPromise = createHighlighter({ themes: THEMES, langs: LANGUAGES });
+    }
+    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)) {
+            language = '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;');
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AnimotPresenter } from './AnimotPresenter.svelte';
+export type { AnimotProject, AnimotPresenterProps, Slide, SlideCanvas, CanvasElement, CanvasBackground, TransitionConfig, TransitionType, ProjectSettings, BaseElement, CodeElement, TextElement, ArrowElement, ImageElement, ShapeElement, CounterElement, ChartElement, IconElement, ElementAnimationConfig, FloatingAnimationConfig, ParticlesConfig, ConfettiConfig } from './types';
+export { AnimotPresenterElement } from './element';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { default as AnimotPresenter } from './AnimotPresenter.svelte';
+// Re-export element registration for convenience
+// Users who just want the web component can import 'animot-presenter/element'
+export { AnimotPresenterElement } from './element';

package/dist/renderers/ChartRenderer.svelte

@@ -0,0 +1,341 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ChartElement } from '../types';
+
+	interface Props { element: ChartElement; slideId: string; }
+	let { element, slideId }: Props = $props();
+
+	let animationProgress = $state(1);
+	let animationFrame: number | null = null;
+
+	function animateChart() {
+		const startTime = performance.now();
+		const duration = element.animationDuration;
+
+		function tick() {
+			const elapsed = performance.now() - startTime;
+			const progress = Math.min(elapsed / duration, 1);
+			// Ease out cubic
+			const eased = 1 - Math.pow(1 - progress, 3);
+			animationProgress = eased;
+
+			if (progress < 1) {
+				animationFrame = requestAnimationFrame(tick);
+			}
+		}
+
+		// Cancel any existing animation
+		if (animationFrame) cancelAnimationFrame(animationFrame);
+
+		// Start animation after a short delay
+		setTimeout(() => {
+			animationProgress = 0;
+			animationFrame = requestAnimationFrame(tick);
+		}, 200);
+	}
+
+	// Trigger animation on mount
+	onMount(() => {
+		animateChart();
+		return () => {
+			if (animationFrame) cancelAnimationFrame(animationFrame);
+		};
+	});
+
+	// Also trigger when slideId changes
+	$effect(() => {
+		if (slideId) {
+			animateChart();
+		}
+	});
+
+	// Calculate max value for scaling
+	const maxValue = $derived(Math.max(...element.data.map(d => d.value), 1));
+
+	// Calculate line/area chart points
+	const linePoints = $derived.by(() => {
+		return element.data.map((d, i) => {
+			const x = 10 + (i / Math.max(element.data.length - 1, 1)) * 80;
+			const y = 90 - (d.value / maxValue) * 80 * animationProgress;
+			return `${x},${y}`;
+		}).join(' ');
+	});
+
+	// Get color for data point
+	function getColor(index: number, customColor?: string): string {
+		if (customColor) return customColor;
+		return element.colors[index % element.colors.length];
+	}
+
+	// Calculate pie/donut segments
+	const pieSegments = $derived.by(() => {
+		const total = element.data.reduce((sum, d) => sum + d.value, 0);
+		let currentAngle = -90; // Start from top
+
+		return element.data.map((d, i) => {
+			const percentage = d.value / total;
+			const angle = percentage * 360 * animationProgress;
+			const startAngle = currentAngle;
+			currentAngle += angle;
+
+			return {
+				...d,
+				startAngle,
+				endAngle: currentAngle,
+				percentage,
+				color: getColor(i, d.color)
+			};
+		});
+	});
+
+	// SVG arc path for pie
+	function describeArc(cx: number, cy: number, r: number, startAngle: number, endAngle: number): string {
+		const start = polarToCartesian(cx, cy, r, endAngle);
+		const end = polarToCartesian(cx, cy, r, startAngle);
+		const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
+
+		return [
+			'M', cx, cy,
+			'L', start.x, start.y,
+			'A', r, r, 0, largeArcFlag, 0, end.x, end.y,
+			'Z'
+		].join(' ');
+	}
+
+	// SVG arc path for donut
+	function describeDonutArc(cx: number, cy: number, outerR: number, innerR: number, startAngle: number, endAngle: number): string {
+		const outerStart = polarToCartesian(cx, cy, outerR, endAngle);
+		const outerEnd = polarToCartesian(cx, cy, outerR, startAngle);
+		const innerStart = polarToCartesian(cx, cy, innerR, endAngle);
+		const innerEnd = polarToCartesian(cx, cy, innerR, startAngle);
+		const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1;
+
+		return [
+			'M', outerStart.x, outerStart.y,
+			'A', outerR, outerR, 0, largeArcFlag, 0, outerEnd.x, outerEnd.y,
+			'L', innerEnd.x, innerEnd.y,
+			'A', innerR, innerR, 0, largeArcFlag, 1, innerStart.x, innerStart.y,
+			'Z'
+		].join(' ');
+	}
+
+	function polarToCartesian(cx: number, cy: number, r: number, angle: number) {
+		const rad = (angle * Math.PI) / 180;
+		return {
+			x: cx + r * Math.cos(rad),
+			y: cy + r * Math.sin(rad)
+		};
+	}
+</script>
+
+<div
+	class="chart"
+	style:background-color={element.backgroundColor}
+	style:padding="{element.padding}px"
+	style:border-radius="{element.borderRadius}px"
+	style:color={element.textColor}
+	style:font-size="{element.fontSize}px"
+>
+	{#if element.title}
+		<div class="chart-title">{element.title}</div>
+	{/if}
+
+	<div class="chart-content">
+		{#if element.chartType === 'bar'}
+			<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" class="bar-chart">
+				{#if element.showGrid}
+					{#each [0, 25, 50, 75, 100] as y}
+						<line x1="0" y1={y} x2="100" y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-width="0.5" />
+					{/each}
+				{/if}
+				{#each element.data as point, i}
+					{@const barWidth = 80 / element.data.length}
+					{@const barX = 10 + i * (barWidth + 5)}
+					{@const barHeight = (point.value / maxValue) * 80 * animationProgress}
+					<rect
+						x={barX}
+						y={90 - barHeight}
+						width={barWidth}
+						height={barHeight}
+						fill={getColor(i, point.color)}
+						rx="1"
+					/>
+					{#if element.showLabels}
+						<text
+							x={barX + barWidth / 2}
+							y="98"
+							text-anchor="middle"
+							font-size="4"
+							fill="currentColor"
+						>{point.label}</text>
+					{/if}
+					{#if element.showValues}
+						<text
+							x={barX + barWidth / 2}
+							y={88 - barHeight}
+							text-anchor="middle"
+							font-size="3.5"
+							fill="currentColor"
+						>{Math.round(point.value * animationProgress)}</text>
+					{/if}
+				{/each}
+			</svg>
+		{:else if element.chartType === 'line' || element.chartType === 'area'}
+			<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" class="line-chart">
+				{#if element.showGrid}
+					{#each [0, 25, 50, 75, 100] as y}
+						<line x1="0" y1={y} x2="100" y2={y} stroke="currentColor" stroke-opacity="0.1" stroke-width="0.5" />
+					{/each}
+					{#each element.data as _, i}
+						{@const x = 10 + (i / (element.data.length - 1)) * 80}
+						<line x1={x} y1="10" x2={x} y2="90" stroke="currentColor" stroke-opacity="0.1" stroke-width="0.5" />
+					{/each}
+				{/if}
+
+				{#if element.chartType === 'area'}
+					<polygon
+						points="{linePoints} {10 + 80},90 10,90"
+						fill={element.colors[0]}
+						fill-opacity="0.3"
+					/>
+				{/if}
+
+				<polyline
+					points={linePoints}
+					fill="none"
+					stroke={element.colors[0]}
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+
+				{#each element.data as point, i}
+					{@const x = 10 + (i / Math.max(element.data.length - 1, 1)) * 80}
+					{@const y = 90 - (point.value / maxValue) * 80 * animationProgress}
+					<circle cx={x} cy={y} r="2" fill={getColor(i, point.color) || element.colors[0]} />
+					{#if element.showLabels}
+						<text x={x} y="98" text-anchor="middle" font-size="4" fill="currentColor">{point.label}</text>
+					{/if}
+					{#if element.showValues}
+						<text x={x} y={y - 4} text-anchor="middle" font-size="3.5" fill="currentColor">{Math.round(point.value * animationProgress)}</text>
+					{/if}
+				{/each}
+			</svg>
+		{:else if element.chartType === 'pie'}
+			<svg viewBox="0 0 100 100" class="pie-chart">
+				{#each pieSegments as segment, i}
+					{#if segment.endAngle - segment.startAngle > 0.1}
+						{@const midAngle = (segment.startAngle + segment.endAngle) / 2}
+						{@const valuePos = polarToCartesian(50, 50, 28, midAngle)}
+						{@const labelPos = polarToCartesian(50, 50, 48, midAngle)}
+						{@const textAnchor = midAngle > -90 && midAngle < 90 ? 'start' : 'end'}
+						<path
+							d={describeArc(50, 50, 40, segment.startAngle, segment.endAngle)}
+							fill={segment.color}
+						/>
+						{#if element.showValues}
+							<text
+								x={valuePos.x}
+								y={valuePos.y}
+								text-anchor="middle"
+								dominant-baseline="middle"
+								font-size="4"
+								fill="white"
+								font-weight="600"
+							>{Math.round(segment.percentage * 100)}%</text>
+						{/if}
+						{#if element.showLabels}
+							<text
+								x={labelPos.x}
+								y={labelPos.y}
+								text-anchor={textAnchor}
+								dominant-baseline="middle"
+								font-size="3.5"
+								fill="currentColor"
+							>{element.data[i].label}</text>
+						{/if}
+					{/if}
+				{/each}
+				{#if element.showLegend}
+					{#each element.data as point, i}
+						<rect x="85" y={10 + i * 8} width="4" height="4" fill={getColor(i, point.color)} />
+						<text x="91" y={14 + i * 8} font-size="4" fill="currentColor">{point.label}</text>
+					{/each}
+				{/if}
+			</svg>
+		{:else if element.chartType === 'donut'}
+			<svg viewBox="0 0 100 100" class="donut-chart">
+				{#each pieSegments as segment, i}
+					{#if segment.endAngle - segment.startAngle > 0.1}
+						{@const midAngle = (segment.startAngle + segment.endAngle) / 2}
+						{@const valuePos = polarToCartesian(50, 50, 32.5, midAngle)}
+						{@const labelPos = polarToCartesian(50, 50, 48, midAngle)}
+						{@const textAnchor = midAngle > -90 && midAngle < 90 ? 'start' : 'end'}
+						<path
+							d={describeDonutArc(50, 50, 40, 25, segment.startAngle, segment.endAngle)}
+							fill={segment.color}
+						/>
+						{#if element.showValues}
+							<text
+								x={valuePos.x}
+								y={valuePos.y}
+								text-anchor="middle"
+								dominant-baseline="middle"
+								font-size="3.5"
+								fill="white"
+								font-weight="600"
+							>{Math.round(segment.percentage * 100)}%</text>
+						{/if}
+						{#if element.showLabels}
+							<text
+								x={labelPos.x}
+								y={labelPos.y}
+								text-anchor={textAnchor}
+								dominant-baseline="middle"
+								font-size="3.5"
+								fill="currentColor"
+							>{element.data[i].label}</text>
+						{/if}
+					{/if}
+				{/each}
+				{#if element.showLegend}
+					{#each element.data as point, i}
+						<rect x="85" y={10 + i * 8} width="4" height="4" fill={getColor(i, point.color)} />
+						<text x="91" y={14 + i * 8} font-size="4" fill="currentColor">{point.label}</text>
+					{/each}
+				{/if}
+			</svg>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.chart {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	.chart-title {
+		font-weight: 600;
+		text-align: center;
+		margin-bottom: 8px;
+	}
+
+	.chart-content {
+		flex: 1;
+		min-height: 0;
+	}
+
+	.chart-content svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.bar-chart, .line-chart {
+		overflow: visible;
+	}
+</style>

package/dist/renderers/ChartRenderer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChartElement } from '../types';
+interface Props {
+    element: ChartElement;
+    slideId: string;
+}
+declare const ChartRenderer: import("svelte").Component<Props, {}, "">;
+type ChartRenderer = ReturnType<typeof ChartRenderer>;
+export default ChartRenderer;

package/dist/renderers/CounterRenderer.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { CounterElement } from '../types';
+
+	interface Props { element: CounterElement; slideId: string; }
+	let { element, slideId }: Props = $props();
+
+	let displayValue = $state(0);
+	let animationFrame: number | null = null;
+
+	function animateCounter() {
+		const startTime = performance.now();
+		const startVal = element.startValue;
+		const endVal = element.endValue;
+		const dur = element.duration;
+
+		function tick() {
+			const elapsed = performance.now() - startTime;
+			const progress = Math.min(elapsed / dur, 1);
+			const eased = 1 - Math.pow(1 - progress, 3);
+			displayValue = startVal + (endVal - startVal) * eased;
+			if (progress < 1) animationFrame = requestAnimationFrame(tick);
+		}
+
+		if (animationFrame) cancelAnimationFrame(animationFrame);
+		setTimeout(() => { displayValue = startVal; animationFrame = requestAnimationFrame(tick); }, 200);
+	}
+
+	onMount(() => { animateCounter(); return () => { if (animationFrame) cancelAnimationFrame(animationFrame); }; });
+	$effect(() => { if (slideId) animateCounter(); });
+
+	function formatValue(val: number): string {
+		switch (element.counterType) {
+			case 'letter': return String.fromCharCode(65 + (Math.round(val) % 26));
+			case 'percentage': return val.toFixed(element.decimals) + '%';
+			case 'currency': return '$' + val.toLocaleString('en-US', { minimumFractionDigits: element.decimals, maximumFractionDigits: element.decimals });
+			default: return element.decimals === 0 ? Math.round(val).toLocaleString() : val.toFixed(element.decimals);
+		}
+	}
+
+	const formattedValue = $derived(element.prefix + formatValue(displayValue) + element.suffix);
+</script>
+
+<div
+	class="counter"
+	style:font-size="{element.fontSize}px"
+	style:font-weight={element.fontWeight}
+	style:font-family="'{element.fontFamily}', sans-serif"
+	style:color={element.color}
+	style:background-color={element.backgroundColor}
+	style:padding="{element.padding}px"
+	style:border-radius="{element.borderRadius}px"
+	style:text-align={element.textAlign}
+>
+	{formattedValue}
+</div>
+
+<style>
+	.counter {
+		width: 100%; height: 100%; display: flex; align-items: center;
+		justify-content: center; box-sizing: border-box; overflow: hidden;
+		white-space: nowrap;
+	}
+</style>

package/dist/renderers/CounterRenderer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CounterElement } from '../types';
+interface Props {
+    element: CounterElement;
+    slideId: string;
+}
+declare const CounterRenderer: import("svelte").Component<Props, {}, "">;
+type CounterRenderer = ReturnType<typeof CounterRenderer>;
+export default CounterRenderer;

package/dist/renderers/IconRenderer.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { IconElement } from '../types';
+	interface Props { element: IconElement; }
+	let { element }: Props = $props();
+
+	const svgMarkup = $derived(() => {
+		const fill = element.fillMode === 'fill' || element.fillMode === 'both' ? element.color : 'none';
+		const stroke = element.fillMode === 'stroke' || element.fillMode === 'both' ? element.color : 'none';
+		return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${fill}" stroke="${stroke}" stroke-width="${element.strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${element.svgContent}</svg>`;
+	});
+</script>
+
+<div class="icon-element">{@html svgMarkup()}</div>
+
+<style>
+	.icon-element { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
+	.icon-element :global(svg) { width: 100%; height: 100%; }
+</style>

package/dist/renderers/IconRenderer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { IconElement } from '../types';
+interface Props {
+    element: IconElement;
+}
+declare const IconRenderer: import("svelte").Component<Props, {}, "">;
+type IconRenderer = ReturnType<typeof IconRenderer>;
+export default IconRenderer;

package/dist/styles/presenter.css

@@ -0,0 +1,48 @@
+/* ───── Floating animations ───── */
+@keyframes float-vertical {
+	0%, 100% { translate: 0 0; }
+	50% { translate: 0 calc(-1 * var(--float-amp, 10px)); }
+}
+
+@keyframes float-horizontal {
+	0%, 100% { translate: 0 0; }
+	50% { translate: var(--float-amp, 10px) 0; }
+}
+
+@keyframes float-both-0 {
+	0%   { translate: 0 0; }
+	15%  { translate: calc(0.8 * var(--float-amp, 10px)) calc(-0.6 * var(--float-amp, 10px)); }
+	35%  { translate: calc(-0.4 * var(--float-amp, 10px)) calc(-1 * var(--float-amp, 10px)); }
+	55%  { translate: calc(-0.9 * var(--float-amp, 10px)) calc(0.3 * var(--float-amp, 10px)); }
+	75%  { translate: calc(0.3 * var(--float-amp, 10px)) calc(0.7 * var(--float-amp, 10px)); }
+	100% { translate: 0 0; }
+}
+
+@keyframes float-both-1 {
+	0%   { translate: 0 0; }
+	20%  { translate: calc(-0.7 * var(--float-amp, 10px)) calc(-0.8 * var(--float-amp, 10px)); }
+	40%  { translate: calc(0.5 * var(--float-amp, 10px)) calc(-0.3 * var(--float-amp, 10px)); }
+	60%  { translate: calc(0.9 * var(--float-amp, 10px)) calc(0.6 * var(--float-amp, 10px)); }
+	80%  { translate: calc(-0.4 * var(--float-amp, 10px)) calc(0.9 * var(--float-amp, 10px)); }
+	100% { translate: 0 0; }
+}
+
+@keyframes float-both-2 {
+	0%   { translate: 0 0; }
+	12%  { translate: calc(0.6 * var(--float-amp, 10px)) calc(0.5 * var(--float-amp, 10px)); }
+	30%  { translate: calc(1 * var(--float-amp, 10px)) calc(-0.4 * var(--float-amp, 10px)); }
+	50%  { translate: calc(-0.3 * var(--float-amp, 10px)) calc(-0.9 * var(--float-amp, 10px)); }
+	70%  { translate: calc(-0.8 * var(--float-amp, 10px)) calc(0.2 * var(--float-amp, 10px)); }
+	88%  { translate: calc(0.2 * var(--float-amp, 10px)) calc(0.8 * var(--float-amp, 10px)); }
+	100% { translate: 0 0; }
+}
+
+@keyframes float-both-3 {
+	0%   { translate: 0 0; }
+	17%  { translate: calc(-0.9 * var(--float-amp, 10px)) calc(0.4 * var(--float-amp, 10px)); }
+	33%  { translate: calc(-0.5 * var(--float-amp, 10px)) calc(-0.7 * var(--float-amp, 10px)); }
+	50%  { translate: calc(0.7 * var(--float-amp, 10px)) calc(-0.9 * var(--float-amp, 10px)); }
+	67%  { translate: calc(0.9 * var(--float-amp, 10px)) calc(0.5 * var(--float-amp, 10px)); }
+	83%  { translate: calc(-0.2 * var(--float-amp, 10px)) calc(0.8 * var(--float-amp, 10px)); }
+	100% { translate: 0 0; }
+}