@lalalic/markcut 1.2.0 → 2.1.0

package/src/player/bundle/player.js

@@ -416,8 +416,8 @@ var require_react_production = __commonJS({
     exports.use = function(usable) {
       return ReactSharedInternals.H.use(usable);
     };
-    exports.useActionState = function(action2, initialState, permalink) {
-      return ReactSharedInternals.H.useActionState(action2, initialState, permalink);
+    exports.useActionState = function(action, initialState, permalink) {
+      return ReactSharedInternals.H.useActionState(action, initialState, permalink);
     };
     exports.useCallback = function(callback, deps) {
       return ReactSharedInternals.H.useCallback(callback, deps);
@@ -778,7 +778,7 @@ var require_scheduler = __commonJS({
 var require_react_dom_production = __commonJS({
   "node_modules/react-dom/cjs/react-dom.production.js"(exports) {
     "use strict";
-    var React48 = require_react();
+    var React56 = require_react();
     function formatProdErrorMessage(code) {
       var url2 = "https://react.dev/errors/" + code;
       if (1 < arguments.length) {
@@ -818,7 +818,7 @@ var require_react_dom_production = __commonJS({
         implementation
       };
     }
-    var ReactSharedInternals = React48.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var ReactSharedInternals = React56.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     function getCrossOriginStringAs(as, input) {
       if ("font" === as) return "";
       if ("string" === typeof input)
@@ -913,8 +913,8 @@ var require_react_dom_production = __commonJS({
     exports.unstable_batchedUpdates = function(fn, a2) {
       return fn(a2);
     };
-    exports.useFormState = function(action2, initialState, permalink) {
-      return ReactSharedInternals.H.useFormState(action2, initialState, permalink);
+    exports.useFormState = function(action, initialState, permalink) {
+      return ReactSharedInternals.H.useFormState(action, initialState, permalink);
     };
     exports.useFormStatus = function() {
       return ReactSharedInternals.H.useHostTransitionStatus();
@@ -954,8 +954,8 @@ var require_react_dom_client_production = __commonJS({
   "node_modules/react-dom/cjs/react-dom-client.production.js"(exports) {
     "use strict";
     var Scheduler = require_scheduler();
-    var React48 = require_react();
-    var ReactDOM2 = require_react_dom();
+    var React56 = require_react();
+    var ReactDOM3 = require_react_dom();
     function formatProdErrorMessage(code) {
       var url2 = "https://react.dev/errors/" + code;
       if (1 < arguments.length) {
@@ -1145,8 +1145,8 @@ var require_react_dom_client_production = __commonJS({
       return null;
     }
     var isArrayImpl = Array.isArray;
-    var ReactSharedInternals = React48.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
-    var ReactDOMSharedInternals = ReactDOM2.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var ReactSharedInternals = React56.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var ReactDOMSharedInternals = ReactDOM3.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
     var sharedNotPendingObject = {
       pending: false,
       data: null,
@@ -4323,8 +4323,8 @@ var require_react_dom_client_production = __commonJS({
       memoCache.index++;
       return updateQueue;
     }
-    function basicStateReducer(state, action2) {
-      return "function" === typeof action2 ? action2(state) : action2;
+    function basicStateReducer(state, action) {
+      return "function" === typeof action ? action(state) : action;
     }
     function updateReducer(reducer) {
       var hook = updateWorkInProgressHook();
@@ -4541,12 +4541,12 @@ var require_react_dom_client_production = __commonJS({
       }
     }
     function runActionStateAction(actionQueue, node) {
-      var action2 = node.action, payload = node.payload, prevState = actionQueue.state;
+      var action = node.action, payload = node.payload, prevState = actionQueue.state;
       if (node.isTransition) {
         var prevTransition = ReactSharedInternals.T, currentTransition = {};
         ReactSharedInternals.T = currentTransition;
         try {
-          var returnValue = action2(prevState, payload), onStartTransitionFinish = ReactSharedInternals.S;
+          var returnValue = action(prevState, payload), onStartTransitionFinish = ReactSharedInternals.S;
           null !== onStartTransitionFinish && onStartTransitionFinish(currentTransition, returnValue);
           handleActionReturnValue(actionQueue, node, returnValue);
         } catch (error49) {
@@ -4556,7 +4556,7 @@ var require_react_dom_client_production = __commonJS({
         }
       } else
         try {
-          prevTransition = action2(prevState, payload), handleActionReturnValue(actionQueue, node, prevTransition);
+          prevTransition = action(prevState, payload), handleActionReturnValue(actionQueue, node, prevTransition);
         } catch (error$66) {
           onActionError(actionQueue, node, error$66);
         }
@@ -4597,7 +4597,7 @@ var require_react_dom_client_production = __commonJS({
     function actionStateReducer(oldState, newState) {
       return newState;
     }
-    function mountActionState(action2, initialStateProp) {
+    function mountActionState(action, initialStateProp) {
       if (isHydrating) {
         var ssrFormState = workInProgressRoot.formState;
         if (null !== ssrFormState) {
@@ -4665,7 +4665,7 @@ var require_react_dom_client_production = __commonJS({
       JSCompiler_inline_result$jscomp$0 = {
         state: initialStateProp,
         dispatch: null,
-        action: action2,
+        action,
         pending: null
       };
       JSCompiler_inline_result.queue = JSCompiler_inline_result$jscomp$0;
@@ -4677,14 +4677,14 @@ var require_react_dom_client_production = __commonJS({
         ssrFormState
       );
       JSCompiler_inline_result$jscomp$0.dispatch = ssrFormState;
-      JSCompiler_inline_result.memoizedState = action2;
+      JSCompiler_inline_result.memoizedState = action;
       return [initialStateProp, ssrFormState, false];
     }
-    function updateActionState(action2) {
+    function updateActionState(action) {
       var stateHook = updateWorkInProgressHook();
-      return updateActionStateImpl(stateHook, currentHook, action2);
+      return updateActionStateImpl(stateHook, currentHook, action);
     }
-    function updateActionStateImpl(stateHook, currentStateHook, action2) {
+    function updateActionStateImpl(stateHook, currentStateHook, action) {
       currentStateHook = updateReducerImpl(
         stateHook,
         currentStateHook,
@@ -4701,26 +4701,26 @@ var require_react_dom_client_production = __commonJS({
       else state = currentStateHook;
       currentStateHook = updateWorkInProgressHook();
       var actionQueue = currentStateHook.queue, dispatch = actionQueue.dispatch;
-      action2 !== currentStateHook.memoizedState && (currentlyRenderingFiber.flags |= 2048, pushSimpleEffect(
+      action !== currentStateHook.memoizedState && (currentlyRenderingFiber.flags |= 2048, pushSimpleEffect(
         9,
         { destroy: void 0 },
-        actionStateActionEffect.bind(null, actionQueue, action2),
+        actionStateActionEffect.bind(null, actionQueue, action),
         null
       ));
       return [state, dispatch, stateHook];
     }
-    function actionStateActionEffect(actionQueue, action2) {
-      actionQueue.action = action2;
+    function actionStateActionEffect(actionQueue, action) {
+      actionQueue.action = action;
     }
-    function rerenderActionState(action2) {
+    function rerenderActionState(action) {
       var stateHook = updateWorkInProgressHook(), currentStateHook = currentHook;
       if (null !== currentStateHook)
-        return updateActionStateImpl(stateHook, currentStateHook, action2);
+        return updateActionStateImpl(stateHook, currentStateHook, action);
       updateWorkInProgressHook();
       stateHook = stateHook.memoizedState;
       currentStateHook = updateWorkInProgressHook();
       var dispatch = currentStateHook.queue.dispatch;
-      currentStateHook.memoizedState = action2;
+      currentStateHook.memoizedState = action;
       return [stateHook, dispatch, false];
     }
     function pushSimpleEffect(tag, inst, create, deps) {
@@ -4892,7 +4892,7 @@ var require_react_dom_client_production = __commonJS({
     }
     function noop2() {
     }
-    function startHostTransition(formFiber, pendingState, action2, formData) {
+    function startHostTransition(formFiber, pendingState, action, formData) {
       if (5 !== formFiber.tag) throw Error(formatProdErrorMessage(476));
       var queue = ensureFormComponentIsStateful(formFiber).queue;
       startTransition(
@@ -4900,9 +4900,9 @@ var require_react_dom_client_production = __commonJS({
         queue,
         pendingState,
         sharedNotPendingObject,
-        null === action2 ? noop2 : function() {
+        null === action ? noop2 : function() {
           requestFormReset$1(formFiber);
-          return action2(formData);
+          return action(formData);
         }
       );
     }
@@ -4976,29 +4976,29 @@ var require_react_dom_client_production = __commonJS({
         provider = provider.return;
       }
     }
-    function dispatchReducerAction(fiber, queue, action2) {
+    function dispatchReducerAction(fiber, queue, action) {
       var lane = requestUpdateLane();
-      action2 = {
+      action = {
         lane,
         revertLane: 0,
         gesture: null,
-        action: action2,
+        action,
         hasEagerState: false,
         eagerState: null,
         next: null
       };
-      isRenderPhaseUpdate(fiber) ? enqueueRenderPhaseUpdate(queue, action2) : (action2 = enqueueConcurrentHookUpdate(fiber, queue, action2, lane), null !== action2 && (scheduleUpdateOnFiber(action2, fiber, lane), entangleTransitionUpdate(action2, queue, lane)));
+      isRenderPhaseUpdate(fiber) ? enqueueRenderPhaseUpdate(queue, action) : (action = enqueueConcurrentHookUpdate(fiber, queue, action, lane), null !== action && (scheduleUpdateOnFiber(action, fiber, lane), entangleTransitionUpdate(action, queue, lane)));
     }
-    function dispatchSetState(fiber, queue, action2) {
+    function dispatchSetState(fiber, queue, action) {
       var lane = requestUpdateLane();
-      dispatchSetStateInternal(fiber, queue, action2, lane);
+      dispatchSetStateInternal(fiber, queue, action, lane);
     }
-    function dispatchSetStateInternal(fiber, queue, action2, lane) {
+    function dispatchSetStateInternal(fiber, queue, action, lane) {
       var update = {
         lane,
         revertLane: 0,
         gesture: null,
-        action: action2,
+        action,
         hasEagerState: false,
         eagerState: null,
         next: null
@@ -5008,7 +5008,7 @@ var require_react_dom_client_production = __commonJS({
         var alternate = fiber.alternate;
         if (0 === fiber.lanes && (null === alternate || 0 === alternate.lanes) && (alternate = queue.lastRenderedReducer, null !== alternate))
           try {
-            var currentState = queue.lastRenderedState, eagerState = alternate(currentState, action2);
+            var currentState = queue.lastRenderedState, eagerState = alternate(currentState, action);
             update.hasEagerState = true;
             update.eagerState = eagerState;
             if (objectIs(eagerState, currentState))
@@ -5016,18 +5016,18 @@ var require_react_dom_client_production = __commonJS({
           } catch (error49) {
           } finally {
           }
-        action2 = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
-        if (null !== action2)
-          return scheduleUpdateOnFiber(action2, fiber, lane), entangleTransitionUpdate(action2, queue, lane), true;
+        action = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
+        if (null !== action)
+          return scheduleUpdateOnFiber(action, fiber, lane), entangleTransitionUpdate(action, queue, lane), true;
       }
       return false;
     }
-    function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action2) {
-      action2 = {
+    function dispatchOptimisticSetState(fiber, throwIfDuringRender, queue, action) {
+      action = {
         lane: 2,
         revertLane: requestTransitionLane(),
         gesture: null,
-        action: action2,
+        action,
         hasEagerState: false,
         eagerState: null,
         next: null
@@ -5038,7 +5038,7 @@ var require_react_dom_client_production = __commonJS({
         throwIfDuringRender = enqueueConcurrentHookUpdate(
           fiber,
           queue,
-          action2,
+          action,
           2
         ), null !== throwIfDuringRender && scheduleUpdateOnFiber(throwIfDuringRender, fiber, 2);
     }
@@ -9816,10 +9816,10 @@ var require_react_dom_client_production = __commonJS({
     }
     function extractEvents$1(dispatchQueue, domEventName, maybeTargetInst, nativeEvent, nativeEventTarget) {
       if ("submit" === domEventName && maybeTargetInst && maybeTargetInst.stateNode === nativeEventTarget) {
-        var action2 = coerceFormActionProp(
+        var action = coerceFormActionProp(
           (nativeEventTarget[internalPropsKey] || null).action
         ), submitter = nativeEvent.submitter;
-        submitter && (domEventName = (domEventName = submitter[internalPropsKey] || null) ? coerceFormActionProp(domEventName.formAction) : submitter.getAttribute("formAction"), null !== domEventName && (action2 = domEventName, submitter = null));
+        submitter && (domEventName = (domEventName = submitter[internalPropsKey] || null) ? coerceFormActionProp(domEventName.formAction) : submitter.getAttribute("formAction"), null !== domEventName && (action = domEventName, submitter = null));
         var event = new SyntheticEvent(
           "action",
           "action",
@@ -9842,22 +9842,22 @@ var require_react_dom_client_production = __commonJS({
                         pending: true,
                         data: formData,
                         method: nativeEventTarget.method,
-                        action: action2
+                        action
                       },
                       null,
                       formData
                     );
                   }
                 } else
-                  "function" === typeof action2 && (event.preventDefault(), formData = submitter ? createFormDataWithSubmitter(nativeEventTarget, submitter) : new FormData(nativeEventTarget), startHostTransition(
+                  "function" === typeof action && (event.preventDefault(), formData = submitter ? createFormDataWithSubmitter(nativeEventTarget, submitter) : new FormData(nativeEventTarget), startHostTransition(
                     maybeTargetInst,
                     {
                       pending: true,
                       data: formData,
                       method: nativeEventTarget.method,
-                      action: action2
+                      action
                     },
-                    action2,
+                    action,
                     formData
                   ));
               },
@@ -12506,15 +12506,15 @@ var require_react_dom_client_production = __commonJS({
           if ("function" === typeof submitterOrAction)
             formProps || scheduleReplayQueueIfNeeded(i3);
           else if (formProps) {
-            var action2 = null;
+            var action = null;
             if (submitterOrAction && submitterOrAction.hasAttribute("formAction"))
               if (form = submitterOrAction, formProps = submitterOrAction[internalPropsKey] || null)
-                action2 = formProps.formAction;
+                action = formProps.formAction;
               else {
                 if (null !== findInstanceBlockingTarget(form)) continue;
               }
-            else action2 = formProps.action;
-            "function" === typeof action2 ? i3[queuedTarget + 1] = action2 : (i3.splice(queuedTarget, 3), queuedTarget -= 3);
+            else action = formProps.action;
+            "function" === typeof action ? i3[queuedTarget + 1] = action : (i3.splice(queuedTarget, 3), queuedTarget -= 3);
             scheduleReplayQueueIfNeeded(i3);
           }
         }
@@ -12591,7 +12591,7 @@ var require_react_dom_client_production = __commonJS({
         0 === i3 && attemptExplicitHydrationTarget(target);
       }
     };
-    var isomorphicReactPackageVersion$jscomp$inline_1840 = React48.version;
+    var isomorphicReactPackageVersion$jscomp$inline_1840 = React56.version;
     if ("19.2.5" !== isomorphicReactPackageVersion$jscomp$inline_1840)
       throw Error(
         formatProdErrorMessage(
@@ -12794,9 +12794,9 @@ var require_fast_deep_equal = __commonJS({
 });
 
 // src/player/browser.tsx
-var React47 = __toESM(require_react(), 1);
+var React55 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
-var ReactDOM = __toESM(require_react_dom(), 1);
+var ReactDOM2 = __toESM(require_react_dom(), 1);
 
 // node_modules/remotion/dist/esm/index.mjs
 var esm_exports = {};
@@ -17159,16 +17159,16 @@ var resolveTrimProps = ({
   const trimAfterValue = trimAfter ?? endAt ?? void 0;
   return { trimBeforeValue, trimAfterValue };
 };
-var durationReducer = (state, action2) => {
-  switch (action2.type) {
+var durationReducer = (state, action) => {
+  switch (action.type) {
     case "got-duration": {
-      const absoluteSrc = getAbsoluteSrc(action2.src);
-      if (state[absoluteSrc] === action2.durationInSeconds) {
+      const absoluteSrc = getAbsoluteSrc(action.src);
+      if (state[absoluteSrc] === action.durationInSeconds) {
         return state;
       }
       return {
         ...state,
-        [absoluteSrc]: action2.durationInSeconds
+        [absoluteSrc]: action.durationInSeconds
       };
     }
     default:
@@ -27936,15 +27936,84 @@ var forward2 = import_react110.forwardRef;
 var Thumbnail = forward2(ThumbnailFn);
 
 // src/entry.tsx
-var React46 = __toESM(require_react(), 1);
+var React47 = __toESM(require_react(), 1);
+
+// src/utils/component-import-map.ts
+var React8 = __toESM(require_react(), 1);
+var ReactDOM = __toESM(require_react_dom(), 1);
+function ensureSharedImportMap() {
+  var _a3, _b, _c;
+  if (typeof document === "undefined") return;
+  if (document.querySelector("#rmtr-import-map")) return;
+  const g2 = globalThis;
+  g2.__remotionShared ?? (g2.__remotionShared = {});
+  (_a3 = g2.__remotionShared)["react"] ?? (_a3["react"] = React8);
+  (_b = g2.__remotionShared)["react-dom"] ?? (_b["react-dom"] = ReactDOM);
+  (_c = g2.__remotionShared)["remotion"] ?? (_c["remotion"] = esm_exports);
+  if (!g2.__nodeModuleStub) {
+    const nodeModuleStubCode = `export function createRequire() { return () => ({ resolve: () => { throw new Error("node:module.createRequire is not available in the browser"); } }); }`;
+    g2.__nodeModuleStub = URL.createObjectURL(
+      new Blob([nodeModuleStubCode], { type: "application/javascript" })
+    );
+  }
+  try {
+    const imports = {};
+    for (const spec of ["node:module", "node:fs", "node:path", "node:os"]) {
+      imports[spec] = g2.__nodeModuleStub;
+    }
+    for (const [specifier, mod] of Object.entries(g2.__remotionShared)) {
+      const lines = [
+        `const _mod = globalThis.__remotionShared[${JSON.stringify(specifier)}];`
+      ];
+      for (const name of Object.keys(mod)) {
+        if (name === "default") continue;
+        lines.push(
+          `const __${name} = _mod[${JSON.stringify(name)}];`,
+          `export { __${name} as ${name} };`
+        );
+      }
+      if ("default" in mod) lines.push("export default _mod.default;");
+      imports[specifier] = URL.createObjectURL(
+        new Blob([lines.join("\n")], { type: "application/javascript" })
+      );
+    }
+    const blobJsx = new Blob(
+      [
+        `
+        const R = globalThis.__remotionShared["react"];
+        const { createElement, Fragment } = R;
+        export { Fragment };
+        export function jsx(type, props, key) {
+          return createElement(type, key != null ? { ...props, key } : props);
+        }
+        export function jsxs(type, props, key) {
+          return createElement(type, key != null ? { ...props, key } : props);
+        }
+        export function jsxDEV(type, props, key, isStaticChildren, source, self) {
+          return createElement(type, key != null ? { ...props, key } : props);
+        }
+      `
+      ],
+      { type: "application/javascript" }
+    );
+    imports["react/jsx-runtime"] = URL.createObjectURL(blobJsx);
+    const script = document.createElement("script");
+    script.type = "importmap";
+    script.id = "rmtr-import-map";
+    script.textContent = JSON.stringify({ imports });
+    document.head.appendChild(script);
+  } catch (e) {
+    console.warn("Failed to create shared module import map:", e);
+  }
+}
 
 // src/context/index.tsx
-var React9 = __toESM(require_react(), 1);
+var React15 = __toESM(require_react(), 1);
 
 // src/context/EventContext.tsx
-var React8 = __toESM(require_react(), 1);
+var React9 = __toESM(require_react(), 1);
 var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1);
-var EventContext = React8.createContext(null);
+var EventContext = React9.createContext(null);
 function createComponentProxy(target, setState) {
   return new Proxy(target, {
     set(obj, prop, value) {
@@ -27959,8 +28028,8 @@ function createComponentProxy(target, setState) {
   });
 }
 function EventProvider({ children }) {
-  const registryRef = React8.useRef(/* @__PURE__ */ new Map());
-  const register = React8.useCallback(
+  const registryRef = React9.useRef(/* @__PURE__ */ new Map());
+  const register = React9.useCallback(
     (id, setState) => {
       const target = {};
       const proxy = createComponentProxy(target, setState);
@@ -27968,10 +28037,10 @@ function EventProvider({ children }) {
     },
     []
   );
-  const unregister = React8.useCallback((id) => {
+  const unregister = React9.useCallback((id) => {
     registryRef.current.delete(id);
   }, []);
-  const evaluate = React8.useCallback((code) => {
+  const evaluate = React9.useCallback((code) => {
     const scope = {};
     for (const [id, reg] of registryRef.current) {
       scope[id] = reg.proxy;
@@ -27986,14 +28055,14 @@ function EventProvider({ children }) {
       console.warn(`Event evaluation failed: "${code}"`, err);
     }
   }, []);
-  const value = React8.useMemo(
+  const value = React9.useMemo(
     () => ({ register, unregister, evaluate }),
     [register, unregister, evaluate]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(EventContext.Provider, { value, children });
 }
 function useEventContext() {
-  const ctx = React8.useContext(EventContext);
+  const ctx = React9.useContext(EventContext);
   if (!ctx) {
     throw new Error("useEventContext must be used within an EventProvider");
   }
@@ -28017,8 +28086,8 @@ function useFrameEvents(on, durationInFrames) {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const { evaluate } = useEventContext();
-  const handledRef = React8.useRef(false);
-  React8.useEffect(() => {
+  const handledRef = React9.useRef(false);
+  React9.useEffect(() => {
     if (!on || durationInFrames <= 0) return;
     const targetFrame = resolveWhenToFrame(on.when, durationInFrames, fps);
     if (frame === targetFrame && !handledRef.current) {
@@ -28032,13 +28101,13 @@ function useFrameEvents(on, durationInFrames) {
 // src/context/index.tsx
 var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
 var DefaultContainer = ({ children, style: style2 }) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { position: "absolute", inset: 0, ...style2 }, children });
-var ComposeContext = React9.createContext({
+var ComposeContext = React15.createContext({
   Container: DefaultContainer
 });
-var AudioContext2 = React9.createContext(null);
+var AudioContext2 = React15.createContext(null);
 
 // src/types/Folder.tsx
-var React44 = __toESM(require_react(), 1);
+var React45 = __toESM(require_react(), 1);
 
 // node_modules/@remotion/transitions/dist/esm/index.mjs
 var import_react113 = __toESM(require_react(), 1);
@@ -30316,6 +30385,12 @@ function cssJS(css) {
   }
   return out;
 }
+function leafEnd(stream2) {
+  if (typeof stream2.end === "number") return stream2.end;
+  const s2 = stream2.start ?? 0;
+  if (typeof stream2.duration === "number") return s2 + stream2.duration;
+  return 0;
+}
 function getDurationInSeconds(stream2, update = true) {
   if (!stream2) return 0;
   if (stream2.type === "rhythm") {
@@ -30323,8 +30398,7 @@ function getDurationInSeconds(stream2, update = true) {
   }
   if (stream2.type === "include") {
     if (stream2.src) {
-      const last = stream2.actions?.[stream2.actions.length - 1];
-      const d2 = last?.end ?? 0;
+      const d2 = leafEnd(stream2);
       if (update) stream2.durationInSeconds = d2;
       return d2;
     }
@@ -30344,8 +30418,7 @@ function getDurationInSeconds(stream2, update = true) {
     return total2;
   }
   if (!stream2.children?.length) {
-    const last = stream2.actions?.[stream2.actions.length - 1];
-    const d2 = last?.end ?? 0;
+    const d2 = leafEnd(stream2);
     if (update) stream2.durationInSeconds = d2;
     return d2;
   }
@@ -30394,10 +30467,10 @@ function parseVTT(src) {
 }
 
 // src/types/Video.tsx
-var React18 = __toESM(require_react(), 1);
+var React19 = __toESM(require_react(), 1);
 
 // src/types/FrameSyncStyle.tsx
-var React16 = __toESM(require_react(), 1);
+var React18 = __toESM(require_react(), 1);
 var import_jsx_runtime77 = __toESM(require_jsx_runtime(), 1);
 function FrameSyncStyle({
   style: style2,
@@ -30406,7 +30479,7 @@ function FrameSyncStyle({
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const hasAnimation = "animation" in style2;
-  const mergedStyle = React16.useMemo(() => {
+  const mergedStyle = React18.useMemo(() => {
     if (!hasAnimation) return style2;
     const currentTime = frame / fps;
     return {
@@ -30437,60 +30510,57 @@ function resolveVideoSrc(src) {
 }
 function VideoLeaf({ stream: stream2 }) {
   const { fps } = useVideoConfig();
-  const audio2 = React18.useContext(AudioContext2);
-  const totalDur = stream2.durationInSeconds ?? stream2.actions[0]?.end ?? 1;
+  const audio2 = React19.useContext(AudioContext2);
+  const start = stream2.start ?? 0;
+  const end = stream2.end ?? start + (stream2.duration ?? 1);
+  const totalDur = stream2.durationInSeconds ?? end;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * fps)));
   if (!stream2.src) return null;
   const resolvedSrc = resolveVideoSrc(stream2.src);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_jsx_runtime78.Fragment, { children: stream2.actions.map((a2) => {
-    const start = a2.start ?? 0;
-    const end = a2.end ?? start + 1;
-    const startFrom = a2.startFrom ?? 0;
-    const endAt = a2.endAt ?? stream2.durationInSeconds ?? end - start;
-    const volume = a2.volume ?? stream2.volume ?? 1;
-    const playbackRate = a2.loop ? 1 : Math.min(1, toPlaybackRate((endAt - startFrom) / (end - start)));
-    const actionStyle = cssJS(a2.style);
-    const hasAnimation = "animation" in actionStyle;
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-      Sequence,
-      {
-        durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
-        from: Math.floor(fps * start),
-        layout: "none",
-        showInTimeline: false,
-        children: hasAnimation ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FrameSyncStyle, { style: actionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          OffthreadVideo,
-          {
-            src: resolvedSrc,
-            startFrom: Math.floor(startFrom * fps),
-            endAt: Math.floor(startFrom * fps) + Math.floor((endAt - startFrom) * fps / playbackRate),
-            muted: volume === 0 || !!audio2?.foreground,
-            volume,
-            playbackRate,
-            showInTimeline: false,
-            style: { width: "100%", height: "100%" }
-          }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-          OffthreadVideo,
-          {
-            src: resolvedSrc,
-            startFrom: Math.floor(startFrom * fps),
-            endAt: Math.floor(startFrom * fps) + Math.floor((endAt - startFrom) * fps / playbackRate),
-            muted: volume === 0 || !!audio2?.foreground,
-            volume,
-            playbackRate,
-            showInTimeline: false,
-            style: { width: "100%", height: "100%", ...actionStyle }
-          }
-        )
-      },
-      a2.id
-    );
-  }) });
+  const startFrom = stream2.startFrom ?? 0;
+  const endAt = stream2.endAt ?? totalDur;
+  const volume = stream2.volume ?? 1;
+  const playbackRate = stream2.loop ? 1 : Math.min(1, toPlaybackRate((endAt - startFrom) / (end - start)));
+  const streamStyle = cssJS(stream2.style);
+  const hasAnimation = "animation" in streamStyle;
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    Sequence,
+    {
+      durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
+      from: Math.floor(fps * start),
+      layout: "none",
+      showInTimeline: false,
+      children: hasAnimation ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FrameSyncStyle, { style: streamStyle, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        OffthreadVideo,
+        {
+          src: resolvedSrc,
+          startFrom: Math.floor(startFrom * fps),
+          endAt: Math.floor(startFrom * fps) + Math.floor((endAt - startFrom) * fps / playbackRate),
+          muted: volume === 0 || !!audio2?.foreground,
+          volume,
+          playbackRate,
+          showInTimeline: false,
+          style: { width: "100%", height: "100%" }
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        OffthreadVideo,
+        {
+          src: resolvedSrc,
+          startFrom: Math.floor(startFrom * fps),
+          endAt: Math.floor(startFrom * fps) + Math.floor((endAt - startFrom) * fps / playbackRate),
+          muted: volume === 0 || !!audio2?.foreground,
+          volume,
+          playbackRate,
+          showInTimeline: false,
+          style: { width: "100%", height: "100%", ...streamStyle }
+        }
+      )
+    }
+  );
 }
 
 // src/types/Audio.tsx
-var React19 = __toESM(require_react(), 1);
+var React25 = __toESM(require_react(), 1);
 var import_jsx_runtime79 = __toESM(require_jsx_runtime(), 1);
 function resolveAudioSrc(src) {
   if (/^(https?:|data:|blob:|file:|\/)/.test(src)) return src;
@@ -30499,44 +30569,41 @@ function resolveAudioSrc(src) {
 function AudioLeaf({ stream: stream2 }) {
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const ctx = React19.useContext(AudioContext2);
-  const totalDur = stream2.durationInSeconds ?? stream2.actions[0]?.end ?? 1;
+  const ctx = React25.useContext(AudioContext2);
+  const start = stream2.start ?? 0;
+  const end = stream2.end ?? start + (stream2.duration ?? 1);
+  const totalDur = stream2.durationInSeconds ?? end;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * fps)));
   if (!stream2.src) return null;
   if (environment.isStudio) return null;
   const resolvedSrc = resolveAudioSrc(stream2.src);
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: stream2.actions.map((a2) => {
-    const start = a2.start ?? 0;
-    const end = a2.end ?? start + 1;
-    const startFrom = a2.startFrom ?? 0;
-    const endAt = a2.endAt ?? stream2.durationInSeconds ?? end - start;
-    const volume = a2.volume ?? stream2.volume ?? 1;
-    const playbackRate = a2.loop ? 1 : toPlaybackRate((endAt - startFrom) / (end - start));
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-      Sequence,
-      {
-        name: stream2.src ?? "audio",
-        durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
-        from: Math.floor(fps * start),
-        layout: "none",
-        showInTimeline: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-          Audio,
-          {
-            src: resolvedSrc,
-            startFrom: Math.floor(startFrom * fps),
-            endAt: Math.floor(startFrom * fps) + Math.floor((endAt - startFrom) * fps / playbackRate),
-            muted: volume === 0 || !!ctx?.foreground,
-            volume,
-            loop: (a2.loop ?? 1) > 1,
-            playbackRate,
-            showInTimeline: false
-          }
-        )
-      },
-      a2.id
-    );
-  }) });
+  const startFrom = stream2.startFrom ?? 0;
+  const endAt = stream2.endAt ?? totalDur;
+  const volume = stream2.volume ?? 1;
+  const playbackRate = stream2.loop ? 1 : toPlaybackRate((endAt - startFrom) / (end - start));
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    Sequence,
+    {
+      name: stream2.src ?? "audio",
+      durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
+      from: Math.floor(fps * start),
+      layout: "none",
+      showInTimeline: false,
+      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        Audio,
+        {
+          src: resolvedSrc,
+          startFrom: Math.floor(startFrom * fps),
+          endAt: Math.floor(startFrom * fps) + Math.floor((endAt - startFrom) * fps / playbackRate),
+          muted: volume === 0 || !!ctx?.foreground,
+          volume,
+          loop: (stream2.loop ?? 1) > 1,
+          playbackRate,
+          showInTimeline: false
+        }
+      )
+    }
+  );
 }
 
 // src/types/Image.tsx
@@ -30547,42 +30614,39 @@ function resolveImageSrc(src) {
 }
 function ImageLeaf({ stream: stream2 }) {
   const { fps } = useVideoConfig();
-  const totalDur = stream2.durationInSeconds ?? stream2.actions[0]?.end ?? 1;
+  const start = stream2.start ?? 0;
+  const end = stream2.end ?? start + (stream2.duration ?? 1);
+  const totalDur = stream2.durationInSeconds ?? end;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * fps)));
   if (!stream2.src) return null;
   const resolvedSrc = resolveImageSrc(stream2.src);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: stream2.actions.map((a2) => {
-    const start = a2.start ?? 0;
-    const end = a2.end ?? start + 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-      Sequence,
-      {
-        durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
-        from: Math.floor(fps * start),
-        layout: "none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FrameSyncStyle, { style: cssJS(a2.style), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
-          Img,
-          {
-            src: resolvedSrc,
-            style: {
-              width: "100%",
-              height: "100%",
-              objectFit: stream2.fit
-            },
-            onDragStart: (e) => {
-              e.stopPropagation();
-              return false;
-            }
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    Sequence,
+    {
+      durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
+      from: Math.floor(fps * start),
+      layout: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FrameSyncStyle, { style: cssJS(stream2.style), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        Img,
+        {
+          src: resolvedSrc,
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: stream2.fit
+          },
+          onDragStart: (e) => {
+            e.stopPropagation();
+            return false;
           }
-        ) })
-      },
-      a2.id
-    );
-  }) });
+        }
+      ) })
+    }
+  );
 }
 
 // src/types/Component.tsx
-var React27 = __toESM(require_react(), 1);
+var React30 = __toESM(require_react(), 1);
 
 // node_modules/react-jsx-parser/dist/react-jsx-parser.min.js
 var import_react125 = __toESM(require_react());
@@ -41616,11 +41680,11 @@ var JsxParser = class extends import_react125.default.Component {
   constructor() {
     super(...arguments);
     __publicField(this, "ParsedChildren", null);
-    __privateAdd(this, _parseJSX, (jsx68) => {
+    __privateAdd(this, _parseJSX, (jsx76) => {
       const parser = Parser.extend(AcornJSX.default({
         autoCloseVoidElements: this.props.autoCloseVoidElements
       }));
-      const wrappedJsx = `<root>${jsx68}</root>`;
+      const wrappedJsx = `<root>${jsx76}</root>`;
       let parsed = [];
       try {
         parsed = parser.parse(wrappedJsx, { ecmaVersion: "latest" });
@@ -41918,8 +41982,8 @@ var JsxParser = class extends import_react125.default.Component {
     });
   }
   render() {
-    const jsx68 = (this.props.jsx || "").trim().replace(/<!DOCTYPE([^>]*)>/g, "");
-    this.ParsedChildren = __privateGet(this, _parseJSX).call(this, jsx68);
+    const jsx76 = (this.props.jsx || "").trim().replace(/<!DOCTYPE([^>]*)>/g, "");
+    this.ParsedChildren = __privateGet(this, _parseJSX).call(this, jsx76);
     const className2 = [.../* @__PURE__ */ new Set(["jsx-parser", ...String(this.props.className).split(" ")])].filter(Boolean).join(" ");
     return this.props.renderInWrapper ? /* @__PURE__ */ import_react125.default.createElement("div", {
       className: className2
@@ -41955,7 +42019,7 @@ __publicField(JsxParser, "defaultProps", {
 var source_default = JsxParser;
 
 // src/utils/tween.ts
-var React26 = __toESM(require_react(), 1);
+var React27 = __toESM(require_react(), 1);
 var EASING_MAP = {
   linear: void 0,
   ease: Easing.ease,
@@ -41976,16 +42040,16 @@ function hexToNumber(hex3) {
 function lerp(a2, b3, t) {
   return a2 + (b3 - a2) * t;
 }
-function useTweenBindings(action2) {
+function useTweenBindings(action) {
   const frame = useCurrentFrame();
-  const actionDurationFrames = Math.max(1, Math.floor(((action2.end ?? 1) - (action2.start ?? 0)) * 30));
-  const cacheRef = React26.useRef(/* @__PURE__ */ new Map());
-  const prevFrameRef = React26.useRef(frame);
+  const actionDurationFrames = Math.max(1, Math.floor(((action.end ?? 1) - (action.start ?? 0)) * 30));
+  const cacheRef = React27.useRef(/* @__PURE__ */ new Map());
+  const prevFrameRef = React27.useRef(frame);
   if (prevFrameRef.current !== frame) {
     cacheRef.current = /* @__PURE__ */ new Map();
     prevFrameRef.current = frame;
   }
-  const tween = React26.useCallback(
+  const tween = React27.useCallback(
     (from, to, easing) => {
       const key = `${from},${to},${easing || "linear"}`;
       const cached2 = cacheRef.current.get(key);
@@ -42027,18 +42091,18 @@ function useTweenBindings(action2) {
 // src/types/Component.tsx
 var import_jsx_runtime81 = __toESM(require_jsx_runtime(), 1);
 function TweenedJsxParser({
-  jsx: jsx68,
+  jsx: jsx76,
   components,
   data: data2,
-  action: action2
+  action
 }) {
-  const tweenBindings = useTweenBindings(action2);
+  const tweenBindings = useTweenBindings(action);
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     source_default,
     {
       components,
-      bindings: React27.useMemo(() => ({ ...data2, ...tweenBindings }), [data2, tweenBindings]),
-      jsx: jsx68,
+      bindings: React30.useMemo(() => ({ ...data2, ...tweenBindings }), [data2, tweenBindings]),
+      jsx: jsx76,
       renderInWrapper: false,
       blacklistedAttrs: [],
       disableKeyGeneration: true,
@@ -42048,10 +42112,10 @@ function TweenedJsxParser({
 }
 function ComponentLeaf({ stream: stream2 }) {
   const { fps } = useVideoConfig();
-  const { components } = React27.useContext(ComposeContext);
+  const { components } = React30.useContext(ComposeContext);
   const eventCtx = useEventContext();
-  const [eventState, setEventState] = React27.useState({});
-  React27.useLayoutEffect(() => {
+  const [eventState, setEventState] = React30.useState({});
+  React30.useLayoutEffect(() => {
     if (stream2.id) {
       eventCtx.register(
         stream2.id,
@@ -42060,42 +42124,39 @@ function ComponentLeaf({ stream: stream2 }) {
       return () => eventCtx.unregister(stream2.id);
     }
   }, [stream2.id, eventCtx]);
-  const bindings = React27.useMemo(
+  const bindings = React30.useMemo(
     () => ({ ...components, ...stream2.data, ...eventState }),
     [stream2.data, components, eventState]
   );
   if (!stream2.jsx) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_jsx_runtime81.Fragment, { children: stream2.actions.map((a2) => {
-    const start = a2.start ?? 0;
-    const end = a2.end ?? start + 1;
-    const durFrames = Math.max(1, Math.floor(fps * (end - start)));
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      Sequence,
-      {
-        durationInFrames: durFrames,
-        from: Math.floor(fps * start),
-        layout: "none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-          EventAwareComponent,
-          {
-            jsx: stream2.jsx,
-            components,
-            data: bindings,
-            action: a2,
-            durFrames,
-            on: stream2.on
-          }
-        )
-      },
-      a2.id
-    );
-  }) });
+  const start = stream2.start ?? 0;
+  const end = stream2.end ?? start + (stream2.duration ?? 1);
+  const durFrames = Math.max(1, Math.floor(fps * (end - start)));
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    Sequence,
+    {
+      durationInFrames: durFrames,
+      from: Math.floor(fps * start),
+      layout: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        EventAwareComponent,
+        {
+          jsx: stream2.jsx,
+          components,
+          data: bindings,
+          action: { start, end },
+          durFrames,
+          on: stream2.on
+        }
+      )
+    }
+  );
 }
 function EventAwareComponent({
-  jsx: jsx68,
+  jsx: jsx76,
   components,
   data: data2,
-  action: action2,
+  action,
   durFrames,
   on
 }) {
@@ -42103,10 +42164,10 @@ function EventAwareComponent({
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     TweenedJsxParser,
     {
-      jsx: jsx68,
+      jsx: jsx76,
       components,
       data: data2,
-      action: action2
+      action
     }
   );
 }
@@ -42120,43 +42181,40 @@ function resolveAudioSrc2(src) {
 function RhythmLeaf({ stream: stream2 }) {
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const totalDur = stream2.durationInSeconds ?? stream2.actions[0]?.end ?? 1;
+  const start = stream2.start ?? 0;
+  const end = stream2.end ?? start + (stream2.duration ?? 1);
+  const totalDur = stream2.durationInSeconds ?? end;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * fps)));
   if (!stream2.src || environment.isStudio) return null;
   const resolvedSrc = resolveAudioSrc2(stream2.src);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_jsx_runtime82.Fragment, { children: stream2.actions.map((a2) => {
-    const start = a2.start ?? 0;
-    const end = a2.end ?? start + 1;
-    const volume = a2.volume ?? stream2.volume ?? 1;
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      Sequence,
-      {
-        name: stream2.src ?? "rhythm",
-        durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
-        from: Math.floor(fps * start),
-        layout: "none",
-        showInTimeline: false,
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          Audio,
-          {
-            src: resolvedSrc,
-            muted: volume === 0,
-            volume,
-            loop: true,
-            showInTimeline: false
-          }
-        )
-      },
-      a2.id
-    );
-  }) });
+  const volume = stream2.volume ?? 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    Sequence,
+    {
+      name: stream2.src ?? "rhythm",
+      durationInFrames: Math.max(1, Math.floor(fps * (end - start))),
+      from: Math.floor(fps * start),
+      layout: "none",
+      showInTimeline: false,
+      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        Audio,
+        {
+          src: resolvedSrc,
+          muted: volume === 0,
+          volume,
+          loop: true,
+          showInTimeline: false
+        }
+      )
+    }
+  );
 }
 
 // src/types/Map.tsx
 var import_react127 = __toESM(require_react(), 1);
 
 // node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs
-var React30 = __toESM(require_react(), 1);
+var React35 = __toESM(require_react(), 1);
 var import_react126 = __toESM(require_react(), 1);
 var import_react_dom3 = __toESM(require_react_dom(), 1);
 var import_fast_deep_equal = __toESM(require_fast_deep_equal(), 1);
@@ -42343,8 +42401,8 @@ function useMap3DInstances() {
 function useGoogleMapsApiLoader(props) {
   const { onLoad, onError, apiKey, version: version4, libraries = [], region, language, authReferrerPolicy, channel, solutionChannel, fetchAppCheckToken } = props;
   const [status, setStatus] = (0, import_react126.useState)(loadingStatus);
-  const [loadedLibraries, addLoadedLibrary] = (0, import_react126.useReducer)((loadedLibraries2, action2) => {
-    return loadedLibraries2[action2.name] ? loadedLibraries2 : Object.assign(Object.assign({}, loadedLibraries2), { [action2.name]: action2.value });
+  const [loadedLibraries, addLoadedLibrary] = (0, import_react126.useReducer)((loadedLibraries2, action) => {
+    return loadedLibraries2[action.name] ? loadedLibraries2 : Object.assign(Object.assign({}, loadedLibraries2), { [action.name]: action.value });
   }, {});
   const currentSerializedParams = (0, import_react126.useMemo)(() => {
     const params = {
@@ -43100,8 +43158,8 @@ function useMapsLibrary(name) {
   return (ctx === null || ctx === void 0 ? void 0 : ctx.loadedLibraries[name]) || null;
 }
 var _a;
-var { useLayoutEffect: useLayoutEffect16, useRef: useRef31 } = React30;
-var useBeforeEffect = (_a = React30.useInsertionEffect) !== null && _a !== void 0 ? _a : useLayoutEffect16;
+var { useLayoutEffect: useLayoutEffect16, useRef: useRef31 } = React35;
+var useBeforeEffect = (_a = React35.useInsertionEffect) !== null && _a !== void 0 ? _a : useLayoutEffect16;
 function forbiddenInRender() {
   throw new Error("useEffectEvent: invalid call during rendering.");
 }
@@ -44476,55 +44534,59 @@ Rectangle.displayName = "Rectangle";
 
 // src/types/Map.tsx
 var import_jsx_runtime83 = __toESM(require_jsx_runtime(), 1);
-var GM_API_KEY = "AIzaSyC6x4jghg5ZggV5VTThu9JE4DwX9NlbN9U";
+function resolveApiKey(stream2) {
+  if (stream2.googleMapsApiKey) return stream2.googleMapsApiKey;
+  if (typeof process !== "undefined" && typeof process.env !== "undefined" && process.env.GOOGLE_MAPS_API_KEY) {
+    return process.env.GOOGLE_MAPS_API_KEY;
+  }
+  return "";
+}
 function MapLeaf({ stream: stream2 }) {
   const { fps } = useVideoConfig();
   const waypoints = stream2.waypoints ?? [];
-  const totalDur = stream2.durationInSeconds ?? stream2.actions[0]?.end ?? 1;
+  const start = stream2.start ?? 0;
+  const end = stream2.end ?? start + (stream2.duration ?? 1);
+  const totalDur = stream2.durationInSeconds ?? end;
+  const apiKey = resolveApiKey(stream2);
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * fps)));
   if (waypoints.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_jsx_runtime83.Fragment, { children: stream2.actions?.map((a2, i3) => {
-    const start = a2.start ?? 0;
-    const end = a2.end ?? start + 1;
-    const durFrames = Math.max(1, Math.floor(fps * (end - start)));
-    const center = stream2.center ?? { lat: waypoints[0].lat, lng: waypoints[0].lng };
-    const zoom = stream2.zoom ?? 10;
-    const mapType = stream2.mapType ?? "roadmap";
-    const travelMode = stream2.travelMode ?? "DRIVING";
-    const markerEmoji = stream2.routeMarker ?? "\u{1F697}";
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-      Sequence,
-      {
-        durationInFrames: durFrames,
-        from: Math.floor(fps * start),
-        layout: "none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(APIProvider, { apiKey: GM_API_KEY, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-          Map2,
-          {
-            mapId: String(stream2.id ?? i3),
-            defaultCenter: center,
-            defaultZoom: zoom,
-            defaultOptions: {
-              mapTypeId: mapType,
-              disableDefaultUI: true,
-              zoomControl: false
-            },
-            style: { width: "100%", height: "100%", position: "absolute" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-              RouteWithMarker,
-              {
-                waypoints,
-                travelMode,
-                markerEmoji,
-                actionDuration: end - start
-              }
-            )
-          }
-        ) })
-      },
-      a2.id ?? i3
-    );
-  }) });
+  const durFrames = Math.max(1, Math.floor(fps * (end - start)));
+  const center = stream2.center ?? { lat: waypoints[0].lat, lng: waypoints[0].lng };
+  const zoom = stream2.zoom ?? 10;
+  const mapType = stream2.mapType ?? "roadmap";
+  const travelMode = stream2.travelMode ?? "DRIVING";
+  const markerEmoji = stream2.routeMarker ?? "\u{1F697}";
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    Sequence,
+    {
+      durationInFrames: durFrames,
+      from: Math.floor(fps * start),
+      layout: "none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(APIProvider, { apiKey, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        Map2,
+        {
+          mapId: String(stream2.id ?? "map"),
+          defaultCenter: center,
+          defaultZoom: zoom,
+          defaultOptions: {
+            mapTypeId: mapType,
+            disableDefaultUI: true,
+            zoomControl: false
+          },
+          style: { width: "100%", height: "100%", position: "absolute" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            RouteWithMarker,
+            {
+              waypoints,
+              travelMode,
+              markerEmoji,
+              actionDuration: end - start
+            }
+          )
+        }
+      ) })
+    }
+  );
 }
 function RouteWithMarker({
   waypoints,
@@ -44647,7 +44709,7 @@ function getCurrentStep(leg, currentInSecond) {
 }
 
 // src/types/Include.tsx
-var React39 = __toESM(require_react(), 1);
+var React41 = __toESM(require_react(), 1);
 var import_jsx_runtime84 = __toESM(require_jsx_runtime(), 1);
 var ASPECT_DIMS = {
   "16x9": { width: 1920, height: 1080 },
@@ -44666,10 +44728,10 @@ function resolveIncludeSrc(src) {
   return staticFile(src);
 }
 function useSubVideoRegistry(importsUrl) {
-  const [registry2, setRegistry] = React39.useState(null);
-  const [loaded, setLoaded] = React39.useState(false);
-  const handleRef = React39.useRef(null);
-  React39.useEffect(() => {
+  const [registry2, setRegistry] = React41.useState(null);
+  const [loaded, setLoaded] = React41.useState(false);
+  const handleRef = React41.useRef(null);
+  React41.useEffect(() => {
     if (!importsUrl) {
       setRegistry(null);
       setLoaded(true);
@@ -44701,18 +44763,21 @@ function useSubVideoRegistry(importsUrl) {
 }
 function IncludeLeaf({ stream: stream2 }) {
   const { fps: parentFps, width: parentWidth, height: parentHeight } = useVideoConfig();
-  const parentCompose = React39.useContext(ComposeContext);
+  const parentCompose = React41.useContext(ComposeContext);
   const { Container } = parentCompose;
-  const parentAudio = React39.useContext(AudioContext2);
-  const totalDur = stream2.durationInSeconds ?? stream2.actions[0]?.end ?? 1;
+  const parentAudio = React41.useContext(AudioContext2);
+  const start = stream2.start ?? 0;
+  const end = stream2.end ?? (stream2.durationInSeconds ?? start + (stream2.duration ?? 1));
+  const totalDur = stream2.durationInSeconds ?? end;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * parentFps)));
-  if (!stream2.actions?.length) return null;
-  const [externalData, setExternalData] = React39.useState(null);
-  const [loadError, setLoadError] = React39.useState(null);
-  const [handle] = React39.useState(
+  const hasContent = !!stream2.src || (stream2.children?.length ?? 0) > 0;
+  if (!hasContent) return null;
+  const [externalData, setExternalData] = React41.useState(null);
+  const [loadError, setLoadError] = React41.useState(null);
+  const [handle] = React41.useState(
     () => stream2.src ? delayRender(`Loading include: ${stream2.src}`) : null
   );
-  React39.useEffect(() => {
+  React41.useEffect(() => {
     if (!stream2.src || !handle) return;
     let active = true;
     const url2 = resolveIncludeSrc(stream2.src);
@@ -44736,18 +44801,18 @@ function IncludeLeaf({ stream: stream2 }) {
       active = false;
     };
   }, [stream2.src, handle]);
-  React39.useMemo(() => {
+  React41.useMemo(() => {
     if (!stream2.src) {
       getDurationInSeconds(stream2, true);
     }
   }, [stream2, stream2.src]);
-  const subImportsUrl = React39.useMemo(() => {
+  const subImportsUrl = React41.useMemo(() => {
     if (!externalData) return void 0;
     const root2 = externalData.root ?? externalData;
     return root2?.imports;
   }, [externalData]);
   const { registry: subRegistry, loaded: subRegistryLoaded } = useSubVideoRegistry(subImportsUrl);
-  const mergedCompose = React39.useMemo(() => {
+  const mergedCompose = React41.useMemo(() => {
     const parentComponents = parentCompose.components;
     if (!subRegistry) return parentCompose;
     return {
@@ -44758,11 +44823,11 @@ function IncludeLeaf({ stream: stream2 }) {
       }
     };
   }, [parentCompose, subRegistry]);
-  const audioCtx = React39.useMemo(
+  const audioCtx = React41.useMemo(
     () => ({ id: stream2.id, foreground: true, parent: parentAudio }),
     [stream2.id, parentAudio]
   );
-  const renderExternalContent = React39.useCallback(() => {
+  const renderExternalContent = React41.useCallback(() => {
     if (!externalData) return null;
     if (loadError) {
       return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { style: { color: "#ff4444", fontSize: 24, padding: 40 }, children: [
@@ -44779,12 +44844,12 @@ function IncludeLeaf({ stream: stream2 }) {
         vj.bgm && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Audio, { src: vj.bgm.src, volume: vj.bgm.baseVolume }),
         vj.scenes.map((scene2) => {
           const startFrame = Math.round((scene2.start ?? 0) * vjFps);
-          const durFrames = Math.round((scene2.duration ?? 1) * vjFps);
+          const durFrames2 = Math.round((scene2.duration ?? 1) * vjFps);
           return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
             Sequence,
             {
               from: startFrame,
-              durationInFrames: durFrames,
+              durationInFrames: durFrames2,
               name: `${scene2.id}:${scene2.component}`,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
@@ -44855,82 +44920,72 @@ function IncludeLeaf({ stream: stream2 }) {
       }
     );
   }, [externalData, loadError, parentFps, parentWidth, parentHeight]);
-  const renderAction = (a2) => {
-    const start = a2.start ?? 0;
-    const end = a2.end ?? (stream2.durationInSeconds ?? start + 1);
-    const dur = Math.max(0.1, end - start);
-    const durFrames = Math.max(1, Math.floor(parentFps * dur));
-    if (!stream2.src && stream2.children?.length) {
-      return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-        Sequence,
-        {
-          durationInFrames: durFrames,
-          from: Math.floor(parentFps * start),
-          layout: "none",
-          showInTimeline: false,
-          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-            Container,
-            {
-              id: stream2.id,
-              type: "include",
-              style: {
-                ...cssJS(stream2.style),
-                width: parentWidth,
-                height: parentHeight,
-                overflow: "hidden",
-                position: "relative"
-              },
-              className: `include ${toClassName(stream2.id ?? "")}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FolderLeaf, { stream: stream2 })
-            }
-          )
+  const dur = Math.max(0.1, end - start);
+  const durFrames = Math.max(1, Math.floor(parentFps * dur));
+  let innerNode;
+  if (!stream2.src && stream2.children?.length) {
+    innerNode = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      Container,
+      {
+        id: stream2.id,
+        type: "include",
+        style: {
+          ...cssJS(stream2.style),
+          width: parentWidth,
+          height: parentHeight,
+          overflow: "hidden",
+          position: "relative"
         },
-        a2.id
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      Sequence,
+        className: `include ${toClassName(stream2.id ?? "")}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FolderLeaf, { stream: stream2 })
+      }
+    );
+  } else if (externalData || loadError) {
+    innerNode = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      "div",
       {
-        durationInFrames: durFrames,
-        from: Math.floor(parentFps * start),
-        layout: "none",
-        showInTimeline: false,
-        children: externalData || loadError ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-          "div",
-          {
-            style: {
-              width: parentWidth,
-              height: parentHeight,
-              overflow: "hidden",
-              position: "relative"
-            },
-            children: renderExternalContent()
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
-          "div",
-          {
-            style: {
-              width: parentWidth,
-              height: parentHeight,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "#666",
-              fontSize: 20,
-              fontFamily: "monospace"
-            },
-            children: [
-              "Loading\u2026 ",
-              stream2.src
-            ]
-          }
-        )
-      },
-      a2.id
+        style: {
+          width: parentWidth,
+          height: parentHeight,
+          overflow: "hidden",
+          position: "relative"
+        },
+        children: renderExternalContent()
+      }
     );
-  };
+  } else {
+    innerNode = /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+      "div",
+      {
+        style: {
+          width: parentWidth,
+          height: parentHeight,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#666",
+          fontSize: 20,
+          fontFamily: "monospace"
+        },
+        children: [
+          "Loading\u2026 ",
+          stream2.src
+        ]
+      }
+    );
+  }
+  const sequence = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    Sequence,
+    {
+      durationInFrames: durFrames,
+      from: Math.floor(parentFps * start),
+      layout: "none",
+      showInTimeline: false,
+      children: innerNode
+    }
+  );
   const needsNestedContext = subRegistry !== null && subRegistry !== parentCompose.components;
-  const inner2 = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(AudioContext2.Provider, { value: audioCtx, children: stream2.actions.map(renderAction) });
+  const inner2 = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(AudioContext2.Provider, { value: audioCtx, children: sequence });
   if (needsNestedContext && subRegistryLoaded) {
     return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ComposeContext.Provider, { value: mergedCompose, children: inner2 });
   }
@@ -44938,14 +44993,14 @@ function IncludeLeaf({ stream: stream2 }) {
 }
 
 // src/types/Scene.tsx
-var React41 = __toESM(require_react(), 1);
+var React43 = __toESM(require_react(), 1);
 var import_jsx_runtime85 = __toESM(require_jsx_runtime(), 1);
 function SceneLeaf({ stream: stream2 }) {
-  const { Container } = React41.useContext(ComposeContext);
-  const parentAudio = React41.useContext(AudioContext2);
+  const { Container } = React43.useContext(ComposeContext);
+  const parentAudio = React43.useContext(AudioContext2);
   const totalDur = stream2.durationInSeconds ?? 1;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * 30)));
-  const audioCtx = React41.useMemo(
+  const audioCtx = React43.useMemo(
     () => ({ id: stream2.id, parent: parentAudio }),
     [stream2.id, parentAudio]
   );
@@ -44962,7 +45017,7 @@ function SceneLeaf({ stream: stream2 }) {
 }
 
 // src/types/Effect.tsx
-var React43 = __toESM(require_react(), 1);
+var React44 = __toESM(require_react(), 1);
 
 // src/types/keyframes.ts
 function parseKeyframeData(data2) {
@@ -45355,47 +45410,42 @@ function EffectWrapper({
 }) {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
-  const totalDur = stream2.durationInSeconds ?? stream2.actions[0]?.end ?? 1;
+  const startSec = stream2.start ?? 0;
+  const endSec = stream2.end ?? startSec + (stream2.duration ?? 1);
+  const totalDur = stream2.durationInSeconds ?? endSec;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * fps)));
-  const actions = stream2.actions ?? [];
-  const styles = React43.useMemo(() => {
-    const result = [];
-    for (const action2 of actions) {
-      const start = Math.ceil(action2.start * fps);
-      const end = Math.ceil(action2.end * fps);
-      const durationInFrames = end - start;
-      if (durationInFrames <= 0) continue;
-      const animation = stream2.animation;
-      const timingFn = stream2.animationTimingFunction;
-      const iterCount = stream2.animationIterationCount ?? 1;
-      const style2 = cssJS(action2.style) ?? {};
-      let currentFrame = frame;
-      if (iterCount > 0 && durationInFrames > 0) {
-        const iteration = Math.floor((frame - start) / durationInFrames);
-        if (iteration < iterCount) {
-          currentFrame = start + (frame - start) % durationInFrames;
-        }
-      }
-      if (currentFrame >= start && currentFrame < end) {
-        const actionFrame = currentFrame - start;
-        if (animation) {
-          const config2 = resolveAnimation(animation, stream2.customKeyframes);
-          if (config2) {
-            const animStyle = interpolateKeyframes(config2, actionFrame, {
-              fps,
-              durationInSeconds: durationInFrames / fps,
-              timingFunction: timingFn
-            });
-            if (animStyle) Object.assign(style2, animStyle);
-          }
-        }
-        if (Object.keys(style2).length > 0) {
-          result.push(style2);
+  const styles = React44.useMemo(() => {
+    const start = Math.ceil(startSec * fps);
+    const end = Math.ceil(endSec * fps);
+    const durationInFrames = end - start;
+    if (durationInFrames <= 0) return [];
+    const animation = stream2.animation;
+    const timingFn = stream2.animationTimingFunction;
+    const iterCount = stream2.animationIterationCount ?? 1;
+    const style2 = cssJS(stream2.style) ?? {};
+    let currentFrame = frame;
+    if (iterCount > 0 && durationInFrames > 0) {
+      const iteration = Math.floor((frame - start) / durationInFrames);
+      if (iteration < iterCount) {
+        currentFrame = start + (frame - start) % durationInFrames;
+      }
+    }
+    if (currentFrame >= start && currentFrame < end) {
+      const actionFrame = currentFrame - start;
+      if (animation) {
+        const config2 = resolveAnimation(animation, stream2.customKeyframes);
+        if (config2) {
+          const animStyle = interpolateKeyframes(config2, actionFrame, {
+            fps,
+            durationInSeconds: durationInFrames / fps,
+            timingFunction: timingFn
+          });
+          if (animStyle) Object.assign(style2, animStyle);
         }
       }
     }
-    return result;
-  }, [frame, fps, actions, stream2.animation, stream2.animationTimingFunction, stream2.animationIterationCount, stream2.customKeyframes]);
+    return Object.keys(style2).length > 0 ? [style2] : [];
+  }, [frame, fps, startSec, endSec, stream2.animation, stream2.animationTimingFunction, stream2.animationIterationCount, stream2.customKeyframes, stream2.style]);
   if (styles.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "div",
@@ -45430,8 +45480,8 @@ var NotSeries = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
 NotSeries.Sequence = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_jsx_runtime87.Fragment, { children });
 function FolderLeaf({ stream: stream2 }) {
   const { fps, width, height } = useVideoConfig();
-  const { Container } = React44.useContext(ComposeContext);
-  const parentAudio = React44.useContext(AudioContext2);
+  const { Container } = React45.useContext(ComposeContext);
+  const parentAudio = React45.useContext(AudioContext2);
   const totalDur = stream2.durationInSeconds ?? 1;
   useFrameEvents(stream2.on, Math.max(1, Math.floor(totalDur * fps)));
   const isSeries = !!stream2.isSeries;
@@ -45443,11 +45493,11 @@ function FolderLeaf({ stream: stream2 }) {
   const seriesChildren = isSeries ? visibleChildren.filter((c3) => !c3.isBackground) : visibleChildren;
   const allAudio = seriesChildren.length > 0 && seriesChildren.every((c3) => c3.type === "audio");
   const effectiveTransition = allAudio ? void 0 : transition;
-  const TypedSeries = React44.useMemo(() => {
+  const TypedSeries = React45.useMemo(() => {
     if (!isSeries) return NotSeries;
     return effectiveTransition ? TransitionSeries : Series;
   }, [isSeries, effectiveTransition]);
-  const transEl = React44.useMemo(() => {
+  const transEl = React45.useMemo(() => {
     if (!isSeries || !effectiveTransition) return null;
     const presentation = TransitionPresets[transition]?.(
       transition === "clockWipe" ? { width, height } : void 0
@@ -45465,7 +45515,7 @@ function FolderLeaf({ stream: stream2 }) {
     const durFrames = Math.max(1, Math.floor(dur * fps));
     const SequenceWrap = TypedSeries.Sequence ?? Sequence;
     const isLeaf = child.type !== "folder" && child.type !== "root" && child.type !== "effect";
-    const childContent = isLeaf ? React44.createElement(Leaves[child.type] ?? (() => null), { stream: child }) : child.type === "effect" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(EffectWrapper, { stream: child, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FolderLeaf, { stream: child }) }) : React44.createElement(FolderLeaf, { stream: child });
+    const childContent = isLeaf ? React45.createElement(Leaves[child.type] ?? (() => null), { stream: child }) : child.type === "effect" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(EffectWrapper, { stream: child, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FolderLeaf, { stream: child }) }) : React45.createElement(FolderLeaf, { stream: child });
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(SequenceWrap, { durationInFrames: durFrames, layout: "none", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       Container,
       {
@@ -45481,7 +45531,7 @@ function FolderLeaf({ stream: stream2 }) {
     const dur = child.durationInSeconds ?? 0;
     const durFrames = Math.max(1, Math.floor(dur * fps));
     const isLeaf = child.type !== "folder" && child.type !== "root" && child.type !== "effect";
-    const childContent = isLeaf ? React44.createElement(Leaves[child.type] ?? (() => null), { stream: child }) : child.type === "effect" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(EffectWrapper, { stream: child, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FolderLeaf, { stream: child }) }) : React44.createElement(FolderLeaf, { stream: child });
+    const childContent = isLeaf ? React45.createElement(Leaves[child.type] ?? (() => null), { stream: child }) : child.type === "effect" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(EffectWrapper, { stream: child, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FolderLeaf, { stream: child }) }) : React45.createElement(FolderLeaf, { stream: child });
     const wrapped = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       Container,
       {
@@ -45497,10 +45547,10 @@ function FolderLeaf({ stream: stream2 }) {
   }) });
   if (isSeries && transEl) {
     for (let i3 = 1; i3 < sequences.length; i3 += 2) {
-      sequences.splice(i3, 0, React44.cloneElement(transEl, { key: `t${i3}` }));
+      sequences.splice(i3, 0, React45.cloneElement(transEl, { key: `t${i3}` }));
     }
   }
-  const audioCtx = React44.useMemo(
+  const audioCtx = React45.useMemo(
     () => stream2.type !== "folder" ? { id: stream2.id, parent: parentAudio } : parentAudio,
     [stream2.id, stream2.type, parentAudio]
   );
@@ -45523,7 +45573,7 @@ function FolderLeaf({ stream: stream2 }) {
 }
 
 // src/types/Subtitle.tsx
-var React45 = __toESM(require_react(), 1);
+var React46 = __toESM(require_react(), 1);
 
 // node_modules/remotion-subtitle/dist/index.esm.js
 var index_esm_exports = {};
@@ -45849,8 +45899,8 @@ function CueFrame({
 }) {
   const durationInFrames = Math.max(1, Math.floor((cue.endAt - cue.startFrom) * fps));
   const from = Math.floor(cue.startFrom * fps);
-  const captionText = React45.useMemo(() => supportHtml(cue.text), [cue.text]);
-  const textStyle = React45.useMemo(
+  const captionText = React46.useMemo(() => supportHtml(cue.text), [cue.text]);
+  const textStyle = React46.useMemo(
     () => ({
       ...DEFAULT_TEXT_STYLE,
       fontSize: subtitle.fontSize ?? DEFAULT_TEXT_STYLE.fontSize,
@@ -45863,12 +45913,12 @@ function CueFrame({
 }
 function SubtitleOverlay({ subtitle }) {
   const { fps } = useVideoConfig();
-  const [cues, setCues] = React45.useState(null);
-  const CaptionComponent = React45.useMemo(
+  const [cues, setCues] = React46.useState(null);
+  const CaptionComponent = React46.useMemo(
     () => resolveCaption(subtitle.type),
     [subtitle.type]
   );
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     const { src } = subtitle;
     if (src.includes("-->")) {
       setCues(parseVTT(src));
@@ -59686,17 +59736,6 @@ function date4(params) {
 config(en_default());
 
 // src/schema/index.ts
-var action = external_exports.object({
-  id: external_exports.string().default(() => uid()),
-  start: external_exports.number().min(0).default(0).describe("seconds, relative to parent"),
-  end: external_exports.number().min(0).default(1).describe("seconds, relative to parent"),
-  startFrom: external_exports.number().optional().describe("trim seconds from source start"),
-  endAt: external_exports.number().optional().describe("trim seconds at source end"),
-  loop: external_exports.number().int().min(1).optional().describe(">1 = loop count"),
-  effectId: external_exports.string().optional(),
-  style: external_exports.string().optional().describe("inline css"),
-  volume: external_exports.number().min(0).max(1).optional()
-});
 var eventSpec = external_exports.object({
   when: external_exports.string().describe("'start' | 'end' | '50%' | '2.5s'"),
   state: external_exports.string().describe("JS expression evaluated with registered components in scope")
@@ -59708,6 +59747,11 @@ var BaseShape = {
   style: external_exports.string().optional().describe("inline css"),
   visible: external_exports.boolean().default(true),
   isBackground: external_exports.boolean().optional(),
+  start: external_exports.number().min(0).default(0).describe("seconds, relative to parent timeline (0 inside series parents)"),
+  end: external_exports.number().min(0).optional().describe("seconds, relative to parent timeline \u2014 source of truth for duration"),
+  duration: external_exports.number().min(0).optional().describe("convenience; normalized to end = start + duration when end is absent"),
+  startFrom: external_exports.number().min(0).optional().describe("trim seconds from source start (video/audio)"),
+  endAt: external_exports.number().min(0).optional().describe("trim seconds at source end (video/audio)"),
   durationInSeconds: external_exports.number().optional().describe("set by engine; do not edit by hand"),
   on: eventSpec.optional().describe("event that fires at a specific frame, mutating registered component state")
 };
@@ -59760,26 +59804,25 @@ var video = base.extend({
   playbackRate: external_exports.number().optional(),
   width: external_exports.number().default(1080),
   height: external_exports.number().default(1920),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})])
+  loop: external_exports.number().int().min(1).optional().describe(">1 = loop count")
 });
 var audio = base.extend({
   type: external_exports.literal("audio").default("audio"),
   src: external_exports.string().optional(),
   volume: external_exports.number().min(0).max(1).default(1),
   foreground: external_exports.boolean().optional().describe("ducks parent video audio while playing"),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})])
+  loop: external_exports.number().int().min(1).optional().describe(">1 = loop count"),
+  speaker: external_exports.string().optional().describe("speaker name for multi-turn dialogue; set by resolveDialogue")
 });
 var image = base.extend({
   type: external_exports.literal("image").default("image"),
   src: external_exports.string().optional(),
-  fit: external_exports.enum(["contain", "cover", "fill"]).default("contain"),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})])
+  fit: external_exports.enum(["contain", "cover", "fill"]).default("contain")
 });
 var component = base.extend({
   type: external_exports.literal("component").default("component"),
   jsx: external_exports.string().describe("usage JSX expression compiled at runtime; tag names resolved from imports"),
-  data: external_exports.record(external_exports.string(), external_exports.union([external_exports.string(), external_exports.number(), external_exports.boolean()])).optional().describe("extra variables (e.g. from ~~~md source code fences) available in JSX scope"),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})])
+  data: external_exports.record(external_exports.string(), external_exports.union([external_exports.string(), external_exports.number(), external_exports.boolean()])).optional().describe("extra variables (e.g. from ~~~md source code fences) available in JSX scope")
 });
 var effect = base.extend({
   type: external_exports.literal("effect").default("effect"),
@@ -59787,23 +59830,20 @@ var effect = base.extend({
   animationTimingFunction: external_exports.enum(["linear", "ease", "ease-in", "ease-out", "ease-in-out"]).optional(),
   animationIterationCount: external_exports.number().default(1),
   customKeyframes: external_exports.record(external_exports.string(), external_exports.record(external_exports.string(), external_exports.string())).optional().describe('inline keyframes: { "0": { opacity: "0" }, "100": { opacity: "1" } }'),
-  children: external_exports.array(external_exports.lazy(() => stream)).default(() => []),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})])
+  children: external_exports.array(external_exports.lazy(() => stream)).default(() => [])
 });
 var rhythm = base.extend({
   type: external_exports.literal("rhythm").default("rhythm"),
   src: external_exports.string().optional().describe("audio file for beat playback"),
   volume: external_exports.number().min(0).max(1).default(1),
   spots: external_exports.array(external_exports.number()).optional().describe("pre-computed beat timestamps in seconds"),
-  children: external_exports.array(external_exports.lazy(() => stream)).default(() => []),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})])
+  children: external_exports.array(external_exports.lazy(() => stream)).default(() => [])
 });
 var include = base.extend({
   type: external_exports.literal("include").default("include"),
   src: external_exports.string().optional().describe("path or URL to video JSON file (stream tree or scene-based)"),
   volume: external_exports.number().min(0).max(1).default(1),
   children: external_exports.array(external_exports.lazy(() => stream)).default(() => []),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})]),
   imports: external_exports.string().optional().describe("component bundle URL for sub-video (set by engine)")
 });
 var scene = base.extend({
@@ -59830,7 +59870,7 @@ var mapStream = base.extend({
   mapType: external_exports.enum(["roadmap", "satellite", "hybrid", "terrain"]).default("roadmap").describe("Google Maps style"),
   travelMode: external_exports.enum(["DRIVING", "WALKING", "BICYCLING", "TRANSIT"]).default("DRIVING").describe("Directions API travel mode"),
   routeMarker: external_exports.string().default("\u{1F697}").describe("emoji/character for the animated traveling marker"),
-  actions: external_exports.array(action).min(1).default(() => [action.parse({})])
+  googleMapsApiKey: external_exports.string().optional().describe("injected by compiler from GOOGLE_MAPS_API_KEY env var")
 });
 var stream = external_exports.discriminatedUnion("type", [
   root,
@@ -59850,9 +59890,9 @@ var stream = external_exports.discriminatedUnion("type", [
 var import_jsx_runtime89 = __toESM(require_jsx_runtime(), 1);
 var DefaultContainer2 = ({ children, style: style2, className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: className2, style: { position: "absolute", inset: 0, ...style2 }, children });
 function useComponentRegistry(imports) {
-  const [registry2, setRegistry] = React46.useState(null);
-  const handleRef = React46.useRef(null);
-  React46.useEffect(() => {
+  const [registry2, setRegistry] = React47.useState(null);
+  const handleRef = React47.useRef(null);
+  React47.useEffect(() => {
     if (!imports) {
       setRegistry(null);
       return;
@@ -59865,9 +59905,11 @@ function useComponentRegistry(imports) {
       if (!handleRef.current) {
         handleRef.current = delayRender("Loading component registry: " + imports);
       }
+      const moduleUrl = /^(https?:|data:|blob:|\/)/.test(imports) ? imports : staticFile(imports);
+      ensureSharedImportMap();
       import(
         /* webpackIgnore: true */
-        imports
+        moduleUrl
       ).then((mod) => {
         setRegistry(mod.default ?? mod);
         if (handleRef.current) {
@@ -59889,7 +59931,7 @@ function useComponentRegistry(imports) {
   return registry2;
 }
 function MarkCut({ root: root2, compose, background = "#000" }) {
-  const parsed = React46.useMemo(() => {
+  const parsed = React47.useMemo(() => {
     if (!root2) {
       return {
         id: "root",
@@ -59906,8 +59948,8 @@ function MarkCut({ root: root2, compose, background = "#000" }) {
     return root.parse(root2);
   }, [root2]);
   const registry2 = useComponentRegistry(parsed.imports);
-  React46.useMemo(() => getDurationInSeconds(parsed, true), [parsed]);
-  const value = React46.useMemo(
+  React47.useMemo(() => getDurationInSeconds(parsed, true), [parsed]);
+  const value = React47.useMemo(
     () => ({
       Container: compose?.Container ?? DefaultContainer2,
       onError: compose?.onError,
@@ -59922,11 +59964,452 @@ function MarkCut({ root: root2, compose, background = "#000" }) {
   ] }) }) });
 }
 
+// src/player/components/HeaderBar.tsx
+var React48 = __toESM(require_react(), 1);
+var import_jsx_runtime90 = __toESM(require_jsx_runtime(), 1);
+function HeaderBar({ mode, sceneInfo, editStatus, sseConnected }) {
+  const handleClose = React48.useCallback(() => {
+    navigator.sendBeacon("/api/shutdown", "{}");
+    document.body.innerHTML = "<div style='display:flex;align-items:center;justify-content:center;height:100vh;background:#0a0a0a;color:#555;font-family:sans-serif;font-size:16px'>\u2B61 player closed \u2014 return to terminal</div>";
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { id: "header", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { style: { flex: 1, display: "flex", alignItems: "center", gap: 8 }, children: [
+      mode === "label" && sceneInfo && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { id: "scene-info", children: sceneInfo }),
+      mode === "edit" && editStatus && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { id: "edit-status", children: editStatus }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        "span",
+        {
+          id: "sse-indicator",
+          title: sseConnected ? "Connected \u2014 auto-reload ready" : "Disconnected",
+          style: {
+            display: "inline-block",
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: sseConnected ? "#4ade80" : "#555",
+            flexShrink: 0
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { id: "header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { id: "close-btn", title: "Close player and return to terminal", onClick: handleClose, children: "\u2715" }) })
+  ] });
+}
+
+// src/player/components/EditControls.tsx
+var React49 = __toESM(require_react(), 1);
+var import_jsx_runtime91 = __toESM(require_jsx_runtime(), 1);
+function EditControls({ onStatusChange, suppressReloadRef, currentTime, activeScene }) {
+  const [busy, setBusy] = React49.useState(false);
+  const inputRef = React49.useRef(null);
+  const handleApplyEdit = React49.useCallback(
+    async (text) => {
+      if (!text || busy) return;
+      setBusy(true);
+      onStatusChange?.("\u231B editing...");
+      if (inputRef.current) inputRef.current.value = "";
+      if (suppressReloadRef) suppressReloadRef.current = true;
+      try {
+        const res = await fetch("/api/edit", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ text, currentTime, activeScene })
+        });
+        const data2 = await res.json();
+        if (res.ok) {
+          const summary = data2.summary || (data2.output || "done").split("\n")[0].slice(0, 65);
+          onStatusChange?.(summary);
+          setTimeout(() => {
+            if (suppressReloadRef) suppressReloadRef.current = false;
+            window.dispatchEvent(new Event("refresh-player"));
+          }, 4e3);
+        } else {
+          onStatusChange?.("\u274C " + (data2.error || "failed"));
+          if (suppressReloadRef) suppressReloadRef.current = false;
+        }
+      } catch {
+        onStatusChange?.("\u274C error");
+        if (suppressReloadRef) suppressReloadRef.current = false;
+      }
+      setBusy(false);
+    },
+    [busy, onStatusChange, suppressReloadRef]
+  );
+  const handleKeyDown = React49.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleApplyEdit(e.target.value);
+      }
+    },
+    [handleApplyEdit]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { id: "bottom-bar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        id: "edit-input",
+        placeholder: "What should change? e.g. make text bigger",
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "button",
+      {
+        id: "edit-btn",
+        title: "Apply edit",
+        disabled: busy,
+        onClick: () => handleApplyEdit(inputRef.current?.value || ""),
+        children: "\u2728"
+      }
+    )
+  ] });
+}
+
+// src/player/components/LabelControls.tsx
+var React50 = __toESM(require_react(), 1);
+var import_jsx_runtime92 = __toESM(require_jsx_runtime(), 1);
+var VIDEO_EXT = {
+  ".mov": 1,
+  ".mp4": 1,
+  ".avi": 1,
+  ".mkv": 1,
+  ".webm": 1,
+  ".m4v": 1,
+  ".wmv": 1
+};
+function escHtml(s2) {
+  return s2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function formatTime2(sec) {
+  const mm = Math.floor(sec / 60);
+  const ss = Math.floor(sec % 60);
+  return mm + ":" + String(ss).padStart(2, "0");
+}
+function LabelControls({ playerRef, currentTime, onSceneChange }) {
+  const [videoInfo, setVideoInfo] = React50.useState(null);
+  const [labelData, setLabelData] = React50.useState({});
+  const [currentSceneIdx, setCurrentSceneIdx] = React50.useState(0);
+  const [selectedOverride, setSelectedOverride] = React50.useState(-1);
+  const [inputText, setInputText] = React50.useState("");
+  const [saving, setSaving] = React50.useState(false);
+  const inputRef = React50.useRef(null);
+  React50.useEffect(() => {
+    fetch("/api/video-info").then((r) => r.json()).then((info2) => {
+      setVideoInfo(info2);
+      if (info2.scenes?.[0]) {
+        onSceneChange?.(info2.scenes[0].name + " (0.0s)");
+      }
+    }).catch(() => {
+    });
+    fetch("/api/labels").then((r) => r.ok ? r.json() : null).then((tree) => {
+      if (!tree) return;
+      const root2 = tree.root || tree;
+      const children = root2.children || [];
+      const loaded = {};
+      for (let i3 = 0; i3 < children.length; i3++) {
+        const media = (children[i3].children || [])[0];
+        if (media && media.userHints) {
+          loaded[i3] = {
+            overall: media.userHints.overall || "",
+            timed: media.userHints.timed || {}
+          };
+        } else if (media && media.description) {
+          loaded[i3] = { overall: media.description, timed: {} };
+        }
+      }
+      setLabelData(loaded);
+    }).catch(() => {
+    });
+  }, [onSceneChange]);
+  const scenes = videoInfo?.scenes || [];
+  const effectiveIdx = selectedOverride >= 0 ? selectedOverride : currentSceneIdx;
+  const currentScene = scenes[effectiveIdx];
+  React50.useEffect(() => {
+    if (selectedOverride >= 0) return;
+    for (let i3 = 0; i3 < scenes.length; i3++) {
+      if (currentTime >= scenes[i3].start && currentTime < scenes[i3].end) {
+        setCurrentSceneIdx(i3);
+        break;
+      }
+    }
+  }, [currentTime, scenes, selectedOverride]);
+  React50.useEffect(() => {
+    if (selectedOverride >= 0 && currentScene) {
+      const scene2 = scenes[selectedOverride];
+      if (scene2 && (currentTime < scene2.start || currentTime >= scene2.end)) {
+        setSelectedOverride(-1);
+      }
+    }
+  }, [currentTime, selectedOverride, scenes, currentScene]);
+  React50.useEffect(() => {
+    if (!currentScene) {
+      onSceneChange?.(currentTime.toFixed(1) + "s");
+    } else if (selectedOverride >= 0) {
+      onSceneChange?.(currentScene.name + " (selected)");
+    } else {
+      onSceneChange?.(currentScene.name + " (" + currentTime.toFixed(1) + "s)");
+    }
+  }, [currentScene, currentTime, selectedOverride, onSceneChange]);
+  const seekToScene = React50.useCallback(
+    (index) => {
+      setSelectedOverride(index);
+      setCurrentSceneIdx(index);
+      const scene2 = scenes[index];
+      if (scene2 && playerRef.current) {
+        const frame = Math.round(scene2.start * 30);
+        playerRef.current.seekTo(frame);
+      }
+    },
+    [scenes, playerRef]
+  );
+  React50.useEffect(() => {
+    const entry = labelData[effectiveIdx];
+    setInputText(entry && entry.overall || "");
+  }, [effectiveIdx, labelData]);
+  const saveLabel = React50.useCallback(() => {
+    const text = inputText.trim();
+    if (!text || saving) return;
+    setSaving(true);
+    const sceneIdx = effectiveIdx;
+    const timeMs = Math.round(currentTime * 1e3);
+    const scene2 = scenes[sceneIdx];
+    const isImage = scene2 && scene2.mediaType === "image";
+    const sceneStart = scene2 ? scene2.start * 1e3 : 0;
+    const isOverall = isImage || timeMs - sceneStart < 1e3;
+    setLabelData((prev) => {
+      const next = { ...prev };
+      if (!next[sceneIdx]) next[sceneIdx] = { overall: "", timed: {} };
+      if (isOverall) {
+        next[sceneIdx] = { ...next[sceneIdx], overall: text };
+      } else {
+        next[sceneIdx] = {
+          ...next[sceneIdx],
+          timed: { ...next[sceneIdx].timed, ["at_" + timeMs]: text }
+        };
+      }
+      return next;
+    });
+    fetch("/api/labels", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        sceneIndex: sceneIdx,
+        description: text,
+        time: currentTime,
+        overall: isOverall || void 0
+      })
+    }).then(() => {
+      setInputText("");
+      const toast = document.getElementById("saved-toast");
+      if (toast) {
+        toast.classList.add("show");
+        setTimeout(() => toast.classList.remove("show"), 2e3);
+      }
+    }).catch(() => {
+    }).finally(() => setSaving(false));
+  }, [inputText, saving, effectiveIdx, currentTime, scenes]);
+  const deleteTimed = React50.useCallback(
+    (key) => {
+      const sceneIdx = effectiveIdx;
+      setLabelData((prev) => {
+        const entry = prev[sceneIdx];
+        if (!entry || !entry.timed[key]) return prev;
+        const next = { ...prev };
+        const nextEntry = { ...entry, timed: { ...entry.timed } };
+        delete nextEntry.timed[key];
+        next[sceneIdx] = nextEntry;
+        return next;
+      });
+      fetch("/api/labels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          sceneIndex: sceneIdx,
+          description: "",
+          removeTimed: key
+        })
+      }).catch(() => {
+      });
+    },
+    [effectiveIdx]
+  );
+  const renderThumbnails = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { id: "thumbnails", children: scenes.map((scene2, i3) => {
+      const isActive = i3 === effectiveIdx;
+      const entry = labelData[i3];
+      const hasLabel = entry && (entry.overall || Object.keys(entry.timed).length > 0);
+      let thumbContent;
+      const ext = scene2.src.substring(scene2.src.lastIndexOf(".")).toLowerCase();
+      const isVideo = !!VIDEO_EXT[ext];
+      if (scene2.src && !isVideo) {
+        thumbContent = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("img", { src: scene2.src, alt: "", loading: "lazy" });
+      } else if (scene2.src && isVideo) {
+        thumbContent = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          "video",
+          {
+            src: scene2.src,
+            muted: true,
+            preload: "metadata",
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        );
+      } else {
+        thumbContent = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "rgba(255,255,255,.08)",
+              color: "rgba(255,255,255,.3)",
+              fontSize: 16,
+              fontWeight: 600
+            },
+            children: (scene2.name || "S" + (i3 + 1)).slice(0, 2).toUpperCase()
+          }
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+        "div",
+        {
+          className: "thumb-item" + (isActive ? " active" : ""),
+          "data-index": i3,
+          onClick: () => seekToScene(i3),
+          children: [
+            thumbContent,
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "thumb-badge" + (hasLabel ? " has-label" : "") })
+          ]
+        },
+        i3
+      );
+    }) });
+  };
+  const renderTimedLabels = () => {
+    const entry = labelData[effectiveIdx];
+    const timed = entry && entry.timed || {};
+    const keys = Object.keys(timed).sort();
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { id: "timed-labels", children: keys.map((k2) => {
+      const sec = parseInt(k2.replace("at_", "")) / 1e3;
+      return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "timed-label", "data-key": k2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "tl-time", children: formatTime2(sec) }),
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "tl-text", dangerouslySetInnerHTML: { __html: escHtml(timed[k2]) } }),
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("button", { className: "tl-del", title: "Remove", onClick: () => deleteTimed(k2), children: "\xD7" })
+      ] }, k2);
+    }) });
+  };
+  let sceneInfoText = currentTime.toFixed(1) + "s";
+  if (currentScene) {
+    if (selectedOverride >= 0) {
+      sceneInfoText = currentScene.name + " (selected)";
+    } else {
+      sceneInfoText = currentScene.name + " (" + currentTime.toFixed(1) + "s)";
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+    renderThumbnails(),
+    renderTimedLabels(),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { id: "saved-toast", children: "\u2713 Label saved" }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { id: "bottom-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          id: "label-input",
+          placeholder: "Add label for current scene\u2026",
+          value: inputText,
+          onChange: (e) => setInputText(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              saveLabel();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        "button",
+        {
+          id: "label-btn",
+          title: "Save label",
+          disabled: saving || !inputText.trim(),
+          onClick: saveLabel,
+          children: "\u{1F4DD}"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/player/components/SceneThumbnails.tsx
+var React51 = __toESM(require_react(), 1);
+var import_jsx_runtime93 = __toESM(require_jsx_runtime(), 1);
+function SceneThumbnails({ currentTime, onSeek }) {
+  const [scenes, setScenes] = React51.useState([]);
+  React51.useEffect(() => {
+    fetch("/api/video-info").then((r) => r.json()).then((info2) => {
+      if (info2.scenes) setScenes(info2.scenes);
+    }).catch(() => {
+    });
+  }, []);
+  if (scenes.length === 0) return null;
+  let activeIdx = -1;
+  for (let i3 = 0; i3 < scenes.length; i3++) {
+    if (currentTime >= scenes[i3].start && currentTime < scenes[i3].end) {
+      activeIdx = i3;
+      break;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { id: "scene-thumbnails", children: scenes.map((scene2, i3) => {
+    const isActive = i3 === activeIdx;
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      "span",
+      {
+        className: "scene-pill" + (isActive ? " active" : ""),
+        onClick: () => onSeek?.(scene2.start),
+        children: scene2.name || "Scene " + (i3 + 1)
+      },
+      i3
+    );
+  }) });
+}
+
+// src/player/components/VariantBar.tsx
+var React54 = __toESM(require_react(), 1);
+var import_jsx_runtime94 = __toESM(require_jsx_runtime(), 1);
+function VariantBar() {
+  const [variants, setVariants] = React54.useState([]);
+  const currentVariant = (typeof window !== "undefined" ? window.VARIANT : null) || "default";
+  React54.useEffect(() => {
+    fetch("/api/video-info").then((r) => r.json()).then((info2) => {
+      if (info2.variants && info2.variants.length > 1) {
+        setVariants(info2.variants);
+      }
+    }).catch(() => {
+    });
+  }, []);
+  if (variants.length <= 1) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { id: "variant-bar", children: variants.map((v2) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    "a",
+    {
+      href: `/${v2 === "default" ? "" : v2}`,
+      className: "variant-link" + (v2 === currentVariant ? " active" : ""),
+      children: v2
+    },
+    v2
+  )) });
+}
+
 // src/player/browser.tsx
+var import_jsx_runtime95 = __toESM(require_jsx_runtime(), 1);
 if (typeof window !== "undefined") {
   globalThis.__remotionShared = {
-    "react": React47,
-    "react-dom": ReactDOM,
+    "react": React55,
+    "react-dom": ReactDOM2,
     "remotion": esm_exports,
     "@remotion/player": { Player }
   };
@@ -59988,59 +60471,90 @@ if (typeof window !== "undefined") {
   }
 }
 function PlayerApp() {
-  const playerRef = React47.useRef(null);
-  const [ready, setReady] = React47.useState(false);
-  const [error49, setError] = React47.useState(null);
-  const [data2, setData] = React47.useState(null);
-  const [refreshKey, setRefreshKey] = React47.useState(0);
-  const [muted, setMuted] = React47.useState(false);
-  const [volume, setVolume] = React47.useState(1);
-  const seekAttemptedRef = React47.useRef(false);
-  const mountedRef = React47.useRef(true);
+  const playerRef = React55.useRef(null);
+  const [ready, setReady] = React55.useState(false);
+  const [error49, setError] = React55.useState(null);
+  const [data2, setData] = React55.useState(null);
+  const [muted, setMuted] = React55.useState(false);
+  const [volume, setVolume] = React55.useState(1);
+  const mountedRef = React55.useRef(true);
+  const currentFrameRef = React55.useRef(0);
+  const [currentTime, setCurrentTime] = React55.useState(0);
+  const [activeScene, setActiveScene] = React55.useState("");
+  React55.useEffect(() => {
+    fetch("/api/video-info").then((r) => r.json()).then((info2) => {
+      if (info2.scenes) {
+        window.__scenes = info2.scenes;
+      }
+    }).catch(() => {
+    });
+  }, []);
+  React55.useEffect(() => {
+    const scenes = window.__scenes;
+    if (!scenes) return;
+    let found = "";
+    for (const s2 of scenes) {
+      if (currentTime >= s2.start && currentTime < s2.end) {
+        found = s2.name || "";
+        break;
+      }
+    }
+    setActiveScene(found);
+  }, [currentTime]);
+  const pendingSeekRef = React55.useRef(null);
   const urlParams = new URLSearchParams(typeof window !== "undefined" ? window.location.search : "");
   const autoPlay = urlParams.get("autoplay") === "true";
   const startAt = parseFloat(urlParams.get("start") || urlParams.get("t") || "0") || 0;
   const fps = data2?.fps ?? 30;
   const durationInSeconds = data2 ? getDurationInSeconds(data2, true) || 5 : 5;
   const durationInFrames = Math.max(1, Math.ceil(durationInSeconds * fps));
-  const loadData = React47.useCallback(() => {
-    setReady(false);
+  const loadData = React55.useCallback((initial = false) => {
+    if (initial) setReady(false);
     const variant = window.VARIANT || "default";
     const url2 = variant !== "default" ? `/api/video-data?variant=${variant}` : "/api/video-data";
     fetch(url2).then((r) => r.json()).then((json2) => {
       const root2 = json2.root || json2;
       setData(root2);
-      setReady(true);
+      if (initial) setReady(true);
     }).catch((e) => setError(e.message));
   }, []);
-  React47.useEffect(() => {
-    loadData();
-    const handler = () => {
-      setRefreshKey((k2) => k2 + 1);
-    };
-    window.addEventListener("refresh-player", handler);
+  React55.useEffect(() => {
+    loadData(true);
     return () => {
       mountedRef.current = false;
-      window.removeEventListener("refresh-player", handler);
     };
   }, [loadData]);
-  React47.useEffect(() => {
-    if (refreshKey > 0) loadData();
-  }, [refreshKey, loadData]);
-  React47.useEffect(() => {
-    if (!ready || !data2 || seekAttemptedRef.current) return;
-    if (startAt > 0 && playerRef.current) {
+  React55.useEffect(() => {
+    const handler = () => {
+      if (playerRef.current) {
+        pendingSeekRef.current = playerRef.current.getCurrentFrame();
+      }
+      loadData(false);
+    };
+    window.addEventListener("refresh-player", handler);
+    return () => window.removeEventListener("refresh-player", handler);
+  }, [loadData]);
+  React55.useEffect(() => {
+    if (!ready || !data2 || !playerRef.current) return;
+    const targetFrame = pendingSeekRef.current ?? Math.round(startAt * fps);
+    if (targetFrame > 0) {
       const timer = setTimeout(() => {
         if (!mountedRef.current || !playerRef.current) return;
-        const frame = Math.round(startAt * fps);
-        playerRef.current.seekTo(frame);
-        seekAttemptedRef.current = true;
+        playerRef.current.seekTo(targetFrame);
+        pendingSeekRef.current = null;
       }, 100);
       return () => clearTimeout(timer);
     }
-    seekAttemptedRef.current = true;
+    pendingSeekRef.current = null;
   }, [ready, data2, startAt, fps]);
-  React47.useEffect(() => {
+  const handleFrameUpdate = React55.useCallback((frame) => {
+    currentFrameRef.current = frame;
+    setCurrentTime((prev) => {
+      const newTime = frame / (data2?.fps ?? 30);
+      return Math.abs(newTime - prev) > 0.5 ? newTime : prev;
+    });
+  }, [data2?.fps]);
+  React55.useEffect(() => {
     if (!ready || !playerRef.current) return;
     const FWD_SECONDS = 5;
     const BACK_SECONDS = 5;
@@ -60150,55 +60664,124 @@ function PlayerApp() {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [ready, data2, fps, durationInFrames, volume]);
-  React47.useEffect(() => {
-    if (!data2) return;
-    window.__remotionSeekTo = (timeInSeconds) => {
-      const frame = Math.round(timeInSeconds * fps);
-      playerRef.current?.seekTo(frame);
+  const mode = (typeof window !== "undefined" ? window.MODE : null) || "preview";
+  const [editStatus, setEditStatus] = React55.useState("");
+  const [sseConnected, setSseConnected] = React55.useState(false);
+  const [labelSceneInfo, setLabelSceneInfo] = React55.useState("");
+  const suppressReloadRef = React55.useRef(false);
+  React55.useEffect(() => {
+    let evtSource = null;
+    try {
+      evtSource = new EventSource("/api/events");
+      evtSource.onopen = () => setSseConnected(true);
+      evtSource.onmessage = (e) => {
+        try {
+          const msg = JSON.parse(e.data);
+          if (msg.type === "reload" && !suppressReloadRef.current) {
+            window.dispatchEvent(new Event("refresh-player"));
+          }
+        } catch {
+        }
+      };
+      evtSource.onerror = () => setSseConnected(false);
+    } catch {
+      setSseConnected(false);
+    }
+    return () => {
+      evtSource?.close();
+      setSseConnected(false);
     };
-  });
+  }, []);
   if (error49) {
-    return React47.createElement("div", {
-      style: { color: "red", padding: 40, fontFamily: "sans-serif" }
-    }, "Error: " + error49);
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { style: { color: "red", padding: 40, fontFamily: "sans-serif" }, children: [
+      "Error: ",
+      error49
+    ] });
   }
   if (!ready) {
-    return React47.createElement("div", {
-      style: { color: "#888", padding: 40, fontFamily: "sans-serif" }
-    }, "Loading...");
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { style: { color: "#888", padding: 40, fontFamily: "sans-serif" }, children: "Loading..." });
   }
   const width = data2.width || 1080;
   const height = data2.height || 1920;
-  return React47.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     "div",
     {
-      style: { width: "100%", height: "100%", background: "#000" }
-    },
-    React47.createElement(Player, {
-      ref: playerRef,
-      component: MarkCut,
-      inputProps: {
-        root: data2,
-        compose: {}
+      style: {
+        width: "100%",
+        height: "100%",
+        background: "#0a0a0a",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center"
       },
-      durationInFrames,
-      fps,
-      compositionWidth: width,
-      compositionHeight: height,
-      style: { width: "100%", height: "100%" },
-      controls: true,
-      showPlaybackRateControl: true,
-      allowFullscreen: true,
-      clickToPlay: false,
-      doubleClickToFullscreen: true,
-      autoPlay
-    })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          HeaderBar,
+          {
+            mode,
+            editStatus,
+            sseConnected,
+            sceneInfo: mode === "label" ? labelSceneInfo : void 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(VariantBar, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { id: "player-frame", style: { flex: 1, width: "100%", maxWidth: 480, minHeight: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          Player,
+          {
+            ref: playerRef,
+            component: MarkCut,
+            inputProps: { root: data2, compose: {} },
+            durationInFrames,
+            fps,
+            compositionWidth: width,
+            compositionHeight: height,
+            style: { width: "100%", height: "100%" },
+            controls: true,
+            showPlaybackRateControl: true,
+            allowFullscreen: true,
+            clickToPlay: false,
+            doubleClickToFullscreen: true,
+            autoPlay,
+            onFrameUpdate: handleFrameUpdate
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          SceneThumbnails,
+          {
+            currentTime,
+            onSeek: (t) => {
+              if (playerRef.current) {
+                const frame = Math.round(t * (data2?.fps ?? 30));
+                playerRef.current.seekTo(frame);
+              }
+            }
+          }
+        ),
+        mode === "edit" && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          EditControls,
+          {
+            onStatusChange: setEditStatus,
+            suppressReloadRef,
+            currentTime,
+            activeScene
+          }
+        ),
+        mode === "label" && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+          LabelControls,
+          {
+            playerRef,
+            currentTime,
+            onSceneChange: setLabelSceneInfo
+          }
+        )
+      ]
+    }
   );
 }
 var container2 = document.getElementById("root");
 if (container2) {
   const root2 = (0, import_client.createRoot)(container2);
-  root2.render(React47.createElement(PlayerApp));
+  root2.render(React55.createElement(PlayerApp));
 }
 /*! Bundled license information: