admin_suite 0.2.1 → 0.2.3

data/app/views/admin_suite/resources/index.html.erb

@@ -56,12 +56,12 @@
     <% end %>
   <% end %>
 
-  <div class="flex flex-col lg:flex-row gap-6">
+  <div class="admin-suite-two-col flex flex-col md:flex-row gap-6">
     <!-- Filters Sidebar -->
     <% if resource_config.index_config&.filters_list&.any? || resource_config.index_config&.searchable_fields&.any? %>
-      <div class="lg:w-64 flex-shrink-0">
+      <div class="admin-suite-two-col__sidebar admin-suite-two-col__sidebar--filters md:w-64 flex-shrink-0">
         <div class="bg-white rounded-xl border border-slate-200 p-4">
-          <h3 class="font-medium text-slate-900 dark:text-white mb-4">Filters</h3>
+          <h3 class="font-medium text-slate-900 mb-4">Filters</h3>
           <%= form_with url: url_for(action: :index), method: :get,
               data: {
                 turbo_frame: "resource_results",
@@ -136,7 +136,7 @@
     <% end %>
 
     <!-- Main Content -->
-    <div class="flex-1">
+    <div class="flex-1 min-w-0">
       <%= turbo_frame_tag "resource_results", data: { turbo_action: "advance" } do %>
         <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
           <% if @collection.any? %>
@@ -216,25 +216,25 @@
 
           <!-- Pagination -->
           <% if @pagy.pages > 1 %>
-            <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-700">
+            <div class="px-6 py-4 border-t border-slate-200">
               <div class="flex items-center justify-between">
-                <div class="text-sm text-slate-500 dark:text-slate-400">
-                  Showing <span class="font-medium text-slate-700 dark:text-slate-300"><%= @pagy.from %></span> to
-                  <span class="font-medium text-slate-700 dark:text-slate-300"><%= @pagy.to %></span> of
-                  <span class="font-medium text-slate-700 dark:text-slate-300"><%= number_with_delimiter(@pagy.count) %></span> results
+                <div class="text-sm text-slate-500">
+                  Showing <span class="font-medium text-slate-700"><%= @pagy.from %></span> to
+                  <span class="font-medium text-slate-700"><%= @pagy.to %></span> of
+                  <span class="font-medium text-slate-700"><%= number_with_delimiter(@pagy.count) %></span> results
                 </div>
 
                 <nav class="flex items-center gap-1">
                   <% if @pagy.prev %>
                     <%= link_to url_for(params.permit!.merge(page: @pagy.prev)),
-                        class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors" do %>
+                        class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" do %>
                       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                       </svg>
                       Prev
                     <% end %>
                   <% else %>
-                    <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 dark:text-slate-500 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg cursor-not-allowed">
+                    <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
                       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                       </svg>
@@ -245,10 +245,10 @@
                   <div class="hidden sm:flex items-center gap-1 mx-2">
                     <% @pagy.series.each do |item| %>
                       <% if item == :gap %>
-                        <span class="px-2 py-1 text-sm text-slate-400 dark:text-slate-500">…</span>
+                        <span class="px-2 py-1 text-sm text-slate-400">…</span>
                       <% elsif item.is_a?(Integer) %>
                         <%= link_to item, url_for(params.permit!.merge(page: item)),
-                            class: "px-3 py-1.5 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors" %>
+                            class: "px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" %>
                       <% elsif item.is_a?(String) %>
                         <span class="px-3 py-1.5 text-sm font-medium text-white rounded-lg" style="background: var(--admin-suite-primary); border: 1px solid var(--admin-suite-primary);">
                           <%= item %>
@@ -257,20 +257,20 @@
                     <% end %>
                   </div>
 
-                  <span class="sm:hidden px-3 py-1.5 text-sm text-slate-500 dark:text-slate-400">
+                  <span class="sm:hidden px-3 py-1.5 text-sm text-slate-500">
                     Page <%= @pagy.page %> of <%= @pagy.pages %>
                   </span>
 
                   <% if @pagy.next %>
                     <%= link_to url_for(params.permit!.merge(page: @pagy.next)),
-                        class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-600 transition-colors" do %>
+                        class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" do %>
                       Next
                       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                       </svg>
                     <% end %>
                   <% else %>
-                    <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 dark:text-slate-500 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg cursor-not-allowed">
+                    <span class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-400 bg-slate-100 border border-slate-200 rounded-lg cursor-not-allowed">
                       Next
                       <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
@@ -281,22 +281,22 @@
               </div>
             </div>
           <% else %>
-            <div class="px-6 py-3 border-t border-slate-200 dark:border-slate-700">
-              <div class="text-sm text-slate-500 dark:text-slate-400">
-                Showing <span class="font-medium text-slate-700 dark:text-slate-300"><%= @pagy.count %></span> results
+            <div class="px-6 py-3 border-t border-slate-200">
+              <div class="text-sm text-slate-500">
+                Showing <span class="font-medium text-slate-700"><%= @pagy.count %></span> results
               </div>
             </div>
           <% end %>
         <% else %>
           <div class="p-12 text-center">
-            <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-900 mb-4">
+            <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">
               <svg class="w-6 h-6 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
               </svg>
             </div>
-            <h3 class="text-lg font-medium text-slate-900 dark:text-white">No <%= resource_config.human_name_plural.downcase %> found</h3>
+            <h3 class="text-lg font-medium text-slate-900">No <%= resource_config.human_name_plural.downcase %> found</h3>
             <% if has_new_route %>
-              <p class="text-slate-500 dark:text-slate-400 mt-1">Get started by creating your first one.</p>
+              <p class="text-slate-500 mt-1">Get started by creating your first one.</p>
               <%= link_to url_for(action: :new),
                   class: theme_btn_primary_class + " mt-4",
                   data: { turbo_frame: "_top" } do %>
@@ -304,7 +304,7 @@
                 New <%= resource_config.human_name %>
               <% end %>
             <% else %>
-              <p class="text-slate-500 dark:text-slate-400 mt-1">No records have been created yet.</p>
+              <p class="text-slate-500 mt-1">No records have been created yet.</p>
             <% end %>
           </div>
         <% end %>

data/app/views/admin_suite/resources/new.html.erb

@@ -3,18 +3,18 @@
 <div class="px-4 sm:px-6 lg:px-8 max-w-3xl mx-auto">
   <!-- Header -->
   <div class="mb-6">
-    <nav class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 mb-2">
+    <nav class="flex items-center gap-2 text-sm text-slate-500 mb-2">
       <%= link_to "Dashboard", root_path, class: theme_link_hover_text_class %>
       <%= admin_suite_icon("chevron-right", class: "w-4 h-4") %>
       <%= link_to resource_config.human_name_plural, url_for(action: :index), class: theme_link_hover_text_class %>
       <%= admin_suite_icon("chevron-right", class: "w-4 h-4") %>
-      <span class="text-slate-900 dark:text-white">New</span>
+      <span class="text-slate-900">New</span>
     </nav>
-    <h1 class="text-2xl font-bold text-slate-900 dark:text-white">New <%= resource_config.human_name %></h1>
+    <h1 class="text-2xl font-bold text-slate-900">New <%= resource_config.human_name %></h1>
   </div>
 
   <!-- Form -->
-  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+  <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-visible">
     <div class="p-6">
       <%= render "admin_suite/shared/form", resource: @resource %>
     </div>

data/app/views/admin_suite/resources/show.html.erb

@@ -26,23 +26,23 @@
 <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
   <!-- Header -->
   <div class="mb-6">
-    <nav class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 mb-2">
+    <nav class="flex items-center gap-2 text-sm text-slate-500 mb-2">
       <%= link_to "Dashboard", root_path, class: theme_link_hover_text_class %>
       <%= admin_suite_icon("chevron-right", class: "w-4 h-4") %>
       <%= link_to resource_config.human_name_plural, url_for(action: :index), class: theme_link_hover_text_class %>
       <%= admin_suite_icon("chevron-right", class: "w-4 h-4") %>
-      <span class="text-slate-900 dark:text-white">
+      <span class="text-slate-900">
         <%= resource.respond_to?(:name) ? resource.name.to_s.truncate(30) : "##{resource.id}" %>
       </span>
     </nav>
 
     <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold text-slate-900 dark:text-white">
+      <h1 class="text-2xl font-bold text-slate-900">
         <%= resource.respond_to?(:name) ? resource.name : "#{resource_config.human_name} ##{resource.id}" %>
       </h1>
       <div class="flex items-center gap-2">
         <% if has_edit_route %>
-          <%= link_to url_for(action: :edit, id: resource.to_param), class: "inline-flex items-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-900 dark:text-white text-sm font-medium rounded-lg transition-colors" do %>
+          <%= link_to url_for(action: :edit, id: resource.to_param), class: "inline-flex items-center gap-2 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-900 text-sm font-medium rounded-lg transition-colors" do %>
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
             </svg>
@@ -128,24 +128,24 @@
   <% end %>
 
   <!-- Two Column Layout -->
-  <div class="flex flex-col lg:flex-row gap-6">
+  <div class="admin-suite-two-col flex flex-col md:flex-row gap-6">
     <!-- Sidebar (Left Column) -->
     <% if sidebar_sections.any? %>
-      <div class="lg:w-80 flex-shrink-0 space-y-6">
+      <div class="admin-suite-two-col__sidebar admin-suite-two-col__sidebar--details md:w-80 flex-shrink-0 space-y-6">
         <% sidebar_sections.each do |section| %>
           <%= render_show_section(resource, section, :sidebar) %>
         <% end %>
       </div>
     <% else %>
-      <div class="lg:w-80 flex-shrink-0 space-y-6">
-        <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
-          <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
-            <h3 class="font-medium text-slate-900 dark:text-white text-sm">Details</h3>
+      <div class="admin-suite-two-col__sidebar admin-suite-two-col__sidebar--details md:w-80 flex-shrink-0 space-y-6">
+        <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
+          <div class="px-4 py-3 border-b border-slate-200 bg-slate-50">
+            <h3 class="font-medium text-slate-900 text-sm">Details</h3>
           </div>
           <div class="p-4 space-y-3">
             <div class="flex justify-between items-start">
-              <span class="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">ID</span>
-              <span class="text-sm font-mono text-slate-900 dark:text-white"><%= resource.id %></span>
+              <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">ID</span>
+              <span class="text-sm font-mono text-slate-900"><%= resource.id %></span>
             </div>
           </div>
         </div>
@@ -159,18 +159,18 @@
           <%= render_show_section(resource, section, :main) %>
         <% end %>
       <% else %>
-        <div class="bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
-          <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
-            <h3 class="font-medium text-slate-900 dark:text-white">All Attributes</h3>
+        <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
+          <div class="px-6 py-4 border-b border-slate-200 bg-slate-50">
+            <h3 class="font-medium text-slate-900">All Attributes</h3>
           </div>
           <div class="p-6">
             <dl class="space-y-6">
               <% resource.attributes.except("id", "created_at", "updated_at").each do |attr, _value| %>
                 <div>
-                  <dt class="text-sm font-medium text-slate-500 dark:text-slate-400 mb-2">
+                  <dt class="text-sm font-medium text-slate-500 mb-2">
                     <%= attr.humanize %>
                   </dt>
-                  <dd class="text-sm text-slate-900 dark:text-white">
+                  <dd class="text-sm text-slate-900">
                     <%= format_show_value(resource, attr) %>
                   </dd>
                 </div>

data/app/views/admin_suite/shared/_flash.html.erb

@@ -1,5 +1,5 @@
 <% if flash.any? %>
-  <div class="fixed top-4 right-4 z-50 space-y-2 max-w-md">
+  <div class="fixed top-20 right-4 z-50 space-y-2 max-w-md" data-controller="admin-suite--flash">
     <% flash.each do |type, message| %>
       <% type = type.to_sym %>
       <% classes = case type
@@ -13,7 +13,10 @@
           "admin-suite-flash--info"
       end %>
 
-      <div class="flex items-start gap-3 px-5 py-4 rounded-lg shadow-lg border <%= classes %>">
+      <div
+        data-admin-suite--flash-target="notification"
+        class="flex items-start gap-3 px-5 py-4 rounded-lg shadow-lg border <%= classes %>"
+      >
         <div class="flex-shrink-0 mt-0.5">
           <% icon_name = case type
             when :notice then "check-circle-2"
@@ -23,7 +26,17 @@
           end %>
           <%= admin_suite_icon(icon_name, class: "w-5 h-5") %>
         </div>
+
         <p class="flex-1 text-sm font-medium leading-snug"><%= message %></p>
+
+        <button
+          type="button"
+          class="flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors"
+          data-action="admin-suite--flash#dismiss"
+          aria-label="Dismiss notification"
+        >
+          <%= admin_suite_icon("x", class: "w-4 h-4") %>
+        </button>
       </div>
     <% end %>
   </div>

data/app/views/admin_suite/shared/_form.html.erb

@@ -2,16 +2,16 @@
 
 <%= form_with model: resource, url: resource.new_record? ? url_for(action: :create) : url_for(action: :update, id: resource.to_param), local: true, class: "space-y-6" do |f| %>
   <% if resource.errors.any? %>
-    <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+    <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
       <div class="flex items-start gap-3">
         <svg class="w-5 h-5 text-red-500 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
         </svg>
         <div>
-          <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
+          <h3 class="text-sm font-medium text-red-800">
             <%= pluralize(resource.errors.count, "error") %> prohibited this record from being saved:
           </h3>
-          <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside">
+          <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
             <% resource.errors.full_messages.each do |message| %>
               <li><%= message %></li>
             <% end %>
@@ -24,10 +24,10 @@
   <% resource_config.form_config&.fields_list&.each do |field| %>
     <% case field %>
     <% when Admin::Base::Resource::SectionDefinition %>
-      <div class="border-t border-slate-200 dark:border-slate-700 pt-6 mt-6">
-        <h3 class="text-lg font-medium text-slate-900 dark:text-white mb-1"><%= field.title %></h3>
+      <div class="border-t border-slate-200 pt-6 mt-6">
+        <h3 class="text-lg font-medium text-slate-900 mb-1"><%= field.title %></h3>
         <% if field.description.present? %>
-          <p class="text-sm text-slate-500 dark:text-slate-400 mb-4"><%= field.description %></p>
+          <p class="text-sm text-slate-500 mb-4"><%= field.description %></p>
         <% end %>
       </div>
     <% when Admin::Base::Resource::SectionEnd %>
@@ -51,8 +51,8 @@
     <% end %>
   <% end %>
 
-  <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-200 dark:border-slate-700">
-    <%= link_to "Cancel", resource.new_record? ? url_for(action: :index) : url_for(action: :show, id: resource.to_param), class: "px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors" %>
+  <div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-200">
+    <%= link_to "Cancel", resource.new_record? ? url_for(action: :index) : url_for(action: :show, id: resource.to_param), class: "px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 rounded-lg transition-colors" %>
     <%= f.button class: theme_btn_primary_small_class, data: { disable_with: "Saving..." } do %>
       <%= resource.new_record? ? "Create #{resource_config.human_name}" : "Save Changes" %>
     <% end %>

data/app/views/admin_suite/shared/_json_editor_field.html.erb

@@ -18,9 +18,9 @@
 
 <div data-controller="admin-suite--json-editor">
   <% if field.help.present? %>
-    <p class="text-sm text-slate-500 dark:text-slate-400 mb-2"><%= field.help %></p>
+    <p class="text-sm text-slate-500 mb-2"><%= field.help %></p>
   <% else %>
-    <p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Enter valid JSON. Use the Format button to pretty-print.</p>
+    <p class="text-sm text-slate-500 mb-2">Enter valid JSON. Use the Format button to pretty-print.</p>
   <% end %>
 
   <div class="relative">
@@ -38,7 +38,7 @@
       <button
         type="button"
         data-action="click->admin-suite--json-editor#format"
-        class="px-3 py-1.5 text-xs font-medium text-slate-700 dark:text-slate-300 bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 rounded transition-colors"
+        class="px-3 py-1.5 text-xs font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded transition-colors"
       >
         Format JSON
       </button>
@@ -47,6 +47,6 @@
 
   <div
     data-admin-suite--json-editor-target="error"
-    class="hidden mt-2 text-sm text-red-600 dark:text-red-400"
+    class="hidden mt-2 text-sm text-red-600"
   ></div>
 </div>

data/app/views/admin_suite/shared/_sidebar.html.erb

@@ -44,13 +44,13 @@
   <!-- Portal Navigation -->
   <nav class="flex-1 overflow-y-auto px-3 py-4 space-y-2">
     <% sorted_portals.each do |portal_key, portal| %>
-      <% portal_home = portal_path(portal: portal_key) %>
-      <% portal_prefix = File.join(request.script_name.to_s, portal_key.to_s) %>
-      <% active = request.path.start_with?(portal_prefix) %>
+      <% portal_home = portal_path(portal: portal_key).to_s %>
+      <% portal_prefix = portal_home.sub(%r{/*\z}, "") %>
+      <% active = portal_prefix.present? && (request.path == portal_prefix || request.path.start_with?("#{portal_prefix}/")) %>
       <% color = portal_color(portal_key) %>
 
       <div>
-        <%= link_to (portal_home || root_path),
+        <%= link_to (portal_prefix.presence || root_path),
             class: "flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors #{active ? "bg-white/20 text-white" : "text-white/90 hover:bg-white/10 hover:text-white"}" do %>
           <div class="admin-suite-portal-accent admin-suite-portal-accent--<%= color %> admin-suite-portal-chip flex items-center justify-center w-8 h-8 rounded-lg <%= active ? "" : "bg-white/10" %>">
             <%= portal_icon(portal_key, class: "admin-suite-portal-icon w-4 h-4") %>

data/app/views/admin_suite/shared/_toggle_cell.html.erb

@@ -7,6 +7,7 @@
 %>
 <%
   value = record.public_send(field)
+  frame_id = dom_id(record, "#{field}_toggle")
   toggle_url ||= begin
     url_for(action: :toggle, id: record.id, field: field)
   rescue ActionController::UrlGenerationError
@@ -16,11 +17,12 @@
   end
 %>
 
-<%= turbo_frame_tag dom_id(record, :toggle), class: "admin-suite-toggle-wrap inline-flex align-middle" do %>
+<%= turbo_frame_tag frame_id, class: "admin-suite-toggle-wrap inline-flex align-middle" do %>
   <% if toggle_url %>
     <%= button_to toggle_url,
         method: :post,
-        form: { data: { turbo_frame: dom_id(record, :toggle) }, class: "m-0 inline-flex align-middle items-center" },
+        params: { field: field },
+        form: { data: { turbo_frame: frame_id }, class: "m-0 inline-flex align-middle items-center" },
         class: "admin-suite-toggle-track #{value ? 'is-on' : ''}" do %>
       <span class="sr-only">Toggle <%= field.to_s.humanize %></span>
       <span class="admin-suite-toggle-thumb"></span>

data/app/views/admin_suite/shared/_topbar.html.erb

@@ -6,7 +6,7 @@
     <div class="flex items-center gap-4">
       <!-- Mobile menu button -->
       <button type="button"
-              class="lg:hidden p-2 rounded-lg text-slate-500 hover:bg-slate-100"
+              class="admin-suite-mobile-menu-button lg:hidden p-2 rounded-lg text-slate-500 hover:bg-slate-100"
               data-action="click->admin-suite--sidebar#toggle">
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
@@ -42,6 +42,19 @@
           <%= (admin_suite_actor&.respond_to?(:name) && admin_suite_actor.name.present?) ? admin_suite_actor.name.first.upcase : "A" %>
         </div>
       </div>
+
+      <% logout_path = admin_suite_logout_path %>
+      <% if logout_path.present? %>
+        <div class="pl-3 border-l border-slate-200">
+          <%= button_to logout_path,
+                        method: admin_suite_logout_method,
+                        form: { class: "inline-flex" },
+                        class: "inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:text-red-600 hover:bg-red-50 transition-colors" do %>
+            <%= admin_suite_icon("log-out", class: "w-4 h-4") %>
+            <span class="hidden sm:inline"><%= admin_suite_logout_label %></span>
+          <% end %>
+        </div>
+      <% end %>
     </div>
   </div>
 </header>

data/app/views/layouts/admin_suite/application.html.erb

@@ -41,24 +41,24 @@
   <body class="admin-suite bg-slate-50">
     <div class="flex h-screen overflow-hidden" data-controller="admin-suite--sidebar">
       <!-- Sidebar -->
-      <div class="hidden lg:flex lg:flex-shrink-0">
+      <div class="admin-suite-desktop-sidebar lg:flex lg:flex-shrink-0">
         <%= render "admin_suite/shared/sidebar" %>
       </div>
 
       <!-- Mobile sidebar overlay -->
       <div data-admin-suite--sidebar-target="overlay"
-           class="hidden fixed inset-0 z-40 bg-slate-600 bg-opacity-75 lg:hidden"
+           class="admin-suite-mobile-overlay hidden fixed inset-0 z-40 bg-slate-600 bg-opacity-75 lg:hidden"
            data-action="click->admin-suite--sidebar#close">
       </div>
 
       <!-- Mobile sidebar -->
       <div data-admin-suite--sidebar-target="mobileSidebar"
-           class="hidden fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 ease-in-out lg:hidden">
+           class="admin-suite-mobile-sidebar hidden fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300 ease-in-out lg:hidden">
         <%= render "admin_suite/shared/sidebar" %>
       </div>
 
       <!-- Main content area -->
-      <div class="flex flex-col flex-1 overflow-hidden">
+      <div class="admin-suite-main flex flex-col flex-1 overflow-hidden">
         <!-- Top bar -->
         <%= render "admin_suite/shared/topbar" %>
 

data/docs/configuration.md

@@ -29,6 +29,9 @@ These are the defaults in `AdminSuite::Configuration` / `AdminSuite::Engine`:
 - `authenticate`: `nil`
 - `current_actor`: `nil`
 - `authorize`: `nil`
+- `logout_path`: `nil`
+- `logout_method`: `:delete`
+- `logout_label`: `"Log out"`
 - `resource_globs`: defaults to:
   - `Rails.root/config/admin_suite/resources/*.rb`
   - `Rails.root/app/admin/resources/*.rb`
@@ -39,6 +42,11 @@ These are the defaults in `AdminSuite::Configuration` / `AdminSuite::Engine`:
   - `Rails.root/config/admin_suite/portals/*.rb`
   - `Rails.root/app/admin/portals/*.rb`
   - `Rails.root/app/admin_suite/portals/*.rb`
+- `dashboard_globs`: defaults to:
+  - `Rails.root/config/admin_suite/dashboard.rb`
+  - `Rails.root/config/admin_suite/dashboard/*.rb`
+  - `Rails.root/app/admin_suite/dashboard.rb`
+  - `Rails.root/app/admin_suite/dashboard/*.rb`
 
 Note: AdminSuite definition files (resources, actions, portals) often don't follow 
 Zeitwerk's path-to-constant naming conventions. To prevent eager-load `Zeitwerk::NameError`s 
@@ -92,6 +100,33 @@ Optional authorization hook (you can wire Pundit/CanCan/ActionPolicy/etc).
 
 Note: this hook is available, but your app must call it from resource definitions / custom actions as needed (AdminSuite will not guess your authorization policy).
 
+### `logout_path`
+
+Optional sign-out action shown in the top bar.
+
+- **Type**: `Proc`, `String`, `Symbol`, or `nil`
+- **Proc signature**: `->(view_context) { ... }`
+
+Example:
+
+```ruby
+config.logout_path = ->(view) { view.main_app.internal_developer_logout_path }
+```
+
+### `logout_method`
+
+HTTP method for the topbar sign-out button.
+
+- **Type**: `Symbol` or `String`
+- **Default**: `:delete`
+
+### `logout_label`
+
+Button label for the topbar sign-out action.
+
+- **Type**: `String` (or `Proc` for dynamic label)
+- **Default**: `"Log out"`
+
 ### `resource_globs`
 
 Where AdminSuite should load resource definition files from.
@@ -126,6 +161,26 @@ Where AdminSuite should load portal definition files from (files typically call
 
 - **Type**: `Array<String>`
 
+### `dashboard_globs`
+
+Where AdminSuite should load the root dashboard definition file(s) from (files typically call `AdminSuite.root_dashboard { ... }`).
+
+- **Type**: `Array<String>`
+
+### `root_dashboard_title`
+
+Optional title shown on the root dashboard.
+
+- **Type**: `String`, `Proc`, or `nil`
+- **Proc signature**: `->(controller) { "Admin Suite" }`
+
+### `root_dashboard_description`
+
+Optional description shown on the root dashboard.
+
+- **Type**: `String`, `Proc`, or `nil`
+- **Proc signature**: `->(controller) { "..." }`
+
 ### `portals`
 
 Portal metadata used for navigation (label/icon/color/order). This is separate from the portal DSL and can be used alone.

data/docs/portals.md

@@ -96,3 +96,45 @@ Example:
 - `/internal/admin/ops`
 - `/internal/admin/ai`
 
+## Root dashboard (`AdminSuite.root_dashboard`)
+
+The engine root (`/`, relative to the mount path) renders a default dashboard (portal cards + basic stats).
+
+To customize it, create a dashboard definition file (loaded from `AdminSuite.config.dashboard_globs`, which defaults to paths like `config/admin_suite/dashboard.rb` and `app/admin_suite/dashboard.rb`):
+
+```ruby
+# config/admin_suite/dashboard.rb
+AdminSuite.configure do |config|
+  config.root_dashboard_title = "Developer Portal"
+  config.root_dashboard_description = "Internal tools for managing application resources."
+end
+
+AdminSuite.root_dashboard do
+  row do
+    cards_panel "Portals",
+      span: 12,
+      variant: :portals,
+      resources: ->(view) do
+        view.navigation_items
+          .sort_by { |(_k, meta)| (meta[:order] || 100).to_i }
+          .map do |portal_key, portal|
+            {
+              key: portal_key,
+              label: portal[:label] || portal_key.to_s.humanize,
+              description: portal[:description],
+              color: view.portal_color(portal_key),
+              icon: portal[:icon],
+              path: view.portal_path(portal: portal_key),
+              count: (portal[:sections] || {}).values.sum { |s| Array(s[:items]).size }
+            }
+          end
+      end
+  end
+
+  row do
+    stat_panel "Portals", ->(view) { view.navigation_items.keys.count }, span: 6, variant: :mini, color: :slate
+    stat_panel "Resources", -> { Admin::Base::Resource.registered_resources.count }, span: 6, variant: :mini, color: :slate
+  end
+end
+```
+

data/lib/admin_suite/configuration.rb

@@ -6,9 +6,13 @@ module AdminSuite
     attr_accessor :authenticate,
       :current_actor,
       :authorize,
+      :logout_path,
+      :logout_method,
+      :logout_label,
       :resource_globs,
       :action_globs,
       :portal_globs,
+      :dashboard_globs,
       :portals,
       :custom_renderers,
       :icon_renderer,
@@ -18,6 +22,10 @@ module AdminSuite
       :theme,
       :host_stylesheet,
       :tailwind_cdn,
+      :root_dashboard_title,
+      :root_dashboard_description,
+      :root_dashboard_definition,
+      :root_dashboard_loaded,
       :on_action_executed,
       :resolve_action_handler
 
@@ -25,9 +33,13 @@ module AdminSuite
       @authenticate = nil
       @current_actor = nil
       @authorize = nil
+      @logout_path = nil
+      @logout_method = :delete
+      @logout_label = "Log out"
       @resource_globs = []
       @action_globs = []
       @portal_globs = []
+      @dashboard_globs = []
       @portals = {}
       @custom_renderers = {}
       @icon_renderer = nil
@@ -37,6 +49,10 @@ module AdminSuite
       @theme = { primary: :indigo, secondary: :purple }
       @host_stylesheet = nil
       @tailwind_cdn = true
+      @root_dashboard_title = nil
+      @root_dashboard_description = nil
+      @root_dashboard_definition = nil
+      @root_dashboard_loaded = false
       @on_action_executed = nil
       @resolve_action_handler = nil
     end