@plutocms/core 0.46.0 → 0.47.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
 
+## [0.47.0](https://github.com/plutocms/pluto/compare/v0.46.0...v0.47.0) (2026-11-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* PlutoHtml has no Tailwind prose classes. A site imports `@plutocms/css/base` for the prose look. A site that adds its own page offset for the admin bar removes it, or the page moves down twice.
+
+### Features
+
+* the public components use plain CSS, with an optional @plutocms/css/base ([#353](https://github.com/plutocms/pluto/issues/353)) ([d0fa541](https://github.com/plutocms/pluto/commit/d0fa541b34a672370ebf2d95372a967a1aebde10))
+
+
+### Bug Fixes
+
+* the admin has its styles in the first frame of a client navigation ([#354](https://github.com/plutocms/pluto/issues/354)) ([f7a4226](https://github.com/plutocms/pluto/commit/f7a4226966e73bf2a91ae599303c35a8daac61a2))
+
 ## [0.46.0](https://github.com/plutocms/pluto/compare/v0.45.0...v0.46.0) (2026-11-02)
 
 

package/FEATURES.md

@@ -72,6 +72,10 @@ policies shared by every project here.
   layer's `pluto-layer.css` (imported as `@plutocms/css` by the admin build and by a Tailwind
   site), and warns about a Tailwind build in a layer or more than one.
   @.claude/skills/single-tailwind-build/SKILL.md
+- Public components: the components for a public site (`PlutoHtml`, `PlutoImage`, `PlutoLogo`,
+  `PlutoRoot`, and those of the layers) use only `pluto-*` classes and work with no Tailwind. Their
+  look is plain CSS in each layer's `pluto-base.css`, which a site imports with the opt-in
+  `@import '@plutocms/css/base'`. @.claude/skills/public-components/SKILL.md
 - Git CMS: a standalone CMS with Markdown posts in a Git repo. Out of the box it publishes to the
   local Git repo (dev only: each save is a local commit, `commit.local`); a GitHub App publishes
   from a deployed site. The module is `pluto-github` (config

package/app/assets/css/pluto-base.css

@@ -0,0 +1,228 @@
+/*
+ * The look of the public components of core. Opt-in: a site imports it with
+ * `@import '@plutocms/css/base'`, with or without Tailwind. Plain CSS only:
+ * no Tailwind directive. See the public-components skill.
+ *
+ * Every selector is in `:where()` (zero specificity) and in the `components`
+ * layer. On a Tailwind site, the file joins Tailwind's own layer, so a utility
+ * wins. On a site with no Tailwind, any unlayered rule of the site wins.
+ *
+ * Colors read the Nuxt UI variables, with plain fallbacks: a Nuxt UI site
+ * gets its own theme. A site can also set the `--pluto-prose-*` variables.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  /* PlutoHtml, PlutoMarkdown, and the PlutoProse of the blog layer. */
+  :where(.pluto-prose) {
+    --pluto-prose-heading: var(--ui-text-highlighted, currentColor);
+    --pluto-prose-muted: var(
+      --ui-text-muted,
+      color-mix(in oklab, currentColor 65%, transparent)
+    );
+    --pluto-prose-link: var(--ui-primary, LinkText);
+    --pluto-prose-border: var(
+      --ui-border,
+      color-mix(in oklab, currentColor 15%, transparent)
+    );
+    --pluto-prose-border-accented: var(
+      --ui-border-accented,
+      color-mix(in oklab, currentColor 30%, transparent)
+    );
+    --pluto-prose-code-bg: var(
+      --ui-bg-muted,
+      color-mix(in oklab, currentColor 6%, transparent)
+    );
+    --pluto-prose-th-bg: var(
+      --ui-bg-elevated,
+      color-mix(in oklab, currentColor 4%, transparent)
+    );
+    --pluto-prose-radius: calc(var(--ui-radius, 0.25rem) * 1.5);
+    --pluto-prose-mono: var(
+      --font-mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Consolas,
+      monospace
+    );
+
+    width: 100%;
+    overflow-wrap: break-word;
+  }
+
+  :where(.pluto-prose) ::selection {
+    background-color: color-mix(
+      in oklab,
+      var(--pluto-prose-link) 20%,
+      transparent
+    );
+  }
+
+  :where(.pluto-prose) > :where(*) {
+    margin-block: 1.25rem;
+  }
+
+  :where(.pluto-prose) > :where(:first-child) {
+    margin-block-start: 0;
+  }
+
+  :where(.pluto-prose) > :where(:last-child) {
+    margin-block-end: 0;
+  }
+
+  :where(.pluto-prose) :where(p) {
+    line-height: 1.75rem;
+  }
+
+  :where(.pluto-prose) :where(a) {
+    color: var(--pluto-prose-link);
+    font-weight: 500;
+    text-decoration: none;
+    border-block-end: 1px solid transparent;
+    transition: border-color 0.15s;
+  }
+
+  :where(.pluto-prose) :where(a:hover) {
+    border-block-end-color: var(--pluto-prose-link);
+  }
+
+  :where(.pluto-prose) :where(a:focus-visible) {
+    border-block-end-color: transparent;
+    border-radius: 0.125rem;
+    outline: 3px solid
+      color-mix(in oklab, var(--pluto-prose-link) 25%, transparent);
+  }
+
+  :where(.pluto-prose) :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--pluto-prose-heading);
+    font-weight: 700;
+  }
+
+  :where(.pluto-prose) :where(h1) {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  :where(.pluto-prose) :where(h2) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  :where(.pluto-prose) :where(h3) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  :where(.pluto-prose) :where(h4) {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  :where(.pluto-prose) :where(h5, h6) {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  :where(.pluto-prose) :where(blockquote) {
+    margin-inline: 0;
+    padding-inline-start: 1rem;
+    border-inline-start: 4px solid var(--pluto-prose-border-accented);
+    font-style: italic;
+  }
+
+  :where(.pluto-prose) :where(hr) {
+    border: 0;
+    border-block-start: 1px solid var(--pluto-prose-border);
+  }
+
+  :where(.pluto-prose) :where(code) {
+    display: inline-block;
+    padding: 0.125rem 0.375rem;
+    border: 1px solid var(--pluto-prose-border);
+    border-radius: var(--pluto-prose-radius);
+    background-color: var(--pluto-prose-code-bg);
+    color: var(--pluto-prose-heading);
+    font-family: var(--pluto-prose-mono);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  :where(.pluto-prose) :where(pre) {
+    overflow-x: auto;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--pluto-prose-border);
+    border-radius: var(--pluto-prose-radius);
+    background-color: var(--pluto-prose-code-bg);
+    font-family: var(--pluto-prose-mono);
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    white-space: pre-wrap;
+  }
+
+  :where(.pluto-prose) :where(pre code) {
+    display: inline;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    font-size: inherit;
+  }
+
+  :where(.pluto-prose) :where(ul, ol) {
+    padding-inline-start: 1.5rem;
+  }
+
+  :where(.pluto-prose) :where(ul) {
+    list-style-type: disc;
+  }
+
+  :where(.pluto-prose) :where(ol) {
+    list-style-type: decimal;
+  }
+
+  :where(.pluto-prose) :where(ul > li)::marker {
+    color: var(--pluto-prose-border-accented);
+  }
+
+  :where(.pluto-prose) :where(ol > li)::marker {
+    color: var(--pluto-prose-muted);
+  }
+
+  :where(.pluto-prose) :where(li) {
+    margin-block: 0.375rem;
+    padding-inline-start: 0.375rem;
+  }
+
+  :where(.pluto-prose) :where(img) {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--pluto-prose-radius);
+  }
+
+  :where(.pluto-prose) :where(table) {
+    display: block;
+    overflow-x: auto;
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  :where(.pluto-prose) :where(th, td) {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--pluto-prose-border);
+  }
+
+  :where(.pluto-prose) :where(th) {
+    background-color: var(--pluto-prose-th-bg);
+    color: var(--pluto-prose-heading);
+    font-weight: 600;
+    text-align: start;
+  }
+
+  :where(.pluto-prose) :where(input[type='checkbox']) {
+    margin-inline-end: 0.5rem;
+  }
+}

package/app/components/Pluto/PlutoHtml.vue

@@ -1,36 +1,21 @@
 <script setup lang="ts">
-import { tv } from '@nuxt/ui/utils/tv'
-import theme from '#build/ui/editor'
-
 // Shows the `html` of a public item (the public API of Pluto), with readable prose styles. It
 // works with every backend: the Git CMS and `@plutocms/supabase-blog` both send the body as
 // sanitized HTML, so the string is safe to set as `innerHTML`. This component never parses or
 // sanitizes. Do not pass any other HTML to it.
-const props = withDefaults(
+//
+// The prose look is `.pluto-prose` in app/assets/css/pluto-base.css: plain CSS that a site
+// imports with `@plutocms/css/base`. No Tailwind class here, so the component works on a site
+// with no Tailwind. See the public-components skill.
+withDefaults(
   defineProps<{
     html: string
     tag?: string
-    class?: any
   }>(),
   {
     tag: 'article',
-    class: undefined,
   }
 )
-
-// The base of the Nuxt UI editor theme gives readable prose with semantic
-// color tokens. The editor adds side padding, so `sm:px-0` removes it.
-// The table classes are here because the editor theme has none.
-const ui = computed(() => tv({ extend: theme })())
-
-const classes = computed(() => [
-  ui.value.base({ class: 'sm:px-0' }),
-  '[&_table]:block [&_table]:w-full [&_table]:overflow-x-auto [&_table]:text-sm',
-  '[&_:is(th,td)]:border [&_:is(th,td)]:border-default [&_:is(th,td)]:px-3 [&_:is(th,td)]:py-2',
-  '[&_th]:bg-elevated [&_th]:text-highlighted [&_th]:text-start [&_th]:font-semibold',
-  '[&_input[type=checkbox]]:me-2',
-  props.class,
-])
 </script>
 
 <template>
@@ -38,5 +23,5 @@ const classes = computed(() => [
        on a dynamic `<component :is>` drops the value in the SSR output. The
        hyphenated spelling renders a literal `inner-h-t-m-l` attribute. -->
   <!-- eslint-disable-next-line vue/attribute-hyphenation -- must stay camelCase, see comment above -->
-  <component :is="tag" v-if="html" :class="classes" :innerHTML="html" />
+  <component :is="tag" v-if="html" :innerHTML="html" class="pluto-prose" />
 </template>

package/app/components/Pluto/PlutoRoot.vue

@@ -162,6 +162,25 @@ useHead({
   --pluto-admin-bar-height: 2.5rem;
 }
 
+/*
+ * The bar is fixed at the top, so a public page moves down by its height while
+ * it shows: the top of the page is never under the bar. A sticky or fixed
+ * header of the site still needs `top: var(--pluto-admin-bar-height)`. The
+ * admin pages (`data-pluto-admin`) have their own layout. Zero specificity
+ * (`:where`), so a rule of the site wins.
+ */
+:where(:root[data-pluto-admin-bar]:not([data-pluto-admin])) body {
+  padding-top: var(--pluto-admin-bar-height);
+}
+
+:where(:root[data-pluto-admin-bar]:not([data-pluto-admin])) {
+  scroll-padding-top: var(--pluto-admin-bar-height);
+}
+
+:where(:root[data-pluto-admin-bar]:not([data-pluto-admin])) #__nuxt {
+  min-height: calc(100dvh - var(--pluto-admin-bar-height));
+}
+
 /*
  * The wrappers grow to fill #__nuxt. Plain CSS, not Tailwind classes: a site
  * may have no Tailwind (the admin has a build of its own).

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

@@ -8,9 +8,30 @@
  *
  * Call it from every admin layout. `useHead` removes the attribute when the
  * layout unmounts, so the public site never gets it.
+ *
+ * `useHead` puts the attribute in the server HTML, but in the browser it
+ * writes <html> after the render, a frame late. The admin build is scoped to
+ * the attribute, so a client navigation from the public site showed one frame
+ * of the admin with no styles. `onMounted` runs in the same task as the DOM
+ * change, before the paint, so the attribute is set there too. A count keeps
+ * it while another admin layout is mounted.
  */
+let mountedAdminLayouts = 0
+
 export function usePlutoAdminTheme() {
   useHead({ htmlAttrs: { 'data-pluto-admin': '' } })
+  if (import.meta.client) {
+    onMounted(() => {
+      mountedAdminLayouts++
+      document.documentElement.setAttribute('data-pluto-admin', '')
+    })
+    onUnmounted(() => {
+      mountedAdminLayouts--
+      if (mountedAdminLayouts === 0) {
+        document.documentElement.removeAttribute('data-pluto-admin')
+      }
+    })
+  }
 }
 
 /**

package/modules/pluto-css/css-entries.ts

@@ -11,24 +11,30 @@ export const PLUTO_CSS_IMPORT = '@plutocms/css'
 /** The opt-in Pluto site theme: an alias of `#build/pluto-site.css`. */
 export const PLUTO_SITE_CSS_IMPORT = '@plutocms/css/site'
 
+/** A layer's plain CSS for its public components. See the public-components skill. */
+export const LAYER_BASE_CSS_FILE = 'assets/css/pluto-base.css'
+
+/** The opt-in look of the public components: an alias of `#build/pluto-base.css`. */
+export const PLUTO_BASE_CSS_IMPORT = '@plutocms/css/base'
+
 function toPosix(path: string): string {
   return path.replaceAll('\\', '/')
 }
 
 /**
- * Returns the `pluto-layer.css` file of every layer that has one, base
- * layer first. Nuxt lists the layers top first (the app, then each layer it
- * extends), so the list is reversed: a higher layer's `@theme` then comes
- * later in the build and wins.
+ * Returns the `file` of every layer that has one, base layer first. Nuxt
+ * lists the layers top first (the app, then each layer it extends), so the
+ * list is reversed: a higher layer's rules then come later and win.
  */
 export function findLayerCssFiles(
   layerAppDirs: string[],
-  exists: (path: string) => boolean
+  exists: (path: string) => boolean,
+  file = LAYER_CSS_FILE
 ): string[] {
   return [...layerAppDirs]
     .reverse()
-    .map((appDir) => toPosix(join(appDir, LAYER_CSS_FILE)))
-    .filter((file) => exists(file))
+    .map((appDir) => toPosix(join(appDir, file)))
+    .filter((path) => exists(path))
 }
 
 /**
@@ -37,9 +43,26 @@ export function findLayerCssFiles(
  * another drive (Windows) stays absolute.
  */
 export function renderPlutoCss(files: string[], buildDir: string): string {
+  return renderLayerImports(files, buildDir, LAYER_CSS_FILE)
+}
+
+/**
+ * Renders `#build/pluto-base.css`: one `@import` for each layer's
+ * `pluto-base.css`. The plain CSS of the public components: an app imports
+ * it (`@plutocms/css/base`) with or without Tailwind.
+ */
+export function renderPlutoBaseCss(files: string[], buildDir: string): string {
+  return renderLayerImports(files, buildDir, LAYER_BASE_CSS_FILE)
+}
+
+function renderLayerImports(
+  files: string[],
+  buildDir: string,
+  name: string
+): string {
   return [
     '/* Generated by @plutocms/core (modules/pluto-css). Do not edit. */',
-    "/* Each Pluto layer's app/assets/css/pluto-layer.css, base layer first. */",
+    `/* Each Pluto layer's app/${name}, base layer first. */`,
     ...files.map((file) => cssImport(file, buildDir)),
     '',
   ].join('\n')
@@ -81,6 +104,8 @@ export function renderPlutoAdminCss(): string {
     '@import "tailwindcss";',
     '@import "@nuxt/ui";',
     `@import "${PLUTO_CSS_IMPORT}";`,
+    // The admin shows public components too: the post preview, the 3D preview.
+    `@import "${PLUTO_BASE_CSS_IMPORT}";`,
     '',
   ].join('\n')
 }

package/modules/pluto-css/index.ts

@@ -13,9 +13,12 @@ import {
   analyzeCssEntry,
   checkCssSetup,
   findLayerCssFiles,
+  LAYER_BASE_CSS_FILE,
+  PLUTO_BASE_CSS_IMPORT,
   PLUTO_CSS_IMPORT,
   PLUTO_SITE_CSS_IMPORT,
   renderPlutoAdminCss,
+  renderPlutoBaseCss,
   renderPlutoCss,
   renderPlutoSiteCss,
   resolveRelativeImport,
@@ -49,6 +52,9 @@ export interface PlutoCssOptions {
  * - `@plutocms/css/site` (opt-in) is an alias of `#build/pluto-site.css`: the
  *   Pluto site theme of core (app/assets/css/pluto-site-theme.css), the look of
  *   the Pluto docs for a site.
+ * - `@plutocms/css/base` (opt-in) is an alias of `#build/pluto-base.css`: each
+ *   layer's app/assets/css/pluto-base.css, the plain CSS look of its public
+ *   components. It needs no Tailwind. The admin build imports it too.
  * - The names are aliases, not npm packages, so they resolve with every package
  *   manager, also when the app installs only an outer layer.
  * - The module warns about a layer that registers its own Tailwind build, and
@@ -84,13 +90,31 @@ export default defineNuxtModule<PlutoCssOptions>({
       getContents: () => renderPlutoSiteCss(siteTheme, nuxt.options.buildDir),
     })
 
-    // The names that an app's CSS entry imports. Tailwind resolves `@import`
-    // through the Vite aliases. `/site` comes first: an alias also matches the
-    // paths under its name, so `@plutocms/css` would take `@plutocms/css/site`.
+    // The opt-in plain CSS of the public components, from every layer. An
+    // app imports `@plutocms/css/base`, with or without Tailwind.
+    const layerBaseCssFiles = findLayerCssFiles(
+      layers.map((layer) => layer.app),
+      existsSync,
+      LAYER_BASE_CSS_FILE
+    )
+    addTemplate({
+      filename: 'pluto-base.css',
+      write: true,
+      getContents: () =>
+        renderPlutoBaseCss(layerBaseCssFiles, nuxt.options.buildDir),
+    })
+
+    // The names that an app's CSS entry imports. Tailwind and Vite resolve
+    // `@import` through the aliases. `/site` and `/base` come first: an alias
+    // also matches the paths under its name, so `@plutocms/css` would take them.
     nuxt.options.alias[PLUTO_SITE_CSS_IMPORT] = join(
       nuxt.options.buildDir,
       'pluto-site.css'
     )
+    nuxt.options.alias[PLUTO_BASE_CSS_IMPORT] = join(
+      nuxt.options.buildDir,
+      'pluto-base.css'
+    )
     nuxt.options.alias[PLUTO_CSS_IMPORT] = join(
       nuxt.options.buildDir,
       'pluto.css'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/core",
   "type": "module",
-  "version": "0.46.0",
+  "version": "0.47.0",
   "description": "The base layer every Pluto app extends: the admin, the content model, and the Git CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",