plutonium 0.53.1 → 0.54.0

data/app/views/plutonium/_flash_alerts.html.erb

@@ -3,25 +3,16 @@
 <%
   next unless msg.present?
 
-  color = case type.to_sym
-  when :success
-    # bg-green-50 text-green-800 text-green-500 text-green-400 ring-green-400
-    "green"
-  when :warning
-    # bg-yellow-50 text-yellow-800 text-yellow-500 text-yellow-400 ring-yellow-400
-    "yellow"
-  when :alert, :danger, :error
-    # bg-red-50 text-red-800 text-red-500 text-red-400 ring-red-400
-    "red"
-  else
-    # bg-blue-50 text-blue-800 text-blue-500 text-blue-400 ring-blue-400
-    "blue"
-  end
+  variant = {
+    success: "success",
+    warning: "warning",
+    alert: "danger", danger: "danger", error: "danger"
+  }.fetch(type.to_sym, "info")
 %>
 
 <div data-controller="resource-dismiss"
     data-resource-dismiss-after-value="6000"
-    class="flex items-center p-4 mb-4 text-<%= color %>-800 rounded-lg bg-<%= color %>-50 dark:bg-stone-300 dark:text-<%= color %>-400"
+    class="pu-alert pu-alert-<%= variant %>"
     role="alert">
   <% case type.to_sym %>
   <% when :success %>
@@ -41,9 +32,9 @@
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
     </svg>
   <% end %>
-  <div class="ms-3 text-sm font-normal"><%= msg %></div>
+  <div class="pu-alert-message"><%= msg %></div>
   <button type="button"
-    class="ms-auto -mx-1.5 -my-1.5 bg-<%= color %>-50 text-<%= color %>-500 rounded-lg focus:ring-2 focus:ring-<%= color %>-400 p-1.5 hover:bg-<%= color %>-200 inline-flex items-center justify-center h-8 w-8 dark:bg-stone-300 dark:text-<%= color %>-400 dark:hover:bg-gray-700"
+    class="pu-alert-close"
     data-action="click->resource-dismiss#dismiss"
     aria-label="Close">
       <span class="sr-only">Close</span>

data/app/views/plutonium/_flash_toasts.html.erb

@@ -2,28 +2,19 @@
 <%
   next unless msg.present?
 
-  color = case type.to_sym
-  when :success
-    # text-green-500 bg-green-100 bg-green-800 text-green-200 bg-green-50 text-green-400 ring-green-400
-    "green"
-  when :warning
-    # text-yellow-500 bg-yellow-100 bg-yellow-800 text-yellow-200 bg-yellow-50 text-yellow-400 ring-yellow-400
-    "yellow"
-  when :alert, :danger, :error
-    # text-red-500 bg-red-100 bg-red-800 text-red-200 bg-red-50 text-red-400 ring-red-400
-    "red"
-  else
-    # text-blue-500 bg-blue-100 bg-blue-800 text-blue-200 bg-blue-50 text-blue-400 ring-blue-400
-    "blue"
-  end
+  variant = {
+    success: "success",
+    warning: "warning",
+    alert: "danger", danger: "danger", error: "danger"
+  }.fetch(type.to_sym, "info")
 %>
 
 <div data-controller="resource-dismiss"
     data-resource-dismiss-after-value="6000"
-    class="fixed z-50 top-16 inset-x-0 mx-auto flex items-center w-full max-w-md p-4 text-gray-500 bg-<%= color %>-50 rounded-lg shadow dark:text-<%= color %>-400 dark:bg-gray-800 dark:border dark:border-gray-700 dark:shadow-none"
+    class="pu-toast pu-toast-<%= variant %>"
     role="alert">
 
-  <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-<%= color %>-500 bg-<%= color %>-100 rounded-lg dark:bg-<%= color %>-800 dark:text-<%= color %>-200">
+  <div class="pu-toast-icon">
     <% case type.to_sym %>
     <% when :success %>
       <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
@@ -43,9 +34,9 @@
       </svg>
     <% end %>
   </div>
-  <div class="ms-3 text-sm font-normal"><%= msg %></div>
+  <div class="pu-toast-message"><%= msg %></div>
   <button type="button"
