journeybook 0.1.6.pre.alpha

data/app/views/journeybook/admin/ai_pages/_draft_form.html.erb

@@ -0,0 +1,73 @@
+<%= form_with model: [:admin, page], class: "jb-form" do |form| %>
+  <%= render "journeybook/admin/shared/errors", record: page %>
+  <%= form.hidden_field :status, value: "draft" %>
+  <%= hidden_field_tag :template_key, selected_template&.key %>
+
+  <div class="jb-grid jb-grid-2">
+    <section class="jb-card jb-form">
+      <div class="jb-fields">
+        <div class="jb-field">
+          <%= form.label :site_id %>
+          <%= form.collection_select :site_id, sites, :id, :name %>
+        </div>
+        <div class="jb-field">
+          <%= form.label :title %>
+          <%= form.text_field :title, required: true %>
+        </div>
+        <div class="jb-field">
+          <%= form.label :page_type %>
+          <%= form.select :page_type, Journeybook::Page::PAGE_TYPES %>
+        </div>
+        <div class="jb-field">
+          <%= form.label :path %>
+          <%= form.text_field :path, required: selected_template&.path_prefix.blank?, placeholder: selected_template&.path_hint || "/about" %>
+          <% if selected_template&.path_prefix %>
+            <small class="jb-help">Leave blank to generate a path from the title.</small>
+          <% end %>
+        </div>
+        <div class="jb-field">
+          <%= form.label :author_name %>
+          <%= form.text_field :author_name, placeholder: "Optional author byline" %>
+        </div>
+        <div class="jb-field">
+          <%= form.label :topic %>
+          <%= form.text_field :topic, placeholder: "Optional topic, e.g. HR" %>
+        </div>
+        <div class="jb-field">
+          <%= form.label :locale %>
+          <%= form.text_field :locale, required: true %>
+        </div>
+        <div class="jb-field">
+          <%= form.label :meta_title %>
+          <%= form.text_field :meta_title %>
+        </div>
+      </div>
+
+      <div class="jb-field jb-field-short">
+        <%= form.label :excerpt %>
+        <%= form.text_area :excerpt %>
+        <small class="jb-help">Short summary for blog cards, RSS, and SEO.</small>
+      </div>
+
+      <div class="jb-field jb-field-short">
+        <%= form.label :meta_description %>
+        <%= form.text_area :meta_description %>
+      </div>
+
+      <div class="jb-field jb-markdown">
+        <%= form.label :markdown, "Page content" %>
+        <%= form.text_area :markdown, required: true, spellcheck: false %>
+      </div>
+
+      <div class="jb-actions">
+        <%= form.submit "Save page", class: "jb-button" %>
+        <%= link_to "Back", admin_pages_path, class: "jb-button jb-button-secondary" %>
+      </div>
+    </section>
+
+    <div class="jb-reference-stack">
+      <%= render "journeybook/admin/components/reference" %>
+      <%= render "journeybook/admin/media_assets/reference" %>
+    </div>
+  </div>
+<% end %>

data/app/views/journeybook/admin/ai_pages/new.html.erb

