stimeo-ui 0.15.0 → 0.17.0

data/dist/controllers/range_slider_controller.js

@@ -1,13 +1,9 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/range_slider_controller.ts
-
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// src/utils/arrow_step.ts
 function logicalArrowKey(key, element) {
   if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
   if (!isRtl(element)) return key;
@@ -18,27 +14,42 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
-// src/utils/microtask_coalescer.ts
+function writeField(field, value) {
+  if (field.value === value) return false;
+  field.value = value;
+  return true;
+}
+function commitField(target) {
+  target.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+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;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
   constructor(run) {
     this.#run = run;
   }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
   activate() {
     this.#active = true;
   }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
   cancel() {
     this.#active = false;
     this.#queued = false;
     this.#generation += 1;
   }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -51,60 +62,130 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/owned_pointer_session.ts
+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 MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
+var NUMBER_BOUNDS = {
+  finite: { finite: true },
+  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;
+  #pointerId;
   #owner;
   #handlers;
   #abort = new AbortController();
   #active = true;
   constructor(start, owner, handlers) {
-    this.pointerId = start.pointerId;
+    this.#pointerId = start.pointerId;
     this.#owner = owner;
     this.#handlers = handlers;
     const { signal } = this.#abort;
     owner.ownerDocument.addEventListener("pointermove", this.#onMove, { signal });
     owner.ownerDocument.addEventListener("pointerup", this.#onEndEvent, { signal });
     owner.ownerDocument.addEventListener("pointercancel", this.#onEndEvent, { signal });
-    owner.addEventListener("lostpointercapture", this.#onLostCapture, { signal });
     try {
-      owner.setPointerCapture?.(this.pointerId);
+      owner.setPointerCapture?.(this.#pointerId);
     } catch {
     }
   }
-  /** Whether this session still owns its pointer and listeners. */
-  get active() {
-    return this.#active;
-  }
-  /** Whether `event` belongs to the initiating pointer of the live session. */
-  owns(event) {
-    return this.#active && event.pointerId === this.pointerId;
-  }
-  /** Releases capture/listeners and invokes the end callback exactly once. */
   end() {
+    this.#finish("teardown");
+  }
+  #finish(kind) {
     if (!this.#active) return;
     this.#active = false;
     this.#abort.abort();
     try {
-      this.#owner.releasePointerCapture?.(this.pointerId);
+      this.#owner.releasePointerCapture?.(this.#pointerId);
     } catch {
     }
-    this.#handlers.end?.();
+    this.#handlers.end?.(kind);
+  }
+  #owns(event) {
+    return this.#active && event.pointerId === this.#pointerId;
   }
   #onMove = (event) => {
-    if (this.owns(event)) this.#handlers.move(event);
+    if (this.#owns(event)) this.#handlers.move(event);
   };
   #onEndEvent = (event) => {
-    if (this.owns(event)) this.end();
-  };
-  #onLostCapture = (event) => {
-    const pointerId = event.pointerId;
-    if (typeof pointerId === "number" && pointerId !== this.pointerId) return;
-    this.end();
+    if (this.#owns(event)) this.#finish(event.type === "pointerup" ? "up" : "cancel");
   };
 };
 
-// src/utils/range.ts
 function rangeFraction(value, min, max) {
   const span = max - min;
   if (!(span > 0)) return 0;
@@ -120,7 +201,6 @@ function rangeFraction(value, min, max) {
   return Math.min(1, Math.max(0, fraction));
 }
 
-// src/utils/stepped_value.ts
 function effectiveStep(step) {
   return Number.isFinite(step) && step > 0 ? step : 1;
 }
@@ -226,13 +306,16 @@ function finiteFallback(min, max) {
   return 0;
 }
 
-// src/controllers/range_slider_controller.ts
 var START_PROPERTY = "--stimeo--range-slider-start";
 var END_PROPERTY = "--stimeo--range-slider-end";
 var DEFAULT_MIN = 0;
 var DEFAULT_MAX = 100;
-var RangeSliderController = class extends Controller {
-  static targets = ["track", "startThumb", "endThumb"];
+var RangeSliderController = class _RangeSliderController extends Controller {
+  #numbers = new NumberValueReader();
+  #fieldWrites = /* @__PURE__ */ new WeakMap();
+  #moves = new MoveCounter();
+  #move = 0;
+  static targets = ["track", "startThumb", "endThumb", "startField", "endField"];
   static values = {
     min: { type: Number, default: DEFAULT_MIN },
     max: { type: Number, default: DEFAULT_MAX },
@@ -241,51 +324,45 @@ var RangeSliderController = class extends Controller {
     end: { type: Number, default: 100 },
     logicalTrack: { type: Boolean, default: false }
   };
+  static valueConstraints = {
+    min: NUMBER_BOUNDS.finite,
+    max: NUMBER_BOUNDS.finite,
+    step: NUMBER_BOUNDS.positive,
+    start: NUMBER_BOUNDS.finite,
+    end: NUMBER_BOUNDS.finite
+  };
   static actions = ["onKeydown", "onPointerDown"];
-  static events = ["change"];
-  /** One initiating pointer owns each live drag and its stable target snapshot. */
+  static events = ["change", "reconcile"];
   #drag = null;
-  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
+  #settled = { start: DEFAULT_MIN, end: DEFAULT_MAX };
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
   }
-  /**
-   * Collapses a morph that swaps render inputs into one repaint, and refuses the
-   * pass Stimulus delivers before `connect()`.
-   */
-  #repaint = new MicrotaskCoalescer(() => this.#render());
+  #repaint = new MorphRenderWatcher(() => this.#render());
   connect() {
-    this.#repaint.activate();
-    const range = this.#effectiveRange;
-    const pair = this.#currentPair(range);
-    this.#commit(pair.start, pair.end, null, false);
+    this.#repaint.observe(this.element);
+    this.#settled = this.#currentPair(this.#effectiveRange);
+    this.#render();
   }
-  /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
-    this.#repaint.cancel();
+    this.#repaint.disconnect();
     this.#endDrag();
   }
-  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
   minValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
   maxValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `step` at runtime. */
   stepValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `start` at runtime. */
   startValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `end` at runtime. */
   endValueChanged() {
     this.#repaint.schedule();
   }
-  /** Hydrates a replacement start thumb and restores live-drag focus ownership. */
   startThumbTargetConnected(thumb) {
     const range = this.#effectiveRange;
     const pair = this.#currentPair(range);
@@ -297,11 +374,10 @@ var RangeSliderController = class extends Controller {
     }
     this.#repaint.schedule();
   }
-  /** Drops a stale start-thumb reference without orphaning the track gesture. */
   startThumbTargetDisconnected(thumb) {
     if (this.#drag?.kind === "start" && this.#drag.thumb === thumb) this.#drag.thumb = null;
+    this.#repaint.schedule();
   }
-  /** Hydrates a replacement end thumb and restores live-drag focus ownership. */
   endThumbTargetConnected(thumb) {
     const range = this.#effectiveRange;
     const pair = this.#currentPair(range);
@@ -313,20 +389,30 @@ var RangeSliderController = class extends Controller {
     }
     this.#repaint.schedule();
   }
-  /** Drops a stale end-thumb reference without orphaning the track gesture. */
+  startFieldTargetConnected() {
+    this.#repaint.schedule();
+  }
+  startFieldTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  endFieldTargetConnected() {
+    this.#repaint.schedule();
+  }
+  endFieldTargetDisconnected() {
+    this.#repaint.schedule();
+  }
   endThumbTargetDisconnected(thumb) {
     if (this.#drag?.kind === "end" && this.#drag.thumb === thumb) this.#drag.thumb = null;
+    this.#repaint.schedule();
   }
-  /** Ends a gesture whose geometry target disappeared or ceased being a target. */
   trackTargetDisconnected(track) {
     if (this.#drag?.track === track) this.#endDrag();
   }
-  /** Keyboard stepping for whichever thumb is focused (the action's element). */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     const thumb = event.currentTarget;
-    const isStart = this.hasStartThumbTarget && thumb === this.startThumbTarget;
-    const isEnd = this.hasEndThumbTarget && thumb === this.endThumbTarget;
+    const isStart = this.startThumbTargets.includes(thumb);
+    const isEnd = this.endThumbTargets.includes(thumb);
     const effectiveRange = this.#effectiveRange;
     const pair = this.#currentPair(effectiveRange);
     let kind;
@@ -380,7 +466,6 @@ var RangeSliderController = class extends Controller {
     event.preventDefault();
     this.#moveThumb(kind, next);
   }
-  /** Begins a pointer drag on the track, moving the thumb nearest the press. */
   onPointerDown(event) {
     if (event.button !== 0 || this.#drag || !this.hasTrackTarget || !this.hasStartThumbTarget || !this.hasEndThumbTarget) {
       return;
@@ -413,7 +498,6 @@ var RangeSliderController = class extends Controller {
     });
     this.#drag = drag;
   }
-  /** Maps a pointer X coordinate to a raw value using the track geometry. */
   #valueFromClientX(clientX, mirrored, track) {
     const rect = track.getBoundingClientRect();
     if (rect.width === 0) return null;
@@ -422,12 +506,6 @@ var RangeSliderController = class extends Controller {
     const range = this.#effectiveRange;
     return range.min + fraction * (range.max - range.min);
   }
-  /**
-   * Chooses the closest thumb while keeping an overlapped pair expandable.
-   * Ordinary midpoint ties stay deterministic on `start`; at an overlap, a
-   * press above the shared value selects `end` and a press below selects
-   * `start`.
-   */
   #nearestThumb(value, pair) {
     const startDistance = Math.abs(value - pair.start);
     const endDistance = Math.abs(value - pair.end);
@@ -435,50 +513,72 @@ var RangeSliderController = class extends Controller {
     if (pair.start === pair.end && value > pair.start) return "end";
     return "start";
   }
-  /** Moves one thumb to a new raw value, keeping the pair ordered. */
   #moveThumb(kind, raw) {
     const pair = this.#currentPair(this.#effectiveRange);
     if (kind === "start") {
-      this.#commit(raw, pair.end, "start", true);
+      this.#commit(raw, pair.end, "start");
     } else {
-      this.#commit(pair.start, raw, "end", true);
+      this.#commit(pair.start, raw, "end");
     }
   }
-  /**
-   * Clamps and snaps `start`/`end`, enforces `start ≤ end`, stores the pair, and
-   * reflects it onto the thumbs' ARIA attributes and the range custom
-   * properties. Dispatches `stimeo--range-slider:change` only when a
-   * user-driven update changes the normalized pair, with
-   * `{ start: number, end: number }` in `detail`.
-   */
-  #commit(start, end, moving, notify) {
+  #commit(start, end, moving) {
     const range = this.#effectiveRange;
-    const previous = this.#currentPair(range);
     let nextStart = snapSteppedValue(start, range);
     let nextEnd = snapSteppedValue(end, range);
     if (nextStart > nextEnd) {
       if (moving === "start") nextStart = nextEnd;
-      else if (moving === "end") nextEnd = nextStart;
-      else [nextStart, nextEnd] = [nextEnd, nextStart];
+      else nextEnd = nextStart;
     }
+    const pair = { start: nextStart, end: nextEnd };
+    const reported = this.#settled;
+    this.#settled = pair;
+    const changed = nextStart !== reported.start || nextEnd !== reported.end;
+    if (changed) this.#move = this.#moves.record();
+    const move = this.#move;
     if (!Object.is(this.startValue, nextStart)) this.startValue = nextStart;
     if (!Object.is(this.endValue, nextEnd)) this.endValue = nextEnd;
-    const pair = { start: nextStart, end: nextEnd };
     this.#renderPair(pair, range);
-    if (notify && (nextStart !== previous.start || nextEnd !== previous.end)) {
+    const fields = this.#mirrorFields(pair);
+    for (const [field, value, write] of fields) {
+      if (field.value === value && this.#fieldWrites.get(field) === write) commitField(field);
+    }
+    if (!this.#moves.isLatest(move)) return;
+    if (changed) {
       this.dispatch("change", { detail: { start: nextStart, end: nextEnd } });
     }
   }
-  /**
-   * Reflects morph-supplied Values without writing them back or dispatching.
-   *
-   * @stimeoRenderRoot
-   */
   #render() {
     const range = this.#effectiveRange;
-    this.#renderPair(this.#currentPair(range), range);
+    const pair = this.#currentPair(range);
+    this.#renderPair(pair, range);
+    this.#mirrorFields(pair);
+    const settled = this.#settled;
+    if (pair.start === settled.start && pair.end === settled.end) return;
+    this.#settled = pair;
+    this.#move = this.#moves.record();
+    this.dispatch("reconcile", { detail: { start: pair.start, end: pair.end } });
+  }
+  #writeField(field, value) {
+    if (!writeField(field, value)) return false;
+    this.#fieldWrites.set(field, (this.#fieldWrites.get(field) ?? 0) + 1);
+    return true;
+  }
+  #mirrorFields(pair) {
+    const fields = [];
+    if (this.hasStartFieldTarget) {
+      const field = this.startFieldTarget;
+      const value = String(pair.start);
+      if (this.#writeField(field, value))
+        fields.push([field, value, this.#fieldWrites.get(field) ?? 0]);
+    }
+    if (this.hasEndFieldTarget) {
+      const field = this.endFieldTarget;
+      const value = String(pair.end);
+      if (this.#writeField(field, value))
+        fields.push([field, value, this.#fieldWrites.get(field) ?? 0]);
+    }
+    return fields;
   }
-  /** Reflects one normalized pair onto both thumbs and CSS properties. */
   #renderPair(pair, range) {
     if (this.hasStartThumbTarget) {
       this.#renderStartThumb(this.startThumbTarget, pair, range);
@@ -488,24 +588,20 @@ var RangeSliderController = class extends Controller {
     }
     this.#renderFractions(pair, range);
   }
-  /** Writes only changed ARIA for the lower thumb. */
   #renderStartThumb(thumb, pair, range) {
     this.#setAria(thumb, "aria-valuemin", range.min);
     this.#setAria(thumb, "aria-valuemax", pair.end);
     this.#setAria(thumb, "aria-valuenow", pair.start);
   }
-  /** Writes only changed ARIA for the upper thumb. */
   #renderEndThumb(thumb, pair, range) {
     this.#setAria(thumb, "aria-valuemin", pair.start);
     this.#setAria(thumb, "aria-valuemax", range.max);
     this.#setAria(thumb, "aria-valuenow", pair.end);
   }
-  /** Writes one numeric ARIA attribute only when its serialized value changed. */
   #setAria(thumb, name, value) {
     const next = String(value);
     if (thumb.getAttribute(name) !== next) thumb.setAttribute(name, next);
   }
-  /** Writes the two behavior-only fraction hooks only when they changed. */
   #renderFractions(pair, range) {
     const start = String(rangeFraction(pair.start, range.min, range.max));
     const end = String(rangeFraction(pair.end, range.min, range.max));
@@ -516,33 +612,70 @@ var RangeSliderController = class extends Controller {
       this.element.style.setProperty(END_PROPERTY, end);
     }
   }
-  /** Current normalized and ordered pair derived from live declarative Values. */
   #currentPair(range) {
-    const rawStart = Number.isFinite(this.startValue) ? this.startValue : range.min;
-    const rawEnd = Number.isFinite(this.endValue) ? this.endValue : range.max;
+    const rawStart = this.#safeStart;
+    const rawEnd = this.#safeEnd;
     const start = snapSteppedValue(rawStart, range);
     const end = snapSteppedValue(rawEnd, range);
     if (start <= end) return { start, end };
     return { start: end, end: start };
   }
-  /**
-   * Finite ordered range used by ARIA, keyboard, pointer, and CSS reflection.
-   * Invalid endpoints fall back to the public defaults; an authored `max`
-   * below `min` collapses to the finite minimum.
-   */
   get #effectiveRange() {
-    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN;
-    const authoredMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX;
-    return { min, max: Math.max(min, authoredMax), step: this.stepValue, base: min };
+    const min = this.#safeMin;
+    const authoredMax = this.#safeMax;
+    return { min, max: Math.max(min, authoredMax), step: this.#safeStep, base: min };
   }
-  /** Ends the current pointer session without dispatching another change. */
   #endDrag() {
     const drag = this.#drag;
     this.#drag = null;
     drag?.pointer?.end();
   }
+  get #safeMin() {
+    return this.#numbers.read(
+      this,
+      "min",
+      this.minValue,
+      _RangeSliderController.values.min.default,
+      _RangeSliderController.valueConstraints.min
+    );
+  }
+  get #safeMax() {
+    return this.#numbers.read(
+      this,
+      "max",
+      this.maxValue,
+      _RangeSliderController.values.max.default,
+      _RangeSliderController.valueConstraints.max
+    );
+  }
+  get #safeStep() {
+    return this.#numbers.read(
+      this,
+      "step",
+      this.stepValue,
+      _RangeSliderController.values.step.default,
+      _RangeSliderController.valueConstraints.step
+    );
+  }
+  get #safeStart() {
+    return this.#numbers.read(
+      this,
+      "start",
+      this.startValue,
+      this.#effectiveRange.min,
+      _RangeSliderController.valueConstraints.start
+    );
+  }
+  get #safeEnd() {
+    return this.#numbers.read(
+      this,
+      "end",
+      this.endValue,
+      this.#effectiveRange.max,
+      _RangeSliderController.valueConstraints.end
+    );
+  }
 };
 
 export { RangeSliderController };
-//# sourceMappingURL=range_slider_controller.js.map
 //# sourceMappingURL=range_slider_controller.js.map