@lalalic/markcut 2.9.0 → 3.0.0

package/src/descriptive/compiler.ts

@@ -448,15 +448,21 @@ function wrapWithEffects(
   const absEnd = innerStream.end ?? result.duration;
   const duration = absEnd - absStart;
 
-  // Reset inner stream's timing to be relative (start=0) so the effect
-  // wrapper owns the absolute timing. The EffectWrapper renders children
-  // with their relative timing inside its own Sequence.
-  const resetStream = {
-    ...innerStream,
-    start: 0,
-    end: duration,
-    durationInSeconds: duration,
-  } as any;
+  // For background nodes without explicit end, keep original timing
+  // (start/end undefined) so parent back-propagation fills the correct
+  // scene duration. The effect wrapper handles animation timing via
+  // durationInSeconds and the parent fills end for proper visibility span.
+  // Other nodes: reset to relative timing so the effect wrapper owns
+  // the absolute positioning in the parent timeline.
+  const isBgNoEnd = innerStream.isBackground && innerStream.end == null;
+  const resetStream = isBgNoEnd
+    ? { ...innerStream }
+    : {
+        ...innerStream,
+        start: 0,
+        end: duration,
+        durationInSeconds: duration,
+      } as any;
 
   // Build nested effect wrappers from innermost → outermost.
   // The outermost effect uses the original absolute timing;
@@ -476,14 +482,18 @@ function wrapWithEffects(
       id: uid(),
       type: "effect",
       animation: spec.animation,
+      animationDurationSeconds: spec.duration,
       durationInSeconds: spec.duration,
       animationTimingFunction: spec.animationTimingFunction,
       animationIterationCount: spec.animationIterationCount ?? 1,
       customKeyframes: spec.customKeyframes,
       children: [currentStream],
-      start: effStart,
-      end: effEnd,
-      visible: true,
+      // For background inner nodes: propagate start/end as-is so parent
+      // back-propagation fills the correct scene duration. The effect's
+      // durationInSeconds (animation spec) controls animation timing.
+      start: isOutermost && isBgNoEnd ? innerStream.start : effStart,
+      end: isOutermost && isBgNoEnd ? undefined : effEnd,
+      visible: innerStream.visible ?? true,
       ...pickOn(node),
     } as Effect;
   }
