crud_components 0.1.0

data/app/assets/stylesheets/crud_components.css

@@ -0,0 +1,35 @@
+/* crud_components — the only CSS the gem needs the host to load: it makes the
+ * column picker float as a dropdown overlay instead of pushing the layout.
+ * Everything else is plain Bootstrap 5 classes (see Config::DEFAULT_CSS).
+ *
+ * Load it whichever way fits your asset setup:
+ *   - asset pipeline (propshaft / sprockets):  <%= stylesheet_link_tag "crud_components" %>
+ *   - pipeline-agnostic (cssbundling / importmap / none): <%= crud_components_styles %>
+ *     (inlines this file as a <style> tag — no compilation, works everywhere)
+ */
+.crud-column-picker { position: relative; display: inline-block; }
+.crud-column-picker-toggle {
+  list-style: none; cursor: pointer; color: var(--bs-secondary);
+  padding: .15rem .3rem; border-radius: .25rem;
+}
+.crud-column-picker-toggle::-webkit-details-marker { display: none; }
+.crud-column-picker-toggle:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); }
+.crud-column-picker[open] .crud-column-picker-toggle { color: var(--bs-body-color); }
+.crud-column-picker-menu {
+  position: absolute; right: 0; z-index: 1050; margin-top: .25rem; min-width: 14rem;
+  background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color);
+  border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); padding: .75rem;
+}
+.crud-column-picker-list { margin: .25rem 0 .5rem; max-height: 28rem; overflow-y: auto; }
+.crud-column-picker-item {
+  display: flex; align-items: center; gap: .5rem; padding: .15rem .25rem; border-radius: .25rem;
+}
+.crud-column-picker-item.is-dragging { opacity: .5; background: var(--bs-secondary-bg); }
+.crud-column-picker-handle { cursor: grab; color: var(--bs-secondary); }
+.crud-column-picker-group {
+  margin: .5rem 0 .15rem; padding: 0 .25rem; font-size: .7rem; font-weight: 600;
+  text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary);
+}
+.crud-column-picker-group:first-child { margin-top: 0; }
+/* the model tag at the right of each picker row (Pipedrive-style) */
+.crud-column-picker-model { margin-left: auto; font-size: .7rem; white-space: nowrap; }

data/app/views/crud_components/_action_button.html.erb

@@ -0,0 +1,11 @@
+<%# One action rendered as a button: a GET action is a turbo link, anything else
+    a CSRF-safe button_to form. Locals: action (CrudComponents::Action), path, css. %>
+<% content = action.icon ? tag.i('', class: "#{css.icon_prefix}#{action.icon}", aria: { hidden: true }) : action.title %>
+<% if action.http_method == :get %>
+  <%= link_to content, path, class: action.css_class, title: action.title,
+              data: { turbo_action: 'advance' } %>
+<% else %>
+  <%= button_to content, path, method: action.http_method, class: action.css_class,
+                title: action.title,
+                form: { class: 'd-inline', data: { turbo_confirm: action.confirm_message }.compact } %>
+<% end %>

data/app/views/crud_components/_actions.html.erb

@@ -0,0 +1,12 @@
+<%# A group of action buttons. Local: `actions`
+    (CrudComponents::Presenters::Actions). Joined (btn-group) only when every
+    action is a GET link; a destroy form would break the group's edges, so
+    those render as evenly-spaced buttons instead. Each item is rendered by the
+    shared _action_button partial. %>
+<% if actions.any? %>
+  <div class="<%= actions.joinable? ? actions.css.button_group : 'd-inline-flex gap-1' %>" role="group">
+    <% actions.items.each do |item| %>
+      <%= render 'crud_components/action_button', action: item.action, path: item.path, css: actions.css %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/crud_components/_column_header.html.erb

