plutonium 0.55.0 → 0.56.1

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

@@ -115,45 +115,12 @@ module Plutonium
                 div(class: FIELD_GRID_CLASS) do
                   fields.each { |input| render_simple_resource_field(input, definition, nested) }
                 end
-                render_structured_remove_button
-              end
-              render_structured_removed_bar
-            end
-          end
-
-          def render_structured_remove_button
-            div(class: "flex items-center justify-end") do
-              button(
-                type: :button,
-                class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg cursor-pointer " \
-                       "text-danger-700 hover:bg-danger-50 dark:text-danger-400 dark:hover:bg-danger-950/30 " \
-                       "focus:outline-none focus:ring-4 focus:ring-danger-200 dark:focus:ring-danger-900",
-                data_action: "structured-input-row#remove"
-              ) do
-                render Phlex::TablerIcons::Trash.new(class: "w-4 h-4")
-                span { "Remove" }
-              end
-            end
-          end
-
-          # Compact bar shown in place of the row once it's marked for removal.
-          def render_structured_removed_bar
-            div(
-              data_structured_input_row_target: "removed",
-              hidden: true,
-              class: "flex items-center justify-between gap-3 text-sm text-[var(--pu-text-muted)]"
-            ) do
-              span(class: "italic") { "Removed" }
-              button(
-                type: :button,
-                class: "inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-lg cursor-pointer " \
-                       "text-secondary-700 hover:bg-secondary-50 dark:text-secondary-300 dark:hover:bg-secondary-900/30 " \
-                       "focus:outline-none focus:ring-4 focus:ring-secondary-200 dark:focus:ring-secondary-900",
-                data_action: "structured-input-row#restore"
-              ) do
-                render Phlex::TablerIcons::ArrowBackUp.new(class: "w-4 h-4")
-                span { "Restore" }
+                render_repeater_remove_button(action: "structured-input-row#remove")
               end
+              render_repeater_removed_bar(
+                restore_action: "structured-input-row#restore",
+                data_structured_input_row_target: "removed"
+              )
             end
           end
 

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

@@ -27,8 +27,13 @@ module Plutonium
             )
           )
 
-          # Use existing infrastructure to build the URL
-          subject = action.record_action? ? resource_record! : resource_class
+          # Use existing infrastructure to build the URL.
+          # Record-level actions (shown on the show page AND/OR on collection rows)
+          # operate on a single record, so the commit URL must target the record.
+          # `record_action?` alone is wrong: a collection-row action can be
+          # surfaced with `record_action: false` while still being record-scoped.
+          record_scoped = action.record_action? || action.collection_record_action?
+          subject = record_scoped ? resource_record! : resource_class
           route_options_to_url(commit_route_options, subject)
         end
 

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

@@ -19,6 +19,8 @@ module Plutonium
               :slim_select
             when :date, :time, :datetime
               :flatpickr
+            when :boolean
+              :toggle
             else
               inferred_field_component
             end

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

@@ -4,6 +4,7 @@ module Plutonium
   module UI
     module Form
       class Resource < Base
+        include Plutonium::UI::Form::Concerns::RendersRepeaterRowControls
         include Plutonium::UI::Form::Concerns::RendersNestedResourceFields
         include Plutonium::UI::Form::Concerns::RendersStructuredInputs
 

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

@@ -39,6 +39,11 @@ module Plutonium
             valid_boolean: "pu-checkbox",
             invalid_boolean: "pu-checkbox pu-input-invalid",
 
+            # Toggle switch (opt-in boolean input: `as: :toggle`)
+            toggle: "pu-toggle",
+            valid_toggle: "pu-toggle",
+            invalid_toggle: "pu-toggle pu-input-invalid",
+
             # Radio buttons
             radio_button: "pu-radio",
             collection_radio_buttons: "flex flex-col gap-2",
@@ -81,6 +86,13 @@ module Plutonium
             invalid_int_tel_input: :invalid_input,
             neutral_int_tel_input: :neutral_input,
 
+            # JSON / JSONB textarea — without this the component falls back to
+            # the neutral (classless) theme and loses pu-input's dark styling.
+            json: :input,
+            valid_json: :valid_input,
+            invalid_json: :invalid_input,
+            neutral_json: :neutral_input,
+
             # Uppy file upload
             uppy: :file,
             valid_uppy: :valid_file,

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

