castle-web-cli 0.4.77 → 0.4.79

package/kits/basic-2d/docs/pxart-format.md

@@ -282,7 +282,85 @@ case).
 
 ---
 
-## 10. Reserved / out of scope
+## 10. Corner rounding
+
+```json
+"cornerRadius": 0.25
+```
+
+- A top-level **number**: a corner-rounding radius, in native-pixel units.
+  `0` (the default) renders sharp/nearest-neighbor, same as before this field
+  existed. Any value `> 0` renders rounded, by that amount — see "Rendering"
+  below. **File-level** — a property of the sprite asset itself, not a
+  per-actor/per-placement override. There is no equivalent `Sprite` behavior
+  prop.
+- **A value, not a flag**, deliberately: the amount of rounding is itself
+  part of the portable file format, not a fixed code-side constant every
+  smooth sprite would otherwise be stuck with. `MAX_CORNER_RADIUS` (0.5, in
+  `engine/pxart.js`) is the ceiling — two corner cuts on the same
+  1-native-pixel edge must not overlap — and any value is clamped to
+  `[0, MAX_CORNER_RADIUS]` on read. The `PxArtEditor` UI curates this down to
+  a 3-way segmented control (`0` / `¼` / `½`, see `CornerRadiusBar` in
+  `editors/pixelInspector.jsx`) so picking a value never means hunting a
+  slider, but the format itself isn't limited to those three — any in-range
+  number is valid, e.g. from hand-edited JSON or a future finer-grained UI.
+- **`0` is the default** and is never written to disk: `serializeFull` and
+  `serializeCompact` both OMIT the field when it's `0`, so existing (and
+  newly authored, unsmoothed) files stay byte-identical to their
+  pre-`cornerRadius`-field shape.
+- **Present in BOTH on-disk forms.** `parseCompact` reads a top-level
+  `cornerRadius` alongside `palette`/`grid`; `parseFull`'s native-full branch
+  reads it alongside `resolution`/`layers`; `upgradeCompactToFull` carries a
+  compact file's `cornerRadius` through into the upgraded Sprite. This means
+  the kit's save path — which picks compact vs. full by a serialize →
+  re-parse round-trip (`serializeModel` in `editors/pxArtEditorModel.js`, see
+  [§9](#9-compact-shorthand)) — never drops the field: a single-layer/frame
+  rounded sprite still serializes compact, with `cornerRadius: 0.25` alongside
+  `palette`/`grid`.
+- **Parser tolerance:** any non-finite-number value (missing field, `null`, a
+  typo) defaults to `0`. Numbers are clamped to `[0, MAX_CORNER_RADIUS]`.
+  **Legacy back-compat:** 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: a legacy `render: "smooth"`
+  becomes a fixed radius (`0.25`); a legacy numeric `render` value is read
+  as-is; anything else (including the original `render: "pixel"`) defaults to
+  `0`. This keeps old files rendering rounded rather than silently reverting
+  to sharp. Detection of compact vs. full form ([§1](#1-form-discriminator))
+  is unaffected — neither key is ever used as a structural signal.
+- **Rendering.** `cornerRadius === 0` renders as before: 1px/cell,
+  nearest-neighbor (`renderSpriteFrame`, `imageSmoothingEnabled = false`).
+  `cornerRadius > 0` renders through `engine/pxartSmooth.js`'s
+  `renderSmoothSpriteFrame`, using a LOCAL per-pixel kernel — the same shape
+  of algorithm as Animal Crossing's actual smoothing (xBRZ-style template
+  matching), not a global vectorization pass: it composites the frame
+  normally (so layer visibility/opacity/blend keep working), then for each
+  pixel independently, classifies each of its 4 corners against only the 3
+  pixels touching that corner (its two edge-adjacent neighbors and their
+  shared diagonal neighbor). A corner rounds only when it's a genuine convex
+  corner of that pixel's own color region — a diagonal touch between two
+  same-colored pixels is deliberately left sharp so it doesn't get visually
+  pinched off, and a corner already matched by an adjacent same-color
+  neighbor is left for that neighbor's own (independent) classification to
+  handle. Because the kernel never looks past a pixel's immediate
+  neighborhood, there's no notion of a "run" or "line" to (mis)detect across
+  a whole shape — every pixel supersamples into its own fixed block of the
+  output canvas (by default 8x the sprite's native resolution), so rounding
+  a corner is always a same-block recoloring, never a shape that could leave
+  a gap against its neighbors. This suits small pixel-art sprites, not
+  general raster upscaling.
+- `behaviors/Sprite.jsx` blits a `cornerRadius > 0` sprite's cached canvas
+  with `imageSmoothingEnabled = true` (vs. `false` for `cornerRadius === 0`),
+  passing the sprite's own `cornerRadius` value through as
+  `renderSmoothSpriteFrame`'s `cornerRadius` option; the offscreen canvas
+  cache itself is unaffected (still one WeakMap entry per sprite object —
+  smoothing is a property of the sprite, not an extra cache dimension). The
+  `PxArtEditor` artboard previews rounded sprites live (a display-resolution
+  canvas behind the pixel-grid editing surface) while keeping normal
+  pixel-grid editing/selection interactions on the grid underneath.
+
+---
+
+## 11. Reserved / out of scope
 
 Named so the format can grow without a breaking change, but **not built**:
 tilemap/tileset layers (a future `kind`), slices, layer groups, vector/avatar
@@ -293,6 +371,7 @@ layers, and rich blend modes (beyond `"normal"`). Reserving the `kind` and
 
 ## Appendix — sample
 
-`drawings/pig.pxart` is a 16×16 single-layer sprite referenced by the
-`pig_sprite` actor in `scenes/main.scene` through the `Sprite` behavior — a
-working rendered example of the format in this kit.
+`drawings/cauldron.pxart` is a 16×16 multi-layer animated sprite referenced by
+the `pig` actor in `scenes/main.scene` (via `blueprints/cauldron.scene`)
+through the `Sprite` behavior — a working rendered example of the format in
+this kit.

package/kits/basic-2d/drawings/cauldron.pxart

@@ -0,0 +1,113 @@
+{
+  "format": "full",
+  "resolution": {
+    "width": 16,
+    "height": 16
+  },
+  "palette": [
+    {
+      "key": "I",
+      "hex": "#5ac54f"
+    },
+    {
+      "key": "1",
+      "hex": "#622461"
+    },
+    {
+      "key": "2",
+      "hex": "#93388f"
+    }
+  ],
+  "frames": [
+    {},
+    {}
+  ],
+  "defaultDurationMs": 500,
+  "tags": [],
+  "cornerRadius": 0.25,
+  "layers": [
+    {
+      "id": "layer-0",
+      "name": "Layer 1",
+      "visible": true,
+      "opacity": 1,
+      "blendMode": "normal",
+      "kind": "pixel",
+      "cells": [
+        {
+          "grid": [
+            "................",
+            "................",
+            "................",
+            "...11111111111..",
+            ".211IIIIIIIII11.",
+            ".22IIIIIIIII221.",
+            "..22222222222...",
+            "...1111111111...",
+            "..222222221111..",
+            ".22222222221111.",
+            ".22222222221111.",
+            ".22222222221111.",
+            ".22222222211111.",
+            "..222222211111..",
+            ".11222211111111.",
+            ".11.11111111.11."
+          ]
+        },
+        {
+          "link": 0
+        }
+      ]
+    },
+    {
+      "id": "layer-1",
+      "name": "Layer 1 copy",
+      "visible": true,
+      "opacity": 1,
+      "blendMode": "normal",
+      "kind": "pixel",
+      "cells": [
+        {
+          "grid": [
+            "...........I....",
+            "....I...........",
+            ".......I........",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................"
+          ]
+        },
+        {
+          "grid": [
+            "...I............",
+            "........I.......",
+            "............I...",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................",
+            "................"
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,247 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { renderSpriteFrame } from '../engine/pxart';
+import { screenToCard } from '../engine/scene';
+import { countBlueprintInstances, listBlueprints } from '../engine/blueprint';
+import { ConfirmDialog, ContextMenu, cx, Icon, styles } from '../engine/ui';
+
+const DRAG_THRESHOLD = 4;
+
+// Deck-level blueprint library / hotbar: lists `blueprints/*.scene` (replacing
+// the old scene-local stamp system). Mirrors castle-client's belt: TAP a slot
+// to select the blueprint for editing in the sidebar; DRAG a slot onto the
+// canvas to place a new instance; right-click for a delete option.
+export function BlueprintLibrary({
+  files,
+  sprites,
+  canvasRef,
+  editCameraRef,
+  isPlaying,
+  selectedBlueprintPath,
+  onSelectBlueprint,
+  onAddActor,
+  dragPlace,
+  onDeleteBlueprint,
+}) {
+  const blueprints = listBlueprints(files);
+  const dragRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const [dragPreview, setDragPreview] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+
+  const onSlotContextMenu = (event, blueprint) => {
+    if (isPlaying) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ blueprint, x: event.clientX, y: event.clientY });
+  };
+
+  const onSlotPointerDown = (event, blueprint) => {
+    if (isPlaying || event.button !== 0) return;
+    event.preventDefault();
+    const drag = {
+      blueprint,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      moved: false,
+      onStage: false,
+    };
+    dragRef.current = drag;
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // Window listeners still finish the drag if capture is unavailable.
+    }
+    const onMove = (moveEvent) => {
+      if (moveEvent.pointerId !== drag.pointerId) return;
+      if (!drag.moved && Math.hypot(moveEvent.clientX - drag.startX, moveEvent.clientY - drag.startY) > DRAG_THRESHOLD) {
+        drag.moved = true;
+      }
+      if (!drag.moved) return;
+      const position = eventToStagePoint(moveEvent, canvasRef, editCameraRef);
+      if (position) {
+        // Over the stage: the drag becomes a REAL placed instance immediately,
+        // so it grid-snaps and renders exactly like the actor it is. The
+        // floating thumbnail only exists off-stage.
+        if (drag.onStage) {
+          dragPlace.move(position);
+        } else {
+          drag.onStage = true;
+          setDragPreview(null);
+          dragPlace.enter(blueprint.path, position);
+        }
+      } else {
+        if (drag.onStage) {
+          drag.onStage = false;
+          dragPlace.leave();
+        }
+        setDragPreview({ blueprint, x: moveEvent.clientX, y: moveEvent.clientY, overStage: false });
+      }
+    };
+    const onUp = (upEvent) => {
+      if (upEvent.pointerId !== drag.pointerId) return;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      dragRef.current = null;
+      setDragPreview(null);
+      if (!drag.moved) return;
+      suppressClickRef.current = true;
+      // Cancelled drags (pointercancel) count as a release off-stage.
+      if (drag.onStage && upEvent.type !== 'pointercancel') dragPlace.drop();
+      else if (drag.onStage) dragPlace.leave();
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  };
+
+  return (
+    <div className={styles.bpHotbar} aria-label="Blueprints">
+      <button
+        type="button"
+        className={styles.bpActionSlot}
+        aria-label="Add actor"
+        title="Add actor (creates a new blueprint)"
+        onClick={onAddActor}
+        disabled={isPlaying}>
+        <span className={styles.dashedSquareIcon} aria-hidden="true" />
+      </button>
+      {blueprints.map((blueprint) => (
+        <button
+          key={blueprint.path}
+          type="button"
+          className={cx(styles.bpSlot, selectedBlueprintPath === blueprint.path && styles.bpSlotSelected)}
+          title={`${blueprint.name} -- click to edit, drag to place`}
+          disabled={isPlaying}
+          onPointerDown={(event) => onSlotPointerDown(event, blueprint)}
+          onContextMenu={(event) => onSlotContextMenu(event, blueprint)}
+          onClick={() => {
+            if (suppressClickRef.current) {
+              suppressClickRef.current = false;
+              return;
+            }
+            onSelectBlueprint(blueprint.path);
+          }}>
+          <BlueprintThumbnail blueprint={blueprint} sprites={sprites} />
+          <InstanceCountBadge files={files} blueprintPath={blueprint.path} />
+        </button>
+      ))}
+      {dragPreview ? <BlueprintDragPreview preview={dragPreview} sprites={sprites} /> : null}
+      {contextMenu ? (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          items={[
+            {
+              key: 'delete',
+              label: `Delete ${contextMenu.blueprint.name}...`,
+              onClick: () => setConfirmDelete(contextMenu.blueprint),
+            },
+          ]}
+        />
+      ) : null}
+      {confirmDelete ? (
+        <DeleteBlueprintConfirm
+          files={files}
+          blueprint={confirmDelete}
+          onCancel={() => setConfirmDelete(null)}
+          onConfirm={() => {
+            onDeleteBlueprint(confirmDelete.path);
+            setConfirmDelete(null);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function DeleteBlueprintConfirm({ files, blueprint, onCancel, onConfirm }) {
+  const count = countBlueprintInstances(files, blueprint.path);
+  const instanceText = count === 1 ? '1 placed actor' : `${count} placed actors`;
+  return (
+    <ConfirmDialog
+      title={`Delete ${blueprint.name}?`}
+      message={
+        count > 0
+          ? `This removes ${blueprint.name} and ${instanceText} across every scene in the deck. This can't be undone.`
+          : `${blueprint.name} has no placed actors. This can't be undone.`
+      }
+      confirmLabel="Delete"
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    />
+  );
+}
+
+function InstanceCountBadge({ files, blueprintPath }) {
+  const count = countBlueprintInstances(files, blueprintPath);
+  if (count === 0) return null;
+  return <span className={styles.bpSlotBadge}>{count > 99 ? '99+' : count}</span>;
+}
+
+function BlueprintDragPreview({ preview, sprites }) {
+  const layout = preview.blueprint.components?.Layout;
+  const width = Math.max(24, Math.min(80, layout?.width ?? 48));
+  const height = Math.max(24, Math.min(80, layout?.height ?? 48));
+  return (
+    <div
+      className={cx(styles.bpDragPreview, preview.overStage && styles.bpDragPreviewOverStage)}
+      style={{
+        left: preview.x,
+        top: preview.y,
+        width,
+        height,
+        transform: `translate(-50%, -50%) rotate(${layout?.rotation ?? 0}deg)`,
+      }}>
+      <BlueprintThumbnail blueprint={preview.blueprint} sprites={sprites} preview />
+    </div>
+  );
+}
+
+function BlueprintThumbnail({ blueprint, sprites, preview = false }) {
+  const canvasRef = useRef(null);
+  const spritePath = blueprint.components?.Sprite?.file;
+  const sprite = spritePath ? sprites?.[spritePath] : null;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !sprite) return;
+    renderSpriteFrame(sprite, 0, canvas);
+  }, [sprite]);
+  if (!sprite) {
+    return (
+      <span className={styles.bpSlotFallback}>
+        <Icon name="clone" />
+      </span>
+    );
+  }
+  return (
+    <canvas
+      ref={canvasRef}
+      className={cx(styles.bpSlotThumb, preview && styles.bpPreviewThumb)}
+      aria-hidden="true"
+    />
+  );
+}
+
+function eventToStagePoint(event, canvasRef, editCameraRef) {
+  const canvas = canvasRef.current;
+  if (!canvas) return null;
+  const rect = canvas.getBoundingClientRect();
+  if (
+    event.clientX < rect.left ||
+    event.clientX > rect.right ||
+    event.clientY < rect.top ||
+    event.clientY > rect.bottom
+  ) {
+    return null;
+  }
+  const raw = screenToCard(canvas, event.clientX, event.clientY);
+  const camera = editCameraRef.current ?? { x: 0, y: 0 };
+  return {
+    x: raw.x + camera.x,
+    y: raw.y + camera.y,
+  };
+}

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

@@ -21,6 +21,7 @@ export function PlayOnly() {
       key={dataVersion}
       sceneData={sceneData}
       sprites={sprites}
+      files={files}
       behaviorClasses={behaviorClasses}
       onFirstFrame={Lifecycle.ready}
     />

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { frameCount, renderSpriteFrame, TRANSPARENT } from '../engine/pxart';
+import { renderSmoothSpriteFrame } from '../engine/pxartSmooth';
 import { basename } from '../engine/files';
 import { EditorBody, styles } from '../engine/ui';
 import { eventToCell } from './pixelCanvas';
@@ -8,6 +9,7 @@ import { PixelArtboard, PixelEditorHeader, usePixelEditorShell } from './pixelEd
 import {
   BRUSH_SIZES,
   CanvasSizeBar,
+  CornerRadiusBar,
   PaintStrip,
   PIXEL_TOOLS,
   PixelToolStrip,
@@ -53,6 +55,7 @@ import {
   setCellOffset,
   setDefaultDuration,
   setDefaultTag,
+  setCornerRadius,
   setFrameDuration,
   setupSpriteCanvas,
   unlinkCell,
@@ -85,6 +88,7 @@ const TOOL_CURSORS = {
 
 export function PxArtEditor({ path, text, onChange, ...chrome }) {
   const canvasRef = useRef(null);
+  const smoothRef = useRef(null);
   const overlayRef = useRef(null);
   const strokeRef = useRef(null);
   // The serialized text this editor last wrote itself. Lets us tell our own
@@ -116,7 +120,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     eraseSize,
     setEraseSize,
   } = toolState;
-  const { history, headerShell } = usePixelEditorShell(text, onChange);
+  const { history, headerShell } = usePixelEditorShell(text, onChange, path);
   const canvasWrapRef = useRef(null);
   const canvasSizeBarRef = useRef(null);
   const colorButtonRef = useRef(null);
@@ -143,12 +147,20 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     eraseSize,
     activeKey,
   });
-  useToolShortcuts({ tool, picking, setTool, setPicking, setBrushSize, setEraseSize });
   const { canvasStyle } = useArtboardFit({
     wrapRef: canvasWrapRef,
     sizeBarRef: canvasSizeBarRef,
     resolution: sprite?.resolution ?? { width: 16, height: 16 },
   });
+  // `canvasStyle`'s width is the artboard's CURRENT display size (recomputed
+  // by useArtboardFit's own ResizeObserver whenever the wrap resizes — e.g. a
+  // dockview panel drag). Feeding it in here is what keeps the supersampled
+  // canvas's resolution in sync with that display size: without it, this
+  // 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 });
   const isCompactLayout = useEditorCompactLayout(editorBodyRef);
   useEffect(() => {
     if (!isCompactLayout) setPaletteOpen(false);
@@ -272,6 +284,12 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     deletePixels: deleteMarqueePixels,
   };
   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
+    // browser. Safari in particular won't keep keyboard focus in a subframe
+    // 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 });
     const point = eventToCell(event, width, height);
     if (!point) return;
     event.currentTarget.setPointerCapture(event.pointerId);
@@ -433,15 +451,22 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
             </div>
             <div ref={canvasWrapRef} className={styles.drawingCanvasWrap}>
               <div className={styles.artboardStack}>
-                <div ref={canvasSizeBarRef}>
-                  <CanvasSizeBar
-                    width={width}
-                    height={height}
-                    onResize={(w, h) => history.commit(serializeModel(resizeSprite(sprite, w, h)))}
-                  />
+                <div ref={canvasSizeBarRef} className={styles.canvasTopStack}>
+                  <div className={styles.canvasTopBar}>
+                    <CanvasSizeBar
+                      width={width}
+                      height={height}
+                      onResize={(w, h) => history.commit(serializeModel(resizeSprite(sprite, w, h)))}
+                    />
+                    <CornerRadiusBar
+                      radius={sprite.cornerRadius}
+                      onChange={(radius) => history.commit(serializeModel(setCornerRadius(sprite, radius)))}
+                    />
+                  </div>
                 </div>
                 <PixelArtboard
                   canvasRef={canvasRef}
+                  smoothRef={smoothRef}
                   overlayRef={overlayRef}
                   style={{ ...canvasStyle, cursor }}
                   handlers={{
@@ -592,6 +617,34 @@ function useArtboardRender(canvasRef, text, sprite, previewIndex, onion, playing
   ]);
 }
 
+// Render the "smooth" preview into its own display-resolution canvas, behind
+// the interactive artboard (see .drawingSmooth). Left empty when
+// `cornerRadius` is 0 (sharp/pixel) — the interactive canvas's own unrounded
+// frame draw is what shows then. Runs off `text`/`previewIndex` rather than
+// the `sprite` object (a fresh object every render) so it only redraws on an
+// actual content/frame/radius change, not on every hover-driven re-render of
+// the tool preview — PLUS `displayWidth` (the artboard's current CSS width
+// from useArtboardFit), so a wrap resize (e.g. a dockview panel drag) also
+// 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) {
+  const cornerRadius = sprite?.cornerRadius ?? 0;
+  useEffect(() => {
+    const canvas = smoothRef.current;
+    if (!canvas) return;
+    if (!sprite || cornerRadius <= 0) {
+      canvas.width = 0;
+      canvas.height = 0;
+      return;
+    }
+    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]);
+}
+
 // Window-scoped tool keyboard shortcuts, mounted only while the editor is.
 function useToolShortcuts(ctx) {
   const { tool, picking, setTool, setPicking, setBrushSize, setEraseSize } = ctx;
@@ -614,7 +667,13 @@ function renderArtboard(canvas, sprite, frameIndex, onion, playing, preview) {
     }
   }
   ctx.globalAlpha = 1;
-  ctx.drawImage(frameCanvas(sprite, frameIndex), 0, 0);
+  // "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) {
+    ctx.drawImage(frameCanvas(sprite, frameIndex), 0, 0);
+  }
   if (preview) drawToolPreview(ctx, canvas, preview);
 }