lcp 0.1.0

data/examples/showcase/app/models/platform_user.rb

@@ -0,0 +1,5 @@
+# Host app model that reads from the engine's lcp_ruby_users table.
+# Used to demonstrate bind_to: connecting LCP metadata to an existing AR class.
+class PlatformUser < ActiveRecord::Base
+  self.table_name = "lcp_ruby_users"
+end

data/examples/showcase/app/views/docs/show.html.erb

@@ -0,0 +1,19 @@
+<div class="lcp-page">
+  <div class="lcp-page-header">
+    <nav class="lcp-docs-breadcrumb" aria-label="Documentation path">
+      <a href="/docs/README">Docs</a>
+      <% @breadcrumbs.each_with_index do |part, i| %>
+        <span class="lcp-breadcrumb-sep">/</span>
+        <% if i == @breadcrumbs.size - 1 %>
+          <span><%= part %></span>
+        <% else %>
+          <a href="/docs/<%= @breadcrumbs[0..i].join('/') %>"><%= part %></a>
+        <% end %>
+      <% end %>
+    </nav>
+    <h1><%= @title %></h1>
+  </div>
+  <div class="lcp-markdown lcp-docs-content">
+    <%= @html.html_safe %>
+  </div>
+</div>

data/examples/showcase/app/views/host_inventory_items_report/index.html.erb

@@ -0,0 +1,61 @@
+<div class="p-6 max-w-5xl mx-auto">
+  <div class="mb-6">
+    <h1 class="text-2xl font-bold text-gray-900">Inventory — Custom Report</h1>
+    <p class="text-sm text-gray-600 mt-1">
+      Rendered by <code>HostInventoryItemsReportController#index</code> using a host
+      ERB template — <strong>not</strong> an LCP view. The page still appears in
+      the LCP nav and breadcrumbs, and the YAML permission scope is enforced via
+      <code>policy_scope</code>.
+    </p>
+  </div>
+
+  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
+    <div class="rounded border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">Total items</div>
+      <div class="text-3xl font-bold mt-1"><%= @records.size %></div>
+    </div>
+    <div class="rounded border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">Inventory value</div>
+      <div class="text-3xl font-bold mt-1">
+        $<%= number_with_delimiter((@total_value_cents.to_f / 100).round(2)) %>
+      </div>
+    </div>
+    <div class="rounded border border-gray-200 bg-white p-4">
+      <div class="text-xs uppercase text-gray-500">By status</div>
+      <div class="mt-1 text-sm">
+        <% @by_status.each do |status, count| %>
+          <div class="flex justify-between"><span class="text-gray-700"><%= status %></span><span class="font-mono"><%= count %></span></div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <div class="rounded border border-gray-200 bg-white overflow-hidden">
+    <table class="w-full text-sm">
+      <thead class="bg-gray-50 text-xs uppercase text-gray-600">
+        <tr>
+          <th class="p-2 text-left">Name</th>
+          <th class="p-2 text-left">SKU</th>
+          <th class="p-2 text-left">Status</th>
+          <th class="p-2 text-right">Quantity</th>
+          <th class="p-2 text-right">Price</th>
+          <th class="p-2"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @records.each do |item| %>
+          <tr class="border-t border-gray-100">
+            <td class="p-2"><%= item.name %></td>
+            <td class="p-2 font-mono text-xs"><%= item.sku %></td>
+            <td class="p-2"><%= item.status %></td>
+            <td class="p-2 text-right"><%= item.quantity %></td>
+            <td class="p-2 text-right">$<%= (item.price_cents.to_f / 100).round(2) %></td>
+            <td class="p-2 text-right">
+              <%= link_to "View", "/showcase/host-inventory-items-report/#{item.id}", class: "text-blue-600 hover:underline" %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

data/examples/showcase/app/views/host_inventory_items_report/show.html.erb