@@ -100,46 +100,83 @@ module Plutonium
         end
 
         def render_subheader_slot
-          value = field_value(slots[:subheader])
-          return if value.blank?
-          p(class: "text-xs text-[var(--pu-text-muted)] truncate") { plain helpers.display_name_of(value) }
+          name = slots[:subheader]
+          value = field_value(name)
+          p(class: "text-xs text-[var(--pu-text-muted)] truncate") do
+            value.blank? ? render_blank_placeholder : render_formatted_value(name, value)
+          end
         end
 
         def render_body_slot
-          value = field_value(slots[:body])
-          return if value.blank?
-          p(class: "text-sm text-[var(--pu-text)] line-clamp-3") { plain helpers.display_name_of(value) }
+          name = slots[:body]
+          value = field_value(name)
+          p(class: "text-sm text-[var(--pu-text)] line-clamp-3") do
+            value.blank? ? render_blank_placeholder : render_formatted_value(name, value)
+          end
         end
 
         def render_meta_slot
           fields = Array(slots[:meta])
           values = fields.map { |f| field_value(f) }.reject(&:blank?)
-          return if values.empty?
 
           div(class: "flex flex-wrap items-center gap-1.5 mt-1") do
-            values.each do |v|
-              span(class: "inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium " \
-                          "bg-[var(--pu-surface-alt)] text-[var(--pu-text-muted)]") do
-                plain helpers.display_name_of(v)
-              end
+            if values.empty?
+              render_blank_placeholder
+            else
+              values.each { |v| render_meta_badge(v) }
             end
           end
         end
 
         def render_footer_slot
-          value = field_value(footer_field)
-          return if value.blank?
+          name = footer_field
+          value = field_value(name)
           p(class: "text-xs text-[var(--pu-text-subtle)] mt-1") do
-            if value.respond_to?(:strftime)
-              # display_datetime_value returns HTML-safe <time> markup
-              # rendered by the timeago Stimulus controller.
-              raw safe(helpers.display_datetime_value(value))
-            else
-              plain helpers.display_name_of(value)
-            end
+            value.blank? ? render_blank_placeholder : render_formatted_value(name, value)
+          end
+        end
+
+        # Emits a slot value formatted by type, reusing the display layer's
+        # logic without its show-page label/wrapper chrome:
+        #   - dates/times → timeago markup (same path as the footer used)
+        #   - has_cents columns → currency (matches the Currency component)
+        #   - everything else → display_name_of
+        def render_formatted_value(name, value)
+          if value.respond_to?(:strftime)
+            # display_datetime_value returns HTML-safe <time> markup
+            # rendered by the timeago Stimulus controller.
+            raw safe(helpers.display_datetime_value(value))
+          elsif currency_field?(name)
+            plain helpers.number_to_currency(value, unit: "")
+          else
+            plain helpers.display_name_of(value)
+          end
+        end
+
+        # Renders a meta value as a colored pill, borrowing the Badge
+        # display component's semantic color + humanize logic. Status-like
+        # values (published, pending, failed…) get meaningful colors;
+        # free-form values get a deterministic decorative color.
+        def render_meta_badge(value)
+          badge = Plutonium::UI::Display::Components::Badge
+          variant = badge.variant_for(value)
+          span(class: tokens("pu-badge", "pu-badge-#{variant}")) do
+            plain badge.humanize(value)
           end
         end
 
+        def currency_field?(name)
+          klass = record.class
+          klass.respond_to?(:has_cents_decimal_attribute?) && klass.has_cents_decimal_attribute?(name.to_sym)
+        end
+
+        # A declared slot with no value renders a muted em-dash rather than
+        # collapsing, so cards in a grid keep an even height instead of
+        # ragged rows when some records lack the field.
+        def render_blank_placeholder
+          span(class: "text-[var(--pu-text-subtle)]") { plain "—" }
+        end
+
         # ---------------------------------------------------------------
         # Card chrome — selection, actions, show
         # ---------------------------------------------------------------
