@frigear-nu/ui 0.1.2 → 0.1.3

package/README.md

@@ -7,6 +7,39 @@ card uses the same `bg-elevated/50 ring ring-default rounded-lg` surface and the
 Built-in strings come from `@nuxtjs/i18n` when installed (`patterns.*`, `actions.*`; `en` and `da` included), with
 English fallbacks; every one of them can be overridden by a prop.
 
+## App shell
+
+`AppShell` is the dashboard shell of the app areas (admin, account); an area layout wraps its pages in it:
+
+```vue
+<AppShell
+  id="admin"
+  :title="t('title', 'Administration')"
+  home="/admin"
+  :navigation="navigation"
+  :nav-label="t('nav.label', 'Admin navigation')"
+  :search-groups="searchGroups"
+  :back-to="{ to: '/', label: t('backToSite', 'Back to the site') }"
+>
+  <template #sidebar-footer="{ collapsed }">
+    <AccountMenu block :collapsed="collapsed" />
+  </template>
+  <slot />
+</AppShell>
+```
+
+- `id` keys the `dashboard-sidebar-<id>` cookie (collapse, width); one per area. `home` and `backTo.to` are raw
+  paths, the shell adds the locale prefix.
+- `navigation` is a list of `UNavigationMenu` groups (`type: 'label'` rows head a group). The navbar shows a muted
+  eyebrow, `title › active section`, never a heading: the page renders the only `<h1>` through `PageHeading`.
+- `searchGroups` adds the ⌘K button and palette (without the colour-mode group); leave it out for no search.
+- The body is centred at `max-w-7xl`; `wide` or `definePageMeta({ wide: true })` makes it full width.
+- The document title defaults to the active section (else `title`); a page's own `useHead` wins.
+- Slots: `brand`, `sidebar-top`, `sidebar-footer` (all get `{ collapsed }`), `navbar-left` (replaces the eyebrow),
+  `navbar-right` (defaults to `LanguageSelect` when the app has one and more than one locale), default.
+- The light app theme is utility classes on the shell (`bg-default` body, `bg-elevated/25` sidebar, a
+  primary-coloured brand tile); hosts can target `[data-area=app]`.
+
 ## Page patterns
 
 | Component | Use |
@@ -21,6 +54,7 @@ English fallbacks; every one of them can be overridden by a prop.
 | `ListCard` | A short divided list with a "View all" link |
 | `DescriptionList` | Label/value rows; empty values read "Not set"; slot per `key` |
 | `PageToolbar` | Search and filters above a table, `#right` for counts |
+| `FormRow` | A `UFormField` as a settings row (label and hint left, control right, stacked below `sm`) for inline forms in a `SectionCard`; parent `divide-y divide-default` |
 | `FormSlideover` | Create/edit form in a slideover with Cancel + submit (`form="<formId>"`); works with `useOverlay` |
 | `ConfirmDialog` / `useConfirmDialog()` | Confirmation before destructive actions |
 

package/dist/runtime/components/global/AppShell.d.vue.ts

