@unabridged/midwest 0.23.4 → 0.24.3

package/app/assets/javascript/midwest.js

@@ -2557,7 +2557,6 @@ class Dropdown extends Controller {
     supported: { type: Boolean, default: true },
     align: { type: String, default: "right" }
   };
-  observer = new IntersectionObserver(this.computedCB.bind(this), { threshold: 1 });
   cleanup;
   connect() {
     this.supportedValue = CSS.supports("anchor-name: --myanchor");
@@ -2623,11 +2622,6 @@ class Dropdown extends Controller {
       (item) => item.closest('[data-controller~="midwest-dropdown"]') === this.element && getComputedStyle(item).display !== "none"
     );
   }
-  computedCB(entries) {
-    entries.forEach(async () => {
-      this.computation();
-    });
-  }
   closeIfOpen = () => {
     this.element.hidePopover();
   };
@@ -3012,7 +3006,7 @@ class Carousel extends Controller {
     }
     const atEnd = this._currentIndex >= this.slides.length - 1;
     if (this.loopValue && atEnd) {
-      this.slides[0]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      this.trackTarget.scrollTo({ left: 0, behavior: "smooth" });
     } else {
       this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
     }
@@ -3026,8 +3020,7 @@ class Carousel extends Controller {
     }
     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" });
+      this.trackTarget.scrollTo({ left: (this.slides.length - 1) * this.trackTarget.clientWidth, behavior: "smooth" });
     } else {
       this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: "smooth" });
     }
@@ -3039,8 +3032,7 @@ class Carousel extends Controller {
       this.activateSlide(index);
       return;
     }
-    const slide = this.slides[index];
-    slide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    this.trackTarget.scrollTo({ left: index * this.trackTarget.clientWidth, behavior: "smooth" });
   }
   // Unlocks the next slide and advances to it. Intended for wizard mode: wire
   // a "Continue" button inside a slide to this action so users progress
@@ -3144,8 +3136,7 @@ class Carousel extends Controller {
     }
     const atEnd = this._currentIndex >= this.slides.length - 1;
     if (atEnd) {
-      const firstSlide = this.slides[0];
-      firstSlide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      this.trackTarget.scrollTo({ left: 0, behavior: "smooth" });
     } else {
       this.next();
     }
