diff --git a/package.json b/package.json
index ab2782d..d0b7ff3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ruwio",
   "private": true,
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/CanvasStage.vue b/src/components/CanvasStage.vue
index c9b311d..81eb633 100644
--- a/src/components/CanvasStage.vue
+++ b/src/components/CanvasStage.vue
@@ -39,6 +39,7 @@ import { t } from '@/i18n'
 import { useKfSelection } from '@/composables/useKfSelection'
 import { showLocked } from '@/composables/useShowLocked'
 import { expandedTrackOrder } from '@/lib/sceneOrder'
+import { CLIP_FALLBACK_BOUNDS, computeClipBounds, type Rect } from '@/lib/clipBounds'
 
 const store = useSceneStore()
 const clipart = useClipartStore()
@@ -737,6 +738,10 @@ interface RenderedClipLayer extends RenderedLayer {
 
 interface RenderedClipInstance {
   instance: ClipInstance
+  /** Union bbox of every clip layer across its full animation — the
+   *  stable frame that the transformer wraps. Null when the clip has
+   *  no measurable layers (template falls back to a placeholder). */
+  bounds: Rect | null
   items: RenderedClipLayer[]
 }
 
@@ -807,6 +812,8 @@ const stackItems = computed<StackItem[]>(() => {
   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 clipTrackById = new Map<string, NonNullable<typeof store.scene.clipTracks>[number]>()
+  for (const t of store.scene.clipTracks ?? []) clipTrackById.set(t.id, t)
   const instancesByTrack = new Map<string, NonNullable<typeof store.scene.clipInstances>>()
   for (const ci of store.scene.clipInstances ?? []) {
     const arr = instancesByTrack.get(ci.clipTrackId) ?? []
@@ -838,6 +845,11 @@ const stackItems = computed<StackItem[]>(() => {
       })
       continue
     }
+    // Editor-only hide for an entire clip track — skip every instance
+    // on it in the Konva stack so the stage matches the eye-icon
+    // state. Exports still see the instances unless the user opts
+    // into strip-hidden.
+    if (clipTrackById.get(id)?.editorHidden) continue
     const instances = instancesByTrack.get(id) ?? []
     for (const inst of instances) {
       const clip = clipById.get(inst.clipId)
@@ -865,9 +877,18 @@ const stackItems = computed<StackItem[]>(() => {
           props: sampleLayer(cl, localTime),
         })
       }
-      if (items.length) {
-        out.push({ kind: 'clipInstance', bundle: { instance: inst, items } })
-      }
+      // Always push the bundle when the instance is in time-range,
+      // even if no items are renderable at this playhead: the frame
+      // rect still needs to render so the clip can be selected (and
+      // the transformer framed) on empty frames.
+      out.push({
+        kind: 'clipInstance',
+        bundle: {
+          instance: inst,
+          bounds: computeClipBounds(clip, assetMap.value),
+          items,
+        },
+      })
     }
   }
   return out
@@ -1261,6 +1282,30 @@ function clipInstanceGroupConfig(inst: ClipInstance) {
   }
 }
 
