@hyperframes/studio 0.7.54 → 0.7.56

package/src/components/nle/PreviewPane.tsx

@@ -0,0 +1,163 @@
+import { useCallback, useRef, useSyncExternalStore, type ReactNode } from "react";
+import { PlayerControls } from "../../player";
+import type { TimelineElement } from "../../player";
+import { NLEPreview } from "./NLEPreview";
+import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
+import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
+import { useNLEContext } from "./NLEContext";
+import { AssetPreviewOverlay } from "./AssetPreviewOverlay";
+
+function subscribeFullscreen(cb: () => void) {
+  document.addEventListener("fullscreenchange", cb);
+  return () => document.removeEventListener("fullscreenchange", cb);
+}
+
+function getFullscreenElement() {
+  return document.fullscreenElement;
+}
+
+// Clear the timeline selection when a pointer lands outside the composition
+// frame (clicks *inside* the frame are handled by the DOM-edit overlay).
+// fallow-ignore-next-line complexity
+function deselectIfPointerOutsideFrame(
+  e: React.PointerEvent,
+  iframe: HTMLIFrameElement | null,
+  onDeselect?: (element: null) => void,
+): void {
+  const el = iframe?.parentElement ?? iframe;
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const outside =
+    e.clientX < rect.left ||
+    e.clientX > rect.right ||
+    e.clientY < rect.top ||
+    e.clientY > rect.bottom;
+  if (outside) onDeselect?.(null);
+}
+
+export interface PreviewPaneProps {
+  portrait?: boolean;
+  /** Slot for overlays rendered on top of the preview (cursors, highlights, etc.) */
+  previewOverlay?: ReactNode;
+  onSelectTimelineElement?: (element: TimelineElement | null) => void;
+  onPreviewBlockDrop?: (
+    blockName: string,
+    position: { left: number; top: number },
+  ) => Promise<void> | void;
+}
+
+// fallow-ignore-next-line complexity
+export function PreviewPane({
+  portrait,
+  previewOverlay,
+  onSelectTimelineElement,
+  onPreviewBlockDrop,
+}: PreviewPaneProps) {
+  const {
+    projectId,
+    iframeRef,
+    togglePlay,
+    seek,
+    onIframeLoad,
+    compositionStack,
+    handleNavigateComposition,
+    setCompositionLoading,
+    timelineDisabled,
+    hasLoadedOnceRef,
+    previewCompositionSize,
+    setPreviewCompositionSize,
+  } = useNLEContext();
+
+  const stageRefForDrop = useRef<HTMLDivElement | null>(null);
+  const handleStageRef = useCallback((ref: React.RefObject<HTMLDivElement | null>) => {
+    stageRefForDrop.current = ref.current;
+  }, []);
+
+  const {
+    isDragOver: previewDragOver,
+    handleDragEnter: handlePreviewDragEnter,
+    handleDragOver: handlePreviewDragOver,
+    handleDragLeave: handlePreviewDragLeave,
+    handleDrop: handlePreviewDrop,
+  } = usePreviewBlockDrop({
+    portrait,
+    compositionSize: previewCompositionSize,
+    stageRef: stageRefForDrop as React.RefObject<HTMLDivElement | null>,
+    onBlockDrop: onPreviewBlockDrop,
+  });
+
+  // Preview-only fullscreen: fullscreen targets THIS pane's container, so the
+  // browser shows only the preview (sidebars + timeline are excluded naturally).
+  const containerRef = useRef<HTMLDivElement>(null);
+  const fullscreenElement = useSyncExternalStore(subscribeFullscreen, getFullscreenElement);
+  const isFullscreen = fullscreenElement === containerRef.current && fullscreenElement != null;
+
+  const toggleFullscreen = useCallback(() => {
+    if (!containerRef.current) return;
+    if (document.fullscreenElement) {
+      void document.exitFullscreen();
+    } else {
+      void containerRef.current.requestFullscreen();
+    }
+  }, []);
+
+  const currentLevel = compositionStack[compositionStack.length - 1];
+  const directUrl = compositionStack.length > 1 ? currentLevel.previewUrl : undefined;
+
+  return (
+    <div
+      ref={containerRef}
+      // Panel chrome (rounded border) is dropped in fullscreen so the preview
+      // fills the screen edge-to-edge.
+      className={`flex-1 min-h-0 flex flex-col overflow-hidden bg-neutral-950 ${
+        isFullscreen ? "" : "rounded-lg border border-neutral-800/50"
+      }`}
+      data-studio-fullscreen-target=""
+    >
+      <div
+        className="flex-1 min-h-0 relative overflow-hidden"
+        data-preview-pan-surface="true"
+        onPointerDown={(e) =>
+          deselectIfPointerOutsideFrame(e, iframeRef.current, onSelectTimelineElement)
+        }
+        onDragEnter={handlePreviewDragEnter}
+        onDragOver={handlePreviewDragOver}
+        onDragLeave={handlePreviewDragLeave}
+        onDrop={handlePreviewDrop}
+      >
+        <div className="absolute inset-0 overflow-hidden">
+          <NLEPreview
+            projectId={projectId}
+            iframeRef={iframeRef}
+            onIframeLoad={onIframeLoad}
+            onCompositionLoadingChange={setCompositionLoading}
+            portrait={portrait}
+            directUrl={directUrl}
+            suppressLoadingOverlay={hasLoadedOnceRef.current}
+            onStageRef={handleStageRef}
+            onCompositionSizeChange={setPreviewCompositionSize}
+          />
+          {previewDragOver && (
+            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
+          )}
+          <AssetPreviewOverlay />
+        </div>
+        {!isFullscreen && previewOverlay}
+      </div>
+      {/* Transport row: no own background or border — the controls sit flat on
+          the preview panel's surface (CapCut-style). */}
+      <div className="flex-shrink-0">
+        {!isFullscreen && compositionStack.length > 1 && (
+          <CompositionBreadcrumb stack={compositionStack} onNavigate={handleNavigateComposition} />
+        )}
+        <PlayerControls
+          onTogglePlay={togglePlay}
+          onSeek={seek}
+          disabled={timelineDisabled}
+          isFullscreen={isFullscreen}
+          onToggleFullscreen={toggleFullscreen}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/nle/TimelinePane.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../../player";
+import {
+  forwardRebasedTimelineMoveElements,
+  forwardRebasedTimelineResizeElements,
+} from "./TimelinePane";
+
+describe("TimelinePane move wrapper", () => {
+  it("rebases expanded edits and forwards track-insert as the third argument", async () => {
+    const onMoveElements = vi.fn().mockResolvedValue(undefined);
+    const element: TimelineElement = {
+      id: "expanded-a",
+      domId: "a",
+      tag: "div",
+      start: 12,
+      duration: 2,
+      track: 0,
+      expandedParentStart: 10,
+    };
+    await forwardRebasedTimelineMoveElements(
+      [{ element, updates: { start: 14, track: 2 } }],
+      "clip-lane-move:7",
+      "track-insert",
+      onMoveElements,
+    );
+    expect(onMoveElements).toHaveBeenCalledWith(
+      [
+        {
+          element: expect.objectContaining({ id: "a", start: 2 }),
+          updates: { start: 4, track: 2 },
+        },
+      ],
+      "clip-lane-move:7",
+      "track-insert",
+    );
+  });
+
+  it("forwards one rebased resize batch with the shared gesture key", async () => {
+    const onResizeElements = vi.fn().mockResolvedValue(undefined);
+    const element: TimelineElement = {
+      id: "expanded-a",
+      domId: "a",
+      tag: "div",
+      start: 12,
+      duration: 2,
+      track: 0,
+      expandedParentStart: 10,
+    };
+    await forwardRebasedTimelineResizeElements(
+      [{ element, start: 13, duration: 3 }],
+      { coalesceKey: "clip-group-resize:a:b" },
+      onResizeElements,
+    );
+    expect(onResizeElements).toHaveBeenCalledTimes(1);
+    expect(onResizeElements).toHaveBeenCalledWith(
+      [{ element: expect.objectContaining({ id: "a", start: 2 }), start: 3, duration: 3 }],
+      { coalesceKey: "clip-group-resize:a:b" },
+    );
+  });
+});

package/src/components/nle/TimelinePane.tsx

@@ -0,0 +1,293 @@
+import { useCallback, type ReactNode } from "react";
+import { Timeline } from "../../player";
+import type { TimelineElement } from "../../player";
+import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
+import { TimelineResizeDivider } from "./TimelineResizeDivider";
+import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import { trackStudioExpandedClipEdit } from "../../telemetry/events";
+import { useNLEContext } from "./NLEContext";
+import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
+
+type TimelineMoveEdit = {
+  element: TimelineElement;
+  updates: Pick<TimelineElement, "start" | "track">;
+};
+
+export function forwardRebasedTimelineMoveElements(
+  edits: TimelineMoveEdit[],
+  coalesceKey: string | undefined,
+  operation: TimelineMoveOperation | undefined,
+  onMoveElements: (
+    edits: TimelineMoveEdit[],
+    coalesceKey?: string,
+    operation?: TimelineMoveOperation,
+  ) => Promise<void> | void,
+) {
+  return onMoveElements(
+    edits.map(({ element, updates }) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return { element, updates };
+      return {
+        element: { ...element, id: element.domId ?? element.id, start: element.start - basis },
+        updates: { ...updates, start: Math.max(0, updates.start - basis) },
+      };
+    }),
+    coalesceKey,
+    operation,
+  );
+}
+
+type TimelineResizeChange = {
+  element: TimelineElement;
+  start: number;
+  duration: number;
+  playbackStart?: number;
+};
+
+export function forwardRebasedTimelineResizeElements(
+  changes: TimelineResizeChange[],
+  options: { coalesceKey?: string } | undefined,
+  onResizeElements: (
+    changes: TimelineResizeChange[],
+    options?: { coalesceKey?: string },
+  ) => Promise<void> | void,
+) {
+  return onResizeElements(
+    changes.map((change) => {
+      const basis = change.element.expandedParentStart;
+      if (basis === undefined) return change;
+      return {
+        ...change,
+        element: {
+          ...change.element,
+          id: change.element.domId ?? change.element.id,
+          start: change.element.start - basis,
+        },
+        start: Math.max(0, change.start - basis),
+      };
+    }),
+    options,
+  );
+}
+
+export interface TimelinePaneProps {
+  /** Slot rendered above the timeline tracks (toolbar with split, delete, zoom) */
+  timelineToolbar?: ReactNode;
+  /** Slot rendered below the timeline tracks */
+  timelineFooter?: ReactNode;
+  /** Custom clip content renderer for timeline (thumbnails, waveforms, etc.) */
+  renderClipContent?: (
+    element: TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  onFileDrop?: (
+    files: File[],
+    placement?: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
+  onAssetDrop?: (
+    assetPath: string,
+    placement: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  onBlockDrop?: (
+    blockName: string,
+    placement: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  onSelectTimelineElement?: (element: TimelineElement | null) => void;
+}
+
+// fallow-ignore-next-line complexity
+export function TimelinePane({
+  timelineToolbar,
+  timelineFooter,
+  renderClipContent,
+  onFileDrop,
+  onDeleteElement,
+  onAssetDrop,
+  onBlockDrop,
+  onBlockedEditAttempt,
+  onSelectTimelineElement,
+}: TimelinePaneProps) {
+  const {
+    seek,
+    handleDrillDown,
+    compositionStack,
+    updateCompositionStack,
+    timelineH,
+    setTimelineH,
+    persistTimelineH,
+    containerRef,
+    timelineDisabled,
+  } = useNLEContext();
+
+  // Move/resize/split come from the timeline edit context, not props — the
+  // wrappers below intercept expanded clips and must call the *real* handlers.
+  // (Delete is a direct prop; it stays that way.)
+  const { onMoveElement, onMoveElements, onResizeElement, onResizeElements, onSplitElement } =
+    useTimelineEditContext();
+
+  // An expanded sub-comp child reaches the normal edit handlers in its own
+  // local coordinates: addressed by its real DOM id, with timeline time rebased
+  // onto the sub-comp it lives in. The handlers then save + reloadPreview exactly
+  // as they do for top-level clips — no separate live-DOM path.
+  const toLocalElement = useCallback(
+    (element: TimelineElement, basis: number): TimelineElement => ({
+      ...element,
+      id: element.domId ?? element.id,
+      start: element.start - basis,
+    }),
+    [],
+  );
+
+  const handleMoveElement = useCallback(
+    (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track">) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onMoveElement?.(element, updates);
+      trackStudioExpandedClipEdit({ action: "move" });
+      onMoveElement?.(toLocalElement(element, basis), {
+        ...updates,
+        start: Math.max(0, updates.start - basis),
+      });
+    },
+    [onMoveElement, toLocalElement],
+  );
+
+  // Batched move (ripple / insert): rebase each expanded sub-comp child to its
+  // local coords, exactly as handleMoveElement does for a single clip.
+  const handleMoveElements = useCallback(
+    (
+      edits: Array<{ element: TimelineElement; updates: Pick<TimelineElement, "start" | "track"> }>,
+      coalesceKey?: string,
+      operation?: TimelineMoveOperation,
+    ) => {
+      // Match the sibling handlers: report the telemetry when the batch touches at
+      // least one expanded sub-comp child (the clips being rebased to local coords).
+      if (edits.some(({ element }) => element.expandedParentStart !== undefined)) {
+        trackStudioExpandedClipEdit({ action: "move" });
+      }
+      if (!onMoveElements) return;
+      return forwardRebasedTimelineMoveElements(edits, coalesceKey, operation, onMoveElements);
+    },
+    [onMoveElements],
+  );
+
+  const handleResizeElement = useCallback(
+    (
+      element: TimelineElement,
+      updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+    ) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onResizeElement?.(element, updates);
+      trackStudioExpandedClipEdit({ action: "resize" });
+      onResizeElement?.(toLocalElement(element, basis), {
+        ...updates,
+        start: Math.max(0, updates.start - basis),
+      });
+    },
+    [onResizeElement, toLocalElement],
+  );
+
+  const handleResizeElements = useCallback(
+    (
+      changes: Array<{
+        element: TimelineElement;
+        start: number;
+        duration: number;
+        playbackStart?: number;
+      }>,
+      options?: { coalesceKey?: string },
+    ) => {
+      if (!onResizeElements) return;
+      if (changes.some(({ element }) => element.expandedParentStart !== undefined)) {
+        trackStudioExpandedClipEdit({ action: "resize" });
+      }
+      return forwardRebasedTimelineResizeElements(changes, options, onResizeElements);
+    },
+    [onResizeElements],
+  );
+
+  const handleDeleteElement = useCallback(
+    (element: TimelineElement) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onDeleteElement?.(element);
+      trackStudioExpandedClipEdit({ action: "delete" });
+      return onDeleteElement?.(toLocalElement(element, basis));
+    },
+    [onDeleteElement, toLocalElement],
+  );
+
+  const handleSplitElement = useCallback(
+    (element: TimelineElement, splitTime: number) => {
+      const basis = element.expandedParentStart;
+      if (basis === undefined) return onSplitElement?.(element, splitTime);
+      trackStudioExpandedClipEdit({ action: "split" });
+      return onSplitElement?.(toLocalElement(element, basis), Math.max(0, splitTime - basis));
+    },
+    [onSplitElement, toLocalElement],
+  );
+
+  return (
+    <>
+      <TimelineResizeDivider
+        timelineH={timelineH}
+        setTimelineH={setTimelineH}
+        persistTimelineH={persistTimelineH}
+        containerRef={containerRef}
+        disabled={timelineDisabled}
+      />
+
+      {/* Timeline section — inner padding (not margin) keeps the divider's
+          height math exact while giving the panel a gap from the shell edges. */}
+      <div
+        className="relative flex flex-col flex-shrink-0 px-px pb-px"
+        style={{ height: timelineH }}
+        aria-disabled={timelineDisabled || undefined}
+      >
+        <div
+          className="flex flex-col flex-1 min-h-0 overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
+          onDoubleClick={(e) => {
+            if ((e.target as HTMLElement).closest("[data-clip]")) return;
+            if (timelineDisabled) return;
+            if (compositionStack.length > 1) {
+              updateCompositionStack((prev) => prev.slice(0, -1));
+            }
+          }}
+        >
+          <div className="flex-shrink-0">{timelineToolbar}</div>
+          <Timeline
+            onSeek={seek}
+            onDrillDown={handleDrillDown}
+            renderClipContent={renderClipContent}
+            onFileDrop={onFileDrop}
+            onDeleteElement={handleDeleteElement}
+            onAssetDrop={onAssetDrop}
+            onBlockDrop={onBlockDrop}
+            onMoveElement={handleMoveElement}
+            onMoveElements={handleMoveElements}
+            onResizeElement={handleResizeElement}
+            onResizeElements={handleResizeElements}
+            onBlockedEditAttempt={onBlockedEditAttempt}
+            onSplitElement={handleSplitElement}
+            onSelectElement={onSelectTimelineElement}
+          />
+        </div>
+        {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}
+        {timelineDisabled && (
+          <div
+            className="absolute inset-0 z-30 cursor-not-allowed bg-black/18 flex items-center justify-center"
+            data-testid="timeline-loading-disabled-overlay"
+            role="status"
+            onPointerDown={(event) => event.preventDefault()}
+            onDragOver={(event) => event.preventDefault()}
+            onDrop={(event) => event.preventDefault()}
+          >
+            <span className="rounded-md bg-neutral-900/90 px-2.5 py-1 text-[11px] text-neutral-400">
+              Loading composition…
+            </span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/nle/TimelineResizeDivider.tsx

@@ -73,6 +73,9 @@ export function TimelineResizeDivider({
   );
 
   return (
+    // Horizontal resize divider: 3px visible seam (h-[3px]), 8px pointer-capture
+    // zone via the absolutely-positioned inner hit area so the layout gap stays
+    // at 3px while draggability is preserved over the full 8px band.
     <div
       role="separator"
       aria-orientation="horizontal"
@@ -83,7 +86,7 @@ export function TimelineResizeDivider({
         (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H,
       )}
       tabIndex={0}
-      className="group h-2 flex-shrink-0 cursor-row-resize flex items-center justify-center z-10 outline-none focus-visible:bg-studio-accent/20"
+      className="group relative h-[3px] flex-shrink-0 cursor-row-resize z-10 outline-none focus-visible:bg-studio-accent/20"
       style={{ touchAction: "none" }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
@@ -91,7 +94,10 @@ export function TimelineResizeDivider({
       onPointerCancel={handlePointerUp}
       onKeyDown={handleKeyDown}
     >
-      <div className="h-px w-full bg-white/10 transition-colors group-hover:bg-white/16 group-active:bg-white/22 group-focus-visible:bg-studio-accent/60" />
+      {/* Expanded hit zone: 8px tall, centered on the 3px seam */}
+      <div className="absolute inset-x-0 -top-[2.5px] h-2" />
+      {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
+      <div className="h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" />
     </div>
   );
 }

package/src/components/nle/useCompositionStack.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { installReactActEnvironment } from "../../hooks/domSelectionTestHarness";
+import { useCompositionStack } from "./useCompositionStack";
+
+installReactActEnvironment();
+
+describe("useCompositionStack — project scoping", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  for (const activeCompositionPath of [null, "index.html"] as const) {
+    it(`rebuilds the master preview URL on a project switch with ${String(activeCompositionPath)}`, async () => {
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      let previewUrl = "";
+
+      function Harness(props: { projectId: string; activeCompositionPath: string | null }) {
+        previewUrl = useCompositionStack(props).compositionStack[0]?.previewUrl ?? "";
+        return null;
+      }
+
+      await act(async () => {
+        root.render(
+          <Harness projectId="project-a" activeCompositionPath={activeCompositionPath} />,
+        );
+      });
+      expect(previewUrl).toBe("/api/projects/project-a/preview");
+
+      await act(async () => {
+        root.render(
+          <Harness projectId="project-b" activeCompositionPath={activeCompositionPath} />,
+        );
+      });
+      expect(previewUrl).toBe("/api/projects/project-b/preview");
+
+      act(() => root.unmount());
+    });
+  }
+});

package/src/components/nle/useCompositionStack.ts

@@ -1,7 +1,8 @@
-// Composition drill-down stack management for NLELayout
+// Composition drill-down stack management for NLEContext/EditorShell
 import { useState, useCallback, useRef, useEffect } from "react";
 import { usePlayerStore } from "../../player";
 import type { CompositionLevel } from "./CompositionBreadcrumb";
+import { encodePreviewPath } from "../../player/components/thumbnailUtils";
 
 interface UseCompositionStackOptions {
   projectId: string;
@@ -25,7 +26,11 @@ export function useCompositionStack({
   onCompositionChange,
 }: UseCompositionStackOptions): UseCompositionStackResult {
   const [compositionStack, setCompositionStack] = useState<CompositionLevel[]>([
-    { id: "master", label: "Master", previewUrl: `/api/projects/${projectId}/preview` },
+    {
+      id: "master",
+      label: "Master",
+      previewUrl: `/api/projects/${projectId}/preview`,
+    },
   ]);
 
   const onCompositionChangeRef = useRef(onCompositionChange);
@@ -84,7 +89,7 @@ export function useCompositionStack({
             .split("/")
             .pop()
             ?.replace(/\.html$/, "") || resolvedPath;
-        const previewUrl = `/api/projects/${projectId}/preview/comp/${resolvedPath}`;
+        const previewUrl = `/api/projects/${projectId}/preview/comp/${encodePreviewPath(resolvedPath)}`;
         return [...prev, { id: resolvedPath, label, previewUrl }];
       });
     },
@@ -95,22 +100,25 @@ export function useCompositionStack({
   // Navigate to a composition when activeCompositionPath changes.
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
+    const master: CompositionLevel = {
+      id: "master",
+      label: "Master",
+      previewUrl: `/api/projects/${projectId}/preview`,
+    };
     if (activeCompositionPath === "index.html") {
       usePlayerStore.getState().setElements([]);
-      updateCompositionStack((prev) => (prev.length > 1 ? [prev[0]] : prev));
+      updateCompositionStack([master]);
     } else if (activeCompositionPath && activeCompositionPath.startsWith("compositions/")) {
       const label = activeCompositionPath.replace(/^compositions\//, "").replace(/\.html$/, "");
-      const previewUrl = `/api/projects/${projectId}/preview/comp/${activeCompositionPath}`;
+      const previewUrl = `/api/projects/${projectId}/preview/comp/${encodePreviewPath(activeCompositionPath)}`;
       usePlayerStore.getState().setElements([]);
       updateCompositionStack((prev) => {
         if (prev[prev.length - 1]?.id === activeCompositionPath) return prev;
-        return [
-          { id: "master", label: "Master", previewUrl: `/api/projects/${projectId}/preview` },
-          { id: activeCompositionPath, label, previewUrl },
-        ];
+        return [master, { id: activeCompositionPath, label, previewUrl }];
       });
     } else if (!activeCompositionPath) {
       usePlayerStore.getState().setElements([]);
+      updateCompositionStack([master]);
     }
   }, [activeCompositionPath, projectId, updateCompositionStack]);