castle-web-cli 0.4.115 → 0.4.117

package/kits/physics-2d/editors/pixelCanvas.js

@@ -9,3 +9,16 @@ export function eventToCell(event, width, height) {
   if (x < 0 || y < 0 || x >= width || y >= height) return null;
   return { x, y };
 }
+
+// Fractional cell coordinates for vector-path tools. Unlike eventToCell,
+// drags clamp to the canvas edge instead of being rejected.
+export function eventToPoint(event, width, height) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const x = ((event.clientX - rect.left) / rect.width) * width;
+  const y = ((event.clientY - rect.top) / rect.height) * height;
+  return { x: clamp(x, 0, width), y: clamp(y, 0, height) };
+}
+
+function clamp(value, lo, hi) {
+  return Math.min(hi, Math.max(lo, value));
+}

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

@@ -49,14 +49,14 @@ export function PixelEditorHeader({ title, subtitle, shell, chrome }) {
 // "smooth"-mode sprites (empty/unused in "pixel" mode) so the interactive canvas
 // above it can stay at native resolution — pointer math and tool-preview overlays
 // are unaffected by the render mode.
-export function PixelArtboard({ canvasRef, smoothRef, overlayRef, style, handlers }) {
+export function PixelArtboard({ canvasRef, smoothRef, overlayRef, style, handlers, smoothPreview = false }) {
   return (
     <div className={styles.drawingArtboard}>
       <div className={styles.drawingArtboardFrame} style={style}>
         <canvas ref={smoothRef} className={styles.drawingSmooth} aria-hidden="true" />
         <canvas
           ref={canvasRef}
-          className={styles.drawingCanvas}
+          className={smoothPreview ? styles.drawingCanvasSmooth : styles.drawingCanvas}
           // Focusable so a pointer-down can pull keyboard focus into this editor
           // iframe (see startTool). Without it, Safari often leaves keyboard focus
           // on the top document and Cmd+Z falls through to the browser's own undo.

package/kits/physics-2d/editors/pixelGeometry.js

@@ -45,8 +45,10 @@ export function forEachLinePoint(from, to, visit) {
 }
 
 // The shape tools (square/circle/triangle) are bounded by the axis-aligned box
-// the drag sweeps out, so they share this normalized corner unpacking.
-function shapeBounds(from, to) {
+// the drag sweeps out, so they share this normalized corner unpacking. Exported
+// for the path-layer brush primitives, which sweep the same box in continuous
+// cell coords rather than integer cells.
+export function shapeBounds(from, to) {
   return {
     x0: Math.min(from.x, to.x),
     x1: Math.max(from.x, to.x),

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { RESOLUTION_STEPS } from '../engine/pxart';
+import { GRID_RENDERER, RESOLUTION_STEPS, VECTOR_RENDERER } from '../engine/pxart';
 import { cx, Icon, IconButton, Panel, styles } from '../engine/ui';
 
 // Brush/erase diameters offered by the pixel editors' size sliders.
@@ -17,6 +17,15 @@ export const PIXEL_TOOLS = [
   { id: 'erase', label: 'Erase', icon: 'eraser' },
 ];
 
+// Path-layer tools: brush (pen / freehand / primitives), select (move/z-order),
+// bend (drag bows on any hit edge), fill (recolor fill or stroke).
+export const PATH_TOOLS = [
+  { id: 'brush', label: 'Brush', icon: 'pencil', shortcut: 'B' },
+  { id: 'fill', label: 'Fill', icon: 'fill', shortcut: 'G' },
+  { id: 'path-select', label: 'Select', icon: 'location-arrow', shortcut: 'V' },
+  { id: 'bend', label: 'Bend', icon: 'bezier-curve', shortcut: 'N' },
+];
+
 // Sub-modes for the shape tool. Each drags out an axis-aligned box: line draws
 // the diagonal, square the rectangle, circle the inscribed ellipse, triangle an
 // isosceles triangle. `filled` (a separate toggle) applies to the closed three.
@@ -27,6 +36,21 @@ export const SHAPE_MODES = [
   { id: 'triangle', label: 'Triangle', icon: 'triangle' },
 ];
 
+// Sub-modes for the path brush tool: click-to-place pen, freehand fit, drag primitives.
+export const BRUSH_MODES = [
+  { id: 'freehand', label: 'Freehand', icon: 'paintbrush' },
+  { id: 'pen', label: 'Pen', icon: 'pen-nib', shortcut: 'P' },
+  { id: 'line', label: 'Line', icon: 'slash', shortcut: 'L' },
+  { id: 'rect', label: 'Rectangle', icon: 'square', shortcut: 'R' },
+  { id: 'circle', label: 'Ellipse', icon: 'circle', shortcut: 'O' },
+  { id: 'triangle', label: 'Triangle', icon: 'triangle' },
+];
+
+/** Path-layer brush sub-mode picks keyed by shortcut letter (lowercase). */
+export const PATH_BRUSH_MODE_BY_KEY = Object.fromEntries(
+  BRUSH_MODES.filter((mode) => mode.shortcut).map((mode) => [mode.shortcut.toLowerCase(), mode.id])
+);
+
 // Momentary transform actions the move tool exposes (it has no persistent
 // settings). Each `id` maps to a handler on the editor's `moveActions`.
 export const MOVE_ACTIONS = [
@@ -54,6 +78,7 @@ export function usePixelToolState() {
   const [eraseFillMode, setEraseFillMode] = useState(false);
   const [fillSwapMode, setFillSwapMode] = useState(false);
   const [shapeMode, setShapeMode] = useState('line');
+  const [brushMode, setBrushMode] = useState('freehand');
   const [shapeFill, setShapeFill] = useState(false);
   return {
     tool,
@@ -70,6 +95,8 @@ export function usePixelToolState() {
     setFillSwapMode,
     shapeMode,
     setShapeMode,
+    brushMode,
+    setBrushMode,
     shapeFill,
     setShapeFill,
   };
@@ -84,7 +111,9 @@ export function PixelToolStrip({ tools, tool, onSelectTool, ariaLabel, disabled
         <button
           key={candidate.id}
           type="button"
-          title={candidate.label}
+          title={
+            candidate.shortcut ? `${candidate.label} (${candidate.shortcut})` : candidate.label
+          }
           aria-label={candidate.label}
           aria-pressed={tool === candidate.id ? 'true' : 'false'}
           disabled={disabled}
@@ -113,38 +142,57 @@ export function CanvasSizeBar({ width, height, onResize }) {
   );
 }
 
-// The 3 corner-radius presets offered by CornerRadiusBar. 0 is sharp/pixel;
-// the other two are "nice" rounded amounts. The file format itself isn't
-// limited to these three (any value up to MAX_CORNER_RADIUS is valid — see
-// pxart.js) — this is just the curated set the editor's segmented control
-// exposes, so hand-picking a value never means hunting a slider.
-const CORNER_RADIUS_STEPS = [
-  { value: 0, label: '0' },
-  { value: 0.25, label: '¼' },
-  { value: 0.5, label: '½' },
+// Curated finish presets: sharp pixels, two corner radii, and vector-aware
+// smooth rendering.
+// The curated presets over the two finish fields. The format itself is not
+// limited to these — any in-range radius is valid under either renderer (e.g.
+// from hand-edited JSON) — but picking a finish shouldn't mean hunting a slider.
+const FINISH_STEPS = [
+  {
+    id: 'pixel',
+    label: 'Pixel',
+    icon: 'square',
+    title: 'Sharp (pixel) corners',
+    renderer: GRID_RENDERER,
+    cornerRadius: 0,
+  },
+  { id: 'quarter', label: '¼', title: 'Round corners, radius 0.25', renderer: GRID_RENDERER, cornerRadius: 0.25 },
+  { id: 'half', label: '½', title: 'Round corners, radius 0.5', renderer: GRID_RENDERER, cornerRadius: 0.5 },
+  {
+    id: 'vector',
+    label: 'Smooth',
+    icon: 'circle',
+    title: 'Smooth vector render (per layer)',
+    renderer: VECTOR_RENDERER,
+    cornerRadius: 0,
+  },
 ];
 
-// Corner-radius segmented control, meant to sit next to CanvasSizeBar above
-// the artboard. Sets the sprite's file-level `cornerRadius` field (a property
-// of the .pxart asset — see docs/pxart-format.md — not a per-actor Sprite
-// prop). `radius` is a plain number (0 = sharp/pixel corners); highlights
-// whichever preset it exactly matches, or none if it's a value from outside
-// this set (e.g. hand-edited JSON).
-export function CornerRadiusBar({ radius, onChange }) {
+// Finish segmented control, meant to sit next to CanvasSizeBar above the
+// artboard. Sets the sprite's file-level `renderer` + `cornerRadius` fields
+// (properties of the .pxart asset — see docs/pxart-format.md — not per-actor
+// Sprite props). Highlights whichever preset the pair exactly matches, or none
+// when it matches no preset.
+export function FinishBar({ renderer, cornerRadius, onChange }) {
+  const isOn = (step) =>
+    step.renderer === (renderer ?? GRID_RENDERER) && step.cornerRadius === (cornerRadius ?? 0);
   return (
-    <div className={styles.cornerRadiusBar} aria-label="Corner rounding">
-      <span>Round</span>
-      <div className={styles.cornerRadiusSegments} role="radiogroup" aria-label="Corner radius">
-        {CORNER_RADIUS_STEPS.map((step) => (
+    <div className={styles.finishBar} aria-label="Finish">
+      <span>Finish</span>
+      <div className={styles.finishSegments} role="radiogroup" aria-label="Finish">
+        {FINISH_STEPS.map((step) => (
           <button
-            key={step.value}
+            key={step.id}
             type="button"
             role="radio"
-            aria-checked={radius === step.value ? 'true' : 'false'}
-            className={cx(styles.cornerRadiusSegment, radius === step.value && styles.cornerRadiusSegmentOn)}
-            title={step.value === 0 ? 'Sharp (pixel) corners' : `Round corners, radius ${step.value}`}
-            onClick={() => onChange(step.value)}>
-            {step.label}
+            aria-label={step.label}
+            aria-checked={isOn(step) ? 'true' : 'false'}
+            className={cx(styles.finishSegment, isOn(step) && styles.finishSegmentOn)}
+            title={step.title}
+            onClick={() =>
+              onChange({ renderer: step.renderer, cornerRadius: step.cornerRadius })
+            }>
+            {step.icon ? <Icon name={step.icon} /> : step.label}
           </button>
         ))}
       </div>
@@ -172,9 +220,36 @@ function ResolutionSelect({ label, value, onChange }) {
 }
 
 // 12-column palette grid shared by the docked sidebar and the compact popover.
-export function PaletteGrid({ keys, palette, activeKey, onSelectKey }) {
+export function PaletteGrid({
+  keys,
+  palette,
+  activeKey,
+  onSelectKey,
+  allowNone = false,
+  noneSelected = false,
+  onSelectNone,
+}) {
   return (
     <div className={styles.palette}>
+      {allowNone ? (
+        <button
+          type="button"
+          className={cx(styles.swatch, noneSelected && styles.swatchSelected)}
+          title="None"
+          aria-label="None"
+          style={{ position: 'relative', background: 'transparent' }}
+          onClick={onSelectNone}>
+          <span
+            aria-hidden
+            style={{
+              position: 'absolute',
+              inset: 4,
+              background:
+                'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
+            }}
+          />
+        </button>
+      ) : null}
       {keys.map((key) => (
         <button
           key={key}
@@ -267,6 +342,31 @@ function ShapeModeButtons({ shapeMode, setShapeMode, buttonClass, radio = false
   );
 }
 
+function BrushModeButtons({ brushMode, setBrushMode, buttonClass, radio = false }) {
+  return (
+    <>
+      {BRUSH_MODES.map((mode) => {
+        const selected = brushMode === mode.id;
+        const title = mode.shortcut ? `${mode.label} (${mode.shortcut})` : mode.label;
+        return (
+          <button
+            key={mode.id}
+            type="button"
+            role={radio ? 'radio' : undefined}
+            className={cx(buttonClass, selected && styles.drawingToolSelected)}
+            title={title}
+            aria-label={mode.label}
+            aria-pressed={radio ? undefined : selected ? 'true' : 'false'}
+            aria-checked={radio ? (selected ? 'true' : 'false') : undefined}
+            onClick={() => setBrushMode(mode.id)}>
+            <Icon name={mode.icon} />
+          </button>
+        );
+      })}
+    </>
+  );
+}
+
 // The move tool's transform actions (flip H / flip V / rotate CW), shared by the
 // compact paint strip and the wide-layout settings panel. These are momentary
 // buttons (no selected state); `buttonClass` styles them for the host strip.
@@ -288,6 +388,201 @@ function MoveActionButtons({ moveActions, buttonClass }) {
   );
 }
 
+const ShapeSwatch = React.forwardRef(function ShapeSwatch(
+  { label, color, none, mixed, onClick, buttonClass },
+  ref
+) {
+  const title = mixed
+    ? `${label}: mixed. Click to edit.`
+    : `${label}: ${none ? 'none' : color}. Click to edit.`;
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={buttonClass}
+      title={title}
+      aria-label={`${label} ${mixed ? 'mixed' : none ? 'none' : color}`}
+      aria-haspopup="dialog"
+      onClick={onClick}
+      style={{
+        position: 'relative',
+        background: mixed
+          ? 'linear-gradient(135deg, #888 50%, #444 50%)'
+          : none
+            ? 'transparent'
+            : color,
+        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.35)',
+      }}>
+      {mixed ? (
+        <span
+          aria-hidden
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'grid',
+            placeItems: 'center',
+            fontSize: 11,
+            fontWeight: 700,
+            color: '#fff',
+            textShadow: '0 1px 1px #000',
+          }}>
+          ±
+        </span>
+      ) : none ? (
+        <span
+          aria-hidden
+          style={{
+            position: 'absolute',
+            inset: 4,
+            background:
+              'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
+          }}
+        />
+      ) : null}
+    </button>
+  );
+});
+
+function ShapeInspectorButtons({ pathActions, palette, paletteKeys, buttonClass, groupClass }) {
+  const [slotPicker, setSlotPicker] = useState(null);
+  const fillRef = useRef(null);
+  const strokeRef = useRef(null);
+  const anchorRef = slotPicker === 'fill' ? fillRef : strokeRef;
+  const fillSlot = pathActions?.fillSlot;
+  const strokeSlot = pathActions?.strokeSlot;
+  const fillMixed = fillSlot === 'mixed';
+  const strokeMixed = strokeSlot === 'mixed';
+  const fillColor = !fillMixed && fillSlot != null ? palette?.[fillSlot] : null;
+  const strokeColor = !strokeMixed && strokeSlot != null ? palette?.[strokeSlot] : null;
+  const pickerSlotValue = slotPicker === 'fill' ? fillSlot : slotPicker === 'stroke' ? strokeSlot : null;
+  const pickerMixed = pickerSlotValue === 'mixed';
+  const pickerKey =
+    pickerMixed || pickerSlotValue == null ? null : pickerSlotValue;
+  const pickerNoneSelected = !pickerMixed && pickerSlotValue == null;
+
+  function closePicker() {
+    setSlotPicker(null);
+  }
+
+  function applyPicker(key) {
+    if (slotPicker === 'fill') pathActions?.setFill(key);
+    else if (slotPicker === 'stroke') pathActions?.setStroke(key);
+    closePicker();
+  }
+
+  return (
+    <>
+      <div className={groupClass} role="group" aria-label="Fill and stroke">
+        <ShapeSwatch
+          ref={fillRef}
+          label="Fill"
+          color={fillColor ?? '#888'}
+          none={!fillMixed && fillSlot == null}
+          mixed={fillMixed}
+          onClick={() => setSlotPicker('fill')}
+          buttonClass={buttonClass}
+        />
+        <ShapeSwatch
+          ref={strokeRef}
+          label="Stroke"
+          color={strokeColor ?? '#888'}
+          none={!strokeMixed && strokeSlot == null}
+          mixed={strokeMixed}
+          onClick={() => setSlotPicker('stroke')}
+          buttonClass={buttonClass}
+        />
+      </div>
+      <div className={groupClass} role="group" aria-label="Transform and order">
+        <button
+          type="button"
+          className={buttonClass}
+          title="Flip horizontal"
+          aria-label="Flip horizontal"
+          disabled={!pathActions?.hasSelection}
+          onClick={pathActions?.flipH}>
+          <Icon name="flip-h" />
+        </button>
+        <button
+          type="button"
+          className={buttonClass}
+          title="Flip vertical"
+          aria-label="Flip vertical"
+          disabled={!pathActions?.hasSelection}
+          onClick={pathActions?.flipV}>
+          <Icon name="flip-v" />
+        </button>
+        <button
+          type="button"
+          className={buttonClass}
+          title="Rotate 90° clockwise"
+          aria-label="Rotate 90 degrees clockwise"
+          disabled={!pathActions?.hasSelection}
+          onClick={pathActions?.rotateCW}>
+          <Icon name="redo" />
+        </button>
+        <button
+          type="button"
+          className={buttonClass}
+          title="Bring forward (])"
+          aria-label="Bring shape forward"
+          disabled={!pathActions?.canForward}
+          onClick={pathActions?.bringForward}>
+          <Icon name="chevron-up" />
+        </button>
+        <button
+          type="button"
+          className={buttonClass}
+          title="Send backward ([)"
+          aria-label="Send shape backward"
+          disabled={!pathActions?.canBackward}
+          onClick={pathActions?.sendBackward}>
+          <Icon name="chevron-down" />
+        </button>
+      </div>
+      <div className={groupClass} role="group" aria-label="Delete and punch">
+        <button
+          type="button"
+          className={buttonClass}
+          title="Delete shape"
+          aria-label="Delete shape"
+          disabled={!pathActions?.hasSelection}
+          onClick={pathActions?.deleteSelected}>
+          <Icon name="trash" />
+        </button>
+        <button
+          type="button"
+          className={buttonClass}
+          title={
+            pathActions?.canPunchHole
+              ? 'Punch Hole'
+              : 'Select one shape that fully contains the others'
+          }
+          aria-label="Punch Hole"
+          disabled={!pathActions?.canPunchHole}
+          onClick={pathActions?.punchHole}>
+          <Icon name="dot-circle" />
+        </button>
+      </div>
+      <PalettePopover open={!!slotPicker} anchorRef={anchorRef} onClose={closePicker}>
+        <div className={styles.palettePopoverHeader}>
+          <span className={styles.palettePopoverTitle}>
+            {slotPicker === 'fill' ? 'Fill' : 'Stroke'}
+          </span>
+        </div>
+        <PaletteGrid
+          keys={paletteKeys}
+          palette={palette}
+          activeKey={pickerKey}
+          allowNone
+          noneSelected={pickerNoneSelected}
+          onSelectNone={() => applyPicker(null)}
+          onSelectKey={applyPicker}
+        />
+      </PalettePopover>
+    </>
+  );
+}
+
 // Right-side paint strip (compact layout): color swatch, vertical size slider, and
 // tool-contextual mode toggles. Color tap opens the palette popover.
 export function PaintStrip({
@@ -302,6 +597,7 @@ export function PaintStrip({
   palette,
   moveActions,
   selectActions,
+  pathActions,
 }) {
   const {
     tool,
@@ -313,15 +609,17 @@ export function PaintStrip({
     fillSwapMode,
     shapeMode,
     shapeFill,
+    brushMode,
     setBrushSize,
     setEraseSize,
     setEraseFillMode,
     setFillSwapMode,
     setShapeMode,
+    setBrushMode,
     setShapeFill,
   } = toolState;
 
-  const showBrushSize = tool === 'brush';
+  const showBrushSize = tool === 'brush' && !pathActions;
   const showEraseSize = tool === 'erase';
   const size = showBrushSize ? brushSize : eraseSize;
   const onSizeChange = showBrushSize ? setBrushSize : setEraseSize;
@@ -372,6 +670,15 @@ export function PaintStrip({
             />
           </div>
         ) : null}
+        {tool === 'brush' && pathActions ? (
+          <div className={styles.paintStripSection}>
+            <BrushModeButtons
+              brushMode={brushMode}
+              setBrushMode={setBrushMode}
+              buttonClass={styles.paintStripModeButton}
+            />
+          </div>
+        ) : null}
         {tool === 'move-all' ? (
           <div className={styles.paintStripSection}>
             <MoveActionButtons moveActions={moveActions} buttonClass={styles.paintStripModeButton} />
@@ -406,7 +713,7 @@ export function PaintStrip({
             </button>
           </div>
         ) : null}
-        {tool === 'fill' ? (
+        {tool === 'fill' && !pathActions ? (
           <div className={styles.paintStripSection}>
             <button
               type="button"
@@ -438,6 +745,16 @@ export function PaintStrip({
             </button>
           </div>
         ) : null}
+        {/* Compact strip: shape actions only on select/bend — brush keeps room for modes. */}
+        {(tool === 'path-select' || tool === 'bend') && pathActions?.hasSelection ? (
+          <ShapeInspectorButtons
+            pathActions={pathActions}
+            palette={palette}
+            paletteKeys={paletteKeys}
+            buttonClass={styles.paintStripModeButton}
+            groupClass={styles.paintStripSection}
+          />
+        ) : null}
       </div>
       <PalettePopover open={paletteOpen} anchorRef={colorButtonRef} onClose={() => onTogglePalette(false)}>
         <div className={styles.palettePopoverHeader}>
@@ -465,7 +782,16 @@ export function PaintStrip({
 }
 
 // Wide-layout docked inspector: palette (when relevant) + tool settings only.
-export function PxArtInspectorDock({ toolState, activeKey, onSelectKey, paletteKeys, palette, moveActions, selectActions }) {
+export function PxArtInspectorDock({
+  toolState,
+  activeKey,
+  onSelectKey,
+  paletteKeys,
+  palette,
+  moveActions,
+  selectActions,
+  pathActions,
+}) {
   const { tool, picking, setPicking } = toolState;
   return (
     <aside className={cx(styles.pxArtInspector, styles.drawingToolsPanel)}>
@@ -490,13 +816,19 @@ export function PxArtInspectorDock({ toolState, activeKey, onSelectKey, paletteK
             />
           </Panel>
         ) : null}
-        <ToolSettingsPanel toolState={toolState} moveActions={moveActions} selectActions={selectActions} />
+        <ToolSettingsPanel
+          toolState={toolState}
+          moveActions={moveActions}
+          selectActions={selectActions}
+          pathActions={pathActions}
+          palette={palette}
+          paletteKeys={paletteKeys}
+        />
       </div>
     </aside>
   );
 }
 
-// A labeled on/off switch used for the editors' boolean tool modes.
 export function ModeToggle({ label, active, onChange }) {
   return (
     <div className={styles.drawingModeRow}>
@@ -516,7 +848,14 @@ export function ModeToggle({ label, active, onChange }) {
 // The "Tool Settings" panel for the pixel editor: brush/erase size sliders plus
 // the per-tool mode toggle / hint. It reads the whole usePixelToolState bundle
 // to keep callers from re-spreading the same prop list.
-export function ToolSettingsPanel({ toolState, moveActions, selectActions }) {
+export function ToolSettingsPanel({
+  toolState,
+  moveActions,
+  selectActions,
+  pathActions,
+  palette,
+  paletteKeys,
+}) {
   const {
     tool,
     brushSize,
@@ -525,11 +864,13 @@ export function ToolSettingsPanel({ toolState, moveActions, selectActions }) {
     fillSwapMode,
     shapeMode,
     shapeFill,
+    brushMode,
     setBrushSize,
     setEraseSize,
     setEraseFillMode,
     setFillSwapMode,
     setShapeMode,
+    setBrushMode,
     setShapeFill,
   } = toolState;
   return (
@@ -538,7 +879,7 @@ export function ToolSettingsPanel({ toolState, moveActions, selectActions }) {
         <ToolSizePicker
           label="Brush"
           value={brushSize}
-          visible={tool === 'brush'}
+          visible={tool === 'brush' && !pathActions}
           onChange={setBrushSize}
         />
         <ToolSizePicker
@@ -549,7 +890,7 @@ export function ToolSettingsPanel({ toolState, moveActions, selectActions }) {
           fill={eraseFillMode}
           onFillChange={setEraseFillMode}
         />
-        {tool === 'fill' ? (
+        {tool === 'fill' && !pathActions ? (
           <ModeToggle label="Swap Mode" active={fillSwapMode} onChange={setFillSwapMode} />
         ) : null}
         {tool === 'shape' ? (
@@ -568,6 +909,21 @@ export function ToolSettingsPanel({ toolState, moveActions, selectActions }) {
             <ModeToggle label="Fill Shape" active={shapeFill} onChange={setShapeFill} />
           </div>
         ) : null}
+        {tool === 'brush' && pathActions ? (
+          <div className={styles.drawingSizePicker}>
+            <div className={styles.drawingSizeLabel}>
+              <span>Brush</span>
+            </div>
+            <div className={styles.drawingShapeModeRow} role="radiogroup" aria-label="Brush mode">
+              <BrushModeButtons
+                brushMode={brushMode}
+                setBrushMode={setBrushMode}
+                buttonClass={styles.drawingToolButton}
+                radio
+              />
+            </div>
+          </div>
+        ) : null}
         {tool === 'move-all' ? (
           <div className={styles.drawingSizePicker}>
             <div className={styles.drawingSizeLabel}>
@@ -599,6 +955,23 @@ export function ToolSettingsPanel({ toolState, moveActions, selectActions }) {
         {tool === 'eyedropper' ? (
           <div className={styles.drawingToolHint}>Click a pixel to make it the active color.</div>
         ) : null}
+        {pathActions?.hasSelection &&
+        (tool === 'path-select' || (tool === 'brush' && pathActions) || tool === 'bend') ? (
+          <div className={styles.drawingSizePicker}>
+            <div className={styles.drawingSizeLabel}>
+              <span>Shape</span>
+            </div>
+            <div className={styles.drawingShapeModeGroups}>
+              <ShapeInspectorButtons
+                pathActions={pathActions}
+                palette={palette}
+                paletteKeys={paletteKeys}
+                buttonClass={styles.drawingToolButton}
+                groupClass={styles.drawingShapeModeRow}
+              />
+            </div>
+          </div>
+        ) : null}
       </div>
     </Panel>
   );