@bitmagic/cli 0.1.59-dev.5 → 0.1.59-dev.6

package/dist/editor/motion-panel.js

@@ -0,0 +1,393 @@
+/**
+ * The Record-motion panel — a webcam recording (or a picked video) becomes an animation clip via
+ * Uthana video-to-motion — composed into `shell-page.ts` the way `recording-panel.ts` is.
+ *
+ * Unlike the other panels this one also exports its BEHAVIOUR as a string: the recorder logic is
+ * a screenful, and it has to sit inside the shell's IIFE (it needs `setStatus`, `start`,
+ * `autoReload`, `banner`, `frame`). The same logic exists as a typed module for the Creator —
+ * `creator/src/utils/videoRecorder.ts` is the source of truth; this is a hand-kept ES5 port,
+ * because the shell has no bundler and cannot import it.
+ *
+ * Same template-literal rules as the host: **no backticks**, no regex literals starting with a
+ * dot-escape, every colour a `--bm-*` token — `shell-page.test.ts` enforces all three.
+ */
+export const MOTION_PANEL_CSS = `
+  /* Level with the other dialogs: each opens from its own control and they never stack. */
+  #motion-overlay { z-index: 10; }
+  #motion-dialog { width: min(520px, 94vw); padding: 20px; }
+  #motion-dialog .bm-label { display: block; margin: 14px 0 6px; }
+  #motion-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
+                  background: var(--bm-surface-alt); border: 1px solid var(--bm-border-muted); }
+  #motion-preview { width: 100%; height: 100%; object-fit: contain; background: #000000; display: block; }
+  #motion-preview.mirror { transform: scaleX(-1); }
+  #motion-timer { position: absolute; top: 10px; left: 10px; display: none; padding: 3px 10px;
+                  border-radius: 999px; background: var(--bm-pink); color: #ffffff; font-size: 12px;
+                  font-family: var(--bm-font-mono); }
+  #motion-timer.show { display: inline-block; }
+  #motion-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+                 text-align: center; padding: 20px; font-size: 13px; color: var(--bm-text-muted); }
+  #motion-hint.hidden { display: none; }
+  #motion-sources { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
+  #motion-file { display: none; }
+  #motion-guidance { margin: 10px 0 0; font-size: 12px; color: var(--bm-text-muted); }
+  #motion-options { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: end; }
+  #motion-name { width: 100%; }
+  #motion-slot { width: 100%; }
+  .motion-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; cursor: pointer; }
+  .motion-check input { accent-color: var(--bm-aqua); }
+  #motion-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+  #motion-note { display: none; margin-top: 12px; padding: 12px; border-radius: 6px; font-size: 12px;
+                 background: var(--bm-surface-alt); border: 1px solid var(--bm-border-muted);
+                 color: var(--bm-text-muted); }
+  #motion-note.show { display: block; }
+  #motion-note code { display: block; margin-top: 6px; color: var(--bm-aqua);
+                      font-family: var(--bm-font-mono); word-break: break-all; }
+`;
+export const MOTION_PANEL_HTML = `  <div id="motion-overlay" class="bm-overlay">
+    <div id="motion-dialog" class="bm-dialog">
+      <h2>Record a motion</h2>
+      <p>Perform the move on camera, or pick a video. Uthana turns it into an animation clip for
+         this game's characters. Costs sparks.</p>
+      <div id="motion-stage">
+        <video id="motion-preview" playsinline muted></video>
+        <span id="motion-timer">0:00</span>
+        <div id="motion-hint">Whole body in frame, one person, plain background, good light.
+          2&ndash;60 seconds.</div>
+      </div>
+      <div id="motion-sources">
+        <button id="motion-record" class="bm-pill bm-pill--primary" type="button">Record with webcam</button>
+        <button id="motion-stop" class="bm-pill" type="button" hidden>Stop</button>
+        <button id="motion-pick" class="bm-pill" type="button">Choose a video&hellip;</button>
+        <button id="motion-retake" class="bm-pill bm-pill--ghost" type="button" hidden>Start over</button>
+        <input id="motion-file" type="file" accept=".mp4,.mov,.avi,.webm,video/mp4,video/quicktime,video/webm">
+      </div>
+      <p id="motion-guidance"></p>
+      <div id="motion-options">
+        <div>
+          <label class="bm-label" for="motion-name">Name</label>
+          <input id="motion-name" class="bm-input" type="text" placeholder="e.g. Victory dance" maxlength="80">
+        </div>
+        <div>
+          <label class="bm-label" for="motion-slot">Use as</label>
+          <select id="motion-slot" class="bm-input">
+            <option value="">One-shot clip</option>
+            <option value="idle">Idle</option>
+            <option value="walk">Walk</option>
+            <option value="run">Run</option>
+          </select>
+        </div>
+      </div>
+      <label class="motion-check"><input id="motion-loop" type="checkbox"> Loops</label>
+      <div id="motion-actions">
+        <button id="motion-close" class="bm-pill bm-pill--ghost" type="button">Close</button>
+        <button id="motion-submit" class="bm-pill bm-pill--primary" type="button" disabled>Make the animation</button>
+      </div>
+      <div id="motion-note">
+        <span id="motion-note-text"></span>
+        <code id="motion-command"></code>
+      </div>
+    </div>
+  </div>
+`;
+/**
+ * Behaviour, spliced into the shell's IIFE. Runs after the shell's own helpers are defined, so
+ * `setStatus`, `start`, `autoReload`, `banner` and `frame` are in scope.
+ */
+export const MOTION_PANEL_JS = `
+  // ---- Record motion: webcam or file -> Uthana video-to-motion -> assets[] ----------------------
+  var motionToggle = document.getElementById('motion');
+  var motionOverlay = document.getElementById('motion-overlay');
+  var motionPreview = document.getElementById('motion-preview');
+  var motionTimer = document.getElementById('motion-timer');
+  var motionHint = document.getElementById('motion-hint');
+  var motionRecordBtn = document.getElementById('motion-record');
+  var motionStopBtn = document.getElementById('motion-stop');
+  var motionPickBtn = document.getElementById('motion-pick');
+  var motionRetakeBtn = document.getElementById('motion-retake');
+  var motionFile = document.getElementById('motion-file');
+  var motionGuidance = document.getElementById('motion-guidance');
+  var motionName = document.getElementById('motion-name');
+  var motionSlot = document.getElementById('motion-slot');
+  var motionLoop = document.getElementById('motion-loop');
+  var motionSubmit = document.getElementById('motion-submit');
+  var motionNote = document.getElementById('motion-note');
+  var MOTION_MIN_S = 2;
+  var MOTION_MAX_S = 60;
+  var MOTION_MAX_BYTES = 200 * 1024 * 1024;
+  var motionBlob = null;
+  var motionSeconds = 0;
+  var motionStream = null;
+  var motionRecorder = null;
+  var motionChunks = [];
+  var motionTickTimer = null;
+  var motionStartedAt = 0;
+  var motionObjectUrl = null;
+
+  function motionSupported() {
+    return !!(window.isSecureContext && navigator.mediaDevices && navigator.mediaDevices.getUserMedia
+      && typeof MediaRecorder !== 'undefined');
+  }
+
+  /** mp4 first (Safari), then the WebM the rest produce; asset-forger re-encodes either. */
+  function pickMotionMime() {
+    var candidates = ['video/mp4', 'video/webm;codecs=vp9', 'video/webm'];
+    for (var i = 0; i < candidates.length; i++) {
+      if (MediaRecorder.isTypeSupported(candidates[i])) return candidates[i];
+    }
+    return '';
+  }
+
+  function motionCameraError(error) {
+    var name = error && error.name;
+    if (name === 'NotAllowedError' || name === 'SecurityError') return 'Camera access was refused. Allow it in the address bar, or choose a video file.';
+    if (name === 'NotFoundError' || name === 'OverconstrainedError') return 'No camera found. Choose a video file instead.';
+    if (name === 'NotReadableError') return 'The camera is in use by another app. Close it, or choose a video file.';
+    return 'Could not start the camera: ' + ((error && error.message) || 'unknown error');
+  }
+
+  function formatMotionClock(seconds) {
+    var s = Math.max(0, Math.floor(seconds));
+    return Math.floor(s / 60) + ':' + (s % 60 < 10 ? '0' : '') + (s % 60);
+  }
+
+  function showMotionNote(text, command) {
+    document.getElementById('motion-note-text').textContent = text;
+    document.getElementById('motion-command').textContent = command || '';
+    motionNote.classList.add('show');
+  }
+
+  function releaseMotionObjectUrl() {
+    if (motionObjectUrl) { URL.revokeObjectURL(motionObjectUrl); motionObjectUrl = null; }
+  }
+
+  function stopMotionStream() {
+    if (motionStream) {
+      motionStream.getTracks().forEach(function (track) { track.stop(); });
+      motionStream = null;
+    }
+    if (motionTickTimer) { clearInterval(motionTickTimer); motionTickTimer = null; }
+    motionTimer.classList.remove('show');
+    motionPreview.classList.remove('mirror');
+  }
+
+  function setMotionButtons(state) {
+    motionRecordBtn.hidden = state !== 'idle';
+    motionPickBtn.hidden = state !== 'idle';
+    motionStopBtn.hidden = state !== 'recording';
+    motionRetakeBtn.hidden = state !== 'ready';
+    motionSubmit.disabled = state !== 'ready';
+  }
+
+  function resetMotionPanel() {
+    stopMotionStream();
+    if (motionRecorder && motionRecorder.state !== 'inactive') { try { motionRecorder.stop(); } catch (error) { /* already stopped */ } }
+    motionRecorder = null;
+    motionChunks = [];
+    motionBlob = null;
+    motionSeconds = 0;
+    releaseMotionObjectUrl();
+    motionPreview.srcObject = null;
+    motionPreview.removeAttribute('src');
+    motionPreview.controls = false;
+    motionPreview.muted = true;
+    motionHint.classList.remove('hidden');
+    motionGuidance.textContent = motionSupported() ? '' : 'Webcam recording needs a secure page with a camera; choose a video file instead.';
+    motionRecordBtn.disabled = !motionSupported();
+    motionNote.classList.remove('show');
+    setMotionButtons('idle');
+  }
+
+  function openMotionPanel() {
+    resetMotionPanel();
+    motionOverlay.classList.add('show');
+    motionName.focus();
+  }
+
+  /** Returns whether it was open — the Escape handler's contract, like closeAssetDetail. */
+  function closeMotionPanel() {
+    if (!motionOverlay.classList.contains('show')) return false;
+    stopMotionStream();
+    if (motionRecorder && motionRecorder.state !== 'inactive') { try { motionRecorder.stop(); } catch (error) { /* already stopped */ } }
+    motionOverlay.classList.remove('show');
+    frame.focus();
+    return true;
+  }
+
+  /** The clip is in hand: show it back, and say whether it is within Uthana's 2-60 s window. */
+  function acceptMotionClip(blob, seconds) {
+    motionBlob = blob;
+    motionSeconds = seconds;
+    releaseMotionObjectUrl();
+    motionObjectUrl = URL.createObjectURL(blob);
+    motionPreview.srcObject = null;
+    motionPreview.src = motionObjectUrl;
+    motionPreview.controls = true;
+    motionPreview.muted = true;
+    motionHint.classList.add('hidden');
+    var note;
+    if (blob.size > MOTION_MAX_BYTES) note = 'That video is over 200 MB. Trim it to the seconds that matter.';
+    else if (seconds > 0 && seconds < MOTION_MIN_S) note = 'Too short: Uthana needs at least ' + MOTION_MIN_S + ' seconds.';
+    else if (seconds > MOTION_MAX_S) note = 'Too long: Uthana takes at most ' + MOTION_MAX_S + ' seconds. Trim it, or record again.';
+    var ok = !note;
+    motionGuidance.textContent = ok
+      ? (seconds > 0 ? formatMotionClock(seconds) + ' of video ready.' : 'Video ready.')
+      : note;
+    setMotionButtons('ready');
+    motionSubmit.disabled = !ok;
+  }
+
+  async function startMotionRecording() {
+    if (!motionSupported()) return;
+    motionNote.classList.remove('show');
+    try {
+      motionStream = await navigator.mediaDevices.getUserMedia({
+        video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: 'user' }, audio: false
+      });
+    } catch (error) {
+      motionGuidance.textContent = motionCameraError(error);
+      return;
+    }
+    releaseMotionObjectUrl();
+    motionPreview.removeAttribute('src');
+    motionPreview.controls = false;
+    motionPreview.srcObject = motionStream;
+    motionPreview.classList.add('mirror');
+    motionHint.classList.add('hidden');
+    try { await motionPreview.play(); } catch (error) { /* autoplay refused; the stream still shows on interaction */ }
+    var mime = pickMotionMime();
+    try {
+      motionRecorder = mime ? new MediaRecorder(motionStream, { mimeType: mime }) : new MediaRecorder(motionStream);
+    } catch (error) {
+      stopMotionStream();
+      motionGuidance.textContent = 'This browser cannot record video. Choose a video file instead.';
+      return;
+    }
+    motionChunks = [];
+    motionRecorder.ondataavailable = function (event) { if (event.data && event.data.size > 0) motionChunks.push(event.data); };
+    motionRecorder.onstop = function () {
+      var seconds = (Date.now() - motionStartedAt) / 1000;
+      var type = motionRecorder.mimeType || mime || 'video/webm';
+      stopMotionStream();
+      acceptMotionClip(new Blob(motionChunks, { type: type }), seconds);
+    };
+    motionStartedAt = Date.now();
+    motionRecorder.start(1000);
+    motionTimer.textContent = '0:00';
+    motionTimer.classList.add('show');
+    motionGuidance.textContent = 'Recording. Stop when the move is done (auto-stops at ' + MOTION_MAX_S + ' s).';
+    setMotionButtons('recording');
+    motionTickTimer = setInterval(function () {
+      var elapsed = (Date.now() - motionStartedAt) / 1000;
+      motionTimer.textContent = formatMotionClock(elapsed);
+      if (elapsed >= MOTION_MAX_S) stopMotionRecording();
+    }, 250);
+  }
+
+  function stopMotionRecording() {
+    if (motionRecorder && motionRecorder.state === 'recording') motionRecorder.stop();
+  }
+
+  function pickMotionFile(file) {
+    if (!file) return;
+    // Read the duration off the file itself; a picked video knows its length, a fresh WebM often
+    // does not (Infinity), so 0 means "unknown" and the server's ffprobe is the judge.
+    var probe = document.createElement('video');
+    probe.preload = 'metadata';
+    var url = URL.createObjectURL(file);
+    var settled = false;
+    var finish = function (seconds) {
+      if (settled) return;
+      settled = true;
+      URL.revokeObjectURL(url);
+      acceptMotionClip(file, seconds);
+    };
+    probe.onloadedmetadata = function () { finish(isFinite(probe.duration) ? probe.duration : 0); };
+    probe.onerror = function () { finish(0); };
+    probe.src = url;
+    setTimeout(function () { finish(0); }, 3000);
+  }
+
+  var motionPollTimer = null;
+  function pollMotionJob() {
+    if (motionPollTimer) clearTimeout(motionPollTimer);
+    var tick = async function () {
+      var job;
+      try {
+        job = (await (await fetch('/api/editor/motion-status')).json()).job;
+      } catch (error) {
+        motionPollTimer = setTimeout(tick, 3000);
+        return;
+      }
+      if (!job) return;
+      if (job.status === 'running') {
+        showMotionNote(job.message, '');
+        setStatus('saving', 'Making the animation…');
+        motionPollTimer = setTimeout(tick, 3000);
+        return;
+      }
+      if (job.status === 'failed') {
+        showMotionNote('Could not make the animation: ' + job.message, '');
+        setStatus('error', 'Animation failed');
+        setMotionButtons('ready');
+        return;
+      }
+      showMotionNote(job.message + ' Reloading to show it.', '');
+      setStatus('saved', 'Animation added');
+      setMotionButtons('ready');
+      if (autoReload && !voxelSessionActive && !voxelSessionPending) start();
+      else banner.classList.add('show');
+    };
+    void tick();
+  }
+
+  async function submitMotion() {
+    if (!motionBlob) return;
+    var name = motionName.value.trim();
+    if (name === '') { motionName.focus(); return; }
+    var query = '?name=' + encodeURIComponent(name)
+      + '&slot=' + encodeURIComponent(motionSlot.value)
+      + '&loop=' + (motionLoop.checked ? '1' : '0');
+    motionSubmit.disabled = true;
+    showMotionNote('Uploading the video…', '');
+    var response, result;
+    try {
+      response = await fetch('/api/editor/motion-video' + query, {
+        method: 'POST',
+        headers: { 'Content-Type': motionBlob.type || 'video/webm' },
+        body: motionBlob
+      });
+      result = await response.json();
+    } catch (error) {
+      showMotionNote('Could not send the video to the sidecar.', '');
+      motionSubmit.disabled = false;
+      return;
+    }
+    if (!response.ok || result.ok !== true) {
+      showMotionNote(result.error || 'The sidecar refused the video.', '');
+      motionSubmit.disabled = false;
+      return;
+    }
+    if (result.running !== true) {
+      // The one case the sidecar cannot run itself: nobody is logged in.
+      showMotionNote(result.reason || '', result.command || '');
+      setStatus('saved', 'Video saved');
+      return;
+    }
+    showMotionNote(result.note || 'Making the animation — this takes a few minutes. You can keep editing.', '');
+    setStatus('saving', 'Making the animation…');
+    pollMotionJob();
+  }
+
+  motionToggle.addEventListener('click', openMotionPanel);
+  document.getElementById('motion-close').addEventListener('click', function () { closeMotionPanel(); });
+  motionOverlay.addEventListener('click', function (event) {
+    if (event.target === motionOverlay) closeMotionPanel();
+  });
+  motionRecordBtn.addEventListener('click', function () { void startMotionRecording(); });
+  motionStopBtn.addEventListener('click', stopMotionRecording);
+  motionRetakeBtn.addEventListener('click', resetMotionPanel);
+  motionPickBtn.addEventListener('click', function () { motionFile.value = ''; motionFile.click(); });
+  motionFile.addEventListener('change', function () { pickMotionFile(motionFile.files && motionFile.files[0]); });
+  motionSubmit.addEventListener('click', function () { void submitMotion(); });
+`;
+//# sourceMappingURL=motion-panel.js.map

