active_canvas 0.0.5 → 0.1.0

data/app/services/active_canvas/template_renderer/binding_resolver.rb

@@ -0,0 +1,138 @@
+require "cgi"
+
+module ActiveCanvas
+  class TemplateRenderer
+    # Walks page.bindings JSON, calls each data source, and returns a
+    # string-keyed Liquid assigns hash. Nothing reaches Liquid unless it is a
+    # Drop, an escaped scalar, or a Hash/Array made of those.
+    class BindingResolver
+      def initialize(bindings, silent_errors: false)
+        @bindings = bindings || {}
+        @silent_errors = silent_errors
+      end
+
+      def resolve
+        @bindings.each_with_object({}) do |(name, spec), acc|
+          acc[name.to_s] = resolve_one(spec)
+        end
+      end
+
+      # A JSON-friendly peek at one binding for the editor's Data panel: up to
+      # `rows` entries, Drops flattened to hashes, escaping undone so the
+      # author sees the real text and the real field names.
+      def sample(name, rows: 3)
+        spec = @bindings[name.to_s] || @bindings[name.to_sym]
+        raise DataSources::UnknownSource.new(name) unless spec
+
+        value = resolve_one(sample_spec(spec, rows))
+        value.is_a?(Array) ? value.first(rows).map { |v| plain(v) } : plain(value)
+      end
+
+      private
+
+      # Caps a collection or param-limited source's `limit` param to the row
+      # count so `sample` does not load 100 items to show 3.
+      def sample_spec(spec, rows)
+        return spec unless spec.is_a?(Hash)
+
+        params = spec["params"] || spec[:params]
+        return spec unless params
+
+        source_name = (spec["source"] || spec[:source]).to_s
+        cappable = Collection.exists?(slug: source_name) ||
+          (DataSources.registered?(source_name) && DataSources.lookup(source_name).params.key?(:limit))
+        return spec unless cappable
+
+        spec.merge("params" => params.to_h.merge("limit" => rows))
+      end
+
+      def resolve_one(spec)
+        raise DataSources::UnknownSource.new(spec.inspect) unless spec.is_a?(Hash)
+
+        source_name = (spec["source"] || spec[:source]).to_s
+        raise DataSources::UnknownSource.new(source_name) if source_name.blank?
+
+        params = spec["params"] || spec[:params] || {}
+        params = {} unless params.is_a?(Hash)
+
+        if source_name == "_literal"
+          to_liquid_value(spec.key?("value") ? spec["value"] : spec[:value])
+        elsif DataSources.registered?(source_name)
+          fetch(DataSources.lookup(source_name), params)
+        elsif (collection = Collection.find_by(slug: source_name))
+          to_liquid_value(CollectionSource.new(collection).resolve(params))
+        else
+          raise DataSources::UnknownSource.new(source_name)
+        end
+      end
+
+      # Silent sources swallow every StandardError, including InvalidParam and UnsafeData; preview mode still raises.
+      def fetch(source, params)
+        wrap(source.call(params.to_h.transform_keys(&:to_sym)), source)
+      rescue StandardError => e
+        raise unless @silent_errors && source.on_error == :silent
+        Rails.logger.warn("[ActiveCanvas] data source #{source.name.inspect} failed silently: #{e.class}: #{e.message}")
+        nil
+      end
+
+      def wrap(result, source)
+        if result.is_a?(Array) || result.is_a?(Set) || (result.respond_to?(:to_ary) && !result.is_a?(String))
+          result.map { |item| wrap_one(item, source) }
+        else
+          wrap_one(result, source)
+        end
+      end
+
+      def wrap_one(item, source)
+        return item if item.nil? || item.is_a?(::Liquid::Drop)
+        return to_liquid_value(source.drop_class.new(item), source: source) if source.drop_class
+
+        case item
+        when ::Liquid::Drop, String, Symbol, Numeric, true, false, nil, Date, Time, Hash, Array
+          to_liquid_value(item, source: source)
+        else
+          if source.auto_drop_config[:attributes].any?
+            AutoDrop.new(item, **source.auto_drop_config)
+          else
+            raise DataSources::UnsafeData.new(source.name, item.class.name)
+          end
+        end
+      end
+
+      # The only door into Liquid. Strings are escaped unless already html_safe,
+      # containers are walked, and anything else is refused.
+      def to_liquid_value(value, source: nil)
+        case value
+        when ::Liquid::Drop, Numeric, true, false, nil, Date, Time then value
+        when String then value.html_safe? ? value : ERB::Util.html_escape(value)
+        when Symbol then ERB::Util.html_escape(value.to_s)
+        when Hash   then value.each_with_object({}) { |(k, v), acc| acc[k.to_s] = to_liquid_value(v, source: source) }
+        when Array  then value.map { |v| to_liquid_value(v, source: source) }
+        else raise DataSources::UnsafeData.new(source&.name || :_literal, value.class.name)
+        end
+      end
+
+      # Flattens a resolved value for JSON. Drops expose only what Liquid
+      # would (`invokable_methods`, zero-arity), depth is capped so a drop
+      # that points back at itself cannot recurse, and anything outside the
+      # Liquid boundary is rendered as text, never serialized as an object.
+      def plain(value, depth = 0)
+        case value
+        when AutoDrop
+          depth > 2 ? value.to_s : plain(value.to_h, depth + 1)
+        when ::Liquid::Drop
+          return value.to_s if depth > 2
+          (value.class.invokable_methods.to_a - [ "to_liquid" ]).sort
+            .select { |m| value.method(m).arity.zero? }
+            .each_with_object({}) { |m, acc| acc[m.to_s] = plain(value.invoke_drop(m), depth + 1) }
+        when Hash   then value.each_with_object({}) { |(k, v), acc| acc[k.to_s] = plain(v, depth + 1) }
+        when Array  then value.first(3).map { |v| plain(v, depth + 1) }
+        when String then CGI.unescapeHTML(value.to_s)
+        when Symbol then value.to_s
+        when Numeric, true, false, nil, Date, Time then value
+        else value.to_s
+        end
+      end
+    end
+  end
+end

