iron-cms 0.5.2 → 0.7.0

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

@@ -7,6 +7,7 @@
 
 @import './components/input.css';
 @import './components/textarea.css';
+@import './components/checkbox.css';
 @import './components/button.css';
 @import './components/badge.css';
 @import './components/dropdown.css';

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

@@ -115,10 +115,3 @@
     }
   }
 }
-
-/* Legacy support - map old btn class to button-primary button-md */
-@utility btn {
-  @layer components {
-    @apply button-primary button-md;
-  }
-}

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

@@ -0,0 +1,21 @@
+@utility checkbox {
+  @apply grid size-4 grid-cols-1;
+
+  & input {
+    @apply col-start-1 row-start-1 appearance-none rounded-sm border border-stone-300 bg-white;
+    @apply checked:border-sky-600 checked:bg-sky-600;
+    @apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600;
+    @apply disabled:border-stone-300 disabled:bg-stone-100 disabled:checked:bg-stone-100;
+    @apply dark:border-white/10 dark:bg-white/5;
+    @apply dark:checked:border-sky-500 dark:checked:bg-sky-500;
+    @apply dark:focus-visible:outline-sky-500;
+    @apply dark:disabled:border-white/5 dark:disabled:bg-white/10 dark:disabled:checked:bg-white/10;
+    @apply forced-colors:appearance-auto;
+  }
+
+  & svg {
+    @apply pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center;
+    @apply stroke-white opacity-0 group-has-checked/checkbox:opacity-100;
+    @apply group-has-disabled/checkbox:stroke-stone-950/25 dark:group-has-disabled/checkbox:stroke-white/25;
+  }
+}

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

