astro-magic-move 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-magic-move",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Animated code morphing for Astro, powered by Shiki Magic Move. Build-time tokenization, zero-framework client JS, CSS-variable theming.",
   "type": "module",
   "license": "MIT",
@@ -34,4 +34,4 @@
     "shiki": "^3.0.0",
     "shiki-magic-move": "^1.3.0"
   }
-}
+}

package/src/MagicMove.astro

@@ -1,8 +1,8 @@
 ---
-import type { MagicMoveProps } from "./types";
-import { cssVarTheme } from "./theme";
 import { createHighlighter, type HighlighterGeneric } from "shiki";
 import { codeToKeyedTokens, createMagicMoveMachine } from "shiki-magic-move/core";
+import { cssVarTheme } from "./theme";
+import type { MagicMoveProps } from "./types";
 
 interface Props extends MagicMoveProps {}
 
@@ -29,15 +29,14 @@ if (stepsProp) {
 } else if (before != null && after != null) {
 	steps = [before, after];
 } else {
-	throw new Error(
-		"[astro-magic-move] Provide either `before` + `after` or `steps` (min 2 items).",
-	);
+	throw new Error("[astro-magic-move] Provide either `before` + `after` or `steps` (min 2 items).");
 }
 
 // Module-level highlighter cache (survives HMR via globalThis)
 const CACHE_KEY = "__astro_magic_move_hl";
 type HLCache = Map<string, HighlighterGeneric<string, string>>;
-const hlCache: HLCache = ((globalThis as Record<string, unknown>)[CACHE_KEY] ??= new Map()) as HLCache;
+const hlCache: HLCache = ((globalThis as Record<string, unknown>)[CACHE_KEY] ??=
+	new Map()) as HLCache;
 
 let highlighter = hlCache.get(lang);
 if (!highlighter) {
@@ -50,8 +49,7 @@ if (!highlighter) {
 
 // Build the magic move machine and compile all steps at build time
 const machine = createMagicMoveMachine(
-	(code) =>
-		codeToKeyedTokens(highlighter, code, { lang, theme: "css-variables" }, lineNumbers),
+	(code) => codeToKeyedTokens(highlighter, code, { lang, theme: "css-variables" }, lineNumbers),
 	{},
 );
 
@@ -105,9 +103,12 @@ const stepsJson = JSON.stringify(compiledSteps);
 				animateContainer: true,
 			});
 
-			// replace() for instant initial display (no animation, no empty frame)
-			this.renderer.replace(this.steps[0]);
-			this.currentStep = 0;
+			if (trigger === "auto") {
+				this.currentStep = -1;
+			} else {
+				this.renderer.replace(this.steps[0]);
+				this.currentStep = 0;
+			}
 			this.setupTrigger(trigger, threshold);
 		}
 
@@ -128,9 +129,7 @@ const stepsJson = JSON.stringify(compiledSteps);
 					});
 					break;
 				case "auto":
-					requestAnimationFrame(() => {
-						this.animateToStep(1);
-					});
+					requestAnimationFrame(() => this.autoPlay());
 					break;
 			}
 		}
@@ -148,7 +147,17 @@ const stepsJson = JSON.stringify(compiledSteps);
 			this.observer.observe(this);
 		}
 
-		private async animateToStep(stepIndex: number) {
+		private async autoPlay() {
+				const duration = Number(this.dataset.duration ?? 800);
+				for (let i = 0; i < this.steps.length; i++) {
+					await this.animateToStep(i);
+					if (i < this.steps.length - 1) {
+						await new Promise((r) => setTimeout(r, duration + 200));
+					}
+				}
+			}
+
+			private async animateToStep(stepIndex: number) {
 			if (!this.renderer || stepIndex === this.currentStep) return;
 			if (stepIndex < 0 || stepIndex >= this.steps.length) return;
 

package/styles/magic-move.css

@@ -11,10 +11,11 @@ magic-move {
 	margin: 0;
 	overflow-x: auto;
 	overflow-y: hidden;
-	padding: 1rem 1.25rem;
-	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-		"Liberation Mono", "Courier New", monospace;
-	font-size: 0.875rem;
+	padding: 0.75rem 1rem;
+	font-family:
+		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+		monospace;
+	font-size: clamp(0.75rem, 2vw, 0.875rem);
 	line-height: 1.7;
 	text-align: left;
 	background: var(--shiki-background, #1e1e1e);