greenlight-motion 0.1.0 → 0.1.2

package/README.md

@@ -17,14 +17,16 @@ The agent writes the video as data: a `project.json` and its files. The engine t
 ## Quick start
 
 ```bash
-npx greenlight-motion@0.1.0 doctor          # Node 18+, Chrome or Edge, WebGPU, H.264: what's missing and how to fix it
-npx greenlight-motion@0.1.0 init my-video   # a working starter: index.html, project.json, assets/
+npx greenlight-motion@0.1.2 doctor          # Node 18+, Chrome or Edge, WebGPU, H.264: what's missing and how to fix it
+npx greenlight-motion@0.1.2 init my-video   # a working starter: index.html, project.json, assets/
 # edit my-video/project.json, put pictures / video / sound in my-video/assets/
-npx greenlight-motion@0.1.0 check my-video  # what to fix: missing files, template mistakes, blank frames, broken plugins
-npx greenlight-motion@0.1.0 stills my-video # frames + a labelled contact sheet, to look at
-npx greenlight-motion@0.1.0 render my-video --fps 60 --motion-blur
-npx greenlight-motion@0.1.0 pack my-video   # everything in ONE html file
-npx greenlight-motion@0.1.0 pack my-video --glvideo   # ONE .glvideo: double-clicked, it opens in GreenLight Dash
+# or: write my-video/script.json (a scene script, skill/references/scene-script.md), then
+npx greenlight-motion@0.1.2 script my-video # script.json → project.json with the Video Editor's own presets
+npx greenlight-motion@0.1.2 check my-video  # what to fix: missing files, template mistakes, blank frames, broken plugins
+npx greenlight-motion@0.1.2 stills my-video # frames + a labelled contact sheet, to look at
+npx greenlight-motion@0.1.2 render my-video --fps 60 --motion-blur
+npx greenlight-motion@0.1.2 pack my-video   # everything in ONE html file
+npx greenlight-motion@0.1.2 pack my-video --glvideo   # ONE .glvideo: double-clicked, it opens in GreenLight Dash
 ```
 
 Also: `trace` (every animated layer's values frame by frame, plus the layer's moments), `set key=value`
@@ -35,11 +37,34 @@ catalog).
 
 Read **[skill/SKILL.md](skill/SKILL.md)**. It covers the workflow, the project format, templates,
 sound cues, plugins and how to make motion look made rather than generated. The format references
-are in `skill/references/`. To install the skill for Claude Code:
+are in `skill/references/`.
 
