panda-core 0.4.1 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1571548de89ff0ad16010f4500ed47a1c53dda70c730945fa439272a33567999
-  data.tar.gz: 02cc839e0831b886a37729b43a5d185d1bd7a13eb3ff59dd2e3afc0f7996e4cd
+  metadata.gz: aafa859a0f30c0eac8666376380b18608a5429f760a1f30f2db283504458533d
+  data.tar.gz: 8e63ccaa5fd464c9a7e403a6fa2d3f789bfb0106ce824c31e59f30ffc0bc3dae
 SHA512:
-  metadata.gz: acaebae64c9e8b970edda07e35f0b3820e988d3c738c3cf0c4d9c647be828d98773992d6a1ab70a4dc74cc01edaa04582a43c0fa285222a2e2d8169afaba7ac0
-  data.tar.gz: 927db64e6429b4687667e8e47b185abea96e1f50668b5e6abe2d36050a1606aac880610f94d2f08205fb4a1280e3c95f05f8c45a8afc1d03ca10a38fad0abdd5
+  metadata.gz: 8508b00f4c356dfceb223952d34dec3d38eec94078043ab40f08ebcdf2f1e484c2eefbe8534f3c1b86de5b62b71b0cc62dc0c63168e6053f68cf7ed9bf879198
+  data.tar.gz: 8c2c61ff18769f7ee23defaaae9f6d24703328a7e8269079af53508a811ce71dedd8948a0c0906f5927ec8f66e65e04319f4649541e3b928291712f49559088c

data/app/assets/tailwind/application.css