@@ -0,0 +1,24 @@
+<%# Every column's <th> content. The title is collection.column_header(field) — a
+    custom header: replaces only the human_name; the column is still wrapped in a
+    sort link when sortable. Then any header actions: an `on: :selection` action
+    submits the shared select-form (acting on the ticked rows × this column's
+    object); any other renders as a plain link/button. Locals: collection, field. %>
+<% css = collection.css %>
+<span class="crud-column-header d-inline-flex align-items-center gap-1">
+  <% if collection.sortable_field?(field) %>
+    <%= render 'crud_components/sort_link', collection: collection, field: field, css: css,
+               label: collection.column_header(field) %>
+  <% else %>
+    <%= collection.column_header(field) %>
+  <% end %>
+  <% if (actions = collection.column_header_actions(field)) %>
+    <% actions.items.each do |item| %>
+      <% if item.action.selection? %>
+        <%= render 'crud_components/selection_action', action: item.action, path: item.path,
+                   form_id: collection.select_form_id, css: css %>
+      <% else %>
+        <%= render 'crud_components/action_button', action: item.action, path: item.path, css: css %>
+      <% end %>
+    <% end %>
+  <% end %>
+</span>

data/app/views/crud_components/_column_picker.html.erb

@@ -0,0 +1,66 @@
+<%# The column picker: a gear that opens a checklist of the columns this user may
+    see. Native <details> disclosure — opening needs no JavaScript; the optional
+    crud-columns controller only adds drag-to-reorder. The form is a plain GET that
+    submits `cols[]` to `url` (this page by default), exactly like the sort links
+    and filter row, so it composes with every other param and works no-JS.
+    Locals: `collection` (a Collection presenter), `url`. %>
+<% css = collection.css %>
+<details class="crud-column-picker dropdown" data-controller="crud-columns">
+  <summary class="crud-column-picker-toggle" role="button"
+           title="<%= t('crud_components.columns.edit', default: 'Columns') %>"
+           aria-label="<%= t('crud_components.columns.edit', default: 'Columns') %>">
+    <i class="<%= css.icon_prefix %>gear" aria-hidden="true"></i>
+  </summary>
+  <div class="crud-column-picker-menu">
+    <%# crud-columns#clean (optional JS) collapses cols[]=… into a single
+        cols=a,b on submit — a prettier URL; without JS the cols[] array submits. %>
+    <%= form_with url: url, method: :get, data: { turbo_action: 'advance',
+                  action: 'submit->crud-columns#clean' } do %>
+      <% collection.picker_preserved_params.each do |name, value| %>
+        <%= hidden_field_tag name, value, id: nil %>
+      <% end %>
+      <fieldset>
+        <legend class="<%= css.muted %> small"><%= t('crud_components.columns.legend', default: 'Show columns') %></legend>
+        <ul class="crud-column-picker-list list-unstyled" data-crud-columns-target="list">
+          <%# Pipedrive-style: every column is grouped under its source model — the
+              collection's own model first, then each associated model. A group's
+              header shows the model's icon + name; each row also tags the model on
+              the right. So `publisher`, `publisher.name` and `publisher.founded_on`
+              cluster under "Publisher". %>
+          <% collection.field_groups.each do |group_model, fields| %>
+            <% heading = collection.group_heading(group_model) %>
+            <% icon = collection.group_icon(group_model) %>
+            <li class="crud-column-picker-group">
+              <% if icon %><i class="<%= css.icon_prefix %><%= icon %>" aria-hidden="true"></i> <% end %><%= heading %>
+            </li>
+            <% fields.each do |field| %>
+              <%# Pure-HTML behaviour: a ticked checkbox submits cols[]=<name> in DOM
+                  order, an unticked one submits nothing. crud-columns reorders these
+                  <li>s on drag, which reorders the submitted columns. %>
+              <li class="crud-column-picker-item" draggable="true" data-crud-columns-target="item">
+                <span class="crud-column-picker-handle" aria-hidden="true" data-crud-columns-target="handle">
+                  <i class="<%= css.icon_prefix %>grip-vertical"></i>
+                </span>
+                <label class="d-inline-flex align-items-center gap-2 flex-grow-1">
+                  <input type="checkbox" class="form-check-input" name="<%= collection.column_param_name %>"
+                         value="<%= field.name %>" <%= 'checked' if collection.column_visible?(field) %>
+                         data-action="change->crud-columns#toggle">
+                  <span><%= field.picker_label %></span>
+                  <span class="crud-column-picker-model <%= css.muted %>"><%= heading %></span>
+                </label>
+              </li>
+            <% end %>
+          <% end %>
+        </ul>
+      </fieldset>
+      <div class="<%= css.button_group %>">
+        <button type="submit" class="<%= css.button %>">
+          <%= t('crud_components.columns.apply', default: 'Apply') %>
+        </button>
+        <%= link_to t('crud_components.columns.reset', default: 'Reset'),
+                    collection.picker_preserved_params.any? ? "#{url}?#{collection.picker_preserved_params.to_query}" : url,
+                    class: css.button, data: { turbo_action: 'advance' } %>
+      </div>
+    <% end %>
+  </div>
+</details>

