stimeo-ui 0.8.0 → 0.9.0

data/dist/controllers/resizable_controller.js

@@ -8,6 +8,39 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/microtask_coalescer.ts
+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;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/before_cache_reset.ts
 var BeforeCacheReset = class _BeforeCacheReset {
   /** Every subscribed instance, iterated by the one shared document listener. */
@@ -69,26 +102,34 @@ var TabindexLoan = class {
 };
 
 // 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 {
   static targets = ["primary", "secondary", "separator"];
   static values = {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
-    step: { type: Number, default: 1 },
-    value: { type: Number, default: 50 }
+    min: { type: Number, default: DEFAULT_MIN },
+    max: { type: Number, default: DEFAULT_MAX },
+    step: { type: Number, default: DEFAULT_STEP },
+    value: { type: Number, default: DEFAULT_VALUE }
   };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
   static events = ["change"];
-  /** The value held before the current collapse, restored when toggling back. */
-  #valueBeforeCollapse = 50;
+  /** Where the divider sat before the current collapse; `null` when unknown. */
+  #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}. */
   #cycleAbort = null;
+  /** Folds the range and position inputs of one morph batch into a single paint. */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
   connect() {
-    this.#clampAndSync();
+    this.element.removeAttribute("data-dragging");
+    this.#repaint.activate();
+    this.#render();
     this.#cycleAbort = new AbortController();
     this.element.addEventListener("keydown", this.#onCycleKeydown, {
       signal: this.#cycleAbort.signal
@@ -100,17 +141,19 @@ var ResizableController = class extends Controller {
     this.#dragAbort = null;
     this.#cycleAbort?.abort();
     this.#cycleAbort = null;
+    this.#repaint.cancel();
     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;
     if (event.defaultPrevented) return;
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
     const panes = [];
     if (this.hasPrimaryTarget) panes.push(this.primaryTarget);
     if (this.hasSecondaryTarget) panes.push(this.secondaryTarget);
-    if (panes.length === 0) return;
     const target = event.target;
     const current = panes.findIndex((pane) => target instanceof Node && pane.contains(target));
     const next = panes[(current + 1) % panes.length];
@@ -119,12 +162,21 @@ var ResizableController = class extends Controller {
     this.#paneTabindex.lend(next);
     next.focus();
   };
-  /**
-   * Stimulus lifecycle callback when the valueValue changes.
-   * Keeps CSS fractions and ARIA status completely aligned.
-   */
+  /** Re-renders when application code (or a Turbo morph) changes `value` at runtime. */
   valueValueChanged() {
-    this.#clampAndSync();
+    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. */
   onPointerDown(event) {
@@ -145,44 +197,44 @@ var ResizableController = class extends Controller {
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     if (!this.hasSeparatorTarget) return;
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
+    const { min, max } = this.#range;
+    const isVertical = this.#isVertical;
     let handled = true;
-    let nextValue = this.valueValue;
+    let nextValue = this.#position;
     switch (event.key) {
       case "ArrowLeft":
         if (isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowRight":
         if (isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowUp":
         if (!isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowDown":
         if (!isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "Home":
-        nextValue = this.minValue;
+        nextValue = min;
         break;
       case "End":
-        nextValue = this.maxValue;
+        nextValue = max;
         break;
       case "Enter":
         event.preventDefault();
@@ -194,65 +246,86 @@ var ResizableController = class extends Controller {
     }
     if (handled) {
       event.preventDefault();
-      this.valueValue = Math.max(this.minValue, Math.min(nextValue, this.maxValue));
-      this.#clampAndSync();
+      this.valueValue = Math.max(min, Math.min(nextValue, max));
+      this.#render();
       this.#dispatchChange();
     }
   }
-  /** Double-click or Enter to collapse/restore pane to min/max levels. */
+  /** Double-click or Enter to collapse the primary pane, or put it back. */
   toggle() {
-    const threshold = this.minValue + (this.maxValue - this.minValue) / 2;
-    if (this.valueValue > this.minValue) {
-      this.#valueBeforeCollapse = this.valueValue;
-      this.valueValue = this.minValue;
+    const { min, max } = this.#range;
+    if (this.#position > min) {
+      this.#valueBeforeCollapse = this.#position;
+      this.valueValue = min;
     } else {
-      this.valueValue = this.#valueBeforeCollapse >= threshold ? this.#valueBeforeCollapse : this.maxValue;
+      this.valueValue = this.#valueBeforeCollapse ?? max;
+      this.#valueBeforeCollapse = null;
     }
-    this.#clampAndSync();
+    this.#render();
     this.#dispatchChange();
   }
   #onPointerMove = (event) => {
     if (!this.hasSeparatorTarget) return;
     const rect = this.element.getBoundingClientRect();
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
-    let fraction = 0.5;
-    if (isVertical) {
-      fraction = (event.clientX - rect.left) / rect.width;
-    } else {
-      fraction = (event.clientY - rect.top) / rect.height;
-    }
-    fraction = Math.max(0, Math.min(fraction, 1));
-    const percent = Math.round(fraction * 100);
-    this.valueValue = Math.max(this.minValue, Math.min(percent, this.maxValue));
-    this.#clampAndSync();
+    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();
   };
   #onPointerUp = (event) => {
-    if (!this.hasSeparatorTarget) return;
-    const separator = this.separatorTarget;
-    separator.releasePointerCapture(event.pointerId);
     this.element.removeAttribute("data-dragging");
     this.#dragAbort?.abort();
     this.#dragAbort = null;
+    if (this.hasSeparatorTarget) {
+      this.separatorTarget.releasePointerCapture(event.pointerId);
+    }
     this.#dispatchChange();
   };
-  #clampAndSync() {
-    const clamped = Math.max(this.minValue, Math.min(this.valueValue, this.maxValue));
-    if (this.valueValue !== clamped) {
-      this.valueValue = clamped;
+  /**
+   * 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
+   */
+  #render() {
+    const { min, max } = this.#range;
+    const position = this.#position;
+    if (this.valueValue !== position) {
+      this.valueValue = position;
     }
-    const fraction = clamped / 100;
-    this.element.style.setProperty("--stimeo--resizable-fraction", String(fraction));
+    this.element.style.setProperty("--stimeo--resizable-fraction", String(position / 100));
     if (this.hasSeparatorTarget) {
-      this.separatorTarget.setAttribute("aria-valuenow", String(clamped));
-      this.separatorTarget.setAttribute("aria-valuemin", String(this.minValue));
-      this.separatorTarget.setAttribute("aria-valuemax", String(this.maxValue));
+      this.separatorTarget.setAttribute("aria-valuenow", String(position));
+      this.separatorTarget.setAttribute("aria-valuemin", String(min));
+      this.separatorTarget.setAttribute("aria-valuemax", String(max));
     }
   }
   #dispatchChange() {
     const fraction = this.valueValue / 100;
     this.dispatch("change", { detail: { value: this.valueValue, fraction } });
   }
+  /** 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;
+    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;
+    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;
+  }
+  /** Whether the divider runs vertically; a separator that does not say is horizontal. */
+  get #isVertical() {
+    return this.hasSeparatorTarget && this.separatorTarget.getAttribute("aria-orientation") === "vertical";
+  }
 };
 
 export { ResizableController };