stimeo-ui 0.15.0 → 0.17.0

package/dist/controllers/file_dropzone_controller.js

@@ -1,8 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/file_dropzone_controller.ts
-
-// src/utils/announce.ts
 function announce(message, options = {}) {
   const text = message.trim();
   if (text.length === 0) return;
@@ -19,91 +16,216 @@ function fillTemplate(template, values) {
   });
 }
 
-// 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 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;
+  }
+}
+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/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/focus_candidate.ts
+function matchingPart(root, selector) {
+  return root.matches(selector) ? root : root.querySelector(selector);
+}
+function writeLabel(slot, text) {
+  if (slot.childElementCount === 0) {
+    slot.textContent = text;
+    return;
+  }
+  let first = null;
+  for (const node of Array.from(slot.childNodes)) {
+    if (node.nodeType !== Node.TEXT_NODE) continue;
+    if (first) node.remove();
+    else first = node;
+  }
+  if (first) first.nodeValue = text;
+  else slot.prepend(text);
+}
+
+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) {
@@ -114,10 +236,123 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 
-// src/controllers/file_dropzone_controller.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}"]`;
+}
+
+function cloneTemplateRoot(template) {
+  const root = template.content.firstElementChild;
+  return root instanceof HTMLElement ? root.cloneNode(true) : null;
+}
+var TemplateRow = class {
+  #options;
+  #warned = false;
+  constructor(options) {
+    this.#options = options;
+  }
+  selector(name) {
+    return targetSelector(this.#options.identifier, name);
+  }
+  connect() {
+    this.#warned = false;
+  }
+  report(missing) {
+    return this.#say(`lacks ${missing}`);
+  }
+  #say(problem) {
+    if (this.#warned) return null;
+    this.#warned = true;
+    const { identifier, outcome, noun } = this.#options;
+    console.warn(`Stimeo UI: "${identifier}" ${outcome} because its ${noun} ${problem}.`);
+    return null;
+  }
+  instantiate(template, values) {
+    const { root: rootName, required, optional, button: buttonName } = this.#options;
+    const root = cloneTemplateRoot(template);
+    if (!root?.matches(this.selector(rootName))) {
+      return this.report(`${this.#article(rootName)} "${rootName}" root`);
+    }
+    const count = template.content.children.length;
+    if (count !== 1) {
+      return this.#say(`holds ${count} elements, and the row has to be its only one`);
+    }
+    const slots = {};
+    for (const name2 of required) {
+      const part = this.#resolve(root, name2);
+      if (!part) return this.report(`${this.#article(name2)} "${name2}" target`);
+      slots[name2] = part;
+    }
+    for (const name2 of optional ?? []) slots[name2] = this.#resolve(root, name2);
+    const named = this.#resolve(root, buttonName);
+    if (!(named instanceof HTMLButtonElement)) {
+      return this.report(`${this.#article(buttonName)} "${buttonName}" target <button>`);
+    }
+    const button = named;
+    const name = button.getAttribute("aria-label")?.trim() ?? "";
+    if (name === "") return this.report(`a non-empty aria-label on its "${buttonName}" target`);
+    button.setAttribute("aria-label", fillTemplate(name, values));
+    return { root, slots, button };
+  }
+  #resolve(root, name) {
+    return matchingPart(root, this.selector(name));
+  }
+  #article(name) {
+    return /^[aeiou]/i.test(name) ? "an" : "a";
+  }
+};
+
 var DRAGOVER_ATTRIBUTE = "data-dragover";
-var INVALID_ATTRIBUTE = "data-stimeo--file-dropzone-invalid";
-var FileDropzoneController = class extends Controller {
+var INVALID_ATTRIBUTE = "invalid";
+var GENERATED_ATTRIBUTE = "generated";
+var FileDropzoneController = class _FileDropzoneController extends Controller {
+  #numbers = new NumberValueReader();
+  get #invalidAttribute() {
+    return `data-${this.identifier}-${INVALID_ATTRIBUTE}`;
+  }
   static targets = [
     "zone",
     "trigger",
@@ -141,93 +376,118 @@ 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;
-  /** Whether this connection already reported its unusable item template. */
-  #warnedTemplate = false;
+  #invalid = false;
+  #dragoverHook = new AttributeLease(DRAGOVER_ATTRIBUTE, this.identifier);
+  #invalidHook = new AttributeLease(this.#invalidAttribute, this.identifier);
+  #rows = new TemplateRow({
+    identifier: this.identifier,
+    root: "item",
+    required: ["name"],
+    optional: ["thumb"],
+    button: "remove",
+    outcome: "added no file",
+    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.#warnedTemplate = false;
-    this.#beforeCache.activate();
-  }
-  /**
-   * 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:`.
-   */
+    this.#connected = true;
+    this.#rows.connect();
+    if (!moved) this.#discardInherited();
+  }
   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();
