@xleddyl/nuxt-cms 0.1.55 → 0.1.57

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "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, blocksFieldTypeName, renderGraphqlSdl } from '../dist/runtime/shared/graphql-sdl.js';
 import { migrationsDirFor } from '../dist/runtime/shared/migrations-dir.js';
-import { isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, PAGE_PATH_FIELD, pageRoutes, fieldConditions, isRequiredField, pageFields, isPrivateField, entryFieldsFor, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
+import { pageColumnFields, isTranslatableField, isTranslatableMediaField, isMultiSelect, pageAllFields, PAGE_PATH_FIELD, pageRoutes, fieldConditions, pageFieldsTableName, pageMediaTableName, isRequiredField, pageFields, isPrivateField, entryFieldsFor, mediaTypeFilter, DEFAULT_MEDIA_MAX_FILE_SIZE } from '../dist/runtime/shared/index.js';
 import { scanMediaDirectory, readMediaFileMeta } from '../dist/runtime/server/utils/media-sync.js';
 import { createHash } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
@@ -181,9 +181,11 @@ function validateConfig(config, i18n) {
           declared.set(key, field.type);
         }
       }
+      errors.push(...pageColumnsErrors(at, entry));
     } else if (entry.overrides || entry.routes || entry.include || entry.exclude) {
       errors.push(`${at}: routes, include, exclude and overrides need kind 'page'`);
     }
+    if (entry.kind !== "page" && entry.columns) errors.push(`${at}: columns need kind 'page'`);
     if (entry.drafts && entry.kind !== "collection")
       errors.push(`${at}: drafts are only supported on collections`);
     const tabIds = /* @__PURE__ */ new Set();
@@ -386,6 +388,10 @@ function validateConfig(config, i18n) {
       }
     };
     registerTable(name, `entry '${name}'`);
+    if (entry.kind === "page") {
+      registerTable(pageFieldsTableName(name), `the field rows table of '${name}'`);
+      registerTable(pageMediaTableName(name), `the media rows table of '${name}'`);
+    }
     for (const [key, field] of Object.entries(entry.fields ?? {})) {
       if (isManyToMany(field))
         registerTable(`${name}_${snakeCase(key)}`, `the join table of '${name}.${key}'`);
@@ -393,6 +399,35 @@ function validateConfig(config, i18n) {
   }
   return errors;
 }
+function pageColumnsErrors(at, entry) {
+  const errors = [];
+  if (entry.table) errors.push(`${at}: page entries cannot use a custom table`);
+  const columns = /* @__PURE__ */ new Set();
+  for (const key of entry.columns ?? []) {
+    const cat = `${at}, column '${key}'`;
+    if (columns.has(key)) errors.push(`${cat}: listed more than once`);
+    columns.add(key);
+    if (!Object.hasOwn(entry.fields ?? {}, key)) {
+      errors.push(`${cat}: not a field declared for every page in fields`);
+      continue;
+    }
+    for (const [path, override] of Object.entries(entry.overrides ?? {})) {
+      if (Object.hasOwn(override, key) && !override[key])
+        errors.push(`${cat}: removed from '${path}', a column must exist on every page`);
+    }
+  }
+  for (const [key, field] of Object.entries(pageAllFields(entry))) {
+    const fat = `${at}, field '${key}'`;
+    if (isManyToMany(field)) {
+      errors.push(`${fat}: many-to-many relations are not supported on pages`);
+      continue;
+    }
+    if (columns.has(key)) continue;
+    if (field.type === "relation" || field.type === "slug")
+      errors.push(`${fat}: ${field.type} fields on pages need to be listed in columns`);
+  }
+  return errors;
+}
 function snakeCase(key) {
   return key.replace(/[A-Z]/g, (c) => `_${c.toLowerCase()}`);
 }
