plutonium 0.53.1 → 0.55.0

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

@@ -10,7 +10,7 @@ module Plutonium
         module RendersNestedResourceFields
           extend ActiveSupport::Concern
 
-          DEFAULT_NESTED_LIMIT = 10
+          DEFAULT_NESTED_LIMIT = RepeaterFieldStyles::DEFAULT_LIMIT
           NESTED_OPTION_KEYS = [:allow_destroy, :update_only, :macro, :class].freeze
           SINGULAR_MACROS = %i[belongs_to has_one].freeze
 
@@ -193,7 +193,7 @@ module Plutonium
           def render_nested_fields_fieldset(nested, context)
             fieldset(
               data_new_record: !nested.object&.persisted?,
-              class: "nested-resource-form-fields border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] p-4 space-y-4 relative"
+              class: RepeaterFieldStyles::FIELDSET_CLASS
             ) do
               render_nested_fields_fieldset_content(nested, context)
               render_nested_fields_delete_button(nested, context.options)
@@ -201,7 +201,7 @@ module Plutonium
           end
 
           def render_nested_fields_fieldset_content(nested, context)
-            div(class: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 grid-flow-row-dense") do
+            div(class: RepeaterFieldStyles::FIELD_GRID_CLASS) do
               render_nested_fields_hidden_fields(nested, context)
               render_nested_fields_visible_fields(nested, context)
             end

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

@@ -0,0 +1,178 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Concerns
+        # Renders classless structured inputs (single → hash via nest_one,
+        # repeater → array via nest_many). Field/namespace work is delegated to
+        # the form; this concern owns the structural markup.
+        # @api private
+        module RendersStructuredInputs
+          extend ActiveSupport::Concern
+
+          private
+
+          def render_structured_input(name)
+            entry = resource_definition.defined_structured_inputs[name]
+            options = entry[:options] || {}
+            definition = structured_input_fields_definition(entry)
+            fields = options[:fields] || definition.defined_inputs.keys
+            repeat = options[:repeat]
+
+            if repeat
+              render_structured_repeater(name, definition, fields, repeat_limit(repeat))
+            else
+              render_structured_single(name, definition, fields)
+            end
+          end
+
+          def structured_input_fields_definition(entry)
+            return entry[:options][:using] if entry[:options]&.key?(:using)
+
+            holder = Plutonium::Definition::StructuredInputs::FieldsDefinition.new
+            entry[:block].call(holder)
+            holder
+          end
+
+          def repeat_limit(repeat)
+            repeat.is_a?(Integer) ? repeat : RepeaterFieldStyles::DEFAULT_LIMIT
+          end
+
+          # --- single -------------------------------------------------------
+
+          def render_structured_single(name, definition, fields)
+            raw = structured_input_value(name)
+            value = raw.is_a?(Hash) ? raw.with_indifferent_access : {}
+            div(class: "col-span-full space-y-2 my-4") do
+              h2(class: "text-lg font-semibold text-[var(--pu-text)]") { name.to_s.humanize }
+              nest_one(name, as: name, object: value) do |nested|
+                render_structured_fieldset(nested, definition, fields, removable: false)
+              end
+            end
+          end
+
+          # --- repeater -----------------------------------------------------
+
+          def render_structured_repeater(name, definition, fields, limit)
+            rows = Array(structured_input_value(name)).map { |row| row.is_a?(Hash) ? row.with_indifferent_access : row }
+            existing_collection = rows.presence || {NEW_RECORD: {}}
+            div(
+              class: "col-span-full space-y-2 my-4",
+              data: {
+                controller: "nested-resource-form-fields",
+                nested_resource_form_fields_limit_value: limit
+              }
+            ) do
+              h2(class: "text-lg font-semibold text-[var(--pu-text)]") { name.to_s.humanize }
+              template data_nested_resource_form_fields_target: "template" do
+                nest_many(name, as: name, collection: {NEW_RECORD: {}}, default: {NEW_RECORD: {}}, template: true) do |nested|
+                  render_structured_fieldset(nested, definition, fields, removable: true)
+                end
+              end
+              nest_many(name, as: name, collection: existing_collection) do |nested|
+                if nested.object.blank?
+                  vanish { render_structured_fieldset(nested, definition, fields, removable: true) }
+                else
+                  render_structured_fieldset(nested, definition, fields, removable: true)
+                end
+              end
+              div(data_nested_resource_form_fields_target: :target, hidden: true)
+              render_structured_add_button(name)
+            end
+          end
+
+          # --- helpers ------------------------------------------------------
+
+          def structured_input_value(name)
+            obj = object
+            return nil unless obj.respond_to?(name)
+            obj.public_send(name)
+          end
+
+          # Single source of truth shared with RendersNestedResourceFields.
+          FIELDSET_CLASS = RepeaterFieldStyles::FIELDSET_CLASS
+          FIELD_GRID_CLASS = RepeaterFieldStyles::FIELD_GRID_CLASS
+
+          # @param removable [Boolean] repeater rows are removable; a single
+          #   structured input is the one-and-only object, so it is not.
+          def render_structured_fieldset(nested, definition, fields, removable:)
+            unless removable
+              return fieldset(class: FIELDSET_CLASS) do
+                div(class: FIELD_GRID_CLASS) do
+                  fields.each { |input| render_simple_resource_field(input, definition, nested) }
+                end
+              end
+            end
+
+            # Removable rows soft-delete by DISABLING the inner fieldset: a
+            # disabled <fieldset> is omitted from submission, so the server just
+            # receives the payload without this row and rebuilds the JSON column
+            # from what it gets (no _destroy marker). The row stays in the DOM,
+            # collapsed to a "Removed — Restore" bar, so it can be restored.
+            div(data_controller: "structured-input-row", class: FIELDSET_CLASS) do
+              fieldset(data_structured_input_row_target: "content", class: "space-y-4 border-0 p-0 m-0") do
+                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" }
+              end
+            end
+          end
+
+          def render_structured_add_button(name)
+            div do
+              button(
+                type: :button,
+                class: "inline-block",
+                data: {action: "nested-resource-form-fields#add", nested_resource_form_fields_target: "addButton"}
+              ) do
+                span(class: "bg-secondary-700 text-white flex items-center justify-center px-4 py-1.5 text-sm font-medium rounded-lg") do
+                  render Phlex::TablerIcons::Plus.new(class: "w-4 h-4 mr-1")
+                  span { "Add #{name.to_s.singularize.humanize}" }
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Concerns
+        # Shared sizing + chrome for repeater-style field groups. Both
+        # RendersNestedResourceFields and RendersStructuredInputs render the
+        # same fieldset/grid markup and share a default row limit, so the
+        # values live here to keep the two concerns from drifting apart.
+        module RepeaterFieldStyles
+          # Default maximum number of rows a repeater renders/clones.
+          DEFAULT_LIMIT = 10
+
+          # Outer fieldset chrome for a single repeater row.
+          FIELDSET_CLASS = "nested-resource-form-fields border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] p-4 space-y-4 relative"
+
+          # Responsive grid the row's fields are laid out in.
+          FIELD_GRID_CLASS = "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 grid-flow-row-dense"
+        end
+      end
+    end
+  end
+end

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

@@ -5,6 +5,7 @@ module Plutonium
     module Form
       class Resource < Base
         include Plutonium::UI::Form::Concerns::RendersNestedResourceFields
+        include Plutonium::UI::Form::Concerns::RendersStructuredInputs
 
         attr_reader :resource_fields, :resource_definition, :singular_resource
 
@@ -104,11 +105,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"}
@@ -164,7 +172,9 @@ module Plutonium
 
         def render_resource_field(name)
           when_permitted(name) do
-            if resource_definition.respond_to?(:defined_nested_inputs) && resource_definition.defined_nested_inputs[name]
+            if resource_definition.respond_to?(:defined_structured_inputs) && resource_definition.defined_structured_inputs[name]
+              render_structured_input(name)
+            elsif resource_definition.respond_to?(:defined_nested_inputs) && resource_definition.defined_nested_inputs[name]
               render_nested_resource_field(name)
             else
               render_simple_resource_field(name, resource_definition, self)

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/ui/modal/slideover.rb

@@ -25,11 +25,17 @@ module Plutonium
         # controller on the frame after showModal(). Mirrors the filter
         # slideover's pattern — see Centered for the same rationale.
         def base_dialog_classes
+          # The backdrop dim+blur is static (no [data-open] gating, no
+          # transition): a ::backdrop that fades its bg-color while carrying
+          # backdrop-filter re-rasterises the blur every frame and stutters
+          # the panel slide. Keeping it static lets only the panel animate
+          # (transform), composited smoothly. The backdrop snaps in at
+          # showModal() and is dropped when the dialog leaves the top layer
+          # on close(), so it still covers the panel's slide-out. Mirrors
+          # the .pu-dialog::backdrop rule in components.css.
           "fixed top-0 right-0 bottom-0 left-auto m-0 h-screen max-w-full max-h-screen " \
             "bg-[var(--pu-surface)] border-l border-[var(--pu-border)] " \
-            "backdrop:bg-transparent data-[open]:backdrop:bg-black/60 " \
-            "data-[open]:backdrop:backdrop-blur-sm " \
-            "backdrop:transition-[background-color] backdrop:duration-300 backdrop:ease-out " \
+            "backdrop:bg-black/60 backdrop:backdrop-blur-sm " \
             "rounded-none p-0 " \
             "open:flex flex-col " \
             "translate-x-full data-[open]:translate-x-0 " \

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.53.1"
+  VERSION = "0.55.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.55.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

@@ -513,12 +513,17 @@
   border-radius: var(--pu-radius-lg);
 }
 
