stimeo-ui 0.6.0 → 0.8.0

data/dist/controllers/separator_controller.js

@@ -8,82 +8,398 @@ 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/default_attribute.ts
-function setDefaultAttribute(element, name, value) {
-  if (element.hasAttribute(name)) return false;
-  element.setAttribute(name, value);
-  return true;
+// src/utils/attribute_lease.ts
+var AttributeLease = class {
+  #attribute;
+  #records = /* @__PURE__ */ new Map();
+  /** @param attribute - The attribute whose temporary values this lease owns. */
+  constructor(attribute) {
+    this.#attribute = attribute;
+  }
+  /** Writes or removes the leased attribute while preserving its authored value. */
+  write(element, value) {
+    const existing = this.#records.get(element);
+    if (existing) {
+      existing.written = value;
+    } else {
+      this.#records.set(element, {
+        original: element.getAttribute(this.#attribute),
+        written: value
+      });
+    }
+    this.#reflect(element, value);
+  }
+  /** Returns one lease without overwriting a value subsequently authored by a consumer. */
+  return(element) {
+    const record = this.#records.get(element);
+    if (!record) return;
+    this.#records.delete(element);
+    const stillOwned = element.getAttribute(this.#attribute) === record.written;
+    if (stillOwned) this.#reflect(element, record.original);
+  }
+  /** Reflects only a real value transition, avoiding self-triggered mutation work. */
+  #reflect(element, value) {
+    if (element.getAttribute(this.#attribute) === value) return;
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
+  }
+  /** Returns every outstanding lease using the same ownership check as {@link return}. */
+  returnAll() {
+    for (const element of Array.from(this.#records.keys())) this.return(element);
+  }
+};
+
+// 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;
+  }
+  /** 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);
+    }
+  }
+  /** 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);
+  }
+};
+
+// 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/stepped_value.ts
+function effectiveStep(step) {
+  return Number.isFinite(step) && step > 0 ? step : 1;
+}
+function snapSteppedValue(raw, range) {
+  if (!(range.min <= range.max)) return finiteFallback(range.min, range.max);
+  const input = Number.isNaN(raw) ? finiteFallback(range.min, range.max) : raw;
+  const clamped = Math.min(range.max, Math.max(range.min, input));
+  const step = effectiveStep(range.step);
+  const base = stepBase(range);
+  const candidates = [];
+  if (Number.isFinite(range.min)) candidates.push(range.min);
+  if (Number.isFinite(range.max)) candidates.push(range.max);
+  const gridPosition = (clamped - base) / step;
+  if (Number.isFinite(gridPosition)) {
+    addGridCandidate(candidates, Math.floor(gridPosition), range, base, step);
+    addGridCandidate(candidates, Math.ceil(gridPosition), range, base, step);
+  }
+  if (candidates.length === 0) return clamped;
+  let nearest = candidates[0];
+  let nearestDistance = Math.abs(clamped - nearest);
+  for (const candidate of candidates.slice(1)) {
+    const distance = Math.abs(clamped - candidate);
+    if (distance < nearestDistance || nearlyEqual(distance, nearestDistance) && candidate > nearest) {
+      nearest = candidate;
+      nearestDistance = distance;
+    }
+  }
+  return nearest;
+}
+function stepSteppedValue(current, count, range) {
+  const value = snapSteppedValue(current, range);
+  const distance = Math.abs(Math.trunc(count));
+  if (!Number.isFinite(distance) || distance === 0) return value;
+  const direction = Math.sign(count);
+  const adjacent = adjacentSteppedValue(value, direction, range);
+  const raw = adjacent + direction * (distance - 1) * effectiveStep(range.step);
+  return snapSteppedValue(raw, range);
+}
+function adjacentSteppedValue(current, direction, range) {
+  const step = effectiveStep(range.step);
+  const base = stepBase(range);
+  const candidates = [];
+  if (direction > 0) {
+    const position2 = (current - base) / step;
+    if (Number.isFinite(position2)) {
+      let gridIndex = Math.floor(position2) + 1;
+      let candidate = cleanGridValue(base + gridIndex * step, base, step);
+      if (candidate < current || nearlyEqual(candidate, current)) {
+        gridIndex += 1;
+        candidate = cleanGridValue(base + gridIndex * step, base, step);
+      }
+      if (candidate > current && !nearlyEqual(candidate, current) && within(candidate, range.min, range.max)) {
+        candidates.push(clamp(candidate, range));
+      }
+    }
+    return clamp(Math.min(...candidates), range);
+  }
+  const position = (current - base) / step;
+  if (Number.isFinite(position)) {
+    let gridIndex = Math.ceil(position) - 1;
+    let candidate = cleanGridValue(base + gridIndex * step, base, step);
+    if (candidate > current || nearlyEqual(candidate, current)) {
+      gridIndex -= 1;
+      candidate = cleanGridValue(base + gridIndex * step, base, step);
+    }
+    if (candidate < current && !nearlyEqual(candidate, current) && within(candidate, range.min, range.max)) {
+      candidates.push(clamp(candidate, range));
+    }
+  }
+  return clamp(Math.max(...candidates), range);
+}
+function addGridCandidate(candidates, index, range, base, step) {
+  const candidate = cleanGridValue(base + index * step, base, step);
+  if (within(candidate, range.min, range.max)) candidates.push(clamp(candidate, range));
+}
+function stepBase(range) {
+  if (range.base !== void 0 && Number.isFinite(range.base)) return range.base;
+  return Number.isFinite(range.min) ? range.min : 0;
+}
+function cleanGridValue(value, base, step) {
+  const precision = Math.max(decimalPlaces(base), decimalPlaces(step));
+  return precision <= 100 ? Number(value.toFixed(precision)) : value;
+}
+function decimalPlaces(value) {
+  const [coefficient = "", exponentText] = Math.abs(value).toString().toLowerCase().split("e");
+  const fractionLength = coefficient.split(".")[1]?.length ?? 0;
+  const exponent = exponentText === void 0 ? 0 : Number(exponentText);
+  return Math.max(0, fractionLength - exponent);
+}
+function within(value, min, max) {
+  return (value > min || nearlyEqual(value, min)) && (value < max || nearlyEqual(value, max));
+}
+function clamp(value, range) {
+  return Math.min(range.max, Math.max(range.min, value));
+}
+function nearlyEqual(left, right) {
+  const scale = Math.max(Math.abs(left), Math.abs(right));
+  return Number.isFinite(left) && Number.isFinite(right) && Math.abs(left - right) <= Number.EPSILON * scale;
+}
+function finiteFallback(min, max) {
+  if (Number.isFinite(min)) return min;
+  if (Number.isFinite(max)) return max;
+  return 0;
 }
 
 // src/controllers/separator_controller.ts
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
 var SeparatorController = class extends Controller {
   static values = {
     orientation: { type: String, default: "horizontal" },
     focusable: { type: Boolean, default: false },
-    step: { type: Number, default: 1 }
+    min: { type: Number, default: DEFAULT_MIN },
+    max: { type: Number, default: DEFAULT_MAX },
+    step: { type: Number, default: 1 },
+    value: { type: Number, default: DEFAULT_MIN }
   };
   static actions = ["onKeydown"];
   static events = ["change"];
+  #role = new AttributeLease("role");
+  #tabindex = new AttributeLease("tabindex");
+  #orientation = new AttributeLease("aria-orientation");
+  #minimum = new AttributeLease("aria-valuemin");
+  #maximum = new AttributeLease("aria-valuemax");
+  #current = new AttributeLease("aria-valuenow");
+  /** Collapses a morph that changes several render Values into one silent repaint. */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
+  /** Restores authored semantics before Turbo snapshots the element. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /** Hydrates legacy ARIA input once, normalizes the current Value, and renders. */
   connect() {
-    setDefaultAttribute(this.element, "role", "separator");
-    setDefaultAttribute(this.element, "aria-orientation", this.orientationValue);
-    if (this.focusableValue) {
-      setDefaultAttribute(this.element, "tabindex", "0");
-      setDefaultAttribute(this.element, "aria-valuemin", "0");
-      setDefaultAttribute(this.element, "aria-valuemax", "100");
-      setDefaultAttribute(this.element, "aria-valuenow", String(this.#clamp(this.#value)));
-    }
+    this.#hydrateValues();
+    this.#repaint.activate();
+    this.#beforeCache.activate();
+    const value = this.#currentValue();
+    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+    this.#render();
+  }
+  /** Cancels repaint work and returns every semantic attribute this instance controlled. */
+  disconnect() {
+    this.#repaint.cancel();
+    this.#beforeCache.deactivate();
+    this.#returnAttributes();
+  }
+  /** Silently repaints an orientation changed by application code or a Turbo morph. */
+  orientationValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently adds or removes the focusable range semantics at runtime. */
+  focusableValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a minimum changed by application code or a Turbo morph. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a maximum changed by application code or a Turbo morph. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a step changed by application code or a Turbo morph. */
+  stepValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a current value changed by application code or a Turbo morph. */
+  valueValueChanged() {
+    this.#repaint.schedule();
   }
   /** Adjusts the value on arrow / Home / End keys (focusable variant only). */
   onKeydown(event) {
-    if (isReservedArrowChord(event)) return;
-    if (!this.focusableValue) return;
-    const horizontal = this.element.getAttribute("aria-orientation") !== "vertical";
+    if (isReservedArrowChord(event) || !this.focusableValue) return;
+    const horizontal = this.#effectiveOrientation === "horizontal";
+    const range = this.#effectiveRange;
+    const current = snapSteppedValue(this.valueValue, range);
     let next = null;
     switch (event.key) {
       case "ArrowUp":
-        if (horizontal) next = this.#value + this.stepValue;
+        if (horizontal) next = stepSteppedValue(current, 1, range);
         break;
       case "ArrowDown":
-        if (horizontal) next = this.#value - this.stepValue;
+        if (horizontal) next = stepSteppedValue(current, -1, range);
         break;
       case "ArrowRight":
-        if (!horizontal) next = this.#value + this.stepValue;
+        if (!horizontal) next = stepSteppedValue(current, 1, range);
         break;
       case "ArrowLeft":
-        if (!horizontal) next = this.#value - this.stepValue;
+        if (!horizontal) next = stepSteppedValue(current, -1, range);
         break;
       case "Home":
-        next = this.#min;
+        next = range.min;
         break;
       case "End":
-        next = this.#max;
+        next = range.max;
         break;
       default:
         return;
     }
     if (next === null) return;
     event.preventDefault();
-    const clamped = this.#clamp(next);
-    if (clamped === this.#value) return;
-    this.element.setAttribute("aria-valuenow", String(clamped));
-    this.dispatch("change", { detail: { value: clamped } });
+    this.#commit(next, current);
+  }
+  /** Stores a normalized user value, renders immediately, and reports real changes. */
+  #commit(raw, previous) {
+    const value = snapSteppedValue(raw, this.#effectiveRange);
+    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+    this.#render();
+    if (value !== previous) this.dispatch("change", { detail: { value } });
   }
-  get #value() {
-    return this.#numericAttr("aria-valuenow", 0);
+  /**
+   * Reflects live Values into the connected element without dispatching.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    const range = this.#effectiveRange;
+    const value = snapSteppedValue(this.valueValue, range);
+    this.#role.write(this.element, "separator");
+    this.#orientation.write(this.element, this.#effectiveOrientation);
+    if (!this.focusableValue) {
+      this.#tabindex.write(this.element, null);
+      this.#minimum.write(this.element, null);
+      this.#maximum.write(this.element, null);
+      this.#current.write(this.element, null);
+      return;
+    }
+    this.#tabindex.write(this.element, "0");
+    this.#minimum.write(this.element, String(range.min));
+    this.#maximum.write(this.element, String(range.max));
+    this.#current.write(this.element, String(value));
+  }
+  /** Effective orientation; unknown strings fall back to the horizontal contract. */
+  get #effectiveOrientation() {
+    return this.orientationValue === "vertical" ? "vertical" : "horizontal";
+  }
+  /** Finite, ordered range shared by rendering and keyboard stepping. */
+  get #effectiveRange() {
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN;
+    const candidateMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX;
+    return {
+      min,
+      max: Math.max(min, candidateMax),
+      step: this.stepValue,
+      base: min
+    };
+  }
+  /** Current normalized value derived from the live declarative inputs. */
+  #currentValue() {
+    return snapSteppedValue(this.valueValue, this.#effectiveRange);
+  }
+  /** Copies valid authored ARIA into Values only when no explicit Value exists. */
+  #hydrateValues() {
+    if (!this.#hasInput("orientation")) {
+      const orientation = this.element.getAttribute("aria-orientation");
+      if (orientation === "horizontal" || orientation === "vertical") {
+        this.orientationValue = orientation;
+      }
+    }
+    const min = this.#finiteAttribute("aria-valuemin");
+    if (!this.#hasInput("min") && min !== null) this.minValue = min;
+    const max = this.#finiteAttribute("aria-valuemax");
+    if (!this.#hasInput("max") && max !== null) this.maxValue = max;
+    const value = this.#finiteAttribute("aria-valuenow");
+    if (!this.#hasInput("value") && value !== null) this.valueValue = value;
   }
-  get #min() {
-    return this.#numericAttr("aria-valuemin", 0);
+  /** Whether the author supplied the namespaced Value instead of using its default. */
+  #hasInput(name) {
+    return this.element.hasAttribute(`data-${this.identifier}-${name}-value`);
   }
-  get #max() {
-    return this.#numericAttr("aria-valuemax", 100);
+  /** Strict finite-number parser for the one-time progressive-enhancement bridge. */
+  #finiteAttribute(name) {
+    const raw = this.element.getAttribute(name);
+    if (raw === null || raw.trim() === "") return null;
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : null;
   }
-  #clamp(value) {
-    return Math.min(this.#max, Math.max(this.#min, value));
+  /** Returns attributes without overwriting values a consumer changed after render. */
+  #returnAttributes() {
+    this.#role.return(this.element);
+    this.#tabindex.return(this.element);
+    this.#orientation.return(this.element);
+    this.#minimum.return(this.element);
+    this.#maximum.return(this.element);
+    this.#current.return(this.element);
   }
-  #numericAttr(name, fallback) {
-    const parsed = Number.parseFloat(this.element.getAttribute(name) ?? "");
-    return Number.isNaN(parsed) ? fallback : parsed;
+  /** Prevents a queued Value repaint from racing Turbo's restored snapshot. */
+  #rewindForCache() {
+    this.#repaint.cancel();
+    this.#returnAttributes();
   }
 };
 

data/dist/controllers/sidebar_controller.js

@@ -115,8 +115,81 @@ var EscapeLayer = class _EscapeLayer {
   }
 };
 
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+var TAB_STOP_CANDIDATE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]"
+].join(",");
+function isRenderedForFocus(element) {
+  const check = element.checkVisibility;
+  return typeof check === "function" ? check.call(element, { visibilityProperty: true }) : true;
+}
+function authoredTabindex(element) {
+  const value = element.getAttribute("tabindex");
+  if (value === null || !/^[+-]?\d+$/.test(value.trim())) return null;
+  return Number(value);
+}
+function hasNativeTabStop(element) {
+  if (element instanceof HTMLAnchorElement || element instanceof HTMLAreaElement) {
+    return element.hasAttribute("href");
+  }
+  if (element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (element instanceof HTMLInputElement) return element.type !== "hidden";
+  if (element instanceof HTMLIFrameElement) return true;
+  if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+    return element.hasAttribute("controls");
+  }
+  if (element instanceof HTMLElement && element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    return details instanceof HTMLDetailsElement && Array.from(details.children).find((child) => child.tagName === "SUMMARY") === element;
+  }
+  return false;
+}
+function hasEditableTabStop(element) {
+  const value = element.getAttribute("contenteditable")?.toLowerCase();
+  return value === "" || value === "true" || value === "plaintext-only";
+}
+function isTabStop(element) {
+  if (!canTakeFocus(element) || !isRenderedForFocus(element)) return false;
+  const tabindex = authoredTabindex(element);
+  if (tabindex !== null) return tabindex >= 0;
+  return hasNativeTabStop(element) || hasEditableTabStop(element);
+}
+function tabStopsWithin(root) {
+  return Array.from(root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)).filter(
+    isTabStop
+  );
+}
+
 // src/utils/focus_trap.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FocusTrap = class {
   /** The element focused before activation, restored on deactivation. */
   #previouslyFocused = null;
