stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/slider_controller.js

@@ -1,13 +1,9 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/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,9 +325,11 @@ function finiteFallback(min, max) {
   return 0;
 }
 
-// src/controllers/slider_controller.ts
 var FRACTION_PROPERTY = "--stimeo--slider-fraction";
-var SliderController = class extends Controller {
+var SliderController = class _SliderController extends Controller {
+  #numbers = new NumberValueReader();
+  #moves = new MoveCounter();
+  #move = 0;
   static targets = ["track", "thumb", "field"];
   static values = {
     min: { type: Number, default: 0 },
@@ -239,81 +338,71 @@ var SliderController = class extends Controller {
     value: { type: Number, default: 0 },
     logicalTrack: { type: Boolean, default: false }
   };
+  static valueConstraints = {
+    min: NUMBER_BOUNDS.finite,
+    max: NUMBER_BOUNDS.finite,
+    step: NUMBER_BOUNDS.positive,
+    value: 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 value last published: taken on connect, then moved by each user commit
-   * and by each repaint that reports a page-driven move.
-   */
   #settled = 0;
-  /** Collapses a morph that swaps several render Values into one repaint. */
-  #repaint = new MicrotaskCoalescer(() => this.#render());
-  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
-  get #mirrored() {
-    return this.logicalTrackValue && isRtl(this.element);
-  }
-  /**
-   * Renders the normalized value as the starting position without writing it
-   * back, and takes it as the baseline, so connecting reports nothing.
-   */
+  #repaint = new MorphRenderWatcher(() => this.#render());
+  get #directionElement() {
+    return this.hasTrackTarget ? this.trackTarget : this.element;
+  }
   connect() {
-    this.#repaint.activate();
+    this.#repaint.observe(this.element);
     this.#settled = this.#currentValue();
     this.#render();
   }
-  /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
-    this.#repaint.cancel();
+    this.#repaint.disconnect();
     this.#endDrag();
   }
-  /** Repaints a minimum changed by application code or a Turbo morph. */
   minValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints a maximum changed by application code or a Turbo morph. */
   maxValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints a step changed by application code or a Turbo morph. */
   stepValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints a value changed by application code or a Turbo morph. */
   valueValueChanged() {
     this.#repaint.schedule();
   }
-  /** Hydrates a thumb inserted or replaced at runtime with the current ARIA state. */
   thumbTargetConnected(thumb) {
     const value = this.#currentValue();
     this.#renderThumb(thumb, value);
-    this.#renderFraction(value);
     if (this.#drag && this.#drag.thumb === null) {
       this.#drag.thumb = thumb;
       thumb.focus();
     }
     this.#repaint.schedule();
   }
-  /** Fills a form field inserted or replaced at runtime on the next repaint. */
   fieldTargetConnected() {
     this.#repaint.schedule();
   }
-  /** Drops the stale focus owner while allowing a live track gesture to continue. */
+  fieldTargetDisconnected() {
+    this.#repaint.schedule();
+  }
   thumbTargetDisconnected(thumb) {
     if (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();
   }
-  /** Handles keyboard stepping per the APG slider model. */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown") && hasModifierChord(event))
+      return;
     let next = null;
-    const declared = this.valueValue;
+    const declared = this.#safeValue;
     const range = this.#steppedRange;
-    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(declared, 1, range);
@@ -329,10 +418,10 @@ var SliderController = class extends Controller {
         next = stepSteppedValue(declared, -10, range);
         break;
       case "Home":
-        next = this.minValue;
+        next = this.#safeMin;
         break;
       case "End":
-        next = this.maxValue;
+        next = this.#safeMax;
         break;
       default:
         return;
@@ -340,12 +429,11 @@ var SliderController = class extends Controller {
     event.preventDefault();
     this.#commit(next);
   }
-  /** Begins a pointer drag: sets the value and tracks subsequent movement. */
   onPointerDown(event) {
     if (event.button !== 0 || this.#drag || !this.hasTrackTarget || !this.hasThumbTarget) return;
     const track = this.trackTarget;
     const thumb = this.thumbTarget;
-    const mirrored = this.#mirrored;
+    const mirrored = this.logicalTrackValue && isRtl(track);
     const value = this.#valueFromClientX(event.clientX, mirrored, track);
     if (value === null) return;
     event.preventDefault();
@@ -367,96 +455,109 @@ var SliderController = class extends Controller {
     });
     this.#drag = drag;
   }
-  /** Maps a pointer X coordinate to a raw value using a stable track snapshot. */
   #valueFromClientX(clientX, mirrored, track) {
     const rect = track.getBoundingClientRect();
     if (rect.width === 0) return null;
     const offset = (clientX - rect.left) / rect.width;
     const fraction = mirrored ? 1 - offset : offset;
-    return this.minValue + fraction * (this.maxValue - this.minValue);
-  }
-  /**
-   * Stores the normalized value the user moved to, renders it synchronously for
-   * responsive input, and reports it as `change` when it differs from the value
-   * last published. The comparison is with the value last published, not with
-   * the value the move started from, so a page write no repaint has published
-   * yet is reported once, as this change, and a move that ends where the value
-   * was last published reports nothing. The baseline moves before either report
-   * goes out, so the repaint the Value write schedules — and any move a
-   * subscriber makes while the report is dispatched — is measured from this
-   * value.
-   */
+    return this.#safeMin + fraction * (this.#safeMax - this.#safeMin);
+  }
   #commit(raw) {
     const value = snapSteppedValue(raw, this.#steppedRange);
     const reported = this.#settled;
     this.#settled = value;
+    if (value !== reported) this.#move = this.#moves.record();
+    const move = this.#move;
     if (!Object.is(this.valueValue, value)) this.valueValue = value;
     this.#renderValue(value);
     this.#mirrorField(value, true);
+    if (!this.#moves.isLatest(move)) return;
     if (value !== reported) this.dispatch("change", { detail: { value } });
   }
-  /** Mirrors `value` into the optional form field, reporting only a user's move. */
   #mirrorField(value, notify) {
     if (!this.hasFieldTarget) return;
     if (writeField(this.fieldTarget, String(value)) && notify) commitField(this.fieldTarget);
   }
-  /**
-   * Reflects the normalized current Value without writing it back. A published
-   * value that moved from the last one is reported once as `reconcile`; the
-   * field follows without a native `change`.
-   *
-   * @stimeoRenderRoot
-   */
   #render() {
     const value = this.#currentValue();
     this.#renderValue(value);
     this.#mirrorField(value, false);
     if (value === this.#settled) return;
     this.#settled = value;
+    this.#move = this.#moves.record();
     this.dispatch("reconcile", { detail: { value } });
   }
-  /** Reflects one normalized value on the current target and CSS output. */
   #renderValue(value) {
     if (this.hasThumbTarget) {
       this.#renderThumb(this.thumbTarget, value);
     }
     this.#renderFraction(value);
   }