@@ -0,0 +1,43 @@
+<header class="jb-header">
+  <div>
+    <p class="jb-eyebrow">AI Builder</p>
+    <h1 class="jb-title">Generate an AI-powered page</h1>
+    <p class="jb-subtitle">Describe the page, choose an approved template when needed, and review the generated draft before saving it.</p>
+  </div>
+  <%= link_to "Manage style prompts", admin_ai_style_prompts_path, class: "jb-button jb-button-secondary" %>
+</header>
+
+<%= form_with url: admin_ai_page_path, scope: :page, class: "jb-form" do |form| %>
+  <%= render "journeybook/admin/shared/errors", record: @page %>
+
+  <section class="jb-card jb-form jb-ai-card">
+    <div class="jb-field jb-prompt">
+      <label for="prompt">Prompt</label>
+      <textarea id="prompt" name="prompt" placeholder="Build a landing page for ..."><%= @prompt %></textarea>
+    </div>
+    <div class="jb-fields jb-ai-fields">
+       <div class="jb-field"><label for="ai_style_prompt_id">Style prompt</label><%= select_tag :ai_style_prompt_id, options_from_collection_for_select(@style_prompts, :id, :name, @style_prompt&.id), include_blank: "No style prompt" %></div>
+       <div class="jb-field"><label for="template_key">Template</label><%= select_tag :template_key, options_from_collection_for_select(@templates, :key, :name, @selected_template&.key), include_blank: "General page" %></div>
+       <div class="jb-field"><%= form.label :site_id %><%= form.collection_select :site_id, @sites, :id, :name %></div>
+      <div class="jb-field"><%= form.label :title %><%= form.text_field :title %></div>
+      <div class="jb-field"><%= form.label :path %><%= form.text_field :path, placeholder: "/new-page" %></div>
+      <div class="jb-field"><%= form.label :locale %><%= form.text_field :locale %></div>
+    </div>
+    <div class="jb-actions">
+      <%= form.submit "Generate page", class: "jb-button" %>
+    </div>
+  </section>
+<% end %>
+
+<% if @page.markdown.present? %>
+  <section class="jb-section-lg">
+    <header class="jb-header">
+      <div>
+        <p class="jb-eyebrow">Generated page</p>
+        <h2>Review and save</h2>
+        <p class="jb-subtitle">This draft has not been saved yet. Review the page content, then save it.</p>
+      </div>
+    </header>
+    <%= render "draft_form", page: @page, sites: @sites, selected_template: @selected_template %>
+  </section>
+<% end %>

data/app/views/journeybook/admin/ai_style_prompts/_form.html.erb

@@ -0,0 +1,16 @@
+<%= form_with model: [:admin, style_prompt], class: "jb-form jb-card" do |form| %>
+  <%= render "journeybook/admin/shared/errors", record: style_prompt %>
+
+  <div class="jb-field">
+    <%= form.label :name %>
+    <%= form.text_field :name, required: true, placeholder: "Feature page" %>
+  </div>
+  <div class="jb-field jb-prompt">
+    <%= form.label :prompt, "Style instructions" %>
+    <%= form.text_area :prompt, required: true, placeholder: "Describe the tone, structure, components, and any rules for this kind of page." %>
+  </div>
+  <div class="jb-actions">
+    <%= form.submit class: "jb-button" %>
+    <%= link_to "Back", admin_ai_style_prompts_path, class: "jb-button jb-button-secondary" %>
+  </div>
+<% end %>

data/app/views/journeybook/admin/ai_style_prompts/edit.html.erb

@@ -0,0 +1,2 @@
+<header class="jb-header"><div><p class="jb-eyebrow">AI Builder</p><h1 class="jb-title">Edit style prompt</h1></div></header>
+<%= render "form", style_prompt: @style_prompt %>

data/app/views/journeybook/admin/ai_style_prompts/index.html.erb

@@ -0,0 +1,26 @@
+<header class="jb-header">
+  <div>
+    <p class="jb-eyebrow">AI Builder</p>
+    <h1 class="jb-title">Style prompts</h1>
+    <p class="jb-subtitle">Create reusable instructions for specific page types, such as feature pages or articles.</p>
+  </div>
+  <div class="jb-actions">
+    <%= link_to "Back to AI Builder", new_admin_ai_page_path, class: "jb-button jb-button-secondary" %>
+    <%= link_to "New style prompt", new_admin_ai_style_prompt_path, class: "jb-button" %>
+  </div>
+</header>
+
+<section class="jb-card jb-card-flush">
+  <table class="jb-table">
+    <thead><tr><th>Name</th><th>Instructions</th><th></th></tr></thead>
+    <tbody>
+      <% @style_prompts.each do |style_prompt| %>
+        <tr>
+          <td><strong><%= style_prompt.name %></strong></td>
+          <td><%= truncate(style_prompt.prompt, length: 70) %></td>
+          <td><div class="jb-actions"><%= link_to "Edit", edit_admin_ai_style_prompt_path(style_prompt), class: "jb-button jb-button-secondary" %><%= button_to "Delete", admin_ai_style_prompt_path(style_prompt), method: :delete, class: "jb-button jb-button-danger", data: { turbo_confirm: "Delete this style prompt?" } %></div></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</section>

