npm - mulmocast - Versions diffs - 2.4.9 → 2.5.0 - Mend

mulmocast 2.4.9 → 2.5.0

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 (19) hide show

package/assets/html/js/animation_runtime.js +371 -0
package/assets/html/js/auto_render.js +64 -0
package/assets/html/js/data_attribute_registration.js +178 -0
package/assets/html/tailwind_animated.html +37 -290
package/lib/actions/image_references.js +1 -1
package/lib/types/schema.d.ts +36 -0
package/lib/types/schema.js +1 -0
package/lib/utils/context.d.ts +12 -0
package/lib/utils/file.d.ts +1 -0
package/lib/utils/file.js +4 -0
package/lib/utils/image_plugins/html_tailwind.js +4 -1
package/package.json +7 -6
package/scripts/test/images/qa_landscape.jpg +0 -0
package/scripts/test/images/qa_portrait.png +0 -0
package/scripts/test/test_animated.json +592 -0
package/scripts/test/test_data_animation.json +149 -0
package/scripts/test/test_html_cover_pan_zoom_landscape_canvas.json +245 -0
package/scripts/test/test_html_cover_pan_zoom_portrait_canvas.json +207 -0
package/scripts/test/test_reference_canvas_size.json +83 -0

package/assets/html/tailwind_animated.html CHANGED Viewed

