@frigear-nu/ui 0.1.1 → 0.1.3

package/README.md

@@ -7,11 +7,45 @@ 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 |
 |---|---|
 | `PageHeading` | Title block of an app page: breadcrumb (array) or eyebrow line (string), `#badge`, description, meta row, `#actions` |
+| `PageSectionSwitcher` | Full-width button naming the current section, with a menu of all sections (mobile section navigation) |
 | `PageTabs` | Tabs under a heading: links (`to`, route decides) or state (`v-model` + `value`) |
 | `SectionCard` | A titled card for one section (form, key facts); `flush` for tables and lists |
 | `TableCard` | The surface a `UTable` sits in (`:ui="tableUi()"`), with `#header` and `#footer` (total, pagination) |
@@ -20,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/PageSectionSwitcher.d.vue.ts

@@ -0,0 +1,14 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+/**
+ * A full-width button naming the current section, with a menu of all sections. The narrow-screen counterpart of a
+ * vertical section navigation (`UNavigationMenu`), which does not fit beside the content on a phone. Items are links
+ * (`to`), and the one with `active` is the current section; `PageTabs` stays for tabs a page owns.
+ */
+type __VLS_Props = {
+    items: NavigationMenuItem[];
+    /** Overrides the accessible name of the button. */
+    label?: 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/PageSectionSwitcher.vue

@@ -0,0 +1,41 @@
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: true },
+  label: { type: String, required: false }
+});
+const t = useUiT("patterns");
+const current = computed(() => props.items.find((item) => item.active) ?? props.items[0]);
+const menu = computed(() => props.items.map((item) => ({
+  label: item.label,
+  icon: item.icon,
+  to: item.to,
+  target: item.target,
+  external: item.external,
+  active: item.active,
+  trailingIcon: item.active ? "i-lucide-check" : void 0
+})));
+const ariaLabel = computed(() => {
+  const name = props.label ?? t("sections", "Sections");
+  return current.value?.label ? `${name}: ${current.value.label}` : name;
+});
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="items.length"
+    :items="menu"
+    :content="{ align: 'start' }"
+    :ui="{ content: 'w-(--reka-dropdown-menu-trigger-width)' }"
+  >
+    <UButton
+      color="neutral"
+      variant="outline"
+      block
+      :icon="current?.icon"
+      trailing-icon="i-lucide-chevrons-up-down"
+      :label="current?.label"
+      :aria-label="ariaLabel"
+      :ui="{ trailingIcon: 'ms-auto text-dimmed' }"
+    />
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,14 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+/**
+ * A full-width button naming the current section, with a menu of all sections. The narrow-screen counterpart of a
+ * vertical section navigation (`UNavigationMenu`), which does not fit beside the content on a phone. Items are links
+ * (`to`), and the one with `active` is the current section; `PageTabs` stays for tabs a page owns.
+ */
+type __VLS_Props = {
+    items: NavigationMenuItem[];
+    /** Overrides the accessible name of the button. */
+    label?: 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.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,10 +1,12 @@
-export * from './useAction.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,10 +1,12 @@
-export * from "./useAction.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

@@ -0,0 +1,33 @@
+/** What the app knows about an area's last bootstrap: when it loaded and which keys it primed. */
+export interface BootstrapState {
+    at: number;
+    keys: string[];
+}
+export interface LoadBootstrapOptions {
+    /**
+     * How long (ms) a bootstrap counts as fresh: entering the area again within it makes no request. Keep it at or
+     * below the `ttl` of the composables it primes, so they always find their entry fresh. Default one minute.
+     */
+    ttl?: number;
+}
+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/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.
+ *
+ * - Server: the data goes into the payload, used by the server render and by hydration.
+ * - Hydration: the payload entries are remembered for later navigation; nothing is fetched.
+ * - Client navigation: fetches again only when the last bootstrap is older than `ttl`.
+ *
+ * Never throws: when the request fails (or leaves a key out) the composables fetch from their own endpoints.
+ */
+export declare function loadBootstrap(scope: string, options?: LoadBootstrapOptions): Promise<void>;
+/**
+ * Forget an area's bootstrap and the cache entries it primed, so the next visit loads them again. Call it when the
+ * data no longer belongs to the visitor (signing in or out).
+ */
+export declare function resetBootstrap(scope: string): void;

package/dist/runtime/composables/useBootstrap.js

@@ -0,0 +1,46 @@
+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);
+export async function loadBootstrap(scope, options = {}) {
+  const nuxtApp = useNuxtApp();
+  const state = useBootstrapState(scope);
+  const ttl = options.ttl ?? BOOTSTRAP_TTL_MS;
+  if (import.meta.client) {
+    if (nuxtApp.isHydrating && nuxtApp.payload.serverRendered) {
+      if (!state.value) return;
+      for (const key of state.value.keys) {
+        const data = nuxtApp.payload.data[key];
+        if (data !== void 0) primeCachedFetch(key, data);
+      }
+      state.value = { ...state.value, at: Date.now() };
+      return;
+    }
+    if (state.value && Date.now() - state.value.at < ttl) return;
+    const pending = inFlight.get(scope);
+    if (pending) return pending;
+  }
+  const run = async () => {
+    try {
+      const fetcher = import.meta.server ? useRequestFetch() : $fetch;
+      const data = await fetcher(BOOTSTRAP_URL, { query: { scope } });
+      nuxtApp.runWithContext(() => {
+        for (const [key, value] of Object.entries(data)) primeCachedFetch(key, value);
+      });
+      state.value = { at: Date.now(), keys: Object.keys(data) };
+    } catch (error) {
+      if (import.meta.dev) console.warn(`[ui] bootstrap "${scope}" failed, the pages load their own data:`, error);
+    }
+  };
+  if (import.meta.server) return run();
+  const promise = run().finally(() => inFlight.delete(scope));
+  inFlight.set(scope, promise);
+  return promise;
+}
+export function resetBootstrap(scope) {
+  const state = useBootstrapState(scope);
+  if (state.value?.keys.length) clearCachedFetch(state.value.keys);
+  state.value = null;
+}

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

