Improve media board organization and track lock UI

Author: Sportinger

docs/Features/Math-Scene-Clips-Plan.md

@@ -91,7 +91,7 @@ Scope:
 
 - Add the dedicated `Math` dock panel.
 - Add object list, parameter list, animation list, and inspector.
-- Add reusable Math Scene media items in the Media panel.
+- Expand the reusable Math Scene media items in the Media panel beyond the current default preset item.
 - Add preset buttons: function, point, tangent, area, label, camera move.
 - Add timeline badges and better clip display.
 - Add copy/paste and duplicate behavior for Math Scene objects.

docs/Features/Motion-Design.md

@@ -14,7 +14,7 @@ The motion design system follows `docs/plans/motion-design-system-plan.md`. It i
 - `src/services/properties/PropertyRegistry.ts` describes transform, effect, color, mask, vector-animation, and motion properties without owning Zustand state.
 - `src/stores/timeline/motionClipSlice.ts` can create rectangle/ellipse shape clips, null clips, adjustment clips, update motion definitions, and convert solid clips to motion rectangle clips.
 - `src/components/panels/properties/MotionShapeTab.tsx` exposes primitive, size, corner radius, fill, and stroke controls for motion shape clips.
-- Video track-header context menus can create Motion Rectangle and Motion Ellipse clips at the playhead.
+- The Media panel add/context menu can create Motion Rectangle and Motion Ellipse preset items that can be dragged to video tracks.
 - Solid clip context menus can convert the selected solid to a motion shape while preserving its clip id and timing.
 - The Motion tab exposes a first Grid Replicator section with enable, count, spacing, and opacity fade controls.
 - `src/engine/motion/MotionRenderer.ts` renders rectangle and ellipse primitives into transparent `rgba8unorm` textures using analytic WGSL SDFs.

docs/Features/Timeline.md

@@ -195,7 +195,7 @@ Soloing multiple tracks is supported. Non-solo tracks dim visually when any solo
 
 ### Track Header Context Menu
 
-- Video tracks can create Motion Rectangle, Motion Ellipse, or Math Scene clips at the playhead.
+- Math Scene and Motion Shape presets are created from the Media panel add/context menu and then dragged to video tracks.
 - `Duplicate Track` currently creates a new empty track of the same type.
 - `Delete` is blocked for the last remaining track of that type.
 - Deleting a populated track shows the affected clip count in the menu label/tooltip.

src/components/panels/MediaPanel.tsx

@@ -76,7 +76,14 @@ import { isProxyFrameCountComplete } from '../../stores/mediaStore/helpers/proxy
 
 const log = Logger.create('MediaPanel');
 import { useMediaStore } from '../../stores/mediaStore';
-import type { MediaFile, Composition, ProjectItem, SolidItem, CameraItem } from '../../stores/mediaStore';
+import type {
+  CameraItem,
+  Composition,
+  MediaFile,
+  MotionShapeItem,
+  ProjectItem,
+  SolidItem,
+} from '../../stores/mediaStore';
 import { useTimelineStore } from '../../stores/timeline';
 import { useDockStore } from '../../stores/dockStore';
 import { useContextMenuPosition } from '../../hooks/useContextMenuPosition';
