castle-web-cli 0.4.176 → 0.4.178

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

@@ -0,0 +1,235 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  deckPaletteFromFiles,
+  pickerPageIndexFor,
+  pickerPagesFor,
+} from './palettes';
+import { cx, FieldRow, IconButton, styles } from './ui';
+import { attachDismissListeners } from './popoverDismiss';
+
+export function sameHex(a, b) {
+  return !!a && !!b && a.toLowerCase() === b.toLowerCase();
+}
+
+export function NoneSwatch({ selected, onSelect }) {
+  return (
+    <button
+      type="button"
+      className={cx(styles.swatch, selected && styles.swatchSelected)}
+      title="None"
+      aria-label="None"
+      style={{ position: 'relative', background: 'transparent' }}
+      onClick={onSelect}>
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 4,
+          background:
+            'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
+        }}
+      />
+    </button>
+  );
+}
+
+// Swatch strip shared by the docked sidebar and the compact popover.
+// `keys` paints a sprite's working palette; `hexes` paints a picker list.
+// `wrap` is the unlabeled sprite row; the named official page is an 8-col grid.
+export function PaletteGrid({
+  keys,
+  hexes,
+  palette,
+  activeKey,
+  activeHex,
+  onSelectKey,
+  onSelectHex,
+  allowNone = false,
+  noneSelected = false,
+  onSelectNone,
+  wrap = false,
+}) {
+  const items = hexes
+    ? hexes.map((hex) => ({ id: hex, hex, selected: sameHex(activeHex, hex), onClick: () => onSelectHex?.(hex) }))
+    : (keys ?? []).map((key) => ({
+        id: key,
+        hex: palette?.[key],
+        selected: activeKey === key || sameHex(activeHex, palette?.[key]),
+        onClick: () => onSelectKey?.(key),
+      }));
+  if (!allowNone && !items.length) return null;
+  return (
+    <div className={wrap ? styles.paletteSpriteRow : styles.palette}>
+      {allowNone ? <NoneSwatch selected={noneSelected} onSelect={onSelectNone} /> : null}
+      {items.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          className={cx(styles.swatch, item.selected && styles.swatchSelected)}
+          title={item.hex}
+          style={{ background: item.hex }}
+          onClick={item.onClick}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function PalettePager({ name, onPage }) {
+  return (
+    <div className={styles.palettePager}>
+      <span className={styles.palettePagerName}>{name}</span>
+      <div className={styles.palettePagerBtns}>
+        <IconButton icon="chevron-left" label="Previous palette" onClick={() => onPage(-1)} />
+        <IconButton icon="chevron-right" label="Next palette" onClick={() => onPage(1)} />
+      </div>
+    </div>
+  );
+}
+
+// Anchored palette popover for inspector / paint-strip color taps.
+export function PalettePopover({ open, anchorRef, onClose, children }) {
+  const popoverRef = useRef(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useLayoutEffect(() => {
+    if (!open || !anchorRef.current) return;
+
+    function positionPopover() {
+      const anchor = anchorRef.current.getBoundingClientRect();
+      const rect = popoverRef.current?.getBoundingClientRect();
+      const margin = 8;
+      const width = rect?.width ?? 231;
+      const height = rect?.height ?? 320;
+      const maxLeft = Math.max(margin, window.innerWidth - width - margin);
+      const maxTop = Math.max(margin, window.innerHeight - height - margin);
+      const leftSide = anchor.left - width - margin;
+      const rightSide = anchor.right + margin;
+      // Prefer the side with room, then clamp a too-wide picker inside this
+      // iframe rather than sending it beyond either viewport edge.
+      const left =
+        leftSide >= margin
+          ? leftSide
+          : rightSide <= maxLeft
+            ? rightSide
+            : Math.min(maxLeft, Math.max(margin, anchor.left + anchor.width / 2 - width / 2));
+      const top = Math.min(maxTop, Math.max(margin, anchor.top));
+      setPosition({ top, left });
+    }
+
+    positionPopover();
+    window.addEventListener('resize', positionPopover);
+    window.addEventListener('scroll', positionPopover, true);
+    return () => {
+      window.removeEventListener('resize', positionPopover);
+      window.removeEventListener('scroll', positionPopover, true);
+    };
+  }, [open, anchorRef]);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    return attachDismissListeners(onClose, [popoverRef, anchorRef]);
+  }, [open, onClose, anchorRef]);
+
+  if (!open) return null;
+  return createPortal(
+    <div
+      ref={popoverRef}
+      className={styles.palettePopover}
+      style={{ top: position.top, left: position.left }}
+      role="dialog"
+      aria-label="Palette">
+      {children}
+    </div>,
+    document.body
+  );
+}
+
+// Inspector field: one swatch + hex, opening the same paged official-palette
+// browser the sprite editor uses. Paging never writes theme.style. `allowNone`
+// adds a None swatch that commits `''`.
+export function PaletteColorField({
+  label,
+  value,
+  onChange,
+  files,
+  allowNone = false,
+  overridden,
+  defaultValue,
+  onReset,
+}) {
+  const current = value ?? '';
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const deckPalette = deckPaletteFromFiles(files);
+  const pages = pickerPagesFor(deckPalette);
+  const [pageIndex, setPageIndex] = useState(() => pickerPageIndexFor(pages, deckPalette));
+  const page = pages[pageIndex] ?? pages[0];
+
+  // Snap to the deck's palette only when the popover opens. `pages` /
+  // `deckPalette` are new references every render, so listing them as deps
+  // would re-run this after every pager click and bounce back to page 0.
+  useEffect(() => {
+    if (!open) return;
+    setPageIndex(pickerPageIndexFor(pages, deckPalette));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- open edge only
+  }, [open]);
+
+  function pick(hex) {
+    onChange(hex);
+    setOpen(false);
+  }
+
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <button
+        ref={buttonRef}
+        type="button"
+        className={cx(styles.select, styles.fileField, styles.paletteColorField)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen((next) => !next)}>
+        <span
+          className={styles.swatch}
+          aria-hidden
+          style={
+            current
+              ? { background: current }
+              : {
+                  position: 'relative',
+                  background: 'transparent',
+                  backgroundImage:
+                    'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
+                  backgroundOrigin: 'content-box',
+                  padding: 4,
+                }
+          }
+        />
+        <span className={cx(styles.fileFieldLabel, !current && styles.fileFieldEmpty)}>
+          {current || 'None'}
+        </span>
+      </button>
+      <PalettePopover open={open} anchorRef={buttonRef} onClose={() => setOpen(false)}>
+        {page ? (
+          <>
+            <PalettePager
+              name={page.name}
+              onPage={(delta) =>
+                setPageIndex((i) => (i + delta + pages.length) % pages.length)
+              }
+            />
+            <PaletteGrid
+              hexes={page.colors}
+              activeHex={current}
+              onSelectHex={pick}
+              allowNone={allowNone}
+              noneSelected={!current}
+              onSelectNone={() => pick('')}
+            />
+          </>
+        ) : null}
+      </PalettePopover>
+    </FieldRow>
+  );
+}

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

@@ -4,11 +4,7 @@
 // thin wrappers: read input + runtime state, call these, push the result
 // through scene.physics. (Controls are touch/pointer-first; keyboard, when
 // added, should only DUPLICATE an on-screen control, never be the only input.)
-//
-// AnalogStick force mode: stickDrive (held) and stickBrake (idle) return
-// velocity deltas applied via applyImpulse — mass-independent, composable,
-// and restricted to the stick's driven axes so gravity on an undriven axis
-// is never clamped or braked.
+// Stick force-mode math lives in AnalogStick.jsx — it has no other consumer.
 
 // Authored Draggable `stiffness` (0..1, 0 = floppy .. 1 = rigid) -> the matter
 // constraint values that hold the object. Geometric, like joints.js's rope map
@@ -57,6 +53,10 @@ export function clampLength(v, max) {
 // name into shared code and had no answer at all once two fingers were down.
 export const TARGETED_CLAIM = 10;
 export const GREEDY_CLAIM = 0;
+// An actor whose behaviors implement `onTap`. Beats greedy (stick, grab-anywhere
+// sling) so the finger isn't also those, and yields to a targeted control that
+// claims later the same frame.
+export const TAP_CLAIM = 5;
 
 // Take the first fresh press this frame that `actorId` is allowed to have, and
 // claim it. `priorityFor(pointer)` returns the claim priority to bid, or null to
@@ -103,79 +103,3 @@ export function slingLaunch(anchor, pointer, props = {}) {
   const pull = slingPull(anchor, pointer, props.maxDrag ?? 160);
   return { x: -pull.x * speed, y: -pull.y * speed };
 }
-
-// AnalogStick: stick displacement from its origin, clamped to maxRadius.
-export function stickVector(pointer, origin, maxRadius = 60) {
-  return clampLength({ x: pointer.x - origin.x, y: pointer.y - origin.y }, maxRadius);
-}
-
-// Card coords before the camera -- for screen-fixed controls reading a pointer.
-export function screenPoint(pointer) {
-  return { x: pointer.screenX, y: pointer.screenY };
-}
-
-// Keep only the axes the stick is allowed to drive. An undriven axis (gravity
-// in a platformer) must never be clamped or braked by the stick.
-function drivenAxes(v, axes) {
-  return {
-    x: axes === 'vertical' ? 0 : v.x,
-    y: axes === 'horizontal' ? 0 : v.y,
-  };
-}
-
-// Smallest signed angle from `from` to `to`, wrapped into [−π, π].
-function angleDelta(from, to) {
-  let d = Math.atan2(to.y, to.x) - Math.atan2(from.y, from.x);
-  if (d > Math.PI) d -= 2 * Math.PI;
-  if (d < -Math.PI) d += 2 * Math.PI;
-  return d;
-}
-
-// Velocity delta while the stick is held: accelerate toward deflection × speed
-// with OG turnFriction boost on reversals, then clamp the driven axes to `speed`.
-// Returns an impulse (add to velocity); never touches an undriven axis.
-export function stickDrive(velocity, deflection, props = {}, dt) {
-  const speed = props.speed ?? 6;
-  const rampTime = props.rampTime ?? 0.2;
-  const turnBoost = props.turnBoost ?? 3;
-  const axes = props.axes ?? 'both';
-  const vDriven = drivenAxes(velocity, axes);
-
-  let boost = 1;
-  if (turnBoost > 0 && length(velocity) > 0 && length(deflection) > 0) {
-    boost = 1 + turnBoost * (Math.abs(angleDelta(velocity, deflection)) / Math.PI);
-  }
-
-  let delta;
-  if (rampTime <= 0) {
-    // Instant: one-frame snap toward the capped target on the driven axes.
-    const target = drivenAxes(
-      { x: deflection.x * speed, y: deflection.y * speed },
-      axes,
-    );
-    delta = { x: target.x - vDriven.x, y: target.y - vDriven.y };
-  } else {
-    const accel = speed / rampTime;
-    delta = drivenAxes(
-      { x: deflection.x * accel * boost * dt, y: deflection.y * accel * boost * dt },
-      axes,
-    );
-    const capped = clampLength({ x: vDriven.x + delta.x, y: vDriven.y + delta.y }, speed);
-    delta = { x: capped.x - vDriven.x, y: capped.y - vDriven.y };
-  }
-  return delta;
-}
-
-// Velocity delta while the stick is idle: Coulomb brake on the driven axes only.
-// `slowDown` is speed units lost per second (px/step per second). 0 = coast.
-export function stickBrake(velocity, props = {}, dt) {
-  const slowDown = props.slowDown ?? 20;
-  if (slowDown <= 0) return { x: 0, y: 0 };
-  const axes = props.axes ?? 'both';
-  const vDriven = drivenAxes(velocity, axes);
-  const len = length(vDriven);
-  if (len === 0) return { x: 0, y: 0 };
-  const reduce = Math.min(len, slowDown * dt);
-  const s = -reduce / len;
-  return { x: vDriven.x * s, y: vDriven.y * s };
-}

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

@@ -0,0 +1,17 @@
+// Shared Escape / outside-pointer dismiss for anchored popovers.
+// `insideRefs` are refs whose nodes count as "inside" (popover + anchor).
+export function attachDismissListeners(onClose, insideRefs) {
+  function onKeyDown(event) {
+    if (event.key === 'Escape') onClose();
+  }
+  function onPointerDown(event) {
+    if (insideRefs.some((ref) => ref.current?.contains(event.target))) return;
+    onClose();
+  }
+  window.addEventListener('keydown', onKeyDown);
+  window.addEventListener('pointerdown', onPointerDown);
+  return () => {
+    window.removeEventListener('keydown', onKeyDown);
+    window.removeEventListener('pointerdown', onPointerDown);
+  };
+}

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

@@ -4,6 +4,8 @@ import { actorUsesBlueprint, getBlueprintTemplate, mergeComponents } from './blu
 import { getColliderRect, intersects, spriteIsEmpty } from './collider';
 import { systemInstallers } from './systemRegistry';
 import { deckFontFamily } from './fonts';
+import { wrapText } from './text';
+import { updateTaps } from './tap';
 
 const CARD_WIDTH = 500;
 const CARD_HEIGHT = 700;
@@ -393,6 +395,9 @@ export class SceneRuntime {
 
   update(dt) {
     this.time += dt;
+    // Before controls, so a tap on an actor that implements `onTap` claims the
+    // finger first. Targeted controls (Draggable) can still take it afterward.
+    updateTaps(this);
     for (const actor of this.getActors()) {
       this.#syncEnabled(actor);
       this.forEachBehavior(actor, (instance) => instance.update?.(actor, this, dt));
@@ -408,7 +413,12 @@ export class SceneRuntime {
   }
 
   forEachBehavior(actor, callback) {
-    for (const [behaviorName, props] of Object.entries(actor.components)) {
+    // Style paints chrome behind Text (and Style-only actors); run it first
+    // regardless of key insertion order. Sprite/Video paint Style themselves
+    // before their blit — see paintActorStyle in those behaviors.
+    const entries = Object.entries(actor.components ?? {});
+    entries.sort(([a], [b]) => (a === 'Style' ? -1 : b === 'Style' ? 1 : 0));
+    for (const [behaviorName, props] of entries) {
       if (!isBehaviorEnabled(props)) continue;
       const Behavior = this.behaviors.get(behaviorName);
       if (!Behavior) continue;
@@ -844,8 +854,7 @@ function drawDisabledSpriteLabel(ctx, actor) {
   const padY = fontSize * 0.4;
 
   const single = 'Sprite disabled';
-  const lines =
-    ctx.measureText(single).width + padX * 2 <= layout.width ? [single] : ['Sprite', 'disabled'];
+  const lines = wrapText(ctx, single, Math.max(0, layout.width - padX * 2));
   const lineHeight = fontSize * 1.15;
   const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
   const width = textWidth + padX * 2;

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

@@ -2,6 +2,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ArtThumbnail } from './artThumbnail';
 import { cx, FieldRow, Icon, styles } from './ui';
+import { attachDismissListeners } from './popoverDismiss';
 
 // Visual sprite / image picker for inspector fields that point at art files.
 // Anchored popover (same family as FileField), not a modal: thumbnails only,
@@ -68,21 +69,7 @@ function SpritePickerPopover({ paths, current, sprites, anchorRef, onPick, onClo
   }, [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);
-    };
+    return attachDismissListeners(onClose, [listRef, anchorRef]);
   }, [anchorRef, onClose]);
 
   return (

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

@@ -0,0 +1,90 @@
+import { TAP_CLAIM } from './physics/controls';
+
+// Built-in tap. Any enabled behavior may implement `onTap(actor, scene)`; the
+// actor is then a tap target with no extra component. Fires on release inside
+// the hit zone (Collider when present, else the axis-aligned Layout box).
+// Screen-space Text uses screen coords so a HUD label hits where it draws.
+//
+// Claims at TAP_CLAIM: beats a greedy control (stick, grab-anywhere sling) so
+// the finger isn't also those, and yields to a targeted control (Draggable, a
+// sling pressed on its own body) that claims later the same frame.
+
+export function updateTaps(scene) {
+  for (const actor of scene.actors.values()) {
+    const id = actor.runtime?._tapPointerId;
+    if (id == null) continue;
+    const held = scene.pointers.get(id);
+    if (held?.down) {
+      if (!scene.ownsPointer(id, actor.id)) clearTap(actor);
+      else actor.runtime._tapInside = hits(actor, scene, held);
+      continue;
+    }
+    const stillOwned = held ? scene.ownsPointer(id, actor.id) : true;
+    const inside = held ? hits(actor, scene, held) : Boolean(actor.runtime._tapInside);
+    if (stillOwned && inside && hasOnTap(scene, actor)) fireTap(scene, actor);
+    clearTap(actor);
+  }
+
+  for (const pointer of scene.pointers.values()) {
+    if (!pointer.justPressed) continue;
+    const actor = topTapActor(scene, pointer);
+    if (!actor) continue;
+    if (!scene.claimPointer(pointer.id, actor.id, TAP_CLAIM)) continue;
+    actor.runtime._tapPointerId = pointer.id;
+    actor.runtime._tapInside = true;
+    // A click that ends before the next frame is justPressed with down:false.
+    if (!pointer.down) {
+      if (scene.ownsPointer(pointer.id, actor.id)) fireTap(scene, actor);
+      clearTap(actor);
+    }
+  }
+}
+
+function fireTap(scene, actor) {
+  scene.forEachBehavior(actor, (inst) => inst.onTap?.(actor, scene));
+}
+
+function clearTap(actor) {
+  actor.runtime._tapPointerId = null;
+  actor.runtime._tapInside = false;
+}
+
+function hasOnTap(scene, actor) {
+  for (const [name, props] of Object.entries(actor.components ?? {})) {
+    if (!props || props.$enabled === false) continue;
+    const Behavior = scene.behaviors.get(name);
+    if (typeof Behavior?.prototype?.onTap === 'function') return true;
+  }
+  return false;
+}
+
+function topTapActor(scene, pointer) {
+  let best = null;
+  let bestZ = -Infinity;
+  for (const actor of scene.actors.values()) {
+    if (!hasOnTap(scene, actor)) continue;
+    const z = actor.components?.Layout?.z ?? 0;
+    if (z < bestZ) continue;
+    if (!hits(actor, scene, pointer)) continue;
+    best = actor;
+    bestZ = z;
+  }
+  return best;
+}
+
+function pointerCoords(actor, pointer) {
+  if (actor.components?.Text?.space === 'screen') {
+    return { x: pointer.screenX, y: pointer.screenY };
+  }
+  return { x: pointer.x, y: pointer.y };
+}
+
+function hits(actor, scene, pointer) {
+  const { x, y } = pointerCoords(actor, pointer);
+  if (actor.components?.Collider && scene.physics?.containsPoint) {
+    return scene.physics.containsPoint(actor, x, y);
+  }
+  const layout = actor.components?.Layout;
+  if (!layout) return false;
+  return x >= layout.x && x <= layout.x + layout.width && y >= layout.y && y <= layout.y + layout.height;
+}

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

@@ -0,0 +1,94 @@
+// Canvas text layout helpers shared by the Text behavior and editor chrome.
+// Pure: no imports. Callers set `ctx.font` before wrapText / pass size+font into
+// drawTextBlock.
+
+// Greedy word-wrap against the ctx's current font. Paragraphs split on `\n`
+// (after normalizing `\r\n`); an empty paragraph yields an empty line. A single
+// word wider than maxWidth stays on its own line and overflows.
+export function wrapText(ctx, text, maxWidth) {
+  const source = String(text ?? '').replace(/\r\n/g, '\n');
+  const paragraphs = source.split('\n');
+  const lines = [];
+  for (const paragraph of paragraphs) {
+    if (!paragraph) {
+      lines.push('');
+      continue;
+    }
+    const words = paragraph.split(/\s+/);
+    let line = '';
+    for (const word of words) {
+      if (!word) continue;
+      const next = line ? `${line} ${word}` : word;
+      if (line && ctx.measureText(next).width > maxWidth) {
+        lines.push(line);
+        line = word;
+      } else {
+        line = next;
+      }
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+
+const ALIGN_X = { left: 0, center: 0.5, right: 1 };
+const ALIGN_Y = { top: 0, middle: 0.5, bottom: 1 };
+
+// Draw wrapped, aligned text into a box. No vertical clipping — lines that
+// overrun the box still paint (OG Text parity). Returns the laid-out lines
+// and the resolved line height in card units.
+export function drawTextBlock(
+  ctx,
+  {
+    x,
+    y,
+    width,
+    height,
+    text,
+    size = 24,
+    font = 'sans-serif',
+    color = '#131313',
+    align = 'left',
+    verticalAlign = 'top',
+    padding = 0,
+    lineHeight = 1.25,
+    outlineWidth = 0,
+    outlineColor = '#ffffff',
+  }
+) {
+  const pad = Math.max(0, Number(padding) || 0);
+  const innerW = Math.max(0, width - pad * 2);
+  const innerH = Math.max(0, height - pad * 2);
+  const fontSize = Number.isFinite(size) ? size : 24;
+  const lineH = fontSize * (Number.isFinite(lineHeight) ? lineHeight : 1.25);
+
+  ctx.save();
+  ctx.font = `${fontSize}px ${font}`;
+  ctx.textAlign = align === 'center' || align === 'right' ? align : 'left';
+  ctx.textBaseline = 'middle';
+
+  const lines = wrapText(ctx, text, innerW);
+  const blockH = lines.length * lineH;
+  const yFactor = ALIGN_Y[verticalAlign] ?? 0;
+  const blockTop = y + pad + (innerH - blockH) * yFactor;
+  const xFactor = ALIGN_X[align] ?? 0;
+  const anchorX = x + pad + innerW * xFactor;
+
+  const stroke = Number(outlineWidth) > 0 && Boolean(outlineColor);
+  const fill = Boolean(color);
+  if (stroke) {
+    ctx.lineWidth = outlineWidth;
+    ctx.strokeStyle = outlineColor;
+    ctx.lineJoin = 'round';
+    ctx.miterLimit = 2;
+  }
+  if (fill) ctx.fillStyle = color;
+
+  for (let i = 0; i < lines.length; i++) {
+    const ly = blockTop + lineH * (i + 0.5);
+    if (stroke) ctx.strokeText(lines[i], anchorX, ly);
+    if (fill) ctx.fillText(lines[i], anchorX, ly);
+  }
+  ctx.restore();
+  return { lines, lineHeight: lineH };
+}

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

@@ -419,6 +419,26 @@ export function TextField({ label, value, onChange, overridden, defaultValue, on
     </FieldRow>
   );
 }
+export function TextAreaField({
+  label,
+  value,
+  onChange,
+  rows = 3,
+  overridden,
+  defaultValue,
+  onReset,
+}) {
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <textarea
+        className={styles.textarea}
+        rows={rows}
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </FieldRow>
+  );
+}
 function numberText(v) {
   return Number.isFinite(v) ? String(v) : '0';
 }

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

@@ -1773,6 +1773,7 @@
 
 .fieldRowOverridden .input,
 .fieldRowOverridden .select,
+.fieldRowOverridden .textarea,
 .fieldRowOverridden .colorInput,
 .fieldRowOverridden .checkbox {
   border-color: var(--castle-override-border);
@@ -1883,6 +1884,13 @@
   color: var(--castle-inspector-muted);
 }
 
+/* PaletteColorField: swatch + hex in the closed chrome. */
+.paletteColorField {
+  gap: 8px;
+  padding-left: 6px;
+  min-height: 32px;
+}
+
 /* SpriteField: closed chrome carries a tiny thumb beside the basename so you
    can see which art is selected without opening the picker. */
 .spriteField {
@@ -2326,8 +2334,8 @@
 
 .textarea {
   min-height: 0;
-  resize: none;
-  font-family: var(--castle-font-mono);
+  resize: vertical;
+  font-family: inherit;
   font-size: 14px;
   line-height: 1.45;
 }