panda-core 0.12.2 → 1.1.0

data/app/components/panda/core/admin/tab_bar_component.rb

@@ -4,95 +4,60 @@ module Panda
   module Core
     module Admin
       class TabBarComponent < Panda::Core::Base
-        prop :tabs, Array, default: -> { [].freeze }
-
-        def view_template
-          div(class: "mt-3 sm:mt-2") do
-            render_mobile_select
-            render_desktop_tabs
-          end
+        def initialize(tabs: [].freeze, **attrs)
+          @tabs = tabs
+          super(**attrs)
         end
 
+        attr_reader :tabs
+
         private
 
-        def render_mobile_select
-          div(class: "sm:hidden") do
-            label(for: "tabs", class: "sr-only") { "Select a tab" }
-            select(
-              id: "tabs",
-              name: "tabs",
-              class: "block py-1.5 pr-10 pl-3 w-full text-gray-900 rounded-md border-0 ring-1 ring-inset focus:ring-2 focus:ring-inset ring-mid focus:border-panda-dark focus:ring-panda-dark"
-            ) do
-              @tabs.each do |tab|
-                option { tab[:name] }
-              end
-            end
-          end
+        def any_tab_current?
+          @any_tab_current ||= @tabs.any? { |tab| tab[:current] }
         end
 
-        def render_desktop_tabs
-          div(class: "hidden sm:block") do
-            div(class: "flex items-center border-b border-gray-200") do
-              nav(class: "flex flex-1 -mb-px space-x-6 xl:space-x-8", aria: {label: "Tabs"}) do
-                @tabs.each_with_index do |tab, index|
-                  render_tab(tab, index.zero?)
-                end
-              end
-              render_view_toggle
-            end
-          end
+        def tab_current?(tab, index)
+          tab[:current] || (!any_tab_current? && index.zero?)
         end
 
-        def render_tab(tab, is_current = false)
+        def tab_classes(tab, index)
           classes = "py-4 px-1 text-sm font-medium whitespace-nowrap border-b-2 "
-          classes += if is_current || tab[:current]
-            "border-panda-dark text-panda-dark"
+          classes += if tab_current?(tab, index)
+            "border-primary-600 text-primary-600"
           else
             "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
           end
-
-          a(
-            href: tab[:url] || "#",
-            class: classes,
-            aria: {current: (is_current || tab[:current]) ? "page" : nil}
-          ) { tab[:name] }
+          classes
         end
 
-        def render_view_toggle
-          div(class: "hidden items-center p-0.5 ml-6 bg-gray-100 rounded-lg sm:flex") do
-            render_view_button(:list)
-            render_view_button(:grid, selected: true)
-          end
-        end
-
-        def render_view_button(type, selected: false)
-          button_class = "p-1.5 text-gray-400 rounded-md focus:ring-2 focus:ring-inset focus:outline-none focus:ring-panda-dark"
+        def view_button_classes(selected)
+          button_class = "p-1.5 text-gray-400 rounded-md focus:ring-2 focus:ring-inset focus:outline-none focus:ring-primary-600"
           button_class += if selected
             " ml-0.5 bg-white shadow-sm"
           else
             " hover:bg-white hover:shadow-sm"
           end
