castle-web-cli 0.4.115 → 0.4.116

package/kits/physics-2d/editors/PxArtEditor.jsx

@@ -1,16 +1,81 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { frameCount, renderSpriteFrame, TRANSPARENT } from '../engine/pxart';
-import { renderSmoothSpriteFrame } from '../engine/pxartSmooth';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { displayFinish, frameCount, isVectorRenderer, renderSpriteFrame, TRANSPARENT } from '../engine/pxart';
+import { emptyPathData, LATTICE, magneticCellPull, subpathEdgeCount, subpathPointAt, subpathPoints, subpathVertexCount } from '../engine/pxartPath';
+import {
+  renderSmoothCellsPreview,
+  renderSmoothCompositeFrame,
+  renderSmoothSpriteFrame,
+} from '../engine/pxartSmooth';
 import { basename } from '../engine/files';
 import { EditorBody, Icon, IconButton, styles } from '../engine/ui';
-import { eventToCell } from './pixelCanvas';
+import { eventToCell, eventToPoint } from './pixelCanvas';
 import { forEachDab } from './pixelGeometry';
+import { drawPathOverlay } from './pathOverlay';
+import {
+  appendAnchorToSubpath,
+  appendShape,
+  applyAnchorsDrag,
+  applyEdgeBow,
+  applyShapesDrag,
+  anchorKey,
+  bringShapesForward,
+  canBringShapesForward,
+  canPunchHole,
+  canSendShapesBackward,
+  closePenShape,
+  collectAnchorStarts,
+  collectShapesPointStarts,
+  duplicateShapes,
+  flipShapesHorizontal,
+  flipShapesVertical,
+  hitTestShape,
+  hitTestShapeAnchor,
+  hitTestShapeEdge,
+  hitTestAnchorsInRect,
+  hitTestFillToolTarget,
+  hitTestPathEdge,
+  hitTestShapesInRect,
+  HIT_RADIUS_SCREEN_PX,
+  EDGE_HIT_SCREEN_PX,
+  OPEN_END_HIT_SCREEN_PX,
+  hitRadiusCells,
+  absorbRetracedSubpaths,
+  insertAnchorOnEdge,
+  spliceLimbIntoShape,
+  isOpenPenShape,
+  isOpenSubpath,
+  punchHole,
+  hitTestOpenEnd,
+  removeEdgesFromShape,
+  reverseSubpath,
+  removeSubpath,
+  startLimbOnShape,
+  recolorTopShapeAt,
+  removeAnchorsFromShape,
+  removeShape,
+  removeShapes,
+  rotateShapes90CW,
+  sendShapesBackward,
+  setShapesFill,
+  setShapesStroke,
+  shapeFromPenDraft,
+  sharedShapeSlot,
+  snapPenAnchor,
+  previewPenLanding,
+  toggleAnchorInList,
+  toggleIndexInList,
+  withCoincidentAnchors,
+} from './pathTools';
+import { appendInkPoint, fitBrushInk, shapeFromBrushFit } from './brushFit';
+import { ghostFromBrushDrag, shapeFromBrushDrag } from './brushShapes';
 import { PixelArtboard, PixelEditorHeader, usePixelEditorShell } from './pixelEditorChrome';
 import {
   BRUSH_SIZES,
   CanvasSizeBar,
-  CornerRadiusBar,
+  FinishBar,
   PaintStrip,
+  PATH_TOOLS,
+  PATH_BRUSH_MODE_BY_KEY,
   PIXEL_TOOLS,
   PixelToolStrip,
   PxArtInspectorDock,
@@ -49,6 +114,7 @@ import {
   linkCell,
   moveFrame,
   moveLayer,
+  pathAt,
   patchLayer,
   patchTag,
   resizeSprite,
@@ -56,11 +122,13 @@ import {
   setCellOffset,
   setDefaultDuration,
   setDefaultTag,
-  setCornerRadius,
+  setFinish,
   setFrameDuration,
+  setLayerKind,
   setupSpriteCanvas,
   unlinkCell,
   withCellsAt,
+  withPathAt,
 } from './pxArtEditorModel';
 import { frameDurations, playbackOrder, resolveActiveTag, usePreviewPlayback } from './pxArtPlayback';
 import { PxArtTimeline } from './pxArtTimeline';
@@ -103,13 +171,30 @@ const TOOL_CURSORS = {
   shape: 'crosshair',
   select: 'crosshair',
   'move-all': 'move',
+  'path-select': 'crosshair',
+  bend: 'crosshair',
 };
 
+function isPathBrushStroke(stroke) {
+  return stroke?.tool === 'brush' && stroke.brushMode != null;
+}
+
+// Tools valid while a path layer is active (includes shared ones like fill).
+const PATH_TOOL_IDS = new Set(PATH_TOOLS.map((candidate) => candidate.id));
+// Path-only tools — leaving a path layer remaps these to brush. Shared tools
+// (fill) must NOT be in this set or bitmap Fill immediately snaps back to Brush.
+const PATH_ONLY_TOOL_IDS = new Set(
+  PATH_TOOLS.map((candidate) => candidate.id).filter(
+    (id) => !PIXEL_TOOLS.some((pixel) => pixel.id === id)
+  )
+);
+
 export function PxArtEditor({ path, text, onChange, ...chrome }) {
   const canvasRef = useRef(null);
   const smoothRef = useRef(null);
   const overlayRef = useRef(null);
   const strokeRef = useRef(null);
+  const refitActiveBrushStrokeRef = useRef(() => {});
   // The serialized text this editor last wrote itself. Lets us tell our own
   // edits apart from external rewrites (undo/redo) so the marquee can be dropped
   // when the art changes out from under it.
@@ -124,6 +209,35 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   // active cel. `antsOffset` ticks the marching-ants animation while it's shown.
   const [marquee, setMarquee] = useState(null);
   const [antsOffset, setAntsOffset] = useState(0);
+  // Path-layer freehand ink (unquantized cell coords) + throttled fit ghost.
+  const [brushInk, setBrushInk] = useState([]);
+  const [brushGhost, setBrushGhost] = useState(null);
+  const brushInkRef = useRef([]);
+  brushInkRef.current = brushInk;
+  // Index of a 1-point open pen stub, so leave/Escape can drop it once (Strict Mode safe).
+  const penStubIndexRef = useRef(-1);
+  // The limb currently being drawn onto an existing shape: { shapeIndex, subIndex }.
+  // Null while the pen is doing its ordinary one-subpath-per-shape work.
+  const penLimbRef = useRef(null);
+  const penBakeAtRef = useRef(0);
+  // Selected shape indices in the active path layer's shapes[] stack.
+  const [selectedShapeIndices, setSelectedShapeIndices] = useState([]);
+  // Within-shape anchor selection (only meaningful when exactly one shape is selected).
+  const [selectedAnchors, setSelectedAnchors] = useState([]);
+  // Edges picked out of the selected shape: { shapeIndex, edges: [{ subIndex,
+  // edgeIndex }] }. Only meaningful while that shape is the sole selection; see
+  // activeEdges, which drops the pick once it stops describing what is there.
+  const [selectedEdges, setSelectedEdges] = useState(null);
+  const [hoverEdge, setHoverEdge] = useState(null);
+  // Time and identity of the last edge click, for double-click to take the run.
+  const lastEdgeClickRef = useRef({ at: 0, key: '' });
+  // Rubber-band rect for path-select marquee (cell coords), or null.
+  const [shapeMarquee, setShapeMarquee] = useState(null);
+  const [hoverPoint, setHoverPoint] = useState(null);
+  const [hoverInsertEdge, setHoverInsertEdge] = useState(null);
+  const [fillHoverTarget, setFillHoverTarget] = useState(null);
+  // History-free path for pen hover bake preview (null = show committed art only).
+  const [pathBakePreview, setPathBakePreview] = useState(null);
   const toolState = usePixelToolState();
   const {
     tool,
@@ -134,6 +248,8 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     fillSwapMode,
     shapeMode,
     shapeFill,
+    brushMode,
+    setBrushMode,
     brushSize,
     setBrushSize,
     eraseSize,
@@ -151,13 +267,41 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     ? clampSelection(sprite, rawSelection.layerIndex, rawSelection.frameIndex)
     : rawSelection;
 
+  const activeLayer = sprite?.layers[selection.layerIndex];
+  const isPathLayer = activeLayer?.kind === 'path';
+  const activePath = sprite && isPathLayer ? pathAt(sprite, selection.layerIndex, selection.frameIndex) : emptyPathData();
+  // A pick only counts while its shape is still the sole selection and every
+  // edge in it still exists, so an edit elsewhere leaves a stale pick inert
+  // rather than deleting whatever moved into those slots.
+  const activeEdges = useMemo(() => {
+    if (!selectedEdges || selectedShapeIndices.length !== 1) return null;
+    // Anchors and edges are both sub-shape picks, and Delete has to mean one of
+    // them. Whichever was picked last wins: picking an edge clears the anchors,
+    // and a live anchor selection makes an older edge pick inert rather than
+    // leaving Delete pointed at something the overlay stopped emphasising.
+    if (selectedAnchors.length) return null;
+    if (selectedShapeIndices[0] !== selectedEdges.shapeIndex) return null;
+    const shape = activePath?.shapes?.[selectedEdges.shapeIndex];
+    if (!shape) return null;
+    const edges = selectedEdges.edges.filter(({ subIndex, edgeIndex }) => {
+      const sub = shape.subpaths?.[subIndex];
+      return sub && edgeIndex < subpathEdgeCount(sub);
+    });
+    return edges.length ? { shapeIndex: selectedEdges.shapeIndex, edges } : null;
+  }, [selectedEdges, selectedAnchors, selectedShapeIndices, activePath]);
+
   const activeTag = sprite ? resolveActiveTag(sprite, sprite.defaultTag) : null;
   const order = sprite ? playbackOrder(sprite, activeTag) : [0];
   const durations = sprite ? frameDurations(sprite, order) : [100];
   const repeat = activeTag ? activeTag.repeat : 0;
   const previewIndex = usePreviewPlayback({ order, durations, repeat }, playing, selection.frameIndex);
 
-  useArtboardRender(canvasRef, text, sprite, previewIndex, onion, playing, {
+  const artboardSprite =
+    pathBakePreview && sprite
+      ? withPathAt(sprite, selection.layerIndex, selection.frameIndex, pathBakePreview)
+      : sprite;
+
+  useArtboardRender(canvasRef, text, artboardSprite, previewIndex, onion, playing, {
     selection,
     hoverCell,
     tool,
@@ -165,6 +309,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     brushSize,
     eraseSize,
     activeKey,
+    pathBakePreview,
   });
   const { canvasStyle, displaySize } = useArtboardFit({
     wrapRef: canvasWrapRef,
@@ -180,6 +325,20 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   const [zoom, setZoom] = useState(1);
   const zoomRef = useRef(zoom);
   zoomRef.current = zoom;
+  const pathCellPull =
+    displaySize?.width && sprite?.resolution?.width
+      ? magneticCellPull(sprite.resolution.width, displaySize.width, zoom)
+      : LATTICE / 2;
+  const pathCellPx =
+    displaySize?.width && sprite?.resolution?.width
+      ? (displaySize.width * zoom) / sprite.resolution.width
+      : 16;
+  const pathHitRadii = {
+    anchor: hitRadiusCells(HIT_RADIUS_SCREEN_PX, pathCellPx),
+    edge: hitRadiusCells(EDGE_HIT_SCREEN_PX, pathCellPx),
+    stroke: hitRadiusCells(EDGE_HIT_SCREEN_PX, pathCellPx),
+    openEnd: hitRadiusCells(OPEN_END_HIT_SCREEN_PX, pathCellPx),
+  };
   // Set zoom to `nextRaw` (clamped) while pinning the point under (anchorX,
   // anchorY) client coords — defaulting to the viewport center. Scroll is fixed
   // up on the next frame, once the resized canvas has laid out.
@@ -304,8 +463,18 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   // effect has no way to know the wrap resized (nothing about `text`,
   // `frameIndex`, or `cornerRadius` changes on a pure container resize), so
   // it would keep rendering at whatever scale was last measured.
-  useSmoothPreviewRender(smoothRef, text, sprite, previewIndex, canvasStyle?.width);
-  useToolShortcuts({ tool, picking, setTool, setPicking, setBrushSize, setEraseSize });
+  useSmoothPreviewRender(smoothRef, text, artboardSprite, previewIndex, canvasStyle?.width, pathBakePreview);
+  useToolShortcuts({
+    tool,
+    picking,
+    brushMode,
+    setTool,
+    setPicking,
+    setBrushSize,
+    setEraseSize,
+    setBrushMode,
+    isPathLayer,
+  });
   const isCompactLayout = useEditorCompactLayout(editorBodyRef);
   useEffect(() => {
     if (!isCompactLayout) setPaletteOpen(false);
@@ -319,14 +488,83 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   useEffect(() => {
     setMarquee(null);
   }, [selection.layerIndex, selection.frameIndex]);
-  // Undo/redo (or any external rewrite) restores the art text but not the
-  // separate marquee state, which would strand the selection box over the wrong
-  // pixels. A text value this editor didn't produce means an external change, so
-  // drop the selection to keep it from ever desyncing from the art.
+  useEffect(() => {
+    if (isPathLayer && !PATH_TOOL_IDS.has(tool)) setTool('brush');
+    else if (!isPathLayer && PATH_ONLY_TOOL_IDS.has(tool)) setTool('brush');
+  }, [isPathLayer, tool, setTool]);
+  useEffect(() => {
+    // Points are already in the file; drop a lone 1-point stub when leaving pen mode.
+    if (!(isPathLayer && tool === 'brush' && brushMode === 'pen')) {
+      dropLoneOpenPenPoint();
+    }
+    if (tool !== 'path-select') {
+      setShapeMarquee(null);
+      // Keep selection across brush/bend ↔ select so the live shape stays useful.
+      if (!isPathLayer || (tool !== 'brush' && tool !== 'bend')) {
+        setSelectedShapeIndices([]);
+        setSelectedAnchors([]);
+      }
+    }
+    if (!isPathLayer || tool !== 'brush') {
+      clearBrushGesture();
+    } else if (brushMode !== 'pen') {
+      setPathBakePreview(null);
+    }
+  }, [tool, brushMode, isPathLayer]);
+  useEffect(() => {
+    clearBrushGesture();
+    setSelectedShapeIndices([]);
+    setSelectedAnchors([]);
+    setSelectedEdges(null);
+    setShapeMarquee(null);
+    setHoverEdge(null);
+    setHoverPoint(null);
+    setHoverInsertEdge(null);
+    setFillHoverTarget(null);
+    penLimbRef.current = null;
+    penStubIndexRef.current = -1;
+    lastEdgeClickRef.current = { at: 0, key: '' };
+  }, [selection.layerIndex, selection.frameIndex]);
+  // Selection is UI-only — clear on play, never restored by undo.
+  useEffect(() => {
+    if (!playing) return;
+    setSelectedShapeIndices([]);
+    setSelectedAnchors([]);
+    setShapeMarquee(null);
+    clearBrushGesture();
+  }, [playing]);
+  // Undo/redo (or any external rewrite) restores the art text but not UI chrome.
+  // Keep shape indices that still exist so pen point-undo leaves the open stroke
+  // selected; drop anything out of range.
   useEffect(() => {
     if (text === lastSelfTextRef.current) return;
     lastSelfTextRef.current = text;
     setMarquee(null);
+    setShapeMarquee(null);
+    // Brush create-drags preview via pathBakePreview (no mid-gesture writes).
+    // Clearing them here on a stale fs echo left the rest of the drag blank.
+    if (!isPathBrushStroke(strokeRef.current)) clearBrushGesture();
+    const spr = deriveSprite(text);
+    const nextPath =
+      spr && selection ? pathAt(spr, selection.layerIndex, selection.frameIndex) : null;
+    const n = nextPath?.shapes?.length ?? 0;
+    setSelectedShapeIndices((prev) => prev.filter((i) => i >= 0 && i < n));
+    // Anchor picks used to be dropped wholesale here. That made any rewrite that
+    // did not match our own last write — a stale echo of the very art we just
+    // committed, say — deselect the point mid-gesture. Keep the refs that still
+    // name a live point, on the same terms the shape indices above are kept.
+    setSelectedAnchors((prev) => {
+      const sole = selectedShapeIndices.length === 1 ? selectedShapeIndices[0] : -1;
+      const shape = sole >= 0 && sole < n ? nextPath?.shapes?.[sole] : null;
+      if (!shape) return prev.length ? [] : prev;
+      const kept = prev.filter((a) => {
+        const sub = shape.subpaths?.[a.subIndex];
+        return sub && a.pointIndex < subpathVertexCount(sub);
+      });
+      return kept.length === prev.length ? prev : kept;
+    });
+    if (penStubIndexRef.current >= n) penStubIndexRef.current = -1;
+    if (penLimbRef.current && penLimbRef.current.shapeIndex >= n) penLimbRef.current = null;
   }, [text]);
   // March the ants only while a selection is visible.
   useEffect(() => {
@@ -334,12 +572,81 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     const id = setInterval(() => setAntsOffset((o) => (o + 1) % 1000), 80);
     return () => clearInterval(id);
   }, [tool, marquee]);
-  // Draw the marching-ants selection on a display-resolution overlay canvas so
-  // the outline stays crisp (drawing it on the upscaled native artboard renders
-  // the thin dashes sub-pixel and washed out).
   useEffect(() => {
-    renderMarqueeOverlay(overlayRef.current, sprite?.resolution, playing ? null : marquee, antsOffset);
-  }, [marquee, antsOffset, playing, canvasStyle, sprite?.resolution.width, sprite?.resolution.height]);
+    if (isPathLayer) {
+      drawPathOverlay(overlayRef.current, sprite?.resolution, playing ? null : activePath, {
+        tool,
+        brushMode,
+        palette: EDITOR_PALETTE,
+        brushInk,
+        brushGhost,
+        hoverPoint,
+        hoverInsertEdge,
+        penLimb: penLimbRef.current,
+        selectedShapeIndices,
+        selectedAnchors,
+        selectedEdges: activeEdges,
+        hoverEdge,
+        shapeMarquee,
+        fillHoverTarget,
+        activeColor: EDITOR_PALETTE[activeKey],
+        smoothFinish: isVectorRenderer(sprite?.renderer),
+      });
+    } else {
+      const finish = displayFinish(sprite);
+      const preview =
+        playing || !finish.smooth
+          ? null
+          : buildToolPreview({
+              sprite,
+              selection,
+              hoverCell,
+              tool,
+              picking,
+              brushSize,
+              eraseSize,
+              activeKey,
+              playing,
+            });
+      renderPixelOverlay(overlayRef.current, sprite?.resolution, {
+        marquee: playing ? null : marquee,
+        antsOffset,
+        preview,
+        cornerRadius: finish.cornerRadius,
+      });
+    }
+  }, [
+    isPathLayer,
+    activePath,
+    tool,
+    brushMode,
+    marquee,
+    antsOffset,
+    playing,
+    canvasStyle,
+    brushInk,
+    brushGhost,
+    hoverPoint,
+    hoverInsertEdge,
+    selectedShapeIndices,
+    selectedAnchors,
+    activeEdges,
+    hoverEdge,
+    shapeMarquee,
+    fillHoverTarget,
+    activeKey,
+    hoverCell,
+    picking,
+    brushSize,
+    eraseSize,
+    selection.layerIndex,
+    selection.frameIndex,
+    sprite?.cornerRadius,
+    sprite?.renderer,
+    sprite?.resolution.width,
+    sprite?.resolution.height,
+    text,
+  ]);
   // Escape deselects; Delete/Backspace clears the selected pixels. Both only
   // while the select tool is active and a marquee exists.
   useEffect(() => {
@@ -358,6 +665,110 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [tool, marquee, text, selection.layerIndex, selection.frameIndex]);
+  // Path-layer keyboard: pen close/open, shape/anchor delete / z-order / nudge / duplicate.
+  // Plain [ / ] are free on path tools (brush-size adjust only binds on brush/erase).
+  useEffect(() => {
+    if (!isPathLayer) return undefined;
+    function onKeyDown(event) {
+      if (isTypingTarget(event.target || document.activeElement)) return;
+      if (tool === 'brush') {
+        if (brushMode === 'pen') {
+          if (event.key === 'Escape') {
+            endPenSession({ dropLone: true });
+            event.preventDefault();
+          } else if (event.key === 'Enter') {
+            closeLivePenShape();
+            event.preventDefault();
+          }
+          return;
+        }
+        if (event.key === 'Escape') {
+          cancelBrushGesture();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (tool !== 'path-select') return;
+      const mod = event.metaKey || event.ctrlKey;
+      if (mod && !event.altKey && event.key.toLowerCase() === 'a') {
+        const n = activePath?.shapes?.length ?? 0;
+        setSelectedShapeIndices(Array.from({ length: n }, (_, i) => i));
+        setSelectedAnchors([]);
+        setSelectedEdges(null);
+        event.preventDefault();
+        return;
+      }
+      if (mod && !event.altKey && event.key.toLowerCase() === 'd') {
+        if (selectedShapeIndices.length) {
+          duplicateSelectedShapes();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.key === 'Escape') {
+        setSelectedShapeIndices([]);
+        setSelectedAnchors([]);
+        setSelectedEdges(null);
+        setShapeMarquee(null);
+        event.preventDefault();
+        return;
+      }
+      if (!selectedShapeIndices.length) return;
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        if (!mod && !event.altKey) {
+          deleteSelection();
+          event.preventDefault();
+        }
+      } else if (event.key === ']' && !event.altKey && !mod) {
+        bringSelectedForward();
+        event.preventDefault();
+      } else if (event.key === '[' && !event.altKey && !mod) {
+        sendSelectedBackward();
+        event.preventDefault();
+      } else if (
+        (event.key === 'ArrowLeft' ||
+          event.key === 'ArrowRight' ||
+          event.key === 'ArrowUp' ||
+          event.key === 'ArrowDown') &&
+        !mod
+      ) {
+        nudgeSelection(event.key, !!event.altKey);
+        event.preventDefault();
+      }
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [
+    isPathLayer,
+    tool,
+    brushMode,
+    selectedShapeIndices,
+    selectedAnchors,
+    text,
+    selection.layerIndex,
+    selection.frameIndex,
+    activeKey,
+    activePath,
+  ]);
+  // Shift/Alt during a brush primitive drag only update on pointermove unless
+  // we also listen here — toggling mid-stroke otherwise feels random.
+  useEffect(() => {
+    function onBrushModifierKey(event) {
+      if (event.key !== 'Shift' && event.key !== 'Alt') return;
+      if (isTypingTarget(event.target || document.activeElement)) return;
+      const stroke = strokeRef.current;
+      if (!isPathBrushStroke(stroke) || stroke.brushMode === 'pen') return;
+      stroke.halfPixel = event.getModifierState('Alt');
+      if (stroke.brushMode !== 'freehand') stroke.constrain = event.getModifierState('Shift');
+      refitActiveBrushStrokeRef.current();
+    }
+    window.addEventListener('keydown', onBrushModifierKey);
+    window.addEventListener('keyup', onBrushModifierKey);
+    return () => {
+      window.removeEventListener('keydown', onBrushModifierKey);
+      window.removeEventListener('keyup', onBrushModifierKey);
+    };
+  }, []);
 
   if (!sprite) {
     return (
@@ -373,12 +784,47 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     ? 'crosshair'
     : overSelection
       ? 'move'
-      : (TOOL_CURSORS[tool] ?? 'default');
+      : isPathLayer && tool === 'brush'
+        ? 'crosshair'
+        : (TOOL_CURSORS[tool] ?? 'default');
 
   function togglePalette(next) {
     setPaletteOpen((previous) => (typeof next === 'boolean' ? next : !previous));
   }
 
+  function brushModifiersFromEvent(event) {
+    if (!event?.getModifierState) {
+      return { halfPixel: !!event?.altKey, constrain: !!event?.shiftKey };
+    }
+    return {
+      halfPixel: event.getModifierState('Alt'),
+      constrain: event.getModifierState('Shift'),
+    };
+  }
+
+  function applyBrushModifiers(stroke, event) {
+    if (!isPathBrushStroke(stroke) || !event) return;
+    const { halfPixel, constrain } = brushModifiersFromEvent(event);
+    stroke.halfPixel = halfPixel;
+    if (stroke.brushMode !== 'freehand') stroke.constrain = constrain;
+  }
+
+  function refitActiveBrushStroke() {
+    const stroke = strokeRef.current;
+    if (!isPathBrushStroke(stroke) || stroke.brushMode === 'pen') return;
+    if (stroke.brushMode === 'freehand') {
+      refitBrushGhost(brushInkRef.current, stroke.halfPixel);
+      return;
+    }
+    refitBrushPrimitiveGhost(
+      stroke.startPoint,
+      stroke.lastPoint ?? stroke.startPoint,
+      stroke.halfPixel,
+      stroke.constrain
+    );
+  }
+  refitActiveBrushStrokeRef.current = refitActiveBrushStroke;
+
   // Push a draft Sprite to the file (live, mid-stroke). Records ONE undo
   // snapshot for the whole gesture and dedups by serialized text.
   function liveSprite(nextSprite) {
@@ -386,6 +832,9 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     if (!stroke) return;
     const nextText = serializeModel(nextSprite);
     if (nextText === stroke.draftText) return;
+    // Click-without-drag (path select, etc.): identical to gesture-start text —
+    // do not open a history entry or notify.
+    if (!stroke.recorded && stroke.baseText != null && nextText === stroke.baseText) return;
     if (!stroke.recorded) {
       history.recordSnapshot();
       stroke.recorded = true;
@@ -437,6 +886,11 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     if (!stroke) return;
     strokeRef.current = null;
     if (stroke.tool === 'select') setMarquee(stroke.originRect ?? null);
+    // The path rubber band is drawn from its own state rather than from the
+    // selection, so unlike the pixel marquee it survives an abort unless it is
+    // cleared here; there is no prior band to roll back to.
+    if (stroke.tool === 'path-select') setShapeMarquee(null);
+    if (isPathBrushStroke(stroke)) clearBrushGesture();
     if (stroke.recorded) {
       const baseText = serializeModel(stroke.base);
       lastSelfTextRef.current = baseText;
@@ -447,6 +901,879 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       history.cancelSnapshot();
     }
   }
+  function commitPath(nextPath, options) {
+    // Hold the invariant that an edge exists once, after any edit rather than
+    // only the one that happened to produce a duplicate. Skipped mid-limb: a
+    // half-drawn run can lie on the outline on its way somewhere else.
+    const settled = penLimbRef.current ? nextPath : absorbRetracedSubpaths(nextPath);
+    const nextText = serializeModel(withPathAt(sprite, selection.layerIndex, selection.frameIndex, settled));
+    lastSelfTextRef.current = nextText;
+    history.commit(nextText, options);
+  }
+  /**
+   * Run the same pass at the end of a drag.
+   *
+   * A gesture's final state arrives through liveSprite, which cannot absorb as
+   * it goes: mid-drag a run may legitimately lie along the outline on its way
+   * somewhere else. Settling on release is what stops dragging from being the
+   * one way to leave a duplicate edge in the file. This extends the gesture's
+   * open history entry rather than opening a second one, so it undoes together
+   * with the move that caused it.
+   */
+  function settleDraggedPath(stroke) {
+    if (!stroke?.recorded || !stroke.draftText) return;
+    if (stroke.tool !== 'path-select' && stroke.tool !== 'bend') return;
+    if (penLimbRef.current) return;
+    const spr = deriveSprite(stroke.draftText);
+    const drawn = spr ? pathAt(spr, stroke.layerIndex, stroke.frameIndex) : null;
+    if (!drawn) return;
+    const settled = absorbRetracedSubpaths(drawn);
+    if (settled === drawn) return;
+    const nextText = serializeModel(
+      withPathAt(spr, stroke.layerIndex, stroke.frameIndex, settled)
+    );
+    lastSelfTextRef.current = nextText;
+    onChange(nextText);
+  }
+  function clearBrushGesture() {
+    brushInkRef.current = [];
+    setBrushInk([]);
+    setBrushGhost(null);
+    setPathBakePreview(null);
+    if (isPathBrushStroke(strokeRef.current)) strokeRef.current = null;
+  }
+  function cancelBrushGesture() {
+    clearBrushGesture();
+  }
+  // History-free live bake (same channel as pen hover). Mutating the file on
+  // every pointermove was thrashing onChange/text effects and could abort the
+  // gesture mid-drag — preview would vanish until mouse-up.
+  function liveBrushBake(shape) {
+    const stroke = strokeRef.current;
+    if (!isPathBrushStroke(stroke) || !stroke.path) return;
+    if (!shape) return;
+    setPathBakePreview(appendShape(stroke.path, shape));
+  }
+  function refitBrushGhost(ink, halfPixel = false) {
+    const fit = fitBrushInk(ink, { halfPixel, cellPull: pathCellPull });
+    const shape = fit ? shapeFromBrushFit(fit, activeKey) : null;
+    // Cyan ghost stays visible even when the bake blends into existing pixels.
+    // Skip clearing on a null fit so the preview doesn't blink in the
+    // degenerate snap cell around the gesture start.
+    if (shape) setBrushGhost(shape);
+    liveBrushBake(shape);
+  }
+  function refitBrushPrimitiveGhost(start, end, halfPixel = false, constrain = false) {
+    const stroke = strokeRef.current;
+    const mode = stroke?.brushMode ?? brushMode;
+    const shape = ghostFromBrushDrag(mode, start, end, { halfPixel, constrain, activeKey, cellPull: pathCellPull });
+    if (shape) setBrushGhost(shape);
+    liveBrushBake(shape);
+  }
+  function commitBrushGesture(endPoint) {
+    const stroke = strokeRef.current;
+    if (!isPathBrushStroke(stroke)) return;
+    const halfPixel = !!stroke.halfPixel;
+    const constrain = !!stroke.constrain;
+    let shape = null;
+    if (stroke.brushMode === 'freehand') {
+      const fit = fitBrushInk(brushInkRef.current, { halfPixel, cellPull: pathCellPull });
+      shape = fit ? shapeFromBrushFit(fit, activeKey) : null;
+    } else {
+      const start = stroke.startPoint;
+      const end = endPoint ?? stroke.lastPoint ?? start;
+      shape = shapeFromBrushDrag(stroke.brushMode, start, end, {
+        halfPixel,
+        constrain,
+        activeKey,
+        cellPull: pathCellPull,
+      });
+    }
+    const base = stroke.base;
+    const path = stroke.path;
+    const layerIndex = stroke.layerIndex;
+    const frameIndex = stroke.frameIndex;
+    const top = path?.shapes?.length ?? 0;
+    clearBrushGesture();
+    if (!shape || !base) return;
+    const nextText = serializeModel(withPathAt(base, layerIndex, frameIndex, appendShape(path, shape)));
+    lastSelfTextRef.current = nextText;
+    history.commit(nextText);
+    setSelectedShapeIndices([top]);
+    setSelectedAnchors([]);
+  }
+  /** Does a click here come back to the live subpath's first anchor and close it?
+   *  A limb closes the same way: coming back to where it started makes a loop,
+   *  and a loop is what fills. Landing anywhere else on the outline is a splice. */
+  function penClickWouldClose(target, sx, sy) {
+    if (!target) return false;
+    const pts = subpathPoints(activePath.shapes[target.shapeIndex].subpaths[target.subIndex]);
+    if (pts.length < 3) return false;
+    const [fx, fy] = pts[0];
+    return (sx - fx) * (sx - fx) + (sy - fy) * (sy - fy) <= 0.6 * 0.6;
+  }
+  function buildPenHoverBakePath(point, halfPixel) {
+    const path = activePath;
+    const sole = selectedShapeIndices.length === 1 ? selectedShapeIndices[0] : -1;
+    const target = livePenTarget();
+    const preview = previewPenLanding(path, sole, point.x, point.y, halfPixel, pathCellPull);
+    const [sx, sy] = preview.point;
+
+    if (penClickWouldClose(target, sx, sy)) {
+      const closed = closePenShape(path, target.shapeIndex, target.subIndex);
+      return closed !== path ? closed : null;
+    }
+
+    // A branch about to be rooted previews as the shape with its new anchor.
+    if (!target && sole >= 0) {
+      const root = penBranchRoot(point, sole);
+      if (root) return root.path;
+    }
+
+    // Preview the merged silhouette, so which of the two runs gets replaced is
+    // visible before committing to it.
+    const spliced = spliceAt(point, penLimbRef.current);
+    if (spliced) return spliced;
+
+    if (preview.edge) {
+      const inserted = insertAnchorOnEdge(
+        path,
+        preview.edge.shapeIndex,
+        preview.edge.subIndex,
+        preview.edge.edgeIndex,
+        point.x,
+        point.y,
+        pathCellPull
+      );
+      return inserted?.path ?? null;
+    }
+
+    if (target) {
+      return appendAnchorToSubpath(path, target.shapeIndex, target.subIndex, [sx, sy]);
+    }
+
+    return appendShape(path, shapeFromPenDraft([[sx, sy]], { closed: false, activeKey }));
+  }
+  function updatePenHoverBake(point, halfPixel) {
+    const now = performance.now();
+    if (now - penBakeAtRef.current < 30) return;
+    penBakeAtRef.current = now;
+    setPathBakePreview(buildPenHoverBakePath(point, halfPixel));
+  }
+  function livePenShapeIndex() {
+    if (selectedShapeIndices.length !== 1) return -1;
+    const i = selectedShapeIndices[0];
+    return isOpenPenShape(activePath?.shapes?.[i]) ? i : -1;
+  }
+  /** The open subpath the next pen click extends, or null. A limb wins if one is live. */
+  function livePenTarget() {
+    const limb = penLimbRef.current;
+    if (limb) {
+      const sub = activePath?.shapes?.[limb.shapeIndex]?.subpaths?.[limb.subIndex];
+      if (isOpenSubpath(sub)) return limb;
+      penLimbRef.current = null;
+    }
+    const i = livePenShapeIndex();
+    return i >= 0 ? { shapeIndex: i, subIndex: 0 } : null;
+  }
+  function dropLoneLimbPoint() {
+    const limb = penLimbRef.current;
+    penLimbRef.current = null;
+    if (!limb) return false;
+    const sub = activePath?.shapes?.[limb.shapeIndex]?.subpaths?.[limb.subIndex];
+    if (isOpenSubpath(sub) && subpathVertexCount(sub) === 1) {
+      commitPath(removeSubpath(activePath, limb.shapeIndex, limb.subIndex));
+    }
+    setSelectedShapeIndices([]);
+    setSelectedAnchors([]);
+    return true;
+  }
+  function dropLoneOpenPenPoint() {
+    if (dropLoneLimbPoint()) return;
+    const i = penStubIndexRef.current;
+    if (i < 0) return;
+    penStubIndexRef.current = -1;
+    const shape = activePath?.shapes?.[i];
+    if (!isOpenPenShape(shape)) return;
+    const pts = subpathPoints(shape.subpaths[0]);
+    if (pts.length !== 1) return;
+    commitPath(removeShape(activePath, i));
+    setSelectedShapeIndices([]);
+    setSelectedAnchors([]);
+  }
+  function endPenSession({ dropLone = false } = {}) {
+    if (dropLone) dropLoneOpenPenPoint();
+    else {
+      penStubIndexRef.current = -1;
+      penLimbRef.current = null;
+    }
+    setSelectedShapeIndices([]);
+    setSelectedAnchors([]);
+  }
+  /** Where a branch would root on `shapeIndex`: an existing anchor, or a fresh one
+   *  inserted into the edge under the cursor. Returns `{ path, at }` or null. */
+  function penBranchRoot(point, shapeIndex) {
+    const anchor = hitTestShapeAnchor(activePath, shapeIndex, point.x, point.y, pathHitRadii.anchor);
+    if (anchor) {
+      const p = subpathPointAt(activePath.shapes[shapeIndex].subpaths[anchor.subIndex], anchor.pointIndex);
+      return { path: activePath, at: p };
+    }
+    const edge = hitTestShapeEdge(activePath, shapeIndex, point.x, point.y, pathHitRadii.edge);
+    if (!edge) return null;
+    const inserted = insertAnchorOnEdge(
+      activePath,
+      edge.shapeIndex,
+      edge.subIndex,
+      edge.edgeIndex,
+      point.x,
+      point.y,
+      pathCellPull
+    );
+    if (!inserted) return null;
+    const { subIndex, pointIndex } = inserted.anchor;
+    return { path: inserted.path, at: subpathPointAt(inserted.path.shapes[shapeIndex].subpaths[subIndex], pointIndex) };
+  }
+  /**
+   * A live limb whose next click lands back on a closed subpath of the same
+   * shape is a splice: the drawn run replaces one run of that loop and the two
+   * become a single closed path. Pure — returns the resulting path or null, so
+   * the hover preview and the click can share one answer.
+   *
+   * Landing on the limb's own geometry is not a splice; only closed subpaths
+   * are candidates, which is what keeps a stroked branch a branch.
+   */
+  function spliceAt(point, limb) {
+    if (!limb) return null;
+    const shape = activePath?.shapes?.[limb.shapeIndex];
+    const closedSub = (subIndex) => !!shape?.subpaths?.[subIndex]?.closed;
+    if (subpathVertexCount(shape?.subpaths?.[limb.subIndex]) < 2) return null;
+
+    let rooted = activePath;
+    let at = null;
+    const anchor = hitTestShapeAnchor(activePath, limb.shapeIndex, point.x, point.y, pathHitRadii.anchor);
+    // A junction holds one anchor per subpath meeting there, and the hit lands
+    // on whichever was stored last — usually a divider left by an earlier
+    // splice. Resolve through the site to the loop's own copy, or landing on an
+    // existing junction would fail to close the region.
+    const onLoop = anchor
+      ? withCoincidentAnchors(activePath, limb.shapeIndex, [anchor]).find((a) =>
+          closedSub(a.subIndex)
+        )
+      : null;
+    if (onLoop) {
+      at = subpathPointAt(shape.subpaths[onLoop.subIndex], onLoop.pointIndex);
+    } else {
+      const edge = hitTestShapeEdge(activePath, limb.shapeIndex, point.x, point.y, pathHitRadii.edge);
+      if (!edge || !closedSub(edge.subIndex)) return null;
+      const inserted = insertAnchorOnEdge(
+        activePath,
+        edge.shapeIndex,
+        edge.subIndex,
+        edge.edgeIndex,
+        point.x,
+        point.y,
+        pathCellPull
+      );
+      if (!inserted) return null;
+      rooted = inserted.path;
+      at = subpathPointAt(
+        rooted.shapes[limb.shapeIndex].subpaths[inserted.anchor.subIndex],
+        inserted.anchor.pointIndex
+      );
+    }
+    if (!at) return null;
+    const extended = appendAnchorToSubpath(rooted, limb.shapeIndex, limb.subIndex, at);
+    return spliceLimbIntoShape(extended, limb.shapeIndex, limb.subIndex);
+  }
+  function startPenBranch(point, shapeIndex) {
+    const root = penBranchRoot(point, shapeIndex);
+    if (!root) return false;
+    const limb = startLimbOnShape(root.path, shapeIndex, root.at);
+    if (!limb) return false;
+    penStubIndexRef.current = -1;
+    penLimbRef.current = { shapeIndex, subIndex: limb.subIndex };
+    commitPath(limb.path);
+    setSelectedShapeIndices([shapeIndex]);
+    setSelectedAnchors([]);
+    return true;
+  }
+  /**
+   * Clicking the loose end of an open subpath picks the pen back up there.
+   *
+   * Without this the only open subpath the pen could carry on with was a lone
+   * one, so a loop opened by cutting an edge out of a shape that also carries a
+   * line — which is most of them — could only be closed again by undoing.
+   */
+  function resumeOpenEnd(sx, sy, shapeIndex) {
+    const hit = hitTestOpenEnd(activePath, shapeIndex, sx, sy, pathHitRadii.openEnd);
+    if (!hit) return false;
+    if (hit.end === 'head') {
+      const turned = reverseSubpath(activePath, shapeIndex, hit.subIndex);
+      if (turned !== activePath) commitPath(turned);
+    }
+    penLimbRef.current = { shapeIndex, subIndex: hit.subIndex };
+    penStubIndexRef.current = -1;
+    setSelectedShapeIndices([shapeIndex]);
+    setSelectedAnchors([]);
+    return true;
+  }
+  function closeLivePenShape() {
+    const target = livePenTarget();
+    penLimbRef.current = null;
+    if (!target) return false;
+    const i = target.shapeIndex;
+    const next = closePenShape(activePath, i, target.subIndex);
+    if (next === activePath) return false;
+    penStubIndexRef.current = -1;
+    commitPath(next);
+    // Keep the closed shape selected so edge-insert / further edits stay available.
+    setSelectedShapeIndices([i]);
+    setSelectedAnchors([]);
+    return true;
+  }
+  function deleteSelection() {
+    if (!selectedShapeIndices.length) return;
+    if (activeEdges) {
+      const next = removeEdgesFromShape(activePath, activeEdges.shapeIndex, activeEdges.edges);
+      commitPath(next);
+      setSelectedEdges(null);
+      setSelectedAnchors([]);
+      // Cutting a shape's last edge takes the shape with it.
+      if (!next?.shapes?.[activeEdges.shapeIndex]) setSelectedShapeIndices([]);
+      return;
+    }
+    if (selectedShapeIndices.length === 1 && selectedAnchors.length) {
+      const shapeIndex = selectedShapeIndices[0];
+      const { path: next, anchors: advanced } = removeAnchorsFromShape(
+        activePath,
+        shapeIndex,
+        selectedAnchors
+      );
+      commitPath(next);
+      if (!next?.shapes?.[shapeIndex]) {
+        setSelectedShapeIndices([]);
+        setSelectedAnchors([]);
+        return;
+      }
+      // Advance selection to next survivors so repeated Delete chews along the path.
+      setSelectedAnchors(advanced);
+      return;
+    }
+    commitPath(removeShapes(activePath, selectedShapeIndices));
+    setSelectedShapeIndices([]);
+    setSelectedAnchors([]);
+  }
+  function bringSelectedForward() {
+    if (!canBringShapesForward(activePath, selectedShapeIndices)) return;
+    const { path: next, indices } = bringShapesForward(activePath, selectedShapeIndices);
+    commitPath(next);
+    setSelectedShapeIndices(indices);
+    setSelectedAnchors([]);
+  }
+  function sendSelectedBackward() {
+    if (!canSendShapesBackward(activePath, selectedShapeIndices)) return;
+    const { path: next, indices } = sendShapesBackward(activePath, selectedShapeIndices);
+    commitPath(next);
+    setSelectedShapeIndices(indices);
+    setSelectedAnchors([]);
+  }
+  function duplicateSelectedShapes() {
+    if (!selectedShapeIndices.length) return;
+    const { path: next, indices } = duplicateShapes(activePath, selectedShapeIndices, 1, 1);
+    commitPath(next);
+    setSelectedShapeIndices(indices);
+    setSelectedAnchors([]);
+  }
+  function punchSelectedHole() {
+    const result = punchHole(activePath, selectedShapeIndices);
+    if (!result) return;
+    commitPath(result.path);
+    setSelectedShapeIndices([result.outerIndex]);
+    setSelectedAnchors([]);
+  }
+  function nudgeSelection(arrowKey, halfCell) {
+    if (!selectedShapeIndices.length) return;
+    let dx = 0;
+    let dy = 0;
+    const step = halfCell ? 0.5 : 1;
+    if (arrowKey === 'ArrowLeft') dx = -step;
+    else if (arrowKey === 'ArrowRight') dx = step;
+    else if (arrowKey === 'ArrowUp') dy = -step;
+    else if (arrowKey === 'ArrowDown') dy = step;
+    else return;
+    const coalesceKey = `path-nudge:${halfCell ? 'h' : 'w'}:${arrowKey}`;
+    const commitNudge = (path) => commitPath(path, { coalesceKey });
+    // A sub-shape pick moves by its anchors, whether it was made by clicking
+    // them or by picking the edges between them — the arrows have to agree with
+    // what dragging the same selection does.
+    const sole = selectedShapeIndices.length === 1 ? selectedShapeIndices[0] : -1;
+    const picked = activeEdges
+      ? anchorsForEdges(activePath, sole, activeEdges.edges)
+      : sole >= 0 && selectedAnchors.length
+        ? selectedAnchors
+        : null;
+    if (picked?.length) {
+      const anchors = withCoincidentAnchors(activePath, sole, picked);
+      const starts = collectAnchorStarts(activePath, sole, anchors);
+      commitNudge(applyAnchorsDrag(activePath, sole, anchors, starts, dx, dy, halfCell, pathCellPull));
+      return;
+    }
+    const pointStarts = collectShapesPointStarts(activePath, selectedShapeIndices);
+    const next = applyShapesDrag(
+      activePath,
+      selectedShapeIndices,
+      pointStarts,
+      dx,
+      dy,
+      halfCell,
+      pathCellPull
+    );
+    commitNudge(next);
+  }
+  const fillSlot = sharedShapeSlot(activePath, selectedShapeIndices, 'fill');
+  const strokeSlot = sharedShapeSlot(activePath, selectedShapeIndices, 'stroke');
+  const pathActions = {
+    hasSelection: selectedShapeIndices.length > 0,
+    selectedShapeIndices,
+    fillSlot,
+    strokeSlot,
+    canForward: canBringShapesForward(activePath, selectedShapeIndices),
+    canBackward: canSendShapesBackward(activePath, selectedShapeIndices),
+    canPunchHole: canPunchHole(activePath, selectedShapeIndices),
+    deleteSelected: deleteSelection,
+    bringForward: bringSelectedForward,
+    sendBackward: sendSelectedBackward,
+    punchHole: punchSelectedHole,
+    flipH: () => {
+      if (!selectedShapeIndices.length) return;
+      commitPath(flipShapesHorizontal(activePath, selectedShapeIndices));
+    },
+    flipV: () => {
+      if (!selectedShapeIndices.length) return;
+      commitPath(flipShapesVertical(activePath, selectedShapeIndices));
+    },
+    rotateCW: () => {
+      if (!selectedShapeIndices.length) return;
+      commitPath(rotateShapes90CW(activePath, selectedShapeIndices));
+    },
+    setFill: (key) => {
+      if (!selectedShapeIndices.length) return;
+      commitPath(setShapesFill(activePath, selectedShapeIndices, key));
+    },
+    setStroke: (key) => {
+      if (!selectedShapeIndices.length) return;
+      commitPath(setShapesStroke(activePath, selectedShapeIndices, key));
+    },
+  };
+  function startPenStroke(point, event) {
+    const halfPixel = !!event?.altKey;
+    const [sx, sy] = snapPenAnchor(point.x, point.y, halfPixel, pathCellPull);
+    const target = livePenTarget();
+    const sole = selectedShapeIndices.length === 1 ? selectedShapeIndices[0] : -1;
+
+    if (penClickWouldClose(target, sx, sy)) {
+      closeLivePenShape();
+      return;
+    }
+
+    // Nothing live, but a shape is selected: a click on it starts a branch there
+    // and keeps drawing, rather than dropping a point and ending the operation.
+    if (!target && sole >= 0 && resumeOpenEnd(sx, sy, sole)) return;
+    if (!target && sole >= 0 && startPenBranch(point, sole)) return;
+
+    // A limb landing back on the loop it was drawn from splices into it, rather
+    // than dropping a stray anchor and leaving the region unclosable.
+    const limb = penLimbRef.current;
+    const spliced = spliceAt(point, limb);
+    if (spliced) {
+      penLimbRef.current = null;
+      penStubIndexRef.current = -1;
+      commitPath(spliced);
+      setSelectedShapeIndices([limb.shapeIndex]);
+      setSelectedAnchors([]);
+      return;
+    }
+
+    // Click on the selected shape's edge → insert (open or closed).
+    if (target && sole >= 0) {
+      const edge = hitTestShapeEdge(activePath, sole, point.x, point.y, pathHitRadii.edge);
+      if (edge) {
+        const inserted = insertAnchorOnEdge(
+          activePath,
+          edge.shapeIndex,
+          edge.subIndex,
+          edge.edgeIndex,
+          point.x,
+          point.y,
+          pathCellPull
+        );
+        if (inserted) {
+          penStubIndexRef.current = -1;
+          commitPath(inserted.path);
+          setSelectedAnchors([inserted.anchor]);
+          return;
+        }
+      }
+    }
+
+    if (target) {
+      penStubIndexRef.current = -1;
+      commitPath(
+        appendAnchorToSubpath(activePath, target.shapeIndex, target.subIndex, [sx, sy])
+      );
+      setSelectedAnchors([]);
+      return;
+    }
+
+    // Start a new open stroked shape at this anchor.
+    const shape = shapeFromPenDraft([[sx, sy]], { closed: false, activeKey });
+    const next = appendShape(activePath, shape);
+    const top = (next.shapes?.length ?? 1) - 1;
+    penStubIndexRef.current = top;
+    commitPath(next);
+    setSelectedShapeIndices([top]);
+    setSelectedAnchors([]);
+  }
+  const edgeKey = (e) => `${e.subIndex}:${e.edgeIndex}`;
+  /** The anchors at both ends of each edge, deduplicated. */
+  function anchorsForEdges(pathData, shapeIndex, edges) {
+    const out = [];
+    const seen = new Set();
+    for (const { subIndex, edgeIndex } of edges) {
+      const sub = pathData?.shapes?.[shapeIndex]?.subpaths?.[subIndex];
+      if (!sub) continue;
+      const count = subpathVertexCount(sub);
+      // The last edge of a closed subpath comes back round to point 0.
+      for (const pointIndex of [edgeIndex, (edgeIndex + 1) % count]) {
+        const id = `${subIndex}:${pointIndex}`;
+        if (seen.has(id)) continue;
+        seen.add(id);
+        out.push({ subIndex, pointIndex });
+      }
+    }
+    return out;
+  }
+  function edgesAreSelected(refs) {
+    const have = new Set((activeEdges?.edges ?? []).map(edgeKey));
+    return refs.length > 0 && refs.every((e) => have.has(edgeKey(e)));
+  }
+  /** Every edge of the subpath an edge belongs to, for double-click. */
+  function edgesOfSubpath(pathData, shapeIndex, subIndex) {
+    const sub = pathData?.shapes?.[shapeIndex]?.subpaths?.[subIndex];
+    const count = sub ? subpathEdgeCount(sub) : 0;
+    return Array.from({ length: count }, (_, edgeIndex) => ({ subIndex, edgeIndex }));
+  }
+  /**
+   * What an edge press means. Pressing an edge that is already picked moves the
+   * pick; pressing anywhere else on the outline still moves the shape, which is
+   * how a shape has always been dragged by its stroke.
+   */
+  function edgePressIntent(pathData, shapeIndex, x, y) {
+    const hit = hitTestShapeEdge(pathData, shapeIndex, x, y, pathHitRadii.edge);
+    if (!hit) return null;
+    const ref = { subIndex: hit.subIndex, edgeIndex: hit.edgeIndex };
+    const now = performance.now();
+    const last = lastEdgeClickRef.current;
+    const double = now - last.at < 400 && last.key === edgeKey(ref);
+    lastEdgeClickRef.current = { at: now, key: edgeKey(ref) };
+    return { ref, double, moving: edgesAreSelected([ref]) };
+  }
+  function startPathSelectStroke(point, event) {
+    const pathData = activePath;
+    const shift = !!event?.shiftKey;
+    const baseText = serializeModel(sprite);
+    const soleIndex = selectedShapeIndices.length === 1 ? selectedShapeIndices[0] : null;
+
+    // Single-shape only: anchors and edge hits (edge drag moves the shape).
+    if (soleIndex != null) {
+      const anchor = hitTestShapeAnchor(pathData, soleIndex, point.x, point.y, pathHitRadii.anchor);
+      if (anchor) {
+        // Picking an anchor drops the edge pick outright instead of leaving it
+        // stored-but-inert: a pick still in storage springs back into view the
+        // moment the anchors clear, reading as the selection reverting.
+        setSelectedEdges(null);
+        if (shift) {
+          setSelectedAnchors((prev) => toggleAnchorInList(prev, anchor));
+          strokeRef.current = null;
+          return;
+        }
+        const anchorRef = { subIndex: anchor.subIndex, pointIndex: anchor.pointIndex };
+        const already =
+          selectedAnchors.length > 0 &&
+          selectedAnchors.some(
+            (a) => a.subIndex === anchorRef.subIndex && a.pointIndex === anchorRef.pointIndex
+          );
+        let anchorsForDrag;
+        let pendingCollapse = null;
+        if (already && selectedAnchors.length > 1) {
+          // Click-vs-drag: keep multi until up without drag collapses to this anchor.
+          anchorsForDrag = selectedAnchors;
+          pendingCollapse = anchorRef;
+        } else {
+          anchorsForDrag = [anchorRef];
+          setSelectedAnchors([anchorRef]);
+        }
+        // Selection stays what was clicked; the drag carries the whole junction.
+        anchorsForDrag = withCoincidentAnchors(pathData, soleIndex, anchorsForDrag);
+        const starts = collectAnchorStarts(pathData, soleIndex, anchorsForDrag);
+        strokeRef.current = {
+          tool: 'path-select',
+          mode: 'anchors',
+          base: sprite,
+          baseText,
+          layerIndex: selection.layerIndex,
+          frameIndex: selection.frameIndex,
+          path: pathData,
+          shapeIndex: soleIndex,
+          anchors: anchorsForDrag,
+          starts,
+          pendingCollapse,
+          startPoint: point,
+          dragged: false,
+          draftText: null,
+          recorded: false,
+        };
+        return;
+      }
+      const intent = edgePressIntent(pathData, soleIndex, point.x, point.y);
+      if (intent?.moving) {
+        // An edge moves by its endpoints, so this is an anchor drag whose
+        // anchors happen to be picked out by edges instead of clicked directly.
+        setSelectedAnchors([]);
+        const anchors = withCoincidentAnchors(
+          pathData,
+          soleIndex,
+          anchorsForEdges(pathData, soleIndex, activeEdges.edges)
+        );
+        strokeRef.current = {
+          tool: 'path-select',
+          mode: 'anchors',
+          base: sprite,
+          baseText,
+          layerIndex: selection.layerIndex,
+          frameIndex: selection.frameIndex,
+          path: pathData,
+          shapeIndex: soleIndex,
+          anchors,
+          starts: collectAnchorStarts(pathData, soleIndex, anchors),
+          pendingCollapse: null,
+          startPoint: point,
+          dragged: false,
+          draftText: null,
+          recorded: false,
+        };
+        return;
+      }
+      if (intent) {
+        setSelectedAnchors([]);
+        const pointStarts = collectShapesPointStarts(pathData, [soleIndex]);
+        strokeRef.current = {
+          tool: 'path-select',
+          mode: 'shapes',
+          base: sprite,
+          baseText,
+          layerIndex: selection.layerIndex,
+          frameIndex: selection.frameIndex,
+          path: pathData,
+          shapeIndices: [soleIndex],
+          pointStarts,
+          startPoint: point,
+          dragged: false,
+          pendingCollapse: null,
+          // Dragging an unpicked edge still moves the shape. Releasing without
+          // moving means the press was aimed at the edge itself.
+          pendingEdge: { ref: intent.ref, double: intent.double, additive: shift },
+          draftText: null,
+          recorded: false,
+        };
+        return;
+      }
+    }
+
+    const hit = hitTestShape(pathData, point.x, point.y, pathHitRadii.stroke);
+    if (hit >= 0) {
+      if (shift) {
+        setSelectedShapeIndices((prev) => toggleIndexInList(prev, hit));
+        setSelectedAnchors([]);
+        strokeRef.current = null;
+        return;
+      }
+      if (selectedShapeIndices.includes(hit)) {
+        // Pointer-down on already-selected: don't collapse yet; drag moves all.
+        setSelectedAnchors([]);
+        strokeRef.current = {
+          tool: 'path-select',
+          mode: 'shapes',
+          base: sprite,
+          baseText,
+          layerIndex: selection.layerIndex,
+          frameIndex: selection.frameIndex,
+          path: pathData,
+          shapeIndices: selectedShapeIndices.slice(),
+          pointStarts: collectShapesPointStarts(pathData, selectedShapeIndices),
+          pendingCollapse: hit,
+          startPoint: point,
+          dragged: false,
+          draftText: null,
+          recorded: false,
+        };
+        return;
+      }
+      // Plain click on unselected → select only it; allow immediate drag.
+      setSelectedShapeIndices([hit]);
+      setSelectedAnchors([]);
+      strokeRef.current = {
+        tool: 'path-select',
+        mode: 'shapes',
+        base: sprite,
+        baseText,
+        layerIndex: selection.layerIndex,
+        frameIndex: selection.frameIndex,
+        path: pathData,
+        shapeIndices: [hit],
+        pointStarts: collectShapesPointStarts(pathData, [hit]),
+        pendingCollapse: null,
+        startPoint: point,
+        dragged: false,
+        draftText: null,
+        recorded: false,
+      };
+      return;
+    }
+
+    // Empty area: marquee (shift adds shapes; alt selects anchors on sole shape).
+    const alt = !!event?.altKey;
+    if (alt && soleIndex == null) {
+      strokeRef.current = null;
+      return;
+    }
+    if (alt && soleIndex != null) {
+      if (!shift) setSelectedAnchors([]);
+      strokeRef.current = {
+        tool: 'path-select',
+        mode: 'marquee',
+        target: 'anchors',
+        shapeIndex: soleIndex,
+        additive: shift,
+        base: sprite,
+        baseText,
+        layerIndex: selection.layerIndex,
+        frameIndex: selection.frameIndex,
+        startPoint: point,
+        lastPoint: point,
+        originAnchors: shift ? selectedAnchors.map((a) => ({ ...a })) : [],
+        draftText: null,
+        recorded: false,
+      };
+      const cell = { x: Math.floor(point.x), y: Math.floor(point.y) };
+      setShapeMarquee({ x: cell.x, y: cell.y, w: 1, h: 1 });
+      return;
+    }
+    setSelectedAnchors([]);
+    strokeRef.current = {
+      tool: 'path-select',
+      mode: 'marquee',
+      target: 'shapes',
+      additive: shift,
+      base: sprite,
+      baseText,
+      layerIndex: selection.layerIndex,
+      frameIndex: selection.frameIndex,
+      startPoint: point,
+      lastPoint: point,
+      originSelection: shift ? selectedShapeIndices.slice() : [],
+      draftText: null,
+      recorded: false,
+    };
+    if (!shift) {
+      setSelectedShapeIndices([]);
+    }
+    const cell = { x: Math.floor(point.x), y: Math.floor(point.y) };
+    setShapeMarquee({ x: cell.x, y: cell.y, w: 1, h: 1 });
+  }
+  function startBrushStroke(point, event) {
+    if (brushMode === 'pen') {
+      setPathBakePreview(null);
+      startPenStroke(point, event);
+      return;
+    }
+    const { halfPixel, constrain } = brushModifiersFromEvent(event);
+    const base = sprite;
+    const baseText = serializeModel(sprite);
+    const path = activePath;
+    if (brushMode === 'freehand') {
+      const ink = appendInkPoint([], point.x, point.y);
+      brushInkRef.current = ink;
+      setBrushInk(ink.slice());
+      setBrushGhost(null);
+      strokeRef.current = {
+        tool: 'brush',
+        brushMode: 'freehand',
+        lastFitAt: 0,
+        halfPixel,
+        base,
+        baseText,
+        layerIndex: selection.layerIndex,
+        frameIndex: selection.frameIndex,
+        path,
+        draftText: null,
+        recorded: false,
+      };
+      refitBrushGhost(ink, halfPixel);
+      return;
+    }
+    brushInkRef.current = [];
+    setBrushInk([]);
+    setBrushGhost(null);
+    strokeRef.current = {
+      tool: 'brush',
+      brushMode,
+      startPoint: point,
+      lastPoint: point,
+      halfPixel,
+      constrain,
+      base,
+      baseText,
+      layerIndex: selection.layerIndex,
+      frameIndex: selection.frameIndex,
+      path,
+      draftText: null,
+      recorded: false,
+    };
+    refitBrushPrimitiveGhost(point, point, halfPixel, constrain);
+  }
+  function startBendStroke(point) {
+    const edge = hitTestPathEdge(activePath, point.x, point.y, pathHitRadii.edge);
+    if (!edge) return;
+    // Hit-any-edge: adopt the owning shape so inspector / Delete stay in sync.
+    setSelectedShapeIndices([edge.shapeIndex]);
+    setSelectedAnchors([]);
+    strokeRef.current = {
+      tool: 'bend',
+      mode: 'bend',
+      base: sprite,
+      baseText: serializeModel(sprite),
+      layerIndex: selection.layerIndex,
+      frameIndex: selection.frameIndex,
+      path: activePath,
+      edge,
+      startPoint: point,
+      draftText: null,
+      recorded: false,
+    };
+  }
+  function startPathTool(point, event) {
+    if (tool === 'fill') {
+      const next = recolorTopShapeAt(activePath, point.x, point.y, activeKey);
+      if (next !== activePath) commitPath(next);
+    } else if (tool === 'brush') {
+      startBrushStroke(point, event);
+    } else if (tool === 'path-select') {
+      startPathSelectStroke(point, event);
+    } else if (tool === 'bend') {
+      startBendStroke(point);
+    }
+  }
   function startTool(event) {
     // Pull keyboard focus into this editor iframe so Cmd+Z reaches our undo
     // handler (bound on this iframe's window) instead of falling through to the
@@ -454,6 +1781,23 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     // after clicking a non-focusable canvas, so we focus it explicitly. Done
     // before the early-return so even a click outside a cell claims focus.
     event.currentTarget.focus({ preventScroll: true });
+    if (isPathLayer) {
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const point = eventToPoint(event, width, height);
+      if (picking) {
+        const cells = cellsAt(sprite, selection.layerIndex, selection.frameIndex);
+        setActiveKey(
+          sampleKey(cells, {
+            x: Math.min(width - 1, Math.floor(point.x)),
+            y: Math.min(height - 1, Math.floor(point.y)),
+          })
+        );
+        setPicking(false);
+        return;
+      }
+      startPathTool(point, event);
+      return;
+    }
     const point = eventToCell(event, width, height);
     if (!point) return;
     event.currentTarget.setPointerCapture(event.pointerId);
@@ -520,13 +1864,72 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   function updateTool(event) {
     const stroke = strokeRef.current;
     if (!stroke || event.buttons !== 1) return;
+    if (isPathLayer) {
+      updateStroke(eventToPoint(event, width, height), event);
+      return;
+    }
     const point = eventToCell(event, width, height);
-    if (point) updateStroke(point);
+    if (point) updateStroke(point, event);
   }
   // Track the hovered cell for the non-destructive tool preview overlay. While a
   // stroke is active the preview is hidden so it never fights the live paint.
   function handlePointerMove(event) {
     updateTool(event);
+    if (isPathLayer) {
+      if (strokeRef.current) {
+        setHoverPoint(null);
+        setHoverInsertEdge(null);
+        setHoverEdge(null);
+        setFillHoverTarget(null);
+        // Brush create-drags write pathBakePreview in updateTool; clearing it
+        // here made the last setState(null) win every move and blank the bake.
+        if (!isPathBrushStroke(strokeRef.current)) setPathBakePreview(null);
+        return;
+      }
+      const point = eventToPoint(event, width, height);
+      const halfPixel = !!event.altKey;
+      // Brush: snapped landing ghost (pen mode also previews edge-insert + bake).
+      // Bend: highlight the edge that would bend.
+      if (tool === 'brush' && brushMode === 'pen') {
+        const sole = selectedShapeIndices.length === 1 ? selectedShapeIndices[0] : -1;
+        const preview = previewPenLanding(activePath, sole, point.x, point.y, halfPixel, pathCellPull);
+        setHoverPoint(preview.point);
+        setHoverInsertEdge(preview.edge);
+        setFillHoverTarget(null);
+        updatePenHoverBake(point, halfPixel);
+      } else if (tool === 'brush') {
+        setHoverPoint(snapPenAnchor(point.x, point.y, halfPixel, pathCellPull));
+        setHoverInsertEdge(null);
+        setFillHoverTarget(null);
+        setPathBakePreview(null);
+      } else if (tool === 'bend') {
+        setHoverPoint(null);
+        setHoverInsertEdge(hitTestPathEdge(activePath, point.x, point.y, pathHitRadii.edge));
+        setFillHoverTarget(null);
+        setPathBakePreview(null);
+      } else if (tool === 'fill') {
+        setHoverPoint(null);
+        setHoverInsertEdge(null);
+        setFillHoverTarget(hitTestFillToolTarget(activePath, point.x, point.y));
+        setPathBakePreview(null);
+      } else if (tool === 'path-select') {
+        const sole = selectedShapeIndices.length === 1 ? selectedShapeIndices[0] : -1;
+        const hit = sole >= 0 ? hitTestShapeEdge(activePath, sole, point.x, point.y, pathHitRadii.edge) : null;
+        setHoverEdge(
+          hit ? { shapeIndex: sole, subIndex: hit.subIndex, edgeIndex: hit.edgeIndex } : null
+        );
+        setHoverPoint([point.x, point.y]);
+        setHoverInsertEdge(null);
+        setFillHoverTarget(null);
+        setPathBakePreview(null);
+      } else {
+        setHoverPoint([point.x, point.y]);
+        setHoverInsertEdge(null);
+        setFillHoverTarget(null);
+        setPathBakePreview(null);
+      }
+      return;
+    }
     if (strokeRef.current) {
       setHoverCell(null);
       return;
@@ -536,8 +1939,15 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   }
   function clearHover() {
     setHoverCell(null);
+    setHoverPoint(null);
+    setHoverInsertEdge(null);
+    setHoverEdge(null);
+    setFillHoverTarget(null);
+    // pointerleave still fires under capture when exiting the artboard box —
+    // don't wipe an in-flight brush bake preview.
+    if (!isPathBrushStroke(strokeRef.current)) setPathBakePreview(null);
   }
-  function updateStroke(point) {
+  function updateStroke(point, event) {
     const stroke = strokeRef.current;
     if (!stroke) return;
     if (stroke.tool === 'select') {
@@ -552,7 +1962,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       stroke.lastPoint = point;
       return;
     }
-    if (stroke.tool === 'brush') {
+    if (stroke.tool === 'brush' && stroke.brushMode == null) {
       liveStroke(paintLine(stroke.draftCells, stroke.lastPoint, point, activeKey, brushSize));
       stroke.lastPoint = point;
     } else if (stroke.tool === 'erase') {
@@ -569,10 +1979,103 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       const x = stroke.startOffset.x + (point.x - stroke.startPoint.x);
       const y = stroke.startOffset.y + (point.y - stroke.startPoint.y);
       liveSprite(setCellOffset(stroke.base, stroke.layerIndex, stroke.frameIndex, x, y));
+    } else if (isPathBrushStroke(stroke)) {
+      applyBrushModifiers(stroke, event);
+      if (stroke.brushMode === 'freehand') {
+        const ink = brushInkRef.current;
+        appendInkPoint(ink, point.x, point.y);
+        brushInkRef.current = ink;
+        setBrushInk(ink.slice());
+        const now = performance.now();
+        if (now - (stroke.lastFitAt || 0) >= 30) {
+          stroke.lastFitAt = now;
+          refitBrushGhost(ink, stroke.halfPixel);
+        }
+      } else {
+        stroke.lastPoint = point;
+        refitBrushPrimitiveGhost(stroke.startPoint, point, stroke.halfPixel, stroke.constrain);
+      }
+    } else if (stroke.tool === 'path-select') {
+      const dx = point.x - stroke.startPoint.x;
+      const dy = point.y - stroke.startPoint.y;
+      if (Math.hypot(dx, dy) > 0.2) stroke.dragged = true;
+      if (stroke.mode === 'marquee') {
+        stroke.lastPoint = point;
+        setShapeMarquee(
+          rectFromPoints(
+            { x: Math.floor(stroke.startPoint.x), y: Math.floor(stroke.startPoint.y) },
+            { x: Math.floor(point.x), y: Math.floor(point.y) },
+            width,
+            height
+          )
+        );
+      } else if (stroke.mode === 'anchors') {
+        liveSprite(
+          withPathAt(
+            stroke.base,
+            stroke.layerIndex,
+            stroke.frameIndex,
+            applyAnchorsDrag(
+              stroke.path,
+              stroke.shapeIndex,
+              stroke.anchors,
+              stroke.starts,
+              dx,
+              dy,
+              !!event?.altKey,
+              pathCellPull
+            )
+          )
+        );
+      } else if (stroke.mode === 'shapes') {
+        liveSprite(
+          withPathAt(
+            stroke.base,
+            stroke.layerIndex,
+            stroke.frameIndex,
+            applyShapesDrag(
+              stroke.path,
+              stroke.shapeIndices,
+              stroke.pointStarts,
+              dx,
+              dy,
+              !!event?.altKey,
+              pathCellPull
+            )
+          )
+        );
+      }
+    } else if (stroke.tool === 'bend') {
+      updateBendStroke(point);
+    }
+  }
+  function updateBendStroke(point) {
+    const stroke = strokeRef.current;
+    if (!stroke || stroke.tool !== 'bend') return;
+    const nextPath = applyEdgeBow(
+      stroke.path,
+      stroke.edge.shapeIndex,
+      stroke.edge.subIndex,
+      stroke.edge.edgeIndex,
+      point.x,
+      point.y
+    );
+    if (nextPath) {
+      stroke.currentPath = nextPath;
+      liveSprite(withPathAt(stroke.base, stroke.layerIndex, stroke.frameIndex, nextPath));
     }
   }
-  function finishTool() {
+  function finishTool(event) {
     const stroke = strokeRef.current;
+    if (isPathBrushStroke(stroke)) {
+      // Honor modifiers at release — stroke.constrain is only updated on move, so
+      // releasing Shift before mouse-up would otherwise commit a loose oval.
+      if (event && stroke.brushMode !== 'freehand') {
+        applyBrushModifiers(stroke, event);
+      }
+      commitBrushGesture(stroke.lastPoint);
+      return;
+    }
     if (stroke && stroke.tool === 'select') {
       if (stroke.mode === 'new' && samePoint(stroke.startPoint, stroke.lastPoint)) {
         // A click with no drag deselects.
@@ -583,7 +2086,71 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
         // ended fully off-canvas.
         setMarquee((rect) => clampRectToCanvas(rect, width, height));
       }
+    } else if (stroke && stroke.tool === 'path-select') {
+      if (stroke.mode === 'marquee') {
+        setShapeMarquee(null);
+        if (stroke.dragged) {
+          const rect = rectFromPoints(
+            { x: Math.floor(stroke.startPoint.x), y: Math.floor(stroke.startPoint.y) },
+            {
+              x: Math.floor((stroke.lastPoint ?? stroke.startPoint).x),
+              y: Math.floor((stroke.lastPoint ?? stroke.startPoint).y),
+            },
+            width,
+            height
+          );
+          if (stroke.target === 'anchors') {
+            const hits = hitTestAnchorsInRect(activePath, stroke.shapeIndex, rect);
+            if (stroke.additive) {
+              const merged = new Map();
+              for (const anchor of [...stroke.originAnchors, ...hits]) {
+                merged.set(anchorKey(anchor), anchor);
+              }
+              setSelectedAnchors([...merged.values()]);
+            } else {
+              setSelectedAnchors(hits);
+            }
+          } else {
+            const hits = hitTestShapesInRect(activePath, rect);
+            if (stroke.additive) {
+              const merged = new Set([...stroke.originSelection, ...hits]);
+              setSelectedShapeIndices([...merged].sort((a, b) => a - b));
+            } else {
+              setSelectedShapeIndices(hits);
+            }
+            setSelectedAnchors([]);
+          }
+        }
+        // Click on empty with no drag: selection already cleared on pointer-down
+        // (additive click-without-drag leaves originSelection alone).
+      } else if (stroke.mode === 'shapes' && stroke.pendingCollapse != null && !stroke.dragged) {
+        setSelectedShapeIndices([stroke.pendingCollapse]);
+        setSelectedAnchors([]);
+      } else if (stroke.mode === 'shapes' && stroke.pendingEdge && !stroke.dragged) {
+        const shapeIndex = stroke.shapeIndices[0];
+        const { ref, double, additive } = stroke.pendingEdge;
+        const picked = double
+          ? edgesOfSubpath(activePath, shapeIndex, ref.subIndex)
+          : [ref];
+        setSelectedEdges((prev) => {
+          const keep = additive && prev?.shapeIndex === shapeIndex ? prev.edges : [];
+          const merged = new Map(keep.map((e) => [edgeKey(e), e]));
+          // Shift-clicking an edge that is already in the pick takes it back out.
+          for (const e of picked) {
+            const id = edgeKey(e);
+            if (additive && !double && merged.has(id)) merged.delete(id);
+            else merged.set(id, e);
+          }
+          return merged.size ? { shapeIndex, edges: [...merged.values()] } : null;
+        });
+        setSelectedAnchors([]);
+      } else if (stroke.mode === 'anchors' && stroke.pendingCollapse != null && !stroke.dragged) {
+        setSelectedAnchors([stroke.pendingCollapse]);
+      }
     }
+    // After the selection above has resolved against the path as dragged, so a
+    // subpath absorbed here cannot shift the indices that resolution just used.
+    settleDraggedPath(stroke);
     strokeRef.current = null;
   }
 
@@ -596,6 +2163,9 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     playing,
     setOnion,
   });
+  function selectPaletteKey(key) {
+    setActiveKey(key);
+  }
 
   return (
     <PxArtShell path={path} subtitle={pxArtSubtitle(sprite)} shell={headerShell} chrome={chrome} editorBodyRef={editorBodyRef}>
@@ -604,13 +2174,13 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
           <div className={tl.artboardRegion} style={{ position: 'relative' }}>
             <div className={styles.artboardToolColumn}>
               <PixelToolStrip
-                tools={PIXEL_TOOLS}
+                tools={isPathLayer ? PATH_TOOLS : PIXEL_TOOLS}
                 tool={tool}
                 onSelectTool={(id) => {
                   setPicking(false);
                   setTool(id);
                 }}
-                ariaLabel="Sprite tools"
+                ariaLabel={isPathLayer ? 'Path tools' : 'Sprite tools'}
               />
               {/* Undo/redo in their own band below the tools (the flow mount shows
                   no editor header, so this is the on-screen affordance here). */}
@@ -644,9 +2214,10 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
                       height={height}
                       onResize={(w, h) => history.commit(serializeModel(resizeSprite(sprite, w, h)))}
                     />
-                    <CornerRadiusBar
-                      radius={sprite.cornerRadius}
-                      onChange={(radius) => history.commit(serializeModel(setCornerRadius(sprite, radius)))}
+                    <FinishBar
+                      renderer={sprite.renderer}
+                      cornerRadius={sprite.cornerRadius}
+                      onChange={(finish) => history.commit(serializeModel(setFinish(sprite, finish)))}
                     />
                   </div>
                 </div>
@@ -662,7 +2233,12 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
                     canvasRef={canvasRef}
                     smoothRef={smoothRef}
                     overlayRef={overlayRef}
-                    style={{ ...artboardCanvasStyle, cursor }}
+                    smoothPreview={displayFinish(sprite).smooth}
+                    style={{
+                      ...artboardCanvasStyle,
+                      ...latticeBackground(isPathLayer, artboardCanvasStyle, width, height),
+                      cursor,
+                    }}
                     handlers={{
                       onPointerDown: startTool,
                       onPointerMove: handlePointerMove,
@@ -682,11 +2258,12 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
                 paletteOpen={paletteOpen}
                 onTogglePalette={togglePalette}
                 colorButtonRef={colorButtonRef}
-                onSelectKey={setActiveKey}
+                onSelectKey={selectPaletteKey}
                 paletteKeys={EDITOR_KEYS}
                 palette={EDITOR_PALETTE}
                 moveActions={moveActions}
                 selectActions={selectActions}
+                pathActions={isPathLayer ? pathActions : null}
               />
             </div>
             <div style={PXART_ZOOM_CONTROLS_STYLE}>
@@ -705,6 +2282,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
           </div>
           <PxArtTimeline
             sprite={sprite}
+            text={text}
             selection={selection}
             playing={playing}
             onion={onion}
@@ -714,11 +2292,12 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
         <PxArtInspectorDock
           toolState={toolState}
           activeKey={activeKey}
-          onSelectKey={setActiveKey}
+          onSelectKey={selectPaletteKey}
           paletteKeys={EDITOR_KEYS}
           palette={EDITOR_PALETTE}
           moveActions={moveActions}
           selectActions={selectActions}
+          pathActions={isPathLayer ? pathActions : null}
         />
       </div>
     </PxArtShell>
@@ -733,8 +2312,8 @@ function buildActions({ sprite, selection, history, setSelection, setPlaying, pl
   const commit = (next) => history.commit(serializeModel(next));
   return {
     selectCell: (li, fi) => setSelection({ layerIndex: li, frameIndex: fi }),
-    addLayer: (li) => {
-      commit(addLayer(sprite, li));
+    addLayer: (li, kind = 'pixel') => {
+      commit(addLayer(sprite, li, kind));
       setSelection({ layerIndex: li + 1, frameIndex });
     },
     deleteLayer: (li) => {
@@ -750,6 +2329,7 @@ function buildActions({ sprite, selection, history, setSelection, setPlaying, pl
       setSelection({ layerIndex: li + dir, frameIndex });
     },
     patchLayer: (li, patch) => commit(patchLayer(sprite, li, patch)),
+    setLayerKind: (li, kind) => commit(setLayerKind(sprite, li, kind)),
     addFrame: (fi) => {
       commit(addFrame(sprite, fi));
       setSelection({ layerIndex, frameIndex: fi + 1 });
@@ -822,6 +2402,7 @@ function useArtboardRender(canvasRef, text, sprite, previewIndex, onion, playing
     p.activeKey,
     p.selection.layerIndex,
     p.selection.frameIndex,
+    p.pathBakePreview,
   ]);
 }
 
@@ -836,12 +2417,13 @@ function useArtboardRender(canvasRef, text, sprite, previewIndex, onion, playing
 // triggers a re-render at the new supersample scale, not just a content
 // change. The supersample factor auto-fits to the displayed size (capped
 // between 4x and 16x).
-function useSmoothPreviewRender(smoothRef, text, sprite, frameIndex, displayWidth) {
+function useSmoothPreviewRender(smoothRef, text, sprite, frameIndex, displayWidth, bakePreview) {
   const cornerRadius = sprite?.cornerRadius ?? 0;
+  const vector = isVectorRenderer(sprite?.renderer);
   useEffect(() => {
     const canvas = smoothRef.current;
     if (!canvas) return;
-    if (!sprite || cornerRadius <= 0) {
+    if (!sprite || (!vector && cornerRadius === 0)) {
       canvas.width = 0;
       canvas.height = 0;
       return;
@@ -849,20 +2431,42 @@ function useSmoothPreviewRender(smoothRef, text, sprite, frameIndex, displayWidt
     const cssWidth = canvas.clientWidth || sprite.resolution.width;
     const dpr = window.devicePixelRatio || 1;
     const autoScale = Math.min(16, Math.max(4, Math.round((cssWidth * dpr) / sprite.resolution.width)));
-    renderSmoothSpriteFrame(sprite, frameIndex, canvas, { scale: autoScale, cornerRadius });
-  }, [text, frameIndex, smoothRef, cornerRadius, displayWidth]);
+    if (vector) {
+      renderSmoothCompositeFrame(sprite, frameIndex, canvas, { scale: autoScale });
+    } else {
+      renderSmoothSpriteFrame(sprite, frameIndex, canvas, { scale: autoScale, cornerRadius });
+    }
+  }, [text, frameIndex, smoothRef, cornerRadius, vector, displayWidth, bakePreview]);
+}
+
+// Snap-lattice dot field for path layers — always on the artboard frame so it
+// stays consistent across Pixel / ¼ / ½ / Smooth (shows through transparent
+// canvas areas; the inline background overrides the frame checkerboard).
+function latticeBackground(isPathLayer, canvasStyle, gridWidth, gridHeight) {
+  if (!isPathLayer || !canvasStyle) return {};
+  const pitchX = parseFloat(canvasStyle.width) / gridWidth;
+  const pitchY = parseFloat(canvasStyle.height) / gridHeight;
+  if (!Number.isFinite(pitchX) || !Number.isFinite(pitchY)) return {};
+  // Dots centered on cell centers (half-cell offset from the corner lattice).
+  const dots =
+    Math.min(pitchX, pitchY) >= 5
+      ? `radial-gradient(circle, rgba(255, 255, 255, 0.28) 1px, transparent 1.6px) ` +
+        `0 0 / ${pitchX}px ${pitchY}px, `
+      : '';
+  return { background: `${dots}#121212` };
 }
 
 // Window-scoped tool keyboard shortcuts, mounted only while the editor is.
 function useToolShortcuts(ctx) {
-  const { tool, picking, setTool, setPicking, setBrushSize, setEraseSize } = ctx;
+  const { tool, picking, brushMode, setTool, setPicking, setBrushSize, setEraseSize, setBrushMode, isPathLayer } =
+    ctx;
   useEffect(() => {
     function onKeyDown(event) {
       if (handleToolShortcut(event, ctx)) event.preventDefault();
     }
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [tool, picking, setTool, setPicking, setBrushSize, setEraseSize]);
+  }, [tool, picking, brushMode, setTool, setPicking, setBrushSize, setEraseSize, setBrushMode, isPathLayer]);
 }
 
 function renderArtboard(canvas, sprite, frameIndex, onion, playing, preview) {
@@ -875,27 +2479,26 @@ function renderArtboard(canvas, sprite, frameIndex, onion, playing, preview) {
     }
   }
   ctx.globalAlpha = 1;
-  // "Smooth" sprites are drawn by the display-resolution .drawingSmooth canvas
-  // BEHIND this one (see useSmoothPreviewRender); leaving this canvas
-  // transparent here lets that show through while pointer math, the marquee,
-  // and the tool-preview ghost below all keep working in native grid units.
-  if (sprite.cornerRadius <= 0) {
+  // Any non-Pixel finish is drawn by the display-resolution .drawingSmooth
+  // canvas BEHIND this one (see useSmoothPreviewRender); leaving this canvas
+  // transparent lets that show through while pointer math, the marquee, and the
+  // tool-preview ghost below all keep working in native grid units.
+  const { smooth } = displayFinish(sprite);
+  if (!smooth) {
     ctx.drawImage(frameCanvas(sprite, frameIndex), 0, 0);
   }
-  if (preview) drawToolPreview(ctx, canvas, preview);
+  // Smooth-finish previews render on the display-resolution overlay so they
+  // match the supersampled corner kernel instead of blurring on upscale.
+  if (preview && !smooth) drawToolPreview(ctx, canvas, preview);
 }
 
-// Render-only animated marching ants for the marquee selection, drawn on a
-// display-resolution overlay canvas (1 device pixel per CSS pixel) so the dashed
-// outline is crisp and bold rather than sub-pixel on the upscaled artboard.
-// `rect` is in canvas cells; null clears the overlay.
-function renderMarqueeOverlay(canvas, resolution, rect, antsOffset) {
-  if (!canvas || !resolution) return;
+function setupOverlayCanvas(canvas, resolution) {
+  if (!canvas || !resolution) return null;
   const ctx = canvas.getContext('2d');
-  if (!ctx) return;
+  if (!ctx) return null;
   const cssW = canvas.clientWidth;
   const cssH = canvas.clientHeight;
-  if (!cssW || !cssH) return;
+  if (!cssW || !cssH) return null;
   const dpr = window.devicePixelRatio || 1;
   const bw = Math.round(cssW * dpr);
   const bh = Math.round(cssH * dpr);
@@ -903,21 +2506,36 @@ function renderMarqueeOverlay(canvas, resolution, rect, antsOffset) {
   if (canvas.height !== bh) canvas.height = bh;
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   ctx.clearRect(0, 0, bw, bh);
-  if (!rect) return;
+  return {
+    ctx,
+    dpr,
+    sx: bw / resolution.width,
+    sy: bh / resolution.height,
+  };
+}
+
+// Display-resolution overlay for pixel layers: smooth tool preview + marquee.
+function renderPixelOverlay(canvas, resolution, { marquee, antsOffset, preview, cornerRadius }) {
+  const overlay = setupOverlayCanvas(canvas, resolution);
+  if (!overlay) return;
+  const { ctx, dpr, sx, sy } = overlay;
+  const scale = (sx + sy) / 2;
+
+  if (preview && cornerRadius !== 0) {
+    drawSmoothToolPreview(ctx, preview, { scale, sx, sy, dpr, cornerRadius });
+  }
+
+  if (!marquee) return;
 
-  const sx = bw / resolution.width;
-  const sy = bh / resolution.height;
   const lineWidth = Math.max(2, Math.round(2 * dpr));
   const dash = Math.max(5, Math.round(5 * dpr));
-  // Advance ~2 device px per tick (not a whole dash) so the ants crawl smoothly
-  // instead of teleporting a full dash each frame.
   const step = Math.max(1, Math.round(dpr));
   const move = (antsOffset * step) % (dash * 2);
   const half = lineWidth / 2;
-  const x = rect.x * sx + half;
-  const y = rect.y * sy + half;
-  const w = Math.max(lineWidth, rect.w * sx - lineWidth);
-  const h = Math.max(lineWidth, rect.h * sy - lineWidth);
+  const x = marquee.x * sx + half;
+  const y = marquee.y * sy + half;
+  const w = Math.max(lineWidth, marquee.w * sx - lineWidth);
+  const h = Math.max(lineWidth, marquee.h * sy - lineWidth);
 
   ctx.lineWidth = lineWidth;
   ctx.setLineDash([dash, dash]);
@@ -994,7 +2612,21 @@ function onionTint(src, color) {
 
 // Single-letter tool picks. The eyedropper ('i') is handled separately because
 // it toggles the transient picker rather than swapping the sidebar tool.
-const SHORTCUT_TOOLS = { b: 'brush', g: 'fill', s: 'shape', m: 'select', e: 'erase', v: 'move-all' };
+// Path layers: V select, B brush/freehand, P/L/R/O brush sub-modes, N bend, G fill.
+const PIXEL_SHORTCUT_TOOLS = {
+  b: 'brush',
+  g: 'fill',
+  s: 'shape',
+  m: 'select',
+  e: 'erase',
+  v: 'move-all',
+};
+const PATH_SHORTCUT_TOOLS = {
+  v: 'path-select',
+  b: 'brush',
+  n: 'bend',
+  g: 'fill',
+};
 
 // True when focus is on a text-entry control, so typing there isn't hijacked.
 function isTypingTarget(node) {
@@ -1014,7 +2646,7 @@ function stepBrushSize(current, delta) {
 // Resize the active tool with [ / ]. Only brush/erase have a size; other tools
 // make this a no-op (returns false so the caller leaves the key alone).
 function adjustToolSize(delta, ctx) {
-  if (ctx.tool === 'brush') {
+  if (ctx.tool === 'brush' && !ctx.isPathLayer) {
     ctx.setBrushSize((prev) => stepBrushSize(prev, delta));
     return true;
   }
@@ -1031,7 +2663,25 @@ function handleToolShortcut(event, ctx) {
   if (event.metaKey || event.ctrlKey || event.altKey) return false;
   if (isTypingTarget(event.target || document.activeElement)) return false;
   const key = event.key.toLowerCase();
-  const toolId = SHORTCUT_TOOLS[key];
+  if (ctx.isPathLayer) {
+    const brushMode = PATH_BRUSH_MODE_BY_KEY[key];
+    if (brushMode) {
+      ctx.setPicking(false);
+      ctx.setTool('brush');
+      ctx.setBrushMode?.(brushMode);
+      return true;
+    }
+    if (key === 'b') {
+      ctx.setPicking(false);
+      if (ctx.tool === 'brush' && ctx.brushMode !== 'freehand') {
+        ctx.setBrushMode?.('freehand');
+        return true;
+      }
+      ctx.setTool('brush');
+      return true;
+    }
+  }
+  const toolId = (ctx.isPathLayer ? PATH_SHORTCUT_TOOLS : PIXEL_SHORTCUT_TOOLS)[key];
   if (toolId) {
     ctx.setPicking(false);
     ctx.setTool(toolId);
@@ -1138,6 +2788,85 @@ function fillCellList(ctx, cells, color, alpha) {
   for (const cell of cells) ctx.fillRect(cell.x, cell.y, 1, 1);
 }
 
+function dabFootprintCells(cell, size) {
+  const cells = [];
+  forEachDab(size, (dx, dy) => cells.push({ x: cell.x + dx, y: cell.y + dy }));
+  return cells;
+}
+
+function dabFootprintBounds(cell, size) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  forEachDab(size, (dx, dy) => {
+    minX = Math.min(minX, dx);
+    minY = Math.min(minY, dy);
+    maxX = Math.max(maxX, dx);
+    maxY = Math.max(maxY, dy);
+  });
+  if (minX === Infinity) return null;
+  return { minX, minY, maxX, maxY };
+}
+
+// Smooth-finish tool ghost at display resolution (overlay canvas).
+function drawSmoothToolPreview(ctx, preview, { scale, sx, sy, dpr, cornerRadius }) {
+  const lineWidth = Math.max(2, Math.round(2 * dpr));
+  const half = lineWidth / 2;
+
+  if (preview.kind === 'footprint') {
+    renderSmoothCellsPreview(ctx, dabFootprintCells(preview.cell, preview.size), preview.color, {
+      scale,
+      cornerRadius,
+      alpha: PREVIEW_PAINT_ALPHA,
+    });
+  } else if (preview.kind === 'erase') {
+    renderSmoothCellsPreview(
+      ctx,
+      dabFootprintCells(preview.cell, preview.size),
+      '#ffffff',
+      { scale, cornerRadius, alpha: PREVIEW_WASH_ALPHA },
+    );
+    const bounds = dabFootprintBounds(preview.cell, preview.size);
+    if (bounds) {
+      ctx.save();
+      ctx.globalAlpha = 0.85;
+      ctx.strokeStyle = '#1c1c1c';
+      ctx.lineWidth = lineWidth;
+      ctx.strokeRect(
+        (preview.cell.x + bounds.minX) * sx + half,
+        (preview.cell.y + bounds.minY) * sy + half,
+        (bounds.maxX - bounds.minX + 1) * sx - lineWidth,
+        (bounds.maxY - bounds.minY + 1) * sy - lineWidth,
+      );
+      ctx.restore();
+    }
+  } else if (preview.kind === 'region') {
+    renderSmoothCellsPreview(ctx, preview.cells, preview.color, {
+      scale,
+      cornerRadius,
+      alpha: PREVIEW_HIGHLIGHT_ALPHA,
+    });
+  } else if (preview.kind === 'cell') {
+    renderSmoothCellsPreview(ctx, [preview.cell], '#ffffff', {
+      scale,
+      cornerRadius,
+      alpha: PREVIEW_HIGHLIGHT_ALPHA,
+    });
+    ctx.save();
+    ctx.globalAlpha = 0.9;
+    ctx.strokeStyle = '#1c1c1c';
+    ctx.lineWidth = lineWidth;
+    ctx.strokeRect(
+      preview.cell.x * sx + half,
+      preview.cell.y * sy + half,
+      sx - lineWidth,
+      sy - lineWidth,
+    );
+    ctx.restore();
+  }
+}
+
 // Render-only: paint the ghost overlay for the current tool onto the artboard
 // after the sprite. Never mutates the sprite, history, or serialized output.
 function drawToolPreview(ctx, canvas, preview) {