@plutocms/pluto 0.11.0 → 0.13.0

package/CHANGELOG.md

@@ -1,6 +1,42 @@
 # Changelog
 
 
+## [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)
+
+
+### ⚠ 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)
 
 

package/FEATURES.md

@@ -23,3 +23,16 @@ policies shared by every project here.
   `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,216 @@
+/*
+ * 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.
+ *
+ * `[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
+ * :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. The navbar is near black in both modes. */
+  --pluto-admin-canvas: #fff;
+  --pluto-admin-sidebar: oklch(98.5% 0 none);
+  --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],
+[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);
+  --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: 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);
+  --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 */
+
+  /*
+   * 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 {
+  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"
     />
 

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

@@ -327,6 +327,7 @@ const unpublishDeleteItems = computed(() => [
 <template>
   <PlutoViewAdminPanel
     v-if="contentType"
+    :aside-open="showAside && asideOpen"
     :width="layout === 'focus' ? 'full' : 'container'"
   >
     <template #toolbar>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TableColumn } from '@nuxt/ui'
+import type { ButtonProps, TableColumn } from '@nuxt/ui'
 
 const props = defineProps<{
   /** A content type's `name` (not a registry entry id) — see `usePlutoContentTypes`. */
@@ -48,7 +48,62 @@ function editPath(id: string | number) {
   return contentType.value?.editPath?.(id) ?? `${basePath.value}/${id}`
 }
 
-const { items, pending, refresh, remove } = usePlutoContentList(props.type)
+// Load the list 50 rows at a time. The table is virtualized, so only the
+// visible rows render, and the next page loads when the user scrolls near
+// the end of the table (or of the card list, on mobile).
+const PAGE_SIZE = 50
+const { items, total, pending, loadingMore, hasMore, error, refresh, loadMore, remove } = usePlutoContentList(
+  props.type,
+  { pageSize: PAGE_SIZE }
+)
+
+const tableRef = useTemplateRef<{
+ $el: HTMLElement
+}>('table')
+const mobileListRef = useTemplateRef<HTMLElement>('mobileList')
+
+function loadMoreSafely() {
+  // A failure lands in `error`, and the alert offers "Try again".
+  loadMore().catch(() => {})
+}
+
+// Stop while an error shows, so a failing page does not load in a loop.
+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>(() => {
+  if (items.value.length > 0) {
+    return null
+  }
+  if (pending.value) {
+    return 'loading'
+  }
+  return error.value ? 'error' : 'empty'
+})
+
+function retry() {
+  refresh().catch(() => {})
+}
+
+// Buttons navigate with `navigateTo`, not `to`: `to` is typed per app
+// through typed pages, so a computed button list cannot type it here.
+const emptyActions = computed<ButtonProps[]>(() => {
+  const type = contentType.value
+  if (!type) {
+    return []
+  }
+  if (emptyState.value === 'error') {
+    return [{ label: 'Try again', icon: 'lucide:refresh-ccw', color: 'neutral', variant: 'outline', onClick: retry }]
+  }
+  return canWrite.value
+    ? [{ label: `New ${type.label}`, icon: 'lucide:plus', onClick: () => navigateTo(newPath.value) }]
+    : []
+})
 
 const listFields = computed(() =>
   (contentType.value?.fields ?? [])
@@ -88,7 +143,7 @@ async function confirmDelete() {
 </script>
 
 <template>
-  <PlutoViewAdminPanel v-if="contentType">
+  <PlutoViewAdminPanel v-if="contentType" fill>
     <template #toolbar>
       <PlutoViewToolbar :title="contentType.labelPlural">
         <template #trailing>
@@ -98,20 +153,59 @@ async function confirmDelete() {
             variant="ghost"
             title="Refresh"
             square
-            @click="refresh()"
+            @click="retry"
           />
         </template>
 
         <template v-if="canWrite" #right>
           <UButton :to="newPath" icon="lucide:plus" as="NuxtLink">
-            Add {{ contentType.labelPlural }}
+            New {{ contentType.label }}
           </UButton>
         </template>
       </PlutoViewToolbar>
     </template>
 
-    <div class="grid gap-3 lg:hidden">
-      <UCard v-for="item in items" :key="item.id">
+    <UEmpty
+      v-if="emptyState === 'loading'"
+      :title="`Loading ${contentType.labelPlural.toLowerCase()}…`"
+      variant="naked"
+      loading
+    />
+
+    <UEmpty
+      v-else-if="emptyState === 'error'"
+      :title="`Could not load ${contentType.labelPlural.toLowerCase()}`"
+      :actions="emptyActions"
+      description="Check your connection and try again."
+      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.'"
+      :icon="contentType.icon ?? 'lucide:inbox'"
+      :actions="emptyActions"
+      variant="naked"
+    />
+
+    <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."
+      color="error"
+      variant="subtle"
+      icon="lucide:circle-alert"
+    />
+
+    <div
+      v-if="!emptyState"
+      ref="mobileList"
+      class="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto lg:hidden"
+    >
+      <UCard v-for="item in items" :key="item.id" class="shrink-0">
         <div class="flex flex-col gap-4">
           <div class="min-w-0">
             <NuxtLink
@@ -156,15 +250,18 @@ async function confirmDelete() {
       </UCard>
     </div>
 
-    <UCard :ui="{ body: 'sm:p-0 p-0' }" class="hidden lg:block">
-      <div class="overflow-x-auto">
-        <UTable
-          :data="items"
-          :columns="columns"
-          :loading="pending"
-          empty="No items yet."
-        >
-          <template #actions-cell="{ row }">
+    <UTable
+      v-if="!emptyState"
+      ref="table"
+      :data="items"
+      :columns="columns"
+      :loading="pending || loadingMore"
+      class="ring-default hidden min-h-0 flex-1 rounded-lg ring lg:block"
+      empty="No items yet."
+      sticky
+      virtualize
+    >
+      <template #actions-cell="{ row }">
             <div class="flex justify-end gap-3">
               <NuxtLink
                 v-if="canWrite"
@@ -183,10 +280,15 @@ async function confirmDelete() {
                 Remove
               </button>
             </div>
-          </template>
-        </UTable>
-      </div>
-    </UCard>
+      </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>
+    </p>
   </PlutoViewAdminPanel>
 
   <PlutoViewAdminPanel v-else>