castle-web-cli 0.4.172 → 0.4.174

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

@@ -1,11 +1,12 @@
-// A player's round avatar for drawing in a scene: the photo clipped to a circle
-// with their frame over it, as a canvas. Read through `User.get` once per user
-// id and kept for the page. A player with no photo has no avatar, and a caller
-// keeps its default look.
+// A player's avatar for drawing in a scene, read through `User.get` once per
+// user id and kept for the page. Two pictures: the round one, the photo clipped
+// to a circle with their frame over it, and the face, the photo alone, square,
+// for a surface it should cover edge to edge. A player with no photo has no
+// avatar, and a caller keeps its default look.
 //
-// `avatarCanvas` is for code that draws with a canvas context, like a name tag.
-// `avatarSpritePath` registers the same picture as image art in `scene.sprites`,
-// so a `Sprite` component can show it by file path.
+// `avatarCanvas` is for code that draws with a canvas context, like a Box.
+// `avatarSpritePath` and `avatarFacePath` register a picture as image art in
+// `scene.sprites`, so a `Sprite` or a model face can show it by file path.
 
 import { User } from 'castle-web-sdk';
 import { imageArt } from './art';
@@ -16,32 +17,48 @@ const SIZE = 128;
 // own profile views use.
 const FRAMED_INSET = SIZE / 6;
 
-// userId -> { canvas }, present from the first ask; `canvas` fills in when the
+// userId -> { canvas, face }, present from the first ask; both fill in when the
 // read completes.
 const avatars = new Map();
 
 // The avatar for one user id, or null until it is loaded or when there is none.
 export function avatarCanvas(userId) {
+  return entryFor(userId)?.canvas ?? null;
+}
+
+// The user's photo alone, square, or null as for `avatarCanvas`.
+export function avatarFace(userId) {
+  return entryFor(userId)?.face ?? null;
+}
+
+function entryFor(userId) {
   if (!userId) {
     return null;
   }
   let entry = avatars.get(userId);
   if (!entry) {
-    entry = { canvas: null };
+    entry = { canvas: null, face: null };
     avatars.set(userId, entry);
     void load(userId, entry);
   }
-  return entry.canvas;
+  return entry;
 }
 
-// The `scene.sprites` path holding this user's avatar, or null while there is
-// none. A `Sprite` with this `file` draws it.
+// The `scene.sprites` path holding this user's round avatar, or null while there
+// is none. A `Sprite` with this `file` draws it.
 export function avatarSpritePath(scene, userId) {
-  const canvas = avatarCanvas(userId);
+  return registered(scene, `avatars/${userId}.png`, avatarCanvas(userId));
+}
+
+// The same for the square face.
+export function avatarFacePath(scene, userId) {
+  return registered(scene, `avatars/${userId}-face.png`, avatarFace(userId));
+}
+
+function registered(scene, path, canvas) {
   if (!canvas) {
     return null;
   }
-  const path = `avatars/${userId}.png`;
   if (!scene.sprites[path]) {
     scene.sprites[path] = imageArt(path, canvas.toDataURL());
   }
@@ -54,6 +71,7 @@ async function load(userId, entry) {
     const [photo, frame] = await Promise.all([loadImage(user?.photoUrl), loadImage(user?.frameUrl)]);
     if (photo) {
       entry.canvas = compose(photo, frame);
+      entry.face = square(photo);
     }
   } catch {
     // A failed read leaves the entry without a canvas; the next page asks again.
@@ -72,6 +90,82 @@ function loadImage(url) {
   });
 }
 
