@xleddyl/nuxt-cms 0.1.26 → 0.1.27

package/dist/module.json

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

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

@@ -1,31 +1,33 @@
 <template>
-   <div v-if="model" class="cms-card cms-media-tile">
-      <img v-if="kind === 'image' && url" :src="url" alt="" class="cms-media-preview-large" />
-      <video
-         v-else-if="kind === 'video' && url"
-         :src="url"
-         controls
-         preload="metadata"
-         playsinline
-         class="cms-media-preview-large"
-      />
-      <div class="cms-media-bar">
+   <div v-if="model" class="cms-card cms-media-field">
+      <div class="cms-media-field-preview">
+         <img v-if="kind === 'image' && url" :src="url" alt="" />
+         <video
+            v-else-if="kind === 'video' && url"
+            :src="url"
+            controls
+            preload="metadata"
+            playsinline
+         />
+         <CmsIcon v-else :name="icon" class="size-10" />
+      </div>
+      <div class="cms-media-field-bar">
          <CmsIcon :name="icon" class="cms-media-bar-icon size-4" />
          <span class="cms-media-bar-name" :title="model">{{ mediaFilename(model) }}</span>
          <CmsButton
-            icon="photo"
-            variant="ghost"
+            label="Replace"
+            icon="arrow-path"
+            variant="subtle"
             color="neutral"
             size="xs"
-            aria-label="Change"
             @click="openGallery"
          />
          <CmsButton
-            icon="x-mark"
-            variant="ghost"
-            color="neutral"
+            label="Remove"
+            icon="trash"
+            variant="subtle"
+            color="error"
             size="xs"
