plutonium 0.64.0 → 0.66.0

data/src/css/components.css

@@ -612,6 +612,94 @@ select.pu-input[multiple] option {
   @apply mt-1 text-base;
 }
 
+/* ===================
+   DASHBOARD CARDS
+   =================== */
+
+.pu-dashboard-card {
+  @apply p-4;
+}
+
+.pu-dashboard-card-header {
+  @apply flex items-start gap-3;
+}
+
+.pu-dashboard-card-icon {
+  background-color: var(--pu-surface-alt);
+  color: var(--pu-text-muted);
+  border-radius: var(--pu-radius-md);
+  @apply flex size-9 shrink-0 items-center justify-center;
+}
+
+.pu-dashboard-card-title {
+  color: var(--pu-text-muted);
+  @apply text-sm font-medium leading-5 truncate;
+}
+
+.pu-dashboard-card-description {
+  color: var(--pu-text-subtle);
+  @apply mt-0.5 text-xs;
+}
+
+.pu-dashboard-card-link {
+  color: var(--pu-text-subtle);
+  @apply shrink-0 -mr-1 -mt-1 rounded-[var(--pu-radius-md)] p-1 transition-colors hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)];
+}
+
+.pu-dashboard-card-body {
+  @apply mt-3 flex-1 min-w-0;
+}
+
+.pu-dashboard-card-error {
+  color: var(--pu-text-danger);
+  @apply flex items-center gap-2 text-sm;
+}
+
+.pu-dashboard-skeleton {
+  @apply p-4;
+}
+
+.pu-metric-value {
+  color: var(--pu-text);
+  @apply text-3xl font-semibold leading-none tracking-tight tabular-nums truncate;
+}
+
+.pu-metric-change {
+  @apply mt-3 flex items-center gap-1.5 text-sm;
+}
+
+.pu-metric-change-label {
+  color: var(--pu-text-muted);
+  @apply font-normal;
+}
+
+.pu-metric-change-positive {
+  @apply text-success-600;
+}
+.dark .pu-metric-change-positive {
+  @apply text-success-400;
+}
+
+.pu-metric-change-negative {
+  @apply text-danger-600;
+}
+.dark .pu-metric-change-negative {
+  @apply text-danger-400;
+}
+
+.pu-metric-change-neutral {
+  color: var(--pu-text-muted);
+}
+
+.pu-chart {
+  @apply relative w-full;
+}
+
+.pu-chart-loading {
+  color: var(--pu-text-subtle);
+  @apply absolute inset-0 flex items-center justify-center text-sm;
+}
+
 /* ===================
    SELECTION CELL
    =================== */
@@ -883,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 {
@@ -894,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 ---
@@ -907,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; }
@@ -919,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; }
@@ -931,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; }
@@ -943,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)
@@ -975,6 +1063,9 @@ html.pu-rail-pinned .icon-rail-pin-expand {
 }
 .pu-wizard-steps .pu-step-label {
   @apply block mt-2 font-bold; font-size: .8rem; color: var(--pu-text-muted);
+  /* A 13+ step wizard gives each label a narrow column; without this a single
+     long word ("organisation") overflows and collides with its neighbours. */
+  overflow-wrap: anywhere; hyphens: auto;
 }
 .pu-wizard-steps a.pu-step-link:hover .pu-step-label { @apply underline; }
 

data/src/css/slim_select.css

@@ -399,41 +399,3 @@
 .ss-main.ss-valid .ss-values .ss-placeholder {
   @apply text-success-400;
 }
-
-/* Modal-specific styles for SlimSelect dropdown */
-.ss-dropdown-container {
-  position: absolute;
-  z-index: 9999;
-  inset: 40% 0px auto;
-}
-
-.ss-dropdown-container .ss-content {
-  position: static !important;
-  transform: none !important;
-  width: 100% !important;
-  border-radius: 0 !important;
-  margin: 0 !important;
-  pointer-events: none !important;
-  /* Disabled by default */
-}
-
-/* When active (dropdown is expanded), enable pointer events */
-.ss-dropdown-container.ss-active .ss-content {
-  pointer-events: auto !important;
-}
-
-.ss-dropdown-container .ss-list {
-  max-height: 250px !important;
-  overflow-y: auto !important;
-}
-
-/* Ensure the dropdown doesn't block other elements when closed */
-.ss-dropdown-container:not(:has(.ss-content)),
-.ss-dropdown-container:not(.ss-active) {
-  pointer-events: none !important;
-}
-
-/* Prevent interaction with closed dropdown */
-.ss-dropdown-container:not(.ss-active) * {
-  pointer-events: none !important;
-}

