plutonium 0.65.0 → 0.67.0

data/lib/plutonium/ui/form/components/key_value_store.rb

@@ -44,21 +44,6 @@ module Plutonium
             attributes[:data][:key_value_store_limit_value] = limit
           end
 
-          def render_header
-            div(class: "key-value-store-header") do
-              if attributes[:label]
-                h3(class: "text-lg font-semibold text-[var(--pu-text)]") do
-                  plain attributes[:label]
-                end
-              end
-              if attributes[:description]
-                p(class: "text-sm text-[var(--pu-text-muted)]") do
-                  plain attributes[:description]
-                end
-              end
-            end
-          end
-
           def render_key_value_pairs
             # Hidden sentinel input ensures the field is always present in params when the
             # component is rendered. Without this, removing all pairs would submit nothing,
@@ -75,42 +60,37 @@ module Plutonium
 
           def render_key_value_pair(key, value, index)
             div(
-              class: "key-value-pair flex items-center gap-2 p-2 border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)]",
+              class: "key-value-pair flex items-center gap-2",
               data_key_value_store_target: "pair"
             ) do
-              # Key input
-              input(
-                type: :text,
-                placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.key_placeholder"),
-                value: key,
-                name: "#{field_name}[#{index}][key]",
-                id: "#{field.dom.id}_#{index}_key",
-                class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
-                data_key_value_store_target: "keyInput"
-              )
-
-              # Value input
-              input(
-                type: :text,
-                placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.value_placeholder"),
-                value: value,
-                name: "#{field_name}[#{index}][value]",
-                id: "#{field.dom.id}_#{index}_value",
-                class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
-                data_key_value_store_target: "valueInput"
-              )
-
-              # Remove button
+              render_pair_input(:key, key, index)
+              render_pair_input(:value, value, index)
+
               button(
                 type: :button,
-                class: "px-2 py-1 text-danger-600 hover:text-danger-800 focus:outline-none transition-colors",
+                class: "pu-btn pu-btn-sm pu-btn-ghost text-danger-600 dark:text-danger-400",
+                aria_label: Plutonium::Translation.t("plutonium.ui.form.key_value_store.remove_pair"),
                 data_action: "key-value-store#removePair"
               ) do
-                plain "×"
+                render Phlex::TablerIcons::X.new(class: "w-4 h-4")
               end
             end
           end
 
