castle-web-cli 0.4.114 → 0.4.116

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

@@ -5,6 +5,7 @@ import {
   faArrowsAltH,
   faArrowsAltV,
   faBars,
+  faBezierCurve,
   faChevronDown,
   faChevronRight,
   faChevronUp,
@@ -12,6 +13,8 @@ import {
   faClone,
   faCode,
   faCodeBranch,
+  faDotCircle,
+  faDrawPolygon,
   faEraser,
   faExpand,
   faExternalLinkAlt,
@@ -22,9 +25,12 @@ import {
   faGlobe,
   faImage,
   faLayerGroup,
+  faLocationArrow,
   faObjectGroup,
+  faPaintBrush,
   faPalette,
   faPencilAlt,
+  faPenNib,
   faPlay,
   faPlus,
   faRedo,
@@ -37,6 +43,7 @@ import {
   faStamp,
   faStop,
   faSyncAlt,
+  faTh,
   faTimes,
   faTrash,
   faUndo,
@@ -190,6 +197,7 @@ export function IconButton({ icon, label, active = false, variant = '', ...props
 }
 const icons = {
   bars: faBars,
+  'bezier-curve': faBezierCurve,
   camera: faVideo,
   'chevron-down': faChevronDown,
   'chevron-right': faChevronRight,
@@ -199,6 +207,8 @@ const icons = {
   code: faCode,
   // FA5 has no faCodeFork (that's the FA6 name); faCodeBranch is the fork glyph.
   'code-fork': faCodeBranch,
+  'dot-circle': faDotCircle,
+  'draw-polygon': faDrawPolygon,
   eraser: faEraser,
   expand: faExpand,
   external: faExternalLinkAlt,
@@ -209,13 +219,18 @@ const icons = {
   file: faFile,
   film: faFilm,
   globe: faGlobe,
+  grid: faTh,
   image: faImage,
   'layer-group': faLayerGroup,
+  // FA's location-arrow points up-right; flip it for a path-select cursor feel.
+  'location-arrow': { ...faLocationArrow, flipX: true },
   marquee: faVectorSquare,
   move: faArrowsAlt,
   'object-group': faObjectGroup,
+  paintbrush: faPaintBrush,
   palette: faPalette,
   pencil: faPencilAlt,
+  'pen-nib': faPenNib,
   play: faPlay,
   plus: faPlus,
   redo: faRedo,
@@ -244,7 +259,13 @@ export function Icon({ name }) {
     <svg
       viewBox={`0 0 ${width} ${height}`}
       aria-hidden="true"
-      style={{ width: '1em', height: '1em', display: 'inline-block', fill: 'currentColor' }}>
+      style={{
+        width: '1em',
+        height: '1em',
+        display: 'inline-block',
+        fill: 'currentColor',
+        ...(def.flipX ? { transform: 'scaleX(-1)' } : {}),
+      }}>
       <path d={d} />
     </svg>
   );

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

@@ -1591,7 +1591,7 @@
   color: var(--castle-inspector-muted);
 }
 
-.cornerRadiusBar {
+.finishBar {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -1600,21 +1600,23 @@
   color: var(--castle-inspector-muted);
 }
 
-/* Corner-radius segmented control (0 / ¼ / ½) — same bordered-row-of-
-   buttons pattern as .drawingShapeModeRow, sized for short text labels
-   instead of square glyph buttons. */
-.cornerRadiusSegments {
+/* Finish segmented control (square / ¼ / ½ / circle) — bordered row of
+   short text + icon segments. */
+.finishSegments {
   display: flex;
   border: 1px solid var(--castle-inspector-border);
   border-radius: var(--castle-radius);
   overflow: hidden;
 }
 
-.cornerRadiusSegments > * + * {
+.finishSegments > * + * {
   border-left: 1px solid var(--castle-inspector-border);
 }
 
-.cornerRadiusSegment {
+.finishSegment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   min-width: 28px;
   padding: 3px 8px;
   border: 0;
@@ -1626,15 +1628,15 @@
   line-height: 1.35;
 }
 
-.cornerRadiusSegment:hover {
+.finishSegment:hover {
   background: var(--castle-inspector-input-bg);
 }
 
-/* Compound selector (not a bare `.cornerRadiusSegmentOn`) for the same reason
+/* Compound selector (not a bare `.finishSegmentOn`) for the same reason
    documented above `.drawingToolButton.drawingToolSelected`: it must beat
-   `.cornerRadiusSegment:hover` on specificity no matter source order. */
-.cornerRadiusSegment.cornerRadiusSegmentOn,
-.cornerRadiusSegment.cornerRadiusSegmentOn:hover {
+   `.finishSegment:hover` on specificity no matter source order. */
+.finishSegment.finishSegmentOn,
+.finishSegment.finishSegmentOn:hover {
   background: var(--castle-selected);
   color: var(--castle-selected-ink);
 }
@@ -1873,6 +1875,7 @@
   height: 100%;
   pointer-events: none;
   z-index: -1;
+  image-rendering: auto;
 }
 
 .drawingCanvas {
@@ -1888,6 +1891,19 @@
   outline: none;
 }
 
+/* Smooth/rounded finish: the main canvas is transparent (smooth layer below).
+   Pixelated upscaling of the native grid would paint a visible cell lattice
+   over the whole artboard — use auto scaling instead. */
+.drawingCanvasSmooth {
+  image-rendering: auto;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  flex: 0 0 auto;
+  outline: none;
+}
+
 .palette {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -2010,6 +2026,14 @@
   color: var(--castle-selected-ink);
 }
 
+/* Groups of shape-action rows (fill/stroke · transform · punch/delete). */
+.drawingShapeModeGroups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
 /* Horizontal segmented row of shape sub-mode buttons in the wide-layout Tool
    Settings panel. Reuses .drawingToolButton glyph buttons with shared borders. */
 .drawingShapeModeRow {

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

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

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

@@ -2,7 +2,7 @@
 //
 // 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
-// single-frame `drawings/<name>.pxart` in the deck (the script's cwd).
+// 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
 // (engine/pxart.js); the harness has no knowledge of it.
@@ -31,19 +31,19 @@ function readStdin() {
   });
 }
 
-// Normalize a requested sprite name into a relative `drawings/<...>.pxart`
-// path. Tolerates a leading `drawings/` and/or a trailing `.pxart`/`.px.json`
-// so `draw ship`, `draw ship.pxart`, and `draw drawings/ship.pxart` all land in
+// Normalize a requested sprite name into a relative `drawings/<...>.sprite`
+// path. Tolerates a leading `drawings/` and/or a trailing `.sprite`/`.pxart`/`.px.json`
+// so `draw ship`, `draw ship.sprite`, and `draw drawings/ship.pxart` all land in
 // the same place.
 function resolveSpritePath(dir, name) {
   let rel = name.trim().replace(/\\/g, '/');
   rel = rel.replace(/^\.?\/*/, '');
   if (rel.startsWith('drawings/')) rel = rel.slice('drawings/'.length);
-  rel = rel.replace(/\.px\.json$/i, '').replace(/\.pxart$/i, '');
+  rel = rel.replace(/\.px\.json$/i, '').replace(/\.(?:pxart|sprite)$/i, '');
   if (!rel) return null;
 
   const drawingsDir = path.resolve(dir, 'drawings');
-  const filepath = path.resolve(drawingsDir, `${rel}.pxart`);
+  const filepath = path.resolve(drawingsDir, `${rel}.sprite`);
   const within = path.relative(drawingsDir, filepath);
   if (within.startsWith('..') || path.isAbsolute(within)) return null;
   return filepath;
@@ -72,7 +72,7 @@ function positionals() {
 async function main() {
   const name = positionals()[0];
   if (!name) {
-    console.error('Usage: npm run draw -- <name> [--from FILE]   (svg-rect on stdin -> drawings/<name>.pxart)');
+    console.error('Usage: npm run draw -- <name> [--from FILE]   (svg-rect on stdin -> drawings/<name>.sprite)');
     process.exit(1);
   }