@xleddyl/nuxt-cms 0.1.60 → 0.2.0

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

@@ -0,0 +1,16 @@
+import { type CmsTheme } from '../../composables/cms-theme.js';
+type __VLS_ModelProps = {
+    'open'?: boolean;
+    'theme': CmsTheme;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    logout: () => any;
+    "update:open": (value: boolean) => any;
+    "update:theme": (value: CmsTheme) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    onLogout?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onUpdate:theme"?: ((value: CmsTheme) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/cms/SettingsUsers.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/SettingsUsers.vue

@@ -0,0 +1,270 @@
+<template>
+   <div class="cms-settings-entry">
+      <div class="cms-settings-entry-header">
+         <div class="cms-settings-heading">
+            <h2 class="cms-title cms-title-sm">Users</h2>
+            <p class="cms-settings-hint">
+               Users can do everything in the panel, except manage users.
+            </p>
+         </div>
+         <CmsButton
+            v-if="!creating"
+            label="Add user"
+            icon="user-plus"
+            size="sm"
+            @click="startCreate"
+         />
+      </div>
+
+      <div v-if="created" class="cms-credentials">
+         <div class="cms-settings-heading">
+            <p class="cms-settings-label">{{ created.title }}</p>
+            <p class="cms-settings-hint">
+               Share these credentials with the user. The password does not show again.
+            </p>
+         </div>
+         <dl class="cms-credentials-list">
+            <dt>Email</dt>
+            <dd>{{ created.email }}</dd>
+            <dt>Password</dt>
+            <dd class="cms-mono">{{ created.password }}</dd>
+         </dl>
+         <div class="cms-actions is-end">
+            <CmsButton
+               :label="copied ? 'Copied' : 'Copy credentials'"
+               :icon="copied ? 'clipboard-document-check' : 'clipboard-document'"
+               variant="soft"
+               size="sm"
+               @click="copyCredentials"
+            />
+            <CmsButton label="Done" size="sm" @click="created = null" />
+         </div>
+      </div>
+
+      <div v-if="creating" class="cms-credentials">
+         <p class="cms-settings-label">New user</p>
+         <CmsForm :state="draft" @submit="create">
+            <CmsAlert v-if="formError" color="error" :title="formError" />
+            <div class="cms-form-row" style="--cms-row-cols: 2">
+               <CmsFormField label="Email" name="email" required>
+                  <CmsInput
+                     v-model="draft.email"
+                     type="email"
+                     icon="envelope"
+                     placeholder="name@example.com"
+                     autocomplete="off"
+                  />
+               </CmsFormField>
+               <CmsFormField label="Name" name="name">
+                  <CmsInput v-model="draft.name" placeholder="Optional" autocomplete="off" />
+               </CmsFormField>
+            </div>
+            <CmsFormField label="Password" name="password" required>
+               <CmsPasswordInput v-model="draft.password" generate copy />
+            </CmsFormField>
+            <div class="cms-actions is-end">
+               <CmsButton
+                  label="Cancel"
+                  variant="ghost"
+                  color="neutral"
+                  size="sm"
+                  @click="cancel"
+               />
+               <CmsButton
+                  type="submit"
+                  label="Create user"
+                  size="sm"
+                  :loading="busy"
+                  :disabled="!draft.email || draft.password.length < MIN_PASSWORD_LENGTH"
+               />
+            </div>
+         </CmsForm>
+      </div>
+
+      <CmsSpinner v-if="loading" />
+
+      <ul v-else-if="users.length" class="cms-settings-list">
+         <li v-for="account in users" :key="account.id" class="cms-user-row">
+            <div class="cms-user-main">
+               <span class="cms-avatar">{{ initialOf(account.name, account.email) }}</span>
+               <div class="cms-account-text">
+                  <span class="cms-account-name">{{ account.name || account.email }}</span>
+                  <span class="cms-account-email">
+                     {{ account.name ? `${account.email} \xB7 ` : "" }}{{ lastLogin(account) }}
+                  </span>
+               </div>
+               <div class="cms-user-actions">
+                  <CmsButton
+                     icon="key"
+                     variant="ghost"
+                     color="neutral"
+                     size="sm"
+                     title="Set a new password"
+                     aria-label="Set a new password"
+                     @click="startReset(account)"
+                  />
+                  <CmsButton
+                     icon="trash"
+                     variant="ghost"
+                     color="error"
+                     size="sm"
+                     title="Delete user"
+                     aria-label="Delete user"
+                     @click="remove(account)"
+                  />
+               </div>
+            </div>
+            <CmsForm
+               v-if="resetting === account.id"
+               :state="reset"
+               class="cms-user-reset"
+               @submit="saveReset(account)"
+            >
+               <CmsFormField label="New password" name="password">
+                  <CmsPasswordInput v-model="reset.password" generate copy />
+               </CmsFormField>
+               <div class="cms-actions is-end">
+                  <CmsButton
+                     label="Cancel"
+                     variant="ghost"
+                     color="neutral"
+                     size="sm"
+                     @click="resetting = null"
+                  />
+                  <CmsButton
+                     type="submit"
+                     label="Set password"
+                     size="sm"
+                     :loading="busy"
+                     :disabled="reset.password.length < MIN_PASSWORD_LENGTH"
+                  />
+               </div>
+            </CmsForm>
+         </li>
+      </ul>
+
+      <CmsEmptyState
+         v-else-if="!creating"
+         icon="users"
+         title="No users yet"
+         body="Add a user to give someone access to the panel."
+      />
+   </div>
+</template>
+
+<script setup>
+import { MIN_PASSWORD_LENGTH } from "#nuxt-cms";
+import { onMounted, ref } from "#imports";
+import { generatePassword, initialOf } from "../../composables/cms-account";
+import { useCmsConfirm } from "../../composables/cms-confirm";
+import { useCmsToast } from "../../composables/cms-toast";
+import { cmsApi } from "../../utils/api";
+import { errorMessage } from "../../utils/ui";
+const toast = useCmsToast();
+const confirmAction = useCmsConfirm();
+const users = ref([]);
+const loading = ref(true);
+const busy = ref(false);
+async function load() {
+  try {
+    users.value = await cmsApi("/api/cms/users");
+  } catch (error) {
+    toast.add({ title: "Could not load users", description: errorMessage(error), color: "error" });
+  } finally {
+    loading.value = false;
+  }
+}
+onMounted(load);
+function lastLogin(account) {
+  if (!account.lastLoginAt) return "Never signed in";
+  return `Last sign-in ${new Date(account.lastLoginAt).toLocaleString(void 0, {
+    dateStyle: "medium",
+    timeStyle: "short"
+  })}`;
+}
+const creating = ref(false);
+const draft = ref({ email: "", name: "", password: "" });
+const formError = ref(null);
+const created = ref(null);
+const copied = ref(false);
+function startCreate() {
+  created.value = null;
+  formError.value = null;
+  draft.value = { email: "", name: "", password: generatePassword() };
+  creating.value = true;
+}
+function cancel() {
+  creating.value = false;
+}
+async function create() {
+  busy.value = true;
+  formError.value = null;
+  try {
+    const account = await cmsApi("/api/cms/users", {
+      method: "POST",
+      body: {
+        email: draft.value.email,
+        name: draft.value.name || null,
+        password: draft.value.password
+      }
+    });
+    users.value = [...users.value, account];
+    created.value = {
+      title: "User created",
+      email: account.email,
+      password: draft.value.password
+    };
+    copied.value = false;
+    creating.value = false;
+  } catch (error) {
+    formError.value = errorMessage(error) ?? "User not created.";
+  } finally {
+    busy.value = false;
+  }
+}
+async function copyCredentials() {
+  if (!created.value) return;
+  await navigator.clipboard.writeText(
+    `Email: ${created.value.email}
+Password: ${created.value.password}`
+  );
+  copied.value = true;
+}
+const resetting = ref(null);
+const reset = ref({ password: "" });
+function startReset(account) {
+  reset.value = { password: generatePassword() };
+  resetting.value = resetting.value === account.id ? null : account.id;
+}
+async function saveReset(account) {
+  busy.value = true;
+  try {
+    const updated = await cmsApi(`/api/cms/users/${account.id}`, {
+      method: "PUT",
+      body: { password: reset.value.password }
+    });
+    users.value = users.value.map((u) => u.id === updated.id ? updated : u);
+    created.value = {
+      title: "Password changed",
+      email: account.email,
+      password: reset.value.password
+    };
+    copied.value = false;
+    resetting.value = null;
+  } catch (error) {
+    toast.add({ title: "Password not changed", description: errorMessage(error), color: "error" });
+  } finally {
+    busy.value = false;
+  }
+}
+async function remove(account) {
+  if (!await confirmAction(`Delete ${account.email}? They lose access to the panel.`)) return;
+  try {
+    await cmsApi(`/api/cms/users/${account.id}`, { method: "DELETE" });
+    users.value = users.value.filter((u) => u.id !== account.id);
+    toast.add({ title: "User deleted", color: "success" });
+  } catch (error) {
+    toast.add({ title: "User not deleted", description: errorMessage(error), color: "error" });
+  }
+}
+</script>

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-library.d.ts

@@ -0,0 +1,75 @@
+import type { MediaItem, MediaSourceInfo, MediaUsage } from '../../shared/index.js';
+export interface MediaFolderStats {
+    files: number;
+    folders: number;
+}
+export declare function useCmsMediaLibrary(): {
+    items: import("vue").Ref<{
+        id?: number | undefined;
+        key: string;
+        alt: string | null;
+        folder: string | null;
+        mime: string | null;
+        size: number | null;
+        width: number | null;
+        height: number | null;
+        createdAt: string | null;
+        type: import("../../shared/index.js").MediaType;
+        url: string | null;
+    }[], MediaItem[] | {
+        id?: number | undefined;
+        key: string;
+        alt: string | null;
+        folder: string | null;
+        mime: string | null;
+        size: number | null;
+        width: number | null;
+        height: number | null;
+        createdAt: string | null;
+        type: import("../../shared/index.js").MediaType;
+        url: string | null;
+    }[]>;
+    source: import("vue").Ref<{
+        kind: import("../../shared/index.js").MediaSourceKind;
+        root: string;
+        builtAt: string | null;
+    } | null, MediaSourceInfo | {
+        kind: import("../../shared/index.js").MediaSourceKind;
+        root: string;
+        builtAt: string | null;
+    } | null>;
+    loading: import("vue").Ref<boolean, boolean>;
+    errorCode: import("vue").Ref<number | null, number | null>;
+    folders: import("vue").ComputedRef<string[]>;
+    stats: import("vue").ComputedRef<Map<string, MediaFolderStats>>;
+    reload: (options?: {
+        quiet?: boolean;
+    }) => Promise<void>;
+    childFolders: (parent: string | null) => string[];
+    itemsWithin: (folder: string) => {
+        id?: number | undefined;
+        key: string;
+        alt: string | null;
+        folder: string | null;
+        mime: string | null;
+        size: number | null;
+        width: number | null;
+        height: number | null;
+        createdAt: string | null;
+        type: import("../../shared/index.js").MediaType;
+        url: string | null;
+    }[];
+    createFolder: (name: string) => Promise<boolean>;
+    moveFolder: (from: string, to: string) => Promise<boolean>;
+    deleteFolder: (name: string) => Promise<boolean>;
+    moveItems: (keys: string[], folder: string | null) => Promise<boolean>;
+    deleteItems: (keys: string[]) => Promise<boolean>;
+    updateItem: (key: string, changes: {
+        alt?: string | null;
+        folder?: string | null;
+    }) => Promise<boolean>;
+    usage: (keys: string[]) => Promise<Record<string, MediaUsage[]> | null>;
+};
+export type CmsMediaLibrary = ReturnType<typeof useCmsMediaLibrary>;
+export declare function usageSummary(usage: Record<string, MediaUsage[]> | null, keys: string[]): string;
+export declare function usageLink(usage: MediaUsage): string;