greenlight-motion 0.1.1 → 0.1.2

package/README.md

@@ -17,16 +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.1 doctor          # Node 18+, Chrome or Edge, WebGPU, H.264: what's missing and how to fix it
-npx greenlight-motion@0.1.1 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/
 # or: write my-video/script.json (a scene script, skill/references/scene-script.md), then
-npx greenlight-motion@0.1.1 script my-video # script.json → project.json with the Video Editor's own presets
-npx greenlight-motion@0.1.1 check my-video  # what to fix: missing files, template mistakes, blank frames, broken plugins
-npx greenlight-motion@0.1.1 stills my-video # frames + a labelled contact sheet, to look at
-npx greenlight-motion@0.1.1 render my-video --fps 60 --motion-blur
-npx greenlight-motion@0.1.1 pack my-video   # everything in ONE html file
-npx greenlight-motion@0.1.1 pack my-video --glvideo   # ONE .glvideo: double-clicked, it opens in GreenLight Dash
+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`
@@ -72,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.1/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/cli/index.mjs

@@ -114,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--');

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",
@@ -324,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",

package/dist/greenlight-motion-script.mjs

@@ -16591,6 +16591,11 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
 
 // src/motionEngine/sceneScriptGuide.js
 init_define_import_meta_env();
+
+// ../skills/greenlight-dash/references/video-design.md
+var video_design_default = "# Motion design that looks made, not generated\n\nWhat makes a video read as designed rather than generated. The rules hold however the video is built \u2014 a project\nthrough the app's API, `project.json` with the engine's CLI, or a scene script \u2014 so read them before the first version\nand check every version against them.\n\n## Story and words\n\n- **One idea per scene**: 3\u20136 scenes of 2\u20133 s for a short video. A scene that says two things says neither.\n- **At most ~8 words on screen at once, held at least 1 s.** People read about 3 words a second; text that leaves\n  before it is read is noise.\n- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.\n\n## Hierarchy\n\n- One headline per scene; supporting text much smaller. Hierarchy comes from size and weight, not colour alone.\n- One accent colour and strong contrast.\n- Keep text inside the middle 80 % of the frame (in a project: |panX| and |panY| \u2264 40): players and feeds crop the\n  edges.\n\n## Timing\n\n- Stagger related elements by 0.06\u20130.12 s.\n- **One focal move at a time.** If everything moves, nothing reads: supporting elements move less and later.\n- Shapes and pictures enter in 0.4\u20130.8 s; exits are faster than entrances.\n- A text animation takes at least 0.8\u20131 s over the whole line, first unit in to last unit settled, unless the video\n  needs snap (a beat hit, a glitch flick): faster text flashes past before it is read. The arithmetic per kind of\n  animation: video-projects.md, Text animation pace.\n\n## Easing by intent\n\n- Entrances: `AE Out` or `Expo Out` (fast start, soft landing). Camera and big moves: `AE Smooth`.\n- A layer that passes through (in, glide, out): `Smooth Glide` with the `glide` expression \u2014 the Glide keyframe\n  presets build it (video-keyframes.md).\n- Playful arrivals: `Back Out` or `Overshoot`. Exits: `Ease In`.\n- `Linear` only for constant motion: tickers, rotation, progress along a path.\n\n## Text animation\n\n- Animate words or letters, never a whole line at once \u2014 the text presets do this.\n- One family per video. Calm presets for lines and captions: Glide Text (`glide-text`), Classic Fade Up\n  (`classic-fade-up`), Classic Rise (Mask) (`classic-rise-mask`); Focus Type (`focus-type`) for a title.\n- Punchy presets that tilt or overshoot \u2014 Swing Pop (`swing-pop`), Whip (`whip`), Letter Vortex (`letter-vortex`) \u2014\n  only on 1\u20133 words when the video wants energy. On a longer caption they read cheap.\n- Glide Continuous (`glide-continuous`) and Glide Soft Stop (`glide-soft-stop`) never let the text rest: use them\n  only when the user asks for drifting text.\n- On a coloured card, pick a preset without a colour band (Classic Rise (Mask), Classic Fade Up): a band's colour can\n  clash with the card.\n\n## Transitions and camera\n\n- Vary two or three kinds of transition across a video: one kind everywhere looks like a template, a new one at\n  every cut looks random.\n- Camera moves are slow and small unless they are the point. Fast motion looks best at 60 fps with motion blur.\n\n## Sound\n\n- A soft whoosh on each transition and on the first headline is a good base. `data-1` or `selection-data-click` for\n  UI-like pops, `cinematic-transition-13` for one big reveal.\n\n## What to check in every version\n\nLook at real frames across the video (a contact sheet) before the user sees it \u2014 the JSON doesn't show these:\nblank or empty frames, overlapping or cut-off text, text too small or gone too fast, nothing moving or everything\nmoving at once, weak hierarchy, clashing colours. Fix them and look again; two rounds are usually enough.\n";
+
+// src/motionEngine/sceneScriptGuide.js
 var PREFERRED = {
   text: ["glide-text", "ember-type", "marker", "outline-pass", "neon-flow", "glitch", "swing-pop", "pendulum", "fan-deal", "whip", "word-swing", "letter-vortex"],
   transitions: ["Cross Fade", "Advanced Zoom", "Advanced Movement", "Circular Wipe", "Pixel Blocks", "Camera Whip", "Zoom Ruler", "Gradient Glow Stack", "Gradient Map"],
@@ -16647,17 +16652,7 @@ function scriptFormatGuide(host = "chat") {
 `;
 }
 function designGuide() {
-  return `## What makes it look made, not generated
-
-- **One idea per scene**, 3\u20136 scenes, 2\u20133 s each; at most ~8 words on screen at once, held \u2265 1 s (people read ~3 words a second).
-- **Hierarchy**: one headline per scene; supporting text much smaller; one accent colour; strong contrast.
-- **Timing**: stagger related elements 0.06\u20130.12 s; one focal move at a time \u2014 supporting elements move less and later; exits faster than entrances.
-- **Text animation** moves words or letters, never whole lines (the presets do this). Keep one family per video; use calm presets (glide-text,
-  classic-fade-up, classic-rise-mask) for long lines, punchy ones (swing-pop, whip, letter-vortex) for 1\u20133 words. glide-continuous and
-  glide-soft-stop never let the text rest: only when the user asks for drifting text.
-- **Transitions**: vary two or three kinds across the video; the camera stays subtle.
-- **Sound**: auto is a good base; add \`data-1\` / \`selection-data-click\` for UI-like pops, \`cinematic-transition-13\` for a big reveal.
-- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.
+  return `${video_design_default.replace(/^(#+) /gm, "#$1 ").trim()}
 
 `;
 }