data/app/views/journeybook/admin/ai_style_prompts/new.html.erb

@@ -0,0 +1,2 @@
+<header class="jb-header"><div><p class="jb-eyebrow">AI Builder</p><h1 class="jb-title">New style prompt</h1></div></header>
+<%= render "form", style_prompt: @style_prompt %>

data/app/views/journeybook/admin/components/_component.html.erb

@@ -0,0 +1,17 @@
+<div class="jb-component jb-card">
+  <div>
+    <code>{{ <%= component.name %> }}</code>
+    <% if component.metadata[:description].present? %>
+      <p class="jb-subtitle"><%= component.metadata[:description] %></p>
+    <% end %>
+  </div>
+  <% props = component.normalized_props %>
+  <% if props.present? %>
+    <div>
+      <% props.each do |name, prop| %>
+        <span class="jb-badge"><%= name %>: <%= prop[:description].presence || prop[:type].to_s.humanize.downcase %></span>
+      <% end %>
+    </div>
+  <% end %>
+  <pre class="jb-code"><%= "{{ #{component.name} #{props.keys.map { |key| %(#{key}=\"...\") }.join(" ")} }}" %></pre>
+</div>

data/app/views/journeybook/admin/components/_reference.html.erb

@@ -0,0 +1,9 @@
+<aside class="jb-card jb-reference">
+  <p class="jb-eyebrow">Component reference</p>
+  <p class="jb-subtitle">Paste snippets into the Markdown file. Components render through the host app.</p>
+  <div class="jb-grid jb-reference-list">
+    <% Journeybook.components.for_site(current_site).each do |component| %>
+      <%= render "journeybook/admin/components/component", component: component %>
+    <% end %>
+  </div>
+</aside>

data/app/views/journeybook/admin/components/index.html.erb

@@ -0,0 +1,46 @@
+<% content_for :main_class, "jb-main-wide" %>
+
+<header class="jb-header">
+  <div>
+    <p class="jb-eyebrow">Components</p>
+    <h1 class="jb-title">Design library</h1>
+    <p class="jb-subtitle">These registered components are available in Markdown and in the AI page builder.</p>
+  </div>
+</header>
+
+<section class="jb-component-library">
+  <aside class="jb-card jb-component-picker" aria-label="Components">
+    <p class="jb-eyebrow">Select component</p>
+    <nav class="jb-component-nav">
+      <% @components.each do |component| %>
+        <%= link_to admin_components_path(component: component.name, site_id: current_site&.id), class: ("is-active" if component == @selected_component), "aria-current": ("page" if component == @selected_component) do %>
+          <strong><%= component.name %></strong>
+          <% if component.metadata[:description].present? %>
+            <span><%= component.metadata[:description] %></span>
+          <% end %>
+        <% end %>
+      <% end %>
+    </nav>
+  </aside>
+
+  <div class="jb-grid">
+    <% if @selected_component %>
+      <section class="jb-card jb-component-preview-card">
+        <header class="jb-header">
+          <div>
+            <p class="jb-eyebrow">Preview</p>
+            <h2 class="jb-card-title"><code>{{ <%= @selected_component.name %> }}</code></h2>
+          </div>
+        </header>
+
+        <iframe class="jb-preview jb-component-preview" src="<%= admin_component_preview_path(@selected_component.name, site_id: current_site&.id) %>" title="<%= @selected_component.name %> preview"></iframe>
+      </section>
+
+      <%= render "component", component: @selected_component %>
+    <% else %>
+      <section class="jb-card">
+        <p class="jb-subtitle">No components are registered for the current site.</p>
+      </section>
+    <% end %>
+  </div>
+</section>

data/app/views/journeybook/admin/components/preview.html.erb

