0.5.6: show/hide locked tracks + group lock + crop/mask-preview split

- Timeline: new show/hide toggle next to snap; locked tracks (including
  layer, clip, and the new group lock) are filtered from the timeline
  when the toggle is off. Preference lives in localStorage and is
  shared across components via a module-level ref.
- Groups become lockable via the same inline lock toggle. A locked
  group propagates to its children: they behave as effectively locked
  in the timeline and on the stage. Collapse/expand still works on a
  locked group.
- Canvas: layers in locked+hidden tracks render as a 1px outline in
  the layer (or fill) color instead of their full fill, and are
  draggable:false / listening:false. Mask layers keep their dashed
  ghost styling; masks still apply in the preview overlay regardless
  of lock or show state.
- drawSceneFrame gains an optional `{ crop }` option; the mask-preview
  overlay passes the editor's crop toggle through, so the two controls
  are fully independent. Crop changes now also trigger a preview
  redraw via a watcher dep.
- Tests: new suites for show-locked persistence, group lock store
  action, crop option on drawSceneFrame (including mask+crop combos).
  Properties transparent-toggle tests now reset the section prefs
  localStorage so the Appearance section is guaranteed open when the
  panel mounts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/Timeline.vue

@@ -11,6 +11,8 @@ import {
   PhFolderPlus,
   PhLock,
   PhLockOpen,
+  PhEye,
+  PhEyeSlash,
   PhMagnet,
   PhMaskHappy,
   PhPauseCircle,
@@ -22,6 +24,7 @@ import { snapToCandidates } from '@/lib/timelineSnap'
 import { confirmDialog, promptDialog } from '@/components/ui'
 import { t } from '@/i18n'
 import { kfSelectionKey, useKfSelection, type KfSelectionKey } from '@/composables/useKfSelection'
+import { showLocked } from '@/composables/useShowLocked'
 import type {
   AnimatableProps,
   Clip,
@@ -62,6 +65,7 @@ interface TimelineGroupTrack {
   name: string
   collapsed: boolean
   color: string | null
+  locked: boolean
   orderIndex: number
   childCount: number
 }
@@ -187,6 +191,7 @@ type DisplayMode = 'seconds' | 'frames'
 const displayMode = ref<DisplayMode>('seconds')
 const snapEnabled = ref(true)
 
+
 const SNAP_PX = 8
 
 function allKeyframeTimes(ignoreKeyframeId?: string): number[] {
@@ -387,6 +392,27 @@ function emitLayerTrack(
   }
 }
 
+const lockedGroupChildIds = computed(() => {
+  const s = new Set<string>()
+  for (const g of store.scene.groups ?? []) {
+    if (g.locked) for (const cid of g.childIds) s.add(cid)
+  }
+  return s
+})
+
+function isTrackEffectivelyLocked(track: TimelineTrack): boolean {
+  if (track.type === 'layer') {
+    return !!track.layer.locked || lockedGroupChildIds.value.has(track.layerId)
+  }
+  if (track.type === 'clip') {
+    return (
+      !!clipTrackById.value.get(track.clipTrackId)?.locked ||
+      lockedGroupChildIds.value.has(track.clipTrackId)
+    )
+  }
+  return track.locked
+}
+
 const tracks = computed<TimelineTrack[]>(() => {
   const out: TimelineTrack[] = []
   if (store.activeClipId) {
@@ -417,6 +443,7 @@ const tracks = computed<TimelineTrack[]>(() => {
         name: grp.name,
         collapsed: !!grp.collapsed,
         color: grp.color ?? null,
+        locked: !!grp.locked,
         orderIndex,
         childCount: grp.childIds.length,
       })
@@ -443,7 +470,29 @@ const tracks = computed<TimelineTrack[]>(() => {
       }
     }
   })
-  return out
+  if (showLocked.value) return out
+  const lockedGroupChildIds = new Set<string>()
+  const lockedGroupIds = new Set<string>()
+  for (const g of store.scene.groups ?? []) {
+    if (g.locked) {
+      lockedGroupIds.add(g.id)
+      for (const cid of g.childIds) lockedGroupChildIds.add(cid)
+    }
+  }
+  return out.filter((tr) => {
+    if (tr.type === 'layer') {
+      if (tr.layer.locked) return false
+      if (lockedGroupChildIds.has(tr.layerId)) return false
+      return true
+    }
+    if (tr.type === 'clip') {
+      if (clipTrackById.value.get(tr.clipTrackId)?.locked) return false
+      if (lockedGroupChildIds.has(tr.clipTrackId)) return false
+      return true
+    }
+    // group: hide when locked
+    return !lockedGroupIds.has(tr.groupId)
+  })
 })
 
 function trackDndId(track: TimelineTrack): string {
@@ -1523,6 +1572,17 @@ onBeforeUnmount(() => {
             >
               <PhMagnet :size="12" :weight="snapEnabled ? 'fill' : 'regular'" />
             </button>
+            <button
+              class="snap-btn"
+              :class="{ active: !showLocked }"
+              :title="showLocked ? t('timeline.hideLocked') : t('timeline.showLocked')"
+              @click="showLocked = !showLocked"
+            >
+              <component
+                :is="showLocked ? PhEye : PhEyeSlash"
+                :size="12"
+              />
+            </button>
             <button
               v-if="!inClipEdit"
               class="snap-btn"
@@ -1582,19 +1642,19 @@ onBeforeUnmount(() => {
                 'drop-after': isDropAfter(track, tracks[idx + 1]),
                 dragging: track.isParent && dragTrackId === track.layerId,
                 colored: !!track.layer.color,
-                locked: !!track.layer.locked,
+                locked: isTrackEffectivelyLocked(track),
                 'in-group': track.inGroup,
               }"
               :style="trackColorStyle(track.layer.color)"
               @dragover="
-                track.isParent
+                track.isParent && !isTrackEffectivelyLocked(track)
                   ? (track.inGroup && track.parentGroupId !== undefined && track.groupChildIndex !== undefined
                       ? onGroupChildDragOver($event, track.parentGroupId, track.groupChildIndex)
                       : onTrackDragOver($event, track.orderIndex))
                   : null
               "
               @drop="
-                track.isParent
+                track.isParent && !isTrackEffectivelyLocked(track)
                   ? (track.inGroup ? onGroupChildDrop($event) : onTrackDrop($event))
                   : null
               "
@@ -1607,15 +1667,15 @@ onBeforeUnmount(() => {
                   parent: track.isParent,
                   sub: !track.isParent,
                 }"
-                :draggable="track.isParent && !track.layer.locked"
-                @click="!track.layer.locked ? store.selectLayer(track.layerId) : null"
+                :draggable="track.isParent && !isTrackEffectivelyLocked(track)"
+                @click="!isTrackEffectivelyLocked(track) ? store.selectLayer(track.layerId) : null"
                 @contextmenu="
-                  track.isParent && !track.layer.locked
+                  track.isParent && !isTrackEffectivelyLocked(track)
                     ? onTrackContextMenu($event, track.layerId)
                     : null
                 "
                 @dragstart="
-                  track.isParent && !track.layer.locked
+                  track.isParent && !isTrackEffectivelyLocked(track)
                     ? onTrackDragStart($event, track.layerId)
                     : null
                 "
@@ -1636,7 +1696,7 @@ onBeforeUnmount(() => {
                 <span v-if="!track.isParent" class="sub-indent">↳</span>
                 <span class="track-label">{{ track.label }}</span>
                 <button
-                  v-if="track.isParent"
+                  v-if="track.isParent && !lockedGroupChildIds.has(track.layerId)"
                   class="lock-btn"
                   :class="{ locked: track.layer.locked }"
                   :title="track.layer.locked ? t('timeline.unlock') : t('timeline.lock')"
@@ -1707,28 +1767,34 @@ onBeforeUnmount(() => {
                 'drop-after': isDropAfter(track, tracks[idx + 1]),
                 dragging: dragTrackId === track.clipTrackId,
                 colored: !!clipTrackById.get(track.clipTrackId)?.color,
-                locked: !!clipTrackById.get(track.clipTrackId)?.locked,
+                locked: isTrackEffectivelyLocked(track),
                 'in-group': track.inGroup,
               }"
               :style="trackColorStyle(clipTrackById.get(track.clipTrackId)?.color)"
               @dragover="
-                track.inGroup && track.parentGroupId !== undefined && track.groupChildIndex !== undefined
-                  ? onGroupChildDragOver($event, track.parentGroupId, track.groupChildIndex)
-                  : onTrackDragOver($event, track.orderIndex)
+                !isTrackEffectivelyLocked(track)
+                  ? (track.inGroup && track.parentGroupId !== undefined && track.groupChildIndex !== undefined
+                      ? onGroupChildDragOver($event, track.parentGroupId, track.groupChildIndex)
+                      : onTrackDragOver($event, track.orderIndex))
+                  : null
+              "
+              @drop="
+                !isTrackEffectivelyLocked(track)
+                  ? (track.inGroup ? onGroupChildDrop($event) : onTrackDrop($event))
+                  : null
               "
-              @drop="track.inGroup ? onGroupChildDrop($event) : onTrackDrop($event)"
               @dragleave="onTrackDragLeave"
             >
               <span
                 class="track-name clip-track-name"
-                :draggable="!clipTrackById.get(track.clipTrackId)?.locked"
+                :draggable="!isTrackEffectivelyLocked(track)"
                 @contextmenu="
-                  !clipTrackById.get(track.clipTrackId)?.locked
+                  !isTrackEffectivelyLocked(track)
                     ? onClipTrackContextMenu($event, track.clipTrackId)
                     : null
                 "
                 @dragstart="
-                  !clipTrackById.get(track.clipTrackId)?.locked
+                  !isTrackEffectivelyLocked(track)
                     ? onTrackDragStart($event, track.clipTrackId)
                     : null
                 "
@@ -1738,6 +1804,7 @@ onBeforeUnmount(() => {
                 <PhFilmStrip :size="11" class="name-badge" />
                 <span class="track-label">{{ track.name }}</span>
                 <button
+                  v-if="!lockedGroupChildIds.has(track.clipTrackId)"
                   class="lock-btn"
                   :class="{ locked: !!clipTrackById.get(track.clipTrackId)?.locked }"
                   :title="clipTrackById.get(track.clipTrackId)?.locked ? t('timeline.unlock') : t('timeline.lock')"
@@ -1831,19 +1898,20 @@ onBeforeUnmount(() => {
                 colored: !!track.color,
                 'drop-into': dropGroupId === track.groupId,
                 collapsed: track.collapsed,
+                locked: track.locked,
               }"
               :style="trackColorStyle(track.color)"
-              @dragover="onTrackDragOver($event, track.orderIndex)"
-              @drop="onTrackDrop($event)"
+              @dragover="!track.locked ? onTrackDragOver($event, track.orderIndex) : null"
+              @drop="!track.locked ? onTrackDrop($event) : null"
               @dragleave="onTrackDragLeave"
             >
               <span
                 class="track-name group-track-name"
-                draggable="true"
+                :draggable="!track.locked"
                 @click="toggleGroupCollapsed(track.groupId)"
-                @dblclick="renameGroupPrompt(track.groupId, track.name)"
-                @contextmenu="onGroupContextMenu($event, track.groupId)"
-                @dragstart="onTrackDragStart($event, track.groupId)"
+                @dblclick="!track.locked ? renameGroupPrompt(track.groupId, track.name) : null"
+                @contextmenu="!track.locked ? onGroupContextMenu($event, track.groupId) : null"
+                @dragstart="!track.locked ? onTrackDragStart($event, track.groupId) : null"
                 @dragend="onTrackDragEnd"
               >
                 <PhDotsSixVertical :size="12" class="drag-handle" />
@@ -1853,8 +1921,27 @@ onBeforeUnmount(() => {
                   class="group-caret"
                 />
                 <PhFolder :size="12" class="name-badge" />
-                {{ track.name }}
+                <span class="track-label">{{ track.name }}</span>
                 <span class="group-count">{{ t('timeline.groupChildCount', { n: track.childCount }) }}</span>
+                <button
+                  class="lock-btn"
+                  :class="{ locked: track.locked }"
+                  :title="track.locked ? t('timeline.unlock') : t('timeline.lock')"
+                  @click.stop="store.setTrackLocked(track.groupId, !track.locked)"
+                  @mousedown.stop
+                  @dragstart.prevent.stop
+                >
+                  <span class="lock-icon rest">
+                    <component :is="track.locked ? PhLock : PhLockOpen" :size="12" />
+                  </span>
+                  <span class="lock-icon alt">
+                    <component
+                      :is="track.locked ? PhLockOpen : PhLock"
+                      :size="12"
+                      :weight="track.locked ? 'fill' : 'regular'"
+                    />
+                  </span>
+                </button>
               </span>
               <div
                 class="track-lane group-lane"
@@ -2310,6 +2397,7 @@ onBeforeUnmount(() => {
 
 .track.locked {
   height: 15px;
+  background: color-mix(in srgb, #ff6b6b 8%, transparent);
 }
 
 .track.clip-track.locked {
@@ -2322,6 +2410,7 @@ onBeforeUnmount(() => {
 
 .track.locked .track-name {
   font-size: 10px;
+  background: color-mix(in srgb, #ff6b6b 8%, var(--panel));
 }
 
 .track.locked .track-lane {
@@ -2361,6 +2450,12 @@ onBeforeUnmount(() => {
   pointer-events: auto;
 }
 
+/* Locked groups stay collapsible — re-enable pointer events on the name */
+.track.group-track.locked .track-name {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
 .lock-btn {
   margin-left: auto;
   display: inline-flex;