@radioactive-labs/plutonium 0.49.1 → 0.51.0

package/src/js/controllers/autosubmit_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="autosubmit"
+// Submits the closest <form> after the user stops typing for `delay` ms
+// (default 300). Use on inputs where the user expects "as you type"
+// behavior (e.g. the toolbar search input).
+export default class extends Controller {
+  static values = { delay: { type: Number, default: 300 } }
+
+  connect() {
+    this._timer = null
+  }
+
+  disconnect() {
+    if (this._timer) clearTimeout(this._timer)
+  }
+
+  submit() {
+    if (this._timer) clearTimeout(this._timer)
+    this._timer = setTimeout(() => {
+      this.element.closest("form")?.requestSubmit()
+    }, this.delayValue)
+  }
+}

package/src/js/controllers/bulk_actions_controller.js

@@ -3,22 +3,7 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="bulk-actions"
 // Manages bulk action selection in resource tables
 export default class extends Controller {
-  static targets = ["checkbox", "checkboxAll", "toolbar", "selectedCount", "actionButton", "selectionCell"]
-  static values = {
-    hasActions: { type: Boolean, default: false }
-  }
-
-  connect() {
-    // Show selection column only if bulk actions exist
-    if (this.hasActionsValue) {
-      this.enableSelection()
-    }
-  }
-
-  enableSelection() {
-    // Show all selection cells (header + body cells)
-    this.selectionCellTargets.forEach(el => el.classList.remove("hidden"))
-  }
+  static targets = ["checkbox", "checkboxAll", "toolbar", "selectedCount", "actionButton", "filterPills"]
 
   toggle() {
     this.updateUI()
@@ -45,6 +30,11 @@ export default class extends Controller {
       this.toolbarTarget.classList.toggle("hidden", checked.length === 0)
     }
 
+    // FilterPills strip is mutually exclusive with the toolbar
+    if (this.hasFilterPillsTarget) {
+      this.filterPillsTarget.classList.toggle("hidden", checked.length > 0)
+    }
+
     // Update selected count display
     if (this.hasSelectedCountTarget) {
       this.selectedCountTarget.textContent = checked.length
@@ -99,6 +89,15 @@ export default class extends Controller {
     return allowedActions ? allowedActions.split(",").filter(a => a) : []
   }
 
+  clearSelection() {
+    this.checkboxTargets.forEach(cb => cb.checked = false)
+    if (this.hasCheckboxAllTarget) {
+      this.checkboxAllTarget.checked = false
+      this.checkboxAllTarget.indeterminate = false
+    }
+    this.updateUI()
+  }
+
   get checked() {
     return this.checkboxTargets.filter(cb => cb.checked)
   }

package/src/js/controllers/capture_url_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="capture-url"
+// Sets the controller's own element's `value` to window.location.href
+// on connect — capturing URL fragments (#tab-id) that the server never
+// sees over HTTP. Apply directly to any input/button whose value should
+// reflect the full client-side URL.
+export default class extends Controller {
+  connect() {
+    if ("value" in this.element) {
+      this.element.value = window.location.href
+    }
+  }
+}

package/src/js/controllers/filter_panel_controller.js

@@ -1,35 +1,93 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="filter-panel"
+//
+// Hosts the toolbar's filter slideover. The trigger lives in the toolbar
+// strip; the panel + backdrop are rendered as siblings inside the same
+// controller scope. `open` is mirrored on both targets via the `data-open`
+// attribute, which CSS uses to drive the slide / fade transitions.
 export default class extends Controller {
+  static targets = ["panel", "backdrop"]
+
+  connect() {
+    this._onKeydown = this._onKeydown.bind(this)
+  }
+
+  disconnect() {
+    if (this.isOpen) {
+      document.removeEventListener("keydown", this._onKeydown)
+      this._unlockBodyScroll()
+    }
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    if (this.hasPanelTarget) {
+      this.panelTarget.setAttribute("data-open", "")
+      this.panelTarget.setAttribute("aria-hidden", "false")
+    }
+    if (this.hasBackdropTarget) this.backdropTarget.setAttribute("data-open", "")
+    this._lockBodyScroll()
+    document.addEventListener("keydown", this._onKeydown)
+  }
+
+  close() {
+    if (this.hasPanelTarget) {
+      this.panelTarget.removeAttribute("data-open")
+      this.panelTarget.setAttribute("aria-hidden", "true")
+    }
+    if (this.hasBackdropTarget) this.backdropTarget.removeAttribute("data-open")
+    this._unlockBodyScroll()
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  // Mirrors remote-modal's approach: stash the body's current overflow
+  // and restore it on close. Avoids stomping a value another component
+  // (e.g. an open dialog) may have set.
+  _lockBodyScroll() {
+    if (this._previousBodyOverflow != null) return
+    this._previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+  }
+
+  _unlockBodyScroll() {
+    if (this._previousBodyOverflow == null) return
+    document.body.style.overflow = this._previousBodyOverflow
+    this._previousBodyOverflow = null
+  }
+
+  // Reset every input under this controller's scope, then submit so the
+  // table reflects the cleared filters immediately.
   clear() {
-    this.element.querySelectorAll('input, select, textarea').forEach(input => {
-      if (input.type === 'checkbox' || input.type === 'radio') {
+    this.element.querySelectorAll("input, select, textarea").forEach(input => {
+      if (input.type === "checkbox" || input.type === "radio") {
         input.checked = false
-      } else if (input.tagName === 'SELECT') {
+      } else if (input.tagName === "SELECT") {
         input.selectedIndex = 0
-      } else if (input.type === 'hidden') {
-        // Clear hidden inputs that are filter values (e.g., flatpickr)
-        if (input.dataset.controller === 'flatpickr') {
-          input.value = ''
-        }
+      } else if (input.type === "hidden") {
+        if (input.dataset.controller === "flatpickr") input.value = ""
       } else {
-        input.value = ''
+        input.value = ""
       }
     })
 
-    // Clear flatpickr instances via Stimulus controller
     this.element.querySelectorAll('[data-controller="flatpickr"]').forEach(input => {
-      const controller = this.application.getControllerForElementAndIdentifier(input, 'flatpickr')
-      if (controller?.picker) {
-        controller.picker.clear()
-      }
+      const controller = this.application.getControllerForElementAndIdentifier(input, "flatpickr")
+      if (controller?.picker) controller.picker.clear()
     })
 
-    // Submit the parent form
-    const form = this.element.closest('form')
-    if (form) {
-      form.requestSubmit()
-    }
+    const form = this.element.querySelector("form")
+    if (form) form.requestSubmit()
+  }
+
+  get isOpen() {
+    return this.hasPanelTarget && this.panelTarget.hasAttribute("data-open")
+  }
+
+  _onKeydown(event) {
+    if (event.key === "Escape") this.close()
   }
 }

package/src/js/controllers/frame_navigator_controller.js

@@ -49,6 +49,16 @@ export default class extends Controller {
   }
 
   frameLoading(event) {
+    // turbo:click / turbo:submit-start bubble from links and forms inside
+    // the frame, even when those links target a different frame
+    // (e.g. data-turbo-frame="remote_modal"). Without this filter, the
+    // pulse animation is triggered for navigations that never resolve
+    // against this frame, leaving it stuck in a loading state.
+    if (event) {
+      const trigger = event.target.closest("a, form")
+      const requested = trigger?.dataset?.turboFrame
+      if (requested && requested !== this.frameTarget.id) return
+    }
     this.#loadingStarted()
   }
 
@@ -79,20 +89,38 @@ export default class extends Controller {
   homeButtonClicked(event) {
     this.frameLoading(null)
 
+    // Clear history immediately so Back/Home vanish during the load.
+    this.srcHistory = [this.originalFrameSrc]
+    this.#updateNavigationButtonsDisplay()
+
+    // Mark the next frame load as "home" so notifySrcChanged doesn't
+    // push the loaded URL onto a fresh stack (the loaded URL may differ
+    // from originalFrameSrc due to redirects / trailing slashes).
+    this._homeRequested = true
+
+    // Force a reload even if frame.src already matches the original
+    // (a same-value assignment wouldn't fire turbo:frame-load).
     this.frameTarget.src = this.originalFrameSrc
+    this.frameTarget.reload()
   }
 
   get currentSrc() { return this.srcHistory[this.srcHistory.length - 1] }
 
   #notifySrcChanged(src) {
-    if (src == this.currentSrc) {
-      // this must be a refresh
-      // do nothing
-    }
-    else if (src == this.originalFrameSrc)
+    if (this._homeRequested) {
+      // Home click: capture the actually-loaded URL as the new singleton
+      // history root (handles redirect/trailing-slash differences from
+      // originalFrameSrc).
+      this._homeRequested = false
       this.srcHistory = [src]
-    else
+      this.originalFrameSrc = src
+    } else if (src == this.currentSrc) {
+      // refresh — do nothing
+    } else if (src == this.originalFrameSrc) {
+      this.srcHistory = [src]
+    } else {
       this.srcHistory.push(src)
+    }
 
     this.#updateNavigationButtonsDisplay()
     if (this.hasMaximizeLinkTarget) this.maximizeLinkTarget.href = src

package/src/js/controllers/icon_rail_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="icon-rail"
+// Manages the collapsed ↔ pinned-expanded state of the IconRail sidebar.
+// Pinned state is persisted in localStorage so it survives page reloads.
+export default class extends Controller {
+  static values = {
+    storageKey: { type: String, default: "pu_rail_pinned" }
+  }
+
+  connect() {
+    const pinned = localStorage.getItem(this.storageKeyValue) === "true"
+    if (pinned) {
+      document.body.classList.add("pu-rail-pinned")
+    }
+  }
+
+  togglePin() {
+    const pinned = document.body.classList.toggle("pu-rail-pinned")
+    localStorage.setItem(this.storageKeyValue, pinned)
+  }
+}

package/src/js/controllers/icon_rail_flyout_controller.js

@@ -0,0 +1,128 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="icon-rail-flyout"
+// Manages a flyout panel anchored to a trigger element.
+// - Hover or focus the wrapper → open
+// - Mouse leave (with delay) or blur → close
+// - Esc → close immediately
+// - Click trigger → toggle (touch-friendly)
+//
+// On open, the panel is portaled to <body> so it escapes any ancestor
+// transform / overflow:hidden (the rail aside has both). On close,
+// the panel returns to its original parent.
+//
+// IMPORTANT: once portaled, the panel is OUTSIDE the controller's
+// element scope, so this.panelTarget stops resolving. We capture the
+// node into _panel before moving it.
+export default class extends Controller {
+  static targets = ["trigger", "panel"]
+  static values = {
+    closeDelay: { type: Number, default: 150 }
+  }
+
+  connect() {
+    this._closeTimer = null
+    this._open = false
+    this._panel = null
+    this._panelHome = null
+    this._onPanelEnter = () => {
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer)
+        this._closeTimer = null
+      }
+    }
+    this._onPanelLeave = () => this.scheduleClose()
+  }
+
+  disconnect() {
+    this._returnPanel()
+  }
+
+  open() {
+    if (this._closeTimer) {
+      clearTimeout(this._closeTimer)
+      this._closeTimer = null
+    }
+    if (this._open) return
+    if (!this._panel && !this.hasPanelTarget) return
+    this._open = true
+    this.element.dataset.flyoutOpen = "true"
+    this._portalPanel()
+    this._position()
+  }
+
+  scheduleClose() {
+    if (this._closeTimer) clearTimeout(this._closeTimer)
+    this._closeTimer = setTimeout(() => this.close(), this.closeDelayValue)
+  }
+
+  close() {
+    if (!this._open) return
+    this._open = false
+    delete this.element.dataset.flyoutOpen
+    this._returnPanel()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    this._open ? this.close() : this.open()
+  }
+
+  closeOnEsc(event) {
+    if (event.key === "Escape") this.close()
+  }
+
+  _portalPanel() {
+    if (this._panel) return
+    // Capture the panel BEFORE moving it — once it leaves the
+    // controller element, this.panelTarget no longer resolves.
+    const panel = this.panelTarget
+    if (!panel) return
+    this._panel = panel
+    this._panelHome = panel.parentElement
+    panel.addEventListener("mouseenter", this._onPanelEnter)
+    panel.addEventListener("mouseleave", this._onPanelLeave)
+    document.body.appendChild(panel)
+    panel.style.display = "block"
+  }
+
+  _returnPanel() {
+    if (!this._panel) return
+    const panel = this._panel
+    panel.removeEventListener("mouseenter", this._onPanelEnter)
+    panel.removeEventListener("mouseleave", this._onPanelLeave)
+    panel.style.position = ""
+    panel.style.left = ""
+    panel.style.top = ""
+    panel.style.display = ""
+    // If the original parent has been morphed away, the panel would
+    // orphan in <body>. Drop it instead of re-attaching to a detached
+    // home node.
+    if (this._panelHome && document.contains(this._panelHome)) {
+      this._panelHome.appendChild(panel)
+    } else {
+      panel.remove()
+    }
+    this._panel = null
+    this._panelHome = null
+  }
+
+  _position() {
+    if (!this._panel || !this.hasTriggerTarget) return
+    const panel = this._panel
+    const triggerRect = this.triggerTarget.getBoundingClientRect()
+    panel.style.position = "fixed"
+    panel.style.left = `${triggerRect.right + 4}px`
+    panel.style.top = `${triggerRect.top}px`
+
+    // Shift up if the panel would overflow the viewport bottom.
+    requestAnimationFrame(() => {
+      const panelRect = panel.getBoundingClientRect()
+      const viewportH = window.innerHeight
+      if (panelRect.bottom > viewportH - 8) {
+        const overflow = panelRect.bottom - (viewportH - 8)
+        panel.style.top = `${parseFloat(panel.style.top) - overflow}px`
+      }
+    })
+  }
+}

package/src/js/controllers/register_controllers.js

@@ -24,6 +24,14 @@ import BulkActionsController from "./bulk_actions_controller.js"
 import FilterPanelController from "./filter_panel_controller.js"
 import TextareaAutogrowController from "./textarea_autogrow_controller.js"
 import ClipboardController from "./clipboard_controller.js"
+import IconRailController from "./icon_rail_controller.js"
+import IconRailFlyoutController from "./icon_rail_flyout_controller.js"
+import TableHeaderController from "./table_header_controller.js"
+import TableColumnMenuController from "./table_column_menu_controller.js"
+import CaptureUrlController from "./capture_url_controller.js"
+import RowClickController from "./row_click_controller.js"
+import ViewSwitcherController from "./view_switcher_controller.js"
+import AutosubmitController from "./autosubmit_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -52,4 +60,12 @@ export default function (application) {
   application.register("filter-panel", FilterPanelController)
   application.register("textarea-autogrow", TextareaAutogrowController)
   application.register("clipboard", ClipboardController)
+  application.register("icon-rail", IconRailController)
+  application.register("icon-rail-flyout", IconRailFlyoutController)
+  application.register("table-header", TableHeaderController)
+  application.register("table-column-menu", TableColumnMenuController)
+  application.register("capture-url", CaptureUrlController)
+  application.register("row-click", RowClickController)
+  application.register("view-switcher", ViewSwitcherController)
+  application.register("autosubmit", AutosubmitController)
 }

package/src/js/controllers/resource_tab_list_controller.js

@@ -1,6 +1,15 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="resource-tab-list"
+//
+// URL hash sync:
+// - On connect, if location.hash matches a tab identifier, that tab is
+//   selected (overrides defaultTabValue). Falls back to defaultTabValue
+//   or the first tab.
+// - On user click, the URL hash is updated via history.replaceState
+//   (no scroll, no back-button entry).
+// - On hashchange (back/forward, manual hash edit), the matching tab
+//   is re-selected.
 export default class extends Controller {
   static targets = ["btn", "tab"]
   static values = {
@@ -13,14 +22,37 @@ export default class extends Controller {
     this.activeClasses = this.hasActiveClassesValue ? this.activeClassesValue.split(" ") : []
     this.inActiveClasses = this.hasInActiveClassesValue ? this.inActiveClassesValue.split(" ") : []
 
-    this.#selectInternal(this.defaultTabValue || this.btnTargets[0].id)
+    const fromHash = this.#buttonIdFromHash()
+    const initialId = fromHash || this.defaultTabValue || this.btnTargets[0]?.id
+    this.#selectInternal(initialId, { skipFocus: true, skipHashUpdate: true })
+
+    this._syncFromHash = this._syncFromHash.bind(this)
+    // hashchange covers manual hash edits and back/forward.
+    window.addEventListener("hashchange", this._syncFromHash)
+    // turbo:load covers Turbo navigations (including morph) where the URL
+    // changes via pushState — which doesn't fire hashchange. Without this,
+    // a second submit landing via morph leaves the previously-active tab
+    // selected even though the URL hash points elsewhere.
+    document.addEventListener("turbo:load", this._syncFromHash)
+  }
+
+  disconnect() {
+    if (this._syncFromHash) {
+      window.removeEventListener("hashchange", this._syncFromHash)
+      document.removeEventListener("turbo:load", this._syncFromHash)
+    }
+  }
+
+  _syncFromHash() {
+    const id = this.#buttonIdFromHash()
+    if (id) this.#selectInternal(id, { skipFocus: true, skipHashUpdate: true })
   }
 
   select(event) {
     this.#selectInternal(event.currentTarget.id)
   }
 
-  #selectInternal(id) {
+  #selectInternal(id, options = {}) {
     const selectedBtn = this.btnTargets.find(element => element.id === id)
     if (!selectedBtn) {
       console.error(`Tab Button with id "${id}" not found`)
@@ -56,9 +88,30 @@ export default class extends Controller {
     selectedTab.hidden = false
     selectedTab.setAttribute('aria-hidden', 'false')
 
+    // Sync URL hash so the tab is shareable / restorable on reload.
+    if (!options.skipHashUpdate) this.#updateHash(id)
+
     // Focus management
-    if (selectedBtn !== document.activeElement) {
+    if (!options.skipFocus && selectedBtn !== document.activeElement) {
       selectedBtn.focus()
     }
   }
+
+  // Button ids follow `${identifier}-tab`. The URL hash carries just
+  // the identifier (e.g., #details, #orders).
+  #buttonIdFromHash() {
+    const hash = window.location.hash.replace(/^#/, "")
+    if (!hash) return null
+    const candidateId = `${hash}-tab`
+    const exists = this.btnTargets.some(btn => btn.id === candidateId)
+    return exists ? candidateId : null
+  }
+
+  #updateHash(buttonId) {
+    const identifier = buttonId.replace(/-tab$/, "")
+    const newHash = `#${identifier}`
+    if (window.location.hash !== newHash) {
+      history.replaceState(null, "", newHash)
+    }
+  }
 }

package/src/js/controllers/row_click_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="row-click"
+//
+// Makes a table row or grid card behave like the resource's Show
+// affordance: clicking anywhere except a real interactive element
+// triggers the row's existing Show button. Single source of truth for
+// the URL — turbo-frame targets, modal opening, and any other
+// configuration on the Show action are inherited automatically.
+//
+// Mark the show element with `data-row-click-target="show"`.
+// Opt out of triggering for a specific element with
+// `data-row-click-ignore`.
+export default class extends Controller {
+  click(event) {
+    if (event.target.closest("a, button, input, label, select, textarea, [data-row-click-ignore]")) {
+      return
+    }
+    this.element.querySelector('[data-row-click-target="show"]')?.click()
+  }
+}

package/src/js/controllers/slim_select_controller.js

@@ -1,7 +1,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="slim-select"
+//
+// Optional values (used by the typeahead-capable ResourceSelect):
+//   typeahead-url   — backend endpoint that returns
+//                     {results: [{value, label}, ...], has_more: bool}.
+//                     When present, SlimSelect's built-in client-side
+//                     filter is replaced by a debounced fetch through
+//                     this URL.
 export default class extends Controller {
+  static values = {
+    typeaheadUrl: String,
+    typeaheadDebounceMs: { type: Number, default: 200 }
+  }
+
   connect() {
     if (this.slimSelect) return;
 
@@ -47,9 +59,18 @@ export default class extends Controller {
       settings.openPosition = "auto";
     }
 
+    const events = {};
+
+    if (this.hasTypeaheadUrlValue && this.typeaheadUrlValue) {
+      // Replace SlimSelect's client-side filter with a server fetch.
+      // Returns the SlimSelect data array shape: {value, text}.
+      events.search = (search, currentData) => this.#typeaheadFetch(search, currentData);
+    }
+
     this.slimSelect = new SlimSelect({
       select: this.element,
       settings: settings,
+      events: events,
     });
 
     // Add event listeners for better positioning
@@ -177,6 +198,46 @@ export default class extends Controller {
     this.#cleanupSlimSelect();
   }
 
+  // Server-driven search. SlimSelect calls events.search on each
+  // keystroke; we debounce so that rapid typing produces a single
+  // request, and abort any in-flight fetch when a newer one starts.
+  // Returns a Promise resolving to either a DataArray (rendered as
+  // options) or a string (rendered as the no-results label).
+  #typeaheadFetch(search, _currentData) {
+    if (this._typeaheadDebounce) clearTimeout(this._typeaheadDebounce);
+    if (this._typeaheadAbort) this._typeaheadAbort.abort();
+
+    return new Promise((resolve) => {
+      this._typeaheadDebounce = setTimeout(() => {
+        this._typeaheadAbort = new AbortController();
+        this.#performTypeaheadFetch(search, this._typeaheadAbort.signal).then(resolve);
+      }, this.typeaheadDebounceMsValue);
+    });
+  }
+
+  async #performTypeaheadFetch(search, signal) {
+    const url = new URL(this.typeaheadUrlValue, window.location.origin);
+    url.searchParams.set("q", search || "");
+
+    try {
+      const res = await fetch(url.toString(), {
+        headers: { Accept: "application/json" },
+        signal: signal,
+      });
+      if (!res.ok) return "Search failed";
+      const json = await res.json();
+      const results = Array.isArray(json.results) ? json.results : [];
+      return results.map((row) => ({
+        value: String(row.value ?? ""),
+        text: String(row.label ?? ""),
+      }));
+    } catch (e) {
+      if (e.name === "AbortError") return [];
+      console.warn("[slim-select] typeahead error", e);
+      return "Search failed";
+    }
+  }
+
   #handleMorph() {
     if (!this.element.isConnected) return;