-    class="ms-auto -mx-1.5 -my-1.5 bg-<%= color %>-50 text-<%= color %>-400 rounded-lg focus:ring-2 focus:ring-<%= color %>-400 p-1.5 hover:bg-<%= color %>-200 inline-flex items-center justify-center h-8 w-8 dark:text-<%= color %>-400 dark:bg-gray-800 dark:hover:bg-gray-700"
+    class="pu-toast-close"
     data-action="click->resource-dismiss#dismiss"
     aria-label="Close">
       <span class="sr-only">Close</span>

data/docs/superpowers/specs/2026-06-01-interaction-repeater-inputs-design.md

@@ -0,0 +1,178 @@
+# Interaction Repeater Inputs
+
+**Date:** 2026-06-01
+**Status:** Design — pending review
+
+## Problem
+
+Interactions (`Plutonium::Resource::Interaction`) collect scalar inputs via
+`attribute`, but have no first-class way to collect a **repeating group of
+fields** — e.g. a variable-length list of `{label, phone_number}` contacts —
+as structured input the interaction can validate and use in `execute`.
+
+The repeater UX already exists for resource forms (the
+`nested-resource-form-fields` Stimulus controller: add/remove rows, `<template>`
+cloning). But it is **model-backed**: the renderer
+(`Plutonium::UI::Form::Concerns::RendersNestedResourceFields` →
+`NestedFieldContext`) sources its row metadata (`:class`, `:macro`, `:limit`,
+multiplicity) from `resource_class.all_nested_attributes_options`, which only
+reflects ActiveRecord associations on the acted-on resource.
+
+For an interaction collecting a classless list, there is no association and no
+class. The current behaviour (characterized in
+`test/plutonium/ui/form/interaction_nested_input_test.rb`):
+
+- `nested_input` is registered on interactions and param coercion works, **but**
+- `nested_attribute_options` resolves to `{}`, so `blank_object` is `nil` →
+  `nest_one`/`nest_many` have no template object → the nested UI renders nothing.
+- The one case that *does* work is when the interaction's nested attribute
+  happens to mirror a real association on the acted-on resource (the README's
+  `CreateUserInteraction` building a `User` with `has_many :contacts`).
+
+So interactions have the *param* half of nested inputs but no working *rendering*
+half for the classless case, and the failure is silent.
+
+## Goal
+
+Let an interaction declare a **classless repeating field group** that:
+
+- renders with the existing repeater UX (add/remove rows, template cloning,
+  delete checkbox),
+- collects into the interaction as an **array of plain hashes**
+  (`contacts => [{label:, phone_number:}, …]`),
+- needs **no backing class** — just a fields definition.
+
+Non-goals (explicitly out of scope):
+
+- A single (non-repeater) variant. Repeater only; value is always an array.
+- Type coercion of row values. Rows are plain hashes; the interaction validates
+  them itself.
+- Reusing/extending model-backed `nested_input` semantics for the classless case.
+
+## Feasibility anchor
+
+Phlexi already supports hash-backed rendering. `Phlexi::Field::Support::Value.from`:
+
+```ruby
+return object[key] if object.is_a?(Hash)
+object.public_send(key) if object.respond_to?(key)
+```
+
+So a row can be a plain `Hash`, and the blank/template row can be `{}` (every
+field reads `nil` → empty). No synthesized classes are required.
+
+## Design
+
+### 1. DSL — `repeater`
+
+A new, self-contained DSL on the interaction base. One call declares everything:
+
+```ruby
+class CreateUserInteraction < Plutonium::Resource::Interaction
+  attribute :first_name, :string
+
+  repeater :contacts do |f|
+    f.input :label
+    f.input :phone_number
+  end
+
+  # or, reusing an existing fields definition:
+  # repeater :addresses, using: AddressFields, fields: %i[label map_url]
+
+  # options: limit: (default 10)
+end
+```
+
+`repeater :name` will:
+
+1. declare `attribute :name` defaulting to `[]`,
+2. register a **classless** `name_attributes=` collector (see §2),
+3. register render config (the fields definition, `multiple: true`, `limit`).
+
+A distinct name (not `nested_input`) is intentional: it signals different
+semantics (classless, collects hashes) and keeps a clean, conditional-free
+implementation path separate from model-backed `nested_input`.
+
+### 2. Param handling
+
+`name_attributes=` accepts what the form submits — either an `Array` of row
+hashes or a `Hash` keyed by index (`{"0" => {...}, "1" => {...}}`, Rails' nested
+form shape). For each row:
+
+- skip if `_destroy` is truthy (`1`/`"1"`/`true`/`"true"`),
+- skip if every value is blank (the empty trailing/blank rows),
+- otherwise keep the row as a symbolized hash with `_destroy` removed.
+
+Store the result as `name` = `Array<Hash>`. The `name` reader returns that array
+(used both by `execute` and by the renderer to repopulate on re-render).
+
+### 3. Rendering
+
+Reuse the existing repeater chrome. Add a **classless render path** that does not
+touch `all_nested_attributes_options`:
+
+- config (fields, `multiple: true`, `limit`) comes from the `repeater`
+  declaration,
+- the template/blank row object is `{}`,
+- existing rows come from the array of hashes already on the attribute (so a
+  validation-failed re-render repopulates),
+- field naming via `nest_many(:contacts, as: :contacts_attributes, …)` →
+  `interaction[contacts_attributes][N][label]`.
+
+The resource (model-backed) render path is left untouched and stays covered by
+the existing characterization tests
+(`test/integration/admin_portal/nested_form_rendering_test.rb`).
+
+> Implementation detail deferred to the plan: whether the classless path is a
+> sibling context to `NestedFieldContext` or a generalization of it, and how the
+> `repeater` fields block maps onto the existing `NestedInputsDefinition`. The
+> design constraint is only that the resource path does not change behaviour.
+
+### 4. `nested_input` raises when no class is resolvable
+
+Convert the silent classless failure into a guiding error. When the nested-field
+renderer cannot resolve a class to build rows (no `object_class`, and no `:class`
+from association metadata), raise:
+
+```
+`nested_input :contacts` could not resolve a class to build its rows.
+If this is an interaction collecting plain inputs, use `repeater :contacts` instead.
+```
+
+This keeps the legitimate model-backed `nested_input` working (class present →
+renders) and fails loudly only where it is actually broken. It also guards
+genuinely misconfigured resource nested inputs.
+
+### 5. `accepts_nested_attributes_for` is unchanged
+
+It stays available on interactions for the deliberate case of building real
+model instances in `execute`. `repeater` does not use or replace it.
+
+### 6. Documentation
+
+Update the interaction README: document `repeater` for classless repeating
+input; note that `nested_input` is model-backed and now errors without a
+resolvable class.
+
+## Testing
+
+- **Param round-trip** (unit): `contacts_attributes=` with an `Array` and with a
+  Rails index-keyed `Hash` → `contacts` is an array of symbolized hashes;
+  `_destroy` and all-blank rows dropped.
+- **Render** (integration): a dummy interaction with a `repeater`, wired to an
+  interactive action, GET its form → assert the repeater HTML — controller
+  container + limit, `<template>`, fieldset, `interaction[contacts_attributes]
+  [NEW_RECORD][label]` naming, add button, delete checkbox. Fixture built via
+  the `pu:*` generators per project convention.
+- **Guard** (unit/integration): a classless `nested_input` on an interaction
+  raises the guiding error. Update the existing characterization test
+  (`interaction_nested_input_test.rb`) from "blank_object is nil" to "raises".
+- **Regression**: resource nested fields unchanged — existing characterization
+  tests stay green.
+
+## Risk / breaking change
+
+Making `nested_input` raise without a resolvable class is a (small) breaking
+change for any interaction relying on the silently-broken classless path — but
+that path renders nothing today, so there is no working behaviour to break. The
+model-backed path is preserved.