data/src/css/tokens.css

@@ -57,6 +57,18 @@
    --pu-card-bg: #ffffff;
    --pu-card-border: #e2e8f0;
 
+   /* ===================
+       Chart Palette - series colors, read by the chart controller
+       =================== */
+   --pu-chart-1: theme(colors.primary.500);
+   --pu-chart-2: #0ea5e9;
+   --pu-chart-3: #10b981;
+   --pu-chart-4: #f59e0b;
+   --pu-chart-5: #ef4444;
+   --pu-chart-6: #8b5cf6;
+   --pu-chart-7: #ec4899;
+   --pu-chart-8: #64748b;
+
    /* ===================
        Shadow System - Layered, soft
        =================== */
@@ -150,6 +162,18 @@
    --pu-card-bg: #1e293b;
    --pu-card-border: #334155;
 
+   /* ===================
+       Chart Palette (Dark) - lighter tints for contrast on dark surfaces
+       =================== */
+   --pu-chart-1: theme(colors.primary.400);
+   --pu-chart-2: #38bdf8;
+   --pu-chart-3: #34d399;
+   --pu-chart-4: #fbbf24;
+   --pu-chart-5: #f87171;
+   --pu-chart-6: #a78bfa;
+   --pu-chart-7: #f472b6;
+   --pu-chart-8: #94a3b8;
+
    /* ===================
        Shadow System (Dark)
        =================== */

data/src/js/controllers/attachment_input_controller.js

@@ -5,6 +5,7 @@ import Dashboard from '@uppy/dashboard'
 import ImageEditor from '@uppy/image-editor'
 import XHRUpload from '@uppy/xhr-upload'
 import DomElement from "../support/dom_element"
