@hyperframes/studio 0.7.54 → 0.7.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.54",
+  "version": "0.7.56",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.7.54",
-    "@hyperframes/sdk": "0.7.54",
-    "@hyperframes/parsers": "0.7.54",
-    "@hyperframes/studio-server": "0.7.54",
-    "@hyperframes/core": "0.7.54"
+    "@hyperframes/player": "0.7.56",
+    "@hyperframes/studio-server": "0.7.56",
+    "@hyperframes/sdk": "0.7.56",
+    "@hyperframes/core": "0.7.56",
+    "@hyperframes/parsers": "0.7.56"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.54"
+    "@hyperframes/producer": "0.7.56"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef, useMemo, useEffect, useLayoutEffect } from "react";
 import type { LeftSidebarHandle, SidebarTab } from "./components/sidebar/LeftSidebar";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
-import { usePlayerStore } from "./player";
+import { usePlayerStore, type TimelineElement } from "./player";
 import { StudioOverlays } from "./components/StudioOverlays";
 import { SaveQueuePausedBanner } from "./components/SaveQueuePausedBanner";
 import { useCaptionStore } from "./captions/store";
@@ -10,17 +10,21 @@ import { usePersistentEditHistory } from "./hooks/usePersistentEditHistory";
 import { usePanelLayout } from "./hooks/usePanelLayout";
 import { useFileManager } from "./hooks/useFileManager";
 import { usePreviewPersistence } from "./hooks/usePreviewPersistence";
+import { usePreviewDocumentVersion } from "./hooks/usePreviewDocumentVersion";
 import { useTimelineEditing } from "./hooks/useTimelineEditing";
+import {
+  persistTimelineMoveEditsAtomically,
+  type TimelineMoveOperation,
+} from "./hooks/timelineMoveAdapter";
 import type { TimelineZIndexReorderCommit } from "./hooks/useTimelineEditingTypes";
+import type { TimelineStackingReorderIntent } from "./player/components/timelineStacking";
 import type { BlockPreviewInfo } from "./components/sidebar/BlocksTab";
 import { useDomEditSession } from "./hooks/useDomEditSession";
 import { useSdkSelectionSync } from "./hooks/useSdkSelectionSync";
 import { useStudioSdkSessions } from "./hooks/useStudioSdkSessions";
-import { usePreviewDocumentVersion } from "./hooks/usePreviewDocumentVersion";
 import { useBlockHandlers } from "./hooks/useBlockHandlers";
 import { useAppHotkeys } from "./hooks/useAppHotkeys";
 import { useClipboard } from "./hooks/useClipboard";
-import { readStudioUiPreferences, writeStudioUiPreferences } from "./utils/studioUiPreferences";
 import { deleteSelectedKeyframes } from "./hooks/timelineEditingHelpers";
 import { useCaptionDetection } from "./hooks/useCaptionDetection";
 import { useRenderClipContent } from "./hooks/useRenderClipContent";
@@ -33,7 +37,7 @@ import { useCompositionContentLoader } from "./hooks/useCompositionContentLoader
 import { useStudioUrlState } from "./hooks/useStudioUrlState";
 import {
   buildStudioContextValue,
-  useDragOverlay,
+  useGlobalFileDrop,
   useInspectorState,
 } from "./hooks/useStudioContextValue";
 import type { DomEditSelection } from "./components/editor/domEditing";
@@ -42,7 +46,7 @@ import { useGestureCommit } from "./hooks/useGestureCommit";
 import { STUDIO_KEYFRAMES_ENABLED } from "./components/editor/manualEditingAvailability";
 import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
 import { StudioLeftSidebar } from "./components/StudioLeftSidebar";
-import { StudioPreviewArea } from "./components/StudioPreviewArea";
+import { EditorShell } from "./components/EditorShell";
 import { StudioRightPanel } from "./components/StudioRightPanel";
 import { TimelineToolbar } from "./components/TimelineToolbar";
 import { StudioPlaybackProvider, StudioShellProvider } from "./contexts/StudioContext";
@@ -108,18 +112,6 @@ export function StudioApp() {
         : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
-  const [timelineVisible, setTimelineVisible] = useState(
-    () =>
-      initialUrlStateRef.current.timelineVisible ??
-      readStudioUiPreferences().timelineVisible ??
-      true,
-  );
-  const toggleTimelineVisibility = useCallback(() => {
-    setTimelineVisible((v) => {
-      writeStudioUiPreferences({ timelineVisible: !v });
-      return !v;
-    });
-  }, []);
   const { toasts, showToast, dismissToast } = useToast();
   const panelLayout = usePanelLayout({
     rightCollapsed: initialUrlStateRef.current.rightCollapsed,
@@ -187,6 +179,31 @@ export function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     handleDomZIndexReorderCommitRef,
   });
+  const handleTimelineElementsMove = useCallback(
+    async (
+      edits: Array<{
+        element: TimelineElement;
+        updates: Pick<TimelineElement, "start" | "track"> & {
+          stackingReorder?: TimelineStackingReorderIntent | null;
+        };
+      }>,
+      coalesceKey?: string,
+      operation: TimelineMoveOperation = "timing",
+    ) => {
+      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, {
+        handleTimelineGroupMove: timelineEditing.handleTimelineGroupMove,
+      });
+    },
+    [timelineEditing.handleTimelineGroupMove],
+  );
+  const handleAddAssetAtPlayhead = useCallback(
+    (assetPath: string) =>
+      timelineEditing.handleTimelineAssetDrop(assetPath, {
+        start: usePlayerStore.getState().currentTime,
+        track: 0,
+      }),
+    [timelineEditing],
+  );
   const {
     activeBlockParams,
     setActiveBlockParams,
@@ -232,7 +249,6 @@ export function StudioApp() {
     previewIframeRef,
   });
   const appHotkeys = useAppHotkeys({
-    toggleTimelineVisibility,
     handleTimelineElementDelete: timelineEditing.handleTimelineElementDelete,
     handleTimelineElementSplit: timelineEditing.handleTimelineElementSplit,
     handleDomEditElementDelete: domEditDeleteBridge,
@@ -348,7 +364,7 @@ export function StudioApp() {
     setConsoleErrors,
     resetErrors: resetConsoleErrors,
   } = useConsoleErrorCapture(previewIframe);
-  const dragOverlay = useDragOverlay(fileManager.handleImportFiles);
+  const dragOverlay = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
   const handleToggleRecordingRef = useRef<() => void>(() => {});
   const domEditSessionRef = useRef(domEditSession);
   domEditSessionRef.current = domEditSession;
@@ -369,7 +385,6 @@ export function StudioApp() {
     const r = previewIframe.getBoundingClientRect();
     canvasRectRef.current = { left: r.left, top: r.top, width: r.width, height: r.height };
   }, [gestureState, previewIframe]);
-
   const handlePreviewIframeRef = useCallback(
     (iframe: HTMLIFrameElement | null) => {
       previewIframeRef.current = iframe;
@@ -410,7 +425,6 @@ export function StudioApp() {
     previewIframeRef,
     rightPanelTab: panelLayout.rightPanelTab,
     rightCollapsed: panelLayout.rightCollapsed,
-    timelineVisible,
     activeCompPathHydrated,
     domEditSelection: domEditSession.domEditSelection,
     buildDomSelectionFromTarget: domEditSession.buildDomSelectionFromTarget,
@@ -438,18 +452,15 @@ export function StudioApp() {
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion,
-    timelineVisible,
-    toggleTimelineVisibility,
   });
   const timelineToolbar = useMemo(
     () => (
       <TimelineToolbar
-        toggleTimelineVisibility={toggleTimelineVisibility}
         domEditSession={domEditSession}
         onSplitElement={timelineEditing.handleTimelineElementSplit}
       />
     ),
-    [toggleTimelineVisibility, domEditSession, timelineEditing.handleTimelineElementSplit],
+    [domEditSession, timelineEditing.handleTimelineElementSplit],
   );
   if (resolving || waitingForServer || !projectId)
     return <StudioSplash waiting={waitingForServer} />;
@@ -494,78 +505,77 @@ export function StudioApp() {
                       onSelectComposition={handleSelectComposition}
                     />
                   )}
-                  <div
-                    className={`flex flex-1 min-h-0${
-                      viewModeValue.viewMode === "storyboard" ? " hidden" : ""
-                    }`}
-                  >
-                    <StudioLeftSidebar
-                      leftSidebarRef={leftSidebarRef}
-                      onSelectComposition={handleSelectComposition}
-                      onAddBlock={handleAddBlock}
-                      onPreviewBlock={setBlockPreview}
-                      onLint={handleLint}
-                      linting={linting}
-                      lintFindingCount={lintModal?.length ?? findingsByFile.size}
-                      lintFindingsByFile={findingsByFile}
-                    />
-                    <StudioPreviewArea
-                      timelineToolbar={timelineToolbar}
-                      renderClipContent={renderClipContent}
-                      handleTimelineElementDelete={timelineEditing.handleTimelineElementDelete}
-                      handleTimelineAssetDrop={timelineEditing.handleTimelineAssetDrop}
-                      handleTimelineBlockDrop={handleTimelineBlockDrop}
-                      handlePreviewBlockDrop={handlePreviewBlockDrop}
-                      handleTimelineFileDrop={timelineEditing.handleTimelineFileDrop}
-                      handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
-                      handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
-                      handleTimelineGroupMove={timelineEditing.handleTimelineGroupMove}
-                      handleTimelineGroupResize={timelineEditing.handleTimelineGroupResize}
-                      handleToggleTrackHidden={timelineEditing.handleToggleTrackHidden}
-                      handleToggleElementHidden={timelineEditing.handleToggleElementHidden}
-                      handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
-                      handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
-                      handleRazorSplit={timelineEditing.handleRazorSplit}
-                      handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
-                      setCompIdToSrc={setCompIdToSrc}
-                      setCompositionLoading={setCompositionLoading}
-                      shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
-                      isGestureRecording={gestureState === "recording"}
-                      recordingState={gestureState}
-                      onToggleRecording={recordingToggle}
-                      blockPreview={blockPreview}
-                      gestureOverlay={
-                        gestureState === "recording" && previewIframe ? (
-                          <GestureTrailOverlay
-                            samples={gestureRecording.samplesRef.current}
-                            sampleCount={gestureRecording.samplesRef.current.length}
-                            trail={gestureRecording.trailRef.current}
-                            canvasRect={canvasRectRef.current!}
-                            compositionSize={compositionDimensions ?? undefined}
-                            mode="recording"
-                          />
-                        ) : undefined
-                      }
-                    />
-                    {!panelLayout.rightCollapsed && (
-                      <StudioRightPanel
-                        designPanelActive={designPanelActive}
-                        activeBlockParams={activeBlockParams}
-                        onCloseBlockParams={() => {
-                          setActiveBlockParams(null);
-                          panelLayout.setRightPanelTab("design");
-                        }}
-                        recordingState={gestureState}
-                        recordingDuration={gestureRecording.recordingDuration}
-                        onToggleRecording={recordingToggle}
-                        sdkSession={sdkHandle.session}
-                        reloadPreview={reloadPreview}
-                        domEditSaveTimestampRef={domEditSaveTimestampRef}
-                        recordEdit={editHistory.recordEdit}
-                        onToggleElementHidden={timelineEditing.handleToggleElementHidden}
+                  <EditorShell
+                    hidden={viewModeValue.viewMode === "storyboard"}
+                    left={
+                      <StudioLeftSidebar
+                        leftSidebarRef={leftSidebarRef}
+                        onSelectComposition={handleSelectComposition}
+                        onAddBlock={handleAddBlock}
+                        onPreviewBlock={setBlockPreview}
+                        onLint={handleLint}
+                        linting={linting}
+                        lintFindingCount={lintModal?.length ?? findingsByFile.size}
+                        lintFindingsByFile={findingsByFile}
+                        onAddAssetToTimeline={handleAddAssetAtPlayhead}
                       />
-                    )}
-                  </div>
+                    }
+                    right={
+                      panelLayout.rightCollapsed ? null : (
+                        <StudioRightPanel
+                          designPanelActive={designPanelActive}
+                          activeBlockParams={activeBlockParams}
+                          onCloseBlockParams={() => {
+                            setActiveBlockParams(null);
+                            panelLayout.setRightPanelTab("design");
+                          }}
+                          recordingState={gestureState}
+                          recordingDuration={gestureRecording.recordingDuration}
+                          onToggleRecording={recordingToggle}
+                          sdkSession={sdkHandle.session}
+                          reloadPreview={reloadPreview}
+                          domEditSaveTimestampRef={domEditSaveTimestampRef}
+                          recordEdit={editHistory.recordEdit}
+                          onToggleElementHidden={timelineEditing.handleToggleElementHidden}
+                        />
+                      )
+                    }
+                    timelineToolbar={timelineToolbar}
+                    renderClipContent={renderClipContent}
+                    handleTimelineElementDelete={timelineEditing.handleTimelineElementDelete}
+                    handleTimelineAssetDrop={timelineEditing.handleTimelineAssetDrop}
+                    handleTimelineBlockDrop={handleTimelineBlockDrop}
+                    handlePreviewBlockDrop={handlePreviewBlockDrop}
+                    handleTimelineFileDrop={timelineEditing.handleTimelineFileDrop}
+                    handleTimelineElementMove={timelineEditing.handleTimelineElementMove}
+                    handleTimelineElementsMove={handleTimelineElementsMove}
+                    handleTimelineElementResize={timelineEditing.handleTimelineElementResize}
+                    handleTimelineGroupResize={timelineEditing.handleTimelineGroupResize}
+                    handleToggleTrackHidden={timelineEditing.handleToggleTrackHidden}
+                    handleBlockedTimelineEdit={timelineEditing.handleBlockedTimelineEdit}
+                    handleTimelineElementSplit={timelineEditing.handleTimelineElementSplit}
+                    handleRazorSplit={timelineEditing.handleRazorSplit}
+                    handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
+                    setCompIdToSrc={setCompIdToSrc}
+                    setCompositionLoading={setCompositionLoading}
+                    shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
+                    isGestureRecording={gestureState === "recording"}
+                    recordingState={gestureState}
+                    onToggleRecording={recordingToggle}
+                    blockPreview={blockPreview}
+                    gestureOverlay={
+                      gestureState === "recording" && previewIframe ? (
+                        <GestureTrailOverlay
+                          samples={gestureRecording.samplesRef.current}
+                          sampleCount={gestureRecording.samplesRef.current.length}
+                          trail={gestureRecording.trailRef.current}
+                          canvasRect={canvasRectRef.current!}
+                          compositionSize={compositionDimensions ?? undefined}
+                          mode="recording"
+                        />
+                      ) : undefined
+                    }
+                  />
                   <StudioOverlays
                     projectId={projectId}
                     projectDir={fileManager.projectDir}

package/src/components/EditorShell.tsx

@@ -0,0 +1,253 @@
+import { useCallback, type ReactNode } from "react";
+import { PreviewPane } from "./nle/PreviewPane";
+import { TimelinePane } from "./nle/TimelinePane";
+import { PreviewOverlays } from "./nle/PreviewOverlays";
+import {
+  useTimelineEditCallbacks,
+  type TimelineEditCallbackDeps,
+} from "./nle/useTimelineEditCallbacks";
+import { NLEProvider, useNLEContext } from "./nle/NLEContext";
+import { CaptionTimeline } from "../captions/components/CaptionTimeline";
+import { StudioFeedbackBar } from "./StudioFeedbackBar";
+import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
+import { useDomEditActionsContext } from "../contexts/DomEditContext";
+import { TimelineEditProvider } from "../contexts/TimelineEditContext";
+import type { TimelineElement } from "../player";
+import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
+import type { GestureRecordingState } from "./editor/GestureRecordControl";
+
+type RenderClipContent = (
+  element: TimelineElement,
+  style: { clip: string; label: string },
+) => ReactNode;
+type TimelineDropPlacement = Pick<TimelineElement, "start" | "track">;
+
+// The seven move/resize/split/razor handlers come from TimelineEditCallbackDeps
+// (shared with useTimelineEditCallbacks); the rest are drop + wiring props.
+export interface EditorShellProps extends TimelineEditCallbackDeps {
+  /** Left sidebar (media/library), rendered in the top row. */
+  left: ReactNode;
+  /** Right panel (inspector/design) or null when collapsed, in the top row. */
+  right: ReactNode;
+  /** Hide the whole shell (e.g. while the storyboard view is active). */
+  hidden?: boolean;
+  timelineToolbar: ReactNode;
+  renderClipContent: RenderClipContent;
+  handleTimelineElementDelete: (element: TimelineElement) => Promise<void> | void;
+  handleTimelineAssetDrop: (
+    assetPath: string,
+    placement: TimelineDropPlacement,
+  ) => Promise<void> | void;
+  handleTimelineBlockDrop?: (
+    blockName: string,
+    placement: TimelineDropPlacement,
+  ) => Promise<void> | void;
+  handlePreviewBlockDrop?: (
+    blockName: string,
+    position: { left: number; top: number },
+  ) => Promise<void> | void;
+  handleTimelineFileDrop: (
+    files: File[],
+    placement?: TimelineDropPlacement,
+  ) => Promise<void> | void;
+  setCompIdToSrc: (map: Map<string, string>) => void;
+  setCompositionLoading: (loading: boolean) => void;
+  shouldShowSelectedDomBounds: boolean;
+  blockPreview?: BlockPreviewInfo | null;
+  isGestureRecording?: boolean;
+  recordingState?: GestureRecordingState;
+  onToggleRecording?: () => void;
+  gestureOverlay?: ReactNode;
+}
+
+// The CapCut-style shell: [left | preview | right] in a top row, with a
+// full-width timeline spanning the bottom. Owns the shared player +
+// composition-stack state via NLEProvider so both rows share one player.
+export function EditorShell({
+  left,
+  right,
+  hidden,
+  timelineToolbar,
+  renderClipContent,
+  handleTimelineElementDelete,
+  handleTimelineAssetDrop,
+  handleTimelineBlockDrop,
+  handlePreviewBlockDrop,
+  handleTimelineFileDrop,
+  handleTimelineElementMove,
+  handleTimelineElementsMove,
+  handleTimelineElementResize,
+  handleTimelineGroupResize,
+  handleToggleTrackHidden,
+  handleBlockedTimelineEdit,
+  handleTimelineElementSplit,
+  handleRazorSplit,
+  handleRazorSplitAll,
+  setCompIdToSrc,
+  setCompositionLoading,
+  shouldShowSelectedDomBounds,
+  isGestureRecording,
+  recordingState,
+  onToggleRecording,
+  blockPreview,
+  gestureOverlay,
+}: EditorShellProps) {
+  const { projectId, activeCompPath, setActiveCompPath, handlePreviewIframeRef } =
+    useStudioShellContext();
+  const { refreshKey, captionEditMode, refreshPreviewDocumentVersion } = useStudioPlaybackContext();
+  const { handleTimelineElementSelect } = useDomEditActionsContext();
+
+  const timelineEditCallbacks = useTimelineEditCallbacks({
+    handleTimelineElementMove,
+    handleTimelineElementsMove,
+    handleTimelineElementResize,
+    handleTimelineGroupResize,
+    handleToggleTrackHidden,
+    handleBlockedTimelineEdit,
+    handleTimelineElementSplit,
+    handleRazorSplit,
+    handleRazorSplitAll,
+  });
+
+  return (
+    <div className={`flex flex-col flex-1 min-h-0${hidden ? " hidden" : ""}`}>
+      <TimelineEditProvider value={timelineEditCallbacks}>
+        <NLEProvider
+          projectId={projectId}
+          refreshKey={refreshKey}
+          activeCompositionPath={activeCompPath}
+          onIframeRef={handlePreviewIframeRef}
+          onCompIdToSrcChange={setCompIdToSrc}
+          onCompositionLoadingChange={setCompositionLoading}
+          onCompositionChange={(compPath) => {
+            // Sync activeCompPath when the user drills down via the timeline or
+            // navigates back — keeps sidebar + thumbnails in sync. Guard no-ops to
+            // avoid circular refresh cascades (activeCompPath → stack → onChange).
+            if (compPath !== activeCompPath) {
+              setActiveCompPath(compPath);
+              refreshPreviewDocumentVersion();
+            }
+          }}
+        >
+          <EditorShellBody
+            left={left}
+            right={right}
+            captionEditMode={captionEditMode}
+            onSelectTimelineElement={handleTimelineElementSelect}
+            onPreviewBlockDrop={handlePreviewBlockDrop}
+            timelineToolbar={timelineToolbar}
+            renderClipContent={renderClipContent}
+            onFileDrop={handleTimelineFileDrop}
+            onAssetDrop={handleTimelineAssetDrop}
+            onBlockDrop={handleTimelineBlockDrop}
+            onDeleteElement={handleTimelineElementDelete}
+            previewOverlay={
+              <PreviewOverlays
+                shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
+                blockPreview={blockPreview}
+                isGestureRecording={isGestureRecording}
+                recordingState={recordingState}
+                onToggleRecording={onToggleRecording}
+                gestureOverlay={gestureOverlay}
+              />
+            }
+          />
+        </NLEProvider>
+      </TimelineEditProvider>
+      <StudioFeedbackBar />
+    </div>
+  );
+}
+
+interface EditorShellBodyProps {
+  left: ReactNode;
+  right: ReactNode;
+  captionEditMode: boolean;
+  previewOverlay: ReactNode;
+  onSelectTimelineElement: (element: TimelineElement | null) => void;
+  onPreviewBlockDrop?: (
+    blockName: string,
+    position: { left: number; top: number },
+  ) => Promise<void> | void;
+  timelineToolbar: ReactNode;
+  renderClipContent: RenderClipContent;
+  onFileDrop: (files: File[], placement?: TimelineDropPlacement) => Promise<void> | void;
+  onAssetDrop: (assetPath: string, placement: TimelineDropPlacement) => Promise<void> | void;
+  onBlockDrop?: (blockName: string, placement: TimelineDropPlacement) => Promise<void> | void;
+  onDeleteElement: (element: TimelineElement) => Promise<void> | void;
+}
+
+function EditorShellBody({
+  left,
+  right,
+  captionEditMode,
+  previewOverlay,
+  onSelectTimelineElement,
+  onPreviewBlockDrop,
+  timelineToolbar,
+  renderClipContent,
+  onFileDrop,
+  onAssetDrop,
+  onBlockDrop,
+  onDeleteElement,
+}: EditorShellBodyProps) {
+  const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
+
+  // Keyboard: Escape to pop composition level
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape" && compositionStack.length > 1) {
+        updateCompositionStack((prev) => prev.slice(0, -1));
+      }
+    },
+    [compositionStack.length, updateCompositionStack],
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      // Shell canvas is a step LIGHTER than the near-black panel cards so the
+      // gaps between panels read as visible seams (CapCut-style).
+      className="flex flex-col flex-1 min-h-0 bg-[#18181B]"
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+    >
+      {/* Top row: [left | preview | right] — outer padding + the 8px resize
+          seams give the panels CapCut-style separation on the dark canvas. */}
+      <div className="flex flex-row flex-1 min-h-0 px-px pt-px">
+        {left}
+        <div className="flex-1 min-w-0 flex flex-col relative">
+          <PreviewPane
+            previewOverlay={previewOverlay}
+            onSelectTimelineElement={onSelectTimelineElement}
+            onPreviewBlockDrop={onPreviewBlockDrop}
+          />
+        </div>
+        {right}
+      </div>
+
+      {/* Full-width timeline row */}
+      <TimelinePane
+        timelineToolbar={timelineToolbar}
+        renderClipContent={renderClipContent}
+        onFileDrop={onFileDrop}
+        onAssetDrop={onAssetDrop}
+        onBlockDrop={onBlockDrop}
+        onDeleteElement={onDeleteElement}
+        onSelectTimelineElement={onSelectTimelineElement}
+        timelineFooter={
+          captionEditMode ? (
+            <div className="border-t border-neutral-800/30 flex-shrink-0" style={{ height: 60 }}>
+              <div className="flex items-center gap-1.5 px-2 py-0.5">
+                <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+                  Captions
+                </span>
+              </div>
+              <CaptionTimeline pixelsPerSecond={100} />
+            </div>
+          ) : undefined
+        }
+      />
+    </div>
+  );
+}

