@lalalic/markcut 2.8.0 → 3.0.0

package/src/player/components/EditControls.tsx

@@ -17,11 +17,14 @@ interface EditControlsProps {
   currentTime?: number;
   /** Active scene name (sent with edit request for context) */
   activeScene?: string;
+  /** UI locale */
+  locale?: "en" | "zh";
 }
 
-export function EditControls({ onStatusChange, suppressReloadRef, currentTime, activeScene }: EditControlsProps) {
+export function EditControls({ onStatusChange, suppressReloadRef, currentTime, activeScene, locale = "en" }: EditControlsProps) {
   const [busy, setBusy] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const isZh = locale === "zh";
 
   // ── Edit submit ──────────────────────────────────────────────────────
   const handleApplyEdit = React.useCallback(
@@ -75,12 +78,12 @@ export function EditControls({ onStatusChange, suppressReloadRef, currentTime, a
       <input
         ref={inputRef}
         id="edit-input"
-        placeholder="What should change? e.g. make text bigger"
+        placeholder={isZh ? "想改什么？例如：把文字放大一些" : "What should change? e.g. make text bigger"}
         onKeyDown={handleKeyDown}
       />
       <button
         id="edit-btn"
-        title="Apply edit"
+        title={isZh ? "应用修改" : "Apply edit"}
         disabled={busy}
         onClick={() => handleApplyEdit(inputRef.current?.value || "")}
       >

package/src/player/components/EditMessagePanel.tsx

@@ -0,0 +1,96 @@
+/**
+ * EditMessagePanel — displays edit session messages chronologically.
+ *
+ * Shows user edit requests and assistant responses in a scrollable panel
+ * that can be minimized to a compact bar. Replaces the old one-line
+ * edit-status in the header.
+ */
+import * as React from "react";
+
+export interface EditEntry {
+  id: number;
+  request: string;
+  /** Accumulated assistant response text */
+  progress: string;
+  status: "thinking" | "done" | "error";
+  error?: string;
+}
+
+interface EditMessagePanelProps {
+  entries: EditEntry[];
+  minimized: boolean;
+  locale?: "en" | "zh";
+  onToggleMinimize: () => void;
+}
+
+export function EditMessagePanel({ entries, minimized, locale = "en", onToggleMinimize }: EditMessagePanelProps) {
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const isZh = locale === "zh";
+
+  // Auto-scroll to bottom when entries change
+  React.useEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [entries]);
+
+  // Minimized bar: show count + latest status
+  if (minimized) {
+    const latest = entries[entries.length - 1];
+    const label =
+      entries.length === 0
+        ? (isZh ? "✨ 编辑" : "✨ Edit")
+        : isZh
+          ? `✨ ${entries.length} 条编辑${latest?.status === "thinking" ? " ⏳" : ""}`
+          : `✨ ${entries.length} edit${entries.length > 1 ? "s" : ""}${latest?.status === "thinking" ? " ⏳" : ""}`;
+    return (
+      <button id="edit-message-bar" onClick={onToggleMinimize} title={isZh ? "显示编辑历史" : "Show edit history"}>
+        {label}
+      </button>
+    );
+  }
+
+  return (
+    <div id="edit-message-panel">
+      <div id="edit-message-header">
+        <span>{isZh ? "✨ 编辑历史" : "✨ Edit History"}</span>
+        <button
+          id="edit-message-minimize"
+          onClick={onToggleMinimize}
+          title={isZh ? "最小化" : "Minimize"}
+          aria-label={isZh ? "最小化编辑面板" : "Minimize edit panel"}
+        >
+          ─
+        </button>
+      </div>
+      <div id="edit-message-list" ref={listRef}>
+        {entries.length === 0 && (
+          <div className="edit-message-empty">{isZh ? "暂无编辑记录。请在下方输入修改请求。" : "No edits yet. Type a request below."}</div>
+        )}
+        {entries.map((entry) => (
+          <div key={entry.id} className={`edit-message-entry ${entry.status}`}>
+            <div className="edit-message-request">
+              <span className="edit-role">{isZh ? "你:" : "You:"}</span> {entry.request}
+            </div>
+            {entry.status === "thinking" && (
+              <div className="edit-message-thinking">
+                <span className="edit-role">{isZh ? "助手:" : "Assistant:"}</span> {isZh ? "思考中" : "Thinking"}
+                <span className="edit-dots"><span>.</span><span>.</span><span>.</span></span>
+              </div>
+            )}
+            {entry.status === "done" && entry.progress && (
+              <div className="edit-message-response">
+                <span className="edit-role">{isZh ? "助手:" : "Assistant:"}</span> {entry.progress}
+              </div>
+            )}
+            {entry.status === "error" && (
+              <div className="edit-message-error">
+                <span className="edit-role">{isZh ? "错误:" : "Error:"}</span> {entry.error || entry.progress || (isZh ? "编辑失败" : "Edit failed")}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/player/components/HeaderBar.tsx

@@ -12,18 +12,19 @@ interface HeaderBarProps {
   mode: string;
   /** Label mode scene info text (e.g. "slide1 (1.2s)") */
   sceneInfo?: string;
-  /** Edit mode status text (e.g. "✅ done", "⏳ editing...") */
-  editStatus?: string;
-  /** Edit mode: whether SSE is connected */
+  /** Whether SSE is connected */
   sseConnected?: boolean;
+  /** UI locale */
+  locale?: "en" | "zh";
 }
 
-export function HeaderBar({ mode, sceneInfo, editStatus, sseConnected }: HeaderBarProps) {
+export function HeaderBar({ mode, sceneInfo, sseConnected, locale = "en" }: HeaderBarProps) {
+  const isZh = locale === "zh";
   const handleClose = React.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>";
-  }, []);
+      `<div style='display:flex;align-items:center;justify-content:center;height:100vh;background:#0a0a0a;color:#555;font-family:sans-serif;font-size:16px'>\u2B61 ${isZh ? "播放器已关闭，返回终端" : "player closed — return to terminal"}</div>`;
+  }, [isZh]);
 
   return (
     <div id="header">
@@ -32,13 +33,10 @@ export function HeaderBar({ mode, sceneInfo, editStatus, sseConnected }: HeaderB
         {mode === "label" && sceneInfo && (
           <span id="scene-info">{sceneInfo}</span>
         )}
-        {mode === "edit" && editStatus && (
-          <span id="edit-status">{editStatus}</span>
-        )}
         {/* SSE indicator — shown in all modes */}
         <span
           id="sse-indicator"
-          title={sseConnected ? "Connected — auto-reload ready" : "Disconnected"}
+          title={sseConnected ? (isZh ? "已连接，可自动刷新" : "Connected — auto-reload ready") : (isZh ? "连接断开" : "Disconnected")}
           style={{
             display: "inline-block",
             width: 8,
@@ -51,7 +49,7 @@ export function HeaderBar({ mode, sceneInfo, editStatus, sseConnected }: HeaderB
       </span>
       {/* Right: close button */}
       <div id="header-actions">
-        <button id="close-btn" title="Close player and return to terminal" onClick={handleClose}>
+        <button id="close-btn" title={isZh ? "关闭播放器并返回终端" : "Close player and return to terminal"} onClick={handleClose}>
           ✕
         </button>
       </div>

package/src/player/components/index.ts

@@ -1,5 +1,6 @@
 export { HeaderBar } from "./HeaderBar";
 export { EditControls } from "./EditControls";
+export { EditMessagePanel } from "./EditMessagePanel";
 export { LabelControls } from "./LabelControls";
 export { SceneThumbnails } from "./SceneThumbnails";
 export { VariantBar } from "./VariantBar";

package/src/player/pipeline.mjs

@@ -33,7 +33,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // src/utils/index.ts
 function uid() {
-  return Math.random().toString(36).slice(2, 10);
+  const raw = Math.random().toString(36).slice(2, 10);
+  const first = raw[0];
+  if (/^[0-9]/.test(first)) {
+    const letter = String.fromCharCode(97 + Math.floor(Math.random() * 26));
+    return letter + raw;
+  }
+  return raw;
 }
 function walkDown(node2, visit, parent = null, depth = 0) {
   const keep = visit(node2, parent, depth);
@@ -207,7 +213,8 @@ function wrapWithEffects(node2, result, parentKind) {
   const absStart = innerStream.start ?? 0;
   const absEnd = innerStream.end ?? result.duration;
   const duration = absEnd - absStart;
-  const resetStream = {
+  const isBgNoEnd = innerStream.isBackground && innerStream.end == null;
+  const resetStream = isBgNoEnd ? { ...innerStream } : {
     ...innerStream,
     start: 0,
     end: duration,
@@ -224,28 +231,33 @@ function wrapWithEffects(node2, result, parentKind) {
       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 ? void 0 : effEnd,
+      visible: innerStream.visible ?? true,
       ...pickOn(node2)
     };
   }
   return { stream: currentStream, duration: result.duration };
 }
 function compileLeaf(node2, ctx, parentKind) {
-  const id = node2.id ?? uid();
+  const id = node2.id;
+  const hasExplicitId = node2.id != null;
   const hasOwnDuration = typeof node2.duration === "number" || typeof node2.endAt === "number";
   const isBgNoOwnTiming = node2.isBackground && !hasOwnDuration;
   const start = isBgNoOwnTiming ? typeof node2.start === "number" ? node2.start : void 0 : parentKind === "parallel" ? Math.max(0, node2.start ?? 0) : 0;
   const duration = isBgNoOwnTiming ? void 0 : deriveLeafDuration(node2, ctx);
   const end = duration != null ? start + duration : void 0;
   const base = {
-    id,
+    ...id ? { id } : {},
     style: node2.style,
     visible: node2.visible ?? true,
     isBackground: node2.isBackground,
@@ -305,8 +317,7 @@ function compileLeaf(node2, ctx, parentKind) {
       const bindings = {};
       for (const key of Object.keys(node2)) {
         if (!KNOWN_COMPONENT_KEYS.has(key)) {
-          const val = node2[key];
-          if (typeof val === "string") bindings[key] = val;
+          bindings[key] = node2[key];
         }
       }
       const stream = {
@@ -338,6 +349,8 @@ function compileLeaf(node2, ctx, parentKind) {
         zoom: node2.zoom ?? 10,
         center: node2.center,
         mapType: node2.mapType ?? "roadmap",
+        language: node2.language,
+        region: node2.region,
         travelMode: node2.travelMode ?? "DRIVING",
         routeMarker: node2.routeMarker ?? "\u{1F697}",
         googleMapsApiKey: ctx.googleMapsApiKey
@@ -405,13 +418,23 @@ function compileScene(node2, ctx, parentKind) {
   ];
   const sceneContentDuration = sceneKind === "parallel" ? aggregateDuration(compiledChildren, "parallel") : aggregateDuration(compiledChildren, sceneKind, resolved.time);
   const localDuration = Math.max(node2.duration ?? 0, sceneContentDuration);
-  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;
+  function backpropagate(stream2, dur) {
+    if (stream2.end == null) {
+      stream2.end = dur;
+      if (stream2.durationInSeconds == null) {
+        stream2.durationInSeconds = dur;
+      }
+      if (stream2.start == null) stream2.start = 0;
+    }
+    if (stream2.type === "effect" && Array.isArray(stream2.children)) {
+      for (const child of stream2.children) {
+        backpropagate(child, dur);
+      }
     }
   }
+  for (const c of compiledChildren) {
+    backpropagate(c.stream, localDuration);
+  }
   const start = parentKind === "parallel" ? Math.max(0, node2.start ?? 0) : 0;
   const end = start + localDuration;
   const stream = {
@@ -505,13 +528,23 @@ function compileContainer(node2, ctx, parentKind) {
   const resolved = node2.type === "transitionSeries" ? resolveTransition(node2.transition, node2.transitionTime) : { name: "fade", time: 0.5 };
   const children = compileChildren(node2.children, ctx, node2.type);
   const duration = aggregateDuration(children, node2.type, resolved.time);
-  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;
+  function backpropagate(stream2, dur) {
+    if (stream2.end == null) {
+      stream2.end = dur;
+      if (stream2.durationInSeconds == null) {
+        stream2.durationInSeconds = dur;
+      }
+      if (stream2.start == null) stream2.start = 0;
+    }
+    if (stream2.type === "effect" && Array.isArray(stream2.children)) {
+      for (const child of stream2.children) {
+        backpropagate(child, dur);
+      }
     }
   }
+  for (const c of children) {
+    backpropagate(c.stream, duration);
+  }
   const stream = {
     id,
     type: "folder",
@@ -1062,8 +1095,8 @@ var MAX_VIDEO_DURATION = Number(process.env.MARKCUT_MAX_VIDEO_DURATION) || 60;
 var MAX_VIDEO_DIMENSION = Number(process.env.MARKCUT_MAX_VIDEO_DIMENSION) || 360;
 var GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY || "";
 var DEFAULT_VTT_SAMPLE_INTERVAL = Number(process.env.MARKCUT_VTT_SAMPLE_INTERVAL) || 5;
-var DEFAULT_STT_CLI = args.cliOverrides.stt || process.env.MARKCUT_STT_CLI || 'uvx --from openai-whisper whisper "{input}" --output_format vtt --output_dir "{output}"';
-var DEFAULT_TTS_CLI = args.cliOverrides.tts || process.env.MARKCUT_TTS_CLI || 'uvx edge-tts --voice "en-US-GuyNeural" --text "{input}" --write-media "{output}"';
+var DEFAULT_STT_CLI = args.cliOverrides.stt || process.env.MARKCUT_STT_CLI || 'uvx --from openai-whisper whisper "{input}" --output_format vtt --output_dir "{output}" --word_timestamps True --max_line_count 1 --max_line_width 14';
+var DEFAULT_TTS_CLI = args.cliOverrides.tts || process.env.MARKCUT_TTS_CLI || 'uvx edge-tts --voice "zh-CN-YunxiNeural" --text "{input}" --write-media "{output}"';
 var DEFAULT_AGENT_CLI = args.cliOverrides.agent || process.env.MARKCUT_AGENT_CLI || "npx pi -p {prompt}";
 var DEFAULT_EDIT_CLI = args.cliOverrides.editCli || process.env.MARKCUT_EDIT_CLI || "npx pi --session-id {sessionid} --system-prompt {systemprompt} -p {prompt}";
 var DEFAULT_TTI_CLI = args.cliOverrides.tti || process.env.MARKCUT_TTI_CLI || 'uvx --from mflux mflux-generate-flux2 --model flux2-klein-4b --steps 2 --prompt "{input}" --output "{output}" --seed {seed}';
@@ -10120,6 +10153,7 @@ var TYPE_TOKENS = {
   video: "video",
   audio: "audio",
   component: "component",
+  event: "event",
   rhythm: "rhythm",
   include: "include",
   map: "map",
@@ -10339,6 +10373,21 @@ function parseNodeLine(content3, lineNum) {
       preserveVariantAttrs(node2, attrs);
       return node2;
     }
+    case "event": {
+      const node2 = {
+        type: "component",
+        id: attrs.id,
+        jsx: "",
+        duration: attrs.duration,
+        start: attrs.start,
+        instruction: attrs.instruction,
+        style: attrs.style,
+        effects: attrs.effects,
+        on: attrs.on
+      };
+      preserveVariantAttrs(node2, attrs);
+      return node2;
+    }
     case "rhythm": {
       const src = firstPositional ?? attrs.src;
       if (!src) throw new DslError("rhythm requires src", ctx);
@@ -10413,6 +10462,8 @@ function parseNodeLine(content3, lineNum) {
         zoom: attrs.zoom,
         center: attrs.center,
         mapType: attrs.mapType,
+        language: attrs.language ?? attrs.lang,
+        region: attrs.region,
         instruction: attrs.instruction,
         visible: attrs.visible,
         isBackground: attrs.isBackground,

package/src/player/server-shared.mjs

@@ -128,7 +128,10 @@ export function serveFile(req, res, filePath) {
   const ext = extname(filePath).toLowerCase();
   const mime = MIME[ext] || "application/octet-stream";
   const fileSize = statSync(filePath).size;
-  const cacheControl = (ext === ".js" || ext === ".html") ? "no-cache" : "public, max-age=3600";
+  // Dynamic authoring assets (vtt/json/html/js) must not be cached,
+  // otherwise subtitle edits can appear stale after refresh.
+  const noStoreExt = new Set([".js", ".html", ".json", ".vtt"]);
+  const cacheControl = noStoreExt.has(ext) ? "no-store" : "public, max-age=3600";
   const range = req.headers.range;
 
   if (range) {