@@ -0,0 +1,29 @@
+import type { AppShellProps } from '../../types.js';
+type __VLS_Slots = {
+    /** Replaces the brand link in the sidebar header. */
+    'brand'?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+    /** Between the search button and the navigation. */
+    'sidebar-top'?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+    /** Below the `backTo` link, e.g. the account menu. */
+    'sidebar-footer'?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+    /** Replaces the navbar eyebrow (the collapse button stays). */
+    'navbar-left'?: () => unknown;
+    /** Right side of the navbar; defaults to `LanguageSelect` when there is more than one locale. */
+    'navbar-right'?: () => unknown;
+    'default'?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & 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/components/global/AppShell.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { useLocaleLink } from "../../composables/useLocaleLink";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  home: { type: String, required: true },
+  icon: { type: String, required: false },
+  navigation: { type: Array, required: true },
+  navLabel: { type: String, required: true },
+  searchGroups: { type: Array, required: false },
+  searchLabel: { type: String, required: false },
+  backTo: { type: Object, required: false },
+  wide: { type: Boolean, required: false }
+});
+defineSlots();
+const route = useRoute();
+const { localize } = useLocaleLink();
+const resolvedLanguageSelect = resolveComponent("LanguageSelect");
+const languageSelect = typeof resolvedLanguageSelect === "string" ? void 0 : resolvedLanguageSelect;
+const publicConfig = useRuntimeConfig().public ?? {};
+const nuxtApp = useNuxtApp();
+const multiLocale = typeof publicConfig.multiLocale === "boolean" ? publicConfig.multiLocale : (nuxtApp.$i18n?.locales?.value?.length ?? 0) > 1;
+const section = computed(() => {
+  const items = props.navigation.flat().flatMap((item) => [item, ...item.children ?? []]);
+  return items.find((item) => item.type !== "label" && item.active === true)?.label;
+});
+const crumb = computed(() => section.value && section.value !== props.title ? section.value : void 0);
+const isWide = computed(() => props.wide || route.meta.wide === true);
+useHead({ title: () => section.value ?? props.title }, { tagPriority: "low" });
+</script>
+
+<template>
+  <UDashboardGroup
+    unit="rem"
+    data-area="app"
+    class="bg-default"
+  >
+    <UDashboardSidebar
+      :id="id"
+      collapsible
+      resizable
+      class="bg-elevated/25"
+      :ui="{
+  header: 'border-b border-default',
+  footer: 'border-t border-default flex-col items-stretch gap-1'
+}"
+    >
+      <template #header="{ collapsed }">
+        <slot
+          name="brand"
+          :collapsed="collapsed"
+        >
+          <NuxtLink
+            :to="localize(home)"
+            :aria-label="collapsed ? title : void 0"
+            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="icon ?? 'i-lucide-layout-dashboard'"
+                class="size-4"
+              />
+            </span>
+            <span
+              v-if="!collapsed"
+              class="text-highlighted truncate font-semibold"
+            >{{ title }}</span>
+          </NuxtLink>
+        </slot>
+      </template>
+
+      <template #default="{ collapsed }">
+        <UDashboardSearchButton
+          v-if="searchGroups"
+          :collapsed="collapsed"
+          :label="searchLabel"
+          class="bg-transparent ring-default"
+        />
+
+        <slot
+          name="sidebar-top"
+          :collapsed="collapsed"
+        />
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="navigation"
+          orientation="vertical"
+          tooltip
+          :aria-label="navLabel"
+        />
+      </template>
+
+      <template
+        v-if="backTo || $slots['sidebar-footer']"
+        #footer="{ collapsed }"
+      >
+        <UButton
+          v-if="backTo"
+          :to="localize(backTo.to)"
+          color="neutral"
+          variant="ghost"
+          :icon="backTo.icon ?? 'i-lucide-arrow-left'"
+          :label="collapsed ? void 0 : backTo.label"
+          :aria-label="collapsed ? backTo.label : void 0"
+          :square="collapsed"
+          block
+          class="justify-start"
+        />
+        <slot
+          name="sidebar-footer"
+          :collapsed="collapsed"
+        />
+      </template>
+    </UDashboardSidebar>
+
+    <UDashboardSearch
+      v-if="searchGroups"
+      :groups="searchGroups"
+      :color-mode="false"
+    />
+
+    <UDashboardPanel :id="`${id}-main`">
+      <template #header>
+        <UDashboardNavbar
+          class="bg-default/75 backdrop-blur"
+          :ui="{ right: 'gap-2' }"
+        >
+          <template #left>
+            <UDashboardSidebarCollapse />
+            <slot name="navbar-left">
+              <p
+                data-slot="eyebrow"
+                class="flex min-w-0 items-center gap-1.5 text-sm"
+              >
+                <span
+                  class="truncate"
+                  :class="crumb ? 'text-muted' : 'text-highlighted font-medium'"
+                >{{ title }}</span>
+                <template v-if="crumb">
+                  <UIcon
+                    name="i-lucide-chevron-right"
+                    class="text-dimmed size-4 shrink-0"
+                  />
+                  <span class="text-highlighted truncate font-medium">{{ crumb }}</span>
+                </template>
+              </p>
+            </slot>
+          </template>
+          <template #right>
+            <slot name="navbar-right">
+              <component
+                :is="languageSelect"
+                v-if="languageSelect && multiLocale"
+              />
+            </slot>
+          </template>
+        </UDashboardNavbar>
+      </template>
+
+      <template #body>
+        <div
+          class="mx-auto w-full"
+          :class="isWide ? '' : 'max-w-7xl'"
+        >
+          <slot />
+        </div>
+      </template>
+    </UDashboardPanel>
+  </UDashboardGroup>
+</template>

