@unabridged/midwest 0.16.0 → 0.17.0

package/dist/javascript/midwest.js

@@ -3111,16 +3111,23 @@ class Dialog extends Controller {
 }
 
 class Tabs extends Controller {
-  static targets = ["tab", "panel"];
+  static targets = ["tab", "panel", "list"];
   connect() {
     const activeIndex = this.tabTargets.findIndex(
       (tab) => tab.getAttribute("aria-selected") === "true"
     );
     this.activateTab(activeIndex >= 0 ? activeIndex : 0);
     this.element.addEventListener("keydown", this.handleKeydown);
+    if (this.hasListTarget) {
+      this.updateOverflow();
+      this.listTarget.addEventListener("scroll", this.updateOverflow);
+    }
   }
   disconnect() {
     this.element.removeEventListener("keydown", this.handleKeydown);
+    if (this.hasListTarget) {
+      this.listTarget.removeEventListener("scroll", this.updateOverflow);
+    }
   }
   select(event) {
     const tab = event.currentTarget;
@@ -3128,6 +3135,13 @@ class Tabs extends Controller {
     if (index >= 0)
       this.activateTab(index);
   }
+  updateOverflow = () => {
+    if (!this.hasListTarget)
+      return;
+    const list = this.listTarget;
+    list.classList.toggle("can-scroll-left", list.scrollLeft > 0);
+    list.classList.toggle("can-scroll-right", list.scrollLeft < list.scrollWidth - list.clientWidth - 1);
+  };
   handleKeydown = (event) => {
     const tabs = this.tabTargets;
     if (tabs.length === 0)
@@ -3230,7 +3244,8 @@ class Carousel extends Controller {
   static targets = ["track", "prev", "next", "dot"];
   static values = {
     wizard: { type: Boolean, default: false },
-    autoplay: { type: Number, default: 0 }
+    autoplay: { type: Number, default: 0 },
+    loop: { type: Boolean, default: false }
   };
   observer = null;
   _currentIndex = 0;
@@ -3266,10 +3281,21 @@ class Carousel extends Controller {
     this.stopAutoplay();
   }
   next() {
-    this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
+    const atEnd = this._currentIndex >= this.slides.length - 1;
+    if (this.loopValue && atEnd) {
+      this.slides[0]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    } else {
+      this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
+    }
   }
   previous() {
-    this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: "smooth" });
+    const atStart = this._currentIndex <= 0;
+    if (this.loopValue && atStart) {
+      const last = this.slides[this.slides.length - 1];
+      last?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    } else {
+      this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: "smooth" });
+    }
   }
   goto(event) {
     const button = event.currentTarget;
@@ -3436,11 +3462,11 @@ class Carousel extends Controller {
     const atStart = track.scrollLeft <= 0;
     const atEnd = track.scrollLeft >= track.scrollWidth - track.clientWidth - 1;
     if (this.hasPrevTarget)
-      this.prevTarget.classList.toggle("hide", atStart);
+      this.prevTarget.classList.toggle("hide", atStart && !this.loopValue);
     if (this.hasNextTarget) {
       const atLastSlide = this._currentIndex >= this.slides.length - 1;
       const frontierReached = this.wizardValue && this._currentIndex >= this._maxUnlocked;
-      this.nextTarget.classList.toggle("hide", atEnd || atLastSlide || frontierReached);
+      this.nextTarget.classList.toggle("hide", (atEnd || atLastSlide || frontierReached) && !this.loopValue);
     }
     if (this.wizardValue && this.hasDotTarget) {
       this.dotTargets.forEach((dot, i) => {
@@ -3465,10 +3491,12 @@ class FormLiveSummary extends Controller {
     this.render();
     this.form?.addEventListener("input", this.render);
     this.form?.addEventListener("change", this.render);
+    this.form?.addEventListener("midwest-autocomplete:change", this.render);
   }
   disconnect() {
     this.form?.removeEventListener("input", this.render);
     this.form?.removeEventListener("change", this.render);
+    this.form?.removeEventListener("midwest-autocomplete:change", this.render);
   }
   get form() {
     return this.element.closest("form");
@@ -3551,6 +3579,16 @@ class FormLiveSummary extends Controller {
         value: element.value
       });
     });
+    form.querySelectorAll(".midwest-autocomplete").forEach((ac) => {
+      if (this.element.contains(ac))
+        return;
+      if (!ac.querySelector('[role="combobox"]'))
+        return;
+      const labelEl = ac.querySelector("label");
+      const label = labelEl?.textContent?.trim() || this.prettifyName((ac.dataset.name ?? "").replace(/\[.*\]$/, ""));
+      const selected = Array.from(ac.querySelectorAll(".midwest-autocomplete-tokens .value")).map((el) => el.textContent?.trim()).filter(Boolean).join(", ");
+      fields.push({ label, value: selected || "\u2014" });
+    });
     return fields;
   }
   // Finds the label associated with a specific element via `for` attribute,
@@ -3820,22 +3858,75 @@ class Rating extends Controller {
 }
 
 class Autocomplete extends Controller {
-  static targets = ["input", "dropdown", "list", "tokens", "token", "multipleTokenTemplate", "singleTokenTemplate", "status"];
+  static targets = ["input", "dropdown", "list", "tokens", "multipleTokenTemplate", "singleTokenTemplate", "status", "turboList", "loader"];
   static values = {
     options: { type: Array, default: [] },
     url: { type: String, default: "" },
-    multiple: { type: Boolean, default: true }
+    multiple: { type: Boolean, default: true },
+    turboFrameUrl: { type: String, default: "" }
   };
-  selectedValues = /* @__PURE__ */ new Map();
   highlightedIndex = -1;
   fetchAbort = null;
+  searchTimer;
+  // ── Named handlers ─────────────────────────────────────────────────────────
+  // Arrow-function class properties preserve `this` and produce a stable
+  // reference so addEventListener/removeEventListener pairs always match.
+  onFrameLoad = () => {
+    this.syncSelectedState();
+    this.loading = false;
+    this.showDropdown();
+  };
+  onToggle = (e) => {
+    const opened = e.newState === "open";
+    this.inputTarget.setAttribute("aria-expanded", String(opened));
+    if (!opened) {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+      this.highlightedIndex = -1;
+    }
+  };
+  onFocusOut = (e) => {
+    if (!this.element.contains(e.relatedTarget)) {
+      this.hideDropdown();
+    }
+  };
+  onListMouseDown = (e) => {
+    const option = e.target.closest(".midwest-autocomplete-option");
+    if (option) {
+      e.preventDefault();
+      this.pickItem(option);
+    }
+  };
+  // ── Lifecycle ───────────────────────────────────────────────────────────────
   connect() {
-    this.loadInitialTokens();
+    this.element.addEventListener("focusout", this.onFocusOut);
   }
   disconnect() {
     this.fetchAbort?.abort();
+    clearTimeout(this.searchTimer);
+    this.element.removeEventListener("focusout", this.onFocusOut);
+  }
+  // Target callbacks — Stimulus calls these automatically when targets connect
+  // or disconnect, including after the initial connect(). This replaces manual
+  // hasTurboListTarget guards and addEventListener calls inside connect().
+  dropdownTargetConnected(el) {
+    el.addEventListener("toggle", this.onToggle);
+  }
+  dropdownTargetDisconnected(el) {
+    el.removeEventListener("toggle", this.onToggle);
+  }
+  listTargetConnected(el) {
+    el.addEventListener("mousedown", this.onListMouseDown);
+  }
+  listTargetDisconnected(el) {
+    el.removeEventListener("mousedown", this.onListMouseDown);
+  }
+  turboListTargetConnected(el) {
+    el.addEventListener("turbo:frame-load", this.onFrameLoad);
+  }
+  turboListTargetDisconnected(el) {
+    el.removeEventListener("turbo:frame-load", this.onFrameLoad);
   }
-  // ── Public actions ─────────────────────────────────────────────────────────
+  // ── Public actions ──────────────────────────────────────────────────────────
   focusInput() {
     this.inputTarget.focus();
     this.open();
@@ -3843,21 +3934,20 @@ class Autocomplete extends Controller {
   open() {
     if (this.dropdownTarget.matches(":popover-open"))
       return;
-    const query = this.inputTarget.value.trim();
-    if (this.urlValue) {
-      this.fetch(query);
-    } else {
-      this.renderOptions(this.filteredOptions(query));
-    }
+    clearTimeout(this.searchTimer);
+    this.resolve(this.inputTarget.value.trim());
   }
-  async search() {
+  search() {
     const query = this.inputTarget.value.trim();
-    if (this.urlValue) {
-      await this.fetch(query);
-    } else {
+    if (!this.hasTurboListTarget && !this.urlValue) {
       this.renderOptions(this.filteredOptions(query));
+      return;
     }
-    this.showDropdown();
+    clearTimeout(this.searchTimer);
+    this.searchTimer = window.setTimeout(() => {
+      this.searchTimer = void 0;
+      this.resolve(query);
+    }, 200);
   }
   navigate(event) {
     switch (event.key) {
@@ -3872,6 +3962,8 @@ class Autocomplete extends Controller {
       }
       case "ArrowUp": {
         event.preventDefault();
+        if (!this.dropdownTarget.matches(":popover-open"))
+          break;
         const items = this.visibleOptions();
         this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
         this.syncHighlight(items);
@@ -3879,6 +3971,8 @@ class Autocomplete extends Controller {
       }
       case "Enter": {
         event.preventDefault();
+        if (!this.dropdownTarget.matches(":popover-open"))
+          break;
         const items = this.visibleOptions();
         if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
           this.pickItem(items[this.highlightedIndex]);
@@ -3890,19 +3984,14 @@ class Autocomplete extends Controller {
         break;
       case "Backspace":
         if (this.inputTarget.value === "" && this.multipleValue) {
-          const entries = Array.from(this.selectedValues.keys());
-          if (entries.length > 0)
-            this.deselect(entries[entries.length - 1]);
+          const tokens = this.tokensTarget.querySelectorAll("[data-value]");
+          const last = tokens[tokens.length - 1];
+          if (last?.dataset.value)
+            this.deselect(last.dataset.value);
         }
         break;
     }
   }
-  visibleOptions() {
-    return this.listTarget.querySelectorAll('.midwest-autocomplete-option:not([aria-selected="true"])');
-  }
-  handleBlur() {
-    setTimeout(() => this.hideDropdown(), 150);
-  }
   removeToken(event) {
     event.stopPropagation();
     const btn = event.currentTarget;
@@ -3910,16 +3999,31 @@ class Autocomplete extends Controller {
     if (value)
       this.deselect(value);
   }
-  // ── Private ────────────────────────────────────────────────────────────────
+  // Public action used by turbo-frame option items via data-action.
+  // Each server-rendered <li> should have:
+  //   data-action="mousedown->midwest-autocomplete#selectOption"
+  selectOption(event) {
+    event.preventDefault();
+    this.pickItem(event.currentTarget);
+  }
+  // ── Private ─────────────────────────────────────────────────────────────────
   get optionIdPrefix() {
     return `ac-opt-${(this.element.dataset.name ?? "field").replace(/\W/g, "-")}`;
   }
-  loadInitialTokens() {
-    this.tokenTargets.forEach((token) => {
-      const value = token.dataset.value ?? "";
-      const label = token.querySelector(".value")?.textContent?.trim() ?? value;
-      this.selectedValues.set(value, { value, label });
-    });
+  isSelected(value) {
+    return !!this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
+  }
+  // Routes to the correct data source. Shared by open() and the debounced search path.
+  resolve(query) {
+    if (this.hasTurboListTarget) {
+      this.navigateFrame(query);
+      return;
+    }
+    if (this.urlValue) {
+      this.fetch(query);
+      return;
+    }
+    this.renderOptions(this.filteredOptions(query));
   }
   filteredOptions(query) {
     const q = query.toLowerCase();
@@ -3927,10 +4031,36 @@ class Autocomplete extends Controller {
       (o) => q === "" || o.label.toLowerCase().includes(q) || (o.support?.toLowerCase().includes(q) ?? false)
     );
   }
+  navigateFrame(query) {
+    const url = new URL(this.turboFrameUrlValue, window.location.href);
+    if (query)
+      url.searchParams.set("q", query);
+    this.tokensTarget.querySelectorAll("input[type=hidden]").forEach((input) => {
+      url.searchParams.append("selected[]", input.value);
+    });
+    this.loading = true;
+    this.turboListTarget.setAttribute("src", url.toString());
+    this.showDropdown();
+  }
+  // After a turbo frame loads, mark already-selected items and update the live region.
+  // The empty state element is always present in the frame and CSS shows/hides it
+  // based on whether any non-selected options exist.
+  syncSelectedState() {
+    const options = this.turboListTarget.querySelectorAll(".midwest-autocomplete-option");
+    options.forEach((option) => {
+      const val = option.dataset.value ?? "";
+      option.setAttribute("aria-selected", this.isSelected(val) ? "true" : "false");
+    });
+    const visibleCount = this.visibleOptions().length;
+    this.announce(visibleCount > 0 ? `${visibleCount} option${visibleCount === 1 ? "" : "s"} available` : "No more options");
+  }
   async fetch(query) {
     this.fetchAbort?.abort();
     this.fetchAbort = new AbortController();
-    this.showLoading();
+    this.listTarget.replaceChildren();
+    this.loading = true;
+    this.announce("Loading");
+    this.showDropdown();
     try {
       const url = new URL(this.urlValue, window.location.href);
       if (query)
@@ -3948,11 +4078,6 @@ class Autocomplete extends Controller {
     }
   }
   select(option) {
-    if (!this.multipleValue) {
-      this.selectedValues.forEach((_, val) => this.removeTokenElement(val));
-      this.selectedValues.clear();
-    }
-    this.selectedValues.set(option.value, option);
     this.appendToken(option);
     this.hideDropdown();
     this.inputTarget.value = "";
@@ -3961,102 +4086,106 @@ class Autocomplete extends Controller {
     this.dispatch("change", { detail: { value: option.value, label: option.label } });
   }
   deselect(value) {
-    const option = this.selectedValues.get(value);
-    this.selectedValues.delete(value);
-    this.removeTokenElement(value);
-    if (option)
-      this.announce(`${option.label} removed`);
+    const token = this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
+    const label = token?.querySelector(".value")?.textContent?.trim();
+    token?.remove();
+    if (label)
+      this.announce(`${label} removed`);
     this.dispatch("change", { detail: { value: null } });
   }
   appendToken(option) {
-    const name = this.element.dataset.name ?? "";
+    if (!this.multipleValue) {
+      this.tokensTarget.querySelectorAll("[data-value]").forEach((el) => el.remove());
+    }
+    const template = this.multipleValue ? this.multipleTokenTemplateTarget : this.singleTokenTemplateTarget;
+    const fragment = template.content.cloneNode(true);
+    const badge = fragment.querySelector(".midwest-badge");
+    if (!badge)
+      return;
+    badge.dataset.value = option.value;
+    const valueEl = badge.querySelector(".value");
+    if (valueEl)
+      valueEl.textContent = option.label;
     if (this.multipleValue) {
-      const fragment = this.multipleTokenTemplateTarget.content.cloneNode(true);
-      const badge = fragment.querySelector(".midwest-badge");
-      badge.dataset.value = option.value;
-      badge.querySelector(".value").textContent = option.label;
       const removeBtn = badge.querySelector(".remove");
-      removeBtn.dataset.value = option.value;
-      removeBtn.setAttribute("aria-label", `Remove ${option.label}`);
-      const input = badge.querySelector("input[type=hidden]");
-      input.name = name;
-      input.value = option.value;
-      this.tokensTarget.appendChild(fragment);
-    } else {
-      this.tokensTarget.querySelectorAll("[data-value]").forEach((el) => el.remove());
-      const fragment = this.singleTokenTemplateTarget.content.cloneNode(true);
-      const badge = fragment.querySelector(".midwest-badge");
-      badge.dataset.value = option.value;
-      badge.querySelector(".value").textContent = option.label;
-      const input = badge.querySelector("input[type=hidden]");
-      input.name = name;
+      if (removeBtn) {
+        removeBtn.dataset.value = option.value;
+        removeBtn.setAttribute("aria-label", `Remove ${option.label}`);
+      }
+    }
+    const input = badge.querySelector("input[type=hidden]");
+    if (input) {
+      input.name = this.element.dataset.name ?? "";
       input.value = option.value;
-      this.tokensTarget.appendChild(fragment);
     }
-  }
-  removeTokenElement(value) {
-    const token = this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
-    token?.remove();
+    this.tokensTarget.appendChild(fragment);
   }
   renderOptions(options) {
-    this.listTarget.innerHTML = "";
     this.highlightedIndex = -1;
     if (options.length === 0) {
       this.renderEmpty();
       return;
     }
+    this.listTarget.replaceChildren();
     options.forEach((option, index) => {
       const li = document.createElement("li");
       li.id = `${this.optionIdPrefix}-${index}`;
       li.className = "midwest-autocomplete-option";
       li.setAttribute("role", "option");
-      li.setAttribute("aria-selected", this.selectedValues.has(option.value) ? "true" : "false");
+      li.setAttribute("aria-selected", this.isSelected(option.value) ? "true" : "false");
       li.dataset.value = option.value;
-      li.innerHTML = `
-        <span class="midwest-autocomplete-option-label">${this.escapeHtml(option.label)}</span>
-        ${option.support ? `<span class="midwest-autocomplete-option-support">${this.escapeHtml(option.support)}</span>` : ""}
-      `;
-      li.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        this.select(option);
-      });
+      const label = document.createElement("span");
+      label.className = "midwest-autocomplete-option-label";
+      label.textContent = option.label;
+      li.appendChild(label);
+      if (option.support) {
+        const support = document.createElement("span");
+        support.className = "midwest-autocomplete-option-support";
+        support.textContent = option.support;
+        li.appendChild(support);
+      }
       this.listTarget.appendChild(li);
     });
-    const availableCount = options.filter((o) => !this.selectedValues.has(o.value)).length;
+    const availableCount = options.filter((o) => !this.isSelected(o.value)).length;
     if (availableCount === 0) {
       this.renderEmpty("No more options");
       return;
     }
+    this.loading = false;
     this.announce(`${availableCount} option${availableCount === 1 ? "" : "s"} available`);
     this.showDropdown();
   }
   renderEmpty(message = "No results") {
-    this.listTarget.innerHTML = `<li class="midwest-autocomplete-empty" aria-hidden="true">${this.escapeHtml(message)}</li>`;
+    const li = document.createElement("li");
+    li.className = "midwest-autocomplete-empty";
+    li.setAttribute("aria-hidden", "true");
+    li.textContent = message;
+    this.listTarget.replaceChildren(li);
+    this.loading = false;
     this.announce(message);
     this.showDropdown();
   }
-  showLoading() {
-    this.listTarget.innerHTML = '<li class="midwest-autocomplete-loading" aria-hidden="true">Loading\u2026</li>';
-    this.announce("Loading");
-    this.showDropdown();
+  set loading(on) {
+    if (this.hasLoaderTarget)
+      this.loaderTarget.hidden = !on;
   }
   showDropdown() {
     if (!this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.showPopover();
-    this.inputTarget.setAttribute("aria-expanded", "true");
   }
   hideDropdown() {
     if (this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.hidePopover();
-    this.inputTarget.setAttribute("aria-expanded", "false");
-    this.inputTarget.removeAttribute("aria-activedescendant");
-    this.highlightedIndex = -1;
+  }
+  visibleOptions() {
+    const container = this.hasTurboListTarget ? this.turboListTarget : this.listTarget;
+    return container.querySelectorAll('.midwest-autocomplete-option:not([aria-selected="true"])');
   }
   syncHighlight(items) {
     items.forEach((item, i) => item.classList.toggle("is-highlighted", i === this.highlightedIndex));
     const active = items[this.highlightedIndex];
     active?.scrollIntoView({ block: "nearest" });
-    if (active) {
+    if (active?.id) {
       this.inputTarget.setAttribute("aria-activedescendant", active.id);
     } else {
       this.inputTarget.removeAttribute("aria-activedescendant");
@@ -4064,7 +4193,7 @@ class Autocomplete extends Controller {
   }
   pickItem(item) {
     const value = item.dataset.value ?? "";
-    const label = item.querySelector(".midwest-autocomplete-option-label")?.textContent?.trim() ?? value;
+    const label = item.dataset.label?.trim() || item.querySelector(".midwest-autocomplete-option-label")?.textContent?.trim() || value;
     const support = item.querySelector(".midwest-autocomplete-option-support")?.textContent?.trim();
     this.select({ value, label, support });
   }
@@ -4072,8 +4201,535 @@ class Autocomplete extends Controller {
     if (this.hasStatusTarget)
       this.statusTarget.textContent = message;
   }
-  escapeHtml(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+/*
+ * Color Thief v2.0
+ * by Lokesh Dhakar - http://www.lokeshdhakar.com
+ *
+ * Thanks
+ * ------
+ * Nick Rabinowitz - For creating quantize.js.
+ * John Schulz - For clean up and optimization. @JFSIII
+ * Nathan Spady - For adding drag and drop support to the demo page.
+ *
+ * License
+ * -------
+ * Copyright 2011, 2015 Lokesh Dhakar
+ * Released under the MIT license
+ * https://raw.githubusercontent.com/lokesh/color-thief/master/LICENSE
+ *
+ * @license
+ */
+const CanvasImage = function(image) {
+  this.canvas = document.createElement("canvas");
+  this.context = this.canvas.getContext("2d");
+  document.body.appendChild(this.canvas);
+  this.width = this.canvas.width = image.width;
+  this.height = this.canvas.height = image.height;
+  this.context.drawImage(image, 0, 0, this.width, this.height);
+};
+CanvasImage.prototype.clear = function() {
+  this.context.clearRect(0, 0, this.width, this.height);
+};
+CanvasImage.prototype.update = function(imageData) {
+  this.context.putImageData(imageData, 0, 0);
+};
+CanvasImage.prototype.getPixelCount = function() {
+  return this.width * this.height;
+};
+CanvasImage.prototype.getImageData = function() {
+  return this.context.getImageData(0, 0, this.width, this.height);
+};
+CanvasImage.prototype.removeCanvas = function() {
+  this.canvas.parentNode.removeChild(this.canvas);
+};
+const ColorThief = function() {
+};
+ColorThief.prototype.getColor = function(sourceImage2, quality) {
+  const palette = this.getPalette(sourceImage2, 5, quality);
+  const dominantColor = palette[0];
+  return dominantColor;
+};
+ColorThief.prototype.getPalette = function(sourceImage2, colorCount, quality) {
+  if (typeof colorCount === "undefined" || colorCount < 2 || colorCount > 256) {
+    colorCount = 10;
+  }
+  if (typeof quality === "undefined" || quality < 1) {
+    quality = 10;
+  }
+  const image = new CanvasImage(sourceImage2);
+  const imageData = image.getImageData();
+  const pixels = imageData.data;
+  const pixelCount = image.getPixelCount();
+  const pixelArray = [];
+  for (var i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
+    offset = i * 4;
+    r = pixels[offset + 0];
+    g = pixels[offset + 1];
+    b = pixels[offset + 2];
+    a = pixels[offset + 3];
+    if (a >= 125) {
+      if (!(r > 250 && g > 250 && b > 250)) {
+        pixelArray.push([r, g, b]);
+      }
+    }
+  }
+  const cmap = MMCQ.quantize(pixelArray, colorCount);
+  const palette = cmap ? cmap.palette() : null;
+  image.removeCanvas();
+  return palette;
+};
+ColorThief.prototype.getColorFromUrl = function(imageUrl, callback, quality) {
+  sourceImage = document.createElement("img");
+  const thief = this;
+  sourceImage.addEventListener("load", function() {
+    const palette = thief.getPalette(sourceImage, 5, quality);
+    const dominantColor = palette[0];
+    callback(dominantColor, imageUrl);
+  });
+  sourceImage.src = imageUrl;
+};
+ColorThief.prototype.getImageData = function(imageUrl, callback) {
+  xhr = new XMLHttpRequest();
+  xhr.open("GET", imageUrl, true);
+  xhr.responseType = "arraybuffer";
+  xhr.onload = function(e) {
+    if (this.status == 200) {
+      uInt8Array = new Uint8Array(this.response);
+      i = uInt8Array.length;
+      binaryString = new Array(i);
+      for (var i = 0; i < uInt8Array.length; i++) {
+        binaryString[i] = String.fromCharCode(uInt8Array[i]);
+      }
+      data = binaryString.join("");
+      base64 = window.btoa(data);
+      callback("data:image/png;base64," + base64);
+    }
+  };
+  xhr.send();
+};
+ColorThief.prototype.getColorAsync = function(imageUrl, callback, quality) {
+  const thief = this;
+  this.getImageData(imageUrl, function(imageData) {
+    sourceImage = document.createElement("img");
+    sourceImage.addEventListener("load", function() {
+      const palette = thief.getPalette(sourceImage, 5, quality);
+      const dominantColor = palette[0];
+      callback(dominantColor, this);
+    });
+    sourceImage.src = imageData;
+  });
+};
+/*!
+ * quantize.js Copyright 2008 Nick Rabinowitz.
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ * @license
+ */
+/*!
+ * Block below copied from Protovis: http://mbostock.github.com/protovis/
+ * Copyright 2010 Stanford Visualization Group
+ * Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php
+ * @license
+ */
+if (!pv) {
+  var pv = {
+    map: function(array, f) {
+      const o = {};
+      return f ? array.map(function(d, i) {
+        o.index = i;
+        return f.call(o, d);
+      }) : array.slice();
+    },
+    naturalOrder: function(a, b) {
+      return a < b ? -1 : a > b ? 1 : 0;
+    },
+    sum: function(array, f) {
+      const o = {};
+      return array.reduce(f ? function(p, d, i) {
+        o.index = i;
+        return p + f.call(o, d);
+      } : function(p, d) {
+        return p + d;
+      }, 0);
+    },
+    max: function(array, f) {
+      return Math.max.apply(null, f ? pv.map(array, f) : array);
+    }
+  };
+}
+var MMCQ = function() {
+  const sigbits = 5, rshift = 8 - sigbits, maxIterations = 1e3, fractByPopulations = 0.75;
+  function getColorIndex(r, g, b) {
+    return (r << 2 * sigbits) + (g << sigbits) + b;
+  }
+  function PQueue(comparator) {
+    let contents = [], sorted = false;
+    function sort() {
+      contents.sort(comparator);
+      sorted = true;
+    }
+    return {
+      push: function(o) {
+        contents.push(o);
+        sorted = false;
+      },
+      peek: function(index) {
+        if (!sorted)
+          sort();
+        if (index === void 0)
+          index = contents.length - 1;
+        return contents[index];
+      },
+      pop: function() {
+        if (!sorted)
+          sort();
+        return contents.pop();
+      },
+      size: function() {
+        return contents.length;
+      },
+      map: function(f) {
+        return contents.map(f);
+      },
+      debug: function() {
+        if (!sorted)
+          sort();
+        return contents;
+      }
+    };
+  }
+  function VBox(r1, r2, g1, g2, b1, b2, histo) {
+    const vbox = this;
+    vbox.r1 = r1;
+    vbox.r2 = r2;
+    vbox.g1 = g1;
+    vbox.g2 = g2;
+    vbox.b1 = b1;
+    vbox.b2 = b2;
+    vbox.histo = histo;
+  }
+  VBox.prototype = {
+    volume: function(force) {
+      const vbox = this;
+      if (!vbox._volume || force) {
+        vbox._volume = (vbox.r2 - vbox.r1 + 1) * (vbox.g2 - vbox.g1 + 1) * (vbox.b2 - vbox.b1 + 1);
+      }
+      return vbox._volume;
+    },
+    count: function(force) {
+      const vbox = this, histo = vbox.histo;
+      if (!vbox._count_set || force) {
+        let npix = 0, index, i, j, k;
+        for (i = vbox.r1; i <= vbox.r2; i++) {
+          for (j = vbox.g1; j <= vbox.g2; j++) {
+            for (k = vbox.b1; k <= vbox.b2; k++) {
+              index = getColorIndex(i, j, k);
+              npix += histo[index] || 0;
+            }
+          }
+        }
+        vbox._count = npix;
+        vbox._count_set = true;
+      }
+      return vbox._count;
+    },
+    copy: function() {
+      const vbox = this;
+      return new VBox(vbox.r1, vbox.r2, vbox.g1, vbox.g2, vbox.b1, vbox.b2, vbox.histo);
+    },
+    avg: function(force) {
+      const vbox = this, histo = vbox.histo;
+      if (!vbox._avg || force) {
+        let ntot = 0, mult = 1 << 8 - sigbits, rsum = 0, gsum = 0, bsum = 0, hval, i, j, k, histoindex;
+        for (i = vbox.r1; i <= vbox.r2; i++) {
+          for (j = vbox.g1; j <= vbox.g2; j++) {
+            for (k = vbox.b1; k <= vbox.b2; k++) {
+              histoindex = getColorIndex(i, j, k);
+              hval = histo[histoindex] || 0;
+              ntot += hval;
+              rsum += hval * (i + 0.5) * mult;
+              gsum += hval * (j + 0.5) * mult;
+              bsum += hval * (k + 0.5) * mult;
+            }
+          }
+        }
+        if (ntot) {
+          vbox._avg = [~~(rsum / ntot), ~~(gsum / ntot), ~~(bsum / ntot)];
+        } else {
+          vbox._avg = [
+            ~~(mult * (vbox.r1 + vbox.r2 + 1) / 2),
+            ~~(mult * (vbox.g1 + vbox.g2 + 1) / 2),
+            ~~(mult * (vbox.b1 + vbox.b2 + 1) / 2)
+          ];
+        }
+      }
+      return vbox._avg;
+    },
+    contains: function(pixel) {
+      const vbox = this, rval = pixel[0] >> rshift;
+      gval = pixel[1] >> rshift;
+      bval = pixel[2] >> rshift;
+      return rval >= vbox.r1 && rval <= vbox.r2 && gval >= vbox.g1 && gval <= vbox.g2 && bval >= vbox.b1 && bval <= vbox.b2;
+    }
+  };
+  function CMap() {
+    this.vboxes = new PQueue(function(a, b) {
+      return pv.naturalOrder(
+        a.vbox.count() * a.vbox.volume(),
+        b.vbox.count() * b.vbox.volume()
+      );
+    });
+  }
+  CMap.prototype = {
+    push: function(vbox) {
+      this.vboxes.push({
+        vbox,
+        color: vbox.avg()
+      });
+    },
+    palette: function() {
+      return this.vboxes.map(function(vb) {
+        return vb.color;
+      });
+    },
+    size: function() {
+      return this.vboxes.size();
+    },
+    map: function(color) {
+      const vboxes = this.vboxes;
+      for (let i = 0; i < vboxes.size(); i++) {
+        if (vboxes.peek(i).vbox.contains(color)) {
+          return vboxes.peek(i).color;
+        }
+      }
+      return this.nearest(color);
+    },
+    nearest: function(color) {
+      let vboxes = this.vboxes, d1, d2, pColor;
+      for (let i = 0; i < vboxes.size(); i++) {
+        d2 = Math.sqrt(
+          Math.pow(color[0] - vboxes.peek(i).color[0], 2) + Math.pow(color[1] - vboxes.peek(i).color[1], 2) + Math.pow(color[2] - vboxes.peek(i).color[2], 2)
+        );
+        if (d2 < d1 || d1 === void 0) {
+          d1 = d2;
+          pColor = vboxes.peek(i).color;
+        }
+      }
+      return pColor;
+    },
+    forcebw: function() {
+      const vboxes = this.vboxes;
+      vboxes.sort(function(a, b) {
+        return pv.naturalOrder(pv.sum(a.color), pv.sum(b.color));
+      });
+      const lowest = vboxes[0].color;
+      if (lowest[0] < 5 && lowest[1] < 5 && lowest[2] < 5)
+        vboxes[0].color = [0, 0, 0];
+      const idx = vboxes.length - 1, highest = vboxes[idx].color;
+      if (highest[0] > 251 && highest[1] > 251 && highest[2] > 251)
+        vboxes[idx].color = [255, 255, 255];
+    }
+  };
+  function getHisto(pixels) {
+    let histosize = 1 << 3 * sigbits, histo = new Array(histosize), index, rval, gval2, bval2;
+    pixels.forEach(function(pixel) {
+      rval = pixel[0] >> rshift;
+      gval2 = pixel[1] >> rshift;
+      bval2 = pixel[2] >> rshift;
+      index = getColorIndex(rval, gval2, bval2);
+      histo[index] = (histo[index] || 0) + 1;
+    });
+    return histo;
+  }
+  function vboxFromPixels(pixels, histo) {
+    let rmin = 1e6, rmax = 0, gmin = 1e6, gmax = 0, bmin = 1e6, bmax = 0, rval, gval2, bval2;
+    pixels.forEach(function(pixel) {
+      rval = pixel[0] >> rshift;
+      gval2 = pixel[1] >> rshift;
+      bval2 = pixel[2] >> rshift;
+      if (rval < rmin)
+        rmin = rval;
+      else if (rval > rmax)
+        rmax = rval;
+      if (gval2 < gmin)
+        gmin = gval2;
+      else if (gval2 > gmax)
+        gmax = gval2;
+      if (bval2 < bmin)
+        bmin = bval2;
+      else if (bval2 > bmax)
+        bmax = bval2;
+    });
+    return new VBox(rmin, rmax, gmin, gmax, bmin, bmax, histo);
+  }
+  function medianCutApply(histo, vbox) {
+    if (!vbox.count())
+      return;
+    const rw = vbox.r2 - vbox.r1 + 1, gw = vbox.g2 - vbox.g1 + 1, bw = vbox.b2 - vbox.b1 + 1, maxw = pv.max([rw, gw, bw]);
+    if (vbox.count() == 1) {
+      return [vbox.copy()];
+    }
+    let total = 0, partialsum = [], lookaheadsum = [], i, j, k, sum, index;
+    if (maxw == rw) {
+      for (i = vbox.r1; i <= vbox.r2; i++) {
+        sum = 0;
+        for (j = vbox.g1; j <= vbox.g2; j++) {
+          for (k = vbox.b1; k <= vbox.b2; k++) {
+            index = getColorIndex(i, j, k);
+            sum += histo[index] || 0;
+          }
+        }
+        total += sum;
+        partialsum[i] = total;
+      }
+    } else if (maxw == gw) {
+      for (i = vbox.g1; i <= vbox.g2; i++) {
+        sum = 0;
+        for (j = vbox.r1; j <= vbox.r2; j++) {
+          for (k = vbox.b1; k <= vbox.b2; k++) {
+            index = getColorIndex(j, i, k);
+            sum += histo[index] || 0;
+          }
+        }
+        total += sum;
+        partialsum[i] = total;
+      }
+    } else {
+      for (i = vbox.b1; i <= vbox.b2; i++) {
+        sum = 0;
+        for (j = vbox.r1; j <= vbox.r2; j++) {
+          for (k = vbox.g1; k <= vbox.g2; k++) {
+            index = getColorIndex(j, k, i);
+            sum += histo[index] || 0;
+          }
+        }
+        total += sum;
+        partialsum[i] = total;
+      }
+    }
+    partialsum.forEach(function(d, i2) {
+      lookaheadsum[i2] = total - d;
+    });
+    function doCut(color) {
+      let dim1 = color + "1", dim2 = color + "2", left, right, vbox1, vbox2, d2, count2 = 0;
+      for (i = vbox[dim1]; i <= vbox[dim2]; i++) {
+        if (partialsum[i] > total / 2) {
+          vbox1 = vbox.copy();
+          vbox2 = vbox.copy();
+          left = i - vbox[dim1];
+          right = vbox[dim2] - i;
+          if (left <= right)
+            d2 = Math.min(vbox[dim2] - 1, ~~(i + right / 2));
+          else
+            d2 = Math.max(vbox[dim1], ~~(i - 1 - left / 2));
+          while (!partialsum[d2])
+            d2++;
+          count2 = lookaheadsum[d2];
+          while (!count2 && partialsum[d2 - 1])
+            count2 = lookaheadsum[--d2];
+          vbox1[dim2] = d2;
+          vbox2[dim1] = vbox1[dim2] + 1;
+          return [vbox1, vbox2];
+        }
+      }
+    }
+    return maxw == rw ? doCut("r") : maxw == gw ? doCut("g") : doCut("b");
+  }
+  function quantize(pixels, maxcolors) {
+    if (!pixels.length || maxcolors < 2 || maxcolors > 256) {
+      return false;
+    }
+    const histo = getHisto(pixels);
+    histo.forEach(function() {
+    });
+    const vbox = vboxFromPixels(pixels, histo), pq = new PQueue(function(a, b) {
+      return pv.naturalOrder(a.count(), b.count());
+    });
+    pq.push(vbox);
+    function iter(lh, target) {
+      let ncolors = 1, niters = 0, vbox2;
+      while (niters < maxIterations) {
+        vbox2 = lh.pop();
+        if (!vbox2.count()) {
+          lh.push(vbox2);
+          niters++;
+          continue;
+        }
+        const vboxes = medianCutApply(histo, vbox2), vbox1 = vboxes[0], vbox22 = vboxes[1];
+        if (!vbox1) {
+          return;
+        }
+        lh.push(vbox1);
+        if (vbox22) {
+          lh.push(vbox22);
+          ncolors++;
+        }
+        if (ncolors >= target)
+          return;
+        if (niters++ > maxIterations) {
+          return;
+        }
+      }
+    }
+    iter(pq, fractByPopulations * maxcolors);
+    const pq2 = new PQueue(function(a, b) {
+      return pv.naturalOrder(a.count() * a.volume(), b.count() * b.volume());
+    });
+    while (pq.size()) {
+      pq2.push(pq.pop());
+    }
+    iter(pq2, maxcolors - pq2.size());
+    const cmap = new CMap();
+    while (pq2.size()) {
+      cmap.push(pq2.pop());
+    }
+    return cmap;
+  }
+  return {
+    quantize
+  };
+}();
+
+class Image extends Controller {
+  static targets = ["dialog"];
+  static values = { poster: String };
+  connect() {
+    this.extractColor();
+  }
+  extractColor() {
+    if (!this.hasDialogTarget)
+      return;
+    const mainImg = this.element.querySelector("img.midwest-image-main");
+    const colorSource = this.posterValue || mainImg?.src;
+    if (!colorSource)
+      return;
+    const sample = new window.Image(80, 80);
+    sample.crossOrigin = "Anonymous";
+    sample.addEventListener("load", () => {
+      try {
+        const [r, g, b] = new ColorThief().getColor(sample);
+        this.dialogTarget.style.setProperty("--image-dominant-color", `${r} ${g} ${b}`);
+      } catch {
+      }
+    });
+    sample.src = colorSource;
+  }
+  zoom() {
+    if (this.hasDialogTarget) {
+      this.dialogTarget.showModal();
+    }
+  }
+  close() {
+    if (this.hasDialogTarget) {
+      this.dialogTarget.close();
+    }
+  }
+  // Close when clicking the backdrop (outside the dialog content).
+  backdropClose(event) {
+    if (event.target === this.dialogTarget) {
+      this.dialogTarget.close();
+    }
   }
 }
 
@@ -4098,6 +4754,7 @@ function registerMidwestControllers(application) {
   application.register("midwest-range", Range);
   application.register("midwest-rating", Rating);
   application.register("midwest-autocomplete", Autocomplete);
+  application.register("midwest-image", Image);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };