ruby_cms 0.2.1.1 → 1.0.0

data/{app/views/layouts/ruby_cms → lib/generators/ruby_cms/templates/views/layouts/admin}/_admin_sidebar.html.erb

@@ -1,20 +1,19 @@
 <%# Admin Sidebar Navigation %>
-<aside class="flex h-full min-h-0 w-56 max-w-56 shrink-0 flex-col overflow-hidden bg-[#FAF9F5]" aria-label="Admin" data-ruby-cms--mobile-menu-target="sidebar">
-  <div class="pl-3 pr-4 py-5 flex-shrink-0 bg-[#FAF9F5]">
-    <div class="flex items-center gap-3" data-ruby-cms--mobile-menu-target="sidebarContent">
-      <% if respond_to?(:image_tag, true) %>
-        <div class="w-9 h-9 flex-shrink-0 rounded-md bg-white border border-gray-200 overflow-hidden">
-          <%= image_tag "ruby_cms/logo.png",
-                        alt: "RubyCMS logo",
-                        class: "w-full h-full object-contain",
-                        onerror: "this.style.display='none'; this.parentElement.classList.add('bg-gray-900','text-white','font-bold','text-xs','flex','items-center','justify-center'); this.parentElement.innerHTML='R';" %>
-        </div>
-      <% end %>
-      <p class="text-base font-semibold text-gray-900 m-0">RubyCMS</p>
+<%# Mobile: off-canvas sheet. Desktop (lg+): regular in-flow sidebar. %>
+<aside class="fixed inset-y-0 left-0 z-[45] flex h-full min-h-0 w-56 max-w-[90vw] shrink-0 -translate-x-full flex-col overflow-hidden bg-[#FAF9F5] shadow-xl transition-[width,max-width,transform] duration-200 ease-out lg:static lg:inset-auto lg:z-auto lg:max-w-56 lg:translate-x-0 lg:shadow-none" aria-label="Admin" data-controller="admin--sidebar-nav-persist admin--sidebar-collapse" data-admin--mobile-menu-target="sidebar">
+  <div class="pl-3 pr-2 py-5 flex-shrink-0 bg-[#FAF9F5]">
+    <div class="flex items-center gap-2" data-admin--mobile-menu-target="sidebarContent" data-sidebar-collapse-center>
+      <div class="w-9 h-9 flex-shrink-0 rounded-md bg-white border border-[#e9e4d4] overflow-hidden grid place-items-center">
+        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
+          <path d="M5 11l7-7 7 7-7 9-7-9z" fill="#dc2626" />
+          <path d="M5 11h14M9 4l3 7 3-7M5 11l7 9 7-9M12 11l-3 9M12 11l3 9" stroke="#fff" stroke-width="1" stroke-linejoin="round" fill="none" />
+        </svg>
+      </div>
+      <p class="text-base font-semibold text-[#1c1917] m-0 flex-1 truncate" data-sidebar-collapse-hide>RubyCMS</p>
     </div>
   </div>
 
-  <nav class="flex-1 min-w-0 pl-2 pr-2.5 py-5 overflow-y-auto overflow-x-hidden" aria-label="Admin" data-ruby-cms--mobile-menu-target="sidebarContent">
+  <nav class="flex-1 min-w-0 pl-2 pr-2.5 py-5 overflow-y-auto overflow-x-hidden" aria-label="Admin" data-admin--mobile-menu-target="sidebarContent">
     <% main_rows = ruby_cms_nav_sidebar_rows(section: :main) %>
     <% bottom_rows = ruby_cms_nav_sidebar_rows(section: :settings) %>
     <%# Main nav: top, scrollable %>
@@ -27,13 +26,13 @@
             <% next if path.blank? %>
             <% path_str = path.respond_to?(:to_str) ? path.to_str : path.to_s %>
             <% active = (path_str == "/admin" || path_str == "/admin/") ? request.path.match?(%r{\A/admin/?\z}) : request.path.start_with?(path_str) %>
-            <%= link_to path, class: "flex min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md mb-0.5 no-underline transition-colors #{ active ? 'text-blue-600 font-semibold' : 'text-gray-600 hover:bg-blue-500 hover:text-white' }" do %>
+            <%= link_to path, class: "flex min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md mb-0.5 no-underline transition-colors #{ active ? 'text-blue-600 font-semibold' : 'text-gray-600 hover:bg-blue-500 hover:text-white' }", data: { sidebar_collapse_center: true } do %>
               <% if e[:icon].present? %>
                 <svg class="w-4 h-4 flex-shrink-0 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <%= ruby_cms_safe_svg_fragment(e[:icon]) %>
                 </svg>
               <% end %>
