plutonium 0.49.1 → 0.50.0

data/src/css/tokens.css

@@ -5,147 +5,163 @@
  */
 
 :root {
-    /* ===================
+   /* ===================
        Body/Page Background
        =================== */
-    --pu-body: #f8fafc;
+   --pu-body: #f8fafc;
 
-    /* ===================
+   /* ===================
        Surface Colors - Softer, more refined
        =================== */
-    --pu-surface: #ffffff;
-    --pu-surface-alt: #f1f5f9;
-    --pu-surface-raised: #ffffff;
-    --pu-surface-overlay: rgba(255, 255, 255, 0.95);
+   --pu-surface: #ffffff;
+   --pu-surface-alt: #f1f5f9;
+   --pu-surface-raised: #ffffff;
+   --pu-surface-overlay: rgba(255, 255, 255, 0.95);
 
-    /* ===================
+   /* ===================
        Border Colors - Subtle
        =================== */
-    --pu-border: #e2e8f0;
-    --pu-border-muted: #f1f5f9;
-    --pu-border-strong: #cbd5e1;
+   --pu-border: #e2e8f0;
+   --pu-border-muted: #f1f5f9;
+   --pu-border-strong: #cbd5e1;
 
-    /* ===================
+   /* ===================
        Text Colors - Better hierarchy
        =================== */
-    --pu-text: #0f172a;
-    --pu-text-muted: #64748b;
-    --pu-text-subtle: #94a3b8;
-    --pu-text-danger: #dc2626;
+   --pu-text: #0f172a;
+   --pu-text-muted: #64748b;
+   --pu-text-subtle: #94a3b8;
+   --pu-text-danger: #dc2626;
 
-    /* ===================
+   /* ===================
        Table Tokens - Clean minimal design
        =================== */
-    --pu-table-header-bg: #f8fafc;
-    --pu-table-header-text: #475569;
-    --pu-table-row-bg: #ffffff;
-    --pu-table-row-hover: #f8fafc;
-    --pu-table-row-selected: theme(colors.primary.50);
-    --pu-table-border: #f1f5f9;
+   --pu-table-header-bg: #f8fafc;
+   --pu-table-header-text: #475569;
+   --pu-table-row-bg: #ffffff;
+   --pu-table-row-hover: #f8fafc;
+   --pu-table-row-selected: theme(colors.primary.50);
+   --pu-table-border: #f1f5f9;
 
-    /* ===================
+   /* ===================
        Form Tokens
        =================== */
-    --pu-input-bg: #ffffff;
-    --pu-input-border: #e2e8f0;
-    --pu-input-focus-ring: theme(colors.primary.500);
-    --pu-input-placeholder: #94a3b8;
+   --pu-input-bg: #ffffff;
+   --pu-input-border: #e2e8f0;
+   --pu-input-focus-ring: theme(colors.primary.500);
+   --pu-input-placeholder: #94a3b8;
 
-    /* ===================
+   /* ===================
        Card Tokens - Refined shadows
        =================== */
-    --pu-card-bg: #ffffff;
-    --pu-card-border: #e2e8f0;
+   --pu-card-bg: #ffffff;
+   --pu-card-border: #e2e8f0;
 
-    /* ===================
+   /* ===================
        Shadow System - Layered, soft
        =================== */
-    --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 3px 0 rgb(0 0 0 / 0.05);
-    --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 6px -1px rgb(0 0 0 / 0.06);
-    --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.03), 0 10px 15px -3px rgb(0 0 0 / 0.08);
+   --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 3px 0 rgb(0 0 0 / 0.05);
+   --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 6px -1px rgb(0 0 0 / 0.06);
+   --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.03), 0 10px 15px -3px rgb(0 0 0 / 0.08);
 
-    /* ===================
+   /* ===================
        Spacing Scale
        =================== */
-    --pu-space-xs: 0.25rem;
-    --pu-space-sm: 0.5rem;
-    --pu-space-md: 1rem;
-    --pu-space-lg: 1.5rem;
-    --pu-space-xl: 2rem;
+   --pu-space-xs: 0.25rem;
+   --pu-space-sm: 0.5rem;
+   --pu-space-md: 1rem;
+   --pu-space-lg: 1.5rem;
+   --pu-space-xl: 2rem;
 
-    /* ===================
+   /* ===================
        Border Radius - Refined
        =================== */
