castle-web-cli 0.4.182 → 0.4.184

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

@@ -3,7 +3,8 @@
 
 // The inspector's field widgets: one source for every place that edits a value
 // with them, so a param in the shell scrubs exactly like a behavior prop in a
-// kit's scene inspector.
+// kit's scene inspector. Text, number, checkbox, color, select and file, plus
+// the row chrome and the note line under a field.
 //
 // The canonical copy of this file is shared/fields/fields.tsx. Edit it there and
 // run `npm run sync:shared`: scripts/sync-shared.mjs copies it byte-for-byte to
@@ -14,7 +15,7 @@
 // The host supplies the --castle-* tokens the CSS reads. Anything portaled to
 // document.body leaves the host's tree, so a host whose tokens live on a panel
 // root names a class for the portal root through FieldsChrome.
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './fields.module.css';
 function cx(...parts) {
@@ -102,6 +103,12 @@ export function TextField({ value, onChange, ...row }) {
 function numberText(v) {
   return Number.isFinite(v) ? String(v) : '0';
 }
+// `0.08 s`. The space is a nbsp because a value and its unit are one token to
+// read and must never wrap apart.
+function UnitSuffix({ unit }) {
+  if (!unit) return null;
+  return <span className={styles.unitSuffix}>{`\u00a0${unit}`}</span>;
+}
 function clamp(v, min, max) {
   if (typeof min === 'number' && v < min) v = min;
   if (typeof max === 'number' && v > max) v = max;
@@ -124,7 +131,7 @@ const NUMPAD_GLYPH = {
 // minus on mobile (the native numpad has none, and there's no web API to add one).
 // The field has no <input>, so no native keyboard ever appears; this edits a draft
 // string and commits on Done / dismiss.
-function NumpadSheet({ label, value, min, max, onCommit, onClose }) {
+function NumpadSheet({ label, value, min, max, unit, onCommit, onClose }) {
   const [draft, setDraft] = useState(() => numberText(value));
   const pristineRef = useRef(true); // first digit replaces the seeded value
   function finish() {
@@ -169,6 +176,7 @@ function NumpadSheet({ label, value, min, max, onCommit, onClose }) {
             <span className={styles.numpadValueLabel}>{label}</span>
             <span className={styles.numpadValueNum}>
               {draft === '' || draft === '-' ? '0' : draft}
+              <UnitSuffix unit={unit} />
             </span>
           </div>
           <div className={styles.numpadGrid}>
@@ -256,7 +264,7 @@ function snapToStep(v, step) {
 function sliderRange(min, max) {
   return typeof min === 'number' && typeof max === 'number' && max > min ? { min, max } : null;
 }
-export function NumberField({ value, onChange, min, max, step = 1, ...row }) {
+export function NumberField({ value, onChange, min, max, step = 1, unit, ...row }) {
   const current = Number.isFinite(value) ? (value ?? 0) : 0;
   const range = sliderRange(min, max);
   // Drag-to-scrub is for every pointer, but what a plain CLICK/TAP opens differs:
@@ -366,6 +374,7 @@ export function NumberField({ value, onChange, min, max, step = 1, ...row }) {
           range ? styles.numberSlider : styles.numberGrip
         )}
         data-field="number"
+        data-slider={range ? '' : undefined}
         style={{ touchAction: 'pan-y' }}
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
@@ -389,7 +398,10 @@ export function NumberField({ value, onChange, min, max, step = 1, ...row }) {
             ⋮⋮
           </span>
         )}
-        <span className={styles.numberValue}>{numberText(current)}</span>
+        <span className={styles.numberValue}>
+          {numberText(current)}
+          <UnitSuffix unit={unit} />
+        </span>
       </div>
       {scrubPos ? (
         <Overlay>
@@ -398,6 +410,7 @@ export function NumberField({ value, onChange, min, max, step = 1, ...row }) {
             style={{ left: scrubPos.x, top: scrubPos.y - 40 }}
             aria-hidden="true">
             {numberText(current)}
+            <UnitSuffix unit={unit} />
           </div>
         </Overlay>
       ) : null}
@@ -407,6 +420,7 @@ export function NumberField({ value, onChange, min, max, step = 1, ...row }) {
           value={current}
           min={min}
           max={max}
+          unit={unit}
           onCommit={commit}
           onClose={() => setPadOpen(false)}
         />
@@ -438,6 +452,38 @@ export function CheckboxField({ checked, onChange, ...row }) {
     </FieldRow>
   );
 }
+function optionPair(option) {
+  if (typeof option === 'object') return { value: String(option.value), label: option.label };
+  return { value: String(option), label: String(option) };
+}
+// A select's value is a string in the DOM whatever the underlying type is; a
+// host that holds numbers converts on the way back out.
+export function SelectField({ value, onChange, options, ...row }) {
+  const current = value ?? '';
+  const listed = options.map(optionPair);
+  // A current value the options don't have is prepended rather than dropped: a
+  // select that renders blank for it reads as unset, and a stale or misspelled
+  // value is exactly the case where you need to see what it actually says.
+  const shown =
+    current === '' || listed.some((option) => option.value === current)
+      ? listed
+      : [{ value: current, label: current }, ...listed];
+  return (
+    <FieldRow {...row}>
+      <select
+        className={cx(styles.input, styles.select)}
+        data-field="select"
+        value={current}
+        onChange={(event) => onChange(event.target.value)}>
+        {shown.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </FieldRow>
+  );
+}
 // Explanatory text under a field, for a prop whose name doesn't carry its
 // meaning. Rendered inside the panel's field grid, so it lands under the control
 // rather than under the label.
@@ -473,3 +519,257 @@ function normalizeHex(value) {
   if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(raw)) return raw;
   return '#000000';
 }
+// ── file paths ───────────────────────────────────────────────────────────────
+// Which extensions are an image, a sound or a video. A browser fact rather than
+// any one kit's taxonomy -- the same kind the CLI's own unsupportedMedia list
+// holds -- so the host that asks for `file: 'image'` need not carry its own.
+export const FILE_KINDS = {
+  image: ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'],
+  audio: ['.mp3', '.wav', '.m4a'],
+  video: ['.mp4'],
+};
+export function isFileKind(path, kind) {
+  if (kind === 'any') return true;
+  const exts = FILE_KINDS[kind];
+  return exts ? exts.some((ext) => path.toLowerCase().endsWith(ext)) : false;
+}
+/** Which kind a path is, or null for a file that is none of them. */
+export function mediaKindOf(path) {
+  for (const kind of Object.keys(FILE_KINDS)) {
+    if (isFileKind(path, kind)) return kind;
+  }
+  return null;
+}
+function basenameOf(path) {
+  if (!path) return '';
+  return path.slice(path.lastIndexOf('/') + 1);
+}
+let measureCanvasCtx = null;
+function measureTextWidth(text, font) {
+  if (!measureCanvasCtx) {
+    measureCanvasCtx = document.createElement('canvas').getContext('2d');
+  }
+  if (!measureCanvasCtx) return 0;
+  measureCanvasCtx.font = font;
+  return measureCanvasCtx.measureText(text).width;
+}
+// `getComputedStyle().font` is empty in some browsers; rebuild it when it is.
+function fontOf(style) {
+  return style.font && style.font !== '0px'
+    ? style.font
+    : `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+}
+// Keep the filename intact; the directory is what yields. Binary-search the
+// prefix of the directory until `{prefix}…/{basename}` fits `maxWidth`.
+function fitPathKeepBasename(path, maxWidth, font) {
+  const measure = (text) => measureTextWidth(text, font);
+  if (maxWidth <= 0 || measure(path) <= maxWidth) return path;
+  const slash = path.lastIndexOf('/');
+  const dir = slash > 0 ? path.slice(0, slash) : '';
+  const base = slash > 0 ? path.slice(slash + 1) : path;
+  const ellipsed = `…/${base}`;
+  if (!dir || measure(ellipsed) > maxWidth) return fitKeepEnd(base, maxWidth, measure);
+  let lo = 0;
+  let hi = dir.length;
+  let best = ellipsed;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    const candidate = `${dir.slice(0, mid)}…/${base}`;
+    if (measure(candidate) <= maxWidth) {
+      best = candidate;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return best;
+}
+function fitKeepEnd(text, maxWidth, measure) {
+  if (measure(text) <= maxWidth) return text;
+  if (measure('…') > maxWidth) return '';
+  let lo = 0;
+  let hi = text.length;
+  let best = '…';
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    const candidate = `…${text.slice(text.length - mid)}`;
+    if (measure(candidate) <= maxWidth) {
+      best = candidate;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return best;
+}
+function FilePathLabel({ path }) {
+  const ref = useRef(null);
+  const [shown, setShown] = useState(path);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return undefined;
+    function fit() {
+      const max = node.clientWidth;
+      if (max <= 0) return;
+      setShown(fitPathKeepBasename(path, max, fontOf(getComputedStyle(node))));
+    }
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [path]);
+  return (
+    <span ref={ref} className={styles.filePickerPath} title={path}>
+      {shown}
+    </span>
+  );
+}
+function pickerRowChrome(list) {
+  if (!list) return 26;
+  const box = getComputedStyle(list);
+  const opt = list.querySelector('button');
+  const op = opt ? getComputedStyle(opt) : null;
+  return (
+    (parseFloat(box.paddingLeft) || 0) +
+    (parseFloat(box.paddingRight) || 0) +
+    (parseFloat(box.borderLeftWidth) || 0) +
+    (parseFloat(box.borderRightWidth) || 0) +
+    (op ? (parseFloat(op.paddingLeft) || 0) + (parseFloat(op.paddingRight) || 0) : 16)
+  );
+}
+function longestPathWidth(list, paths) {
+  if (!list || !paths.length) return 0;
+  const probe = document.createElement('span');
+  probe.style.cssText = 'position:absolute;left:-9999px;white-space:nowrap;pointer-events:none;';
+  const opt = list.querySelector('button');
+  if (opt) probe.style.font = fontOf(getComputedStyle(opt));
+  list.appendChild(probe);
+  let max = 0;
+  for (const path of paths) {
+    probe.textContent = path || 'None';
+    max = Math.max(max, probe.offsetWidth);
+  }
+  probe.remove();
+  return max;
+}
+// Place a body-portaled popover now and again on every resize or scroll, so it
+// keeps to its anchor. Scroll is captured because it doesn't bubble, and the
+// anchor can sit in any scrolling ancestor. Returns the cleanup.
+export function followAnchor(place) {
+  place();
+  window.addEventListener('resize', place);
+  window.addEventListener('scroll', place, true);
+  return () => {
+    window.removeEventListener('resize', place);
+    window.removeEventListener('scroll', place, true);
+  };
+}
+// File path field. Closed chrome shows the basename; the open list shows full
+// paths. Callers pass the candidate paths — this does not decide what a sprite
+// or sound is. `allowEmpty` adds a None row that writes ''.
+export function FileField({ value, onChange, files = [], allowEmpty = false, ...row }) {
+  const current = value ?? '';
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  const paths = [];
+  if (allowEmpty) paths.push('');
+  for (const path of files) {
+    if (path && !paths.includes(path)) paths.push(path);
+  }
+  if (current && !paths.includes(current)) paths.splice(allowEmpty ? 1 : 0, 0, current);
+  useLayoutEffect(() => {
+    if (!open || !buttonRef.current) return undefined;
+    function place() {
+      const anchor = buttonRef.current.getBoundingClientRect();
+      const list = listRef.current;
+      const margin = 8;
+      const maxWidth = window.innerWidth - margin * 2;
+      const needed = longestPathWidth(list, paths) + pickerRowChrome(list) + 4;
+      const width = Math.min(Math.max(needed, anchor.width), maxWidth);
+      // Grow left from the field if the paths need more than the control width.
+      let left = anchor.right - width;
+      if (left < margin) left = margin;
+      if (left + width > window.innerWidth - margin) {
+        left = Math.max(margin, window.innerWidth - width - margin);
+      }
+      const gap = 4;
+      const height = list?.getBoundingClientRect().height ?? 0;
+      let top = anchor.bottom + gap;
+      if (height && top + height > window.innerHeight - margin) {
+        top = Math.max(margin, anchor.top - gap - height);
+      }
+      setPos({ top, left, width });
+    }
+    return followAnchor(place);
+  }, [open, paths.length]);
+  useEffect(() => {
+    if (!open) return undefined;
+    function onKeyDown(event) {
+      if (event.key === 'Escape') setOpen(false);
+    }
+    function onPointerDown(event) {
+      const target = event.target;
+      if (listRef.current?.contains(target) || buttonRef.current?.contains(target)) return;
+      setOpen(false);
+    }
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('pointerdown', onPointerDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('pointerdown', onPointerDown);
+    };
+  }, [open]);
+  return (
+    <FieldRow
+      {...row}
+      defaultValue={row.defaultValue ? basenameOf(String(row.defaultValue)) : row.defaultValue}>
+      <button
+        ref={buttonRef}
+        type="button"
+        className={cx(styles.input, styles.select, styles.fileField)}
+        data-field="file"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((next) => !next)}>
+        <span className={cx(styles.fileFieldLabel, !current && styles.fileFieldEmpty)}>
+          {current ? basenameOf(current) : 'None'}
+        </span>
+      </button>
+      {open ? (
+        <Overlay>
+          <div
+            ref={listRef}
+            className={styles.filePicker}
+            role="listbox"
+            aria-label={row.label}
+            style={pos ?? { visibility: 'hidden' }}>
+            {paths.map((path) => {
+              const selected = path === current;
+              return (
+                <button
+                  key={path || '__none'}
+                  type="button"
+                  role="option"
+                  aria-selected={selected}
+                  className={cx(
+                    styles.filePickerOption,
+                    selected && styles.filePickerOptionSelected,
+                    !path && styles.fileFieldEmpty
+                  )}
+                  title={path || 'None'}
+                  onClick={() => {
+                    onChange(path);
+                    setOpen(false);
+                  }}>
+                  {path ? <FilePathLabel path={path} /> : 'None'}
+                </button>
+              );
+            })}
+          </div>
+        </Overlay>
+      ) : null}
+    </FieldRow>
+  );
+}

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

@@ -15,11 +15,14 @@
   margin-bottom: 0;
 }
 
+/* `MAX_ENEMY_SPEED` is a single unbreakable token to the line breaker -- no
+   space, and an underscore is not a break opportunity -- so a long param name
+   has to be allowed to break mid-word or it overflows the label column. */
 .fieldLabel {
   color: var(--castle-inspector-text);
   font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 /* Instance override: purple label + input border, plus a "Default: X [Reset]"
@@ -110,6 +113,18 @@
   font: inherit;
 }
 
+/* Worn with .input, which carries the box; this is only what makes it a select:
+   the native chrome off and our own arrow in its place. */
+.select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 26px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23888888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  text-overflow: ellipsis;
+}
+
 .numberField {
   position: relative;
   width: 100%;
@@ -156,6 +171,10 @@
   font-variant-numeric: tabular-nums;
 }
 
+.unitSuffix {
+  color: var(--castle-inspector-muted);
+}
+
 .scrubGrip {
   position: relative;
   z-index: 1;
@@ -325,3 +344,63 @@
 .checkboxOn .checkboxMark {
   display: block;
 }
+
+/* The file picker's closed chrome wears .input and .select as well; this is the
+   part that makes it a button rather than a box with text in it. */
+.fileField {
+  display: flex;
+  align-items: center;
+  font: inherit;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.fileFieldLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileFieldEmpty {
+  color: var(--castle-inspector-muted);
+}
+
+.filePicker {
+  position: fixed;
+  z-index: 200;
+  box-sizing: border-box;
+  max-height: min(240px, calc(100vh - 16px));
+  overflow: auto;
+  padding: 4px;
+  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);
+}
+
+.filePickerOption {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-align: left;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--castle-inspector-text);
+  font: inherit;
+  font-size: 13px;
+  padding: 6px 8px;
+  cursor: pointer;
+}
+
+.filePickerPath {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.filePickerOption:hover,
+.filePickerOptionSelected {
+  background: var(--castle-inspector-input-bg);
+}

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

@@ -5,7 +5,7 @@ import {
   pickerPageIndexFor,
   pickerPagesFor,
 } from './palettes';
-import { cx, FieldRow, followAnchor, IconButton, styles } from './ui';
+import { cx, FieldRow, fieldStyles, followAnchor, IconButton, styles } from './ui';
 import { attachDismissListeners } from './popoverDismiss';
 
 export function sameHex(a, b) {
@@ -180,7 +180,12 @@ export function PaletteColorField({
       <button
         ref={buttonRef}
         type="button"
-        className={cx(styles.select, styles.fileField, styles.paletteColorField)}
+        className={cx(
+          fieldStyles.input,
+          fieldStyles.select,
+          fieldStyles.fileField,
+          styles.paletteColorField
+        )}
         aria-haspopup="dialog"
         aria-expanded={open}
         onClick={() => setOpen((next) => !next)}>
@@ -200,7 +205,7 @@ export function PaletteColorField({
                 }
           }
         />
-        <span className={cx(styles.fileFieldLabel, !current && styles.fileFieldEmpty)}>
+        <span className={cx(fieldStyles.fileFieldLabel, !current && fieldStyles.fileFieldEmpty)}>
           {current || 'None'}
         </span>
       </button>

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ArtThumbnail } from './artThumbnail';
-import { cx, FieldRow, followAnchor, Icon, styles } from './ui';
+import { cx, FieldRow, fieldStyles, followAnchor, Icon, styles } from './ui';
 import { attachDismissListeners } from './popoverDismiss';
 
 // Visual sprite / image picker for inspector fields that point at art files.
@@ -124,12 +124,12 @@ export function SpriteField({
       <button
         ref={buttonRef}
         type="button"
-        className={cx(styles.select, styles.fileField, styles.spriteField)}
+        className={cx(fieldStyles.input, fieldStyles.select, fieldStyles.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)}>
+        <span className={cx(fieldStyles.fileFieldLabel, !current && fieldStyles.fileFieldEmpty)}>
           {current ? name : 'None'}
         </span>
       </button>