castle-web-cli 0.4.115 → 0.4.116

package/kits/physics-2d/engine/pxartSmooth.js

@@ -7,71 +7,38 @@
 // the normal 1px/cell `renderSpriteFrame`.
 //
 // This is a LOCAL, per-pixel kernel filter — the same shape of algorithm as
-// Animal Crossing's actual smoothing (xBRZ-style template matching), not the
-// global boundary-trace-and-round approach this file used to implement. That
-// approach traced each region's FULL pixel-boundary loop and could detect
-// long straight/staircase runs across the whole loop; it looked fine on
-// blocky shapes but flattened organic curves it decided were "too regular",
-// which isn't fixable by tuning since the run detection itself is the
-// problem. This version never looks past a pixel's immediate 3x3
-// neighborhood, so there is no run/regularity detection to mis-fire — it
-// physically cannot flatten a curve, because it has no notion of a curve at
-// all, only of each corner in isolation.
-//
-// Approach, per source pixel P:
-//   1. Composite the frame normally (`renderSpriteFrame` — this already
-//      handles layer visibility/opacity/blend), then read back the native
-//      resolution raster. Regions are exact-RGBA-equality color runs, same as
-//      before.
-//   2. Supersample: P gets its own `scale` x `scale` block of the output
-//      canvas (plain grid subdivision — every output pixel belongs to
-//      exactly one source pixel's block, so there is no possibility of a
-//      gap or overlap between neighboring pixels' rendering).
-//   3. Fill P's whole block with its own color, then independently classify
-//      each of P's 4 corners against ONLY the 3 pixels touching that corner
-//      (2 edge-adjacent neighbors + 1 diagonal) and, for genuine convex
-//      corners, paint a `cornerRadius`-sized quarter-circle "cut" over that
-//      corner revealing the relevant neighbor's color (see `cornerFill`).
-// Because every pixel only ever paints within its OWN block, this recoloring
-// can never create a gap: it's the same guarantee a supersampled nearest-
-// neighbor render already has, just with a softened corner instead of a hard
-// one.
-//
-// Kept as a sibling of pxart.js (rather than inside it) so the format
-// parser/serializer stays focused on the on-disk shape.
+// Animal Crossing's actual smoothing (xBRZ-style template matching), not a
+// global vectorization pass. Under `renderer: "vector"`,
+// `renderSmoothCompositeFrame` paints each path layer's shape stack
+// analytically into the supersampled canvas (even-odd fills + 1-cell-wide
+// round-cap strokes) in painter's order.
 // ============================================================================
 
-import { MAX_CORNER_RADIUS, renderSpriteFrame } from './pxart';
+import {
+  MAX_CORNER_RADIUS,
+  colorForKeyV2,
+  isVectorRenderer,
+  paletteLookup,
+  renderSpriteFrame,
+  resolveCell,
+} from './pxart';
+import { absoluteSegment, normalizeSubpath } from './pxartPath.js';
 
 export const DEFAULT_SMOOTH_SCALE = 8;
 
-// Fallback only for a caller that omits `cornerRadius` entirely; every real
-// caller passes the sprite's own file-level `cornerRadius` value (see
-// docs/pxart-format.md and Sprite.jsx/PxArtEditor.jsx), which is how the
-// corner radius ends up being a portable, per-sprite part of the format
-// rather than a fixed constant every smooth sprite is stuck with.
 const FALLBACK_CORNER_RADIUS = 0.25;
 