@@ -0,0 +1,13 @@
+<% content_for :title, "#{@selected_component&.name || "Component"} preview" %>
+<% content_for :journeybook_component_preview, true %>
+
+<article class="journeybook-page journeybook-component-preview">
+  <% if @preview_error.present? %>
+    <section>
+      <h1>Preview could not be rendered.</h1>
+      <p><%= @preview_error %></p>
+    </section>
+  <% else %>
+    <%= @preview_html.html_safe %>
+  <% end %>
+</article>

data/app/views/journeybook/admin/dashboard/show.html.erb

@@ -0,0 +1,34 @@
+<header class="jb-header">
+  <div>
+    <p class="jb-eyebrow">Admin</p>
+    <h1 class="jb-title">Journeybook</h1>
+    <p class="jb-subtitle">Create Markdown pages, compose them with registered Ruby components, and generate AI drafts from the same component library.</p>
+  </div>
+  <%= link_to "New page", new_admin_page_path, class: "jb-button" %>
+</header>
+
+<section class="jb-grid jb-grid-3">
+  <div class="jb-card jb-stat">
+    <strong><%= @site_count %></strong>
+    <span class="jb-stat-label">Sites</span>
+  </div>
+  <div class="jb-card jb-stat">
+    <strong><%= @published_page_count %>/<%= @page_count %></strong>
+    <span class="jb-stat-label">Published pages</span>
+  </div>
+  <div class="jb-card jb-stat">
+    <strong><%= @component_count %></strong>
+    <span class="jb-stat-label">Components</span>
+  </div>
+</section>
+
+<section class="jb-card jb-section">
+  <div class="jb-header">
+    <div>
+      <p class="jb-eyebrow">Recent</p>
+      <h2 class="jb-card-title">Recently updated pages</h2>
+    </div>
+    <%= link_to "AI Builder", new_admin_ai_page_path, class: "jb-button jb-button-secondary" %>
+  </div>
+  <%= render "journeybook/admin/pages/table", pages: @recent_pages %>
+</section>

data/app/views/journeybook/admin/media_assets/_reference.html.erb

@@ -0,0 +1,16 @@
+<aside class="jb-card jb-reference jb-media-reference">
+  <p class="jb-eyebrow">Image library</p>
+  <p class="jb-subtitle">Paste image URLs into component props.</p>
+  <div class="jb-grid jb-reference-list">
+    <% Journeybook::MediaAsset.order(created_at: :desc).limit(12).each do |asset| %>
+      <div class="jb-media-reference-item">
+        <%= image_tag asset.public_url, alt: asset.alt_text.presence || asset.title, class: "jb-media-reference-thumb" %>
+        <strong><%= asset.title %></strong>
+        <code>image_url=&quot;<%= asset.public_url %>&quot;</code>
+        <% if asset.alt_text.present? %>
+          <code>image_alt=&quot;<%= asset.alt_text %>&quot;</code>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</aside>

data/app/views/journeybook/admin/media_assets/index.html.erb

