@unabridged/midwest 0.16.1 → 0.18.0

package/dist/javascript/midwest.js

@@ -549,13 +549,16 @@ class Banner extends Controller {
 }
 
 class Input extends Controller {
-  static targets = ["input", "counter"];
+  static targets = ["input", "counter", "capsLockWarning"];
   updateClearButton = null;
   updateCounter = null;
+  updateCapsLock = null;
+  hideCapsLock = null;
   connect() {
     this.applyColor();
     this.applySearchClear();
     this.applyCounter();
+    this.applyPassword();
   }
   disconnect() {
     if (this.updateClearButton) {
@@ -566,6 +569,38 @@ class Input extends Controller {
       this.inputTarget.removeEventListener("input", this.updateCounter);
       this.updateCounter = null;
     }
+    if (this.updateCapsLock) {
+      this.inputTarget.removeEventListener("keydown", this.updateCapsLock);
+      this.inputTarget.removeEventListener("keyup", this.updateCapsLock);
+      this.inputTarget.removeEventListener("mousedown", this.updateCapsLock);
+      this.updateCapsLock = null;
+    }
+    if (this.hideCapsLock) {
+      this.inputTarget.removeEventListener("blur", this.hideCapsLock);
+      this.hideCapsLock = null;
+    }
+  }
+  increment() {
+    const input = this.inputTarget;
+    const step = parseFloat(input.step) || 1;
+    const max = input.max !== "" ? parseFloat(input.max) : Infinity;
+    const newValue = (parseFloat(input.value) || 0) + step;
+    if (newValue <= max) {
+      input.value = String(newValue);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+  }
+  decrement() {
+    const input = this.inputTarget;
+    const step = parseFloat(input.step) || 1;
+    const min = input.min !== "" ? parseFloat(input.min) : -Infinity;
+    const newValue = (parseFloat(input.value) || 0) - step;
+    if (newValue >= min) {
+      input.value = String(newValue);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
   }
   applyColor() {
     if (this.inputTarget.type !== "color") {
@@ -584,6 +619,20 @@ class Input extends Controller {
     };
     this.inputTarget.addEventListener("input", this.updateCounter);
   }
+  applyPassword() {
+    if (!this.hasCapsLockWarningTarget)
+      return;
+    this.updateCapsLock = (e) => {
+      this.capsLockWarningTarget.hidden = !e.getModifierState("CapsLock");
+    };
+    this.hideCapsLock = () => {
+      this.capsLockWarningTarget.hidden = true;
+    };
+    this.inputTarget.addEventListener("keydown", this.updateCapsLock);
+    this.inputTarget.addEventListener("keyup", this.updateCapsLock);
+    this.inputTarget.addEventListener("mousedown", this.updateCapsLock);
+    this.inputTarget.addEventListener("blur", this.hideCapsLock);
+  }
   applySearchClear() {
     if (this.inputTarget.type !== "search")
       return;
@@ -3111,16 +3160,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 +3184,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 +3293,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 +3330,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 +3511,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) => {
@@ -3466,11 +3541,13 @@ class FormLiveSummary extends Controller {
     this.form?.addEventListener("input", this.render);
     this.form?.addEventListener("change", this.render);
     this.form?.addEventListener("midwest-autocomplete:change", this.render);
+    this.form?.addEventListener("midwest-color-picker:update", this.render);
   }
   disconnect() {
     this.form?.removeEventListener("input", this.render);
     this.form?.removeEventListener("change", this.render);
     this.form?.removeEventListener("midwest-autocomplete:change", this.render);
+    this.form?.removeEventListener("midwest-color-picker:update", this.render);
   }
   get form() {
     return this.element.closest("form");
@@ -3488,15 +3565,18 @@ class FormLiveSummary extends Controller {
     }
     const dl = document.createElement("dl");
     dl.className = "midwest-form-live-summary-list";
-    fields.forEach(({ label, value }) => {
+    fields.forEach(({ label, value, swatchColor }) => {
       const dt = Object.assign(document.createElement("dt"), {
         className: "midwest-form-live-summary-term",
         textContent: label
       });
-      const dd = Object.assign(document.createElement("dd"), {
-        className: "midwest-form-live-summary-definition",
-        textContent: value || "\u2014"
-      });
+      const dd = document.createElement("dd");
+      dd.className = "midwest-form-live-summary-definition";
+      if (swatchColor !== void 0) {
+        dd.append(this.buildSwatch(swatchColor), value || "\u2014");
+      } else {
+        dd.textContent = value || "\u2014";
+      }
       dl.append(dt, dd);
     });
     this.listTarget.replaceChildren(dl);
@@ -3553,6 +3633,18 @@ class FormLiveSummary extends Controller {
         value: element.value
       });
     });
+    form.querySelectorAll('[data-midwest-color-picker-target="input"]').forEach((input) => {
+      if (this.element.contains(input))
+        return;
+      if (!input.name)
+        return;
+      const picker = input.closest(".midwest-color-picker");
+      const labelEl = picker?.querySelector(".midwest-form-group__top label") ?? this.form?.querySelector(`label[for="${CSS.escape(input.id)}"]`);
+      const label = labelEl?.textContent?.trim() || this.prettifyName(input.name.replace(/\[.*\]$/, ""));
+      const value = input.value;
+      const display = value.startsWith("#") ? value : value ? value.charAt(0).toUpperCase() + value.slice(1) : "\u2014";
+      fields.push({ label, value: display, swatchColor: value || void 0 });
+    });
     form.querySelectorAll(".midwest-autocomplete").forEach((ac) => {
       if (this.element.contains(ac))
         return;
@@ -3565,6 +3657,22 @@ class FormLiveSummary extends Controller {
     });
     return fields;
   }
+  // Builds a small inline colour swatch to display alongside a colour value.
+  // Hex values are applied as an inline background-color; named theme colours
+  // use a scoped theme-{color} class so the CSS variable cascade does the work.
+  // An empty/transparent value renders a diagonal-stripe placeholder.
+  buildSwatch(color) {
+    const swatch = document.createElement("span");
+    swatch.className = "midwest-form-live-summary-swatch";
+    if (color.startsWith("#")) {
+      swatch.style.backgroundColor = color;
+    } else if (color && color !== "transparent") {
+      swatch.classList.add(`theme-${color}`, "bg-theme-6");
+    } else {
+      swatch.classList.add("is-transparent");
+    }
+    return swatch;
+  }
   // Finds the label associated with a specific element via `for` attribute,
   // wrapping label, or falls back to a prettified version of the element name.
   labelFor(el) {
@@ -3630,16 +3738,37 @@ class CountdownTimer extends Controller {
     seconds: { type: Number, default: 5 }
   };
   timer = null;
+  remaining = 0;
+  startTime = 0;
   connect() {
-    this.timer = setTimeout(() => {
-      this.dispatch("complete", { bubbles: true });
-    }, this.secondsValue * 1e3);
+    this.remaining = this.secondsValue * 1e3;
+    this.resume();
   }
   disconnect() {
-    if (this.timer !== null) {
-      clearTimeout(this.timer);
+    this.pause();
+  }
+  pause() {
+    if (this.timer === null)
+      return;
+    clearTimeout(this.timer);
+    this.timer = null;
+    this.remaining = Math.max(0, this.remaining - (Date.now() - this.startTime));
+    this.setPlayState("paused");
+  }
+  resume() {
+    if (this.timer !== null)
+      return;
+    this.startTime = Date.now();
+    this.timer = setTimeout(() => {
       this.timer = null;
-    }
+      this.dispatch("complete", { bubbles: true });
+    }, this.remaining);
+    this.setPlayState("running");
+  }
+  setPlayState(state) {
+    const progress = this.element.querySelector(".midwest-countdown-timer__progress");
+    if (progress)
+      progress.style.animationPlayState = state;
   }
 }
 
@@ -3832,19 +3961,30 @@ class Rating extends Controller {
 }
 
 class Autocomplete extends Controller {
-  static targets = ["input", "dropdown", "list", "tokens", "multipleTokenTemplate", "singleTokenTemplate", "status", "turboList", "loader"];
+  static targets = [
+    "input",
+    "dropdown",
+    "list",
+    "tokens",
+    "multipleTokenTemplate",
+    "singleTokenTemplate",
+    "status",
+    "turboList",
+    "loader",
+    "freeFormHintList",
+    "freeFormHintValue"
+  ];
   static values = {
     options: { type: Array, default: [] },
     url: { type: String, default: "" },
     multiple: { type: Boolean, default: true },
-    turboFrameUrl: { type: String, default: "" }
+    turboFrameUrl: { type: String, default: "" },
+    freeForm: { type: Boolean, default: false }
   };
   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;
@@ -3879,9 +4019,6 @@ class Autocomplete extends Controller {
     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);
   }
@@ -3906,13 +4043,27 @@ class Autocomplete extends Controller {
     this.open();
   }
   open() {
+    if (!this.hasDropdownTarget)
+      return;
     if (this.dropdownTarget.matches(":popover-open"))
       return;
+    const query = this.inputTarget.value.trim();
+    if (this.freeFormValue && !this.hasListTarget && !this.hasTurboListTarget) {
+      if (query) {
+        this.updateFreeFormHint(query);
+        this.showDropdown();
+      }
+      return;
+    }
     clearTimeout(this.searchTimer);
-    this.resolve(this.inputTarget.value.trim());
+    this.resolve(query);
   }
   search() {
     const query = this.inputTarget.value.trim();
+    if (this.freeFormValue)
+      this.updateFreeFormHint(query);
+    if (!this.hasListTarget && !this.hasTurboListTarget)
+      return;
     if (!this.hasTurboListTarget && !this.urlValue) {
       this.renderOptions(this.filteredOptions(query));
       return;
@@ -3927,6 +4078,8 @@ class Autocomplete extends Controller {
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
+        if (!this.hasDropdownTarget)
+          break;
         if (!this.dropdownTarget.matches(":popover-open"))
           this.open();
         const items = this.visibleOptions();
@@ -3936,7 +4089,7 @@ class Autocomplete extends Controller {
       }
       case "ArrowUp": {
         event.preventDefault();
-        if (!this.dropdownTarget.matches(":popover-open"))
+        if (!this.hasDropdownTarget || !this.dropdownTarget.matches(":popover-open"))
           break;
         const items = this.visibleOptions();
         this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
@@ -3945,11 +4098,22 @@ 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]);
+        if (this.hasDropdownTarget && this.dropdownTarget.matches(":popover-open") && (this.hasListTarget || this.hasTurboListTarget)) {
+          const items = this.visibleOptions();
+          if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
+            this.pickItem(items[this.highlightedIndex]);
+            break;
+          }
+        }
+        if (this.freeFormValue) {
+          this.commitFreeFormTag();
+        }
+        break;
+      }
+      case ",": {
+        if (this.freeFormValue && this.inputTarget.value.trim()) {
+          event.preventDefault();
+          this.commitFreeFormTag();
         }
         break;
       }
@@ -3966,6 +4130,22 @@ class Autocomplete extends Controller {
         break;
     }
   }
+  // Splits pasted text on commas and newlines into individual tags (free-form mode only).
+  pasteTag(event) {
+    if (!this.freeFormValue)
+      return;
+    const text = event.clipboardData?.getData("text") ?? "";
+    const tags = text.split(/[\n,]+/).map((t) => t.trim()).filter(Boolean);
+    if (tags.length === 0)
+      return;
+    event.preventDefault();
+    tags.forEach((tag) => this.addFreeFormTag(tag));
+  }
+  // Mousedown on the "Hit Enter to add 'X'" hint row.
+  addFreeFormTagFromHint(event) {
+    event.preventDefault();
+    this.commitFreeFormTag();
+  }
   removeToken(event) {
     event.stopPropagation();
     const btn = event.currentTarget;
@@ -3973,9 +4153,6 @@ class Autocomplete extends Controller {
     if (value)
       this.deselect(value);
   }
-  // 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);
@@ -3987,7 +4164,6 @@ class Autocomplete extends Controller {
   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);
@@ -4016,9 +4192,6 @@ class Autocomplete extends Controller {
     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) => {
@@ -4054,6 +4227,7 @@ class Autocomplete extends Controller {
   select(option) {
     this.appendToken(option);
     this.hideDropdown();
+    this.hideFreeFormHint();
     this.inputTarget.value = "";
     this.inputTarget.focus();
     this.announce(`${option.label} selected`);
@@ -4125,11 +4299,19 @@ class Autocomplete extends Controller {
       this.renderEmpty("No more options");
       return;
     }
+    this.hideFreeFormHint();
     this.loading = false;
     this.announce(`${availableCount} option${availableCount === 1 ? "" : "s"} available`);
     this.showDropdown();
   }
   renderEmpty(message = "No results") {
+    if (this.freeFormValue && this.inputTarget.value.trim()) {
+      if (this.hasListTarget)
+        this.listTarget.replaceChildren();
+      this.loading = false;
+      this.updateFreeFormHint(this.inputTarget.value.trim());
+      return;
+    }
     const li = document.createElement("li");
     li.className = "midwest-autocomplete-empty";
     li.setAttribute("aria-hidden", "true");
@@ -4139,15 +4321,39 @@ class Autocomplete extends Controller {
     this.announce(message);
     this.showDropdown();
   }
+  // Shows or hides the "Hit Enter to add 'X'" hint based on the current query.
+  updateFreeFormHint(query) {
+    if (!this.hasFreeFormHintListTarget)
+      return;
+    if (query && !this.isSelected(query)) {
+      if (this.hasFreeFormHintValueTarget) {
+        this.freeFormHintValueTarget.textContent = `"${query}"`;
+      }
+      this.freeFormHintListTarget.hidden = false;
+      this.showDropdown();
+    } else {
+      this.hideFreeFormHint();
+      if (!this.hasListTarget && !this.hasTurboListTarget)
+        this.hideDropdown();
+    }
+  }
+  hideFreeFormHint() {
+    if (this.hasFreeFormHintListTarget)
+      this.freeFormHintListTarget.hidden = true;
+  }
   set loading(on) {
     if (this.hasLoaderTarget)
       this.loaderTarget.hidden = !on;
   }
   showDropdown() {
+    if (!this.hasDropdownTarget)
+      return;
     if (!this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.showPopover();
   }
   hideDropdown() {
+    if (!this.hasDropdownTarget)
+      return;
     if (this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.hidePopover();
   }
@@ -4171,12 +4377,734 @@ class Autocomplete extends Controller {
     const support = item.querySelector(".midwest-autocomplete-option-support")?.textContent?.trim();
     this.select({ value, label, support });
   }
+  commitFreeFormTag() {
+    const value = this.inputTarget.value.trim();
+    this.addFreeFormTag(value);
+  }
+  addFreeFormTag(value) {
+    if (!value)
+      return;
+    if (this.isSelected(value))
+      return;
+    this.select({ value, label: value });
+  }
   announce(message) {
     if (this.hasStatusTarget)
       this.statusTarget.textContent = message;
   }
 }
 
+/*
+ * 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();
+    }
+  }
+}
+
+class ColorPicker extends Controller {
+  static targets = ["input", "swatch", "customSwatch", "colorInput"];
+  onCustomColorChange = null;
+  get scaleTarget() {
+    return this.element.dataset.scaleTarget ?? "theme";
+  }
+  connect() {
+    if (this.hasColorInputTarget) {
+      this.onCustomColorChange = (e) => this.handleCustomColor(e);
+      this.colorInputTarget.addEventListener("input", this.onCustomColorChange);
+    }
+    if (this.hasInputTarget && this.inputTarget.value.startsWith("#")) {
+      this.restoreCustom(this.inputTarget.value);
+    }
+  }
+  disconnect() {
+    if (this.hasColorInputTarget && this.onCustomColorChange) {
+      this.colorInputTarget.removeEventListener("input", this.onCustomColorChange);
+      this.onCustomColorChange = null;
+    }
+  }
+  select(e) {
+    const button = e.currentTarget;
+    const color = button.dataset.color ?? "";
+    this.applySelection(color);
+    this.dispatch("update", { detail: { color, scaleTarget: this.scaleTarget } });
+  }
+  openCustom(e) {
+    e.preventDefault();
+    this.colorInputTarget.click();
+  }
+  handleCustomColor(e) {
+    const hex = e.target.value;
+    if (this.hasCustomSwatchTarget) {
+      this.customSwatchTarget.dataset.color = hex;
+      this.customSwatchTarget.style.background = hex;
+    }
+    const scale = this.generateScale(hex);
+    this.applyScale(scale);
+    this.applySelection(hex);
+    this.dispatch("update", { detail: { color: hex, scale, scaleTarget: this.scaleTarget } });
+  }
+  restoreCustom(hex) {
+    if (this.hasColorInputTarget) {
+      this.colorInputTarget.value = hex;
+    }
+    if (this.hasCustomSwatchTarget) {
+      this.customSwatchTarget.style.background = hex;
+    }
+    const scale = this.generateScale(hex);
+    this.applyScale(scale);
+  }
+  applySelection(color) {
+    if (this.hasInputTarget) {
+      this.inputTarget.value = color;
+    }
+    this.swatchTargets.forEach((swatch) => {
+      const isSelected = swatch.dataset.color === color;
+      swatch.classList.toggle("is-selected", isSelected);
+      swatch.setAttribute("aria-pressed", String(isSelected));
+    });
+  }
+  // Generates 13 RGB channel strings (space-separated, matching --{color}-{n}-channels format)
+  // from a hex color by fixing the hue/saturation and distributing lightness across the scale.
+  generateScale(hex) {
+    const [h, s] = this.hexToHsl(hex);
+    const lightnessSteps = [97, 90, 82, 74, 65, 56, 48, 40, 33, 26, 18, 10, 3];
+    return Object.fromEntries(
+      lightnessSteps.map((l, i) => {
+        const [r, g, b] = this.hslToRgb(h, s, l);
+        return [String(i), `${r} ${g} ${b}`];
+      })
+    );
+  }
+  applyScale(scale) {
+    const el = this.element;
+    Object.entries(scale).forEach(([step, channels]) => {
+      el.style.setProperty(`--${this.scaleTarget}-${step}-channels`, channels);
+    });
+  }
+  hexToHsl(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min)
+      return [0, 0, l * 100];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    const h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) / 6 : max === g ? ((b - r) / d + 2) / 6 : ((r - g) / d + 4) / 6;
+    return [h * 360, s * 100, l * 100];
+  }
+  hslToRgb(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    if (s === 0) {
+      const v = Math.round(l * 255);
+      return [v, v, v];
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    return [
+      Math.round(this.hue2rgb(p, q, h + 1 / 3) * 255),
+      Math.round(this.hue2rgb(p, q, h) * 255),
+      Math.round(this.hue2rgb(p, q, h - 1 / 3) * 255)
+    ];
+  }
+  hue2rgb(p, q, t) {
+    if (t < 0)
+      t += 1;
+    if (t > 1)
+      t -= 1;
+    if (t < 1 / 6)
+      return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+      return q;
+    if (t < 2 / 3)
+      return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+}
+
+class Notification extends Controller {
+  container = null;
+  observer = null;
+  connect() {
+    this.container = this.element.closest("[popover]");
+    this.container?.showPopover?.();
+    requestAnimationFrame(() => {
+      this.element.classList.add("visible");
+    });
+    const frame = this.element.parentElement;
+    if (frame) {
+      this.observer = new MutationObserver(() => this.syncCountdown());
+      this.observer.observe(frame, { childList: true });
+      setTimeout(() => this.syncCountdown());
+    }
+  }
+  disconnect() {
+    this.observer?.disconnect();
+    this.observer = null;
+    if (this.container) {
+      const frame = this.container.querySelector("turbo-frame");
+      if (frame?.children.length === 0 && this.container.matches(":popover-open")) {
+        this.container.hidePopover?.();
+      }
+      this.container = null;
+    }
+  }
+  close() {
+    if (!this.element.classList.contains("animated")) {
+      this.element.remove();
+      return;
+    }
+    this.element.classList.add("closing");
+    setTimeout(() => {
+      this.element.remove();
+    }, 350);
+  }
+  syncCountdown() {
+    const timerEl = this.element.querySelector('[data-controller~="midwest-countdown-timer"]');
+    if (!timerEl)
+      return;
+    const timer = this.application.getControllerForElementAndIdentifier(
+      timerEl,
+      "midwest-countdown-timer"
+    );
+    if (!timer)
+      return;
+    const isTop = this.element === this.element.parentElement?.firstElementChild;
+    if (isTop) {
+      timer.resume();
+    } else {
+      timer.pause();
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -4198,6 +5126,9 @@ function registerMidwestControllers(application) {
   application.register("midwest-range", Range);
   application.register("midwest-rating", Rating);
   application.register("midwest-autocomplete", Autocomplete);
+  application.register("midwest-image", Image);
+  application.register("midwest-color-picker", ColorPicker);
+  application.register("midwest-notification", Notification);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };