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"