plutonium 0.64.0 → 0.65.0

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",

data/src/js/controllers/register_controllers.js

@@ -41,6 +41,8 @@ import PositionedController from "./positioned_controller.js"
 import CurrencyInputController from "./currency_input_controller.js"
 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"
 
 export default function (application) {
   // Register controllers here
@@ -86,4 +88,6 @@ export default function (application) {
   application.register("currency-input", CurrencyInputController)
   application.register("breadcrumbs", BreadcrumbsController)
   application.register("run-progress", RunProgressController)
+  application.register("chart", ChartController)
+  application.register("frame-refresh", FrameRefreshController)
 }