@lalalic/markcut 1.1.1 → 2.0.0

package/src/types/Include.tsx

@@ -104,17 +104,20 @@ function useSubVideoRegistry(importsUrl: string | undefined):
  * registered by the sub-video are available during its rendering.
  *
  * Usage:
- *   { type: "include", src: "./path/to/video.json", actions: [{ start: 0, end: 5 }] }
+ *   { type: "include", src: "./path/to/video.json", start: 0, end: 5 }
  */
 export function IncludeLeaf({ stream }: { stream: IncludeStream }) {
   const { fps: parentFps, width: parentWidth, height: parentHeight } = useVideoConfig();
   const parentCompose = React.useContext(ComposeContext);
   const { Container } = parentCompose;
   const parentAudio = React.useContext(AudioContext);
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const start = stream.start ?? 0;
+  const end = stream.end ?? (stream.durationInSeconds ?? (start + (stream.duration ?? 1)));
+  const totalDur = stream.durationInSeconds ?? end;
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * parentFps)));
 
-  if (!stream.actions?.length) return null;
+  const hasContent = !!stream.src || (stream.children?.length ?? 0) > 0;
+  if (!hasContent) return null;
 
   // ── External JSON loading ─────────────────────────────────────────────
   const [externalData, setExternalData] = React.useState<unknown | null>(null);
@@ -296,87 +299,78 @@ export function IncludeLeaf({ stream }: { stream: IncludeStream }) {
     );
   }, [externalData, loadError, parentFps, parentWidth, parentHeight]);
 
-  // ── Action-based rendering ───────────────────────────────────────
-  const renderAction = (a: IncludeStream["actions"][number]) => {
-    const start = a.start ?? 0;
-    const end = a.end ?? (stream.durationInSeconds ?? start + 1);
-    const dur = Math.max(0.1, end - start);
-    const durFrames = Math.max(1, Math.floor(parentFps * dur));
-
-    // ── Inline children fallback (legacy) ─────────────────────────
-    if (!stream.src && stream.children?.length) {
-      return (
-        <Sequence
-          key={a.id}
-          durationInFrames={durFrames}
-          from={Math.floor(parentFps * start)}
-          layout="none"
-          showInTimeline={false}
-        >
-          <Container
-            id={stream.id}
-            type="include"
-            style={{
-              ...cssJS(stream.style) as React.CSSProperties,
-              width: parentWidth,
-              height: parentHeight,
-              overflow: "hidden",
-              position: "relative",
-            }}
-            className={`include ${toClassName(stream.id ?? "")}`}
-          >
-            <FolderLeaf stream={stream as any} />
-          </Container>
-        </Sequence>
-      );
-    }
-
-    // ── External src rendering ─────────────────────────────────────
-    return (
-      <Sequence
-        key={a.id}
-        durationInFrames={durFrames}
-        from={Math.floor(parentFps * start)}
-        layout="none"
-        showInTimeline={false}
+  // ── Single-span rendering ────────────────────────────────────────
+  const dur = Math.max(0.1, end - start);
+  const durFrames = Math.max(1, Math.floor(parentFps * dur));
+
+  // ── Inline children fallback (legacy) ─────────────────────────
+  let innerNode: React.ReactNode;
+  if (!stream.src && stream.children?.length) {
+    innerNode = (
+      <Container
+        id={stream.id}
+        type="include"
+        style={{
+          ...cssJS(stream.style) as React.CSSProperties,
+          width: parentWidth,
+          height: parentHeight,
+          overflow: "hidden",
+          position: "relative",
+        }}
+        className={`include ${toClassName(stream.id ?? "")}`}
       >
-        {externalData || loadError ? (
-          <div
-            style={{
-              width: parentWidth,
-              height: parentHeight,
-              overflow: "hidden",
-              position: "relative",
-            }}
-          >
-            {renderExternalContent()}
-          </div>
-        ) : (
-          <div
-            style={{
-              width: parentWidth,
-              height: parentHeight,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "#666",
-              fontSize: 20,
-              fontFamily: "monospace",
-            }}
-          >
-            Loading… {stream.src}
-          </div>
-        )}
-      </Sequence>
+        <FolderLeaf stream={stream as any} />
+      </Container>
     );
-  };
+  } else if (externalData || loadError) {
+    innerNode = (
+      <div
+        style={{
+          width: parentWidth,
+          height: parentHeight,
+          overflow: "hidden",
+          position: "relative",
+        }}
+      >
+        {renderExternalContent()}
+      </div>
+    );
+  } else {
+    innerNode = (
+      <div
+        style={{
+          width: parentWidth,
+          height: parentHeight,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#666",
+          fontSize: 20,
+          fontFamily: "monospace",
+        }}
+      >
+        Loading… {stream.src}
+      </div>
+    );
+  }
+
+  const sequence = (
+    <Sequence
+      durationInFrames={durFrames}
+      from={Math.floor(parentFps * start)}
+      layout="none"
+      showInTimeline={false}
+    >
+      {innerNode}
+    </Sequence>
+  );
 
   // ── Determine if we need a nested ComposeContext ───────────────────
   const needsNestedContext = subRegistry !== null && subRegistry !== parentCompose.components;
 
   const inner = (
     <AudioContext.Provider value={audioCtx as any}>
-      {stream.actions.map(renderAction)}
+      {sequence}
     </AudioContext.Provider>
   );
 

package/src/types/Map.tsx

@@ -15,7 +15,7 @@
  *     travelMode: "DRIVING",        // DRIVING | WALKING | BICYCLING
  *     mapType: "roadmap",           // roadmap | satellite | hybrid | terrain
  *     routeMarker: "🚗",            // emoji/char for animated pin
- *     actions: [{ start: 0, end: 5 }]
+ *     start: 0, end: 5
  *   }
  */
 import React from "react";
