egaki 0.8.0 → 0.9.0

package/dist/vite/tweakpane-hook.js

@@ -18,6 +18,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Tweakpane is pure DOM (no React dependency), so there are no dual-React
  * or SSR issues. During SSR (typeof window === 'undefined') the hook
  * returns the raw default values and skips all DOM work.
+ *
+ * Live props vs user overrides: each param follows the LIVE schema value
+ * passed on every render (so animated props like translateX={interpolate(...)}
+ * work) until the user touches that control in the pane. Once touched, the
+ * user's value wins for that key until the component remounts. Untouched
+ * controls are refreshed in the pane every render so animated values are
+ * visible while playing. Programmatic refreshes are guarded so tweakpane's
+ * change events (which fire on refresh() too) don't mark keys as touched.
  */
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore, createContext, useContext } from 'react';
 import { LayoutContainerContext, useIsPremounting } from "./mdx-video.js";
@@ -59,6 +67,22 @@ function cloneValue(value) {
         return { ...value };
     return value;
 }
+/** Deep-equal for param values: primitives, small arrays (bezier tuples),
+ *  and flat objects (range {min, max}). */
+function valuesEqual(a, b) {
+    if (a === b)
+        return true;
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((x, i) => x === b[i]);
+    }
+    if (typeof a === 'object' && a !== null && typeof b === 'object' && b !== null) {
+        const ra = a;
+        const rb = b;
+        const ka = Object.keys(ra);
+        return ka.length === Object.keys(rb).length && ka.every((k) => ra[k] === rb[k]);
+    }
+    return false;
+}
 function resolveDefault(v) {
     if (isCubicBezierParam(v))
         return [...v.value];
@@ -178,7 +202,10 @@ function serializeTweakpanePrompt(ctx) {
         const changed = [];
         for (const [key, current] of Object.entries(entry.params)) {
             const def = entry.defaults[key];
-            if (current !== def) {
+            // Only user-touched keys count as changed. Untouched keys mirror live
+            // (possibly animated) props, so comparing them to mount-time defaults
+            // would produce false positives on every playing frame.
+            if (entry.touched.has(key) && !valuesEqual(current, def)) {
                 changed.push(`  ${key}: ${formatValue(current)}`);
             }
         }
@@ -261,6 +288,12 @@ function CopyChangesButton() {
  * Returns a reactive object with current values. Updating a control in the
  * pane immediately triggers a React re-render with fresh values.
  *
+ * Values follow live props: each key returns the schema value from the
+ * CURRENT render until the user touches that control in the pane, so
+ * animated props (e.g. `translateX={interpolate(frame, ...)}`) flow through
+ * every frame. Once touched, the user's pane value wins for that key until
+ * the component remounts.
+ *
  * On unmount the folder is disposed and removed from the pane.
  */
 export function useTweakpane(label, schema) {
@@ -283,6 +316,21 @@ export function useTweakpane(label, schema) {
     // Track the schema for updates
     const schemaRef = useRef(schema);
     schemaRef.current = schema;
+    // Keys the user changed via the pane UI. Untouched keys follow the live
+    // schema value on every render (so animated props work); touched keys keep
+    // the user's pane value until remount.
+    const touchedRef = useRef(new Set());
+    // Latest user override values, mirrored from state so the mount effect can
+    // seed rebuilt folders without re-running on every pane change.
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    // Live handles to the mounted folder + bound params, used by the per-render
+    // sync effect below to push animated prop values into the pane.
+    const liveRef = useRef(null);
+    // True while we call folder.refresh() programmatically. tweakpane emits
+    // change events on refresh() too, so handlers must ignore those or every
+    // animated frame would mark keys as user-touched.
+    const refreshingRef = useRef(false);
     // Stable ID for this hook instance
     const idRef = useRef(`${label}-${Math.random().toString(36).slice(2, 8)}`);
     useEffect(() => {
@@ -299,7 +347,10 @@ export function useTweakpane(label, schema) {
             const def = resolveDefault(param);
             // Clone object/array values so tweakpane's in-place mutations on params
             // don't corrupt the defaults (used by "Copy changes" diffing).
-            params[key] = cloneValue(def);
+            // Touched keys keep the user's override when the folder is rebuilt
+            // (e.g. premount → active transition re-runs this effect).
+            const touched = touchedRef.current.has(key);
+            params[key] = cloneValue(touched ? valuesRef.current[key] : def);
             defaults[key] = cloneValue(def);
         }
         let folder = null;
@@ -320,6 +371,8 @@ export function useTweakpane(label, schema) {
                         picker: 'inline',
                     });
                     blade.on('change', (ev) => {
+                        if (refreshingRef.current)
+                            return;
                         const val = ev.value;
                         const tuple = [
                             Math.round(val.x1 * 1000) / 1000,
@@ -328,6 +381,7 @@ export function useTweakpane(label, schema) {
                             Math.round(val.y2 * 1000) / 1000,
                         ];
                         params[key] = tuple;
+                        touchedRef.current.add(key);
                         setValues((prev) => ({ ...prev, [key]: tuple }));
                     });
                     continue;
@@ -339,7 +393,10 @@ export function useTweakpane(label, schema) {
                         max: param.max,
                         step: param.step,
                     }).on('change', (ev) => {
+                        if (refreshingRef.current)
+                            return;
                         const val = ev.value;
+                        touchedRef.current.add(key);
                         setValues((prev) => ({ ...prev, [key]: { min: val.min, max: val.max } }));
                     });
                     continue;
@@ -384,15 +441,20 @@ export function useTweakpane(label, schema) {
                     }
                 }
                 folder.addBinding(params, key, opts).on('change', (ev) => {
+                    if (refreshingRef.current)
+                        return;
+                    touchedRef.current.add(key);
                     setValues((prev) => ({ ...prev, [key]: ev.value }));
                 });
             }
+            liveRef.current = { folder, params };
             // Register for copy prompt
-            activeFolders.set(id, { label, params, defaults });
+            activeFolders.set(id, { label, params, defaults, touched: touchedRef.current });
             notifyFolderListeners();
         })();
         return () => {
             disposed = true;
+            liveRef.current = null;
             if (folder) {
                 folder.dispose();
                 folder = null;
@@ -405,7 +467,42 @@ export function useTweakpane(label, schema) {
             }
         };
     }, [label, skip]);
-    return values;
+    // Push live (possibly animated) prop values into the pane for untouched
+    // keys. Runs after every render — during playback the component re-renders
+    // each frame, so animated values are visible moving in the pane UI.
+    // folder.refresh() emits change events; refreshingRef makes handlers
+    // ignore them so refreshes never mark keys as touched.
+    useEffect(() => {
+        const live = liveRef.current;
+        if (!live)
+            return;
+        let dirty = false;
+        for (const [key, param] of Object.entries(schemaRef.current)) {
+            if (touchedRef.current.has(key))
+                continue;
+            // Bezier blades are not bindings — refresh() won't read params for
+            // them. The returned value still follows live props below.
+            if (isCubicBezierParam(param))
+                continue;
+            const liveVal = resolveDefault(param);
+            if (!valuesEqual(live.params[key], liveVal)) {
+                live.params[key] = cloneValue(liveVal);
+                dirty = true;
+            }
+        }
+        if (dirty) {
+            refreshingRef.current = true;
+            live.folder.refresh();
+            refreshingRef.current = false;
+        }
+    });
+    // Merge: user-touched keys return the pane value, untouched keys follow
+    // the live schema value so animated props work without any extra wiring.
+    const merged = {};
+    for (const [key, param] of Object.entries(schema)) {
+        merged[key] = touchedRef.current.has(key) ? values[key] : resolveDefault(param);
+    }
+    return merged;
 }
 // ---------------------------------------------------------------------------
 // TweakpaneRoot — sidebar container for the tweakpane pane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "egaki",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "description": "AI image, video, and speech generation CLI with MDX-to-video framework",
   "main": "./dist/cli/main.js",
@@ -88,9 +88,9 @@
     "@ai-sdk/xai": "^3.0.92",
     "@clack/prompts": "^1.0.1",
     "@fal-ai/client": "^1.10.1",
-    "@remotion/media": "4.0.475",
-    "@remotion/player": "4.0.475",
-    "@remotion/web-renderer": "4.0.475",
+    "@remotion/media": "4.0.494",
+    "@remotion/player": "4.0.494",
+    "@remotion/web-renderer": "4.0.494",
     "@tailwindcss/vite": "^4.2.2",
     "@tweakpane/core": "^2.0.5",
     "@tweakpane/plugin-essentials": "^0.2.1",
@@ -98,12 +98,12 @@
     "eventsource-parser": "^3.0.6",
     "goke": "^6.12.1",
     "js-yaml": "^4.1.1",
-    "mediabunny": "^1.46.0",
+    "mediabunny": "^1.50.8",
     "moveable": "^0.53.0",
     "picocolors": "^1.1.1",
     "react": "19.2.7",
     "react-dom": "19.2.7",
-    "remotion": "4.0.475",
+    "remotion": "4.0.494",
     "safe-mdx": "^1.11.3",
     "shiki": "^4.2.0",
     "string-dedent": "^3.0.2",