castle-web-cli 0.4.172 → 0.4.174

package/kits/multiplayer-3d/code/client/avatars.js

@@ -1,10 +1,12 @@
-// Other-player actors and their floating name tags. This module creates actors
-// from deck blueprints, updates their network poses, and removes their scene
-// resources when players leave.
+// Other-player actors, their floating name tags, and the avatar on their head.
+// This module creates actors from deck blueprints, updates their network poses,
+// and removes their scene resources when players leave.
 
 import * as NameTags from './nameTags.js';
 import { applyPose } from './poses.js';
-import { avatarCanvas } from '@imports/castle.physics-2d/engine/avatarArt.js';
+import { artReady } from '@imports/castle.physics-2d/engine/art.js';
+import { avatarFacePath } from '@imports/castle.physics-2d/engine/avatarArt.js';
+import { makeShapeMesh } from '@imports/castle.physics-3d/engine3d/materials.js';
 
 // The blueprint spawned when a caller names none. A deck's own file wins; a deck
 // scaffolded from this kit has no blueprints yet, so the kit's copy stands in
@@ -35,7 +37,7 @@ export function makeAvatars() {
 // A `username` of null draws no label. Options are `blueprint`, the scene to
 // spawn from (default `blueprints/other-player.scene`, the deck's own or the kit's),
 // `tagHeight`, how far over the body the label floats, and `userId`, whose
-// avatar the label carries.
+// avatar goes on the model's head.
 export function showPlayer(avatars, scene, playerId, username, pose, options = {}) {
   // The actor keeps the blueprint used at creation; `ensureActor` only spawns
   // when this player has no live actor in the current scene.
@@ -48,20 +50,22 @@ export function showPlayer(avatars, scene, playerId, username, pose, options = {
   if (username === null) {
     dropTag(avatars, scene, playerId);
   } else {
-    showTag(avatars, scene, playerId, username, transform, options);
+    showTag(avatars, scene, playerId, username, transform, options.tagHeight);
   }
+  dressHead(scene, actor.id, options.userId);
   return actor;
 }
 
-// Update the local player's label over the engine's local Player actor. The SDK
-// roster can arrive several frames after connection, so an empty username
-// leaves the label absent until the roster supplies one. Options are
+// Update the local player's label and head over the engine's local Player
+// actor. The SDK roster can arrive several frames after connection, so an empty
+// username leaves the label absent until the roster supplies one. Options are
 // `tagHeight` and `userId`, as for `showPlayer`.
-export function showSelf(avatars, scene, username, transform, options = {}) {
+export function showSelf(avatars, scene, local, username, transform, options = {}) {
+  dressHead(scene, local?.id, options.userId);
   if (!username) {
     return;
   }
-  showTag(avatars, scene, 'self', username, transform, options);
+  showTag(avatars, scene, 'self', username, transform, options.tagHeight);
 }
 
 // Despawn the actor and dispose the tag of every player absent from `present`.
@@ -109,21 +113,20 @@ function ensureActor(avatars, scene, playerId, pose, blueprint) {
   return spawned;
 }
 
-// Create a tag when the displayed text or the avatar changes, then place it over
-// the actor. Each redraw allocates a canvas, texture, and sprite, so an unchanged
-// tag reuses the existing resources.
-function showTag(avatars, scene, key, username, transform, { tagHeight, userId } = {}) {
+// Create a tag when the displayed text changes, then place it over the actor.
+// Each redraw allocates a canvas, texture, and sprite, so unchanged text reuses
+// the existing resources.
+function showTag(avatars, scene, key, username, transform, tagHeight) {
   const label = NameTags.shortName(username);
-  const avatar = avatarCanvas(userId);
   let tag = avatars.tags.get(key);
 
   // Compare against the shortened text stored on the tag. An
   // `anonymous-user-<uuid>` differs from the `anon-xxxxxx` string on the sprite.
-  if (!tag || tag.text !== label || tag.avatar !== avatar) {
+  if (!tag || tag.text !== label) {
     if (tag) {
       NameTags.disposeNameTag(scene.three, tag);
     }
-    tag = NameTags.makeNameTag(scene.three, label, avatar);
+    tag = NameTags.makeNameTag(scene.three, label);
     avatars.tags.set(key, tag);
   }
 
@@ -131,6 +134,32 @@ function showTag(avatars, scene, key, username, transform, { tagHeight, userId }
   NameTags.moveNameTag(tag, transform, scene.three?.camera, tagHeight);
 }
 
+// Put the player's photo, square and edge to edge, on the four side faces of
+// their model's head. The part is the one named `head`, the same convention
+// `pxmodel.js` animates by; a model without one shows no avatar. The materials
+// are rebuilt once per picture, when its art has loaded.
+function dressHead(scene, actorId, userId) {
+  const path = avatarFacePath(scene, userId);
+  const head = scene.three?.nodes?.get(actorId)?.node.userData.modelParts?.get('head');
+  const mesh = head?.children.find((child) => child.userData.partMesh === 'head');
+  if (!path || !mesh || mesh.userData.avatarPath === path || !artReady(scene.sprites[path])) {
+    return;
+  }
+
+  // White under the picture, so the head's skin color does not tint it.
+  const { width, height, depth } = mesh.geometry.parameters;
+  const dressed = makeShapeMesh(
+    { kind: 'box', width, height, depth, color: '#ffffff', art: { sides: path, front: path } },
+    scene.sprites,
+  );
+  for (const material of [].concat(mesh.material)) {
+    material.dispose();
+  }
+  mesh.material = dressed.material;
+  dressed.geometry.dispose();
+  mesh.userData.avatarPath = path;
+}
+
 function dropTag(avatars, scene, key) {
   const tag = avatars.tags.get(key);
   if (tag) {

package/kits/multiplayer-3d/code/client/nameTags.js

@@ -1,8 +1,6 @@
-// Floating name tags for other players and the local player: the player's round
-// avatar over their username. This module draws them to a canvas, attaches the
-// resulting sprite directly to the engine's three.js scene, scales it by camera
-// distance, and disposes its GPU resources. A sprite always faces the camera,
-// so the avatar reads from every side.
+// Floating username-label sprites for other players and the local player. This module
+// draws text to a canvas, attaches the resulting sprite directly to the engine's
+// three.js scene, scales it by camera distance, and disposes its GPU resources.
 
 import * as THREE from 'three';
 
@@ -10,11 +8,6 @@ import * as THREE from 'three';
 const HEIGHT_ABOVE = 1.25;
 const PIXELS_PER_UNIT = 200;
 
-// Canvas pixels of the name pill, and of the avatar drawn above it.
-const LABEL_PX = 68;
-const AVATAR_PX = 112;
-const GAP_PX = 8;
-
 // The distance at which the label is the size it was drawn to be: 68 canvas
 // pixels over 200 per unit is 0.34m, which on a 500x700 card at fov 55 is 29px.
 // This reference distance matches the common camera placement in kit decks.
@@ -23,12 +16,11 @@ const SAME_SIZE_M = 8;
 // The minimum scale keeps a label readable when the camera is near the player.
 const MIN_SCALE = 0.35;
 
-// Create `{ sprite, text, avatar, width, height, lift }` and add the sprite to
-// the engine's three.js scene. `avatar` is the canvas from `avatarArt.js`, or
-// null for a name alone. The engine actor-to-mesh sync does not update these
-// directly attached sprites, so callers move them each frame with `moveNameTag`.
-export function makeNameTag(world, text, avatar = null) {
-  const canvas = drawLabel(text, avatar);
+// Create `{ sprite, text, width, height }` and add the sprite to the engine's
+// three.js scene. The engine actor-to-mesh sync does not update these directly
+// attached sprites, so callers move them each frame with `moveNameTag`.
+export function makeNameTag(world, text) {
+  const canvas = drawLabel(text);
   const texture = new THREE.CanvasTexture(canvas);
   texture.colorSpace = THREE.SRGBColorSpace;
   const sprite = new THREE.Sprite(
@@ -49,11 +41,8 @@ export function makeNameTag(world, text, avatar = null) {
   world.scene.add(sprite);
 
   // `text` is the string actually drawn, not the username it came from. The
-  // caller compares against it, and against `avatar`, to decide whether to
-  // redraw. `lift` raises the sprite's centre so the name pill stays at
-  // `heightAbove` when an avatar is stacked over it.
-  const lift = (height - LABEL_PX / PIXELS_PER_UNIT) / 2;
-  return { sprite, text, avatar, width, height, lift };
+  // caller compares against it to decide whether a name changed.
+  return { sprite, text, width, height };
 }
 
 // Move and scale a tag after its player pose is drawn for the current frame.
@@ -72,7 +61,6 @@ export function moveNameTag(tag, transform, camera, heightAbove = HEIGHT_ABOVE)
   // 0.8m 286px -> 100, 2m 114px -> 40, 4m 57px -> 29, 8m 29px -> 29, 20m 11 -> 11.
   const scale = Math.max(MIN_SCALE, Math.min(1, away / SAME_SIZE_M));
   tag.sprite.scale.set(tag.width * scale, tag.height * scale, 1);
-  tag.sprite.position.y += tag.lift * scale;
 }
 
 // Remove a tag from the three.js scene and release its texture and material.
@@ -90,31 +78,24 @@ export function shortName(username) {
   return anon ? `anon-${anon[1].replace(/-/g, '').slice(-6)}` : (username ?? 'player');
 }
 
-// Rasterize one display name, with the avatar centred above it, into the canvas
-// used as the sprite texture.
-function drawLabel(text, avatar) {
+// Rasterize one display name into the canvas used as the sprite texture.
+function drawLabel(text) {
   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   const font = '600 44px Inter, system-ui, sans-serif';
   ctx.font = font;
-  const pillWidth = Math.ceil(ctx.measureText(text).width) + 40;
-  const width = avatar ? Math.max(pillWidth, AVATAR_PX) : pillWidth;
-  const top = avatar ? AVATAR_PX + GAP_PX : 0;
+  const width = Math.ceil(ctx.measureText(text).width) + 40;
 
   // Canvas resizing clears the context state, so measure before resizing and
   // restore the font before drawing.
   canvas.width = width;
-  canvas.height = top + LABEL_PX;
+  canvas.height = 68;
   ctx.font = font;
-  if (avatar) {
-    ctx.drawImage(avatar, (width - AVATAR_PX) / 2, 0, AVATAR_PX, AVATAR_PX);
-  }
-  const left = (width - pillWidth) / 2;
   ctx.fillStyle = 'rgba(12,12,16,0.72)';
-  ctx.roundRect(left, top, pillWidth, LABEL_PX, 16);
+  ctx.roundRect(0, 0, width, 68, 16);
   ctx.fill();
   ctx.fillStyle = '#f2f2f5';
   ctx.textBaseline = 'middle';
-  ctx.fillText(text, left + 20, top + LABEL_PX / 2);
+  ctx.fillText(text, 20, 36);
   return canvas;
 }

package/kits/multiplayer-3d/code/server/sceneBodies.js

@@ -31,7 +31,7 @@ const blueprintTexts = import.meta.glob(['/blueprints/*.scene', '/imports/*/blue
 const DEFAULTS = {
   Transform: { x: 0, y: 0, z: 0, rotationX: 0, rotationY: 0, rotationZ: 0 },
   Shape: { kind: 'box', width: 1, height: 1, depth: 1, radius: 0.5, solid: false },
-  Body: { type: 'fixed', friction: 0.6, restitution: 0, gravityScale: 1, lockRotations: false },
+  Body: { type: 'fixed', friction: 0.6, restitution: 0, gravityScale: 0, lockRotations: false },
   Door: { range: 3, slide: 2.1, speed: 2.5 },
 
   // `Ball` marks a fast-moving actor. `world.js` enables continuous collision

package/kits/multiplayer-3d/code/systems/multiplayer.js

@@ -98,6 +98,19 @@ class MultiplayerSystem {
       showJoinOverlay(this.joiningOverlayWanted());
       return void this.start();
     }
+
+    // The session ended under this connection (the server was replaced, or the
+    // platform closed it). Everything drawn from it goes, and the next frame
+    // joins afresh behind the overlay.
+    if (this.net.closed()) {
+      this.reset(scene);
+      this.net = null;
+      this.joined = false;
+      this.joinStartedAt = 0;
+      this.starting = false;
+      this.sentState = '';
+      return;
+    }
     const local = scene.actorWith('Player');
 
     // Drain all queued messages before choosing the render time for this frame.
@@ -351,7 +364,7 @@ class MultiplayerSystem {
     if (this.net.sendMove(Poses.packMove(me), owned, claims, releases, state) && state) {
       this.sentState = stateJson;
     }
-    Avatars.showSelf(this.avatars, scene, this.net.status().you, me, {
+    Avatars.showSelf(this.avatars, scene, local, this.net.status().you, me, {
       userId: this.net.userId(this.net.selfId()),
     });
   }

package/kits/multiplayer-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/multiplayer-3d/package-lock.json

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

package/kits/physics-2d/CLAUDE.md

@@ -22,12 +22,12 @@ Do you already know what you want to make, or do you want to figure it out toget
 - Every actor is an instance of a **blueprint** (`blueprints/*.scene`) — see `## Blueprints` below. Always author the blueprint file yourself and reference it via `"blueprint"`. Don't write inline actors (full `components`, no `blueprint` field): the editor auto-migrates each one into its own new blueprint file on open, one per actor with no dedup, which litters the deck with junk blueprints.
 - Real game objects and scenery should usually be editable sprites: generate `.sprite` with `npm run draw -- name`, then place it via a `Sprite` component pointing at `drawings/name.sprite`. Dynamic UI/effects stay procedural.
 - A deck can also hold uploaded media (the Files panel's Upload button): `Sprite` draws image files as well as `.sprite`, and `Video` plays video files. Point their `file` at the deck path (`assets/logo.png`). For audio see `## Sound` below -- sound effects need no component at all.
-- The deck's body/UI font is picked in the Style editor (`theme.style`): canvas text reads `scene.font`. A second display face is imported in the behavior that uses it. See `## Deck font` below.
+- The deck's body/UI font is picked in the Theme editor (`theme.style`): canvas text reads `scene.font`. A second display face is imported in the behavior that uses it. See `## Deck font` below.
 - This kit is plain JavaScript. Use `.jsx` for files with JSX, `.js` otherwise; do not add TypeScript files or a new build step.
 - Space is reserved by the editor for play/stop; do not bind Space to gameplay.
 - Two render hooks: `draw(ctx)` is world space and scrolls with `Camera`; `drawUi(ctx)` is screen space (card units, camera-free). On-screen controls, gauges and HUD go in `drawUi`, never `draw`. The React `ui()` hook is deprecated — prefer `drawUi`.
 - Do not read `engine/`, `editors/`, or built-in behaviors (`Layout.jsx`, `Sprite.jsx`, `Collider.jsx`, `Camera.jsx`, and the physics ones — `RigidBody.jsx`, `Joints.jsx`, `Draggable.jsx`, `Slingshot.jsx`, `AnalogStick.jsx`) to build a game. Their public API is documented below. Forking is the exception: when you're deliberately copying a kit file into the deck to change it — an editor (see `## Editors`) or a behavior you're shadowing — read the original. `engine/` stays off-limits either way.
-- An editor is for content FILES the creator keeps coming back to (catalogs, dialogue, level tables) that nothing already opens. Scenes, sprites and styles have editors; per-actor settings belong on behavior props in the inspector — not in a new editor.
+- An editor is for content FILES the creator keeps coming back to (catalogs, dialogue, level tables) that nothing already opens. Scenes, sprites and themes have editors; per-actor settings belong on behavior props in the inspector — not in a new editor.
 - Details below: `## Behavior shape`, `## Scene file`, `## Blueprints`, `## Built-in behaviors`, `## Creating pixel art`, `## SceneRuntime API`, and `## Input shortcuts`.
 
 ## Editors
@@ -440,7 +440,7 @@ Name a sound by its filename without the extension, or by its full deck path. Tw
 
 ## Deck font
 
-A physics-2d deck picks its **deck font** in the Style editor — open
+A physics-2d deck picks its **deck font** in the Theme editor — open
 `theme.style` and choose one of the nine Castle faces, or None. That is the
 deck's body and UI face: `scene.font` returns it for `draw` / `drawUi`.
 
@@ -525,7 +525,8 @@ make it move.**
   - `bodyType: 'dynamic' | 'static' | 'kinematic'`. `dynamic` = simulated
     (gravity, collisions, forces). `static` = never moves (same as a lone
     Collider). `kinematic` = unpushable, but you move it by writing its Layout.
-  - `gravityScale` — multiplies world gravity for this body (`0` = floats).
+  - `gravityScale` — multiplies world gravity for this body (`0` = floats;
+    default, so newly added bodies don't fall until you opt in).
   - `drag` — linear damping (air resistance). `angularDrag` — spin damping.
   - `freezeRotation` — keep it from rotating (stays upright).
   - `velocityX` / `velocityY` — initial velocity, applied once when play starts.
@@ -649,7 +650,7 @@ see the SceneRuntime API below.
 ### Recipe: a launch-and-bounce game
 
 - Ball blueprint: `Layout` (square), `Sprite`, `Collider {shape:'circle',
-bounciness:0.6}`, `RigidBody {bodyType:'dynamic'}`, `Slingshot {}`.
+bounciness:0.6}`, `RigidBody {bodyType:'dynamic', gravityScale:1}`, `Slingshot {}`.
 - Walls/floor blueprint: `Layout`, `Collider {bounciness:0.4}` (no RigidBody →
   static).
 - Goal blueprint: `Collider {isTrigger:true}` + a `Goal` behavior with
@@ -835,7 +836,7 @@ To generate path art, emit an svg of **shapes** rather than per-pixel rects and
 - `scene.spawnFromBlueprint('blueprints/enemy.scene', { components: { Layout: { x, y } } })` — spawn an instance of a blueprint, same merge semantics as a placed instance. Prefer this over `spawnActor` when you're spawning copies of something that has (or should have) a blueprint, e.g. `scene.spawnFromBlueprint(actor.blueprint, { components: { Layout: { x: actor.components.Layout.x, y: actor.components.Layout.y } } })` to spawn another of the same kind as an existing actor.
 - `scene.despawnActor(id)` — remove an actor at runtime. Use this; don't `splice` + `delete` by hand.
 - `scene.sound` — the deck's sound library: `play(name, opts)`, `stopAll()`, `isLoaded`, `whenLoaded`, `has(name)`, `voiceCount`. See `## Sound`.
-- `scene.font` — the deck's font as a CSS family, for `ctx.font` in `draw` / `drawUi`. Always usable: the face picked in the Style editor, or a sans stack. See `## Deck font`.
+- `scene.font` — the deck's font as a CSS family, for `ctx.font` in `draw` / `drawUi`. Always usable: the face picked in the Theme editor, or a sans stack. See `## Deck font`.
 - `scene.status` — string you can set/read for game-state ('playing', 'gameover', ...).
 - `scene.load(sceneData)` — replace the running scene with the given scene data object.
 - `scene.readFromFile(name)` — read and parse a scene file (`'gameover.scene'`, `'levels/2.scene'`), returning its scene data. Use this instead of importing a `.scene` file.

package/kits/physics-2d/behaviors/Collider.jsx

@@ -304,7 +304,13 @@ export class Collider {
         </div>
 
         {/* Material (collider-wide) */}
-        <NumberField label="Density" value={density} onChange={(v) => setComponent({ density: v })} />
+        <NumberField
+          label="Density"
+          value={density}
+          min={0}
+          step={0.001}
+          onChange={(v) => setComponent({ density: v })}
+        />
         <AutoFields
           defaultProps={Collider.defaultProps}
           meta={Collider.propertyMeta}

package/kits/physics-2d/behaviors/RigidBody.jsx

@@ -24,7 +24,9 @@ export class RigidBody {
 
   static defaultProps = {
     bodyType: 'dynamic',
-    gravityScale: 1,
+    // New bodies float until the author opts into gravity — falling immediately
+    // on add is the common surprise when placing a dynamic body to push around.
+    gravityScale: 0,
     drag: 0.01,
     angularDrag: 0,
     freezeRotation: false,
@@ -44,10 +46,11 @@ export class RigidBody {
   // `drag`/`angularDrag` are matter's air friction, where values above 1 flip
   // the velocity sign and destabilize the body -- so 1 is a real ceiling, not a
   // convenience. `gravityScale` deliberately has none: negative is legitimate
-  // (it inverts gravity), as is scaling well past 1.
+  // (it inverts gravity), as is scaling well past 1. Drag steps at 0.005 so the
+  // scrubber lands on the default (0.01) and the finer authored values kits use.
   static propertyMeta = {
     gravityScale: { step: 0.1 },
-    drag: DAMPING,
+    drag: { ...DAMPING, step: 0.005 },
     angularDrag: DAMPING,
     angularVelocity: { step: 0.1 },
   };

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

@@ -59,7 +59,7 @@
       },
       {
         "ext": ".style",
-        "label": "Style",
+        "label": "Theme",
         "icon": "palette",
         "editor": "kit",
         "data": true
@@ -72,7 +72,7 @@
   "main": "main.jsx",
   "autoUpdateWhenImported": true,
   "title": "physics-2d",
-  "publishedVersion": "2026-09-10T20:28:41.310Z",
+  "publishedVersion": "2026-09-10T22:05:01.629Z",
   "imports": {
     "castle.base": {
       "deckId": "yRcmH4_aYllE",

package/kits/physics-2d/editors/SceneEditor.jsx

@@ -2303,6 +2303,7 @@ function BehaviorRow({
       component={component}
       setComponent={setComponent}
       override={override}
+      meta={Behavior?.propertyMeta}
     />
   );
   // Layout is core to every actor -- it cannot be removed. A component an

package/kits/physics-2d/editors/SingleEditor.jsx

@@ -1,7 +1,7 @@
 // Single-editor mount for the panel system. The shell (dockview) opens this as
 // its own iframe via the deck route in main.jsx:
 //   ?file=<path>[&editor=<id>]  -> <SingleEditor> (one editor for one file)
-// The shell only routes the kit's RICH file types here (scene / pxart / style);
+// The shell only routes the kit's RICH file types here (scene / pxart / theme);
 // file browsing and the code/text editor are now builtin shell panels.
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -29,7 +29,7 @@ import { collectAssets } from '../engine/assets';
 import { MainEditor, styles } from '../engine/ui';
 import { PxArtEditor } from './PxArtEditor';
 import { SceneEditor } from './SceneEditor';
-import { StyleEditor } from './StyleEditor';
+import { ThemeEditor } from './ThemeEditor';
 
 // Debounce per path on top of the SDK's save queue: this decides WHEN a change
 // is worth writing (a drag shouldn't write every frame), the queue decides that
@@ -308,9 +308,9 @@ export function SingleEditor({ path, editor, editorModule }) {
     body = (
       <PxArtEditor path={path} text={text} onChange={onChange} files={files} readOnly={readOnly} />
     );
-  } else if (kind === 'style') {
+  } else if (kind === 'theme') {
     body = (
-      <StyleEditor
+      <ThemeEditor
         path={path}
         text={text}
         onChange={onChange}

package/kits/physics-2d/editors/{StyleEditor.jsx → ThemeEditor.jsx}

@@ -1,4 +1,4 @@
-// Deck style picker for `theme.style`: a palette and a font.
+// Deck theme picker for `theme.style`: a palette and a font.
 //
 // Palettes: official entries come from OFFICIAL_PALETTES; a custom
 // `{ name, colors }` in the file shows as a read-only selected card.
@@ -19,8 +19,8 @@ import { OFFICIAL_PALETTES, parseThemeData, resolveDeckPalette } from '../engine
 import { EditorBody } from '../engine/ui';
 import { writeDeckFontModule } from './deckFont';
 import { usePreviewFaces } from './fontPreview';
-import { applyOfficialFont, applyOfficialPalette } from './styleTheme';
-import styles from './styleEditor.module.css';
+import { applyOfficialFont, applyOfficialPalette } from './theme';
+import styles from './themeEditor.module.css';
 
 function cardClassName(selected, clickable) {
   return [styles.card, selected ? styles.cardSelected : '', clickable ? '' : styles.cardStatic]
@@ -30,7 +30,7 @@ function cardClassName(selected, clickable) {
 
 // One card, palette or font: a head (name + meta) over whatever the type shows
 // of itself. A button when it can be picked, a plain div when it can't.
-function styleCard({ cardKey, name, meta, preview, selected, onPick }) {
+function themeCard({ cardKey, name, meta, preview, selected, onPick }) {
   // Inner wrapper is the flex column, not the <button>. WebKit still wraps
   // button contents in a shrink-to-fit anonymous box, so a flex button never
   // stretches its children on some iOS versions — the palette strip stays
@@ -70,7 +70,7 @@ function swatchStrip(colors) {
 }
 
 function paletteCard({ palette, selected, badge, onPick }) {
-  return styleCard({
+  return themeCard({
     cardKey: palette.id ?? 'custom',
     name: palette.name,
     meta: (
@@ -92,7 +92,7 @@ function paletteCard({ palette, selected, badge, onPick }) {
 // arrives it renders in the panel font, which reads as an ordinary label rather
 // than as a broken card.
 function fontCard({ face, loaded, selected, onPick }) {
-  return styleCard({
+  return themeCard({
     cardKey: face.name,
     name: face.label,
     preview: (
@@ -161,7 +161,7 @@ function FontSection({ text, onChange, onChangeFile, readOnly }) {
         code asks for another face.
       </p>
       <div className={styles.list}>
-        {styleCard({
+        {themeCard({
           cardKey: 'none',
           name: 'None',
           preview: <div className={styles.specimen}>The quick brown fox</div>,
@@ -181,7 +181,7 @@ function FontSection({ text, onChange, onChangeFile, readOnly }) {
   );
 }
 
-export function StyleEditor({ text, onChange, onChangeFile, readOnly = false }) {
+export function ThemeEditor({ text, onChange, onChangeFile, readOnly = false }) {
   // An editor host too old to hand over `onChangeFile` can still pick a
   // palette; a font needs a second file written, so it stays read-only there.
   const canPickFont = Boolean(onChangeFile) && !readOnly;

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

@@ -24,7 +24,7 @@ const deleteFile = castleSdk.deleteFile ?? null;
 
 /** The whole content of `fonts.generated.js` for one face. */
 export function deckFontModuleSource(name) {
-  return `// Generated by the Style editor. Do not edit -- picking a font rewrites it.
+  return `// Generated by the Theme editor. Do not edit -- picking a font rewrites it.
 //
 // \`theme.style\` records that this deck's font is ${name}; this module is what
 // puts ${name}'s bytes in the published bundle. It has to name the face in a
@@ -39,7 +39,7 @@ export const deckFont = '${name}';
 /** An empty module, for the SDK too old to delete a file. Renders as no deck
  * font, same as the file being absent. */
 function emptyModuleSource() {
-  return `// Generated by the Style editor. Do not edit.
+  return `// Generated by the Theme editor. Do not edit.
 //
 // This deck has no font of its own; text renders in the default sans stack.
 export const deckFont = null;

package/kits/physics-2d/editors/{styleEditor.module.css → themeEditor.module.css}

@@ -1,4 +1,4 @@
-/* Deck style picker for theme.style: palette + font. Tokens match
+/* Deck theme picker for theme.style: palette + font. Tokens match
    engine/ui.module.css. */
 
 .root {
@@ -56,7 +56,7 @@
 
 .card {
   /* Block, not flex: WebKit's button anonymous box shrink-wraps flex
-     children (style editor palette strips on some iOS). appearance wipe
+     children (theme editor palette strips on some iOS). appearance wipe
      matches other kit buttons. */
   display: block;
   box-sizing: border-box;