@xleddyl/nuxt-cms 0.1.23 → 0.1.25

package/dist/runtime/app/pages/admin-collection.vue

@@ -1,5 +1,5 @@
 <template>
-   <div class="cms-rise flex flex-col gap-7">
+   <div class="cms-page" :class="{ 'is-fill': config.kind === 'collection' && !error }">
       <CmsPageHeader :kicker="kicker" :title="config.label">
          <CmsButton
             v-if="config.kind === 'single'"
@@ -7,29 +7,7 @@
             :form="FORM_ID"
             label="Save"
             :loading="saving"
-            class="rounded-full px-6"
          />
-         <div v-if="config.kind === 'collection'" class="flex items-center gap-2">
-            <CmsDropdownMenu
-               v-if="rows.length"
-               :items="columnItems"
-               :content="{ align: 'end' }"
-               :ui="{ content: 'w-48' }"
-            >
-               <CmsButton
-                  label="Columns"
-                  icon="view-columns"
-                  variant="subtle"
-                  class="rounded-full px-4"
-               />
-            </CmsDropdownMenu>
-            <CmsButton
-               label="New entry"
-               icon="plus"
-               class="rounded-full px-4"
-               @click="openCreate"
-            />
-         </div>
       </CmsPageHeader>
 
       <CmsEmptyState v-if="error" icon="exclamation-triangle" title="Could not load entries">
@@ -37,13 +15,12 @@
             label="Retry"
             icon="arrow-path"
             variant="subtle"
-            class="mt-3 rounded-full px-4"
             :loading="status === 'pending'"
             @click="reload"
          />
       </CmsEmptyState>
 
-      <div v-else-if="config.kind === 'single'" class="cms-card p-7">
+      <div v-else-if="config.kind === 'single'" class="cms-card cms-panel">
          <CmsEntryForm
             v-model="formState"
             :fields="config.fields"
@@ -54,53 +31,56 @@
       </div>
 
       <template v-else>
-         <CmsInput
-            v-if="total || searchTerm"
-            v-model="search"
-            icon="magnifying-glass"
-            placeholder="Search…"
-            class="max-w-xs"
-         />
-
-         <div v-if="rows.length" class="cms-card overflow-hidden">
-            <CmsTable
-               v-model:column-visibility="columnVisibility"
-               :data="rows"
-               :columns="columns"
-               :ui="tableUi"
-               @select="onSelect"
-            >
-               <template v-if="drafts" #status-cell="{ row }">
-                  <span
-                     class="cms-badge"
-                     :class="row.original.status === 'published' ? 'is-published' : 'is-draft'"
-                  >
-                     {{ row.original.status === "published" ? "Published" : "Draft" }}
-                  </span>
-               </template>
-               <template #actions-cell="{ row }">
-                  <div class="flex justify-end">
-                     <CmsButton
-                        icon="trash"
-                        variant="ghost"
-                        color="error"
-                        size="xs"
-                        class="rounded-full"
-                        @click.stop="deleteRow(row.original)"
-                     />
-                  </div>
-               </template>
-            </CmsTable>
+         <div class="cms-toolbar">
+            <CmsInput
+               v-if="total || searchTerm"
+               v-model="search"
+               icon="magnifying-glass"
+               placeholder="Search…"
+               class="flex-1"
+            />
+            <div class="cms-toolbar-actions">
+               <CmsDropdownMenu v-if="rows.length" :items="columnItems" :content="{ align: 'end' }">
+                  <CmsButton label="Columns" icon="view-columns" variant="subtle" />
+               </CmsDropdownMenu>
+               <CmsButton label="New entry" icon="plus" @click="openCreate" />
+            </div>
          </div>
 
-         <div v-else-if="status === 'pending'" class="flex justify-center py-10">
-            <CmsIcon name="arrow-path" class="size-6 animate-spin text-(--ui-text-dimmed)" />
-         </div>
+         <CmsTable
+            v-if="rows.length"
+            v-model:column-visibility="columnVisibility"
+            :data="rows"
+            :columns="columns"
+            @select="onSelect"
+            @reorder="reorderColumns"
+         >
+            <template v-for="key in mediaKeys" #[`${key}-cell`]="{ row }" :key="key">
+               <CmsMediaThumb :value="row.original[key]" />
+            </template>
+            <template v-if="drafts" #status-cell="{ row }">
+               <CmsStatusBadge :published="row.original.status === 'published'" />
+            </template>
+            <template #actions-cell="{ row }">
+               <div class="cms-table-cell-actions">
+                  <CmsButton
+                     icon="trash"
+                     variant="ghost"
+                     color="error"
+                     size="xs"
+                     @click.stop="deleteRow(row.original)"
+                  />
+               </div>
+            </template>
+         </CmsTable>
+
+         <CmsSpinner v-else-if="status === 'pending'" />
 
          <CmsEmptyState
             v-else-if="searchTerm"
             icon="magnifying-glass"
             title="No matching entries"
+            fill
          />
 
          <CmsEmptyState
@@ -108,19 +88,21 @@
             icon="sparkles"
             title="Nothing here yet"
             body="Entries you create will show up here."
+            fill
          >
-            <CmsButton
-               label="New entry"
-               icon="plus"
-               variant="subtle"
-               class="mt-3 rounded-full px-4"
-               @click="openCreate"
-            />
+            <CmsButton label="New entry" icon="plus" variant="subtle" @click="openCreate" />
          </CmsEmptyState>
 
-         <div v-if="total > PAGE_SIZE" class="flex justify-center">
-            <CmsPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" />
-         </div>
+         <CmsPagination v-model:page="page" :total="total" :items-per-page="PAGE_SIZE" />
+
+         <CmsEntryDrawer
+            v-model:open="drawerOpen"
+            :collection="name"
+            :config="config"
+            :entry-id="drawerEntryId"
+            @saved="refresh"
+            @deleted="onDrawerDeleted"
+         />
       </template>
    </div>
 </template>