@@ -455,7 +490,7 @@ function tableExpr(name, entry, dialect) {
   lines.push(`  id: text('id').primaryKey(),`);
   if (entry.kind === "page") lines.push(`  path: text('path').notNull().unique(),`);
   for (const [key, field] of Object.entries(
-    entry.kind === "page" ? pageAllFields(entry) : entry.fields
+    entry.kind === "page" ? pageColumnFields(entry) : entry.fields
   )) {
     if (isManyToMany(field)) continue;
     lines.push(columnExpr(key, field, dialect));
@@ -478,6 +513,19 @@ function joinTableExpr(name, key, field, dialect) {
   position: integer('position').notNull().default(0),
 }, table => [primaryKey({ columns: [table.sourceId, table.targetId] })])`;
 }
+function pageRowsTableExprs(name, dialect) {
+  const tableFn = dialect === "postgres" ? "pgTable" : "sqliteTable";
+  const rowsTable = (table, valueLine) => `export const ${table} = ${tableFn}('${table}', {
+  pageId: text('page_id').notNull().references(() => ${name}.id, { onDelete: 'cascade' }),
+  key: text('key').notNull(),
+  position: integer('position').notNull().default(0),
+  ${valueLine},
+}, table => [primaryKey({ columns: [table.pageId, table.key, table.position] })])`;
+  return [
+    rowsTable(pageFieldsTableName(name), `value: text('value').notNull()`),
+    rowsTable(pageMediaTableName(name), `mediaKey: text('media_key').notNull()`)
+  ];
+}
 function mediaTableExpr(dialect) {
   const pg = dialect === "postgres";
   const tableFn = pg ? "pgTable" : "sqliteTable";
@@ -495,7 +543,10 @@ function mediaTableExpr(dialect) {
 }
 function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   const derived = Object.entries(config).filter(([, entry]) => !entry.table);
-  const fields = derived.flatMap(([, entry]) => Object.values(entry.fields));
+  const fields = derived.flatMap(
+    ([, entry]) => Object.values(entry.kind === "page" ? pageColumnFields(entry) : entry.fields)
+  );
+  const rowsEntries = derived.filter(([, entry]) => entry.kind === "page");
   const pg = dialect === "postgres";
   const core = /* @__PURE__ */ new Set(["integer", "text", pg ? "pgTable" : "sqliteTable"]);
   if (fields.some((f) => f.type === "number" && !f.integer))
@@ -507,7 +558,7 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   ))
     core.add("jsonb");
   if (pg) core.add("timestamp");
-  if (fields.some(isManyToMany)) core.add("primaryKey");
+  if (fields.some(isManyToMany) || rowsEntries.length) core.add("primaryKey");
   const imports = [
     ...pg ? [] : [`import { sql } from '${resolveImport("drizzle-orm")}'`],
     `import { ${[...core].sort().join(", ")} } from '${resolveImport(
@@ -518,9 +569,10 @@ function renderSchemaFile(config, dialect, resolveImport = (s) => s) {
   const joins = derived.flatMap(
     ([name, entry]) => Object.entries(entry.kind === "page" ? pageAllFields(entry) : entry.fields).filter(([, field]) => isManyToMany(field)).map(([key, field]) => joinTableExpr(name, key, field, dialect))
   );
+  const rows = rowsEntries.flatMap(([name]) => pageRowsTableExprs(name, dialect));
   return `${imports.join("\n")}
 
-${[mediaTableExpr(dialect), ...tables, ...joins].join(
+${[mediaTableExpr(dialect), ...tables, ...joins, ...rows].join(
     "\n\n"
   )}
 `;

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

@@ -8,7 +8,8 @@
             :class="{
   'is-muted': isHidden(item),
   'is-dragging': dragIndex === index,
-  'is-drop-target': dropIndex === index && dragIndex !== index
+  'is-drop-target': dropIndex === index && dragIndex !== index,
+  'is-missing': hasMissingMedia(item)
 }"
             draggable="true"
             @dragstart="onDragStart(index, $event)"
@@ -55,6 +56,13 @@
                   <CmsIcon name="bars-2" class="size-4" />
                </button>
                <span class="cms-block-bar-name" :title="barTitle(item)">{{ barLabel(item) }}</span>
+               <span
+                  v-if="hasMissingMedia(item)"
+                  class="cms-media-missing-icon"
+                  title="Not found in the media library"
+               >
+                  <CmsIcon name="exclamation-triangle" class="size-4" />
+               </span>
                <div class="cms-block-bar-actions">
                   <CmsButton
                      icon="trash"
@@ -150,6 +158,7 @@ import {
   pickTranslatedMedia
 } from "#nuxt-cms";
 import { computed, ref } from "#imports";
+import { useCmsMediaKeys } from "../../composables/cms-media-keys";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 const props = defineProps({
   field: { type: Object, required: true },
@@ -157,6 +166,7 @@ const props = defineProps({
 });
 const model = defineModel({ type: [Array, null], ...{ required: true } });
 const { mediaBaseUrl, i18n } = useCmsRuntime();
+const mediaKeys = useCmsMediaKeys();
 const blocks = computed(() => props.field.blocks ?? {});
 const items = computed(() => Array.isArray(model.value) ? model.value : []);
 let uidCounter = 0;
@@ -192,6 +202,14 @@ function mediaKeyOf(item) {
   }
   return null;
 }
+function hasMissingMedia(item) {
+  return Object.entries(blockOf(item)?.fields ?? {}).some(([key, field]) => {
+    if (field.type !== "media") return false;
+    const raw = item[key];
+    const values = raw && typeof raw === "object" ? Object.values(raw) : [raw];
+    return values.some((value) => mediaKeys.isMissing(value));
+  });
+}
 function previewOf(item) {
   const key = mediaKeyOf(item);
   if (!key) return null;

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

@@ -1,5 +1,9 @@
 <template>
-   <div v-if="model" class="cms-card cms-block-tile cms-media-single">
+   <div
+      v-if="model"
+      class="cms-card cms-block-tile cms-media-single"
+      :class="{ 'is-missing': missing }"
+   >
       <button
          type="button"
          class="cms-block-preview"
@@ -44,6 +48,11 @@
       <span>Choose</span>
    </button>
 
+   <p v-if="missing" class="cms-media-missing">
+      <CmsIcon name="exclamation-triangle" class="size-4" />
+      <span>Not found in the media library</span>
+   </p>
+
    <CmsModal v-model:open="galleryOpen" title="Media" size="lg">
       <template #body>
          <CmsMediaGallery selectable :media-type="mediaType" :accept="accept" @select="onSelect" />
@@ -54,6 +63,7 @@
 <script setup>
 import { computed, ref } from "#imports";
 import { mediaFilename, mediaIconFor, mediaPublicUrl, mediaTypeForKey } from "#nuxt-cms";
+import { useCmsMediaKeys } from "../../composables/cms-media-keys";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 defineProps({
   mediaType: { type: null, required: false },
@@ -61,8 +71,10 @@ defineProps({
 });
 const model = defineModel({ type: [String, null], ...{ required: true } });
 const { mediaBaseUrl } = useCmsRuntime();
+const mediaKeys = useCmsMediaKeys();
 const galleryOpen = ref(false);
 function onSelect(item) {
+  mediaKeys.remember(item.key);
   model.value = item.key;
   galleryOpen.value = false;
 }
@@ -72,6 +84,7 @@ function openGallery() {
 function clear() {
   model.value = null;
 }
+const missing = computed(() => mediaKeys.isMissing(model.value));
 const url = computed(() => model.value ? mediaPublicUrl(mediaBaseUrl, model.value) : null);
 const kind = computed(() => model.value ? mediaTypeForKey(model.value) : "file");
 const icon = computed(() => mediaIconFor(kind.value));

package/dist/runtime/app/composables/cms-media-keys.d.ts

@@ -0,0 +1,4 @@
+export declare function useCmsMediaKeys(): {
+    isMissing: (key: unknown) => boolean;
+    remember: (key: string) => void;
+};

package/dist/runtime/app/composables/cms-media-keys.js

@@ -0,0 +1,21 @@
+import { ref } from "#imports";
+const known = ref(null);
+let loading = null;
+function load() {
+  loading ??= $fetch("/api/cms/admin/media").then((result) => {
+    known.value = result.source.kind === "none" ? null : new Set(result.items.map((item) => item.key));
+  }).catch(() => {
+    known.value = null;
+  });
+  return loading;
+}
+export function useCmsMediaKeys() {
+  if (import.meta.client) void load();
+  function isMissing(key) {
+    return typeof key === "string" && key !== "" && !!known.value && !known.value.has(key);
+  }
+  function remember(key) {
+    if (known.value) known.value = /* @__PURE__ */ new Set([...known.value, key]);
+  }
+  return { isMissing, remember };
+}

package/dist/runtime/app/composables/cms-query-disabled.d.ts

@@ -1,11 +1,8 @@
-import type { AsyncData, AsyncDataOptions } from 'nuxt/app';
+import type { AsyncData } from 'nuxt/app';
+import type { CmsAsyncDataOptions } from './cms-query.js';
 type CmsDisabledResult = Record<string, any>;
 type CmsDisabledVariables = Record<string, any>;
-export interface CmsAsyncDataOptions<ResT, DefaultT> extends Pick<AsyncDataOptions<ResT>, 'server' | 'lazy' | 'immediate' | 'deep' | 'dedupe' | 'watch'> {
-    key?: string;
-    default?: () => DefaultT;
-}
+export type { CmsAsyncDataOptions };
 export declare function cmsQueryKey(query: string, variables?: unknown): string;
 export declare function $cmsQuery<const Q extends string>(query: Q, variables?: CmsDisabledVariables): Promise<CmsDisabledResult>;
 export declare function useCms<const Q extends string, DefaultT = undefined>(query: Q, variables?: CmsDisabledVariables, options?: CmsAsyncDataOptions<CmsDisabledResult, DefaultT>): AsyncData<CmsDisabledResult | DefaultT | undefined, Error | undefined>;
-export {};

package/dist/runtime/app/composables/cms-query.js

@@ -1,13 +1,66 @@
 import { useAsyncData } from "#imports";
+import { CMS_GRAPHQL_BATCH_LIMIT } from "../../shared/index.js";
 const ENDPOINT = "/api/cms/graphql";
+const inFlight = /* @__PURE__ */ new Map();
+let queue = [];
+let scheduled = false;
+function responseError(response) {
+  return new Error(
+    response?.errors?.map((e) => e.message).join("; ") || "Invalid batched GraphQL response"
+  );
+}
+async function sendBatch(batch) {
+  try {
+    if (batch.length === 1) {
+      batch[0].resolve(
+        await $fetch(ENDPOINT, {
+          method: "POST",
+          body: batch[0].body
+        })
+      );
+      return;
+    }
+    const responses = await $fetch(
+      ENDPOINT,
+      { method: "POST", body: batch.map((pending) => pending.body) }
+    );
+    if (!Array.isArray(responses)) throw responseError(responses);
+    batch.forEach((pending, index) => {
+      const response = responses[index];
+      if (response) pending.resolve(response);
+      else pending.reject(responseError(response));
+    });
+  } catch (error) {
+    for (const pending of batch) pending.reject(error);
+  }
+}
+function flushQueue() {
+  const pending = queue;
+  queue = [];
+  scheduled = false;
+  for (let index = 0; index < pending.length; index += CMS_GRAPHQL_BATCH_LIMIT) {
+    void sendBatch(pending.slice(index, index + CMS_GRAPHQL_BATCH_LIMIT));
+  }
+}
+function requestGraphql(body) {
+  const key = JSON.stringify(body);
+  const existing = inFlight.get(key);
+  if (existing) return existing;
+  const request = new Promise((resolve, reject) => {
+    queue.push({ body, resolve, reject });
+    if (!scheduled) {
+      scheduled = true;
+      setTimeout(flushQueue, 0);
+    }
+  }).finally(() => inFlight.delete(key));
+  inFlight.set(key, request);
+  return request;
+}
 export function cmsQueryKey(query, variables) {
   return `cms-gql:${query}:${JSON.stringify(variables ?? {})}`;
 }
 export async function $cmsQuery(query, variables) {
-  const res = await $fetch(ENDPOINT, {
-    method: "POST",
-    body: { query, variables }
-  });
+  const res = await requestGraphql({ query, variables });
   if (res.errors?.length) {
     throw new Error(res.errors.map((e) => e.message).join("; "));
   }

package/dist/runtime/assets/main.css

@@ -1 +1 @@
-@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme) theme(inline);.cms-scope{@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities) source(none)}@source "../app";.cms-scope,body:has(.cms-scope){--cms-canvas:#1b1b1e;--cms-surface:#222226;--cms-field:#2a2a2f;--cms-elevated:#2f2f35;--cms-line:#35353b;--cms-line-strong:#46464e;--cms-text:#ededef;--cms-text-toned:#c2c2c8;--cms-text-muted:#9a9aa3;--cms-text-dimmed:#6e6e78;--cms-fern:#8fae8b;--cms-error:#f0857d;--cms-success:#7fb083;--cms-warning:#d4ad76;--cms-font-ui:"Hanken Grotesk Variable","Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;--cms-font-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--cms-radius-sm:6px;--cms-radius-md:8px;--cms-radius-lg:12px;--cms-shadow-overlay:0 8px 24px rgba(0,0,0,.35);--cms-scrim:rgba(0,0,0,.5);--cms-duration:120ms;--cms-duration-lg:250ms;--cms-ease:cubic-bezier(0.2,0,0,1);color-scheme:dark;--ui-text-dimmed:var(--cms-text-dimmed);--ui-text-muted:var(--cms-text-muted);--ui-text-toned:var(--cms-text-toned);--ui-text:var(--cms-text-toned);--ui-text-highlighted:var(--cms-text);--ui-text-inverted:var(--cms-canvas);--ui-bg:var(--cms-surface);--ui-bg-muted:var(--cms-canvas);--ui-bg-elevated:var(--cms-field);--ui-bg-accented:var(--cms-elevated);--ui-bg-inverted:var(--cms-text);--ui-border:var(--cms-line);--ui-border-muted:var(--cms-line);--ui-border-accented:var(--cms-line-strong);--ui-border-inverted:var(--cms-text);--ui-primary:var(--cms-text);--ui-accent:var(--cms-fern);--ui-error:var(--cms-error);--ui-success:var(--cms-success);--ui-warning:var(--cms-warning);--ui-radius:var(--cms-radius-md);color:var(--ui-text);font-family:var(--cms-font-ui);margin:0;padding:0;-webkit-font-smoothing:antialiased}body:has(.cms-scope) ::-moz-selection{background:color-mix(in oklab,var(--cms-fern) 35%,transparent);color:var(--ui-text-highlighted)}body:has(.cms-scope) ::selection{background:color-mix(in oklab,var(--cms-fern) 35%,transparent);color:var(--ui-text-highlighted)}body:has(.cms-scope) :is(.cms-scope,.cms-scope *){scrollbar-color:var(--cms-line-strong) transparent;scrollbar-width:thin}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar{height:10px;width:10px}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar-track{background:transparent}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar-thumb{background:var(--cms-line-strong);background-clip:content-box;border:3px solid transparent;border-radius:9999px}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--cms-line-strong) 70%,var(--cms-text));background-clip:content-box}.cms-display,.cms-title{font-family:var(--cms-font-ui);font-weight:650;letter-spacing:-.01em}.cms-title{color:var(--ui-text-highlighted)}.cms-title-sm{font-size:1.125rem;line-height:1.4}.cms-title-md{font-size:1.5rem;line-height:1.25}.cms-title-lg{font-size:1.875rem;line-height:1.2}.cms-subtitle{color:var(--ui-text-muted);font-size:.875rem}.cms-accent{color:var(--cms-fern)}.cms-label{color:var(--ui-text-muted);font-size:.75rem;font-weight:500;line-height:1.4}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option],.__clickable):not(:disabled,[aria-disabled=true]){@apply cursor-pointer select-none}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option]):focus-visible{outline:2px solid var(--cms-fern);outline-offset:2px}.cms-canvas{background-color:var(--cms-canvas)}.cms-card{background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg)}.cms-panel{padding:1.75rem}body:has(.cms-scope),html:has(.cms-scope){overscroll-behavior-y:none}.cms-shell{display:flex;min-height:100vh}.cms-sidebar{background:var(--cms-surface);border-right:1px solid var(--cms-line);display:flex;flex-direction:column;flex-shrink:0;gap:1.75rem;height:100vh;padding:1.75rem 1rem;position:sticky;top:0;width:16rem}.cms-sidebar-brand{color:var(--ui-text-highlighted);font-family:var(--cms-font-ui);font-size:1.25rem;font-weight:650;letter-spacing:-.01em;padding-inline:.75rem}.cms-sidebar-nav{display:flex;flex:1;flex-direction:column;gap:1.5rem;overflow-y:auto;overscroll-behavior-y:none}.cms-sidebar-group{display:flex;flex-direction:column;gap:.25rem}.cms-sidebar-group>.cms-label{margin-bottom:.5rem;padding-inline:.75rem}.cms-sidebar-footer{border-top:1px solid var(--cms-line);display:flex;flex-direction:column;gap:.75rem;padding-top:1rem}.cms-sidebar-footer .cms-btn.is-block{color:var(--ui-text-muted);justify-content:space-between;padding-inline:.75rem}.cms-sidebar-footer .cms-btn.is-block:hover{background:var(--cms-field);color:var(--ui-text)}.cms-main{flex:1;height:100vh;min-width:0;overflow-y:auto;overscroll-behavior-y:none;padding:2.5rem}.cms-main-inner{margin-inline:auto;max-width:64rem;min-height:100%;width:100%}.cms-main-inner,.cms-page{display:flex;flex-direction:column}.cms-page{gap:1.75rem}.cms-page.is-fill{flex:1;min-height:0}.cms-page-header{align-items:flex-end;display:flex;gap:1rem;justify-content:space-between}.cms-page-heading{display:flex;flex-direction:column;gap:.5rem}.cms-breadcrumb{align-items:center;color:var(--ui-text-muted);display:flex;font-size:.75rem;font-weight:500;gap:.375rem;line-height:1.4}.cms-breadcrumb-link{border-radius:.25rem;padding:.0625rem .125rem;transition:color .15s ease}.cms-breadcrumb-link:hover{color:var(--ui-text-highlighted)}.cms-breadcrumb-separator{color:var(--ui-text-dimmed)}.cms-tree-row{align-items:center;display:flex;gap:.75rem;padding:.625rem 1rem;transition:background-color .15s ease}.cms-tree-row:hover{background-color:var(--ui-bg-elevated)}.cms-tree-branch{color:var(--ui-text-dimmed);flex-shrink:0;transform:scaleY(-1) rotate(90deg);width:1rem}.cms-toolbar{align-items:center;display:flex;gap:1.5rem}.cms-toolbar-actions{align-items:center;display:flex;flex-shrink:0;gap:.5rem;margin-left:auto}.cms-actions{align-items:center;display:flex;gap:.75rem}.cms-actions.is-end{justify-content:flex-end}.cms-spinner{color:var(--ui-text-dimmed);flex:1;justify-content:center;padding-block:2.5rem}.cms-empty,.cms-spinner{align-items:center;display:flex}.cms-empty{background:color-mix(in oklab,var(--cms-surface) 55%,transparent);border:1px dashed var(--cms-line-strong);border-radius:var(--cms-radius-lg);flex-direction:column;gap:.5rem;padding:3.5rem;text-align:center}.cms-empty.is-fill{flex:1;justify-content:center}.cms-empty-icon{color:var(--cms-fern);margin-bottom:.25rem}.cms-empty>.cms-btn{margin-top:.75rem}.cms-auth{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:1.5rem}.cms-auth-panel{gap:2rem;max-width:24rem;width:100%}.cms-auth-header,.cms-auth-panel{display:flex;flex-direction:column}.cms-auth-header{align-items:center;gap:.75rem;text-align:center}.cms-auth-card{padding:1.75rem}.cms-navlink{align-items:center;border-radius:var(--cms-radius-md);color:var(--ui-text-toned);display:flex;font-size:.875rem;font-weight:500;gap:.625rem;padding:.5rem .75rem;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-navlink:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-navlink.is-active{background:var(--cms-field);color:var(--cms-fern)}.cms-navlink-icon{color:var(--ui-text-dimmed)}.cms-navlink.is-active .cms-navlink-icon{color:var(--cms-fern)}.cms-badge{align-items:center;border:1px solid transparent;border-radius:var(--cms-radius-md);display:inline-flex;font-family:var(--cms-font-mono);font-size:.6875rem;letter-spacing:.08em;line-height:1.4;padding:.1875rem .5rem;pointer-events:none;text-transform:uppercase;transition:background-color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-badge.is-published{background:color-mix(in oklab,var(--cms-success) 18%,transparent);border-color:color-mix(in oklab,var(--cms-success) 32%,transparent);color:var(--cms-success)}.cms-badge.is-muted{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-muted)}.cms-badge.is-draft{background:transparent}.cms-badge.is-draft,.cms-dropzone{border:1px dashed var(--cms-line-strong);color:var(--ui-text-muted)}.cms-dropzone{align-items:center;background:color-mix(in oklab,var(--cms-surface) 55%,transparent);border-radius:var(--cms-radius-lg);cursor:pointer;display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:2rem 1.5rem;transition:border-color var(--cms-duration) var(--cms-ease),background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease);width:100%}.cms-dropzone.is-over,.cms-dropzone:hover{background:var(--cms-field);border-color:var(--cms-fern);color:var(--ui-text-highlighted)}.cms-dropzone.is-dense{flex-direction:row;gap:.625rem;padding:.875rem 1.25rem}.cms-dropzone.is-busy{opacity:.7;pointer-events:none}.cms-pill{align-items:center;background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:9999px;color:var(--ui-text-muted);cursor:pointer;display:inline-flex;flex:none;font-size:.8125rem;gap:.35rem;line-height:1.4;padding:.3rem .8rem;transition:background-color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-pill:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-pill.is-active{background:var(--cms-field);border-color:color-mix(in oklab,var(--cms-fern) 45%,transparent);color:var(--cms-fern)}.cms-pill.is-empty{border-style:dashed}.cms-pill-group{align-items:center;display:inline-flex;gap:.125rem}.cms-pill-group .cms-pill{padding-right:.6rem}.cms-pill-discard{align-items:center;border-radius:9999px;color:var(--ui-text-dimmed);cursor:pointer;display:inline-flex;height:1.25rem;justify-content:center;transition:color var(--cms-duration) var(--cms-ease);width:1.25rem}.cms-pill-discard:hover{color:var(--ui-error)}.cms-folder-picker{align-items:center;display:flex;flex-wrap:wrap;gap:.375rem}.cms-folder-picker-input{width:11rem}.cms-form-hint{color:var(--ui-text-dimmed);font-size:.8125rem}.cms-dropzone-hint{align-items:center;color:var(--ui-text-dimmed);display:inline-flex;font-size:.75rem;gap:.3rem}.cms-block-label{color:var(--ui-text-toned);font-size:.875rem;font-weight:550;line-height:1.4;transition:color var(--cms-duration) var(--cms-ease)}.cms-block-label:hover{color:var(--ui-text-highlighted)}@keyframes cms-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.cms-rise{animation:cms-rise .3s var(--cms-ease) both}.cms-rise.is-delayed{animation-delay:90ms}@media (prefers-reduced-motion:reduce){.cms-rise{animation:none}}.cms-richtext{background:var(--cms-field);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);overflow:hidden}.cms-richtext-toolbar{align-items:center;border-bottom:1px solid var(--cms-line);display:flex;flex-wrap:wrap;gap:2px;padding:4px}.cms-richtext-body{color:var(--ui-text-highlighted);font-size:.875rem;min-height:9rem;outline:none;padding:.75rem 1rem}.cms-richtext-body h2{font-size:1.25rem;font-weight:600;margin:.75em 0 .35em}.cms-richtext-body h3{font-size:1.1rem;font-weight:600;margin:.75em 0 .35em}.cms-richtext-body p{margin:.35em 0}.cms-richtext-body ul{list-style:disc;padding-left:1.25rem}.cms-richtext-body ol{list-style:decimal;padding-left:1.25rem}.cms-richtext-body blockquote{border-left:3px solid var(--cms-line-strong);color:var(--ui-text-muted);padding-left:.75rem}.cms-btn{align-items:center;border:1px solid transparent;border-radius:var(--cms-radius-md);display:inline-flex;font-weight:500;gap:.375rem;justify-content:center;line-height:1;min-height:var(--cms-btn-size);transition:background-color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease),opacity var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-btn:active:not(:disabled,[aria-disabled=true]){scale:.99}.cms-btn:disabled,.cms-btn[aria-disabled=true]{opacity:.5;pointer-events:none}.cms-btn.is-block{width:100%}.cms-btn.is-icon{justify-content:center;padding-inline:0;width:var(--cms-btn-size)}.cms-btn-xs{--cms-btn-size:1.75rem;font-size:.875rem;padding:.25rem .625rem}.cms-btn-sm{--cms-btn-size:2rem;font-size:.875rem;padding:.25rem .75rem}.cms-btn-md{--cms-btn-size:2.25rem;font-size:.875rem;padding:.25rem .875rem}.cms-btn-lg{--cms-btn-size:2.625rem;font-size:.9375rem;padding:.375rem 1.125rem}.cms-btn-primary.cms-btn-solid{background:var(--ui-primary);color:var(--ui-text-inverted)}.cms-btn-primary.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-primary) 82%,#fff)}.cms-btn-primary.cms-btn-solid:active{background:color-mix(in oklab,var(--ui-primary) 88%,#000)}.cms-btn-primary.cms-btn-soft{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-highlighted)}.cms-btn-primary.cms-btn-soft:hover{background:var(--cms-elevated);border-color:var(--cms-line-strong)}.cms-btn-primary.cms-btn-soft:active{background:var(--cms-field)}.cms-btn-primary.cms-btn-ghost{background:transparent;color:var(--ui-text-toned)}.cms-btn-primary.cms-btn-ghost:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-btn-primary.cms-btn-ghost:active{background:var(--cms-elevated)}.cms-btn-neutral.cms-btn-solid{background:var(--cms-line-strong);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-solid:hover{background:color-mix(in oklab,var(--cms-line-strong) 80%,var(--cms-text))}.cms-btn-neutral.cms-btn-solid:active{background:color-mix(in oklab,var(--cms-line-strong) 90%,#000)}.cms-btn-neutral.cms-btn-soft{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-soft:hover{background:var(--cms-elevated);border-color:var(--cms-line-strong)}.cms-btn-neutral.cms-btn-soft:active{background:var(--cms-field)}.cms-btn-neutral.cms-btn-ghost{background:transparent;color:var(--ui-text-toned)}.cms-btn-neutral.cms-btn-ghost:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-ghost:active{background:var(--cms-elevated)}.cms-btn-error.cms-btn-solid{background:var(--ui-error);color:var(--cms-canvas)}.cms-btn-error.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-error) 85%,#fff)}.cms-btn-error.cms-btn-solid:active{background:color-mix(in oklab,var(--ui-error) 88%,#000)}.cms-btn-error.cms-btn-soft{background:color-mix(in oklab,var(--ui-error) 16%,transparent);border-color:color-mix(in oklab,var(--ui-error) 28%,transparent);color:var(--ui-error)}.cms-btn-error.cms-btn-soft:hover{background:color-mix(in oklab,var(--ui-error) 24%,transparent);border-color:color-mix(in oklab,var(--ui-error) 40%,transparent)}.cms-btn-error.cms-btn-soft:active{background:color-mix(in oklab,var(--ui-error) 16%,transparent)}.cms-btn-error.cms-btn-ghost{background:transparent;color:var(--ui-error)}.cms-btn-error.cms-btn-ghost:hover{background:color-mix(in oklab,var(--ui-error) 14%,transparent)}.cms-btn-error.cms-btn-ghost:active{background:color-mix(in oklab,var(--ui-error) 22%,transparent)}.cms-btn-success.cms-btn-solid{background:var(--ui-success);color:var(--cms-canvas)}.cms-btn-success.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-success) 85%,#fff)}.cms-btn-success.cms-btn-solid:active{background:color-mix(in oklab,var(--ui-success) 88%,#000)}.cms-btn-success.cms-btn-soft{background:color-mix(in oklab,var(--ui-success) 16%,transparent);border-color:color-mix(in oklab,var(--ui-success) 28%,transparent);color:var(--ui-success)}.cms-btn-success.cms-btn-soft:hover{background:color-mix(in oklab,var(--ui-success) 24%,transparent);border-color:color-mix(in oklab,var(--ui-success) 40%,transparent)}.cms-btn-success.cms-btn-soft:active{background:color-mix(in oklab,var(--ui-success) 16%,transparent)}.cms-btn-success.cms-btn-ghost{background:transparent;color:var(--ui-success)}.cms-btn-success.cms-btn-ghost:hover{background:color-mix(in oklab,var(--ui-success) 14%,transparent)}.cms-btn-success.cms-btn-ghost:active{background:color-mix(in oklab,var(--ui-success) 22%,transparent)}.cms-form{display:flex;flex-direction:column;gap:1.25rem}.cms-tabs{align-items:center;border-bottom:1px solid var(--ui-border);display:flex;gap:.25rem;margin-bottom:.25rem;overflow-x:auto}.cms-tab{border-bottom:2px solid transparent;color:var(--ui-text-toned);cursor:pointer;font-size:.875rem;font-weight:500;margin-bottom:-1px;padding:.5rem .875rem;transition:color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-tab:hover{color:var(--ui-text-highlighted)}.cms-tab.is-active{border-bottom-color:var(--cms-fern);color:var(--cms-fern)}.cms-form-field{display:flex;flex-direction:column;gap:.375rem}.cms-form-label-row{align-items:center;display:flex;gap:.75rem;justify-content:space-between;min-height:1.75rem}.cms-form-label{color:var(--ui-text-toned);font-size:.875rem;font-weight:500}.cms-form-error,.cms-form-required{color:var(--ui-error)}.cms-form-error{font-size:.875rem}.cms-form-actions{align-items:center;display:flex;gap:.75rem;justify-content:flex-end;padding-top:.25rem}.cms-field{background:var(--cms-field);border:1px solid var(--cms-line);border-radius:var(--ui-radius);color:var(--ui-text-highlighted);line-height:1.25;transition:border-color var(--cms-duration) var(--cms-ease),box-shadow var(--cms-duration) var(--cms-ease);width:100%}textarea.cms-field{line-height:1.5;min-height:0;padding-bottom:.625rem;padding-top:.625rem;resize:vertical}.cms-field::-moz-placeholder{color:var(--ui-text-dimmed)}.cms-field::placeholder{color:var(--ui-text-dimmed)}.cms-field:hover:not(:focus,:focus-within){border-color:var(--cms-line-strong)}.cms-field:focus,.cms-field:focus-within{border-color:var(--cms-fern);box-shadow:0 0 0 3px color-mix(in oklab,var(--cms-fern) 25%,transparent);outline:none}.cms-field.is-error{border-color:var(--ui-error)}.cms-field.is-error:focus,.cms-field.is-error:focus-within{border-color:var(--ui-error);box-shadow:0 0 0 3px color-mix(in oklab,var(--ui-error) 25%,transparent)}.cms-field-sm{font-size:.875rem;min-height:2rem;padding:.25rem .625rem}.cms-field-md{font-size:.875rem;min-height:2.25rem;padding:.25rem .75rem}.cms-field-lg{font-size:.9375rem;min-height:2.625rem;padding:.375rem .875rem}.cms-select-chevron{align-items:center;cursor:pointer;display:inline-flex;transition:transform var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-select-chevron:hover{color:var(--ui-text-muted)}.cms-select-chevron.is-open{transform:rotate(180deg)}.cms-locale-switch{align-items:center;background:var(--cms-field);border:1px solid var(--cms-line);border-radius:var(--cms-radius-md);display:inline-flex;gap:2px;padding:2px}.cms-locale-option{border-radius:var(--cms-radius-sm);color:var(--ui-text-muted);cursor:pointer;font-family:var(--cms-font-mono);font-size:.6875rem;letter-spacing:.08em;line-height:1.4;padding:.125rem .5rem;text-transform:uppercase;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-locale-option:hover:not(.is-active){color:var(--ui-text-highlighted)}.cms-locale-option.is-empty{color:var(--ui-text-dimmed)}.cms-locale-option.is-active{background:var(--cms-elevated);color:var(--cms-fern)}.cms-input-wrap{align-items:center;display:flex;position:relative;width:100%}.cms-input-wrap .cms-field{width:100%}.cms-input-lead,.cms-input-trail{align-items:center;color:var(--ui-text-dimmed);display:flex;position:absolute}.cms-input-lead{left:.625rem}.cms-input-trail{right:.375rem}.cms-input-wrap.has-lead .cms-field{padding-left:2rem}.cms-switch{align-items:center;background:var(--cms-line-strong);border-radius:9999px;display:inline-flex;flex-shrink:0;height:1.25rem;position:relative;transition:background-color var(--cms-duration) var(--cms-ease);width:2.25rem}.cms-switch.is-on{background:var(--cms-fern)}.cms-switch:after{background:var(--cms-text);border-radius:9999px;content:"";height:.875rem;left:.1875rem;position:absolute;transition:transform var(--cms-duration) var(--cms-ease);width:.875rem}.cms-switch.is-on:after{background:var(--cms-canvas);transform:translateX(1rem)}.cms-overlay{align-items:center;background:var(--cms-scrim);display:flex;inset:0;justify-content:center;overflow-y:auto;padding:2rem 1rem;position:fixed;z-index:60}.cms-modal{background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);display:flex;flex-direction:column;max-height:calc(100dvh - 4rem);max-width:32rem;width:100%}.cms-modal.is-sm{max-width:28rem}.cms-modal.is-lg{max-width:48rem}.cms-modal-header{padding:1.25rem 1.5rem 0}.cms-modal-body{flex:1;min-height:0;overflow-y:auto;padding:1.25rem 1.5rem 1.5rem}.cms-modal-enter-active,.cms-modal-leave-active{transition:opacity var(--cms-duration-lg) var(--cms-ease)}.cms-modal-enter-active .cms-modal,.cms-modal-leave-active .cms-modal{transition:transform var(--cms-duration-lg) var(--cms-ease),opacity var(--cms-duration-lg) var(--cms-ease);will-change:transform}.cms-modal-enter-from,.cms-modal-leave-to{opacity:0}.cms-modal-enter-from .cms-modal,.cms-modal-leave-to .cms-modal{opacity:0;transform:translateY(8px)}.cms-overlay-drawer{align-items:stretch;justify-content:flex-end;overflow:hidden;padding:0;z-index:55}.cms-drawer{background:var(--cms-surface);border-left:1px solid var(--cms-line);border-radius:var(--cms-radius-lg) 0 0 var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);display:flex;flex-direction:column;height:100%;max-width:46rem;width:100%}.cms-drawer-header{align-items:center;border-bottom:1px solid var(--cms-line);display:flex;gap:1rem;justify-content:space-between;padding:1.25rem 1.75rem}.cms-drawer-body{flex:1;min-height:0;overflow-y:auto;padding:1.75rem}.cms-drawer-footer{align-items:center;border-top:1px solid var(--cms-line);display:flex;gap:1rem;justify-content:space-between;padding:1.25rem 1.75rem}.cms-drawer-enter-active,.cms-drawer-leave-active{transition:opacity var(--cms-duration-lg) var(--cms-ease)}.cms-drawer-enter-active .cms-drawer,.cms-drawer-leave-active .cms-drawer{transition:transform var(--cms-duration-lg) var(--cms-ease);will-change:transform}.cms-drawer-enter-from,.cms-drawer-leave-to{opacity:0}.cms-drawer-enter-from .cms-drawer,.cms-drawer-leave-to .cms-drawer{transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.cms-drawer-enter-active,.cms-drawer-enter-active .cms-drawer,.cms-drawer-leave-active,.cms-drawer-leave-active .cms-drawer,.cms-modal-enter-active,.cms-modal-enter-active .cms-modal,.cms-modal-leave-active,.cms-modal-leave-active .cms-modal{transition-duration:.01ms}}.cms-menu{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);margin-top:.375rem;min-width:12rem;padding:.25rem;position:absolute;z-index:50}.cms-menu.align-end{right:0}.cms-menu-item{align-items:center;border-radius:var(--cms-radius-sm);color:var(--ui-text);cursor:pointer;display:flex;font-size:.875rem;gap:.5rem;padding:.4rem .6rem;text-align:left;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease);width:100%}.cms-menu-item:hover{background:color-mix(in oklab,var(--cms-text) 8%,transparent);color:var(--ui-text-highlighted)}.cms-menu-check{color:var(--cms-fern);margin-left:auto}.cms-popover{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);margin-top:.375rem;position:absolute;z-index:50}.cms-selectmenu-input{background:transparent;color:var(--ui-text-highlighted);flex:1;min-width:4rem;outline:none}.cms-selectmenu-affix{color:var(--ui-text-dimmed);flex-shrink:0}.cms-selectmenu-panel{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);left:0;margin-top:.375rem;max-height:15rem;overflow-y:auto;padding:.25rem;position:absolute;right:0;z-index:50}.cms-tag{align-items:center;background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:9999px;color:var(--ui-text-highlighted);display:inline-flex;font-size:.8125rem;gap:.25rem;padding:.125rem .5rem}.cms-media-gallery{display:flex;flex-direction:column;gap:1.25rem}.cms-media-source{color:var(--ui-text-muted);font-size:.8125rem;margin-top:-.75rem}.cms-media-filters{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.cms-media-filters-actions{align-items:center;display:flex;flex-shrink:0;gap:.5rem;margin-left:auto}.cms-media-filter-separator{background:var(--cms-line);flex:none;height:1rem;margin-inline:.25rem;width:1px}.cms-pill-count{color:var(--ui-text-dimmed);font-family:var(--cms-font-mono);font-size:.6875rem;margin-left:.25rem}.cms-blocks-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:640px){.cms-blocks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.cms-blocks-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.cms-block-tile{overflow:hidden;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-block-tile.is-muted{opacity:.45}.cms-block-preview{align-items:center;aspect-ratio:4/3;background:var(--cms-field);color:var(--ui-text-dimmed);display:flex;justify-content:center;position:relative;width:100%}.cms-block-preview>img,.cms-block-preview>video{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.cms-block-summary{color:var(--ui-text-muted);font-size:.75rem;line-height:1.5;padding:.75rem;text-align:left}.cms-block-hidden{color:var(--cms-text);filter:drop-shadow(0 1px 2px rgb(0 0 0/.6));left:.5rem;position:absolute;top:.5rem}.cms-block-tile.is-dragging{opacity:.4}.cms-block-tile.is-drop-target{outline:2px solid var(--cms-fern);outline-offset:2px}.cms-block-bar{gap:.25rem;padding:.375rem}.cms-block-bar,.cms-block-grip{align-items:center;display:flex}.cms-block-grip{color:var(--ui-text-dimmed);cursor:grab;justify-content:center;padding:.25rem;transition:color var(--cms-duration) var(--cms-ease)}.cms-block-grip:hover{color:var(--ui-text-muted)}.cms-block-tile.is-dragging .cms-block-grip{cursor:grabbing}.cms-block-bar-name{color:var(--ui-text-muted);flex:1;font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cms-block-bar-actions{align-items:center;display:flex;gap:.125rem}.cms-block-add{align-items:center;border:1px dashed var(--cms-line-strong);border-radius:var(--cms-radius-md);color:var(--ui-text-muted);display:flex;flex-direction:column;font-size:.8125rem;font-weight:500;gap:.375rem;justify-content:center;min-height:6rem;transition:border-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-block-add:hover{border-color:var(--cms-fern);color:var(--ui-text-highlighted)}.cms-media-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:640px){.cms-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.cms-media-grid:not(.is-compact){grid-template-columns:repeat(4,minmax(0,1fr))}}.cms-media-tile{overflow:hidden;text-align:left;transition:border-color var(--cms-duration) var(--cms-ease)}.cms-media-tile.is-selectable{cursor:pointer}.cms-media-tile.is-selectable:hover{border-color:var(--cms-line-strong)}.cms-media-preview{align-items:center;aspect-ratio:1;background:var(--cms-field);color:var(--ui-text-dimmed);display:flex;justify-content:center;position:relative}.cms-media-preview>img,.cms-media-preview>video{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.cms-media-actions{display:flex;gap:.25rem;opacity:0;position:absolute;right:.5rem;top:.5rem;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-media-actions:focus-within,.cms-media-tile:hover .cms-media-actions{opacity:1}.cms-media-info{background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);bottom:0;color:var(--cms-text);font-family:var(--cms-font-mono);font-size:.75rem;left:0;letter-spacing:.08em;line-height:1.4;opacity:0;padding:1.5rem .75rem .5rem;pointer-events:none;position:absolute;right:0;text-transform:uppercase;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-media-tile:focus-visible .cms-media-info,.cms-media-tile:hover .cms-media-info{opacity:1}.cms-media-meta{display:flex;flex-direction:column;gap:.25rem;padding:.625rem .875rem}.cms-media-name{color:var(--ui-text-highlighted);font-size:.875rem;font-weight:500}.cms-media-folder,.cms-media-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cms-media-folder{align-items:center;color:var(--ui-text-dimmed);display:inline-flex;font-size:.75rem;gap:.25rem}.cms-media-single{max-width:15rem;width:100%}.cms-media-thumb{background:var(--cms-field);border-radius:var(--cms-radius-sm);height:2.25rem;-o-object-fit:cover;object-fit:cover;width:2.25rem}.cms-media-thumb.is-fallback{align-items:center;color:var(--ui-text-dimmed);display:flex;justify-content:center}.cms-media-thumb-empty{color:var(--ui-text-dimmed)}.cms-table-shell{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.cms-table-scroll{flex:1;min-height:0;overflow:auto}.cms-table{border-collapse:collapse;min-width:-moz-max-content;min-width:max-content;text-align:left;width:100%}.cms-table td,.cms-table th{white-space:nowrap}.cms-table thead{background:var(--cms-surface);position:sticky;top:0;z-index:10}.cms-table th{background:var(--cms-surface);box-shadow:inset 0 -1px 0 var(--cms-line);color:var(--ui-text-muted);font-family:var(--cms-font-mono);font-size:.6875rem;font-weight:400;letter-spacing:.08em;line-height:1.4;padding:.75rem 1.25rem;text-transform:uppercase;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-table td{color:var(--ui-text);font-size:.875rem;padding:.875rem 1.25rem}.cms-table tbody tr{border-bottom:1px solid var(--cms-line);transition:background-color var(--cms-duration) var(--cms-ease)}.cms-table tbody tr:last-child{border-bottom:0}.cms-table tbody tr:hover{background:var(--cms-field)}.cms-table-cell-actions{display:flex;justify-content:flex-end}.cms-table th[draggable=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cms-table th[draggable=true]:active{cursor:grabbing}.cms-table th.is-dragging{opacity:.4}.cms-table th.is-drop-target{background:var(--cms-field);box-shadow:inset 0 -1px 0 var(--cms-line),inset 0 0 0 2px color-mix(in oklab,var(--cms-fern) 55%,transparent)}.cms-th-label{align-items:center;display:inline-flex;gap:.35rem}.cms-table th.is-sortable{cursor:pointer}.cms-table th.is-sortable:hover,.cms-table th.is-sorted{color:var(--ui-text-highlighted)}.cms-table th.is-sorted{background:var(--cms-field)}.cms-th-sort{flex:none;opacity:0;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-table th.is-sortable:hover .cms-th-sort,.cms-table th.is-sorted .cms-th-sort{opacity:1}.cms-alert{border:1px solid transparent;border-radius:var(--cms-radius-md);display:flex;flex-direction:column;font-size:.875rem;gap:.125rem;padding:.75rem 1rem}.cms-alert-title{font-weight:550}.cms-alert-error{background:color-mix(in oklab,var(--ui-error) 14%,transparent);border-color:color-mix(in oklab,var(--ui-error) 26%,transparent);color:var(--ui-error)}.cms-alert-success{background:color-mix(in oklab,var(--ui-success) 14%,transparent);border-color:color-mix(in oklab,var(--ui-success) 26%,transparent);color:var(--ui-success)}.cms-alert-warning{background:color-mix(in oklab,var(--ui-warning) 14%,transparent);border-color:color-mix(in oklab,var(--ui-warning) 26%,transparent);color:var(--ui-warning)}.cms-alert-neutral{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-toned)}.cms-alert-neutral .cms-alert-title{color:var(--ui-text-highlighted)}.cms-toaster{bottom:1rem;display:flex;flex-direction:column;gap:.5rem;max-width:calc(100vw - 2rem);position:fixed;right:1rem;width:20rem;z-index:80}.cms-toast{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);padding:.75rem .875rem}.cms-toast-row{align-items:flex-start;display:flex;gap:.625rem}.cms-toast-icon{color:var(--ui-text-muted);flex-shrink:0;margin-top:.0625rem}.cms-toast.is-success .cms-toast-icon{color:var(--ui-success)}.cms-toast.is-error .cms-toast-icon{color:var(--ui-error)}.cms-toast-title{color:var(--ui-text-highlighted);font-size:.875rem;font-weight:500}.cms-toast-description{color:var(--ui-text-muted);font-size:.875rem;margin-top:.125rem}.cms-toast-dismiss{color:var(--ui-text-dimmed);flex-shrink:0;transition:color var(--cms-duration) var(--cms-ease)}.cms-toast-dismiss:hover{color:var(--ui-text-highlighted)}.cms-pagination{align-items:center;display:flex;gap:.25rem;justify-content:center}.cms-page-btn{border-radius:var(--cms-radius-sm);color:var(--ui-text-toned);font-size:.875rem;height:2rem;min-width:2rem;padding:0 .5rem;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-page-btn:hover:not(:disabled){background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-page-btn.is-active{background:var(--cms-field);color:var(--cms-fern);font-weight:600}.cms-page-btn:disabled{opacity:.4}
+@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme) theme(inline);.cms-scope{@import "tailwindcss/preflight.css" layer(base);@import "tailwindcss/utilities.css" layer(utilities) source(none)}@source "../app";.cms-scope,body:has(.cms-scope){--cms-canvas:#1b1b1e;--cms-surface:#222226;--cms-field:#2a2a2f;--cms-elevated:#2f2f35;--cms-line:#35353b;--cms-line-strong:#46464e;--cms-text:#ededef;--cms-text-toned:#c2c2c8;--cms-text-muted:#9a9aa3;--cms-text-dimmed:#6e6e78;--cms-fern:#8fae8b;--cms-error:#f0857d;--cms-success:#7fb083;--cms-warning:#d4ad76;--cms-font-ui:"Hanken Grotesk Variable","Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;--cms-font-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--cms-radius-sm:6px;--cms-radius-md:8px;--cms-radius-lg:12px;--cms-shadow-overlay:0 8px 24px rgba(0,0,0,.35);--cms-scrim:rgba(0,0,0,.5);--cms-duration:120ms;--cms-duration-lg:250ms;--cms-ease:cubic-bezier(0.2,0,0,1);color-scheme:dark;--ui-text-dimmed:var(--cms-text-dimmed);--ui-text-muted:var(--cms-text-muted);--ui-text-toned:var(--cms-text-toned);--ui-text:var(--cms-text-toned);--ui-text-highlighted:var(--cms-text);--ui-text-inverted:var(--cms-canvas);--ui-bg:var(--cms-surface);--ui-bg-muted:var(--cms-canvas);--ui-bg-elevated:var(--cms-field);--ui-bg-accented:var(--cms-elevated);--ui-bg-inverted:var(--cms-text);--ui-border:var(--cms-line);--ui-border-muted:var(--cms-line);--ui-border-accented:var(--cms-line-strong);--ui-border-inverted:var(--cms-text);--ui-primary:var(--cms-text);--ui-accent:var(--cms-fern);--ui-error:var(--cms-error);--ui-success:var(--cms-success);--ui-warning:var(--cms-warning);--ui-radius:var(--cms-radius-md);color:var(--ui-text);font-family:var(--cms-font-ui);margin:0;padding:0;-webkit-font-smoothing:antialiased}body:has(.cms-scope) ::-moz-selection{background:color-mix(in oklab,var(--cms-fern) 35%,transparent);color:var(--ui-text-highlighted)}body:has(.cms-scope) ::selection{background:color-mix(in oklab,var(--cms-fern) 35%,transparent);color:var(--ui-text-highlighted)}body:has(.cms-scope) :is(.cms-scope,.cms-scope *){scrollbar-color:var(--cms-line-strong) transparent;scrollbar-width:thin}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar{height:10px;width:10px}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar-track{background:transparent}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar-thumb{background:var(--cms-line-strong);background-clip:content-box;border:3px solid transparent;border-radius:9999px}body:has(.cms-scope) :is(.cms-scope,.cms-scope *)::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--cms-line-strong) 70%,var(--cms-text));background-clip:content-box}.cms-display,.cms-title{font-family:var(--cms-font-ui);font-weight:650;letter-spacing:-.01em}.cms-title{color:var(--ui-text-highlighted)}.cms-title-sm{font-size:1.125rem;line-height:1.4}.cms-title-md{font-size:1.5rem;line-height:1.25}.cms-title-lg{font-size:1.875rem;line-height:1.2}.cms-subtitle{color:var(--ui-text-muted);font-size:.875rem}.cms-accent{color:var(--cms-fern)}.cms-label{color:var(--ui-text-muted);font-size:.75rem;font-weight:500;line-height:1.4}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option],.__clickable):not(:disabled,[aria-disabled=true]){@apply cursor-pointer select-none}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option]):focus-visible{outline:2px solid var(--cms-fern);outline-offset:2px}.cms-canvas{background-color:var(--cms-canvas)}.cms-card{background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg)}.cms-panel{padding:1.75rem}body:has(.cms-scope),html:has(.cms-scope){overscroll-behavior-y:none}.cms-shell{display:flex;min-height:100vh}.cms-sidebar{background:var(--cms-surface);border-right:1px solid var(--cms-line);display:flex;flex-direction:column;flex-shrink:0;gap:1.75rem;height:100vh;padding:1.75rem 1rem;position:sticky;top:0;width:16rem}.cms-sidebar-brand{color:var(--ui-text-highlighted);font-family:var(--cms-font-ui);font-size:1.25rem;font-weight:650;letter-spacing:-.01em;padding-inline:.75rem}.cms-sidebar-nav{display:flex;flex:1;flex-direction:column;gap:1.5rem;overflow-y:auto;overscroll-behavior-y:none}.cms-sidebar-group{display:flex;flex-direction:column;gap:.25rem}.cms-sidebar-group>.cms-label{margin-bottom:.5rem;padding-inline:.75rem}.cms-sidebar-footer{border-top:1px solid var(--cms-line);display:flex;flex-direction:column;gap:.75rem;padding-top:1rem}.cms-sidebar-footer .cms-btn.is-block{color:var(--ui-text-muted);justify-content:space-between;padding-inline:.75rem}.cms-sidebar-footer .cms-btn.is-block:hover{background:var(--cms-field);color:var(--ui-text)}.cms-main{flex:1;height:100vh;min-width:0;overflow-y:auto;overscroll-behavior-y:none;padding:2.5rem}.cms-main-inner{margin-inline:auto;max-width:64rem;min-height:100%;width:100%}.cms-main-inner,.cms-page{display:flex;flex-direction:column}.cms-page{gap:1.75rem}.cms-page.is-fill{flex:1;min-height:0}.cms-page-header{align-items:flex-end;display:flex;gap:1rem;justify-content:space-between}.cms-page-heading{display:flex;flex-direction:column;gap:.5rem}.cms-breadcrumb{align-items:center;color:var(--ui-text-muted);display:flex;font-size:.75rem;font-weight:500;gap:.375rem;line-height:1.4}.cms-breadcrumb-link{border-radius:.25rem;padding:.0625rem .125rem;transition:color .15s ease}.cms-breadcrumb-link:hover{color:var(--ui-text-highlighted)}.cms-breadcrumb-separator{color:var(--ui-text-dimmed)}.cms-tree-row{align-items:center;display:flex;gap:.75rem;padding:.625rem 1rem;transition:background-color .15s ease}.cms-tree-row:hover{background-color:var(--ui-bg-elevated)}.cms-tree-branch{color:var(--ui-text-dimmed);flex-shrink:0;transform:scaleY(-1) rotate(90deg);width:1rem}.cms-toolbar{align-items:center;display:flex;gap:1.5rem}.cms-toolbar-actions{align-items:center;display:flex;flex-shrink:0;gap:.5rem;margin-left:auto}.cms-actions{align-items:center;display:flex;gap:.75rem}.cms-actions.is-end{justify-content:flex-end}.cms-spinner{color:var(--ui-text-dimmed);flex:1;justify-content:center;padding-block:2.5rem}.cms-empty,.cms-spinner{align-items:center;display:flex}.cms-empty{background:color-mix(in oklab,var(--cms-surface) 55%,transparent);border:1px dashed var(--cms-line-strong);border-radius:var(--cms-radius-lg);flex-direction:column;gap:.5rem;padding:3.5rem;text-align:center}.cms-empty.is-fill{flex:1;justify-content:center}.cms-empty-icon{color:var(--cms-fern);margin-bottom:.25rem}.cms-empty>.cms-btn{margin-top:.75rem}.cms-auth{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:1.5rem}.cms-auth-panel{gap:2rem;max-width:24rem;width:100%}.cms-auth-header,.cms-auth-panel{display:flex;flex-direction:column}.cms-auth-header{align-items:center;gap:.75rem;text-align:center}.cms-auth-card{padding:1.75rem}.cms-navlink{align-items:center;border-radius:var(--cms-radius-md);color:var(--ui-text-toned);display:flex;font-size:.875rem;font-weight:500;gap:.625rem;padding:.5rem .75rem;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-navlink:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-navlink.is-active{background:var(--cms-field);color:var(--cms-fern)}.cms-navlink-icon{color:var(--ui-text-dimmed)}.cms-navlink.is-active .cms-navlink-icon{color:var(--cms-fern)}.cms-badge{align-items:center;border:1px solid transparent;border-radius:var(--cms-radius-md);display:inline-flex;font-family:var(--cms-font-mono);font-size:.6875rem;letter-spacing:.08em;line-height:1.4;padding:.1875rem .5rem;pointer-events:none;text-transform:uppercase;transition:background-color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-badge.is-published{background:color-mix(in oklab,var(--cms-success) 18%,transparent);border-color:color-mix(in oklab,var(--cms-success) 32%,transparent);color:var(--cms-success)}.cms-badge.is-muted{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-muted)}.cms-badge.is-draft{background:transparent}.cms-badge.is-draft,.cms-dropzone{border:1px dashed var(--cms-line-strong);color:var(--ui-text-muted)}.cms-dropzone{align-items:center;background:color-mix(in oklab,var(--cms-surface) 55%,transparent);border-radius:var(--cms-radius-lg);cursor:pointer;display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:2rem 1.5rem;transition:border-color var(--cms-duration) var(--cms-ease),background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease);width:100%}.cms-dropzone.is-over,.cms-dropzone:hover{background:var(--cms-field);border-color:var(--cms-fern);color:var(--ui-text-highlighted)}.cms-dropzone.is-dense{flex-direction:row;gap:.625rem;padding:.875rem 1.25rem}.cms-dropzone.is-busy{opacity:.7;pointer-events:none}.cms-pill{align-items:center;background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:9999px;color:var(--ui-text-muted);cursor:pointer;display:inline-flex;flex:none;font-size:.8125rem;gap:.35rem;line-height:1.4;padding:.3rem .8rem;transition:background-color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-pill:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-pill.is-active{background:var(--cms-field);border-color:color-mix(in oklab,var(--cms-fern) 45%,transparent);color:var(--cms-fern)}.cms-pill.is-empty{border-style:dashed}.cms-pill-group{align-items:center;display:inline-flex;gap:.125rem}.cms-pill-group .cms-pill{padding-right:.6rem}.cms-pill-discard{align-items:center;border-radius:9999px;color:var(--ui-text-dimmed);cursor:pointer;display:inline-flex;height:1.25rem;justify-content:center;transition:color var(--cms-duration) var(--cms-ease);width:1.25rem}.cms-pill-discard:hover{color:var(--ui-error)}.cms-folder-picker{align-items:center;display:flex;flex-wrap:wrap;gap:.375rem}.cms-folder-picker-input{width:11rem}.cms-form-hint{color:var(--ui-text-dimmed);font-size:.8125rem}.cms-dropzone-hint{align-items:center;color:var(--ui-text-dimmed);display:inline-flex;font-size:.75rem;gap:.3rem}.cms-block-label{color:var(--ui-text-toned);font-size:.875rem;font-weight:550;line-height:1.4;transition:color var(--cms-duration) var(--cms-ease)}.cms-block-label:hover{color:var(--ui-text-highlighted)}@keyframes cms-rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.cms-rise{animation:cms-rise .3s var(--cms-ease) both}.cms-rise.is-delayed{animation-delay:90ms}@media (prefers-reduced-motion:reduce){.cms-rise{animation:none}}.cms-richtext{background:var(--cms-field);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);overflow:hidden}.cms-richtext-toolbar{align-items:center;border-bottom:1px solid var(--cms-line);display:flex;flex-wrap:wrap;gap:2px;padding:4px}.cms-richtext-body{color:var(--ui-text-highlighted);font-size:.875rem;min-height:9rem;outline:none;padding:.75rem 1rem}.cms-richtext-body h2{font-size:1.25rem;font-weight:600;margin:.75em 0 .35em}.cms-richtext-body h3{font-size:1.1rem;font-weight:600;margin:.75em 0 .35em}.cms-richtext-body p{margin:.35em 0}.cms-richtext-body ul{list-style:disc;padding-left:1.25rem}.cms-richtext-body ol{list-style:decimal;padding-left:1.25rem}.cms-richtext-body blockquote{border-left:3px solid var(--cms-line-strong);color:var(--ui-text-muted);padding-left:.75rem}.cms-btn{align-items:center;border:1px solid transparent;border-radius:var(--cms-radius-md);display:inline-flex;font-weight:500;gap:.375rem;justify-content:center;line-height:1;min-height:var(--cms-btn-size);transition:background-color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease),opacity var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-btn:active:not(:disabled,[aria-disabled=true]){scale:.99}.cms-btn:disabled,.cms-btn[aria-disabled=true]{opacity:.5;pointer-events:none}.cms-btn.is-block{width:100%}.cms-btn.is-icon{justify-content:center;padding-inline:0;width:var(--cms-btn-size)}.cms-btn-xs{--cms-btn-size:1.75rem;font-size:.875rem;padding:.25rem .625rem}.cms-btn-sm{--cms-btn-size:2rem;font-size:.875rem;padding:.25rem .75rem}.cms-btn-md{--cms-btn-size:2.25rem;font-size:.875rem;padding:.25rem .875rem}.cms-btn-lg{--cms-btn-size:2.625rem;font-size:.9375rem;padding:.375rem 1.125rem}.cms-btn-primary.cms-btn-solid{background:var(--ui-primary);color:var(--ui-text-inverted)}.cms-btn-primary.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-primary) 82%,#fff)}.cms-btn-primary.cms-btn-solid:active{background:color-mix(in oklab,var(--ui-primary) 88%,#000)}.cms-btn-primary.cms-btn-soft{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-highlighted)}.cms-btn-primary.cms-btn-soft:hover{background:var(--cms-elevated);border-color:var(--cms-line-strong)}.cms-btn-primary.cms-btn-soft:active{background:var(--cms-field)}.cms-btn-primary.cms-btn-ghost{background:transparent;color:var(--ui-text-toned)}.cms-btn-primary.cms-btn-ghost:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-btn-primary.cms-btn-ghost:active{background:var(--cms-elevated)}.cms-btn-neutral.cms-btn-solid{background:var(--cms-line-strong);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-solid:hover{background:color-mix(in oklab,var(--cms-line-strong) 80%,var(--cms-text))}.cms-btn-neutral.cms-btn-solid:active{background:color-mix(in oklab,var(--cms-line-strong) 90%,#000)}.cms-btn-neutral.cms-btn-soft{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-soft:hover{background:var(--cms-elevated);border-color:var(--cms-line-strong)}.cms-btn-neutral.cms-btn-soft:active{background:var(--cms-field)}.cms-btn-neutral.cms-btn-ghost{background:transparent;color:var(--ui-text-toned)}.cms-btn-neutral.cms-btn-ghost:hover{background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-ghost:active{background:var(--cms-elevated)}.cms-btn-error.cms-btn-solid{background:var(--ui-error);color:var(--cms-canvas)}.cms-btn-error.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-error) 85%,#fff)}.cms-btn-error.cms-btn-solid:active{background:color-mix(in oklab,var(--ui-error) 88%,#000)}.cms-btn-error.cms-btn-soft{background:color-mix(in oklab,var(--ui-error) 16%,transparent);border-color:color-mix(in oklab,var(--ui-error) 28%,transparent);color:var(--ui-error)}.cms-btn-error.cms-btn-soft:hover{background:color-mix(in oklab,var(--ui-error) 24%,transparent);border-color:color-mix(in oklab,var(--ui-error) 40%,transparent)}.cms-btn-error.cms-btn-soft:active{background:color-mix(in oklab,var(--ui-error) 16%,transparent)}.cms-btn-error.cms-btn-ghost{background:transparent;color:var(--ui-error)}.cms-btn-error.cms-btn-ghost:hover{background:color-mix(in oklab,var(--ui-error) 14%,transparent)}.cms-btn-error.cms-btn-ghost:active{background:color-mix(in oklab,var(--ui-error) 22%,transparent)}.cms-btn-success.cms-btn-solid{background:var(--ui-success);color:var(--cms-canvas)}.cms-btn-success.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-success) 85%,#fff)}.cms-btn-success.cms-btn-solid:active{background:color-mix(in oklab,var(--ui-success) 88%,#000)}.cms-btn-success.cms-btn-soft{background:color-mix(in oklab,var(--ui-success) 16%,transparent);border-color:color-mix(in oklab,var(--ui-success) 28%,transparent);color:var(--ui-success)}.cms-btn-success.cms-btn-soft:hover{background:color-mix(in oklab,var(--ui-success) 24%,transparent);border-color:color-mix(in oklab,var(--ui-success) 40%,transparent)}.cms-btn-success.cms-btn-soft:active{background:color-mix(in oklab,var(--ui-success) 16%,transparent)}.cms-btn-success.cms-btn-ghost{background:transparent;color:var(--ui-success)}.cms-btn-success.cms-btn-ghost:hover{background:color-mix(in oklab,var(--ui-success) 14%,transparent)}.cms-btn-success.cms-btn-ghost:active{background:color-mix(in oklab,var(--ui-success) 22%,transparent)}.cms-form{display:flex;flex-direction:column;gap:1.25rem}.cms-tabs{align-items:center;border-bottom:1px solid var(--ui-border);display:flex;gap:.25rem;margin-bottom:.25rem;overflow-x:auto}.cms-tab{border-bottom:2px solid transparent;color:var(--ui-text-toned);cursor:pointer;font-size:.875rem;font-weight:500;margin-bottom:-1px;padding:.5rem .875rem;transition:color var(--cms-duration) var(--cms-ease),border-color var(--cms-duration) var(--cms-ease);white-space:nowrap}.cms-tab:hover{color:var(--ui-text-highlighted)}.cms-tab.is-active{border-bottom-color:var(--cms-fern);color:var(--cms-fern)}.cms-form-field{display:flex;flex-direction:column;gap:.375rem}.cms-form-label-row{align-items:center;display:flex;gap:.75rem;justify-content:space-between;min-height:1.75rem}.cms-form-label{color:var(--ui-text-toned);font-size:.875rem;font-weight:500}.cms-form-error,.cms-form-required{color:var(--ui-error)}.cms-form-error{font-size:.875rem}.cms-form-actions{align-items:center;display:flex;gap:.75rem;justify-content:flex-end;padding-top:.25rem}.cms-field{background:var(--cms-field);border:1px solid var(--cms-line);border-radius:var(--ui-radius);color:var(--ui-text-highlighted);line-height:1.25;transition:border-color var(--cms-duration) var(--cms-ease),box-shadow var(--cms-duration) var(--cms-ease);width:100%}textarea.cms-field{line-height:1.5;min-height:0;padding-bottom:.625rem;padding-top:.625rem;resize:vertical}.cms-field::-moz-placeholder{color:var(--ui-text-dimmed)}.cms-field::placeholder{color:var(--ui-text-dimmed)}.cms-field:hover:not(:focus,:focus-within){border-color:var(--cms-line-strong)}.cms-field:focus,.cms-field:focus-within{border-color:var(--cms-fern);box-shadow:0 0 0 3px color-mix(in oklab,var(--cms-fern) 25%,transparent);outline:none}.cms-field.is-error{border-color:var(--ui-error)}.cms-field.is-error:focus,.cms-field.is-error:focus-within{border-color:var(--ui-error);box-shadow:0 0 0 3px color-mix(in oklab,var(--ui-error) 25%,transparent)}.cms-field-sm{font-size:.875rem;min-height:2rem;padding:.25rem .625rem}.cms-field-md{font-size:.875rem;min-height:2.25rem;padding:.25rem .75rem}.cms-field-lg{font-size:.9375rem;min-height:2.625rem;padding:.375rem .875rem}.cms-select-chevron{align-items:center;cursor:pointer;display:inline-flex;transition:transform var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-select-chevron:hover{color:var(--ui-text-muted)}.cms-select-chevron.is-open{transform:rotate(180deg)}.cms-locale-switch{align-items:center;background:var(--cms-field);border:1px solid var(--cms-line);border-radius:var(--cms-radius-md);display:inline-flex;gap:2px;padding:2px}.cms-locale-option{border-radius:var(--cms-radius-sm);color:var(--ui-text-muted);cursor:pointer;font-family:var(--cms-font-mono);font-size:.6875rem;letter-spacing:.08em;line-height:1.4;padding:.125rem .5rem;text-transform:uppercase;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-locale-option:hover:not(.is-active){color:var(--ui-text-highlighted)}.cms-locale-option.is-empty{color:var(--ui-text-dimmed)}.cms-locale-option.is-active{background:var(--cms-elevated);color:var(--cms-fern)}.cms-input-wrap{align-items:center;display:flex;position:relative;width:100%}.cms-input-wrap .cms-field{width:100%}.cms-input-lead,.cms-input-trail{align-items:center;color:var(--ui-text-dimmed);display:flex;position:absolute}.cms-input-lead{left:.625rem}.cms-input-trail{right:.375rem}.cms-input-wrap.has-lead .cms-field{padding-left:2rem}.cms-switch{align-items:center;background:var(--cms-line-strong);border-radius:9999px;display:inline-flex;flex-shrink:0;height:1.25rem;position:relative;transition:background-color var(--cms-duration) var(--cms-ease);width:2.25rem}.cms-switch.is-on{background:var(--cms-fern)}.cms-switch:after{background:var(--cms-text);border-radius:9999px;content:"";height:.875rem;left:.1875rem;position:absolute;transition:transform var(--cms-duration) var(--cms-ease);width:.875rem}.cms-switch.is-on:after{background:var(--cms-canvas);transform:translateX(1rem)}.cms-overlay{align-items:center;background:var(--cms-scrim);display:flex;inset:0;justify-content:center;overflow-y:auto;padding:2rem 1rem;position:fixed;z-index:60}.cms-modal{background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);display:flex;flex-direction:column;max-height:calc(100dvh - 4rem);max-width:32rem;width:100%}.cms-modal.is-sm{max-width:28rem}.cms-modal.is-lg{max-width:48rem}.cms-modal-header{padding:1.25rem 1.5rem 0}.cms-modal-body{flex:1;min-height:0;overflow-y:auto;padding:1.25rem 1.5rem 1.5rem}.cms-modal-enter-active,.cms-modal-leave-active{transition:opacity var(--cms-duration-lg) var(--cms-ease)}.cms-modal-enter-active .cms-modal,.cms-modal-leave-active .cms-modal{transition:transform var(--cms-duration-lg) var(--cms-ease),opacity var(--cms-duration-lg) var(--cms-ease);will-change:transform}.cms-modal-enter-from,.cms-modal-leave-to{opacity:0}.cms-modal-enter-from .cms-modal,.cms-modal-leave-to .cms-modal{opacity:0;transform:translateY(8px)}.cms-overlay-drawer{align-items:stretch;justify-content:flex-end;overflow:hidden;padding:0;z-index:55}.cms-drawer{background:var(--cms-surface);border-left:1px solid var(--cms-line);border-radius:var(--cms-radius-lg) 0 0 var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);display:flex;flex-direction:column;height:100%;max-width:46rem;width:100%}.cms-drawer-header{align-items:center;border-bottom:1px solid var(--cms-line);display:flex;gap:1rem;justify-content:space-between;padding:1.25rem 1.75rem}.cms-drawer-body{flex:1;min-height:0;overflow-y:auto;padding:1.75rem}.cms-drawer-footer{align-items:center;border-top:1px solid var(--cms-line);display:flex;gap:1rem;justify-content:space-between;padding:1.25rem 1.75rem}.cms-drawer-enter-active,.cms-drawer-leave-active{transition:opacity var(--cms-duration-lg) var(--cms-ease)}.cms-drawer-enter-active .cms-drawer,.cms-drawer-leave-active .cms-drawer{transition:transform var(--cms-duration-lg) var(--cms-ease);will-change:transform}.cms-drawer-enter-from,.cms-drawer-leave-to{opacity:0}.cms-drawer-enter-from .cms-drawer,.cms-drawer-leave-to .cms-drawer{transform:translateX(100%)}@media (prefers-reduced-motion:reduce){.cms-drawer-enter-active,.cms-drawer-enter-active .cms-drawer,.cms-drawer-leave-active,.cms-drawer-leave-active .cms-drawer,.cms-modal-enter-active,.cms-modal-enter-active .cms-modal,.cms-modal-leave-active,.cms-modal-leave-active .cms-modal{transition-duration:.01ms}}.cms-menu{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);margin-top:.375rem;min-width:12rem;padding:.25rem;position:absolute;z-index:50}.cms-menu.align-end{right:0}.cms-menu-item{align-items:center;border-radius:var(--cms-radius-sm);color:var(--ui-text);cursor:pointer;display:flex;font-size:.875rem;gap:.5rem;padding:.4rem .6rem;text-align:left;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease);width:100%}.cms-menu-item:hover{background:color-mix(in oklab,var(--cms-text) 8%,transparent);color:var(--ui-text-highlighted)}.cms-menu-check{color:var(--cms-fern);margin-left:auto}.cms-popover{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);margin-top:.375rem;position:absolute;z-index:50}.cms-selectmenu-input{background:transparent;color:var(--ui-text-highlighted);flex:1;min-width:4rem;outline:none}.cms-selectmenu-affix{color:var(--ui-text-dimmed);flex-shrink:0}.cms-selectmenu-panel{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);left:0;margin-top:.375rem;max-height:15rem;overflow-y:auto;padding:.25rem;position:absolute;right:0;z-index:50}.cms-tag{align-items:center;background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:9999px;color:var(--ui-text-highlighted);display:inline-flex;font-size:.8125rem;gap:.25rem;padding:.125rem .5rem}.cms-media-gallery{display:flex;flex-direction:column;gap:1.25rem}.cms-media-source{color:var(--ui-text-muted);font-size:.8125rem;margin-top:-.75rem}.cms-media-filters{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.cms-media-filters-actions{align-items:center;display:flex;flex-shrink:0;gap:.5rem;margin-left:auto}.cms-media-filter-separator{background:var(--cms-line);flex:none;height:1rem;margin-inline:.25rem;width:1px}.cms-pill-count{color:var(--ui-text-dimmed);font-family:var(--cms-font-mono);font-size:.6875rem;margin-left:.25rem}.cms-blocks-grid{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:640px){.cms-blocks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.cms-blocks-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.cms-block-tile{overflow:hidden;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-block-tile.is-muted{opacity:.45}.cms-block-preview{align-items:center;aspect-ratio:4/3;background:var(--cms-field);color:var(--ui-text-dimmed);display:flex;justify-content:center;position:relative;width:100%}.cms-block-preview>img,.cms-block-preview>video{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.cms-block-summary{color:var(--ui-text-muted);font-size:.75rem;line-height:1.5;padding:.75rem;text-align:left}.cms-block-hidden{color:var(--cms-text);filter:drop-shadow(0 1px 2px rgb(0 0 0/.6));left:.5rem;position:absolute;top:.5rem}.cms-block-tile.is-dragging{opacity:.4}.cms-block-tile.is-drop-target{outline:2px solid var(--cms-fern);outline-offset:2px}.cms-block-bar{gap:.25rem;padding:.375rem}.cms-block-bar,.cms-block-grip{align-items:center;display:flex}.cms-block-grip{color:var(--ui-text-dimmed);cursor:grab;justify-content:center;padding:.25rem;transition:color var(--cms-duration) var(--cms-ease)}.cms-block-grip:hover{color:var(--ui-text-muted)}.cms-block-tile.is-dragging .cms-block-grip{cursor:grabbing}.cms-block-bar-name{color:var(--ui-text-muted);flex:1;font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cms-block-bar-actions{align-items:center;display:flex;gap:.125rem}.cms-block-add{align-items:center;border:1px dashed var(--cms-line-strong);border-radius:var(--cms-radius-md);color:var(--ui-text-muted);display:flex;flex-direction:column;font-size:.8125rem;font-weight:500;gap:.375rem;justify-content:center;min-height:6rem;transition:border-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-block-add:hover{border-color:var(--cms-fern);color:var(--ui-text-highlighted)}.cms-media-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}@media (min-width:640px){.cms-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.cms-media-grid:not(.is-compact){grid-template-columns:repeat(4,minmax(0,1fr))}}.cms-media-tile{overflow:hidden;text-align:left;transition:border-color var(--cms-duration) var(--cms-ease)}.cms-media-tile.is-selectable{cursor:pointer}.cms-media-tile.is-selectable:hover{border-color:var(--cms-line-strong)}.cms-media-preview{align-items:center;aspect-ratio:1;background:var(--cms-field);color:var(--ui-text-dimmed);display:flex;justify-content:center;position:relative}.cms-media-preview>img,.cms-media-preview>video{height:100%;inset:0;-o-object-fit:cover;object-fit:cover;position:absolute;width:100%}.cms-media-actions{display:flex;gap:.25rem;opacity:0;position:absolute;right:.5rem;top:.5rem;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-media-actions:focus-within,.cms-media-tile:hover .cms-media-actions{opacity:1}.cms-media-info{background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);bottom:0;color:var(--cms-text);font-family:var(--cms-font-mono);font-size:.75rem;left:0;letter-spacing:.08em;line-height:1.4;opacity:0;padding:1.5rem .75rem .5rem;pointer-events:none;position:absolute;right:0;text-transform:uppercase;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-media-tile:focus-visible .cms-media-info,.cms-media-tile:hover .cms-media-info{opacity:1}.cms-media-meta{display:flex;flex-direction:column;gap:.25rem;padding:.625rem .875rem}.cms-media-name{color:var(--ui-text-highlighted);font-size:.875rem;font-weight:500}.cms-media-folder,.cms-media-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cms-media-folder{align-items:center;color:var(--ui-text-dimmed);display:inline-flex;font-size:.75rem;gap:.25rem}.cms-media-single{max-width:15rem;width:100%}.cms-block-tile.is-missing{border-color:color-mix(in oklab,var(--ui-warning) 55%,transparent)}.cms-media-missing{align-items:center;font-size:.75rem;gap:.375rem}.cms-media-missing,.cms-media-missing-icon{color:var(--ui-warning);display:flex}.cms-media-thumb{background:var(--cms-field);border-radius:var(--cms-radius-sm);height:2.25rem;-o-object-fit:cover;object-fit:cover;width:2.25rem}.cms-media-thumb.is-fallback{align-items:center;color:var(--ui-text-dimmed);display:flex;justify-content:center}.cms-media-thumb-empty{color:var(--ui-text-dimmed)}.cms-table-shell{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}.cms-table-scroll{flex:1;min-height:0;overflow:auto}.cms-table{border-collapse:collapse;min-width:-moz-max-content;min-width:max-content;text-align:left;width:100%}.cms-table td,.cms-table th{white-space:nowrap}.cms-table thead{background:var(--cms-surface);position:sticky;top:0;z-index:10}.cms-table th{background:var(--cms-surface);box-shadow:inset 0 -1px 0 var(--cms-line);color:var(--ui-text-muted);font-family:var(--cms-font-mono);font-size:.6875rem;font-weight:400;letter-spacing:.08em;line-height:1.4;padding:.75rem 1.25rem;text-transform:uppercase;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-table td{color:var(--ui-text);font-size:.875rem;padding:.875rem 1.25rem}.cms-table tbody tr{border-bottom:1px solid var(--cms-line);transition:background-color var(--cms-duration) var(--cms-ease)}.cms-table tbody tr:last-child{border-bottom:0}.cms-table tbody tr:hover{background:var(--cms-field)}.cms-table-cell-actions{display:flex;justify-content:flex-end}.cms-table th[draggable=true]{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cms-table th[draggable=true]:active{cursor:grabbing}.cms-table th.is-dragging{opacity:.4}.cms-table th.is-drop-target{background:var(--cms-field);box-shadow:inset 0 -1px 0 var(--cms-line),inset 0 0 0 2px color-mix(in oklab,var(--cms-fern) 55%,transparent)}.cms-th-label{align-items:center;display:inline-flex;gap:.35rem}.cms-table th.is-sortable{cursor:pointer}.cms-table th.is-sortable:hover,.cms-table th.is-sorted{color:var(--ui-text-highlighted)}.cms-table th.is-sorted{background:var(--cms-field)}.cms-th-sort{flex:none;opacity:0;transition:opacity var(--cms-duration) var(--cms-ease)}.cms-table th.is-sortable:hover .cms-th-sort,.cms-table th.is-sorted .cms-th-sort{opacity:1}.cms-alert{border:1px solid transparent;border-radius:var(--cms-radius-md);display:flex;flex-direction:column;font-size:.875rem;gap:.125rem;padding:.75rem 1rem}.cms-alert-title{font-weight:550}.cms-alert-error{background:color-mix(in oklab,var(--ui-error) 14%,transparent);border-color:color-mix(in oklab,var(--ui-error) 26%,transparent);color:var(--ui-error)}.cms-alert-success{background:color-mix(in oklab,var(--ui-success) 14%,transparent);border-color:color-mix(in oklab,var(--ui-success) 26%,transparent);color:var(--ui-success)}.cms-alert-warning{background:color-mix(in oklab,var(--ui-warning) 14%,transparent);border-color:color-mix(in oklab,var(--ui-warning) 26%,transparent);color:var(--ui-warning)}.cms-alert-neutral{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-toned)}.cms-alert-neutral .cms-alert-title{color:var(--ui-text-highlighted)}.cms-toaster{bottom:1rem;display:flex;flex-direction:column;gap:.5rem;max-width:calc(100vw - 2rem);position:fixed;right:1rem;width:20rem;z-index:80}.cms-toast{background:var(--cms-elevated);border:1px solid var(--cms-line);border-radius:var(--cms-radius-lg);box-shadow:var(--cms-shadow-overlay);padding:.75rem .875rem}.cms-toast-row{align-items:flex-start;display:flex;gap:.625rem}.cms-toast-icon{color:var(--ui-text-muted);flex-shrink:0;margin-top:.0625rem}.cms-toast.is-success .cms-toast-icon{color:var(--ui-success)}.cms-toast.is-error .cms-toast-icon{color:var(--ui-error)}.cms-toast-title{color:var(--ui-text-highlighted);font-size:.875rem;font-weight:500}.cms-toast-description{color:var(--ui-text-muted);font-size:.875rem;margin-top:.125rem}.cms-toast-dismiss{color:var(--ui-text-dimmed);flex-shrink:0;transition:color var(--cms-duration) var(--cms-ease)}.cms-toast-dismiss:hover{color:var(--ui-text-highlighted)}.cms-pagination{align-items:center;display:flex;gap:.25rem;justify-content:center}.cms-page-btn{border-radius:var(--cms-radius-sm);color:var(--ui-text-toned);font-size:.875rem;height:2rem;min-width:2rem;padding:0 .5rem;transition:background-color var(--cms-duration) var(--cms-ease),color var(--cms-duration) var(--cms-ease)}.cms-page-btn:hover:not(:disabled){background:var(--cms-field);color:var(--ui-text-highlighted)}.cms-page-btn.is-active{background:var(--cms-field);color:var(--cms-fern);font-weight:600}.cms-page-btn:disabled{opacity:.4}

package/dist/runtime/server/api/collection.get.js

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { useDb } from "#cms-db";
 import { pageRoutes } from "../../shared/index.js";
 import { decodeRows, getRegistryEntry, idColumn, tableColumns } from "../utils/registry.js";
+import { readPages } from "../utils/page-storage.js";
 import { attachManyToMany, relationTitles } from "../utils/relations.js";
 import { requireAdmin } from "../utils/require-admin.js";
 const querySchema = z.object({
@@ -31,7 +32,7 @@ export default defineEventHandler(async (event) => {
     querySchema.parse
   );
   if (entry.kind === "page") {
-    const rows = await db.select().from(table);
+    const rows = await readPages(name, entry, table);
     decodeRows(entry, rows);
     const saved = new Map(rows.map((row) => [row.id, row]));
     const items2 = pageRoutes(entry).map((route) => {

package/dist/runtime/server/api/item.get.js

@@ -8,6 +8,7 @@ import {
   parseId,
   requirePageRoute
 } from "../utils/registry.js";
+import { readPages } from "../utils/page-storage.js";
 import { attachManyToMany } from "../utils/relations.js";
 import { requireAdmin } from "../utils/require-admin.js";
 export default defineEventHandler(async (event) => {
@@ -17,13 +18,14 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 404, statusMessage: "Single objects have no items" });
   }
   const id = parseId(event);
-  const db = useDb();
-  const rows = await db.select().from(table).where(eq(idColumn(table), id)).limit(1);
   if (entry.kind === "page") {
     const route = requirePageRoute(entry, id);
-    if (!rows[0]) return { id: route.key, path: route.path };
-    return decodeRows(entry, [rows[0]])[0];
+    const [page] = await readPages(name, entry, table, { id });
+    if (!page) return { id: route.key, path: route.path };
+    return decodeRows(entry, [page])[0];
   }
+  const db = useDb();
+  const rows = await db.select().from(table).where(eq(idColumn(table), id)).limit(1);
   if (!rows[0]) throw createError({ statusCode: 404, statusMessage: "Row not found" });
   const [attached] = await attachManyToMany(db, name, entry, [rows[0]]);
   return decodeRows(entry, [attached])[0];

package/dist/runtime/server/api/item.put.js

@@ -11,6 +11,9 @@ import {
   requirePageRoute,
   withUpdatedAt
 } from "../utils/registry.js";
+import { pageFields } from "../../shared/index.js";
+import { assertMediaExists } from "../utils/media-check.js";
+import { writePage } from "../utils/page-storage.js";
 import {
   assertRelationTargets,
   attachManyToMany,
@@ -32,13 +35,11 @@ export default defineEventHandler(async (event) => {
   if (entry.kind === "page") {
     const route = requirePageRoute(entry, id);
     const body2 = await readValidatedBody(event, buildValidator(entry, route.path).parse);
+    await assertMediaExists(pageFields(entry, route.path), body2);
     const values2 = encodeColumnValues(entry, body2);
     const set2 = withUpdatedAt(table, values2);
     return mapConstraintErrors(
-      () => withTransaction(async (db) => {
-        const [row] = await db.insert(table).values({ id: route.key, path: route.path, ...set2 }).onConflictDoUpdate({ target: idColumn(table), set: set2 }).returning();
-        return decodeRows(entry, [row])[0];
-      })
+      async () => decodeRows(entry, [await writePage(name, entry, table, route, set2)])[0]
     );
   }
   const body = await readValidatedBody(event, buildValidator(entry).parse);

package/dist/runtime/server/routes/graphql.js

@@ -3,6 +3,7 @@ import { defineEventHandler } from "h3";
 import { useRuntimeConfig } from "#imports";
 import { buildCmsSchema, createGraphqlContext } from "../utils/graphql.js";
 import { createBreadthRule, createDepthRule, createIntrospectionRule } from "../utils/graphql-depth.js";
+import { CMS_GRAPHQL_BATCH_LIMIT } from "../../shared/index.js";
 function buildYoga(options) {
   return createYoga({
     schema: buildCmsSchema(),
@@ -10,6 +11,7 @@ function buildYoga(options) {
     landingPage: false,
     graphiql: options.graphiql,
     cors: false,
+    batching: { limit: CMS_GRAPHQL_BATCH_LIMIT },
     context: () => createGraphqlContext(),
     plugins: [
       {

package/dist/runtime/server/utils/db-d1.d.ts

@@ -7,5 +7,7 @@ export declare function useDb(): import("drizzle-orm/d1").DrizzleD1Database<Reco
 };
 type Db = ReturnType<typeof useDb>;
 export type CmsDb = Db;
+export declare const cmsDialect: 'sqlite' | 'postgres';
 export declare function withTransaction<T>(fn: (db: CmsDb) => Promise<T>): Promise<T>;
+export declare function runBatch(build: (db: CmsDb) => PromiseLike<unknown>[]): Promise<unknown[]>;
 export {};

package/dist/runtime/server/utils/db-d1.js

@@ -21,6 +21,11 @@ export function useDb() {
   if (!_db) _db = drizzle(useD1Binding());
   return _db;
 }
+export const cmsDialect = "sqlite";
 export function withTransaction(fn) {
   return fn(useDb());
 }
+export function runBatch(build) {
+  const db = useDb();
+  return db.batch(build(db));
+}

package/dist/runtime/server/utils/db-libsql.d.ts

@@ -3,5 +3,7 @@ export declare function useDb(): import("drizzle-orm/libsql").LibSQLDatabase<Rec
 };
 type Db = ReturnType<typeof useDb>;
 export type CmsDb = Db | Parameters<Parameters<Db['transaction']>[0]>[0];
+export declare const cmsDialect: 'sqlite' | 'postgres';
 export declare function withTransaction<T>(fn: (db: CmsDb) => Promise<T>): Promise<T>;
+export declare function runBatch(build: (db: CmsDb) => PromiseLike<unknown>[]): Promise<unknown[]>;
 export {};

package/dist/runtime/server/utils/db-libsql.js

@@ -20,6 +20,11 @@ export function useDb() {
   }
   return _db;
 }
+export const cmsDialect = "sqlite";
 export function withTransaction(fn) {
   return useDb().transaction((tx) => fn(tx));
 }
+export function runBatch(build) {
+  const db = useDb();
+  return db.batch(build(db));
+}

package/dist/runtime/server/utils/db-postgres.d.ts

@@ -3,5 +3,7 @@ export declare function useDb(): import("drizzle-orm/node-postgres").NodePgDatab
 };
 type Db = ReturnType<typeof useDb>;
 export type CmsDb = Db | Parameters<Parameters<Db['transaction']>[0]>[0];
+export declare const cmsDialect: 'sqlite' | 'postgres';
 export declare function withTransaction<T>(fn: (db: CmsDb) => Promise<T>): Promise<T>;
+export declare function runBatch(build: (db: CmsDb) => PromiseLike<unknown>[]): Promise<unknown[]>;
 export {};

package/dist/runtime/server/utils/db-postgres.js

@@ -16,6 +16,14 @@ export function useDb() {
   }
   return _db;
 }
+export const cmsDialect = "postgres";
 export function withTransaction(fn) {
   return useDb().transaction((tx) => fn(tx));
 }
+export function runBatch(build) {
+  return withTransaction(async (db) => {
+    const results = [];
+    for (const statement of build(db)) results.push(await statement);
+    return results;
+  });
+}

package/dist/runtime/server/utils/db-sqlite.d.ts

@@ -3,4 +3,6 @@ export declare function useDb(): import("drizzle-orm/better-sqlite3").BetterSQLi
     $client: Database.Database;
 };
 export type CmsDb = ReturnType<typeof useDb>;
+export declare const cmsDialect: 'sqlite' | 'postgres';
 export declare function withTransaction<T>(fn: (db: CmsDb) => Promise<T>): Promise<T>;
+export declare function runBatch(build: (db: CmsDb) => PromiseLike<unknown>[]): Promise<unknown[]>;

package/dist/runtime/server/utils/db-sqlite.js

@@ -16,6 +16,7 @@ export function useDb() {
   }
   return _db;
 }
+export const cmsDialect = "sqlite";
 let txQueue = Promise.resolve();
 export function withTransaction(fn) {
   const db = useDb();
@@ -34,3 +35,10 @@ export function withTransaction(fn) {
   });
   return run;
 }
+export function runBatch(build) {
+  return withTransaction(async (db) => {
+    const results = [];
+    for (const statement of build(db)) results.push(await statement);
+    return results;
+  });
+}

package/dist/runtime/server/utils/graphql.js

@@ -38,6 +38,7 @@ import {
   typeName
 } from "../../shared/graphql-sdl.js";
 import { useMediaIndex } from "./media-index.js";
+import { readPages } from "./page-storage.js";
 import { getContentI18n, resolveTable, tableColumns } from "./registry.js";
 const MAX_LIMIT = 100;
 const DEFAULT_LIMIT = 50;
@@ -322,14 +323,12 @@ export function buildCmsSchema() {
     if (entry.kind === "page") {
       queryResolvers[name] = async (_, args) => {
         const locale = resolveLocaleArg(args.locale);
-        const table = tableFor(name);
-        const rows = await useDb().select().from(table).orderBy(asc(tableColumns(table).path));
+        const rows = await readPages(name, entry, tableFor(name), { orderByPath: true });
         return rows.map((row) => localizeRow(entry, row, locale));
       };
       queryResolvers[`${name}ByPath`] = async (_, args) => {
         const locale = resolveLocaleArg(args.locale);
-        const table = tableFor(name);
-        const [row] = await useDb().select().from(table).where(eq(tableColumns(table).path, args.path)).limit(1);
+        const [row] = await readPages(name, entry, tableFor(name), { path: args.path });
         return row ? localizeRow(entry, row, locale) : null;
       };
       continue;

package/dist/runtime/server/utils/media-check.d.ts

@@ -0,0 +1,2 @@
+import type { FieldConfig } from '../../shared/index.js';
+export declare function assertMediaExists(fields: Record<string, FieldConfig>, values: Record<string, unknown>): Promise<void>;

package/dist/runtime/server/utils/media-check.js

@@ -0,0 +1,20 @@
+import { useDb } from "#cms-db";
+import { cms_media } from "#cms-tables";
+import { useRuntimeConfig } from "#imports";
+import { useMediaIndex } from "./media-index.js";
+import { assertKnownMedia, mediaKeysInTable, mediaReferences } from "./media-references.js";
+async function mediaLookup() {
+  const { media } = useRuntimeConfig().cms;
+  if (media.storage !== "local") {
+    return (keys) => mediaKeysInTable(useDb(), cms_media, keys);
+  }
+  const index = await useMediaIndex();
+  if (index.source.kind === "none") return null;
+  return async (keys) => new Set(keys.filter((key) => index.get(key)));
+}
+export async function assertMediaExists(fields, values) {
+  const references = mediaReferences(fields, values);
+  if (!references.length) return;
+  const lookup = await mediaLookup();
+  if (lookup) await assertKnownMedia(references, lookup);
+}

package/dist/runtime/server/utils/media-references.d.ts

@@ -0,0 +1,10 @@
+import type { BaseSQLiteDatabase, SQLiteTable } from 'drizzle-orm/sqlite-core';
+import type { FieldConfig } from '../../shared/index.js';
+export interface MediaReference {
+    field: string;
+    key: string;
+}
+export type MediaLookup = (keys: string[]) => Promise<Set<string>>;
+export declare function mediaReferences(fields: Record<string, FieldConfig>, values: Record<string, unknown>): MediaReference[];
+export declare function assertKnownMedia(references: MediaReference[], lookup: MediaLookup): Promise<void>;
+export declare function mediaKeysInTable(db: Pick<BaseSQLiteDatabase<'sync' | 'async', unknown>, 'select'>, table: SQLiteTable, keys: string[]): Promise<Set<string>>;

package/dist/runtime/server/utils/media-references.js

@@ -0,0 +1,50 @@
+import { inArray } from "drizzle-orm";
+import { createError } from "h3";
+const LOOKUP_CHUNK = 90;
+function mediaKeysOf(value) {
+  if (typeof value === "string") return value ? [value] : [];
+  if (!value || typeof value !== "object") return [];
+  return Object.values(value).filter(
+    (key) => typeof key === "string" && key !== ""
+  );
+}
+export function mediaReferences(fields, values) {
+  const references = [];
+  for (const [key, field] of Object.entries(fields)) {
+    const value = values[key];
+    if (field.type === "media") {
+      for (const mediaKey of mediaKeysOf(value)) references.push({ field: key, key: mediaKey });
+      continue;
+    }
+    if (field.type !== "blocks" || !Array.isArray(value)) continue;
+    value.forEach((item, index) => {
+      const block = item ? field.blocks?.[String(item.type)] : void 0;
+      for (const [blockFieldKey, blockField] of Object.entries(block?.fields ?? {})) {
+        if (blockField.type !== "media") continue;
+        for (const mediaKey of mediaKeysOf(item?.[blockFieldKey])) {
+          references.push({ field: `${key}[${index}].${blockFieldKey}`, key: mediaKey });
+        }
+      }
+    });
+  }
+  return references;
+}
+export async function assertKnownMedia(references, lookup) {
+  if (!references.length) return;
+  const known = await lookup([...new Set(references.map((reference) => reference.key))]);
+  const missing = references.filter((reference) => !known.has(reference.key));
+  if (!missing.length) return;
+  throw createError({
+    statusCode: 400,
+    statusMessage: `Media not found in the library: ${missing.map((reference) => `'${reference.key}' (${reference.field})`).join(", ")}`
+  });
+}
+export async function mediaKeysInTable(db, table, keys) {
+  const column = table.key;
+  const found = /* @__PURE__ */ new Set();
+  for (let index = 0; index < keys.length; index += LOOKUP_CHUNK) {
+    const rows = await db.select({ key: column }).from(table).where(inArray(column, keys.slice(index, index + LOOKUP_CHUNK)));
+    for (const row of rows) found.add(row.key);
+  }
+  return found;
+}

package/dist/runtime/server/utils/page-rows.d.ts

@@ -0,0 +1,51 @@
+import type { SQL } from 'drizzle-orm';
+import type { BaseSQLiteDatabase, SQLiteTable } from 'drizzle-orm/sqlite-core';
+import type { CmsEntry, CmsPageRoute } from '../../shared/index.js';
+export type PageDialect = 'sqlite' | 'postgres';
+export type PageDb = Pick<BaseSQLiteDatabase<'sync' | 'async', unknown>, 'select' | 'insert' | 'delete'>;
+export interface PageTables {
+    page: SQLiteTable;
+    fields: SQLiteTable;
+    media: SQLiteTable;
+}
+export interface PageFieldRow {
+    pageId: string;
+    key: string;
+    position: number;
+    value: string;
+}
+export interface PageMediaRow {
+    pageId: string;
+    key: string;
+    position: number;
+    mediaKey: string;
+}
+export interface EncodedPage {
+    columns: Record<string, unknown>;
+    fields: PageFieldRow[];
+    media: PageMediaRow[];
+    fieldKeys: string[];
+    mediaKeys: string[];
+}
+type Row = Record<string, unknown>;
+export declare const PAGE_BLOCK_TYPE_KEY = "_type";
+export declare function pageBlockKey(fieldKey: string, blockFieldKey: string): string;
+export declare function encodePageRows(entry: CmsEntry, pageId: string, values: Row): EncodedPage;
+export declare function decodePageRow(entry: CmsEntry, row: Row): Row;
+export declare function decodePageRows(entry: CmsEntry, rows: Row[]): Row[];
+export declare function pageSelection(dialect: PageDialect, tables: PageTables): {
+    $fields: SQL<unknown>;
+    $media: SQL<unknown>;
+};
+export declare function selectPages(db: PageDb, dialect: PageDialect, tables: PageTables): import("drizzle-orm/sqlite-core").SQLiteSelectBase<string, "async" | "sync", unknown, {
+    $fields: SQL<unknown>;
+    $media: SQL<unknown>;
+}, "partial", Record<string, "not-null">, true, never, {
+    $fields: unknown;
+    $media: unknown;
+}[], {
+    $fields: import("drizzle-orm").DrizzleTypeError<"You cannot reference this field without assigning it an alias first - use `.as(<alias>)`">;
+    $media: import("drizzle-orm").DrizzleTypeError<"You cannot reference this field without assigning it an alias first - use `.as(<alias>)`">;
+}>;
+export declare function pageWriteStatements(db: PageDb, dialect: PageDialect, tables: PageTables, entry: CmsEntry, route: Pick<CmsPageRoute, 'key' | 'path'>, values: Row): PromiseLike<unknown>[];
+export {};

package/dist/runtime/server/utils/page-rows.js

@@ -0,0 +1,223 @@
+import { and, eq, getTableColumns, getTableName, inArray, sql } from "drizzle-orm";
+import {
+  PAGE_PATH_FIELD,
+  isMultiSelect,
+  isTranslatableField,
+  isTranslatableMediaField,
+  pageAllFields,
+  pageRowFields
+} from "../../shared/index.js";
+export const PAGE_BLOCK_TYPE_KEY = "_type";
+const FIELDS_SELECTION = "$fields";
+const MEDIA_SELECTION = "$media";
+const INSERT_CHUNK = 20;
+const KEY_CHUNK = 90;
+const PLAIN_STRING_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "richtext",
+  "email",
+  "slug",
+  "date",
+  "select",
+  "relation"
+]);
+function columnsOf(table) {
+  return table;
+}
+function isPlainString(field) {
+  return !!field && PLAIN_STRING_TYPES.has(field.type) && !isTranslatableField(field) && !isMultiSelect(field);
+}
+function parseJson(raw) {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+function encodeValue(field, value) {
+  return isPlainString(field) ? String(value) : JSON.stringify(value);
+}
+function decodeValue(field, raw) {
+  return isPlainString(field) ? raw : parseJson(raw);
+}
+function encodeMedia(value) {
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
+function decodeBlockMedia(field, raw) {
+  return isTranslatableMediaField(field) && raw.startsWith("{") ? parseJson(raw) : raw;
+}
+export function pageBlockKey(fieldKey, blockFieldKey) {
+  return `${fieldKey}.${blockFieldKey}`;
+}
+function blockOwnedKeys(key, field) {
+  const fields = /* @__PURE__ */ new Set([pageBlockKey(key, PAGE_BLOCK_TYPE_KEY)]);
+  const media = /* @__PURE__ */ new Set();
+  for (const block of Object.values(field.blocks ?? {})) {
+    for (const [blockFieldKey, blockField] of Object.entries(block.fields)) {
+      const blockKey = pageBlockKey(key, blockFieldKey);
+      if (blockField.type === "media") media.add(blockKey);
+      else fields.add(blockKey);
+    }
+  }
+  return { fields: [...fields], media: [...media] };
+}
+export function encodePageRows(entry, pageId, values) {
+  const rowFields = pageRowFields(entry);
+  const encoded = { columns: {}, fields: [], media: [], fieldKeys: [], mediaKeys: [] };
+  const pushField = (key, position, value) => encoded.fields.push({ pageId, key, position, value });
+  const pushMedia = (key, position, value) => encoded.media.push({ pageId, key, position, mediaKey: encodeMedia(value) });
+  for (const [key, value] of Object.entries(values)) {
+    const field = rowFields[key];
+    if (!field) {
+      encoded.columns[key] = value;
+      continue;
+    }
+    if (field.type === "blocks") {
+      const owned = blockOwnedKeys(key, field);
+      encoded.fieldKeys.push(...owned.fields);
+      encoded.mediaKeys.push(...owned.media);
+      if (!Array.isArray(value)) continue;
+      value.forEach((item, position) => {
+        const type = String(item.type);
+        const block = field.blocks?.[type];
+        pushField(pageBlockKey(key, PAGE_BLOCK_TYPE_KEY), position, type);
+        for (const [blockFieldKey, blockValue] of Object.entries(item)) {
+          if (blockFieldKey === "type" || blockValue == null) continue;
+          const blockField = block?.fields[blockFieldKey];
+          const blockKey = pageBlockKey(key, blockFieldKey);
+          if (blockField?.type === "media") pushMedia(blockKey, position, blockValue);
+          else pushField(blockKey, position, encodeValue(blockField, blockValue));
+        }
+      });
+      continue;
+    }
+    if (field.type === "media") {
+      encoded.mediaKeys.push(key);
+      if (value != null) pushMedia(key, 0, value);
+      continue;
+    }
+    encoded.fieldKeys.push(key);
+    if (value != null) pushField(key, 0, encodeValue(field, value));
+  }
+  return encoded;
+}
+function parseChildren(value) {
+  if (value == null) return [];
+  const rows = typeof value === "string" ? parseJson(value) : value;
+  return Array.isArray(rows) ? rows : [];
+}
+function indexChildren(rows) {
+  const index = /* @__PURE__ */ new Map();
+  for (const [key, position, value] of rows) {
+    if (key == null || value == null) continue;
+    let positions = index.get(key);
+    if (!positions) {
+      positions = /* @__PURE__ */ new Map();
+      index.set(key, positions);
+    }
+    positions.set(Number(position), String(value));
+  }
+  return index;
+}
+function decodeBlocks(key, field, fields, media) {
+  const types = fields.get(pageBlockKey(key, PAGE_BLOCK_TYPE_KEY));
+  if (!types?.size) return null;
+  return [...types.entries()].sort(([a], [b]) => a - b).map(([position, type]) => {
+    const item = { type };
+    for (const [blockFieldKey, blockField] of Object.entries(
+      field.blocks?.[type]?.fields ?? {}
+    )) {
+      const blockKey = pageBlockKey(key, blockFieldKey);
+      if (blockField.type === "media") {
+        const raw2 = media.get(blockKey)?.get(position);
+        item[blockFieldKey] = raw2 == null ? null : decodeBlockMedia(blockField, raw2);
+        continue;
+      }
+      const raw = fields.get(blockKey)?.get(position);
+      item[blockFieldKey] = raw == null ? null : decodeValue(blockField, raw);
+    }
+    return item;
+  });
+}
+function decodeRowField(key, field, fields, media) {
+  if (field.type === "blocks") return decodeBlocks(key, field, fields, media);
+  if (field.type === "media") return media.get(key)?.get(0) ?? null;
+  const raw = fields.get(key)?.get(0);
+  return raw == null ? null : decodeValue(field, raw);
+}
+export function decodePageRow(entry, row) {
+  const rowFields = pageRowFields(entry);
+  const fields = indexChildren(parseChildren(row[FIELDS_SELECTION]));
+  const media = indexChildren(parseChildren(row[MEDIA_SELECTION]));
+  const result = { id: row.id, [PAGE_PATH_FIELD]: row[PAGE_PATH_FIELD] };
+  for (const [key, field] of Object.entries(pageAllFields(entry))) {
+    result[key] = Object.hasOwn(rowFields, key) ? decodeRowField(key, field, fields, media) : row[key] ?? null;
+  }
+  for (const [key, value] of Object.entries(row)) {
+    if (key === FIELDS_SELECTION || key === MEDIA_SELECTION || Object.hasOwn(result, key))
+      continue;
+    result[key] = value;
+  }
+  return result;
+}
+export function decodePageRows(entry, rows) {
+  return rows.map((row) => decodePageRow(entry, row));
+}
+function qualified(table, column) {
+  return sql`${sql.identifier(getTableName(table))}.${sql.identifier(column.name)}`;
+}
+function childAggregate(dialect, page, table, valueKey) {
+  const columns = columnsOf(table);
+  const owner = qualified(table, columns.pageId);
+  const key = qualified(table, columns.key);
+  const position = qualified(table, columns.position);
+  const value = qualified(table, columns[valueKey]);
+  const pageId = qualified(page, columnsOf(page).id);
+  const from = sql.identifier(getTableName(table));
+  return dialect === "postgres" ? sql`(select coalesce(json_agg(json_build_array(${key}, ${position}, ${value})), '[]'::json) from ${from} where ${owner} = ${pageId})` : sql`(select json_group_array(json_array(${key}, ${position}, ${value})) from ${from} where ${owner} = ${pageId})`;
+}
+export function pageSelection(dialect, tables) {
+  return {
+    ...getTableColumns(tables.page),
+    [FIELDS_SELECTION]: childAggregate(dialect, tables.page, tables.fields, "value"),
+    [MEDIA_SELECTION]: childAggregate(dialect, tables.page, tables.media, "mediaKey")
+  };
+}
+export function selectPages(db, dialect, tables) {
+  return db.select(pageSelection(dialect, tables)).from(tables.page).$dynamic();
+}
+function chunks(items, size) {
+  const out = [];
+  for (let index = 0; index < items.length; index += size) {
+    out.push(items.slice(index, index + size));
+  }
+  return out;
+}
+export function pageWriteStatements(db, dialect, tables, entry, route, values) {
+  const encoded = encodePageRows(entry, route.key, values);
+  const pageId = columnsOf(tables.page).id;
+  const fieldColumns = columnsOf(tables.fields);
+  const mediaColumns = columnsOf(tables.media);
+  const set = encoded.columns;
+  const statements = [
+    db.insert(tables.page).values({ ...set, id: route.key, [PAGE_PATH_FIELD]: route.path }).onConflictDoUpdate({ target: pageId, set })
+  ];
+  for (const keys of chunks(encoded.fieldKeys, KEY_CHUNK)) {
+    statements.push(
+      db.delete(tables.fields).where(and(eq(fieldColumns.pageId, route.key), inArray(fieldColumns.key, keys)))
+    );
+  }
+  for (const keys of chunks(encoded.mediaKeys, KEY_CHUNK)) {
+    statements.push(
+      db.delete(tables.media).where(and(eq(mediaColumns.pageId, route.key), inArray(mediaColumns.key, keys)))
+    );
+  }
+  for (const rows of chunks(encoded.fields, INSERT_CHUNK)) {
+    statements.push(db.insert(tables.fields).values(rows));
+  }
+  for (const rows of chunks(encoded.media, INSERT_CHUNK)) {
+    statements.push(db.insert(tables.media).values(rows));
+  }
+  statements.push(selectPages(db, dialect, tables).where(eq(pageId, route.key)).limit(1));
+  return statements;
+}

package/dist/runtime/server/utils/page-storage.d.ts

@@ -0,0 +1,11 @@
+import type { SQLiteTable } from 'drizzle-orm/sqlite-core';
+import type { CmsEntry, CmsPageRoute } from '../../shared/index.js';
+type Row = Record<string, unknown>;
+export interface PageReadOptions {
+    id?: string;
+    path?: string;
+    orderByPath?: boolean;
+}
+export declare function readPages(name: string, entry: CmsEntry, table: SQLiteTable, options?: PageReadOptions): Promise<Row[]>;
+export declare function writePage(name: string, entry: CmsEntry, table: SQLiteTable, route: Pick<CmsPageRoute, 'key' | 'path'>, set: Row): Promise<Row>;
+export {};

package/dist/runtime/server/utils/page-storage.js

@@ -0,0 +1,42 @@
+import { asc, eq } from "drizzle-orm";
+import { createError } from "h3";
+import { cmsDialect, runBatch, useDb } from "#cms-db";
+import * as cmsTables from "#cms-tables";
+import { PAGE_PATH_FIELD, pageFieldsTableName, pageMediaTableName } from "../../shared/index.js";
+import { decodePageRows, pageWriteStatements, selectPages } from "./page-rows.js";
+import { idColumn, tableColumns } from "./registry.js";
+function childTable(name) {
+  const table = cmsTables[name];
+  if (!table) throw createError({ statusCode: 500, statusMessage: `No table: ${name}` });
+  return table;
+}
+function pageTables(name, table) {
+  return {
+    page: table,
+    fields: childTable(pageFieldsTableName(name)),
+    media: childTable(pageMediaTableName(name))
+  };
+}
+function pageFilter(table, options) {
+  if (options.id !== void 0) return eq(idColumn(table), options.id);
+  if (options.path !== void 0) return eq(tableColumns(table)[PAGE_PATH_FIELD], options.path);
+  return void 0;
+}
+export async function readPages(name, entry, table, options = {}) {
+  const db = useDb();
+  const where = pageFilter(table, options);
+  const single = options.id !== void 0 || options.path !== void 0;
+  const rows = selectPages(db, cmsDialect, pageTables(name, table));
+  if (where) rows.where(where);
+  if (options.orderByPath) rows.orderBy(asc(tableColumns(table)[PAGE_PATH_FIELD]));
+  if (single) rows.limit(1);
+  const result = await rows;
+  return decodePageRows(entry, result);
+}
+export async function writePage(name, entry, table, route, set) {
+  const tables = pageTables(name, table);
+  const results = await runBatch(
+    (db) => pageWriteStatements(db, cmsDialect, tables, entry, route, set)
+  );
+  return decodePageRows(entry, results.at(-1))[0];
+}

package/dist/runtime/shared/index.d.ts

@@ -96,6 +96,7 @@ export declare function translatableBlockFieldKeys(block: BlockConfig): string[]
 export declare function hasTranslatableBlockFields(field: FieldConfig): boolean;
 export declare function localizeBlock(field: FieldConfig, item: unknown, locale: string, defaultLocale: string): unknown;
 export declare function localizeBlocks(field: FieldConfig, value: unknown, locale: string, defaultLocale: string): unknown;
+export declare const CMS_GRAPHQL_BATCH_LIMIT = 20;
 export type CmsEntryKind = 'collection' | 'single' | 'page';
 export interface CmsPageRoute {
     path: string;
@@ -116,6 +117,7 @@ export interface CmsEntry {
     labels?: Record<string, string>;
     overrides?: Record<string, Record<string, FieldConfig | null>>;
     pages?: CmsPageRoute[];
+    columns?: string[];
     tabs?: CmsTab[];
     table?: CmsTable;
 }
@@ -134,6 +136,10 @@ export declare function pageRouteOf(entry: CmsEntry, key: string): CmsPageRoute
 export declare function pageOverrideFields(entry: CmsEntry, path: string): Record<string, FieldConfig | null>;
 export declare function pageFields(entry: CmsEntry, path: string): Record<string, FieldConfig>;
 export declare function pageAllFields(entry: CmsEntry): Record<string, FieldConfig>;
+export declare function pageColumnFields(entry: CmsEntry): Record<string, FieldConfig>;
+export declare function pageRowFields(entry: CmsEntry): Record<string, FieldConfig>;
+export declare function pageFieldsTableName(name: string): string;
+export declare function pageMediaTableName(name: string): string;
 type EntryLike = Pick<CmsEntry, 'fields'> & Partial<Pick<CmsEntry, 'kind' | 'overrides'>>;
 export declare function entryFieldsFor(entry: EntryLike, path?: string): Record<string, FieldConfig>;
 export declare function typeName(name: string): string;
@@ -228,6 +234,7 @@ export interface CmsPageInput extends CmsEntryInputBase {
     order?: string[];
     labels?: Record<string, string>;
     overrides?: Record<string, Record<string, CmsFieldInput | null>>;
+    columns?: string[];
 }
 export type CmsEntryInput = CmsCollectionInput | CmsSingleInput | CmsPageInput;
 export type CmsConfigInput = Record<string, CmsEntryInput>;

package/dist/runtime/shared/index.js

@@ -191,6 +191,7 @@ export function localizeBlocks(field, value, locale, defaultLocale) {
   if (!Array.isArray(value)) return value;
   return value.map((item) => localizeBlock(field, item, locale, defaultLocale));
 }
+export const CMS_GRAPHQL_BATCH_LIMIT = 20;
 export function entryTabs(entry) {
   return entry.tabs?.length ? entry.tabs : [];
 }
@@ -258,6 +259,26 @@ export function pageAllFields(entry) {
   }
   return fields;
 }
+export function pageColumnFields(entry) {
+  const fields = {};
+  for (const key of entry.columns ?? []) {
+    const field = entry.fields[key];
+    if (field) fields[key] = field;
+  }
+  return fields;
+}
+export function pageRowFields(entry) {
+  const columns = new Set(entry.columns ?? []);
+  return Object.fromEntries(
+    Object.entries(pageAllFields(entry)).filter(([key]) => !columns.has(key))
+  );
+}
+export function pageFieldsTableName(name) {
+  return `${name}_fields`;
+}
+export function pageMediaTableName(name) {
+  return `${name}_media`;
+}
 export function entryFieldsFor(entry, path) {
   if (entry.kind !== "page") return entry.fields;
   return path ? pageFields(entry, path) : pageAllFields(entry);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "description": "Lightweight CMS that ships with your Nuxt app: runs on the Nitro server, content types defined in code, /cms admin panel, GraphQL API, SQLite or Postgres. No external CMS needed!",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",