castle-web-cli 0.4.122 → 0.4.124

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

@@ -7,6 +7,15 @@ import {
   renderSmoothSpriteFrame,
 } from '../engine/pxartSmooth';
 import { basename } from '../engine/files';
+import {
+  allocateSpriteColor,
+  deckPaletteFromFiles,
+  hexForPaletteKey,
+  paletteRecord,
+  pickerColorsFor,
+  pickerPageIndexFor,
+  pickerPagesFor,
+} from '../engine/palettes';
 import { EditorBody, Icon, IconButton, styles } from '../engine/ui';
 import { eventToCell, eventToPoint } from './pixelCanvas';
 import { forEachDab } from './pixelGeometry';
@@ -84,9 +93,6 @@ import {
 import { useArtboardFit, useEditorCompactLayout } from './useArtboardFit';
 import { useTwoFingerZoomPan } from '../engine/gestureZoomPan';
 import {
-  DEFAULT_KEY,
-  EDITOR_KEYS,
-  EDITOR_PALETTE,
   clearRegion,
   fillRegion,
   flipCellsH,
@@ -137,8 +143,8 @@ import tl from './pxArtTimeline.module.css';
 // Aseprite-style editor for the full .pxart sprite format: a full layers x frames
 // timeline below a compositing artboard. The artboard composites the active
 // frame's visible layers (renderSpriteFrame) so the artist sees the whole image
-// while painting targets the active layer's cell, over a FIXED Endesga-64
-// palette and power-of-two resolutions. Sprites that lose nothing in the compact
+// while painting targets the active layer's cell, over the sprite's own palette
+// (deck palette is a picker) and power-of-two resolutions. Sprites that lose nothing in the compact
 // form serialize to compact; anything richer serializes to the full form.
 const ONION_WARM = '#ff7a3c';
 const ONION_COOL = '#3ca0ff';
@@ -189,7 +195,7 @@ const PATH_ONLY_TOOL_IDS = new Set(
   )
 );
 
-export function PxArtEditor({ path, text, onChange, ...chrome }) {
+export function PxArtEditor({ path, text, onChange, files, ...chrome }) {
   const canvasRef = useRef(null);
   const smoothRef = useRef(null);
   const overlayRef = useRef(null);
@@ -199,7 +205,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   // 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 [activeHex, setActiveHex] = useState(null);
   const [rawSelection, setRawSelection] = useState({ layerIndex: 0, frameIndex: 0 });
   const [playing, setPlaying] = useState(false);
   const [onion, setOnion] = useState({ enabled: false, range: 1 });
@@ -263,6 +269,29 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   const [paletteOpen, setPaletteOpen] = useState(false);
 
   const sprite = deriveSprite(text);
+  const deckPalette = useMemo(() => deckPaletteFromFiles(files), [files]);
+  const deckHexes = useMemo(() => pickerColorsFor(deckPalette.colors), [deckPalette]);
+  const pages = useMemo(() => pickerPagesFor(deckPalette), [deckPalette]);
+  const [pageIndex, setPageIndex] = useState(() => pickerPageIndexFor(pages, deckPalette));
+  const onPage = useCallback((delta) => {
+    setPageIndex((index) => {
+      const n = pages.length;
+      return n ? (index + delta + n) % n : 0;
+    });
+  }, [pages.length]);
+  const workingPalette = useMemo(() => paletteRecord(sprite?.palette), [sprite]);
+  const workingKeys = useMemo(() => (sprite?.palette ?? []).map((entry) => entry.key), [sprite]);
+  const paintReady = useMemo(
+    () => (sprite && activeHex ? allocateSpriteColor(sprite, activeHex) : { sprite, key: null }),
+    [sprite, activeHex]
+  );
+  const paintKey = paintReady.key;
+  // Derived, not stored: the note shows exactly while the active color can't be
+  // allocated, and clears itself when undo or a palette edit frees a slot.
+  const paletteFull = paintReady.error === 'palette-full';
+  useEffect(() => {
+    if (!activeHex && deckHexes[0]) setActiveHex(deckHexes[0]);
+  }, [activeHex, deckHexes]);
   const selection = sprite
     ? clampSelection(sprite, rawSelection.layerIndex, rawSelection.frameIndex)
     : rawSelection;
@@ -308,7 +337,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     picking,
     brushSize,
     eraseSize,
-    activeKey,
+    activeHex,
     pathBakePreview,
   });
   const { canvasStyle, displaySize } = useArtboardFit({
@@ -577,7 +606,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       drawPathOverlay(overlayRef.current, sprite?.resolution, playing ? null : activePath, {
         tool,
         brushMode,
-        palette: EDITOR_PALETTE,
+        palette: workingPalette,
         brushInk,
         brushGhost,
         hoverPoint,
@@ -589,7 +618,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
         hoverEdge,
         shapeMarquee,
         fillHoverTarget,
-        activeColor: EDITOR_PALETTE[activeKey],
+        activeColor: activeHex,
         smoothFinish: isVectorRenderer(sprite?.renderer),
       });
     } else {
@@ -605,7 +634,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
               picking,
               brushSize,
               eraseSize,
-              activeKey,
+              activeHex,
               playing,
             });
       renderPixelOverlay(overlayRef.current, sprite?.resolution, {
@@ -634,7 +663,8 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     hoverEdge,
     shapeMarquee,
     fillHoverTarget,
-    activeKey,
+    paintKey,
+    activeHex,
     hoverCell,
     picking,
     brushSize,
@@ -747,7 +777,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     text,
     selection.layerIndex,
     selection.frameIndex,
-    activeKey,
+    paintKey,
     activePath,
   ]);
   // Shift/Alt during a brush primitive drag only update on pointermove unless
@@ -851,8 +881,8 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     stroke.draftCells = nextCells;
     liveSprite(withCellsAt(stroke.base, stroke.layerIndex, stroke.frameIndex, nextCells));
   }
