castle-web-cli 0.4.105 → 0.4.107

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

@@ -0,0 +1,145 @@
+import { useEffect, useRef } from 'react';
+
+// A multi-finger contact resolves to a TAP (undo/redo) only if the whole contact
+// is this brief and never moved past the slop; longer or larger is a drag.
+const TAP_MAX_MS = 450;
+// Pinch/pan must move this many px (spread or centroid) before it's treated as a
+// drag. Under it the two fingers are still a candidate tap and nothing is applied
+// — this is what keeps a two-finger TAP (undo) cleanly apart from a pinch.
+const GESTURE_SLOP = 10;
+
+// Shared touch gestures for the canvas editors (scene + pxart):
+//   one finger        -> the editor's own tool (draw / select), untouched here
+//   two-finger drag   -> pinch-zoom about the centroid + pan  (onGestureMove)
+//   two-finger TAP    -> undo   (onUndo)
+//   three-finger TAP  -> redo   (onRedo)     [Procreate convention]
+//
+// Tap resolution waits for EVERY finger to lift and then keys off the PEAK finger
+// count reached during the contact — so it doesn't matter whether the fingers land
+// or lift together (an early first-lift used to resolve a three-finger tap as two).
+//
+// A second finger aborts the in-flight one-finger action (onGestureStart) so a
+// gesture never strands a half-stroke. Gesture touches are stopPropagation'd so
+// they never reach the editor's own pointer handlers. onGestureMove emits one
+// step: { factor, cx, cy, dx, dy } — a zoom factor about the pinch centroid plus
+// the centroid's screen-space movement — which each editor applies its own way.
+// The target must have `touch-action: none` for the pinch/pan to beat the browser;
+// the taps work without it (a tap doesn't move, so the browser never scrolls).
+export function useTwoFingerZoomPan({
+  targetRef,
+  enabled = true,
+  onGestureStart,
+  onGestureMove,
+  onGestureEnd,
+  onUndo,
+  onRedo,
+}) {
+  // Callbacks in a ref so the listeners attach once and never need re-binding.
+  const cb = useRef(null);
+  cb.current = { onGestureStart, onGestureMove, onGestureEnd, onUndo, onRedo };
+  useEffect(() => {
+    if (!enabled) return undefined;
+    const el = targetRef.current;
+    if (!el) return undefined;
+    const pts = new Map(); // pointerId -> { x, y }
+    // Per touch-sequence state (a sequence = first finger down … all fingers up):
+    let maxFingers = 0; // peak simultaneous fingers — decides undo (2) vs redo (3)
+    let multiStart = 0; // timeStamp the contact first reached two fingers
+    let startDist = 0;
+    let startCx = 0;
+    let startCy = 0;
+    let committed = false; // moved past slop → a pinch/pan drag, not a tap
+    let lastDist = 0;
+    let lastCx = 0;
+    let lastCy = 0;
+    const isTouch = (event) => event.pointerType === 'touch';
+    const twoFinger = () => {
+      const [a, b] = [...pts.values()];
+      return {
+        cx: (a.x + b.x) / 2,
+        cy: (a.y + b.y) / 2,
+        dist: Math.hypot(a.x - b.x, a.y - b.y),
+      };
+    };
+    const onDown = (event) => {
+      if (!isTouch(event)) return;
+      pts.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (pts.size > maxFingers) maxFingers = pts.size;
+      if (pts.size === 2) {
+        const m = twoFinger();
+        multiStart = event.timeStamp;
+        startDist = lastDist = m.dist;
+        startCx = lastCx = m.cx;
+        startCy = lastCy = m.cy;
+        committed = false;
+        cb.current.onGestureStart?.(); // abort any in-flight one-finger action
+      }
+      if (pts.size >= 2) event.stopPropagation();
+    };
+    const onMove = (event) => {
+      if (!isTouch(event) || !pts.has(event.pointerId)) return;
+      pts.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (pts.size < 2) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (pts.size !== 2) return; // zoom/pan is a two-finger interaction only
+      const m = twoFinger();
+      if (!committed) {
+        const spread = Math.abs(m.dist - startDist);
+        const slid = Math.hypot(m.cx - startCx, m.cy - startCy);
+        if (spread <= GESTURE_SLOP && slid <= GESTURE_SLOP) return; // still a candidate tap
+        committed = true;
+        // Reset the baseline to here so the first applied step doesn't jump by the
+        // whole slop distance.
+        lastDist = m.dist;
+        lastCx = m.cx;
+        lastCy = m.cy;
+        return;
+      }
+      const factor = lastDist > 0 && m.dist > 0 ? m.dist / lastDist : 1;
+      cb.current.onGestureMove?.({
+        factor,
+        cx: m.cx,
+        cy: m.cy,
+        dx: m.cx - lastCx,
+        dy: m.cy - lastCy,
+      });
+      lastDist = m.dist;
+      lastCx = m.cx;
+      lastCy = m.cy;
+    };
+    const onUp = (event) => {
+      if (pts.size >= 2 || committed) event.stopPropagation();
+      if (!pts.delete(event.pointerId)) return;
+      if (committed && pts.size < 2) cb.current.onGestureEnd?.();
+      if (pts.size > 0) return;
+      // Every finger is up — resolve the whole contact. A still (never a drag),
+      // brief multi-finger tap is undo at peak 2, redo at peak 3. Keying off the
+      // peak count makes it immune to the order fingers landed or lifted.
+      if (!committed && maxFingers >= 2 && event.timeStamp - multiStart < TAP_MAX_MS) {
+        if (maxFingers === 2) cb.current.onUndo?.();
+        else if (maxFingers === 3) cb.current.onRedo?.();
+      }
+      maxFingers = 0;
+      committed = false;
+      multiStart = 0;
+    };
+    // CAPTURE phase, not bubble: the artboard canvas captures the first finger
+    // (startTool → setPointerCapture) and consumes touches, so a bubble-phase
+    // listener misses fingers landing on/near it — three-finger taps rarely
+    // registered there. Capturing means we see every pointer BEFORE any descendant
+    // can swallow it, so the finger count is reliable wherever the taps land; and
+    // stopPropagation on the 2nd/3rd finger then keeps them out of the canvas too.
+    const opts = { passive: false, capture: true };
+    el.addEventListener('pointerdown', onDown, opts);
+    el.addEventListener('pointermove', onMove, opts);
+    el.addEventListener('pointerup', onUp, opts);
+    el.addEventListener('pointercancel', onUp, opts);
+    return () => {
+      el.removeEventListener('pointerdown', onDown, opts);
+      el.removeEventListener('pointermove', onMove, opts);
+      el.removeEventListener('pointerup', onUp, opts);
+      el.removeEventListener('pointercancel', onUp, opts);
+    };
+  }, [targetRef, enabled]);
+}

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.105",
+  "version": "0.4.107",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"
@@ -8,7 +8,7 @@
   "scripts": {
     "build": "rm -rf dist && tsc && vite build && cp -R src/castle-host dist/castle-host && rm -rf kits && cp -R ../kits kits",
     "dev": "tsc --watch",
-    "check": "eslint . && jscpd && tsc --noEmit"
+    "check": "eslint . && jscpd && tsc --noEmit && tsc --noEmit -p src/shell/tsconfig.json"
   },
   "jscpd": {
     "path": [