@@ -8,7 +8,7 @@
       @apply input;
     }
     input[type="submit"], input[type="button"], button:not(el-select button) {
-      @apply btn;
+      @apply button-primary;
     }
 
     label + div {

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

@@ -3,6 +3,29 @@
  * Matches the design system with proper light/dark mode support
  */
 
+/* Highlight color variables for text and background highlighting */
+:root {
+  --highlight-1: rgb(136, 118, 38);
+  --highlight-2: rgb(185, 94, 6);
+  --highlight-3: rgb(207, 0, 0);
+  --highlight-4: rgb(216, 28, 170);
+  --highlight-5: rgb(144, 19, 254);
+  --highlight-6: rgb(5, 98, 185);
+  --highlight-7: rgb(17, 138, 15);
+  --highlight-8: rgb(148, 82, 22);
+  --highlight-9: rgb(102, 102, 102);
+
+  --highlight-bg-1: rgba(229, 223, 6, 0.3);
+  --highlight-bg-2: rgba(255, 185, 87, 0.3);
+  --highlight-bg-3: rgba(255, 118, 118, 0.3);
+  --highlight-bg-4: rgba(248, 137, 216, 0.3);
+  --highlight-bg-5: rgba(190, 165, 255, 0.3);
+  --highlight-bg-6: rgba(124, 192, 252, 0.3);
+  --highlight-bg-7: rgba(140, 255, 129, 0.3);
+  --highlight-bg-8: rgba(221, 170, 123, 0.3);
+  --highlight-bg-9: rgba(200, 200, 200, 0.3);
+}
+
 @layer components {
   /* Editor container */
   lexxy-editor {
@@ -31,7 +54,8 @@
   }
 
   /* Toolbar buttons */
-  lexxy-toolbar button {
+  lexxy-toolbar button,
+  lexxy-toolbar summary {
     @apply inline-flex items-center justify-center;
     @apply h-8 w-8 rounded-md;
     @apply text-stone-700 dark:text-stone-200;
@@ -42,12 +66,14 @@
   }
 
   lexxy-toolbar button[aria-pressed="true"],
-  lexxy-toolbar button.active {
+  lexxy-toolbar button.active,
+  lexxy-toolbar details[open] > summary {
     @apply bg-stone-200 text-stone-900;
     @apply dark:bg-white/15 dark:text-white;
   }
 
-  lexxy-toolbar button svg {
+  lexxy-toolbar button svg,
+  lexxy-toolbar summary svg {
     @apply size-5 text-inherit;
     fill: currentColor;
   }
@@ -66,71 +92,159 @@
     @apply pointer-events-none;
   }
 
-  /* Link dialog/popover */
-  lexxy-editor [data-lexxy-link-editor] {
-    @apply flex items-center gap-2 p-2;
+  /* Toolbar dropdowns (shared container styles) */
+  .lexxy-editor__toolbar-dropdown {
+    @apply relative select-none;
+  }
+
+  .lexxy-editor__toolbar-dropdown > summary {
+    list-style: none;
+    @apply cursor-pointer;
+  }
+
+  .lexxy-editor__toolbar-dropdown > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .lexxy-editor__toolbar-dropdown > summary::marker {
+    display: none;
+    content: "";
+  }
+
+  .lexxy-editor__toolbar-dropdown-content {
+    --dropdown-padding: --spacing(3);
+    --dropdown-gap: --spacing(1.5);
+
+    @apply absolute z-10;
+    @apply flex gap-(--dropdown-gap) p-(--dropdown-padding);
     @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;
+    @apply border-2 border-sky-200 dark:border-sky-500/30;
+    @apply rounded-md;
+    @apply text-stone-900 dark:text-white;
+    @apply top-8 start-0;
+    @apply max-w-[40ch];
+    @apply rounded-ss-none;
   }
 
-  lexxy-editor [data-lexxy-link-editor] input {
-    @apply px-2 py-1 text-sm rounded;
-    @apply bg-white dark:bg-white/5;
+  .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button {
+    @apply bg-sky-100 dark:bg-sky-500/20;
+    @apply rounded-ee-none rounded-es-none;
+  }
+
+  .lexxy-editor__toolbar-dropdown:is([open]) .lexxy-editor__toolbar-button:hover {
+    @apply bg-sky-100 dark:bg-sky-500/20;
+  }
+
+  /* Responsive dropdown in overflow menu */
+  [overflowing] .lexxy-editor__toolbar-dropdown {
+    @apply static;
+  }
+
+  [overflowing] .lexxy-editor__toolbar-dropdown-content {
+    --dropdown-padding: --spacing(2);
+    @apply end-(--dropdown-padding) start-(--dropdown-padding);
+  }
+
+  /* Link dropdown */
+  lexxy-link-dropdown {
+    @apply flex-1;
+  }
+
+  lexxy-link-dropdown > * {
+    @apply flex-1;
+  }
+
+  lexxy-link-dropdown .lexxy-editor__toolbar-dropdown-actions {
+    @apply flex flex-1 gap-2 mt-2;
+    @apply text-sm;
+  }
+
+  lexxy-link-dropdown input[type="url"] {
+    @apply w-full rounded-md px-2;
     @apply border border-stone-300 dark:border-white/10;
+    @apply bg-white dark:bg-stone-900;
     @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;
+    @apply focus-visible:outline-2 focus-visible:outline-sky-600 dark:focus-visible:outline-sky-500;
+    @apply leading-6 min-w-[40ch] box-border;
   }
 
-  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;
+  [overflowing] lexxy-link-dropdown input[type="url"] {
+    @apply min-w-0;
   }
 
-  /* 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-dropdown .lexxy-editor__toolbar-dropdown-actions button {
+    @apply w-full justify-center;
+    @apply button-secondary button-sm;
   }
 
-  lexxy-link-dialog form {
-    @apply flex flex-col gap-3;
+  /* Highlight/Color dropdown */
+  lexxy-highlight-dropdown {
+    @apply flex flex-col;
   }
 
-  lexxy-link-dialog button {
-    @apply inline-flex items-center justify-center;
-    @apply size-auto min-w-0;
+  lexxy-highlight-dropdown [data-button-group] {
+    @apply flex flex-row gap-(--dropdown-gap);
+    @apply justify-start;
   }
 
-  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-highlight-dropdown [data-button-group] button {
+    --button-size: --spacing(8);
+    @apply aspect-square;
+    @apply w-(--button-size) min-w-(--button-size) max-w-(--button-size);
   }
 
-  lexxy-link-dialog .lexxy-dialog-actions {
-    @apply flex items-center justify-end gap-2;
+  lexxy-highlight-dropdown [data-button-group] button::after {
+    content: "Aa";
+    @apply absolute inset-0;
+    @apply self-center;
+    @apply inline-block;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }
 
-  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-highlight-dropdown button {
+    --button-size: --spacing(8);
+    @apply flex-1 relative;
+    @apply text-stone-900 dark:text-white;
+    @apply min-h-(--button-size);
+  }
+
+  lexxy-highlight-dropdown button:hover {
+    @apply opacity-80;
+  }
+
+  lexxy-highlight-dropdown button[aria-pressed="true"] {
+    @apply ring-2 ring-inset ring-current;
+  }
+
+  lexxy-highlight-dropdown button[aria-pressed="true"]::after {
+    content: "✓";
+  }
+
+  lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset {
+    @apply mt-2 w-full;
+    @apply button-secondary button-sm;
+  }
+
+  lexxy-highlight-dropdown .lexxy-editor__toolbar-dropdown-reset[disabled] {
+    @apply hidden;
+  }
+
+  /* Responsive highlight dropdown */
+  [overflowing] lexxy-highlight-dropdown {
+    @apply w-fit;
+  }
+
+  [overflowing] lexxy-highlight-dropdown [data-button-group] {
+    @apply flex-wrap;
+  }
+
+  [overflowing] lexxy-highlight-dropdown [data-button-group] button {
+    --button-size: --spacing(6);
   }
 
-  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;
+  [overflowing] lexxy-highlight-dropdown [data-button-group] button::after {
+    @apply text-sm;
   }
 
   /* Attachment upload progress */
@@ -145,12 +259,12 @@
   }
 
   lexxy-editor .attachment__progress::-webkit-progress-value {
-    @apply bg-indigo-600;
+    @apply bg-sky-600;
     @apply transition-all duration-200;
   }
 
   lexxy-editor .attachment__progress::-moz-progress-bar {
-    @apply bg-indigo-600;
+    @apply bg-sky-600;
   }
 
   lexxy-editor .attachment__progress[value="100"] {
@@ -201,7 +315,7 @@
   /* Selected attachment state */
   lexxy-editor [data-trix-mutable] img,
   lexxy-editor .attachment.selected img {
-    @apply ring-2 ring-indigo-500;
+    @apply ring-2 ring-sky-500;
   }
 }
 
@@ -233,9 +347,9 @@
   }
 
   .lexxy-content a {
-    @apply text-indigo-600 dark:text-indigo-400;
+    @apply text-sky-600 dark:text-sky-400;
     @apply underline underline-offset-2;
-    @apply hover:text-indigo-500 dark:hover:text-indigo-300;
+    @apply hover:text-sky-500 dark:hover:text-sky-300;
   }
 
   .lexxy-content h1 {

data/app/controllers/iron/account/exports_controller.rb

@@ -0,0 +1,26 @@
+module Iron
+  class Account::ExportsController < ApplicationController
+    def index
+      @exports = Account::Export.order(created_at: :desc)
+    end
+
+    def new
+      @export = Account::Export.new
+    end
+
+    def create
+      @export = Account::Export.create!(export_params)
+      @export.process_later
+      redirect_to @export, notice: "Export started"
+    end
+
+    def show
+      @export = Account::Export.find(params[:id])
+    end
+
+    private
+      def export_params
+        params.require(:account_export).permit(:include_schema, :include_content)
+      end
+  end
+end

data/app/controllers/iron/account/imports_controller.rb

@@ -0,0 +1,27 @@
+module Iron
+  class Account::ImportsController < ApplicationController
+    def index
+      @imports = Account::Import.order(created_at: :desc)
+    end
+
+    def new
+      @import = Account::Import.new
+    end
+
+    def create
+      @import = Account::Import.create!(import_params)
+      @import.file.attach(params[:account_import][:file])
+      @import.process_later
+      redirect_to @import, notice: "Import started"
+    end
+
+    def show
+      @import = Account::Import.find(params[:id])
+    end
+
+    private
+      def import_params
+        params.require(:account_import).permit(:include_schema, :include_content)
+      end
+  end
+end

data/app/helpers/iron/form_builder.rb

@@ -40,6 +40,13 @@ module Iron
       super(method, text, options, &block)
     end
 
+    def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      @template.content_tag(:div, class: "group/checkbox checkbox") do
+        super(method, options, checked_value, unchecked_value) +
+        @template.icon("check")
+      end
+    end
+
     def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
       selected_value = object.send(method) rescue nil
 

data/app/javascript/iron/controllers/local_preference_controller.js

@@ -0,0 +1,62 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Persists element state to localStorage automatically.
+ *
+ * Listens for changes and saves the element's property value to localStorage.
+ * Use with `Iron.preference.apply(id, property)` to restore state on page load.
+ *
+ * @example Basic usage (auto-detects event and property)
+ * <details id="my-panel" data-controller="local-preference">
+ *   ...
+ * </details>
+ * <script>Iron.preference.apply("my-panel", "open")</script>
+ *
+ * @example With custom property
+ * <input id="my-input" data-controller="local-preference" data-local-preference-property-value="value">
+ *
+ * @example With key prefix (useful for scoping)
+ * <details id="panel" data-controller="local-preference" data-local-preference-key-prefix-value="settings:">
+ *
+ * @values {string} [property] - Element property to persist. Auto-detected if not set:
+ *   - "open" for <details>
+ *   - "checked" for checkbox/radio inputs
+ *   - "value" for other inputs, selects, textareas
+ * @values {string} [keyPrefix=""] - Prefix for the localStorage key
+ */
+export default class extends Controller {
+  static values = {
+    property: String,
+    keyPrefix: { type: String, default: "" }
+  }
+
+  connect() {
+    this.element.addEventListener(this.event, this.save)
+  }
+
+  disconnect() {
+    this.element.removeEventListener(this.event, this.save)
+  }
+
+  save = () => {
+    const key = this.keyPrefixValue + this.element.id
+    localStorage.setItem(Iron.preference.storageKey(key), this.element[this.property])
+  }
+
+  get event() {
+    const el = this.element
+    if (el.tagName === "DETAILS") return "toggle"
+    if (el.tagName === "TEXTAREA") return "input"
+    if (el.tagName === "INPUT" && el.type !== "checkbox" && el.type !== "radio") return "input"
+    return "change"
+  }
+
+  get property() {
+    if (this.hasPropertyValue) return this.propertyValue
+
+    const el = this.element
+    if (el.tagName === "DETAILS") return "open"
+    if (el.type === "checkbox" || el.type === "radio") return "checked"
+    return "value"
+  }
+}

data/app/jobs/iron/export_job.rb

@@ -0,0 +1,9 @@
+module Iron
+  class ExportJob < ApplicationJob
+    queue_as :default
+
+    def perform(export)
+      export.process
+    end
+  end
+end

data/app/jobs/iron/import_job.rb

@@ -0,0 +1,9 @@
+module Iron
+  class ImportJob < ApplicationJob
+    queue_as :default
+
+    def perform(import)
+      Current.set(user: import.user) { import.process }
+    end
+  end
+end

data/app/models/concerns/iron/broadcastable.rb

@@ -0,0 +1,9 @@
+module Iron
+  module Broadcastable
+    extend ActiveSupport::Concern
+
+    included do
+      broadcasts_refreshes
+    end
+  end
+end

data/app/models/concerns/iron/processable.rb

@@ -0,0 +1,34 @@
+module Iron
+  module Processable
+    extend ActiveSupport::Concern
+
+    RETENTION_LIMIT = 5
+
+    included do
+      enum :status, %w[pending processing completed failed].index_by(&:itself), default: :pending
+
+      scope :recent, -> { order(created_at: :desc).limit(RETENTION_LIMIT) }
+    end
+
+    class_methods do
+      def cleanup
+        where.not(id: recent.select(:id)).destroy_all
+      end
+    end
+
+    def process
+      processing!
+      perform
+      update!(status: :completed, completed_at: Time.current)
+      self.class.cleanup
+    rescue => e
+      update!(status: :failed, error_message: e.message)
+      raise
+    end
+
+    private
+      def perform
+        raise NotImplementedError
+      end
+  end
+end

data/app/models/iron/account/export.rb

@@ -0,0 +1,86 @@
+module Iron
+  class Account::Export < ApplicationRecord
+    include Processable, Broadcastable
+
+    belongs_to :user, class_name: "Iron::User", default: -> { Current.user }
+    has_one_attached :file
+
+    def process_later
+      ExportJob.perform_later(self)
+    end
+
+    def title
+      created_at.strftime("%b %-d, %Y at %-l:%M %p")
+    end
+
+    private
+      def perform
+        raise ArgumentError, "Nothing selected to export" unless include_schema? || include_content?
+
+        zipfile = generate_zip
+        file.attach(
+          io: File.open(zipfile.path),
+          filename: "iron-export-#{id}.zip",
+          content_type: "application/zip"
+        )
+      ensure
+        zipfile&.close
+        zipfile&.unlink
+      end
+
+      def generate_zip
+        Tempfile.new([ "export", ".zip" ]).tap do |tempfile|
+          Zip::File.open(tempfile.path, create: true) do |zip|
+            add_schema_to_zip(zip) if include_schema?
+            add_content_to_zip(zip) if include_content?
+          end
+        end
+      end
+
+      def add_schema_to_zip(zip)
+        zip.get_output_stream("schema.json") { |f| f.write(export_schema_json) }
+      end
+
+      def add_content_to_zip(zip)
+        exportable_entries.find_each do |entry|
+          path = "entries/#{entry.content_type.handle}/#{entry.id}.json"
+          zip.get_output_stream(path) { |f| f.write(entry.export_json) }
+
+          entry.export_attachments.each do |attachment|
+            zip.get_output_stream("files/#{attachment[:path]}", compression_method: Zip::Entry::STORED) do |f|
+              attachment[:blob].download { |chunk| f.write(chunk) }
+            end
+          rescue ActiveStorage::FileNotFoundError
+            # Skip missing files
+          end
+        end
+      end
+
+      def export_schema_json
+        JSON.pretty_generate(
+          version: "1.0",
+          exported_at: Time.current.iso8601,
+          block_definitions: export_block_definitions,
+          content_types: export_content_types
+        )
+      end
+
+      def export_block_definitions
+        BlockDefinition
+          .includes(:field_definitions)
+          .order(:handle)
+          .map(&:export_attributes)
+      end
+
+      def export_content_types
+        ContentType
+          .includes(:title_field_definition, :web_page_title_field_definition, :field_definitions)
+          .order(:handle)
+          .map(&:export_attributes)
+      end
+
+      def exportable_entries
+        Entry.includes(:content_type, :creator, fields: [ :locale, :definition ])
+      end
+  end
+end