+import { t } from "../i18n.js"
 
 // Connects to data-controller="attachment-input"
 export default class extends Controller {
@@ -109,7 +110,7 @@ export default class extends Controller {
     const dialog = this.element.closest("dialog")
     if (dialog) dashboardOptions.target = dialog
 
-    this.uppy = new Uppy({
+    const uppyOptions = {
       restrictions: {
         maxFileSize: this.maxFileSizeValue,
         minFileSize: this.minFileSizeValue,
@@ -119,7 +120,14 @@ export default class extends Controller {
         allowedFileTypes: this.allowedFileTypesValue,
         requiredMetaFields: this.requiredMetaFieldsValue,
       }
-    })
+    }
+
+    // Optional locale passthrough: plutonium.js.libraries.uppy.strings holds
+    // Uppy locale strings (core and Dashboard), merged over the English defaults.
+    const strings = t("plutonium.js.libraries.uppy.strings")
+    if (strings && typeof strings === "object") uppyOptions.locale = { strings }
+
+    this.uppy = new Uppy(uppyOptions)
       .use(Dashboard, dashboardOptions)
       .use(ImageEditor, { target: Dashboard })
 
@@ -176,7 +184,7 @@ export default class extends Controller {
     const len = this.attachmentPreviewOutlets.length
     if (len > 1) {
       this.deleteAllTrigger.style["display"] = 'initial'
-      this.deleteAllTrigger.textContent = `Delete ${this.attachmentPreviewOutlets.length}`
+      this.deleteAllTrigger.textContent = t("plutonium.js.attachment_input.delete_all", { count: this.attachmentPreviewOutlets.length })
     } else {
       this.deleteAllTrigger.style["display"] = 'none'
     }
@@ -198,7 +206,8 @@ export default class extends Controller {
   }
 
   #buildUploadTrigger() {
-    const triggerPrompt = this.multiple ? "Choose files" : "Choose file"
+    // One plural-keyed string: `one` for a single attachment, `other` for multiple.
+    const triggerPrompt = t("plutonium.js.attachment_input.choose_file", { count: this.multiple ? 2 : 1 })
     this.uploadTrigger = DomElement.fromTemplate(
       `<button type="button" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700 inline-flex items-center">
         <svg class="w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
@@ -214,12 +223,12 @@ export default class extends Controller {
   #buildDeleteAllTrigger() {
     this.deleteAllTrigger = DomElement.fromTemplate(
       `<button type="button" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm         px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800 inline-flex items-center">
-        Delete ${this.attachmentPreviewOutlets.length}
+        ${t("plutonium.js.attachment_input.delete_all", { count: this.attachmentPreviewOutlets.length })}
       </button>`,
       false
     )
     this.deleteAllTrigger.addEventListener('click', () => {
-      if (confirm('Are you sure?')) this.attachmentPreviewContainerOutlet.clear()
+      if (confirm(t("plutonium.js.are_you_sure"))) this.attachmentPreviewContainerOutlet.clear()
     })
   }
 

data/src/js/controllers/chart_controller.js

@@ -0,0 +1,162 @@
+import { Controller } from "@hotwired/stimulus"
+import { t } from "../i18n.js"
+
+// Connects to data-controller="chart"
+//
+// Draws a Chartkick chart from data attributes rendered by
+// Plutonium::UI::Dashboard::Chart:
+//
+//   data-chart-type-value    — Chartkick constructor ("LineChart", "PieChart", ...)
+//   data-chart-data-value    — JSON: {label: value}, [[label, value], ...] or [{name, data}, ...]
+//   data-chart-options-value — JSON: Chartkick options passed through from the card
+//   data-chart-script-value  — URL of the charts bundle, injected once per page
+//
+// The bundle is loaded on demand so pages without a chart never pay for
+// Chart.js. Colors and text default to Plutonium's design tokens and are
+// re-read when the color mode flips, so a chart matches the theme in both modes.
+
+const PALETTE_SIZE = 8
+let libraryPromise = null
+
+function loadLibrary(src) {
+  if (window.Chartkick && window.Chartkick.adapters.length > 0) return Promise.resolve(window.Chartkick)
+  if (libraryPromise) return libraryPromise
+
+  libraryPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${src}"]`)
+    const script = existing || document.createElement("script")
+
+    const settle = () => {
+      if (window.Chartkick) resolve(window.Chartkick)
+      else reject(new Error("[plutonium] the charts bundle loaded but defined no Chartkick"))
+    }
+
+    script.addEventListener("load", settle, { once: true })
+    script.addEventListener("error", () => {
+      libraryPromise = null
+      reject(new Error(`[plutonium] could not load the charts bundle from ${src}`))
+    }, { once: true })
+
+    if (!existing) {
+      script.src = src
+      script.async = true
+      script.dataset.turboTrack = "reload"
+      document.head.appendChild(script)
+    }
+  })
+
+  return libraryPromise
+}
+
+function cssVar(name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+}
+
+function themeColors() {
+  const colors = []
+  for (let i = 1; i <= PALETTE_SIZE; i++) {
+    const color = cssVar(`--pu-chart-${i}`)
+    if (color) colors.push(color)
+  }
+  return colors
+}
+
+function isPlainObject(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+}
+
+function deepMerge(base, extra) {
+  const out = { ...base }
+  for (const [key, value] of Object.entries(extra || {})) {
+    out[key] = isPlainObject(value) && isPlainObject(out[key]) ? deepMerge(out[key], value) : value
+  }
+  return out
+}
+
+export default class extends Controller {
+  static values = {
+    type: { type: String, default: "LineChart" },
+    data: String,
+    options: Object,
+    script: String
+  }
+
+  connect() {
+    this.render = this.render.bind(this)
+    this.observer = new MutationObserver((mutations) => {
+      if (mutations.some((m) => m.attributeName === "class")) this.render()
+    })
+    this.observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+
+    this.element.addEventListener("turbo:morph-element", this.render)
+
+    loadLibrary(this.scriptValue)
+      .then(() => this.render())
+      .catch((error) => {
+        console.error(error)
+        this.element.textContent = t("plutonium.js.charts.failed")
+      })
+  }
+
+  disconnect() {
+    this.observer?.disconnect()
+    this.element.removeEventListener("turbo:morph-element", this.render)
+    this.#destroy()
+  }
+
+  dataValueChanged() { this.render() }
+  optionsValueChanged() { this.render() }
+
+  render() {
+    const Chartkick = window.Chartkick
+    if (!Chartkick || !this.element.isConnected) return
+
+    const Klass = Chartkick[this.typeValue]
+    if (!Klass) {
+      console.error(`[plutonium] unknown chart type ${this.typeValue}`)
+      return
+    }
+
+    this.#destroy()
+    this.element.replaceChildren()
+    this.chart = new Klass(this.element, this.#data(), this.#options())
+  }
+
+  #destroy() {
+    if (this.chart) {
+      this.chart.destroy()
+      this.chart = null
+    }
+  }
+
+  #data() {
+    try {
+      return JSON.parse(this.dataValue || "[]")
+    } catch (error) {
+      console.error("[plutonium] chart data is not valid JSON", error)
+      return []
+    }
+  }
+
+  // Plutonium's defaults, with the card's own options merged over them.
+  // Axis styling only applies to cartesian charts: handing a pie chart
+  // `scales` makes Chart.js draw axes around it.
+  #options() {
+    const text = cssVar("--pu-text-muted")
+    const grid = cssVar("--pu-border")
+    const surface = cssVar("--pu-card-bg")
+    const library = { color: text }
+
+    if (this.typeValue === "PieChart") {
+      library.elements = { arc: { borderColor: surface } }
+    } else {
+      library.scales = {
+        x: { ticks: { color: text }, grid: { color: grid }, border: { color: grid } },
+        y: { ticks: { color: text }, grid: { color: grid }, border: { color: grid } }
+      }
+    }
+
+    const defaults = { colors: themeColors(), empty: t("plutonium.js.charts.empty"), library }
+    return deepMerge(defaults, this.optionsValue)
+  }
+}

