@plutocms/pluto 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,6 +1,33 @@
 # Changelog
 
 
+## [0.12.0](https://github.com/plutocms/pluto/compare/v0.11.0...v0.12.0) (2026-10-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* **admin:** An app with its own Tailwind entry must import @nuxt/ui and #build/pluto.css after tailwindcss:
+
+### Features
+
+* **admin:** add a Cmd/Ctrl+K command palette ([#150](https://github.com/plutocms/pluto/issues/150)) ([540a4fb](https://github.com/plutocms/pluto/commit/540a4fb5f6fb5ed8b3d32fc05efe70f862222ff8))
+* **admin:** add a content overview widget to the dashboard ([#152](https://github.com/plutocms/pluto/issues/152)) ([b925f83](https://github.com/plutocms/pluto/commit/b925f8383d64b64b47738bfad2617a8ecbeb3172))
+* **admin:** make the view aside resizable ([#147](https://github.com/plutocms/pluto/issues/147)) ([f400cc1](https://github.com/plutocms/pluto/commit/f400cc1fa54fbcab7b4bc30c18d8f3cddad026d9))
+* **admin:** redesign the dashboard, isolate the admin theme, and use one Tailwind build ([#153](https://github.com/plutocms/pluto/issues/153)) ([e1461b9](https://github.com/plutocms/pluto/commit/e1461b9a58267e71b42e2bceadc7c1f6d471861e))
+* **content:** add loading, empty, and error states to the content list ([#151](https://github.com/plutocms/pluto/issues/151)) ([7d26540](https://github.com/plutocms/pluto/commit/7d2654027c4329b8fc08843a672b43d73a4e7e55))
+
+
+### Bug Fixes
+
+* **admin:** start the dashboard group below the navbar again ([#149](https://github.com/plutocms/pluto/issues/149)) ([32d4970](https://github.com/plutocms/pluto/commit/32d497013c487b317d376376e645a502f9054a35))
+
+## [0.11.0](https://github.com/plutocms/pluto/compare/v0.10.0...v0.11.0) (2026-10-16)
+
+
+### Features
+
+* **admin:** rebuild admin layout on Nuxt UI dashboard components ([#145](https://github.com/plutocms/pluto/issues/145)) ([621e57b](https://github.com/plutocms/pluto/commit/621e57b83d7650b49242c4b83c5374b33c7236bc))
+
 ## [0.10.0](https://github.com/plutocms/pluto/compare/v0.9.1...v0.10.0) (2026-09-13)
 
 

package/FEATURES.md

@@ -19,3 +19,20 @@ policies shared by every project here.
   admin UI (list/form components, eight built-in field widgets, generated
   `/admin/content/**` pages, and nav/pages derivation). No real adapter yet.
   @.claude/skills/content-model/SKILL.md
+- Admin view chrome: per-view shell components (`PlutoViewAdminPanel`, `PlutoViewToolbar`,
+  `PlutoViewAside`), the generic content form's publish workflow, and the `contentActions`
+  registry bucket that lets a layer add its own buttons to that form.
+  @.claude/skills/admin-view-chrome/SKILL.md
+- Command palette: Cmd/Ctrl+K and a sidebar search button open a `UDashboardSearch` with
+  "New <type>" commands for writable content types, every admin nav destination, and theme
+  commands. @.claude/skills/command-palette/SKILL.md
+- Dashboard: the admin home with a date and title header, a create menu, and core widgets:
+  content tiles (total, +N this week, published/draft meter), a `UChart` weekly activity
+  chart backed by the optional adapter `countCreated`, and quick actions.
+  @.claude/skills/dashboard/SKILL.md
+- 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
+- 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/README.md

@@ -135,6 +135,36 @@ export default defineNuxtConfig({
 })
 ```
 
+### Styles: one Tailwind build
+
+Your app owns the only Tailwind build. Pluto layers do not register their own. Start your
+CSS entry with these three imports, then add your own theme after them:
+
+```css
+/* app/assets/css/main.css */
+@import 'tailwindcss';
+@import '@nuxt/ui';
+@import '#build/pluto.css';
+
+@theme {
+  /* your site's tokens */
+}
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ['~/assets/css/main.css'],
+})
+```
+
+`#build/pluto.css` brings in the CSS of every Pluto layer, including the admin theme. Nuxt UI
+already scans the source of every layer. If your app has no Tailwind entry, Pluto uses a
+fallback entry. If the setup is wrong, the build prints a `pluto-css` warning with the fix.
+
+The admin keeps its own palette and font. Your site's `app.config` colors and `@theme`
+tokens do not change the admin.
+
 ## Dashboard & headless usage
 
 Although Pluto is built on Nuxt, it is not limited to Nuxt-only consumption.

package/app/assets/css/admin-theme.css

@@ -0,0 +1,207 @@
+/*
+ * The Pluto admin theme.
+ *
+ * Two selectors carry it:
+ * - `:root[data-pluto-admin]`: usePlutoAdminTheme() sets this attribute on
+ *   <html> while an admin layout is mounted, so the theme also covers
+ *   overlays (modals, slideovers, menus, toasts, the command palette) that
+ *   render at the end of <body>.
+ * - `[data-pluto-admin-scope]`: for admin chrome that also shows on the
+ *   public site, such as the admin navbar for a logged-in admin.
+ *
+ * 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
+ * :root, and @theme can redefine a Tailwind color such as --color-red-400.
+ * These selectors are more specific than Nuxt UI's :root and .dark rules.
+ *
+ * The semantic tokens (--ui-primary, --ui-bg, --ui-text, ...) are declared
+ * again here, not only the color scales. A custom property inherits as a
+ * resolved value, so on a scoped element the :root tokens would still hold
+ * the app's colors.
+ *
+ * Chart colors are a validated categorical palette: lightness band, chroma
+ * floor, colorblind separation, and 3:1 contrast pass on white (light) and
+ * on zinc-900 (dark). This file is generated; keep the values in sync with
+ * scripts/generate-admin-theme.cjs: run it from the repo root, never edit this
+ * file by hand.
+ */
+:root[data-pluto-admin],
+[data-pluto-admin-scope] {
+  /* primary: indigo */
+  --ui-color-primary-50: oklch(96.2% 0.018 272.314);
+  --ui-color-primary-100: oklch(93% 0.034 272.788);
+  --ui-color-primary-200: oklch(87% 0.065 274.039);
+  --ui-color-primary-300: oklch(78.5% 0.115 274.713);
+  --ui-color-primary-400: oklch(67.3% 0.182 276.935);
+  --ui-color-primary-500: oklch(58.5% 0.233 277.117);
+  --ui-color-primary-600: oklch(51.1% 0.262 276.966);
+  --ui-color-primary-700: oklch(45.7% 0.24 277.023);
+  --ui-color-primary-800: oklch(39.8% 0.195 277.366);
+  --ui-color-primary-900: oklch(35.9% 0.144 278.697);
+  --ui-color-primary-950: oklch(25.7% 0.09 281.288);
+
+  /* secondary: violet */
+  --ui-color-secondary-50: oklch(96.9% 0.016 293.756);
+  --ui-color-secondary-100: oklch(94.3% 0.029 294.588);
+  --ui-color-secondary-200: oklch(89.4% 0.057 293.283);
+  --ui-color-secondary-300: oklch(81.1% 0.111 293.571);
+  --ui-color-secondary-400: oklch(70.2% 0.183 293.541);
+  --ui-color-secondary-500: oklch(60.6% 0.25 292.717);
+  --ui-color-secondary-600: oklch(54.1% 0.281 293.009);
+  --ui-color-secondary-700: oklch(49.1% 0.27 292.581);
+  --ui-color-secondary-800: oklch(43.2% 0.232 292.759);
+  --ui-color-secondary-900: oklch(38% 0.189 293.745);
+  --ui-color-secondary-950: oklch(28.3% 0.141 291.089);
+
+  /* success: green */
+  --ui-color-success-50: oklch(98.2% 0.018 155.826);
+  --ui-color-success-100: oklch(96.2% 0.044 156.743);
+  --ui-color-success-200: oklch(92.5% 0.084 155.995);
+  --ui-color-success-300: oklch(87.1% 0.15 154.449);
+  --ui-color-success-400: oklch(79.2% 0.209 151.711);
+  --ui-color-success-500: oklch(72.3% 0.219 149.579);
+  --ui-color-success-600: oklch(62.7% 0.194 149.214);
+  --ui-color-success-700: oklch(52.7% 0.154 150.069);
+  --ui-color-success-800: oklch(44.8% 0.119 151.328);
+  --ui-color-success-900: oklch(39.3% 0.095 152.535);
+  --ui-color-success-950: oklch(26.6% 0.065 152.934);
+
+  /* info: blue */
+  --ui-color-info-50: oklch(97% 0.014 254.604);
+  --ui-color-info-100: oklch(93.2% 0.032 255.585);
+  --ui-color-info-200: oklch(88.2% 0.059 254.128);
+  --ui-color-info-300: oklch(80.9% 0.105 251.813);
+  --ui-color-info-400: oklch(70.7% 0.165 254.624);
+  --ui-color-info-500: oklch(62.3% 0.214 259.815);
+  --ui-color-info-600: oklch(54.6% 0.245 262.881);
+  --ui-color-info-700: oklch(48.8% 0.243 264.376);
+  --ui-color-info-800: oklch(42.4% 0.199 265.638);
+  --ui-color-info-900: oklch(37.9% 0.146 265.522);
+  --ui-color-info-950: oklch(28.2% 0.091 267.935);
+
+  /* warning: amber */
+  --ui-color-warning-50: oklch(98.7% 0.022 95.277);
+  --ui-color-warning-100: oklch(96.2% 0.059 95.617);
+  --ui-color-warning-200: oklch(92.4% 0.12 95.746);
+  --ui-color-warning-300: oklch(87.9% 0.169 91.605);
+  --ui-color-warning-400: oklch(82.8% 0.189 84.429);
+  --ui-color-warning-500: oklch(76.9% 0.188 70.08);
+  --ui-color-warning-600: oklch(66.6% 0.179 58.318);
+  --ui-color-warning-700: oklch(55.5% 0.163 48.998);
+  --ui-color-warning-800: oklch(47.3% 0.137 46.201);
+  --ui-color-warning-900: oklch(41.4% 0.112 45.904);
+  --ui-color-warning-950: oklch(27.9% 0.077 45.635);
+
+  /* error: red */
+  --ui-color-error-50: oklch(97.1% 0.013 17.38);
+  --ui-color-error-100: oklch(93.6% 0.032 17.717);
+  --ui-color-error-200: oklch(88.5% 0.062 18.334);
+  --ui-color-error-300: oklch(80.8% 0.114 19.571);
+  --ui-color-error-400: oklch(70.4% 0.191 22.216);
+  --ui-color-error-500: oklch(63.7% 0.237 25.331);
+  --ui-color-error-600: oklch(57.7% 0.245 27.325);
+  --ui-color-error-700: oklch(50.5% 0.213 27.518);
+  --ui-color-error-800: oklch(44.4% 0.177 26.899);
+  --ui-color-error-900: oklch(39.6% 0.141 25.723);
+  --ui-color-error-950: oklch(25.8% 0.092 26.042);
+
+  /* neutral: zinc */
+  --ui-color-neutral-50: oklch(98.5% 0 none);
+  --ui-color-neutral-100: oklch(96.7% 0.001 286.375);
+  --ui-color-neutral-200: oklch(92% 0.004 286.32);
+  --ui-color-neutral-300: oklch(87.1% 0.006 286.286);
+  --ui-color-neutral-400: oklch(70.5% 0.015 286.067);
+  --ui-color-neutral-500: oklch(55.2% 0.016 285.938);
+  --ui-color-neutral-600: oklch(44.2% 0.017 285.786);
+  --ui-color-neutral-700: oklch(37% 0.013 285.805);
+  --ui-color-neutral-800: oklch(27.4% 0.006 286.033);
+  --ui-color-neutral-900: oklch(21% 0.006 285.885);
+  --ui-color-neutral-950: oklch(14.1% 0.005 285.823);
+
+  --ui-primary: var(--ui-color-primary-500);
+  --ui-secondary: var(--ui-color-secondary-500);
+  --ui-success: var(--ui-color-success-500);
+  --ui-info: var(--ui-color-info-500);
+  --ui-warning: var(--ui-color-warning-500);
+  --ui-error: var(--ui-color-error-500);
+
+  --ui-text-dimmed: var(--ui-color-neutral-400);
+  --ui-text-muted: var(--ui-color-neutral-500);
+  --ui-text-toned: var(--ui-color-neutral-600);
+  --ui-text: var(--ui-color-neutral-700);
+  --ui-text-highlighted: var(--ui-color-neutral-900);
+  --ui-text-inverted: #fff;
+  --ui-bg: #fff;
+  --ui-bg-muted: var(--ui-color-neutral-50);
+  --ui-bg-elevated: var(--ui-color-neutral-100);
+  --ui-bg-accented: var(--ui-color-neutral-200);
+  --ui-bg-inverted: var(--ui-color-neutral-900);
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-border-muted: var(--ui-color-neutral-200);
+  --ui-border-accented: var(--ui-color-neutral-300);
+  --ui-border-inverted: var(--ui-color-neutral-900);
+
+  --ui-chart-1: var(--ui-primary);
+  --ui-chart-2: oklch(66.6% 0.179 58.318); /* amber-600 */
+  --ui-chart-3: oklch(60% 0.118 184.704); /* teal-600 */
+  --ui-chart-4: oklch(64.5% 0.246 16.439); /* rose-500 */
+  --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 */
+  --pluto-admin-canvas: #fff;
+  --pluto-admin-sidebar: oklch(98.5% 0 none);
+  --pluto-admin-navbar: #fff;
+
+  --ui-radius: 0.375rem;
+  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
+}
+
+:root[data-pluto-admin].dark,
+.dark [data-pluto-admin-scope] {
+  --ui-primary: var(--ui-color-primary-400);
+  --ui-secondary: var(--ui-color-secondary-400);
+  --ui-success: var(--ui-color-success-400);
+  --ui-info: var(--ui-color-info-400);
+  --ui-warning: var(--ui-color-warning-400);
+  --ui-error: var(--ui-color-error-400);
+
+  --ui-text-dimmed: var(--ui-color-neutral-500);
+  --ui-text-muted: var(--ui-color-neutral-400);
+  --ui-text-toned: var(--ui-color-neutral-300);
+  --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-muted: var(--ui-color-neutral-800);
+  --ui-bg-elevated: var(--ui-color-neutral-800);
+  --ui-bg-accented: var(--ui-color-neutral-700);
+  --ui-bg-inverted: #fff;
+  --ui-border: var(--ui-color-neutral-800);
+  --ui-border-muted: var(--ui-color-neutral-700);
+  --ui-border-accented: var(--ui-color-neutral-700);
+  --ui-border-inverted: #fff;
+
+  --ui-chart-1: var(--ui-primary);
+  --ui-chart-2: oklch(66.6% 0.179 58.318); /* amber-600 */
+  --ui-chart-3: oklch(60% 0.118 184.704); /* teal-600 */
+  --ui-chart-4: oklch(64.5% 0.246 16.439); /* rose-500 */
+  --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);
+  --pluto-admin-navbar: oklch(14.1% 0.005 285.823);
+}
+
+:root[data-pluto-admin] body {
+  background-color: var(--pluto-admin-canvas);
+}
+
+:root[data-pluto-admin] body,
+[data-pluto-admin-scope] {
+  font-family: var(--font-sans);
+  color: var(--ui-text);
+}

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

@@ -0,0 +1,40 @@
+/*
+ * The pluto layer's CSS. It is not a Tailwind entry.
+ *
+ * The app's CSS entry owns the one Tailwind build of the app:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@nuxt/ui';
+ *   @import '#build/pluto.css';
+ *
+ * `#build/pluto.css` imports this file (and the same file of every other
+ * Pluto layer). Rules for this file:
+ * - Do not import tailwindcss or @nuxt/ui here.
+ * - Use only @theme, @custom-variant, @utility, unlayered rules, and
+ *   imports of plain CSS files next to this one.
+ * - Add no @source for app/: Nuxt UI already scans every layer's app/ dir.
+ * See the single-tailwind-build skill.
+ */
+@import './admin-theme.css';
+
+@theme {
+  --color-admin-content: var(--color-zinc-800);
+  --color-admin-sidebar: var(--color-zinc-900);
+
+  --font-outfit: 'Outfit', sans-serif;
+}
+
+/*
+ * Set the header height outside a layer. This overrides Nuxt UI's own
+ * `@layer theme` value for the same variable. The values match the
+ * navbar's own height classes (`h-14` / `lg:h-10`).
+ */
+:root {
+  --ui-header-height: 3.5rem;
+}
+
+@media (width >= 64rem) {
+  :root {
+    --ui-header-height: 2.5rem;
+  }
+}

package/app/components/ColorModeButton.vue

@@ -15,9 +15,11 @@ 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'"
       color="neutral"
-      variant="solid"
-      size="sm"
+      variant="ghost"
+      size="md"
+      square
       @click="isDark = !isDark"
     />