-              <span class="min-w-0 flex-1 truncate"><%= e[:label] %></span>
+              <span class="min-w-0 flex-1 truncate" data-sidebar-collapse-hide><%= e[:label] %></span>
             <% end %>
           <% rescue => ex %>
             <% Rails.logger.error "RubyCMS nav error for #{e[:key]}: #{ex.message}" if defined?(Rails.logger) %>
@@ -43,18 +42,18 @@
           <% children = row[:children] || [] %>
           <% g_icon = g[:icon] %>
           <% details_open = g.fetch(:default_open, true) %>
-          <details class="mb-0.5" <%= "open" if details_open %>>
-            <summary class="flex min-w-0 items-center justify-between gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md text-gray-600 cursor-pointer select-none hover:bg-blue-500 hover:text-white list-none [&::-webkit-details-marker]:hidden">
-              <span class="flex min-w-0 flex-1 items-center gap-2">
+          <details class="mb-0.5" <%= "open" if details_open %> data-admin--sidebar-nav-persist-target="group" data-group-key="<%= g[:key] %>">
+            <summary class="flex min-w-0 items-center justify-between gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md text-gray-600 cursor-pointer select-none hover:bg-blue-500 hover:text-white list-none [&::-webkit-details-marker]:hidden" data-sidebar-collapse-center>
+              <span class="flex min-w-0 flex-1 items-center gap-2" data-sidebar-collapse-center>
                 <% if g_icon.present? %>
                   <svg class="w-4 h-4 flex-shrink-0 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <%= ruby_cms_safe_svg_fragment(g_icon) %>
                   </svg>
                 <% end %>
-                <span class="truncate"><%= g[:label] %></span>
+                <span class="truncate" data-sidebar-collapse-hide><%= g[:label] %></span>
               </span>
-              <svg class="w-3.5 h-3.5 flex-shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+              <svg class="w-3.5 h-3.5 flex-shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-sidebar-collapse-hide>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
               </svg>
             </summary>
             <div class="mt-0.5 space-y-0.5 ml-2 pl-2 py-1">
@@ -70,7 +69,7 @@
                           <%= ruby_cms_safe_svg_fragment(g_icon) %>
                         </svg>
                       <% end %>
-                      <span class="min-w-0 flex-1 truncate"><%= g[:label] %></span>
+                      <span class="min-w-0 flex-1 truncate" data-sidebar-collapse-hide><%= g[:label] %></span>
                     <% end %>
                   <% end %>
                 <% rescue => ex %>
@@ -89,7 +88,7 @@
                         <%= ruby_cms_safe_svg_fragment(e[:icon]) %>
                       </svg>
                     <% end %>
-                    <span class="min-w-0 flex-1 truncate"><%= e[:label] %></span>
+                    <span class="min-w-0 flex-1 truncate" data-sidebar-collapse-hide><%= e[:label] %></span>
                   <% end %>
                 <% rescue => ex %>
                   <% Rails.logger.error "RubyCMS nav group child #{e[:key]}: #{ex.message}" if defined?(Rails.logger) %>
@@ -104,8 +103,8 @@
     <%# Spacer so bottom section sits above footer %>
     <div class="flex-shrink-0 pt-4 mt-4">
       <% if bottom_rows.any? %>
-        <div class="px-1.5 pb-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500">
-          <%= t("ruby_cms.nav.settings", default: "Settings") %>
+        <div class="px-1.5 pb-1.5 text-xs font-semibold uppercase tracking-wide text-gray-500" data-sidebar-collapse-hide>
+          <%= t("nav.settings", default: "Settings") %>
         </div>
         <div class="space-y-1">
           <% bottom_rows.each do |row| %>
@@ -116,13 +115,13 @@
                 <% next if path.blank? %>
                 <% path_str = path.respond_to?(:to_str) ? path.to_str : path.to_s %>
                 <% active = request.path.start_with?(path_str) %>
-                <%= link_to path, class: "flex min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md mb-0.5 no-underline transition-colors #{ active ? 'text-blue-600 font-semibold' : 'text-gray-600 hover:bg-blue-500 hover:text-white' }" do %>
+                <%= link_to path, class: "flex min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md mb-0.5 no-underline transition-colors #{ active ? 'text-blue-600 font-semibold' : 'text-gray-600 hover:bg-blue-500 hover:text-white' }", data: { sidebar_collapse_center: true } do %>
                   <% if e[:icon].present? %>
                     <svg class="w-4 h-4 flex-shrink-0 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <%= ruby_cms_safe_svg_fragment(e[:icon]) %>
                     </svg>
                   <% end %>
