plutonium 0.65.0 → 0.67.0

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.65.0"
+  VERSION = "0.67.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.65.0",
+  "version": "0.67.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

@@ -971,7 +971,7 @@ html.pu-rail-pinned .icon-rail-pin-expand {
   @apply flex items-center p-4 mb-4 rounded-lg;
 }
 .dark .pu-alert {
-  @apply bg-stone-300;
+  @apply bg-gray-800;
 }
 
 .pu-alert-message {
@@ -982,7 +982,7 @@ html.pu-rail-pinned .icon-rail-pin-expand {
   @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;
+  @apply bg-gray-800 hover:bg-gray-700;
 }
 
 /* --- Variants: success / warning / danger / info ---
@@ -995,11 +995,11 @@ html.pu-rail-pinned .icon-rail-pin-expand {
 .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; }
+.dark .pu-toast-success .pu-toast-close { @apply bg-gray-800 text-success-400 hover:bg-gray-700; }
 .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; }
+.dark .pu-alert-success .pu-alert-close { @apply bg-gray-800 text-success-400 hover:bg-gray-700; }
 
 /* warning */
 .pu-toast-warning           { @apply bg-warning-50; }
@@ -1007,11 +1007,11 @@ html.pu-rail-pinned .icon-rail-pin-expand {
 .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; }
+.dark .pu-toast-warning .pu-toast-close { @apply bg-gray-800 text-warning-400 hover:bg-gray-700; }
 .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; }
+.dark .pu-alert-warning .pu-alert-close { @apply bg-gray-800 text-warning-400 hover:bg-gray-700; }
 
 /* danger */
 .pu-toast-danger            { @apply bg-danger-50; }
@@ -1019,11 +1019,11 @@ html.pu-rail-pinned .icon-rail-pin-expand {
 .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; }
+.dark .pu-toast-danger .pu-toast-close { @apply bg-gray-800 text-danger-400 hover:bg-gray-700; }
 .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; }
+.dark .pu-alert-danger .pu-alert-close { @apply bg-gray-800 text-danger-400 hover:bg-gray-700; }
 
 /* info (default / :notice) */
 .pu-toast-info              { @apply bg-info-50; }
@@ -1031,11 +1031,11 @@ html.pu-rail-pinned .icon-rail-pin-expand {
 .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; }
+.dark .pu-toast-info .pu-toast-close { @apply bg-gray-800 text-info-400 hover:bg-gray-700; }
 .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; }
+.dark .pu-alert-info .pu-alert-close { @apply bg-gray-800 text-info-400 hover:bg-gray-700; }
 
 /* ===========================================================================
    Wizard — horizontal "steps" stepper (numbered nodes on a connector track)
@@ -1247,3 +1247,46 @@ html.pu-rail-pinned .icon-rail-pin-expand {
     opacity: 0.6;
   }
 }
+
+/* Star rating input (Form::Components::Rating). Radios run max..1 in a
+   row-reversed box, so `~ label` reaches the stars below the checked or
+   hovered one. */
+.pu-rating {
+  @apply inline-flex flex-row-reverse justify-end gap-0.5 border-0 p-0 m-0;
+}
+.pu-rating label {
+  @apply cursor-pointer text-[var(--pu-border)] transition-colors;
+}
+.pu-rating label svg {
+  @apply w-6 h-6;
+}
+.pu-rating input:checked ~ label,
+.pu-rating label:hover,
+.pu-rating label:hover ~ label {
+  @apply text-warning-500;
+}
+.pu-rating input:checked ~ label svg,
+.pu-rating label:hover svg,
+.pu-rating label:hover ~ label svg {
+  fill: currentColor;
+}
+/* "Clear" comes last in the DOM; order: -1 puts it after the stars
+   (row-reverse lays out from the right). `input ~` matches the star-fill
+   rules' specificity, and coming later lets this win. */
+.pu-rating input ~ label.pu-rating-clear {
+  @apply order-[-1] ml-2 self-center text-sm text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:underline;
+}
+.pu-rating input:focus-visible + label {
+  @apply rounded-sm outline-2 outline-offset-2 outline-primary-500;
+}
+
+/* Tailwind's preflight strips list markers. Restore them inside the rich
+   text editors (Trix, Lexxy) so lists look like lists while editing. */
+trix-editor ul,
+.lexxy-content ul {
+  @apply list-disc ps-6;
+}
+trix-editor ol,
+.lexxy-content ol {
+  @apply list-decimal ps-6;
+}

data/src/css/flatpickr.css

