@qwanyx/carousel 0.1.7 → 0.1.9

package/dist/index.js

@@ -30,13 +30,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnimationEditor: () => AnimationEditor,
   Carousel: () => Carousel,
+  LayerPanel: () => LayerPanel,
+  PreviewCanvas: () => PreviewCanvas,
+  PropertiesPanel: () => PropertiesPanel,
   SlideRenderer: () => SlideRenderer,
   Thumbnails: () => Thumbnails,
+  Timeline: () => Timeline,
+  createComposition: () => createComposition,
   createImageSlide: () => createImageSlide,
+  createKeyframe: () => createKeyframe,
+  createLayerFolder: () => createLayerFolder,
+  createLayerItem: () => createLayerItem,
   createSimpleSlide: () => createSimpleSlide,
   createSlide: () => createSlide,
-  useCarousel: () => useCarousel
+  findLayerById: () => findLayerById,
+  flattenLayers: () => flattenLayers,
+  formatTimecode: () => formatTimecode,
+  getLayerPropertiesAtTime: () => getLayerPropertiesAtTime,
+  interpolateKeyframes: () => interpolateKeyframes,
+  parseTimecode: () => parseTimecode,
+  useCarousel: () => useCarousel,
+  useComposition: () => useComposition,
+  useKeyframes: () => useKeyframes,
+  usePlayback: () => usePlayback
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1406,6 +1424,9 @@ var Carousel = (0, import_react4.forwardRef)(
 );
 Carousel.displayName = "Carousel";
 
