stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/file_dropzone_controller.js

@@ -1,8 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/file_dropzone_controller.ts
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = Object.hasOwn(values, name) ? values[name] : void 0;
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
 
-// src/utils/announce.ts
 function announce(message, options = {}) {
   const text = message.trim();
   if (text.length === 0) return;
@@ -12,98 +16,197 @@ function announce(message, options = {}) {
     })
   );
 }
-function fillTemplate(template, values) {
-  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
-    const replacement = values[name];
-    return replacement === void 0 ? match : String(replacement);
-  });
+
+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;
 }
 
-// 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);
+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;
+  }
+}
+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/detach_gate.ts
 var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
   #pending = false;
-  /**
-   * True while a probe is queued — the last disconnect was ambiguous and no
-   * reconnect has cancelled it yet. Read it from `connect()` to tell the
-   * reconnect half of an in-page move from a first connect: a controller whose
-   * initialisation restarts a measurement (a min-duration floor, an elapsed
-   * counter) must skip it for the move, where nothing actually restarted.
-   */
   get pending() {
     return this.#pending;
   }
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
   static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
+    return !host.element.isConnected || !_DetachGate.#listed(host);
+  }
   disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
+    const carried = _DetachGate.#carried(host);
+    if (!carried && _DetachGate.isDetached(host)) {
       this.#pending = false;
       teardown();
       return;
     }
     this.#pending = true;
-    queueMicrotask(() => {
+    const probe = () => {
       if (!this.#pending) return;
       this.#pending = false;
       teardown();
-    });
+    };
+    if (carried) setTimeout(probe, 0);
+    else queueMicrotask(probe);
+  }
+  static #carried(host) {
+    const element = host.element;
+    return !element.isConnected && element.closest("[data-turbo-permanent]") !== null && _DetachGate.#listed(host);
+  }
+  static #listed(host) {
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return tokens.includes(host.identifier);
   }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
   cancel() {
     this.#pending = false;
   }
 };
 
-// src/utils/element_part.ts
 function matchingPart(root, selector) {
   return root.matches(selector) ? root : root.querySelector(selector);
 }
@@ -122,7 +225,14 @@ function writeLabel(slot, text) {
   else slot.prepend(text);
 }
 
-// src/utils/focus_candidate.ts
+function ownerIndex(candidates, node) {
+  if (!(node instanceof Node)) return -1;
+  return candidates.findIndex((candidate) => candidate.contains(node));
+}
+function ownerOf(candidates, node) {
+  return candidates[ownerIndex(candidates, node)] ?? null;
+}
+
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -133,12 +243,54 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 
-// src/utils/target_selector.ts
+var NUMBER_BOUNDS = {
+  nonNegative: { finite: true, min: 0 }};
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
 function targetSelector(identifier, name) {
   return `[data-${identifier}-target~="${name}"]`;
 }
 
