plutonium 0.49.1 → 0.50.0

data/lib/plutonium/ui/modal/base.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Modal
+      class Base < Plutonium::UI::Component::Base
+        include Phlex::Slotable
+
+        slot :close
+        slot :footer
+
+        def initialize(title: nil, description: nil)
+          @title = title
+          @description = description
+        end
+
+        def view_template(&block)
+          dialog(**dialog_attributes) do
+            div(class: inner_classes) do
+              render_header
+              render_body(&block)
+              render_footer if footer_slot?
+            end
+          end
+        end
+
+        protected
+
+        # Native <dialog>+showModal() handles the focus trap, Esc-to-close,
+        # and focus restoration on close. We just need to label the dialog
+        # so screen readers announce it on open.
+        def dialog_attributes
+          attrs = {
+            closedby: "any",
+            class: dialog_classes,
+            data: {controller: "remote-modal"},
+            "aria-modal": "true"
+          }
+          if @title
+            attrs[:"aria-labelledby"] = title_id
+          else
+            attrs[:"aria-label"] = "Dialog"
+          end
+          attrs[:"aria-describedby"] = description_id if @description.present?
+          attrs
+        end
+
+        def title_id
+          @title_id ||= "pu-modal-title-#{SecureRandom.hex(4)}"
+        end
+
+        def description_id
+          @description_id ||= "pu-modal-desc-#{SecureRandom.hex(4)}"
+        end
+
+        def dialog_classes
+          raise NotImplementedError
+        end
+
+        def inner_classes
+          "flex flex-col h-full max-h-[inherit] min-h-0"
+        end
+
+        def render_header
+          div(class: "flex items-start justify-between gap-4 px-6 pt-5 pb-4 border-b border-[var(--pu-border)]") do
+            div(class: "min-w-0 flex-1") do
+              if @title
+                h2(id: title_id, class: "text-lg font-semibold text-[var(--pu-text)] truncate") { @title }
+              end
+              if @description.present?
+                p(id: description_id, class: "mt-1 text-sm text-[var(--pu-text-muted)]") { @description }
+              end
+            end
+            render_close_button
+          end
+        end
+
+        def render_close_button
+          if close_slot?
+            render close_slot
+          else
+            button(
+              type: "button",
+              class: "p-1.5 -m-1.5 text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] rounded-md transition-colors",
+              data: {action: "remote-modal#close"},
+              "aria-label": "Close dialog"
+            ) do
+              render Phlex::TablerIcons::X.new(class: "w-5 h-5")
+            end
+          end
+        end
+
+        def render_body(&block)
+          # Body is a flex column with no padding/scroll; content owns its
+          # own padding and scroll regions. This lets form-shaped content
+          # split itself into a scrollable fields region and a pinned
+          # action strip flush with the modal's bottom edge.
+          div(class: "flex-1 min-h-0 flex flex-col overflow-hidden", &block)
+        end
+
+        def render_footer
+          div(class: "flex items-center justify-end gap-2 px-6 py-4 border-t border-[var(--pu-border)]") do
+            render footer_slot
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/modal/centered.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Modal
+      class Centered < Plutonium::UI::Modal::Base
+        protected
+
+        def dialog_classes
+          "rounded-[var(--pu-radius-lg)] w-full max-w-xl " \
+            "bg-[var(--pu-surface)] border border-[var(--pu-border)] " \
+            "backdrop:bg-black/60 backdrop:backdrop-blur-sm " \
+            "top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 " \
+            "max-h-[80vh] " \
+            "hidden open:flex flex-col p-0 " \
+            "opacity-0 open:opacity-100 transition-opacity duration-200 ease-in-out"
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/modal/slideover.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Modal
+      class Slideover < Plutonium::UI::Modal::Base
+        protected
+
+        def dialog_classes
+          "fixed top-0 right-0 bottom-0 left-auto m-0 h-screen w-full sm:w-[480px] max-w-full max-h-screen " \
+            "bg-[var(--pu-surface)] border-l border-[var(--pu-border)] " \
+            "backdrop:bg-black/60 backdrop:backdrop-blur-sm " \
+            "rounded-none p-0 " \
+            "hidden open:flex flex-col " \
+            "translate-x-full open:translate-x-0 " \
+            "transition-[transform,display,overlay] duration-300 ease-out " \
+            "[transition-behavior:allow-discrete] " \
+            "starting:open:translate-x-full " \
+            "backdrop:transition-[display,overlay,background-color] backdrop:duration-300 " \
+            "backdrop:[transition-behavior:allow-discrete] " \
+            "starting:open:backdrop:bg-transparent"
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/page/base.rb