data/app/views/crud_components/_filter.html.erb

@@ -0,0 +1,34 @@
+<%# Standalone labelled filter form (modal / sidebar). Local: `filter`.
+    Never auto-submits — users compose several filters here. %>
+<% css = filter.css %>
+<form method="get" action="<%= filter.form_path %>" class="crud-filter-form"
+      data-controller="crud-filter" data-action="submit->crud-filter#clean"
+      data-turbo-action="advance">
+  <% filter.preserved_params.each do |name, value| %>
+    <%= hidden_field_tag name, value, id: nil %>
+  <% end %>
+  <div class="<%= css.filter_grid %>">
+    <% if filter.searchable? %>
+      <div class="col">
+        <label class="<%= css.form_label %>">
+          <%= t('crud_components.filter.search', default: 'Search') %>
+          <%= tag.input type: 'search', name: filter.param_name('q'), value: filter.value('q'),
+                        class: css.input %>
+        </label>
+      </div>
+    <% end %>
+    <% filter.fields.each do |field| %>
+      <div class="col">
+        <span class="<%= css.form_label %>"><%= field.human_name %></span>
+        <%= filter.render_filter_control(field, filter.query) %>
+      </div>
+    <% end %>
+  </div>
+  <div class="mt-3 d-flex gap-2">
+    <button type="submit" class="<%= css.button_primary %>">
+      <%= t('crud_components.filter.apply', default: 'Apply') %>
+    </button>
+    <%= link_to t('crud_components.filter.reset', default: 'Reset'), filter.reset_path,
+                class: css.button %>
+  </div>
+</form>

data/app/views/crud_components/_form.html.erb

@@ -0,0 +1,30 @@
+<%# Derived create/edit form. Local: `form` (Presenters::Form).
+    Rendered with simple_form, so it inherits your app's wrappers (Bootstrap by
+    default; the community ships Tailwind/Bulma/Foundation configs). The gem
+    decides *which* fields, their types and the permit list, and renders each
+    input through a per-type partial (crud_components/form_fields/_<type>);
+    simple_form does the markup. Override one of those partials to restyle a
+    whole type, set `form_as:` on an attribute to point one field at a different
+    partial, or override this file to take over form rendering entirely. %>
+<%= simple_form_for(form.record, **form.form_options) do |f| %>
+  <% if form.summary_errors.any? %>
+    <%# base / non-field errors — per-field errors are simple_form's job %>
+    <div class="<%= form.css.form_summary %>">
+      <ul class="mb-0"><% form.summary_errors.each do |message| %><li><%= message %></li><% end %></ul>
+    </div>
+  <% end %>
+
+  <% form.fields.each do |field| %>
+    <% if form.editable?(field) %>
+      <%= render "crud_components/form_fields/#{field.form_partial}", f: f, field: field, form: form %>
+    <% else %>
+      <%# visible but not editable: shown read-only for context, not submitted %>
+      <div class="mb-2 small d-flex gap-2 crud-form-readonly">
+        <span class="<%= form.css.muted %>"><%= field.human_name %>:</span>
+        <span><%= form.display(field) %></span>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= f.button :submit, class: form.css.button_primary %>
+<% end %>

data/app/views/crud_components/_pager.html.erb