@@ -27,7 +27,17 @@ import {
 } from "@vis.gl/react-google-maps";
 import type { MapStream } from "../schema/index";
 
-const GM_API_KEY = process.env.GOOGLE_MAPS_API_KEY || "";
+// API key is injected by the compiler onto the stream node (see compileLeaf in compiler.ts).
+// This fallback handles the case where Map.tsx is used directly without the compiler.
+function resolveApiKey(stream: MapStream): string {
+  if (stream.googleMapsApiKey) return stream.googleMapsApiKey;
+  // Safe fallback for Node.js contexts (e.g. remotion render without compiler).
+  // In the browser player the key is always pre-stamped by the server-side compiler.
+  if (typeof process !== "undefined" && typeof process.env !== "undefined" && process.env.GOOGLE_MAPS_API_KEY) {
+    return process.env.GOOGLE_MAPS_API_KEY;
+  }
+  return "";
+}
 
 // ============================================================
 // MapLeaf — entry point, renders each action as a Sequence
@@ -35,52 +45,46 @@ const GM_API_KEY = process.env.GOOGLE_MAPS_API_KEY || "";
 export function MapLeaf({ stream }: { stream: MapStream }) {
   const { fps } = useVideoConfig();
   const waypoints = stream.waypoints ?? [];
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const start = stream.start ?? 0;
+  const end = stream.end ?? start + (stream.duration ?? 1);
+  const totalDur = stream.durationInSeconds ?? end;
+  const apiKey = resolveApiKey(stream);
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
   if (waypoints.length === 0) return null;
 
+  const durFrames = Math.max(1, Math.floor(fps * (end - start)));
+  const center = stream.center ?? { lat: waypoints[0].lat, lng: waypoints[0].lng };
+  const zoom = stream.zoom ?? 10;
+  const mapType = stream.mapType ?? "roadmap";
+  const travelMode = stream.travelMode ?? "DRIVING";
+  const markerEmoji = stream.routeMarker ?? "🚗";
   return (
-    <>
-      {stream.actions?.map((a, i) => {
-        const start = a.start ?? 0;
-        const end = a.end ?? start + 1;
-        const durFrames = Math.max(1, Math.floor(fps * (end - start)));
-        const center = stream.center ?? { lat: waypoints[0].lat, lng: waypoints[0].lng };
-        const zoom = stream.zoom ?? 10;
-        const mapType = stream.mapType ?? "roadmap";
-        const travelMode = stream.travelMode ?? "DRIVING";
-        const markerEmoji = stream.routeMarker ?? "🚗";
-        return (
-          <Sequence
-            key={a.id ?? i}
-            durationInFrames={durFrames}
-            from={Math.floor(fps * start)}
-            layout="none"
-          >
-            <APIProvider apiKey={GM_API_KEY}>
-              <GoogleMap
-                mapId={String(stream.id ?? i)}
-                defaultCenter={center}
-                defaultZoom={zoom}
-                defaultOptions={{
-                  mapTypeId: mapType,
-                  disableDefaultUI: true,
-                  zoomControl: false,
-                }}
-                style={{ width: "100%", height: "100%", position: "absolute" }}
-              >
-                <RouteWithMarker
-                  waypoints={waypoints}
-                  travelMode={travelMode}
-                  markerEmoji={markerEmoji}
-                  actionDuration={end - start}
-                />
-              </GoogleMap>
-            </APIProvider>
-          </Sequence>
-        );
-      })}
-    </>
+    <Sequence
+      durationInFrames={durFrames}
+      from={Math.floor(fps * start)}
+      layout="none"
+    >
+      <APIProvider apiKey={apiKey}>
+        <GoogleMap
+          mapId={String(stream.id ?? "map")}
+          defaultCenter={center}
+          defaultZoom={zoom}
+          defaultOptions={{
+            mapTypeId: mapType,
+            disableDefaultUI: true,
+            zoomControl: false,
+          }}
+          style={{ width: "100%", height: "100%", position: "absolute" }}
+        >
+          <RouteWithMarker
+            waypoints={waypoints}
+            travelMode={travelMode}
+            markerEmoji={markerEmoji}
+            actionDuration={end - start}
+          />
+        </GoogleMap>
+      </APIProvider>
+    </Sequence>
   );
 }
 