-                  <span class="min-w-0 flex-1 truncate"><%= e[:label] %></span>
+                  <span class="min-w-0 flex-1 truncate" data-sidebar-collapse-hide><%= e[:label] %></span>
                 <% end %>
               <% rescue => ex %>
                 <% Rails.logger.error "RubyCMS nav error for #{e[:key]}: #{ex.message}" if defined?(Rails.logger) %>
@@ -132,18 +131,18 @@
               <% children = row[:children] || [] %>
               <% g_icon = g[:icon] %>
               <% details_open = g.fetch(:default_open, true) %>
-              <details class="mb-0.5" <%= "open" if details_open %>>
-                <summary class="flex min-w-0 items-center justify-between gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md text-gray-600 cursor-pointer select-none hover:bg-blue-500 hover:text-white list-none [&::-webkit-details-marker]:hidden">
-                  <span class="flex min-w-0 flex-1 items-center gap-2">
+              <details class="mb-0.5" <%= "open" if details_open %> data-admin--sidebar-nav-persist-target="group" data-group-key="<%= g[:key] %>">
+                <summary class="flex min-w-0 items-center justify-between gap-2 px-2 py-2 text-xs font-medium leading-5 rounded-md text-gray-600 cursor-pointer select-none hover:bg-blue-500 hover:text-white list-none [&::-webkit-details-marker]:hidden" data-sidebar-collapse-center>
+                  <span class="flex min-w-0 flex-1 items-center gap-2" data-sidebar-collapse-center>
                     <% if g_icon.present? %>
                       <svg class="w-4 h-4 flex-shrink-0 text-current" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <%= ruby_cms_safe_svg_fragment(g_icon) %>
                       </svg>
                     <% end %>
-                    <span class="truncate"><%= g[:label] %></span>
+                    <span class="truncate" data-sidebar-collapse-hide><%= g[:label] %></span>
                   </span>
-                  <svg class="w-3.5 h-3.5 flex-shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                  <svg class="w-3.5 h-3.5 flex-shrink-0 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-sidebar-collapse-hide>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                   </svg>
                 </summary>
                 <div class="mt-0.5 space-y-0.5 ml-2 pl-2 py-1">
@@ -159,7 +158,7 @@
                               <%= ruby_cms_safe_svg_fragment(g_icon) %>
                             </svg>
                           <% end %>
-                          <span class="min-w-0 flex-1 truncate"><%= g[:label] %></span>
+                          <span class="min-w-0 flex-1 truncate" data-sidebar-collapse-hide><%= g[:label] %></span>
                         <% end %>
                       <% end %>
                     <% rescue => ex %>
@@ -178,7 +177,7 @@
                             <%= ruby_cms_safe_svg_fragment(e[:icon]) %>
                           </svg>
                         <% end %>
-                        <span class="min-w-0 flex-1 truncate"><%= e[:label] %></span>
+                        <span class="min-w-0 flex-1 truncate" data-sidebar-collapse-hide><%= e[:label] %></span>
                       <% end %>
                     <% rescue => ex %>
                       <% Rails.logger.error "RubyCMS nav group child #{e[:key]}: #{ex.message}" if defined?(Rails.logger) %>
@@ -193,26 +192,26 @@
     </div>
   </nav>
 
-  <div class="min-w-0 shrink-0 bg-[#FAF9F5] py-2.5 pl-2 pr-2.5" data-ruby-cms--mobile-menu-target="sidebarContent">
+  <div class="min-w-0 shrink-0 bg-[#FAF9F5] py-2.5 pl-2 pr-2.5" data-admin--mobile-menu-target="sidebarContent">
     <div class="mb-2">
-      <%= form_with url: ruby_cms_admin_locale_path, method: :patch, scope: nil, data: { turbo: false } do |form| %>
+      <%= form_with url: admin_locale_path, method: :patch, scope: nil, data: { turbo: false } do |form| %>
         <div class="relative">
-          <div class="flex w-full min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 text-gray-600 rounded-md no-underline transition-colors hover:bg-blue-500 hover:text-white">
+          <div class="flex w-full min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 text-gray-600 rounded-md no-underline transition-colors hover:bg-blue-500 hover:text-white" data-sidebar-collapse-center>
             <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 100-18 9 9 0 000 18zM3.6 9h16.8M3.6 15h16.8M11 3c-2.2 2.2-3.5 5.2-3.5 9s1.3 6.8 3.5 9m2 0c2.2-2.2 3.5-5.2 3.5-9S15.2 5.2 13 3"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 100-18 9 9 0 000 18zM3.6 9h16.8M3.6 15h16.8M11 3c-2.2 2.2-3.5 5.2-3.5 9s1.3 6.8 3.5 9m2 0c2.2-2.2 3.5-5.2 3.5-9S15.2 5.2 13 3" />
             </svg>