@@ -1,293 +1,40 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="h-full">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    /* Disable all CSS animations/transitions for deterministic frame-based rendering */
-    *, *::before, *::after {
-      animation-play-state: paused !important;
-      transition: none !important;
-    }
-    ${custom_style}
-  </style>
-</head>
-<body class="bg-white text-gray-800 h-full flex flex-col">
-  ${html_body}
-  <script>
-    // === MulmoCast Animation Helpers ===
-    /**
-     * Easing functions for non-linear interpolation.
-     */
-    const Easing = {
-      linear: (t) => t,
-      easeIn: (t) => t * t,
-      easeOut: (t) => 1 - (1 - t) * (1 - t),
-      easeInOut: (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
-    };
-    /**
-     * Interpolation with clamping and optional easing.
-     *
-     * @param {number} value - Current value (typically frame number)
-     * @param {Object} opts - { input: { inMin, inMax }, output: { outMin, outMax }, easing?: string | function }
-     * @returns {number} Interpolated and clamped value
-     *
-     * @example
-     *   interpolate(frame, { input: { inMin: 0, inMax: 30 }, output: { outMin: 0, outMax: 1 } })
-     *   interpolate(frame, { input: { inMin: 0, inMax: 30 }, output: { outMin: 0, outMax: 1 }, easing: 'easeOut' })
-     */
-    function interpolate(value, opts) {
-      const { inMin, inMax } = opts.input;
-      const { outMin, outMax } = opts.output;
-      if (inMax === inMin) {
-        return outMin;
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      /* Disable all CSS animations/transitions for deterministic frame-based rendering */
+      *, *::before, *::after {
+        animation-play-state: paused !important;
+        transition: none !important;
       }
-      const easing = !opts.easing ? Easing.linear
-        : typeof opts.easing === 'function' ? opts.easing
-        : Easing[opts.easing] || Easing.linear;
-      const progress = Math.max(0, Math.min(1, (value - inMin) / (inMax - inMin)));
-      return outMin + easing(progress) * (outMax - outMin);
-    }
-    // === MulmoAnimation Helper Class ===
-    const TRANSFORM_PROPS = { translateX: 'px', translateY: 'px', scale: '', rotate: 'deg', rotateX: 'deg', rotateY: 'deg', rotateZ: 'deg' };
-    const SVG_PROPS = ['r', 'cx', 'cy', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'rx', 'ry',
-                       'width', 'height', 'stroke-width', 'stroke-dashoffset', 'stroke-dasharray', 'opacity'];
-    function MulmoAnimation() {
-      this._entries = [];
-    }
-    /**
-     * Register a property animation on a single element.
-     * @param {string} selector - CSS selector (e.g. '#title')
-     * @param {Object} props - { opacity: [0, 1], translateY: [30, 0], width: [0, 80, '%'] }
-     * @param {Object} opts - { start, end, easing }  (start/end in seconds)
-     */
-    MulmoAnimation.prototype.animate = function(selector, props, opts) {
-      this._entries.push({ kind: 'animate', selector, props, opts: opts || {} });
-      return this;
-    };
-    /**
-     * Stagger animation across numbered elements.
-     * Selector must contain {i} placeholder (e.g. '#item{i}').
-     * @param {string} selector - e.g. '#item{i}'
-     * @param {number} count - number of elements (0-indexed)
-     * @param {Object} props - same as animate()
-     * @param {Object} opts - { start, stagger, duration, easing }
-     */
-    MulmoAnimation.prototype.stagger = function(selector, count, props, opts) {
-      this._entries.push({ kind: 'stagger', selector, count, props, opts: opts || {} });
-      return this;
-    };
-    /**
-     * Typewriter effect — reveal text character by character.
-     * @param {string} selector - target element selector
-     * @param {string} text - full text to reveal
-     * @param {Object} opts - { start, end }
-     */
-    MulmoAnimation.prototype.typewriter = function(selector, text, opts) {
-      this._entries.push({ kind: 'typewriter', selector, text, opts: opts || {} });
-      return this;
-    };
-    /**
-     * Animated counter — interpolate a number and display with optional prefix/suffix.
-     * @param {string} selector - target element selector
-     * @param {[number, number]} range - [from, to]
-     * @param {Object} opts - { start, end, prefix, suffix, decimals }
-     */
-    MulmoAnimation.prototype.counter = function(selector, range, opts) {
-      this._entries.push({ kind: 'counter', selector, range, opts: opts || {} });
-      return this;
-    };
-    /**
-     * Code reveal — show lines of code one by one (line-level typewriter).
-     * @param {string} selector - target element selector
-     * @param {string[]} lines - array of code lines
-     * @param {Object} opts - { start, end }
-     */
-    MulmoAnimation.prototype.codeReveal = function(selector, lines, opts) {
-      this._entries.push({ kind: 'codeReveal', selector, lines, opts: opts || {} });
-      return this;
-    };
-    /**
-     * Blink — periodic show/hide toggle (e.g. cursor blinking).
-     * @param {string} selector - target element selector
-     * @param {Object} opts - { interval } (half-cycle seconds, default 0.5)
-     */
-    MulmoAnimation.prototype.blink = function(selector, opts) {
-      this._entries.push({ kind: 'blink', selector, opts: opts || {} });
-      return this;
-    };
-    /** Resolve easing name string or function to an easing function */
-    MulmoAnimation.prototype._resolveEasing = function(e) {
-      if (!e) return Easing.linear;
-      if (typeof e === 'function') return e;
-      return Easing[e] || Easing.linear;
-    };
-    /** Apply props to element at a given progress (0-1) with easing */
-    MulmoAnimation.prototype._applyProps = function(el, props, progress, easingFn) {
-      if (!el) return;
-      const transforms = [];
-      Object.keys(props).forEach((prop) => {
-        const spec = props[prop];
-        const from = spec[0], to = spec[1];
-        const unit = (spec.length > 2) ? spec[2] : null;
-        const val = from + easingFn(progress) * (to - from);
-        if (TRANSFORM_PROPS.hasOwnProperty(prop)) {
-          const tUnit = unit || TRANSFORM_PROPS[prop];
-          transforms.push(prop === 'scale' ? 'scale(' + val + ')' : prop + '(' + val + tUnit + ')');
-        } else if (el instanceof SVGElement && SVG_PROPS.indexOf(prop) !== -1) {
-          el.setAttribute(prop, val);
-        } else if (prop === 'opacity') {
-          el.style.opacity = val;
-        } else {
-          const cssUnit = unit || 'px';
-          el.style[prop] = val + cssUnit;
-        }
-      });
-      if (transforms.length > 0) {
-        el.style.transform = transforms.join(' ');
-      }
-    };
-    /**
-     * Update all registered animations for the given frame.
-     * @param {number} frame - current frame number
-     * @param {number} fps - frames per second
-     */
-    MulmoAnimation.prototype.update = function(frame, fps) {
-      this._entries.forEach((entry) => {
-        const opts = entry.opts;
-        const easingFn = this._resolveEasing(opts.easing);
-        if (entry.kind === 'animate') {
-          const startFrame = (opts.start || 0) * fps;
-          const endFrame = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
-          const progress = Math.max(0, Math.min(1, endFrame === startFrame ? 1 : (frame - startFrame) / (endFrame - startFrame)));
-          const el = document.querySelector(entry.selector);
-          this._applyProps(el, entry.props, progress, easingFn);
-        } else if (entry.kind === 'stagger') {
-          const baseStart = (opts.start || 0) * fps;
-          const staggerDelay = (opts.stagger || 0.2) * fps;
-          const dur = (opts.duration || 0.5) * fps;
-          for (let j = 0; j < entry.count; j++) {
-            const sel = entry.selector.replace(/\{i\}/g, j);
-            const sEl = document.querySelector(sel);
-            const sStart = baseStart + j * staggerDelay;
-            const sEnd = sStart + dur;
-            const sProgress = Math.max(0, Math.min(1, sEnd === sStart ? 1 : (frame - sStart) / (sEnd - sStart)));
-            this._applyProps(sEl, entry.props, sProgress, easingFn);
-          }
-        } else if (entry.kind === 'typewriter') {
-          const twStart = (opts.start || 0) * fps;
-          const twEnd = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
-          const twProgress = Math.max(0, Math.min(1, twEnd === twStart ? 1 : (frame - twStart) / (twEnd - twStart)));
-          const charCount = Math.floor(twProgress * entry.text.length);
-          const twEl = document.querySelector(entry.selector);
-          if (twEl) twEl.textContent = entry.text.substring(0, charCount);
-        } else if (entry.kind === 'counter') {
-          const cStart = (opts.start || 0) * fps;
-          const cEnd = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
-          const cProgress = Math.max(0, Math.min(1, cEnd === cStart ? 1 : (frame - cStart) / (cEnd - cStart)));
-          const cVal = entry.range[0] + easingFn(cProgress) * (entry.range[1] - entry.range[0]);
-          const decimals = opts.decimals || 0;
-          const display = (opts.prefix || '') + cVal.toFixed(decimals) + (opts.suffix || '');
-          const cEl = document.querySelector(entry.selector);
-          if (cEl) cEl.textContent = display;
-        } else if (entry.kind === 'codeReveal') {
-          const crStart = (opts.start || 0) * fps;
-          const crEnd = (opts.end === 'auto' ? window.__MULMO.totalFrames / fps : (opts.end || 0)) * fps;
-          const crProgress = Math.max(0, Math.min(1, crEnd === crStart ? 1 : (frame - crStart) / (crEnd - crStart)));
-          const lineCount = Math.floor(crProgress * entry.lines.length);
-          const crEl = document.querySelector(entry.selector);
-          if (crEl) crEl.textContent = entry.lines.slice(0, lineCount).join('\n');
-        } else if (entry.kind === 'blink') {
-          const interval_s = opts.interval || 0.5;
-          const blinkEl = document.querySelector(entry.selector);
-          if (blinkEl) {
-            const cycle = (frame / fps) / interval_s;
-            blinkEl.style.opacity = (Math.floor(cycle) % 2 === 0) ? 1 : 0;
-          }
-        }
-      });
-    };
-    // === MulmoCast Frame State (updated by Puppeteer per frame) ===
-    window.__MULMO = {
-      frame: 0,
-      totalFrames: ${totalFrames},
-      fps: ${fps},
-    };
-  </script>
-  ${user_script}
-  <script>
-    // Auto-render: if MulmoAnimation is used but render() is not defined, generate it
-    if (typeof render !== 'function' && typeof animation !== 'undefined' && animation instanceof MulmoAnimation) {
-      window.render = function(frame, totalFrames, fps) { animation.update(frame, fps); };
-    }
-    // Initial render (frame 0)
-    if (typeof render === 'function') {
-      const result = render(0, window.__MULMO.totalFrames, window.__MULMO.fps);
-      if (result && typeof result.then === 'function') {
-        result.catch(console.error);
-      }
-    }
-    /**
-     * Play animation in real-time using requestAnimationFrame.
-     * Returns a Promise that resolves when all frames have been rendered.
-     * Called by Puppeteer's page.evaluate() during screencast recording.
-     */
-    window.playAnimation = function() {
-      return new Promise(function(resolve) {
-        var mulmo = window.__MULMO;
-        var fps = mulmo.fps;
-        var totalFrames = mulmo.totalFrames;
-        var frameDuration = 1000 / fps;
-        var startTime = null;
-        function tick(timestamp) {
-          if (startTime === null) startTime = timestamp;
-          var elapsed = timestamp - startTime;
-          var frame = Math.min(Math.floor(elapsed / frameDuration), totalFrames - 1);
-          mulmo.frame = frame;
-          if (typeof render === 'function') {
-            render(frame, totalFrames, fps);
-          }
-          if (frame < totalFrames - 1) {
-            requestAnimationFrame(tick);
-          } else {
-            resolve();
-          }
-        }
-        requestAnimationFrame(tick);
-      });
-    };
-  </script>
-</body>
+      ${custom_style}
+    </style>
+  </head>
+  <body class="bg-white text-gray-800 h-full flex flex-col">
+    ${html_body}
+    <script>
+      ${animation_runtime}
+      // === MulmoCast Frame State (updated by Puppeteer per frame) ===
+      window.__MULMO = {
+        frame: 0,
+        totalFrames: ${totalFrames},
+        fps: ${fps},
+      };
+    </script>
+    ${user_script}
+    <script>
+      ${data_attribute_registration}
+    </script>
+    <script>
+      ${auto_render}
+    </script>
+  </body>
 </html>

package/lib/actions/image_references.js CHANGED Viewed

@@ -33,7 +33,7 @@ export const generateReferenceImage = async (inputs) => {
                 },
                 params: {
                     model: imageAgentInfo.imageParams.model,
-                    canvasSize: context.presentationStyle.canvasSize,
+                    canvasSize: image.canvasSize ?? context.presentationStyle.canvasSize,
                 },
             },
         },

