@plutocms/pluto 0.13.0 → 0.14.1

package/.prettierignore

@@ -0,0 +1,2 @@
+# Agent skill files keep their own formatting. Prettier must not rewrite them.
+.agents/**/*.md

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # Changelog
 
 
+## [0.14.1](https://github.com/plutocms/pluto/compare/v0.14.0...v0.14.1) (2026-10-18)
+
+
+### Bug Fixes
+
+* **i18n:** prefer the response body message in usePlutoErrorText ([#165](https://github.com/plutocms/pluto/issues/165)) ([0c5d183](https://github.com/plutocms/pluto/commit/0c5d183f66fa328e0e18b1a27ced77f7d0fded89))
+
+## [0.14.0](https://github.com/plutocms/pluto/compare/v0.13.0...v0.14.0) (2026-10-18)
+
+
+### Features
+
+* **i18n:** add the admin and site translation system ([#161](https://github.com/plutocms/pluto/issues/161)) ([c8d91fb](https://github.com/plutocms/pluto/commit/c8d91fbc1ad34fb14da36328de41b7e449eb5991))
+* **i18n:** translate the core admin UI ([#163](https://github.com/plutocms/pluto/issues/163)) ([d40750d](https://github.com/plutocms/pluto/commit/d40750d80365041d6b17c9e4e8aa0a4a298653aa))
+
 ## [0.13.0](https://github.com/plutocms/pluto/compare/v0.12.0...v0.13.0) (2026-10-18)
 
 

package/FEATURES.md

@@ -33,6 +33,13 @@ policies shared by every project here.
 - Admin theme: the admin keeps its own palette, chart colors, surfaces, and font under
   `data-pluto-admin`, so the consumer app's site theme does not reach it.
   @.claude/skills/admin-theme/SKILL.md
+- Internationalization (i18n): a custom engine for the admin and the public site. The pluto-i18n
+  module merges each layer's `i18n/locales/<code>.json`, `usePlutoI18n()` and
+  `usePlutoSiteI18n()` translate and format, a per-user admin language is chosen on the Settings
+  page and stored through a registered locale driver. The core admin UI, the registry entries, the
+  content-type convention keys (`usePlutoContentText`), the validation codes, and the server errors
+  (`createPlutoError`, `usePlutoErrorText`) are translated, in English and Brazilian Portuguese.
+  @.claude/skills/i18n/SKILL.md
 - Single Tailwind build: the app owns the only Tailwind build. The pluto-css module generates
   `#build/pluto.css` from each layer's `pluto-layer.css`, adds a fallback entry, and warns
   about a wrong CSS setup. @.claude/skills/single-tailwind-build/SKILL.md

package/app/app.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-const websiteName = 'Pluto Admin'
+const { t } = usePlutoI18n()
 
 useHead({
-  titleTemplate: (title) => (title ? `${title} - ${websiteName}` : websiteName),
+  titleTemplate: (title) => {
+    const websiteName = t('pluto.app.name')
+    return title ? `${title} - ${websiteName}` : websiteName
+  },
 })
 </script>
 

package/app/components/ColorModeButton.vue

@@ -1,5 +1,6 @@
 <script setup>
 const colorMode = useColorMode()
+const { t } = usePlutoI18n()
 
 const isDark = computed({
   get() {
@@ -15,7 +16,7 @@ const isDark = computed({
   <ClientOnly v-if="!colorMode?.forced">
     <UButton
       :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
-      :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+      :aria-label="isDark ? t('pluto.common.switchToLightMode') : t('pluto.common.switchToDarkMode')"
       color="neutral"
       variant="ghost"
       size="md"

package/app/components/Pluto/Content/PlutoContentField.vue

@@ -7,6 +7,12 @@ const props = defineProps<{
   field: PlutoField
   modelValue: unknown
   disabled?: boolean
+  /**
+   * A content type's `name`. Set it so the field text uses the
+   * `content.<name>.fields.*` translation keys. Without it, the field keeps
+   * its own English text.
+   */
+  type?: string
 }>()
 
 const emit = defineEmits<{
@@ -14,21 +20,29 @@ const emit = defineEmits<{
 }>()
 
 const widget = usePlutoContentFieldWidget(props.field)
+
+const { t } = usePlutoI18n()
+const { byName } = usePlutoContentTypes()
+const text = usePlutoContentText(() => (props.type ? byName(props.type) : undefined))
+
+// The widget gets a translated copy, so a widget from any layer shows the
+// translated text with no change. Without a type, the copy keeps the original.
+const translated = computed(() => (props.type ? text.field(props.field) : props.field))
 </script>
 
 <template>
   <component
     :is="widget"
     v-if="widget"
-    :field="field"
+    :field="translated"
     :model-value="modelValue"
     :disabled="disabled"
     @update:model-value="emit('update:modelValue', $event)"
   />
 
-  <UFormField v-else :label="field.label">
+  <UFormField v-else :label="translated.label">
     <p class="text-muted text-sm">
-      No widget registered for field type "{{ field.type }}".
+      {{ t('pluto.fields.noWidget', { type: field.type }) }}
     </p>
   </UFormField>
 </template>

package/app/components/Pluto/Content/PlutoContentForm.vue

@@ -10,6 +10,9 @@ const props = defineProps<{
 
 const { byName } = usePlutoContentTypes()
 const contentType = computed(() => byName(props.type))
+const { t } = usePlutoI18n()
+const text = usePlutoContentText(contentType)
+const errorText = usePlutoErrorText()
 
 if (!contentType.value) {
   // The generated page (`app/pages/admin/content/[type]/{new,[id]}.vue`)
@@ -139,12 +142,16 @@ const isPublished = computed(
   () =>
     statusConfig.value !== null && currentStatus.value === publishedValue.value
 )
-const statusLabel = computed(
-  () =>
-    statusConfig.value?.values.find(
-      (value) => value.value === currentStatus.value
-    )?.label ?? currentStatus.value
-)
+const statusLabel = computed(() => {
+  const value = currentStatus.value
+  if (value === undefined) {
+    return undefined
+  }
+  const literal = statusConfig.value?.values.find(
+    (entry) => entry.value === value
+  )?.label
+  return text.statusLabel(value, literal)
+})
 
 // --- Save -------------------------------------------------------------------
 
@@ -152,6 +159,19 @@ const toast = useToast()
 const saving = ref(false)
 const validationErrors = ref<ContentValidationError[]>([])
 
+// A validation error with a `code` shows the translated message. The
+// `message` of the error stays English, and shows when there is no code.
+function validationText(error: ContentValidationError): string {
+  if (!error.code) {
+    return error.message
+  }
+  const field = contentType.value?.fields.find((entry) => entry.name === error.field)
+  return t(`pluto.validation.${error.code}`, {
+    ...error.params,
+    label: field ? text.fieldLabel(field) : error.field,
+  })
+}
+
 function buildPayload(statusOverride?: string): Record<string, unknown> {
   const type = contentType.value
   if (!type) {
@@ -201,23 +221,23 @@ async function onSave(statusOverride?: string) {
 
     const title =
       statusOverride === publishedValue.value
-        ? 'Published'
+        ? t('pluto.form.published')
         : statusOverride === draftValue.value
-          ? 'Unpublished'
-          : 'Saved'
+          ? t('pluto.form.unpublished')
+          : t('pluto.form.saved')
 
     toast.add({
       title,
-      description: `${type.label} updated successfully.`,
+      description: t('pluto.form.updated', { label: text.label }),
       color: 'success',
     })
-  } catch {
+  } catch (error) {
     // A raced permissions check, or any other server-side rejection
     // (a 403 included), surfaces here rather than as an unhandled
     // rejection.
     toast.add({
-      title: 'Error',
-      description: 'An error occurred while saving.',
+      title: t('pluto.common.error'),
+      description: errorText(error, 'pluto.form.saveError'),
       color: 'error',
     })
   } finally {
@@ -245,10 +265,10 @@ async function confirmDelete() {
     await remove()
     closeDeleteModal()
     await navigateTo(basePath.value)
-  } catch {
+  } catch (error) {
     toast.add({
-      title: 'Error',
-      description: 'An error occurred while removing.',
+      title: t('pluto.common.error'),
+      description: errorText(error, 'pluto.form.removeError'),
       color: 'error',
     })
   } finally {
@@ -258,6 +278,12 @@ async function confirmDelete() {
 
 // --- Layout / aside -----------------------------------------------------------
 
+const heading = computed(() =>
+  editing.value
+    ? t('pluto.content.edit', { label: text.label })
+    : text.newLabel
+)
+
 const layout = computed(() => contentType.value?.form?.layout ?? 'default')
 const showAside = computed(() => {
   const configured = contentType.value?.form?.aside
@@ -304,7 +330,7 @@ const unpublishDeleteItems = computed(() => [
     ...(statusConfig.value && isPublished.value && canPublish.value
       ? [
           {
-            label: 'Unpublish',
+            label: t('pluto.form.unpublish'),
             icon: 'lucide:eye-off',
             onSelect: () => onSave(draftValue.value),
           },
@@ -313,7 +339,7 @@ const unpublishDeleteItems = computed(() => [
     ...(editing.value && canDelete.value
       ? [
           {
-            label: 'Delete',
+            label: t('pluto.common.delete'),
             icon: 'lucide:trash',
             color: 'error' as const,
             onSelect: () => openDeleteModal(),
@@ -333,13 +359,7 @@ const unpublishDeleteItems = computed(() => [
     <template #toolbar>
       <PlutoViewToolbar
         :back-to="basePath"
-        :title="
-          layout === 'focus'
-            ? editing
-              ? `Edit ${contentType.label}`
-              : `New ${contentType.label}`
-            : undefined
-        "
+        :title="layout === 'focus' ? heading : undefined"
       >
         <template #right>
           <UBadge
@@ -370,7 +390,7 @@ const unpublishDeleteItems = computed(() => [
             variant="subtle"
             @click="onSave()"
           >
-            Save{{ statusConfig ? ' draft' : '' }}
+            {{ statusConfig ? t('pluto.form.saveDraft') : t('pluto.common.save') }}
           </UButton>
 
           <UButton
@@ -379,7 +399,7 @@ const unpublishDeleteItems = computed(() => [
             icon="lucide:save"
             @click="onSave()"
           >
-            Update
+            {{ t('pluto.form.update') }}
           </UButton>
 
           <UButton
@@ -388,7 +408,7 @@ const unpublishDeleteItems = computed(() => [
             icon="lucide:upload"
             @click="onSave(publishedValue)"
           >
-            Publish
+            {{ t('pluto.form.publish') }}
           </UButton>
 
           <UDropdownMenu
@@ -422,25 +442,26 @@ const unpublishDeleteItems = computed(() => [
 
     <UAlert
       v-if="validationErrors.length > 0"
+      :title="t('pluto.form.fixErrors')"
       color="error"
-      title="Please fix the following before saving"
     >
       <template #description>
         <ul class="list-disc pl-4">
           <li v-for="fieldError in validationErrors" :key="fieldError.field">
-            {{ fieldError.message }}
+            {{ validationText(fieldError) }}
           </li>
         </ul>
       </template>
     </UAlert>
 
     <h1 v-if="layout !== 'focus'" class="text-3xl font-bold lg:text-4xl">
-      {{ editing ? `Edit ${contentType.label}` : `New ${contentType.label}` }}
+      {{ heading }}
     </h1>
 
     <PlutoContentField
       v-for="field in mainFields"
       :key="field.name"
+      :type="type"
       :field="field"
       :model-value="item[field.name]"
       :disabled="!canWrite || saving"
@@ -448,11 +469,12 @@ const unpublishDeleteItems = computed(() => [
     />
 
     <template v-if="showAside" #aside>
-      <PlutoViewAside v-model:open="asideOpen" title="Settings">
+      <PlutoViewAside v-model:open="asideOpen" :title="t('pluto.common.settings')">
         <div class="flex flex-col gap-6">
           <PlutoContentField
             v-for="field in sideFields"
             :key="field.name"
+            :type="type"
             :field="field"
             :model-value="item[field.name]"
             :disabled="!canWrite || saving"
@@ -465,19 +487,19 @@ const unpublishDeleteItems = computed(() => [
 
   <PlutoViewAdminPanel v-else>
     <UAlert
-      :description="`No content type named &quot;${type}&quot; is registered.`"
+      :description="t('pluto.content.typeNotFoundDescription', { type })"
+      :title="t('pluto.content.typeNotFound')"
       color="error"
-      title="Content type not found"
     />
   </PlutoViewAdminPanel>
 
   <Modal v-model="isDeleteModalOpen" :custom-size="480">
     <ModalHeader @close="closeDeleteModal">
-      Remove {{ contentType?.label }}
+      {{ t('pluto.form.removeTitle', { label: text.label }) }}
     </ModalHeader>
 
     <ModalContent>
-      <p>Do you really want to remove this item?</p>
+      <p>{{ t('pluto.content.removeConfirm') }}</p>
     </ModalContent>
 
     <ModalFooter>
@@ -488,7 +510,7 @@ const unpublishDeleteItems = computed(() => [
           color="neutral"
           @click="closeDeleteModal"
         >
-          Cancel
+          {{ t('pluto.common.cancel') }}
         </UButton>
 
         <UButton
@@ -497,7 +519,7 @@ const unpublishDeleteItems = computed(() => [
           color="error"
           @click="confirmDelete"
         >
-          Remove
+          {{ t('pluto.common.remove') }}
         </UButton>
       </div>
     </ModalFooter>

package/app/components/Pluto/Content/PlutoContentList.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
 
 const { byName } = usePlutoContentTypes()
 const contentType = computed(() => byName(props.type))
+const { t, n } = usePlutoI18n()
+const text = usePlutoContentText(contentType)
 
 if (!contentType.value) {
   // The generated page (`app/pages/admin/content/[type]/index.vue`) already
@@ -72,8 +74,6 @@ const canLoadMore = () => hasMore.value && !error.value
 useInfiniteScroll(() => tableRef.value?.$el, loadMoreSafely, { distance: 240, canLoadMore })
 useInfiniteScroll(mobileListRef, loadMoreSafely, { distance: 240, canLoadMore })
 
-const number = new Intl.NumberFormat()
-
 // What to show while the list has no rows. With rows, the list shows
 // them, and a failed refresh shows an alert above them instead.
 const emptyState = computed<'loading' | 'error' | 'empty' | null>(() => {
@@ -98,10 +98,10 @@ const emptyActions = computed<ButtonProps[]>(() => {
     return []
   }
   if (emptyState.value === 'error') {
-    return [{ label: 'Try again', icon: 'lucide:refresh-ccw', color: 'neutral', variant: 'outline', onClick: retry }]
+    return [{ label: t('pluto.common.tryAgain'), icon: 'lucide:refresh-ccw', color: 'neutral', variant: 'outline', onClick: retry }]
   }
   return canWrite.value
-    ? [{ label: `New ${type.label}`, icon: 'lucide:plus', onClick: () => navigateTo(newPath.value) }]
+    ? [{ label: text.newLabel, icon: 'lucide:plus', onClick: () => navigateTo(newPath.value) }]
     : []
 })
 
@@ -114,7 +114,7 @@ const listFields = computed(() =>
 const columns = computed<TableColumn<PlutoContentItem>[]>(() => [
   ...listFields.value.map((field) => ({
     accessorKey: field.name,
-    header: field.label,
+    header: text.fieldLabel(field),
   })),
   { id: 'actions', header: '' },
 ])
@@ -140,18 +140,27 @@ async function confirmDelete() {
   await remove(pendingDeleteId.value)
   closeDeleteModal()
 }
+
+// The footer line: "Showing 5 of 20 posts", plus "Loading more…" while a
+// page loads. The phrase has the plural label as a parameter, so a language
+// can put it anywhere.
+const footer = computed(() => {
+  const params = { loaded: n(items.value.length), total: total.value === undefined ? '' : n(total.value), labelPlural: text.labelPluralLower }
+  const summary = t(total.value === undefined ? 'pluto.list.showing' : 'pluto.list.showingOf', params)
+  return loadingMore.value ? `${summary} · ${t('pluto.list.loadingMore')}` : summary
+})
 </script>
 
 <template>
   <PlutoViewAdminPanel v-if="contentType" fill>
     <template #toolbar>
-      <PlutoViewToolbar :title="contentType.labelPlural">
+      <PlutoViewToolbar :title="text.labelPlural">
         <template #trailing>
           <UButton
             :loading="pending"
+            :title="t('pluto.common.refresh')"
             icon="lucide:refresh-ccw"
             variant="ghost"
-            title="Refresh"
             square
             @click="retry"
           />
@@ -159,7 +168,7 @@ async function confirmDelete() {
 
         <template v-if="canWrite" #right>
           <UButton :to="newPath" icon="lucide:plus" as="NuxtLink">
-            New {{ contentType.label }}
+            {{ text.newLabel }}
           </UButton>
         </template>
       </PlutoViewToolbar>
@@ -167,24 +176,24 @@ async function confirmDelete() {
 
     <UEmpty
       v-if="emptyState === 'loading'"
-      :title="`Loading ${contentType.labelPlural.toLowerCase()}…`"
+      :title="t('pluto.list.loading', { labelPlural: text.labelPluralLower })"
       variant="naked"
       loading
     />
 
     <UEmpty
       v-else-if="emptyState === 'error'"
-      :title="`Could not load ${contentType.labelPlural.toLowerCase()}`"
+      :title="t('pluto.list.loadFailed', { labelPlural: text.labelPluralLower })"
       :actions="emptyActions"
-      description="Check your connection and try again."
+      :description="t('pluto.list.loadFailedHint')"
       icon="lucide:circle-alert"
       variant="naked"
     />
 
     <UEmpty
       v-else-if="emptyState === 'empty'"
-      :title="`No ${contentType.labelPlural.toLowerCase()} yet`"
-      :description="canWrite ? `Create the first ${contentType.label.toLowerCase()} to see it here.` : 'There is nothing here yet.'"
+      :title="t('pluto.list.empty', { labelPlural: text.labelPluralLower })"
+      :description="canWrite ? t('pluto.list.emptyCanWrite', { label: text.labelLower }) : t('pluto.list.emptyReadOnly')"
       :icon="contentType.icon ?? 'lucide:inbox'"
       :actions="emptyActions"
       variant="naked"
@@ -192,9 +201,9 @@ async function confirmDelete() {
 
     <UAlert
       v-if="!emptyState && error"
-      :actions="[{ label: 'Try again', color: 'error', variant: 'outline', onClick: retry }]"
-      :title="`Could not refresh ${contentType.labelPlural.toLowerCase()}`"
-      description="The list below may be out of date."
+      :actions="[{ label: t('pluto.common.tryAgain'), color: 'error', variant: 'outline', onClick: retry }]"
+      :title="t('pluto.list.refreshFailed', { labelPlural: text.labelPluralLower })"
+      :description="t('pluto.list.refreshFailedHint')"
       color="error"
       variant="subtle"
       icon="lucide:circle-alert"
@@ -218,7 +227,7 @@ async function confirmDelete() {
 
           <dl class="grid grid-cols-2 gap-3 text-sm">
             <div v-for="field in listFields" :key="field.name">
-              <dt class="text-muted">{{ field.label }}</dt>
+              <dt class="text-muted">{{ text.fieldLabel(field) }}</dt>
               <dd class="font-medium">{{ item[field.name] }}</dd>
             </div>
           </dl>
@@ -232,7 +241,7 @@ async function confirmDelete() {
               variant="soft"
               class="flex-1 justify-center"
             >
-              Edit
+              {{ t('pluto.common.edit') }}
             </UButton>
 
             <UButton
@@ -243,7 +252,7 @@ async function confirmDelete() {
               class="flex-1 justify-center"
               @click="openDeleteModal(item.id)"
             >
-              Remove
+              {{ t('pluto.common.remove') }}
             </UButton>
           </div>
         </div>
@@ -256,8 +265,8 @@ async function confirmDelete() {
       :data="items"
       :columns="columns"
       :loading="pending || loadingMore"
+      :empty="t('pluto.list.emptyTable')"
       class="ring-default hidden min-h-0 flex-1 rounded-lg ring lg:block"
-      empty="No items yet."
       sticky
       virtualize
     >
@@ -268,7 +277,7 @@ async function confirmDelete() {
                 :to="editPath(row.original.id)"
                 class="text-info px-0 py-0.5 hover:underline"
               >
-                Edit
+                {{ t('pluto.common.edit') }}
               </NuxtLink>
 
               <button
@@ -277,33 +286,30 @@ async function confirmDelete() {
                 class="text-error cursor-pointer px-0 py-0.5 hover:underline"
                 @click="openDeleteModal(row.original.id)"
               >
-                Remove
+                {{ t('pluto.common.remove') }}
               </button>
             </div>
       </template>
     </UTable>
 
     <p v-if="!emptyState" class="text-muted shrink-0 text-xs tabular-nums" aria-live="polite">
-      Showing {{ number.format(items.length) }}
-      <template v-if="total !== undefined">of {{ number.format(total) }}</template>
-      {{ contentType.labelPlural.toLowerCase() }}
-      <template v-if="loadingMore">· Loading more…</template>
+      {{ footer }}
     </p>
   </PlutoViewAdminPanel>
 
   <PlutoViewAdminPanel v-else>
     <UAlert
-      :description="`No content type named &quot;${type}&quot; is registered.`"
+      :description="t('pluto.content.typeNotFoundDescription', { type })"
+      :title="t('pluto.content.typeNotFound')"
       color="error"
-      title="Content type not found"
     />
   </PlutoViewAdminPanel>
 
   <Modal v-model="isDeleteModalOpen" :custom-size="480">
-    <ModalHeader @close="closeDeleteModal">Remove item</ModalHeader>
+    <ModalHeader @close="closeDeleteModal">{{ t('pluto.list.removeTitle') }}</ModalHeader>
 
     <ModalContent>
-      <p>Do you really want to remove this item?</p>
+      <p>{{ t('pluto.content.removeConfirm') }}</p>
     </ModalContent>
 
     <ModalFooter>
@@ -314,11 +320,11 @@ async function confirmDelete() {
           color="neutral"
           @click="closeDeleteModal"
         >
-          Cancel
+          {{ t('pluto.common.cancel') }}
         </UButton>
 
         <UButton icon="lucide:trash" color="error" @click="confirmDelete">
-          Remove
+          {{ t('pluto.common.remove') }}
         </UButton>
       </div>
     </ModalFooter>

package/app/components/Pluto/Content/fields/PlutoFieldReference.vue

@@ -48,6 +48,7 @@ async function loadOptions() {
 
 onMounted(loadOptions)
 
+const { t } = usePlutoI18n()
 const hasOptionsSource = computed(() => Boolean(props.field.optionsUrl))
 const value = computed(() => props.modelValue as string | number | undefined)
 </script>
@@ -69,9 +70,9 @@ const value = computed(() => props.modelValue as string | number | undefined)
     <UInputMenu
       v-else
       :items="[]"
+      :placeholder="t('pluto.fields.noOptionsSource')"
       value-key="value"
       label-key="label"
-      placeholder="No options source configured for this reference field."
       class="w-full"
       disabled
     />