@unabridged/midwest 0.22.1 → 0.23.1

package/app/assets/javascript/midwest.js

@@ -2511,6 +2511,46 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+const NAVIGATION_KEYS = ["ArrowDown", "ArrowUp", "Home", "End", "Escape", "Tab"];
+function handleRovingFocusKeydown(event, items, options = {}) {
+  if (items.length === 0)
+    return false;
+  if (!NAVIGATION_KEYS.includes(event.key))
+    return false;
+  const { onEscape, onTab, loop = true } = options;
+  const current = items.findIndex((item) => item === document.activeElement);
+  switch (event.key) {
+    case "ArrowDown": {
+      event.preventDefault();
+      const next = current < items.length - 1 ? current + 1 : loop ? 0 : items.length - 1;
+      items[next].focus();
+      break;
+    }
+    case "ArrowUp": {
+      event.preventDefault();
+      const prev = current > 0 ? current - 1 : loop ? items.length - 1 : 0;
+      items[prev].focus();
+      break;
+    }
+    case "Home":
+      event.preventDefault();
+      items[0].focus();
+      break;
+    case "End":
+      event.preventDefault();
+      items[items.length - 1].focus();
+      break;
+    case "Escape":
+      event.preventDefault();
+      onEscape?.();
+      break;
+    case "Tab":
+      onTab?.();
+      break;
+  }
+  return true;
+}
+
 class Dropdown extends Controller {
   static values = {
     computed: { type: Boolean, default: false },
@@ -2564,45 +2604,15 @@ class Dropdown extends Controller {
     }
   };
   handleKeydown = (event) => {
-    const items = this.menuItems;
-    if (items.length === 0)
-      return;
-    if (!["ArrowDown", "ArrowUp", "Home", "End", "Escape", "Tab"].includes(event.key))
-      return;
-    event.stopPropagation();
-    const currentIndex = items.findIndex((item) => item === document.activeElement);
-    switch (event.key) {
-      case "ArrowDown": {
-        event.preventDefault();
-        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
-        items[next].focus();
-        break;
-      }
-      case "ArrowUp": {
-        event.preventDefault();
-        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
-        items[prev].focus();
-        break;
-      }
-      case "Home":
-        event.preventDefault();
-        items[0].focus();
-        break;
-      case "End":
-        event.preventDefault();
-        items[items.length - 1].focus();
-        break;
-      case "Escape":
-        event.preventDefault();
+    const handled = handleRovingFocusKeydown(event, this.menuItems, {
+      onEscape: () => {
         this.element.hidePopover();
         requestAnimationFrame(() => this.buttonEl?.focus());
-        break;
-      case "Tab":
-        this.element.hidePopover();
-        break;
-      default:
-        return;
-    }
+      },
+      onTab: () => this.element.hidePopover()
+    });
+    if (handled)
+      event.stopPropagation();
   };
   get menuItems() {
     return Array.from(
@@ -5364,20 +5374,97 @@ function cloneTemplate(template) {
   return el;
 }
 
+const PLACEHOLDER = "\uE000";
+function renderMarkdown(src) {
+  const blocks = [];
+  const withoutFences = src.replace(/```(\w*)\n?([\s\S]*?)```/g, (_match, _lang, code) => {
+    const body = escapeHtml(code.replace(/\n$/, ""));
+    blocks.push(`<pre class="command-palette-code"><code>${body}</code></pre>`);
+    return `${PLACEHOLDER}${blocks.length - 1}${PLACEHOLDER}`;
+  });
+  const lines = escapeHtml(withoutFences).split("\n");
+  const out = [];
+  let listOpen = false;
+  const closeList = () => {
+    if (listOpen) {
+      out.push("</ul>");
+      listOpen = false;
+    }
+  };
+  for (const line of lines) {
+    const placeholder = line.match(new RegExp(`^${PLACEHOLDER}(\\d+)${PLACEHOLDER}$`));
+    if (placeholder) {
+      closeList();
+      out.push(line);
+      continue;
+    }
+    const item = line.match(/^\s*[-*]\s+(.*)$/);
+    if (item) {
+      if (!listOpen) {
+        out.push("<ul>");
+        listOpen = true;
+      }
+      out.push(`<li>${inline(item[1])}</li>`);
+      continue;
+    }
+    closeList();
+    if (line.trim() !== "")
+      out.push(`<p>${inline(line)}</p>`);
+  }
+  closeList();
+  return out.join("\n").replace(new RegExp(`${PLACEHOLDER}(\\d+)${PLACEHOLDER}`, "g"), (_match, index) => blocks[Number(index)]);
+}
+function inline(text) {
+  return text.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(
+    /\[([^\]]+)\]\((https?:\/\/[^\s)]+|mailto:[^\s)]+)\)/g,
+    '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+  );
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
 class CommandPalette extends Controller {
-  static targets = ["input", "list", "empty", "body", "turboList", "itemTemplate", "groupTemplate"];
+  static targets = [
+    "input",
+    "list",
+    "empty",
+    "body",
+    "turboList",
+    "itemTemplate",
+    "groupTemplate",
+    "modes",
+    "chat",
+    "transcript",
+    "starters",
+    "messageTemplate",
+    "actionTemplate"
+  ];
   static values = {
     hotkey: { type: String, default: "k" },
     items: { type: Array, default: [] },
     src: { type: String, default: "" },
-    turboFrameUrl: { type: String, default: "" }
+    turboFrameUrl: { type: String, default: "" },
+    chatEnabled: { type: Boolean, default: false },
+    chatMode: { type: String, default: "proxy" },
+    chatTrigger: { type: String, default: "toggle" },
+    chatAgentic: { type: Boolean, default: true },
+    chatPlaceholder: { type: String, default: "Ask AI\u2026" },
+    chatEndpoint: { type: String, default: "" },
+    chatUrl: { type: String, default: "" },
+    chatModel: { type: String, default: "" }
   };
   highlightedIndex = -1;
   fetchAbort = null;
   searchTimer;
   allItems = [];
+  mode = "command";
+  commandPlaceholder = "";
+  messages = [];
+  streamAbort = null;
   connect() {
     this.allItems = this.itemsValue;
+    this.commandPlaceholder = this.inputTarget.placeholder;
     document.addEventListener("keydown", this.handleGlobalKeydown);
     this.element.addEventListener("click", this.handleBackdropClick);
     if (!this.turboFrameUrlValue) {
@@ -5389,6 +5476,8 @@ class CommandPalette extends Controller {
     this.element.removeEventListener("click", this.handleBackdropClick);
     if (this.fetchAbort)
       this.fetchAbort.abort();
+    if (this.streamAbort)
+      this.streamAbort.abort();
     if (this.searchTimer)
       clearTimeout(this.searchTimer);
   }
@@ -5422,6 +5511,8 @@ class CommandPalette extends Controller {
     this.element.showModal();
     this.inputTarget.value = "";
     this.highlightedIndex = -1;
+    if (this.chatEnabledValue)
+      this.resetChat();
     if (this.turboFrameUrlValue) {
       this.navigateFrame("");
     } else {
@@ -5435,6 +5526,8 @@ class CommandPalette extends Controller {
     this.element.close();
   }
   filter() {
+    if (this.mode === "chat")
+      return;
     const query = this.inputTarget.value.trim().toLowerCase();
     if (this.turboFrameUrlValue) {
       this.debouncedNavigateFrame(query);
@@ -5455,6 +5548,21 @@ class CommandPalette extends Controller {
     this.renderItems(filtered);
   }
   navigate(event) {
+    if (this.mode === "chat") {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        this.send();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        this.close();
+      }
+      return;
+    }
+    if (event.key === "Tab" && !event.shiftKey && this.chatEnabledValue && this.chatTriggerValue === "toggle" && this.inputTarget.value.trim() === "") {
+      event.preventDefault();
+      this.setMode("chat");
+      return;
+    }
     const items = this.visibleItems;
     switch (event.key) {
       case "ArrowDown":
@@ -5489,6 +5597,225 @@ class CommandPalette extends Controller {
       this.selectItem(items[index]);
     }
   }
+  // ── Chat mode ───────────────────────────────────────────────────────
+  switchMode(event) {
+    const mode = event.currentTarget.dataset.mode === "chat" ? "chat" : "command";
+    this.setMode(mode);
+    if (mode === "command")
+      this.filter();
+    this.inputTarget.focus();
+  }
+  useStarter(event) {
+    this.inputTarget.value = event.currentTarget.textContent?.trim() || "";
+    this.send();
+  }
+  resetChat() {
+    if (this.streamAbort)
+      this.streamAbort.abort();
+    this.messages = [];
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.innerHTML = "";
+    if (this.hasStartersTarget)
+      this.startersTarget.hidden = false;
+    this.setBusy(false);
+    this.setMode("command");
+  }
+  setMode(mode) {
+    if (!this.chatEnabledValue)
+      return;
+    this.mode = mode;
+    const chat = mode === "chat";
+    this.element.classList.toggle("chat-active", chat);
+    if (this.hasModesTarget) {
+      this.modesTarget.querySelectorAll(".command-palette-mode").forEach((el) => {
+        el.setAttribute("aria-pressed", String(el.dataset.mode === mode));
+      });
+    }
+    if (this.hasChatTarget)
+      this.chatTarget.hidden = !chat;
+    if (chat) {
+      this.emptyTarget.hidden = true;
+      if (this.hasListTarget)
+        this.listTarget.hidden = true;
+      if (this.hasTurboListTarget)
+        this.turboListTarget.hidden = true;
+      this.inputTarget.placeholder = this.chatPlaceholderValue;
+    } else {
+      this.inputTarget.placeholder = this.commandPlaceholder;
+      if (this.hasTurboListTarget)
+        this.turboListTarget.hidden = false;
+    }
+  }
+  stop() {
+    if (this.streamAbort)
+      this.streamAbort.abort();
+  }
+  send() {
+    if (this.streamAbort)
+      return;
+    const text = this.inputTarget.value.trim();
+    if (!text)
+      return;
+    this.appendMessage("user", text);
+    this.messages.push({ role: "user", content: text });
+    this.inputTarget.value = "";
+    if (this.hasStartersTarget)
+      this.startersTarget.hidden = true;
+    void this.streamReply();
+  }
+  async streamReply() {
+    const message = this.appendMessage("assistant", "");
+    const bubble = message.querySelector(".command-palette-message-bubble");
+    this.setBusy(true);
+    this.streamAbort = new AbortController();
+    let reply = "";
+    try {
+      const response = await fetch(this.chatRequestUrl(), {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "text/event-stream" },
+        body: JSON.stringify(this.chatRequestBody()),
+        signal: this.streamAbort.signal
+      });
+      if (!response.ok || !response.body)
+        throw new Error(`Chat request failed (${response.status})`);
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      for (; ; ) {
+        const { value, done } = await reader.read();
+        if (done)
+          break;
+        buffer += decoder.decode(value, { stream: true });
+        const events = buffer.split("\n\n");
+        buffer = events.pop() || "";
+        for (const event of events) {
+          const data = this.parseSseData(event);
+          if (!data)
+            continue;
+          const delta = data.choices?.[0]?.delta?.content;
+          if (delta) {
+            reply += delta;
+            bubble.innerHTML = renderMarkdown(reply);
+            this.scrollTranscript();
+          } else if (data.midwest) {
+            this.handleAgentEvent(data.midwest);
+          }
+        }
+      }
+      this.messages.push({ role: "assistant", content: reply });
+    } catch (error) {
+      if (error.name === "AbortError") {
+        if (reply)
+          this.messages.push({ role: "assistant", content: reply });
+      } else {
+        message.classList.add("is-error");
+        bubble.textContent = "Something went wrong. Please try again.";
+      }
+    } finally {
+      this.streamAbort = null;
+      this.setBusy(false);
+      this.scrollTranscript();
+    }
+  }
+  parseSseData(event) {
+    const data = event.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).trim()).join("");
+    if (!data || data === "[DONE]")
+      return null;
+    try {
+      return JSON.parse(data);
+    } catch {
+      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.
+  handleAgentEvent(event) {
+    if (event.type === "tool") {
+      this.appendActionRow(event);
+    } else if (event.type === "directive" && event.directive) {
+      this.performDirective(event.directive);
+    }
+  }
+  // Action rows live in the current assistant message's card footer.
+  appendActionRow(event) {
+    if (!this.hasActionTemplateTarget)
+      return;
+    const footer = this.currentActionFooter();
+    if (!footer)
+      return;
+    const action = cloneTemplate(this.actionTemplateTarget);
+    const label = action.querySelector(".command-palette-action-label");
+    if (label)
+      label.textContent = event.label || "Action";
+    footer.hidden = false;
+    footer.appendChild(action);
+    this.scrollTranscript();
+  }
+  currentActionFooter() {
+    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;
+  }
+  performDirective(directive) {
+    if (directive.url) {
+      this.visit(directive.url, directive.method);
+    } else if (directive.action) {
+      this.element.dispatchEvent(
+        new CustomEvent("midwest-command-palette:action", {
+          bubbles: true,
+          detail: { action: directive.action }
+        })
+      );
+    }
+  }
+  chatRequestUrl() {
+    return this.chatModeValue === "proxy" ? this.chatEndpointValue : this.chatUrlValue;
+  }
+  chatRequestBody() {
+    const body = { messages: this.messages, stream: true };
+    if (this.chatModeValue !== "proxy" && this.chatModelValue)
+      body.model = this.chatModelValue;
+    if (this.chatModeValue === "proxy" && this.chatAgenticValue) {
+      body.commands = this.allItems.map((item) => ({
+        label: item.label,
+        description: item.description,
+        url: item.url,
+        action: item.action,
+        method: item.method,
+        icon: item.icon
+      }));
+    }
+    return body;
+  }
+  setBusy(busy) {
+    this.element.classList.toggle("chat-busy", busy);
+    if (this.hasStopTarget)
+      this.stopTarget.hidden = !busy;
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.setAttribute("aria-busy", String(busy));
+  }
+  scrollTranscript() {
+    if (this.hasTranscriptTarget)
+      this.transcriptTarget.scrollTop = this.transcriptTarget.scrollHeight;
+  }
+  appendMessage(role, text) {
+    const li = cloneTemplate(this.messageTemplateTarget);
+    li.classList.add(`role-${role}`);
+    if (role === "user")
+      li.classList.add("is-end");
+    const roleEl = li.querySelector(".command-palette-message-role");
+    if (roleEl)
+      roleEl.textContent = role === "user" ? "You" : "Assistant";
+    const bubble = li.querySelector(".command-palette-message-bubble");
+    if (text)
+      bubble.textContent = text;
+    this.transcriptTarget.appendChild(li);
+    this.scrollTranscript();
+    return li;
+  }
   // ── Remote search ───────────────────────────────────────────────────
   fetchRemote(query) {
     if (this.fetchAbort)
@@ -6555,6 +6882,431 @@ class TimePicker extends Controller {
   }
 }
 
+class ViewportObserver extends Controller {
+  static values = {
+    threshold: { type: Number, default: 0 },
+    rootMargin: { type: String, default: "0px" },
+    once: { type: Boolean, default: false },
+    visibleClass: { type: String, default: "" }
+  };
+  observer = null;
+  connect() {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries)
+          this.handle(entry);
+      },
+      { threshold: this.thresholdValue, rootMargin: this.rootMarginValue }
+    );
+    this.observer.observe(this.element);
+  }
+  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 });
+    }
+  }
+}
+
+const FOCUSABLE$1 = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+class FocusTrap extends Controller {
+  static values = {
+    active: { type: Boolean, default: true },
+    returnFocus: { type: Boolean, default: true },
+    initialFocus: { type: String, default: "" }
+  };
+  engaged = false;
+  previousFocus = null;
+  // Fires on connect for the initial value and on every subsequent change,
+  // so it is the single entry point for engaging/releasing the trap.
+  activeValueChanged(active) {
+    if (active)
+      this.engage();
+    else
+      this.release();
+  }
+  disconnect() {
+    this.release();
+  }
+  engage() {
+    if (this.engaged)
+      return;
+    this.engaged = true;
+    this.previousFocus = document.activeElement;
+    this.element.addEventListener("keydown", this.handleKeydown);
+    requestAnimationFrame(() => {
+      if (this.engaged)
+        this.focusInitial();
+    });
+  }
+  release() {
+    if (!this.engaged)
+      return;
+    this.engaged = false;
+    this.element.removeEventListener("keydown", this.handleKeydown);
+    if (this.returnFocusValue)
+      this.previousFocus?.focus();
+    this.previousFocus = null;
+  }
+  focusInitial() {
+    const target = this.initialFocusValue ? this.element.querySelector(this.initialFocusValue) : this.focusable()[0];
+    target?.focus();
+  }
+  focusable() {
+    return Array.from(
+      this.element.querySelectorAll(FOCUSABLE$1)
+    ).filter((el) => !el.closest("[inert]"));
+  }
+  handleKeydown = (event) => {
+    if (event.key !== "Tab")
+      return;
+    const focusable = this.focusable();
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey) {
+      if (active === first || !this.element.contains(active)) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else if (active === last || !this.element.contains(active)) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+}
+
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+const GAP = 12;
+class Onboarding extends Controller {
+  static targets = ["step", "overlay", "card", "title", "body", "back", "next", "done", "arrow"];
+  static values = {
+    autoOpen: { type: Boolean, default: false },
+    confirm: { type: String, default: "" }
+  };
+  steps = [];
+  index = 0;
+  active = false;
+  previousFocus = null;
+  highlighted = null;
+  connect() {
+    this.steps = this.stepTargets.map((el) => ({
+      el,
+      name: el.dataset.name ?? "",
+      selector: el.dataset.selector ?? "",
+      position: el.dataset.position ?? "auto",
+      title: el.dataset.title ?? "",
+      nextText: el.dataset.nextText ?? "Next",
+      backText: el.dataset.backText ?? "Back",
+      completeText: el.dataset.completeText ?? "Done",
+      canClickTarget: el.dataset.canClickTarget === "true"
+    }));
+    window.addEventListener("midwest-onboarding:open", this.handleOpen);
+    if (this.autoOpenValue)
+      this.start();
+  }
+  disconnect() {
+    window.removeEventListener("midwest-onboarding:open", this.handleOpen);
+    this.teardown();
+  }
+  start() {
+    if (this.active || this.steps.length === 0)
+      return;
+    this.active = true;
+    this.previousFocus = document.activeElement;
+    this.overlayTarget.hidden = false;
+    this.cardTarget.hidden = false;
+    document.addEventListener("keydown", this.handleKeydown, true);
+    window.addEventListener("resize", this.reposition);
+    window.addEventListener("scroll", this.reposition, true);
+    this.dispatch("start", { bubbles: true });
+    this.render(0);
+  }
+  next() {
+    if (this.index < this.steps.length - 1)
+      this.render(this.index + 1);
+    else
+      this.complete();
+  }
+  back() {
+    if (this.index > 0)
+      this.render(this.index - 1);
+  }
+  // Jump to a step by its `name`.
+  show(name) {
+    const target = this.steps.findIndex((step) => step.name === name);
+    if (target >= 0) {
+      if (!this.active)
+        this.start();
+      this.render(target);
+    }
+  }
+  complete() {
+    if (!this.active)
+      return;
+    this.teardown();
+    this.dispatch("complete", { bubbles: true });
+  }
+  cancel() {
+    if (!this.active)
+      return;
+    if (this.confirmValue && !window.confirm(this.confirmValue))
+      return;
+    this.teardown();
+    this.dispatch("cancel", { bubbles: true });
+  }
+  render(index) {
+    this.index = index;
+    const step = this.steps[index];
+    this.clearHighlight();
+    this.titleTarget.textContent = step.title;
+    this.renderBody(step);
+    this.renderButtons(step, index);
+    const target = step.selector ? document.querySelector(step.selector) : null;
+    if (target) {
+      this.highlight(target, step.canClickTarget);
+      this.position(target, step.position);
+    } else {
+      this.center();
+    }
+    this.dispatch("show", { detail: { index, name: step.name }, bubbles: true });
+    this.focusCard();
+  }
+  renderBody(step) {
+    this.bodyTarget.replaceChildren();
+    const template = step.el.querySelector("template");
+    if (template)
+      this.bodyTarget.appendChild(template.content.cloneNode(true));
+  }
+  renderButtons(step, index) {
+    const isFirst = index === 0;
+    const isLast = index === this.steps.length - 1;
+    this.backTarget.textContent = step.backText;
+    this.backTarget.style.visibility = isFirst ? "hidden" : "";
+    this.nextTarget.textContent = step.nextText;
+    this.nextTarget.style.display = isLast ? "none" : "";
+    this.doneTarget.textContent = step.completeText;
+    this.doneTarget.style.display = isLast ? "" : "none";
+  }
+  highlight(target, canClickTarget) {
+    target.classList.add("midwest-onboarding-highlight");
+    target.classList.toggle("is-locked", !canClickTarget);
+    this.highlighted = target;
+    target.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+  clearHighlight() {
+    this.highlighted?.classList.remove("midwest-onboarding-highlight", "is-locked");
+    this.highlighted = null;
+  }
+  // Places the card against the target, choosing a side when `position` is auto.
+  position(target, position) {
+    const rect = target.getBoundingClientRect();
+    const card = this.cardTarget.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let placement = position;
+    if (placement === "auto") {
+      if (rect.bottom + card.height + GAP <= vh)
+        placement = "bottom";
+      else if (rect.top - card.height - GAP >= 0)
+        placement = "top";
+      else if (rect.right + card.width + GAP <= vw)
+        placement = "right";
+      else
+        placement = "left";
+    }
+    let top;
+    let left;
+    switch (placement) {
+      case "top":
+        top = rect.top - card.height - GAP;
+        left = rect.left + rect.width / 2 - card.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2 - card.height / 2;
+        left = rect.left - card.width - GAP;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2 - card.height / 2;
+        left = rect.right + GAP;
+        break;
+      default:
+        top = rect.bottom + GAP;
+        left = rect.left + rect.width / 2 - card.width / 2;
+        break;
+    }
+    left = Math.max(8, Math.min(left, vw - card.width - 8));
+    top = Math.max(8, Math.min(top, vh - card.height - 8));
+    this.cardTarget.style.top = `${top}px`;
+    this.cardTarget.style.left = `${left}px`;
+    this.cardTarget.dataset.placement = placement;
+    this.positionArrow(placement, rect, top, left);
+  }
+  // Nudges the arrow so it points at the target's center, not the card's.
+  positionArrow(placement, rect, top, left) {
+    const card = this.cardTarget.getBoundingClientRect();
+    const arrow = this.arrowTarget.style;
+    if (placement === "top" || placement === "bottom") {
+      const targetCenter = rect.left + rect.width / 2;
+      const offset = Math.max(12, Math.min(targetCenter - left, card.width - 12));
+      arrow.left = `${offset}px`;
+      arrow.top = "";
+    } else {
+      const targetCenter = rect.top + rect.height / 2;
+      const offset = Math.max(12, Math.min(targetCenter - top, card.height - 12));
+      arrow.top = `${offset}px`;
+      arrow.left = "";
+    }
+  }
+  center() {
+    const card = this.cardTarget.getBoundingClientRect();
+    this.cardTarget.style.top = `${Math.max(8, window.innerHeight / 2 - card.height / 2)}px`;
+    this.cardTarget.style.left = `${Math.max(8, window.innerWidth / 2 - card.width / 2)}px`;
+    this.cardTarget.dataset.placement = "center";
+  }
+  focusCard() {
+    requestAnimationFrame(() => {
+      if (this.active)
+        this.cardTarget.focus();
+    });
+  }
+  teardown() {
+    this.active = false;
+    this.clearHighlight();
+    this.overlayTarget.hidden = true;
+    this.cardTarget.hidden = true;
+    document.removeEventListener("keydown", this.handleKeydown, true);
+    window.removeEventListener("resize", this.reposition);
+    window.removeEventListener("scroll", this.reposition, true);
+    this.previousFocus?.focus();
+    this.previousFocus = null;
+  }
+  handleOpen = (event) => {
+    const detail = event.detail ?? {};
+    const id = String(detail.id ?? "").replace("#", "");
+    if (id === this.element.id)
+      this.start();
+  };
+  reposition = () => {
+    if (!this.active)
+      return;
+    const step = this.steps[this.index];
+    const target = step.selector ? document.querySelector(step.selector) : null;
+    if (target)
+      this.position(target, step.position);
+    else
+      this.center();
+  };
+  handleKeydown = (event) => {
+    if (!this.active)
+      return;
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        this.cancel();
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        this.next();
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        this.back();
+        break;
+      case "Tab":
+        this.trapTab(event);
+        break;
+    }
+  };
+  // Keep Tab focus within the card while the tour is active.
+  trapTab(event) {
+    const focusable = Array.from(this.cardTarget.querySelectorAll(FOCUSABLE)).filter((el) => !el.hidden && el.offsetParent !== null && getComputedStyle(el).visibility !== "hidden");
+    if (focusable.length === 0)
+      return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (event.shiftKey) {
+      if (active === first || active === this.cardTarget || !this.cardTarget.contains(active)) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else if (active === last || !this.cardTarget.contains(active)) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+}
+
+class ThemeSwitch extends Controller {
+  static values = {
+    storageKey: { type: String, default: "midwest-theme" }
+  };
+  connect() {
+    const isDark = this.resolveTheme() === "dark";
+    this.apply(isDark);
+    this.element.checked = isDark;
+  }
+  toggle() {
+    const isDark = this.element.checked;
+    this.apply(isDark);
+    this.persist(isDark ? "dark" : "light");
+  }
+  resolveTheme() {
+    const stored = this.read();
+    if (stored === "dark" || stored === "light")
+      return stored;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  apply(isDark) {
+    document.documentElement.classList.toggle("dark", isDark);
+  }
+  read() {
+    try {
+      return window.localStorage.getItem(this.storageKeyValue);
+    } catch {
+      return null;
+    }
+  }
+  persist(theme) {
+    try {
+      window.localStorage.setItem(this.storageKeyValue, theme);
+    } catch {
+    }
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -6590,6 +7342,10 @@ function registerMidwestControllers(application) {
   application.register("midwest-code-block", CodeBlock);
   application.register("midwest-date-picker", DatePicker);
   application.register("midwest-time-picker", TimePicker);
+  application.register("midwest-intersection-observer", ViewportObserver);
+  application.register("midwest-focus-trap", FocusTrap);
+  application.register("midwest-onboarding", Onboarding);
+  application.register("midwest-theme-switch", ThemeSwitch);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };