astro-magic-move 0.1.2 → 0.2.1

package/package.json

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

package/src/MagicMove.astro

@@ -16,6 +16,7 @@ const {
 	stagger = 0.3,
 	threshold = 0.4,
 	lineNumbers = false,
+	minLines,
 	class: className,
 } = Astro.props;
 
@@ -66,6 +67,7 @@ const stepsJson = JSON.stringify(compiledSteps);
 	data-threshold={threshold}
 	data-lang={lang}
 	{...(lineNumbers ? { "data-line-numbers": "" } : {})}
+	{...(minLines ? { style: `--min-lines: ${minLines}` } : {})}
 >
 	<pre class="shiki-magic-move-container"><code>{steps[0]}</code></pre>
 	<script is:inline type="application/json" set:html={stepsJson} />
@@ -76,14 +78,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");
@@ -104,10 +122,10 @@ const stepsJson = JSON.stringify(compiledSteps);
 			});
 
 			if (trigger === "auto") {
-				this.currentStep = -1;
+				this._currentStep = -1;
 			} else {
-				this.renderer.replace(this.steps[0]);
-				this.currentStep = 0;
+				this.renderer.replace(this._steps[0]);
+				this._currentStep = 0;
 			}
 			this.setupTrigger(trigger, threshold);
 		}
@@ -124,13 +142,15 @@ 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.autoPlay());
 					break;
+				case "none":
+					break;
 			}
 		}
 
@@ -148,28 +168,43 @@ const stepsJson = JSON.stringify(compiledSteps);
 		}
 
 		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));
-					}
+			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;
+		private async animateToStep(stepIndex: number) {
+			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;
@@ -38,6 +39,12 @@ export interface MagicMoveProps {
 	/** Whether to animate line numbers. Default: `false` */
 	lineNumbers?: boolean;
 
+	/**
+	 * Minimum height expressed as a number of lines.
+	 * Prevents layout shift when stepping between code blocks of different lengths.
+	 */
+	minLines?: number;
+
 	/**
 	 * CSS class(es) applied to the outer `<magic-move>` element.
 	 * Use this for all visual styling (bg, border, rounded, shadow, padding, width, etc).

package/styles/magic-move.css

@@ -21,4 +21,5 @@ magic-move {
 	background: var(--shiki-background, #1e1e1e);
 	color: var(--shiki-foreground, #d4d4d4);
 	scrollbar-width: thin;
+	min-height: calc(1.5rem + var(--min-lines, 0) * 1.7em);
 }