plutonium 0.52.0 → 0.53.0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.52.0",
+  "version": "0.53.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

@@ -428,13 +428,21 @@
    =================== */
 
 .pu-checkbox {
-  @apply size-5 rounded-md bg-white border-2 border-slate-300 accent-primary-600 focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0 cursor-pointer transition-all duration-150 checked:bg-primary-600 checked:border-primary-600 indeterminate:bg-primary-600 indeterminate:border-primary-600 hover:border-primary-400;
+  @apply size-5 rounded-md bg-white border-2 border-slate-300 text-primary-600 accent-primary-600 focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0 cursor-pointer transition-all duration-150 checked:bg-primary-600 checked:border-primary-600 indeterminate:bg-primary-600 indeterminate:border-primary-600 hover:border-primary-400;
 }
 
 .dark .pu-checkbox {
   @apply bg-slate-700 border-slate-500 hover:border-primary-400;
 }
 
+.pu-radio {
+  @apply size-5 rounded-full bg-white border-2 border-slate-300 text-primary-600 accent-primary-600 focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-0 cursor-pointer transition-all duration-150 checked:bg-primary-600 checked:border-primary-600 hover:border-primary-400;
+}
+
+.dark .pu-radio {
+  @apply bg-slate-700 border-slate-500 hover:border-primary-400;
+}
+
 /* ===================
    EMPTY STATE
    =================== */
@@ -486,6 +494,35 @@
   @apply w-14 px-6 py-4;
 }
 
+/* ===================
+   DIALOG — shared centered <dialog> surface
+   ===================
+   Visual tokens reused by Modal::Centered, the dirty-form-guard
+   confirm dialog, and Turbo's themed confirm. Keeps bg/border/radius
+   and backdrop styling in one place so a design-token change can't
+   silently drift across the three. Animation is driven by toggling
+   the [data-open] attribute one frame after showModal() — see
+   remote_modal_controller for the rationale (the @starting-style /
+   allow-discrete spec dance is unreliable across browsers).
+   Positioning, size, and the dialog's own opacity/scale transition
+   stay on the call site; they vary per dialog. Slideover has its
+   own pinned-right surface and intentionally does not opt in. */
+.pu-dialog {
+  background-color: var(--pu-surface);
+  border: 1px solid var(--pu-border);
+  border-radius: var(--pu-radius-lg);
+}
+
+.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);
+}
+
 /* ===================
    ICON RAIL — modern shell
    =================== */

data/src/css/slim_select.css

@@ -34,9 +34,10 @@
   @apply !hidden;
 }
 
