panda-core 0.2.4 → 0.6.0

data/app/views/layouts/panda/core/admin.html.erb

@@ -1,5 +1,42 @@
-<%= render "panda/core/shared/header", html_class: "h-full", body_class: "bg-gradient-admin" %>
-<div class="flex flex-col items-center justify-center min-h-screen px-4">
-  <%= yield %>
+<%= render "panda/core/shared/header", html_class: "h-full bg-white" %>
+<div class="flex h-full" id="panda-container">
+  <div class="absolute top-0 w-full lg:flex lg:fixed lg:inset-y-0 lg:z-50 lg:flex-col lg:w-72">
+    <div class="flex overflow-y-auto flex-col gap-y-5 px-4 pb-4 max-h-16 bg-gradient-admin lg:max-h-full grow" data-transition-enter="transition-all ease-in-out duration-300" data-transition-enter-from="m-h-16" data-transition-enter-to="max-h-full" data-transition-leave="transition-all ease-in-out duration-300" data-transition-leave-from="max-h-full" data-transition-leave-to="max-h-16">
+      <%= render "panda/core/admin/shared/sidebar" %>
+    </div>
+  </div>
+  <div class="flex flex-col flex-1 mt-16 ml-0 lg:mt-0 lg:ml-72" id="panda-inner-container" <% if content_for :sidebar %> data-controller="toggle" data-action="keydown.esc->modal#close" tabindex="-1"<% end %>>
+  <section id="panda-main" class="flex flex-row h-full">
+    <div class="flex-1 h-full" id="panda-primary-content">
+      <%= render "panda/core/admin/shared/breadcrumbs" %>
+      <%= render "panda/core/admin/shared/flash" %>
+      <%= yield %>
+    </div>
+    <% if content_for :sidebar %>
+      <div data-toggle-target="toggleable" class="hidden flex absolute right-0 flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12"
+            data-transition-enter="transform transition ease-in-out duration-500"
+            data-transition-enter-from="translate-x-full"
+            data-transition-enter-to="translate-x-0"
+            data-transition-leave="transform transition ease-in-out duration-500"
+            data-transition-leave-from="translate-x-full"
+            data-transition-leave-to="translate-x-0"
+            id="slideover">
+        <div class="overflow-y-auto flex-1 h-0">
+          <div class="py-3 px-4 mb-4 bg-black">
+            <div class="flex justify-between items-center">
+              <h2 class="text-base font-semibold leading-6 text-white" id="slideover-title"><i class="mr-2 fa-solid fa-gear"></i> <%= yield :sidebar_title %> </h2>
+              <button type="button" data-action="click->toggle#toggle touch->toggle#toggle"><i class="font-bold text-white fa-solid fa-xmark right"></i></button>
+            </div>
+          </div>
+          <div class="flex flex-col flex-1 justify-between">
+            <div class="px-4 space-y-6">
+              <%= yield :sidebar %>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </section>
+</div>
 </div>
 <%= render "panda/core/shared/footer" %>

data/app/views/layouts/panda/core/admin_simple.html.erb

@@ -0,0 +1,6 @@
+<%= render "panda/core/shared/header", html_class: "h-full", body_class: "bg-gradient-admin" %>
+<%= render "panda/core/admin/shared/flash" %>
+<div class="flex flex-col items-center justify-center min-h-screen px-4">
+  <%= yield %>
+</div>
+<%= render "panda/core/shared/footer" %>

data/app/views/panda/core/admin/dashboard/_default_content.html.erb

@@ -10,7 +10,7 @@
         <div class="px-4 py-5 sm:p-6">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <i class="fa-regular fa-file-lines text-3xl text-gray-400"></i>
+              <i class="fa-solid fa-file-lines text-3xl text-gray-400"></i>
             </div>
             <div class="ml-5 w-0 flex-1">
               <dt class="text-sm font-medium text-gray-500 truncate">Content Management</dt>
@@ -46,8 +46,8 @@
     </div>
 
     <% # Hook for additional dashboard cards %>