+// How much of the opaque box is cut from each side, so a round photo's edge and
+// its anti-aliased rim stay off the face.
+const FACE_INSET = 0.12;
+
+// The opaque box is never taken smaller than this share of the photo on either
+// axis. Transparency reaching far inward would otherwise blow a few pixels up
+// to the whole face.
+const FACE_MIN = 0.55;
+
+// The photo cropped to its opaque pixels and then inset, filling the square.
+// Profile photos are circles on a transparent ground, and a face texture wants
+// no corners and no rim.
+function square(photo) {
+  const canvas = document.createElement('canvas');
+  canvas.width = SIZE;
+  canvas.height = SIZE;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(photo, 0, 0, SIZE, SIZE);
+  const box = atLeast(opaqueBox(ctx.getImageData(0, 0, SIZE, SIZE)), SIZE * FACE_MIN, SIZE);
+  const inset = Math.round(Math.min(box.width, box.height) * FACE_INSET);
+  const face = {
+    x: box.x + inset,
+    y: box.y + inset,
+    width: box.width - 2 * inset,
+    height: box.height - 2 * inset,
+  };
+  if (face.width <= 0 || face.height <= 0) {
+    return canvas;
+  }
+  const source = document.createElement('canvas');
+  source.width = SIZE;
+  source.height = SIZE;
+  source.getContext('2d').drawImage(canvas, 0, 0);
+  ctx.clearRect(0, 0, SIZE, SIZE);
+  ctx.drawImage(source, face.x, face.y, face.width, face.height, 0, 0, SIZE, SIZE);
+  return canvas;
+}
+
+// The box grown around its centre to at least `min` on each axis, kept inside
+// `size`.
+function atLeast(box, min, size) {
+  const out = { ...box };
+  for (const [at, extent] of [
+    ['x', 'width'],
+    ['y', 'height'],
+  ]) {
+    if (out[extent] < min) {
+      out[at] = Math.round(Math.min(Math.max(0, out[at] + out[extent] / 2 - min / 2), size - min));
+      out[extent] = Math.round(min);
+    }
+  }
+  return out;
+}
+
+// The smallest box holding every pixel with alpha over a small threshold.
+function opaqueBox({ data, width, height }) {
+  let left = width;
+  let top = height;
+  let right = -1;
+  let bottom = -1;
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      if (data[(y * width + x) * 4 + 3] > 16) {
+        left = Math.min(left, x);
+        top = Math.min(top, y);
+        right = Math.max(right, x);
+        bottom = Math.max(bottom, y);
+      }
+    }
+  }
+  if (right < 0) {
+    return { x: 0, y: 0, width, height };
+  }
+  return { x: left, y: top, width: right - left + 1, height: bottom - top + 1 };
+}
+
 function compose(photo, frame) {
   const canvas = document.createElement('canvas');
   canvas.width = SIZE;

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

@@ -119,13 +119,13 @@ export function mediaFilesOfKind(kind) {
 }
 // Which editor a file opens in when no `editorModule` was resolved. Media
 // viewing (image / audio / video) lives on castle.base now; this only covers
-// types this kit still routes itself (scene / sprite / style). Each extension
+// types this kit still routes itself (scene / sprite / theme). Each extension
 // gets its own line: legacy tooling matched one `endsWith` per `return`.
 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('.style')) return 'theme';
   if (path.endsWith('.js') || path.endsWith('.jsx')) return 'code';
   return 'text';
 }

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

