@frigear-nu/ui 0.0.8 → 0.1.0

package/README.md

@@ -1,6 +1,50 @@
 # @frigear-nu/ui
 
-Shared UI components for Frigear Nuxt applications.
+Shared UI components, composables and helpers for Frigear Nuxt applications, built on Nuxt UI. Registers its
+components globally (no prefix) and auto-imports its composables and helpers. It brings patterns, not a theme: every
+card uses the same `bg-elevated/50 ring ring-default rounded-lg` surface and the host's Nuxt UI colours.
 
+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.
 
-[Playground](./playground)
+## Page patterns
+
+| Component | Use |
+|---|---|
+| `PageHeading` | Title block of an app page: breadcrumb (array) or eyebrow line (string), `#badge`, description, meta row, `#actions` |
+| `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) |
+| `RowMenu` | The `⋯` menu of a table row or heading; order Open → edits → destructive group |
+| `StatCard` | A number with a label, tinted icon and hint; links to its list with `to` |
+| `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 |
+| `FormSlideover` | Create/edit form in a slideover with Cancel + submit (`form="<formId>"`); works with `useOverlay` |
+| `ConfirmDialog` / `useConfirmDialog()` | Confirmation before destructive actions |
+
+| Composable | Use |
+|---|---|
+| `useAction()` | `{ busy, run(fn, { success?, error? }) }`: toasts success, toasts and swallows errors |
+| `useErrorToast()` | `(e, title?) => void`: an error as a red toast |
+| `useCopyToClipboard()` | `{ copy(text, message?) }` with a "Copied" toast |
+| `useFormat()` | `{ date, dateTime, time, dateRange, money }` in the active locale and the app time zone (`appConfig.frigearUi.timeZone`, e.g. `Europe/Copenhagen`), so server and client render the same text |
+| `useLocaleLink()` | `{ localize, strip, isActive }`: locale-prefix aware paths (identity without i18n) |
+| `useNavLinks(items, { exact })` | Menu items to `UNavigationMenu` links with localised `to` and `active` |
+
+| Helper (`@frigear-nu/ui/utils`) | Use |
+|---|---|
+| `errorMessage(e, fallback)`, `errorToToast(e, overrides?)` | The useful message of a `$fetch`/`createError` error |
+| `formatDate`, `formatDateTime`, `formatTime`, `formatDateRange` | `Intl` date formatting (`value, locale?, options?`) |
+| `statusColor(status, overrides?)` | Badge colour of a status (published/active/paid → success, pending → warning, failed → error) |
+| `stripLocale(path, codes)` | A path without its `/<locale>` prefix |
+| `surfaceClass`, `tableUi(overrides?)` | The card surface and a `UTable` `:ui` for `TableCard` |
+
+Types (`DescriptionItem`, `PageTabItem`, `StatusColor`, …) are exported from `@frigear-nu/ui/types`.
+
+## Inputs
+
+`CurrencyInput`, `MoneyInput`, `DateInput`, `IntervalInput`, `TagInput`, `UrlInput`, `IconInput`, `SwitchToggle`,
+`MarkdownTextarea`, `TranslatedInput`; `MonacoCodeEditor` only when the host installs `nuxt-monaco-editor`.
+
+See the [documentation](../../apps/docs/content/4.modules/17.ui.md) and the [playground](./playground).

package/dist/module.mjs