-    <% if Panda::Core.configuration.respond_to?(:admin_dashboard_cards) %>
-      <% cards = Panda::Core.configuration.admin_dashboard_cards&.call(current_user) %>
+    <% if Panda::Core.config.respond_to?(:admin_dashboard_cards) %>
+      <% cards = Panda::Core.config.admin_dashboard_cards&.call(current_user) %>
       <% cards&.each do |card| %>
         <div class="bg-white overflow-hidden shadow rounded-lg">
           <div class="px-4 py-5 sm:p-6">
@@ -70,4 +70,4 @@
       <% end %>
     <% end %>
   </div>
-</div>
+</div>

data/app/views/panda/core/admin/dashboard/show.html.erb

@@ -3,8 +3,8 @@
     <% container.with_heading(text: "Dashboard", level: 1) %>
     
     <% # Hook for dashboard widgets %>
-    <% if Panda::Core.configuration.admin_dashboard_widgets %>
-      <% widgets = Panda::Core.configuration.admin_dashboard_widgets.call(current_user) %>
+    <% if Panda::Core.config.admin_dashboard_widgets %>
+      <% widgets = Panda::Core.config.admin_dashboard_widgets.call(current_user) %>
       <% if widgets && widgets.any? %>
         <div class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
           <% widgets.each do |widget| %>

data/app/views/panda/core/admin/my_profile/edit.html.erb

@@ -1,49 +1,60 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "My Profile", level: 1) %>
+  <% component.heading(text: "My Profile", level: 1) %>
 
   <%= form_with model: user,
-                url: admin_my_profile_path,
-                method: :patch,
-                local: true,
-                data: { controller: "theme-form" } do |f| %>
-    <% if user.errors.any? %>
-      <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
-        <div class="text-sm text-red-600">
-          <% user.errors.full_messages.each do |message| %>
-            <p><%= message %></p>
+              url: admin_my_profile_path,
+              method: :patch,
+              local: true,
+              data: { controller: "theme-form" } do |f| %>
+    <%= render Panda::Core::Admin::FormErrorComponent.new(model: user) %>
+
+    <div class="space-y-6">
+      <!-- Avatar Section -->
+      <div class="col-span-full">
+        <%= f.label :avatar, "Profile Picture", class: "block text-sm/6 font-medium text-gray-900 dark:text-white" %>
+        <div class="mt-2 flex items-center gap-x-3">
+          <% if user.avatar.attached? %>
+            <%= image_tag main_app.url_for(user.avatar), alt: user.name, class: "w-48 h-48 max-w-48 rounded-full object-cover" %>
+          <% else %>
+            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="w-48 h-48 text-gray-300 dark:text-gray-500">
+              <path d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd" fill-rule="evenodd" />
+            </svg>
           <% end %>
+          <label for="<%= f.field_id(:avatar) %>" class="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 cursor-pointer dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">
+            Change
+          </label>
+          <%= f.file_field :avatar,
+              accept: "image/png,image/jpeg,image/jpg,image/gif,image/webp",
+              class: "sr-only" %>
         </div>
-      </div>
-    <% end %>
-
-    <div class="space-y-4">
-      <div class="field">
-        <%= f.label :firstname, "First Name", class: "block text-sm font-medium text-gray-700" %>
-        <%= f.text_field :firstname, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
+        <% if user.avatar.attached? %>
+          <p class="mt-2 text-xs text-gray-600 dark:text-gray-400">
+            Current: <%= user.avatar.filename %> (<%= number_to_human_size(user.avatar.byte_size) %>)
+          </p>
+        <% end %>
       </div>
 
       <div class="field">
-        <%= f.label :lastname, "Last Name", class: "block text-sm font-medium text-gray-700" %>
-        <%= f.text_field :lastname, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
+        <%= f.label :name %>
+        <%= f.text_field :name %>
       </div>
 
       <div class="field">
-        <%= f.label :email, class: "block text-sm font-medium text-gray-700" %>
-        <%= f.email_field :email, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" %>
+        <%= f.label :email %>
+        <%= f.email_field :email %>
       </div>
 
       <div class="field">
-        <%= f.label :current_theme, "Theme", class: "block text-sm font-medium text-gray-700" %>
+        <%= f.label :current_theme, "Theme" %>
         <%= f.select :current_theme,
