castle-web-cli 0.4.181 → 0.4.183

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

@@ -1,8 +1,18 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { icons } from './icons';
+import { FieldRow, useMediaQuery } from './fields/fields';
 import styles from './ui.module.css';
 export { styles };
+export {
+  CheckboxField,
+  ColorField,
+  FieldNote,
+  FieldRow,
+  NumberField,
+  TextField,
+  useCoarsePointer,
+} from './fields/fields';
 export const theme = {
   transparentChecker:
     'repeating-linear-gradient(45deg, #121212, #121212 4px, #1a1a1a 4px, #1a1a1a 8px)',
@@ -46,21 +56,6 @@ export function useElementSize(ref) {
   }, [ref]);
   return size;
 }
-// Live `matchMedia` as a hook: re-renders when the query starts/stops matching
-// (plugging in a mouse, rotating, resizing a panel).
-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 viewport is in the compact (≤600px) layout, where the file
 // list and inspector become bottom sheets. Mirrors the `@media (max-width:
 // 600px)` breakpoint so JS behavior (toggle target) tracks the CSS layout.
@@ -72,14 +67,6 @@ function useMediaQuery(query) {
 export function useCompactViewport() {
   return useMediaQuery('(max-width: 600px)');
 }
-// 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 function AppShell({ children }) {
   return <div className={styles.appShell}>{children}</div>;
 }
@@ -354,71 +341,6 @@ export function Panel({ title, action, children, overridden = false }) {
     </section>
   );
 }
-// ---------------------------------------------------------------------------
-// THE FIELD SET BELOW IS COPIED INTO THE SHELL. Keep the two in sync by hand.
-//
-// `FieldRow`, `TextField`, `NumberField` (with `NumpadSheet`,
-// `NumberInlineInput`, `snapToStep` and the SCRUB_* constants), `CheckboxField`,
-// `ColorField` and `FieldNote` are ported into
-// `cli/src/shell/paramFields.tsx`, which renders the Params view over a source
-// file's PARAMS object -- so a param scrubs exactly like a behavior prop. Their
-// styles are copied the same way, from `ui.module.css` into
-// `cli/src/shell/kitPanels.css`.
-//
-// It is a copy because there is no seam to share through: the shell cannot
-// import kit code, kits have no shared package, and the SDK ships runtime
-// services with no React in it. Nothing enforces the mirroring, so a change here
-// -- a new field type, a scrub-feel tweak, a fix -- has to be made there too, or
-// the two inspectors drift apart.
-//
-// The shell copy deliberately drops the instance-override chrome (`overridden`,
-// the "Default: X [Reset]" sub-line): a module-level constant has no template to
-// override. Don't port that part back.
-//
-// If you find yourself making this a THIRD copy, make it a shared source instead.
-// ---------------------------------------------------------------------------
-
-// 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 === '') return 'none';
-  return String(value);
-}
-export function FieldRow({ label, overridden, defaultValue, onReset, children }) {
-  const row = (
-    <label className={cx(styles.fieldRow, overridden && styles.fieldRowOverridden)}>
-      <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({ label, value, onChange, overridden, defaultValue, onReset }) {
-  return (
-    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
-      <input
-        className={styles.input}
-        value={value ?? ''}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    </FieldRow>
-  );
-}
 export function TextAreaField({
   label,
   value,
@@ -439,359 +361,6 @@ export function TextAreaField({
     </FieldRow>
   );
 }
-function numberText(v) {
-  return Number.isFinite(v) ? String(v) : '0';
-}
-
-// 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',
-];
-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, step, onCommit, onClose }) {
-  const [draft, setDraft] = useState(() => numberText(value));
-  const pristineRef = useRef(true); // first digit replaces the seeded value
-  function finish() {
-    let v = Number(draft);
-    if (!Number.isFinite(v)) v = value;
-    if (min != null && v < min) v = min;
-    if (max != null && v > max) v = max;
-    onCommit(v);
-    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 createPortal(
-    <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>,
-    document.body
-  );
-}
-
-// 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)));
-}
-
-export function NumberField({ label, value, onChange, min, max, step = 1, overridden, defaultValue, onReset }) {
-  const current = Number.isFinite(value) ? (value ?? 0) : 0;
-  // 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.
-  const bounded = min != null && max != null && max > min;
-  // 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 clampVal(v) {
-    if (min != null && v < min) v = min;
-    if (max != null && v > max) v = max;
-    return v;
-  }
-  function scrubTo(v) {
-    if (step) v = snapToStep(v, step);
-    v = clampVal(v);
-    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,
-      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 (bounded) {
-      const rect = boxRef.current.getBoundingClientRect();
-      const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
-      scrubTo(min + frac * (max - min));
-    } 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) * 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 = bounded ? Math.min(100, Math.max(0, ((current - min) / (max - min)) * 100)) : 0;
-  const commit = (v) => {
-    const next = clampVal(v);
-    if (next !== current) onChange(next);
-  };
-  if (typing) {
-    return (
-      <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
-        <NumberInlineInput
-          value={current}
-          min={min}
-          max={max}
-          step={step}
-          onCommit={commit}
-          onDone={() => setTyping(false)}
-        />
-      </FieldRow>
-    );
-  }
-  return (
-    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
-      <div
-        ref={boxRef}
-        className={cx(styles.input, styles.numberScrub, bounded ? styles.numberSlider : styles.numberGrip)}
-        style={{ touchAction: 'pan-y' }}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={onPointerUp}
-        onPointerCancel={onPointerCancel}>
-        {bounded ? (
-          <>
-            <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
-        ? createPortal(
-            <div
-              className={styles.scrubBubble}
-              style={{ left: scrubPos.x, top: scrubPos.y - 40 }}
-              aria-hidden="true">
-              {numberText(current)}
-            </div>,
-            document.body
-          )
-        : null}
-      {padOpen ? (
-        <NumpadSheet
-          label={label}
-          value={current}
-          min={min}
-          max={max}
-          step={step}
-          onCommit={commit}
-          onClose={() => setPadOpen(false)}
-        />
-      ) : null}
-    </FieldRow>
-  );
-}
-export function CheckboxField({ label, checked, onChange, overridden, defaultValue, onReset }) {
-  return (
-    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
-      <button
-        type="button"
-        className={cx(styles.checkbox, checked && styles.checkboxOn)}
-        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({ label, value, onChange, overridden, defaultValue, onReset }) {
-  const hex = normalizeHex(value);
-  const alpha = hex.length === 9 ? hex.slice(7) : '';
-  const rgb = hex.slice(0, 7);
-  return (
-    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
-      <input
-        className={styles.colorInput}
-        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';
-}
 export function isHexColor(value) {
   return (
     typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
@@ -1198,6 +767,19 @@ function longestPathWidth(list, paths) {
   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 ''.
@@ -1247,13 +829,7 @@ export function FileField({
       }
       setPos({ top, left, width });
     }
-    place();
-    window.addEventListener('resize', place);
-    window.addEventListener('scroll', place, true);
-    return () => {
-      window.removeEventListener('resize', place);
-      window.removeEventListener('scroll', place, true);
-    };
+    return followAnchor(place);
   }, [open, paths.length]);
 
   useEffect(() => {