data/app/services/active_canvas/template_renderer/directive_expander.rb

@@ -0,0 +1,54 @@
+module ActiveCanvas
+  class TemplateRenderer
+    # Turns `data-ac-for="item in list"` and `data-ac-if="cond"` attributes
+    # into the Liquid block tags around their element. Attributes survive every
+    # HTML parser, so this is how the editor expresses loops and conditions
+    # without text tags that tables and sanitizers would move. The loop goes
+    # outside the condition. Text nodes inserted through the DOM are never
+    # foster-parented, so a loop on a <tr> stays inside its <tbody>.
+    class DirectiveExpander
+      FOR_RE = /\A\s*[A-Za-z_][\w.]*\s+in\s+\S.*\z/m
+
+      def initialize(source)
+        @source = source.to_s
+      end
+
+      def expand
+        return @source unless @source.include?("data-ac-for") || @source.include?("data-ac-if")
+
+        fragment = Nokogiri::HTML5.fragment(@source)
+        fragment.css("[data-ac-for], [data-ac-if]").each { |element| expand_element(element) }
+        fragment.to_html
+      end
+
+      private
+
+      def expand_element(element)
+        loop_expr = element.remove_attribute("data-ac-for")&.value
+        cond_expr = element.remove_attribute("data-ac-if")&.value
+
+        [ loop_expr, cond_expr ].compact.each do |expr|
+          raise Liquid::SyntaxError, "Invalid directive #{expr.inspect}: \"%}\" is not allowed" if expr.include?("%}")
+        end
+
+        # Siblings are inserted adjacent to the element, so the outer tag
+        # (for) goes in first on the left and last on the right.
+        if loop_expr
+          raise Liquid::SyntaxError, "Invalid data-ac-for #{loop_expr.inspect}: expected \"item in list\"" unless loop_expr.match?(FOR_RE)
+          element.add_previous_sibling(text("{% for #{loop_expr.strip} %}", element))
+          element.add_next_sibling(text("{% endfor %}", element))
+        end
+
+        if cond_expr
+          raise Liquid::SyntaxError, "Invalid data-ac-if: the condition is blank" if cond_expr.strip.empty?
+          element.add_previous_sibling(text("{% if #{cond_expr.strip} %}", element))
+          element.add_next_sibling(text("{% endif %}", element))
+        end
+      end
+
+      def text(content, element)
+        Nokogiri::XML::Text.new(content, element.document)
+      end
+    end
+  end
+end

