@plutocms/core 0.40.0 → 0.42.0

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 # Changelog
 
 
+## [0.42.0](https://github.com/plutocms/pluto/compare/v0.41.0...v0.42.0) (2026-10-31)
+
+
+### Features
+
+* @plutocms/docs moves into the monorepo ([f409bdf](https://github.com/plutocms/pluto/commit/f409bdf3f1ded0a1c146e9ad2724ac5222c30c1d))
+* @plutocms/docs moves into the monorepo (packages/layers/docs) ([5117e4e](https://github.com/plutocms/pluto/commit/5117e4e507559bd3b8859401665a176e2749cbc5))
+
+## [0.41.0](https://github.com/plutocms/pluto/compare/v0.40.0...v0.41.0) (2026-10-31)
+
+
+### ⚠ BREAKING CHANGES
+
+* @plutocms/core does not extend @plutocms/utils anymore. Its auto-imports (formatCurrency, slugify, fileNameToKebabCase) are gone from apps that relied on core to bring them. domainFromUrl is now in core.
+
+### Features
+
+* **admin:** section tabs for every menu item with a submenu ([#315](https://github.com/plutocms/pluto/issues/315)) ([98afbe4](https://github.com/plutocms/pluto/commit/98afbe45833caa6f834aa70703611970eadd5ccb))
+* core no longer extends @plutocms/utils (retired); domainFromUrl is in core ([#314](https://github.com/plutocms/pluto/issues/314)) ([5fe3947](https://github.com/plutocms/pluto/commit/5fe394707c009d4686e6e7fe6f72af900dfe4035))
+
 ## [0.40.0](https://github.com/plutocms/pluto/compare/v0.39.2...v0.40.0) (2026-10-31)
 
 

package/app/components/Pluto/Admin/PlutoAdminNavTabs.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// The tabs of the section of the page: the children of the menu item whose
+// submenu holds the page (usePlutoAdminNavTabs). The "new" child of the
+// section is a button at the end of the tabs, not a tab. Nothing shows when the
+// page is in no submenu. `page`: under the title of a page (Settings, Users).
+// `toolbar`: a bar under the toolbar of a list page.
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+withDefaults(
+  defineProps<{
+    variant?: 'page' | 'toolbar'
+  }>(),
+  { variant: 'page' }
+)
+
+const { tabs, action, label } = usePlutoAdminNavTabs()
+
+// The active tab is set by hand (`active`), not by the router: a parent path
+// such as `/admin/settings` must not be active on the pages below it.
+const items = computed<NavigationMenuItem[]>(() =>
+  tabs.value.map((tab) => ({
+    label: tab.label,
+    icon: tab.icon,
+    href: tab.to,
+    active: tab.active,
+    onSelect: () => navigateTo(tab.to),
+  }))
+)
+</script>
+
+<template>
+  <template v-if="items.length > 0">
+    <UDashboardToolbar
+      v-if="variant === 'toolbar'"
+      :ui="{ root: 'border-muted' }"
+    >
+      <UNavigationMenu
+        :items="items"
+        :aria-label="label"
+        orientation="horizontal"
+        variant="link"
+        class="-mx-1 min-w-0 flex-1 overflow-x-auto"
+        highlight
+      />
+      <UButton
+        v-if="action"
+        :to="action.to"
+        :label="action.label"
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        class="shrink-0"
+      />
+    </UDashboardToolbar>
+
+    <div v-else class="border-default -mt-2 flex items-center gap-2 border-b">
+      <UNavigationMenu
+        :items="items"
+        :aria-label="label"
+        orientation="horizontal"
+        variant="link"
+        class="min-w-0 flex-1 overflow-x-auto"
+      />
+      <UButton
+        v-if="action"
+        :to="action.to"
+        :label="action.label"
+        icon="i-lucide-plus"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        class="shrink-0"
+      />
+    </div>
+  </template>
+</template>

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

@@ -266,6 +266,8 @@ const footer = computed(() => {
           </UButton>
         </template>
       </PlutoViewToolbar>
+      <!-- The tabs of the menu item that holds this list (for example Pages). -->
+      <PlutoAdminNavTabs variant="toolbar" />
     </template>
 
     <PlutoSkeletonList

package/app/composables/pluto-admin-nav.ts

@@ -178,6 +178,7 @@ export function usePlutoAdminNav() {
             children: settingsPages.value.map((page) => ({
               label: page.label,
               to: page.to,
+              icon: page.icon,
             })),
           }
         : item
@@ -207,3 +208,96 @@ export function usePlutoAdminNav() {
 
   return { items }
 }
+
+/** One tab of the section of the current page. See usePlutoAdminNavTabs. */
+export interface PlutoAdminNavTab {
+  label: string
+  icon?: string
+  to: string
+  active: boolean
+}
+
+/** The "new" link of a section: a button at the end of its tabs. */
+export interface PlutoAdminNavAction {
+  label: string
+  to: string
+}
+
+// Trailing slashes off, so `/admin/users/` matches `/admin/users`.
+function trimPath(path: string): string {
+  return path.replace(/\/+$/, '') || '/'
+}
+
+/**
+ * The tabs of the section of the current page: the children of the menu item
+ * whose submenu holds the page. Settings, the Users item of a backend layer and
+ * a group of content types (Pages) all get them.
+ *
+ * - A child matches the path exactly, or as a prefix (`/admin/users` matches
+ *   `/admin/users/5`). The longest match wins, so General (`/admin/settings`)
+ *   is not active on `/admin/settings/email`.
+ * - A "new" child (its `to` is the `newTo` of the item, or ends with `/new`)
+ *   is not a tab: it is `action`, a button at the end of the tabs.
+ * - The tabs show only with two or more of them. A section of one list and its
+ *   "new" page (a content type: All posts, New post) shows none: the list page
+ *   has its own New button.
+ *
+ * `label` is the label of the section (for `aria-label`). A page shows the
+ * tabs with `PlutoAdminNavTabs`.
+ */
+export function usePlutoAdminNavTabs() {
+  const { items } = usePlutoAdminNav()
+  const route = useRoute()
+
+  const isNewChild = (item: PlutoNavItem, child: PlutoNavChild): boolean =>
+    (item.newTo !== undefined && trimPath(child.to) === trimPath(item.newTo)) ||
+    trimPath(child.to).endsWith('/new')
+
+  const section = computed(() => {
+    const path = trimPath(route.path)
+    let best: { item: PlutoNavItem; to: string } | undefined
+    for (const item of items.value) {
+      const pages = (item.children ?? []).filter(
+        (child) => !isNewChild(item, child)
+      )
+      if (pages.length < 2) {
+        continue
+      }
+      for (const child of pages) {
+        const to = trimPath(child.to)
+        const matches = path === to || path.startsWith(`${to}/`)
+        if (matches && (!best || to.length > best.to.length)) {
+          best = { item, to }
+        }
+      }
+    }
+    return best
+  })
+
+  const tabs = computed<PlutoAdminNavTab[]>(() => {
+    const current = section.value
+    if (!current) {
+      return []
+    }
+    return (current.item.children ?? [])
+      .filter((child) => !isNewChild(current.item, child))
+      .map((child) => ({
+        label: child.label,
+        icon: child.icon,
+        to: child.to,
+        active: trimPath(child.to) === current.to,
+      }))
+  })
+
+  const action = computed<PlutoAdminNavAction | undefined>(() => {
+    const item = section.value?.item
+    const child = item?.children?.find((entry) => isNewChild(item, entry))
+    return child ? { label: child.label, to: child.to } : undefined
+  })
+
+  return {
+    tabs,
+    action,
+    label: computed(() => section.value?.item.label ?? ''),
+  }
+}

package/app/pages/admin/settings.vue

@@ -1,36 +1,16 @@
 <script setup lang="ts">
 // The parent of every Settings page: the title, the tabs, and the child route.
 // A layer adds a tab with a file at `pages/admin/settings/<x>.vue` and a
-// `settingsPages` entry. See the extension-registry skill.
-import type { NavigationMenuItem } from '@nuxt/ui'
-
+// `settingsPages` entry. The tabs are the children of the Settings item of the
+// menu (PlutoAdminNavTabs), like every item with a submenu. See the
+// extension-registry skill.
 const { t } = usePlutoI18n()
-const route = useRoute()
 
 useHead({
   title: () => t('pluto.pages.settings'),
 })
 
-const { items, current, allowed } = usePlutoSettingsPages()
-
-// Active state by hand: General (`/admin/settings`) matches exactly, so it is
-// not active on the pages below it. Any other tab matches by prefix.
-function isActive(to: string): boolean {
-  const path = route.path.replace(/\/+$/, '') || '/'
-  return to === '/admin/settings'
-    ? path === to
-    : path === to || path.startsWith(`${to}/`)
-}
-
-const tabs = computed<NavigationMenuItem[]>(() =>
-  items.value.map((page) => ({
-    label: page.label,
-    icon: page.icon,
-    href: page.to,
-    active: isActive(page.to),
-    onSelect: () => navigateTo(page.to),
-  }))
-)
+const { current, allowed } = usePlutoSettingsPages()
 </script>
 
 <template>
@@ -40,15 +20,8 @@ const tabs = computed<NavigationMenuItem[]>(() =>
         {{ t('pluto.pages.settings') }}
       </h1>
 
-      <!-- One page (General only) needs no tabs. -->
-      <UNavigationMenu
-        v-if="tabs.length >= 2"
-        :items="tabs"
-        :aria-label="t('pluto.settings.tabs.label')"
-        orientation="horizontal"
-        variant="link"
-        class="border-default -mt-2 overflow-x-auto border-b"
-      />
+      <!-- One page (General only) has no submenu, so no tabs. -->
+      <PlutoAdminNavTabs />
 
       <UAlert
         v-if="!allowed"

package/i18n/locales/en.json

@@ -167,7 +167,6 @@
         "saveFailedDescription": "The language changed on this device only. {reason}"
       },
       "tabs": {
-        "label": "Settings sections",
         "general": "General",
         "email": "Email",
         "github": "GitHub"

package/i18n/locales/pt-BR.json

@@ -167,7 +167,6 @@
         "saveFailedDescription": "O idioma mudou apenas neste dispositivo. {reason}"
       },
       "tabs": {
-        "label": "Seções das configurações",
         "general": "Geral",
         "email": "E-mail",
         "github": "GitHub"

package/layers.ts

@@ -28,12 +28,11 @@ export type PlutoLayerEntry = [source: string, options: PlutoLayerEntryOptions]
  * without the scope. A package of a monorepo is in a folder of its repo.
  */
 export const PLUTO_LAYER_PATHS: Readonly<Record<string, string>> = {
-  utils: 'utils',
   core: 'pluto/packages/core',
   supabase: 'supabase',
   'supabase-shop': 'supabase-shop',
   'supabase-blog': 'supabase-blog',
-  docs: 'docs',
+  docs: 'pluto/packages/layers/docs',
   '3d': 'pluto/packages/layers/addons/3d',
 }
 

package/nuxt.config.ts

@@ -1,13 +1,9 @@
 const websiteName = process.env.WEBSITE_NAME || 'Untitled'
 
-// Point PLUTO_UTILS_PATH at a local checkout (e.g. `../../../utils`) to test
-// unpublished changes; unset, it resolves to the published npm package.
-const utilsLayer = process.env.PLUTO_UTILS_PATH || '@plutocms/utils'
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
+// Core extends no other layer. The helpers of the retired `@plutocms/utils` that
+// core uses are in shared/utils (`domainFromUrl`).
 export default defineNuxtConfig({
-  extends: [utilsLayer],
-
   // No @nuxt/eslint: a module of a layer runs in every app that extends it. The
   // repo lints with @nuxt/eslint-config (eslint.config.mjs at the root).
   modules: [
@@ -104,7 +100,8 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-08-15',
 
   typescript: {
-    includeWorkspace: true,
+    // No `includeWorkspace`: in the monorepo it would read every package. Each package has its own typecheck.
+    includeWorkspace: false,
     typeCheck: false,
   },
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/core",
   "type": "module",
-  "version": "0.40.0",
+  "version": "0.42.0",
   "description": "The base layer every Pluto app extends: the admin, the content model, and the GitHub CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -43,7 +43,6 @@
     "@lezer/highlight": "^1.2.5",
     "@nuxt/image": "^2.1.0",
     "@nuxt/ui": "^4.12.0",
-    "@plutocms/utils": ">=0.3.0 <1.0.0",
     "@tanstack/charts": "^1.1.0",
     "@vueuse/nuxt": "^15.0.0",
     "image-meta": "^0.3.0",

package/shared/utils/content-slug.ts

@@ -6,8 +6,7 @@ export const SLUG_MAX_LENGTH = 100
  * "pao-de-mel". The result is lowercase ASCII, with single dashes. It can
  * be an empty string.
  *
- * The form and the GitHub CMS both use this function. Do not name it
- * `slugify`: `@plutocms/utils` already auto-imports that name.
+ * The form and the GitHub CMS both use this function.
  */
 export function slugifyTitle(value: string): string {
   return value

package/shared/utils/url.ts

@@ -0,0 +1,13 @@
+/**
+ * The host of a URL, without the scheme and `www.`: `https://www.example.com/a`
+ * gives `example.com`. No URL gives `undefined`; a value that does not parse
+ * gives an empty string. The admin bar shows it next to "View site".
+ */
+export function domainFromUrl(url: string | null | undefined) {
+  if (!url) {
+    return
+  }
+
+  const match = url.match(/^(?:https?:\/\/)?(?:www\.)?([^/]+)/i)
+  return match ? match[1] : ''
+}