-    --pu-radius-sm: 0.375rem;
-    --pu-radius-md: 0.5rem;
-    --pu-radius-lg: 0.75rem;
-    --pu-radius-xl: 1rem;
-    --pu-radius-full: 9999px;
+   --pu-radius-sm: 0.375rem;
+   --pu-radius-md: 0.5rem;
+   --pu-radius-lg: 0.75rem;
+   --pu-radius-xl: 1rem;
+   --pu-radius-full: 9999px;
 
-    /* ===================
+   /* ===================
        Transitions - Smooth
        =================== */
-    --pu-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    --pu-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-    --pu-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+   --pu-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+   --pu-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+   --pu-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+   /* ===================
+       Density Scale
+       =================== */
+   --pu-row-height: 32px;
+   --pu-section-gap: 16px;
+   --pu-field-gap: 12px;
+   --pu-page-padding: 24px;
 }
 
 .dark {
-    /* ===================
+   /* ===================
        Body/Page Background (Dark)
        =================== */
-    --pu-body: #0f172a;
+   --pu-body: #0f172a;
 
-    /* ===================
+   /* ===================
        Surface Colors (Dark) - Rich, not too dark
        =================== */
-    --pu-surface: #1e293b;
-    --pu-surface-alt: #0f172a;
-    --pu-surface-raised: #334155;
-    --pu-surface-overlay: rgba(30, 41, 59, 0.95);
+   --pu-surface: #1e293b;
+   --pu-surface-alt: #0f172a;
+   --pu-surface-raised: #334155;
+   --pu-surface-overlay: rgba(30, 41, 59, 0.95);
 
-    /* ===================
+   /* ===================
        Border Colors (Dark)
        =================== */
-    --pu-border: #334155;
-    --pu-border-muted: #1e293b;
-    --pu-border-strong: #475569;
+   --pu-border: #334155;
+   --pu-border-muted: #1e293b;
+   --pu-border-strong: #475569;
 
-    /* ===================
+   /* ===================
        Text Colors (Dark)
        =================== */
-    --pu-text: #f8fafc;
-    --pu-text-muted: #94a3b8;
-    --pu-text-subtle: #64748b;
-    --pu-text-danger: #f87171;
+   --pu-text: #f8fafc;
+   --pu-text-muted: #94a3b8;
+   --pu-text-subtle: #64748b;
+   --pu-text-danger: #f87171;
 
-    /* ===================
+   /* ===================
        Table Tokens (Dark)
        =================== */
-    --pu-table-header-bg: #0f172a;
-    --pu-table-header-text: #cbd5e1;
-    --pu-table-row-bg: #1e293b;
-    --pu-table-row-hover: #334155;
-    --pu-table-row-selected: theme(colors.primary.900 / 40%);
-    --pu-table-border: #334155;
+   --pu-table-header-bg: #0f172a;
+   --pu-table-header-text: #cbd5e1;
+   --pu-table-row-bg: #1e293b;
+   --pu-table-row-hover: #334155;
+   --pu-table-row-selected: theme(colors.primary.900 / 40%);
+   --pu-table-border: #334155;
 
-    /* ===================
+   /* ===================
        Form Tokens (Dark)
        =================== */
-    --pu-input-bg: #1e293b;
-    --pu-input-border: #475569;
-    --pu-input-placeholder: #64748b;
+   --pu-input-bg: #1e293b;
+   --pu-input-border: #475569;
+   --pu-input-placeholder: #64748b;
 
-    /* ===================
+   /* ===================
        Card Tokens (Dark)
        =================== */
-    --pu-card-bg: #1e293b;
-    --pu-card-border: #334155;
+   --pu-card-bg: #1e293b;
+   --pu-card-border: #334155;
 
-    /* ===================
+   /* ===================
        Shadow System (Dark)
        =================== */
-    --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2), 0 1px 3px 0 rgb(0 0 0 / 0.3);
-    --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.25), 0 4px 6px -1px rgb(0 0 0 / 0.35);
-    --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.2), 0 10px 15px -3px rgb(0 0 0 / 0.4);
+   --pu-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2), 0 1px 3px 0 rgb(0 0 0 / 0.3);
+   --pu-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.25), 0 4px 6px -1px rgb(0 0 0 / 0.35);
+   --pu-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.2), 0 10px 15px -3px rgb(0 0 0 / 0.4);
+
+   /* ===================
+       Density Scale (Dark)
+       =================== */
+   --pu-row-height: 32px;
+   --pu-section-gap: 16px;
+   --pu-field-gap: 12px;
+   --pu-page-padding: 24px;
 }

data/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)
+  }
+}

data/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)
   }

data/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
+    }
+  }
+}

data/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()
   }
 }

data/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

data/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)
+  }
+}

data/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`
+      }
+    })
+  }
+}