-  function commitCells(nextCells) {
-    const nextText = serializeModel(withCellsAt(sprite, selection.layerIndex, selection.frameIndex, nextCells));
+  function commitCells(nextCells, base = sprite) {
+    const nextText = serializeModel(withCellsAt(base, selection.layerIndex, selection.frameIndex, nextCells));
     lastSelfTextRef.current = nextText;
     history.commit(nextText);
   }
@@ -901,12 +931,12 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       history.cancelSnapshot();
     }
   }
-  function commitPath(nextPath, options) {
+  function commitPath(nextPath, options, base = sprite) {
     // Hold the invariant that an edge exists once, after any edit rather than
     // only the one that happened to produce a duplicate. Skipped mid-limb: a
     // half-drawn run can lie on the outline on its way somewhere else.
     const settled = penLimbRef.current ? nextPath : absorbRetracedSubpaths(nextPath);
-    const nextText = serializeModel(withPathAt(sprite, selection.layerIndex, selection.frameIndex, settled));
+    const nextText = serializeModel(withPathAt(base, selection.layerIndex, selection.frameIndex, settled));
     lastSelfTextRef.current = nextText;
     history.commit(nextText, options);
   }
@@ -956,7 +986,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   }
   function refitBrushGhost(ink, halfPixel = false) {
     const fit = fitBrushInk(ink, { halfPixel, cellPull: pathCellPull });
-    const shape = fit ? shapeFromBrushFit(fit, activeKey) : null;
+    const shape = fit ? shapeFromBrushFit(fit, paintKey) : null;
     // Cyan ghost stays visible even when the bake blends into existing pixels.
     // Skip clearing on a null fit so the preview doesn't blink in the
     // degenerate snap cell around the gesture start.
@@ -966,7 +996,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   function refitBrushPrimitiveGhost(start, end, halfPixel = false, constrain = false) {
     const stroke = strokeRef.current;
     const mode = stroke?.brushMode ?? brushMode;
-    const shape = ghostFromBrushDrag(mode, start, end, { halfPixel, constrain, activeKey, cellPull: pathCellPull });
+    const shape = ghostFromBrushDrag(mode, start, end, { halfPixel, constrain, activeKey: paintKey, cellPull: pathCellPull });
     if (shape) setBrushGhost(shape);
     liveBrushBake(shape);
   }
@@ -978,14 +1008,14 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     let shape = null;
     if (stroke.brushMode === 'freehand') {
       const fit = fitBrushInk(brushInkRef.current, { halfPixel, cellPull: pathCellPull });
-      shape = fit ? shapeFromBrushFit(fit, activeKey) : null;
+      shape = fit ? shapeFromBrushFit(fit, paintKey) : null;
     } else {
       const start = stroke.startPoint;
       const end = endPoint ?? stroke.lastPoint ?? start;
       shape = shapeFromBrushDrag(stroke.brushMode, start, end, {
         halfPixel,
         constrain,
-        activeKey,
+        activeKey: paintKey,
         cellPull: pathCellPull,
       });
     }
@@ -1052,7 +1082,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       return appendAnchorToSubpath(path, target.shapeIndex, target.subIndex, [sx, sy]);
     }
 
