@xleddyl/nuxt-cms 0.1.27 → 0.1.29

package/README.md

@@ -20,10 +20,6 @@ Register the module and configure it under the `cms` key in `nuxt.config.ts`:
 export default defineNuxtConfig({
    modules: ['@xleddyl/nuxt-cms'],
    cms: {
-      database: {
-         driver: 'sqlite', // 'sqlite' | 'postgres' (with `url`) | 'libsql' (Turso/remote, with `url` + `authToken`)
-         path: 'data/cms.db',
-      },
       i18n: {
          locales: ['en', 'it'],
          defaultLocale: 'en',
@@ -32,6 +28,11 @@ export default defineNuxtConfig({
 })
 ```
 
+`database` defaults to SQLite (`{ driver: 'sqlite', path: 'data/cms.db' }`) and can be omitted
+entirely. Switch it to `{ driver: 'postgres', url: '...' }` or
+`{ driver: 'libsql', url: '...', authToken: '...' }` (Turso/remote); see
+[Configuration](docs/configuration.md) for every option.
+
 Then declare your content types in a `cms.config.ts` at the project root with `defineCmsConfig()`.
 
 ### Disabling the CMS

package/dist/module.d.mts

@@ -1,41 +1,48 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { MediaStorageMode } from '../dist/runtime/shared/index.js';
-
-type Dialect = 'sqlite' | 'postgres';
-type Driver = Dialect | 'libsql';
 
+type ModuleOptionsDatabase = {
+    driver?: 'sqlite';
+    path?: string;
+} | {
+    driver: 'postgres';
+    url?: string;
+} | {
+    driver: 'libsql';
+    url?: string;
+    authToken?: string;
+};
+type ModuleOptionsMedia = {
+    storage?: 's3';
+    endpoint?: string;
+    region?: string;
+    bucket?: string;
+    accessKeyId?: string;
+    secretAccessKey?: string;
+    publicBaseUrl?: string;
+    presignExpiry?: number;
+    maxFileSize?: number;
+} | {
+    storage: 'local';
+    publicBaseUrl: string;
+};
 interface ModuleOptions {
     enabled?: boolean;
-    configPath: string;
-    admin: {
-        email: string;
-        password: string;
-    };
-    database: {
-        driver?: Driver;
-        path?: string;
-        url?: string;
-        authToken?: string;
-    };
-    media: {
-        storage: MediaStorageMode;
-        endpoint: string;
-        region: string;
-        bucket: string;
-        publicBaseUrl: string;
-        presignExpiry: number;
-        accessKeyId: string;
-        secretAccessKey: string;
+    configPath?: string;
+    admin?: {
+        email?: string;
+        password?: string;
     };
-    i18n: {
-        locales: string[];
-        defaultLocale: string;
+    database?: ModuleOptionsDatabase;
+    media?: ModuleOptionsMedia;
+    i18n?: {
+        locales?: string[];
+        defaultLocale?: string;
     };
-    graphql: {
-        maxDepth: number;
+    graphql?: {
+        maxDepth?: number;
     };
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
-export type { ModuleOptions };
+export type { ModuleOptions, ModuleOptionsDatabase, ModuleOptionsMedia };

package/dist/module.json

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

package/dist/module.mjs

@@ -10,7 +10,7 @@ import { introspectionFromSchema, buildSchema } from 'graphql';
 import { minifyIntrospection, outputIntrospectionFile } from 'gql.tada/internal';
 import { createJiti } from 'jiti';
 import { typeName, blockTypeName, blockUnionName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
-import { isMultiSelect, isTranslatableField } from '../dist/runtime/shared/index.js';
+import { isMultiSelect, isTranslatableField, isTranslatableMediaField, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
 
 const IDENTIFIER = /^[a-z_]\w*$/i;
 const RESERVED_ENTRY_KEYS = ["admin", "auth", "login", "media", "graphql", "cms_media"];
@@ -96,8 +96,10 @@ function validateConfig(config, i18n) {
         columnNames.add(column);
       }
       if (field.translatable) {
-        if (field.type !== "text" && field.type !== "richtext")
-          errors.push(`${fat}: translatable is only supported on text and richtext fields`);
+        if (field.type !== "text" && field.type !== "richtext" && field.type !== "media")
+          errors.push(
+            `${fat}: translatable is only supported on text, richtext and media fields`
+          );
         if (!locales.length)
           errors.push(`${fat}: translatable requires cms.i18n.locales in nuxt.config`);
       }
@@ -207,7 +209,7 @@ function columnExpr(key, field, dialect) {
   const col = snakeCase(key);
   let expr;
   if (isTranslatableField(field)) {
-    expr = jsonExpr(col, dialect);
+    expr = isTranslatableMediaField(field) ? `text('${col}')` : jsonExpr(col, dialect);
     if (field.required) expr += ".notNull()";
     return `  ${key}: ${expr},`;
   }
@@ -304,7 +306,7 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   if (pg && fields.some((f) => f.type === "date")) core.add("date");
   if (pg && fields.some((f) => f.type === "boolean")) core.add("boolean");
   if (pg && fields.some(
-    (f) => f.type === "json" || f.type === "blocks" || isTranslatableField(f) || isMultiSelect(f)
+    (f) => f.type === "json" || f.type === "blocks" || isTranslatableField(f) && !isTranslatableMediaField(f) || isMultiSelect(f)
   ))
     core.add("jsonb");
   if (pg) core.add("timestamp");
@@ -428,6 +430,64 @@ function resolveCmsEnabled(explicit, envValue) {
   return true;
 }
 
+function resolveDatabaseOptions(database) {
+  if (database?.driver === "postgres") {
+    return { driver: "postgres", path: "data/cms.db", url: database.url ?? "", authToken: "" };
+  }
+  if (database?.driver === "libsql") {
+    return {
+      driver: "libsql",
+      path: "data/cms.db",
+      url: database.url ?? "",
+      authToken: database.authToken ?? ""
+    };
+  }
+  return { driver: "sqlite", path: database?.path ?? "data/cms.db", url: "", authToken: "" };
+}
+function resolveMediaOptions(media) {
+  if (media?.storage === "local") {
+    return {
+      storage: "local",
+      endpoint: "",
+      region: "auto",
+      bucket: "",
+      accessKeyId: "",
+      secretAccessKey: "",
+      presignExpiry: 600,
+      maxFileSize: DEFAULT_MEDIA_MAX_FILE_SIZE,
+      publicBaseUrl: media.publicBaseUrl
+    };
+  }
+  return {
+    storage: "s3",
+    endpoint: media?.endpoint ?? "",
+    region: media?.region ?? "auto",
+    bucket: media?.bucket ?? "",
+    accessKeyId: media?.accessKeyId ?? "",
+    secretAccessKey: media?.secretAccessKey ?? "",
+    presignExpiry: media?.presignExpiry ?? 600,
+    maxFileSize: media?.maxFileSize ?? DEFAULT_MEDIA_MAX_FILE_SIZE,
+    publicBaseUrl: media?.publicBaseUrl ?? ""
+  };
+}
+function resolveModuleOptions(options) {
+  return {
+    configPath: options.configPath ?? "cms.config",
+    admin: {
+      email: options.admin?.email ?? "",
+      password: options.admin?.password ?? ""
+    },
+    database: resolveDatabaseOptions(options.database),
+    media: resolveMediaOptions(options.media),
+    i18n: {
+      locales: options.i18n?.locales ?? [],
+      defaultLocale: options.i18n?.defaultLocale ?? "en"
+    },
+    graphql: {
+      maxDepth: options.graphql?.maxDepth ?? 8
+    }
+  };
+}
 const module$1 = defineNuxtModule({
   meta: {
     name: "@xleddyl/nuxt-cms",
@@ -445,9 +505,7 @@ const module$1 = defineNuxtModule({
     },
     database: {
       driver: "sqlite",
-      path: "data/cms.db",
-      url: "",
-      authToken: ""
+      path: "data/cms.db"
     },
     media: {
       storage: "s3",
@@ -456,6 +514,7 @@ const module$1 = defineNuxtModule({
       bucket: "",
       publicBaseUrl: "",
       presignExpiry: 600,
+      maxFileSize: DEFAULT_MEDIA_MAX_FILE_SIZE,
       accessKeyId: "",
       secretAccessKey: ""
     },
@@ -470,6 +529,7 @@ const module$1 = defineNuxtModule({
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     const logger = useLogger("nuxt-cms");
+    const resolved = resolveModuleOptions(options);
     if (!resolveCmsEnabled(options.enabled, process.env[CMS_ENABLED_ENV])) {
       const stub = resolver.resolve("./runtime/app/composables/cms-query-disabled");
       addImports([
@@ -477,16 +537,38 @@ const module$1 = defineNuxtModule({
         { name: "$cmsQuery", from: stub }
       ]);
       nuxt.options.runtimeConfig.public.cms = {
-        mediaBaseUrl: options.media.publicBaseUrl,
-        mediaStorage: options.media.storage,
-        i18n: options.i18n
+        mediaBaseUrl: resolved.media.publicBaseUrl,
+        mediaStorage: resolved.media.storage,
+        mediaMaxFileSize: resolved.media.maxFileSize,
+        i18n: resolved.i18n
       };
       logger.info(
         "[nuxt-cms] disabled: registering no-op useCms/$cmsQuery stubs, skipping admin, server and database setup"
       );
       return;
     }
-    const configPath = await resolvePath(options.configPath, { cwd: nuxt.options.rootDir });
+    if ((resolved.database.driver === "postgres" || resolved.database.driver === "libsql") && !resolved.database.url && !process.env.NUXT_CMS_DATABASE_URL) {
+      logger.warn(
+        `[nuxt-cms] database.driver is '${resolved.database.driver}' but no url is configured (database.url or NUXT_CMS_DATABASE_URL); the app will fail to connect unless one is provided before the server starts.`
+      );
+    }
+    if (!Number.isInteger(resolved.media.maxFileSize) || resolved.media.maxFileSize <= 0) {
+      throw new Error(
+        `[nuxt-cms] media.maxFileSize must be a positive integer number of bytes, got ${resolved.media.maxFileSize}`
+      );
+    }
+    const s3KeysConfigured = [
+      resolved.media.endpoint,
+      resolved.media.bucket,
+      resolved.media.accessKeyId,
+      resolved.media.secretAccessKey
+    ].some(Boolean);
+    if (resolved.media.storage === "s3" && s3KeysConfigured && !resolved.media.publicBaseUrl && !process.env.NUXT_PUBLIC_CMS_MEDIA_BASE_URL) {
+      logger.warn(
+        "[nuxt-cms] media.storage is 's3' with credentials configured but no publicBaseUrl (media.publicBaseUrl or NUXT_PUBLIC_CMS_MEDIA_BASE_URL); uploaded media URLs will be null."
+      );
+    }
+    const configPath = await resolvePath(resolved.configPath, { cwd: nuxt.options.rootDir });
     nuxt.options.alias["#nuxt-cms"] = resolver.resolve("./runtime/shared/index");
     nuxt.options.watch.push(configPath);
     let cmsConfig = {};
@@ -499,11 +581,11 @@ const module$1 = defineNuxtModule({
       cmsConfig = await jiti.import(configPath, { default: true });
     } else {
       logger.warn(
-        `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry \u2014 create a ${options.configPath}.ts with defineCmsConfig().`
+        `[nuxt-cms] Config file not found: ${configPath}. Using an empty registry \u2014 create a ${resolved.configPath}.ts with defineCmsConfig().`
       );
       nuxt.options.alias["#cms-config"] = resolver.resolve("./runtime/shared/empty-config");
     }
-    const configErrors = validateConfig(cmsConfig, options.i18n);
+    const configErrors = validateConfig(cmsConfig, resolved.i18n);
     if (configErrors.length) {
       for (const error of configErrors) logger.error(error);
       throw new Error(
@@ -523,7 +605,7 @@ const module$1 = defineNuxtModule({
       write: true,
       getContents: () => renderSchemaFile(
         cmsConfig,
-        options.database.driver === "postgres" ? "postgres" : "sqlite",
+        resolved.database.driver === "postgres" ? "postgres" : "sqlite",
         resolveImport
       )
     });
@@ -588,11 +670,11 @@ const module$1 = defineNuxtModule({
       { name: "$cmsQuery", from: resolver.resolve("./runtime/app/composables/cms-query") }
     ]);
     const {
-      driver = "sqlite",
-      path: dbPath = "data/cms.db",
-      url: databaseUrl = "",
-      authToken: databaseAuthToken = ""
-    } = options.database;
+      driver,
+      path: dbPath,
+      url: databaseUrl,
+      authToken: databaseAuthToken
+    } = resolved.database;
     nuxt.options.alias["#cms-db"] = resolver.resolve(
       driver === "postgres" ? "./runtime/server/utils/db-postgres" : driver === "libsql" ? "./runtime/server/utils/db-libsql" : "./runtime/server/utils/db-sqlite"
     );
@@ -645,11 +727,11 @@ const module$1 = defineNuxtModule({
       });
     }
     const publicDir = resolve(nuxt.options.rootDir, nuxt.options.dir?.public ?? "public");
-    const mediaLocalRoot = options.media.storage === "local" && options.media.publicBaseUrl.startsWith("/") ? join(publicDir, ...options.media.publicBaseUrl.split("/").filter(Boolean)) : "";
+    const mediaLocalRoot = resolved.media.storage === "local" && resolved.media.publicBaseUrl.startsWith("/") ? join(publicDir, ...resolved.media.publicBaseUrl.split("/").filter(Boolean)) : "";
     const existingConfig = nuxt.options.runtimeConfig.cms ?? {};
     nuxt.options.runtimeConfig.cms = {
-      adminEmail: options.admin.email,
-      adminPassword: options.admin.password,
+      adminEmail: resolved.admin.email,
+      adminPassword: resolved.admin.password,
       databaseUrl,
       databaseAuthToken,
       dbPath: resolvedDbPath,
@@ -657,25 +739,27 @@ const module$1 = defineNuxtModule({
       ...existingConfig,
       graphql: {
         graphiql: nuxt.options.dev,
-        maxDepth: options.graphql.maxDepth,
+        maxDepth: resolved.graphql.maxDepth,
         ...existingConfig.graphql ?? {}
       },
       media: {
-        storage: options.media.storage,
-        endpoint: options.media.endpoint,
-        region: options.media.region,
-        bucket: options.media.bucket,
-        presignExpiry: options.media.presignExpiry,
-        accessKeyId: options.media.accessKeyId,
-        secretAccessKey: options.media.secretAccessKey,
+        storage: resolved.media.storage,
+        endpoint: resolved.media.endpoint,
+        region: resolved.media.region,
+        bucket: resolved.media.bucket,
+        presignExpiry: resolved.media.presignExpiry,
+        maxFileSize: resolved.media.maxFileSize,
+        accessKeyId: resolved.media.accessKeyId,
+        secretAccessKey: resolved.media.secretAccessKey,
         localRoot: mediaLocalRoot,
         ...existingConfig.media ?? {}
       }
     };
     nuxt.options.runtimeConfig.public.cms = {
-      mediaBaseUrl: options.media.publicBaseUrl,
-      mediaStorage: options.media.storage,
-      i18n: options.i18n
+      mediaBaseUrl: resolved.media.publicBaseUrl,
+      mediaStorage: resolved.media.storage,
+      mediaMaxFileSize: resolved.media.maxFileSize,
+      i18n: resolved.i18n
     };
     addTypeTemplate(
       {
@@ -702,7 +786,11 @@ const module$1 = defineNuxtModule({
     );
     addVitePlugin(tailwindcss());
     addVitePlugin(svgLoader({ defaultImport: "url", svgoConfig: { plugins: ["prefixIds"] } }));
-    nuxt.options.css.push(resolver.resolve("./runtime/assets/main.css"));
+    nuxt.options.css.push(
+      resolveImport("@fontsource-variable/hanken-grotesk/index.css"),
+      resolveImport("@fontsource/fragment-mono/index.css"),
+      resolver.resolve("./runtime/assets/main.css")
+    );
     nuxt.hook("app:templates", (app) => {
       app.layouts["cms-admin"] = {
         name: "cms-admin",

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
-    color?: 'error';
-    variant?: string;
+    color?: 'error' | 'success' | 'warning' | 'neutral';
     title?: string;
 };
 declare var __VLS_1: {};

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

@@ -1,6 +1,6 @@
 <template>
-   <div class="cms-alert" :class="`cms-alert-${color ?? 'error'}`">
-      <p v-if="title" class="font-medium">{{ title }}</p>
+   <div class="cms-alert" :class="`cms-alert-${color ?? 'neutral'}`" role="alert">
+      <p v-if="title" class="cms-alert-title">{{ title }}</p>
       <slot />
    </div>
 </template>
@@ -8,7 +8,6 @@
 <script setup>
 defineProps({
   color: { type: String, required: false },
-  variant: { type: String, required: false },
   title: { type: String, required: false }
 });
 </script>

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

@@ -1,6 +1,5 @@
 type __VLS_Props = {
-    color?: 'error';
-    variant?: string;
+    color?: 'error' | 'success' | 'warning' | 'neutral';
     title?: string;
 };
 declare var __VLS_1: {};

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

@@ -8,7 +8,7 @@
          <div class="flex items-center gap-1">
             <button
                type="button"
-               class="cms-kicker flex grow items-center gap-1.5 text-left"
+               class="cms-block-label flex grow items-center gap-1.5 text-left"
                :aria-label="isCollapsed(item) ? 'Expand block' : 'Collapse block'"
                @click="toggleCollapsed(item)"
             >
@@ -69,7 +69,7 @@
          </template>
       </div>
       <CmsDropdownMenu :items="addItems" class="self-start">
-         <CmsButton label="Add block" icon="plus" variant="subtle" />
+         <CmsButton label="Add block" icon="plus" variant="soft" />
       </CmsDropdownMenu>
    </div>
 </template>

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

@@ -6,7 +6,7 @@ type __VLS_Props = {
     trailingIcon?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     color?: 'primary' | 'neutral' | 'error' | 'success';
-    variant?: 'solid' | 'subtle' | 'soft' | 'ghost';
+    variant?: 'solid' | 'soft' | 'ghost';
     disabled?: boolean;
     loading?: boolean;
     block?: boolean;

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

@@ -6,7 +6,7 @@ type __VLS_Props = {
     trailingIcon?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     color?: 'primary' | 'neutral' | 'error' | 'success';
-    variant?: 'solid' | 'subtle' | 'soft' | 'ghost';
+    variant?: 'solid' | 'soft' | 'ghost';
     disabled?: boolean;
     loading?: boolean;
     block?: boolean;

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

@@ -9,7 +9,7 @@
          <div class="cms-form">
             <p class="text-sm">{{ state.message }}</p>
             <div class="cms-actions is-end">
-               <CmsButton label="Cancel" variant="subtle" color="neutral" @click="finish(false)" />
+               <CmsButton label="Cancel" variant="soft" color="neutral" @click="finish(false)" />
                <CmsButton
                   :label="state.confirmLabel ?? 'Confirm'"
                   color="error"

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

@@ -34,7 +34,7 @@
                type="submit"
                :form="FORM_ID"
                :label="published ? 'Make draft' : 'Publish'"
-               variant="subtle"
+               variant="soft"
                :loading="saving"
                :disabled="loading"
                @click="togglePublished"

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

@@ -17,7 +17,7 @@
          <CmsButton
             label="Replace"
             icon="arrow-path"
-            variant="subtle"
+            variant="soft"
             color="neutral"
             size="xs"
             @click="openGallery"
@@ -25,7 +25,7 @@
          <CmsButton
             label="Remove"
             icon="trash"
-            variant="subtle"
+            variant="soft"
             color="error"
             size="xs"
             @click="clear"

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

@@ -53,7 +53,7 @@
             <CmsButton
                label="New folder"
                icon="folder-plus"
-               variant="subtle"
+               variant="soft"
                size="sm"
                @click="openNewFolder"
             />
@@ -120,7 +120,7 @@
       </div>
 
       <CmsEmptyState v-else-if="loadError" icon="exclamation-triangle" title="Could not load media">
-         <CmsButton label="Retry" icon="arrow-path" variant="subtle" @click="reload" />
+         <CmsButton label="Retry" icon="arrow-path" variant="soft" @click="reload" />
       </CmsEmptyState>
 
       <CmsEmptyState
@@ -140,7 +140,7 @@
             v-if="!readOnly"
             label="Upload"
             icon="plus"
-            variant="subtle"
+            variant="soft"
             @click="uploadOpen = true"
          />
       </CmsEmptyState>

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

@@ -36,7 +36,9 @@
 </template>
 
 <script setup>
+import { formatFileSize } from "#nuxt-cms";
 import { computed, ref } from "#imports";
+import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
 const props = defineProps({
   multiple: { type: Boolean, required: false },
@@ -46,6 +48,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["uploaded"]);
 const toast = useCmsToast();
+const { mediaMaxFileSize } = useCmsRuntime();
 async function imageDimensions(file) {
   if (!file.type.startsWith("image/")) return {};
   try {
@@ -74,7 +77,6 @@ function matchesAccept(file) {
     return file.type.toLowerCase() === pattern;
   });
 }
-const MAX_FILE_SIZE = 10 * 1024 * 1024;
 async function uploadOne(file) {
   const presign = await $fetch("/api/cms/admin/media/presign", {
     method: "POST",
@@ -106,11 +108,14 @@ async function uploadOne(file) {
 }
 async function handleFiles(list) {
   let files = Array.from(list).filter(matchesAccept);
-  const tooLarge = files.filter((file) => file.size > MAX_FILE_SIZE);
+  const tooLarge = files.filter((file) => file.size > mediaMaxFileSize);
   for (const file of tooLarge) {
-    toast.add({ title: `File too large (max 10 MB): ${file.name}`, color: "error" });
+    toast.add({
+      title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
+      color: "error"
+    });
   }
-  files = files.filter((file) => file.size <= MAX_FILE_SIZE);
+  files = files.filter((file) => file.size <= mediaMaxFileSize);
   if (!props.multiple) files = files.slice(0, 1);
   if (!files.length || uploading.value) return;
   uploading.value = true;

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

@@ -6,13 +6,13 @@ type __VLS_ModelProps = {
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_7) => any;
+    header?: (props: typeof __VLS_13) => any;
 } & {
-    body?: (props: typeof __VLS_9) => any;
+    body?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "after:leave": () => any;

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

@@ -2,10 +2,10 @@
    <Teleport to="body">
       <!-- Wrapped in .cms-scope so the vendored Tailwind utilities still apply
            once teleported outside the admin layout root. -->
-      <div v-if="open" class="cms-scope">
-         <div class="cms-overlay" @click.self="close">
+      <Transition name="cms-modal">
+         <div v-if="open" class="cms-scope cms-overlay" @click.self="close">
             <div
-               class="cms-modal cms-rise"
+               class="cms-modal"
                :class="size ? `is-${size}` : void 0"
                role="dialog"
                aria-modal="true"
@@ -22,7 +22,7 @@
                </div>
             </div>
          </div>
-      </div>
+      </Transition>
    </Teleport>
 </template>
 

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

@@ -6,13 +6,13 @@ type __VLS_ModelProps = {
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+declare var __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_7) => any;
+    header?: (props: typeof __VLS_13) => any;
 } & {
-    body?: (props: typeof __VLS_9) => any;
+    body?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "after:leave": () => any;

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

@@ -1,5 +1,4 @@
 type __VLS_Props = {
-    kicker?: string;
     title: string;
 };
 declare var __VLS_1: {}, __VLS_3: {};

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

@@ -1,9 +1,6 @@
 <template>
    <header class="cms-page-header">
       <div class="cms-page-heading">
-         <div v-if="kicker" class="cms-kicker">
-            {{ kicker }}
-         </div>
          <div class="cms-actions">
             <h1 class="cms-title cms-title-md">
                {{ title }}
@@ -17,7 +14,6 @@
 
 <script setup>
 defineProps({
-  kicker: { type: String, required: false },
   title: { type: String, required: true }
 });
 </script>