-// src/utils/template_row.ts
 function cloneTemplateRoot(template) {
   const root = template.content.firstElementChild;
   return root instanceof HTMLElement ? root.cloneNode(true) : null;
@@ -149,22 +301,15 @@ var TemplateRow = class {
   constructor(options) {
     this.#options = options;
   }
-  /** The attribute selector for one declared part, in this controller's namespace. */
   selector(name) {
     return targetSelector(this.#options.identifier, name);
   }
-  /** Re-arms the once-per-connection diagnostic. */
   connect() {
     this.#warned = false;
   }
-  /**
-   * Names one missing part on the console, at most once per connection, and
-   * returns `null` so a caller can hand it straight back.
-   */
   report(missing) {
     return this.#say(`lacks ${missing}`);
   }
-  /** Writes one diagnostic per connection, saying what the template got wrong. */
   #say(problem) {
     if (this.#warned) return null;
     this.#warned = true;
@@ -172,10 +317,6 @@ var TemplateRow = class {
     console.warn(`Stimeo UI: "${identifier}" ${outcome} because its ${noun} ${problem}.`);
     return null;
   }
-  /**
-   * Clones the row and resolves its parts, or names what the template got wrong
-   * and returns `null`. `values` fills the button's authored `aria-label`.
-   */
   instantiate(template, values) {
     const { root: rootName, required, optional, button: buttonName } = this.#options;
     const root = cloneTemplateRoot(template);
@@ -203,7 +344,6 @@ var TemplateRow = class {
     button.setAttribute("aria-label", fillTemplate(name, values));
     return { root, slots, button };
   }
-  /** The row may be its own part; otherwise the first descendant carrying the target. */
   #resolve(root, name) {
     return matchingPart(root, this.selector(name));
   }
@@ -212,11 +352,11 @@ var TemplateRow = class {
   }
 };
 
-// src/controllers/file_dropzone_controller.ts
 var DRAGOVER_ATTRIBUTE = "data-dragover";
 var INVALID_ATTRIBUTE = "invalid";
-var FileDropzoneController = class extends Controller {
-  /** The hook above, in the namespace this controller is registered under. */
+var GENERATED_ATTRIBUTE = "generated";
+var FileDropzoneController = class _FileDropzoneController extends Controller {
+  #numbers = new NumberValueReader();
   get #invalidAttribute() {
     return `data-${this.identifier}-${INVALID_ATTRIBUTE}`;
   }
@@ -243,13 +383,17 @@ var FileDropzoneController = class extends Controller {
     announceRejectedDuplicateText: { type: String, default: "" },
     announceRejectedCountText: { type: String, default: "" }
   };
+  static valueConstraints = {
+    maxSize: NUMBER_BOUNDS.nonNegative,
+    maxFiles: NUMBER_BOUNDS.nonNegative
+  };
   static actions = ["onChange", "onDragLeave", "onDragOver", "onDrop", "openDialog"];
   static events = ["change", "reject", "reconcile"];
-  /** Selected files paired with their rendered item and any preview objectURL. */
   #entries = [];
-  /** Whether a drag is currently over the zone; the source for `data-dragover`. */
   #dragging = false;
-  /** Builds one preview item from the authored template and owns its diagnostic. */
+  #invalid = false;
+  #dragoverHook = new AttributeLease(DRAGOVER_ATTRIBUTE, this.identifier);
+  #invalidHook = new AttributeLease(this.#invalidAttribute, this.identifier);
   #rows = new TemplateRow({
     identifier: this.identifier,
     root: "item",
@@ -260,84 +404,97 @@ var FileDropzoneController = class extends Controller {
     noun: "item template"
   });
   #gate = new DetachGate();
-  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  /** Subscribes to the Turbo cache rewind and re-arms the template diagnostic. */
+  #listWatch = new MutationObserver((records) => {
+    const lost = records.some(
+      (record) => Array.from(record.removedNodes).some(
+        (node) => this.#entries.some((entry) => entry.item === node)
+      )
+    );
+    if (!lost) return;
+    this.#rehome();
+    this.#paintZone();
+  });
+  #connected = false;
+  get #generatedAttribute() {
+    return `data-${this.identifier}-${GENERATED_ATTRIBUTE}`;
+  }
   connect() {
+    const moved = this.#gate.pending;
     this.#gate.cancel();
+    this.#connected = true;
     this.#rows.connect();
-    this.#beforeCache.activate();
+    if (!moved) this.#discardInherited();
   }