@@ -11,13 +11,15 @@ module Plutonium
         end
 
         def view_template(&block)
-          DynaFrameContent(page_content(block)) do |frame|
+          body = block || proc { render_default_content }
+
+          DynaFrameContent() do
             render_before_header
             render_header
             render_after_header
 
             render_before_content
-            frame.render_content
+            body.call
             render_after_content
 
             render_before_footer
@@ -51,6 +53,11 @@ module Plutonium
         end
 
         def render_breadcrumbs?
+          # Hide breadcrumbs when rendered inside a turbo frame — the host
+          # page already provides the navigation context (e.g., association
+          # tabs on a parent show page).
+          return false if in_frame?
+
           # Check specific page setting first, fall back to global setting
           page_specific_setting = current_definition.send(:"#{page_type}_breadcrumbs")
           page_specific_setting.nil? ? current_definition.breadcrumbs : page_specific_setting
@@ -66,10 +73,6 @@ module Plutonium
           # Implement toolbar content
         end
 
-        def page_content(block)
-          block || proc { render_default_content }
-        end
-
         def render_default_content
           raise NotImplementedError, "#{self.class}#render_default_content"
         end
@@ -78,6 +81,22 @@ module Plutonium
           # Implement footer content
         end
 
+        # Renders the optional aside (right-side panel) on show pages.
+        # No-op by default; future metadata DSL will populate this slot.
+        def render_aside
+        end
+
+        # True when the show layout should reserve space for the aside.
+        # Returns false by default; pages opt-in by overriding.
+        def aside_present? = false
+
+        # True when the page is rendered inside any turbo frame.
+        def in_frame? = current_turbo_frame.present?
+
+        # True when the page is rendered inside the remote_modal turbo frame.
+        # Used by form pages to suppress the sticky footer (modal owns its own footer).
+        def in_modal? = current_turbo_frame == Plutonium::REMOTE_MODAL_FRAME
+
         # Customization hooks
         def render_before_header
         end

data/lib/plutonium/ui/page/edit.rb

@@ -15,7 +15,19 @@ module Plutonium
         end
 
         def render_default_content
-          render partial("resource_form")
+          if in_modal?
+            render_modal_form
+          else
+            div(class: "pb-20") { render partial("resource_form") }
+          end
+        end
+
+        def render_modal_form
+          modal_class = (current_definition.modal == :centered) ?
+            Plutonium::UI::Modal::Centered : Plutonium::UI::Modal::Slideover
+          render modal_class.new(title: page_title, description: page_description) do
+            render partial("resource_form")
+          end
         end
 
         def page_type = :edit_page

data/lib/plutonium/ui/page/index.rb

@@ -4,6 +4,24 @@ module Plutonium
   module UI
     module Page
       class Index < Base
+        # Cookie name carrying a per-resource view preference. Single
+        # source of truth — Table::Resource, Grid::Resource, and the
+        # Stimulus view-switcher controller all read from here. Underscored
+        # token-only characters keep this RFC 6265-compliant (the `:` form
+        # this replaces is technically forbidden, even if browsers
+        # accept it in practice).
+        def self.view_cookie_name(resource_class)
+          "pu_view_#{resource_class.name.gsub("::", "_").underscore}"
+        end
+
+        # Cookie Path scoped to the engine mount point (request.script_name).
+        # Two portals mounting the same resource class get independent
+        # view preferences instead of leaking through a site-wide cookie.
+        def self.view_cookie_path(request)
+          path = request.script_name.to_s
+          path.empty? ? "/" : path
+        end
+
         private
 
         def page_title
@@ -19,7 +37,28 @@ module Plutonium
         end
 
         def render_default_content
-          render partial("resource_table")
+          case selected_view
+          when :grid then render partial("resource_grid")
+          else render partial("resource_table")
+          end
+        end
+
+        # Resolution order:
+        # 1. `?view=` URL param (so a shared link can pin a view)
+        # 2. The view-preference cookie (sticky per-resource selection)
+        # 3. The resource's `default_view` (which itself defaults to
+        #    `views.first`)
+        def selected_view
+          definition = current_definition
+          enabled = definition.defined_views
+
+          requested = params[:view]&.to_sym
+          return requested if requested && enabled.include?(requested)
+
+          stored = helpers.cookies[self.class.view_cookie_name(resource_class)]&.to_sym
+          return stored if stored && enabled.include?(stored)
+
+          definition.default_view
         end
 
         def page_type = :index_page

data/lib/plutonium/ui/page/interactive_action.rb

@@ -17,49 +17,18 @@ module Plutonium
         end
 
         def render_default_content
-          if current_turbo_frame == "remote_modal"
-            dialog(
-              closedby: "any",
-              class: "rounded-[var(--pu-radius-lg)] w-full max-w-3xl
-                      bg-[var(--pu-surface)]
-                      border border-[var(--pu-border)]
-                      backdrop:bg-black/60 backdrop:backdrop-blur-sm
-                      top-auto md:top-1/2 md:-translate-y-1/2 left-1/2 -translate-x-1/2
-                      max-h-[80%] p-6
-                      hidden open:flex flex-col
-                      relative opacity-0 open:opacity-100
-                      transition-opacity duration-300 ease-in-out",
-              style: "box-shadow: var(--pu-shadow-lg)",
-              data: {controller: "remote-modal"}
-            ) do
-              # Close button
-              button(
-                type: "button",
-                class: "absolute top-4 right-4 p-2 text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors duration-200",
-                data: {action: "remote-modal#close"},
-                "aria-label": "Close dialog"
-              ) do
-                svg(
-                  class: "w-5 h-5",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  xmlns: "http://www.w3.org/2000/svg"
-                ) do |s|
-                  s.path(
-                    stroke_linecap: "round",
-                    stroke_linejoin: "round",
-                    stroke_width: "2",
-                    d: "M6 18L18 6M6 6l12 12"
-                  )
-                end
-              end
+          if in_modal?
+            modal_class = (current_interactive_action.modal == :slideover) ?
+              Plutonium::UI::Modal::Slideover : Plutonium::UI::Modal::Centered
 
-              render_page_header
+            render modal_class.new(
+              title: page_title,
+              description: page_description
+            ) do
               render partial("interactive_action_form")
             end
           else
-            render partial("interactive_action_form")
+            div(class: "pb-20") { render partial("interactive_action_form") }
           end
         end
 

data/lib/plutonium/ui/page/new.rb

@@ -15,7 +15,19 @@ module Plutonium
         end
 
         def render_default_content
-          render partial("resource_form")
+          if in_modal?
+            render_modal_form
+          else
+            div(class: "pb-20") { render partial("resource_form") }
+          end
+        end
+
+        def render_modal_form
+          modal_class = (current_definition.modal == :centered) ?
+            Plutonium::UI::Modal::Centered : Plutonium::UI::Modal::Slideover
+          render modal_class.new(title: page_title, description: page_description) do
+            render partial("resource_form")
+          end
         end
 
         def page_type = :new_page

data/lib/plutonium/ui/page/show.rb

@@ -19,7 +19,14 @@ module Plutonium
         end
 
         def render_default_content