@@ -795,3 +795,94 @@ span.flatpickr-weekday {
 [data-controller="remote-modal"] > .flatpickr-calendar {
   left: auto !important;
 }
+
+/* Dark mode: map flatpickr's hardcoded light palette onto the design tokens. */
+.dark .flatpickr-calendar {
+  background: var(--pu-surface);
+  box-shadow: 0 0 0 1px var(--pu-border), 0 3px 13px rgba(0, 0, 0, 0.4);
+}
+.dark .flatpickr-calendar.arrowTop:after {
+  border-bottom-color: var(--pu-surface);
+}
+.dark .flatpickr-calendar.arrowBottom:after {
+  border-top-color: var(--pu-surface);
+}
+.dark .flatpickr-calendar.arrowTop:before {
+  border-bottom-color: var(--pu-border);
+}
+.dark .flatpickr-calendar.arrowBottom:before {
+  border-top-color: var(--pu-border);
+}
+.dark .flatpickr-calendar.hasTime .flatpickr-time {
+  border-top-color: var(--pu-border);
+}
+.dark .flatpickr-months .flatpickr-month,
+.dark .flatpickr-months .flatpickr-prev-month,
+.dark .flatpickr-months .flatpickr-next-month,
+.dark .flatpickr-current-month input.cur-year,
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
+  color: var(--pu-text);
+  fill: var(--pu-text);
+}
+.dark .flatpickr-months .flatpickr-prev-month:hover svg,
+.dark .flatpickr-months .flatpickr-next-month:hover svg {
+  fill: var(--pu-text-muted);
+}
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
+.dark .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background: var(--pu-surface);
+}
+.dark .flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: var(--pu-text);
+}
+.dark .flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: var(--pu-text);
+}
+.dark span.flatpickr-weekday {
+  color: var(--pu-text-muted);
+}
+.dark .flatpickr-day {
+  color: var(--pu-text);
+}
+.dark .flatpickr-day:hover,
+.dark .flatpickr-day:focus,
+.dark .flatpickr-day.prevMonthDay:hover,
+.dark .flatpickr-day.nextMonthDay:hover,
+.dark .flatpickr-day.inRange {
+  background: var(--pu-surface-alt);
+  border-color: var(--pu-surface-alt);
+}
+.dark .flatpickr-day.inRange {
+  box-shadow: -5px 0 0 var(--pu-surface-alt), 5px 0 0 var(--pu-surface-alt);
+}
+.dark .flatpickr-day.today {
+  border-color: var(--pu-text-muted);
+}
+.dark .flatpickr-day.prevMonthDay,
+.dark .flatpickr-day.nextMonthDay,
+.dark .flatpickr-day.flatpickr-disabled,
+.dark .flatpickr-day.flatpickr-disabled:hover {
+  color: var(--pu-text-muted);
+  opacity: 0.5;
+}
+.dark .flatpickr-weekwrapper .flatpickr-weeks,
+.dark .dayContainer + .dayContainer {
+  box-shadow: none;
+}
+.dark .flatpickr-time input,
+.dark .flatpickr-time .flatpickr-am-pm,
+.dark .flatpickr-time .flatpickr-time-separator {
+  color: var(--pu-text);
+}
+.dark .flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: var(--pu-text);
+}
+.dark .flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: var(--pu-text);
+}
+.dark .flatpickr-time input:hover,
+.dark .flatpickr-time .flatpickr-am-pm:hover,
+.dark .flatpickr-time input:focus,
+.dark .flatpickr-time .flatpickr-am-pm:focus {
+  background: var(--pu-surface-alt);
+}

data/src/js/controllers/easymde_controller.js

