freemotion 0.1.0 → 0.1.1

package/README.md

@@ -126,7 +126,7 @@ Under the hood:
 | | |
 |---|---|
 | **`freemotion studio`** | Starts a Vite dev server whose home page is the studio, with your compositions loaded and hot reload on. |
-| **`freemotion render`** | Bundles the project with Vite, opens it in several headless Chromium tabs and, for each frame, draws it, waits for fonts, images and [`delayRender()`](#async-data-delayrender) holds, captures a PNG and pipes it to ffmpeg, in order. |
+| **`freemotion render`** | Bundles the project with Vite, opens it in several headless Chromium tabs and, for each frame, draws it, waits for fonts, images and [`delayRender()`](#async-data-delayrender) holds, captures a PNG and pipes it to ffmpeg, in order. For an [animated SVG](#animated-svg), one tab records the DOM of every frame instead. |
 | **`<Player>`** | Draws a composition inside your own React app, scaled to fit its container. |
 
 ## 🎬 Studio
@@ -156,6 +156,7 @@ npx freemotion render Intro                      # out/Intro.mp4
 npx freemotion render Intro -o promo.webm        # VP9 WebM
 npx freemotion render Intro -o promo.gif         # animated GIF
 npx freemotion render Intro -o promo.gif --scale 0.5 --every-nth-frame 2   # half size, 15 fps
+npx freemotion render Intro -o banner.svg        # animated SVG, no ffmpeg needed
 npx freemotion render Intro --frame 60           # out/Intro.png, a still
 npx freemotion render Intro --frames 0-89        # only the first 3 seconds
 npx freemotion render Intro --scale 2            # twice the width and height
@@ -169,18 +170,20 @@ npx freemotion render --all                      # every composition, to out/
 | `.webm` | VP9, CRF 32 | Needs an ffmpeg built with `libvpx`. |
 | `.gif` | Palette per video | For lighter files, shrink it with `--scale 0.5` and drop frames with `--every-nth-frame 2`. |
 | `.png` | Lossless | A single frame (`--frame`). ffmpeg is not needed. |
+| `.svg` | CSS keyframes | A vector file that plays by itself, in browsers and GitHub READMEs. ffmpeg is not needed. See [Animated SVG](#animated-svg). |
 
 <details>
 <summary><b>All render options</b></summary>
 
 ```text
--o, --output <file>         Output file, for a single composition (.mp4, .webm, .gif or .png)
+-o, --output <file>         Output file, for a single composition (.mp4, .webm, .gif, .png or .svg)
 --out-dir <dir>             Folder for <id>.<format> files (default: out)
 --all                       Render every composition
---format <format>           mp4, webm, gif or png (default: from --output, else mp4; png with --frame)
+--format <format>           mp4, webm, gif, png or svg (default: from --output, else mp4; png with --frame)
 --frame <n>                 Render a still image of frame n
 --frames <a-b>              Render only frames a to b (inclusive)
---every-nth-frame <n>       Keep one frame out of every n, at 1/n of the frame rate (lighter GIFs)
+--every-nth-frame <n>       Keep one frame out of every n, at 1/n of the frame rate (lighter GIFs and SVGs)
+--no-loop                   GIF and SVG: stop on the last frame instead of starting over
 --props <json|file>         Props merged over defaultProps, as JSON or a path to a .json file
 --scale <n>                 Pixel density: 2 renders at twice the width and height (default: 1)
 --crf <n>                   Quality for mp4/webm, lower is better (default: 18 mp4, 32 webm)
@@ -195,6 +198,25 @@ npx freemotion render --all                      # every composition, to out/
 
 </details>
 
+### Animated SVG
+
+```bash
+npx freemotion render Banner -o banner.svg                  # loops, like a GIF
+npx freemotion render Banner -o banner.svg --no-loop        # plays once and stays on the last frame
+npx freemotion render Banner -o banner.svg --frame 30       # a still, as vectors
+```
+
+The same composition, the same frames, as one `.svg` file: text stays text, edges stay sharp at any size, and the file is usually far smaller than a GIF. Put it in a README with `<img src="banner.svg">`, in a web page inline or as `<img>`, or anywhere else a browser engine draws SVG.
+
+How it's made: the renderer draws every frame as usual, but instead of a screenshot it records the DOM of the stage. Whatever changed from one frame to the next (an inline style, an SVG attribute, an element that mounted or unmounted, a text that counts) becomes CSS `@keyframes` that step at the frame rate; the rest is written once. The markup goes inside a `<foreignObject>`, so it is the HTML your components produced, along with the stylesheets, the images and the font faces it uses, embedded as `data:` URLs so the file stands alone.
+
+What to know:
+
+- **It needs a browser engine.** Chrome, Edge, Firefox and Safari from 2024 on play it, inline or as `<img>`. Design tools such as Inkscape, Illustrator or Figma don't render `<foreignObject>`, and `<img>` can't run scripts, which is why everything is CSS.
+- **Size grows with change.** A value that moves every frame costs one keyframe per frame. Elements whose attributes CSS can't animate (a `<path d>` that morphs, an `<img src>` that swaps) are written once per distinct value. `--every-nth-frame 2` halves all of it. Fonts are embedded only for the faces and the characters the video uses, but a font family can still weigh a few hundred KB.
+- **Not everything survives.** `<canvas>` is captured as one image per frame (heavy), `<video>` and WebGL don't play, shadow DOM is not recorded, and stylesheet rules must target elements inside the composition (`body` and `html` don't exist in the file). Where the composition paints nothing, the SVG is transparent, where a video would be white.
+- **Timing is frame-exact.** Each keyframe holds for one frame of the original frame rate, like the video. The `--scale`, `--crf` and `--concurrency` options don't apply.
+
 ### Tips for identical renders everywhere
 
 - **Bundle your fonts** with a package such as [`@fontsource`](https://fontsource.org) instead of relying on fonts installed on the machine. The renderer waits for every font face to load.

package/dist/node/args.js

@@ -12,7 +12,7 @@ Usage
 Commands
   init [directory]     Create a new project (default directory: my-video)
   studio               Preview your compositions with hot reload
-  render <id...>       Render compositions to MP4, WebM, GIF or PNG
+  render <id...>       Render compositions to MP4, WebM, GIF, PNG or animated SVG
 
 Options
   -h, --help           Show help for a command
@@ -39,13 +39,14 @@ Options
   freemotion render --all [options]
 
 Options
-  -o, --output <file>         Output file, for a single composition (.mp4, .webm, .gif or .png)
+  -o, --output <file>         Output file, for a single composition (.mp4, .webm, .gif, .png or .svg)
   --out-dir <dir>             Folder for <id>.<format> files (default: out)
   --all                       Render every composition
-  --format <format>           mp4, webm, gif or png (default: from --output, else mp4; png with --frame)
+  --format <format>           mp4, webm, gif, png or svg (default: from --output, else mp4; png with --frame)
   --frame <n>                 Render a still image of frame n
   --frames <a-b>              Render only frames a to b (inclusive)
-  --every-nth-frame <n>       Keep one frame out of every n, at 1/n of the frame rate (lighter GIFs)
+  --every-nth-frame <n>       Keep one frame out of every n, at 1/n of the frame rate (lighter GIFs and SVGs)
+  --no-loop                   GIF and SVG: stop on the last frame instead of starting over
   --props <json|file>         Props merged over defaultProps, as JSON or a path to a .json file
   --scale <n>                 Pixel density: 2 renders at twice the width and height (default: 1)
   --crf <n>                   Quality for mp4/webm, lower is better (default: 18 mp4, 32 webm)
@@ -164,6 +165,7 @@ export function parseCommand(argv, { cwd, env }) {
             const { values, positionals } = parseArgs({
                 args,
                 allowPositionals: true,
+                allowNegative: true,
                 options: {
                     help: { type: 'boolean', short: 'h' },
                     output: { type: 'string', short: 'o' },
@@ -173,6 +175,7 @@ export function parseCommand(argv, { cwd, env }) {
                     frame: { type: 'string' },
                     frames: { type: 'string' },
                     'every-nth-frame': { type: 'string' },
+                    loop: { type: 'boolean' },
                     props: { type: 'string' },
                     scale: { type: 'string' },
                     crf: { type: 'string' },
@@ -214,6 +217,7 @@ export function parseCommand(argv, { cwd, env }) {
                     frame: integer(values.frame, '--frame', 0),
                     frames: values.frames === undefined ? undefined : parseFrames(values.frames),
                     everyNthFrame: integer(values['every-nth-frame'], '--every-nth-frame', 1),
+                    loop: values.loop,
                     props: values.props === undefined ? undefined : parseProps(values.props, cwd),
                     scale: positive(values.scale, '--scale') ?? 1,
                     crf: values.crf === undefined ? undefined : integer(values.crf, '--crf', 0),

package/dist/node/ffmpeg.d.ts

@@ -1,13 +1,18 @@
 export type VideoFormat = 'mp4' | 'webm' | 'gif';
-export type OutputFormat = VideoFormat | 'png';
+/** `png` is a still, `svg` an animated vector file; neither needs ffmpeg. */
+export type OutputFormat = VideoFormat | 'png' | 'svg';
 export declare const OUTPUT_FORMATS: readonly OutputFormat[];
+/** Formats encoded by ffmpeg from PNG frames. */
+export declare const isVideoFormat: (format: OutputFormat) => format is VideoFormat;
 export declare const DEFAULT_CRF: Record<Exclude<VideoFormat, 'gif'>, number>;
 export declare function formatFromPath(path: string): OutputFormat | null;
 /** ffmpeg arguments that read PNG frames from stdin and encode them to `output`. */
-export declare function ffmpegArgs({ format, fps, crf, output }: {
+export declare function ffmpegArgs({ format, fps, crf, loop, output }: {
     readonly format: VideoFormat;
     readonly fps: number;
     readonly crf?: number;
+    /** GIF: play again from the start (default), or stop on the last frame. */
+    readonly loop?: boolean;
     readonly output: string;
 }): string[];
 /**

package/dist/node/ffmpeg.js

@@ -2,7 +2,9 @@ import { spawn } from 'node:child_process';
 import { existsSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { extname, join } from 'node:path';
-export const OUTPUT_FORMATS = ['mp4', 'webm', 'gif', 'png'];
+export const OUTPUT_FORMATS = ['mp4', 'webm', 'gif', 'png', 'svg'];
+/** Formats encoded by ffmpeg from PNG frames. */
+export const isVideoFormat = (format) => format !== 'png' && format !== 'svg';
 export const DEFAULT_CRF = { mp4: 18, webm: 32 };
 export function formatFromPath(path) {
     const extension = extname(path).slice(1).toLowerCase();
@@ -12,7 +14,7 @@ export function formatFromPath(path) {
 // so players show the same colors the browser drew.
 const YUV_FILTERS = 'scale=out_color_matrix=bt709:out_range=tv,format=yuv420p,setsar=1,setparams=range=tv:color_primaries=bt709:color_trc=iec61966-2-1:colorspace=bt709';
 /** ffmpeg arguments that read PNG frames from stdin and encode them to `output`. */
-export function ffmpegArgs({ format, fps, crf, output }) {
+export function ffmpegArgs({ format, fps, crf, loop = true, output }) {
     const input = ['-hide_banner', '-loglevel', 'error', '-y', '-f', 'image2pipe', '-framerate', String(fps), '-c:v', 'png', '-i', '-'];
     switch (format) {
         case 'mp4':
@@ -34,7 +36,7 @@ export function ffmpegArgs({ format, fps, crf, output }) {
             return [
                 ...input,
                 '-filter_complex', 'split[a][b];[a]palettegen=stats_mode=full[palette];[b][palette]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle',
-                '-loop', '0',
+                '-loop', loop ? '0' : '-1',
                 output,
             ];
     }

package/dist/node/render.d.ts

@@ -23,6 +23,8 @@ export type RenderOptions = {
     readonly frames?: readonly [number, number];
     /** Videos: keep one frame out of every n, and lower the frame rate to match. Default `1`. */
     readonly everyNthFrame?: number;
+    /** GIF and SVG: start over at the end (default), or stop on the last frame. */
+    readonly loop?: boolean;
     /** Merged over each composition's `defaultProps`. */
     readonly props?: Record<string, unknown>;
     readonly concurrency: number;

package/dist/node/render.js

@@ -6,7 +6,7 @@ import { dirname, join, resolve } from 'node:path';
 import { build, mergeConfig, preview } from 'vite';
 import { RENDER_API_GLOBAL } from '../shared/render-api.js';
 import { launchBrowser } from './browser.js';
-import { assertFfmpeg, ffmpegArgs, formatFromPath, resolveFfmpeg } from './ffmpeg.js';
+import { assertFfmpeg, ffmpegArgs, formatFromPath, isVideoFormat, resolveFfmpeg } from './ffmpeg.js';
 import { produceInOrder } from './ordered-frames.js';
 import { RENDER_ENTRY } from './paths.js';
 import { resolveEntry } from './project.js';
@@ -52,11 +52,8 @@ async function renderStill(session, job) {
     await tab.page.close();
     return { id: job.id, output: job.output, format: 'png', frames: 1, seconds: (Date.now() - startedAt) / 1000 };
 }
-async function renderVideo(session, job, format) {
-    const { options } = session;
-    const startedAt = Date.now();
-    const first = await openTab(session, job.id);
-    const { meta } = first;
+/** The frames of a video or animated SVG, honoring `--frames` and `--every-nth-frame`, and their frame rate. */
+function planFrames(meta, options) {
     const [from, to] = options.frames ?? [0, meta.durationInFrames - 1];
     checkFrame(meta, from, '--frames start');
     checkFrame(meta, to, '--frames end');
@@ -64,14 +61,21 @@ async function renderVideo(session, job, format) {
         throw new Error(`--frames ${from}-${to} is empty.`);
     }
     const step = options.everyNthFrame ?? 1;
-    const frames = Array.from({ length: Math.floor((to - from) / step) + 1 }, (_, i) => from + i * step);
+    return { frames: Array.from({ length: Math.floor((to - from) / step) + 1 }, (_, i) => from + i * step), fps: meta.fps / step };
+}
+async function renderVideo(session, job, format) {
+    const { options } = session;
+    const startedAt = Date.now();
+    const first = await openTab(session, job.id);
+    const { meta } = first;
+    const { frames, fps } = planFrames(meta, options);
     const [width, height] = [meta.width * options.scale, meta.height * options.scale];
     if (format !== 'gif' && (width % 2 !== 0 || height % 2 !== 0)) {
         throw new Error(`"${meta.id}" renders at ${width}×${height}; ${format.toUpperCase()} needs an even width and height.`);
     }
     const extra = Math.max(0, Math.min(options.concurrency, frames.length) - 1);
     const tabs = [first, ...(await Promise.all(Array.from({ length: extra }, () => openTab(session, job.id))))];
-    const ffmpeg = spawn(session.ffmpeg, ffmpegArgs({ format, fps: meta.fps / step, crf: options.crf, output: job.output }), {
+    const ffmpeg = spawn(session.ffmpeg, ffmpegArgs({ format, fps, crf: options.crf, loop: options.loop, output: job.output }), {
         stdio: ['pipe', 'inherit', 'inherit'],
     });
     const exited = once(ffmpeg, 'close');
@@ -102,6 +106,50 @@ async function renderVideo(session, job, format) {
     }
     return { id: job.id, output: job.output, format, frames: frames.length, seconds: (Date.now() - startedAt) / 1000 };
 }
+/**
+ * Animated SVG: one tab draws the frames in order and, after each one, records the stage's DOM. At
+ * the end the page turns what changed between frames into CSS keyframes (see svg-recorder.ts).
+ * With `--frame` the file is a still of that frame.
+ */
+async function renderSvg(session, job) {
+    const { options } = session;
+    const startedAt = Date.now();
+    const tab = await openTab(session, job.id);
+    const { page, errors, meta } = tab;
+    let frames;
+    let fps = meta.fps;
+    if (options.frame === undefined) {
+        ({ frames, fps } = planFrames(meta, options));
+    }
+    else {
+        checkFrame(meta, options.frame, '--frame');
+        frames = [options.frame];
+    }
+    let recorded = 0;
+    const progress = setInterval(() => options.log.progress(`${job.id} · ${recorded}/${frames.length} frames`), 250);
+    try {
+        await page.evaluate(name => window[name].beginSvg(), RENDER_API_GLOBAL);
+        for (const frame of frames) {
+            await page.evaluate(([name, value]) => window[name].setFrame(value), [RENDER_API_GLOBAL, frame]);
+            if (errors.length > 0) {
+                throw errors[0];
+            }
+            await page.evaluate(name => window[name].recordSvgFrame(), RENDER_API_GLOBAL);
+            recorded++;
+        }
+        const { svg, warnings } = await page.evaluate(([name, svgOptions]) => window[name].finishSvg(svgOptions), [RENDER_API_GLOBAL, { fps, loop: options.loop ?? true }]);
+        if (errors.length > 0) {
+            throw errors[0];
+        }
+        warnings.forEach(warning => options.log.info(`  ${job.id}: ${warning}`));
+        await writeFile(job.output, svg);
+    }
+    finally {
+        clearInterval(progress);
+    }
+    await page.close();
+    return { id: job.id, output: job.output, format: 'svg', frames: frames.length, seconds: (Date.now() - startedAt) / 1000 };
+}
 /** Decides the output file and format of each composition to render. */
 export function planJobs(options, available) {
     const ids = options.compositions === 'all' ? available : options.compositions;
@@ -120,7 +168,7 @@ export function planJobs(options, available) {
         const output = options.output ?? join(options.outDir, `${id}.${fallback}`);
         const format = options.format ?? formatFromPath(output);
         if (!format) {
-            throw new Error(`Can't tell the format of "${output}". Use a .mp4, .webm, .gif or .png file, or pass --format.`);
+            throw new Error(`Can't tell the format of "${output}". Use a .mp4, .webm, .gif, .png or .svg file, or pass --format.`);
         }
         return { id, output, format };
     });
