plutonium 0.50.0 → 0.51.0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Build production-ready Rails apps in minutes, not days. Convention-driven, fully customizable, AI-ready.",
   "type": "module",
   "main": "src/js/core.js",
@@ -25,27 +25,27 @@
     "@uppy/dashboard": "^4.1.3",
     "@uppy/image-editor": "^3.2.1",
     "@uppy/xhr-upload": "^4.2.3",
-    "dompurify": "^3.2.2",
+    "dompurify": "^3.4.3",
     "lodash.debounce": "^4.0.8",
     "marked": "^15.0.3"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/postcss": "^4.3.0",
     "@tailwindcss/typography": "^0.5.16",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^8.2.2",
     "cssnano": "^7.0.2",
-    "esbuild": "^0.20.1",
+    "esbuild": "^0.28.0",
     "esbuild-plugin-manifest": "^1.0.3",
     "flowbite-typography": "^1.0.5",
-    "mermaid": "^11.4.0",
-    "postcss": "^8.4.35",
-    "postcss-cli": "^11.0.0",
+    "mermaid": "^11.15.0",
+    "postcss": "^8.5.14",
+    "postcss-cli": "^11.0.1",
     "postcss-hash": "^3.0.0",
-    "postcss-import": "^16.1.0",
-    "tailwindcss": "^4.0.9",
-    "vitepress": "^1.4.1",
+    "postcss-import": "^16.1.1",
+    "tailwindcss": "^4.3.0",
+    "vitepress": "^1.6.4",
     "vitepress-plugin-mermaid": "^2.0.17"
   },
   "scripts": {

data/src/css/slim_select.css

@@ -151,6 +151,10 @@
   @apply absolute flex h-auto flex-col w-auto max-h-72 border transition-all duration-200 opacity-0 z-[10000] overflow-hidden;
   background-color: var(--pu-surface);
   border-color: var(--pu-border);
+  /* Default text color for everything inside the panel — covers the
+     "No Results" text and any other slim-select chrome that doesn't
+     declare its own color rule. Specific rules below still win. */
+  color: var(--pu-text);
   box-shadow: var(--pu-shadow-md);
   transform: scaleY(0);
   transform-origin: top;

data/src/js/controllers/slim_select_controller.js

@@ -1,7 +1,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="slim-select"
+//
+// Optional values (used by the typeahead-capable ResourceSelect):
+//   typeahead-url   — backend endpoint that returns
+//                     {results: [{value, label}, ...], has_more: bool}.
+//                     When present, SlimSelect's built-in client-side
+//                     filter is replaced by a debounced fetch through
+//                     this URL.
 export default class extends Controller {
+  static values = {
+    typeaheadUrl: String,
+    typeaheadDebounceMs: { type: Number, default: 200 }
+  }
+
   connect() {
     if (this.slimSelect) return;
 
@@ -47,9 +59,18 @@ export default class extends Controller {
       settings.openPosition = "auto";
     }
 
+    const events = {};
+
+    if (this.hasTypeaheadUrlValue && this.typeaheadUrlValue) {
+      // Replace SlimSelect's client-side filter with a server fetch.
+      // Returns the SlimSelect data array shape: {value, text}.
+      events.search = (search, currentData) => this.#typeaheadFetch(search, currentData);
+    }
+
     this.slimSelect = new SlimSelect({
       select: this.element,
       settings: settings,
+      events: events,
     });
 
     // Add event listeners for better positioning
@@ -177,6 +198,46 @@ export default class extends Controller {
     this.#cleanupSlimSelect();
   }
 
+  // Server-driven search. SlimSelect calls events.search on each
+  // keystroke; we debounce so that rapid typing produces a single
+  // request, and abort any in-flight fetch when a newer one starts.
+  // Returns a Promise resolving to either a DataArray (rendered as
+  // options) or a string (rendered as the no-results label).
+  #typeaheadFetch(search, _currentData) {
+    if (this._typeaheadDebounce) clearTimeout(this._typeaheadDebounce);
+    if (this._typeaheadAbort) this._typeaheadAbort.abort();
+
+    return new Promise((resolve) => {
+      this._typeaheadDebounce = setTimeout(() => {
+        this._typeaheadAbort = new AbortController();
+        this.#performTypeaheadFetch(search, this._typeaheadAbort.signal).then(resolve);
+      }, this.typeaheadDebounceMsValue);
+    });
+  }
+
+  async #performTypeaheadFetch(search, signal) {
+    const url = new URL(this.typeaheadUrlValue, window.location.origin);
+    url.searchParams.set("q", search || "");
+
+    try {
+      const res = await fetch(url.toString(), {
+        headers: { Accept: "application/json" },
+        signal: signal,
+      });
+      if (!res.ok) return "Search failed";
+      const json = await res.json();
+      const results = Array.isArray(json.results) ? json.results : [];
+      return results.map((row) => ({
+        value: String(row.value ?? ""),
+        text: String(row.label ?? ""),
+      }));
+    } catch (e) {
+      if (e.name === "AbortError") return [];
+      console.warn("[slim-select] typeahead error", e);
+      return "Search failed";
+    }
+  }
+
   #handleMorph() {
     if (!this.element.isConnected) return;
 

data/src/js/turbo/turbo_actions.js

@@ -6,3 +6,36 @@ Turbo.StreamActions.redirect = function () {
   const url = this.getAttribute("url")
   Turbo.visit(url)
 }
+
+// Closes the <dialog> rendered inside the targeted turbo-frame and
+// empties the frame so the dialog can be re-opened later. Used by the
+// stacked-modal flow: after a successful create inside the secondary
+// modal, the server tells the browser to dismiss it.
+Turbo.StreamActions.close_frame = function () {
+  const frameId = this.getAttribute("target")
+  if (!frameId) return
+
+  const frame = document.getElementById(frameId)
+  if (!frame) return
+
+  const dialog = frame.querySelector("dialog")
+  if (dialog && typeof dialog.close === "function") dialog.close()
+
+  // Clearing the frame's content keeps a future visit to the same URL
+  // re-fetching (turbo would otherwise treat the frame as cached).
+  frame.innerHTML = ""
+  frame.removeAttribute("src")
+}
+
+// Reloads the targeted turbo-frame from its current src. Used after a
+// secondary-modal action mutates data the primary modal depends on
+// (e.g. a newly created association option) so the primary re-renders.
+Turbo.StreamActions.reload_frame = function () {
+  const frameId = this.getAttribute("target")
+  if (!frameId) return
+
+  const frame = document.getElementById(frameId)
+  if (!frame || typeof frame.reload !== "function") return
+
+  frame.reload()
+}