castle-web-cli 0.4.104 → 0.4.106

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

@@ -286,87 +286,222 @@ export function TextField({ label, value, onChange, overridden, defaultValue, on
     </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;
+
 export function NumberField({ label, value, onChange, min, max, step = 1, overridden, defaultValue, onReset }) {
   const current = Number.isFinite(value) ? (value ?? 0) : 0;
-  const [draft, setDraft] = useState(String(current));
-  const editingRef = useRef(false);
-  const cancelRef = useRef(false);
-  // keep the draft in sync with the committed value while not editing
-  if (!editingRef.current && draft !== String(current)) {
-    setDraft(String(current));
+  // 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;
+  const [padOpen, setPadOpen] = 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 commit(raw) {
-    let next = Number(raw);
-    if (!Number.isFinite(next)) next = current;
-    if (min != null && next < min) next = min;
-    if (max != null && next > max) next = max;
-    setDraft(String(next));
-    onChange(next);
+  function scrubTo(v) {
+    if (step) v = Math.round(v / step) * step;
+    v = clampVal(v);
+    if (v !== current) onChange(v);
   }
-  function stepBy(delta) {
-    let next = current + delta;
-    if (min != null && next < min) next = min;
-    if (max != null && next > max) next = max;
-    setDraft(String(next));
-    onChange(next);
+  function onPointerDown(event) {
+    if (padOpen) 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);
+    if (wasTap) setPadOpen(true); // a plain tap opens the numpad
+  }
+  // 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;
   return (
     <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
-      <div className={styles.numberField}>
-        <input
-          className={cx(styles.input, styles.numberInput)}
-          type="number"
+      <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}
-          value={draft}
-          onFocus={() => {
-            editingRef.current = true;
-          }}
-          onChange={(event) => setDraft(event.target.value)}
-          onBlur={(event) => {
-            editingRef.current = false;
-            if (cancelRef.current) {
-              cancelRef.current = false;
-              setDraft(String(current));
-              return;
-            }
-            commit(event.target.value);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              commit(event.currentTarget.value);
-              event.currentTarget.blur();
-            } else if (event.key === 'Escape') {
-              event.preventDefault();
-              cancelRef.current = true;
-              setDraft(String(current));
-              event.currentTarget.blur();
-            }
+          onCommit={(v) => {
+            if (v !== current) onChange(v);
           }}
+          onClose={() => setPadOpen(false)}
         />
-        <div className={styles.numberSteppers}>
-          <button
-            type="button"
-            className={styles.numberStepper}
-            tabIndex={-1}
-            aria-label="Increment"
-            disabled={max != null && current >= max}
-            onClick={() => stepBy(step)}>
-            <Icon name="chevron-up" />
-          </button>
-          <button
-            type="button"
-            className={styles.numberStepper}
-            tabIndex={-1}
-            aria-label="Decrement"
-            disabled={min != null && current <= min}
-            onClick={() => stepBy(-step)}>
-            <Icon name="chevron-down" />
-          </button>
-        </div>
-      </div>
+      ) : null}
     </FieldRow>
   );
 }
@@ -494,9 +629,11 @@ function saveStoredSheetHeight(key, px) {
     // storage full/unavailable -- height still works in-memory this session
   }
 }
-export function useMobileSheet({ open = true, baseClassName, storageKey }) {
+export function useMobileSheet({ open = true, baseClassName, storageKey, defaultPeek = false }) {
   const [height, setHeightState] = useState(() =>
-    clampSheetHeight(loadStoredSheetHeight(storageKey) ?? sheetSizes().expanded)
+    clampSheetHeight(
+      loadStoredSheetHeight(storageKey) ?? (defaultPeek ? sheetSizes().peek : sheetSizes().expanded)
+    )
   );
   const [dragging, setDragging] = useState(false);
   const heightRef = useRef(height);

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

@@ -1191,6 +1191,160 @@
   border-bottom: 1px solid var(--castle-inspector-divider);
 }
 
+/* Number fields are drag scrubbers: drag the field to change the value — a bounded
+   field (min AND max) maps the pointer across [min,max] like a slider and shows a
+   fill; an unbounded field scrubs relatively and into negatives — tap to type. The
+   input sits transparent on top and only takes pointer events while editing, so a
+   drag reaches the box; a tap focuses it (JS) to raise the keyboard. */
+/* 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;
+}
+
+.numpadValueLabel {
+  color: var(--castle-inspector-muted);
+  font-size: 13px;
+}
+
+.numpadValueNum {
+  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;
+}
+
 .numberStepper:hover {
   background: var(--castle-inspector-input-bg);
   color: var(--castle-inspector-text);
@@ -1358,6 +1512,14 @@
   display: none;
 }
 
+/* Stack the tool rail and the undo/redo rail vertically (the shared rule above is
+   a flex row, which pushed the second rail out of the 50px column). */
+.artboardToolColumn {
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
 .drawingToolColumn {
   display: flex;
   align-items: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.104",
+  "version": "0.4.106",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"