@@ -9,6 +9,7 @@
 @source "../../../cms/app/components/**/*.rb";
 
 @theme {
+  /* Legacy colors */
   --color-white: var(--color-white);
   --color-black: var(--color-black);
   --color-light: var(--color-light);
@@ -19,6 +20,45 @@
   --color-inactive: var(--color-inactive);
   --color-warning: var(--color-warning);
   --color-error: var(--color-error);
+
+  /* Tailwind UI compatible primary scale */
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
+
+  /* Map indigo to primary for Tailwind UI compatibility */
+  --color-indigo-50: var(--color-primary-50);
+  --color-indigo-100: var(--color-primary-100);
+  --color-indigo-200: var(--color-primary-200);
+  --color-indigo-300: var(--color-primary-300);
+  --color-indigo-400: var(--color-primary-400);
+  --color-indigo-500: var(--color-primary-500);
+  --color-indigo-600: var(--color-primary-600);
+  --color-indigo-700: var(--color-primary-700);
+  --color-indigo-800: var(--color-primary-800);
+  --color-indigo-900: var(--color-primary-900);
+  --color-indigo-950: var(--color-primary-950);
+
+  /* Gray scale */
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-950: var(--color-gray-950);
 }
 
 @layer base {
@@ -26,6 +66,7 @@
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
+    /* Legacy color variables (kept for backwards compatibility) */
     --color-light: rgb(238, 206, 230); /* #EECEE6 */
     --color-mid: rgb(141, 94, 183); /* #8D5EB7 */
     --color-dark: rgb(33, 29, 73); /* #211D49 */
@@ -36,11 +77,39 @@
     --color-warning: rgb(250, 207, 142); /* #FACF8E */
     --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
     --color-error: rgb(245, 129, 129); /* #F58181 */
+
+    /* Full Tailwind UI compatible color scale - Primary (Purple palette) */
+    --color-primary-50: rgb(250, 245, 255); /* Very light purple */
+    --color-primary-100: rgb(243, 232, 255); /* Lighter purple */
+    --color-primary-200: rgb(233, 213, 255); /* Light purple */
+    --color-primary-300: rgb(216, 180, 254); /* Medium light purple */
+    --color-primary-400: rgb(192, 132, 252); /* Medium purple */
+    --color-primary-500: rgb(141, 94, 183); /* Main brand color (mid) */
+    --color-primary-600: rgb(120, 80, 160); /* Darker purple */
+    --color-primary-700: rgb(100, 65, 140); /* Dark purple */
+    --color-primary-800: rgb(60, 45, 100); /* Very dark purple */
+    --color-primary-900: rgb(33, 29, 73); /* Darkest (dark) */
+    --color-primary-950: rgb(24, 20, 50); /* Ultra dark */
+
+    /* Gray scale for UI elements */
+    --color-gray-50: rgb(249, 250, 251);
+    --color-gray-100: rgb(243, 244, 246);
+    --color-gray-200: rgb(229, 231, 235);
+    --color-gray-300: rgb(209, 213, 219);
+    --color-gray-400: rgb(156, 163, 175);
+    --color-gray-500: rgb(107, 114, 128);
+    --color-gray-600: rgb(75, 85, 99);
+    --color-gray-700: rgb(55, 65, 81);
+    --color-gray-800: rgb(31, 41, 55);
+    --color-gray-900: rgb(17, 24, 39);
+    --color-gray-950: rgb(3, 7, 18);
   }
 
   html[data-theme='sky'] {
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
+
+    /* Legacy color variables (kept for backwards compatibility) */
     --color-light: rgb(204, 238, 242); /* #CCEEF2 */
     --color-mid: rgb(42, 102, 159); /* #2A669F */
     --color-dark: rgb(20, 32, 74); /* #14204A */
@@ -50,6 +119,32 @@
     --color-warning: rgb(244, 190, 102); /* #F4BE66 */
     --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
     --color-error: rgb(208, 64, 20); /* #D04014 */
+
+    /* Full Tailwind UI compatible color scale - Primary (Blue palette) */
+    --color-primary-50: rgb(240, 249, 255); /* Very light blue */
+    --color-primary-100: rgb(224, 242, 254); /* Lighter blue */
+    --color-primary-200: rgb(186, 230, 253); /* Light blue */
+    --color-primary-300: rgb(125, 211, 252); /* Medium light blue */
+    --color-primary-400: rgb(56, 189, 248); /* Medium blue */
+    --color-primary-500: rgb(42, 102, 159); /* Main brand color (mid) */
+    --color-primary-600: rgb(35, 85, 132); /* Darker blue */
+    --color-primary-700: rgb(28, 68, 106); /* Dark blue */
+    --color-primary-800: rgb(22, 52, 82); /* Very dark blue */
+    --color-primary-900: rgb(20, 32, 74); /* Darkest (dark) */
+    --color-primary-950: rgb(15, 24, 55); /* Ultra dark */
+
+    /* Gray scale for UI elements (same across themes) */
+    --color-gray-50: rgb(249, 250, 251);
+    --color-gray-100: rgb(243, 244, 246);
+    --color-gray-200: rgb(229, 231, 235);
+    --color-gray-300: rgb(209, 213, 219);
+    --color-gray-400: rgb(156, 163, 175);
+    --color-gray-500: rgb(107, 114, 128);
+    --color-gray-600: rgb(75, 85, 99);
+    --color-gray-700: rgb(55, 65, 81);
+    --color-gray-800: rgb(31, 41, 55);
+    --color-gray-900: rgb(17, 24, 39);
+    --color-gray-950: rgb(3, 7, 18);
   }
 
   a.block-link:after {

data/app/assets/tailwind/tailwind.config.js

@@ -18,4 +18,12 @@ module.exports = {
       "../../../cms/vendor/javascript/**/*.js",
     ],
   },
+  safelist: [
+    // Tree indentation classes used in pages/index
+    'ml-4',
+    'ml-8',
+    'ml-12',
+    'ml-16',
+    'ml-24',
+  ],
 };

data/app/components/panda/core/UI/button.rb

@@ -5,17 +5,24 @@ module Panda
     module UI
       # Modern Phlex-based button component with type-safe props.
       #
-      # This component demonstrates the recommended pattern for building
-      # Phlex components in the Panda ecosystem using the shared base class.
+      # Supports both <button> and <a> elements based on whether an href is provided.
+      # Follows Tailwind UI Plus styling patterns with dark mode support.
       #
-      # @example Basic usage
+      # @example Basic button
       #   render Panda::Core::UI::Button.new(text: "Click me")
       #
-      # @example With variant
+      # @example Button as link
       #   render Panda::Core::UI::Button.new(
-      #     text: "Delete",
-      #     variant: :danger,
-      #     size: :large
+      #     text: "Edit",
+      #     variant: :secondary,
+      #     href: "/admin/posts/1/edit"
+      #   )
+      #
+      # @example Primary action button
+      #   render Panda::Core::UI::Button.new(
+      #     text: "Publish",
+      #     variant: :primary,
+      #     href: "/admin/posts/1/publish"
       #   )
       #
       # @example With custom attributes