+          # `part` is :key or :value. The template row passes "__INDEX__", which
+          # the controller swaps for the real index when it clones the row.
+          def render_pair_input(part, value, index)
+            input(
+              type: :text,
+              placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.#{part}_placeholder"),
+              value:,
+              name: "#{field_name}[#{index}][#{part}]",
+              id: "#{field.dom.id}_#{index}_#{part}",
+              class: "pu-input flex-1 min-w-0",
+              data_key_value_store_target: "#{part}Input"
+            )
+          end
+
           def render_add_button
             div(class: "key-value-store-actions mt-2") do
               button(
@@ -129,36 +109,7 @@ module Plutonium
 
           def render_template
             template(data_key_value_store_target: "template") do
-              div(
-                class: "key-value-pair flex items-center gap-2 p-2 border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)]",
-                data_key_value_store_target: "pair"
-              ) do
-                input(
-                  type: :text,
-                  placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.key_placeholder"),
-                  name: "#{field_name}[__INDEX__][key]",
-                  id: "#{field.dom.id}___INDEX___key",
-                  class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
-                  data_key_value_store_target: "keyInput"
-                )
-
-                input(
-                  type: :text,
-                  placeholder: Plutonium::Translation.t("plutonium.ui.form.key_value_store.value_placeholder"),
-                  name: "#{field_name}[__INDEX__][value]",
-                  id: "#{field.dom.id}___INDEX___value",
-                  class: "flex-1 px-3 py-1 text-sm border border-[var(--pu-border)] rounded-[var(--pu-radius-sm)] focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-[var(--pu-surface)] text-[var(--pu-text)]",
-                  data_key_value_store_target: "valueInput"
-                )
-
-                button(
-                  type: :button,
-                  class: "px-2 py-1 text-danger-600 hover:text-danger-800 focus:outline-none transition-colors",
-                  data_action: "key-value-store#removePair"
-                ) do
-                  plain "×"
-                end
-              end
+              render_key_value_pair(nil, nil, "__INDEX__")
             end
           end
 

data/lib/plutonium/ui/form/components/list.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # An array value edited as chips: a multi-select (slim-select) whose
+        # options are the current values plus any `suggestions:`.
+        #
+        #   addable: false  only suggestions can be picked (default: values
+        #                   can be typed in)
+        #   limit: 5        caps the number of chips
+        class List < Phlexi::Form::Components::Select
+          protected
+
+          def build_attributes
+            @suggestions = Array(attributes.delete(:suggestions))
+            @limit = attributes.delete(:limit)
+            @addable = attributes.delete(:addable) != false
+
+            attributes[:multiple] = true
+            attributes[:choices] ||= (current_values + @suggestions.map(&:to_s)).uniq
+            attributes[:data_slim_select_addable_value] = "true" if @addable
+            attributes[:data_slim_select_max_selected_value] = @limit if @limit
+            super
+          end
+
+          def current_values = Array(field.value).map(&:to_s)
+
+          def selected?(option) = current_values.include?(option.to_s)
+
+          # Selecting nothing submits the hidden "" alone, which clears the list.
+          def normalize_input(input_value)
+            super&.reject(&:blank?)
+          end
+
+          # Typed-in values aren't among the rendered choices, so only a
+          # non-addable list restricts the submission to them.
+          def normalize_simple_input(input_value)
+            @addable ? input_value&.to_s : super
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/rating.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # A star picker: one radio per star, no JS. The radios run from `max:`
+        # (default 5) down to 1 in a row-reversed flex box, so `.pu-rating`'s
+        # `:checked ~ label` and `:hover ~ label` rules fill the stars up to
+        # the chosen or hovered one. An optional rating ends with a "Clear"
+        # radio (blank value); it comes last so no fill rule reaches it.
+        class Rating < Phlexi::Form::Components::Base
+          include Phlexi::Form::Components::Concerns::HandlesInput
+
+          def view_template
+            fieldset(id: attributes[:id], class: tokens("pu-rating", attributes[:class]), role: :radiogroup) do
+              @max.downto(1) do |score|
+                id = "#{attributes[:id]}_#{score}"
+                input(type: :radio, id:, name: attributes[:name], value: score, checked: field.value.to_i == score,
+                  required: attributes[:required], disabled: attributes[:disabled], class: "sr-only")
+                label(for: id, title: star_label(score)) do
+                  render Phlex::TablerIcons::Star.new
+                  span(class: "sr-only") { star_label(score) }
+                end
+              end
+              render_clear unless attributes[:required]
+            end
+          end
+
+          protected
+
+          def build_attributes
+            super
+            @max = attributes.delete(:max) || 5
+          end
+
+          private
+
+          def render_clear
+            id = "#{attributes[:id]}_clear"
+            input(type: :radio, id:, name: attributes[:name], value: "", checked: field.value.blank?,
+              disabled: attributes[:disabled], class: "sr-only")
+            label(for: id, class: "pu-rating-clear") { Plutonium::Translation.t("plutonium.ui.form.rating.clear") }
+          end
+
+          def star_label(score) = Plutonium::Translation.t("plutonium.ui.display.rating.label", value: score, max: @max)
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/rich_text.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # A `has_rich_text` field, rendered through Action Text's own helper:
+        # Trix by default, Lexxy once the app adds the lexxy gem (which takes
+        # over the helper). The editor's JS comes from the app's bundle.
+        class RichText < Phlexi::Form::Components::Base
+          include Phlexi::Form::Components::Concerns::HandlesInput
+
+          def view_template
+            raw(safe(helpers.rich_text_area_tag(attributes[:name], field.value, id: attributes[:id], required: attributes[:required])))
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/tags.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # Chip input for a no_fly_list `has_tags` context. Suggests the tags
+        # that already exist in the record's tag scope (its tenant), follows
+        # the context's `restrict_to_existing` and `limit`, and submits to the
+        # `<context>_list` writer.
+        class Tags < List
+          SUGGESTION_LIMIT = 200
+
+          protected
+
+          def build_attributes
+            context = Plutonium::UI::Options::TagsField.context(field.object, field.key)
+            attributes[:input_param] ||= :"#{field.key}_list"
+            attributes[:addable] = !context[:restrict_to_existing] unless attributes.key?(:addable)
+            attributes[:limit] ||= context[:limit]
+            attributes[:suggestions] ||= existing_tags(context)
+            super
+          end
+
+          # The proxy, not the association: on a failed save it still holds
+          # what was submitted.
+          def current_values
+            field.object.public_send(:"#{field.key}_list").to_a
+          end
+
+          private
+
+          def existing_tags(context)
+            tags = context[:tag_class_name].constantize.order(:name).limit(SUGGESTION_LIMIT)
+            if (scope = context[:scope])
+              column = field.object.class.reflect_on_association(scope)&.foreign_key || scope
+              tags = tags.where(column => field.object[column])
+            end
+            tags.pluck(:name)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/tags_filter.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        # The {Plutonium::Query::Filters::Tags} input. Offers only the tags on
+        # records the user can see (the policy scope), so a tenant never sees
+        # another tenant's vocabulary and every option matches something.
+        class TagsFilter < List
+          include Plutonium::UI::Component::Methods
+
+          protected
+
+          def build_attributes
+            @context = attributes.delete(:context)
+            attributes[:addable] = false
+            attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select")
+            attributes[:class] = ""
+            super
+          end
+
+          # Built at render time: the policy scope needs the view context,
+          # which doesn't exist yet when attributes are built.
+          def choices
+            @choices ||= build_choice_mapper(current_values | visible_tags)
+          end
+
+          private
+
+          def visible_tags
+            tag_class = Plutonium::UI::Options::TagsField.context(resource_class.new, @context)[:tag_class_name].constantize
+            name = tag_class.arel_table[:name]
+            authorized_resource_scope(resource_class).unscope(:order, :select).joins(@context).distinct.order(name).pluck(name)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/components/uppy.rb

@@ -155,7 +155,7 @@ module Plutonium
               class: "w-full py-2 px-4 text-sm text-danger-600 dark:text-danger-400 bg-[var(--pu-surface)] hover:bg-danger-50 dark:hover:bg-danger-900/50 rounded-b-[var(--pu-radius-md)] transition-colors duration-200 flex items-center justify-center gap-2 border-t border-[var(--pu-border)]",
               data: {action: "click->attachment-preview#remove"}
             ) do
