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/stores/scene.ts

@@ -365,6 +365,57 @@ export const useSceneStore = defineStore('scene', {
       const idx = found.arr.indexOf(found.kf)
       if (idx >= 0) found.arr.splice(idx, 1)
     },
+    setKeyframeControl(layerId: string, keyframeId: string, ctrlX: number, ctrlY: number) {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return
+      const found = findKf(layer, keyframeId)
+      if (!found) return
+      found.kf.ctrlX = ctrlX
+      found.kf.ctrlY = ctrlY
+    },
+    clearKeyframeControl(layerId: string, keyframeId: string) {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return
+      const found = findKf(layer, keyframeId)
+      if (!found) return
+      delete found.kf.ctrlX
+      delete found.kf.ctrlY
+    },
+    // Given a target world point that the curve should pass through at
+    // segment progress `u` (0..1), solve for the quadratic bezier control.
+    setKeyframeControlFromPoint(
+      layerId: string,
+      keyframeId: string,
+      u: number,
+      targetX: number,
+      targetY: number,
+    ) {
+      const layer = this.activeLayers.find((l) => l.id === layerId)
+      if (!layer) return
+      const found = findKf(layer, keyframeId)
+      if (!found) return
+      if (u <= 0 || u >= 1) return
+      // Find the previous keyframe in the same arr
+      const arr = [...found.arr].sort((x, y) => x.time - y.time)
+      const idx = arr.findIndex((k) => k.id === keyframeId)
+      if (idx <= 0) return
+      const prev = arr[idx - 1]
+      const samp = sampleLayer(layer, prev.time)
+      const endSamp = sampleLayer(layer, found.kf.time)
+      const p0x = samp.x
+      const p0y = samp.y
+      const p1x = endSamp.x
+      const p1y = endSamp.y
+      const oneMinus = 1 - u
+      // targetX = oneMinus²*p0x + 2·oneMinus·u·C + u²*p1x
+      // => C = (target - oneMinus²·p0 - u²·p1) / (2·oneMinus·u)
+      const denom = 2 * oneMinus * u
+      if (Math.abs(denom) < 1e-6) return
+      const cx = (targetX - oneMinus * oneMinus * p0x - u * u * p1x) / denom
+      const cy = (targetY - oneMinus * oneMinus * p0y - u * u * p1y) / denom
+      found.kf.ctrlX = cx
+      found.kf.ctrlY = cy
+    },
     setKeyframeEasing(layerId: string, keyframeId: string, easing: Easing) {
       const layer = this.activeLayers.find((l) => l.id === layerId)
       if (!layer) return