@@ -0,0 +1,41 @@
+<%# Footer pager — lives in the table's <tfoot> (a colspan cell), or any layout
+    that renders it. One local: `collection`. Override this file in your app to
+    restyle. Page links keep all other params, so filters/sort/other collections
+    survive turning the page. %>
+<% if collection.show_pager? %>
+  <% css = collection.css %>
+  <nav class="crud-pager d-flex flex-wrap justify-content-between align-items-center gap-2"
+       aria-label="<%= t('crud_components.pager.label', default: 'Pagination') %>">
+    <small class="<%= css.muted %>">
+      <%= t('crud_components.pager.summary', default: 'Page %{page} of %{total} · %{count} total',
+            page: collection.current_page, total: collection.total_pages, count: collection.total_count) %>
+    </small>
+    <ul class="<%= css.pagination %> mb-0">
+      <% prev_off = collection.current_page <= 1 %>
+      <li class="page-item <%= 'disabled' if prev_off %>">
+        <%= link_to t('crud_components.pager.previous', default: '‹'),
+                    (prev_off ? '#' : collection.page_url(collection.current_page - 1)),
+                    class: 'page-link', data: { turbo_action: 'advance' },
+                    aria: { label: t('crud_components.pager.previous_label', default: 'Previous') },
+                    tabindex: ('-1' if prev_off) %>
+      </li>
+      <% collection.pager_pages.each do |p| %>
+        <% if p == :gap %>
+          <li class="page-item disabled"><span class="page-link">…</span></li>
+        <% else %>
+          <li class="page-item <%= 'active' if p == collection.current_page %>">
+            <%= link_to p, collection.page_url(p), class: 'page-link', data: { turbo_action: 'advance' } %>
+          </li>
+        <% end %>
+      <% end %>
+      <% next_off = collection.current_page >= collection.total_pages %>
+      <li class="page-item <%= 'disabled' if next_off %>">
+        <%= link_to t('crud_components.pager.next', default: '›'),
+                    (next_off ? '#' : collection.page_url(collection.current_page + 1)),
+                    class: 'page-link', data: { turbo_action: 'advance' },
+                    aria: { label: t('crud_components.pager.next_label', default: 'Next') },
+                    tabindex: ('-1' if next_off) %>
+      </li>
+    </ul>
+  </nav>
+<% end %>

data/app/views/crud_components/_record.html.erb

@@ -0,0 +1,15 @@
+<%# One record as a definition list. Local: `record_presenter`. %>
+<% css = record_presenter.css %>
+<div class="crud-record">
+  <% if record_presenter.actions&.any? %>
+    <div class="mb-3">
+      <%= render 'crud_components/actions', actions: record_presenter.actions %>
+    </div>
+  <% end %>
+  <dl class="<%= css.dl %>">
+    <% record_presenter.fields.each do |field| %>
+      <dt class="<%= css.dt %>"><%= field.human_name %></dt>
+      <dd class="<%= css.dd %>"><%= record_presenter.value_html(field) %></dd>
+    <% end %>
+  </dl>
+</div>

data/app/views/crud_components/_row.html.erb

@@ -0,0 +1,26 @@
+<%# One collection table row. Locals: collection, record, css; optional group. %>
+<% group = local_assigns[:group] %>
+<tr id="<%= dom_id(record) %>">
+  <% if collection.selectable? %>
+    <td class="crud-select-cell">
+      <%= check_box_tag collection.select_param_name, collection.select_value(record), false,
+                        id: nil, form: collection.select_form_id, class: 'form-check-input',
+                        aria: { label: 'Select row' },
+                        data: { crud_select_target: 'row', action: 'change->crud-select#update', group: group&.key } %>
+    </td>
+  <% end %>
+  <% collection.fields.each do |field| %>
+    <td><%= collection.cell(field, record) %></td>
+  <% end %>
+  <% if collection.trailing_column? %>
+    <td class="<%= css.actions_cell %>">
+      <% if collection.actions_column? %>
+        <% if collection.custom_actions_partial %>
+          <%= render collection.custom_actions_partial, record: record %>
+        <% else %>
+          <%= render 'crud_components/actions', actions: collection.row_actions(record) %>
+        <% end %>
+      <% end %>
+    </td>
+  <% end %>
+</tr>

data/app/views/crud_components/_selection_action.html.erb