package/dist/runtime/components/global/AppShell.vue.d.ts

@@ -0,0 +1,29 @@
+import type { AppShellProps } from '../../types.js';
+type __VLS_Slots = {
+    /** Replaces the brand link in the sidebar header. */
+    'brand'?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+    /** Between the search button and the navigation. */
+    'sidebar-top'?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+    /** Below the `backTo` link, e.g. the account menu. */
+    'sidebar-footer'?: (props: {
+        collapsed: boolean;
+    }) => unknown;
+    /** Replaces the navbar eyebrow (the collapse button stays). */
+    'navbar-left'?: () => unknown;
+    /** Right side of the navbar; defaults to `LanguageSelect` when there is more than one locale. */
+    'navbar-right'?: () => unknown;
+    'default'?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & 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/components/global/FormRow.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => 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;
+    };
+};

package/dist/runtime/components/global/FormRow.vue

@@ -0,0 +1,32 @@
+<script setup>
+defineOptions({ inheritAttrs: false });
+const ROW_UI = {
+  root: "gap-x-8 gap-y-2 py-4 first:pt-0 last:pb-0 max-sm:flex-col max-sm:items-stretch",
+  wrapper: "sm:w-1/3 sm:max-w-64 sm:shrink-0",
+  container: "min-w-0 flex-1"
+};
+const attrs = useAttrs();
+const ui = computed(() => {
+  const own = attrs.ui ?? {};
+  const slots = /* @__PURE__ */ new Set([...Object.keys(ROW_UI), ...Object.keys(own)]);
+  return Object.fromEntries([...slots].map((slot) => [slot, [ROW_UI[slot], own[slot]].filter(Boolean).join(" ")]));
+});
+</script>
+
+<template>
+  <UFormField
+    v-bind="$attrs"
+    orientation="horizontal"
+    :ui="ui"
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      #[slot]="slotProps"
+    >
+      <slot
+        :name="slot"
+        v-bind="slotProps ?? {}"
+      />
+    </template>
+  </UFormField>
+</template>

package/dist/runtime/components/global/FormRow.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_10: string, __VLS_11: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => 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;
+    };
+};

package/dist/runtime/components/global/StatusBadge.d.vue.ts

@@ -0,0 +1,20 @@
+import type { BadgeProps } from '@nuxt/ui';
+import type { StatusColor } from '../../types.js';
+/**
+ * A status as a subtle badge: `<StatusBadge :status="row.status" />`. The colour comes from `statusColor` (green
+ * for done or live states, amber for states that need attention, red for failed, neutral otherwise); `colors`
+ * overrides single statuses (`{ archived: 'warning' }`). `label` defaults to the status. Renders nothing when
+ * there is neither a status nor a label.
+ */
+type __VLS_Props = {
+    status: string | null | undefined;
+    /** The text shown; defaults to `status`. Pass a translated label here. */
+    label?: string;
+    /** Colour overrides keyed by lower-case status, on top of the defaults. */
+    colors?: Record<string, StatusColor>;
+    size?: BadgeProps['size'];
+    icon?: string;
+};
+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/components/global/StatusBadge.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { statusColor } from "../../utils/status";
+const props = defineProps({
+  status: { type: null, required: true },
+  label: { type: String, required: false },
+  colors: { type: Object, required: false },
+  size: { type: null, required: false },
+  icon: { type: String, required: false }
+});
+const text = computed(() => props.label ?? props.status ?? "");
+const color = computed(() => statusColor(props.status, props.colors));
+</script>
+
+<template>
+  <UBadge
+    v-if="text"
+    variant="subtle"
+    :color="color"
+    :label="text"
+    :icon="icon"
+    :size="size"
+  />
+</template>

package/dist/runtime/components/global/StatusBadge.vue.d.ts

@@ -0,0 +1,20 @@
+import type { BadgeProps } from '@nuxt/ui';
+import type { StatusColor } from '../../types.js';
+/**
+ * A status as a subtle badge: `<StatusBadge :status="row.status" />`. The colour comes from `statusColor` (green
+ * for done or live states, amber for states that need attention, red for failed, neutral otherwise); `colors`
+ * overrides single statuses (`{ archived: 'warning' }`). `label` defaults to the status. Renders nothing when
+ * there is neither a status nor a label.
+ */
+type __VLS_Props = {
+    status: string | null | undefined;
+    /** The text shown; defaults to `status`. Pass a translated label here. */
+    label?: string;
+    /** Colour overrides keyed by lower-case status, on top of the defaults. */
+    colors?: Record<string, StatusColor>;
+    size?: BadgeProps['size'];
+    icon?: string;
+};
+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/components/global/TableCard.d.vue.ts

@@ -1,24 +1,29 @@
 /**
- * The surface a list table sits in: `<TableCard><UTable :ui="tableUi()" … /></TableCard>`. `#header` sits above
- * the table (filters, a title), `#footer` below it (`TablePagination`). A surface only, so the table keeps its
- * typed slots.
+ * The surface a list table sits in: `<TableCard><UTable :ui="tableUi()" … /></TableCard>`. `title`/`description`
+ * (or `#header`) and `#actions` form a header row like `SectionCard`'s, for tables that sit in a tab or a detail
+ * page. `#header` replaces the title block (filters above the table).
+ * `#footer` sits below the table (`TablePagination`). A surface only, so the table keeps its typed slots.
  *
  * `loading` is the first load (skeleton rows, nothing to show yet); `refreshing` is every load after that: the
  * current rows stay and are dimmed until the next ones arrive, so paging, sorting and filtering do not flash.
  */
 type __VLS_Props = {
+    title?: string;
+    description?: string;
     /** Shows skeleton rows instead of the default slot. */
     loading?: boolean;
     /** Dims the rows on screen while new ones load. */
     refreshing?: boolean;
 };
-declare var __VLS_1: {}, __VLS_18: {}, __VLS_20: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    actions?: (props: typeof __VLS_3) => any;
 } & {
-    footer?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    footer?: (props: typeof __VLS_22) => 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/components/global/TableCard.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { surfaceClass } from "../../utils/surface";
 defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
   loading: { type: Boolean, required: false },
   refreshing: { type: Boolean, required: false }
 });