@@ -0,0 +1,43 @@
+<header class="jb-header">
+  <div>
+    <p class="jb-eyebrow">Library</p>
+    <h1 class="jb-title">Image library</h1>
+    <p class="jb-subtitle">Global public images uploaded to S3 for use in Journeybook components and AI-generated drafts.</p>
+  </div>
+  <%= link_to "Upload image", new_admin_media_asset_path, class: "jb-button" %>
+</header>
+
+<% if @media_assets.any? %>
+  <section class="jb-media-grid">
+    <% @media_assets.each do |asset| %>
+      <article class="jb-card jb-media-card">
+        <%= image_tag asset.public_url, alt: asset.alt_text.presence || asset.title, class: "jb-media-thumb" %>
+        <div class="jb-media-body">
+          <h2 class="jb-card-title"><%= asset.title %></h2>
+          <p class="jb-subtitle"><%= asset.original_filename %></p>
+          <% if asset.alt_text.present? %>
+            <p><strong>Alt:</strong> <%= asset.alt_text %></p>
+          <% end %>
+          <% if asset.tags.present? %>
+            <p><strong>Tags:</strong> <%= asset.tags %></p>
+          <% end %>
+          <div class="jb-media-snippets">
+            <code>image_url=&quot;<%= asset.public_url %>&quot;</code>
+            <% if asset.alt_text.present? %>
+              <code>image_alt=&quot;<%= asset.alt_text %>&quot;</code>
+            <% end %>
+          </div>
+          <div class="jb-actions">
+            <%= link_to "Open", asset.public_url, class: "jb-button jb-button-secondary", target: "_blank", rel: "noopener" %>
+            <%= button_to "Delete", admin_media_asset_path(asset), method: :delete, class: "jb-button jb-button-danger", form: { data: { turbo_confirm: "Delete this image from S3 and the library?" } } %>
+          </div>
+        </div>
+      </article>
+    <% end %>
+  </section>
+<% else %>
+  <section class="jb-card">
+    <h2 class="jb-card-title">No images yet</h2>
+    <p class="jb-subtitle">Upload the first image to make it available to editors and the AI Builder.</p>
+  </section>
+<% end %>

data/app/views/journeybook/admin/media_assets/new.html.erb

@@ -0,0 +1,41 @@
+<header class="jb-header">
+  <div>
+    <p class="jb-eyebrow">Library</p>
+    <h1 class="jb-title">Upload image</h1>
+  </div>
+</header>
+
+<%= form_with model: [:admin, @media_asset], class: "jb-form jb-card", multipart: true do |form| %>
+  <%= render "journeybook/admin/shared/errors", record: @media_asset %>
+
+  <div class="jb-field">
+    <%= form.label :file, "Image file" %>
+    <%= form.file_field :file, accept: Journeybook::MediaAsset::IMAGE_CONTENT_TYPES.join(","), required: true %>
+    <small class="jb-help">Supported formats: PNG, JPEG, WebP, GIF, and SVG.</small>
+  </div>
+
+  <div class="jb-fields">
+    <div class="jb-field">
+      <%= form.label :title %>
+      <%= form.text_field :title, placeholder: "Defaults to the filename" %>
+    </div>
+    <div class="jb-field">
+      <%= form.label :alt_text %>
+      <%= form.text_field :alt_text %>
+    </div>
+    <div class="jb-field">
+      <%= form.label :tags %>
+      <%= form.text_field :tags, placeholder: "hero, team, product" %>
+    </div>
+  </div>
+
+  <div class="jb-field jb-field-short">
+    <%= form.label :description %>
+    <%= form.text_area :description %>
+  </div>
+
+  <div class="jb-actions">
+    <%= form.submit "Upload image", class: "jb-button" %>
+    <%= link_to "Back", admin_media_assets_path, class: "jb-button jb-button-secondary" %>
+  </div>
+<% end %>

data/app/views/journeybook/admin/navigation_items/_form.html.erb