package/dist/editor/motion-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-panel.js","sourceRoot":"","sources":["../../src/editor/motion-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B/B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ChC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwS9B,CAAC"}

package/dist/editor/motion-sink.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The Record-motion panel's server half, minus the I/O: what `POST /api/editor/motion-video`
+ * accepts and how it names things. Kept pure — no fs, no network — so it is testable the way
+ * `recording-sink.ts` and `save.ts` are; `server.ts` owns the request and the job.
+ *
+ * The page POSTs the recording's raw bytes (a MediaRecorder Blob or a picked file) with the
+ * blob's own Content-Type, and the asset options as query parameters. Raw rather than multipart
+ * because the sidecar has no multipart parser beyond the recorder's frame sink, and a single
+ * binary body is the simplest thing both sides get right.
+ */
+import { type LocomotionState } from '@bitmagic/asset-core';
+/** Matches the CLI lane's own cap (`generate/animation-from-video.ts`) and asset-forger's. */
+export declare const MOTION_BODY_LIMIT_BYTES: number;
+export interface MotionVideoRequest {
+    extension: string;
+    contentType: string;
+    name: string;
+    locomotionState?: LocomotionState;
+    loop?: boolean;
+}
+export interface MotionVideoRefusal {
+    status: 400 | 413 | 415;
+    error: string;
+}
+/** The bare media type: `video/webm;codecs=vp9` → `video/webm`. */
+export declare function baseContentType(contentType: string | undefined): string;
+export declare function parseMotionVideoRequest(input: {
+    contentType: string | undefined;
+    contentLength: number;
+    query: URLSearchParams;
+}): MotionVideoRequest | MotionVideoRefusal;
+/** The command the panel prints when nobody is logged in — what the agent (or the creator) runs instead. */
+export declare function motionCommand(videoPath: string, request: Pick<MotionVideoRequest, 'name' | 'locomotionState' | 'loop'>): string;