-                     options_for_select(Panda::Core.configuration.available_themes || [["Default", "default"], ["Sky", "sky"]], user.current_theme),
+                     options_for_select(Panda::Core.config.available_themes || [["Default", "default"], ["Sky", "sky"]], user.current_theme),
                      {},
-                     class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
                      data: { action: "change->theme-form#updateTheme" } %>
       </div>
     </div>
 
     <%= f.submit "Update Profile",
-        class: "btn btn-primary mt-6",
+        class: "btn btn-primary mt-4",
         data: { disable_with: "Saving..." } %>
   <% end %>
 <% end %>

data/app/views/panda/core/admin/sessions/new.html.erb

@@ -1,23 +1,22 @@
 <div class="flex flex-col justify-center py-12 px-6 min-h-full text-center lg:px-8">
   <div class="text-center sm:mx-auto sm:w-full sm:max-w-sm">
-    <% if Panda::Core.configuration.login_logo_path %>
-      <img src="<%= Panda::Core.configuration.login_logo_path %>" class="py-2 mx-auto w-auto h-32">
+    <% if Panda::Core.config.login_logo_path %>
+      <img src="<%= Panda::Core.config.login_logo_path %>" class="py-2 mx-auto w-auto h-32">
     <% end %>
     <h2 class="mt-10 mb-6 text-2xl font-bold text-center text-white">
-      <%= Panda::Core.configuration.login_page_title || "Sign in to your account" %>
+      <%= Panda::Core.config.login_page_title || "Sign in to your account" %>
     </h2>
   </div>
-  <% if @providers&.any? || Panda::Core.configuration.authentication_providers.any? %>
-    <% providers = @providers || Panda::Core.configuration.authentication_providers.keys %>
+  <% if @providers&.any? || Panda::Core.config.authentication_providers.any? %>
+    <% providers = @providers || Panda::Core.config.authentication_providers.keys %>
     <% providers.each do |provider| %>
-      <% provider_config = Panda::Core.configuration.authentication_providers[provider] %>
-      <% provider_name = provider_config&.dig(:name) || provider.to_s.humanize %>
+      <% provider_config = Panda::Core.config.authentication_providers[provider] %>
       <% provider_path = provider_config&.dig(:path_name) || provider %>
       <div class="mt-4 text-center sm:mx-auto sm:w-full sm:max-w-sm">
-        <%= form_tag "#{Panda::Core.configuration.admin_path}/auth/#{provider_path}", method: "post", data: {turbo: false} do %>
+        <%= form_tag "#{Panda::Core.config.admin_path}/auth/#{provider_path}", method: "post", data: {turbo: false} do %>
           <button type="submit" id="button-sign-in-<%= provider_path %>" class="inline-flex gap-x-2 items-center py-2.5 px-3.5 mx-auto mb-4 bg-white text-gray-900 rounded-md border min-w-56 border-neutral-400 hover:bg-gray-50">
-            <i class="fa-brands fa-<%= oauth_provider_icon(provider) %> text-xl mr-1"></i>
-            Sign in with <%= provider_name %>
+            <i class="<%= oauth_provider_non_brand?(provider) ? 'fa-solid' : 'fa-brands' %> fa-<%= oauth_provider_icon(provider) %> text-xl mr-1"></i>
+            Sign in with <%= oauth_provider_name(provider, provider_config) %>
           </button>
         <% end %>
       </div>

data/app/views/panda/core/admin/shared/_breadcrumbs.html.erb