@@ -0,0 +1,46 @@
+<%= form_with model: [:admin, menu, item], class: "jb-form jb-card" do |form| %>
+  <%= render "journeybook/admin/shared/errors", record: item %>
+  <% link_type = item.page_id.present? ? "internal" : "external" %>
+  <div class="jb-fields">
+    <div class="jb-field"><%= form.label :label %><%= form.text_field :label, required: true %></div>
+    <div class="jb-field">
+      <label for="navigation_link_type">Link type</label>
+      <%= select_tag :navigation_link_type, options_for_select([["Journeybook page", "internal"], ["External URL", "external"]], link_type), id: "navigation_link_type", data: { navigation_link_type: true } %>
+    </div>
+    <div class="jb-field" data-navigation-internal <%= "hidden" if link_type == "external" %>>
+      <%= form.label :page_id, "Page" %>
+      <%= form.collection_select :page_id, pages, :id, :title, { include_blank: "Select a page" }, disabled: link_type == "external" %>
+    </div>
+    <div class="jb-field" data-navigation-external <%= "hidden" if link_type == "internal" %>>
+      <%= form.label :external_url, "External URL" %>
+      <%= form.text_field :external_url, placeholder: "https://example.com or /#contact", disabled: link_type == "internal" %>
+    </div>
+    <div class="jb-field"><%= form.label :description %><%= form.text_area :description, rows: 3 %></div>
+    <div></div>
+    <div>
+      <label class="jb-checkbox-field"><%= form.check_box :visible %><span>Visible</span></label>
+      <label class="jb-checkbox-field"><%= form.check_box :open_in_new_window %><span>Open in new window</span></label>
+    </div>
+  </div>
+  <div class="jb-actions"><%= form.submit class: "jb-button" %><%= link_to "Back", edit_admin_navigation_menu_path(menu), class: "jb-button jb-button-secondary" %></div>
+<% end %>
+
+<%= javascript_tag nonce: true do %>
+  (() => {
+    const type = document.querySelector("[data-navigation-link-type]");
+    const internal = document.querySelector("[data-navigation-internal]");
+    const external = document.querySelector("[data-navigation-external]");
+    if (!type || !internal || !external) return;
+
+    const sync = () => {
+      const internalLink = type.value === "internal";
+      internal.hidden = !internalLink;
+      external.hidden = internalLink;
+      internal.querySelectorAll("select, input").forEach((field) => { field.disabled = !internalLink; });
+      external.querySelectorAll("select, input").forEach((field) => { field.disabled = internalLink; });
+    };
+
+    type.addEventListener("change", sync);
+    sync();
+  })();
+<% end %>

data/app/views/journeybook/admin/navigation_items/edit.html.erb

@@ -0,0 +1,2 @@
+<header class="jb-header"><div><p class="jb-eyebrow"><%= @menu.title %></p><h1 class="jb-title">Edit menu item</h1></div><%= button_to "Delete item", admin_navigation_menu_navigation_item_path(@menu, @item), method: :delete, class: "jb-button jb-button-danger", data: { turbo_confirm: "Delete this item?" } %></header>
+<%= render "form", menu: @menu, item: @item, pages: @pages %>

data/app/views/journeybook/admin/navigation_items/new.html.erb

@@ -0,0 +1,2 @@
+<header class="jb-header"><div><p class="jb-eyebrow"><%= @menu.title %></p><h1 class="jb-title">Add menu item</h1></div></header>
+<%= render "form", menu: @menu, item: @item, pages: @pages %>

data/app/views/journeybook/admin/navigation_menus/_form.html.erb

@@ -0,0 +1,10 @@
+<%= form_with model: [:admin, menu], class: "jb-form jb-card" do |form| %>
+  <%= render "journeybook/admin/shared/errors", record: menu %>
+  <div class="jb-fields">
+    <div class="jb-field"><%= form.label :title %><%= form.text_field :title, required: true, placeholder: "Footer: Product" %></div>
+    <div class="jb-field"><%= form.label :key, "Layout key" %><%= form.text_field :key, required: true, placeholder: "footer_product" %></div>
+    <div class="jb-field"><%= form.label :position %><%= form.number_field :position, min: 0 %></div>
+  </div>
+  <p class="jb-subtitle">The host layout renders a menu by its key. Use stable keys such as <code>header_learn</code> or <code>footer_product</code>.</p>
+  <div class="jb-actions"><%= form.submit class: "jb-button" %><%= link_to "Back", admin_navigation_menus_path, class: "jb-button jb-button-secondary" %></div>
+<% end %>

data/app/views/journeybook/admin/navigation_menus/edit.html.erb