-/* Main container - Updated to match form input theme */
+/* Sized to match `.pu-input` so selects line up with text/date/email
+   inputs in the same row. */
 .ss-main {
-  @apply flex flex-row items-center relative select-none w-full px-4 py-3 cursor-pointer border font-medium text-base leading-normal outline-none transition-colors duration-200 overflow-hidden focus:ring-2;
+  @apply flex flex-row items-center relative select-none w-full px-3 h-9 cursor-pointer border text-sm outline-none transition-colors duration-200 overflow-hidden focus:ring-2;
   background-color: var(--pu-input-bg);
   border-color: var(--pu-input-border);
   border-radius: var(--pu-radius-md);

data/src/js/controllers/dirty_form_guard_controller.js

@@ -0,0 +1,165 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="dirty-form-guard"
+// Prompts before dismissing a modal form whose contents have changed.
+// Self-disables when not inside a <dialog>, so it's safe to attach to
+// every form unconditionally.
+//
+// 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
+// as defense in depth.
+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).
+  static IGNORED_KEYS = new Set(["authenticity_token", "return_to", "pre_submit"]);
+
+  connect() {
+    this.dialog = this.element.closest("dialog");
+    if (!this.dialog) return;
+
+    this.snapshot = this.#serialize();
+    this.forceClose = false;
+    this.submitting = false;
+
+    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);
+
+    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.
+    this.dialog.addEventListener("cancel", this.onCancel, true);
+
+    this.element.addEventListener("submit", this.onSubmit);
+    this.#closeButtons().forEach((btn) =>
+      btn.addEventListener("click", this.onCloseButtonClick, true),
+    );
+
+    if (this.hasConfirmDialogTarget) {
+      this.confirmDialogTarget.addEventListener("cancel", this.onConfirmCancel);
+    }
+  }
+
+  disconnect() {
+    if (!this.dialog) return;
+    document.removeEventListener("keydown", this.onKeydown, true);
+    this.dialog.removeEventListener("cancel", this.onCancel, true);
+    this.element.removeEventListener("submit", this.onSubmit);
+    this.#closeButtons().forEach((btn) =>
+      btn.removeEventListener("click", this.onCloseButtonClick, true),
+    );
+    if (this.hasConfirmDialogTarget) {
+      this.confirmDialogTarget.removeEventListener("cancel", this.onConfirmCancel);
+    }
+  }
+
+  async discard() {
+    this.forceClose = true;
+    await this.#closeConfirm();
+    // Hand off to remote-modal so the parent modal animates out
+    // instead of snapping shut.
+    this.dialog.dispatchEvent(new CustomEvent("modal:request-close"));
+  }
+
+  keepEditing() {
+    this.#closeConfirm();
+  }
+
+  #closeButtons() {
+    if (!this.dialog) return [];
+    return this.dialog.querySelectorAll('[data-action~="remote-modal#close"]');
+  }
+
+  #serialize() {
+    const data = new FormData(this.element);
+    const enc = encodeURIComponent;
+    return [...data.entries()]
+      .filter(([key]) => !this.constructor.IGNORED_KEYS.has(key))
+      .map(([key, value]) => {
+        const v = value instanceof File ? value.name : value;
+        return `${enc(key)}=${enc(v)}`;
+      })
+      .sort()
+      .join("&");
+  }
+
+  #isDirty() {
+    return this.#serialize() !== this.snapshot;
+  }
+
+  #onSubmit() {
+    this.submitting = true;
+  }
+
+  #confirmIsOpen() {
+    return this.hasConfirmDialogTarget && this.confirmDialogTarget.open;
+  }
+
+  #onKeydown(event) {
+    if (event.key !== "Escape") return;
+    if (!this.dialog.open) return;
+
+    // Once the confirm is open, only its buttons may close it.
+    if (this.#confirmIsOpen()) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      return;
+    }
+
+    if (this.forceClose || this.submitting) return;
+    if (!this.#isDirty()) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    this.#promptDiscard();
+  }
+
+  #onCancel(event) {
+    if (this.forceClose || this.submitting) return;
+    if (!this.#isDirty()) return;
+    event.preventDefault();
+    this.#promptDiscard();
+  }
+
+  #onCloseButtonClick(event) {
+    if (this.forceClose || this.submitting) return;
+    if (!this.#isDirty()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    this.#promptDiscard();
+  }
+
+  #onConfirmCancel(event) {
+    event.preventDefault();
+  }
+
+  #promptDiscard() {
+    if (this.hasConfirmDialogTarget) {
+      const d = this.confirmDialogTarget;
+      d.showModal();
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => d.setAttribute("data-open", ""));
+      });
+    } else if (window.confirm("Discard your changes?")) {
+      this.forceClose = true;
+      this.dialog.dispatchEvent(new CustomEvent("modal:request-close"));
+    }
+  }
+
+  async #closeConfirm() {
+    if (!this.hasConfirmDialogTarget) return;
+    const d = this.confirmDialogTarget;
+    if (!d.open) return;
+    d.removeAttribute("data-open");
+    const animations = d.getAnimations({ subtree: true });
+    await Promise.allSettled(animations.map((a) => a.finished));
+    d.close();
+  }
+}

