@frigear-nu/admin 0.0.2 → 0.0.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/admin",
   "configKey": "admin",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -26,7 +26,7 @@ const module$1 = defineNuxtModule({
     const dashboardPath = settings.dashboard === false ? void 0 : typeof settings.dashboard === "string" ? settings.dashboard : base;
     nuxt.options.runtimeConfig.public.admin = { base, dashboard: dashboardPath };
     addLayout({ src: resolver.resolve("./runtime/app/layouts/admin.vue"), filename: "admin.vue" }, "admin");
-    for (const name of ["AdminPage", "AdminPageHeader", "AdminSection", "AdminToolbar", "AdminEmpty", "AdminTable", "AdminStatCard", "AdminKeyValue"]) {
+    for (const name of ["AdminPage", "AdminPageHeader", "AdminSection", "AdminToolbar", "AdminEmpty", "AdminTable", "AdminStatCard", "AdminKeyValue", "AdminListCard"]) {
       addComponent({ name, filePath: resolver.resolve(`./runtime/app/components/${name}.vue`) });
     }
     const prefixes = ["", ...(nuxt.options.i18n?.locales ?? []).map((locale) => typeof locale === "string" ? locale : locale.code).map((code) => `/${code}`)];

package/dist/runtime/app/components/AdminListCard.d.vue.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    loading?: boolean;
+    isEmpty?: boolean;
+    empty?: string;
+    to?: string;
+    toLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/AdminListCard.vue

@@ -0,0 +1,71 @@
+<script setup>
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  isEmpty: { type: Boolean, required: false },
+  empty: { type: String, required: false },
+  to: { type: String, required: false },
+  toLabel: { type: String, required: false }
+});
+</script>
+
+<template>
+  <section class="bg-elevated/50 ring-default flex h-full flex-col overflow-hidden rounded-lg ring">
+    <div class="border-default flex items-center justify-between gap-3 border-b px-4 py-3">
+      <div class="min-w-0">
+        <h2 class="text-highlighted text-sm font-semibold">
+          {{ title }}
+        </h2>
+        <p
+          v-if="description"
+          class="text-muted text-xs"
+        >
+          {{ description }}
+        </p>
+      </div>
+      <div
+        v-if="$slots.actions"
+        class="flex items-center gap-2"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+    <div class="flex-1 px-4">
+      <div
+        v-if="loading"
+        class="space-y-3 py-4"
+      >
+        <USkeleton class="h-4 w-2/3" />
+        <USkeleton class="h-4 w-1/2" />
+        <USkeleton class="h-4 w-3/5" />
+      </div>
+      <p
+        v-else-if="isEmpty"
+        class="text-muted py-6 text-center text-sm"
+      >
+        {{ empty }}
+      </p>
+      <ul
+        v-else
+        class="divide-default divide-y text-sm [&>li]:py-2.5"
+      >
+        <slot />
+      </ul>
+    </div>
+    <div
+      v-if="to"
+      class="border-default border-t px-4 py-2.5"
+    >
+      <UButton
+        :to="to"
+        variant="link"
+        color="neutral"
+        size="xs"
+        class="p-0"
+        trailing-icon="i-lucide-arrow-right"
+        :label="toLabel"
+      />
+    </div>
+  </section>
+</template>

package/dist/runtime/app/components/AdminListCard.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    loading?: boolean;
+    isEmpty?: boolean;
+    empty?: string;
+    to?: string;
+    toLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/AdminPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-6">
+  <div class="space-y-4">
     <slot />
   </div>
 </template>

package/dist/runtime/app/components/AdminPageHeader.d.vue.ts

@@ -6,19 +6,19 @@ type __VLS_Props = {
         to: string;
     };
 };
-declare var __VLS_9: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    headline?: (props: typeof __VLS_9) => any;
+    headline?: (props: typeof __VLS_1) => any;
 } & {
-    title?: (props: typeof __VLS_17) => any;
+    title?: (props: typeof __VLS_8) => any;
 } & {
-    description?: (props: typeof __VLS_20) => any;
+    description?: (props: typeof __VLS_10) => any;
 } & {
-    links?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_12) => any;
 } & {
-    actions?: (props: typeof __VLS_25) => any;
+    links?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_27) => any;
+    actions?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminPageHeader.vue

