stimeo-ui 0.16.0 → 0.17.0

package/dist/controllers/pointer_drag_controller.js

@@ -1,69 +1,47 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/pointer_drag_controller.ts
-
-// src/utils/arrow_step.ts
 function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
-// src/utils/detach_gate.ts
 var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
   #pending = false;
-  /**
-   * True while a probe is queued — the last disconnect was ambiguous and no
-   * reconnect has cancelled it yet. Read it from `connect()` to tell the
-   * reconnect half of an in-page move from a first connect: a controller whose
-   * initialisation restarts a measurement (a min-duration floor, an elapsed
-   * counter) must skip it for the move, where nothing actually restarted.
-   */
   get pending() {
     return this.#pending;
   }
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
   static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
+    return !host.element.isConnected || !_DetachGate.#listed(host);
+  }
   disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
+    const carried = _DetachGate.#carried(host);
+    if (!carried && _DetachGate.isDetached(host)) {
       this.#pending = false;
       teardown();
       return;
     }
     this.#pending = true;
-    queueMicrotask(() => {
+    const probe = () => {
       if (!this.#pending) return;
       this.#pending = false;
       teardown();
-    });
+    };
+    if (carried) setTimeout(probe, 0);
+    else queueMicrotask(probe);
+  }
+  static #carried(host) {
+    const element = host.element;
+    return !element.isConnected && element.closest("[data-turbo-permanent]") !== null && _DetachGate.#listed(host);
+  }
+  static #listed(host) {
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return tokens.includes(host.identifier);
   }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
   cancel() {
     this.#pending = false;
   }
 };
 
-// src/utils/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
@@ -72,7 +50,115 @@ function ownerOf(candidates, node) {
   return candidates[ownerIndex(candidates, node)] ?? null;
 }
 
-// src/utils/owned_pointer_session.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  constructor(run) {
+    this.#run = run;
+  }
+  activate() {
+    this.#active = true;
+  }
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var NUMBER_BOUNDS = {
+  nonNegative: { finite: true, min: 0 },
+  positive: { finite: true, exclusiveMin: 0 }};
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
 var OwnedPointerSession = class {
   #pointerId;
   #owner;
@@ -92,7 +178,6 @@ var OwnedPointerSession = class {
     } catch {
     }
   }
-  /** Releases capture and listeners, then reports the end exactly once. */
   end() {
     this.#finish("teardown");
   }
@@ -117,23 +202,21 @@ var OwnedPointerSession = class {
   };
 };
 