-              span(class: "bi bi-trash")
+              render Phlex::TablerIcons::Trash.new(class: "w-4 h-4")
               plain Plutonium::Translation.t("plutonium.ui.form.attachment.delete")
             end
           end

data/lib/plutonium/ui/form/concerns/typeahead_attributes.rb

@@ -64,6 +64,11 @@ module Plutonium
             return nil unless name
 
             route_key = resource_class.model_name.route_key
+            # Path-scoped portals prefix every route name with the entity
+            # param key (`organization_scoped_`) and take the entity as the
+            # first positional arg, the same as Controller#resource_url_for.
+            path_scoped = current_engine.scoped_to_entity? && current_engine.scoped_entity_strategy == :path
+            route_key = "#{current_engine.scoped_entity_param_key}_#{route_key}" if path_scoped
             helper = (kind == :filter) ? :"typeahead_filter_#{route_key}_path" : :"typeahead_input_#{route_key}_path"
 
             # Engine route helpers are the source of truth for routes
@@ -74,7 +79,8 @@ module Plutonium
             # uses its eager list.
             url_helpers = current_engine.routes.url_helpers
             return nil unless url_helpers.respond_to?(helper)
-            url_helpers.public_send(helper, name: name)
+            helper_args = path_scoped ? [view_context.current_scoped_entity.to_param] : []
+            url_helpers.public_send(helper, *helper_args, name: name)
           end
         end
       end

data/lib/plutonium/ui/form/options/inferred_types.rb

@@ -6,16 +6,23 @@ module Plutonium
       module Options
         module InferredTypes
           include Plutonium::UI::Options::HasCentsField
