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

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

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

package/dist/editor/motion-panel.js

@@ -0,0 +1,419 @@
+/**
+ * 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-countdown { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
+                      justify-content: center; gap: 6px; background: var(--bm-scrim); pointer-events: none; }
+  #motion-countdown.show { display: flex; }
+  #motion-countdown-number { font-size: 96px; font-weight: 700; line-height: 1; color: #ffffff; }
+  #motion-countdown-hint { font-size: 13px; color: #ffffff; opacity: 0.85; }
+  #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-countdown"><span id="motion-countdown-number">3</span><span id="motion-countdown-hint">Get in frame</span></div>
+        <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 motionCountdown = document.getElementById('motion-countdown');
+  var motionCountdownNumber = document.getElementById('motion-countdown-number');
+  /** Seconds shown on the live preview before the recorder starts, so the first frames are the pose. */
+  var MOTION_COUNTDOWN_S = 3;
+  var motionCountdownToken = 0;
+  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; }
+    motionCountdownToken++;
+    motionCountdown.classList.remove('show');
+    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;
+    }
+    // Count down on the live preview; Stop during the count aborts without recording.
+    var token = ++motionCountdownToken;
+    setMotionButtons('recording');
+    motionGuidance.textContent = 'Get in frame — recording starts after the count.';
+    motionCountdown.classList.add('show');
+    for (var left = MOTION_COUNTDOWN_S; left > 0; left--) {
+      motionCountdownNumber.textContent = String(left);
+      await new Promise(function (resolve) { setTimeout(resolve, 1000); });
+      if (token !== motionCountdownToken) return;
+    }
+    motionCountdown.classList.remove('show');
+    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(); return; }
+    // Stop pressed during the countdown: nothing was recorded, back to the start.
+    if (motionCountdown.classList.contains('show')) resetMotionPanel();
+  }
+
+  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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC/B,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ChC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4T9B,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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"}