@plutocms/pluto 0.10.0 → 0.11.0

package/CHANGELOG.md

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

package/app/assets/css/tailwind.css

@@ -9,3 +9,18 @@
 
   --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/Pluto/Content/PlutoContentForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ButtonProps } from '@nuxt/ui'
+
 const props = defineProps<{
   /** A content type's `name` (not a registry entry id) — see `usePlutoContentTypes`. */
   type: string
@@ -13,7 +15,9 @@ if (!contentType.value) {
   // The generated page (`app/pages/admin/content/[type]/{new,[id]}.vue`)
   // already resolves the type and 404s before this component ever mounts,
   // so this should not normally happen.
-  console.error(`PlutoContentForm: content type "${props.type}" was not found in the registry.`)
+  console.error(
+    `PlutoContentForm: content type "${props.type}" was not found in the registry.`
+  )
 }
 
 const { can } = usePlutoPermissions()
@@ -21,11 +25,26 @@ const { can } = usePlutoPermissions()
 // "No capability declared" means the operation is open to anyone who can
 // reach this page — never call can('') as a stand-in for that.
 const canWrite = computed(
-  () => !contentType.value?.capabilities?.write || can(contentType.value.capabilities.write)
+  () =>
+    !contentType.value?.capabilities?.write ||
+    can(contentType.value.capabilities.write)
+)
+const canPublish = computed(() => {
+  const cap =
+    contentType.value?.capabilities?.publish ??
+    contentType.value?.capabilities?.write
+  return !cap || can(cap)
+})
+const canDelete = computed(
+  () =>
+    !contentType.value?.capabilities?.delete ||
+    can(contentType.value.capabilities.delete)
 )
 
 const editing = computed(() => props.id !== undefined)
-const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+const basePath = computed(
+  () => contentType.value?.basePath ?? `/admin/content/${props.type}`
+)
 
 // editPath exists so an already-deployed layer's edit URL never has to
 // change to adopt this component — see the doc comment on
@@ -35,12 +54,14 @@ function editPath(id: string | number) {
   return contentType.value?.editPath?.(id) ?? `${basePath.value}/${id}`
 }
 
-const { item, save } = usePlutoContentItem(props.type, () => props.id)
+const { item, save, remove } = usePlutoContentItem(props.type, () => props.id)
 
 function sortedFields(region: 'main' | 'side') {
   return computed(() =>
     (contentType.value?.fields ?? [])
-      .filter((field) => field.inForm !== false && (field.region ?? 'main') === region)
+      .filter(
+        (field) => field.inForm !== false && (field.region ?? 'main') === region
+      )
       .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
   )
 }
@@ -63,7 +84,9 @@ const sideFields = sortedFields('side')
 //    the moment a 'slug' field's own `update:modelValue` fires.
 const slugTouched = ref(false)
 const slugField = computed(() =>
-  contentType.value?.fields.find((field): field is PlutoSlugField => field.type === 'slug')
+  contentType.value?.fields.find(
+    (field): field is PlutoSlugField => field.type === 'slug'
+  )
 )
 
 function slugify(value: string): string {
@@ -96,13 +119,40 @@ function updateField(field: PlutoField, value: unknown) {
   item.value[field.name] = value
 }
 
+// --- Status / publish workflow ----------------------------------------------
+
+const statusConfig = computed(() => contentType.value?.status || null)
+const publishedValue = computed(
+  () => statusConfig.value?.publishedValue ?? 'published'
+)
+const draftValue = computed(
+  () =>
+    statusConfig.value?.default ??
+    statusConfig.value?.values.find(
+      (value) => value.value !== publishedValue.value
+    )?.value
+)
+const currentStatus = computed(
+  () => (item.value.status as string | undefined) ?? statusConfig.value?.default
+)
+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
+)
+
 // --- Save -------------------------------------------------------------------
 
 const toast = useToast()
 const saving = ref(false)
 const validationErrors = ref<ContentValidationError[]>([])
 
-function buildPayload(): Record<string, unknown> {
+function buildPayload(statusOverride?: string): Record<string, unknown> {
   const type = contentType.value
   if (!type) {
     return {}
@@ -115,17 +165,23 @@ function buildPayload(): Record<string, unknown> {
     }
   }
 
+  if (statusOverride !== undefined) {
+    payload.status = statusOverride
+  }
+
   return payload
 }
 
-async function onSave() {
+async function onSave(statusOverride?: string) {
   const type = contentType.value
   if (!type) {
     return
   }
 
-  const payload = buildPayload()
-  const errors = validateContentPayload(type, payload, { partial: editing.value })
+  const payload = buildPayload(statusOverride)
+  const errors = validateContentPayload(type, payload, {
+    partial: editing.value,
+  })
 
   if (errors.length > 0) {
     validationErrors.value = errors
@@ -143,8 +199,15 @@ async function onSave() {
       return
     }
 
+    const title =
+      statusOverride === publishedValue.value
+        ? 'Published'
+        : statusOverride === draftValue.value
+          ? 'Unpublished'
+          : 'Saved'
+
     toast.add({
-      title: 'Saved',
+      title,
       description: `${type.label} updated successfully.`,
       color: 'success',
     })
@@ -161,52 +224,231 @@ async function onSave() {
     saving.value = false
   }
 }
+
+// --- Delete -------------------------------------------------------------------
+
+const isDeleteModalOpen = ref(false)
+const deleting = ref(false)
+
+function openDeleteModal() {
+  isDeleteModalOpen.value = true
+}
+
+function closeDeleteModal() {
+  isDeleteModalOpen.value = false
+}
+
+async function confirmDelete() {
+  deleting.value = true
+
+  try {
+    await remove()
+    closeDeleteModal()
+    await navigateTo(basePath.value)
+  } catch {
+    toast.add({
+      title: 'Error',
+      description: 'An error occurred while removing.',
+      color: 'error',
+    })
+  } finally {
+    deleting.value = false
+  }
+}
+
+// --- Layout / aside -----------------------------------------------------------
+
+const layout = computed(() => contentType.value?.form?.layout ?? 'default')
+const showAside = computed(() => {
+  const configured = contentType.value?.form?.aside
+  if (configured === true || configured === false) {
+    return configured
+  }
+  return sideFields.value.length > 0
+})
+const asideCollapsedByDefault = computed(
+  () => contentType.value?.form?.asideCollapsed ?? layout.value === 'focus'
+)
+// Remember the open/closed state per content type across visits.
+const asideOpen = useCookie<boolean>(`pluto-content-aside-${props.type}`, {
+  default: () => !asideCollapsedByDefault.value,
+})
+
+function toggleAside() {
+  asideOpen.value = !asideOpen.value
+}
+
+// --- Registry content actions --------------------------------------------------
+
+const toolbarActions = usePlutoContentActions(props.type, 'toolbar')
+
+// Only rendered from the template inside the `v-if="contentType"` branch, so
+// `contentType.value` is always set by the time this is read.
+function buildActionContext(): PlutoContentActionContext {
+  return {
+    type: contentType.value as PlutoContentType,
+    item: item.value,
+    editing: editing.value,
+    saving: saving.value,
+    save: () => onSave(),
+    remove: () => confirmDelete(),
+  }
+}
+
+// No explicit `DropdownMenuItem` annotation. A consumer that links this
+// layer from source can resolve a second copy of `@nuxt/ui`. A named type
+// from one copy then fails to match the component from the other copy. An
+// inferred, structural type matches both.
+const unpublishDeleteItems = computed(() => [
+  [
+    ...(statusConfig.value && isPublished.value && canPublish.value
+      ? [
+          {
+            label: 'Unpublish',
+            icon: 'lucide:eye-off',
+            onSelect: () => onSave(draftValue.value),
+          },
+        ]
+      : []),
+    ...(editing.value && canDelete.value
+      ? [
+          {
+            label: 'Delete',
+            icon: 'lucide:trash',
+            color: 'error' as const,
+            onSelect: () => openDeleteModal(),
+          },
+        ]
+      : []),
+  ],
+])
 </script>
 
 <template>
-  <div v-if="contentType">
-    <AdminView>
-      <UAlert
-        v-if="validationErrors.length > 0"
-        color="error"
-        title="Please fix the following before saving"
+  <PlutoViewAdminPanel
+    v-if="contentType"
+    :width="layout === 'focus' ? 'full' : 'container'"
+  >
+    <template #toolbar>
+      <PlutoViewToolbar
+        :back-to="basePath"
+        :title="
+          layout === 'focus'
+            ? editing
+              ? `Edit ${contentType.label}`
+              : `New ${contentType.label}`
+            : undefined
+        "
       >
-        <template #description>
-          <ul class="list-disc pl-4">
-            <li v-for="fieldError in validationErrors" :key="fieldError.field">
-              {{ fieldError.message }}
-            </li>
-          </ul>
-        </template>
-      </UAlert>
-
-      <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-10">
-        <div class="flex flex-1 flex-col gap-6">
-          <h1 class="text-3xl font-bold lg:text-4xl">
-            {{ editing ? `Edit ${contentType.label}` : `New ${contentType.label}` }}
-          </h1>
+        <template #right>
+          <UBadge
+            v-if="statusConfig"
+            :color="isPublished ? 'success' : 'neutral'"
+            variant="subtle"
+          >
+            {{ statusLabel }}
+          </UBadge>
+
+          <template v-for="action in toolbarActions" :key="action.id">
+            <!-- prettier-ignore -->
+            <UButton
+              v-if="action.show?.(buildActionContext()) !== false"
+              :icon="action.icon"
+              :color="(action.color as ButtonProps['color'])"
+              :variant="(action.variant as ButtonProps['variant'])"
+              @click="action.onSelect(buildActionContext())"
+            >
+              {{ action.label }}
+            </UButton>
+          </template>
 
-          <PlutoContentField
-            v-for="field in mainFields"
-            :key="field.name"
-            :field="field"
-            :model-value="item[field.name]"
-            :disabled="!canWrite || saving"
-            @update:model-value="updateField(field, $event)"
-          />
-        </div>
+          <UButton
+            v-if="canWrite && (!statusConfig || !isPublished)"
+            :loading="saving"
+            icon="lucide:save"
+            variant="subtle"
+            @click="onSave()"
+          >
+            Save{{ statusConfig ? ' draft' : '' }}
+          </UButton>
 
-        <div class="flex w-full shrink-0 flex-col gap-6 lg:max-w-xs">
           <UButton
-            v-if="canWrite"
+            v-if="canWrite && statusConfig && isPublished"
             :loading="saving"
             icon="lucide:save"
-            class="justify-center"
-            @click="onSave"
+            @click="onSave()"
+          >
+            Update
+          </UButton>
+
+          <UButton
+            v-if="canPublish && statusConfig && !isPublished"
+            :loading="saving"
+            icon="lucide:upload"
+            @click="onSave(publishedValue)"
           >
-            Save
+            Publish
           </UButton>
 
+          <UDropdownMenu
+            v-if="
+              (editing && canDelete) ||
+              (statusConfig && isPublished && canPublish)
+            "
+            :items="unpublishDeleteItems"
+          >
+            <UButton
+              icon="lucide:ellipsis-vertical"
+              color="neutral"
+              variant="ghost"
+              square
+            />
+          </UDropdownMenu>
+
+          <UButton
+            v-if="showAside"
+            :icon="
+              asideOpen ? 'lucide:panel-right-close' : 'lucide:panel-right-open'
+            "
+            color="neutral"
+            variant="ghost"
+            square
+            @click="toggleAside"
+          />
+        </template>
+      </PlutoViewToolbar>
+    </template>
+
+    <UAlert
+      v-if="validationErrors.length > 0"
+      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 }}
+          </li>
+        </ul>
+      </template>
+    </UAlert>
+
+    <h1 v-if="layout !== 'focus'" class="text-3xl font-bold lg:text-4xl">
+      {{ editing ? `Edit ${contentType.label}` : `New ${contentType.label}` }}
+    </h1>
+
+    <PlutoContentField
+      v-for="field in mainFields"
+      :key="field.name"
+      :field="field"
+      :model-value="item[field.name]"
+      :disabled="!canWrite || saving"
+      @update:model-value="updateField(field, $event)"
+    />
+
+    <template v-if="showAside" #aside>
+      <PlutoViewAside v-model:open="asideOpen" title="Settings">
+        <div class="flex flex-col gap-6">
           <PlutoContentField
             v-for="field in sideFields"
             :key="field.name"
@@ -216,15 +458,47 @@ async function onSave() {
             @update:model-value="updateField(field, $event)"
           />
         </div>
-      </div>
-    </AdminView>
-  </div>
+      </PlutoViewAside>
+    </template>
+  </PlutoViewAdminPanel>
 
-  <AdminView v-else>
+  <PlutoViewAdminPanel v-else>
     <UAlert
       :description="`No content type named &quot;${type}&quot; is registered.`"
       color="error"
       title="Content type not found"
     />
-  </AdminView>
+  </PlutoViewAdminPanel>
+
+  <Modal v-model="isDeleteModalOpen" :custom-size="480">
+    <ModalHeader @close="closeDeleteModal">
+      Remove {{ contentType?.label }}
+    </ModalHeader>
+
+    <ModalContent>
+      <p>Do you really want to remove this item?</p>
+    </ModalContent>
+
+    <ModalFooter>
+      <div class="flex items-center gap-4">
+        <UButton
+          icon="lucide:x"
+          variant="ghost"
+          color="neutral"
+          @click="closeDeleteModal"
+        >
+          Cancel
+        </UButton>
+
+        <UButton
+          :loading="deleting"
+          icon="lucide:trash"
+          color="error"
+          @click="confirmDelete"
+        >
+          Remove
+        </UButton>
+      </div>
+    </ModalFooter>
+  </Modal>
 </template>

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

@@ -13,7 +13,9 @@ if (!contentType.value) {
   // The generated page (`app/pages/admin/content/[type]/index.vue`) already
   // resolves the type and 404s before this component ever mounts, so this
   // should not normally happen.
-  console.error(`PlutoContentList: content type "${props.type}" was not found in the registry.`)
+  console.error(
+    `PlutoContentList: content type "${props.type}" was not found in the registry.`
+  )
 }
 
 const { can } = usePlutoPermissions()
@@ -21,19 +23,27 @@ const { can } = usePlutoPermissions()
 // "No capability declared" means the operation is open to anyone who can
 // reach this page — never call can('') as a stand-in for that.
 const canWrite = computed(
-  () => !contentType.value?.capabilities?.write || can(contentType.value.capabilities.write)
+  () =>
+    !contentType.value?.capabilities?.write ||
+    can(contentType.value.capabilities.write)
 )
 const canDelete = computed(
-  () => !contentType.value?.capabilities?.delete || can(contentType.value.capabilities.delete)
+  () =>
+    !contentType.value?.capabilities?.delete ||
+    can(contentType.value.capabilities.delete)
 )
 
-const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+const basePath = computed(
+  () => contentType.value?.basePath ?? `/admin/content/${props.type}`
+)
 
 // newPath/editPath exist so an already-deployed layer's URLs never have
 // to change to adopt this component — see the doc comments on
 // PlutoContentType.newPath/editPath for why a single basePath cannot
 // always express both.
-const newPath = computed(() => contentType.value?.newPath ?? `${basePath.value}/new`)
+const newPath = computed(
+  () => contentType.value?.newPath ?? `${basePath.value}/new`
+)
 function editPath(id: string | number) {
   return contentType.value?.editPath?.(id) ?? `${basePath.value}/${id}`
 }
@@ -47,7 +57,10 @@ const listFields = computed(() =>
 )
 
 const columns = computed<TableColumn<PlutoContentItem>[]>(() => [
-  ...listFields.value.map((field) => ({ accessorKey: field.name, header: field.label })),
+  ...listFields.value.map((field) => ({
+    accessorKey: field.name,
+    header: field.label,
+  })),
   { id: 'actions', header: '' },
 ])
 
@@ -75,30 +88,10 @@ async function confirmDelete() {
 </script>
 
 <template>
-  <div v-if="contentType">
-    <Modal v-model="isDeleteModalOpen" :custom-size="480">
-      <ModalHeader @close="closeDeleteModal">Remove item</ModalHeader>
-
-      <ModalContent>
-        <p>Do you really want to remove this item?</p>
-      </ModalContent>
-
-      <ModalFooter>
-        <div class="flex items-center gap-4">
-          <UButton icon="lucide:x" variant="ghost" color="neutral" @click="closeDeleteModal">
-            Cancel
-          </UButton>
-
-          <UButton icon="lucide:trash" color="error" @click="confirmDelete">Remove</UButton>
-        </div>
-      </ModalFooter>
-    </Modal>
-
-    <AdminView>
-      <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-        <hgroup class="flex items-center justify-between gap-x-3 lg:justify-start">
-          <h1 class="text-3xl font-bold lg:text-4xl">{{ contentType.labelPlural }}</h1>
-
+  <PlutoViewAdminPanel v-if="contentType">
+    <template #toolbar>
+      <PlutoViewToolbar :title="contentType.labelPlural">
+        <template #trailing>
           <UButton
             :loading="pending"
             icon="lucide:refresh-ccw"
@@ -107,100 +100,125 @@ async function confirmDelete() {
             square
             @click="refresh()"
           />
-        </hgroup>
+        </template>
 
-        <div v-if="canWrite" class="flex lg:shrink-0">
-          <UButton
-            :to="newPath"
-            icon="lucide:plus"
-            as="NuxtLink"
-            class="flex-1 justify-center lg:flex-none"
-          >
+        <template v-if="canWrite" #right>
+          <UButton :to="newPath" icon="lucide:plus" as="NuxtLink">
             Add {{ contentType.labelPlural }}
           </UButton>
-        </div>
-      </div>
+        </template>
+      </PlutoViewToolbar>
+    </template>
+
+    <div class="grid gap-3 lg:hidden">
+      <UCard v-for="item in items" :key="item.id">
+        <div class="flex flex-col gap-4">
+          <div class="min-w-0">
+            <NuxtLink
+              :to="editPath(item.id)"
+              class="block truncate text-lg font-semibold hover:underline"
+            >
+              {{ item[contentType.titleField] }}
+            </NuxtLink>
+          </div>
 
-      <div class="grid gap-3 lg:hidden">
-        <UCard v-for="item in items" :key="item.id">
-          <div class="flex flex-col gap-4">
-            <div class="min-w-0">
-              <NuxtLink
-                :to="editPath(item.id)"
-                class="block truncate text-lg font-semibold hover:underline"
-              >
-                {{ item[contentType.titleField] }}
-              </NuxtLink>
+          <dl class="grid grid-cols-2 gap-3 text-sm">
+            <div v-for="field in listFields" :key="field.name">
+              <dt class="text-muted">{{ field.label }}</dt>
+              <dd class="font-medium">{{ item[field.name] }}</dd>
             </div>
-
-            <dl class="grid grid-cols-2 gap-3 text-sm">
-              <div v-for="field in listFields" :key="field.name">
-                <dt class="text-muted">{{ field.label }}</dt>
-                <dd class="font-medium">{{ item[field.name] }}</dd>
-              </div>
-            </dl>
-
-            <div class="flex gap-2 border-t border-default pt-3">
-              <UButton
+          </dl>
+
+          <div class="border-default flex gap-2 border-t pt-3">
+            <UButton
+              v-if="canWrite"
+              :to="editPath(item.id)"
+              icon="lucide:pen-line"
+              color="neutral"
+              variant="soft"
+              class="flex-1 justify-center"
+            >
+              Edit
+            </UButton>
+
+            <UButton
+              v-if="canDelete"
+              icon="lucide:trash"
+              color="error"
+              variant="soft"
+              class="flex-1 justify-center"
+              @click="openDeleteModal(item.id)"
+            >
+              Remove
+            </UButton>
+          </div>
+        </div>
+      </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 }">
+            <div class="flex justify-end gap-3">
+              <NuxtLink
                 v-if="canWrite"
-                :to="editPath(item.id)"
-                icon="lucide:pen-line"
-                color="neutral"
-                variant="soft"
-                class="flex-1 justify-center"
+                :to="editPath(row.original.id)"
+                class="text-info px-0 py-0.5 hover:underline"
               >
                 Edit
-              </UButton>
+              </NuxtLink>
 
-              <UButton
+              <button
                 v-if="canDelete"
-                icon="lucide:trash"
-                color="error"
-                variant="soft"
-                class="flex-1 justify-center"
-                @click="openDeleteModal(item.id)"
+                type="button"
+                class="text-error cursor-pointer px-0 py-0.5 hover:underline"
+                @click="openDeleteModal(row.original.id)"
               >
                 Remove
-              </UButton>
+              </button>
             </div>
-          </div>
-        </UCard>
+          </template>
+        </UTable>
       </div>
+    </UCard>
+  </PlutoViewAdminPanel>
 
-      <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 }">
-              <div class="flex justify-end gap-3">
-                <NuxtLink
-                  v-if="canWrite"
-                  :to="editPath(row.original.id)"
-                  class="text-info px-0 py-0.5 hover:underline"
-                >
-                  Edit
-                </NuxtLink>
-
-                <button
-                  v-if="canDelete"
-                  type="button"
-                  class="text-error cursor-pointer px-0 py-0.5 hover:underline"
-                  @click="openDeleteModal(row.original.id)"
-                >
-                  Remove
-                </button>
-              </div>
-            </template>
-          </UTable>
-        </div>
-      </UCard>
-    </AdminView>
-  </div>
-
-  <AdminView v-else>
+  <PlutoViewAdminPanel v-else>
     <UAlert
       :description="`No content type named &quot;${type}&quot; is registered.`"
       color="error"
       title="Content type not found"
     />
-  </AdminView>
+  </PlutoViewAdminPanel>
+
+  <Modal v-model="isDeleteModalOpen" :custom-size="480">
+    <ModalHeader @close="closeDeleteModal">Remove item</ModalHeader>
+
+    <ModalContent>
+      <p>Do you really want to remove this item?</p>
+    </ModalContent>
+
+    <ModalFooter>
+      <div class="flex items-center gap-4">
+        <UButton
+          icon="lucide:x"
+          variant="ghost"
+          color="neutral"
+          @click="closeDeleteModal"
+        >
+          Cancel
+        </UButton>
+
+        <UButton icon="lucide:trash" color="error" @click="confirmDelete">
+          Remove
+        </UButton>
+      </div>
+    </ModalFooter>
+  </Modal>
 </template>

package/app/components/Pluto/Navbar/PlutoNavbarAdmin.vue

@@ -2,7 +2,7 @@
 
 <template>
   <nav
-    class="light:bg-white light:border-black/10 font-outfit sticky top-0 z-50 h-14 shrink-0 border-b lg:h-10 dark:border-white/5 dark:bg-black dark:text-white"
+    class="light:bg-white light:border-black/10 font-outfit fixed inset-0 z-50 h-(--ui-header-height) shrink-0 border-b dark:border-white/5 dark:bg-black dark:text-white"
   >
     <slot />
   </nav>

package/app/components/Pluto/View/PlutoViewAdminPanel.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** Drop the max-width container in the main region. Default 'container'. */
+    width?: 'container' | 'full'
+  }>(),
+  {
+    width: 'container',
+  }
+)
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col overflow-hidden">
+    <div class="shrink-0">
+      <slot name="toolbar" />
+    </div>
+
+    <div class="flex flex-1 min-h-0 overflow-hidden">
+      <main class="flex-1 min-h-0 overflow-y-auto">
+        <!--
+          'container' matches AdminView's own padding/gap classes, so a view
+          moving from AdminView to this panel looks the same. 'full' adds
+          none — a focus-layout consumer (e.g. a rich text editor) supplies
+          its own padding instead.
+        -->
+        <UContainer
+          v-if="width === 'container'"
+          class="flex max-w-300 flex-col gap-y-6 px-4 py-6 sm:px-6 lg:gap-y-8 lg:px-8 lg:py-10"
+        >
+          <slot />
+        </UContainer>
+        <slot v-else />
+      </main>
+
+      <div class="shrink-0">
+        <slot name="aside" />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/Pluto/View/PlutoViewAside.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// Do NOT use UDashboardSidebar here. Nuxt UI's UDashboardSidebar listens to
+// a GLOBAL `dashboard:sidebar:toggle` runtime hook, not a per-instance one.
+// A second instance of it (this aside) would open and close in lockstep
+// with the app's own LEFT sidebar from admin.vue. This component is a
+// hand-built stand-in instead: a plain `<aside>` on desktop, a `USlideover`
+// on mobile, both bound to the same `open` model.
+withDefaults(
+  defineProps<{
+    title?: string
+    /** Desktop width, in px. Default 320. */
+    width?: number
+  }>(),
+  {
+    width: 320,
+  }
+)
+
+const open = defineModel<boolean>('open', { default: false })
+
+function close() {
+  open.value = false
+}
+
+// Open the slideover on mobile only. A `lg:hidden` class alone is not
+// enough: an open slideover is a modal dialog, so it disables pointer
+// events on the rest of the page even while it is hidden. On desktop, the
+// page then stops taking clicks as soon as the aside opens. It also mounts
+// the slot a second time.
+const isDesktop = useMediaQuery('(min-width: 64rem)')
+const slideoverOpen = computed({
+  get: () => open.value && !isDesktop.value,
+  set: (value: boolean) => {
+    open.value = value
+  },
+})
+</script>
+
+<template>
+  <aside
+    v-if="open"
+    :style="{ width: `${width}px` }"
+    class="border-default hidden h-full shrink-0 flex-col border-s lg:flex"
+  >
+    <div class="border-default flex h-12 shrink-0 items-center justify-between gap-1.5 border-b px-4">
+      <h2 class="text-highlighted truncate text-sm font-semibold">{{ title }}</h2>
+      <UButton
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        square
+        @click="close"
+      />
+    </div>
+    <div class="min-h-0 flex-1 overflow-y-auto p-4">
+      <slot />
+    </div>
+  </aside>
+
+  <USlideover
+    v-model:open="slideoverOpen"
+    :title="title"
+    side="right"
+  >
+    <template #body>
+      <slot />
+    </template>
+  </USlideover>
+</template>

package/app/components/Pluto/View/PlutoViewToolbar.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  icon?: string
+  /** Path for a back button, rendered before the title. */
+  backTo?: string
+}>()
+
+defineSlots<{
+  left?: () => unknown
+  title?: () => unknown
+  default?: () => unknown
+  right?: () => unknown
+  trailing?: () => unknown
+}>()
+</script>
+
+<template>
+  <!--
+    `:toggle="false"` is load-bearing. UDashboardNavbar's default toggle
+    button calls Nuxt UI's global `dashboard:sidebar:toggle` hook, which
+    controls the app-level LEFT sidebar from admin.vue. This is a SECOND,
+    page-local navbar — its own toggle would open and close the wrong
+    sidebar, so it must never render one.
+  -->
+  <UDashboardNavbar
+    :title="title"
+    :icon="icon"
+    :toggle="false"
+    :ui="{ root: 'h-12 border-muted' }"
+  >
+    <template v-if="$slots.left" #left>
+      <slot name="left" />
+    </template>
+
+    <template v-if="backTo || icon" #leading>
+      <UButton
+        v-if="backTo"
+        :to="backTo"
+        icon="i-lucide-arrow-left"
+        color="neutral"
+        variant="ghost"
+        square
+      />
+      <UIcon v-if="icon" :name="icon" class="me-1.5 size-5 shrink-0 self-center" />
+    </template>
+
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
+
+    <template v-if="$slots.default" #default>
+      <slot />
+    </template>
+
+    <template v-if="$slots.right" #right>
+      <slot name="right" />
+    </template>
+
+    <template v-if="$slots.trailing" #trailing>
+      <slot name="trailing" />
+    </template>
+  </UDashboardNavbar>
+</template>