@@ -1,35 +1,28 @@
-<% if defined?(@breadcrumbs) && @breadcrumbs.any? %>
-  <div class="flex">
-    <nav class="flex-1 px-4 py-3 text-gray-700 border-b border-gray-200 bg-gray-50" aria-label="Breadcrumb" id="panda-breadcrumbs">
-      <ol class="inline-flex items-center space-x-1 md:space-x-3">
-        <% @breadcrumbs.each_with_index do |breadcrumb, index| %>
-          <li class="inline-flex items-center">
-            <% if index > 0 %>
-              <svg class="w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-              </svg>
-            <% end %>
-            
-            <% if breadcrumb.path && index < @breadcrumbs.length - 1 %>
-              <%= link_to breadcrumb.label, breadcrumb.path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600" %>
-            <% else %>
-              <span class="text-sm font-medium text-gray-500"><%= breadcrumb.label %></span>
-            <% end %>
-          </li>
-        <% end %>
-      </ol>
-    </nav>
-    
-    <% if content_for?(:sidebar) %>
-      <div class="px-4 py-3 border-b border-gray-200 bg-gray-50 text-gray-700" tabindex="-1" data-controller="toggle">
-        <a href="#" id="slideover-toggle" data-action="click->toggle#toggle touch->toggle#toggle" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
-          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-          </svg>
-          <%= yield(:sidebar_title) || "Settings" %>
+<% breadcrumb_styles = "text-black/60 hover:text-black/80" %>
+
+<div class="flex mt-1 -mb-1">
+  <nav aria-label="Breadcrumb" id="panda-breadcrumbs" class="grow">
+    <ol role="list" class="px-4 w-full sm:px-6">
+      <li class="inline-block">
+        <a href="<%= Panda::Core.config.admin_path %>" class="<%= breadcrumb_styles %>">
+          <i class="fa fa-solid fa-house fa-fw inline-block w-4 text-center"></i>
+          <span class="sr-only">Home</span>
         </a>
-      </div>
-    <% end %>
-  </div>
-<% end %>
+      </li>
+      <% breadcrumbs.each do |crumb| %>
+        <li class="inline-block">
+          <i class="fa-solid fa-chevron-right fa-fw inline-block w-4 text-center font-light <%= breadcrumb_styles %> px-2"></i>
+          <a href="<%= crumb.path %>" class="text-sm font-normal <%= breadcrumb_styles %>"><%= crumb.name %></a>
+        </li>
+      <% end %>
+    </ol>
+  </nav>
+
+  <% if content_for :sidebar %>
+    <div class="pt-4 pr-8 text-black/80" tabindex="-1">
+      <button type="button" id="slideover-toggle" data-action="click->toggle#toggle touch->toggle#toggle" class="text-sm font-light">
+        <i class="mr-1 fa-light fa-gear"></i> <%= yield :sidebar_title %>
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/panda/core/admin/shared/_flash.html.erb

@@ -1,31 +1,5 @@
 <% if flash.any? %>
-  <div class="fixed top-4 right-4 z-50 space-y-2">
-    <% flash.each do |type, message| %>
-      <div class="bg-white rounded-lg shadow-lg p-4 max-w-sm" data-controller="flash" data-flash-delay-value="5000">
-        <div class="flex items-start">
-          <div class="flex-shrink-0">
-            <% if type == "success" %>
-              <i class="fa-regular fa-check-circle text-green-500"></i>
-            <% elsif type == "error" %>
-              <i class="fa-regular fa-times-circle text-red-500"></i>
-            <% elsif type == "warning" %>
-              <i class="fa-regular fa-exclamation-triangle text-yellow-500"></i>
-            <% else %>
-              <i class="fa-regular fa-info-circle text-blue-500"></i>
-            <% end %>
-          </div>
-          <div class="ml-3 w-0 flex-1">
-            <p class="text-sm font-medium text-gray-900">
-              <%= message %>
-            </p>
-          </div>
-          <div class="ml-4 flex-shrink-0 flex">
-            <button type="button" class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500" data-action="click->flash#close">
-              <i class="fa-regular fa-times"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
-<% end %>
+  <% flash.each do |kind, message| %>
+    <%= render Panda::Core::Admin::FlashMessageComponent.new(kind: kind.to_sym, message: message) %>
+  <% end %>
+<% end %>

data/app/views/panda/core/admin/shared/_sidebar.html.erb

@@ -1,27 +1,48 @@
 <nav class="flex flex-col flex-1">
