panda-core 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aafa859a0f30c0eac8666376380b18608a5429f760a1f30f2db283504458533d
-  data.tar.gz: 8e63ccaa5fd464c9a7e403a6fa2d3f789bfb0106ce824c31e59f30ffc0bc3dae
+  metadata.gz: 4aa145ee85e5b0c497754d7d218ceb3cc7c4de6065e3357f85e0676186df37f1
+  data.tar.gz: 9425c978a3208aca75045e4cf1e36408088829a73c19d10746a91cefc320db6f
 SHA512:
-  metadata.gz: 8508b00f4c356dfceb223952d34dec3d38eec94078043ab40f08ebcdf2f1e484c2eefbe8534f3c1b86de5b62b71b0cc62dc0c63168e6053f68cf7ed9bf879198
-  data.tar.gz: 8c2c61ff18769f7ee23defaaae9f6d24703328a7e8269079af53508a811ce71dedd8948a0c0906f5927ec8f66e65e04319f4649541e3b928291712f49559088c
+  metadata.gz: ef76d583b1a36ecef8d13788338a847457bcd36a8efddf9582dcb1a7fc7ee484cb689f5dea6f9628d1fc46e2e7e2f513c84b6531116059496bb5e2e862d82f32
+  data.tar.gz: 982d52f5927bddf30b2c6ab1d3981e78e542fba07717628d73f4375c8819ebf29a151eaf08f0f89fea48d06830c52315d3ff9a996d19472696c061597d529bd4

data/app/builders/panda/core/form_builder.rb

@@ -11,6 +11,13 @@ module Panda
       end
 
       def text_field(attribute, options = {})
+        # Add disabled/readonly styling
+        field_classes = if options[:readonly] || options[:disabled]
+          readonly_input_styles
+        else
+          input_styles
+        end
+
         if options.dig(:data, :prefix)
           content_tag :div, class: container_styles do
             label(attribute) + meta_text(options) +
@@ -19,12 +26,12 @@ module Panda
                   class: "inline-flex items-center px-3 text-base border border-r-none rounded-s-md whitespace-nowrap break-keep") do
                   options.dig(:data, :prefix)
                 end +
-                  super(attribute, options.reverse_merge(class: "#{input_styles_prefix} input-prefix rounded-l-none border-l-none"))
+                  super(attribute, options.reverse_merge(class: "#{field_classes} input-prefix rounded-l-none border-l-none"))
               end + error_message(attribute)
           end
         else
           content_tag :div, class: container_styles do
-            label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: input_styles)) + error_message(attribute)
+            label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: field_classes)) + error_message(attribute)
           end
         end
       end
@@ -77,8 +84,121 @@ module Panda
       end
 
       def file_field(method, options = {})