package/src/components/StudioGlobalDragOverlay.tsx

@@ -17,9 +17,7 @@ export function StudioGlobalDragOverlay() {
           <polyline points="7 10 12 15 17 10" />
           <line x1="12" y1="15" x2="12" y2="3" />
         </svg>
-        <span className="text-sm font-medium text-studio-accent">
-          Drop files to import into project
-        </span>
+        <span className="text-sm font-medium text-studio-accent">Drop to add at the playhead</span>
       </div>
     </div>
   );

package/src/components/StudioLeftSidebar.tsx

@@ -18,6 +18,7 @@ export interface StudioLeftSidebarProps {
   linting: boolean;
   lintFindingCount?: number;
   lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
+  onAddAssetToTimeline?: (path: string) => void;
 }
 
 // fallow-ignore-next-line complexity
@@ -30,6 +31,7 @@ export function StudioLeftSidebar({
   linting,
   lintFindingCount,
   lintFindingsByFile,
+  onAddAssetToTimeline,
 }: StudioLeftSidebarProps) {
   const {
     leftCollapsed,
@@ -69,7 +71,7 @@ export function StudioLeftSidebar({
 
   if (leftCollapsed) {
     return (
-      <div className="flex w-10 flex-shrink-0 flex-col items-center border-r border-neutral-800/50 bg-neutral-950 pt-1">
+      <div className="mr-0.5 flex w-10 flex-shrink-0 flex-col items-center rounded-lg border border-neutral-800/50 bg-neutral-950 pt-1">
         <button
           type="button"
           onClick={toggleLeftSidebar}
@@ -147,13 +149,18 @@ export function StudioLeftSidebar({
         onToggleCollapse={toggleLeftSidebar}
         onAddBlock={onAddBlock}
         onPreviewBlock={onPreviewBlock}
+        onAddAssetToTimeline={onAddAssetToTimeline}
       />
+      {/* Vertical resize divider: 3px visible seam, 8px pointer-capture zone via
+          the absolutely-positioned inner hit area. The outer element is w-[3px] so
+          it contributes only 3px of gap in the flex row; the inner -left-[2.5px]
+          element widens the hit area to 8px without affecting layout. */}
       <div
         role="separator"
         aria-label="Resize sidebar"
         aria-orientation="vertical"
         tabIndex={0}
-        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center outline-none focus-visible:bg-studio-accent/20"
+        className="group relative w-[3px] flex-shrink-0 cursor-col-resize outline-none focus-visible:bg-studio-accent/20"
         style={{ touchAction: "none" }}
         onPointerDown={(e) => handlePanelResizeStart("left", e)}
         onPointerMove={handlePanelResizeMove}
@@ -167,7 +174,10 @@ export function StudioLeftSidebar({
           setLeftWidth(Math.max(160, Math.min(maxLeft, leftWidth + delta)));
         }}
       >
-        <div className="h-[52px] w-px bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
+        {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
+        <div className="absolute inset-y-0 -left-[2.5px] w-2" />
+        {/* Visible hairline */}
+        <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>
     </>
   );