package/lib/types/schema.d.ts CHANGED Viewed

@@ -2957,6 +2957,10 @@ export declare const mulmoAudioAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
 export declare const mulmoImagePromptMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"imagePrompt">;
     prompt: z.ZodString;
+    canvasSize: z.ZodOptional<z.ZodObject<{
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+    }, z.core.$strict>>;
 }, z.core.$strict>;
 export declare const mulmoImageParamsImagesValueSchema: z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodLiteral<"image">;
@@ -2973,6 +2977,10 @@ export declare const mulmoImageParamsImagesValueSchema: z.ZodUnion<readonly [z.Z
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"imagePrompt">;
     prompt: z.ZodString;
+    canvasSize: z.ZodOptional<z.ZodObject<{
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+    }, z.core.$strict>>;
 }, z.core.$strict>]>;
 export declare const mulmoImageParamsImagesSchema: z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodLiteral<"image">;
@@ -2989,6 +2997,10 @@ export declare const mulmoImageParamsImagesSchema: z.ZodRecord<z.ZodString, z.Zo
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"imagePrompt">;
     prompt: z.ZodString;
+    canvasSize: z.ZodOptional<z.ZodObject<{
+        width: z.ZodNumber;
+        height: z.ZodNumber;
+    }, z.core.$strict>>;
 }, z.core.$strict>]>>;
 export declare const mulmoFillOptionSchema: z.ZodObject<{
     style: z.ZodDefault<z.ZodOptional<z.ZodEnum<{
@@ -3057,6 +3069,10 @@ export declare const mulmoImageParamsSchema: z.ZodObject<{
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"imagePrompt">;
         prompt: z.ZodString;
+        canvasSize: z.ZodOptional<z.ZodObject<{
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+        }, z.core.$strict>>;
     }, z.core.$strict>]>>>;
     backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
         source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -6405,6 +6421,10 @@ export declare const mulmoPresentationStyleSchema: z.ZodObject<{
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"imagePrompt">;
             prompt: z.ZodString;
+            canvasSize: z.ZodOptional<z.ZodObject<{
+                width: z.ZodNumber;
+                height: z.ZodNumber;
+            }, z.core.$strict>>;
         }, z.core.$strict>]>>>;
         backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
             source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -6861,6 +6881,10 @@ export declare const mulmoScriptSchema: z.ZodObject<{
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"imagePrompt">;
             prompt: z.ZodString;
+            canvasSize: z.ZodOptional<z.ZodObject<{
+                width: z.ZodNumber;
+                height: z.ZodNumber;
+            }, z.core.$strict>>;
         }, z.core.$strict>]>>>;
         backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
             source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -10279,6 +10303,10 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"imagePrompt">;
                 prompt: z.ZodString;