@@ -0,0 +1,76 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from 'vue';
+import type { AsyncData, NuxtApp, NuxtError, UseFetchOptions } from 'nuxt/app';
+/** One remembered response: what `useFetch` produced (after `transform`) and when. */
+export interface CachedFetchEntry<T = unknown> {
+    at: number;
+    data: T;
+}
+export type CachedFetchStore = Record<string, CachedFetchEntry>;
+export type CachedFetchOptions<ResT, DataT = ResT> = Omit<UseFetchOptions<ResT, DataT>, 'key' | 'default' | 'getCachedData'> & {
+    /** The fetch key. Required: it names the cache entry, so composables that share data must share the key. */
+    key: MaybeRefOrGetter<string>;
+    /**
+     * How long (ms) a remembered response is reused when a component mounts again (client navigation) without asking
+     * the server. Leave it out to reuse it until `refresh()`; `0` always refetches. Either way the remembered response
+     * stays on screen while the new one loads.
+     */
+    ttl?: number;
+};
+export type CachedFetchResult<DataT> = Omit<Awaited<AsyncData<DataT | undefined, NuxtError | undefined>>, 'pending'> & {
+    /**
+     * `true` only while there is nothing to show yet: the first load of this key. Background refreshes (a stale cache,
+     * `refresh()`) keep the last data on screen and leave it `false`. Named `loading` so it does not shadow Nuxt's
+     * deprecated `pending` (which is `status === 'pending'`).
+     */
+    loading: ComputedRef<boolean>;
+};
+/** The shared, per-app cache behind `useCachedFetch`. Only the client writes to it, so it adds nothing to the payload. */
+export declare const useCachedFetchStore: () => Ref<CachedFetchStore>;
+/**
+ * Remember a response for `key` as if `useCachedFetch` had fetched it, e.g. data loaded ahead of time (a warm-up, an
+ * aggregated request such as `loadBootstrap`). `data` must have the shape the composable's `transform` produces.
+ *
+ * On the server it goes into this request's payload under `key`, where `useCachedFetch` finds it during server
+ * rendering (no request of its own) and the client finds it while hydrating. Prime before the components using
+ * `key` set up (a route middleware), so they see it.
+ */
+export declare function primeCachedFetch<T>(key: string, data: T): void;
+/**
+ * Forget remembered responses so the next mount fetches again: one key, the keys a predicate accepts, or all of them.
+ * Call it when the data no longer belongs to the visitor (signing out).
+ */
+export declare function clearCachedFetch(keys?: string | string[] | ((key: string) => boolean)): void;
+/**
+ * Where `useCachedFetch` gets data without a request, in this order:
+ * 1. while hydrating, the server's response from the payload (and it is remembered for later mounts); on the server,
+ *    data primed for this request (`primeCachedFetch`);
+ * 2. on a mount (`cause: 'initial'`), the remembered response while it is younger than `ttl`;
+ * 3. otherwise nothing, so `useFetch` fetches. Refreshes (`refresh()`, `refreshNuxtData`, watchers) always fetch.
+ *
+ * Exported for tests; use `useCachedFetch`.
+ */
+export declare function cachedFetchData(key: string, nuxtApp: Pick<NuxtApp, 'isHydrating' | 'payload'>, cause: string, cache: CachedFetchStore, ttl: number | undefined, now?: number, server?: boolean): {
+    data: unknown;
+    remember: boolean;
+} | undefined;
+/**
+ * `useFetch` whose data survives client navigation and that is awaitable in pages.
+ *
+ * Nuxt drops `useFetch` data once the last component using a key unmounts, so going back to a page blanked it and
+ * showed the empty state until a refetch landed. `useCachedFetch` remembers each response by `key` (see
+ * `cachedFetchData` for the order) and shows the remembered one at once, refetching in the background when it is
+ * older than `ttl`.
+ *
+ * - `data` is `undefined` until the first response; there is no `default`, so a failed request never looks like an
+ *   empty result. Check `error` (and `status`) and derive lists with `?? []`.
+ * - `loading` is `true` only while nothing is on screen yet: render a skeleton for it, never the empty state.
+ * - `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/me/tickets', {
+ *   key: 'events:tickets:mine',
+ *   ttl: 60_000,
+ * })
+ * ```
+ */
+export declare function useCachedFetch<ResT, DataT = ResT>(request: string | Ref<string> | (() => string), options: CachedFetchOptions<ResT, DataT>): CachedFetchResult<DataT> & Promise<CachedFetchResult<DataT>>;