-            aria-label="Remove"
             @click="clear"
          />
       </div>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    folders: string[];
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+    create: (folder: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    onCreate?: ((folder: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+<template>
+   <div class="cms-folder-picker">
+      <button
+         type="button"
+         class="cms-pill"
+         :class="{ 'is-active': model === null }"
+         @click="model = null"
+      >
+         <CmsIcon name="circle-stack" class="size-3" />Root
+      </button>
+      <button
+         v-for="name in folders"
+         :key="name"
+         type="button"
+         class="cms-pill"
+         :class="{ 'is-active': model === name }"
+         @click="model = name"
+      >
+         <CmsIcon name="folder" class="size-3" />{{ name }}
+      </button>
+      <template v-if="creating">
+         <CmsInput
+            v-model="draft"
+            size="sm"
+            autofocus
+            placeholder="Folder name"
+            class="cms-folder-picker-input"
+            @keydown.enter.prevent="commit"
+            @keydown.esc="cancel"
+         />
+         <CmsButton label="Add" size="xs" :disabled="!normalized" @click="commit" />
+         <CmsButton label="Cancel" size="xs" variant="ghost" color="neutral" @click="cancel" />
+      </template>
+      <button v-else type="button" class="cms-pill" @click="startCreating">
+         <CmsIcon name="folder-plus" class="size-3" />New folder
+      </button>
+   </div>
+</template>
+
+<script setup>
+import { computed, ref } from "#imports";
+import { normalizeMediaFolder } from "#nuxt-cms";
+defineProps({
+  folders: { type: Array, required: true }
+});
+const emit = defineEmits(["create"]);
+const model = defineModel({ type: [String, null], ...{ default: null } });
+const creating = ref(false);
+const draft = ref("");
+const normalized = computed(() => normalizeMediaFolder(draft.value));
+function startCreating() {
+  creating.value = true;
+}
+function cancel() {
+  creating.value = false;
+  draft.value = "";
+}
+function commit() {
+  const folder = normalized.value;
+  if (!folder) return;
+  emit("create", folder);
+  model.value = folder;
+  cancel();
+}
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    folders: string[];
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+    create: (folder: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    onCreate?: ((folder: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -7,39 +7,58 @@
    />
 
    <div v-else class="cms-media-gallery">
-      <CmsMediaUpload
-         v-if="!readOnly"
-         :multiple="!selectable"
-         :dense="selectable"
-         :media-type="mediaType"
-         :accept="accept"
-         @uploaded="onUploaded"
-      />
+      <CmsInput v-model="search" icon="magnifying-glass" placeholder="Search media…" />
 
-      <div v-if="!restricted && items.length" class="cms-media-filters">
-         <button
-            v-for="f in filters"
-            :key="f"
-            type="button"
-            class="cms-pill"
-            :class="{ 'is-active': filter === f }"
-            @click="filter = f"
-         >
-            {{ filterLabels[f] }}
-         </button>
-         <template v-if="folders.length">
-            <span class="cms-media-filter-separator" />
+      <div v-if="showTypeFilters || folderChips.length || !readOnly" class="cms-media-filters">
+         <template v-if="showTypeFilters">
             <button
-               v-for="f in folders"
+               v-for="f in filters"
                :key="f"
                type="button"
                class="cms-pill"
-               :class="{ 'is-active': folder === f }"
-               @click="folder = folder === f ? null : f"
+               :class="{ 'is-active': filter === f }"
+               @click="filter = f"
             >
-               <CmsIcon name="folder" class="size-3" />{{ f }}
+               {{ filterLabels[f] }}
             </button>
          </template>
+         <template v-if="folderChips.length">
+            <span v-if="showTypeFilters" class="cms-media-filter-separator" />
+            <span
+               v-for="chip in folderChips"
+               :key="chip.name"
+               class="cms-pill-group"
+               :class="{ 'is-active': folder === chip.name }"
+            >
+               <button
+                  type="button"
+                  class="cms-pill"
+                  :class="{ 'is-active': folder === chip.name, 'is-empty': chip.empty }"
+                  @click="folder = folder === chip.name ? null : chip.name"
+               >
+                  <CmsIcon name="folder" class="size-3" />{{ chip.name }}
+               </button>
+               <button
+                  v-if="chip.empty && !readOnly"
+                  type="button"
+                  class="cms-pill-discard"
+                  aria-label="Discard empty folder"
+                  @click="discardFolder(chip.name)"
+               >
+                  <CmsIcon name="x-mark" class="size-3" />
+               </button>
+            </span>
+         </template>
+         <div v-if="!readOnly" class="cms-media-filters-actions">
+            <CmsButton
+               label="New folder"
+               icon="folder-plus"
+               variant="subtle"
+               size="sm"
+               @click="openNewFolder"
+            />
+            <CmsButton icon="plus" size="sm" aria-label="Upload media" @click="uploadOpen = true" />
+         </div>
       </div>
 
       <CmsSpinner v-if="loading" />
@@ -50,9 +69,12 @@
             v-for="item in paged"
             :key="item.key"
             :type="selectable ? 'button' : void 0"
+            :role="!selectable && !readOnly ? 'button' : void 0"
+            :tabindex="!selectable && !readOnly ? 0 : void 0"
             class="cms-card cms-media-tile"
-            :class="{ 'is-selectable': selectable }"
-            @click="selectable && emit('select', { key: item.key, url: item.url })"
+            :class="{ 'is-selectable': selectable || !readOnly }"
+            @click="onTileClick(item)"
+            @keydown.enter="!selectable && !readOnly && openEdit(item)"
          >
             <div class="cms-media-preview">
                <img
@@ -69,24 +91,14 @@
                   playsinline
                />
                <CmsIcon v-else :name="mediaIconFor(item.type)" class="size-8" />
-               <div v-if="!selectable" class="cms-media-actions">
-                  <CmsButton
-                     v-if="!readOnly"
-                     icon="pencil-square"
-                     size="xs"
-                     color="neutral"
-                     variant="solid"
-                     aria-label="Edit details"
-                     @click="openEdit(item)"
-                  />
+               <div v-if="!selectable && !readOnly" class="cms-media-actions">
                   <CmsButton
-                     v-if="!readOnly"
                      icon="trash"
                      size="xs"
                      color="error"
                      variant="solid"
                      aria-label="Delete"
-                     @click="remove(item)"
+                     @click.stop="remove(item)"
                   />
                </div>
                <div class="cms-media-info">
@@ -100,6 +112,9 @@
                <div class="cms-media-name" :title="item.key">
                   {{ mediaFilename(item.key) }}
                </div>
+               <div v-if="item.folder" class="cms-media-folder">
+                  <CmsIcon name="folder" class="size-3" />{{ item.folder }}
+               </div>
             </div>
          </component>
       </div>
@@ -108,12 +123,27 @@
          <CmsButton label="Retry" icon="arrow-path" variant="subtle" @click="reload" />
       </CmsEmptyState>
 
+      <CmsEmptyState
+         v-else-if="items.length"
+         icon="magnifying-glass"
+         title="No matching media"
+         body="Try a different search or filter."
+      />
+
       <CmsEmptyState
          v-else
          icon="photo"
          :title="readOnly ? 'No media' : 'No media yet'"
          :body="readOnly ? 'No media registered.' : 'Files you upload will show up here.'"
-      />
+      >
+         <CmsButton
+            v-if="!readOnly"
+            label="Upload"
+            icon="plus"
+            variant="subtle"
+            @click="uploadOpen = true"
+         />
+      </CmsEmptyState>
 
       <CmsPagination
          v-if="!loading && visible.length"
@@ -122,11 +152,60 @@
          :items-per-page="PAGE_SIZE"
       />
 
+      <CmsModal v-if="!readOnly" v-model:open="uploadOpen" title="Upload media">
+         <template #body>
+            <div class="cms-form">
+               <CmsFormField label="Destination folder">
+                  <CmsMediaFolderPicker
+                     v-model="uploadFolder"
+                     :folders="folderNames"
+                     @create="registerFolder"
+                  />
+               </CmsFormField>
+               <CmsMediaUpload
+                  :multiple="!selectable"
+                  :media-type="mediaType"
+                  :accept="accept"
+                  :folder="uploadFolder"
+                  @uploaded="onUploaded"
+               />
+            </div>
+         </template>
+      </CmsModal>
+
+      <CmsModal v-if="!readOnly" v-model:open="newFolderOpen" title="New folder" size="sm">
+         <template #body>
+            <div class="cms-form">
+               <CmsFormField label="Name">
+                  <CmsInput
+                     v-model="newFolderName"
+                     autofocus
+                     placeholder="e.g. blog/covers"
+                     @keydown.enter.prevent="createFolder"
+                  />
+                  <p class="cms-form-hint">
+                     {{
+                        newFolderSlug ? `Files uploaded here are stored under ${newFolderSlug}/` : "Letters, numbers and dashes. Use / for nesting."
+                     }}
+                  </p>
+               </CmsFormField>
+               <div class="cms-actions is-end">
+                  <CmsButton
+                     label="Cancel"
+                     variant="ghost"
+                     color="neutral"
+                     @click="newFolderOpen = false"
+                  />
+                  <CmsButton label="Create" :disabled="!newFolderSlug" @click="createFolder" />
+               </div>
+            </div>
+         </template>
+      </CmsModal>
+
       <CmsModal
          v-if="!readOnly"
          :open="!!editing"
          :title="editing ? mediaFilename(editing.key) : ''"
-         size="lg"
          @update:open="
   (open) => {
     if (!open) editing = null;
@@ -139,9 +218,19 @@
                   <CmsInput v-model="editAlt" />
                </CmsFormField>
                <CmsFormField label="Folder">
-                  <CmsInput v-model="editFolder" />
+                  <CmsMediaFolderPicker
+                     v-model="editFolder"
+                     :folders="folderNames"
+                     @create="registerFolder"
+                  />
                </CmsFormField>
                <div class="cms-actions is-end">
+                  <CmsButton
+                     label="Cancel"
+                     variant="ghost"
+                     color="neutral"
+                     @click="editing = null"
+                  />
                   <CmsButton label="Save" :loading="editSaving" @click="saveEdit" />
                </div>
             </div>
@@ -152,7 +241,7 @@
 
 <script setup>
 import { computed, onMounted, ref, watch } from "#imports";
-import { MEDIA_TYPES, mediaFilename, mediaIconFor } from "#nuxt-cms";
+import { MEDIA_TYPES, mediaFilename, mediaIconFor, normalizeMediaFolder } from "#nuxt-cms";
 import { useCmsConfirm } from "../../composables/cms-confirm";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { useCmsToast } from "../../composables/cms-toast";
@@ -173,6 +262,7 @@ const toast = useCmsToast();
 const runtime = useCmsRuntime();
 const readOnly = computed(() => runtime.mediaStorage === "local");
 const endpoint = "/api/cms/admin/media";
+const DRAFT_FOLDERS_KEY = "nuxt-cms:media-folders";
 const items = ref([]);
 const loading = ref(true);
 const errorCode = ref(null);
@@ -196,20 +286,67 @@ const restricted = computed(
 );
 const filters = ["all", ...MEDIA_TYPES];
 const filter = ref("all");
-const folders = computed(() => {
+const showTypeFilters = computed(() => !restricted.value && items.value.length > 0);
+const search = ref("");
+const draftFolders = ref([]);
+onMounted(() => {
+  try {
+    const stored = JSON.parse(localStorage.getItem(DRAFT_FOLDERS_KEY) ?? "[]");
+    if (Array.isArray(stored)) draftFolders.value = stored.filter((f) => typeof f === "string");
+  } catch {
+    draftFolders.value = [];
+  }
+});
+function persistDraftFolders() {
+  try {
+    localStorage.setItem(DRAFT_FOLDERS_KEY, JSON.stringify(draftFolders.value));
+  } catch {
+  }
+}
+const usedFolders = computed(() => {
   const set = new Set(items.value.map((item) => item.folder).filter((f) => !!f));
   return [...set].sort();
 });
+const folderNames = computed(
+  () => [.../* @__PURE__ */ new Set([...usedFolders.value, ...draftFolders.value])].sort()
+);
+const folderChips = computed(
+  () => folderNames.value.map((name) => ({ name, empty: !usedFolders.value.includes(name) }))
+);
 const folder = ref(null);
+function registerFolder(name) {
+  if (!draftFolders.value.includes(name) && !usedFolders.value.includes(name)) {
+    draftFolders.value = [...draftFolders.value, name];
+    persistDraftFolders();
+  }
+}
+function discardFolder(name) {
+  draftFolders.value = draftFolders.value.filter((f) => f !== name);
+  persistDraftFolders();
+  if (folder.value === name) folder.value = null;
+}
+watch(usedFolders, (used) => {
+  const next = draftFolders.value.filter((f) => !used.includes(f));
+  if (next.length !== draftFolders.value.length) {
+    draftFolders.value = next;
+    persistDraftFolders();
+  }
+});
 const visible = computed(() => {
   const active = restricted.value ?? (filter.value === "all" ? null : filter.value);
   let list = active ? items.value.filter((item) => item.type === active) : items.value;
   if (folder.value) list = list.filter((item) => item.folder === folder.value);
+  const query = search.value.trim().toLowerCase();
+  if (query) {
+    list = list.filter(
+      (item) => [item.key, item.alt, item.folder].some((value) => value?.toLowerCase().includes(query))
+    );
+  }
   return list;
 });
 const PAGE_SIZE = 24;
 const page = ref(1);
-watch([filter, folder], () => {
+watch([filter, folder, search], () => {
   page.value = 1;
 });
 watch(visible, (list) => {
@@ -219,21 +356,48 @@ watch(visible, (list) => {
 const paged = computed(
   () => visible.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE)
 );
+const uploadOpen = ref(false);
+const uploadFolder = ref(null);
+watch(uploadOpen, (open) => {
+  if (open) uploadFolder.value = folder.value;
+});
 function onUploaded(uploaded) {
+  uploadOpen.value = false;
   if (props.selectable && uploaded[0]) {
     emit("select", uploaded[0]);
     return;
   }
   void reload();
 }
+const newFolderOpen = ref(false);
+const newFolderName = ref("");
+const newFolderSlug = computed(() => normalizeMediaFolder(newFolderName.value));
+function openNewFolder() {
+  newFolderName.value = "";
+  newFolderOpen.value = true;
+}
+function createFolder() {
+  const name = newFolderSlug.value;
+  if (!name) return;
+  registerFolder(name);
+  folder.value = name;
+  newFolderOpen.value = false;
+}
 const editing = ref(null);
 const editAlt = ref("");
-const editFolder = ref("");
+const editFolder = ref(null);
 const editSaving = ref(false);
+function onTileClick(item) {
+  if (props.selectable) {
+    emit("select", { key: item.key, url: item.url });
+    return;
+  }
+  if (!readOnly.value) openEdit(item);
+}
 function openEdit(item) {
   editing.value = item;
   editAlt.value = item.alt ?? "";
-  editFolder.value = item.folder ?? "";
+  editFolder.value = item.folder ?? null;
 }
 async function saveEdit() {
   if (!editing.value) return;
@@ -244,7 +408,7 @@ async function saveEdit() {
       body: {
         id: editing.value.id,
         alt: editAlt.value.trim() || null,
-        folder: editFolder.value.trim() || null
+        folder: editFolder.value
       }
     });
     editing.value = null;

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

@@ -3,7 +3,7 @@ type __VLS_Props = {
     multiple?: boolean;
     mediaType?: MediaType;
     accept?: string[];
-    dense?: boolean;
+    folder?: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (items: MediaItem[]) => any;

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

@@ -2,7 +2,7 @@
    <button
       type="button"
       class="cms-dropzone"
-      :class="{ 'is-dense': dense, 'is-over': dragOver, 'is-busy': uploading }"
+      :class="{ 'is-over': dragOver, 'is-busy': uploading }"
       :disabled="uploading"
       @click="input?.click()"
       @dragover.prevent="dragOver = true"
@@ -28,6 +28,10 @@
             uploading ? `Uploading ${Math.min(done + 1, total)} of ${total}\u2026` : multiple ? "Drop files here or click to browse" : "Drop a file here or click to browse"
          }}
       </span>
+      <span v-if="!uploading" class="cms-dropzone-hint">
+         <CmsIcon :name="folder ? 'folder' : 'circle-stack'" class="size-3.5" />
+         {{ folder ?? "Library root" }}
+      </span>
    </button>
 </template>
 
@@ -38,7 +42,7 @@ const props = defineProps({
   multiple: { type: Boolean, required: false },
   mediaType: { type: null, required: false, default: "file" },
   accept: { type: Array, required: false },
-  dense: { type: Boolean, required: false }
+  folder: { type: [String, null], required: false, default: null }
 });
 const emit = defineEmits(["uploaded"]);
 const toast = useCmsToast();
@@ -77,7 +81,8 @@ async function uploadOne(file) {
     body: {
       filename: file.name,
       contentType: file.type || "application/octet-stream",
-      size: file.size
+      size: file.size,
+      folder: props.folder
     }
   });
   const res = await fetch(presign.uploadUrl, {
@@ -90,6 +95,7 @@ async function uploadOne(file) {
     method: "POST",
     body: {
       key: presign.key,
+      folder: presign.folder,
       mime: file.type || null,
       size: file.size,
       ...await imageDimensions(file)

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

@@ -3,7 +3,7 @@ type __VLS_Props = {
     multiple?: boolean;
     mediaType?: MediaType;
     accept?: string[];
-    dense?: boolean;
+    folder?: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (items: MediaItem[]) => any;

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

@@ -5,6 +5,11 @@ interface Column {
     accessorFn?: (row: Row) => unknown;
     header?: string;
     reorderable?: boolean;
+    sortable?: boolean;
+}
+interface TableSort {
+    key: string;
+    order: 'asc' | 'desc';
 }
 type __VLS_Props = {
     data: Row[];
@@ -12,15 +17,16 @@ type __VLS_Props = {
 };
 type __VLS_ModelProps = {
     'columnVisibility'?: Record<string, boolean>;
+    'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_2: `${string}-cell`, __VLS_3: {
+declare var __VLS_7: `${string}-cell`, __VLS_8: {
     row: {
         original: Row;
     };
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: Event, row: {
@@ -28,12 +34,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     }) => any;
     reorder: (from: string, to: string) => any;
     "update:columnVisibility": (value: Record<string, boolean>) => any;
+    "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
     onReorder?: ((from: string, to: string) => any) | undefined;
     "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
+    "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -9,16 +9,27 @@
                      :key="columnId(column)"
                      :class="{
   'is-dragging': draggingId === columnId(column),
-  'is-drop-target': dropTargetId === columnId(column)
+  'is-drop-target': dropTargetId === columnId(column),
+  'is-sortable': column.sortable,
+  'is-sorted': sort?.key === columnId(column)
 }"
                      :draggable="column.reorderable || void 0"
+                     :aria-sort="ariaSort(column)"
+                     @click="toggleSort(column)"
                      @dragstart="onDragStart($event, column)"
                      @dragover="onDragOver($event, column)"
                      @dragleave="onDragLeave(column)"
                      @drop="onDrop($event, column)"
                      @dragend="resetDrag"
                   >
-                     {{ column.header }}
+                     <span class="cms-th-label">
+                        {{ column.header }}
+                        <CmsIcon
+                           v-if="column.sortable"
+                           :name="sortIcon(column)"
+                           class="cms-th-sort size-3"
+                        />
+                     </span>
                   </th>
                </tr>
             </thead>
@@ -48,10 +59,27 @@ const props = defineProps({
   columns: { type: Array, required: true }
 });
 const visibility = defineModel("columnVisibility", { type: Object, ...{ default: () => ({}) } });
+const sort = defineModel("sort", { type: [Object, null], ...{ default: null } });
 const emit = defineEmits(["select", "reorder"]);
 function columnId(column) {
   return column.id ?? column.accessorKey ?? "";
 }
+function toggleSort(column) {
+  if (!column.sortable) return;
+  const key = columnId(column);
+  if (sort.value?.key !== key) sort.value = { key, order: "asc" };
+  else if (sort.value.order === "asc") sort.value = { key, order: "desc" };
+  else sort.value = null;
+}
+function sortIcon(column) {
+  if (sort.value?.key !== columnId(column)) return "arrows-up-down";
+  return sort.value.order === "asc" ? "arrow-small-up" : "arrow-small-down";
+}
+function ariaSort(column) {
+  if (!column.sortable) return void 0;
+  if (sort.value?.key !== columnId(column)) return "none";
+  return sort.value.order === "asc" ? "ascending" : "descending";
+}
 const draggingId = ref(null);
 const dropTargetId = ref(null);
 function resetDrag() {

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

@@ -5,6 +5,11 @@ interface Column {
     accessorFn?: (row: Row) => unknown;
     header?: string;
     reorderable?: boolean;
+    sortable?: boolean;
+}
+interface TableSort {
+    key: string;
+    order: 'asc' | 'desc';
 }
 type __VLS_Props = {
     data: Row[];
@@ -12,15 +17,16 @@ type __VLS_Props = {
 };
 type __VLS_ModelProps = {
     'columnVisibility'?: Record<string, boolean>;
+    'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_2: `${string}-cell`, __VLS_3: {
+declare var __VLS_7: `${string}-cell`, __VLS_8: {
     row: {
         original: Row;
     };
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: Event, row: {
@@ -28,12 +34,14 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     }) => any;
     reorder: (from: string, to: string) => any;
     "update:columnVisibility": (value: Record<string, boolean>) => any;
+    "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((event: Event, row: {
         original: Row;
     }) => any) | undefined;
     onReorder?: ((from: string, to: string) => any) | undefined;
     "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
+    "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -50,6 +50,7 @@
          <CmsTable
             v-if="rows.length"
             v-model:column-visibility="columnVisibility"
+            v-model:sort="sort"
             :data="rows"
             :columns="columns"
             @select="onSelect"
@@ -156,10 +157,15 @@ watch(search, (value) => {
     page.value = 1;
   }, 300);
 });
+const sort = ref(null);
+watch(sort, () => {
+  page.value = 1;
+});
 const listQuery = computed(() => ({
   limit: PAGE_SIZE,
   offset: (page.value - 1) * PAGE_SIZE,
-  ...searchTerm.value ? { search: searchTerm.value } : {}
+  ...searchTerm.value ? { search: searchTerm.value } : {},
+  ...sort.value ? { sort: sort.value.key, order: sort.value.order } : {}
 }));
 const { data, refresh, error, status } = await useFetch(endpoint, {
   query: config.kind === "collection" ? listQuery : void 0
@@ -257,14 +263,19 @@ const orderedKeys = computed(() => {
   const known = columnOrder.value.filter((key) => fieldKeys.includes(key));
   return [...known, ...fieldKeys.filter((key) => !known.includes(key))];
 });
+function isSortable(field) {
+  if (field.type === "blocks") return false;
+  return !(field.type === "relation" && field.cardinality === "many-to-many");
+}
 const columns = computed(() => [
   ...orderedKeys.value.map((key) => ({
     id: key,
     accessorFn: (row) => displayValue(config.fields[key], key, row[key]),
     header: config.fields[key].label,
-    reorderable: true
+    reorderable: true,
+    sortable: isSortable(config.fields[key])
   })),
-  ...drafts ? [{ accessorKey: "status", header: "Status" }] : [],
+  ...drafts ? [{ accessorKey: "status", header: "Status", sortable: true }] : [],
   { id: "actions", header: "" }
 ]);
 function reorderColumns(from, to) {

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) 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}
+@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)}.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 .15s 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;display:inline-flex;font-family:Fragment Mono,ui-monospace,monospace;font-size:.75rem;gap:.3rem;letter-spacing:.08em;opacity:.7;text-transform:uppercase}@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);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-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-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-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{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 .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}.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-field{overflow:hidden}.cms-media-field-preview{align-items:center;background:repeating-conic-gradient(from 0deg,rgba(38,33,25,.04) 0 25%,transparent 0 50%) 50% /16px 16px;color:var(--ui-text-dimmed);display:flex;justify-content:center;max-height:16rem;min-height:8rem;padding:.75rem}.cms-media-field-preview>img,.cms-media-field-preview>video{max-height:14.5rem;max-width:100%;-o-object-fit:contain;object-fit:contain}.cms-media-field-bar{align-items:center;background:var(--ui-bg);border-top:1px solid var(--cms-line);display:flex;gap:.5rem;padding:.625rem .75rem}.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-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)}.cms-th-sort{flex:none;opacity:0;transition:opacity .15s ease}.cms-table th.is-sortable:hover .cms-th-sort,.cms-table th.is-sorted .cms-th-sort{opacity:1}.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

@@ -1,4 +1,4 @@
-import { count, desc, sql } from "drizzle-orm";
+import { asc, count, desc, sql } from "drizzle-orm";
 import { defineEventHandler, getValidatedQuery } from "h3";
 import { z } from "zod";
 import { useDb } from "#cms-db";
@@ -9,6 +9,8 @@ const querySchema = z.object({
   limit: z.coerce.number().int().min(1).max(100).default(50),
   offset: z.coerce.number().int().min(0).default(0),
   search: z.string().trim().max(200).optional(),
+  sort: z.string().trim().max(64).optional(),
+  order: z.enum(["asc", "desc"]).default("desc"),
   light: z.stringbool().default(false)
 });
 function likePattern(term) {
@@ -23,7 +25,10 @@ export default defineEventHandler(async (event) => {
     await attachManyToMany(db, name, entry, rows);
     return rows[0] ?? null;
   }
-  const { limit, offset, search, light } = await getValidatedQuery(event, querySchema.parse);
+  const { limit, offset, search, sort, order, light } = await getValidatedQuery(
+    event,
+    querySchema.parse
+  );
   const columns = tableColumns(table);
   const titleColumn = entry.titleField && Object.hasOwn(columns, entry.titleField) ? columns[entry.titleField] : void 0;
   let where;
@@ -36,9 +41,14 @@ export default defineEventHandler(async (event) => {
     ...entry.titleField && titleColumn ? [[entry.titleField, titleColumn]] : [],
     ...entry.drafts && Object.hasOwn(columns, "status") ? [["status", columns.status]] : []
   ]) : void 0;
-  const orderBy = columns.createdAt ?? idColumn(table);
+  const sortColumn = sort && Object.hasOwn(columns, sort) ? columns[sort] : void 0;
+  const orderBy = sortColumn ?? columns.createdAt ?? idColumn(table);
+  const direction = sortColumn && order === "asc" ? asc : desc;
+  const tiebreaker = idColumn(table);
   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 items = await (where ? base.where(where) : base).orderBy(
+    ...orderBy === tiebreaker ? [direction(orderBy)] : [direction(orderBy), desc(tiebreaker)]
+  ).limit(limit).offset(offset);
   const [counted] = await (where ? db.select({ total: count() }).from(table).where(where) : db.select({ total: count() }).from(table));
   if (light) return { items, total: counted?.total ?? 0, relations: {} };
   await attachManyToMany(db, name, entry, items);

package/dist/runtime/server/api/media-presign.post.d.ts

@@ -1,5 +1,6 @@
 declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<{
     key: string;
+    folder: string | null;
     uploadUrl: string;
     method: string;
     headers: {

package/dist/runtime/server/api/media-presign.post.js

@@ -1,7 +1,7 @@
 import { randomUUID } from "node:crypto";
 import { createError, defineEventHandler, readValidatedBody } from "h3";
 import { z } from "zod";
-import { slugify } from "../../shared/index.js";
+import { normalizeMediaFolder, slugify } from "../../shared/index.js";
 import { assertUploadContentType, useMediaStorage } from "../utils/media.js";
 import { requireAdmin } from "../utils/require-admin.js";
 const MAX_BASE_LENGTH = 80;
@@ -10,7 +10,8 @@ const MAX_FILE_SIZE = 10 * 1024 * 1024;
 const bodySchema = z.object({
   filename: z.string().trim().min(1).max(255),
   contentType: z.string().regex(/^[-\w.+]+\/[-\w.+]+$/, "Invalid content type"),
-  size: z.number().int().positive()
+  size: z.number().int().positive(),
+  folder: z.string().max(255).nullish()
 });
 function slugifyFilename(filename) {
   const dot = filename.lastIndexOf(".");
@@ -21,7 +22,7 @@ function slugifyFilename(filename) {
 export default defineEventHandler(async (event) => {
   await requireAdmin(event);
   const { media, client, bucketUrl, publicUrl } = useMediaStorage(event);
-  const { filename, contentType, size } = await readValidatedBody(event, bodySchema.parse);
+  const { filename, contentType, size, folder } = await readValidatedBody(event, bodySchema.parse);
   assertUploadContentType(contentType);
   if (size > MAX_FILE_SIZE) {
     throw createError({
@@ -30,7 +31,8 @@ export default defineEventHandler(async (event) => {
     });
   }
   const now = /* @__PURE__ */ new Date();
-  const prefix = `${now.getUTCFullYear()}/${String(now.getUTCMonth() + 1).padStart(2, "0")}`;
+  const normalizedFolder = normalizeMediaFolder(folder);
+  const prefix = normalizedFolder ?? `${now.getUTCFullYear()}/${String(now.getUTCMonth() + 1).padStart(2, "0")}`;
   const key = `${prefix}/${randomUUID()}-${slugifyFilename(filename)}`;
   const url = new URL(`${bucketUrl}/${key}`);
   url.searchParams.set("X-Amz-Expires", String(media.presignExpiry));
@@ -43,6 +45,7 @@ export default defineEventHandler(async (event) => {
   );
   return {
     key,
+    folder: normalizedFolder,
     uploadUrl: signed.url,
     method: "PUT",
     headers: { "content-type": contentType },

package/dist/runtime/server/api/media.post.js

@@ -2,6 +2,7 @@ import { defineEventHandler, readValidatedBody } from "h3";
 import { z } from "zod";
 import { useDb } from "#cms-db";
 import { cms_media } from "#cms-tables";
+import { normalizeMediaFolder } from "../../shared/index.js";
 import { objectKeySchema } from "../../shared/validation.js";
 import {
   assertMediaWritable,
@@ -32,7 +33,7 @@ export default defineEventHandler(async (event) => {
     width: body.width ?? null,
     height: body.height ?? null,
     alt: body.alt ?? null,
-    folder: body.folder ?? null
+    folder: normalizeMediaFolder(body.folder)
   };
   const [row] = await useDb().insert(cms_media).values(values).onConflictDoUpdate({ target: cms_media.key, set: values }).returning();
   return toMediaItem(row, publicUrl);

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

@@ -3,6 +3,7 @@ import { createError, defineEventHandler, readValidatedBody } from "h3";
 import { z } from "zod";
 import { useDb } from "#cms-db";
 import { cms_media } from "#cms-tables";
+import { normalizeMediaFolder } from "../../shared/index.js";
 import { assertMediaWritable, toMediaItem, useMediaConfig } from "../utils/media.js";
 import { requireAdmin } from "../utils/require-admin.js";
 const bodySchema = z.object({
@@ -17,7 +18,7 @@ export default defineEventHandler(async (event) => {
   const body = await readValidatedBody(event, bodySchema.parse);
   const updates = {};
   if (body.alt !== void 0) updates.alt = body.alt;
-  if (body.folder !== void 0) updates.folder = body.folder;
+  if (body.folder !== void 0) updates.folder = normalizeMediaFolder(body.folder);
   if (Object.keys(updates).length === 0) {
     throw createError({ statusCode: 400, statusMessage: "No fields to update" });
   }

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

@@ -15,6 +15,8 @@ export declare function mediaTypeFor(mime: string | null | undefined, key: strin
 export declare function mediaIconFor(type: MediaType): string;
 export declare function mediaPublicUrl(baseUrl: string | null | undefined, key: string): string | null;
 export declare function slugify(value: string): string;
+export declare const MEDIA_FOLDER_MAX_DEPTH = 4;
+export declare function normalizeMediaFolder(value: string | null | undefined): string | null;
 export interface MediaItem {
     id: number;
     key: string;

package/dist/runtime/shared/index.js

@@ -44,6 +44,12 @@ export function mediaPublicUrl(baseUrl, key) {
 export function slugify(value) {
   return value.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036F]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
+export const MEDIA_FOLDER_MAX_DEPTH = 4;
+export function normalizeMediaFolder(value) {
+  if (!value) return null;
+  const segments = value.split("/").map(slugify).filter(Boolean).slice(0, MEDIA_FOLDER_MAX_DEPTH);
+  return segments.length ? segments.join("/") : null;
+}
 export function isTranslatableField(field) {
   return !!field.translatable && (field.type === "text" || field.type === "richtext");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/nuxt-cms",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "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)",