@plutocms/pluto 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Changelog
 
 
+## [0.8.1](https://github.com/plutocms/pluto/compare/v0.8.0...v0.8.1) (2026-09-13)
+
+
+### Bug Fixes
+
+* **dashboard:** move PlutoDashboardWidgets out of a mismatched subfolder ([#137](https://github.com/plutocms/pluto/issues/137)) ([bd4d3bf](https://github.com/plutocms/pluto/commit/bd4d3bfece1e9ac6680595ea4c6c471b50370bd2))
+
+## [0.8.0](https://github.com/plutocms/pluto/compare/v0.7.0...v0.8.0) (2026-09-13)
+
+
+### Features
+
+* **content:** add generated admin UI for content model (wave 3) ([#135](https://github.com/plutocms/pluto/issues/135)) ([b08c5c2](https://github.com/plutocms/pluto/commit/b08c5c28f58380c805d527c1f7a7c9d194fb08f9))
+
 ## [0.7.0](https://github.com/plutocms/pluto/compare/v0.6.0...v0.7.0) (2026-09-12)
 
 

package/FEATURES.md

@@ -14,6 +14,8 @@ policies shared by every project here.
   permissions driver. @.claude/skills/permissions/SKILL.md
 - Content model: a typed content-type contract (`defineContentType`, field types, payload
   validation, field-to-column mapping) and a media-adapter contract, with registry wiring and
-  consumer composables, plus a server-side content registry and generic list/get/create/update/
-  delete routes backed by a `PlutoContentAdapter` a backend layer implements. No real adapter or
-  generated UI yet. @.claude/skills/content-model/SKILL.md
+  consumer composables, a server-side content registry and generic list/get/create/update/
+  delete routes backed by a `PlutoContentAdapter` a backend layer implements, and a generated
+  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

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// Dispatches to whichever widget is registered for `field`, and re-emits
+// `update:modelValue` unchanged. Never needs to know which concrete widget
+// it dispatched to — every widget shares the same field/modelValue/disabled
+// contract (see the content-model skill).
+const props = defineProps<{
+  field: PlutoField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: unknown]
+}>()
+
+const widget = usePlutoContentFieldWidget(props.field)
+</script>
+
+<template>
+  <component
+    :is="widget"
+    v-if="widget"
+    :field="field"
+    :model-value="modelValue"
+    :disabled="disabled"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+
+  <UFormField v-else :label="field.label">
+    <p class="text-muted text-sm">
+      No widget registered for field type "{{ field.type }}".
+    </p>
+  </UFormField>
+</template>

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

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** A content type's `name` (not a registry entry id) — see `usePlutoContentTypes`. */
+  type: string
+  /** Present in edit mode. Absent in "new entry" mode. */
+  id?: string | number
+}>()
+
+const { byName } = usePlutoContentTypes()
+const contentType = computed(() => byName(props.type))
+
+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.`)
+}
+
+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)
+)
+
+const editing = computed(() => props.id !== undefined)
+const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+
+const { item, save } = usePlutoContentItem(props.type, () => props.id)
+
+function sortedFields(region: 'main' | 'side') {
+  return computed(() =>
+    (contentType.value?.fields ?? [])
+      .filter((field) => field.inForm !== false && (field.region ?? 'main') === region)
+      .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+  )
+}
+
+const mainFields = sortedFields('main')
+const sideFields = sortedFields('side')
+
+// --- Slug auto-derivation, with the PostForm.vue bug fixed -----------------
+//
+// PostForm.vue re-derives its slug from the title on every keystroke, with
+// no gate at all — including while editing an already-published,
+// already-shared post, silently changing a live URL. Auto-derivation here
+// stops the moment either:
+//
+// 1. The form is in edit mode (`editing` is true) — an existing entry's
+//    slug is presumed already meaningful, and never auto-changes without
+//    the user directly touching the slug field.
+// 2. The user has typed into the slug field directly, even while creating
+//    a new entry — tracked by `slugTouched`, flipped by `updateField` below
+//    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')
+)
+
+function slugify(value: string): string {
+  return value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+watch(
+  () => {
+    const from = slugField.value?.from
+    return from ? item.value[from] : undefined
+  },
+  (value) => {
+    if (!slugField.value || editing.value || slugTouched.value) {
+      return
+    }
+
+    item.value[slugField.value.name] = slugify(String(value ?? ''))
+  }
+)
+
+function updateField(field: PlutoField, value: unknown) {
+  if (field.type === 'slug') {
+    slugTouched.value = true
+  }
+
+  item.value[field.name] = value
+}
+
+// --- Save -------------------------------------------------------------------
+
+const toast = useToast()
+const saving = ref(false)
+const validationErrors = ref<ContentValidationError[]>([])
+
+function buildPayload(): Record<string, unknown> {
+  const type = contentType.value
+  if (!type) {
+    return {}
+  }
+
+  const payload: Record<string, unknown> = {}
+  for (const field of type.fields) {
+    if (Object.hasOwn(item.value, field.name)) {
+      payload[field.name] = item.value[field.name]
+    }
+  }
+
+  return payload
+}
+
+async function onSave() {
+  const type = contentType.value
+  if (!type) {
+    return
+  }
+
+  const payload = buildPayload()
+  const errors = validateContentPayload(type, payload, { partial: editing.value })
+
+  if (errors.length > 0) {
+    validationErrors.value = errors
+    return
+  }
+
+  validationErrors.value = []
+  saving.value = true
+
+  try {
+    const saved = await save(payload)
+
+    if (!editing.value) {
+      await navigateTo(`${basePath.value}/${saved.id}`)
+      return
+    }
+
+    toast.add({
+      title: 'Saved',
+      description: `${type.label} updated successfully.`,
+      color: 'success',
+    })
+  } catch {
+    // A raced permissions check, or any other server-side rejection
+    // (a 403 included), surfaces here rather than as an unhandled
+    // rejection.
+    toast.add({
+      title: 'Error',
+      description: 'An error occurred while saving.',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div v-if="contentType">
+    <AdminView>
+      <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>
+
+      <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>
+
+          <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>
+
+        <div class="flex w-full shrink-0 flex-col gap-6 lg:max-w-xs">
+          <UButton
+            v-if="canWrite"
+            :loading="saving"
+            icon="lucide:save"
+            class="justify-center"
+            @click="onSave"
+          >
+            Save
+          </UButton>
+
+          <PlutoContentField
+            v-for="field in sideFields"
+            :key="field.name"
+            :field="field"
+            :model-value="item[field.name]"
+            :disabled="!canWrite || saving"
+            @update:model-value="updateField(field, $event)"
+          />
+        </div>
+      </div>
+    </AdminView>
+  </div>
+
+  <AdminView v-else>
+    <UAlert
+      :description="`No content type named &quot;${type}&quot; is registered.`"
+      color="error"
+      title="Content type not found"
+    />
+  </AdminView>
+</template>

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

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+const props = defineProps<{
+  /** A content type's `name` (not a registry entry id) — see `usePlutoContentTypes`. */
+  type: string
+}>()
+
+const { byName } = usePlutoContentTypes()
+const contentType = computed(() => byName(props.type))
+
+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.`)
+}
+
+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)
+)
+const canDelete = computed(
+  () => !contentType.value?.capabilities?.delete || can(contentType.value.capabilities.delete)
+)
+
+const basePath = computed(() => contentType.value?.basePath ?? `/admin/content/${props.type}`)
+
+const { items, pending, refresh, remove } = usePlutoContentList(props.type)
+
+const listFields = computed(() =>
+  (contentType.value?.fields ?? [])
+    .filter((field) => field.inList)
+    .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+)
+
+const columns = computed<TableColumn<PlutoContentItem>[]>(() => [
+  ...listFields.value.map((field) => ({ accessorKey: field.name, header: field.label })),
+  { id: 'actions', header: '' },
+])
+
+const pendingDeleteId = ref<string | number | null>(null)
+const isDeleteModalOpen = ref(false)
+
+function openDeleteModal(id: string | number) {
+  pendingDeleteId.value = id
+  isDeleteModalOpen.value = true
+}
+
+function closeDeleteModal() {
+  pendingDeleteId.value = null
+  isDeleteModalOpen.value = false
+}
+
+async function confirmDelete() {
+  if (pendingDeleteId.value === null) {
+    return
+  }
+
+  await remove(pendingDeleteId.value)
+  closeDeleteModal()
+}
+</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>
+
+          <UButton
+            :loading="pending"
+            icon="lucide:refresh-ccw"
+            variant="ghost"
+            title="Refresh"
+            square
+            @click="refresh()"
+          />
+        </hgroup>
+
+        <div v-if="canWrite" class="flex lg:shrink-0">
+          <UButton
+            :to="`${basePath}/new`"
+            icon="lucide:plus"
+            as="NuxtLink"
+            class="flex-1 justify-center lg:flex-none"
+          >
+            Add {{ contentType.labelPlural }}
+          </UButton>
+        </div>
+      </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="`${basePath}/${item.id}`"
+                class="block truncate text-lg font-semibold hover:underline"
+              >
+                {{ item[contentType.titleField] }}
+              </NuxtLink>
+            </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
+                v-if="canWrite"
+                :to="`${basePath}/${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="`${basePath}/${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>
+    <UAlert
+      :description="`No content type named &quot;${type}&quot; is registered.`"
+      color="error"
+      title="Content type not found"
+    />
+  </AdminView>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldBoolean.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{
+  field: PlutoBooleanField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const value = computed(() => props.modelValue === true)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description">
+    <USwitch
+      :model-value="value"
+      :disabled="disabled"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldDate.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// UInputDate's modelValue is a `DateValue` (from `@internationalized/date`),
+// not a plain string. A content item stores a 'date' field as a plain ISO
+// date string ('YYYY-MM-DD'), so this widget converts both ways at its own
+// boundary — the rest of the content model never sees a `DateValue`.
+import type { CalendarDate, DateValue } from '@internationalized/date'
+import { parseDate } from '@internationalized/date'
+
+const props = defineProps<{
+  field: PlutoDateField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+}>()
+
+function toCalendarDate(value: unknown): CalendarDate | undefined {
+  if (typeof value !== 'string' || value === '') {
+    return undefined
+  }
+
+  try {
+    return parseDate(value.slice(0, 10))
+  } catch {
+    return undefined
+  }
+}
+
+const value = computed<DateValue | undefined>({
+  get: () => toCalendarDate(props.modelValue),
+  set: (next) => emit('update:modelValue', next ? next.toString() : undefined),
+})
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInputDate v-model="value" :disabled="disabled" />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldNumber.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = defineProps<{
+  field: PlutoNumberField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | null]
+}>()
+
+const value = computed(() => {
+  const raw = props.modelValue
+  return typeof raw === 'number' ? raw : null
+})
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInputNumber
+      :model-value="value"
+      :min="field.min"
+      :max="field.max"
+      :step="field.integer ? 1 : undefined"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldReference.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+// Only `field.optionsUrl` is resolved in this wave. `field.target` (a
+// same-app content-type reference with no `optionsUrl`) needs the generic
+// list endpoint of *another* content type, which is out of scope here — see
+// the content-model skill.
+const props = defineProps<{
+  field: PlutoReferenceField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+interface ReferenceOption {
+  label: string
+  value: string | number
+}
+
+interface ReferenceOptionsResponse {
+  data: Array<Record<string, unknown>>
+}
+
+const options = ref<ReferenceOption[]>([])
+const pending = ref(false)
+
+async function loadOptions() {
+  if (!props.field.optionsUrl) {
+    return
+  }
+
+  pending.value = true
+
+  try {
+    const result = await $fetch<ReferenceOptionsResponse>(props.field.optionsUrl)
+    const labelKey = props.field.labelKey ?? 'label'
+    const valueKey = props.field.valueKey ?? 'id'
+
+    options.value = result.data.map((row) => ({
+      label: String(row[labelKey] ?? ''),
+      value: row[valueKey] as string | number,
+    }))
+  } finally {
+    pending.value = false
+  }
+}
+
+onMounted(loadOptions)
+
+const hasOptionsSource = computed(() => Boolean(props.field.optionsUrl))
+const value = computed(() => props.modelValue as string | number | undefined)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInputMenu
+      v-if="hasOptionsSource"
+      :model-value="value"
+      :items="options"
+      :loading="pending"
+      :disabled="disabled"
+      value-key="value"
+      label-key="label"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+
+    <UInputMenu
+      v-else
+      :items="[]"
+      value-key="value"
+      label-key="label"
+      placeholder="No options source configured for this reference field."
+      class="w-full"
+      disabled
+    />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldSelect.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  field: PlutoSelectField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const items = computed(() =>
+  props.field.options.map((option) => ({ label: option.label, value: option.value }))
+)
+const value = computed(() => props.modelValue as string | number | undefined)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <USelect
+      :model-value="value"
+      :items="items"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldSlug.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// A plain text input plus a preview line. This widget does not auto-derive
+// the slug from another field — only `PlutoContentForm` knows about the
+// *other* field (`field.from`) a slug derives from, so that logic lives
+// there, not here. See the content-model skill for the slug bug this
+// separation is meant to avoid repeating.
+const props = defineProps<{
+  field: PlutoSlugField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const value = computed(() => (props.modelValue as string | undefined) ?? '')
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UInput
+      :model-value="value"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="emit('update:modelValue', $event)"
+    />
+
+    <p v-if="field.preview" class="text-muted mt-1 text-sm">
+      {{ field.preview }}{{ value }}
+    </p>
+  </UFormField>
+</template>

package/app/components/Pluto/Content/fields/PlutoFieldText.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// Renders both 'text' and 'textarea' fields. `richtext` has no core widget
+// — a layer (for example @plutocms/supabase-blog) registers its own.
+const props = defineProps<{
+  field: PlutoTextField
+  modelValue: unknown
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const isTextarea = computed(() => props.field.type === 'textarea')
+const value = computed(() => (props.modelValue as string | undefined) ?? undefined)
+</script>
+
+<template>
+  <UFormField :label="field.label" :description="field.description" :required="field.required">
+    <UTextarea
+      v-if="isTextarea"
+      :model-value="value"
+      :placeholder="field.placeholder"
+      :maxlength="field.maxLength"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+
+    <UInput
+      v-else
+      :model-value="value"
+      :placeholder="field.placeholder"
+      :maxlength="field.maxLength"
+      :disabled="disabled"
+      class="w-full"
+      @update:model-value="$emit('update:modelValue', $event)"
+    />
+  </UFormField>
+</template>

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

@@ -6,21 +6,41 @@ interface LegacyHrefLink {
 }
 
 /**
- * The admin sidebar nav. Merges the new registry with the old
- * `useSidebarAdminActions` composable (`@plutocms/utils`), so an unmigrated
- * layer's sidebar entries keep showing up. A bridged entry is skipped when a
- * registered entry already uses the same label, so a layer that migrates
- * does not get a duplicate item.
+ * The admin sidebar nav. Merges three sources:
+ *
+ * 1. The registry's own `nav` bucket — a layer's own `definePlutoExtension`
+ *    call.
+ * 2. The old `useSidebarAdminActions` composable (`@plutocms/utils`), so an
+ *    unmigrated layer's sidebar entries keep showing up. A bridged entry is
+ *    skipped when a registered entry already uses the same label, so a
+ *    layer that migrates does not get a duplicate item.
+ * 3. One synthesized entry per auto-routed content type (`type.autoRoutes
+ *    !== false`) — a layer that declares a content type gets a nav entry
+ *    for free, without calling `definePlutoExtension` itself. Gated on the
+ *    same "no capability declared = always visible" rule the generic
+ *    content routes already use server-side (see the content-model skill):
+ *    when `type.capabilities.read` is unset, the entry is always visible;
+ *    when it is set, `can(...)` decides.
+ *
+ * `entry.enabled` is read and enforced uniformly across all three sources
+ * here. Source 1 already filters on it a second time, inside
+ * `createOwnedRegistry` itself (see
+ * `app/composables/internal/registry-factory.ts`) — applying the same
+ * filter again here is harmless for that source, and is what makes sources
+ * 2 and 3 (plain objects that never pass through that registry) respect
+ * `enabled` too, instead of only source 1.
  */
 export function usePlutoAdminNav() {
   const registry = usePlutoRegistry()
   const legacy = useSidebarAdminActions()
+  const { items: contentTypes } = usePlutoContentTypes()
+  const { can } = usePlutoPermissions()
 
   const items = computed<PlutoNavItem[]>(() => {
     const registered = registry.nav.list.value
     const seen = new Set(registered.map((item) => item.label))
 
-    const bridged = legacy.actions.value
+    const bridged: PlutoNavItem[] = legacy.actions.value
       .filter((action) => !seen.has(String(action.label)))
       .map((action, index) => ({
         id: `legacy:sidebar-${index}`,
@@ -35,9 +55,29 @@ export function usePlutoAdminNav() {
         })),
       }))
 
-    return [...registered, ...bridged].sort(
-      (a, b) => (a.order ?? 100) - (b.order ?? 100)
-    )
+    const contentNav: PlutoNavItem[] = contentTypes.value
+      .filter((entry) => entry.type.autoRoutes !== false)
+      .map((entry) => {
+        const type = entry.type
+        const basePath = type.basePath ?? `/admin/content/${type.name}`
+
+        return {
+          id: `content:${type.name}`,
+          order: type.navOrder ?? 100,
+          label: type.labelPlural,
+          icon: type.icon,
+          to: basePath,
+          enabled: () => !type.capabilities?.read || can(type.capabilities.read),
+          children: [
+            { label: `All ${type.labelPlural}`, to: basePath },
+            { label: `Create new ${type.label}`, to: `${basePath}/new` },
+          ],
+        }
+      })
+
+    return [...registered, ...bridged, ...contentNav]
+      .filter((item) => item.enabled?.() ?? true)
+      .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
   })
 
   return { items }

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

@@ -1,13 +1,38 @@
 /**
  * Metadata for admin pages, registered on top of routes Nuxt already
- * creates from files. No layer registers page metadata today, so this has
- * no legacy bridge.
+ * creates from files, plus two synthesized entries per auto-routed content
+ * type (`type.autoRoutes !== false`): a list page and a "new" page — the
+ * page-metadata equivalent of the nav entry `usePlutoAdminNav` synthesizes
+ * for the same content type. No layer registers page metadata today, so
+ * the registry bucket itself has no legacy bridge.
  */
 export function usePlutoAdminPages() {
   const registry = usePlutoRegistry()
   const route = useRoute()
+  const { items: contentTypes } = usePlutoContentTypes()
+
+  const items = computed<PlutoAdminPage[]>(() => {
+    const contentPages: PlutoAdminPage[] = contentTypes.value
+      .filter((entry) => entry.type.autoRoutes !== false)
+      .flatMap((entry) => {
+        const type = entry.type
+        const basePath = type.basePath ?? `/admin/content/${type.name}`
+        const navId = `content:${type.name}`
+
+        return [
+          { id: `${navId}:list`, path: basePath, title: type.labelPlural },
+          {
+            id: `${navId}:new`,
+            path: `${basePath}/new`,
+            title: `Create new ${type.label}`,
+            parent: navId,
+          },
+        ]
+      })
+
+    return [...registry.pages.list.value, ...contentPages]
+  })
 
-  const items = computed(() => registry.pages.list.value)
   const current = computed(() => items.value.find((page) => page.path === route.path))
 
   return { items, current }

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

@@ -0,0 +1,98 @@
+/**
+ * Loads (or creates) one item of one content type, for the generic form page
+ * (`PlutoContentForm`).
+ *
+ * This is one half of the split that replaces the old `usePost`/`useProduct`
+ * pattern (see `usePlutoContentList` for the other half). That old pattern
+ * fetched a list AND a single item from one composable every time, and threw
+ * away whichever one the caller did not need. `usePlutoContentItem` only
+ * ever fetches a single item, and only when `id` is defined — a "new entry"
+ * form never fires a GET at all.
+ *
+ * It is also not a "fake thenable": it returns plain refs and explicit
+ * methods, so a caller `await`s `save()`/`remove()`/`refresh()` directly,
+ * instead of `await`ing the composable's own return value through a
+ * hand-rolled `.then()`.
+ *
+ * `id` is read once, with `toValue`, at composable-creation time. It is not
+ * watched for later changes — each of the three generated pages
+ * (`app/pages/admin/content/[type]/{index,new,[id]}.vue`) mounts fresh on
+ * every route change, so there is no case in this wave where `id` changes
+ * under a still-mounted `PlutoContentForm`.
+ */
+export function usePlutoContentItem(
+  typeName: string,
+  id: MaybeRefOrGetter<string | number | undefined>
+) {
+  const resolvedId = toValue(id)
+  const isNew = resolvedId === undefined
+
+  const item = ref<Record<string, unknown>>({})
+  const pending = ref(false)
+  const error = ref<unknown>(null)
+
+  async function refresh(): Promise<void> {
+    // A new, unsaved entry has nothing to fetch — `item` stays the empty
+    // object it started as.
+    if (isNew) {
+      return
+    }
+
+    pending.value = true
+    error.value = null
+
+    try {
+      item.value = await $fetch<PlutoContentItem>(`/api/_pluto/content/${typeName}/${resolvedId}`)
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    } finally {
+      pending.value = false
+    }
+  }
+
+  // Fire the initial fetch right away, same reasoning as
+  // usePlutoContentList: /admin/** is client-only, so there is no SSR
+  // payload concern. The failure path already lands in `error` for a
+  // reactive consumer to read; swallow the rejection here so it never
+  // surfaces as an unhandled rejection. A caller invoking `refresh()`
+  // again later still gets a real rejection to `await`.
+  refresh().catch(() => {})
+
+  async function save(values: Record<string, unknown>): Promise<PlutoContentItem> {
+    error.value = null
+
+    try {
+      const saved = isNew
+        ? await $fetch<PlutoContentItem>(`/api/_pluto/content/${typeName}`, {
+            method: 'POST',
+            body: values,
+          })
+        : await $fetch<PlutoContentItem>(`/api/_pluto/content/${typeName}/${resolvedId}`, {
+            method: 'PATCH',
+            body: values,
+          })
+
+      item.value = saved
+      return saved
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    }
+  }
+
+  async function remove(): Promise<void> {
+    if (isNew) {
+      throw new Error('Cannot remove an entry that has not been saved yet.')
+    }
+
+    try {
+      await $fetch(`/api/_pluto/content/${typeName}/${resolvedId}`, { method: 'DELETE' })
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    }
+  }
+
+  return { item, pending, error, refresh, save, remove }
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Fetches one content type's list of items, for the generic list page
+ * (`PlutoContentList`).
+ *
+ * This is one half of the split that replaces the old `usePost`/`useProduct`
+ * pattern (see `usePlutoContentItem` for the other half). That old pattern
+ * fetched a list AND a single item from one composable every time, and threw
+ * away whichever one the caller did not need — a list page paid for an item
+ * fetch it never used, and an edit page paid for a list fetch it never used.
+ * `usePlutoContentList` only ever fetches a list, because a list page only
+ * ever needs a list.
+ *
+ * It is also not a "fake thenable": it returns plain refs and explicit
+ * methods, so a caller `await`s `refresh()` or `remove()` directly, instead
+ * of `await`ing the composable's own return value through a hand-rolled
+ * `.then()`.
+ */
+export function usePlutoContentList(typeName: string) {
+  const items = ref<PlutoContentItem[]>([])
+  const total = ref<number | undefined>(undefined)
+  const pending = ref(false)
+  const error = ref<unknown>(null)
+
+  async function refresh(): Promise<void> {
+    pending.value = true
+    error.value = null
+
+    try {
+      const result = await $fetch<PlutoContentListResult>(`/api/_pluto/content/${typeName}`)
+      items.value = result.data
+      total.value = result.total
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    } finally {
+      pending.value = false
+    }
+  }
+
+  // Fire the initial fetch right away. /admin/** is client-only
+  // (ssr: false in nuxt.config.ts), so there is no SSR payload concern —
+  // this only ever runs in the browser. The failure path already lands in
+  // `error` for a reactive consumer to read; swallow the rejection here so
+  // it never surfaces as an unhandled rejection. A caller invoking
+  // `refresh()` again later still gets a real rejection to `await`.
+  refresh().catch(() => {})
+
+  async function remove(id: string | number): Promise<void> {
+    try {
+      await $fetch(`/api/_pluto/content/${typeName}/${id}`, { method: 'DELETE' })
+    } catch (caught) {
+      error.value = caught
+      throw caught
+    }
+
+    await refresh()
+  }
+
+  return { items, total, pending, error, refresh, remove }
+}

package/app/pages/admin/content/[type]/[id].vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute()
+const typeName = route.params.type as string
+
+const { byName } = usePlutoContentTypes()
+const type = byName(typeName)
+
+if (!type) {
+  throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
+}
+
+useHead({
+  title: `Edit ${type.label}`,
+})
+</script>
+
+<template>
+  <PlutoContentForm :id="route.params.id as string" :type="type.name" />
+</template>

package/app/pages/admin/content/[type]/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute()
+const typeName = route.params.type as string
+
+const { byName } = usePlutoContentTypes()
+const type = byName(typeName)
+
+if (!type) {
+  throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
+}
+
+useHead({
+  title: type.labelPlural,
+})
+</script>
+
+<template>
+  <PlutoContentList :type="type.name" />
+</template>

package/app/pages/admin/content/[type]/new.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const route = useRoute()
+const typeName = route.params.type as string
+
+const { byName } = usePlutoContentTypes()
+const type = byName(typeName)
+
+if (!type) {
+  throw createError({ statusCode: 404, statusMessage: 'Content type not found.', fatal: true })
+}
+
+useHead({
+  title: `New ${type.label}`,
+})
+</script>
+
+<template>
+  <PlutoContentForm :type="type.name" />
+</template>

package/app/plugins/pluto-core-registrations.ts

@@ -1,6 +1,25 @@
-// Registers core's own Home and Settings anchors. `order: 0` and
-// `order: 1000` are reserved for these two entries, so every other layer's
-// nav item sorts between them by default (default order is 100).
+import PlutoFieldBoolean from '../components/Pluto/Content/fields/PlutoFieldBoolean.vue'
+import PlutoFieldDate from '../components/Pluto/Content/fields/PlutoFieldDate.vue'
+import PlutoFieldNumber from '../components/Pluto/Content/fields/PlutoFieldNumber.vue'
+import PlutoFieldReference from '../components/Pluto/Content/fields/PlutoFieldReference.vue'
+import PlutoFieldSelect from '../components/Pluto/Content/fields/PlutoFieldSelect.vue'
+import PlutoFieldSlug from '../components/Pluto/Content/fields/PlutoFieldSlug.vue'
+import PlutoFieldText from '../components/Pluto/Content/fields/PlutoFieldText.vue'
+
+// Registers core's own Home and Settings anchors, plus the eight built-in
+// content field widgets. `order: 0` and `order: 1000` are reserved for the
+// Home/Settings nav entries, so every other layer's nav item sorts between
+// them by default (default order is 100).
+//
+// Everything core itself contributes to the registry lives in this one
+// `definePlutoExtension` call — `definePlutoExtension` replaces a layer's
+// whole contribution on every call, not just the buckets that call passes,
+// so a second `id: 'pluto'` call elsewhere would silently wipe this one out.
+//
+// `richtext` and `media` have no core widget here on purpose — a layer
+// registers those (blog registers `richtext`, storage registers `media`),
+// because core has no real editor or file picker to offer for either. See
+// the content-model skill.
 export default defineNuxtPlugin(() => {
   definePlutoExtension({
     id: 'pluto',
@@ -12,5 +31,15 @@ export default defineNuxtPlugin(() => {
       { id: 'home', path: '/admin/home', title: 'Dashboard', icon: 'lucide:house' },
       { id: 'settings', path: '/admin/settings', title: 'Settings', icon: 'lucide:settings' },
     ],
+    contentFieldWidgets: [
+      { id: 'text', fieldType: 'text', component: PlutoFieldText },
+      { id: 'textarea', fieldType: 'textarea', component: PlutoFieldText },
+      { id: 'slug', fieldType: 'slug', component: PlutoFieldSlug },
+      { id: 'number', fieldType: 'number', component: PlutoFieldNumber },
+      { id: 'boolean', fieldType: 'boolean', component: PlutoFieldBoolean },
+      { id: 'date', fieldType: 'date', component: PlutoFieldDate },
+      { id: 'select', fieldType: 'select', component: PlutoFieldSelect },
+      { id: 'reference', fieldType: 'reference', component: PlutoFieldReference },
+    ],
   })
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@plutocms/pluto",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "The layerable CMS",
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -44,6 +44,7 @@
   "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",
     "@plutocms/utils": "^0.2.1",