stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/collapsible_controller.js

@@ -0,0 +1,327 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/collapsible_controller.ts
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/utils/transition_completion.ts
+function timeMs(value) {
+  const trimmed = value.trim();
+  const amount = Number.parseFloat(trimmed);
+  if (!Number.isFinite(amount)) return 0;
+  if (trimmed.endsWith("ms")) return amount;
+  if (trimmed.endsWith("s")) return amount * 1e3;
+  return 0;
+}
+function cssList(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function transitionTimings(style) {
+  const properties = cssList(style.transitionProperty);
+  const durations = cssList(style.transitionDuration).map(timeMs);
+  const delays = cssList(style.transitionDelay).map(timeMs);
+  const effectiveProperties = properties.length > 0 ? properties : Array.from({ length: Math.max(durations.length, delays.length, 1) }, () => "all");
+  const effectiveDurations = durations.length > 0 ? durations : [0];
+  const effectiveDelays = delays.length > 0 ? delays : [0];
+  return effectiveProperties.filter((property) => property !== "none").map((property, index) => ({
+    property,
+    totalMs: Math.max(
+      0,
+      (effectiveDurations[index % effectiveDurations.length] ?? 0) + (effectiveDelays[index % effectiveDelays.length] ?? 0)
+    )
+  }));
+}
+function maxTotalMs(timings) {
+  return timings.reduce((max, { totalMs }) => Math.max(max, totalMs), 0);
+}
+var TransitionCompletion = class {
+  #timers = new SafeTimeout();
+  #element = null;
+  #complete = null;
+  #pendingProperties = null;
+  #deadline = 0;
+  /**
+   * Replaces any prior wait and invokes `complete` synchronously for a 0ms
+   * transition (including when `getComputedStyle` is unavailable).
+   *
+   * With a positive `options.timeoutMs` the synchronous fast-path is skipped and
+   * the override replaces the auto-computed fallback (see {@link TransitionWaitOptions}).
+   */
+  wait(element, complete, options = {}) {
+    this.cancel();
+    const requested = options.timeoutMs ?? 0;
+    const override = Number.isFinite(requested) && requested > 0 ? requested : 0;
+    const timings = typeof window.getComputedStyle === "function" ? transitionTimings(window.getComputedStyle(element)) : [];
+    const maximum = maxTotalMs(timings);
+    if (maximum <= 0 && override <= 0) {
+      complete();
+      return;
+    }
+    this.#element = element;
+    this.#complete = complete;
+    this.#deadline = Date.now() + maximum;
+    const activeProperties = this.#activeTransitionProperties(element);
+    this.#pendingProperties = activeProperties.size > 0 ? activeProperties : this.#explicitPendingProperties(timings);
+    element.addEventListener("transitionend", this.#onTerminal);
+    element.addEventListener("transitioncancel", this.#onTerminal);
+    this.#timers.set(() => this.#finish(), override > 0 ? override : maximum + 50);
+  }
+  /** Cancels the pending wait without invoking its completion callback. */
+  cancel() {
+    this.#complete = null;
+    this.#teardown();
+  }
+  /**
+   * Handles terminal events from the observed element only.
+   *
+   * For explicit property lists, every declared positive-time property must
+   * settle. For `all`, no reliable property set exists, so an event can finish
+   * only after the computed maximum time; the safety timeout owns the usual path.
+   */
+  #onTerminal = (event) => {
+    if (event.target !== this.#element) return;
+    const transitionEvent = event;
+    if (transitionEvent.pseudoElement) return;
+    if (this.#pendingProperties) {
+      const propertyName = transitionEvent.propertyName;
+      const active = this.#activeTransitionProperties(this.#element);
+      if (active.has(propertyName)) return;
+      if (!this.#pendingProperties.delete(propertyName)) return;
+      if (this.#pendingProperties.size > 0) return;
+      if (active.size > 0) {
+        this.#pendingProperties = active;
+        return;
+      }
+      this.#finish();
+      return;
+    }
+    if (Date.now() >= this.#deadline) this.#finish();
+  };
+  /**
+   * Returns active CSS transition properties expanded to the names reported by
+   * terminal events. CSS animations and pseudo-element effects are excluded.
+   */
+  #activeTransitionProperties(element) {
+    if (!element || typeof element.getAnimations !== "function") return /* @__PURE__ */ new Set();
+    try {
+      const properties = element.getAnimations().flatMap((animation) => {
+        if (animation.playState === "idle" || animation.playState === "finished") return [];
+        const effect = animation.effect;
+        if (effect?.pseudoElement) return [];
+        const target = effect?.target;
+        if (target && target !== element) return [];
+        const property = animation.transitionProperty;
+        return typeof property === "string" && property.length > 0 ? [property] : [];
+      });
+      return new Set(properties);
+    } catch {
+      return /* @__PURE__ */ new Set();
+    }
+  }
+  /** Returns explicit positive-time properties, or `null` for the ambiguous `all`. */
+  #explicitPendingProperties(timings) {
+    if (timings.some(({ property }) => property === "all")) return null;
+    const pending = new Set(
+      timings.filter(({ totalMs }) => totalMs > 0).map(({ property }) => property)
+    );
+    return pending.size > 0 ? pending : null;
+  }
+  /** Completes exactly once, releasing listeners and the fallback before the callback. */
+  #finish() {
+    const complete = this.#complete;
+    if (!complete) return;
+    this.#complete = null;
+    this.#teardown();
+    complete();
+  }
+  /** Releases the exact element listeners and timer owned by the current wait. */
+  #teardown() {
+    this.#timers.clearAll();
+    this.#element?.removeEventListener("transitionend", this.#onTerminal);
+    this.#element?.removeEventListener("transitioncancel", this.#onTerminal);
+    this.#element = null;
+    this.#pendingProperties = null;
+    this.#deadline = 0;
+  }
+};
+
+// src/controllers/collapsible_controller.ts
+var CollapsibleController = class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = {
+    open: { type: Boolean, default: false }
+  };
+  static actions = ["toggle"];
+  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #transition = new TransitionCompletion();
+  /** Distinguishes dynamic target churn from the callbacks that precede `connect()`. */
+  #connected = false;
+  /**
+   * Establishes the initial open/closed state without waiting for a close transition.
+   *
+   * The DOM is the source of truth on reconnect (Turbo cache restore / morph): an
+   * **explicit** state attribute — `aria-expanded="true"`/`"false"` (or, with no
+   * trigger, `data-state="open"`/`"closed"`) — is honored verbatim so a region the
+   * user opened *or* closed survives a back-navigation, even when the declarative
+   * `open` Value disagrees. An already-open region remains open without a
+   * close/reopen cycle. The Value only seeds a genuinely fresh render where no
+   * state attribute is present yet; any opening animation in that case belongs to
+   * the consumer's CSS. Mirrors `sidebar`'s `#restoreCollapsed`.
+   */
+  connect() {
+    this.#connected = true;
+    this.#apply(this.#initialOpen(), false);
+  }
+  /** Resolves the connect-time state: explicit DOM state wins, else the `open` Value. */
+  #initialOpen() {
+    if (this.hasTriggerTarget) {
+      const expanded = this.triggerTarget.getAttribute("aria-expanded");
+      if (expanded === "true") return true;
+      if (expanded === "false") return false;
+    } else if (this.hasContentTarget) {
+      const state = this.contentTarget.getAttribute("data-state");
+      if (state === "open") return true;
+      if (state === "closed") return false;
+    }
+    return this.openValue;
+  }
+  disconnect() {
+    this.#connected = false;
+    this.#transition.cancel();
+  }
+  /** Reconciles a replacement trigger target with the content's live state. */
+  triggerTargetConnected(trigger) {
+    if (!this.#connected || !this.hasContentTarget) return;
+    trigger.setAttribute(
+      "aria-expanded",
+      this.contentTarget.getAttribute("data-state") === "open" ? "true" : "false"
+    );
+  }
+  /** Reconciles a replacement content target with the disclosure's live state. */
+  contentTargetConnected(content) {
+    if (!this.#connected) return;
+    this.#transition.cancel();
+    const open = this.hasTriggerTarget ? this.triggerTarget.getAttribute("aria-expanded") === "true" : content.getAttribute("data-state") === "open";
+    this.#applyContent(content, open, false);
+  }
+  /** Cancels a wait tied to a content target that was removed or replaced. */
+  contentTargetDisconnected() {
+    this.#transition.cancel();
+  }
+  /** Toggles the region open/closed. Bound via `data-action` (click). */
+  toggle() {
+    this.#apply(!this.#isOpen, true);
+  }
+  /**
+   * Whether the region is logically open. Read from `aria-expanded` (not the
+   * content's `hidden`) so a click *during* a close transition — when `hidden`
+   * is still deferred — correctly reopens instead of re-closing.
+   */
+  get #isOpen() {
+    if (this.hasTriggerTarget) {
+      return this.triggerTarget.getAttribute("aria-expanded") === "true";
+    }
+    return this.hasContentTarget && this.contentTarget.getAttribute("data-state") === "open";
+  }
+  /**
+   * Drives the disclosure to `open`, syncing the trigger's `aria-expanded` and
+   * the content's `hidden` / `data-state` / height variable in an order where
+   * `hidden` never blocks measurement or the transition.
+   *
+   * @param open - Target state.
+   * @param waitForCloseTransition - When `false` (initial `connect`) the close
+   *   path applies `hidden` immediately. This flag does not suppress consumer CSS
+   *   on the open path.
+   */
+  #apply(open, waitForCloseTransition) {
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", open ? "true" : "false");
+    }
+    if (!this.hasContentTarget) return;
+    const content = this.contentTarget;
+    this.#transition.cancel();
+    this.#applyContent(content, open, waitForCloseTransition);
+  }
+  /** Reflects one content target without relying on a later target lookup. */
+  #applyContent(content, open, waitForCloseTransition) {
+    if (open) {
+      content.hidden = false;
+      content.style.setProperty("--stimeo-collapsible-content-height", `${content.scrollHeight}px`);
+      content.setAttribute("data-state", "open");
+      return;
+    }
+    content.setAttribute("data-state", "closed");
+    if (waitForCloseTransition) {
+      this.#applyHiddenAfterTransition(content);
+    } else {
+      content.hidden = true;
+    }
+  }
+  /**
+   * Re-applies `hidden` once the close transition settles. Guarded against a
+   * reopen mid-transition; the shared waiter also guarantees a bounded fallback
+   * when the browser emits no terminal transition event.
+   */
+  #applyHiddenAfterTransition(content) {
+    this.#transition.wait(content, () => {
+      if (content.getAttribute("data-state") === "closed") {
+        content.hidden = true;
+      }
+    });
+  }
+};
+
+export { CollapsibleController };
+//# sourceMappingURL=collapsible_controller.js.map
+//# sourceMappingURL=collapsible_controller.js.map