data/gemfiles/rails_8.1.gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    plutonium (0.52.0)
+    plutonium (0.53.1)
       action_policy (~> 0.7.0)
       listen (~> 3.8)
       pagy (~> 43.0)

data/lib/plutonium/engine/validator.rb

@@ -13,16 +13,23 @@ module Plutonium
         def validate_engine!(engine)
           return if supported_engine?(engine)
 
-          # TODO: make the error link to documentation on how to ensure that your engine is supported
-          raise ArgumentError, "#{engine} must include Plutonium::Engine to call register resources"
+          raise ArgumentError,
+            "#{engine} must include Plutonium::Engine to register resources. " \
+            "See https://radioactive-labs.github.io/plutonium-core/reference/app/packages " \
+            "for how to make an engine Plutonium-aware."
         end
 
         # Checks if the current engine supports Plutonium features.
         #
         # @return [Boolean] True if the engine includes Plutonium::Engine, false otherwise.
         def supported_engine?(engine)
-          # TODO: fix constant being out of sync after reload during development
-          Plutonium.configuration.development? ? engine.respond_to?(:dom_id) : engine.include?(Plutonium::Engine)
+          # Match by module name rather than object identity. In development the
+          # framework is reloaded, so `Plutonium::Engine` is reassigned to a
+          # fresh module object while already-loaded engines still include the
+          # previous one — making an `include?(Plutonium::Engine)` identity check
+          # spuriously false. A module's name survives the reassignment, so this
+          # stays correct in both development and production without a branch.
+          engine.ancestors.any? { |ancestor| ancestor.name == "Plutonium::Engine" }
         end
       end
     end

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