data/app/services/active_canvas/template_renderer.rb

@@ -0,0 +1,160 @@
+require "cgi"
+
+module ActiveCanvas
+  class TemplateRenderer
+    MODES = %i[public preview].freeze
+    PUBLIC_FALLBACK = "<!-- dynamic block unavailable -->".freeze
+
+    def initialize(page, mode:)
+      raise ArgumentError, "mode must be one of #{MODES.inspect}" unless MODES.include?(mode)
+      @page = page
+      @mode = mode
+    end
+
+    def render
+      return @page.content.to_s unless @page.template_enabled?
+      render_dynamic
+    rescue StandardError => e
+      handle_error(e)
+    end
+
+    MAX_LOOP_COPIES = 10
+
+    # What the editor's live-data view needs: the text each chip displays in
+    # its first occurrence, and for every loop and condition element (in
+    # document order) how it rendered: the item count, the rendered copies
+    # after the first (so the editor can show them as ghosts), and whether a
+    # condition holds. Nested elements are measured inside the first copy of
+    # their enclosing loop. Lenient render; only text and rendered HTML that
+    # the editor treats as display-only leave this method.
+    def chip_values(decorated_html)
+      source, markers = mark_for_probe(decorated_html)
+      source = DirectiveExpander.new(source).expand
+      source = decode_entities_in_liquid_tags(source)
+
+      assigns  = BindingResolver.new(@page.bindings, silent_errors: true).resolve
+      template = Liquid::Template.parse(source, error_mode: :strict, line_numbers: true)
+      template.resource_limits.render_length_limit = ActiveCanvas.config.template_render_length_limit
+      template.resource_limits.render_score_limit  = ActiveCanvas.config.template_render_score_limit
+      template.resource_limits.assign_score_limit  = ActiveCanvas.config.template_assign_score_limit
+      rendered = template.render(assigns, exception_renderer: ->(e) { raise e if e.is_a?(Liquid::MemoryError); "" })
+
+      fragment = Nokogiri::HTML5.fragment(rendered)
+      values = fragment.css("[data-ac-id]").each_with_object({}) do |chip, acc|
+        acc[chip["data-ac-id"]] ||= chip.text.strip.truncate(200)
+      end
+      loops = markers[:loops].map do |marker|
+        copies = occurrences(fragment, marker)
+        { expr: marker[:expr], count: copies.size, copies: copies.drop(1).first(MAX_LOOP_COPIES).map { |c| strip_probe_markers(c).to_html } }
+      end
+      conds = markers[:conds].map { |marker| { expr: marker[:expr], shown: occurrences(fragment, marker).any? } }
+      { values: values, loops: loops, conds: conds }
+    rescue StandardError => e
+      { values: {}, loops: [], conds: [], error: e.message }
+    end
+
+    private
+
+    def preview?
+      @mode == :preview
+    end
+
+    # Preview is strict so authors see every mistake. Public is forgiving: an
+    # undefined variable, an unknown filter or a node that raises renders empty
+    # and the rest of the page survives; only syntax errors, resource limits
+    # and failures before rendering fall back to the comment. The canvas never
+    # holds rendered output, so there is nothing to undo here.
+    def render_dynamic
+      source = DirectiveExpander.new(@page.content.to_s).expand
+      source = decode_entities_in_liquid_tags(source)
+
+      assigns  = BindingResolver.new(@page.bindings, silent_errors: !preview?).resolve
+      template = Liquid::Template.parse(source, error_mode: :strict, line_numbers: true)
+      template.resource_limits.render_length_limit = ActiveCanvas.config.template_render_length_limit
+      template.resource_limits.render_score_limit  = ActiveCanvas.config.template_render_score_limit
+      template.resource_limits.assign_score_limit  = ActiveCanvas.config.template_assign_score_limit
+      rendered = if preview?
+        template.render!(assigns, strict_variables: true, strict_filters: true)
+      else
+        template.render(assigns, exception_renderer: method(:render_node_error))
+      end
+      ContentSanitizer.sanitize_html(rendered)
+    end
+
+    # WYSIWYG editors (GrapeJS) encode `<`, `>`, `&`, `"` as HTML entities when
+    # serializing text nodes, including inside Liquid tags the user typed. So
+    # `{% if a > b %}` becomes `{% if a &gt; b %}` after editor round-trip,
+    # which Liquid rejects with a syntax error. Decode entities inside tags
+    # before parsing so user-authored Liquid keeps working.
+    def decode_entities_in_liquid_tags(source)
+      source.gsub(/\{\{.+?\}\}|\{%.+?%\}/m) do |tag|
+        CGI.unescapeHTML(tag)
+      end
+    end
+
+    def handle_error(error)
+      if preview?
+        raise DataSources::TemplateRenderError.new(
+          error.message,
+          line: error.try(:line_number),
+          column: error.try(:column),
+          original: error
+        )
+      end
+
+      Rails.error.report(error, handled: true, source: "active_canvas", context: { page_id: @page.id })
+      Rails.logger.warn("[ActiveCanvas] dynamic page #{@page.id} render failed: #{error.class}: #{error.message}")
+      PUBLIC_FALLBACK
+    end
+
+    # Public mode: a single broken node renders empty and is reported; only a
+    # resource limit stops the whole render (re-raised so `render` falls back).
+    def render_node_error(error)
+      raise error if error.is_a?(Liquid::MemoryError)
+      Rails.error.report(error, handled: true, source: "active_canvas", context: { page_id: @page.id })
+      Rails.logger.warn("[ActiveCanvas] dynamic page #{@page.id} node failed: #{error.class}: #{error.message}")
+      ""
+    end
+
+    # Chips render their source (their text may hold a stale value in the
+    # editor). Loop and condition elements get a marker attribute with a
+    # document-order id and remember their nearest enclosing loop, so their
+    # copies can be found and scoped after the Liquid tags are consumed.
+    def mark_for_probe(html)
+      fragment = Nokogiri::HTML5.fragment(html)
+      fragment.css("[data-ac-id]").each { |chip| chip.content = chip["data-ac-source"] if chip["data-ac-source"] }
+
+      markers = { loops: [], conds: [] }
+      fragment.css("[data-ac-for], [data-ac-if]").each_with_index do |el, i|
+        parent = el.ancestors.find { |a| a["data-ac-probe-loop"] }
+        parent_loop = parent && parent["data-ac-probe-loop"]
+        if el["data-ac-for"]
+          el["data-ac-probe-loop"] = "l#{i}"
+          markers[:loops] << { id: "l#{i}", attr: "data-ac-probe-loop", expr: el["data-ac-for"], parent: parent_loop }
+        end
+        if el["data-ac-if"]
+          el["data-ac-probe-cond"] = "k#{i}"
+          markers[:conds] << { id: "k#{i}", attr: "data-ac-probe-cond", expr: el["data-ac-if"], parent: parent_loop }
+        end
+      end
+      [ fragment.to_html, markers ]
+    end
+
+    # The rendered copies of a marked element, inside the first copy of its
+    # enclosing loop (the whole page when it is not nested).
+    def occurrences(fragment, marker)
+      scope = marker[:parent] ? fragment.at_css("[data-ac-probe-loop=\"#{marker[:parent]}\"]") : fragment
+      return [] unless scope
+      scope.css("[#{marker[:attr]}=\"#{marker[:id]}\"]").to_a
+    end
+
+    def strip_probe_markers(element)
+      copy = element.dup
+      ([ copy ] + copy.css("[data-ac-probe-loop], [data-ac-probe-cond]").to_a).each do |el|
+        el.remove_attribute("data-ac-probe-loop")
+        el.remove_attribute("data-ac-probe-cond")
+      end
+      copy
+    end
+  end
+end

