Unify switch controls

src/components/AssetSidebar.vue

@@ -33,7 +33,7 @@ import {
   setClipDragSource,
 } from '@/composables/useClipDragSource'
 import type { Asset } from '@/types/scene'
-import { confirmDialog, promptDialog } from '@/components/ui'
+import { confirmDialog, promptDialog, ToggleSwitch } from '@/components/ui'
 import { loadSceneImages, renderButtonThumbnail, renderSvgThumbnail } from '@/lib/render'
 import { t } from '@/i18n'
 
@@ -624,21 +624,11 @@ function onAssetDragStart(e: DragEvent, asset: ImageOrSvgAsset) {
   >
     <div class="assets-header">
       <h3>Assets</h3>
-      <label
+      <ToggleSwitch
-        class="thumbs-switch"
+        v-model="showThumbs"
+        :label="t('sidebar.thumbsToggle')"
         v-tooltip="showThumbs ? t('sidebar.thumbnailsHide') : t('sidebar.thumbnailsShow')"
-      >
+      />
-        <span class="thumbs-switch-label">{{ t('sidebar.thumbsToggle') }}</span>
-        <input
-          type="checkbox"
-          class="thumbs-switch-input"
-          :checked="showThumbs"
-          @change="showThumbs = ($event.target as HTMLInputElement).checked"
-        />
-        <span class="thumbs-switch-track">
-          <span class="thumbs-switch-knob"></span>
-        </span>
-      </label>
     </div>
 
     <button class="upload-btn" @click="triggerUpload">
@@ -988,73 +978,6 @@ h4 {
   gap: 10px;
 }
 
-/* Compact slide switch labelled "Thumbs" — native checkbox stays hidden
- * for a11y (keyboard + screen readers), the visible track + knob is
- * driven purely by the `:checked` state. */
-.thumbs-switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  user-select: none;
-  font-size: 11px;
-  color: var(--text-dim);
-}
-
-.thumbs-switch-label {
-  font-weight: 500;
-  letter-spacing: 0.01em;
-}
-
-.thumbs-switch-input {
-  /* Keep focus behaviour via the native input; the visual sits next to it. */
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
-.thumbs-switch-track {
-  position: relative;
-  width: 26px;
-  height: 14px;
-  border-radius: 999px;
-  background: var(--border);
-  transition: background 140ms var(--ease);
-  flex-shrink: 0;
-}
-
-.thumbs-switch-knob {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--panel);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-  transition: left 140ms var(--ease), background 140ms var(--ease);
-}
-
-.thumbs-switch-input:checked + .thumbs-switch-track {
-  background: var(--accent);
-}
-
-.thumbs-switch-input:checked + .thumbs-switch-track .thumbs-switch-knob {
-  left: 14px;
-  background: #fff;
-}
-
-.thumbs-switch-input:focus-visible + .thumbs-switch-track {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-
-.thumbs-switch:hover .thumbs-switch-track {
-  filter: brightness(1.08);
-}
-
 /* Section rows: unified layout — [caret + title][action?][count]. The
  * count always sits at the far right so the right column is visually
  * stable regardless of whether a row has a create-action (+) beside it. */

src/components/CanvasStage.vue

@@ -789,15 +789,45 @@ const cameraFrameConfig = computed(() => {
     height: frame.height,
     fillEnabled: false,
     stroke: selected ? '#38bdf8' : '#0ea5e9',
-    strokeWidth: (selected ? 2.5 : 1.5) / zoom.value,
+    strokeWidth: (selected ? 1.4 : 1) / zoom.value,
     strokeScaleEnabled: false,
-    dash: [10 / zoom.value, 6 / zoom.value],
+    dash: [4 / zoom.value, 3 / zoom.value],
-    hitStrokeWidth: Math.max(10 / zoom.value, 8),
+    hitStrokeWidth: Math.max(8 / zoom.value, 6),
     listening: true,
     draggable: selected && !camera.locked,
   }
 })
 