-  /** Writes only ARIA values that differ, including on a replacement target. */
   #renderThumb(thumb, value) {
     const attributes = {
-      "aria-valuemin": String(this.minValue),
-      "aria-valuemax": String(this.maxValue),
+      "aria-valuemin": String(this.#safeMin),
+      "aria-valuemax": String(this.#safeMax),
       "aria-valuenow": String(value)
     };
     for (const [name, next] of Object.entries(attributes)) {
-      if (thumb.getAttribute(name) !== next) thumb.setAttribute(name, next);
+      setAttributeIfChanged(thumb, name, next);
     }
   }
-  /** Writes the behavior-only positioning hook only when its value changed. */
   #renderFraction(value) {
-    const fraction = rangeFraction(value, this.minValue, this.maxValue);
+    const fraction = rangeFraction(value, this.#safeMin, this.#safeMax);
     const next = String(fraction);
     if (this.element.style.getPropertyValue(FRACTION_PROPERTY) !== next) {
       this.element.style.setProperty(FRACTION_PROPERTY, next);
     }
   }
-  /** Current normalized value derived from the live declarative inputs. */
   #currentValue() {
-    return snapSteppedValue(this.valueValue, this.#steppedRange);
+    return snapSteppedValue(this.#safeValue, this.#steppedRange);
   }
-  /** Shared range configuration; finite endpoints remain allowed off the grid. */
   get #steppedRange() {
-    return { min: this.minValue, max: this.maxValue, step: this.stepValue };
+    return { min: this.#safeMin, max: this.#safeMax, step: this.#safeStep };
   }
-  /** 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,
+      _SliderController.values.min.default,
+      _SliderController.valueConstraints.min
+    );
+  }
+  get #safeMax() {
+    return this.#numbers.read(
+      this,
+      "max",
+      this.maxValue,
+      _SliderController.values.max.default,
+      _SliderController.valueConstraints.max
+    );
+  }
+  get #safeStep() {
+    return this.#numbers.read(
+      this,
+      "step",
+      this.stepValue,
+      _SliderController.values.step.default,
+      _SliderController.valueConstraints.step
+    );
+  }
+  get #safeValue() {
+    return this.#numbers.read(
+      this,
+      "value",
+      this.valueValue,
+      this.#safeMin,
+      _SliderController.valueConstraints.value
+    );
+  }
 };
 
 export { SliderController };
-//# sourceMappingURL=slider_controller.js.map
 //# sourceMappingURL=slider_controller.js.map