plutonium 0.49.1 → 0.50.0

data/lib/plutonium/ui/display/theme.rb

@@ -8,7 +8,8 @@ module Plutonium
           super.merge({
             base: "",
             value_wrapper: "max-h-[300px] overflow-y-auto",
-            fields_wrapper: "p-8 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-x-8 gap-y-8 grid-flow-row-dense",
+            fields_wrapper: "pu-card",
+            fields_inner: "pu-card-body grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-x-8 gap-y-6 grid-flow-row-dense",
 
             # Labels and descriptions
             label: "text-sm font-semibold uppercase tracking-wide text-[var(--pu-text-muted)] mb-2",

data/lib/plutonium/ui/dyna_frame/content.rb

@@ -1,29 +1,23 @@
 module Plutonium
   module UI
     module DynaFrame
+      # Conditionally wraps its content in a turbo-frame matching the inbound
+      # request's `Turbo-Frame` header. In frame mode adds the flash partial
+      # so toast/alert messages still surface inside frames; in non-frame
+      # mode renders the block as-is.
       class Content < Plutonium::UI::Component::Base
         include Phlex::Rails::Helpers::TurboFrameTag
 
-        def initialize(content = nil)
-          @content = content
-        end
-
-        def view_template
+        def view_template(&block)
           if current_turbo_frame.present?
-            # Frame request: render only the turbo-frame with content
             turbo_frame_tag(current_turbo_frame) do
               render partial("flash")
-              @content&.call
+              yield if block_given?
             end
-          else
-            # Regular request: yield self so caller can call frame.render_content
-            yield(self)
+          elsif block_given?
+            yield
           end
         end
-
-        def render_content
-          @content&.call
-        end
       end
     end
   end

data/lib/plutonium/ui/empty_card.rb

@@ -8,7 +8,7 @@ module Plutonium
       end
 
       def view_template
-        div(class: "pu-card") do
+        div(class: "pu-card mt-4") do
           div(class: "pu-empty-state") do
             p(class: "pu-empty-state-description") { message }
             yield if block_given?

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

@@ -10,6 +10,28 @@ module Plutonium
           include Phlexi::Field::Common::Tokens
           include Plutonium::UI::Form::Options::InferredTypes
 
+          # Consume `:as` here so it doesn't land in Phlexi's `@options` —
+          # `:as` is a Plutonium-internal concept (it picks the tag method),
+          # not a Phlexi field option.
+          def initialize(*args, as: nil, **kwargs, &block)
+            @as = as
+            super(*args, **kwargs, &block)
+          end
+
+          attr_reader :as
+
+          def hidden?
+            as.to_s == "hidden"
+          end
+
+          # Hidden fields (`form.field(name, as: :hidden)`) skip the label /
+          # hint / error chrome and render inside a `<div hidden>` so they're
+          # also excluded from CSS Grid / Flex layout.
+          def wrapped(**, &)
+            return Plutonium::UI::Form::Components::HiddenWrapper.new(self, &) if hidden?
+            super
+          end
+
           def textarea_tag(**attributes, &)
             attributes[:data_controller] = tokens(attributes[:data_controller], "textarea-autogrow")
             super
@@ -45,7 +67,13 @@ module Plutonium
           end
 
           def resource_select_tag(**attributes, &)
-            create_component(Components::ResourceSelect, :select, **attributes, &)
+            attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select")
+            # class!: "" clears the underlying <select>'s themed classes
+            # (pu-input etc.) — the visible element is slim-select's
+            # generated .ss-main, so leaving Tailwind input chrome on the
+            # native select can leak into chip layout (e.g. forcing
+            # flex-direction: column or w-full on multi-mode chips).
+            create_component(Components::ResourceSelect, :select, class!: "", **attributes, &)
           end
 
           def secure_association_tag(**attributes, &)

data/lib/plutonium/ui/form/components/hidden_wrapper.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # Wrapper for fields configured as `as: :hidden`. Emits a hidden div
+        # containing only the input — no label, no hint, no error chrome.
+        # `hidden: true` (HTML5) sets `display: none` so the wrapper is
+        # excluded from CSS Grid / Flex layout, not just visually hidden.
+        class HiddenWrapper < Phlexi::Form::Components::Base
+          def view_template(&block)
+            div(hidden: true) do
+              yield(field) if block
+            end
+          end
+
+          # No id needed for a layout-suppressed wrapper.
+          def build_attributes
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/resource_select.rb

@@ -6,18 +6,96 @@ module Plutonium
       module Components
         # Select for choosing a resource record
         class ResourceSelect < Phlexi::Form::Components::Select
+          include Plutonium::UI::Component::Methods
+
+          # Cap on the number of records the dropdown materialises. Keeps
+          # very large association tables from rendering thousands of
+          # options into the page; consumers needing more should pair this
+          # with a typeahead control later.
+          DEFAULT_CHOICE_LIMIT = 100
+
           protected
 
           def choices
             @choices ||= begin
-              collection = @raw_choices || @association_class&.all || []
+              collection = if @raw_choices
+                @raw_choices
+              elsif @association_class.nil?
+                []
+              else
+                relation = @association_class.all
+                relation = relation.limit(@choice_limit) if relation.respond_to?(:limit) && @choice_limit
+                if @skip_authorization
+                  relation
+                else
+                  authorized_resource_scope(@association_class, relation: relation)
+                end
+              end
               build_choice_mapper(collection)
             end
           end
 
           def build_attributes
+            # Defaults must land BEFORE super — AcceptsChoices.build_attributes
+            # consumes :value_method / :label_method off `attributes` into
+            # its own ivars, so anything we set after super has no effect.
+            attributes[:value_method] ||= :to_signed_global_id
+            attributes[:label_method] ||= :to_label
+
             super
+
             @association_class = attributes.delete(:association_class)
+            @skip_authorization = attributes.delete(:skip_authorization)
+            @choice_limit = attributes.fetch(:choice_limit) { DEFAULT_CHOICE_LIMIT }
+            attributes.delete(:choice_limit)
+          end
+
+          # SGIDs include a timestamp + signature, so the SGID in the URL
+          # (generated when the user submitted) won't string-equal the
+          # SGID we just generated for the same record. Compare by the
+          # decoded model id instead, falling back to raw string equality
+          # for non-SGID values (legacy URLs / explicit raw choices).
+          def selected?(option)
+            if attributes[:multiple]
+              Array(field.value).any? { |v| same_record?(v, option) }
+            else
+              same_record?(field.value, option)
+            end
+          end
+
+          # AcceptsChoices.normalize_simple_input rejects any submitted
+          # value that doesn't string-match an option's value. With SGIDs
+          # the URL value (signed/timestamped at submit time) never
+          # string-equals a freshly generated option SGID for the same
+          # record, so the value gets silently dropped — no WHERE clause
+          # is built and the filter behaves as if it weren't applied.
+          # Match by decoded model id so the input survives.
+          def normalize_simple_input(input_value)
+            return nil if input_value.blank?
+            choices.values.find { |opt| same_record?(input_value, opt) } && input_value
+          end
+
+          # Two values point at the same record when both decode to the
+          # same SGID (class + id). For explicit non-SGID `@raw_choices`,
+          # both sides are plain strings and string-equality is the only
+          # sensible answer. Mixed-format (one SGID, one raw) returns
+          # false — no cross-format guessing.
+          def same_record?(a, b)
+            return false if a.blank? || b.blank?
+
+            a_pair = decode_class_and_id(a)
+            b_pair = decode_class_and_id(b)
+            return a_pair == b_pair if a_pair && b_pair
+            return false if a_pair || b_pair
+
+            a.to_s == b.to_s
+          end
+
+          def decode_class_and_id(value)
+            gid = SignedGlobalID.parse(value)
+            gid && [gid.model_class.name, gid.model_id]
+          rescue
+            nil
           end
 
           # Use include_blank string as blank option text (Phlexi default uses placeholder)

data/lib/plutonium/ui/form/components/secure_association.rb

@@ -7,6 +7,8 @@ module Plutonium
         class SecureAssociation < Phlexi::Form::Components::AssociationBase
           include Plutonium::UI::Component::Methods
 
+          DEFAULT_CHOICE_LIMIT = Plutonium::UI::Form::Components::ResourceSelect::DEFAULT_CHOICE_LIMIT
+
           def view_template
             div(class: "flex items-center space-x-1") do
               super
@@ -23,9 +25,9 @@ module Plutonium
 
             a(
               href: add_url,
-              class: "bg-[var(--pu-surface-alt)] hover:bg-[var(--pu-border)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] px-4 py-3 focus:ring-2 focus:ring-[var(--pu-border)] focus:outline-none text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors"
+              class: "inline-flex items-center justify-center w-9 h-9 shrink-0 bg-[var(--pu-surface-alt)] hover:bg-[var(--pu-border)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] focus:ring-2 focus:ring-[var(--pu-border)] focus:outline-none text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors"
             ) do
-              render Phlex::TablerIcons::Plus.new(class: "w-6 h-6")
+              render Phlex::TablerIcons::Plus.new(class: "w-4 h-4")
             end
           end
 
@@ -51,6 +53,7 @@ module Plutonium
               else
                 authorized_resource_scope(association_reflection.klass, relation: choices_from_association(association_reflection.klass))
               end
+              collection = collection.limit(@choice_limit) if @choice_limit && collection.respond_to?(:limit)
               build_choice_mapper(collection)
             end
           end
@@ -63,6 +66,8 @@ module Plutonium
           def build_association_attributes
             @skip_authorization = attributes.delete(:skip_authorization)
             @add_action = attributes.delete(:add_action)
+            @choice_limit = attributes.fetch(:choice_limit) { DEFAULT_CHOICE_LIMIT }
+            attributes.delete(:choice_limit)
 
             attributes.fetch(:value_method) { attributes[:value_method] = :to_signed_global_id }
 

data/lib/plutonium/ui/form/components/sticky_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        class StickyFooter < Plutonium::UI::Component::Base
+          def view_template(&block)
+            div(class: "fixed bottom-0 left-0 right-0 lg:left-14 z-20 " \
+                       "h-14 bg-[var(--pu-surface)] border-t border-[var(--pu-border)] " \
+                       "px-6 flex items-center justify-end gap-2", &block)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/resource.rb

@@ -18,10 +18,23 @@ module Plutonium
         end
 
         def form_template
-          render_fields
+          if in_modal?
+            # In modal: form is the flex container that fills the modal
+            # body. Fields region scrolls; action strip sits flush at the
+            # bottom edge of the modal.
+            div(class: "flex-1 min-h-0 overflow-y-auto px-6 py-5") do
+              render_fields
+            end
+          else
+            render_fields
+          end
           render_actions
         end
 
+        def form_class
+          in_modal? ? "flex-1 flex flex-col min-h-0" : super
+        end
+
         private
 
         def render_fields
@@ -33,18 +46,43 @@ module Plutonium
         end
 
         def render_actions
-          input name: "return_to", value: request.params[:return_to], type: :hidden, hidden: true
-
-          actions_wrapper {
-            render_submit_and_continue_button if show_submit_and_continue?
+          # capture-url controller sets this element's value to
+          # window.location.href on connect, so URL fragments (#tab-id)
+          # survive the redirect after submit (the server never sees them).
+          input name: "return_to",
+            value: request.params[:return_to] || request.original_url,
+            type: :hidden,
+            hidden: true,
+            data: {controller: "capture-url"}
+
+          if in_modal?
+            div(class: "shrink-0 px-6 py-3 " \
+                       "bg-[var(--pu-surface)] border-t border-[var(--pu-border)] " \
+                       "flex items-center justify-end gap-2") do
+              render_submit_and_continue_button if show_submit_and_continue?
+              render submit_button
+            end
+          else
+            render Plutonium::UI::Form::Components::StickyFooter.new do
+              render_submit_and_continue_button if show_submit_and_continue?
+              render submit_button
+            end
+          end
+        end
 
-            render submit_button
-          }
+        def in_modal?
+          current_turbo_frame == Plutonium::REMOTE_MODAL_FRAME
         end
 
         def show_submit_and_continue?
           return false unless object.respond_to?(:new_record?)
 
+          # Continue / add-another lands on the form's standalone URL —
+          # which breaks the experience when the form is inside a frame
+          # (modal or association tab) since the redirect can't keep the
+          # user in that frame context.
+          return false if current_turbo_frame.present?
+
           # Check explicit configuration first
           configured = resource_definition.submit_and_continue
           return configured unless configured.nil?
@@ -60,7 +98,7 @@ module Plutonium
             type: :submit,
             name: "return_to",
             value: request.url,
-            class: "px-4 py-2 bg-secondary-600 text-white rounded-md hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500"
+            class: "pu-btn pu-btn-md pu-btn-outline"
           ) { label }
         end
 
@@ -116,7 +154,8 @@ module Plutonium
             end
           end
 
-          field_options = field_options.except(:as, :condition)
+          # Keep `:as` so the Builder can detect hidden fields via `options[:as]`.
+          field_options = field_options.except(:condition)
 
           condition = input_options[:condition] || field_options[:condition]
           conditionally_hidden = condition && !instance_exec(&condition)

data/lib/plutonium/ui/form/theme.rb

@@ -49,7 +49,7 @@ module Plutonium
             hint: "pu-hint whitespace-pre",
 
             # Error themes
-            error: "pu-error",
+            error: "text-xs text-danger-600 mt-1",
 
             # Button themes
             button: "pu-btn pu-btn-md pu-btn-primary",

data/lib/plutonium/ui/frame_navigator_panel.rb

@@ -10,12 +10,14 @@ module Plutonium
 
         def view_template
           button(
+            type: "button",
             title: @label,
+            aria: {label: @label},
             style: "display: none",
-            class: "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors",
+            class: "inline-flex items-center justify-center w-7 h-7 rounded text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] transition-colors",
             **@attributes
           ) {
-            render @icon.new(class: "w-6 h-6")
+            render @icon.new(class: "w-4 h-4")
           }
         end
       end
@@ -31,11 +33,12 @@ module Plutonium
         def view_template
           a(
             title: @label,
-            class: "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors",
+            aria: {label: @label},
             href: @href,
+            class: "inline-flex items-center justify-center w-7 h-7 rounded text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] transition-colors",
             **@attributes
           ) {
-            render @icon.new(class: "w-6 h-6")
+            render @icon.new(class: "w-4 h-4")
           }
         end
       end

data/lib/plutonium/ui/grid/card.rb

@@ -0,0 +1,235 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Grid
+      # Renders a single record as a card built from semantic slots
+      # (image / header / subheader / body / meta / footer) declared via
+      # `grid_fields` on the resource definition. Each slot is optional;
+      # `header` falls back to `record.to_label` when undeclared.
+      class Card < Plutonium::UI::Component::Base
+        attr_reader :record, :resource_definition, :resource_fields
+
+        def initialize(record, resource_definition:, resource_fields: nil)
+          @record = record
+          @resource_definition = resource_definition
+          @resource_fields = resource_fields
+        end
+
+        def view_template
+          article(
+            class: card_class,
+            data: {controller: "row-click", action: "click->row-click#click"}
+          ) do
+            render_show_link if can_show?
+            render_actions_dropdown
+            case resource_definition.defined_grid_layout
+            when :media then render_media_layout
+            else render_compact_layout
+            end
+          end
+        end
+
+        private
+
+        def slots = resource_definition.defined_grid_fields
+
+        # ---------------------------------------------------------------
+        # Layout shells
+        # ---------------------------------------------------------------
+
+        def render_compact_layout
+          div(class: "flex items-start gap-3 p-4") do
+            render_image_slot(size: :sm) if slots[:image]
+            div(class: "min-w-0 flex-1 flex flex-col gap-1") do
+              render_header_slot
+              render_subheader_slot if slots[:subheader]
+              render_body_slot if slots[:body]
+              render_meta_slot if slots[:meta]
+              render_footer_slot if footer_field
+            end
+          end
+        end
+
+        def render_media_layout
+          render_image_slot(size: :cover) if slots[:image]
+          div(class: "p-4 flex flex-col gap-1") do
+            render_header_slot
+            render_subheader_slot if slots[:subheader]
+            render_body_slot if slots[:body]
+            render_meta_slot if slots[:meta]
+            render_footer_slot if footer_field
+          end
+        end
+
+        # Footer falls back to `:created_at` when the slot is unset and
+        # the record has a created_at column. Gives cards a sensible
+        # second line without forcing every grid_fields call to repeat it.
+        def footer_field
+          slots[:footer] || (record.respond_to?(:created_at) ? :created_at : nil)
+        end
+
+        # ---------------------------------------------------------------
+        # Slot renderers
+        # ---------------------------------------------------------------
+
+        def render_image_slot(size:)
+          value = field_value(slots[:image])
+          return unless value
+          src = image_src_for(value)
+          return unless src
+
+          if size == :cover
+            div(class: "w-full aspect-video bg-[var(--pu-surface-alt)] overflow-hidden") do
+              img(src: src, alt: header_text.to_s, class: "w-full h-full object-cover")
+            end
+          else
+            img(
+              src: src,
+              alt: header_text.to_s,
+              class: "w-12 h-12 rounded-full object-cover bg-[var(--pu-surface-alt)] shrink-0"
+            )
+          end
+        end
+
+        def render_header_slot
+          h3(class: "text-sm font-semibold text-[var(--pu-text)] truncate") do
+            plain header_text
+          end
+        end
+
+        def render_subheader_slot
+          value = field_value(slots[:subheader])
+          return if value.blank?
+          p(class: "text-xs text-[var(--pu-text-muted)] truncate") { plain helpers.display_name_of(value) }
+        end
+
+        def render_body_slot
+          value = field_value(slots[:body])
+          return if value.blank?
+          p(class: "text-sm text-[var(--pu-text)] line-clamp-3") { plain helpers.display_name_of(value) }
+        end
+
+        def render_meta_slot
+          fields = Array(slots[:meta])
+          values = fields.map { |f| field_value(f) }.reject(&:blank?)
+          return if values.empty?
+
+          div(class: "flex flex-wrap items-center gap-1.5 mt-1") do
+            values.each do |v|
+              span(class: "inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium " \
+                          "bg-[var(--pu-surface-alt)] text-[var(--pu-text-muted)]") do
+                plain helpers.display_name_of(v)
+              end
+            end
+          end
+        end
+
+        def render_footer_slot
+          value = field_value(footer_field)
+          return if value.blank?
+          p(class: "text-xs text-[var(--pu-text-subtle)] mt-1") do
+            if value.respond_to?(:strftime)
+              # display_datetime_value returns HTML-safe <time> markup
+              # rendered by the timeago Stimulus controller.
+              raw safe(helpers.display_datetime_value(value))
+            else
+              plain helpers.display_name_of(value)
+            end
+          end
+        end
+
+        # ---------------------------------------------------------------
+        # Card chrome — selection, actions, show
+        # ---------------------------------------------------------------
+
+        def render_actions_dropdown
+          # Cards have limited surface area, so all collection-record
+          # actions (including primary ones like Edit) live in the
+          # dropdown rather than splitting between buttons and a menu
+          # like the table view does.
+          actions = row_actions.reject { |a| a.name == :show }
+          return if actions.empty?
+          div(class: "absolute top-2 right-2 z-10") do
+            RowActionsDropdown(actions: actions, record:)
+          end
+        end
+
+        # Hidden link the `row-click` controller delegates to when the
+        # user clicks anywhere on the card body. Mirrors how the show
+        # action button works in the Table view.
+        def render_show_link
+          show = resource_definition.defined_actions[:show]
+          url = route_options_to_url(show.route_options, record)
+          a(
+            href: url,
+            data: {row_click_target: "show", turbo_frame: show.turbo_frame},
+            class: "sr-only",
+            tabindex: "-1",
+            "aria-label": "Open #{header_text}"
+          ) { plain "Open" }
+        end
+
+        # ---------------------------------------------------------------
+        # Helpers
+        # ---------------------------------------------------------------
+
+        def header_text
+          @header_text ||= helpers.display_name_of(field_value(slots[:header]) || record)
+        end
+
+        def field_value(name)
+          return nil unless name
+          # Skip fields the user's policy doesn't permit. nil collapses
+          # the slot in render_*_slot guards above.
+          return nil if resource_fields && !resource_fields.include?(name.to_sym)
+          unless record.respond_to?(name)
+            raise ArgumentError,
+              "grid_fields slot points at `:#{name}` but " \
+              "#{record.class.name} doesn't respond to it. " \
+              "Define the method on the model or remove the slot."
+          end
+          record.public_send(name)
+        end
+
+        # Resolves a slot value to an image URL. Supports:
+        # - ActiveStorage attachments (`record.avatar` -> Attached::One/Many)
+        # - Shrine uploaders (`record.avatar` -> UploadedFile, responds to :url)
+        # - Plain URL strings ("https://..." or "/uploads/...")
+        def image_src_for(value)
+          return nil if value.nil?
+          if value.respond_to?(:attached?)
+            value.attached? ? helpers.url_for(value) : nil
+          elsif value.respond_to?(:url)
+            value.url
+          elsif value.is_a?(String) && value.start_with?("http", "/")
+            value
+          end
+        rescue ArgumentError, URI::InvalidURIError
+          nil
+        end
+
+        def row_actions
+          @row_actions ||= resource_definition.defined_actions.values.select { |a|
+            a.collection_record_action? && a.permitted_by?(record_policy)
+          }
+        end
+
+        def can_show?
+          resource_definition.defined_actions[:show]&.permitted_by?(record_policy)
+        end
+
+        def record_policy
+          @record_policy ||= policy_for(record:)
+        end
+
+        def card_class
+          tokens(
+            "pu-card relative overflow-hidden transition-shadow",
+            -> { can_show? } => "cursor-pointer hover:shadow-md focus-within:ring-2 focus-within:ring-primary-500"
+          )
+        end
+      end
+    end
+  end
+end