+          button_class
+        end
+
+        def list_view_icon
+          content_tag(:svg, class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do
+            tag.path(
+              fill_rule: "evenodd",
+              d: "M2 3.75A.75.75 0 012.75 3h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.166a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z",
+              clip_rule: "evenodd"
+            )
+          end
+        end
 
-          button(type: "button", class: button_class) do
-            if type == :list
-              svg(class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d: "M2 3.75A.75.75 0 012.75 3h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.166a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z",
-                  clip_rule: "evenodd"
-                )
-              end
-              span(class: "sr-only") { "Use list view" }
-            else
-              svg(class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do |s|
-                s.path(
-                  fill_rule: "evenodd",
-                  d: "M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z",
-                  clip_rule: "evenodd"
-                )
-              end
-              span(class: "sr-only") { "Use grid view" }
-            end
+        def grid_view_icon
+          content_tag(:svg, class: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", aria: {hidden: "true"}) do
+            tag.path(
+              fill_rule: "evenodd",
+              d: "M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z",
+              clip_rule: "evenodd"
+            )
           end
         end
       end

data/app/components/panda/core/admin/table_component.html.erb

@@ -0,0 +1,82 @@
+<%# Chrome (bg/border/radius, header/row borders, cell text colour) is
+    themeable via the --panda-panel-* / --panda-table-* tokens — see
+    app/assets/tailwind/application.css. Fallbacks resolve to today's
+    literal utilities exactly, so this is a no-op unless a host app sets
+    data-theme. %>
+<% if rows.any? %>
+  <% if responsive? %>
+    <%# Mobile card view - hidden on lg screens %>
+    <div class="mb-12 space-y-3 lg:hidden">
+      <% rows.each do |row| %>
+        <div class="rounded-[var(--panda-panel-radius,var(--radius-2xl))] border border-[var(--panda-panel-border,var(--color-gray-200))] bg-[var(--panda-panel-bg,var(--color-white))] p-4 hover:bg-gray-50 transition-colors" data-controller="row-link" data-action="click->row-link#click">
+          <% columns.each_with_index do |column, i| %>
+            <% cell_content = render_cell_content(row, column.cell) %>
+            <% if i == 0 %>
+              <div class="font-medium text-gray-900 text-sm mb-2"><%= cell_content %></div>
+            <% else %>
+              <% if cell_content.present? && cell_content.to_s.strip.present? %>
+                <div class="flex justify-between items-baseline py-1">
+                  <span class="text-xs text-gray-400"><%= column.label %></span>
+                  <span class="text-sm text-gray-600"><%= cell_content %></span>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%# Desktop table view %>
+  <div class="mb-12 w-full overflow-x-auto rounded-[var(--panda-panel-radius,var(--radius-2xl))] border border-[var(--panda-panel-border,var(--color-gray-200))] bg-[var(--panda-panel-bg,var(--color-white))] <%= 'hidden lg:block' if responsive? %>" data-controller="row-link" data-action="click->row-link#click">
+    <%# Header %>
+    <div class="table w-full" style="table-layout: fixed;">
+      <div class="table-header-group">
+        <div class="table-row text-sm font-medium text-gray-500 truncate bg-[var(--panda-table-header-bg,var(--color-gray-50))] border-b border-[var(--panda-table-border,var(--color-gray-200))]">
+        <% columns.each do |column| %>
+          <% header_style = column.width ? "width: #{column.width};" : nil %>
+          <% aria_sort = if column.sortable? && sort == column.sort_key
+                          sort_direction == "asc" ? "ascending" : "descending"
+                        elsif column.sortable?
+                          "none"
+                        end %>
+          <div class="table-cell sticky top-0 z-10 px-4 py-3 align-middle" style="<%= header_style %>"<% if aria_sort %> aria-sort="<%= aria_sort %>"<% end %>>
+            <% if column.sortable? %>
+              <a href="<%= sort_url_for(column) %>" class="inline-flex items-center gap-1 hover:text-gray-900 transition-colors group" aria-label="Sort by <%= column.label %>">
+                <%= column.label %>
+                <% if (indicator = sort_indicator_for(column)) %>
+                  <span class="text-gray-700 text-xs" aria-hidden="true"><%= indicator %></span>
+                <% else %>
+                  <span class="text-gray-300 text-xs opacity-0 group-hover:opacity-100 transition-opacity" aria-hidden="true">↕</span>
+                <% end %>
+              </a>
+            <% else %>
+              <%= column.label %>
+            <% end %>
+          </div>
+        <% end %>
+        </div>
+      </div>
+
+      <%# Rows %>
+       <div class="table-row-group">
+         <% rows.each do |row| %>
+           <div class="table-row odd:bg-white even:bg-gray-50/60 hover:bg-gray-100 cursor-pointer" data-<%= term %>-id="<%= row.id %>">
+             <% columns.each do |column| %>
+              <div class="table-cell px-4 py-3 text-sm align-middle break-words border-b border-[var(--panda-table-row-border,color-mix(in_srgb,var(--color-gray-200)_70%,transparent))] text-[var(--panda-table-cell-color,var(--color-gray-600))]">
+                <%= render_cell_content(row, column.cell) %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <%# Empty state %>
+  <%= render Panda::Core::Admin::EmptyStateComponent.new(
+    title: "No #{term.pluralize}",
+    description: "Get started by creating a new #{term}.",
+    icon: icon
+  ) %>
+<% end %>

data/app/components/panda/core/admin/table_component.rb

@@ -4,122 +4,89 @@ module Panda
   module Core
     module Admin
       class TableComponent < Panda::Core::Base
-        prop :term, String
-        prop :rows, _Nilable(Object), default: -> { [] }
-        prop :icon, String, default: ""
-
-        attr_reader :columns
-
-        def initialize(**props)
-          super
+        attr_reader :term, :rows, :icon, :sort, :sort_direction
+
+        def initialize(term: "", rows: [], icon: "", responsive: true, sort: nil, sort_direction: nil, **attrs, &block)
+          @term = term
+          @rows = rows
+          @icon = icon
+          @responsive = responsive
+          @sort = sort&.to_s
+          @sort_direction = (sort_direction&.to_s == "desc") ? "desc" : "asc"
           @columns = []
+          @setup_block = block
+          super(**attrs)
         end
 
-        def view_template(&block)
-          # Capture the block to populate columns
-          instance_eval(&block) if block_given?
-
-          if @rows.any?
-            render_table_with_rows
-          else
-            render_empty_table
-          end
+        def responsive?
+          @responsive
         end
 
-        def column(label, width: nil, &cell_block)
-          @columns << Column.new(label, width, &cell_block)
+        def column(label, width: nil, sortable: false, sort_key: nil, &cell_block)
+          @columns << Column.new(label, width, sortable: sortable, sort_key: sort_key, &cell_block)
+          self  # Allow chaining
         end
 
-        private
-
-        def render_table_with_rows
-          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark", style: "table-layout: fixed;") do
-            render_header
-            render_rows
-          end
+        def render_cell_content(row, cell_block)
+          # Use capture to properly handle ERB blocks that output to the template buffer.
+          # Directly calling cell_block.call(row) causes double-rendering because ERB blocks
+          # both output to the buffer AND return their last expression.
+          helpers.capture(row, &cell_block)
         end
 
-        def render_empty_table
-          div(class: "text-center block border border-dashed py-12 rounded-lg") do
-            i(class: "#{@icon} text-4xl text-gray-400 mb-3") if @icon.present?
-            h3(class: "py-1 text-xl font-semibold text-gray-900") { "No #{@term.pluralize}" }
-            p(class: "py-1 text-base text-gray-500") { "Get started by creating a new #{@term}." }
-          end
+        def sort_url_for(column)
+          return unless column.sortable?
+
+          new_direction = (sort == column.sort_key && sort_direction == "asc") ? "desc" : "asc"
+          request = helpers.request
+          query_params = request.query_parameters.merge("sort" => column.sort_key, "direction" => new_direction)
+          "#{request.path}?#{query_params.to_query}"
         end
 
-        def render_header
-          div(class: "table-header-group") do
-            div(class: "table-row text-base font-medium text-white bg-dark") do
-              @columns.each_with_index do |column, i|
-                header_classes = "table-cell sticky top-0 z-10 p-4"
-                header_classes += " rounded-tl-md" if i.zero?
-                header_classes += " rounded-tr-md" if i == @columns.size - 1
+        def sort_indicator_for(column)
+          return unless sort == column.sort_key
 
-                header_style = column.width ? "width: #{column.width};" : nil
-                div(class: header_classes, style: header_style) { column.label }
-              end
-            end
-          end
+          (sort_direction == "asc") ? "↑" : "↓"
         end
 
-        def render_rows
-          div(class: "table-row-group") do
-            @rows.each do |row|
-              div(
-                class: "table-row relative bg-gray-500/5 hover:bg-gray-500/20",
-                data: {post_id: row.id}
-              ) do
-                @columns.each do |column|
-                  div(class: "table-cell py-5 px-3 h-20 text-sm align-middle whitespace-nowrap border-b border-dark/20") do
-                    # Capture the cell content by calling the block with the row
-                    render_cell_content(row, column.cell)
-                  end
-                end
-              end
+        # Lazy accessor that ensures columns are registered before returning them.
+        # Supports two patterns:
+        # 1. Block passed to new() - executed here (for tests)
+        # 2. Block passed to render() - executed via content (for ERB templates)
+        def columns
+          unless @columns_registered
+            if @setup_block
+              # Block was passed to new() - execute it
+              @setup_block.call(self)
+            else
+              # Block was passed to render() - execute via content
+              content
             end
+            @columns_registered = true
           end
+          @columns
         end
 
-        def render_cell_content(row, cell_block)
-          # When called from ERB, we need to capture the block's output buffer
-          # When called from Phlex, evaluate directly
-          if defined?(view_context) && view_context
-            # Use capture to get ERB output buffer content
-            captured_html = view_context.capture(row, &cell_block)
-            # Render the captured HTML (already html_safe from capture)
-            raw(captured_html)
-          else
-            # Pure Phlex context - execute block directly
-            result = cell_block.call(row)
+        private
 
-            # Handle different return types
-            if result.is_a?(String)
-              plain(result)
-            elsif result.respond_to?(:render_in)
-              render(result)
-            else
-              plain(result.to_s)
-            end
-          end
+        def pluralized_term
+          @pluralized_term ||= ActiveSupport::Inflector.pluralize(term)
         end
       end
 
       class Column
-        attr_reader :label, :cell, :width
+        attr_reader :label, :cell, :width, :sort_key
 
-        def initialize(label, width = nil, &block)
+        def initialize(label, width = nil, sortable: false, sort_key: nil, &block)
           @label = label
           @width = width
+          @sortable = sortable
+          @sort_key = sort_key || ActiveSupport::Inflector.parameterize(label.to_s, separator: "_")
           @cell = block
         end
-      end
 
-      class TagColumn < Column
-        attr_reader :label, :cell
-
-        def initialize(label, &block)
-          @label = label
-          @cell = Panda::Core::Admin::TagComponent.new(status: block)
+        def sortable?
+          @sortable
         end
       end
     end

data/app/components/panda/core/admin/tag_badge_component.html.erb

@@ -0,0 +1,7 @@
+<span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium"
+      style="background-color: <%= colour %>1a; color: <%= colour %>; border: 1px solid <%= colour %>33;">
+  <%= tag.name %>
+  <% if removable %>
+    <button type="button" class="ml-0.5 hover:opacity-70" data-action="tag-input#removeTag" data-tag-id="<%= tag.id %>">&times;</button>
+  <% end %>
+</span>

data/app/components/panda/core/admin/tag_badge_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class TagBadgeComponent < Panda::Core::Base
+        attr_reader :tag, :removable
+
+        def initialize(tag:, removable: false, **attrs)
+          @tag = tag
+          @removable = removable
+          super(**attrs)
+        end
+
+        def colour
+          tag.display_colour
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/tag_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag :span, computed_text, class: tag_classes %>

data/app/components/panda/core/admin/tag_component.rb

@@ -4,15 +4,14 @@ module Panda
   module Core
     module Admin
       class TagComponent < Panda::Core::Base
-        prop :status, Symbol, default: :active
-        prop :text, _Nilable(String), default: -> {}
-        prop :page_type, _Nilable(Symbol), default: -> {}
-
-        def view_template
-          span(class: tag_classes) { computed_text }
+        def initialize(text: nil, page_type: nil, status: :active, **attrs)
+          @status = status
+          @text = text
+          @page_type = page_type
+          super(**attrs)
         end
 
-        private
+        attr_reader :status, :text, :page_type
 
         def computed_text
           if @page_type
@@ -33,44 +32,76 @@ module Panda
           end
         end
 
+        # Badge colours are themeable via the --panda-badge-{success,error,
+        # warning,info,neutral}-{bg,fg} tokens (see
+        # app/assets/tailwind/application.css). Each helper below returns an
+        # arbitrary-value Tailwind utility pair whose var() fallback resolves
+        # to exactly today's literal emerald/amber/sky/rose/gray-100
+        # utility classes, so this is a no-op unless a host app sets
+        # data-theme.
         def tag_classes
-          base = "inline-flex items-center py-1 px-2 text-xs font-medium rounded-md ring-1 ring-inset "
+          base = "inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full "
           base + (@page_type ? type_classes : status_classes)
         end
 
         def type_classes
           case @page_type
           when :system
-            "text-red-700 bg-red-100 ring-red-600/20 dark:bg-red-400/10 dark:text-red-400"
+            badge_classes(:error)
           when :posts
-            "text-purple-700 bg-purple-100 ring-purple-600/20 dark:bg-purple-400/10 dark:text-purple-400"
+            badge_classes(:info)
           when :code
-            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+            badge_classes(:info)
           when :standard
-            "text-green-700 bg-green-100 ring-green-600/20 dark:bg-green-400/10 dark:text-green-400"
+            badge_classes(:success)
           when :hidden_type
-            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+            badge_classes(:neutral)
           else
-            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+            badge_classes(:neutral)
           end
         end
 
         def status_classes
           case @status
           when :active
-            "text-white ring-black/30 bg-green-600 border-0"
+            badge_classes(:success)
+          when :live
+            badge_classes(:success)
           when :draft
-            "text-black ring-black/30 bg-yellow-400"
+            badge_classes(:warning)
           when :inactive, :hidden
-            "text-black ring-black/30 bg-black/5 bg-white"
+            badge_classes(:neutral)
           when :auto
-            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+            badge_classes(:info)
+          when :warning
+            badge_classes(:error)
           when :static
-            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+            badge_classes(:neutral)
           else
-            "text-black bg-white"
+            badge_classes(:neutral)
           end
         end
+
+        private
+
+        # Tailwind's content scanner extracts candidate class names by
+        # scanning raw source text — it does not evaluate Ruby, so every
+        # arbitrary-value class must appear as a complete literal string
+        # somewhere in this file (interpolating the tone into the class name
+        # would produce unscannable text like "bg-[var(--panda-badge-#{tone}
+        # -bg...)]" and silently generate no CSS).
+        BADGE_CLASSES = {
+          success: "text-[var(--panda-badge-success-fg,var(--color-emerald-600))] bg-[var(--panda-badge-success-bg,var(--color-emerald-50))]",
+          warning: "text-[var(--panda-badge-warning-fg,var(--color-amber-600))] bg-[var(--panda-badge-warning-bg,var(--color-amber-50))]",
+          info: "text-[var(--panda-badge-info-fg,var(--color-sky-600))] bg-[var(--panda-badge-info-bg,var(--color-sky-50))]",
+          error: "text-[var(--panda-badge-error-fg,var(--color-rose-600))] bg-[var(--panda-badge-error-bg,var(--color-rose-50))]",
+          neutral: "text-[var(--panda-badge-neutral-fg,var(--color-gray-600))] bg-[var(--panda-badge-neutral-bg,var(--color-gray-100))]"
+        }.freeze
+        private_constant :BADGE_CLASSES
+
+        def badge_classes(tone)
+          BADGE_CLASSES.fetch(tone)
+        end
       end
     end
   end

data/app/components/panda/core/admin/tag_input_component.html.erb

@@ -0,0 +1,37 @@
+<div data-controller="tag-input"
+     data-tag-input-url-value="<%= tags_url %>"
+     data-tag-input-selected-value="<%= selected_tags_json %>"
+     class="relative">
+
+  <%# Selected tags as pills + hidden inputs %>
+  <div data-tag-input-target="selected" class="flex flex-wrap gap-1.5 mb-2">
+    <% selected_tags.each do |tag| %>
+      <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium"
+            style="background-color: <%= tag.display_colour %>1a; color: <%= tag.display_colour %>; border: 1px solid <%= tag.display_colour %>33;"
+            data-tag-id="<%= tag.id %>">
+        <%= tag.name %>
+        <button type="button" class="ml-0.5 hover:opacity-70" data-action="tag-input#removeTag" data-tag-id="<%= tag.id %>">&times;</button>
+      </span>
+    <% end %>
+  </div>
+
+  <%# Hidden inputs for form submission %>
+  <div data-tag-input-target="hiddenInputs">
+    <% selected_tags.each do |tag| %>
+      <input type="hidden" name="<%= field_name %>" value="<%= tag.id %>" data-tag-id="<%= tag.id %>">
+    <% end %>
+  </div>
+
+  <%# Search input %>
+  <input type="text"
+         data-tag-input-target="input"
+         data-action="focus->tag-input#showAll input->tag-input#search keydown->tag-input#keydown"
+         placeholder="Search or add tags..."
+         autocomplete="off"
+         class="block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
+
+  <%# Results dropdown %>
+  <div data-tag-input-target="results"
+       class="absolute z-10 mt-1 hidden w-full rounded-lg border border-gray-200 bg-white shadow-lg max-h-48 overflow-y-auto">
+  </div>
+</div>

data/app/components/panda/core/admin/tag_input_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class TagInputComponent < Panda::Core::Base
+        attr_reader :field_name, :tags_url, :selected_tags
+
+        def initialize(tags_url:, field_name: "tag_ids[]", selected_tags: [], **attrs)
+          @field_name = field_name
+          @tags_url = tags_url
+          @selected_tags = selected_tags
+          super(**attrs)
+        end
+
+        def selected_tags_json
+          selected_tags.map { |t| {id: t.id, name: t.name, colour: t.display_colour} }.to_json
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/tags_panel_component.html.erb

@@ -0,0 +1,8 @@
+<%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+  <% panel.with_heading_slot { heading } %>
+  <div class="flex flex-wrap gap-2">
+    <% tags.each do |tag| %>
+      <%= render Panda::Core::Admin::TagBadgeComponent.new(tag: tag) %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/panda/core/admin/tags_panel_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Renders a PanelComponent containing TagBadgeComponents for a collection of tags.
+      # Self-hides via `render?` when the tags collection is empty.
+      #
+      # Lives in panda-core because tags are a core Panda concept (Panda::Core::Tag)
+      # and this component composes two existing panda-core components (PanelComponent
+      # and TagBadgeComponent) into a pattern used on most admin show pages.
+      #
+      # @example Basic usage
+      #   render Panda::Core::Admin::TagsPanelComponent.new(tags: @person.tags)
+      #
+      # @example Custom heading
+      #   render Panda::Core::Admin::TagsPanelComponent.new(tags: @item.tags, heading: "Categories")
+      class TagsPanelComponent < Panda::Core::Base
+        attr_reader :tags, :heading
+
+        def initialize(tags:, heading: "Tags", **attrs)
+          @tags = tags
+          @heading = heading
+          super(**attrs)
+        end
+
+        def render?
+          tags.present? && tags.any?
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/user_activity_component.html.erb

@@ -0,0 +1,15 @@
+<% if should_render? %>
+  <% if @user.present? && time %>
+    <%= render Panda::Core::Admin::UserDisplayComponent.new(
+      user: @user,
+      metadata: "#{time_ago_in_words(time)} ago"
+    ) %>
+  <% elsif @user.present? %>
+    <%= render Panda::Core::Admin::UserDisplayComponent.new(
+      user: @user,
+      metadata: "Not published"
+    ) %>
+  <% elsif time %>
+    <div class="text-black/60"><%= "#{time_ago_in_words(time)} ago" %></div>
+  <% end %>
+<% end %>