@motion-script/player 0.2.4 → 1.0.0

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKnE,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,+BAiBlG"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAKnE,wBAAgB,SAAS,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,aAAa,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,aAAa,CAAA;CAAE,+BAgBlG"}

package/dist/components/layout/scene-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scene-panel.d.ts","sourceRoot":"","sources":["../../../src/components/layout/scene-panel.tsx"],"names":[],"mappings":"AAMA,wBAAgB,UAAU,gCAkHzB"}
+{"version":3,"file":"scene-panel.d.ts","sourceRoot":"","sources":["../../../src/components/layout/scene-panel.tsx"],"names":[],"mappings":"AAMA,wBAAgB,UAAU,gCA8HzB"}

package/dist/components/timeline/constants.d.ts

@@ -9,6 +9,7 @@ export declare const RULER_HEIGHT = 28;
 export declare const SCENE_ROW_HEIGHT = 28;
 export declare const INDENT_PX = 16;
 export declare const BAR_PADDING_Y = 5;
+export declare const BAR_MARGIN_X = 2;
 export declare const FRAME_MODE_PX_THRESHOLD = 8;
 export declare const ROW_OVERSCAN = 4;
 //# sourceMappingURL=constants.d.ts.map

package/dist/components/timeline/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAC5C,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,eAAO,MAAM,aAAa,IAAI,CAAC;AAG/B,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAGzC,eAAO,MAAM,YAAY,IAAI,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,IAAI,CAAC;AACrC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAC5C,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B,eAAO,MAAM,aAAa,IAAI,CAAC;AAI/B,eAAO,MAAM,YAAY,IAAI,CAAC;AAG9B,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAGzC,eAAO,MAAM,YAAY,IAAI,CAAC"}

package/dist/components/timeline/timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.tsx"],"names":[],"mappings":"AAiCA,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,UAAgC,GACjC,EAAE,kBAAkB,+BAqgBpB"}
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.tsx"],"names":[],"mappings":"AAkCA,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,UAAgC,GACjC,EAAE,kBAAkB,+BAqgBpB"}

package/dist/motion-script-player.js

@@ -1563,6 +1563,17 @@ function resolveShadowArray(prop, previous) {
 }
 //#endregion
 //#region ../core/dist/attributes/shape/stroke/mapper.js