@@ -33,54 +40,68 @@ module Panda
         prop :size, Symbol, default: :medium
         prop :disabled, _Boolean, default: false
         prop :type, String, default: "button"
+        prop :href, _Nilable(String), default: -> {}
 
         def view_template
-          button(**@attrs) { text }
+          if @href
+            a(**@attrs) { @text }
+          else
+            button(**@attrs) { @text }
+          end
         end
 
         def default_attrs
-          {
-            type: type,
-            disabled: disabled,
+          base = {
             class: button_classes
           }
+
+          if @href
+            base[:href] = @href
+          else
+            base[:type] = @type
+            base[:disabled] = @disabled if @disabled
+          end
+
+          base
         end
 
         private
 
         def button_classes
-          base = "inline-flex items-center rounded-md font-medium shadow-sm transition-colors"
+          base = "inline-flex items-center rounded-md font-semibold"
           base += " #{size_classes}"
           base += " #{variant_classes}"
-          base += " disabled:opacity-50 disabled:cursor-not-allowed" if disabled
+          base += " disabled:opacity-50 disabled:cursor-not-allowed" if @disabled
           base
         end
 
         def size_classes
-          case size
+          case @size
           when :small, :sm
-            "gap-x-1.5 px-2.5 py-1.5 text-sm"
+            "px-2.5 py-1.5 text-sm"
           when :large, :lg
-            "gap-x-2 px-3.5 py-2.5 text-lg"
+            "px-3.5 py-2.5 text-lg"
           else # :medium, :md
-            "gap-x-1.5 px-3 py-2 text-base"
+            "px-3 py-2 text-sm"
           end
         end
 
         def variant_classes
-          case variant
+          case @variant
           when :primary
-            "bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            # Blue primary button with dark mode support
+            "bg-blue-600 text-white shadow-xs hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:bg-blue-500 dark:shadow-none dark:hover:bg-blue-400 dark:focus-visible:outline-blue-500"
           when :secondary
-            "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            # White/gray secondary button with ring and dark mode support
+            "bg-white text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20"
           when :success
-            "bg-green-600 text-white hover:bg-green-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+            "bg-green-600 text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 dark:bg-green-500 dark:shadow-none dark:hover:bg-green-400 dark:focus-visible:outline-green-500"
           when :danger
-            "bg-red-600 text-white hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+            "bg-red-600 text-white shadow-xs hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400 dark:focus-visible:outline-red-500"
           when :ghost
-            "bg-transparent text-gray-700 hover:bg-gray-100"
+            "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
           else # :default
-            "bg-gray-700 text-white hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700"
+            "bg-gray-700 text-white shadow-xs hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:bg-gray-600 dark:shadow-none dark:hover:bg-gray-500 dark:focus-visible:outline-gray-600"
           end
         end
       end

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

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Breadcrumb navigation component with responsive behavior.
+      #
+      # Shows a "Back" link on mobile and full breadcrumb trail on larger screens.
+      # Follows Tailwind UI Plus pattern for breadcrumb navigation.
+      #
+      # @example Basic breadcrumbs
+      #   render Panda::Core::Admin::BreadcrumbComponent.new(
+      #     items: [
+      #       { text: "Pages", href: "/admin/pages" },
+      #       { text: "Blog Posts", href: "/admin/pages/blog" },
+      #       { text: "Edit Post", href: "/admin/pages/blog/1/edit" }
+      #     ]
+      #   )
+      #
+      # @example Without back link (first page in section)
+      #   render Panda::Core::Admin::BreadcrumbComponent.new(
+      #     items: [
+      #       { text: "Dashboard", href: "/admin" }
+      #     ],
+      #     show_back: false
+      #   )
+      #
+      class BreadcrumbComponent < Panda::Core::Base
+        prop :items, Array, default: -> { [] }
+        prop :show_back, _Boolean, default: true
+
+        def view_template
+          div do
+            # Mobile back link
+            if @show_back && @items.any?
+              nav(
+                aria: {label: "Back"},
+                class: "sm:hidden"
+              ) do
+                a(
+                  href: back_link_href,
+                  class: "flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                ) do
+                  render_chevron_left_icon
+                  plain "Back"
+                end
+              end
+            end
+
+            # Desktop breadcrumb trail
+            nav(
+              aria: {label: "Breadcrumb"},
+              class: "hidden sm:flex"
+            ) do
+              ol(
+                role: "list",
+                class: "flex items-center space-x-4"
+              ) do
+                @items.each_with_index do |item, index|
+                  li do
+                    if index.zero?
+                      # First item (no separator)
+                      div(class: "flex") do
+                        a(
+                          href: item[:href],
+                          class: breadcrumb_link_classes(index)
+                        ) { item[:text] }
+                      end
+                    else
+                      # Subsequent items (with separator)
+                      div(class: "flex items-center") do
+                        render_chevron_right_icon
+                        a(
+                          href: item[:href],
+                          aria: ((index == @items.length - 1) ? {current: "page"} : nil),
+                          class: breadcrumb_link_classes(index)
+                        ) { item[:text] }
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        private
+
+        def back_link_href
+          (@items.length > 1) ? @items[-2][:href] : @items.first[:href]
+        end
+
+        def breadcrumb_link_classes(index)
+          base = "text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+          base += " ml-4" unless index.zero?
+          base
+        end
+
+        def render_chevron_left_icon
+          svg(
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            data: {slot: "icon"},
+            aria: {hidden: "true"},
+            class: "mr-1 -ml-1 size-5 shrink-0 text-gray-400 dark:text-gray-500"
+          ) do |s|
+            s.path(
+              d: "M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z",
+              clip_rule: "evenodd",
+              fill_rule: "evenodd"
+            )
+          end
+        end
+
+        def render_chevron_right_icon
+          svg(
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            data: {slot: "icon"},
+            aria: {hidden: "true"},
+            class: "size-5 shrink-0 text-gray-400 dark:text-gray-500"
+          ) do |s|
+            s.path(
+              d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
+              clip_rule: "evenodd",
+              fill_rule: "evenodd"
+            )
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -14,7 +14,7 @@ module Panda
         def view_template
           a(**@attrs) do
             if computed_icon
-              i(class: "mr-2 fa-regular fa-#{computed_icon}")
+              i(class: "mr-2 fa-solid fa-#{computed_icon}")
               plain " "
             end
             plain @text.titleize

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

@@ -4,6 +4,8 @@ module Panda
   module Core
     module Admin
       class ContainerComponent < Panda::Core::Base
+        prop :full_height, _Nilable(_Boolean), default: -> { false }
+
         def view_template(&block)
           # Capture block content differently based on context (ERB vs Phlex)
           if block_given?
@@ -16,20 +18,29 @@ module Panda
             end
           end
 
+          # Set content_for :sidebar if slideover is present (enables breadcrumb toggle button)
+          # This must happen before rendering so the layout can use it
+          if @slideover_block && @slideover_title && defined?(view_context) && view_context
+            view_context.content_for(:sidebar) do
+              # The block contains ERB content, capture it for the sidebar
+              view_context.capture(&@slideover_block)
+            end
+            view_context.content_for(:sidebar_title, @slideover_title)
+          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
               @heading_content&.call
               @tab_bar_content&.call
 
-              section(class: "flex-auto") do
-                div(class: "flex-1 mt-4 w-full") do
+              section(class: section_classes) do
+                div(class: "flex-1 mt-4 w-full h-full") do
                   if @main_content
                     @main_content.call
                   elsif @body_html
                     raw(@body_html)
                   end
                 end
-                @slideover_content&.call
               end
             end
           end
@@ -53,7 +64,19 @@ module Panda
         end
 
         def slideover(**props, &block)
-          @slideover_content = -> { render(Panda::Core::Admin::SlideoverComponent.new(**props), &block) }
+          @slideover_title = props[:title] || "Settings"
+          @slideover_block = block   # Save the block for content_for
+        end
+
+        # Alias for ViewComponent-style API compatibility
+        alias_method :with_slideover, :slideover
+
+        private
+
+        def section_classes
+          base = "flex-auto"
+          height = @full_height ? "h-[calc(100vh-9rem)]" : nil
+          [base, height].compact.join(" ")
         end
       end
     end

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

@@ -0,0 +1,157 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class FileGalleryComponent < Panda::Core::Base
+        prop :files, _Nilable(Object), default: -> { [] }
+        prop :selected_file, _Nilable(Object), default: nil
+
+        def view_template
+          if @files.any?
+            render_gallery
+          else
+            render_empty_state
+          end
+        end
+
+        private
+
+        def render_gallery
+          section do
+            h2(id: "gallery-heading", class: "sr-only") { "Files" }
+            ul(
+              role: "list",
+              class: "grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
+            ) do
+              @files.each do |file|
+                render_file_item(file)
+              end
+            end
+          end
+        end
+
+        def render_file_item(file)
+          is_selected = @selected_file && @selected_file.id == file.id
+
+          li(class: "relative") do
+            div(
+              class: file_container_classes(is_selected),
+              style: "cursor: pointer;"
+            ) do
+              if file.image?
+                img(
+                  src: url_for(file),
+                  alt: file.filename.to_s,
+                  class: file_image_classes(is_selected)
+                )
+              else
+                render_file_icon(file)
+              end
+
+              button(
+                type: "button",
+                class: "absolute inset-0 focus:outline-hidden",
+                data: {
+                  action: "click->file-gallery#selectFile",
+                  file_id: file.id,
+                  file_url: url_for(file),
+                  file_name: file.filename.to_s,
+                  file_size: file.byte_size,
+                  file_type: file.content_type,
+                  file_created: file.created_at.to_s
+                }
+              ) do
+                span(class: "sr-only") { "View details for #{file.filename}" }
+              end
+            end
+
+            p(class: "pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900 dark:text-white") do
+              plain file.filename.to_s
+            end
+            p(class: "pointer-events-none block text-sm font-medium text-gray-500 dark:text-gray-400") do
+              plain number_to_human_size(file.byte_size)
+            end
+          end
+        end
+
+        def file_container_classes(selected)
+          base = "group overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
+          focus = if selected
+            "outline-2 outline-offset-2 outline-panda-dark dark:outline-panda-light outline"
+          else
+            "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500"
+          end
+          "#{base} #{focus}"
+        end
+
+        def file_image_classes(selected)
+          base = "pointer-events-none aspect-10/7 rounded-lg object-cover outline -outline-offset-1 outline-black/5 dark:outline-white/10"
+          hover = selected ? "" : "group-hover:opacity-75"
+          "#{base} #{hover}"
+        end
+
+        def render_file_icon(file)
+          div(class: "flex items-center justify-center h-full") do
+            div(class: "text-center") do
+              svg(
+                class: "mx-auto h-12 w-12 text-gray-400",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                aria: {hidden: "true"}
+              ) do
+                path(
+                  stroke_linecap: "round",
+                  stroke_linejoin: "round",
+                  d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                )
+              end
+              p(class: "mt-1 text-xs text-gray-500 uppercase") { file.content_type&.split("/")&.last || "file" }
+            end
+          end
+        end
+
+        def render_empty_state
+          div(class: "text-center py-12 border border-dashed rounded-lg") do
+            svg(
+              class: "mx-auto h-12 w-12 text-gray-400",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              aria: {hidden: "true"}
+            ) do
+              path(
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+              )
+            end
+            h3(class: "mt-2 text-sm font-semibold text-gray-900") { "No files" }
+            p(class: "mt-1 text-sm text-gray-500") { "Get started by uploading a file." }
+          end
+        end
+
+        # Helper method to generate URL for ActiveStorage attachment
+        def url_for(file)
+          if defined?(Rails) && Rails.application.routes.url_helpers.respond_to?(:rails_blob_path)
+            Rails.application.routes.url_helpers.rails_blob_path(file, only_path: true)
+          else
+            "#"
+          end
+        end
+
+        # Helper method for human-readable file sizes
+        def number_to_human_size(size)
+          return "0 Bytes" if size.zero?
+
+          units = ["Bytes", "KB", "MB", "GB", "TB"]
+          exp = (Math.log(size) / Math.log(1024)).to_i
+          exp = [exp, units.length - 1].min
+
+          "%.1f %s" % [size.to_f / (1024**exp), units[exp]]
+        end
+      end
+    end
+  end
+end