@@ -195,12 +232,13 @@ module Plutonium
 
         def row_actions
           @row_actions ||= resource_definition.defined_actions.values.select { |a|
-            a.collection_record_action? && a.permitted_by?(record_policy)
+            a.collection_record_action? && a.permitted_by?(record_policy) && a.condition_met?(view_context, record:)
           }
         end
 
         def can_show?
-          resource_definition.defined_actions[:show]&.permitted_by?(record_policy)
+          action = resource_definition.defined_actions[:show]
+          action&.permitted_by?(record_policy) && action.condition_met?(view_context, record:)
         end
 
         def record_policy

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

@@ -113,8 +113,7 @@ module Plutonium
           a(
             href: item.url,
             title: item.label,
-            aria: {label: item.label},
-            class: "icon-rail-leaf #{leaf_classes(item, depth)}"
+            **item_link_attributes(item, "icon-rail-leaf #{leaf_classes(item, depth)}", base_aria: {label: item.label})
           ) do
             render_item_icon(item)
             span(class: "icon-rail-label hidden") { item.label }
@@ -137,12 +136,12 @@ module Plutonium
             a(
               href: item.url || "#",
               title: item.label,
-              aria: {label: item.label, haspopup: "menu", expanded: "false"},
-              data: {
-                "icon-rail-flyout-target": "trigger",
-                action: "click->icon-rail-flyout#toggle"
-              },
-              class: "icon-rail-parent-trigger #{parent_trigger_classes(item, depth)}"
+              **item_link_attributes(
+                item,
+                "icon-rail-parent-trigger #{parent_trigger_classes(item, depth)}",
+                base_aria: {label: item.label, haspopup: "menu", expanded: "false"},
+                base_data: {"icon-rail-flyout-target": "trigger", action: "click->icon-rail-flyout#toggle"}
+              )
             ) do
               render_item_icon(item)
               span(class: "icon-rail-label") { item.label }
@@ -159,7 +158,11 @@ module Plutonium
               div(class: "icon-rail-flyout-inner") do
                 div(class: "icon-rail-flyout-label") { item.label }
                 item.items.each do |child|
-                  a(href: child.url, class: "icon-rail-flyout-item", role: "menuitem") { child.label }
+                  a(
+                    href: child.url,
+                    role: "menuitem",
+                    **item_link_attributes(child, "icon-rail-flyout-item")
+                  ) { child.label }
                 end
               end
             end
@@ -206,6 +209,23 @@ module Plutonium
         def active?(item)
           item.active?(self)
         end
+
+        # Anchor attributes a menu item opts into via its Phlexi::Menu options
+        # (target:, rel:, data:, aria:, …), merged with the anchor's own
+        # framework attributes and spread onto the <a>. The framework's
+        # class / data / aria (base styling, flyout wiring, popup semantics)
+        # take precedence so a menu item can *extend* the link without breaking
+        # navigation behavior. Phlexi keeps its own :active key in options,
+        # which must never become an attribute.
+        def item_link_attributes(item, base_class, base_data: {}, base_aria: {})
+          opts = (item.options || {}).except(:active)
+          data = (opts[:data] || {}).merge(base_data)
+          aria = (opts[:aria] || {}).merge(base_aria)
+          opts[:class] = [base_class, opts[:class]].compact.join(" ")
+          opts[:data] = data unless data.empty?
+          opts[:aria] = aria unless aria.empty?
+          opts
+        end
       end
     end
   end

data/lib/plutonium/ui/page/index.rb

@@ -33,7 +33,7 @@ module Plutonium
         end
 
         def page_actions
-          super || current_definition.defined_actions.values.select { |a| a.resource_action? && a.permitted_by?(current_policy) }
+          super || current_definition.defined_actions.values.select { |a| a.resource_action? && a.permitted_by?(current_policy) && a.condition_met?(view_context) }
         end
 
         def render_default_content

data/lib/plutonium/ui/page/show.rb

@@ -15,7 +15,7 @@ module Plutonium
         end
 
         def page_actions
-          super || current_definition.defined_actions.values.select { |a| a.record_action? && a.permitted_by?(current_policy) }
+          super || current_definition.defined_actions.values.select { |a| a.record_action? && a.permitted_by?(current_policy) && a.condition_met?(view_context, record: resource_record!) }
         end
 
         def render_default_content

