plutonium 0.49.1 → 0.50.0

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

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

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

data/src/js/controllers/table_column_menu_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table-column-menu"
+// Toggles the column ⋯ menu panel; closes on outside click and Escape.
+export default class extends Controller {
+  static targets = ["panel"]
+
+  connect() {
+    this._onDocClick = this._onDocClick.bind(this)
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (this.hasPanelTarget) {
+      const isNowVisible = !this.panelTarget.classList.toggle("hidden")
+      if (isNowVisible) {
+        document.addEventListener("click", this._onDocClick)
+        this._onKey = (e) => { if (e.key === "Escape") this._close() }
+        document.addEventListener("keydown", this._onKey)
+      } else {
+        this._unbind()
+      }
+    }
+  }
+
+  _close() {
+    if (this.hasPanelTarget) this.panelTarget.classList.add("hidden")
+    this._unbind()
+  }
+
+  _unbind() {
+    document.removeEventListener("click", this._onDocClick)
+    if (this._onKey) {
+      document.removeEventListener("keydown", this._onKey)
+      this._onKey = null
+    }
+  }
+
+  _onDocClick(event) {
+    if (!this.element.contains(event.target)) this._close()
+  }
+}

data/src/js/controllers/table_header_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="table-header"
+// Routes column-header clicks: shift-click navigates to multi-href instead of href,
+// adding the column to the existing sort stack (multi-sort).
+// Plain click lets the default link navigation happen, which replaces all sorts.
+export default class extends Controller {
+  headerClick(event) {
+    if (!event.shiftKey) return // plain click: let the link navigate normally
+    const link = event.currentTarget
+    const multiHref = link.dataset.tableHeaderMultiHref
+    if (!multiHref) return
+    event.preventDefault()
+    Turbo.visit(multiHref)
+  }
+}