package/app/composables/pluto-content-actions.ts

@@ -0,0 +1,17 @@
+/**
+ * The `PlutoContentAction` entries that apply to one content type, at one
+ * placement. Matches an entry whose `contentType` is `typeName` or `'*'`,
+ * the same matching rule `usePlutoContentFieldWidget` uses for field type.
+ * `placement` defaults to 'toolbar', matching `PlutoContentAction.placement`.
+ */
+export function usePlutoContentActions(typeName: string, placement: 'toolbar' | 'aside' = 'toolbar') {
+  const registry = usePlutoRegistry()
+
+  return computed(() =>
+    registry.contentActions.list.value.filter(
+      (action) =>
+        (action.contentType === typeName || action.contentType === '*') &&
+        (action.placement ?? 'toolbar') === placement
+    )
+  )
+}

package/app/composables/pluto-extension.ts

@@ -28,5 +28,6 @@ export function definePlutoExtension(definition: PlutoExtension): void {
   )
   registry.contentTypes.set(definition.id, definition.contentTypes ?? [])
   registry.contentFieldWidgets.set(definition.id, definition.contentFieldWidgets ?? [])
+  registry.contentActions.set(definition.id, definition.contentActions ?? [])
   registry.mediaAdapters.set(definition.id, definition.mediaAdapters ?? [])
 }

