castle-web-cli 0.4.181 → 0.4.183

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

@@ -0,0 +1,475 @@
+// GENERATED from shared/fields/fields.tsx by scripts/sync-shared.mjs -- do not edit.
+// Change the source and run `npm run sync:shared`.
+
+// 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.
+//
+// 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
+// cli/src/shell/fields/ and builds kits/physics-2d/engine/fields/fields.jsx from
+// it (types stripped, formatted in the kit's style), and `check` fails when
+// either copy drifts.
+//
+// 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 { createPortal } from 'react-dom';
+import styles from './fields.module.css';
+function cx(...parts) {
+  return parts.filter(Boolean).join(' ');
+}
+// Live `matchMedia` as a hook: re-renders when the query starts/stops matching
+// (plugging in a mouse, rotating, resizing a panel).
+export function useMediaQuery(query) {
+  const [matches, setMatches] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia(query).matches
+  );
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const onChange = (event) => setMatches(event.matches);
+    mql.addEventListener('change', onChange);
+    setMatches(mql.matches);
+    return () => mql.removeEventListener('change', onChange);
+  }, [query]);
+  return matches;
+}
+// True when the primary pointer is a finger rather than a mouse/trackpad/stylus
+// — i.e. the person can't reliably hit a small target, has no hover, and gets a
+// native keyboard instead of a physical one. The right gate for touch-first
+// affordances (the numpad sheet, big hit areas), since it stays false on a
+// desktop no matter how narrow the panel gets.
+export function useCoarsePointer() {
+  return useMediaQuery('(pointer: coarse)');
+}
+export const FieldsChrome = createContext({});
+// With no portalClassName the children portal bare, which is what the kit
+// inspector has always rendered.
+function Overlay({ children }) {
+  const { portalClassName } = useContext(FieldsChrome);
+  return createPortal(
+    portalClassName ? <div className={portalClassName}>{children}</div> : children,
+    document.body
+  );
+}
+// Render the "Default: X" value in an instance override's sub-line.
+function formatFieldDefault(value) {
+  if (typeof value === 'boolean') return value ? 'On' : 'Off';
+  if (value === null || value === undefined || value === '') return 'none';
+  return String(value);
+}
+export function FieldRow({ id, label, overridden, defaultValue, onReset, children }) {
+  const row = (
+    <label
+      className={cx(styles.fieldRow, overridden && styles.fieldRowOverridden)}
+      data-field-id={id}>
+      <span className={cx(styles.fieldLabel, overridden && styles.fieldLabelOverridden)}>
+        {label}
+      </span>
+      {children}
+    </label>
+  );
+  if (!overridden) return row;
+  return (
+    <div className={styles.fieldOverride}>
+      {row}
+      <div className={styles.fieldDefault}>
+        <div className={styles.fieldDefaultInner}>
+          <span>Default: {formatFieldDefault(defaultValue)}</span>
+          {onReset ? (
+            <button type="button" className={styles.fieldResetBtn} onClick={onReset}>
+              Reset
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+export function TextField({ value, onChange, ...row }) {
+  return (
+    <FieldRow {...row}>
+      <input
+        className={styles.input}
+        data-field="text"
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </FieldRow>
+  );
+}
+function numberText(v) {
+  return Number.isFinite(v) ? String(v) : '0';
+}
+function clamp(v, min, max) {
+  if (typeof min === 'number' && v < min) v = min;
+  if (typeof max === 'number' && v > max) v = max;
+  return v;
+}
+// Keys in reading order for a 4-col grid: 0 spans the bottom three, Done the last.
+const NUMPAD_KEYS = [
+  ['7', '8', '9', 'back'],
+  ['4', '5', '6', 'sign'],
+  ['1', '2', '3', 'dot'],
+  ['0', 'done'],
+].flat();
+const NUMPAD_GLYPH = {
+  back: '⌫',
+  sign: '±',
+  dot: '.',
+  done: 'Done',
+};
+// A custom numeric pad shown as a bottom sheet — the ONLY reliable way to offer a
+// 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 }) {
+  const [draft, setDraft] = useState(() => numberText(value));
+  const pristineRef = useRef(true); // first digit replaces the seeded value
+  function finish() {
+    const v = Number(draft);
+    onCommit(clamp(Number.isFinite(v) ? v : value, min, max));
+    onClose();
+  }
+  function press(key) {
+    if (key === 'done') return finish();
+    if (key === 'back') {
+      pristineRef.current = false;
+      return setDraft((d) => d.slice(0, -1));
+    }
+    if (key === 'sign') {
+      pristineRef.current = false;
+      return setDraft((d) => (d.startsWith('-') ? d.slice(1) : '-' + (d === '0' ? '' : d)));
+    }
+    // The first digit/dot after opening replaces the seeded value (calculator-style).
+    const fresh = pristineRef.current;
+    pristineRef.current = false;
+    if (key === 'dot') {
+      return setDraft((d) =>
+        fresh ? '0.' : d.includes('.') ? d : d === '' || d === '-' ? d + '0.' : d + '.'
+      );
+    }
+    setDraft((d) => {
+      if (fresh) return key;
+      if (d === '0') return key;
+      if (d === '-0') return '-' + key;
+      return d + key;
+    });
+  }
+  return (
+    <Overlay>
+      <div className={styles.numpadBackdrop} onPointerDown={finish}>
+        <div
+          className={styles.numpadSheet}
+          role="dialog"
+          aria-label={`Edit ${label}`}
+          onPointerDown={(event) => event.stopPropagation()}>
+          <div className={styles.numpadValueRow}>
+            <span className={styles.numpadValueLabel}>{label}</span>
+            <span className={styles.numpadValueNum}>
+              {draft === '' || draft === '-' ? '0' : draft}
+            </span>
+          </div>
+          <div className={styles.numpadGrid}>
+            {NUMPAD_KEYS.map((key) => (
+              <button
+                key={key}
+                type="button"
+                className={cx(
+                  styles.numpadKey,
+                  key === 'done' && styles.numpadKeyDone,
+                  key === '0' && styles.numpadKeyZero
+                )}
+                onClick={() => press(key)}>
+                {NUMPAD_GLYPH[key] ?? key}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Overlay>
+  );
+}
+// Scrub tuning: horizontal travel before a drag counts as a scrub (vs a tap), the
+// base pixels-per-step, and how fast the per-pixel step grows with drag distance
+// (acceleration, so a big range is reachable without running off the screen edge).
+const SCRUB_THRESHOLD = 12;
+const SCRUB_PX_PER_STEP = 12;
+const SCRUB_ACCEL_RANGE = 240;
+// The mouse/trackpad answer to "I want to type an exact number": a real input in
+// place of the scrub box, focused and selected so typing replaces the value.
+// Enter/blur commits, Esc reverts. The numpad sheet exists because a phone has
+// no minus key and we don't want the native keyboard covering the field — with a
+// physical keyboard neither is a problem, so a fine pointer never sees it.
+function NumberInlineInput({ value, min, max, step, onCommit, onDone }) {
+  const [draft, setDraft] = useState(() => numberText(value));
+  const cancelRef = useRef(false);
+  function finish(raw) {
+    if (cancelRef.current) return onDone();
+    const next = Number(raw);
+    onCommit(Number.isFinite(next) ? next : value);
+    onDone();
+  }
+  return (
+    <div className={styles.numberField}>
+      <input
+        className={cx(styles.input, styles.numberInput)}
+        type="number"
+        min={min}
+        max={max}
+        step={step}
+        value={draft}
+        autoFocus
+        onFocus={(event) => event.currentTarget.select()}
+        onChange={(event) => setDraft(event.target.value)}
+        onBlur={(event) => finish(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            event.currentTarget.blur();
+          } else if (event.key === 'Escape') {
+            event.preventDefault();
+            cancelRef.current = true;
+            event.currentTarget.blur();
+          }
+        }}
+      />
+    </div>
+  );
+}
+// Snap to a multiple of `step`. `Math.round(v / step) * step` alone reintroduces
+// binary error the moment `step` isn't representable in base 2 -- 0.05 x 14 is
+// 0.7000000000000001, which then gets stored and rendered in full -- so re-round
+// to the decimal places the step itself implies.
+function snapToStep(v, step) {
+  const snapped = Math.round(v / step) * step;
+  const text = String(step);
+  const decimals = text.includes('e-')
+    ? Number(text.split('e-')[1])
+    : (text.split('.')[1] ?? '').length;
+  return Number(snapped.toFixed(Math.min(decimals, 100)));
+}
+// A field with BOTH a min and max is a true slider (fill + thumb), the pointer's X
+// mapped onto [min,max]. Everything else is a horizontal scrubber that can pass
+// into negatives, marked with a grip so it reads as draggable.
+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 }) {
+  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:
+  // a finger gets the numpad sheet, a mouse gets an inline text input (see
+  // NumberInlineInput). Both are the "type an exact value" path for their device.
+  const coarse = useCoarsePointer();
+  const [padOpen, setPadOpen] = useState(false);
+  const [typing, setTyping] = useState(false);
+  // While scrubbing, a value bubble floats above the finger (which occludes the
+  // field itself) — { x, y } client coords, or null when not scrubbing.
+  const [scrubPos, setScrubPos] = useState(null);
+  const boxRef = useRef(null);
+  const dragRef = useRef(null);
+  function scrubTo(v, dragStep) {
+    if (dragStep) v = snapToStep(v, dragStep);
+    v = clamp(v, min, max);
+    if (v !== current) onChange(v);
+  }
+  function onPointerDown(event) {
+    if (padOpen || typing) return;
+    if (event.pointerType === 'mouse' && event.button !== 0) return;
+    // Don't capture or preventDefault yet: `touch-action: pan-y` lets the browser
+    // own a VERTICAL drag (scroll the field list); we only claim a HORIZONTAL one.
+    dragRef.current = {
+      id: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      startValue: current,
+      step,
+      mode: 'pending',
+    };
+  }
+  function onPointerMove(event) {
+    const drag = dragRef.current;
+    if (!drag || drag.id !== event.pointerId) return;
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (drag.mode === 'pending') {
+      if (Math.abs(dx) < SCRUB_THRESHOLD && Math.abs(dy) < SCRUB_THRESHOLD) return;
+      if (Math.abs(dy) >= Math.abs(dx)) {
+        drag.mode = 'scroll'; // vertical intent — leave it to the list scroll
+        return;
+      }
+      drag.mode = 'scrub';
+      boxRef.current?.setPointerCapture?.(event.pointerId);
+    }
+    if (drag.mode !== 'scrub') return;
+    event.preventDefault();
+    setScrubPos({ x: event.clientX, y: event.clientY });
+    if (range) {
+      const rect = boxRef.current.getBoundingClientRect();
+      const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+      scrubTo(range.min + frac * (range.max - range.min), drag.step);
+    } else {
+      // Acceleration: each pixel counts for more the farther you've dragged.
+      const accel = 1 + Math.abs(dx) / SCRUB_ACCEL_RANGE;
+      scrubTo(
+        drag.startValue + Math.round((dx / SCRUB_PX_PER_STEP) * accel) * drag.step,
+        drag.step
+      );
+    }
+  }
+  function onPointerUp(event) {
+    const drag = dragRef.current;
+    if (!drag || drag.id !== event.pointerId) return;
+    if (drag.mode === 'scrub') boxRef.current?.releasePointerCapture?.(event.pointerId);
+    const wasTap = drag.mode === 'pending';
+    dragRef.current = null;
+    setScrubPos(null);
+    // A plain tap/click opens the device-appropriate way to type a value.
+    if (wasTap) (coarse ? setPadOpen : setTyping)(true);
+  }
+  // A pointercancel = the browser took the gesture (a vertical scroll under pan-y).
+  // Just drop the drag; it must NOT be treated as a tap.
+  function onPointerCancel() {
+    dragRef.current = null;
+    setScrubPos(null);
+  }
+  const fillPct = range
+    ? Math.min(100, Math.max(0, ((current - range.min) / (range.max - range.min)) * 100))
+    : 0;
+  const commit = (v) => {
+    const next = clamp(v, min, max);
+    if (next !== current) onChange(next);
+  };
+  if (typing) {
+    return (
+      <FieldRow {...row}>
+        <NumberInlineInput
+          value={current}
+          min={min}
+          max={max}
+          step={step}
+          onCommit={commit}
+          onDone={() => setTyping(false)}
+        />
+      </FieldRow>
+    );
+  }
+  return (
+    <FieldRow {...row}>
+      <div
+        ref={boxRef}
+        className={cx(
+          styles.input,
+          styles.numberScrub,
+          range ? styles.numberSlider : styles.numberGrip
+        )}
+        data-field="number"
+        style={{ touchAction: 'pan-y' }}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerCancel}>
+        {range ? (
+          <>
+            <div
+              className={styles.sliderFill}
+              style={{ width: `${fillPct}%` }}
+              aria-hidden="true"
+            />
+            <div
+              className={styles.sliderThumb}
+              style={{ left: `${fillPct}%` }}
+              aria-hidden="true"
+            />
+          </>
+        ) : (
+          <span className={styles.scrubGrip} aria-hidden="true">
+            ⋮⋮
+          </span>
+        )}
+        <span className={styles.numberValue}>{numberText(current)}</span>
+      </div>
+      {scrubPos ? (
+        <Overlay>
+          <div
+            className={styles.scrubBubble}
+            style={{ left: scrubPos.x, top: scrubPos.y - 40 }}
+            aria-hidden="true">
+            {numberText(current)}
+          </div>
+        </Overlay>
+      ) : null}
+      {padOpen ? (
+        <NumpadSheet
+          label={row.label}
+          value={current}
+          min={min}
+          max={max}
+          onCommit={commit}
+          onClose={() => setPadOpen(false)}
+        />
+      ) : null}
+    </FieldRow>
+  );
+}
+export function CheckboxField({ checked, onChange, ...row }) {
+  return (
+    <FieldRow {...row}>
+      <button
+        type="button"
+        className={cx(styles.checkbox, checked && styles.checkboxOn)}
+        data-field="checkbox"
+        role="checkbox"
+        aria-checked={!!checked}
+        onClick={() => onChange(!checked)}>
+        <svg className={styles.checkboxMark} viewBox="0 0 12 12" aria-hidden="true">
+          <path
+            d="M2 6.2L4.8 9 10 3"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </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.
+export function FieldNote({ children }) {
+  if (!children) return null;
+  return (
+    <div className={styles.fieldNote}>
+      <div className={styles.fieldNoteInner}>{children}</div>
+    </div>
+  );
+}
+export function ColorField({ value, onChange, ...row }) {
+  const hex = normalizeHex(value);
+  const alpha = hex.length === 9 ? hex.slice(7) : '';
+  const rgb = hex.slice(0, 7);
+  return (
+    <FieldRow {...row}>
+      <input
+        className={styles.colorInput}
+        data-field="color"
+        type="color"
+        value={rgb}
+        onChange={(event) => onChange(event.target.value + alpha)}
+      />
+    </FieldRow>
+  );
+}
+function normalizeHex(value) {
+  const raw = (value ?? '').trim();
+  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {
+    return '#' + raw.slice(1).replace(/./g, (c) => c + c);
+  }
+  if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(raw)) return raw;
+  return '#000000';
+}