@@ -235,26 +495,16 @@ 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[data-stimeo--file-dropzone-target~="remove"]'
+      `button${this.#rows.selector("remove")}`
     );
     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. */
   #addFiles(files) {
     this.#rehome();
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(INVALID_ATTRIBUTE);
+    this.#invalid = false;
     const rejected = /* @__PURE__ */ new Map();
     const turnedAway = [];
     let addedName = "";
@@ -262,7 +512,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(INVALID_ATTRIBUTE, "");
+        this.#invalid = true;
         const batch = rejected.get(reason);
         if (batch) batch.count += 1;
         else rejected.set(reason, { name: file.name, count: 1 });
@@ -273,6 +523,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);
@@ -285,14 +536,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";
     }
@@ -300,36 +546,24 @@ 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.
-   */
   #appendFile(file) {
-    if (!this.hasListTarget) return this.#warnTemplate('a "list" target to render into');
-    if (!this.hasItemTemplateTarget) return this.#warnTemplate('an "itemTemplate" target');
-    const fragment = this.itemTemplateTarget.content.cloneNode(true);
-    const item = this.#slot(fragment, "item");
-    const name = this.#slot(fragment, "name");
-    const thumb = this.#slot(fragment, "thumb");
-    const button = fragment.querySelector(
-      'button[data-stimeo--file-dropzone-target~="remove"]'
-    );
-    const removeName = button?.getAttribute("aria-label")?.trim() ?? "";
-    if (!item) return this.#warnTemplate('an "item" root');
-    if (!name) return this.#warnTemplate('a "name" element');
-    if (!button) return this.#warnTemplate('a "remove" target <button>');
-    if (removeName === "") {
-      return this.#warnTemplate('a non-empty aria-label on its "remove" target');
+    if (!this.hasListTarget) {
+      this.#rows.report('a "list" target to render into');
+      return false;
+    }
+    if (!this.hasItemTemplateTarget) {
+      this.#rows.report('an "itemTemplate" target');
+      return false;
     }
-    name.textContent = file.name;
-    button.setAttribute("aria-label", fillTemplate(removeName, { name: file.name }));
+    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;
     if (thumb && file.type.startsWith("image/")) {
       url = URL.createObjectURL(file);
@@ -339,33 +573,10 @@ var FileDropzoneController = class extends Controller {
     } else if (thumb) {
       thumb.hidden = true;
     }
-    this.listTarget.appendChild(fragment);
+    this.listTarget.appendChild(item);
     this.#entries.push({ file, item, url });
     return true;
   }
-  /** Resolves one declared part inside a cloned item template. */
-  #slot(fragment, name) {
-    return fragment.querySelector(`[data-stimeo--file-dropzone-target~="${name}"]`);
-  }
-  /**
-   * Reports an unusable item template to the author, once per connection.
-   *
-   * The addition itself stays a no-op — nothing about the selection, the native
-   * input, the announcements, or the events changes. Without this line the only
-   * symptom is a picker that accepts no file at all, and the causes the Inspector
-   * cannot see statically (a server-rendered template, a name that renders empty
-   * from a missing translation) would have no diagnostic anywhere.
-   */
-  #warnTemplate(missing) {
-    if (!this.#warnedTemplate) {
-      this.#warnedTemplate = true;
-      console.warn(
-        `Stimeo UI: "${this.identifier}" added no file because its item template lacks ${missing}.`
-      );
-    }
-    return false;
-  }
-  /** Removes entry `index`, revokes its preview, and re-homes focus. */
   #removeAt(index) {
     const entry = this.#entries[index];
     if (!entry) return;
@@ -382,7 +593,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;
@@ -396,15 +606,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":
@@ -417,11 +621,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();
@@ -429,7 +628,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();
@@ -437,35 +635,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();
@@ -473,39 +659,50 @@ var FileDropzoneController = class extends Controller {
     this.#entries.length = 0;
     this.#syncInput();
     this.#endDrag();
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(INVALID_ATTRIBUTE);
   }
-  /** 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) {
-      const button = entry.item.querySelector(
-        'button[data-stimeo--file-dropzone-target~="remove"]'
+      const button = matchingPart(
+        entry.item,
+        `button${this.#rows.selector("remove")}`
       );
       if (button) buttons.push(button);
     }
     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