+          include Plutonium::UI::Options::SecretField
+          include Plutonium::UI::Options::TagsField
+          include Plutonium::UI::Options::RichTextField
 
           private
 
           def infer_field_component
+            # A tag context is also a has_many of tag records; claim it first.
+            return :tags if tags_field?
+            return :rich_text if rich_text_field?
+
             # Password detection lives in the string-type inference, not the
             # component-type inference (a `password` column infers as :string).
             # Route every inferred password/secret field to the masking Password
             # component so the stored value never reaches the DOM. We also widen
             # the heuristic to secret-bearing names Phlexi misses (`*_secret`,
-            # `*_key`, `salt`, ...) — see #secret_field_name?.
+            # `*_key`, `salt`, ...) — see Options::SecretField.
             return :password if inferred_string_field_type == :password || secret_field_name?
 
             # has_cents decimal accessors render as a currency input (number field
@@ -23,8 +30,14 @@ module Plutonium
             return :currency if has_cents_field?
 
             case inferred_field_type
-            when :rich_text
-              return :markdown
+            when :binary
+              # phlexi-form infers :file, which Plutonium renders as an Uppy
+              # attachment; a binary column holds the file's bytes instead.
+              return :binary
+            when :json, :jsonb
+              # phlexi-form infers these as a plain :text textarea, which
+              # renders `Hash#to_s` and never parses the submission back.
+              return :json
             end
 
             inferred_field_component = super
@@ -39,18 +52,6 @@ module Plutonium
               inferred_field_component
             end
           end
-
-          # Secret-bearing names Phlexi's `is_password_field?` does not catch
-          # (it only handles `password`, `encrypted_*`, `*_password`, `*_digest`,
-          # `*_hash`, `*_token`). Mask these too so their value never reaches the
-          # DOM. Still a name heuristic, not a guarantee — opt in/out per field
-          # with `as: :password` / `as: :string`.
-          def secret_field_name?
-            name = key.to_s.downcase
-            name == "token" || name == "salt" ||
-              name.include?("secret") ||
-              name.end_with?("_key", "_salt")
-          end
         end
       end
     end

data/lib/plutonium/ui/form/theme.rb

@@ -117,6 +117,22 @@ module Plutonium
             invalid_json: :invalid_input,
             neutral_json: :neutral_input,
 
+            # EasyMDE replaces the textarea once its JS boots; until then (or
+            # without JS) the textarea should look like every other one.
+            easymde: :textarea,
+            valid_easymde: :valid_textarea,
+            invalid_easymde: :invalid_textarea,
+            neutral_easymde: :neutral_textarea,
+
+            # Action Text editor: Trix / Lexxy style themselves.
+            rich_text: "",
+
+            # Star picker: styled by .pu-rating (components.css).
+            rating: "",
+
+            # Key/value editor: the component lays out its own rows and inputs.
+            key_value_store: "",
+
             # Uppy file upload
             uppy: :file,
             valid_uppy: :valid_file,
@@ -130,10 +146,10 @@ module Plutonium
             neutral_association: :neutral_select,
 
             # Polymorphic association
-            polymorpic_association: :association,
-            valid_polymorpic_association: :valid_association,
-            invalid_polymorpic_association: :invalid_association,
-            neutral_polymorpic_association: :neutral_association
+            polymorphic_association: :association,
+            valid_polymorphic_association: :valid_association,
+            invalid_polymorphic_association: :invalid_association,
+            neutral_polymorphic_association: :neutral_association
           })
         end
       end

data/lib/plutonium/ui/grid/card.rb

@@ -314,7 +314,19 @@ module Plutonium
               "#{record.class.name} doesn't respond to it. " \
               "Define the method on the model or remove the slot."
           end
-          record.public_send(name)
+          value = record.public_send(name)
+          # Slots render raw values, so mask secrets here. Blank stays blank so
+          # the slot still collapses.
+          (value.present? && secret_slot?(name)) ? Plutonium::UI::Options::SecretField::MASK : value
+        end
+
+        # Same rule as the show page: an explicit `as:` (display over field)
+        # decides; otherwise the secret-name heuristic does.
+        def secret_slot?(name)
+          name = name.to_sym
+          declared = resource_definition.defined_displays.dig(name, :options, :as) ||
+            resource_definition.defined_fields.dig(name, :options, :as)
+          declared ? %i[password secret].include?(declared.to_sym) : Plutonium::UI::Options::SecretField.secret_name?(name)
         end
 
         def row_actions