package/app/composables/pluto-registry.ts

@@ -25,6 +25,7 @@ export function usePlutoRegistry(): PlutoRegistry {
       permissionsDrivers: createOwnedRegistry<PlutoPermissionsDriver>(),
       contentTypes: createOwnedRegistry<PlutoContentTypeEntry>(),
       contentFieldWidgets: createOwnedRegistry<PlutoContentFieldWidget>(),
+      contentActions: createOwnedRegistry<PlutoContentAction>(),
       mediaAdapters: createOwnedRegistry<PlutoMediaAdapterEntry>(),
     }
   }

package/app/layouts/admin.vue

@@ -28,76 +28,49 @@ function toMenuItem(item: PlutoNavItem): SidebarMenuItem {
 const { items: navItems } = usePlutoAdminNav()
 const menu = computed<SidebarMenuItem[]>(() => navItems.value.map(toMenuItem))
 
-const route = useRoute()
+// This key is a cross-repo contract: `supabase`'s own mobile navbar
+// (`app/components/navbar/NavbarAdmin.vue`) writes to this exact state key
+// to open the sidebar from its own hamburger button. Keep the name as-is.
 const isSidebarOpen = useState<boolean>('pluto-admin-sidebar-open', () => false)
-
-function closeSidebar() {
-  isSidebarOpen.value = false
-}
-
-watch(
-  () => route.fullPath,
-  closeSidebar
-)
 </script>
 
 <template>
-  <div
-    class="dark:bg-admin-content light:bg-white font-outfit flex h-full min-h-0 grow flex-col overflow-hidden"
+  <UDashboardGroup
+    :class="(base: string) => base.replace('inset-0', 'inset-x-0 bottom-0 top-(--ui-header-height)')"
+    storage="cookie"
+    storage-key="pluto-admin"
+    unit="rem"
   >
-    <div class="relative flex min-h-0 flex-1 items-stretch">
-      <Transition name="sidebar-fade">
-        <button
-          v-if="isSidebarOpen"
-          type="button"
-          aria-label="Close navigation"
-          class="fixed inset-x-0 top-14 bottom-0 z-40 bg-black/50 backdrop-blur-xs lg:hidden"
-          @click="closeSidebar"
-        />
-      </Transition>
-
-      <aside
-        :class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full'"
-        class="dark:bg-admin-sidebar light:bg-zinc-100 border-default fixed inset-y-14 left-0 z-50 flex w-[min(18rem,85vw)] shrink-0 flex-col border-r px-3 py-4 shadow-2xl transition-transform duration-200 lg:static lg:inset-auto lg:z-auto lg:w-64 lg:translate-x-0 lg:shadow-none"
-      >
-        <div class="mb-3 flex items-center justify-between px-2 lg:hidden">
-          <span class="text-muted text-sm font-semibold">Navigation</span>
-          <UButton
-            icon="lucide:x"
-            color="neutral"
-            variant="ghost"
-            aria-label="Close navigation"
-            square
-            @click="closeSidebar"
-          />
-        </div>
-
-        <UNavigationMenu
-          :items="menu"
-          :ui="{
-            link: 'text-base gap-x-3 font-normal',
-          }"
-          orientation="vertical"
-          class="data-[orientation=vertical]:w-full"
-          highlight
-        />
-      </aside>
+    <UDashboardSidebar
+      id="admin"
+      v-model:open="isSidebarOpen"
+      :default-size="16"
+      :min-size="12"
+      :max-size="24"
+      :ui="{
+        root: 'min-h-0 dark:bg-admin-sidebar light:bg-zinc-100',
+        content: 'lg:hidden w-[min(18rem,85vw)]',
+      }"
+      resizable
+    >
+      <UNavigationMenu
+        :items="menu"
+        :ui="{ link: 'text-base gap-x-3 font-normal' }"
+        orientation="vertical"
+        class="data-[orientation=vertical]:w-full"
+        highlight
+      />
+    </UDashboardSidebar>
 