@@ -0,0 +1,38 @@
+<header class="jb-header">
+  <div><p class="jb-eyebrow">Navigation</p><h1 class="jb-title"><%= @menu.title %></h1></div>
+  <%= button_to "Delete menu", admin_navigation_menu_path(@menu), method: :delete, class: "jb-button jb-button-danger", data: { turbo_confirm: "Delete this menu and all of its items?" } %>
+</header>
+
+<%= render "form", menu: @menu %>
+
+<section class="jb-section-lg">
+  <div class="jb-header">
+    <div>
+      <h2 class="jb-card-title">Menu items</h2>
+      <p class="jb-subtitle">Items can link to a Journeybook page or to an external URL. Drag the handle to reorder.</p>
+    </div>
+    <%= link_to "Add item", new_admin_navigation_menu_navigation_item_path(@menu), class: "jb-button" %>
+  </div>
+
+  <div class="jb-card jb-card-flush">
+    <% if @items.any? %>
+      <div class="jb-sortable-list" data-sortable-list data-sortable-url="<%= reorder_admin_navigation_menu_navigation_items_path(@menu) %>" data-sortable-param="item_ids">
+        <% @items.each do |item| %>
+          <div class="jb-sortable-item" data-sortable-item data-sortable-id="<%= item.id %>" draggable="true">
+            <%= render "journeybook/admin/shared/drag_handle" %>
+            <div class="jb-sortable-item-body">
+              <strong><%= item.label %></strong>
+              <% if item.description.present? %><span class="jb-subtitle"><%= item.description %></span><% end %>
+              <small><%= item.page ? item.page.path : item.external_url %> · <%= item.visible? ? "Visible" : "Hidden" %></small>
+            </div>
+            <div class="jb-actions">
+              <%= link_to "Edit", edit_admin_navigation_menu_navigation_item_path(@menu, item), class: "jb-button jb-button-secondary" %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <p class="jb-subtitle">This menu has no items yet.</p>
+    <% end %>
+  </div>
+</section>

data/app/views/journeybook/admin/navigation_menus/index.html.erb

@@ -0,0 +1,28 @@
+<header class="jb-header">
+  <div>
+    <p class="jb-eyebrow">Navigation</p>
+    <h1 class="jb-title">Navigation menus</h1>
+    <p class="jb-subtitle">Create menu slots used by the host layout, then add pages or external links.</p>
+  </div>
+  <%= link_to "New menu", new_admin_navigation_menu_path, class: "jb-button" %>
+</header>
+
+<section class="jb-card jb-card-flush">
+  <% if @menus.any? %>
+    <table class="jb-table">
+      <thead><tr><th>Title</th><th>Key</th><th>Items</th><th></th></tr></thead>
+      <tbody>
+        <% @menus.each do |menu| %>
+          <tr>
+            <td><strong><%= menu.title %></strong></td>
+            <td><code><%= menu.key %></code></td>
+            <td><%= menu.items.count %></td>
+            <td><%= link_to "Edit", edit_admin_navigation_menu_path(menu), class: "jb-button jb-button-secondary" %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% else %>
+    <p class="jb-subtitle">No navigation menus have been configured for this site.</p>
+  <% end %>
+</section>

data/app/views/journeybook/admin/navigation_menus/new.html.erb

@@ -0,0 +1,2 @@
+<header class="jb-header"><div><p class="jb-eyebrow">Navigation</p><h1 class="jb-title">New menu</h1></div></header>
+<%= render "form", menu: @menu %>

data/app/views/journeybook/admin/pages/_collection_field.html.erb

