castle-web-cli 0.4.115 → 0.4.116

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

@@ -6,6 +6,8 @@ import {
   forEachCelPixel,
   fromCells,
   frameCount,
+  GRID_RENDERER,
+  isVectorRenderer,
   paletteLookup,
   parseFull,
   RESOLUTION_MAX,
@@ -15,6 +17,7 @@ import {
   serializeFull,
   snapResolutionDim,
   TRANSPARENT,
+  VECTOR_RENDERER,
 } from '../engine/pxart';
 import {
   blankCells,
@@ -22,6 +25,13 @@ import {
   EDITOR_PALETTE,
   editorKeyForHex,
 } from './pxArtTools';
+import {
+  bakePathCell,
+  clonePathData,
+  emptyPathData,
+  isEmptyPathData,
+  translatePathData,
+} from '../engine/pxartPath';
 
 // ============================================================================
 // Working-state helpers for the full Sprite the PxArt editor edits in memory.
@@ -78,17 +88,23 @@ function blankSprite() {
     defaultDurationMs: DEFAULT_DURATION_MS,
     tags: [],
     defaultTag: undefined,
+    renderer: GRID_RENDERER,
     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 };
+// Set the file-level finish: which renderer draws the sprite, and how much
+// corner rounding the grid renderer applies. Either may be omitted to keep its
+// current value. A no-op when nothing changes, so identical sprites don't
+// produce spurious history entries.
+export function setFinish(sprite, { renderer, cornerRadius } = {}) {
+  const nextRenderer = isVectorRenderer(renderer ?? sprite.renderer)
+    ? VECTOR_RENDERER
+    : GRID_RENDERER;
+  const nextRadius = clampCornerRadius(cornerRadius ?? sprite.cornerRadius);
+  if (sprite.renderer === nextRenderer && sprite.cornerRadius === nextRadius) return sprite;
+  return { ...sprite, renderer: nextRenderer, cornerRadius: nextRadius };
 }
 
 function makeLayer(id, name, cells) {
@@ -119,7 +135,22 @@ function remapCell(cell, lookup) {
   if (cell == null) return null;
   if ('link' in cell) return { link: cell.link };
   // Preserve the cel's offset while remapping its palette keys.
-  return gridCell(cell.grid.map((row) => remapRow(row, lookup)), cell.x ?? 0, cell.y ?? 0);
+  const next = gridCell(cell.grid.map((row) => remapRow(row, lookup)), cell.x ?? 0, cell.y ?? 0);
+  return cell.path ? { ...next, path: remapPathKeys(cell.path, lookup) } : next;
+}
+
+function remapPathKeys(path, lookup) {
+  const next = clonePathData(path);
+  for (const shape of next.shapes) {
+    if (shape.fill) shape.fill = remapKey(shape.fill, lookup);
+    if (shape.stroke) shape.stroke = remapKey(shape.stroke, lookup);
+  }
+  return next;
+}
+
+function remapKey(key, lookup) {
+  const hex = colorForKeyV2(lookup, key);
+  return hex ? editorKeyForHex(hex) : key;
 }
 
 function remapRow(row, lookup) {
@@ -168,6 +199,13 @@ export function withCellsAt(sprite, layerIndex, frameIndex, cells) {
   const layer = sprite.layers[layerIndex];
   const target = writeTargetIndex(layer, frameIndex);
   const prev = layer ? resolveCell(layer, target) : null;
+  // A path cel's grid is derived — it is whatever bakePathCell says. Writing
+  // pixels straight into it would either desync the grid from the source (the
+  // next path edit silently reverts the paint) or drop the source to keep them
+  // in step (silently destroying the vector art). The pixel tools are already
+  // gated off path layers in the UI, so this is unreachable today; it refuses
+  // rather than corrupting if a shared tool is ever wired up.
+  if (prev?.path) return sprite;
   const merged = mergeWindowIntoCell(prev, cells, sprite.resolution);
   return updateLayerCell(sprite, layerIndex, target, merged);
 }
@@ -259,6 +297,21 @@ export function setCellOffset(sprite, layerIndex, frameIndex, x, y) {
   const cell = layer.cells[target];
   if (cell == null || 'link' in cell) return sprite;
   if ((cell.x ?? 0) === x && (cell.y ?? 0) === y) return sprite;
+  if (cell.path) {
+    // A path cel has no offset to carry (§6.1.1): moving it means moving the
+    // source. Callers pass an ABSOLUTE offset computed against a gesture-start
+    // snapshot, and a path cel's offset is always 0, so the requested offset IS
+    // the delta. Snapping it keeps the translated points on the lattice even if
+    // the caller hands us a fractional drag.
+    const dx = x - (cell.x ?? 0);
+    const dy = y - (cell.y ?? 0);
+    const path = translatePathData(cell.path, dx, dy);
+    const { width, height } = sprite.resolution;
+    return updateLayerCell(sprite, layerIndex, target, {
+      grid: bakePathCell(path, width, height),
+      path,
+    });
+  }
   return updateLayerCell(sprite, layerIndex, target, gridCell(cell.grid, x, y));
 }
 
@@ -295,6 +348,59 @@ export function cellKind(layer, frameIndex) {
   return 'grid';
 }
 
+// ---------------------------------------------------------------------------
+// path layers
+// ---------------------------------------------------------------------------
+
+export function pathAt(sprite, layerIndex, frameIndex) {
+  const layer = sprite.layers[layerIndex];
+  const resolved = layer ? resolveCell(layer, frameIndex) : null;
+  return resolved?.path ?? emptyPathData();
+}
+
+// Replace vector source and its baked pixel-grid atomically.
+export function withPathAt(sprite, layerIndex, frameIndex, path) {
+  const layer = sprite.layers[layerIndex];
+  const target = writeTargetIndex(layer, frameIndex);
+  const prev = layer ? resolveCell(layer, target) : null;
+  const { width, height } = sprite.resolution;
+  const committed = clonePathData(path ?? emptyPathData());
+  const grid = bakePathCell(committed, width, height);
+  // The bake is canvas-framed, so the cel it produces sits at the origin — it
+  // does NOT inherit `prev`'s offset (§6.1.1). Inheriting would double-count the
+  // placement, since the points already carry it.
+  const cell = { grid };
+  const withPath = isEmptyPathData(committed) ? cell : { ...cell, path: committed };
+  return updateLayerCell(sprite, layerIndex, target, withPath);
+}
+
+// Convert layer kind. Path conversion creates an EMPTY path source (no
+// vectorization of existing pixels) and rebakes a transparent grid. Pixel
+// conversion strips the vector source and keeps the baked grid as truth.
+export function setLayerKind(sprite, layerIndex, kind) {
+  const nextKind = kind === 'path' ? 'path' : 'pixel';
+  let next = patchLayer(sprite, layerIndex, { kind: nextKind });
+  const layer = next.layers[layerIndex];
+  if (!layer) return next;
+  if (nextKind === 'path') {
+    const { width, height } = next.resolution;
+    const grid = bakePathCell(emptyPathData(), width, height);
+    const cells = layer.cells.map((cell) => {
+      if (cell && 'link' in cell) return cell;
+      const prev = cell && !('link' in cell) ? cell : null;
+      // Empty path source — omit `path` (same as withPathAt for empty).
+      return gridCell(grid, 0, 0);
+    });
+    return patchLayer(next, layerIndex, { cells });
+  }
+  const cells = layer.cells.map((cell) => {
+    if (!cell || 'link' in cell || !cell.path) return cell;
+    const { path: _path, ...rest } = cell;
+    return rest;
+  });
+  return patchLayer(next, layerIndex, { cells });
+}
+
 // ---------------------------------------------------------------------------
 // linked cells
 // ---------------------------------------------------------------------------
@@ -325,7 +431,8 @@ export function unlinkCell(sprite, layerIndex, frameIndex) {
   const layer = sprite.layers[layerIndex];
   const resolved = layer ? resolveCell(layer, frameIndex) : null;
   // Copy the shared image AND its offset so the detached cel looks identical.
-  const cell = resolved ? gridCell(resolved.grid.slice(), resolved.x, resolved.y) : null;
+  const grid = resolved ? gridCell(resolved.grid.slice(), resolved.x, resolved.y) : null;
+  const cell = grid && resolved.path ? { ...grid, path: clonePathData(resolved.path) } : grid;
   return updateLayerCell(sprite, layerIndex, frameIndex, cell);
 }
 
@@ -342,15 +449,40 @@ function uniqueLayerId(sprite) {
 }
 
 // Insert a fresh empty layer directly ABOVE the active one (Aseprite stacks new
-// layers on top; layer 0 is the bottom of the stack).
-export function addLayer(sprite, layerIndex) {
-  const cells = sprite.frames.map(() => null);
+// layers on top; layer 0 is the bottom of the stack). `kind` is 'pixel' (default)
+// or 'path' — a new path layer gets an empty path source and a transparent baked
+// grid per frame (same empty-path treatment as setLayerKind → path).
+export function addLayer(sprite, layerIndex, kind = 'pixel') {
+  const nextKind = kind === 'path' ? 'path' : 'pixel';
+  let cells = sprite.frames.map(() => null);
+  if (nextKind === 'path') {
+    const { width, height } = sprite.resolution;
+    const grid = bakePathCell(emptyPathData(), width, height);
+    cells = sprite.frames.map(() => gridCell(grid, 0, 0));
+  }
   const layer = makeLayer(uniqueLayerId(sprite), `Layer ${sprite.layers.length + 1}`, cells);
+  layer.kind = nextKind;
   const layers = sprite.layers.slice();
   layers.splice(layerIndex + 1, 0, layer);
   return { ...sprite, layers };
 }
 
+/** True when any frame of the layer has a non-transparent baked pixel. */
+export function layerHasOpaquePixels(sprite, layerIndex) {
+  const layer = sprite.layers[layerIndex];
+  if (!layer) return false;
+  for (let f = 0; f < layer.cells.length; f++) {
+    const resolved = resolveCell(layer, f);
+    if (!resolved?.grid) continue;
+    for (const row of resolved.grid) {
+      for (const ch of row) {
+        if (ch !== TRANSPARENT) return true;
+      }
+    }
+  }
+  return false;
+}
+
 export function deleteLayer(sprite, layerIndex) {
   if (sprite.layers.length <= 1) return sprite;
   const layers = sprite.layers.filter((_, i) => i !== layerIndex);
@@ -363,6 +495,7 @@ export function duplicateLayer(sprite, layerIndex) {
   const copy = makeLayer(uniqueLayerId(sprite), `${src.name} copy`, src.cells.map(cloneCell));
   copy.visible = src.visible;
   copy.opacity = src.opacity;
+  copy.kind = src.kind;
   const layers = sprite.layers.slice();
   layers.splice(layerIndex + 1, 0, copy);
   return { ...sprite, layers };
@@ -385,7 +518,8 @@ export function patchLayer(sprite, layerIndex, patch) {
 function cloneCell(cell) {
   if (cell == null) return null;
   if ('link' in cell) return { link: cell.link };
-  return gridCell(cell.grid.slice(), cell.x ?? 0, cell.y ?? 0);
+  const next = gridCell(cell.grid.slice(), cell.x ?? 0, cell.y ?? 0);
+  return cell.path ? { ...next, path: clonePathData(cell.path) } : next;
 }
 
 // ---------------------------------------------------------------------------
@@ -410,6 +544,7 @@ function layerSlots(layer) {
       image: resolved?.grid ?? null,
       x: resolved?.x ?? 0,
       y: resolved?.y ?? 0,
+      path: resolved?.path,
       wasLink: cell != null && 'link' in cell,
     };
   });
@@ -438,11 +573,16 @@ function relinkSlots(slots) {
       slot.wasLink &&
       gridsEqual(slots[i - 1].image, slot.image) &&
       slots[i - 1].x === slot.x &&
-      slots[i - 1].y === slot.y
+      slots[i - 1].y === slot.y &&
+      slots[i - 1].path === slot.path
     ) {
       return { link: i - 1 };
     }
-    return gridCell(slot.image.slice(), slot.x, slot.y);
+    const cell = gridCell(slot.image.slice(), slot.x, slot.y);
+    // Slots that resolved through a link chain share one source object, so a
+    // deep copy is what makes each materialized cel independent — otherwise two
+    // frames that merely LOOKED alike would keep pointing at a single path.
+    return slot.path ? { ...cell, path: clonePathData(slot.path) } : cell;
   });
 }
 
@@ -503,6 +643,7 @@ export function addFrame(sprite, frameIndex) {
       image: resolved?.grid ?? null,
       x: resolved?.x ?? 0,
       y: resolved?.y ?? 0,
+      path: resolved?.path,
       wasLink: resolved != null,
     };
   });
@@ -521,6 +662,7 @@ export function duplicateFrame(sprite, frameIndex) {
       image: resolved ? resolved.grid.slice() : null,
       x: resolved?.x ?? 0,
       y: resolved?.y ?? 0,
+      path: resolved?.path ? clonePathData(resolved.path) : undefined,
       wasLink: false,
     };
   });
