bak

src/components/AssetSidebar.vue

@@ -2,12 +2,15 @@
 import { computed, ref, watch } from 'vue'
 import {
   PhCircle,
+  PhFilmStrip,
   PhImage,
   PhImageSquare,
   PhListBullets,
+  PhPencilSimple,
   PhPlus,
   PhSquare,
   PhTextT,
+  PhTrash,
   PhUploadSimple,
 } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
@@ -65,6 +68,32 @@ function addSampleText() {
   store.addLayer(asset.id)
 }
 
+const clips = computed(() => store.scene.clips ?? [])
+
+function addClip() {
+  const input = prompt('Name des Clips?', 'Clip')
+  if (input === null) return
+  store.addClip(input)
+}
+
+function renameClipPrompt(clipId: string, current: string) {
+  const input = prompt('Neuer Name?', current)
+  if (input === null) return
+  store.renameClip(clipId, input)
+}
+
+function deleteClip(clipId: string) {
+  if (!confirm('Clip und alle Instanzen wirklich löschen?')) return
+  store.removeClip(clipId)
+}
+
+function onClipDragStart(e: DragEvent, clipId: string) {
+  if (!e.dataTransfer) return
+  e.dataTransfer.effectAllowed = 'copy'
+  e.dataTransfer.setData('application/x-animatr-clip', clipId)
+  e.dataTransfer.setData('text/plain', clipId)
+}
+
 async function handleFileSelected(event: Event) {
   uploadError.value = null
   const input = event.target as HTMLInputElement
@@ -240,6 +269,47 @@ function circlePreviewStyle(asset: Extract<Asset, { kind: 'circle' }>) {
       </li>
       <li v-if="!store.scene.assets.length" class="empty">keine Assets</li>
     </ul>
+
+    <div class="lib-header clips-header">
+      <h4>Clips</h4>
+      <button class="thumb-toggle" title="Neuen Clip anlegen" @click="addClip">
+        <PhPlus :size="12" weight="bold" />
+      </button>
+    </div>
+    <ul class="clips">
+      <li
+        v-for="clip in clips"
+        :key="clip.id"
+        class="clip"
+        :class="{ editing: store.activeClipId === clip.id }"
+        draggable="true"
+        @dragstart="onClipDragStart($event, clip.id)"
+        @dblclick="store.enterClip(clip.id)"
+      >
+        <div class="clip-icon">
+          <PhFilmStrip :size="16" />
+        </div>
+        <div class="clip-meta">
+          <span class="clip-name" :title="clip.name">{{ clip.name }}</span>
+          <span class="clip-sub">
+            {{ clip.layers.length }} Layer · {{ clip.duration.toFixed(1) }}s
+          </span>
+        </div>
+        <div class="clip-actions">
+          <button
+            class="clip-btn"
+            title="Umbenennen"
+            @click.stop="renameClipPrompt(clip.id, clip.name)"
+          >
+            <PhPencilSimple :size="11" />
+          </button>
+          <button class="clip-btn danger" title="Löschen" @click.stop="deleteClip(clip.id)">
+            <PhTrash :size="11" />
+          </button>
+        </div>
+      </li>
+      <li v-if="!clips.length" class="empty">keine Clips</li>
+    </ul>
   </div>
 </template>
 
@@ -439,4 +509,112 @@ h4 {
   font-style: italic;
   justify-content: center;
 }
+
+.clips-header {
+  margin-top: 14px;
+}
+
+.clips {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.clip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: var(--panel-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: grab;
+  transition: background 140ms var(--ease), border-color 140ms var(--ease);
+}
+
+.clip:hover {
+  background: var(--panel-hover);
+  border-color: var(--border-strong);
+}
+
+.clip:active {
+  cursor: grabbing;
+}
+
+.clip.editing {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.clip-icon {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+  background: var(--bg);
+  border-radius: var(--radius-sm);
+}
+
+.clip-meta {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.clip-name {
+  font-size: 12px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.clip-sub {
+  font-size: 10px;
+  color: var(--text-dim);
+}
+
+.clip-actions {
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 140ms var(--ease);
+}
+
+.clip:hover .clip-actions,
+.clip.editing .clip-actions {
+  opacity: 1;
+}
+
+.clip-btn {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-dim);
+  border-radius: 4px;
+}
+
+.clip-btn:hover {
+  background: var(--panel);
+  color: var(--text);
+}
+
+.clip-btn.danger:hover {
+  background: var(--danger-soft);
+  color: var(--danger);
+  border-color: var(--danger);
+}
 </style>

src/components/CanvasStage.vue

@@ -126,21 +126,86 @@ interface RenderedLayer {
   props: AnimatableProps
 }
 
-const rendered = computed<RenderedLayer[]>(() =>
-  store.scene.layers
-    .slice()
-    .reverse()
-    .map((layer) => {
+interface RenderedClipLayer extends RenderedLayer {
+  instanceId: string
+}
+
+type StackItem =
+  | { kind: 'layer'; item: RenderedLayer }
+  | { kind: 'clip'; item: RenderedClipLayer }
+
+const stackItems = computed<StackItem[]>(() => {
+  // Clip-edit scope: just render active clip's layers (top of timeline = top of canvas)
+  if (store.activeClipId) {
+    const out: StackItem[] = []
+    const layers = store.activeLayers.slice().reverse()
+    for (const layer of layers) {
       const asset = assetMap.value.get(layer.assetId)
-      if (!asset) return null
-      return {
-        layer,
-        asset,
-        props: sampleLayer(layer, store.playhead),
+      if (!asset) continue
+      out.push({
+        kind: 'layer',
+        item: { layer, asset, props: sampleLayer(layer, store.playhead) },
+      })
+    }
+    return out
+  }
+
+  const out: StackItem[] = []
+  const layerById = new Map<string, Layer>()
+  for (const l of store.scene.layers) layerById.set(l.id, l)
+  const clipById = new Map<string, NonNullable<typeof store.scene.clips>[number]>()
+  for (const c of store.scene.clips ?? []) clipById.set(c.id, c)
+  const instancesByTrack = new Map<string, NonNullable<typeof store.scene.clipInstances>>()
+  for (const ci of store.scene.clipInstances ?? []) {
+    const arr = instancesByTrack.get(ci.clipTrackId) ?? []
+    arr.push(ci)
+    instancesByTrack.set(ci.clipTrackId, arr)
+  }
+
+  const order = store.scene.trackOrder ?? store.scene.layers.map((l) => l.id)
+  // iterate bottom → top: reverse the array
+  for (let i = order.length - 1; i >= 0; i--) {
+    const id = order[i]
+    const layer = layerById.get(id)
+    if (layer) {
+      const asset = assetMap.value.get(layer.assetId)
+      if (!asset) continue
+      out.push({
+        kind: 'layer',
+        item: { layer, asset, props: sampleLayer(layer, store.playhead) },
+      })
+      continue
+    }
+    const instances = instancesByTrack.get(id) ?? []
+    for (const inst of instances) {
+      const clip = clipById.get(inst.clipId)
+      if (!clip) continue
+      const trimStart = inst.trimStart ?? 0
+      const trimEnd = inst.trimEnd ?? 0
+      const visible = Math.max(0, clip.duration - trimStart - trimEnd)
+      const offsetIntoBlock = store.playhead - inst.startTime
+      if (offsetIntoBlock < 0 || offsetIntoBlock > visible) continue
+      const localTime = trimStart + offsetIntoBlock
+      // Clip's own layers: reverse too so layer[0] ends up on top
+      for (let k = clip.layers.length - 1; k >= 0; k--) {
+        const cl = clip.layers[k]
+        if (!cl.visible) continue
+        const ca = assetMap.value.get(cl.assetId)
+        if (!ca) continue
+        out.push({
+          kind: 'clip',
+          item: {
+            instanceId: inst.id,
+            layer: cl,
+            asset: ca,
+            props: sampleLayer(cl, localTime),
+          },
+        })
       }
-    })
-    .filter((x): x is RenderedLayer => x !== null),
-)
+    }
+  }
+  return out
+})
 
 function baseNodeConfig(layer: Layer, props: AnimatableProps) {
   return {
@@ -209,6 +274,70 @@ function imageConfig(
   }
 }
 
+function clipBaseConfig(instanceId: string, layer: Layer, props: AnimatableProps) {
+  return {
+    id: `ci:${instanceId}:${layer.id}`,
+    x: props.x,
+    y: props.y,
+    scaleX: props.scaleX,
+    scaleY: props.scaleY,
+    rotation: props.rotation,
+    opacity: props.opacity,
+    visible: layer.visible,
+    draggable: false,
+    listening: false,
+  }
+}
+
+function clipRectConfig(item: RenderedClipLayer) {
+  const asset = item.asset as Extract<Asset, { kind: 'rect' }>
+  return {
+    ...clipBaseConfig(item.instanceId, item.layer, item.props),
+    width: asset.width,
+    height: asset.height,
+    offsetX: item.layer.offsetX ?? asset.width / 2,
+    offsetY: item.layer.offsetY ?? asset.height / 2,
+    fill: item.props.fill ?? asset.fill,
+  }
+}
+
+function clipCircleConfig(item: RenderedClipLayer) {
+  const asset = item.asset as Extract<Asset, { kind: 'circle' }>
+  return {
+    ...clipBaseConfig(item.instanceId, item.layer, item.props),
+    radius: asset.radius,
+    offsetX: item.layer.offsetX ?? 0,
+    offsetY: item.layer.offsetY ?? 0,
+    fill: item.props.fill ?? asset.fill,
+  }
+}
+
+function clipTextConfig(item: RenderedClipLayer) {
+  const asset = item.asset as Extract<Asset, { kind: 'text' }>
+  return {
+    ...clipBaseConfig(item.instanceId, item.layer, item.props),
+    text: asset.text,
+    fontSize: asset.fontSize,
+    offsetX: item.layer.offsetX ?? 0,
+    offsetY: item.layer.offsetY ?? 0,
+    fill: item.props.fill ?? asset.fill,
+  }
+}
+
+function clipImageConfig(item: RenderedClipLayer) {
+  const asset = item.asset as Extract<Asset, { kind: 'image' }>
+  const img = imageCache.value[asset.id]
+  if (!img) return null
+  return {
+    ...clipBaseConfig(item.instanceId, item.layer, item.props),
+    image: img,
+    width: asset.width,
+    height: asset.height,
+    offsetX: item.layer.offsetX ?? asset.width / 2,
+    offsetY: item.layer.offsetY ?? asset.height / 2,
+  }
+}
+
 interface PivotInfo {
   layerId: string
   sampled: AnimatableProps
@@ -217,7 +346,7 @@ interface PivotInfo {
 const pivotInfo = computed<PivotInfo | null>(() => {
   const id = store.selectedLayerId
   if (!id) return null
-  const layer = store.scene.layers.find((l) => l.id === id)
+  const layer = store.activeLayers.find((l) => l.id === id)
   if (!layer) return null
   const asset = assetMap.value.get(layer.assetId)
   if (!asset) return null
@@ -303,7 +432,7 @@ function attachTransformer() {
 }
 
 watch(
-  () => [store.selectedLayerId, rendered.value.length, store.playhead] as const,
+  () => [store.selectedLayerId, stackItems.value.length, store.playhead] as const,
   async () => {
     await nextTick()
     attachTransformer()
@@ -332,14 +461,14 @@ function handleStageMouseDown(e: Konva.KonvaEventObject<MouseEvent>) {
     store.selectLayer(null)
     return
   }
-  const match = store.scene.layers.find((l) => l.id === id)
+  const match = store.activeLayers.find((l) => l.id === id)
   store.selectLayer(match ? match.id : null)
 }
 
 function handleDragEnd(e: Konva.KonvaEventObject<DragEvent>) {
   const node = e.target
   const id = node.id()
-  if (!store.scene.layers.some((l) => l.id === id)) return
+  if (!store.activeLayers.some((l) => l.id === id)) return
   store.upsertKeyframe(id, store.playhead, {
     x: node.x(),
     y: node.y(),
@@ -349,7 +478,7 @@ function handleDragEnd(e: Konva.KonvaEventObject<DragEvent>) {
 function handleTransformEnd(e: Konva.KonvaEventObject<Event>) {
   const node = e.target
   const id = node.id()
-  if (!store.scene.layers.some((l) => l.id === id)) return
+  if (!store.activeLayers.some((l) => l.id === id)) return
   store.upsertKeyframe(id, store.playhead, {
     x: node.x(),
     y: node.y(),
@@ -530,31 +659,58 @@ onBeforeUnmount(() => {
         <v-group :config="viewConfig">
           <v-group :config="clipGroupConfig">
             <v-rect :config="backgroundConfig" />
-            <template v-for="item in rendered" :key="item.layer.id">
-              <v-rect
-                v-if="item.asset.kind === 'rect'"
-                :config="rectConfig(item.layer, item.asset, item.props)"
-                @dragend="handleDragEnd"
-                @transformend="handleTransformEnd"
-              />
-              <v-circle
-                v-else-if="item.asset.kind === 'circle'"
-                :config="circleConfig(item.layer, item.asset, item.props)"
-                @dragend="handleDragEnd"
-                @transformend="handleTransformEnd"
-              />
-              <v-text
-                v-else-if="item.asset.kind === 'text'"
-                :config="textConfig(item.layer, item.asset, item.props)"
-                @dragend="handleDragEnd"
-                @transformend="handleTransformEnd"
-              />
-              <v-image
-                v-else-if="item.asset.kind === 'image' && imageConfig(item.layer, item.asset, item.props)"
-                :config="imageConfig(item.layer, item.asset, item.props)!"
-                @dragend="handleDragEnd"
-                @transformend="handleTransformEnd"
-              />
+            <template
+              v-for="(entry, i) in stackItems"
+              :key="
+                entry.kind === 'layer'
+                  ? `l:${entry.item.layer.id}`
+                  : `ci:${entry.item.instanceId}:${entry.item.layer.id}:${i}`
+              "
+            >
+              <template v-if="entry.kind === 'layer'">
+                <v-rect
+                  v-if="entry.item.asset.kind === 'rect'"
+                  :config="rectConfig(entry.item.layer, entry.item.asset, entry.item.props)"
+                  @dragend="handleDragEnd"
+                  @transformend="handleTransformEnd"
+                />
+                <v-circle
+                  v-else-if="entry.item.asset.kind === 'circle'"
+                  :config="circleConfig(entry.item.layer, entry.item.asset, entry.item.props)"
+                  @dragend="handleDragEnd"
+                  @transformend="handleTransformEnd"
+                />
+                <v-text
+                  v-else-if="entry.item.asset.kind === 'text'"
+                  :config="textConfig(entry.item.layer, entry.item.asset, entry.item.props)"
+                  @dragend="handleDragEnd"
+                  @transformend="handleTransformEnd"
+                />
+                <v-image
+                  v-else-if="entry.item.asset.kind === 'image' && imageConfig(entry.item.layer, entry.item.asset, entry.item.props)"
+                  :config="imageConfig(entry.item.layer, entry.item.asset, entry.item.props)!"
+                  @dragend="handleDragEnd"
+                  @transformend="handleTransformEnd"
+                />
+              </template>
+              <template v-else>
+                <v-rect
+                  v-if="entry.item.asset.kind === 'rect'"
+                  :config="clipRectConfig(entry.item)"
+                />
+                <v-circle
+                  v-else-if="entry.item.asset.kind === 'circle'"
+                  :config="clipCircleConfig(entry.item)"
+                />
+                <v-text
+                  v-else-if="entry.item.asset.kind === 'text'"
+                  :config="clipTextConfig(entry.item)"
+                />
+                <v-image
+                  v-else-if="entry.item.asset.kind === 'image' && clipImageConfig(entry.item)"
+                  :config="clipImageConfig(entry.item)!"
+                />
+              </template>
             </template>
           </v-group>
           <v-rect :config="canvasBorderConfig" />

src/components/PropertiesPanel.vue

@@ -11,7 +11,7 @@ const formatPercent = (v: number) => `${Math.round(v * 100)}%`
 const store = useSceneStore()
 
 const selected = computed(() =>
-  store.scene.layers.find((l) => l.id === store.selectedLayerId) ?? null,
+  store.activeLayers.find((l) => l.id === store.selectedLayerId) ?? null,
 )
 
 const sampled = computed<AnimatableProps | null>(() =>

src/components/Timeline.vue

@@ -12,21 +12,56 @@ import {
 import { useSceneStore } from '@/stores/scene'
 import { sampleLayer } from '@/lib/interpolate'
 import { snapToCandidates } from '@/lib/timelineSnap'
-import type { AnimatableProps, Easing, Keyframe, Layer } from '@/types/scene'
+import type {
+  AnimatableProps,
+  Clip,
+  ClipInstance,
+  Easing,
+  Keyframe,
+  Layer,
+} from '@/types/scene'
 
-interface TimelineTrack {
+interface TimelineLayerTrack {
+  type: 'layer'
   layerId: string
   layer: Layer
   kfs: Keyframe[]
   kind: 'main' | 'position' | 'rotation'
   label: string
   isParent: boolean
-  layerIndex: number
+  orderIndex: number
 }
 
+interface TimelineClipTrack {
+  type: 'clip'
+  clipTrackId: string
+  name: string
+  orderIndex: number
+}
+
+type TimelineTrack = TimelineLayerTrack | TimelineClipTrack
+
 const store = useSceneStore()
 
-const duration = computed(() => store.scene.duration)
+const duration = computed(() => store.activeDuration)
+const inClipEdit = computed(() => store.activeClipId !== null)
+const clipInstancesByTrack = computed<Record<string, ClipInstance[]>>(() => {
+  const out: Record<string, ClipInstance[]> = {}
+  for (const ci of store.scene.clipInstances ?? []) {
+    ;(out[ci.clipTrackId] ||= []).push(ci)
+  }
+  return out
+})
+const clipById = computed(() => {
+  const m = new Map<string, Clip>()
+  for (const c of store.scene.clips ?? []) m.set(c.id, c)
+  return m
+})
+const clipTrackById = computed(() => {
+  const m = new Map<string, NonNullable<typeof store.scene.clipTracks>[number]>()
+  for (const t of store.scene.clipTracks ?? []) m.set(t.id, t)
+  return m
+})
 
 const NAME_WIDTH = 140
 const MIN_PX_PER_SEC = 2
@@ -163,14 +198,14 @@ function onLaneClick(e: MouseEvent) {
   store.setPlayhead(snapTime(ratio * duration.value))
 }
 
-function onLaneDblClick(e: MouseEvent, track: TimelineTrack) {
+function onLaneDblClick(e: MouseEvent, track: TimelineLayerTrack) {
   e.stopPropagation()
   const el = e.currentTarget as HTMLElement
   const rect = el.getBoundingClientRect()
   if (rect.width <= 0) return
   const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
   const time = snapTime(ratio * duration.value)
-  const layer = store.scene.layers.find((l) => l.id === track.layerId)
+  const layer = store.activeLayers.find((l) => l.id === track.layerId)
   if (!layer) return
   const sampled = sampleLayer(layer, time)
   const props: Partial<AnimatableProps> = {}
@@ -217,64 +252,63 @@ function onKeyframeDblClick(e: MouseEvent, layerId: string, keyframeId: string)
 
 const tracks = computed<TimelineTrack[]>(() => {
   const out: TimelineTrack[] = []
-  store.scene.layers.forEach((layer, layerIndex) => {
-    if (!layer.separated) {
-      out.push({
-        layerId: layer.id,
-        layer,
-        kfs: layer.keyframes,
-        kind: 'main',
-        label: layer.name,
-        isParent: true,
-        layerIndex,
-      })
-    } else {
-      out.push({
-        layerId: layer.id,
-        layer,
-        kfs: layer.keyframes,
-        kind: 'main',
-        label: layer.name,
-        isParent: true,
-        layerIndex,
-      })
-      out.push({
-        layerId: layer.id,
-        layer,
-        kfs: layer.positionKeyframes ?? [],
-        kind: 'position',
-        label: 'Position',
-        isParent: false,
-        layerIndex,
-      })
-      out.push({
-        layerId: layer.id,
-        layer,
-        kfs: layer.rotationKeyframes ?? [],
-        kind: 'rotation',
-        label: 'Rotation',
-        isParent: false,
-        layerIndex,
-      })
+  if (store.activeClipId) {
+    // Clip-edit scope: only show clip's layers (no clip tracks inside a clip)
+    store.activeLayers.forEach((layer, orderIndex) => {
+      if (!layer.separated) {
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex })
+      } else {
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex })
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.positionKeyframes ?? [], kind: 'position', label: 'Position', isParent: false, orderIndex })
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.rotationKeyframes ?? [], kind: 'rotation', label: 'Rotation', isParent: false, orderIndex })
+      }
+    })
+    return out
+  }
+  const order = store.scene.trackOrder ?? []
+  const layerById = new Map<string, Layer>()
+  for (const l of store.scene.layers) layerById.set(l.id, l)
+  order.forEach((id, orderIndex) => {
+    const layer = layerById.get(id)
+    if (layer) {
+      if (!layer.separated) {
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex })
+      } else {
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.keyframes, kind: 'main', label: layer.name, isParent: true, orderIndex })
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.positionKeyframes ?? [], kind: 'position', label: 'Position', isParent: false, orderIndex })
+        out.push({ type: 'layer', layerId: layer.id, layer, kfs: layer.rotationKeyframes ?? [], kind: 'rotation', label: 'Rotation', isParent: false, orderIndex })
+      }
+      return
+    }
+    const ct = clipTrackById.value.get(id)
+    if (ct) {
+      out.push({ type: 'clip', clipTrackId: ct.id, name: ct.name ?? 'Clip-Spur', orderIndex })
     }
   })
   return out
 })
 
+function trackDndId(track: TimelineTrack): string {
+  return track.type === 'layer' ? track.layerId : track.clipTrackId
+}
+
+function isTrackHead(track: TimelineTrack): boolean {
+  if (track.type === 'clip') return true
+  return track.isParent
+}
+
 function isDropBefore(track: TimelineTrack): boolean {
-  return (
-    dropIndex.value !== null &&
-    track.isParent &&
-    dropIndex.value === track.layerIndex &&
-    dragLayerId.value !== track.layerId
-  )
+  if (dropIndex.value === null) return false
+  if (!isTrackHead(track)) return false
+  if (dragTrackId.value === trackDndId(track)) return false
+  return dropIndex.value === track.orderIndex
 }
 
 function isDropAfter(track: TimelineTrack, nextTrack: TimelineTrack | undefined): boolean {
   if (dropIndex.value === null) return false
-  if (dragLayerId.value === track.layerId) return false
-  if (dropIndex.value !== track.layerIndex + 1) return false
-  if (nextTrack && nextTrack.layerIndex === track.layerIndex) return false
+  if (dragTrackId.value === trackDndId(track)) return false
+  if (dropIndex.value !== track.orderIndex + 1) return false
+  if (nextTrack && nextTrack.orderIndex === track.orderIndex) return false
   return true
 }
 
@@ -454,55 +488,230 @@ interface TrackMenuState {
   separated: boolean
 }
 
-const dragLayerId = ref<string | null>(null)
+const dragTrackId = ref<string | null>(null)
 const dropIndex = ref<number | null>(null)
 
-function onTrackDragStart(e: DragEvent, layerId: string) {
+function onTrackDragStart(e: DragEvent, trackId: string) {
   if (!e.dataTransfer) return
-  dragLayerId.value = layerId
+  dragTrackId.value = trackId
   e.dataTransfer.effectAllowed = 'move'
   try {
-    e.dataTransfer.setData('text/plain', layerId)
+    e.dataTransfer.setData('text/plain', trackId)
   } catch {
-    /* Safari older versions */
+    /* ignore */
   }
 }
 
-function onTrackDragOver(e: DragEvent, layerId: string) {
-  if (!dragLayerId.value) return
+function onTrackDragOver(e: DragEvent, orderIndex: number) {
+  if (!dragTrackId.value) return
   if (!e.dataTransfer) return
   e.preventDefault()
   e.dataTransfer.dropEffect = 'move'
   const el = e.currentTarget as HTMLElement
   const rect = el.getBoundingClientRect()
   const midY = rect.top + rect.height / 2
-  const index = store.scene.layers.findIndex((l) => l.id === layerId)
-  if (index < 0) return
-  dropIndex.value = e.clientY < midY ? index : index + 1
+  dropIndex.value = e.clientY < midY ? orderIndex : orderIndex + 1
 }
 
 function onTrackDragLeave() {
-  /* dropIndex updates on next dragover, keep as-is to avoid flicker */
+  /* keep dropIndex to avoid flicker */
 }
 
 function onTrackDrop(e: DragEvent) {
   e.preventDefault()
-  const srcId = dragLayerId.value
+  const srcId = dragTrackId.value
   const target = dropIndex.value
-  dragLayerId.value = null
+  dragTrackId.value = null
   dropIndex.value = null
   if (!srcId || target === null) return
-  const from = store.scene.layers.findIndex((l) => l.id === srcId)
+  const order = store.scene.trackOrder ?? []
+  const from = order.indexOf(srcId)
   if (from < 0) return
   let to = target
   if (from < to) to -= 1
-  store.moveLayer(from, to)
+  store.moveTrack(from, to)
 }
 
 function onTrackDragEnd() {
-  dragLayerId.value = null
+  dragTrackId.value = null
   dropIndex.value = null
 }
+
+interface ClipDrag {
+  kind: 'new' | 'move'
+  clipId: string
+  instanceId?: string
+  grabOffsetSec: number
+}
+
+const clipDrag = ref<ClipDrag | null>(null)
+
+function pixelTimeFromEvent(e: DragEvent, el: HTMLElement): number {
+  const rect = el.getBoundingClientRect()
+  if (rect.width <= 0) return 0
+  const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+  return ratio * duration.value
+}
+
+function onClipLaneDragOver(e: DragEvent, _clipTrackId: string) {
+  if (!clipDrag.value) {
+    if (e.dataTransfer?.types.includes('application/x-animatr-clip')) {
+      e.preventDefault()
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy'
+    }
+    return
+  }
+  e.preventDefault()
+  if (e.dataTransfer) e.dataTransfer.dropEffect = clipDrag.value.kind === 'new' ? 'copy' : 'move'
+}
+
+function onClipLaneDrop(e: DragEvent, clipTrackId: string) {
+  e.preventDefault()
+  const el = e.currentTarget as HTMLElement
+  const time = pixelTimeFromEvent(e, el)
+  const cd = clipDrag.value
+  if (cd) {
+    const start = Math.max(0, time - cd.grabOffsetSec)
+    if (cd.kind === 'move' && cd.instanceId) {
+      store.moveClipInstance(cd.instanceId, start, clipTrackId)
+    } else {
+      store.addClipInstance(cd.clipId, start, clipTrackId)
+    }
+    clipDrag.value = null
+    return
+  }
+  const clipId = e.dataTransfer?.getData('application/x-animatr-clip')
+  if (clipId) {
+    store.addClipInstance(clipId, time, clipTrackId)
+  }
+}
+
+function onClipBlockDragStart(e: DragEvent, ci: ClipInstance) {
+  if (clipTrim.value) {
+    e.preventDefault()
+    return
+  }
+  if (!e.dataTransfer) return
+  const el = e.currentTarget as HTMLElement
+  const rect = el.getBoundingClientRect()
+  const visible = visibleDurationOf(ci)
+  const grabOffsetSec =
+    rect.width > 0 ? ((e.clientX - rect.left) / rect.width) * visible : 0
+  clipDrag.value = { kind: 'move', clipId: ci.clipId, instanceId: ci.id, grabOffsetSec }
+  e.dataTransfer.effectAllowed = 'move'
+  try {
+    e.dataTransfer.setData('application/x-animatr-clip-move', ci.id)
+  } catch {
+    /* ignore */
+  }
+}
+
+function onClipBlockDragEnd() {
+  clipDrag.value = null
+}
+
+function addClipTrack() {
+  store.addClipTrack()
+}
+
+function clipDurationOf(ci: ClipInstance): number {
+  return clipById.value.get(ci.clipId)?.duration ?? 1
+}
+
+function visibleDurationOf(ci: ClipInstance): number {
+  return Math.max(
+    0.05,
+    clipDurationOf(ci) - (ci.trimStart ?? 0) - (ci.trimEnd ?? 0),
+  )
+}
+
+function clipBlockStyle(ci: ClipInstance) {
+  return {
+    left: pxFromTime(ci.startTime) + 'px',
+    width: Math.max(6, pxFromTime(visibleDurationOf(ci))) + 'px',
+  }
+}
+
+function trimTooltip(ci: ClipInstance): string {
+  const name = clipById.value.get(ci.clipId)?.name ?? '?'
+  const dur = visibleDurationOf(ci).toFixed(2)
+  const trims: string[] = []
+  if ((ci.trimStart ?? 0) > 0) trims.push(`Start -${(ci.trimStart ?? 0).toFixed(2)}s`)
+  if ((ci.trimEnd ?? 0) > 0) trims.push(`Ende -${(ci.trimEnd ?? 0).toFixed(2)}s`)
+  const suffix = trims.length ? ` · ${trims.join(' · ')}` : ''
+  return `${name} · ${dur}s${suffix} · Kanten ziehen zum Verkürzen, Doppelklick zum Öffnen`
+}
+
+interface ClipTrimState {
+  instanceId: string
+  side: 'start' | 'end'
+  pointerId: number
+  startX: number
+  initialStartTime: number
+  initialTrimStart: number
+  initialTrimEnd: number
+}
+
+const clipTrim = ref<ClipTrimState | null>(null)
+
+function onClipHandlePointerDown(e: PointerEvent, ci: ClipInstance, side: 'start' | 'end') {
+  if (e.button !== 0) return
+  e.preventDefault()
+  e.stopPropagation()
+  const el = e.currentTarget as HTMLElement
+  el.setPointerCapture(e.pointerId)
+  clipTrim.value = {
+    instanceId: ci.id,
+    side,
+    pointerId: e.pointerId,
+    startX: e.clientX,
+    initialStartTime: ci.startTime,
+    initialTrimStart: ci.trimStart ?? 0,
+    initialTrimEnd: ci.trimEnd ?? 0,
+  }
+}
+
+function onClipHandlePointerMove(e: PointerEvent) {
+  const t = clipTrim.value
+  if (!t || t.pointerId !== e.pointerId) return
+  const pps = effectivePxPerSec.value
+  if (pps <= 0) return
+  const deltaSec = (e.clientX - t.startX) / pps
+  if (t.side === 'start') {
+    // shift block right = trim more from start + shift startTime
+    store.trimClipInstance(t.instanceId, {
+      trimStart: t.initialTrimStart + deltaSec,
+      startTime: t.initialStartTime + deltaSec,
+    })
+  } else {
+    // shift right edge right = less trimEnd (reveal more)
+    store.trimClipInstance(t.instanceId, {
+      trimEnd: t.initialTrimEnd - deltaSec,
+    })
+  }
+}
+
+function onClipHandlePointerUp(e: PointerEvent) {
+  const t = clipTrim.value
+  if (!t || t.pointerId !== e.pointerId) return
+  const el = e.currentTarget as HTMLElement
+  if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId)
+  clipTrim.value = null
+}
+
+function onClipBlockDblClick(ci: ClipInstance) {
+  store.enterClip(ci.clipId)
+}
+
+function onClipBlockContextMenu(e: MouseEvent, ci: ClipInstance) {
+  e.preventDefault()
+  if (!confirm('Clip-Instanz entfernen?')) return
+  store.removeClipInstance(ci.id)
+}
+
+function exitClip() {
+  store.exitClip()
+}
 const trackMenu = ref<TrackMenuState | null>(null)
 const trackMenuRef = ref<HTMLDivElement | null>(null)
 
@@ -659,87 +868,175 @@ onBeforeUnmount(() => {
           </div>
         </div>
         <div class="tracks">
-          <div
-            v-for="(track, idx) in tracks"
-            :key="track.layerId + ':' + track.kind"
-            class="track"
-            :class="{
-              'sub-track': !track.isParent,
-              inactive: store.selectedLayerId !== null && track.layerId !== store.selectedLayerId,
-              'drop-before': isDropBefore(track),
-              'drop-after': isDropAfter(track, tracks[idx + 1]),
-              dragging: track.isParent && dragLayerId === track.layerId,
-            }"
-            @dragover="track.isParent ? onTrackDragOver($event, track.layerId) : null"
-            @drop="track.isParent ? onTrackDrop($event) : null"
-            @dragleave="onTrackDragLeave"
-          >
-            <span
-              class="track-name"
-              :class="{
-                selected: track.layerId === store.selectedLayerId && track.isParent,
-                parent: track.isParent,
-                sub: !track.isParent,
-              }"
-              :draggable="track.isParent"
-              @click="store.selectLayer(track.layerId)"
-              @contextmenu="track.isParent ? onTrackContextMenu($event, track.layerId) : null"
-              @dragstart="track.isParent ? onTrackDragStart($event, track.layerId) : null"
-              @dragend="onTrackDragEnd"
-            >
-              <PhDotsSixVertical
-                v-if="track.isParent"
-                :size="12"
-                class="drag-handle"
-              />
-              <PhArrowsSplit
-                v-if="track.isParent && track.layer.separated"
-                :size="11"
-                class="name-badge"
-              />
-              <span v-if="!track.isParent" class="sub-indent">↳</span>
-              {{ track.label }}
-            </span>
+          <template v-for="(track, idx) in tracks" :key="track.type === 'layer' ? `l:${track.layerId}:${track.kind}` : `c:${track.clipTrackId}`">
+            <!-- Layer track -->
             <div
-              class="track-lane"
-              :style="{ width: laneWidth + 'px' }"
-              @click="onLaneClick"
-              @dblclick="onLaneDblClick($event, track)"
+              v-if="track.type === 'layer'"
+              class="track"
+              :class="{
+                'sub-track': !track.isParent,
+                inactive: store.selectedLayerId !== null && track.layerId !== store.selectedLayerId,
+                'drop-before': isDropBefore(track),
+                'drop-after': isDropAfter(track, tracks[idx + 1]),
+                dragging: track.isParent && dragTrackId === track.layerId,
+              }"
+              @dragover="track.isParent ? onTrackDragOver($event, track.orderIndex) : null"
+              @drop="track.isParent ? onTrackDrop($event) : null"
+              @dragleave="onTrackDragLeave"
             >
-              <span class="playhead" :style="{ left: pxFromTime(store.playhead) + 'px' }" />
               <span
-                v-for="seg in segmentsOf(track.kfs)"
-                :key="seg.id"
-                class="kf-seg"
-                :class="[seg.held ? 'held' : `easing-${seg.easing}`]"
-                :style="segmentStyle(seg)"
-              />
-              <span
-                v-for="kf in track.kfs"
-                :key="kf.id"
-                class="kf"
-                :class="{ hold: kf.hold }"
-                :style="{ left: pxFromTime(kf.time) + 'px' }"
-                :title="
-                  kf.hold
-                    ? `Still Frame ${formatKfTime(kf.time)} — hält bis zum nächsten Keyframe`
-                    : `Keyframe ${formatKfTime(kf.time)} — ziehen zum Verschieben, Rechtsklick für Optionen`
-                "
-                @pointerdown="onKeyframePointerDown($event, track.layerId, kf.id)"
-                @pointermove="onKeyframePointerMove"
-                @pointerup="onKeyframePointerUp"
-                @pointercancel="onKeyframePointerUp"
-                @click="onKeyframeClick($event, track.layerId, kf.time)"
-                @dblclick="onKeyframeDblClick($event, track.layerId, kf.id)"
-                @contextmenu="onKeyframeContextMenu($event, track.layerId, kf.id, track.kfs)"
-              />
+                class="track-name"
+                :class="{
+                  selected: track.layerId === store.selectedLayerId && track.isParent,
+                  parent: track.isParent,
+                  sub: !track.isParent,
+                }"
+                :draggable="track.isParent"
+                @click="store.selectLayer(track.layerId)"
+                @contextmenu="track.isParent ? onTrackContextMenu($event, track.layerId) : null"
+                @dragstart="track.isParent ? onTrackDragStart($event, track.layerId) : null"
+                @dragend="onTrackDragEnd"
+              >
+                <PhDotsSixVertical v-if="track.isParent" :size="12" class="drag-handle" />
+                <PhArrowsSplit
+                  v-if="track.isParent && track.layer.separated"
+                  :size="11"
+                  class="name-badge"
+                />
+                <span v-if="!track.isParent" class="sub-indent">↳</span>
+                {{ track.label }}
+              </span>
+              <div
+                class="track-lane"
+                :style="{ width: laneWidth + 'px' }"
+                @click="onLaneClick"
+                @dblclick="onLaneDblClick($event, track)"
+              >
+                <span class="playhead" :style="{ left: pxFromTime(store.playhead) + 'px' }" />
+                <span
+                  v-for="seg in segmentsOf(track.kfs)"
+                  :key="seg.id"
+                  class="kf-seg"
+                  :class="[seg.held ? 'held' : `easing-${seg.easing}`]"
+                  :style="segmentStyle(seg)"
+                />
+                <span
+                  v-for="kf in track.kfs"
+                  :key="kf.id"
+                  class="kf"
+                  :class="{ hold: kf.hold }"
+                  :style="{ left: pxFromTime(kf.time) + 'px' }"
+                  :title="
+                    kf.hold
+                      ? `Still Frame ${formatKfTime(kf.time)} — hält bis zum nächsten Keyframe`
+                      : `Keyframe ${formatKfTime(kf.time)} — ziehen zum Verschieben, Rechtsklick für Optionen`
+                  "
+                  @pointerdown="onKeyframePointerDown($event, track.layerId, kf.id)"
+                  @pointermove="onKeyframePointerMove"
+                  @pointerup="onKeyframePointerUp"
+                  @pointercancel="onKeyframePointerUp"
+                  @click="onKeyframeClick($event, track.layerId, kf.time)"
+                  @dblclick="onKeyframeDblClick($event, track.layerId, kf.id)"
+                  @contextmenu="onKeyframeContextMenu($event, track.layerId, kf.id, track.kfs)"
+                />
+              </div>
             </div>
+
+            <!-- Clip track -->
+            <div
+              v-else
+              class="track clip-track"
+              :class="{
+                'drop-before': isDropBefore(track),
+                'drop-after': isDropAfter(track, tracks[idx + 1]),
+                dragging: dragTrackId === track.clipTrackId,
+              }"
+              @dragover="onTrackDragOver($event, track.orderIndex)"
+              @drop="onTrackDrop($event)"
+              @dragleave="onTrackDragLeave"
+            >
+              <span
+                class="track-name clip-track-name"
+                draggable="true"
+                @dragstart="onTrackDragStart($event, track.clipTrackId)"
+                @dragend="onTrackDragEnd"
+              >
+                <PhDotsSixVertical :size="12" class="drag-handle" />
+                <PhFilmStrip :size="11" class="name-badge" />
+                {{ track.name }}
+              </span>
+              <div
+                class="track-lane clip-lane"
+                :style="{ width: laneWidth + 'px' }"
+                @dragover.stop="onClipLaneDragOver($event, track.clipTrackId)"
+                @drop.stop="onClipLaneDrop($event, track.clipTrackId)"
+              >
+                <span
+                  v-for="ci in clipInstancesByTrack[track.clipTrackId] ?? []"
+                  :key="ci.id"
+                  class="clip-block"
+                  :class="{
+                    'trimmed-start': (ci.trimStart ?? 0) > 0,
+                    'trimmed-end': (ci.trimEnd ?? 0) > 0,
+                    trimming: clipTrim?.instanceId === ci.id,
+                  }"
+                  :style="clipBlockStyle(ci)"
+                  :title="trimTooltip(ci)"
+                  draggable="true"
+                  @dragstart.stop="onClipBlockDragStart($event, ci)"
+                  @dragend="onClipBlockDragEnd"
+                  @dblclick="onClipBlockDblClick(ci)"
+                  @contextmenu="onClipBlockContextMenu($event, ci)"
+                >
+                  <span
+                    class="clip-handle start"
+                    draggable="false"
+                    @pointerdown="onClipHandlePointerDown($event, ci, 'start')"
+                    @pointermove="onClipHandlePointerMove"
+                    @pointerup="onClipHandlePointerUp"
+                    @pointercancel="onClipHandlePointerUp"
+                    @dragstart.prevent.stop
+                    @dblclick.stop
+                    @click.stop
+                  />
+                  <PhFilmStrip :size="11" class="clip-block-icon" />
+                  <span class="clip-block-name">{{ clipById.get(ci.clipId)?.name ?? '?' }}</span>
+                  <span
+                    class="clip-handle end"
+                    draggable="false"
+                    @pointerdown="onClipHandlePointerDown($event, ci, 'end')"
+                    @pointermove="onClipHandlePointerMove"
+                    @pointerup="onClipHandlePointerUp"
+                    @pointercancel="onClipHandlePointerUp"
+                    @dragstart.prevent.stop
+                    @dblclick.stop
+                    @click.stop
+                  />
+                </span>
+              </div>
+            </div>
+          </template>
+          <p v-if="!tracks.length" class="empty">Noch keine Tracks.</p>
+          <div v-if="!inClipEdit" class="track clip-track add-clip-track">
+            <button class="add-clip-btn" title="Weitere Clip-Spur" @click="addClipTrack">
+              <PhPlus :size="11" weight="bold" />
+              <span>Clip-Spur hinzufügen</span>
+            </button>
           </div>
-          <p v-if="!tracks.length" class="empty">Noch keine Layer.</p>
         </div>
       </div>
     </div>
 
+    <div v-if="inClipEdit" class="clip-breadcrumb">
+      <button class="breadcrumb-btn" @click="exitClip">
+        ← Haupt-Timeline
+      </button>
+      <span class="breadcrumb-current">
+        <PhFilmStrip :size="11" />
+        {{ store.activeClip?.name ?? '' }}
+      </span>
+    </div>
+
     <div
       v-if="menu"
       ref="menuRef"
@@ -1257,6 +1554,211 @@ onBeforeUnmount(() => {
   font-size: 12px;
 }
 
+.track.clip-track {
+  height: 34px;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(110, 168, 255, 0.04) 50%,
+    transparent 100%
+  );
+}
+
+.clip-track .track-name {
+  background: var(--panel-alt);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.clip-track-name {
+  gap: 6px;
+}
+
+.clip-lane {
+  position: relative;
+}
+
+.clip-block {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 8px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent);
+  border-radius: var(--radius-sm);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: grab;
+  touch-action: none;
+  z-index: 2;
+  transition: background 140ms var(--ease), transform 140ms var(--ease);
+}
+
+.clip-block:hover {
+  background: var(--accent-soft-strong);
+}
+
+.clip-block:active {
+  cursor: grabbing;
+}
+
+.clip-block-icon {
+  flex-shrink: 0;
+  opacity: 0.9;
+}
+
+.clip-block-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.clip-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 3;
+  touch-action: none;
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0.35),
+    rgba(255, 255, 255, 0)
+  );
+  opacity: 0;
+  transition: opacity 120ms var(--ease), background 120ms var(--ease);
+}
+
+.clip-handle.start {
+  left: 0;
+  border-top-left-radius: var(--radius-sm);
+  border-bottom-left-radius: var(--radius-sm);
+}
+
+.clip-handle.end {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    rgba(255, 255, 255, 0.35),
+    rgba(255, 255, 255, 0)
+  );
+  border-top-right-radius: var(--radius-sm);
+  border-bottom-right-radius: var(--radius-sm);
+}
+
+.clip-handle::after {
+  content: '';
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  width: 2px;
+  border-radius: 2px;
+  background: var(--accent);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
+}
+
+.clip-handle.start::after {
+  left: 2px;
+}
+
+.clip-handle.end::after {
+  right: 2px;
+}
+
+.clip-block:hover .clip-handle {
+  opacity: 1;
+}
+
+.clip-block.trimmed-start .clip-handle.start,
+.clip-block.trimmed-end .clip-handle.end {
+  opacity: 0.75;
+}
+
+.clip-block.trimmed-start .clip-handle.start::after,
+.clip-block.trimmed-end .clip-handle.end::after {
+  background: #ffc857;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
+}
+
+.clip-block.trimming .clip-handle {
+  opacity: 1;
+}
+
+.clip-block.trimming {
+  box-shadow: 0 0 0 1px #ffc857;
+}
+
+.clip-handle:hover,
+.clip-handle:active {
+  background: rgba(255, 255, 255, 0.25) !important;
+  opacity: 1 !important;
+}
+
+.add-clip-track {
+  height: 26px;
+  background: transparent;
+  border-bottom: 1px dashed var(--border);
+}
+
+.add-clip-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 14px;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+.add-clip-btn:hover {
+  color: var(--accent);
+}
+
+.clip-breadcrumb {
+  position: absolute;
+  top: 4px;
+  left: 12px;
+  z-index: 15;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 10px 4px 8px;
+  background: var(--panel);
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  box-shadow: var(--shadow-sm);
+  font-size: 11px;
+}
+
+.breadcrumb-btn {
+  padding: 2px 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 11px;
+  border-radius: 999px;
+}
+
+.breadcrumb-btn:hover {
+  color: var(--accent);
+}
+
+.breadcrumb-current {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--accent);
+  font-weight: 500;
+}
+
 .kf-menu {
   position: fixed;
   z-index: 1000;