From 1d84c34c155d705461e1424d83576729b2c293f5 Mon Sep 17 00:00:00 2001
From: th <th@skilleven.de>
Date: Tue, 21 Apr 2026 23:57:35 +0200
Subject: [PATCH] 0.8.3: custom tooltips, editor-hide, pack script, settings
 reshuffle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tooltips
- New v-tooltip directive + TooltipHost floating panel replace the
  native title attribute across 95+ sites (topbar, timeline, sidebar,
  properties, stage overlays, fullscreen preview, export dialog,
  clipart drawer, modals). Styled dark card with a configurable
  label + optional help line for inline documentation; screen
  readers still get an aria-label when the panel is disabled.
- Settings → Interface toggle (`ruwio:tooltipsEnabled`) hides the
  visual panel for users who know the app. IconButton now routes
  its title prop through v-tooltip so every existing call site is
  tooltip-aware without churn.

Editor-hide + export filter
- New `Layer.editorHidden` flag, eye toggle per layer row, skipped
  by the Konva stage and the mask-preview canvas path but honoured
  by exports and fullscreen preview (runtime untouched).
- Export dialog gets a "Skip hidden tracks" switch that strips
  editor-hidden layers from every format (scene JS, runtime,
  example HTML, MP4, WebM) on opt-in. Disabled when the scene has
  no hidden layers.

Button editor
- `+` buttons appear on empty state slots in button-timeline rows
  and duplicate the nearest keyframe (prev by preference, next
  otherwise) onto that slot. New `duplicateKeyframeAt` store
  action carries props, easing, hold, and bezier handles across.

Stage / interaction
- Plain left-click on the empty content view pans the viewport,
  but only when the pointer isn't over a Konva shape — transformer
  handles, vertex dots, and selection boxes that extend past the
  canvas edge keep their drag.

Settings reshuffle
- Timeline tab merged into Document (Duration + FPS sit under a
  new "Timing" sub-heading). New Interface tab gathers three
  global prefs: Show tooltips, Show locked tracks, Asset
  thumbnails — driven by shared composables so the existing
  toolbar toggles stay in sync. Interface-tab CSS defensively
  resets the scoped label flex-column + uppercase rule that was
  making the toggle row look like an accident.

Project identity + UX polish
- Favicon wired up (moved to public/favicon.ico, linked from
  index.html); scripts/pack.sh packs the minimum Vue project
  (src, index.html, configs, public) into a tarball with the
  right version in the filename, and `npm run pack` drives it.
- About dialog now credits Torsten Hoeltge.

Test infra
- Progress bar turns red mid-run on the first failure: runAll
  gets an onResult callback that TestOverlay uses to push each
  result into the reactive array incrementally.
- mountComponent in the test harness registers v-tooltip on the
  isolated app instance so IconButton's aria-label contract
  actually fires under test.

Regression tests
- duplicateKeyframeAt: copy fidelity (props, easing, hold),
  collision refusal, unknown-id guards, separated-track targeting.
- Shared composables: useTooltipPref and useAssetThumbsPref both
  return the same ref across calls and persist to localStorage.
- Tooltip contract: IconButton ships `aria-label` (not title);
  live-DOM smoke tests match on aria-label selectors now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .gitignore                            |   1 +
 index.html                            |   1 +
 package.json                          |   5 +-
 public/favicon.ico                    | Bin 0 -> 34642 bytes
 scripts/pack.sh                       |  40 ++++++
 src/App.vue                           |  30 +++--
 src/components/AboutDialog.vue        |   9 ++
 src/components/ActionEditor.vue       |   6 +-
 src/components/AssetSidebar.vue       |  50 ++++----
 src/components/CanvasStage.vue        |  54 +++++---
 src/components/ClipartDrawer.vue      |   6 +-
 src/components/DocumentSettings.vue   | 151 ++++++++++++++++++++--
 src/components/ExportDialog.vue       | 136 +++++++++++++++++++-
 src/components/FullscreenPreview.vue  |   6 +-
 src/components/PropertiesPanel.vue    |  14 +--
 src/components/Timeline.vue           | 167 +++++++++++++++++++++----
 src/components/TooltipHost.vue        | 132 ++++++++++++++++++++
 src/components/WelcomeDialog.vue      |   2 +-
 src/components/ui/IconButton.vue      |  14 ++-
 src/components/ui/Modal.vue           |   2 +-
 src/composables/useAssetThumbsPref.ts |  28 +++++
 src/composables/useTooltipPref.ts     |  25 ++++
 src/devtools/TestOverlay.vue          |  14 ++-
 src/devtools/testRunner.ts            |  16 ++-
 src/devtools/tests.ts                 | 122 +++++++++++++++++-
 src/directives/tooltip.ts             | 173 ++++++++++++++++++++++++++
 src/i18n/messages.ts                  |  27 +++-
 src/lib/render.ts                     |   6 +
 src/main.ts                           |   2 +
 src/stores/scene.ts                   |  37 ++++++
 src/types/scene.ts                    |   9 ++
 src/version.ts                        |   2 +-
 todo                                  |  26 ++--
 33 files changed, 1185 insertions(+), 128 deletions(-)
 create mode 100644 public/favicon.ico
 create mode 100755 scripts/pack.sh
 create mode 100644 src/components/TooltipHost.vue
 create mode 100644 src/composables/useAssetThumbsPref.ts
 create mode 100644 src/composables/useTooltipPref.ts
 create mode 100644 src/directives/tooltip.ts

diff --git a/.gitignore b/.gitignore
index acd4d89..0593bc3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 dist
 dist-ssr
+dist-archive
 *.local
 .vite
 
diff --git a/index.html b/index.html
index 686d998..66c89ee 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RUWIO</title>
   </head>
diff --git a/package.json b/package.json
index 5d32ba0..b09b768 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "animatr",
   "private": true,
