stimeo-ui 0.15.0 → 0.17.0

data/dist/controllers/resizable_controller.js

@@ -1,40 +1,42 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/resizable_controller.ts
-
-// src/utils/arrow_step.ts
 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/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
 }
 
-// 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. */
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -47,72 +49,197 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/before_cache_reset.ts
-var BeforeCacheReset = class _BeforeCacheReset {
-  /** Every subscribed instance, iterated by the one shared document listener. */
-  static #subscribers = /* @__PURE__ */ new Set();
-  /** The shared listener; installed while at least one instance is subscribed. */
-  static #onBeforeCache = () => {
-    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
-  };
-  #rewind;
-  /** @param rewind - the pass that returns this controller's state to its initial form. */
-  constructor(rewind) {
-    this.#rewind = rewind;
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
   }
-  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
-  activate() {
-    const first = _BeforeCacheReset.#subscribers.size === 0;
-    _BeforeCacheReset.#subscribers.add(this);
-    if (first) {
-      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
-    }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
   }
-  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
-  deactivate() {
-    _BeforeCacheReset.#subscribers.delete(this);
-    if (_BeforeCacheReset.#subscribers.size > 0) return;
-    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  schedule() {
+    this.#pass.schedule();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
   }
 };
 
-// src/utils/tabindex_loan.ts
-var TabindexLoan = class {
+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;
+  }
+};
+
+function queryOpenDescendants(root, selector) {
+  const matches = [];
+  const roots = [root];
+  for (const scope of roots) {
+    matches.push(...scope.querySelectorAll(selector));
+    if (scope.nodeType === Node.ELEMENT_NODE) {
+      const shadow = scope.shadowRoot;
+      if (shadow) roots.push(shadow);
+    }
+    for (const element of scope.querySelectorAll("*")) {
+      if (element.shadowRoot) roots.push(element.shadowRoot);
+    }
+  }
+  return matches;
+}
+
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry = create();
+  Object.defineProperty(globalThis, symbol, { value: registry });
+  return registry;
+}
+
+var TabindexLoan = class _TabindexLoan {
+  static #registry = sharedRegistry(
+    "stimeo-ui.tabindex-loan.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
   #value;
+  #record;
   #lent = /* @__PURE__ */ new Set();
-  /** Returns live loans before Turbo can copy them into its page snapshot. */
-  #beforeCache = new BeforeCacheReset(() => this.returnAll());
-  /**
-   * @param value - the `tabindex` to lend. `"-1"` (the default) is
-   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
-   *   which a scroll region with no focusable content of its own needs.
-   */
-  constructor(value = "-1") {
+  constructor(value, owner) {
     this.#value = value;
+    this.#record = `data-${owner}-tabindex-loan`;
+    _TabindexLoan.#registry.names.add(this.#record);
   }
-  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
   lend(element) {
-    if (element.hasAttribute("tabindex")) return;
-    element.setAttribute("tabindex", this.#value);
+    const stack = this.#stack(element);
+    const current = element.getAttribute("tabindex");
+    const held = stack.find((hold) => hold.loan === this) ?? stack.find(
+      (hold) => hold.loan === null && hold.record === this.#record && hold.value === this.#value
+    );
+    const linked = stack.at(-1)?.value === current;
+    if (!held && current !== null && !linked) return;
     this.#lent.add(element);
-    this.#beforeCache.activate();
+    if (held) held.loan = this;
+    else stack.push({ loan: this, record: this.#record, value: this.#value, linked });
+    this.#mark(element, stack);
+    if (current === null || !held && current !== this.#value) {
+      element.setAttribute("tabindex", this.#value);
+    }
   }
-  /** Takes back every loan whose value is still the one that was lent. */
   returnAll() {
     for (const element of this.#lent) {
-      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+      const stack = this.#stack(element);
+      const hold = stack.find((held) => held.loan === this);
+      if (hold) this.#release(element, stack, hold);
     }
     this.#lent.clear();
-    this.#beforeCache.deactivate();
+  }
+  reclaim(element) {
+    if (element.getAttribute(this.#record) !== this.#value) return;
+    const stack = this.#stack(element);
+    const hold = stack.find((held) => held.loan === null && held.record === this.#record);
+    if (hold && !element.matches(":focus")) this.#release(element, stack, hold);
+  }
+  reclaimWithin(root) {
+    for (const element of queryOpenDescendants(root, `[${this.#record}]`)) {
+      this.reclaim(element);
+    }
+  }
+  #stack(element) {
+    const stacks = _TabindexLoan.#registry.stacks;
+    const stack = stacks.get(element) ?? this.#seed(element);
+    stacks.set(element, stack);
+    return stack;
+  }
+  #seed(element) {
+    const current = element.getAttribute("tabindex");
+    const holds = [];
+    for (const record of _TabindexLoan.#registry.names) {
+      const value = element.getAttribute(record);
+      if (value !== null) holds.push({ loan: null, record, value, linked: true });
+    }
+    holds.sort((one, other) => Number(one.value === current) - Number(other.value === current));
+    for (const [index, hold] of holds.entries()) hold.linked = index > 0;
+    return holds;
+  }
+  #release(element, stack, hold) {
+    const current = element.getAttribute("tabindex");
+    const index = stack.indexOf(hold);
+    const owns = current === hold.value && !stack.slice(index + 1).some((above2) => above2.value === current);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    if (!below) element.removeAttribute("tabindex");
+    else if (below.value !== current) element.setAttribute("tabindex", below.value);
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    for (const hold of stack) records.set(hold.record, hold.value);
+    for (const [name, recorded] of records) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(name, recorded);
+    }
   }
 };
 
-// src/controllers/resizable_controller.ts
 var DEFAULT_MIN = 0;
 var DEFAULT_MAX = 100;
 var DEFAULT_VALUE = 50;
 var DEFAULT_STEP = 1;
-var ResizableController = class extends Controller {
+var ResizableController = class _ResizableController extends Controller {
+  #numbers = new NumberValueReader();
   static targets = ["primary", "secondary", "separator"];
   static values = {
     min: { type: Number, default: DEFAULT_MIN },
@@ -120,38 +247,38 @@ var ResizableController = class extends Controller {
     step: { type: Number, default: DEFAULT_STEP },
     value: { type: Number, default: DEFAULT_VALUE }
   };
+  static valueConstraints = {
+    min: NUMBER_BOUNDS.finite,
+    max: NUMBER_BOUNDS.finite,
+    step: NUMBER_BOUNDS.positive,
+    value: NUMBER_BOUNDS.finite
+  };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
-  static events = ["change"];
-  /** Where the divider sat before the current collapse; `null` when unknown. */
+  static events = ["change", "reconcile"];
   #valueBeforeCollapse = null;
-  /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
-  #dragAbort = null;
-  /** `tabindex` lent to a pane so `F6` can put focus on it; panes carry none. */
-  #paneTabindex = new TabindexLoan();
-  /** Releases the pane cycle listener bound in {@link connect}. */
+  #painted = DEFAULT_VALUE;
+  #confirmed = DEFAULT_VALUE;
+  #drag = null;
+  #paneTabindex = new TabindexLoan("-1", this.identifier);
   #cycleAbort = null;
-  /** Folds the range and position inputs of one morph batch into a single paint. */
-  #repaint = new MicrotaskCoalescer(() => this.#render());
+  #repaint = new MorphRenderWatcher(() => this.#render());
   connect() {
-    this.element.removeAttribute("data-dragging");
-    this.#repaint.activate();
+    this.#paneTabindex.reclaimWithin(this.element);
+    this.#repaint.observe(this.element);
+    this.#confirmed = this.#position;
     this.#render();
     this.#cycleAbort = new AbortController();
     this.element.addEventListener("keydown", this.#onCycleKeydown, {
       signal: this.#cycleAbort.signal
     });
   }
-  /** Cancels any active pointer drag so listeners never leak past disconnect. */
   disconnect() {
-    this.#dragAbort?.abort();
-    this.#dragAbort = null;
+    this.#endDrag();
     this.#cycleAbort?.abort();
     this.#cycleAbort = null;
-    this.#repaint.cancel();
+    this.#repaint.disconnect();
     this.#paneTabindex.returnAll();
-    this.element.removeAttribute("data-dragging");
   }
-  /** Moves focus to the next pane on `F6`, wrapping; entering at the first one. */
   #onCycleKeydown = (event) => {
     if (event.key !== "F6") return;
     if (event.isComposing) return;
@@ -167,38 +294,39 @@ var ResizableController = class extends Controller {
     this.#paneTabindex.lend(next);
     next.focus();
   };
-  /** Re-renders when application code (or a Turbo morph) changes `value` at runtime. */
   valueValueChanged() {
     this.#repaint.schedule();
   }
-  /** Re-renders when application code (or a Turbo morph) changes `min` at runtime. */
   minValueChanged() {
     this.#repaint.schedule();
   }
-  /** Re-renders when application code (or a Turbo morph) changes `max` at runtime. */
   maxValueChanged() {
     this.#repaint.schedule();
   }
-  /** Re-publishes range and position onto a separator swapped in after connect. */
   separatorTargetConnected() {
     this.#repaint.schedule();
   }
-  /** Starts active pointer drag tracking and locks capture. */
+  separatorTargetDisconnected(separator) {
+    if (this.#drag?.separator === separator && !this.separatorTargets.includes(separator)) {
+      this.#endDrag();
+    }
+    this.#repaint.schedule();
+  }
   onPointerDown(event) {
     if (!this.hasSeparatorTarget || event.button !== 0) return;
     event.preventDefault();
-    const separator = this.separatorTarget;
+    const separators = this.separatorTargets;
+    const separator = separators[ownerIndex(separators, event.target)] ?? this.separatorTarget;
     separator.setPointerCapture(event.pointerId);
     separator.focus();
     this.element.setAttribute("data-dragging", "true");
-    this.#dragAbort?.abort();
+    this.#drag?.abort.abort();
     const abort = new AbortController();
-    this.#dragAbort = abort;
+    this.#drag = { separator, pointerId: event.pointerId, abort };
     separator.addEventListener("pointermove", this.#onPointerMove, { signal: abort.signal });
     separator.addEventListener("pointerup", this.#onPointerUp, { signal: abort.signal });
     separator.addEventListener("pointercancel", this.#onPointerUp, { signal: abort.signal });
   }
-  /** Keydown adjustments for ArrowUp/Down/Left/Right and Home/End. */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     if (!this.hasSeparatorTarget) return;
@@ -251,55 +379,67 @@ var ResizableController = class extends Controller {
     }
     if (handled) {
       event.preventDefault();
-      this.valueValue = Math.max(min, Math.min(nextValue, max));
-      this.#render();
-      this.#dispatchChange();
+      this.#commit(nextValue);
     }
   }
-  /** Collapses the primary pane to its minimum, or returns it to the last position. */
   toggle() {
     const { min, max } = this.#range;
     if (this.#position > min) {
       this.#valueBeforeCollapse = this.#position;
-      this.valueValue = min;
+      this.#commit(min);
     } else {
-      this.valueValue = this.#valueBeforeCollapse ?? max;
+      const restored = this.#valueBeforeCollapse ?? max;
       this.#valueBeforeCollapse = null;
+      this.#commit(restored);
     }
-    this.#render();
-    this.#dispatchChange();
   }
   #onPointerMove = (event) => {
     if (!this.hasSeparatorTarget) return;
     const rect = this.element.getBoundingClientRect();
     const raw = this.#isVertical ? (event.clientX - rect.left) / rect.width : (event.clientY - rect.top) / rect.height;
     const fraction = Number.isFinite(raw) ? Math.max(0, Math.min(raw, 1)) : 0;
-    const { min, max } = this.#range;
-    this.valueValue = Math.max(min, Math.min(Math.round(fraction * 100), max));
-    this.#render();
+    this.#move(Math.round(fraction * 100));
   };
-  #onPointerUp = (event) => {
+  #onPointerUp = () => {
+    this.#endDrag();
+    this.#confirm();
+  };
+  #endDrag() {
     this.element.removeAttribute("data-dragging");
-    this.#dragAbort?.abort();
-    this.#dragAbort = null;
-    if (this.hasSeparatorTarget) {
-      this.separatorTarget.releasePointerCapture(event.pointerId);
+    const drag = this.#drag;
+    this.#drag = null;
+    if (!drag) return;
+    drag.abort.abort();
+    try {
+      drag.separator.releasePointerCapture?.(drag.pointerId);
+    } catch {
     }
-    this.#dispatchChange();
-  };
-  /**
-   * Publishes the position: the fraction consumer CSS multiplies a pane by, and
-   * the range assistive tech reads off the separator. The clamped position is
-   * written back to the Value so it, ARIA, CSS, and dispatched events agree.
-   *
-   * @stimeoRenderRoot
-   */
+  }
+  #commit(raw) {
+    this.#move(raw);
+    this.#confirm();
+  }
+  #move(raw) {
+    const { min, max } = this.#range;
+    const position = Math.max(min, Math.min(raw, max));
+    this.valueValue = position;
+    this.#painted = position;
+    this.#paint();
+  }
   #render() {
+    this.#paint();
+    const position = this.#position;
+    if (position === this.#painted) return;
+    this.#painted = position;
+    if (position === this.#confirmed) return;
+    this.#confirmed = position;
+    this.dispatch("reconcile", { detail: this.#detail(position) });
+  }
+  #paint() {
+    if (this.#drag) this.element.setAttribute("data-dragging", "true");
+    else this.element.removeAttribute("data-dragging");
     const { min, max } = this.#range;
     const position = this.#position;
-    if (this.valueValue !== position) {
-      this.valueValue = position;
-    }
     this.element.style.setProperty("--stimeo--resizable-fraction", String(position / 100));
     if (this.hasSeparatorTarget) {
       this.separatorTarget.setAttribute("aria-valuenow", String(position));
@@ -307,32 +447,68 @@ var ResizableController = class extends Controller {
       this.separatorTarget.setAttribute("aria-valuemax", String(max));
     }
   }
-  #dispatchChange() {
-    const fraction = this.valueValue / 100;
-    this.dispatch("change", { detail: { value: this.valueValue, fraction } });
+  #confirm() {
+    const position = this.#position;
+    if (position === this.#confirmed) return;
+    this.#confirmed = position;
+    this.dispatch("change", { detail: this.#detail(position) });
+  }
+  #detail(position) {
+    return { value: position, fraction: position / 100 };
   }
-  /** The declared range after validation; an unreadable bound uses its default. */
   get #range() {
-    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN;
-    const max = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX;
+    const min = this.#safeMin;
+    const max = this.#safeMax;
     return { min, max: Math.max(min, max) };
   }
-  /** The declared position, clamped into the validated range. */
   get #position() {
     const { min, max } = this.#range;
-    const value = Number.isFinite(this.valueValue) ? this.valueValue : DEFAULT_VALUE;
+    const value = this.#safeValue;
     return Math.max(min, Math.min(value, max));
   }
-  /** The keyboard increment; a non-positive or unreadable one uses the default. */
   get #step() {
-    return Number.isFinite(this.stepValue) && this.stepValue > 0 ? this.stepValue : DEFAULT_STEP;
+    return this.#safeStep;
   }
-  /** Whether the divider runs vertically; a separator that does not say is horizontal. */
   get #isVertical() {
     return this.hasSeparatorTarget && this.separatorTarget.getAttribute("aria-orientation") === "vertical";
   }
+  get #safeMin() {
+    return this.#numbers.read(
+      this,
+      "min",
+      this.minValue,
+      _ResizableController.values.min.default,
+      _ResizableController.valueConstraints.min
+    );
+  }
+  get #safeMax() {
+    return this.#numbers.read(
+      this,
+      "max",
+      this.maxValue,
+      _ResizableController.values.max.default,
+      _ResizableController.valueConstraints.max
+    );
+  }
+  get #safeStep() {
+    return this.#numbers.read(
+      this,
+      "step",
+      this.stepValue,
+      _ResizableController.values.step.default,
+      _ResizableController.valueConstraints.step
+    );
+  }
+  get #safeValue() {
+    return this.#numbers.read(
+      this,
+      "value",
+      this.valueValue,
+      _ResizableController.values.value.default,
+      _ResizableController.valueConstraints.value
+    );
+  }
 };
 
 export { ResizableController };
-//# sourceMappingURL=resizable_controller.js.map
 //# sourceMappingURL=resizable_controller.js.map