stimeo-ui 0.15.0 → 0.17.0

package/dist/controllers/date_range_picker_controller.js

@@ -1,13 +1,31 @@
 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;
@@ -18,36 +36,153 @@ 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/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 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;
+}
+
+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);
+}
+var AttributeLease = class _AttributeLease {
+  static #registry = sharedRegistry(
+    "stimeo-ui.attribute-lease.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+  );
+  #attribute;
+  #record;
+  #base;
+  #held = /* @__PURE__ */ new Set();
+  constructor(attribute, owner, options = {}) {
+    this.#attribute = attribute;
+    this.#record = `data-${owner}-${attribute}-lease`;
+    this.#base = options.base === true;
+    const names = _AttributeLease.#registry.names;
+    names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
+  }
+  write(element, value) {
+    const stack = this.#stack(element);
+    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 = _AttributeLease.#registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
+    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);
+  }
+  #stack(element) {
+    const stacks = _AttributeLease.#registry.stacks;
+    const byAttribute = stacks.get(element) ?? /* @__PURE__ */ new Map();
+    stacks.set(element, byAttribute);
+    const stack = byAttribute.get(this.#attribute) ?? this.#seed(element);
+    byAttribute.set(this.#attribute, stack);
+    return stack;
+  }
+  #seed(element) {
+    const found = [];
+    for (const record of _AttributeLease.#registry.names.get(this.#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;
+    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+      lease: null,
+      record,
+      written,
+      original,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.lease === this) ?? stack.find((held) => held.lease === null && held.record === 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 ? 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) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(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) {
+    if (element.getAttribute(this.#attribute) === value) return;
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(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 +211,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");
@@ -114,32 +248,46 @@ function monthLabelFormatter(locale) {
   return intlFormatter(Intl.DateTimeFormat, locale, MONTH_LABEL_OPTIONS, "en");
 }
 
-// src/utils/locale.ts
+function writeField(field, value) {
+  if (field.value === value) return false;
+  field.value = value;
+  return true;
+}
+function commitField(target) {
+  target.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
 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. */
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -152,43 +300,49 @@ 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();
+  }
+  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);
@@ -205,7 +359,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];
@@ -219,113 +372,125 @@ function parseStringList(raw, fallback = []) {
   return parsed.filter((entry) => typeof entry === "string");
 }
 
-// src/controllers/date_range_picker_controller.ts
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 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"];
-  /** The month currently rendered, as `YYYY-MM`. */
+  static events = ["change", "monthchange", "reconcile"];
   #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();
-  /** The declared unavailable dates, indexed for the per-cell paint lookup. */
+  #rangeMoves = 0;
+  #transitions = 0;
   #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 and normalizes the range from optional hidden fields, then paints the grid. */
   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] = orderRange(authoredStart, authoredEnd);
+    [this.#startDate, this.#endDate] = this.#selectableRange(
+      ...orderRange(authoredStart, authoredEnd)
+    );
     this.#pendingStart = "";
     this.#previewDate = "";
     this.#announcedMonth = null;
-    this.#commitFields();
     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";
@@ -336,27 +501,28 @@ 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);
     if (!intersection) return;
     const { start, end } = intersection;
     if (!this.#isSelectable(start) || !this.#isSelectable(end)) return;
-    this.#startDate = start;
-    this.#endDate = end;
-    this.#pendingStart = "";
-    this.#previewDate = "";
+    const move = this.#setConfirmed(start, end);
     const endDate = parseISODateString(end);
     if (endDate) this.#focusedDate = endDate;
-    this.#commitFields();
-    this.#transitionTo(toISOMonthString(parseISODateString(end) ?? /* @__PURE__ */ new Date()), end);
-    this.#announce();
-    this.dispatch("change", { detail: { start, end } });
+    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;
@@ -411,9 +577,8 @@ 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) {
-    if (!this.#pendingStart) {
+  #choose(date, reason = "user") {
+    if (!this.#pendingStart || !this.#isSelectable(this.#pendingStart)) {
       this.#pendingStart = date;
       this.#previewDate = date;
       const parsed = parseISODateString(date);
@@ -422,29 +587,40 @@ var DateRangePickerController = class extends Controller {
       return;
     }
     const [start, end] = date < this.#pendingStart ? [date, this.#pendingStart] : [this.#pendingStart, date];
+    const move = this.#setConfirmed(start, end);
+    this.#render(true);
+    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 = "";
-    this.#commitFields();
-    this.#render();
-    this.#announce();
-    this.dispatch("change", { detail: { start, end } });
+    if (!changed) return null;
+    this.#rangeMoves += 1;
+    return this.#rangeMoves;
+  }
+  #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). */
-  #transitionTo(month, dateStr) {
+  #transitionTo(month, dateStr, confirmed = false, canFocus = () => true) {
     const isTransition = month !== this.#viewMonth;
     this.#focusTimer.clearAll();
     this.#viewMonth = month;
-    this.#render();
+    this.#transitions += 1;
+    const transition = this.#transitions;
+    this.#render(confirmed);
+    if (transition !== this.#transitions || !canFocus()) return;
     const focusCell = () => {
+      if (!canFocus()) return;
       this.cellTargets.find((c) => c.getAttribute("data-date") === dateStr)?.focus();
     };
     if (isTransition) {
@@ -453,7 +629,6 @@ 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;
@@ -464,16 +639,17 @@ var DateRangePickerController = class extends Controller {
     this.#focusedDate = target;
     this.#render();
   }
-  /**
-   * Builds the six-week grid and binds range/roving/disabled state per cell.
-   *
-   * @stimeoRenderRoot
-   */
-  #render() {
+  #render(confirmed = false) {
+    if (this.hasGridTarget) this.#multiselectable.write(this.gridTarget, "true");
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
     const { year, month } = info;
+    if (this.#pendingStart && !this.#isSelectable(this.#pendingStart)) {
+      this.#pendingStart = "";
+      this.#previewDate = "";
+    }
     if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
+    const narrowed = this.#narrowConfirmedRange();
     if (this.hasMonthLabelTarget) {
       const formatter = monthLabelFormatter(resolveLocale(this.element, this.localeValue));
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
@@ -513,13 +689,44 @@ var DateRangePickerController = class extends Controller {
       const fallback = cells.find((cell) => cell.getAttribute("data-outside") === "false") ?? cells[0];
       fallback?.setAttribute("tabindex", "0");
     }
+    const move = this.#rangeMoves;
+    const moved = this.#mirrorFields();
+    if (confirmed) {
+      this.#announce();
+      for (const [field, value, write] of moved) {
+        if (field.value === value && this.#fieldWrites.get(field) === write) commitField(field);
+      }
+    }
     const previous = this.#announcedMonth;
     this.#announcedMonth = this.#viewMonth;
     if (previous !== null && previous !== this.#viewMonth) {
       this.dispatch("monthchange", { detail: { month: this.#viewMonth } });
     }
+    if (narrowed && move === this.#rangeMoves) {
+      this.dispatch("reconcile", { detail: { start: this.#startDate, end: this.#endDate } });
+    }
+  }
+  #narrowConfirmedRange() {
+    const [start, end] = this.#selectableRange(this.#startDate, this.#endDate);
+    if (start === this.#startDate && end === this.#endDate) return false;
+    this.#startDate = start;
+    this.#endDate = end;
+    this.#rangeMoves += 1;
+    return true;
+  }
+  #selectableRange(start, end) {
+    let from = parseISODateString(start || end);
+    let to = parseISODateString(end || start);
+    if (!from || !to) return [start, end];
+    while (from.getTime() <= to.getTime() && !this.#isSelectable(toISODateString(from))) {
+      from = addDays(from, 1);
+    }
+    while (to.getTime() >= from.getTime() && !this.#isSelectable(toISODateString(to))) {
+      to = addDays(to, -1);
+    }
+    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;
@@ -527,71 +734,59 @@ var DateRangePickerController = class extends Controller {
     }
     return [this.#startDate, this.#endDate];
   }
-  /** Writes the confirmed range to the hidden fields. */
-  #commitFields() {
-    if (this.hasStartFieldTarget) this.startFieldTarget.value = this.#startDate;
-    if (this.hasEndFieldTarget) this.endFieldTarget.value = this.#endDate;
+  #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 && this.#writeField(this.startFieldTarget, this.#startDate)) {
+      moved.push([
+        this.startFieldTarget,
+        this.#startDate,
+        this.#fieldWrites.get(this.startFieldTarget) ?? 0
+      ]);
+    }
+    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(
-      "[data-stimeo--date-range-picker-target='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) {
@@ -651,5 +846,4 @@ function computePreset(name) {
 }
 
 export { DateRangePickerController };
-//# sourceMappingURL=date_range_picker_controller.js.map
 //# sourceMappingURL=date_range_picker_controller.js.map