stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/date_range_picker_controller.js

@@ -1,53 +1,201 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/date_range_picker_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
 
-// 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 gridDirectionElement(grid, root) {
+  const table = grid.closest("table");
+  return table !== null && root.contains(table) ? table : grid;
+}
 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;
+}
 
-// 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;
+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;
+}
+
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry2 = create();
+  Object.defineProperty(globalThis, symbol, { value: registry2 });
+  return registry2;
+}
+
+var registry = sharedRegistry(
+  "stimeo-ui.attribute-lease.registry.v1",
+  () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+);
+function isAttributeValue(value) {
+  return value === null || typeof value === "string";
+}
+function readLeaseRecord(element, record) {
+  try {
+    const parsed = JSON.parse(element.getAttribute(record) ?? "null");
+    if (!Array.isArray(parsed)) return void 0;
+    const [original, written, ...rest] = parsed;
+    const linked = rest[0] !== false;
+    const beneath = linked ? rest : rest.slice(1);
+    if (!beneath.every((under) => typeof under === "string")) return void 0;
+    return isAttributeValue(original) && isAttributeValue(written) ? { original, written, linked, beneath } : void 0;
+  } catch {
+    return void 0;
   }
-  /** 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);
+}
+function attributeStack(element, attribute) {
+  const byAttribute = registry.stacks.get(element) ?? /* @__PURE__ */ new Map();
+  registry.stacks.set(element, byAttribute);
+  const known = byAttribute.get(attribute);
+  if (known) return known;
+  const found = [];
+  for (const record of registry.names.get(attribute) ?? []) {
+    const read = readLeaseRecord(element, record);
+    if (read) found.push({ ...read, record });
+  }
+  const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+  const stack = found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+    lease: null,
+    record,
+    written,
+    original,
+    linked: linked && index > 0
+  }));
+  byAttribute.set(attribute, stack);
+  return stack;
+}
+function findHold(stack, lease, record) {
+  return stack.find((held) => held.lease === lease) ?? stack.find((held) => held.lease === null && held.record === record);
+}
+var AttributeLease = class {
+  #attribute;
+  #record;
+  #base;
+  #preserveAuthor;
+  #held = /* @__PURE__ */ new Set();
+  constructor(attribute, owner, options = {}) {
+    this.#attribute = attribute;
+    this.#record = `data-${owner}-${attribute}-lease`;
+    this.#base = options.base === true;
+    this.#preserveAuthor = options.preserveAuthor === true;
+    const names = registry.names;
+    names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
+  }
+  write(element, value) {
+    const stack = attributeStack(element, this.#attribute);
+    const hold = this.#take(stack) ?? this.#acquire(element, stack);
+    this.#held.add(element);
+    const shows = !this.#covered(element, stack, hold);
+    hold.written = value;
+    this.#mark(element, stack);
+    if (shows) this.#reflect(element, value);
+  }
+  return(element) {
+    const held = this.#held.delete(element);
+    const known = registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? attributeStack(element, this.#attribute) : [];
+    const hold = this.#take(stack);
+    if (!hold) return false;
+    const carries = element.getAttribute(this.#attribute) === hold.written;
+    const owns = carries && !this.#covered(element, stack, hold);
+    const index = stack.indexOf(hold);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return true;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    this.#reflect(element, below ? below.written : hold.original);
+    return true;
+  }
+  returnAll() {
+    for (const element of Array.from(this.#held)) this.return(element);
+  }
+  #take(stack) {
+    const hold = findHold(stack, this, this.#record);
+    if (hold) hold.lease = this;
+    return hold;
+  }
+  #acquire(element, stack) {
+    const current = element.getAttribute(this.#attribute);
+    const top = stack.at(-1);
+    const bottom = stack[0];
+    const over = top?.written === current ? top : void 0;
+    const from = this.#base ? this.#preserveAuthor && !stack.some((held) => held.written === current) ? void 0 : bottom : over;
+    const hold = {
+      lease: this,
+      record: this.#record,
+      written: current,
+      original: from ? from.original : current,
+      linked: !this.#base && over !== void 0
+    };
+    if (this.#base && bottom) {
+      bottom.linked = true;
+      stack.unshift(hold);
+    } else stack.push(hold);
+    return hold;
+  }
+  #covered(element, stack, hold) {
+    const current = element.getAttribute(this.#attribute);
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === current);
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    stack.forEach((hold, index) => {
+      const names = stack.slice(0, index).map((under) => under.record);
+      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
+      const marker = hold.linked || beneath.length === 0 ? [] : [false];
+      records.set(
+        hold.record,
+        hold.written === hold.original && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.original, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      setAttributeIfChanged(element, name, recorded);
     }
   }
-  /** 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);
+  #reflect(element, value) {
+    setAttributeIfChanged(element, this.#attribute, value);
   }
 };
 
-// src/utils/intl_format.ts
 var formatters = /* @__PURE__ */ new WeakMap();
 function intlFormatter(factory, locale, options, fallbackLocale) {
   const cache = cacheFor(factory);
@@ -76,7 +224,6 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
-// src/utils/dates.ts
 function toISODateString(date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -109,12 +256,35 @@ function parseISOMonthString(monthStr) {
 function toISOMonthString(date) {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
 }
+function monthGridDays(year, month, weekStart) {
+  const first = new Date(year, month - 1, 1);
+  const offset = (first.getDay() - weekStart + 7) % 7;
+  const current = new Date(first);
+  current.setDate(first.getDate() - offset);
+  const days = [];
+  for (let i = 0; i < 42; i++) {
+    days.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  return days;
+}
+function dateInMonthClamped(date, year, month) {
+  const target = new Date(year, month - 1, 1);
+  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  target.setDate(Math.min(date.getDate(), lastDay));
+  return target;
+}
+function shiftMonthClamped(date, delta) {
+  return dateInMonthClamped(date, date.getFullYear(), date.getMonth() + 1 + delta);
+}
+function shiftYearClamped(date, delta) {
+  return dateInMonthClamped(date, date.getFullYear() + delta, date.getMonth() + 1);
+}
 var MONTH_LABEL_OPTIONS = { month: "long", year: "numeric" };
 function monthLabelFormatter(locale) {
   return intlFormatter(Intl.DateTimeFormat, locale, MONTH_LABEL_OPTIONS, "en");
 }
 
-// src/utils/field_mirror.ts
 function writeField(field, value) {
   if (field.value === value) return false;
   field.value = value;
@@ -124,32 +294,40 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/locale.ts
 function resolveLocale(element, declared = "") {
   return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
 }
 
-// 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;
@@ -162,43 +340,52 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/safe_timeout.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 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);
@@ -215,7 +402,6 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
-// src/utils/string_list.ts
 function parseStringList(raw, fallback = []) {
   const text = raw.trim();
   if (text.length === 0) return [...fallback];
@@ -229,67 +415,42 @@ function parseStringList(raw, fallback = []) {
   return parsed.filter((entry) => typeof entry === "string");
 }
 
-// src/utils/target_selector.ts
 function targetSelector(identifier, name) {
   return `[data-${identifier}-target~="${name}"]`;
 }
 
-// src/controllers/date_range_picker_controller.ts
 var GRID_SIZE = 42;
 var DateRangePickerController = class extends Controller {
+  #fieldWrites = /* @__PURE__ */ new WeakMap();
   static targets = ["grid", "monthLabel", "cell", "status", "startField", "endField"];
   static values = {
     min: { type: String, default: "" },
     max: { type: String, default: "" },
-    // A JSON list read through `parseStringList` rather than Stimulus's `Array`
-    // type: that reader throws out of the value observer before any callback
-    // runs, so one malformed attribute would stop the picker from connecting.
     disabledDates: { type: String, default: "" },
     locale: { type: String, default: "" }
   };
   static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
   static events = ["change", "monthchange", "reconcile"];
-  /** The month currently rendered, as `YYYY-MM`. */
   #viewMonth = "";
-  /** The confirmed range endpoints (ISO), or "" when unset. */
   #startDate = "";
   #endDate = "";
-  /** The first endpoint of an in-progress selection (ISO), or "" when idle. */
   #pendingStart = "";
-  /** The hovered/focused date previewed while selecting (ISO), or "". */
   #previewDate = "";
-  /** The roving-focus date in the grid (local time). */
   #focusedDate = /* @__PURE__ */ new Date();
-  /** Deferred focus after an async month transition (cancelled on teardown). */
   #focusTimer = new SafeTimeout();
-  /**
-   * How many times the confirmed range has moved — a commit or a narrowing — so
-   * a report still pending for a range a listener has since replaced can tell.
-   */
   #rangeMoves = 0;
-  /** How many month transitions have started, so one a listener starts mid-paint keeps its focus. */
   #transitions = 0;
-  /** The declared unavailable dates, indexed for the per-cell paint lookup. */
   #disabledDates = /* @__PURE__ */ new Set();
-  /** Rewinds an unfinished selection before Turbo snapshots the page. */
-  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  /** Last painted month, or `null` until the initial paint has settled. */
   #announcedMonth = null;
-  /**
-   * Collapses a morph that swaps render inputs into one repaint, and refuses the
-   * pass Stimulus delivers before `connect()`.
-   */
-  #repaint = new MicrotaskCoalescer(() => {
+  #multiselectable = new AttributeLease(
+    "aria-multiselectable",
+    this.identifier
+  );
+  #repaint = new MorphRenderWatcher(() => {
     this.#render();
   });
-  /**
-   * Seeds the range from optional hidden fields — ordered, and narrowed to the
-   * days that can be chosen — then paints the grid, which writes the range back
-   * to the fields silently.
-   */
   connect() {
-    this.#repaint.activate();
-    this.#beforeCache.activate();
+    this.#repaint.observe(this.element);
     const authoredStart = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
     const authoredEnd = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
     [this.#startDate, this.#endDate] = this.#selectableRange(
@@ -301,58 +462,78 @@ var DateRangePickerController = class extends Controller {
     const anchor = parseISODateString(this.#startDate) ?? this.#clampToBounds(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date();
     this.#focusedDate = anchor;
     this.#viewMonth = toISOMonthString(anchor);
-    if (this.hasGridTarget) this.gridTarget.setAttribute("aria-multiselectable", "true");
     this.#render();
   }
-  /** Cancels any pending deferred focus so it never fires on a detached element. */
   disconnect() {
-    this.#repaint.cancel();
-    this.#beforeCache.deactivate();
+    this.#repaint.disconnect();
     this.#focusTimer.clearAll();
   }
-  /** Repaints the label when application code changes `locale` at runtime. */
   localeValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
   minValueChanged() {
     this.#repaint.schedule();
   }
-  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
   maxValueChanged() {
     this.#repaint.schedule();
   }
-  /** Re-indexes the unavailable dates and repaints when the declared set changes. */
   disabledDatesValueChanged() {
     this.#disabledDates = new Set(parseStringList(this.disabledDatesValue));
     this.#repaint.schedule();
   }
-  /** Navigates to the previous month. */
+  gridTargetConnected() {
+    this.#repaint.schedule();
+  }
+  gridTargetDisconnected(grid) {
+    if (!this.gridTargets.includes(grid)) this.#multiselectable.return(grid);
+    this.#repaint.schedule();
+  }
+  monthLabelTargetConnected() {
+    this.#repaint.schedule();
+  }
+  monthLabelTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  startFieldTargetConnected() {
+    this.#repaint.schedule();
+  }
+  startFieldTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  endFieldTargetConnected() {
+    this.#repaint.schedule();
+  }
+  endFieldTargetDisconnected() {
+    this.#repaint.schedule();
+  }
   prev(event) {
     event?.preventDefault();
     this.#shiftMonth(-1);
   }
-  /** Navigates to the next month. */
   next(event) {
     event?.preventDefault();
     this.#shiftMonth(1);
   }
-  /** Confirms a range endpoint from a clicked cell. */
-  selectDate(event) {
-    const cell = this.#cellFrom(event.target);
+  selectDate(source) {
+    const { origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    const cell = this.#cellFrom(origin);
     if (!cell) return;
     const date = cell.getAttribute("data-date");
     if (!date || !this.#isSelectable(date)) return;
-    this.#choose(date);
+    this.#choose(date, reason);
   }
-  /** Previews the range up to a hovered/focused cell while selecting. */
-  previewTo(event) {
-    const cell = this.#cellFrom(event.target);
+  previewTo(source) {
+    const { event, origin } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    const cell = this.#cellFrom(origin);
     if (!cell) return;
     const date = cell.getAttribute("data-date");
     if (!date) return;
     let shouldRender = false;
-    if (event.type.startsWith("focus")) {
+    if (event?.type.startsWith("focus")) {
       const parsed = parseISODateString(date);
       if (parsed) this.#focusedDate = parsed;
       shouldRender = cell.getAttribute("tabindex") !== "0";
@@ -363,9 +544,11 @@ var DateRangePickerController = class extends Controller {
     }
     if (shouldRender) this.#render();
   }
-  /** Applies a named preset (`today` / `last7` / `last30` / `thisMonth`). */
-  applyPreset(event) {
-    const button = event.target?.closest("[data-range]");
+  applyPreset(source) {
+    const { event, origin, reason } = actionSource(source);
+    const button = origin?.closest("[data-range]");
+    if (!button || !this.element.contains(button)) return;
+    const focus = event !== null || this.element.contains(document.activeElement);
     const range = computePreset(button?.getAttribute("data-range") ?? "");
     if (!range) return;
     const intersection = this.#intersectRange(range);
@@ -375,13 +558,20 @@ var DateRangePickerController = class extends Controller {
     const move = this.#setConfirmed(start, end);
     const endDate = parseISODateString(end);
     if (endDate) this.#focusedDate = endDate;
-    this.#transitionTo(toISOMonthString(parseISODateString(end) ?? /* @__PURE__ */ new Date()), end, true);
-    this.#reportConfirmed(move);
+    this.#transitionTo(
+      toISOMonthString(parseISODateString(end) ?? /* @__PURE__ */ new Date()),
+      end,
+      true,
+      () => focus && (event !== null || this.element.contains(document.activeElement))
+    );
+    this.#reportConfirmed(move, reason);
   }
-  /** Grid keyboard navigation, selection (Enter/Space), and Escape-to-cancel. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
+    if ((event.key === "PageUp" || event.key === "PageDown") && (event.ctrlKey || event.altKey || event.metaKey))
+      return;
     const cell = this.#cellFrom(event.target);
     if (!cell) return;
     const dateStr = cell.getAttribute("data-date") ?? "";
@@ -402,7 +592,8 @@ var DateRangePickerController = class extends Controller {
       return;
     }
     let next = null;
-    switch (logicalArrowKey(event.key, this.element)) {
+    const directionElement = this.hasGridTarget ? gridDirectionElement(this.gridTarget, this.element) : this.element;
+    switch (logicalArrowKey(event.key, directionElement)) {
       case "ArrowLeft":
         next = addDays(date, -1);
         break;
@@ -433,8 +624,7 @@ var DateRangePickerController = class extends Controller {
     event.preventDefault();
     this.#moveFocusTo(next);
   }
-  /** Records a chosen date as either the pending start or the confirmed end. */
-  #choose(date) {
+  #choose(date, reason = "user") {
     if (!this.#pendingStart || !this.#isSelectable(this.#pendingStart)) {
       this.#pendingStart = date;
       this.#previewDate = date;
@@ -446,54 +636,38 @@ var DateRangePickerController = class extends Controller {
     const [start, end] = date < this.#pendingStart ? [date, this.#pendingStart] : [this.#pendingStart, date];
     const move = this.#setConfirmed(start, end);
     this.#render(true);
-    this.#reportConfirmed(move);
-  }
-  /**
-   * Makes `start`–`end` the confirmed range, ending any selection in progress,
-   * ahead of the paint that shows it.
-   *
-   * @returns The move count the range is now at, which its `change` checks.
-   */
+    this.#reportConfirmed(move, reason);
+  }
   #setConfirmed(start, end) {
+    const changed = start !== this.#startDate || end !== this.#endDate;
     this.#startDate = start;
     this.#endDate = end;
     this.#pendingStart = "";
     this.#previewDate = "";
+    if (!changed) return null;
     this.#rangeMoves += 1;
     return this.#rangeMoves;
   }
-  /**
-   * Dispatches `change` for the range confirmed at `move`, once its paint has
-   * reported it through the fields. A listener of those reports that moved the
-   * range on has had the range it moved to reported instead.
-   */
-  #reportConfirmed(move) {
-    if (move !== this.#rangeMoves) return;
-    this.dispatch("change", { detail: { start: this.#startDate, end: this.#endDate } });
+  #reportConfirmed(move, reason) {
+    if (move === null || move !== this.#rangeMoves) return;
+    this.dispatch("change", { detail: { start: this.#startDate, end: this.#endDate, reason } });
   }
-  /** Moves roving focus to `date`, transitioning the month when needed. */
   #moveFocusTo(date) {
     this.#focusedDate = date;
     const iso = toISODateString(date);
     if (this.#pendingStart && this.#isSelectable(iso)) this.#previewDate = iso;
     this.#transitionTo(toISOMonthString(date), iso);
   }
-  /**
-   * Renders `month`, then focuses the cell for `dateStr` (deferred if async).
-   * A listener of the paint's reports that started another move has placed
-   * focus itself, so this one leaves it there.
-   *
-   * @param confirmed - Whether the paint shows a range the user has just confirmed.
-   */
-  #transitionTo(month, dateStr, confirmed = false) {
+  #transitionTo(month, dateStr, confirmed = false, canFocus = () => true) {
     const isTransition = month !== this.#viewMonth;
     this.#focusTimer.clearAll();
     this.#viewMonth = month;
     this.#transitions += 1;
     const transition = this.#transitions;
     this.#render(confirmed);
-    if (transition !== this.#transitions) return;
+    if (transition !== this.#transitions || !canFocus()) return;
     const focusCell = () => {
+      if (!canFocus()) return;
       this.cellTargets.find((c) => c.getAttribute("data-date") === dateStr)?.focus();
     };
     if (isTransition) {
@@ -502,28 +676,16 @@ var DateRangePickerController = class extends Controller {
       focusCell();
     }
   }
-  /** Shifts the displayed month by `delta`, keeping focus within it. */
   #shiftMonth(delta) {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
-    const target = new Date(info.year, info.month - 1 + delta, 1);
+    const target = dateInMonthClamped(this.#focusedDate, info.year, info.month + delta);
     this.#viewMonth = toISOMonthString(target);
-    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
-    target.setDate(Math.min(this.#focusedDate.getDate(), lastDay));
     this.#focusedDate = target;
     this.#render();
   }
-  /**
-   * Builds the six-week grid and binds range/roving/disabled state per cell,
-   * mirrors the confirmed range to the hidden fields, then reports what the
-   * paint moved.
-   *
-   * @param confirmed - Whether the paint shows a range the user has just
-   *   confirmed, which the status then announces and each moved field reports.
-   *
-   * @stimeoRenderRoot
-   */
   #render(confirmed = false) {
+    if (this.hasGridTarget) this.#multiselectable.write(this.gridTarget, "true");
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
     const { year, month } = info;
@@ -538,7 +700,7 @@ var DateRangePickerController = class extends Controller {
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
     }
     const [rangeStart, rangeEnd] = this.#visualRange();
-    const days = gridDays(year, month);
+    const days = monthGridDays(year, month, 0);
     const focusedStr = toISODateString(this.#focusedDate);
     const todayStr = toISODateString(/* @__PURE__ */ new Date());
     const cells = this.cellTargets;
@@ -576,8 +738,8 @@ var DateRangePickerController = class extends Controller {
     const moved = this.#mirrorFields();
     if (confirmed) {
       this.#announce();
-      for (const [field, value] of moved) {
-        if (field.value === value) commitField(field);
+      for (const [field, value, write] of moved) {
+        if (field.value === value && this.#fieldWrites.get(field) === write) commitField(field);
       }
     }
     const previous = this.#announcedMonth;
@@ -589,12 +751,6 @@ var DateRangePickerController = class extends Controller {
       this.dispatch("reconcile", { detail: { start: this.#startDate, end: this.#endDate } });
     }
   }
-  /**
-   * Narrows the confirmed range to days that can still be chosen. The paint
-   * mirrors it to the fields without reporting a commit.
-   *
-   * @returns Whether the range moved.
-   */
   #narrowConfirmedRange() {
     const [start, end] = this.#selectableRange(this.#startDate, this.#endDate);
     if (start === this.#startDate && end === this.#endDate) return false;
@@ -603,11 +759,6 @@ var DateRangePickerController = class extends Controller {
     this.#rangeMoves += 1;
     return true;
   }
-  /**
-   * The range `start`–`end` with each end moved inward to the nearest day that
-   * can be chosen, or two empty strings when none of its days can be. A lone
-   * endpoint is the one-day range it names, and stays lone.
-   */
   #selectableRange(start, end) {
     let from = parseISODateString(start || end);
     let to = parseISODateString(end || start);
@@ -621,7 +772,6 @@ var DateRangePickerController = class extends Controller {
     if (from.getTime() > to.getTime()) return ["", ""];
     return [start ? toISODateString(from) : "", end ? toISODateString(to) : ""];
   }
-  /** The ordered [start, end] pair to paint: the preview while selecting, else confirmed. */
   #visualRange() {
     if (this.#pendingStart) {
       const other = this.#previewDate || this.#pendingStart;
@@ -629,81 +779,59 @@ var DateRangePickerController = class extends Controller {
     }
     return [this.#startDate, this.#endDate];
   }
-  /**
-   * Writes the confirmed range to the hidden fields.
-   *
-   * @returns Each field whose value moved, with the value written to it.
-   */
+  #writeField(field, value) {
+    if (!writeField(field, value)) return false;
+    this.#fieldWrites.set(field, (this.#fieldWrites.get(field) ?? 0) + 1);
+    return true;
+  }
   #mirrorFields() {
     const moved = [];
-    if (this.hasStartFieldTarget && writeField(this.startFieldTarget, this.#startDate)) {
-      moved.push([this.startFieldTarget, this.#startDate]);
+    if (this.hasStartFieldTarget && this.#writeField(this.startFieldTarget, this.#startDate)) {
+      moved.push([
+        this.startFieldTarget,
+        this.#startDate,
+        this.#fieldWrites.get(this.startFieldTarget) ?? 0
+      ]);
     }
-    if (this.hasEndFieldTarget && writeField(this.endFieldTarget, this.#endDate)) {
-      moved.push([this.endFieldTarget, this.#endDate]);
+    if (this.hasEndFieldTarget && this.#writeField(this.endFieldTarget, this.#endDate)) {
+      moved.push([
+        this.endFieldTarget,
+        this.#endDate,
+        this.#fieldWrites.get(this.endFieldTarget) ?? 0
+      ]);
     }
     return moved;
   }
-  /** Announces the confirmed range in the live status region. */
   #announce() {
     if (this.hasStatusTarget && this.#startDate && this.#endDate) {
       this.statusTarget.textContent = `${this.#startDate} \u2013 ${this.#endDate}`;
     }
   }
-  /**
-   * True when `iso` may be chosen as a range endpoint.
-   *
-   * The single availability question in the controller: the grid paint, the
-   * preview, and both commit paths ask it, so a cell's `aria-disabled` and what
-   * a click on that cell does are the same decision rather than two that have to
-   * be kept in step.
-   */
   #isSelectable(iso) {
     return !this.#outOfBounds(iso) && !this.#disabledDates.has(iso);
   }
-  /** True when `iso` falls outside the `[min, max]` bounds. */
   #outOfBounds(iso) {
     if (this.minValue && iso < this.minValue) return true;
     if (this.maxValue && iso > this.maxValue) return true;
     return false;
   }
-  /** Clamps a generated ISO date string into `[min, max]`. */
   #clampISO(iso) {
     if (this.minValue && iso < this.minValue) return this.minValue;
     if (this.maxValue && iso > this.maxValue) return this.maxValue;
     return iso;
   }
-  /** Clamps a Date into `[min, max]`, returning null only when unparseable. */
   #clampToBounds(date) {
     const clamped = this.#clampISO(toISODateString(date));
     return parseISODateString(clamped);
   }
-  /**
-   * Intersects a preset with `[min, max]`, rejecting a disjoint interval.
-   *
-   * Only the bounds narrow a preset here: `disabledDates` excludes single days,
-   * not sub-intervals, so it cannot shrink one to a still-contiguous range. A
-   * day it excludes is still refused as an endpoint — the caller checks that —
-   * but a preset that merely spans one keeps its span.
-   */
   #intersectRange(range) {
     const start = this.minValue && range.start < this.minValue ? this.minValue : range.start;
     const end = this.maxValue && range.end > this.maxValue ? this.maxValue : range.end;
     return start <= end ? { start, end } : null;
   }
-  /** Removes provisional range state before Turbo freezes a cached snapshot. */
-  #rewindForCache() {
-    this.#focusTimer.clearAll();
-    if (!this.#pendingStart && !this.#previewDate) return;
-    this.#pendingStart = "";
-    this.#previewDate = "";
-    this.#render();
-  }
-  /** Resolves the cell element from an event target, or null. */
   #cellFrom(target) {
-    return target?.closest(
-      targetSelector(this.identifier, "cell")
-    ) ?? null;
+    const cell = target instanceof Element ? target.closest(targetSelector(this.identifier, "cell")) : null;
+    return cell && this.cellTargets.includes(cell) ? cell : null;
   }
 };
 function addDays(date, n) {
@@ -711,30 +839,6 @@ function addDays(date, n) {
   next.setDate(next.getDate() + n);
   return next;
 }
-function shiftMonthClamped(date, delta) {
-  const target = new Date(date.getFullYear(), date.getMonth() + delta, 1);
-  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
-  target.setDate(Math.min(date.getDate(), lastDay));
-  return target;
-}
-function shiftYearClamped(date, delta) {
-  const target = new Date(date.getFullYear() + delta, date.getMonth(), 1);
-  const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
-  target.setDate(Math.min(date.getDate(), lastDay));
-  return target;
-}
-function gridDays(year, month) {
-  const first = new Date(year, month - 1, 1);
-  const start = new Date(first);
-  start.setDate(first.getDate() - first.getDay());
-  const days = [];
-  const current = new Date(start);
-  for (let i = 0; i < GRID_SIZE; i++) {
-    days.push(new Date(current));
-    current.setDate(current.getDate() + 1);
-  }
-  return days;
-}
 function normalizeISO(value) {
   const date = parseISODateString(value.trim());
   return date ? toISODateString(date) : "";
@@ -763,5 +867,4 @@ function computePreset(name) {
 }
 
 export { DateRangePickerController };
-//# sourceMappingURL=date_range_picker_controller.js.map
 //# sourceMappingURL=date_range_picker_controller.js.map