data/src/js/controllers/register_controllers.js

@@ -32,6 +32,7 @@ import CaptureUrlController from "./capture_url_controller.js"
 import RowClickController from "./row_click_controller.js"
 import ViewSwitcherController from "./view_switcher_controller.js"
 import AutosubmitController from "./autosubmit_controller.js"
+import DirtyFormGuardController from "./dirty_form_guard_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -68,4 +69,5 @@ export default function (application) {
   application.register("row-click", RowClickController)
   application.register("view-switcher", ViewSwitcherController)
   application.register("autosubmit", AutosubmitController)
+  application.register("dirty-form-guard", DirtyFormGuardController)
 }

data/src/js/controllers/remote_modal_controller.js

@@ -1,45 +1,79 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="remote-modal"
+// Drives the open/close lifecycle of a turbo-fetched <dialog>.
+//
+// Entry is animated by deferring `data-open` to the frame after
+// showModal() — the dialog renders one frame with its closed-state
+// transform/opacity, then transitions into the open state. Exit
+// reverses it: remove `data-open`, wait for the dialog's animations
+// to settle, then call close(). This avoids the @starting-style /
+// allow-discrete spec dance, which is unreliable across browsers.
 export default class extends Controller {
   connect() {
-    // Store original scroll position and body overflow
     this.originalScrollPosition = window.scrollY;
     this.originalOverflow = document.body.style.overflow;
     this.bodyStateRestored = false;
-
-    // Lock body scroll
+    this._closing = false;
     document.body.style.overflow = "hidden";
 
-    // Show the modal
     this.element.showModal();
-    // Add close event listener
-    this.element.addEventListener("close", this.handleClose.bind(this));
+    // Double rAF ensures the closed-state styles paint before we flip
+    // data-open, so the transition actually fires.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.element.setAttribute("data-open", "");
+      });
+    });
+
+    this.onCancel = this.#onCancel.bind(this);
+    this.onClose = this.#onClose.bind(this);
+    this.onRequestClose = () => this.#animateClose();
+
+    this.element.addEventListener("cancel", this.onCancel);
+    this.element.addEventListener("close", this.onClose);
+    this.element.addEventListener("modal:request-close", this.onRequestClose);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("cancel", this.onCancel);
+    this.element.removeEventListener("close", this.onClose);
+    this.element.removeEventListener("modal:request-close", this.onRequestClose);
+    this.#restoreBodyState();
   }
 
   close() {
-    // Close the modal
-    this.element.close();
-    this.restoreBodyState();
+    this.#animateClose();
   }
 
-  disconnect() {
-    // Clean up event listener when controller is disconnected
-    this.element.removeEventListener("close", this.handleClose);
-    this.restoreBodyState();
+  #onCancel(event) {
+    // Another listener (typically dirty-form-guard) already handled
+    // this — don't double-process.
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    this.#animateClose();
   }
 
-  handleClose() {
-    this.restoreBodyState();
+  #onClose() {
+    this.#restoreBodyState();
   }
 
-  restoreBodyState() {
+  async #animateClose() {
+    if (this._closing) return;
+    this._closing = true;
+
+    this.element.removeAttribute("data-open");
+
+    const animations = this.element.getAnimations({ subtree: true });
+    await Promise.allSettled(animations.map((a) => a.finished));
+
+    this.element.close();
+  }
+
+  #restoreBodyState() {
     if (this.bodyStateRestored) return;
     this.bodyStateRestored = true;
-
-    // Restore body overflow
     document.body.style.overflow = this.originalOverflow || "";
-    // Restore the original scroll position
     window.scrollTo(0, this.originalScrollPosition);
   }
 }

data/src/js/turbo/index.js

@@ -1,3 +1,4 @@
 import "./turbo_actions"
+import "./turbo_confirm"
 // import "./turbo_debug"
 // import "./turbo_frame_monkey_patch"

data/src/js/turbo/turbo_confirm.js