@@ -1,4 +1,5 @@
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { createResolver, defineNuxtModule, addComponentsDir, hasNuxtModule, addImportsDir } from '@nuxt/kit';
+import { registerTailwindSource } from '@frigear-nu/module-kit/utils';
 
 const defaultI18nConfig = (resolver) => {
   const langDir = resolver.resolve("./runtime/i18n/lang");
@@ -23,23 +24,25 @@ const module$1 = defineNuxtModule({
   },
   moduleDependencies: {
     "@nuxt/ui": {},
-    "nuxt-monaco-editor": {},
+    "@frigear-nu/module-kit": {},
+    // Only needed for `MonacoCodeEditor`, which is registered when the host installs `nuxt-monaco-editor` itself.
+    "nuxt-monaco-editor": {
+      optional: true
+    },
     "@nuxtjs/i18n": {
       optional: true
     }
   },
-  setup(_options, _nuxt) {
-    addComponentsDir({
-      path: resolver.resolve("./runtime/components/global"),
-      global: true,
-      prefix: ""
-    });
+  setup(_options, nuxt) {
+    registerTailwindSource(nuxt, resolver.resolve("./runtime"));
     addComponentsDir({
       path: resolver.resolve("./runtime/components"),
       prefix: "",
-      ignore: ["global/**"]
+      pathPrefix: false,
+      ignore: hasNuxtModule("nuxt-monaco-editor", nuxt) ? [] : ["**/MonacoCodeEditor.vue"]
     });
     addImportsDir(resolver.resolve("./runtime/composables"));
+    addImportsDir(resolver.resolve("./runtime/utils"));
   },
   hooks: {
     "i18n:registerModule": (register) => {

package/dist/runtime/components/ConfirmDialog.d.vue.ts

@@ -4,6 +4,7 @@ interface ConfirmDialogProps {
     dismissible?: boolean;
     confirmText?: string;
     cancelText?: string;
+    /** Styles the confirm button as destructive (red). */
     destructive?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<ConfirmDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/ConfirmDialog.vue

@@ -8,6 +8,8 @@ defineProps({
   destructive: { type: Boolean, required: false }
 });
 const emits = defineEmits(["close"]);
+const t = useUiT("patterns");
+const actions = useUiT("actions");
 </script>
 
 <template>
@@ -19,13 +21,13 @@ const emits = defineEmits(["close"]);
   >
     <template #footer>
       <UButton
-        :label="cancelText || 'Cancel'"
+        :label="cancelText || actions('cancel', 'Cancel')"
         color="neutral"
         variant="outline"
         @click="emits('close', false)"
       />
       <UButton
-        :label="confirmText || 'Confirm'"
+        :label="confirmText || t('confirm', 'Confirm')"
         :color="destructive ? 'error' : 'neutral'"
         @click="emits('close', true)"
       />

package/dist/runtime/components/ConfirmDialog.vue.d.ts

@@ -4,6 +4,7 @@ interface ConfirmDialogProps {
     dismissible?: boolean;
     confirmText?: string;
     cancelText?: string;
+    /** Styles the confirm button as destructive (red). */
     destructive?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<ConfirmDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -0,0 +1,28 @@
+import type { DescriptionItem } from '../../types.js';
+/**
+ * Label/value rows for a detail card. Each row renders the slot named after its `key` (or `label`) when given,
+ * otherwise `value`; empty values read `empty` ("Not set") in muted text. `align="end"` right-aligns the values.
+ */
+type __VLS_Props = {
+    items: DescriptionItem[];
+    empty?: string;
+    loading?: boolean;
+    align?: 'start' | 'end';
+};
+declare var __VLS_7: string, __VLS_8: {
+    item: DescriptionItem;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    align: "start" | "end";
+}, {}, {}, {}, 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/DescriptionList.vue

@@ -0,0 +1,51 @@
+<script setup>
+const props = defineProps({
+  items: { type: Array, required: true },
+  empty: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  align: { type: String, required: false, default: "start" }
+});
+const t = useUiT("patterns");
+const emptyLabel = computed(() => props.empty ?? t("notSet", "Not set"));
+const isEmpty = (value) => value === void 0 || value === null || value === "";
+</script>
+
+<template>
+  <dl
+    class="grid gap-x-6 gap-y-3 text-sm"
+    :class="align === 'end' ? 'grid-cols-[auto_1fr] items-center' : 'sm:grid-cols-[10rem_1fr]'"
+  >
+    <template
+      v-for="item in items"
+      :key="item.key ?? item.label"
+    >
+      <dt class="text-muted">
+        {{ item.label }}
+      </dt>
+      <dd
+        class="text-highlighted min-w-0 wrap-break-word"
+        :class="align === 'end' && 'text-right'"
+      >
+        <USkeleton
+          v-if="loading"
+          class="h-4 w-24"
+          :class="align === 'end' && 'ml-auto'"
+        />
+        <slot
+          v-else
+          :name="item.key ?? item.label"
+          :item="item"
+        >
+          <span
+            v-if="isEmpty(item.value)"
+            class="text-dimmed"
+          >{{ emptyLabel }}</span>
+          <span
+            v-else
+            class="whitespace-pre-line"
+          >{{ item.value }}</span>
+        </slot>
+      </dd>
+    </template>
+  </dl>
+</template>

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

@@ -0,0 +1,28 @@
+import type { DescriptionItem } from '../../types.js';
+/**
+ * Label/value rows for a detail card. Each row renders the slot named after its `key` (or `label`) when given,
+ * otherwise `value`; empty values read `empty` ("Not set") in muted text. `align="end"` right-aligns the values.
+ */
+type __VLS_Props = {
+    items: DescriptionItem[];
+    empty?: string;
+    loading?: boolean;
+    align?: 'start' | 'end';
+};
+declare var __VLS_7: string, __VLS_8: {
+    item: DescriptionItem;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    align: "start" | "end";
+}, {}, {}, {}, 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/FormSlideover.d.vue.ts

@@ -0,0 +1,46 @@
+/**
+ * A create/edit form in a slideover. The caller renders the form in the default slot as
+ * `<UForm :id="formId" …>` (or `<form :id="formId" @submit.prevent>`); the footer holds Cancel and the submit
+ * button, which submits that form through its `form` attribute.
+ *
+ * Open it with `useOverlay()`: wrap it in a component of your own whose root is `FormSlideover` and which emits
+ * `close` with the saved record (Cancel emits `close(false)`), then
+ * `const record = await overlay.create(MyFormSlideover).open(props).result`.
+ */
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    formId: string;
+    submitLabel: string;
+    cancelLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+};
+declare function cancel(): void;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {}, __VLS_12: {
+    cancel: typeof cancel;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    footer?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: false) => any;
+    "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((value: false) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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/FormSlideover.vue

@@ -0,0 +1,53 @@
+<script setup>
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  formId: { type: String, required: true },
+  submitLabel: { type: String, required: true },
+  cancelLabel: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const emit = defineEmits(["close"]);
+const open = defineModel("open", { type: Boolean });
+const actions = useUiT("actions");
+const cancelText = computed(() => props.cancelLabel ?? actions("cancel", "Cancel"));
+function cancel() {
+  open.value = false;
+  emit("close", false);
+}
+</script>
+
+<template>
+  <USlideover
+    v-model:open="open"
+    :title="title"
+    :description="description"
+    :ui="{ footer: 'justify-end gap-2' }"
+  >
+    <template #body>
+      <slot />
+    </template>
+    <template #footer>
+      <slot
+        name="footer"
+        :cancel="cancel"
+      >
+        <UButton
+          :label="cancelText"
+          color="neutral"
+          variant="outline"
+          :disabled="loading"
+          @click="cancel"
+        />
+        <UButton
+          type="submit"
+          :form="formId"
+          :label="submitLabel"
+          :loading="loading"
+          :disabled="disabled"
+        />
+      </slot>
+    </template>
+  </USlideover>
+</template>

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

@@ -0,0 +1,46 @@
+/**
+ * A create/edit form in a slideover. The caller renders the form in the default slot as
+ * `<UForm :id="formId" …>` (or `<form :id="formId" @submit.prevent>`); the footer holds Cancel and the submit
+ * button, which submits that form through its `form` attribute.
+ *
+ * Open it with `useOverlay()`: wrap it in a component of your own whose root is `FormSlideover` and which emits
+ * `close` with the saved record (Cancel emits `close(false)`), then
+ * `const record = await overlay.create(MyFormSlideover).open(props).result`.
+ */
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    formId: string;
+    submitLabel: string;
+    cancelLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+};
+declare function cancel(): void;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {}, __VLS_12: {
+    cancel: typeof cancel;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    footer?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (value: false) => any;
+    "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: ((value: false) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, 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/ListCard.d.vue.ts

@@ -0,0 +1,29 @@
+/**
+ * A short list in a card (dashboard and overview widgets): title, optional description and `#actions`, rows in the
+ * default slot (put `<li>`s inside, they get dividers) and a "View all" link to `to`. `empty` replaces the rows
+ * when `isEmpty` is set.
+ */
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    loading?: boolean;
+    isEmpty?: boolean;
+    empty?: string;
+    to?: string;
+    toLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,74 @@
+<script setup>
+import { surfaceClass } from "../../utils/surface";
+const props = defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  isEmpty: { type: Boolean, required: false },
+  empty: { type: String, required: false },
+  to: { type: String, required: false },
+  toLabel: { type: String, required: false }
+});
+const t = useUiT("patterns");
+const linkLabel = computed(() => props.toLabel ?? t("viewAll", "View all"));
+</script>
+
+<template>
+  <section :class="[surfaceClass, 'flex h-full flex-col']">
+    <div class="border-default flex items-center justify-between gap-3 border-b px-4 py-3">
+      <div class="min-w-0">
+        <h2 class="text-highlighted text-sm font-semibold">
+          {{ title }}
+        </h2>
+        <p
+          v-if="description"
+          class="text-muted text-xs"
+        >
+          {{ description }}
+        </p>
+      </div>
+      <div
+        v-if="$slots.actions"
+        class="flex items-center gap-2"
+      >
+        <slot name="actions" />
+      </div>
+    </div>
+    <div class="flex-1 px-4">
+      <div
+        v-if="loading"
+        class="space-y-3 py-4"
+      >
+        <USkeleton class="h-4 w-2/3" />
+        <USkeleton class="h-4 w-1/2" />
+        <USkeleton class="h-4 w-3/5" />
+      </div>
+      <p
+        v-else-if="isEmpty"
+        class="text-muted py-6 text-center text-sm"
+      >
+        {{ empty }}
+      </p>
+      <ul
+        v-else
+        class="divide-default divide-y text-sm [&>li]:py-2.5"
+      >
+        <slot />
+      </ul>
+    </div>
+    <div
+      v-if="to"
+      class="border-default border-t px-4 py-2.5"
+    >
+      <UButton
+        :to="to"
+        variant="link"
+        color="neutral"
+        size="xs"
+        class="p-0"
+        trailing-icon="i-lucide-arrow-right"
+        :label="linkLabel"
+      />
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,29 @@
+/**
+ * A short list in a card (dashboard and overview widgets): title, optional description and `#actions`, rows in the
+ * default slot (put `<li>`s inside, they get dividers) and a "View all" link to `to`. `empty` replaces the rows
+ * when `isEmpty` is set.
+ */
+type __VLS_Props = {
+    title: string;
+    description?: string;
+    loading?: boolean;
+    isEmpty?: boolean;
+    empty?: string;
+    to?: string;
+    toLabel?: string;
+};
+declare var __VLS_1: {}, __VLS_18: {};
+type __VLS_Slots = {} & {
+    actions?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_18) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,28 @@
+import type { BreadcrumbItem } from '@nuxt/ui';
+/**
+ * The title block of an app page: breadcrumb (or a muted eyebrow line) above, the title with an optional `#badge`,
+ * the description, a meta row (default slot) and right-aligned `#actions`. Detail pages pass a breadcrumb array
+ * so the parent list is one click away.
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    /** A muted line above the title, or links back up the hierarchy. */
+    breadcrumb?: string | BreadcrumbItem[];
+};
+type __VLS_Slots = {
+    title?: () => unknown;
+    badge?: () => unknown;
+    description?: () => unknown;
+    default?: () => unknown;
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,53 @@
+<script setup>
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  breadcrumb: { type: [String, Array], required: false }
+});
+defineSlots();
+</script>
+
+<template>
+  <header class="flex flex-wrap items-end justify-between gap-x-4 gap-y-3">
+    <div class="min-w-0 flex-1 basis-72 space-y-1">
+      <UBreadcrumb
+        v-if="Array.isArray(breadcrumb) && breadcrumb.length"
+        :items="breadcrumb"
+      />
+      <p
+        v-else-if="typeof breadcrumb === 'string' && breadcrumb"
+        class="text-muted truncate text-sm"
+      >
+        {{ breadcrumb }}
+      </p>
+      <div class="flex min-w-0 flex-wrap items-center gap-2">
+        <h1 class="text-highlighted text-xl font-semibold tracking-tight text-pretty sm:text-2xl">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h1>
+        <slot name="badge" />
+      </div>
+      <p
+        v-if="description || $slots.description"
+        class="text-muted text-sm text-pretty"
+      >
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </p>
+      <div
+        v-if="$slots.default"
+        class="text-muted flex flex-wrap items-center gap-x-4 gap-y-1 pt-1 text-sm"
+      >
+        <slot />
+      </div>
+    </div>
+    <div
+      v-if="$slots.actions"
+      class="flex flex-wrap items-center gap-2"
+    >
+      <slot name="actions" />
+    </div>
+  </header>
+</template>

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

@@ -0,0 +1,28 @@
+import type { BreadcrumbItem } from '@nuxt/ui';
+/**
+ * The title block of an app page: breadcrumb (or a muted eyebrow line) above, the title with an optional `#badge`,
+ * the description, a meta row (default slot) and right-aligned `#actions`. Detail pages pass a breadcrumb array
+ * so the parent list is one click away.
+ */
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    /** A muted line above the title, or links back up the hierarchy. */
+    breadcrumb?: string | BreadcrumbItem[];
+};
+type __VLS_Slots = {
+    title?: () => unknown;
+    badge?: () => unknown;
+    description?: () => unknown;
+    default?: () => unknown;
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,19 @@
+import type { PageTabItem } from '../../types.js';
+/**
+ * Tabs under a page heading. Link mode: items carry `to` and the route decides which one is active. State mode:
+ * bind `v-model` and give items a `value`; clicking one selects it. Icons are hidden on small screens.
+ */
+type __VLS_Props = {
+    items: PageTabItem[];
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;