@@ -66,6 +66,7 @@ export default class extends Controller {
   #buildOptions() {
     let options = {
       element: this.element,
+      autoDownloadFontAwesome: false,
       promptURLs: true,
       spellChecker: false,
       // Override the default preview renderer

data/src/js/controllers/register_controllers.js

@@ -43,6 +43,7 @@ import BreadcrumbsController from "./breadcrumbs_controller.js"
 import RunProgressController from "./run_progress_controller.js"
 import ChartController from "./chart_controller.js"
 import FrameRefreshController from "./frame_refresh_controller.js"
+import TimeagoController from "./timeago_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -90,4 +91,5 @@ export default function (application) {
   application.register("run-progress", RunProgressController)
   application.register("chart", ChartController)
   application.register("frame-refresh", FrameRefreshController)
+  application.register("timeago", TimeagoController)
 }

data/src/js/controllers/slim_select_controller.js

@@ -9,10 +9,15 @@ import { t } from "../i18n.js";
 //                     When present, SlimSelect's built-in client-side
 //                     filter is replaced by a debounced fetch through
 //                     this URL.
+//   addable         — typed text can be added as a new option (chip
+//                     inputs, see Form::Components::List).
+//   max-selected    — caps how many options a multi-select keeps.
 export default class extends Controller {
   static values = {
     typeaheadUrl: String,
-    typeaheadDebounceMs: { type: Number, default: 200 }
+    typeaheadDebounceMs: { type: Number, default: 200 },
+    addable: Boolean,
+    maxSelected: Number
   }
 
   connect() {
@@ -39,11 +44,19 @@ export default class extends Controller {
     // define placeholderText, searchText, searchPlaceholder and searchingText.
     const strings = t("plutonium.js.libraries.slim_select");
     if (strings && typeof strings === "object") {
-      const { placeholderText, searchText, searchPlaceholder, searchingText } = strings;
-      Object.assign(settings, { placeholderText, searchText, searchPlaceholder, searchingText });
+      const { placeholderText, searchText, searchPlaceholder, searchingText, addableText } = strings;
+      Object.assign(settings, { placeholderText, searchText, searchPlaceholder, searchingText, addableText });
       Object.keys(settings).forEach((k) => settings[k] === undefined && delete settings[k]);
     }
 
+    if (this.hasMaxSelectedValue) settings.maxSelected = this.maxSelectedValue;
+
+    if (this.addableValue) {
+      // A plain "Select Value" / "Search" hides that new values can be typed in.
+      settings.placeholderText = t("plutonium.js.slim_select.add_placeholder");
+      settings.searchPlaceholder = t("plutonium.js.slim_select.add_search_placeholder");
+    }
+
     this.modal = this.element.closest('[data-controller="remote-modal"]');
 
     if (this.modal) {
@@ -67,6 +80,20 @@ export default class extends Controller {
 
     const events = {};
 
+    if (this.modal) {
+      // A modal <dialog> gets `overflow: auto` from the UA stylesheet, so a
+      // dropdown that runs past the dialog's edge (a select near the bottom
+      // of a short modal) is clipped. The dialog never scrolls itself (its
+      // body owns the scroll regions), so let it overflow while open.
+      events.afterOpen = () => { this.modal.style.overflow = "visible"; };
+      events.afterClose = () => { this.modal.style.overflow = ""; };
+    }
+
+    if (this.addableValue) {
+      // Returning false rejects blank input instead of adding an empty chip.
+      events.addable = (value) => value.trim() || false;
+    }
+
     if (this.hasTypeaheadUrlValue && this.typeaheadUrlValue) {
       // Replace SlimSelect's client-side filter with a server fetch.
       // Returns the SlimSelect data array shape: {value, text}.
@@ -193,6 +220,8 @@ export default class extends Controller {
       this.boundModalReposition = null;
     }
 
+    if (this.modal) this.modal.style.overflow = "";
+
     if (this.slimSelect) {
       this.slimSelect.destroy();
       this.slimSelect = null;

data/src/js/controllers/timeago_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Renders a <time> as relative text ("3 days ago", "in 5 minutes") in the
+// page's locale and keeps it current. The server-rendered absolute date stays
+// in the element's title, so hovering still shows the exact time.
+const UNITS = [
+  ["year", 60 * 60 * 24 * 365],
+  ["month", 60 * 60 * 24 * 30],
+  ["week", 60 * 60 * 24 * 7],
+  ["day", 60 * 60 * 24],
+  ["hour", 60 * 60],
+  ["minute", 60],
+  ["second", 1],
+]
+
+export default class extends Controller {
+  static values = {
+    datetime: String,
+    refreshInterval: { type: Number, default: 60000 },
+  }
+
+  connect() {
+    this.formatter = new Intl.RelativeTimeFormat(document.documentElement.lang || undefined, { numeric: "auto" })
+    this.render()
+    this.timer = setInterval(() => this.render(), this.refreshIntervalValue)
+  }
+
+  disconnect() {
+    clearInterval(this.timer)
+  }
+
+  render() {
+    const date = new Date(this.datetimeValue)
+    if (isNaN(date)) return
+
+    const seconds = Math.round((date - Date.now()) / 1000)
+    const [unit, size] = UNITS.find(([, size]) => Math.abs(seconds) >= size) || UNITS[UNITS.length - 1]
+    this.element.textContent = this.formatter.format(Math.round(seconds / size), unit)
+  }
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.65.0
+  version: 0.67.0
 platform: ruby
 authors:
 - Stefan Froelich
 bindir: exe
 cert_chain: []
-date: 2026-10-02 00:00:00.000000000 Z
+date: 2026-10-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -1234,6 +1234,7 @@ files:
 - lib/plutonium/query/filters/date.rb
 - lib/plutonium/query/filters/date_range.rb
 - lib/plutonium/query/filters/select.rb
+- lib/plutonium/query/filters/tags.rb
 - lib/plutonium/query/filters/text.rb
 - lib/plutonium/query/model_scope.rb
 - lib/plutonium/railtie.rb
@@ -1311,13 +1312,25 @@ files:
 - lib/plutonium/ui/display/components/association.rb
 - lib/plutonium/ui/display/components/attachment.rb
 - lib/plutonium/ui/display/components/badge.rb
+- lib/plutonium/ui/display/components/binary.rb
 - lib/plutonium/ui/display/components/boolean.rb
+- lib/plutonium/ui/display/components/code.rb
 - lib/plutonium/ui/display/components/color.rb
 - lib/plutonium/ui/display/components/currency.rb
+- lib/plutonium/ui/display/components/duration.rb
+- lib/plutonium/ui/display/components/file_size.rb
 - lib/plutonium/ui/display/components/formatted_value.rb
+- lib/plutonium/ui/display/components/key_value.rb
+- lib/plutonium/ui/display/components/list.rb
 - lib/plutonium/ui/display/components/markdown.rb
+- lib/plutonium/ui/display/components/number.rb
 - lib/plutonium/ui/display/components/phlexi_render.rb
+- lib/plutonium/ui/display/components/progress.rb
+- lib/plutonium/ui/display/components/rating.rb
+- lib/plutonium/ui/display/components/relative_time.rb
+- lib/plutonium/ui/display/components/rich_text.rb
 - lib/plutonium/ui/display/components/section.rb
+- lib/plutonium/ui/display/components/tags.rb
 - lib/plutonium/ui/display/options/inferred_types.rb
 - lib/plutonium/ui/display/resource.rb
 - lib/plutonium/ui/display/theme.rb
@@ -1326,6 +1339,7 @@ files:
 - lib/plutonium/ui/empty_card.rb
 - lib/plutonium/ui/export_button.rb
 - lib/plutonium/ui/form/base.rb
+- lib/plutonium/ui/form/components/binary.rb
 - lib/plutonium/ui/form/components/currency.rb
 - lib/plutonium/ui/form/components/easymde.rb
 - lib/plutonium/ui/form/components/flatpickr.rb
@@ -1333,12 +1347,17 @@ files:
 - lib/plutonium/ui/form/components/intl_tel_input.rb
 - lib/plutonium/ui/form/components/json.rb
 - lib/plutonium/ui/form/components/key_value_store.rb
+- lib/plutonium/ui/form/components/list.rb
 - lib/plutonium/ui/form/components/password.rb
+- lib/plutonium/ui/form/components/rating.rb
 - lib/plutonium/ui/form/components/resource_select.rb
+- lib/plutonium/ui/form/components/rich_text.rb
 - lib/plutonium/ui/form/components/section.rb
 - lib/plutonium/ui/form/components/secure_association.rb
 - lib/plutonium/ui/form/components/secure_polymorphic_association.rb
 - lib/plutonium/ui/form/components/sticky_footer.rb
+- lib/plutonium/ui/form/components/tags.rb
+- lib/plutonium/ui/form/components/tags_filter.rb
 - lib/plutonium/ui/form/components/toggle.rb
 - lib/plutonium/ui/form/components/uppy.rb
 - lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb
@@ -1376,6 +1395,9 @@ files:
 - lib/plutonium/ui/nav_grid_menu.rb
 - lib/plutonium/ui/nav_user.rb
 - lib/plutonium/ui/options/has_cents_field.rb
+- lib/plutonium/ui/options/rich_text_field.rb
+- lib/plutonium/ui/options/secret_field.rb
+- lib/plutonium/ui/options/tags_field.rb
 - lib/plutonium/ui/page/base.rb
 - lib/plutonium/ui/page/dashboard.rb
 - lib/plutonium/ui/page/edit.rb
@@ -1511,6 +1533,7 @@ files:
 - src/js/controllers/table_column_menu_controller.js
 - src/js/controllers/table_header_controller.js
 - src/js/controllers/textarea_autogrow_controller.js
+- src/js/controllers/timeago_controller.js
 - src/js/controllers/view_switcher_controller.js
 - src/js/controllers/wizard_controller.js
 - src/js/core.js