data/app/views/active_canvas/admin/collection_items/_field_input.html.erb

@@ -0,0 +1,40 @@
+<div class="form-group">
+  <label for="item_data_<%= field["id"] %>">
+    <%= field["label"] %><% if field["required"] %> <span style="color:var(--danger,#c00);">*</span><% end %>
+  </label>
+
+  <% name = "item[data][#{field["id"]}]" %>
+  <% dom_id = "item_data_#{field["id"]}" %>
+
+  <% case field["type"] %>
+  <% when "textarea" %>
+    <%= text_area_tag name, value, id: dom_id, class: "form-control", rows: 4 %>
+  <% when "rich_text" %>
+    <%= text_area_tag name, value, id: dom_id, class: "form-control", rows: 8 %>
+    <small>Raw HTML. Sanitized on save.</small>
+  <% when "number" %>
+    <%= number_field_tag name, value, id: dom_id, class: "form-control", step: "any" %>
+  <% when "boolean" %>
+    <%= hidden_field_tag name, "0" %>
+    <%= check_box_tag name, "1", ActiveModel::Type::Boolean.new.cast(value), id: dom_id %>
+  <% when "date" %>
+    <%= date_field_tag name, value, id: dom_id, class: "form-control" %>
+  <% when "select" %>
+    <%= select_tag name, options_for_select(Array(field["options"]), value), id: dom_id, class: "form-control", include_blank: true %>
+  <% when "media" %>
+    <% selected_media = media.find { |m| m.id.to_s == value.to_s } %>
+    <select name="<%= name %>" id="<%= dom_id %>" class="form-control" data-media-select>
+      <option value="">&mdash; none &mdash;</option>
+      <% media.each do |m| %>
+        <option value="<%= m.id %>" data-url="<%= m.url %>" <%= "selected" if value.to_s == m.id.to_s %>><%= m.filename %></option>
+      <% end %>
+    </select>
+    <% if selected_media&.url.present? %>
+      <%= image_tag selected_media.url, class: "ac-media-preview", alt: "", style: "max-height:80px;margin-top:.5rem;" %>
+    <% else %>
+      <img class="ac-media-preview" alt="" style="max-height:80px;margin-top:.5rem;display:none;">
+    <% end %>
+  <% else %>
+    <%= text_field_tag name, value, id: dom_id, class: "form-control" %>
+  <% end %>
+</div>