@@ -0,0 +1,39 @@
+<div class="p-6 max-w-3xl mx-auto">
+  <div class="mb-4">
+    <%= link_to "← Back to report", "/showcase/host-inventory-items-report",
+                class: "text-blue-600 hover:underline text-sm" %>
+  </div>
+
+  <div class="rounded border border-gray-200 bg-white p-6">
+    <div class="flex items-start justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900"><%= @record.name %></h1>
+        <p class="text-xs text-gray-500 font-mono mt-1">SKU: <%= @record.sku %></p>
+      </div>
+      <span class="px-2 py-1 rounded text-xs font-medium <%= @record.status == "active" ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700" %>">
+        <%= @record.status %>
+      </span>
+    </div>
+
+    <dl class="grid grid-cols-2 gap-4 mt-6 text-sm">
+      <div><dt class="text-gray-500">Quantity</dt><dd class="font-medium"><%= @record.quantity %></dd></div>
+      <div><dt class="text-gray-500">Price</dt><dd class="font-medium">$<%= (@record.price_cents.to_f / 100).round(2) %></dd></div>
+      <div><dt class="text-gray-500">Color tag</dt><dd class="font-medium"><%= @record.color || "—" %></dd></div>
+      <div><dt class="text-gray-500">Position</dt><dd class="font-medium"><%= @record.position %></dd></div>
+    </dl>
+
+    <% if @record.description.present? %>
+      <div class="mt-6">
+        <dt class="text-gray-500 text-sm">Description</dt>
+        <dd class="mt-1 text-sm whitespace-pre-line"><%= @record.description %></dd>
+      </div>
+    <% end %>
+
+    <div class="mt-6 pt-4 border-t border-gray-100 text-xs text-gray-500">
+      Rendered by host ERB template (not an LCP view). LCP YAML permissions
+      still apply — the <code>show</code> action above checked
+      <code>authorize @record</code> against the
+      <code>host_inventory_item</code> permission YAML.
+    </div>
+  </div>
+</div>