@@ -278,24 +351,24 @@ var FocusTrap = class {
   }
   /** Collects the container's currently focusable descendants in DOM order. */
   #focusableElements() {
-    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
-      (el) => !el.hidden
-    );
+    return tabStopsWithin(this.#getContainer());
   }
 };
 
 // src/utils/safe_storage.ts
 function readLocalStorage(key) {
   try {
-    return window.localStorage.getItem(key);
-  } catch {
-    return null;
+    return { ok: true, value: window.localStorage.getItem(key) };
+  } catch (error) {
+    return { ok: false, error };
   }
 }
 function writeLocalStorage(key, value) {
   try {
     window.localStorage.setItem(key, value);
-  } catch {
+    return { ok: true, value: void 0 };
+  } catch (error) {
+    return { ok: false, error };
   }
 }
 
@@ -754,8 +827,8 @@ var SidebarController = class extends Controller {
   #restoreCollapsed() {
     const key = this.#storageKey;
     if (key) {
-      const stored = readLocalStorage(key);
-      if (stored !== null) return stored === "1";
+      const result = readLocalStorage(key);
+      if (result.ok && result.value !== null) return result.value === "1";
     }
     const domState = this.hasPanelTarget ? this.panelTarget.getAttribute("data-state") : null;
     if (domState === "collapsed") return true;

data/dist/controllers/spinner_controller.js

@@ -222,7 +222,7 @@ var SpinnerController = class extends Controller {
     timeout: { type: Number, default: 0 }
   };
   static actions = ["start", "stop"];
-  static events = ["hide", "show", "timeout"];
+  static events = ["hide", "show", "timeout", "reconcile"];
   #timers = new SafeTimeout();
   #floor = new MinDurationFloor(this.#timers);
   #gate = new DetachGate();
@@ -326,16 +326,18 @@ var SpinnerController = class extends Controller {
    * Returns the loading state to idle for the snapshot Turbo is about to take,
    * so a page reached with the Back button is not restored mid-load with a
    * spinner nothing can stop. State only: `data-state`, the indicator's `hidden`,
-   * and `aria-busy`. No `hide` is dispatched — the load was never observed to
-   * finish, and a snapshot rewind is not a lifecycle event the consumer can act
-   * on. The live page keeps its timers, so a navigation that never completes
-   * leaves the running cycle intact.
+   * and `aria-busy`. No `hide` is dispatched — that would claim the load finished.
+   * The rewind reports itself as `reconcile` instead, so a consumer painting from
+   * `show` can drop it before the snapshot is taken. The live page keeps its
+   * timers, so a navigation that never completes leaves the running cycle intact.
    */
   #rewindForCache() {
+    const running = this.element.getAttribute("data-state") !== "idle";
     this.#cancelTimeout();
     this.#setBusy(false);
     if (this.hasIndicatorTarget) this.indicatorTarget.hidden = true;
     this.element.setAttribute("data-state", "idle");
+    if (running) this.dispatch("reconcile", { detail: {} });
   }
   /** Reflects busy state onto the controlled region (if present). */
   #setBusy(busy) {