stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/color_picker_controller.js

@@ -1,13 +1,9 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/color_picker_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,15 +13,32 @@ 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/coerce.ts
 function toFiniteNumber(raw) {
-  if (raw === null || raw === void 0 || raw === "") return null;
-  const value = typeof raw === "number" ? raw : Number(raw);
+  if (typeof raw !== "number" && typeof raw !== "string") return null;
+  if (typeof raw === "string" && raw.trim().length === 0) return null;
+  const value = Number(raw);
   return Number.isFinite(value) ? value : null;
 }
 
-// src/utils/field_mirror.ts
+function ownerIndex(candidates, node) {
+  if (!(node instanceof Node)) return -1;
+  return candidates.findIndex((candidate) => candidate.contains(node));
+}
+function ownerOf(candidates, node) {
+  return candidates[ownerIndex(candidates, node)] ?? null;
+}
+
 function writeField(field, value) {
   if (field.value === value) return false;
   field.value = value;
@@ -35,27 +48,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;
@@ -68,7 +90,45 @@ 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 OwnedPointerSession = class {
   #pointerId;
   #owner;
@@ -88,7 +148,6 @@ var OwnedPointerSession = class {
     } catch {
     }
   }
-  /** Releases capture and listeners, then reports the end exactly once. */
   end() {
     this.#finish("teardown");
   }
@@ -113,7 +172,13 @@ var OwnedPointerSession = class {
   };
 };
 
