@omnimedia/omnitool 1.1.0-1 → 1.1.0-100

package/x/demo/demo.css

@@ -1,11 +1,16 @@
 
-@layer vars, basics, page;
+@layer vars, basics, page, demo;
 
 @layer vars {
 	:root {
-		--link: cyan;
-		--color: #fffa;
-		--background: #111;
+		--ink: #f2f4f8;
+		--muted: #9fb0c3;
+		--surface: #0f141c;
+		--panel: #121a26;
+		--accent: #2cffd7;
+		--accent-2: #ff9a3c;
+		--border: color-mix(in oklab, #ffffff 10%, transparent);
+		--shadow: 0 20px 60px #00000066;
 	}
 }
 
@@ -20,16 +25,20 @@
 @layer page {
 	html {
 		font-size: 10px;
-		color: var(--color);
-		background: var(--background);
+		color: var(--ink);
+		background:
+			radial-gradient(1200px 600px at 10% -10%, #1f314e 0%, transparent 60%),
+			radial-gradient(800px 500px at 90% -20%, #2a1f4e 0%, transparent 55%),
+			linear-gradient(160deg, #0a0f16 0%, #0b1018 45%, #0b0f14 100%);
+		font-family: "Space Grotesk", system-ui, sans-serif;
 	}
 
 	body {
-		padding: 2em;
+		padding: 3.2em;
 	}
 
 	.results {
-		margin-top: 1em;
+		margin-top: 2em;
 
 		display: flex;
 		flex-direction: column;
@@ -37,8 +46,10 @@
 
 		> div {
 			font-size: 1.5em;
-			border: 1px solid color-mix(in lch, transparent, var(--color) 20%);
+			border: 1px solid var(--border);
 			padding: 1em;
+			background: var(--panel);
+			box-shadow: var(--shadow);
 		}
 
 		canvas {
@@ -46,9 +57,233 @@
 		}
 	}
 
-	#filmstrip {
+}
+
+@layer demo {
+	.hero {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 2em;
+		margin-bottom: 2.4em;
+	}
+
+	.hero h1 {
+		font-family: "Share Tech", system-ui, sans-serif;
+		font-size: 3.4em;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+
+	.hero h1 small {
+		font-size: 0.5em;
+		color: var(--muted);
+	}
+
+	.hero p {
+		font-size: 1.4em;
+		color: var(--muted);
+		margin-top: 0.6em;
+		max-width: 60ch;
+	}
+
+	.demo-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+		gap: 1.8em;
+		margin-bottom: 2.4em;
+	}
+
+	.demo-card {
+		background: linear-gradient(160deg, #111a25 0%, #0f1620 60%, #0d121a 100%);
+		border: 1px solid var(--border);
+		border-radius: 16px;
+		padding: 1.6em;
+		box-shadow: var(--shadow);
+		display: grid;
+		gap: 1.2em;
+	}
+
+	.demo-card h2 {
+		font-size: 1.8em;
+		letter-spacing: 0.03em;
+	}
+
+	.demo-card p {
+		color: var(--muted);
+		font-size: 1.2em;
+	}
+
+	.demo-controls {
+		display: grid;
+		gap: 0.8em;
+	}
+
+	.demo-progress {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+		gap: 0.8em;
+		font-size: 1.1em;
+		color: var(--muted);
+	}
+
+	.demo-progress .status {
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		font-size: 0.9em;
+	}
+
+	progress.progress {
+		width: 100%;
+		height: 10px;
+		border-radius: 999px;
+		overflow: hidden;
+		background: #0b1118;
+		border: 1px solid var(--border);
+	}
+
+	progress.progress::-webkit-progress-bar {
+		background: #0b1118;
+	}
+
+	progress.progress::-webkit-progress-value {
+		background: linear-gradient(120deg, var(--accent), #4df1ff);
+	}
+
+	progress.progress::-moz-progress-bar {
+		background: linear-gradient(120deg, var(--accent), #4df1ff);
+	}
+
+	.demo-preview {
+		border: 1px solid var(--border);
+		border-radius: 12px;
+		min-height: 160px;
+		background: #0b1118;
+		display: grid;
+		place-items: center;
+		overflow: hidden;
+	}
+
+	.demo-preview canvas {
+		width: 100%;
+		height: auto;
+	}
+
+	.filmstrip-controls,
+	.waveform-controls {
+		display: grid;
+		gap: 0.6em;
+		font-size: 1.1em;
+		color: var(--muted);
+	}
+
+	.filmstrip-controls input[type="range"],
+	.waveform-controls input[type="range"] {
+		width: 100%;
+	}
+
+	input[type="file"] {
+		background: #0b111a;
+		color: var(--ink);
+		border: 1px dashed #2b3b52;
+		border-radius: 10px;
+		padding: 0.8em;
+		font-size: 1.2em;
+	}
+
+	button {
+		background: linear-gradient(120deg, var(--accent), #4df1ff);
+		border: none;
+		color: #0a0f14;
+		font-weight: 600;
+		letter-spacing: 0.03em;
+		border-radius: 10px;
+		padding: 0.8em 1.2em;
+		cursor: pointer;
+		transition: transform 120ms ease, box-shadow 120ms ease;
+		box-shadow: 0 10px 20px #00ffd533;
+	}
+
+	button[data-action="export"] {
+		background: linear-gradient(120deg, var(--accent-2), #ffd479);
+		box-shadow: 0 10px 20px #ffb35a33;
+	}
+
+	button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+		transform: none;
+		box-shadow: none;
+	}
+
+	button:not(:disabled):hover {
+		transform: translateY(-1px);
+	}
+
+	.filmstrip {
 		display: flex;
 		overflow-x: scroll;
+		gap: 0.4em;
+		padding: 0.4em 0;
+	}
+
+	.player {
+		margin-top: 1.2em;
+		display: grid;
+		gap: 0.8em;
 	}
-}
 
+	.player .timeline {
+		display: grid;
+		gap: 0.6em;
+	}
+
+	.player .track {
+		position: relative;
+		height: 10px;
+		border-radius: 999px;
+		background:
+			linear-gradient(90deg, #1e1e1e, #1a1a1a),
+			repeating-linear-gradient(90deg, #ffffff14 0 6px, transparent 6px 12px);
+		border: 1px solid #ffffff22;
+		overflow: hidden;
+	}
+
+	.player .playhead {
+		position: absolute;
+		left: 0%;
+		top: -6px;
+		width: 2px;
+		height: 22px;
+		background: #3cff9c;
+		box-shadow: 0 0 12px #3cff9c99;
+	}
+
+	.player .scrub {
+		width: 100%;
+	}
+
+	.player .timecode {
+		font-size: 1.2em;
+		letter-spacing: 0.06em;
+		color: #c7ffe3;
+	}
+
+	.player .controls {
+		display: flex;
+		gap: 0.8em;
+	}
+
+	.player-canvas {
+		border: 1px solid var(--border);
+		border-radius: 10px;
+		padding: 0.6em;
+		background: #0b1118;
+	}
+
+	canvas {
+		width: 100%;
+		height: auto;
+	}
+}

package/x/demo/routines/export-test.d.ts

@@ -0,0 +1,2 @@
+import { Omni, TimelineFile } from "../../timeline/index.js";
+export declare function exportTest(omni: Omni, timeline: TimelineFile, exportButton: HTMLButtonElement, onStatus?: (state: "running" | "done") => void): void;

package/x/demo/routines/export-test.js

@@ -0,0 +1,10 @@
+export function exportTest(omni, timeline, exportButton, onStatus) {
+    exportButton.addEventListener("click", () => {
+        onStatus?.("running");
+        omni.render(timeline).then(() => {
+            console.log("done");
+            onStatus?.("done");
+        });
+    });
+}
+//# sourceMappingURL=export-test.js.map

package/x/demo/routines/export-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-test.js","sourceRoot":"","sources":["../../../s/demo/routines/export-test.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,UAAU,CACzB,IAAU,EACV,QAAsB,EACtB,YAA+B,EAC/B,QAA8C;IAE9C,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAC3C,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAA;QACrB,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YAC/B,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;YACnB,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAA;QACnB,CAAC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;AACH,CAAC"}

package/x/demo/routines/filmstrip-test.d.ts

@@ -1 +1 @@
-export declare function filmstripTest(fileHandle: FileSystemFileHandle): Promise<void>;
+export declare function filmstripTest(file: File, root: HTMLElement): Promise<void>;

package/x/demo/routines/filmstrip-test.js

@@ -1,14 +1,15 @@
 import { Filmstrip } from "../../timeline/parts/filmstrip.js";
-export async function filmstripTest(fileHandle) {
-    const rangeSlider = document.querySelector(".range");
-    const rangeView = document.querySelector(".range-view");
-    const rangeSizeSlider = document.querySelector(".range-size");
-    const frequencySlider = document.querySelector(".frequency");
-    const frequencyView = document.querySelector(".frequency-view");
-    const container = document.querySelector("#filmstrip");
-    const FPS_10 = 1000 / 10 / 1000;
+export async function filmstripTest(file, root) {
+    const rangeSlider = root.querySelector(".range");
+    const rangeView = root.querySelector(".range-view");
+    const rangeSizeSlider = root.querySelector(".range-size");
+    const frequencySlider = root.querySelector(".frequency");
+    const frequencyView = root.querySelector(".frequency-view");
+    const container = root.querySelector(".filmstrip");
+    const FPS_10 = 1 / 10;
     let rangeSize = 0.5;
-    const filmstrip = await Filmstrip.init(fileHandle, {
+    container.replaceChildren();
+    const filmstrip = await Filmstrip.init(file, {
         onChange(tiles) {
             // Sort by time (optional, for clean ordering)
             const sorted = tiles.sort((a, b) => a.time - b.time);
@@ -22,21 +23,23 @@ export async function filmstripTest(fileHandle) {
             fit: "fill"
         }
     });
-    rangeSizeSlider.addEventListener("change", () => {
+    rangeSizeSlider.oninput = () => {
         rangeSize = +rangeSizeSlider.value;
-        const [start, end] = [+rangeSlider.value, +rangeSlider.value + rangeSize];
+        const start = +rangeSlider.value;
+        const end = start + rangeSize;
         filmstrip.range = [start, end];
         rangeView.textContent = `visible time range: [${start}, ${end}]`;
-    });
-    rangeSlider.addEventListener("change", () => {
-        const [start, end] = [+rangeSlider.value, +rangeSlider.value + rangeSize];
+    };
+    rangeSlider.oninput = () => {
+        const start = +rangeSlider.value;
+        const end = start + rangeSize;
         filmstrip.range = [start, end];
         rangeView.textContent = `visible time range: [${start}, ${end}]`;
-    });
-    frequencySlider.addEventListener("change", () => {
-        filmstrip.frequency = 1000 / +frequencySlider.value / 1000;
+    };
+    frequencySlider.oninput = () => {
+        filmstrip.frequency = 1 / +frequencySlider.value;
         frequencyView.textContent = `frame every ${filmstrip.frequency.toFixed(3)} second (${frequencySlider.value} frames per second)`;
-    });
+    };
     filmstrip.range = [10, 10.5];
 }
 function createLabeledCanvas(time, canvas) {

package/x/demo/routines/filmstrip-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"filmstrip-test.js","sourceRoot":"","sources":["../../../s/demo/routines/filmstrip-test.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"filmstrip-test.js","sourceRoot":"","sources":["../../../s/demo/routines/filmstrip-test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,mCAAmC,CAAA;AAE3D,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,IAAU,EAAE,IAAiB;IAChE,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAqB,CAAA;IACpE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAE,CAAA;IACpD,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAsB,CAAA;IAC9E,MAAM,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAsB,CAAA;IAC7E,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAE,CAAA;IAC5D,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAE,CAAA;IACnD,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE,CAAA;IACrB,IAAI,SAAS,GAAG,GAAG,CAAA;IACnB,SAAS,CAAC,eAAe,EAAE,CAAA;IAE3B,MAAM,SAAS,GAAG,MAAM,SAAS,CAAC,IAAI,CACpC,IAAI,EACJ;QACC,QAAQ,CAAC,KAAK;YACb,8CAA8C;YAC9C,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAA;YACpD,4BAA4B;YAC5B,SAAS,CAAC,eAAe,CACxB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,MAA2B,CAAC,CAAC,CAClG,CAAA;QACF,CAAC;QACD,SAAS,EAAE,MAAM;QACjB,iBAAiB,EAAE;YAClB,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,MAAM;SACX;KACD,CACF,CAAA;IACD,eAAe,CAAC,OAAO,GAAG,GAAG,EAAE;QAC9B,SAAS,GAAG,CAAC,eAAe,CAAC,KAAK,CAAA;QAClC,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC,KAAK,CAAA;QAChC,MAAM,GAAG,GAAG,KAAK,GAAG,SAAS,CAAA;QAC7B,SAAS,CAAC,KAAK,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;QAC9B,SAAS,CAAC,WAAW,GAAG,wBAAwB,KAAK,KAAK,GAAG,GAAG,CAAA;IACjE,CAAC,CAAA;IACD,WAAW,CAAC,OAAO,GAAG,GAAG,EAAE;QAC1B,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC,KAAK,CAAA;QAChC,MAAM,GAAG,GAAG,KAAK,GAAG,SAAS,CAAA;QAC7B,SAAS,CAAC,KAAK,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAA;QAC9B,SAAS,CAAC,WAAW,GAAG,wBAAwB,KAAK,KAAK,GAAG,GAAG,CAAA;IACjE,CAAC,CAAA;IACD,eAAe,CAAC,OAAO,GAAG,GAAG,EAAE;QAC9B,SAAS,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,CAAA;QAChD,aAAa,CAAC,WAAW,GAAG,eAAe,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,eAAe,CAAC,KAAK,qBAAqB,CAAA;IAChI,CAAC,CAAA;IACD,SAAS,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;AAC7B,CAAC;AAED,SAAS,mBAAmB,CAAC,IAAY,EAAE,MAAyB;IACnE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7C,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;IACnC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAA;IACtC,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAA;IACjC,OAAO,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;IAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC3C,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAA;IACzC,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;IACjC,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAA;IACvB,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,KAAK,CAAA;IACzB,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;IAC7B,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAA;IAC3B,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,iBAAiB,CAAA;IAC1C,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAA;IAC/B,KAAK,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAA;IAChC,KAAK,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAA;IAClC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IAC1B,OAAO,OAAO,CAAA;AACf,CAAC"}

package/x/demo/routines/load-video.d.ts

@@ -1 +1 @@
-export declare function loadVideo(url: string): Promise<ArrayBuffer>;
+export declare function loadVideo(url: string): Promise<Blob>;

package/x/demo/routines/load-video.js

@@ -1,6 +1,5 @@
 export async function loadVideo(url) {
     return fetch(url)
-        .then(response => response.bytes())
-        .then(bytes => bytes.buffer);
+        .then(response => response.blob());
 }
 //# sourceMappingURL=load-video.js.map

package/x/demo/routines/load-video.js.map

@@ -1 +1 @@
-{"version":3,"file":"load-video.js","sourceRoot":"","sources":["../../../s/demo/routines/load-video.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW;IAC1C,OAAO,KAAK,CAAC,GAAG,CAAC;SACf,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;SAClC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AAC9B,CAAC"}
+{"version":3,"file":"load-video.js","sourceRoot":"","sources":["../../../s/demo/routines/load-video.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW;IAC1C,OAAO,KAAK,CAAC,GAAG,CAAC;SACf,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAA;AACpC,CAAC"}

package/x/demo/routines/playback-test.d.ts

@@ -0,0 +1,2 @@
+import { Omni, TimelineFile } from "../../timeline/index.js";
+export declare function playbackTest(timeline: TimelineFile, omni: Omni, root: HTMLElement): Promise<void>;

package/x/demo/routines/playback-test.js

@@ -0,0 +1,51 @@
+import { O } from "../../timeline/index.js";
+export async function playbackTest(timeline, omni, root) {
+    const playButton = root.querySelector(".play");
+    const stopButton = root.querySelector(".stop");
+    const scrub = root.querySelector(".scrub");
+    const playhead = root.querySelector(".playhead");
+    const timecode = root.querySelector(".timecode");
+    const canvasSlot = root.querySelector(".player-canvas");
+    const o = new O({ timeline });
+    const player = await omni.playback(timeline);
+    canvasSlot.replaceChildren(player.canvas);
+    playButton.disabled = false;
+    stopButton.disabled = false;
+    playButton.addEventListener("click", () => player.play());
+    stopButton.addEventListener("click", () => player.pause());
+    scrub.max = String(Math.ceil(player.duration));
+    let isScrubbing = false;
+    player.playback.onTick.on(() => setScrubState(player.currentTime, player.duration));
+    const updateTimecode = (currentMs, durationMs) => {
+        timecode.textContent = `${formatTime(currentMs)} / ${formatTime(durationMs)}`;
+    };
+    scrub.addEventListener("input", async () => {
+        isScrubbing = true;
+        const next = Math.max(0, Math.min(+scrub.value, player.duration));
+        updateTimecode(next, player.duration);
+        await player.seek(next);
+    });
+    scrub.addEventListener("change", async () => {
+        isScrubbing = false;
+        const next = Math.max(0, Math.min(+scrub.value, player.duration));
+        await player.seek(next);
+    });
+    const setScrubState = (timeMs, durationMs) => {
+        const clamped = Math.max(0, Math.min(timeMs, durationMs));
+        if (!isScrubbing)
+            scrub.value = String(Math.round(clamped));
+        const progress = durationMs ? (clamped / durationMs) * 100 : 0;
+        playhead.style.left = `${progress}%`;
+        updateTimecode(clamped, durationMs);
+    };
+    await player.update(o.timeline);
+}
+function formatTime(ms) {
+    const clamped = Math.max(0, ms);
+    const totalSeconds = Math.floor(clamped / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const millis = Math.floor(clamped % 1000);
+    return `${minutes}:${String(seconds).padStart(2, "0")}.${String(millis).padStart(3, "0")}`;
+}
+//# sourceMappingURL=playback-test.js.map

package/x/demo/routines/playback-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-test.js","sourceRoot":"","sources":["../../../s/demo/routines/playback-test.ts"],"names":[],"mappings":"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"}

package/x/demo/routines/timeline-setup.d.ts

@@ -0,0 +1,6 @@
+import { Driver } from "../../driver/driver.js";
+import { Omni } from "../../timeline/index.js";
+export declare function TimelineSchemaTest(driver: Driver, file: File): Promise<{
+    timeline: import("../../timeline/index.js").TimelineFile;
+    omni: Omni;
+}>;

package/x/demo/routines/timeline-setup.js

@@ -0,0 +1,59 @@
+import { Datafile, defaultTranscriberSpec, makeTranscriber, Omni } from "../../timeline/index.js";
+export async function TimelineSchemaTest(driver, file) {
+    const transcriber = await makeTranscriber({
+        driver,
+        spec: defaultTranscriberSpec(),
+        workerUrl: new URL("/features/speech/transcribe/worker.bundle.min.js", import.meta.url),
+        onLoading: loading => console.log("transcriber loading", loading),
+    });
+    const omni = new Omni(driver);
+    const { videoA } = await omni.load({ videoA: Datafile.make(file) });
+    const transcript = await transcriber.transcribe({
+        source: file,
+        language: "english",
+        onReport: report => console.log("transcriber report", report),
+        onTranscription: text => console.log("transcribing", text),
+    });
+    const timeline = omni.timeline(o => {
+        const text = o.text("content", { duration: 3000 });
+        const fade = o.animate.opacity.make("easeIn", [
+            [0, 0],
+            [700, 1],
+            [2200, 1],
+            [3000, 0.35],
+        ]);
+        const style = o.textStyle({ fill: "green", fontSize: 100 });
+        const videoSpatial = o.spatial(o.transform({
+            position: [240, 160],
+            scale: [1.4, 1.4],
+            rotation: 0.08,
+        }), [0.15, 0.1, 0.05, 0.2]);
+        const textSpatial = o.spatial();
+        const textMotion = o.animate.transform.make("linear", [
+            [0, o.transform({ position: [-320, 80], scale: [0.7, 0.7] })],
+            [1000, o.transform({ position: [120, 80], scale: [1, 1] })],
+            [2000, o.transform({ position: [200, 40], scale: [1.35, 1.35], rotation: 8 })],
+            [3000, o.transform({ position: [320, 0], scale: [1.15, 1.15], rotation: 0 })],
+        ]);
+        const video = o.video(videoA, { duration: 6000, start: 3000 });
+        o.set(text.id, { styleId: style.id, spatialId: textSpatial.id, animationIds: [fade.id, textMotion.id] });
+        o.set(video.id, { spatialId: videoSpatial.id });
+        const visual = o.sequence(o.stack(text, o.captions(video, transcript, {
+            maxChars: 34,
+            maxDuration: 2800,
+            maxSilence: 450,
+            styles: {
+                fontFamily: "Arial",
+                fontSize: 64,
+                fill: "#ffffff",
+                align: "center",
+                wordWrap: true,
+                wordWrapWidth: 1280,
+                stroke: { color: "#000000", width: 6 },
+            },
+        })), o.transition.circle(1500), o.video(videoA, { duration: 7000, start: 5000 }));
+        return o.stack(visual, o.audio(videoA, { start: 3000, duration: video.duration }));
+    });
+    return { timeline, omni };
+}
+//# sourceMappingURL=timeline-setup.js.map

package/x/demo/routines/timeline-setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-setup.js","sourceRoot":"","sources":["../../../s/demo/routines/timeline-setup.ts"],"names":[],"mappings":"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"}

package/x/demo/routines/transcode-test.js

@@ -5,19 +5,23 @@ export function setupTranscodeTest(driver, source) {
     canvas.height = dimensions.height;
     const ctx = canvas.getContext("2d");
     async function run() {
-        const readables = driver.decode({
+        const video = driver.decodeVideo({
             source,
             async onFrame(frame) {
                 const composed = await driver.composite([
                     {
+                        id: 0,
                         kind: "image",
                         frame
                     },
                     {
+                        id: 1,
                         kind: "text",
                         content: "omnitool",
-                        fontSize: 50,
-                        color: "green"
+                        style: {
+                            fontSize: 50,
+                            fill: "green"
+                        }
                     }
                 ]);
                 frame.close();
@@ -25,13 +29,21 @@ export function setupTranscodeTest(driver, source) {
                 return composed;
             }
         });
-        await driver.encode({
-            readables,
+        const audio = driver.decodeAudio({ source });
+        const { readable, done } = driver.encode({
+            video: video.readable,
+            audio: audio.readable,
             config: {
                 audio: { codec: "opus", bitrate: 128000 },
                 video: { codec: "vp9", bitrate: 1000000 }
             }
         });
+        const handle = await window.showSaveFilePicker();
+        const writable = await handle.createWritable();
+        await Promise.all([
+            readable.pipeTo(writable),
+            done
+        ]);
     }
     return { canvas, run };
 }

package/x/demo/routines/transcode-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"transcode-test.js","sourceRoot":"","sources":["../../../s/demo/routines/transcode-test.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,kBAAkB,CAAC,MAAc,EAAE,MAAqB;IACvE,MAAM,UAAU,GAAG,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,CAAA;IAE9C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAA;IAC/B,MAAM,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAA;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IAEnC,KAAK,UAAU,GAAG;QACjB,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC;YAC/B,MAAM;YACN,KAAK,CAAC,OAAO,CAAC,KAAK;gBAClB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC;oBACvC;wBACC,IAAI,EAAE,OAAO;wBACb,KAAK;qBACL;oBACD;wBACC,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,UAAU;wBACnB,QAAQ,EAAE,EAAE;wBACZ,KAAK,EAAE,OAAO;qBACd;iBACD,CAAC,CAAA;gBACF,KAAK,CAAC,KAAK,EAAE,CAAA;gBACb,GAAG,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;gBAC9B,OAAO,QAAQ,CAAA;YAChB,CAAC;SACD,CAAC,CAAA;QAEF,MAAM,MAAM,CAAC,MAAM,CAAC;YACnB,SAAS;YACT,MAAM,EAAE;gBACP,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAC;gBACvC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAC;aACvC;SACD,CAAC,CAAA;IACH,CAAC;IAED,OAAO,EAAC,MAAM,EAAE,GAAG,EAAC,CAAA;AACrB,CAAC"}
+{"version":3,"file":"transcode-test.js","sourceRoot":"","sources":["../../../s/demo/routines/transcode-test.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,kBAAkB,CAAC,MAAc,EAAE,MAAqB;IACvE,MAAM,UAAU,GAAG,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,CAAA;IAE9C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAA;IAC/B,MAAM,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAA;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IAEnC,KAAK,UAAU,GAAG;QACjB,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC;YAChC,MAAM;YACN,KAAK,CAAC,OAAO,CAAC,KAAK;gBAClB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC;oBACvC;wBACC,EAAE,EAAE,CAAC;wBACL,IAAI,EAAE,OAAO;wBACb,KAAK;qBACL;oBACD;wBACC,EAAE,EAAE,CAAC;wBACL,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,UAAU;wBACnB,KAAK,EAAE;4BACN,QAAQ,EAAE,EAAE;4BACZ,IAAI,EAAE,OAAO;yBACb;qBACD;iBACD,CAAC,CAAA;gBACF,KAAK,CAAC,KAAK,EAAE,CAAA;gBACb,GAAG,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;gBAC9B,OAAO,QAAQ,CAAA;YAChB,CAAC;SACD,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,EAAC,MAAM,EAAC,CAAC,CAAA;QAE1C,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAC,GAAG,MAAM,CAAC,MAAM,CAAC;YACtC,KAAK,EAAE,KAAK,CAAC,QAAQ;YACrB,KAAK,EAAE,KAAK,CAAC,QAAQ;YACrB,MAAM,EAAE;gBACP,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAC;gBACvC,KAAK,EAAE,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAC;aACvC;SACD,CAAC,CAAA;QAEF,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,kBAAkB,EAAE,CAAA;QAChD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,cAAc,EAAE,CAAA;QAE9C,MAAM,OAAO,CAAC,GAAG,CAAC;YACjB,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;YACzB,IAAI;SACJ,CAAC,CAAA;IACH,CAAC;IAED,OAAO,EAAC,MAAM,EAAE,GAAG,EAAC,CAAA;AACrB,CAAC"}

package/x/demo/routines/transcriber-test.d.ts

@@ -0,0 +1,4 @@
+import { Driver } from "../../driver/driver.js";
+export declare function transcriberTest(driver: Driver): Promise<{
+    transcribe: (file: File) => Promise<void>;
+}>;

package/x/demo/routines/transcriber-test.js

@@ -0,0 +1,33 @@
+import { makeTranscriber } from "../../features/speech/transcribe/transcriber.js";
+export async function transcriberTest(driver) {
+    const transcriber = await makeTranscriber({
+        driver,
+        spec: {
+            model: "onnx-community/whisper-tiny_timestamped",
+            device: "webgpu",
+            strideLength: 5,
+            chunkLength: 30,
+            dtype: "fp32"
+        },
+        workerUrl: new URL("/features/speech/transcribe/worker.bundle.min.js", import.meta.url),
+        onLoading({ progress, total }) {
+            console.log(progress, total, "total");
+        },
+    });
+    return {
+        transcribe: async (file) => {
+            const result = await transcriber.transcribe({
+                source: file,
+                language: "english",
+                onReport(report) {
+                    console.log("report", report);
+                },
+                onTranscription(transcription) {
+                    console.log("transcript", transcription);
+                }
+            });
+            console.log(result, "transcript result");
+        }
+    };
+}
+//# sourceMappingURL=transcriber-test.js.map

package/x/demo/routines/transcriber-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcriber-test.js","sourceRoot":"","sources":["../../../s/demo/routines/transcriber-test.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,eAAe,EAAC,MAAM,iDAAiD,CAAA;AAE/E,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,MAAc;IACnD,MAAM,WAAW,GAAG,MAAM,eAAe,CAAC;QACzC,MAAM;QACN,IAAI,EAAE;YACL,KAAK,EAAE,yCAAyC;YAChD,MAAM,EAAE,QAAQ;YAChB,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,EAAE;YACf,KAAK,EAAE,MAAM;SACb;QACD,SAAS,EAAE,IAAI,GAAG,CAAC,kDAAkD,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;QACvF,SAAS,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAC;YACzB,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC,CAAA;QACvC,CAAC;KACD,CAAC,CAAA;IACF,OAAO;QACN,UAAU,EAAE,KAAK,EAAE,IAAU,EAAE,EAAE;YAChC,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,UAAU,CAAC;gBAC3C,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE,SAAS;gBACnB,QAAQ,CAAC,MAAM;oBACb,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;gBAC/B,CAAC;gBACD,eAAe,CAAC,aAAa;oBAC3B,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;gBAC1C,CAAC;aACD,CAAC,CAAA;YACF,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAA;QACzC,CAAC;KACD,CAAA;AACF,CAAC"}

package/x/demo/routines/transitions-test.d.ts

@@ -0,0 +1,5 @@
+import { Driver } from "../../driver/driver.js";
+import { DecoderSource } from "../../driver/fns/schematic.js";
+export declare function setupTransitionsTest(driver: Driver, source: DecoderSource): Promise<{
+    run: () => Promise<void>;
+}>;