0.8.3: custom tooltips, editor-hide, pack script, settings reshuffle

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>

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;