@@ -7,19 +7,12 @@ defineProps({
 </script>
 
 <template>
-  <UPageHeader
-    :title="title"
-    :description="description"
-    :ui="{ root: 'pt-0 pb-6 mb-6', title: 'text-2xl sm:text-3xl' }"
-  >
-    <template
-      v-if="back || $slots.headline"
-      #headline
-    >
+  <header class="mb-5 flex flex-wrap items-end justify-between gap-x-4 gap-y-3">
+    <div class="min-w-0 space-y-1">
       <slot name="headline">
         <UButton
           v-if="back"
-          class="p-0"
+          class="-ml-1 p-1"
           color="neutral"
           variant="link"
           size="sm"
@@ -28,31 +21,28 @@ defineProps({
           :label="back.label"
         />
       </slot>
-    </template>
-
-    <template
-      v-if="$slots.title"
-      #title
-    >
-      <slot name="title" />
-    </template>
-
-    <template
-      v-if="$slots.description"
-      #description
-    >
-      <slot name="description" />
-    </template>
-
-    <template
+      <h1 class="text-highlighted text-xl font-semibold tracking-tight text-pretty sm:text-2xl">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </h1>
+      <p
+        v-if="description || $slots.description"
+        class="text-muted text-sm text-pretty"
+      >
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </p>
+      <slot />
+    </div>
+    <div
       v-if="$slots.links || $slots.actions"
-      #links
+      class="flex flex-wrap items-center gap-2"
     >
       <slot name="links">
         <slot name="actions" />
       </slot>
-    </template>
-
-    <slot />
-  </UPageHeader>
+    </div>
+  </header>
 </template>

package/dist/runtime/app/components/AdminPageHeader.vue.d.ts

@@ -6,19 +6,19 @@ type __VLS_Props = {
         to: string;
     };
 };
-declare var __VLS_9: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    headline?: (props: typeof __VLS_9) => any;
+    headline?: (props: typeof __VLS_1) => any;
 } & {
-    title?: (props: typeof __VLS_17) => any;
+    title?: (props: typeof __VLS_8) => any;
 } & {
-    description?: (props: typeof __VLS_20) => any;
+    description?: (props: typeof __VLS_10) => any;
 } & {
-    links?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_12) => any;
 } & {
-    actions?: (props: typeof __VLS_25) => any;
+    links?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_27) => any;
+    actions?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminSection.vue

@@ -7,14 +7,14 @@ defineProps({
 </script>
 
 <template>
-  <section class="border-default overflow-hidden rounded-lg border">
+  <section class="bg-elevated/50 ring-default ring overflow-hidden rounded-lg">
     <div
       v-if="title || $slots.header || $slots.actions"
-      class="border-default flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3"
+      class="border-default flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3.5"
     >
       <slot name="header">
         <div class="min-w-0">
-          <h2 class="text-sm font-semibold">
+          <h2 class="text-highlighted text-sm font-semibold">
             {{ title }}
           </h2>
           <p

package/dist/runtime/app/components/AdminStatCard.d.vue.ts

@@ -1,11 +1,13 @@
 type __VLS_Props = {
     label: string;
+    icon?: string;
+    to?: string;
     loading?: boolean;
     empty?: string;
 };
-declare var __VLS_11: {};
+declare var __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminStatCard.vue

@@ -1,34 +1,53 @@
 <script setup>
 defineProps({
   label: { type: String, required: true },
+  icon: { type: String, required: false },
+  to: { type: String, required: false },
   loading: { type: Boolean, required: false },
   empty: { type: String, required: false }
 });
+const NuxtLink = resolveComponent("NuxtLink");
 </script>
 
 <template>
-  <section class="border-default flex h-full flex-col gap-2 overflow-hidden rounded-lg border p-4">
-    <h2 class="text-muted text-xs font-medium tracking-wide uppercase">
-      {{ label }}
-    </h2>
-    <div
-      v-if="loading"
-      class="space-y-2"
+  <component
+    :is="to ? NuxtLink : 'section'"
+    :to="to"
+    class="bg-elevated/50 ring-default flex h-full items-start gap-3 overflow-hidden rounded-lg p-4 ring"
+    :class="to && 'hover:bg-elevated transition-colors'"
+  >
+    <span
+      v-if="icon"
+      class="bg-primary/10 ring-primary/25 text-primary flex shrink-0 items-center justify-center rounded-full p-2.5 ring ring-inset"
     >
-      <USkeleton class="h-5 w-2/3" />
-      <USkeleton class="h-4 w-1/3" />
+      <UIcon
+        :name="icon"
+        class="size-5"
+      />
+    </span>
+    <div class="flex min-w-0 flex-1 flex-col gap-1.5">
+      <h2 class="text-muted text-xs font-normal uppercase">
+        {{ label }}
+      </h2>
+      <div
+        v-if="loading"
+        class="space-y-2"
+      >
+        <USkeleton class="h-5 w-2/3" />
+        <USkeleton class="h-4 w-1/3" />
+      </div>
+      <div
+        v-else-if="$slots.default"
+        class="text-highlighted flex flex-wrap items-center gap-2 text-lg font-semibold"
+      >
+        <slot />
+      </div>
+      <p
+        v-else
+        class="text-muted text-sm"
+      >
+        {{ empty }}
+      </p>
     </div>
-    <div
-      v-else-if="$slots.default"
-      class="flex flex-wrap items-center gap-2 text-sm"
-    >
-      <slot />
-    </div>
-    <p
-      v-else
-      class="text-muted text-sm"
-    >
-      {{ empty }}
-    </p>
-  </section>
+  </component>
 </template>

package/dist/runtime/app/components/AdminStatCard.vue.d.ts

@@ -1,11 +1,13 @@
 type __VLS_Props = {
     label: string;
+    icon?: string;
+    to?: string;
     loading?: boolean;
     empty?: string;
 };
-declare var __VLS_11: {};
+declare var __VLS_23: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/AdminTable.vue

@@ -9,7 +9,7 @@ const emit = defineEmits(["select"]);
 </script>
 
 <template>
-  <div class="border-default overflow-hidden rounded-lg border">
+  <div class="bg-elevated/50 ring-default ring overflow-hidden rounded-lg">
     <UTable
       :data="data"
       :columns="columns"

package/dist/runtime/app/layouts/admin.vue

@@ -29,77 +29,100 @@ const sidebarOpen = ref(false);
 watch(() => route.path, () => {
   sidebarOpen.value = false;
 });
+const searchGroups = computed(() => [{
+  id: "admin-nav",
+  label: t("search.goTo", "Go to"),
+  items: links.value.map(({ label, icon, to }) => ({ id: to ?? label, label, icon, to }))
+}]);
 </script>
 
 <template>
-  <div class="h-dvh w-full overflow-hidden bg-default">
-    <UDashboardGroup
-      unit="rem"
-      :ui="{ base: 'admin-group relative flex h-full w-full overflow-hidden' }"
+  <UDashboardGroup unit="rem">
+    <UDashboardSidebar
+      id="admin"
+      v-model:open="sidebarOpen"
+      collapsible
+      resizable
+      class="bg-elevated/25"
+      :ui="{ footer: 'lg:border-t lg:border-default' }"
     >
-      <UDashboardSidebar
-        v-model:open="sidebarOpen"
-        :default-size="16"
-        :min-size="12"
-        :max-size="22"
-        :ui="{ root: 'min-h-0', footer: 'border-t border-default' }"
-      >
-        <template #header>
-          <NuxtLink
-            :to="home"
-            class="flex items-center gap-2 font-semibold"
-          >
-            <UIcon name="i-lucide-layout-dashboard" />
-            <span>{{ t("title", "Administration") }}</span>
-          </NuxtLink>
-        </template>
+      <template #header="{ collapsed }">
+        <NuxtLink
+          :to="home"
+          class="flex min-w-0 items-center gap-2"
+        >
+          <span class="bg-primary text-inverted flex size-7 shrink-0 items-center justify-center rounded-lg">
+            <UIcon
+              name="i-lucide-layout-dashboard"
+              class="size-4"
+            />
+          </span>
+          <span
+            v-if="!collapsed"
+            class="text-highlighted truncate font-semibold"
+          >{{ t("title", "Administration") }}</span>
+        </NuxtLink>
+      </template>
+
+      <template #default="{ collapsed }">
+        <UDashboardSearchButton
+          :collapsed="collapsed"
+          class="bg-transparent ring-default"
+        />
 
         <UNavigationMenu
-          orientation="vertical"
+          :collapsed="collapsed"
           :items="links"
+          orientation="vertical"
+          tooltip
           :aria-label="t('nav.label', 'Admin navigation')"
         />
+      </template>
+
+      <template #footer="{ collapsed }">
+        <UButton
+          to="/"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-arrow-left"
+          :label="collapsed ? void 0 : t('backToSite', 'Back to the site')"
+          :square="collapsed"
+          block
+          class="justify-start"
+        />
+      </template>
+    </UDashboardSidebar>
 
-        <template #footer>
-          <UButton
-            to="/"
-            color="neutral"
-            variant="ghost"
-            icon="i-lucide-arrow-left"
-            :label="t('backToSite', 'Back to the site')"
-            block
-          />
-        </template>
-      </UDashboardSidebar>
+    <UDashboardSearch :groups="searchGroups" />
 
-      <UDashboardPanel :ui="{ body: 'p-0 sm:p-0 gap-0' }">
-        <template #header>
-          <UDashboardNavbar :title="title">
-            <template #leading>
-              <UDashboardSidebarCollapse />
-            </template>
-            <template #right>
-              <component
-                :is="optional(LanguageSelect)"
-                v-if="optional(LanguageSelect) && multiLocale"
-              />
-              <UColorModeButton />
-              <component
-                :is="optional(AccountMenu)"
-                v-if="optional(AccountMenu)"
-              />
-            </template>
-          </UDashboardNavbar>
-        </template>
+    <UDashboardPanel id="admin-main">
+      <template #header>
+        <UDashboardNavbar
+          :title="title"
+          :ui="{ right: 'gap-2' }"
+        >
+          <template #leading>
+            <UDashboardSidebarCollapse />
+          </template>
+          <template #right>
+            <component
+              :is="optional(LanguageSelect)"
+              v-if="optional(LanguageSelect) && multiLocale"
+            />
+            <UColorModeButton />
+            <component
+              :is="optional(AccountMenu)"
+              v-if="optional(AccountMenu)"
+            />
+          </template>
+        </UDashboardNavbar>
+      </template>
 
-        <template #body>
-          <UPage :ui="{ root: 'block', center: 'admin-content px-4 sm:px-6' }">
-            <UPageBody class="mt-0 pt-6 pb-12 space-y-0">
-              <slot />
-            </UPageBody>
-          </UPage>
-        </template>
-      </UDashboardPanel>
-    </UDashboardGroup>
-  </div>
+      <template #body>
+        <div class="admin-content mx-auto w-full max-w-7xl">
+          <slot />
+        </div>
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
 </template>

package/dist/runtime/app/pages/dashboard.vue

@@ -3,6 +3,13 @@ defineOptions({ name: "AdminDashboardPage" });
 const t = useModuleT("admin");
 const { data: menu } = await useMenu("admin.nav");
 const items = computed(() => (menu.value ?? []).filter((item) => item.id !== "admin-dashboard"));
+const [{ data: top }, { data: main }, { data: side }] = await Promise.all([
+  useWidgets("admin.dashboard.top"),
+  useWidgets("admin.dashboard"),
+  useWidgets("admin.dashboard.side")
+]);
+const hasWidgets = computed(() => !!(top.value?.length || main.value?.length || side.value?.length));
+const stack = "flex flex-col gap-4";
 </script>
 
 <template>
@@ -11,28 +18,47 @@ const items = computed(() => (menu.value ?? []).filter((item) => item.id !== "ad
       :title="t('dashboard.title', 'Dashboard')"
       :description="t('dashboard.description', 'Overview and shortcuts for administrators.')"
     />
-    <WidgetArea name="admin.dashboard">
-      <template #empty>
-        <div
-          v-if="items.length"
-          class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-4"
-        >
-          <UPageCard
-            v-for="item in items"
-            :key="item.id"
-            :title="item.label"
-            :description="item.description"
-            :icon="item.icon"
-            :to="item.to"
-          />
-        </div>
-        <p
-          v-else
-          class="text-muted"
-        >
-          {{ t("dashboard.empty", "Nothing here yet. Modules add their admin pages and widgets automatically.") }}
-        </p>
-      </template>
-    </WidgetArea>
+
+    <template v-if="hasWidgets">
+      <WidgetArea name="admin.dashboard.top" />
+      <div class="grid gap-4 lg:grid-cols-3">
+        <WidgetArea
+          name="admin.dashboard"
+          :grid-class="`${stack} ${side?.length ? 'lg:col-span-2' : 'lg:col-span-3'}`"
+        />
+        <WidgetArea
+          name="admin.dashboard.side"
+          :grid-class="stack"
+        />
+      </div>
+    </template>
+
+    <template v-else>
+      <UPageGrid
+        v-if="items.length"
+        class="lg:grid-cols-3"
+      >
+        <UPageCard
+          v-for="item in items"
+          :key="item.id"
+          :title="item.label"
+          :description="item.description"
+          :icon="item.icon"
+          :to="item.to"
+          variant="subtle"
+          :ui="{
+  container: 'gap-y-1.5',
+  wrapper: 'items-start',
+  leading: 'p-2.5 rounded-full bg-primary/10 ring ring-inset ring-primary/25 flex-col'
+}"
+        />
+      </UPageGrid>
+      <p
+        v-else
+        class="text-muted"
+      >
+        {{ t("dashboard.empty", "Nothing here yet. Modules add their admin pages and widgets automatically.") }}
+      </p>
+    </template>
   </AdminPage>
 </template>

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

@@ -8,7 +8,16 @@ import type { WidgetDefinition } from '@frigear-nu/widget/utils';
 export declare const adminRoute: (nuxt: Nuxt, ...segments: string[]) => string;
 export declare const ADMIN_NAV_MENU = "admin.nav";
 export declare const ADMIN_DASHBOARD_AREA = "admin.dashboard";
+/** The stat row above the dashboard content. */
+export declare const ADMIN_DASHBOARD_TOP_AREA = "admin.dashboard.top";
+/** The narrow column next to the main dashboard content. */
+export declare const ADMIN_DASHBOARD_SIDE_AREA = "admin.dashboard.side";
+export type AdminDashboardPosition = 'top' | 'main' | 'side';
 /** Adds entries to the admin sidebar (the `admin.nav` menu of `@frigear-nu/menu`). Call from a module's `setup()`. */
 export declare const extendAdminNav: (nuxt: Nuxt, items: MenuItem | MenuItem[]) => void;
-/** Adds widgets to the admin dashboard (the `admin.dashboard` area of `@frigear-nu/widget`). Call from a module's `setup()`. */
-export declare const extendAdminDashboard: (nuxt: Nuxt, widgets: WidgetDefinition | WidgetDefinition[]) => void;
+/**
+ * Adds widgets to the admin dashboard (an area of `@frigear-nu/widget`). Call from a module's `setup()`.
+ * `position` picks the area: `top` is the stat row (use `AdminStatCard`), `main` the content column (the default),
+ * `side` the narrow column.
+ */
+export declare const extendAdminDashboard: (nuxt: Nuxt, widgets: WidgetDefinition | WidgetDefinition[], position?: AdminDashboardPosition) => void;

package/dist/runtime/utils/index.js

@@ -6,5 +6,12 @@ export const adminRoute = (nuxt, ...segments) => {
 };
 export const ADMIN_NAV_MENU = "admin.nav";
 export const ADMIN_DASHBOARD_AREA = "admin.dashboard";
+export const ADMIN_DASHBOARD_TOP_AREA = "admin.dashboard.top";
+export const ADMIN_DASHBOARD_SIDE_AREA = "admin.dashboard.side";
+const DASHBOARD_AREAS = {
+  top: ADMIN_DASHBOARD_TOP_AREA,
+  main: ADMIN_DASHBOARD_AREA,
+  side: ADMIN_DASHBOARD_SIDE_AREA
+};
 export const extendAdminNav = (nuxt, items) => extendMenu(nuxt, ADMIN_NAV_MENU, items);
-export const extendAdminDashboard = (nuxt, widgets) => extendWidgets(nuxt, ADMIN_DASHBOARD_AREA, widgets);
+export const extendAdminDashboard = (nuxt, widgets, position = "main") => extendWidgets(nuxt, DASHBOARD_AREAS[position], widgets);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frigear-nu/admin",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Generic admin area: shell layout, guarded dashboard and navigation that other modules contribute to through @frigear-nu/menu and @frigear-nu/widget.",
   "homepage": "https://docs.frigear.dev/modules/admin",
   "repository": {
@@ -30,9 +30,9 @@
     "playground"
   ],
   "dependencies": {
-    "@frigear-nu/menu": "0.0.9",
-    "@frigear-nu/module-kit": "0.1.7",
-    "@frigear-nu/widget": "0.0.2",
+    "@frigear-nu/menu": "0.0.11",
+    "@frigear-nu/module-kit": "1.0.1",
+    "@frigear-nu/widget": "0.0.4",
     "@nuxt/kit": "^4.6.0",
     "nuxt-auth-utils": "^0.5.30"
   },