@@ -104,11 +104,18 @@ module Plutonium
         end
 
         def render_actions
-          # capture-url controller sets this element's value to
-          # window.location.href on connect, so URL fragments (#tab-id)
-          # survive the redirect after submit (the server never sees them).
+          # Only carry an *explicit* return_to. We deliberately do NOT fall
+          # back to request.original_url: for interactive-action forms that URL
+          # is the action's own (modal-only) path, and submitting it back would
+          # "return" to a bare standalone form — a blank page. When absent, the
+          # controller computes the right destination (redirect_url_after_submit
+          # / redirect_url_after_action_on, both → resource_url_for).
+          #
+          # capture-url grafts the live URL fragment (#tab-id) onto this value
+          # on connect (the server never sees fragments), but only when a base
+          # value is present.
           input name: "return_to",
-            value: request.params[:return_to] || request.original_url,
+            value: request.params[:return_to],
             type: :hidden,
             hidden: true,
             data: {controller: "capture-url"}

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

@@ -19,7 +19,10 @@ module Plutonium
             form_errors_list: "mt-2 list-disc list-inside text-sm",
 
             # Label themes
-            label: "mt-2 block mb-2 text-base font-semibold",
+            # The required marker is a `<abbr title="required">*</abbr>` which
+            # picks up the browser's default dotted underline — strip it and
+            # color the asterisk as a danger indicator instead.
+            label: "mt-2 block mb-2 text-base font-semibold [&_abbr]:no-underline [&_abbr]:border-0 [&_abbr]:cursor-default [&_abbr]:text-danger-500",
             invalid_label: "text-danger-700 dark:text-danger-400",
             valid_label: "text-success-700 dark:text-success-400",
             neutral_label: "text-[var(--pu-text)]",
@@ -46,8 +49,16 @@ module Plutonium
             valid_color: nil,
             neutral_color: nil,
 