data/src/js/controllers/clipboard_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { t } from "../i18n.js"
 
 export default class extends Controller {
   static targets = ["source"]
@@ -9,7 +10,7 @@ export default class extends Controller {
     const originalText = button.textContent
 
     navigator.clipboard.writeText(text).then(() => {
-      button.textContent = "Copied!"
+      button.textContent = t("plutonium.js.clipboard.copied")
       setTimeout(() => {
         button.textContent = originalText
       }, 2000)
@@ -17,7 +18,7 @@ export default class extends Controller {
       // Fallback for browsers that don't support clipboard API
       console.warn("Clipboard API failed, using fallback:", err)
       this.fallbackCopy(text)
-      button.textContent = "Copied!"
+      button.textContent = t("plutonium.js.clipboard.copied")
       setTimeout(() => {
         button.textContent = originalText
       }, 2000)

data/src/js/controllers/dirty_form_guard_controller.js

@@ -1,4 +1,5 @@
-import { Controller } from "@hotwired/stimulus";
+import { Controller } from "@hotwired/stimulus"
+import { t } from "../i18n.js";
 
 // Connects to data-controller="dirty-form-guard"
 // Prompts before discarding a form's unsaved changes. Two guard surfaces,
@@ -220,7 +221,7 @@ export default class extends Controller {
 
     const message =
       trigger.getAttribute("data-dirty-form-guard-leave") ||
-      "You have unsaved changes that will be lost. Continue?";
+      t("plutonium.js.dirty_form_guard.unsaved_changes");
     const confirmed = await this.#confirm(message);
     if (!confirmed) return;
 
@@ -339,7 +340,7 @@ export default class extends Controller {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => d.setAttribute("data-open", ""));
       });
-    } else if (window.confirm("Discard your changes?")) {
+    } else if (window.confirm(t("plutonium.js.dirty_form_guard.discard_changes"))) {
       this.forceClose = true;
       this.dialog.dispatchEvent(new CustomEvent("modal:request-close"));
     }

data/src/js/controllers/easymde_controller.js

@@ -3,6 +3,9 @@ import DOMPurify from 'dompurify';
 import { marked } from 'marked';
 
 // Connects to data-controller="easymde"
+//
+// Not translated: EasyMDE has no locale option (its toolbar titles are
+// per-button config), so there is no clean plutonium.js.libraries hook.
 export default class extends Controller {
   static targets = ["textarea"]
   

data/src/js/controllers/filter_panel_controller.js

@@ -59,10 +59,20 @@ export default class extends Controller {
     this._previousBodyOverflow = null
   }
 
-  // Reset every input under this controller's scope, then submit so the
-  // table reflects the cleared filters immediately.
+  // Reset every input in the FILTER form, then submit it so the collection
+  // reflects the cleared filters immediately.
+  //
+  // Scoped to #filter-form, NOT the whole controller element: the toolbar's
+  // search box is a separate <form> that lives in the same scope but before
+  // this one. Submitting that bare form (or clearing its inputs) would drop the
+  // view / sort / scope state the filter form preserves via hidden inputs —
+  // which on the kanban board bounced the user back to the table (the dropped
+  // ?view=kanban fell through to the default view).
   clear() {
-    this.element.querySelectorAll("input, select, textarea").forEach(input => {
+    const form = this.element.querySelector("#filter-form")
+    if (!form) return
+
+    form.querySelectorAll("input, select, textarea").forEach(input => {
       if (input.type === "checkbox" || input.type === "radio") {
         input.checked = false
       } else if (input.tagName === "SELECT") {
@@ -74,13 +84,12 @@ export default class extends Controller {
       }
     })
 
-    this.element.querySelectorAll('[data-controller="flatpickr"]').forEach(input => {
+    form.querySelectorAll('[data-controller="flatpickr"]').forEach(input => {
       const controller = this.application.getControllerForElementAndIdentifier(input, "flatpickr")
       if (controller?.picker) controller.picker.clear()
     })
 
-    const form = this.element.querySelector("form")
-    if (form) form.requestSubmit()
+    form.requestSubmit()
   }
 
   get isOpen() {

data/src/js/controllers/flatpickr_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
+import { lookup } from "../i18n.js";
 
 // Connects to data-controller="flatpickr"
 export default class extends Controller {
@@ -44,6 +45,13 @@ export default class extends Controller {
   #buildOptions() {
     let options = { altInput: true };
 
+    // Optional locale passthrough: plutonium.js.libraries.flatpickr.locale is
+    // the flatpickr locale key (e.g. "de"). Loading the matching l10n bundle
+    // (flatpickr/dist/l10n/de.js) is the host app's job; without it flatpickr
+    // falls back to English.
+    const locale = lookup("plutonium.js.libraries.flatpickr.locale");
+    if (typeof locale === "string") options.locale = locale;
+
     if (this.element.attributes.type.value == "datetime-local") {
       options.enableTime = true;
     } else if (this.element.attributes.type.value == "time") {

data/src/js/controllers/frame_refresh_controller.js

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="frame-refresh"
+//
+// Reloads a `<turbo-frame src>` every `interval` seconds while the tab is
+// visible, so a dashboard card declared with `refresh:` keeps itself current
+// without a page reload. Pauses when the document is hidden and resumes with
+// an immediate reload when it becomes visible again after a missed tick.
+export default class extends Controller {
+  static values = { interval: Number }
+
+  connect() {
+    this.tick = this.tick.bind(this)
+    this.onVisibility = this.onVisibility.bind(this)
+    document.addEventListener("visibilitychange", this.onVisibility)
+    this.#start()
+  }
+
+  disconnect() {
+    document.removeEventListener("visibilitychange", this.onVisibility)
+    this.#stop()
+  }
+
+  intervalValueChanged() {
+    this.#stop()
+    this.#start()
+  }
+
+  tick() {
+    if (document.hidden) {
+      this.missed = true
+      return
+    }
+    this.reload()
+  }
+
+  reload() {
+    this.missed = false
+    if (typeof this.element.reload === "function" && this.element.getAttribute("src")) {
+      this.element.reload()
+    }
+  }
+
+  onVisibility() {
+    if (!document.hidden && this.missed) this.reload()
+  }
+
+  #start() {
+    if (!(this.intervalValue > 0)) return
+    this.timer = setInterval(this.tick, this.intervalValue * 1000)
+  }
+
+  #stop() {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+  }
+}

data/src/js/controllers/intl_tel_input_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { t } from "../i18n.js"
 
 // Connects to data-controller="intl-tel-input"
 export default class extends Controller {
@@ -52,7 +53,11 @@ export default class extends Controller {
   #buildOptions() {
     // Defaults first; the definition-supplied `options` value (e.g.
     // { initialCountry: "gh", strictMode: false }) is spread last so it wins.
+    // Optional locale passthrough: plutonium.js.libraries.intl_tel_input is
+    // the intl-tel-input `i18n` option (an object of strings).
+    const i18n = t("plutonium.js.libraries.intl_tel_input")
     return {
+      ...(i18n && typeof i18n === "object" ? { i18n } : {}),
       strictMode: true,
       hiddenInput: () => ({ phone: this.inputTarget.attributes.name.value }),
       loadUtilsOnInit: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.8.1/build/js/utils.js",