domotion-svg 0.27.0 → 0.27.2

package/assets/fonts/fixture/README.md

@@ -1,7 +1,10 @@
 # Deterministic fixture faces
 
-Subsetted fonts the frame-sequence compressor's e2e fixtures render with, so
-those fixtures paint the same glyph outlines on macOS, Linux, and Windows.
+Deterministic fonts used by cross-platform and platform-native test fixtures.
+
+`DomotionFixtureMono-Regular.ttf` and `DomotionFixtureSerif-Regular.ttf` are
+the subsetted faces the frame-sequence compressor's e2e fixtures render with,
+so those fixtures paint the same glyph outlines on macOS, Linux, and Windows.
 
 They exist because the compressor e2e tests assert pixel parity between a
 compressed run and the uncompressed flipbook of the same state, bounded by the
@@ -31,9 +34,20 @@ paint. The OFL permits redistribution of modified copies under a reserved-name
 rule, which is why the outputs carry neutral `DomotionFixture*` names rather
 than the upstream family names.
 
+`DomotionProfileDevanagariOne-Regular.ttf` and
+`DomotionProfileDevanagariTwo-Regular.ttf` are original, generated test fonts.
+Each contains only `.notdef` and U+0905. The Windows profile/target authority
+workflow installs them into the runner's real per-user font collection, then
+authenticates their painted family identities through
+`CSS.getPlatformFontsForNode`. They replace the Windows supplemental
+language-capability installation without weakening the non-inert mutation gate.
+
 ## Regenerating
 
 `tools/build-fixture-fonts.mjs` rebuilds both from the upstream originals (it
 prints the download URLs). The subset is deterministic — same inputs and the
 same harfbuzzjs version produce byte-identical output, so a re-run must leave
 `git status` clean unless an input or the charset actually changed.
+
+Run `node tools/build-generic-profile-fixture-fonts.mjs` to rebuild the two
+original profile-authority faces.

package/dist/animation/embed-namespace.d.ts

@@ -12,6 +12,8 @@
  *  - **embedded-font families** — `font-family:"dmf0"` in `@font-face` + the
  *    `<text font-family="dmf0">` attrs. A duplicate family name makes a later
  *    `@font-face` win, so text in OTHER frames reshapes to the wrong glyphs.
+ *    Already-composed input can carry a prior namespace such as `sb0_dmf0`;
+ *    nesting it again must namespace that whole family as one identifier.
  *  - **frame / animation classes** — `class="f f-0"`, `class="anim-…"` and their
  *    `.f` / `.f-0` / `.anim-…` style selectors.
  *  - **`@keyframes` names** — `fv-0`, the intra-frame `f0-…` names — and the

package/dist/animation/embed-namespace.js

@@ -12,6 +12,8 @@
  *  - **embedded-font families** — `font-family:"dmf0"` in `@font-face` + the
  *    `<text font-family="dmf0">` attrs. A duplicate family name makes a later
  *    `@font-face` win, so text in OTHER frames reshapes to the wrong glyphs.
+ *    Already-composed input can carry a prior namespace such as `sb0_dmf0`;
+ *    nesting it again must namespace that whole family as one identifier.
  *  - **frame / animation classes** — `class="f f-0"`, `class="anim-…"` and their
  *    `.f` / `.f-0` / `.anim-…` style selectors.
  *  - **`@keyframes` names** — `fv-0`, the intra-frame `f0-…` names — and the
@@ -49,14 +51,16 @@ export function namespaceEmbeddedAnimatedSvg(svg, token, opts = {}) {
             .replace(new RegExp(`url\\(#${e}\\)`, "g"), `url(#${token}${id})`)
             .replace(new RegExp(`((?:xlink:)?href=")#${e}(")`, "g"), `$1#${token}${id}$2`);
     }