-        content_tag :div, class: container_styles do
-          label(method) + meta_text(options) + super(method, options.reverse_merge(class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50".concat(input_styles)))
+        # Check if cropper is requested
+        with_cropper = options.delete(:with_cropper)
+
+        # Check if simple mode is requested (no fancy upload UI)
+        simple_mode = options.delete(:simple)
+
+        if with_cropper
+          # Image upload with cropper
+          aspect_ratio = options.delete(:aspect_ratio) # e.g., 1.91 for OG images (1200x630)
+          min_width = options.delete(:min_width) || 0
+          min_height = options.delete(:min_height) || 0
+          accept_types = options.delete(:accept) || "image/*"
+          field_id = "#{object_name}_#{method}"
+
+          content_tag :div, class: container_styles do
+            label(method) +
+              meta_text(options) +
+              # Cropper stylesheet
+              @template.content_tag(:link, nil, rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css") +
+              # File input
+              content_tag(:div, class: "mt-2") do
+                super(method, options.reverse_merge(
+                  id: field_id,
+                  accept: accept_types,
+                  class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50 #{input_styles}",
+                  data: {
+                    controller: "image-cropper",
+                    image_cropper_target: "input",
+                    action: "change->image-cropper#handleFileSelect",
+                    image_cropper_aspect_ratio_value: aspect_ratio,
+                    image_cropper_min_width_value: min_width,
+                    image_cropper_min_height_value: min_height
+                  }
+                ))
+              end +
+              # Cropper container (hidden by default)
+              content_tag(:div, class: "hidden mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg", data: {image_cropper_target: "cropperContainer"}) do
+                # Preview image
+                @template.image_tag("", alt: "Crop preview", data: {image_cropper_target: "preview"}, class: "max-w-full") +
+                  # Cropper controls
+                  content_tag(:div, class: "mt-4 flex gap-2 flex-wrap") do
+                    @template.button_tag("Crop & Save", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500", data: {action: "click->image-cropper#crop"}) +
+                      @template.button_tag("Cancel", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#cancel"}) +
+                      @template.button_tag(type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#reset"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-rotate-left") +
+                          @template.content_tag(:span, "Reset")
+                      end +
+                      @template.button_tag(type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#rotate", degrees: "90"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-rotate-right") +
+                          @template.content_tag(:span, "Rotate")
+                      end +
+                      @template.button_tag(type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#flip", direction: "horizontal"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-arrows-left-right") +
+                          @template.content_tag(:span, "Flip H")
+                      end +
+                      @template.button_tag(type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#zoom", ratio: "0.1"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-magnifying-glass-plus") +
+                          @template.content_tag(:span, "Zoom In")
+                      end +
+                      @template.button_tag(type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#zoom", ratio: "-0.1"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-magnifying-glass-minus") +
+                          @template.content_tag(:span, "Zoom Out")
+                      end
+                  end
+              end
+          end
+        elsif simple_mode
+          # Simple file input with basic styling
+          content_tag :div, class: container_styles do
+            label(method) +
+              meta_text(options) +
+              super(method, options.reverse_merge(class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50".concat(input_styles)))
+          end
+        else
+          # Fancy drag-and-drop UI
+          accept_types = options.delete(:accept) || "image/*"
+          max_size = options.delete(:max_size) || "10MB"
+          file_types_display = options.delete(:file_types_display) || "PNG, JPG, GIF"
+
+          field_id = "#{object_name}_#{method}"
+
+          content_tag :div, class: "#{container_styles} col-span-full", data: {controller: "file-upload"} do
+            label(method) +
+              meta_text(options) +
+              content_tag(:div, class: "mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10 dark:border-white/25 transition-colors", data: {file_upload_target: "dropzone"}) do
+                content_tag(:div, class: "text-center") do
+                  # Icon
+                  @template.content_tag(:svg, viewBox: "0 0 24 24", fill: "currentColor", "data-slot": "icon", "aria-hidden": true, class: "mx-auto size-12 text-gray-300 dark:text-gray-600") do
+                    @template.content_tag(:path, nil, d: "M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z", "clip-rule": "evenodd", "fill-rule": "evenodd")
+                  end +
+                    # Upload area
+                    content_tag(:div, class: "mt-4 flex items-baseline justify-center text-sm leading-6 text-gray-600 dark:text-gray-400") do
+                      content_tag(:label, for: field_id, class: "relative cursor-pointer rounded-md bg-transparent font-semibold text-indigo-600 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:focus-within:outline-indigo-500 dark:hover:text-indigo-300") do
+                        content_tag(:span, "Upload a file") +
+                          super(method, options.reverse_merge(
+                            id: field_id,
+                            accept: accept_types,
+                            class: "sr-only",
+                            data: {
+                              file_upload_target: "input",
+                              action: "change->file-upload#handleFileSelect"
+                            }
+                          ))
+                      end +
+                        content_tag(:span, "or drag and drop", class: "pl-1")
+                    end +
+                    # File type info
+                    content_tag(:p, "#{file_types_display} up to #{max_size}", class: "text-xs/5 text-gray-600 dark:text-gray-400")
+                end
+              end +
+              # File info display (hidden by default)
+              content_tag(:div, "", class: "hidden mt-3", data: {file_upload_target: "fileInfo"}) +
+              # Preview display (hidden by default)
+              content_tag(:div, "", class: "hidden mt-3", data: {file_upload_target: "preview"})
+          end
         end
       end
 
@@ -117,11 +237,11 @@ module Panda
       def submit(value = nil, options = {})
         value ||= submit_default_value
 
-        # Use the same style logic as ButtonComponent
+        # Use the primary mid color for save/create actions
         action = object.persisted? ? :save : :create
         button_classes = case action
         when :save, :create
-          "text-white bg-green-600 hover:bg-green-700"
+          "text-white bg-mid hover:bg-mid/80"
         when :save_inactive
           "text-white bg-gray-400"
         when :secondary
@@ -150,32 +270,64 @@ module Panda
         end
       end
 
+      def radio_button_group(method, choices, options = {})
+        current_value = object.send(method)
+
+        content_tag :div, class: container_styles do
+          label(method) +
+            meta_text(options) +
+            content_tag(:div, class: "mt-2 space-y-2") do
+              choices.map do |choice|
+                choice_value = choice.is_a?(Array) ? choice.last : choice
+                choice_label = choice.is_a?(Array) ? choice.first : choice.to_s.humanize
+                choice_id = "#{object_name}_#{method}_#{choice_value}"
+                is_checked = (current_value.to_s == choice_value.to_s)
+
+                content_tag(:label, class: "flex items-center gap-x-3 rounded-lg border border-gray-300 px-3 py-3 text-sm/6 font-medium cursor-pointer hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5") do
+                  radio_button(method, choice_value, {id: choice_id, checked: is_checked, class: "size-4 border-gray-300 text-indigo-600 focus:ring-indigo-600 dark:border-white/10 dark:bg-white/5"}) +
+                    content_tag(:span, choice_label, class: "text-gray-900 dark:text-white")
+                end
+              end.join.html_safe
+            end
+        end
+      end
+
       def meta_text(options)
         return unless options[:meta]
 
         @template.content_tag(:p, options[:meta], class: "block text-black/60 text-sm mb-2")
       end
 
+      def section_heading(text, options = {})
+        @template.content_tag(:div, class: "-mx-4 sm:-mx-6 px-4 sm:px-6 py-4 bg-gray-200 dark:bg-gray-700 mb-6") do
+          @template.content_tag(:h3, text, class: "text-base font-semibold text-gray-900 dark:text-white")
+        end
+      end
+
       private
 
       def label_styles
-        "font-light inline-block mb-1 text-base leading-6"
+        "block text-sm/6 font-medium text-gray-900 dark:text-gray-100"
       end
 
       def base_input_styles
-        "bg-white block w-full rounded-md border border-gray-500 focus:border-gray-700 p-2 text-gray-900 outline-0 focus:outline-0 ring-0 focus:ring-0 focus:ring-gray-700 ring-offset-0 focus:ring-offset-0 shadow-none focus:shadow-none"
+        "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
       end
 
       def input_styles
         base_input_styles
       end
 
+      def readonly_input_styles
+        "block w-full rounded-md bg-gray-50 px-3 py-1.5 text-base text-gray-500 outline-1 -outline-offset-1 outline-gray-200 cursor-not-allowed sm:text-sm/6 dark:bg-white/10 dark:text-gray-500 dark:outline-white/5"
+      end
+
       def input_styles_prefix
-        input_styles.concat(" prefix")
+        "#{input_styles} prefix"
       end
 
       def select_styles
-        "col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-gray-900 text-base outline-0 outline-gray-700 focus:outline focus:-outline-offset-2 focus:outline-gray-700"
+        "block w-full rounded-md bg-white px-3 py-1.5 pr-8 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 appearance-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus:outline-indigo-500"
       end
 
       def select_svg
@@ -194,7 +346,7 @@ module Panda
       end
 
       def textarea_styles
-        input_styles.concat(" min-h-32")
+        "#{input_styles} min-h-32"
       end
 
       def submit_default_value

data/app/components/panda/core/admin/button_component.rb

@@ -6,37 +6,52 @@ module Panda
       class ButtonComponent < Panda::Core::Base
         prop :text, String, default: "Button"
         prop :action, _Nilable(Symbol), default: -> {}
-        prop :href, String, default: "#"
+        prop :href, _Nilable(String), default: -> { "#" }
         prop :icon, _Nilable(String), default: -> {}
         prop :size, Symbol, default: :regular
         prop :id, _Nilable(String), default: -> {}
+        prop :as_button, _Boolean, default: -> { false }
 
         def view_template
-          a(**@attrs) do
-            if computed_icon
-              i(class: "mr-2 fa-solid fa-#{computed_icon}")
-              plain " "
+          if @as_button
+            button(**@attrs) do
+              render_content
+            end
+          else
+            a(**@attrs) do
+              render_content
             end
-            plain @text.titleize
           end
         end
 
         def default_attrs
-          {
-            href: @href,
+          base = {
             class: button_classes,
             id: @id
           }
+
+          if @as_button
+            base.merge(type: "button")
+          else
+            base.merge(href: @href)
+          end
         end
 
         private
 
+        def render_content
+          if computed_icon
+            i(class: "fa-solid fa-#{computed_icon}")
+          end
+          plain @text.titleize
+        end
+
         def computed_icon
           @computed_icon ||= @icon || icon_from_action(@action)
         end
 
         def button_classes
-          base = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
+          base = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer "
           base + size_classes + action_classes
         end
 
@@ -56,15 +71,15 @@ module Panda
         def action_classes
           case @action
           when :save, :create
-            "text-white bg-green-600 hover:bg-green-700"
+            "text-white bg-mid hover:bg-mid/80"
           when :save_inactive
             "text-white bg-gray-400"
           when :secondary
-            "text-gray-700 border-2 border-gray-700 bg-transparent hover:bg-gray-100 transition-all"
+            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
           when :delete, :destroy, :danger
             "text-red-600 border border-red-600 bg-red-100 hover:bg-red-200 hover:text-red-700 focus-visible:outline-red-300"
           else
-            "text-gray-700 border-2 border-gray-700 bg-transparent hover:bg-gray-100 transition-all"
+            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
           end
         end
 

data/app/components/panda/core/admin/container_component.rb

@@ -26,10 +26,17 @@ module Panda
               view_context.capture(&@slideover_block)
             end
             view_context.content_for(:sidebar_title, @slideover_title)
+
+            # Set footer content if present
+            if @footer_block
+              view_context.content_for(:sidebar_footer) do
+                view_context.capture(&@footer_block)
+              end
+            end
           end
 
           main(class: "overflow-auto flex-1 h-full min-h-full max-h-full") do
-            div(class: "overflow-auto px-2 pt-4 mx-auto sm:px-6 lg:px-6") do
+            div(class: "overflow-auto px-2 pt-2 mx-auto sm:px-6 lg:px-6") do
               @heading_content&.call
               @tab_bar_content&.call
 
@@ -68,8 +75,13 @@ module Panda
           @slideover_block = block   # Save the block for content_for
         end
 
+        def footer(&block)
+          @footer_block = block
+        end
+
         # Alias for ViewComponent-style API compatibility
         alias_method :with_slideover, :slideover
+        alias_method :with_footer, :footer
 
         private
 

data/app/components/panda/core/admin/heading_component.rb

@@ -7,23 +7,30 @@ module Panda
         prop :text, String
         prop :level, _Nilable(_Union(Integer, Symbol)), default: -> { 2 }
         prop :icon, String, default: ""
+        prop :meta, _Nilable(String), default: -> {}
         prop :additional_styles, _Nilable(_Union(String, Array)), default: -> { "" }
 
         def view_template(&block)
           # Capture any buttons defined via block
           instance_eval(&block) if block_given?
 
-          case @level
-          when 1
-            h1(class: heading_classes) { render_content }
-          when 2
-            h2(class: heading_classes) { render_content }
-          when 3
-            h3(class: heading_classes) { render_content }
-          when :panel
-            h3(class: panel_heading_classes) { @text }
-          else
-            h2(class: heading_classes) { render_content }
+          div(class: "heading-wrapper") do
+            case @level
+            when 1
+              h1(class: heading_classes(@meta.present?)) { render_content }
+            when 2
+              h2(class: heading_classes(@meta.present?)) { render_content }
+            when 3
+              h3(class: heading_classes(@meta.present?)) { render_content }
+            when :panel
+              h3(class: panel_heading_classes) { @text }
+            else
+              h2(class: heading_classes(@meta.present?)) { render_content }
+            end
+
+            if @meta
+              p(class: "text-sm text-black/60 -mt-1 mb-5") { raw(@meta) }
+            end
           end
         end
 
@@ -40,13 +47,14 @@ module Panda
             span { @text }
           end
 
-          span(class: "actions flex gap-x-2 -mt-1 min-h-[2.5rem]") do
+          span(class: "actions flex gap-x-2 mt-1 min-h-[2.5rem]") do
             @buttons&.each { |btn| render(btn) }
           end
         end
 
-        def heading_classes
-          base = "flex pt-1 text-black mb-5 -mt-1"
+        def heading_classes(has_meta = false)
+          margin_bottom = has_meta ? "mb-0.5" : "mb-5"
+          base = "flex text-black #{margin_bottom} -mt-2"
           styles = case @level
           when 1
             "text-2xl font-medium"

data/app/components/panda/core/admin/slideover_component.rb

@@ -21,42 +21,72 @@ module Panda
             **default_attrs,
             data: {
               toggle_target: "toggleable",
-              transition_enter: "transform transition ease-in-out duration-500",
+              transition_enter: "transform transition ease-in-out duration-500 sm:duration-700",
               transition_enter_from: "translate-x-full",
               transition_enter_to: "translate-x-0",
-              transition_leave: "transform transition ease-in-out duration-500",
+              transition_leave: "transform transition ease-in-out duration-500 sm:duration-700",
               transition_leave_from: "translate-x-0",
               transition_leave_to: "translate-x-full"
             }
           ) do
-            # Header with title and close button
-            div(class: "py-3 px-4 mb-4 bg-black") do
-              div(class: "flex justify-between items-center") do
-                h2(class: "text-base font-semibold leading-6 text-white", id: "slideover-title") do
-                  i(class: "mr-2 fa-light fa-gear")
-                  plain " #{@title}"
+            # Main container
+            div(class: "relative flex h-full flex-col bg-white shadow-xl dark:bg-gray-800") do
+              # Header with title and close button
+              div(class: "bg-gradient-admin px-4 py-6 sm:px-6") do
+                div(class: "flex items-center justify-between") do
+                  h2(class: "text-base font-semibold text-white", id: "slideover-title") do
+                    plain @title
+                  end
+                  div(class: "ml-3 flex h-7 items-center") do
+                    button(
+                      type: "button",
+                      data: {action: "click->toggle#toggle touch->toggle#toggle"},
+                      class: "relative rounded-md text-white/80 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+                    ) do
+                      span(class: "absolute -inset-2.5")
+                      span(class: "sr-only") { "Close panel" }
+                      # SVG close icon
+                      svg(viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "1.5", aria_hidden: "true", class: "size-6") do
+                        path(d: "M6 18 18 6M6 6l12 12", stroke_linecap: "round", stroke_linejoin: "round")
+                      end
+                    end
+                  end
                 end
-                button(
-                  type: "button",
-                  data: {action: "click->toggle#toggle touch->toggle#toggle"},
-                  class: "text-white hover:text-gray-300 transition"
-                ) do
-                  i(class: "font-bold fa-regular fa-xmark right")
+              end
+
+              # Scrollable content area
+              div(class: "flex-1 overflow-y-auto") do
+                if @content_html
+                  raw(@content_html)
+                elsif @content_block
+                  instance_eval(@content_block)
                 end
               end
-            end
 
-            # Content area
-            div(class: "overflow-y-auto px-4 pb-6 space-y-6") do
-              if @content_html
-                raw(@content_html)
-              elsif @content_block
-                instance_eval(&@content_block)
+              # Sticky footer (if footer content exists)
+              if @footer_html || @footer_block
+                div(class: "flex shrink-0 justify-end gap-x-3 border-t border-gray-200 px-4 py-4 dark:border-white/10") do
+                  if @footer_html
+                    raw(@footer_html)
+                  elsif @footer_block
+                    instance_eval(&@footer_block)
+                  end
+                end
               end
             end
           end
         end
 
+        def footer(&block)
+          if defined?(view_context) && view_context
+            @footer_html = view_context.capture(&block)
+          else
+            @footer_block = block
+          end
+        end
+
+        alias_method :with_footer, :footer
+
         private
 
         def default_attrs
@@ -67,7 +97,7 @@ module Panda
         end
 
         def slideover_classes
-          base = "flex absolute right-0 flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12 z-50"
+          base = "ml-auto block size-full max-w-md transform absolute right-0 h-full z-50"
           visibility = @open ? "" : "hidden"
           [base, visibility].compact.join(" ")
         end

data/app/controllers/panda/core/admin/my_profile_controller.rb

@@ -4,7 +4,14 @@ module Panda
   module Core
     module Admin
       class MyProfileController < BaseController
-        before_action :set_initial_breadcrumb, only: %i[edit update]
+        before_action :set_initial_breadcrumb, only: %i[show edit update]
+
+        # Redirects to the edit form
+        # @type GET
+        # @return void
+        def show
+          redirect_to edit_admin_my_profile_path
+        end
 
         # Shows the edit form for the current user's profile
         # @type GET

data/app/helpers/panda/core/asset_helper.rb

@@ -33,6 +33,8 @@ module Panda
                   "@rails/actioncable/src": "/panda/core/vendor/@rails--actioncable--src.js",
                   "tailwindcss-stimulus-components": "/panda/core/tailwindcss-stimulus-components.js",
                   "@fortawesome/fontawesome-free": "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@7.1.0/js/all.js",
+                  "@tailwindplus/elements": "https://esm.sh/@tailwindplus/elements@1",
+                  "cropperjs": "https://esm.sh/cropperjs@1.6.2",
                   "panda/core/application": "/panda/core/application.js",
                   "panda/core/controllers/toggle_controller": "/panda/core/controllers/toggle_controller.js",
                   "panda/core/controllers/theme_form_controller": "/panda/core/controllers/theme_form_controller.js"