0.3.0: freeform drawing, stroke properties, polygon edit gestures

- Freeform drawing tool: new sidebar button enters a click-to-draw mode
  that appends points, shows a live ghost preview line, and exits via
  Enter or double-click (near the start point closes the path). Works
  end-to-end through all four render pipelines.
- Polygon authoring gestures: double-click on a path inserts a vertex on
  the nearest edge; double-click on an open polygon's endpoint resumes
  the drawing session from that end, reversing point order when needed.
- Stroke + closed-path properties: all shape types (rect, circle, text,
  polygon) expose stroke color, stroke width, and (for polygons) a
  closed toggle. Fill and stroke each support a "transparent" switch so
  shapes can render as outline-only or fill-only.
- Mask preview no longer inherits the user's stroke — the dashed ghost
  keeps its own outline regardless of stroke-width changes.
- Playhead no longer dims on inactive timeline tracks; only keyframes,
  segments and clip blocks fade.
- Properties panel point-count control for polygons, plus per-keyframe
  points animation that correctly interpolates once a baseline exists.
- Pivot drag hides the rotation handle until release.
- Transformer attach retries on a short timer to avoid races where the
  Konva node hasn't mounted yet when selection changes.

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

src/lib/render.ts

@@ -103,47 +103,86 @@ function drawLayers(
     const shadow = computeShadow(p)
     applyShadow(ctx, shadow)
 
+    const rawStroke = p.stroke ?? ('stroke' in asset ? asset.stroke : undefined)
+    const strokeWidth =
+      p.strokeWidth ?? ('strokeWidth' in asset ? asset.strokeWidth : undefined) ?? 0
+    const stroke = strokeWidth > 0 ? rawStroke || '#000000' : undefined
+    const hasStroke = !!stroke && stroke !== 'transparent' && strokeWidth > 0
+
     if (asset.kind === 'rect') {
       const offX = layer.offsetX ?? asset.width / 2
       const offY = layer.offsetY ?? asset.height / 2
       const fill = p.fill ?? asset.fill
       const blur = p.blur ?? asset.blur ?? 0
-      ctx.fillStyle = fill
       if (blur > 0) ctx.filter = `blur(${blur}px)`
-      ctx.fillRect(-offX, -offY, asset.width, asset.height)
+      if (fill && fill !== 'transparent') {
+        ctx.fillStyle = fill
+        ctx.fillRect(-offX, -offY, asset.width, asset.height)
+      }
+      if (hasStroke) {
+        ctx.strokeStyle = stroke!
+        ctx.lineWidth = strokeWidth
+        ctx.strokeRect(-offX, -offY, asset.width, asset.height)
+      }
       ctx.filter = 'none'
     } else if (asset.kind === 'circle') {
       const offX = layer.offsetX ?? 0
       const offY = layer.offsetY ?? 0
       const fill = p.fill ?? asset.fill
       const blur = p.blur ?? asset.blur ?? 0
-      ctx.fillStyle = fill
       if (blur > 0) ctx.filter = `blur(${blur}px)`
       ctx.beginPath()
       ctx.arc(-offX, -offY, asset.radius, 0, Math.PI * 2)
-      ctx.fill()
+      if (fill && fill !== 'transparent') {
+        ctx.fillStyle = fill
+        ctx.fill()
+      }
+      if (hasStroke) {
+        ctx.strokeStyle = stroke!
+        ctx.lineWidth = strokeWidth
+        ctx.stroke()
+      }
       ctx.filter = 'none'
     } else if (asset.kind === 'text') {
       const offX = layer.offsetX ?? 0
       const offY = layer.offsetY ?? 0
-      ctx.fillStyle = p.fill ?? asset.fill
+      const fill = p.fill ?? asset.fill
       ctx.font = `${asset.fontSize}px sans-serif`
       ctx.textBaseline = 'top'
-      ctx.fillText(asset.text, -offX, -offY)
+      if (fill && fill !== 'transparent') {
+        ctx.fillStyle = fill
+        ctx.fillText(asset.text, -offX, -offY)
+      }
+      if (hasStroke) {
+        ctx.strokeStyle = stroke!
+        ctx.lineWidth = strokeWidth
+        ctx.strokeText(asset.text, -offX, -offY)
+      }
     } else if (asset.kind === 'polygon') {
       const offX = layer.offsetX ?? 0
       const offY = layer.offsetY ?? 0
       const fill = p.fill ?? asset.fill
       const blur = p.blur ?? asset.blur ?? 0
       const pts = p.points ?? asset.points
-      if (pts.length >= 3) {
-        ctx.fillStyle = fill
+      const closed = asset.closed !== false
+      const needed = closed ? 3 : 2
+      if (pts.length >= needed) {
         if (blur > 0) ctx.filter = `blur(${blur}px)`
         ctx.beginPath()
         ctx.moveTo(pts[0].x - offX, pts[0].y - offY)
         for (let j = 1; j < pts.length; j++) ctx.lineTo(pts[j].x - offX, pts[j].y - offY)
-        ctx.closePath()
-        ctx.fill()
+        if (closed) ctx.closePath()
+        if (closed && fill && fill !== 'transparent') {
+          ctx.fillStyle = fill
+          ctx.fill()
+        }
+        if (hasStroke) {
+          ctx.strokeStyle = stroke!
+          ctx.lineWidth = strokeWidth
+          ctx.lineJoin = 'round'
+          ctx.lineCap = 'round'
+          ctx.stroke()
+        }
         ctx.filter = 'none'
       }
     } else if (asset.kind === 'image') {
@@ -201,7 +240,8 @@ function drawMaskShape(
     const offX = layer.offsetX ?? 0
     const offY = layer.offsetY ?? 0
     const pts = p.points ?? asset.points
-    if (pts.length >= 3) {
+    const closed = asset.closed !== false
+    if (closed && pts.length >= 3) {
       ctx.beginPath()
       ctx.moveTo(pts[0].x - offX, pts[0].y - offY)
       for (let j = 1; j < pts.length; j++) ctx.lineTo(pts[j].x - offX, pts[j].y - offY)