+// src/components/animation/AnimationEditor.tsx
+var import_react18 = __toESM(require("react"));
+
 // src/types.ts
 function createSimpleSlide(id, objects, options) {
   return {
@@ -1446,14 +1467,2537 @@ function createImageSlide(id, src, options) {
   }
   return createSimpleSlide(id, objects, { background: options?.background });
 }
+function formatTimecode(ms) {
+  const minutes = Math.floor(ms / 6e4);
+  const seconds = Math.floor(ms % 6e4 / 1e3);
+  const millis = ms % 1e3;
+  return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${millis.toString().padStart(3, "0")}`;
+}
+function parseTimecode(str) {
+  const parts = str.split(":");
+  if (parts.length !== 3) return 0;
+  const minutes = parseInt(parts[0], 10) || 0;
+  const seconds = parseInt(parts[1], 10) || 0;
+  const millis = parseInt(parts[2], 10) || 0;
+  return minutes * 6e4 + seconds * 1e3 + millis;
+}
+function createComposition(id, name, options) {
+  return {
+    id,
+    name,
+    width: 1920,
+    height: 1080,
+    aspectRatio: "16/9",
+    duration: 3e4,
+    // 30 seconds default
+    layers: [],
+    ...options
+  };
+}
+function createLayerFolder(id, name, children = []) {
+  return {
+    id,
+    name,
+    type: "folder",
+    visible: true,
+    locked: false,
+    opacity: 1,
+    children
+  };
+}
+function createLayerItem(id, name, object) {
+  return {
+    id,
+    name,
+    type: "item",
+    visible: true,
+    locked: false,
+    opacity: 1,
+    object
+  };
+}
+function createKeyframe(time, properties, easing = "ease-out") {
+  return {
+    id: `kf-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+    time,
+    properties,
+    easing
+  };
+}
+
+// src/components/animation/hooks/useComposition.ts
+var import_react5 = require("react");
+function createInitialState(composition) {
+  return {
+    composition,
+    selection: {
+      layerIds: [],
+      keyframeIds: []
+    },
+    playback: {
+      isPlaying: false,
+      currentTime: 0,
+      playbackRate: 1
+    },
+    timeline: {
+      zoom: 50,
+      // 50px per second
+      scrollX: 0,
+      scrollY: 0,
+      snapToGrid: true,
+      gridSize: 100
+      // Snap to 100ms
+    },
+    tool: "select",
+    panels: {
+      layers: true,
+      properties: true,
+      timeline: true
+    },
+    isDirty: false
+  };
+}
+function findLayerById(layers, id) {
+  for (const layer of layers) {
+    if (layer.id === id) return layer;
+    if (layer.type === "folder") {
+      const found = findLayerById(layer.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function updateLayerInTree(layers, layerId, updater) {
+  return layers.map((layer) => {
+    if (layer.id === layerId) {
+      return updater(layer);
+    }
+    if (layer.type === "folder") {
+      return {
+        ...layer,
+        children: updateLayerInTree(layer.children, layerId, updater)
+      };
+    }
+    return layer;
+  });
+}
+function removeLayerFromTree(layers, layerId) {
+  return layers.filter((layer) => layer.id !== layerId).map((layer) => {
+    if (layer.type === "folder") {
+      return {
+        ...layer,
+        children: removeLayerFromTree(layer.children, layerId)
+      };
+    }
+    return layer;
+  });
+}
+function addLayerToTree(layers, newLayer, parentId, index) {
+  if (!parentId) {
+    const idx = index ?? layers.length;
+    return [...layers.slice(0, idx), newLayer, ...layers.slice(idx)];
+  }
+  return layers.map((layer) => {
+    if (layer.id === parentId && layer.type === "folder") {
+      const idx = index ?? layer.children.length;
+      return {
+        ...layer,
+        children: [
+          ...layer.children.slice(0, idx),
+          newLayer,
+          ...layer.children.slice(idx)
+        ]
+      };
+    }
+    if (layer.type === "folder") {
+      return {
+        ...layer,
+        children: addLayerToTree(layer.children, newLayer, parentId, index)
+      };
+    }
+    return layer;
+  });
+}
+function flattenLayers(layers, collapsedIds = /* @__PURE__ */ new Set()) {
+  const result = [];
+  for (const layer of layers) {
+    result.push(layer);
+    if (layer.type === "folder" && !collapsedIds.has(layer.id) && !layer.collapsed) {
+      result.push(...flattenLayers(layer.children, collapsedIds));
+    }
+  }
+  return result;
+}
+function editorReducer(state, action) {
+  switch (action.type) {
+    // Composition
+    case "SET_COMPOSITION":
+      return { ...state, composition: action.payload, isDirty: false };
+    case "UPDATE_COMPOSITION":
+      return {
+        ...state,
+        composition: { ...state.composition, ...action.payload },
+        isDirty: true
+      };
+    // Layers
+    case "ADD_LAYER":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: addLayerToTree(
+            state.composition.layers,
+            action.payload.layer,
+            action.payload.parentId,
+            action.payload.index
+          )
+        },
+        isDirty: true
+      };
+    case "REMOVE_LAYER":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: removeLayerFromTree(state.composition.layers, action.payload.layerId)
+        },
+        selection: {
+          ...state.selection,
+          layerIds: state.selection.layerIds.filter((id) => id !== action.payload.layerId)
+        },
+        isDirty: true
+      };
+    case "UPDATE_LAYER":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.layerId, (layer) => ({
+            ...layer,
+            ...action.payload.updates
+          }))
+        },
+        isDirty: true
+      };
+    case "TOGGLE_LAYER_VISIBILITY":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.layerId, (layer) => ({
+            ...layer,
+            visible: !layer.visible
+          }))
+        },
+        isDirty: true
+      };
+    case "TOGGLE_LAYER_LOCK":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.layerId, (layer) => ({
+            ...layer,
+            locked: !layer.locked
+          }))
+        },
+        isDirty: true
+      };
+    case "TOGGLE_FOLDER_COLLAPSED":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.folderId, (layer) => {
+            if (layer.type !== "folder") return layer;
+            return { ...layer, collapsed: !layer.collapsed };
+          })
+        }
+      };
+    // Keyframes
+    case "ADD_KEYFRAME":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.layerId, (layer) => ({
+            ...layer,
+            keyframes: [...layer.keyframes || [], action.payload.keyframe].sort((a, b) => a.time - b.time)
+          }))
+        },
+        isDirty: true
+      };
+    case "REMOVE_KEYFRAME":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.layerId, (layer) => ({
+            ...layer,
+            keyframes: (layer.keyframes || []).filter((kf) => kf.id !== action.payload.keyframeId)
+          }))
+        },
+        selection: {
+          ...state.selection,
+          keyframeIds: state.selection.keyframeIds.filter((id) => id !== action.payload.keyframeId)
+        },
+        isDirty: true
+      };
+    case "UPDATE_KEYFRAME":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.layerId, (layer) => ({
+            ...layer,
+            keyframes: (layer.keyframes || []).map(
+              (kf) => kf.id === action.payload.keyframeId ? { ...kf, ...action.payload.updates } : kf
+            )
+          }))
+        },
+        isDirty: true
+      };
+    case "MOVE_KEYFRAME":
+      return {
+        ...state,
+        composition: {
+          ...state.composition,
+          layers: updateLayerInTree(state.composition.layers, action.payload.layerId, (layer) => ({
+            ...layer,
+            keyframes: (layer.keyframes || []).map((kf) => kf.id === action.payload.keyframeId ? { ...kf, time: action.payload.newTime } : kf).sort((a, b) => a.time - b.time)
+          }))
+        },
+        isDirty: true
+      };
+    // Selection
+    case "SELECT_LAYERS":
+      return {
+        ...state,
+        selection: {
+          ...state.selection,
+          layerIds: action.payload.additive ? [.../* @__PURE__ */ new Set([...state.selection.layerIds, ...action.payload.layerIds])] : action.payload.layerIds
+        }
+      };
+    case "SELECT_KEYFRAMES":
+      return {
+        ...state,
+        selection: {
+          ...state.selection,
+          keyframeIds: action.payload.additive ? [.../* @__PURE__ */ new Set([...state.selection.keyframeIds, ...action.payload.keyframeIds])] : action.payload.keyframeIds
+        }
+      };
+    case "CLEAR_SELECTION":
+      return {
+        ...state,
+        selection: { layerIds: [], keyframeIds: [] }
+      };
+    // Playback
+    case "PLAY":
+      return { ...state, playback: { ...state.playback, isPlaying: true } };
+    case "PAUSE":
+      return { ...state, playback: { ...state.playback, isPlaying: false } };
+    case "STOP":
+      return { ...state, playback: { ...state.playback, isPlaying: false, currentTime: 0 } };
+    case "SEEK":
+      return { ...state, playback: { ...state.playback, currentTime: action.payload.time } };
+    case "SET_PLAYBACK_RATE":
+      return { ...state, playback: { ...state.playback, playbackRate: action.payload.rate } };
+    // Timeline view
+    case "SET_TIMELINE_ZOOM":
+      return { ...state, timeline: { ...state.timeline, zoom: action.payload.zoom } };
+    case "SET_TIMELINE_SCROLL":
+      return {
+        ...state,
+        timeline: {
+          ...state.timeline,
+          scrollX: action.payload.scrollX ?? state.timeline.scrollX,
+          scrollY: action.payload.scrollY ?? state.timeline.scrollY
+        }
+      };
+    case "TOGGLE_SNAP_TO_GRID":
+      return { ...state, timeline: { ...state.timeline, snapToGrid: !state.timeline.snapToGrid } };
+    case "SET_GRID_SIZE":
+      return { ...state, timeline: { ...state.timeline, gridSize: action.payload.size } };
+    // Tool
+    case "SET_TOOL":
+      return { ...state, tool: action.payload.tool };
+    // Panels
+    case "TOGGLE_PANEL":
+      return {
+        ...state,
+        panels: { ...state.panels, [action.payload.panel]: !state.panels[action.payload.panel] }
+      };
+    // History (placeholder - would need separate history implementation)
+    case "UNDO":
+    case "REDO":
+      return state;
+    case "MARK_SAVED":
+      return { ...state, isDirty: false };
+    default:
+      return state;
+  }
+}
+function useComposition(initialComposition) {
+  const [state, dispatch] = (0, import_react5.useReducer)(editorReducer, initialComposition, createInitialState);
+  const selectedLayers = (0, import_react5.useMemo)(() => {
+    return state.selection.layerIds.map((id) => findLayerById(state.composition.layers, id)).filter((layer) => layer !== null);
+  }, [state.composition.layers, state.selection.layerIds]);
+  const flattenedLayers = (0, import_react5.useMemo)(() => {
+    const collapsedIds = /* @__PURE__ */ new Set();
+    const collectCollapsed = (layers) => {
+      for (const layer of layers) {
+        if (layer.type === "folder") {
+          if (layer.collapsed) collapsedIds.add(layer.id);
+          collectCollapsed(layer.children);
+        }
+      }
+    };
+    collectCollapsed(state.composition.layers);
+    return flattenLayers(state.composition.layers, collapsedIds);
+  }, [state.composition.layers]);
+  return {
+    state,
+    dispatch,
+    selectedLayers,
+    flattenedLayers
+  };
+}
+
+// src/components/animation/hooks/usePlayback.ts
+var import_react6 = require("react");
+function usePlayback({
+  duration,
+  currentTime,
+  isPlaying,
+  playbackRate,
+  audioTracks,
+  onTimeUpdate,
+  onPlaybackEnd
+}) {
+  const animationFrameRef = (0, import_react6.useRef)(null);
+  const lastTimeRef = (0, import_react6.useRef)(0);
+  const audioElementsRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react6.useEffect)(() => {
+    if (!audioTracks) return;
+    const audioElements = /* @__PURE__ */ new Map();
+    for (const track of audioTracks) {
+      const audio = new Audio(track.src);
+      audio.volume = track.volume ?? 1;
+      audio.loop = track.loop ?? false;
+      audio.muted = track.muted ?? false;
+      audioElements.set(track.id, audio);
+    }
+    audioElementsRef.current = audioElements;
+    return () => {
+      for (const audio of audioElements.values()) {
+        audio.pause();
+        audio.src = "";
+      }
+    };
+  }, [audioTracks]);
+  const syncAudio = (0, import_react6.useCallback)(
+    (time, playing) => {
+      if (!audioTracks) return;
+      for (const track of audioTracks) {
+        const audio = audioElementsRef.current.get(track.id);
+        if (!audio) continue;
+        const trackStart = track.offset ?? 0;
+        const trackEnd = trackStart + (audio.duration * 1e3 || Infinity);
+        const audioStart = track.startTime ?? 0;
+        if (time >= trackStart && time < trackEnd) {
+          const audioTime = (time - trackStart + audioStart) / 1e3;
+          if (Math.abs(audio.currentTime - audioTime) > 0.1) {
+            audio.currentTime = audioTime;
+          }
+          if (playing && audio.paused) {
+            audio.playbackRate = playbackRate;
+            audio.play().catch(() => {
+            });
+          } else if (!playing && !audio.paused) {
+            audio.pause();
+          }
+        } else {
+          if (!audio.paused) {
+            audio.pause();
+          }
+        }
+      }
+    },
+    [audioTracks, playbackRate]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (!isPlaying) {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      syncAudio(currentTime, false);
+      return;
+    }
+    lastTimeRef.current = performance.now();
+    const tick = (now) => {
+      const deltaMs = (now - lastTimeRef.current) * playbackRate;
+      lastTimeRef.current = now;
+      const newTime = Math.min(currentTime + deltaMs, duration);
+      if (newTime >= duration) {
+        onTimeUpdate(duration);
+        onPlaybackEnd?.();
+        return;
+      }
+      onTimeUpdate(newTime);
+      syncAudio(newTime, true);
+      animationFrameRef.current = requestAnimationFrame(tick);
+    };
+    animationFrameRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [isPlaying, currentTime, duration, playbackRate, onTimeUpdate, onPlaybackEnd, syncAudio]);
+  const seek = (0, import_react6.useCallback)(
+    (time) => {
+      onTimeUpdate(Math.max(0, Math.min(time, duration)));
+      syncAudio(time, isPlaying);
+    },
+    [duration, isPlaying, onTimeUpdate, syncAudio]
+  );
+  const getAudioWaveform = (0, import_react6.useCallback)(async (trackId) => {
+    const audio = audioElementsRef.current.get(trackId);
+    if (!audio) return null;
+    try {
+      const response = await fetch(audio.src);
+      const arrayBuffer = await response.arrayBuffer();
+      const audioContext = new AudioContext();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      const channelData = audioBuffer.getChannelData(0);
+      const samples = 1e3;
+      const blockSize = Math.floor(channelData.length / samples);
+      const waveform = [];
+      for (let i = 0; i < samples; i++) {
+        let sum = 0;
+        for (let j = 0; j < blockSize; j++) {
+          sum += Math.abs(channelData[i * blockSize + j]);
+        }
+        waveform.push(sum / blockSize);
+      }
+      const max = Math.max(...waveform);
+      return waveform.map((v) => v / max);
+    } catch {
+      return null;
+    }
+  }, []);
+  return {
+    seek,
+    getAudioWaveform,
+    audioElements: audioElementsRef.current
+  };
+}
+
+// src/components/animation/layers/LayerPanel.tsx
+var import_react9 = __toESM(require("react"));
+
+// src/components/animation/layers/LayerItem.tsx
+var import_react7 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function LayerItemRow({
+  layer,
+  depth,
+  isSelected,
+  onSelect,
+  onToggleVisibility,
+  onToggleLock,
+  onRename,
+  onDelete
+}) {
+  const [isEditing, setIsEditing] = import_react7.default.useState(false);
+  const [editName, setEditName] = import_react7.default.useState(layer.name);
+  const inputRef = import_react7.default.useRef(null);
+  import_react7.default.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  const handleDoubleClick = () => {
+    if (!layer.locked) {
+      setIsEditing(true);
+      setEditName(layer.name);
+    }
+  };
+  const handleNameSubmit = () => {
+    if (editName.trim() && editName !== layer.name) {
+      onRename(layer.id, editName.trim());
+    }
+    setIsEditing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleNameSubmit();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditName(layer.name);
+    }
+  };
+  const getObjectIcon = () => {
+    switch (layer.object.type) {
+      case "image":
+        return "image";
+      case "text":
+        return "text_fields";
+      case "video":
+        return "videocam";
+      case "audio":
+        return "audiotrack";
+      case "shape":
+        return "category";
+      case "component":
+        return "widgets";
+      case "group":
+        return "layers";
+      default:
+        return "lens";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: `
+        flex items-center h-8 px-2 cursor-pointer select-none group
+        ${isSelected ? "bg-[#4a6fa5]/40" : "hover:bg-[#3a3a3a]"}
+        ${!layer.visible ? "opacity-50" : ""}
+      `,
+      style: { paddingLeft: `${depth * 16 + 8}px` },
+      onClick: (e) => onSelect(layer.id, e.shiftKey || e.ctrlKey || e.metaKey),
+      onDoubleClick: handleDoubleClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500 mr-2", style: { fontSize: 16 }, children: getObjectIcon() }),
+        isEditing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value: editName,
+            onChange: (e) => setEditName(e.target.value),
+            onBlur: handleNameSubmit,
+            onKeyDown: handleKeyDown,
+            className: "flex-1 px-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-blue-500 rounded outline-none",
+            onClick: (e) => e.stopPropagation()
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1 text-sm text-neutral-300 truncate", children: layer.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onToggleVisibility(layer.id);
+              },
+              className: "p-0.5 hover:bg-[#4a4a4a] rounded",
+              title: layer.visible ? "Hide" : "Show",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: layer.visible ? "visibility" : "visibility_off" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onToggleLock(layer.id);
+              },
+              className: "p-0.5 hover:bg-[#4a4a4a] rounded",
+              title: layer.locked ? "Unlock" : "Lock",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: layer.locked ? "lock" : "lock_open" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete(layer.id);
+              },
+              className: "p-0.5 hover:bg-red-900/50 rounded",
+              title: "Delete",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons text-neutral-500 hover:text-red-400", style: { fontSize: 14 }, children: "delete" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/animation/layers/LayerFolder.tsx
+var import_react8 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function LayerFolderRow({
+  folder,
+  depth,
+  selectedIds,
+  onSelect,
+  onToggleVisibility,
+  onToggleLock,
+  onToggleCollapsed,
+  onRename,
+  onDelete,
+  renderLayer
+}) {
+  const [isEditing, setIsEditing] = import_react8.default.useState(false);
+  const [editName, setEditName] = import_react8.default.useState(folder.name);
+  const inputRef = import_react8.default.useRef(null);
+  const isSelected = selectedIds.includes(folder.id);
+  import_react8.default.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  const handleDoubleClick = (e) => {
+    e.stopPropagation();
+    if (!folder.locked) {
+      setIsEditing(true);
+      setEditName(folder.name);
+    }
+  };
+  const handleNameSubmit = () => {
+    if (editName.trim() && editName !== folder.name) {
+      onRename(folder.id, editName.trim());
+    }
+    setIsEditing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      handleNameSubmit();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditName(folder.name);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: `
+          flex items-center h-8 px-2 cursor-pointer select-none
+          ${isSelected ? "bg-[#4a6fa5]/40" : "hover:bg-[#3a3a3a]"}
+          ${!folder.visible ? "opacity-50" : ""}
+        `,
+        style: { paddingLeft: `${depth * 16 + 8}px` },
+        onClick: (e) => onSelect(folder.id, e.shiftKey || e.ctrlKey || e.metaKey),
+        onDoubleClick: handleDoubleClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onToggleCollapsed(folder.id);
+              },
+              className: "p-0.5 hover:bg-[#4a4a4a] rounded mr-1",
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "span",
+                {
+                  className: "material-icons text-neutral-500 transition-transform",
+                  style: {
+                    fontSize: 14,
+                    transform: folder.collapsed ? "rotate(-90deg)" : "rotate(0deg)"
+                  },
+                  children: "expand_more"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-amber-500 mr-2", style: { fontSize: 16 }, children: folder.collapsed ? "folder" : "folder_open" }),
+          isEditing ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: editName,
+              onChange: (e) => setEditName(e.target.value),
+              onBlur: handleNameSubmit,
+              onKeyDown: handleKeyDown,
+              className: "flex-1 px-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-blue-500 rounded outline-none",
+              onClick: (e) => e.stopPropagation()
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1 text-sm font-medium text-neutral-200 truncate", children: folder.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-xs text-neutral-500 mr-2", children: [
+            "(",
+            folder.children.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleVisibility(folder.id);
+                },
+                className: "p-0.5 hover:bg-[#4a4a4a] rounded",
+                title: folder.visible ? "Hide" : "Show",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: folder.visible ? "visibility" : "visibility_off" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleLock(folder.id);
+                },
+                className: "p-0.5 hover:bg-[#4a4a4a] rounded",
+                title: folder.locked ? "Unlock" : "Lock",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 14 }, children: folder.locked ? "lock" : "lock_open" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDelete(folder.id);
+                },
+                className: "p-0.5 hover:bg-red-900/50 rounded",
+                title: "Delete folder",
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "material-icons text-neutral-500 hover:text-red-400", style: { fontSize: 14 }, children: "delete" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    !folder.collapsed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children: folder.children.map((child) => renderLayer(child, depth + 1)) })
+  ] });
+}
+
+// src/components/animation/layers/LayerPanel.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function LayerPanel({
+  layers,
+  selectedIds,
+  onSelect,
+  onToggleVisibility,
+  onToggleLock,
+  onToggleCollapsed,
+  onAddFolder,
+  onAddItem,
+  onDelete,
+  onRename
+}) {
+  const [showAddMenu, setShowAddMenu] = import_react9.default.useState(false);
+  const renderLayer = (layer, depth) => {
+    if (layer.type === "folder") {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        LayerFolderRow,
+        {
+          folder: layer,
+          depth,
+          selectedIds,
+          onSelect,
+          onToggleVisibility,
+          onToggleLock,
+          onToggleCollapsed,
+          onRename,
+          onDelete,
+          renderLayer
+        },
+        layer.id
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      LayerItemRow,
+      {
+        layer,
+        depth,
+        isSelected: selectedIds.includes(layer.id),
+        onSelect,
+        onToggleVisibility,
+        onToggleLock,
+        onRename,
+        onDelete
+      },
+      layer.id
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col h-full bg-[#232323] border-r border-[#3a3a3a]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between px-3 py-2 border-b border-[#3a3a3a]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Layers" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            onClick: () => setShowAddMenu(!showAddMenu),
+            className: "p-1 hover:bg-[#3a3a3a] rounded",
+            title: "Add layer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 18 }, children: "add" })
+          }
+        ),
+        showAddMenu && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              className: "fixed inset-0 z-10",
+              onClick: () => setShowAddMenu(false)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "absolute right-0 top-full mt-1 bg-[#2a2a2a] rounded-lg shadow-lg border border-[#3a3a3a] py-1 z-20 min-w-[140px]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  onAddFolder();
+                  setShowAddMenu(false);
+                },
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-amber-500", style: { fontSize: 16 }, children: "create_new_folder" }),
+                  "New Folder"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-px bg-[#3a3a3a] my-1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  onAddItem("image");
+                  setShowAddMenu(false);
+                },
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-blue-400", style: { fontSize: 16 }, children: "image" }),
+                  "Image"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  onAddItem("text");
+                  setShowAddMenu(false);
+                },
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-green-400", style: { fontSize: 16 }, children: "text_fields" }),
+                  "Text"
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  onAddItem("shape");
+                  setShowAddMenu(false);
+                },
+                className: "w-full px-3 py-1.5 text-left text-sm text-neutral-300 hover:bg-[#3a3a3a] flex items-center gap-2",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons text-purple-400", style: { fontSize: 16 }, children: "category" }),
+                  "Shape"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 overflow-y-auto", children: layers.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-neutral-500 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "material-icons mb-2", style: { fontSize: 32 }, children: "layers" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: "No layers yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs mt-1", children: "Click + to add a layer" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "py-1", children: layers.map((layer) => renderLayer(layer, 0)) }) }),
+    selectedIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-3 py-2 border-t border-[#3a3a3a] bg-[#1a1a1a]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-xs text-neutral-400", children: [
+      selectedIds.length,
+      " layer",
+      selectedIds.length > 1 ? "s" : "",
+      " selected"
+    ] }) })
+  ] });
+}
+
+// src/components/animation/timeline/Timeline.tsx
+var import_react14 = __toESM(require("react"));
+
+// src/components/animation/timeline/TimelineRuler.tsx
+var import_react10 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function TimelineRuler({
+  duration,
+  pixelsPerSecond,
+  scrollX,
+  viewportWidth,
+  onSeek
+}) {
+  const rulerRef = import_react10.default.useRef(null);
+  const totalWidth = duration / 1e3 * pixelsPerSecond;
+  const startTime = scrollX / pixelsPerSecond * 1e3;
+  const endTime = (scrollX + viewportWidth) / pixelsPerSecond * 1e3;
+  const getTickInterval = () => {
+    if (pixelsPerSecond >= 200) {
+      return { major: 1e3, minor: 100 };
+    } else if (pixelsPerSecond >= 100) {
+      return { major: 1e3, minor: 500 };
+    } else if (pixelsPerSecond >= 50) {
+      return { major: 5e3, minor: 1e3 };
+    } else if (pixelsPerSecond >= 20) {
+      return { major: 1e4, minor: 5e3 };
+    } else {
+      return { major: 3e4, minor: 1e4 };
+    }
+  };
+  const { major, minor } = getTickInterval();
+  const ticks = [];
+  const firstTick = Math.floor(startTime / minor) * minor;
+  for (let time = firstTick; time <= Math.min(endTime + minor, duration); time += minor) {
+    ticks.push({
+      time,
+      isMajor: time % major === 0
+    });
+  }
+  const handleClick = (e) => {
+    if (!rulerRef.current) return;
+    const rect = rulerRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left + scrollX;
+    const time = x / pixelsPerSecond * 1e3;
+    onSeek(Math.max(0, Math.min(time, duration)));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      ref: rulerRef,
+      className: "relative h-6 bg-[#1a1a1a] border-b border-[#3a3a3a] cursor-pointer select-none",
+      style: { width: totalWidth },
+      onClick: handleClick,
+      children: ticks.map(({ time, isMajor }) => {
+        const x = time / 1e3 * pixelsPerSecond;
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            className: "absolute top-0",
+            style: { left: x },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "div",
+                {
+                  className: `w-px ${isMajor ? "h-4 bg-neutral-500" : "h-2 bg-neutral-600"}`,
+                  style: { marginTop: isMajor ? 0 : 8 }
+                }
+              ),
+              isMajor && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "span",
+                {
+                  className: "absolute text-[10px] text-neutral-400 whitespace-nowrap",
+                  style: {
+                    top: 12,
+                    left: 2
+                  },
+                  children: formatTimecode(time)
+                }
+              )
+            ]
+          },
+          time
+        );
+      })
+    }
+  );
+}
+
+// src/components/animation/timeline/Playhead.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Playhead({ currentTime, pixelsPerSecond, height, onSeek }) {
+  const x = currentTime / 1e3 * pixelsPerSecond;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: "absolute top-0 pointer-events-none z-20",
+      style: {
+        left: x,
+        height,
+        transform: "translateX(-50%)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: "absolute -top-1 left-1/2 -translate-x-1/2 bg-red-500 text-white text-[10px] px-1 rounded whitespace-nowrap",
+              style: { transform: "translateX(-50%)" },
+              children: formatTimecode(currentTime)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: "absolute top-4 left-1/2 border-l-4 border-r-4 border-t-6 border-l-transparent border-r-transparent border-t-red-500",
+              style: { transform: "translateX(-50%)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "div",
+          {
+            className: "w-0.5 bg-red-500",
+            style: { height: height - 20, marginTop: 20 }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/animation/timeline/KeyframeTrack.tsx
+var import_react12 = __toESM(require("react"));
+
+// src/components/animation/timeline/KeyframeDiamond.tsx
+var import_react11 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function KeyframeDiamond({
+  keyframe,
+  pixelsPerSecond,
+  isSelected,
+  onSelect,
+  onMove,
+  onDelete,
+  snapToGrid
+}) {
+  const [isDragging, setIsDragging] = import_react11.default.useState(false);
+  const [dragStartX, setDragStartX] = import_react11.default.useState(0);
+  const [originalTime, setOriginalTime] = import_react11.default.useState(keyframe.time);
+  const x = keyframe.time / 1e3 * pixelsPerSecond;
+  const handleMouseDown = (e) => {
+    e.stopPropagation();
+    onSelect(keyframe.id, e.shiftKey || e.ctrlKey || e.metaKey);
+    setIsDragging(true);
+    setDragStartX(e.clientX);
+    setOriginalTime(keyframe.time);
+  };
+  import_react11.default.useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      const deltaX = e.clientX - dragStartX;
+      const deltaTime = deltaX / pixelsPerSecond * 1e3;
+      let newTime = Math.max(0, originalTime + deltaTime);
+      if (snapToGrid) {
+        newTime = snapToGrid(newTime);
+      }
+      onMove(keyframe.id, newTime);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, dragStartX, originalTime, pixelsPerSecond, snapToGrid, onMove, keyframe.id]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Delete" || e.key === "Backspace") {
+      e.preventDefault();
+      onDelete(keyframe.id);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      className: `
+        absolute top-1/2 -translate-y-1/2 w-3 h-3 cursor-pointer
+        transform rotate-45 transition-colors
+        ${isSelected ? "bg-blue-500 ring-2 ring-blue-300" : "bg-amber-500 hover:bg-amber-400"}
+        ${isDragging ? "scale-125" : ""}
+      `,
+      style: {
+        left: x,
+        transform: "translateX(-50%) translateY(-50%) rotate(45deg)"
+      },
+      onMouseDown: handleMouseDown,
+      onKeyDown: handleKeyDown,
+      onContextMenu: (e) => {
+        e.preventDefault();
+        onDelete(keyframe.id);
+      },
+      tabIndex: 0,
+      title: `Keyframe at ${Math.round(keyframe.time)}ms`
+    }
+  );
+}
+
+// src/components/animation/timeline/KeyframeTrack.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function KeyframeTrack({
+  layer,
+  depth,
+  duration,
+  pixelsPerSecond,
+  selectedKeyframeIds,
+  isLayerSelected,
+  onKeyframeSelect,
+  onKeyframeMove,
+  onKeyframeAdd,
+  onKeyframeDelete,
+  snapToGrid
+}) {
+  const trackRef = import_react12.default.useRef(null);
+  const totalWidth = duration / 1e3 * pixelsPerSecond;
+  const handleDoubleClick = (e) => {
+    if (!trackRef.current) return;
+    const rect = trackRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    let time = x / pixelsPerSecond * 1e3;
+    if (snapToGrid) {
+      time = snapToGrid(time);
+    }
+    onKeyframeAdd(layer.id, time);
+  };
+  const keyframes = layer.keyframes || [];
+  const isFolder = layer.type === "folder";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      ref: trackRef,
+      className: `
+        relative h-7 border-b border-[#2a2a2a]
+        ${isLayerSelected ? "bg-[#4a6fa5]/20" : "hover:bg-[#2a2a2a]"}
+        ${!layer.visible ? "opacity-50" : ""}
+      `,
+      style: {
+        width: totalWidth,
+        paddingLeft: depth * 16
+      },
+      onDoubleClick: handleDoubleClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: `
+          absolute top-1 bottom-1 left-0 right-0 rounded
+          ${isFolder ? "bg-amber-900/30" : "bg-[#2a2a2a]"}
+        `,
+            style: { marginLeft: depth * 16 }
+          }
+        ),
+        keyframes.map((kf) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          KeyframeDiamond,
+          {
+            keyframe: kf,
+            pixelsPerSecond,
+            isSelected: selectedKeyframeIds.includes(kf.id),
+            onSelect: onKeyframeSelect,
+            onMove: (kfId, newTime) => onKeyframeMove(layer.id, kfId, newTime),
+            onDelete: (kfId) => onKeyframeDelete(layer.id, kfId),
+            snapToGrid
+          },
+          kf.id
+        )),
+        keyframes.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "svg",
+          {
+            className: "absolute top-0 left-0 pointer-events-none",
+            style: { width: totalWidth, height: "100%" },
+            children: keyframes.slice(0, -1).map((kf, i) => {
+              const nextKf = keyframes[i + 1];
+              const x1 = kf.time / 1e3 * pixelsPerSecond;
+              const x2 = nextKf.time / 1e3 * pixelsPerSecond;
+              return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "line",
+                {
+                  x1,
+                  y1: "50%",
+                  x2,
+                  y2: "50%",
+                  stroke: isFolder ? "#f59e0b" : "#6b7280",
+                  strokeWidth: 1,
+                  strokeDasharray: "2,2"
+                },
+                `${kf.id}-${nextKf.id}`
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/animation/timeline/AudioTrack.tsx
+var import_react13 = __toESM(require("react"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function AudioTrack({
+  track,
+  duration,
+  pixelsPerSecond,
+  waveformData,
+  isSelected,
+  onSelect,
+  onMuteToggle,
+  onVolumeChange
+}) {
+  const trackRef = import_react13.default.useRef(null);
+  const canvasRef = import_react13.default.useRef(null);
+  const totalWidth = duration / 1e3 * pixelsPerSecond;
+  const trackOffset = track.offset ?? 0;
+  const trackStart = trackOffset / 1e3 * pixelsPerSecond;
+  import_react13.default.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !waveformData || waveformData.length === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height } = canvas;
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = track.muted ? "#d1d5db" : "#3b82f6";
+    const barWidth = width / waveformData.length;
+    const centerY = height / 2;
+    for (let i = 0; i < waveformData.length; i++) {
+      const barHeight = waveformData[i] * height * 0.8;
+      ctx.fillRect(
+        i * barWidth,
+        centerY - barHeight / 2,
+        Math.max(1, barWidth - 1),
+        barHeight
+      );
+    }
+  }, [waveformData, track.muted]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      ref: trackRef,
+      className: `
+        relative h-12 border-b border-neutral-200
+        ${isSelected ? "bg-blue-500/10" : "hover:bg-neutral-50"}
+      `,
+      style: { width: totalWidth },
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute left-0 top-0 bottom-0 w-8 bg-neutral-100 border-r border-neutral-200 flex flex-col items-center justify-center gap-0.5 z-10", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "material-icons text-blue-500", style: { fontSize: 14 }, children: "audiotrack" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onMuteToggle();
+              },
+              className: "p-0.5 hover:bg-neutral-200 rounded",
+              title: track.muted ? "Unmute" : "Mute",
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "material-icons text-neutral-400", style: { fontSize: 12 }, children: track.muted ? "volume_off" : "volume_up" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            className: `
+          absolute top-1 bottom-1 rounded overflow-hidden
+          ${track.muted ? "bg-neutral-200" : "bg-blue-100"}
+        `,
+            style: {
+              left: trackStart + 32,
+              width: Math.max(50, totalWidth - trackStart - 32)
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-0 left-1 text-[10px] text-neutral-500 truncate max-w-[100px]", children: track.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "canvas",
+                {
+                  ref: canvasRef,
+                  className: "absolute inset-0",
+                  width: Math.max(100, totalWidth - trackStart - 32),
+                  height: 40
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute bottom-0 right-1 text-[10px] text-neutral-400", children: [
+                Math.round((track.volume ?? 1) * 100),
+                "%"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/animation/timeline/Timeline.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Timeline({
+  composition,
+  currentTime,
+  isPlaying,
+  zoom,
+  scrollX,
+  selectedLayerIds,
+  selectedKeyframeIds,
+  snapToGrid,
+  gridSize,
+  onSeek,
+  onZoomChange,
+  onScrollChange,
+  onKeyframeSelect,
+  onKeyframeMove,
+  onKeyframeAdd,
+  onKeyframeDelete,
+  onPlay,
+  onPause,
+  onStop
+}) {
+  const containerRef = import_react14.default.useRef(null);
+  const [viewportWidth, setViewportWidth] = import_react14.default.useState(800);
+  const pixelsPerSecond = zoom;
+  const totalWidth = composition.duration / 1e3 * pixelsPerSecond;
+  const flatLayers = import_react14.default.useMemo(() => {
+    return flattenLayers(composition.layers);
+  }, [composition.layers]);
+  const snapToGridFn = import_react14.default.useCallback(
+    (time) => {
+      if (!snapToGrid) return time;
+      return Math.round(time / gridSize) * gridSize;
+    },
+    [snapToGrid, gridSize]
+  );
+  import_react14.default.useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setViewportWidth(containerRef.current.clientWidth - 150);
+      }
+    };
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  const handleScroll = (e) => {
+    onScrollChange(e.currentTarget.scrollLeft);
+  };
+  const handleWheel = (e) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? 0.9 : 1.1;
+      const newZoom = Math.max(10, Math.min(500, zoom * delta));
+      onZoomChange(newZoom);
+    }
+  };
+  const layerHeight = 28;
+  const audioHeight = 48;
+  const totalHeight = 24 + // Ruler
+  flatLayers.length * layerHeight + (composition.audioTracks?.length ?? 0) * audioHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col h-full bg-[#1a1a1a] border-t border-[#3a3a3a]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[#3a3a3a] bg-[#232323]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: onStop,
+            className: "p-1.5 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
+            title: "Stop (go to start)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 18 }, children: "stop" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: isPlaying ? onPause : onPlay,
+            className: "p-1.5 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
+            title: isPlaying ? "Pause" : "Play",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 18 }, children: isPlaying ? "pause" : "play_arrow" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "px-2 py-1 bg-[#0a0a0a] text-blue-400 font-mono text-sm rounded border border-[#3a3a3a]", children: [
+        formatTimecode(currentTime),
+        " / ",
+        formatTimecode(composition.duration)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: () => onZoomChange(Math.max(10, zoom * 0.8)),
+            className: "p-1 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
+            title: "Zoom out",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 16 }, children: "remove" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-xs text-neutral-500 w-16 text-center", children: [
+          Math.round(zoom),
+          "px/s"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: () => onZoomChange(Math.min(500, zoom * 1.25)),
+            className: "p-1 hover:bg-[#3a3a3a] rounded text-neutral-400 hover:text-white",
+            title: "Zoom in",
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 16 }, children: "add" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          onClick: () => {
+          },
+          className: `p-1.5 rounded ${snapToGrid ? "bg-blue-900/50 text-blue-400" : "hover:bg-[#3a3a3a] text-neutral-400"}`,
+          title: "Snap to grid",
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons", style: { fontSize: 16 }, children: "grid_on" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-[150px] flex-shrink-0 border-r border-[#3a3a3a] overflow-y-auto bg-[#232323]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "h-6 bg-[#1a1a1a] border-b border-[#3a3a3a] px-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-500", children: "Layers" }) }),
+        flatLayers.map((layer) => {
+          const depth = getLayerDepth(layer, composition.layers);
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
+            {
+              className: `
+                  h-7 border-b border-[#2a2a2a] px-2 flex items-center
+                  ${selectedLayerIds.includes(layer.id) ? "bg-[#4a6fa5]/30" : ""}
+                  ${!layer.visible ? "opacity-50" : ""}
+                `,
+              style: { paddingLeft: depth * 12 + 8 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons text-neutral-500 mr-1", style: { fontSize: 12 }, children: layer.type === "folder" ? "folder" : "lens" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-300 truncate", children: layer.name })
+              ]
+            },
+            layer.id
+          );
+        }),
+        composition.audioTracks?.map((track) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "div",
+          {
+            className: "h-12 border-b border-[#2a2a2a] px-2 flex items-center",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "material-icons text-blue-400 mr-1", style: { fontSize: 12 }, children: "audiotrack" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-neutral-300 truncate", children: track.name })
+            ]
+          },
+          track.id
+        ))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          ref: containerRef,
+          className: "flex-1 overflow-auto relative bg-[#1e1e1e]",
+          onScroll: handleScroll,
+          onWheel: handleWheel,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { width: totalWidth, minHeight: totalHeight }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              TimelineRuler,
+              {
+                duration: composition.duration,
+                pixelsPerSecond,
+                scrollX,
+                viewportWidth,
+                onSeek
+              }
+            ),
+            flatLayers.map((layer) => {
+              const depth = getLayerDepth(layer, composition.layers);
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                KeyframeTrack,
+                {
+                  layer,
+                  depth,
+                  duration: composition.duration,
+                  pixelsPerSecond,
+                  selectedKeyframeIds,
+                  isLayerSelected: selectedLayerIds.includes(layer.id),
+                  onKeyframeSelect,
+                  onKeyframeMove,
+                  onKeyframeAdd,
+                  onKeyframeDelete,
+                  snapToGrid: snapToGridFn
+                },
+                layer.id
+              );
+            }),
+            composition.audioTracks?.map((track) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              AudioTrack,
+              {
+                track,
+                duration: composition.duration,
+                pixelsPerSecond,
+                isSelected: false,
+                onSelect: () => {
+                },
+                onMuteToggle: () => {
+                },
+                onVolumeChange: () => {
+                }
+              },
+              track.id
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              Playhead,
+              {
+                currentTime,
+                pixelsPerSecond,
+                height: totalHeight
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function getLayerDepth(target, layers, currentDepth = 0) {
+  for (const layer of layers) {
+    if (layer.id === target.id) return currentDepth;
+    if (layer.type === "folder") {
+      const depth = getLayerDepth(target, layer.children, currentDepth + 1);
+      if (depth >= 0) return depth;
+    }
+  }
+  return 0;
+}
+
+// src/components/animation/canvas/PreviewCanvas.tsx
+var import_react16 = __toESM(require("react"));
+
+// src/components/animation/hooks/useKeyframes.ts
+var import_react15 = require("react");
+var easingFunctions = {
+  linear: (t) => t,
+  ease: (t) => t * t * (3 - 2 * t),
+  "ease-in": (t) => t * t,
+  "ease-out": (t) => t * (2 - t),
+  "ease-in-out": (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+  "step-start": () => 1,
+  "step-end": (t) => t >= 1 ? 1 : 0
+};
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function getEasingFn(easing) {
+  return easingFunctions[easing || "linear"];
+}
+function interpolateKeyframes(keyframes, time) {
+  if (!keyframes || keyframes.length === 0) {
+    return { visible: true, opacity: 1 };
+  }
+  const sorted = [...keyframes].sort((a, b) => a.time - b.time);
+  if (time <= sorted[0].time) {
+    return { ...sorted[0].properties };
+  }
+  if (time >= sorted[sorted.length - 1].time) {
+    return { ...sorted[sorted.length - 1].properties };
+  }
+  let prevKf = sorted[0];
+  let nextKf = sorted[1];
+  for (let i = 1; i < sorted.length; i++) {
+    if (sorted[i].time >= time) {
+      prevKf = sorted[i - 1];
+      nextKf = sorted[i];
+      break;
+    }
+  }
+  const duration = nextKf.time - prevKf.time;
+  const elapsed = time - prevKf.time;
+  const rawT = duration > 0 ? elapsed / duration : 0;
+  const easingFn = getEasingFn(prevKf.easing);
+  const t = easingFn(rawT);
+  const result = {};
+  if (prevKf.properties.visible !== void 0 || nextKf.properties.visible !== void 0) {
+    result.visible = rawT < 1 ? prevKf.properties.visible : nextKf.properties.visible;
+  }
+  const numericProps = ["opacity", "x", "y", "scaleX", "scaleY", "rotation", "volume"];
+  for (const prop of numericProps) {
+    const prevVal = prevKf.properties[prop];
+    const nextVal = nextKf.properties[prop];
+    if (prevVal !== void 0 && nextVal !== void 0) {
+      result[prop] = lerp(prevVal, nextVal, t);
+    } else if (prevVal !== void 0) {
+      result[prop] = prevVal;
+    } else if (nextVal !== void 0) {
+      result[prop] = nextVal;
+    }
+  }
+  return result;
+}
+function getLayerPropertiesAtTime(layer, time) {
+  const keyframeProps = interpolateKeyframes(layer.keyframes || [], time);
+  return {
+    layerVisible: layer.visible,
+    layerOpacity: layer.opacity,
+    visible: keyframeProps.visible ?? true,
+    opacity: (keyframeProps.opacity ?? 1) * layer.opacity,
+    x: keyframeProps.x,
+    y: keyframeProps.y,
+    scaleX: keyframeProps.scaleX,
+    scaleY: keyframeProps.scaleY,
+    rotation: keyframeProps.rotation,
+    volume: keyframeProps.volume
+  };
+}
+function useKeyframes({ layers, currentTime }) {
+  const layerStates = (0, import_react15.useMemo)(() => {
+    const states = [];
+    const processLayer = (layer) => {
+      states.push({
+        id: layer.id,
+        properties: getLayerPropertiesAtTime(layer, currentTime)
+      });
+      if (layer.type === "folder") {
+        for (const child of layer.children) {
+          processLayer(child);
+        }
+      }
+    };
+    for (const layer of layers) {
+      processLayer(layer);
+    }
+    return states;
+  }, [layers, currentTime]);
+  const layerStatesMap = (0, import_react15.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const state of layerStates) {
+      map.set(state.id, state);
+    }
+    return map;
+  }, [layerStates]);
+  const getLayerState = (layerId) => {
+    return layerStatesMap.get(layerId);
+  };
+  return {
+    layerStates,
+    layerStatesMap,
+    getLayerState
+  };
+}
+
+// src/components/animation/canvas/CanvasObject.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function CanvasObject({
+  layer,
+  computedProps,
+  isSelected,
+  canvasWidth,
+  canvasHeight,
+  onSelect
+}) {
+  const { object } = layer;
+  if (!layer.visible || computedProps.visible === false) {
+    return null;
+  }
+  const x = (computedProps.x ?? object.position.x) / 100 * canvasWidth;
+  const y = (computedProps.y ?? object.position.y) / 100 * canvasHeight;
+  let width = "auto";
+  let height = "auto";
+  if (object.size) {
+    if (object.size.unit === "percent") {
+      width = object.size.width / 100 * canvasWidth;
+      height = object.size.height / 100 * canvasHeight;
+    } else {
+      width = object.size.width;
+      height = object.size.height;
+    }
+  }
+  const scaleX = computedProps.scaleX ?? 1;
+  const scaleY = computedProps.scaleY ?? 1;
+  const rotation = computedProps.rotation ?? 0;
+  const transform = `scale(${scaleX}, ${scaleY}) rotate(${rotation}deg)`;
+  const opacity = (computedProps.opacity ?? 1) * layer.opacity;
+  const style = {
+    position: "absolute",
+    left: x,
+    top: y,
+    width,
+    height,
+    transform,
+    opacity,
+    transformOrigin: "center center",
+    cursor: "pointer",
+    outline: isSelected ? "2px solid #3b82f6" : "none",
+    outlineOffset: 2
+  };
+  const renderContent = () => {
+    switch (object.type) {
+      case "image":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "img",
+          {
+            src: object.src,
+            alt: object.alt || "",
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: object.objectFit || "contain",
+              objectPosition: object.objectPosition,
+              borderRadius: object.borderRadius,
+              filter: object.filter
+            },
+            draggable: false
+          }
+        );
+      case "text":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            style: {
+              fontSize: object.fontSize,
+              fontFamily: object.fontFamily,
+              fontWeight: object.fontWeight,
+              fontStyle: object.fontStyle,
+              textAlign: object.textAlign,
+              color: object.color,
+              backgroundColor: object.backgroundColor,
+              lineHeight: object.lineHeight,
+              letterSpacing: object.letterSpacing,
+              textShadow: object.textShadow,
+              padding: object.padding,
+              whiteSpace: "pre-wrap"
+            },
+            children: object.content
+          }
+        );
+      case "shape":
+        return renderShape(object);
+      case "video":
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "video",
+          {
+            src: object.src,
+            poster: object.poster,
+            muted: object.muted,
+            loop: object.loop,
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: object.objectFit || "contain"
+            }
+          }
+        );
+      case "audio":
+        if (!object.showControls) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "audio",
+          {
+            src: object.src,
+            controls: true,
+            style: { width: "100%" }
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      style,
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelect(layer.id);
+      },
+      children: renderContent()
+    }
+  );
+}
+function renderShape(object) {
+  const { shape, fill, stroke, strokeWidth, borderRadius } = object;
+  const svgStyle = {
+    width: "100%",
+    height: "100%"
+  };
+  switch (shape) {
+    case "rectangle":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: "100%",
+            backgroundColor: fill,
+            border: stroke ? `${strokeWidth || 1}px solid ${stroke}` : void 0,
+            borderRadius
+          }
+        }
+      );
+    case "circle":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { style: svgStyle, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "circle",
+        {
+          cx: "50",
+          cy: "50",
+          r: "48",
+          fill,
+          stroke,
+          strokeWidth
+        }
+      ) });
+    case "ellipse":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { style: svgStyle, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "ellipse",
+        {
+          cx: "50",
+          cy: "50",
+          rx: "48",
+          ry: "48",
+          fill,
+          stroke,
+          strokeWidth
+        }
+      ) });
+    case "triangle":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { style: svgStyle, viewBox: "0 0 100 100", preserveAspectRatio: "none", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "polygon",
+        {
+          points: "50,5 95,95 5,95",
+          fill,
+          stroke,
+          strokeWidth
+        }
+      ) });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          style: {
+            width: "100%",
+            height: "100%",
+            backgroundColor: fill || "#ccc"
+          }
+        }
+      );
+  }
+}
+
+// src/components/animation/canvas/PreviewCanvas.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function PreviewCanvas({
+  composition,
+  currentTime,
+  selectedLayerIds,
+  onLayerSelect,
+  onClearSelection
+}) {
+  const containerRef = import_react16.default.useRef(null);
+  const [containerSize, setContainerSize] = import_react16.default.useState({ width: 800, height: 450 });
+  const { layerStatesMap } = useKeyframes({
+    layers: composition.layers,
+    currentTime
+  });
+  import_react16.default.useEffect(() => {
+    const updateSize = () => {
+      if (!containerRef.current) return;
+      const containerWidth = containerRef.current.clientWidth;
+      const containerHeight = containerRef.current.clientHeight;
+      const padding = 40;
+      const availableWidth = containerWidth - padding;
+      const availableHeight = containerHeight - padding;
+      const aspectRatio = composition.width / composition.height;
+      const containerRatio = availableWidth / availableHeight;
+      let canvasWidth;
+      let canvasHeight;
+      if (containerRatio > aspectRatio) {
+        canvasHeight = availableHeight;
+        canvasWidth = canvasHeight * aspectRatio;
+      } else {
+        canvasWidth = availableWidth;
+        canvasHeight = canvasWidth / aspectRatio;
+      }
+      setContainerSize({ width: canvasWidth, height: canvasHeight });
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
+    return () => window.removeEventListener("resize", updateSize);
+  }, [composition.width, composition.height]);
+  const renderableLayers = import_react16.default.useMemo(() => {
+    const result = [];
+    const collectLayers = (layers, parentVisible = true) => {
+      for (const layer of layers) {
+        const isVisible = parentVisible && layer.visible;
+        if (layer.type === "folder") {
+          collectLayers(layer.children, isVisible);
+        } else if (isVisible) {
+          result.push(layer);
+        }
+      }
+    };
+    collectLayers(composition.layers);
+    return result;
+  }, [composition.layers]);
+  const renderBackground = () => {
+    const bg = composition.background;
+    if (!bg) return null;
+    const style = {
+      position: "absolute",
+      inset: 0,
+      opacity: bg.opacity ?? 1
+    };
+    switch (bg.type) {
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { ...style, backgroundColor: bg.value } });
+      case "gradient":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { ...style, background: bg.value } });
+      case "image":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            style: {
+              ...style,
+              backgroundImage: `url(${bg.value})`,
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              filter: bg.blur ? `blur(${bg.blur}px)` : void 0
+            }
+          }
+        );
+      case "video":
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "video",
+          {
+            src: bg.value,
+            autoPlay: true,
+            muted: true,
+            loop: true,
+            style: {
+              ...style,
+              objectFit: "cover",
+              filter: bg.blur ? `blur(${bg.blur}px)` : void 0
+            }
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex-1 flex items-center justify-center bg-neutral-800 overflow-hidden",
+      onClick: onClearSelection,
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "div",
+        {
+          className: "relative bg-white shadow-2xl overflow-hidden",
+          style: {
+            width: containerSize.width,
+            height: containerSize.height
+          },
+          children: [
+            renderBackground(),
+            composition.background?.overlay && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: "absolute inset-0",
+                style: { backgroundColor: composition.background.overlay }
+              }
+            ),
+            renderableLayers.map((layer) => {
+              const state = layerStatesMap.get(layer.id);
+              if (!state) return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                CanvasObject,
+                {
+                  layer,
+                  computedProps: state.properties,
+                  isSelected: selectedLayerIds.includes(layer.id),
+                  canvasWidth: containerSize.width,
+                  canvasHeight: containerSize.height,
+                  onSelect: onLayerSelect
+                },
+                layer.id
+              );
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "absolute bottom-2 right-2 text-xs text-neutral-400 bg-black/50 px-1 rounded", children: [
+              composition.width,
+              " \xD7 ",
+              composition.height
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/animation/properties/PropertiesPanel.tsx
+var import_react17 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function PropertiesPanel({
+  selectedLayers,
+  currentTime,
+  onUpdateLayer,
+  onAddKeyframe
+}) {
+  if (selectedLayers.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-[#232323] border-l border-[#3a3a3a] flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3 py-2 border-b border-[#3a3a3a]", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Properties" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 flex items-center justify-center text-neutral-500 text-sm p-4 text-center", children: "Select a layer to edit its properties" })
+    ] });
+  }
+  if (selectedLayers.length > 1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-[#232323] border-l border-[#3a3a3a] flex flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-3 py-2 border-b border-[#3a3a3a]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Properties" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-xs text-neutral-500", children: [
+          selectedLayers.length,
+          " layers selected"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-neutral-500", children: "Multi-selection editing coming soon." }) })
+    ] });
+  }
+  const layer = selectedLayers[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-[250px] flex-shrink-0 bg-[#232323] border-l border-[#3a3a3a] flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-3 py-2 border-b border-[#3a3a3a]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "text-sm font-semibold text-neutral-300", children: "Properties" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-neutral-500 truncate", children: layer.name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 overflow-y-auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PropertySection, { title: "Layer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Name", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "text",
+            value: layer.name,
+            onChange: (e) => onUpdateLayer(layer.id, { name: e.target.value }),
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Visible", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: layer.visible,
+            onChange: (e) => onUpdateLayer(layer.id, { visible: e.target.checked }),
+            className: "w-4 h-4 accent-blue-500"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Locked", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: layer.locked,
+            onChange: (e) => onUpdateLayer(layer.id, { locked: e.target.checked }),
+            className: "w-4 h-4 accent-blue-500"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Opacity", keyframeable: true, onAddKeyframe: () => onAddKeyframe(layer.id, "opacity"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 1,
+              step: 0.01,
+              value: layer.opacity,
+              onChange: (e) => onUpdateLayer(layer.id, { opacity: parseFloat(e.target.value) }),
+              className: "flex-1 accent-blue-500"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "text-xs text-neutral-400 w-10 text-right", children: [
+            Math.round(layer.opacity * 100),
+            "%"
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Blend", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "select",
+          {
+            value: layer.blendMode || "normal",
+            onChange: (e) => onUpdateLayer(layer.id, { blendMode: e.target.value }),
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "normal", children: "Normal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "multiply", children: "Multiply" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "screen", children: "Screen" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "overlay", children: "Overlay" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "darken", children: "Darken" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "lighten", children: "Lighten" })
+            ]
+          }
+        ) })
+      ] }),
+      layer.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        ObjectProperties,
+        {
+          layer,
+          onUpdate: (updates) => onUpdateLayer(layer.id, updates),
+          onAddKeyframe: (prop) => onAddKeyframe(layer.id, prop)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PropertySection, { title: "Keyframes", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-xs text-neutral-500", children: [
+          layer.keyframes?.length ?? 0,
+          " keyframe(s)"
+        ] }),
+        layer.keyframes && layer.keyframes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 space-y-1", children: layer.keyframes.map((kf) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            className: "text-xs px-2 py-1 bg-[#1a1a1a] rounded flex justify-between text-neutral-300",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: formatTimecode(kf.time) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-neutral-500", children: Object.keys(kf.properties).join(", ") })
+            ]
+          },
+          kf.id
+        )) })
+      ] })
+    ] })
+  ] });
+}
+function PropertySection({ title, children }) {
+  const [isOpen, setIsOpen] = import_react17.default.useState(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "border-b border-[#3a3a3a]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "w-full px-3 py-2 flex items-center justify-between hover:bg-[#2a2a2a]",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs font-semibold text-neutral-400 uppercase", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "material-icons text-neutral-500", style: { fontSize: 16 }, children: isOpen ? "expand_less" : "expand_more" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "px-3 pb-3 space-y-2", children })
+  ] });
+}
+function PropertyRow({
+  label,
+  children,
+  keyframeable,
+  onAddKeyframe
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-16 flex items-center gap-1", children: [
+      keyframeable && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          onClick: onAddKeyframe,
+          className: "p-0.5 hover:bg-amber-900/50 rounded",
+          title: "Add keyframe",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "material-icons text-amber-500", style: { fontSize: 12 }, children: "diamond" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-neutral-500", children: label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1", children })
+  ] });
+}
+function ObjectProperties({
+  layer,
+  onUpdate,
+  onAddKeyframe
+}) {
+  const { object } = layer;
+  switch (object.type) {
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PropertySection, { title: "Image", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Source", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "text",
+            value: object.src,
+            onChange: (e) => onUpdate({ object: { ...object, src: e.target.value } }),
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500",
+            placeholder: "Image URL"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Fit", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "select",
+          {
+            value: object.objectFit || "contain",
+            onChange: (e) => onUpdate({
+              object: { ...object, objectFit: e.target.value }
+            }),
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "contain", children: "Contain" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "cover", children: "Cover" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "fill", children: "Fill" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "none", children: "None" })
+            ]
+          }
+        ) })
+      ] });
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PropertySection, { title: "Text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Content", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "textarea",
+          {
+            value: object.content,
+            onChange: (e) => onUpdate({ object: { ...object, content: e.target.value } }),
+            rows: 3,
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded focus:outline-none focus:border-blue-500 resize-none"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Size", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "number",
+            value: object.fontSize || 16,
+            onChange: (e) => onUpdate({ object: { ...object, fontSize: parseInt(e.target.value) || 16 } }),
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Color", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "color",
+            value: object.color || "#000000",
+            onChange: (e) => onUpdate({ object: { ...object, color: e.target.value } }),
+            className: "w-8 h-6 cursor-pointer bg-transparent"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Align", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "select",
+          {
+            value: object.textAlign || "left",
+            onChange: (e) => onUpdate({
+              object: { ...object, textAlign: e.target.value }
+            }),
+            className: "w-full px-2 py-1 text-sm bg-[#1a1a1a] text-neutral-200 border border-[#3a3a3a] rounded",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "left", children: "Left" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "center", children: "Center" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "right", children: "Right" })
+            ]
+          }
+        ) })
+      ] });
+    case "shape":
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PropertySection, { title: "Shape", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Fill", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "color",
+            value: object.fill || "#cccccc",
+            onChange: (e) => onUpdate({ object: { ...object, fill: e.target.value } }),
+            className: "w-8 h-6 cursor-pointer bg-transparent"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PropertyRow, { label: "Stroke", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "input",
+          {
+            type: "color",
+            value: object.stroke || "#000000",
+            onChange: (e) => onUpdate({ object: { ...object, stroke: e.target.value } }),
+            className: "w-8 h-6 cursor-pointer bg-transparent"
+          }
+        ) })
+      ] });
+    default:
+      return null;
+  }
+}
+
+// src/components/animation/AnimationEditor.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function AnimationEditor({
+  composition: initialComposition,
+  isOpen,
+  onClose,
+  onSave
+}) {
+  const { state, dispatch, selectedLayers, flattenedLayers } = useComposition(initialComposition);
+  const { seek } = usePlayback({
+    duration: state.composition.duration,
+    currentTime: state.playback.currentTime,
+    isPlaying: state.playback.isPlaying,
+    playbackRate: state.playback.playbackRate,
+    audioTracks: state.composition.audioTracks,
+    onTimeUpdate: (time) => dispatch({ type: "SEEK", payload: { time } }),
+    onPlaybackEnd: () => dispatch({ type: "PAUSE" })
+  });
+  import_react18.default.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape" && !state.isDirty) {
+        onClose();
+      }
+      if (e.key === " " && e.target === document.body) {
+        e.preventDefault();
+        dispatch({ type: state.playback.isPlaying ? "PAUSE" : "PLAY" });
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isOpen, state.isDirty, state.playback.isPlaying, dispatch, onClose]);
+  if (!isOpen) return null;
+  const handleSave = () => {
+    onSave(state.composition);
+    dispatch({ type: "MARK_SAVED" });
+  };
+  const handleAddFolder = () => {
+    const newFolder = createLayerFolder(
+      `folder-${Date.now()}`,
+      `Folder ${state.composition.layers.length + 1}`
+    );
+    dispatch({ type: "ADD_LAYER", payload: { layer: newFolder } });
+  };
+  const handleAddItem = (type) => {
+    let object;
+    switch (type) {
+      case "image":
+        object = {
+          id: `obj-${Date.now()}`,
+          type: "image",
+          src: "",
+          position: { x: 50, y: 50 },
+          size: { width: 50, height: 50, unit: "percent" },
+          objectFit: "contain"
+        };
+        break;
+      case "text":
+        object = {
+          id: `obj-${Date.now()}`,
+          type: "text",
+          content: "Text",
+          position: { x: 50, y: 50 },
+          fontSize: 24,
+          color: "#000000",
+          textAlign: "center"
+        };
+        break;
+      case "shape":
+        object = {
+          id: `obj-${Date.now()}`,
+          type: "shape",
+          shape: "rectangle",
+          position: { x: 50, y: 50 },
+          size: { width: 20, height: 20, unit: "percent" },
+          fill: "#cccccc"
+        };
+        break;
+    }
+    const newItem = createLayerItem(
+      `layer-${Date.now()}`,
+      `${type.charAt(0).toUpperCase() + type.slice(1)} ${flattenedLayers.length + 1}`,
+      object
+    );
+    dispatch({ type: "ADD_LAYER", payload: { layer: newItem } });
+  };
+  const handleAddKeyframe = (layerId, property) => {
+    const layer = findLayerById(state.composition.layers, layerId);
+    if (!layer) return;
+    const properties = {};
+    if (property === "opacity" || !property) {
+      properties.opacity = layer.opacity;
+    }
+    const keyframe = createKeyframe(state.playback.currentTime, properties);
+    dispatch({ type: "ADD_KEYFRAME", payload: { layerId, keyframe } });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "fixed inset-0 z-50 bg-neutral-900 flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "h-12 bg-neutral-800 border-b border-neutral-700 flex items-center px-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-icons text-amber-500", children: "movie" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-white font-medium", children: state.composition.name }),
+        state.isDirty && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-amber-400", children: "\u2022 Unsaved changes" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-neutral-400 text-sm mr-4", children: [
+          "Duration: ",
+          formatTimecode(state.composition.duration)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            onClick: handleSave,
+            disabled: !state.isDirty,
+            className: "px-4 py-1.5 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1.5 hover:bg-neutral-700 rounded text-neutral-400 hover:text-white",
+            title: "Close",
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "material-icons", children: "close" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 flex overflow-hidden", children: [
+      state.panels.layers && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-[200px] flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        LayerPanel,
+        {
+          layers: state.composition.layers,
+          selectedIds: state.selection.layerIds,
+          onSelect: (layerId, additive) => dispatch({ type: "SELECT_LAYERS", payload: { layerIds: [layerId], additive } }),
+          onToggleVisibility: (layerId) => dispatch({ type: "TOGGLE_LAYER_VISIBILITY", payload: { layerId } }),
+          onToggleLock: (layerId) => dispatch({ type: "TOGGLE_LAYER_LOCK", payload: { layerId } }),
+          onToggleCollapsed: (folderId) => dispatch({ type: "TOGGLE_FOLDER_COLLAPSED", payload: { folderId } }),
+          onAddFolder: handleAddFolder,
+          onAddItem: handleAddItem,
+          onDelete: (layerId) => dispatch({ type: "REMOVE_LAYER", payload: { layerId } }),
+          onRename: (layerId, name) => dispatch({ type: "UPDATE_LAYER", payload: { layerId, updates: { name } } })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          PreviewCanvas,
+          {
+            composition: state.composition,
+            currentTime: state.playback.currentTime,
+            selectedLayerIds: state.selection.layerIds,
+            onLayerSelect: (layerId) => dispatch({ type: "SELECT_LAYERS", payload: { layerIds: [layerId] } }),
+            onClearSelection: () => dispatch({ type: "CLEAR_SELECTION" })
+          }
+        ),
+        state.panels.timeline && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-[250px] flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Timeline,
+          {
+            composition: state.composition,
+            currentTime: state.playback.currentTime,
+            isPlaying: state.playback.isPlaying,
+            zoom: state.timeline.zoom,
+            scrollX: state.timeline.scrollX,
+            selectedLayerIds: state.selection.layerIds,
+            selectedKeyframeIds: state.selection.keyframeIds,
+            snapToGrid: state.timeline.snapToGrid,
+            gridSize: state.timeline.gridSize,
+            onSeek: seek,
+            onZoomChange: (zoom) => dispatch({ type: "SET_TIMELINE_ZOOM", payload: { zoom } }),
+            onScrollChange: (scrollX) => dispatch({ type: "SET_TIMELINE_SCROLL", payload: { scrollX } }),
+            onKeyframeSelect: (keyframeId, additive) => dispatch({ type: "SELECT_KEYFRAMES", payload: { keyframeIds: [keyframeId], additive } }),
+            onKeyframeMove: (layerId, keyframeId, newTime) => dispatch({ type: "MOVE_KEYFRAME", payload: { layerId, keyframeId, newTime } }),
+            onKeyframeAdd: (layerId, time) => {
+              const keyframe = createKeyframe(time, { opacity: 1 });
+              dispatch({ type: "ADD_KEYFRAME", payload: { layerId, keyframe } });
+            },
+            onKeyframeDelete: (layerId, keyframeId) => dispatch({ type: "REMOVE_KEYFRAME", payload: { layerId, keyframeId } }),
+            onPlay: () => dispatch({ type: "PLAY" }),
+            onPause: () => dispatch({ type: "PAUSE" }),
+            onStop: () => dispatch({ type: "STOP" })
+          }
+        ) })
+      ] }),
+      state.panels.properties && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        PropertiesPanel,
+        {
+          selectedLayers,
+          currentTime: state.playback.currentTime,
+          onUpdateLayer: (layerId, updates) => dispatch({ type: "UPDATE_LAYER", payload: { layerId, updates } }),
+          onAddKeyframe: handleAddKeyframe
+        }
+      )
+    ] })
+  ] });
+}
 
 // src/index.ts