-// src/controllers/color_picker_controller.ts
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = Object.hasOwn(values, name) ? values[name] : void 0;
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
 var COLOR_PROPERTY = "--stimeo--color";
 var VALUE_TEXT_ATTRIBUTE = "data-value-text";
 var CHANNEL_RANGE = {
@@ -123,6 +188,12 @@ var CHANNEL_RANGE = {
   alpha: [0, 100]
 };
 var ColorPickerController = class extends Controller {
+  #fieldWrites = /* @__PURE__ */ new WeakMap();
+  #moves = new MoveCounter();
+  #move = 0;
+  #adoptedValue = null;
+  #adoptedAlpha = false;
+  #exactHex = null;
   static targets = ["slider", "hex", "preview", "field"];
   static values = {
     value: { type: String, default: "#000000" },
@@ -131,89 +202,59 @@ var ColorPickerController = class extends Controller {
   };
   static actions = ["onHexInput", "onKeydown", "onPointerDown"];
   static events = ["change", "reconcile"];
-  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
-  get #mirrored() {
-    return this.logicalTrackValue && isRtl(this.element);
-  }
-  /** The current color in the editing model; its alpha is 100 while `alpha` is off. */
   #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
-  /** The pointer that owns the live drag, with the slider whose geometry maps it. */
   #drag = null;
-  /** Color the last repaint settled on, so a configuration-driven move is reported once. */
   #committedHex = null;
-  /**
-   * Whether the paint about to run was asked for by this picker's own controls.
-   * The `value` Value is shared with the page — application code and a Turbo
-   * morph write it too — so the form fields and the hex input take their "did
-   * the user commit this" answer from the route, not from the Value.
-   */
-  #movedByUser = false;
-  /**
-   * The hex this picker last wrote into its hex input, or `null` before it wrote
-   * one. A repaint the page drives compares with it rather than with the input's
-   * text, so a color that did not move leaves what the reader is typing alone.
-   */
   #writtenHex = null;
-  /**
-   * Collapses a morph that swaps render inputs into one repaint, and refuses the
-   * pass Stimulus delivers before `connect()`.
-   */
-  #repaint = new MicrotaskCoalescer(() => this.#reconcileColor());
-  /** Seeds the model from the initial hex value and renders every surface. */
+  #writtenHexInput = null;
+  #repaint = new MorphRenderWatcher(() => this.#reconcileColor());
   connect() {
-    this.#repaint.activate();
+    this.#repaint.observe(this.element);
     this.#adoptValue();
     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 `alpha` at runtime. */
   alphaValueChanged() {
     this.#repaint.schedule();
   }
-  /** Adopts a color application code (or a Turbo morph) put in `value` at runtime. */
   valueValueChanged() {
     if (this.valueValue === this.#committedHex) return;
     this.#repaint.schedule();
   }
-  /**
-   * Hydrates a channel slider inserted or replaced at runtime through the repaint
-   * pass, which renders every slider after the batch and reports a committed
-   * color that moved. A slider arriving moves no color, so that pass reports
-   * nothing.
-   */
   sliderTargetConnected() {
     this.#repaint.schedule();
   }
-  /** Ends a gesture whose geometry target disappeared or ceased being a target. */
   sliderTargetDisconnected(slider) {
     if (this.#drag?.slider === slider) this.#endDrag();
   }
-  /** Fills a hex input inserted or replaced at runtime with the current color. */
   hexTargetConnected(hex) {
     this.#writeHex(hex, this.#hexString());
+    if (hex === this.hexTarget) this.#writtenHexInput = hex;
+  }
+  hexTargetDisconnected() {
+    this.#repaint.schedule();
   }
-  /** Fills a form field inserted or replaced at runtime with the current color. */
   fieldTargetConnected(field) {
     this.#mirrorColor(field, this.#hexString());
   }
-  /** Publishes the current color on a preview inserted or replaced at runtime. */
   previewTargetConnected(preview) {
     this.#publishColor(preview, this.#hexString());
   }
-  /** Keyboard stepping on the focused channel slider (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;
     const slider = event.currentTarget;
     const channel = this.#editableChannel(slider);
     if (!channel) return;
+    this.#adoptPendingValue();
     const [min, max] = this.#rangeOf(slider, channel);
     const value = this.#color[channel];
     let next = null;
-    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
+    switch (this.logicalTrackValue ? logicalArrowKey(event.key, slider) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
         next = value + 1;
@@ -240,14 +281,13 @@ var ColorPickerController = class extends Controller {
     event.preventDefault();
     this.#setChannel(channel, next, min, max);
   }
-  /** Begins a primary-button drag on a channel slider, owned by its own pointer. */
   onPointerDown(event) {
     if (event.button !== 0 || this.#drag) return;
     const slider = event.currentTarget;
     const channel = this.#editableChannel(slider);
     if (!channel) return;
     const [min, max] = this.#rangeOf(slider, channel);
-    const mirrored = this.#mirrored;
+    const mirrored = this.logicalTrackValue && isRtl(slider);
     const update = (clientX) => {
       const rect = slider.getBoundingClientRect();
       if (rect.width === 0) return false;
@@ -271,81 +311,85 @@ var ColorPickerController = class extends Controller {
     });
     this.#drag = drag;
   }
-  /** Parses the hex input on confirm and syncs every channel + surface. */
-  onHexInput() {
-    if (!this.hasHexTarget) return;
-    const parsed = hexToHsla(this.hexTarget.value);
+  onHexInput(event) {
+    const input = this.#confirmingHexInput(event);
+    if (!input) return;
+    const parsed = hexToHsla(input.value);
     if (!parsed) {
-      this.#writeHex(this.hexTarget, this.#hexString());
+      this.#writeHex(input, this.#hexString());
       return;
     }
-    this.#color = this.#opaqueUnlessEnabled(parsed);
-    this.#commitColor();
+    this.#color = this.#opaqueUnlessEnabled(parsed.color);
+    this.#exactHex = parsed.hex;
+    this.#commitColor(input);
+  }
+  #confirmingHexInput(event) {
+    if (event) return ownerOf(this.hexTargets, event.target);
+    return this.hasHexTarget ? this.hexTarget : null;
   }
-  /** Replaces the model with the color `value` names, leaving an unparsable one alone. */
   #adoptValue() {
+    this.#adoptedValue = this.valueValue;
+    this.#adoptedAlpha = this.alphaValue;
     const parsed = hexToHsla(this.valueValue);
-    if (parsed) this.#color = this.#opaqueUnlessEnabled(parsed);
+    if (parsed) {
+      this.#color = this.#opaqueUnlessEnabled(parsed.color);
+      this.#exactHex = parsed.hex;
+    }
+  }
+  #adoptPendingValue() {
+    if (this.valueValue !== this.#adoptedValue || this.alphaValue !== this.#adoptedAlpha) {
+      this.#adoptValue();
+    }
   }
-  /**
-   * The model a parsed color implies: alpha only survives while its channel is
-   * enabled, because `hexString()` would otherwise emit `#RRGGBB` while `change`
-   * reported `rgba.a < 1`.
-   */
   #opaqueUnlessEnabled(parsed) {
     return this.alphaValue ? parsed : { ...parsed, alpha: 100 };
   }
-  /** Clamps and snaps one channel to an integer, then re-renders + emits change. */
   #setChannel(channel, raw, min, max) {
-    this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));
+    this.#adoptPendingValue();
+    const next = Math.round(Math.min(max, Math.max(min, raw)));
+    if (next !== this.#color[channel]) this.#exactHex = null;
+    this.#color[channel] = next;
     this.#commitColor();
   }
-  /**
-   * Renders the model and reports a color the user actually moved. A key pressed
-   * at a bound, a pointer that lands on the step already showing, and a re-confirmed
-   * hex all leave the committed color where it was, so no `change` describes them.
-   *
-   * The color is written into `value` first — the one path that writes it — so a
-   * Turbo snapshot and a morph read the color the user picked, and a listener of
-   * the field's native `change` already finds it there.
-   */
-  #commitColor() {
+  #commitColor(source = null) {
     const previous = this.#committedHex;
     const hex = this.#hexString();
-    if (this.valueValue !== hex) this.valueValue = hex;
-    this.#movedByUser = true;
-    this.#render();
-    if (this.#committedHex !== previous) {
-      this.dispatch("change", { detail: this.#settledDetail() });
+    const changed = hex !== previous;
+    if (changed) {
+      if (this.valueValue !== hex) this.valueValue = hex;
+      this.#adoptedValue = hex;
+      this.#adoptedAlpha = this.alphaValue;
+      this.#move = this.#moves.record();
+    }
+    const move = this.#move;
+    const fields = this.#render(true);
+    if (source) this.#writeHex(source, hex);
+    const detail = this.#settledDetail();
+    for (const [field, write] of fields) {
+      if (field.value === hex && this.#fieldWrites.get(field) === write) commitField(field);
     }
+    if (!this.#moves.isLatest(move)) return;
+    if (changed) this.dispatch("change", { detail });
   }
-  /**
-   * Reflects the model onto sliders, the hex input, preview, and form field. The
-   * `value` Value is left as it is.
-   *
-   * The hex input is written for the reader's own commit, which shows the color
-   * in its canonical form, and otherwise only when the hex it shows moved: a
-   * repaint the page drives that leaves the color where it is keeps text the
-   * reader has typed there and not committed.
-   *
-   * @stimeoRenderRoot
-   */
-  #render() {
-    const byUser = this.#movedByUser;
-    this.#movedByUser = false;
+  #render(byUser = false) {
+    const fields = [];
     for (const slider of this.sliderTargets) this.#renderSlider(slider);
     const hex = this.#hexString();
     this.#committedHex = hex;
-    if (this.hasHexTarget && (byUser || hex !== this.#writtenHex)) {
-      this.#writeHex(this.hexTarget, hex);
+    if (this.hasHexTarget) {
+      const input = this.hexTarget;
+      if (byUser || hex !== this.#writtenHex || input !== this.#writtenHexInput) {
+        this.#writtenHexInput = input;
+        this.#writeHex(input, hex);
+      }
     }
     for (const field of this.fieldTargets) {
-      if (this.#mirrorColor(field, hex) && byUser) commitField(field);
+      if (this.#mirrorColor(field, hex)) fields.push([field, this.#fieldWrites.get(field) ?? 0]);
     }
     for (const preview of this.previewTargets) this.#publishColor(preview, hex);
     this.#publishColor(this.element, hex);
+    return fields;
   }
-  /** Writes one slider's announced range, value, and value text, skipping equal ones. */
   #renderSlider(slider) {
     const channel = this.#channelOf(slider);
     if (!channel) return;
@@ -358,86 +402,72 @@ var ColorPickerController = class extends Controller {
       "aria-valuetext": this.#valueText(slider, channel, value)
     };
     for (const [name, next] of Object.entries(attributes)) {
-      if (slider.getAttribute(name) !== next) slider.setAttribute(name, next);
+      setAttributeIfChanged(slider, name, next);
     }
   }
-  /** Writes `hex` into a hex input and keeps it as the hex last written there. */
   #writeHex(input, hex) {
     this.#writtenHex = hex;
     this.#mirrorColor(input, hex);
   }
-  /**
-   * Mirrors the color into an input, leaving an already-equal value untouched.
-   *
-   * @returns Whether the input's value moved.
-   */
   #mirrorColor(input, hex) {
-    return writeField(input, hex);
+    if (!writeField(input, hex)) return false;
+    this.#fieldWrites.set(input, (this.#fieldWrites.get(input) ?? 0) + 1);
+    return true;
   }
-  /** Publishes the color as the consumer's CSS hook, skipping an equal value. */
   #publishColor(element, hex) {
     if (element.style.getPropertyValue(COLOR_PROPERTY) !== hex) {
       element.style.setProperty(COLOR_PROPERTY, hex);
     }
   }
-  /**
-   * Repaints after a declarative input changed at runtime and reports a color this
-   * controller settled on. Disabling alpha drops it from the model and an outside
-   * `value` names another color, so the committed color can move without a user
-   * edit; `change` stays reserved for the picker's own actions.
-   */
   #reconcileColor() {
+    if (this.#drag && !this.#editableChannel(this.#drag.slider)) this.#endDrag();
     const previous = this.#committedHex;
-    if (previous !== null && this.valueValue !== previous) this.#adoptValue();
+    this.#adoptPendingValue();
     if (!this.alphaValue) this.#color.alpha = 100;
     this.#render();
     if (previous !== null && this.#committedHex !== previous) {
+      this.#move = this.#moves.record();
       this.dispatch("reconcile", { detail: this.#settledDetail() });
     }
   }
-  /** The settled color as event detail, shared by both report paths. */
   #settledDetail() {
-    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
-    return { value: this.#hexString(), rgba: { ...rgb, a: this.#color.alpha / 100 } };
+    const value = this.#hexString();
+    return {
+      value,
+      rgba: {
+        r: Number.parseInt(value.slice(1, 3), 16),
+        g: Number.parseInt(value.slice(3, 5), 16),
+        b: Number.parseInt(value.slice(5, 7), 16),
+        a: this.alphaValue ? Number.parseInt(value.slice(7, 9), 16) / 255 : 1
+      }
+    };
   }
-  /** The current color as `#RRGGBB`, or `#RRGGBBAA` when alpha is enabled. */
   #hexString() {
+    if (this.#exactHex !== null) {
+      return this.alphaValue ? this.#exactHex : this.#exactHex.slice(0, 7);
+    }
     const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
     const base = `#${hex2(rgb.r)}${hex2(rgb.g)}${hex2(rgb.b)}`;
     if (!this.alphaValue) return base;
     return `${base}${hex2(Math.round(this.#color.alpha / 100 * 255))}`;
   }
-  /** Reads a slider's `data-channel`, if it is a known channel. */
   #channelOf(slider) {
     const channel = slider.getAttribute("data-channel");
     return channel && Object.hasOwn(CHANNEL_RANGE, channel) ? channel : null;
   }
-  /**
-   * The channel a slider edits, or null when this picker edits none through it. An
-   * alpha slider authored while `alpha` is off edits nothing: moving it would leave
-   * the model translucent behind an opaque `#RRGGBB`.
-   */
   #editableChannel(slider) {
     const channel = this.#channelOf(slider);
     return channel === "alpha" && !this.alphaValue ? null : channel;
   }
-  /** The channel's announced text: the slider's template, or the built-in English. */
   #valueText(slider, channel, value) {
     const template = slider.getAttribute(VALUE_TEXT_ATTRIBUTE);
-    return template ? template.replaceAll("{value}", String(value)) : defaultValueText(channel, value);
+    return template ? fillTemplate(template, { value }) : defaultValueText(channel, value);
   }
-  /** Ends the live drag so no further movement of that pointer reaches the model. */
   #endDrag() {
     const drag = this.#drag;
     this.#drag = null;
     drag?.pointer?.end();
   }
-  /**
-   * A slider's `[min, max]` from aria-valuemin/max, falling back per channel.
-   * An absent or blank attribute means "not authored", not zero — coercing it to
-   * a number would pin the channel at `0` and make the per-channel default
-   * unreachable.
-   */
   #rangeOf(slider, channel) {
     const [defMin, defMax] = CHANNEL_RANGE[channel];
     return [
@@ -503,9 +533,11 @@ function hexToHsla(input) {
   const b = Number.parseInt(full.slice(4, 6), 16);
   const a = full.length === 8 ? Number.parseInt(full.slice(6, 8), 16) : 255;
   const { h, s, l } = rgbToHsl(r, g, b);
-  return { hue: h, saturation: s, lightness: l, alpha: Math.round(a / 255 * 100) };
+  return {
+    color: { hue: h, saturation: s, lightness: l, alpha: Math.round(a / 255 * 100) },
+    hex: `#${full.slice(0, 6).toLowerCase()}${hex2(a)}`
+  };
 }
 
 export { ColorPickerController };
-//# sourceMappingURL=color_picker_controller.js.map
 //# sourceMappingURL=color_picker_controller.js.map