castle-web-cli 0.4.166 → 0.4.167

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Panel, SelectField, NumberField, CheckboxField, Button, FileField } from '../engine/ui';
+import { Panel, SelectField, NumberField, CheckboxField, Button } from '../engine/ui';
+import { SpriteField } from '../engine/spriteField';
 import { centerOf, inActorWorldSpace } from '../engine/physics/controls';
 import { JOINT_TYPES } from '../engine/physics/joints';
 import { drawJointArt } from '../engine/physics/jointArt';
@@ -75,9 +76,12 @@ export class Joints {
     });
   }
 
-  static Inspector({ component, setComponent, override, beginPick, pickActive, files }) {
+  static Inspector({ component, setComponent, override, beginPick, pickActive, sprites }) {
     const list = Array.isArray(component.list) ? component.list : [];
-    const spriteFiles = Object.keys(files ?? {}).filter((f) => f.endsWith('.sprite') || f.endsWith('.pxart'));
+    // Joint art is drawings-only (tile/stretch along a link); images stay out.
+    const spriteFiles = Object.keys(sprites ?? {})
+      .filter((f) => f.endsWith('.sprite') || f.endsWith('.pxart'))
+      .sort();
     // Which entry's target-pick is live. Combined with the editor's global
     // `pickActive` so a cancel (Esc/empty click) clears every entry's state.
     const [pickingIndex, setPickingIndex] = useState(null);
@@ -95,6 +99,7 @@ export class Joints {
             key={i}
             index={i}
             joint={joint}
+            sprites={sprites}
             spriteFiles={spriteFiles}
             active={pickActive && pickingIndex === i}
             onPickToggle={() => onPickToggle(i)}
@@ -114,7 +119,7 @@ function defaultJoint() {
 
 // One editable link in the list: type, target picker, type-specific fields, and
 // how it renders in play (line / hidden / sprite art along the joint).
-function JointEntry({ index, joint, spriteFiles, active, onPickToggle, onPatch, onRemove }) {
+function JointEntry({ index, joint, sprites, spriteFiles, active, onPickToggle, onPatch, onRemove }) {
   const [showAnchors, setShowAnchors] = useState(false);
   const type = joint.type ?? 'spring';
   const isPivot = type === 'weld';
@@ -180,10 +185,11 @@ function JointEntry({ index, joint, spriteFiles, active, onPickToggle, onPatch,
       <SelectField label="Show in play" value={render} onChange={(v) => onPatch({ render: v })} options={RENDER_MODES} />
       {render === 'sprite' ? (
         <>
-          <FileField
+          <SpriteField
             label="Art"
             value={joint.sprite || ''}
             onChange={(v) => onPatch({ sprite: v })}
+            sprites={sprites}
             files={spriteFiles}
             allowEmpty
           />

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

@@ -1,10 +1,10 @@
 import { resolveDeckFile } from 'castle-web-sdk';
 import React from 'react';
-import { artFrameCount, isImageArt, renderArtFrame } from '../engine/art';
+import { artFrameCount, isImageArt, renderDisplayFrame } from '../engine/art';
 import { isVectorRenderer } from '../engine/pxart';
-import { renderSmoothCompositeFrame, renderSmoothSpriteFrame } from '../engine/pxartSmooth';
 import { spriteDestRect } from '../engine/spriteGeometry';
-import { FileField, Panel, SelectField } from '../engine/ui';
+import { Panel, SelectField } from '../engine/ui';
+import { SpriteField } from '../engine/spriteField';
 import { AutoFields, overrideProps } from '../engine/autoInspector';
 import { parseTint, tintCanvas } from './tint';
 
@@ -166,14 +166,13 @@ export class Sprite {
   }
 
   static Inspector({ component, setComponent, sprites, override }) {
-    const spriteFiles = getSpriteFiles(sprites);
     return (
       <Panel title="Sprite" overridden={override?.anyOverridden()}>
-        <FileField
+        <SpriteField
           label="File"
           value={component.file}
           onChange={(file) => setComponent({ file })}
-          files={spriteFiles}
+          sprites={sprites}
           {...overrideProps(override, 'file')}
         />
         <SelectField
@@ -270,15 +269,7 @@ const MAX_CACHE_LONG_SIDE = 2048;
 function frameSource(sprite, frameIndex) {
   if (isImageArt(sprite)) return sprite.ready ? sprite.image : null;
   const canvas = document.createElement('canvas');
-  if (isVectorRenderer(sprite.renderer)) {
-    renderSmoothCompositeFrame(sprite, frameIndex, canvas);
-    return canvas;
-  }
-  if (sprite.cornerRadius > 0) {
-    renderSmoothSpriteFrame(sprite, frameIndex, canvas, { cornerRadius: sprite.cornerRadius });
-    return canvas;
-  }
-  return renderArtFrame(sprite, frameIndex, canvas) ? canvas : null;
+  return renderDisplayFrame(sprite, frameIndex, canvas) ? canvas : null;
 }
 
 function sourceSize(source) {
@@ -431,9 +422,3 @@ function advanceAnim(state, sprite, sequence, tag, dt) {
   }
   state.frameIndex = sequence[state.pos];
 }
-
-// Everything the deck can point a Sprite at: `.pxart` drawings and image files
-// alike, which is exactly what the resolved art map holds.
-function getSpriteFiles(sprites) {
-  return Object.keys(sprites ?? {}).sort();
-}

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

@@ -63,66 +63,6 @@
         "icon": "file",
         "editor": "kit",
         "data": true
-      },
-      {
-        "ext": ".png",
-        "label": "Image",
-        "icon": "image",
-        "editor": "kit"
-      },
-      {
-        "ext": ".jpg",
-        "label": "Image",
-        "icon": "image",
-        "editor": "kit"
-      },
-      {
-        "ext": ".jpeg",
-        "label": "Image",
-        "icon": "image",
-        "editor": "kit"
-      },
-      {
-        "ext": ".gif",
-        "label": "Image",
-        "icon": "image",
-        "editor": "kit"
-      },
-      {
-        "ext": ".webp",
-        "label": "Image",
-        "icon": "image",
-        "editor": "kit"
-      },
-      {
-        "ext": ".svg",
-        "label": "Image",
-        "icon": "image",
-        "editor": "kit"
-      },
-      {
-        "ext": ".mp3",
-        "label": "Audio",
-        "icon": "music",
-        "editor": "kit"
-      },
-      {
-        "ext": ".wav",
-        "label": "Audio",
-        "icon": "music",
-        "editor": "kit"
-      },
-      {
-        "ext": ".m4a",
-        "label": "Audio",
-        "icon": "music",
-        "editor": "kit"
-      },
-      {
-        "ext": ".mp4",
-        "label": "Video",
-        "icon": "film",
-        "editor": "kit"
       }
     ],
     "defaultPlayFile": "scenes/main.scene"
@@ -132,7 +72,7 @@
   "main": "main.jsx",
   "autoUpdateWhenImported": true,
   "title": "physics-2d",
-  "publishedVersion": "2026-09-04T18:30:34.333Z",
+  "publishedVersion": "2026-09-05T00:07:35.112Z",
   "imports": {
     "castle.base": {
       "deckId": "yRcmH4_aYllE",

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { isImageArt, onArtLoaded, renderArtFrame } from '../engine/art';
+import React, { useRef, useState } from 'react';
+import { ArtThumbnail } from '../engine/artThumbnail';
 import { screenToCard } from '../engine/scene';
 import { countBlueprintInstances, listBlueprints } from '../engine/blueprint';
 import { ConfirmDialog, ContextMenu, cx, Icon, styles, useWheelToHorizontal } from '../engine/ui';
@@ -235,77 +235,17 @@ function BlueprintDragPreview({ preview, sprites }) {
   );
 }
 
-// Asked of the CANVAS, not the source art: counting non-transparent grid chars
-// would call a path-drawn sprite blank. Skipped for image art, whose native
-// resolution is whatever was uploaded.
-function rendersNothing(sprite, canvas) {
-  if (isImageArt(sprite)) return false;
-  try {
-    const ctx = canvas.getContext('2d', { willReadFrequently: true });
-    const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
-    for (let i = 3; i < data.length; i += 4) if (data[i] !== 0) return false;
-    return true;
-  } catch {
-    // Tainted or zero-sized canvas: assume it draws something rather than
-    // mislabeling real art as blank.
-    return false;
-  }
-}
-
-// A blueprint's slot art, falling back to its NAME when there is nothing to
-// show -- no Sprite, a file that doesn't resolve, or art that is entirely
-// transparent (a "Draw new" sprite nobody has drawn in yet). Without it a belt
-// of not-yet-drawn actors is a row of identical placeholders.
-// `showName={false}` for callers that already print the name right beside the
-// thumbnail (the creation modal's tiles) -- otherwise a sprite-less blueprint
-// renders its name inside the tile AND under it, reading as "GoalGoal".
+// A blueprint's slot art — delegates to ArtThumbnail so the belt and the
+// sprite picker share blank-name fallback. `showName={false}` for callers that
+// already print the name right beside the thumbnail (the creation modal's
+// tiles) -- otherwise a sprite-less blueprint renders its name inside the tile
+// AND under it, reading as "GoalGoal".
 export function BlueprintThumbnail({ blueprint, sprites, preview = false, showName = true }) {
-  const canvasRef = useRef(null);
   const spritePath = blueprint.components?.Sprite?.file;
   const sprite = spritePath ? sprites?.[spritePath] : null;
-  // Thumbnails draw on change, not on a frame loop, so an image that finishes
-  // decoding after this rendered has to say so or the slot stays blank.
-  const [loadTick, setLoadTick] = useState(0);
-  const [blank, setBlank] = useState(false);
-  useEffect(() => onArtLoaded(() => setLoadTick((tick) => tick + 1)), []);
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || !sprite) return;
-    const drew = renderArtFrame(sprite, 0, canvas);
-    // `false` means "not here yet" (an image still loading), not blank.
-    if (drew !== false) setBlank(rendersNothing(sprite, canvas));
-  }, [sprite, loadTick]);
   const name = showName && typeof blueprint.name === 'string' ? blueprint.name.trim() : '';
-  // The canvas stays mounted underneath, so art arriving later clears this.
-  // The inner span is load-bearing, not decoration: bare text inside a flex
-  // container becomes an anonymous item sized to max-content, so it never
-  // "overflows a line" and `overflow-wrap` never fires -- a long single-word
-  // name silently clipped at both edges instead of wrapping. A real child can
-  // be held to the box's width, which is what gives the wrap something to
-  // break against.
-  const label = name ? (
-    <span className={cx(styles.bpSlotName, preview && styles.bpSlotNamePreview)} title={name}>
-      <span className={styles.bpSlotNameText}>{name}</span>
-    </span>
-  ) : (
-    <span className={styles.bpSlotFallback}>
-      <Icon name="clone" />
-    </span>
-  );
-  if (!sprite) return label;
   return (
-    <span className={styles.bpSlotArt}>
-      <canvas
-        ref={canvasRef}
-        className={cx(
-          styles.bpSlotThumb,
-          preview && styles.bpPreviewThumb,
-          blank && styles.bpSlotThumbHidden
-        )}
-        aria-hidden="true"
-      />
-      {blank ? label : null}
-    </span>
+    <ArtThumbnail art={sprite} name={name} preview={preview} fallbackIcon="clone" />
   );
 }
 

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

@@ -27,8 +27,6 @@ import { hasEditorModule, loadEditorModule } from './editorRegistry';
 import { useLiveDeckFiles } from '../engine/liveReload';
 import { collectAssets } from '../engine/assets';
 import { MainEditor, styles } from '../engine/ui';
-import { ImageViewer } from './ImageViewer';
-import { MediaPlayer } from './MediaPlayer';
 import { PxArtEditor } from './PxArtEditor';
 import { SceneEditor } from './SceneEditor';
 import { StyleEditor } from './StyleEditor';
@@ -321,15 +319,10 @@ export function SingleEditor({ path, editor, editorModule }) {
         readOnly={readOnly}
       />
     );
-  } else if (kind === 'image') {
-    // Viewers read their file's BYTES over the serve, not the text file map --
-    // `files` holds source, and an image decoded as utf-8 is nothing.
-    body = <ImageViewer path={path} />;
-  } else if (kind === 'audio' || kind === 'video') {
-    body = <MediaPlayer path={path} kind={kind} />;
   }
-  // No `else`: code/text files are handled by the builtin shell code editor, so
-  // the shell never routes them here. `body` stays null for any other kind.
+  // Image / audio / video are declared by castle.base and land in the
+  // DeclaredEditor branch above via editorModule. No `else`: code/text files
+  // are handled by the builtin shell code editor.
   return (
     <div className={styles.panelBare} style={{ position: 'relative' }}>
       <MainEditor>{body}</MainEditor>

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

@@ -9,6 +9,8 @@
 //
 // Editors live under `editors/` by convention; that is what makes a third
 // party's editor reachable from here without this kit knowing it exists.
+import { createElement, useEffect, useRef } from 'react';
+
 const modules = {
   ...import.meta.glob('/imports/*/editors/**/*.{jsx,js}'),
   ...import.meta.glob('/imports/*/code/editors/**/*.{jsx,js}'),
@@ -20,7 +22,35 @@ export function hasEditorModule(path) {
   return Boolean(path && modules[`/${path}`]);
 }
 
-// Load one, returning its default export. Throws a legible error rather than
+// Base-kit (and bare-deck) editors default-export `mount(el, props)`. This kit's
+// DeclaredEditor expects a React component. Arity distinguishes them: a mount
+// takes the host element first; a React editor takes props only.
+function wrapMountEditor(mount) {
+  return function MountEditorBridge(props) {
+    const ref = useRef(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useEffect(() => {
+      const node = ref.current;
+      if (!node) return undefined;
+      node.textContent = '';
+      // Mount once per open file. Callers that need live prop updates should
+      // read them themselves; remounting on every onChange identity would wipe
+      // viewers that hold zoom/pan state.
+      const cleanup = mount(node, propsRef.current);
+      return () => {
+        if (typeof cleanup === 'function') cleanup();
+        else node.textContent = '';
+      };
+    }, [props.path, mount]);
+    return createElement('div', {
+      ref,
+      style: { display: 'flex', flex: 1, width: '100%', height: '100%', minHeight: 0 },
+    });
+  };
+}
+
+// Load one, returning a React component. Throws a legible error rather than
 // letting the caller see `undefined is not a function` three frames later.
 export async function loadEditorModule(path) {
   const load = modules[`/${path}`];
@@ -30,7 +60,11 @@ export async function loadEditorModule(path) {
     );
   }
   const mod = await load();
-  const Editor = mod.default ?? mod.Editor;
+  const Editor = mod.default ?? mod.Editor ?? mod.mount;
   if (!Editor) throw new Error(`"${path}" has no default export to render as an editor.`);
+  // Mount editors (base kit): (el, props) => void|cleanup. React editors: (props) => node.
+  if (typeof Editor === 'function' && Editor.length >= 2) {
+    return wrapMountEditor(Editor);
+  }
   return Editor;
 }

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

@@ -11,7 +11,8 @@
 // really do differ -- rendering a frame, and how many frames there are -- are
 // `renderArtFrame` / `artFrameCount` here.
 
-import { frameCount, renderSpriteFrame } from './pxart';
+import { displayFinish, frameCount, renderSpriteFrame } from './pxart';
+import { renderSmoothCompositeFrame, renderSmoothSpriteFrame } from './pxartSmooth';
 
 // An image is one frame, held for as long as anyone asks (a still).
 const STILL_FRAME = Object.freeze({ durationMs: 0 });
@@ -89,6 +90,10 @@ export function artFrameCount(art) {
 // Draw one frame into `canvas` at the art's native resolution, resizing it to
 // match. Returns false when there was nothing to draw yet (an image still
 // loading), so callers don't cache the blank result.
+//
+// Pixel finish only — 1px/cell. Prefer `renderDisplayFrame` anywhere the art
+// is shown to a person (belt, picker, scene), so Smooth / vector sprites keep
+// their finish instead of looking blocky.
 export function renderArtFrame(art, frameIndex, canvas) {
   if (!isImageArt(art)) {
     renderSpriteFrame(art, frameIndex, canvas);
@@ -103,3 +108,22 @@ export function renderArtFrame(art, frameIndex, canvas) {
   ctx.drawImage(art.image, 0, 0);
   return true;
 }
+
+// Same contract as `renderArtFrame`, but honours the sprite's display finish
+// (vector / rounded corners → supersampled smooth render). Use this for any
+// on-screen thumbnail or blit that should match what Sprite draws in the scene.
+export function renderDisplayFrame(art, frameIndex, canvas) {
+  if (isImageArt(art)) return renderArtFrame(art, frameIndex, canvas);
+  if (!art) return false;
+  const finish = displayFinish(art);
+  if (finish.vector) {
+    renderSmoothCompositeFrame(art, frameIndex, canvas);
+    return true;
+  }
+  if (finish.cornerRadius > 0) {
+    renderSmoothSpriteFrame(art, frameIndex, canvas, { cornerRadius: finish.cornerRadius });
+    return true;
+  }
+  renderSpriteFrame(art, frameIndex, canvas);
+  return true;
+}

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

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { isImageArt, onArtLoaded, renderDisplayFrame } from './art';
+import { displayFinish } from './pxart';
+import { cx, Icon, styles } from './ui';
+
+// Asked of the CANVAS, not the source art: counting non-transparent grid chars
+// would call a path-drawn sprite blank. Skipped for image art, whose native
+// resolution is whatever was uploaded.
+export function artRendersNothing(art, canvas) {
+  if (isImageArt(art)) return false;
+  try {
+    // Must match the options the render path already used to create the
+    // context. Asking for `{ willReadFrequently: true }` after a plain
+    // `getContext('2d')` returns null in browsers, and the catch below would
+    // then treat every transparent sprite as "has art" — blank names never
+    // appear in the belt or the picker.
+    const ctx = canvas.getContext('2d');
+    if (!ctx || canvas.width < 1 || canvas.height < 1) return true;
+    const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    for (let i = 3; i < data.length; i += 4) if (data[i] !== 0) return false;
+    return true;
+  } catch {
+    // Tainted canvas: assume it draws something rather than mislabeling real
+    // art as blank.
+    return false;
+  }
+}
+
+// Shared art thumb used by the blueprint belt and the sprite picker. Falls
+// back to `name` when there is no art, or the art is entirely transparent
+// (a "Draw new" sprite nobody has drawn in yet) — same treatment the belt
+// has always given undrawn blueprints.
+//
+// `className` sizes the outer slot (belt defaults to 36px via CSS; the picker
+// stretches it to fill its tile). `fallbackIcon` is what shows when there is
+// neither art nor a name (`clone` on the belt, `image` in the picker).
+export function ArtThumbnail({
+  art,
+  name = '',
+  className,
+  preview = false,
+  fallbackIcon = 'image',
+}) {
+  const canvasRef = useRef(null);
+  const [loadTick, setLoadTick] = useState(0);
+  const [blank, setBlank] = useState(false);
+  useEffect(() => onArtLoaded(() => setLoadTick((tick) => tick + 1)), []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !art) return;
+    const drew = renderDisplayFrame(art, 0, canvas);
+    // `false` means "not here yet" (an image still loading), not blank.
+    if (drew !== false) setBlank(artRendersNothing(art, canvas));
+  }, [art, loadTick]);
+
+  // The inner span is load-bearing, not decoration: bare text inside a flex
+  // container becomes an anonymous item sized to max-content, so it never
+  // "overflows a line" and `overflow-wrap` never fires -- a long single-word
+  // name silently clipped at both edges instead of wrapping. A real child can
+  // be held to the box's width, which is what gives the wrap something to
+  // break against.
+  const label = name ? (
+    <span className={cx(styles.bpSlotName, preview && styles.bpSlotNamePreview)} title={name}>
+      <span className={styles.bpSlotNameText}>{name}</span>
+    </span>
+  ) : (
+    <span className={styles.bpSlotFallback}>
+      <Icon name={fallbackIcon} />
+    </span>
+  );
+
+  if (!art) {
+    return className ? <span className={className}>{label}</span> : label;
+  }
+
+  const smooth = displayFinish(art).smooth;
+  return (
+    <span className={cx(styles.bpSlotArt, className)}>
+      <canvas
+        ref={canvasRef}
+        className={cx(
+          styles.bpSlotThumb,
+          smooth && styles.bpSlotThumbSmooth,
+          preview && styles.bpPreviewThumb,
+          blank && styles.bpSlotThumbHidden
+        )}
+        aria-hidden="true"
+      />
+      {blank ? label : null}
+    </span>
+  );
+}

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

@@ -117,26 +117,15 @@ export function mediaFilesOfKind(kind) {
   const matches = { image: isImageFile, audio: isAudioFile, video: isVideoFile }[kind];
   return Object.keys(initialMedia).filter((path) => matches(path));
 }
-// Which editor a file opens in. The image / audio kinds are VIEWERS -- an
-// uploaded asset is content this kit shows but doesn't edit (art you can edit is
-// `.pxart`). Each extension gets its own line: the serve parses this function to
-// learn which extensions the kit owns an editor for, and only matches one
-// `endsWith` per `return`.
+// 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
+// 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('.png')) return 'image';
-  if (path.endsWith('.jpg')) return 'image';
-  if (path.endsWith('.jpeg')) return 'image';
-  if (path.endsWith('.gif')) return 'image';
-  if (path.endsWith('.webp')) return 'image';
-  if (path.endsWith('.svg')) return 'image';
-  if (path.endsWith('.mp3')) return 'audio';
-  if (path.endsWith('.wav')) return 'audio';
-  if (path.endsWith('.m4a')) return 'audio';
-  if (path.endsWith('.mp4')) return 'video';
   if (path.endsWith('.js') || path.endsWith('.jsx')) return 'code';
   return 'text';
 }