-    return appendShape(path, shapeFromPenDraft([[sx, sy]], { closed: false, activeKey }));
+    return appendShape(path, shapeFromPenDraft([[sx, sy]], { closed: false, activeKey: paintKey }));
   }
   function updatePenHoverBake(point, halfPixel) {
     const now = performance.now();
@@ -1356,13 +1386,25 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       if (!selectedShapeIndices.length) return;
       commitPath(rotateShapes90CW(activePath, selectedShapeIndices));
     },
-    setFill: (key) => {
+    setFill: (hex) => {
       if (!selectedShapeIndices.length) return;
-      commitPath(setShapesFill(activePath, selectedShapeIndices, key));
+      if (hex == null) {
+        commitPath(setShapesFill(activePath, selectedShapeIndices, null));
+        return;
+      }
+      const allocated = allocateSpriteColor(sprite, hex);
+      if (!allocated.key) return;
+      commitPath(setShapesFill(activePath, selectedShapeIndices, allocated.key), undefined, allocated.sprite);
     },
-    setStroke: (key) => {
+    setStroke: (hex) => {
       if (!selectedShapeIndices.length) return;
-      commitPath(setShapesStroke(activePath, selectedShapeIndices, key));
+      if (hex == null) {
+        commitPath(setShapesStroke(activePath, selectedShapeIndices, null));
+        return;
+      }
+      const allocated = allocateSpriteColor(sprite, hex);
+      if (!allocated.key) return;
+      commitPath(setShapesStroke(activePath, selectedShapeIndices, allocated.key), undefined, allocated.sprite);
     },
   };
   function startPenStroke(point, event) {
@@ -1426,11 +1468,12 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     }
 
     // Start a new open stroked shape at this anchor.
-    const shape = shapeFromPenDraft([[sx, sy]], { closed: false, activeKey });
+    if (!paintReady.key) return;
+    const shape = shapeFromPenDraft([[sx, sy]], { closed: false, activeKey: paintKey });
     const next = appendShape(activePath, shape);
     const top = (next.shapes?.length ?? 1) - 1;
     penStubIndexRef.current = top;
-    commitPath(next);
+    commitPath(next, undefined, paintReady.sprite);
     setSelectedShapeIndices([top]);
     setSelectedAnchors([]);
   }
@@ -1697,8 +1740,9 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       startPenStroke(point, event);
       return;
     }
+    if (!paintReady.key) return;
     const { halfPixel, constrain } = brushModifiersFromEvent(event);