data/lib/plutonium/ui/sidebar_menu.rb

@@ -89,6 +89,35 @@ module Plutonium
         end
       end
 
+      # Spread any per-item HTML attributes (target:, rel:, data:, …) the item
+      # opts into via its Phlexi::Menu options — e.g. a menu item that opens a
+      # full-screen SPA in its own tab. The base Phlexi implementation
+      # hardcodes the anchor and drops these, so we re-render the leaf.
+      def render_item_link(item, depth)
+        link_class = themed(:item_link, depth)
+        active = active_class(item, depth)
+        classes = active ? "#{link_class} #{active}" : link_class
+
+        a(href: item.url, **item_link_attributes(item, classes)) do
+          render_item_interior(item, depth)
+        end
+      end
+
+      # Anchor attributes opted into via Phlexi::Menu item options (target:,
+      # rel:, data:, aria:, …), minus Phlexi's own :active key (which must not
+      # leak onto the <a>). A user-supplied :class merges with the themed base
+      # classes; base_data / base_aria (none on the plain leaf today) always
+      # win so options extend rather than replace framework wiring.
+      def item_link_attributes(item, base_class, base_data: {}, base_aria: {})
+        opts = (item.options || {}).except(:active)
+        data = (opts[:data] || {}).merge(base_data)
+        aria = (opts[:aria] || {}).merge(base_aria)
+        opts[:class] = [base_class, opts[:class]].compact.join(" ")
+        opts[:data] = data unless data.empty?
+        opts[:aria] = aria unless aria.empty?
+        opts
+      end
+
       def render_collapsible_button(item, depth)
         button(
           type: "button",

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

@@ -134,7 +134,7 @@ module Plutonium
               policy = policy_for(record:)
 
               actions = resource_definition.defined_actions
-                .select { |k, a| a.collection_record_action? && policy.allowed_to?(:"#{k}?") }
+                .select { |k, a| a.collection_record_action? && policy.allowed_to?(:"#{k}?") && a.condition_met?(view_context, record:) }
                 .values
 
               primary_actions = actions.select { |a| a.category.primary? }.sort_by(&:position)
@@ -161,7 +161,7 @@ module Plutonium
 
         def bulk_actions
           @bulk_actions ||= resource_definition.defined_actions
-            .select { |k, a| a.bulk_action? }
+            .select { |k, a| a.bulk_action? && a.condition_met?(view_context) }
             .values
         end
 

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.55.0"
+  VERSION = "0.56.1"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.55.0",
+  "version": "0.56.1",
   "description": "Build production-ready Rails apps in minutes, not days. Convention-driven, fully customizable, AI-ready.",
   "type": "module",
   "main": "src/js/core.js",

data/plutonium.gemspec

@@ -17,17 +17,18 @@ Gem::Specification.new do |spec|
   spec.metadata["allowed_push_host"] = "https://rubygems.org"
 
   spec.post_install_message = <<~MSG
-    ⚠️  Plutonium #{Plutonium::VERSION} — breaking change
+    ℹ️  Plutonium — breaking change introduced in 0.49.0
 
-    Entity-scoped URL helpers and path params have been renamed from
+    Entity-scoped URL helpers and path params were renamed in 0.49.0 from
     `<entity>_scope_*` to `<entity>_scoped_*`.
 
     Examples:
       organization_scope_widgets_path  →  organization_scoped_widgets_path
       params[:organization_scope]      →  params[:organization_scoped]
 
-    If you reference these helpers or params directly (e.g. in tests, custom
-    redirects, or hand-written links), update them to the new names.
+    If you are upgrading from 0.48.0 or earlier and reference these helpers or
+    params directly (e.g. in tests, custom redirects, or hand-written links),
+    update them to the new names.
 
     Apps that only use `resource_url_for` are unaffected.
   MSG

data/src/css/components.css

@@ -178,6 +178,116 @@
   @apply bg-accent-950/50 text-accent-300 hover:bg-accent-900/60 active:bg-accent-900/80;
 }
 
+/* ===================
+   BADGES - Status pills
+   =================== */
+
+.pu-badge {
+  @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap align-middle;
+}
+
+.pu-badge-neutral {
+  @apply bg-[var(--pu-surface-alt)] text-[var(--pu-text-muted)] border border-[var(--pu-border-muted)];
+}
+
+.pu-badge-primary {
+  @apply bg-primary-50 text-primary-700;
+}
+.dark .pu-badge-primary {
+  @apply bg-primary-950/50 text-primary-300;
+}
+
+.pu-badge-secondary {
+  @apply bg-secondary-50 text-secondary-700;
+}
+.dark .pu-badge-secondary {
+  @apply bg-secondary-950/50 text-secondary-300;
+}
+
+.pu-badge-success {
+  @apply bg-success-50 text-success-700;
+}
+.dark .pu-badge-success {
+  @apply bg-success-950/50 text-success-300;
+}
+
+.pu-badge-danger {
+  @apply bg-danger-50 text-danger-700;
+}
+.dark .pu-badge-danger {
+  @apply bg-danger-950/50 text-danger-300;
+}
+
+.pu-badge-warning {
+  @apply bg-warning-50 text-warning-700;
+}
+.dark .pu-badge-warning {
+  @apply bg-warning-950/50 text-warning-300;
+}
+
+.pu-badge-info {
+  @apply bg-info-50 text-info-700;
+}
+.dark .pu-badge-info {
+  @apply bg-info-950/50 text-info-300;
+}
+
+.pu-badge-accent {
+  @apply bg-accent-50 text-accent-700;
+}
+.dark .pu-badge-accent {
+  @apply bg-accent-950/50 text-accent-300;
+}
+
+/* ===================
+   TOGGLE - Switch-styled checkbox
+   =================== */
+
+.pu-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 2.75rem;   /* 44px */
+  height: 1.5rem;   /* 24px */
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background-color: var(--pu-border);
+  background-image: none; /* override @tailwindcss/forms checkmark */
+  cursor: pointer;
+  vertical-align: middle;
+  transition: background-color var(--pu-transition-normal, 0.2s);
+}
+
+.pu-toggle:checked {
+  background-image: none; /* override @tailwindcss/forms checkmark */
+  @apply bg-primary-600;
+}
+
+.pu-toggle::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 9999px;
+  background-color: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  transition: transform var(--pu-transition-normal, 0.2s);
+}
+
+.pu-toggle:checked::before {
+  transform: translateX(20px); /* 44 - 18 - 3 - 3 */
+}
+
+.pu-toggle:focus-visible {
+  @apply outline-none ring-2 ring-primary-500 ring-offset-2;
+}
+
 /* ===================
    CARDS - Clean, elevated
    =================== */
@@ -206,6 +316,22 @@
   @apply w-full px-3 h-9 text-sm focus:outline-none;
 }
 
+/* Native multi-selects (and sized list boxes) must grow — pu-input's fixed
+   h-9 collapses them to a single clipped row. */
+select.pu-input[multiple],
+select.pu-input[size]:not([size="1"]) {
+  height: auto;
+  min-height: 7.5rem;
+  @apply py-1.5;
+}
+
+select.pu-input[multiple] option {
+  border-radius: var(--pu-radius-md);
+  margin-block: 4px;
+  padding: 0.4rem 0.625rem;
+  line-height: 1.4;
+}
+
 .pu-input-toolbar {
   @apply h-8 text-sm;
 }

data/src/js/controllers/dirty_form_guard_controller.js

@@ -5,6 +5,27 @@ import { Controller } from "@hotwired/stimulus";
 // Self-disables when not inside a <dialog>, so it's safe to attach to
 // every form unconditionally.
 //
+// Dirtiness is a diff against a baseline captured at the user's *first*
+// real interaction — not at connect. Field widgets (intl-tel-input,
+// flatpickr, slim-select, easymde) mutate the form *after* connect —
+// injecting hidden inputs, reformatting values, replacing the native
+// control — via silent `input.value = …` writes (no event) or synthetic
+// events. Snapshotting at connect counted that settling as edits and
+// prompted on a pristine modal.
+//
+// Instead:
+//   • On the first *trusted* pointer/key action inside the form, serialize
+//     the form into `baseline`. The user can't interact before the form has
+//     rendered, so widgets have already settled — their hidden inputs and
+//     reformatted values are part of the baseline, not a phantom diff. The
+//     key/pointer event fires *before* the value changes, so the baseline is
+//     pre-edit.
+//   • On close, the form is dirty if its serialization differs from
+//     `baseline`. This is independent of which events a widget dispatches
+//     (or whether it dispatches any), catches widget-mediated edits the same
+//     as native typing, and — being a diff — treats an edit reverted to its
+//     original value as clean. No interaction → no baseline → never dirty.
+//
 // Esc is intercepted at the document's capture phase: relying on the
 // dialog's `cancel` event alone proved flaky under rapid/held Esc when
 // the parent dialog uses `closedby="any"`. The cancel listener stays
