@devmotion/cli 0.7.0 → 0.8.0

package/README.md

@@ -202,6 +202,19 @@ devmotion mcp --print-config   # print the JSON config snippet to paste into you
 The CLI MCP and the SaaS MCP share the same `mutations.ts` code path, so an
 agent that knows how to drive one knows how to drive the other.
 
+Install the Agent Skill and MCP configuration for Claude Code, Codex, or both:
+
+```bash
+npx @devmotion/cli setup
+# Non-interactive:
+npx @devmotion/cli setup --agent both --scope global
+```
+
+Global skills are installed to `~/.claude/skills/devmotion/SKILL.md` and
+`~/.agents/skills/devmotion/SKILL.md`. Use `--scope project` for repository-local
+configuration. The skill prefers the type-safe MCP operations over editing scene
+HTML by hand.
+
 ---
 
 ## Two ways to use DevMotion

package/dist/index.js

@@ -617,368 +617,155 @@ var mcpCommand = defineCommand4({
 
 // src/commands/setup.ts
 import { defineCommand as defineCommand5 } from "citty";
-import { writeFile as writeFile2, mkdir as mkdir2, readFile } from "fs/promises";
-import { join as join7 } from "path";
 import { existsSync as existsSync6 } from "fs";
-var SKILLS = {
-  "devmotion.md": `# DevMotion \u2014 HTML-first Video Tooling
-
-DevMotion is a code-driven video creation platform. Projects are defined as HTML files with \`data-dm-*\` attributes \u2014 every annotated element becomes a layer on the timeline.
-
-## Project Structure
-
-\`\`\`
-my-video/
-\u251C\u2500\u2500 devmotion.json     # Project config (resolution, FPS, duration, scenes)
-\u251C\u2500\u2500 scenes/
-\u2502   \u251C\u2500\u2500 intro.html     # One HTML file per scene
-\u2502   \u2514\u2500\u2500 outro.html
-\u2514\u2500\u2500 assets/            # Images, videos, fonts
-\`\`\`
-
-## Layers
-
-Each HTML element with \`data-dm-*\` attributes is a layer. Two syntaxes:
-
-### 1. Generic HTML (\`data-dm-*\` attributes)
-\`\`\`html
-<div data-dm-id="my-layer"
-     data-dm-enter="fade-in"
-     data-dm-enter-time="0.5"
-     data-dm-duration="0.8"
-     data-dm-easing="ease-out"
-     data-dm-keyframe-opacity="0:0; 0.5:1; 4:1; 5:0"
-     style="color: white; font-size: 48px;">
-  Hello World
-</div>
-\`\`\`
-
-### 2. Premium \`<dm-*>\` Custom Elements
-16 specialized layer types: dm-phone, dm-video, dm-audio, dm-text, dm-image, dm-browser, dm-laptop, dm-terminal, dm-captions, dm-code, dm-button, dm-icon, dm-shape, dm-html, dm-mouse, dm-group
-
-\`\`\`html
-<dm-phone data-dm-id="demo"
-          data-dm-enter="slide-in-right"
-          data-dm-enter-time="1.5"
-          data-dm-duration="0.6"
-          src="./assets/screen.mp4">
-</dm-phone>
-\`\`\`
-
-## Key Attributes
-
-| Attribute | Description | Example |
-|-----------|-------------|---------|
-| \`data-dm-id\` | Unique layer identifier | \`"title"\` |
-| \`data-dm-enter\` | Entry animation preset | \`"fade-in"\` |
-| \`data-dm-exit\` | Exit animation preset | \`"fade-out"\` |
-| \`data-dm-enter-time\` | Start time in seconds | \`"0.5"\` |
-| \`data-dm-duration\` | How long on screen | \`"2.0"\` |
-| \`data-dm-easing\` | Animation easing | \`"ease-out"\` |
-| \`data-dm-track\` | Timeline track (z-order) | \`"0"\` |
-| \`data-dm-locked\` | Lock layer from edits | \`"true"\` |
-| \`data-dm-hidden\` | Hide layer | (boolean attribute) |
-| \`data-dm-keyframe-*\` | Property animation | \`data-dm-keyframe-opacity="0:0; 1:1@ease-out"\` |
-| \`data-dm-word-separator\` | Optional separator for \`word-reveal\` text keyframes | \`" "\` |
-| \`data-dm-grid-increment\` | Grid step for \`snap-grid\` quantized keyframes | \`"0.25"\` |
-
-### \`dm-text\` reveal transition attributes
-
-For polished letter/word reveals, combine \`@char-reveal\` or \`@word-reveal\`
-with per-fragment transition attributes:
-
-| Attribute | Description | Example |
-|-----------|-------------|---------|
-| \`transition-effects\` | Comma-separated effects for new characters/words | \`"fade,slide-up,blur"\` |
-| \`transition-duration\` | Per-fragment transition duration in ms | \`"350"\` |
-| \`transition-easing\` | Easing for each fragment | \`"ease-in-quad"\` |
-| \`slide-distance\` | Slide distance as % of project width | \`"2.7"\` |
-| \`scale-from\` | Initial scale for \`scale\` effect | \`"0.5"\` |
-| \`blur-amount\` | Initial blur as % of project width | \`"0.78"\` |
-| \`transition-color-from\` | Optional starting color | \`"#7de3ff"\` |
-| \`expand-on-reveal\` | Expand each fragment from zero width | \`"true"\` |
-
-## Keyframe Interpolation Syntax
-
-Keyframes use \`time:value@strategy\`. The \`@strategy\` suffix selects the
-interpolation family automatically:
-
-- Continuous easing: \`linear\`, \`ease-out\`, \`ease-in-out\`, \`ease-out-quad\`, etc.
-- Discrete jumps: \`step-start\`, \`step-end\`, \`step-mid\`
-- Quantized values: \`integer\`, \`snap-grid\` (set \`data-dm-grid-increment\`)
-- Text reveals for \`props.content\`: \`char-reveal\`, \`word-reveal\`
-
-\`\`\`html
-<dm-text
-  data-dm-id="headline"
-  data-dm-keyframe-props-content="0:@char-reveal; 1.4:Welcome to DevMotion@char-reveal"
->
-  Welcome to DevMotion
-</dm-text>
-
-<dm-text
-  data-dm-id="subtitle"
-  transition-effects="fade,slide-up,blur"
-  transition-duration="350"
-  transition-easing="ease-in-quad"
-  slide-distance="2.7"
-  blur-amount="0.78"
-  data-dm-word-separator=" "
-  data-dm-keyframe-props-content="2.7:@word-reveal; 4.1:a prompt away from being a producer@word-reveal"
->
-  a prompt away from being a producer
-</dm-text>
-
-<dm-shape
-  data-dm-id="meter"
-  data-dm-grid-increment="0.25"
-  data-dm-keyframe-scale-x="0:0@snap-grid; 1:1@snap-grid"
-></dm-shape>
-\`\`\`
-
-## Presets
-
-fade-in, fade-out, reveal-up, reveal-right, reveal-left, slide-in-left, slide-in-right, slide-in-top, slide-in-bottom, slide-out-left, slide-out-right, wipe-down, wipe-right, scale-in, scale-out, pop, bounce, bounce-in, rotate-in, spin, pulse, shake, float, glow, zoom-in, zoom-out, flip-in-x, flip-in-y, swing
-
-## Easing Functions
-
-linear, ease-in, ease-out, ease-in-out, ease-in-quad/out/in-out, ease-in-cubic/out/in-out, ease-in-quart/out/in-out, ease-in-quint/out/in-out, ease-in-sine/out/in-out, ease-in-expo/out/in-out, ease-in-circ/out/in-out, ease-in-back/out/in-out, ease-in-bounce/out/in-out, ease-in-elastic/out/in-out
-
-## MCP Tools (available when devmotion MCP is connected)
-
-- \`get_project\` \u2014 Get current project state with all layers
-- \`upsert_layer\` \u2014 Add a new layer (omit layerId) or modify an existing one (pass layerId)
-- \`remove_layer\` \u2014 Delete a layer
-- \`configure_project\` \u2014 Change project settings (resolution, FPS, etc.)
-
-## Commands
-
-- \`devmotion init <name>\` \u2014 Scaffold new project
-- \`devmotion preview\` \u2014 Open the local Studio for visual editing and render preview
-- \`devmotion render\` \u2014 Render to MP4 (auto-spawns Studio if needed)
-- \`devmotion add-scene <name>\` \u2014 Add a scene (--with gsap|lottie|bare)
-- \`devmotion mcp\` \u2014 Run the local MCP server over stdio
-- \`devmotion mcp --print-config\` \u2014 Print a stdio MCP config snippet
-- \`devmotion doctor\` \u2014 Check ffmpeg & Playwright are installed
-
-## If the \`devmotion\` command is not found
-
-These commands need the DevMotion CLI on the machine. If \`devmotion\` is missing
-(\`command not found\`), do ONE of the following before retrying:
-
-- Run a command without installing globally: prefix it with npx, e.g.
-  \`npx @devmotion/cli render\` or \`npx @devmotion/cli preview\`.
-- Or install it once globally: \`npm i -g @devmotion/cli\`, then use the bare
-  \`devmotion ...\` commands.
-
-Prefer \`npx @devmotion/cli ...\` when you just need to run a single command.
-`,
-  "devmotion-init.md": `# /devmotion-init \u2014 Scaffold a New DevMotion Project
-
-Run \`devmotion init <name>\` to create a new video project from scratch.
-
-## What it does
-
-1. Creates a project directory with:
-   - \`devmotion.json\` \u2014 1920\xD71080, 30fps, 10s, dark background
-   - \`scenes/intro.html\` \u2014 Starter scene with a title and a phone demo
-   - \`assets/\` \u2014 Empty directory for media files
-   - \`.gitignore\` \u2014 Ignores build artifacts
-   - \`README.md\` \u2014 Quick start guide
-
-2. The generated \`intro.html\` includes:
-   - A centered title div with \`data-dm-*\` attributes (fade-in, keyframed opacity)
-   - A \`<dm-phone>\` element with slide-in-right preset
-
-## Usage
-
-\`\`\`
-/devmotion-init my-product-demo
-\`\`\`
-
-Always run this as the FIRST step when a user asks to create a video. After scaffolding:
-- Use the MCP \`upsert_layer\` tool (or edit HTML directly) to add content
-- Use \`devmotion preview\` to see the result in the Studio
-- Use \`devmotion render\` to export MP4
-
-## Important
-
-- The command creates a subdirectory in the current working directory
-- After init, cd into the new directory before using other devmotion commands
-- If \`devmotion\` is not found, run it via npx \u2014 \`npx @devmotion/cli init <name>\`
-  \u2014 or install once with \`npm i -g @devmotion/cli\`.
-`,
-  "devmotion-add-layer.md": `# /devmotion-add-layer \u2014 Add a Layer to the Timeline
-
-Adds a new animated layer to the current DevMotion project.
-
-## When MCP is connected
-
-Use the \`upsert_layer\` MCP tool (omit \`layerId\` to create). Required parameters:
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| \`layerType\` | string | One of: phone, video, audio, text, image, browser, laptop, terminal, captions, code, button, icon, shape, html, mouse, group |
-| \`enterTime\` | number | Start time in seconds (default: 0) |
-| \`exitTime\` | number | End time (optional) |
-| \`track\` | integer | Z-order track (default: 0) |
-| \`name\` | string | Human-readable name |
-| \`props\` | object | Layer-specific properties |
-| \`preset\` | string | Entry animation preset |
-| \`presetDuration\` | number | Preset duration in seconds (default: 0.5) |
-| \`easing\` | string | Easing function |
-
-## Layer-specific props
-
-### text
-\`\`\`json
-{ "content": "Hello World", "fontSize": 48, "color": "#ffffff", "fontFamily": "system-ui", "textAlign": "center" }
-\`\`\`
-
-### video / audio
-\`\`\`json
-{ "src": "./assets/demo.mp4", "volume": 100 }
-\`\`\`
-
-### image
-\`\`\`json
-{ "src": "./assets/logo.png", "fit": "cover" }
-\`\`\`
-
-### phone / browser / laptop
-\`\`\`json
-{ "src": "./assets/screen.mp4", "url": "https://example.com" }
-\`\`\`
-
-### shape
-\`\`\`json
-{ "shape": "circle", "color": "#3b82f6", "size": 200 }
-\`\`\`
-
-### button
-\`\`\`json
-{ "label": "Click Me", "url": "https://example.com", "color": "#3b82f6" }
-\`\`\`
-
-### code
-\`\`\`json
-{ "code": "console.log('hello')", "language": "javascript", "showLineNumbers": true }
-\`\`\`
-
-### icon
-\`\`\`json
-{ "icon": "star", "color": "#fbbf24", "size": 64 }
-\`\`\`
-
-## Best Practices
-
-- Layer IDs must be unique within a project
-- Use enterTime to sequence layers (stagger them for professional look)
-- Keep text layers between 0.5-3s for readability
-- Use track to control z-ordering (higher = on top)
-- In HTML, keyframes use \`time:value@strategy\`. Use \`@char-reveal\` or
-  \`@word-reveal\` for text \`props.content\`, \`@step-end\` / \`@step-start\`
-  for discrete jumps, and \`@snap-grid\` with \`data-dm-grid-increment\` for
-  quantized values.
-- For polished \`dm-text\` reveals, add \`transition-effects\` (for example
-  \`fade,slide-up,blur\`), \`transition-duration\`, \`transition-easing\`,
-  \`slide-distance\`, \`scale-from\`, and \`blur-amount\`.
-`,
-  "devmotion-render.md": `# /devmotion-render \u2014 Render Project to MP4
-
-Renders the current DevMotion project to an MP4 video file.
-
-## Usage
-
-\`\`\`
-/devmotion-render
-\`\`\`
-
-## How it works
-
-1. Validates the project structure (devmotion.json + all scene HTML files)
-2. Opens a headless browser (Playwright)
-3. Renders each frame deterministically using the virtualized clock
-4. Pipes frames through ffmpeg to produce H.264 MP4
-5. Output: \`output.mp4\` by default, or the path passed with \`--output\`
-
-## Prerequisites
-
-- The DevMotion CLI. If \`devmotion\` is not found, run it via npx instead:
-  \`npx @devmotion/cli render\` \u2014 or install once with \`npm i -g @devmotion/cli\`.
-- The CLI-bundled ffmpeg and Playwright Chromium. Run \`devmotion doctor\` to verify them.
-- All asset paths in layers are valid (relative to project root)
-
-## Command
-
-Run from a directory that contains \`devmotion.json\`:
-
-\`\`\`bash
-devmotion render
-# or
-npx @devmotion/cli render --output out.mp4
-\`\`\`
-
-\`devmotion render\` starts an ephemeral local Studio automatically if one is not already running.
-
-## After Render
-
-The output MP4 is saved to \`output.mp4\` unless you pass \`--output\`. You can play it, upload it, or use it as a video layer in another DevMotion project.
-`
+import { mkdir as mkdir2, readFile, writeFile as writeFile2 } from "fs/promises";
+import { homedir } from "os";
+import { dirname as dirname2, join as join7 } from "path";
+import { createInterface as createInterface2 } from "readline/promises";
+import { stdin, stdout } from "process";
+var SKILL = `---
+name: devmotion
+description: Create, edit, preview, and render DevMotion videos. Use when the user asks to build or modify an animation, scene, timeline, layer, or video with DevMotion.
+---
+
+# DevMotion
+
+Use DevMotion's local MCP tools as the primary interface. They are type-safe and share the
+same mutation layer as the SaaS editor, so prefer them over writing or rewriting scene HTML.
+
+## Workflow
+
+1. If the current directory has no \`devmotion.json\`, run
+   \`npx @devmotion/cli init <name>\` and work inside the generated directory.
+2. Call \`get_project\` before editing an existing project.
+3. Use the MCP tools to create, edit, remove, group, and animate layers and to configure the
+   project. Prefer small, incremental mutations and preserve existing layer IDs.
+4. Use \`npx @devmotion/cli preview\` for visual inspection.
+5. Use \`npx @devmotion/cli render --output <file.mp4>\` for final output.
+
+## Editing rules
+
+- Prefer MCP operations over hand-authored \`data-dm-*\` HTML. Edit scene HTML directly only
+  when the requested capability is not exposed by MCP, such as custom markup or scripts.
+- When direct HTML is necessary, preserve scripts, styles, comments, IDs, and existing
+  \`data-dm-*\` attributes; then call \`get_project\` to verify the parsed result.
+- Use layer schemas returned by the MCP server rather than guessing property shapes.
+- Sequence layers with readable timing, use animation presets where appropriate, and keep
+  important content inside the project bounds.
+- Do not start the Studio just to mutate project data; the stdio MCP server writes directly to
+  the local project. Preview is for visual verification and render is for export.
+
+## CLI fallback
+
+If the bare \`devmotion\` command is unavailable, always use \`npx @devmotion/cli ...\`.
+Run \`npx @devmotion/cli doctor\` when preview or render dependencies fail.
+`;
+var MCP_SERVER = {
+  command: "npx",
+  args: ["-y", "@devmotion/cli", "mcp"]
 };
+async function readJson(path) {
+  if (!existsSync6(path)) return {};
+  try {
+    return JSON.parse(await readFile(path, "utf8"));
+  } catch {
+    throw new Error(`Cannot parse existing JSON config: ${path}`);
+  }
+}
+async function installClaude(root, scope) {
+  const skillDir = join7(root, ".claude", "skills", "devmotion");
+  await mkdir2(skillDir, { recursive: true });
+  await writeFile2(join7(skillDir, "SKILL.md"), SKILL);
+  const configPath = scope === "global" ? join7(root, ".claude.json") : join7(root, ".mcp.json");
+  const config = await readJson(configPath);
+  config.mcpServers = {
+    ...config.mcpServers ?? {},
+    devmotion: { type: "stdio", ...MCP_SERVER }
+  };
+  await mkdir2(dirname2(configPath), { recursive: true });
+  await writeFile2(configPath, JSON.stringify(config, null, 2) + "\n");
+  return [join7(skillDir, "SKILL.md"), configPath];
+}
+function upsertCodexMcp(source) {
+  const block = `[mcp_servers.devmotion]
+command = "npx"
+args = ["-y", "@devmotion/cli", "mcp"]`;
+  const pattern = /^\[mcp_servers\.devmotion\][\s\S]*?(?=^\[|\s*$)/m;
+  if (pattern.test(source)) return source.replace(pattern, `${block}
+
+`);
+  return `${source.trimEnd()}${source.trim() ? "\n\n" : ""}${block}
+`;
+}
+async function installCodex(root) {
+  const skillDir = join7(root, ".agents", "skills", "devmotion");
+  const configPath = join7(root, ".codex", "config.toml");
+  await mkdir2(skillDir, { recursive: true });
+  await writeFile2(join7(skillDir, "SKILL.md"), SKILL);
+  await mkdir2(dirname2(configPath), { recursive: true });
+  const existing = existsSync6(configPath) ? await readFile(configPath, "utf8") : "";
+  await writeFile2(configPath, upsertCodexMcp(existing));
+  return [join7(skillDir, "SKILL.md"), configPath];
+}
+async function promptChoice() {
+  const rl = createInterface2({ input: stdin, output: stdout });
+  try {
+    const agentAnswer = (await rl.question("Agent [both/claude/codex] (both): ")).trim().toLowerCase();
+    const scopeAnswer = (await rl.question("Install scope [global/project] (global): ")).trim().toLowerCase();
+    const agents = agentAnswer === "claude" ? ["claude"] : agentAnswer === "codex" ? ["codex"] : ["claude", "codex"];
+    return { agents, scope: scopeAnswer === "project" ? "project" : "global" };
+  } finally {
+    rl.close();
+  }
+}
 var setupCommand = defineCommand5({
   meta: {
     name: "setup",
-    description: "Install Claude Code skills and wire MCP server"
+    description: "Install the DevMotion skill and MCP server for Claude Code and/or Codex"
   },
   args: {
     dir: {
       type: "positional",
-      description: "Target project directory (default: cwd)",
+      description: "Project directory used with --scope project",
       required: false
+    },
+    agent: {
+      type: "string",
+      description: "Agent to configure: claude, codex, or both"
+    },
+    scope: {
+      type: "string",
+      description: "Install globally for the current user or in the project: global or project"
     }
   },
   async run({ args }) {
-    const projectDir = args.dir || process.cwd();
-    const skillsDir = join7(projectDir, ".claude", "skills");
-    const settingsPath = join7(projectDir, ".claude", "settings.local.json");
-    await mkdir2(skillsDir, { recursive: true });
-    console.log(`\u{1F4C1} ${skillsDir}/`);
-    for (const [filename, content] of Object.entries(SKILLS)) {
-      const path = join7(skillsDir, filename);
-      await writeFile2(path, content);
-      console.log(`   \u2705 ${filename}`);
+    const suppliedAgent = args.agent;
+    const suppliedScope = args.scope;
+    const interactive = stdin.isTTY && stdout.isTTY && !suppliedAgent && !suppliedScope;
+    const prompted = interactive ? await promptChoice() : {
+      agents: suppliedAgent === "claude" ? ["claude"] : suppliedAgent === "codex" ? ["codex"] : ["claude", "codex"],
+      scope: suppliedScope === "project" ? "project" : "global"
+    };
+    if (suppliedAgent && !["claude", "codex", "both"].includes(suppliedAgent)) {
+      throw new Error("--agent must be claude, codex, or both");
     }
-    let settings = {};
-    if (existsSync6(settingsPath)) {
-      try {
-        const raw = await readFile(settingsPath, "utf-8");
-        settings = JSON.parse(raw);
-      } catch {
-        console.log("\u26A0\uFE0F  Could not parse existing settings.local.json, overwriting.");
-      }
+    if (suppliedScope && !["global", "project"].includes(suppliedScope)) {
+      throw new Error("--scope must be global or project");
+    }
+    const root = prompted.scope === "global" ? homedir() : args.dir || process.cwd();
+    const installed = [];
+    if (prompted.agents.includes("claude")) {
+      installed.push(...await installClaude(root, prompted.scope));
+    }
+    if (prompted.agents.includes("codex")) {
+      installed.push(...await installCodex(root));
     }
-    settings.mcpServers = {
-      ...settings.mcpServers || {},
-      devmotion: {
-        command: "npx",
-        args: ["@devmotion/cli", "mcp"],
-        description: "DevMotion \u2014 HTML-first video tooling. Create/edit video layers via MCP (writes scene HTML)."
-      }
-    };
-    await writeFile2(settingsPath, JSON.stringify(settings, null, 2) + "\n");
-    console.log(`   \u2705 settings.local.json (MCP wired)`);
     console.log(`
-\u2728 DevMotion Claude Code integration installed!
-`);
-    console.log("  Available slash commands:");
-    console.log("    /devmotion-init        \u2014 Scaffold new project");
-    console.log("    /devmotion-add-layer    \u2014 Add a layer");
-    console.log("    /devmotion-render      \u2014 Render to MP4");
-    console.log();
-    console.log("  MCP tools (when in a devmotion project dir):");
-    console.log("    get_project, upsert_layer, remove_layer, configure_project");
-    console.log();
+DevMotion configured for ${prompted.agents.join(" + ")} (${prompted.scope}).`);
+    for (const path of installed) console.log(`  ${path}`);
+    console.log(
+      "\nThe skill uses the local type-safe MCP tools before editing scene HTML directly."
+    );
   }
 });
 
@@ -986,9 +773,9 @@ var setupCommand = defineCommand5({
 import { defineCommand as defineCommand6 } from "citty";
 import { readFileSync, writeFileSync, existsSync as existsSync7 } from "fs";
 import { writeFile as writeFile3, mkdir as mkdir3 } from "fs/promises";
-import { join as join8, dirname as dirname2, resolve as resolve2 } from "path";
+import { join as join8, dirname as dirname3, resolve as resolve2 } from "path";
 import { fileURLToPath as fileURLToPath3 } from "url";
-var __dirname = dirname2(fileURLToPath3(import.meta.url));
+var __dirname = dirname3(fileURLToPath3(import.meta.url));
 function findTemplatesDir() {
   let dir = __dirname;
   for (let i = 0; i < 6; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devmotion/cli",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "HTML-first, agent-friendly video tooling. Write HTML. Render video.",
   "type": "module",
   "main": "./dist/index.js",

package/studio/client/_app/immutable/chunks/4QfhfUmj.js

@@ -0,0 +1 @@
+import{e as i}from"./CClcTVCL.js";function t(){const e=i.PUBLIC_LOCAL_PROJECT_DIR!==void 0&&i.PUBLIC_LOCAL_PROJECT_DIR!=="";return i.PUBLIC_DESKTOP_MODE!=="true"&&!e}function _(e,n){typeof window<"u"&&window.plausible&&window.plausible(e,n?{props:n}:void 0)}function s(e,n){typeof window>"u"||window.__DEVMOTION_SERVICES__?.posthog?.capture(e,n)}function d(e,n){typeof window>"u"||window.__DEVMOTION_SERVICES__?.posthog?.identify(e,n)}function u(){typeof window>"u"||window.__DEVMOTION_SERVICES__?.posthog?.reset()}export{s as c,d as i,u as r,_ as t,t as u};

package/studio/client/_app/immutable/chunks/B4vsfLqj.js

@@ -0,0 +1 @@
+import"./CM9l4cpH.js";import{j as a,k as o,b as e,s as J,o as L,f as K,r as N,c as Q,g as z,p as R,e as U,i as j,q}from"./Da3fz6L-.js";import{s as M}from"./D4RaOAJg.js";import{i as O}from"./Cflu-v0E.js";import{p,b as V,r as W}from"./BZ3Ts6hC.js";import{T as X,t as S}from"./CDjRusee.js";import{s as Y}from"./CHlhpGna.js";import{c as $}from"./DRyTCxrl.js";import{T as Z,a as tt,b as et}from"./Cv2_oVuk.js";import{B as rt}from"./COdfvEKk.js";import{S as ot,M as at}from"./BcZVIP5f.js";var st=z("<p> </p>"),nt=z("<!> <!>",1);function it(u,t){let g=p(t,"delayDuration",3,400),_=p(t,"side",3,"top"),d=p(t,"sideOffset",3,0),h=W(t,["$$slots","$$events","$$legacy","content","delayDuration","side","sideOffset","contentClass","children"]);var f=a(),n=o(f);$(n,()=>X,(T,b)=>{b(T,{children:(x,k)=>{var c=a(),A=o(c);$(A,()=>Z,(E,F)=>{F(E,{get delayDuration(){return g()},children:(G,lt)=>{var w=nt(),B=o(w);{const i=(l,m)=>{rt(l,V(()=>m?.().props,()=>h,{children:(P,C)=>{var v=a(),r=o(v);M(r,()=>t.children??L),e(P,v)},$$slots:{default:!0}}))};$(B,()=>tt,(l,m)=>{m(l,{child:i,$$slots:{child:!0}})})}var H=J(B,2);{var I=i=>{et(i,{get side(){return _()},get sideOffset(){return d()},get class(){return t.contentClass},children:(l,m)=>{var y=a(),P=o(y);{var C=r=>{var s=st(),D=K(s,!0);N(s),Q(()=>Y(D,t.content)),e(r,s)},v=r=>{var s=a(),D=o(s);M(D,()=>t.content),e(r,s)};O(P,r=>{typeof t.content=="string"?r(C):r(v,-1)})}e(l,y)},$$slots:{default:!0}})};O(H,i=>{t.content&&i(I)})}e(G,w)},$$slots:{default:!0}})}),e(x,c)},$$slots:{default:!0}})}),e(u,f)}function bt(u,t){R(t,!0);let g=p(t,"variant",3,"ghost");const _=q(()=>S.resolvedTheme==="dark"?ot:at);var d=a(),h=o(d);{var f=n=>{{let T=q(()=>S.resolvedTheme==="dark"?"Switch to Light Mode":"Switch to Dark Mode");it(n,{get content(){return j(T)},get variant(){return g()},onclick:()=>S.toggle(),get icon(){return j(_)},children:(b,x)=>{var k=a(),c=o(k);M(c,()=>t.children??L),e(b,k)},$$slots:{default:!0}})}};O(h,n=>{n(f)})}e(u,d),U()}export{bt as T,it as a};

package/studio/client/_app/immutable/chunks/B7SJbUFX.js

@@ -0,0 +1 @@
+import"./CM9l4cpH.js";import{q as T,i as w,h as E,v as F,p as U,j as G,k as L,b as n,e as C,f as _,o as H,r as x,g as y,s as z,n as J,t as K,c as A}from"./Da3fz6L-.js";import{s as B}from"./CHlhpGna.js";import{i as P}from"./Cflu-v0E.js";import{p as r,r as q,b as M}from"./BZ3Ts6hC.js";import{B as N}from"./COdfvEKk.js";import{G as Q,b as V}from"./Cd2UbfQ6.js";import{p as W}from"./B9f32Zzc.js";import{c as X}from"./DRyTCxrl.js";import{c as Y}from"./C3hARZS5.js";import{s as j}from"./D4RaOAJg.js";import{a as Z}from"./Ce3llaYD.js";import{c as $,h as tt,e as et,g as at,b as k,m as rt}from"./DgTYfJMu.js";const ot=et({component:"separator",parts:["root"]});class I{static create(t){return new I(t)}opts;attachment;constructor(t){this.opts=t,this.attachment=$(t.ref)}#t=T(()=>({id:this.opts.id.current,role:this.opts.decorative.current?"none":"separator","aria-orientation":this.opts.orientation.current,"aria-hidden":tt(this.opts.decorative.current),"data-orientation":this.opts.orientation.current,[ot.root]:"",...this.attachment}));get props(){return w(this.#t)}set props(t){E(this.#t,t)}}var st=y("<div><!></div>");function it(u,t){const f=F();U(t,!0);let p=r(t,"id",19,()=>at(f)),v=r(t,"ref",15,null),c=r(t,"decorative",3,!1),h=r(t,"orientation",3,"horizontal"),m=q(t,["$$slots","$$events","$$legacy","id","ref","child","children","decorative","orientation"]);const g=I.create({ref:k(()=>v(),o=>v(o)),id:k(()=>p()),decorative:k(()=>c()),orientation:k(()=>h())}),i=T(()=>rt(m,g.props));var l=G(),R=L(l);{var b=o=>{var s=G(),e=L(s);j(e,()=>t.child,()=>({props:w(i)})),n(o,s)},S=o=>{var s=st();Z(s,()=>({...w(i)}));var e=_(s);j(e,()=>t.children??H),x(s),n(o,s)};P(R,o=>{t.child?o(b):o(S,-1)})}n(u,l),C()}function O(u,t){U(t,!0);let f=r(t,"ref",15,null),p=r(t,"data-slot",3,"separator"),v=q(t,["$$slots","$$events","$$legacy","ref","class","data-slot"]);var c=G(),h=L(c);{let m=T(()=>Y("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px",t.class));X(h,()=>it,(g,i)=>{i(g,M({get"data-slot"(){return p()},get class(){return w(m)}},()=>v,{get ref(){return f()},set ref(l){f(l)}}))})}n(u,c),C()}var nt=y('<div class="relative flex items-center gap-4 py-2"><!> <span class="text-sm text-muted-foreground">OR</span> <!></div>'),ct=y('<p class="text-center text-xs text-muted-foreground"> </p>'),lt=y('<div class="space-y-4"><!> <div class="space-y-3"><!> <!></div></div>');function wt(u,t){U(t,!0);let f=r(t,"showSeparator",3,!1),p=r(t,"variant",3,"outline"),v=r(t,"size",3,"default"),c=r(t,"helperText",3,"Google sign-in includes free AI credits"),h=r(t,"buttonText",3,"Continue with Google");async function m(){try{const e=g(t.callbackURL);await V.signIn.social({provider:"google",callbackURL:e})}catch(e){console.error("Google login failed:",e)}}function g(e){const a=W.url.pathname==="/"?"/editor":W.url.pathname;return e?e.startsWith("/")&&!e.startsWith("//")?e:(console.warn("Invalid callback URL provided, using root instead:",e),a):a}var i=lt(),l=_(i);{var R=e=>{var a=nt(),d=_(a);O(d,{class:"flex-1"});var D=z(d,4);O(D,{class:"flex-1"}),x(a),n(e,a)};P(l,e=>{f()&&e(R)})}var b=z(l,2),S=_(b);N(S,{get variant(){return p()},get size(){return v()},class:"w-full justify-center gap-3",onclick:m,get icon(){return Q},children:(e,a)=>{J();var d=K();A(()=>B(d,h())),n(e,d)},$$slots:{default:!0}});var o=z(S,2);{var s=e=>{var a=ct(),d=_(a,!0);x(a),A(()=>B(d,c())),n(e,a)};P(o,e=>{c()&&e(s)})}x(b),x(i),n(u,i),C()}export{wt as S,O as a};

package/studio/client/_app/immutable/chunks/B9f32Zzc.js

@@ -0,0 +1 @@
+import{p as r}from"./BHu0iPy_.js";import{s as t}from"./DBZQgiHq.js";const e={get data(){return r.data},get error(){return r.error},get form(){return r.form},get params(){return r.params},get route(){return r.route},get state(){return r.state},get status(){return r.status},get url(){return r.url}};t.updated.check;const u=e;export{u as p};

package/studio/client/_app/immutable/chunks/B9f32Zzc.js.br

@@ -0,0 +1 @@
+S
@deN?��)@O,7x��?��<%�2k���]�����B�+M���'���&����W4̨`kW�c���ơ� ��j�+n�ns+��Y�ܥ�X�"���1�2�g�6�	�P�C�%��i:2�`ԇ�ǔ����d0�vʼ�+�q����݇��

package/studio/client/_app/immutable/chunks/BHu0iPy_.js

@@ -0,0 +1 @@
+import{o as S}from"./B-oba5Tq.js";import{a4 as f,i as d,h}from"./Da3fz6L-.js";import{w as $}from"./BV5gdWVz.js";new URL("sveltekit-internal://");function M(e,t){return e==="/"||t==="ignore"?e:t==="never"?e.endsWith("/")?e.slice(0,-1):e:t==="always"&&!e.endsWith("/")?e+"/":e}function X(e){return e.split("%25").map(decodeURI).join("%25")}function Q(e){for(const t in e)e[t]=decodeURIComponent(e[t]);return e}function Z({href:e}){return e.split("#")[0]}function ee(e,t,n,r=!1){const s=new URL(e);Object.defineProperty(s,"searchParams",{value:new Proxy(s.searchParams,{get(a,o){if(o==="get"||o==="getAll"||o==="has")return(l,...u)=>(n(l),a[o](l,...u));t();const i=Reflect.get(a,o);return typeof i=="function"?i.bind(a):i}}),enumerable:!0,configurable:!0});const c=["href","pathname","search","toString","toJSON"];r&&c.push("hash");for(const a of c)Object.defineProperty(s,a,{get(){return t(),e[a]},enumerable:!0,configurable:!0});return s}function L(...e){let t=5381;for(const n of e)if(typeof n=="string"){let r=n.length;for(;r;)t=t*33^n.charCodeAt(--r)}else if(ArrayBuffer.isView(n)){const r=new Uint8Array(n.buffer,n.byteOffset,n.byteLength);let s=r.length;for(;s;)t=t*33^r[--s]}else throw new TypeError("value must be a string or TypedArray");return(t>>>0).toString(36)}const te=new TextEncoder,re=new TextDecoder;function ne(e){let t="";for(let n=0;n<e.length;n++)t+=String.fromCharCode(e[n]);return btoa(t)}function P(e){const t=atob(e),n=new Uint8Array(t.length);for(let r=0;r<t.length;r++)n[r]=t.charCodeAt(r);return n}const j=window.fetch;window.fetch=(e,t)=>((e instanceof Request?e.method:t?.method||"GET")!=="GET"&&_.delete(y(e)),j(e,t));const _=new Map;function se(e,t){const n=y(e,t),r=document.querySelector(n);if(r?.textContent){r.remove();let{body:s,...c}=JSON.parse(r.textContent);const a=r.getAttribute("data-ttl");return a&&_.set(n,{body:s,init:c,ttl:1e3*Number(a)}),r.getAttribute("data-b64")!==null&&(s=P(s)),Promise.resolve(new Response(s,c))}return window.fetch(e,t)}function ae(e,t,n){if(_.size>0){const r=y(e,n),s=_.get(r);if(s){if(performance.now()<s.ttl&&["default","force-cache","only-if-cached",void 0].includes(n?.cache))return new Response(s.body,s.init);_.delete(r)}}return window.fetch(t,n)}function y(e,t){let r=`script[data-sveltekit-fetched][data-url=${JSON.stringify(e instanceof Request?e.url:e)}]`;if(t?.headers||t?.body){const s=[];t.headers&&s.push([...new Headers(t.headers)].join(",")),t.body&&(typeof t.body=="string"||ArrayBuffer.isView(t.body))&&s.push(t.body),r+=`[data-hash="${L(...s)}"]`}return r}const W=/^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;function oe(e){const t=[];return{pattern:e==="/"?/^\/$/:new RegExp(`^${E(e).map(r=>{const s=/^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(r);if(s)return t.push({name:s[1],matcher:s[2],optional:!1,rest:!0,chained:!0}),"(?:/([^]*))?";const c=/^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(r);if(c)return t.push({name:c[1],matcher:c[2],optional:!0,rest:!1,chained:!0}),"(?:/([^/]+))?";if(!r)return;const a=r.split(/\[(.+?)\](?!\])/);return"/"+a.map((i,l)=>{if(l%2){if(i.startsWith("x+"))return w(String.fromCharCode(parseInt(i.slice(2),16)));if(i.startsWith("u+"))return w(String.fromCharCode(...i.slice(2).split("-").map(N=>parseInt(N,16))));const u=W.exec(i),[,g,m,I,C]=u;return t.push({name:I,matcher:C,optional:!!g,rest:!!m,chained:m?l===1&&a[0]==="":!1}),m?"([^]*?)":g?"([^/]*)?":"([^/]+?)"}return w(i)}).join("")}).join("")}/?$`),params:t}}function G(e){return e!==""&&!/^\([^)]+\)$/.test(e)}function E(e){return e.slice(1).split("/").filter(G)}function ie(e,t,n){const r={},s=e.slice(1),c=s.filter(o=>o!==void 0);let a=0;for(let o=0;o<t.length;o+=1){const i=t[o];let l=s[o-a];if(i.chained&&i.rest&&a&&(l=s.slice(o-a,o+1).filter(u=>u).join("/"),a=0),l===void 0)if(i.rest)l="";else continue;if(!i.matcher||n[i.matcher](l)){r[i.name]=l;const u=t[o+1],g=s[o+1];u&&!u.rest&&u.optional&&g&&i.chained&&(a=0),!u&&!g&&Object.keys(r).length===c.length&&(a=0);continue}if(i.optional&&i.chained){a++;continue}return}if(!a)return r}function w(e){return e.normalize().replace(/[[\]]/g,"\\$&").replace(/%/g,"%25").replace(/\//g,"%2[Ff]").replace(/\?/g,"%3[Ff]").replace(/#/g,"%23").replace(/[.*+?^${}()|\\]/g,"\\$&")}const V=/\[(\[)?(\.\.\.)?(\w+?)(?:=(\w+))?\]\]?/g;function ce(e,t){const n=E(e),r=e!="/"&&e.endsWith("/");return"/"+n.map(s=>s.replace(V,(c,a,o,i)=>{const l=t[i];if(!l){if(a||o&&l!==void 0)return"";throw new Error(`Missing parameter '${i}' in route ${e}`)}if(l.startsWith("/")||l.endsWith("/"))throw new Error(`Parameter '${i}' in route ${e} cannot start or end with a slash -- this would cause an invalid route like foo//bar`);return l})).filter(Boolean).join("/")+(r?"/":"")}const Y=globalThis.__sveltekit_1pl1ucw?.base??"",q=globalThis.__sveltekit_1pl1ucw?.assets??Y??"",le="_app",B="1781282761453",ue="sveltekit:snapshot",fe="sveltekit:scroll",de="sveltekit:states",he="sveltekit:pageurl",pe="sveltekit:history",ge="sveltekit:navigation",x={tap:1,hover:2,viewport:3,eager:4,off:-1,false:-1},k=location.origin;function _e(e){if(e instanceof URL)return e;let t=document.baseURI;if(!t){const n=document.getElementsByTagName("base");t=n.length?n[0].href:document.URL}return new URL(e,t)}function me(){return{x:pageXOffset,y:pageYOffset}}function p(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const R={...x,"":x.hover};function T(e){let t=e.assignedSlot??e.parentNode;return t?.nodeType===11&&(t=t.host),t}function we(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=T(e)}}function be(e,t,n){let r;try{if(r=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI),n&&r.hash.match(/^#[^/]/)){const o=location.hash.split("#")[1]||"/";r.hash=`#${o}${r.hash}`}}catch{}const s=e instanceof SVGAElement?e.target.baseVal:e.target,c=!r||!!s||D(r,t,n)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),a=r?.origin===k&&e.hasAttribute("download");return{url:r,external:c,target:s,download:a}}function ve(e){let t=null,n=null,r=null,s=null,c=null,a=null,o=e;for(;o&&o!==document.documentElement;)r===null&&(r=p(o,"preload-code")),s===null&&(s=p(o,"preload-data")),t===null&&(t=p(o,"keepfocus")),n===null&&(n=p(o,"noscroll")),c===null&&(c=p(o,"reload")),a===null&&(a=p(o,"replacestate")),o=T(o);function i(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return}}return{preload_code:R[r??"off"],preload_data:R[s??"off"],keepfocus:i(t),noscroll:i(n),reload:i(c),replace_state:i(a)}}function ye(e){const t=$(e);let n=!0;function r(){n=!0,t.update(a=>a)}function s(a){n=!1,t.set(a)}function c(a){let o;return t.subscribe(i=>{(o===void 0||n&&i!==o)&&a(o=i)})}return{notify:r,set:s,subscribe:c}}const U={v:()=>{}};function Se(){const{set:e,subscribe:t}=$(!1);let n;async function r(){clearTimeout(n);try{const s=await fetch(`${q}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!s.ok)return!1;const a=(await s.json()).version!==B;return a&&(e(!0),U.v(),clearTimeout(n)),a}catch{return!1}}return{subscribe:t,check:r}}function D(e,t,n){return e.origin!==k||!e.pathname.startsWith(t)?!0:n?e.pathname!==location.pathname:!1}function xe(e){}const O=new Set(["load","prerender","csr","ssr","trailingSlash","config"]);[...O];const z=new Set([...O]);[...z];let v,A,b;const H=S.toString().includes("$$")||/function \w+\(\) \{\}/.test(S.toString());H?(v={data:{},form:null,error:null,params:{},route:{id:null},state:{},status:-1,url:new URL("https://example.com")},A={current:null},b={current:!1}):(v=new class{#e=f({});get data(){return d(this.#e)}set data(t){h(this.#e,t)}#t=f(null);get form(){return d(this.#t)}set form(t){h(this.#t,t)}#r=f(null);get error(){return d(this.#r)}set error(t){h(this.#r,t)}#n=f({});get params(){return d(this.#n)}set params(t){h(this.#n,t)}#s=f({id:null});get route(){return d(this.#s)}set route(t){h(this.#s,t)}#a=f({});get state(){return d(this.#a)}set state(t){h(this.#a,t)}#o=f(-1);get status(){return d(this.#o)}set status(t){h(this.#o,t)}#i=f(new URL("https://example.com"));get url(){return d(this.#i)}set url(t){h(this.#i,t)}},A=new class{#e=f(null);get current(){return d(this.#e)}set current(t){h(this.#e,t)}},b=new class{#e=f(!1);get current(){return d(this.#e)}set current(t){h(this.#e,t)}},U.v=()=>b.current=!0);function Ee(e){Object.assign(v,e)}export{re as A,ue as B,ae as C,se as D,fe as E,Ee as F,xe as G,pe as H,ge as N,he as P,de as S,q as a,Y as b,le as c,oe as d,ie as e,ne as f,Se as g,_e as h,D as i,A as j,we as k,be as l,ve as m,ye as n,Z as o,v as p,k as q,ce as r,me as s,te as t,Q as u,B as v,ee as w,M as x,x as y,X as z};

package/studio/client/_app/immutable/chunks/BVqaYHsk.js

@@ -0,0 +1 @@
+import{r as e}from"./Dn_cJtKS.js";import{e as p}from"./CClcTVCL.js";function o(r){const t=r.replace(/^(\.\.\/)+(\.\/)*|^\.\//,"/");return`${p.PUBLIC_BASE_URL}${t}`}function i(r){return o(e("/(app)/editor/p/[id]",{id:r}))}function c(r){return o(e("/(app)/editor/p/[id]/og.png",{id:r}))}export{c as a,i as p};