@@ -0,0 +1,14 @@
+<%# One bulk action bound to the shared select-form: submitting it carries the
+    ticked `selected[]` slugs to `path`. A GET action submits as GET (filter-like);
+    others POST with a `_method` override. The crud-select controller disables it
+    while nothing is ticked; without JS it stays enabled and acts on whatever is
+    ticked. Shared by the toolbar's selection cluster and a column header.
+    Locals: action (CrudComponents::Action), path, form_id, css. %>
+<% get = action.http_method == :get %>
+<%= button_tag type: 'submit', form: form_id, formaction: path,
+               formmethod: get ? 'get' : 'post',
+               name: get ? nil : '_method', value: get ? nil : action.http_method,
+               class: action.css_class, title: action.title,
+               data: { turbo_confirm: action.confirm_message, crud_select_target: 'button' }.compact do %>
+  <% if action.icon %><i class="<%= css.icon_prefix %><%= action.icon %>" aria-hidden="true"></i> <% end %><%= action.title %>
+<% end %>

data/app/views/crud_components/_sort_link.html.erb

@@ -0,0 +1,17 @@
+<%# The sortable column title: a link that toggles ?sort=/?dir= with a tri-state
+    glyph (unsorted / asc / desc), picking a numeric vs alphabetic icon.
+    Locals: collection, field, css; optional label (the link text, defaulting to
+    the field's human_name — a custom header: passes its own content here). %>
+<% label = local_assigns.fetch(:label, field.human_name) %>
+<%= link_to collection.sort_url(field),
+            class: "#{css.sort_link} d-inline-flex align-items-center gap-1",
+            title: t('crud_components.sort', default: 'Sort'),
+            data: { turbo_action: 'advance' } do %>
+  <%= label %>
+  <% if (dir = collection.sort_direction(field)) %>
+    <% family = collection.sort_numeric?(field) ? 'sort-numeric' : 'sort-alpha' %>
+    <i class="<%= css.icon_prefix %><%= family %>-<%= dir == :desc ? 'up' : 'down' %>"></i>
+  <% else %>
+    <i class="<%= css.icon_prefix %>arrow-down-up text-muted opacity-25"></i>
+  <% end %>
+<% end %>

data/app/views/crud_components/_toolbar.html.erb

@@ -0,0 +1,50 @@
+<%# Collection toolbar: global ?q= search (+ reset) on the left, collection and
+    selection actions on the right. Layout-agnostic — any layout can render it,
+    so swapping the table shell doesn't mean reimplementing search/actions.
+    Local: `collection`. %>
+<% css = collection.css %>
+<% if collection.searchable? || collection.collection_actions&.any? || collection.selection_actions&.any? %>
+  <div class="<%= css.toolbar %>">
+    <div class="d-flex align-items-center gap-2">
+      <% if collection.searchable? %>
+        <%# plain GET form — works without JavaScript %>
+        <form method="get" action="<%= request.path %>" class="<%= css.search_form %>"
+              data-controller="crud-filter" data-action="submit->crud-filter#clean"
+              data-turbo-action="advance">
+          <% collection.preserved_params.each do |name, value| %>
+            <%= hidden_field_tag name, value, id: nil %>
+          <% end %>
+          <%= tag.input type: 'search', name: collection.search_param_name,
+                        value: collection.search_value, class: css.input_sm,
+                        placeholder: t('crud_components.filter.search', default: 'Search'),
+                        aria: { label: t('crud_components.filter.search', default: 'Search') } %>
+          <button type="submit" class="<%= css.button %>">
+            <%= t('crud_components.filter.search', default: 'Search') %>
+          </button>
+          <% if collection.filtered? %>
+            <%= link_to t('crud_components.filter.reset', default: 'Reset'), collection.reset_url,
+                        class: css.button, data: { turbo_action: 'advance' } %>
+          <% end %>
+        </form>
+      <% end %>
+    </div>
+    <div class="d-flex align-items-center gap-2">
+      <% if collection.selection_actions&.any? %>
+        <%# The bulk-action cluster: a count + the actions that operate on the
+            ticked rows, kept together so it's clear they act on the selection.
+            crud-select disables the buttons while nothing is selected (no-JS:
+            they stay enabled and act on whatever you ticked). %>
+        <div class="d-flex align-items-center gap-2 crud-selection-bar">
+          <span class="<%= css.muted %> small" data-crud-select-target="count"></span>
+          <% collection.selection_actions.items.each do |item| %>
+            <%= render 'crud_components/selection_action', action: item.action, path: item.path,
+                       form_id: collection.select_form_id, css: css %>
+          <% end %>
+        </div>
+      <% end %>
+      <% if collection.collection_actions&.any? %>
+        <%= render 'crud_components/actions', actions: collection.collection_actions %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/crud_components/fields/_asciidoc.html.erb

@@ -0,0 +1,8 @@
+<%# Locals: value, record, field, surface — needs asciidoctor in the host app %>
+<%- if value.nil? || value == '' -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- elsif surface == :collection -%>
+  <%= truncate(strip_tags(CrudComponents::Markup.asciidoc(value)), length: 120) %>
+<%- else -%>
+  <div class="crud-asciidoc"><%= sanitize CrudComponents::Markup.asciidoc(value) %></div>
+<%- end -%>

data/app/views/crud_components/fields/_association.html.erb

@@ -0,0 +1,13 @@
+<%# Locals: value (the associated record or nil), record, field, surface —
+    nil-safe link via the target's label %>
+<%- if value.nil? -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- else -%>
+  <% path = crud_record_path(value, owner: record) %>
+  <% label = crud_association_label(field, value) %>
+  <%- if path -%>
+    <%= link_to label, path, data: { turbo_action: 'advance' } %>
+  <%- else -%>
+    <%= label %>
+  <%- end -%>
+<%- end -%>

data/app/views/crud_components/fields/_association_list.html.erb

@@ -0,0 +1,24 @@
+<%# Locals: value (a collection), record, field, surface, cell_context —
+    truncated list of links: "a, b +3 more" (the "more" link goes to the
+    nested/filtered index when one resolves) %>
+<% items = value.to_a %>
+<% css = CrudComponents.config.css %>
+<%- if items.empty? -%>
+  <span class="<%= css.muted %>">—</span>
+<%- else -%>
+  <% shown = surface == :collection ? items.first(3) : items %>
+  <%= safe_join(shown.map { |item|
+        path = crud_record_path(item, owner: record)
+        label = crud_association_label(field, item)
+        path ? link_to(label, path, data: { turbo_action: 'advance' }) : label.to_s
+      }, ', ') %>
+  <%- if items.size > shown.size -%>
+    <% more = t('crud_components.more', count: items.size - shown.size, default: '+%{count} more') %>
+    <% index_path = crud_association_index_path(record, field) %>
+    <%- if index_path -%>
+      <%= link_to more, index_path, class: css.muted, data: { turbo_action: 'advance' } %>
+    <%- else -%>
+      <span class="<%= css.muted %>"><%= more %></span>
+    <%- end -%>
+  <%- end -%>
+<%- end -%>

data/app/views/crud_components/fields/_attachment.html.erb

@@ -0,0 +1,16 @@
+<%# Default renderer for Active Storage attachments. Locals: value (one or
+    many attachments), record, field, surface, cell_context. Each attachment is
+    drawn by content type via _attachment_thumb (image / preview / icon). %>
+<%- if value.respond_to?(:attached?) && value.attached? -%>
+  <%- if field.respond_to?(:many?) && field.many? -%>
+    <span class="d-inline-flex flex-wrap gap-1">
+      <%- value.each do |attachment| -%>
+        <%= render 'crud_components/fields/attachment_thumb', attachment: attachment, surface: surface %>
+      <%- end -%>
+    </span>
+  <%- else -%>
+    <%= render 'crud_components/fields/attachment_thumb', attachment: value, surface: surface %>
+  <%- end -%>
+<%- else -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- end -%>