@@ -0,0 +1,58 @@
+<% items = JSON.parse(value.presence || "[]") rescue [] %>
+<div class="jb-collection" data-collection data-collection-min="<%= prop[:min] %>" data-collection-max="<%= prop[:max] %>" data-collection-schema="<%= ERB::Util.json_escape(prop[:item].to_json) %>" data-collection-pages="<%= ERB::Util.json_escape(@linkable_pages.map { |page| { title: page.title, path: page.path, value: "journeybook://page/#{page.id}" } }.to_json) %>">
+  <input type="hidden" name="component_props[<%= name %>]" id="component_props_<%= name %>" value="<%= items.to_json %>" data-collection-input>
+  <div class="jb-collection-items" data-collection-items>
+    <% items.each_with_index do |item, index| %>
+      <fieldset class="jb-collection-item" data-collection-item draggable="true">
+        <legend><%= prop[:label] %> <%= index + 1 %></legend>
+        <button type="button" class="jb-collection-remove" data-collection-remove aria-label="Remove <%= prop[:label].downcase %> <%= index + 1 %>" title="Remove">×</button>
+        <%= render "journeybook/admin/shared/drag_handle" %>
+        <div class="jb-collection-fields">
+          <% prop[:item].each do |item_name, item_prop| %>
+            <% item_value = item[item_name.to_s] || item[item_name.to_sym] %>
+            <label><%= item_prop[:label] %>
+              <% if item_prop[:type] == :long_text %>
+                <textarea rows="3" data-collection-field data-collection-key="<%= item_name %>"><%= item_value %></textarea>
+              <% elsif item_prop[:type] == :select %>
+                <select data-collection-field data-collection-key="<%= item_name %>"><%= options_for_select(item_prop[:options], item_value) %></select>
+              <% elsif item_prop[:type] == :image %>
+                <% icon_parts = item_value.to_s.match(%r{\Aicon:([a-z0-9-]+):([a-z0-9-]+):([a-z0-9-]+)\z})&.captures %>
+                <input type="hidden" value="<%= item_value %>" data-collection-field data-collection-key="<%= item_name %>">
+                <% if @media_assets.any? %>
+                  <button type="button" class="jb-image-picker-trigger" data-image-picker-open>
+                    <% if item_value.present? && !icon_parts %><%= image_tag item_value, alt: "", class: "jb-image-picker-preview" %><% end %>
+                    <span data-image-picker-label><%= item_value.present? ? "Change image" : "Select image" %></span>
+                  </button>
+                <% else %>
+                  <%= link_to "Add an image to the library", admin_media_assets_path, class: "jb-link-button" %>
+                <% end %>
+                <% if item_prop[:icons] %>
+                  <div class="jb-icon-editor" data-icon-editor>
+                    <select data-icon-mode><option value="image" <%= "selected" unless icon_parts %>>Image</option><option value="icon" <%= "selected" if icon_parts %>>Font Awesome icon</option></select>
+                    <input type="text" value="<%= icon_parts&.last %>" placeholder="user-cowboy" data-icon-identifier>
+                    <select data-icon-style><%= options_for_select(item_prop[:icons][:styles], icon_parts&.first) %></select>
+                    <select data-icon-color><%= options_for_select(item_prop[:icons][:colors], icon_parts&.second) %></select>
+                  </div>
+                <% end %>
+              <% elsif item_prop[:type] == :url %>
+                <% page_id = item_value.to_s[%r{\Ajourneybook://page/(\d+)\z}, 1] %>
+                <div class="jb-url-editor" data-collection-url-editor>
+                  <input type="hidden" value="<%= item_value %>" data-collection-field data-collection-key="<%= item_name %>" data-url-value>
+                  <select data-url-kind><option value="internal" <%= "selected" if page_id %>>Journeybook page</option><option value="external" <%= "selected" unless page_id %>>External URL</option></select>
+                  <select data-url-page data-url-internal><option value="">Select a page</option><%= options_for_select(@linkable_pages.map { |page| [ "#{page.title} (#{page.path})", "journeybook://page/#{page.id}" ] }, "journeybook://page/#{page_id}") %></select>
+                  <input type="text" value="<%= page_id ? "" : item_value %>" placeholder="https://example.com" data-url-external data-url-external-input>
+                  <select data-collection-field data-collection-key="<%= item_name %>_target" data-url-target><option value="same_window">Current window</option><option value="open_new_window" <%= "selected" if item["#{item_name}_target"] == "open_new_window" || item["#{item_name}_target".to_sym] == "open_new_window" %>>New window</option></select>
+                </div>
+              <% else %>
+                <input type="text" value="<%= item_value %>" data-collection-field data-collection-key="<%= item_name %>">
+              <% end %>
+            </label>
+          <% end %>
+        </div>
+      </fieldset>
+    <% end %>
+  </div>
+  <div>
+    <button type="button" class="jb-button" data-collection-add>+ Add item</button>
+  </div>
+</div>