@impractical-ai/motion 0.1.3 → 0.1.4

package/dist/index.js

@@ -1,1505 +1,47 @@
 #!/usr/bin/env node
 import {
-  ApiError,
-  invoke,
-  invokeAt,
-  jobStatus,
-  loadConfig,
-  requireConfig,
-  saveConfig,
-  setup,
-  studioLink,
-  waitForJobs,
-  withMeteredCall
-} from "./chunk-G56RK3HD.js";
+  PACKAGE_VERSION
+} from "./chunk-EFP4P3WA.js";
 
-// src/index.ts
+// src/cli-args.ts
 import { parseArgs } from "node:util";
-
-// src/commands.ts
-import { readFileSync as readFileSync2, writeFileSync } from "node:fs";
-import { randomBytes } from "node:crypto";
-
-// src/media.ts
-import { readFileSync, statSync } from "node:fs";
-import { basename, extname } from "node:path";
-var MAX_UPLOAD_BYTES = 3e8;
-var MIME_BY_EXT = {
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".jpeg": "image/jpeg",
-  ".gif": "image/gif",
-  ".webp": "image/webp",
-  ".svg": "image/svg+xml",
-  ".mp4": "video/mp4",
-  ".webm": "video/webm",
-  ".mov": "video/quicktime"
-};
-function mediaType(filePath) {
-  const type = MIME_BY_EXT[extname(filePath).toLowerCase()];
-  if (!type) {
-    throw new Error(
-      `Unsupported media type for ${basename(filePath)} \u2014 use PNG, JPEG, GIF, WebP, SVG, MP4, WebM, or MOV`
-    );
-  }
-  return type;
-}
-async function uploadAsset(input) {
-  const { projectId, draftId, filePath, log } = input;
-  const bytes = statSync(filePath).size;
-  if (bytes > MAX_UPLOAD_BYTES) throw new Error("Media must be 300 MB or smaller");
-  const contentType = mediaType(filePath);
-  const fileName = basename(filePath);
-  const upload2 = await invoke("prepare-upload", {
-    projectId,
-    draftId,
-    fileName,
-    contentType,
-    bytes
-  });
-  const form = new FormData();
-  form.append("cacheControl", "3600");
-  form.append("", new File([new Uint8Array(readFileSync(filePath))], fileName, { type: contentType }));
-  const response = await fetch(upload2.signedUrl, {
-    method: "PUT",
-    headers: { "x-upsert": "false" },
-    body: form
-  });
-  if (!response.ok) {
-    throw new Error(`Upload failed (${response.status}): ${await response.text()}`);
-  }
-  log?.(`uploaded ${fileName} (${(bytes / 1e6).toFixed(1)} MB)`);
-  const registered = await invoke("register-asset", {
-    projectId,
-    draftId: null,
-    storagePath: upload2.storagePath,
-    fileName,
-    contentType,
-    bytes
-  });
-  return registered.assetId;
-}
-
-// ../src/studio/sampleLogos.ts
-var SAMPLE_LOGOS = [
-  {
-    id: "bolt",
-    name: "Bolt mark",
-    svg: `<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M66 8 24 68h26l-8 44 46-64H60l6-40z" fill="currentColor"/>
-  <circle cx="97" cy="25" r="7" fill="currentColor" opacity="0.55"/>
-  <circle cx="22" cy="95" r="5" fill="currentColor" opacity="0.35"/>
-</svg>`
-  },
-  {
-    id: "orbit",
-    name: "Orbit badge",
-    svg: `<svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="60" cy="60" r="44" stroke="currentColor" stroke-width="6"/>
-  <ellipse cx="60" cy="60" rx="54" ry="20" stroke="currentColor" stroke-width="4" transform="rotate(-24 60 60)"/>
-  <circle cx="60" cy="60" r="12" fill="currentColor"/>
-  <circle cx="105" cy="38" r="6" fill="currentColor"/>
-</svg>`
-  },
-  {
-    id: "flux",
-    name: "Flux wordmark",
-    svg: `<svg viewBox="0 0 208 80" fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
-  <path d="M24 58V22h28"/>
-  <path d="M24 40h20"/>
-  <path d="M68 22v36h24"/>
-  <path d="M108 22v22c0 18 28 18 28 0V22"/>
-  <path d="M152 22l30 36"/>
-  <path d="M182 22l-30 36"/>
-</svg>`
-  }
-];
-function sampleLogo(id) {
-  return SAMPLE_LOGOS.find((s) => s.id === id);
-}
-
-// ../src/studio/templates.ts
-var esc = (s) => s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
-var escTemplate = (s) => s.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
-var num = (v, fallback) => {
-  const n = Number(v);
-  return Number.isFinite(n) && v.trim() !== "" ? n : fallback;
-};
-var HEADER = `import type { Direction } from '../../src/stage/engine'
-`;
-var matchCut = {
-  id: "match-cut",
-  name: "Zoom match cut",
-  description: "Extreme close-up on one element, hold a beat, then a decisive zoom-out revealing the full UI.",
-  params: [
-    { key: "focal", label: "Focal element", type: "selector", default: "button" },
-    { key: "startScale", label: "Close-up scale", type: "number", default: "8" },
-    { key: "hold", label: "Hold (s)", type: "number", default: "0.4" },
-    { key: "zoom", label: "Zoom-out (s)", type: "number", default: "1.5" },
-    { key: "settle", label: "Settle (s)", type: "number", default: "1.1" }
-  ],
-  generate: (p) => `${HEADER}
-// Extreme close-up on ${esc(p.focal)}, hold, then zoom out to the full UI.
-
-const direction: Direction = ({ tl, camera, hold }) => {
-  camera.set(camera.framing('${esc(p.focal)}', { scale: ${num(p.startScale, 8)} }))
-
-  tl.addLabel('cut', ${num(p.hold, 0.4)})
-  camera.move(camera.full(), { duration: ${num(p.zoom, 1.5)}, ease: 'expo.inOut' }, 'cut')
-  hold(${num(p.settle, 1.1)})
-}
-
-export default direction
-`
-};
-var typeAndSend = {
-  id: "type-and-send",
-  name: "Type & send",
-  description: "Close-up on an input, type a message, optionally post it into the UI, then match-cut out. (The Slack demo recipe.)",
-  params: [
-    { key: "input", label: "Input element", type: "selector", default: "textarea" },
-    { key: "message", label: "Message to type", type: "text", default: "hello from motion studio" },
-    { key: "cps", label: "Typing speed (chars/s)", type: "number", default: "24" },
-    {
-      key: "sent",
-      label: "Sent-message element",
-      type: "selector",
-      default: "",
-      optional: true,
-      help: 'A pre-rendered (hidden) element the message "posts" into. Leave empty to skip the send.'
-    },
-    {
-      key: "messages",
-      label: "Scrollable message list",
-      type: "selector",
-      default: "",
-      optional: true,
-      help: "Scrolled to the latest messages on load so the send lands in frame."
-    }
-  ],
-  generate: (p) => {
-    const send = p.sent.trim();
-    const messages = p.messages.trim();
-    return `${HEADER}
-const MESSAGE = '${esc(p.message)}'
-
-const direction: Direction = ({
-  tl,
-  q,
-  camera,
-  typeInto,
-  measureTypedLine,${send ? "\n  textRect," : ""}
-  hold,
-}) => {
-  const input = q<HTMLTextAreaElement>('${esc(p.input)}')
-${send ? `  const sent = q('${esc(send)}')
-  sent.textContent = MESSAGE
-${messages ? `  const messages = q('${esc(messages)}')
-  messages.scrollTop = messages.scrollHeight
-` : ""}` : ""}
-  const line = measureTypedLine(input, MESSAGE)
-  camera.set(
-    camera.framing(${send ? "[line, textRect(sent)]" : "line"}, {
-      fitWidth: 0.6,
-      fitHeight: 0.55,
-      maxScale: 12,
-    })
-  )
-
-  tl.addLabel('type', 0.4)
-  const { duration: typeDuration, caret } = typeInto(
-    input,
-    MESSAGE,
-    { cps: ${num(p.cps, 24)} },
-    'type'
-  )
-${send ? `
-  tl.addLabel('send', 0.4 + typeDuration + 0.3)
-  tl.set(input, { value: '' }, 'send')
-  if (caret) tl.to(caret, { autoAlpha: 0, duration: 0.12, ease: 'none' }, 'send')
-  tl.fromTo(
-    sent,
-    { autoAlpha: 0, y: 8 },
-    { autoAlpha: 1, y: 0, duration: 0.3, ease: 'power2.out' },
-    'send'
-  )
-
-  tl.addLabel('cut', 0.4 + typeDuration + 0.75)` : `
-  tl.addLabel('cut', 0.4 + typeDuration + 0.3)
-  if (caret) tl.to(caret, { autoAlpha: 0, duration: 0.15, ease: 'none' }, 'cut')`}
-  camera.move(camera.full(), { duration: 1.5, ease: 'expo.inOut' }, 'cut')
-  hold(1.1)
-}
-
-export default direction
-`;
-  }
-};
-var textReveal = {
-  id: "text-reveal",
-  name: "Text reveal",
-  description: "SplitText character rise on a close-up headline, then pull back while supporting elements fade in.",
-  params: [
-    { key: "headline", label: "Headline element", type: "selector", default: "h1" },
-    {
-      key: "supporting",
-      label: "Supporting elements",
-      type: "text",
-      default: "",
-      optional: true,
-      help: "Comma-separated selectors that fade in during the pull-back."
-    },
-    { key: "stagger", label: "Char stagger (s)", type: "number", default: "0.03" }
-  ],
-  generate: (p) => {
-    const supporting = p.supporting.split(",").map((s) => s.trim()).filter(Boolean);
-    const supportingArr = supporting.map((s) => `'${esc(s)}'`).join(", ");
-    return `${HEADER}
-const direction: Direction = ({ tl, q, camera, split, hold, gsap }) => {
-  const headline = q('${esc(p.headline)}')
-${supporting.length ? `  const supporting = [${supportingArr}].map((s) => q(s))
-` : ""}
-  camera.set(camera.framing(headline, { fitWidth: 0.82 }))
-${supporting.length ? `  gsap.set(supporting, { autoAlpha: 0, y: 16 })
-` : ""}
-  // Characters rise in from behind a mask.
-  tl.from(
-    split(headline, { type: 'chars', mask: 'chars' }).chars,
-    { yPercent: 115, duration: 0.65, stagger: ${num(p.stagger, 0.03)}, ease: 'expo.out' },
-    0.25
-  )
-
-  tl.addLabel('pullback', '+=0.35')
-  camera.move(camera.full(), { duration: 1.4, ease: 'expo.inOut' }, 'pullback')
-${supporting.length ? `  tl.to(
-    supporting,
-    { autoAlpha: 1, y: 0, duration: 0.5, stagger: 0.12, ease: 'power2.out' },
-    'pullback+=0.55'
-  )
-` : ""}  hold(1)
-}
-
-export default direction
-`;
-  }
-};
-var TRANSITIONS = [
-  "",
-  "wipe left",
-  "wipe right",
-  "wipe up",
-  "wipe down",
-  "pixels left",
-  "pixels right",
-  "pixels up",
-  "pixels down",
-  "iris"
-];
-var transitionOutCode = (value, color) => {
-  const [style, dir] = value.trim().split(/\s+/);
-  if (!style) return "";
-  return `
-  transition.out('${esc(style)}', { ${dir ? `direction: '${esc(dir)}', ` : ""}color: '${esc(color)}' })
-  hold(0.2)
-`;
-};
-var REVEAL_FX = [
-  "rise",
-  "fall",
-  "blur",
-  "wave",
-  "flip",
-  "pop",
-  "slide",
-  "typewriter",
-  "scramble",
-  "wipe",
-  "bounce",
-  "elastic",
-  "arc",
-  "streak"
-];
-var EXIT_FX = [
-  "rise",
-  "fall",
-  "blur",
-  "fade",
-  "pop",
-  "scramble",
-  "wipe",
-  "scatter",
-  "streak"
-];
-var FX_EFFECTS = [
-  "blur",
-  "glow",
-  "saturate",
-  "dim",
-  "hue",
-  "smear",
-  "chroma",
-  "displace",
-  "grain",
-  "bloom",
-  "threshold"
-];
-var MASK_SHAPES = [
-  "feather",
-  "wipe",
-  "iris",
-  "radial",
-  "slit",
-  "barn",
-  "blinds"
-];
-var BLEND_MODES = [
-  "screen",
-  "multiply",
-  "overlay",
-  "difference",
-  "exclusion",
-  "color-dodge",
-  "soft-light",
-  "luminosity",
-  "plus-lighter"
-];
-var whipCut = {
-  id: "whip-cut",
-  name: "Whip cut",
-  description: "Two statement frames joined by a whip pan: a fast camera move with a blur spike hiding the cut. The house way to change subject without a transition overlay. Self-contained \u2014 no front-end code needed.",
-  params: [
-    { key: "first", label: "First line", type: "text", default: "Before" },
-    { key: "second", label: "Second line", type: "text", default: "After" },
-    {
-      key: "effect",
-      label: "Cut effect",
-      type: "select",
-      default: "blur",
-      options: ["blur", "smear", "chroma"],
-      help: "blur is the house default; smear is directional; chroma reads as a glitch hit."
-    },
-    {
-      key: "amount",
-      label: "Effect amount",
-      type: "number",
-      default: "14",
-      help: "Peak of the spike. Blur is px, chroma is channel offset in px."
-    },
-    { key: "background", label: "Background (CSS)", type: "text", default: "#0B0B0F" },
-    { key: "color", label: "Text color", type: "text", default: "#FDFBF7" },
-    { key: "accent", label: "Accent color", type: "text", default: "#ED1D24" },
-    {
-      key: "transition",
-      label: "Transition out",
-      type: "select",
-      default: "",
-      options: TRANSITIONS,
-      optional: true
-    }
-  ],
-  generateApp: (p) => `import React from 'react'
-
-export function App() {
-  return (
-    <div
-      className="relative h-screen w-screen overflow-hidden font-heading"
-      style={{ background: '${esc(p.background)}', color: '${esc(p.color)}' }}
-    >
-      {/* Two panels side by side in ONE stage; the camera pans between them,
-          so the whip is a real camera move, not a crossfade. */}
-      <div data-panel-a className="absolute left-0 top-0 flex h-full w-1/2 items-center justify-center">
-        <h1 data-line-a className="text-[150px] font-bold tracking-[-0.04em]">
-          ${esc(p.first)}
-        </h1>
-      </div>
-      <div data-panel-b className="absolute right-0 top-0 flex h-full w-1/2 items-center justify-center">
-        <h1 data-line-b className="text-[150px] font-bold tracking-[-0.04em]" style={{ color: '${esc(p.accent)}' }}>
-          ${esc(p.second)}
-        </h1>
-      </div>
-    </div>
-  )
-}
-`,
-  generate: (p) => `${HEADER}
-// Whip cut: hold on A, whip to B with a blur spike hiding the move.
-//
-// The spike is ONE call. Do not hand-write a pair of filter tweens \u2014 they
-// drift out of sync and the Tweak panel shows two rows you must keep aligned.
-
-const direction: Direction = ({ tl, q, camera, text, fx, hold, transition }) => {
-  camera.set(camera.framing('[data-panel-a]', { fitWidth: 0.92 }))
-  text.reveal('[data-line-a]', 'rise', { duration: 0.6 }, 0.2)
-  hold(0.9)
-
-  // \u2014 the whip \u2014
-  tl.addLabel('whip', '+=0')
-  camera.move(
-    camera.framing('[data-panel-b]', { fitWidth: 0.92 }),
-    { duration: 0.28, ease: 'promo-inout' },
-    'whip'
-  )
-  fx.spike('[data-panel-a]', '${esc(p.effect)}', { amount: ${num(p.amount, 14)}, duration: 0.3 }, 'whip')
-  fx.spike('[data-panel-b]', '${esc(p.effect)}', { amount: ${num(p.amount, 14)}, duration: 0.3 }, 'whip')
-
-  text.reveal('[data-line-b]', 'rise', { duration: 0.5 }, 'whip+=0.22')
-  hold(1.1)
-${transitionOutCode(p.transition ?? "", p.accent.trim() || "#ED1D24")}}
-
-export default direction
-`
-};
-var softReveal = {
-  id: "soft-reveal",
-  name: "Soft reveal",
-  description: "A statement card revealed through a SOFT-edged moving mask, with an optional effect settling as it lands. Feathered edges are impossible with clip-path \u2014 this is the premium version of a wipe. Self-contained.",
-  params: [
-    { key: "headline", label: "Headline", type: "text", default: "Softer than a wipe" },
-    { key: "subline", label: "Subline", type: "text", default: "", optional: true },
-    {
-      key: "shape",
-      label: "Mask shape",
-      type: "select",
-      default: "feather",
-      options: MASK_SHAPES,
-      help: "feather and radial are soft-edged; the rest are hard (clip-path)."
-    },
-    {
-      key: "direction",
-      label: "Travel direction",
-      type: "select",
-      default: "right",
-      options: ["right", "left", "up", "down"]
-    },
-    {
-      key: "softness",
-      label: "Edge softness",
-      type: "number",
-      default: "0.3",
-      help: "0 is a hard edge, 1 feathers across the whole box."
-    },
-    {
-      key: "settle",
-      label: "Settle effect",
-      type: "select",
-      default: "bloom",
-      options: ["", ...FX_EFFECTS],
-      optional: true,
-      help: "Spikes once as the mask finishes landing."
-    },
-    { key: "background", label: "Background (CSS)", type: "text", default: "#12131A" },
-    { key: "color", label: "Text color", type: "text", default: "#FDFBF7" },
-    {
-      key: "transition",
-      label: "Transition out",
-      type: "select",
-      default: "",
-      options: TRANSITIONS,
-      optional: true
-    }
-  ],
-  generateApp: (p) => `import React from 'react'
-
-export function App() {
-  return (
-    <div
-      className="flex h-screen w-screen items-center justify-center overflow-hidden font-heading"
-      style={{ background: '${esc(p.background)}', color: '${esc(p.color)}' }}
-    >
-      <div data-card className="flex flex-col items-center gap-10 px-32 text-center">
-        <h1 className="text-[140px] font-bold leading-[0.95] tracking-[-0.04em]">
-          ${esc(p.headline)}
-        </h1>${p.subline.trim() ? `
-        <p className="text-3xl font-medium opacity-70">${esc(p.subline.trim())}</p>` : ""}
-      </div>
-    </div>
-  )
-}
-`,
-  generate: (p) => `${HEADER}
-// Soft reveal: the card arrives through a feathered mask rather than a hard
-// clip edge, then the effect settles once on landing.
-
-const direction: Direction = ({ camera, mask, fx, hold, transition }) => {
-  camera.set(camera.full())
-
-  mask.reveal(
-    '[data-card]',
-    '${esc(p.shape)}',
-    { direction: '${esc(p.direction)}', softness: ${num(p.softness, 0.3)}, duration: 1.0 },
-    0.15
-  )
-${(p.settle ?? "").trim() ? `  fx.spike('[data-card]', '${esc(p.settle.trim())}', { duration: 0.7 }, 0.85)
-` : ""}  hold(1.4)
-${transitionOutCode(p.transition ?? "", "#0B0B0F")}}
-
-export default direction
-`
-};
-var gradientType = {
-  id: "gradient-type",
-  name: "Gradient type",
-  description: "A headline whose GLYPHS are filled with a live gradient that drifts across them, with an optional blend-mode layer behind. Uses background-clip:text \u2014 the fill lives inside the letterforms, not behind them. Self-contained.",
-  params: [
-    { key: "headline", label: "Headline", type: "text", default: "filled type" },
-    {
-      key: "gradient",
-      label: "Fill gradient (CSS)",
-      type: "text",
-      default: "linear-gradient(90deg,#ED1D24,#00B8FF,#CDF463,#ED1D24)",
-      help: "Any CSS gradient. Repeat the first colour last so the drift loops seamlessly."
-    },
-    {
-      key: "drift",
-      label: "Drift distance",
-      type: "number",
-      default: "100",
-      help: "How far the fill travels across the glyphs, in percent."
-    },
-    {
-      key: "blend",
-      label: "Backdrop blend",
-      type: "select",
-      default: "",
-      options: ["", ...BLEND_MODES],
-      optional: true,
-      help: "Composites a disc behind the type in this mode. screen for light-on-dark."
-    },
-    { key: "background", label: "Background (CSS)", type: "text", default: "#0B0B0F" },
-    {
-      key: "transition",
-      label: "Transition out",
-      type: "select",
-      default: "",
-      options: TRANSITIONS,
-      optional: true
-    }
-  ],
-  generateApp: (p) => `import React from 'react'
-
-export function App() {
-  return (
-    <div
-      className="relative flex h-screen w-screen items-center justify-center overflow-hidden font-heading"
-      style={{ background: '${esc(p.background)}' }}
-    >${(p.blend ?? "").trim() ? `
-      <div
-        data-backdrop
-        className="absolute left-1/2 top-1/2 h-[620px] w-[620px] -translate-x-1/2 -translate-y-1/2 rounded-full"
-        style={{ background: '#00B8FF' }}
-      />` : ""}
-      <h1
-        data-fill-type
-        className="relative text-[180px] font-bold leading-[0.95] tracking-[-0.05em]"
-      >
-        ${esc(p.headline)}
-      </h1>
-    </div>
-  )
-}
-`,
-  generate: (p) => `${HEADER}
-// Gradient type: the fill lives INSIDE the letterforms and drifts across
-// them. mask.fill sets background-clip:text and drives one custom property,
-// so the Tweak panel gets a single "Fill drift" slider.
-
-const direction: Direction = ({ camera, mask, hold, transition }) => {
-  camera.set(camera.full())
-${(p.blend ?? "").trim() ? `
-  // The backdrop composites against this beat only \u2014 mask.blend isolates the
-  // enclosing block so the mode cannot reach past it.
-  mask.blend('[data-backdrop]', '${esc(p.blend.trim())}', { duration: 0.6 }, 0.1)
-` : ""}
-  mask.fill(
-    '[data-fill-type]',
-    { gradient: '${esc(p.gradient)}', drift: ${num(p.drift, 100)}, duration: 1.6 },
-    0.2
-  )
-  hold(1.2)
-${transitionOutCode(p.transition ?? "", "#0B0B0F")}}
-
-export default direction
-`
-};
-var titleCard = {
-  id: "title-card",
-  name: "Title card",
-  description: "A self-contained text card \u2014 headline, optional subline, background color, and a named text effect. No front-end code needed.",
-  params: [
-    { key: "headline", label: "Headline", type: "text", default: "Make it move" },
-    {
-      key: "subline",
-      label: "Subline",
-      type: "text",
-      default: "",
-      optional: true
-    },
-    {
-      key: "effect",
-      label: "Reveal effect",
-      type: "select",
-      default: "rise",
-      options: REVEAL_FX
-    },
-    {
-      key: "exit",
-      label: "Exit effect",
-      type: "select",
-      default: "fade",
-      options: ["", ...EXIT_FX],
-      optional: true,
-      help: "Empty holds the end frame."
-    },
-    { key: "background", label: "Background (CSS)", type: "text", default: "#0B0B0F" },
-    { key: "color", label: "Text color", type: "text", default: "#FFFFFF" },
-    {
-      key: "accent",
-      label: "Underline accent color",
-      type: "text",
-      default: "",
-      optional: true,
-      help: "When set, sketches an underline stroke beneath the last headline word."
-    },
-    {
-      key: "transition",
-      label: "Transition out",
-      type: "select",
-      default: "",
-      options: TRANSITIONS,
-      optional: true,
-      help: "Covers the frame with color at the very end \u2014 cut to the next clip from there."
-    }
-  ],
-  generateApp: (p) => {
-    const words = p.headline.trim().split(/\s+/);
-    const last = p.accent.trim() ? words.pop() : void 0;
-    return `import React from 'react'
-
-export function App() {
-  return (
-    <div
-      className="flex h-screen w-screen flex-col items-center justify-center overflow-hidden font-heading"
-      style={{ background: '${esc(p.background)}', color: '${esc(p.color)}' }}
-    >
-      <h1 data-headline className="text-8xl font-bold tracking-tight">
-        ${esc(words.join(" "))}${last ? ` <span data-accent-word>${esc(last)}</span>` : ""}
-      </h1>${p.subline.trim() ? `
-      <p data-sub className="mt-8 text-2xl font-normal opacity-70">
-        ${esc(p.subline.trim())}
-      </p>` : ""}
-    </div>
-  )
-}
-`;
-  },
-  generate: (p) => {
-    const effect = REVEAL_FX.includes(p.effect.trim()) ? p.effect.trim() : "rise";
-    const exit = EXIT_FX.includes(p.exit.trim()) ? p.exit.trim() : "";
-    const sub = !!p.subline.trim();
-    const accent = p.accent.trim();
-    const transition = transitionOutCode(
-      p.transition ?? "",
-      accent || "#CDF463"
-    );
-    return `${HEADER}
-// Title card: '${esc(effect)}' reveal on the headline, pull back to the full
-// frame${sub ? " while the subline rises in" : ""}${exit ? `, then a '${esc(exit)}' exit` : ""}${transition ? ", ending under a full-frame color transition" : ""}.
-
-const direction: Direction = ({ tl, q, camera, text${transition ? ", transition" : ""}, hold }) => {
-  const headline = q('[data-headline]')
-
-  camera.set(camera.framing(headline, { fitWidth: 0.75 }))
-  const reveal = text.reveal(headline, '${esc(effect)}', {}, 0.35)
-${accent ? `  text.underline('[data-accent-word]', { color: '${esc(accent)}' }, 0.35 + reveal.duration * 0.7)
-` : ""}
-  tl.addLabel('pullback', 0.35 + reveal.duration + 0.35)
-  camera.move(camera.full(), { duration: 1.2, ease: 'expo.inOut' }, 'pullback')
-${sub ? `  text.reveal('[data-sub]', 'rise', { by: 'words' }, 'pullback+=0.45')
-` : ""}  hold(0.9)
-${exit ? `
-  tl.addLabel('exit')
-  text.exit(headline, '${esc(exit)}', {}, 'exit')
-${accent ? `  text.exit('svg', 'fade', {}, 'exit')
-` : ""}${sub ? `  text.exit('[data-sub]', '${esc(exit === "fade" ? "fade" : exit)}', {}, 'exit+=0.08')
-` : ""}  hold(0.4)
-` : ""}${transition}}
-
-export default direction
-`;
-  }
-};
-var LOGO_REVEAL_FX = [
-  "draw",
-  "build",
-  "pop",
-  "blur",
-  "rise",
-  "wipe",
-  "iris",
-  "slit",
-  "spin",
-  "flip",
-  "bounce",
-  "glitch"
-];
-var LOGO_SVG_ONLY_FX = ["draw", "build"];
-var LOGO_EXIT_FX = ["pop", "blur", "fade", "wipe", "iris", "drop"];
-function parseLogoSource(value) {
-  if (value.startsWith("svg:")) return { kind: "svg", markup: value.slice(4) };
-  if (value.startsWith("asset:")) return { kind: "asset", path: value.slice(6) };
-  if (value.startsWith("sample:")) return { kind: "sample", id: value.slice(7) };
-  return { kind: "sample", id: "bolt" };
-}
-var logoSting = {
-  id: "logo-sting",
-  name: "Logo sting",
-  description: "Animate any logo \u2014 a bundled sample mark, pasted SVG, or an uploaded SVG/PNG \u2014 with a named reveal, a glint sweep, an optional tagline, and an exit. No front-end code needed.",
-  params: [
-    { key: "logo", label: "Logo", type: "logo", default: "sample:bolt" },
-    { key: "size", label: "Logo width (px)", type: "number", default: "280" },
-    {
-      key: "effect",
-      label: "Reveal effect",
-      type: "select",
-      default: "draw",
-      options: LOGO_REVEAL_FX,
-      help: "draw and build need an SVG logo (they trace/assemble its shapes)."
-    },
-    {
-      key: "shine",
-      label: "Glint sweep",
-      type: "select",
-      default: "yes",
-      options: ["yes", "no"]
-    },
-    {
-      key: "tagline",
-      label: "Tagline",
-      type: "text",
-      default: "",
-      optional: true,
-      help: "Rises in word by word during the pull-back."
-    },
-    {
-      key: "exit",
-      label: "Exit effect",
-      type: "select",
-      default: "",
-      options: ["", ...LOGO_EXIT_FX],
-      optional: true,
-      help: "Empty holds the end frame."
-    },
-    { key: "background", label: "Background (CSS)", type: "text", default: "#0B0B0F" },
-    { key: "color", label: "Logo/text color", type: "text", default: "#FFFFFF" },
-    {
-      key: "transition",
-      label: "Transition out",
-      type: "select",
-      default: "",
-      options: TRANSITIONS,
-      optional: true,
-      help: "Covers the frame with color at the very end \u2014 cut to the next clip from there."
-    }
-  ],
-  generateApp: (p) => {
-    const source = parseLogoSource(p.logo ?? "");
-    const size = num(p.size, 280);
-    const tagline = p.tagline?.trim();
-    const taglineJsx = tagline ? `
-      <p
-        data-tagline
-        className="text-3xl font-medium tracking-tight opacity-80"
-      >
-        ${esc(tagline)}
-      </p>` : "";
-    if (source.kind === "asset") {
-      return `import React from 'react'
-
-export function App() {
-  return (
-    <div
-      className="flex h-screen w-screen flex-col items-center justify-center gap-12 overflow-hidden font-heading"
-      style={{ background: '${esc(p.background)}', color: '${esc(p.color)}' }}
-    >
-      <div data-logo style={{ width: ${size} }}>
-        <img src="${esc(source.path)}" alt="" className="w-full" />
-      </div>${taglineJsx}
-    </div>
-  )
-}
-`;
-    }
-    const markup = source.kind === "svg" ? source.markup : (sampleLogo(source.id) ?? SAMPLE_LOGOS[0]).svg;
-    return `import React from 'react'
-
-// Inline SVG so draw/build can trace the shapes. The markup was sanitized
-// when the clip was created.
-const LOGO_SVG = \`${escTemplate(markup)}\`
-
-export function App() {
-  return (
-    <div
-      className="flex h-screen w-screen flex-col items-center justify-center gap-12 overflow-hidden font-heading"
-      style={{ background: '${esc(p.background)}', color: '${esc(p.color)}' }}
-    >
-      <div
-        data-logo
-        style={{ width: ${size} }}
-        dangerouslySetInnerHTML={{ __html: LOGO_SVG }}
-      />${taglineJsx}
-    </div>
-  )
-}
-`;
-  },
-  generate: (p) => {
-    const source = parseLogoSource(p.logo ?? "");
-    let effect = LOGO_REVEAL_FX.includes(p.effect?.trim()) ? p.effect.trim() : "draw";
-    if (source.kind === "asset" && LOGO_SVG_ONLY_FX.includes(effect)) {
-      effect = "pop";
-    }
-    const shine = p.shine !== "no";
-    const tagline = !!p.tagline?.trim();
-    const exit = LOGO_EXIT_FX.includes(p.exit?.trim()) ? p.exit.trim() : "";
-    const transition = transitionOutCode(p.transition ?? "", "#CDF463");
-    return `${HEADER}
-// Logo sting: '${esc(effect)}' reveal on the mark${shine ? ", a glint sweep" : ""}, pull back${tagline ? " while the tagline rises" : ""}, one pulse${exit ? `, then a '${esc(exit)}' exit` : ""}${transition ? ", ending under a full-frame color transition" : ""}.
-
-const direction: Direction = ({ tl, camera, logo${tagline ? ", text" : ""}${transition ? ", transition" : ""}, hold }) => {
-  camera.set(camera.framing('[data-logo]', { fitHeight: 0.5, clamp: true }))
-
-  const reveal = logo.reveal('[data-logo]', '${esc(effect)}', {}, 0.35)
-${shine ? `  logo.shine('[data-logo]', {}, 0.35 + reveal.duration + 0.15)
-` : ""}
-  tl.addLabel('pullback', 0.35 + reveal.duration + ${shine ? "1.35" : "0.45"})
-  camera.move(camera.full(), { duration: 1.1, ease: 'expo.inOut' }, 'pullback')
-${tagline ? `  text.reveal('[data-tagline]', 'rise', { by: 'words' }, 'pullback+=0.4')
-` : ""}  logo.emphasize('[data-logo]', 'pulse', {}, 'pullback+=1.3')
-  hold(1.0)
-${exit ? `
-  tl.addLabel('exit')
-  logo.exit('[data-logo]', '${esc(exit)}', {}, 'exit')
-${tagline ? `  text.exit('[data-tagline]', 'fade', {}, 'exit')
-` : ""}  hold(0.4)
-` : ""}${transition}}
-
-export default direction
-`;
-  }
-};
-var launchPromo = {
-  id: "launch-promo",
-  name: "Launch promo",
-  description: "Kinetic-type promo: headline + counting pill badge, dive-through-the-badge transition, accent line stack, motion-blur streak list, pill end card.",
-  params: [
-    { key: "headline", label: "Headline", type: "text", default: "Collection" },
-    { key: "count", label: "Pill counts up to", type: "number", default: "50" },
-    {
-      key: "lines",
-      label: "Stacked lines (comma-separated)",
-      type: "text",
-      default: "50 new, Javascript effects, now live",
-      help: "The last line gets the accent color."
-    },
-    {
-      key: "streaks",
-      label: "Streak list (comma-separated)",
-      type: "text",
-      default: "Tutorials, Code Source, Copy to Webflow, Responsive",
-      help: "Slides in from alternating sides with motion blur."
-    },
-    { key: "url", label: "End-card text", type: "text", default: "yoursite.com" },
-    { key: "accent", label: "Accent color", type: "text", default: "#CDF463" },
-    {
-      key: "transition",
-      label: "Transition out",
-      type: "select",
-      default: "",
-      options: TRANSITIONS,
-      optional: true,
-      help: "Covers the frame with the accent at the very end \u2014 cut to the next clip from there."
-    }
-  ],
-  generateApp: (p) => {
-    const accent = esc(p.accent.trim() || "#CDF463");
-    const lines = p.lines.split(",").map((s) => s.trim()).filter(Boolean);
-    const streaks = p.streaks.split(",").map((s) => s.trim()).filter(Boolean);
-    return `import React from 'react'
-
-const ACCENT = '${accent}'
-
-export function App() {
-  return (
-    <div className="relative h-screen w-screen overflow-hidden bg-[#0A0A0A] font-heading text-white">
-      {/* beat 1 \u2014 headline + counting pill */}
-      <div data-beat-1 className="absolute inset-0 flex items-center justify-center gap-7">
-        <h1 data-headline className="text-8xl font-bold tracking-tight">
-          ${esc(p.headline)}
-        </h1>
-        <div
-          data-pill
-          className="-mt-14 rounded-full px-7 py-2 text-5xl font-semibold"
-          style={{ background: ACCENT, color: '#101010' }}
-        >
-          <span data-count>${esc(p.count)}</span>
-        </div>
-      </div>
-
-      {/* beat 2 \u2014 stacked lines, last one in the accent */}
-      <div data-beat-2 className="absolute inset-0 flex items-center justify-center">
-        <div className="text-center text-8xl font-bold leading-[1.06] tracking-tight">
-${lines.map(
-      (l, i) => `          <div data-line${i === lines.length - 1 ? " style={{ color: ACCENT }}" : ""}>${esc(l)}</div>`
-    ).join("\n")}
-        </div>
-      </div>
-
-      {/* beat 3 \u2014 motion-blur streak list */}
-      <div data-beat-3 className="absolute inset-0 flex items-center justify-center">
-        <div data-streaks className="text-center text-7xl font-bold leading-[1.15] tracking-tight text-white/85">
-${streaks.map((l) => `          ${esc(l)}<br />`).join("\n")}
-        </div>
-      </div>
-
-      {/* beat 4 \u2014 pill end card */}
-      <div data-beat-4 className="absolute inset-0 flex items-center justify-center">
-        <div
-          data-endpill
-          className="rounded-full px-16 py-7 text-6xl font-semibold"
-          style={{ background: ACCENT, color: '#101010' }}
-        >
-          ${esc(p.url)}
-        </div>
-      </div>
-
-      {/* the accent flood used by the dive-through transition */}
-      <div data-cover className="absolute inset-0" style={{ background: ACCENT }} />
-    </div>
-  )
-}
-`;
-  },
-  generate: (p) => `${HEADER}
-// Kinetic launch promo: count up in the pill, dive INTO it (the accent
-// floods the frame), iris out onto the stacked reveal, hard-cut to the
-// streak list, hard-cut to the pill end card.
-
-const direction: Direction = ({ tl, q, qa, camera, text${p.transition?.trim() ? ", transition" : ""}, hold, gsap }) => {
-  const pill = q('[data-pill]')
-  const cover = q('[data-cover]')
-  const beats = ['1', '2', '3', '4'].map((n) => q(\`[data-beat-\${n}]\`))
-
-  // Framings are computed up front, before anything moves.
-  const pillClose = camera.framing(pill, { fitWidth: 0.42 })
-  const pillDive = camera.framing(pill, { scale: 34 })
-  camera.set(camera.full())
-
-  gsap.set(beats.slice(1), { autoAlpha: 0 })
-  gsap.set(cover, { autoAlpha: 0, clipPath: 'circle(75% at 50% 50%)' })
-
-  // \u2014 beat 1: headline rises, pill pops, camera pushes in while it counts \u2014
-  text.reveal('[data-headline]', 'rise', {}, 0.3)
-  tl.from(
-    pill,
-    { scale: 0, autoAlpha: 0, duration: 0.5, ease: 'back.out(2)', transformOrigin: '50% 50%' },
-    0.75
-  )
-  camera.move(pillClose, { duration: 0.8, ease: 'expo.inOut' }, 1.35)
-  text.count('[data-count]', { from: 0, to: ${num(p.count, 50)}, duration: 1.1 }, 1.45)
-
-  // \u2014 dive through the pill: accent floods the frame, iris out on beat 2 \u2014
-  tl.addLabel('dive', 3.0)
-  camera.move(pillDive, { duration: 0.55, ease: 'power3.in' }, 'dive')
-  tl.set(cover, { autoAlpha: 1 }, 'dive+=0.53')
-  camera.move(camera.full(), { duration: 0.01, ease: 'none' }, 'dive+=0.55')
-  tl.set(beats[0], { autoAlpha: 0 }, 'dive+=0.56')
-  tl.set(beats[1], { autoAlpha: 1 }, 'dive+=0.56')
-  tl.to(
-    cover,
-    { clipPath: 'circle(0% at 50% 50%)', duration: 0.6, ease: 'power3.inOut' },
-    'dive+=0.7'
-  )
-
-  // \u2014 beat 2: stacked lines, one masked rise per line \u2014
-  tl.addLabel('stack', 'dive+=0.85')
-  qa('[data-line]').forEach((line, i) => {
-    text.reveal(line, 'rise', { duration: 0.55, stagger: 0.015 }, \`stack+=\${i * 0.22}\`)
-  })
-  hold(1.0)
-
-  // \u2014 beat 3: hard cut to the streak list \u2014
-  tl.addLabel('streaks')
-  tl.set(beats[1], { autoAlpha: 0 }, 'streaks')
-  tl.set(beats[2], { autoAlpha: 1 }, 'streaks')
-  text.reveal('[data-streaks]', 'streak', {}, 'streaks+=0.1')
-  hold(1.1)
-
-  // \u2014 beat 4: hard cut to the pill end card \u2014
-  tl.addLabel('end')
-  tl.set(beats[2], { autoAlpha: 0 }, 'end')
-  tl.set(beats[3], { autoAlpha: 1 }, 'end')
-  tl.from(
-    '[data-endpill]',
-    { scale: 0.2, autoAlpha: 0, duration: 0.6, ease: 'back.out(1.8)', transformOrigin: '50% 50%' },
-    'end+=0.05'
-  )
-  text.emphasize('[data-endpill]', 'pulse', {}, 'end+=0.9')
-  hold(1.0)
-${transitionOutCode(p.transition ?? "", p.accent.trim() || "#CDF463")}}
-
-export default direction
-`
-};
-var blank = {
-  id: "blank",
-  name: "Blank",
-  description: "A commented skeleton \u2014 write the direction yourself.",
-  params: [],
-  generate: () => `${HEADER}
-// One paused master timeline drives everything; the exporter renders it
-// frame-by-frame. Toolkit reference: README.md.
-
-const direction: Direction = ({ tl, q, camera, typeInto, split, hold, gsap }) => {
-  // Open on a close-up:
-  // camera.set(camera.framing('h1', { fitWidth: 0.8 }))
-
-  // Text animation (chars/words/lines):
-  // tl.from(split('h1', { type: 'chars', mask: 'chars' }).chars,
-  //   { yPercent: 115, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.3)
-
-  // Pull back to the full UI:
-  // camera.move(camera.full(), { duration: 1.4, ease: 'expo.inOut' }, '+=0.4')
-
-  hold(1)
-}
-
-export default direction
-`
-};
-var TEMPLATES = [
-  titleCard,
-  logoSting,
-  launchPromo,
-  matchCut,
-  typeAndSend,
-  textReveal,
-  // fx / mask kit templates. These carry the capabilities an unaided agent
-  // cannot reach: a synced whip-cut spike, feathered mask edges, and
-  // fill-inside-the-glyphs type.
-  whipCut,
-  softReveal,
-  gradientType,
-  blank
-];
-
-// ../src/studio/parseFiles.ts
-var FENCE = /```([^\n`]*)\n([\s\S]*?)```/g;
-var DROP = /* @__PURE__ */ new Set([
-  "index.tsx",
-  "index.jsx",
-  "main.tsx",
-  "index.css",
-  "styles.css",
-  "package.json",
-  "tailwind.config.js",
-  "tailwind.config.ts",
-  "postcss.config.js",
-  "vite.config.ts",
-  "tsconfig.json"
-]);
-var SOURCE_EXT = /\.(tsx|ts|jsx|js)$/;
-function cleanPath(label) {
-  const token = label.trim().split(/\s+/).pop() ?? "";
-  const p = token.replace(/^\.?\//, "");
-  if (!p || p.includes("..") || p.startsWith("/")) return null;
-  return p;
-}
-function parseSceneFiles(pasted) {
-  const blocks = [];
-  for (const m of pasted.matchAll(FENCE)) {
-    const p = cleanPath(m[1]);
-    if (p && SOURCE_EXT.test(p)) {
-      blocks.push({ path: p, content: m[2].replace(/\s+$/, "") + "\n" });
-    }
-  }
-  if (blocks.length === 0) {
-    return { "App.tsx": pasted.trim() + "\n" };
-  }
-  const files = {};
-  for (const { path, content } of blocks) {
-    if (DROP.has(path)) continue;
-    files[path] = content;
-  }
-  if (!files["App.tsx"]) {
-    const keys2 = Object.keys(files);
-    if (keys2.length === 1) {
-      files["App.tsx"] = files[keys2[0]];
-      if (keys2[0] !== "App.tsx") delete files[keys2[0]];
-    } else {
-      throw new Error(
-        "No App.tsx found in the pasted code. Include a fenced ```App.tsx block, or paste a single component."
-      );
-    }
-  }
-  return files;
-}
-
-// ../src/shared/initial-files.ts
-var TITLE_TEMPLATE = TEMPLATES.find((t) => t.id === "title-card");
-var BLANK_DIRECTION = TEMPLATES.find((t) => t.id === "blank").generate({});
-var defaultParams = (t) => Object.fromEntries(t.params.map((p) => [p.key, p.default]));
-function buildInitialFiles(input) {
-  const selectedTemplate = input.templateId ? TEMPLATES.find((template) => template.id === input.templateId) : TEMPLATES.find((template) => template.id === "blank");
-  if (!selectedTemplate) throw new Error(`Unknown motion template: ${input.templateId ?? "blank"}`);
-  const selectedParams = {
-    ...defaultParams(selectedTemplate),
-    ...input.templateParams ?? {}
-  };
-  const starter = input.appCode?.trim() ? parseSceneFiles(input.appCode) : {
-    "App.tsx": (selectedTemplate.generateApp ?? TITLE_TEMPLATE.generateApp)({
-      ...selectedTemplate.generateApp ? selectedParams : {
-        ...defaultParams(TITLE_TEMPLATE),
-        headline: input.valueProp.trim(),
-        subline: "Built to move at the speed of your work."
-      }
-    })
-  };
-  const projectMarker = JSON.stringify({
-    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-    valueProp: input.valueProp.trim(),
-    ...input.brand ? { brand: input.brand.slug } : {}
-  }) + "\n";
-  const brandFile = input.brand ? JSON.stringify(input.brand, null, 2) + "\n" : null;
-  return {
-    ...starter,
-    "direction.ts": selectedTemplate.id === "blank" ? BLANK_DIRECTION : selectedTemplate.generate(selectedParams),
-    "project.json": projectMarker,
-    ...brandFile ? { "brand.json": brandFile } : {}
-  };
-}
-
-// ../src/shared/video-models.ts
-var DEFAULT_OPENROUTER_VIDEO_MODEL = "anthropic/claude-opus-5";
-
-// src/commands.ts
-var flagString = (flags, name) => {
-  const value = flags[name];
-  if (Array.isArray(value)) return value[value.length - 1];
-  return typeof value === "string" ? value : void 0;
-};
-var flagList = (flags, name) => {
-  const value = flags[name];
-  if (Array.isArray(value)) return value;
-  return typeof value === "string" ? [value] : [];
+var CLI_OPTIONS = {
+  key: { type: "string" },
+  "supabase-url": { type: "string" },
+  "app-url": { type: "string" },
+  "value-prop": { type: "string" },
+  vibe: { type: "string" },
+  directors: { type: "string" },
+  "code-file": { type: "string" },
+  brand: { type: "string" },
+  asset: { type: "string", multiple: true },
+  project: { type: "string" },
+  feedback: { type: "string" },
+  model: { type: "string" },
+  slug: { type: "string" },
+  name: { type: "string" },
+  jobs: { type: "string" },
+  dir: { type: "string" },
+  out: { type: "string" },
+  draft: { type: "string" },
+  id: { type: "string" },
+  wait: { type: "boolean" },
+  agent: { type: "boolean" },
+  claude: { type: "boolean" },
+  "no-open": { type: "boolean" },
+  reextract: { type: "boolean" },
+  help: { type: "boolean" },
+  version: { type: "boolean", short: "v" }
 };
-var flagBool = (flags, name) => flags[name] === true;
-var out = (line) => console.log(line);
-async function setup2(flags) {
-  const claude = flagBool(flags, "claude") || flagBool(flags, "agent");
-  if (flagBool(flags, "agent")) {
-    out("Note: --agent is deprecated; use --claude next time.");
-  }
-  await setup({
-    installAgentSkills: false,
-    installClaudePlugin: claude,
-    openBrowser: !flagBool(flags, "no-open"),
-    log: out
-  });
-}
-async function login(flags) {
-  const patch = {};
-  const key = flagString(flags, "key");
-  const supabaseUrl = flagString(flags, "supabase-url");
-  const appUrl = flagString(flags, "app-url");
-  if (key) patch.apiKey = key;
-  if (supabaseUrl) patch.supabaseUrl = supabaseUrl;
-  if (appUrl) patch.appUrl = appUrl;
-  const config = { ...loadConfig(), ...patch };
-  if (!config.apiKey || !config.supabaseUrl) {
-    out("Missing API key. Run: npx --yes @impractical-ai/motion setup --claude");
-    process.exitCode = 1;
-    return;
-  }
-  const snapshot = await invokeAt(
-    config.supabaseUrl,
-    "workspace-bootstrap",
-    {},
-    config.apiKey
-  );
-  if (Object.keys(patch).length) saveConfig(patch);
-  out(`org: ${snapshot.orgId}`);
-  out(`plan: ${snapshot.plan} (access: ${snapshot.hasAccess ? "yes" : "no"})`);
-  if (snapshot.accessUntil) out(`access until: ${snapshot.accessUntil}`);
-  out("Logged in. Credentials stored in ~/.impractical/config.json");
-}
-async function whoami(_flags) {
-  const snapshot = await invoke("workspace-bootstrap");
-  out(`org: ${snapshot.orgId}`);
-  out(`plan: ${snapshot.plan} (access: ${snapshot.hasAccess ? "yes" : "no"})`);
-  if (snapshot.accessUntil) out(`access until: ${snapshot.accessUntil}`);
-}
-async function keys(positional, flags) {
-  const action = positional[0];
-  if (action === "list" || !action) {
-    const result = await invoke("create-api-key", {
-      action: "list"
-    });
-    for (const key of result.keys) {
-      out(
-        `${key.id}  ${key.keyPrefix}\u2026  "${key.name}"  created ${key.createdAt}` + (key.revokedAt ? "  REVOKED" : key.lastUsedAt ? `  last used ${key.lastUsedAt}` : "  never used")
-      );
-    }
-    if (!result.keys.length) out("No API keys. Create one from the studio web app.");
-    return;
-  }
-  if (action === "revoke") {
-    const id = positional[1] ?? flagString(flags, "id");
-    if (!id) throw new Error("Usage: impractical keys revoke <keyId>");
-    await invoke("create-api-key", { action: "revoke", id });
-    out(`Revoked ${id}`);
-    return;
-  }
-  throw new Error(`Unknown keys action "${action}" (use: list, revoke)`);
-}
-var slugify = (text) => text.toLowerCase().replace(/[^a-z0-9\s-]/g, "").trim().split(/\s+/).slice(0, 4).join("-") || "video";
-async function generate(flags) {
-  const valueProp = flagString(flags, "value-prop");
-  if (!valueProp) throw new Error('Usage: impractical generate --value-prop "..." [--wait]');
-  const config = requireConfig();
-  const appCode = flagString(flags, "code-file") ? readFileSync2(flagString(flags, "code-file"), "utf8") : void 0;
-  let brand2 = null;
-  const brandSlug = flagString(flags, "brand");
-  if (brandSlug) {
-    const result = await invoke("brand-kits", { action: "get", slug: brandSlug });
-    brand2 = result.brand;
-  }
-  const projectId = flagString(flags, "project");
-  const feedback = flagString(flags, "feedback");
-  const append = Boolean(projectId && feedback);
-  const slug = flagString(flags, "slug") ?? `${slugify(valueProp)}-${randomBytes(2).toString("hex")}`;
-  const directorIds = (flagString(flags, "directors") ?? "d1,d2").split(",").map((d) => d.trim());
-  const files = buildInitialFiles({ valueProp, appCode, brand: brand2 });
-  const prepared = await invoke("prepare-generation", {
-    ...projectId ? { projectId } : {},
-    name: (flagString(flags, "name") ?? slug).replace(/[-_]/g, " "),
-    slug,
-    valueProp: valueProp.trim(),
-    vibe: flagString(flags, "vibe") ?? "confident",
-    directorIds,
-    append,
-    files
+function parseCliArgs(args) {
+  return parseArgs({
+    args,
+    options: CLI_OPTIONS,
+    allowPositionals: true
   });
-  out(`project: ${prepared.projectId}`);
-  for (const draft of prepared.drafts) out(`draft: ${draft.id} (${draft.slug})`);
-  const assetIds = [];
-  for (const assetPath of flagList(flags, "asset")) {
-    assetIds.push(
-      await uploadAsset({
-        projectId: prepared.projectId,
-        draftId: prepared.drafts[0].id,
-        filePath: assetPath,
-        log: out
-      })
-    );
-  }
-  const started = await invoke(
-    "start-generation",
-    {
-      projectId: prepared.projectId,
-      draftIds: prepared.drafts.map((draft) => draft.id),
-      assetIds,
-      model: flagString(flags, "model") ?? DEFAULT_OPENROUTER_VIDEO_MODEL,
-      ...feedback ? { feedback } : {}
-    }
-  );
-  for (const job of started.jobs) out(`job: ${job.jobId} (draft ${job.draftId})`);
-  const firstSlug = prepared.drafts[0]?.slug;
-  out(`studio: ${studioLink(config.appUrl, prepared.projectId, firstSlug)}`);
-  if (!flagBool(flags, "wait")) {
-    out("Generation started. Follow with: impractical status --jobs " + started.jobs.map((j) => j.jobId).join(","));
-    return;
-  }
-  const slugByDraft = new Map(prepared.drafts.map((draft) => [draft.id, draft.slug]));
-  const seen = /* @__PURE__ */ new Map();
-  const rows = await waitForJobs(
-    started.jobs.map((job) => job.jobId),
-    (latest) => {
-      for (const row of latest) {
-        const line = `${slugByDraft.get(row.draft_id) ?? row.draft_id}: ${row.status}${row.stage ? ` \u2014 ${row.stage}` : ""}${row.detail ? ` (${row.detail})` : ""}`;
-        if (seen.get(row.id) !== line) {
-          seen.set(row.id, line);
-          out(line);
-        }
-      }
-    }
-  );
-  reportJobs(rows, slugByDraft);
-  out(`studio: ${studioLink(config.appUrl, prepared.projectId, firstSlug)}`);
-  if (rows.some((row) => row.status !== "completed")) process.exitCode = 1;
-}
-function reportJobs(rows, slugByDraft) {
-  for (const row of rows) {
-    const label = slugByDraft?.get(row.draft_id) ?? row.draft_id;
-    if (row.status === "completed") {
-      out(`${label}: completed (revision ${row.revision ?? "?"})`);
-      if (row.master?.url) out(`  master: ${row.master.url}`);
-    } else {
-      out(`${label}: ${row.status}${row.error ? ` \u2014 ${row.error}` : ""}`);
-    }
-  }
-}
-async function status(flags) {
-  const projectId = flagString(flags, "project");
-  const jobsFlag = flagString(flags, "jobs");
-  if (projectId) {
-    const result = await invoke("list-projects", { projectId });
-    out(`${result.project.name} (${result.project.id})`);
-    for (const draft of result.project.drafts) {
-      out(`  draft ${draft.id} (${draft.slug}) \u2014 ${draft.status}, revision ${draft.source_revision}`);
-    }
-    for (const job of result.project.jobs.slice(0, 10)) {
-      out(`  job ${job.id} [${job.draft_id}] \u2014 ${job.status}${job.stage ? ` (${job.stage})` : ""}${job.error ? ` \u2014 ${job.error}` : ""}`);
-    }
-    return;
-  }
-  if (!jobsFlag) throw new Error("Usage: impractical status --project <id> | --jobs <id,id> [--wait]");
-  const jobIds = jobsFlag.split(",").map((id) => id.trim());
-  if (flagBool(flags, "wait")) {
-    const seen = /* @__PURE__ */ new Map();
-    const rows = await waitForJobs(jobIds, (latest) => {
-      for (const row of latest) {
-        const line = `${row.id}: ${row.status}${row.stage ? ` \u2014 ${row.stage}` : ""}`;
-        if (seen.get(row.id) !== line) {
-          seen.set(row.id, line);
-          out(line);
-        }
-      }
-    });
-    reportJobs(rows);
-    if (rows.some((row) => row.status !== "completed")) process.exitCode = 1;
-    return;
-  }
-  reportJobs(await jobStatus(jobIds));
-}
-async function exportDraft(positional, flags) {
-  const draftId = positional[0];
-  if (!draftId) {
-    throw new Error("Usage: impractical export <draftId> [--wait] [--out video.mp4]");
-  }
-  const started = await invoke("start-export", { draftId });
-  out(`Export started (job ${started.jobId}).`);
-  if (!flagBool(flags, "wait") && !flagString(flags, "out")) {
-    out(`Follow with: impractical status --jobs ${started.jobId} --wait`);
-    return;
-  }
-  const rows = await waitForJobs([started.jobId], () => {
-  }, 36e5);
-  const row = rows[0];
-  if (row?.status !== "completed" || !row.master?.url) {
-    throw new Error(`Export ${row?.status ?? "failed"}${row?.error ? `: ${row.error}` : ""}`);
-  }
-  out(`master: ${row.master.url}`);
-  const outPath = flagString(flags, "out");
-  if (outPath) {
-    const response = await fetch(row.master.url);
-    if (!response.ok) throw new Error(`Download failed (${response.status})`);
-    writeFileSync(outPath, new Uint8Array(await response.arrayBuffer()));
-    out(`Saved ${(row.master.bytes / 1e6).toFixed(1)} MB to ${outPath}`);
-  }
-}
-async function upload(positional, flags) {
-  const filePath = positional[0];
-  const projectId = flagString(flags, "project");
-  const draftId = flagString(flags, "draft");
-  if (!filePath || !projectId || !draftId) {
-    throw new Error("Usage: impractical upload <file> --project <projectId> --draft <draftId>");
-  }
-  const assetId = await uploadAsset({ projectId, draftId, filePath, log: out });
-  out(`assetId: ${assetId}`);
-}
-async function link(positional, _flags) {
-  const config = requireConfig();
-  const [projectId, slug] = positional;
-  if (!projectId) throw new Error("Usage: impractical link <projectId> [draftSlug]");
-  out(studioLink(config.appUrl, projectId, slug));
-}
-async function brand(positional, flags) {
-  const action = positional[0];
-  if (action === "extract") {
-    const url = positional[1];
-    if (!url) throw new Error("Usage: impractical brand extract <url> [--wait]");
-    const started = await invoke("brand-extraction", {
-      action: "start",
-      url,
-      ...flagBool(flags, "reextract") ? { reextract: true } : {}
-    });
-    out(`Extraction started for "${started.slug}" (run ${started.job}).`);
-    if (!flagBool(flags, "wait")) return;
-    const deadline = Date.now() + 15e5;
-    let lastLine = "";
-    while (true) {
-      if (Date.now() >= deadline) throw new Error("Brand extraction timed out");
-      const statusResult = await invoke("brand-extraction", { action: "status", job: started.job });
-      const line = `${statusResult.status}${statusResult.pct != null ? ` ${statusResult.pct}%` : ""}${statusResult.stage ? ` \u2014 ${statusResult.stage}` : ""}`;
-      if (line !== lastLine) {
-        lastLine = line;
-        out(line);
-      }
-      if (statusResult.status === "done") {
-        out(`Brand kit saved as "${statusResult.slug ?? started.slug}". Use it with: impractical generate --brand ${statusResult.slug ?? started.slug} ...`);
-        return;
-      }
-      if (statusResult.status === "failed" || statusResult.error) {
-        throw new Error(`Brand extraction failed${statusResult.error ? `: ${statusResult.error}` : ""}`);
-      }
-      await new Promise((resolve) => setTimeout(resolve, 2e3));
-    }
-  }
-  if (action === "list" || !action) {
-    const result = await invoke("brand-kits", {
-      action: "list"
-    });
-    for (const kit of result.brands) out(`${kit.slug}${kit.name ? `  (${kit.name})` : ""}`);
-    if (!result.brands.length) out("No brand kits yet. Extract one with: impractical brand extract <url> --wait");
-    return;
-  }
-  if (action === "get") {
-    const slug = positional[1];
-    if (!slug) throw new Error("Usage: impractical brand get <slug>");
-    const result = await invoke("brand-kits", { action: "get", slug });
-    out(JSON.stringify(result.brand, null, 2));
-    return;
-  }
-  throw new Error(`Unknown brand action "${action}" (use: extract, list, get)`);
-}
-function validateMeteredCommand(command, positional, flags) {
-  if (command === "generate" && !flagString(flags, "value-prop")) {
-    throw new Error('Usage: impractical generate --value-prop "..." [--wait]');
-  }
-  if (command === "status" && !flagString(flags, "project") && !flagString(flags, "jobs")) {
-    throw new Error("Usage: impractical status --project <id> | --jobs <id,id> [--wait]");
-  }
-  if (command === "export" && !positional[0]) {
-    throw new Error("Usage: impractical export <draftId> [--wait] [--out video.mp4]");
-  }
-  if (command === "upload" && (!positional[0] || !flagString(flags, "project") || !flagString(flags, "draft"))) {
-    throw new Error("Usage: impractical upload <file> --project <projectId> --draft <draftId>");
-  }
-  if (command === "brand") {
-    const action = positional[0];
-    if (action === "extract" && !positional[1]) {
-      throw new Error("Usage: impractical brand extract <url> [--wait]");
-    }
-    if (action === "get" && !positional[1]) {
-      throw new Error("Usage: impractical brand get <slug>");
-    }
-    if (action && !["extract", "list", "get"].includes(action)) {
-      throw new Error(`Unknown brand action "${action}" (use: extract, list, get)`);
-    }
-  }
 }
 
-// src/index.ts
+// src/cli-runtime.ts
 var HELP = `impractical \u2014 Impractical Motion from your terminal (and your coding agent)
 
 Setup
@@ -1527,68 +69,48 @@ Edit drafts
 Assets & brands
   upload <file> --project <id> --draft <id>
   brand extract <url> [--wait] | brand list | brand get <slug>
+
+Info
+  --version, -v                 Print the installed CLI version
 `;
-var OPTIONS = {
-  key: { type: "string" },
-  "supabase-url": { type: "string" },
-  "app-url": { type: "string" },
-  "value-prop": { type: "string" },
-  vibe: { type: "string" },
-  directors: { type: "string" },
-  "code-file": { type: "string" },
-  brand: { type: "string" },
-  asset: { type: "string", multiple: true },
-  project: { type: "string" },
-  feedback: { type: "string" },
-  model: { type: "string" },
-  slug: { type: "string" },
-  name: { type: "string" },
-  jobs: { type: "string" },
-  dir: { type: "string" },
-  out: { type: "string" },
-  draft: { type: "string" },
-  id: { type: "string" },
-  wait: { type: "boolean" },
-  agent: { type: "boolean" },
-  claude: { type: "boolean" },
-  "no-open": { type: "boolean" },
-  reextract: { type: "boolean" },
-  help: { type: "boolean" }
-};
-async function main() {
-  const { values, positionals } = parseArgs({
-    args: process.argv.slice(2),
-    options: OPTIONS,
-    allowPositionals: true
-  });
+async function runCli(args, deps) {
+  const { values, positionals } = parseCliArgs(args);
+  if (values.version) {
+    deps.writeLine(PACKAGE_VERSION);
+    return;
+  }
   const [command, ...rest] = positionals;
   if (!command || values.help) {
-    console.log(HELP);
+    deps.writeLine(HELP);
     return;
   }
   const flags = values;
+  if (command === "mcp") {
+    const { runStdioServer } = await deps.loadMcp();
+    return runStdioServer();
+  }
+  const [commands, { withMeteredCall }] = await Promise.all([
+    deps.loadCommands(),
+    deps.loadApi()
+  ]);
   switch (command) {
     case "setup":
-      return setup2(flags);
+      return commands.setup(flags);
     case "motion":
-      if (rest[0] === "wizard") return setup2(flags);
+      if (rest[0] === "wizard") return commands.setup(flags);
       break;
-    case "mcp": {
-      const { runStdioServer } = await import("./stdio-VWTZOK6D.js");
-      return runStdioServer();
-    }
     case "login":
-      return login(flags);
+      return commands.login(flags);
     case "whoami":
-      return whoami(flags);
+      return commands.whoami(flags);
     case "keys":
-      return keys(rest, flags);
+      return commands.keys(rest, flags);
     case "generate":
-      validateMeteredCommand("generate", rest, flags);
-      return withMeteredCall("cli_generate", () => generate(flags));
+      commands.validateMeteredCommand("generate", rest, flags);
+      return withMeteredCall("cli_generate", () => commands.generate(flags));
     case "status":
-      validateMeteredCommand("status", rest, flags);
-      return withMeteredCall("cli_status", () => status(flags));
+      commands.validateMeteredCommand("status", rest, flags);
+      return withMeteredCall("cli_status", () => commands.status(flags));
     case "pull":
     case "push":
       throw new Error(
@@ -1596,24 +118,32 @@ async function main() {
   npx --yes @impractical-ai/motion setup --claude`
       );
     case "export":
-      validateMeteredCommand("export", rest, flags);
-      return withMeteredCall("cli_export", () => exportDraft(rest, flags));
+      commands.validateMeteredCommand("export", rest, flags);
+      return withMeteredCall("cli_export", () => commands.exportDraft(rest, flags));
     case "upload":
-      validateMeteredCommand("upload", rest, flags);
-      return withMeteredCall("cli_upload", () => upload(rest, flags));
+      commands.validateMeteredCommand("upload", rest, flags);
+      return withMeteredCall("cli_upload", () => commands.upload(rest, flags));
     case "link":
-      return link(rest, flags);
+      return commands.link(rest, flags);
     case "brand":
-      validateMeteredCommand("brand", rest, flags);
-      return withMeteredCall("cli_brand", () => brand(rest, flags));
+      commands.validateMeteredCommand("brand", rest, flags);
+      return withMeteredCall("cli_brand", () => commands.brand(rest, flags));
     default:
-      console.log(HELP);
+      deps.writeLine(HELP);
       throw new Error(`Unknown command "${command}"`);
   }
-  console.log(HELP);
+  deps.writeLine(HELP);
   throw new Error(`Unknown command "${[command, ...rest].join(" ")}"`);
 }
-main().catch((error) => {
+
+// src/index.ts
+runCli(process.argv.slice(2), {
+  writeLine: (line) => console.log(line),
+  loadCommands: () => import("./commands-WYBUEYA6.js"),
+  loadApi: () => import("./api-64X3G4M2.js"),
+  loadMcp: () => import("./stdio-JCRFEHDW.js")
+}).catch(async (error) => {
+  const { ApiError } = await import("./api-64X3G4M2.js");
   if (error instanceof ApiError) {
     console.error(`Error (${error.status} from ${error.fn}): ${error.message}`);
     if (error.status === 429) console.error("Weekly MCP allowance reached. Upgrade or wait for Monday UTC.");