castle-web-cli 0.4.123 → 0.4.124

package/kits/physics-2d/engine/ui.jsx

@@ -7,6 +7,7 @@ import {
   faBars,
   faBezierCurve,
   faChevronDown,
+  faChevronLeft,
   faChevronRight,
   faChevronUp,
   faCircle,
@@ -200,6 +201,7 @@ const icons = {
   'bezier-curve': faBezierCurve,
   camera: faVideo,
   'chevron-down': faChevronDown,
+  'chevron-left': faChevronLeft,
   'chevron-right': faChevronRight,
   'chevron-up': faChevronUp,
   circle: faCircle,

package/kits/physics-2d/engine/ui.module.css

@@ -1504,7 +1504,8 @@
 }
 
 .drawingEditor {
-  grid-template-columns: minmax(320px, 1fr) minmax(50px, 250px);
+  /* 8*24 + 7*1 + 2*16 content, plus the inspector's 1px left divider. */
+  grid-template-columns: minmax(320px, 1fr) 232px;
   grid-template-rows: minmax(0, 1fr);
 }
 
@@ -1795,11 +1796,11 @@
 .palettePopover {
   position: fixed;
   z-index: 200;
-  width: min(280px, calc(100vw - 16px));
+  width: min(231px, calc(100vw - 16px));
   max-height: min(420px, calc(100vh - 16px));
   box-sizing: border-box;
   overflow: auto;
-  padding: 12px 14px 14px;
+  padding: 12px 16px 14px;
   border: 1px solid var(--castle-inspector-border);
   border-radius: var(--castle-radius);
   background: var(--castle-workspace-bg);
@@ -1905,17 +1906,59 @@
   outline: none;
 }
 
+.paletteFullNote {
+  font-size: 11px;
+  color: #c44;
+  padding: 0 0 8px;
+}
+
+.paletteSpriteRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1px;
+  padding-bottom: 8px;
+}
+
+.palettePager {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0 6px;
+}
+
+.palettePagerName {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--castle-inspector-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.palettePagerBtns {
+  display: flex;
+  gap: 4px;
+  margin-left: auto;
+}
+
 .palette {
   display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: 4px;
+  grid-template-columns: repeat(8, 24px);
+  gap: 1px;
   padding-bottom: 12px;
 }
 
 .swatch {
-  aspect-ratio: 1;
-  border: 1px solid var(--castle-inspector-border);
-  border-radius: var(--castle-radius);
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  appearance: none;
   cursor: pointer;
 }
 
@@ -1923,10 +1966,12 @@
    outside — so the selection stays legible over ANY of the 64 swatch colors
    (a single-color border can vanish against a similar swatch). */
 .swatchSelected {
+  position: relative;
+  z-index: 1;
   border-color: transparent;
   box-shadow:
     inset 0 0 0 2px #fff,
-    0 0 0 2px var(--castle-black);
+    0 0 0 1px var(--castle-black);
 }
 
 .drawingToolStrip {

package/kits/physics-2d/package-lock.json

@@ -28,7 +28,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.12",
+      "version": "0.4.14",
       "devDependencies": {
         "eslint": "^9.0.0",
         "jscpd": "^4.0.5",

package/kits/physics-2d/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "draw": "node scripts/draw.mjs",
+    "palette": "node scripts/palette.mjs",
     "restart": "node ../../cli/dist/index.js restart .",
     "screenshot": "node ../../cli/dist/index.js screenshot .",
     "check": "eslint . && jscpd && node --input-type=module -e \"const { bundleProject } = await import('../../cli/dist/bundle.js'); await bundleProject('.');\""

package/kits/physics-2d/scripts/deckTheme.mjs

@@ -0,0 +1,25 @@
+// Shared cwd theme.style reader for generation scripts.
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  THEME_STYLE_PATH,
+  parseThemeData,
+  resolveDeckPalette,
+  agentPaletteFor,
+  isDefaultDeckPalette,
+} from '../engine/palettes.js';
+
+export function loadDeckTheme(dir = process.cwd()) {
+  let data = null;
+  try {
+    data = parseThemeData(fs.readFileSync(path.join(dir, THEME_STYLE_PATH), 'utf8'));
+  } catch {
+    data = null;
+  }
+  const deck = resolveDeckPalette(data);
+  return { deck, agent: agentPaletteFor(deck.colors), isDefault: isDefaultDeckPalette(deck) };
+}
+
+export function formatPaletteLine(deck, agent) {
+  return `${deck.name} (${agent.length}): ${agent.join(' ')}`;
+}

package/kits/physics-2d/scripts/draw.mjs

@@ -1,7 +1,7 @@
 // `npm run draw -- <name>` — turn a terse svg-rect emission into a sprite.
 //
 // Reads an <svg> with one <rect> per pixel from stdin (or `--from <file>`),
-// decodes + palette-quantizes it onto the agent 16-color subset, and writes a
+// decodes + palette-quantizes it onto the deck's generation palette, and writes a
 // single-frame `drawings/<name>.sprite` in the deck (the script's cwd).
 //
 // This is a kit-layer concern: the `.pxart` format lives entirely in the kit
@@ -12,9 +12,9 @@ import * as path from 'path';
 import {
   svgRectToPxArt,
   serializeCompact,
-  AGENT_PALETTE_16,
   DEFAULT_RESOLUTION,
 } from '../engine/pxart.js';
+import { formatPaletteLine, loadDeckTheme } from './deckTheme.mjs';
 
 // Read all of stdin as a UTF-8 string. Resolves '' if stdin is a TTY with no
 // piped input so we can give a clear "no input" error instead of hanging.
@@ -102,7 +102,8 @@ async function main() {
     process.exit(1);
   }
 
-  const art = svgRectToPxArt(svg, { resolution: DEFAULT_RESOLUTION, palette: AGENT_PALETTE_16 });
+  const { deck, agent, isDefault } = loadDeckTheme(dir);
+  const art = svgRectToPxArt(svg, { resolution: DEFAULT_RESOLUTION, palette: agent });
   if (!art) {
     console.error('Could not decode any pixels from the svg-rect input (no usable <rect fill="...">). Emit one <rect> per filled pixel on a 16x16 viewBox.');
     process.exit(1);
@@ -113,6 +114,7 @@ async function main() {
 
   const rel = path.relative(path.resolve(dir), filepath);
   console.log(`Wrote ${rel}`);
+  if (!isDefault) console.log(`Palette: ${formatPaletteLine(deck, agent)}`);
 }
 
 main().catch((e) => {