-            # File input
-            file: "pu-input py-2 [&::file-selector-button]:mr-4 [&::file-selector-button]:px-4 [&::file-selector-button]:py-2 [&::file-selector-button]:bg-[var(--pu-surface-alt)] [&::file-selector-button]:border-0 [&::file-selector-button]:rounded-md [&::file-selector-button]:text-sm [&::file-selector-button]:font-semibold [&::file-selector-button]:text-[var(--pu-text-muted)] [&::file-selector-button]:hover:bg-[var(--pu-border)] [&::file-selector-button]:cursor-pointer [&::file-selector-button]:transition-colors",
+            # File input — keep pu-input's h-9 so the field matches the height
+            # of text inputs and slim-selects. The native file-selector-button
+            # fills the *full* height of the control and sits flush against the
+            # left edge (px-0 on the wrapper, no vertical margin), reading as a
+            # segmented button. A right border divides it from the filename text,
+            # and only the left corners are rounded so it nests inside pu-input.
+            # NOTE: pu-input ships its px-3/h-9 padding *unlayered*, so plain
+            # pl-0/py-0 utilities (in @layer utilities) lose to it — the !
+            # important variants are required to flatten the wrapper padding.
+            file: "pu-input pl-0! py-0! [&::file-selector-button]:h-full [&::file-selector-button]:align-middle [&::file-selector-button]:m-0 [&::file-selector-button]:mr-4 [&::file-selector-button]:px-4 [&::file-selector-button]:leading-[1.1] [&::file-selector-button]:bg-[var(--pu-surface-alt)] [&::file-selector-button]:border-0 [&::file-selector-button]:border-r [&::file-selector-button]:border-[var(--pu-input-border)] [&::file-selector-button]:rounded-none [&::file-selector-button]:rounded-l-md [&::file-selector-button]:text-sm [&::file-selector-button]:font-semibold [&::file-selector-button]:text-[var(--pu-text-muted)] [&::file-selector-button]:hover:bg-[var(--pu-border)] [&::file-selector-button]:cursor-pointer [&::file-selector-button]:transition-colors",
 
             # Hint themes
             hint: "pu-hint whitespace-pre-wrap",

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.53.1"
+  VERSION = "0.54.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.53.1",
+  "version": "0.54.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/src/css/components.css