data/lib/plutonium/ui/layout/base.rb

@@ -241,7 +241,16 @@ module Plutonium
             href:
               "https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css",
             integrity:
-              "uqD/OYCNfagd1EgXMgl5QedTD5K+B3e9b8GYo/41t7+Serf7CBxvl+tU1gHd+qd1",
+              "sha384-uqD/OYCNfagd1EgXMgl5QedTD5K+B3e9b8GYo/41t7+Serf7CBxvl+tU1gHd+qd1",
+            crossorigin: "anonymous"
+          )
+          # EasyMDE's toolbar uses Font Awesome 4 class names (renamed in 5+).
+          link(
+            rel: "stylesheet",
+            href:
+              "https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css",
+            integrity:
+              "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN",
             crossorigin: "anonymous"
           )
         end

data/lib/plutonium/ui/options/rich_text_field.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Options
+      # Detects `has_rich_text` fields by the `rich_text_<name>` association
+      # Action Text defines. phlexi-field stopped inferring :rich_text, so
+      # without this they fall through to a plain string.
+      module RichTextField
+        private
+
+        def rich_text_field?
+          object.is_a?(ActiveRecord::Base) && object.class.reflect_on_association(:"rich_text_#{key}").present?
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/options/secret_field.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Options
+      # Shared detector for secret-bearing field names, so every surface masks
+      # the same fields: the form (Password input), the show page / table /
+      # wizard summary (masked display) and grid / kanban card slots.
+      #
+      # Covers Phlexi's password names (`password`, `encrypted_*`, `*_password`,
+      # `*_digest`, `*_hash`, `*_token`) plus ones it misses (`token`, `salt`,
+      # `*_salt`, `*_key`, anything containing `secret`). Still a name
+      # heuristic, not a guarantee: opt a field in or out with `as: :password`
+      # / `as: :string`.
+      module SecretField
+        MASK = "••••••••"
+
+        def self.secret_name?(name)
+          name = name.to_s.downcase
+          %w[password token salt].include?(name) ||
+            name.start_with?("encrypted_") ||
+            name.end_with?("_password", "_digest", "_hash", "_token", "_salt", "_key") ||
+            name.include?("secret")
+        end
+
+        private
+
+        def secret_field_name? = SecretField.secret_name?(key)
+      end
+    end
+  end
+end

data/lib/plutonium/ui/options/tags_field.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Options
+      # Detects no_fly_list `has_tags` contexts. A context named `labels`
+      # defines a `labels` has_many (the tag records) next to the
+      # `labels_list` proxy, so without this it infers as an association.
+      # no_fly_list is optional: without the gem nothing is a tag field.
+      module TagsField
+        def self.context(object, key)
+          return unless defined?(NoFlyList::TaggableRecord) && object.is_a?(NoFlyList::TaggableRecord)
+
+          object.class._no_fly_list.tag_contexts[key.to_sym]
+        end
+
+        private
+
+        def tags_field? = TagsField.context(object, key).present?
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/toolbar.rb

@@ -80,7 +80,7 @@ module Plutonium
           end
 
           def render_search
-            form(method: :get, action: @search_url) do
+            form(method: :get, action: @search_url, class: "min-w-0") do
               div(class: "relative") do
                 div(class: "absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none") do
                   render Phlex::TablerIcons::Search.new(class: "w-4 h-4 text-[var(--pu-text-muted)]")
@@ -91,7 +91,7 @@ module Plutonium
                   name: "#{@search_param}[search]",
                   value: @search_value,
                   placeholder: t("plutonium.ui.table.search_placeholder"),
-                  class: "pu-input pu-input-toolbar pu-input-icon-left w-[220px]",
+                  class: "pu-input pu-input-toolbar pu-input-icon-left w-[220px] max-w-full",
                   # turbo-permanent + a stable id keep the DOM node
                   # across Turbo morphs so focus / caret / IME state
                   # survive the search-as-you-type submit cycle.

