castle-web-cli 0.4.166 → 0.4.168

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';
 }

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"
       },