stimeo-ui 0.4.0 → 0.6.0

data/dist/controllers/date_range_picker_controller.js

@@ -18,6 +18,35 @@ 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;
+  }
+  /** 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/dates.ts
 function toISODateString(date) {
   const year = date.getFullYear();
@@ -138,16 +167,34 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/string_list.ts
+function parseStringList(raw, fallback = []) {
+  const text = raw.trim();
+  if (text.length === 0) return [...fallback];
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return [...fallback];
+  }
+  if (!Array.isArray(parsed)) return [...fallback];
+  return parsed.filter((entry) => typeof entry === "string");
+}
+
 // src/controllers/date_range_picker_controller.ts
 var GRID_SIZE = 42;
 var DateRangePickerController = class extends Controller {
   static targets = ["grid", "monthLabel", "cell", "status", "startField", "endField"];
   static values = {
     min: { type: String, default: "" },
-    max: { 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: "" }
   };
   static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
-  static events = ["change"];
+  static events = ["change", "monthchange"];
   /** The month currently rendered, as `YYYY-MM`. */
   #viewMonth = "";
   /** The confirmed range endpoints (ISO), or "" when unset. */
@@ -161,7 +208,12 @@ var DateRangePickerController = class extends Controller {
   #focusedDate = /* @__PURE__ */ new Date();
   /** Deferred focus after an async month transition (cancelled on teardown). */
   #focusTimer = new SafeTimeout();
-  /** Seeds the range from any pre-filled hidden fields and renders the grid. */
+  /** 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()`.
@@ -169,10 +221,17 @@ var DateRangePickerController = class extends Controller {
   #repaint = new MicrotaskCoalescer(() => {
     this.#render();
   });
+  /** Seeds and normalizes the range from optional hidden fields, then paints the grid. */
   connect() {
     this.#repaint.activate();
-    this.#startDate = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
-    this.#endDate = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
+    this.#beforeCache.activate();
+    const authoredStart = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
+    const authoredEnd = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
+    [this.#startDate, this.#endDate] = 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);
@@ -182,6 +241,7 @@ var DateRangePickerController = class extends Controller {
   /** Cancels any pending deferred focus so it never fires on a detached element. */
   disconnect() {
     this.#repaint.cancel();
+    this.#beforeCache.deactivate();
     this.#focusTimer.clearAll();
   }
   /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
@@ -192,6 +252,11 @@ var DateRangePickerController = class extends Controller {
   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. */
   prev(event) {
     event?.preventDefault();
@@ -207,7 +272,7 @@ var DateRangePickerController = class extends Controller {
     const cell = this.#cellFrom(event.target);
     if (!cell) return;
     const date = cell.getAttribute("data-date");
-    if (!date || cell.getAttribute("aria-disabled") === "true") return;
+    if (!date || !this.#isSelectable(date)) return;
     this.#choose(date);
   }
   /** Previews the range up to a hovered/focused cell while selecting. */
@@ -216,28 +281,27 @@ var DateRangePickerController = class extends Controller {
     if (!cell) return;
     const date = cell.getAttribute("data-date");
     if (!date) return;
+    let shouldRender = false;
     if (event.type.startsWith("focus")) {
       const parsed = parseISODateString(date);
       if (parsed) this.#focusedDate = parsed;
-      if (!this.#pendingStart && cell.getAttribute("tabindex") !== "0") {
-        this.#render();
-      }
+      shouldRender = cell.getAttribute("tabindex") !== "0";
     }
-    if (this.#pendingStart) {
+    if (this.#pendingStart && this.#isSelectable(date) && this.#previewDate !== date) {
       this.#previewDate = date;
-      this.#render();
+      shouldRender = true;
     }
+    if (shouldRender) this.#render();
   }
   /** Applies a named preset (`today` / `last7` / `last30` / `thisMonth`). */
   applyPreset(event) {
     const button = event.target?.closest("[data-range]");
-    const name = button?.getAttribute("data-range");
-    if (!name) return;
-    const range = computePreset(name);
+    const range = computePreset(button?.getAttribute("data-range") ?? "");
     if (!range) return;
-    const start = this.#clampISO(range.start);
-    const end = this.#clampISO(range.end);
-    if (!start || !end) 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 = "";
@@ -255,12 +319,12 @@ var DateRangePickerController = class extends Controller {
     if (isReservedArrowChord(event)) return;
     const cell = this.#cellFrom(event.target);
     if (!cell) return;
-    const dateStr = cell.getAttribute("data-date");
-    const date = dateStr ? parseISODateString(dateStr) : null;
+    const dateStr = cell.getAttribute("data-date") ?? "";
+    const date = parseISODateString(dateStr);
     if (!date) return;
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
-      if (dateStr && cell.getAttribute("aria-disabled") !== "true") this.#choose(dateStr);
+      if (this.#isSelectable(dateStr)) this.#choose(dateStr);
       return;
     }
     if (event.key === "Escape") {
@@ -293,10 +357,10 @@ var DateRangePickerController = class extends Controller {
         next = addDays(date, 6 - date.getDay());
         break;
       case "PageUp":
-        next = shiftMonthClamped(date, -1);
+        next = event.shiftKey ? shiftYearClamped(date, -1) : shiftMonthClamped(date, -1);
         break;
       case "PageDown":
-        next = shiftMonthClamped(date, 1);
+        next = event.shiftKey ? shiftYearClamped(date, 1) : shiftMonthClamped(date, 1);
         break;
       default:
         return;
@@ -327,12 +391,14 @@ var DateRangePickerController = class extends Controller {
   /** Moves roving focus to `date`, transitioning the month when needed. */
   #moveFocusTo(date) {
     this.#focusedDate = date;
-    if (this.#pendingStart) this.#previewDate = toISODateString(date);
-    this.#transitionTo(toISOMonthString(date), toISODateString(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) {
     const isTransition = month !== this.#viewMonth;
+    this.#focusTimer.clearAll();
     this.#viewMonth = month;
     this.#render();
     const focusCell = () => {
@@ -355,22 +421,28 @@ var DateRangePickerController = class extends Controller {
     this.#focusedDate = target;
     this.#render();
   }
-  /** Builds the six-week grid and binds range/roving/disabled state per cell. */
+  /**
+   * Builds the six-week grid and binds range/roving/disabled state per cell.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
     const { year, month } = info;
+    if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
     if (this.hasMonthLabelTarget) {
       const lang = document.documentElement.lang || "en";
-      const formatter = new Intl.DateTimeFormat(lang, { month: "long", year: "numeric" });
+      const formatter = monthFormatter(lang);
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
     }
     const [rangeStart, rangeEnd] = this.#visualRange();
     const days = gridDays(year, month);
     const focusedStr = toISODateString(this.#focusedDate);
     const todayStr = toISODateString(/* @__PURE__ */ new Date());
+    const cells = this.cellTargets;
     for (let i = 0; i < GRID_SIZE; i++) {
-      const el = this.cellTargets[i];
+      const el = cells[i];
       const date = days[i];
       if (!el || !date) continue;
       const iso = toISODateString(date);
@@ -379,8 +451,8 @@ var DateRangePickerController = class extends Controller {
       el.setAttribute("data-outside", String(date.getMonth() !== month - 1));
       el.setAttribute("data-today", String(iso === todayStr));
       el.setAttribute("tabindex", iso === focusedStr ? "0" : "-1");
-      if (this.#outOfBounds(iso)) el.setAttribute("aria-disabled", "true");
-      else el.removeAttribute("aria-disabled");
+      if (this.#isSelectable(iso)) el.removeAttribute("aria-disabled");
+      else el.setAttribute("aria-disabled", "true");
       const isStart = !!rangeStart && iso === rangeStart;
       const isEnd = !!rangeEnd && iso === rangeEnd && rangeEnd !== rangeStart;
       const inside = !!rangeStart && !!rangeEnd && iso > rangeStart && iso < rangeEnd;
@@ -394,6 +466,16 @@ var DateRangePickerController = class extends Controller {
         )
       );
     }
+    for (const extra of cells.slice(GRID_SIZE)) extra.setAttribute("tabindex", "-1");
+    if (!cells.some((cell) => cell.getAttribute("tabindex") === "0")) {
+      const fallback = cells.find((cell) => cell.getAttribute("data-outside") === "false") ?? cells[0];
+      fallback?.setAttribute("tabindex", "0");
+    }
+    const previous = this.#announcedMonth;
+    this.#announcedMonth = this.#viewMonth;
+    if (previous !== null && previous !== this.#viewMonth) {
+      this.dispatch("monthchange", { detail: { month: this.#viewMonth } });
+    }
   }
   /** The ordered [start, end] pair to paint: the preview while selecting, else confirmed. */
   #visualRange() {
@@ -414,15 +496,25 @@ var DateRangePickerController = class extends Controller {
       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 an ISO date string into `[min, max]`, or "" when unparseable. */
+  /** Clamps a generated ISO date string into `[min, max]`. */
   #clampISO(iso) {
-    if (!iso) return "";
     if (this.minValue && iso < this.minValue) return this.minValue;
     if (this.maxValue && iso > this.maxValue) return this.maxValue;
     return iso;
@@ -432,6 +524,27 @@ var DateRangePickerController = class extends Controller {
     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(
@@ -450,6 +563,12 @@ function shiftMonthClamped(date, delta) {
   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);
@@ -466,6 +585,18 @@ function normalizeISO(value) {
   const date = parseISODateString(value.trim());
   return date ? toISODateString(date) : "";
 }
+function orderRange(start, end) {
+  return start && end && end < start ? [end, start] : [start, end];
+}
+function monthFormatter(locale) {
+  const options = { month: "long", year: "numeric" };
+  try {
+    return new Intl.DateTimeFormat(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    return new Intl.DateTimeFormat("en", options);
+  }
+}
 function computePreset(name) {
   const today = /* @__PURE__ */ new Date();
   const todayStr = toISODateString(today);

data/dist/controllers/direct_upload_controller.js

@@ -110,7 +110,7 @@ var DirectUploadController = class extends Controller {
     const clamped = Math.max(0, Math.min(100, percent));
     row.setAttribute("aria-valuenow", String(clamped));
     row.setAttribute("aria-valuetext", `${clamped}%`);
-    row.style.setProperty("--stimeo-upload-progress", `${clamped}%`);
+    row.style.setProperty("--stimeo--upload-progress", `${clamped}%`);
     this.#setField(row, "percent", `${clamped}%`);
     this.#syncAggregate();
     this.dispatch("progress", { detail: { id, percent: clamped } });
@@ -148,7 +148,7 @@ var DirectUploadController = class extends Controller {
     }
     clone.setAttribute("aria-valuenow", "0");
     clone.setAttribute("data-upload-state", "uploading");
-    clone.style.setProperty("--stimeo-upload-progress", "0%");
+    clone.style.setProperty("--stimeo--upload-progress", "0%");
     this.listTarget.appendChild(clone);
     this.#rows.set(key, clone);
     return clone;
@@ -172,7 +172,7 @@ var DirectUploadController = class extends Controller {
     }
     const overall = Math.round(total / this.#rows.size);
     this.element.setAttribute("data-upload-progress", String(overall));
-    this.element.style.setProperty("--stimeo-upload-progress", `${overall}%`);
+    this.element.style.setProperty("--stimeo--upload-progress", `${overall}%`);
   }
   /** Writes a consumer label (with `%{name}` substituted) to the status region. */
   #announce(label, row) {

data/dist/controllers/empty_state_controller.js

@@ -29,23 +29,120 @@ var EmptyStateController = class extends Controller {
   };
   static events = ["change"];
   #observer = null;
+  /** Whether the controller is between `connect()` and `disconnect()`. */
+  #connected = false;
   /** Last applied empty state; `null` until the first sync so connect emits nothing. */
   #empty = null;
   connect() {
-    if (!this.hasListTarget) return;
-    if (typeof MutationObserver !== "undefined") {
-      this.#observer = new MutationObserver(() => this.#apply());
-      this.#observer.observe(this.listTarget, { childList: true });
-    }
-    this.#apply();
+    this.#connected = true;
+    this.#syncObservation();
+    this.#update();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObserving();
+  }
+  /** Follows a `list` element swapped in at runtime (Turbo Stream `replace` / morph). */
+  listTargetConnected() {
+    this.#resync();
+  }
+  /** Releases the observation when the `list` element leaves the target set. */
+  listTargetDisconnected() {
+    this.#resync();
+  }
+  /** Syncs an `empty` element that arrives — or is replaced — at runtime. */
+  emptyTargetConnected() {
+    this.#resync();
+  }
+  /**
+   * Syncs the `empty` element that remains when one leaves the target set. A
+   * single-target getter resolves to the first `empty` element in document order,
+   * so a swap that inserts the replacement *before* removing the original (Turbo
+   * Stream `after` / `before` / `append` followed by `remove`) leaves the
+   * replacement untouched until the original goes — this callback is that moment.
+   */
+  emptyTargetDisconnected() {
+    this.#resync();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `itemSelector` at runtime. */
+  itemSelectorValueChanged() {
+    this.#resync();
+  }
+  /**
+   * Re-points the observation and re-renders after a target or selector change.
+   * The `#connected` guard is load-bearing: Stimulus runs value and target
+   * callbacks for the initial markup *before* `connect()` and runs target
+   * callbacks during teardown *after* `disconnect()`, and re-observing there
+   * would outlive the controller.
+   */
+  #resync() {
+    if (!this.#connected) return;
+    this.#syncObservation();
+    this.#update();
+  }
+  /**
+   * Points the mutation observation at the current `list` target — re-resolved on
+   * every sync rather than captured at connect, so an element swapped in at
+   * runtime is observed instead of the detached original.
+   *
+   * The observation covers exactly what the count predicate reads. With no
+   * `itemSelector` the count is the child element count, which only `childList`
+   * can change. With one, the predicate reads the children themselves, so
+   * attribute and descendant mutations are watched too — and the controller's own
+   * writes are filtered back out, or toggling `hidden` would re-enter the render.
+   */
+  #syncObservation() {
+    this.#stopObserving();
+    if (!this.hasListTarget || typeof MutationObserver === "undefined") return;
+    const watchesItems = this.itemSelectorValue.length > 0;
+    this.#observer = new MutationObserver((records) => {
+      if (records.some((record) => this.#affectsCount(record))) this.#update();
+    });
+    this.#observer.observe(this.listTarget, {
+      childList: true,
+      subtree: watchesItems,
+      attributes: watchesItems
+    });
+  }
+  #stopObserving() {
     this.#observer?.disconnect();
     this.#observer = null;
   }
-  /** Recomputes the count and syncs visibility, hooks, and the change event. */
-  #apply() {
-    if (!this.hasListTarget) return;
+  /**
+   * Whether a mutation can change the item count. An attribute written on a
+   * target this controller owns is its own echo — `hidden` on `list` / `empty`,
+   * and the hooks on the controller element when the list *is* that element.
+   */
+  #affectsCount(record) {
+    if (record.type !== "attributes") return true;
+    const own = record.target === this.listTarget || this.hasEmptyTarget && record.target === this.emptyTarget;
+    return !own;
+  }
+  /**
+   * Renders the count, then reports a crossed boundary. The announcement copy is
+   * read here rather than while rendering: it is the wording of the report, not
+   * an input to what is displayed.
+   */
+  #update() {
+    const count = this.#render();
+    if (count === null) return;
+    const empty = count === 0;
+    const crossed = this.#empty !== null && empty !== this.#empty;
+    this.#empty = empty;
+    if (!crossed) return;
+    this.dispatch("change", { detail: { count, empty } });
+    announce(
+      fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count })
+    );
+  }
+  /**
+   * Syncs visibility and the state hooks to the current item count, and returns
+   * it. `null` when there is no `list` target to count.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    if (!this.hasListTarget) return null;
     const count = this.#count();
     const empty = count === 0;
     this.element.setAttribute("data-count", String(count));
@@ -56,13 +153,7 @@ var EmptyStateController = class extends Controller {
     }
     this.listTarget.hidden = empty;
     if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;
-    if (this.#empty !== null && empty !== this.#empty) {
-      this.dispatch("change", { detail: { count, empty } });
-      announce(
-        fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count })
-      );
-    }
-    this.#empty = empty;
+    return count;
   }
   /** Item count: element children matching `itemSelector`, or all element children. */
   #count() {

data/dist/controllers/file_dropzone_controller.js

@@ -12,18 +12,38 @@ var FileDropzoneController = class extends Controller {
   static events = ["change", "reject"];
   /** Selected files paired with their rendered item and any preview objectURL. */
   #entries = [];
+  /** Prevents initial and teardown target callbacks from binding outside controller lifetime. */
+  #connected = false;
   /** Wires file removal as a delegated listener on the list container. */
   connect() {
-    if (this.hasListTarget) this.listTarget.addEventListener("click", this.#onItemClick);
+    this.#connected = true;
+    if (this.hasListTarget) this.#bindList(this.listTarget);
   }
   /** Revokes any outstanding preview URLs so none leaks across navigations. */
   disconnect() {
-    if (this.hasListTarget) this.listTarget.removeEventListener("click", this.#onItemClick);
+    this.#connected = false;
+    for (const list of this.listTargets) list.removeEventListener("click", this.#onItemClick);
     for (const entry of this.#entries) {
       if (entry.url) URL.revokeObjectURL(entry.url);
     }
     this.#entries.length = 0;
   }
+  /** Rebinds removal and restores client-only previews when Turbo replaces the list target. */
+  listTargetConnected(list) {
+    if (!this.#connected) return;
+    this.#bindList(list);
+  }
+  /** Releases only the list target that actually disconnected. */
+  listTargetDisconnected(list) {
+    list.removeEventListener("click", this.#onItemClick);
+  }
+  /** Binds delegated removal once and moves live preview items into the current list. */
+  #bindList(list) {
+    list.addEventListener("click", this.#onItemClick);
+    for (const entry of this.#entries) {
+      if (!list.contains(entry.item)) list.appendChild(entry.item);
+    }
+  }
   /** Opens the native file dialog. Bound via `data-action` (trigger click). */
   openDialog() {
     this.inputTarget.click();
@@ -55,8 +75,11 @@ var FileDropzoneController = class extends Controller {
    * an item is appended without waiting on Stimulus to wire a freshly created element.
    */
   #onItemClick = (event) => {
+    const list = event.currentTarget;
     const button = event.target.closest("button");
-    if (!button || !this.hasListTarget || !this.listTarget.contains(button)) return;
+    if (!this.#connected || !list || !button || !this.hasListTarget || list !== this.listTarget || !list.contains(button)) {
+      return;
+    }
     const index = this.#entries.findIndex((entry) => entry.item.contains(button));
     if (index !== -1) this.#removeAt(index);
   };