iron-cms 0.4.5 → 0.5.1

data/app/assets/tailwind/iron/application.css

@@ -3,17 +3,19 @@
 @source "../../../views/**/*.erb";
 @source "../../../helpers/**/*.rb";
 @source "../../../javascript/**/*.js";
+@source "./**/*.css";
 
 @import './components/input.css';
 @import './components/textarea.css';
 @import './components/button.css';
+@import './components/badge.css';
 @import './components/dropdown.css';
 @import './components/fieldset.css';
 @import './components/page.css';
 @import './components/sidebar.css';
 @import './components/form.css';
 @import './components/icon-picker.css';
-@import './actiontext.css';
+@import './lexxy.css';
 
 @plugin '@tailwindcss/typography';
 

data/app/assets/tailwind/iron/components/badge.css

@@ -0,0 +1,97 @@
+/* Base badge styles with default stone color */
+@utility badge {
+  @apply inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline;
+  @apply bg-stone-600/10 text-stone-700 group-hover:bg-stone-600/20;
+  @apply dark:bg-white/5 dark:text-stone-400 dark:group-hover:bg-white/10;
+}
+
+/* Color variants */
+@utility badge-stone {
+  @apply bg-stone-600/10 text-stone-700 group-hover:bg-stone-600/20;
+  @apply dark:bg-white/5 dark:text-stone-400 dark:group-hover:bg-white/10;
+}
+
+@utility badge-red {
+  @apply bg-red-500/15 text-red-700 group-hover:bg-red-500/25;
+  @apply dark:bg-red-500/10 dark:text-red-400 dark:group-hover:bg-red-500/20;
+}
+
+@utility badge-orange {
+  @apply bg-orange-500/15 text-orange-700 group-hover:bg-orange-500/25;
+  @apply dark:bg-orange-500/10 dark:text-orange-400 dark:group-hover:bg-orange-500/20;
+}
+
+@utility badge-amber {
+  @apply bg-amber-400/20 text-amber-700 group-hover:bg-amber-400/30;
+  @apply dark:bg-amber-400/10 dark:text-amber-400 dark:group-hover:bg-amber-400/15;
+}
+
+@utility badge-yellow {
+  @apply bg-yellow-400/20 text-yellow-700 group-hover:bg-yellow-400/30;
+  @apply dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-hover:bg-yellow-400/15;
+}
+
+@utility badge-lime {
+  @apply bg-lime-400/20 text-lime-700 group-hover:bg-lime-400/30;
+  @apply dark:bg-lime-400/10 dark:text-lime-300 dark:group-hover:bg-lime-400/15;
+}
+
+@utility badge-green {
+  @apply bg-green-500/15 text-green-700 group-hover:bg-green-500/25;
+  @apply dark:bg-green-500/10 dark:text-green-400 dark:group-hover:bg-green-500/20;
+}
+
+@utility badge-emerald {
+  @apply bg-emerald-500/15 text-emerald-700 group-hover:bg-emerald-500/25;
+  @apply dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500/20;
+}
+
+@utility badge-teal {
+  @apply bg-teal-500/15 text-teal-700 group-hover:bg-teal-500/25;
+  @apply dark:bg-teal-500/10 dark:text-teal-300 dark:group-hover:bg-teal-500/20;
+}
+
+@utility badge-cyan {
+  @apply bg-cyan-400/20 text-cyan-700 group-hover:bg-cyan-400/30;
+  @apply dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-hover:bg-cyan-400/15;
+}
+
+@utility badge-sky {
+  @apply bg-sky-500/15 text-sky-700 group-hover:bg-sky-500/25;
+  @apply dark:bg-sky-500/10 dark:text-sky-300 dark:group-hover:bg-sky-500/20;
+}
+
+@utility badge-blue {
+  @apply bg-blue-500/15 text-blue-700 group-hover:bg-blue-500/25;
+  @apply dark:text-blue-400 dark:group-hover:bg-blue-500/25;
+}
+
+@utility badge-indigo {
+  @apply bg-indigo-500/15 text-indigo-700 group-hover:bg-indigo-500/25;
+  @apply dark:text-indigo-400 dark:group-hover:bg-indigo-500/20;
+}
+
+@utility badge-violet {
+  @apply bg-violet-500/15 text-violet-700 group-hover:bg-violet-500/25;
+  @apply dark:text-violet-400 dark:group-hover:bg-violet-500/20;
+}
+
+@utility badge-purple {
+  @apply bg-purple-500/15 text-purple-700 group-hover:bg-purple-500/25;
+  @apply dark:text-purple-400 dark:group-hover:bg-purple-500/20;
+}
+
+@utility badge-fuchsia {
+  @apply bg-fuchsia-400/15 text-fuchsia-700 group-hover:bg-fuchsia-400/25;
+  @apply dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-hover:bg-fuchsia-400/20;
+}
+
+@utility badge-pink {
+  @apply bg-pink-400/15 text-pink-700 group-hover:bg-pink-400/25;
+  @apply dark:bg-pink-400/10 dark:text-pink-400 dark:group-hover:bg-pink-400/20;
+}
+
+@utility badge-rose {
+  @apply bg-rose-400/15 text-rose-700 group-hover:bg-rose-400/25;
+  @apply dark:bg-rose-400/10 dark:text-rose-400 dark:group-hover:bg-rose-400/20;
+}