-```bash
-mkdir -p ~/.claude/skills && cp -R node_modules/greenlight-motion/skill ~/.claude/skills/greenlight-motion
-```
+Setup for each agent is in the
+[repository README](https://github.com/wpsoul/greenlight-motion-engine#ways-to-use-it):
+
+- **Claude or ChatGPT:** add the connector `https://mcp.greenlightdash.pro/motion`. The video plays in the chat,
+  and the model reviews the frames your browser renders.
+- **Claude Code:**
+
+  ```bash
+  claude plugin marketplace add wpsoul/greenlight-motion-engine
+  claude plugin install greenlight-motion@greenlight-motion-engine
+  ```
+
+- **Codex:**
+
+  ```bash
+  codex plugin marketplace add wpsoul/greenlight-motion-engine
+  codex plugin add greenlight-motion@greenlight-motion-engine
+  ```
+
+- **Only the skill:**
+
+  ```bash
+  mkdir -p ~/.claude/skills && cp -R node_modules/greenlight-motion/skill ~/.claude/skills/greenlight-motion
+  ```
+
+  For Codex, copy it to `~/.agents/skills/greenlight-motion` instead.
 
 ## In a web page or a Claude artifact
 
@@ -47,16 +72,21 @@ The engine is one classic script, so it runs from a double-clicked file, a CDN o
 
 ```html
 <div id="app"></div>
-<script src="https://cdn.jsdelivr.net/npm/greenlight-motion@0.1.0/dist/greenlight-motion.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/greenlight-motion@0.1.2/dist/greenlight-motion.js"></script>
 <script>
-  GreenLightMotion.mountPage(document.getElementById('app'), {
+  GreenLightMotion.mountStudio(document.getElementById('app'), {
     project: { /* project.json */ },
     assets: { 'asset:photo.jpg': 'data:image/jpeg;base64,…' },   // ref → data: / blob: / https: URL or Blob
-    theme: 'auto',                                                 // 'dark' (default) | 'light' | 'auto'
   });
 </script>
 ```
 
+`mountStudio` is the page every GreenLight surface shows (a project folder's page, a chat's GreenLight Motion page, a
+shared link, a review card on a board): the preview with Edit · Notes · Highlight, the inspector, the layers and Render.
+Its review (notes with drawings, highlights, changes) is text to copy for your agent; a host can send it elsewhere
+(`config.save`). `GreenLightMotion.mountPage(el, { project, assets, theme })` is the plain page under it, without the
+review interface.
+
 Without the page UI (in the browser, through a bundler or the ESM build; Node runs only the CLI):
 
 ```js

package/THIRD_PARTY_LICENSES.md

@@ -1,6 +1,7 @@
 # Third-party licences
 
-The engine bundle (`dist/greenlight-motion.js`, `dist/greenlight-motion.mjs`) includes code from these packages.
+The engine bundle (`dist/greenlight-motion.js`, `dist/greenlight-motion.mjs`) and the scene script (`dist/greenlight-motion-script.mjs`)
+include code from these packages.
 Generated by `scripts/prepare.mjs` from the build. Files on the GreenLight CDN are listed in
 [legal/THIRD_PARTY_ASSETS.md](legal/THIRD_PARTY_ASSETS.md); artwork credits are in [NOTICE](NOTICE).
 

package/cli/index.mjs

@@ -3,6 +3,7 @@
 //
 //   npx greenlight-motion doctor                     what this computer has, and how to fix what's missing
 //   npx greenlight-motion init <dir> [--from p.json] a project folder: index.html, project.json, assets/
+//   npx greenlight-motion script <dir> [--from s.json] [--force]   <dir>/script.json (a scene script) → project.json
 //   npx greenlight-motion build <dir>                project.json + assets/ → a page the user double-clicks
 //   npx greenlight-motion check <dir> [--json]       problems to fix (missing files, template, errors, blank frames)
 //   npx greenlight-motion stills <dir> [--at 0.5,2] [--count 6] [--out d]   PNG frames + a labelled contact sheet
@@ -20,6 +21,7 @@
 import { createRequire } from 'node:module';
 import { existsSync, mkdirSync, readFileSync, writeFileSync, readdirSync, statSync, copyFileSync, rmSync } from 'node:fs';
 import { spawn, spawnSync } from 'node:child_process';
+import { createHash } from 'node:crypto';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { applyEdits } from './apply.mjs';
@@ -112,7 +114,7 @@ const indexHtml = (title) => `<!doctype html>
 <script src="greenlight-motion.js"></script>
 <script src="project.js"></script>
 <script src="assets.js"></script>
-<script>GreenLightMotion.mountPage(document.getElementById('app'), { project: window.GL_PROJECT, assets: window.GL_ASSETS });</script>
+<script>GreenLightMotion.mountStudio(document.getElementById('app'), { project: window.GL_PROJECT, assets: window.GL_ASSETS });</script>
 `;
 // JSON inside a <script>: no "</script", no "<!--" (both escapes stay valid JSON and JS, so the app can read a page back)
 const scriptSafe = (s) => s.replace(/<\/(script)/gi, '<\\/$1').replace(/<!--/g, '<\\u0021--');
@@ -483,6 +485,85 @@ async function apply() {
   }
 }
 
+// ── the scene script: <dir>/script.json → <dir>/project.json, with the converter the GreenLight Motion connector's
+// build_video uses (dist/greenlight-motion-script.mjs — frontend/src/motionEngine/sceneScript.js; the format:
+// skill/references/scene-script.md). The script is the source: project.json is rewritten on every run, so a project
+// edited by hand since then is kept unless --force.
+async function script() {
+  const dir = rest[0];
+  if (!dir) fail('script needs a folder', 'npx greenlight-motion script my-video  (it reads my-video/script.json)');
+  const S = await import(pathToFileURL(path.join(PKG, 'dist', 'greenlight-motion-script.mjs')).href);
+  const from = flags.from ? path.resolve(String(flags.from)) : path.join(dir, 'script.json');
+  if (!existsSync(from)) fail(`no scene script at ${from}`, 'write one (skill/references/scene-script.md) or pass --from <file.json>');
+  let scene;
+  try { scene = JSON.parse(readFileSync(from, 'utf8')); } catch (e) { fail(`${from} is not valid JSON: ${e.message}`); }
+  const projectFile = path.join(dir, 'project.json');
+  const stamp = path.join(dir, '.script-built');   // the sha256 of the project.json the last run wrote
+  if (existsSync(projectFile) && !flags.force) {
+    const now = createHash('sha256').update(readFileSync(projectFile)).digest('hex');
+    const built = existsSync(stamp) ? readFileSync(stamp, 'utf8').trim() : '';
+    if (now !== built) fail(`${projectFile} ${built ? 'was edited since script wrote it' : 'was not written by script'}`, 'pass --force to replace it (its own edits are lost), or go on editing project.json with apply');
+  }
+  mkdirSync(path.join(dir, 'assets'), { recursive: true });
+  if (path.resolve(from) !== path.resolve(dir, 'script.json')) writeFileSync(path.join(dir, 'script.json'), JSON.stringify(scene, null, 2) + '\n');
+  // every src: a file in assets/ (asset:<name>), a file on this computer (copied in) or an https link (downloaded in,
+  // so the folder plays offline and the engine may draw it) — its kind and size read from its own bytes
+  const files = new Map(); const problems = [];
+  for (const src of S.scriptSources(scene)) {
+    try { files.set(src, await scriptFile(S, dir, src)); } catch (e) { problems.push(`src "${String(src).slice(0, 80)}": ${e.message}`); }
+  }
+  const caps = JSON.parse(readFileSync(path.join(PKG, 'schema', 'capabilities.json'), 'utf8'));
+  const out = S.compileScript(scene, caps, files);
+  out.problems.unshift(...problems);
+  for (const w of out.warnings) console.log(`warning: ${w}`);
+  if (out.problems.length) {
+    console.error(`greenlight-motion: the script can't be converted yet — fix these and run script again:\n${out.problems.map((p) => `  - ${p}`).join('\n')}`);
+    process.exit(1);
+  }
+  const text = JSON.stringify(out.project, null, 2) + '\n';
+  writeFileSync(projectFile, text);
+  writeFileSync(stamp, createHash('sha256').update(text).digest('hex') + '\n');
+  build(dir);
+  console.log(`\n${out.duration} s, ${out.summary.length} scene${out.summary.length === 1 ? '' : 's'}:\n${out.summary.join('\n')}
+\nnext: npx greenlight-motion check ${dir}  →  stills ${dir} (look at the contact sheet, fix script.json, run script again)  →  render ${dir}`);
+}
+async function scriptFile(S, dir, src) {
+  const take = (bytes, name) => {
+    const type = S.sniff(bytes);
+    if (!type) throw new Error('not a picture, video or sound the engine plays (PNG, JPEG, GIF, WebP, SVG, MP4, MOV, WebM, MP3, M4A, WAV, OGG)');
+    const kind = S.KIND[type];
+    if (bytes.length > S.LIMITS[kind]) throw new Error(`the ${kind} is ${Math.round(bytes.length / 1048576)} MB (up to ${S.LIMITS[kind] / 1048576} MB)`);
+    return { url: `asset:${name}`, kind, type, name, ...S.probe(bytes, type) };
+  };
+  const into = (name, bytes) => {   // a file brought in: under its own name, or a numbered one if a different file has it
+    const base = path.basename(name).replace(/[^\w.-]+/g, '-') || 'file';
+    let n = base;
+    for (let i = 2; existsSync(path.join(dir, 'assets', n)) && !readFileSync(path.join(dir, 'assets', n)).equals(bytes); i += 1) n = base.replace(/(\.\w+)?$/, `-${i}$1`);
+    writeFileSync(path.join(dir, 'assets', n), bytes);
+    return n;
+  };
+  if (/^asset:/i.test(src)) {
+    const name = src.replace(/^asset:/i, '');
+    const file = path.join(dir, 'assets', name);
+    if (!existsSync(file)) throw new Error(`put the file at ${file}`);
+    return take(readFileSync(file), name);
+  }
+  if (/^https?:\/\//i.test(src)) {
+    const r = await fetch(src, { redirect: 'follow', signal: AbortSignal.timeout(60000) });
+    if (!r.ok) throw new Error(`the link answered ${r.status}`);
+    const bytes = Buffer.from(await r.arrayBuffer());
+    let name = 'file';
+    try { name = decodeURIComponent(new URL(r.url || src).pathname.split('/').pop() || 'file'); } catch { /* the default */ }
+    const type = S.sniff(bytes);
+    if (type && !new RegExp(`\\.${type === 'jpg' ? 'jpe?g' : type}$`, 'i').test(name)) name = `${name.replace(/\.\w*$/, '') || 'file'}.${type}`;
+    return take(bytes, into(name, bytes));
+  }
+  const local = path.resolve(src);
+  if (!existsSync(local)) throw new Error(`no such file — put it in ${path.join(dir, 'assets')}/ and write "asset:<file name>"`);
+  const bytes = readFileSync(local);
+  return take(bytes, into(path.basename(local), bytes));
+}
+
 function schema() {
   const topic = rest[0] || 'format';
   const caps = () => JSON.parse(readFileSync(path.join(PKG, 'schema', 'capabilities.json'), 'utf8'));
@@ -589,9 +670,9 @@ async function review() {
   await new Promise(() => {});   // serves until stopped
 }
 
-const COMMANDS = { doctor, init, build: () => build(rest[0] || '.'), check, stills, render, pack, set, apply, schema, trace, review };
+const COMMANDS = { doctor, init, script, build: () => build(rest[0] || '.'), check, stills, render, pack, set, apply, schema, trace, review };
 if (!cmd || cmd === 'help' || flags.help || !COMMANDS[cmd]) {
-  console.log(readFileSync(fileURLToPath(import.meta.url), 'utf8').split('\n').slice(1, 19).map((l) => l.replace(/^\/\/ ?/, '')).join('\n'));
+  console.log(readFileSync(fileURLToPath(import.meta.url), 'utf8').split('\n').slice(1, 20).map((l) => l.replace(/^\/\/ ?/, '')).join('\n'));
   process.exit(cmd && !COMMANDS[cmd] && cmd !== 'help' ? 1 : 0);
 }
 try {

package/dist/bundle-inputs.json

@@ -15,6 +15,7 @@
   "frontend/src/components/mockupGenerator/backgroundSelector.css",
   "frontend/src/components/mockupGenerator/screenTexture.js",
   "frontend/src/components/model3dFallback.jsx",
+  "frontend/src/components/sketch/sketchEngine.js",
   "frontend/src/components/videoEditor/DirectionPad.jsx",
   "frontend/src/components/videoEditor/Fields.jsx",
   "frontend/src/components/videoEditor/KeyframePresetModal.jsx",
@@ -182,6 +183,7 @@
   "frontend/src/components/videoEditor/model3dPrimitives.js",
   "frontend/src/components/videoEditor/model3dShadowPlate.js",
   "frontend/src/components/videoEditor/model3dTonePass.js",
+  "frontend/src/components/videoEditor/modelDof.js",
   "frontend/src/components/videoEditor/motionBlur.js",
   "frontend/src/components/videoEditor/motionBlurLayer.js",
   "frontend/src/components/videoEditor/motionBlurLevels.js",
@@ -249,6 +251,7 @@
   "frontend/src/components/videoEditor/rigContactShadows.js",
   "frontend/src/components/videoEditor/rigDeform.js",
   "frontend/src/components/videoEditor/rigDeformNodes.js",
+  "frontend/src/components/videoEditor/rigShadowFit.js",
   "frontend/src/components/videoEditor/rigSoftShadows.js",
   "frontend/src/components/videoEditor/rotoRegion.js",
   "frontend/src/components/videoEditor/runningGlow.js",
@@ -295,12 +298,15 @@
   "frontend/src/components/videoEditor/vectorMedia.js",
   "frontend/src/components/videoEditor/videoEditorStore.js",
   "frontend/src/components/videoEditor/videoExporter.js",
+  "frontend/src/components/videoEditor/videoPlate.js",
   "frontend/src/components/videoEditor/videoRenderer.js",
   "frontend/src/components/videoEditor/videoSizePresets.js",
   "frontend/src/components/videoEditor/videoStabilization.js",
   "frontend/src/components/videoEditor/voiceSync.js",
   "frontend/src/components/videoEditor/warpNodes.js",
   "frontend/src/components/videoEditor/webcodecsClipDecoder.js",
+  "frontend/src/components/videoEditor/webmClipDecoder.js",
+  "frontend/src/components/videoEditor/webmDemux.js",
   "frontend/src/components/videoEditor/webmFrameCache.js",
   "frontend/src/hooks/appPrefs.js",
   "frontend/src/hooks/useHoverTip.jsx",
@@ -319,6 +325,21 @@
   "frontend/src/motionEngine/soundCues.js",
   "frontend/src/motionEngine/soundLibrary.js",
   "frontend/src/motionEngine/stubs/motionTemplatesRegistry.js",
+  "frontend/src/motionEngine/studio/color.css",
+  "frontend/src/motionEngine/studio/color.js",
+  "frontend/src/motionEngine/studio/focus.css",
+  "frontend/src/motionEngine/studio/gizmo.js",
+  "frontend/src/motionEngine/studio/highlight.css",
+  "frontend/src/motionEngine/studio/highlight.js",
+  "frontend/src/motionEngine/studio/index.js",
+  "frontend/src/motionEngine/studio/inspector.js",
+  "frontend/src/motionEngine/studio/lab.css",
+  "frontend/src/motionEngine/studio/lab.js",
+  "frontend/src/motionEngine/studio/navigator.css",
+  "frontend/src/motionEngine/studio/notes.css",
+  "frontend/src/motionEngine/studio/notes.js",
+  "frontend/src/motionEngine/studio/review.css",
+  "frontend/src/motionEngine/studio/review.js",
   "frontend/src/motionEngine/template.js",
   "frontend/src/motionEngine/trace.js",
   "frontend/src/motionEngine/useReview.js",