-/** Render one frame of a Sprite with locally corner-rounded fills,
- *  supersampled into `canvas` (sized to width*scale x height*scale). Reuses
- *  `renderSpriteFrame` for compositing (layers, opacity, visibility, blend),
- *  so those keep working unchanged. `cornerRadius` is in native-pixel units,
- *  clamped to `MAX_CORNER_RADIUS` (two cuts on the same edge must not
- *  overlap). */
+/** Render one frame with locally corner-rounded fills. */
 export function renderSmoothSpriteFrame(
   sprite,
   frameIndex,
   canvas,
-  { scale = DEFAULT_SMOOTH_SCALE, cornerRadius = FALLBACK_CORNER_RADIUS } = {}
+  { scale = DEFAULT_SMOOTH_SCALE, cornerRadius = FALLBACK_CORNER_RADIUS } = {},
 ) {
   const clampedRadius = Math.min(MAX_CORNER_RADIUS, Math.max(0, cornerRadius));
-  const { width, height } = sprite.resolution;
-  canvas.width = Math.max(1, Math.round(width * scale));
-  canvas.height = Math.max(1, Math.round(height * scale));
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  if (width <= 0 || height <= 0) return;
+  const target = setupScaledCanvas(canvas, sprite.resolution, scale);
+  if (!target) return;
+  const { ctx, width, height } = target;
 
   const native = document.createElement('canvas');
   renderSpriteFrame(sprite, frameIndex, native);
@@ -79,9 +46,6 @@ export function renderSmoothSpriteFrame(
   const data = nctx?.getImageData(0, 0, width, height).data;
   if (!data) return;
 
-  // null = out of canvas OR fully transparent; both read as "not this pixel's
-  // color" to every classification below, same as the old mask's treatment
-  // of out-of-canvas/transparent as background.
   const colorAt = (x, y) => {
     if (x < 0 || x >= width || y < 0 || y >= height) return null;
     const i = (y * width + x) * 4;
@@ -90,31 +54,215 @@ export function renderSmoothSpriteFrame(
   };
 
   ctx.save();
-  ctx.scale(scale, scale);
-  // Every pixel is processed, including transparent ones: a fully-enclosed
-  // transparent "hole" is, from its own corners' point of view, exactly the
-  // same kind of convex corner as an opaque pixel poking out of a
-  // background — it needs to cut (and round) its OWN corners the same way,
-  // or an enclosed 1px hole would stay a hard square forever (its opaque
-  // neighbors never round toward it, by the same-neighbor rule below).
+  ctx.imageSmoothingEnabled = false;
   for (let y = 0; y < height; y++) {
-    for (let x = 0; x < width; x++) drawPixelBlock(ctx, colorAt, x, y, colorAt(x, y), clampedRadius);
+    for (let x = 0; x < width; x++) {
+      drawPixelBlock(ctx, colorAt, x, y, scale, colorAt(x, y), clampedRadius);
+    }
   }
   ctx.restore();
 }
 
+// Render the "smooth" finish one layer at a time. Path layers paint their
+// shape stack analytically at supersample; pixel layers use maximum corner
+// smoothing. Layer visibility and opacity remain authoritative.
+export function renderSmoothCompositeFrame(
+  sprite,
+  frameIndex,
+  canvas,
+  { scale = DEFAULT_SMOOTH_SCALE } = {},
+) {
+  const target = setupScaledCanvas(canvas, sprite.resolution, scale);
+  if (!target) return;
+  const { ctx, width, height } = target;
+
+  const lookup = paletteLookup(sprite.palette);
+  const prevAlpha = ctx.globalAlpha;
+  for (const layer of sprite.layers) {
+    if (!layer.visible || layer.opacity <= 0) continue;
+    const resolved = resolveCell(layer, frameIndex);
+    if (!resolved) continue;
+    ctx.globalAlpha = Math.min(1, Math.max(0, layer.opacity));
+    drawScaledLayer(ctx, sprite, layer, resolved, frameIndex, {
+      scale,
+      width,
+      height,
+      lookup,
+      analyticPath: true,
+      cornerRadius: MAX_CORNER_RADIUS,
+    });
+  }
+  ctx.globalAlpha = prevAlpha;
+}
+
+/**
+ * Draw one resolved layer into `ctx` at `scale`. A path layer renders
+ * analytically from its shape stack when `analyticPath`; everything else goes
+ * through the corner kernel at `cornerRadius`.
+ */
+function drawScaledLayer(
+  ctx,
+  sprite,
+  layer,
+  resolved,
+  frameIndex,
+  { scale, width, height, lookup, analyticPath, cornerRadius },
+) {
+  if (analyticPath && layer.kind === 'path' && resolved.path) {
+    const layerCanvas = renderScaledPathCell(resolved.path, width, height, scale, lookup);
+    ctx.drawImage(layerCanvas, Math.round(resolved.x * scale), Math.round(resolved.y * scale));
+    return;
+  }
+  const layerCanvas = document.createElement('canvas');
+  const single = { ...sprite, layers: [{ ...layer, visible: true, opacity: 1 }] };
+  renderSmoothSpriteFrame(single, frameIndex, layerCanvas, { scale, cornerRadius });
+  ctx.drawImage(layerCanvas, 0, 0);
+}
+
+/** Finish render of one (layer, frame) cell — path layers analytic under the
+ *  vector renderer, else baked grid + corner kernel. */
+export function renderSmoothLayerCell(
+  sprite,
+  layerIndex,
+  frameIndex,
+  canvas,
+  { scale = DEFAULT_SMOOTH_SCALE } = {},
+) {
+  const layer = sprite.layers[layerIndex];
+  if (!layer) return;
+  const resolved = resolveCell(layer, frameIndex);
+  if (!resolved) return;
+  const vector = isVectorRenderer(sprite.renderer);
+  const radius = sprite.cornerRadius ?? 0;
+  // Nothing to add over the plain nearest-neighbor blit.
+  if (!vector && radius === 0) return;
+
+  const { width, height } = sprite.resolution;
+  const lookup = paletteLookup(sprite.palette);
+  const target = setupScaledCanvas(canvas, sprite.resolution, scale);
+  if (!target) return;
+  const { ctx } = target;
+
+  const prevAlpha = ctx.globalAlpha;
+  ctx.globalAlpha = Math.min(1, Math.max(0, layer.opacity ?? 1));
+  drawScaledLayer(ctx, sprite, layer, resolved, frameIndex, {
+    scale,
+    width,
+    height,
+    lookup,
+    analyticPath: vector,
+    cornerRadius: vector ? MAX_CORNER_RADIUS : radius,
+  });
+  ctx.globalAlpha = prevAlpha;
+}
+
+function setupScaledCanvas(canvas, resolution, scale) {
+  const { width, height } = resolution;
+  canvas.width = Math.max(1, Math.round(width * scale));
+  canvas.height = Math.max(1, Math.round(height * scale));
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  return width > 0 && height > 0 ? { ctx, width, height } : null;
+}
+
+/**
+ * Analytic smooth render of a stacked path: fills as even-odd canvas paths,
+ * strokes as 1-cell-wide analytic strokes with round caps/joins along the
+ * true curves, shapes in stack order.
+ */
+function renderScaledPathCell(path, width, height, scale, lookup) {
+  const w = Math.max(1, Math.round(width * scale));
+  const h = Math.max(1, Math.round(height * scale));
+  const off = document.createElement('canvas');
+  off.width = w;
+  off.height = h;
+  const octx = off.getContext('2d');
+  if (!octx) return off;
+
+  for (const shape of path?.shapes ?? []) {
+    if (shape.fill) {
+      const color = colorForKeyV2(lookup, shape.fill);
+      if (color) {
+        const geometry = buildFillPath2D(shape, scale);
+        if (geometry) {
+          octx.fillStyle = color;
+          octx.fill(geometry, 'evenodd');
+        }
+      }
+    }
+    if (shape.stroke) {
+      const color = colorForKeyV2(lookup, shape.stroke);
+      if (color) {
+        octx.save();
+        octx.strokeStyle = color;
+        octx.lineWidth = scale; // 1 native cell
+        octx.lineCap = 'round';
+        octx.lineJoin = 'round';
+        for (const sub of shape.subpaths ?? []) {
+          const strokePath = buildSubpathPath2D(sub, scale);
+          if (strokePath) octx.stroke(strokePath);
+        }
+        octx.restore();
+      }
+    }
+  }
+  return off;
+}
+
+function buildFillPath2D(shape, scale) {
+  const geometry = new Path2D();
+  let any = false;
+  for (const sub of shape.subpaths ?? []) {
+    if (!sub.closed) continue;
+    if (appendSubpath(geometry, sub, scale)) any = true;
+  }
+  return any ? geometry : null;
+}
+
+function buildSubpathPath2D(sub, scale) {
+  const geometry = new Path2D();
+  if (!appendSubpath(geometry, sub, scale)) return null;
+  return geometry;
+}
+
+function appendSubpath(geometry, raw, scale) {
+  // Read through the same funnel as the bake does. A subpath still stored in
+  // the pre-segment form has no `start`, so reading it raw drew nothing at all
+  // — art that baked correctly at Pixel vanished at the smooth finishes.
+  const sub = normalizeSubpath(raw);
+  if (!sub?.start) return false;
+  geometry.moveTo(sub.start[0] * scale, sub.start[1] * scale);
+  let from = sub.start;
+  for (const seg of sub.segs ?? []) {
+    if (!seg.c1 && !seg.c2) {
+      geometry.lineTo(seg.to[0] * scale, seg.to[1] * scale);
+    } else {
+      const { c1, c2, to } = absoluteSegment(from, seg);
+      geometry.bezierCurveTo(
+        c1[0] * scale,
+        c1[1] * scale,
+        c2[0] * scale,
+        c2[1] * scale,
+        to[0] * scale,
+        to[1] * scale
+      );
+    }
+    from = seg.to;
+  }
+  if (sub.closed) geometry.closePath();
+  return true;
+}
+
 // ---------------------------------------------------------------------------
 // per-pixel local corner kernel
 // ---------------------------------------------------------------------------
 
 const NO_CUT = undefined;
 
-// Fill pixel (x, y)'s own unit square [x, x+1] x [y, y+1] with `color` (a
-// no-op when `color` is null — transparent, nothing to fill), then paint a
-// small rounded cut over each of its 4 corners that qualifies (see
-// `cornerFill`). Uses ONLY the 3x3 neighborhood of (x, y) — genuinely local,
-// unlike the old global loop trace.
-function drawPixelBlock(ctx, colorAt, x, y, color, cornerRadius) {
+function drawPixelBlock(ctx, colorAt, x, y, scale, color, cornerRadius) {
+  const px = x * scale;
+  const py = y * scale;
   const north = colorAt(x, y - 1);
   const south = colorAt(x, y + 1);
   const west = colorAt(x - 1, y);
@@ -129,20 +277,19 @@ function drawPixelBlock(ctx, colorAt, x, y, color, cornerRadius) {
 
   if (color) {
     ctx.fillStyle = rgbaFillStyle(color);
-    ctx.fillRect(x, y, 1, 1);
+    ctx.fillRect(px, py, scale, scale);
   }
 
   if (cornerRadius <= 0) return;
+  const r = cornerRadius * scale;
   for (const [corner, reveal] of cuts) {
     if (reveal === NO_CUT) continue;
     ctx.beginPath();
-    tracePixelWedge(ctx, corner, x, y, cornerRadius);
+    tracePixelWedge(ctx, corner, px, py, scale, r);
     if (reveal === null) {
-      // Revealing transparency: clip to the wedge and clear it, rather than
-      // fill it, since there's no color to paint.
       ctx.save();
       ctx.clip();
-      ctx.clearRect(x, y, 1, 1);
+      ctx.clearRect(px, py, scale, scale);
       ctx.restore();
     } else {
       ctx.fillStyle = rgbaFillStyle(reveal);
@@ -151,72 +298,76 @@ function drawPixelBlock(ctx, colorAt, x, y, color, cornerRadius) {
   }
 }
 
-// Classify one corner of pixel `color`, given its two edge-adjacent
-// neighbors (`a`, `b`) and its diagonal neighbor (`g`). Returns the neighbor
-// color to reveal at that corner's rounded cut, or `NO_CUT` to leave the
-// corner sharp:
-//   - `a` or `b` matches `color`: either a flat/interior corner, or (when
-//     they don't BOTH match) a straight edge passing by rather than a real
-//     corner. Either way, nothing to round from P's side — a matching
-//     neighbor's OWN corner classification (evaluated independently, when
-//     IT is P) is what rounds the opposite case; the physical wedge that
-//     gets cut always lives entirely inside whichever pixel's corner is
-//     convex, so there's no double-handling.
-//   - neither `a` nor `b` matches, but `g` DOES: a diagonal touch between
-//     two same-colored pixels (the "checkerboard" case). Left uncut, so a
-//     smoothed diagonal stroke doesn't get visually pinched off at every
-//     step.
-//   - neither `a`, `b`, nor `g` matches, and `a` and `b` are THE SAME color:
-//     a genuine, unambiguous convex corner of P's own region touching one
-//     other region. Cut it, revealing that color.
-//   - neither `a`, `b`, nor `g` matches, and `a` and `b` DIFFER: three (or
-//     four, counting `g`) distinct colors meet at this exact point — e.g. a
-//     "T" where one region's straight edge is crossed by the boundary
-//     between two others. Left uncut. Rounding here would have to guess
-//     which of `a`/`b` "wins", and since the pixel on the OTHER side of
-//     that guess is classifying this same point independently — and would
-//     guess differently — a pair of pixels each revealing the OTHER's
-//     color produces a little criss-crossed notch instead of one clean
-//     curve. Leaving every pixel at a 3+-way point sharp keeps it a single
-//     consistent (if unrounded) vertex.
 function cornerFill(color, a, b, g) {
   if (a === color || b === color) return NO_CUT;
   if (g === color) return NO_CUT;
   return a === b ? a : NO_CUT;
 }
 
-// `color` is always a `"r,g,b,a"` string (0-255 channels, alpha 0-255) —
-// see `colorAt` — never the transparent sentinel (only opaque colors ever
-// reach this function as `color`, only ever as `reveal`).
 function rgbaFillStyle(color) {
   const [r, g, b, a] = color.split(',').map(Number);
   return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
 }
 
-// Trace the small corner wedge that gets cut from pixel (x, y)'s unit square
-// at `corner` (one of 'TL' | 'TR' | 'BL' | 'BR'): the sliver between the
-// exact corner point and the quarter-circle of radius `r` tangent to both
-// adjacent edges at distance `r` from the corner — i.e. exactly the piece a
-// standard rounded-rect corner removes from a sharp one. `ctx.arcTo`'s
-// corner-point-as-control-point form draws that same tangent arc without
-// hand-computed sweep angles.
-function tracePixelWedge(ctx, corner, x, y, r) {
+/** Display-resolution ghost of native cells using the same corner kernel as placed pixels. */
+export function renderSmoothCellsPreview(
+  ctx,
+  cells,
+  color,
+  { scale, cornerRadius, alpha = 1 } = {},
+) {
+  if (!cells?.length || !scale || cornerRadius <= 0) return;
+  const clampedRadius = Math.min(MAX_CORNER_RADIUS, Math.max(0, cornerRadius));
+  const cellSet = new Set(cells.map((c) => `${c.x},${c.y}`));
+  const rgba = cssColorToRgbaString(color, alpha);
+  const colorAt = (x, y) => (cellSet.has(`${x},${y}`) ? rgba : null);
+
+  ctx.save();
+  ctx.imageSmoothingEnabled = false;
+  ctx.globalAlpha = 1;
+  for (const { x, y } of cells) {
+    drawPixelBlock(ctx, colorAt, x, y, scale, rgba, clampedRadius);
+  }
+  ctx.restore();
+}
+
+function cssColorToRgbaString(color, alpha = 1) {
+  let r = 255;
+  let g = 255;
+  let b = 255;
+  if (typeof color === 'string' && color.startsWith('#')) {
+    const h = color.slice(1);
+    if (h.length === 3) {
+      r = parseInt(h[0] + h[0], 16);
+      g = parseInt(h[1] + h[1], 16);
+      b = parseInt(h[2] + h[2], 16);
+    } else if (h.length >= 6) {
+      r = parseInt(h.slice(0, 2), 16);
+      g = parseInt(h.slice(2, 4), 16);
+      b = parseInt(h.slice(4, 6), 16);
+    }
+  }
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255);
+  return `${r},${g},${b},${a}`;
+}
+
+function tracePixelWedge(ctx, corner, px, py, cell, r) {
   if (corner === 'TL') {
-    ctx.moveTo(x, y);
-    ctx.lineTo(x + r, y);
-    ctx.arcTo(x, y, x, y + r, r);
+    ctx.moveTo(px, py);
+    ctx.lineTo(px + r, py);
+    ctx.arcTo(px, py, px, py + r, r);
   } else if (corner === 'TR') {
-    ctx.moveTo(x + 1, y);
-    ctx.lineTo(x + 1, y + r);
-    ctx.arcTo(x + 1, y, x + 1 - r, y, r);
+    ctx.moveTo(px + cell, py);
+    ctx.lineTo(px + cell, py + r);
+    ctx.arcTo(px + cell, py, px + cell - r, py, r);
   } else if (corner === 'BL') {
-    ctx.moveTo(x, y + 1);
-    ctx.lineTo(x, y + 1 - r);
-    ctx.arcTo(x, y + 1, x + r, y + 1, r);
+    ctx.moveTo(px, py + cell);
+    ctx.lineTo(px, py + cell - r);
+    ctx.arcTo(px, py + cell, px + r, py + cell, r);
   } else {
-    ctx.moveTo(x + 1, y + 1);
-    ctx.lineTo(x + 1 - r, y + 1);
-    ctx.arcTo(x + 1, y + 1, x + 1, y + 1 - r, r);
+    ctx.moveTo(px + cell, py + cell);
+    ctx.lineTo(px + cell - r, py + cell);
+    ctx.arcTo(px + cell, py + cell, px + cell, py + cell - r, r);
   }
   ctx.closePath();
 }

package/kits/physics-2d/engine/ui.jsx

@@ -5,6 +5,7 @@ import {
   faArrowsAltH,
   faArrowsAltV,
   faBars,
+  faBezierCurve,
   faChevronDown,
   faChevronRight,
   faChevronUp,
@@ -12,6 +13,8 @@ import {
   faClone,
   faCode,
   faCodeBranch,
+  faDotCircle,
+  faDrawPolygon,
   faEraser,
   faExpand,
   faExternalLinkAlt,
@@ -22,9 +25,12 @@ import {
   faGlobe,
   faImage,
   faLayerGroup,
+  faLocationArrow,
   faObjectGroup,
+  faPaintBrush,
   faPalette,
   faPencilAlt,
+  faPenNib,
   faPlay,
   faPlus,
   faRedo,
@@ -37,6 +43,7 @@ import {
   faStamp,
   faStop,
   faSyncAlt,
+  faTh,
   faTimes,
   faTrash,
   faUndo,
@@ -190,6 +197,7 @@ export function IconButton({ icon, label, active = false, variant = '', ...props
 }
 const icons = {
   bars: faBars,
+  'bezier-curve': faBezierCurve,
   camera: faVideo,
   'chevron-down': faChevronDown,
   'chevron-right': faChevronRight,
@@ -199,6 +207,8 @@ const icons = {
   code: faCode,
   // FA5 has no faCodeFork (that's the FA6 name); faCodeBranch is the fork glyph.
   'code-fork': faCodeBranch,
+  'dot-circle': faDotCircle,
+  'draw-polygon': faDrawPolygon,
   eraser: faEraser,
   expand: faExpand,
   external: faExternalLinkAlt,
@@ -209,13 +219,18 @@ const icons = {
   file: faFile,
   film: faFilm,
   globe: faGlobe,
+  grid: faTh,
   image: faImage,
   'layer-group': faLayerGroup,
+  // FA's location-arrow points up-right; flip it for a path-select cursor feel.
+  'location-arrow': { ...faLocationArrow, flipX: true },
   marquee: faVectorSquare,
   move: faArrowsAlt,
   'object-group': faObjectGroup,
+  paintbrush: faPaintBrush,
   palette: faPalette,
   pencil: faPencilAlt,
+  'pen-nib': faPenNib,
   play: faPlay,
   plus: faPlus,
   redo: faRedo,
@@ -244,7 +259,13 @@ export function Icon({ name }) {
     <svg
       viewBox={`0 0 ${width} ${height}`}
       aria-hidden="true"
-      style={{ width: '1em', height: '1em', display: 'inline-block', fill: 'currentColor' }}>
+      style={{
+        width: '1em',
+        height: '1em',
+        display: 'inline-block',
+        fill: 'currentColor',
+        ...(def.flipX ? { transform: 'scaleX(-1)' } : {}),
+      }}>
       <path d={d} />
     </svg>
   );

package/kits/physics-2d/engine/ui.module.css

@@ -1591,7 +1591,7 @@
   color: var(--castle-inspector-muted);
 }
 
-.cornerRadiusBar {
+.finishBar {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -1600,21 +1600,23 @@
   color: var(--castle-inspector-muted);
 }
 
-/* Corner-radius segmented control (0 / ¼ / ½) — same bordered-row-of-
-   buttons pattern as .drawingShapeModeRow, sized for short text labels
-   instead of square glyph buttons. */
-.cornerRadiusSegments {
+/* Finish segmented control (square / ¼ / ½ / circle) — bordered row of
+   short text + icon segments. */
+.finishSegments {
   display: flex;
   border: 1px solid var(--castle-inspector-border);
   border-radius: var(--castle-radius);
   overflow: hidden;
 }
 
-.cornerRadiusSegments > * + * {
+.finishSegments > * + * {
   border-left: 1px solid var(--castle-inspector-border);
 }
 
-.cornerRadiusSegment {
+.finishSegment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   min-width: 28px;
   padding: 3px 8px;
   border: 0;
@@ -1626,15 +1628,15 @@
   line-height: 1.35;
 }
 
-.cornerRadiusSegment:hover {
+.finishSegment:hover {
   background: var(--castle-inspector-input-bg);
 }
 
-/* Compound selector (not a bare `.cornerRadiusSegmentOn`) for the same reason
+/* Compound selector (not a bare `.finishSegmentOn`) for the same reason
    documented above `.drawingToolButton.drawingToolSelected`: it must beat
-   `.cornerRadiusSegment:hover` on specificity no matter source order. */
-.cornerRadiusSegment.cornerRadiusSegmentOn,
-.cornerRadiusSegment.cornerRadiusSegmentOn:hover {
+   `.finishSegment:hover` on specificity no matter source order. */
+.finishSegment.finishSegmentOn,
+.finishSegment.finishSegmentOn:hover {
   background: var(--castle-selected);
   color: var(--castle-selected-ink);
 }
@@ -1873,6 +1875,7 @@
   height: 100%;
   pointer-events: none;
   z-index: -1;
+  image-rendering: auto;
 }
 
 .drawingCanvas {
@@ -1888,6 +1891,19 @@
   outline: none;
 }
 
+/* Smooth/rounded finish: the main canvas is transparent (smooth layer below).
+   Pixelated upscaling of the native grid would paint a visible cell lattice
+   over the whole artboard — use auto scaling instead. */
+.drawingCanvasSmooth {
+  image-rendering: auto;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  flex: 0 0 auto;
+  outline: none;
+}
+
 .palette {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -2010,6 +2026,14 @@
   color: var(--castle-selected-ink);
 }
 
+/* Groups of shape-action rows (fill/stroke · transform · punch/delete). */
+.drawingShapeModeGroups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
 /* Horizontal segmented row of shape sub-mode buttons in the wide-layout Tool
    Settings panel. Reuses .drawingToolButton glyph buttons with shared borders. */
 .drawingShapeModeRow {

package/kits/physics-2d/package-lock.json

@@ -28,7 +28,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.11",
+      "version": "0.4.12",
       "devDependencies": {
         "eslint": "^9.0.0",
         "jscpd": "^4.0.5",