plutonium 0.64.0 → 0.65.0

data/config/locales/en/ui.yml

@@ -0,0 +1,93 @@
+# Fixed strings rendered by the components under lib/plutonium/ui.
+en:
+  plutonium:
+    ui:
+      loading: "Loading..."
+      details: "Details"
+      home: "Home"
+      actions_dropdown:
+        actions: "Actions"
+        open_menu: "Open actions menu"
+      breadcrumbs:
+        label: "Breadcrumb"
+        home: "Home"
+        show_collapsed: "Show collapsed breadcrumbs"
+      color_mode:
+        toggle: "Toggle color mode"
+      empty_state:
+        none_available: "No %{resources} available"
+      export:
+        export: "Export"
+        export_all: "Export all"
+        more_options: "More export options"
+      frame_navigator:
+        back: "Back"
+        refresh: "Refresh"
+        maximize: "Maximize"
+      grid:
+        open: "Open"
+        open_record: "Open %{name}"
+      layout:
+        sidebar_navigation: "Sidebar Navigation"
+        toggle_sidebar: "Toggle sidebar"
+        toggle_sidebar_pin: "Toggle sidebar pin"
+      modal:
+        dialog: "Dialog"
+        open_full_page: "Open full page"
+        open_full_page_new_tab: "Open full page in a new tab"
+        close: "Close dialog"
+      nav_user:
+        open_menu: "Open user menu"
+        avatar_alt: "avatar"
+      nav_grid_menu:
+        view: "View %{label}"
+      page:
+        new_title: "New %{resource}"
+        edit_title: "Edit %{resource}"
+      table:
+        column_options: "Column options"
+        clear_sort: "Clear sort"
+        filters: "Filters"
+        filter: "Filter"
+        clear: "Clear"
+        clear_all: "Clear all"
+        apply: "Apply"
+        apply_filters: "Apply Filters"
+        close_filters: "Close filters"
+        search_placeholder: "Search..."
+        all: "All"
+        scope: "Scope"
+        view: "View"
+        views:
+          table: "Table"
+          grid: "Grid"
+          kanban: "Board"
+        remove_filter: "Remove %{filter} filter"
+        result_count:
+          one: "%{count} result"
+          other: "%{count} results"
+        selected_count: "%{count} selected"
+        clear_selection: "Clear selection"
+        no_bulk_actions: "No bulk actions available"
+        more_actions: "More actions"
+      form:
+        discard_title: "Discard changes?"
+        discard_description: "You have unsaved changes. Closing this form now will lose them."
+        keep_editing: "Keep editing"
+        discard_changes: "Discard changes"
+        create_and_add_another: "Create and add another"
+        update_and_continue_editing: "Update and continue editing"
+        repeater:
+          add: "Add %{name}"
+          remove: "Remove"
+          removed: "Removed"
+          restore: "Restore"
+        key_value_store:
+          key_placeholder: "Key"
+          value_placeholder: "Value"
+          add_pair: "+ Add Pair"
+        password:
+          keep_current_hint: "Leave blank to keep the current value."
+          reenter_hint: "Re-enter the new value to save it."
+        attachment:
+          delete: "Delete"

data/config/locales/en/wizard.yml

@@ -0,0 +1,46 @@
+# Plutonium wizard strings: the step page, the review body, the stepper, the
+# resume-or-new chooser, the one-time "already completed" page and the driving
+# concern's flash / error text. Loaded at the lowest precedence, so a package,
+# portal or the host application can override any key.
+en:
+  plutonium:
+    wizard:
+      cancel: "Cancel"
+      authorization_denied: "Wizard authorization denied"
+      run_not_found: "wizard run not found"
+      page:
+        title: "%{wizard} — %{step}"
+        fallback_title: "Wizard"
+        step_position: "Step %{position} of %{total}"
+        review_prompt: "Check everything over before you finish."
+      nav:
+        back: "Back"
+        finish: "Finish"
+        next: "Next"
+        save_and_continue: "Save & continue"
+        save_and_review: "Save & review"
+        unsaved_back: "You have unsaved changes on this step. Go back and lose them?"
+        unsaved_cancel: "You have unsaved changes. Cancel the wizard and lose them?"
+      stepper:
+        progress: "Progress"
+      review:
+        label: "Review"
+        outstanding: "Some steps still need attention before you can finish:"
+        fix_step: "Fix %{step}"
+        edit: "Edit"
+        none: "None"
+        row_label: "%{label}: "
+        ready_title: "You're all set"
+        ready_message: "Everything looks good. Click Finish to complete."
+      chooser:
+        prompt: "Pick up where you left off, or start a new one."
+        in_progress: "In progress"
+        updated_ago: "Updated %{time} ago"
+        a_while: "a while"
+        resume: "Resume"
+        cancel_draft: "Cancel this %{wizard} draft"
+        discard_confirm: "Discard this in-progress %{wizard}? This can't be undone."
+        start_new: "Start new"
+      completed:
+        message: "You've already completed this — there's nothing more to do here."
+        continue: "Continue"