package/dist/runtime/composables/useCachedFetch.js

@@ -0,0 +1,61 @@
+const STATE_KEY = "ui:cached-fetch";
+export const useCachedFetchStore = () => useState(STATE_KEY, () => ({}));
+export function primeCachedFetch(key, data) {
+  if (import.meta.server) {
+    useNuxtApp().payload.data[key] = data;
+    return;
+  }
+  useCachedFetchStore().value[key] = markRaw({ at: Date.now(), data });
+}
+export function clearCachedFetch(keys) {
+  const cache = useCachedFetchStore();
+  const drops = keys === void 0 ? () => true : typeof keys === "function" ? keys : (key) => (Array.isArray(keys) ? keys : [keys]).includes(key);
+  cache.value = Object.fromEntries(Object.entries(cache.value).filter(([key]) => !drops(key)));
+}
+export function cachedFetchData(key, nuxtApp, cause, cache, ttl, now = Date.now(), server = !!import.meta.server) {
+  if ((nuxtApp.isHydrating || server && cause === "initial") && nuxtApp.payload.data[key] !== void 0) {
+    return { data: nuxtApp.payload.data[key], remember: true };
+  }
+  if (cause !== "initial") return void 0;
+  const entry = cache[key];
+  if (!entry) return void 0;
+  if (ttl !== void 0 && now - entry.at >= ttl) return void 0;
+  return { data: entry.data, remember: false };
+}
+export function useCachedFetch(request, options) {
+  const cache = useCachedFetchStore();
+  const { key, ttl, transform, ...rest } = options;
+  const remember = (name, data) => {
+    if (!import.meta.server) cache.value[name] = markRaw({ at: Date.now(), data });
+  };
+  const fetched = useFetch(request, {
+    ...rest,
+    key,
+    // No caller default: the remembered (possibly stale) response, so a refetch never blanks the screen, or nothing.
+    default: () => cache.value[toValue(key)]?.data,
+    getCachedData: (name, nuxtApp, ctx) => {
+      const hit = cachedFetchData(name, nuxtApp, ctx.cause, cache.value, ttl);
+      if (hit?.remember) remember(name, hit.data);
+      return hit?.data;
+    },
+    transform: async (input) => {
+      const output = transform ? await transform(input) : input;
+      remember(toValue(key), output);
+      return output;
+    }
+  });
+  const result = {
+    data: fetched.data,
+    status: fetched.status,
+    error: fetched.error,
+    refresh: fetched.refresh,
+    execute: fetched.execute,
+    clear: () => {
+      const name = toValue(key);
+      cache.value = Object.fromEntries(Object.entries(cache.value).filter(([entry]) => entry !== name));
+      fetched.clear();
+    },
+    loading: computed(() => fetched.status.value === "pending" && fetched.data.value === void 0)
+  };
+  return Object.assign(Promise.resolve(fetched).then(() => result), result);
+}

package/dist/runtime/i18n/lang/da.json

@@ -45,6 +45,7 @@
     "edit": "Redigér",
     "delete": "Slet",
     "confirm": "Bekræft",
+    "sections": "Sektioner",
     "breadcrumb": "Brødkrummesti",
     "sortBy": "Sortér efter {column}",
     "sortedAsc": "Sortér efter {column}, nu stigende",

package/dist/runtime/i18n/lang/en.json

@@ -45,6 +45,7 @@
     "edit": "Edit",
     "delete": "Delete",
     "confirm": "Confirm",
+    "sections": "Sections",
     "breadcrumb": "Breadcrumb",
     "sortBy": "Sort by {column}",
     "sortedAsc": "Sort by {column}, now ascending",

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.1",
+  "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,17 +34,17 @@
     "dist"
   ],
   "dependencies": {
-    "@frigear-nu/module-kit": "1.1.1",
+    "@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.1",
+    "@frigear-nu/eslint-config": "0.1.3",
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.6.1",
     "@nuxt/test-utils": "^4.3.2",
-    "@nuxt/ui": "^4.11.2",
+    "@nuxt/ui": "^4.12.0",
     "eslint": "^10.12.0",
     "monaco-editor": "^0.56.0",
     "nuxt": "^4.6.1",
@@ -55,7 +55,7 @@
     "vue-tsc": "^3.3.11"
   },
   "peerDependencies": {
-    "@nuxt/ui": "^4.11.2",
+    "@nuxt/ui": "^4.12.0",
     "nuxt": "^4.6.1",
     "vue": "3.x",
     "monaco-editor": "^0.56.0",