-            <span class="min-w-0 flex-1 truncate text-left"><%= ruby_cms_locale_display_name(I18n.locale) %></span>
-            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10l4-4 4 4M16 14l-4 4-4-4"/>
+            <span class="min-w-0 flex-1 truncate text-left" data-sidebar-collapse-hide><%= ruby_cms_locale_display_name(I18n.locale) %></span>
+            <svg class="w-3.5 h-3.5 flex-shrink-0 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-sidebar-collapse-hide>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10l4-4 4 4M16 14l-4 4-4-4" />
             </svg>
           </div>
 
           <%= form.select :locale,
-              options_for_select(I18n.available_locales.map { |loc| [ruby_cms_locale_display_name(loc), loc.to_s] }, I18n.locale.to_s),
+              options_for_select(I18n.available_locales.map { |loc| [ ruby_cms_locale_display_name(loc), loc.to_s ] }, I18n.locale.to_s),
               {},
               {
                 class: "absolute inset-0 w-full h-full opacity-0 cursor-pointer",
-                aria: { label: t("ruby_cms.nav.locale", default: "Locale") },
+                aria: { label: t("nav.locale", default: "Locale") },
                 onchange: "this.form.submit()"
               } %>
         </div>
@@ -220,20 +219,20 @@
     </div>
 
     <% if respond_to?(:main_app, true) && main_app.respond_to?(:root_path) %>
-      <%= link_to main_app.root_path, target: "_blank", class: "flex w-full min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 text-gray-600 rounded-md no-underline transition-colors hover:bg-blue-500 hover:text-white" do %>
+      <%= link_to main_app.root_path, target: "_blank", class: "flex w-full min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 text-gray-600 rounded-md no-underline transition-colors hover:bg-blue-500 hover:text-white", data: { sidebar_collapse_center: true } do %>
         <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
         </svg>
-        <span class="min-w-0 flex-1 truncate text-left"><%= t("ruby_cms.nav.view_site", default: "View site") %></span>
+        <span class="min-w-0 flex-1 truncate text-left" data-sidebar-collapse-hide><%= t("nav.view_site", default: "View site") %></span>
       <% end %>
     <% end %>
 
     <% if respond_to?(:main_app, true) && main_app.respond_to?(:session_path) %>
-      <%= button_to main_app.session_path, method: :delete, class: "flex w-full min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 text-gray-600 rounded-md border-0 bg-transparent cursor-pointer transition-colors hover:bg-blue-500 hover:text-white", data: { turbo_confirm: t("ruby_cms.nav.logout_confirm", default: "Are you sure you want to logout?") } do %>
+      <%= button_to main_app.session_path, method: :delete, class: "flex w-full min-w-0 items-center gap-2 px-2 py-2 text-xs font-medium leading-5 text-gray-600 rounded-md border-0 bg-transparent cursor-pointer transition-colors hover:bg-blue-500 hover:text-white", data: { turbo_confirm: t("nav.logout_confirm", default: "Are you sure you want to logout?"), sidebar_collapse_center: true } do %>
         <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
         </svg>
-        <span class="min-w-0 flex-1 truncate text-left"><%= t("ruby_cms.nav.logout", default: "Logout") %></span>
+        <span class="min-w-0 flex-1 truncate text-left" data-sidebar-collapse-hide><%= t("nav.logout", default: "Logout") %></span>
       <% end %>
     <% end %>
   </div>

data/lib/generators/ruby_cms/templates/views/layouts/admin/_command_palette.html.erb

