@tower_74/cms-app 0.1.0

package/README.md

@@ -0,0 +1,102 @@
+# @tower_74/cms-app
+
+Front-end **app shell** for the Base CMS — the Inertia/Vue pages, layouts, components,
+composables and helpers that make up the admin area and public site. It is the front-end
+counterpart to the `tower74/cms-core` Composer package and a sibling to
+[`@tower_74/cms-ui`](https://github.com/JMancuso79/cms-ui) (the shared primitive/widget
+library this shell composes).
+
+Client sites consume this as a **versioned dependency** and update the front-end core with a
+`npm update` instead of merging (see ADR-0023). Any page can be **overridden per site**.
+
+> **Ships source, not a build.** Unlike `cms-ui` (a compiled component library), this package
+> ships its raw `src/` (`.vue` + `import.meta.glob`). The consuming app's Vite compiles it, so
+> Tailwind can scan its classes and the Inertia page glob can be transformed. That requires the
+> wiring below.
+
+## Install
+
+```bash
+npm install @tower_74/cms-app
+```
+
+Peer dependencies (Vue, Inertia, Pinia, radix-vue, lucide, `@tower_74/cms-ui`, ziggy, …) must
+be present in the host app — they are in the CMS skeleton already.
+
+## Wiring a host app
+
+### 1. Vite (`vite.config.ts`)
+
+```ts
+resolve: {
+  alias: {
+    // The package's own `@/...` imports resolve against its src.
+    '@': path.resolve(__dirname, './node_modules/@tower_74/cms-app/src'),
+  },
+},
+// Ship-source package: let Vite (not esbuild) process it so its import.meta.glob transforms.
+optimizeDeps: { exclude: ['@tower_74/cms-app'] },
+ssr: { noExternal: ['@tower_74/cms-app'] },
+```
+
+### 2. Entry points (`resources/js/app.ts` + `ssr.ts`)
+
+```ts
+import { initializeTheme, resolveCmsPage } from '@tower_74/cms-app';
+
+createInertiaApp({
+  // Core pages come from the package; this app's own ./pages override by name.
+  resolve: (name) => resolveCmsPage(name, import.meta.glob('./pages/**/*.vue')),
+  // ...
+});
+```
+
+### 3. Tailwind (`tailwind.config.js`)
+
+```js
+content: [
+  // ...your app's own templates
+  './node_modules/@tower_74/cms-app/src/**/*.{vue,js,ts,jsx,tsx}',
+  './node_modules/@tower_74/cms-ui/dist/**/*.{js,cjs}',
+],
+```
+
+### 4. Inertia testing (`config/inertia.php`)
+
+The PHP test suite asserts pages exist on disk via a path independent of Vite. Point it at the
+package (and your override dir):
+
+```php
+'testing' => [
+    'ensure_pages_exist' => true,
+    'page_paths' => [
+        base_path('node_modules/@tower_74/cms-app/src/pages'),
+        resource_path('js/pages'),
+    ],
+    'page_extensions' => ['vue'],
+],
+```
+
+## Overriding a page
+
+Drop a same-named file into the host app's `resources/js/pages/**`. Both globs produce
+`./pages/Name.vue` keys, and `resolveCmsPage` layers the local glob over the package's, so the
+local file wins. No core files are edited.
+
+## Layout
+
+```
+src/
+  index.ts        # public API: resolveCmsPage(), initializeTheme, cmsPages
+  pages.ts        # import.meta.glob of all shipped pages
+  pages/          # Admin/**, Public/**, Auth/**, Setup/**, settings/**
+  layouts/        # AdminLayout, PublicLayout, AuthLayout, …
+  components/      # app-shell components (+ vendored shadcn-vue ui/)
+  composables/     # useAppearance, useInitials
+  lib/             # utils
+  types/           # shared TS types
+```
+
+## License
+
+UNLICENSED — proprietary. Distributed for use by Base CMS client sites.

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@tower_74/cms-app",
+  "version": "0.1.0",
+  "description": "Front-end app shell for the Base CMS — Inertia/Vue pages, layouts, components and composables. Ships source; consumed by client sites as a versioned dependency (ADR-0023) and overridable per site.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "private": false,
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./pages": "./src/pages.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JMancuso79/cms-app.git"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/"
+  },
+  "peerDependencies": {
+    "@inertiajs/vue3": "^2.0.0-beta.3",
+    "@tower_74/cms-ui": "^0.12.0",
+    "@vueuse/core": "^12.0.0",
+    "laravel-vite-plugin": "^1.0",
+    "lucide-vue-next": "^0.468.0",
+    "pinia": "^3.0.4",
+    "radix-vue": "^1.9.11",
+    "vue": "^3.5.13",
+    "ziggy-js": "^2.4.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "prettier": "^3.4.2",
+    "typescript": "^5.2.2",
+    "typescript-eslint": "^8.23.0",
+    "vue": "^3.5.13"
+  }
+}

