0.4.0: clipart drawer, animation paths, bezier keyframes

- Clipart library: new left-edge drawer (5px idle, expands on hover,
  400px when open). User picks a local folder via the File System Access
  API in settings; directory handle is persisted in IndexedDB so the
  library survives reloads. Dragging a thumbnail onto the stage creates
  an image asset + layer at the drop point.
- Animation paths on the stage: selecting a keyframe draws the tween
  path from the previous keyframe to the selected one as a solid
  polyline with per-frame draggable dots. All other segments on the
  same position-track render as dashed ghost lines so the full curve
  progression is visible.
- Path dots grow on hover (2.5 → 6 px), show a grab cursor, and have a
  wider hit area so they're easier to grab.
- Bezier-curved position interpolation: keyframes gain optional
  ctrlX/ctrlY fields. When set, x/y tween along a quadratic bezier
  through the control point instead of a straight line. Dragging a
  path dot solves for the control so the curve passes through the
  drag point at its frame progress. Mirrored across all four render
  pipelines.
- Tests: new suites for polygon actions, freeform drawing lifecycle,
  polygon + stroke rendering (15 new tests). Fixed the mask-render
  tests that relied on a default-transparent canvas background.

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

src/components/CanvasStage.vue

@@ -4,7 +4,8 @@ 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 { loadImage } from '@/lib/fileLoader'
+import { isSvgFile, loadImage, parseSvgDimensions, readAsDataUrl } from '@/lib/fileLoader'
+import { useClipartStore } from '@/stores/clipart'
 import { drawSceneFrame, loadSceneImages } from '@/lib/render'
 import type { AnimatableProps, Asset, Layer } from '@/types/scene'
 import { t } from '@/i18n'
@@ -12,6 +13,7 @@ import { useKfSelection } from '@/composables/useKfSelection'
 import { expandedTrackOrder } from '@/lib/sceneOrder'
 
 const store = useSceneStore()
+const clipart = useClipartStore()
 const { selectedKfs } = useKfSelection()
 
 const container = ref<HTMLDivElement | null>(null)
@@ -821,6 +823,197 @@ function handleTransform(e: Konva.KonvaEventObject<Event>) {
   updateLivePose(node, id)
 }
 