package/src/types/Rhythm.tsx

@@ -21,38 +21,30 @@ function resolveAudioSrc(src: string): string {
 export function RhythmLeaf({ stream }: { stream: Rhythm }) {
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const start = stream.start ?? 0;
+  const end = stream.end ?? start + (stream.duration ?? 1);
+  const totalDur = stream.durationInSeconds ?? end;
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
 
   if (!stream.src || environment.isStudio) return null;
 
   const resolvedSrc = resolveAudioSrc(stream.src);
-
+  const volume = stream.volume ?? 1;
   return (
-    <>
-      {stream.actions.map((a) => {
-        const start = a.start ?? 0;
-        const end = a.end ?? start + 1;
-        const volume = a.volume ?? stream.volume ?? 1;
-        return (
-          <Sequence
-            key={a.id}
-            name={stream.src ?? "rhythm"}
-            durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
-            from={Math.floor(fps * start)}
-            layout="none"
-            showInTimeline={false}
-          >
-            <RemotionAudio
-              src={resolvedSrc}
-              muted={volume === 0}
-              volume={volume}
-              loop
-              showInTimeline={false}
-            />
-          </Sequence>
-        );
-      })}
-    </>
+    <Sequence
+      name={stream.src ?? "rhythm"}
+      durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
+      from={Math.floor(fps * start)}
+      layout="none"
+      showInTimeline={false}
+    >
+      <RemotionAudio
+        src={resolvedSrc}
+        muted={volume === 0}
+        volume={volume}
+        loop
+        showInTimeline={false}
+      />
+    </Sequence>
   );
 }

package/src/types/Video.tsx

@@ -13,58 +13,51 @@ import { FrameSyncStyle } from "./FrameSyncStyle";
 export function VideoLeaf({ stream }: { stream: Video }) {
   const { fps } = useVideoConfig();
   const audio = React.useContext(AudioContext);
-  const totalDur = stream.durationInSeconds ?? stream.actions[0]?.end ?? 1;
+  const start = stream.start ?? 0;
+  const end = stream.end ?? start + (stream.duration ?? 1);
+  const totalDur = stream.durationInSeconds ?? end;
   useFrameEvents(stream.on, Math.max(1, Math.floor(totalDur * fps)));
   if (!stream.src) return null;
   const resolvedSrc = resolveVideoSrc(stream.src);
 
+  const startFrom = stream.startFrom ?? 0;
+  const endAt = stream.endAt ?? totalDur;
+  const volume = stream.volume ?? 1;
+  const playbackRate = stream.loop ? 1 : Math.min(1, toPlaybackRate((endAt - startFrom) / (end - start)));
+  const streamStyle = cssJS(stream.style);
+  const hasAnimation = "animation" in streamStyle;
   return (
-    <>
-      {stream.actions.map((a) => {
-        const start = a.start ?? 0;
-        const end = a.end ?? start + 1;
-        const startFrom = a.startFrom ?? 0;
-        const endAt = a.endAt ?? stream.durationInSeconds ?? end - start;
-        const volume = a.volume ?? stream.volume ?? 1;
-        const playbackRate = a.loop ? 1 : Math.min(1, toPlaybackRate((endAt - startFrom) / (end - start)));
-        const actionStyle = cssJS(a.style);
-        const hasAnimation = "animation" in actionStyle;
-        return (
-          <Sequence
-            key={a.id}
-            durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
-            from={Math.floor(fps * start)}
-            layout="none"
+    <Sequence
+      durationInFrames={Math.max(1, Math.floor(fps * (end - start)))}
+      from={Math.floor(fps * start)}
+      layout="none"
+      showInTimeline={false}
+    >
+      {hasAnimation ? (
+        <FrameSyncStyle style={streamStyle}>
+          <OffthreadVideo
+            src={resolvedSrc}
+            startFrom={Math.floor(startFrom * fps)}
+            endAt={Math.floor(startFrom * fps) + Math.floor(((endAt - startFrom) * fps) / playbackRate)}
+            muted={volume === 0 || !!audio?.foreground}
+            volume={volume}
+            playbackRate={playbackRate}
             showInTimeline={false}
-          >
-            {hasAnimation ? (
-              <FrameSyncStyle style={actionStyle}>
-                <OffthreadVideo
-                  src={resolvedSrc}
-                  startFrom={Math.floor(startFrom * fps)}
-                  endAt={Math.floor(startFrom * fps) + Math.floor(((endAt - startFrom) * fps) / playbackRate)}
-                  muted={volume === 0 || !!audio?.foreground}
-                  volume={volume}
-                  playbackRate={playbackRate}
-                  showInTimeline={false}
-                  style={{ width: "100%", height: "100%" }}
-                />
-              </FrameSyncStyle>
-            ) : (
-              <OffthreadVideo
-                src={resolvedSrc}
-                startFrom={Math.floor(startFrom * fps)}
-                endAt={Math.floor(startFrom * fps) + Math.floor(((endAt - startFrom) * fps) / playbackRate)}
-                muted={volume === 0 || !!audio?.foreground}
-                volume={volume}
-                playbackRate={playbackRate}
-                showInTimeline={false}
-                style={{ width: "100%", height: "100%", ...actionStyle }}
-              />
-            )}
-          </Sequence>
-        );
-      })}
-    </>
+            style={{ width: "100%", height: "100%" }}
+          />
+        </FrameSyncStyle>
+      ) : (
+        <OffthreadVideo
+          src={resolvedSrc}
+          startFrom={Math.floor(startFrom * fps)}
+          endAt={Math.floor(startFrom * fps) + Math.floor(((endAt - startFrom) * fps) / playbackRate)}
+          muted={volume === 0 || !!audio?.foreground}
+          volume={volume}
+          playbackRate={playbackRate}
+          showInTimeline={false}
+          style={{ width: "100%", height: "100%", ...streamStyle }}
+        />
+      )}
+    </Sequence>
   );
 }

package/src/utils/component-import-map.ts

@@ -0,0 +1,93 @@
+/**
+ * Shared-module import map for dynamically loaded component bundles.
+ *
+ * Component bundles are built with react/react-dom/remotion marked as
+ * --external (see player/bundler.mjs getSharedExternals), so their output
+ * contains bare imports like `import { useState } from "react"`. The page
+ * that dynamically imports such a bundle must provide an import map that
+ * resolves those bare specifiers back to the already-loaded module
+ * instances — otherwise the import fails ("Failed to resolve module
+ * specifier") or, worse, a duplicate React breaks hooks and context.
+ *
+ * The preview player injects this map itself (player/browser.tsx). This
+ * helper provides the same shim for the Remotion render page (headless
+ * Chrome during `markcut render`). Both use the `#rmtr-import-map` guard,
+ * so whichever runs first wins and the other becomes a no-op.
+ */
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as Remotion from "remotion";
+
+export function ensureSharedImportMap(): void {
+  if (typeof document === "undefined") return;
+  if (document.querySelector("#rmtr-import-map")) return;
+
+  const g = globalThis as any;
+  g.__remotionShared ??= {};
+  g.__remotionShared["react"] ??= React;
+  g.__remotionShared["react-dom"] ??= ReactDOM;
+  g.__remotionShared["remotion"] ??= Remotion;
+
+  // Stub for node:* imports that some component deps reference at module
+  // level for build-time helpers never called during rendering.
+  if (!g.__nodeModuleStub) {
+    const nodeModuleStubCode = `export function createRequire() { return () => ({ resolve: () => { throw new Error("node:module.createRequire is not available in the browser"); } }); }`;
+    g.__nodeModuleStub = URL.createObjectURL(
+      new Blob([nodeModuleStubCode], { type: "application/javascript" }),
+    );
+  }
+
+  try {
+    const imports: Record<string, string> = {};
+    for (const spec of ["node:module", "node:fs", "node:path", "node:os"]) {
+      imports[spec] = g.__nodeModuleStub;
+    }
+
+    for (const [specifier, mod] of Object.entries(g.__remotionShared) as [string, any][]) {
+      const lines: string[] = [
+        `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" }),
+      );
+    }
+
+    // react/jsx-runtime — built manually because it's a sub-path of react.
+    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);
+  }
+}

package/src/utils/index.ts

@@ -57,11 +57,12 @@ export function walkDown<T extends StreamNode>(
  * Compute duration of a stream subtree, in seconds.
  *
  *  - rhythm streams use their pre-set durationInSeconds (set by host)
- *  - leaf actions use action.end as default
+ *  - leaf duration uses base `end` (or `start + duration`) via leafEnd()
  *  - series sums children, subtracting transition overlaps
  *  - sequence (parallel) takes max child duration
  *  - background children do not contribute
- *  - actions[].streamRef is unsupported in lite (no template instancing)
+ *  - leaf duration uses base `end` (or `start + duration`) via leafEnd()
+ *  - streamRef/template instancing is unsupported in lite
  */
 export interface DurationStream extends StreamNode {
   type?: string;
@@ -70,10 +71,24 @@ export interface DurationStream extends StreamNode {
   transition?: string;
   transitionTime?: number;
   durationInSeconds?: number;
-  actions?: Array<{ start?: number; end?: number; startFrom?: number; endAt?: number }>;
+  start?: number;
+  end?: number;
+  duration?: number;
   children?: DurationStream[];
 }
 
+/**
+ * Resolve a leaf node's effective end time from its base timing fields.
+ * `end` is the source of truth; `duration` is a convenience that normalizes
+ * to `start + duration` when `end` is absent. Returns 0 when neither is set.
+ */
+export function leafEnd(stream: { start?: number; end?: number; duration?: number }): number {
+  if (typeof stream.end === "number") return stream.end;
+  const s = stream.start ?? 0;
+  if (typeof stream.duration === "number") return s + stream.duration;
+  return 0;
+}
+
 export function getDurationInSeconds(stream: DurationStream, update = true): number {
   if (!stream) return 0;
 
@@ -81,13 +96,12 @@ export function getDurationInSeconds(stream: DurationStream, update = true): num
     return stream.durationInSeconds ?? 0;
   }
 
-  // include: if src is set, treat as leaf (duration from action end).
+  // include: if src is set, treat as leaf (duration from base end).
   // Otherwise fall back to inline children (legacy).
   if (stream.type === "include") {
     if (stream.src) {
-      // External reference — use action end (like other leaves)
-      const last = stream.actions?.[stream.actions.length - 1];
-      const d = last?.end ?? 0;
+      // External reference — use base end (like other leaves)
+      const d = leafEnd(stream);
       if (update) stream.durationInSeconds = d;
       return d;
     }
@@ -109,10 +123,9 @@ export function getDurationInSeconds(stream: DurationStream, update = true): num
   }
 
   // scene is a container (like folder) — falls through to general children logic
-  // leaf with actions
+  // leaf with base timing fields (start/end/duration)
   if (!stream.children?.length) {
-    const last = stream.actions?.[stream.actions.length - 1];
-    const d = last?.end ?? 0;
+    const d = leafEnd(stream);
     if (update) stream.durationInSeconds = d;
     return d;
   }

package/src/vision/cli.mjs

@@ -662,7 +662,7 @@ function buildPreviewTree(folder, metadata) {
         id: `${e.name}-media`,
         type: e.isVideo ? "video" : "image",
         src: e.relSrc, fit: "cover",
-        actions: [{ start: 0, end: e.dur }],
+        start: 0, end: e.dur,
         // Preserve existing labels from metadata so re-labeling shows them
         userHints: e.userHints || undefined,
       }],
@@ -943,9 +943,9 @@ async function runFullPipeline(folder, prompts, ittCli, vttCli, sttCli, context,
   const previewJsonPath = join(folder, ".preview.json");
   writeFileSync(previewJsonPath, JSON.stringify(previewTree, null, 2), "utf-8");
 
-  const labelServer = join(__dirname, "..", "player", "label-server.mjs");
-  if (!existsSync(labelServer)) {
-    emitError(`Label server not found at ${labelServer}`);
+  const playerServer = join(__dirname, "..", "player", "server.mjs");
+  if (!existsSync(playerServer)) {
+    emitError(`Player server not found at ${playerServer}`);
     process.exit(1);
   }
 
@@ -954,7 +954,7 @@ async function runFullPipeline(folder, prompts, ittCli, vttCli, sttCli, context,
   emitInfo(`  Labels will be merged into metadata.json as user hints.\n`);
 
   const port = 3031;
-  const child = spawn("node", [labelServer, previewJsonPath, `--port=${port}`], {
+  const child = spawn("node", [playerServer, previewJsonPath, "--label", `--port=${port}`], {
     cwd: resolve(__dirname, "..", ".."),
     stdio: ["ignore", "pipe", "inherit"],
   });
@@ -963,7 +963,7 @@ async function runFullPipeline(folder, prompts, ittCli, vttCli, sttCli, context,
   if (child.stdout) {
     child.stdout.on("data", (chunk) => {
       process.stdout.write(chunk);
-      if (!serverReady && chunk.toString().includes("Label Preview")) {
+      if (!serverReady && chunk.toString().includes("Player ready")) {
         serverReady = true;
         try { execSync(`open http://localhost:${port}`, { stdio: "ignore" }); } catch {}
       }