data/app/assets/tailwind/iron/components/form.css

@@ -4,7 +4,7 @@
       @apply textarea;
     }
 
-    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
+    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
       @apply input;
     }
     input[type="submit"], input[type="button"], button:not(el-select button) {

data/app/assets/tailwind/iron/components/input.css

@@ -9,10 +9,10 @@
   @apply bg-white;
 
   /* Focus state */
-  @apply focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600;
+  @apply focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sky-600;
 
   /* Dark mode */
-  @apply dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-stone-500 dark:focus:outline-indigo-500;
+  @apply dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-stone-500 dark:focus-visible:outline-sky-600;
 
   /* States */
   @apply disabled:opacity-50;

data/app/assets/tailwind/iron/lexxy.css

@@ -0,0 +1,366 @@
+/*
+ * Lexxy rich text editor styles for Iron CMS
+ * Matches the design system with proper light/dark mode support
+ */
+
+@layer components {
+  /* Editor container */
+  lexxy-editor {
+    @apply block w-full rounded-md;
+    @apply bg-white dark:bg-white/5;
+    @apply border border-stone-950/10 dark:border-white/10;
+    @apply focus-visible:outline-2 focus-visible:outline-sky-600 dark:focus-visible:outline-sky-500;
+  }
+
+  /* Toolbar */
+  lexxy-toolbar {
+    @apply flex flex-wrap items-center gap-1 p-2;
+    @apply border-b border-stone-950/10 dark:border-white/10;
+    @apply bg-stone-50 dark:bg-white/5;
+    @apply rounded-t-md;
+  }
+
+  /* Toolbar button groups */
+  lexxy-toolbar [data-toolbar-group] {
+    @apply flex items-center;
+  }
+
+  lexxy-toolbar [data-toolbar-group]:not(:last-child)::after {
+    content: "";
+    @apply mx-2 h-5 w-px bg-stone-300 dark:bg-white/20;
+  }
+
+  /* Toolbar buttons */
+  lexxy-toolbar button {
+    @apply inline-flex items-center justify-center;
+    @apply h-8 w-8 rounded-md;
+    @apply text-stone-700 dark:text-stone-200;
+    @apply hover:bg-stone-200 dark:hover:bg-white/10;
+    @apply focus-visible:outline-2 focus-visible:outline-stone-600;
+    @apply disabled:opacity-40 disabled:pointer-events-none;
+    @apply transition-colors;
+  }
+
+  lexxy-toolbar button[aria-pressed="true"],
+  lexxy-toolbar button.active {
+    @apply bg-stone-200 text-stone-900;
+    @apply dark:bg-white/15 dark:text-white;
+  }
+
+  lexxy-toolbar button svg {
+    @apply size-5 text-inherit;
+    fill: currentColor;
+  }
+
+  /* Editor content area */
+  lexxy-editor [contenteditable] {
+    @apply block w-full min-h-48 p-4;
+    @apply text-base/6 text-stone-950 dark:text-white;
+    @apply outline-none;
+    @apply sm:text-sm/6;
+  }
+
+  lexxy-editor [contenteditable]:empty::before {
+    content: attr(data-placeholder);
+    @apply text-stone-400 dark:text-stone-500;
+    @apply pointer-events-none;
+  }
+
+  /* Link dialog/popover */
+  lexxy-editor [data-lexxy-link-editor] {
+    @apply flex items-center gap-2 p-2;
+    @apply bg-white dark:bg-stone-800;
+    @apply border border-stone-200 dark:border-white/10;
+    @apply rounded-lg shadow-lg;
+    @apply focus-visible:outline-2 focus-visible:outline-indigo-600;
+  }
+
+  lexxy-editor [data-lexxy-link-editor] input {
+    @apply px-2 py-1 text-sm rounded;
+    @apply bg-white dark:bg-white/5;
+    @apply border border-stone-300 dark:border-white/10;
+    @apply text-stone-900 dark:text-white;
+    @apply placeholder:text-stone-400 dark:placeholder:text-stone-500;
+    @apply focus-visible:outline-2 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-500;
+  }
+
+  lexxy-editor [data-lexxy-link-editor] button {
+    @apply px-2 py-1 text-sm font-medium rounded;
+    @apply bg-indigo-600 text-white;
+    @apply hover:bg-indigo-500;
+  }
+
+  /* Floating link dialog */
+  lexxy-link-dialog dialog {
+    @apply m-0 p-3;
+    @apply rounded-lg border border-stone-200 bg-white shadow-lg;
+    @apply dark:border-white/10 dark:bg-stone-800;
+    min-width: 18rem;
+  }
+
+  lexxy-link-dialog form {
+    @apply flex flex-col gap-3;
+  }
+
+  lexxy-link-dialog button {
+    @apply inline-flex items-center justify-center;
+    @apply size-auto min-w-0;
+  }
+
+  lexxy-link-dialog input[type="url"] {
+    @apply w-full rounded-md;
+    @apply border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900;
+    @apply placeholder:text-stone-400;
+    @apply focus-visible:outline-2 focus-visible:outline-indigo-600;
+    @apply dark:border-white/10 dark:bg-stone-900 dark:text-white dark:placeholder:text-stone-500 dark:focus-visible:outline-indigo-500;
+  }
+
+  lexxy-link-dialog .lexxy-dialog-actions {
+    @apply flex items-center justify-end gap-2;
+  }
+
+  lexxy-link-dialog .lexxy-dialog-actions button {
+    @apply inline-flex items-center justify-center gap-1;
+    @apply rounded-md px-3 py-1.5 text-sm font-semibold;
+    @apply text-white bg-indigo-600 hover:bg-indigo-500;
+    @apply shadow-sm;
+    @apply focus-visible:outline-2 focus-visible:outline-indigo-500;
+  }
+
+  lexxy-link-dialog .lexxy-dialog-actions button[value="unlink"] {
+    @apply text-stone-800 bg-stone-100 hover:bg-stone-200;
+    @apply border border-stone-200;
+    @apply dark:text-white dark:bg-white/10 dark:border-white/20 dark:hover:bg-white/15;
+  }
+
+  /* Attachment upload progress */
+  lexxy-editor .attachment__progress {
+    @apply absolute z-10;
+    @apply h-1 top-1/2 left-[5%] w-[90%] -translate-y-1/2;
+    @apply bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden;
+  }
+
+  lexxy-editor .attachment__progress::-webkit-progress-bar {
+    @apply bg-stone-200 dark:bg-stone-700;
+  }
+
+  lexxy-editor .attachment__progress::-webkit-progress-value {
+    @apply bg-indigo-600;
+    @apply transition-all duration-200;
+  }
+
+  lexxy-editor .attachment__progress::-moz-progress-bar {
+    @apply bg-indigo-600;
+  }
+
+  lexxy-editor .attachment__progress[value="100"] {
+    @apply opacity-0;
+    @apply transition-opacity duration-200;
+  }
+
+  /* Attachments in editor */
+  lexxy-editor .attachment {
+    @apply relative inline-block max-w-full;
+  }
+
+  lexxy-editor .attachment--preview {
+    @apply w-full text-center;
+  }
+
+  lexxy-editor .attachment--preview img {
+    @apply max-w-full rounded;
+  }
+
+  lexxy-editor .attachment--file {
+    @apply inline-flex items-center gap-2;
+    @apply px-3 py-2 my-1;
+    @apply bg-stone-100 dark:bg-white/10;
+    @apply border border-stone-200 dark:border-white/10;
+    @apply rounded-lg;
+    @apply text-sm text-stone-700 dark:text-stone-300;
+  }
+
+  lexxy-editor .attachment__caption {
+    @apply text-center text-sm text-stone-500 dark:text-stone-400;
+    @apply mt-1;
+  }
+
+  lexxy-editor .attachment__toolbar {
+    @apply absolute z-10 top-2 right-2;
+    @apply flex items-center gap-1;
+  }
+
+  lexxy-editor .attachment__toolbar button {
+    @apply size-6 rounded-full;
+    @apply bg-white/90 dark:bg-stone-800/90;
+    @apply text-stone-600 dark:text-stone-400;
+    @apply hover:bg-white dark:hover:bg-stone-800;
+    @apply shadow-sm;
+  }
+
+  /* Selected attachment state */
+  lexxy-editor [data-trix-mutable] img,
+  lexxy-editor .attachment.selected img {
+    @apply ring-2 ring-indigo-500;
+  }
+}
+
+/* Rendered content styles */
+@layer components {
+  .lexxy-content {
+    @apply text-base/7 text-stone-900 dark:text-stone-100;
+    @apply break-words;
+  }
+
+  .lexxy-content > * + * {
+    @apply mt-4;
+  }
+
+  .lexxy-content p {
+    @apply my-0;
+  }
+
+  .lexxy-content p + p {
+    @apply mt-4;
+  }
+
+  .lexxy-content strong {
+    @apply font-semibold text-stone-950 dark:text-white;
+  }
+
+  .lexxy-content em {
+    @apply italic;
+  }
+
+  .lexxy-content a {
+    @apply text-indigo-600 dark:text-indigo-400;
+    @apply underline underline-offset-2;
+    @apply hover:text-indigo-500 dark:hover:text-indigo-300;
+  }
+
+  .lexxy-content h1 {
+    @apply text-2xl font-bold text-stone-950 dark:text-white;
+    @apply mt-8 mb-4;
+  }
+
+  .lexxy-content h2 {
+    @apply text-xl font-bold text-stone-950 dark:text-white;
+    @apply mt-6 mb-3;
+  }
+
+  .lexxy-content h3 {
+    @apply text-lg font-semibold text-stone-950 dark:text-white;
+    @apply mt-5 mb-2;
+  }
+
+  .lexxy-content blockquote {
+    @apply pl-4 my-4;
+    @apply border-l-4 border-stone-300 dark:border-stone-600;
+    @apply text-stone-600 dark:text-stone-400;
+    @apply italic;
+  }
+
+  .lexxy-content ul {
+    @apply list-disc list-inside my-4;
+  }
+
+  .lexxy-content ol {
+    @apply list-decimal list-inside my-4;
+  }
+
+  .lexxy-content li {
+    @apply my-1;
+  }
+
+  .lexxy-content li > ul,
+  .lexxy-content li > ol {
+    @apply ml-4 my-1;
+  }
+
+  .lexxy-content code {
+    @apply px-1.5 py-0.5 rounded;
+    @apply bg-stone-100 dark:bg-white/10;
+    @apply text-sm font-mono;
+    @apply text-pink-600 dark:text-pink-400;
+  }
+
+  .lexxy-content pre {
+    @apply my-4 p-4 rounded-lg overflow-x-auto;
+    @apply bg-stone-900 dark:bg-stone-950;
+    @apply text-sm leading-relaxed;
+  }
+
+  .lexxy-content pre code {
+    @apply p-0 bg-transparent rounded-none;
+    @apply text-stone-100;
+    @apply block whitespace-pre;
+  }
+
+  .lexxy-content hr {
+    @apply my-8 border-t border-stone-200 dark:border-stone-700;
+  }
+
+  .lexxy-content img {
+    @apply max-w-full h-auto rounded-lg;
+    @apply my-4;
+  }
+
+  /* Attachment rendering in content */
+  .lexxy-content .attachment {
+    @apply inline-block max-w-full my-4;
+  }
+
+  .lexxy-content .attachment--preview {
+    @apply w-full text-center;
+  }
+
+  .lexxy-content .attachment--file {
+    @apply inline-flex items-center gap-2;
+    @apply px-3 py-2;
+    @apply bg-stone-100 dark:bg-white/10;
+    @apply border border-stone-200 dark:border-white/10;
+    @apply rounded-lg;
+    @apply text-sm text-stone-700 dark:text-stone-300;
+    @apply hover:bg-stone-200 dark:hover:bg-white/15;
+    @apply transition-colors;
+  }
+
+  .lexxy-content .attachment__caption {
+    @apply text-center text-sm text-stone-500 dark:text-stone-400;
+    @apply mt-2;
+  }
+
+  .lexxy-content .attachment__name {
+    @apply font-medium;
+  }
+
+  .lexxy-content .attachment__size {
+    @apply text-stone-500 dark:text-stone-400;
+  }
+
+  .lexxy-content .attachment__name + .attachment__size::before {
+    content: " · ";
+  }
+
+  /* Attachment gallery */
+  .lexxy-content .attachment-gallery {
+    @apply flex flex-wrap gap-2 my-4;
+  }
+
+  .lexxy-content .attachment-gallery .attachment,
+  .lexxy-content .attachment-gallery > action-text-attachment {
+    @apply flex-1 min-w-[calc(33.333%-0.5rem)] max-w-[calc(33.333%-0.5rem)];
+    @apply my-0;
+  }
+
+  .lexxy-content .attachment-gallery.attachment-gallery--2 .attachment,
+  .lexxy-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
+  .lexxy-content .attachment-gallery.attachment-gallery--4 .attachment,
+  .lexxy-content .attachment-gallery.attachment-gallery--4 > action-text-attachment {
+    @apply min-w-[calc(50%-0.25rem)] max-w-[calc(50%-0.25rem)];
+  }
+
+  .lexxy-content action-text-attachment .attachment {
+    @apply p-0 max-w-full my-0;
+  }
+}

data/app/controllers/iron/home_controller.rb

@@ -1,6 +1,7 @@
 module Iron
   class HomeController < ApplicationController
     def show
+      @recent_entries = Entry.includes(:content_type, :creator).order(updated_at: :desc).limit(10)
     end
   end
 end

data/app/helpers/iron/application_helper.rb

@@ -1,21 +1,12 @@
 require "tailwind_merge"
 module Iron
   module ApplicationHelper
-    include IconsHelper, AvatarHelper, ButtonsHelper, EntriesHelper, ContentTypesHelper
-    include Components::BadgeHelper
+    include IconsHelper, AvatarHelper, UiHelper, EntriesHelper, ContentTypesHelper
 
-    def tw(*classes)
-      TailwindMerge::Merger.new.merge(classes.reject(&:blank?).compact.join(" "))
-    end
+    TAILWIND_MERGER = TailwindMerge::Merger.new.freeze
 
-    def cva(base_classes = "", options = {})
-      Cva::VariantBuilder.new(
-        base_classes: base_classes,
-        variants: options[:variants] || {},
-        defaults: options[:defaults] || {},
-        compound_variants: options[:compound_variants] || [],
-        required: options[:required] || []
-      )
+    def tw(*classes)
+      TAILWIND_MERGER.merge(classes.reject(&:blank?).compact.join(" "))
     end
 
     def unique_id

data/app/helpers/iron/entries_helper.rb

@@ -1,8 +1,4 @@
 module Iron::EntriesHelper
-  def entry_fields_for(field, prefix, &)
-    fields_for "#{prefix}[fields_attributes][#{field.id || unique_id}]", field, &
-  end
-
   def current_content_page?(content_type)
     request.path.start_with?(content_type_entries_path(content_type)) || (
       controller_name == "entries" &&

data/app/helpers/iron/icons_helper.rb

@@ -2,10 +2,6 @@ module Iron
   module IconsHelper
     SPRITE_PATH = "iron/icons/sprite.svg"
 
-    def available_icons
-      IconCatalog.all
-    end
-
     # Examples
     #   icon "heart"                       # => 24 px outline heart
     #   icon "trash", class: "text-red-600 hover:text-red-700"
@@ -23,8 +19,14 @@ module Iron
         viewBox: "0 0 24 24",
         aria_hidden: "true"
       ) do
-        tag.use href: "#{image_path(SPRITE_PATH)}##{name}"
+        tag.use href: "#{sprite_image_path}##{name}"
       end
     end
+
+    private
+
+      def sprite_image_path
+        @sprite_image_path ||= image_path(SPRITE_PATH)
+      end
   end
 end

data/app/helpers/iron/ui_helper.rb

@@ -0,0 +1,22 @@
+module Iron
+  module UiHelper
+    def back_button_to(title, url, options = {}, &)
+      link_to url,
+        class: tw(
+          "inline-flex items-center gap-2 text-sm/6 text-stone-500 dark:text-stone-400",
+          options.delete(:class)
+        ) do
+        safe_join([
+          icon("chevron-left", class: "size-4"),
+          tag.span(title)
+        ])
+      end
+    end
+
+    def badge(content = nil, **options, &block)
+      tag.span class: tw("badge", options.delete(:class)), **options do
+        block_given? ? capture(&block) : content
+      end
+    end
+  end
+end

data/app/javascript/iron/application.js

@@ -2,7 +2,9 @@
 import "@hotwired/turbo-rails";
 import "controllers";
 
-import "trix"
-import "@rails/actiontext"
+import * as ActiveStorage from "@rails/activestorage";
+import "lexxy";
 
-import "@tailwindplus/elements"
+import "@tailwindplus/elements";
+
+ActiveStorage.start();

data/app/views/iron/block_definitions/_block_definition.html.erb

@@ -4,7 +4,7 @@
       <div class="flex flex-col sm:flex-row sm:items-center sm:gap-8 min-w-0 flex-1">
         <div class="flex items-center gap-3 shrink-0">
           <h3 class="text-base font-semibold text-stone-900 dark:text-white truncate"><%= block_definition.name %></h3>
-          <%= badge block_definition.handle, color: :blue, class: "hidden sm:inline-flex" %>
+          <%= badge block_definition.handle, class: "badge-blue hidden sm:inline-flex" %>
         </div>
         
         <% if block_definition.description.present? %>
@@ -14,7 +14,7 @@
     </div>
 
     <div class="absolute right-6 top-1/2 -translate-y-1/2 flex items-center gap-4">
-      <%= badge block_definition.handle, color: :blue, class: "sm:hidden" %>
+      <%= badge block_definition.handle, class: "badge-blue sm:hidden" %>
       <%= icon "chevron-right", variant: :mini, class: "text-stone-400 dark:text-stone-500" %>
     </div>
   <% end %>

data/app/views/iron/content_types/_content_type.html.erb

@@ -4,7 +4,7 @@
       <div class="flex flex-col sm:flex-row sm:items-center sm:gap-8 min-w-0 flex-1">
         <div class="flex items-center gap-3 shrink-0">
           <h3 class="text-base font-semibold text-stone-900 dark:text-white truncate"><%= content_type.name %></h3>
-          <%= badge content_type.handle, color: :blue, class: "hidden sm:inline-flex" %>
+          <%= badge content_type.handle, class: "badge-blue hidden sm:inline-flex" %>
         </div>
         
         <% if content_type.description.present? %>
@@ -14,7 +14,7 @@
     </div>
 
     <div class="absolute right-6 top-1/2 -translate-y-1/2 flex items-center gap-4">
-      <%= badge content_type.handle, color: :blue, class: "sm:hidden" %>
+      <%= badge content_type.handle, class: "badge-blue sm:hidden" %>
       <%= icon "chevron-right", class: "text-stone-400 dark:text-stone-500" %>
     </div>
   <% end %>

data/app/views/iron/content_types/show.html.erb

@@ -18,7 +18,7 @@
   </div>
   <p class="dark:text-stone-400"><%= @content_type.description %></p>
   <p class="text-sm text-stone-500 dark:text-stone-400 mt-2">
-    Type: <%= badge @content_type.single? ? "Single" : "Collection", variant: @content_type.single? ? "blue" : "green" %>
+    Type: <%= badge @content_type.single? ? "Single" : "Collection", class: @content_type.single? ? "badge-blue" : "badge-green" %>
   </p>
 
   <ul

data/app/views/iron/entries/fields/_rich_text_area.html.erb

@@ -7,7 +7,5 @@
   <%= builder.hidden_field :type %>
 
   <%= builder.label :rich_text, field.definition.name %>
-  <div data-controller="trix">
-    <%= builder.rich_textarea :rich_text, class: "input prose prose-stone dark:prose-invert min-h-56 max-w-none" %>
-  </div>
+  <%= builder.rich_textarea :rich_text, class: "prose prose-stone dark:prose-invert min-h-56 max-w-none w-full" %>
 </div>