data/docs/.vitepress/config.ts

@@ -45,6 +45,28 @@ export default defineConfig(withMermaid({
       : []),
   ],
   ignoreDeadLinks: 'localhostLinks',
+  // A blog post shared as a link is its own thing, not the homepage. Give each
+  // one an og card built from the frontmatter it already declares; every other
+  // page keeps the site-wide card from `head` above.
+  //
+  // `mergeHead` keys on the FIRST attribute of each meta tag, so `property` and
+  // `name` have to lead here exactly as they do in `head`, or these append
+  // alongside the site tags instead of replacing them.
+  transformHead({ pageData }) {
+    const { relativePath, frontmatter } = pageData
+    // Same date test the loader and the feed use to tell a post from the index.
+    if (!relativePath.startsWith("blog/") || !frontmatter.date) return []
+
+    const url = `${hostname}/${relativePath.replace(/\.md$/, "")}`
+    return [
+      ["meta", { property: "og:type", content: "article" }],
+      ["meta", { property: "og:title", content: frontmatter.title }],
+      ["meta", { property: "og:description", content: frontmatter.description }],
+      ["meta", { property: "og:url", content: url }],
+      ["meta", { name: "twitter:title", content: frontmatter.title }],
+      ["meta", { name: "twitter:description", content: frontmatter.description }],
+    ] as HeadConfig[]
+  },
   srcExclude: ['superpowers/**'],
   vite: {
     plugins: [
@@ -136,6 +158,7 @@ export default defineConfig(withMermaid({
             { text: "User Invites", link: "/guides/user-invites" },
             { text: "Wizards", link: "/guides/wizards" },
             { text: "Kanban Boards", link: "/guides/kanban" },
+            { text: "Dashboards", link: "/guides/dashboards" },
           ]
         },
         {
@@ -159,6 +182,7 @@ export default defineConfig(withMermaid({
           items: [
             { text: "Overview", link: "/reference/" },
             { text: "Configuration", link: "/reference/configuration" },
+            { text: "Internationalization", link: "/reference/i18n" },
           ]
         },
         {
@@ -181,7 +205,7 @@ export default defineConfig(withMermaid({
             { text: "Definition", link: "/reference/resource/definition" },
             { text: "Query", link: "/reference/resource/query" },
             { text: "Actions", link: "/reference/resource/actions" },
-            { text: "Positioning & drag-to-reorder", link: "/reference/positioning" },
+            { text: "Positioning & drag-to-reorder", link: "/reference/resource/positioning" },
             { text: "CSV Export", link: "/reference/resource/export" },
           ]
         },
@@ -251,6 +275,15 @@ export default defineConfig(withMermaid({
             { text: "Authorization", link: "/reference/kanban/authorization" },
           ]
         },
+        {
+          text: "Dashboard",
+          collapsed: false,
+          items: [
+            { text: "Overview", link: "/reference/dashboard/" },
+            { text: "DSL", link: "/reference/dashboard/dsl" },
+            { text: "Registration", link: "/reference/dashboard/registration" },
+          ]
+        },
         {
           text: "Testing",
           collapsed: false,

data/docs/.vitepress/theme/components/HomeHero.vue

@@ -11,7 +11,7 @@
         </p>
         <p class="home-hero-pillars">
           <!-- keep the bolds on one source line: Vue drops whitespace-only nodes containing newlines -->
-          <b>CRUD.</b> <b>Auth.</b> <b>Authorization.</b> <b>Multi-tenancy.</b> <b>Wizards.</b> <b>Kanban.</b> <b>Admin portals.</b> <b>Search, filters, bulk actions.</b>
+          <b>CRUD.</b> <b>Auth.</b> <b>Authorization.</b> <b>Multi-tenancy.</b> <b>Wizards.</b> <b>Kanban.</b> <b>Dashboards.</b> <b>Admin portals.</b> <b>Search, filters, bulk actions.</b>
           All generated. All customizable. All Rails.
         </p>
         <div class="home-hero-ctas">

data/docs/.vitepress/theme/components/HomeInTheBox.vue

@@ -38,6 +38,12 @@ const cats = [
     { name: "Interactions", desc: "Business logic with auto-generated UI",
       link: "/plutonium-core/guides/custom-actions" },
   ]},
+  { name: "Operations", items: [
+    { name: "Dashboards", desc: "Metric, chart and custom cards, each lazy-loaded",
+      link: "/plutonium-core/guides/dashboards" },
+    { name: "Async runs", desc: "Bulk work with a live progress page",
+      link: "/plutonium-core/reference/behavior/async-interactions" },
+  ]},
   { name: "App structure", items: [
     { name: "Portals", desc: "Themed, mountable engines",
       link: "/plutonium-core/reference/app/portals" },
@@ -54,6 +60,14 @@ const cats = [
     { name: "Invites & memberships", desc: "Token lifecycle, mailers, onboarding",
       link: "/plutonium-core/guides/user-invites" },
   ]},
+  { name: "Localization", items: [
+    { name: "Internationalization", desc: "Every UI string from a locale file",
+      link: "/plutonium-core/reference/i18n" },
+    { name: "Locale switching", desc: "Per-portal, the standard Rails way",
+      link: "/plutonium-core/reference/i18n#switching-locale" },
+    { name: "Translated pagination", desc: "Pagy locales, ~35 languages",
+      link: "/plutonium-core/reference/i18n#where-the-strings-live" },
+  ]},
 ]
 </script>
 

data/docs/.vitepress/theme/custom.css

@@ -36,383 +36,6 @@ Brand Colors:
   --vp-c-accent-soft: rgba(64, 224, 227, 0.16);
 }
 
-/* ============================================
-   Landing Page Styles
-   ============================================ */
-
-.landing-content {
-  max-width: 1152px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-.landing-content section {
-  padding: 80px 0;
-}
-
-.landing-content h2 {
-  font-size: 2.25rem;
-  font-weight: 700;
-  text-align: center;
-  margin-bottom: 48px;
-  background: linear-gradient(120deg, var(--vp-c-brand-1), var(--vp-c-accent-1));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Before/After Comparison */
-.before-after {
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.comparison {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 32px;
-  flex-wrap: wrap;
-}
-
-.before, .after {
-  flex: 1;
-  min-width: 300px;
-  max-width: 450px;
-  padding: 24px;
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-}
-
-.before h3, .after h3 {
-  font-size: 1.1rem;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: var(--vp-c-text-1);
-}
-
-.file-tree {
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.85rem;
-  line-height: 1.8;
-}
-
-.file {
-  color: var(--vp-c-text-2);
-  padding: 2px 0;
-}
-
-.file.dim {
-  color: var(--vp-c-text-3);
-  font-style: italic;
-}
-
-.stats {
-  display: flex;
-  gap: 16px;
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px solid var(--vp-c-divider);
-}
-
-.stats span {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-3);
-  padding: 4px 12px;
-  background: var(--vp-c-bg-mute);
-  border-radius: 20px;
-}
-
-.stats.success span {
-  color: var(--vp-c-brand-1);
-  background: var(--vp-c-brand-soft);
-  font-weight: 500;
-}
-
-.arrow {
-  font-size: 2rem;
-  color: var(--vp-c-brand-1);
-  font-weight: bold;
-}
-
-@media (max-width: 768px) {
-  .arrow {
-    transform: rotate(90deg);
-  }
-}
-
-/* Feature Rows */
-.features-detailed {
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.feature-row {
-  display: flex;
-  align-items: center;
-  gap: 48px;
-  margin-bottom: 64px;
-}
-
-.feature-row:last-child {
-  margin-bottom: 0;
-}
-
-.feature-row.reverse {
-  flex-direction: row-reverse;
-}
-
-.feature-text {
-  flex: 1;
-  min-width: 280px;
-}
-
-.feature-text h3 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 12px;
-  color: var(--vp-c-text-1);
-}
-
-.feature-text p {
-  font-size: 1.05rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.7;
-}
-
-.feature-text code {
-  font-size: 0.9rem;
-  padding: 2px 6px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 4px;
-}
-
-.feature-code {
-  flex: 1;
-  min-width: 320px;
-}
-
-.feature-code div[class*="language-"] {
-  margin: 0 !important;
-  border-radius: 12px;
-}
-
-@media (max-width: 900px) {
-  .feature-row,
-  .feature-row.reverse {
-    flex-direction: column;
-  }
-
-  .feature-text {
-    text-align: center;
-  }
-
-  .feature-code {
-    width: 100%;
-  }
-}
-
-/* Feature Grid */
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 24px;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.grid-item {
-  padding: 32px 24px;
-  background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  text-align: center;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.grid-item:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
-}
-
-.grid-item .icon {
-  font-size: 2.5rem;
-  margin-bottom: 16px;
-}
-
-.grid-item h3 {
-  font-size: 1.15rem;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: var(--vp-c-text-1);
-}
-
-.grid-item p {
-  font-size: 0.95rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-/* CTA Section */
-.cta-section {
-  text-align: center;
-  padding-top: 80px !important;
-  padding-bottom: 120px !important;
-}
-
-.cta-section h2 {
-  margin-bottom: 16px;
-}
-
-.cta-section > p {
-  font-size: 1.15rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 32px;
-}
-
-.cta-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.cta-primary,
-.cta-secondary {
-  display: inline-block;
-  padding: 14px 32px;
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: 8px;
-  text-decoration: none;
-  transition: all 0.2s;
-}
-
-.cta-primary {
-  background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
-  color: #ffffff !important;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.cta-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(255, 77, 77, 0.3);
-}
-
-.cta-secondary {
-  background: var(--vp-c-bg-soft);
-  color: var(--vp-c-text-1);
-  border: 1px solid var(--vp-c-divider);
-}
-
-.cta-secondary:hover {
-  background: var(--vp-c-bg-mute);
-  border-color: var(--vp-c-brand-1);
-}
-
-/* After section - code block styling */
-.after div[class*="language-"] {
-  margin: 0 0 16px 0 !important;
-  border-radius: 8px;
-}
-
-/* AI Section */
-.ai-section {
-  border-bottom: 1px solid var(--vp-c-divider);
-  background: linear-gradient(180deg, var(--vp-c-bg) 0%, var(--vp-c-bg-soft) 100%);
-  margin: 0 -24px;
-  padding-left: 24px;
-  padding-right: 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.ai-intro {
-  text-align: center;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-2);
-  max-width: 700px;
-  margin: -24px auto 48px;
-  line-height: 1.7;
-}
-
-.ai-features {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 32px;
-  margin-bottom: 48px;
-  width: 100%;
-  max-width: 1100px;
-}
-
-.ai-feature {
-  text-align: center;
-  padding: 24px;
-}
-
-.ai-icon {
-  font-size: 3rem;
-  margin-bottom: 16px;
-}
-
-.ai-feature h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: 12px;
-  color: var(--vp-c-text-1);
-}
-
-.ai-feature p {
-  font-size: 1rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.ai-example {
-  max-width: 700px;
-  margin: 0 auto;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.ai-prompt,
-.ai-result {
-  padding: 24px;
-}
-
-.ai-prompt {
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.prompt-label,
-.result-label {
-  display: block;
-  font-size: 0.8rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 8px;
-}
-
-.prompt-label {
-  color: var(--vp-c-brand-1);
-}
-
-.result-label {
-  color: var(--vp-c-accent-1);
-}
-
-.ai-prompt p,
-.ai-result p {
-  font-size: 1.05rem;
-  color: var(--vp-c-text-1);
-  margin: 0;
-  line-height: 1.6;
-}
-
-.ai-prompt p {
-  font-style: italic;
-}
-
 /* Fix VitePress doc h2 text cutoff at bottom */
 .vp-doc h2 {
   line-height: 1.5;
@@ -562,3 +185,37 @@ img.pu-zoomable { cursor: zoom-in; }
 }
 .pu-zoom-close:hover { background: var(--vp-c-bg-mute); transform: scale(1.05); }
 .pu-zoom-close:focus-visible { outline: 2px solid var(--vp-c-brand-1); outline-offset: 2px; }
+
+/* ===== Nav bar fits before it unfolds ===== */
+
+/* VitePress swaps the hamburger for the full nav menu at exactly 768px. This
+   site's nav is seven items wide (~673px), which together with the logo, search
+   and appearance toggle needs about 1000px — so from 768 to 999 the bar did not
+   fit and the PAGE scrolled horizontally, squeezing the content column and
+   everything in it. Keep the hamburger until the menu actually fits.
+
+   These declarations reproduce the state VitePress itself renders below 768px,
+   so the hamburger opens the same nav screen it always did.
+
+   `!important` is load-bearing: the theme's own rule is `.VPNavBarMenu[data-v-…]`,
+   a scoped selector that outranks a plain class whatever the source order. The
+   `data-v` hash is regenerated per VitePress build, so matching its specificity
+   by copying it would break on the next upgrade. */
+@media (min-width: 768px) and (max-width: 999px) {
+  .VPNavBarMenu { display: none !important; }
+  .VPNavBarHamburger { display: flex !important; }
+  .VPNavBarExtra { display: none !important; }
+  .VPNavScreen { display: block !important; }
+}
+
+/* ===== Tables scroll instead of crushing ===== */
+
+/* `.vp-doc table` is `display: block; overflow-x: auto`, so a table CAN scroll —
+   but only once its content is wider than the container. A table whose cells are
+   all prose has no unbreakable token to force that, so instead of scrolling it
+   wraps down to whatever it is given: on a phone that meant columns of 59-89px,
+   a few characters per line. Giving each cell a floor makes the table exceed the
+   container, which is what turns the existing overflow-x into an actual scroll. */
+@media (max-width: 640px) {
+  .vp-doc :is(th, td) { min-width: 7rem; }
+}