+                canvasSize: z.ZodOptional<z.ZodObject<{
+                    width: z.ZodNumber;
+                    height: z.ZodNumber;
+                }, z.core.$strict>>;
             }, z.core.$strict>]>>>;
             backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
                 source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -13633,6 +13661,10 @@ export declare const mulmoPromptTemplateSchema: z.ZodObject<{
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"imagePrompt">;
                 prompt: z.ZodString;
+                canvasSize: z.ZodOptional<z.ZodObject<{
+                    width: z.ZodNumber;
+                    height: z.ZodNumber;
+                }, z.core.$strict>>;
             }, z.core.$strict>]>>>;
             backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
                 source: z.ZodDiscriminatedUnion<[z.ZodObject<{
@@ -14083,6 +14115,10 @@ export declare const mulmoPromptTemplateFileSchema: z.ZodObject<{
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"imagePrompt">;
                 prompt: z.ZodString;
+                canvasSize: z.ZodOptional<z.ZodObject<{
+                    width: z.ZodNumber;
+                    height: z.ZodNumber;
+                }, z.core.$strict>>;
             }, z.core.$strict>]>>>;
             backgroundImage: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
                 source: z.ZodDiscriminatedUnion<[z.ZodObject<{

package/lib/types/schema.js CHANGED Viewed

@@ -264,6 +264,7 @@ export const mulmoImagePromptMediaSchema = z
     .object({
     type: z.literal("imagePrompt"),
     prompt: z.string().min(1),
+    canvasSize: z.object({ width: z.number(), height: z.number() }).strict().optional(),
 })
     .strict();
 export const mulmoImageParamsImagesValueSchema = z.union([mulmoImageMediaSchema, mulmoImagePromptMediaSchema]);

package/lib/utils/context.d.ts CHANGED Viewed

@@ -69,6 +69,10 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
             } | {
                 type: "imagePrompt";
                 prompt: string;
+                canvasSize?: {
+                    width: number;
+                    height: number;
+                } | undefined;
             }> | undefined;
             backgroundImage?: string | {
                 source: {
@@ -2164,6 +2168,10 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                 } | {
                     type: "imagePrompt";
                     prompt: string;
+                    canvasSize?: {
+                        width: number;
+                        height: number;
+                    } | undefined;
                 }> | undefined;
                 backgroundImage?: string | {
                     source: {
@@ -4266,6 +4274,10 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
             } | {
                 type: "imagePrompt";
                 prompt: string;
+                canvasSize?: {
+                    width: number;
+                    height: number;
+                } | undefined;
             }> | undefined;
             backgroundImage?: string | {
                 source: {

package/lib/utils/file.d.ts CHANGED Viewed

@@ -49,6 +49,7 @@ export declare const blankImagePath: () => string;
 export declare const blankVerticalImagePath: () => string;
 export declare const blankSquareImagePath: () => string;
 export declare const getHTMLFile: (filename: string) => string;
+export declare const getJSFile: (filename: string) => string;
 export declare const getBaseDirPath: (basedir?: string) => string;
 export declare const getFullPath: (baseDirPath: string | undefined, file: string) => string;
 export declare const readScriptTemplateFile: (scriptTemplateFileName: string) => MulmoScript;

package/lib/utils/file.js CHANGED Viewed

@@ -158,6 +158,10 @@ export const getHTMLFile = (filename) => {
     const htmlPath = resolveAssetFile(`./assets/html/${filename}.html`, npmRoot);
     return fs.readFileSync(htmlPath, "utf-8");
 };
+export const getJSFile = (filename) => {
+    const jsPath = resolveAssetFile(`./assets/html/js/${filename}.js`, npmRoot);
+    return fs.readFileSync(jsPath, "utf-8");
+};
 // for cli
 export const getBaseDirPath = (basedir) => {
     if (!basedir) {

package/lib/utils/image_plugins/html_tailwind.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import nodePath from "node:path";
 import { MulmoBeatMethods } from "../../methods/mulmo_beat.js";
-import { getHTMLFile } from "../file.js";
+import { getHTMLFile, getJSFile } from "../file.js";
 import { renderHTMLToImage, interpolate, renderHTMLToFrames, renderHTMLToVideo } from "../html_render.js";
 import { framesToVideo } from "../ffmpeg_utils.js";
 import { parrotingImagePath } from "./utils.js";
@@ -72,6 +72,9 @@ const processHtmlTailwindAnimated = async (params) => {
     const script = "script" in beat.image ? beat.image.script : undefined;
     const rawHtmlData = interpolate(template, {
         html_body: html,
+        animation_runtime: getJSFile("animation_runtime"),
+        data_attribute_registration: getJSFile("data_attribute_registration"),
+        auto_render: getJSFile("auto_render"),
         user_script: buildUserScript(script),
         totalFrames: String(totalFrames),
         fps: String(fps),

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.4.9",
+  "version": "2.5.0",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",
@@ -24,7 +24,8 @@
     }
   },
   "resolutions": {
-    "minimatch": "^10.2.4"
+    "minimatch": "^10.2.4",
+    "yauzl": "^3.2.1"
   },
   "bin": {
     "mulmo": "lib/cli/bin.js",
@@ -56,7 +57,7 @@
     "pdf": "npx tsx ./src/cli/bin.ts pdf",
     "test": "rm -f scratchpad/test*.* && npx tsx ./src/audio.ts scripts/test/test.json && npx tsx ./src/images.ts scripts/test/test.json && npx tsx ./src/movie.ts scripts/test/test.json",
     "ci_test": "cross-env NODE_ENV=test tsx --test --experimental-test-coverage ./test/*/test_*.ts",
-    "lint": "eslint src test",
+    "lint": "eslint src test assets/html/js",
     "build": "tsc",
     "build_test": "tsc && git checkout -- lib/*",
     "cli": "npx tsx ./src/cli/bin.ts",
@@ -68,7 +69,7 @@
     "story_to_script": "npx tsx ./src/cli/bin.ts tool story_to_script",
     "whisper": "npx tsx ./src/cli/bin.ts tool whisper",
     "latest": "yarn upgrade-interactive  --latest",
-    "format": "prettier --write '{src,scripts,assets/templates,assets/styles,draft,ideason,scripts_mag2,proto,test,batch,graphai,output,docs/scripts}/**/*.{ts,json,yaml}'",
+    "format": "prettier --write '{src,scripts,assets/templates,assets/styles,assets/html/js,draft,ideason,scripts_mag2,proto,test,batch,graphai,output,docs/scripts}/**/*.{ts,js,json,yaml}'",
     "deep_research": "npx tsx ./src/tools/deep_research.ts",
     "template": "npx tsx batch/template2tsobject.ts && yarn run format",
     "mcp_server": "npx tsx ./src/mcp/server.ts",
@@ -109,9 +110,9 @@
     "graphai": "^2.0.16",
     "jsdom": "^28.1.0",
     "marked": "^17.0.4",
-    "mulmocast-vision": "^1.0.8",
+    "mulmocast-vision": "^1.0.9",
     "ora": "^9.3.0",
-    "puppeteer": "^24.39.0",
+    "puppeteer": "^24.39.1",
     "replicate": "^1.4.0",
     "yaml": "^2.8.2",
     "yargs": "^18.0.0",

package/scripts/test/images/qa_landscape.jpg ADDED Viewed

Binary file

package/scripts/test/images/qa_portrait.png ADDED Viewed

Binary file