@@ -384,10 +391,12 @@ export function MediaPanel() {
   const compositions = useMediaStore(state => state.compositions);
   const folders = useMediaStore(state => state.folders);
   const textItems = useMediaStore(state => state.textItems);
-  const solidItems = useMediaStore(state => state.solidItems);
-  const meshItems = useMediaStore(state => state.meshItems);
-  const cameraItems = useMediaStore(state => state.cameraItems);
-  const splatEffectorItems = useMediaStore(state => state.splatEffectorItems);
+  const solidItems = useMediaStore(state => state.solidItems ?? []);
+  const meshItems = useMediaStore(state => state.meshItems ?? []);
+  const cameraItems = useMediaStore(state => state.cameraItems ?? []);
+  const splatEffectorItems = useMediaStore(state => state.splatEffectorItems ?? []);
+  const mathSceneItems = useMediaStore(state => state.mathSceneItems ?? []);
+  const motionShapeItems = useMediaStore(state => state.motionShapeItems ?? []);
   const selectedIds = useMediaStore(state => state.selectedIds);
   const expandedFolderIds = useMediaStore(state => state.expandedFolderIds);
   const fileSystemSupported = useMediaStore(state => state.fileSystemSupported);
@@ -423,6 +432,7 @@ export function MediaPanel() {
     removeTextItem,
     createSolidItem,
     getOrCreateSolidFolder,
+    removeSolidItem,
     updateSolidItem,
     createMeshItem,
     getOrCreateMeshFolder,
@@ -433,6 +443,12 @@ export function MediaPanel() {
     createSplatEffectorItem,
     getOrCreateSplatEffectorFolder,
     removeSplatEffectorItem,
+    createMathSceneItem,
+    getOrCreateMathSceneFolder,
+    removeMathSceneItem,
+    createMotionShapeItem,
+    getOrCreateMotionShapeFolder,
+    removeMotionShapeItem,
     setLabelColor,
     importGaussianSplat,
   } = useMediaStore.getState();
@@ -1319,12 +1335,15 @@ export function MediaPanel() {
       else if (compositions.find(c => c.id === id)) removeComposition(id);
       else if (folders.find(f => f.id === id)) removeFolder(id);
       else if (textItems.find(t => t.id === id)) removeTextItem(id);
+      else if (solidItems.find(s => s.id === id)) removeSolidItem(id);
       else if (meshItems.find(m => m.id === id)) removeMeshItem(id);
       else if (cameraItems.find(c => c.id === id)) removeCameraItem(id);
       else if (splatEffectorItems.find(e => e.id === id)) removeSplatEffectorItem(id);
+      else if (mathSceneItems.find(m => m.id === id)) removeMathSceneItem(id);
+      else if (motionShapeItems.find(m => m.id === id)) removeMotionShapeItem(id);
     });
     closeContextMenu();
-  }, [selectedIds, files, compositions, folders, textItems, meshItems, cameraItems, splatEffectorItems, removeFile, removeComposition, removeFolder, removeTextItem, removeMeshItem, removeCameraItem, removeSplatEffectorItem, closeContextMenu]);
+  }, [selectedIds, files, compositions, folders, textItems, solidItems, meshItems, cameraItems, splatEffectorItems, mathSceneItems, motionShapeItems, removeFile, removeComposition, removeFolder, removeTextItem, removeSolidItem, removeMeshItem, removeCameraItem, removeSplatEffectorItem, removeMathSceneItem, removeMotionShapeItem, closeContextMenu]);
 
   // Get the active parent folder (icons view: current open folder, classic/board view: selected folder or null)
   const getActiveParentId = useCallback((): string | null => {
@@ -1389,6 +1408,18 @@ export function MediaPanel() {
     closeContextMenu();
   }, [createSplatEffectorItem, getOrCreateSplatEffectorFolder, closeContextMenu]);
 
+  const handleNewMathScene = useCallback(() => {
+    const mathFolderId = getOrCreateMathSceneFolder();
+    createMathSceneItem(undefined, mathFolderId);
+    closeContextMenu();
+  }, [createMathSceneItem, getOrCreateMathSceneFolder, closeContextMenu]);
+
+  const handleNewMotionShape = useCallback((primitive: import('../../types/motionDesign').ShapePrimitive) => {
+    const motionFolderId = getOrCreateMotionShapeFolder();
+    createMotionShapeItem(primitive, undefined, motionFolderId);
+    closeContextMenu();
+  }, [createMotionShapeItem, getOrCreateMotionShapeFolder, closeContextMenu]);
+
   // Import Gaussian Avatar (.zip) — opens file picker, imports with forced gaussian-avatar type
   const handleImportGaussianSplat = useCallback(() => {
     const input = document.createElement('input');
@@ -1572,6 +1603,42 @@ export function MediaPanel() {
       return;
     }
 
+    if (item.type === 'math-scene') {
+      setExternalDragPayload({
+        kind: 'math-scene',
+        id: item.id,
+        duration: item.duration,
+        hasAudio: false,
+        isAudio: false,
+        isVideo: true,
+      });
+      e.dataTransfer.setData('application/x-math-scene-item-id', item.id);
+      e.dataTransfer.effectAllowed = 'copyMove';
+      if (e.currentTarget instanceof HTMLElement) {
+        e.dataTransfer.setDragImage(e.currentTarget, 10, 10);
+      }
+      return;
+    }
+
+    if (item.type === 'motion-shape') {
+      const motionShape = item as MotionShapeItem;
+      setExternalDragPayload({
+        kind: 'motion-shape',
+        id: item.id,
+        duration: motionShape.duration,
+        hasAudio: false,
+        isAudio: false,
+        isVideo: true,
+        primitive: motionShape.primitive,
+      });
+      e.dataTransfer.setData('application/x-motion-shape-item-id', item.id);
+      e.dataTransfer.effectAllowed = 'copyMove';
+      if (e.currentTarget instanceof HTMLElement) {
+        e.dataTransfer.setDragImage(e.currentTarget, 10, 10);
+      }
+      return;
+    }
+
     // Handle media file drag
     const mediaFile = item as MediaFile;
     if (mediaFile.isImporting || mediaNeedsRelink(mediaFile)) {
@@ -2048,6 +2115,7 @@ export function MediaPanel() {
       if (mf.fps) parts.push(`${mf.fps} fps`);
       if (mf.fileSize) parts.push(formatFileSize(mf.fileSize));
       if (mf.bitrate) parts.push(formatBitrate(mf.bitrate));
+      if (!mf.duration && 'duration' in item && item.duration) parts.push(formatDuration(item.duration));
     }
 
     return parts.join('\n');
@@ -2067,7 +2135,7 @@ export function MediaPanel() {
     const importProgress = getItemImportProgress(item);
 
     // Duration badge: videos + compositions
-    const duration = mediaFile?.duration || comp?.duration;
+    const duration = mediaFile?.duration || comp?.duration || ('duration' in item ? item.duration : undefined);
 
     // Folder item count
     const folderCount = isFolder ? getItemsForParent(item.id).length : 0;
@@ -2126,7 +2194,9 @@ export function MediaPanel() {
     ...meshItems,
     ...cameraItems,
     ...splatEffectorItems,
-  ]), [files, compositions, folders, textItems, solidItems, meshItems, cameraItems, splatEffectorItems]);
+    ...mathSceneItems,
+    ...motionShapeItems,
+  ]), [files, compositions, folders, textItems, solidItems, meshItems, cameraItems, splatEffectorItems, mathSceneItems, motionShapeItems]);
 
   const projectListItems = useMemo<ProjectItem[]>(() => ([
     ...folders,
@@ -2136,8 +2206,10 @@ export function MediaPanel() {
     ...meshItems,
     ...cameraItems,
     ...splatEffectorItems,
+    ...mathSceneItems,
+    ...motionShapeItems,
     ...files,
-  ]), [folders, compositions, textItems, solidItems, meshItems, cameraItems, splatEffectorItems, files]);
+  ]), [folders, compositions, textItems, solidItems, meshItems, cameraItems, splatEffectorItems, mathSceneItems, motionShapeItems, files]);
 
   const allProjectItemsById = useMemo(() => new Map(allProjectItems.map((item) => [item.id, item])), [allProjectItems]);
   const totalItems = allProjectItems.length;