-var import_react5 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 function MarkdownContent({ url, filename }) {
-  const [content, setContent] = (0, import_react5.useState)("");
-  const [loading, setLoading] = (0, import_react5.useState)(true);
-  const [error, setError] = (0, import_react5.useState)(null);
-  (0, import_react5.useEffect)(() => {
+  const [content, setContent] = (0, import_react19.useState)("");
+  const [loading, setLoading] = (0, import_react19.useState)(true);
+  const [error, setError] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     fetch(url).then((res) => {
       if (!res.ok) throw new Error("Failed to load");
       return res.text();
@@ -1497,31 +4041,31 @@ function MarkdownContent({ url, filename }) {
     margin: 0
   };
   if (loading) {
-    return import_react5.default.createElement(
+    return import_react19.default.createElement(
       "div",
       { style: centeredStyle },
-      import_react5.default.createElement("span", { style: { color: "#9ca3af" } }, "Loading...")
+      import_react19.default.createElement("span", { style: { color: "#9ca3af" } }, "Loading...")
     );
   }
   if (error) {
-    return import_react5.default.createElement(
+    return import_react19.default.createElement(
       "div",
       { style: centeredStyle },
-      import_react5.default.createElement("span", { style: { color: "#ef4444" } }, "Failed to load markdown")
+      import_react19.default.createElement("span", { style: { color: "#ef4444" } }, "Failed to load markdown")
     );
   }
   const children = [];
   if (filename) {
     children.push(
-      import_react5.default.createElement(
+      import_react19.default.createElement(
         "div",
         { key: "header", style: headerStyle },
-        import_react5.default.createElement("span", { style: { color: "#0284c7", fontWeight: 500, fontSize: "14px" } }, "\u{1F4C4} " + filename)
+        import_react19.default.createElement("span", { style: { color: "#0284c7", fontWeight: 500, fontSize: "14px" } }, "\u{1F4C4} " + filename)
       )
     );
   }
-  children.push(import_react5.default.createElement("pre", { key: "content", style: preStyle }, content));
-  return import_react5.default.createElement("div", { style: containerStyle }, ...children);
+  children.push(import_react19.default.createElement("pre", { key: "content", style: preStyle }, content));
+  return import_react19.default.createElement("div", { style: containerStyle }, ...children);
 }
 var createSlide = {
   /**
@@ -1574,7 +4118,7 @@ var createSlide = {
     return createSimpleSlide(id, [{
       id: `${id}-markdown`,
       type: "component",
-      render: () => import_react5.default.createElement(MarkdownContent, { url, filename: options?.filename }),
+      render: () => import_react19.default.createElement(MarkdownContent, { url, filename: options?.filename }),
       position: { x: 0, y: 0 },
       size: { width: 100, height: 100, unit: "percent" }
     }], { thumbnail });
@@ -1587,7 +4131,7 @@ var createSlide = {
     return createSimpleSlide(id, [{
       id: `${id}-audio`,
       type: "component",
-      render: () => import_react5.default.createElement(AudioContent, { url, filename: options?.filename }),
+      render: () => import_react19.default.createElement(AudioContent, { url, filename: options?.filename }),
       position: { x: 0, y: 0 },
       size: { width: 100, height: 100, unit: "percent" }
     }], { thumbnail });
@@ -1622,27 +4166,45 @@ function AudioContent({ url, filename }) {
     marginBottom: "16px"
   };
   const children = [
-    import_react5.default.createElement(
+    import_react19.default.createElement(
       "svg",
       { key: "icon", style: iconStyle, viewBox: "0 0 24 24", fill: "currentColor" },
-      import_react5.default.createElement("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" })
+      import_react19.default.createElement("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" })
     )
   ];
   if (filename) {
-    children.push(import_react5.default.createElement("span", { key: "filename", style: filenameStyle }, filename));
+    children.push(import_react19.default.createElement("span", { key: "filename", style: filenameStyle }, filename));
   }
   children.push(
-    import_react5.default.createElement("audio", { key: "audio", src: url, controls: true, style: { width: "100%", maxWidth: "280px" } })
+    import_react19.default.createElement("audio", { key: "audio", src: url, controls: true, style: { width: "100%", maxWidth: "280px" } })
   );
-  return import_react5.default.createElement("div", { style: containerStyle }, ...children);
+  return import_react19.default.createElement("div", { style: containerStyle }, ...children);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimationEditor,
   Carousel,
+  LayerPanel,
+  PreviewCanvas,
+  PropertiesPanel,
   SlideRenderer,
   Thumbnails,
+  Timeline,
+  createComposition,
   createImageSlide,
+  createKeyframe,
+  createLayerFolder,
+  createLayerItem,
   createSimpleSlide,
   createSlide,
-  useCarousel
+  findLayerById,
+  flattenLayers,
+  formatTimecode,
+  getLayerPropertiesAtTime,
+  interpolateKeyframes,
+  parseTimecode,
+  useCarousel,
+  useComposition,
+  useKeyframes,
+  usePlayback
 });