@@ -0,0 +1,65 @@
+<%# Command palette (⌘K). Hidden until opened.
+    Entries built from the sidebar nav rows (groups + resolved children), filtered client-side. %>
+<%
+  resolve_path = ->(p) { p.respond_to?(:call) ? (p.call(self) rescue nil) : p }
+  palette_entries = []
+
+  %i[main settings].each do |section|
+    ruby_cms_nav_sidebar_rows(section: section).each do |row|
+      if row[:type] == :link
+        e = row[:entry] || {}
+        path = resolve_path.call(e[:path])
+        palette_entries << { id: "nav:#{e[:key]}", label: e[:label], url: path.to_s, group: "Navigatie" } if path.present?
+      else
+        g = row[:group] || {}
+        gpath = resolve_path.call(g[:path])
+        palette_entries << { id: "nav:#{g[:key]}", label: g[:label], url: gpath.to_s, group: "Navigatie" } if gpath.present?
+        (row[:children] || []).each do |c|
+          cpath = resolve_path.call(c[:path])
+          palette_entries << { id: "nav:#{c[:key]}", label: c[:label], url: cpath.to_s, group: g[:label] } if cpath.present?
+        end
+      end
+    end
+  end
+
+  # Visual-editor action commands (dispatched as ve:command, handled by the editor controller).
+  if controller_path.to_s == "admin/visual_editor"
+    palette_entries += [
+      { id: "ve:panel",  label: t("ruby_cms.admin.ve.cmd_blocks", default: "Blokken tonen"),            command: "panel",  group: "Visual editor" },
+      { id: "ve:locale", label: t("ruby_cms.admin.ve.cmd_locale", default: "Wissel preview-taal"),       command: "locale", group: "Visual editor" },
+      { id: "ve:theme",  label: t("ruby_cms.admin.ve.cmd_theme",  default: "Donkere preview aan/uit"),   command: "theme",  group: "Visual editor" }
+    ]
+  end
+%>
+<div>
+  <template data-admin--command-palette-target="entriesJson"><%= palette_entries.to_json %></template>
+  <div data-admin--command-palette-target="backdrop"
+       data-action="click->admin--command-palette#close"
+       hidden
+       class="fixed inset-0 z-[60] bg-black/40 backdrop-blur-sm flex items-start justify-center pt-[12vh] px-4">
+    <div data-action="click->admin--command-palette#stop"
+         role="dialog" aria-modal="true" aria-label="Command palette"
+         class="w-full max-w-2xl bg-white rounded-xl border border-[#e9e4d4] shadow-2xl overflow-hidden flex flex-col max-h-[70vh]">
+
+      <div class="flex items-center gap-2.5 px-4 py-3 border-b border-[#e9e4d4]">
+        <svg class="w-4 h-4 text-[#a8a29e] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z" /></svg>
+        <input type="text"
+               data-admin--command-palette-target="input"
+               data-action="input->admin--command-palette#filter keydown->admin--command-palette#onInputKey"
+               placeholder="<%= t("ruby_cms.admin.command_palette.placeholder", default: "Zoek pagina's, gebruikers of acties…") %>"
+               class="flex-1 bg-transparent border-0 outline-none text-[14px] text-[#1c1917] placeholder:text-[#a8a29e]"
+               spellcheck="false" autocomplete="off">
+        <kbd class="inline-flex items-center justify-center h-5 px-1.5 rounded border border-[#e9e4d4] bg-[#faf8f3] text-[10.5px] font-mono text-[#78716c]">esc</kbd>
+      </div>
+
+      <div data-admin--command-palette-target="list" class="flex-1 overflow-y-auto py-2"></div>
+
+      <div class="flex items-center gap-4 px-4 py-2 border-t border-[#e9e4d4] bg-[#faf8f3] text-[11px] text-[#78716c]">
+        <span class="inline-flex items-center gap-1"><kbd class="inline-flex items-center justify-center h-4 px-1 rounded border border-[#e9e4d4] bg-white text-[10px] font-mono">↑↓</kbd> <%= t("ruby_cms.admin.command_palette.navigate", default: "navigeren") %></span>
+        <span class="inline-flex items-center gap-1"><kbd class="inline-flex items-center justify-center h-4 px-1 rounded border border-[#e9e4d4] bg-white text-[10px] font-mono">↵</kbd> <%= t("ruby_cms.admin.command_palette.pick", default: "kies") %></span>
+        <span class="inline-flex items-center gap-1"><kbd class="inline-flex items-center justify-center h-4 px-1 rounded border border-[#e9e4d4] bg-white text-[10px] font-mono">esc</kbd> <%= t("ruby_cms.admin.command_palette.close", default: "sluiten") %></span>
+        <span class="ml-auto" data-admin--command-palette-target="count"></span>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/ruby_cms/templates/views/layouts/admin/_shortcuts_overlay.html.erb