@@ -3051,6 +3123,29 @@ export function MediaPanel() {
       };
     }
 
+    if (item.type === 'math-scene') {
+      return {
+        kind: 'math-scene',
+        id: item.id,
+        duration: item.duration,
+        hasAudio: false,
+        isAudio: false,
+        isVideo: true,
+      };
+    }
+
+    if (item.type === 'motion-shape') {
+      return {
+        kind: 'motion-shape',
+        id: item.id,
+        duration: item.duration,
+        hasAudio: false,
+        isAudio: false,
+        isVideo: true,
+        primitive: item.primitive,
+      };
+    }
+
     if (isImportedMediaFileItem(item) && item.file && !item.isImporting) {
       const isAudioOnly =
         item.file.type.startsWith('audio/') ||
@@ -3896,6 +3991,24 @@ export function MediaPanel() {
                   <span className="add-dropdown-icon"><FileTypeIcon type="splat-effector" /></span>
                   <span>3D Effector</span>
                 </div>
+                <div className="add-dropdown-separator" />
+                <div className="add-dropdown-item" onClick={() => { handleNewMathScene(); setAddDropdownOpen(false); }}>
+                  <span className="add-dropdown-icon"><FileTypeIcon type="math-scene" /></span>
+                  <span>Math Scene</span>
+                </div>
+                <div className="add-dropdown-item has-submenu" onMouseEnter={handleSubmenuHover} onMouseLeave={handleSubmenuLeave}>
+                  <span className="add-dropdown-icon"><FileTypeIcon type="motion-shape" /></span>
+                  <span>Motion Shape</span>
+                  <span className="submenu-arrow">&#9654;</span>
+                  <div className="add-dropdown-submenu">
+                    <div className="add-dropdown-item" onClick={() => { handleNewMotionShape('rectangle'); setAddDropdownOpen(false); }}>
+                      <span>Rectangle</span>
+                    </div>
+                    <div className="add-dropdown-item" onClick={() => { handleNewMotionShape('ellipse'); setAddDropdownOpen(false); }}>
+                      <span>Ellipse</span>
+                    </div>
+                  </div>
+                </div>
                 <div className="add-dropdown-item has-submenu" onMouseEnter={handleSubmenuHover} onMouseLeave={handleSubmenuLeave}>
                   <span className="add-dropdown-icon"><FileTypeIcon type="mesh" /></span>
                   <span>Mesh</span>
@@ -4095,7 +4208,9 @@ export function MediaPanel() {
             solidItems.find(s => s.id === contextMenu.itemId) ||
             meshItems.find(m => m.id === contextMenu.itemId) ||
             cameraItems.find(c => c.id === contextMenu.itemId) ||
-            splatEffectorItems.find(e => e.id === contextMenu.itemId)
+            splatEffectorItems.find(e => e.id === contextMenu.itemId) ||
+            mathSceneItems.find(m => m.id === contextMenu.itemId) ||
+            motionShapeItems.find(m => m.id === contextMenu.itemId)
           : null;
         const isVideoFile = selectedItem && 'type' in selectedItem && selectedItem.type === 'video';
         const isComposition = selectedItem && 'type' in selectedItem && selectedItem.type === 'composition';
@@ -4153,6 +4268,24 @@ export function MediaPanel() {
               <span className="context-menu-icon"><FileTypeIcon type="splat-effector" /></span>
               3D Effector
             </div>
+            <div className="context-menu-separator" />
+            <div className="context-menu-item" onClick={() => { handleNewMathScene(); closeContextMenu(); }}>
+              <span className="context-menu-icon"><FileTypeIcon type="math-scene" /></span>
+              Math Scene
+            </div>
+            <div className="context-menu-item has-submenu" onMouseEnter={handleSubmenuHover} onMouseLeave={handleSubmenuLeave}>
+              <span className="context-menu-icon"><FileTypeIcon type="motion-shape" /></span>
+              <span>Motion Shape</span>
+              <span className="submenu-arrow">&#9654;</span>
+              <div className="context-submenu">
+                <div className="context-menu-item" onClick={() => { handleNewMotionShape('rectangle'); closeContextMenu(); }}>
+                  Rectangle
+                </div>
+                <div className="context-menu-item" onClick={() => { handleNewMotionShape('ellipse'); closeContextMenu(); }}>
+                  Ellipse
+                </div>
+              </div>
+            </div>
             <div className="context-menu-item has-submenu" onMouseEnter={handleSubmenuHover} onMouseLeave={handleSubmenuLeave}>
               <span className="context-menu-icon"><FileTypeIcon type="mesh" /></span>
               <span>Mesh</span>

src/components/panels/media/FileTypeIcon.tsx

@@ -118,6 +118,22 @@ export const FileTypeIcon = memo(({ type, large }: FileTypeIconProps) => {
           <path d="M8 3.5V5.4M8 10.6V12.5M3.5 8H5.4M10.6 8H12.5M4.8 4.8L6.1 6.1M9.9 9.9L11.2 11.2M11.2 4.8L9.9 6.1M6.1 9.9L4.8 11.2" stroke="#a7f0c0" strokeWidth="0.8" strokeLinecap="round"/>
         </svg>
       );
+    case 'math-scene':
+      return (
+        <svg style={style} viewBox="0 0 16 16" fill="none">
+          <rect x="1" y="2" width="14" height="12" rx="1.5" fill="#3f5478" stroke="#79a8f2" strokeWidth="0.7"/>
+          <path d="M3.5 10.5c1.2-4.1 2.1-5.9 3-5.9.8 0 1.1 1.5 1.8 3.3.5 1.4 1 2.5 1.8 2.5.7 0 1.4-1 2.4-3.4" stroke="#d8e8ff" strokeWidth="1" strokeLinecap="round"/>
+          <path d="M3 8h10M8 4v8" stroke="#79a8f2" strokeWidth="0.5" opacity="0.6"/>
+        </svg>
+      );
+    case 'motion-shape':
+      return (
+        <svg style={style} viewBox="0 0 16 16" fill="none">
+          <rect x="1" y="2" width="14" height="12" rx="1.5" fill="#6a4b5b" stroke="#d28aae" strokeWidth="0.7"/>
+          <rect x="4" y="5" width="5" height="5" rx="0.8" fill="#f0b1cb" opacity="0.9"/>
+          <circle cx="10.6" cy="9.6" r="2.2" fill="#8bd6d0" opacity="0.88"/>
+        </svg>
+      );
     case 'gaussian-avatar':
       return (
         <svg style={style} viewBox="0 0 16 16" fill="none">
@@ -318,6 +334,25 @@ const LargeIcon = memo(({ type, style }: { type?: string; style: React.CSSProper
           <circle cx="24" cy="24" r="2.2" fill="#d6ffe4"/>
         </svg>
       );
+    case 'math-scene':
+      return (
+        <svg style={style} viewBox="0 0 48 48" fill="none">
+          <rect x="4" y="8" width="40" height="32" rx="3" fill="#31486c"/>
+          <rect x="4" y="8" width="40" height="32" rx="3" stroke="#79a8f2" strokeWidth="1"/>
+          <path d="M10 30c3.7-12 6.7-17.4 9.2-17.4 2.2 0 3.3 4.3 5.1 9.8 1.5 4.3 3.1 7.2 5.2 7.2 2.3 0 4.8-4.4 8.5-14.2" stroke="#d8e8ff" strokeWidth="2.2" strokeLinecap="round"/>
+          <path d="M9 24h30M24 12v24" stroke="#79a8f2" strokeWidth="1" opacity="0.45"/>
+        </svg>
+      );
+    case 'motion-shape':
+      return (
+        <svg style={style} viewBox="0 0 48 48" fill="none">
+          <rect x="4" y="8" width="40" height="32" rx="3" fill="#59384c"/>
+          <rect x="4" y="8" width="40" height="32" rx="3" stroke="#d28aae" strokeWidth="1"/>
+          <rect x="12" y="15" width="14" height="14" rx="2" fill="#f0b1cb" opacity="0.9"/>
+          <circle cx="31" cy="29" r="7" fill="#8bd6d0" opacity="0.9"/>
+          <path d="M11 33c8-2 17-2 26 0" stroke="#f5d5e3" strokeWidth="1.4" opacity="0.55" strokeLinecap="round"/>
+        </svg>
+      );
     case 'gaussian-avatar':
       return (
         <svg style={style} viewBox="0 0 48 48" fill="none">

src/components/panels/media/board/layout.ts

@@ -97,6 +97,8 @@ export function getMediaBoardTypeLabel(item: MediaBoardItem): string {
   }
   if (item.type === 'splat-effector') return 'Effector';
   if (item.type === 'solid') return 'Solid';
+  if (item.type === 'math-scene') return 'Math Scene';
+  if (item.type === 'motion-shape') return 'Motion Shape';
   if (item.type === 'model') return 'Model';
   return item.type.charAt(0).toUpperCase() + item.type.slice(1);
 }
@@ -118,7 +120,7 @@ export function getMediaBoardItemAspectRatio(item: MediaBoardItem): number {
     return clampMediaBoardNumber(width / height, MEDIA_BOARD_NODE_ASPECT_MIN, MEDIA_BOARD_NODE_ASPECT_MAX);
   }
 
-  if (item.type === 'camera' || item.type === 'model' || item.type === 'splat-effector') {
+  if (item.type === 'camera' || item.type === 'model' || item.type === 'splat-effector' || item.type === 'motion-shape') {
     return 1;
   }
 

src/components/panels/media/board/overviewCanvas.ts

@@ -53,6 +53,8 @@ function getMediaBoardOverviewFill(item: MediaBoardItem): string {
   if (item.type === 'composition') return 'rgba(100, 58, 138, 0.82)';
   if (item.type === 'text') return 'rgba(46, 59, 78, 0.92)';
   if (item.type === 'camera') return 'rgba(139, 108, 45, 0.86)';
+  if (item.type === 'math-scene') return 'rgba(49, 72, 108, 0.9)';
+  if (item.type === 'motion-shape') return 'rgba(89, 56, 76, 0.9)';
   if (item.type === 'image') return 'rgba(38, 64, 84, 0.88)';
   if (item.type === 'video') return 'rgba(45, 43, 64, 0.9)';
   if (item.type === 'audio') return 'rgba(52, 71, 55, 0.88)';

src/components/panels/media/itemTypeGuards.ts

@@ -10,7 +10,9 @@ export function isImportedMediaFileItem(item: ProjectItem): item is MediaFile {
     item.type === 'text' ||
     item.type === 'solid' ||
     item.type === 'camera' ||
-    item.type === 'splat-effector'
+    item.type === 'splat-effector' ||
+    item.type === 'math-scene' ||
+    item.type === 'motion-shape'
   ) {
     return false;
   }