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>

server/render.html

@@ -57,6 +57,12 @@
       o.points=lp;
     } else if(b.points) o.points=b.points;
     else if(a.points) o.points=a.points;
+    if(a.stroke && b.stroke) o.stroke=lerpColor(a.stroke,b.stroke,t);
+    else if(b.stroke) o.stroke=b.stroke;
+    else if(a.stroke) o.stroke=a.stroke;
+    if(a.strokeWidth!=null && b.strokeWidth!=null) o.strokeWidth=lerp(a.strokeWidth,b.strokeWidth,t);
+    else if(b.strokeWidth!=null) o.strokeWidth=b.strokeWidth;
+    else if(a.strokeWidth!=null) o.strokeWidth=a.strokeWidth;
     return o;
   }
   function sample(layer,time){
@@ -122,7 +128,8 @@
       var mpX=layer.offsetX!=null?layer.offsetX:0;
       var mpY=layer.offsetY!=null?layer.offsetY:0;
       var mpPts=p.points||asset.points||[];
-      if(mpPts.length>=3){
+      var mpClosed=asset.closed!==false;
+      if(mpClosed && mpPts.length>=3){
         ctxm.beginPath();
         ctxm.moveTo(mpPts[0].x-mpX,mpPts[0].y-mpY);
         for(var mpi=1;mpi<mpPts.length;mpi++) ctxm.lineTo(mpPts[mpi].x-mpX,mpPts[mpi].y-mpY);
@@ -153,42 +160,58 @@
       ctx.shadowOffsetY=Math.sin(sAn)*sDi;
     }
     var fill = p.fill || asset.fill;
+    var lRawStroke = p.stroke || asset.stroke;
+    var lSW = (p.strokeWidth!=null ? p.strokeWidth : (asset.strokeWidth||0));
+    var lStroke = lSW>0 ? (lRawStroke||'#000000') : null;
+    var lHasStroke = !!lStroke && lStroke!=='transparent' && lSW>0;
     if(asset.kind==='rect'){
       var rOffX=layer.offsetX!=null?layer.offsetX:asset.width/2;
       var rOffY=layer.offsetY!=null?layer.offsetY:asset.height/2;
       var rBlur=(p.blur!=null?p.blur:(asset.blur||0));
-      ctx.fillStyle=fill;
       if(rBlur>0) ctx.filter='blur('+rBlur+'px)';
-      ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height);
+      if(fill && fill!=='transparent'){ ctx.fillStyle=fill; ctx.fillRect(-rOffX,-rOffY,asset.width,asset.height); }
+      if(lHasStroke){ ctx.strokeStyle=lStroke; ctx.lineWidth=lSW; ctx.strokeRect(-rOffX,-rOffY,asset.width,asset.height); }
       ctx.filter='none';
     } else if(asset.kind==='circle'){
       var cOffX=layer.offsetX!=null?layer.offsetX:0;
       var cOffY=layer.offsetY!=null?layer.offsetY:0;
       var cBlur=(p.blur!=null?p.blur:(asset.blur||0));
-      ctx.fillStyle=fill;
       if(cBlur>0) ctx.filter='blur('+cBlur+'px)';
-      ctx.beginPath(); ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2); ctx.fill();
+      ctx.beginPath(); ctx.arc(-cOffX,-cOffY,asset.radius,0,Math.PI*2);
+      if(fill && fill!=='transparent'){ ctx.fillStyle=fill; ctx.fill(); }
+      if(lHasStroke){ ctx.strokeStyle=lStroke; ctx.lineWidth=lSW; ctx.stroke(); }
       ctx.filter='none';
     } else if(asset.kind==='text'){
       var tOffX=layer.offsetX!=null?layer.offsetX:0;
       var tOffY=layer.offsetY!=null?layer.offsetY:0;
-      ctx.fillStyle=fill;
       ctx.font=asset.fontSize+'px sans-serif';
       ctx.textBaseline='top';
-      ctx.fillText(asset.text,-tOffX,-tOffY);
+      if(fill && fill!=='transparent'){ ctx.fillStyle=fill; ctx.fillText(asset.text,-tOffX,-tOffY); }
+      if(lHasStroke){ ctx.strokeStyle=lStroke; ctx.lineWidth=lSW; ctx.strokeText(asset.text,-tOffX,-tOffY); }
     } else if(asset.kind==='polygon'){
       var pOffX=layer.offsetX!=null?layer.offsetX:0;
       var pOffY=layer.offsetY!=null?layer.offsetY:0;
       var pBlur=(p.blur!=null?p.blur:(asset.blur||0));
       var pPts=p.points||asset.points||[];
-      if(pPts.length>=3){
-        ctx.fillStyle=fill;
+      var pClosed=asset.closed!==false;
+      var pNeeded=pClosed?3:2;
+      if(pPts.length>=pNeeded){
         if(pBlur>0) ctx.filter='blur('+pBlur+'px)';
         ctx.beginPath();
         ctx.moveTo(pPts[0].x-pOffX,pPts[0].y-pOffY);
         for(var pI=1;pI<pPts.length;pI++) ctx.lineTo(pPts[pI].x-pOffX,pPts[pI].y-pOffY);
-        ctx.closePath();
-        ctx.fill();
+        if(pClosed) ctx.closePath();
+        if(pClosed && fill && fill!=='transparent'){
+          ctx.fillStyle=fill;
+          ctx.fill();
+        }
+        if(lHasStroke){
+          ctx.strokeStyle=lStroke;
+          ctx.lineWidth=lSW;
+          ctx.lineJoin='round';
+          ctx.lineCap='round';
+          ctx.stroke();
+        }
         ctx.filter='none';
       }
     } else if(asset.kind==='image'){