data/app/views/crud_components/fields/_attachment_thumb.html.erb

@@ -0,0 +1,17 @@
+<%# One Active Storage attachment, rendered by content type. Locals:
+    attachment, surface. image → inline; previewable (PDF, video, …) → a
+    preview image; anything else → an icon + filename download link.
+    (Previews need a previewer backend, e.g. poppler, + image_processing;
+    without them `previewable?` is false and it falls back to the icon.) %>
+<% css = CrudComponents.config.css %>
+<% style = surface == :record ? 'max-height: 16rem' : 'max-height: 2.5rem' %>
+<%- if attachment.image? -%>
+  <%= image_tag attachment, class: 'rounded crud-image', style: style %>
+<%- elsif attachment.previewable? && CrudComponents.previews_available? -%>
+  <%= image_tag attachment.preview(resize_to_limit: [600, 600]), class: 'rounded crud-image', style: style %>
+<%- else -%>
+  <%= link_to rails_blob_path(attachment, disposition: 'attachment'),
+              class: 'd-inline-flex align-items-center gap-1 text-decoration-none' do %>
+    <i class="<%= css.icon_prefix %><%= crud_file_icon(attachment.filename) %>"></i><span><%= attachment.filename %></span>
+  <% end %>
+<%- end -%>

data/app/views/crud_components/fields/_boolean.html.erb