@@ -12,10 +14,33 @@ defineProps({
     :aria-busy="loading || refreshing ? 'true' : void 0"
   >
     <div
-      v-if="$slots.header"
-      class="border-default flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3"
+      v-if="title || description || $slots.header || $slots.actions"
+      class="border-default flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3.5"
     >
-      <slot name="header" />
+      <slot name="header">
+        <div class="flex min-w-0 items-center gap-2">
+          <div class="min-w-0">
+            <h2
+              v-if="title"
+              class="text-highlighted text-sm font-semibold"
+            >
+              {{ title }}
+            </h2>
+            <p
+              v-if="description"
+              class="text-muted text-sm"
+            >
+              {{ description }}
+            </p>
+          </div>
+        </div>
+      </slot>
+      <div
+        v-if="$slots.actions"
+        class="flex items-center gap-2"
+      >
+        <slot name="actions" />
+      </div>
     </div>
     <div
       v-if="loading"

package/dist/runtime/components/global/TableCard.vue.d.ts

@@ -1,24 +1,29 @@
 /**
- * The surface a list table sits in: `<TableCard><UTable :ui="tableUi()" … /></TableCard>`. `#header` sits above
- * the table (filters, a title), `#footer` below it (`TablePagination`). A surface only, so the table keeps its
- * typed slots.
+ * The surface a list table sits in: `<TableCard><UTable :ui="tableUi()" … /></TableCard>`. `title`/`description`
+ * (or `#header`) and `#actions` form a header row like `SectionCard`'s, for tables that sit in a tab or a detail
+ * page. `#header` replaces the title block (filters above the table).
+ * `#footer` sits below the table (`TablePagination`). A surface only, so the table keeps its typed slots.
  *
  * `loading` is the first load (skeleton rows, nothing to show yet); `refreshing` is every load after that: the
  * current rows stay and are dimmed until the next ones arrive, so paging, sorting and filtering do not flash.
  */
 type __VLS_Props = {
+    title?: string;
+    description?: string;
     /** Shows skeleton rows instead of the default slot. */
     loading?: boolean;
     /** Dims the rows on screen while new ones load. */
     refreshing?: boolean;
 };
-declare var __VLS_1: {}, __VLS_18: {}, __VLS_20: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    actions?: (props: typeof __VLS_3) => any;
 } & {
-    footer?: (props: typeof __VLS_20) => any;
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    footer?: (props: typeof __VLS_22) => 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/composables/index.d.ts

@@ -1,12 +1,12 @@
-export * from './useAction.ts.js';
-export * from './useBootstrap.ts.js';
-export * from './useCachedFetch.ts.js';
-export * from './useConfirmDialog.ts.js';
-export * from './useCopyToClipboard.ts.js';
-export * from './useErrorToast.ts.js';
-export * from './useFormat.ts.js';
-export * from './useLocaleLink.ts.js';
-export * from './useNavLinks.ts.js';
-export * from './useTableQuery.ts.js';
-export * from './useTableSort.ts.js';
-export * from './useTranslatedLocales.ts.js';
+export * from './useAction.js';
+export * from './useBootstrap.js';
+export * from './useCachedFetch.js';
+export * from './useConfirmDialog.js';
+export * from './useCopyToClipboard.js';
+export * from './useErrorToast.js';
+export * from './useFormat.js';
+export * from './useLocaleLink.js';
+export * from './useNavLinks.js';
+export * from './useTableQuery.js';
+export * from './useTableSort.js';
+export * from './useTranslatedLocales.js';

package/dist/runtime/composables/index.js

@@ -1,12 +1,12 @@
-export * from "./useAction.ts";
-export * from "./useBootstrap.ts";
-export * from "./useCachedFetch.ts";
-export * from "./useConfirmDialog.ts";
-export * from "./useCopyToClipboard.ts";
-export * from "./useErrorToast.ts";
-export * from "./useFormat.ts";
-export * from "./useLocaleLink.ts";
-export * from "./useNavLinks.ts";
-export * from "./useTableQuery.ts";
-export * from "./useTableSort.ts";
-export * from "./useTranslatedLocales.ts";
+export * from "./useAction.js";
+export * from "./useBootstrap.js";
+export * from "./useCachedFetch.js";
+export * from "./useConfirmDialog.js";
+export * from "./useCopyToClipboard.js";
+export * from "./useErrorToast.js";
+export * from "./useFormat.js";
+export * from "./useLocaleLink.js";
+export * from "./useNavLinks.js";
+export * from "./useTableQuery.js";
+export * from "./useTableSort.js";
+export * from "./useTranslatedLocales.js";

package/dist/runtime/composables/useBootstrap.d.ts

@@ -14,7 +14,7 @@ export declare const BOOTSTRAP_TTL_MS: number;
 /** The last bootstrap of `scope` (`null` before the first, after `resetBootstrap` or when it failed). */
 export declare const useBootstrapState: (scope: string) => any;
 /**
- * Load an area's user-scoped data in one request (`GET /api/_bootstrap?scope=<scope>`, served by `@frigear-nu/auth`)
+ * Load an area's user-scoped data in one request (`GET /api/auth/bootstrap?scope=<scope>`, served by `@frigear-nu/auth`)
  * and prime the `useCachedFetch` entry of every key it returns, so the modules' composables (`useMyTickets()`,
  * `useSubscription()`, ...) render without a request of their own. Call it from a route middleware of the area: it
  * runs before the page's components set up, on the server and on every client navigation.

package/dist/runtime/composables/useBootstrap.js

@@ -1,5 +1,6 @@
 import { clearCachedFetch, primeCachedFetch } from "./useCachedFetch.js";
 export const BOOTSTRAP_TTL_MS = 60 * 1e3;
+const BOOTSTRAP_URL = "/api/auth/bootstrap";
 const stateKey = (scope) => `ui:bootstrap:${scope}`;
 const inFlight = /* @__PURE__ */ new Map();
 export const useBootstrapState = (scope) => useState(stateKey(scope), () => null);
@@ -24,7 +25,7 @@ export async function loadBootstrap(scope, options = {}) {
   const run = async () => {
     try {
       const fetcher = import.meta.server ? useRequestFetch() : $fetch;
-      const data = await fetcher("/api/_bootstrap", { query: { scope } });
+      const data = await fetcher(BOOTSTRAP_URL, { query: { scope } });
       nuxtApp.runWithContext(() => {
         for (const [key, value] of Object.entries(data)) primeCachedFetch(key, value);
       });

package/dist/runtime/composables/useCachedFetch.d.ts

@@ -67,7 +67,7 @@ export declare function cachedFetchData(key: string, nuxtApp: Pick<NuxtApp, 'isH
  * - `await` it in pages so SSR renders with data; in a widget, use it without `await` and render from `loading`.
  *
  * ```ts
- * const { data, error, loading, refresh } = await useCachedFetch<TicketDto[]>('/api/events/tickets/me', {
+ * const { data, error, loading, refresh } = await useCachedFetch<TicketDto[]>('/api/events/me/tickets', {
  *   key: 'events:tickets:mine',
  *   ttl: 60_000,
  * })

package/dist/runtime/types.d.ts

@@ -1,4 +1,4 @@
-import type { NavigationMenuItem } from '@nuxt/ui';
+import type { CommandPaletteGroup, NavigationMenuItem } from '@nuxt/ui';
 /** A row of `DescriptionList`. Without `value` the slot named after `key` (or `label`) renders it. */
 export interface DescriptionItem {
     key?: string;
@@ -32,3 +32,33 @@ export interface ActionOptions {
     /** Toast title shown when the action failed; defaults to "Something went wrong.". */
     error?: string;
 }
+/** The sidebar footer link of `AppShell` (e.g. "Back to the site"). `to` is a raw path; the shell localises it. */
+export interface AppShellBackTo {
+    to: string;
+    label: string;
+    /** Defaults to `i-lucide-arrow-left`. */
+    icon?: string;
+}
+/** Props of `AppShell`, the dashboard shell of the app areas (admin, account). */
+export interface AppShellProps {
+    /** Unique per area: the cookie keys `dashboard-sidebar-<id>` (collapse, width) and the panel id `<id>-main`. */
+    id: string;
+    /** Brand label in the sidebar, first part of the navbar eyebrow and the default document title. */
+    title: string;
+    /** Raw path the brand links to; the shell localises it. */
+    home: string;
+    /** Icon of the brand tile. Defaults to `i-lucide-layout-dashboard`. */
+    icon?: string;
+    /** Navigation groups, one `UNavigationMenu` list each; `type: 'label'` rows head a group. */
+    navigation: NavigationMenuItem[][];
+    /** `aria-label` of the navigation (e.g. "Admin navigation"). */
+    navLabel: string;
+    /** Groups of the ⌘K palette. Without them there is no search button and no palette. */
+    searchGroups?: CommandPaletteGroup[];
+    /** Label of the search button. */
+    searchLabel?: string;
+    /** A link in the sidebar footer, above `#sidebar-footer`. */
+    backTo?: AppShellBackTo;
+    /** Full-width body instead of `max-w-7xl`; pages can also ask with `definePageMeta({ wide: true })`. */
+    wide?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frigear-nu/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Shared UI components and composables for Frigear Nuxt applications, built on Nuxt UI.",
   "license": "MIT",
   "homepage": "https://docs.frigear.dev/modules/ui",
@@ -34,13 +34,13 @@
     "dist"
   ],
   "dependencies": {
-    "@frigear-nu/module-kit": "1.1.2",
+    "@frigear-nu/module-kit": "1.1.3",
     "@nuxt/kit": "^4.6.1",
     "@vueuse/core": "^13.5.0",
     "defu": "^6.1.4"
   },
   "devDependencies": {
-    "@frigear-nu/eslint-config": "0.1.2",
+    "@frigear-nu/eslint-config": "0.1.3",
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.6.1",
     "@nuxt/test-utils": "^4.3.2",