astro-magic-move 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-magic-move",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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

@@ -76,14 +76,30 @@ const stepsJson = JSON.stringify(compiledSteps);
 
 	class MagicMoveElement extends HTMLElement {
 		private renderer: MagicMoveRenderer | null = null;
-		private steps: any[] = [];
-		private currentStep = 0;
+		private _steps: any[] = [];
+		private _currentStep = 0;
+		private _animating = false;
+		private _pendingStep: number | null = null;
 		private observer: IntersectionObserver | null = null;
 
+		get step(): number {
+			return this._currentStep;
+		}
+
+		set step(value: number) {
+			const idx = Number(value);
+			if (Number.isNaN(idx)) return;
+			this.animateToStep(idx);
+		}
+
+		get totalSteps(): number {
+			return this._steps.length;
+		}
+
 		connectedCallback() {
 			const dataScript = this.querySelector('script[type="application/json"]');
 			if (!dataScript?.textContent) return;
-			this.steps = JSON.parse(dataScript.textContent);
+			this._steps = JSON.parse(dataScript.textContent);
 			dataScript.remove();
 
 			const container = this.querySelector("pre");
@@ -103,9 +119,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);
 		}
 
@@ -121,14 +140,14 @@ const stepsJson = JSON.stringify(compiledSteps);
 				case "click":
 					this.style.cursor = "pointer";
 					this.addEventListener("click", () => {
-						const next = (this.currentStep + 1) % this.steps.length;
+						const next = (this._currentStep + 1) % this._steps.length;
 						this.animateToStep(next);
 					});
 					break;
 				case "auto":
-					requestAnimationFrame(() => {
-						this.animateToStep(1);
-					});
+					requestAnimationFrame(() => this.autoPlay());
+					break;
+				case "none":
 					break;
 			}
 		}
@@ -146,19 +165,44 @@ const stepsJson = JSON.stringify(compiledSteps);
 			this.observer.observe(this);
 		}
 
+		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;
+			if (!this.renderer || stepIndex === this._currentStep) return;
+			if (stepIndex < 0 || stepIndex >= this._steps.length) return;
 
-			await this.renderer.render(this.steps[stepIndex]);
-			this.currentStep = stepIndex;
+			if (this._animating) {
+				this._pendingStep = stepIndex;
+				return;
+			}
 
-			this.dispatchEvent(
-				new CustomEvent("magic-move:step", {
-					detail: { step: stepIndex, total: this.steps.length },
-					bubbles: true,
-				}),
-			);
+			this._animating = true;
+			try {
+				await this.renderer.render(this._steps[stepIndex]);
+				this._currentStep = stepIndex;
+				this.dispatchEvent(
+					new CustomEvent("magic-move:step", {
+						detail: { step: stepIndex, total: this._steps.length },
+						bubbles: true,
+					}),
+				);
+			} finally {
+				this._animating = false;
+			}
+
+			if (this._pendingStep !== null) {
+				const next = this._pendingStep;
+				this._pendingStep = null;
+				this.animateToStep(next);
+			}
 		}
 	}
 

package/src/types.ts

@@ -20,8 +20,9 @@ export interface MagicMoveProps {
 	 * - `'scroll'`: animate when element enters viewport (default)
 	 * - `'click'`: toggle forward on click, wraps around
 	 * - `'auto'`: animate immediately when the element mounts
+	 * - `'none'`: no built-in trigger; control steps externally via the element's `step` property
 	 */
-	trigger?: "scroll" | "click" | "auto";
+	trigger?: "scroll" | "click" | "auto" | "none";
 
 	/** Animation duration in ms. Default: `800` */
 	duration?: number;