castle-web-cli 0.4.123 → 0.4.124

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);
 }

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

@@ -18,7 +18,8 @@ export const PIXEL_TOOLS = [
 ];
 
 // Path-layer tools: brush (pen / freehand / primitives), select (move/z-order),
-// bend (drag bows on any hit edge), fill (recolor fill or stroke).
+// bend (drag bows on any hit edge), fill (paint a shape's fill or stroke —
+// an interior click adds a fill to a stroke-only shape).
 export const PATH_TOOLS = [
   { id: 'brush', label: 'Brush', icon: 'pencil', shortcut: 'B' },
   { id: 'fill', label: 'Fill', icon: 'fill', shortcut: 'G' },
@@ -27,8 +28,9 @@ export const PATH_TOOLS = [
 ];
 
 // Sub-modes for the shape tool. Each drags out an axis-aligned box: line draws
-// the diagonal, square the rectangle, circle the inscribed ellipse, triangle an
-// isosceles triangle. `filled` (a separate toggle) applies to the closed three.
+// the diagonal, square the rectangle, circle the inscribed ellipse, triangle a
+// right triangle (hypotenuse is the drag; right angle at (start.x, end.y)).
+// `filled` (a separate toggle) applies to the closed three.
 export const SHAPE_MODES = [
   { id: 'line', label: 'Line', icon: 'slash' },
   { id: 'square', label: 'Square', icon: 'square' },
@@ -219,51 +221,132 @@ function ResolutionSelect({ label, value, onChange }) {
   );
 }
 
-// 12-column palette grid shared by the docked sidebar and the compact popover.
+function sameHex(a, b) {
+  return !!a && !!b && a.toLowerCase() === b.toLowerCase();
+}
+
+function NoneSwatch({ selected, onSelect }) {
+  return (
+    <button
+      type="button"
+      className={cx(styles.swatch, selected && styles.swatchSelected)}
+      title="None"
+      aria-label="None"
+      style={{ position: 'relative', background: 'transparent' }}
+      onClick={onSelect}>
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 4,
+          background:
+            'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
+        }}
+      />
+    </button>
+  );
+}
+
+// Swatch strip shared by the docked sidebar and the compact popover.
+// `keys` paints a sprite's working palette; `hexes` paints a picker list.
+// `wrap` is the unlabeled sprite row; the named official page is an 8-col grid.
 export function PaletteGrid({
   keys,
+  hexes,
   palette,
   activeKey,
+  activeHex,
   onSelectKey,
+  onSelectHex,
   allowNone = false,
   noneSelected = false,
   onSelectNone,
+  wrap = false,
 }) {
+  const items = hexes
+    ? hexes.map((hex) => ({ id: hex, hex, selected: sameHex(activeHex, hex), onClick: () => onSelectHex?.(hex) }))
+    : (keys ?? []).map((key) => ({
+        id: key,
+        hex: palette?.[key],
+        selected: activeKey === key || sameHex(activeHex, palette?.[key]),
+        onClick: () => onSelectKey?.(key),
+      }));
+  if (!allowNone && !items.length) return null;
   return (
-    <div className={styles.palette}>
-      {allowNone ? (
+    <div className={wrap ? styles.paletteSpriteRow : styles.palette}>
+      {allowNone ? <NoneSwatch selected={noneSelected} onSelect={onSelectNone} /> : null}
+      {items.map((item) => (
         <button
+          key={item.id}
           type="button"
-          className={cx(styles.swatch, noneSelected && styles.swatchSelected)}
-          title="None"
-          aria-label="None"
-          style={{ position: 'relative', background: 'transparent' }}
-          onClick={onSelectNone}>
-          <span
-            aria-hidden
-            style={{
-              position: 'absolute',
-              inset: 4,
-              background:
-                'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
-            }}
-          />
-        </button>
-      ) : null}
-      {keys.map((key) => (
-        <button
-          key={key}
-          type="button"
-          className={cx(styles.swatch, activeKey === key && styles.swatchSelected)}
-          title={palette[key]}
-          style={{ background: palette[key] }}
-          onClick={() => onSelectKey(key)}
+          className={cx(styles.swatch, item.selected && styles.swatchSelected)}
+          title={item.hex}
+          style={{ background: item.hex }}
+          onClick={item.onClick}
         />
       ))}
     </div>
   );
 }
 
+function PalettePager({ name, onPage }) {
+  return (
+    <div className={styles.palettePager}>
+      <span className={styles.palettePagerName}>{name}</span>
+      <div className={styles.palettePagerBtns}>
+        <IconButton icon="chevron-left" label="Previous palette" onClick={() => onPage(-1)} />
+        <IconButton icon="chevron-right" label="Next palette" onClick={() => onPage(1)} />
+      </div>
+    </div>
+  );
+}
+
+// Unlabeled sprite-color row (when the sprite has colors, or when fill/stroke
+// needs a none swatch) plus a paged official-palette grid. Paging only changes
+// which named page is shown — it does not write theme.style.
+export function PaletteSections({
+  spriteKeys,
+  spritePalette,
+  pages,
+  pageIndex,
+  onPage,
+  activeKey,
+  activeHex,
+  onSelectKey,
+  onSelectHex,
+  allowNone = false,
+  noneSelected = false,
+  onSelectNone,
+  paletteFull = false,
+}) {
+  const page = pages?.[pageIndex] ?? pages?.[0];
+  const showSpriteRow = !!spriteKeys?.length || allowNone;
+  return (
+    <div>
+      {showSpriteRow ? (
+        <PaletteGrid
+          keys={spriteKeys}
+          palette={spritePalette}
+          activeKey={activeKey}
+          activeHex={activeHex}
+          onSelectKey={onSelectKey}
+          allowNone={allowNone}
+          noneSelected={noneSelected}
+          onSelectNone={onSelectNone}
+          wrap
+        />
+      ) : null}
+      {page ? (
+        <>
+          <PalettePager name={page.name} onPage={onPage} />
+          <PaletteGrid hexes={page.colors} activeHex={activeHex} onSelectHex={onSelectHex} />
+        </>
+      ) : null}
+      {paletteFull ? <div className={styles.paletteFullNote}>Palette is full (64 colors). Recolor an existing swatch instead.</div> : null}
+    </div>
+  );
+}
+
 // Anchored palette + eyedropper popover for compact/mobile paint-strip color tap.
 export function PalettePopover({ open, anchorRef, onClose, children }) {
   const popoverRef = useRef(null);
@@ -276,7 +359,7 @@ export function PalettePopover({ open, anchorRef, onClose, children }) {
       const anchor = anchorRef.current.getBoundingClientRect();
       const rect = popoverRef.current?.getBoundingClientRect();
       const margin = 8;
-      const width = rect?.width ?? 280;
+      const width = rect?.width ?? 231;
       const height = rect?.height ?? 320;
       const maxLeft = Math.max(margin, window.innerWidth - width - margin);
       const maxTop = Math.max(margin, window.innerHeight - height - margin);
@@ -464,7 +547,18 @@ const ShapeSwatch = React.forwardRef(function ShapeSwatch(
   );
 });
 
-function ShapeInspectorButtons({ pathActions, palette, paletteKeys, buttonClass, groupClass }) {
+function ShapeInspectorButtons({
+  pathActions,
+  palette,
+  paletteKeys,
+  pages,
+  pageIndex,
+  onPage,
+  onSelectHex,
+  paletteFull,
+  buttonClass,
+  groupClass,
+}) {
   const [slotPicker, setSlotPicker] = useState(null);
   const fillRef = useRef(null);
   const strokeRef = useRef(null);
@@ -485,9 +579,10 @@ function ShapeInspectorButtons({ pathActions, palette, paletteKeys, buttonClass,
     setSlotPicker(null);
   }
 
-  function applyPicker(key) {
-    if (slotPicker === 'fill') pathActions?.setFill(key);
-    else if (slotPicker === 'stroke') pathActions?.setStroke(key);
+  function applyColor(hex) {
+    if (hex) onSelectHex?.(hex);
+    if (slotPicker === 'fill') pathActions?.setFill(hex ?? null);
+    else if (slotPicker === 'stroke') pathActions?.setStroke(hex ?? null);
     closePicker();
   }
 
@@ -590,14 +685,20 @@ function ShapeInspectorButtons({ pathActions, palette, paletteKeys, buttonClass,
             {slotPicker === 'fill' ? 'Fill' : 'Stroke'}
           </span>
         </div>
-        <PaletteGrid
-          keys={paletteKeys}
-          palette={palette}
+        <PaletteSections
+          spriteKeys={paletteKeys}
+          spritePalette={palette}
+          pages={pages}
+          pageIndex={pageIndex}
+          onPage={onPage}
           activeKey={pickerKey}
+          activeHex={pickerKey ? palette?.[pickerKey] : null}
+          onSelectKey={(key) => applyColor(palette?.[key])}
+          onSelectHex={applyColor}
           allowNone
           noneSelected={pickerNoneSelected}
-          onSelectNone={() => applyPicker(null)}
-          onSelectKey={applyPicker}
+          onSelectNone={() => applyColor(null)}
+          paletteFull={paletteFull}
         />
       </PalettePopover>
     </>
@@ -614,8 +715,13 @@ export function PaintStrip({
   onTogglePalette,
   colorButtonRef,
   onSelectKey,
+  onSelectHex,
   paletteKeys,
   palette,
+  pages,
+  pageIndex,
+  onPage,
+  paletteFull,
   moveActions,
   selectActions,
   pathActions,
@@ -662,6 +768,15 @@ export function PaintStrip({
               style={{ background: activeColor }}
               onClick={onTogglePalette}
             />
+            <button
+              type="button"
+              className={cx(styles.paintStripModeButton, picking && styles.drawingToolSelected)}
+              title="Pick color"
+              aria-label="Pick color"
+              aria-pressed={picking ? 'true' : 'false'}
+              onClick={() => setPicking(!picking)}>
+              <Icon name="eyedropper" />
+            </button>
           </div>
         ) : null}
         {showBrushSize || showEraseSize ? (
@@ -772,6 +887,11 @@ export function PaintStrip({
             pathActions={pathActions}
             palette={palette}
             paletteKeys={paletteKeys}
+            pages={pages}
+            pageIndex={pageIndex}
+            onPage={onPage}
+            onSelectHex={onSelectHex}
+            paletteFull={paletteFull}
             buttonClass={styles.paintStripModeButton}
             groupClass={styles.paintStripSection}
           />
@@ -780,22 +900,24 @@ export function PaintStrip({
       <PalettePopover open={paletteOpen} anchorRef={colorButtonRef} onClose={() => onTogglePalette(false)}>
         <div className={styles.palettePopoverHeader}>
           <span className={styles.palettePopoverTitle}>Palette</span>
-          <IconButton
-            icon="eyedropper"
-            label="Pick color"
-            active={picking}
-            aria-pressed={picking ? 'true' : 'false'}
-            onClick={() => setPicking(!picking)}
-          />
         </div>
-        <PaletteGrid
-          keys={paletteKeys}
-          palette={palette}
+        <PaletteSections
+          spriteKeys={paletteKeys}
+          spritePalette={palette}
+          pages={pages}
+          pageIndex={pageIndex}
+          onPage={onPage}
           activeKey={activeKey}
+          activeHex={activeColor}
           onSelectKey={(key) => {
             onSelectKey(key);
             onTogglePalette(false);
           }}
+          onSelectHex={(hex) => {
+            onSelectHex(hex);
+            onTogglePalette(false);
+          }}
+          paletteFull={paletteFull}
         />
       </PalettePopover>
     </>
@@ -806,9 +928,15 @@ export function PaintStrip({
 export function PxArtInspectorDock({
   toolState,
   activeKey,
+  activeHex,
   onSelectKey,
+  onSelectHex,
   paletteKeys,
   palette,
+  pages,
+  pageIndex,
+  onPage,
+  paletteFull,
   moveActions,
   selectActions,
   pathActions,
@@ -829,11 +957,17 @@ export function PxArtInspectorDock({
                 onClick={() => setPicking(!picking)}
               />
             }>
-            <PaletteGrid
-              keys={paletteKeys}
-              palette={palette}
+            <PaletteSections
+              spriteKeys={paletteKeys}
+              spritePalette={palette}
+              pages={pages}
+              pageIndex={pageIndex}
+              onPage={onPage}
               activeKey={activeKey}
+              activeHex={activeHex}
               onSelectKey={onSelectKey}
+              onSelectHex={onSelectHex}
+              paletteFull={paletteFull}
             />
           </Panel>
         ) : null}
@@ -844,6 +978,11 @@ export function PxArtInspectorDock({
           pathActions={pathActions}
           palette={palette}
           paletteKeys={paletteKeys}
+          pages={pages}
+          pageIndex={pageIndex}
+          onPage={onPage}
+          onSelectHex={onSelectHex}
+          paletteFull={paletteFull}
         />
       </div>
     </aside>
@@ -876,6 +1015,11 @@ export function ToolSettingsPanel({
   pathActions,
   palette,
   paletteKeys,
+  pages,
+  pageIndex,
+  onPage,
+  onSelectHex,
+  paletteFull,
 }) {
   const {
     tool,
@@ -987,6 +1131,11 @@ export function ToolSettingsPanel({
                 pathActions={pathActions}
                 palette={palette}
                 paletteKeys={paletteKeys}
+                pages={pages}
+                pageIndex={pageIndex}
+                onPage={onPage}
+                onSelectHex={onSelectHex}
+                paletteFull={paletteFull}
                 buttonClass={styles.drawingToolButton}
                 groupClass={styles.drawingShapeModeRow}
               />

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

@@ -19,12 +19,8 @@ import {
   TRANSPARENT,
   VECTOR_RENDERER,
 } from '../engine/pxart';
-import {
-  blankCells,
-  EDITOR_KEYS,
-  EDITOR_PALETTE,
-  editorKeyForHex,
-} from './pxArtTools';
+import { paletteRecord } from '../engine/palettes';
+import { blankCells } from './pxArtTools';
 import {
   bakePathCell,
   clonePathData,
@@ -36,15 +32,11 @@ import {
 // ============================================================================
 // Working-state helpers for the full Sprite the PxArt editor edits in memory.
 //
-// The editor always works on a Sprite normalized onto the FIXED Endesga-64
-// palette, so painting + serialization stay consistent no matter what palette
-// an externally-authored file arrived with. Every mutation is immutable
-// (returns a fresh Sprite) so it flows straight into the text undo/redo history.
+// The editor works on the sprite's own palette. Opening never remaps colors;
+// painting allocates keys into that palette as needed. Every mutation is
+// immutable (returns a fresh Sprite) so it flows into the text undo/redo history.
 // ============================================================================
 
-// The Endesga-64 palette as an ordered { key, hex } list (the full palette shape).
-export const EDITOR_ORDERED = EDITOR_KEYS.map((key) => ({ key, hex: EDITOR_PALETTE[key] }));
-
 // Size a canvas to a sprite resolution, disable smoothing, and clear it.
 // Returns the 2D context (or null). Shared by the artboard + thumbnail renders.
 export function setupSpriteCanvas(canvas, resolution) {
@@ -75,14 +67,14 @@ export function forEachGridCell(grid, width, height, visit) {
 export function deriveSprite(text) {
   if (!(text ?? '').trim()) return blankSprite();
   const parsed = parseFull(text);
-  return parsed ? normalizeToPalette(parsed) : null;
+  return parsed ?? null;
 }
 
 function blankSprite() {
   const { width, height } = DEFAULT_RESOLUTION;
   return {
     resolution: { width, height },
-    palette: EDITOR_ORDERED,
+    palette: [],
     // The lone frame inherits the global duration (no per-frame override).
     frames: [{}],
     defaultDurationMs: DEFAULT_DURATION_MS,
@@ -119,53 +111,6 @@ function gridCell(grid, x, y) {
   return x || y ? { grid, x, y } : { grid };
 }
 
-// Remap every grid char onto the nearest Endesga-64 key and swap in the full
-// palette, leaving links / null cells / structure untouched. Idempotent for an
-// already-normalized sprite.
-function normalizeToPalette(sprite) {
-  const lookup = paletteLookup(sprite.palette);
-  const layers = sprite.layers.map((layer) => ({
-    ...layer,
-    cells: layer.cells.map((cell) => remapCell(cell, lookup)),
-  }));
-  return { ...sprite, palette: EDITOR_ORDERED, layers };
-}
-
-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.
-  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) {
-  let out = '';
-  for (const ch of row) {
-    if (ch === TRANSPARENT) {
-      out += TRANSPARENT;
-      continue;
-    }
-    const hex = colorForKeyV2(lookup, ch);
-    out += hex ? editorKeyForHex(hex) : TRANSPARENT;
-  }
-  return out;
-}
-
 // ---------------------------------------------------------------------------
 // cells <-> (layer, frame)
 // ---------------------------------------------------------------------------
@@ -798,7 +743,7 @@ function shiftCellOffset(cell, dx, dy, width, height) {
 // representable; if not, it correctly forces the full form.
 export function serializeModel(sprite) {
   const compact = serializeCompact({
-    ...fromCells(EDITOR_PALETTE, cellsAt(sprite, 0, 0)),
+    ...fromCells(paletteRecord(sprite.palette), cellsAt(sprite, 0, 0)),
     renderer: sprite.renderer,
     cornerRadius: sprite.cornerRadius,
   });