@@ -0,0 +1,81 @@
+<%# Keyboard shortcuts dialog. Opens on `?` or via topbar button. %>
+<%
+  groups = [
+    { label: t("ruby_cms.admin.shortcuts.general", default: "Algemeen"), items: [
+      { keys: %w[Mod K], label: t("ruby_cms.admin.shortcuts.open_palette", default: "Open commando palette") },
+      { keys: %w[?],     label: t("ruby_cms.admin.shortcuts.show_this", default: "Toon dit overzicht") },
+      { keys: %w[Esc],   label: t("ruby_cms.admin.shortcuts.close", default: "Sluit dialoog / palette") }
+    ] },
+    { label: t("ruby_cms.admin.shortcuts.navigation", default: "Navigatie"), items: [
+      { keys: %w[g d], label: t("ruby_cms.admin.shortcuts.go_dashboard", default: "Ga naar Dashboard") },
+      { keys: %w[g v], label: t("ruby_cms.admin.shortcuts.go_visual_editor", default: "Ga naar Visual editor") },
+      { keys: %w[g c], label: t("ruby_cms.admin.shortcuts.go_content", default: "Ga naar Content blocks") },
+      { keys: %w[g m], label: t("ruby_cms.admin.shortcuts.go_messages", default: "Ga naar Contact messages") },
+      { keys: %w[g a], label: t("ruby_cms.admin.shortcuts.go_analytics", default: "Ga naar Analytics") },
+      { keys: %w[g s], label: t("ruby_cms.admin.shortcuts.go_settings", default: "Ga naar Settings") },
+      { keys: %w[g u], label: t("ruby_cms.admin.shortcuts.go_users", default: "Ga naar Users") }
+    ] },
+    { label: t("ruby_cms.admin.shortcuts.tables", default: "Tabellen"), items: [
+      { keys: %w[/],     label: t("ruby_cms.admin.shortcuts.focus_search", default: "Focus tabel-zoek") },
+      { keys: %w[Enter], label: t("ruby_cms.admin.shortcuts.open_row", default: "Open rij detail") }
+    ] }
+  ]
+
+  if controller_path.to_s == "admin/visual_editor"
+    groups << { label: t("ruby_cms.admin.shortcuts.visual_editor", default: "Visual editor"), items: [
+      { keys: %w[b], label: t("ruby_cms.admin.shortcuts.ve_blocks",  default: "Blokken & instellingen") },
+      { keys: %w[l], label: t("ruby_cms.admin.shortcuts.ve_locale",  default: "Wissel preview-taal") },
+      { keys: %w[t], label: t("ruby_cms.admin.shortcuts.ve_theme",   default: "Donkere preview aan/uit") }
+    ] }
+  end
+%>
+<div>
+  <div data-admin--shortcuts-overlay-target="backdrop"
+       data-action="click->admin--shortcuts-overlay#close"
+       hidden
+       class="fixed inset-0 z-[60] bg-black/40 backdrop-blur-sm flex items-center justify-center p-4">
+    <div data-action="click->admin--shortcuts-overlay#stop"
+         role="dialog" aria-modal="true" aria-label="Keyboard shortcuts"
+         class="w-full max-w-2xl bg-white rounded-xl border border-[#e9e4d4] shadow-2xl overflow-hidden max-h-[80vh] flex flex-col">
+
+      <div class="flex items-center justify-between gap-3 px-5 py-3.5 border-b border-[#e9e4d4]">
+        <div class="flex items-center gap-2.5">
+          <span class="inline-flex w-8 h-8 rounded-md bg-blue-50 text-blue-700 items-center justify-center">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M6 14h.01M10 14h.01M18 14h.01M14 14h.01M8 18h8" /></svg>
+          </span>
+          <div>
+            <h2 class="text-[14.5px] font-semibold text-[#1c1917] m-0"><%= t("ruby_cms.admin.shortcuts.title", default: "Toetsenbord shortcuts") %></h2>
+            <p class="text-[11.5px] text-[#78716c] mt-0.5 mb-0"><%= t("ruby_cms.admin.shortcuts.subtitle", default: "Werk sneller — alles op het toetsenbord.") %></p>
+          </div>
+        </div>
+        <button type="button" data-action="click->admin--shortcuts-overlay#close"
+                aria-label="Sluit"
+                class="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#78716c] hover:bg-[#faf8f3] hover:text-[#1c1917]">
+          <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="M6 18L18 6M6 6l12 12" /></svg>
+        </button>
+      </div>
+
+      <div class="overflow-y-auto p-5 grid grid-cols-1 md:grid-cols-2 gap-5">
+        <% groups.each do |g| %>
+          <div>
+            <div class="text-[11px] font-semibold uppercase tracking-wider text-[#a8a29e] mb-2"><%= g[:label] %></div>
+            <div class="space-y-1">
+              <% g[:items].each do |it| %>
+                <div class="flex items-center justify-between gap-3 py-1.5 border-b border-[#f5efde] last:border-b-0">
+                  <span class="text-[13px] text-[#1c1917]"><%= it[:label] %></span>
+                  <span class="inline-flex items-center gap-1">
+                    <% it[:keys].each_with_index do |key, i| %>
+                      <% if i.positive? %><span class="text-[10px] text-[#a8a29e]">+</span><% end %>
+                      <kbd class="inline-flex items-center justify-center min-w-[22px] h-5 px-1.5 rounded border border-[#e9e4d4] bg-[#faf8f3] text-[10.5px] font-mono text-[#57534e]"
+                           <% if key == "Mod" %> data-admin--shortcuts-overlay-target="modKey"<% end %>><%= key == "Mod" ? "⌘" : key %></kbd>
+                    <% end %>
+                  </span>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/ruby_cms/templates/views/layouts/admin/_topbar_widgets.html.erb