-    const base = sprite;
+    const base = paintReady.sprite;
     const baseText = serializeModel(sprite);
     const path = activePath;
     if (brushMode === 'freehand') {
@@ -1764,8 +1808,9 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
   }
   function startPathTool(point, event) {
     if (tool === 'fill') {
-      const next = recolorTopShapeAt(activePath, point.x, point.y, activeKey);
-      if (next !== activePath) commitPath(next);
+      if (!paintReady.key) return;
+      const next = recolorTopShapeAt(activePath, point.x, point.y, paintReady.key);
+      if (next !== activePath) commitPath(next, undefined, paintReady.sprite);
     } else if (tool === 'brush') {
       startBrushStroke(point, event);
     } else if (tool === 'path-select') {
@@ -1786,7 +1831,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       const point = eventToPoint(event, width, height);
       if (picking) {
         const cells = cellsAt(sprite, selection.layerIndex, selection.frameIndex);
-        setActiveKey(
+        pickSampledKey(
           sampleKey(cells, {
             x: Math.min(width - 1, Math.floor(point.x)),
             y: Math.min(height - 1, Math.floor(point.y)),
@@ -1806,7 +1851,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     // engaged it intercepts the pick, leaves the underlying tool untouched, and
     // exits picker mode so the previously selected tool resumes after one pick.
     if (picking) {
-      setActiveKey(sampleKey(cells, point));
+      pickSampledKey(sampleKey(cells, point));
       setPicking(false);
       return;
     }
@@ -1833,8 +1878,11 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       return;
     }
     if (tool === 'fill') {
-      const next = fillSwapMode ? swapKey(cells, point, activeKey) : fillRegion(cells, point, activeKey);
-      if (next !== cells) commitCells(next);
+      if (!paintReady.key) return;
+      const next = fillSwapMode
+        ? swapKey(cells, point, paintReady.key)
+        : fillRegion(cells, point, paintReady.key);
+      if (next !== cells) commitCells(next, paintReady.sprite);
       return;
     }
     if (tool === 'erase' && eraseFillMode) {
@@ -1842,11 +1890,13 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       if (next !== cells) commitCells(next);
       return;
     }
+    if ((tool === 'brush' || tool === 'shape') && !paintReady.key) return;
     strokeRef.current = {
       tool,
       startPoint: point,
       lastPoint: point,
-      base: sprite,
+      base: paintReady.key ? paintReady.sprite : sprite,
+      paintKey: paintReady.key,
       layerIndex: selection.layerIndex,
       frameIndex: selection.frameIndex,
       // Offset of the cel at gesture start, so move applies an ABSOLUTE offset
@@ -1963,7 +2013,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
       return;
     }
     if (stroke.tool === 'brush' && stroke.brushMode == null) {
-      liveStroke(paintLine(stroke.draftCells, stroke.lastPoint, point, activeKey, brushSize));
+      liveStroke(paintLine(stroke.draftCells, stroke.lastPoint, point, stroke.paintKey, brushSize));
       stroke.lastPoint = point;
     } else if (stroke.tool === 'erase') {
       liveStroke(paintLine(stroke.draftCells, stroke.lastPoint, point, TRANSPARENT, eraseSize));
@@ -1971,7 +2021,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     } 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));
+      liveStroke(paintShape(stroke.originCells, stroke.startPoint, point, stroke.paintKey, 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
@@ -2163,8 +2213,18 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     playing,
     setOnion,
   });
+  function pickSampledKey(key) {
+    if (key === TRANSPARENT) return;
+    const hex = hexForPaletteKey(sprite?.palette, key);
+    if (hex) setActiveHex(hex);
+  }
   function selectPaletteKey(key) {
-    setActiveKey(key);
+    const hex = workingPalette[key];
+    if (hex) setActiveHex(hex);
+  }
+  function selectPaletteHex(hex) {
+    if (!hex) return;
+    setActiveHex(hex);
   }
 
   return (
@@ -2253,14 +2313,19 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
             <div className={styles.paintColumn}>
               <PaintStrip
                 toolState={toolState}
-                activeKey={activeKey}
-                activeColor={EDITOR_PALETTE[activeKey]}
+                activeKey={paintKey}
+                activeColor={activeHex}
                 paletteOpen={paletteOpen}
                 onTogglePalette={togglePalette}
                 colorButtonRef={colorButtonRef}
                 onSelectKey={selectPaletteKey}
-                paletteKeys={EDITOR_KEYS}
-                palette={EDITOR_PALETTE}
+                onSelectHex={selectPaletteHex}
+                paletteKeys={workingKeys}
+                palette={workingPalette}
+                pages={pages}
+                pageIndex={pageIndex}
+                onPage={onPage}
+                paletteFull={paletteFull}
                 moveActions={moveActions}
                 selectActions={selectActions}
                 pathActions={isPathLayer ? pathActions : null}
@@ -2291,10 +2356,16 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
         </div>
         <PxArtInspectorDock
           toolState={toolState}
-          activeKey={activeKey}
+          activeKey={paintKey}
+          activeHex={activeHex}
           onSelectKey={selectPaletteKey}
-          paletteKeys={EDITOR_KEYS}
-          palette={EDITOR_PALETTE}
+          onSelectHex={selectPaletteHex}
+          paletteKeys={workingKeys}
+          palette={workingPalette}
+          pages={pages}
+          pageIndex={pageIndex}
+          onPage={onPage}
+          paletteFull={paletteFull}
           moveActions={moveActions}
           selectActions={selectActions}
           pathActions={isPathLayer ? pathActions : null}
@@ -2399,7 +2470,7 @@ function useArtboardRender(canvasRef, text, sprite, previewIndex, onion, playing
     p.picking,
     p.brushSize,
     p.eraseSize,
-    p.activeKey,
+    p.activeHex,
     p.selection.layerIndex,
     p.selection.frameIndex,
     p.pathBakePreview,
@@ -2731,9 +2802,9 @@ function fillPreviewCells(cells, start) {
 
 // Describe the overlay to draw for the hovered cell, or null when nothing should
 // show (no hover, playback, or the move-all tool which has no footprint).
-function buildToolPreview({ sprite, selection, hoverCell, tool, picking, brushSize, eraseSize, activeKey, playing }) {
+function buildToolPreview({ sprite, selection, hoverCell, tool, picking, brushSize, eraseSize, activeHex, playing }) {
   if (!hoverCell || playing) return null;
-  const color = EDITOR_PALETTE[activeKey] || '#ffffff';
+  const color = activeHex || '#ffffff';
   if (picking) return { kind: 'cell', cell: hoverCell };
   if (tool === 'brush') return { kind: 'footprint', cell: hoverCell, size: brushSize, color };
   if (tool === 'erase') return { kind: 'erase', cell: hoverCell, size: eraseSize };

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

@@ -1,8 +1,8 @@
 // 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)
-// 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.
+// The shell only routes the kit's RICH file types here (scene / pxart / style);
+// file browsing and the code/text editor are now builtin shell panels.
 
 import React, { useEffect, useRef, useState } from 'react';
 import { onBeforeRestart, onSaveReloadState, takeReloadState, writeFile } from 'castle-web-sdk';
@@ -15,6 +15,7 @@ import { ImageViewer } from './ImageViewer';
 import { MediaPlayer } from './MediaPlayer';
 import { PxArtEditor } from './PxArtEditor';
 import { SceneEditor } from './SceneEditor';
+import { StyleEditor } from './StyleEditor';
 
 // Debounced writeFile per path, flushed on reload -- the same save behavior the
 // combined editor (App.jsx) uses, factored for a single-editor mount.
@@ -153,7 +154,9 @@ export function SingleEditor({ path, editor, editorModule }) {
       />
     );
   } else if (kind === 'pxart') {
-    body = <PxArtEditor path={path} text={text} onChange={onChange} />;
+    body = <PxArtEditor path={path} text={text} onChange={onChange} files={files} />;
+  } else if (kind === 'style') {
+    body = <StyleEditor path={path} text={text} onChange={onChange} />;
   } else if (kind === 'image') {
     // Viewers read their file's BYTES over the serve, not the text file map --
     // `files` holds source, and an image decoded as utf-8 is nothing.

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

@@ -0,0 +1,95 @@
+// Deck-palette picker for `theme.style`. Official entries come from
+// OFFICIAL_PALETTES; a custom `{ name, colors }` in the file shows as a
+// read-only selected card. Opening the editor never writes — only an
+// explicit official pick does.
+
+import { createElement } from 'react';
+import { OFFICIAL_PALETTES, parseThemeData, resolveDeckPalette } from '../engine/palettes';
+import { EditorBody } from '../engine/ui';
+import { applyOfficialPalette } from './styleTheme';
+import styles from './styleEditor.module.css';
+
+function cardClassName(selected, clickable) {
+  return [styles.card, selected ? styles.cardSelected : '', clickable ? '' : styles.cardStatic]
+    .filter(Boolean)
+    .join(' ');
+}
+
+function swatchStrip(colors) {
+  return (
+    <div className={styles.strip} aria-hidden="true">
+      {colors.map((hex, index) => (
+        <span key={`${hex}:${index}`} className={styles.chip} style={{ backgroundColor: hex }} />
+      ))}
+    </div>
+  );
+}
+
+function paletteCard({ name, colors, selected, onPick, badge, cardKey }) {
+  const className = cardClassName(selected, Boolean(onPick));
+  const body = (
+    <>
+      <div className={styles.cardHead}>
+        <div className={styles.cardName}>{name}</div>
+        <div className={styles.cardMeta}>
+          {badge ? <span className={styles.badge}>{badge}</span> : null}
+          <span>{colors.length} colors</span>
+        </div>
+      </div>
+      {swatchStrip(colors)}
+    </>
+  );
+  if (!onPick) {
+    return (
+      <div key={cardKey} className={className}>
+        {body}
+      </div>
+    );
+  }
+  return (
+    <button key={cardKey} type="button" className={className} onClick={onPick} aria-pressed={selected}>
+      {body}
+    </button>
+  );
+}
+
+function customCardName(palette) {
+  const name = palette?.name?.trim();
+  return name && name !== 'custom' ? name : 'Custom';
+}
+
+export function StyleEditor({ text, onChange }) {
+  const current = resolveDeckPalette(parseThemeData(text));
+  const isCustom = current.id == null;
+  function pick(id) {
+    onChange(applyOfficialPalette(text, id));
+  }
+  return createElement(
+    EditorBody,
+    null,
+    <div className={styles.root}>
+      {isCustom
+        ? paletteCard({
+            name: customCardName(current),
+            colors: current.colors,
+            selected: true,
+            badge: 'Custom',
+          })
+        : null}
+      {isCustom ? (
+        <p className={styles.replaceNote}>Picking an official palette replaces this custom palette.</p>
+      ) : null}
+      <div className={styles.list}>
+        {Object.values(OFFICIAL_PALETTES).map((palette) =>
+          paletteCard({
+            cardKey: palette.id,
+            name: palette.name,
+            colors: palette.colors,
+            selected: current.id === palette.id,
+            onPick: () => pick(palette.id),
+          })
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -171,7 +171,7 @@ function drawFillToolPreview(ctx, path, ui, at, sx, sy) {
   if (!shape) return;
 
   ctx.save();
-  if (target.slot === 'fill' && shape.fill) {
+  if (target.slot === 'fill') {
     const geometry = buildShapeFillPath2D(shape, at);
     if (geometry) {
       ctx.fillStyle = color;

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

@@ -813,12 +813,20 @@ export function setEdgeBow(path, shapeIndex, subIndex, edgeIndex, bow) {
   });
 }
 
+/**
+ * Fill-tool target at (x,y): stroke first, then interior, top-most shape down.
+ *
+ * An interior counts whether or not the shape already has a fill, so the tool
+ * ADDS one to a stroke-only shape — which also means an unfilled shape is not a
+ * hole here the way it is for `hitTestShape`. Only closed subpaths bound a fill,
+ * so an all-open shape has no interior to hit even if it still carries a key.
+ */
 export function hitTestFillToolTarget(path, x, y) {
   const shapes = path?.shapes ?? [];
   for (let i = shapes.length - 1; i >= 0; i--) {
     const shape = shapes[i];
     if (nearStrokedOutline(shape, x, y)) return { shapeIndex: i, slot: 'stroke' };
-    if (shape.fill && shapeContainsPoint(shape, x, y)) return { shapeIndex: i, slot: 'fill' };
+    if (shapeContainsPoint(shape, x, y)) return { shapeIndex: i, slot: 'fill' };
   }
   return null;
 }

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

@@ -107,15 +107,16 @@ 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.
+// Visit the cells of a right triangle whose hypotenuse is the drag `from`→`to`
+// and whose right angle sits at (from.x, to.y) — same corner rule as the path
+// brush triangle. `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 start = { x: from.x, y: from.y };
+  const right = { x: from.x, y: to.y };
+  const end = { x: to.x, y: to.y };
   const seen = new Set();
   const emit = (x, y) => {
     const key = `${x},${y}`;
@@ -126,9 +127,9 @@ export function forEachTriangleCells(from, to, filled, visit) {
   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 w0 = edgeCross(right, end, x, y);
+        const w1 = edgeCross(end, start, x, y);
+        const w2 = edgeCross(start, right, x, y);
         const hasNeg = w0 < 0 || w1 < 0 || w2 < 0;
         const hasPos = w0 > 0 || w1 > 0 || w2 > 0;
         if (!(hasNeg && hasPos)) emit(x, y);
@@ -136,7 +137,7 @@ export function forEachTriangleCells(from, to, filled, visit) {
     }
     return;
   }
-  forEachLinePoint(apex, left, emit);
-  forEachLinePoint(left, right, emit);
-  forEachLinePoint(right, apex, emit);
+  forEachLinePoint(start, right, emit);
+  forEachLinePoint(right, end, emit);
+  forEachLinePoint(end, start, emit);
 }