data/app/views/active_canvas/admin/collection_items/_form.html.erb

@@ -0,0 +1,28 @@
+<% form_url = @item.persisted? ? admin_collection_item_path(@collection, @item) : admin_collection_items_path(@collection) %>
+<%= form_with model: @item, url: form_url, method: (@item.persisted? ? :patch : :post) do |form| %>
+  <% if @item.errors.any? %>
+    <div class="error-messages">
+      <ul>
+        <% @item.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="form-group">
+    <%= form.label :slug, "Item slug (optional)" %>
+    <%= form.text_field :slug, class: "form-control" %>
+  </div>
+
+  <% @collection.fields.each do |field| %>
+    <%= render "field_input", field: field, value: (@item.draft_data || {})[field["id"]], media: @media %>
+  <% end %>
+
+  <div class="form-actions">
+    <%= form.submit "Save draft", class: "btn btn-primary" %>
+    <%= link_to "Cancel", admin_collection_items_path(@collection), class: "btn btn-secondary" %>
+  </div>
+<% end %>
+
+<%= javascript_include_tag "active_canvas/admin/media_select_preview" %>

data/app/views/active_canvas/admin/collection_items/edit.html.erb

@@ -0,0 +1,24 @@
+<% content_for :page_title, "Edit #{@collection.name} item" %>
+
+<div class="page-header">
+  <h2>Edit item</h2>
+  <div>
+    <%= link_to "History", history_admin_collection_item_path(@collection, @item), class: "btn btn-secondary" %>
+    <% if @item.status != "published" %>
+      <%= button_to "Publish", publish_admin_collection_item_path(@collection, @item), method: :patch, class: "btn btn-primary", form: { style: "display:inline" } %>
+    <% else %>
+      <% if @item.pending_changes? %>
+        <%= button_to "Publish changes", publish_admin_collection_item_path(@collection, @item), method: :patch, class: "btn btn-primary", form: { style: "display:inline" } %>
+      <% end %>
+      <%= button_to "Unpublish", unpublish_admin_collection_item_path(@collection, @item), method: :patch, class: "btn btn-secondary", form: { style: "display:inline" } %>
+    <% end %>
+  </div>
+</div>
+
+<% if @item.status == "published" && @item.pending_changes? %>
+  <p class="help-text" style="margin:0 0 1rem;">This item has draft changes that visitors do not see yet. Publish changes to make them live.</p>
+<% end %>
+
+<div class="card" style="padding:1.5rem;">
+  <%= render "form" %>
+</div>