@@ -0,0 +1,13 @@
+<%# Locals: value, record, field, surface, cell_context %>
+<% css = CrudComponents.config.css %>
+<%- if value.nil? -%>
+  <span class="<%= css.muted %>">—</span>
+<%- else -%>
+  <% icon = tag.span(value ? '✓' : '✗', class: value ? css.boolean_true : css.boolean_false) %>
+  <%- if cell_context&.filterable?(field) -%>
+    <%= link_to icon, cell_context.filter_url(field, value), class: css.filter_link,
+                data: { turbo_action: 'advance' } %>
+  <%- else -%>
+    <%= icon %>
+  <%- end -%>
+<%- end -%>

data/app/views/crud_components/fields/_date.html.erb

@@ -0,0 +1,6 @@
+<%# Locals: value, record, field, surface %>
+<%- if value.nil? -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- else -%>
+  <%= l(value.to_date) %>
+<%- end -%>

data/app/views/crud_components/fields/_datetime.html.erb

@@ -0,0 +1,6 @@
+<%# Locals: value, record, field, surface %>
+<%- if value.nil? -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- else -%>
+  <%= l(value, format: :short) %>
+<%- end -%>

data/app/views/crud_components/fields/_email.html.erb

@@ -0,0 +1,7 @@
+<%# Renders an email value as a mailto: link. Locals: value, record, field,
+    surface, cell_context. Used automatically for columns named email / *_email. %>
+<%- if value.nil? || value == '' -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- else -%>
+  <%= mail_to value.to_s %>
+<%- end -%>

data/app/views/crud_components/fields/_enum.html.erb

@@ -0,0 +1,14 @@
+<%# Locals: value, record, field, surface, cell_context %>
+<% css = CrudComponents.config.css %>
+<%- if value.nil? -%>
+  <span class="<%= css.muted %>">—</span>
+<%- else -%>
+  <% label = field.respond_to?(:human_value) ? field.human_value(value) : value %>
+  <% badge = tag.span(label, class: css.badge) %>
+  <%- if cell_context&.filterable?(field) -%>
+    <%= link_to badge, cell_context.filter_url(field, value), class: css.filter_link,
+                data: { turbo_action: 'advance' }, title: t('crud_components.filter_by', name: label, default: "Filter by #{label}") %>
+  <%- else -%>
+    <%= badge %>
+  <%- end -%>
+<%- end -%>

data/app/views/crud_components/fields/_json.html.erb

@@ -0,0 +1,10 @@
+<%# Locals: value, record, field, surface — pretty-printed; highlighted via
+    rouge when the host app has it %>
+<%- if value.nil? -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- else -%>
+  <% pretty = value.is_a?(String) ? value : JSON.pretty_generate(value) %>
+  <% pretty = truncate(pretty, length: 120) if surface == :collection %>
+  <% highlighted = CrudComponents::Markup.highlight_json(pretty) %>
+  <pre class="crud-json mb-0"><code><%= highlighted ? raw(highlighted) : pretty %></code></pre>
+<%- end -%>

data/app/views/crud_components/fields/_markdown.html.erb

