castle-web-cli 0.4.76 → 0.4.78

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

@@ -113,6 +113,45 @@ 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: '½' },
+];
+
+// 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 }) {
+  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) => (
+          <button
+            key={step.value}
+            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}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function ResolutionSelect({ label, value, onChange }) {
   const options = RESOLUTION_STEPS.includes(value)
     ? RESOLUTION_STEPS

package/kits/basic-2d/editors/pxArtEditorModel.js

@@ -1,4 +1,5 @@
 import {
+  clampCornerRadius,
   colorForKeyV2,
   DEFAULT_DURATION_MS,
   DEFAULT_RESOLUTION,
@@ -77,10 +78,19 @@ function blankSprite() {
     defaultDurationMs: DEFAULT_DURATION_MS,
     tags: [],
     defaultTag: undefined,
+    cornerRadius: 0,
     layers: [makeLayer('layer-0', 'Layer 1', [null])],
   };
 }
 
+// Set the file-level corner-rounding radius (0 = sharp/pixel). A no-op if
+// it's already that value (keeps identical sprites from producing spurious
+// history entries).
+export function setCornerRadius(sprite, radius) {
+  const clamped = clampCornerRadius(radius);
+  return sprite.cornerRadius === clamped ? sprite : { ...sprite, cornerRadius: clamped };
+}
+
 function makeLayer(id, name, cells) {
   return { id, name, visible: true, opacity: 1, blendMode: 'normal', kind: 'pixel', cells };
 }
@@ -635,7 +645,10 @@ function shiftCellOffset(cell, dx, dy) {
 // later needs no change here: if it survives the round-trip it was already
 // representable; if not, it correctly forces the full form.
 export function serializeModel(sprite) {
-  const compact = serializeCompact(fromCells(EDITOR_PALETTE, cellsAt(sprite, 0, 0)));
+  const compact = serializeCompact({
+    ...fromCells(EDITOR_PALETTE, cellsAt(sprite, 0, 0)),
+    cornerRadius: sprite.cornerRadius,
+  });
   const roundTripped = parseFull(compact);
   if (roundTripped && losslesslyCompact(sprite, roundTripped)) return compact;
   return serializeFull(sprite);
@@ -659,6 +672,7 @@ function losslesslyCompact(sprite, roundTripped) {
   if (frameCount(sprite) !== frameCount(roundTripped)) return false;
   if (sprite.tags.length !== roundTripped.tags.length) return false;
   if ((sprite.defaultTag ?? null) !== (roundTripped.defaultTag ?? null)) return false;
+  if (sprite.cornerRadius !== roundTripped.cornerRadius) return false;
   if (sprite.layers.length !== roundTripped.layers.length) return false;
 
   const lookupA = paletteLookup(sprite.palette);

package/kits/basic-2d/engine/liveReload.js

@@ -0,0 +1,88 @@
+// Consumer side of the serve's `files_changed` broadcast. The engine decides
+// what a change means for this bundle:
+//   - data files (.scene / .pxart / .drawing) are re-read over the serve's
+//     files API and folded into React state — live re-render, no reload.
+//   - code the bundle imports (per the event's module-graph closure), html,
+//     or added/deleted code files (import.meta.glob may pick them up) mean
+//     this context is stale — requestReload() (save-state hooks run first).
+import { useEffect, useRef, useState } from 'react';
+import { onFilesChanged, requestReload } from 'castle-web-sdk';
+import { initialFiles } from './files';
+
+const DATA_EXTS = ['.scene', '.pxart', '.drawing'];
+const CODE_EXTS = ['.js', '.jsx', '.ts', '.tsx', '.css'];
+
+export function isDataFile(path) {
+  return DATA_EXTS.some((ext) => path.endsWith(ext));
+}
+
+function needsContextReload(change) {
+  if (isDataFile(change.path)) return false;
+  if (change.path.endsWith('.html')) return true;
+  // In the module graph (directly or as someone's import) -> our code changed.
+  if (change.affected.length > 0) return true;
+  // A new/removed code file isn't in the graph yet but a glob may scan it.
+  if (change.event !== 'change') return CODE_EXTS.some((ext) => change.path.endsWith(ext));
+  return false;
+}
+
+async function readDeckFile(path) {
+  const res = await fetch(`/__castle/files/read?path=${encodeURIComponent(path)}`);
+  if (!res.ok) throw new Error(`read failed: ${res.status}`);
+  const data = await res.json();
+  return typeof data.contents === 'string' ? data.contents : '';
+}
+
+// Deck files as live state: starts from the build-time glob snapshot and stays
+// current as files change on disk from any source (editors, agents, terminal).
+// `shouldSkipPath` lets an editor keep its own in-flight edits from being
+// clobbered by the fs echo of a stale write. `dataVersion` bumps on every
+// applied data change — key a player on it to rebuild from fresh data.
+export function useLiveDeckFiles({ shouldSkipPath } = {}) {
+  const [files, setFiles] = useState(initialFiles);
+  const [dataVersion, setDataVersion] = useState(0);
+  const skipRef = useRef(shouldSkipPath);
+  skipRef.current = shouldSkipPath;
+
+  useEffect(
+    () =>
+      onFilesChanged((event) => {
+        if (event.changes.some(needsContextReload)) {
+          requestReload();
+          return;
+        }
+        const dataChanges = event.changes.filter(
+          (change) => isDataFile(change.path) && !skipRef.current?.(change.path)
+        );
+        if (dataChanges.length === 0) return;
+        void applyDataChanges(dataChanges, setFiles, setDataVersion);
+      }),
+    []
+  );
+
+  return { files, setFiles, dataVersion };
+}
+
+async function applyDataChanges(changes, setFiles, setDataVersion) {
+  const updates = await Promise.all(
+    changes.map(async (change) => {
+      if (change.event === 'delete') return { path: change.path, text: null };
+      try {
+        return { path: change.path, text: await readDeckFile(change.path) };
+      } catch {
+        return null; // read raced a delete / serve hiccup — skip this path
+      }
+    })
+  );
+  const applied = updates.filter(Boolean);
+  if (applied.length === 0) return;
+  setFiles((current) => {
+    const next = { ...current };
+    for (const { path, text } of applied) {
+      if (text === null) delete next[path];
+      else next[path] = text;
+    }
+    return next;
+  });
+  setDataVersion((version) => version + 1);
+}

package/kits/basic-2d/engine/pxart.js

@@ -40,6 +40,46 @@ export const COMPACT_FORM = 'compact';
 export const FULL_FORM = 'full';
 export const TRANSPARENT = '.';
 
+// ---------------------------------------------------------------------------
+// cornerRadius (file-level corner-rounding radius, in native-pixel units)
+// ---------------------------------------------------------------------------
+//
+// `cornerRadius` is a plain number: 0 renders sharp/nearest-neighbor (the
+// historical/default look, 1px/cell); anything > 0 is a corner-rounding
+// radius passed straight through to `pxartSmooth.js`'s local corner kernel.
+// A VALUE rather than a "pixel" | "smooth" flag, so the amount of rounding is
+// itself part of the portable file format instead of a fixed, code-side
+// constant every smooth sprite is stuck with.
+
+/** Corner cuts on the same 1-native-pixel edge must not overlap, so radii
+ *  above this are clamped on parse (and by the editor's UI). */
+export const MAX_CORNER_RADIUS = 0.5;
+
+export function clampCornerRadius(radius) {
+  return Math.min(MAX_CORNER_RADIUS, Math.max(0, radius));
+}
+
+// This field used to be called `render`: first a "pixel" | "smooth" string
+// enum, then (briefly) a bare numeric radius under that same key. Both
+// migrate on read so files from either era keep rendering rounded rather
+// than silently reverting to sharp; "smooth" specifically migrates to this
+// fixed value, since the string enum never carried an amount of its own.
+const LEGACY_SMOOTH_RADIUS = 0.25;
+
+/** Read the corner radius off a parsed JSON object, preferring the current
+ *  `cornerRadius` key and falling back to the legacy `render` key (see
+ *  above). Defaults to 0 (sharp) for anything else (missing field, typo, a
+ *  future value this parser doesn't know yet). */
+function parseCornerRadius(data) {
+  if (typeof data.cornerRadius === 'number' && Number.isFinite(data.cornerRadius)) {
+    return clampCornerRadius(data.cornerRadius);
+  }
+  const legacy = data.render;
+  if (typeof legacy === 'number' && Number.isFinite(legacy)) return clampCornerRadius(legacy);
+  if (legacy === 'smooth') return LEGACY_SMOOTH_RADIUS;
+  return 0;
+}
+
 /** Parse a .pxart string into a compact PxArt record, or null if it isn't the
  *  compact shape. Detects by STRUCTURE (object `palette` + `grid`); the on-disk
  *  `format` discriminator is optional. Tolerant of ragged rows and a `"."`
@@ -61,7 +101,7 @@ export function parseCompact(content) {
         if (typeof v === 'string') palette[k] = v;
         else if (v === null) palette[k] = null;
       }
-      return { palette, grid: data.grid };
+      return { palette, grid: data.grid, cornerRadius: parseCornerRadius(data) };
     }
   } catch {
     /* not valid pxart json */
@@ -70,12 +110,14 @@ export function parseCompact(content) {
 }
 
 /** Serialize a compact PxArt record to a .pxart string. Always stamps
- *  `format: "compact"`. */
+ *  `format: "compact"`. `cornerRadius` is omitted when it's 0 (sharp), so
+ *  existing (pixel) files stay byte-identical. */
 export function serializeCompact(art) {
   const out = {
     format: COMPACT_FORM,
     palette: art.palette,
     grid: art.grid,
+    ...(art.cornerRadius > 0 ? { cornerRadius: art.cornerRadius } : {}),
   };
   return JSON.stringify(out, null, 2) + '\n';
 }
@@ -548,6 +590,7 @@ export function parseFull(content) {
     defaultDurationMs,
     tags,
     defaultTag,
+    cornerRadius: parseCornerRadius(data),
     layers,
   };
 }
@@ -581,6 +624,7 @@ export function upgradeCompactToFull(art) {
     defaultDurationMs: DEFAULT_DURATION_MS,
     tags: [],
     defaultTag: undefined,
+    cornerRadius: art.cornerRadius,
     layers: [
       {
         id: 'layer-0',
@@ -641,6 +685,9 @@ export function serializeFull(sprite) {
       repeat: t.repeat,
     })),
     ...(sprite.defaultTag !== undefined ? { defaultTag: sprite.defaultTag } : {}),
+    // Omitted when it's 0 (sharp), so pixel-mode files stay byte-identical to
+    // their pre-smoothing shape.
+    ...(sprite.cornerRadius > 0 ? { cornerRadius: sprite.cornerRadius } : {}),
     layers: sprite.layers.map((l) => ({
       id: l.id,
       name: l.name,

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

@@ -0,0 +1,222 @@
+// ============================================================================
+// "Smooth" (Animal-Crossing-style) rendering for `.pxart` sprites.
+// ============================================================================
+//
+// Sprites with a file-level `cornerRadius` > 0 (see pxart.js /
+// docs/pxart-format.md) render through `renderSmoothSpriteFrame` instead of
+// 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.
+// ============================================================================
+
+import { MAX_CORNER_RADIUS, renderSpriteFrame } from './pxart';
+
+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). */
+export function renderSmoothSpriteFrame(
+  sprite,
+  frameIndex,
+  canvas,
+  { 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 native = document.createElement('canvas');
+  renderSpriteFrame(sprite, frameIndex, native);
+  const nctx = native.getContext('2d');
+  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;
+    const a = data[i + 3];
+    return a === 0 ? null : `${data[i]},${data[i + 1]},${data[i + 2]},${a}`;
+  };
+
+  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).
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) drawPixelBlock(ctx, colorAt, x, y, colorAt(x, y), clampedRadius);
+  }
+  ctx.restore();
+}
+
+// ---------------------------------------------------------------------------
+// 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) {
+  const north = colorAt(x, y - 1);
+  const south = colorAt(x, y + 1);
+  const west = colorAt(x - 1, y);
+  const east = colorAt(x + 1, y);
+
+  const cuts = [
+    ['TL', cornerFill(color, west, north, colorAt(x - 1, y - 1))],
+    ['TR', cornerFill(color, east, north, colorAt(x + 1, y - 1))],
+    ['BL', cornerFill(color, west, south, colorAt(x - 1, y + 1))],
+    ['BR', cornerFill(color, east, south, colorAt(x + 1, y + 1))],
+  ];
+
+  if (color) {
+    ctx.fillStyle = rgbaFillStyle(color);
+    ctx.fillRect(x, y, 1, 1);
+  }
+
+  if (cornerRadius <= 0) return;
+  for (const [corner, reveal] of cuts) {
+    if (reveal === NO_CUT) continue;
+    ctx.beginPath();
+    tracePixelWedge(ctx, corner, x, y, cornerRadius);
+    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.restore();
+    } else {
+      ctx.fillStyle = rgbaFillStyle(reveal);
+      ctx.fill();
+    }
+  }
+}
+
+// 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) {
+  if (corner === 'TL') {
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + r, y);
+    ctx.arcTo(x, y, x, y + 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);
+  } 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);
+  } 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.closePath();
+}

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