@@ -625,13 +767,23 @@ export function resizeSprite(sprite, width, height) {
   const dy = Math.floor((h - sprite.resolution.height) / 2);
   const layers = sprite.layers.map((layer) => ({
     ...layer,
-    cells: layer.cells.map((cell) => shiftCellOffset(cell, dx, dy)),
+    cells: layer.cells.map((cell) => shiftCellOffset(cell, dx, dy, w, h)),
   }));
   return { ...sprite, resolution: { width: w, height: h }, layers };
 }
 
-function shiftCellOffset(cell, dx, dy) {
+// Reframe one cel by the centered delta. A pixel cel moves via its offset; a
+// path cel cannot, because path points are canvas-framed and a path cell's x/y
+// must stay 0 (§6.1.1). Shifting the offset instead would leave the vector
+// source describing the OLD frame, so the grid and the source would disagree —
+// invisible until the next edit re-baked the art back to where the points still
+// said it was. Translating the source and re-baking keeps the two in step.
+function shiftCellOffset(cell, dx, dy, width, height) {
   if (cell == null || 'link' in cell) return cell;
+  if (cell.path) {
+    const path = translatePathData(cell.path, dx, dy);
+    return { grid: bakePathCell(path, width, height), path };
+  }
   return gridCell(cell.grid, (cell.x ?? 0) + dx, (cell.y ?? 0) + dy);
 }
 
@@ -647,6 +799,7 @@ function shiftCellOffset(cell, dx, dy) {
 export function serializeModel(sprite) {
   const compact = serializeCompact({
     ...fromCells(EDITOR_PALETTE, cellsAt(sprite, 0, 0)),
+    renderer: sprite.renderer,
     cornerRadius: sprite.cornerRadius,
   });
   const roundTripped = parseFull(compact);
@@ -672,7 +825,10 @@ 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;
+  // Both finish fields, so a compact form that dropped either falls through to
+  // the full form instead of silently reverting the sprite's look.
   if (sprite.cornerRadius !== roundTripped.cornerRadius) return false;
+  if ((sprite.renderer ?? GRID_RENDERER) !== (roundTripped.renderer ?? GRID_RENDERER)) return false;
   if (sprite.layers.length !== roundTripped.layers.length) return false;
 
   const lookupA = paletteLookup(sprite.palette);

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

@@ -1,8 +1,21 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { faEye, faEyeSlash, faLink, faStopwatch } from '@fortawesome/free-solid-svg-icons';
-import { colorForKeyV2, paletteLookup, resolveCell, resolveCellGrid } from '../engine/pxart';
-import { Icon, IconButton, SheetGrabHandle, styles as ui, useCompactViewport, useMobileSheet } from '../engine/ui';
-import { cellKind, forEachGridCell, setupSpriteCanvas } from './pxArtEditorModel';
+import { colorForKeyV2, displayFinish, paletteLookup, resolveCell, resolveCellGrid } from '../engine/pxart';
+import { renderSmoothLayerCell } from '../engine/pxartSmooth';
+import {
+  ConfirmDialog,
+  Icon,
+  IconButton,
+  SheetGrabHandle,
+  styles as ui,
+  useCompactViewport,
+  useMobileSheet,
+} from '../engine/ui';
+import {
+  cellKind,
+  forEachGridCell,
+  layerHasOpaquePixels,
+} from './pxArtEditorModel';
 import tl from './pxArtTimeline.module.css';
 
 // Tags and per-frame duration are intentionally hidden for now — we plan to
@@ -131,7 +144,7 @@ function useResizableTimelineHeight() {
 // the top, Aseprite-style) by frame COLUMNS, with thumbnails per cell, layer +
 // frame controls, linked-cell affordances, onion-skin toggles, playback, and a
 // tags editor. All mutation flows through `actions` (wired in PxArtEditor).
-export function PxArtTimeline({ sprite, selection, playing, onion, actions }) {
+export function PxArtTimeline({ sprite, text, selection, playing, onion, actions }) {
   // Hooks run unconditionally (order-stable); only the render branches on viewport.
   const compact = useCompactViewport();
   const resizable = useResizableTimelineHeight();
@@ -144,7 +157,7 @@ export function PxArtTimeline({ sprite, selection, playing, onion, actions }) {
   });
   const grid = (
     <div className={tl.scroll}>
-      <TimelineGrid sprite={sprite} selection={selection} actions={actions} />
+      <TimelineGrid sprite={sprite} text={text} selection={selection} actions={actions} />
     </div>
   );
   if (compact) {
@@ -212,8 +225,16 @@ function TimelineBar({ sprite, selection, playing, onion, actions }) {
   return (
     <div className={tl.bar}>
       <div className={tl.barGroup}>
-        <IconButton icon="layer-group" label="Layer" onClick={() => actions.addLayer(layerIndex)} />
-        <span className={tl.barLabel}>Layer</span>
+        <IconButton icon="grid" label="Pixel" onClick={() => actions.addLayer(layerIndex)} />
+        <span className={tl.barLabel}>Pixel</span>
+      </div>
+      <div className={tl.barGroup}>
+        <IconButton
+          icon="draw-polygon"
+          label="Path"
+          onClick={() => actions.addLayer(layerIndex, 'path')}
+        />
+        <span className={tl.barLabel}>Path</span>
       </div>
       <div className={tl.barGroup}>
         <IconButton icon="film" label="Frame" onClick={() => actions.addFrame(frameIndex)} />
@@ -299,11 +320,12 @@ function OnionControls({ onion, actions }) {
   );
 }
 
-function TimelineGrid({ sprite, selection, actions }) {
+function TimelineGrid({ sprite, text, selection, actions }) {
   const frames = sprite.frames;
   // Render rows top-down: the last layer (top of the composite stack) first.
   const rows = sprite.layers.map((_, i) => i).reverse();
   const [menu, setMenu] = useState(null);
+  const [convertConfirm, setConvertConfirm] = useState(null);
   const closeMenu = useCallback(() => setMenu(null), []);
 
   // Each opener stops the browser's native menu, anchors at the cursor, and
@@ -359,6 +381,7 @@ function TimelineGrid({ sprite, selection, actions }) {
             <CellThumb
               key={f}
               sprite={sprite}
+              text={text}
               layerIndex={li}
               frameIndex={f}
               active={li === selection.layerIndex && f === selection.frameIndex}
@@ -372,10 +395,32 @@ function TimelineGrid({ sprite, selection, actions }) {
         <ContextMenu
           x={menu.x}
           y={menu.y}
-          items={buildMenuItems(menu, sprite, actions)}
+          items={buildMenuItems(menu, sprite, actions, {
+            requestConvertToPath: (layerIndex) => {
+              const layer = sprite.layers[layerIndex];
+              const name = layer?.name || `Layer ${layerIndex + 1}`;
+              if (layerHasOpaquePixels(sprite, layerIndex)) {
+                setConvertConfirm({ layerIndex, name });
+              } else {
+                actions.setLayerKind(layerIndex, 'path');
+              }
+            },
+          })}
           onClose={closeMenu}
         />
       ) : null}
+      {convertConfirm ? (
+        <ConfirmDialog
+          title={`Convert ${convertConfirm.name} to a path layer?`}
+          message={`${convertConfirm.name} has painted pixels. Converting to a path layer clears those pixels (no vectorization). This can't be undone except via Undo.`}
+          confirmLabel="Convert"
+          onCancel={() => setConvertConfirm(null)}
+          onConfirm={() => {
+            actions.setLayerKind(convertConfirm.layerIndex, 'path');
+            setConvertConfirm(null);
+          }}
+        />
+      ) : null}
     </div>
   );
 }
@@ -441,16 +486,29 @@ function ContextMenu({ x, y, items, onClose }) {
   );
 }
 
-function buildMenuItems(menu, sprite, actions) {
-  if (menu.kind === 'layer') return layerMenuItems(menu, sprite, actions);
+function buildMenuItems(menu, sprite, actions, layerExtras = {}) {
+  if (menu.kind === 'layer') return layerMenuItems(menu, sprite, actions, layerExtras);
   if (menu.kind === 'frame') return frameMenuItems(menu, sprite, actions);
   return cellMenuItems(menu, sprite, actions);
 }
 
-function layerMenuItems(menu, sprite, actions) {
+function layerMenuItems(menu, sprite, actions, { requestConvertToPath } = {}) {
   const { layerIndex } = menu;
+  const isPath = sprite.layers[layerIndex]?.kind === 'path';
   return [
     { key: 'duplicate', label: 'Duplicate', onClick: () => actions.duplicateLayer(layerIndex) },
+    {
+      key: 'toggle-kind',
+      label: isPath ? 'Convert to Pixel Layer' : 'Convert to Path Layer',
+      onClick: () => {
+        if (isPath) {
+          actions.setLayerKind(layerIndex, 'pixel');
+          return;
+        }
+        if (requestConvertToPath) requestConvertToPath(layerIndex);
+        else actions.setLayerKind(layerIndex, 'path');
+      },
+    },
     {
       key: 'up',
       label: 'Move up',
@@ -546,6 +604,15 @@ function FrameHeader({ frame, index, globalMs, active, onSelect, onDuration, onC
 }
 
 const btnReset = { background: 'none', border: 0, color: 'inherit', cursor: 'pointer', padding: 0 };
+const kindBadgeStyle = {
+  flex: '0 0 auto',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'var(--castle-muted, #888)',
+  fontSize: 11,
+  opacity: 0.85,
+};
 
 // A free-form text input that holds a local draft while focused and commits it
 // on blur/Enter, re-syncing to `text` when idle. The caller's `onCommit(draft)`
@@ -621,6 +688,26 @@ function LayerHeader({ layer, index, active, onSelect, actions, onContextMenu })
       onClick={onSelect}
       onContextMenu={(event) => onContextMenu(event, index)}>
       <div className={tl.layerTopRow}>
+        <span
+          style={kindBadgeStyle}
+          title={layer.kind === 'path' ? 'Path layer' : 'Pixel layer'}>
+          <Icon name={layer.kind === 'path' ? 'draw-polygon' : 'grid'} />
+        </span>
+        <span className={tl.name} title={layer.name}>
+          {layer.name}
+        </span>
+      </div>
+      <div className={tl.layerBottomRow}>
+        <input
+          className={tl.opacity}
+          type="range"
+          min="0"
+          max="100"
+          value={Math.round(layer.opacity * 100)}
+          title={`Opacity ${Math.round(layer.opacity * 100)}%`}
+          onClick={(event) => event.stopPropagation()}
+          onChange={(event) => actions.patchLayer(index, { opacity: Number(event.target.value) / 100 })}
+        />
         <button
           type="button"
           className={layer.visible ? tl.visBtn : tl.visBtn + ' ' + tl.visOff}
@@ -631,31 +718,26 @@ function LayerHeader({ layer, index, active, onSelect, actions, onContextMenu })
           }}>
           <FaGlyph icon={layer.visible ? faEye : faEyeSlash} />
         </button>
-        <span className={tl.name} title={layer.name}>
-          {layer.name}
-        </span>
       </div>
-      <input
-        className={tl.opacity}
-        type="range"
-        min="0"
-        max="100"
-        value={Math.round(layer.opacity * 100)}
-        title={`Opacity ${Math.round(layer.opacity * 100)}%`}
-        onClick={(event) => event.stopPropagation()}
-        onChange={(event) => actions.patchLayer(index, { opacity: Number(event.target.value) / 100 })}
-      />
     </div>
   );
 }
 
-function CellThumb({ sprite, layerIndex, frameIndex, active, onSelect, onContextMenu }) {
+function CellThumb({ sprite, text, layerIndex, frameIndex, active, onSelect, onContextMenu }) {
   const canvasRef = useRef(null);
   const layer = sprite.layers[layerIndex];
   const kind = cellKind(layer, frameIndex);
-  useEffect(() => {
+  const smoothThumb = displayFinish(sprite).smooth;
+  // Gated on `text` rather than `sprite`, which deriveSprite rebuilds every
+  // render. Without a dependency list every thumb redrew on every timeline
+  // render — including on every pointer move over the artboard — and at a
+  // rounded finish each redraw runs the corner kernel, so a many-cel sprite
+  // burned tens of milliseconds repainting thumbs that had not changed.
+  // Content is the only trigger needed: cells are a fixed 52px, so a thumb's
+  // size never changes after mount.
+  useLayoutEffect(() => {
     if (canvasRef.current && kind !== 'empty') drawCellThumb(canvasRef.current, sprite, layerIndex, frameIndex);
-  });
+  }, [text, kind, layerIndex, frameIndex]);
   return (
     <button
       type="button"
@@ -667,7 +749,10 @@ function CellThumb({ sprite, layerIndex, frameIndex, active, onSelect, onContext
         <span className={tl.empty} />
       ) : (
         <span className={kind === 'link' ? tl.thumb + ' ' + tl.linkRing : tl.thumb}>
-          <canvas ref={canvasRef} className={tl.thumbCanvas} />
+          <canvas
+            ref={canvasRef}
+            className={smoothThumb ? tl.thumbCanvasSmooth : tl.thumbCanvas}
+          />
         </span>
       )}
       {kind === 'link' ? (
@@ -679,19 +764,46 @@ function CellThumb({ sprite, layerIndex, frameIndex, active, onSelect, onContext
   );
 }
 
-// Paint a single (layer, frame) cell's resolved image onto a native-resolution
-// canvas (1px/cell), following links. Used for timeline thumbnails. Offset-aware
-// and clipping to match renderSpriteFrame: a cel resolves to { grid, x, y } (a
-// link shares its source's image AND offset), and a source pixel (gx, gy) lands
-// at canvas (gx + x, gy + y), skipped when outside [0, width) x [0, height).
-// (Iterating the full grid via Infinity bounds, then clipping per pixel — the
-// canvas window, not the source extent, is the clip.)
+// Paint a single (layer, frame) cell onto a display-resolution canvas (crisp at
+// the timeline cell size). Offset-aware clipping matches renderSpriteFrame.
+function setupThumbCanvas(canvas, resolution) {
+  const cssW = canvas.clientWidth;
+  const cssH = canvas.clientHeight;
+  if (!cssW || !cssH) return null;
+  const dpr = window.devicePixelRatio || 1;
+  const bw = Math.round(cssW * dpr);
+  const bh = Math.round(cssH * dpr);
+  if (canvas.width !== bw) canvas.width = bw;
+  if (canvas.height !== bh) canvas.height = bh;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, bw, bh);
+  return { ctx, sx: bw / resolution.width, sy: bh / resolution.height };
+}
+
 function drawCellThumb(canvas, sprite, layerIndex, frameIndex) {
-  const ctx = setupSpriteCanvas(canvas, sprite.resolution);
-  if (!ctx) return;
+  const setup = setupThumbCanvas(canvas, sprite.resolution);
+  if (!setup) return;
+  const { ctx, sx, sy } = setup;
+  const { width, height } = sprite.resolution;
+
+  // Thumbnails show the sprite's chosen finish, so a Smooth sprite reads as
+  // Smooth in the timeline. renderSmoothLayerCell handles the whole finish
+  // space: analytic shapes for path layers under the vector renderer, corner
+  // kernel otherwise.
+  if (displayFinish(sprite).smooth) {
+    const scale = (sx + sy) / 2;
+    const off = document.createElement('canvas');
+    renderSmoothLayerCell(sprite, layerIndex, frameIndex, off, { scale });
+    ctx.imageSmoothingEnabled = true;
+    ctx.drawImage(off, 0, 0, off.width, off.height, 0, 0, canvas.width, canvas.height);
+    return;
+  }
+
+  ctx.imageSmoothingEnabled = false;
   const resolved = resolveCell(sprite.layers[layerIndex], frameIndex);
   if (!resolved) return;
-  const { width, height } = sprite.resolution;
   const { grid, x: offsetX, y: offsetY } = resolved;
   const lookup = paletteLookup(sprite.palette);
   forEachGridCell(grid, Infinity, Infinity, (gx, gy, key) => {
@@ -699,10 +811,18 @@ function drawCellThumb(canvas, sprite, layerIndex, frameIndex) {
     const cy = gy + offsetY;
     if (cx < 0 || cx >= width || cy < 0 || cy >= height) return;
     const color = colorForKeyV2(lookup, key);
-    if (color) {
-      ctx.fillStyle = color;
-      ctx.fillRect(cx, cy, 1, 1);
-    }
+    if (!color) return;
+    // Snap every cell to whole device pixels. The scale here is fractional (a
+    // 16px sprite in a 43px cell is 5.375), and a fractional fillRect
+    // anti-aliases both sides of each shared edge; two half-covered columns
+    // composite to ~75% rather than 100%, which is the faint grid that shows
+    // over flat colour. Deriving both edges from the same rounded expression
+    // makes neighbours land on exactly the same boundary. The cost is that
+    // cells differ by up to one device pixel in size.
+    const x0 = Math.round(cx * sx);
+    const y0 = Math.round(cy * sy);
+    ctx.fillStyle = color;
+    ctx.fillRect(x0, y0, Math.round((cx + 1) * sx) - x0, Math.round((cy + 1) * sy) - y0);
   });
 }