data/dist/controllers/color_picker_controller.js

@@ -0,0 +1,252 @@
+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;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+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/coerce.ts
+function toFiniteNumber(raw) {
+  if (raw === null || raw === void 0 || raw === "") return null;
+  const value = typeof raw === "number" ? raw : Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
+// src/controllers/color_picker_controller.ts
+var COLOR_PROPERTY = "--stimeo-color";
+var CHANNEL_RANGE = {
+  hue: [0, 360],
+  saturation: [0, 100],
+  lightness: [0, 100],
+  alpha: [0, 100]
+};
+var ColorPickerController = class extends Controller {
+  static targets = ["slider", "hex", "preview", "field"];
+  static values = {
+    value: { type: String, default: "#000000" },
+    alpha: { type: Boolean, default: false },
+    logicalTrack: { type: Boolean, default: false }
+  };
+  static actions = ["onHexInput", "onKeydown", "onPointerDown"];
+  static events = ["change"];
+  /** 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. */
+  #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
+  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
+  #dragAbort = null;
+  /** Seeds the model from the initial hex value and renders every surface. */
+  connect() {
+    const parsed = hexToHsla(this.valueValue);
+    if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#render();
+  }
+  /** Cancels any active pointer drag so document listeners never leak. */
+  disconnect() {
+    this.#dragAbort?.abort();
+    this.#dragAbort = null;
+  }
+  /** Keyboard stepping on the focused channel slider (APG Slider model). */
+  onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
+    const slider = event.currentTarget;
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    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) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = value + 1;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = value - 1;
+        break;
+      case "PageUp":
+        next = value + 10;
+        break;
+      case "PageDown":
+        next = value - 10;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#setChannel(channel, next, min, max);
+  }
+  /** Begins a pointer drag on a channel slider and tracks movement. */
+  onPointerDown(event) {
+    const slider = event.currentTarget;
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    event.preventDefault();
+    slider.focus();
+    const [min, max] = this.#rangeOf(slider, channel);
+    const mirrored = this.#mirrored;
+    const update = (clientX) => {
+      const rect = slider.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const offset = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+      const fraction = mirrored ? 1 - offset : offset;
+      this.#setChannel(channel, min + fraction * (max - min), min, max);
+    };
+    update(event.clientX);
+    this.#dragAbort?.abort();
+    const abort = new AbortController();
+    this.#dragAbort = abort;
+    const onMove = (move) => update(move.clientX);
+    const onUp = () => {
+      abort.abort();
+      this.#dragAbort = null;
+    };
+    document.addEventListener("pointermove", onMove, { signal: abort.signal });
+    document.addEventListener("pointerup", onUp, { signal: abort.signal });
+    document.addEventListener("pointercancel", onUp, { signal: abort.signal });
+  }
+  /** Parses the hex input on confirm and syncs every channel + surface. */
+  onHexInput() {
+    if (!this.hasHexTarget) return;
+    const parsed = hexToHsla(this.hexTarget.value);
+    if (!parsed) {
+      this.hexTarget.value = this.#hexString();
+      return;
+    }
+    this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#render();
+  }
+  /** 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.#render();
+  }
+  /** Reflects the model onto sliders, the hex input, preview, and form field. */
+  #render() {
+    for (const slider of this.sliderTargets) {
+      const channel = this.#channelOf(slider);
+      if (!channel) continue;
+      const value = this.#color[channel];
+      slider.setAttribute("aria-valuenow", String(value));
+      slider.setAttribute("aria-valuetext", valueText(channel, value));
+    }
+    const hex = this.#hexString();
+    if (this.hasHexTarget) this.hexTarget.value = hex;
+    for (const field of this.fieldTargets) field.value = hex;
+    for (const preview of this.previewTargets) preview.style.setProperty(COLOR_PROPERTY, hex);
+    this.element.style.setProperty(COLOR_PROPERTY, hex);
+    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
+    this.dispatch("change", {
+      detail: { value: hex, rgba: { ...rgb, a: this.#color.alpha / 100 } }
+    });
+  }
+  /** The current color as `#RRGGBB`, or `#RRGGBBAA` when alpha is enabled. */
+  #hexString() {
+    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 && channel in CHANNEL_RANGE ? channel : null;
+  }
+  /**
+   * 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 [
+      toFiniteNumber(slider.getAttribute("aria-valuemin")) ?? defMin,
+      toFiniteNumber(slider.getAttribute("aria-valuemax")) ?? defMax
+    ];
+  }
+};
+function valueText(channel, value) {
+  const label = channel.charAt(0).toUpperCase() + channel.slice(1);
+  const unit = channel === "hue" ? "degrees" : "percent";
+  return `${label} ${value} ${unit}`;
+}
+function hex2(value) {
+  return Math.round(Math.min(255, Math.max(0, value))).toString(16).padStart(2, "0");
+}
+function hslToRgb(h, s, l) {
+  const sat = s / 100;
+  const light = l / 100;
+  const c = (1 - Math.abs(2 * light - 1)) * sat;
+  const hp = (h % 360 + 360) % 360 / 60;
+  const x = c * (1 - Math.abs(hp % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];
+  else if (hp < 2) [r, g, b] = [x, c, 0];
+  else if (hp < 3) [r, g, b] = [0, c, x];
+  else if (hp < 4) [r, g, b] = [0, x, c];
+  else if (hp < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = light - c / 2;
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  const l = (max + min) / 2;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rn) h = (gn - bn) / delta % 6;
+    else if (max === gn) h = (bn - rn) / delta + 2;
+    else h = (rn - gn) / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hexToHsla(input) {
+  const hex = input.trim().replace(/^#/, "");
+  if (!/^(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(hex)) return null;
+  const full = hex.length <= 4 ? hex.split("").map((char) => char + char).join("") : hex;
+  const r = Number.parseInt(full.slice(0, 2), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
+  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) };
+}
+
+export { ColorPickerController };
+//# sourceMappingURL=color_picker_controller.js.map
+//# sourceMappingURL=color_picker_controller.js.map