package/src/components/AppContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { SidebarInset } from '@/components/ui/sidebar';
+import { computed } from 'vue';
+
+interface Props {
+    variant?: 'header' | 'sidebar';
+    class?: string;
+}
+
+const props = defineProps<Props>();
+const className = computed(() => props.class);
+</script>
+
+<template>
+    <SidebarInset v-if="props.variant === 'sidebar'" :class="className">
+        <slot />
+    </SidebarInset>
+    <main v-else class="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl" :class="className">
+        <slot />
+    </main>
+</template>

package/src/components/AppLogoIcon.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+interface Props {
+    className?: HTMLAttributes['class'];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" :class="className" v-bind="$attrs">
+        <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
+        />
+    </svg>
+</template>

package/src/components/AppShell.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { onMounted, ref } from 'vue';
+
+interface Props {
+    variant?: 'header' | 'sidebar';
+}
+
+defineProps<Props>();
+
+const isOpen = ref(true);
+
+onMounted(() => {
+    isOpen.value = localStorage.getItem('sidebar') !== 'false';
+});
+
+const handleSidebarChange = (open: boolean) => {
+    isOpen.value = open;
+    localStorage.setItem('sidebar', String(open));
+};
+</script>
+
+<template>
+    <div v-if="variant === 'header'" class="flex min-h-screen w-full flex-col">
+        <slot />
+    </div>
+    <div v-else class="flex min-h-svh flex-col">
+        <!-- Full-width row above the sidebar (e.g. the authenticated admin bar). Pinned so it
+             stays aligned with the fixed sidebar, which is offset down by the bar's height. -->
+        <div class="sticky top-0 z-30">
+            <slot name="topbar" />
+        </div>
+        <SidebarProvider :default-open="isOpen" :open="isOpen" class="min-h-0 flex-1" @update:open="handleSidebarChange">
+            <slot />
+        </SidebarProvider>
+    </div>
+</template>

package/src/components/AppearanceTabs.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useAppearance } from '@/composables/useAppearance';
+import { Monitor, Moon, Sun } from 'lucide-vue-next';
+
+interface Props {
+    class?: string;
+}
+
+const { class: containerClass = '' } = defineProps<Props>();
+
+const { appearance, updateAppearance } = useAppearance();
+
+const tabs = [
+    { value: 'light', Icon: Sun, label: 'Light' },
+    { value: 'dark', Icon: Moon, label: 'Dark' },
+    { value: 'system', Icon: Monitor, label: 'System' },
+] as const;
+</script>
+
+<template>
+    <div :class="['inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', containerClass]">
+        <button
+            v-for="{ value, Icon, label } in tabs"
+            :key="value"
+            @click="updateAppearance(value)"
+            :class="[
+                'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
+                appearance === value
+                    ? 'bg-white shadow-sm dark:bg-neutral-700 dark:text-neutral-100'
+                    : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+            ]"
+        >
+            <component :is="Icon" class="-ml-1 h-4 w-4" />
+            <span class="ml-1.5 text-sm">{{ label }}</span>
+        </button>
+    </div>
+</template>