-  <ul role="list" class="flex flex-col flex-1 gap-y-7">
-    <li>
-      <ul role="list" class="-mx-2 space-y-1">
-        <% Panda::Core.configuration.admin_navigation_items&.call(current_user)&.each do |item| %>
-          <li>
-            <%= link_to item[:path], class: "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold text-gray-200 hover:text-white hover:bg-gray-700" do %>
-              <i class="<%= item[:icon] %> text-gray-200 group-hover:text-white"></i>
-              <%= item[:label] %>
-            <% end %>
-          </li>
+  <ul role="list" class="flex flex-col flex-1">
+    <a class="block p-0 mt-4 mb-4 ml-2 text-xl font-medium text-white"><%= Panda::Core.config.admin_title || "Panda Admin" %></a>
+    <%
+      # Get navigation items in original order for display
+      nav_items = Panda::Core.config.admin_navigation_items&.call(current_user) || []
+
+      # Find the most specific matching path by checking longest paths first
+      active_path = nav_items
+        .sort_by { |item| -item[:path].length }
+        .find { |item| request.path == item[:path] || request.path.starts_with?(item[:path] + "/") }
+        &.dig(:path)
+    %>
+    <% nav_items.each do |item| %>
+      <li>
+        <%
+          # Check if this item is the active one
+          is_active = item[:path] == active_path
+        %>
+        <%= link_to item[:path], class: "#{is_active ? "bg-mid text-white relative flex items-center transition-all py-3 px-2 mb-2 rounded-md group gap-x-3 text-base leading-6 font-normal" : "text-white hover:bg-mid/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal"}" do %>
+          <span class="text-center w-6"><i class="<%= item[:icon] %> text-xl fa-fw"></i></span>
+          <span><%= item[:label] %></span>
         <% end %>
-      </ul>
+      </li>
+    <% end %>
+    <li>
+      <%= button_to panda_core.admin_logout_path, method: :delete, id: "logout-link", data: { turbo: false }, class: "text-white hover:bg-mid/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal w-full" do %>
+        <span class="text-center w-6"><i class="text-xl fa-solid fa-door-open fa-fw"></i></span>
+        <span>Logout</span>
+      <% end %>
     </li>
-    
     <li class="mt-auto">
-      <div class="flex items-center gap-x-4 px-6 py-3 text-sm font-semibold leading-6 text-gray-200">
-        <% if current_user %>
-          <span class="flex-1"><%= "#{current_user.firstname} #{current_user.lastname}" %></span>
-          <%= link_to panda_core.admin_logout_path, method: :delete, class: "text-gray-200 hover:text-white" do %>
-            <i class="fa-regular fa-sign-out"></i>
-          <% end %>
+      <%= link_to panda_core.edit_admin_my_profile_path, class: "text-white hover:bg-mid/60 transition-all group flex items-center gap-x-3 py-3 px-2 mb-2 rounded-md text-base leading-6 font-normal w-full", title: "Edit my Profile" do %>
+        <% if current_user.avatar.attached? %>
+          <span class="text-center w-6"><%= image_tag main_app.url_for(current_user.avatar), alt: current_user.name, class: "w-auto h-7 rounded-full object-cover" %></span>
+        <% elsif !current_user.image_url.to_s.empty? %>
+          <span class="text-center w-6"><img src="<%= current_user.image_url %>" class="w-auto h-7 rounded-full"></span>
+        <% else %>
+          <span class="text-center w-6"><i class="text-xl fa-solid fa-circle-user fa-fw"></i></span>
         <% end %>
-      </div>
+        <span><%= current_user.name %></span>
+      <% end %>
+    </li>
+    <li class="px-2 py-3">
+      <span class="text-xs text-white">Panda Core v<%= Panda::Core::VERSION %></span>
     </li>
   </ul>
-</nav>
+</nav>

data/app/views/panda/core/shared/_header.html.erb

@@ -1,11 +1,19 @@
 <!DOCTYPE html>
-<html data-theme="<%= Panda::Core::Current&.user&.current_theme || Panda::Core.configuration.default_theme %>" class="<%= local_assigns[:html_class] || "" %>">
+<html data-theme="<%= Panda::Core::Current&.user&.current_theme || Panda::Core.config.default_theme %>" class="<%= local_assigns[:html_class] || "" %>">
   <head>