data/examples/showcase/app/views/layouts/docs.html.erb

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html data-lcp-theme="light">
+<head>
+  <title><%= @title || "Docs" %> — LCP Ruby</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <%= csrf_meta_tags %>
+  <%= stylesheet_link_tag "lcp_ruby/application", media: "all" %>
+  <style>
+    .lcp-docs-nav {
+      background: var(--lcp-surface);
+      border-bottom: 1px solid var(--lcp-border);
+      padding: 0.5rem 1.5rem;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+    .lcp-docs-nav a { color: var(--lcp-text-primary); text-decoration: none; font-weight: 600; }
+    .lcp-docs-nav a:hover { color: var(--lcp-primary); }
+    .lcp-docs-nav .lcp-docs-nav-sep { color: var(--lcp-text-secondary); }
+    .lcp-docs-content { max-width: 900px; padding: 1.5rem; }
+    .lcp-docs-content h1 { margin-top: 0; }
+    .lcp-docs-content h2 { margin-top: 2rem; border-bottom: 1px solid var(--lcp-border); padding-bottom: 0.3rem; }
+    .lcp-docs-content h3 { margin-top: 1.5rem; }
+    .lcp-docs-content table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
+    .lcp-docs-content th, .lcp-docs-content td { border: 1px solid var(--lcp-border); padding: 0.4rem 0.8rem; text-align: left; }
+    .lcp-docs-content th { background: var(--lcp-surface); font-weight: 600; }
+    .lcp-docs-content code { background: var(--lcp-surface); padding: 0.15rem 0.3rem; border-radius: 3px; font-size: 0.9em; }
+    .lcp-docs-content pre { background: var(--lcp-surface); padding: 1rem; border-radius: 6px; overflow-x: auto; }
+    .lcp-docs-content pre code { background: none; padding: 0; }
+    .lcp-docs-content a { color: var(--lcp-primary); }
+    .lcp-docs-breadcrumb { font-size: 0.85rem; color: var(--lcp-text-secondary); margin-bottom: 0.5rem; }
+    .lcp-docs-breadcrumb a { color: var(--lcp-text-secondary); text-decoration: none; }
+    .lcp-docs-breadcrumb a:hover { color: var(--lcp-primary); }
+  </style>
+</head>
+<body>
+  <nav class="lcp-docs-nav">
+    <a href="/showcase/showcase-dashboard">Showcase</a>
+    <span class="lcp-docs-nav-sep">/</span>
+    <a href="/docs/README">Documentation</a>
+  </nav>
+  <div class="lcp-docs-content">
+    <%= yield %>
+  </div>
+</body>
+</html>

data/examples/showcase/app/views/showcase/menu_renderers/_status_pill.html.erb

@@ -0,0 +1,17 @@
+<%# Tiny demo widget rendered without a wrapping <a>/<button>. Pairs
+    with `widget: true` in menu.yml — the framework drops its wrapper,
+    this partial owns the full inner HTML. Styles are inline because
+    the LCP engine layout only loads engine CSS, not the host app's
+    application.css.
+
+    Locals:
+      item:     LcpRuby::Metadata::MenuItem (required)
+      disabled: boolean (unused here — pill is informational, not interactive) %>
+<span
+  class="lcp-pill lcp-pill--info"
+  title="Demonstrates the `widget: true` menu primitive — see config/lcp_ruby/menu.yml"
+  style="display:inline-flex;align-items:center;gap:0.35rem;padding:0.2rem 0.6rem;border-radius:999px;font-size:0.75rem;font-weight:500;line-height:1;background:var(--lcp-primary-bg,#e8f0fe);color:var(--lcp-primary,#1a73e8);align-self:center;"
+>
+  <i data-lucide="zap" aria-hidden="true" style="width:0.75rem;height:0.75rem;"></i>
+  <span>widget: true</span>
+</span>

data/examples/showcase/app/views/showcase_custom/_activity_timeline.html.erb

@@ -0,0 +1,37 @@
+<%# Custom zone: Activity Timeline (tab, lazy-loaded via Turbo Frame)
+     Demonstrates a custom tab zone with scope_context.
+     Locals: record, zone, scope_context_values, scoped_records,
+             selection_id, current_user, page_definition, params %>
+
+<div style="padding: 1rem;">
+  <% if record %>
+    <div style="border-left: 3px solid #3b82f6; padding-left: 1.5rem;">
+      <%
+        events = [
+          { time: "2 hours ago", action: "Status changed", detail: "draft → #{record.status}", icon: "&#x1f504;" },
+          { time: "1 day ago", action: "Score updated", detail: "Score set to #{record.score || 0}", icon: "&#x1f4ca;" },
+          { time: "3 days ago", action: "Record created", detail: "Created by #{current_user&.name || 'system'}", icon: "&#x2728;" },
+        ]
+        events.unshift({ time: "Just now", action: "Priority flagged", detail: "Priority: #{record.priority}", icon: "&#x1f6a9;" }) if record.priority == "critical"
+      %>
+
+      <% events.each_with_index do |event, idx| %>
+        <div style="position: relative; padding-bottom: 1.5rem; <%= 'opacity: 0.6;' if idx == events.length - 1 %>">
+          <div style="position: absolute; left: -1.85rem; top: 0.1rem; width: 12px; height: 12px; background: #3b82f6; border-radius: 50%; border: 2px solid white;"></div>
+          <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.25rem;"><%= event[:time] %></div>
+          <div style="font-weight: 600; color: #334155;"><%= event[:icon].html_safe %> <%= event[:action] %></div>
+          <div style="font-size: 0.85rem; color: #64748b;"><%= event[:detail] %></div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <p style="color: #94a3b8; text-align: center; padding: 2rem 0;">No record selected.</p>
+  <% end %>
+
+  <div style="margin-top: 1rem; padding: 0.75rem; background: #f8fafc; border-radius: 6px; font-size: 0.8rem; color: #64748b;">
+    <strong>Custom Zone Info:</strong>
+    Rendered by <code>showcase_custom/_activity_timeline.html.erb</code>.
+    <br>scope_context_values: <code><%= local_assigns[:scope_context_values]&.inspect || "{}" %></code>
+    <br>parent_record: <code><%= record&.class&.name %>#<%= record&.id %></code>
+  </div>
+</div>

data/examples/showcase/app/views/showcase_custom/_card_index.html.erb

@@ -0,0 +1,74 @@
+<%# render_with index: Card Grid
+     Replaces the entire index content area with a custom card layout.
+     LCP's toolbar, search, and pagination still work normally.
+     Locals: records, presenter, evaluator, action_set, ransack_search,
+             total_count, current_user, page_definition, params %>
+
+<div style="padding: 1rem 0;">
+  <div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
+    <span style="font-size: 0.9rem; color: #64748b;">
+      Showing <%= records.size %> of <%= total_count %> items as cards
+    </span>
+  </div>
+
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;">
+    <% records.each do |record| %>
+      <%
+        status_colors = {
+          "active" => { bg: "#f0fdf4", border: "#86efac", text: "#16a34a" },
+          "draft" => { bg: "#f8fafc", border: "#e2e8f0", text: "#64748b" },
+          "review" => { bg: "#fefce8", border: "#fde68a", text: "#ca8a04" },
+          "completed" => { bg: "#eff6ff", border: "#93c5fd", text: "#2563eb" },
+          "archived" => { bg: "#f5f5f4", border: "#d6d3d1", text: "#78716c" },
+        }
+        colors = status_colors[record.status] || status_colors["draft"]
+      %>
+      <a href="<%= lcp_ruby.resource_path(presenter.slug, record) %>"
+         style="display: block; text-decoration: none; color: inherit; background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; transition: box-shadow 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.05);"
+         onmouseover="this.style.boxShadow='0 4px 12px rgba(0,0,0,0.1)'"
+         onmouseout="this.style.boxShadow='0 1px 3px rgba(0,0,0,0.05)'">
+
+        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
+          <h3 style="margin: 0; font-size: 1rem; font-weight: 600; color: #1e293b;"><%= record.name %></h3>
+          <span style="background: <%= colors[:bg] %>; color: <%= colors[:text] %>; border: 1px solid <%= colors[:border] %>; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; white-space: nowrap;">
+            <%= record.status&.titleize %>
+          </span>
+        </div>
+
+        <% if record.description.present? %>
+          <p style="margin: 0 0 0.75rem; font-size: 0.85rem; color: #64748b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
+            <%= record.description %>
+          </p>
+        <% end %>
+
+        <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #94a3b8;">
+          <span><%= record.category || "—" %></span>
+          <% if record.score %>
+            <span style="font-weight: 600; color: <%= record.score >= 80 ? '#16a34a' : record.score >= 50 ? '#ca8a04' : '#dc2626' %>;">
+              <%= record.score %>pts
+            </span>
+          <% end %>
+        </div>
+      </a>
+    <% end %>
+  </div>
+
+  <% if records.empty? %>
+    <div style="text-align: center; padding: 3rem; color: #94a3b8;">
+      No items found matching your search criteria.
+    </div>
+  <% end %>
+
+  <%# View slots: render_with partials can explicitly render view slots where appropriate %>
+  <%= render_slot(:after_table, page: :index) %>
+
+  <div style="margin-top: 1.5rem; padding: 0.75rem; background: #f8fafc; border-radius: 6px; font-size: 0.8rem; color: #64748b;">
+    <strong>render_with Info:</strong>
+    This entire card grid replaces the standard index table via <code>render_with "showcase_custom/card_index"</code>.
+    The toolbar, search bar, and pagination are still rendered by LCP. The <code>records</code> local
+    is already filtered, sorted, and paginated.
+    The <code>action_set</code> local provides access to permitted actions
+    (collection: <%= action_set.collection_actions.map { |a| a["name"] }.join(", ").presence || "none" %>).
+    View slots like <code>render_slot(:after_table)</code> can be called explicitly.
+  </div>
+</div>

data/examples/showcase/app/views/showcase_custom/_detail_show.html.erb

@@ -0,0 +1,115 @@
+<%# render_with show: Two-Column Detail Layout
+     Replaces the entire show content area with a custom two-column layout.
+     LCP's page frame (nav, breadcrumbs, toolbar) still renders normally.
+     Locals: record, presenter, evaluator, action_set, layout_builder, column_set,
+             field_value_resolver, current_user, page_definition, params %>
+
+<div style="padding: 1rem 0;">
+  <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem;">
+    <%# Main content column %>
+    <div>
+      <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem;">
+        <h2 style="margin: 0 0 0.5rem; font-size: 1.5rem; color: #1e293b;"><%= record.name %></h2>
+
+        <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
+          <% { status: { active: "#16a34a", draft: "#64748b", review: "#ca8a04", completed: "#2563eb", archived: "#78716c" },
+               priority: { critical: "#dc2626", high: "#f97316", medium: "#3b82f6", low: "#10b981" }
+             }.each do |field, colors| %>
+            <% value = record.send(field) %>
+            <% if value.present? %>
+              <span style="background: <%= colors[value.to_sym] || '#64748b' %>15; color: <%= colors[value.to_sym] || '#64748b' %>; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 500;">
+                <%= value.titleize %>
+              </span>
+            <% end %>
+          <% end %>
+        </div>
+
+        <% if record.description.present? %>
+          <div style="margin-bottom: 1rem;">
+            <h3 style="font-size: 0.85rem; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.5rem;">Description</h3>
+            <p style="margin: 0; color: #475569; line-height: 1.6;"><%= record.description %></p>
+          </div>
+        <% end %>
+
+        <% if record.notes.present? %>
+          <div>
+            <h3 style="font-size: 0.85rem; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.5rem;">Notes</h3>
+            <p style="margin: 0; color: #475569; line-height: 1.6;"><%= record.notes %></p>
+          </div>
+        <% end %>
+      </div>
+
+      <% if record.latitude.present? && record.longitude.present? %>
+        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem;">
+          <h3 style="font-size: 0.85rem; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.75rem;">Location</h3>
+          <div style="background: #f0f9ff; border: 2px dashed #3b82f6; border-radius: 8px; padding: 1.5rem; text-align: center;">
+            <span style="font-size: 1.5rem;">&#x1f5fa;</span>
+            <p style="margin: 0.5rem 0 0; color: #64748b;">
+              <%= record.latitude %>, <%= record.longitude %>
+            </p>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
+    <%# Sidebar column %>
+    <div>
+      <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem;">
+        <h3 style="font-size: 0.85rem; text-transform: uppercase; color: #94a3b8; margin: 0 0 1rem;">Details</h3>
+
+        <dl style="margin: 0;">
+          <% [
+            ["Category", record.category],
+            ["Score", record.score ? "#{record.score} / 100" : nil],
+            ["Due Date", record.due_date&.strftime("%B %d, %Y")],
+            ["Created", record.created_at&.strftime("%b %d, %Y %H:%M")],
+            ["Updated", record.updated_at&.strftime("%b %d, %Y %H:%M")],
+          ].each do |label, value| %>
+            <div style="display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9;">
+              <dt style="color: #64748b; font-size: 0.85rem;"><%= label %></dt>
+              <dd style="margin: 0; font-weight: 500; color: #334155; font-size: 0.85rem;"><%= value || "—" %></dd>
+            </div>
+          <% end %>
+        </dl>
+      </div>
+
+      <% if record.tags_json.present? %>
+        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem;">
+          <h3 style="font-size: 0.85rem; text-transform: uppercase; color: #94a3b8; margin: 0 0 0.75rem;">Tags</h3>
+          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+            <% begin %>
+              <% JSON.parse(record.tags_json).each do |tag| %>
+                <span style="background: #e2e8f0; color: #475569; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem;">
+                  <%= tag %>
+                </span>
+              <% end %>
+            <% rescue JSON::ParserError %>
+              <span style="color: #dc2626; font-size: 0.85rem;">Invalid JSON</span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <%# action_set: render action buttons matching LCP's permission model %>
+  <% actions = action_set.single_actions(record) %>
+  <% if actions.any? %>
+    <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
+      <% if actions.any? { |a| a["name"] == "edit" } %>
+        <a href="<%= lcp_ruby.edit_resource_path(presenter.slug, record) %>"
+           style="padding: 0.5rem 1rem; background: #3b82f6; color: white; border-radius: 6px; text-decoration: none; font-size: 0.85rem;">
+          Edit
+        </a>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div style="margin-top: 1.5rem; padding: 0.75rem; background: #f8fafc; border-radius: 6px; font-size: 0.8rem; color: #64748b;">
+    <strong>render_with Info:</strong>
+    This two-column layout replaces the standard show page via <code>render_with "showcase_custom/detail_show"</code>.
+    Available locals include <code>record</code>, <code>layout_builder</code>, <code>column_set</code>,
+    <code>field_value_resolver</code>, and <code>action_set</code> (single actions for this record:
+    <%= actions.map { |a| a["name"] }.join(", ").presence || "none" %>).
+  </div>
+</div>

data/examples/showcase/app/views/showcase_custom/_location_map.html.erb

@@ -0,0 +1,29 @@
+<%# Custom show section: Location Map
+     Demonstrates type: custom show section with record data access.
+     Locals: record, presenter, evaluator, section_config, current_user, page_definition, params %>
+
+<div class="lcp-custom-section" style="padding: 1rem;">
+  <% if record.latitude.present? && record.longitude.present? %>
+    <div style="background: #f0f9ff; border: 2px dashed #3b82f6; border-radius: 8px; padding: 2rem; text-align: center;">
+      <div style="font-size: 2rem; margin-bottom: 0.5rem;">&#x1f5fa;</div>
+      <p style="margin: 0; font-weight: 600; color: #1e40af;">Map Placeholder</p>
+      <p style="margin: 0.5rem 0 0; color: #64748b;">
+        Latitude: <strong><%= record.latitude %></strong> |
+        Longitude: <strong><%= record.longitude %></strong>
+      </p>
+      <p style="margin: 0.5rem 0 0; font-size: 0.85rem; color: #94a3b8;">
+        In a real app, this would render an interactive map (Leaflet, Mapbox, Google Maps).
+      </p>
+    </div>
+  <% else %>
+    <div style="background: #fefce8; border: 1px solid #fde68a; border-radius: 8px; padding: 1.5rem; text-align: center; color: #92400e;">
+      No coordinates set for this record. Edit the record to add latitude and longitude.
+    </div>
+  <% end %>
+
+  <div style="margin-top: 1rem; padding: 0.75rem; background: #f8fafc; border-radius: 6px; font-size: 0.8rem; color: #64748b;">
+    <strong>Custom Section Info:</strong>
+    This section is rendered by <code>showcase_custom/_location_map.html.erb</code>.
+    It receives <code>record</code>, <code>presenter</code>, <code>evaluator</code>, and other locals.
+  </div>
+</div>

data/examples/showcase/app/views/showcase_custom/_location_view.html.erb

@@ -0,0 +1,34 @@
+<%# Custom zone: Location View (tab, lazy-loaded, apply_scope_context: false)
+     Demonstrates a custom tab zone where scope_context_values are passed
+     but scoped_records is NOT built (apply_scope_context: false).
+     Locals: record, zone, scope_context_values, scoped_records,
+             selection_id, current_user, page_definition, params %>
+
+<div style="padding: 1rem;">
+  <% if record %>
+    <% if record.latitude.present? && record.longitude.present? %>
+      <div style="background: #f0f9ff; border: 2px dashed #3b82f6; border-radius: 8px; padding: 2rem; text-align: center; margin-bottom: 1rem;">
+        <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">&#x1f30d;</div>
+        <p style="margin: 0; font-weight: 600; color: #1e40af;">Interactive Map Placeholder</p>
+        <p style="margin: 0.5rem 0 0; color: #64748b;">
+          <%= record.name %> &mdash;
+          Lat: <strong><%= record.latitude %></strong>,
+          Lng: <strong><%= record.longitude %></strong>
+        </p>
+      </div>
+    <% else %>
+      <div style="background: #fefce8; border: 1px solid #fde68a; border-radius: 8px; padding: 1.5rem; text-align: center; color: #92400e;">
+        No coordinates available for "<%= record.name %>".
+      </div>
+    <% end %>
+  <% else %>
+    <p style="color: #94a3b8; text-align: center; padding: 2rem 0;">No record selected.</p>
+  <% end %>
+
+  <div style="margin-top: 1rem; padding: 0.75rem; background: #f8fafc; border-radius: 6px; font-size: 0.8rem; color: #64748b;">
+    <strong>Custom Zone Info (apply_scope_context: false):</strong>
+    <br>scope_context_values: <code><%= local_assigns[:scope_context_values]&.inspect || "{}" %></code>
+    <br>scoped_records: <code><%= local_assigns[:scoped_records]&.inspect || "nil (not built)" %></code>
+    <br>This zone receives only the resolved scope hash, not a pre-built AR relation.
+  </div>
+</div>

data/examples/showcase/app/views/showcase_custom/_quick_stats.html.erb

@@ -0,0 +1,50 @@
+<%# Custom show section: Quick Stats
+     Demonstrates custom section accessing record fields for computed display.
+     Locals: record, presenter, evaluator, section_config, current_user, page_definition, params %>
+
+<div class="lcp-custom-section" style="padding: 1rem;">
+  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
+    <div style="background: #f0fdf4; border-radius: 8px; padding: 1rem; text-align: center;">
+      <div style="font-size: 1.5rem; font-weight: 700; color: #16a34a;">
+        <%= record.score || "N/A" %>
+      </div>
+      <div style="font-size: 0.85rem; color: #64748b;">Score</div>
+    </div>
+
+    <div style="background: #eff6ff; border-radius: 8px; padding: 1rem; text-align: center;">
+      <div style="font-size: 1.5rem; font-weight: 700; color: #2563eb;">
+        <%= record.status&.titleize || "Unknown" %>
+      </div>
+      <div style="font-size: 0.85rem; color: #64748b;">Status</div>
+    </div>
+
+    <div style="background: <%= record.due_date && record.due_date < Date.current ? '#fef2f2' : '#fefce8' %>; border-radius: 8px; padding: 1rem; text-align: center;">
+      <div style="font-size: 1.5rem; font-weight: 700; color: <%= record.due_date && record.due_date < Date.current ? '#dc2626' : '#ca8a04' %>;">
+        <% if record.due_date %>
+          <%= record.due_date < Date.current ? "Overdue" : "#{(record.due_date - Date.current).to_i}d" %>
+        <% else %>
+          No date
+        <% end %>
+      </div>
+      <div style="font-size: 0.85rem; color: #64748b;">Due</div>
+    </div>
+  </div>
+
+  <%# Show parsed tags if available %>
+  <% if record.tags_json.present? %>
+    <div style="margin-top: 1rem;">
+      <div style="font-size: 0.85rem; color: #64748b; margin-bottom: 0.5rem;">Tags:</div>
+      <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
+        <% begin %>
+          <% JSON.parse(record.tags_json).each do |tag| %>
+            <span style="background: #e2e8f0; color: #475569; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem;">
+              <%= tag %>
+            </span>
+          <% end %>
+        <% rescue JSON::ParserError %>
+          <span style="color: #dc2626; font-size: 0.85rem;">Invalid JSON in tags_json</span>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/examples/showcase/app/views/showcase_custom/_stats_sidebar.html.erb

@@ -0,0 +1,42 @@
+<%# Custom zone: Stats Sidebar (eager: true)
+     Demonstrates a custom sidebar zone rendered inline (not via Turbo Frame).
+     Locals: record, zone, scope_context_values,
+             scoped_records, selection_id, current_user, page_definition, params %>
+
+<div style="padding: 1rem;">
+  <h3 style="margin: 0 0 1rem; font-size: 1rem; font-weight: 600; color: #334155;">Record Summary</h3>
+
+  <% if record %>
+    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+      <div style="background: #f0fdf4; border-radius: 8px; padding: 0.75rem; text-align: center;">
+        <div style="font-size: 1.25rem; font-weight: 700; color: #16a34a;"><%= record.score || 0 %></div>
+        <div style="font-size: 0.8rem; color: #64748b;">Score</div>
+      </div>
+
+      <div style="background: #eff6ff; border-radius: 8px; padding: 0.75rem; text-align: center;">
+        <div style="font-size: 1.25rem; font-weight: 700; color: #2563eb;"><%= record.priority&.titleize || "—" %></div>
+        <div style="font-size: 0.8rem; color: #64748b;">Priority</div>
+      </div>
+
+      <div style="background: #fefce8; border-radius: 8px; padding: 0.75rem; text-align: center;">
+        <div style="font-size: 1.25rem; font-weight: 700; color: #ca8a04;"><%= record.category || "—" %></div>
+        <div style="font-size: 0.8rem; color: #64748b;">Category</div>
+      </div>
+
+      <% if record.due_date %>
+        <div style="background: <%= record.due_date < Date.current ? '#fef2f2' : '#f8fafc' %>; border-radius: 8px; padding: 0.75rem; text-align: center;">
+          <div style="font-size: 1.25rem; font-weight: 700; color: <%= record.due_date < Date.current ? '#dc2626' : '#334155' %>;">
+            <%= record.due_date.strftime("%b %d") %>
+          </div>
+          <div style="font-size: 0.8rem; color: #64748b;">Due Date</div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <p style="color: #94a3b8; text-align: center;">Select a record to see stats.</p>
+  <% end %>
+
+  <div style="margin-top: 1rem; padding: 0.5rem; background: #fefce8; border: 1px solid #fde68a; border-radius: 6px; font-size: 0.75rem; color: #92400e;">
+    <strong>eager: true</strong> — This sidebar is rendered inline during initial page load, not via Turbo Frame.
+  </div>
+</div>

data/examples/showcase/app/views/showcase_custom/_tags_editor.html.erb

@@ -0,0 +1,48 @@
+<%# Custom form section: Tags Editor
+     Demonstrates type: custom form section with form builder access.
+     Uses additional_permitted_params: ["tags_json"] to permit the field.
+     Locals: record, presenter, evaluator, section_config, form, current_user, page_definition, params %>
+
+<div style="padding: 0.5rem 0;">
+  <%
+    existing_tags = []
+    if record.tags_json.present?
+      begin
+        parsed = JSON.parse(record.tags_json)
+        existing_tags = parsed if parsed.is_a?(Array)
+      rescue JSON::ParserError
+        # keep empty
+      end
+    end
+  %>
+
+  <div style="margin-bottom: 0.75rem;">
+    <label style="display: block; font-weight: 600; margin-bottom: 0.25rem;">Tags</label>
+    <span class="lcp-field-hint" style="font-size: 0.8rem; color: #64748b;">
+      Enter tags separated by commas. They will be saved as a JSON array.
+    </span>
+  </div>
+
+  <%= form.hidden_field :tags_json, id: "tags_json_hidden", value: record.tags_json %>
+
+  <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; min-height: 2rem;" id="tags_display">
+    <% existing_tags.each do |tag| %>
+      <span style="background: #dbeafe; color: #1e40af; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.25rem;">
+        <%= tag %>
+      </span>
+    <% end %>
+  </div>
+
+  <div style="display: flex; gap: 0.5rem;">
+    <input type="text" id="tag_input" placeholder="Type a tag and press Enter or comma..."
+           style="flex: 1; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px;"
+           value="<%= existing_tags.join(', ') %>">
+  </div>
+
+  <div style="margin-top: 1rem; padding: 0.75rem; background: #f8fafc; border-radius: 6px; font-size: 0.8rem; color: #64748b;">
+    <strong>Custom Form Section Info:</strong>
+    This section uses <code>additional_permitted_params: ["tags_json"]</code> so the hidden field
+    is permitted by the controller's strong parameters. The <code>form</code> builder is available
+    for rendering Rails form helpers.
+  </div>
+</div>

data/examples/showcase/bin/rails

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path("../config/application", __dir__)
+require_relative "../config/boot"
+require "rails/commands"

data/examples/showcase/bin/rake

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative "../config/boot"
+require "rake"
+Rake.application.run