castle-web-cli 0.4.74 → 0.4.76

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

@@ -16,10 +16,17 @@ import {
 } from './pixelInspector';
 import { useArtboardFit, useEditorCompactLayout } from './useArtboardFit';
 import {
+  DEFAULT_KEY,
   EDITOR_KEYS,
   EDITOR_PALETTE,
+  clearRegion,
   fillRegion,
+  flipCellsH,
+  flipCellsV,
+  moveRegion,
   paintLine,
+  paintShape,
+  rotateCellsCW,
   sampleKey,
   swapKey,
 } from './pxArtTools';
@@ -71,17 +78,29 @@ const TOOL_CURSORS = {
   brush: 'cell',
   erase: 'cell',
   fill: 'crosshair',
+  shape: 'crosshair',
+  select: 'crosshair',
   'move-all': 'move',
 };
 
 export function PxArtEditor({ path, text, onChange, ...chrome }) {
   const canvasRef = useRef(null);
+  const overlayRef = useRef(null);
   const strokeRef = useRef(null);
-  const [activeKey, setActiveKey] = useState(EDITOR_KEYS[1]);
+  // The serialized text this editor last wrote itself. Lets us tell our own
+  // edits apart from external rewrites (undo/redo) so the marquee can be dropped
+  // when the art changes out from under it.
+  const lastSelfTextRef = useRef(text);
+  const [activeKey, setActiveKey] = useState(DEFAULT_KEY);
   const [rawSelection, setRawSelection] = useState({ layerIndex: 0, frameIndex: 0 });
   const [playing, setPlaying] = useState(false);
   const [onion, setOnion] = useState({ enabled: false, range: 1 });
   const [hoverCell, setHoverCell] = useState(null);
+  // The marquee selection rectangle { x, y, w, h } in canvas cells, or null. It
+  // is a MODE of the select tool: cleared when leaving the tool or changing the
+  // active cel. `antsOffset` ticks the marching-ants animation while it's shown.
+  const [marquee, setMarquee] = useState(null);
+  const [antsOffset, setAntsOffset] = useState(0);
   const toolState = usePixelToolState();
   const {
     tool,
@@ -90,6 +109,8 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     setPicking,
     eraseFillMode,
     fillSwapMode,
+    shapeMode,
+    shapeFill,
     brushSize,
     setBrushSize,
     eraseSize,
@@ -132,6 +153,54 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   useEffect(() => {
     if (!isCompactLayout) setPaletteOpen(false);
   }, [isCompactLayout]);
+  // The marquee is a mode of the select tool: drop it when switching to another
+  // tool or when the active cel (layer/frame) changes, so it never lingers over
+  // pixels it no longer refers to.
+  useEffect(() => {
+    if (tool !== 'select') setMarquee(null);
+  }, [tool]);
+  useEffect(() => {
+    setMarquee(null);
+  }, [selection.layerIndex, selection.frameIndex]);
+  // Undo/redo (or any external rewrite) restores the art text but not the
+  // separate marquee state, which would strand the selection box over the wrong
+  // pixels. A text value this editor didn't produce means an external change, so
+  // drop the selection to keep it from ever desyncing from the art.
+  useEffect(() => {
+    if (text === lastSelfTextRef.current) return;
+    lastSelfTextRef.current = text;
+    setMarquee(null);
+  }, [text]);
+  // March the ants only while a selection is visible.
+  useEffect(() => {
+    if (tool !== 'select' || !marquee) return undefined;
+    const id = setInterval(() => setAntsOffset((o) => (o + 1) % 1000), 80);
+    return () => clearInterval(id);
+  }, [tool, marquee]);
+  // Draw the marching-ants selection on a display-resolution overlay canvas so
+  // the outline stays crisp (drawing it on the upscaled native artboard renders
+  // the thin dashes sub-pixel and washed out).
+  useEffect(() => {
+    renderMarqueeOverlay(overlayRef.current, sprite?.resolution, playing ? null : marquee, antsOffset);
+  }, [marquee, antsOffset, playing, canvasStyle, sprite?.resolution.width, sprite?.resolution.height]);
+  // Escape deselects; Delete/Backspace clears the selected pixels. Both only
+  // while the select tool is active and a marquee exists.
+  useEffect(() => {
+    if (tool !== 'select' || !marquee) return undefined;
+    function onKeyDown(event) {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      if (isTypingTarget(event.target || document.activeElement)) return;
+      if (event.key === 'Escape') {
+        setMarquee(null);
+        event.preventDefault();
+      } else if (event.key === 'Delete' || event.key === 'Backspace') {
+        deleteMarqueePixels();
+        event.preventDefault();
+      }
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [tool, marquee, text, selection.layerIndex, selection.frameIndex]);
 
   if (!sprite) {
     return (
@@ -142,7 +211,12 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   }
 
   const { width, height } = sprite.resolution;
-  const cursor = picking ? 'crosshair' : (TOOL_CURSORS[tool] ?? 'default');
+  const overSelection = tool === 'select' && marquee && hoverCell && pointInRect(hoverCell, marquee);
+  const cursor = picking
+    ? 'crosshair'
+    : overSelection
+      ? 'move'
+      : (TOOL_CURSORS[tool] ?? 'default');
 
   function togglePalette(next) {
     setPaletteOpen((previous) => (typeof next === 'boolean' ? next : !previous));
@@ -160,6 +234,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       stroke.recorded = true;
     }
     stroke.draftText = nextText;
+    lastSelfTextRef.current = nextText;
     onChange(nextText);
   }
   // Paint/erase strokes accumulate in a canvas-window matrix; merge it back into
@@ -171,8 +246,31 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     liveSprite(withCellsAt(stroke.base, stroke.layerIndex, stroke.frameIndex, nextCells));
   }
   function commitCells(nextCells) {
-    history.commit(serializeModel(withCellsAt(sprite, selection.layerIndex, selection.frameIndex, nextCells)));
+    const nextText = serializeModel(withCellsAt(sprite, selection.layerIndex, selection.frameIndex, nextCells));
+    lastSelfTextRef.current = nextText;
+    history.commit(nextText);
   }
+  // Transform the active cel's canvas-window pixels in one history step (the
+  // move tool's flip / rotate actions). A no-op transform commits nothing.
+  function transformActiveCel(transform) {
+    const cells = cellsAt(sprite, selection.layerIndex, selection.frameIndex);
+    const next = transform(cells);
+    commitCells(next);
+  }
+  const moveActions = {
+    flipH: () => transformActiveCel(flipCellsH),
+    flipV: () => transformActiveCel(flipCellsV),
+    rotateCW: () => transformActiveCel(rotateCellsCW),
+  };
+  // Clear the marquee region's pixels to transparent (keeps the selection rect).
+  function deleteMarqueePixels() {
+    if (!marquee) return;
+    transformActiveCel((cells) => clearRegion(cells, marquee));
+  }
+  const selectActions = {
+    hasSelection: !!marquee,
+    deletePixels: deleteMarqueePixels,
+  };
   function startTool(event) {
     const point = eventToCell(event, width, height);
     if (!point) return;
@@ -186,6 +284,28 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       setPicking(false);
       return;
     }
+    if (tool === 'select') {
+      // Pointer down inside the current selection starts a move (lift & float);
+      // anywhere else begins a fresh marquee rectangle.
+      const moving = marquee && pointInRect(point, marquee);
+      strokeRef.current = {
+        tool: 'select',
+        mode: moving ? 'move' : 'new',
+        startPoint: point,
+        lastPoint: point,
+        base: sprite,
+        layerIndex: selection.layerIndex,
+        frameIndex: selection.frameIndex,
+        originCells: cells,
+        originRect: moving ? marquee : null,
+        draftCells: cells,
+        draftText: null,
+        recorded: false,
+      };
+      if (!moving) setMarquee({ x: point.x, y: point.y, w: 1, h: 1 });
+      updateStroke(point);
+      return;
+    }
     if (tool === 'fill') {
       const next = fillSwapMode ? swapKey(cells, point, activeKey) : fillRegion(cells, point, activeKey);
       if (next !== cells) commitCells(next);
@@ -207,6 +327,9 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       // (start + total drag) and accumulates losslessly across gestures.
       startOffset: cellOffsetAt(sprite, selection.layerIndex, selection.frameIndex),
       draftCells: cells,
+      // The cells at gesture start, kept immutable so the shape tools recompute
+      // from a clean slate on each move instead of accumulating partial shapes.
+      originCells: cells,
       draftText: null,
       recorded: false,
     };
@@ -235,12 +358,28 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   function updateStroke(point) {
     const stroke = strokeRef.current;
     if (!stroke) return;
+    if (stroke.tool === 'select') {
+      if (stroke.mode === 'new') {
+        setMarquee(rectFromPoints(stroke.startPoint, point, width, height));
+      } else {
+        const dx = point.x - stroke.startPoint.x;
+        const dy = point.y - stroke.startPoint.y;
+        liveStroke(moveRegion(stroke.originCells, stroke.originRect, dx, dy));
+        setMarquee({ ...stroke.originRect, x: stroke.originRect.x + dx, y: stroke.originRect.y + dy });
+      }
+      stroke.lastPoint = point;
+      return;
+    }
     if (stroke.tool === 'brush') {
       liveStroke(paintLine(stroke.draftCells, stroke.lastPoint, point, activeKey, brushSize));
       stroke.lastPoint = point;
     } else if (stroke.tool === 'erase') {
       liveStroke(paintLine(stroke.draftCells, stroke.lastPoint, point, TRANSPARENT, eraseSize));
       stroke.lastPoint = point;
+    } else if (stroke.tool === 'shape') {
+      // Recompute from the gesture-start snapshot so the shape rubber-bands to
+      // the current point rather than stacking each intermediate draft.
+      liveStroke(paintShape(stroke.originCells, stroke.startPoint, point, activeKey, shapeMode, shapeFill));
     } else if (stroke.tool === 'move-all') {
       // Translate the cel's OFFSET by the drag delta instead of shifting and
       // clipping pixels — the full cel image is preserved, so pushing art off
@@ -251,6 +390,18 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     }
   }
   function finishTool() {
+    const stroke = strokeRef.current;
+    if (stroke && stroke.tool === 'select') {
+      if (stroke.mode === 'new' && samePoint(stroke.startPoint, stroke.lastPoint)) {
+        // A click with no drag deselects.
+        setMarquee(null);
+      } else if (stroke.mode === 'move') {
+        // Keep the ants box meaningful: clip the moved rect to the canvas (the
+        // pixels themselves were already clipped on commit), dropping it if it
+        // ended fully off-canvas.
+        setMarquee((rect) => clampRectToCanvas(rect, width, height));
+      }
+    }
     strokeRef.current = null;
   }
 
@@ -291,6 +442,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
                 </div>
                 <PixelArtboard
                   canvasRef={canvasRef}
+                  overlayRef={overlayRef}
                   style={{ ...canvasStyle, cursor }}
                   handlers={{
                     onPointerDown: startTool,
@@ -313,6 +465,8 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
                 onSelectKey={setActiveKey}
                 paletteKeys={EDITOR_KEYS}
                 palette={EDITOR_PALETTE}
+                moveActions={moveActions}
+                selectActions={selectActions}
               />
             </div>
           </div>
@@ -330,6 +484,8 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
           onSelectKey={setActiveKey}
           paletteKeys={EDITOR_KEYS}
           palette={EDITOR_PALETTE}
+          moveActions={moveActions}
+          selectActions={selectActions}
         />
       </div>
     </PxArtShell>
@@ -462,6 +618,80 @@ function renderArtboard(canvas, sprite, frameIndex, onion, playing, preview) {
   if (preview) drawToolPreview(ctx, canvas, preview);
 }
 
+// Render-only animated marching ants for the marquee selection, drawn on a
+// display-resolution overlay canvas (1 device pixel per CSS pixel) so the dashed
+// outline is crisp and bold rather than sub-pixel on the upscaled artboard.
+// `rect` is in canvas cells; null clears the overlay.
+function renderMarqueeOverlay(canvas, resolution, rect, antsOffset) {
+  if (!canvas || !resolution) return;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const cssW = canvas.clientWidth;
+  const cssH = canvas.clientHeight;
+  if (!cssW || !cssH) return;
+  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;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, bw, bh);
+  if (!rect) return;
+
+  const sx = bw / resolution.width;
+  const sy = bh / resolution.height;
+  const lineWidth = Math.max(2, Math.round(2 * dpr));
+  const dash = Math.max(5, Math.round(5 * dpr));
+  // Advance ~2 device px per tick (not a whole dash) so the ants crawl smoothly
+  // instead of teleporting a full dash each frame.
+  const step = Math.max(1, Math.round(dpr));
+  const move = (antsOffset * step) % (dash * 2);
+  const half = lineWidth / 2;
+  const x = rect.x * sx + half;
+  const y = rect.y * sy + half;
+  const w = Math.max(lineWidth, rect.w * sx - lineWidth);
+  const h = Math.max(lineWidth, rect.h * sy - lineWidth);
+
+  ctx.lineWidth = lineWidth;
+  ctx.setLineDash([dash, dash]);
+  ctx.strokeStyle = '#000000';
+  ctx.lineDashOffset = -move;
+  ctx.strokeRect(x, y, w, h);
+  ctx.strokeStyle = '#ffffff';
+  ctx.lineDashOffset = -move + dash;
+  ctx.strokeRect(x, y, w, h);
+}
+
+// Build a marquee rect { x, y, w, h } from two cell points, normalized and
+// clamped to the canvas (min 1x1).
+function rectFromPoints(a, b, width, height) {
+  const x0 = Math.max(0, Math.min(a.x, b.x));
+  const y0 = Math.max(0, Math.min(a.y, b.y));
+  const x1 = Math.min(width - 1, Math.max(a.x, b.x));
+  const y1 = Math.min(height - 1, Math.max(a.y, b.y));
+  return { x: x0, y: y0, w: x1 - x0 + 1, h: y1 - y0 + 1 };
+}
+
+function pointInRect(point, rect) {
+  return (
+    point.x >= rect.x &&
+    point.x < rect.x + rect.w &&
+    point.y >= rect.y &&
+    point.y < rect.y + rect.h
+  );
+}
+
+// Intersect a marquee rect with the canvas; null when it ends up fully off it.
+function clampRectToCanvas(rect, width, height) {
+  if (!rect) return null;
+  const x0 = Math.max(0, rect.x);
+  const y0 = Math.max(0, rect.y);
+  const x1 = Math.min(width, rect.x + rect.w);
+  const y1 = Math.min(height, rect.y + rect.h);
+  if (x1 <= x0 || y1 <= y0) return null;
+  return { x: x0, y: y0, w: x1 - x0, h: y1 - y0 };
+}
+
 function blitOnion(ctx, sprite, idx, color, dist) {
   if (idx < 0 || idx >= frameCount(sprite)) return;
   ctx.globalAlpha = Math.max(0.12, 0.5 / dist);
@@ -497,7 +727,7 @@ function onionTint(src, color) {
 
 // Single-letter tool picks. The eyedropper ('i') is handled separately because
 // it toggles the transient picker rather than swapping the sidebar tool.
-const SHORTCUT_TOOLS = { b: 'brush', g: 'fill', e: 'erase', v: 'move-all' };
+const SHORTCUT_TOOLS = { b: 'brush', g: 'fill', s: 'shape', m: 'select', e: 'erase', v: 'move-all' };
 
 // True when focus is on a text-entry control, so typing there isn't hijacked.
 function isTypingTarget(node) {
@@ -594,6 +824,9 @@ function buildToolPreview({ sprite, selection, hoverCell, tool, picking, brushSi
     const cells = cellsAt(sprite, selection.layerIndex, selection.frameIndex);
     return { kind: 'region', cells: fillPreviewCells(cells, hoverCell), color };
   }
+  // The shape tool needs two points to draw, so before a drag we just mark the
+  // hovered start cell; the live shape itself shows once the drag begins.
+  if (tool === 'shape') return { kind: 'cell', cell: hoverCell };
   return null;
 }
 

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { renderSpriteFrame } from '../engine/pxart';
 import { basename, formatJson, parseJsonFile } from '../engine/files';
-import { TouchControls } from '../engine/TouchControls';
 import {
   addActor,
   arrangeActors,
@@ -90,7 +89,6 @@ export function SceneEditor({
   const showMulti = selectedActorIds.length > 1 || multiSelectMode;
   const inspectorSheet = useSelectionInspectorSheet(true);
   const { value: sceneData, error } = parseJsonFile(path, text);
-  const getRuntimeKeys = useCallback(() => runtimeRef.current?.keys ?? null, []);
   const getRuntime = useCallback(() => runtimeRef.current, []);
   useScenePlayLoop({
     sceneData,
@@ -288,7 +286,6 @@ export function SceneEditor({
           </aside>
         </div>
       </EditorBody>
-      <TouchControls getKeys={getRuntimeKeys} visible={isPlaying} />
     </>
   );
 }

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

@@ -1,18 +1,15 @@
-// Single-editor + file-list mounts for the panel system. The shell (dockview)
-// opens each as its own iframe via the deck route in main.jsx:
+// Single-editor mount for the panel system. The shell (dockview) opens this as
+// its own iframe via the deck route in main.jsx:
 //   ?file=<path>[&editor=<id>]  -> <SingleEditor> (one editor for one file)
-//   ?panel=files                -> <FileList> (postMessages the shell to open a file)
-// This is the "deck single-editor mount": the deck serves one deck-level editor
-// for a file, so each file is its own panel instead of one combined editor app.
+// The shell only routes the kit's RICH file types here (scene / pxart); file
+// browsing and the code/text editor are now builtin shell panels.
 
 import React, { useEffect, useRef, useState } from 'react';
 import { onBeforeRestart, writeFile } from 'castle-web-sdk';
 import { getFileKind, initialFiles } from '../engine/files';
 import { collectAssets } from '../engine/assets';
 import { MainEditor, styles } from '../engine/ui';
-import { CodeEditor } from './CodeEditor';
 import { PxArtEditor } from './PxArtEditor';
-import { FileBrowser } from './FileBrowser';
 import { SceneEditor } from './SceneEditor';
 
 // Debounced writeFile per path, flushed on reload -- the same save behavior the
@@ -89,54 +86,12 @@ export function SingleEditor({ path, editor }) {
     );
   } else if (kind === 'pxart') {
     body = <PxArtEditor path={path} text={text} onChange={onChange} />;
-  } else {
-    // 'code' and 'text' both render raw. Note: do NOT run plain text through
-    // formatJson (JSON.stringify) -- getFileKind only routes non-JSON files
-    // here, so it would quote/escape the contents (a new file.txt would show
-    // and save back as "Hello I'm a file" with literal quotes).
-    body = <CodeEditor path={path} text={text} onChange={onChange} />;
   }
+  // No `else`: code/text files are handled by the builtin shell code editor, so
+  // the shell never routes them here. `body` stays null for any other kind.
   return (
     <div className={styles.panelBare}>
       <MainEditor>{body}</MainEditor>
     </div>
   );
 }
-
-// File panel: a read-only file browser (bare, no sidebar/sheet chrome).
-// Clicking a file asks the shell to open / focus its editor panel. File
-// mutation (add / duplicate / rename / delete) is intentionally NOT wired here:
-// under the kit's static-glob content model those edits only persist within a
-// session, so the browser is browse-and-open only until real persistence lands.
-export function FileList({ selectedPath }) {
-  const [files] = useState(initialFiles);
-  const [selected, setSelected] = useState(selectedPath);
-  useEffect(() => {
-    setSelected(selectedPath);
-  }, [selectedPath]);
-
-  function open(path) {
-    setSelected(path);
-    try {
-      window.parent.postMessage({ type: 'castle-open-file', path }, '*');
-    } catch {
-      /* not embedded */
-    }
-  }
-  // Safari won't paint this static panel inside its composited dockview iframe
-  // until an invalidation is forced (the rows only appear once devtools opens).
-  // translateZ(0) promotes it to its own compositing layer so Safari paints and
-  // keeps it. The container sits at the iframe's viewport origin and isn't the
-  // scrollport's scrolling box, so it doesn't shift the fixed context menu.
-  return (
-    <div
-      style={{
-        height: '100vh',
-        overflow: 'auto',
-        background: 'var(--castle-sheet-bg, #0d0d0d)',
-        transform: 'translateZ(0)',
-      }}>
-      <FileBrowser bare files={files} selectedPath={selected} onSelect={open} />
-    </div>
-  );
-}

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

@@ -37,19 +37,25 @@ export function PixelEditorHeader({ title, subtitle, shell, chrome }) {
 
 // The native-resolution canvas inside its artboard frame. `style` sets the fitted
 // display size; `handlers` are the pointer callbacks the editor wires for tools.
-export function PixelArtboard({ canvasRef, style, handlers }) {
+// `overlayRef` is a sibling canvas at display resolution used for crisp overlays
+// (marching-ants selection) that would otherwise render sub-pixel on the upscaled
+// native canvas.
+export function PixelArtboard({ canvasRef, overlayRef, style, handlers }) {
   return (
     <div className={styles.drawingArtboard}>
-      <canvas
-        ref={canvasRef}
-        className={styles.drawingCanvas}
-        style={style}
-        onPointerDown={handlers.onPointerDown}
-        onPointerMove={handlers.onPointerMove}
-        onPointerUp={handlers.onPointerUp}
-        onPointerCancel={handlers.onPointerCancel}
-        onPointerLeave={handlers.onPointerLeave}
-      />
+      <div className={styles.drawingArtboardFrame} style={style}>
+        <canvas
+          ref={canvasRef}
+          className={styles.drawingCanvas}
+          style={style}
+          onPointerDown={handlers.onPointerDown}
+          onPointerMove={handlers.onPointerMove}
+          onPointerUp={handlers.onPointerUp}
+          onPointerCancel={handlers.onPointerCancel}
+          onPointerLeave={handlers.onPointerLeave}
+        />
+        <canvas ref={overlayRef} className={styles.drawingOverlay} aria-hidden="true" />
+      </div>
     </div>
   );
 }

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

@@ -43,3 +43,98 @@ export function forEachLinePoint(from, to, visit) {
     visit(x, y);
   }
 }
+
+// The shape tools (square/circle/triangle) are bounded by the axis-aligned box
+// the drag sweeps out, so they share this normalized corner unpacking.
+function shapeBounds(from, to) {
+  return {
+    x0: Math.min(from.x, to.x),
+    x1: Math.max(from.x, to.x),
+    y0: Math.min(from.y, to.y),
+    y1: Math.max(from.y, to.y),
+  };
+}
+
+// Visit the cells of the rectangle bounded by `from`/`to`. `filled` paints the
+// solid box; otherwise only the 1px border. `visit(x, y)` receives cell coords.
+export function forEachRectCells(from, to, filled, visit) {
+  const { x0, x1, y0, y1 } = shapeBounds(from, to);
+  for (let y = y0; y <= y1; y++) {
+    for (let x = x0; x <= x1; x++) {
+      if (filled || x === x0 || x === x1 || y === y0 || y === y1) visit(x, y);
+    }
+  }
+}
+
+// Visit the cells of the ellipse inscribed in the `from`/`to` box. A cell is
+// "inside" when its center falls within the normalized ellipse; the half-cell
+// radius padding lets tiny drags still fill their box. The outline keeps only
+// inside cells with at least one 4-neighbor outside, so it reads as a closed
+// ring with no gaps.
+export function forEachEllipseCells(from, to, filled, visit) {
+  const { x0, x1, y0, y1 } = shapeBounds(from, to);
+  const cx = (x0 + x1) / 2;
+  const cy = (y0 + y1) / 2;
+  const rx = (x1 - x0) / 2 + 0.5;
+  const ry = (y1 - y0) / 2 + 0.5;
+  const inside = (x, y) => {
+    const nx = (x - cx) / rx;
+    const ny = (y - cy) / ry;
+    return nx * nx + ny * ny <= 1;
+  };
+  for (let y = y0; y <= y1; y++) {
+    for (let x = x0; x <= x1; x++) {
+      if (!inside(x, y)) continue;
+      if (filled) {
+        visit(x, y);
+      } else if (
+        !inside(x - 1, y) ||
+        !inside(x + 1, y) ||
+        !inside(x, y - 1) ||
+        !inside(x, y + 1)
+      ) {
+        visit(x, y);
+      }
+    }
+  }
+}
+
+// Cross-product sign of point c relative to the directed edge a->b. Used both
+// to build the triangle outline and to test point containment for the fill.
+function edgeCross(a, b, cx, cy) {
+  return (b.x - a.x) * (cy - a.y) - (b.y - a.y) * (cx - a.x);
+}
+
+// Visit the cells of an isosceles triangle inscribed in the `from`/`to` box:
+// apex centered on the top edge, base spanning the bottom edge. `filled` uses a
+// barycentric point-in-triangle test over the box; the outline walks the three
+// edges. A shared `seen` set dedups cells shared by adjacent edges/scanlines.
+export function forEachTriangleCells(from, to, filled, visit) {
+  const { x0, x1, y0, y1 } = shapeBounds(from, to);
+  const apex = { x: Math.round((x0 + x1) / 2), y: y0 };
+  const left = { x: x0, y: y1 };
+  const right = { x: x1, y: y1 };
+  const seen = new Set();
+  const emit = (x, y) => {
+    const key = `${x},${y}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    visit(x, y);
+  };
+  if (filled) {
+    for (let y = y0; y <= y1; y++) {
+      for (let x = x0; x <= x1; x++) {
+        const w0 = edgeCross(left, right, x, y);
+        const w1 = edgeCross(right, apex, x, y);
+        const w2 = edgeCross(apex, left, x, y);
+        const hasNeg = w0 < 0 || w1 < 0 || w2 < 0;
+        const hasPos = w0 > 0 || w1 > 0 || w2 > 0;
+        if (!(hasNeg && hasPos)) emit(x, y);
+      }
+    }
+    return;
+  }
+  forEachLinePoint(apex, left, emit);
+  forEachLinePoint(left, right, emit);
+  forEachLinePoint(right, apex, emit);
+}