@@ -4871,10 +4862,7 @@ class Notification extends Controller {
   connect() {
     this.container = this.element.closest("[popover]");
     this.container?.showPopover?.();
-    requestAnimationFrame(() => {
-      this.element.classList.add("visible");
-    });
-    const frame = this.element.parentElement;
+    const frame = this.element.closest("turbo-frame");
     if (frame) {
       this.observer = new MutationObserver(() => this.syncCountdown());
       this.observer.observe(frame, { childList: true });
@@ -4893,14 +4881,8 @@ class Notification extends Controller {
     }
   }
   close() {
-    if (!this.element.classList.contains("animated")) {
-      this.element.remove();
-      return;
-    }
     this.element.classList.add("closing");
-    setTimeout(() => {
-      this.element.remove();
-    }, 350);
+    setTimeout(() => (this.element.parentElement ?? this.element).remove(), 350);
   }
   syncCountdown() {
     const timerEl = this.element.querySelector('[data-controller~="midwest-countdown-timer"]');
@@ -4912,7 +4894,8 @@ class Notification extends Controller {
     );
     if (!timer)
       return;
-    const isTop = this.element === this.element.parentElement?.firstElementChild;
+    const wrapper = this.element.parentElement ?? this.element;
+    const isTop = wrapper === wrapper.parentElement?.firstElementChild;
     if (isTop) {
       timer.resume();
     } else {
@@ -4986,36 +4969,51 @@ class Table extends Controller {
   }
 }
 
+function observeViewport(element, options = {}) {
+  const { threshold = 0, rootMargin = "0px", once = false, onEnter, onLeave } = options;
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          onEnter?.(entry);
+          if (once)
+            observer.disconnect();
+        } else {
+          onLeave?.(entry);
+        }
+      }
+    },
+    { threshold, rootMargin }
+  );
+  observer.observe(element);
+  return () => observer.disconnect();
+}
+
 class LoadMore extends Controller {
   static values = {
     url: String,
     tbodyId: String
   };
-  observer = null;
+  teardown = null;
   loading = false;
   connect() {
     if (!this.urlValue)
       return;
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting)
-          this.load();
-      },
-      // Start fetching 300px before the sentinel enters the viewport so rows
-      // appear before the user actually reaches the bottom.
-      { rootMargin: "0px 0px 300px 0px" }
-    );
-    this.observer.observe(this.element);
+    this.teardown = observeViewport(this.element, {
+      rootMargin: "0px 0px 300px 0px",
+      once: true,
+      onEnter: () => this.load()
+    });
   }
   disconnect() {
-    this.observer?.disconnect();
-    this.observer = null;
+    this.teardown?.();
+    this.teardown = null;
   }
   async load() {
     if (this.loading)
       return;
     this.loading = true;
-    this.observer?.disconnect();
+    this.teardown?.();
     try {
       const response = await fetch(this.urlValue, {
         headers: {
@@ -5462,11 +5460,16 @@ class CommandPalette extends Controller {
   commandPlaceholder = "";
   messages = [];
   streamAbort = null;
+  // While true, new/streamed content pins the transcript to the bottom. Turns
+  // false when the user scrolls up to read history so we don't yank them down.
+  stickToBottom = true;
   connect() {
     this.allItems = this.itemsValue;
     this.commandPlaceholder = this.inputTarget.placeholder;
     document.addEventListener("keydown", this.handleGlobalKeydown);
     this.element.addEventListener("click", this.handleBackdropClick);
+    if (this.hasBodyTarget)
+      this.bodyTarget.addEventListener("scroll", this.handleTranscriptScroll, { passive: true });
     if (!this.turboFrameUrlValue) {
       this.renderItems(this.allItems);
     }
@@ -5474,6 +5477,8 @@ class CommandPalette extends Controller {
   disconnect() {
     document.removeEventListener("keydown", this.handleGlobalKeydown);
     this.element.removeEventListener("click", this.handleBackdropClick);
+    if (this.hasBodyTarget)
+      this.bodyTarget.removeEventListener("scroll", this.handleTranscriptScroll);
     if (this.fetchAbort)
       this.fetchAbort.abort();
     if (this.streamAbort)
@@ -5617,6 +5622,7 @@ class CommandPalette extends Controller {
       this.transcriptTarget.innerHTML = "";
     if (this.hasStartersTarget)
       this.startersTarget.hidden = false;
+    this.stickToBottom = true;
     this.setBusy(false);
     this.setMode("command");
   }
@@ -5656,6 +5662,7 @@ class CommandPalette extends Controller {
     const text = this.inputTarget.value.trim();
     if (!text)
       return;
+    this.stickToBottom = true;
     this.appendMessage("user", text);
     this.messages.push({ role: "user", content: text });
     this.inputTarget.value = "";
@@ -5727,16 +5734,31 @@ class CommandPalette extends Controller {
       return null;
     }
   }
-  // Agentic events: the server streams a tool "action row" and/or a client
-  // directive (navigate / run a palette command). Directives reuse the same
-  // execution path as manual selection.
+  // Agentic events: the server streams a tool "action row", a live preview
+  // ("embed"), and/or a client directive (navigate / run a palette command).
+  // Directives reuse the same execution path as manual selection.
   handleAgentEvent(event) {
     if (event.type === "tool") {
       this.appendActionRow(event);
+    } else if (event.type === "embed" && event.srcdoc) {
+      this.appendEmbed(event);
     } else if (event.type === "directive" && event.directive) {
       this.performDirective(event.directive);
+    } else if (event.type === "error") {
+      this.renderStreamError(event.message);
     }
   }
+  // A server-reported failure (e.g. provider billing/rate-limit error). Render
+  // it into the current assistant bubble instead of failing silently.
+  renderStreamError(message) {
+    const last = this.currentAssistantMessage();
+    if (!last)
+      return;
+    last.classList.add("is-error");
+    const bubble = last.querySelector(".command-palette-message-bubble");
+    if (bubble)
+      bubble.textContent = message || "Something went wrong. Please try again.";
+  }
   // Action rows live in the current assistant message's card footer.
   appendActionRow(event) {
     if (!this.hasActionTemplateTarget)
@@ -5745,19 +5767,42 @@ class CommandPalette extends Controller {
     if (!footer)
       return;
     const action = cloneTemplate(this.actionTemplateTarget);
-    const label = action.querySelector(".command-palette-action-label");
+    const label = action.querySelector(".value");
     if (label)
       label.textContent = event.label || "Action";
     footer.hidden = false;
     footer.appendChild(action);
     this.scrollTranscript();
   }
+  // A live preview streamed by an agentic tool (e.g. generate_iframe). The
+  // server sends only the inner document; the client owns the <iframe> element
+  // and hard-codes the sandbox (no allow-scripts) so injected markup is styled
+  // but never executed — the markdown text path can't render HTML at all.
+  appendEmbed(event) {
+    const message = this.currentAssistantMessage();
+    if (!message || !event.srcdoc)
+      return;
+    const body = message.querySelector(".command-palette-message-body") || message;
+    const frame = document.createElement("iframe");
+    frame.className = "command-palette-embed";
+    frame.setAttribute("sandbox", "allow-same-origin");
+    frame.setAttribute("loading", "lazy");
+    frame.title = event.title || "Preview";
+    frame.srcdoc = event.srcdoc;
+    if (event.height)
+      frame.style.height = `${event.height}px`;
+    body.appendChild(frame);
+    this.scrollTranscript();
+  }
   currentActionFooter() {
+    const last = this.currentAssistantMessage();
+    return last ? last.querySelector(".command-palette-action-footer") : null;
+  }
+  currentAssistantMessage() {
     const messages = this.transcriptTarget.querySelectorAll(
       ".command-palette-message.role-assistant"
     );
-    const last = messages[messages.length - 1];
-    return last ? last.querySelector(".command-palette-action-footer") : null;
+    return messages[messages.length - 1] || null;
   }
   performDirective(directive) {
     if (directive.url) {
@@ -5797,10 +5842,21 @@ class CommandPalette extends Controller {
     if (this.hasTranscriptTarget)
       this.transcriptTarget.setAttribute("aria-busy", String(busy));
   }
+  // The body is the scrollable region; the transcript itself does not scroll.
   scrollTranscript() {
-    if (this.hasTranscriptTarget)
-      this.transcriptTarget.scrollTop = this.transcriptTarget.scrollHeight;
+    if (this.hasBodyTarget && this.stickToBottom) {
+      this.bodyTarget.scrollTop = this.bodyTarget.scrollHeight;
+    }
   }
+  // Track whether the user is anchored to the bottom. Once they scroll up to
+  // read earlier messages we stop auto-scrolling; returning to the bottom
+  // re-arms it so streamed text keeps the latest content on screen.
+  handleTranscriptScroll = () => {
+    if (!this.hasBodyTarget)
+      return;
+    const { scrollHeight, scrollTop, clientHeight } = this.bodyTarget;
+    this.stickToBottom = scrollHeight - scrollTop - clientHeight < 24;
+  };
   appendMessage(role, text) {
     const li = cloneTemplate(this.messageTemplateTarget);
     li.classList.add(`role-${role}`);
@@ -6889,35 +6945,29 @@ class ViewportObserver extends Controller {
     once: { type: Boolean, default: false },
     visibleClass: { type: String, default: "" }
   };
-  observer = null;
+  teardown = null;
   connect() {
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries)
-          this.handle(entry);
+    this.teardown = observeViewport(this.element, {
+      threshold: this.thresholdValue,
+      rootMargin: this.rootMarginValue,
+      once: this.onceValue,
+      onEnter: (entry) => {
+        this.element.setAttribute("data-intersecting", "true");
+        if (this.visibleClassValue)
+          this.element.classList.add(this.visibleClassValue);
+        this.dispatch("enter", { detail: { entry }, bubbles: true });
       },
-      { threshold: this.thresholdValue, rootMargin: this.rootMarginValue }
-    );
-    this.observer.observe(this.element);
+      onLeave: (entry) => {
+        this.element.setAttribute("data-intersecting", "false");
+        if (this.visibleClassValue)
+          this.element.classList.remove(this.visibleClassValue);
+        this.dispatch("leave", { detail: { entry }, bubbles: true });
+      }
+    });
   }
   disconnect() {
-    this.observer?.disconnect();
-    this.observer = null;
-  }
-  handle(entry) {
-    if (entry.isIntersecting) {
-      this.element.setAttribute("data-intersecting", "true");
-      if (this.visibleClassValue)
-        this.element.classList.add(this.visibleClassValue);
-      this.dispatch("enter", { detail: { entry }, bubbles: true });
-      if (this.onceValue)
-        this.disconnect();
-    } else {
-      this.element.setAttribute("data-intersecting", "false");
-      if (this.visibleClassValue)
-        this.element.classList.remove(this.visibleClassValue);
-      this.dispatch("leave", { detail: { entry }, bubbles: true });
-    }
+    this.teardown?.();
+    this.teardown = null;
   }
 }
 
@@ -7307,6 +7357,541 @@ class ThemeSwitch extends Controller {
   }
 }
 
+const FRICTION = 0.92;
+const MIN_VELOCITY = 0.05;
+const KEY_STEP_FRACTION = 0.12;
+class Panorama extends Controller {
+  static targets = ["viewport", "stage", "media", "status", "hint", "reset"];
+  static values = {
+    wrap: { type: Boolean, default: false },
+    autoRotate: { type: Number, default: 0 },
+    start: { type: Number, default: 0 }
+  };
+  offset = 0;
+  // current translateX, always <= 0
+  mediaWidth = 0;
+  // rendered width of a single media copy
+  viewportWidth = 0;
+  dragging = false;
+  pointerId = null;
+  lastX = 0;
+  lastMoveTime = 0;
+  velocity = 0;
+  inertiaRaf = null;
+  autoRaf = null;
+  lastAutoTime = 0;
+  clone = null;
+  resizeObserver = null;
+  interacted = false;
+  connect() {
+    this.viewportTarget.addEventListener("pointerdown", this.onPointerDown);
+    this.element.addEventListener("keydown", this.onKeydown);
+    this.element.addEventListener("pointerenter", this.pauseAuto);
+    this.element.addEventListener("pointerleave", this.resumeAuto);
+    this.element.addEventListener("focusin", this.pauseAuto);
+    this.element.addEventListener("focusout", this.resumeAuto);
+    this.resizeObserver = new ResizeObserver(() => this.measure());
+    this.resizeObserver.observe(this.viewportTarget);
+    this.whenMediaReady(() => {
+      this.setupWrap();
+      this.measure();
+      this.offset = this.startOffset();
+      this.apply();
+      this.startAuto();
+    });
+  }
+  disconnect() {
+    this.viewportTarget.removeEventListener("pointerdown", this.onPointerDown);
+    window.removeEventListener("pointermove", this.onPointerMove);
+    window.removeEventListener("pointerup", this.onPointerUp);
+    window.removeEventListener("pointercancel", this.onPointerUp);
+    this.element.removeEventListener("keydown", this.onKeydown);
+    this.element.removeEventListener("pointerenter", this.pauseAuto);
+    this.element.removeEventListener("pointerleave", this.resumeAuto);
+    this.element.removeEventListener("focusin", this.pauseAuto);
+    this.element.removeEventListener("focusout", this.resumeAuto);
+    this.resizeObserver?.disconnect();
+    this.stopInertia();
+    this.stopAuto();
+  }
+  // Recenters the view to its starting position (wired to the reset button).
+  reset() {
+    this.stopInertia();
+    this.markInteracted();
+    this.offset = this.startOffset();
+    this.apply();
+    this.announce("View reset");
+  }
+  // --- media readiness & measurement -----------------------------------------
+  whenMediaReady(cb) {
+    const media = this.mediaTarget;
+    if (media instanceof HTMLImageElement) {
+      if (media.complete && media.naturalWidth > 0) {
+        cb();
+        return;
+      }
+      media.addEventListener("load", cb, { once: true });
+      media.addEventListener("error", cb, { once: true });
+    } else {
+      if (media.readyState >= 1 && media.videoWidth > 0) {
+        cb();
+        return;
+      }
+      media.addEventListener("loadedmetadata", cb, { once: true });
+    }
+  }
+  measure() {
+    this.viewportWidth = this.viewportTarget.clientWidth;
+    const first = this.stageTarget.querySelector(".midwest-panorama-media");
+    this.mediaWidth = first?.getBoundingClientRect().width ?? 0;
+    this.offset = this.normalize(this.offset);
+    this.apply();
+  }
+  // Duplicates the image once so the stage can loop seamlessly. Only images
+  // wrap — a live <video> can't be cheaply cloned/kept in sync.
+  setupWrap() {
+    if (!this.wrapValue || this.clone)
+      return;
+    if (!(this.mediaTarget instanceof HTMLImageElement))
+      return;
+    const clone = this.mediaTarget.cloneNode(true);
+    clone.setAttribute("aria-hidden", "true");
+    clone.setAttribute("alt", "");
+    clone.removeAttribute("data-midwest-panorama-target");
+    this.stageTarget.appendChild(clone);
+    this.clone = clone;
+  }
+  // --- geometry --------------------------------------------------------------
+  canWrap() {
+    return this.wrapValue && this.clone !== null && this.mediaWidth > 0;
+  }
+  // Constrains an offset: modulo for seamless wrap, hard clamp otherwise.
+  normalize(x) {
+    const w = this.mediaWidth;
+    if (this.canWrap()) {
+      if (w <= 0)
+        return 0;
+      let n = x % w;
+      if (n > 0)
+        n -= w;
+      return n;
+    }
+    const min = Math.min(0, this.viewportWidth - w);
+    return Math.max(min, Math.min(0, x));
+  }
+  startOffset() {
+    if (this.canWrap())
+      return this.normalize(-this.startValue * this.mediaWidth);
+    const min = Math.min(0, this.viewportWidth - this.mediaWidth);
+    return min * this.startValue;
+  }
+  apply() {
+    this.stageTarget.style.transform = `translate3d(${this.offset}px, 0, 0)`;
+  }
+  // --- pointer dragging ------------------------------------------------------
+  onPointerDown = (event) => {
+    if (event.button !== 0)
+      return;
+    this.dragging = true;
+    this.pointerId = event.pointerId;
+    this.lastX = event.clientX;
+    this.lastMoveTime = performance.now();
+    this.velocity = 0;
+    this.stopInertia();
+    this.pauseAuto();
+    this.markInteracted();
+    this.element.classList.add("is-dragging");
+    this.viewportTarget.setPointerCapture(event.pointerId);
+    window.addEventListener("pointermove", this.onPointerMove);
+    window.addEventListener("pointerup", this.onPointerUp);
+    window.addEventListener("pointercancel", this.onPointerUp);
+  };
+  onPointerMove = (event) => {
+    if (!this.dragging)
+      return;
+    const dx = event.clientX - this.lastX;
+    const now = performance.now();
+    const dt = now - this.lastMoveTime;
+    if (dt > 0)
+      this.velocity = dx / dt * 16;
+    this.lastX = event.clientX;
+    this.lastMoveTime = now;
+    this.offset = this.normalize(this.offset + dx);
+    this.apply();
+  };
+  onPointerUp = () => {
+    if (!this.dragging)
+      return;
+    this.dragging = false;
+    this.element.classList.remove("is-dragging");
+    if (this.pointerId !== null) {
+      try {
+        this.viewportTarget.releasePointerCapture(this.pointerId);
+      } catch {
+      }
+    }
+    this.pointerId = null;
+    window.removeEventListener("pointermove", this.onPointerMove);
+    window.removeEventListener("pointerup", this.onPointerUp);
+    window.removeEventListener("pointercancel", this.onPointerUp);
+    this.startInertia();
+  };
+  startInertia() {
+    if (Math.abs(this.velocity) < MIN_VELOCITY) {
+      this.resumeAuto();
+      return;
+    }
+    const step = () => {
+      this.offset = this.normalize(this.offset + this.velocity);
+      this.apply();
+      this.velocity *= FRICTION;
+      if (!this.canWrap()) {
+        const min = Math.min(0, this.viewportWidth - this.mediaWidth);
+        if (this.offset <= min || this.offset >= 0)
+          this.velocity = 0;
+      }
+      if (Math.abs(this.velocity) < MIN_VELOCITY) {
+        this.inertiaRaf = null;
+        this.resumeAuto();
+        return;
+      }
+      this.inertiaRaf = requestAnimationFrame(step);
+    };
+    this.inertiaRaf = requestAnimationFrame(step);
+  }
+  stopInertia() {
+    if (this.inertiaRaf !== null) {
+      cancelAnimationFrame(this.inertiaRaf);
+      this.inertiaRaf = null;
+    }
+  }
+  // --- keyboard --------------------------------------------------------------
+  onKeydown = (event) => {
+    const step = this.viewportWidth * KEY_STEP_FRACTION;
+    let handled = true;
+    switch (event.key) {
+      case "ArrowLeft":
+        this.offset = this.normalize(this.offset + step);
+        break;
+      case "ArrowRight":
+        this.offset = this.normalize(this.offset - step);
+        break;
+      case "Home":
+        this.offset = this.startOffset();
+        break;
+      default:
+        handled = false;
+    }
+    if (!handled)
+      return;
+    event.preventDefault();
+    this.stopInertia();
+    this.pauseAuto();
+    this.markInteracted();
+    this.apply();
+    this.announce();
+  };
+  // --- auto-rotate -----------------------------------------------------------
+  startAuto() {
+    if (this.autoRotateValue <= 0 || this.autoRaf !== null || this.dragging)
+      return;
+    if (this.prefersReducedMotion())
+      return;
+    this.lastAutoTime = performance.now();
+    const step = (now) => {
+      const dt = (now - this.lastAutoTime) / 1e3;
+      this.lastAutoTime = now;
+      this.offset = this.normalize(this.offset - this.autoRotateValue * dt);
+      this.apply();
+      this.autoRaf = requestAnimationFrame(step);
+    };
+    this.autoRaf = requestAnimationFrame(step);
+  }
+  stopAuto() {
+    if (this.autoRaf !== null) {
+      cancelAnimationFrame(this.autoRaf);
+      this.autoRaf = null;
+    }
+  }
+  pauseAuto = () => {
+    this.stopAuto();
+  };
+  resumeAuto = () => {
+    if (this.dragging)
+      return;
+    this.startAuto();
+  };
+  // --- helpers ---------------------------------------------------------------
+  markInteracted() {
+    if (this.interacted)
+      return;
+    this.interacted = true;
+    this.element.classList.add("has-interacted");
+  }
+  announce(message) {
+    if (!this.hasStatusTarget)
+      return;
+    this.statusTarget.textContent = message ?? `Viewing ${this.percent()}%`;
+  }
+  percent() {
+    const w = this.mediaWidth;
+    if (w <= 0)
+      return 0;
+    if (this.canWrap()) {
+      const n = (-this.offset % w + w) % w;
+      return Math.round(n / w * 100);
+    }
+    const min = Math.min(0, this.viewportWidth - w);
+    return min === 0 ? 0 : Math.round(this.offset / min * 100);
+  }
+  prefersReducedMotion() {
+    return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  }
+}
+
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+class Playlist extends Controller {
+  static targets = [
+    "audio",
+    "audioSource",
+    "playIcon",
+    "pauseIcon",
+    "trackTitle",
+    "trackArtist",
+    "artworkContainer",
+    "placeholderIcon",
+    "progressBar",
+    "currentTime",
+    "totalTime",
+    "songList",
+    "details"
+  ];
+  static values = {
+    playlistName: { type: String, default: "Playlist" },
+    autoplay: { type: Boolean, default: false },
+    view: { type: String, default: "playlist" },
+    playlistVisible: { type: Boolean, default: true },
+    artwork: { type: Boolean, default: false }
+  };
+  currentIndex = 0;
+  songElements = [];
+  connect() {
+    this.songElements = Array.from(this.songListTarget.querySelectorAll(".midwest-song button"));
+    this.updatePlaylistVisibility();
+    this.audioTarget.addEventListener("timeupdate", this.handleTimeUpdate);
+    this.audioTarget.addEventListener("loadedmetadata", this.handleMetadataLoaded);
+    this.audioTarget.addEventListener("ended", this.handleEnded);
+    this.audioTarget.addEventListener("play", this.handlePlayEvent);
+    this.audioTarget.addEventListener("pause", this.handlePauseEvent);
+    this.element.addEventListener("keydown", this.handleKeydown);
+    if (this.autoplayValue && this.songElements.length > 0) {
+      this.loadSong(0);
+    }
+  }
+  disconnect() {
+    this.audioTarget.removeEventListener("timeupdate", this.handleTimeUpdate);
+    this.audioTarget.removeEventListener("loadedmetadata", this.handleMetadataLoaded);
+    this.audioTarget.removeEventListener("ended", this.handleEnded);
+    this.audioTarget.removeEventListener("play", this.handlePlayEvent);
+    this.audioTarget.removeEventListener("pause", this.handlePauseEvent);
+    this.element.removeEventListener("keydown", this.handleKeydown);
+  }
+  // Play/pause toggle
+  togglePlay() {
+    if (this.audioTarget.paused) {
+      if (this.audioSourceTarget.src) {
+        this.audioTarget.play();
+      } else if (this.songElements.length > 0) {
+        this.loadSong(0);
+      }
+    } else {
+      this.audioTarget.pause();
+    }
+  }
+  // Play the song whose button was clicked (wired from the song template)
+  playSong(event) {
+    const button = event.currentTarget;
+    const index = this.songElements.indexOf(button);
+    if (index === -1)
+      return;
+    if (index === this.currentIndex && this.audioSourceTarget.src) {
+      this.togglePlay();
+      return;
+    }
+    this.loadSong(index);
+  }
+  // Load and play a specific song by index
+  loadSong(index) {
+    const songButton = this.songElements[index];
+    if (!songButton)
+      return;
+    const songElement = songButton.closest(".midwest-song");
+    if (!songElement)
+      return;
+    const src = songElement.dataset.src;
+    const title = songElement.dataset.title || "Unknown";
+    const artist = songElement.dataset.artist || "Unknown";
+    const picture = songElement.dataset.picture;
+    if (!src)
+      return;
+    this.audioSourceTarget.src = src;
+    this.audioTarget.load();
+    this.trackTitleTarget.textContent = title;
+    this.trackArtistTarget.textContent = artist;
+    if (picture) {
+      const img = document.createElement("img");
+      img.src = picture;
+      img.alt = `Album art for ${title}`;
+      img.className = "midwest-playlist__artwork-image";
+      const existingImg = this.artworkContainerTarget.querySelector(".midwest-playlist__artwork-image");
+      if (existingImg) {
+        existingImg.replaceWith(img);
+      } else {
+        this.artworkContainerTarget.appendChild(img);
+      }
+      this.placeholderIconTarget.classList.add("hidden");
+    } else {
+      this.placeholderIconTarget.classList.remove("hidden");
+    }
+    this.songElements.forEach((btn, i) => {
+      const song = btn.closest(".midwest-song");
+      if (i === index) {
+        song.classList.add("is-playing");
+      } else {
+        song.classList.remove("is-playing");
+      }
+    });
+    this.currentIndex = index;
+    this.audioTarget.play().catch(() => {
+    });
+  }
+  // Play next song
+  next() {
+    const nextIndex = (this.currentIndex + 1) % this.songElements.length;
+    this.loadSong(nextIndex);
+  }
+  // Play previous song
+  previous() {
+    const prevIndex = this.currentIndex === 0 ? this.songElements.length - 1 : this.currentIndex - 1;
+    this.loadSong(prevIndex);
+  }
+  // Seek to position in track
+  seek(event) {
+    const rect = this.progressBarTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const percentage = Math.max(0, Math.min(1, x / rect.width));
+    if (this.audioTarget.duration) {
+      this.audioTarget.currentTime = percentage * this.audioTarget.duration;
+    }
+  }
+  // Toggle playlist visibility
+  togglePlaylist() {
+    this.playlistVisibleValue = !this.playlistVisibleValue;
+    this.updatePlaylistVisibility();
+    this.savePlaylistVisibility();
+  }
+  // Toggle between playlist and art view
+  toggleView() {
+    this.viewValue = this.viewValue === "playlist" ? "art" : "playlist";
+    this.updateView();
+  }
+  // Private: Handle time update for progress bar
+  handleTimeUpdate = () => {
+    const { currentTime, duration } = this.audioTarget;
+    if (duration) {
+      const percentage = currentTime / duration * 100;
+      this.progressBarTarget.value = percentage;
+      this.currentTimeTarget.textContent = formatTime(currentTime);
+      this.totalTimeTarget.textContent = formatTime(duration);
+    }
+  };
+  // Private: Handle metadata loaded
+  handleMetadataLoaded = () => {
+    const { duration } = this.audioTarget;
+    if (duration) {
+      this.totalTimeTarget.textContent = formatTime(duration);
+    }
+  };
+  // Private: advance to the next track when the current one finishes
+  handleEnded = () => {
+    this.next();
+  };
+  // Private: reflect the <audio> playing state in the UI
+  handlePlayEvent = () => {
+    this.playIconTarget.hidden = true;
+    this.pauseIconTarget.hidden = false;
+    this.element.classList.add("is-playing");
+  };
+  handlePauseEvent = () => {
+    this.playIconTarget.hidden = false;
+    this.pauseIconTarget.hidden = true;
+    this.element.classList.remove("is-playing");
+  };
+  // Private: Handle keyboard controls
+  handleKeydown = (event) => {
+    if (event.key === " " || event.key === "k") {
+      event.preventDefault();
+      this.togglePlay();
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      this.previous();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      this.next();
+    }
+  };
+  // Private: Update playlist visibility
+  updatePlaylistVisibility() {
+    if (this.playlistVisibleValue) {
+      this.songListTarget.classList.remove("is-hidden");
+    } else {
+      this.songListTarget.classList.add("is-hidden");
+    }
+  }
+  // Private: Update view mode
+  updateView() {
+    this.element.setAttribute("view", this.viewValue);
+  }
+  // Private: Save playlist visibility to localStorage
+  savePlaylistVisibility() {
+    try {
+      localStorage.setItem(`playlist-${this.playlistNameValue}-visibility`, this.playlistVisibleValue.toString());
+    } catch {
+    }
+  }
+}
+
+class Motion extends Controller {
+  static values = {
+    threshold: { type: Number, default: 0.15 },
+    once: { type: Boolean, default: true }
+  };
+  teardown = null;
+  connect() {
+    this.teardown = observeViewport(this.element, {
+      threshold: this.thresholdValue,
+      once: this.onceValue,
+      onEnter: () => this.reveal(),
+      onLeave: this.onceValue ? void 0 : () => this.reset()
+    });
+  }
+  disconnect() {
+    this.teardown?.();
+    this.teardown = null;
+  }
+  reveal() {
+    this.element.setAttribute("data-motion-visible", "");
+    this.dispatch("reveal", { bubbles: true });
+  }
+  reset() {
+    this.element.removeAttribute("data-motion-visible");
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -7346,6 +7931,9 @@ function registerMidwestControllers(application) {
   application.register("midwest-focus-trap", FocusTrap);
   application.register("midwest-onboarding", Onboarding);
   application.register("midwest-theme-switch", ThemeSwitch);
+  application.register("midwest-panorama", Panorama);
+  application.register("midwest-playlist", Playlist);
+  application.register("midwest-motion", Motion);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };