plutonium 0.55.0 → 0.56.0

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
         # ---------------------------------------------------------------

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/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/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.55.0"
+  VERSION = "0.56.0"
   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.0",
   "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() {

data/src/js/controllers/nested_resource_form_fields_controller.js

@@ -1,7 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="nested-resource-form-fields"
-// Copied from https://github.com/stimulus-components/stimulus-rails-nested-form/blob/master/src/index.ts
+// Adapted from https://github.com/stimulus-components/stimulus-rails-nested-form
+//
+// Persisted rows soft-delete: the row collapses to a "Removed — Restore" bar,
+// its `_destroy` flag flips to "1", and it drops out of the row count so the
+// add button can come back. Restoring reverses all three. Unpersisted rows are
+// removed from the DOM outright — there is nothing to restore server-side.
 export default class extends Controller {
   static targets = ["target", "template", "addButton"]
 
@@ -23,9 +28,7 @@ export default class extends Controller {
     const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime().toString())
     this.targetTarget.insertAdjacentHTML("beforebegin", content)
 
-    const event = new CustomEvent("nested-resource-form-fields:add", { bubbles: true })
-    this.element.dispatchEvent(event)
-
+    this.dispatch("add")
     this.updateState()
   }
 
@@ -36,19 +39,37 @@ export default class extends Controller {
     if (wrapper.dataset.newRecord !== undefined) {
       wrapper.remove()
     } else {
-      wrapper.style.display = "none"
-      wrapper.classList.remove(...wrapper.classList)
-
-      const input = wrapper.querySelector("input[name*='_destroy']")
-      input.value = "1"
+      this.toggleRemoved(wrapper, true)
     }
 
-    const event = new CustomEvent("nested-resource-form-fields:remove", { bubbles: true })
-    this.element.dispatchEvent(event)
+    this.dispatch("remove")
+    this.updateState()
+  }
+
+  restore(e) {
+    e.preventDefault()
+
+    const wrapper = e.target.closest(this.wrapperSelectorValue)
+    this.toggleRemoved(wrapper, false)
 
+    this.dispatch("restore")
     this.updateState()
   }
 
+  // Collapse a persisted row to its "Removed" bar (or expand it back), keeping
+  // the `_destroy` flag and the removed-state marker in sync.
+  toggleRemoved(wrapper, removed) {
+    wrapper.toggleAttribute("data-removed", removed)
+
+    const content = wrapper.querySelector(":scope > [data-nested-content]")
+    const removedBar = wrapper.querySelector(":scope > [data-nested-removed]")
+    if (content) content.hidden = removed
+    if (removedBar) removedBar.hidden = !removed
+
+    const destroyInput = wrapper.querySelector("input[name*='_destroy']")
+    if (destroyInput) destroyInput.value = removed ? "1" : "0"
+  }
+
   updateState() {
     if (!this.hasAddButtonTarget || this.limitValue == 0) return
 
@@ -58,7 +79,9 @@ export default class extends Controller {
       this.addButtonTarget.style.display = "initial"
   }
 
+  // Removed rows keep their wrapper (so they can be restored) but are excluded
+  // from the count so the limit reflects rows that will actually be saved.
   get childCount() {
-    return this.element.querySelectorAll(this.wrapperSelectorValue).length
+    return this.element.querySelectorAll(`${this.wrapperSelectorValue}:not([data-removed])`).length
   }
 }