-  /**
-   * Releases the delegated listeners. The selection itself survives an in-page
-   * move and is released only once the gate proves a real detach — revoking a
-   * preview URL on a move would leave a live item pointing at a dead `blob:`.
-   */
   disconnect() {
+    this.#connected = false;
     for (const list of this.listTargets) list.removeEventListener("click", this.#onItemClick);
-    this.#beforeCache.deactivate();
+    this.#listWatch.disconnect();
     this.#gate.disconnected(this, () => this.#teardown());
   }
-  /**
-   * Binds removal and restores client-only previews for every list this controller
-   * renders into — the one present at connect and any Turbo puts in its place.
-   * This is the only place the listener is attached, so the pair with
-   * {@link listTargetDisconnected} keeps it from outliving the element it is on.
-   */
+  #discardInherited() {
+    let discarded = false;
+    for (const list of this.listTargets) {
+      for (const item of Array.from(list.children)) {
+        if (!item.hasAttribute(this.#generatedAttribute)) continue;
+        item.remove();
+        discarded = true;
+      }
+    }
+    for (const zone of this.zoneTargets) {
+      this.#dragoverHook.return(zone);
+      this.#invalidHook.return(zone);
+    }
+    if (!discarded) return;
+    this.#dragging = false;
+    this.#invalid = false;
+    this.#syncInput();
+    this.dispatch("reconcile", { detail: { files: this.#files } });
+  }
   listTargetConnected(list) {
-    this.#bindList(list);
+    list.addEventListener("click", this.#onItemClick);
+    this.#listWatch.observe(list, { childList: true });
+    this.#rehome();
   }
-  /** Releases only the list target that actually disconnected. */
   listTargetDisconnected(list) {
     list.removeEventListener("click", this.#onItemClick);
+    if (this.#connected) this.#rehome();
   }
-  /** 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);
-    }
+  inputTargetConnected() {
+    if (this.#connected) this.#syncInput();
+  }
+  inputTargetDisconnected() {
+    if (this.#connected) this.#syncInput();
+  }
+  zoneTargetConnected() {
+    if (this.#connected) this.#paintZone();
+  }
+  zoneTargetDisconnected(zone) {
+    if (this.zoneTargets.includes(zone)) return;
+    this.#dragoverHook.return(zone);
+    this.#invalidHook.return(zone);
+    if (this.#connected) this.#paintZone();
   }
-  /** Opens the native file dialog. Bound via `data-action` (trigger click). */
   openDialog() {
     if (this.#isDisabled) return;
     this.inputTarget.click();
   }
-  /**
-   * Adds the files chosen through the native dialog. The input holds only what
-   * the dialog just returned, so the accepted set is written back over it once
-   * the batch is validated.
-   */
-  onChange() {
-    const files = this.inputTarget.files;
+  onChange(event) {
+    const files = (ownerOf(this.inputTargets, event?.target) ?? this.inputTarget).files;
     if (files) this.#addFiles(files);
-    else this.#syncInput();
-  }
-  /**
-   * Marks the zone as a drop target and announces the affordance once per drag.
-   * Bound via `data-action` (dragover). Leaving the default alone is what refuses
-   * the drop, so a disabled field and a drag an inner dropzone already claimed
-   * both fall through untouched.
-   */
+  }
   onDragOver(event) {
     if (event.defaultPrevented || this.#isDisabled) return;
     event.preventDefault();
     if (this.#dragging) return;
     this.#dragging = true;
-    if (this.hasZoneTarget) this.zoneTarget.setAttribute(DRAGOVER_ATTRIBUTE, "");
+    this.#paintZone();
     announce(fillTemplate(this.announceDragTextValue, { total: this.#entries.length }));
   }
-  /**
-   * Clears the drag-over flag when the pointer leaves the zone. Bound via
-   * `data-action` (dragleave). `dragleave` bubbles from every descendant the
-   * pointer crosses, so the flag only drops when the element being entered is
-   * outside the zone (or there is none, the pointer having left the window).
-   */
   onDragLeave(event) {
     const next = event.relatedTarget;
     if (this.hasZoneTarget && next instanceof Node && this.zoneTarget.contains(next)) return;
     this.#endDrag();
   }
-  /** Accepts dropped files, clearing the drag-over state. Bound via `data-action` (drop). */
   onDrop(event) {
     if (event.defaultPrevented) return;
     this.#endDrag();
@@ -345,15 +502,6 @@ var FileDropzoneController = class extends Controller {
     event.preventDefault();
     if (event.dataTransfer?.files) this.#addFiles(event.dataTransfer.files);
   }
-  /**
-   * Removes the file whose remove button was clicked. Delegated on the list
-   * container rather than bound per item via `data-action`, so it works the instant
-   * an item is appended without waiting on Stimulus to wire a freshly created element.
-   * Only the item's declared `remove` target counts, so an authored second control
-   * inside an item does what it says instead of silently discarding the file. The
-   * button has to belong to a tracked item, which is what makes a list this
-   * controller no longer renders into inert — its items moved out with it.
-   */
   #onItemClick = (event) => {
     const button = event.target.closest(
       `button${this.#rows.selector("remove")}`
@@ -361,15 +509,9 @@ var FileDropzoneController = class extends Controller {
     const index = this.#entries.findIndex((entry) => entry.item.contains(button));
     if (index !== -1) this.#removeAt(index);
   };
-  /**
-   * Validates each incoming file, renders the accepted ones, and reports the batch.
-   *
-   * @stimeoRuntimeOnly The limits decide which files of this one drop are taken, and the texts word
-   *   the announcements it makes.
-   */
   #addFiles(files) {
     this.#rehome();
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(this.#invalidAttribute);
+    this.#invalid = false;
     const rejected = /* @__PURE__ */ new Map();
     const turnedAway = [];
     let addedName = "";
@@ -377,7 +519,7 @@ var FileDropzoneController = class extends Controller {
     for (const file of Array.from(files)) {
       const reason = this.#validate(file);
       if (reason !== null) {
-        if (this.hasZoneTarget) this.zoneTarget.setAttribute(this.#invalidAttribute, "");
+        this.#invalid = true;
         const batch = rejected.get(reason);
         if (batch) batch.count += 1;
         else rejected.set(reason, { name: file.name, count: 1 });
@@ -388,6 +530,7 @@ var FileDropzoneController = class extends Controller {
       if (added === 0) addedName = file.name;
       added += 1;
     }
+    this.#paintZone();
     this.#syncInput();
     if (added > 0) {
       this.#announce(this.announceAddedTextValue, addedName, added);
@@ -400,14 +543,9 @@ var FileDropzoneController = class extends Controller {
       this.#announce(this.#rejectText(reason), batch.name, batch.count);
     }
   }
-  /**
-   * Returns the rejection reason for `file`, or `null` when it is acceptable.
-   * The file's own defects are decided first, so a full list still tells the user
-   * which files it would never have taken.
-   */
   #validate(file) {
     if (!this.#matchesAccept(file)) return "type";
-    if (this.maxSizeValue > 0 && file.size > this.maxSizeValue) return "size";
+    if (this.#safeMaxSize > 0 && file.size > this.#safeMaxSize) return "size";
     if (!this.allowDuplicatesValue && this.#entries.some((entry) => this.#isSame(entry.file, file))) {
       return "duplicate";
     }
@@ -415,21 +553,9 @@ var FileDropzoneController = class extends Controller {
     if (limit > 0 && this.#entries.length >= limit) return "count";
     return null;
   }
-  /**
-   * Whether two files are the same selection. `File` objects from separate picks
-   * are never the same reference, so identity is the triple the platform exposes.
-   */
   #isSame(a, b) {
     return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
   }
-  /**
-   * Builds one preview item (name, optional thumbnail, remove button) and reports
-   * whether it was rendered.
-   *
-   * A refused row leaves the addition a no-op — nothing about the selection, the
-   * native input, the announcements, or the events changes — and the row reports
-   * why on the console once per connection.
-   */
   #appendFile(file) {
     if (!this.hasListTarget) {
       this.#rows.report('a "list" target to render into');
@@ -442,6 +568,7 @@ var FileDropzoneController = class extends Controller {
     const row = this.#rows.instantiate(this.itemTemplateTarget, { name: file.name });
     if (!row) return false;
     const item = row.root;
+    item.setAttribute(this.#generatedAttribute, "");
     writeLabel(row.slots.name, file.name);
     const thumb = row.slots.thumb;
     let url;
@@ -457,7 +584,6 @@ var FileDropzoneController = class extends Controller {
     this.#entries.push({ file, item, url });
     return true;
   }
-  /** Removes entry `index`, revokes its preview, and re-homes focus. */
   #removeAt(index) {
     const entry = this.#entries[index];
     if (!entry) return;
@@ -474,7 +600,6 @@ var FileDropzoneController = class extends Controller {
       (buttons[index] ?? buttons[buttons.length - 1])?.focus();
     }
   }
-  /** Whether `file` satisfies the input's `accept` list (empty accepts all). */
   #matchesAccept(file) {
     const accept = this.inputTarget.accept.trim();
     if (accept === "") return true;
@@ -488,15 +613,9 @@ var FileDropzoneController = class extends Controller {
       return type === token;
     });
   }
-  /**
-   * Sends one consumer-worded message to the page's shared announcer. `{name}` is
-   * the file the message is about, `{count}` how many files it covers, and
-   * `{total}` how many are selected once the batch has settled.
-   */
   #announce(template, name, count) {
     announce(fillTemplate(template, { name, count, total: this.#entries.length }));
   }
-  /** The consumer's wording for one rejection reason. */
   #rejectText(reason) {
     switch (reason) {
       case "type":
@@ -509,11 +628,6 @@ var FileDropzoneController = class extends Controller {
         return this.announceRejectedCountTextValue;
     }
   }
-  /**
-   * Mirrors the accepted set onto the native input, so a plain form submit carries
-   * the dropped files. Skipped where `DataTransfer` cannot be constructed: the
-   * widget keeps working and the consumer still receives every `File` on `change`.
-   */
   #syncInput() {
     if (!this.hasInputTarget) return;
     const transfer = this.#newTransfer();
@@ -521,7 +635,6 @@ var FileDropzoneController = class extends Controller {
     for (const entry of this.#entries) transfer.items.add(entry.file);
     this.inputTarget.files = transfer.files;
   }
-  /** A usable empty `DataTransfer`, or `null` where the platform has none. */
   #newTransfer() {
     try {
       return new DataTransfer();
@@ -529,35 +642,23 @@ var FileDropzoneController = class extends Controller {
       return null;
     }
   }
-  /**
-   * Moves surviving preview items back under the current list. A morph that
-   * empties the list in place leaves the selection with no rendering, and the
-   * files it holds cannot be rebuilt from the DOM, so the items are re-homed
-   * rather than forgotten.
-   */
   #rehome() {
     if (!this.hasListTarget) return;
     for (const entry of this.#entries) {
       if (!this.listTarget.contains(entry.item)) this.listTarget.appendChild(entry.item);
     }
   }
-  /** Drops the drag-over state, whether the drag ended in a drop or left the zone. */
   #endDrag() {
     this.#dragging = false;
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(DRAGOVER_ATTRIBUTE);
-  }
-  /**
-   * Discards the selection and every state attribute this controller wrote, so
-   * neither a cached snapshot nor a stranded subtree keeps items whose files are
-   * gone. Silent: `change` means a selection the user changed, and the cache
-   * rewind reports itself as `reconcile` instead.
-   */
-  #rewindForCache() {
-    const had = this.#entries.length > 0;
-    this.#reset();
-    if (had) this.dispatch("reconcile", { detail: { files: this.#files } });
+    this.#paintZone();
+  }
+  #paintZone() {
+    if (!this.hasZoneTarget) return;
+    this.#dragoverHook.write(this.zoneTarget, this.#dragging ? "" : null);
+    this.#invalidHook.write(this.zoneTarget, this.#invalid ? "" : null);
   }
   #reset() {
+    this.#invalid = false;
     for (const entry of this.#entries) {
       if (entry.url) URL.revokeObjectURL(entry.url);
       entry.item.remove();
@@ -565,23 +666,17 @@ var FileDropzoneController = class extends Controller {
     this.#entries.length = 0;
     this.#syncInput();
     this.#endDrag();
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(this.#invalidAttribute);
   }
-  /** Releases the selection once the disconnect is known to be a real detach. */
   #teardown() {
-    this.#gate.cancel();
     this.#reset();
   }
-  /** Whether the field refuses input, natively or through an ancestor `fieldset`. */
   get #isDisabled() {
     return this.inputTarget.disabled || inheritsFieldsetDisabled(this.inputTarget);
   }
-  /** Effective file cap: `maxFiles`, or 1 when the input is single-select. */
   get #effectiveMaxFiles() {
-    if (this.maxFilesValue > 0) return this.maxFilesValue;
+    if (this.#safeMaxFiles > 0) return this.#safeMaxFiles;
     return this.inputTarget.multiple ? 0 : 1;
   }
-  /** The declared remove button of each rendered item, in selection order. */
   get #removeButtons() {
     const buttons = [];
     for (const entry of this.#entries) {
@@ -593,12 +688,28 @@ var FileDropzoneController = class extends Controller {
     }
     return buttons;
   }
-  /** The accepted files in selection order. */
   get #files() {
     return this.#entries.map((entry) => entry.file);
   }
+  get #safeMaxSize() {
+    return this.#numbers.read(
+      this,
+      "maxSize",
+      this.maxSizeValue,
+      _FileDropzoneController.values.maxSize.default,
+      _FileDropzoneController.valueConstraints.maxSize
+    );
+  }
+  get #safeMaxFiles() {
+    return this.#numbers.read(
+      this,
+      "maxFiles",
+      this.maxFilesValue,
+      _FileDropzoneController.values.maxFiles.default,
+      _FileDropzoneController.valueConstraints.maxFiles
+    );
+  }
 };
 
 export { FileDropzoneController };
-//# sourceMappingURL=file_dropzone_controller.js.map
 //# sourceMappingURL=file_dropzone_controller.js.map