@frigear-nu/account 0.0.9 → 0.1.0

package/README.md

@@ -10,8 +10,9 @@ A module for the account area (profile, security, documents, API tokens pages) i
 - 🔒 Change your password.
 - 🔑 Manage passkeys (via `@frigear-nu/auth`'s `usePasskeys`, when WebAuthn is enabled there).
 - 🧩 Overridable composable (`useAccount`) and opt-in profile/security pages (built with [`@nuxt/ui`](https://ui.nuxt.com)).
-- 🗂️ Contributes "Profile"/"Security" tiles to `@frigear-nu/menu` (when installed), and an opt-in dashboard page
-  listing them.
+- 🗂️ An `account` layout (inside the site layout) with a left account navigation built from the `account` menu
+  of `@frigear-nu/menu` (when installed), an overview page listing the same entries, and an `account.overview` widget
+  area (when `@frigear-nu/widget` is installed).
 
 This module is a UI shell: it owns no tables and no mutation routes. The forms call the self-service routes of
 `@frigear-nu/users` (`/api/users/me/*`) and the token routes of `@frigear-nu/auth`.
@@ -36,7 +37,7 @@ export default defineNuxtConfig({
   modules: [
     '@nuxthub/core',
     '@frigear-nu/users',
-    '@frigear-nu/menu', // optional - enables the dashboard tiles/page
+    '@frigear-nu/menu', // optional - enables the account navigation and overview page
     '@frigear-nu/account',
   ],
   account: {
@@ -78,4 +79,6 @@ Strings live under the `account.*` namespace in `da`/`en` locale files and can b
 ## Overriding parts
 
 Any `Account*` component can be replaced by a same-named component in your app (the module's have a lower priority).
-`AccountHeaderRight` is the block at the right of the account header; override it to show other details.
+`AccountHeaderRight` is the actions block of the account page heading (and of the overview's summary card);
+override it to show other details. Set `account.layout: false` to opt out of the account layout and render the
+pages in your own.

package/dist/module.d.mts

@@ -26,6 +26,11 @@ type PublicModuleOptions = {
 };
 type ModuleOptions = {
     settings?: {
+        /**
+         * Renders `/account`, `/account/**` and the configured page paths in the `account` layout (the site layout with
+         * a left account navigation). `false` leaves the layout to the host. Defaults to `true`.
+         */
+        layout?: boolean;
         pages?: {
             index?: string | boolean;
             profile?: string | boolean;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/account",
   "configKey": "account",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,5 +1,5 @@
-import { defineNuxtModule, createResolver, hasNuxtModule, addImports, extendPages, addComponentsDir } from '@nuxt/kit';
-import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
+import { defineNuxtModule, createResolver, hasNuxtModule, addImports, addLayout, addComponentsDir } from '@nuxt/kit';
+import { registerModule, registerTailwindSource, registerLocales, resolvePagePath, addModulePages, addOptionalMenuSource } from '@frigear-nu/module-kit/utils';
 
 const module$1 = defineNuxtModule({
   meta: { name: "@frigear-nu/account", configKey: "account" },
@@ -18,9 +18,16 @@ const module$1 = defineNuxtModule({
     "@frigear-nu/users": {
       version: ">=0.0.1"
     },
+    // Page pattern components (`PageHeading`, `SectionCard`, ...), `useNavLinks` and the error/format helpers.
+    "@frigear-nu/ui": { version: ">=0.0.0" },
     "@frigear-nu/menu": {
       version: ">=0.0.1",
       optional: true
+    },
+    // The overview renders the `account.overview` widget area when it is installed.
+    "@frigear-nu/widget": {
+      version: ">=0.0.0",
+      optional: true
     }
   },
   async setup(options, nuxt) {
@@ -30,7 +37,10 @@ const module$1 = defineNuxtModule({
     registerLocales(nuxt, resolver.resolve("./runtime/i18n/lang"));
     const settings = options.settings ?? {};
     const withMenus = hasNuxtModule("@frigear-nu/menu");
-    addImports([{ name: "useAccount", from: resolver.resolve("./runtime/app/composables/useAccount") }]);
+    addImports([
+      { name: "useAccount", from: resolver.resolve("./runtime/app/composables/useAccount") },
+      { name: "useAccountNav", from: resolver.resolve("./runtime/app/composables/useAccountNav") }
+    ]);
     const profilePath = resolvePagePath(settings.pages?.profile, "/account/profile");
     const securityPath = resolvePagePath(settings.pages?.security, "/account/security");
     const documentsPath = resolvePagePath(settings.pages?.documents, "/account/documents");
@@ -43,36 +53,32 @@ const module$1 = defineNuxtModule({
       pages: { index: indexPath, profile: profilePath, security: securityPath, documents: documentsPath, apiTokens: apiTokensPath },
       documents: settings.documents ?? []
     };
-    if (indexPath || profilePath || securityPath || documentsPath || apiTokensPath) {
-      extendPages((pages) => {
-        const existingPaths = new Set(pages.map((page) => page.path));
-        const children = [];
-        const add = (path, name, file) => {
-          if (path && !existingPaths.has(path)) children.push({ name, path, file: resolver.resolve(file) });
-        };
-        add(indexPath, "account-index", "./runtime/app/pages/index.vue");
-        add(profilePath, "account-profile", "./runtime/app/pages/profile.vue");
-        add(documentsPath, "account-documents", "./runtime/app/pages/documents.vue");
-        add(securityPath, "account-security", "./runtime/app/pages/security.vue");
-        add(apiTokensPath, "account-api-tokens", "./runtime/app/pages/api-tokens.vue");
-        if (children.length) {
-          pages.push({ name: "account-layout", path: "/__account", file: resolver.resolve("./runtime/app/pages/layout.vue"), children });
-        }
-      });
+    addModulePages("@frigear-nu/account", resolver, [
+      { name: "account-index", path: indexPath, file: "./runtime/app/pages/index.vue" },
+      { name: "account-profile", path: profilePath, file: "./runtime/app/pages/profile.vue" },
+      { name: "account-documents", path: documentsPath, file: "./runtime/app/pages/documents.vue" },
+      { name: "account-security", path: securityPath, file: "./runtime/app/pages/security.vue" },
+      { name: "account-api-tokens", path: apiTokensPath, file: "./runtime/app/pages/api-tokens.vue" }
+    ]);
+    const prefixes = ["", ...(nuxt.options.i18n?.locales ?? []).map((locale) => typeof locale === "string" ? locale : locale.code).map((code) => `/${code}`)];
+    const outside = [indexPath, profilePath, securityPath, documentsPath, apiTokensPath].filter((path) => !!path && path !== "/account" && !path.startsWith("/account/"));
+    const areaPatterns = prefixes.flatMap((prefix) => [`${prefix}/account`, `${prefix}/account/**`, ...outside.map((path) => `${prefix}${path}`)]);
+    if (settings.layout !== false) {
+      addLayout({ src: resolver.resolve("./runtime/app/layouts/account.vue"), filename: "account.vue" }, "account");
+      const rules = nuxt.options.routeRules ||= {};
+      for (const pattern of areaPatterns) {
+        rules[pattern] = { appLayout: "account", ...rules[pattern] };
+      }
     }
     if (hasNuxtModule("@frigear-nu/authorization")) {
-      const prefixes = ["", ...(nuxt.options.i18n?.locales ?? []).map((locale) => typeof locale === "string" ? locale : locale.code).map((code) => `/${code}`)];
       const rules = nuxt.options.routeRules ||= {};
-      const guarded = [indexPath, profilePath, securityPath, documentsPath, apiTokensPath].filter((path) => !!path && !path.startsWith("/account"));
-      for (const prefix of prefixes) {
-        for (const pattern of [`${prefix}/account`, `${prefix}/account/**`, ...guarded.map((path) => `${prefix}${path}`)]) {
-          rules[pattern] = { authenticated: true, ...rules[pattern] };
-        }
+      for (const pattern of areaPatterns) {
+        rules[pattern] = { authenticated: true, ...rules[pattern] };
       }
     } else {
       console.warn("[@frigear-nu/account] @frigear-nu/authorization is not installed: the account pages are not guarded. Install it and guard `/account/**` yourself.");
     }
-    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "dashboard.account" });
+    addOptionalMenuSource(nuxt, { file: resolver.resolve("./runtime/menus"), menu: "account" });
     addComponentsDir({
       path: resolver.resolve("./runtime/app/components"),
       priority: -1

package/dist/runtime/app/components/Account/AccountApiTokenSlideover.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ApiTokenScope, CreatedApiToken } from '../../utils/api-tokens.js';
+type __VLS_Props = {
+    scopes: ApiTokenScope[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (created: false | CreatedApiToken) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((created: false | CreatedApiToken) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Account/AccountApiTokenSlideover.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { z } from "zod";
+const props = defineProps({
+  scopes: { type: Array, required: true }
+});
+const emit = defineEmits(["close"]);
+const t = useModuleT("account.apiTokens");
+const { busy, run } = useAction();
+const scopeItems = computed(() => props.scopes.map((scope) => ({
+  label: scope.name === "*" ? t("allScopes", "Full access") : scope.name,
+  description: scope.description,
+  value: scope.name
+})));
+const expiryItems = computed(() => [
+  { label: t("expiry.30", "30 days"), value: 30 },
+  { label: t("expiry.90", "90 days"), value: 90 },
+  { label: t("expiry.365", "1 year"), value: 365 },
+  { label: t("expiry.never", "No expiry"), value: 0 }
+]);
+const schema = z.object({
+  name: z.string().trim().min(1, t("name.required", "Give the token a name.")).max(80),
+  scopes: z.array(z.string()).min(1, t("scopes.required", "Pick at least one scope.")),
+  expiresInDays: z.number()
+});
+const state = reactive({ name: "", scopes: [], expiresInDays: 90 });
+async function onSubmit(event) {
+  const created = await run(
+    () => $fetch("/api/auth/tokens", {
+      method: "POST",
+      body: { name: event.data.name, scopes: event.data.scopes, expiresInDays: event.data.expiresInDays || null }
+    }),
+    { error: t("createError", "Could not create the token.") }
+  );
+  if (created) emit("close", created);
+}
+</script>
+
+<template>
+  <FormSlideover
+    form-id="account-api-token"
+    :title="t('create.title', 'Create API token')"
+    :description="t('create.description', 'Tokens let scripts and tools such as MCP clients act as you. Give each one only the scopes it needs.')"
+    :submit-label="t('create.submit', 'Create API token')"
+    :loading="busy"
+    @close="emit('close', false)"
+  >
+    <UForm
+      id="account-api-token"
+      :schema="schema"
+      :state="state"
+      class="flex flex-col gap-4"
+      @submit="onSubmit"
+    >
+      <UFormField
+        :label="t('name.label', 'Name')"
+        :description="t('name.description', 'So you recognise the token later.')"
+        name="name"
+        required
+      >
+        <UInput
+          v-model="state.name"
+          :placeholder="t('name.placeholder', 'e.g. My MCP client')"
+          maxlength="80"
+          class="w-full"
+        />
+      </UFormField>
+      <UFormField
+        :label="t('scopes.label', 'Scopes')"
+        :description="t('scopes.description', 'What the token may do.')"
+        name="scopes"
+        required
+      >
+        <USelectMenu
+          v-model="state.scopes"
+          :items="scopeItems"
+          value-key="value"
+          multiple
+          :placeholder="t('scopes.placeholder', 'Choose what the token may do')"
+          class="w-full"
+        />
+      </UFormField>
+      <UFormField
+        :label="t('expiry.label', 'Expires')"
+        name="expiresInDays"
+      >
+        <USelect
+          v-model="state.expiresInDays"
+          :items="expiryItems"
+          value-key="value"
+          class="w-full"
+        />
+      </UFormField>
+    </UForm>
+  </FormSlideover>
+</template>

package/dist/runtime/app/components/Account/AccountApiTokenSlideover.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ApiTokenScope, CreatedApiToken } from '../../utils/api-tokens.js';
+type __VLS_Props = {
+    scopes: ApiTokenScope[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (created: false | CreatedApiToken) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((created: false | CreatedApiToken) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Account/AccountHeader.vue

@@ -1,43 +1,23 @@
 <script setup>
 const t = useModuleT("account");
 const route = useRoute();
-const pages = useRuntimeConfig().public.account?.pages;
-const nuxtApp = useNuxtApp();
-const items = typeof useMenu === "function" ? useMenu("account").data : ref([]);
-const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
-const stripLocale = (path) => {
-  const trimmed = trimSlash(path);
-  const first = trimmed.split("/")[1];
-  const codes = (nuxtApp.$i18n?.locales?.value ?? []).map((locale) => typeof locale === "string" ? locale : locale.code);
-  return first && codes.includes(first) ? trimmed.slice(first.length + 1) || "/" : trimmed;
-};
-const current = computed(() => {
-  const path = stripLocale(route.path);
-  return (items.value ?? []).find((item) => item.to && !item.external && stripLocale(item.to) === path);
+const { current } = await useAccountNav();
+const title = computed(() => {
+  const meta = route.meta.title;
+  return typeof meta === "string" && meta || current.value?.label || t("title", "Account");
 });
-const title = computed(() => current.value?.label ?? t("title", "Account"));
 const description = computed(() => current.value?.description);
+useHead({ title });
 </script>
 
 <template>
-  <UContainer>
-    <UPageHeader
-      :title="title"
-      :description="description"
-      :ui="{ wrapper: 'flex-row items-center justify-between gap-4', description: 'mt-2' }"
-    >
-      <UButton
-        v-if="current && pages?.index"
-        variant="link"
-        icon="i-lucide-arrow-left"
-        :to="pages.index"
-        :label="t('backTo', 'Back to account')"
-        class="-ml-3 mt-2"
-      />
-
-      <template #links>
-        <AccountHeaderRight />
-      </template>
-    </UPageHeader>
-  </UContainer>
+  <PageHeading
+    v-if="route.meta.heading !== false"
+    :title="title"
+    :description="description"
+  >
+    <template #actions>
+      <AccountHeaderRight />
+    </template>
+  </PageHeading>
 </template>

package/dist/runtime/app/components/Account/AccountMenu.d.vue.ts

@@ -1,3 +1,12 @@
-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>;
+/**
+ * The signed-in user's menu: who is signed in, the `account.dropdown` menu (account, admin, sign out), and the
+ * colour mode under Appearance. The entry for the area you are in is left out. `block` renders it as a full-width
+ * row for a sidebar footer (the admin shell), `collapsed` shrinks that row to the avatar.
+ */
+type __VLS_Props = {
+    block?: boolean;
+    collapsed?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Account/AccountMenu.vue

@@ -1,69 +1,118 @@
 <script setup>
-import { computedAsync } from "@vueuse/core";
+const props = defineProps({
+  block: { type: Boolean, required: false },
+  collapsed: { type: Boolean, required: false }
+});
+const t = useModuleT("account");
 const { user } = useUserSession();
-const { data: dropdownItems } = useMenu("account.dropdown");
-const getFirstLetter = (name) => {
-  return String(typeof name === "string" ? name.charAt(0)?.toUpperCase() : name);
+const route = useRoute();
+const colorMode = useColorMode();
+const { localize, strip } = useLocaleLink();
+const dropdown = typeof useMenu === "function" ? useMenu("account.dropdown").data : ref([]);
+const sessionUser = computed(() => user.value);
+const displayName = computed(() => sessionUser.value?.name || sessionUser.value?.email || String(sessionUser.value?.id ?? t("title", "Account")));
+const avatar = computed(() => ({ src: sessionUser.value?.avatar || void 0, alt: displayName.value }));
+const role = computed(() => sessionUser.value?.role || void 0);
+const roleLabel = computed(() => role.value && role.value !== "user" ? role.value.charAt(0).toUpperCase() + role.value.slice(1) : void 0);
+const isHere = (to) => {
+  const target = strip(to);
+  const current = strip(route.path);
+  return current === target || target !== "/" && current.startsWith(`${target}/`);
 };
-const items = computedAsync(async () => {
-  const items2 = [];
-  if (user.value) {
-    items2.push([
-      {
-        type: "label",
-        label: `${user.value.email || user.value.name || user.value.id}`,
-        avatar: {
-          text: getFirstLetter(user.value.email || user.value.name || user.value.id)
-        },
-        slot: "label"
-      }
-    ]);
+const toItem = (item) => ({
+  label: item.label,
+  icon: item.icon,
+  to: item.to && !item.external ? localize(item.to) : item.to,
+  external: item.external,
+  replace: item.external
+});
+const appearance = (label, value, icon) => ({
+  label,
+  icon,
+  type: "checkbox",
+  checked: colorMode.preference === value,
+  onUpdateChecked: () => {
+    colorMode.preference = value;
   }
-  const role = user.value?.role;
-  const visible = (dropdownItems.value ?? []).filter((item) => {
+});
+const items = computed(() => {
+  const visible = (dropdown.value ?? []).filter((item) => {
     const roles = item.meta?.roles;
-    return !roles?.length || !!role && roles.includes(role);
+    if (roles?.length && !(role.value && roles.includes(role.value))) return false;
+    return !item.to || item.external || !isHere(item.to);
   });
-  items2.push(visible.map((item) => ({
-    label: item.label,
-    to: item.to,
-    icon: item.icon,
-    external: item.external,
-    replace: item.external
-  })));
-  return items2;
+  const last = (item) => (item.order ?? 0) >= 99;
+  return [
+    sessionUser.value ? [{ type: "label", label: displayName.value, slot: "account" }] : [],
+    visible.filter((item) => !last(item)).map(toItem),
+    [{
+      label: t("appearance.label", "Appearance"),
+      icon: colorMode.preference === "dark" ? "i-lucide-moon" : colorMode.preference === "light" ? "i-lucide-sun" : "i-lucide-monitor",
+      children: [
+        appearance(t("appearance.light", "Light"), "light", "i-lucide-sun"),
+        appearance(t("appearance.dark", "Dark"), "dark", "i-lucide-moon"),
+        appearance(t("appearance.system", "System"), "system", "i-lucide-monitor")
+      ]
+    }],
+    visible.filter(last).map(toItem)
+  ].filter((group) => group.length);
 });
 </script>
 
 <template>
   <UDropdownMenu
     :items="items"
-    :content="{ align: 'start' }"
-    :ui="{ content: 'w-48' }"
+    :content="{ align: props.block ? 'start' : 'end', side: props.block ? 'top' : 'bottom', collisionPadding: 12 }"
+    :ui="{ content: props.block && !props.collapsed ? 'w-(--reka-dropdown-menu-trigger-width) min-w-56' : 'w-56' }"
   >
-    <template #default>
-      <UButton
-        aria-label="Account Menu"
-        color="neutral"
-        variant="ghost"
-        icon="i-lucide-user"
-      />
-    </template>
-    <template #label="bindItem">
-      <LazyUUser
-        v-bind="bindItem.item"
+    <UButton
+      v-if="props.block"
+      :label="props.collapsed ? void 0 : displayName"
+      :avatar="avatar"
+      :trailing-icon="props.collapsed ? void 0 : 'i-lucide-chevrons-up-down'"
+      :square="props.collapsed"
+      :block="!props.collapsed"
+      :aria-label="t('accountMenu', 'Account menu')"
+      color="neutral"
+      variant="ghost"
+      class="data-[state=open]:bg-elevated"
+      :ui="{ trailingIcon: 'text-dimmed ms-auto', label: 'truncate' }"
+    />
+    <UButton
+      v-else
+      :avatar="avatar"
+      :aria-label="t('accountMenu', 'Account menu')"
+      color="neutral"
+      variant="ghost"
+      square
+      class="data-[state=open]:bg-elevated"
+    />
+
+    <template #account-label>
+      <UUser
+        :name="displayName"
+        :avatar="avatar"
+        size="sm"
+        :ui="{ name: 'truncate', description: 'truncate' }"
       >
-        <template #name>
-          <!--          <UBadge -->
-          <!--            v-if="user && !userHasRole(user, 'user')" -->
-          <!--            size="xs" -->
-          <!--            variant="subtle" -->
-          <!--          > -->
-          <!--            {{ upperFirst(user.role) }} -->
-          <!--          </UBadge> -->
-          <div>{{ bindItem.item?.label }}</div>
+        <template
+          v-if="roleLabel || sessionUser?.name && sessionUser?.email"
+          #description
+        >
+          <span class="flex min-w-0 items-center gap-1.5">
+            <UBadge
+              v-if="roleLabel"
+              size="xs"
+              variant="subtle"
+              :label="roleLabel"
+            />
+            <span
+              v-if="sessionUser?.name && sessionUser?.email"
+              class="truncate"
+            >{{ sessionUser.email }}</span>
+          </span>
         </template>
-      </LazyUUser>
+      </UUser>
     </template>
   </UDropdownMenu>
 </template>

package/dist/runtime/app/components/Account/AccountMenu.vue.d.ts

@@ -1,3 +1,12 @@
-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>;
+/**
+ * The signed-in user's menu: who is signed in, the `account.dropdown` menu (account, admin, sign out), and the
+ * colour mode under Appearance. The entry for the area you are in is left out. `block` renders it as a full-width
+ * row for a sidebar footer (the admin shell), `collapsed` shrinks that row to the avatar.
+ */
+type __VLS_Props = {
+    block?: boolean;
+    collapsed?: boolean;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/composables/index.d.ts

@@ -1 +1,3 @@
 export { useAccount } from './useAccount.js';
+export { useAccountNav } from './useAccountNav.js';
+export type { AccountNavItem } from './useAccountNav.js';

package/dist/runtime/app/composables/index.js

@@ -1 +1,2 @@
 export { useAccount } from "./useAccount.js";
+export { useAccountNav } from "./useAccountNav.js";

package/dist/runtime/app/composables/useAccountNav.d.ts

@@ -0,0 +1,20 @@
+/** An entry of the account navigation: an item of the `account` menu, or a configured page without the menu module. */
+export interface AccountNavItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: string;
+    to: string;
+    external?: boolean;
+}
+/**
+ * The account navigation: the items of the `account` menu (so pages other modules add show up too), or, without
+ * `@frigear-nu/menu`, the account pages enabled in `account.settings.pages`. `links` are ready for
+ * `UNavigationMenu`/`PageTabs` (localised, `active` set, the overview only active on its own path) and `current` is
+ * the item the route belongs to. Await it, so the menu is resolved before the page renders on the server.
+ */
+export declare function useAccountNav(): Promise<{
+    items: any;
+    links: any;
+    current: any;
+}>;

package/dist/runtime/app/composables/useAccountNav.js

@@ -0,0 +1,18 @@
+export async function useAccountNav() {
+  const t = useModuleT("account");
+  const pages = useRuntimeConfig().public.account?.pages;
+  const { isActive, strip } = useLocaleLink();
+  const menu = typeof useMenu === "function" ? useMenu("account") : void 0;
+  const fallback = () => [
+    { id: "account-overview", to: pages?.index, label: t("menu.overview.label", "Overview"), description: t("menu.overview.description", "A summary of your account."), icon: "i-lucide-layout-dashboard" },
+    { id: "profile", to: pages?.profile, label: t("menu.profile.label", "Profile"), description: t("menu.profile.description", "Manage your profile details and email address."), icon: "i-lucide-user-round-pen" },
+    { id: "security", to: pages?.security, label: t("menu.security.label", "Security"), description: t("menu.security.description", "Change your password and manage passkeys."), icon: "i-lucide-shield-user" },
+    { id: "api-tokens", to: pages?.apiTokens, label: t("menu.apiTokens.label", "API tokens"), description: t("menu.apiTokens.description", "Create tokens for scripts and tools."), icon: "i-lucide-key-round" },
+    { id: "documents", to: pages?.documents, label: t("menu.documents.label", "Documents"), description: t("menu.documents.description", "Handbooks and other files for you."), icon: "i-lucide-files" }
+  ].filter((item) => !!item.to);
+  const items = computed(() => menu ? (menu.data.value ?? []).filter((item) => !!item.to).map((item) => ({ id: item.id ?? item.to, label: item.label, description: item.description, icon: item.icon, to: item.to, external: item.external })) : fallback());
+  const links = useNavLinks(items, { exact: pages?.index ? [pages.index] : [] });
+  const current = computed(() => items.value.filter((item) => !item.external && isActive(item.to, { exact: item.to === pages?.index })).sort((a, b) => strip(b.to).length - strip(a.to).length)[0]);
+  if (menu) await menu;
+  return { items, links, current };
+}

package/dist/runtime/app/layouts/account.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_47: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_47) => 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>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};