data/src/js/controllers/view_switcher_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="view-switcher"
+// Persists the user's chosen index view in a cookie so the server can
+// render the right shape on next request. Reload after writing so the
+// page comes back with everything (toolbar, filters, table/grid)
+// matching the new view.
+export default class extends Controller {
+  static values = { cookieName: String, cookiePath: { type: String, default: "/" } }
+
+  select(event) {
+    const view = event.params.view
+    if (!view || !this.cookieNameValue) return
+
+    // 1 year, scoped to the portal's mount path so different portals
+    // can hold different view preferences for the same resource.
+    // SameSite=Lax keeps it on top-level navigations but blocks
+    // cross-site requests from carrying it along.
+    const maxAge = 60 * 60 * 24 * 365
+    const path = this.cookiePathValue || "/"
+    document.cookie = `${this.cookieNameValue}=${encodeURIComponent(view)}; Path=${path}; Max-Age=${maxAge}; SameSite=Lax`
+
+    // Strip any legacy `?view=` param so the cookie is the source of
+    // truth from now on.
+    const url = new URL(window.location.href)
+    url.searchParams.delete("view")
+    window.location.href = url.toString()
+  }
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.49.1
+  version: 0.50.0
 platform: ruby
 authors:
 - Stefan Froelich
 bindir: exe
 cert_chain: []
-date: 2026-05-06 00:00:00.000000000 Z
+date: 2026-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -480,6 +480,7 @@ files:
 - app/views/resource/_resource_details.html.erb
 - app/views/resource/_resource_details.rabl
 - app/views/resource/_resource_form.html.erb
+- app/views/resource/_resource_grid.html.erb
 - app/views/resource/_resource_table.html.erb
 - app/views/resource/edit.html.erb
 - app/views/resource/errors.rabl
@@ -612,8 +613,11 @@ files:
 - docs/superpowers/plans/2026-04-14-plutonium-testing.md.tasks.json
 - docs/superpowers/plans/2026-05-06-multi-invite-model-support.md
 - docs/superpowers/plans/2026-05-06-multi-invite-model-support.md.tasks.json
+- docs/superpowers/plans/2026-05-07-ui-layout-overhaul.md
+- docs/superpowers/plans/2026-05-07-ui-layout-overhaul.md.tasks.json
 - docs/superpowers/specs/2026-04-08-plutonium-skills-overhaul-design.md
 - docs/superpowers/specs/2026-04-14-plutonium-testing-design.md
+- docs/superpowers/specs/2026-05-07-ui-layout-overhaul-design.md
 - esbuild.config.js
 - exe/pug
 - gemfiles/rails_7.gemfile
@@ -909,11 +913,13 @@ files:
 - lib/plutonium/definition/config_attr.rb
 - lib/plutonium/definition/defineable_props.rb
 - lib/plutonium/definition/inheritable_config_attr.rb
+- lib/plutonium/definition/metadata.rb
 - lib/plutonium/definition/nested_inputs.rb
 - lib/plutonium/definition/presentable.rb
 - lib/plutonium/definition/scoping.rb
 - lib/plutonium/definition/search.rb
 - lib/plutonium/definition/sorting.rb
+- lib/plutonium/definition/views.rb
 - lib/plutonium/engine.rb
 - lib/plutonium/engine/validator.rb
 - lib/plutonium/helpers.rb
@@ -1031,11 +1037,13 @@ files:
 - lib/plutonium/ui/form/base.rb
 - lib/plutonium/ui/form/components/easymde.rb
 - lib/plutonium/ui/form/components/flatpickr.rb
+- lib/plutonium/ui/form/components/hidden_wrapper.rb
 - lib/plutonium/ui/form/components/intl_tel_input.rb
 - lib/plutonium/ui/form/components/key_value_store.rb
 - lib/plutonium/ui/form/components/resource_select.rb
 - lib/plutonium/ui/form/components/secure_association.rb
 - lib/plutonium/ui/form/components/secure_polymorphic_association.rb
+- lib/plutonium/ui/form/components/sticky_footer.rb
 - lib/plutonium/ui/form/components/uppy.rb
 - lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb
 - lib/plutonium/ui/form/interaction.rb
@@ -1044,12 +1052,19 @@ files:
 - lib/plutonium/ui/form/resource.rb
 - lib/plutonium/ui/form/theme.rb
 - lib/plutonium/ui/frame_navigator_panel.rb
+- lib/plutonium/ui/grid/card.rb
+- lib/plutonium/ui/grid/resource.rb
 - lib/plutonium/ui/layout/base.rb
 - lib/plutonium/ui/layout/basic_layout.rb
 - lib/plutonium/ui/layout/header.rb
+- lib/plutonium/ui/layout/icon_rail.rb
 - lib/plutonium/ui/layout/resource_layout.rb
 - lib/plutonium/ui/layout/rodauth_layout.rb
 - lib/plutonium/ui/layout/sidebar.rb
+- lib/plutonium/ui/layout/topbar.rb
+- lib/plutonium/ui/modal/base.rb
+- lib/plutonium/ui/modal/centered.rb
+- lib/plutonium/ui/modal/slideover.rb
 - lib/plutonium/ui/nav_grid_menu.rb
 - lib/plutonium/ui/nav_user.rb
 - lib/plutonium/ui/page/base.rb
@@ -1066,12 +1081,17 @@ files:
 - lib/plutonium/ui/table/base.rb
 - lib/plutonium/ui/table/components/attachment.rb
 - lib/plutonium/ui/table/components/bulk_actions_toolbar.rb
+- lib/plutonium/ui/table/components/filter_form.rb
+- lib/plutonium/ui/table/components/filter_pills.rb
 - lib/plutonium/ui/table/components/pagy_info.rb
 - lib/plutonium/ui/table/components/pagy_pagination.rb
 - lib/plutonium/ui/table/components/row_actions_dropdown.rb
 - lib/plutonium/ui/table/components/scopes_bar.rb
+- lib/plutonium/ui/table/components/scopes_pills.rb
 - lib/plutonium/ui/table/components/search_bar.rb
 - lib/plutonium/ui/table/components/selection_column.rb
+- lib/plutonium/ui/table/components/toolbar.rb
+- lib/plutonium/ui/table/components/view_switcher.rb
 - lib/plutonium/ui/table/display_theme.rb
 - lib/plutonium/ui/table/resource.rb
 - lib/plutonium/ui/table/theme.rb
@@ -1102,7 +1122,9 @@ files:
 - src/js/controllers/attachment_input_controller.js
 - src/js/controllers/attachment_preview_container_controller.js
 - src/js/controllers/attachment_preview_controller.js
+- src/js/controllers/autosubmit_controller.js
 - src/js/controllers/bulk_actions_controller.js
+- src/js/controllers/capture_url_controller.js
 - src/js/controllers/clipboard_controller.js
 - src/js/controllers/color_mode_controller.js
 - src/js/controllers/easymde_controller.js
@@ -1110,6 +1132,8 @@ files:
 - src/js/controllers/flatpickr_controller.js
 - src/js/controllers/form_controller.js
 - src/js/controllers/frame_navigator_controller.js
+- src/js/controllers/icon_rail_controller.js
+- src/js/controllers/icon_rail_flyout_controller.js
 - src/js/controllers/intl_tel_input_controller.js
 - src/js/controllers/key_value_store_controller.js
 - src/js/controllers/nested_resource_form_fields_controller.js
@@ -1121,10 +1145,14 @@ files:
 - src/js/controllers/resource_drop_down_controller.js
 - src/js/controllers/resource_header_controller.js
 - src/js/controllers/resource_tab_list_controller.js
+- src/js/controllers/row_click_controller.js
 - src/js/controllers/select_navigator.js
 - src/js/controllers/sidebar_controller.js
 - src/js/controllers/slim_select_controller.js
+- src/js/controllers/table_column_menu_controller.js
+- src/js/controllers/table_header_controller.js
 - src/js/controllers/textarea_autogrow_controller.js
+- src/js/controllers/view_switcher_controller.js
 - src/js/core.js
 - src/js/plutonium.js
 - src/js/support/dom_element.js
@@ -1144,7 +1172,7 @@ metadata:
   homepage_uri: https://radioactive-labs.github.io/plutonium-core/
   source_code_uri: https://github.com/radioactive-labs/plutonium-core
 post_install_message: |
-  ⚠️  Plutonium 0.49.1 — breaking change
+  ⚠️  Plutonium 0.50.0 — breaking change
 
   Entity-scoped URL helpers and path params have been renamed from
   `<entity>_scope_*` to `<entity>_scoped_*`.