@xleddyl/nuxt-cms 0.4.1 → 0.4.3

package/README.md

@@ -4,131 +4,109 @@
 [![CI](https://github.com/xleddyl/nuxt-cms/actions/workflows/ci.yml/badge.svg)](https://github.com/xleddyl/nuxt-cms/actions/workflows/ci.yml)
 [![license](https://img.shields.io/npm/l/%40xleddyl%2Fnuxt-cms)](LICENSE)
 
-nuxt-cms is a Nuxt module that leverages the Nitro server to ship a lightweight CMS together with your Nuxt frontend, no external CMS, no second service to deploy, nothing extra to pay for. Content lives next to the code that renders it: you define content types in code, editors manage entries from a built-in admin panel, and the same server that serves your site serves your content.
+nuxt-cms is a Nuxt module that adds a CMS to your Nuxt app. The CMS runs in the Nitro server of the app. You deploy one app, with no external CMS service.
 
-- **Zero extra infrastructure**: the CMS runs inside your app's Nitro server; you deploy one thing.
-- **Content types in code**: a `cms.config.ts` with `defineCmsConfig()` declares collections, single documents, relations, blocks and translatable fields; database schema, migrations and TypeScript types are generated from it.
-- **Content with blocks**: news, blog and other content types with title, slug, cover, SEO fields and a body built from your own site components, drafts and scheduled publishing; `<CmsBlocks>` renders the body with typed props.
-- **Visual editor**: content items (and any blocks field built from site components) are edited on a live preview of your own site, with drag and drop, a block palette, per-locale and mobile previews, scheduling and publishing.
-- **Admin panel at `/cms`**: entry editing with validation, drafts, media library with one-click download of the original file (S3-compatible storage, a directory on the server's disk, or a local mode backed directly by your `public/` folder), a global search (⌘K / Ctrl K) over labels and every stored value in all locales, single-admin auth from env credentials.
-- **Public GraphQL API**: read-only, typed end-to-end via gql.tada, with filtering, sorting and pagination; fields marked `private` stay out of it.
-- **SQLite, Postgres, libSQL/Turso or Cloudflare D1**: a local file database by default, one config line to switch (including remote SQLite over the network).
-- **Runs on serverless too**: migrations are baked into the server bundle, uploads are presigned straight to your bucket, sessions are sealed cookies. Nothing on the request path needs a local disk or sticky instances.
+![Visual editor](docs/screenshots/visual-editor.png)
 
-## Screenshots
-
-![Collection view](docs/screenshots/collection.png)
+## Features
 
-![Entry editor](docs/screenshots/entry.png)
+- **Content types in code.** You declare collections, singles, pages and content types (news, blog) in `cms.config.ts`. The module generates the database schema, the migrations and the TypeScript types.
+- **Admin panel at `/cms`.** Editors manage entries, drafts and media, filter and duplicate entries, and import or export a collection as JSON or CSV. The panel has a light and a dark theme, a global search (⌘K) and admin accounts.
+- **Visual editor.** Editors build content from your own site components, on a live preview of the site.
+- **GraphQL API.** A read-only, typed API with filters, sorting and pagination. Composables such as `useCmsCollection` and `useCmsContent` query it for you.
+- **Your database.** SQLite (default), Postgres, libSQL/Turso or Cloudflare D1.
+- **Your storage.** S3-compatible storage, a folder on the server disk, or your `public/` folder.
+- **Serverless ready.** The build puts the migrations in the server bundle. Uploads go directly to the bucket. Sessions are sealed cookies.
 
-![Media library](docs/screenshots/media.png)
+## Screenshots
 
-## Installation
+| Collection | Entry editor |
+| --- | --- |
+| ![Collection](docs/screenshots/collection.png) | ![Entry editor](docs/screenshots/entry.png) |
+| **Media library** | **Search** |
+| ![Media library](docs/screenshots/media.png) | ![Search](docs/screenshots/search.png) |
 
-```bash
-npm install @xleddyl/nuxt-cms
-```
+## Quick start
 
-Register the module and configure it under the `cms` key in `nuxt.config.ts`:
+1. Install the module:
 
-```ts
-export default defineNuxtConfig({
-   modules: ['@xleddyl/nuxt-cms'],
-   cms: {
-      i18n: {
-         locales: ['en', 'it'],
-         defaultLocale: 'en',
-      },
-   },
-})
-```
+   ```bash
+   npm install @xleddyl/nuxt-cms
+   ```
 
-`database` defaults to SQLite (`{ driver: 'sqlite', path: 'data/cms.db' }`) and can be omitted
-entirely. Switch it to `{ driver: 'postgres', url: '...' }`,
-`{ driver: 'libsql', url: '...', authToken: '...' }` (Turso/remote) or
-`{ driver: 'd1', binding: 'DB' }` (Cloudflare Workers); see
-[Configuration](docs/configuration.md) for every option and
-[Deployment](docs/deployment.md) for which driver each host supports.
+2. Add the module to `nuxt.config.ts`:
 
-Each driver brings its own client, and only the one you use has to be installed: SQLite works out of
-the box, `postgres` needs `pg`, `libsql` needs `@libsql/client`, and `d1` needs nothing extra. The
-build stops with an explicit message if the client for the configured driver is missing.
+   ```ts
+   export default defineNuxtConfig({
+      modules: ['@xleddyl/nuxt-cms'],
+   })
+   ```
 
-Then declare your content types in a `cms.config.ts` at the project root with `defineCmsConfig()`.
+3. Declare your content types in `cms.config.ts`, at the project root:
 
-### Admin branding
+   ```ts
+   import { defineCmsConfig } from '#nuxt-cms'
 
-`cms.admin.title`, `cms.admin.subtitle` and `cms.admin.logo` replace the name, the tagline and the
-mark in the admin sidebar, mobile bar and login page. `logo` takes a URL or public path, a path to
-an `.svg` file in the project (inlined, so it follows the light and dark theme) or raw `<svg>`
-markup; see [Configuration](docs/configuration.md#admin-branding).
+   export default defineCmsConfig({
+      events: {
+         id: 'events',
+         label: 'Events',
+         kind: 'collection',
+         titleField: 'title',
+         fields: {
+            title: { label: 'Title', type: 'text', required: true },
+            date: { label: 'Date', type: 'date' },
+            poster: { label: 'Poster', type: 'media', mediaType: 'image' },
+         },
+      },
+   })
+   ```
 
-### Disabling the CMS
+4. Set the admin credentials in `.env`:
 
-Keep the module in `modules[]` at all times and turn it off with the `enabled` option or the
-`NUXT_CMS_ENABLED` env var. When disabled the module registers no-op query composables and keeps the
-generated types, and nothing else, so components can call them unconditionally and simply render
-their empty states:
+   ```bash
+   NUXT_CMS_ADMIN_EMAIL=admin@example.com
+   NUXT_CMS_ADMIN_PASSWORD=change-me
+   NUXT_SESSION_PASSWORD=a-random-secret-of-at-least-32-characters
+   ```
 
-```ts
-export default defineNuxtConfig({
-   modules: ['@xleddyl/nuxt-cms'],
-   cms: { enabled: false },
-})
-```
+5. Start the app with `npm run dev`. Open `http://localhost:3000/cms` and sign in.
 
-See [Configuration](docs/configuration.md#enabled) for the resolution order.
-
-### Environment variables
-
-Every secret maps to runtime config, so it can be set as an env var instead of in `nuxt.config.ts`:
-
-| Variable | Required | Purpose |
-| --- | --- | --- |
-| `NUXT_CMS_ENABLED` | no | set to `0` / `false` to disable the CMS (default enabled) |
-| `NUXT_CMS_ADMIN_EMAIL` | yes | admin login email |
-| `NUXT_CMS_ADMIN_PASSWORD` | yes | admin login password |
-| `NUXT_SESSION_PASSWORD` | in production | session encryption key (32+ chars) |
-| `NUXT_CMS_DATABASE_URL` | with `postgres` / remote `libsql` | Postgres connection string or libSQL URL |
-| `NUXT_CMS_DATABASE_AUTH_TOKEN` | with remote `libsql` | libSQL/Turso auth token |
-| `NUXT_CMS_MIGRATE_ON_BOOT` | no | `false` to apply migrations in CI instead of on boot |
-| `NUXT_CMS_MEDIA_ENDPOINT` | for media | S3-compatible endpoint |
-| `NUXT_CMS_MEDIA_REGION` | for media | S3 region (default `auto`) |
-| `NUXT_CMS_MEDIA_BUCKET` | for media | bucket name |
-| `NUXT_CMS_MEDIA_ACCESS_KEY_ID` | for media | S3 access key id |
-| `NUXT_CMS_MEDIA_SECRET_ACCESS_KEY` | for media | S3 secret access key |
-| `NUXT_PUBLIC_CMS_MEDIA_BASE_URL` | for media | public base URL for uploaded files |
-| `NUXT_CMS_MEDIA_DIR` | for filesystem media | directory for uploaded files (default `data/media`) |
+6. Read the content in a page:
 
-## Documentation
+   ```vue
+   <script setup lang="ts">
+   const { data: events } = await useCmsCollection('events', { sort: [{ field: 'date' }] })
+   </script>
+   ```
 
-Full documentation lives in [`docs/`](docs/README.md):
+The database is a local SQLite file (`data/cms.db`) by default. To use a different database or media storage, see [Configuration](docs/configuration.md).
 
-- [Getting started](docs/getting-started.md) — install, configure, first content type, run.
-- [Configuration](docs/configuration.md) — every `cms.*` option and the `NUXT_CMS_*` env vars.
-- [Database](docs/database.md) — SQLite, Postgres, libSQL/Turso and D1 drivers, migrations, studio.
-- [Schema](docs/schema.md) — `defineCmsConfig`, entries, pages, field types, relations, blocks, i18n.
-- [Querying content](docs/querying.md) — GraphQL API, `useCmsSingle` / `useCmsCollection` / `useCmsPage` / `useCmsContents` / `useCmsContent` / `useCms` / `$cmsQuery`, `<CmsBlocks>`, filters, sorting, pagination.
-- [Admin panel & security](docs/admin.md) — pages, authentication, sessions, admin REST API.
-- [Media](docs/media.md) — S3-compatible storage, filesystem storage on the server's disk, or local mode backed by your `public/` folder, upload flow, allowed file types.
-- [Deployment](docs/deployment.md) — host/driver matrix, migrations on serverless, horizontal scaling, Cloudflare Workers.
+## Documentation
 
-## LLM guide
+| Page | Content |
+| --- | --- |
+| [Getting started](docs/getting-started.md) | Install, configure, first content type, run |
+| [Configuration](docs/configuration.md) | Every `cms.*` option and every env var |
+| [Database](docs/database.md) | Drivers, migrations, Drizzle Studio |
+| [Schema](docs/schema.md) | Entry kinds, field types, relations, blocks, i18n, form layout |
+| [Querying content](docs/querying.md) | GraphQL API, composables, `<CmsBlocks>` |
+| [Admin panel & security](docs/admin.md) | Admin pages, search, visual editor, accounts, sessions |
+| [Media](docs/media.md) | Storage modes, uploads, allowed file types |
+| [Deployment](docs/deployment.md) | Hosts, migrations on serverless, scaling |
 
-[llm.txt](llm.txt) is a compact reference meant to be fed to an LLM: schema definition (`cms.config.ts`, field types, relations, blocks, i18n), the `useCms` / `$cmsQuery` composables and the generated GraphQL API (filters, sorting, pagination).
+[llm.txt](llm.txt) is a compact reference for LLMs: schema, composables and GraphQL API.
 
 ## Development
 
 ```bash
 pnpm install
-pnpm dev:prepare  # module stub + playground prepare (first time and after module.ts changes)
-pnpm dev          # playground on http://localhost:3000 (generates + applies migrations on boot)
-pnpm db:studio    # drizzle studio
+pnpm dev:prepare   # first time, and after a change to src/module.ts
+pnpm dev           # playground on http://localhost:3000
+pnpm test
 ```
 
-## Configuration
-
-All config lives under `cms` in `nuxt.config.ts` (see `ModuleOptions` in `src/module.ts`); secrets map to runtime config, so they can be provided as `NUXT_CMS_*` env vars instead (plus `NUXT_SESSION_PASSWORD` for sessions in production). `cms.database.driver: 'postgres'` switches driver, drizzle dialect and migration folder together; re-run `dev:prepare` after switching.
+The playground (`playground/`) uses every option of the module. Copy `playground/.env.example` to `playground/.env` before the first start.
 
 ## License
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -11,7 +11,7 @@ import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal'
 import { createJiti } from 'jiti';
 import { typeName, blockTypeName as blockTypeName$1, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
 import { migrationsDirFor } from '../dist/runtime/shared/migrations-dir.js';
-import { entryFieldsFor, isPrivateField, blockTypeName, pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, normalizeContentEntries, PAGE_PATH_FIELD, pageRoutes, isCollectionKind, layoutErrors, listErrors, mobileMediaKey, fieldConditions, CONTENT_SLUG_FIELD, pageFieldsTableName, pageMediaTableName, CONTENT_SYSTEM_FIELDS, isRequiredField, pageFields, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, normalizeCmsConfig } from '../dist/runtime/shared/index.js';
+import { entryFieldsFor, isPrivateField, blockTypeName, pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, normalizeContentEntries, PAGE_PATH_FIELD, pageRoutes, isCollectionKind, layoutErrors, listErrors, mobileMediaKey, fieldConditions, selectOptionValues, CONTENT_SLUG_FIELD, pageFieldsTableName, pageMediaTableName, CONTENT_SYSTEM_FIELDS, isRequiredField, pageFields, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE, normalizeCmsConfig } from '../dist/runtime/shared/index.js';
 import { previewPathErrors, DEFAULT_CMS_PREVIEW_PATH } from '../dist/runtime/shared/preview.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
@@ -405,6 +405,8 @@ function validateConfig(config, i18n) {
       errors.push(`${at}: list needs kind 'collection' or 'content'`);
     if (entry.icon !== void 0 && (typeof entry.icon !== "string" || !entry.icon))
       errors.push(`${at}: icon must be a non-empty string`);
+    if (entry.validate !== void 0 && typeof entry.validate !== "function")
+      errors.push(`${at}: validate must be a function`);
     const columnNames = /* @__PURE__ */ new Set();
     for (const [key, field] of Object.entries(allFields)) {
       const fat = `${at}, field '${key}'`;
@@ -432,12 +434,7 @@ function validateConfig(config, i18n) {
         else if (allFields[mobileKey] && allFields[mobileKey].mobileOf !== key)
           errors.push(`${fat}: mobile needs the key '${mobileKey}', which is already declared`);
       }
-      if (field.type === "select") {
-        if (!field.options?.length)
-          errors.push(`${fat}: select requires a non-empty options array`);
-        else if (new Set(field.options).size !== field.options.length)
-          errors.push(`${fat}: select options must be unique`);
-      }
+      if (field.type === "select") errors.push(...selectOptionErrors(fat, field));
       if (field.showIf) {
         if (entry.titleField === key)
           errors.push(`${fat}: the titleField cannot be conditional`);
@@ -472,7 +469,8 @@ function validateConfig(config, i18n) {
           if (condition.in && condition.eq !== void 0)
             errors.push(`${cat}: showIf accepts either 'eq' or 'in', not both`);
           if (target.type === "select") {
-            const unknown = values.filter((value) => !target.options?.includes(String(value)));
+            const options = selectOptionValues(target);
+            const unknown = values.filter((value) => !options.includes(String(value)));
             if (unknown.length)
               errors.push(
                 `${cat}: ${unknown.map((value) => `'${String(value)}'`).join(", ")} not in the options of '${condition.field}'`
@@ -488,8 +486,11 @@ function validateConfig(config, i18n) {
         else if (isTranslatableField(source) && !(entry.kind === "content" && key === CONTENT_SLUG_FIELD))
           errors.push(`${fat}: slug source '${field.from}' cannot be translatable`);
       }
+      if (field.type !== "blocks" && (field.min !== void 0 || field.max !== void 0))
+        errors.push(`${fat}: min and max are only supported on blocks fields`);
       if (field.type === "blocks") {
         if (field.translatable) errors.push(`${fat}: blocks fields cannot be translatable`);
+        errors.push(...blocksCountErrors(fat, field));
         if (!field.blocks || !Object.keys(field.blocks).length) {
           errors.push(`${fat}: blocks requires a non-empty blocks map`);
         }
@@ -527,9 +528,8 @@ function validateConfig(config, i18n) {
               errors.push(`${bfat}: showIf is not supported inside blocks`);
             if (blockField.mobile)
               errors.push(`${bfat}: mobile is not supported inside blocks`);
-            if (blockField.type === "select" && !blockField.options?.length) {
-              errors.push(`${bfat}: select requires a non-empty options array`);
-            }
+            if (blockField.type === "select")
+              errors.push(...selectOptionErrors(bfat, blockField));
             if (blockField.type === "select" && blockField.multiple) {
               errors.push(`${bfat}: multiple select is not supported inside blocks`);
             }
@@ -622,8 +622,49 @@ function contentErrors(at, entry) {
   }
   return errors;
 }
+function selectOptionErrors(at, field) {
+  const errors = [];
+  if (!Array.isArray(field.options) || !field.options.length)
+    return [`${at}: select requires a non-empty options array`];
+  const values = /* @__PURE__ */ new Set();
+  for (const option of field.options) {
+    if (typeof option === "string") {
+      if (!option) errors.push(`${at}: select options cannot be empty strings`);
+      else if (values.has(option)) errors.push(`${at}: select option '${option}' is duplicated`);
+      values.add(option);
+      continue;
+    }
+    if (!option || typeof option !== "object") {
+      errors.push(`${at}: select options must be strings or { value, label } objects`);
+      continue;
+    }
+    const { value, label } = option;
+    if (typeof value !== "string" || !value) {
+      errors.push(`${at}: every select option object needs a non-empty string value`);
+      continue;
+    }
+    if (values.has(value)) errors.push(`${at}: select option '${value}' is duplicated`);
+    values.add(value);
+    if (typeof label !== "string" || !label.trim())
+      errors.push(`${at}: select option '${value}' needs a non-empty label`);
+  }
+  return errors;
+}
+function blocksCountErrors(at, field) {
+  const errors = [];
+  const isCount = (value, least) => typeof value === "number" && Number.isInteger(value) && value >= least;
+  if (field.min !== void 0 && !isCount(field.min, 0))
+    errors.push(`${at}: min must be an integer of 0 or more`);
+  if (field.max !== void 0 && !isCount(field.max, 1))
+    errors.push(`${at}: max must be an integer of 1 or more`);
+  if (isCount(field.min, 0) && isCount(field.max, 1) && field.min > field.max)
+    errors.push(`${at}: min (${field.min}) cannot be greater than max (${field.max})`);
+  return errors;
+}
 function blockMetaErrors(at, block) {
   const errors = [];
+  if (block.validate !== void 0 && typeof block.validate !== "function")
+    errors.push(`${at}: validate must be a function`);
   if (block.component !== void 0) {
     if (typeof block.component !== "string" || !block.component.trim())
       errors.push(`${at}: component must be a non-empty string`);
@@ -675,7 +716,7 @@ function snakeCase(key) {
 function jsonExpr(col, dialect) {
   return dialect === "postgres" ? `jsonb('${col}')` : `text('${col}', { mode: 'json' })`;
 }
-function columnExpr(key, field, dialect) {
+function columnExpr(key, field, dialect, table) {
   const col = snakeCase(key);
   let expr;
   if (isTranslatableField(field)) {
@@ -705,7 +746,8 @@ function columnExpr(key, field, dialect) {
       break;
     case "relation": {
       const onDelete = field.onDelete ?? (field.required ? "restrict" : "set null");
-      expr = `text('${col}').references(() => ${field.to}.id, { onDelete: '${onDelete}' })`;
+      const target = field.to === table ? `(): ${anyColumnType(dialect)}` : "()";
+      expr = `text('${col}').references(${target} => ${field.to}.id, { onDelete: '${onDelete}' })`;
       if (field.cardinality === "one-to-one") expr += ".unique()";
       break;
     }
@@ -715,6 +757,12 @@ function columnExpr(key, field, dialect) {
   if (isRequiredField(field)) expr += ".notNull()";
   return `  ${key}: ${expr},`;
 }
+function anyColumnType(dialect) {
+  return dialect === "postgres" ? "AnyPgColumn" : "AnySQLiteColumn";
+}
+function isSelfRelation(table, field) {
+  return field.type === "relation" && !isManyToMany(field) && field.to === table;
+}
 function isManyToMany(field) {
   return field.type === "relation" && field.cardinality === "many-to-many";
 }
@@ -734,7 +782,7 @@ function tableExpr(name, entry, dialect) {
     entry.kind === "page" ? pageColumnFields(entry) : entry.fields
   )) {
     if (isManyToMany(field)) continue;
-    lines.push(columnExpr(key, field, dialect));
+    lines.push(columnExpr(key, field, dialect, name));
   }
   if (entry.drafts) lines.push(`  status: text('status').notNull().default('draft'),`);
   if (isCollectionKind(entry)) lines.push(`  createdAt: ${nowExpr(pg, "created_at")},`);
@@ -824,8 +872,18 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
     core.add("jsonb");
   if (pg) core.add("timestamp");
   if (fields.some(isManyToMany) || rowsEntries.length) core.add("primaryKey");
+  const hasSelfRelation = derived.some(
+    ([name, entry]) => Object.values(entry.kind === "page" ? pageColumnFields(entry) : entry.fields).some(
+      (field) => isSelfRelation(name, field)
+    )
+  );
   const imports = [
     ...pg ? [] : [`import { sql } from '${resolveImport("drizzle-orm")}'`],
+    ...hasSelfRelation ? [
+      `import type { ${anyColumnType(dialect)} } from '${resolveImport(
+        `drizzle-orm/${pg ? "pg-core" : "sqlite-core"}`
+      )}'`
+    ] : [],
     `import { ${[...core].sort().join(", ")} } from '${resolveImport(
       `drizzle-orm/${pg ? "pg-core" : "sqlite-core"}`
     )}'`
@@ -981,7 +1039,7 @@ function scalarTsType(field) {
     case "json":
       return "unknown";
     case "select":
-      return field.options.map((o) => JSON.stringify(o)).join(" | ");
+      return selectOptionValues(field).map((o) => JSON.stringify(o)).join(" | ");
     default:
       return "string";
   }
@@ -994,7 +1052,7 @@ function fieldTsType(config, entryName, key, field) {
   }
   if (field.type === "media") return `${mediaTsType(field)} | null`;
   if (field.type === "select" && field.multiple) {
-    const union = field.options.map((o) => JSON.stringify(o)).join(" | ");
+    const union = selectOptionValues(field).map((o) => JSON.stringify(o)).join(" | ");
     return `(${union})[]`;
   }
   if (field.type === "blocks") {
@@ -1017,12 +1075,8 @@ function blockTypesTs(entryName, key, field) {
     members.push(name);
     const lines = [];
     for (const [blockFieldKey, blockField] of Object.entries(block.fields)) {
-      if (blockField.type === "media") {
-        lines.push(`  ${blockFieldKey}: ${mediaTsType(blockField)} | null`);
-        continue;
-      }
-      const base = scalarTsType(blockField);
-      lines.push(`  ${blockFieldKey}: ${blockField.required ? base : `${base} | null`}`);
+      const base = blockField.type === "media" ? mediaTsType(blockField) : scalarTsType(blockField);
+      lines.push(`  ${blockFieldKey}: ${base} | null`);
     }
     defs.push(`export interface ${props} {
 ${lines.join("\n")}
@@ -2038,6 +2092,16 @@ const module$1 = defineNuxtModule({
       method: "delete",
       handler: resolver.resolve("./runtime/server/api/settings.delete")
     });
+    addServerHandler({
+      route: "/api/cms/export/:collection",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/collection-export.get")
+    });
+    addServerHandler({
+      route: "/api/cms/import/:collection",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/collection-import.post")
+    });
     const api = "/api/cms/admin/:collection";
     addServerHandler({
       route: api,

package/dist/runtime/app/components/cms/BlocksField.vue

@@ -100,18 +100,27 @@
             </div>
          </div>
 
-         <CmsDropdownMenu v-if="addItems.length > 1" :items="addItems">
+         <CmsDropdownMenu v-if="canAdd && addItems.length > 1" :items="addItems">
             <button type="button" class="cms-block-add">
                <CmsIcon name="plus" class="size-5" />
                <span>Add</span>
             </button>
          </CmsDropdownMenu>
-         <button v-else type="button" class="cms-block-add" @click="addFirst">
+         <button
+            v-else
+            type="button"
+            class="cms-block-add"
+            :disabled="!canAdd"
+            :title="canAdd ? void 0 : countHint"
+            @click="addFirst"
+         >
             <CmsIcon name="plus" class="size-5" />
             <span>{{ mediaOnly ? addMediaLabel : "Add" }}</span>
          </button>
       </div>
 
+      <p v-if="countHint" class="cms-form-description">{{ countHint }}</p>
+
       <CmsButton
          v-if="visual"
          class="self-start"
@@ -204,6 +213,7 @@
                         icon="document-duplicate"
                         variant="soft"
                         color="neutral"
+                        :disabled="!canAdd"
                         @click="duplicateCurrent"
                      />
                      <CmsButton
@@ -234,6 +244,7 @@
 
 <script setup>
 import {
+  canAddBlock,
   declaresHiddenField,
   isHiddenBlock,
   isTranslatableMediaField,
@@ -260,6 +271,19 @@ const { mediaBaseUrl, i18n } = useCmsRuntime();
 const mediaKeys = useCmsMediaKeys();
 const blocks = computed(() => props.field.blocks ?? {});
 const items = computed(() => Array.isArray(model.value) ? model.value : []);
+const canAdd = computed(() => canAddBlock(props.field, items.value.length));
+function blockCount(count) {
+  return `${count} ${count === 1 ? "block" : "blocks"}`;
+}
+const countHint = computed(() => {
+  const min = props.field.min || void 0;
+  const max = props.field.max;
+  if (min !== void 0 && max !== void 0)
+    return min === max ? `Exactly ${blockCount(min)}.` : `From ${min} to ${blockCount(max)}.`;
+  if (max !== void 0) return `At most ${blockCount(max)}.`;
+  if (min !== void 0) return `At least ${blockCount(min)}.`;
+  return "";
+});
 const mediaOnly = computed(() => {
   const types = Object.entries(blocks.value);
   if (types.length !== 1) return null;
@@ -295,7 +319,7 @@ const pickerOpen = ref(false);
 const pickerFolder = useState("cms-media-picker-folder", () => null);
 function addMedia(media) {
   const target = mediaOnly.value;
-  if (!target) return;
+  if (!target || !canAdd.value) return;
   mediaKeys.remember(media.key);
   model.value = [...items.value, { type: target.type, [target.key]: media.key }];
   pickerOpen.value = false;
@@ -374,7 +398,7 @@ function updateField(index, key, value) {
 }
 function add(type) {
   const block = blocks.value[type];
-  if (!block) return;
+  if (!block || !canAdd.value) return;
   const empty = Object.fromEntries(Object.keys(block.fields).map((k) => [k, null]));
   const index = items.value.length;
   model.value = [...items.value, { type, ...empty }];
@@ -391,6 +415,7 @@ function onPreviewClick(index) {
   if (!mediaOnly.value) openEditor(index);
 }
 function addFirst() {
+  if (!canAdd.value) return;
   if (mediaOnly.value) {
     pickerOpen.value = true;
     return;
@@ -404,7 +429,7 @@ function remove(index) {
 }
 function duplicate(index) {
   const current = items.value[index];
-  if (!current) return;
+  if (!current || !canAdd.value) return;
   const copy = JSON.parse(JSON.stringify(current));
   const next = [...items.value];
   next.splice(index + 1, 0, copy);

package/dist/runtime/app/components/cms/DropdownMenu.vue

@@ -12,11 +12,7 @@
             @click="onClick(item, $event)"
          >
             <span>{{ item.label }}</span>
-            <CmsIcon
-               v-if="item.type === 'checkbox' && item.checked"
-               name="check"
-               class="cms-menu-check size-3.5"
-            />
+            <CmsIcon v-if="item.checked" name="check" class="cms-menu-check size-3.5" />
          </button>
       </div>
    </div>

package/dist/runtime/app/components/cms/EntryDrawer.d.vue.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     collection: string;
     config: CmsEntry;
     entryId: string | null;
+    initial?: Record<string, unknown> | null;
 };
 type __VLS_ModelProps = {
     'open'?: boolean;
@@ -11,10 +12,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     saved: () => any;
     deleted: () => any;
+    duplicate: (values: Record<string, unknown>) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSaved?: (() => any) | undefined;
     onDeleted?: (() => any) | undefined;
+    onDuplicate?: ((values: Record<string, unknown>) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;