data/lib/plutonium/ui/table/components/view_switcher.rb

@@ -35,7 +35,7 @@ module Plutonium
             div(
               role: "tablist",
               aria: {label: t("plutonium.ui.table.view")},
-              class: "inline-flex h-8 rounded-md border border-[var(--pu-border)] bg-[var(--pu-surface)] overflow-hidden",
+              class: "inline-flex shrink-0 h-8 rounded-md border border-[var(--pu-border)] bg-[var(--pu-surface)] overflow-hidden",
               data: {
                 controller: "view-switcher",
                 view_switcher_cookie_name_value: @cookie_name,
@@ -76,7 +76,9 @@ module Plutonium
               }
             ) do
               render icon.new(class: "w-4 h-4 shrink-0")
-              span { label }
+              # Icon-only below sm so the switcher fits narrow toolbars; the
+              # label stays in the accessibility tree via sr-only.
+              span(class: "sr-only sm:not-sr-only") { label }
             end
           end
         end

data/lib/plutonium/ui/table/display_theme.rb

@@ -9,10 +9,38 @@ module Plutonium
             value_wrapper: "max-h-[150px] overflow-y-auto",
             prefixed_icon: "w-4 h-4 mr-1 text-[var(--pu-text-muted)]",
             link: "text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 transition-colors",
-            color: "flex items-center",
-            color_indicator: "w-8 h-8 rounded-md mr-2 shadow-sm border border-[var(--pu-border)]",
+            color: "flex items-center gap-2",
+            color_indicator: "w-6 h-6 rounded border border-[var(--pu-border)]",
+            color_label: "text-sm text-[var(--pu-text-muted)]",
             email: "flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:text-primary-500 whitespace-nowrap transition-colors",
             phone: "flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:text-primary-500 whitespace-nowrap transition-colors",
+            markdown: "format format-sm dark:format-invert format-primary max-w-none",
+            rich_text: "format format-sm dark:format-invert format-primary max-w-none",
+            currency: "tabular-nums",
+            # Boolean / badge pills: the component applies the variant class.
+            boolean: "",
+            badge: "",
+            key_value: "grid grid-cols-[auto_1fr] w-max gap-x-3 gap-y-0.5 text-sm",
+            key_value_key: "font-medium text-[var(--pu-text-muted)] break-words",
+            key_value_value: "break-words",
+            key_value_nested: "font-mono text-xs",
+            list: "flex flex-wrap gap-1",
+            list_item: "pu-badge pu-badge-neutral",
+            relative_time: "text-sm text-[var(--pu-text)]",
+            code: "flex items-center gap-2",
+            code_value: "font-mono text-sm text-[var(--pu-text)] bg-[var(--pu-surface-alt)] border border-[var(--pu-border-muted)] rounded-[var(--pu-radius-sm)] px-2 py-0.5 break-all",
+            code_copy: "pu-btn pu-btn-xs pu-btn-ghost",
+            duration: "text-sm text-[var(--pu-text)] tabular-nums",
+            file_size: "text-sm text-[var(--pu-text)] tabular-nums",
+            progress: "flex items-center gap-2",
+            progress_track: "h-2 w-full max-w-xs rounded-full bg-[var(--pu-surface-alt)] overflow-hidden",
+            progress_bar: "h-full rounded-full bg-primary-500",
+            progress_label: "text-sm text-[var(--pu-text-muted)] tabular-nums",
+            rating: "flex items-center gap-0.5",
+            rating_filled: "w-4 h-4 text-warning-500 fill-current",
+            rating_empty: "w-4 h-4 text-[var(--pu-border)]",
+            binary: "text-sm text-[var(--pu-text-muted)]",
+            phlexi_render: :string,
             json: "whitespace-pre font-mono text-xs bg-[var(--pu-surface-alt)] border border-[var(--pu-border-muted)] rounded-[var(--pu-radius-sm)] p-2 overflow-x-auto",
             attachment_value_wrapper: "flex flex-wrap gap-1"
           })