@@ -0,0 +1,9 @@
+<%# Topbar widgets root — search trigger, bell, profile menu.
+    (Shortcuts live inside the profile menu + `?` key, so no separate button.) %>
+<div class="flex items-center gap-1.5"
+     data-controller="admin--topbar"
+     data-action="keydown@window->admin--topbar#onKey click@window->admin--topbar#onOutsideClick">
+  <%= render "layouts/admin/topbar/search_trigger" %>
+  <%= render "layouts/admin/topbar/bell" %>
+  <%= render "layouts/admin/topbar/profile_menu" %>
+</div>

data/lib/generators/ruby_cms/templates/views/layouts/admin/minimal.html.erb

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= RubyCms::Settings.get(:visual_editor_preview_title, default: "Page Preview") %></title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <link rel="icon" href="/icon.png" type="image/png">
+  <link rel="icon" href="/icon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/icon.png">
+
+  <%# Host-configurable preview head — set under Settings → Visual editor so the
+      preview iframe matches your public site (fonts, stylesheets, title).
+      Sanitized to safe <head> tags only (no <script>) even though it's admin-set. %>
+  <%= sanitize RubyCms::Settings.get(:visual_editor_preview_head, default: ""),
+        tags: %w[link meta style],
+        attributes: %w[rel href as type media sizes crossorigin integrity referrerpolicy name content charset] %>
+
+  <% RubyCms::Settings.get(:visual_editor_preview_stylesheets, default: "tailwind,application,actiontext").to_s.split(",").map(&:strip).reject(&:blank?).each do |sheet| %>
+    <%= stylesheet_link_tag sheet, "data-turbo-track": "reload" %>
+  <% end %>
+  <%= javascript_importmap_tags %>
+
+  <style>
+    .content-block.editing,
+    .ruby_cms-content-block.editing {
+      outline: 2px solid #10b981;
+      outline-offset: 2px;
+      background-color: rgba(16, 185, 129, 0.1);
+      transition: all 0.2s ease-in-out;
+    }
+
+    <% if @edit_mode %>
+    .content-block:hover,
+    .ruby_cms-content-block:hover {
+      outline: 2px dashed #3b82f6;
+      outline-offset: 2px;
+      cursor: pointer;
+    }
+    /* Untranslated in the current locale (showing a fallback) */
+    [data-cb-missing] {
+      outline: 1.5px dashed #d97706;
+      outline-offset: 2px;
+      background-color: rgba(217, 119, 6, 0.07);
+    }
+    <% end %>
+
+    /* Pulse when a block is opened for editing */
+    .content-block.cb-pulse,
+    .ruby_cms-content-block.cb-pulse { animation: cb-pulse 0.9s ease-out; }
+    @keyframes cb-pulse {
+      0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
+      100% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
+    }
+  </style>
+</head>
+
+<body class="font-sans antialiased">
+  <div
+    class="ruby_cms-preview-page<%= " ruby_cms-preview-page--edit-mode" if @edit_mode %>"
+    data-controller="admin--page-preview"
+    data-admin--page-preview-edit-mode-value="<%= @edit_mode %>">
+
+    <main>
+      <%= yield %>
+    </main>
+  </div>
+</body>
+</html>

data/lib/generators/ruby_cms/templates/views/layouts/admin/topbar/_bell.html.erb