@@ -12,24 +33,38 @@ import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
   static targets = ["confirmDialog"];
 
-  // Set by controllers, not the user — comparing them would flag
-  // every form as dirty on connect (return_to) or on submit (pre_submit).
+  // Set by controllers, not the user — they're already present (or absent)
+  // when the baseline is taken, so they never contribute to the diff; listed
+  // for safety against a controller writing them mid-edit.
   static IGNORED_KEYS = new Set(["authenticity_token", "return_to", "pre_submit"]);
 
+  // Keys that move focus or dismiss the dialog rather than edit it — they
+  // must not, on their own, baseline the form.
+  static NON_EDITING_KEYS = new Set([
+    "Tab", "Escape", "Shift", "Control", "Alt", "Meta",
+  ]);
+
   connect() {
     this.dialog = this.element.closest("dialog");
     if (!this.dialog) return;
 
-    this.snapshot = this.#serialize();
+    this.baseline = null;
     this.forceClose = false;
     this.submitting = false;
 
+    this.onFirstIntent = this.#onFirstIntent.bind(this);
     this.onCancel = this.#onCancel.bind(this);
     this.onSubmit = this.#onSubmit.bind(this);
     this.onCloseButtonClick = this.#onCloseButtonClick.bind(this);
     this.onConfirmCancel = this.#onConfirmCancel.bind(this);
     this.onKeydown = this.#onKeydown.bind(this);
 
+    // A trusted pointer/key action inside the form is the user starting to
+    // edit — capture the (settled, pre-edit) baseline then. Capture phase so
+    // a widget that stops propagation can't hide it from us.
+    this.element.addEventListener("pointerdown", this.onFirstIntent, true);
+    this.element.addEventListener("keydown", this.onFirstIntent, true);
+
     document.addEventListener("keydown", this.onKeydown, true);
     // Capture phase so this runs before remote-modal's cancel handler
     // — that way `defaultPrevented` is visible there if we intervene.
@@ -47,6 +82,8 @@ export default class extends Controller {
 
   disconnect() {
     if (!this.dialog) return;
+    this.element.removeEventListener("pointerdown", this.onFirstIntent, true);
+    this.element.removeEventListener("keydown", this.onFirstIntent, true);
     document.removeEventListener("keydown", this.onKeydown, true);
     this.dialog.removeEventListener("cancel", this.onCancel, true);
     this.element.removeEventListener("submit", this.onSubmit);
@@ -84,6 +121,17 @@ export default class extends Controller {
     return this.dialog.querySelectorAll('[data-action~="remote-modal#close"]');
   }
 
+  // Capture the baseline the first time the user really touches the form —
+  // a trusted pointer or editing keystroke. The form has rendered (so widgets
+  // have settled) and the event fires before the value changes, so this is
+  // the settled, pre-edit state. Runs once; later interactions are no-ops.
+  #onFirstIntent(event) {
+    if (this.baseline != null) return;
+    if (!event.isTrusted) return;
+    if (event.type === "keydown" && this.constructor.NON_EDITING_KEYS.has(event.key)) return;
+    this.baseline = this.#serialize();
+  }
+
   #serialize() {
     const data = new FormData(this.element);
     const enc = encodeURIComponent;
@@ -97,8 +145,11 @@ export default class extends Controller {
       .join("&");
   }
 
+  // No interaction → no baseline → never dirty. Otherwise dirty iff the form
+  // now serializes differently than it did at first touch (so an edit reverted
+  // to its original value reads as clean).
   #isDirty() {
-    return this.#serialize() !== this.snapshot;
+    return this.baseline != null && this.#serialize() !== this.baseline;
   }
 
   #onSubmit() {