+interface PathFrame {
+  index: number
+  x: number
+  y: number
+  u: number
+}
+
+interface PathSegment {
+  flat: number[]
+}
+
+interface PathOverlay {
+  layerId: string
+  activeKeyframeId: string | null
+  ghostSegments: PathSegment[]
+  activeFrames: PathFrame[]
+}
+
+function sampleSegment(layer: Layer, from: number, to: number, fps: number): number[] {
+  const dt = to - from
+  if (dt <= 0) return []
+  const n = Math.max(2, Math.min(240, Math.round(dt * fps)))
+  const out: number[] = []
+  for (let i = 0; i <= n; i++) {
+    const time = from + (i / n) * dt
+    const s = sampleLayer(layer, time)
+    out.push(s.x, s.y)
+  }
+  return out
+}
+
+const animationPath = computed<PathOverlay | null>(() => {
+  const sel = selectedKfs.value
+  if (sel.length === 0) return null
+  const first = sel[0]
+  if (first.kind === 'rotation') return null
+  const layer = store.activeLayers.find((l) => l.id === first.layerId)
+  if (!layer) return null
+  const arr = first.kind === 'position' ? layer.positionKeyframes : layer.keyframes
+  if (!arr) return null
+  const sorted = [...arr].sort((a, b) => a.time - b.time)
+  const idx = sorted.findIndex((k) => k.id === first.keyframeId)
+  if (idx < 0) return null
+  const fps = store.scene.fps || 60
+
+  const ghostSegments: PathSegment[] = []
+  // All segments between consecutive keyframes become ghost segments,
+  // except the one leading to the selected keyframe which gets interactive dots.
+  let activeFrames: PathFrame[] = []
+  let activeKeyframeId: string | null = null
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i]
+    const b = sorted[i + 1]
+    const dt = b.time - a.time
+    if (dt <= 0) continue
+    if (b.id === first.keyframeId) {
+      const n = Math.max(2, Math.min(240, Math.round(dt * fps)))
+      const frames: PathFrame[] = []
+      for (let k = 0; k <= n; k++) {
+        const u = k / n
+        const time = a.time + u * dt
+        const s = sampleLayer(layer, time)
+        frames.push({ index: k, x: s.x, y: s.y, u })
+      }
+      activeFrames = frames
+      activeKeyframeId = b.id
+    } else {
+      const flat = sampleSegment(layer, a.time, b.time, fps)
+      if (flat.length >= 4) ghostSegments.push({ flat })
+    }
+  }
+  if (!ghostSegments.length && activeFrames.length === 0) return null
+  return {
+    layerId: layer.id,
+    activeKeyframeId,
+    ghostSegments,
+    activeFrames,
+  }
+})
+
+const animationGhostSegments = computed(() => {
+  const path = animationPath.value
+  if (!path) return []
+  return path.ghostSegments.map((seg, i) => ({
+    key: `gs-${i}`,
+    config: {
+      points: seg.flat,
+      stroke: '#6ea8ff',
+      strokeWidth: 1 / zoom.value,
+      strokeScaleEnabled: false,
+      listening: false,
+      lineCap: 'round',
+      lineJoin: 'round',
+      opacity: 0.35,
+      dash: [4 / zoom.value, 3 / zoom.value],
+    },
+  }))
+})
+
+const animationPathLineConfig = computed(() => {
+  const path = animationPath.value
+  if (!path || path.activeFrames.length < 2) return null
+  const flat: number[] = []
+  for (const f of path.activeFrames) flat.push(f.x, f.y)
+  return {
+    points: flat,
+    stroke: '#6ea8ff',
+    strokeWidth: 1.25 / zoom.value,
+    strokeScaleEnabled: false,
+    listening: false,
+    lineCap: 'round',
+    lineJoin: 'round',
+  }
+})
+
+const animationPathDots = computed(() => {
+  const path = animationPath.value
+  if (!path || !path.activeKeyframeId) return []
+  return path.activeFrames.map((f) => ({
+    key: `pf-${path.activeKeyframeId}-${f.index}`,
+    frameIndex: f.index,
+    x: f.x,
+    y: f.y,
+    isEnd: f.index === 0 || f.index === path.activeFrames.length - 1,
+  }))
+})
+
+const hoveredPathDot = ref<number | null>(null)
+
+function animationDotConfig(d: { x: number; y: number; isEnd: boolean; frameIndex: number }) {
+  const hovered = !d.isEnd && hoveredPathDot.value === d.frameIndex
+  const baseRadius = d.isEnd ? 4 : 2.5
+  const radius = hovered ? 6 : baseRadius
+  return {
+    x: d.x,
+    y: d.y,
+    radius: radius / zoom.value,
+    hitStrokeWidth: 10 / zoom.value,
+    fill: d.isEnd ? '#6ea8ff' : hovered ? '#6ea8ff' : '#ffffff',
+    stroke: '#6ea8ff',
+    strokeWidth: (hovered ? 1.5 : 1) / zoom.value,
+    strokeScaleEnabled: false,
+    draggable: !d.isEnd,
+    name: 'path-frame-dot',
+  }
+}
+
+function onPathDotMouseEnter(frameIndex: number, isEnd: boolean) {
+  if (isEnd) return
+  hoveredPathDot.value = frameIndex
+  const stage = stageRef.value?.getStage()
+  const cont = stage?.container()
+  if (cont) cont.style.cursor = 'grab'
+}
+
+function onPathDotMouseLeave() {
+  hoveredPathDot.value = null
+  const stage = stageRef.value?.getStage()
+  const cont = stage?.container()
+  if (cont) cont.style.cursor = ''
+}
+
+function onPathDotDragMove(e: Konva.KonvaEventObject<DragEvent>, frameIndex: number) {
+  const path = animationPath.value
+  if (!path || !path.activeKeyframeId) return
+  const node = e.target
+  const wx = node.x()
+  const wy = node.y()
+  const total = path.activeFrames.length - 1
+  if (total <= 0) return
+  const uRaw = frameIndex / total
+  if (uRaw <= 0 || uRaw >= 1) return
+  const layer = store.activeLayers.find((l) => l.id === path.layerId)
+  if (!layer) return
+  const arr = selectedKfs.value[0]?.kind === 'position'
+    ? layer.positionKeyframes
+    : layer.keyframes
+  const kf = arr?.find((k) => k.id === path.activeKeyframeId)
+  if (!kf) return
+  const easing = kf.easing
+  const t = applyEasing(uRaw, easing)
+  store.setKeyframeControlFromPoint(path.layerId, path.activeKeyframeId, t, wx, wy)
+}
+
+function applyEasing(t: number, easing: string): number {
+  if (easing === 'easeIn') return t * t
+  if (easing === 'easeOut') return 1 - (1 - t) ** 2
+  if (easing === 'easeInOut') return t < 0.5 ? 2 * t * t : 1 - ((-2 * t + 2) ** 2) / 2
+  return t
+}
+
 const drawingPreview = ref<{ x: number; y: number } | null>(null)
 
 function pointerToWorld(e: Konva.KonvaEventObject<MouseEvent>) {
@@ -873,6 +1066,7 @@ function handleStageMouseDown(e: Konva.KonvaEventObject<MouseEvent>) {
   if (target.findAncestor?.('.pivot-handle')) return
   if (target.findAncestor?.('.rotation-handle')) return
   if (target.name?.() === 'vertex-handle' || target.findAncestor?.('.vertex-handle')) return
+  if (target.name?.() === 'path-frame-dot') return
   if (target === target.getStage()) {
     store.selectLayer(null)
     return
@@ -1252,21 +1446,68 @@ function onContainerPointerUp(e: PointerEvent) {
 
 function onContainerDragOver(e: DragEvent) {
   if (!e.dataTransfer) return
-  if (!e.dataTransfer.types.includes('application/x-animatr-asset')) return
+  const types = e.dataTransfer.types
+  if (
+    !types.includes('application/x-animatr-asset') &&
+    !types.includes('application/x-animatr-clipart')
+  )
+    return
   e.preventDefault()
   e.dataTransfer.dropEffect = 'copy'
 }
 
+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 })
+  }
+}
+
 function onContainerDrop(e: DragEvent) {
-  const assetId = e.dataTransfer?.getData('application/x-animatr-asset')
-  if (!assetId) return
-  e.preventDefault()
   const rect = container.value?.getBoundingClientRect()
   if (!rect) return
   const sx = e.clientX - rect.left
   const sy = e.clientY - rect.top
   const worldX = (sx - viewX.value) / zoom.value
   const worldY = (sy - viewY.value) / zoom.value
+
+  const clipartIdx = e.dataTransfer?.getData('application/x-animatr-clipart')
+  if (clipartIdx) {
+    e.preventDefault()
+    const idx = Number.parseInt(clipartIdx, 10)
+    const item = Number.isFinite(idx) ? clipart.items[idx] : null
+    if (item) {
+      void importClipartAt(item.file, worldX, worldY)
+    }
+    return
+  }
+
+  const assetId = e.dataTransfer?.getData('application/x-animatr-asset')
+  if (!assetId) return
+  e.preventDefault()
   const layer = store.addLayer(assetId)
   if (layer) {
     store.upsertKeyframe(layer.id, 0, { x: worldX, y: worldY })
@@ -1495,6 +1736,21 @@ onBeforeUnmount(() => {
             @dragmove="(e: Konva.KonvaEventObject<DragEvent>) => onVertexDragMove(e, h.index)"
             @dragend="(e: Konva.KonvaEventObject<DragEvent>) => onVertexDragEnd(e, h.index)"
           />
+          <v-line
+            v-for="g in animationGhostSegments"
+            :key="g.key"
+            :config="g.config"
+          />
+          <v-line v-if="animationPathLineConfig" :config="animationPathLineConfig" />
+          <v-circle
+            v-for="d in animationPathDots"
+            :key="d.key"
+            :config="animationDotConfig(d)"
+            @mouseenter="onPathDotMouseEnter(d.frameIndex, d.isEnd)"
+            @mouseleave="onPathDotMouseLeave"
+            @dragmove="(e: Konva.KonvaEventObject<DragEvent>) => onPathDotDragMove(e, d.frameIndex)"
+            @dragend="(e: Konva.KonvaEventObject<DragEvent>) => onPathDotDragMove(e, d.frameIndex)"
+          />
           <v-line v-if="drawingPreviewConfig" :config="drawingPreviewConfig" />
           <v-circle
             v-for="d in drawingDotsConfig"

src/components/ClipartDrawer.vue

@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+import { PhArrowClockwise, PhCaretLeft, PhCaretRight, PhImagesSquare } from '@phosphor-icons/vue'
+import { useClipartStore } from '@/stores/clipart'
+import { t } from '@/i18n'
+
+const clipart = useClipartStore()
+
+onMounted(() => {
+  clipart.initialize()
+})
+
+onBeforeUnmount(() => {
+  clipart.disposeItems()
+})
+
+function onItemDragStart(e: DragEvent, index: number) {
+  if (!e.dataTransfer) return
+  const item = clipart.items[index]
+  if (!item) return
+  e.dataTransfer.effectAllowed = 'copy'
+  e.dataTransfer.setData('application/x-animatr-clipart', String(index))
+  e.dataTransfer.setData('text/plain', item.name)
+  // Use the actual image as drag ghost
+  const ghost = document.createElement('img')
+  ghost.src = item.url
+  ghost.style.position = 'absolute'
+  ghost.style.top = '-1000px'
+  ghost.style.left = '-1000px'
+  ghost.style.width = '96px'
+  ghost.style.height = '96px'
+  ghost.style.objectFit = 'contain'
+  document.body.appendChild(ghost)
+  try {
+    e.dataTransfer.setDragImage(ghost, 48, 48)
+  } catch {
+    /* ignore */
+  }
+  setTimeout(() => ghost.remove(), 0)
+}
+</script>
+
+<template>
+  <aside class="clipart-drawer" :class="{ open: clipart.open }">
+    <button
+      class="drawer-tab"
+      :title="clipart.open ? t('clipart.close') : t('clipart.open')"
+      @click="clipart.toggle()"
+    >
+      <component :is="clipart.open ? PhCaretLeft : PhCaretRight" :size="14" />
+    </button>
+    <div v-if="clipart.open" class="drawer-panel">
+      <header class="drawer-header">
+        <PhImagesSquare :size="14" class="title-icon" />
+        <h3>{{ t('clipart.title') }}</h3>
+        <button
+          v-if="clipart.handle"
+          class="refresh-btn"
+          :title="t('clipart.refresh')"
+          :disabled="clipart.loading"
+          @click="clipart.refresh()"
+        >
+          <PhArrowClockwise :size="13" />
+        </button>
+      </header>
+      <div v-if="clipart.folderName" class="folder-row">
+        <span class="folder-name">{{ clipart.folderName }}</span>
+        <span class="count">{{ clipart.items.length }}</span>
+      </div>
+      <p v-if="!clipart.supported" class="empty-state">
+        {{ t('clipart.unsupported') }}
+      </p>
+      <p v-else-if="!clipart.handle" class="empty-state">
+        {{ t('clipart.empty') }}
+      </p>
+      <p v-else-if="clipart.error" class="error-state">{{ clipart.error }}</p>
+      <p v-else-if="clipart.loading" class="empty-state">{{ t('clipart.loading') }}</p>
+      <p v-else-if="clipart.items.length === 0" class="empty-state">
+        {{ t('clipart.noFiles') }}
+      </p>
+      <div v-else class="tile-grid">
+        <div
+          v-for="(item, i) in clipart.items"
+          :key="item.name + i"
+          class="tile"
+          :title="item.name"
+          draggable="true"
+          @dragstart="onItemDragStart($event, i)"
+        >
+          <img :src="item.url" :alt="item.name" />
+          <span class="tile-label">{{ item.name }}</span>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.clipart-drawer {
+  display: flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  height: 100%;
+  width: 5px;
+  transition: width 220ms var(--ease);
+  background: var(--border);
+  border-right: 1px solid var(--border);
+  position: relative;
+}
+
+.clipart-drawer:hover {
+  width: 24px;
+  background: var(--panel);
+}
+
+.clipart-drawer.open {
+  width: 424px;
+  background: var(--panel);
+}
+
+.drawer-tab {
+  flex: 0 0 100%;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  writing-mode: vertical-rl;
+  overflow: hidden;
+  transition: background 140ms var(--ease);
+}
+
+.drawer-tab :deep(svg) {
+  opacity: 0;
+  transition: opacity 140ms var(--ease);
+}
+
+.clipart-drawer:hover .drawer-tab :deep(svg),
+.clipart-drawer.open .drawer-tab :deep(svg) {
+  opacity: 1;
+}
+
+.clipart-drawer:hover .drawer-tab {
+  background: var(--panel-alt);
+  color: var(--text);
+}
+
+.clipart-drawer.open .drawer-tab {
+  flex: 0 0 24px;
+  width: 24px;
+  background: var(--panel);
+}
+
+.drawer-panel {
+  flex: 1;
+  min-width: 0;
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.title-icon {
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.drawer-header h3 {
+  flex: 1;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.refresh-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--border);
+  background: transparent;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.refresh-btn:hover:not(:disabled) {
+  color: var(--text);
+  background: var(--panel-alt);
+}
+
+.refresh-btn:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.folder-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 11px;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel-alt);
+}
+
+.folder-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.count {
+  font-variant-numeric: tabular-nums;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--border);
+  color: var(--text-dim-strong);
+  font-size: 10px;
+}
+
+.empty-state {
+  margin: 0;
+  padding: 16px 14px;
+  color: var(--text-dim);
+  font-size: 12px;
+  font-style: italic;
+}
+
+.error-state {
+  margin: 0;
+  padding: 16px 14px;
+  color: var(--danger);
+  font-size: 12px;
+}
+
+.tile-grid {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+  gap: 8px;
+  align-content: start;
+}
+
+.tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  cursor: grab;
+  transition: border-color 140ms var(--ease), background 140ms var(--ease);
+}
+
+.tile:hover {
+  border-color: var(--accent);
+  background: var(--panel-alt);
+}
+
+.tile:active {
+  cursor: grabbing;
+}
+
+.tile img {
+  width: 72px;
+  height: 72px;
+  object-fit: contain;
+  pointer-events: none;
+  user-select: none;
+}
+
+.tile-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/components/DocumentSettings.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { PhClock, PhFrameCorners, PhMoon, PhPalette, PhSun } from '@phosphor-icons/vue'
+import {
+  PhClock,
+  PhFolder,
+  PhFrameCorners,
+  PhMoon,
+  PhPalette,
+  PhSun,
+} from '@phosphor-icons/vue'
 import { useSceneStore } from '@/stores/scene'
+import { useClipartStore } from '@/stores/clipart'
 import { useTheme } from '@/composables/useTheme'
 import type { Theme } from '@/composables/useTheme'
 import { Modal } from '@/components/ui'
@@ -11,13 +19,15 @@ defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
 
 const store = useSceneStore()
+const clipart = useClipartStore()
 const { theme, setTheme } = useTheme()
 
-type TabId = 'document' | 'timeline' | 'theme'
+type TabId = 'document' | 'timeline' | 'clipart' | '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: 'theme', label: t('settings.tab.theme'), icon: PhPalette },
 ]
 
@@ -145,6 +155,41 @@ function applyTheme(t: Theme) {
                 </p>
               </section>
 
+              <section v-else-if="activeTab === 'clipart'">
+                <h3>{{ t('settings.tab.clipart') }}</h3>
+                <div class="clipart-row">
+                  <div class="clipart-label">{{ t('clipart.folderLabel') }}</div>
+                  <div class="clipart-value">
+                    <PhFolder :size="13" />
+                    <span v-if="clipart.folderName" class="clipart-folder-name">
+                      {{ clipart.folderName }}
+                    </span>
+                    <span v-else class="clipart-folder-empty">{{ t('clipart.noFolder') }}</span>
+                  </div>
+                </div>
+                <div class="clipart-actions">
+                  <button
+                    class="primary-btn"
+                    :disabled="!clipart.supported"
+                    @click="clipart.pickFolder()"
+                  >
+                    {{ t('clipart.chooseFolder') }}
+                  </button>
+                  <button
+                    v-if="clipart.handle"
+                    class="ghost-btn"
+                    @click="clipart.clearFolder()"
+                  >
+                    {{ t('clipart.clearFolder') }}
+                  </button>
+                </div>
+                <p v-if="!clipart.supported" class="error-line">
+                  {{ t('clipart.unsupported') }}
+                </p>
+                <p v-if="clipart.error" class="error-line">{{ clipart.error }}</p>
+                <p class="hint">{{ t('clipart.settingsHint') }}</p>
+              </section>
+
               <section v-else-if="activeTab === 'theme'">
                 <h3>{{ t('settings.tab.theme') }}</h3>
                 <div class="theme-grid">
@@ -350,6 +395,90 @@ input[type='number'] {
   margin: 0;
 }
 
+.clipart-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.clipart-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dim);
+}
+
+.clipart-value {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: var(--panel-alt);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  font-size: 12px;
+}
+
+.clipart-folder-name {
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.clipart-folder-empty {
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.clipart-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.primary-btn {
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--accent-text, #fff);
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.primary-btn:hover:not(:disabled) {
+  filter: brightness(1.1);
+}
+
+.primary-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ghost-btn {
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.ghost-btn:hover {
+  background: var(--panel-alt);
+}
+
+.error-line {
+  margin: 0 0 8px;
+  color: var(--danger);
+  font-size: 11px;
+}
+
 .theme-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;