npm - @bitmagic/cli - Versions diffs - 0.1.64-dev.1 → 0.1.64-dev.11 - Mend

@bitmagic/cli 0.1.64-dev.1 → 0.1.64-dev.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/README.md +80 -5
package/assets/blender-level/README.md +25 -0
package/assets/blender-level/audit.py +232 -0
package/assets/blender-level/bmlevel/__init__.py +294 -0
package/assets/blender-level/bmlevel/core.py +438 -0
package/assets/blender-level/bmlevel/scene_bpy.py +186 -0
package/assets/blender-level/bmlevel/scene_null.py +44 -0
package/assets/blender-level/example_level.py +80 -0
package/assets/blender-level/find_blender.py +62 -0
package/assets/blender-level/review.py +117 -0
package/assets/blender-level/sync_world.py +85 -0
package/assets/blender-level/tests/test_core.py +189 -0
package/dist/assets/keep-glb.d.ts +20 -0
package/dist/assets/keep-glb.js +45 -0
package/dist/assets/keep-glb.js.map +1 -0
package/dist/cli.d.ts +5 -0
package/dist/cli.js +2 -0
package/dist/cli.js.map +1 -1
package/dist/commands/assets.d.ts +3 -0
package/dist/commands/assets.js +33 -3
package/dist/commands/assets.js.map +1 -1
package/dist/commands/cover.js +7 -1
package/dist/commands/cover.js.map +1 -1
package/dist/commands/forge.d.ts +2 -0
package/dist/commands/forge.js +76 -12
package/dist/commands/forge.js.map +1 -1
package/dist/commands/generate.d.ts +88 -1
package/dist/commands/generate.js +400 -21
package/dist/commands/generate.js.map +1 -1
package/dist/commands/init.d.ts +11 -0
package/dist/commands/init.js +33 -1
package/dist/commands/init.js.map +1 -1
package/dist/commands/judge.d.ts +0 -11
package/dist/commands/judge.js +15 -2
package/dist/commands/judge.js.map +1 -1
package/dist/commands/levels.d.ts +1 -1
package/dist/commands/levels.js +14 -3
package/dist/commands/levels.js.map +1 -1
package/dist/commands/reference.js +5 -1
package/dist/commands/reference.js.map +1 -1
package/dist/commands/reset-account.js +2 -11
package/dist/commands/reset-account.js.map +1 -1
package/dist/commands/tools.d.ts +1 -0
package/dist/commands/tools.js +73 -0
package/dist/commands/tools.js.map +1 -0
package/dist/commands/trailer.js +18 -4
package/dist/commands/trailer.js.map +1 -1
package/dist/editor/asset-detail-panel.d.ts +8 -3
package/dist/editor/asset-detail-panel.js +11 -1
package/dist/editor/asset-detail-panel.js.map +1 -1
package/dist/editor/hud-replay-page.js +317 -22
package/dist/editor/hud-replay-page.js.map +1 -1
package/dist/editor/shell-page.js +117 -7
package/dist/editor/shell-page.js.map +1 -1
package/dist/forge/apply-modifications.js +70 -2
package/dist/forge/apply-modifications.js.map +1 -1
package/dist/forge/progress.d.ts +10 -0
package/dist/forge/progress.js +7 -6
package/dist/forge/progress.js.map +1 -1
package/dist/forge/run-pipeline.d.ts +8 -0
package/dist/forge/run-pipeline.js +37 -2
package/dist/forge/run-pipeline.js.map +1 -1
package/dist/forge/stream.d.ts +7 -1
package/dist/forge/stream.js +5 -2
package/dist/forge/stream.js.map +1 -1
package/dist/forge/two-d-gate.d.ts +82 -0
package/dist/forge/two-d-gate.js +232 -0
package/dist/forge/two-d-gate.js.map +1 -0
package/dist/generate/animation-from-video.d.ts +11 -3
package/dist/generate/animation-from-video.js +12 -2
package/dist/generate/animation-from-video.js.map +1 -1
package/dist/generate/model.d.ts +11 -0
package/dist/generate/model.js +41 -1
package/dist/generate/model.js.map +1 -1
package/dist/generate/prop.d.ts +9 -0
package/dist/generate/prop.js +59 -9
package/dist/generate/prop.js.map +1 -1
package/dist/generate/video-review.d.ts +28 -0
package/dist/generate/video-review.js +120 -0
package/dist/generate/video-review.js.map +1 -0
package/dist/project/art-style.d.ts +34 -0
package/dist/project/art-style.js +63 -0
package/dist/project/art-style.js.map +1 -0
package/dist/prompt.d.ts +9 -0
package/dist/prompt.js +36 -0
package/dist/prompt.js.map +1 -0
package/dist/publish/bundle.d.ts +12 -0
package/dist/publish/bundle.js +32 -0
package/dist/publish/bundle.js.map +1 -1
package/dist/render/qr-png.d.ts +6 -3
package/dist/render/qr-png.js +8 -8
package/dist/render/qr-png.js.map +1 -1
package/dist/scaffold/blender-level-skill-files.d.ts +26 -0
package/dist/scaffold/blender-level-skill-files.js +570 -0
package/dist/scaffold/blender-level-skill-files.js.map +1 -0
package/dist/scaffold/claude-settings.js +2 -0
package/dist/scaffold/claude-settings.js.map +1 -1
package/dist/scaffold/project-files.d.ts +2 -1
package/dist/scaffold/project-files.js +125 -42
package/dist/scaffold/project-files.js.map +1 -1
package/dist/scaffold/project.d.ts +9 -0
package/dist/scaffold/project.js +29 -3
package/dist/scaffold/project.js.map +1 -1
package/dist/scaffold/reference-guidance.d.ts +1 -1
package/dist/scaffold/reference-guidance.js +2 -1
package/dist/scaffold/reference-guidance.js.map +1 -1
package/dist/scaffold/skill-files.js +3 -1
package/dist/scaffold/skill-files.js.map +1 -1
package/dist/scaffold/unity-skill-files.js +1 -2
package/dist/scaffold/unity-skill-files.js.map +1 -1
package/dist/tools/bundles.d.ts +21 -0
package/dist/tools/bundles.js +67 -0
package/dist/tools/bundles.js.map +1 -0
package/dist/trailer/ffmpeg.d.ts +10 -0
package/dist/trailer/ffmpeg.js +51 -6
package/dist/trailer/ffmpeg.js.map +1 -1
package/dist/trailer/hud-raster.d.ts +12 -12
package/dist/trailer/hud-raster.js +85 -32
package/dist/trailer/hud-raster.js.map +1 -1
package/dist/trailer/hud-state.d.ts +75 -4
package/dist/trailer/hud-state.js +132 -17
package/dist/trailer/hud-state.js.map +1 -1
package/dist/trailer/io.d.ts +2 -0
package/dist/trailer/io.js +6 -1
package/dist/trailer/io.js.map +1 -1
package/dist/trailer/link.d.ts +1 -0
package/dist/trailer/link.js +15 -0
package/dist/trailer/link.js.map +1 -0
package/dist/trailer/make.d.ts +2 -0
package/dist/trailer/make.js +1 -0
package/dist/trailer/make.js.map +1 -1
package/dist/trailer/merge.js +32 -11
package/dist/trailer/merge.js.map +1 -1
package/dist/trailer/music-beats.js +4 -39
package/dist/trailer/music-beats.js.map +1 -1
package/dist/trailer/render.d.ts +2 -0
package/dist/trailer/render.js +94 -48
package/dist/trailer/render.js.map +1 -1
package/dist/trailer/timeline-types.d.ts +19 -0
package/dist/trailer/timeline-types.js +42 -2
package/dist/trailer/timeline-types.js.map +1 -1
package/dist/trailer/title-raster.js +2 -1
package/dist/trailer/title-raster.js.map +1 -1
package/dist/trailer/titles.js +6 -1
package/dist/trailer/titles.js.map +1 -1
package/dist/trailer/video-chain.d.ts +96 -8
package/dist/trailer/video-chain.js +183 -0
package/dist/trailer/video-chain.js.map +1 -1
package/dist/verify/browser.js +4 -1
package/dist/verify/browser.js.map +1 -1
package/package.json +4 -4