@@ -162,7 +210,7 @@ export async function render(options) {
         const available = await probe.evaluate(name => window[name].compositions.map(item => item.id), RENDER_API_GLOBAL);
         await probe.close();
         const jobs = planJobs(options, available);
-        if (jobs.some(job => job.format !== 'png')) {
+        if (jobs.some(job => isVideoFormat(job.format))) {
             await assertFfmpeg(session.ffmpeg);
         }
         const results = [];
@@ -171,7 +219,9 @@ export async function render(options) {
             await mkdir(dirname(output), { recursive: true });
             const result = job.format === 'png'
                 ? await renderStill(session, { ...job, output })
-                : await renderVideo(session, { ...job, output }, job.format);
+                : job.format === 'svg'
+                    ? await renderSvg(session, { ...job, output })
+                    : await renderVideo(session, { ...job, output }, job.format);
             log.done(`${result.id} · ${result.frames} ${result.frames === 1 ? 'frame' : 'frames'} in ${result.seconds.toFixed(1)}s → ${job.output}`);
             results.push(result);
         }

package/dist/shared/render-api.d.ts

@@ -5,12 +5,26 @@ export type CompositionMeta = {
     readonly height: number;
     readonly durationInFrames: number;
 };
+export type SvgExportOptions = {
+    /** Frames per second of the output (already divided by `--every-nth-frame`). */
+    readonly fps: number;
+    readonly loop: boolean;
+};
+export type SvgExportResult = {
+    readonly svg: string;
+    /** Things the SVG can't carry (a resource that couldn't be embedded, a stylesheet that couldn't be read). */
+    readonly warnings: readonly string[];
+};
 export type RenderPageApi = {
     readonly compositions: readonly CompositionMeta[];
     /** Selects the composition (props merged over its defaults) for the next `setFrame()` calls. */
     readonly mount: (id: string, props: Record<string, unknown> | null) => CompositionMeta;
     /** Draws the frame and resolves once fonts, images, render holds and the paint are done. */
     readonly setFrame: (frame: number) => Promise<void>;
+    /** Animated SVG: `beginSvg()` once, `recordSvgFrame()` after each `setFrame()`, then `finishSvg()` builds the file. */
+    readonly beginSvg: () => void;
+    readonly recordSvgFrame: () => void;
+    readonly finishSvg: (options: SvgExportOptions) => Promise<SvgExportResult>;
 };
 export declare const RENDER_API_GLOBAL = "__freemotion";
 declare global {

package/dist/studio/render-page.js

@@ -7,6 +7,7 @@ import { validateCompositions } from '../runtime/composition.js';
 import { waitForRenderHolds } from '../runtime/delay-render.js';
 import { Stage } from '../runtime/stage.js';
 import { RENDER_API_GLOBAL } from '../shared/render-api.js';
+import { SvgRecorder } from './svg-recorder.js';
 const list = validateCompositions(compositions);
 // React 19 reports render errors instead of throwing them out of flushSync(); keep the last one so
 // setFrame() can fail with it instead of capturing an empty frame.
@@ -54,9 +55,29 @@ async function setFrame(frame) {
         await nextPaint();
     }
 }
+let recorder = null;
+function beginSvg() {
+    recorder = new SvgRecorder();
+}
+function recordSvgFrame() {
+    const stage = document.querySelector('[data-freemotion-stage]');
+    if (!recorder || !stage) {
+        throw new Error('recordSvgFrame() must be called after beginSvg() and setFrame().');
+    }
+    recorder.record(stage);
+}
+function finishSvg(options) {
+    if (!recorder || !mounted) {
+        throw new Error('finishSvg() must be called after beginSvg().');
+    }
+    const { width, height } = mounted.composition;
+    const result = recorder.finish({ ...options, width, height });
+    recorder = null;
+    return result;
+}
 async function boot() {
     // With unicode-range, a face is only fetched on first use. Load all of them up front.
     await Promise.all([...document.fonts].map(face => face.load().catch(() => undefined)));
-    window[RENDER_API_GLOBAL] = { compositions: list.map(meta), mount, setFrame };
+    window[RENDER_API_GLOBAL] = { compositions: list.map(meta), mount, setFrame, beginSvg, recordSvgFrame, finishSvg };
 }
 void boot();

package/dist/studio/svg-export.d.ts

@@ -0,0 +1,70 @@
+export declare const XHTML_NS = "http://www.w3.org/1999/xhtml";
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+export type Sample<T> = {
+    readonly at: number;
+    readonly value: T;
+};
+/** Run-length samples over frame indices: each entry holds from its index until the next entry. */
+export type Track<T> = Sample<T>[];
+/** Appends a sample unless the value is the one already in force. */
+export declare function pushSample<T>(track: Track<T>, at: number, value: T): void;
+/** The value in force at a frame index; `undefined` before the first sample. */
+export declare function sampleAt<T>(track: readonly Sample<T>[], at: number): T | undefined;
+export type ElementRecord = {
+    readonly kind: 'element';
+    readonly id: number;
+    readonly parent: number | null;
+    readonly namespace: string;
+    readonly tag: string;
+    /** Child ids in document order, merged over every frame the element was seen in. */
+    readonly children: number[];
+    readonly presence: Track<boolean>;
+    /** Attributes other than `style`; `null` once an attribute is removed. */
+    readonly attributes: Map<string, Track<string | null>>;
+    /** Longhand declarations of the inline style; `null` once a declaration is removed. */
+    readonly style: Map<string, Track<string | null>>;
+    /** The inline style as written (`cssText`), for the static part of the output. */
+    readonly inlineStyle: Track<string>;
+    /** Computed `display`, sampled while present. */
+    readonly display: Track<string>;
+};
+export type TextRecord = {
+    readonly kind: 'text';
+    readonly id: number;
+    readonly parent: number | null;
+    readonly presence: Track<boolean>;
+    readonly data: Track<string>;
+};
+export type NodeRecord = ElementRecord | TextRecord;
+export type SvgDocumentOptions = {
+    readonly records: ReadonlyMap<number, NodeRecord>;
+    /** Id of the stage element. */
+    readonly root: number;
+    /** How many frames were recorded. */
+    readonly frames: number;
+    /** Frames per second of the output (already divided by `--every-nth-frame`). */
+    readonly fps: number;
+    readonly loop: boolean;
+    readonly width: number;
+    readonly height: number;
+    /** Stylesheet text to embed, with its resources already inlined. */
+    readonly css: string;
+};
+/** `rotate(45 10 10) translate(5)` (SVG attribute syntax) → the same transform in CSS syntax. */
+export declare function svgTransformToCss(value: string): string | null;
+/** The CSS declaration that reproduces an SVG attribute, or `null` when CSS can't express it. */
+export declare function attributeAsCss(namespace: string, tag: string, name: string, value: string): {
+    property: string;
+    value: string;
+} | null;
+export declare function escapeText(value: string): string;
+export declare function escapeAttribute(value: string): string;
+/** Percentage of the timeline where frame index `at` starts. */
+export declare function keyframeOffset(at: number, frames: number): string;
+/**
+ * Chromium only starts the animations of an element once every ancestor is displayed, so whatever
+ * sits inside an element that appears at frame k would run k frames late. Every emitted element
+ * therefore covers one contiguous run of frames, and everything inside it starts with a negative
+ * delay of the run's first frame, which puts it back in step with the rest of the file.
+ */
+export declare function buildSvgDocument(options: SvgDocumentOptions): string;

package/dist/studio/svg-export.js

@@ -0,0 +1,276 @@
+// Turns the frames a composition drew into one animated SVG. The stage's DOM goes inside a
+// <foreignObject>; every value that changed between frames (inline styles, SVG attributes, which
+// elements exist, what a text node says) is replayed by CSS @keyframes that step at the frame rate,
+// so the file shows the same picture at the same instant as the video. No DOM APIs here: the
+// recorder (svg-recorder.ts) feeds samples in, this module only builds strings.
+export const XHTML_NS = 'http://www.w3.org/1999/xhtml';
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
+/** Appends a sample unless the value is the one already in force. */
+export function pushSample(track, at, value) {
+    const last = track[track.length - 1];
+    if (!last || last.value !== value) {
+        track.push({ at, value });
+    }
+}
+/** The value in force at a frame index; `undefined` before the first sample. */
+export function sampleAt(track, at) {
+    let result;
+    for (const sample of track) {
+        if (sample.at > at) {
+            break;
+        }
+        result = sample.value;
+    }
+    return result;
+}
+// --- SVG attributes that CSS can animate ---------------------------------------------------------
+const PRESENTATION_ATTRIBUTES = new Set([
+    'opacity', 'fill', 'fill-opacity', 'fill-rule', 'stroke', 'stroke-opacity', 'stroke-width',
+    'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit',
+    'color', 'visibility',
+]);
+const GEOMETRY_ATTRIBUTES = new Set(['x', 'y', 'cx', 'cy', 'r', 'rx', 'ry', 'width', 'height']);
+const GEOMETRY_ELEMENTS = new Set(['rect', 'circle', 'ellipse', 'image', 'svg', 'foreignObject', 'use']);
+const NUMBER = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?$/i;
+/** `rotate(45 10 10) translate(5)` (SVG attribute syntax) → the same transform in CSS syntax. */
+export function svgTransformToCss(value) {
+    const functions = [];
+    const pattern = /([a-zA-Z]+)\s*\(([^)]*)\)/g;
+    const leftover = value.replace(pattern, (_, name, rawArgs) => {
+        const args = rawArgs.trim().split(/[\s,]+/).filter(Boolean).map(Number);
+        if (args.some(Number.isNaN)) {
+            functions.push('\0');
+            return '';
+        }
+        const [a = 0, b, c] = args;
+        switch (name) {
+            case 'translate':
+                functions.push(`translate(${a}px, ${b ?? 0}px)`);
+                break;
+            case 'scale':
+                functions.push(`scale(${a}, ${b ?? a})`);
+                break;
+            case 'rotate':
+                functions.push(b === undefined
+                    ? `rotate(${a}deg)`
+                    : `translate(${b}px, ${c ?? 0}px) rotate(${a}deg) translate(${-b}px, ${-(c ?? 0)}px)`);
+                break;
+            case 'skewX':
+            case 'skewY':
+                functions.push(`${name}(${a}deg)`);
+                break;
+            case 'matrix':
+                functions.push(args.length === 6 ? `matrix(${args.join(', ')})` : '\0');
+                break;
+            default:
+                functions.push('\0');
+        }
+        return '';
+    });
+    if (leftover.trim() !== '' || functions.includes('\0')) {
+        return null;
+    }
+    return functions.length === 0 ? 'none' : functions.join(' ');
+}
+/** The CSS declaration that reproduces an SVG attribute, or `null` when CSS can't express it. */
+export function attributeAsCss(namespace, tag, name, value) {
+    if (namespace !== SVG_NS) {
+        return null;
+    }
+    if (name === 'transform') {
+        const converted = svgTransformToCss(value);
+        return converted === null ? null : { property: 'transform', value: converted };
+    }
+    if (PRESENTATION_ATTRIBUTES.has(name)) {
+        return { property: name, value };
+    }
+    if (GEOMETRY_ATTRIBUTES.has(name) && GEOMETRY_ELEMENTS.has(tag)) {
+        const trimmed = value.trim();
+        return { property: name, value: NUMBER.test(trimmed) && Number(trimmed) !== 0 ? `${trimmed}px` : trimmed };
+    }
+    return null;
+}
+// --- Serialization helpers -----------------------------------------------------------------------
+// eslint-disable-next-line no-control-regex
+const INVALID_XML = /[\x00-\x08\x0B\x0C\x0E-\x1F\uFFFE\uFFFF]/g;
+const XML_NAME = /^[A-Za-z_:][\w.:-]*$/;
+const VOID_HTML = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
+export function escapeText(value) {
+    return value.replace(INVALID_XML, '').replace(/[&<>]/g, char => (char === '&' ? '&amp;' : char === '<' ? '&lt;' : '&gt;'));
+}
+export function escapeAttribute(value) {
+    return escapeText(value).replace(/"/g, '&quot;');
+}
+/** Percentage of the timeline where frame index `at` starts. */
+export function keyframeOffset(at, frames) {
+    return `${Number(((at / frames) * 100).toFixed(6))}%`;
+}
+const isVarying = (track) => track.length > 1;
+/** Value of a track at an index, falling back to its first value before the track starts. */
+function trackValue(track, at) {
+    const first = track[0];
+    return first && at < first.at ? first.value : sampleAt(track, at);
+}
+/**
+ * Chromium only starts the animations of an element once every ancestor is displayed, so whatever
+ * sits inside an element that appears at frame k would run k frames late. Every emitted element
+ * therefore covers one contiguous run of frames, and everything inside it starts with a negative
+ * delay of the run's first frame, which puts it back in step with the rest of the file.
+ */
+export function buildSvgDocument(options) {
+    const { records, frames, fps, loop, width, height } = options;
+    const keyframes = [];
+    const seconds = (count) => `${Number((count / fps).toFixed(6))}s`;
+    const animation = (name, revealAt) => `animation:${name} ${seconds(frames)} step-end${revealAt > 0 ? ` -${seconds(revealAt)}` : ''} ${loop ? 'infinite' : '1 forwards'}`;
+    const presentAt = (record, at) => sampleAt(record.presence, at) === true;
+    /** Present and not hidden by its own `display: none`. */
+    const renderedAt = (record, at) => presentAt(record, at) && trackValue(record.display, at) !== 'none';
+    /** `@keyframes` holding every animated property at every index where any of them changes. */
+    const defineKeyframes = (name, animated) => {
+        const indices = new Set([0]);
+        for (const track of animated.values()) {
+            for (const sample of track) {
+                if (sample.at < frames) {
+                    indices.add(sample.at);
+                }
+            }
+        }
+        const declarations = (at) => [...animated]
+            .map(([property, track]) => `${property}:${trackValue(track, at) ?? 'revert-layer'}`)
+            .join(';');
+        // A keyframe that repeats the previous one changes nothing: skip it.
+        const body = [];
+        let previous = null;
+        for (const at of [...indices].sort((a, b) => a - b)) {
+            const current = declarations(at);
+            if (current !== previous) {
+                body.push(`${keyframeOffset(at, frames)}{${current}}`);
+                previous = current;
+            }
+        }
+        body.push(`100%{${declarations(frames - 1)}}`);
+        keyframes.push(`@keyframes ${name}{${body.join('')}}`);
+    };
+    /** A `display` track that hides the node outside `range`; `null` when the enclosing element already does. */
+    const displayTrack = (range, parentRange, shown) => {
+        if (range.from === parentRange.from && range.to === parentRange.to) {
+            return null;
+        }
+        const track = [];
+        for (let at = 0; at < frames; at++) {
+            pushSample(track, at, at >= range.from && at <= range.to ? shown(at) : 'none');
+        }
+        return track;
+    };
+    /** Splits the frames where `visible` holds into runs where `signature` doesn't change. */
+    const runsOf = (visible, signature) => {
+        const runs = [];
+        let current = null;
+        for (let at = 0; at < frames; at++) {
+            if (!visible(at)) {
+                current = null;
+                continue;
+            }
+            const key = signature(at);
+            if (current && current.key === key) {
+                current.to = at;
+            }
+            else {
+                current = { from: at, to: at, key };
+                runs.push(current);
+            }
+        }
+        return runs;
+    };
+    const emitNode = (id, parentNamespace, parentRange) => {
+        const record = records.get(id);
+        if (!record) {
+            return '';
+        }
+        return record.kind === 'text' ? emitText(record, parentNamespace, parentRange) : emitElement(record, parentNamespace, parentRange);
+    };
+    const emitText = (record, parentNamespace, parentRange) => {
+        const runs = runsOf(at => presentAt(record, at), at => trackValue(record.data, at) ?? '');
+        if (runs.length === 1 && runs[0].from === parentRange.from && runs[0].to === parentRange.to) {
+            return escapeText(trackValue(record.data, parentRange.from) ?? '');
+        }
+        // The text changes or comes and goes: one wrapper per run, shown only during it.
+        const svgParent = parentNamespace === SVG_NS;
+        const tag = svgParent ? 'tspan' : 'span';
+        return runs.map((run) => {
+            const name = `fm${record.id}-${run.from}`;
+            defineKeyframes(name, new Map([['display', displayTrack(run, parentRange, () => (svgParent ? 'inline' : 'contents'))]]));
+            const text = escapeText(trackValue(record.data, run.from) ?? '');
+            return `<${tag} style="${escapeAttribute(animation(name, parentRange.from))}">${text}</${tag}>`;
+        }).join('');
+    };
+    const emitElement = (record, parentNamespace, parentRange) => {
+        const { namespace, tag } = record;
+        if (tag === 'script') {
+            return '';
+        }
+        // One copy per run of frames where the element is rendered and the attributes CSS can't
+        // animate keep their values.
+        const variants = [...record.attributes].filter(([name, track]) => isVarying(track) && attributeAsCss(namespace, tag, name, trackValue(track, 0) ?? '') === null);
+        const runs = runsOf(at => renderedAt(record, at), at => variants.map(([, track]) => trackValue(track, at) ?? '\0').join('\u0001'));
+        return runs.map(run => emitCopy(record, parentNamespace, parentRange, run, runs.length === 1 ? `fm${record.id}` : `fm${record.id}-${run.from}`)).join('');
+    };
+    const emitCopy = (record, parentNamespace, parentRange, range, name) => {
+        const { namespace, tag } = record;
+        const animated = new Map();
+        const attributes = [];
+        const declarations = [];
+        for (const [attribute, track] of record.attributes) {
+            const value = trackValue(track, range.from);
+            if (value !== null && value !== undefined && XML_NAME.test(attribute) && !/^on/i.test(attribute)) {
+                attributes.push(` ${attribute}="${escapeAttribute(value)}"`);
+            }
+            if (isVarying(track)) {
+                const css = attributeAsCss(namespace, tag, attribute, value ?? '');
+                if (css) {
+                    animated.set(css.property, track.map(sample => ({
+                        at: sample.at,
+                        value: sample.value === null ? null : (attributeAsCss(namespace, tag, attribute, sample.value)?.value ?? null),
+                    })));
+                }
+            }
+        }
+        const inlineStyle = trackValue(record.inlineStyle, range.from)?.trim().replace(/;$/, '');
+        if (inlineStyle) {
+            declarations.push(inlineStyle);
+        }
+        for (const [property, track] of record.style) {
+            if (isVarying(track)) {
+                animated.set(property, track);
+            }
+        }
+        const display = displayTrack(range, parentRange, at => trackValue(record.display, at) ?? 'block');
+        if (display) {
+            animated.set('display', display);
+        }
+        if (animated.size > 0) {
+            defineKeyframes(name, animated);
+            declarations.push(animation(name, parentRange.from));
+        }
+        if (declarations.length > 0) {
+            attributes.push(` style="${escapeAttribute(declarations.join(';'))}"`);
+        }
+        const xmlns = namespace === parentNamespace ? '' : ` xmlns="${escapeAttribute(namespace)}"`;
+        const children = record.children.map(child => emitNode(child, namespace, range)).join('');
+        const open = `<${tag}${xmlns}${attributes.join('')}`;
+        if (children === '' && (namespace !== XHTML_NS || VOID_HTML.has(tag))) {
+            return `${open}/>`;
+        }
+        return `${open}>${children}</${tag}>`;
+    };
+    const content = emitNode(options.root, SVG_NS, { from: 0, to: frames - 1 });
+    const style = `${options.css}\n${keyframes.join('\n')}`;
+    return [
+        `<svg xmlns="${SVG_NS}" xmlns:xlink="${XLINK_NS}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
+        `<style>${escapeText(style)}</style>`,
+        `<foreignObject x="0" y="0" width="${width}" height="${height}">${content}</foreignObject>`,
+        '</svg>',
+        '',
+    ].join('\n');
+}

package/dist/studio/svg-recorder.d.ts

@@ -0,0 +1,40 @@
+export type SvgRecorderFinish = {
+    readonly fps: number;
+    readonly loop: boolean;
+    readonly width: number;
+    readonly height: number;
+};
+/** `U+0000-00FF, U+0131, U+02??` → `[[0, 255], [305, 305], [512, 767]]`. */
+export declare function parseUnicodeRange(value: string): [number, number][];
+export declare class SvgRecorder {
+    private readonly records;
+    private readonly ids;
+    private readonly families;
+    private readonly codePoints;
+    private readonly warnings;
+    private readonly resources;
+    private present;
+    private nextId;
+    private root;
+    private frames;
+    /** Samples the stage as it is right now, as the next frame of the output. */
+    record(stage: Element): void;
+    finish({ fps, loop, width, height }: SvgRecorderFinish): Promise<{
+        svg: string;
+        warnings: string[];
+    }>;
+    private visitElement;
+    private visitText;
+    private elementRecord;
+    /** Keeps `child` right after `previous` in the merged child order of `parent`. */
+    private place;
+    private track;
+    /** The resource as a data: URL, fetched once; `null` (and a warning) when it can't be read. */
+    private resource;
+    /** Replaces every `url()` of a CSS text with a data: URL. */
+    private inlineCssUrls;
+    private inlineTrackResources;
+    private fontFaceIsUsed;
+    private collectSheet;
+    private collectCss;
+}

package/dist/studio/svg-recorder.js

@@ -0,0 +1,312 @@
+// Runs in the render page. After each frame is drawn it samples the stage's DOM (which nodes exist,
+// their attributes and inline styles, the text) and, at the end, embeds the stylesheets and the
+// resources they use and hands everything to svg-export.ts to build the animated SVG.
+import { buildSvgDocument, pushSample, XHTML_NS, } from './svg-export.js';
+const URL_IN_CSS = /url\(\s*(["']?)([^"')]+)\1\s*\)/g;
+const RESOURCE_ATTRIBUTES = new Set(['src', 'href', 'xlink:href', 'poster']);
+const normalizeFamily = (name) => name.trim().replace(/^["']|["']$/g, '').trim().toLowerCase();
+/** `U+0000-00FF, U+0131, U+02??` → `[[0, 255], [305, 305], [512, 767]]`. */
+export function parseUnicodeRange(value) {
+    const ranges = [];
+    for (const part of value.split(',')) {
+        const match = /^\s*U\+([0-9A-F?]+)(?:-([0-9A-F]+))?\s*$/i.exec(part);
+        if (!match) {
+            continue;
+        }
+        const [, start, end] = match;
+        if (start.includes('?')) {
+            ranges.push([parseInt(start.replace(/\?/g, '0'), 16), parseInt(start.replace(/\?/g, 'F'), 16)]);
+        }
+        else {
+            ranges.push([parseInt(start, 16), parseInt(end ?? start, 16)]);
+        }
+    }
+    return ranges;
+}
+export class SvgRecorder {
+    records = new Map();
+    ids = new WeakMap();
+    families = new Set();
+    codePoints = new Set();
+    warnings = [];
+    resources = new Map();
+    present = new Set();
+    nextId = 1;
+    root = null;
+    frames = 0;
+    /** Samples the stage as it is right now, as the next frame of the output. */
+    record(stage) {
+        const at = this.frames++;
+        const now = new Set();
+        this.root = this.visitElement(stage, null, at, now).id;
+        for (const id of this.present) {
+            if (!now.has(id)) {
+                pushSample(this.records.get(id).presence, at, false);
+            }
+        }
+        this.present = now;
+    }
+    async finish({ fps, loop, width, height }) {
+        if (this.root === null) {
+            throw new Error('No frame was recorded.');
+        }
+        const css = await this.collectCss();
+        await this.inlineTrackResources();
+        const svg = buildSvgDocument({ records: this.records, root: this.root, frames: this.frames, fps, loop, width, height, css });
+        return { svg, warnings: this.warnings };
+    }
+    // --- Sampling ----------------------------------------------------------------------------------
+    visitElement(element, parent, at, now) {
+        const record = this.elementRecord(element, parent);
+        now.add(record.id);
+        pushSample(record.presence, at, true);
+        const seen = new Set();
+        for (const { name, value } of element.attributes) {
+            if (name === 'style') {
+                continue;
+            }
+            seen.add(name);
+            pushSample(this.track(record.attributes, name), at, value);
+        }
+        if (element instanceof HTMLCanvasElement) {
+            // A canvas has no markup; what it drew travels as an image.
+            seen.add('src');
+            pushSample(this.track(record.attributes, 'src'), at, element.toDataURL());
+        }
+        for (const [name, track] of record.attributes) {
+            if (!seen.has(name)) {
+                pushSample(track, at, null);
+            }
+        }
+        const style = element.style;
+        const declared = new Set();
+        pushSample(record.inlineStyle, at, style?.cssText ?? '');
+        if (style) {
+            for (let i = 0; i < style.length; i++) {
+                const property = style.item(i);
+                declared.add(property);
+                pushSample(this.track(record.style, property), at, style.getPropertyValue(property));
+            }
+        }
+        for (const [property, track] of record.style) {
+            if (!declared.has(property)) {
+                pushSample(track, at, null);
+            }
+        }
+        const computed = getComputedStyle(element);
+        pushSample(record.display, at, computed.display);
+        let previous = null;
+        let hasText = false;
+        for (const child of element.childNodes) {
+            let childRecord = null;
+            if (child instanceof Element) {
+                childRecord = this.visitElement(child, record, at, now);
+            }
+            else if (child.nodeType === Node.TEXT_NODE) {
+                childRecord = this.visitText(child, record, at, now);
+                hasText ||= child.data.trim() !== '';
+            }
+            if (childRecord) {
+                this.place(record, childRecord.id, previous);
+                previous = childRecord.id;
+            }
+        }
+        if (hasText) {
+            computed.fontFamily.split(',').forEach(family => this.families.add(normalizeFamily(family)));
+        }
+        return record;
+    }
+    visitText(text, parent, at, now) {
+        let id = this.ids.get(text);
+        let record = id === undefined ? undefined : this.records.get(id);
+        if (!record || record.parent !== parent.id) {
+            id = this.nextId++;
+            record = { kind: 'text', id, parent: parent.id, presence: [], data: [] };
+            this.ids.set(text, id);
+            this.records.set(id, record);
+        }
+        now.add(record.id);
+        pushSample(record.presence, at, true);
+        pushSample(record.data, at, text.data);
+        for (const char of text.data) {
+            this.codePoints.add(char.codePointAt(0));
+        }
+        return record;
+    }
+    elementRecord(element, parent) {
+        const id = this.ids.get(element);
+        const existing = id === undefined ? undefined : this.records.get(id);
+        // A node that moved to another parent starts a new life; the old record simply ends.
+        if (existing && existing.parent === (parent?.id ?? null)) {
+            return existing;
+        }
+        const canvas = element instanceof HTMLCanvasElement;
+        const record = {
+            kind: 'element',
+            id: this.nextId++,
+            parent: parent?.id ?? null,
+            namespace: element.namespaceURI ?? XHTML_NS,
+            tag: canvas ? 'img' : element.localName,
+            children: [],
+            presence: [],
+            attributes: new Map(),
+            style: new Map(),
+            inlineStyle: [],
+            display: [],
+        };
+        this.ids.set(element, record.id);
+        this.records.set(record.id, record);
+        return record;
+    }
+    /** Keeps `child` right after `previous` in the merged child order of `parent`. */
+    place(parent, child, previous) {
+        if (parent.children.includes(child)) {
+            return;
+        }
+        const index = previous === null ? -1 : parent.children.indexOf(previous);
+        parent.children.splice(index + 1, 0, child);
+    }
+    track(map, key) {
+        let track = map.get(key);
+        if (!track) {
+            track = [];
+            map.set(key, track);
+        }
+        return track;
+    }
+    // --- Resources ---------------------------------------------------------------------------------
+    /** The resource as a data: URL, fetched once; `null` (and a warning) when it can't be read. */
+    resource(url, base) {
+        let absolute;
+        try {
+            absolute = new URL(url, base).href;
+        }
+        catch {
+            return Promise.resolve(null);
+        }
+        if (/^(data|blob|about):/.test(absolute) || url.startsWith('#')) {
+            return Promise.resolve(null);
+        }
+        let pending = this.resources.get(absolute);
+        if (!pending) {
+            pending = fetch(absolute)
+                .then(async (response) => {
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+                const blob = await response.blob();
+                return await new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => resolve(reader.result);
+                    reader.onerror = () => reject(reader.error);
+                    reader.readAsDataURL(blob);
+                });
+            })
+                .catch((error) => {
+                this.warnings.push(`Could not embed ${absolute} (${error instanceof Error ? error.message : String(error)}); the SVG links to it instead.`);
+                return null;
+            });
+            this.resources.set(absolute, pending);
+        }
+        return pending;
+    }
+    /** Replaces every `url()` of a CSS text with a data: URL. */
+    async inlineCssUrls(css, base) {
+        const urls = [...css.matchAll(URL_IN_CSS)].map(match => match[2]);
+        const replacements = new Map(await Promise.all(urls.map(async (url) => [url, await this.resource(url, base)])));
+        return css.replace(URL_IN_CSS, (whole, _quote, url) => {
+            const data = replacements.get(url);
+            return data ? `url("${data}")` : whole;
+        });
+    }
+    async inlineTrackResources() {
+        const base = document.baseURI;
+        const jobs = [];
+        for (const record of this.records.values()) {
+            if (record.kind !== 'element') {
+                continue;
+            }
+            for (const [name, track] of record.attributes) {
+                if (!RESOURCE_ATTRIBUTES.has(name)) {
+                    continue;
+                }
+                for (const sample of track) {
+                    if (sample.value !== null) {
+                        jobs.push(this.resource(sample.value, base).then((data) => {
+                            if (data) {
+                                sample.value = data;
+                            }
+                        }));
+                    }
+                }
+            }
+            for (const track of [...record.style.values(), record.inlineStyle]) {
+                for (const sample of track) {
+                    if (sample.value !== null && sample.value.includes('url(')) {
+                        jobs.push(this.inlineCssUrls(sample.value, base).then((value) => {
+                            sample.value = value;
+                        }));
+                    }
+                }
+            }
+        }
+        await Promise.all(jobs);
+    }
+    // --- Stylesheets -------------------------------------------------------------------------------
+    fontFaceIsUsed(rule) {
+        const family = normalizeFamily(rule.style.getPropertyValue('font-family'));
+        if (!this.families.has(family)) {
+            return false;
+        }
+        const range = rule.style.getPropertyValue('unicode-range');
+        if (!range) {
+            return true;
+        }
+        const ranges = parseUnicodeRange(range);
+        for (const codePoint of this.codePoints) {
+            if (ranges.some(([start, end]) => codePoint >= start && codePoint <= end)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    async collectSheet(sheet, parts) {
+        const base = sheet.href ?? document.baseURI;
+        let rules;
+        try {
+            rules = sheet.cssRules;
+        }
+        catch {
+            // Cross-origin: take the text as served.
+            const text = sheet.href ? await fetch(sheet.href).then(response => (response.ok ? response.text() : null)).catch(() => null) : null;
+            if (text === null) {
+                this.warnings.push(`Could not read the stylesheet ${sheet.href}; its rules are missing from the SVG.`);
+                return;
+            }
+            parts.push(await this.inlineCssUrls(text, base));
+            return;
+        }
+        for (const rule of rules) {
+            if (rule instanceof CSSImportRule) {
+                if (rule.styleSheet) {
+                    await this.collectSheet(rule.styleSheet, parts);
+                }
+            }
+            else if (rule instanceof CSSFontFaceRule) {
+                if (this.fontFaceIsUsed(rule)) {
+                    parts.push(await this.inlineCssUrls(rule.cssText, base));
+                }
+            }
+            else {
+                parts.push(await this.inlineCssUrls(rule.cssText, base));
+            }
+        }
+    }
+    async collectCss() {
+        const parts = [];
+        for (const sheet of [...document.styleSheets, ...document.adoptedStyleSheets]) {
+            await this.collectSheet(sheet, parts);
+        }
+        return parts.join('\n');
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemotion",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Make videos with React. Frame-driven animations, a live studio and an MP4 renderer, all MIT.",
   "keywords": [
     "react",
@@ -9,6 +9,7 @@
     "motion",
     "mp4",
     "gif",
+    "svg",
     "ffmpeg",
     "vite",
     "programmatic-video",

package/templates/default/node_modules/.vitest-cache/CACHEDIR.TAG

@@ -1,3 +0,0 @@
-Signature: 8a477f597d28d172789f06886806bc55
-# This file is a cache directory tag created by Vitest.
-# For information about cache directory tags see https://bford.info/cachedir/

package/templates/default/node_modules/.vitest-cache/_metadata.json

@@ -1,3 +0,0 @@
-{
-  "lockfileHash": "14d20b12"
-}