npm - castle-web-cli - Versions diffs - 0.4.183 → 0.4.185 - Mend

castle-web-cli 0.4.183 → 0.4.185

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/agent-failures.d.ts +1 -0
package/dist/agent-failures.js +31 -4
package/dist/agent-prompts.d.ts +0 -3
package/dist/agent-prompts.js +14 -28
package/dist/agent.d.ts +1 -13
package/dist/agent.js +191 -938
package/dist/byo-accounts.d.ts +4 -4
package/dist/byo-accounts.js +17 -38
package/dist/byo-auth.d.ts +2 -5
package/dist/byo-auth.js +4 -52
package/dist/byo-login.d.ts +4 -5
package/dist/byo-login.js +28 -56
package/dist/mcpPlaytest.js +1 -2
package/dist/metering.d.ts +35 -23
package/dist/metering.js +57 -52
package/dist/openrouter-catalog.d.ts +0 -1
package/dist/openrouter-catalog.js +0 -11
package/dist/platformDoc.d.ts +1 -1
package/dist/platformDoc.js +9 -12
package/dist/serve.js +3 -5
package/dist/shell/assets/index-BHWfx7Tz.css +1 -0
package/dist/shell/assets/index-BMu42DTS.js +449 -0
package/dist/shell/index.html +2 -2
package/kits/physics-2d/CLAUDE.md +5 -1
package/kits/physics-2d/castle.json +1 -1
package/kits/physics-2d/editors/SceneEditor.jsx +2 -1
package/kits/physics-2d/engine/autoInspector.jsx +32 -3
package/kits/physics-2d/engine/fields/fields.jsx +305 -5
package/kits/physics-2d/engine/fields/fields.module.css +76 -0
package/kits/physics-2d/engine/paletteField.jsx +8 -3
package/kits/physics-2d/engine/spriteField.jsx +3 -3
package/kits/physics-2d/engine/ui.jsx +5 -277
package/kits/physics-2d/engine/ui.module.css +0 -69
package/package.json +1 -1
package/dist/shell/assets/index-DnNy-Z5u.js +0 -447
package/dist/shell/assets/index-cdsH2lna.css +0 -1

package/dist/shell/index.html CHANGED Viewed

@@ -10,8 +10,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/__castle/ide/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/__castle/ide/favicon-16x16.png" />
     <link rel="icon" href="/__castle/ide/favicon.ico" sizes="any" />
-    <script type="module" crossorigin src="/__castle/ide/assets/index-DnNy-Z5u.js"></script>
-    <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-cdsH2lna.css">
+    <script type="module" crossorigin src="/__castle/ide/assets/index-BMu42DTS.js"></script>
+    <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-BHWfx7Tz.css">
   </head>
   <body>
     <div id="root"></div>

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

@@ -249,9 +249,13 @@ export class MyThing {
   // Optional. Inspector ranges for numeric props. Without one, a number field is
   // an unbounded scrubber stepping by 1 — wrong for anything living in 0..1.
   // Giving BOTH min and max makes it a real slider. A `max` also caps typed
-  // entry, so only set one where going past it is meaningless.
+  // entry, so only set one where going past it is meaningless. `unit` suffixes
+  // the value with what it is measured in, and `options` makes a string or
+  // number prop a select over a fixed set of values.
   static propertyMeta = {
     power: { min: 0, max: 1, step: 0.05 },
+    speed: { min: 0, max: 600, unit: 'px/s' },
+    mode: { options: ['chase', 'patrol'] },
   };
   // Optional. Other components this one needs BESIDE IT on the same actor.

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

@@ -76,7 +76,7 @@
   "main": "main.jsx",
   "autoUpdateWhenImported": true,
   "title": "physics-2d",
-  "publishedVersion": "2026-09-12T00:14:01.916Z",
+  "publishedVersion": "2026-09-12T03:16:20.185Z",
   "imports": {
     "castle.base": {
       "deckId": "yRcmH4_aYllE",

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

@@ -57,6 +57,7 @@ import {
   ConfirmDialog,
   EditorBody,
   EditorHeader,
+  fieldStyles,
   Icon,
   IconButton,
   NumberField,
@@ -2414,7 +2415,7 @@ function AddBehaviorPicker({ available, onAdd }) {
         borderBottom: '1px solid var(--castle-inspector-divider)',
       }}>
       <select
-        className={styles.select}
+        className={cx(fieldStyles.input, fieldStyles.select)}
         value=""
         onChange={(event) => {
           if (event.target.value) onAdd(event.target.value);

package/kits/physics-2d/engine/autoInspector.jsx CHANGED Viewed

@@ -1,5 +1,14 @@
 import React from 'react';
-import { CheckboxField, ColorField, FieldNote, NumberField, Panel, TextField, isHexColor } from './ui';
+import {
+  CheckboxField,
+  ColorField,
+  FieldNote,
+  NumberField,
+  Panel,
+  SelectField,
+  TextField,
+  isHexColor,
+} from './ui';
 // Build the override-indicator field props (purple tint + "Default: X [Reset]")
 // for a single property from a behavior panel's override context. Returns an
 // empty object when there's no context (blueprint template editing) or the
@@ -16,7 +25,12 @@ export function overrideProps(override, prop) {
 // `{ min, max, step }` there to get a real range instead of NumberField's
 // defaults -- which are an unbounded scrubber stepping by whole numbers, wrong
 // for anything that lives in 0..1. Declaring BOTH min and max makes it a true
-// slider (fill + thumb). Props that declare nothing are unchanged.
+// slider (fill + thumb). `unit` suffixes the value with what it is measured in.
+// Props that declare nothing are unchanged.
+//
+// `options` turns a string or number prop into a select -- `['box', 'circle']`,
+// or `{ value, label }` entries when the label should read differently. Not a
+// boolean: a select hands back strings, and a `true` would come back `'true'`.
 //
 // Any prop can also declare `hint`, a line of explanation shown under the field.
 // As a function it receives the prop's current value and the whole component, so
@@ -24,8 +38,22 @@ export function overrideProps(override, prop) {
 // halves of a toggle at once -- which is the only way a one-line note beats the
 // prop's own name.
 function fieldFor({ label, current, set, sample, entry, ov }) {
+  if (entry?.options && (typeof sample === 'string' || typeof sample === 'number')) {
+    // A select's value is a string in the DOM; a numeric prop converts back so
+    // its type does not change under it.
+    const numeric = typeof sample === 'number';
+    return (
+      <SelectField
+        label={label}
+        value={current == null ? '' : String(current)}
+        onChange={(next) => set(numeric ? Number(next) : next)}
+        options={entry.options}
+        {...ov}
+      />
+    );
+  }
   if (typeof sample === 'number') {
-    const { min, max, step } = entry ?? {};
+    const { min, max, step, unit } = entry ?? {};
     return (
       <NumberField
         label={label}
@@ -34,6 +62,7 @@ function fieldFor({ label, current, set, sample, entry, ov }) {
         {...(min == null ? {} : { min })}
         {...(max == null ? {} : { max })}
         {...(step == null ? {} : { step })}
+        {...(unit == null ? {} : { unit })}
         {...ov}
       />
     );

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

@@ -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 CHANGED Viewed

@@ -113,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%;
@@ -159,6 +171,10 @@
   font-variant-numeric: tabular-nums;
 }
+.unitSuffix {
+  color: var(--castle-inspector-muted);
+}
 .scrubGrip {
   position: relative;
   z-index: 1;
@@ -328,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>