package/src/components/AuthBar.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Link, usePage } from '@inertiajs/vue3';
+import { ExternalLink, LayoutGrid, LogOut, Settings, SquarePen } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+// Thin dark bar (WordPress-style) shown only to signed-in users. The primary link points the
+// other way depending on context: "Dashboard" on the public site, "View site" in the admin.
+// `edit` is a server-resolved link to the current content's admin editor — present only when
+// the signed-in user is allowed to edit it (PostPolicy::update), so we render it whenever set.
+const props = withDefaults(
+    defineProps<{
+        primaryLabel: string;
+        primaryHref: string;
+        primaryKind?: 'dashboard' | 'site';
+        edit?: { url: string; label: string } | null;
+    }>(),
+    {
+        primaryKind: 'dashboard',
+        edit: null,
+    },
+);
+
+const page = usePage();
+const user = computed(() => (page.props.auth as { user?: { name: string } | null } | undefined)?.user ?? null);
+const primaryIcon = computed(() => (props.primaryKind === 'site' ? ExternalLink : LayoutGrid));
+</script>
+
+<template>
+    <div v-if="user" class="bg-neutral-900 text-neutral-300">
+        <div class="flex h-8 items-center justify-between gap-4 px-4 text-xs sm:px-6">
+            <div class="flex items-center gap-3">
+                <Link :href="primaryHref" class="flex items-center gap-1.5 font-medium transition-colors hover:text-white">
+                    <component :is="primaryIcon" class="size-3.5" />
+                    {{ primaryLabel }}
+                </Link>
+                <template v-if="edit">
+                    <span class="text-neutral-600">·</span>
+                    <Link :href="edit.url" class="flex items-center gap-1.5 transition-colors hover:text-white">
+                        <SquarePen class="size-3.5" />
+                        {{ edit.label }}
+                    </Link>
+                </template>
+            </div>
+            <div class="flex items-center gap-3">
+                <Link :href="route('profile.edit')" class="flex items-center gap-1.5 transition-colors hover:text-white">
+                    <Settings class="size-3.5" />
+                    <span class="hidden sm:inline">Settings</span>
+                </Link>
+                <span class="text-neutral-600">·</span>
+                <span class="hidden text-neutral-400 sm:inline">{{ user.name }}</span>
+                <Link :href="route('logout')" method="post" as="button" class="flex items-center gap-1.5 transition-colors hover:text-white">
+                    <LogOut class="size-3.5" />
+                    <span class="hidden sm:inline">Log out</span>
+                </Link>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/BlockEditor.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { Button, FormBuilder, type MediaItem } from '@tower_74/cms-ui';
+import { ref } from 'vue';
+
+interface FieldSpec {
+    name: string;
+    label?: string;
+    type?: string;
+    required?: boolean;
+    options?: Array<{ label: string; value: string | number }>;
+}
+interface BlockDef {
+    type: string;
+    label: string;
+    fields: FieldSpec[];
+    defaults: Record<string, unknown>;
+}
+interface Block {
+    type: string;
+    data: Record<string, unknown>;
+}
+
+const props = withDefaults(defineProps<{ modelValue: Block[]; registry: BlockDef[]; mediaItems?: MediaItem[] }>(), {
+    mediaItems: () => [],
+});
+const emit = defineEmits<{ 'update:modelValue': [value: Block[]]; upload: [file: File] }>();
+
+const newType = ref(props.registry[0]?.type ?? '');
+
+const defFor = (type: string) => props.registry.find((d) => d.type === type);
+const labelFor = (type: string) => defFor(type)?.label ?? type;
+
+const commit = (blocks: Block[]) => emit('update:modelValue', blocks);
+
+const addBlock = () => {
+    const def = defFor(newType.value);
+    if (!def) return;
+    commit([...props.modelValue, { type: def.type, data: { ...def.defaults } }]);
+};
+
+const removeBlock = (index: number) => {
+    const blocks = [...props.modelValue];
+    blocks.splice(index, 1);
+    commit(blocks);
+};
+
+const move = (index: number, direction: -1 | 1) => {
+    const target = index + direction;
+    if (target < 0 || target >= props.modelValue.length) return;
+    const blocks = [...props.modelValue];
+    [blocks[index], blocks[target]] = [blocks[target], blocks[index]];
+    commit(blocks);
+};
+
+const setData = (index: number, data: Record<string, unknown>) => {
+    const blocks = [...props.modelValue];
+    blocks[index] = { ...blocks[index], data };
+    commit(blocks);
+};
+</script>
+
+<template>
+    <div class="space-y-4">
+        <div class="flex items-center gap-2">
+            <select v-model="newType" class="h-10 rounded border border-border bg-background px-3 text-sm text-text">
+                <option v-for="def in registry" :key="def.type" :value="def.type">{{ def.label }}</option>
+            </select>
+            <Button type="button" variant="secondary" @click="addBlock">Add block</Button>
+        </div>
+
+        <p v-if="!modelValue.length" class="rounded border border-dashed border-border px-4 py-8 text-center text-sm text-muted">
+            No blocks yet. Pick a type above and add your first block.
+        </p>
+
+        <div v-for="(block, index) in modelValue" :key="index" class="rounded-lg border border-border bg-background">
+            <div class="flex items-center justify-between border-b border-border px-4 py-2">
+                <span class="text-sm font-medium">{{ labelFor(block.type) }}</span>
+                <div class="flex items-center gap-1">
+                    <Button type="button" variant="ghost" size="sm" :disabled="index === 0" @click="move(index, -1)">↑</Button>
+                    <Button type="button" variant="ghost" size="sm" :disabled="index === modelValue.length - 1" @click="move(index, 1)">↓</Button>
+                    <Button type="button" variant="danger" size="sm" @click="removeBlock(index)">Remove</Button>
+                </div>
+            </div>
+            <div class="p-4">
+                <FormBuilder
+                    :model-value="block.data"
+                    :fields="(defFor(block.type)?.fields ?? []) as never"
+                    :media-items="mediaItems"
+                    @update:model-value="setData(index, $event)"
+                    @upload="emit('upload', $event)"
+                />
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/DeleteUser.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { ref } from 'vue';
+
+// Components
+import HeadingSmall from '@/components/HeadingSmall.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+const passwordInput = ref<HTMLInputElement | null>(null);
+
+const form = useForm({
+    password: '',
+});
+
+const deleteUser = (e: Event) => {
+    e.preventDefault();
+
+    form.delete(route('profile.destroy'), {
+        preserveScroll: true,
+        onSuccess: () => closeModal(),
+        onError: () => passwordInput.value?.focus(),
+        onFinish: () => form.reset(),
+    });
+};
+
+const closeModal = () => {
+    form.clearErrors();
+    form.reset();
+};
+</script>
+
+<template>
+    <div class="space-y-6">
+        <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
+        <div class="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+            <div class="relative space-y-0.5 text-red-600 dark:text-red-100">
+                <p class="font-medium">Warning</p>
+                <p class="text-sm">Please proceed with caution, this cannot be undone.</p>
+            </div>
+            <Dialog>
+                <DialogTrigger as-child>
+                    <Button variant="destructive">Delete account</Button>
+                </DialogTrigger>
+                <DialogContent>
+                    <form class="space-y-6" @submit="deleteUser">
+                        <DialogHeader class="space-y-3">
+                            <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+                            <DialogDescription>
+                                Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your
+                                password to confirm you would like to permanently delete your account.
+                            </DialogDescription>
+                        </DialogHeader>
+
+                        <div class="grid gap-2">
+                            <Label for="password" class="sr-only">Password</Label>
+                            <Input id="password" type="password" name="password" ref="passwordInput" v-model="form.password" placeholder="Password" />
+                            <InputError :message="form.errors.password" />
+                        </div>
+
+                        <DialogFooter>
+                            <DialogClose as-child>
+                                <Button variant="secondary" @click="closeModal"> Cancel </Button>
+                            </DialogClose>
+
+                            <Button variant="destructive" :disabled="form.processing">
+                                <button type="submit">Delete account</button>
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                </DialogContent>
+            </Dialog>
+        </div>
+    </div>
+</template>

