0.5.2: paste images, shared import helper, clipart persistence

- Clipboard paste creates an image layer: a document-level paste
  listener detects image items in the clipboard (Strg+V after a
  screenshot, e.g.) and imports them via the shared helper. Skipped
  when focus is in a real text input / textarea / contenteditable.
- Shared importImageFile() helper in fileLoader.ts replaces the
  duplicated image-import logic in AssetSidebar and CanvasStage's
  clipart-drop path. Optional position argument for drop-at-point.
- Clipart folder persistence hardened for reloads:
  - initialize() is now safely re-runnable (no-ops only once a handle
    is actually loaded, tolerates refresh failures so the folder name
    survives even if permission isn't auto-granted)
  - App.vue's onMounted kicks off initialize() so it runs regardless
    of whether the drawer component has mounted
  - DocumentSettings re-invokes initialize() each time the modal
    opens — covers app-start races and gives the user gesture needed
    for FS Access permission prompts
  - Opening the drawer refreshes thumbnails when handle is set but
    items are empty, so the user-gesture context restores permission

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

src/components/AssetSidebar.vue

@@ -16,7 +16,7 @@ import {
   PhUploadSimple,
 } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
-import { isSvgFile, loadImage, parseSvgDimensions, readAsDataUrl } from '@/lib/fileLoader'
+import { importImageFile } from '@/lib/fileLoader'
 import type { Asset } from '@/types/scene'
 import { confirmDialog, promptDialog } from '@/components/ui'
 import { t } from '@/i18n'
@@ -161,34 +161,7 @@ async function handleFileSelected(event: Event) {
 }
 
 async function importFile(file: File) {
-  const dataUrl = await readAsDataUrl(file)
-
-  let width = 0
-  let height = 0
-
-  if (isSvgFile(file)) {
-    const text = await file.text()
-    const dims = parseSvgDimensions(text)
-    if (dims) {
-      width = dims.width
-      height = dims.height
-    }
-  }
-
-  if (!width || !height) {
-    const img = await loadImage(dataUrl)
-    width = img.naturalWidth || 300
-    height = img.naturalHeight || 300
-  }
-
-  const asset = store.addAsset({
-    kind: 'image',
-    name: file.name,
-    src: dataUrl,
-    width,
-    height,
-  })
-  store.addLayer(asset.id)
+  await importImageFile(store, file)
 }
 
 function triggerUpload() {

src/components/CanvasStage.vue

@@ -4,7 +4,7 @@ import type Konva from 'konva'
 import { PhCornersIn, PhCrop, PhMaskHappy, PhPencilSimple } from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
 import { sampleLayer } from '@/lib/interpolate'
-import { isSvgFile, loadImage, parseSvgDimensions, readAsDataUrl } from '@/lib/fileLoader'
+import { importImageFile, loadImage } from '@/lib/fileLoader'
 import { useClipartStore } from '@/stores/clipart'
 import { drawSceneFrame, loadSceneImages } from '@/lib/render'
 import type { AnimatableProps, Asset, Layer, Point } from '@/types/scene'
@@ -1834,33 +1834,7 @@ function onContainerDragOver(e: DragEvent) {
 }
 
 async function importClipartAt(file: File, worldX: number, worldY: number) {
-  const dataUrl = await readAsDataUrl(file)
-  let width = 0
-  let height = 0
-  if (isSvgFile(file)) {
-    const text = await file.text()
-    const dims = parseSvgDimensions(text)
-    if (dims) {
-      width = dims.width
-      height = dims.height
-    }
-  }
-  if (!width || !height) {
-    const img = await loadImage(dataUrl)
-    width = img.naturalWidth || 300
-    height = img.naturalHeight || 300
-  }
-  const asset = store.addAsset({
-    kind: 'image',
-    name: file.name,
-    src: dataUrl,
-    width,
-    height,
-  })
-  const layer = store.addLayer(asset.id)
-  if (layer) {
-    store.upsertKeyframe(layer.id, store.playhead, { x: worldX, y: worldY })
-  }
+  await importImageFile(store, file, { position: { x: worldX, y: worldY } })
 }
 
 function onContainerDrop(e: DragEvent) {

src/components/DocumentSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import {
   PhClock,
   PhFolder,
@@ -15,13 +15,23 @@ import type { Theme } from '@/composables/useTheme'
 import { Modal } from '@/components/ui'
 import { t } from '@/i18n'
 
-defineProps<{ modelValue: boolean }>()
+const props = defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
 
 const store = useSceneStore()
 const clipart = useClipartStore()
 const { theme, setTheme } = useTheme()
 
+// 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
+// settings before the drawer ever mounted.
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) void clipart.initialize()
+  },
+)
+
 type TabId = 'document' | 'timeline' | 'clipart' | 'theme'
 
 const tabs: { id: TabId; label: string; icon: typeof PhFrameCorners }[] = [