@unabridged/midwest 0.24.4 → 0.26.0

package/app/assets/javascript/midwest.js

@@ -2688,13 +2688,18 @@ class Prose extends Controller {
 class Dialog extends Controller {
   static targets = ["remoteContent", "clearableForm"];
   static values = {
-    resetFrame: { type: Boolean, default: false }
+    resetFrame: { type: Boolean, default: false },
+    history: { type: Boolean, default: false }
   };
   _previousFocus = null;
+  // True while a close is being driven by a history navigation (Back button),
+  // so onClose knows not to push another history entry in response.
+  _closingViaHistory = false;
   connect() {
     document.addEventListener("turbo:frame-load", this.bindToggleEls);
     document.addEventListener("turbo:before-visit", this.dismiss);
     document.addEventListener("click", this.handleClickOutside);
+    window.addEventListener("popstate", this.handlePopState);
     this.dialog.addEventListener("close", this.onClose);
     this.bindToggleEls();
   }
@@ -2702,8 +2707,18 @@ class Dialog extends Controller {
     document.removeEventListener("turbo:frame-load", this.bindToggleEls);
     document.removeEventListener("turbo:before-visit", this.dismiss);
     document.removeEventListener("click", this.handleClickOutside);
+    window.removeEventListener("popstate", this.handlePopState);
     this.dialog.removeEventListener("close", this.onClose);
   }
+  // History-aware modals: a Back navigation (popstate) closes the open dialog.
+  // The flag tells onClose this close came from history, so it must not push
+  // another entry back onto the stack.
+  handlePopState = () => {
+    if (!this.historyValue || !this.dialog.open)
+      return;
+    this._closingViaHistory = true;
+    this.dialog.close();
+  };
   get dialog() {
     return this.element;
   }
@@ -2755,6 +2770,8 @@ class Dialog extends Controller {
     if (!detail.success)
       return;
     const redirectUrl = detail.fetchResponse?.location?.href;
+    if (redirectUrl)
+      this._closingViaHistory = true;
     this.dismiss();
     if (redirectUrl)
       window.Turbo?.visit(redirectUrl);
@@ -2796,10 +2813,25 @@ class Dialog extends Controller {
     this._previousFocus?.focus();
     this._previousFocus = null;
     this.htmlEl.classList.toggle("overflow-hidden", false);
+    this.restoreHistory();
     await this.delay(500);
     this.resetForm();
     this.resetFrame();
   };
+  // When a history-aware modal is closed manually (Escape, backdrop, close
+  // button), pop the modal's advanced URL off the stack so the address bar
+  // returns to the page behind it. A close driven by the Back button already
+  // moved history, so it is skipped.
+  restoreHistory() {
+    if (!this.historyValue)
+      return;
+    if (this._closingViaHistory) {
+      this._closingViaHistory = false;
+      return;
+    }
+    if (window.history.length > 1)
+      window.history.back();
+  }
   resetFrame() {
     if (!this.resetFrameValue || this.frameEl == null)
       return;
@@ -3579,13 +3611,30 @@ class FormLiveSummary extends Controller {
 }
 
 class Form extends Controller {
+  static values = {
+    // Auto-submit the form (debounced) whenever a field changes.
+    autosave: { type: Boolean, default: false },
+    autosaveDelay: { type: Number, default: 600 },
+    // Emit success/error events and keep buttons interactive after an in-page
+    // (non-navigating) Turbo submission.
+    ajax: { type: Boolean, default: false }
+  };
+  autosaveTimer;
   connect() {
     this.element.addEventListener("submit", this.handleSubmit);
     this.element.addEventListener("turbo:submit-end", this.handleTurboEnd);
+    if (this.autosaveValue) {
+      this.element.addEventListener("input", this.scheduleAutosave);
+      this.element.addEventListener("change", this.scheduleAutosave);
+    }
   }
   disconnect() {
     this.element.removeEventListener("submit", this.handleSubmit);
     this.element.removeEventListener("turbo:submit-end", this.handleTurboEnd);
+    this.element.removeEventListener("input", this.scheduleAutosave);
+    this.element.removeEventListener("change", this.scheduleAutosave);
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
   }
   handleSubmit = () => {
     this.submitButtons.forEach((btn) => {
@@ -3593,15 +3642,32 @@ class Form extends Controller {
       btn.disabled = true;
     });
   };
-  // Restore buttons if the submission fails (e.g. a Turbo Frame validation
-  // error that re-renders the form without a full page transition).
   handleTurboEnd = (event) => {
-    if (!event.detail?.success) {
+    const detail = event.detail;
+    const success = detail?.success ?? false;
+    if (!success || this.ajaxValue || this.autosaveValue) {
       this.submitButtons.forEach((btn) => {
         btn.classList.remove("loading");
         btn.disabled = false;
       });
     }
+    if (this.ajaxValue) {
+      this.dispatch(success ? "success" : "error", { detail });
+    }
+  };
+  // Debounce field changes into a single background submission. `requestSubmit`
+  // runs constraint validation and fires the `submit` event, so buttons pick up
+  // their loading state and Turbo handles the request just like a manual submit.
+  scheduleAutosave = () => {
+    if (this.autosaveTimer != null)
+      clearTimeout(this.autosaveTimer);
+    this.autosaveTimer = setTimeout(() => {
+      if (typeof this.element.requestSubmit === "function") {
+        this.element.requestSubmit();
+      } else {
+        this.element.submit();
+      }
+    }, this.autosaveDelayValue);
   };
   get submitButtons() {
     return Array.from(
@@ -3674,8 +3740,29 @@ class ConfirmationController extends Controller {
 }
 
 class Chart extends Controller {
-  static targets = ["tooltip", "svg"];
-  static values = { tooltipEnabled: { type: Boolean, default: true } };
+  static targets = ["tooltip", "svg", "data"];
+  static values = {
+    tooltipEnabled: { type: Boolean, default: true },
+    filename: { type: String, default: "chart" }
+  };
+  // Presentation properties copied inline when serializing the SVG, so exported
+  // files render faithfully without the external component stylesheet.
+  static STYLE_PROPS = [
+    "fill",
+    "stroke",
+    "stroke-width",
+    "stroke-dasharray",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "opacity",
+    "fill-opacity",
+    "stroke-opacity",
+    "font-family",
+    "font-size",
+    "font-weight",
+    "text-anchor",
+    "color"
+  ];
   connect() {
     if (this.tooltipEnabledValue && this.hasTooltipTarget) {
       this.attachListeners();
@@ -3755,6 +3842,105 @@ class Chart extends Controller {
     this.tooltipTarget.style.left = `${left}px`;
     this.tooltipTarget.style.top = `${top}px`;
   }
+  // --- Export actions -------------------------------------------------------
+  // Download the chart as a standalone SVG file (styles inlined).
+  exportSvg() {
+    if (!this.hasSvgTarget)
+      return;
+    const blob = new Blob([this.serializeSvg()], { type: "image/svg+xml;charset=utf-8" });
+    this.downloadBlob(blob, `${this.filenameValue}.svg`);
+  }
+  // Rasterize the chart to a PNG via an offscreen canvas (2× for crisp output).
+  exportPng() {
+    if (!this.hasSvgTarget)
+      return;
+    const box = this.svgTarget.viewBox.baseVal;
+    const rect = this.svgTarget.getBoundingClientRect();
+    const width = Math.max(1, Math.round(rect.width || box.width));
+    const height = Math.max(1, Math.round(rect.height || box.height));
+    const scale = 2;
+    const blob = new Blob([this.serializeSvg()], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const ctx = canvas.getContext("2d");
+      if (ctx == null) {
+        URL.revokeObjectURL(url);
+        return;
+      }
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      URL.revokeObjectURL(url);
+      canvas.toBlob((png) => {
+        if (png != null)
+          this.downloadBlob(png, `${this.filenameValue}.png`);
+      }, "image/png");
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+    };
+    img.src = url;
+  }
+  // Download the underlying data (chart.data_table) as a CSV file.
+  exportCsv() {
+    if (!this.hasDataTarget)
+      return;
+    const rows = JSON.parse(this.dataTarget.dataset.rows ?? "[]");
+    const csv = rows.map((row) => row.map((cell) => this.csvCell(cell)).join(",")).join("\r\n");
+    const blob = new Blob([`\uFEFF${csv}`], { type: "text/csv;charset=utf-8" });
+    this.downloadBlob(blob, `${this.filenameValue}.csv`);
+  }
+  csvCell(value) {
+    if (value == null)
+      return "";
+    const str = String(value);
+    return /["\n\r,]/.test(str) ? `"${str.replace(/"/g, '""')}"` : str;
+  }
+  // Clone the live SVG, inline computed presentation styles onto every node, and
+  // serialize to a standalone XML string usable as a file or a canvas source.
+  serializeSvg() {
+    const clone = this.svgTarget.cloneNode(true);
+    this.inlineStyles(this.svgTarget, clone);
+    clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    clone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+    const box = this.svgTarget.viewBox.baseVal;
+    if (box?.width) {
+      clone.setAttribute("width", String(box.width));
+      clone.setAttribute("height", String(box.height));
+    }
+    const xml = new XMLSerializer().serializeToString(clone);
+    return `<?xml version="1.0" encoding="UTF-8"?>
+${xml}`;
+  }
+  // Copy the whitelisted computed styles from each source node to the matching
+  // clone node. The trees are structurally identical, so index alignment holds.
+  inlineStyles(source, target) {
+    const sourceEls = [source, ...Array.from(source.querySelectorAll("*"))];
+    const targetEls = [target, ...Array.from(target.querySelectorAll("*"))];
+    sourceEls.forEach((el, i) => {
+      const computed = window.getComputedStyle(el);
+      const decls = Chart.STYLE_PROPS.map((prop) => {
+        const value = computed.getPropertyValue(prop);
+        return value ? `${prop}:${value}` : null;
+      }).filter((decl) => decl !== null);
+      if (decls.length > 0)
+        targetEls[i].setAttribute("style", decls.join(";"));
+    });
+  }
+  downloadBlob(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  }
 }
 
 class Range extends Controller {
@@ -4743,7 +4929,7 @@ var MMCQ = function() {
   };
 }();
 
-class Image extends Controller {
+let Image$1 = class Image extends Controller {
   static targets = ["dialog"];
   static values = { poster: String };
   connect() {
@@ -4783,7 +4969,7 @@ class Image extends Controller {
       this.dialogTarget.close();
     }
   }
-}
+};
 
 class ColorPicker extends Controller {
   static targets = ["input", "swatch", "customSwatch", "colorInput"];
@@ -4979,16 +5165,69 @@ class HorizontalScroll extends Controller {
 }
 
 class Table extends Controller {
-  static targets = ["selectAll", "rowCheckbox"];
+  static targets = ["selectAll", "rowCheckbox", "editable"];
+  static values = {
+    resizable: { type: Boolean, default: false },
+    resizeStorageKey: { type: String, default: "" }
+  };
+  static MIN_COLUMN_WIDTH = 48;
+  // Active resize gesture state.
+  _resizeTh = null;
+  _resizeStartX = 0;
+  _resizeStartWidth = 0;
+  connect() {
+    if (this.resizableValue)
+      this.initResize();
+  }
+  // ─── selection ─────────────────────────────────────────────────────────────
   toggleAll() {
     const checked = this.selectAllTarget.checked;
     this.rowCheckboxTargets.forEach((cb) => {
       cb.checked = checked;
     });
   }
+  updateSelectAll() {
+    if (!this.hasSelectAllTarget)
+      return;
+    const total = this.rowCheckboxTargets.length;
+    const checkedCount = this.rowCheckboxTargets.filter((cb) => cb.checked).length;
+    if (checkedCount === 0) {
+      this.selectAllTarget.checked = false;
+      this.selectAllTarget.indeterminate = false;
+    } else if (checkedCount === total) {
+      this.selectAllTarget.checked = true;
+      this.selectAllTarget.indeterminate = false;
+    } else {
+      this.selectAllTarget.checked = false;
+      this.selectAllTarget.indeterminate = true;
+    }
+  }
+  // Shift-clicking a sort header extends the multi-column sort chain instead of
+  // replacing it: follow the header's data-multi-sort-url. A plain click falls
+  // through to the anchor's single-sort href. Navigation stays frame-scoped by
+  // driving the enclosing <turbo-frame>'s src when present.
+  sortColumn(event) {
+    if (!event.shiftKey)
+      return;
+    const link = event.currentTarget;
+    const url = link.dataset.multiSortUrl;
+    if (!url)
+      return;
+    event.preventDefault();
+    const frame = link.closest("turbo-frame");
+    if (frame != null) {
+      frame.src = url;
+    } else {
+      const Turbo = window.Turbo;
+      if (Turbo?.visit)
+        Turbo.visit(url);
+      else
+        window.location.href = url;
+    }
+  }
   navigateRow(event) {
     const target = event.target;
-    if (target.closest('a, button, input, select, textarea, [role="button"]'))
+    if (target.closest('a, button, input, select, textarea, [role="button"], .editable'))
       return;
     const row = event.currentTarget;
     const href = row.dataset.href;
@@ -5005,22 +5244,193 @@ class Table extends Controller {
       }
     }
   }
-  updateSelectAll() {
-    if (!this.hasSelectAllTarget)
+  // ─── column resizing ────────────────────────────────────────────────────────
+  // Freeze the current (auto-laid-out) column widths as explicit values, switch
+  // to a fixed layout so drags don't reflow other columns, then apply any widths
+  // saved from a previous session.
+  initResize() {
+    const headers = this.headerCells();
+    if (headers.length === 0)
       return;
-    const total = this.rowCheckboxTargets.length;
-    const checkedCount = this.rowCheckboxTargets.filter((cb) => cb.checked).length;
-    if (checkedCount === 0) {
-      this.selectAllTarget.checked = false;
-      this.selectAllTarget.indeterminate = false;
-    } else if (checkedCount === total) {
-      this.selectAllTarget.checked = true;
-      this.selectAllTarget.indeterminate = false;
-    } else {
-      this.selectAllTarget.checked = false;
-      this.selectAllTarget.indeterminate = true;
+    headers.forEach((th) => {
+      th.style.width = `${th.offsetWidth}px`;
+    });
+    this.table?.classList.add("is-fixed");
+    this.restoreWidths();
+  }
+  startResize(event) {
+    const handle = event.target;
+    const th = handle.closest("th");
+    if (th == null)
+      return;
+    event.preventDefault();
+    this._resizeTh = th;
+    this._resizeStartX = event.clientX;
+    this._resizeStartWidth = th.offsetWidth;
+    this.element.classList.add("is-resizing");
+    window.addEventListener("pointermove", this.onResizeMove);
+    window.addEventListener("pointerup", this.onResizeEnd);
+  }
+  // Double-clicking a handle clears that column's explicit width so it auto-sizes
+  // to its content again.
+  autoSizeColumn(event) {
+    const th = event.target.closest("th");
+    if (th == null)
+      return;
+    th.style.removeProperty("width");
+    this.persistWidths();
+  }
+  onResizeMove = (event) => {
+    if (this._resizeTh == null)
+      return;
+    const delta = event.clientX - this._resizeStartX;
+    const width = Math.max(Table.MIN_COLUMN_WIDTH, this._resizeStartWidth + delta);
+    this._resizeTh.style.width = `${width}px`;
+  };
+  onResizeEnd = () => {
+    this._resizeTh = null;
+    this.element.classList.remove("is-resizing");
+    window.removeEventListener("pointermove", this.onResizeMove);
+    window.removeEventListener("pointerup", this.onResizeEnd);
+    this.persistWidths();
+  };
+  persistWidths() {
+    if (!this.resizeStorageKeyValue)
+      return;
+    const widths = {};
+    this.headerCells().forEach((th) => {
+      const index = th.dataset.colIndex;
+      if (index != null && th.style.width)
+        widths[index] = th.style.width;
+    });
+    try {
+      window.localStorage.setItem(this.storageKey, JSON.stringify(widths));
+    } catch {
     }
   }
+  restoreWidths() {
+    if (!this.resizeStorageKeyValue)
+      return;
+    let widths = {};
+    try {
+      widths = JSON.parse(window.localStorage.getItem(this.storageKey) ?? "{}");
+    } catch {
+      return;
+    }
+    this.headerCells().forEach((th) => {
+      const saved = th.dataset.colIndex != null ? widths[th.dataset.colIndex] : void 0;
+      if (saved)
+        th.style.width = saved;
+    });
+  }
+  get storageKey() {
+    return `midwest-table:${this.resizeStorageKeyValue}`;
+  }
+  headerCells() {
+    return Array.from(this.element.querySelectorAll("thead th[data-col-index]"));
+  }
+  // ─── inline editing ─────────────────────────────────────────────────────────
+  // Start editing when Enter or F2 is pressed on a focused editable cell. Ignore
+  // keydowns bubbling up from the edit input itself (its own handler owns those).
+  editCellKeydown(event) {
+    if (event.target !== event.currentTarget)
+      return;
+    if (event.key !== "Enter" && event.key !== "F2")
+      return;
+    const cell = event.currentTarget;
+    if (cell.dataset.editing === "true")
+      return;
+    event.preventDefault();
+    this.startEditing(cell);
+  }
+  editCell(event) {
+    this.startEditing(event.currentTarget);
+  }
+  startEditing(cell) {
+    if (cell.dataset.editing === "true")
+      return;
+    cell.dataset.editing = "true";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "midwest-table-edit-input";
+    input.value = cell.dataset.value ?? cell.textContent?.trim() ?? "";
+    cell.textContent = "";
+    cell.appendChild(input);
+    input.focus();
+    input.select();
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.commitEdit(cell, input);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this.cancelEdit(cell);
+      }
+    });
+    input.addEventListener("blur", () => {
+      this.commitEdit(cell, input);
+    });
+  }
+  commitEdit(cell, input) {
+    if (cell.dataset.editing !== "true")
+      return;
+    const newValue = input.value;
+    const previousValue = cell.dataset.value ?? "";
+    this.finishEditing(cell, newValue);
+    if (newValue === previousValue)
+      return;
+    this.dispatch("edit", {
+      bubbles: true,
+      detail: {
+        field: cell.dataset.field,
+        value: newValue,
+        previousValue,
+        rowId: cell.closest("tr")?.dataset.rowId,
+        cell
+      }
+    });
+    this.persistEdit(cell, newValue);
+  }
+  cancelEdit(cell) {
+    if (cell.dataset.editing !== "true")
+      return;
+    this.finishEditing(cell, cell.dataset.value ?? "");
+  }
+  // Replace the input with the resolved text, record the value, and return
+  // focus to the cell for keyboard users.
+  finishEditing(cell, value) {
+    cell.dataset.editing = "false";
+    cell.dataset.value = value;
+    cell.textContent = value;
+    cell.focus();
+  }
+  // PATCH the new value when the cell declares an edit URL. Persistence is
+  // otherwise the host app's responsibility via the midwest-table:edit event.
+  persistEdit(cell, value) {
+    const url = cell.dataset.editUrl;
+    if (!url)
+      return;
+    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") ?? "";
+    void fetch(url, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": token,
+        Accept: "text/vnd.turbo-stream.html, application/json"
+      },
+      body: JSON.stringify({ field: cell.dataset.field, value })
+    }).then(async (response) => {
+      const contentType = response.headers.get("Content-Type") ?? "";
+      if (contentType.includes("turbo-stream")) {
+        const Turbo = window.Turbo;
+        Turbo?.renderStreamMessage?.(await response.text());
+      }
+    }).catch(() => {
+    });
+  }
+  get table() {
+    return this.element.querySelector("table");
+  }
 }
 
 function observeViewport(element, options = {}) {
@@ -8854,6 +9264,211 @@ class Popover extends Controller {
   }
 }
 
+class ContextMenu extends Controller {
+  static targets = ["menu"];
+  boundOutside = (event) => this.onOutside(event);
+  boundKeydown = (event) => this.onKeydown(event);
+  boundDismiss = () => this.close();
+  open(event) {
+    event.preventDefault();
+    this.show(event.clientX, event.clientY);
+  }
+  show(x, y) {
+    const menu = this.menuTarget;
+    if (menu.matches(":popover-open"))
+      menu.hidePopover();
+    menu.style.left = "0px";
+    menu.style.top = "0px";
+    menu.showPopover();
+    const rect = menu.getBoundingClientRect();
+    const vw = document.documentElement.clientWidth;
+    const vh = document.documentElement.clientHeight;
+    const left = Math.min(x, Math.max(0, vw - rect.width - 4));
+    const top = Math.min(y, Math.max(0, vh - rect.height - 4));
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+    this.addListeners();
+  }
+  close() {
+    if (this.menuTarget.matches(":popover-open"))
+      this.menuTarget.hidePopover();
+    this.removeListeners();
+  }
+  // Delegated from the menu: activating a leaf item closes the menu, but a click
+  // that opens a sub-surface must keep it open. Both a submenu parent
+  // (`as: :nested`) and a confirmation trigger open a popover via
+  // `popovertarget`, so any such trigger is left alone — the confirmation dialog
+  // (or submenu) then lives on inside the still-open menu.
+  select(event) {
+    const target = event.target;
+    if (target.closest("[popovertarget]"))
+      return;
+    if (target.closest("a.midwest-dropdown-item, button.midwest-dropdown-item"))
+      this.close();
+  }
+  onOutside(event) {
+    if (!this.menuTarget.contains(event.target))
+      this.close();
+  }
+  onKeydown(event) {
+    if (event.key === "Escape")
+      this.close();
+  }
+  addListeners() {
+    document.addEventListener("pointerdown", this.boundOutside, true);
+    document.addEventListener("keydown", this.boundKeydown, true);
+    window.addEventListener("scroll", this.boundDismiss, true);
+    window.addEventListener("resize", this.boundDismiss);
+  }
+  removeListeners() {
+    document.removeEventListener("pointerdown", this.boundOutside, true);
+    document.removeEventListener("keydown", this.boundKeydown, true);
+    window.removeEventListener("scroll", this.boundDismiss, true);
+    window.removeEventListener("resize", this.boundDismiss);
+  }
+  disconnect() {
+    this.removeListeners();
+  }
+}
+
+class SplitView extends Controller {
+  static targets = ["primary", "divider"];
+  static values = {
+    orientation: { type: String, default: "horizontal" },
+    size: { type: Number, default: 50 },
+    min: { type: Number, default: 10 },
+    max: { type: Number, default: 90 },
+    storageKey: { type: String, default: "" }
+  };
+  current = 50;
+  boundMove = (event) => this.onPointerMove(event);
+  boundUp = () => this.stopDrag();
+  connect() {
+    this.current = this.restore() ?? this.sizeValue;
+    this.apply(this.current);
+  }
+  startDrag(event) {
+    if (event.button !== 0)
+      return;
+    event.preventDefault();
+    this.element.classList.add("is-dragging");
+    window.addEventListener("pointermove", this.boundMove);
+    window.addEventListener("pointerup", this.boundUp);
+  }
+  onPointerMove(event) {
+    const rect = this.element.getBoundingClientRect();
+    const pct = this.orientationValue === "vertical" ? (event.clientY - rect.top) / rect.height * 100 : (event.clientX - rect.left) / rect.width * 100;
+    this.apply(pct);
+  }
+  stopDrag() {
+    this.element.classList.remove("is-dragging");
+    window.removeEventListener("pointermove", this.boundMove);
+    window.removeEventListener("pointerup", this.boundUp);
+    this.persist();
+  }
+  onKeydown(event) {
+    const vertical = this.orientationValue === "vertical";
+    if (event.key === "Home") {
+      event.preventDefault();
+      this.setAndPersist(this.minValue);
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      this.setAndPersist(this.maxValue);
+      return;
+    }
+    const increaseKey = vertical ? "ArrowDown" : "ArrowRight";
+    const decreaseKey = vertical ? "ArrowUp" : "ArrowLeft";
+    if (event.key !== increaseKey && event.key !== decreaseKey)
+      return;
+    event.preventDefault();
+    const step = event.shiftKey ? 10 : 2;
+    this.setAndPersist(this.current + (event.key === increaseKey ? step : -step));
+  }
+  // Double-click restores the initial size.
+  reset() {
+    this.setAndPersist(this.sizeValue);
+  }
+  setAndPersist(pct) {
+    this.apply(pct);
+    this.persist();
+  }
+  apply(pct) {
+    this.current = Math.min(this.maxValue, Math.max(this.minValue, pct));
+    this.element.style.setProperty("--split-size", `${this.current}%`);
+    this.dividerTarget.setAttribute("aria-valuenow", String(Math.round(this.current)));
+  }
+  persist() {
+    if (!this.storageKeyValue)
+      return;
+    try {
+      window.localStorage.setItem(this.storageKeyValue, String(this.current));
+    } catch {
+    }
+  }
+  restore() {
+    if (!this.storageKeyValue)
+      return null;
+    try {
+      const raw = window.localStorage.getItem(this.storageKeyValue);
+      if (raw === null)
+        return null;
+      const value = Number.parseFloat(raw);
+      return Number.isFinite(value) ? value : null;
+    } catch {
+      return null;
+    }
+  }
+  disconnect() {
+    window.removeEventListener("pointermove", this.boundMove);
+    window.removeEventListener("pointerup", this.boundUp);
+  }
+}
+
+class Assets extends Controller {
+  static values = {
+    css: String,
+    js: String
+  };
+  connect() {
+    if (this.cssValue)
+      this.ensureStylesheet(this.cssValue);
+    if (this.jsValue)
+      this.ensureScript(this.jsValue);
+  }
+  ensureStylesheet(href) {
+    const url = this.absolute(href);
+    const present = Array.from(
+      document.querySelectorAll('link[rel="stylesheet"]')
+    ).some((link2) => link2.href === url);
+    if (present)
+      return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+    document.head.appendChild(link);
+  }
+  ensureScript(src) {
+    const url = this.absolute(src);
+    const present = Array.from(
+      document.querySelectorAll("script[src]")
+    ).some((script2) => script2.src === url);
+    if (present)
+      return;
+    const script = document.createElement("script");
+    script.type = "module";
+    script.src = src;
+    document.head.appendChild(script);
+  }
+  // Resolve a possibly-relative URL to its absolute form for comparison.
+  absolute(url) {
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    return anchor.href;
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -8874,7 +9489,7 @@ 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-image", Image$1);
   application.register("midwest-color-picker", ColorPicker);
   application.register("midwest-notification", Notification);
   application.register("midwest-horizontal-scroll", HorizontalScroll);
@@ -8900,6 +9515,9 @@ function registerMidwestControllers(application) {
   application.register("midwest-map", Map$1);
   application.register("midwest-address", Address);
   application.register("midwest-popover", Popover);
+  application.register("midwest-context-menu", ContextMenu);
+  application.register("midwest-split-view", SplitView);
+  application.register("midwest-assets", Assets);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };