castle-web-cli 0.4.122 → 0.4.124

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

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

@@ -1,4 +1,4 @@
-import { EDG64, KEY_ALPHABET, normalizeHex, TRANSPARENT } from '../engine/pxart';
+import { TRANSPARENT } from '../engine/pxart';
 import {
   forEachDab,
   forEachEllipseCells,
@@ -7,54 +7,14 @@ import {
   forEachTriangleCells,
 } from './pixelGeometry';
 
-// The PxArt editor paints over the FIXED full Endesga-64 palette (no free color
-// picking). Each palette color gets a stable single-char key (KEY_ALPHABET, 64
-// distinct keys); the transparent cell is the reserved "." (TRANSPARENT).
-export const EDITOR_KEYS = EDG64.map((_, index) => KEY_ALPHABET[index]);
-
-// key -> "#rrggbb" record, in palette order. Passed to the SDK's fromCells so
-// serialized files carry only the palette entries actually used.
-export const EDITOR_PALETTE = Object.fromEntries(
-  EDG64.map((hex, index) => [EDITOR_KEYS[index], hex])
-);
-
-// hex -> palette key, for mapping a loaded sprite's colors onto the swatch.
-const KEY_BY_HEX = new Map(EDG64.map((hex, index) => [hex, EDITOR_KEYS[index]]));
+// Paint helpers are key-agnostic: the editor allocates palette keys on the
+// sprite and passes them in. The reserved "." (TRANSPARENT) is the erase key.
 
 // Build a `height x width` matrix of "." (transparent) cells.
 export function blankCells(width, height) {
   return Array.from({ length: height }, () => Array.from({ length: width }, () => TRANSPARENT));
 }
 
-// Snap an arbitrary hex color to the nearest palette key by RGB distance, so a
-// loaded sprite whose palette isn't exactly the Endesga-64 set still maps onto
-// the fixed swatch. Returns "." for invalid/transparent input.
-export function editorKeyForHex(hex) {
-  const norm = typeof hex === 'string' ? normalizeHex(hex) : null;
-  if (!norm) return TRANSPARENT;
-  const exact = KEY_BY_HEX.get('#' + norm.slice(1, 7));
-  if (exact) return exact;
-  const r = parseInt(norm.slice(1, 3), 16);
-  const g = parseInt(norm.slice(3, 5), 16);
-  const b = parseInt(norm.slice(5, 7), 16);
-  let bestKey = EDITOR_KEYS[0];
-  let bestDist = Infinity;
-  EDG64.forEach((swatch, index) => {
-    const dist =
-      (r - parseInt(swatch.slice(1, 3), 16)) ** 2 +
-      (g - parseInt(swatch.slice(3, 5), 16)) ** 2 +
-      (b - parseInt(swatch.slice(5, 7), 16)) ** 2;
-    if (dist < bestDist) {
-      bestDist = dist;
-      bestKey = EDITOR_KEYS[index];
-    }
-  });
-  return bestKey;
-}
-
-// The swatch the editor opens on: Endesga-64's lead bright red (#ff0040).
-export const DEFAULT_KEY = editorKeyForHex('#ff0040');
-
 function isInside(cells, x, y) {
   return y >= 0 && y < cells.length && x >= 0 && x < (cells[0]?.length ?? 0);
 }

package/kits/physics-2d/editors/styleEditor.module.css

@@ -0,0 +1,105 @@
+/* Palette picker for theme.style. Tokens match engine/ui.module.css. */
+
+.root {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 16px 18px 24px;
+  color: var(--castle-inspector-text, #e6e6e6);
+}
+
+.replaceNote {
+  margin: 8px 0 16px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--castle-inspector-muted, #888);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  margin: 0;
+  padding: 12px;
+  border: 1px solid var(--castle-inspector-border, #2a2a2a);
+  border-radius: var(--castle-radius, 4px);
+  background: var(--castle-card, #121213);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.card:hover {
+  background: var(--castle-panel-raised, #101010);
+}
+
+.cardSelected {
+  border-color: var(--castle-selected, #e6e6e6);
+  box-shadow: inset 0 0 0 1px var(--castle-selected, #e6e6e6);
+  background: var(--castle-panel-raised, #101010);
+}
+
+.cardStatic {
+  cursor: default;
+}
+
+.cardStatic:hover {
+  background: var(--castle-card, #121213);
+}
+
+.cardSelected.cardStatic:hover {
+  background: var(--castle-panel-raised, #101010);
+}
+
+.cardHead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.cardName {
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--castle-inspector-muted, #888);
+  white-space: nowrap;
+}
+
+.badge {
+  padding: 1px 6px;
+  border: 1px solid var(--castle-inspector-border, #2a2a2a);
+  border-radius: 999px;
+  color: var(--castle-inspector-text, #e6e6e6);
+}
+
+.strip {
+  display: flex;
+  height: 18px;
+  overflow: hidden;
+  border: 1px solid var(--castle-inspector-border, #2a2a2a);
+  border-radius: 2px;
+}
+
+.chip {
+  flex: 1 1 0;
+  min-width: 2px;
+  height: 100%;
+}

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

@@ -0,0 +1,16 @@
+// Read-modify-write for theme.style. Parse the existing JSON, set `palette`
+// to an official id, and serialize — unknown top-level keys survive.
+
+import { parseThemeData } from '../engine/palettes.js';
+
+export function formatThemeJson(value) {
+  return `${JSON.stringify(value, null, 2)}\n`;
+}
+
+/** Replace `palette` with an official id. Empty / unparseable text starts `{}`. */
+export function applyOfficialPalette(text, paletteId) {
+  const parsed = parseThemeData(text);
+  const data = parsed ? { ...parsed } : {};
+  data.palette = paletteId;
+  return formatThemeJson(data);
+}