+/** Invisible frame rect sized to the clip's union bbox. Sits as the
+ *  first child of the ci-group so:
+ *  - the group's client rect is dominated by this stable rectangle,
+ *    keeping transformer handles at the clip's outer constraints
+ *    instead of jittering with animated inner content;
+ *  - clicks anywhere in the clip's spatial footprint (including
+ *    empty playhead frames) still hit this rect, bubble to the group
+ *    and select the instance. `fill: 'black' + opacity: 0` renders
+ *    nothing but still paints the hit graph, so listening works. */
+function clipFrameConfig(instanceId: string, bounds: Rect | null) {
+  const b = bounds ?? CLIP_FALLBACK_BOUNDS
+  return {
+    id: `ci-frame:${instanceId}`,
+    name: 'ci-frame',
+    x: b.x,
+    y: b.y,
+    width: Math.max(1, b.width),
+    height: Math.max(1, b.height),
+    fill: 'black',
+    opacity: 0,
+    listening: true,
+  }
+}
+
 function onClipInstanceDragEnd(
   e: Konva.KonvaEventObject<DragEvent>,
   instanceId: string,
@@ -3342,6 +3387,12 @@ function onResizeHandlePointerUp(e: PointerEvent) {
                   @dragend="onClipInstanceDragEnd($event, entry.bundle.instance.id)"
                   @transformend="onClipInstanceTransformEnd($event, entry.bundle.instance.id)"
                 >
+                  <v-rect
+                    :config="clipFrameConfig(
+                      entry.bundle.instance.id,
+                      entry.bundle.bounds,
+                    )"
+                  />
                   <template
                     v-for="sub in entry.bundle.items"
                     :key="`ci:${entry.bundle.instance.id}:${sub.layer.id}`"
diff --git a/src/components/ExportDialog.vue b/src/components/ExportDialog.vue
index 2794057..51120f5 100644
--- a/src/components/ExportDialog.vue
+++ b/src/components/ExportDialog.vue
@@ -42,6 +42,7 @@ const skipHidden = ref(false)
 
 const hasHiddenLayers = computed(() => {
   if (store.scene.layers.some((l) => l.editorHidden)) return true
+  if (store.scene.clipTracks?.some((t) => t.editorHidden)) return true
   for (const clip of store.scene.clips ?? []) {
     if (clip.layers.some((l) => l.editorHidden)) return true
   }
@@ -51,6 +52,26 @@ const hasHiddenLayers = computed(() => {
   return false
 })
 
+/** Strip every instance that belongs to an editor-hidden clip track,
+ *  then drop the track itself. Shared between project + single-scene
+ *  clones so both payload shapes stay in sync. */
+function stripHiddenClipTracks(page: {
+  clipTracks?: { id: string; editorHidden?: boolean }[]
+  clipInstances?: { clipTrackId: string }[]
+}) {
+  if (!page.clipTracks?.length) return
+  const hiddenIds = new Set(
+    page.clipTracks.filter((t) => t.editorHidden).map((t) => t.id),
+  )
+  if (!hiddenIds.size) return
+  if (page.clipInstances) {
+    page.clipInstances = page.clipInstances.filter(
+      (ci) => !hiddenIds.has(ci.clipTrackId),
+    )
+  }
+  page.clipTracks = page.clipTracks.filter((t) => !hiddenIds.has(t.id))
+}
+
 function projectClone() {
   // Project-shaped payload for standalone static exports — the
   // embedded runtime handles multi-scene playback natively.
@@ -58,6 +79,7 @@ function projectClone() {
   if (!skipHidden.value) return project
   for (const page of project.scenes) {
     page.layers = page.layers.filter((l: Layer) => !l.editorHidden)
+    stripHiddenClipTracks(page)
   }
   if (Array.isArray(project.clips)) {
     for (const clip of project.clips) {
@@ -82,6 +104,7 @@ function activeSceneClone() {
   const scene = JSON.parse(JSON.stringify(store.scene))
   if (!skipHidden.value) return scene
   scene.layers = scene.layers.filter((l: Layer) => !l.editorHidden)
+  stripHiddenClipTracks(scene)
   if (Array.isArray(scene.clips)) {
     for (const clip of scene.clips) {
       clip.layers = clip.layers.filter((l: Layer) => !l.editorHidden)
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index d8b9afe..d9b2f9a 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -1862,9 +1862,17 @@ function onClipBlockPointerUp(e: PointerEvent) {
   const el = e.currentTarget as HTMLElement
   if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId)
   const wasMoved = m.moved
+  const instanceId = m.instanceId
   clipMove.value = null
-  // suppress click/dblclick if we actually dragged
-  if (wasMoved) e.preventDefault()
+  if (wasMoved) {
+    // suppress click/dblclick if we actually dragged
+    e.preventDefault()
+    return
+  }
+  // Pure click: select the instance so the canvas transformer attaches
+  // to its wrapper group. Without this, users have no way to grab a
+  // clip whose current-playhead content happens to be empty.
+  store.selectClipInstance(instanceId)
 }
 
 const clipDragOverDropzone = ref(false)
@@ -3419,6 +3427,24 @@ onBeforeUnmount(() => {
                 <PhDotsSixVertical :size="12" class="drag-handle" />
                 <PhFilmStrip :size="11" class="name-badge" />
                 <span class="track-label">{{ track.name }}</span>
+                <button
+                  class="eye-btn"
+                  :class="{ hidden: !!clipTrackById.get(track.clipTrackId)?.editorHidden }"
+                  v-tooltip="clipTrackById.get(track.clipTrackId)?.editorHidden ? t('timeline.showInEditor') : t('timeline.hideInEditor')"
+                  @click.stop="
+                    store.setClipTrackEditorHidden(
+                      track.clipTrackId,
+                      !clipTrackById.get(track.clipTrackId)?.editorHidden,
+                    )
+                  "
+                  @mousedown.stop
+                  @dragstart.prevent.stop
+                >
+                  <component
+                    :is="clipTrackById.get(track.clipTrackId)?.editorHidden ? PhEyeSlash : PhEye"
+                    :size="12"
+                  />
+                </button>
                 <button
                   v-if="!lockedGroupChildIds.has(track.clipTrackId)"
                   class="lock-btn"
diff --git a/src/devtools/tests.ts b/src/devtools/tests.ts
index dd14a5b..7fb63ab 100644
--- a/src/devtools/tests.ts
+++ b/src/devtools/tests.ts
@@ -33,6 +33,7 @@ import type { PolygonAsset } from '@/types/scene'
 import { drawButtonFrame, drawSceneFrame, renderButtonThumbnail } from '@/lib/render'
 import { t as i18nT } from '@/i18n'
 import { expandedTrackOrder } from '@/lib/sceneOrder'
+import { CLIP_FALLBACK_BOUNDS, computeClipBounds } from '@/lib/clipBounds'
 import {
   deleteStoredProject,
   getStoredProject,
@@ -4301,6 +4302,72 @@ export function registerAllTests(): void {
     })
   })
 
+  suite('clip bounds — stable frame rect', () => {
+    // The stage wraps each ClipInstance in an invisible frame rect
+    // sized to the union of every clip layer's footprint across all
+    // keyframes. Keeps the canvas transformer's handles on the
+    // clip's own outer constraints instead of chasing a moving child
+    // shape, and gives empty-playhead frames a clickable hit area.
+    test('union bbox covers every layer at its extreme keyframes', () => {
+      const s = makeFreshStore()
+      const rectAsset = s.addAsset({
+        kind: 'rect', name: 'R', width: 40, height: 40, fill: '#f00',
+      })
+      const clip = s.addClip('CB')
+      s.enterClip(clip.id)
+      clip.duration = 5
+      const l = s.addLayer(rectAsset.id)!
+      // Move the layer from (0,0) to (200,120) between t=0 and t=clip.duration.
+      s.upsertKeyframe(l.id, 0, { x: 0, y: 0 })
+      s.upsertKeyframe(l.id, 4, { x: 200, y: 120 })
+      s.exitClip()
+
+      const assets = new Map(s.scene.assets.map((a) => [a.id, a]))
+      const bounds = computeClipBounds(clip, assets)
+      expect(bounds).toBeTruthy()
+      // The layer is 40×40 centered on its origin (default offset=20,20).
+      // At t=0 it sits around (0,0); at t=4 it sits around (200,120).
+      // Union must at least cover both extremes' centers.
+      expect(bounds!.x).toBeLessThan(-5)
+      expect(bounds!.y).toBeLessThan(-5)
+      expect(bounds!.x + bounds!.width).toBeGreaterThan(200 + 5)
+      expect(bounds!.y + bounds!.height).toBeGreaterThan(120 + 5)
+    })
+
+    test('clip without measurable layers returns null (caller uses fallback)', () => {
+      const s = makeFreshStore()
+      const clip = s.addClip('Empty')
+      const assets = new Map(s.scene.assets.map((a) => [a.id, a]))
+      expect(computeClipBounds(clip, assets)).toBeNull()
+      // Fallback is a small centred square so the transformer still
+      // has something to grab.
+      expect(CLIP_FALLBACK_BOUNDS.width).toBeGreaterThan(0)
+      expect(CLIP_FALLBACK_BOUNDS.height).toBeGreaterThan(0)
+    })
+
+    test('bounds scale with per-keyframe scaleX/scaleY', () => {
+      const s = makeFreshStore()
+      const rectAsset = s.addAsset({
+        kind: 'rect', name: 'R', width: 40, height: 40, fill: '#f00',
+      })
+      const clip = s.addClip('CB')
+      s.enterClip(clip.id)
+      clip.duration = 3
+      const l = s.addLayer(rectAsset.id)!
+      // Grow the layer 4× at t=2.
+      s.upsertKeyframe(l.id, 0, { x: 0, y: 0, scaleX: 1, scaleY: 1 })
+      s.upsertKeyframe(l.id, 2, { x: 0, y: 0, scaleX: 4, scaleY: 4 })
+      s.exitClip()
+      const assets = new Map(s.scene.assets.map((a) => [a.id, a]))
+      const bounds = computeClipBounds(clip, assets)
+      expect(bounds).toBeTruthy()
+      // 4× a 40-wide rect = 160 across → bbox is at least that wide
+      // (pre-rotation padding pushes it a bit bigger, which is fine).
+      expect(bounds!.width).toBeGreaterThan(159)
+      expect(bounds!.height).toBeGreaterThan(159)
+    })
+  })
+
   suite('svg split', () => {
     // A minimal SVG with two non-overlapping paths. Absolute
     // coordinates so getBBox returns predictable values under jsdom/
@@ -5965,6 +6032,155 @@ export function registerAllTests(): void {
       expect(s.activeScene.clipInstances.find((x) => x.id === ci.id)).toBe(undefined)
       handle.unmount()
     })
+
+    test('pure click on a clip-block selects the instance', async () => {
+      // Regression: a clip whose current playhead content is empty can
+      // only be grabbed via its timeline block. Pointerdown starts a
+      // drag-tracker; a pointerup without motion is a pure click and
+      // must land on selectClipInstance so the canvas transformer
+      // attaches to its wrapper group.
+      const s = makeFreshStore()
+      s.setDuration(10)
+      const clip = s.addClip('CInst')
+      clip.duration = 2
+      const track = s.scene.clipTracks![0]
+      const ci = s.addClipInstance(clip.id, 0, track.id)!
+      const handle = mountComponent(Timeline, {})
+      await nextTick()
+      const block = handle.host.querySelector('.clip-block') as HTMLElement
+      expect(block).toBeTruthy()
+      expect(s.selectedClipInstanceId).toBe(null)
+      block.dispatchEvent(
+        new PointerEvent('pointerdown', {
+          bubbles: true,
+          cancelable: true,
+          pointerId: 1,
+          button: 0,
+          clientX: 20,
+          clientY: 10,
+        }),
+      )
+      block.dispatchEvent(
+        new PointerEvent('pointerup', {
+          bubbles: true,
+          cancelable: true,
+          pointerId: 1,
+          button: 0,
+          clientX: 20,
+          clientY: 10,
+        }),
+      )
+      await nextTick()
+      expect(s.selectedClipInstanceId).toBe(ci.id)
+      handle.unmount()
+    })
+
+    test('dragging a clip-block does not trigger selection', async () => {
+      // If the user actually moves the clip, the pointerup is a drag
+      // release — not a click — and must not also fire the click-to-
+      // select path. Otherwise every successful move would overwrite
+      // whatever the user had selected on the canvas.
+      const s = makeFreshStore()
+      s.setDuration(10)
+      const clip = s.addClip('CInst')
+      clip.duration = 2
+      const track = s.scene.clipTracks![0]
+      s.addClipInstance(clip.id, 0, track.id)!
+      const handle = mountComponent(Timeline, {})
+      await nextTick()
+      const block = handle.host.querySelector('.clip-block') as HTMLElement
+      block.dispatchEvent(
+        new PointerEvent('pointerdown', {
+          bubbles: true, cancelable: true, pointerId: 2, button: 0,
+          clientX: 20, clientY: 10,
+        }),
+      )
+      // Move past the 2px dead-zone to flip `moved` true.
+      block.dispatchEvent(
+        new PointerEvent('pointermove', {
+          bubbles: true, cancelable: true, pointerId: 2,
+          clientX: 60, clientY: 10,
+        }),
+      )
+      block.dispatchEvent(
+        new PointerEvent('pointerup', {
+          bubbles: true, cancelable: true, pointerId: 2, button: 0,
+          clientX: 60, clientY: 10,
+        }),
+      )
+      await nextTick()
+      expect(s.selectedClipInstanceId).toBe(null)
+      handle.unmount()
+    })
+  })
+
+  suite('scene store — clip track editor hide', () => {
+    test('setClipTrackEditorHidden toggles the flag on + off', () => {
+      const s = makeFreshStore()
+      s.addClip('CInst')
+      const track = s.scene.clipTracks![0]
+      expect(track.editorHidden).toBe(undefined)
+      s.setClipTrackEditorHidden(track.id, true)
+      expect(track.editorHidden).toBe(true)
+      s.setClipTrackEditorHidden(track.id, false)
+      // Pruned back out so the serialized JSON stays minimal.
+      expect('editorHidden' in track).toBe(false)
+    })
+
+    test('hiding a track clears selectedClipInstanceId for instances on it', () => {
+      // The transformer watcher reacts to selectedClipInstanceId; if we
+      // don't clear it, the handles stay wrapped around a ci-group
+      // that's no longer in the Konva stack.
+      const s = makeFreshStore()
+      const clip = s.addClip('CInst')
+      clip.duration = 2
+      const track = s.scene.clipTracks![0]
+      const ci = s.addClipInstance(clip.id, 0, track.id)!
+      s.selectClipInstance(ci.id)
+      expect(s.selectedClipInstanceId).toBe(ci.id)
+      s.setClipTrackEditorHidden(track.id, true)
+      expect(s.selectedClipInstanceId).toBe(null)
+    })
+
+    test('hiding a track leaves selection on a different track alone', () => {
+      const s = makeFreshStore()
+      const clip = s.addClip('CInst')
+      clip.duration = 2
+      const t1 = s.scene.clipTracks![0]
+      const t2 = s.addClipTrack('T2')
+      const ci1 = s.addClipInstance(clip.id, 0, t1.id)!
+      const ci2 = s.addClipInstance(clip.id, 5, t2.id)!
+      s.selectClipInstance(ci2.id)
+      s.setClipTrackEditorHidden(t1.id, true)
+      // Only ci1 lives on the hidden track; ci2 is on t2 and must
+      // keep its selection.
+      expect(s.selectedClipInstanceId).toBe(ci2.id)
+      void ci1
+    })
+  })
+
+  suite('ui — Timeline clip-track eye button', () => {
+    test('clicking the eye toggles editorHidden on the clip track', async () => {
+      const s = makeFreshStore()
+      s.addClip('CInst')
+      const track = s.scene.clipTracks![0]
+      const handle = mountComponent(Timeline, {})
+      await nextTick()
+      const clipTrack = handle.host.querySelector('.track.clip-track') as HTMLElement
+      expect(clipTrack).toBeTruthy()
+      const eye = clipTrack.querySelector('.track-name .eye-btn') as HTMLButtonElement
+      expect(eye).toBeTruthy()
+      expect(eye.classList.contains('hidden')).toBe(false)
+      eye.click()
+      await nextTick()
+      expect(track.editorHidden).toBe(true)
+      const eye2 = clipTrack.querySelector('.track-name .eye-btn') as HTMLButtonElement
+      expect(eye2.classList.contains('hidden')).toBe(true)
+      eye2.click()
+      await nextTick()
+      expect('editorHidden' in track).toBe(false)
+      handle.unmount()
+    })
   })
 
   suite('ui — Timeline audio-clip context menu', () => {
@@ -6889,6 +7105,299 @@ export function registerAllTests(): void {
     })
   })
 
+  suite('ui — CanvasStage clip-instance transform', () => {
+    // mountComponent skips VueKonva, which is fine for DOM-overlay
+    // tests but not for clip-instance selection: we need real Konva
+    // nodes so `attachTransformer` can find #ci-group:<id> and so the
+    // Konva event bus bubbles mousedown from a child shape up to the
+    // group's @mousedown handler.
+    async function mountCanvasWithKonva() {
+      const VueKonva = (await import('vue-konva')).default
+      const host = document.createElement('div')
+      host.setAttribute('data-test-host', '')
+      host.style.width = '800px'
+      host.style.height = '600px'
+      document.body.appendChild(host)
+      const app = createApp({
+        render() {
+          return h(CanvasStage, {})
+        },
+      })
+      app.use(VueKonva)
+      app.directive('tooltip', vTooltip)
+      app.mount(host)
+      return {
+        host,
+        app,
+        unmount() {
+          app.unmount()
+          host.remove()
+        },
+      }
+    }
+
+    async function getKonvaStage() {
+      const Konva = (await import('konva')).default
+      // Last stage = the one just mounted by this test. The app's
+      // background CanvasStage also registers a stage, so we can't
+      // just take stages[0].
+      return Konva.stages[Konva.stages.length - 1]
+    }
+
+    /** Seed a scene with a single clip holding one rect layer, plus
+     *  one instance of that clip on a new clip track. Returns the
+     *  instance + the inner layer id so tests can target them by id. */
+    function seedClipInstance() {
+      const s = makeFreshStore()
+      s.setDuration(10)
+      const asset = s.addAsset({
+        kind: 'rect',
+        name: 'R',
+        width: 80,
+        height: 80,
+        fill: '#f33',
+      })
+      const clip = s.addClip('CInst')
+      clip.duration = 2
+      s.enterClip(clip.id)
+      const innerLayer = s.addLayer(asset.id)!
+      s.exitClip()
+      const track = s.scene.clipTracks![0]
+      const ci = s.addClipInstance(clip.id, 0, track.id)!
+      return { s, clip, ci, innerLayerId: innerLayer.id }
+    }
+
+    test('selectClipInstance attaches the transformer to #ci-group:<id>', async () => {
+      // Simplest path: programmatic selection must wire the main
+      // transformer to the clip-instance wrapper group. If this fails
+      // the transform handles never appear, regardless of how the
+      // selection got set (mousedown handler, keyboard, etc.).
+      const { s, ci } = seedClipInstance()
+      const handle = await mountCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(40)
+        s.selectClipInstance(ci.id)
+        await nextTick()
+        await tick(40)
+        const stage = await getKonvaStage()
+        const groupId = `ci-group:${ci.id}`
+        const group = stage.findOne(`#${groupId}`)
+        expect(group).toBeTruthy()
+        // The main transformer (not the hit-shape one) must now wrap
+        // the clip-instance group.
+        const transformers = stage.find('Transformer')
+        const attachedToGroup = transformers.some((tr) => {
+          const nodes = (tr as unknown as { nodes: () => unknown[] }).nodes()
+          return nodes.length === 1 && (nodes[0] as { id: () => string }).id() === groupId
+        })
+        expect(attachedToGroup).toBe(true)
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('mousedown on a clip-instance child shape selects the instance', async () => {
+      // Regression guard: after multi-clip-per-track landed nobody was
+      // checking that the bubbled-up @mousedown on the wrapper group
+      // still selects the instance. The inner shape must be listening
+      // so Konva bubbles the event through to the group's handler.
+      const { s, ci, innerLayerId } = seedClipInstance()
+      const handle = await mountCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(40)
+        const stage = await getKonvaStage()
+        const inner = stage.findOne(`#ci:${ci.id}:${innerLayerId}`)
+        expect(inner).toBeTruthy()
+        ;(inner as unknown as {
+          fire: (type: string, evt: unknown, bubble: boolean) => void
+        }).fire(
+          'mousedown',
+          { target: inner, type: 'mousedown', evt: { button: 0 } },
+          true,
+        )
+        await nextTick()
+        expect(s.selectedClipInstanceId).toBe(ci.id)
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('transformend on the ci-group writes back via setClipInstanceTransform', async () => {
+      // End-to-end: the user dragged a handle, Konva applied the new
+      // scale/rotation to the group node, and on pointerup the
+      // transformend handler must persist those values onto the
+      // instance so the stored scene reflects the transform.
+      const { s, ci } = seedClipInstance()
+      const handle = await mountCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(40)
+        s.selectClipInstance(ci.id)
+        await nextTick()
+        await tick(40)
+        const stage = await getKonvaStage()
+        const group = stage.findOne(`#ci-group:${ci.id}`) as unknown as {
+          scaleX: (v?: number) => number
+          scaleY: (v?: number) => number
+          rotation: (v?: number) => number
+          x: (v?: number) => number
+          y: (v?: number) => number
+          fire: (type: string, evt: unknown, bubble: boolean) => void
+        }
+        expect(group).toBeTruthy()
+        group.scaleX(2)
+        group.scaleY(3)
+        group.rotation(45)
+        group.x(17)
+        group.y(-9)
+        group.fire(
+          'transformend',
+          { target: group, type: 'transformend' },
+          true,
+        )
+        await nextTick()
+        expect(ci.scaleX).toBe(2)
+        expect(ci.scaleY).toBe(3)
+        expect(ci.rotation).toBe(45)
+        expect(ci.x).toBe(17)
+        expect(ci.y).toBe(-9)
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('ci-group is framed by an invisible ci-frame rect at the clip bounds', async () => {
+      // The frame rect locks the transformer onto the clip's own
+      // outer constraints instead of the currently-visible inner
+      // shape. Its bbox dominates the group's client rect so handles
+      // stay put even when inner layers animate.
+      const { s, ci } = seedClipInstance()
+      const handle = await mountCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(40)
+        const stage = await getKonvaStage()
+        const frame = stage.findOne(`#ci-frame:${ci.id}`) as unknown as {
+          width: () => number
+          height: () => number
+          name: () => string
+          listening: () => boolean
+        } | null
+        expect(frame).toBeTruthy()
+        expect(frame!.name()).toBe('ci-frame')
+        expect(frame!.listening()).toBe(true)
+        expect(frame!.width()).toBeGreaterThan(0)
+        expect(frame!.height()).toBeGreaterThan(0)
+        // The seed clip has a single 80×80 rect, so the frame must be
+        // at least large enough to enclose it.
+        expect(frame!.width()).toBeGreaterThan(79)
+        expect(frame!.height()).toBeGreaterThan(79)
+        // Sanity: the stage's selection store hasn't flipped just by
+        // rendering — only an actual click should select.
+        expect(s.selectedClipInstanceId).toBe(null)
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('clicking the ci-frame on an empty-content frame selects the instance', async () => {
+      // Regression: if the clip has no visible content at the current
+      // playhead, the old bundle was dropped entirely — no ci-group,
+      // nothing to click. With the frame rect the bundle always
+      // renders and empty-frame clips remain selectable.
+      const s = makeFreshStore()
+      s.setDuration(10)
+      const rect = s.addAsset({
+        kind: 'rect', name: 'R', width: 60, height: 60, fill: '#f00',
+      })
+      const clip = s.addClip('Hidden')
+      clip.duration = 2
+      s.enterClip(clip.id)
+      const inner = s.addLayer(rect.id)!
+      s.exitClip()
+      // Force the layer to be editorHidden or invisible at playhead 0
+      // so `items` comes back empty. Flipping `visible` is the
+      // authoritative hide — stackItems skips `!cl.visible`.
+      inner.visible = false
+      const track = s.scene.clipTracks![0]
+      const ci = s.addClipInstance(clip.id, 0, track.id)!
+
+      const handle = await mountCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(40)
+        const stage = await getKonvaStage()
+        const frame = stage.findOne(`#ci-frame:${ci.id}`)
+        expect(frame).toBeTruthy()
+        ;(frame as unknown as {
+          fire: (type: string, evt: unknown, bubble: boolean) => void
+        }).fire(
+          'mousedown',
+          { target: frame, type: 'mousedown', evt: { button: 0 } },
+          true,
+        )
+        await nextTick()
+        expect(s.selectedClipInstanceId).toBe(ci.id)
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('editorHidden clip track drops its instances from the Konva stack', async () => {
+      // Matches the layer editor-hide semantics: the track stays in
+      // the scene file (so exports still see it) but no ci-group or
+      // ci-frame is rendered in the editor.
+      const { s, ci } = seedClipInstance()
+      const track = s.scene.clipTracks![0]
+      s.setClipTrackEditorHidden(track.id, true)
+      const handle = await mountCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(40)
+        const stage = await getKonvaStage()
+        expect(stage.findOne(`#ci-group:${ci.id}`)).toBeFalsy()
+        expect(stage.findOne(`#ci-frame:${ci.id}`)).toBeFalsy()
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('second clip instance on the same track is independently selectable', async () => {
+      // The user's own hunch points at multi-clip-per-track: when a
+      // track carries two instances, picking the second one must
+      // target that instance, not the first. Guards against a bundle
+      // / key collision that would route both clicks to the same
+      // group.
+      const { s, clip } = seedClipInstance()
+      const track = s.scene.clipTracks![0]
+      // Put the second instance at the same startTime so both are in
+      // range at the default playhead of 0 and both ci-groups are in
+      // the Konva stack.
+      const ci2 = s.addClipInstance(clip.id, 0, track.id)!
+      const handle = await mountCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(40)
+        const stage = await getKonvaStage()
+        const group2 = stage.findOne(`#ci-group:${ci2.id}`)
+        expect(group2).toBeTruthy()
+        ;(group2 as unknown as {
+          fire: (type: string, evt: unknown, bubble: boolean) => void
+        }).fire(
+          'mousedown',
+          { target: group2, type: 'mousedown', evt: { button: 0 } },
+          true,
+        )
+        await nextTick()
+        expect(s.selectedClipInstanceId).toBe(ci2.id)
+      } finally {
+        handle.unmount()
+      }
+    })
+  })
+
   suite('ui — AssetSidebar audio section', () => {
     test('lists audio assets with a duration label under the Audio heading', async () => {
       const s = makeFreshStore()
diff --git a/src/lib/clipBounds.ts b/src/lib/clipBounds.ts
new file mode 100644
index 0000000..1bb72b1
--- /dev/null
+++ b/src/lib/clipBounds.ts
@@ -0,0 +1,118 @@
+/**
+ * Clip-local bounding box. Used by the stage to frame a ClipInstance
+ * with a stable rectangle instead of letting the transformer chase
+ * whatever child happens to be visible at the current playhead. The
+ * rect covers the union of every layer's footprint across its
+ * animation so handles stay put while inner content moves, and clicks
+ * in the clip's footprint hit the instance even on empty frames.
+ */
+
+import type { Asset, Clip } from '@/types/scene'
+import { sampleLayer } from './interpolate'
+
+export interface Rect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** Rendered footprint of an asset in its own local coords, measured
+ *  from the asset origin (0,0). Text is hard to size statically — it
+ *  depends on font metrics — so we fall back to the asset's declared
+ *  width/height when present and a 40×40 placeholder otherwise. */
+function assetFootprint(asset: Asset): { w: number; h: number } {
+  if (asset.kind === 'rect' || asset.kind === 'image' || asset.kind === 'button') {
+    return { w: asset.width, h: asset.height }
+  }
+  if (asset.kind === 'circle') {
+    const d = Math.max(1, asset.radius * 2)
+    return { w: d, h: d }
+  }
+  if (asset.kind === 'text') {
+    const w = 'width' in asset && typeof asset.width === 'number' ? asset.width : asset.fontSize * 4
+    const h = asset.fontSize * 1.4
+    return { w, h }
+  }
+  if (asset.kind === 'polygon') {
+    if (!asset.points?.length) return { w: 40, h: 40 }
+    let minX = Infinity
+    let minY = Infinity
+    let maxX = -Infinity
+    let maxY = -Infinity
+    for (const p of asset.points) {
+      if (p.x < minX) minX = p.x
+      if (p.y < minY) minY = p.y
+      if (p.x > maxX) maxX = p.x
+      if (p.y > maxY) maxY = p.y
+    }
+    return { w: Math.max(1, maxX - minX), h: Math.max(1, maxY - minY) }
+  }
+  return { w: 40, h: 40 }
+}
+
+/** Axis-aligned union of every layer's visual footprint across every
+ *  keyframe time it touches. Rotation is handled by inflating each
+ *  sampled AABB to its enclosing circle — overshoots by up to
+ *  sqrt(2) but keeps the math trivial and the bbox never clips the
+ *  rotated content. Returns null when the clip has no layers we can
+ *  size; callers fall back to a small placeholder rect so the
+ *  transformer still has something to grab. */
+export function computeClipBounds(
+  clip: Clip,
+  assetsById: Map<string, Asset>,
+): Rect | null {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+  let any = false
+  for (const layer of clip.layers) {
+    if (!layer.visible) continue
+    const asset = assetsById.get(layer.assetId)
+    if (!asset) continue
+    const { w, h } = assetFootprint(asset)
+    const offX = layer.offsetX ?? w / 2
+    const offY = layer.offsetY ?? h / 2
+    const times = new Set<number>()
+    times.add(0)
+    for (const kf of layer.keyframes) times.add(kf.time)
+    for (const kf of layer.positionKeyframes ?? []) times.add(kf.time)
+    for (const kf of layer.rotationKeyframes ?? []) times.add(kf.time)
+    for (const t of times) {
+      const props = sampleLayer(layer, t)
+      const sx = Math.abs(props.scaleX ?? 1)
+      const sy = Math.abs(props.scaleY ?? 1)
+      const lx = -offX * sx
+      const rx = (w - offX) * sx
+      const ty = -offY * sy
+      const by = (h - offY) * sy
+      const x0 = Math.min(lx, rx)
+      const x1 = Math.max(lx, rx)
+      const y0 = Math.min(ty, by)
+      const y1 = Math.max(ty, by)
+      const bw = x1 - x0
+      const bh = y1 - y0
+      const r = Math.hypot(bw, bh) / 2
+      const cx = (props.x ?? 0) + (x0 + x1) / 2
+      const cy = (props.y ?? 0) + (y0 + y1) / 2
+      if (cx - r < minX) minX = cx - r
+      if (cy - r < minY) minY = cy - r
+      if (cx + r > maxX) maxX = cx + r
+      if (cy + r > maxY) maxY = cy + r
+      any = true
+    }
+  }
+  if (!any) return null
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+}
+
+/** Placeholder bounds used when the clip has no layers we could
+ *  measure. Small, centered on origin so the transformer has a visible
+ *  handle cluster to grab. */
+export const CLIP_FALLBACK_BOUNDS: Rect = {
+  x: -20,
+  y: -20,
+  width: 40,
+  height: 40,
+}
diff --git a/src/lib/render.ts b/src/lib/render.ts
index c2b25ac..4de9a36 100644
--- a/src/lib/render.ts
+++ b/src/lib/render.ts
@@ -399,6 +399,8 @@ export function drawSceneFrame(
     arr.push(ci)
     instancesByTrack.set(ci.clipTrackId, arr)
   }
+  const clipTrackById = new Map<string, NonNullable<typeof scene.clipTracks>[number]>()
+  for (const t of scene.clipTracks ?? []) clipTrackById.set(t.id, t)
   const clipById = new Map<string, NonNullable<typeof scene.clips>[number]>()
   for (const c of scene.clips ?? []) clipById.set(c.id, c)
   const groupById = new Map<string, NonNullable<typeof scene.groups>[number]>()
@@ -450,6 +452,11 @@ export function drawSceneFrame(
       }
       continue
     }
+    // Editor-only hide for an entire clip track — match the stage's
+    // stackItems so mask-preview and sidebar thumbnails agree with the
+    // Konva canvas. exportPlayer's runtime ignores this flag; frame-
+    // based exports honour it by going through this same path.
+    if (clipTrackById.get(id)?.editorHidden) continue
     const instances = instancesByTrack.get(id) ?? []
     if (instances.length) {
       for (const inst of instances) {
diff --git a/src/stores/scene.ts b/src/stores/scene.ts
index 30c4d76..91d3e93 100644
--- a/src/stores/scene.ts
+++ b/src/stores/scene.ts
@@ -1812,6 +1812,23 @@ export const useSceneStore = defineStore('scene', {
       if (hidden) layer.editorHidden = true
       else delete layer.editorHidden
     },
+    setClipTrackEditorHidden(trackId: string, hidden: boolean) {
+      const track = this.scene.clipTracks?.find((t) => t.id === trackId)
+      if (!track) return
+      if (hidden) track.editorHidden = true
+      else delete track.editorHidden
+      // Dropping the track out of the editor mustn't leave a stale
+      // selection pointing at one of its instances — the transformer
+      // would stay attached to a now-invisible ci-group.
+      if (hidden && this.selectedClipInstanceId) {
+        const stillSelected = this.scene.clipInstances?.find(
+          (ci) => ci.id === this.selectedClipInstanceId,
+        )
+        if (stillSelected && stillSelected.clipTrackId === trackId) {
+          this.selectedClipInstanceId = null
+        }
+      }
+    },
 
     // -------- Markers --------------------------------------------------
 
diff --git a/src/types/scene.ts b/src/types/scene.ts
index 4e951c3..6581e2a 100644
--- a/src/types/scene.ts
+++ b/src/types/scene.ts
@@ -218,6 +218,12 @@ export interface ClipTrack {
   color?: string | null
   colorOverridden?: boolean
   locked?: boolean
+  /** Editor-only hide, same semantics as `Layer.editorHidden`. When
+   *  true, in-editor render paths (Konva stage, sidebar thumbnails,
+   *  mask-preview overlay) skip every instance on this track. Exports
+   *  still render the instances unless the user opts into strip-hidden
+   *  on the export dialog. */
+  editorHidden?: boolean
 }
 
 export interface TrackGroup {
diff --git a/src/version.ts b/src/version.ts
index 61781a5..38ba1fc 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1,2 +1,2 @@
-export const APP_VERSION = '0.17.0'
+export const APP_VERSION = '0.18.0'
 export const APP_NAME = 'RUWIO'