@@ -0,0 +1,128 @@
+// Themed replacement for Turbo's default window.confirm. The dialog is
+// built lazily and reused so per-call cost is just a textContent swap.
+
+let dialog;
+let messageEl;
+let confirmButton;
+let cancelButton;
+
+function ensureDialog() {
+  // Turbo Drive replaces document.body on full-page navigation, which
+  // detaches the cached dialog. showModal() then throws InvalidStateError
+  // ("not in a Document"). Re-attach if detached; the node itself plus
+  // its listeners survive, so we don't have to rebuild.
+  if (dialog) {
+    if (!dialog.isConnected) document.body.appendChild(dialog);
+    return;
+  }
+
+  dialog = document.createElement("dialog");
+  // Surface (bg, border, radius, backdrop) comes from .pu-dialog; the
+  // remaining utilities are positioning, size, and the opacity/scale
+  // animation hooks driven by [data-open]. Matches Modal::Centered.
+  dialog.className = [
+    "pu-dialog",
+    "top-1/2",
+    "-translate-y-1/2",
+    "left-1/2",
+    "-translate-x-1/2",
+    "w-full",
+    "max-w-md",
+    "p-0",
+    "open:flex",
+    "flex-col",
+    "opacity-0",
+    "scale-95",
+    "data-[open]:opacity-100",
+    "data-[open]:scale-100",
+    "transition-[opacity,transform]",
+    "duration-200",
+    "ease-out",
+  ].join(" ");
+  dialog.setAttribute("aria-labelledby", "pu-turbo-confirm-message");
+
+  const header = document.createElement("div");
+  header.className = "px-6 pt-5 pb-4 border-b border-[var(--pu-border)]";
+
+  messageEl = document.createElement("h2");
+  messageEl.id = "pu-turbo-confirm-message";
+  messageEl.className = "text-lg font-semibold text-[var(--pu-text)]";
+  header.appendChild(messageEl);
+
+  const footer = document.createElement("div");
+  footer.className = "flex items-center justify-end gap-2 px-6 py-4";
+
+  cancelButton = document.createElement("button");
+  cancelButton.type = "button";
+  cancelButton.className = "pu-btn pu-btn-md pu-btn-outline";
+  cancelButton.textContent = "Cancel";
+
+  confirmButton = document.createElement("button");
+  confirmButton.type = "button";
+  confirmButton.className = "pu-btn pu-btn-md pu-btn-primary";
+  confirmButton.textContent = "Confirm";
+
+  footer.appendChild(cancelButton);
+  footer.appendChild(confirmButton);
+
+  dialog.appendChild(header);
+  dialog.appendChild(footer);
+  document.body.appendChild(dialog);
+}
+
+async function animateClose() {
+  dialog.removeAttribute("data-open");
+  const animations = dialog.getAnimations({ subtree: true });
+  await Promise.allSettled(animations.map((a) => a.finished));
+  if (dialog.open) dialog.close();
+}
+
+function themedConfirm(message) {
+  ensureDialog();
+  messageEl.textContent = message || "Are you sure?";
+
+  return new Promise((resolve) => {
+    let settled = false;
+
+    const settle = (value) => {
+      if (settled) return;
+      settled = true;
+      cleanup();
+      resolve(value);
+      animateClose();
+    };
+
+    const onConfirm = () => settle(true);
+    const onCancel = () => settle(false);
+    const onClose = () => settle(false);
+
+    const cleanup = () => {
+      confirmButton.removeEventListener("click", onConfirm);
+      cancelButton.removeEventListener("click", onCancel);
+      dialog.removeEventListener("close", onClose);
+    };
+
+    confirmButton.addEventListener("click", onConfirm);
+    cancelButton.addEventListener("click", onCancel);
+    // Esc / backdrop / programmatic close — all resolve as cancel.
+    dialog.addEventListener("close", onClose);
+
+    dialog.showModal();
+    // Double rAF so the closed-state styles paint before [data-open]
+    // flips — same rationale as remote_modal_controller.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => dialog.setAttribute("data-open", ""));
+    });
+    confirmButton.focus();
+  });
+}
+
+if (typeof window !== "undefined" && window.Turbo) {
+  // Turbo 8 deprecated setConfirmMethod in favor of config.forms.confirm.
+  // Prefer the new path; fall back for older Turbo versions still in use.
+  if (window.Turbo.config?.forms) {
+    window.Turbo.config.forms.confirm = themedConfirm;
+  } else if (window.Turbo.setConfirmMethod) {
+    window.Turbo.setConfirmMethod(themedConfirm);
+  }
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.52.0
+  version: 0.53.0
 platform: ruby
 authors:
 - Stefan Froelich
 bindir: exe
 cert_chain: []
-date: 2026-05-21 00:00:00.000000000 Z
+date: 2026-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -577,6 +577,7 @@ files:
 - docs/public/favicon-16x16.png
 - docs/public/favicon-32x32.png
 - docs/public/favicon.ico
+- docs/public/images/components/avatar.png
 - docs/public/images/guides/custom-actions-bulk.png
 - docs/public/images/guides/multi-tenancy-dashboard.png
 - docs/public/images/guides/multi-tenancy-welcome.png
@@ -633,6 +634,7 @@ files:
 - docs/reference/behavior/index.md
 - docs/reference/behavior/interactions.md
 - docs/reference/behavior/policies.md
+- docs/reference/configuration.md
 - docs/reference/index.md
 - docs/reference/resource/actions.md
 - docs/reference/resource/definition.md
@@ -668,6 +670,7 @@ files:
 - docs/superpowers/specs/2026-05-12-skill-compaction-design.md
 - docs/superpowers/specs/2026-05-13-docs-restructure-design.md
 - docs/superpowers/specs/2026-05-15-public-pages-overhaul-design.md
+- docs/superpowers/specs/2026-05-29-avatar-component-design.md
 - esbuild.config.js
 - exe/pug
 - gemfiles/rails_7.gemfile
@@ -879,13 +882,13 @@ files:
 - lib/generators/pu/rodauth/templates/app/rodauth/rodauth_app.rb.tt
 - lib/generators/pu/rodauth/templates/app/rodauth/rodauth_plugin.rb.tt
 - lib/generators/pu/rodauth/templates/app/views/_login_form_footer.html.erb.tt
+- lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/change_password_notify.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/email_auth.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/otp_disabled.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/otp_locked_out.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/otp_setup.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/otp_unlock_failed.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/otp_unlocked.text.erb
-- lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/password_changed.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/reset_password.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/reset_password_notify.text.erb
 - lib/generators/pu/rodauth/templates/app/views/rodauth_mailer/unlock_account.text.erb
@@ -975,10 +978,8 @@ files:
 - lib/plutonium/helpers.rb
 - lib/plutonium/helpers/application_helper.rb
 - lib/plutonium/helpers/assets_helper.rb
-- lib/plutonium/helpers/attachment_helper.rb
 - lib/plutonium/helpers/content_helper.rb
 - lib/plutonium/helpers/display_helper.rb
-- lib/plutonium/helpers/table_helper.rb
 - lib/plutonium/helpers/turbo_helper.rb
 - lib/plutonium/helpers/turbo_stream_actions_helper.rb
 - lib/plutonium/interaction/README.md
@@ -1063,6 +1064,7 @@ files:
 - lib/plutonium/ui.rb
 - lib/plutonium/ui/action_button.rb
 - lib/plutonium/ui/actions_dropdown.rb
+- lib/plutonium/ui/avatar.rb
 - lib/plutonium/ui/block.rb
 - lib/plutonium/ui/breadcrumbs.rb
 - lib/plutonium/ui/color_mode_selector.rb
@@ -1180,6 +1182,7 @@ files:
 - src/js/controllers/capture_url_controller.js
 - src/js/controllers/clipboard_controller.js
 - src/js/controllers/color_mode_controller.js
+- src/js/controllers/dirty_form_guard_controller.js
 - src/js/controllers/easymde_controller.js
 - src/js/controllers/filter_panel_controller.js
 - src/js/controllers/flatpickr_controller.js
@@ -1212,6 +1215,7 @@ files:
 - src/js/support/mime_icon.js
 - src/js/turbo/index.js
 - src/js/turbo/turbo_actions.js
+- src/js/turbo/turbo_confirm.js
 - src/js/turbo/turbo_debug.js
 - src/js/turbo/turbo_frame_monkey_patch.js
 - tailwind.config.js
@@ -1225,7 +1229,7 @@ metadata:
   homepage_uri: https://radioactive-labs.github.io/plutonium-core/
   source_code_uri: https://github.com/radioactive-labs/plutonium-core
 post_install_message: |
-  ⚠️  Plutonium 0.52.0 — breaking change
+  ⚠️  Plutonium 0.53.0 — breaking change
 
   Entity-scoped URL helpers and path params have been renamed from
   `<entity>_scope_*` to `<entity>_scoped_*`.

data/lib/plutonium/helpers/attachment_helper.rb

@@ -1,73 +0,0 @@
-module Plutonium
-  module Helpers
-    module AttachmentHelper
-      def attachment_preview(attachments, **options)
-        clamp_content begin
-          tag.div class: [options[:identity_class], "attachment-preview-container d-flex flex-wrap gap-1 my-1"],
-            data: {controller: "attachment-preview-container"} do
-            Array(attachments).each do |attachment|
-              next unless attachment.url.present?
-
-              concat begin
-                tag.div class: [options[:identity_class], "attachment-preview d-inline-block text-center"],
-                  title: attachment.filename,
-                  data: {
-                    controller: "attachment-preview",
-                    attachment_preview_mime_type_value: attachment.content_type,
-                    attachment_preview_thumbnail_url_value: _attachment_thumbnail_url(attachment)
-                  } do
-                  tag.figure class: "figure my-1", style: "width: 160px;" do
-                    concat attachment_preview_thumnail(attachment)
-                    concat begin
-                      tag.figcaption class: "figure-caption text-truncate" do
-                        if options[:caption]
-                          caption = options[:caption].is_a?(String) ? options[:caption] : attachment.filename
-                          concat link_to(caption, attachment.url, class: "text-decoration-none", target: :blank)
-                        end
-
-                        if block_given?
-                          elements = Array(yield attachment).compact
-                          elements.each { |elem| concat elem }
-                        end
-                      end
-                    end
-                  end
-                end
-              end
-            end
-          end
-        end
-      end
-
-      def attachment_preview_thumnail(attachment)
-        return unless attachment.url.present?
-
-        # Any changes made here must be reflected in attachment_input_controller#buildPreviewTemplate
-
-        tag.div class: "bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700", data: {attachment_preview_target: "thumbnail"} do
-          thumbnail_url = _attachment_thumbnail_url(attachment)
-          link_body = if thumbnail_url
-            image_tag thumbnail_url, style: "width:100%; height:100%; object-fit: contain;"
-          else
-            _attachment_extension(attachment)
-          end
-
-          link_to link_body, attachment.url, style: "width:150px; height:150px; line-height: 150px;",
-            class: "d-block text-decoration-none user-select-none fs-5 font-monospace text-body-secondary",
-            target: :blank,
-            data: {attachment_preview_target: "thumbnailLink"}
-        end
-      end
-
-      private
-
-      def _attachment_thumbnail_url(attachment)
-        attachment.url if attachment.representable?
-      end
-
-      def _attachment_extension(attachment)
-        attachment.try(:extension) || File.extname(attachment.filename.to_s)
-      end
-    end
-  end
-end