npm - castle-web-cli - Versions diffs - 0.4.123 → 0.4.124 - Mend

castle-web-cli 0.4.123 → 0.4.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/dist/castleJson.d.ts +2 -0
package/dist/castleJson.js +39 -0
package/dist/headlessCover.d.ts +13 -0
package/dist/headlessCover.js +99 -0
package/dist/ide.js +12 -42
package/dist/imports.js +42 -2
package/dist/index.js +1 -9
package/dist/init.d.ts +1 -0
package/dist/init.js +15 -1
package/dist/preview.d.ts +0 -1
package/dist/preview.js +0 -58
package/dist/save-deck.js +52 -1
package/dist/serve.js +16 -0
package/dist/shell/assets/Basteleur-Bold-CK8LF7Pt.woff +0 -0
package/dist/shell/assets/Basteleur-Bold-DKFKedNb.woff2 +0 -0
package/dist/shell/assets/index-BfOPkSej.css +1 -0
package/dist/shell/assets/index-u0nYFqbF.js +434 -0
package/dist/shell/index.html +2 -2
package/kits/physics-2d/CLAUDE.md +2 -2
package/kits/physics-2d/castle.json +10 -2
package/kits/physics-2d/docs/pxart-format.md +33 -26
package/kits/physics-2d/editors/PxArtEditor.jsx +120 -49
package/kits/physics-2d/editors/SingleEditor.jsx +6 -3
package/kits/physics-2d/editors/StyleEditor.jsx +95 -0
package/kits/physics-2d/editors/pathOverlay.js +1 -1
package/kits/physics-2d/editors/pathTools.js +9 -1
package/kits/physics-2d/editors/pixelGeometry.js +14 -13
package/kits/physics-2d/editors/pixelInspector.jsx +202 -53
package/kits/physics-2d/editors/pxArtEditorModel.js +8 -63
package/kits/physics-2d/editors/pxArtTools.js +3 -43
package/kits/physics-2d/editors/styleEditor.module.css +105 -0
package/kits/physics-2d/editors/styleTheme.js +16 -0
package/kits/physics-2d/engine/files.js +2 -1
package/kits/physics-2d/engine/liveReload.js +4 -3
package/kits/physics-2d/engine/palettes.js +636 -0
package/kits/physics-2d/engine/pxart.js +6 -6
package/kits/physics-2d/engine/svgImport.js +1056 -0
package/kits/physics-2d/engine/ui.jsx +2 -0
package/kits/physics-2d/engine/ui.module.css +54 -9
package/kits/physics-2d/package-lock.json +1 -1
package/kits/physics-2d/package.json +1 -0
package/kits/physics-2d/scripts/deckTheme.mjs +25 -0
package/kits/physics-2d/scripts/draw.mjs +5 -3
package/kits/physics-2d/scripts/import-svg.mjs +16 -1069
package/kits/physics-2d/scripts/palette.mjs +10 -0
package/kits/physics-2d/scripts/svg-emission-guide.md +5 -3
package/kits/physics-2d/theme.style +3 -0
package/package.json +1 -1
package/dist/shell/assets/index-CARLHafh.css +0 -1
package/dist/shell/assets/index-DWgt4KzC.js +0 -434

package/dist/shell/index.html CHANGED Viewed

@@ -10,8 +10,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/__castle/ide/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/__castle/ide/favicon-16x16.png" />
     <link rel="icon" href="/__castle/ide/favicon.ico" sizes="any" />
-    <script type="module" crossorigin src="/__castle/ide/assets/index-DWgt4KzC.js"></script>
-    <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-CARLHafh.css">
+    <script type="module" crossorigin src="/__castle/ide/assets/index-u0nYFqbF.js"></script>
+    <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-BfOPkSej.css">
   </head>
   <body>
     <div id="root"></div>

package/kits/physics-2d/CLAUDE.md CHANGED Viewed

@@ -448,11 +448,11 @@ Physics is just this kit's use of it.
 Don't hand-write pixel grids. Generate sprites with the `draw` command: **emit a terse svg-rect** — a tiny `<svg viewBox="0 0 16 16">` with **one `<rect>` per pixel** — and pipe it to `npm run draw`. It quantizes every fill to the agent palette and writes a single-frame `drawings/<name>.sprite`.
 - **Resolution is 16×16.** Use `viewBox="0 0 16 16"` and **one 1×1 `<rect>` per filled pixel** (`width="1" height="1"` at integer `x`/`y`). Leave background pixels out (omitted = transparent). Keep every rect 1×1 — the decoder infers cell size from the smallest rect, so mixing in larger blocks shrinks the whole grid.