-    <title><%= content_for?(:title) ? yield(:title) : (Panda::Core.configuration.admin_title || "Panda Admin") %></title>
+    <title><%= content_for?(:title) ? yield(:title) : (Panda::Core.config.admin_title || "Panda Admin") %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    <script src="https://kit.fontawesome.com/7835d81e75.js" defer="true" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="/panda-core-assets/panda-core.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css">
+    <%= panda_core_stylesheet %>
+    <%= panda_core_javascript %>
+
+    <% if defined?(Panda::CMS) && controller.class.name.start_with?("Panda::CMS") %>
+      <!-- CMS Assets -->
+      <%= panda_cms_javascript %>
+      <%= render "panda/cms/shared/favicons" %>
+    <% end %>
+
     <%= yield :head %>
   </head>
-  <body class="h-full <%= local_assigns[:body_class] || "" %>" data-environment="<%= Rails.env %>">
+  <body class="overflow-hidden h-full <%= local_assigns[:body_class] || "" %>" data-environment="<%= Rails.env %>">

data/config/importmap.rb

@@ -1,10 +1,23 @@
 # frozen_string_literal: true
 
-# Base JavaScript dependencies for Panda Core
-pin "@hotwired/turbo", to: "@hotwired--turbo.js", preload: true # @8.0.18
-pin "@rails/actioncable/src", to: "@rails--actioncable--src.js", preload: true # @8.0.201
-pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
-pin "tailwindcss-stimulus-components" # @6.1.3
+# Panda Core application and controllers
+# Served via Rack::Static middleware from app/javascript
+pin "panda/core/application", to: "/panda/core/application.js"
+pin "panda/core/controllers/index", to: "/panda/core/controllers/index.js"
+pin "panda/core/controllers/toggle_controller", to: "/panda/core/controllers/toggle_controller.js"
+pin "panda/core/controllers/theme_form_controller", to: "/panda/core/controllers/theme_form_controller.js"
+pin "panda/core/tailwindplus-elements", to: "/panda/core/tailwindplus-elements.js"
 
-# Font Awesome icons
+# Base JavaScript dependencies for Panda Core (vendored for reliability)
+pin "@hotwired/stimulus", to: "/panda/core/vendor/@hotwired--stimulus.js", preload: true # @3.2.2
+pin "@hotwired/turbo", to: "/panda/core/vendor/@hotwired--turbo.js", preload: true # @8.0.18
+pin "@rails/actioncable/src", to: "/panda/core/vendor/@rails--actioncable--src.js", preload: true # @8.0.201
+pin "tailwindcss-stimulus-components", to: "/panda/core/tailwindcss-stimulus-components.js" # @6.1.3
+
+# Font Awesome icons (from CDN)
 pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@7.1.0/js/all.js"
+
+# Tailwind Plus Elements - Vanilla JS interactive components (from CDN)
+# Provides: Autocomplete, Command palette, Dialog, Disclosure, Dropdown menu, Popover, Select, Tabs
+# Note: Using esm.sh instead of jsdelivr for better ES module support
+pin "@tailwindplus/elements", to: "https://esm.sh/@tailwindplus/elements@1", preload: false

data/config/routes.rb

@@ -1,7 +1,7 @@
 Panda::Core::Engine.routes.draw do
   # Get admin_path from configuration
   # Default to "/admin" if not yet configured
-  admin_path = (Panda::Core.configuration.admin_path || "/admin").delete_prefix("/")
+  admin_path = (Panda::Core.config.admin_path || "/admin").delete_prefix("/")
 
   scope path: admin_path, as: "admin" do
     get "/login", to: "admin/sessions#new", as: :login
@@ -17,8 +17,15 @@ Panda::Core::Engine.routes.draw do
     get "/", to: "admin/dashboard#show", as: :root
 
     # Profile management
-    constraints Panda::Core::AdminConstraint.new do
-      resource :my_profile, only: %i[edit update], controller: "admin/my_profile", path: "my_profile"
+    resource :my_profile, only: %i[edit update], controller: "admin/my_profile", path: "my_profile"
+
+    # Test-only authentication endpoint (available in development and test environments)
+    # This bypasses OAuth for faster, more reliable test execution
+    # Development: Used by Capybara system tests which run Rails server in development mode
+    # Test: Used by controller/request tests
+    unless Rails.env.production?
+      get "/test_login/:user_id", to: "admin/test_sessions#create", as: :test_login
+      post "/test_sessions", to: "admin/test_sessions#create", as: :test_sessions
     end
   end
 end