@@ -487,6 +487,9 @@
   height: 100%;
   display: block;
   touch-action: none;
+  /* tabIndex=-1 (keyboard-focus capture on pointer-down) would otherwise draw a
+     focus ring; focus here is programmatic only, never via keyboard. */
+  outline: none;
 }
 
 .stageCanvasEdit {
@@ -1112,6 +1115,18 @@
   max-height: 100%;
 }
 
+.canvasTopStack {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.canvasTopBar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
 .canvasSizeBar {
   display: flex;
   align-items: center;
@@ -1121,6 +1136,54 @@
   color: var(--castle-inspector-muted);
 }
 
+.cornerRadiusBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+  font-size: 12px;
+  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 {
+  display: flex;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  overflow: hidden;
+}
+
+.cornerRadiusSegments > * + * {
+  border-left: 1px solid var(--castle-inspector-border);
+}
+
+.cornerRadiusSegment {
+  min-width: 28px;
+  padding: 3px 8px;
+  border: 0;
+  background: var(--castle-inspector-button-bg);
+  color: var(--castle-inspector-text);
+  cursor: pointer;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35;
+}
+
+.cornerRadiusSegment:hover {
+  background: var(--castle-inspector-input-bg);
+}
+
+/* Compound selector (not a bare `.cornerRadiusSegmentOn`) for the same reason
+   documented above `.drawingToolButton.drawingToolSelected`: it must beat
+   `.cornerRadiusSegment:hover` on specificity no matter source order. */
+.cornerRadiusSegment.cornerRadiusSegmentOn,
+.cornerRadiusSegment.cornerRadiusSegmentOn:hover {
+  background: var(--castle-selected);
+  color: var(--castle-selected-ink);
+}
+
 .canvasSizeSep {
   color: var(--castle-inspector-muted);
   user-select: none;
@@ -1306,23 +1369,20 @@
   justify-content: center;
 }
 
-/* Stacks the native artboard canvas and the display-resolution overlay so the
-   marching-ants outline renders crisp instead of sub-pixel on the upscaled art. */
+/* Stacks the native artboard canvas, the smooth-preview canvas, and the
+   display-resolution overlay so the marching-ants outline renders crisp
+   instead of sub-pixel on the upscaled art. The checkerboard "transparency"
+   background lives on the FRAME (not the main canvas) so it doesn't paint
+   over the smooth-preview canvas underneath in "smooth" render mode. */
 .drawingArtboardFrame {
   position: relative;
   flex: 0 0 auto;
-}
-
-.drawingOverlay {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.drawingCanvas {
-  image-rendering: pixelated;
+  /* Own stacking context, so the negative-z .drawingSmooth canvas paints just
+     above THIS element's checkerboard background instead of sinking below it
+     (without isolation, negative z-index children paint before all in-flow
+     descendant backgrounds of the outer stacking context — checkerboard
+     included — hiding the smooth render entirely). */
+  isolation: isolate;
   background:
     linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
     linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
@@ -1336,7 +1396,41 @@
     8px -8px,
     -8px 0;
   border: 1px solid var(--castle-inspector-border);
+}
+
+.drawingOverlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+/* Behind the main canvas (negative z-index paints before static content in
+   the same containing block) — holds the corner-rounded render for "smooth"
+   sprites while the main canvas above it stays transparent except for tool
+   overlays, so editing interactions are unaffected. Empty/0-sized in "pixel"
+   mode. */
+.drawingSmooth {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.drawingCanvas {
+  image-rendering: pixelated;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   flex: 0 0 auto;
+  /* tabIndex=-1 (for keyboard-focus capture on pointer-down) would otherwise
+     draw a focus ring around the artboard; it's focused programmatically, never
+     via keyboard, so suppressing the outline is safe. */
+  outline: none;
 }
 
 .palette {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.76",
+  "version": "0.4.78",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"

package/kits/basic-2d/pnpm-workspace.yaml

@@ -1,3 +0,0 @@
-allowBuilds:
-  '@fortawesome/fontawesome-common-types': set this to true or false
-  '@fortawesome/free-solid-svg-icons': set this to true or false