-      <div class="min-w-0 grow overflow-x-hidden overflow-y-auto">
+    <UDashboardPanel
+      :ui="{
+        root: 'min-h-0 dark:bg-admin-content light:bg-white font-outfit',
+        body: 'p-0 gap-0 overflow-x-hidden',
+      }"
+    >
+      <template #body>
         <slot />
-      </div>
-    </div>
-  </div>
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
 </template>
-
-<style scoped>
-.sidebar-fade-enter-active,
-.sidebar-fade-leave-active {
-  transition: opacity 200ms ease;
-}
-
-.sidebar-fade-enter-from,
-.sidebar-fade-leave-to {
-  opacity: 0;
-}
-</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "The layerable CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -42,31 +42,31 @@
     "vue-demi"
   ],
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.116",
-    "@iconify-json/simple-icons": "^1.2.89",
-    "@internationalized/date": "^3.12.2",
-    "@nuxt/eslint": "^1.16.0",
-    "@nuxt/ui": "^4.9.0",
+    "@iconify-json/lucide": "^1.2.144",
+    "@iconify-json/simple-icons": "^1.2.100",
+    "@internationalized/date": "^3.12.4",
+    "@nuxt/eslint": "^1.17.0",
+    "@nuxt/ui": "^4.12.0",
     "@plutocms/utils": "^0.2.1",