@@ -147,7 +147,7 @@ export function patchBody(body, actor) {
   // used the retired `kind: 'pickup'` label are still honored as sensors.
   body.isSensor = Boolean(collider.isTrigger || collider.kind === 'pickup');
   body.frictionAir = rb?.drag ?? 0.01;
-  body.plugin.gravityScale = rb?.gravityScale ?? 1;
+  body.plugin.gravityScale = rb?.gravityScale ?? 0;
   body.plugin.angularDrag = rb?.angularDrag ?? 0;
   // Density sets mass (= density x area) -- DYNAMIC bodies only. On a static or
   // kinematic body, setDensity would replace the infinite mass that setStatic
@@ -172,7 +172,7 @@ export function syncBodyToPoint(body, point, angleDeg) {
 export function applyWorldGravity(bodies, gravity) {
   for (const body of bodies) {
     if (body.isStatic || body.isSleeping) continue;
-    const scale = (body.plugin.gravityScale ?? 1) * gravity.scale;
+    const scale = (body.plugin.gravityScale ?? 0) * gravity.scale;
     body.force.x += body.mass * gravity.x * scale;
     body.force.y += body.mass * gravity.y * scale;
   }

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

@@ -66,7 +66,7 @@ export class SceneRuntime {
     this.camera = undefined;
     this.status = undefined;
     // The deck's font as a CSS font-family value, always usable: the face
-    // picked in the Style editor, or a plain sans stack when there is none.
+    // picked in the Theme editor, or a plain sans stack when there is none.
     // For `draw` / `drawUi` hooks -- `ctx.font = `20px ${scene.font}`` -- since
     // canvas takes a family name, not a class. Prefer `drawUi` for HUD text;
     // the deprecated React `ui` overlay still inherits this face via CSS.

package/kits/physics-2d/fonts.generated.js

@@ -1,4 +1,4 @@
-// Generated by the Style editor. Do not edit -- picking a font rewrites it.
+// Generated by the Theme editor. Do not edit -- picking a font rewrites it.
 //
 // `theme.style` records that this deck's font is DMSans; this module is what
 // puts DMSans's bytes in the published bundle. It has to name the face in a

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

@@ -32,7 +32,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.26",
+      "version": "0.4.28",
       "dev": true,
       "devDependencies": {
         "eslint": "^9.0.0",

package/kits/physics-3d/behaviors/Body.jsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import { SelectField } from '@imports/castle.physics-2d/engine/ui';
 import { AutoFields, overrideProps } from '@imports/castle.physics-2d/engine/autoInspector';
+import { POSITIVE } from '@imports/castle.physics-2d/engine/propertyRanges';
 
 const TYPE_OPTIONS = [
   { value: 'fixed', label: 'Fixed' },
@@ -25,6 +26,7 @@ function BodyInspector({ component, setComponent, override }) {
       />
       <AutoFields
         defaultProps={Body.defaultProps}
+        meta={Body.propertyMeta}
         component={component}
         setComponent={setComponent}
         exclude={['type']}
@@ -41,10 +43,17 @@ export class Body {
     type: 'fixed', // 'fixed' | 'dynamic' | 'kinematic'
     friction: 0.6,
     restitution: 0,
-    gravityScale: 1,
+    // Match physics-2d RigidBody: newly added dynamics float until opted in.
+    gravityScale: 0,
     lockRotations: false,
   };
 
+  static propertyMeta = {
+    friction: POSITIVE,
+    restitution: POSITIVE,
+    gravityScale: { step: 0.1 },
+  };
+
   constructor(props) {
     this.props = props;
   }

package/kits/physics-3d/behaviors/Door.jsx

@@ -4,6 +4,11 @@
 export class Door {
   static behaviorName = 'Door';
   static defaultProps = { range: 3, slide: 2.1, speed: 2.5 };
+  static propertyMeta = {
+    range: { min: 0, step: 0.1 },
+    slide: { min: 0, step: 0.1 },
+    speed: { min: 0, step: 0.1 },
+  };
 
   constructor(props) {
     this.props = props;

package/kits/physics-3d/behaviors/Lookable.jsx

@@ -4,6 +4,9 @@
 export class Lookable {
   static behaviorName = 'Lookable';
   static defaultProps = { text: '', range: 4 };
+  static propertyMeta = {
+    range: { min: 0, step: 0.5 },
+  };
 
   constructor(props) {
     this.props = props;

package/kits/physics-3d/behaviors/Model.jsx

@@ -7,6 +7,10 @@
 export class Model {
   static behaviorName = 'Model';
   static defaultProps = { file: '', scale: 1, yOffset: 0 };
+  static propertyMeta = {
+    scale: { min: 0, step: 0.05 },
+    yOffset: { step: 0.05 },
+  };
 
   constructor(props) {
     this.props = props;

package/kits/physics-3d/behaviors/Pickup.jsx

@@ -14,6 +14,10 @@ function pickupKey(scene, actor) {
 export class Pickup {
   static behaviorName = 'Pickup';
   static defaultProps = { bob: 0.12, spin: 120 };
+  static propertyMeta = {
+    bob: { min: 0, step: 0.01 },
+    spin: { min: 0, step: 5 },
+  };
 
   constructor(props) {
     this.props = props;

package/kits/physics-3d/behaviors/Player.jsx

@@ -112,6 +112,13 @@ function findLookText(scene, actor, t, facing) {
 export class Player {
   static behaviorName = 'Player';
   static defaultProps = { speed: 6, turnSpeed: 2.4, jumpSpeed: 8, camDistance: 9, camHeight: 7 };
+  static propertyMeta = {
+    speed: { min: 0, step: 0.5 },
+    turnSpeed: { min: 0, step: 0.1 },
+    jumpSpeed: { min: 0, step: 0.5 },
+    camDistance: { min: 0, step: 0.5 },
+    camHeight: { min: 0, step: 0.5 },
+  };
 
   constructor(props) {
     this.props = props;

package/kits/physics-3d/behaviors/Shape.jsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { SelectField, TextField } from '@imports/castle.physics-2d/engine/ui';
 import { AutoFields, overrideProps } from '@imports/castle.physics-2d/engine/autoInspector';
+import { POSITIVE, UNIT } from '@imports/castle.physics-2d/engine/propertyRanges';
 
 const KIND_OPTIONS = [
   { value: 'box', label: 'Box' },
@@ -39,6 +40,7 @@ function ShapeInspector({ component, setComponent, override }) {
       )}
       <AutoFields
         defaultProps={Shape.defaultProps}
+        meta={Shape.propertyMeta}
         component={component}
         setComponent={setComponent}
         exclude={['kind', 'art', 'artRepeat']}
@@ -69,6 +71,17 @@ export class Shape {
     solid: false,
   };
 
+  static propertyMeta = {
+    width: POSITIVE,
+    height: POSITIVE,
+    depth: POSITIVE,
+    radius: POSITIVE,
+    roughness: UNIT,
+    metalness: UNIT,
+    clearcoat: UNIT,
+    emissiveIntensity: POSITIVE,
+  };
+
   constructor(props) {
     this.props = props;
   }

package/kits/physics-3d/castle.json

@@ -69,5 +69,5 @@
   "autoUpdateWhenImported": true,
   "deckId": "JH0SclbPVP0y",
   "cardId": "eXfAaUdbSU5A",
-  "publishedVersion": "2026-09-10T20:10:28.916Z"
+  "publishedVersion": "2026-09-10T22:05:11.276Z"
 }

package/kits/physics-3d/engine3d/editor3dInspector.jsx

@@ -332,6 +332,7 @@ function BehaviorPanel({
       component={component}
       setComponent={setComponent}
       override={override}
+      meta={Behavior?.propertyMeta}
     />
   );
   // Transform is core to every actor; a component an instance only has via

package/kits/physics-3d/fonts.generated.js

@@ -1,4 +1,4 @@
-// Generated by the Style editor. Do not edit -- picking a font rewrites it.
+// Generated by the Theme editor. Do not edit -- picking a font rewrites it.
 //
 // `theme.style` records that this deck's font is DMSans; this module is what
 // puts DMSans's bytes in the published bundle. It has to name the face in a

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

@@ -34,7 +34,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.26",
+      "version": "0.4.28",
       "dev": true,
       "devDependencies": {
         "eslint": "^9.0.0",

package/kits/real-time/castle.json

@@ -15,5 +15,5 @@
   "autoUpdateWhenImported": true,
   "deckId": "xFVr-afOLuUQ",
   "cardId": "w6G45sy3_P_m",
-  "publishedVersion": "2026-09-10T20:28:42.134Z"
+  "publishedVersion": "2026-09-10T22:05:27.337Z"
 }

package/kits/real-time/code/client/connection.js

@@ -91,7 +91,16 @@ export async function connectSession({ onLog = () => {} } = {}) {
       sendMove(net, pose, owned, claims, releases, state),
 
     // Send deck-specific data. The server routes these to `code/server/game.js`.
-    send: (data) => net.connection.send(data),
+    send: (data) => {
+      if (connection.state !== 'closed') {
+        net.connection.send(data);
+      }
+    },
+
+    // Whether the session has ended under this connection: the server was
+    // replaced, the platform closed it, or `close` was called. Nothing is sent
+    // on it again; the client system joins afresh.
+    closed: () => connection.state === 'closed',
 
     // Connection and presence data for a deck status line.
     status: () => ({
@@ -127,7 +136,7 @@ function sendMove(net, pose, owned, claims, releases, state) {
     net.releases.add(id);
   }
   const now = performance.now();
-  if (now - net.sentAt < SEND_MS) {
+  if (now - net.sentAt < SEND_MS || net.connection.state === 'closed') {
     return false;
   }
   net.sentAt = now;

package/kits/real-time/package-lock.json

@@ -16,7 +16,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.27",
+      "version": "0.4.28",
       "dev": true,
       "devDependencies": {
         "eslint": "^9.0.0",

package/kits/turn-based/castle.json

@@ -28,7 +28,7 @@
   "autoUpdateWhenImported": true,
   "deckId": "K6-Xs7dCoMVi",
   "cardId": "Kh_08IYATpC3",
-  "publishedVersion": "2026-09-10T20:28:55.394Z",
+  "publishedVersion": "2026-09-10T22:05:30.856Z",
   "server": {
     "main": "code/server/index.js",
     "maxPlayers": 8,

package/kits/turn-based/fonts.generated.js

@@ -1,4 +1,4 @@
-// Generated by the Style editor. Do not edit -- picking a font rewrites it.
+// Generated by the Theme editor. Do not edit -- picking a font rewrites it.
 //
 // `theme.style` records that this deck's font is DMSans; this module is what
 // puts DMSans's bytes in the published bundle. It has to name the face in a

package/kits/turn-based/package-lock.json

@@ -28,7 +28,7 @@
     },
     "../../sdk": {
       "name": "castle-web-sdk",
-      "version": "0.4.26",
+      "version": "0.4.28",
       "dev": true,
       "devDependencies": {
         "eslint": "^9.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.172",
+  "version": "0.4.174",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"
@@ -41,6 +41,7 @@
     "@xterm/headless": "^6.0.0",
     "@xterm/xterm": "^6.0.0",
     "codemirror": "^6.0.2",
+    "compression": "^1.8.1",
     "html2canvas": "^1.4.1",
     "marked": "^18.0.5",
     "nanoid": "^5.1.7",
@@ -54,6 +55,7 @@
     "ws": "^8.20.0"
   },
   "devDependencies": {
+    "@types/compression": "^1.8.1",
     "@types/node": "^20.0.0",
     "@types/picomatch": "^4.0.2",
     "@types/react": "^18.3.31",