+const cameraResizeDragStart = ref<CameraProps | null>(null)
+
+function cameraOutputAspect(): number {
+  const canvas = store.scene.canvas
+  const width = Number.isFinite(canvas.width) && canvas.width > 0 ? canvas.width : 1
+  const height = Number.isFinite(canvas.height) && canvas.height > 0 ? canvas.height : 1
+  return width / height
+}
+
+const cameraResizeHandleConfig = computed(() => {
+  const frame = cameraFrame.value
+  const camera = store.scene.camera
+  if (!frame || !camera || !store.selectedCamera || camera.locked) return null
+  const size = 10 / zoom.value
+  return {
+    id: 'camera-resize-handle',
+    name: 'camera-resize-handle',
+    x: frame.x + frame.width - size / 2,
+    y: frame.y + frame.height - size / 2,
+    width: size,
+    height: size,
+    fill: '#f8fafc',
+    stroke: '#38bdf8',
+    strokeWidth: 1 / zoom.value,
+    strokeScaleEnabled: false,
+    draggable: true,
+    listening: true,
+  }
+})
+
 function selectCameraFromStage(e?: Konva.KonvaEventObject<MouseEvent>) {
   if (e) e.cancelBubble = true
   store.selectCamera(true)
@@ -817,6 +847,47 @@ function onCameraDragEnd(e: Konva.KonvaEventObject<DragEvent>) {
   onCameraDragMove(e)
 }
 
+function onCameraResizeStart(e: Konva.KonvaEventObject<DragEvent | MouseEvent>) {
+  e.cancelBubble = true
+  if (store.scene.camera?.locked) return
+  store.selectCamera(true)
+  cameraResizeDragStart.value = cameraFrame.value ? { ...cameraFrame.value } : null
+}
+
+function onCameraResizeDrag(e: Konva.KonvaEventObject<DragEvent>) {
+  e.cancelBubble = true
+  const camera = store.scene.camera
+  const start = cameraResizeDragStart.value ?? cameraFrame.value
+  if (!camera || camera.locked || !start) return
+
+  const node = e.target
+  const handleSize = cameraResizeHandleConfig.value?.width ?? 10 / zoom.value
+  const aspect = cameraOutputAspect()
+  const widthFromPointer = Math.max(1, node.x() + handleSize / 2 - start.x)
+  const heightFromPointer = Math.max(1, node.y() + handleSize / 2 - start.y)
+  const widthDelta = Math.abs(widthFromPointer - start.width) / Math.max(1, start.width)
+  const heightDelta = Math.abs(heightFromPointer - start.height) / Math.max(1, start.height)
+  const width = Math.max(
+    1,
+    Math.round(widthDelta >= heightDelta ? widthFromPointer : heightFromPointer * aspect),
+  )
+  const height = Math.max(1, Math.round(width / aspect))
+
+  node.x(start.x + width - handleSize / 2)
+  node.y(start.y + height - handleSize / 2)
+  store.upsertCameraKeyframe(store.playhead, {
+    x: Math.round(start.x),
+    y: Math.round(start.y),
+    width,
+    height,
+  })
+}
+
+function onCameraResizeEnd(e: Konva.KonvaEventObject<DragEvent>) {
+  onCameraResizeDrag(e)
+  cameraResizeDragStart.value = null
+}
+
 function toggleCameraEnabled() {
   if (store.scene.camera?.enabled) {
     store.disableCamera()
@@ -4793,6 +4864,14 @@ function onResizeHandlePointerUp(e: PointerEvent) {
             @dragmove="onCameraDragMove"
             @dragend="onCameraDragEnd"
           />
+          <v-rect
+            v-if="cameraResizeHandleConfig"
+            :config="cameraResizeHandleConfig"
+            @mousedown="onCameraResizeStart"
+            @dragstart="onCameraResizeStart"
+            @dragmove="onCameraResizeDrag"
+            @dragend="onCameraResizeEnd"
+          />
           <v-rect
             v-for="h in canvasResizeHandles"
             :key="`canvas-resize-${h.edge}`"

src/components/DocumentSettings.vue

@@ -15,7 +15,7 @@ import { useTooltipPref } from '@/composables/useTooltipPref'
 import { useAssetThumbsPref } from '@/composables/useAssetThumbsPref'
 import { useShowWelcomeOnStart } from '@/composables/useShowWelcomeOnStart'
 import { showLocked } from '@/composables/useShowLocked'
-import { Modal } from '@/components/ui'
+import { Modal, ToggleSwitch } from '@/components/ui'
 import { setLocale, t, useI18n } from '@/i18n'
 import type { Locale } from '@/i18n'
 
@@ -245,9 +245,10 @@ function applyTheme(t: Theme) {
                 </div>
 
                 <label class="row-toggle">
-                  <span class="switch" :class="{ on: tooltipsEnabled }">
+                  <ToggleSwitch
-                    <input type="checkbox" v-model="tooltipsEnabled" />
+                    v-model="tooltipsEnabled"
-                  </span>
+                    :aria-label="t('settings.tooltipsLabel')"
+                  />
                   <div class="row-toggle-text">
                     <div class="row-toggle-label">{{ t('settings.tooltipsLabel') }}</div>
                     <div class="row-toggle-desc">{{ t('settings.tooltipsDesc') }}</div>
@@ -255,9 +256,10 @@ function applyTheme(t: Theme) {
                 </label>
 
                 <label class="row-toggle">
-                  <span class="switch" :class="{ on: showLocked }">
+                  <ToggleSwitch
-                    <input type="checkbox" v-model="showLocked" />
+                    v-model="showLocked"
-                  </span>
+                    :aria-label="t('settings.showLockedLabel')"
+                  />
                   <div class="row-toggle-text">
                     <div class="row-toggle-label">{{ t('settings.showLockedLabel') }}</div>
                     <div class="row-toggle-desc">{{ t('settings.showLockedDesc') }}</div>
@@ -265,9 +267,10 @@ function applyTheme(t: Theme) {
                 </label>
 
                 <label class="row-toggle">
-                  <span class="switch" :class="{ on: thumbsEnabled }">
+                  <ToggleSwitch
-                    <input type="checkbox" v-model="thumbsEnabled" />
+                    v-model="thumbsEnabled"
-                  </span>
+                    :aria-label="t('settings.assetThumbsLabel')"
+                  />
                   <div class="row-toggle-text">
                     <div class="row-toggle-label">{{ t('settings.assetThumbsLabel') }}</div>
                     <div class="row-toggle-desc">{{ t('settings.assetThumbsDesc') }}</div>
@@ -275,9 +278,10 @@ function applyTheme(t: Theme) {
                 </label>
 
                 <label class="row-toggle">
-                  <span class="switch" :class="{ on: welcomeOnStart }">
+                  <ToggleSwitch
-                    <input type="checkbox" v-model="welcomeOnStart" />
+                    v-model="welcomeOnStart"
-                  </span>
+                    :aria-label="t('settings.welcomeOnStartLabel')"
+                  />
                   <div class="row-toggle-text">
                     <div class="row-toggle-label">{{ t('settings.welcomeOnStartLabel') }}</div>
                     <div class="row-toggle-desc">{{ t('settings.welcomeOnStartDesc') }}</div>
@@ -550,10 +554,10 @@ input[type='number'] {
   letter-spacing: normal;
 }
 
-/* Switch + two-line label. Defensive resets defeat the scoped
+/* Switch row + two-line label. Defensive resets defeat the scoped
    blanket `label { flex-direction: column; text-transform: uppercase;
    font-size: 10px; flex: 1 1 0; }` that form-row labels in this file
-   depend on — without the reset that rule would stack the switch on
+   depend on — without the reset that rule would stack the control on
    top of the text and uppercase everything inside. */
 .row-toggle {
   display: flex;
@@ -599,47 +603,6 @@ input[type='number'] {
   text-transform: none;
 }
 
-.row-toggle .switch {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  flex-shrink: 0;
-  background: var(--border);
-  border-radius: 999px;
-  transition: background 140ms var(--ease);
-}
-
-.row-toggle .switch.on {
-  background: var(--accent);
-}
-
-.row-toggle .switch input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  cursor: inherit;
-}
-
-.row-toggle .switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  transition: transform 140ms var(--ease);
-}
-
-.row-toggle .switch.on::after {
-  transform: translateX(14px);
-}
-
 .clipart-row {
   display: flex;
   flex-direction: column;

src/components/ExportDialog.vue

@@ -14,7 +14,7 @@ import {
 import { useSceneStore } from '@/stores/scene'
 import { useProjectName } from '@/composables/useProjectName'
 import type { ButtonAsset, Layer } from '@/types/scene'
-import { Modal } from '@/components/ui'
+import { Modal, ToggleSwitch } from '@/components/ui'
 import { t } from '@/i18n'
 import { hasDesktopRender } from '@/lib/desktopRenderExport'
 
@@ -454,13 +454,12 @@ function onUpdate(v: boolean) {
         :class="{ disabled: !hasHiddenLayers }"
         v-tooltip="hasHiddenLayers ? undefined : t('export.skipHiddenNone')"
       >
-        <span class="switch" :class="{ on: skipHidden && hasHiddenLayers }">
+        <ToggleSwitch
-          <input
+          :model-value="skipHidden && hasHiddenLayers"
-            type="checkbox"
+          :aria-label="t('export.skipHidden')"
-            v-model="skipHidden"
+          :disabled="!hasHiddenLayers"
-            :disabled="!hasHiddenLayers"
+          @update:model-value="skipHidden = $event"
-          />
+        />
-        </span>
         <div class="export-toggle-text">
           <div class="export-toggle-label">{{ t('export.skipHidden') }}</div>
           <div class="export-toggle-desc">{{ t('export.skipHiddenDesc') }}</div>
@@ -784,50 +783,6 @@ function onUpdate(v: boolean) {
   line-height: 1.35;
 }
 
-/* iOS-style switch. The <input> is a transparent overlay that still
-   handles keyboard focus and click targeting; the visual is drawn by
-   the span + ::after pill. */
-.switch {
-  position: relative;
-  width: 32px;
-  height: 18px;
-  flex-shrink: 0;
-  background: var(--border);
-  border-radius: 999px;
-  transition: background 140ms var(--ease);
-}
-
-.switch.on {
-  background: var(--accent);
-}
-
-.switch input {
-  position: absolute;
-  inset: 0;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: inherit;
-}
-
-.switch::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 14px;
-  height: 14px;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  transition: transform 140ms var(--ease);
-}
-
-.switch.on::after {
-  transform: translateX(14px);
-}
-
 .target-size {
   display: flex;
   align-items: center;

src/components/FullscreenPreview.vue

@@ -29,7 +29,8 @@ let player: PlayerHandle | null = null
 const aspect = computed(
   () => {
     if (isCameraEnabled(store.scene)) {
-      const a = cameraAspect(store.scene, store.playhead)
+      const time = props.modelValue ? localTime.value : store.playhead
+      const a = cameraAspect(store.scene, time)
       return `${a} / 1`
     }
     return `${store.scene.canvas.width} / ${store.scene.canvas.height}`
@@ -56,6 +57,7 @@ async function startPreview() {
   const end = rangeOut.value
   const head = store.playhead
   const initialTime = head < start || head >= end ? start : head
+  localTime.value = initialTime
   mountAt(el, initialTime, true)
   requestBrowserFullscreen()
 }
@@ -66,6 +68,7 @@ async function startPreview() {
  *  player and rebuild at the same playhead so visual continuity stays
  *  intact across the switch. */
 function mountAt(el: HTMLElement, time: number, wasPlaying: boolean) {
+  localTime.value = time
   player = mountPlayer(el, store.project, {
     loop: true,
     onFrame(t: number, paused: boolean) {

src/components/PropertiesPanel.vue

@@ -23,6 +23,7 @@ import type { Action, AnimatableProps, CameraProps, Layer } from '@/types/scene'
 import RangeSlider from './RangeSlider.vue'
 import ActionEditor from './ActionEditor.vue'
 import FontPicker from './FontPicker.vue'
+import { ToggleSwitch } from '@/components/ui'
 import { t } from '@/i18n'
 import { useTimeFormat } from '@/composables/useTimeFormat'
 import { useEyeDropper } from '@/composables/useEyeDropper'
@@ -136,6 +137,16 @@ function setCameraProp(patch: Partial<CameraProps>) {
   store.upsertCameraKeyframe(store.playhead, patch)
 }
 
+function cameraOutputAspect(): number {
+  const width = Number.isFinite(store.scene.canvas.width) && store.scene.canvas.width > 0
+    ? store.scene.canvas.width
+    : 1
+  const height = Number.isFinite(store.scene.canvas.height) && store.scene.canvas.height > 0
+    ? store.scene.canvas.height
+    : 1
+  return width / height
+}
+
 const cameraX = computed<number>({
   get: () => Math.round(sampledCamera.value?.x ?? 0),
   set: (v) => setCameraProp({ x: v }),
@@ -146,11 +157,17 @@ const cameraY = computed<number>({
 })
 const cameraWidth = computed<number>({
   get: () => Math.round(sampledCamera.value?.width ?? store.scene.canvas.width),
-  set: (v) => setCameraProp({ width: Math.max(1, v) }),
+  set: (v) => {
+    const width = Math.max(1, v)
+    setCameraProp({ width, height: Math.max(1, Math.round(width / cameraOutputAspect())) })
+  },
 })
 const cameraHeight = computed<number>({
   get: () => Math.round(sampledCamera.value?.height ?? store.scene.canvas.height),
-  set: (v) => setCameraProp({ height: Math.max(1, v) }),
+  set: (v) => {
+    const height = Math.max(1, v)
+    setCameraProp({ width: Math.max(1, Math.round(height * cameraOutputAspect())), height })
+  },
 })
 
 function removeCameraKeyframeHere() {
@@ -669,33 +686,24 @@ function deleteSelection() {
         <div v-if="sectionOpen.transform" class="group-body">
           <div class="toggle-row">
             <span class="toggle-label">{{ t('properties.camera.enabled') }}</span>
-            <button
+            <ToggleSwitch
-              class="toggle-btn"
+              v-model="cameraEnabled"
-              :class="{ active: cameraEnabled }"
+              :aria-label="t('properties.camera.enabled')"
-              @click="cameraEnabled = !cameraEnabled"
+            />
-            >
-              {{ cameraEnabled ? 'On' : 'Off' }}
-            </button>
           </div>
           <div class="toggle-row">
             <span class="toggle-label">{{ t('properties.camera.overlay') }}</span>
-            <button
+            <ToggleSwitch
-              class="toggle-btn"
+              v-model="cameraOverlayVisible"
-              :class="{ active: cameraOverlayVisible }"
+              :aria-label="t('properties.camera.overlay')"
-              @click="cameraOverlayVisible = !cameraOverlayVisible"
+            />
-            >
-              {{ cameraOverlayVisible ? 'On' : 'Off' }}
-            </button>
           </div>
           <div class="toggle-row">
             <span class="toggle-label">{{ t('properties.camera.locked') }}</span>
-            <button
+            <ToggleSwitch
-              class="toggle-btn"
+              v-model="cameraLocked"
-              :class="{ active: cameraLocked }"
+              :aria-label="t('properties.camera.locked')"
-              @click="cameraLocked = !cameraLocked"
+            />
-            >
-              {{ cameraLocked ? 'On' : 'Off' }}
-            </button>
           </div>
           <div class="row">
             <label>X<input type="number" v-model.number="cameraX" :disabled="cameraLocked" /></label>

src/components/Timeline.vue

@@ -819,6 +819,11 @@ function onCameraLaneDblClick(e: MouseEvent) {
 
 function onCameraKeyframeClick(e: MouseEvent, time: number) {
   e.stopPropagation()
+  if (cameraKfDrag.value?.moved) {
+    cameraKfDrag.value = null
+    return
+  }
+  cameraKfDrag.value = null
   store.selectCamera(true)
   store.setPlayhead(time)
 }
@@ -830,6 +835,94 @@ function onCameraKeyframeDblClick(e: MouseEvent, keyframeId: string) {
   store.removeCameraKeyframe(keyframeId)
 }
 
+function onCameraKeyframeContextMenu(e: MouseEvent, keyframeId: string) {
+  e.preventDefault()
+  e.stopPropagation()
+  const camera = store.scene.camera
+  if (!camera || camera.locked) return
+  const kf = camera.keyframes.find((item) => item.id === keyframeId)
+  if (!kf) return
+  const sorted = camera.keyframes.slice().sort((a, b) => a.time - b.time)
+  menu.value = {
+    target: 'camera',
+    keyframeId: kf.id,
+    time: kf.time,
+    x: e.clientX,
+    y: e.clientY,
+    currentEasing: kf.easing,
+    isFirst: sorted[0]?.id === kf.id,
+    isLast: sorted[sorted.length - 1]?.id === kf.id,
+    isHeld: !!kf.hold,
+    isEnd: false,
+    hasEnd: false,
+  }
+  store.selectCamera(true)
+}
+
+interface CameraKfDrag {
+  keyframeId: string
+  lane: HTMLElement
+  pointerId: number
+  startX: number
+  moved: boolean
+  initialTime: number
+}
+
+const cameraKfDrag = ref<CameraKfDrag | null>(null)
+
+function onCameraKeyframePointerDown(e: PointerEvent, keyframeId: string) {
+  if (e.button !== 0) return
+  const camera = store.scene.camera
+  if (!camera || camera.locked) return
+  const kfEl = e.currentTarget as HTMLElement
+  const lane = kfEl.parentElement
+  const kf = camera.keyframes.find((item) => item.id === keyframeId)
+  if (!lane || !kf) return
+
+  e.stopPropagation()
+  kfEl.setPointerCapture(e.pointerId)
+  store.selectCamera(true)
+  cameraKfDrag.value = {
+    keyframeId,
+    lane,
+    pointerId: e.pointerId,
+    startX: e.clientX,
+    moved: false,
+    initialTime: kf.time,
+  }
+}
+
+function onCameraKeyframePointerMove(e: PointerEvent) {
+  const d = cameraKfDrag.value
+  if (!d || d.pointerId !== e.pointerId) return
+  if (!d.moved && Math.abs(e.clientX - d.startX) < 3) return
+  d.moved = true
+  const rect = d.lane.getBoundingClientRect()
+  if (rect.width <= 0) return
+  const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+  const rawNewTime = ratio * duration.value
+  const newTime = snapToCandidates(
+    rawNewTime,
+    [...allKeyframeTimesExcluding(new Set([d.keyframeId])), store.playhead],
+    {
+      enabled: snapEnabled.value,
+      pxPerSec: effectivePxPerSec.value,
+      pixelThreshold: SNAP_PX,
+      duration: duration.value,
+    },
+  )
+  store.setCameraKeyframeTime(d.keyframeId, newTime)
+  store.setPlayhead(newTime)
+}
+
+function onCameraKeyframePointerUp(e: PointerEvent) {
+  const d = cameraKfDrag.value
+  if (!d || d.pointerId !== e.pointerId) return
+  const el = e.currentTarget as HTMLElement
+  if (el.hasPointerCapture(e.pointerId)) el.releasePointerCapture(e.pointerId)
+  if (!d.moved) cameraKfDrag.value = null
+}
+
 function onKeyframeClick(e: MouseEvent, layerId: string, time: number) {
   e.stopPropagation()
   if (kfDrag.value?.moved) {
@@ -1306,6 +1399,9 @@ function allKeyframeTimesExcluding(ignoreIds: Set<string>): number[] {
     if (layer.rotationKeyframes)
       for (const k of layer.rotationKeyframes) if (!ignoreIds.has(k.id)) out.push(k.time)
   }
+  for (const k of store.scene.camera?.keyframes ?? []) {
+    if (!ignoreIds.has(k.id)) out.push(k.time)
+  }
   return out
 }
 
@@ -1418,6 +1514,14 @@ interface KfSegment {
   tail?: boolean
 }
 
+interface KfSegmentSource {
+  id: string
+  time: number
+  easing: Easing
+  hold?: boolean
+  kind?: 'normal' | 'end'
+}
+
 /** Render-time filter for the kf v-for. Hides end kfs that share a
  *  time slot with a normal kf — common after the end-kf migration
  *  on legacy projects, where stacking a square (end) on top of a
@@ -1435,7 +1539,7 @@ function displayKfs(kfs: Keyframe[]): Keyframe[] {
   })
 }
 
-function segmentsOf(kfs: Keyframe[], duration: number, buttonMode = false): KfSegment[] {
+function segmentsOf(kfs: KfSegmentSource[], duration: number, buttonMode = false): KfSegment[] {
   if (kfs.length === 0) return []
   // End kfs are visibility markers, not interpolation participants.
   // Pull them out for tail computation; everything else flows through
@@ -1571,7 +1675,8 @@ const EASING_OPTIONS: { value: Easing; label: string }[] = [
 ]
 
 interface KfMenuState {
-  layerId: string
+  target: 'layer' | 'camera'
+  layerId?: string
   keyframeId: string
   time: number
   x: number
@@ -1610,6 +1715,7 @@ function onKeyframeContextMenu(
     .sort((a, b) => a.time - b.time)
   const hasEnd = layer.keyframes.some((k) => k.kind === 'end')
   menu.value = {
+    target: 'layer',
     layerId,
     keyframeId: kf.id,
     time: kf.time,
@@ -1627,7 +1733,11 @@ function onKeyframeContextMenu(
 
 function toggleHold() {
   if (!menu.value) return
-  store.setKeyframeHold(menu.value.layerId, menu.value.keyframeId, !menu.value.isHeld)
+  if (menu.value.target === 'camera') {
+    store.setCameraKeyframeHold(menu.value.keyframeId, !menu.value.isHeld)
+  } else if (menu.value.layerId) {
+    store.setKeyframeHold(menu.value.layerId, menu.value.keyframeId, !menu.value.isHeld)
+  }
   menu.value = null
 }
 
@@ -1639,7 +1749,7 @@ function toggleHold() {
  *  we delete the existing one before promoting the new one. */
 function toggleEndKind() {
   const m = menu.value
-  if (!m) return
+  if (!m || m.target !== 'layer' || !m.layerId) return
   const layer = store.activeLayers.find((l) => l.id === m.layerId)
   if (!layer) return
   const kf = layer.keyframes.find((k) => k.id === m.keyframeId)
@@ -1663,21 +1773,30 @@ function toggleEndKind() {
 
 function applyEasing(easing: Easing) {
   if (!menu.value) return
-  store.setKeyframeEasing(menu.value.layerId, menu.value.keyframeId, easing)
+  if (menu.value.target === 'camera') {
+    store.setCameraKeyframeEasing(menu.value.keyframeId, easing)
+  } else if (menu.value.layerId) {
+    store.setKeyframeEasing(menu.value.layerId, menu.value.keyframeId, easing)
+  }
   menu.value = null
 }
 
 function deleteFromMenu() {
   if (!menu.value) return
-  store.removeKeyframe(menu.value.layerId, menu.value.keyframeId)
+  if (menu.value.target === 'camera') {
+    store.removeCameraKeyframe(menu.value.keyframeId)
+  } else if (menu.value.layerId) {
+    store.removeKeyframe(menu.value.layerId, menu.value.keyframeId)
+  }
   menu.value = null
 }
 
 function duplicateFromMenu() {
-  if (!menu.value) return
+  if (!menu.value || menu.value.target !== 'layer' || !menu.value.layerId) return
-  const newId = store.duplicateKeyframe(menu.value.layerId, menu.value.keyframeId)
+  const layerId = menu.value.layerId
+  const newId = store.duplicateKeyframe(layerId, menu.value.keyframeId)
   if (newId) {
-    const layer = store.activeLayers.find((l) => l.id === menu.value!.layerId)
+    const layer = store.activeLayers.find((l) => l.id === layerId)
     const all = layer
       ? [
           ...layer.keyframes,
@@ -3629,6 +3748,13 @@ onBeforeUnmount(() => {
               @dblclick="onCameraLaneDblClick"
             >
               <span class="playhead" :style="{ left: pxFromTime(store.playhead) + 'px' }" />
+              <span
+                v-for="seg in segmentsOf(store.scene.camera?.keyframes ?? [], duration)"
+                :key="`camera-${seg.id}`"
+                class="kf-seg"
+                :class="[seg.held ? 'held' : `easing-${seg.easing}`, { tail: seg.tail }]"
+                :style="segmentStyle(seg)"
+              />
               <span
                 v-for="kf in store.scene.camera?.keyframes ?? []"
                 :key="kf.id"
@@ -3636,8 +3762,13 @@ onBeforeUnmount(() => {
                 :class="{ hold: kf.hold }"
                 :style="{ left: pxFromTime(kf.time) + 'px' }"
                 v-tooltip="t('timeline.keyframeTooltip', { time: formatKfTime(kf.time) })"
+                @pointerdown="onCameraKeyframePointerDown($event, kf.id)"
+                @pointermove="onCameraKeyframePointerMove"
+                @pointerup="onCameraKeyframePointerUp"
+                @pointercancel="onCameraKeyframePointerUp"
                 @click="onCameraKeyframeClick($event, kf.time)"
                 @dblclick="onCameraKeyframeDblClick($event, kf.id)"
+                @contextmenu="onCameraKeyframeContextMenu($event, kf.id)"
               />
             </div>
           </div>
@@ -4368,6 +4499,7 @@ onBeforeUnmount(() => {
         <div class="kf-menu-divider"></div>
       </template>
       <button
+        v-if="menu.target === 'layer'"
         class="kf-menu-item"
         :class="{ active: menu.isEnd }"
         @click="toggleEndKind"
@@ -4381,8 +4513,8 @@ onBeforeUnmount(() => {
           class="kf-menu-trailing-check"
         />
       </button>
-      <div class="kf-menu-divider"></div>
+      <div v-if="menu.target === 'layer'" class="kf-menu-divider"></div>
-      <button v-if="!menu.isEnd" class="kf-menu-item" @click="duplicateFromMenu">
+      <button v-if="menu.target === 'layer' && !menu.isEnd" class="kf-menu-item" @click="duplicateFromMenu">
         <PhCopy :size="12" class="kf-menu-icon" />
         {{ t('timeline.duplicate') }}
       </button>

src/components/WelcomeDialog.vue

@@ -21,7 +21,7 @@ import {
   pickBackupFile,
   readBackupFile,
 } from '@/lib/backupFile'
-import { confirmDialog, Modal } from '@/components/ui'
+import { confirmDialog, Modal, ToggleSwitch } from '@/components/ui'
 import { showWelcomeOnStart } from '@/composables/useShowWelcomeOnStart'
 import { t } from '@/i18n'
 
@@ -366,9 +366,10 @@ watch(
     <div v-if="backupError" class="backup-error">{{ backupError }}</div>
     <template #footer>
       <label class="ftr-toggle" v-tooltip="t('welcome.showOnStartHelp')">
-        <span class="switch sm" :class="{ on: showWelcomeOnStart }">
+        <ToggleSwitch
-          <input type="checkbox" v-model="showWelcomeOnStart" />
+          v-model="showWelcomeOnStart"
-        </span>
+          :aria-label="t('welcome.showOnStart')"
+        />
         <span class="ftr-toggle-label">{{ t('welcome.showOnStart') }}</span>
       </label>
       <span class="ftr-sep"></span>
@@ -676,8 +677,6 @@ watch(
   border-radius: var(--radius-sm);
 }
 
-/* Compact footer toggle — same visual language as the other toggles
-   in the app but sized for the row. */
 .ftr-toggle {
   display: inline-flex;
   align-items: center;
@@ -691,44 +690,4 @@ watch(
 .ftr-toggle-label {
   white-space: nowrap;
 }
-
-.switch.sm {
-  position: relative;
-  display: inline-block;
-  width: 28px;
-  height: 16px;
-  background: var(--border);
-  border-radius: 999px;
-  flex-shrink: 0;
-  transition: background 140ms var(--ease);
-}
-
-.switch.sm input {
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  cursor: pointer;
-}
-
-.switch.sm::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 12px;
-  height: 12px;
-  background: #fff;
-  border-radius: 50%;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-  transition: transform 140ms var(--ease);
-}
-
-.switch.sm.on {
-  background: var(--accent);
-}
-
-.switch.sm.on::after {
-  transform: translateX(12px);
-}
 </style>

src/components/ui/ToggleSwitch.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+  label?: string
+  ariaLabel?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
+
+function onChange(event: Event) {
+  emit('update:modelValue', (event.target as HTMLInputElement).checked)
+}
+</script>
+
+<template>
+  <span class="ui-switch thumbs-switch" :class="{ disabled }">
+    <span v-if="$slots.default || label" class="ui-switch-label thumbs-switch-label">
+      <slot>{{ label }}</slot>
+    </span>
+    <input
+      type="checkbox"
+      class="ui-switch-input thumbs-switch-input"
+      :checked="modelValue"
+      :disabled="disabled"
+      :aria-label="ariaLabel || label"
+      @change="onChange"
+    />
+    <span class="ui-switch-track">
+      <span class="ui-switch-knob"></span>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.ui-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ui-switch.disabled {
+  cursor: not-allowed;
+}
+
+.ui-switch-label {
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.ui-switch-input {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.ui-switch-track {
+  position: relative;
+  z-index: 1;
+  width: 26px;
+  height: 14px;
+  border-radius: 999px;
+  background: var(--border);
+  transition: background 140ms var(--ease);
+  flex-shrink: 0;
+}
+
+.ui-switch-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--panel);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  transition: left 140ms var(--ease), background 140ms var(--ease);
+}
+
+.ui-switch-input:checked + .ui-switch-track {
+  background: var(--accent);
+}
+
+.ui-switch-input:checked + .ui-switch-track .ui-switch-knob {
+  left: 14px;
+  background: #fff;
+}
+
+.ui-switch-input:focus-visible + .ui-switch-track {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.ui-switch:hover:not(.disabled) .ui-switch-track {
+  filter: brightness(1.08);
+}
+</style>

src/components/ui/index.ts

@@ -2,5 +2,6 @@ export { default as DialogsHost } from './DialogsHost.vue'
 export { default as IconButton } from './IconButton.vue'
 export { default as Modal } from './Modal.vue'
 export { default as Toast } from './Toast.vue'
+export { default as ToggleSwitch } from './ToggleSwitch.vue'
 export { confirmDialog, dialogState, promptDialog } from './dialogs'
 export type { ConfirmOptions, PromptOptions } from './dialogs'

src/devtools/tests.ts

@@ -10199,6 +10199,334 @@ export function registerAllTests(): void {
     })
   })
 
+  suite('ui — camera framing', () => {
+    function resetPropertySectionPrefs() {
+      try {
+        localStorage.removeItem('animatr:propSections')
+      } catch {
+        /* noop */
+      }
+    }
+
+    function stubLaneRect(lane: HTMLElement, width = 1000): void {
+      const fakeRect = {
+        left: 0,
+        top: 0,
+        width,
+        height: 20,
+        right: width,
+        bottom: 20,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      } as DOMRect
+      ;(lane as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect = () =>
+        fakeRect
+    }
+
+    async function mountCameraCanvasWithKonva() {
+      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 getCameraKonvaStage() {
+      const Konva = (await import('konva')).default
+      return Konva.stages[Konva.stages.length - 1]
+    }
+
+    test('stage camera button enables camera without resizing the editor stage', async () => {
+      const s = makeFreshStore()
+      s.scene.canvas.width = 640
+      s.scene.canvas.height = 360
+      const handle = mountComponent(CanvasStage, {})
+      try {
+        await nextTick()
+        const dims = handle.host.querySelector('.dims') as HTMLElement
+        const btn = handle.host.querySelector('.zoom-controls .camera-btn') as HTMLButtonElement
+        expect(dims).toBeTruthy()
+        expect(btn).toBeTruthy()
+        expect(dims.textContent?.trim()).toBe('640 × 360')
+        expect(s.scene.camera).toBe(undefined)
+
+        btn.click()
+        await nextTick()
+        expect(s.scene.camera?.enabled).toBe(true)
+        expect(s.selectedCamera).toBe(true)
+        expect(btn.classList.contains('active')).toBe(true)
+        expect(dims.textContent?.trim()).toBe('640 × 360')
+        expect(s.scene.canvas.width).toBe(640)
+        expect(s.scene.canvas.height).toBe(360)
+
+        btn.click()
+        await nextTick()
+        expect(s.scene.camera?.enabled).toBe(false)
+        expect(dims.textContent?.trim()).toBe('640 × 360')
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('properties panel edits the selected camera frame, not scene canvas size', async () => {
+      resetPropertySectionPrefs()
+      const s = makeFreshStore()
+      s.scene.canvas.width = 800
+      s.scene.canvas.height = 450
+      s.enableCamera()
+      s.selectCamera(true)
+      const handle = mountComponent(PropertiesPanel, {})
+      try {
+        await nextTick()
+        const banner = handle.host.querySelector('.multi-banner') as HTMLElement
+        expect(banner.textContent).toContain(i18nT('properties.camera.banner'))
+        const inputs = handle.host.querySelectorAll<HTMLInputElement>(
+          '.prop-group input[type="number"]',
+        )
+        expect(inputs.length).toBe(4)
+        const [xInput, yInput, widthInput, heightInput] = Array.from(inputs)
+        expect(Number(widthInput.value)).toBe(800)
+        expect(Number(heightInput.value)).toBe(450)
+
+        xInput.value = '24'
+        xInput.dispatchEvent(new Event('input', { bubbles: true }))
+        widthInput.value = '320'
+        widthInput.dispatchEvent(new Event('input', { bubbles: true }))
+        await nextTick()
+
+        expect(s.scene.camera?.keyframes.length).toBe(1)
+        expect(s.scene.camera?.keyframes[0].props.x).toBe(24)
+        expect(s.scene.camera?.keyframes[0].props.width).toBe(320)
+        expect(s.scene.camera?.keyframes[0].props.height).toBe(180)
+        expect(s.scene.canvas.width).toBe(800)
+        expect(s.scene.canvas.height).toBe(450)
+        void yInput
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('stage camera frame has one lower-right aspect resize handle', async () => {
+      const s = makeFreshStore()
+      s.scene.canvas.width = 800
+      s.scene.canvas.height = 450
+      s.editor.canvasZoom = 1
+      s.enableCamera()
+      s.selectCamera(true)
+      const handle = await mountCameraCanvasWithKonva()
+      try {
+        await nextTick()
+        await tick(60)
+        const stage = await getCameraKonvaStage() as unknown as {
+          find: (sel: string) => unknown[]
+          findOne: (sel: string) => unknown
+        }
+        const frame = stage.findOne('#camera-frame') as {
+          strokeWidth: () => number
+          dash: () => number[]
+        }
+        expect(frame).toBeTruthy()
+        expect(frame.strokeWidth()).toBeLessThan(2.5)
+        const dash = frame.dash()
+        expect(dash.length).toBe(2)
+        expect(dash[0]).toBeLessThan(10)
+        expect(dash[0] / dash[1]).toBeCloseTo(4 / 3, 4)
+
+        const handles = stage.find('.camera-resize-handle') as Array<{
+          x: (v?: number) => number
+          y: (v?: number) => number
+          width: () => number
+          height: () => number
+          fire: (type: string, evt: unknown, bubble: boolean) => void
+        }>
+        expect(handles.length).toBe(1)
+        const grip = handles[0]
+        const half = grip.width() / 2
+        expect(grip.height()).toBe(grip.width())
+
+        grip.fire('dragstart', { target: grip, type: 'dragstart' }, true)
+        grip.x(400 - half)
+        grip.y(225 - half)
+        grip.fire('dragmove', { target: grip, type: 'dragmove' }, true)
+        await nextTick()
+
+        const kf = s.scene.camera?.keyframes[0]
+        expect(s.scene.camera?.keyframes.length).toBe(1)
+        expect(kf?.props.x).toBe(0)
+        expect(kf?.props.y).toBe(0)
+        expect(kf?.props.width).toBe(400)
+        expect(kf?.props.height).toBe(225)
+        expect(s.scene.canvas.width).toBe(800)
+        expect(s.scene.canvas.height).toBe(450)
+      } finally {
+        handle.unmount()
+      }
+    })
+
+    test('timeline camera row selects, hides, locks, and adds camera keyframes', async () => {
+      const s = makeFreshStore()
+      s.setDuration(10)
+      s.enableCamera()
+      s.selectCamera(false)
+      const handle = mountComponent(Timeline, {})
+      try {
+        await nextTick()
+        const trackName = handle.host.querySelector('.camera-track .track-name') as HTMLElement
+        const eye = handle.host.querySelector('.camera-track .eye-btn') as HTMLButtonElement
+        const lock = handle.host.querySelector('.camera-track .lock-btn') as HTMLButtonElement
+        const lane = handle.host.querySelector('.camera-track .camera-lane') as HTMLElement
+        expect(trackName).toBeTruthy()
+        expect(eye).toBeTruthy()
+        expect(lock).toBeTruthy()
+        expect(lane).toBeTruthy()
+
+        trackName.click()
+        await nextTick()
+        expect(s.selectedCamera).toBe(true)
+
+        eye.click()
+        await nextTick()
+        expect(s.scene.camera?.overlayVisible).toBe(false)
+        expect(eye.classList.contains('hidden')).toBe(true)
+
+        lock.click()
+        await nextTick()
+        expect(s.scene.camera?.locked).toBe(true)
+        expect(lock.classList.contains('locked')).toBe(true)
+
+        stubLaneRect(lane)
+        lane.dispatchEvent(
+          new MouseEvent('dblclick', { bubbles: true, cancelable: true, clientX: 500 }),
+        )
+        await nextTick()
+        expect(s.scene.camera?.keyframes.length).toBe(0)
+
+        lock.click()
+        await nextTick()
+        lane.dispatchEvent(
+          new MouseEvent('dblclick', { bubbles: true, cancelable: true, clientX: 500 }),
+        )
+        await nextTick()
+        expect(s.scene.camera?.keyframes.length).toBe(1)
+        expect(Math.abs((s.scene.camera?.keyframes[0].time ?? 0) - 5) < 0.1).toBe(true)
+        expect(Math.abs(s.playhead - 5) < 0.1).toBe(true)
+
+        await nextTick()
+        const cameraKf = handle.host.querySelector('.camera-track .camera-kf') as HTMLElement
+        expect(cameraKf).toBeTruthy()
+        const captured = new Set<number>()
+        ;(cameraKf as unknown as { setPointerCapture: (id: number) => void }).setPointerCapture = (id) => {
+          captured.add(id)
+        }
+        ;(cameraKf as unknown as { releasePointerCapture: (id: number) => void }).releasePointerCapture = (id) => {
+          captured.delete(id)
+        }
+        ;(cameraKf as unknown as { hasPointerCapture: (id: number) => boolean }).hasPointerCapture = (id) =>
+          captured.has(id)
+
+        cameraKf.dispatchEvent(
+          new PointerEvent('pointerdown', {
+            bubbles: true,
+            cancelable: true,
+            button: 0,
+            pointerId: 1,
+            clientX: 500,
+          }),
+        )
+        cameraKf.dispatchEvent(
+          new PointerEvent('pointermove', {
+            bubbles: true,
+            cancelable: true,
+            pointerId: 1,
+            clientX: 700,
+          }),
+        )
+        cameraKf.dispatchEvent(
+          new PointerEvent('pointerup', {
+            bubbles: true,
+            cancelable: true,
+            pointerId: 1,
+            clientX: 700,
+          }),
+        )
+        cameraKf.click()
+        await nextTick()
+
+        expect(s.scene.camera?.keyframes.length).toBe(1)
+        expect(Math.abs((s.scene.camera?.keyframes[0].time ?? 0) - 7) < 0.1).toBe(true)
+        expect(Math.abs(s.playhead - 7) < 0.1).toBe(true)
+
+        lane.dispatchEvent(
+          new MouseEvent('dblclick', { bubbles: true, cancelable: true, clientX: 900 }),
+        )
+        await nextTick()
+        expect(s.scene.camera?.keyframes.length).toBe(2)
+        const secondCameraKf = s.scene.camera?.keyframes.find((kf) => Math.abs(kf.time - 9) < 0.1)
+        expect(secondCameraKf).toBeTruthy()
+
+        const cameraKfs = Array.from(
+          handle.host.querySelectorAll<HTMLElement>('.camera-track .camera-kf'),
+        )
+        const secondKfEl = cameraKfs[cameraKfs.length - 1]
+        secondKfEl.dispatchEvent(
+          new MouseEvent('contextmenu', {
+            bubbles: true,
+            cancelable: true,
+            clientX: 320,
+            clientY: 180,
+          }),
+        )
+        await nextTick()
+        let menu = handle.host.querySelector('.kf-menu') as HTMLElement
+        expect(menu).toBeTruthy()
+        const easeIn = Array.from(menu.querySelectorAll<HTMLButtonElement>('.kf-menu-item')).find(
+          (button) => button.textContent?.includes(i18nT('timeline.easingEaseIn')),
+        )
+        expect(easeIn).toBeTruthy()
+        expect(easeIn?.disabled).toBe(false)
+        easeIn!.click()
+        await nextTick()
+        expect(secondCameraKf?.easing).toBe('easeIn')
+        expect(handle.host.querySelector('.camera-track .kf-seg.easing-easeIn')).toBeTruthy()
+
+        secondKfEl.dispatchEvent(
+          new MouseEvent('contextmenu', {
+            bubbles: true,
+            cancelable: true,
+            clientX: 320,
+            clientY: 180,
+          }),
+        )
+        await nextTick()
+        menu = handle.host.querySelector('.kf-menu') as HTMLElement
+        const deleteButton = Array.from(menu.querySelectorAll<HTMLButtonElement>('.kf-menu-item')).find(
+          (button) => button.textContent?.includes(i18nT('timeline.delete')),
+        )
+        expect(deleteButton).toBeTruthy()
+        deleteButton!.click()
+        await nextTick()
+        expect(s.scene.camera?.keyframes.length).toBe(1)
+        expect(s.scene.camera?.keyframes.some((kf) => kf.id === secondCameraKf?.id)).toBe(false)
+      } finally {
+        handle.unmount()
+      }
+    })
+  })
+
   suite('ui — CanvasStage centre crosshair (Konva)', () => {
     // Verify the lines actually render at the correct coordinates in
     // Konva when the toggle is on. Requires a proper VueKonva mount.