castle-web-cli 0.4.166 → 0.4.167

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

@@ -0,0 +1,176 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ArtThumbnail } from './artThumbnail';
+import { cx, FieldRow, Icon, styles } from './ui';
+
+// Visual sprite / image picker for inspector fields that point at art files.
+// Anchored popover (same family as FileField), not a modal: thumbnails only,
+// name-without-extension on hover, pick closes. Blank art reuses ArtThumbnail's
+// belt fallback (title in place of the empty canvas).
+
+function basenameOf(path) {
+  if (!path) return '';
+  return path.slice(path.lastIndexOf('/') + 1);
+}
+
+function displayNameOf(path) {
+  const base = basenameOf(path);
+  if (!base) return 'None';
+  return base.replace(/\.[^.]+$/, '') || base;
+}
+
+function candidatePaths(files, sprites, current, allowEmpty) {
+  const paths = [];
+  if (allowEmpty) paths.push('');
+  const list = files ?? Object.keys(sprites ?? {}).sort();
+  for (const path of list) {
+    if (path && !paths.includes(path)) paths.push(path);
+  }
+  if (current && !paths.includes(current)) {
+    paths.splice(allowEmpty ? 1 : 0, 0, current);
+  }
+  return paths;
+}
+
+function placePopover(anchor, popover) {
+  const margin = 8;
+  const gap = 4;
+  const rect = anchor.getBoundingClientRect();
+  const box = popover.getBoundingClientRect();
+  const width = Math.min(Math.max(rect.width, 220), window.innerWidth - margin * 2);
+  let left = rect.left;
+  if (left + width > window.innerWidth - margin) {
+    left = Math.max(margin, window.innerWidth - width - margin);
+  }
+  let top = rect.bottom + gap;
+  if (top + box.height > window.innerHeight - margin) {
+    top = Math.max(margin, rect.top - gap - box.height);
+  }
+  return { top, left, width };
+}
+
+function SpritePickerPopover({ paths, current, sprites, anchorRef, onPick, onClose }) {
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(null);
+
+  useLayoutEffect(() => {
+    if (!anchorRef.current || !listRef.current) return undefined;
+    function place() {
+      setPos(placePopover(anchorRef.current, listRef.current));
+    }
+    place();
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    return () => {
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [anchorRef, paths.length]);
+
+  useEffect(() => {
+    function onKeyDown(event) {
+      if (event.key === 'Escape') onClose();
+    }
+    function onPointerDown(event) {
+      if (listRef.current?.contains(event.target) || anchorRef.current?.contains(event.target)) {
+        return;
+      }
+      onClose();
+    }
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('pointerdown', onPointerDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('pointerdown', onPointerDown);
+    };
+  }, [anchorRef, onClose]);
+
+  return (
+    <div
+      ref={listRef}
+      className={styles.spritePicker}
+      role="listbox"
+      aria-label="Sprite"
+      style={pos ?? { visibility: 'hidden' }}>
+      {paths.map((path) => {
+        const selected = path === current;
+        const name = displayNameOf(path);
+        return (
+          <button
+            key={path || '__none'}
+            type="button"
+            role="option"
+            aria-selected={selected}
+            aria-label={name}
+            className={cx(styles.spritePickerTile, selected && styles.spritePickerTileSelected)}
+            data-name={name}
+            onClick={() => onPick(path)}>
+            {path ? (
+              <ArtThumbnail art={sprites?.[path]} name={name} className={styles.spritePickerThumb} />
+            ) : (
+              <span className={cx(styles.bpSlotFallback, styles.spritePickerThumb)}>
+                <Icon name="times" />
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function SpriteField({
+  label,
+  value,
+  onChange,
+  sprites,
+  files,
+  allowEmpty = false,
+  overridden,
+  defaultValue,
+  onReset,
+}) {
+  const current = value ?? '';
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const paths = candidatePaths(files, sprites, current, allowEmpty);
+  const art = current ? sprites?.[current] : null;
+  const name = current ? displayNameOf(current) : '';
+
+  return (
+    <FieldRow
+      label={label}
+      overridden={overridden}
+      defaultValue={defaultValue ? displayNameOf(defaultValue) : defaultValue}
+      onReset={onReset}>
+      <button
+        ref={buttonRef}
+        type="button"
+        className={cx(styles.select, styles.fileField, styles.spriteField)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((next) => !next)}>
+        <ArtThumbnail art={art} className={styles.spriteFieldThumb} />
+        <span className={cx(styles.fileFieldLabel, !current && styles.fileFieldEmpty)}>
+          {current ? name : 'None'}
+        </span>
+      </button>
+      {open
+        ? createPortal(
+            <SpritePickerPopover
+              paths={paths}
+              current={current}
+              sprites={sprites}
+              anchorRef={buttonRef}
+              onPick={(path) => {
+                onChange(path);
+                setOpen(false);
+              }}
+              onClose={() => setOpen(false)}
+            />,
+            document.body
+          )
+        : null}
+    </FieldRow>
+  );
+}

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

@@ -465,6 +465,11 @@
   object-fit: contain;
 }
 
+/* Smooth / vector finish is supersampled — nearest-neighbour would re-blockify it. */
+.bpSlotThumbSmooth {
+  image-rendering: auto;
+}
+
 .bpSlotFallback {
   display: inline-flex;
   align-items: center;
@@ -1871,6 +1876,137 @@
   color: var(--castle-inspector-muted);
 }
 
+/* SpriteField: closed chrome carries a tiny thumb beside the basename so you
+   can see which art is selected without opening the picker. */
+.spriteField {
+  gap: 8px;
+  padding-left: 6px;
+  min-height: 32px;
+}
+
+.spriteFieldThumb {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  border-radius: 3px;
+}
+
+/* Anchored art grid — same shell family as FileField's path list, not a modal. */
+.spritePicker {
+  position: fixed;
+  z-index: 200;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
+  gap: 6px;
+  max-height: min(280px, calc(100vh - 16px));
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  padding: 8px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-workspace-bg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+  scrollbar-width: thin;
+}
+
+.spritePickerTile {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  aspect-ratio: 1;
+  padding: 4px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 6px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-text);
+  cursor: pointer;
+}
+
+.spritePickerTile:hover {
+  border-color: var(--castle-inspector-muted);
+}
+
+.spritePickerTileSelected,
+.spritePickerTileSelected:hover {
+  border-color: var(--castle-selected);
+  box-shadow: 0 0 0 1px var(--castle-selected);
+}
+
+/* Name without extension — hover only, so the grid stays pictures.
+   Anchored to the bottom of the tile (not above it) so the top row stays
+   readable and the scrollable picker never clips the label. */
+.spritePickerTile::after {
+  content: attr(data-name);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  padding: 3px 4px;
+  border-radius: 0 0 5px 5px;
+  background: rgba(0, 0, 0, 0.72);
+  color: var(--castle-text);
+  font-size: 10px;
+  line-height: 1.2;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.spritePickerTile:hover::after,
+.spritePickerTile:focus-visible::after {
+  opacity: 1;
+}
+
+.spritePickerThumb {
+  width: 100%;
+  height: 100%;
+  flex: 0 0 auto;
+  max-width: 44px;
+  max-height: 44px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+
+/* Picker tiles are larger than the belt's 36px slot — stretch the shared
+   ArtThumbnail chrome (canvas / blank-name / fallback) to fill the tile. */
+.spritePickerThumb.bpSlotArt,
+.spritePickerThumb .bpSlotThumb,
+.spritePickerThumb .bpSlotName,
+.spritePickerThumb .bpSlotFallback {
+  width: 100%;
+  height: 100%;
+  flex: none;
+  max-width: none;
+  max-height: none;
+}
+
+.spritePickerThumb .bpSlotName {
+  font-size: 9px;
+}
+
+.spriteFieldThumb.bpSlotArt,
+.spriteFieldThumb .bpSlotThumb,
+.spriteFieldThumb .bpSlotName,
+.spriteFieldThumb .bpSlotFallback {
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  max-width: none;
+  max-height: none;
+}
+
+.spriteFieldThumb .bpSlotName {
+  font-size: 5.5px;
+}
+
 .filePicker {
   position: fixed;
   z-index: 200;

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

@@ -216,6 +216,7 @@
       "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
       "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dnd-kit/accessibility": "^3.1.1",
         "@dnd-kit/utilities": "^3.2.2",
@@ -669,6 +670,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1129,6 +1131,7 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2438,6 +2441,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
       "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2447,6 +2451,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
       "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },

package/kits/physics-2d/pnpm-lock.yaml

@@ -23,18 +23,33 @@ importers:
       '@codemirror/view':
         specifier: ^6.41.1
         version: 6.43.1
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/modifiers':
+        specifier: ^9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@19.2.7)
       '@fortawesome/free-solid-svg-icons':
         specifier: ^5.15.4
         version: 5.15.4
       '@lezer/highlight':
         specifier: ^1.2.3
         version: 1.2.3
-      castle-web-sdk:
-        specifier: file:../../sdk
-        version: file:../../sdk
+      castle-web-fonts:
+        specifier: ^1.0.0
+        version: 1.0.0
       codemirror:
         specifier: ^6.0.2
         version: 6.0.2
+      matter-js:
+        specifier: ^0.20.0
+        version: 0.20.0
       react:
         specifier: ^19.2.4
         version: 19.2.7
@@ -42,6 +57,9 @@ importers:
         specifier: ^19.2.4
         version: 19.2.7(react@19.2.7)
     devDependencies:
+      castle-web-sdk:
+        specifier: file:../../sdk
+        version: file:../../sdk
       eslint:
         specifier: ^9.0.0
         version: 9.39.4
@@ -102,6 +120,34 @@ packages:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
 
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
   '@eslint-community/eslint-utils@4.9.1':
     resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -291,6 +337,9 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  castle-web-fonts@1.0.0:
+    resolution: {integrity: sha512-amFts4vVJjaXKNQkh2DMMmxYHafCYczAOvme70n+0WX8fsTqJACh6r6MzND94l89Q6LFoIyrCm+cLh3S1Usy0w==}
+
   castle-web-sdk@file:../../sdk:
     resolution: {directory: ../../sdk, type: directory}
 
@@ -624,6 +673,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  matter-js@0.20.0:
+    resolution: {integrity: sha512-iC9fYR7zVT3HppNnsFsp9XOoQdQN2tUyfaKg4CHLH8bN+j6GT4Gw7IH2rP0tflAebrHFw730RR3DkVSZRX8hwA==}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -836,6 +888,9 @@ packages:
   token-stream@1.0.0:
     resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -948,6 +1003,38 @@ snapshots:
   '@colors/colors@1.5.0':
     optional: true
 
+  '@dnd-kit/accessibility@3.1.1(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@19.2.7)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      tslib: 2.8.1
+
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.7)
+      react: 19.2.7
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.7)
+      react: 19.2.7
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+      tslib: 2.8.1
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4)':
     dependencies:
       eslint: 9.39.4
@@ -1149,6 +1236,8 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  castle-web-fonts@1.0.0: {}
+
   castle-web-sdk@file:../../sdk: {}
 
   chalk@4.1.2:
@@ -1514,6 +1603,8 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
+  matter-js@0.20.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -1729,6 +1820,8 @@ snapshots:
 
   token-stream@1.0.0: {}
 
+  tslib@2.8.1: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1

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

@@ -69,5 +69,5 @@
   "autoUpdateWhenImported": true,
   "deckId": "JH0SclbPVP0y",
   "cardId": "eXfAaUdbSU5A",
-  "publishedVersion": "2026-09-02T05:55:18.459Z"
+  "publishedVersion": "2026-09-05T00:07:37.655Z"
 }

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

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