@xleddyl/nuxt-cms 0.1.61 → 0.2.0

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-   <div class="cms-spinner">
-      <CmsIcon name="arrow-path" class="size-6 animate-spin" />
+   <div class="cms-spinner" role="status" aria-label="Loading">
+      <span class="cms-spinner-ring" />
    </div>
 </template>

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

@@ -14,25 +14,29 @@ interface TableSort {
 type __VLS_Props = {
     data: Row[];
     columns: Column[];
+    selectable?: boolean;
+    rowKey?: string;
 };
 type __VLS_ModelProps = {
+    'selected'?: string[];
     'columnVisibility'?: Record<string, boolean>;
     'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: `${string}-cell`, __VLS_8: {
+declare var __VLS_21: `${string}-cell`, __VLS_22: {
     row: {
         original: Row;
     };
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
     reorder: (from: string, to: string) => any;
+    "update:selected": (value: string[]) => any;
     "update:columnVisibility": (value: Record<string, boolean>) => any;
     "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -40,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
         original: Row;
     }) => any) | undefined;
     onReorder?: ((from: string, to: string) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
     "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
     "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -4,6 +4,14 @@
          <table class="cms-table">
             <thead>
                <tr>
+                  <th v-if="selectable" class="cms-table-check-cell">
+                     <CmsCheckbox
+                        :checked="allSelected"
+                        :indeterminate="someSelected"
+                        aria-label="Select all rows"
+                        @toggle="toggleAll"
+                     />
+                  </th>
                   <th
                      v-for="column in visibleColumns"
                      :key="columnId(column)"
@@ -38,8 +46,17 @@
                   v-for="(row, index) in data"
                   :key="index"
                   class="__clickable"
+                  :class="{ 'is-selected': isSelected(row) }"
+                  :style="{ '--cms-row-delay': `${Math.min(index, 14) * 24}ms` }"
                   @click="emit('select', $event, { original: row })"
                >
+                  <td v-if="selectable" class="cms-table-check-cell" @click.stop="toggleRow(row)">
+                     <CmsCheckbox
+                        :checked="isSelected(row)"
+                        aria-label="Select row"
+                        @toggle="toggleRow(row)"
+                     />
+                  </td>
                   <td v-for="column in visibleColumns" :key="columnId(column)">
                      <slot :name="`${columnId(column)}-cell`" :row="{ original: row }">
                         {{ cellValue(column, row) }}
@@ -56,8 +73,28 @@
 import { computed, ref } from "#imports";
 const props = defineProps({
   data: { type: Array, required: true },
-  columns: { type: Array, required: true }
+  columns: { type: Array, required: true },
+  selectable: { type: Boolean, required: false },
+  rowKey: { type: String, required: false }
 });
+const selected = defineModel("selected", { type: Array, ...{ default: () => [] } });
+function keyOf(row) {
+  return String(row[props.rowKey ?? "id"]);
+}
+function isSelected(row) {
+  return selected.value.includes(keyOf(row));
+}
+function toggleRow(row) {
+  const key = keyOf(row);
+  selected.value = isSelected(row) ? selected.value.filter((k) => k !== key) : [...selected.value, key];
+}
+const allSelected = computed(
+  () => props.data.length > 0 && props.data.every((row) => isSelected(row))
+);
+const someSelected = computed(() => !allSelected.value && selected.value.length > 0);
+function toggleAll() {
+  selected.value = allSelected.value ? [] : props.data.map(keyOf);
+}
 const visibility = defineModel("columnVisibility", { type: Object, ...{ default: () => ({}) } });
 const sort = defineModel("sort", { type: [Object, null], ...{ default: null } });
 const emit = defineEmits(["select", "reorder"]);

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

@@ -14,25 +14,29 @@ interface TableSort {
 type __VLS_Props = {
     data: Row[];
     columns: Column[];
+    selectable?: boolean;
+    rowKey?: string;
 };
 type __VLS_ModelProps = {
+    'selected'?: string[];
     'columnVisibility'?: Record<string, boolean>;
     'sort'?: TableSort | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: `${string}-cell`, __VLS_8: {
+declare var __VLS_21: `${string}-cell`, __VLS_22: {
     row: {
         original: Row;
     };
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+    [K in NonNullable<typeof __VLS_21>]?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (event: Event, row: {
         original: Row;
     }) => any;
     reorder: (from: string, to: string) => any;
+    "update:selected": (value: string[]) => any;
     "update:columnVisibility": (value: Record<string, boolean>) => any;
     "update:sort": (value: TableSort | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
@@ -40,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
         original: Row;
     }) => any) | undefined;
     onReorder?: ((from: string, to: string) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
     "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
     "onUpdate:sort"?: ((value: TableSort | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -5,7 +5,7 @@
             <div
                v-for="toast in toasts"
                :key="toast.id"
-               class="cms-toast cms-rise"
+               class="cms-toast"
                :class="{
   'is-success': toast.color === 'success',
   'is-error': toast.color === 'error'

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,69 @@
+<template>
+   <CmsModal :open="open" size="sm" title="Welcome to nuxt-cms" @update:open="(v) => !v && keep()">
+      <template #body>
+         <CmsForm :state="state" @submit="save">
+            <p class="cms-settings-hint">
+               You signed in with a password that someone shared with you. Set your own password
+               now, or keep this one. You can change it later in Settings, Account.
+            </p>
+            <CmsAlert v-if="error" color="error" :title="error" />
+            <CmsFormField label="New password" name="password">
+               <CmsPasswordInput v-model="state.password" generate copy />
+            </CmsFormField>
+            <div class="cms-actions is-end">
+               <CmsButton
+                  label="Keep current password"
+                  variant="ghost"
+                  color="neutral"
+                  :disabled="busy"
+                  @click="keep"
+               />
+               <CmsButton
+                  type="submit"
+                  label="Set password"
+                  :loading="busy"
+                  :disabled="state.password.length < MIN_PASSWORD_LENGTH"
+               />
+            </div>
+         </CmsForm>
+      </template>
+   </CmsModal>
+</template>
+
+<script setup>
+import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import { computed, ref } from "#imports";
+import { useCmsAccount } from "../../composables/cms-account";
+import { useCmsToast } from "../../composables/cms-toast";
+import { cmsApi } from "../../utils/api";
+import { errorMessage } from "../../utils/ui";
+const { user, refresh } = useCmsAccount();
+const toast = useCmsToast();
+const dismissed = ref(false);
+const open = computed(() => !!user.value?.firstLogin && !dismissed.value);
+const state = ref({ password: "" });
+const error = ref(null);
+const busy = ref(false);
+async function keep() {
+  dismissed.value = true;
+  await cmsApi("/api/cms/account/welcome", { method: "POST" }).catch(() => void 0);
+  await refresh();
+}
+async function save() {
+  busy.value = true;
+  error.value = null;
+  try {
+    await cmsApi("/api/cms/account/password", {
+      method: "PUT",
+      body: { newPassword: state.value.password }
+    });
+    dismissed.value = true;
+    await refresh();
+    toast.add({ title: "Password set", color: "success" });
+  } catch (e) {
+    error.value = errorMessage(e) ?? "Password not set.";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/composables/cms-account.d.ts

@@ -0,0 +1,11 @@
+import type { CmsSessionUser } from '#nuxt-cms';
+export declare function generatePassword(length?: number): string;
+export declare function initialOf(name: string | null | undefined, email: string): string;
+export declare function useCmsAccount(): {
+    user: import("vue").ComputedRef<CmsSessionUser | null>;
+    email: import("vue").ComputedRef<string>;
+    isSuperAdmin: import("vue").ComputedRef<boolean>;
+    displayName: import("vue").ComputedRef<string>;
+    initial: import("vue").ComputedRef<string>;
+    refresh: () => Promise<void>;
+};

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

@@ -0,0 +1,23 @@
+import { computed, useUserSession } from "#imports";
+const PASSWORD_ALPHABET = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789";
+export function generatePassword(length = 16) {
+  const values = new Uint32Array(length);
+  crypto.getRandomValues(values);
+  return Array.from(values, (value) => PASSWORD_ALPHABET[value % PASSWORD_ALPHABET.length]).join(
+    ""
+  );
+}
+export function initialOf(name, email) {
+  return (name?.trim() || email).charAt(0).toUpperCase() || "A";
+}
+export function useCmsAccount() {
+  const session = useUserSession();
+  const user = computed(() => session.user.value ?? null);
+  const email = computed(() => user.value?.email ?? "");
+  const isSuperAdmin = computed(() => !!user.value && !user.value.id);
+  const displayName = computed(
+    () => user.value?.name?.trim() || (isSuperAdmin.value ? "Super admin" : email.value)
+  );
+  const initial = computed(() => initialOf(user.value?.name, email.value));
+  return { user, email, isSuperAdmin, displayName, initial, refresh: session.fetch };
+}

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

@@ -1,7 +1,17 @@
 import type { MediaItem } from '../../shared/index.js';
 export declare function matchesAccept(file: File, accept: string | undefined): boolean;
+export interface UploadEntry {
+    file: File;
+    directory: string | null;
+}
+export interface UploadTree {
+    files: UploadEntry[];
+    directories: string[];
+}
+export declare function uploadTreeFromFiles(list: FileList | File[]): UploadTree;
+export declare function uploadTreeFromDrop(dataTransfer: DataTransfer): Promise<UploadTree>;
 export declare function useCmsMediaUploader(): {
-    upload: (list: FileList | File[], options: {
+    upload: (source: FileList | File[] | UploadTree, options: {
         folder: string | null;
         accept?: string;
         multiple?: boolean;

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

@@ -1,4 +1,9 @@
-import { formatFileSize } from "../../shared/index.js";
+import {
+  formatFileSize,
+  MEDIA_FOLDER_MAX_DEPTH,
+  mediaFolderSegments,
+  normalizeMediaFolder
+} from "../../shared/index.js";
 import { ref } from "#imports";
 import { useCmsRuntime } from "./cms-runtime.js";
 import { useCmsToast } from "./cms-toast.js";
@@ -43,6 +48,90 @@ export function matchesAccept(file, accept) {
     return file.type.toLowerCase() === pattern;
   });
 }
+const UPLOAD_CONCURRENCY = 4;
+function isHiddenName(name) {
+  return name.startsWith(".");
+}
+function joinPath(parent, name) {
+  return parent ? `${parent}/${name}` : name;
+}
+export function uploadTreeFromFiles(list) {
+  const files = [];
+  const directories = /* @__PURE__ */ new Set();
+  for (const file of Array.from(list)) {
+    const segments = (file.webkitRelativePath || file.name).split("/").filter(Boolean);
+    if (segments.some(isHiddenName)) continue;
+    const directory = segments.slice(0, -1).join("/") || null;
+    if (directory) directories.add(directory);
+    files.push({ file, directory });
+  }
+  return { files, directories: [...directories] };
+}
+function readDirectory(entry) {
+  const reader = entry.createReader();
+  const all = [];
+  return new Promise((resolve, reject) => {
+    const next = () => reader.readEntries((batch) => {
+      if (!batch.length) return resolve(all);
+      all.push(...batch);
+      next();
+    }, reject);
+    next();
+  });
+}
+function entryFile(entry) {
+  return new Promise((resolve, reject) => entry.file(resolve, reject));
+}
+async function walkEntry(entry, parent, tree) {
+  if (isHiddenName(entry.name)) return;
+  if (entry.isFile) {
+    tree.files.push({ file: await entryFile(entry), directory: parent });
+    return;
+  }
+  if (!entry.isDirectory) return;
+  const directory = joinPath(parent, entry.name);
+  tree.directories.push(directory);
+  const children = await readDirectory(entry);
+  for (const child of children) await walkEntry(child, directory, tree);
+}
+export function uploadTreeFromDrop(dataTransfer) {
+  const files = Array.from(dataTransfer.files);
+  const entries = Array.from(dataTransfer.items ?? []).filter((item) => item.kind === "file").map((item) => item.webkitGetAsEntry?.() ?? null).filter((entry) => !!entry);
+  if (!entries.some((entry) => entry.isDirectory)) {
+    return Promise.resolve(uploadTreeFromFiles(files));
+  }
+  return (async () => {
+    const tree = { files: [], directories: [] };
+    for (const entry of entries) await walkEntry(entry, null, tree);
+    return tree;
+  })();
+}
+async function mapWithConcurrency(list, limit, task) {
+  const results = new Array(list.length);
+  let cursor = 0;
+  const worker = async () => {
+    while (cursor < list.length) {
+      const index = cursor++;
+      try {
+        results[index] = { status: "fulfilled", value: await task(list[index]) };
+      } catch (reason) {
+        results[index] = { status: "rejected", reason };
+      }
+    }
+  };
+  await Promise.all(Array.from({ length: Math.min(limit, list.length) }, worker));
+  return results;
+}
+function targetFolder(base, directory) {
+  const joined = [base, directory].filter(Boolean).join("/");
+  return {
+    folder: normalizeMediaFolder(joined),
+    flattened: mediaFolderSegments(joined).length > MEDIA_FOLDER_MAX_DEPTH
+  };
+}
+function isWithinOrAbove(folder, other) {
+  return other === folder || other.startsWith(`${folder}/`);
+}
 export function useCmsMediaUploader() {
   const toast = useCmsToast();
   const { mediaMaxFileSize } = useCmsRuntime();
@@ -78,9 +167,26 @@ export function useCmsMediaUploader() {
     done.value++;
     return item;
   }
-  async function upload(list, options) {
-    const all = Array.from(list);
-    let files = all.filter((file) => matchesAccept(file, options.accept));
+  async function createFolders(folders) {
+    const results = await mapWithConcurrency(
+      folders,
+      UPLOAD_CONCURRENCY,
+      (name) => $fetch("/api/cms/admin/media/folders", {
+        method: "POST",
+        body: { name }
+      })
+    );
+    const failed = results.filter((r) => r.status === "rejected").length;
+    if (failed)
+      toast.add({
+        title: `${failed} folder${failed > 1 ? "s" : ""} could not be created`,
+        color: "error"
+      });
+  }
+  async function upload(source, options) {
+    const tree = Array.isArray(source) || source instanceof FileList ? uploadTreeFromFiles(source) : source;
+    const all = tree.files;
+    let files = all.filter((entry) => matchesAccept(entry.file, options.accept));
     const rejected = all.length - files.length;
     if (rejected) {
       toast.add({
@@ -88,21 +194,42 @@ export function useCmsMediaUploader() {
         color: "error"
       });
     }
-    for (const file of files.filter((file2) => file2.size > mediaMaxFileSize)) {
+    for (const { file } of files.filter((entry) => entry.file.size > mediaMaxFileSize)) {
       toast.add({
         title: `File too large (max ${formatFileSize(mediaMaxFileSize)}): ${file.name}`,
         color: "error"
       });
     }
-    files = files.filter((file) => file.size <= mediaMaxFileSize);
-    if (options.multiple === false) files = files.slice(0, 1);
-    if (!files.length || uploading.value) return [];
+    files = files.filter((entry) => entry.file.size <= mediaMaxFileSize);
+    const nested = options.multiple !== false;
+    if (!nested) files = files.slice(0, 1).map((entry) => ({ ...entry, directory: null }));
+    const directories = nested ? tree.directories : [];
+    if (!files.length && !directories.length || uploading.value) return [];
+    const planned = files.map((entry) => ({
+      file: entry.file,
+      ...targetFolder(options.folder, entry.directory)
+    }));
+    const fileFolders = planned.map((entry) => entry.folder).filter((f) => !!f);
+    const emptyFolders = [
+      ...new Set(
+        directories.map((directory) => targetFolder(options.folder, directory).folder).filter((folder) => !!folder)
+      )
+    ].filter((folder) => !fileFolders.some((other) => isWithinOrAbove(folder, other)));
+    if (planned.some((entry) => entry.flattened)) {
+      toast.add({
+        title: `Folders nest up to ${MEDIA_FOLDER_MAX_DEPTH} levels`,
+        description: "Files in deeper folders were uploaded to the deepest allowed folder."
+      });
+    }
     uploading.value = true;
     done.value = 0;
-    total.value = files.length;
+    total.value = planned.length;
     try {
-      const results = await Promise.allSettled(
-        files.map((file) => uploadOne(file, options.folder))
+      if (emptyFolders.length) await createFolders(emptyFolders);
+      const results = await mapWithConcurrency(
+        planned,
+        UPLOAD_CONCURRENCY,
+        (entry) => uploadOne(entry.file, entry.folder)
       );
       const ok = results.filter((r) => r.status === "fulfilled").map((r) => r.value);
       const failed = results.length - ok.length;

package/dist/runtime/app/composables/cms-settings.d.ts

@@ -0,0 +1,13 @@
+import type { CmsEntrySettings, CmsFormLayout, CmsSettingsMap } from '#nuxt-cms';
+export declare function useCmsSettingsState(): import("vue").Ref<CmsSettingsMap, CmsSettingsMap>;
+export declare function loadCmsSettings(): Promise<void>;
+export declare function useCmsSettings(): {
+    settings: import("vue").Ref<CmsSettingsMap, CmsSettingsMap>;
+    save: (name: string, value: CmsEntrySettings) => Promise<void>;
+    reset: (name: string) => Promise<void>;
+};
+export declare function entryFields(name: string): Record<string, import("#nuxt-cms").FieldConfig>;
+export declare function defaultFormLayout(name: string, fields?: Record<string, import("#nuxt-cms").FieldConfig>): CmsFormLayout;
+export declare function entryFormLayout(name: string, settings: CmsSettingsMap, fields?: Record<string, import("#nuxt-cms").FieldConfig>): CmsFormLayout;
+export declare function listExtraColumns(name: string): string[];
+export declare function entryListColumns(name: string, settings: CmsSettingsMap): string[];

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

@@ -0,0 +1,59 @@
+import { layoutFromConfig, pageAllFields, resolveFormLayout, resolveListColumns } from "#nuxt-cms";
+import { useFetch, useState } from "#imports";
+import cmsConfig from "#cms-config";
+import { cmsApi } from "../utils/api.js";
+const SETTINGS_ENDPOINT = "/api/cms/admin/settings";
+export function useCmsSettingsState() {
+  return useState("cms-settings", () => ({}));
+}
+export async function loadCmsSettings() {
+  const state = useCmsSettingsState();
+  const { data } = await useFetch(SETTINGS_ENDPOINT, { key: "cms-settings" });
+  if (data.value) state.value = data.value;
+}
+export function useCmsSettings() {
+  const settings = useCmsSettingsState();
+  async function save(name, value) {
+    const saved = await cmsApi(`${SETTINGS_ENDPOINT}/${name}`, {
+      method: "PUT",
+      body: value
+    });
+    settings.value = { ...settings.value, [name]: saved };
+  }
+  async function reset(name) {
+    await cmsApi(`${SETTINGS_ENDPOINT}/${name}`, { method: "DELETE" });
+    const next = { ...settings.value };
+    delete next[name];
+    settings.value = next;
+  }
+  return { settings, save, reset };
+}
+function entryOf(name) {
+  return cmsConfig[name];
+}
+export function entryFields(name) {
+  const entry = entryOf(name);
+  if (!entry) return {};
+  return entry.kind === "page" ? pageAllFields(entry) : entry.fields;
+}
+export function defaultFormLayout(name, fields = entryFields(name)) {
+  return resolveFormLayout(fields, layoutFromConfig(entryOf(name)?.layout));
+}
+export function entryFormLayout(name, settings, fields = entryFields(name)) {
+  const saved = settings[name]?.layout;
+  return saved ? resolveFormLayout(fields, saved) : defaultFormLayout(name, fields);
+}
+export function listExtraColumns(name) {
+  const entry = entryOf(name);
+  return entry?.kind === "collection" && entry.drafts ? ["status"] : [];
+}
+export function entryListColumns(name, settings) {
+  const entry = entryOf(name);
+  if (!entry) return [];
+  return resolveListColumns(
+    entry.fields,
+    settings[name]?.columns,
+    entry.list,
+    listExtraColumns(name)
+  );
+}

package/dist/runtime/app/composables/cms-theme.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+export type CmsTheme = 'light' | 'dark' | 'system';
+export declare const CMS_THEMES: {
+    value: CmsTheme;
+    label: string;
+    icon: string;
+}[];
+export declare function useCmsTheme(): import("nuxt/app").CookieRef<CmsTheme>;
+export declare function setCmsTheme(theme: Ref<CmsTheme>, value: CmsTheme): void;

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

@@ -0,0 +1,27 @@
+import { nextTick, useCookie } from "#imports";
+export const CMS_THEMES = [
+  { value: "light", label: "Light", icon: "sun" },
+  { value: "dark", label: "Dark", icon: "moon" },
+  { value: "system", label: "System", icon: "computer-desktop" }
+];
+export function useCmsTheme() {
+  return useCookie("cms-theme", {
+    default: () => "system",
+    maxAge: 60 * 60 * 24 * 365,
+    sameSite: "lax",
+    path: "/"
+  });
+}
+export function setCmsTheme(theme, value) {
+  if (value === theme.value) return;
+  const doc = document;
+  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!doc.startViewTransition || reduced) {
+    theme.value = value;
+    return;
+  }
+  doc.startViewTransition(async () => {
+    theme.value = value;
+    await nextTick();
+  });
+}

package/dist/runtime/app/layouts/cms-admin.d.vue.ts

@@ -1,6 +1,6 @@
-declare var __VLS_19: {};
+declare var __VLS_34: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_34) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;