package/dist/editor/hud-replay-page.js CHANGED Viewed

@@ -13,12 +13,23 @@
  * default `server.cors` admits localhost origins, which is what makes the cross-origin module load
  * work.
  *
- * Contract with `trailer/hud-raster.ts` (unchanged from the web lane's `game/hud-replay.html`):
+ * Contract with `trailer/hud-raster.ts` (the same one the web lane's `game/hud-replay.html` keeps):
  *   window.__hudReplayReady === true      when the HUD is constructed
  *   window.__hudReplay.setViewport(w, h)  size the surface to the recording
- *   window.__hudReplay.render(state)      apply a state snapshot (synchronous)
+ *   window.__hudReplay.render(state, ms, clip)  apply a state snapshot (synchronous); `ms` is the
+ *                                         keyframe's position on the SOURCE clock and `clip` the EDL
+ *                                         clip it belongs to — together they seed animation phase
+ *                                         (both optional; an older raster passes neither)
+ *   window.__hudReplay.settle()           promise: fonts/images loaded, or 1.5 s
  *
- * Same template-literal rule as the shell page: **no backticks** in the emitted output.
+ * Same template-literal rules as the shell page: **no backticks** in the emitted output, and every
+ * backslash the emitted JS needs (regex escapes) is written doubled here, because an untagged
+ * template drops the backslash from an unknown escape like `\(`.
+ *
+ * The engine module is imported as a namespace and feature-detected: this page ships in the CLI
+ * and runs against whichever engine the project has vendored, so a named import of something that
+ * engine predates would fail the whole module load (and with it every overlay) rather than one
+ * optional nicety.
  */
 import { CDN_IMPORTS } from '../scaffold/project-files.js';
 import { importMapEntries } from '../scaffold/aliases.js';
@@ -34,6 +45,9 @@ export function renderHudReplayHtml(options) {
 <html lang="en">
 <head>
 <meta charset="utf-8">
+<!-- The page is served from the sidecar, but captured game sheets and widget markup reference
+     assets root-relatively against the GAME origin; the import map is already absolute. -->
+<base href="http://localhost:${options.gamePort}/">
 <title>HUD Replay (trailer overlay)</title>
 <style>
   /* Transparent everywhere — the renderer captures with omitBackground so only HUD pixels carry alpha. */
@@ -41,10 +55,16 @@ export function renderHudReplayHtml(options) {
   /* The HUD fades itself in only on GameState.PLAYING, which never happens here; force it visible and
      kill transitions so a screenshot taken immediately after render() is the settled frame. */
   .hud-root { opacity: 1 !important; transition: none !important; }
+  /* First layer: an !important declaration beats every normal one whatever its specificity, so this
+     kills any game animation declared normally. A game rule that is itself !important escapes it,
+     and freezeMotion() below is what makes THOSE deterministic. Keeping the rule still pays — the
+     animations it suppresses are never created at all. */
   .hud-root, .hud-root * { animation: none !important; transition: none !important; }
   /* Gameplay layer holds the reticle/ESC hint — not part of a trailer overlay. */
   .hud-gameplay-layer { display: none !important; }
 </style>
+<!-- Kept last in <head> after every captured-sheet injection; see enforceTransparentPageBackground(). -->
+<style id="hud-replay-transparent">html, body { background: transparent !important; }</style>
 <script type="importmap">
 ${JSON.stringify({ imports }, null, 2)}
 </script>
@@ -52,38 +72,56 @@ ${JSON.stringify({ imports }, null, 2)}
 <body>
 <script type="module">
 import { GameHUD } from 'engine/GameHUD.js';
-import { applyThemeGlobals } from 'engine/hud/index.js';
+import * as hudApi from 'engine/hud/index.js';
+/** Rebuilt whenever the element set changes; kept between same-shape frames. */
 var hud = null;
 var builtKey = '';
+/** The recorded theme currently applied, as JSON — re-applied only on change. */
+var lastThemeJson = 'null';
 function disposeHud() {
   if (hud) { hud.dispose(); hud = null; }
+  // dispose() removes .hud-root/.hud-gameplay-layer, and a previous frame's toast stacks live inside those.
   builtKey = '';
 }
-/** Identity of a state's STRUCTURE (not its values): unchanged means mutate, changed means rebuild. */
+/**
+ * Identity of a state's STRUCTURE (not its values): unchanged means mutate, changed means rebuild.
+ * Custom css is deliberately NOT part of it: it rides custom-html updates too, and applyValues writes
+ * it onto the live container — a per-frame style tick must mutate, never tear the whole HUD down.
+ */
 function structureKey(state) {
   return JSON.stringify([
     (state.elements || []).map(function (e) {
       return [e.id, e.type, e.anchor, e.label == null ? null : e.label, e.icon == null ? null : e.icon,
         e.color == null ? null : e.color, e.width == null ? null : e.width, e.showText == null ? null : e.showText,
-        e.iconSize == null ? null : e.iconSize, e.type === 'custom' ? (e.css == null ? null : e.css) : null];
+        e.iconSize == null ? null : e.iconSize];
     }),
     state.health ? 'health' : null,
   ]);
 }
+/**
+ * setTheme, not applyThemeGlobals: the full path also writes the theme's decorations stylesheet, the
+ * data-hud-theme attribute and re-applies per-element overrides — applyThemeGlobals alone left the
+ * first build on the default theme's decorations and every element with the wrong overrides.
+ * Synchronous, so a screenshot right after render() sees the settled theme.
+ */
+function applyRecordedTheme(state) {
+  var json = JSON.stringify(state.theme == null ? null : state.theme);
+  if (json === lastThemeJson) return;
+  if (state.theme) hud.setTheme(state.theme);
+  lastThemeJson = json;
+}
 function buildFrom(state) {
   disposeHud();
   hud = new GameHUD();
-  if (state.theme) {
-    // applyThemeGlobals is what the HUD's private ThemeManager calls; re-applying is idempotent and
-    // synchronous, so a screenshot right after render() never catches the HUD mid-theme.
-    applyThemeGlobals(state.theme, { manageFontLink: true });
-  }
+  lastThemeJson = 'null';
+  applyRecordedTheme(state);
   (state.elements || []).forEach(createElement);
-  if (state.health) hud.showHealth();
+  if (state.health) hud.showHealth(state.health.width !== undefined ? { width: state.health.width } : undefined);
   builtKey = structureKey(state);
 }
@@ -117,6 +155,128 @@ function createElement(el) {
   }
 }
+/**
+ * Mirror the recording's game-authored head stylesheets into this page. These are the selector
+ * rules custom-element markup depends on — without them the markup replays with browser-default
+ * styling. Synced by id (add/update/remove) rather than rebuilt: CSS applies live, so a sheet change
+ * never needs a HUD teardown, which is also why stylesheets stay out of structureKey.
+ */
+function applyStylesheets(state) {
+  var wanted = new Map();
+  (state.stylesheets || []).forEach(function (sheet) { wanted.set(sheet.id, sheet.css); });
+  document.head.querySelectorAll('style[data-hud-replay-sheet]').forEach(function (node) {
+    var id = node.dataset.hudReplaySheet;
+    if (!wanted.has(id)) { node.remove(); return; }
+    var css = wanted.get(id);
+    if (node.textContent !== css) node.textContent = css;
+    wanted.delete(id);
+  });
+  wanted.forEach(function (css, id) {
+    var node = document.createElement('style');
+    node.dataset.hudReplaySheet = id;
+    node.textContent = css;
+    document.head.appendChild(node);
+  });
+  enforceTransparentPageBackground();
+}
+/**
+ * Keep the page background transparent whatever the captured sheets say.
+ *
+ * A game's head stylesheet is captured whole, and real ones carry page-level rules — body { background }
+ * is ordinary game theming. Injected here it paints the page, and Playwright's omitBackground does
+ * NOT override an author background (it only clears the base canvas colour), so every overlay PNG
+ * comes out as an opaque full-frame rectangle covering the footage. Measured, not theorised.
+ *
+ * Two layers, because one is not enough: the harness's own <style> re-appended LAST wins on document
+ * order against an equal-specificity rule; the style ATTRIBUTE outranks every author rule regardless
+ * of specificity, which "html body { ... !important }" (0,0,2) and ":root { ... !important }" (0,1,0)
+ * need, since both beat the harness sheet's "html, body" (0,0,1). Deliberate inline style: the
+ * cascade offers nothing else a captured sheet cannot outrank. The background shorthand is required
+ * (background-color alone leaves a captured background-image painting), and both the root element and
+ * body need it: a :root background propagates to the canvas when body is transparent.
+ */
+function enforceTransparentPageBackground() {
+  var override = document.getElementById('hud-replay-transparent');
+  if (override && override !== document.head.lastElementChild) document.head.appendChild(override);
+  [document.documentElement, document.body].forEach(function (el) {
+    el.style.setProperty('background', 'transparent', 'important');
+    el.style.setProperty('background-image', 'none', 'important');
+  });
+}
+/**
+ * Freeze every animation at a deterministic phase.
+ *
+ * The CSS kill rule in <head> only reaches normal declarations; a game rule that is itself
+ * !important ("#hud-custom-gauge .needle { animation: spin 2s linear infinite !important }") keeps
+ * running and screenshots would catch whatever phase wall-clock happened to be at.
+ *
+ * Phase is time since the animation STARTED, which the harness does not know — so it uses the
+ * keyframe at which it first saw the animation as the start (the op that inserted the markup lands
+ * at most one keyframe earlier), on the SOURCE clock so a speed ramp keeps footage and motion in
+ * lockstep. Animations already present at a clip's first keyframe get absolute source time instead:
+ * they began before the clip, and for a loop that is the phase the player saw. The first-seen map
+ * is reset per clip because keyframes are rasterized in EDL order, not source order. No paint flush
+ * is needed: page.screenshot() forces a commit.
+ */
+var animationStarts = new Map();
+/** The clip the previous render() belonged to; a change resets the first-seen map above. */
+var lastClipIndex = null;
+function animationKey(animation) {
+  var target = animation.effect ? animation.effect.target : null;
+  var container = target && target.closest ? target.closest('.hud-element') : null;
+  // Index path from the container to the target: several nodes in one container can run the same
+  // animation name at different times (a stack of "+100" popups).
+  var path = [];
+  var node = target;
+  while (node && node !== container && node.parentNode) {
+    path.unshift(Array.prototype.indexOf.call(node.parentNode.childNodes, node));
+    node = node.parentNode;
+  }
+  return (container ? container.id : '') + '|' + path.join('.') + '|' + animation.animationName;
+}
+function freezeMotion(frameTimeMs, clipStart) {
+  document.getAnimations().forEach(function (animation) {
+    if (typeof CSSTransition !== 'undefined' && animation instanceof CSSTransition) {
+      // A transition is a state change in flight, not a point on the replay timeline — land it on
+      // its end state. Seeding an early frameTimeMs would freeze it mid-fade instead.
+      try { animation.finish(); } catch (e) { animation.cancel(); }
+      return;
+    }
+    var key = animationKey(animation);
+    var start = animationStarts.get(key);
+    if (start === undefined) {
+      start = clipStart ? 0 : frameTimeMs;
+      animationStarts.set(key, start);
+    }
+    // pause() first: assigning currentTime to a running animation only shifts its start time.
+    // Seeking a pending animation cancels its pending task and lands it exactly.
+    animation.pause();
+    animation.currentTime = Math.max(0, frameTimeMs - start);
+  });
+}
+/**
+ * Show/hide without destroying a recorded display.
+ *
+ * Blanking display to '' looks harmless but is not: a custom element's css routinely carries
+ * "display: flex" (the docs' own example does), and clearing it drops the widget to the UA default
+ * block, so a two-column widget replays as two stacked rows. Only ever WRITE 'none', and only clear
+ * a 'none' when the state says visible — which the reducer decides from the most recent of the css
+ * snapshot's own display and the show/hide ops, in frame order (hud-state.ts), so clearing here
+ * happens exactly when the game itself cleared it.
+ */
+function applyVisibility(root, visible) {
+  if (visible === false) {
+    root.style.display = 'none';
+  } else if (root.style.display === 'none') {
+    root.style.display = '';
+  }
+}
 function setText(root, selector, value) {
   if (value === undefined || value === null) return;
   var node = root.querySelector(selector);
@@ -129,7 +289,7 @@ function applyValues(state) {
     var element = hud.getElement(el.id);
     if (!element) return;
     var root = element.container;
-    root.style.display = el.visible === false ? 'none' : '';
+    applyVisibility(root, el.visible);
     switch (el.type) {
       case 'counter':
         setText(root, '.hud-counter__value', el.text);
@@ -153,6 +313,13 @@ function applyValues(state) {
       }
       case 'custom':
         if (typeof el.html === 'string' && root.innerHTML !== el.html) root.innerHTML = el.html;
+        // The recorded container cssText (create-time, and per-update since the recorder started
+        // carrying it). cssText overwrites wholesale — including any display captured while the
+        // widget was game-hidden — so the show/hide verdict is re-asserted after: it owns visibility.
+        if (typeof el.css === 'string' && root.style.cssText !== el.css) {
+          root.style.cssText = el.css;
+          applyVisibility(root, el.visible);
+        }
         break;
       default:
         break;
@@ -160,7 +327,7 @@ function applyValues(state) {
   });
   if (state.health) {
-    hud.showHealth();
+    hud.showHealth(state.health.width !== undefined ? { width: state.health.width } : undefined);
     hud.updateHealth(state.health.current, state.health.max);
     var container = document.getElementById('hud-health-container');
     if (container) {
@@ -174,23 +341,135 @@ function applyValues(state) {
   if (hudRoot) hudRoot.style.display = state.hudVisible === false ? 'none' : '';
 }
-/** Toasts are transient and timer-managed in the engine; the replay owns visibility, so draw them plainly. */
+/**
+ * Toasts are transient and stack-managed, and the engine's own showToast arms wall-clock removal
+ * timers. The replay owns visibility, so render them as plain toast-classed nodes in fresh stacks
+ * each frame — one stack per anchor, with the same newest-top rule and per-toast theme override the
+ * engine applies (GameHUD.showToast). Recordings that predate the anchor field land on top-center.
+ */
 function applyToasts(state) {
   document.querySelectorAll('.hud-replay-toasts').forEach(function (stale) { stale.remove(); });
   var toasts = state.toasts || [];
   if (!toasts.length) return;
-  var anchorEl = document.querySelector('.hud-anchor-top-center') || document.querySelector('.hud-root');
-  if (!anchorEl) return;
-  var stack = document.createElement('div');
-  stack.className = 'hud-toast-stack hud-toast-stack--newest-top hud-replay-toasts';
+  var override = state.theme && state.theme.elements ? state.theme.elements.toast : undefined;
+  // Base colours come from the APPLIED theme, exactly as the engine's own applyElementOverride passes
+  // this.current.colors: a partial override is resolved against the full palette. Feature-detected —
+  // an engine from before this export just gets unthemed toasts, not a dead page.
+  var applied = hud.getTheme();
+  var applyOverride = typeof hudApi.applyPartialThemeProperties === 'function' ? hudApi.applyPartialThemeProperties : null;
+  var stacks = new Map();
   toasts.forEach(function (toast) {
+    var anchor = toast.anchor || 'top-center';
+    var stack = stacks.get(anchor);
+    if (!stack) {
+      var anchorEl = document.querySelector('.hud-anchor-' + anchor)
+        || document.querySelector('.hud-anchor-top-center')
+        || document.querySelector('.hud-root');
+      if (!anchorEl) return;
+      stack = document.createElement('div');
+      stack.className = (anchor.indexOf('top') === 0 ? 'hud-toast-stack hud-toast-stack--newest-top' : 'hud-toast-stack') + ' hud-replay-toasts';
+      anchorEl.appendChild(stack);
+      stacks.set(anchor, stack);
+    }
     var node = document.createElement('div');
     node.className = 'hud-element hud-toast';
     node.dataset.kind = toast.variant || 'info';
     node.textContent = toast.message;
+    if (override && applied && applyOverride) applyOverride(node, override, applied.colors);
     stack.appendChild(node);
   });
-  anchorEl.appendChild(stack);
+}
+/**
+ * Everything render() may have started loading, settled — or 1.5 s, whichever comes first. The
+ * screenshot that follows render() must not catch fallback type or a half-loaded image, but a dead
+ * URL must not stall the whole raster either, so image outcomes (success AND failure) are memoized:
+ * an unreachable image costs its timeout once, not once per keyframe.
+ */
+var settledResources = new Set();
+/** Hrefs whose wait hit the deadline — retried only when they can still help. */
+var timedOutResources = new Set();
+var SETTLE_TIMEOUT_MS = 1500;
+/** Resolves 'settled' when the work finished, 'timeout' when the deadline won. */
+function withDeadline(promise) {
+  var timer = null;
+  var deadline = new Promise(function (resolve) { timer = setTimeout(function () { resolve('timeout'); }, SETTLE_TIMEOUT_MS); });
+  return Promise.race([Promise.resolve(promise).then(function () { return 'settled'; }), deadline])
+    .finally(function () { if (timer !== null) clearTimeout(timer); });
+}
+function collectCssImageUrls() {
+  var urls = [];
+  var pattern = /url\\(\\s*(?:"([^"]*)"|'([^']*)'|([^)]*))\\s*\\)/g;
+  document.querySelectorAll('.hud-root, .hud-root *').forEach(function (node) {
+    var style = getComputedStyle(node);
+    ['background-image', 'border-image-source'].forEach(function (prop) {
+      var value = style.getPropertyValue(prop);
+      if (!value || value === 'none') return;
+      var match;
+      while ((match = pattern.exec(value)) !== null) {
+        var url = match[1] || match[2] || match[3] || '';
+        if (url && url.indexOf('data:') !== 0) urls.push(url);
+      }
+    });
+  });
+  return urls;
+}
+function settle() {
+  var waits = [];
+  // The font is keyed off the LIVE link's readiness, not a per-href memo: a deadline win means the
+  // font is slow, not absent (memoizing it would leave keyframe 0 on fallback type and every later
+  // one on the real face — a visible swap mid-trailer), and every structural rebuild disposes the
+  // HUD, which removes this link and creates a fresh one at the same href that has yet to parse.
+  // Only a genuine timeout is remembered, so a truly dead font costs 1.5 s once, not per keyframe.
+  var fontLink = document.getElementById('hud-active-font');
+  if (fontLink && !fontLink.sheet && !timedOutResources.has(fontLink.href)) {
+    var href = fontLink.href;
+    waits.push(withDeadline(new Promise(function (resolve) {
+      fontLink.addEventListener('load', resolve, { once: true });
+      fontLink.addEventListener('error', resolve, { once: true });
+    }).then(function () { return document.fonts.ready; })).then(function (outcome) {
+      if (outcome === 'timeout') timedOutResources.add(href);
+    }));
+  }
+  document.querySelectorAll('.hud-root img').forEach(function (img) {
+    var src = img.currentSrc || img.src;
+    if (!src || src.indexOf('data:') === 0 || settledResources.has(src)) return;
+    waits.push(withDeadline(img.decode().catch(function () {})).then(function () { settledResources.add(src); }));
+  });
+  collectCssImageUrls().forEach(function (url) {
+    if (settledResources.has(url)) return;
+    waits.push(withDeadline(new Promise(function (resolve) {
+      var probe = new Image();
+      probe.onload = resolve;
+      probe.onerror = resolve;
+      probe.src = url;
+    })).then(function () { settledResources.add(url); }));
+  });
+  // Fonts the injected game sheets bring in (@font-face, @import) load lazily once text using them
+  // is styled — the computed-style walk above just forced that — and only document.fonts.ready
+  // knows about them. Free when nothing is loading. A face that never arrives is remembered by
+  // family after one deadline, or every keyframe would pay the full timeout for it.
+  var unresolved = [];
+  document.fonts.forEach(function (face) {
+    if (face.status === 'loading' && !timedOutResources.has('font-family:' + face.family)) unresolved.push(face.family);
+  });
+  if (unresolved.length || document.fonts.status === 'loading') {
+    waits.push(withDeadline(document.fonts.ready).then(function (outcome) {
+      if (outcome !== 'timeout') return;
+      document.fonts.forEach(function (face) {
+        if (face.status === 'loading') timedOutResources.add('font-family:' + face.family);
+      });
+    }));
+  }
+  return waits.length ? Promise.all(waits).then(function () { return true; }) : Promise.resolve(true);
 }
 window.__hudReplay = {
@@ -198,18 +477,34 @@ window.__hudReplay = {
     document.body.style.width = width + 'px';
     document.body.style.height = height + 'px';
   },
-  render: function (state) {
+  render: function (state, frameTimeMs, clipIndex) {
+    var clipStart = clipIndex !== lastClipIndex;
+    if (clipStart) {
+      lastClipIndex = clipIndex;
+      animationStarts.clear();
+    }
     var key = structureKey(state);
-    if (!hud || key !== builtKey) buildFrom(state);
+    if (!hud || key !== builtKey) {
+      buildFrom(state);
+    } else {
+      // A theme change without a structure change (mid-recording setTheme) must not force a
+      // rebuild — setTheme re-applies the overrides on the live elements itself.
+      applyRecordedTheme(state);
+    }
+    applyStylesheets(state);
     applyValues(state);
     applyToasts(state);
+    // Last: every step above can create elements, and a replaced element brings a fresh running animation.
+    freezeMotion(typeof frameTimeMs === 'number' ? frameTimeMs : 0, clipStart);
     return true;
   },
+  settle: settle,
 };
 // Build an empty HUD up front so the first render() has styles injected and the anchor grid in place.
 hud = new GameHUD();
 builtKey = structureKey({ elements: [] });
+enforceTransparentPageBackground();
 window.__hudReplayReady = true;
 </script>
 </body>

package/dist/editor/hud-replay-page.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hud-replay-page.js","sourceRoot":"","sources":["../../src/editor/hud-replay-page.ts"],"names":[],"mappings":"AAAA~~;;;;;;;;;;;;;;;;;;;;;GAqBG~~;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO1D,oGAAoG;AACpG,MAAM,UAAU,kBAAkB,CAAC,QAAgB;IACjD,MAAM,MAAM,GAAG,oBAAoB,QAAQ,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAC9B,MAAM,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,OAA6B;IAC/D,MAAM,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,OAAO~~;;;;;;;;;;;;;;;;EAgBP~~,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKrC~~,CAAC;AACF,CAAC"}
1	+ {"version":3,"file":"hud-replay-page.js","sourceRoot":"","sources":["../../src/editor/hud-replay-page.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO1D,oGAAoG;AACpG,MAAM,UAAU,kBAAkB,CAAC,QAAgB;IACjD,MAAM,MAAM,GAAG,oBAAoB,QAAQ,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAC9B,MAAM,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,OAA6B;IAC/D,MAAM,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,OAAO;;;;;;+BAMsB,OAAO,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;EAmB7C,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2brC,CAAC;AACF,CAAC"}

package/dist/editor/shell-page.js CHANGED Viewed

@@ -1374,6 +1374,7 @@ ${ASSET_DETAIL_HTML}
     image: '🖼', skybox: '🖼',
     glb: '🧊', gltf: '🧊', 'polygon-mesh': '🧊', vxl: '🧊', voxels: '🧊',
     animation: '🏃', 'animation-video': '🎥', audio: '🔊', sound: '🔊', 'sound-effect': '🔊', music: '🎵',
+    video: '🎬',
     vwld: '🗺', spz: '✨'
   };
@@ -1614,6 +1615,21 @@ ${ASSET_DETAIL_HTML}
   var MAX_VXL_PREVIEW_BYTES = 8 * 1024 * 1024;
+  /**
+   * Which of a clip's two renditions to play.
+   *
+   * The forger stores every clip twice, and the VP9 sibling is the one worth fetching where the
+   * browser takes it: same picture, ~6x smaller (757 KB against 4.5 MB on a measured 5 s 720p
+   * clip), and bitmagic dev drives Chrome, which decodes VP9 natively. canPlayType only
+   * promises the codec, never the file, so every caller keeps the mp4 as the fallback.
+   */
+  function videoSourceFor(asset) {
+    var mp4 = typeof asset.url === 'string' ? asset.url : '';
+    var webm = typeof asset.webmUrl === 'string' ? asset.webmUrl : '';
+    if (webm === '') return mp4;
+    return document.createElement('video').canPlayType('video/webm; codecs="vp9"') ? webm : mp4;
+  }
   /** The mesh route: the asset itself, or the GLB a voxelized one was baked from. */
   function glbJobFor(asset) {
     var glb = asset.sourceGlbUrl || asset.url;
@@ -1634,6 +1650,18 @@ ${ASSET_DETAIL_HTML}
     return { kind: 'vxl', url: url };
   }
+  /**
+   * The clip route. Unlike its two neighbours this one is NOT drawn by the engine — see
+   * grabVideoPoster. It is listed as a job anyway so a video row goes through the same queue,
+   * the same disk cache and the same hasPreview path every other tile already uses.
+   */
+  function videoJobFor(asset) {
+    if (String(asset.type || '').toLowerCase() !== 'video') return null;
+    var url = videoSourceFor(asset);
+    if (typeof url !== 'string' || !/\\.(mp4|webm)(\\?|$)/i.test(url)) return null;
+    return { kind: 'video', url: url };
+  }
   /**
    * How the engine should draw this asset's thumbnail, or null when there is nothing to draw.
    *
@@ -1652,7 +1680,7 @@ ${ASSET_DETAIL_HTML}
    * answer for something with no appearance.
    */
   function previewJobFor(asset) {
-    return glbJobFor(asset) || vxlJobFor(asset);
+    return glbJobFor(asset) || vxlJobFor(asset) || videoJobFor(asset);
   }
   function assetRow(asset, isFresh, hasPreview) {
@@ -1812,6 +1840,61 @@ ${ASSET_DETAIL_HTML}
     return await_('VOXEL_PREVIEW_RESPONSE', 15000);
   }
+  /** A poster is a thumbnail, not a frame grab for keeps: 256px on the long edge. */
+  var POSTER_MAX_EDGE = 256;
+  /**
+   * A clip's poster, drawn HERE rather than by the engine — a video is not a mesh, and this page
+   * can already decode one. Answers in the same shape the two engine renderers do, so the queue
+   * below does not care which drew it.
+   *
+   * The canvas does not taint: the asset host serves 'access-control-allow-origin: *' (checked
+   * against a stored clip), which is what 'crossOrigin' here asks it to honour. Without that
+   * attribute the draw would succeed and toDataURL would throw.
+   *
+   * Seeks a tenth of the way in rather than taking frame zero — a generated clip often opens on a
+   * fade from black, and a black tile is the thing this whole preview cache exists to avoid.
+   */
+  function grabVideoPoster(url, requestId) {
+    return new Promise(function (resolve) {
+      var probe = document.createElement('video');
+      var settled = false;
+      var timer = null;
+      function finish(previewBase64) {
+        if (settled) return;
+        settled = true;
+        if (timer) clearTimeout(timer);
+        probe.removeAttribute('src');
+        resolve({ requestId: requestId, success: previewBase64 !== '', previewBase64: previewBase64 });
+      }
+      timer = setTimeout(function () { finish(''); }, 15000);
+      probe.crossOrigin = 'anonymous';
+      probe.muted = true;
+      probe.preload = 'auto';
+      probe.addEventListener('error', function () { finish(''); });
+      probe.addEventListener('loadeddata', function () {
+        probe.currentTime = Math.min(1, (probe.duration || 1) * 0.1);
+      });
+      probe.addEventListener('seeked', function () {
+        try {
+          var width = probe.videoWidth;
+          var height = probe.videoHeight;
+          if (!width || !height) { finish(''); return; }
+          var scale = Math.min(1, POSTER_MAX_EDGE / Math.max(width, height));
+          var canvas = document.createElement('canvas');
+          canvas.width = Math.max(1, Math.round(width * scale));
+          canvas.height = Math.max(1, Math.round(height * scale));
+          canvas.getContext('2d').drawImage(probe, 0, 0, canvas.width, canvas.height);
+          finish(canvas.toDataURL('image/png'));
+        } catch (error) {
+          // A tainted canvas or a codec the browser will not decode. Neither is worth a retry.
+          finish('');
+        }
+      });
+      probe.src = url;
+    });
+  }
   async function drainPreviewQueue() {
     if (previewRunning) return;
     previewRunning = true;
@@ -1819,17 +1902,21 @@ ${ASSET_DETAIL_HTML}
     try {
       while (previewQueue.length > 0) {
         // The engine can only draw once it exists. Anything queued before then waits for the next
-        // pass rather than being dropped — refreshAssets re-queues on every render.
-        if (!loaded) return;
+        // pass rather than being dropped — refreshAssets re-queues on every render. A clip's
+        // poster is drawn in this page, so it is the one kind that does not wait.
+        var next = previewJobFor(previewQueue[0]);
+        if (!loaded && next !== null && next.kind !== 'video') return;
         var asset = previewQueue.shift();
-        var job = previewJobFor(asset);
+        var job = next;
         if (job === null) continue;
         previewRequestId += 1;
         var requestId = 'preview-' + previewRequestId;
-        var response = job.kind === 'vxl'
-          ? await requestVoxelPreview(job.url, requestId)
-          : await requestGlbPreview(job.url, requestId);
+        var response = job.kind === 'video'
+          ? await grabVideoPoster(job.url, requestId)
+          : job.kind === 'vxl'
+            ? await requestVoxelPreview(job.url, requestId)
+            : await requestGlbPreview(job.url, requestId);
         // The requestId is verified rather than assumed: a late answer from a request that already
         // timed out would otherwise be cached under the NEXT asset's id, which is a wrong picture
@@ -1896,6 +1983,7 @@ ${ASSET_DETAIL_HTML}
   var assetFrame = document.getElementById('asset-frame');
   var assetImage = document.getElementById('asset-image');
   var assetAudio = document.getElementById('asset-audio');
+  var assetVideo = document.getElementById('asset-video');
   var assetNote = document.getElementById('asset-note');
   var assetFacts = document.getElementById('asset-facts');
   var assetResetButton = document.getElementById('asset-reset');
@@ -1907,6 +1995,9 @@ ${ASSET_DETAIL_HTML}
   var IMAGE_TYPES = { image: true, skybox: true };
   var AUDIO_TYPES = { audio: true, sound: true, 'sound-effect': true };
+  // Only one member today, but the same shape as its neighbours — and the same '=== true'
+  // read, so a type of 'constructor' cannot find Object.prototype's own property and pass.
+  var VIDEO_TYPES = { video: true };
   /**
    * What the VIEWER should load — which is not always what the thumbnail drew.
@@ -1952,6 +2043,10 @@ ${ASSET_DETAIL_HTML}
     assetFacts.textContent = '';
     fact('Size', formatSize(asset.size));
+    fact('Length', typeof asset.durationSeconds === 'number' && asset.durationSeconds > 0
+      ? asset.durationSeconds.toFixed(1) + 's' : '');
+    fact('Frame', typeof asset.width === 'number' && typeof asset.height === 'number'
+      ? asset.width + ' × ' + asset.height : '');
     fact('Extent', dimensionsOf(asset));
     fact('Voxels', typeof asset.voxelCount === 'number' ? String(asset.voxelCount) : '');
     fact('Id', asset.id || '');
@@ -1975,6 +2070,16 @@ ${ASSET_DETAIL_HTML}
     } else if (AUDIO_TYPES[type] === true && direct) {
       assetAudio.src = direct;
       assetAudio.classList.remove('hidden');
+    } else if (VIDEO_TYPES[type] === true && direct) {
+      // A clip is already the thing, like an image — no renderer, no iframe. The mp4 is wired to
+      // the error event rather than left to chance: canPlayType answers for the codec, and a
+      // WebM that fails for any other reason would otherwise be a black rectangle with no sound.
+      assetVideo.onerror = function () {
+        if (assetVideo.getAttribute('src') === direct) return;
+        assetVideo.src = direct;
+      };
+      assetVideo.src = videoSourceFor(asset);
+      assetVideo.classList.remove('hidden');
     } else if (type === 'animation' && direct) {
       // The clip plays on the engine's own block character — /animation-preview imports the
       // project's debug/AnimationPreview.js, the module behind the Creator's clip preview.
@@ -2041,6 +2146,11 @@ ${ASSET_DETAIL_HTML}
     assetImage.removeAttribute('src');
     assetAudio.pause();
     assetAudio.removeAttribute('src');
+    // Same reason the iframe goes to about:blank: a dialog nobody is looking at must not keep
+    // decoding video next to the game that wants the GPU.
+    assetVideo.pause();
+    assetVideo.onerror = null;
+    assetVideo.removeAttribute('src');
     if (assetPausedByOverlay) {
       post('SET_PAUSE', { paused: false });
       assetPausedByOverlay = false;