data/app/views/active_canvas/admin/collection_items/history.html.erb

@@ -0,0 +1,34 @@
+<% content_for :page_title, "Item history" %>
+
+<div class="page-header">
+  <h2>History</h2>
+  <%= link_to "Back to item", edit_admin_collection_item_path(@collection, @item), class: "btn btn-secondary" %>
+</div>
+
+<div class="card">
+  <% if @versions.any? %>
+    <% labels = @collection.fields.each_with_object({}) { |f, acc| acc[f["id"]] = f["label"] } %>
+    <% @versions.each do |version| %>
+      <div style="padding:1rem;border-bottom:1px solid var(--border,#eee);">
+        <h3>Version <%= version.version_number %></h3>
+        <p>
+          <small>
+            <%= version.created_at.strftime("%Y-%m-%d %H:%M") %>
+            <% if version.changed_by.present? %> &middot; by <%= version.changed_by %><% end %>
+          </small>
+        </p>
+        <dl>
+          <% (version.data || {}).each do |field_id, value| %>
+            <dt><%= labels[field_id] || field_id %><% unless labels.key?(field_id) %> <small>(removed field)</small><% end %></dt>
+            <dd><%= truncate(value.to_s, length: 120) %></dd>
+          <% end %>
+        </dl>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="empty-state">
+      <h3>No versions yet</h3>
+      <p>Publishing this item will record a snapshot here.</p>
+    </div>
+  <% end %>
+</div>

data/app/views/active_canvas/admin/collection_items/index.html.erb

@@ -0,0 +1,63 @@
+<% content_for :page_title, "#{@collection.name} items" %>
+
+<div class="page-header">
+  <h2><%= @collection.name %> &middot; Items</h2>
+  <%= link_to "New item", new_admin_collection_item_path(@collection), class: "btn btn-primary" %>
+</div>
+
+<div class="card">
+  <%= form_with url: admin_collection_items_path(@collection), method: :get, local: true, style: "padding:1rem;" do %>
+    <%= label_tag :status, "Status" %>
+    <%= select_tag :status,
+          options_for_select([ [ "All", "" ], [ "Draft", "draft" ], [ "Published", "published" ] ], params[:status]),
+          class: "form-control", style: "display:inline-block;width:auto;", onchange: "this.form.requestSubmit ? this.form.requestSubmit() : this.form.submit()" %>
+    <%= submit_tag "Filter", class: "btn btn-sm btn-secondary" %>
+  <% end %>
+
+  <% if @items.any? %>
+    <table>
+      <thead>
+        <tr>
+          <% @leading_fields.each do |field| %>
+            <th><%= field["label"] %></th>
+          <% end %>
+          <th>Status</th>
+          <th>Updated</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @items.each do |item| %>
+          <tr>
+            <% @leading_fields.each do |field| %>
+              <td><%= collection_cell(item, field) %></td>
+            <% end %>
+            <td><%= collection_status_badge(item) %></td>
+            <td><%= item.updated_at.strftime("%Y-%m-%d %H:%M") %></td>
+            <td class="actions" style="white-space:nowrap;">
+              <%= link_to "Edit", edit_admin_collection_item_path(@collection, item), class: "btn btn-sm btn-secondary" %>
+              <% if item.status != "published" || item.pending_changes? %>
+                <%= button_to (item.status == "published" ? "Publish changes" : "Publish"), publish_admin_collection_item_path(@collection, item),
+                      method: :patch, class: "btn btn-sm btn-primary", form: { style: "display:inline" } %>
+              <% end %>
+              <% if item.status == "published" %>
+                <%= button_to "Unpublish", unpublish_admin_collection_item_path(@collection, item),
+                      method: :patch, class: "btn btn-sm btn-secondary", form: { style: "display:inline" } %>
+              <% end %>
+              <%= link_to "History", history_admin_collection_item_path(@collection, item), class: "btn btn-sm btn-secondary" %>
+              <%= button_to "Delete", admin_collection_item_path(@collection, item), method: :delete,
+                    class: "btn btn-sm btn-danger", form: { style: "display:inline" },
+                    onclick: "return confirm('Delete this item?')" %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <div class="empty-state">
+      <h3>No items yet</h3>
+      <p>Add an item to populate this collection.</p>
+      <%= link_to "New item", new_admin_collection_item_path(@collection), class: "btn btn-primary" %>
+    </div>
+  <% end %>
+</div>