-    // 2. Embedded-font families (`dmfN`). Only the `@font-face` declaration and the
+    // 2. Embedded-font families (`dmfN`, including already-prefixed families from a
+    //    previously composed SVG). Only the `@font-face` declaration and the
     //    `font-family` attr/decl contexts — never a bare global replace, since the
     //    base64 `src` payload could contain the same byte sequence. Skipped when the
     //    fonts are deferred to a shared outer builder (see NamespaceEmbedOptions).
     if (opts.namespaceFonts !== false) {
+        const embeddedFamily = "(?:[A-Za-z][A-Za-z0-9_-]*_)?dmf\\d+";
         out = out
-            .replace(/(font-family:\s*")(dmf\d+)(")/g, `$1${token}$2$3`)
-            .replace(/(font-family=")(dmf\d+)(")/g, `$1${token}$2$3`);
+            .replace(new RegExp(`(font-family:\\s*(?:"|&quot;))(${embeddedFamily})((?:"|&quot;))`, "g"), `$1${token}$2$3`)
+            .replace(new RegExp(`(font-family=")(${embeddedFamily})(")`, "g"), `$1${token}$2$3`);
     }
     // 3. `@keyframes` names + their `animation:` references. A keyframe name is a
     //    domotion-generated token (`fv-0`, `f0-f0a0-0`, …) that never appears as an

package/dist/animation/embed-timeline.d.ts

@@ -60,6 +60,8 @@ export interface OffsetTimelineOptions {
     startMs: number;
     /** The master loop's total period (ms). */
     masterMs: number;
+    /** Begin at this source-local time while preserving browser interpolation. */
+    contentOffsetMs?: number;
     /**
      * Timeline mode (default `"hold"`). See {@link EmbeddedTimelineMode}.
      */

package/dist/animation/embed-timeline.js

@@ -154,6 +154,7 @@ export function offsetEmbeddedAnimatedSvgTimeline(svg, opts) {
     const windowMs = mode === "stretch" ? (opts.windowMs ?? periodMs) : periodMs;
     const scale = windowMs / masterMs;
     const offsetPct = (startMs / masterMs) * 100;
+    const contentOffsetMs = Math.max(0, opts.contentOffsetMs ?? 0);
     // Duration match tolerance — generous enough to absorb the animator's 2- vs
     // 3-decimal formatting, tight enough not to catch a distinct fixed period.
     const tol = Math.max(0.02, periodSec * 0.01);
@@ -175,7 +176,7 @@ export function offsetEmbeddedAnimatedSvgTimeline(svg, opts) {
             .replace(/style="([^"]*animation:[^"]*)"/g, (_full, css) => `style="${delayCss(css)}"`);
     }
     // Nothing to do: content already starts at the origin and fills the loop.
-    if (offsetPct <= 1e-6 && Math.abs(scale - 1) <= 1e-6)
+    if (contentOffsetMs <= 0 && offsetPct <= 1e-6 && Math.abs(scale - 1) <= 1e-6)
         return svg;
     // Pass 1: retime matching animations + collect the keyframe names they drive.
     // Untouched declarations (e.g. a fixed-period cursor blink) are returned
@@ -203,13 +204,18 @@ export function offsetEmbeddedAnimatedSvgTimeline(svg, opts) {
             }
             return tokens.join(" ");
         });
-        return changed ? `animation:${entries.join(",")}` : full;
+        if (!changed)
+            return full;
+        const shiftedDelay = contentOffsetMs > 0
+            ? `;animation-delay:${fmt((startMs - contentOffsetMs) / 1000)}s;animation-fill-mode:both`
+            : "";
+        return `animation:${entries.join(",")}${shiftedDelay}`;
     });
     let out = svg
         .replace(/<style>([\s\S]*?)<\/style>/g, (_full, css) => `<style>${retimeCss(css)}</style>`)
         .replace(/style="([^"]*animation:[^"]*)"/g, (_full, css) => `style="${retimeCss(css)}"`);
     // Pass 2: remap the keyframes those animations drive.
-    out = out.replace(/@keyframes\s+([\w-]+)\s*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g, (full, name, inner) => retimed.has(name) ? `@keyframes ${name} { ${remapKeyframeBody(inner, offsetPct, scale)} }` : full);
+    out = out.replace(/@keyframes\s+([\w-]+)\s*\{((?:[^{}]*\{[^{}]*\})*[^{}]*)\}/g, (full, name, inner) => retimed.has(name) ? `@keyframes ${name} { ${remapKeyframeBody(inner, contentOffsetMs > 0 ? 0 : offsetPct, scale)} }` : full);
     return out;
 }
 /** Animation-shorthand keywords that are never the `animation-name`. */

