castle-web-cli 0.4.123 → 0.4.124

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

package/kits/physics-2d/engine/files.js

@@ -25,7 +25,7 @@ const rawModules = {
     { query: '?raw', import: 'default', eager: true }
   ),
   ...import.meta.glob(
-    ['/scenes/**/*.scene', '/blueprints/**/*.scene', '/drawings/**/*.pxart', '/drawings/**/*.sprite', '/behaviors/**/*.jsx'],
+    ['/scenes/**/*.scene', '/blueprints/**/*.scene', '/drawings/**/*.pxart', '/drawings/**/*.sprite', '/behaviors/**/*.jsx', '/theme.style'],
     { query: '?raw', import: 'default', eager: true }
   ),
 };
@@ -102,6 +102,7 @@ export function getFileKind(path) {
   if (path.endsWith('.scene')) return 'scene';
   if (path.endsWith('.sprite')) return 'pxart';
   if (path.endsWith('.pxart')) return 'pxart';
+  if (path.endsWith('.style')) return 'style';
   if (path.endsWith('.png')) return 'image';
   if (path.endsWith('.jpg')) return 'image';
   if (path.endsWith('.jpeg')) return 'image';

package/kits/physics-2d/engine/liveReload.js

@@ -1,7 +1,8 @@
 // Consumer side of the serve's `files_changed` broadcast. The engine decides
 // what a change means for this bundle:
-//   - data files (.scene / .pxart / .drawing) are re-read over the serve's
-//     files API and folded into React state — live re-render, no reload.
+//   - data files (.scene / .pxart / .sprite / .style / .drawing) are re-read
+//     over the serve's files API and folded into React state — live re-render,
+//     no reload.
 //   - code the bundle imports (per the event's module-graph closure), html,
 //     or added/deleted code files (import.meta.glob may pick them up) mean
 //     this context is stale — requestReload() (save-state hooks run first).
@@ -9,7 +10,7 @@ import { useEffect, useRef, useState } from 'react';
 import { onFilesChanged, requestReload } from 'castle-web-sdk';
 import { initialFiles } from './files';
 
-const DATA_EXTS = ['.scene', '.pxart', '.sprite', '.drawing'];
+const DATA_EXTS = ['.scene', '.pxart', '.sprite', '.style', '.drawing'];
 const CODE_EXTS = ['.js', '.jsx', '.ts', '.tsx', '.css'];
 
 export function isDataFile(path) {