-    "@vueuse/nuxt": "^14.3.0",
-    "reka-ui": "^2.10.1",
-    "tailwind-merge": "^3.6.0"
+    "@vueuse/nuxt": "^14.4.0",
+    "reka-ui": "^2.11.0",
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^9.1.0",
-    "@tailwindcss/vite": "^4.2.1",
-    "@types/bun": "^1.3.14",
-    "eslint": "^10.6.0",
-    "mysql2": "^3.22.6",
-    "nuxt": "^4.3.1",
-    "prettier": "^3.9.4",
-    "prettier-plugin-tailwindcss": "^0.8.0",
-    "tailwindcss": "^4.3.2",
+    "@antfu/eslint-config": "^9.5.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/bun": "^1.4.3",
+    "eslint": "^10.12.0",
+    "mysql2": "^3.24.6",
+    "nuxt": "^4.6.1",
+    "prettier": "^3.9.10",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
-    "vitest": "^5.0.0",
-    "vue": "^3.5.39",
-    "vue-router": "^5.1.0",
-    "vue-tsc": "^3.3.7"
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0",
+    "vue-tsc": "^3.3.13"
   },
   "overrides": {
     "eslint-flat-config-utils": "^3.2.0"

package/shared/types/content.ts

@@ -110,6 +110,8 @@ export interface PlutoContentTypeCapabilities {
   read?: string
   write?: string
   delete?: string
+  /** Capability required to publish. Falls back to `write` when unset. */
+  publish?: string
 }
 
 export interface PlutoContentStatus {
@@ -209,6 +211,17 @@ export interface PlutoContentType {
   editPath?: (id: string | number) => string
   navOrder?: number
   i18n?: PlutoContentI18n
+  /** Layout options for the generic content form (a later wave). */
+  form?: {
+    /** 'default' = heading + container. 'focus' = minimal chrome for a writing surface. */
+    layout?: 'default' | 'focus'
+    /** true = always show. false = never. 'auto' (default) = show when any field has region 'side'. */
+    aside?: boolean | 'auto'
+    /** Aside starts closed. Default false, or true when layout is 'focus'. */
+    asideCollapsed?: boolean
+    /** Drop the max-width container in the main region. Default false, or true when layout is 'focus'. */
+    width?: 'container' | 'full'
+  }
   /**
    * Server-only lifecycle hooks, run by the generic write handlers
    * (`server/utils/pluto-content-handlers.ts`) after the adapter call

package/shared/types/registry.ts

@@ -113,6 +113,34 @@ export interface PlutoMediaAdapterEntry extends PlutoEntry {
   adapter: PlutoMediaAdapter
 }
 
+/** State passed to a `PlutoContentAction`'s `show` test and `onSelect` handler. */
+export interface PlutoContentActionContext {
+  type: PlutoContentType
+  item: Record<string, unknown>
+  editing: boolean
+  saving: boolean
+  save: () => Promise<void>
+  remove: () => Promise<void>
+}
+
+/**
+ * A button a layer adds to the generic content form (a later wave). Matched
+ * against a content type the same way `PlutoContentFieldWidget` matches a
+ * field: by exact name, or by `'*'` for every content type.
+ */
+export interface PlutoContentAction extends PlutoEntry {
+  /** Content type `name`, or '*' for every content type. */
+  contentType: string | '*'
+  label: string
+  icon?: string
+  color?: string
+  variant?: string
+  /** Where the action renders. Default 'toolbar'. */
+  placement?: 'toolbar' | 'aside'
+  show?: (ctx: PlutoContentActionContext) => boolean
+  onSelect: (ctx: PlutoContentActionContext) => void | Promise<void>
+}
+
 export interface PlutoExtension {
   /** Layer name. Use the package's $meta.name, e.g. 'supabase-blog'. */
   id: string
@@ -127,6 +155,7 @@ export interface PlutoExtension {
   permissionsDriver?: PlutoPermissionsDriver
   contentTypes?: PlutoContentTypeEntry[]
   contentFieldWidgets?: PlutoContentFieldWidget[]
+  contentActions?: PlutoContentAction[]
   mediaAdapters?: PlutoMediaAdapterEntry[]
 }
 
@@ -154,5 +183,6 @@ export interface PlutoRegistry {
   permissionsDrivers: PlutoRegistryBucket<PlutoPermissionsDriver>
   contentTypes: PlutoRegistryBucket<PlutoContentTypeEntry>
   contentFieldWidgets: PlutoRegistryBucket<PlutoContentFieldWidget>
+  contentActions: PlutoRegistryBucket<PlutoContentAction>
   mediaAdapters: PlutoRegistryBucket<PlutoMediaAdapterEntry>
 }

package/shared/utils/content-map.ts

@@ -43,6 +43,14 @@ export function mapFieldsToColumns(
  * `mapFieldsToColumns` — it has no column to read back from `row` in the
  * first place, so this only guards against a stray column that happens to
  * share the field's name.
+ *
+ * When `type.status` is set, this also maps the status column
+ * (`type.status.column`, default `'status'`) to `item.status`, unless a
+ * declared field already set `item.status` above. This mirrors the write
+ * side: `@plutocms/supabase`'s `content-adapter.ts` already writes the
+ * status column for a content type with workflow enabled, even when no
+ * field named `status` is declared. Without this, a generic list/form
+ * read back a row with no `status` key at all.
  */
 export function mapColumnsToFields(
   type: PlutoContentType,
@@ -61,5 +69,12 @@ export function mapColumnsToFields(
     }
   }
 
+  if (type.status) {
+    const statusColumn = type.status.column ?? 'status'
+    if (!Object.hasOwn(item, 'status') && Object.hasOwn(row, statusColumn)) {
+      item.status = row[statusColumn]
+    }
+  }
+
   return item as PlutoContentItem
 }