package/dist/editor/motion-sink.js

@@ -0,0 +1,66 @@
+/**
+ * The Record-motion panel's server half, minus the I/O: what `POST /api/editor/motion-video`
+ * accepts and how it names things. Kept pure — no fs, no network — so it is testable the way
+ * `recording-sink.ts` and `save.ts` are; `server.ts` owns the request and the job.
+ *
+ * The page POSTs the recording's raw bytes (a MediaRecorder Blob or a picked file) with the
+ * blob's own Content-Type, and the asset options as query parameters. Raw rather than multipart
+ * because the sidecar has no multipart parser beyond the recorder's frame sink, and a single
+ * binary body is the simplest thing both sides get right.
+ */
+import { LOCOMOTION_STATES } from '@bitmagic/asset-core';
+/** Matches the CLI lane's own cap (`generate/animation-from-video.ts`) and asset-forger's. */
+export const MOTION_BODY_LIMIT_BYTES = 200 * 1024 * 1024;
+/** Content types a browser's MediaRecorder or a file picker hands over, and the extension each becomes. */
+const EXTENSION_BY_TYPE = {
+    'video/mp4': 'mp4',
+    'video/quicktime': 'mov',
+    'video/x-msvideo': 'avi',
+    'video/webm': 'webm',
+};
+/** The bare media type: `video/webm;codecs=vp9` → `video/webm`. */
+export function baseContentType(contentType) {
+    return (contentType ?? '').split(';')[0].trim().toLowerCase();
+}
+export function parseMotionVideoRequest(input) {
+    const contentType = baseContentType(input.contentType);
+    const extension = EXTENSION_BY_TYPE[contentType];
+    if (extension === undefined) {
+        return {
+            status: 415,
+            error: `Expected a video body (${Object.keys(EXTENSION_BY_TYPE).join(', ')}); got ${JSON.stringify(contentType || 'nothing')}.`,
+        };
+    }
+    if (input.contentLength > MOTION_BODY_LIMIT_BYTES) {
+        return { status: 413, error: `The video is over ${MOTION_BODY_LIMIT_BYTES / 1024 / 1024} MB.` };
+    }
+    if (input.contentLength <= 0) {
+        return { status: 400, error: 'The video is empty.' };
+    }
+    const name = (input.query.get('name') ?? '').trim().slice(0, 80);
+    if (name === '') {
+        return { status: 400, error: 'name is required.' };
+    }
+    const slot = input.query.get('slot');
+    if (slot !== null && slot !== '' && !LOCOMOTION_STATES.includes(slot)) {
+        return { status: 400, error: `slot must be one of ${LOCOMOTION_STATES.join(', ')}.` };
+    }
+    const loop = input.query.get('loop');
+    return {
+        extension,
+        contentType,
+        name,
+        ...(slot !== null && slot !== '' ? { locomotionState: slot } : {}),
+        ...(loop === '1' || loop === 'true' ? { loop: true } : {}),
+    };
+}
+/** The command the panel prints when nobody is logged in — what the agent (or the creator) runs instead. */
+export function motionCommand(videoPath, request) {
+    const parts = ['bitmagic generate animation', `--video ${JSON.stringify(videoPath)}`, `--name ${JSON.stringify(request.name)}`];
+    if (request.locomotionState)
+        parts.push(`--slot ${request.locomotionState}`);
+    if (request.loop)
+        parts.push('--loop');
+    return parts.join(' ');
+}
+//# sourceMappingURL=motion-sink.js.map