package/dist/animation/svg-generator.d.ts

@@ -36,6 +36,8 @@ export interface AnimationFrame {
      * `offsetEmbeddedAnimatedSvgTimeline`). Omit for ordinary captured frames.
      */
     embeddedAnimationPeriodMs?: number;
+    /** Start this embedded animation at a source-local offset (used by storyboard trim). */
+    embeddedAnimationOffsetMs?: number;
     /** Transition to the next frame. The type is derived from the canonical zod schema. */
     transition?: Transition;
     /**

package/dist/animation/svg-generator.js

@@ -1132,6 +1132,7 @@ function generateAnimatedSvgBody(config) {
                     periodMs: f.embeddedAnimationPeriodMs,
                     startMs,
                     masterMs: totalDuration,
+                    contentOffsetMs: f.embeddedAnimationOffsetMs,
                 }),
             };
         });

package/dist/cli/animate-orchestrator.js

@@ -1461,7 +1461,21 @@ async function buildCapturedFrame(fc, i, ctx) {
             cullElementsOutsideViewBox(seg.tree, scrollClip[2], scrollClip[3], undefined, 0, 1);
         }
         rootBg = segments[0]?.tree?.[0]?.styles?.rootBgComputed;
-        const composed = composeScrollSvg(segments, { viewportW: scrollClip[2], viewportH: scrollClip[3] });
+        // The scroll composer owns a complete nested document and starts its own
+        // generation, so isolate that reset from the outer animation's accumulated
+        // glyph/font registries. Otherwise a scroll frame after an ordinary capture
+        // rewinds gN/dmfN and replaces the earlier frame's addressing. Namespace the
+        // finished document too: Blink resolves local SVG IRIs through the shared
+        // TreeScope, so a nested <svg> is not an id boundary.
+        const outerGeneration = snapshotGeneration();
+        let composed;
+        try {
+            composed = composeScrollSvg(segments, { viewportW: scrollClip[2], viewportH: scrollClip[3] });
+        }
+        finally {
+            restoreGeneration(outerGeneration);
+        }
+        composed = namespaceEmbeddedAnimatedSvg(composed, `sf${i}_`);
         // The composer emits a full `<?xml ...><svg>...</svg>` document. The
         // outer animator wraps `svgContent` in a `<g class="f f-N">`, which
         // happily contains a nested `<svg>` element — strip just the XML

package/dist/cli/common.js

@@ -11,7 +11,7 @@ import { existsSync, readFileSync, writeFileSync } from "node:fs";
 import { basename, dirname, resolve } from "node:path";
 import { pathToFileURL } from "node:url";
 import { promisify } from "node:util";
-import { gzipSvg } from "../index.js";
+import { gzipSvg } from "../post-processing/index.js";
 const execFileP = promisify(execFile);
 /** Parse a positive-integer flag, falling back to `def` when the flag is absent.
  *  Thin default-applying wrapper over `parsePositiveInt` so the two share one

package/dist/cli/composite.d.ts

@@ -19,6 +19,117 @@
  */
 import type { Browser } from "@playwright/test";
 import { z } from "zod";