@@ -131,7 +113,6 @@ import {
   computed,
   createError,
   definePageMeta,
-  navigateTo,
   onMounted,
   ref,
   useFetch,
@@ -159,6 +140,7 @@ if (!config) {
   throw createError({ statusCode: 404, statusMessage: "Unknown collection", fatal: true });
 }
 const fieldKeys = Object.keys(config.fields);
+const mediaKeys = fieldKeys.filter((key) => config.fields[key].type === "media");
 const drafts = config.kind === "collection" && !!config.drafts;
 const formKeys = drafts ? [...fieldKeys, "status"] : fieldKeys;
 const endpoint = `/api/cms/admin/${name}`;
@@ -187,18 +169,13 @@ function isList(value) {
 }
 const rows = computed(() => isList(data.value) ? data.value.items : []);
 const total = computed(() => isList(data.value) ? data.value.total : 0);
+const relations = computed(() => isList(data.value) ? data.value.relations ?? {} : {});
 const reload = async () => {
   await refresh();
   if (config.kind === "single" && !error.value) {
     formState.value = data.value && !isList(data.value) ? pickFields(data.value) : emptyState();
   }
 };
-const tableUi = {
-  thead: "border-b border-(--cms-line)",
-  th: "cms-kicker px-5 py-3 font-normal",
-  td: "px-5 py-3.5 text-sm text-(--ui-text)",
-  tr: "__clickable hover:bg-(--cms-paper)/50"
-};
 const saving = ref(false);
 const formState = ref({});
 function emptyState() {
@@ -239,11 +216,22 @@ function stripHtml(html) {
 function truncate(value) {
   return value.length > 60 ? `${value.slice(0, 57)}\u2026` : value;
 }
-function displayValue(field, value) {
+function localized(value) {
+  const record = value;
+  return record[contentI18n.defaultLocale] ?? Object.values(record)[0] ?? "";
+}
+function relationLabel(field, key, id) {
+  const title = relations.value[key]?.[String(id)];
+  if (title == null || title === "") return `#${id}`;
+  const target = cmsConfig[field.to];
+  const titleField = target?.titleField ? target.fields[target.titleField] : void 0;
+  const label = titleField && isTranslatableField(titleField) ? localized(title) : String(title);
+  return label || `#${id}`;
+}
+function displayValue(field, key, value) {
   if (value == null || value === "") return "";
   if (isTranslatableField(field)) {
-    const record = value;
-    const raw = record[contentI18n.defaultLocale] ?? Object.values(record)[0] ?? "";
+    const raw = localized(value);
     return truncate(field.type === "richtext" ? stripHtml(raw) : raw);
   }
   switch (field.type) {
@@ -255,43 +243,76 @@ function displayValue(field, value) {
       return truncate(JSON.stringify(value));
     case "blocks":
       return `${value.length} \u25A4`;
+    case "relation": {
+      const ids = Array.isArray(value) ? value : [value];
+      if (!ids.length) return "";
+      return truncate(ids.map((id) => relationLabel(field, key, id)).join(", "));
+    }
     default:
       return truncate(String(value));
   }
 }
+const columnOrder = ref([...fieldKeys]);
+const orderedKeys = computed(() => {
+  const known = columnOrder.value.filter((key) => fieldKeys.includes(key));
+  return [...known, ...fieldKeys.filter((key) => !known.includes(key))];
+});
 const columns = computed(() => [
-  ...fieldKeys.map((key) => ({
+  ...orderedKeys.value.map((key) => ({
     id: key,
-    accessorFn: (row) => displayValue(config.fields[key], row[key]),
-    header: config.fields[key].label
+    accessorFn: (row) => displayValue(config.fields[key], key, row[key]),
+    header: config.fields[key].label,
+    reorderable: true
   })),
   ...drafts ? [{ accessorKey: "status", header: "Status" }] : [],
   { id: "actions", header: "" }
 ]);
+function reorderColumns(from, to) {
+  const next = [...orderedKeys.value];
+  const fromIndex = next.indexOf(from);
+  const toIndex = next.indexOf(to);
+  if (fromIndex === -1 || toIndex === -1) return;
+  next.splice(toIndex, 0, ...next.splice(fromIndex, 1));
+  columnOrder.value = next;
+}
 const DEFAULT_VISIBLE_COLUMNS = 4;
 const columnStorageKey = `cms:columns:${name}`;
+const columnOrderStorageKey = `cms:column-order:${name}`;
 const columnVisibility = ref(
   Object.fromEntries(fieldKeys.map((key, index) => [key, index < DEFAULT_VISIBLE_COLUMNS]))
 );
+function readStored(key) {
+  const stored = localStorage.getItem(key);
+  if (!stored) return void 0;
+  try {
+    return JSON.parse(stored);
+  } catch {
+    return void 0;
+  }
+}
 onMounted(() => {
-  const stored = localStorage.getItem(columnStorageKey);
-  if (stored) {
-    try {
-      const parsed = JSON.parse(stored);
-      columnVisibility.value = Object.fromEntries(
-        fieldKeys.map((key) => [key, parsed[key] ?? columnVisibility.value[key] ?? false])
-      );
-    } catch {
-    }
+  const storedVisibility = readStored(columnStorageKey);
+  if (storedVisibility) {
+    columnVisibility.value = Object.fromEntries(
+      fieldKeys.map((key) => [
+        key,
+        storedVisibility[key] ?? columnVisibility.value[key] ?? false
+      ])
+    );
+  }
+  const storedOrder = readStored(columnOrderStorageKey);
+  if (Array.isArray(storedOrder)) {
+    columnOrder.value = storedOrder.filter((key) => typeof key === "string");
   }
   watch(
     columnVisibility,
     (value) => localStorage.setItem(columnStorageKey, JSON.stringify(value)),
     { deep: true }
   );
+  watch(orderedKeys, (value) => localStorage.setItem(columnOrderStorageKey, JSON.stringify(value)));
 });
 const columnItems = computed(
-  () => fieldKeys.map((key) => ({
+  () => orderedKeys.value.map((key) => ({
     label: config.fields[key].label,
     type: "checkbox",
     checked: columnVisibility.value[key],
@@ -303,14 +324,20 @@ const columnItems = computed(
     }
   }))
 );
-const kicker = computed(
-  () => config.kind === "single" ? "single document" : `collection \xB7 ${total.value} ${total.value === 1 ? "entry" : "entries"}`
-);
+const kicker = config.kind === "single" ? "single document" : void 0;
+const drawerOpen = ref(false);
+const drawerEntryId = ref(null);
 function onSelect(_event, row) {
-  navigateTo(`/cms/${name}/${row.original.id}`);
+  drawerEntryId.value = String(row.original.id);
+  drawerOpen.value = true;
 }
 function openCreate() {
-  navigateTo(`/cms/${name}/new`);
+  drawerEntryId.value = null;
+  drawerOpen.value = true;
+}
+async function onDrawerDeleted() {
+  if (rows.value.length === 1 && page.value > 1) page.value -= 1;
+  else await refresh();
 }
 const confirmAction = useCmsConfirm();
 async function deleteRow(row) {

package/dist/runtime/app/pages/admin-entry.vue

@@ -1,42 +1,24 @@
 <template>
-   <div class="cms-rise flex flex-col gap-7">
+   <div class="cms-page">
       <CmsPageHeader :kicker="config.label" :title="isNew ? 'New entry' : 'Edit entry'">
          <template v-if="drafts" #badge>
-            <span
-               class="cms-badge pointer-events-none"
-               :class="published ? 'is-published' : 'is-draft'"
-            >
-               {{ published ? "Published" : "Draft" }}
-            </span>
+            <CmsStatusBadge :published="published" />
          </template>
-         <div class="flex items-center gap-3">
-            <CmsButton
-               label="Back"
-               icon="arrow-left"
-               variant="subtle"
-               class="rounded-full px-4"
-               @click="goBack"
-            />
-            <CmsButton
-               type="submit"
-               :form="FORM_ID"
-               label="Save"
-               :loading="saving"
-               class="rounded-full px-6"
-            />
+         <div class="cms-actions">
+            <CmsButton label="Back" icon="arrow-left" variant="subtle" @click="goBack" />
+            <CmsButton type="submit" :form="FORM_ID" label="Save" :loading="saving" />
             <CmsButton
                v-if="drafts"
                type="submit"
                :form="FORM_ID"
                :label="published ? 'Make draft' : 'Publish'"
                :loading="saving"
-               class="rounded-full px-6"
                @click="togglePublished"
             />
          </div>
       </CmsPageHeader>
 
-      <div class="cms-card p-7">
+      <div class="cms-card cms-panel">
          <CmsEntryForm
             v-model="formState"
             :fields="config.fields"

package/dist/runtime/app/pages/admin-login.vue

@@ -1,50 +1,31 @@
 <template>
-   <div class="cms-scope cms-canvas cms-grain flex min-h-screen items-center justify-center p-6">
-      <div class="flex w-full max-w-sm flex-col gap-8">
-         <header class="cms-rise flex flex-col items-center gap-3 text-center">
-            <h1 class="cms-display text-4xl font-medium text-(--ui-text-highlighted)">
-               Welcome back<span class="text-(--cms-fern)">.</span>
-            </h1>
-            <p class="text-sm text-(--ui-text-muted)">Sign in to manage your content.</p>
+   <div class="cms-scope cms-canvas cms-grain cms-auth">
+      <div class="cms-auth-panel">
+         <header class="cms-auth-header cms-rise">
+            <h1 class="cms-title cms-title-lg">Welcome back<span class="cms-accent">.</span></h1>
+            <p class="cms-subtitle">Sign in to manage your content.</p>
          </header>
 
-         <div class="cms-card cms-rise p-6 sm:p-7" style="animation-delay: 90ms">
-            <CmsForm :state="state" class="flex flex-col gap-5" @submit="login">
-               <CmsAlert
-                  v-if="error"
-                  color="error"
-                  variant="subtle"
-                  :title="error"
-                  class="rounded-xl"
-               />
-               <CmsFormField label="Email" name="email" required :ui="CMS_FIELD_UI">
+         <div class="cms-card cms-auth-card cms-rise is-delayed">
+            <CmsForm :state="state" @submit="login">
+               <CmsAlert v-if="error" color="error" variant="subtle" :title="error" />
+               <CmsFormField label="Email" name="email" required>
                   <CmsInput
                      v-model="state.email"
                      type="email"
-                     size="lg"
                      autocomplete="username"
                      placeholder="you@example.com"
-                     class="w-full"
                   />
                </CmsFormField>
-               <CmsFormField label="Password" name="password" required :ui="CMS_FIELD_UI">
+               <CmsFormField label="Password" name="password" required>
                   <CmsInput
                      v-model="state.password"
                      type="password"
-                     size="lg"
                      autocomplete="current-password"
                      placeholder="••••••••"
-                     class="w-full"
                   />
                </CmsFormField>
-               <CmsButton
-                  type="submit"
-                  label="Sign in"
-                  size="lg"
-                  block
-                  :loading="loading"
-                  class="mt-1 rounded-full"
-               />
+               <CmsButton type="submit" label="Sign in" block :loading="loading" />
             </CmsForm>
          </div>
       </div>
@@ -53,7 +34,7 @@
 
 <script setup>
 import { definePageMeta, navigateTo, ref, useUserSession } from "#imports";
-import { CMS_FIELD_UI, errorMessage } from "../utils/ui";
+import { errorMessage } from "../utils/ui";
 definePageMeta({ layout: false });
 const { loggedIn } = useUserSession();
 if (loggedIn.value) {

package/dist/runtime/app/pages/admin-media.vue

@@ -1,6 +1,10 @@
 <template>
-   <div class="cms-rise flex flex-col gap-7">
-      <CmsPageHeader kicker="media library" title="Media" />
+   <div class="cms-page">
+      <CmsPageHeader title="Media">
+         <template #badge>
+            <span class="cms-badge is-muted">{{ runtime.mediaStorage }}</span>
+         </template>
+      </CmsPageHeader>
 
       <CmsMediaGallery />
    </div>
@@ -8,5 +12,7 @@
 
 <script setup>
 import { definePageMeta } from "#imports";
+import { useCmsRuntime } from "../composables/cms-runtime";
 definePageMeta({ layout: "cms-admin", middleware: "cms-auth" });
+const runtime = useCmsRuntime();
 </script>

package/dist/runtime/app/utils/ui.d.ts

@@ -1,11 +1,4 @@
 import type { InjectionKey, Reactive } from 'vue';
-export declare const CMS_FIELD_UI: {
-    label: string;
-};
-export declare const CMS_MODAL_UI: {
-    content: string;
-    title: string;
-};
 /** Shared reactive map of field-name -> error message, provided by CmsForm and
  *  read by CmsFormField to render inline validation errors. */
 export declare const CMS_FORM_ERRORS: InjectionKey<Reactive<Record<string, string>>>;

package/dist/runtime/app/utils/ui.js

@@ -1,8 +1,3 @@
-export const CMS_FIELD_UI = { label: "text-sm font-medium text-(--ui-text-toned)" };
-export const CMS_MODAL_UI = {
-  content: "rounded-2xl sm:max-w-3xl",
-  title: "cms-display text-xl font-medium text-(--ui-text-highlighted)"
-};
 export const CMS_FORM_ERRORS = Symbol("cms-form-errors");
 export function errorMessage(error) {
   const err = error;

package/dist/runtime/assets/main.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&family=Fragment+Mono:ital@0;1&display=swap");@layer theme, base, components, utilities;@import "tailwindcss/theme.css" layer(theme);.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-paper:#f5f5f5;--cms-surface:#fff;--cms-field:#f0f0f0;--cms-ink:#171717;--cms-line:#e5e5e5;--cms-line-strong:#d4d4d4;--cms-fern:#171717;--cms-sage:#ebebeb;--cms-sage-ink:#171717;--cms-shadow-soft:none;color-scheme:light;--ui-text-dimmed:#a3a3a3;--ui-text-muted:#737373;--ui-text-toned:#525252;--ui-text:#404040;--ui-text-highlighted:var(--cms-ink);--ui-text-inverted:#fff;--ui-bg:var(--cms-surface);--ui-bg-muted:var(--cms-paper);--ui-bg-elevated:var(--cms-field);--ui-bg-accented:#e0e0e0;--ui-bg-inverted:var(--cms-ink);--ui-border:var(--cms-line);--ui-border-muted:var(--cms-line);--ui-border-accented:var(--cms-line-strong);--ui-border-inverted:var(--cms-ink);--ui-primary:var(--cms-ink);--ui-error:#dc2626;--ui-radius:0.4rem;color:var(--ui-text);font-family:Hanken Grotesk,ui-sans-serif,system-ui,sans-serif;margin:0;padding:0;-webkit-font-smoothing:antialiased}body:has(.cms-scope) ::-moz-selection{background:var(--cms-sage);color:var(--cms-sage-ink)}body:has(.cms-scope) ::selection{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-display{font-family:Poppins,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em}.cms-kicker{color:var(--ui-text-dimmed);font-family:Fragment Mono,ui-monospace,monospace;font-size:.875rem;letter-spacing:.16em;line-height:1.4;text-transform:uppercase}.cms-scope thead .cms-kicker{font-size:.6875rem;letter-spacing:.1em}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option],.__clickable):not(:disabled,[aria-disabled=true]){@apply cursor-pointer transition-all duration-200 select-none}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option],.__clickable):not(:disabled,[aria-disabled=true]):active{@apply transition-none;scale:.99}.cms-canvas{background-color:var(--cms-paper)}.cms-grain:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");content:"";inset:0;mix-blend-mode:multiply;opacity:.035;pointer-events:none;position:fixed;z-index:50}.cms-card{background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:1rem;box-shadow:var(--cms-shadow-soft)}.cms-empty{background:rgba(253,252,250,.5);border:1.5px dashed var(--cms-line-strong);border-radius:1rem}.cms-navlink{align-items:center;border-radius:.75rem;color:var(--ui-text-toned);display:flex;font-size:.875rem;font-weight:500;gap:.625rem;padding:.5rem .75rem;transition:background-color .15s ease,color .15s ease}.cms-navlink:hover{background:rgba(38,33,25,.05);color:var(--ui-text-highlighted)}.cms-navlink.is-active{background:var(--cms-sage);color:var(--cms-sage-ink);font-weight:600}.cms-navlink.is-active .cms-navlink-icon{color:var(--cms-fern)}.cms-badge{border:1px solid transparent;border-radius:9999px;font-family:Fragment Mono,ui-monospace,monospace;font-size:.6875rem;letter-spacing:.1em;padding:.1875rem .5rem;text-transform:uppercase;transition:background-color .15s ease,border-color .15s ease}.cms-badge.is-published{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-badge.is-draft{background:transparent;border:1px dashed var(--cms-line-strong);color:var(--ui-text-muted)}.cms-dropzone{align-items:center;background:rgba(253,252,250,.5);border:1.5px dashed var(--cms-line-strong);border-radius:1rem;color:var(--ui-text-muted);cursor:pointer;display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:2rem 1.5rem;transition:border-color .15s ease,background-color .15s ease,color .15s ease;width:100%}.cms-dropzone.is-over,.cms-dropzone:hover{background:var(--cms-sage);border-color:var(--cms-fern);color:var(--cms-sage-ink)}.cms-dropzone.is-dense{border-radius:.75rem;flex-direction:row;gap:.625rem;padding:.875rem 1.25rem}.cms-dropzone.is-busy{opacity:.7;pointer-events:none}.cms-pill{background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:9999px;color:var(--ui-text-dimmed);cursor:pointer;font-family:Fragment Mono,ui-monospace,monospace;font-size:.875rem;letter-spacing:.12em;padding:.3rem .8rem;transition:background-color .15s ease,color .15s ease}.cms-pill:hover{background:rgba(38,33,25,.05);color:var(--ui-text)}.cms-pill.is-active{background:var(--cms-sage);color:var(--cms-sage-ink)}@keyframes cms-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.cms-rise{animation:cms-rise .55s cubic-bezier(.22,1,.36,1) both}@media (prefers-reduced-motion:reduce){.cms-rise{animation:none}}.cms-richtext{border:1px solid var(--cms-line);border-radius:.75rem;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{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);color:var(--ui-text-muted);padding-left:.75rem}.cms-btn{align-items:center;border:1px solid transparent;border-radius:var(--ui-radius);display:inline-flex;font-weight:500;gap:.375rem;justify-content:space-between;line-height:1;transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;white-space:nowrap}.cms-btn:disabled,.cms-btn[aria-disabled=true]{opacity:.5;pointer-events:none}.cms-btn.is-block{width:100%}.cms-btn-xs{font-size:.875rem;padding:.25rem .5rem}.cms-btn-sm{font-size:.875rem;padding:.375rem .625rem}.cms-btn-md{font-size:.875rem;padding:.5rem .875rem}.cms-btn-lg{font-size:.9375rem;padding:.625rem 1rem}.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) 88%,#000)}.cms-btn-primary.cms-btn-subtle{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-btn-primary.cms-btn-subtle:hover{background:#e0e0e0}.cms-btn-primary.cms-btn-soft{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-btn-neutral.cms-btn-solid{background:var(--ui-bg-inverted);color:var(--ui-text-inverted)}.cms-btn-neutral.cms-btn-subtle{background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-subtle:hover{background:var(--ui-bg-accented)}.cms-btn-neutral.cms-btn-soft{background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-ghost{color:var(--ui-text-toned)}.cms-btn-neutral.cms-btn-ghost:hover{background:rgba(38,33,25,.06);color:var(--ui-text-highlighted)}.cms-btn-error.cms-btn-solid{background:var(--ui-error);color:#fff}.cms-btn-error.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-error) 88%,#000)}.cms-btn-error.cms-btn-subtle{background:color-mix(in oklab,var(--ui-error) 12%,transparent);color:var(--ui-error)}.cms-btn-error.cms-btn-ghost{color:var(--ui-error)}.cms-btn-error.cms-btn-ghost:hover{background:color-mix(in oklab,var(--ui-error) 10%,transparent)}.cms-btn-success.cms-btn-solid{background:var(--cms-fern);color:var(--ui-text-inverted)}.cms-field{background:var(--ui-bg);border:1px solid var(--cms-line-strong);border-radius:var(--ui-radius);color:var(--ui-text-highlighted);transition:border-color .15s ease,box-shadow .15s ease;width:100%}.cms-field::-moz-placeholder{color:var(--ui-text-dimmed)}.cms-field::placeholder{color:var(--ui-text-dimmed)}.cms-field:focus,.cms-field:focus-within{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--ui-primary) 18%,transparent);outline:none}.cms-field.is-error{border-color:var(--ui-error)}.cms-field-sm{font-size:.875rem;padding:.375rem .625rem}.cms-field-md{font-size:.875rem;padding:.5rem .75rem}.cms-field-lg{font-size:.9375rem;padding:.625rem .875rem}.cms-input-wrap{align-items:center;display:flex;position:relative}.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 .15s ease;width:2.25rem}.cms-switch.is-on{background:var(--ui-primary)}.cms-switch:after{background:#fff;border-radius:9999px;content:"";height:.875rem;left:.1875rem;position:absolute;transition:transform .15s ease;width:.875rem}.cms-switch.is-on:after{transform:translateX(1rem)}.cms-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(38,33,25,.32);display:flex;inset:0;justify-content:center;overflow-y:auto;padding:2rem 1rem;position:fixed;z-index:60}.cms-modal{background:var(--ui-bg);border:1px solid var(--cms-line);border-radius:1rem;box-shadow:var(--cms-shadow-soft);max-width:32rem;width:100%}.cms-modal-header{padding:1.25rem 1.5rem 0}.cms-modal-body{padding:1.25rem 1.5rem 1.5rem}.cms-menu{background:var(--ui-bg);border:1px solid var(--cms-line);border-radius:.75rem;box-shadow:var(--cms-shadow-soft);margin-top:.375rem;min-width:11rem;padding:.25rem;position:absolute;z-index:50}.cms-menu.align-end{right:0}.cms-menu-item{align-items:center;border-radius:.5rem;color:var(--ui-text);cursor:pointer;display:flex;font-size:.875rem;gap:.5rem;padding:.4rem .6rem;text-align:left;width:100%}.cms-menu-item:hover{background:var(--ui-bg-elevated)}.cms-menu-check{color:var(--ui-primary);margin-left:auto}.cms-popover,.cms-selectmenu-panel{background:var(--ui-bg);border:1px solid var(--cms-line);border-radius:.75rem;box-shadow:var(--cms-shadow-soft);margin-top:.375rem;position:absolute;z-index:50}.cms-selectmenu-panel{left:0;max-height:15rem;overflow-y:auto;padding:.25rem;right:0}.cms-tag{align-items:center;background:var(--ui-bg-elevated);border-radius:9999px;display:inline-flex;font-size:.875rem;gap:.25rem;padding:.125rem .5rem}.cms-table{border-collapse:collapse;text-align:left;width:100%}.cms-alert{border-radius:.75rem;font-size:.875rem;padding:.75rem 1rem}.cms-alert-error{background:color-mix(in oklab,var(--ui-error) 10%,transparent);color:var(--ui-error)}.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(--ui-bg);border:1px solid var(--cms-line);border-radius:.75rem;box-shadow:var(--cms-shadow-soft);padding:.75rem .875rem}.cms-toast.is-success{border-left:3px solid var(--cms-fern)}.cms-toast.is-error{border-left:3px solid var(--ui-error)}.cms-pagination{align-items:center;display:flex;gap:.25rem}.cms-page-btn{border-radius:.5rem;color:var(--ui-text-toned);font-size:.875rem;height:2rem;min-width:2rem;padding:0 .5rem}.cms-page-btn:hover:not(:disabled){background:var(--ui-bg-elevated)}.cms-page-btn.is-active{background:var(--cms-sage);color:var(--cms-sage-ink);font-weight:600}.cms-page-btn:disabled{opacity:.4}
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&family=Fragment+Mono:ital@0;1&display=swap");@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-paper:#f5f5f5;--cms-surface:#fff;--cms-field:#f0f0f0;--cms-ink:#171717;--cms-line:#e5e5e5;--cms-line-strong:#d4d4d4;--cms-fern:#171717;--cms-sage:#ebebeb;--cms-sage-ink:#171717;--cms-shadow-soft:none;color-scheme:light;--ui-text-dimmed:#a3a3a3;--ui-text-muted:#737373;--ui-text-toned:#525252;--ui-text:#404040;--ui-text-highlighted:var(--cms-ink);--ui-text-inverted:#fff;--ui-bg:var(--cms-surface);--ui-bg-muted:var(--cms-paper);--ui-bg-elevated:var(--cms-field);--ui-bg-accented:#e0e0e0;--ui-bg-inverted:var(--cms-ink);--ui-border:var(--cms-line);--ui-border-muted:var(--cms-line);--ui-border-accented:var(--cms-line-strong);--ui-border-inverted:var(--cms-ink);--ui-primary:var(--cms-ink);--ui-error:#dc2626;--ui-radius:0.4rem;color:var(--ui-text);font-family:Hanken Grotesk,ui-sans-serif,system-ui,sans-serif;margin:0;padding:0;-webkit-font-smoothing:antialiased}body:has(.cms-scope) ::-moz-selection{background:var(--cms-sage);color:var(--cms-sage-ink)}body:has(.cms-scope) ::selection{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-display,.cms-title{font-family:Poppins,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em}.cms-title{color:var(--ui-text-highlighted);font-weight:500}.cms-title-sm{font-size:1.25rem;line-height:1.4}.cms-title-md{font-size:2rem;line-height:1}.cms-title-lg{font-size:2.25rem;line-height:1.2}.cms-subtitle{color:var(--ui-text-muted);font-size:.875rem}.cms-accent{color:var(--cms-fern)}.cms-kicker{color:var(--ui-text-dimmed);font-family:Fragment Mono,ui-monospace,monospace;font-size:.875rem;letter-spacing:.16em;line-height:1.4;text-transform:uppercase}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option],.__clickable):not(:disabled,[aria-disabled=true]){@apply cursor-pointer transition-all duration-200 select-none}body:has(.cms-scope) :is(button,a,[role=button],[role=menuitem],[role=option],.__clickable):not(:disabled,[aria-disabled=true]):active{@apply transition-none;scale:.99}.cms-canvas{background-color:var(--cms-paper)}.cms-grain:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");content:"";inset:0;mix-blend-mode:multiply;opacity:.035;pointer-events:none;position:fixed;z-index:50}.cms-card{background:var(--cms-surface);border:1px solid var(--cms-line);border-radius:1rem;box-shadow:var(--cms-shadow-soft)}.cms-panel{padding:1.75rem}.cms-shell{display:flex;min-height:100vh}.cms-sidebar{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:Poppins,ui-sans-serif,system-ui,sans-serif;font-size:1.375rem;font-weight:600;letter-spacing:-.02em;padding-inline:.75rem}.cms-sidebar-nav{display:flex;flex:1;flex-direction:column;gap:1.5rem;overflow-y:auto}.cms-sidebar-group{display:flex;flex-direction:column;gap:.25rem}.cms-sidebar-group>.cms-kicker{margin-bottom:.5rem;padding-inline:.75rem}.cms-sidebar-footer{border-top:1px solid var(--cms-line);display:flex;flex-direction:column;gap:.75rem;padding:1.25rem .75rem 0}.cms-main{flex:1;height:100vh;min-width:0;overflow-y:auto;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-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:rgba(253,252,250,.5);border:1.5px dashed var(--cms-line-strong);border-radius:1rem;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:.75rem;color:var(--ui-text-toned);display:flex;font-size:.875rem;font-weight:500;gap:.625rem;padding:.5rem .75rem;transition:background-color .15s ease,color .15s ease}.cms-navlink:hover{background:rgba(38,33,25,.05);color:var(--ui-text-highlighted)}.cms-navlink.is-active{background:var(--cms-sage);color:var(--cms-sage-ink);font-weight:600}.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:9999px;display:inline-flex;font-family:Fragment Mono,ui-monospace,monospace;font-size:.6875rem;letter-spacing:.1em;padding:.1875rem .5rem;pointer-events:none;text-transform:uppercase;transition:background-color .15s ease,border-color .15s ease;white-space:nowrap}.cms-badge.is-published{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-badge.is-muted{background:var(--cms-field);border-color:var(--cms-line);color:var(--ui-text-muted)}.cms-badge.is-draft{background:transparent;border:1px dashed var(--cms-line-strong);color:var(--ui-text-muted)}.cms-dropzone{align-items:center;background:rgba(253,252,250,.5);border:1.5px dashed var(--cms-line-strong);border-radius:1rem;color:var(--ui-text-muted);cursor:pointer;display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:2rem 1.5rem;transition:border-color .15s ease,background-color .15s ease,color .15s ease;width:100%}.cms-dropzone.is-over,.cms-dropzone:hover{background:var(--cms-sage);border-color:var(--cms-fern);color:var(--cms-sage-ink)}.cms-dropzone.is-dense{border-radius:.75rem;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-dimmed);cursor:pointer;display:inline-flex;flex:none;font-family:Fragment Mono,ui-monospace,monospace;font-size:.875rem;gap:.35rem;letter-spacing:.12em;padding:.3rem .8rem;transition:background-color .15s ease,color .15s ease;white-space:nowrap}.cms-pill:hover{background:rgba(38,33,25,.05);color:var(--ui-text)}.cms-pill.is-active{background:var(--cms-sage);color:var(--cms-sage-ink)}@keyframes cms-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.cms-rise{animation:cms-rise .55s cubic-bezier(.22,1,.36,1) both}.cms-rise.is-delayed{animation-delay:90ms}@media (prefers-reduced-motion:reduce){.cms-rise{animation:none}}.cms-richtext{border:1px solid var(--cms-line);border-radius:.75rem;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{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);color:var(--ui-text-muted);padding-left:.75rem}.cms-btn{align-items:center;border:1px solid transparent;border-radius:9999px;display:inline-flex;font-weight:500;gap:.375rem;justify-content:space-between;line-height:1;min-height:var(--cms-btn-size);transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;white-space:nowrap}.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 .75rem}.cms-btn-sm{--cms-btn-size:2rem;font-size:.875rem;padding:.25rem .875rem}.cms-btn-md{--cms-btn-size:2.25rem;font-size:.875rem;padding:.25rem 1.125rem}.cms-btn-lg{--cms-btn-size:2.625rem;font-size:.9375rem;padding:.375rem 1.375rem}.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) 88%,#000)}.cms-btn-primary.cms-btn-subtle{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-btn-primary.cms-btn-subtle:hover{background:#e0e0e0}.cms-btn-primary.cms-btn-soft{background:var(--cms-sage);color:var(--cms-sage-ink)}.cms-btn-neutral.cms-btn-solid{background:var(--ui-bg-inverted);color:var(--ui-text-inverted)}.cms-btn-neutral.cms-btn-subtle{background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-subtle:hover{background:var(--ui-bg-accented)}.cms-btn-neutral.cms-btn-soft{background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)}.cms-btn-neutral.cms-btn-ghost{color:var(--ui-text-toned)}.cms-btn-neutral.cms-btn-ghost:hover{background:rgba(38,33,25,.06);color:var(--ui-text-highlighted)}.cms-btn-error.cms-btn-solid{background:var(--ui-error);color:#fff}.cms-btn-error.cms-btn-solid:hover{background:color-mix(in oklab,var(--ui-error) 88%,#000)}.cms-btn-error.cms-btn-subtle{background:color-mix(in oklab,var(--ui-error) 12%,transparent);color:var(--ui-error)}.cms-btn-error.cms-btn-ghost{color:var(--ui-error)}.cms-btn-error.cms-btn-ghost:hover{background:color-mix(in oklab,var(--ui-error) 10%,transparent)}.cms-btn-success.cms-btn-solid{background:var(--cms-fern);color:var(--ui-text-inverted)}.cms-form{gap:1.25rem}.cms-form,.cms-form-field{display:flex;flex-direction:column}.cms-form-field{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(--ui-bg);border:1px solid var(--cms-line-strong);border-radius:var(--ui-radius);color:var(--ui-text-highlighted);line-height:1.25;transition:border-color .15s ease,box-shadow .15s 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:focus,.cms-field:focus-within{border-color:var(--ui-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--ui-primary) 18%,transparent);outline:none}.cms-field.is-error{border-color:var(--ui-error)}.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 .18s ease,color .15s 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-paper);border:1px solid var(--cms-line);border-radius:999px;display:inline-flex;gap:2px;padding:2px}.cms-locale-option{border-radius:999px;color:var(--ui-text-muted);cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6875rem;letter-spacing:.06em;line-height:1.4;padding:.125rem .5rem;text-transform:uppercase;transition:background-color .15s ease,color .15s 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(--ui-bg);box-shadow:0 1px 2px rgba(38,33,25,.1);color:var(--ui-text-highlighted)}.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 .15s ease;width:2.25rem}.cms-switch.is-on{background:var(--ui-primary)}.cms-switch:after{background:#fff;border-radius:9999px;content:"";height:.875rem;left:.1875rem;position:absolute;transition:transform .15s ease;width:.875rem}.cms-switch.is-on:after{transform:translateX(1rem)}.cms-overlay{align-items:center;backdrop-filter:blur(2px);background:rgba(38,33,25,.32);display:flex;inset:0;justify-content:center;overflow-y:auto;padding:2rem 1rem;position:fixed;z-index:60}.cms-modal{background:var(--ui-bg);border:1px solid var(--cms-line);border-radius:1rem;box-shadow:var(--cms-shadow-soft);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{padding:1.25rem 1.5rem 1.5rem}.cms-overlay-drawer{align-items:stretch;justify-content:flex-end;overflow:hidden;padding:0;z-index:55}.cms-drawer{background:var(--ui-bg);border-left:1px solid var(--cms-line);box-shadow:-18px 0 48px rgba(38,33,25,.12);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 .3s ease}.cms-drawer-enter-active .cms-drawer,.cms-drawer-leave-active .cms-drawer{transition:transform .36s cubic-bezier(.32,.72,0,1);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{transition-duration:.01ms}}.cms-menu{background:var(--ui-bg);border:1px solid var(--cms-line);border-radius:.75rem;box-shadow:var(--cms-shadow-soft);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:.5rem;color:var(--ui-text);cursor:pointer;display:flex;font-size:.875rem;gap:.5rem;padding:.4rem .6rem;text-align:left;width:100%}.cms-menu-item:hover{background:var(--ui-bg-elevated)}.cms-menu-check{color:var(--ui-primary);margin-left:auto}.cms-popover{background:var(--ui-bg);border:1px solid var(--cms-line);border-radius:.75rem;box-shadow:var(--cms-shadow-soft);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(--ui-bg);border:1px solid var(--cms-line);border-radius:.75rem;box-shadow:var(--cms-shadow-soft);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(--ui-bg-elevated);border-radius:9999px;display:inline-flex;font-size:.875rem;gap:.25rem;padding:.125rem .5rem}.cms-media-gallery{display:flex;flex-direction:column;gap:1.25rem}.cms-media-filters{align-items:center;display:flex;flex-wrap:wrap;gap:.25rem}.cms-media-filter-separator{background:var(--cms-line);flex:none;height:1rem;margin-inline:.25rem;width:1px}.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}.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 .15s 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,.7),transparent);bottom:0;color:#fff;font-family:Fragment Mono,ui-monospace,monospace;font-size:.75rem;left:0;letter-spacing:.1em;line-height:1.4;opacity:0;padding:1.5rem .75rem .5rem;pointer-events:none;position:absolute;right:0;text-transform:uppercase;transition:opacity .15s 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{font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cms-media-preview-large{background:var(--cms-field);max-height:14rem;-o-object-fit:cover;object-fit:cover;width:100%}.cms-media-bar{align-items:center;display:flex;gap:.625rem;padding:.75rem 1rem}.cms-media-bar-icon{color:var(--ui-text-dimmed);flex-shrink:0}.cms-media-bar-name{flex:1;font-size:.875rem;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cms-media-thumb{background:var(--cms-field);border-radius:.375rem;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{box-shadow:inset 0 -1px 0 var(--cms-line);color:var(--ui-text-dimmed);font-family:Fragment Mono,ui-monospace,monospace;font-size:.6875rem;font-weight:400;letter-spacing:.1em;line-height:1.4;padding:.75rem 1.25rem;text-transform:uppercase}.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)}.cms-table tbody tr:last-child{border-bottom:0}.cms-table tbody tr:hover{background:color-mix(in oklab,var(--cms-paper) 50%,transparent)}.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-paper);box-shadow:inset 0 -1px 0 var(--cms-line),inset 0 0 0 2px var(--cms-line-strong)}.cms-alert{border-radius:.75rem;font-size:.875rem;padding:.75rem 1rem}.cms-alert-error{background:color-mix(in oklab,var(--ui-error) 10%,transparent);color:var(--ui-error)}.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(--ui-bg);border:1px solid var(--cms-line);border-radius:.75rem;box-shadow:var(--cms-shadow-soft);padding:.75rem .875rem}.cms-toast-row{align-items:flex-start;display:flex;gap:.75rem}.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}.cms-toast-dismiss:hover{color:var(--ui-text)}.cms-toast.is-success{border-left:3px solid var(--cms-fern)}.cms-toast.is-error{border-left:3px solid var(--ui-error)}.cms-pagination{align-items:center;display:flex;gap:.25rem;justify-content:center}.cms-page-btn{border-radius:.5rem;color:var(--ui-text-toned);font-size:.875rem;height:2rem;min-width:2rem;padding:0 .5rem}.cms-page-btn:hover:not(:disabled){background:var(--ui-bg-elevated)}.cms-page-btn.is-active{background:var(--cms-sage);color:var(--cms-sage-ink);font-weight:600}.cms-page-btn:disabled{opacity:.4}

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

@@ -3,7 +3,7 @@ import { defineEventHandler, getValidatedQuery } from "h3";
 import { z } from "zod";
 import { useDb } from "#cms-db";
 import { getRegistryEntry, idColumn, tableColumns } from "../utils/registry.js";
-import { attachManyToMany } from "../utils/relations.js";
+import { attachManyToMany, relationTitles } from "../utils/relations.js";
 import { requireAdmin } from "../utils/require-admin.js";
 const querySchema = z.object({
   limit: z.coerce.number().int().min(1).max(100).default(50),
@@ -40,6 +40,11 @@ export default defineEventHandler(async (event) => {
   const base = selection ? db.select(selection).from(table) : db.select().from(table);
   const items = await (where ? base.where(where) : base).orderBy(desc(orderBy)).limit(limit).offset(offset);
   const [counted] = await (where ? db.select({ total: count() }).from(table).where(where) : db.select({ total: count() }).from(table));
-  if (!light) await attachManyToMany(db, name, entry, items);
-  return { items, total: counted?.total ?? 0 };
+  if (light) return { items, total: counted?.total ?? 0, relations: {} };
+  await attachManyToMany(db, name, entry, items);
+  return {
+    items,
+    total: counted?.total ?? 0,
+    relations: await relationTitles(db, entry, items)
+  };
 });

package/dist/runtime/server/utils/relations.d.ts

@@ -9,5 +9,6 @@ export declare function splitRelationValues(entry: CmsEntry, body: Row): {
 };
 export declare function assertRelationTargets(entry: CmsEntry, lists: Record<string, string[]>): Promise<void>;
 export declare function saveManyToMany(db: CmsDb, name: string, sourceId: string, lists: Record<string, string[]>): Promise<void>;
+export declare function relationTitles(db: CmsDb, entry: CmsEntry, rows: Row[]): Promise<Record<string, Record<string, unknown>>>;
 export declare function attachManyToMany<T extends Row>(db: CmsDb, name: string, entry: CmsEntry, rows: T[]): Promise<T[]>;
 export {};