@plutocms/pluto 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,6 +1,30 @@
 # Changelog
 
 
+## [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)
+
+
+### Features
+
+* **admin:** mount the aside once and keep it mounted on mobile ([#158](https://github.com/plutocms/pluto/issues/158)) ([dcca464](https://github.com/plutocms/pluto/commit/dcca464ead4ec5f46b2c26c0eea0f94260553ac9))
+* **content:** page and virtualize long content lists ([#154](https://github.com/plutocms/pluto/issues/154)) ([b8d35b0](https://github.com/plutocms/pluto/commit/b8d35b05230169713a3e7cacbdfd95f52c72936a))
+
+
+### Bug Fixes
+
+* **admin:** darken the navbar and sidebar in dark mode ([#159](https://github.com/plutocms/pluto/issues/159)) ([011fd2f](https://github.com/plutocms/pluto/commit/011fd2f616daf961486e99f69a0e8f0f0db5e51f))
+* **admin:** make the navbar near black in light mode too ([#160](https://github.com/plutocms/pluto/issues/160)) ([f39656a](https://github.com/plutocms/pluto/commit/f39656a5b52081c05e8128b4d0828970b96a14e5))
+* **admin:** use a dim dark gray instead of pitch black in dark mode ([#156](https://github.com/plutocms/pluto/issues/156)) ([500c900](https://github.com/plutocms/pluto/commit/500c900783980d760d6fade406dfc15334a61a4e))
+* **admin:** use the theme text color in the modal ([#157](https://github.com/plutocms/pluto/issues/157)) ([e73c613](https://github.com/plutocms/pluto/commit/e73c613eead017fabbae66ef6f6a7624ec5a5a04))
+
 ## [0.12.0](https://github.com/plutocms/pluto/compare/v0.11.0...v0.12.0) (2026-10-17)
 
 

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/assets/css/admin-theme.css

@@ -9,6 +9,10 @@
  * - `[data-pluto-admin-scope]`: for admin chrome that also shows on the
  *   public site, such as the admin navbar for a logged-in admin.
  *
+ * `[data-pluto-admin-dark]` takes the dark tokens in both color modes. The
+ * admin navbar is near black in light mode too, so its text and buttons need
+ * the dark values.
+ *
  * Every value is a literal. The consumer app styles its public site through
  * its own app.config colors and @theme. Both reach the admin unless the admin
  * pins its own values: app.config colors set Nuxt UI's --ui-color-* scales on
@@ -149,17 +153,18 @@
   --ui-chart-5: oklch(58.8% 0.158 241.966); /* sky-600 */
   --ui-chart-6: oklch(53.2% 0.157 131.589); /* lime-700 */
 
-  /* Surfaces */
+  /* Surfaces. The navbar is near black in both modes. */
   --pluto-admin-canvas: #fff;
   --pluto-admin-sidebar: oklch(98.5% 0 none);
-  --pluto-admin-navbar: #fff;
+  --pluto-admin-navbar: oklch(14.1% 0.005 285.823);
 
   --ui-radius: 0.375rem;
   --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
 }
 
 :root[data-pluto-admin].dark,
-.dark [data-pluto-admin-scope] {
+.dark [data-pluto-admin-scope],
+[data-pluto-admin-dark] {
   --ui-primary: var(--ui-color-primary-400);
   --ui-secondary: var(--ui-color-secondary-400);
   --ui-success: var(--ui-color-success-400);
@@ -173,7 +178,7 @@
   --ui-text: var(--ui-color-neutral-200);
   --ui-text-highlighted: #fff;
   --ui-text-inverted: var(--ui-color-neutral-900);
-  --ui-bg: var(--ui-color-neutral-900);
+  --ui-bg: oklch(24% 0.006 286);
   --ui-bg-muted: var(--ui-color-neutral-800);
   --ui-bg-elevated: var(--ui-color-neutral-800);
   --ui-bg-accented: var(--ui-color-neutral-700);
@@ -190,10 +195,14 @@
   --ui-chart-5: oklch(58.8% 0.158 241.966); /* sky-600 */
   --ui-chart-6: oklch(64.8% 0.2 131.684); /* lime-600 */
 
-  /* Cards (--ui-bg, zinc-900) sit one step above the canvas (zinc-950). */
-  --pluto-admin-canvas: oklch(14.1% 0.005 285.823);
-  --pluto-admin-sidebar: oklch(14.1% 0.005 285.823);
+  /*
+   * Four steps, darkest at the top: a near-black navbar, a darker sidebar,
+   * a dim dark gray canvas (not pitch black), and cards (--ui-bg) one step
+   * above the canvas.
+   */
   --pluto-admin-navbar: oklch(14.1% 0.005 285.823);
+  --pluto-admin-sidebar: oklch(17.5% 0.0055 286);
+  --pluto-admin-canvas: oklch(21% 0.006 285.885);
 }
 
 :root[data-pluto-admin] body {

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>