stimeo-ui 0.16.0 → 0.18.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;
@@ -17,8 +13,17 @@ 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");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
 
-// src/utils/field_mirror.ts
 function writeField(field, value) {
   if (field.value === value) return false;
   field.value = value;
@@ -28,27 +33,36 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/microtask_coalescer.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;
-  /** @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. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -61,7 +75,90 @@ 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();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  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;
   #owner;
@@ -81,7 +178,6 @@ var OwnedPointerSession = class {
     } catch {
     }
   }
-  /** Releases capture and listeners, then reports the end exactly once. */
   end() {
     this.#finish("teardown");
   }
@@ -106,11 +202,10 @@ var OwnedPointerSession = class {
   };
 };
 
-// src/utils/range.ts
 function rangeFraction(value, min, max) {
   const span = max - min;
   if (!(span > 0)) return 0;
-  const clamped = Math.min(max, Math.max(min, value));
+  const clamped = clampRange(value, min, max);
   let fraction;
   if (Number.isFinite(span)) {
     fraction = (clamped - min) / span;
@@ -121,8 +216,10 @@ function rangeFraction(value, min, max) {
   if (!Number.isFinite(fraction)) return 0;
   return Math.min(1, Math.max(0, fraction));
 }
+function clampRange(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
 
-// src/utils/stepped_value.ts
 function effectiveStep(step) {
   return Number.isFinite(step) && step > 0 ? step : 1;
 }
@@ -228,12 +325,15 @@ 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 {
+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 },
@@ -243,59 +343,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", "reconcile"];
-  /** One initiating pointer owns each live drag and its stable target snapshot. */
   #drag = null;
-  /**
-   * The pair last published: taken on connect, then moved by each user commit
-   * and by each repaint that reports a page-driven move.
-   */
   #settled = { start: DEFAULT_MIN, end: DEFAULT_MAX };
-  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
-  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());
-  /**
-   * Renders the normalized, ordered pair without writing it back, and takes it
-   * as the baseline, so connecting reports nothing.
-   */
+  get #directionElement() {
+    return this.hasTrackTarget ? this.trackTarget : this.element;
+  }
+  #repaint = new MorphRenderWatcher(() => this.#render());
   connect() {
-    this.#repaint.activate();
+    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);
@@ -307,11 +393,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);
@@ -323,28 +408,32 @@ var RangeSliderController = class extends Controller {
     }
     this.#repaint.schedule();
   }
-  /** Fills a start field inserted or replaced at runtime on the next repaint. */
   startFieldTargetConnected() {
     this.#repaint.schedule();
   }
-  /** Fills an end field inserted or replaced at runtime on the next repaint. */
+  startFieldTargetDisconnected() {
+    this.#repaint.schedule();
+  }
   endFieldTargetConnected() {
     this.#repaint.schedule();
   }
-  /** Drops a stale end-thumb reference without orphaning the track gesture. */
+  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;
+    if ((event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown") && hasModifierChord(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;
@@ -371,7 +460,7 @@ var RangeSliderController = class extends Controller {
       };
     }
     let next = null;
-    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
+    switch (this.logicalTrackValue ? logicalArrowKey(event.key, this.#directionElement) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
         next = stepSteppedValue(current, 1, range);
@@ -398,13 +487,12 @@ 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;
     }
     const track = this.trackTarget;
-    const mirrored = this.#mirrored;
+    const mirrored = this.logicalTrackValue && isRtl(track);
     const value = this.#valueFromClientX(event.clientX, mirrored, track);
     if (value === null) return;
     event.preventDefault();
@@ -431,7 +519,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;
@@ -440,12 +527,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);
@@ -453,7 +534,6 @@ 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") {
@@ -462,17 +542,6 @@ var RangeSliderController = class extends Controller {
       this.#commit(pair.start, raw, "end");
     }
   }
-  /**
-   * Clamps and snaps the pair a user's move of the `moving` thumb produced,
-   * stops that thumb at its partner, stores the pair, and reflects it onto the
-   * thumbs' ARIA attributes and the range custom properties. The pair is
-   * reported as `change` when it differs from the pair last published — not from
-   * the pair the move started from — so a page write no repaint has published
-   * yet is reported once, as this change, and a move that ends on the pair last
-   * published reports nothing. The baseline moves before any report goes out,
-   * so the repaint the Value writes schedule — and any move a subscriber makes
-   * while the report is dispatched — is measured from this pair.
-   */
   #commit(start, end, moving) {
     const range = this.#effectiveRange;
     let nextStart = snapSteppedValue(start, range);
@@ -484,47 +553,53 @@ var RangeSliderController = class extends Controller {
     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;
     this.#renderPair(pair, range);
-    this.#mirrorFields(pair, true);
-    if (nextStart !== reported.start || nextEnd !== reported.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 the Values the page supplied without writing them back. A published
-   * pair that moved from the last one is reported once as `reconcile`; the
-   * fields follow without a native `change`.
-   *
-   * @stimeoRenderRoot
-   */
   #render() {
     const range = this.#effectiveRange;
     const pair = this.#currentPair(range);
     this.#renderPair(pair, range);
-    this.#mirrorFields(pair, false);
+    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 } });
   }
-  /**
-   * Mirrors the pair into the optional form fields, reporting only a user's
-   * move. Each end is compared on its own, so dragging one thumb never reports
-   * a commit from the field the other thumb owns.
-   */
-  #mirrorFields(pair, notify) {
+  #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;
-      if (writeField(field, String(pair.start)) && notify) commitField(field);
+      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;
-      if (writeField(field, String(pair.end)) && notify) commitField(field);
+      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);
@@ -534,24 +609,19 @@ 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);
+    setAttributeIfChanged(thumb, name, String(value));
   }
-  /** 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));
@@ -562,33 +632,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