@@ -492,7 +502,10 @@ function wrapWithEffects(
 }
 
 function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | DescriptiveScene | DescriptiveInclude>, ctx: CompileContext, parentKind: "series" | "parallel" | "transitionSeries"): CompileResult {
-  const id = node.id ?? uid();
+  // Only set id when explicitly provided — auto-generated uids would register
+  // in EventContext and may create invalid JS identifiers (starting with digit).
+  const id = node.id;
+  const hasExplicitId = node.id != null;
 
   // Background nodes without explicit duration/endAt: let parent fill timing later
   const hasOwnDuration = typeof node.duration === "number" || typeof node.endAt === "number";
@@ -506,7 +519,7 @@ function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | Descr
   const end = duration != null ? start! + duration : undefined;
 
   const base = {
-    id,
+    ...(id ? { id } : {}),
     style: node.style,
     visible: node.visible ?? true,
     isBackground: node.isBackground,
@@ -557,11 +570,10 @@ function compileLeaf(node: Exclude<DescriptiveNode, DescriptiveContainer | Descr
         "type", "jsx", "id", "instruction", "style", "visible",
         "isBackground", "duration", "start", "on",
       ]);
-      const bindings: Record<string, string> = {};
+      const bindings: Record<string, unknown> = {};
       for (const key of Object.keys(node)) {
         if (!KNOWN_COMPONENT_KEYS.has(key)) {
-          const val = (node as any)[key];
-          if (typeof val === "string") bindings[key] = val;
+          bindings[key] = (node as any)[key];
         }
       }
 
@@ -690,14 +702,27 @@ function compileScene(
     : aggregateDuration(compiledChildren, sceneKind, resolved.time);
   const localDuration = Math.max(node.duration ?? 0, sceneContentDuration);
 
-  // Back-propagate parent duration to background children without own timing
-  for (const c of compiledChildren) {
-    if (c.stream.isBackground && c.stream.end == null) {
-      c.stream.end = localDuration;
-      c.stream.durationInSeconds = localDuration;
-      if (c.stream.start == null) c.stream.start = 0;
+  // Back-propagate parent duration to nodes without own timing.
+  // Also recurses into effect wrappers so nested background children
+  // (wrapped by effects) get the correct scene duration.
+  function backpropagate(stream: Record<string, any>, dur: number): void {
+    if (stream.end == null) {
+      stream.end = dur;
+      if (stream.durationInSeconds == null) {
+        stream.durationInSeconds = dur;
+      }
+      if (stream.start == null) stream.start = 0;
+    }
+    // Recursively walk into effect wrapper children
+    if (stream.type === "effect" && Array.isArray(stream.children)) {
+      for (const child of stream.children) {
+        backpropagate(child, dur);
+      }
     }
   }
+  for (const c of compiledChildren) {
+    backpropagate(c.stream, localDuration);
+  }
 
   const start = parentKind === "parallel" ? Math.max(0, node.start ?? 0) : 0;
   const end = start + localDuration;
@@ -837,14 +862,24 @@ function compileContainer(node: DescriptiveContainer, ctx: CompileContext, paren
   const children = compileChildren(node.children, ctx, node.type);
   const duration = aggregateDuration(children, node.type, resolved.time);
 
-  // Back-propagate parent duration to background children without own timing
-  for (const c of children) {
-    if (c.stream.isBackground && c.stream.end == null) {
-      c.stream.end = duration;
-      c.stream.durationInSeconds = duration;
-      if (c.stream.start == null) c.stream.start = 0;
+  // Back-propagate parent duration to nodes without own timing.
+  function backpropagate(stream: Record<string, any>, dur: number): void {
+    if (stream.end == null) {
+      stream.end = dur;
+      if (stream.durationInSeconds == null) {
+        stream.durationInSeconds = dur;
+      }
+      if (stream.start == null) stream.start = 0;
+    }
+    if (stream.type === "effect" && Array.isArray(stream.children)) {
+      for (const child of stream.children) {
+        backpropagate(child, dur);
+      }
     }
   }
+  for (const c of children) {
+    backpropagate(c.stream, duration);
+  }
 
   const stream: Folder = {
     id,

package/src/descriptive/markdown.ts

@@ -38,6 +38,7 @@ const TYPE_TOKENS: Record<string, string> = {
   video: "video",
   audio: "audio",
   component: "component",
+  event: "event",
   rhythm: "rhythm",
   include: "include",
   map: "map",
@@ -251,6 +252,23 @@ function parseNodeLine(content: string, lineNum?: number): DescriptiveNode {
       preserveVariantAttrs(node, attrs);
       return node;
     }
+    case "event": {
+      // Event-only stub: compiles to a component with empty JSX (renders nothing),
+      // just fires events on other registered components via `on`.
+      const node: DescriptiveComponent = {
+        type: "component",
+        id: attrs.id as any,
+        jsx: "",
+        duration: attrs.duration as any,
+        start: attrs.start as any,
+        instruction: attrs.instruction as any,
+        style: attrs.style as any,
+        effects: attrs.effects as any,
+        on: attrs.on as any,
+      };
+      preserveVariantAttrs(node, attrs);
+      return node;
+    }
     case "rhythm": {
       const src = firstPositional ?? (attrs.src as string | undefined);
       if (!src) throw new DslError("rhythm requires src", ctx);

package/src/player/bundle/player.js

@@ -122,7 +122,7 @@ var require_react_production = __commonJS({
     function cloneAndReplaceKey(oldElement, newKey) {
       return ReactElement(oldElement.type, newKey, oldElement.props);
     }
-    function isValidElement(object4) {
+    function isValidElement2(object4) {
       return "object" === typeof object4 && null !== object4 && object4.$$typeof === REACT_ELEMENT_TYPE;
     }
     function escape3(key) {
@@ -189,7 +189,7 @@ var require_react_production = __commonJS({
       if (invokeCallback)
         return callback = callback(children2), invokeCallback = "" === nameSoFar ? "." + getElementKey(children2, 0) : nameSoFar, isArrayImpl(callback) ? (escapedPrefix = "", null != invokeCallback && (escapedPrefix = invokeCallback.replace(userProvidedKeyEscapeRegex, "$&/") + "/"), mapIntoArray(callback, array5, escapedPrefix, "", function(c5) {
           return c5;
-        })) : null != callback && (isValidElement(callback) && (callback = cloneAndReplaceKey(
+        })) : null != callback && (isValidElement2(callback) && (callback = cloneAndReplaceKey(
           callback,
           escapedPrefix + (null == callback.key || children2 && children2.key === callback.key ? "" : ("" + callback.key).replace(
             userProvidedKeyEscapeRegex,
@@ -298,7 +298,7 @@ var require_react_production = __commonJS({
         }) || [];
       },
       only: function(children2) {
-        if (!isValidElement(children2))
+        if (!isValidElement2(children2))
           throw Error(
             "React.Children.only expected to receive a single React element child."
           );
@@ -385,7 +385,7 @@ var require_react_production = __commonJS({
     exports2.forwardRef = function(render8) {
       return { $$typeof: REACT_FORWARD_REF_TYPE, render: render8 };
     };
-    exports2.isValidElement = isValidElement;
+    exports2.isValidElement = isValidElement2;
     exports2.lazy = function(ctor) {
       return {
         $$typeof: REACT_LAZY_TYPE,
@@ -225416,10 +225416,100 @@ var mermaid_default = mermaid;
 // src/components/Mermaid.tsx
 var import_jsx_runtime60 = __toESM(require_jsx_runtime(), 1);
 var initialized = false;
-function Mermaid({ children: children2, source = children2, theme = "dark", className: className2 }) {
+function extractText(x7) {
+  if (typeof x7 === "string") return x7;
+  if (Array.isArray(x7)) return x7.map(extractText).join("");
+  if (x7 && typeof x7 === "object" && "props" in x7) {
+    return extractText(x7.props?.children);
+  }
+  return "";
+}
+function findNodeGroup(svg4, name2) {
+  const byId = svg4.querySelector(`[id*="-${CSS.escape(name2)}-"]`);
+  if (byId) {
+    let el = byId;
+    while (el && el.tagName !== "g") el = el.parentElement;
+    return el || byId;
+  }
+  for (const t4 of svg4.querySelectorAll("text")) {
+    const text10 = t4.textContent?.trim() ?? "";
+    if (text10.startsWith(name2)) {
+      let el = t4;
+      while (el && el.tagName !== "g") el = el.parentElement;
+      return el || t4;
+    }
+  }
+  for (const t4 of svg4.querySelectorAll("title")) {
+    if ((t4.textContent?.trim() ?? "").startsWith(name2) && t4.parentElement) {
+      return t4.parentElement;
+    }
+  }
+  return null;
+}
+function applyEdgeAnimation(svg4, spec) {
+  if (!spec) return;
+  const allEdges = Array.from(svg4.querySelectorAll(
+    'path[id*="-L_"]'
+  ));
+  if (spec === true) {
+    for (const path5 of allEdges) {
+      path5.classList.add("edge-animated");
+    }
+    return;
+  }
+  for (const pattern of spec) {
+    const match3 = pattern.match(/^(\w+)\s*->\s*(\w+)$/);
+    if (!match3) continue;
+    const source = match3[1];
+    const target = match3[2];
+    const suffix = `L_${source}_${target}_`;
+    for (const path5 of allEdges) {
+      if (path5.id.includes(suffix)) {
+        path5.classList.add("edge-animated");
+      }
+    }
+  }
+}
+function Mermaid({
+  children: children2,
+  source: sourceProp,
+  theme = "dark",
+  className: className2,
+  style: style4,
+  highlight,
+  animateEdges
+}) {
   const ref2 = React8.useRef(null);
-  const [handle2] = React8.useState(() => delayRender("Mermaid rendering"));
+  const renderedRef = React8.useRef(false);
+  const styleRef = React8.useRef(null);
   React8.useEffect(() => {
+    if (!styleRef.current) {
+      const el = document.createElement("style");
+      el.textContent = `
+        @keyframes mermaid-edge-flow {
+          to { stroke-dashoffset: -24; }
+        }
+        .edge-animated {
+          stroke-dasharray: 8 6 !important;
+          animation: mermaid-edge-flow 0.5s linear infinite !important;
+        }
+      `;
+      document.head.appendChild(el);
+      styleRef.current = el;
+    }
+    return () => {
+      if (styleRef.current) {
+        styleRef.current.remove();
+        styleRef.current = null;
+      }
+    };
+  }, []);
+  const source = React8.useMemo(
+    () => extractText(sourceProp ?? children2),
+    [sourceProp, children2]
+  );
+  React8.useEffect(() => {
+    let cancelled = false;
     if (!source || !ref2.current) return;
     if (!initialized) {
       mermaid_default.initialize({
@@ -225431,52 +225521,186 @@ function Mermaid({ children: children2, source = children2, theme = "dark", clas
     }
     const id39 = "mmd-" + Math.random().toString(36).slice(2, 10);
     mermaid_default.render(id39, source).then((result) => {
-      if (ref2.current) ref2.current.innerHTML = result.svg;
-      continueRender(handle2);
+      if (cancelled || !ref2.current) return;
+      ref2.current.innerHTML = result.svg;
+      const svg4 = ref2.current.querySelector("svg");
+      if (svg4) {
+        svg4.removeAttribute("width");
+        svg4.removeAttribute("height");
+        svg4.style.width = "100%";
+        svg4.style.height = "100%";
+        if (highlight) {
+          const names = Array.isArray(highlight) ? highlight : [highlight];
+          for (const name2 of names) {
+            const node3 = findNodeGroup(svg4, name2);
+            if (node3) node3.classList.add("highlight");
+          }
+        }
+        applyEdgeAnimation(svg4, animateEdges);
+      }
+      renderedRef.current = true;
     }).catch((err) => {
+      if (cancelled) return;
       console.error("Mermaid error:", err);
       if (ref2.current) {
         ref2.current.innerHTML = `<div style="color:#f87171;padding:1em;border:2px dashed #f87171;border-radius:8px;font-family:monospace;font-size:14px;">
             <strong>\u26A0 Mermaid Error</strong><br/>${String(err).replace(/</g, "&lt;").replace(/>/g, "&gt;")}
           </div>`;
       }
-      continueRender(handle2);
     });
-  }, [source, theme, handle2]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    "div",
-    {
-      ref: ref2,
-      className: className2
+    return () => {
+      cancelled = true;
+    };
+  }, [source, theme]);
+  React8.useEffect(() => {
+    const svg4 = ref2.current?.querySelector("svg");
+    if (!svg4) return;
+    svg4.querySelectorAll(".highlight").forEach((el) => {
+      el.classList.remove("highlight");
+    });
+    const names = Array.isArray(highlight) ? highlight : highlight ? [highlight] : [];
+    for (const name2 of names) {
+      const node3 = findNodeGroup(svg4, name2);
+      if (node3) {
+        node3.classList.add("highlight");
+      }
     }
-  );
+  }, [highlight]);
+  React8.useEffect(() => {
+    const svg4 = ref2.current?.querySelector("svg");
+    if (!svg4) return;
+    svg4.querySelectorAll(".edge-animated").forEach((el) => {
+      el.classList.remove("edge-animated");
+    });
+    applyEdgeAnimation(svg4, animateEdges);
+  }, [animateEdges]);
+  const containerStyle3 = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    ...style4
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref: ref2, className: className2, style: containerStyle3 });
 }
 
 // src/components/Markdown.tsx
 var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
-function Markdown2({ children: children2, source = children2, className: className2, plugins, components: components3 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: className2, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var ListCtx = React9.createContext([]);
+function OrderedList({
+  children: children2,
+  ...props
+}) {
+  const hl = React9.useContext(ListCtx);
+  const items = React9.Children.toArray(children2).filter(
+    (c5) => React9.isValidElement(c5) && c5.type === "li"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ol", { ...props, children: items.map((child, i5) => {
+    if (hl.includes(i5)) {
+      return React9.cloneElement(child, { className: "highlight-list-item", key: child.key });
+    }
+    return child;
+  }) });
+}
+function UnorderedList({
+  children: children2,
+  ...props
+}) {
+  const hl = React9.useContext(ListCtx);
+  const items = React9.Children.toArray(children2).filter(
+    (c5) => React9.isValidElement(c5) && c5.type === "li"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ul", { ...props, children: items.map((child, i5) => {
+    if (hl.includes(i5)) {
+      return React9.cloneElement(child, { className: "highlight-list-item", key: child.key });
+    }
+    return child;
+  }) });
+}
+function Markdown2({
+  children: children2,
+  source = children2,
+  className: className2,
+  plugins,
+  components: propComponents,
+  highlight
+}) {
+  const hl = React9.useMemo(() => highlight ?? [], [highlight]);
+  React9.useEffect(() => {
+    const id39 = "markcut-markdown-defaults";
+    if (document.getElementById(id39)) return;
+    const el = document.createElement("style");
+    el.id = id39;
+    el.textContent = `
+      .highlight-list-item {
+        background: rgba(255, 215, 0, 0.15);
+        border-left: 3px solid #ffd700;
+        padding-left: 8px;
+        border-radius: 0 4px 4px 0;
+      }
+      .slide {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 24px;
+        text-align: center;
+      }
+      .slide h1 { font-size: 2em; margin: 0.4em 0; font-weight: 700; }
+      .slide h2 { font-size: 1.6em; margin: 0.35em 0; font-weight: 600; }
+      .slide h3 { font-size: 1.3em; margin: 0.3em 0; font-weight: 600; }
+      .slide p { margin: 0.6em 0; line-height: 1.6; }
+      .slide ul, .slide ol { margin: 0.5em 0; padding-left: 1.5em; text-align: left; }
+      .slide li { margin: 0.3em 0; }
+      .slide blockquote {
+        margin: 0.6em 0;
+        padding: 0.4em 1em;
+        border-left: 3px solid rgba(255,255,255,.3);
+        font-style: italic;
+        opacity: .85;
+      }
+      .slide code {
+        background: rgba(255,255,255,.08);
+        padding: 0.15em 0.4em;
+        border-radius: 4px;
+        font-size: 0.9em;
+      }
+      .slide pre { margin: 0.6em 0; text-align: left; width: 100%; }
+      .slide a { color: #4a9eff; text-decoration: none; }
+      .slide a:hover { text-decoration: underline; }
+    `;
+    document.head.appendChild(el);
+    return () => {
+      document.getElementById(id39)?.remove();
+    };
+  }, []);
+  const mergedComponents = React9.useMemo(
+    () => ({
+      ...propComponents,
+      ol: OrderedList,
+      ul: UnorderedList,
+      pre: ({ children: preChildren }) => {
+        const code4 = React9.Children.toArray(preChildren)[0];
+        if (code4?.props?.className === "language-mermaid") {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Mermaid, { source: String(code4.props.children) });
+        }
+        if (propComponents?.pre) {
+          return propComponents.pre({ children: preChildren });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("pre", { children: preChildren });
+      }
+    }),
+    [propComponents]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ListCtx.Provider, { value: hl, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: className2, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Markdown,
     {
       remarkPlugins: React9.useMemo(() => [remarkGfm, ...plugins || []], [plugins]),
-      components: React9.useMemo(
-        () => ({
-          ...components3,
-          pre: ({ children: children3 }) => {
-            const code4 = React9.Children.toArray(children3)[0];
-            if (code4?.props?.className === "language-mermaid") {
-              return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Mermaid, { source: String(code4.props.children) });
-            } else if (components3.pre) {
-              return components3.pre({ children: children3 });
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("pre", { children: children3 });
-          }
-        }),
-        [components3]
-      ),
+      components: mergedComponents,
       children: source
     }
-  ) });
+  ) }) });
 }
 
 // src/utils/component-import-map.ts
@@ -225588,6 +225812,8 @@ function EventProvider({ children: children2 }) {
     const keys4 = Object.keys(scope);
     const vals = Object.values(scope);
     try {
+      const codeChars = Array.from(code4).map((c5) => c5.charCodeAt(0));
+      console.log(`EventContext.debug: keys=${JSON.stringify(keys4)}, codeLen=${code4.length}, codeChars=${JSON.stringify(codeChars)}, codeStr=${JSON.stringify(code4)}`);
       const fn3 = new Function(...keys4, code4);
       fn3(...vals);
       console.info(`Event evaluation succeeded: "${code4}"`);
@@ -227900,7 +228126,13 @@ var clockWipe = (props) => {
 
 // src/utils/index.ts
 function uid() {
-  return Math.random().toString(36).slice(2, 10);
+  const raw = Math.random().toString(36).slice(2, 10);
+  const first3 = raw[0];
+  if (/^[0-9]/.test(first3)) {
+    const letter = String.fromCharCode(97 + Math.floor(Math.random() * 26));
+    return letter + raw;
+  }
+  return raw;
 }
 var KEBAB = /[^a-zA-Z0-9_-]+/g;
 function toClassName(s3) {
@@ -227966,7 +228198,7 @@ function getDurationInSeconds(stream3, update2 = true) {
   for (const child of stream3.children) {
     getDurationInSeconds(child, update2);
   }
-  const visible = stream3.children.filter((c5) => !c5.isBackground);
+  const visible = stream3.type === "effect" ? stream3.children : stream3.children.filter((c5) => !c5.isBackground);
   if (stream3.isSeries) {
     const overlap = stream3.transition ? stream3.transitionTime ?? 0.5 : 0;
     for (let i5 = 0; i5 < visible.length; i5++) {
@@ -239667,7 +239899,30 @@ function ComponentLeaf({ stream: stream3 }) {
     () => ({ ...components3, ...stream3.data, ...eventState }),
     [stream3.data, components3, eventState]
   );
-  if (!stream3.jsx) return null;
+  if (!stream3.jsx) {
+    const start5 = stream3.start ?? 0;
+    const end3 = stream3.end ?? start5 + (stream3.duration ?? 1);
+    const durFrames2 = Math.max(1, Math.floor(fps * (end3 - start5)));
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      Sequence,
+      {
+        durationInFrames: durFrames2,
+        from: Math.floor(fps * start5),
+        layout: "none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          EventAwareComponent,
+          {
+            jsx: "",
+            components: components3,
+            data: bindings,
+            action: { start: start5, end: end3 },
+            durFrames: durFrames2,
+            on: stream3.on
+          }
+        )
+      }
+    );
+  }
   const start4 = stream3.start ?? 0;
   const end2 = stream3.end ?? start4 + (stream3.duration ?? 1);
   const durFrames = Math.max(1, Math.floor(fps * (end2 - start4)));
@@ -239700,6 +239955,7 @@ function EventAwareComponent({
   on: on3
 }) {
   useFrameEvents(on3, durFrames);
+  if (!jsx84) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     TweenedJsxParser,
     {
@@ -242999,15 +243255,17 @@ function EffectWrapper({
     const end2 = Math.ceil(endSec * fps);
     const durationInFrames = end2 - start4;
     if (durationInFrames <= 0) return [];
+    const animDurationSec = stream3.animationDurationSeconds ?? stream3.durationInSeconds ?? durationInFrames / fps;
+    const animDurationFrames = Math.ceil(animDurationSec * fps);
     const animation2 = stream3.animation;
     const timingFn = stream3.animationTimingFunction;
     const iterCount = stream3.animationIterationCount ?? 1;
     const style4 = cssJS(stream3.style) ?? {};
     let currentFrame = frame2;
-    if (iterCount > 0 && durationInFrames > 0) {
-      const iteration = Math.floor((frame2 - start4) / durationInFrames);
+    if (iterCount > 0 && animDurationFrames > 0) {
+      const iteration = Math.floor((frame2 - start4) / animDurationFrames);
       if (iteration < iterCount) {
-        currentFrame = start4 + (frame2 - start4) % durationInFrames;
+        currentFrame = start4 + (frame2 - start4) % animDurationFrames;
       }
     }
     if (currentFrame >= start4 && currentFrame < end2) {
@@ -243017,7 +243275,7 @@ function EffectWrapper({
         if (config4) {
           const animStyle = interpolateKeyframes(config4, actionFrame, {
             fps,
-            durationInSeconds: durationInFrames / fps,
+            durationInSeconds: animDurationSec,
             timingFunction: timingFn
           });
           if (animStyle) Object.assign(style4, animStyle);
@@ -243025,7 +243283,7 @@ function EffectWrapper({
       }
     }
     return Object.keys(style4).length > 0 ? [style4] : [];
-  }, [frame2, fps, startSec, endSec, stream3.animation, stream3.animationTimingFunction, stream3.animationIterationCount, stream3.customKeyframes, stream3.style]);
+  }, [frame2, fps, startSec, endSec, stream3.animation, stream3.animationTimingFunction, stream3.animationIterationCount, stream3.customKeyframes, stream3.style, stream3.animationDurationSeconds, stream3.durationInSeconds]);
   if (styles7.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_jsx_runtime92.Fragment, { children: children2 });
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     "div",
@@ -243070,7 +243328,7 @@ function FolderLeaf({ stream: stream3 }) {
   const isRoot = stream3.id === "root";
   const visibleChildren = stream3.children.filter((c5) => c5.visible !== false);
   const bgChildren = visibleChildren.filter((c5) => c5.isBackground);
-  const seriesChildren = isSeries ? visibleChildren.filter((c5) => !c5.isBackground) : visibleChildren;
+  const seriesChildren = visibleChildren.filter((c5) => !c5.isBackground);
   const allAudio = seriesChildren.length > 0 && seriesChildren.every((c5) => c5.type === "audio");
   const effectiveTransition = allAudio ? void 0 : transition2;
   const TypedSeries = React47.useMemo(() => {
@@ -257457,11 +257715,12 @@ var image3 = base.extend({
 var component2 = 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")
+  data: external_exports.record(external_exports.string(), external_exports.unknown()).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"),
   animation: external_exports.string().optional().describe("builtin keyframe name or 'custom'"),
+  animationDurationSeconds: external_exports.number().optional().describe("animation duration (separate from wrapper durationInSeconds which getDurationInSeconds may overwrite)"),
   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" } }'),