castle-web-cli 0.4.181 → 0.4.182

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

@@ -0,0 +1,327 @@
+/* Styles for the field widgets beside this file. The canonical copy is
+   shared/fields/fields.module.css; scripts/sync-shared.mjs copies it into each
+   consumer of the widgets, and `check` fails when a copy drifts. Edit it there. */
+.fieldRow {
+  display: grid;
+  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 12px;
+  margin-bottom: 0;
+  min-height: 28px;
+}
+
+.fieldRow:last-child {
+  margin-bottom: 0;
+}
+
+.fieldLabel {
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Instance override: purple label + input border, plus a "Default: X [Reset]"
+   sub-line rendered below the control (see FieldRow). */
+.fieldLabelOverridden {
+  color: var(--castle-override);
+}
+
+/* A custom property rather than `.fieldRowOverridden .input`, so a control styled
+   in another CSS module (ui.module.css's .select and .textarea) takes the border
+   too -- a class selector can't reach a class from a different module. */
+.fieldRowOverridden {
+  --field-border: var(--castle-override-border);
+}
+
+.fieldOverride {
+  padding-bottom: 12px;
+}
+
+.fieldOverride .fieldRow {
+  padding-bottom: 4px;
+}
+
+/* A muted line of explanation under a field, sitting in the control column the
+   same way the override sub-line above does. For a prop whose name can't carry
+   its own meaning -- see `hint` in a behavior's propertyMeta. */
+.fieldNote {
+  display: grid;
+  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
+  gap: 12px;
+  margin-top: -6px;
+  padding-bottom: 12px;
+}
+
+.fieldNoteInner {
+  grid-column: 2;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--castle-inspector-muted);
+}
+
+.fieldDefault {
+  display: grid;
+  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
+  gap: 12px;
+}
+
+.fieldDefaultInner {
+  grid-column: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--castle-inspector-muted);
+}
+
+.fieldDefaultInner > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fieldResetBtn {
+  margin-left: auto;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--castle-override);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.fieldResetBtn:hover {
+  color: var(--castle-inspector-text);
+}
+
+.input {
+  width: 100%;
+  border: 1px solid var(--field-border, var(--castle-inspector-border));
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  padding: 5px 8px;
+  outline: 0;
+  font: inherit;
+}
+
+.numberField {
+  position: relative;
+  width: 100%;
+}
+
+.numberInput {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.numberInput::-webkit-inner-spin-button,
+.numberInput::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+/* Number fields are drag scrubbers with a tap-to-open custom numpad (no native
+   keyboard). A bounded field (min AND max) is a slider with fill + thumb; an
+   unbounded one shows a grip and scrubs into negatives. touch-action: pan-y (set
+   inline) lets a vertical drag scroll the field list while horizontal scrubs. */
+.numberScrub {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  overflow: hidden;
+  padding: 5px 8px;
+  cursor: ew-resize;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.numberSlider {
+  cursor: pointer;
+}
+
+.numberValue {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 auto;
+  min-width: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.scrubGrip {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+  line-height: 1;
+  letter-spacing: -2px;
+  opacity: 0.4;
+}
+
+/* Value bubble that floats above the finger while scrubbing (the finger covers the
+   field, so the live number needs to show somewhere visible). */
+.scrubBubble {
+  position: fixed;
+  z-index: 1001;
+  transform: translate(-50%, -100%);
+  padding: 3px 10px;
+  border-radius: 8px;
+  background: rgba(20, 24, 30, 0.96);
+  border: 1px solid var(--castle-inspector-border);
+  color: var(--castle-inspector-text);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
+}
+
+.sliderFill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  background: rgba(90, 140, 210, 0.3);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.sliderThumb {
+  position: absolute;
+  top: 50%;
+  width: 3px;
+  height: 60%;
+  border-radius: 2px;
+  background: rgba(150, 190, 240, 0.95);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Custom numeric pad, shown as a bottom sheet. */
+.numpadBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.numpadSheet {
+  background: var(--castle-inspector-bg, #16181d);
+  border-top: 1px solid var(--castle-inspector-border);
+  border-radius: 14px 14px 0 0;
+  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.numpadValueRow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 8px 12px;
+}
+
+/* Label and number are one value line, not a caption plus a value — same size
+   and color. A long label (e.g. "Friction Static") truncates rather than
+   pushing the number off, which is why the number never shrinks. */
+.numpadValueLabel {
+  color: var(--castle-inspector-text);
+  font-size: 22px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.numpadValueNum {
+  flex: 0 0 auto;
+  color: var(--castle-inspector-text);
+  font-size: 22px;
+  font-variant-numeric: tabular-nums;
+}
+
+.numpadGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.numpadKey {
+  height: 52px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 10px;
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-text);
+  font-size: 20px;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.numpadKey:active {
+  background: var(--castle-inspector-divider);
+}
+
+.numpadKeyZero {
+  grid-column: span 3;
+}
+
+.numpadKeyDone {
+  background: rgba(90, 140, 210, 0.9);
+  border-color: transparent;
+  color: #fff;
+  font-size: 16px;
+}
+
+.colorInput {
+  width: 100%;
+  height: 28px;
+  border: 1px solid var(--field-border, var(--castle-inspector-border));
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  padding: 2px;
+  outline: 0;
+  cursor: pointer;
+}
+
+.checkbox {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  justify-self: end;
+  border: 1px solid var(--field-border, var(--castle-inspector-border));
+  border-radius: var(--castle-radius);
+  background: var(--castle-inspector-input-bg);
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  color: var(--castle-text);
+}
+
+.checkboxOn {
+  background: var(--castle-black);
+}
+
+.checkboxMark {
+  display: none;
+  width: 12px;
+  height: 12px;
+}
+
+.checkboxOn .checkboxMark {
+  display: block;
+}

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

@@ -5,7 +5,7 @@ import {
   pickerPageIndexFor,
   pickerPagesFor,
 } from './palettes';
-import { cx, FieldRow, IconButton, styles } from './ui';
+import { cx, FieldRow, followAnchor, IconButton, styles } from './ui';
 import { attachDismissListeners } from './popoverDismiss';
 
 export function sameHex(a, b) {
@@ -118,13 +118,7 @@ export function PalettePopover({ open, anchorRef, onClose, children }) {
       setPosition({ top, left });
     }
 
-    positionPopover();
-    window.addEventListener('resize', positionPopover);
-    window.addEventListener('scroll', positionPopover, true);
-    return () => {
-      window.removeEventListener('resize', positionPopover);
-      window.removeEventListener('scroll', positionPopover, true);
-    };
+    return followAnchor(positionPopover);
   }, [open, anchorRef]);
 
   useEffect(() => {

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

@@ -33,6 +33,15 @@ function resolveSceneFileKey(name) {
   return candidates.find((candidate) => initialFiles[candidate] !== undefined) ?? key;
 }
 
+// A behavior instance for one actor. `this.props` is what the constructor
+// assigns; a behavior written without one would read `this.props` as undefined
+// and throw on its first frame, so it is filled in here when missing.
+function makeBehavior(Behavior, props) {
+  const instance = new Behavior(props);
+  if (instance.props === undefined) instance.props = props;
+  return instance;
+}
+
 // `$enabled: false` turns a behavior off while keeping its props. Absent means
 // on, so it is only ever stored when false, and every existing scene reads the
 // same. `$` marks a prop the ENGINE owns -- behaviors must not define one.
@@ -371,7 +380,7 @@ export class SceneRuntime {
     if (!Behavior) return;
     ctx.save();
     ctx.globalAlpha *= 0.5;
-    new Behavior(props).draw?.(actor, this, ctx, options);
+    makeBehavior(Behavior, props).draw?.(actor, this, ctx, options);
     ctx.restore();
     drawDisabledSpriteLabel(ctx, actor);
   }
@@ -389,7 +398,7 @@ export class SceneRuntime {
       const hook = on ? 'onEnable' : 'onDisable';
       // Constructed from the props it still has -- the whole point of
       // disabling is that they survive.
-      new Behavior(props ?? {})[hook]?.(actor, this);
+      makeBehavior(Behavior, props ?? {})[hook]?.(actor, this);
     }
   }
 
@@ -422,7 +431,7 @@ export class SceneRuntime {
       if (!isBehaviorEnabled(props)) continue;
       const Behavior = this.behaviors.get(behaviorName);
       if (!Behavior) continue;
-      callback(new Behavior(props));
+      callback(makeBehavior(Behavior, props));
     }
   }
 

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, Icon, styles } from './ui';
+import { cx, FieldRow, followAnchor, Icon, styles } from './ui';
 import { attachDismissListeners } from './popoverDismiss';
 
 // Visual sprite / image picker for inspector fields that point at art files.
@@ -56,16 +56,7 @@ function SpritePickerPopover({ paths, current, sprites, anchorRef, onPick, onClo
 
   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);
-    };
+    return followAnchor(() => setPos(placePopover(anchorRef.current, listRef.current)));
   }, [anchorRef, paths.length]);
 
   useEffect(() => {