-  "version": "0.8.2",
+  "version": "0.8.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit"
+    "type-check": "vue-tsc --noEmit",
+    "pack": "bash scripts/pack.sh"
   },
   "dependencies": {
     "@phosphor-icons/vue": "^2.2.1",
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..97d4cbffb2136cbcbdd37a13ca42708e0a045b5d
GIT binary patch
literal 34642
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

literal 0
HcmV?d00001

diff --git a/scripts/pack.sh b/scripts/pack.sh
new file mode 100755
index 0000000..b7cff2c
--- /dev/null
+++ b/scripts/pack.sh
@@ -0,0 +1,40 @@
+#!/usr/bin/env bash
+# Pack everything needed to install + run the Vue frontend into a
+# single tarball: sources, entry HTML, Vite/TS config, and the lock
+# file. Recipient runs:
+#
+#     tar -xzf ruwio-<version>.tar.gz
+#     cd ruwio-<version>
+#     npm install
+#     npm run dev        # or: npm run build
+#
+# Deliberately excluded: node_modules, dist, the render server,
+# docker-compose, logo working files, personal notes, screenshots,
+# .claude/, .git/.
+set -euo pipefail
+
+cd "$(dirname "$0")/.."
+
+VERSION=$(node -p "require('./package.json').version")
+NAME="ruwio-${VERSION}"
+OUT_DIR="dist-archive"
+ARCHIVE="${OUT_DIR}/${NAME}.tar.gz"
+
+mkdir -p "$OUT_DIR"
+rm -f "$ARCHIVE"
+
+# Explicit allowlist — everything else stays out. If you add a new
+# top-level file the Vue app depends on (e.g. a separate env file or
+# a PostCSS config), extend this list.
+tar --transform "s,^,${NAME}/," -czf "$ARCHIVE" \
+  index.html \
+  package.json \
+  package-lock.json \
+  tsconfig.json \
+  vite.config.ts \
+  .gitignore \
+  public \
+  src
+
+echo "Created $ARCHIVE"
+ls -lh "$ARCHIVE"
diff --git a/src/App.vue b/src/App.vue
index ca7509b..e594168 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,6 +26,7 @@ import ExportDialog from './components/ExportDialog.vue'
 import FullscreenPreview from './components/FullscreenPreview.vue'
 import PropertiesPanel from './components/PropertiesPanel.vue'
 import Timeline from './components/Timeline.vue'
+import TooltipHost from './components/TooltipHost.vue'
 import WelcomeDialog from './components/WelcomeDialog.vue'
 import TestOverlay from './devtools/TestOverlay.vue'
 import ruwioLogo from './assets/logo.png'
@@ -418,13 +419,16 @@ onBeforeUnmount(() => {
     <div class="app" :style="appStyle">
     <header class="topbar">
       <div class="brand-area">
-        <button class="brand" :title="t('about.openTooltip')" @click="aboutOpen = true">
+        <button class="brand" v-tooltip="t('about.openTooltip')" @click="aboutOpen = true">
           <img :src="ruwioLogo" alt="RUWIO" class="brand-logo" />
         </button>
         <button
           class="project-name-btn"
           :class="{ 'is-untitled': !currentProjectName }"
-          :title="t('app.renameProject')"
+          v-tooltip="{
+            label: t('app.renameProject'),
+            help: t('app.renameProjectHelp'),
+          }"
           @click="renameProject"
         >
           <span class="project-name-label">
@@ -476,22 +480,29 @@ onBeforeUnmount(() => {
         <span class="time">{{ store.playhead.toFixed(2) }}s / {{ store.scene.duration }}s</span>
       </div>
       <div class="topbar-right">
-        <button class="icon-btn" :title="t('app.recentProjects')" @click="welcomeOpen = true">
+        <button class="icon-btn" v-tooltip="t('app.recentProjects')" @click="welcomeOpen = true">
           <PhFolderOpen :size="16" />
         </button>
         <button
           class="icon-btn save-btn"
           :class="{ dirty: isDirty }"
-          :title="isDirty ? t('app.saveProjectDirty') : t('app.saveProject')"
+          v-tooltip="{
+            label: isDirty ? t('app.saveProjectDirty') : t('app.saveProject'),
+            help: isDirty ? t('app.saveProjectDirtyHelp') : undefined,
+          }"
           @click="saveProject"
         >
           <PhFloppyDisk :size="16" />
           <span v-if="isDirty" class="dirty-dot" aria-hidden="true"></span>
         </button>
-        <button class="icon-btn" :title="t('app.documentSettings')" @click="settingsOpen = true">
+        <button class="icon-btn" v-tooltip="t('app.documentSettings')" @click="settingsOpen = true">
           <PhGearSix :size="16" />
         </button>
-        <button class="export-btn" :title="t('app.export')" @click="exportOpen = true">
+        <button
+          class="export-btn"
+          v-tooltip="{ label: t('app.export'), help: t('app.exportHelp') }"
+          @click="exportOpen = true"
+        >
           <PhExport :size="14" weight="bold" />
           {{ t('app.export') }}
         </button>
@@ -504,7 +515,7 @@ onBeforeUnmount(() => {
           <PhArrowLeft :size="12" weight="bold" />
           {{ t('app.mainTimeline') }}
         </button>
-        <span class="scope-current" :title="store.activeClip?.name ?? ''">
+        <span class="scope-current" v-tooltip="store.activeClip?.name ?? ''">
           <PhFilmStrip :size="12" />
           {{ store.activeClip?.name ?? '' }}
         </span>
@@ -514,7 +525,7 @@ onBeforeUnmount(() => {
           <PhArrowLeft :size="12" weight="bold" />
           {{ t('app.mainTimeline') }}
         </button>
-        <span class="scope-current" :title="store.activeButtonAsset?.name ?? ''">
+        <span class="scope-current" v-tooltip="store.activeButtonAsset?.name ?? ''">
           <PhCursorClick :size="12" />
           {{ store.activeButtonAsset?.name ?? '' }}
         </span>
@@ -526,7 +537,7 @@ onBeforeUnmount(() => {
       <div
         class="tl-resize"
         :class="{ resizing }"
-        :title="t('app.dragResize')"
+        v-tooltip="t('app.dragResize')"
         @pointerdown="onTimelineResizeStart"
         @pointermove="onTimelineResizeMove"
         @pointerup="onTimelineResizeEnd"
@@ -552,6 +563,7 @@ onBeforeUnmount(() => {
     </Toast>
     <Toast :visible="!!savedToast" variant="info" :message="savedToast ?? ''" />
     </div>
+    <TooltipHost />
   </div>
 </template>
 
diff --git a/src/components/AboutDialog.vue b/src/components/AboutDialog.vue
index e94452f..7d5ae2e 100644
--- a/src/components/AboutDialog.vue
+++ b/src/components/AboutDialog.vue
@@ -46,6 +46,8 @@ const shortcuts: Shortcut[] = [
           </li>
         </ul>
       </section>
+
+      <p class="credit">{{ t('about.credit') }}</p>
     </div>
   </Modal>
 </template>
@@ -128,4 +130,11 @@ kbd {
   color: var(--text-dim-strong);
 }
 
+.credit {
+  margin: 6px 0 0;
+  font-size: 11px;
+  text-align: center;
+  color: var(--text-dim);
+}
+
 </style>
diff --git a/src/components/ActionEditor.vue b/src/components/ActionEditor.vue
index 8c71b4e..4542115 100644
--- a/src/components/ActionEditor.vue
+++ b/src/components/ActionEditor.vue
@@ -106,13 +106,13 @@ function onTypeChange(index: number, newType: Action['type']) {
               {{ actionTypeLabel(type) }}
             </option>
           </select>
-          <button class="icon-btn" :title="t('actions.moveUp')" :disabled="i === 0" @click="moveUp(i)">
+          <button class="icon-btn" v-tooltip="t('actions.moveUp')" :disabled="i === 0" @click="moveUp(i)">
             <PhArrowUp :size="13" />
           </button>
-          <button class="icon-btn" :title="t('actions.moveDown')" :disabled="i === actions.length - 1" @click="moveDown(i)">
+          <button class="icon-btn" v-tooltip="t('actions.moveDown')" :disabled="i === actions.length - 1" @click="moveDown(i)">
             <PhArrowDown :size="13" />
           </button>
-          <button class="icon-btn danger" :title="t('actions.remove')" @click="removeAt(i)">
+          <button class="icon-btn danger" v-tooltip="t('actions.remove')" @click="removeAt(i)">
             <PhTrash :size="13" />
           </button>
         </div>
diff --git a/src/components/AssetSidebar.vue b/src/components/AssetSidebar.vue
index 65f74f0..eaa5f36 100644
--- a/src/components/AssetSidebar.vue
+++ b/src/components/AssetSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import {
   PhCircle,
   PhCursorClick,
@@ -17,6 +17,7 @@ import {
   PhUploadSimple,
 } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
+import { useAssetThumbsPref } from '@/composables/useAssetThumbsPref'
 import { importImageFile } from '@/lib/fileLoader'
 import type { Asset } from '@/types/scene'
 import { confirmDialog, promptDialog } from '@/components/ui'
@@ -28,16 +29,7 @@ const store = useSceneStore()
 const fileInput = ref<HTMLInputElement | null>(null)
 const uploadError = ref<string | null>(null)
 
-const STORAGE_KEY = 'animatr.assetThumbs'
-const storedThumbs = typeof localStorage !== 'undefined' ? localStorage.getItem(STORAGE_KEY) : null
-const showThumbs = ref(storedThumbs !== 'false')
-watch(showThumbs, (v) => {
-  try {
-    localStorage.setItem(STORAGE_KEY, String(v))
-  } catch {
-    /* ignore */
-  }
-})
+const { enabled: showThumbs } = useAssetThumbsPref()
 
 function addSampleRect() {
   const asset = store.addAsset({
@@ -311,7 +303,7 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
   <div
     class="panel"
     :class="{ 'hit-disabled': store.activeButtonEditMode === 'hit' }"
-    :title="store.activeButtonEditMode === 'hit' ? t('sidebar.hitModeDisabled') : undefined"
+    v-tooltip="store.activeButtonEditMode === 'hit' ? t('sidebar.hitModeDisabled') : undefined"
   >
     <h3>Assets</h3>
 
@@ -321,27 +313,27 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
     </button>
 
     <div class="actions">
-      <button class="shape-btn" :title="t('sidebar.shape.rect')" @click="addSampleRect">
+      <button class="shape-btn" v-tooltip="t('sidebar.shape.rect')" @click="addSampleRect">
         <PhSquare :size="16" />
       </button>
-      <button class="shape-btn" :title="t('sidebar.shape.circle')" @click="addSampleCircle">
+      <button class="shape-btn" v-tooltip="t('sidebar.shape.circle')" @click="addSampleCircle">
         <PhCircle :size="16" />
       </button>
-      <button class="shape-btn" :title="t('sidebar.shape.text')" @click="addSampleText">
+      <button class="shape-btn" v-tooltip="t('sidebar.shape.text')" @click="addSampleText">
         <PhTextT :size="16" />
       </button>
-      <button class="shape-btn" :title="t('sidebar.shape.polygon')" @click="addSamplePolygon">
+      <button class="shape-btn" v-tooltip="t('sidebar.shape.polygon')" @click="addSamplePolygon">
         <PhPolygon :size="16" />
       </button>
       <button
         class="shape-btn"
         :class="{ active: store.drawingMode === 'freeform' }"
-        :title="store.drawingMode === 'freeform' ? t('sidebar.shape.freeformActive') : t('sidebar.shape.freeform')"
+        v-tooltip="store.drawingMode === 'freeform' ? t('sidebar.shape.freeformActive') : t('sidebar.shape.freeform')"
         @click="startFreeformDrawing"
       >
         <PhPencilSimpleLine :size="16" />
       </button>
-      <button class="shape-btn" :title="t('sidebar.shape.button')" @click="addButton">
+      <button class="shape-btn" v-tooltip="t('sidebar.shape.button')" @click="addButton">
         <PhCursorClick :size="16" />
       </button>
     </div>
@@ -360,7 +352,7 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
       <h4>{{ t('sidebar.library') }}</h4>
       <button
         class="thumb-toggle"
-        :title="showThumbs ? t('sidebar.thumbnailsHide') : t('sidebar.thumbnailsShow')"
+        v-tooltip="showThumbs ? t('sidebar.thumbnailsHide') : t('sidebar.thumbnailsShow')"
         @click="showThumbs = !showThumbs"
       >
         <PhImageSquare v-if="showThumbs" :size="13" />
@@ -383,12 +375,12 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
           <component :is="assetIconMap[asset.kind]" :size="14" class="asset-icon" />
         </template>
         <div class="meta">
-          <span class="name" :title="asset.name">{{ asset.name }}</span>
+          <span class="name" v-tooltip="asset.name">{{ asset.name }}</span>
           <span v-if="showThumbs" class="sub">{{ t('sidebar.imageLabel') }}</span>
         </div>
         <button
           class="add-layer"
-          :title="t('sidebar.addLayerTooltip')"
+          v-tooltip="t('sidebar.addLayerTooltip')"
           @click="store.addLayer(asset.id)"
         >
           <PhPlus :size="12" weight="bold" />
@@ -399,7 +391,7 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
 
     <div class="lib-header clips-header">
       <h4>{{ t('sidebar.clips') }}</h4>
-      <button class="thumb-toggle" :title="t('sidebar.createClipTooltip')" @click="addClip">
+      <button class="thumb-toggle" v-tooltip="t('sidebar.createClipTooltip')" @click="addClip">
         <PhPlus :size="12" weight="bold" />
       </button>
     </div>
@@ -417,7 +409,7 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
           <PhFilmStrip :size="16" />
         </div>
         <div class="clip-meta">
-          <span class="clip-name" :title="clip.name">{{ clip.name }}</span>
+          <span class="clip-name" v-tooltip="clip.name">{{ clip.name }}</span>
           <span class="clip-sub">
             {{ t('sidebar.clipLayerCount', { n: clip.layers.length }) }} · {{ clip.duration.toFixed(1) }}s
           </span>
@@ -425,12 +417,12 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
         <div class="clip-actions">
           <button
             class="clip-btn"
-            :title="t('sidebar.renameTooltip')"
+            v-tooltip="t('sidebar.renameTooltip')"
             @click.stop="renameClipPrompt(clip.id, clip.name)"
           >
             <PhPencilSimple :size="11" />
           </button>
-          <button class="clip-btn danger" :title="t('sidebar.deleteTooltip')" @click.stop="deleteClip(clip.id)">
+          <button class="clip-btn danger" v-tooltip="t('sidebar.deleteTooltip')" @click.stop="deleteClip(clip.id)">
             <PhTrash :size="11" />
           </button>
         </div>
@@ -440,7 +432,7 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
 
     <div class="lib-header clips-header">
       <h4>{{ t('sidebar.buttons') }}</h4>
-      <button class="thumb-toggle" :title="t('sidebar.createButtonTooltip')" @click="addButton">
+      <button class="thumb-toggle" v-tooltip="t('sidebar.createButtonTooltip')" @click="addButton">
         <PhPlus :size="12" weight="bold" />
       </button>
     </div>
@@ -468,7 +460,7 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
           <PhCursorClick :size="14" class="asset-icon" />
         </template>
         <div class="clip-meta">
-          <span class="clip-name" :title="ba.name">{{ ba.name }}</span>
+          <span class="clip-name" v-tooltip="ba.name">{{ ba.name }}</span>
           <span v-if="showThumbs" class="clip-sub">
             {{ ba.canvas.width }} × {{ ba.canvas.height }}
           </span>
@@ -476,14 +468,14 @@ function onAssetDragStart(e: DragEvent, asset: Extract<Asset, { kind: 'image' }>
         <div class="clip-actions">
           <button
             class="clip-btn"
-            :title="t('sidebar.renameTooltip')"
+            v-tooltip="t('sidebar.renameTooltip')"
             @click.stop="renameButtonAssetPrompt(ba.id, ba.name)"
           >
             <PhPencilSimple :size="11" />
           </button>
           <button
             class="clip-btn danger"
-            :title="t('sidebar.deleteTooltip')"
+            v-tooltip="t('sidebar.deleteTooltip')"
             @click.stop="deleteButtonAsset(ba.id)"
           >
             <PhTrash :size="11" />
diff --git a/src/components/CanvasStage.vue b/src/components/CanvasStage.vue
index 4478767..a175bfd 100644
--- a/src/components/CanvasStage.vue
+++ b/src/components/CanvasStage.vue
@@ -747,6 +747,7 @@ const stackItems = computed<StackItem[]>(() => {
     const layers = ba.layers.slice().reverse()
     for (const layer of layers) {
       if (!layer.visible) continue
+      if (layer.editorHidden) continue
       const asset = assetMap.value.get(layer.assetId)
       if (!asset) continue
       const props = applyLivePose(sampleLayer(layer, store.playhead), layer.id)
@@ -760,6 +761,7 @@ const stackItems = computed<StackItem[]>(() => {
     const out: StackItem[] = []
     const layers = store.activeLayers.slice().reverse()
     for (const layer of layers) {
+      if (layer.editorHidden) continue
       if (!isLayerActiveAt(layer, store.playhead)) continue
       const asset = assetMap.value.get(layer.assetId)
       if (!asset) continue
@@ -794,6 +796,10 @@ const stackItems = computed<StackItem[]>(() => {
     const id = order[i]
     const layer = layerById.get(id)
     if (layer) {
+      // Editor-only hide: skip on the Konva stage while the scene
+      // file still carries the layer, so export/fullscreen-preview
+      // render it normally.
+      if (layer.editorHidden) continue
       if (!isLayerActiveAt(layer, store.playhead)) continue
       const asset = assetMap.value.get(layer.assetId)
       if (!asset) continue
@@ -2612,13 +2618,33 @@ function isInsideCanvasBounds(e: PointerEvent | MouseEvent): boolean {
   )
 }
 
+function pointerHitsKonvaShape(e: PointerEvent | MouseEvent): boolean {
+  // Transformer handles, vertex dots, and stage shapes can live
+  // outside the canvas rectangle (selection box for a shape near the
+  // edge, a polygon vertex dragged past the border, …). Asking Konva
+  // for an intersection at the pointer lets us tell "user grabbed a
+  // handle" from "user clicked the empty background" even when both
+  // happen outside the canvas bounds.
+  const stage = stageRef.value?.getStage()
+  if (!stage) return false
+  const rect = stage.container().getBoundingClientRect()
+  const hit = stage.getIntersection({
+    x: e.clientX - rect.left,
+    y: e.clientY - rect.top,
+  })
+  return !!hit
+}
+
 function isPanTrigger(e: PointerEvent | MouseEvent) {
   if (e.button === 1) return true
   if (e.button === 0 && e.ctrlKey) return true
   // Plain left-click on the empty content view (outside the canvas
   // rectangle) pans the viewport too — saves a ctrl-modifier for the
-  // common case of re-centering after zoom.
-  if (e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && !isInsideCanvasBounds(e)) {
+  // common case of re-centering after zoom. Skip panning when the
+  // click is actually on a Konva shape: a transformer handle, a
+  // polygon vertex, or a selection box that extends past the canvas
+  // edge still belongs to its owning shape and must stay draggable.
+  if (e.button === 0 && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && !isInsideCanvasBounds(e) && !pointerHitsKonvaShape(e)) {
     return true
   }
   return false
@@ -3121,22 +3147,22 @@ onBeforeUnmount(() => {
       class="hit-tools"
       @pointerdown.stop
     >
-      <button class="hit-btn" :title="t('canvas.hit.addRect')" @click="addHitRect">
+      <button class="hit-btn" v-tooltip="t('canvas.hit.addRect')" @click="addHitRect">
         <PhSquare :size="13" />
         <span>rect</span>
       </button>
-      <button class="hit-btn" :title="t('canvas.hit.addCircle')" @click="addHitCircle">
+      <button class="hit-btn" v-tooltip="t('canvas.hit.addCircle')" @click="addHitCircle">
         <PhCircle :size="13" />
         <span>circle</span>
       </button>
-      <button class="hit-btn" :title="t('canvas.hit.addPolygon')" @click="addHitPolygon">
+      <button class="hit-btn" v-tooltip="t('canvas.hit.addPolygon')" @click="addHitPolygon">
         <PhPolygon :size="13" />
         <span>polygon</span>
       </button>
       <button
         class="hit-btn danger"
         :disabled="selectedHitShapeIndex === null"
-        :title="t('canvas.hit.remove')"
+        v-tooltip="t('canvas.hit.remove')"
         @click="removeSelectedHitShape"
       >
         <PhTrash :size="13" />
@@ -3144,21 +3170,21 @@ onBeforeUnmount(() => {
     </div>
 
     <div class="zoom-controls" @pointerdown.stop>
-      <button class="zc-btn" :title="t('canvas.zoomOut')" @click="zoomBy(1 / 1.25)">−</button>
-      <button class="zc-label" :title="t('canvas.fitToView')" @click="fitToContainer">
+      <button class="zc-btn" v-tooltip="t('canvas.zoomOut')" @click="zoomBy(1 / 1.25)">−</button>
+      <button class="zc-label" v-tooltip="t('canvas.fitToView')" @click="fitToContainer">
         {{ zoomPercent }}%
       </button>
-      <button class="zc-btn" :title="t('canvas.zoomIn')" @click="zoomBy(1.25)">+</button>
+      <button class="zc-btn" v-tooltip="t('canvas.zoomIn')" @click="zoomBy(1.25)">+</button>
       <div class="zc-sep"></div>
-      <button class="zc-btn wide" :title="t('canvas.zoomOneToOne')" @click="zoomToOne">1:1</button>
-      <button class="zc-btn" :title="t('canvas.fitToView')" @click="fitToContainer">
+      <button class="zc-btn wide" v-tooltip="t('canvas.zoomOneToOne')" @click="zoomToOne">1:1</button>
+      <button class="zc-btn" v-tooltip="t('canvas.fitToView')" @click="fitToContainer">
         <PhCornersIn :size="13" />
       </button>
       <div class="zc-sep"></div>
       <button
         class="zc-btn crop-btn"
         :class="{ active: cropObjects }"
-        :title="cropObjects ? t('canvas.cropOff') : t('canvas.cropOn')"
+        v-tooltip="cropObjects ? t('canvas.cropOff') : t('canvas.cropOn')"
         @click="cropObjects = !cropObjects"
       >
         <PhCrop :size="13" />
@@ -3166,7 +3192,7 @@ onBeforeUnmount(() => {
       <button
         class="zc-btn"
         :class="{ active: maskPreview }"
-        :title="maskPreview ? t('canvas.maskPreviewOff') : t('canvas.maskPreviewOn')"
+        v-tooltip="maskPreview ? t('canvas.maskPreviewOff') : t('canvas.maskPreviewOn')"
         @click="maskPreview = !maskPreview"
       >
         <PhMaskHappy v-if="!maskPreview" :size="13" />
@@ -3175,7 +3201,7 @@ onBeforeUnmount(() => {
       <button
         class="zc-btn stage-preview-btn"
         :class="{ active: stagePreview }"
-        :title="stagePreview ? t('canvas.stagePreviewOff') : t('canvas.stagePreviewOn')"
+        v-tooltip="stagePreview ? t('canvas.stagePreviewOff') : t('canvas.stagePreviewOn')"
         @click="stagePreview = !stagePreview"
       >
         <PhCursorClick :size="13" />
diff --git a/src/components/ClipartDrawer.vue b/src/components/ClipartDrawer.vue
index fe58719..55c87e6 100644
--- a/src/components/ClipartDrawer.vue
+++ b/src/components/ClipartDrawer.vue
@@ -44,7 +44,7 @@ function onItemDragStart(e: DragEvent, index: number) {
   <aside class="clipart-drawer" :class="{ open: clipart.open }">
     <button
       class="drawer-tab"
-      :title="clipart.open ? t('clipart.close') : t('clipart.open')"
+      v-tooltip="clipart.open ? t('clipart.close') : t('clipart.open')"
       @click="clipart.toggle()"
     >
       <component :is="clipart.open ? PhCaretLeft : PhCaretRight" :size="14" />
@@ -56,7 +56,7 @@ function onItemDragStart(e: DragEvent, index: number) {
         <button
           v-if="clipart.handle"
           class="refresh-btn"
-          :title="t('clipart.refresh')"
+          v-tooltip="t('clipart.refresh')"
           :disabled="clipart.loading"
           @click="clipart.refresh()"
         >
@@ -83,7 +83,7 @@ function onItemDragStart(e: DragEvent, index: number) {
           v-for="(item, i) in clipart.items"
           :key="item.name + i"
           class="tile"
-          :title="item.name"
+          v-tooltip="item.name"
           draggable="true"
           @dragstart="onItemDragStart($event, i)"
         >
diff --git a/src/components/DocumentSettings.vue b/src/components/DocumentSettings.vue
index c65370c..54ffee6 100644
--- a/src/components/DocumentSettings.vue
+++ b/src/components/DocumentSettings.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import {
-  PhClock,
   PhFilmReel,
   PhFolder,
   PhFrameCorners,
   PhMoon,
   PhPalette,
+  PhSlidersHorizontal,
   PhSun,
   PhX,
 } from '@phosphor-icons/vue'
@@ -14,6 +14,9 @@ import { useSceneStore } from '@/stores/scene'
 import { useClipartStore } from '@/stores/clipart'
 import { useTheme } from '@/composables/useTheme'
 import type { Theme } from '@/composables/useTheme'
+import { useTooltipPref } from '@/composables/useTooltipPref'
+import { useAssetThumbsPref } from '@/composables/useAssetThumbsPref'
+import { showLocked } from '@/composables/useShowLocked'
 import { Modal, confirmDialog, promptDialog } from '@/components/ui'
 import { t } from '@/i18n'
 
@@ -23,6 +26,8 @@ const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
 const store = useSceneStore()
 const clipart = useClipartStore()
 const { theme, setTheme } = useTheme()
+const { enabled: tooltipsEnabled } = useTooltipPref()
+const { enabled: thumbsEnabled } = useAssetThumbsPref()
 
 // Re-check the stored clipart folder whenever settings opens — covers the
 // case where initial App.vue init raced ahead of IDB or the user opens
@@ -34,12 +39,12 @@ watch(
   },
 )
 
-type TabId = 'document' | 'timeline' | 'clipart' | 'theme'
+type TabId = 'document' | 'clipart' | 'interface' | 'theme'
 
 const tabs: { id: TabId; label: string; icon: typeof PhFrameCorners }[] = [
   { id: 'document', label: t('settings.tab.document'), icon: PhFrameCorners },
-  { id: 'timeline', label: t('settings.tab.timeline'), icon: PhClock },
   { id: 'clipart', label: t('settings.tab.clipart'), icon: PhFolder },
+  { id: 'interface', label: t('settings.tab.interface'), icon: PhSlidersHorizontal },
   { id: 'theme', label: t('settings.tab.theme'), icon: PhPalette },
 ]
 
@@ -280,7 +285,7 @@ function applyTheme(t: Theme) {
                     <button
                       v-if="store.scene.backgroundVideo"
                       class="ghost-btn inline-clear"
-                      :title="t('settings.bgVideoClear')"
+                      v-tooltip="t('settings.bgVideoClear')"
                       @click="clearBgVideo"
                     >
                       <PhX :size="12" />
@@ -304,10 +309,8 @@ function applyTheme(t: Theme) {
                 />
                 <p v-if="bgVideoError" class="error-line">{{ bgVideoError }}</p>
                 <p class="hint">{{ t('settings.bgVideoHint') }}</p>
-              </section>
 
-              <section v-else-if="activeTab === 'timeline'">
-                <h3>{{ t('settings.tab.timeline') }}</h3>
+                <h3 class="sub-heading">{{ t('settings.timing') }}</h3>
                 <div class="row">
                   <label>
                     {{ t('settings.duration') }}
@@ -318,9 +321,7 @@ function applyTheme(t: Theme) {
                     <input type="number" min="1" step="1" v-model.number="fps" />
                   </label>
                 </div>
-                <p class="hint">
-                  {{ t('settings.timelineHint') }}
-                </p>
+                <p class="hint">{{ t('settings.timelineHint') }}</p>
               </section>
 
 
@@ -359,6 +360,39 @@ function applyTheme(t: Theme) {
                 <p class="hint">{{ t('clipart.settingsHint') }}</p>
               </section>
 
+              <section v-else-if="activeTab === 'interface'">
+                <h3>{{ t('settings.tab.interface') }}</h3>
+                <label class="row-toggle">
+                  <span class="switch" :class="{ on: tooltipsEnabled }">
+                    <input type="checkbox" v-model="tooltipsEnabled" />
+                  </span>
+                  <div class="row-toggle-text">
+                    <div class="row-toggle-label">{{ t('settings.tooltipsLabel') }}</div>
+                    <div class="row-toggle-desc">{{ t('settings.tooltipsDesc') }}</div>
+                  </div>
+                </label>
+
+                <label class="row-toggle">
+                  <span class="switch" :class="{ on: showLocked }">
+                    <input type="checkbox" v-model="showLocked" />
+                  </span>
+                  <div class="row-toggle-text">
+                    <div class="row-toggle-label">{{ t('settings.showLockedLabel') }}</div>
+                    <div class="row-toggle-desc">{{ t('settings.showLockedDesc') }}</div>
+                  </div>
+                </label>
+
+                <label class="row-toggle">
+                  <span class="switch" :class="{ on: thumbsEnabled }">
+                    <input type="checkbox" v-model="thumbsEnabled" />
+                  </span>
+                  <div class="row-toggle-text">
+                    <div class="row-toggle-label">{{ t('settings.assetThumbsLabel') }}</div>
+                    <div class="row-toggle-desc">{{ t('settings.assetThumbsDesc') }}</div>
+                  </div>
+                </label>
+              </section>
+
               <section v-else-if="activeTab === 'theme'">
                 <h3>{{ t('settings.tab.theme') }}</h3>
                 <div class="theme-grid">
@@ -461,6 +495,13 @@ section h3 {
   font-weight: 600;
 }
 
+/* A second h3 inside the same section (e.g. "Timing" under the
+   Document tab) needs breathing room so it reads as its own subgroup
+   rather than colliding with the preceding hint paragraph. */
+section h3.sub-heading {
+  margin-top: 12px;
+}
+
 .row {
   display: flex;
   gap: 10px;
@@ -564,6 +605,96 @@ input[type='number'] {
   margin: 0;
 }
 
+/* Switch + 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
+   top of the text and uppercase everything inside. */
+.row-toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel-alt);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  font-size: 13px;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--text);
+  flex: 0 0 auto;
+}
+
+.row-toggle-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  text-transform: none;
+}
+
+.row-toggle-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.row-toggle-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.4;
+  letter-spacing: normal;
+  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;
diff --git a/src/components/ExportDialog.vue b/src/components/ExportDialog.vue
index b16bedf..a25b06b 100644
--- a/src/components/ExportDialog.vue
+++ b/src/components/ExportDialog.vue
@@ -11,6 +11,7 @@ import { useSceneStore } from '@/stores/scene'
 import { downloadExampleHtml, downloadRuntime, downloadSceneExport } from '@/lib/exportPlayer'
 import { downloadSceneAsVideo, pickMimeType } from '@/lib/videoExport'
 import { downloadFromServer } from '@/lib/serverExport'
+import type { ButtonAsset, Layer } from '@/types/scene'
 import { Modal } from '@/components/ui'
 import { t } from '@/i18n'
 
@@ -29,8 +30,40 @@ const progress = ref<ProgressState | null>(null)
 
 const videoSupported = pickMimeType() !== null
 
+// Opt-in: strip layers that are hidden in the editor (`editorHidden`)
+// from the exported scene. Default off — editor-hide is a workflow
+// aid and shouldn't silently drop content on export unless the user
+// explicitly asks for it. Applies to every format below.
+const skipHidden = ref(false)
+
+const hasHiddenLayers = computed(() => {
+  if (store.scene.layers.some((l) => l.editorHidden)) return true
+  for (const clip of store.scene.clips ?? []) {
+    if (clip.layers.some((l) => l.editorHidden)) return true
+  }
+  for (const asset of store.scene.assets) {
+    if (asset.kind === 'button' && asset.layers.some((l) => l.editorHidden)) return true
+  }
+  return false
+})
+
 function sceneClone() {
-  return JSON.parse(JSON.stringify(store.scene))
+  const scene = JSON.parse(JSON.stringify(store.scene))
+  if (!skipHidden.value) return scene
+  scene.layers = scene.layers.filter((l: Layer) => !l.editorHidden)
+  if (Array.isArray(scene.clips)) {
+    for (const clip of scene.clips) {
+      clip.layers = clip.layers.filter((l: Layer) => !l.editorHidden)
+    }
+  }
+  if (Array.isArray(scene.assets)) {
+    for (const asset of scene.assets as ButtonAsset[]) {
+      if (asset && asset.kind === 'button' && Array.isArray(asset.layers)) {
+        asset.layers = asset.layers.filter((l: Layer) => !l.editorHidden)
+      }
+    }
+  }
+  return scene
 }
 
 function exportScene() {
@@ -131,6 +164,24 @@ function onUpdate(v: boolean) {
     @update:model-value="onUpdate"
   >
     <div v-if="!progress" class="options">
+      <label
+        class="export-toggle"
+        :class="{ disabled: !hasHiddenLayers }"
+        v-tooltip="hasHiddenLayers ? undefined : t('export.skipHiddenNone')"
+      >
+        <span class="switch" :class="{ on: skipHidden && hasHiddenLayers }">
+          <input
+            type="checkbox"
+            v-model="skipHidden"
+            :disabled="!hasHiddenLayers"
+          />
+        </span>
+        <div class="export-toggle-text">
+          <div class="export-toggle-label">{{ t('export.skipHidden') }}</div>
+          <div class="export-toggle-desc">{{ t('export.skipHiddenDesc') }}</div>
+        </div>
+      </label>
+
       <button class="opt" @click="exportRuntime">
         <div class="opt-icon"><PhEngine :size="20" /></div>
         <div class="opt-text">
@@ -223,6 +274,89 @@ function onUpdate(v: boolean) {
   padding: 12px;
 }
 
+.export-toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--panel-alt);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.export-toggle.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.export-toggle-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.export-toggle-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.export-toggle-desc {
+  font-size: 11px;
+  color: var(--text-dim);
+  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);
+}
+
 .opt {
   display: flex;
   align-items: center;
diff --git a/src/components/FullscreenPreview.vue b/src/components/FullscreenPreview.vue
index 0cb4744..e23bed8 100644
--- a/src/components/FullscreenPreview.vue
+++ b/src/components/FullscreenPreview.vue
@@ -231,16 +231,16 @@ const timeLabel = computed(() => {
             <div class="fs-progress-handle" :style="{ left: progressPct + '%' }"></div>
           </div>
           <div class="fs-toolbar">
-            <button class="fs-btn" :title="playing ? t('fullscreen.pause') : t('fullscreen.play')" @click="toggle">
+            <button class="fs-btn" v-tooltip="playing ? t('fullscreen.pause') : t('fullscreen.play')" @click="toggle">
               <PhPause v-if="playing" :size="15" weight="fill" />
               <PhPlay v-else :size="15" weight="fill" />
             </button>
-            <button class="fs-btn" :title="t('fullscreen.jumpToStart')" @click="rewind">
+            <button class="fs-btn" v-tooltip="t('fullscreen.jumpToStart')" @click="rewind">
               <PhSkipBack :size="15" weight="fill" />
             </button>
             <span class="fs-time">{{ timeLabel }}</span>
             <div class="fs-spacer"></div>
-            <button class="fs-btn close" :title="t('fullscreen.close')" @click="close">
+            <button class="fs-btn close" v-tooltip="t('fullscreen.close')" @click="close">
               <PhX :size="15" weight="bold" />
             </button>
           </div>
diff --git a/src/components/PropertiesPanel.vue b/src/components/PropertiesPanel.vue
index 1abee51..61bb2c6 100644
--- a/src/components/PropertiesPanel.vue
+++ b/src/components/PropertiesPanel.vue
@@ -384,7 +384,7 @@ function removeKeyframeHere() {
           {{ hasKeyframeHere ? t('properties.keyframeLabel') : t('properties.interpolated') }}
           <span class="kf-time">@ {{ store.playhead.toFixed(2) }}s</span>
         </span>
-        <button v-if="hasKeyframeHere" class="kf-btn" :title="t('properties.removeKeyframe')" @click="removeKeyframeHere">
+        <button v-if="hasKeyframeHere" class="kf-btn" v-tooltip="t('properties.removeKeyframe')" @click="removeKeyframeHere">
           <PhX :size="12" weight="bold" />
         </button>
       </div>
@@ -430,7 +430,7 @@ function removeKeyframeHere() {
               type="button"
               class="icon-toggle"
               :class="{ active: polygonClosed }"
-              :title="t('properties.polygonClosed')"
+              v-tooltip="t('properties.polygonClosed')"
               @click="polygonClosed = !polygonClosed"
             >
               <PhPolygon :size="14" :weight="polygonClosed ? 'fill' : 'regular'" />
@@ -465,7 +465,7 @@ function removeKeyframeHere() {
                 type="button"
                 class="icon-toggle alpha-toggle-btn"
                 :class="{ active: fillTransparent }"
-                :title="t('properties.transparent')"
+                v-tooltip="t('properties.transparent')"
                 @click="fillTransparent = !fillTransparent"
               >
                 <component :is="fillTransparent ? PhEyeSlash : PhEye" :size="13" />
@@ -487,7 +487,7 @@ function removeKeyframeHere() {
                 type="button"
                 class="icon-toggle alpha-toggle-btn"
                 :class="{ active: strokeTransparent }"
-                :title="t('properties.transparent')"
+                v-tooltip="t('properties.transparent')"
                 @click="strokeTransparent = !strokeTransparent"
               >
                 <component :is="strokeTransparent ? PhEyeSlash : PhEye" :size="13" />
@@ -588,7 +588,7 @@ function removeKeyframeHere() {
               type="button"
               class="icon-toggle"
               :class="{ active: !!selected.isMask }"
-              :title="t('properties.maskUse')"
+              v-tooltip="t('properties.maskUse')"
               @click="store.setLayerMask(selected.id, !selected.isMask)"
             >
               <PhMaskHappy :size="14" />
@@ -601,7 +601,7 @@ function removeKeyframeHere() {
                 type="button"
                 class="icon-toggle"
                 :class="{ active: (selected.maskMode ?? 'negative') === 'negative', danger: (selected.maskMode ?? 'negative') === 'negative' }"
-                :title="t('properties.maskNegative')"
+                v-tooltip="t('properties.maskNegative')"
                 @click="store.setLayerMaskMode(selected.id, 'negative')"
               >
                 <PhMinus :size="13" weight="bold" />
@@ -610,7 +610,7 @@ function removeKeyframeHere() {
                 type="button"
                 class="icon-toggle"
                 :class="{ active: selected.maskMode === 'positive' }"
-                :title="t('properties.maskPositive')"
+                v-tooltip="t('properties.maskPositive')"
                 @click="store.setLayerMaskMode(selected.id, 'positive')"
               >
                 <PhPlus :size="13" weight="bold" />
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 64855ad..7f90aa3 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -46,6 +46,7 @@ import type {
   Layer,
   TrackGroup,
 } from '@/types/scene'
+import { BUTTON_STATE_TIMES } from '@/types/scene'
 
 interface TimelineLayerTrack {
   type: 'layer'
@@ -1127,6 +1128,41 @@ function segmentStyle(seg: KfSegment) {
   }
 }
 
+// Button-editor only: list the 4 state-slot times that this track has
+// NO keyframe on. The template renders a "+" placeholder over each
+// empty slot; clicking it duplicates the nearest keyframe (prev by
+// preference, next if there's nothing earlier) onto that slot.
+const BUTTON_SLOT_TIMES = [
+  BUTTON_STATE_TIMES.normal,
+  BUTTON_STATE_TIMES.hover,
+  BUTTON_STATE_TIMES.pressed,
+  BUTTON_STATE_TIMES.disabled,
+] as const
+
+function emptyButtonSlots(kfs: Keyframe[]): number[] {
+  if (!store.activeButtonAssetId) return []
+  if (kfs.length === 0) return []
+  const EPS = 1e-3
+  const has = (t: number) => kfs.some((k) => Math.abs(k.time - t) < EPS)
+  return BUTTON_SLOT_TIMES.filter((t) => !has(t))
+}
+
+function addKfFromPrev(layerId: string, kfs: Keyframe[], time: number) {
+  if (!kfs.length) return
+  let prev: Keyframe | null = null
+  let next: Keyframe | null = null
+  for (const k of kfs) {
+    if (k.time < time) {
+      if (!prev || k.time > prev.time) prev = k
+    } else if (k.time > time) {
+      if (!next || k.time < next.time) next = k
+    }
+  }
+  const source = prev ?? next
+  if (!source) return
+  store.duplicateKeyframeAt(layerId, source.id, time)
+}
+
 const EASING_OPTIONS: { value: Easing; label: string }[] = [
   { value: 'linear', label: t('timeline.easingLinear') },
   { value: 'easeIn', label: t('timeline.easingEaseIn') },
@@ -2145,13 +2181,13 @@ onBeforeUnmount(() => {
               <button
                 class="mode-btn"
                 :class="{ active: store.activeButtonEditMode === 'states' }"
-                :title="t('timeline.buttonModeStates')"
+                v-tooltip="t('timeline.buttonModeStates')"
                 @click="store.setButtonEditMode('states')"
               >{{ t('timeline.buttonModeStatesShort') }}</button>
               <button
                 class="mode-btn hit"
                 :class="{ active: store.activeButtonEditMode === 'hit' }"
-                :title="t('timeline.buttonModeHit')"
+                v-tooltip="t('timeline.buttonModeHit')"
                 @click="store.setButtonEditMode('hit')"
               >{{ t('timeline.buttonModeHitShort') }}</button>
             </div>
@@ -2192,7 +2228,7 @@ onBeforeUnmount(() => {
         </div>
         <div v-else class="scrub-bar">
           <div class="name-spacer">
-            <div class="mode-toggle" :title="t('timeline.toggleTimeUnit')">
+            <div class="mode-toggle" v-tooltip="t('timeline.toggleTimeUnit')">
               <button
                 class="mode-btn"
                 :class="{ active: displayMode === 'seconds' }"
@@ -2207,7 +2243,7 @@ onBeforeUnmount(() => {
             <button
               class="snap-btn"
               :class="{ active: snapEnabled }"
-              :title="snapEnabled ? t('timeline.snapOn') : t('timeline.snapOff')"
+              v-tooltip="snapEnabled ? t('timeline.snapOn') : t('timeline.snapOff')"
               @click="snapEnabled = !snapEnabled"
             >
               <PhMagnet :size="12" :weight="snapEnabled ? 'fill' : 'regular'" />
@@ -2215,7 +2251,7 @@ onBeforeUnmount(() => {
             <button
               class="snap-btn"
               :class="{ active: !showLocked }"
-              :title="showLocked ? t('timeline.hideLocked') : t('timeline.showLocked')"
+              v-tooltip="showLocked ? t('timeline.hideLocked') : t('timeline.showLocked')"
               @click="showLocked = !showLocked"
             >
               <component
@@ -2226,7 +2262,7 @@ onBeforeUnmount(() => {
             <button
               v-if="!inClipEdit"
               class="snap-btn"
-              :title="t('timeline.addGroupTooltip')"
+              v-tooltip="t('timeline.addGroupTooltip')"
               @click="addGroup"
             >
               <PhFolderPlus :size="12" />
@@ -2234,14 +2270,14 @@ onBeforeUnmount(() => {
             <button
               v-if="!inClipEdit"
               class="snap-btn"
-              :title="t('timeline.addScriptTrackTooltip')"
+              v-tooltip="t('timeline.addScriptTrackTooltip')"
               @click="store.addScriptTrack()"
             >
               <PhCode :size="12" />
             </button>
             <button
               class="snap-btn add-kf-btn"
-              :title="t('timeline.addKeyframeTooltip')"
+              v-tooltip="t('timeline.addKeyframeTooltip')"
               :disabled="!canCreateKf"
               @click="addKeyframeForSelected"
             >
@@ -2281,7 +2317,7 @@ onBeforeUnmount(() => {
             ></span>
             <span
               class="range-bracket bracket-in"
-              :title="t('timeline.inPoint')"
+              v-tooltip="t('timeline.inPoint')"
               :style="{ left: pxFromTime(store.playbackIn) + 'px' }"
               @pointerdown="onInBracketPointerDown"
               @pointermove="onInBracketPointerMove"
@@ -2290,7 +2326,7 @@ onBeforeUnmount(() => {
             ></span>
             <span
               class="range-bracket bracket-out"
-              :title="t('timeline.outPoint')"
+              v-tooltip="t('timeline.outPoint')"
               :style="{ left: pxFromTime(store.playbackOut) + 'px' }"
               @pointerdown="onOutBracketPointerDown"
               @pointermove="onOutBracketPointerMove"
@@ -2306,7 +2342,7 @@ onBeforeUnmount(() => {
                 left: pxFromTime(marker.time) + 'px',
                 ...(marker.color ? { '--marker-color': marker.color } : {}),
               }"
-              :title="marker.name"
+              v-tooltip="marker.name"
               @pointerdown="onMarkerPointerDown($event, marker.id)"
               @pointermove="onMarkerPointerMove($event, marker.id)"
               @pointerup="onMarkerPointerUp($event, marker.id)"
@@ -2413,11 +2449,22 @@ onBeforeUnmount(() => {
                 />
                 <span v-if="!track.isParent" class="sub-indent">↳</span>
                 <span class="track-label">{{ track.label }}</span>
+                <button
+                  v-if="track.isParent"
+                  class="eye-btn"
+                  :class="{ hidden: track.layer.editorHidden }"
+                  v-tooltip="track.layer.editorHidden ? t('timeline.showInEditor') : t('timeline.hideInEditor')"
+                  @click.stop="store.setLayerEditorHidden(track.layerId, !track.layer.editorHidden)"
+                  @mousedown.stop
+                  @dragstart.prevent.stop
+                >
+                  <component :is="track.layer.editorHidden ? PhEyeSlash : PhEye" :size="12" />
+                </button>
                 <button
                   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')"
+                  v-tooltip="track.layer.locked ? t('timeline.unlock') : t('timeline.lock')"
                   @click.stop="store.setTrackLocked(track.layerId, !track.layer.locked)"
                   @mousedown.stop
                   @dragstart.prevent.stop
@@ -2460,7 +2507,7 @@ onBeforeUnmount(() => {
                   :data-layer-id="track.layerId"
                   :data-kind="track.kind"
                   :data-kf-id="kf.id"
-                  :title="
+                  v-tooltip="
                     kf.hold
                       ? t('timeline.stillFrameTooltip', { time: formatKfTime(kf.time) })
                       : t('timeline.keyframeTooltip', { time: formatKfTime(kf.time) })
@@ -2473,6 +2520,19 @@ onBeforeUnmount(() => {
                   @dblclick="onKeyframeDblClick($event, track.layerId, kf.id)"
                   @contextmenu="onKeyframeContextMenu($event, track.layerId, kf.id, track.kfs)"
                 />
+                <button
+                  v-for="emptyT in emptyButtonSlots(track.kfs)"
+                  :key="`empty-${track.layerId}-${track.kind}-${emptyT}`"
+                  type="button"
+                  class="kf-add"
+                  :style="{ left: pxFromTime(emptyT) + 'px' }"
+                  v-tooltip="t('timeline.addKfFromPrev')"
+                  @mousedown.stop
+                  @pointerdown.stop
+                  @click.stop="addKfFromPrev(track.layerId, track.kfs, emptyT)"
+                >
+                  <PhPlus :size="10" weight="bold" />
+                </button>
               </div>
             </div>
 
@@ -2525,7 +2585,7 @@ onBeforeUnmount(() => {
                   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')"
+                  v-tooltip="clipTrackById.get(track.clipTrackId)?.locked ? t('timeline.unlock') : t('timeline.lock')"
                   @click.stop="
                     store.setTrackLocked(
                       track.clipTrackId,
@@ -2568,7 +2628,7 @@ onBeforeUnmount(() => {
                     moving: clipMove?.instanceId === ci.id,
                   }"
                   :style="clipBlockStyle(ci)"
-                  :title="trimTooltip(ci)"
+                  v-tooltip="trimTooltip(ci)"
                   @pointerdown="onClipBlockPointerDown($event, ci)"
                   @pointermove="onClipBlockPointerMove"
                   @pointerup="onClipBlockPointerUp"
@@ -2634,7 +2694,7 @@ onBeforeUnmount(() => {
                 <button
                   class="lock-btn"
                   :class="{ locked: track.locked }"
-                  :title="track.locked ? t('timeline.unlock') : t('timeline.lock')"
+                  v-tooltip="track.locked ? t('timeline.unlock') : t('timeline.lock')"
                   @click.stop="store.setTrackLocked(track.scriptTrackId, !track.locked)"
                   @mousedown.stop
                   @dragstart.prevent.stop
@@ -2662,7 +2722,7 @@ onBeforeUnmount(() => {
                   :key="frame.id"
                   class="script-frame"
                   :style="{ left: pxFromTime(frame.time) + 'px' }"
-                  :title="frame.label ?? t('timeline.scriptFrameTooltip', { n: frame.actions.length })"
+                  v-tooltip="frame.label ?? t('timeline.scriptFrameTooltip', { n: frame.actions.length })"
                   @pointerdown="onScriptFramePointerDown($event, frame.id)"
                   @pointermove="onScriptFramePointerMove"
                   @pointerup="onScriptFramePointerUp"
@@ -2713,7 +2773,7 @@ onBeforeUnmount(() => {
                 <button
                   class="lock-btn"
                   :class="{ locked: track.locked }"
-                  :title="track.locked ? t('timeline.unlock') : t('timeline.lock')"
+                  v-tooltip="track.locked ? t('timeline.unlock') : t('timeline.lock')"
                   @click.stop="store.setTrackLocked(track.groupId, !track.locked)"
                   @mousedown.stop
                   @dragstart.prevent.stop
@@ -2768,7 +2828,7 @@ onBeforeUnmount(() => {
                 <span class="hit-track-label">{{ hitShapeLabel(shape, idx) }}</span>
                 <button
                   class="hit-track-delete"
-                  :title="t('timeline.hitTrackDelete')"
+                  v-tooltip="t('timeline.hitTrackDelete')"
                   @pointerdown.stop
                   @click.stop="onDeleteHitShape(idx)"
                 >×</button>
@@ -2806,7 +2866,7 @@ onBeforeUnmount(() => {
       class="name-col-resize"
       :class="{ resizing: nameResizing }"
       :style="{ left: trackNameWidth + 'px' }"
-      :title="t('timeline.resizeTrackColumn')"
+      v-tooltip="t('timeline.resizeTrackColumn')"
       @pointerdown="onNameResizeStart"
       @pointermove="onNameResizeMove"
       @pointerup="onNameResizeEnd"
@@ -2880,7 +2940,7 @@ onBeforeUnmount(() => {
             class="color-tile"
             :class="{ selected: trackMenu.currentColor === c.value, none: c.value === null }"
             :style="c.value ? { background: c.value } : undefined"
-            :title="c.label"
+            v-tooltip="c.label"
             @click="applyTrackColor(c.value)"
           >
             <PhCheck
@@ -3631,6 +3691,40 @@ onBeforeUnmount(() => {
   transition: opacity 140ms var(--ease), color 140ms var(--ease);
 }
 
+/* Editor-only show/hide toggle. Sits to the left of the lock button.
+   Stays visible when the layer is hidden so the state is obvious; on
+   hover it fades in on every track so you can reach it without the
+   layer first being hidden. */
+.eye-btn {
+  margin-left: auto;
+  margin-right: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 140ms var(--ease), color 140ms var(--ease);
+}
+
+.track-name:hover .eye-btn {
+  opacity: 0.7;
+}
+
+.eye-btn:hover {
+  color: var(--text);
+  opacity: 1;
+}
+
+.eye-btn.hidden {
+  opacity: 1;
+  color: var(--accent);
+}
+
 .track-name:hover .lock-btn {
   opacity: 0.7;
 }
@@ -3905,6 +3999,37 @@ onBeforeUnmount(() => {
   box-shadow: none;
 }
 
+/* Button-editor empty-slot placeholder. Outlined accent-coloured
+   circle that stays fully opaque (no fade) so it's obvious the slot
+   is interactive; on hover the fill solidifies into the accent so
+   the user sees "I'm about to drop a keyframe here". */
+.kf-add {
+  position: absolute;
+  top: 50%;
+  width: 18px;
+  height: 18px;
+  margin-left: -9px;
+  margin-top: -9px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--panel);
+  border: 1.5px solid var(--track-color, var(--accent));
+  border-radius: 50%;
+  color: var(--track-color, var(--accent));
+  cursor: pointer;
+  transition: background 140ms var(--ease), color 140ms var(--ease),
+    transform 140ms var(--ease);
+  z-index: 2;
+}
+
+.kf-add:hover {
+  background: var(--track-color, var(--accent));
+  color: #fff;
+  transform: scale(1.1);
+}
+
 .kf.hold:hover {
   background: var(--panel);
   border-color: #fff;
diff --git a/src/components/TooltipHost.vue b/src/components/TooltipHost.vue
new file mode 100644
index 0000000..ff1e0b4
--- /dev/null
+++ b/src/components/TooltipHost.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { activeTooltip } from '@/directives/tooltip'
+
+const VIEWPORT_MARGIN = 8
+const GAP = 8
+
+const hostEl = ref<HTMLDivElement | null>(null)
+const position = ref<{ top: number; left: number; placement: 'top' | 'bottom' } | null>(null)
+
+const content = computed(() => activeTooltip.value?.content ?? null)
+const target = computed(() => activeTooltip.value?.target ?? null)
+
+async function reposition() {
+  const t = target.value
+  if (!t) {
+    position.value = null
+    return
+  }
+  const tooltip = hostEl.value
+  if (!tooltip) return
+  const rect = t.getBoundingClientRect()
+  const tw = tooltip.offsetWidth
+  const th = tooltip.offsetHeight
+  const vpH = window.innerHeight
+  const vpW = window.innerWidth
+
+  // Prefer below; flip above if not enough room.
+  const spaceBelow = vpH - rect.bottom - VIEWPORT_MARGIN
+  const spaceAbove = rect.top - VIEWPORT_MARGIN
+  const useAbove = spaceBelow < th + GAP && spaceAbove >= th + GAP
+  const placement: 'top' | 'bottom' = useAbove ? 'top' : 'bottom'
+  const top = useAbove ? rect.top - th - GAP : rect.bottom + GAP
+
+  // Horizontal centering, clamped to viewport.
+  const desiredLeft = rect.left + rect.width / 2 - tw / 2
+  const left = Math.max(
+    VIEWPORT_MARGIN,
+    Math.min(vpW - tw - VIEWPORT_MARGIN, desiredLeft),
+  )
+
+  position.value = { top, left, placement }
+}
+
+watch(activeTooltip, async (v) => {
+  if (!v) {
+    position.value = null
+    return
+  }
+  // When we jump from one tooltip to another we keep the previous
+  // position while the new div mounts — that's one frame of visual
+  // jitter, but it avoids a briefly-invisible flash between tooltips.
+  await nextTick()
+  await reposition()
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="content"
+      ref="hostEl"
+      class="tt"
+      :class="[`tt-${position?.placement ?? 'bottom'}`, { 'tt-ready': !!position }]"
+      :style="{
+        top: (position?.top ?? -9999) + 'px',
+        left: (position?.left ?? -9999) + 'px',
+      }"
+      role="tooltip"
+    >
+      <div class="tt-label">{{ content.label }}</div>
+      <div v-if="content.help" class="tt-help">{{ content.help }}</div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+/* The tooltip mounts at an off-screen position (top/left = -9999) and
+   stays `opacity: 0` until `.tt-ready` is applied — that's the frame
+   after we measure the element and know where it should actually go.
+   CSS handles the fade-in instead of a <Transition> wrapper so we can
+   defer the opacity change until after positioning without fighting
+   the enter animation. */
+.tt {
+  position: fixed;
+  z-index: 1000;
+  max-width: 280px;
+  padding: 7px 10px;
+  background: #1f1f24;
+  color: #f5f5f7;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.35),
+    0 8px 24px rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+  font-size: 12px;
+  line-height: 1.35;
+  user-select: none;
+  -webkit-user-select: none;
+  opacity: 0;
+  transform: translateY(2px);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.tt.tt-ready {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.tt.tt-top {
+  transform: translateY(-2px);
+}
+
+.tt.tt-top.tt-ready {
+  transform: translateY(0);
+}
+
+.tt-label {
+  font-weight: 500;
+  color: #f5f5f7;
+}
+
+/* Help line reads as an explanation under the label — dimmer, smaller,
+   so the two lines register as "name + description" instead of
+   "two equal things". */
+.tt-help {
+  margin-top: 3px;
+  font-size: 11px;
+  color: #b8b8be;
+}
+</style>
diff --git a/src/components/WelcomeDialog.vue b/src/components/WelcomeDialog.vue
index 4560a5f..8f3fdbf 100644
--- a/src/components/WelcomeDialog.vue
+++ b/src/components/WelcomeDialog.vue
@@ -161,7 +161,7 @@ watch(
                 <button
                   class="del"
                   tabindex="-1"
-                  :title="t('welcome.deleteTooltip')"
+                  v-tooltip="t('welcome.deleteTooltip')"
                   @click="removeProject($event, p)"
                 >
                   <PhTrash :size="13" />
diff --git a/src/components/ui/IconButton.vue b/src/components/ui/IconButton.vue
index 43cf51b..f2abba5 100644
--- a/src/components/ui/IconButton.vue
+++ b/src/components/ui/IconButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { Component } from 'vue'
+import { computed, type Component } from 'vue'
+import type { TooltipContent } from '@/directives/tooltip'
 
 type Variant = 'default' | 'ghost' | 'primary' | 'danger'
 type Size = 'xs' | 'sm' | 'md'
@@ -14,7 +15,10 @@ const props = withDefaults(
     active?: boolean
     disabled?: boolean
     rounded?: boolean
+    /** Plain tooltip label. Callers pass a simple string. */
     title?: string
+    /** Rich tooltip content — takes precedence over `title` when given. */
+    tooltip?: string | TooltipContent
   }>(),
   {
     iconWeight: 'regular',
@@ -27,6 +31,12 @@ const props = withDefaults(
 )
 
 const iconPx: Record<Size, number> = { xs: 12, sm: 14, md: 15 }
+
+const tooltipBinding = computed<string | TooltipContent | undefined>(() => {
+  if (props.tooltip !== undefined) return props.tooltip
+  if (props.title) return props.title
+  return undefined
+})
 </script>
 
 <template>
@@ -35,7 +45,7 @@ const iconPx: Record<Size, number> = { xs: 12, sm: 14, md: 15 }
     class="icon-btn"
     :class="[`size-${size}`, `variant-${variant}`, { active, rounded }]"
     :disabled="disabled"
-    :title="title"
+    v-tooltip="tooltipBinding"
   >
     <slot>
       <component
diff --git a/src/components/ui/Modal.vue b/src/components/ui/Modal.vue
index 6461056..bd42efe 100644
--- a/src/components/ui/Modal.vue
+++ b/src/components/ui/Modal.vue
@@ -108,7 +108,7 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
               v-if="dismissable"
               class="close"
               :disabled="!dismissable"
-              :title="t('dialog.close')"
+              v-tooltip="t('dialog.close')"
               @click="close"
             >
               <PhX :size="14" weight="bold" />
diff --git a/src/composables/useAssetThumbsPref.ts b/src/composables/useAssetThumbsPref.ts
new file mode 100644
index 0000000..5d181a6
--- /dev/null
+++ b/src/composables/useAssetThumbsPref.ts
@@ -0,0 +1,28 @@
+import { ref, watch } from 'vue'
+
+const STORAGE_KEY = 'animatr.assetThumbs'
+
+function read(): boolean {
+  try {
+    const v = localStorage.getItem(STORAGE_KEY)
+    return v !== 'false'
+  } catch {
+    return true
+  }
+}
+
+// Module-level shared ref so AssetSidebar and the settings dialog
+// both write to the same preference.
+export const assetThumbsEnabled = ref<boolean>(read())
+
+watch(assetThumbsEnabled, (v) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, String(v))
+  } catch {
+    /* ignore */
+  }
+})
+
+export function useAssetThumbsPref() {
+  return { enabled: assetThumbsEnabled }
+}
diff --git a/src/composables/useTooltipPref.ts b/src/composables/useTooltipPref.ts
new file mode 100644
index 0000000..7501661
--- /dev/null
+++ b/src/composables/useTooltipPref.ts
@@ -0,0 +1,25 @@
+import { ref, watch } from 'vue'
+
+const STORAGE_KEY = 'ruwio:tooltipsEnabled'
+
+function readInitial(): boolean {
+  try {
+    return localStorage.getItem(STORAGE_KEY) !== '0'
+  } catch {
+    return true
+  }
+}
+
+const enabled = ref<boolean>(readInitial())
+
+watch(enabled, (v) => {
+  try {
+    localStorage.setItem(STORAGE_KEY, v ? '1' : '0')
+  } catch {
+    /* storage disabled — no persistence, behavior stays in-memory */
+  }
+})
+
+export function useTooltipPref() {
+  return { enabled }
+}
diff --git a/src/devtools/TestOverlay.vue b/src/devtools/TestOverlay.vue
index 373df23..32d6884 100644
--- a/src/devtools/TestOverlay.vue
+++ b/src/devtools/TestOverlay.vue
@@ -141,7 +141,7 @@ async function run() {
   startedAt.value = performance.now()
   const snapshot = JSON.parse(JSON.stringify(store.$state))
   try {
-    results.value = await runAll(registerAllTests, {
+    await runAll(registerAllTests, {
       onProgress: (d, t) => {
         done.value = d
         total.value = t
@@ -150,6 +150,12 @@ async function run() {
         currentSuite.value = suiteName
         currentTest.value = testName
       },
+      // Push each result as it arrives so `failedSoFar` updates live
+      // — that's what drives the progress bar turning red the moment
+      // any test fails, instead of only at the end of the run.
+      onResult: (r) => {
+        results.value.push(r)
+      },
       interTestDelayMs: 80,
     })
   } finally {
@@ -230,16 +236,16 @@ onBeforeUnmount(() => document.removeEventListener('keydown', onKeyDown))
               <button
                 class="tbtn"
                 :disabled="!results.length"
-                :title="clipboardStatus === 'copied' ? t('tests.copiedTooltip') : t('tests.copyTooltip')"
+                v-tooltip="clipboardStatus === 'copied' ? t('tests.copiedTooltip') : t('tests.copyTooltip')"
                 :class="{ copied: clipboardStatus === 'copied', failed: clipboardStatus === 'failed' }"
                 @click="copyReport"
               >
                 <PhClipboardText :size="14" />
               </button>
-              <button class="tbtn" :title="t('tests.runAgain')" @click="run">
+              <button class="tbtn" v-tooltip="t('tests.runAgain')" @click="run">
                 <PhArrowClockwise :size="14" />
               </button>
-              <button class="tbtn" :title="t('tests.close')" @click="close">
+              <button class="tbtn" v-tooltip="t('tests.close')" @click="close">
                 <PhX :size="14" weight="bold" />
               </button>
             </div>
diff --git a/src/devtools/testRunner.ts b/src/devtools/testRunner.ts
index 548081f..a08d567 100644
--- a/src/devtools/testRunner.ts
+++ b/src/devtools/testRunner.ts
@@ -131,6 +131,7 @@ function cleanStack(stack: string | undefined): string | undefined {
 export interface RunOptions {
   onProgress?: (done: number, total: number) => void
   onTestStart?: (suite: string, name: string) => void
+  onResult?: (result: TestResult) => void
   interTestDelayMs?: number
 }
 
@@ -149,16 +150,17 @@ export async function runAll(
       opts.onTestStart?.(s.name, t.name)
       await new Promise((r) => requestAnimationFrame(() => r(null)))
       const start = performance.now()
+      let pushed: TestResult
       try {
         if (s.beforeEach) await s.beforeEach()
         await t.fn()
         if (s.afterEach) await s.afterEach()
-        results.push({
+        pushed = {
           suite: s.name,
           name: t.name,
           ok: true,
           durationMs: performance.now() - start,
-        })
+        }
       } catch (err) {
         try {
           if (s.afterEach) await s.afterEach()
@@ -166,15 +168,21 @@ export async function runAll(
           /* ignore cleanup errors if test already failed */
         }
         const e = err as Error
-        results.push({
+        pushed = {
           suite: s.name,
           name: t.name,
           ok: false,
           error: e.message || String(err),
           stack: cleanStack(e.stack),
           durationMs: performance.now() - start,
-        })
+        }
       }
+      results.push(pushed)
+      // Per-result callback fires before the progress tick so the UI
+      // can paint a failing-run indicator (e.g. flip the progress bar
+      // to red) the moment a test fails instead of only once runAll
+      // resolves.
+      opts.onResult?.(pushed)
       done++
       opts.onProgress?.(done, total)
       if (delay > 0) await new Promise((r) => setTimeout(r, delay))
diff --git a/src/devtools/tests.ts b/src/devtools/tests.ts
index 87c2ebd..051bfdf 100644
--- a/src/devtools/tests.ts
+++ b/src/devtools/tests.ts
@@ -36,6 +36,7 @@ import IconButton from '@/components/ui/IconButton.vue'
 import Toast from '@/components/ui/Toast.vue'
 import PropertiesPanel from '@/components/PropertiesPanel.vue'
 import ClipartDrawer from '@/components/ClipartDrawer.vue'
+import { vTooltip } from '@/directives/tooltip'
 import { expect, suite, test } from './testRunner'
 
 interface MountedHandle {
@@ -88,6 +89,11 @@ function mountComponent(
       return h(component, props, slots)
     },
   })
+  // Register the same global directives the real app registers in
+  // main.ts — without this, anything using `v-tooltip` (IconButton,
+  // the toolbar buttons, …) no-ops inside the test harness because
+  // each `mountComponent` spins up an isolated app instance.
+  app.directive('tooltip', vTooltip)
   app.mount(host)
   return {
     host,
@@ -319,6 +325,68 @@ export function registerAllTests(): void {
       expect(dup.time).toBeGreaterThan(1)
     })
 
+    test('duplicateKeyframeAt copies props + easing + hold to an explicit time', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Src', width: 50, height: 50, fill: '#abcdef' })
+      const l = s.addLayer(a.id)!
+      s.upsertKeyframe(l.id, 1, { x: 123, y: 45 })
+      const src = l.keyframes.find((k) => Math.abs(k.time - 1) < 1e-6)!
+      src.easing = 'easeInOut'
+      s.setKeyframeHold(l.id, src.id, true)
+
+      const newId = s.duplicateKeyframeAt(l.id, src.id, 3)
+      expect(newId).toBeTruthy()
+      const dup = l.keyframes.find((k) => k.id === newId)!
+      expect(dup.time).toBe(3)
+      expect(dup.props.x).toBe(123)
+      expect(dup.props.y).toBe(45)
+      expect(dup.easing).toBe('easeInOut')
+      expect(dup.hold).toBe(true)
+      // props must be a clone — mutating the duplicate must not touch the source.
+      dup.props.x = 999
+      expect(src.props.x).toBe(123)
+    })
+
+    test('duplicateKeyframeAt refuses to overwrite an existing keyframe', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Col', width: 10, height: 10, fill: '#fff' })
+      const l = s.addLayer(a.id)!
+      s.upsertKeyframe(l.id, 1, { x: 10 })
+      s.upsertKeyframe(l.id, 2, { x: 20 })
+      const src = l.keyframes.find((k) => Math.abs(k.time - 1) < 1e-6)!
+      const countBefore = l.keyframes.length
+      const newId = s.duplicateKeyframeAt(l.id, src.id, 2)
+      expect(newId).toBe(null)
+      expect(l.keyframes.length).toBe(countBefore)
+    })
+
+    test('duplicateKeyframeAt returns null for unknown layer or keyframe ids', () => {
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'X', width: 10, height: 10, fill: '#fff' })
+      const l = s.addLayer(a.id)!
+      s.upsertKeyframe(l.id, 1, { x: 10 })
+      const src = l.keyframes.find((k) => Math.abs(k.time - 1) < 1e-6)!
+      expect(s.duplicateKeyframeAt('nope-layer', src.id, 2)).toBe(null)
+      expect(s.duplicateKeyframeAt(l.id, 'nope-kf', 2)).toBe(null)
+    })
+
+    test('duplicateKeyframeAt targets the source keyframe\'s own track (position vs main)', () => {
+      // Separated layers have independent main / position / rotation
+      // arrays. The duplicate must land in the same array the source
+      // came from, not accidentally jump to another.
+      const s = makeFreshStore()
+      const a = s.addAsset({ kind: 'rect', name: 'Sep', width: 10, height: 10, fill: '#fff' })
+      const l = s.addLayer(a.id)!
+      s.setLayerSeparated(l.id, true)
+      s.upsertKeyframe(l.id, 1, { x: 50, y: 60 })
+      const posKf = l.positionKeyframes!.find((k) => Math.abs(k.time - 1) < 1e-6)!
+      s.duplicateKeyframeAt(l.id, posKf.id, 2)
+      const dup = l.positionKeyframes!.find((k) => Math.abs(k.time - 2) < 1e-6)
+      expect(dup).toBeTruthy()
+      // Nothing should have been added to the main array.
+      expect(l.keyframes.some((k) => Math.abs(k.time - 2) < 1e-6)).toBe(false)
+    })
+
     test('setKeyframeHold toggles hold flag', async () => {
       const s = makeFreshStore()
       const a = s.addAsset({ kind: 'rect', name: 'Hold', width: 50, height: 50, fill: '#ddaa44' })
@@ -1085,11 +1153,15 @@ export function registerAllTests(): void {
 
   suite('ui — IconButton', () => {
     test('renders a button element', async () => {
+      // IconButton now uses the custom v-tooltip directive instead of
+      // the native `title` attribute. The directive still sets an
+      // `aria-label` so screen readers get the tooltip text — that's
+      // the stable contract this test pins.
       const handle = mountComponent(IconButton, { title: 'hi' })
       await nextTick()
       const btn = handle.host.querySelector('button')
       expect(btn).toBeTruthy()
-      expect(btn!.getAttribute('title')).toBe('hi')
+      expect(btn!.getAttribute('aria-label')).toBe('hi')
       handle.unmount()
     })
 
@@ -1772,8 +1844,11 @@ export function registerAllTests(): void {
     })
 
     test('topbar has save & recents buttons', () => {
-      const saveBtn = document.querySelector('button[title^="Save project"]')
-      const recentsBtn = document.querySelector('button[title="Recent projects"]')
+      // Tooltips live in `aria-label` now (custom v-tooltip directive
+      // replaced the native `title` attribute on every interactive
+      // element).
+      const saveBtn = document.querySelector('button[aria-label^="Save project"]')
+      const recentsBtn = document.querySelector('button[aria-label="Recent projects"]')
       expect(saveBtn).toBeTruthy()
       expect(recentsBtn).toBeTruthy()
     })
@@ -1798,7 +1873,7 @@ export function registerAllTests(): void {
     })
 
     test('timeline has add-group button', () => {
-      const btn = document.querySelector('button[title="Create a new track group"]')
+      const btn = document.querySelector('button[aria-label="Create a new track group"]')
       expect(btn).toBeTruthy()
     })
   })
@@ -2710,6 +2785,45 @@ export function registerAllTests(): void {
     })
   })
 
+  suite('interface prefs — shared composables', () => {
+    // Regression: the tooltip + asset-thumbs prefs are shared module-
+    // level refs so the Settings dialog and the sidebar/timeline
+    // toolbars stay in lock-step. The same refs also have to persist
+    // to localStorage. The thumbs pref was originally an inline ref
+    // inside AssetSidebar.vue — the settings tab couldn't change it
+    // without this extraction.
+
+    test('useTooltipPref persists to localStorage and shares the ref', async () => {
+      const { useTooltipPref } = await import('@/composables/useTooltipPref')
+      const a = useTooltipPref()
+      const b = useTooltipPref()
+      expect(a.enabled).toBe(b.enabled) // same ref instance
+      const initial = a.enabled.value
+      a.enabled.value = !initial
+      await nextTick()
+      expect(localStorage.getItem('ruwio:tooltipsEnabled')).toBe(initial ? '0' : '1')
+      // Both consumers see the flip because the ref is shared.
+      expect(b.enabled.value).toBe(!initial)
+      // Restore so other tests don't inherit a toggled state.
+      a.enabled.value = initial
+      await nextTick()
+    })
+
+    test('useAssetThumbsPref persists to localStorage and shares the ref', async () => {
+      const { useAssetThumbsPref } = await import('@/composables/useAssetThumbsPref')
+      const a = useAssetThumbsPref()
+      const b = useAssetThumbsPref()
+      expect(a.enabled).toBe(b.enabled)
+      const initial = a.enabled.value
+      a.enabled.value = !initial
+      await nextTick()
+      expect(localStorage.getItem('animatr.assetThumbs')).toBe(String(!initial))
+      expect(b.enabled.value).toBe(!initial)
+      a.enabled.value = initial
+      await nextTick()
+    })
+  })
+
   suite('clipart drawer — grid pre-layout', () => {
     // Regression: the drawer's `.drawer-panel` used to be `v-if`-gated on
     // clipart.open and given `flex: 1; min-width: 0` — which meant the
diff --git a/src/directives/tooltip.ts b/src/directives/tooltip.ts
new file mode 100644
index 0000000..aa43e74
--- /dev/null
+++ b/src/directives/tooltip.ts
@@ -0,0 +1,173 @@
+import { ref, type Directive, type DirectiveBinding } from 'vue'
+import { useTooltipPref } from '@/composables/useTooltipPref'
+
+/**
+ * Custom tooltip system. `v-tooltip` replaces the native `title` attribute
+ * with a styled floating panel that's positioned over its target. Accepts
+ * either a plain string (label only) or an object with both a `label` and
+ * a longer `help` line for inline documentation.
+ *
+ *   <button v-tooltip="'Save'">…</button>
+ *   <button v-tooltip="{ label: 'Crop', help: 'Clips layers to canvas' }">…</button>
+ *
+ * TooltipHost.vue renders the currently-active tooltip from `activeTooltip`.
+ * When the user disables tooltips in Settings → Interface, the directive
+ * silently no-ops (show is never called) — but `aria-label` stays set so
+ * screen readers still announce the label.
+ */
+
+export interface TooltipContent {
+  label: string
+  help?: string
+}
+
+export interface ActiveTooltip {
+  target: HTMLElement
+  content: TooltipContent
+}
+
+export const activeTooltip = ref<ActiveTooltip | null>(null)
+
+const SHOW_DELAY_MS = 350
+let showTimer: ReturnType<typeof setTimeout> | null = null
+let pendingTarget: HTMLElement | null = null
+
+function cancelShow() {
+  if (showTimer) {
+    clearTimeout(showTimer)
+    showTimer = null
+  }
+  pendingTarget = null
+}
+
+function scheduleShow(target: HTMLElement, content: TooltipContent) {
+  cancelShow()
+  pendingTarget = target
+  showTimer = setTimeout(() => {
+    showTimer = null
+    pendingTarget = null
+    activeTooltip.value = { target, content }
+  }, SHOW_DELAY_MS)
+}
+
+function hideIfFor(target: HTMLElement) {
+  if (pendingTarget === target) cancelShow()
+  if (activeTooltip.value?.target === target) activeTooltip.value = null
+}
+
+function hideAll() {
+  cancelShow()
+  activeTooltip.value = null
+}
+
+function normalize(value: unknown): TooltipContent | null {
+  if (value == null) return null
+  if (typeof value === 'string') {
+    const trimmed = value.trim()
+    return trimmed ? { label: trimmed } : null
+  }
+  if (typeof value === 'object') {
+    const label = (value as TooltipContent).label
+    if (typeof label !== 'string' || !label.trim()) return null
+    const help = (value as TooltipContent).help
+    return {
+      label: label.trim(),
+      help: typeof help === 'string' && help.trim() ? help.trim() : undefined,
+    }
+  }
+  return null
+}
+
+interface AttachedState {
+  content: TooltipContent | null
+  onEnter: (e: Event) => void
+  onLeave: (e: Event) => void
+  onFocus: (e: Event) => void
+  onBlur: (e: Event) => void
+  onPointerDown: (e: Event) => void
+}
+
+const attached = new WeakMap<HTMLElement, AttachedState>()
+const { enabled } = useTooltipPref()
+
+function attach(el: HTMLElement, content: TooltipContent | null) {
+  const state: AttachedState = {
+    content,
+    onEnter: () => {
+      if (!enabled.value) return
+      if (!state.content) return
+      scheduleShow(el, state.content)
+    },
+    onLeave: () => hideIfFor(el),
+    onFocus: () => {
+      if (!enabled.value) return
+      if (!state.content) return
+      // Keyboard focus should show the tooltip immediately — the user
+      // already indicated intent by tabbing to this control.
+      activeTooltip.value = { target: el, content: state.content }
+    },
+    onBlur: () => hideIfFor(el),
+    // A pointerdown on the element (click, drag-start, etc.) is a
+    // clear "I'm using this, stop hovering" signal — dismiss.
+    onPointerDown: () => hideIfFor(el),
+  }
+  el.addEventListener('mouseenter', state.onEnter)
+  el.addEventListener('mouseleave', state.onLeave)
+  el.addEventListener('focusin', state.onFocus)
+  el.addEventListener('focusout', state.onBlur)
+  el.addEventListener('pointerdown', state.onPointerDown)
+  attached.set(el, state)
+  syncAria(el, content)
+}
+
+function syncAria(el: HTMLElement, content: TooltipContent | null) {
+  if (content) el.setAttribute('aria-label', content.label)
+  else el.removeAttribute('aria-label')
+}
+
+function update(el: HTMLElement, content: TooltipContent | null) {
+  const state = attached.get(el)
+  if (!state) return attach(el, content)
+  state.content = content
+  syncAria(el, content)
+  // If this element is currently showing, update live.
+  if (activeTooltip.value?.target === el) {
+    if (content) activeTooltip.value = { target: el, content }
+    else activeTooltip.value = null
+  }
+}
+
+function detach(el: HTMLElement) {
+  const state = attached.get(el)
+  if (!state) return
+  el.removeEventListener('mouseenter', state.onEnter)
+  el.removeEventListener('mouseleave', state.onLeave)
+  el.removeEventListener('focusin', state.onFocus)
+  el.removeEventListener('focusout', state.onBlur)
+  el.removeEventListener('pointerdown', state.onPointerDown)
+  attached.delete(el)
+  hideIfFor(el)
+}
+
+export const vTooltip: Directive<HTMLElement, unknown> = {
+  mounted(el, binding: DirectiveBinding<unknown>) {
+    attach(el, normalize(binding.value))
+  },
+  updated(el, binding: DirectiveBinding<unknown>) {
+    update(el, normalize(binding.value))
+  },
+  beforeUnmount(el) {
+    detach(el)
+  },
+}
+
+export function hideActiveTooltip() {
+  hideAll()
+}
+
+// Dismiss the active tooltip whenever the window loses focus or the page
+// scrolls — both can leave a stale floating panel behind.
+if (typeof window !== 'undefined') {
+  window.addEventListener('blur', hideAll)
+  window.addEventListener('scroll', hideAll, true)
+}
diff --git a/src/i18n/messages.ts b/src/i18n/messages.ts
index 0752a8b..246e5fd 100644
--- a/src/i18n/messages.ts
+++ b/src/i18n/messages.ts
@@ -22,12 +22,18 @@ export const en = {
       defaultName: 'Project {date}',
     },
     renameProject: 'Rename project',
+    renameProjectHelp:
+      'Click to rename. Saved projects update in place; new names apply at the next save.',
     renameProjectDialog: {
       title: 'Rename project',
       message: 'Choose a new name for this project.',
       confirm: 'Rename',
     },
     untitledProject: 'Untitled project',
+    saveProjectDirtyHelp:
+      'Your project has unsaved changes. Ctrl/Cmd+S writes them to browser storage.',
+    exportHelp:
+      'Save as runtime script, HTML, or video. MP4 needs the render server; WebM records in real time in the browser.',
     replaceDialog: {
       title: 'Replace project?',
       message:
@@ -235,6 +241,7 @@ export const en = {
     renameMarkerRetry: 'Try again',
     stillFrameTooltip: 'Still frame {time} — holds until the next keyframe',
     keyframeTooltip: 'Keyframe {time} — drag to move, right-click for options',
+    addKfFromPrev: 'Fill with nearest keyframe — copies the previous state\'s pose into this slot',
     trimTooltip: '{name} · {duration}s{trims} · Drag edges to trim, double-click to open',
     trimStart: 'Start -{value}s',
     trimEnd: 'End -{value}s',
@@ -250,6 +257,8 @@ export const en = {
     color: 'Color',
     lock: 'Lock',
     unlock: 'Unlock',
+    hideInEditor: 'Hide in editor (still exported)',
+    showInEditor: 'Show in editor',
     deleteLayer: 'Delete layer',
     deleteClipTrack: 'Delete clip track',
     deleteScriptTrack: 'Delete script track',
@@ -290,10 +299,20 @@ export const en = {
     title: 'Settings',
     tab: {
       document: 'Document',
-      timeline: 'Timeline',
       clipart: 'Clipart',
+      interface: 'Interface',
       theme: 'UI Theme',
     },
+    timing: 'Timing',
+    tooltipsLabel: 'Show tooltips',
+    tooltipsDesc:
+      'Floating help text when you hover over a button or control. Turn off if you know the app well and find them distracting — screen readers still get the label.',
+    showLockedLabel: 'Show locked tracks',
+    showLockedDesc:
+      'When off, locked tracks disappear from the timeline and the stage. Use to focus on the layers you\'re still editing. Also togglable from the timeline toolbar.',
+    assetThumbsLabel: 'Asset thumbnails',
+    assetThumbsDesc:
+      'Render small previews in the Assets / Clips / Buttons panels. Turn off for a compact list when working with lots of items.',
     bgVideoLabel: 'Video',
     bgVideoNone: 'No background video',
     bgVideoPickFile: 'Pick video file…',
@@ -346,6 +365,9 @@ export const en = {
     back: 'Back',
     labelWebm: 'Rendering WebM (browser, realtime)…',
     labelMp4: 'Rendering MP4 (server)…',
+    skipHidden: 'Skip hidden tracks',
+    skipHiddenDesc: 'Drop layers toggled off in the editor from every format below.',
+    skipHiddenNone: 'No editor-hidden tracks in the scene.',
   },
 
   tests: {
@@ -389,12 +411,13 @@ export const en = {
   },
 
   about: {
-    openTooltip: 'About Animatr',
+    openTooltip: 'About RUWIO',
     title: 'About {name}',
     tagline: 'A timeline-based animation editor that runs in your browser.',
     versionLabel: 'Version',
     buildLabel: 'Build',
     close: 'Close',
+    credit: 'Made with love by Torsten Hoeltge',
     shortcutsHeading: 'Shortcuts',
     shortcut: {
       undo: 'Ctrl+Z',
diff --git a/src/lib/render.ts b/src/lib/render.ts
index ba00645..e001f76 100644
--- a/src/lib/render.ts
+++ b/src/lib/render.ts
@@ -136,6 +136,12 @@ function drawLayers(
   for (let i = layers.length - 1; i >= 0; i--) {
     const layer = layers[i]
     if (!layer.visible) continue
+    // Editor-only hide: respected by the mask-preview overlay and
+    // sidebar thumbnails so toggling a layer off really removes it
+    // from the in-editor render. The runtime in exportPlayer.ts does
+    // NOT read this flag, so fullscreen preview and exports keep
+    // rendering the layer.
+    if (layer.editorHidden) continue
     if (!alwaysActive && !isLayerActiveAt(layer, time)) continue
     const asset = assetMap.get(layer.assetId)
     if (!asset) continue
diff --git a/src/main.ts b/src/main.ts
index a73c994..2c57109 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,8 +4,10 @@ import VueKonva from 'vue-konva'
 import App from './App.vue'
 import './composables/useTheme'
 import './styles/global.css'
+import { vTooltip } from './directives/tooltip'
 
 const app = createApp(App)
 app.use(createPinia())
 app.use(VueKonva)
+app.directive('tooltip', vTooltip)
 app.mount('#app')
diff --git a/src/stores/scene.ts b/src/stores/scene.ts
index 4793f9c..07fac85 100644
--- a/src/stores/scene.ts
+++ b/src/stores/scene.ts
@@ -641,6 +641,37 @@ export const useSceneStore = defineStore('scene', {
       shift(layer.keyframes)
       shift(layer.positionKeyframes)
     },
+    /** Copy the referenced keyframe to a specific time. Carries easing,
+     *  hold, and control-point handles along; refuses if the target
+     *  time is already occupied in the same array. Used by the
+     *  button-editor's + buttons to fill empty state slots with the
+     *  previous (or next) keyframe's values. */
+    duplicateKeyframeAt(
+      layerId: string,
+      keyframeId: string,
+      targetTime: number,
+    ): string | null {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return null
+      const found = findKf(layer, keyframeId)
+      if (!found) return null
+      const { kf: source, arr } = found
+      if (arr.some((k) => Math.abs(k.time - targetTime) < KEYFRAME_EPSILON)) return null
+      const newKf: Keyframe = {
+        id: uid(),
+        time: targetTime,
+        props: { ...source.props },
+        easing: source.easing,
+      }
+      if (source.hold) newKf.hold = true
+      if (source.ctrlX !== undefined && source.ctrlY !== undefined) {
+        newKf.ctrlX = source.ctrlX
+        newKf.ctrlY = source.ctrlY
+      }
+      arr.push(newKf)
+      sortKfs(arr)
+      return newKf.id
+    },
     duplicateKeyframe(layerId: string, keyframeId: string): string | null {
       const layer = this.activeLayers.find((l) => l.id === layerId)
       if (!layer) return null
@@ -1225,6 +1256,12 @@ export const useSceneStore = defineStore('scene', {
         else delete group.locked
       }
     },
+    setLayerEditorHidden(layerId: string, hidden: boolean) {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return
+      if (hidden) layer.editorHidden = true
+      else delete layer.editorHidden
+    },
 
     // -------- Markers --------------------------------------------------
 
diff --git a/src/types/scene.ts b/src/types/scene.ts
index 032c5ec..b659079 100644
--- a/src/types/scene.ts
+++ b/src/types/scene.ts
@@ -166,6 +166,15 @@ export interface Layer {
    */
   colorOverridden?: boolean
   locked?: boolean
+  /**
+   * Editor-only hide. Skipped by the Konva stage and the in-editor
+   * mask-preview / thumbnail canvas paths, but NOT by the export
+   * runtime — a hidden layer still shows up in fullscreen preview,
+   * exports, and the rendered server output. Lets the user mute a
+   * track temporarily without touching `visible`, which IS honoured
+   * by every render path.
+   */
+  editorHidden?: boolean
   isMask?: boolean
   maskMode?: MaskMode
   /** Only meaningful when `assetId` points to a ButtonAsset: fires on click. */
diff --git a/src/version.ts b/src/version.ts
index 004d6d9..11c9249 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1,2 +1,2 @@
-export const APP_VERSION = '0.8.2'
+export const APP_VERSION = '0.8.3'
 export const APP_NAME = 'RUWIO'
diff --git a/todo b/todo
index 6ba40ea..53bb42d 100644
--- a/todo
+++ b/todo
@@ -136,14 +136,26 @@ die inline hilfe texte in den settings sind zu klein. das kann man nicht lesen
 
 warum ist eigentlich still frame easing disabled? man muss doch zu einem still-frame hin easen können. verstehe den grund nicht
 
-
-
-
-
-
-
  ich würde an dieser stelle mal ein paar regression-tests hinzufügen und dann committen
 
 wenn man den leeren teil des content-views zieht (außerhalb der canvas constraints) muss canvas move auch ohne control key gehen
 
-export dateien heißen noch animatr. wir haben in RUWIO umbenannt
\ No newline at end of file
+export dateien heißen noch animatr. wir haben in RUWIO umbenannt
+
+die tooltips sind hässlich. bau ein schöneres custom tooltip system ein. nimm dir zeit und such alle tooltips raus die wir haben. wenn es sinnvoll ist eine funktion besser zu erklären kann ein tooltip auch eine inline hilfe sein. das muss man unter settings -> interface abstellen können
+
+
+
+----
+
+
+buttons müssen einen pointer cursor anzeigen
+
+die track-lanes der nicht aktiven traks zeigen durchsichtige keyframes. das muss genauso aussehen wie bei den aktiven - nur etwas ausgefaded
+
+
+bei den button timelines zeigen wir + icons an auf leeren frames. da wird dann der vorrige hin dupliziert
+
+element auf gruppe ziehen muss auch in der track label spalte gehen
+
+der bereich wo man den timeline-bereich größer ziehen kann ist nur noch 1px. da hatten wir 15px vorher. man trifft diesen anfasser jetzt nicht mehr
\ No newline at end of file