feat(studio): app shell swap — mount EditorShell, retire the legacy engine

What: the final swap (43 files): App mounts EditorShell; contexts, hotkeys,
sidebar (AssetsTab→AssetCard, toolbar, audio row), useTimelineEditing and
the store drop the legacy single-select API and trimmed callbacks; deletes
the 7 files this orphans (StudioPreviewArea, NLELayout,
useTimelineGroupEditing, timelineLayerDrag + suites, legacy hook test);
.fallowrc.jsonc lands at final content, dropping every TEMP(studio-dnd)
suppression — everything shipped unwired is now reachable.

Why: last step of the NLE integration; after this the tree is byte-identical
to the previously-green integration checkpoint.

How: modified files to final content + gate-forced deletions + suppression
cleanup. Tree parity with checkpoint 86dd2a32b verified.

Test plan: tsc --noEmit in studio, studio-server, core; bun run --filter
@hyperframes/studio build; bunx vitest run (full suite); fallow audit clean
with zero remaining TEMP entries; tree-diff vs 86dd2a32b empty.

Author: ukimsanov

.fallowrc.jsonc

@@ -51,60 +51,6 @@ function maxDefinedNumber(...values: Array<number | null>): number | null {
   return Math.max(...finite);
 }
 
-/**
- * When multiple content kinds share the same track number, split them
- * onto separate tracks so the timeline UI shows distinct rows.
- *
- * Preferred kind order (top → bottom): composition, video, image, element, audio.
- * Tracks that contain only one kind are left untouched.
- */
-const KIND_ORDER: Record<string, number> = {
-  composition: 0,
-  video: 1,
-  image: 2,
-  element: 3,
-  audio: 4,
-};
-
-function normalizeTrackAssignments(clips: RuntimeTimelineClip[]): void {
-  if (clips.length === 0) return;
-
-  // Group clips by their raw track number and detect which tracks have mixed kinds
-  const trackKinds = new Map<number, Set<string>>();
-  for (const clip of clips) {
-    const kinds = trackKinds.get(clip.track) ?? new Set();
-    kinds.add(clip.kind);
-    trackKinds.set(clip.track, kinds);
-  }
-
-  const hasMixedTracks = Array.from(trackKinds.values()).some((kinds) => kinds.size > 1);
-  if (!hasMixedTracks) return;
-
-  // Build new contiguous track numbers, splitting mixed tracks by kind
-  let nextTrack = 0;
-  const newTrackMap = new Map<string, number>(); // "origTrack:kind" → newTrack
-
-  const sortedTracks = [...trackKinds.keys()].sort((a, b) => a - b);
-  for (const track of sortedTracks) {
-    const kinds = trackKinds.get(track)!;
-    if (kinds.size === 1) {
-      newTrackMap.set(`${track}:${[...kinds][0]}`, nextTrack++);
-    } else {
-      // Split by kind in preferred order
-      const sorted = [...kinds].sort((a, b) => (KIND_ORDER[a] ?? 99) - (KIND_ORDER[b] ?? 99));
-      for (const kind of sorted) {
-        newTrackMap.set(`${track}:${kind}`, nextTrack++);
-      }
-    }
-  }
-
-  for (const clip of clips) {
-    const key = `${clip.track}:${clip.kind}`;
-    const newTrack = newTrackMap.get(key);
-    if (newTrack != null) clip.track = newTrack;
-  }
-}
-
 function toAbsoluteAssetUrl(rawValue: string | null | undefined): string | null {
   const raw = String(rawValue ?? "").trim();
   if (!raw) return null;
@@ -638,11 +584,12 @@ export function collectRuntimeTimelinePayload(params: {
     }
   }
 
-  // ── Track normalization ────────────────────────────────────────────────
-  // When multiple content kinds (composition, audio, video, …) share the same
-  // data-track-index value, split them onto separate tracks so the timeline UI
-  // shows distinct rows for each kind.
-  normalizeTrackAssignments(clips);
+  // Track assignment honors the authored data-track-index verbatim: a clip stays
+  // on the track it was placed on, regardless of kind. (Previously mixed-kind
+  // tracks were split onto separate rows, but that renumbered tracks — breaking
+  // "drop a clip onto an existing track" and causing the written track to drift
+  // from the displayed one on every move. Track index is display-only; render
+  // never reads it, so honoring it verbatim is the correct NLE behavior.)
 
   for (const compositionNode of compositionNodes) {
     if (compositionNode === root) continue;

packages/core/src/runtime/timeline.ts

@@ -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>
     </>
   );