+/** Resolve a loose `align` prop to a clamped number in [-1, 1]. */
+function resolveStrokeAlign(align, fallback) {
+	if (align == null) return fallback;
+	if (typeof align === "number") return Math.max(-1, Math.min(1, align));
+	switch (align) {
+		case "inside": return -1;
+		case "center": return 0;
+		case "outside": return 1;
+	}
+	return fallback;
+}
 function resolveStroke(prop, previous) {
 	let dash;
 	if (prop.dash != null) {
@@ -1573,7 +1584,8 @@ function resolveStroke(prop, previous) {
 		weight: prop.weight ?? previous?.weight ?? 1,
 		fill: prop.fill != null ? resolveFill(prop.fill) : previous?.fill ?? resolveFill("transparent"),
 		dash,
-		dashOffset: prop.dashOffset ?? previous?.dashOffset ?? 0
+		dashOffset: prop.dashOffset ?? previous?.dashOffset ?? 0,
+		align: resolveStrokeAlign(prop.align, previous?.align ?? -1)
 	};
 }
 function resolveStrokeArray(prop, previous) {
@@ -2125,6 +2137,10 @@ var AssetManager = class {
 	lastAudioRequestKey = "";
 	lastAudioSrcs = /* @__PURE__ */ new Set();
 	audioFetching = /* @__PURE__ */ new Map();
+	/** Disposers for loaders whose load has resolved, keyed by loader key. */
+	loaderDisposers = /* @__PURE__ */ new Map();
+	/** In-flight loader runs, keyed by loader key, to dedupe concurrent calls. */
+	loaderInFlight = /* @__PURE__ */ new Map();
 	constructor(precomp, storageAdapter, audioDevice) {
 		this.precomp = precomp;
 		this.storageAdapter = storageAdapter;
@@ -2136,7 +2152,14 @@ var AssetManager = class {
 	*/
 	async loadAt(frame) {
 		const jobs = [];
-		for (const [key, track] of this.precomp.assets) if (track.cacheAt <= frame && track.record.endFrame >= frame) jobs.push(this.storageAdapter.loadAsset(key, track.record));
+		for (const [key, track] of this.precomp.assets) {
+			if (track.record.type === "loader") {
+				const job = this.syncLoader(key, track, frame);
+				if (job) jobs.push(job);
+				continue;
+			}
+			if (track.cacheAt <= frame && track.record.endFrame >= frame) jobs.push(this.storageAdapter.loadAsset(key, track.record));
+		}
 		await Promise.all(jobs);
 		this.syncAudio(frame);
 	}
@@ -2145,9 +2168,54 @@ var AssetManager = class {
 	* loads for assets whose cacheAt window has been reached without blocking.
 	*/
 	prefetch(frame) {
-		for (const [key, track] of this.precomp.assets) if (track.cacheAt <= frame && track.record.endFrame >= frame) this.storageAdapter.loadAsset(key, track.record).catch((err) => {
-			console.error(`[AssetManager] prefetch failed for ${key}:`, err);
+		for (const [key, track] of this.precomp.assets) {
+			if (track.record.type === "loader") {
+				this.syncLoader(key, track, frame)?.catch((err) => {
+					console.error(`[AssetManager] loader failed for ${key}:`, err);
+				});
+				continue;
+			}
+			if (track.cacheAt <= frame && track.record.endFrame >= frame) this.storageAdapter.loadAsset(key, track.record).catch((err) => {
+				console.error(`[AssetManager] prefetch failed for ${key}:`, err);
+			});
+		}
+	}
+	/**
+	* Drive a single loader track toward the state `frame` requires. If `frame`
+	* is inside the loader's `[cacheAt, discardAt]` window, run its callback
+	* (deduped — at most one in-flight run, skipped once loaded) and return the
+	* pending job, if any. If `frame` is outside the window and the loader was
+	* loaded, dispose it. Returns the in-flight load promise so a blocking
+	* caller can await it; `undefined` when there's nothing to wait for.
+	*/
+	syncLoader(key, track, frame) {
+		if (track.record.type !== "loader") return void 0;
+		const discardAt = track.discardAt ?? Infinity;
+		if (!(track.cacheAt <= frame && frame <= discardAt)) {
+			const dispose = this.loaderDisposers.get(key);
+			if (dispose) {
+				this.loaderDisposers.delete(key);
+				dispose();
+			}
+			return;
+		}
+		if (this.loaderDisposers.has(key)) return void 0;
+		const existing = this.loaderInFlight.get(key);
+		if (existing) return existing;
+		const load = track.record.load;
+		const job = load().then((disposer) => {
+			this.loaderDisposers.set(key, disposer);
+		}).finally(() => {
+			this.loaderInFlight.delete(key);
 		});
+		this.loaderInFlight.set(key, job);
+		return job;
+	}
+	/** Run every outstanding loader disposer and clear loader state. */
+	dispose() {
+		for (const dispose of this.loaderDisposers.values()) dispose();
+		this.loaderDisposers.clear();
+		this.loaderInFlight.clear();
 	}
 	/**
 	* Push the current audio working set to the AudioDevice. Called after each
@@ -2372,21 +2440,29 @@ var AssetTracker = class {
 	get catalog() {
 		return this._catalog;
 	}
-	/** Registers an arbitrary async loader to be awaited during the next load pass. */
-	requestLoader(fn) {
-		this.loaders.push(fn);
+	/**
+	* Register an opaque async loader needed at the current frame, tracked on the
+	* timeline by `key` so the {@link AssetManager} runs it once its cache window
+	* opens and disposes it when the window closes. Deduped by `key` (like
+	* {@link requestFont} by family): the first registration's `load` callback is
+	* kept and its frame range extends as later frames re-request the same key.
+	*/
+	requestLoader(key, load) {
+		this.upsertAsset(key, (frame) => ({
+			type: "loader",
+			src: key,
+			startFrame: frame,
+			endFrame: frame,
+			load
+		}));
 	}
 	/** Pending requests collected during the current frame's load pass. */
 	requestedAssets = /* @__PURE__ */ new Map();
-	loaders = [];
 	_audioRequests = [];
 	_audioIds = /* @__PURE__ */ new Set();
 	get assets() {
 		return this.requestedAssets;
 	}
-	get pendingLoaders() {
-		return this.loaders;
-	}
 	get audioRequests() {
 		return this._audioRequests;
 	}
@@ -2519,17 +2595,15 @@ var AssetTracker = class {
 	discardOutside(startFrame, endFrame) {
 		for (const [key, entry] of this.requestedAssets) if (entry.endFrame < startFrame || entry.startFrame > endFrame) this.requestedAssets.delete(key);
 	}
-	/** Clear all tracked entries and pending loaders without releasing the instance. */
+	/** Clear all tracked entries (including loaders) without releasing the instance. */
 	clear() {
 		this.requestedAssets.clear();
-		this.loaders.length = 0;
 		this._audioRequests.length = 0;
 		this._audioIds.clear();
 	}
 	/** Release all state; the instance should not be used after this call. */
 	dispose() {
 		this.requestedAssets.clear();
-		this.loaders.length = 0;
 		this._audioRequests.length = 0;
 		this._audioIds.clear();
 	}
@@ -2717,6 +2791,13 @@ function buildAssetMap(registry, fps) {
 				discardAt: null
 			});
 			break;
+		case "loader":
+			out.set(key, {
+				record: entry,
+				cacheAt: Math.max(0, entry.startFrame - MAX_LEAD),
+				discardAt: entry.endFrame + TAIL_FRAMES
+			});
+			break;
 	}
 	return out;
 }
@@ -2745,6 +2826,8 @@ var PlaybackController = class {
 	stateEvaluator;
 	assetManager;
 	audioDevice;
+	/** Set by dispose(); once true the controller must never touch its (now-freed) render context again. */
+	disposed = false;
 	fps;
 	viewport;
 	precomp;
@@ -2787,6 +2870,7 @@ var PlaybackController = class {
 			const frame = this.fps * currentTime;
 			if (frame >= this.totalFrames) this.masterClock.pause();
 			await this.assetManager.loadAt(frame);
+			if (this.disposed) return;
 			this.audioDevice.syncTo(currentTime);
 			this.renderAt(frame);
 			this.assetManager.prefetch(frame);
@@ -2821,6 +2905,7 @@ var PlaybackController = class {
 	* `screenshot` to ensure the surface is up-to-date.
 	*/
 	renderAt(frame) {
+		if (this.disposed) return;
 		this.stateEvaluator.stateAt(frame);
 		this.stateEvaluator.layout(this.measureScope);
 		this.renderContext.render(() => {
@@ -2832,10 +2917,12 @@ var PlaybackController = class {
 	* load before rendering, then prefetches upcoming frames.
 	*/
 	async seek(frame) {
+		if (this.disposed) return;
 		const clamped = Math.max(0, Math.min(frame, this.totalFrames));
 		this.masterClock.pause();
 		this.masterClock.seek(clamped / this.fps);
 		await this.assetManager.loadAt(clamped);
+		if (this.disposed) return;
 		this.renderAt(clamped);
 		this.assetManager.prefetch(clamped);
 	}
@@ -2897,9 +2984,11 @@ var PlaybackController = class {
 		this.audioDevice.setMuted(muted);
 	}
 	dispose() {
+		this.disposed = true;
 		this.masterClock.dispose();
 		this.audioDevice.dispose();
 		this.stateEvaluator.dispose();
+		this.assetManager.dispose();
 	}
 };
 function nodeToTreeState(node, path, lifespans, sceneStart = 0) {
@@ -3084,6 +3173,7 @@ var StorageAdapter = class {
 				break;
 			}
 			case "audio": break;
+			case "loader": throw new Error("Loader records must not be routed through StorageAdapter.loadAsset");
 			default: throw new Error(`Unsupported asset type: ${value.type}`);
 		}
 		this.cachedAssets.add(key);
@@ -3288,7 +3378,8 @@ function layoutParagraph(canvasKit, fontMgr, segments, opts) {
 	const paragraph = builder.build();
 	const wrapping = isFinite(opts.maxWidth) && opts.maxWidth > 0;
 	paragraph.layout(wrapping ? opts.maxWidth : 1e7);
-	const layoutWidth = wrapping ? opts.maxWidth : Math.ceil(paragraph.getMaxIntrinsicWidth()) + 1;
+	const intrinsicWidth = Math.ceil(paragraph.getMaxIntrinsicWidth()) + 1;
+	const layoutWidth = wrapping ? opts.maxWidth : Math.max(intrinsicWidth, opts.boxWidth ?? 0);
 	paragraph.layout(layoutWidth);
 	const blockWidth = paragraph.getLongestLine();
 	const blockHeight = paragraph.getHeight();
@@ -3381,6 +3472,7 @@ function layoutRichText(canvasKit, fontMgr, state) {
 		align,
 		lineHeight,
 		maxWidth: width > 0 ? width : Infinity,
+		boxWidth: width,
 		originX: 0,
 		originY: 0
 	});
@@ -3983,7 +4075,7 @@ function computeImageMatrix(imgW, imgH, fill, bounds) {
 		return fill.transform.flat();
 	}
 	if (bounds) {
-		const mode = fill.mode ?? "fill";
+		const mode = fill.mode ?? "fit";
 		const shapeW = bounds.right - bounds.left;
 		const shapeH = bounds.bottom - bounds.top;
 		let sx, sy, tx, ty;
@@ -4037,7 +4129,7 @@ function computeImageMatrix(imgW, imgH, fill, bounds) {
 }
 /** Shared image-shader builder used by both image and video renderers. */
 function makeImageShader(img, fill, ck, bounds) {
-	const mode = fill.mode ?? "fill";
+	const mode = fill.mode ?? "fit";
 	const tileMode = mode === "tile" ? ck.TileMode.Repeat : mode === "fit" ? ck.TileMode.Decal : ck.TileMode.Clamp;
 	const matrix = computeImageMatrix(img.width(), img.height(), fill, bounds);
 	return img.makeShaderOptions(tileMode, tileMode, ck.FilterMode.Linear, ck.MipmapMode.None, matrix);
@@ -6221,10 +6313,11 @@ var StrokeHandler = class {
 		}
 		const hasDash = !!(stroke.dash && stroke.dash.length > 0);
 		const dashFit = hasDash && shape.ckPath ? this.measureDashFit(shape.ckPath, stroke.dash) : null;
+		const align = stroke.align ?? 0;
 		if (intDeviceWidth > 0 && shape.ckPath) {
 			const source = hasDash ? this.buildDashedPath(shape.ckPath, stroke.dash, stroke.dashOffset ?? 0, dashFit ?? void 0) : shape.ckPath;
 			if (source) {
-				const filled = source.makeStroked({ width: logicalWidth });
+				const filled = this.alignedStrokeBand(source, logicalWidth, align, shape.ckPath);
 				if (source !== shape.ckPath) source.delete();
 				if (filled) {
 					paint.setStyle(this.canvasKit.PaintStyle.Fill);
@@ -6235,11 +6328,22 @@ var StrokeHandler = class {
 				}
 			}
 		}
+		if (align !== 0 && !hasDash && shape.ckPath) {
+			const band = this.alignedStrokeBand(shape.ckPath, logicalWidth, align, shape.ckPath);
+			if (band) {
+				paint.setStyle(this.canvasKit.PaintStyle.Fill);
+				canvas.drawPath(band, paint);
+				paint.setStyle(this.canvasKit.PaintStyle.Stroke);
+				band.delete();
+				return;
+			}
+		}
 		if (hasDash && shape.ckPath) {
 			const effect = this.makeUniformDashEffect(shape.ckPath, stroke.dash, stroke.dashOffset ?? 0, dashFit ?? void 0);
 			if (effect) {
 				paint.setPathEffect(effect);
-				canvas.drawPath(shape.ckPath, paint);
+				if (align !== 0 && intDeviceWidth <= 0 && this.isClosedPath(shape.ckPath)) this.drawAlignedDashedStroke(canvas, paint, shape.ckPath, align);
+				else canvas.drawPath(shape.ckPath, paint);
 				paint.setPathEffect(null);
 				effect.delete();
 				return;
@@ -6247,6 +6351,42 @@ var StrokeHandler = class {
 		}
 		shape.draw(paint);
 	}
+	alignedStrokeBand(source, width, align, interior) {
+		if (align === 0 || !this.isClosedPath(interior)) return source.makeStroked({ width });
+		const widened = width * (1 + Math.abs(align));
+		const band = source.makeStroked({ width: widened });
+		if (!band) return null;
+		const op = align < 0 ? this.canvasKit.PathOp.Intersect : this.canvasKit.PathOp.Difference;
+		const clipped = this.canvasKit.Path.MakeFromOp(band, interior, op);
+		band.delete();
+		return clipped;
+	}
+	isClosedPath(path) {
+		const iter = new this.canvasKit.ContourMeasureIter(path, false, 1);
+		let contour = iter.next();
+		if (!contour) {
+			iter.delete();
+			return false;
+		}
+		let allClosed = true;
+		while (contour) {
+			if (!contour.isClosed()) allClosed = false;
+			contour.delete();
+			contour = iter.next();
+		}
+		iter.delete();
+		return allClosed;
+	}
+	drawAlignedDashedStroke(canvas, paint, interior, align) {
+		canvas.save();
+		const baseWidth = paint.getStrokeWidth();
+		paint.setStrokeWidth(baseWidth * 2);
+		const op = align < 0 ? this.canvasKit.ClipOp.Intersect : this.canvasKit.ClipOp.Difference;
+		canvas.clipPath(interior, op, true);
+		canvas.drawPath(interior, paint);
+		canvas.restore();
+		paint.setStrokeWidth(baseWidth);
+	}
 	drawTextUnionStroke(canvas, paint, shape, stroke, logicalWidth) {
 		const hasDash = !!(stroke.dash && stroke.dash.length > 0);
 		let dashEffect = null;
@@ -6372,6 +6512,7 @@ function buildText(canvasKit, canvas, fontMgr, state) {
 		align: fullState.align,
 		lineHeight: fullState.lineHeight,
 		maxWidth: wrap ? fullState.width : Infinity,
+		boxWidth: fullState.width,
 		originX: x,
 		originY: y
 	});
@@ -6749,10 +6890,8 @@ var ShapeHandler = class {
 				});
 			}
 		}
-		if (!isolated) {
-			shape.ensurePath();
-			if (shape.ckPath) this.boolean.contributeToPathCollection(shape.ckPath);
-		}
+		shape.ensurePath();
+		if (!isolated && shape.ckPath) this.boolean.contributeToPathCollection(shape.ckPath);
 		this.shapes.push(shape.toCurrentShape(isolated));
 	}
 	rect(state) {
@@ -7059,6 +7198,7 @@ var WebRenderContext = class extends RenderContext {
 	}
 	pixelRatio = 1;
 	renderPass(callback) {
+		if (!this.mounted || !this.surface) return;
 		this.currentCanvas = this.surface.getCanvas();
 		this.currentCanvas.clear(this.canvasKit.BLACK);
 		this.currentCanvas.save();
@@ -7824,6 +7964,10 @@ var WebImagePaintContext = class {
 };
 //#endregion
 //#region ../web/dist/storage-adapter.js
+/** Whether a src points at an SVG (by extension, ignoring any query/hash). */
+function isSvgSrc(src) {
+	return /\.svg(?:[?#]|$)/i.test(src);
+}
 /**
 * Browser implementation of {@link StorageAdapter} — owns all async asset
 * decoding (images, video, audio, fonts) so the render loop can stay
@@ -7863,9 +8007,19 @@ var WebStorageAdapter = class extends StorageAdapter {
 	getCanvasKit() {
 		return this.canvasKit;
 	}
-	/** Fetches and decodes `src`, optionally downscaled to the on-screen target size, caching raw RGBA pixels for later upload via {@link getCKImage}. No-op if already cached. */
+	/**
+	* Fetches and decodes `src` to RGBA pixels (cached for later GPU upload via
+	* {@link getCKImage}), no-op if already cached. SVGs are rasterized at the
+	* on-screen target size so they stay crisp when scaled up (see
+	* {@link rasterizeSvg}); raster formats decode via `createImageBitmap`,
+	* downscaled to target when that saves memory.
+	*/
 	async loadImage(src, width, height) {
 		if (this.imagePixels.has(src)) return;
+		if (isSvgSrc(src)) {
+			this.imagePixels.set(src, await this.rasterizeSvg(src, width, height));
+			return;
+		}
 		const target = this.imageTargetPixels(src, width, height);
 		const blob = await (await fetch(src)).blob();
 		const bitmap = target ? await createImageBitmap(blob, {
@@ -7888,6 +8042,35 @@ var WebStorageAdapter = class extends StorageAdapter {
 			pixels: new Uint8Array(data)
 		});
 	}
+	/**
+	* Rasterize an SVG to RGBA pixels. Unlike raster formats, SVG is vector, so
+	* we render it at the size it's *drawn* on screen rather than its nominal
+	* `viewBox` size — a 48×48 logo placed in a 512px box must rasterize at
+	* ~512px (× devicePixelRatio) to stay sharp. `createImageBitmap` can't
+	* decode SVG reliably across browsers (Chrome throws on an SVG Blob), so we
+	* decode through an `HTMLImageElement`, which every browser supports.
+	*/
+	async rasterizeSvg(src, width, height) {
+		const text = await (await fetch(src)).text();
+		const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(text)}`;
+		const img = new Image();
+		img.decoding = "sync";
+		await new Promise((resolve, reject) => {
+			img.onload = () => resolve();
+			img.onerror = () => reject(/* @__PURE__ */ new Error(`loadImage(${src}): failed to decode SVG`));
+			img.src = url;
+		});
+		const target = this.svgTargetPixels(width, height, img.naturalWidth, img.naturalHeight);
+		const ctx = new OffscreenCanvas(target.width, target.height).getContext("2d", { willReadFrequently: true });
+		if (!ctx) throw new Error(`loadImage(${src}): could not get 2d context`);
+		ctx.drawImage(img, 0, 0, target.width, target.height);
+		const data = ctx.getImageData(0, 0, target.width, target.height).data;
+		return {
+			width: target.width,
+			height: target.height,
+			pixels: new Uint8Array(data)
+		};
+	}
 	imageTargetPixels(src, width, height) {
 		let meta;
 		try {
@@ -7908,6 +8091,33 @@ var WebStorageAdapter = class extends StorageAdapter {
 			height: Math.max(1, Math.round(meta.height * ratio))
 		};
 	}
+	/**
+	* Pick the raster size for an SVG, *preserving its intrinsic aspect ratio*.
+	* The decoded image must keep the SVG's true proportions so the downstream
+	* fit/crop/fill shader matrix (see computeImageMatrix) can position it like
+	* any raster image — if we instead stretched the SVG to the layout box here,
+	* its aspect ratio would already be baked in and `fit` would be a no-op.
+	*
+	* We compute one uniform scale: how big the SVG renders on screen (the
+	* larger of the box's two dimensions, since `fit` may letterbox but `crop`
+	* may overflow), times devicePixelRatio so it stays sharp when zoomed in,
+	* clamped to the viewport so a huge box can't blow up memory. That factor is
+	* applied to the intrinsic width/height, keeping proportions intact.
+	*/
+	svgTargetPixels(width, height, naturalWidth, naturalHeight) {
+		const intrinsicW = naturalWidth > 0 ? naturalWidth : 300;
+		const intrinsicH = naturalHeight > 0 ? naturalHeight : 300;
+		const dpr = typeof devicePixelRatio === "number" && devicePixelRatio > 0 ? devicePixelRatio : 1;
+		const boxW = width > 0 ? Math.min(width, this.viewport.width) : 0;
+		const boxH = height > 0 ? Math.min(height, this.viewport.height) : 0;
+		const onScreen = Math.max(boxW, boxH);
+		const longestIntrinsic = Math.max(intrinsicW, intrinsicH);
+		const scale = onScreen > 0 ? onScreen * dpr / longestIntrinsic : 1;
+		return {
+			width: Math.max(1, Math.round(intrinsicW * scale)),
+			height: Math.max(1, Math.round(intrinsicH * scale))
+		};
+	}
 	/** Lazily uploads cached pixels for `url` to a GPU-resident CanvasKit image, memoizing the result; returns null until {@link loadImage} has completed. */
 	getCKImage(url) {
 		const cached = this.imagePixels.get(url);
@@ -37249,8 +37459,8 @@ function TrackRows({ nodes, window, fullContentWidth, effectiveScrollLeft, paddi
 							children: node.waveform.map((clip, ci) => {
 								const startFrame = sceneOffset + clip.startTime * fps;
 								const endFrame = clip.endTime != null ? sceneOffset + clip.endTime * fps : totalFrameCount;
-								const startPx = paddingX + startFrame * computedPxPerUnit;
-								const barWidth = Math.max(4, (endFrame - startFrame) * computedPxPerUnit);
+								const startPx = paddingX + startFrame * computedPxPerUnit + 2;
+								const barWidth = Math.max(4, (endFrame - startFrame) * computedPxPerUnit - 4);
 								return /* @__PURE__ */ jsx("div", {
 									className: "absolute rounded-xs overflow-hidden bg-card",
 									style: {
@@ -37273,8 +37483,8 @@ function TrackRows({ nodes, window, fullContentWidth, effectiveScrollLeft, paddi
 					const hasSpan = node.startFrame != null && node.endFrame != null;
 					const spanStart = hasSpan ? node.startFrame : 0;
 					const spanFrames = hasSpan ? node.endFrame - node.startFrame + 1 : totalFrameCount;
-					const startPx = paddingX + spanStart * computedPxPerUnit;
-					const barWidth = Math.max(4, spanFrames * computedPxPerUnit);
+					const startPx = paddingX + spanStart * computedPxPerUnit + 2;
+					const barWidth = Math.max(4, spanFrames * computedPxPerUnit - 4);
 					return /* @__PURE__ */ jsx("div", {
 						className: "border-b border-border/40",
 						style: {
@@ -37715,12 +37925,12 @@ function TimelineRuler({ width, minorTicks = 0 }) {
 								const endFrame = sceneStartFrames[i + 1] ?? totalFrameCount;
 								const isActive = i === activeSceneIndex;
 								const sceneName = scenes[i]?.name ?? `Scene ${i + 1}`;
-								const barWidth = Math.max(4, (endFrame - startFrame) * computedPxPerUnit);
+								const barWidth = Math.max(4, (endFrame - startFrame) * computedPxPerUnit - 4);
 								return /* @__PURE__ */ jsx("div", {
 									title: sceneName,
 									className: `group/scenebar absolute rounded-xs overflow-hidden flex items-center px-1.5 ${isActive ? "bg-primary/70" : "bg-card"}`,
 									style: {
-										left: paddingX + startFrame * computedPxPerUnit - effectiveScrollLeft,
+										left: paddingX + startFrame * computedPxPerUnit - effectiveScrollLeft + 2,
 										top: 5,
 										width: barWidth,
 										height: 18
@@ -38338,6 +38548,28 @@ function ScenePanel() {
 					className: "hover:underline",
 					children: "Documentation"
 				})]
+			}),
+			/* @__PURE__ */ jsxs("a", {
+				href: "https://github.com/motion-script/motion-script/issues",
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: "flex items-center gap-2.5 px-3 py-3 border-t shrink-0 text-sm font-medium text-muted-foreground bg-muted/30 hover:bg-muted/50 hover:text-foreground transition-colors",
+				children: [/* @__PURE__ */ jsx("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					strokeWidth: 1.5,
+					stroke: "currentColor",
+					className: "size-6 shrink-0",
+					children: /* @__PURE__ */ jsx("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "hover:underline",
+					children: "Report New Issue"
+				})]
 			})
 		]
 	}), /* @__PURE__ */ jsx(ErrorsDialog, {