ruby_cms 0.2.1.1 → 1.0.1

data/lib/generators/ruby_cms/templates/views/admin/visual_editor/index.html.erb

@@ -0,0 +1,383 @@
+<%# Inline content-block editor — formatting classes mirror the public site (your public stylesheet).
+    Literal colors here because the admin page doesn't load your theme vars. %>
+<style>
+  .ruby_cms-cb-editor:empty::before { content: attr(data-placeholder); color: #a8a29e; }
+  .ruby_cms-cb-editor .cb-fg-cobalt { color: #2D5BFF; }
+  .ruby_cms-cb-editor .cb-fg-accent { color: #B14A2C; }
+  .ruby_cms-cb-editor .cb-fg-ok     { color: #4D6E2B; }
+  .ruby_cms-cb-editor .cb-fg-muted  { color: rgba(20,17,14,.62); }
+  .ruby_cms-cb-editor .cb-size-lg   { font-size: 1.5em; }
+  .ruby_cms-cb-editor .cb-size-xl   { font-size: 2.4em; line-height: 1.1; }
+
+  /* Active toolbar buttons */
+  .cb-tool.cb-active { background: #eef2ff; color: #2563eb; box-shadow: inset 0 0 0 1px #c7d2fe; }
+  .cb-tool[data-color].cb-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb; }
+
+  /* Active locale toggle */
+  .cb-locale.cb-active { background: #fff; color: #1c1917; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
+
+  /* Loading skeleton shimmer */
+  .cb-skeleton { background-image: linear-gradient(90deg, #efeae0 0%, #f7f3ea 50%, #efeae0 100%); background-size: 200% 100%; animation: cb-shimmer 1.2s ease-in-out infinite; }
+  @keyframes cb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+</style>
+
+<%= AdminPage(full_height: true) do %>
+  <%= AdminPageHeader(
+    title: "",
+    actions_left: true,
+    breadcrumbs: [
+      { label: t("admin.pages.common.admin", default: "Beheer"), url: admin_root_path },
+      { label: t("admin.navigation.visual_editor", default: "Visual editor") }
+    ]
+  ) do %>
+    <%= form_with url: admin_visual_editor_path, method: :get,
+                  class: "flex min-w-0",
+                  data: { turbo: false, controller: "admin--visual-editor-page-select" } do %>
+        <%= hidden_field_tag :edit_mode, @edit_mode %>
+        <%= hidden_field_tag :page, @current_page,
+              data: { "admin--visual-editor-page-select-target" => "pageInput" } %>
+        <%= hidden_field_tag :variant, @current_variant,
+              data: { "admin--visual-editor-page-select-target" => "variantInput" } %>
+
+        <% current_variants = @all_page_variants[@current_page.to_s] || [] %>
+        <% current_variant_obj = current_variants.find { |v| v[:value].to_s == @current_variant.to_s } %>
+        <% current_page_name = @available_pages.dig(@current_page, :name) || @current_page.to_s.humanize %>
+        <% trigger_label = current_variant_obj ? "#{current_page_name} / #{current_variant_obj[:label]}" : current_page_name %>
+        <% total_pages = @available_pages.size %>
+
+        <div class="relative">
+          <button type="button"
+                  title="<%= trigger_label %>"
+                  aria-label="<%= t("admin.navigation.visual_editor", default: "Visual editor") %> — pagina kiezen"
+                  class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-[#e9e4d4] bg-white text-[#57534e] hover:bg-[#faf8f3] transition-colors cursor-pointer"
+                  data-action="click->admin--visual-editor-page-select#toggle">
+            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+            <span class="sr-only" data-admin--visual-editor-page-select-target="triggerLabel"><%= trigger_label %></span>
+          </button>
+
+          <div class="hidden absolute z-[60] left-0 top-full mt-1 w-[340px] max-h-[70vh] flex flex-col rounded-xl border border-[#e9e4d4] bg-white shadow-[0_12px_32px_rgba(28,25,23,0.10)]"
+               data-admin--visual-editor-page-select-target="panel">
+            <%# Search bar %>
+            <div class="flex items-center gap-2 px-3 py-2.5 border-b border-[#e9e4d4]">
+              <svg class="w-3.5 h-3.5 text-[#a8a29e] 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"
+                     autocomplete="off"
+                     placeholder="Zoek pagina…"
+                     class="flex-1 bg-transparent border-0 outline-0 text-[13px] text-[#1c1917] placeholder:text-[#a8a29e] focus:outline-none"
+                     data-admin--visual-editor-page-select-target="searchInput"
+                     data-action="input->admin--visual-editor-page-select#search">
+              <kbd class="inline-flex items-center px-1.5 h-5 rounded border border-[#e9e4d4] bg-[#faf8f3] text-[10.5px] font-mono font-medium text-[#78716c]">↵</kbd>
+            </div>
+
+            <%# Page list %>
+            <div class="flex-1 overflow-y-auto p-1">
+              <div class="flex items-center justify-between px-2 py-1 text-[10.5px] font-semibold uppercase tracking-[0.06em] text-[#a8a29e]">
+                <span>Pagina's</span>
+                <span class="font-mono text-[10.5px] text-[#a8a29e]">(<span data-admin--visual-editor-page-select-target="pageCount"><%= total_pages %></span>)</span>
+              </div>
+              <% @available_pages.each do |key, page| %>
+                <% page_variants = @all_page_variants[key.to_s] || [] %>
+                <% is_current_page = key.to_s == @current_page.to_s %>
+                <% search_text = [ page[:name], key.to_s ].join(" ") %>
+                <% if page_variants.present? %>
+                  <div class="relative"
+                       data-admin--visual-editor-page-select-target="pageRow"
+                       data-search-text="<%= search_text %>"
+                       data-action="mouseenter->admin--visual-editor-page-select#showFlyout mouseleave->admin--visual-editor-page-select#hideFlyout">
+                    <button type="button"
+                            class="<%= is_current_page && !current_variant_obj ? "bg-blue-50 text-blue-700 font-medium" : "text-[#1c1917] hover:bg-[#faf8f3]" %> flex w-full items-center gap-2.5 px-2 py-1.5 rounded-md text-[13px] text-left transition-colors cursor-pointer"
+                            data-action="click->admin--visual-editor-page-select#selectPage"
+                            data-page="<%= key %>">
+                      <svg class="w-3.5 h-3.5 shrink-0 <%= is_current_page ? "text-blue-600" : "text-[#78716c]" %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                      </svg>
+                      <span class="flex-1 truncate"><%= page[:name] %></span>
+                      <span class="inline-flex items-center px-1.5 h-4 rounded-full border border-[#e9e4d4] bg-[#faf8f3] text-[10.5px] font-mono text-[#a8a29e]"><%= page_variants.size %></span>
+                      <svg class="w-3 h-3 text-[#a8a29e] shrink-0" 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>
+                    </button>
+                    <div class="hidden absolute right-full top-0 mr-1.5 w-[220px] max-h-[60vh] overflow-y-auto rounded-xl border border-[#e9e4d4] bg-white p-1 shadow-[0_12px_32px_rgba(28,25,23,0.10)] z-[61]"
+                         data-admin--visual-editor-page-select-target="flyout">
+                      <div class="px-2 py-1 text-[10.5px] font-semibold uppercase tracking-[0.06em] text-[#a8a29e]">Varianten</div>
+                      <% page_variants.each do |variant| %>
+                        <% is_selected_variant = is_current_page && variant[:value].to_s == @current_variant.to_s %>
+                        <button type="button"
+                                class="<%= is_selected_variant ? "bg-blue-50 text-blue-700 font-medium" : "text-[#1c1917] hover:bg-[#faf8f3]" %> flex w-full items-center gap-2 px-2 py-1.5 rounded-md text-[13px] text-left transition-colors cursor-pointer"
+                                data-action="click->admin--visual-editor-page-select#selectVariant"
+                                data-page="<%= key %>"
+                                data-variant="<%= variant[:value] %>">
+                          <svg class="w-3.5 h-3.5 shrink-0 <%= is_selected_variant ? "text-blue-600" : "text-[#78716c]" %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 11H5m14-7H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zM9 11v8m6-8v8" />
+                          </svg>
+                          <span class="flex-1 truncate"><%= variant[:label] %></span>
+                        </button>
+                      <% end %>
+                    </div>
+                  </div>
+                <% else %>
+                  <button type="button"
+                          class="<%= is_current_page ? "bg-blue-50 text-blue-700 font-medium" : "text-[#1c1917] hover:bg-[#faf8f3]" %> flex w-full items-center gap-2.5 px-2 py-1.5 rounded-md text-[13px] text-left transition-colors cursor-pointer"
+                          data-admin--visual-editor-page-select-target="pageRow"
+                          data-search-text="<%= search_text %>"
+                          data-action="click->admin--visual-editor-page-select#selectPage"
+                          data-page="<%= key %>">
+                    <svg class="w-3.5 h-3.5 shrink-0 <%= is_current_page ? "text-blue-600" : "text-[#78716c]" %>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                    </svg>
+                    <span class="flex-1 truncate"><%= page[:name] %></span>
+                  </button>
+                <% end %>
+              <% end %>
+              <div class="hidden px-3 py-5 text-center text-[12.5px] text-[#78716c]" data-admin--visual-editor-page-select-target="emptyState">
+                Geen pagina gevonden voor "<span data-empty-query></span>".
+              </div>
+            </div>
+
+            <%# Footer with kbd hints %>
+            <div class="flex items-center gap-3 px-3 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 px-1 h-4 rounded border border-[#e9e4d4] bg-white text-[10px] font-mono text-[#78716c]">↑↓</kbd> navigeren</span>
+              <span class="inline-flex items-center gap-1"><kbd class="inline-flex items-center px-1 h-4 rounded border border-[#e9e4d4] bg-white text-[10px] font-mono text-[#78716c]">↵</kbd> kies</span>
+              <span class="inline-flex items-center gap-1"><kbd class="inline-flex items-center px-1 h-4 rounded border border-[#e9e4d4] bg-white text-[10px] font-mono text-[#78716c]">esc</kbd> sluiten</span>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+      <%# Open the blocks / settings panel %>
+      <button type="button" data-ve-command="panel"
+              title="Blokken & instellingen (b)"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-[#e9e4d4] bg-white text-[#57534e] hover:bg-[#faf8f3] transition-colors cursor-pointer">
+        <svg class="w-4 h-4 text-[#78716c]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
+      </button>
+    <% end %>
+
+    <!-- Visual Editor -->
+    <div class="rounded-lg border-t border-[#e9e4d4] overflow-hidden flex flex-col flex-1 min-h-0"
+         data-controller="admin--visual-editor"
+         data-admin--visual-editor-current-page-value="<%= @current_page.to_s %>"
+         data-admin--visual-editor-locales-value="<%= I18n.available_locales.join(',') %>">
+
+      <!-- Preview iframe -->
+      <div class="relative flex-1 min-h-0 overflow-hidden">
+        <iframe
+          id="preview-frame"
+          class="w-full h-full border-0"
+          data-admin--visual-editor-target="previewFrame"
+          src="<%= admin_visual_editor_page_preview_path(page: @current_page, edit_mode: @edit_mode, variant: @current_variant) %>">
+        </iframe>
+
+        <%# Blocks + settings panel (slide-over) %>
+        <div class="hidden absolute inset-y-0 right-0 z-20 w-[320px] flex flex-col bg-white border-l border-[#e9e4d4] shadow-[-8px_0_24px_rgba(28,25,23,0.08)]"
+             data-admin--visual-editor-target="outlinePanel">
+          <div class="flex items-center justify-between px-4 py-3 border-b border-[#e9e4d4]">
+            <span class="text-[13px] font-semibold text-[#1c1917]">Blokken &amp; instellingen</span>
+            <button type="button" data-action="click->admin--visual-editor#togglePanel"
+                    class="inline-flex h-6 w-6 items-center justify-center rounded-md text-[#a8a29e] hover:bg-[#faf8f3] hover:text-[#57534e] transition-colors">
+              <svg class="h-4 w-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>
+
+          <%# Settings: language + dark toggle + translation coverage %>
+          <div class="flex items-center gap-2 px-3 py-2.5 border-b border-[#e9e4d4]">
+            <% if I18n.available_locales.size > 1 %>
+              <button type="button" data-ve-command="locale" title="Wissel preview-taal (l)"
+                      class="inline-flex items-center gap-1.5 h-7 px-2 rounded-md border border-[#e9e4d4] bg-[#faf8f3] text-[12px] font-semibold text-[#57534e] hover:bg-white transition-colors cursor-pointer">
+                <svg class="w-3.5 h-3.5 text-[#78716c]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M3 5h12M9 3v2m1.5 0c-.5 4-2.5 7-5.5 9m1-3c1 1.5 3 2.5 5 3M14 19l3-7 3 7m-5.4-2h4.8" /></svg>
+                <span data-ve-locale-label data-current="<%= I18n.locale %>"><%= I18n.locale.to_s.upcase %></span>
+              </button>
+            <% end %>
+            <button type="button" data-ve-command="theme" title="Donkere preview aan/uit (t)"
+                    class="inline-flex items-center justify-center w-7 h-7 rounded-md border border-[#e9e4d4] bg-[#faf8f3] text-[#57534e] hover:bg-white transition-colors cursor-pointer">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-ve-theme-icon><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" /></svg>
+              <span class="sr-only" data-ve-theme-label>Dark</span>
+            </button>
+            <div class="hidden ml-auto inline-flex items-center gap-1.5 text-[12px] font-medium text-[#57534e]"
+                 data-admin--visual-editor-target="statsBadge">
+              <span class="h-2 w-2 rounded-full" data-admin--visual-editor-target="statsDot"></span>
+              <span data-admin--visual-editor-target="statsText"></span>
+            </div>
+          </div>
+
+          <div class="px-3 py-2.5 border-b border-[#e9e4d4]">
+            <input type="text" placeholder="Zoek blokken op alle pagina's…"
+                   autocomplete="off"
+                   data-admin--visual-editor-target="searchInput"
+                   data-action="input->admin--visual-editor#searchBlocks"
+                   class="w-full h-8 rounded-md border border-[#e9e4d4] bg-[#faf8f3] px-2.5 text-[13px] text-[#1c1917] placeholder:text-[#a8a29e] focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
+          </div>
+          <div class="flex-1 overflow-y-auto p-2 space-y-0.5" data-admin--visual-editor-target="outlineList"></div>
+        </div>
+      </div>
+
+      <!-- Edit Modal (overlay) -->
+      <div class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
+           data-admin--visual-editor-target="modal">
+        <div class="absolute inset-0 bg-black/40" data-action="click->admin--visual-editor#closeModal"></div>
+        <div class="relative w-full bg-white rounded-xl shadow-2xl flex flex-col max-h-[90vh]"
+             style="max-width: 40rem;"
+             data-controller="admin--content-block-history"
+             data-admin--content-block-history-content-block-id-value=""
+             data-admin--visual-editor-target="historyScope">
+          <!-- Modal header -->
+          <div class="flex items-center justify-between gap-3 px-6 py-4 border-b border-[#e9e4d4]">
+            <div class="min-w-0">
+              <h2 class="text-[14px] font-semibold tracking-[-0.005em] text-[#1c1917]">Edit Content Block</h2>
+              <p class="text-[11.5px] text-[#a8a29e] mt-0.5 truncate font-mono" data-admin--visual-editor-target="blockKey"></p>
+            </div>
+            <div class="flex items-center gap-2 flex-shrink-0">
+              <%# Locale switcher — edit each language without leaving the modal %>
+              <% locales = I18n.available_locales.map(&:to_s) %>
+              <% if locales.size > 1 %>
+                <div class="inline-flex rounded-md border border-[#e9e4d4] bg-[#faf8f3] p-0.5" data-admin--visual-editor-target="localeSwitch">
+                  <% locales.each do |loc| %>
+                    <button type="button" data-locale="<%= loc %>"
+                            data-action="click->admin--visual-editor#switchLocale"
+                            class="cb-locale h-6 px-2 rounded text-[11px] font-semibold uppercase text-[#78716c] transition-colors"><%= loc %></button>
+                  <% end %>
+                </div>
+              <% end %>
+              <button
+                type="button"
+                class="inline-flex h-7 w-7 items-center justify-center rounded-md text-[#a8a29e] hover:bg-[#faf8f3] hover:text-[#57534e] transition-colors"
+                data-action="click->admin--visual-editor#closeModal">
+                <svg class="h-4 w-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>
+
+          <!-- Modal body -->
+          <form class="flex flex-col flex-1 min-h-0 overflow-hidden"
+                data-action="submit->admin--visual-editor#saveContent keydown->admin--visual-editor#handleKeydown">
+            <div class="flex-1 overflow-y-auto px-6 py-5" data-admin--visual-editor-target="modalBody">
+              <div class="flex items-center justify-between mb-2">
+                <label class="text-[13px] font-semibold text-[#1c1917]">Content</label>
+                <button type="button"
+                        data-admin--visual-editor-target="copyButton"
+                        data-action="click->admin--visual-editor#copyFromOther"
+                        class="hidden inline-flex items-center gap-1 text-[11.5px] font-medium text-[#2563eb] hover:text-blue-700 transition-colors">
+                  <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+                  <span data-admin--visual-editor-target="copyLabel">Kopieer</span>
+                </button>
+              </div>
+
+              <%# Inline formatting toolbar — bold / italic / color / size %>
+              <div class="flex items-center flex-wrap gap-1 mb-2 rounded-lg border border-[#e9e4d4] bg-[#faf8f3] px-1.5 py-1"
+                   data-action="mousedown->admin--visual-editor#preventBlur">
+                <button type="button" title="Vet (Cmd+B)" data-cmd="bold" data-action="click->admin--visual-editor#bold"
+                        class="cb-tool h-7 w-7 inline-flex items-center justify-center rounded-md text-[13px] font-bold text-[#57534e] hover:bg-white hover:shadow-sm transition-all">B</button>
+                <button type="button" title="Cursief (Cmd+I)" data-cmd="italic" data-action="click->admin--visual-editor#italic"
+                        class="cb-tool h-7 w-7 inline-flex items-center justify-center rounded-md text-[13px] italic font-serif text-[#57534e] hover:bg-white hover:shadow-sm transition-all">I</button>
+
+                <span class="mx-1 h-5 w-px bg-[#e9e4d4]"></span>
+
+                <%# Color swatches %>
+                <button type="button" title="Cobalt" data-action="click->admin--visual-editor#color" data-color="cb-fg-cobalt"
+                        class="cb-tool h-6 w-6 inline-flex items-center justify-center rounded-md hover:ring-2 hover:ring-offset-1 hover:ring-[#cdbfa6] transition-all"><span class="h-3.5 w-3.5 rounded-full" style="background:#2D5BFF"></span></button>
+                <button type="button" title="Terracotta" data-action="click->admin--visual-editor#color" data-color="cb-fg-accent"
+                        class="cb-tool h-6 w-6 inline-flex items-center justify-center rounded-md hover:ring-2 hover:ring-offset-1 hover:ring-[#cdbfa6] transition-all"><span class="h-3.5 w-3.5 rounded-full" style="background:#B14A2C"></span></button>
+                <button type="button" title="Groen" data-action="click->admin--visual-editor#color" data-color="cb-fg-ok"
+                        class="cb-tool h-6 w-6 inline-flex items-center justify-center rounded-md hover:ring-2 hover:ring-offset-1 hover:ring-[#cdbfa6] transition-all"><span class="h-3.5 w-3.5 rounded-full" style="background:#4D6E2B"></span></button>
+                <button type="button" title="Muted" data-action="click->admin--visual-editor#color" data-color="cb-fg-muted"
+                        class="cb-tool h-6 w-6 inline-flex items-center justify-center rounded-md hover:ring-2 hover:ring-offset-1 hover:ring-[#cdbfa6] transition-all"><span class="h-3.5 w-3.5 rounded-full" style="background:rgba(20,17,14,.45)"></span></button>
+                <button type="button" title="Standaardkleur" data-action="click->admin--visual-editor#color" data-color=""
+                        class="cb-tool h-6 w-6 inline-flex items-center justify-center rounded-md text-[#a8a29e] hover:bg-white hover:shadow-sm transition-all">
+                  <svg class="h-3.5 w-3.5" 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>
+
+                <span class="mx-1 h-5 w-px bg-[#e9e4d4]"></span>
+
+                <%# Size steps %>
+                <button type="button" title="Normaal" data-action="click->admin--visual-editor#size" data-size=""
+                        class="cb-tool h-7 px-2 inline-flex items-center justify-center rounded-md text-[12px] text-[#57534e] hover:bg-white hover:shadow-sm transition-all">A</button>
+                <button type="button" title="Groot" data-action="click->admin--visual-editor#size" data-size="cb-size-lg"
+                        class="cb-tool h-7 px-2 inline-flex items-center justify-center rounded-md text-[15px] text-[#57534e] hover:bg-white hover:shadow-sm transition-all">A</button>
+                <button type="button" title="Extra groot" data-action="click->admin--visual-editor#size" data-size="cb-size-xl"
+                        class="cb-tool h-7 px-2 inline-flex items-center justify-center rounded-md text-[18px] text-[#57534e] hover:bg-white hover:shadow-sm transition-all">A</button>
+              </div>
+
+              <%# Loading skeleton (shown while the block fetches) %>
+              <div class="hidden space-y-2.5 rounded-lg border border-[#e9e4d4] bg-white px-3.5 py-3 min-h-[200px]"
+                   data-admin--visual-editor-target="skeleton">
+                <div class="h-3.5 w-3/4 rounded bg-[#efeae0] cb-skeleton"></div>
+                <div class="h-3.5 w-full rounded bg-[#efeae0] cb-skeleton"></div>
+                <div class="h-3.5 w-5/6 rounded bg-[#efeae0] cb-skeleton"></div>
+                <div class="h-3.5 w-2/3 rounded bg-[#efeae0] cb-skeleton"></div>
+              </div>
+
+              <div
+                contenteditable="true"
+                data-placeholder="Typ hier de tekst…"
+                data-admin--visual-editor-target="editor"
+                data-action="input->admin--visual-editor#onInput paste->admin--visual-editor#onPaste"
+                class="ruby_cms-cb-editor min-h-[200px] w-full rounded-lg border border-[#e9e4d4] bg-white px-3.5 py-3 text-[14px] leading-relaxed text-[#1c1917] shadow-sm focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 overflow-y-auto"></div>
+              <p class="mt-1.5 text-[11.5px] text-[#a8a29e]" data-admin--visual-editor-target="charCount">0 tekens</p>
+            </div>
+
+            <!-- Version history panel (toggled via button below) -->
+            <div class="hidden border-t border-[#e9e4d4] bg-[#faf8f3] max-h-[420px] overflow-y-auto"
+                 data-admin--content-block-history-target="panel">
+              <div class="sticky top-0 z-10 px-4 py-2 border-b border-[#e9e4d4] bg-[#faf8f3] flex items-center justify-between">
+                <span class="text-[11px] font-semibold uppercase tracking-wide text-[#a8a29e]">Versiegeschiedenis</span>
+                <button type="button"
+                        data-action="click->admin--content-block-history#close"
+                        class="text-[11.5px] text-[#78716c] hover:text-[#1c1917] transition-colors">Sluit</button>
+              </div>
+              <div data-admin--content-block-history-target="list"></div>
+            </div>
+
+            <!-- Modal footer -->
+            <div class="flex items-center justify-between px-6 py-4 border-t border-[#e9e4d4]">
+              <div class="flex items-center gap-3 min-w-0">
+                <span class="text-[11.5px] text-[#a8a29e]">Last updated: <span data-admin--visual-editor-target="lastUpdated">Never</span></span>
+                <button
+                  type="button"
+                  data-action="click->admin--content-block-history#toggle"
+                  class="inline-flex items-center gap-1 text-[11.5px] text-[#78716c] hover:text-[#1c1917] transition-colors">
+                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                  Versies
+                </button>
+              </div>
+              <div class="flex items-center gap-2">
+                <button
+                  type="button"
+                  class="inline-flex h-8 items-center justify-center rounded-md px-3 text-[13px] font-medium text-[#57534e] hover:bg-[#faf8f3] transition-colors"
+                  data-action="click->admin--visual-editor#closeModal">
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  class="inline-flex h-8 items-center justify-center rounded-md bg-blue-600 px-4 text-[13px] font-medium text-white hover:bg-blue-700 transition-colors"
+                  data-admin--visual-editor-target="saveButton">
+                  Save
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <!-- Success Toast -->
+      <div class="hidden fixed bottom-6 right-6 z-50" data-admin--visual-editor-target="toast">
+        <div class="flex items-center gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800 shadow-lg">
+          <svg class="h-5 w-5 text-emerald-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+          <span data-admin--visual-editor-target="toastMessage">Content updated successfully</span>
+          <button type="button"
+                  data-admin--visual-editor-target="toastUndo"
+                  data-action="click->admin--visual-editor#undoLastSave"
+                  class="hidden ml-1 inline-flex items-center gap-1 rounded-md border border-emerald-300 bg-white/70 px-2 py-1 text-[12px] font-semibold text-emerald-800 hover:bg-white transition-colors">
+            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a5 5 0 010 10h-2M3 10l4-4M3 10l4 4" /></svg>
+            Ongedaan maken
+          </button>
+        </div>
+      </div>
+    </div>
+<% end %>

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

@@ -1,6 +1,6 @@
 <%# Flash messages with auto-dismiss %>
 <% if flash.any? %>
-  <div class="mb-4 space-y-2" data-controller="ruby-cms--flash-messages">
+  <div class="mb-4 space-y-2" data-controller="admin--flash-messages">
     <% flash.each do |type, message| %>
       <%
         variant =
@@ -13,7 +13,7 @@
             "border-gray-200 bg-white text-gray-900"
           end
       %>
-      <div class="flash-message px-4 py-3 rounded-lg border flex items-center justify-between shadow-sm transition duration-200 ease-in-out transform <%= variant %>" role="alert" data-ruby-cms--flash-messages-target="message">
+      <div class="flash-message px-4 py-3 rounded-lg border flex items-center justify-between shadow-sm transition duration-200 ease-in-out transform <%= variant %>" role="alert" data-admin--flash-messages-target="message">
         <div class="flex items-center">
           <% if type == "notice" %>
             <svg class="w-5 h-5 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
@@ -26,7 +26,7 @@
           <% end %>
           <span><%= message %></span>
         </div>
-        <button type="button" class="ml-4 text-gray-500 hover:text-gray-900" aria-label="Dismiss" data-action="click->ruby-cms--flash-messages#dismiss">
+        <button type="button" class="ml-4 text-gray-500 hover:text-gray-900" aria-label="Dismiss" data-action="click->admin--flash-messages#dismiss">
           <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
           </svg>