package/src/components/FieldBuilder.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { Button, Checkbox, Input, Select } from '@tower_74/cms-ui';
+
+interface Option {
+    label: string;
+    value: string;
+}
+interface Field {
+    name?: string;
+    label: string;
+    type: string;
+    required?: boolean;
+    placeholder?: string;
+    options?: Option[];
+}
+
+const props = defineProps<{
+    modelValue: Field[];
+    fieldTypes: Array<{ value: string; label: string }>;
+}>();
+const emit = defineEmits<{ 'update:modelValue': [value: Field[]] }>();
+
+const OPTION_TYPES = ['select', 'radio'];
+
+const commit = (fields: Field[]) => emit('update:modelValue', fields);
+
+const addField = () => commit([...props.modelValue, { label: 'New field', type: 'text', required: false, placeholder: '' }]);
+const removeField = (i: number) => {
+    const fields = [...props.modelValue];
+    fields.splice(i, 1);
+    commit(fields);
+};
+const move = (i: number, dir: -1 | 1) => {
+    const target = i + dir;
+    if (target < 0 || target >= props.modelValue.length) return;
+    const fields = [...props.modelValue];
+    [fields[i], fields[target]] = [fields[target], fields[i]];
+    commit(fields);
+};
+const setField = (i: number, patch: Partial<Field>) => {
+    const fields = [...props.modelValue];
+    fields[i] = { ...fields[i], ...patch };
+    commit(fields);
+};
+
+const addOption = (i: number) => setField(i, { options: [...(props.modelValue[i].options ?? []), { label: '', value: '' }] });
+const setOption = (i: number, oi: number, patch: Partial<Option>) => {
+    const options = [...(props.modelValue[i].options ?? [])];
+    options[oi] = { ...options[oi], ...patch };
+    setField(i, { options });
+};
+const removeOption = (i: number, oi: number) => {
+    const options = [...(props.modelValue[i].options ?? [])];
+    options.splice(oi, 1);
+    setField(i, { options });
+};
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div v-for="(field, i) in modelValue" :key="i" class="rounded-lg border border-border bg-background p-4">
+            <div class="mb-3 flex items-center justify-between">
+                <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">Field {{ i + 1 }}</span>
+                <div class="flex items-center gap-1">
+                    <Button type="button" variant="ghost" size="sm" :disabled="i === 0" @click="move(i, -1)">↑</Button>
+                    <Button type="button" variant="ghost" size="sm" :disabled="i === modelValue.length - 1" @click="move(i, 1)">↓</Button>
+                    <Button type="button" variant="danger" size="sm" @click="removeField(i)">Remove</Button>
+                </div>
+            </div>
+
+            <div class="grid gap-3 sm:grid-cols-2">
+                <label class="block">
+                    <span class="mb-1 block text-sm font-medium text-foreground">Label</span>
+                    <Input :model-value="field.label" @update:model-value="setField(i, { label: $event })" />
+                </label>
+                <label class="block">
+                    <span class="mb-1 block text-sm font-medium text-foreground">Type</span>
+                    <Select :model-value="field.type" :options="fieldTypes" @update:model-value="setField(i, { type: $event })" />
+                </label>
+            </div>
+
+            <label v-if="!['checkbox', 'select', 'radio'].includes(field.type)" class="mt-3 block">
+                <span class="mb-1 block text-sm font-medium text-foreground">Placeholder</span>
+                <Input :model-value="field.placeholder ?? ''" @update:model-value="setField(i, { placeholder: $event })" />
+            </label>
+
+            <!-- Options for select / radio -->
+            <div v-if="OPTION_TYPES.includes(field.type)" class="mt-3">
+                <span class="mb-1 block text-sm font-medium text-foreground">Options</span>
+                <div v-for="(opt, oi) in field.options ?? []" :key="oi" class="mb-2 flex items-center gap-2">
+                    <Input :model-value="opt.label" placeholder="Label" @update:model-value="setOption(i, oi, { label: $event })" />
+                    <Input :model-value="opt.value" placeholder="Value" @update:model-value="setOption(i, oi, { value: $event })" />
+                    <Button type="button" variant="ghost" size="sm" @click="removeOption(i, oi)">✕</Button>
+                </div>
+                <Button type="button" variant="secondary" size="sm" @click="addOption(i)">Add option</Button>
+            </div>
+
+            <div class="mt-3">
+                <Checkbox :model-value="!!field.required" label="Required" @update:model-value="setField(i, { required: $event })" />
+            </div>
+        </div>
+
+        <Button type="button" variant="secondary" @click="addField">Add field</Button>
+    </div>
+</template>

package/src/components/Heading.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { Separator } from '@/components/ui/separator';
+
+interface Props {
+    title: string;
+    description?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <div class="mb-8 space-y-0.5">
+        <h2 class="text-xl font-semibold tracking-tight">{{ title }}</h2>
+        <p v-if="description" class="text-sm text-muted-foreground">
+            {{ description }}
+        </p>
+    </div>
+    <Separator class="my-6" />
+</template>

package/src/components/HeadingSmall.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+interface Props {
+    title: string;
+    description?: string;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <header>
+        <h3 class="mb-0.5 text-base font-medium">{{ title }}</h3>
+        <p v-if="description" class="text-sm text-muted-foreground">
+            {{ description }}
+        </p>
+    </header>
+</template>