+/* Dim + frosted blur for the whole time the dialog is in the top layer.
+   Deliberately NOT transitioned and NOT gated on [data-open]: a ::backdrop
+   that repaints every frame (a bg-color fade) while carrying a
+   backdrop-filter forces the browser to re-rasterise the blur per frame,
+   which stutters the panel's open/close animation — and doubly so when a
+   nested confirm animates over a parent modal whose blur is still live.
+   Keeping it static lets the GPU rasterise the blur once; only the panel
+   animates (opacity/scale/translate, cheaply composited). The backdrop
+   snaps in at showModal() and is removed when the dialog leaves the top
+   layer on close(), so the dim still covers the panel's exit. */
 .pu-dialog::backdrop {
-  background-color: transparent;
-  transition: background-color 200ms ease-out;
-}
-
-.pu-dialog[data-open]::backdrop {
   background-color: rgb(0 0 0 / 0.6);
   backdrop-filter: blur(4px);
 }
@@ -649,6 +654,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 +688,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/register_controllers.js

@@ -1,6 +1,7 @@
 // Import controllers here
 import ResourceHeaderController from "./resource_header_controller.js"
 import NestedResourceFormFieldsController from "./nested_resource_form_fields_controller.js"
+import StructuredInputRowController from "./structured_input_row_controller.js"
 import FormController from "./form_controller.js"
 import ResourceDropDownController from "./resource_drop_down_controller.js"
 import ResourceCollapseController from "./resource_collapse_controller.js"
@@ -40,6 +41,7 @@ export default function (application) {
   application.register("sidebar", SidebarController)
   application.register("resource-header", ResourceHeaderController)
   application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
+  application.register("structured-input-row", StructuredInputRowController)
   application.register("form", FormController)
   application.register("resource-drop-down", ResourceDropDownController)
   application.register("resource-collapse", ResourceCollapseController)

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;

data/src/js/controllers/structured_input_row_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="structured-input-row"
+//
+// Soft-removes a classless structured-input row by DISABLING its fields — a
+// disabled <fieldset> is omitted from form submission, so the server simply
+// receives the payload without that row and rebuilds the JSON column from what
+// it gets (no _destroy marker needed). The row stays in the DOM, collapsed to a
+// "Removed — Restore" bar, so it can be restored (re-enabled) before saving.
+export default class extends Controller {
+  static targets = ["content", "removed"]
+
+  remove(e) {
+    e.preventDefault()
+    this.contentTarget.disabled = true
+    this.contentTarget.hidden = true
+    this.removedTarget.hidden = false
+  }
+
+  restore(e) {
+    e.preventDefault()
+    this.contentTarget.disabled = false
+    this.contentTarget.hidden = false
+    this.removedTarget.hidden = true
+  }
+}