-// src/utils/transient_hooks.ts
 var TransientHooks = class {
   #attributes;
   constructor(options) {
     this.#attributes = options.attributes;
   }
-  /** Drops the declared hooks from `element`; what it carries besides stays. */
   reset(element) {
     for (const attribute of this.#attributes) element.removeAttribute(attribute);
   }
 };
 
-// src/controllers/pointer_drag_controller.ts
 var TRANSIENT_DRAG = new TransientHooks({ attributes: ["data-dragging"] });
 var TRANSIENT_GRAB = new TransientHooks({ attributes: ["data-grabbed"] });
 var NATIVE_KEY_OWNERS = "input, textarea, select, button, a[href], summary, [contenteditable]";
 var PointerDragController = class _PointerDragController extends Controller {
+  #numbers = new NumberValueReader();
   static targets = ["handle"];
   static values = {
     axis: { type: String, default: "both" },
@@ -142,30 +225,36 @@ var PointerDragController = class _PointerDragController extends Controller {
     disabled: { type: Boolean, default: false },
     follow: { type: Boolean, default: false }
   };
+  static valueConstraints = {
+    threshold: NUMBER_BOUNDS.nonNegative,
+    keyboardStep: NUMBER_BOUNDS.positive
+  };
   static actions = ["reset"];
   static events = ["start", "move", "end", "cancel"];
-  /** Marker attribute recording that this controller set the touch-action. */
   static #TOUCH_ACTION_MARKER = "data-pointer-drag-touch-action";
-  /** Marker attribute recording that this controller set `tabindex`. */
   static #TABINDEX_MARKER = "data-pointer-drag-tabindex";
   #pointer = null;
   #keyboard = null;
-  /** Committed follow offset from past drops; a new drag's deltas add onto it. */
   #followBase = { x: 0, y: 0 };
-  /** Decides whether a mid-session disconnect() is an in-page move or a detach. */
+  #gestureFollows = false;
+  #followOutput = null;
   #gate = new DetachGate();
+  #morphRender = new MorphRenderWatcher(() => {
+    for (const handle of this.#handles()) this.#prepareHandle(handle);
+    this.#reflectSession();
+  });
   connect() {
+    this.#morphRender.observe(this.element);
+    if (!this.#pointer && !this.#keyboard) this.#followOutput = null;
     this.#gate.cancel();
     if (!this.#pointer) TRANSIENT_DRAG.reset(this.element);
     if (!this.#keyboard) TRANSIENT_GRAB.reset(this.element);
-    if (this.followValue && !this.#pointer && !this.#keyboard) {
-      this.#followBase = this.#parseFollowBase();
-    }
     this.element.addEventListener("pointerdown", this.#onPointerDown);
     this.element.addEventListener("keydown", this.#onKeydown);
     if (!this.hasHandleTarget) this.#prepareHandle(this.element);
   }
   disconnect() {
+    this.#morphRender.disconnect();
     this.element.removeEventListener("pointerdown", this.#onPointerDown);
     this.element.removeEventListener("keydown", this.#onKeydown);
     if (this.#pointer || this.#keyboard) {
@@ -174,16 +263,6 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#teardown();
   }
-  /**
-   * Returns the element to its origin: drops the committed follow offset and the
-   * inline `translate` that carries it.
-   *
-   * In follow mode the inline `translate` belongs to this controller, and the
-   * committed offset lives in a field the DOM cannot reach — so a consumer that
-   * wants the element back at the start, or that has written a position of its
-   * own, needs this to make the two agree again. An in-flight drag is cancelled
-   * first, or its deltas would land on top of the offset just cleared.
-   */
   reset() {
     const live = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
     if (this.#pointer || this.#keyboard) this.#teardownSessions();
@@ -204,13 +283,6 @@ var PointerDragController = class _PointerDragController extends Controller {
     if (!this.hasHandleTarget) this.#prepareHandle(this.element);
     if (interrupted) this.#dispatchCancel(interrupted);
   }
-  /**
-   * Re-derives the handles' touch-action when the axis changes.
-   *
-   * Two layers, like the `tabindex` loan: the marker says the value was once
-   * ours, and the current inline value says it still is. A consumer that wrote
-   * its own `touch-action` after connect keeps it.
-   */
   axisValueChanged(_value, previousValue) {
     const lent = this.#touchActionFor(previousValue ?? this.axisValue);
     for (const handle of this.#handles()) {
@@ -219,7 +291,6 @@ var PointerDragController = class _PointerDragController extends Controller {
       handle.style.touchAction = this.#touchActionForAxis();
     }
   }
-  /** Cancels any in-flight session when the controller is disabled mid-drag. */
   disabledValueChanged() {
     if (!this.disabledValue) return;
     if (this.#pointer?.started || this.#keyboard) {
@@ -227,17 +298,13 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#teardownSessions();
   }
-  /**
-   * Arms a pointer drag on a handle; `start` waits for the threshold.
-   *
-   * @stimeoRuntimeOnly `disabled` decides whether this one pointer press starts a gesture.
-   */
   #onPointerDown = (event) => {
     if (this.disabledValue || this.#pointer || this.#keyboard || event.button !== 0) return;
     const handle = this.#handleFor(event.target);
     if (!handle) return;
     event.preventDefault();
     handle.focus();
+    this.#beginGesture();
     const session = {
       pointer: null,
       handle,
@@ -254,18 +321,13 @@ var PointerDragController = class _PointerDragController extends Controller {
     });
     this.#pointer = session;
   };
-  /**
-   * Applies one tracked move: threshold, hooks, follow offset, events.
-   *
-   * @stimeoRuntimeOnly `threshold` decides when this one pointer move starts the drag.
-   */
   #trackMove(session, event) {
     const [dx, dy] = this.#filterAxis(
       event.clientX - session.originX,
       event.clientY - session.originY
     );
     if (!session.started) {
-      if (Math.hypot(dx, dy) < this.thresholdValue) return;
+      if (Math.hypot(dx, dy) < this.#safeThreshold) return;
       session.started = true;
       this.element.setAttribute("data-dragging", "true");
       this.dispatch("start", {
@@ -279,13 +341,6 @@ var PointerDragController = class _PointerDragController extends Controller {
       detail: { dx, dy, x: event.clientX, y: event.clientY, pointerType: session.pointerType }
     });
   }
-  /**
-   * Closes the session and reports only the outcome the caller does not own.
-   *
-   * A teardown (detach, Escape, mid-drag disable, `reset`) is announced by the
-   * path that asked for it, so this one stays silent; `pointerup` below the
-   * threshold was a plain click, and `pointercancel` is an OS gesture takeover.
-   */
   #finishPointer(session, kind) {
     const { started, dx, dy, pointerType } = session;
     this.#pointer = null;
@@ -298,12 +353,6 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#dispatchCancel(pointerType);
   }
-  /**
-   * Keyboard alternative: Space/Enter grab & drop, arrows move, Escape cancels.
-   *
-   * @stimeoRuntimeOnly `disabled` decides whether this one key is taken and `keyboardStep` is the
-   *   distance of one keyboard move.
-   */
   #onKeydown = (event) => {
     if (this.disabledValue) return;
     const handle = this.#handleFor(event.target);
@@ -355,8 +404,8 @@ var PointerDragController = class _PointerDragController extends Controller {
       }
     });
   };
-  /** Enters the grabbed mode: `data-grabbed` on element + handle, then `start`. */
   #grabKeyboard(handle) {
+    this.#beginGesture();
     this.#keyboard = { handle, dx: 0, dy: 0 };
     this.element.setAttribute("data-grabbed", "true");
     handle.setAttribute("data-grabbed", "true");
@@ -369,9 +418,8 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#followCommit(session.dx, session.dy);
     this.dispatch("end", { detail: { dx: session.dx, dy: session.dy, pointerType: "keyboard" } });
   }
-  /** Maps an arrow key to a raw (unfiltered) `keyboardStep` delta. */
   #keyboardDelta(key) {
-    const step = this.keyboardStepValue;
+    const step = this.#safeKeyboardStep;
     switch (key) {
       case "ArrowRight":
         return [step, 0];
@@ -385,17 +433,11 @@ var PointerDragController = class _PointerDragController extends Controller {
         return null;
     }
   }
-  /**
-   * Zeroes the delta on the locked axis (`axis` = x | y | both).
-   *
-   * @stimeoRuntimeOnly `axis` filters the offset of one move to the allowed direction.
-   */
   #filterAxis(dx, dy) {
     if (this.axisValue === "x") return [dx, 0];
     if (this.axisValue === "y") return [0, dy];
     return [dx, dy];
   }
-  /** Silently closes a live pointer session; the caller announces the outcome. */
   #endPointerSession() {
     this.#pointer?.pointer?.end();
   }
@@ -404,28 +446,13 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#keyboard = null;
     this.element.removeAttribute("data-grabbed");
   }
-  /**
-   * Full teardown for a controller whose element is going away or lost its
-   * controller. Into a dead (detached) tree it is silent — consumers restore
-   * from their own `connect()`, not from a cancel event. But a detach that
-   * KEEPS the element (Turbo morph, `data-controller` removed) leaves the
-   * consumers alive and listening: an in-flight session must end in `cancel`
-   * there, or a composer like sortable strands its one-at-a-time session
-   * bookkeeping forever.
-   */
   #teardown() {
-    this.#gate.cancel();
     const interrupted = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
     this.#teardownSessions();
     for (const handle of this.#handles()) this.#restoreHandle(handle);
-    this.#followReset();
+    if (interrupted) this.#followReset();
     if (interrupted && this.element.isConnected) this.#dispatchCancel(interrupted);
   }
-  /**
-   * Silently tears down whatever session is live (disconnect / disabled /
-   * Escape). Composed from the two single-session teardowns so pointer and
-   * keyboard cleanup cannot diverge as either path evolves.
-   */
   #teardownSessions() {
     this.#endPointerSession();
     this.#clearKeyboardSession();
@@ -434,63 +461,52 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#followReset();
     this.dispatch("cancel", { detail: { pointerType } });
   }
-  /**
-   * Applies the in-flight offset to the element's `translate` (follow only).
-   *
-   * @stimeoRuntimeOnly `follow` decides whether this one move writes the offset as a translate; the
-   *   offset itself comes from the gesture.
-   */
+  #beginGesture() {
+    this.#gestureFollows = this.followValue;
+    if (this.#gestureFollows) this.#followBase = this.#parseFollowBase();
+  }
   #followMove(dx, dy) {
-    if (!this.followValue) return;
+    if (!this.#gestureFollows) return;
     this.#applyFollow(this.#followBase.x + dx, this.#followBase.y + dy);
   }
-  /**
-   * Folds a drop's deltas into the committed base offset (follow only).
-   *
-   * @stimeoRuntimeOnly `follow` decides whether the end of this one gesture keeps the offset as a
-   *   translate.
-   */
   #followCommit(dx, dy) {
-    if (!this.followValue) return;
+    if (!this.#gestureFollows) return;
     this.#followBase = { x: this.#followBase.x + dx, y: this.#followBase.y + dy };
     this.#applyFollow(this.#followBase.x, this.#followBase.y);
   }
-  /**
-   * Snaps back to the committed position (follow only) — the cancel contract.
-   *
-   * @stimeoRuntimeOnly `follow` decides whether cancelling this one gesture clears the translate it
-   *   wrote.
-   */
   #followReset() {
-    if (!this.followValue) return;
+    if (!this.#gestureFollows) return;
     this.#applyFollow(this.#followBase.x, this.#followBase.y);
   }
-  /**
-   * Writes the offset as the standalone CSS `translate` property — independent
-   * of `transform`, so an authored transform (scale, rotate…) is never
-   * clobbered. At the origin the property is removed to keep the DOM clean.
-   */
+  #reflectSession() {
+    if (this.#pointer?.started) this.element.setAttribute("data-dragging", "true");
+    else this.element.removeAttribute("data-dragging");
+    if (this.#keyboard) {
+      this.element.setAttribute("data-grabbed", "true");
+      this.#keyboard.handle.setAttribute("data-grabbed", "true");
+    } else {
+      this.element.removeAttribute("data-grabbed");
+      for (const handle of this.#handles()) handle.removeAttribute("data-grabbed");
+    }
+    const follows = this.#pointer || this.#keyboard ? this.#gestureFollows : this.followValue;
+    if (follows && this.#followOutput) {
+      this.#applyFollow(this.#followOutput.x, this.#followOutput.y);
+    }
+  }
   #applyFollow(x, y) {
+    this.#followOutput = { x, y };
     if (x === 0 && y === 0) this.element.style.removeProperty("translate");
     else this.element.style.setProperty("translate", `${x}px ${y}px`);
   }
-  /**
-   * Reads a committed follow offset back from the inline `translate`. Only the
-   * controller's own `<x>px <y>px` shape is recognized; anything else (an
-   * authored percentage, `none`, an empty string) starts the base at 0 — follow
-   * mode owns this property, per the class contract.
-   */
   #parseFollowBase() {
     const raw = this.element.style.getPropertyValue("translate").trim();
     const match = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/.exec(raw);
     if (!match) return { x: 0, y: 0 };
     return { x: Number(match[1]), y: Number(match[2] ?? "0") };
   }
-  /** The active handles: the `handle` targets, else the element itself. */
   #handles() {
     return this.hasHandleTarget ? this.handleTargets : [this.element];
   }
-  /** Resolves the handle owning an event target (the handle or a descendant). */
   #handleFor(target) {
     return ownerOf(this.#handles(), target);
   }
@@ -499,25 +515,14 @@ var PointerDragController = class _PointerDragController extends Controller {
     if (type === "touch" || type === "pen") return type;
     return "mouse";
   }
-  /** `touch-action` that lets the page keep panning on the locked axis only. */
   #touchActionForAxis() {
     return this.#touchActionFor(this.axisValue);
   }
-  /** The `touch-action` an `axis` declaration lends, for any axis value. */
   #touchActionFor(axis) {
     if (axis === "x") return "pan-y";
     if (axis === "y") return "pan-x";
     return "none";
   }
-  /**
-   * Establishes the handle contract: a `touch-action` derived from `axis`
-   * (marker-guarded so an authored inline value wins and reconnects stay
-   * idempotent) and focusability for the keyboard path (`tabindex="0"` only when
-   * the author supplied none — prefer a real `<button>` handle). Both additions
-   * are marker-owned so `#restoreHandle` reverts them symmetrically on teardown.
-   *
-   * @stimeoRenderRoot
-   */
   #prepareHandle(handle) {
     const lent = this.#touchActionForAxis();
     const marked = handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER);
@@ -530,12 +535,10 @@ var PointerDragController = class _PointerDragController extends Controller {
       handle.setAttribute(_PointerDragController.#TABINDEX_MARKER, "true");
     }
   }
-  /** Whether the key belongs to a native control or editing surface in the handle. */
   #ownsNativeKeys(target, handle) {
     const owner = target?.closest(NATIVE_KEY_OWNERS) ?? null;
     return owner !== null && owner !== handle && handle.contains(owner);
   }
-  /** Reverts the marker-owned touch-action + tabindex (authored values untouched). */
   #restoreHandle(handle) {
     if (handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
       if (handle.style.touchAction === this.#touchActionForAxis()) {
@@ -553,8 +556,25 @@ var PointerDragController = class _PointerDragController extends Controller {
       if (!ours) handle.removeAttribute(_PointerDragController.#TABINDEX_MARKER);
     }
   }
+  get #safeThreshold() {
+    return this.#numbers.read(
+      this,
+      "threshold",
+      this.thresholdValue,
+      _PointerDragController.values.threshold.default,
+      _PointerDragController.valueConstraints.threshold
+    );
+  }
+  get #safeKeyboardStep() {
+    return this.#numbers.read(
+      this,
+      "keyboardStep",
+      this.keyboardStepValue,
+      _PointerDragController.values.keyboardStep.default,
+      _PointerDragController.valueConstraints.keyboardStep
+    );
+  }
 };
 
 export { PointerDragController };
-//# sourceMappingURL=pointer_drag_controller.js.map
 //# sourceMappingURL=pointer_drag_controller.js.map