+export declare const compositeLayerAnimationSchema: z.ZodObject<{
+    property: z.ZodEnum<{
+        opacity: "opacity";
+        transform: "transform";
+        scale: "scale";
+        translateX: "translateX";
+        translateY: "translateY";
+        clipScaleX: "clipScaleX";
+        clipScaleY: "clipScaleY";
+    }>;
+    from: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+    to: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+    start: z.ZodOptional<z.ZodNumber>;
+    duration: z.ZodOptional<z.ZodNumber>;
+    easing: z.ZodOptional<z.ZodString>;
+    transformOrigin: z.ZodOptional<z.ZodString>;
+}, z.core.$strip>;
+export declare const compositeLayerChromeSchema: z.ZodObject<{
+    device: z.ZodDefault<z.ZodEnum<{
+        browser: "browser";
+        phone: "phone";
+        window: "window";
+    }>>;
+    label: z.ZodOptional<z.ZodString>;
+    theme: z.ZodDefault<z.ZodEnum<{
+        light: "light";
+        dark: "dark";
+    }>>;
+}, z.core.$strip>;
+export declare const compositeLayerPlacementSchema: z.ZodObject<{
+    x: z.ZodOptional<z.ZodNumber>;
+    y: z.ZodOptional<z.ZodNumber>;
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    clip: z.ZodOptional<z.ZodBoolean>;
+    clipRadius: z.ZodOptional<z.ZodNumber>;
+    start: z.ZodOptional<z.ZodNumber>;
+    mode: z.ZodOptional<z.ZodEnum<{
+        stretch: "stretch";
+        hold: "hold";
+        loop: "loop";
+    }>>;
+    duration: z.ZodOptional<z.ZodNumber>;
+    animations: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        property: z.ZodEnum<{
+            opacity: "opacity";
+            transform: "transform";
+            scale: "scale";
+            translateX: "translateX";
+            translateY: "translateY";
+            clipScaleX: "clipScaleX";
+            clipScaleY: "clipScaleY";
+        }>;
+        from: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+        to: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+        start: z.ZodOptional<z.ZodNumber>;
+        duration: z.ZodOptional<z.ZodNumber>;
+        easing: z.ZodOptional<z.ZodString>;
+        transformOrigin: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>>;
+}, z.core.$strip>;
+export declare const compositeLayerSchema: z.ZodObject<{
+    x: z.ZodOptional<z.ZodNumber>;
+    y: z.ZodOptional<z.ZodNumber>;
+    width: z.ZodOptional<z.ZodNumber>;
+    height: z.ZodOptional<z.ZodNumber>;
+    clip: z.ZodOptional<z.ZodBoolean>;
+    clipRadius: z.ZodOptional<z.ZodNumber>;
+    start: z.ZodOptional<z.ZodNumber>;
+    mode: z.ZodOptional<z.ZodEnum<{
+        stretch: "stretch";
+        hold: "hold";
+        loop: "loop";
+    }>>;
+    duration: z.ZodOptional<z.ZodNumber>;
+    animations: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        property: z.ZodEnum<{
+            opacity: "opacity";
+            transform: "transform";
+            scale: "scale";
+            translateX: "translateX";
+            translateY: "translateY";
+            clipScaleX: "clipScaleX";
+            clipScaleY: "clipScaleY";
+        }>;
+        from: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+        to: z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>;
+        start: z.ZodOptional<z.ZodNumber>;
+        duration: z.ZodOptional<z.ZodNumber>;
+        easing: z.ZodOptional<z.ZodString>;
+        transformOrigin: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>>;
+    svg: z.ZodOptional<z.ZodString>;
+    cast: z.ZodOptional<z.ZodString>;
+    template: z.ZodOptional<z.ZodString>;
+    params: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    term: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+    period: z.ZodOptional<z.ZodNumber>;
+    chrome: z.ZodOptional<z.ZodObject<{
+        device: z.ZodDefault<z.ZodEnum<{
+            browser: "browser";
+            phone: "phone";
+            window: "window";
+        }>>;
+        label: z.ZodOptional<z.ZodString>;
+        theme: z.ZodDefault<z.ZodEnum<{
+            light: "light";
+            dark: "dark";
+        }>>;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
 export declare const compositeConfigSchema: z.ZodObject<{
     width: z.ZodNumber;
     height: z.ZodNumber;
@@ -26,24 +137,6 @@ export declare const compositeConfigSchema: z.ZodObject<{
     background: z.ZodOptional<z.ZodString>;
     duration: z.ZodOptional<z.ZodNumber>;
     layers: z.ZodArray<z.ZodObject<{
-        svg: z.ZodOptional<z.ZodString>;
-        cast: z.ZodOptional<z.ZodString>;
-        template: z.ZodOptional<z.ZodString>;
-        params: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-        term: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
-        period: z.ZodOptional<z.ZodNumber>;
-        chrome: z.ZodOptional<z.ZodObject<{
-            device: z.ZodDefault<z.ZodEnum<{
-                browser: "browser";
-                phone: "phone";
-                window: "window";
-            }>>;
-            label: z.ZodOptional<z.ZodString>;
-            theme: z.ZodDefault<z.ZodEnum<{
-                light: "light";
-                dark: "dark";
-            }>>;
-        }, z.core.$strip>>;
         x: z.ZodOptional<z.ZodNumber>;
         y: z.ZodOptional<z.ZodNumber>;
         width: z.ZodOptional<z.ZodNumber>;
@@ -74,9 +167,29 @@ export declare const compositeConfigSchema: z.ZodObject<{
             easing: z.ZodOptional<z.ZodString>;
             transformOrigin: z.ZodOptional<z.ZodString>;
         }, z.core.$strip>>>;
+        svg: z.ZodOptional<z.ZodString>;
+        cast: z.ZodOptional<z.ZodString>;
+        template: z.ZodOptional<z.ZodString>;
+        params: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        term: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
+        period: z.ZodOptional<z.ZodNumber>;
+        chrome: z.ZodOptional<z.ZodObject<{
+            device: z.ZodDefault<z.ZodEnum<{
+                browser: "browser";
+                phone: "phone";
+                window: "window";
+            }>>;
+            label: z.ZodOptional<z.ZodString>;
+            theme: z.ZodDefault<z.ZodEnum<{
+                light: "light";
+                dark: "dark";
+            }>>;
+        }, z.core.$strip>>;
     }, z.core.$strip>>;
 }, z.core.$strip>;
 export type CompositeConfig = z.infer<typeof compositeConfigSchema>;
+export type CompositeLayerConfig = z.infer<typeof compositeLayerSchema>;
+export type CompositeLayerPlacement = z.infer<typeof compositeLayerPlacementSchema>;
 export declare function validateCompositeConfig(raw: unknown): CompositeConfig;
 /** Render + composite a validated config into one animated SVG. */
 export declare function composeCompositeConfig(browser: Browser, cfg: CompositeConfig, configDir: string, log?: (m: string) => void): Promise<string>;

package/dist/cli/composite.js

@@ -27,7 +27,7 @@ import { DEVICE_CHROMES, CHROME_THEMES, wrapInDeviceChrome, clearEmbeddedFonts,
 import { composeAnimatedLayers } from "../animation/composite.js";
 import { parseSvgIntrinsicSize, detectAnimationPeriodMs } from "../animation/svg-meta.js";
 import { cliFail } from "./common.js";
-const layerAnimationSchema = z.object({
+export const compositeLayerAnimationSchema = z.object({
     property: z.enum(["scale", "translateX", "translateY", "opacity", "transform", "clipScaleX", "clipScaleY"]),
     from: z.union([z.string(), z.number()]),
     to: z.union([z.string(), z.number()]),
@@ -36,33 +36,35 @@ const layerAnimationSchema = z.object({
     easing: z.string().optional(),
     transformOrigin: z.string().optional(),
 });
-const chromeSchema = z.object({
+export const compositeLayerChromeSchema = z.object({
     device: z.enum(DEVICE_CHROMES).default("window"),
     label: z.string().optional(),
     theme: z.enum(CHROME_THEMES).default("dark"),
 });
-const layerSchema = z.object({
-    // Exactly one source — enforced in the superRefine below.
-    svg: z.string().optional().describe("Path to a pre-rendered SVG (static or animated)."),
-    cast: z.string().optional().describe("Path to an asciinema v2 .cast (rendered as an animated terminal)."),
-    template: z.string().optional().describe("A template name to render as the source."),
-    params: z.record(z.string(), z.unknown()).optional().describe("Params for a `template` source."),
-    term: z.record(z.string(), z.unknown()).optional().describe("Terminal options for a `cast` source."),
-    // Period of an animated `svg` source (ms), when it can't be auto-detected.
-    period: z.number().positive().optional(),
-    chrome: chromeSchema.optional(),
-    // Placement.
+export const compositeLayerPlacementSchema = z.object({
     x: z.number().optional(),
     y: z.number().optional(),
     width: z.number().positive().optional(),
     height: z.number().positive().optional(),
     clip: z.boolean().optional(),
     clipRadius: z.number().nonnegative().optional(),
-    // Timeline of the layer's own animation.
     start: z.number().nonnegative().optional(),
     mode: z.enum(["hold", "stretch", "loop"]).optional(),
     duration: z.number().positive().optional(),
-    animations: z.array(layerAnimationSchema).optional(),
+    animations: z.array(compositeLayerAnimationSchema).optional(),
+});
+export const compositeLayerSchema = z.object({
+    // Exactly one source — enforced in the superRefine below.
+    svg: z.string().optional().describe("Path to a pre-rendered SVG (static or animated)."),
+    cast: z.string().optional().describe("Path to an asciinema v2 .cast (rendered as an animated terminal)."),
+    template: z.string().optional().describe("A template name to render as the source."),
+    params: z.record(z.string(), z.unknown()).optional().describe("Params for a `template` source."),
+    term: z.record(z.string(), z.unknown()).optional().describe("Terminal options for a `cast` source."),
+    // Period of an animated `svg` source (ms), when it can't be auto-detected.
+    period: z.number().positive().optional(),
+    chrome: compositeLayerChromeSchema.optional(),
+    // Placement.
+    ...compositeLayerPlacementSchema.shape,
 }).superRefine((l, ctx) => {
     const sources = [l.svg, l.cast, l.template].filter((s) => s != null);
     if (sources.length !== 1) {
@@ -75,7 +77,7 @@ export const compositeConfigSchema = z.object({
     output: z.string().optional(),
     background: z.string().optional(),
     duration: z.number().positive().optional(),
-    layers: z.array(layerSchema).min(1),
+    layers: z.array(compositeLayerSchema).min(1),
 });
 export function validateCompositeConfig(raw) {
     const parsed = compositeConfigSchema.safeParse(raw);

package/dist/cli/index.d.ts

@@ -6,6 +6,7 @@
  *   domotion capture  <input> [options]   single-frame capture
  *   domotion animate  <config.json>       multi-frame animated capture
  *   domotion term     --cast <file>       terminal session → animated SVG (DM-1225)
+ *   domotion studio   [project.json]      standalone Studio authoring app
  *
  * `<input>` for `capture` may be:
  *   - a URL (`https://...`, `http://...`)

package/dist/cli/index.js

@@ -6,6 +6,7 @@
  *   domotion capture  <input> [options]   single-frame capture
  *   domotion animate  <config.json>       multi-frame animated capture
  *   domotion term     --cast <file>       terminal session → animated SVG (DM-1225)
+ *   domotion studio   [project.json]      standalone Studio authoring app
  *
  * `<input>` for `capture` may be:
  *   - a URL (`https://...`, `http://...`)
@@ -22,6 +23,7 @@ import { runTerm } from "./term.js";
 import { runTemplate } from "./template.js";
 import { runComposite } from "./composite.js";
 import { runStoryboard } from "./storyboard.js";
+import { runStudio } from "./studio.js";
 // Read the version from package.json at runtime rather than hardcoding it, so
 // `domotion --version` always matches the installed package (the literal had
 // drifted to 0.1.0 while the package was at 0.5.0). Resolved relative to this
@@ -38,6 +40,7 @@ Usage:
   domotion template <name> [--param …] -o out.svg
   domotion composite <config.json> [-o out.svg]
   domotion storyboard <config.json> [-o out.svg]
+  domotion studio [project.json] [--workspace <dir>]
   domotion --help | --version
 
 Commands:
@@ -56,6 +59,8 @@ Commands:
   storyboard Sequence distinct SCENES (template / capture / cast / svg) end-to-end
             into one animated SVG with an inter-scene transition between each
             (title card → demo → CTA). Run 'domotion storyboard --help'.
+  studio    Open the standalone Domotion Studio local app to create, inspect,
+            edit, validate, save, and reopen versioned Studio project files.
 
 capture options:
   -o, --output <path>      Output SVG path (default: stdout, or <input>.svg
@@ -315,6 +320,9 @@ async function main() {
         else if (cmd === "storyboard") {
             await runStoryboard(rest);
         }
+        else if (cmd === "studio") {
+            await runStudio(rest);
+        }
         else {
             process.stderr.write(`domotion: unknown command "${cmd}"\n\n`);
             process.stderr.write(HELP);