data/db/migrate/20250810120000_add_current_theme_to_panda_core_users.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddCurrentThemeToPandaCoreUsers < ActiveRecord::Migration[7.1]
+  def change
+    add_column :panda_core_users, :current_theme, :string unless column_exists?(:panda_core_users, :current_theme)
+  end
+end

data/db/migrate/20250811120000_add_oauth_avatar_url_to_panda_core_users.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class AddOauthAvatarUrlToPandaCoreUsers < ActiveRecord::Migration[8.0]
+  def change
+    add_column :panda_core_users, :oauth_avatar_url, :string
+  end
+end

data/lib/panda/core/asset_loader.rb

@@ -105,9 +105,19 @@ module Panda
             end
 
           else
-            # Development mode - use importmap
+            # Development mode - use importmap for JS and static CSS
             tags = []
             tags << javascript_include_tag("panda/core/application", type: "module")
+
+            # Add CSS if available
+            css_path = development_css_url
+            if css_path
+              css_attrs = {
+                rel: "stylesheet",
+                href: css_path
+              }
+              tags << tag(:link, css_attrs)
+            end
           end
           tags.join("\n").html_safe
         end
@@ -144,11 +154,16 @@ module Panda
         end
 
         def development_css_url
-          return unless compiled_assets_available?
-
+          # Try versioned file first
           version = asset_version
-          css_file = "/panda-core-assets/panda-core-#{version}.css"
-          File.exist?(Rails.root.join("public#{css_file}")) ? css_file : nil
+          versioned_file = "/panda-core-assets/panda-core-#{version}.css"
+          return versioned_file if File.exist?(Rails.public_path.join("panda-core-assets", "panda-core-#{version}.css"))
+
+          # Fall back to unversioned file (always available from engine's public directory)
+          unversioned_file = "/panda-core-assets/panda-core.css"
+          return unversioned_file if File.exist?(Panda::Core::Engine.root.join("public", "panda-core-assets", "panda-core.css"))
+
+          nil
         end
 
         def asset_version
@@ -193,9 +208,9 @@ module Panda
           end.compact.join(" ")
 
           if content || block_given?
-            "<#{name}#{attrs.present? ? " #{attrs}" : ""}>#{content || (block_given? ? yield : "")}</#{name}>"
+            "<#{name}#{" #{attrs}" if attrs.present?}>#{content || (block_given? ? yield : "")}</#{name}>"
           else
-            "<#{name}#{attrs.present? ? " #{attrs}" : ""}><#{name}>"
+            "<#{name}#{" #{attrs}" if attrs.present?}><#{name}>"
           end
         end
 
@@ -208,7 +223,7 @@ module Panda
             end
           end.compact.join(" ")
 
-          "<#{name}#{attrs.present? ? " #{attrs}" : ""} />"
+          "<#{name}#{" #{attrs}" if attrs.present?} />"
         end
 
         def javascript_include_tag(source, options = {})

data/lib/panda/core/configuration.rb

@@ -46,7 +46,7 @@ module Panda
             {
               label: "Dashboard",
               path: @admin_path,
-              icon: "fa-regular fa-house"
+              icon: "fa-solid fa-house"
             }
           ]
 
@@ -55,14 +55,14 @@ module Panda
             items << {
               label: "Content",
               path: "#{@admin_path}/cms",
-              icon: "fa-regular fa-file-lines"
+              icon: "fa-solid fa-file-lines"
             }
           end
 
           items << {
             label: "My Profile",
             path: "#{@admin_path}/my_profile/edit",
-            icon: "fa-regular fa-user"
+            icon: "fa-solid fa-user"
           }
 
           items
@@ -84,19 +84,22 @@ module Panda
     end
 
     class << self
-      attr_writer :configuration
+      attr_writer :config
 
-      def configuration
-        @configuration ||= Configuration.new
+      def config
+        @config ||= Configuration.new
       end
 
       def configure
-        yield(configuration)
+        yield(config)
       end
 
-      def reset_configuration!
-        @configuration = Configuration.new
+      def reset_config!
+        @config = Configuration.new
       end
+
+      # Alias for backward compatibility with test expectations
+      alias_method :reset_configuration!, :reset_config!
     end
   end
 end