feat(canvas): round-trip Pen settings with the selected path style

Add pathPenSettingsForNode / pathPenSettingsToShapeStyle so the Pen
tool controls can display and edit the selected path node's stroke
color and width in screen space, and let CanvasPathEditor re-apply
fill/stroke/opacity to the mounted leafer path when the node's style
changes during editing.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/tests/pathPen.test.mjs

@@ -7,6 +7,8 @@ import {
   constrainPathPenPoint,
   createPathPenNode,
   pathPenDraftToPathData,
+  pathPenSettingsForNode,
+  pathPenSettingsToShapeStyle,
   setLastPathPenAnchorHandles,
   startPathPenDraft
 } from "../src/ui/pages/CanvasWorkspace/canvas/pathPen.ts";
@@ -66,3 +68,12 @@ test("persists a completed Pen path as an editable shape node", () => {
   assert.equal(options.kind, "path");
   assert.deepEqual(options.pathData, [1, 0.04955, 0.5, 2, 0.95045, 0.5]);
 });
+
+test("round-trips the selected path style through screen-space Pen settings", () => {
+  let draft = startPathPenDraft(settings, 0.5, point(10, 20));
+  draft = appendPathPenAnchor(draft, point(110, 20));
+  const node = createPathPenNode(draft, "Pen");
+
+  assert.deepEqual(pathPenSettingsForNode(node, 0.5), settings);
+  assert.deepEqual(pathPenSettingsToShapeStyle({ color: "#A855F7", width: 8 }, 0.5), { strokeColor: "#A855F7", strokeWidth: 16 });
+});