@@ -0,0 +1,81 @@
+<%# Notifications bell + popover. Pulls from admin_notifications (helper). %>
+<%
+  notifs = admin_notifications
+  notif_count = notifs.size
+%>
+<div class="relative">
+  <button type="button"
+          data-action="click->admin--topbar#toggleBell"
+          data-admin--topbar-target="bellButton"
+          aria-label="Notifications"
+          class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-transparent text-[#78716c] hover:bg-[#faf8f3] hover:text-[#1c1917] transition-colors data-[active=true]:bg-[#faf8f3] data-[active=true]:text-[#1c1917] relative">
+    <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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+    <% if notif_count.positive? %>
+      <span class="absolute -top-0.5 -right-0.5 inline-flex items-center justify-center min-w-[16px] h-[16px] px-1 rounded-full bg-red-500 text-white text-[9.5px] font-semibold leading-none"><%= notif_count > 9 ? "9+" : notif_count %></span>
+    <% end %>
+  </button>
+  <div data-admin--topbar-target="bellPanel" hidden
+       class="absolute right-0 top-[calc(100%+6px)] w-[min(380px,calc(100vw-1.5rem))] max-w-[380px] rounded-lg border border-[#e9e4d4] bg-white shadow-lg z-50">
+    <div class="px-3 py-2.5 border-b border-[#e9e4d4] flex items-center justify-between gap-2">
+      <h3 class="text-[13px] font-semibold text-[#1c1917] m-0"><%= t("ruby_cms.admin.topbar.notifications", default: "Notificaties") %></h3>
+      <% if notif_count.positive? %>
+        <%= button_to mark_all_read_admin_notifications_path,
+            method: :post,
+            form: { data: { turbo_frame: "_top" } },
+            class: "text-[11.5px] text-[#57534e] hover:text-[#1c1917] bg-transparent border-0 p-0 m-0 cursor-pointer underline" do %>
+          <%= t("ruby_cms.admin.topbar.mark_all_read", default: "Markeer alles als gelezen") %>
+        <% end %>
+      <% else %>
+        <span class="text-[11.5px] text-[#a8a29e]"><%= t("ruby_cms.admin.topbar.no_notifications", default: "Geen ongelezen") %></span>
+      <% end %>
+    </div>
+    <% if notifs.any? %>
+      <div class="max-h-[360px] overflow-y-auto divide-y divide-[#f5efde]">
+        <% notifs.each do |n| %>
+          <%
+            icon_classes = case n[:kind]
+            when :message then "bg-blue-50 text-blue-700"
+            when :error   then "bg-red-50 text-red-700"
+            else               "bg-[#faf8f3] text-[#78716c]"
+            end
+            icon_path = case n[:kind]
+            when :message then "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+            when :error   then "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            else               "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+            end
+          %>
+          <% notif_id = n[:id].to_s.sub(/\Anoticed:/, "") %>
+          <%= button_to mark_read_admin_notification_path(notif_id, next: n[:url]),
+              method: :post,
+              form: { data: { turbo_frame: "_top" }, class: "block w-full" },
+              class: "flex items-start gap-2.5 px-3 py-2.5 hover:bg-[#faf8f3] bg-transparent border-0 cursor-pointer w-full text-left" do %>
+            <span class="inline-flex items-center justify-center w-7 h-7 rounded-full flex-shrink-0 <%= icon_classes %>">
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<%= icon_path %>" /></svg>
+            </span>
+            <div class="flex-1 min-w-0">
+              <div class="text-[12.5px] font-medium text-[#1c1917] truncate"><%= n[:title] %></div>
+              <% if n[:body].present? %>
+                <div class="text-[11.5px] text-[#78716c] truncate"><%= n[:body] %></div>
+              <% end %>
+              <div class="text-[10.5px] text-[#a8a29e] mt-0.5"><%= rel_time(n[:ts]) %></div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <div class="px-6 py-10 text-center">
+        <div class="inline-flex w-10 h-10 rounded-full bg-green-50 text-green-700 items-center justify-center mb-2">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        </div>
+        <div class="text-[13px] font-medium text-[#1c1917]"><%= t("ruby_cms.admin.topbar.all_caught_up", default: "Je bent helemaal bij.") %></div>
+        <div class="text-[11.5px] text-[#78716c] mt-0.5"><%= t("ruby_cms.admin.topbar.no_unread", default: "Geen ongelezen notificaties.") %></div>
+      </div>
+    <% end %>
+    <div class="px-3 py-2 border-t border-[#e9e4d4]">
+      <%= link_to admin_audit_log_entries_path, class: "inline-flex items-center gap-1.5 text-[12px] text-[#57534e] hover:text-[#1c1917] no-underline" do %>
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" /></svg>
+        <%= t("ruby_cms.admin.topbar.open_audit_log", default: "Open audit log") %>
+      <% end %>
+    </div>
+  </div>
+</div>