package/dist/editor/motion-sink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-sink.js","sourceRoot":"","sources":["../../src/editor/motion-sink.ts"],"names":[],"mappings":"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"}

package/dist/editor/server.js

@@ -36,6 +36,8 @@ import { asHostJournalEvent, deriveSceneEvents, EditorJournal } from './journal.
 import { jobsDirPath, readJobLayout, readRunningJobs, withJobRecord } from '../project/jobs.js';
 import { listPreviews, readPreview, removePreview, writePreview } from './previews.js';
 import { findPropAsset, generateAndInstallProp } from '../generate/prop.js';
+import { generateAndInstallAnimationFromVideo } from '../generate/animation-from-video.js';
+import { MOTION_BODY_LIMIT_BYTES, motionCommand, parseMotionVideoRequest } from './motion-sink.js';
 import { resolveEnvironmentForCommand, resolveAuth0ClientId } from '../config/environments.js';
 import { getAccessToken } from '../auth/session.js';
 import { startUploadProxy } from '../forge/upload-proxy.js';
@@ -274,6 +276,8 @@ export async function startEditorServer(options) {
      * vite and headless Chrome, and two at once on a creator's laptop would fight for both.
      */
     let hqJob = null;
+    /** The Record-motion panel's job, one at a time for the same reason as `hqJob`. */
+    let motionJob = null;
     /**
      * A token, or null when nobody is logged in. Never starts a device-code flow.
      *
@@ -661,6 +665,113 @@ export async function startEditorServer(options) {
     const handleHqStatus = (res) => {
         sendJson(res, 200, { ok: true, job: hqJob, worldMtimeMs: lastWrittenMtimeMs });
     };
+    /**
+     * `POST /api/editor/motion-video` — the Record-motion panel's recording, as raw bytes.
+     *
+     * The sidecar runs the whole `bitmagic generate animation --video` lane in-process (upload,
+     * job, poll, world.json), the way the HQ button runs `generate prop`. The video is spooled to
+     * `.bitmagic/tmp/` first: when nobody is logged in the file is what the printed command points
+     * at, and when the job runs it is removed once the lane has read it.
+     */
+    const handleMotionVideo = async (req, res) => {
+        const requestUrl = new URL(req.url ?? '/', 'http://localhost');
+        const parsed = parseMotionVideoRequest({
+            contentType: req.headers['content-type'],
+            contentLength: Number(req.headers['content-length'] ?? '0'),
+            query: requestUrl.searchParams,
+        });
+        if ('error' in parsed) {
+            sendJson(res, parsed.status, { ok: false, error: parsed.error });
+            return;
+        }
+        let body;
+        try {
+            body = await readBodyBuffer(req, MOTION_BODY_LIMIT_BYTES);
+        }
+        catch {
+            sendJson(res, 413, { ok: false, error: `The video is over ${MOTION_BODY_LIMIT_BYTES / 1024 / 1024} MB.` });
+            return;
+        }
+        if (body.length === 0) {
+            sendJson(res, 400, { ok: false, error: 'The video is empty.' });
+            return;
+        }
+        if (motionJob !== null && motionJob.status === 'running') {
+            sendJson(res, 200, { ok: true, running: true, note: `Already making "${motionJob.name}" — one at a time.` });
+            return;
+        }
+        const tmpDir = path.join(options.root, '.bitmagic', 'tmp');
+        const videoPath = path.join(tmpDir, `motion-${Date.now()}.${parsed.extension}`);
+        try {
+            fs.mkdirSync(tmpDir, { recursive: true });
+            fs.writeFileSync(videoPath, body);
+        }
+        catch (error) {
+            const message = messageOf(error);
+            log(`[editor] could not spool the motion video: ${message}`);
+            sendJson(res, 500, { ok: false, error: message });
+            return;
+        }
+        const auth = await resolveAuth();
+        if (auth === null) {
+            const command = motionCommand(path.relative(options.root, videoPath), parsed);
+            journal.append({ event: 'motion.requested', name: parsed.name, videoPath, command });
+            sendJson(res, 200, {
+                ok: true,
+                running: false,
+                reason: 'Video saved. You are not logged in, so the editor cannot make the animation itself. '
+                    + 'Run `bitmagic login`, or have your agent run:',
+                command,
+            });
+            return;
+        }
+        const run = {
+            videoPath,
+            name: parsed.name,
+            ...(parsed.loop !== undefined ? { loop: parsed.loop } : {}),
+            ...(parsed.locomotionState !== undefined ? { locomotionState: parsed.locomotionState } : {}),
+        };
+        motionJob = { name: parsed.name, status: 'running', message: 'Uploading the video…' };
+        journal.append({ event: 'motion.started', name: parsed.name, ...(run.locomotionState ? { locomotionState: run.locomotionState } : {}) });
+        void withJobRecord({
+            root: options.root, kind: 'animation-video', label: parsed.name, log: (m) => log(`[editor] ${m}`),
+        }, async (recordedLog) => generateAndInstallAnimationFromVideo({
+            context: { root: options.root, metadata: options.metadata },
+            environment: auth.environment,
+            token: auth.token,
+            run,
+            deps: {
+                fetch: globalThis.fetch,
+                sleep: (ms) => new Promise((resolve) => setTimeout(resolve, ms)),
+                log: (message) => {
+                    recordedLog(message);
+                    if (motionJob?.status === 'running')
+                        motionJob.message = message;
+                },
+            },
+        })).then((result) => {
+            recordOwnWrite();
+            motionJob = {
+                name: parsed.name, status: 'done',
+                message: `Added "${parsed.name}" (${result.motionId})`
+                    + (result.locomotionState ? ` as the ${result.locomotionState} animation.` : '.'),
+            };
+            journal.append({
+                event: 'motion.completed', name: parsed.name, motionId: result.motionId, animationUrl: result.animationUrl,
+                ...(result.locomotionState ? { locomotionState: result.locomotionState } : {}),
+            });
+        }).catch((error) => {
+            const message = messageOf(error);
+            motionJob = { name: parsed.name, status: 'failed', message };
+            journal.append({ event: 'motion.failed', name: parsed.name, error: message });
+        }).finally(() => {
+            fs.rm(videoPath, { force: true }, () => { });
+        });
+        sendJson(res, 200, { ok: true, running: true });
+    };
+    const handleMotionStatus = (res) => {
+        sendJson(res, 200, { ok: true, job: motionJob, worldMtimeMs: lastWrittenMtimeMs });
+    };
     /**
      * One F9 gameplay frame from the recorder in the game iframe — the one caller of this server
      * that is NOT the shell. Request shape and the `~/Downloads/<name>/` layout mirror
@@ -986,6 +1097,14 @@ export async function startEditorServer(options) {
                 handleHqStatus(res);
                 return;
             }
+            if (req.method === 'POST' && url.startsWith('/api/editor/motion-video')) {
+                await handleMotionVideo(req, res);
+                return;
+            }
+            if (req.method === 'GET' && url === '/api/editor/motion-status') {
+                handleMotionStatus(res);
+                return;
+            }
             if (req.method === 'POST' && url === '/api/editor/terrain-saved') {
                 await handleTerrainSaved(req, res);
                 return;