-- **Palette is the agent 16-color subset** (a fixed subset of the editor's full Endesga-64 painting palette) — every `fill` must be one of:
+- **Palette is the deck's generation palette.** The default (no `theme.style`, or Endesga-64) is this 16-color subset — every `fill` must be one of:
   `#e69c69` `#bf6f4a` `#8a4836` `#391f21` `#891e2b` `#ea323c` `#ffa214` `#ffeb57` `#5ac54f` `#1e6f50` `#134c4c` `#657392` `#c7cfdd` `#ffffff` `#0cf1ff` `#0098dc`
-  (Off-palette fills are snapped to the nearest of these, so stay on-palette to keep what you intend. People editing in the app can paint with the full Endesga-64 palette; only this generation path is constrained to the 16.)
+  If the deck defines a palette in `theme.style`, that governs instead. `npm run palette` prints the active generation palette. Off-palette fills snap to the nearest of these, so stay on-palette to keep what you intend. People editing in the app paint from the deck palette (and the sprite's own colors); only this generation path is quantized.
 - **Run it** (sprite name as the arg; stdin is the svg):
   ```bash

package/kits/physics-2d/castle.json CHANGED Viewed

@@ -23,7 +23,8 @@
       "scenes/**",
       "blueprints/**",
       "behaviors/**",
-      "assets/**"
+      "assets/**",
+      "theme.style"
     ],
     "fileTypes": [
       {
@@ -55,6 +56,13 @@
         "new": "New behavior",
         "icon": "code"
       },
+      {
+        "ext": ".style",
+        "label": "Style",
+        "icon": "file",
+        "editor": "kit",
+        "data": true
+      },
       {
         "ext": ".png",
         "label": "Image",
@@ -123,5 +131,5 @@
   "main": "main.jsx",
   "autoUpdateWhenImported": true,
   "title": "physics-2d",
-  "publishedVersion": "2026-08-16T04:02:06.732Z"
+  "publishedVersion": "2026-08-18T21:05:46.663Z"
 }

package/kits/physics-2d/docs/pxart-format.md CHANGED Viewed

@@ -88,36 +88,42 @@ temporal versions — that the kit treats as one in-memory model:
   transparent.
 - Indexed-with-hex only: **not** RGBA-per-pixel, **not** grayscale.
-### Two-tier palette system (Endesga-64)
-The kit uses a **two-tier** fixed palette, both tiers drawn from Lospec's
-[Endesga 64](https://lospec.com/palette-list/endesga-64). There is no free color
-picking at either tier.
-**Full palette — Endesga 64 (`EDG64`, all 64 colors): what USERS paint with.**
-The kit's `PxArtEditor` exposes the **full 64-color swatch** (canonical Lospec
-order). The editor assigns each color a stable single-char key (`KEY_ALPHABET`,
-64 distinct keys) plus `.` for transparent. When an existing sprite is opened for
-editing, each cell's resolved color is **snapped to the nearest Endesga-64
-color** by RGB distance, so editing always stays on the fixed swatch. (Sprites
-still *render* with their own stored palette via `renderSpriteFrame`; the snap
-only affects what the editor writes back.) The swatch UI renders as an 8-column
-grid (8 rows for the 64 colors) that scrolls within the inspector.
-**Agent subset — 16 colors (`AGENT_PALETTE_16`): what the LLM generates with.**
-The agent generation path (the `draw` svg-rect → `.sprite` quantizer and the
-prompt the model receives) is constrained to a **fixed 16-color subset of
-Endesga-64**, so generated art stays coherent. Every color below is a member of
-`EDG64`. In order:
+### Deck palette + derived agent subset
+Each sprite file carries its **own** ordered `{ key, hex }` palette. That list
+is truth: opening a sprite for editing never remaps its colors. The editor
+paints with those keys, and picking a new color **allocates** a key into the
+sprite's palette (`KEY_ALPHABET`, capped at 64) rather than snapping existing
+pixels onto a global swatch.
+The **deck palette** is a picker source, not a normalization target. It lives
+in `theme.style` at the deck root (`engine/palettes.js`). Missing or malformed
+theme data falls back to Lospec's [Endesga 64](https://lospec.com/palette-list/endesga-64)
+(`EDG64`). The inspector picker is an unlabeled row of the sprite's own colors
+(when that palette is non-empty) plus an 8-column grid of official palettes,
+paged with named arrows. The deck's `theme.style` palette is the default page;
+paging does not write the theme. A custom `{ name, colors }` deck adds one
+extra read-only page. Picking a hex still allocates onto the sprite.
+**Agent subset — what the LLM generates with.** The generation path (`draw`
+svg-rect → `.sprite`, and `import-svg`) quantizes to a derived subset of the
+deck palette (`agentPaletteFor`):
+- default Endesga-64 → the hand-curated `AGENT_PALETTE_16`
+- custom palette larger than 16 → greedy farthest-point subset in Oklab
+- 16 or fewer colors → used as-is
+`npm run palette` prints both the deck palette and the derived generation
+subset. The default 16, in agent-facing order (every entry is a member of
+`EDG64`):
 ```
 #e69c69 #bf6f4a #8a4836 #391f21 #891e2b #ea323c #ffa214 #ffeb57
 #5ac54f #1e6f50 #134c4c #657392 #c7cfdd #ffffff #0cf1ff #0098dc
 ```
-So: the editor offers all 64 to people; the agent generation path snaps to these
-16. Both constants (`EDG64`, `AGENT_PALETTE_16`) live in the kit's
-`engine/pxart.js`.
+`EDG64` and `AGENT_PALETTE_16` live in `engine/pxart.js`; derivation and
+theme resolution live in `engine/palettes.js`.
 ---
@@ -656,8 +662,9 @@ system treats it as a full (degenerate) Sprite.
 ### Single-layer / single-frame generation contract
 The **generation contract** for this kit is to emit the **compact shorthand**: a
-single 16×16 (default) `{ palette, grid }` sprite over the agent 16-color subset
-(`AGENT_PALETTE_16`).
+single 16×16 (default) `{ palette, grid }` sprite quantized to the deck's
+generation palette (`agentPaletteFor` of the `theme.style` palette, or
+`AGENT_PALETTE_16` when the deck uses the Endesga-64 default).
 The CLI generation worker and the kit's `PxArtEditor` both produce/store this
 compact form when nothing is lost by it. Multi-layer / multi-frame structure is
 authored by tools later, not hand-generated — and the minimal `PxArtEditor`

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

@@ -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 CHANGED Viewed

@@ -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.