@@ -0,0 +1,9 @@
+<%# Locals: value, record, field, surface — needs commonmarker, redcarpet or
+    kramdown in the host app (validated at structure build) %>
+<%- if value.nil? || value == '' -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- elsif surface == :collection -%>
+  <%= truncate(strip_tags(CrudComponents::Markup.markdown(value)), length: 120) %>
+<%- else -%>
+  <div class="crud-markdown"><%= sanitize CrudComponents::Markup.markdown(value) %></div>
+<%- end -%>

data/app/views/crud_components/fields/_number.html.erb

@@ -0,0 +1,8 @@
+<%# Locals: value, record, field, surface — options: unit:, digits: %>
+<%- if value.nil? -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- else -%>
+  <% options = field.renderer_options %>
+  <% formatted = options[:digits] ? number_with_precision(value, precision: options[:digits], delimiter: ',') : number_with_delimiter(value) %>
+  <%= formatted %><%= " #{options[:unit]}" if options[:unit] %>
+<%- end -%>

data/app/views/crud_components/fields/_string.html.erb

@@ -0,0 +1,8 @@
+<%# Locals: value, record, field, surface %>
+<%- if value.nil? || value == '' -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- elsif surface == :collection -%>
+  <%= truncate(value.to_s, length: 120) %>
+<%- else -%>
+  <%= value %>
+<%- end -%>

data/app/views/crud_components/fields/_text.html.erb

@@ -0,0 +1,9 @@
+<%# Locals: value, record, field, surface — truncated in collections,
+    line breaks preserved on record pages %>
+<%- if value.nil? || value == '' -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- elsif surface == :collection -%>
+  <%= truncate(value.to_s, length: 120) %>
+<%- else -%>
+  <div class="crud-text" style="white-space: pre-line"><%= value %></div>
+<%- end -%>

data/app/views/crud_components/fields/_url.html.erb

@@ -0,0 +1,11 @@
+<%# Renders an http(s) URL as a link; anything else stays plain text (gated on
+    the value, so a non-URL never becomes a link). Locals: value, record, field,
+    surface, cell_context. Used automatically for columns named url/website/link. %>
+<%- if value.nil? || value == '' -%>
+  <span class="<%= CrudComponents.config.css.muted %>">—</span>
+<%- elsif value.to_s.match?(%r{\Ahttps?://}i) -%>
+  <%= link_to(surface == :collection ? truncate(value.to_s, length: 60) : value.to_s,
+              value.to_s, rel: 'noopener', target: '_blank') %>
+<%- else -%>
+  <%= value %>
+<%- end -%>

data/app/views/crud_components/filters/_boolean.html.erb

@@ -0,0 +1,12 @@
+<%# Locals: field, query, form_id, compact, autosubmit, param_name, css %>
+<% choices = [
+     [t('crud_components.filter.any', default: '–'), ''],
+     [t('crud_components.filter.yes', default: 'Yes'), 'true'],
+     [t('crud_components.filter.no', default: 'No'), 'false']
+   ] %>
+<% choices << [t('crud_components.filter.not_set', default: 'Not set'), CrudComponents::NULL_FILTER_VALUE] if field.filter_includes_null? %>
+<%= select_tag param_name,
+               options_for_select(choices, query.value(field.name.to_s)),
+               class: compact ? css.select_input_sm : css.select_input, form: form_id, id: nil,
+               data: (autosubmit ? { action: 'change->crud-filter#submit' } : {}),
+               aria: { label: field.human_name } %>

data/app/views/crud_components/filters/_date_range.html.erb

@@ -0,0 +1,11 @@
+<%# Locals: field, query, form_id, compact, autosubmit, param_name, css %>
+<div class="<%= compact ? 'd-flex flex-column gap-1' : css.input_group %>">
+  <%= tag.input type: 'date', name: "#{param_name}_geq",
+                value: query.value("#{field.name}_geq"),
+                class: compact ? css.input_sm : css.input, form: form_id,
+                aria: { label: "#{field.human_name} ≥" } %>
+  <%= tag.input type: 'date', name: "#{param_name}_leq",
+                value: query.value("#{field.name}_leq"),
+                class: compact ? css.input_sm : css.input, form: form_id,
+                aria: { label: "#{field.human_name} ≤" } %>
+</div>