@@ -649,6 +649,10 @@ body.pu-rail-pinned .icon-rail-pin-expand {
   box-shadow: var(--pu-shadow-lg);
   padding: 6px;
   animation: pu-rail-flyout-in 120ms ease-out;
+  /* Cap to the viewport so long menus scroll instead of overflowing. */
+  max-height: calc(100vh - 16px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 @keyframes pu-rail-flyout-in {
@@ -679,3 +683,108 @@ body.pu-rail-pinned .icon-rail-pin-expand {
   background: var(--pu-surface-alt);
   color: var(--pu-text);
 }
+
+/* ===================
+   FLASH — TOASTS & ALERTS
+
+   Self-contained component classes so flash colors render regardless of the
+   host app's Tailwind `content` scan. The partials build their class names
+   dynamically (bg-<color>-50, …), which Tailwind can only emit if it scans the
+   gem's views — it doesn't under v4's @import + @config source detection. By
+   baking the colors into Plutonium's own compiled stylesheet, every flash
+   variant works in any consuming app.
+   =================== */
+
+/* --- Toast (fixed, dismissible banner) --- */
+.pu-toast {
+  @apply fixed z-50 top-16 inset-x-0 mx-auto flex items-center w-full max-w-md p-4 rounded-lg shadow text-gray-500;
+}
+.dark .pu-toast {
+  @apply bg-gray-800 border border-gray-700 shadow-none;
+}
+
+.pu-toast-icon {
+  @apply inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg;
+}
+
+.pu-toast-message {
+  @apply ms-3 text-sm font-normal;
+}
+
+.pu-toast-close {
+  @apply ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8;
+}
+.dark .pu-toast-close {
+  @apply bg-gray-800 hover:bg-gray-700;
+}
+
+/* --- Alert (inline, flow banner) --- */
+.pu-alert {
+  @apply flex items-center p-4 mb-4 rounded-lg;
+}
+.dark .pu-alert {
+  @apply bg-stone-300;
+}
+
+.pu-alert-message {
+  @apply ms-3 text-sm font-normal;
+}
+
+.pu-alert-close {
+  @apply ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex items-center justify-center h-8 w-8;
+}
+.dark .pu-alert-close {
+  @apply bg-stone-300 hover:bg-gray-700;
+}
+
+/* --- Variants: success / warning / danger / info ---
+   Each colors the container plus its icon and close button via descendants,
+   so the partial only sets one variant class on the wrapper. --- */
+
+/* success */
+.pu-toast-success           { @apply bg-success-50; }
+.dark .pu-toast-success     { @apply text-success-400; }
+.pu-toast-success .pu-toast-icon       { @apply text-success-500 bg-success-100; }
+.dark .pu-toast-success .pu-toast-icon { @apply bg-success-800 text-success-200; }
+.pu-toast-success .pu-toast-close       { @apply bg-success-50 text-success-400 hover:bg-success-200 focus:ring-success-400; }
+.dark .pu-toast-success .pu-toast-close { @apply text-success-400; }
+.pu-alert-success           { @apply bg-success-50 text-success-800; }
+.dark .pu-alert-success     { @apply text-success-400; }
+.pu-alert-success .pu-alert-close       { @apply bg-success-50 text-success-500 hover:bg-success-200 focus:ring-success-400; }
+.dark .pu-alert-success .pu-alert-close { @apply text-success-400; }
+
+/* warning */
+.pu-toast-warning           { @apply bg-warning-50; }
+.dark .pu-toast-warning     { @apply text-warning-400; }
+.pu-toast-warning .pu-toast-icon       { @apply text-warning-500 bg-warning-100; }
+.dark .pu-toast-warning .pu-toast-icon { @apply bg-warning-800 text-warning-200; }
+.pu-toast-warning .pu-toast-close       { @apply bg-warning-50 text-warning-400 hover:bg-warning-200 focus:ring-warning-400; }
+.dark .pu-toast-warning .pu-toast-close { @apply text-warning-400; }
+.pu-alert-warning           { @apply bg-warning-50 text-warning-800; }
+.dark .pu-alert-warning     { @apply text-warning-400; }
+.pu-alert-warning .pu-alert-close       { @apply bg-warning-50 text-warning-500 hover:bg-warning-200 focus:ring-warning-400; }
+.dark .pu-alert-warning .pu-alert-close { @apply text-warning-400; }
+
+/* danger */
+.pu-toast-danger            { @apply bg-danger-50; }
+.dark .pu-toast-danger      { @apply text-danger-400; }
+.pu-toast-danger .pu-toast-icon       { @apply text-danger-500 bg-danger-100; }
+.dark .pu-toast-danger .pu-toast-icon { @apply bg-danger-800 text-danger-200; }
+.pu-toast-danger .pu-toast-close       { @apply bg-danger-50 text-danger-400 hover:bg-danger-200 focus:ring-danger-400; }
+.dark .pu-toast-danger .pu-toast-close { @apply text-danger-400; }
+.pu-alert-danger            { @apply bg-danger-50 text-danger-800; }
+.dark .pu-alert-danger      { @apply text-danger-400; }
+.pu-alert-danger .pu-alert-close       { @apply bg-danger-50 text-danger-500 hover:bg-danger-200 focus:ring-danger-400; }
+.dark .pu-alert-danger .pu-alert-close { @apply text-danger-400; }
+
+/* info (default / :notice) */
+.pu-toast-info              { @apply bg-info-50; }
+.dark .pu-toast-info        { @apply text-info-400; }
+.pu-toast-info .pu-toast-icon       { @apply text-info-500 bg-info-100; }
+.dark .pu-toast-info .pu-toast-icon { @apply bg-info-800 text-info-200; }
+.pu-toast-info .pu-toast-close       { @apply bg-info-50 text-info-400 hover:bg-info-200 focus:ring-info-400; }
+.dark .pu-toast-info .pu-toast-close { @apply text-info-400; }
+.pu-alert-info              { @apply bg-info-50 text-info-800; }
+.dark .pu-alert-info        { @apply text-info-400; }
+.pu-alert-info .pu-alert-close       { @apply bg-info-50 text-info-500 hover:bg-info-200 focus:ring-info-400; }
+.dark .pu-alert-info .pu-alert-close { @apply text-info-400; }

data/src/js/controllers/capture_url_controller.js

@@ -1,14 +1,27 @@
 import { Controller } from "@hotwired/stimulus"
 
 // Connects to data-controller="capture-url"
-// Sets the controller's own element's `value` to window.location.href
-// on connect — capturing URL fragments (#tab-id) that the server never
-// sees over HTTP. Apply directly to any input/button whose value should
-// reflect the full client-side URL.
+//
+// The server never sees URL fragments (#tab-id), so a server-rendered
+// `return_to` can't include the one the user is currently on. On connect we
+// graft the live fragment onto this element's EXISTING value — we do not
+// replace the value's path/query.
+//
+// Replacing the whole value (an earlier approach) broke modals: the element
+// already holds the correct return target (e.g. the resource page), while the
+// live browser URL may be the modal/action URL. Overwriting it sent a
+// successful submit "back" to the bare action form — a blank page. Keeping the
+// server value and only contributing the fragment is correct in every case.
 export default class extends Controller {
   connect() {
-    if ("value" in this.element) {
-      this.element.value = window.location.href
-    }
+    if (!("value" in this.element)) return
+
+    const base = this.element.value
+    if (!base) return // no explicit return target; let the controller decide
+
+    const { hash } = window.location
+    if (!hash) return // no fragment to recover; keep the server value as-is
+
+    this.element.value = base.split("#")[0] + hash
   }
 }

data/src/js/controllers/dirty_form_guard_controller.js

@@ -58,11 +58,20 @@ export default class extends Controller {
     }
   }
 
-  async discard() {
+  discard() {
     this.forceClose = true;
-    await this.#closeConfirm();
-    // Hand off to remote-modal so the parent modal animates out
-    // instead of snapping shut.
+    // Snap the confirm shut with no exit animation, then hand straight
+    // off to remote-modal so the parent modal animates out as a single,
+    // smooth motion.
+    //
+    // Animating the confirm out *first* (the old behaviour) stuttered:
+    // its fade played on top of the parent modal's still-live backdrop
+    // `backdrop-filter: blur()`, forcing the compositor to re-rasterise
+    // the blurred viewport every frame — and its display:none reflow
+    // landed partway through the modal's own close transition. We're
+    // tearing the whole modal down anyway, so the confirm doesn't need
+    // its own choreography.
+    this.#snapConfirmClosed();
     this.dialog.dispatchEvent(new CustomEvent("modal:request-close"));
   }
 
@@ -122,6 +131,10 @@ export default class extends Controller {
   }
 
   #onCancel(event) {
+    // `cancel` bubbles: a descendant's cancel (e.g. an <input type="file">
+    // whose picker was dismissed) reaches this listener. Only the dialog's
+    // own cancel (Escape) — target === the dialog — should prompt.
+    if (event.target !== this.dialog) return;
     if (this.forceClose || this.submitting) return;
     if (!this.#isDirty()) return;
     event.preventDefault();
@@ -153,6 +166,17 @@ export default class extends Controller {
     }
   }
 
+  // Close the confirm immediately, skipping its exit transition. Used by
+  // discard(), where the parent modal is about to animate away and a
+  // separate confirm fade would only stutter against the modal's live
+  // backdrop blur.
+  #snapConfirmClosed() {
+    if (!this.hasConfirmDialogTarget) return;
+    const d = this.confirmDialogTarget;
+    d.removeAttribute("data-open");
+    if (d.open) d.close();
+  }
+
   async #closeConfirm() {
     if (!this.hasConfirmDialogTarget) return;
     const d = this.confirmDialogTarget;

data/src/js/controllers/icon_rail_flyout_controller.js

@@ -115,13 +115,16 @@ export default class extends Controller {
     panel.style.left = `${triggerRect.right + 4}px`
     panel.style.top = `${triggerRect.top}px`
 
-    // Shift up if the panel would overflow the viewport bottom.
+    // Shift up if the panel would overflow the viewport bottom, but never
+    // past the top edge — the inner panel scrolls (max-height) when the
+    // menu is taller than the viewport.
     requestAnimationFrame(() => {
       const panelRect = panel.getBoundingClientRect()
       const viewportH = window.innerHeight
       if (panelRect.bottom > viewportH - 8) {
         const overflow = panelRect.bottom - (viewportH - 8)
-        panel.style.top = `${parseFloat(panel.style.top) - overflow}px`
+        const top = Math.max(8, parseFloat(panel.style.top) - overflow)
+        panel.style.top = `${top}px`
       }
     })
   }

data/src/js/controllers/remote_modal_controller.js

@@ -47,6 +47,11 @@ export default class extends Controller {
   }
 
   #onCancel(event) {
+    // `cancel` bubbles, so a descendant firing it — most notably an
+    // <input type="file"> whose picker was dismissed — reaches this
+    // listener. That is not a request to close the modal; only the
+    // dialog's own cancel (Escape) targets the dialog element itself.
+    if (event.target !== this.element) return;
     // Another listener (typically dirty-form-guard) already handled
     // this — don't double-process.
     if (event.defaultPrevented) return;