data/app/views/active_canvas/admin/collection_items/new.html.erb

@@ -0,0 +1,9 @@
+<% content_for :page_title, "New #{@collection.name} item" %>
+
+<div class="page-header">
+  <h2>New item</h2>
+</div>
+
+<div class="card" style="padding:1.5rem;">
+  <%= render "form" %>
+</div>

data/app/views/active_canvas/admin/collections/_field_builder.html.erb

@@ -0,0 +1,35 @@
+<div class="form-group" id="ac-field-builder">
+  <label>Fields</label>
+  <p><small>Define the typed columns of this collection. Field IDs are generated from labels and never change once created.</small></p>
+
+  <script type="application/json" id="ac-fields-data"><%= raw json_escape(@collection.fields_json) %></script>
+  <ul id="ac-fields-list" style="list-style:none;padding:0;margin:0;"></ul>
+  <button type="button" id="ac-add-field-btn" class="btn btn-sm btn-secondary">Add field</button>
+
+  <%= form.hidden_field :fields_json, id: "ac-fields-json" %>
+
+  <template id="ac-field-row-template">
+    <li class="ac-field-row card" style="display:flex;gap:.5rem;align-items:center;padding:.5rem;margin-bottom:.5rem;">
+      <input type="hidden" data-field="id">
+      <span style="flex:2;display:flex;flex-direction:column;gap:2px;">
+        <input type="text" data-field="label" class="form-control" placeholder="Label">
+        <code data-field-id-display class="ac-field-id" style="font-size:.7rem;opacity:.7;" title="Use this in the page: {{ item.<id> }}"></code>
+      </span>
+      <select data-field="type" class="form-control" style="flex:1;">
+        <option value="text">Text</option>
+        <option value="textarea">Textarea</option>
+        <option value="rich_text">Rich text (HTML)</option>
+        <option value="number">Number</option>
+        <option value="boolean">Boolean</option>
+        <option value="date">Date</option>
+        <option value="select">Select</option>
+        <option value="media">Media</option>
+      </select>
+      <input type="text" data-field="options" class="form-control ac-field-options" placeholder="a, b, c" style="flex:1;" hidden>
+      <label style="white-space:nowrap;"><input type="checkbox" data-field="required"> Required</label>
+      <button type="button" data-move="up" class="btn btn-sm btn-secondary" title="Move up">&uarr;</button>
+      <button type="button" data-move="down" class="btn btn-sm btn-secondary" title="Move down">&darr;</button>
+      <button type="button" data-remove class="btn btn-sm btn-danger" title="Remove">&times;</button>
+    </li>
+  </template>
+</div>

data/app/views/active_canvas/admin/collections/_form.html.erb

@@ -0,0 +1,31 @@
+<%= form_with model: [ :admin, @collection ] do |form| %>
+  <% if @collection.errors.any? %>
+    <div class="error-messages">
+      <ul>
+        <% @collection.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="form-group">
+    <%= form.label :name %>
+    <%= form.text_field :name, class: "form-control" %>
+  </div>
+
+  <div class="form-group">
+    <%= form.label :slug %>
+    <%= form.text_field :slug, class: "form-control" %>
+    <small>The Liquid source name used in <code>{% for x in slug %}</code>. Leave blank to derive from the name.</small>
+  </div>
+
+  <%= render "field_builder", form: form %>
+
+  <div class="form-actions">
+    <%= form.submit "Save collection", class: "btn btn-primary" %>
+    <%= link_to "Cancel", admin_collections_path, class: "btn btn-secondary" %>
+  </div>
+<% end %>
+
+<%= javascript_include_tag "active_canvas/admin/field_builder" %>

data/app/views/active_canvas/admin/collections/edit.html.erb

@@ -0,0 +1,10 @@
+<% content_for :page_title, @collection.name %>
+
+<div class="page-header">
+  <h2>Edit collection</h2>
+  <%= link_to "Manage items", admin_collection_items_path(@collection), class: "btn btn-secondary" %>
+</div>
+
+<div class="card" style="padding:1.5rem;">
+  <%= render "form" %>
+</div>