-          render partial("resource_details")
+          if aside_present?
+            div(class: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_240px] gap-6") do
+              div { render partial("resource_details") }
+              aside(class: "hidden lg:block") { render_aside }
+            end
+          else
+            render partial("resource_details")
+          end
         end
 
         def page_type = :show_page

data/lib/plutonium/ui/page_header.rb

@@ -8,30 +8,25 @@ module Plutonium
       end
 
       def view_template
-        div(class: "sm:flex sm:space-y-0 sm:gap-6 sm:flex-row items-center justify-between space-y-4 mb-8") {
-          div {
-            phlexi_render(@title) {
-              render_title @title
-            }
-
-            phlexi_render(@description) {
-              render_description @description
-            }
-          }
+        div(class: "flex items-start justify-between gap-4 mb-4") do
+          div(class: "min-w-0 flex-1") do
+            phlexi_render(@title) { render_title @title } if @title
+            phlexi_render(@description) { render_description @description } if @description.present?
+          end
           render_actions if @actions.any?
-        }
+        end
       end
 
       private
 
       def render_title(title)
-        h2(class: "mb-2 text-3xl font-bold leading-none tracking-tight text-[var(--pu-text)] md:text-4xl") {
+        h1(class: "text-xl font-semibold leading-tight text-[var(--pu-text)] truncate") {
           title
         }
       end
 
       def render_description(description)
-        p(class: "text-lg text-[var(--pu-text-muted)]") {
+        p(class: "mt-1 text-sm text-[var(--pu-text-muted)]") {
           description
         }
       end

data/lib/plutonium/ui/panel.rb

@@ -1,5 +1,8 @@
 module Plutonium
   module UI
+    # A lightweight panel: optional title + action items rendered as a small
+    # floating cluster in the top-right of the panel; content fills the panel
+    # body. No outer card chrome — the panel sits flush in its host.
     class Panel < Plutonium::UI::Component::Base
       def initialize
         @items = []
@@ -23,30 +26,18 @@ module Plutonium
       end
 
       def view_template
-        wrapped do
-          render_toolbar if render_toolbar?
-          render_content if render_content?
-        end
+        render_toolbar if render_toolbar?
+        render_content if render_content?
       end
 
       private
 
-      def wrapped(&)
-        div(class: "mt-8", &)
-      end
-
       def render_toolbar
-        div(class: "flex justify-between items-center mb-6") do
-          if @title
-            h5(class: "text-2xl font-bold tracking-tight text-[var(--pu-text)]") do
-              @title
-            end
-          end
-          div(class: "flex gap-3") do
-            @items.each do |item|
-              render item
-            end
+        div(class: "flex items-center justify-end gap-0.5 mb-2") do
+          if @title.present?
+            span(class: "mr-auto text-[10px] font-semibold uppercase tracking-wider text-[var(--pu-text-muted)]") { @title }
           end
+          @items.each { |item| render item }
         end
       end
 
@@ -55,7 +46,7 @@ module Plutonium
       end
 
       def render_toolbar?
-        @title || @items
+        @title.present? || @items.any?
       end
 
       def render_content?

data/lib/plutonium/ui/sidebar_menu.rb

@@ -2,8 +2,8 @@ require "phlexi-menu"
 
 module Plutonium
   module UI
-    # A sidebar navigation component that renders a max depth of 2 levels
-    # Provides collapsible menu sections and is compatible with turbo-permanent
+    # A sidebar navigation component that renders a max depth of 2 levels.
+    # Provides collapsible menu sections and is compatible with turbo-permanent.
     class SidebarMenu < Phlexi::Menu::Component
       include Plutonium::UI::Component::Behaviour
 
@@ -64,29 +64,6 @@ module Plutonium
         end
       end
 
-      # def render_items(items, depth = 0)
-      #   return if depth >= @max_depth
-
-      #   if depth.zero?
-      #     ul(class: themed(:items_container, depth)) do
-      #       items.each do |item|
-      #         render_item_wrapper(item, depth)
-      #       end
-      #     end
-      #   else
-      #     # Use collapsible rendering for nested levels
-      #     ul(
-      #       id: generate_menu_id(:root),
-      #       class: themed(:sub_items_container, depth),
-      #       data: {"resource-collapse-target": "menu"}
-      #     ) do
-      #       items.each do |item|
-      #         render_item_wrapper(item, depth)
-      #       end
-      #     end
-      #   end
-      # end
-
       def render_item_wrapper(item, depth)
         wrapper_attrs = {
           class: tokens(themed(:item_wrapper, depth)),

data/lib/plutonium/ui/tab_list.rb

@@ -4,6 +4,10 @@ module Plutonium
       class TabDefinition
       end
 
+      BASE_BUTTON_CLASSES = "inline-block px-5 py-3 border-b-2 rounded-t-lg transition-colors"
+      ACTIVE_CLASSES = "focus:outline-none text-primary-600 border-primary-600 dark:text-primary-400 dark:border-primary-400"
+      INACTIVE_CLASSES = "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] border-transparent hover:border-[var(--pu-border-strong)]"
+
       def initialize(...)
         super
 
@@ -19,25 +23,30 @@ module Plutonium
       end
 
       def view_template
+        default_identifier = @tabs.first&.dig(:identifier)
+
         div(
           data_controller: "resource-tab-list",
-          data_resource_tab_list_active_classes_value: "focus:outline-none text-primary-600 border-primary-600 dark:text-primary-400 dark:border-primary-400",
-          data_resource_tab_list_in_active_classes_value: "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] border-transparent hover:border-[var(--pu-border-strong)]"
+          data_resource_tab_list_active_classes_value: ACTIVE_CLASSES,
+          data_resource_tab_list_in_active_classes_value: INACTIVE_CLASSES
         ) do
-          div(class: "mb-6 border-b border-[var(--pu-border)]") do
+          div(class: "relative mb-6 border-b border-[var(--pu-border)]") do
             ul(
-              class: "flex flex-wrap -mb-px text-base font-semibold text-center gap-1",
+              class: "flex flex-nowrap overflow-x-auto whitespace-nowrap -mb-px text-base font-semibold gap-1 " \
+                     "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
               role: "tablist"
             ) do
               @tabs.each do |tab|
+                active = tab[:identifier] == default_identifier
                 li(role: "presentation") do
                   button(
-                    class: "inline-block px-5 py-3 border-b-2 rounded-t-lg transition-colors",
+                    class: button_classes_for(active),
                     id: "#{tab[:identifier]}-tab",
                     type: "button",
                     role: "tab",
                     aria_controls: "#{tab[:identifier]}-tabpanel",
-                    aria_selected: "false",
+                    aria_selected: active.to_s,
+                    tabindex: active ? "0" : "-1",
                     data_resource_tab_list_target: "btn",
                     data_target: "#{tab[:identifier]}-tabpanel",
                     data_action: "click->resource-tab-list#select"
@@ -49,15 +58,22 @@ module Plutonium
                 end
               end
             end
+            div(
+              class: "pointer-events-none absolute right-0 top-0 bottom-0 w-8 " \
+                     "bg-gradient-to-l from-[var(--pu-body)] to-transparent",
+              aria_hidden: "true"
+            )
           end
 
           div do
             @tabs.each do |tab|
+              active = tab[:identifier] == default_identifier
               div(
-                hidden: true,
+                hidden: !active,
                 id: "#{tab[:identifier]}-tabpanel",
                 role: "tabpanel",
                 aria_labelledby: "#{tab[:identifier]}-tab",
+                aria_hidden: (!active).to_s,
                 data_resource_tab_list_target: "tab"
               ) do
                 phlexi_render tab[:block] do |val|
@@ -68,6 +84,12 @@ module Plutonium
           end
         end
       end
+
+      private
+
+      def button_classes_for(active)
+        "#{BASE_BUTTON_CLASSES} #{active ? ACTIVE_CLASSES : INACTIVE_CLASSES}"
+      end
     end
   end
 end