@brumaombra/ui-vintage 0.8.2 → 0.9.1

package/module.mjs

@@ -28,24 +28,18 @@ const loadNuxtKit = async () => {
     throw new Error('Unable to resolve @nuxt/kit for @brumaombra/ui-vintage. Install the package dependencies or add Nuxt to the consuming app.');
 };
 
-const { addPlugin, createResolver, defineNuxtModule, installModule } = await loadNuxtKit();
+const { addPlugin, createResolver, defineNuxtModule, hasNuxtModule, installModule } = await loadNuxtKit();
+const { version } = moduleRequire('./package.json');
 const resolver = createResolver(import.meta.url);
 const sourceRoot = resolver.resolve('src');
 const stylesPath = resolver.resolve('src/styles.css');
 
-// Check whether the consuming app already has a specific module installed
-const hasModuleInstalled = (modules, moduleName) => {
-    return modules.some((entry) => {
-        if (typeof entry === 'string') return entry === moduleName;
-        if (Array.isArray(entry)) return entry[0] === moduleName;
-        return false;
-    });
-};
-
 export default defineNuxtModule({
     // Module meta information
     meta: {
         name: '@brumaombra/ui-vintage',
+        configKey: 'uiVintage',
+        version,
         compatibility: {
             nuxt: '>=4.0.0'
         }
@@ -63,7 +57,7 @@ export default defineNuxtModule({
         nuxt.options.build.transpile.push(new RegExp(`^${cleanSourceRoot}`));
 
         // Ensure Nuxt Image is available for components that render NuxtImg
-        if (!hasModuleInstalled(nuxt.options.modules, '@nuxt/image')) {
+        if (!hasNuxtModule('@nuxt/image', nuxt)) {
             await installModule('@nuxt/image');
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.8.2",
+    "version": "0.9.1",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
@@ -30,12 +30,14 @@
         "src",
         "module.mjs",
         "COMPONENTS.md",
-        "skills"
+        "AGENTS.md"
     ],
     "exports": {
         ".": {
-            "import": "./module.mjs"
+            "import": "./module.mjs",
+            "default": "./module.mjs"
         },
+        "./package.json": "./package.json",
         "./style.css": "./src/styles.css",
         "./accordion": "./src/components/ui/accordion/index.ts",
         "./alert": "./src/components/ui/alert/index.ts",
@@ -107,6 +109,7 @@
         "./slider": "./src/components/ui/slider/index.ts",
         "./slider-form-component": "./src/components/slider-form-component/index.ts",
         "./spinner": "./src/components/ui/spinner/index.ts",
+        "./stat-strip": "./src/components/stat-strip/index.ts",
         "./stepper": "./src/components/ui/stepper/index.ts",
         "./switch": "./src/components/ui/switch/index.ts",
         "./switch-form-component": "./src/components/switch-form-component/index.ts",
@@ -127,32 +130,47 @@
     "scripts": {
         "typecheck": "vue-tsc --noEmit",
         "docs:components": "node scripts/generate-components-doc.mjs",
-        "docs:components:check": "node scripts/generate-components-doc.mjs --check"
+        "docs:components:check": "node scripts/generate-components-doc.mjs --check",
+        "test": "npm --prefix demo-app run test"
     },
     "peerDependencies": {
+        "@hugeicons/core-free-icons": "^4.3.0",
+        "@hugeicons/vue": "^1.0.0",
+        "@nuxt/content": "^3.0.0",
         "@nuxt/image": "^2.0.0",
         "nuxt": "^4.0.0",
+        "tailwindcss": "^4.0.0",
         "vue": "^3.5.0",
         "vue-i18n": "^9.0.0 || ^10.0.0 || ^11.0.0"
     },
+    "peerDependenciesMeta": {
+        "@nuxt/content": {
+            "optional": true
+        }
+    },
     "dependencies": {
-        "@hugeicons/core-free-icons": "4.1.1",
-        "@hugeicons/vue": "1.0.5",
         "@internationalized/date": "3.10.0",
-        "@nuxt/kit": "4.4.4",
+        "@nuxt/kit": "4.5.2",
         "@vueuse/core": "14.2.1",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "reka-ui": "2.9.2",
         "shiki": "4.4.3",
-        "tailwind-merge": "3.5.0",
-        "tailwindcss": "4.2.4"
+        "tailwind-merge": "3.5.0"
     },
     "devDependencies": {
-        "@types/node": "24.0.0",
-        "nuxt": "4.4.4",
+        "@hugeicons/core-free-icons": "4.3.5",
+        "@hugeicons/vue": "1.0.8",
+        "nuxt": "4.5.2",
+        "tailwindcss": "4.2.4",
         "typescript": "5.9.3",
-        "vue": "3.5.13",
+        "vue": "3.5.42",
+        "vue-i18n": "11.4.13",
         "vue-tsc": "2.2.10"
+    },
+    "overrides": {
+        "archiver-utils": {
+            "glob": "13.0.6"
+        }
     }
 }

package/src/components/blog/BlogContentRenderer.vue

@@ -187,7 +187,7 @@ const props = defineProps<{
 .blog-content :deep(img:not(.not-prose):not(.not-prose *)) {
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
-    box-shadow: var(--uv-shadow-md);
+    box-shadow: var(--uv-shadow-sm);
 }
 
 /* Plain markdown tables */

package/src/components/blog/BlogFAQSection.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { HelpCircleIcon } from '@hugeicons/core-free-icons';
+import HelpCircleIcon from '@hugeicons/core-free-icons/HelpCircleIcon';
 import { Accordion } from '../ui/accordion';
 import BlogSectionTitle from './BlogSectionTitle.vue';
 

package/src/components/blog/BlogHeaderSection.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 import type { ToneColor } from '../../lib/color-tokens';
+import { cn } from '../../lib/utils';
 import { Badge } from '../ui/badge';
+import { StatStrip } from '../stat-strip';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -9,48 +15,116 @@ const props = withDefaults(defineProps<{
         color: ToneColor;
         text: string;
     }>;
+    announcement?: {
+        text: string;
+        to: string;
+        label?: string;
+    } | null;
     title: string;
+    highlight?: string;
     description: string;
+    stats?: Array<{
+        label: string;
+        value: string | number;
+        icon?: HugeiconsIconDefinition;
+    }>;
+    align?: 'left' | 'center' | 'right';
 }>(), {
-    badges: () => []
+    badges: () => [],
+    announcement: null,
+    highlight: '',
+    stats: () => [],
+    align: 'center'
 });
 
-// Split the title so each word can rise into place on its own
-const titleWords = computed(() => props.title.split(/\s+/).filter(Boolean));
+const { t } = useI18n();
+
+// Alignment of the whole header: the column, its text, and the rows of badges and stats
+const alignClasses = {
+    left: { header: 'items-start text-left', row: 'justify-start' },
+    center: { header: 'items-center text-center', row: 'justify-center' },
+    right: { header: 'items-end text-right', row: 'justify-end' }
+} as const;
+const alignClass = computed(() => alignClasses[props.align] ?? alignClasses.center);
+
+// Split the title around the highlighted part (when it appears in the title)
+const titleParts = computed(() => {
+    const index = props.highlight ? props.title.indexOf(props.highlight) : -1;
+    if (index === -1) return { before: props.title, highlight: '', after: '' };
+    return {
+        before: props.title.slice(0, index),
+        highlight: props.highlight,
+        after: props.title.slice(index + props.highlight.length)
+    };
+});
 
-// The description follows the last word of the title
-const descriptionDelay = computed(() => `${Math.min(titleWords.value.length, 12) * 55 + 200}ms`);
+// Words that rise in one by one (the highlight rises in as a single block between them)
+const splitWords = (text: string) => text.split(/\s+/).filter(Boolean);
+const beforeWords = computed(() => splitWords(titleParts.value.before));
+const afterWords = computed(() => splitWords(titleParts.value.after));
+// Space after a word before the highlight: always between words, and before the highlight only when the title has one there
+const wordGap = (index: number) => {
+    if (index < beforeWords.value.length - 1) return ' ';
+    return titleParts.value.highlight && /\s$/.test(titleParts.value.before) ? ' ' : '';
+};
+const wordDelay = (index: number) => `${120 + Math.min(index, 12) * 55}ms`;
+const highlightDelay = computed(() => wordDelay(beforeWords.value.length));
+const afterDelay = (index: number) => wordDelay(beforeWords.value.length + 1 + index);
+
+// The rest of the header follows the last word of the title
+const titleLength = computed(() => beforeWords.value.length + afterWords.value.length + (titleParts.value.highlight ? 1 : 0));
+const descriptionDelay = computed(() => `${Math.min(titleLength.value, 12) * 55 + 200}ms`);
+const statsDelay = computed(() => `${Math.min(titleLength.value, 12) * 55 + 300}ms`);
+const underlineDelay = computed(() => `${beforeWords.value.length * 55 + 600}ms`);
 </script>
 
 <template>
-    <header class="relative isolate flex flex-col gap-6 pt-4 pb-2 md:gap-8 md:pt-10">
-        <!-- Ambient glow -->
-        <div aria-hidden="true" class="pointer-events-none absolute -top-24 -left-24 -z-10 h-80 w-[36rem] max-w-[120%] rounded-full bg-primary/12 blur-[100px]" />
+    <header :class="cn('relative flex flex-col gap-6 pt-6 md:pt-12', alignClass.header)">
+        <!-- Announcement (links to something new, such as the latest post) -->
+        <NuxtLink v-if="props.announcement" :to="props.announcement.to" class="group/announce max-w-full animate-uv-fade-up rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+            <span class="inline-flex max-w-full items-center gap-2 rounded border border-warning/35 bg-warning/10 px-3 py-1 text-xs text-foreground transition-colors duration-150 group-hover/announce:border-warning/70">
+                <span aria-hidden="true" class="relative flex size-1.5 shrink-0 text-warning">
+                    <span class="absolute inline-flex size-full animate-uv-ping-soft rounded-full bg-current opacity-60" />
+                    <span class="relative inline-flex size-1.5 rounded-full bg-current" />
+                </span>
+                <span class="shrink-0 font-semibold">{{ props.announcement.label || t('uiVintage.blog.new') }}</span>
+                <span class="truncate opacity-80">{{ props.announcement.text }}</span>
+                <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 shrink-0 transition-transform duration-300 ease-spring group-hover/announce:translate-x-0.5" />
+            </span>
+        </NuxtLink>
 
         <!-- Badges -->
-        <div v-if="props.badges.length > 0" class="flex flex-wrap gap-3">
+        <div v-if="props.badges.length > 0" :class="cn('flex flex-wrap gap-2', alignClass.row)">
             <Badge v-for="(badge, index) in props.badges"
                 :key="`${badge.color}-${badge.text}`"
                 :color="badge.color"
                 :text="badge.text"
-                :pulse="index === 0"
+                :pulse="index === 0 && !props.announcement"
                 class="animate-uv-fade-up"
                 :style="{ animationDelay: `${index * 70}ms` }" />
         </div>
 
-        <!-- Title (each word rises in with a spring) -->
-        <h1 class="text-3xl leading-[1.05] font-bold tracking-tight text-foreground md:text-6xl">
-            <template v-for="(word, index) in titleWords" :key="`${word}-${index}`">
-                <span class="inline-block animate-uv-word-in" :style="{ animationDelay: `${120 + Math.min(index, 12) * 55}ms` }">{{ word }}</span>{{ index < titleWords.length - 1 ? ' ' : '' }}
+        <!-- Title (each word rises in with a spring, the highlight gets a hand-drawn underline) -->
+        <h1 class="max-w-4xl text-4xl leading-[1.05] font-semibold tracking-tight text-foreground sm:text-5xl md:text-6xl">
+            <template v-for="(word, index) in beforeWords" :key="`before-${word}-${index}`">
+                <span class="inline-block animate-uv-word-in" :style="{ animationDelay: wordDelay(index) }">{{ word }}</span>{{ wordGap(index) }}
+            </template>
+            <!-- The text and the underline sit on one line so no stray space ends up inside the highlight -->
+            <span v-if="titleParts.highlight" class="relative inline-block animate-uv-word-in text-primary" :style="{ animationDelay: highlightDelay }">{{ titleParts.highlight }}<svg class="absolute -bottom-2 left-0 h-3 w-full text-primary/60" viewBox="0 0 200 12" fill="none" preserveAspectRatio="none" aria-hidden="true">
+                    <path d="M2 9C40 3 80 2 198 7" stroke="currentColor" stroke-width="4" stroke-linecap="round" pathLength="1" class="animate-uv-draw [stroke-dasharray:1]" :style="{ animationDelay: underlineDelay }" />
+                </svg>
+            </span>
+            <template v-for="(word, index) in afterWords" :key="`after-${word}-${index}`">
+                {{ index === 0 && !/^\s/.test(titleParts.after) ? '' : ' ' }}<span class="inline-block animate-uv-word-in" :style="{ animationDelay: afterDelay(index) }">{{ word }}</span>
             </template>
         </h1>
 
-        <!-- Accent rule -->
-        <div aria-hidden="true" class="h-1 w-20 origin-left animate-uv-grow-x rounded-full bg-primary shadow-glow" :style="{ animationDelay: descriptionDelay }" />
-
         <!-- Description -->
-        <p class="max-w-3xl animate-uv-fade-up text-sm leading-relaxed text-muted-foreground md:text-xl" :style="{ animationDelay: descriptionDelay }">
+        <p class="max-w-2xl animate-uv-fade-up text-sm leading-7 text-muted-foreground sm:text-base" :style="{ animationDelay: descriptionDelay }">
             {{ props.description }}
         </p>
+
+        <!-- Stats strip -->
+        <StatStrip :items="props.stats" :class="cn('animate-uv-fade-up', alignClass.row)" :style="{ animationDelay: statsDelay }" />
     </header>
-</template>
+</template>

package/src/components/blog/BlogInfoSection.vue

@@ -2,9 +2,11 @@
 import { NuxtImg } from '#components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ArrowUpRight01Icon, Calendar03Icon, RefreshIcon } from '@hugeicons/core-free-icons';
+import ArrowUpRight01Icon from '@hugeicons/core-free-icons/ArrowUpRight01Icon';
+import Calendar03Icon from '@hugeicons/core-free-icons/Calendar03Icon';
+import RefreshIcon from '@hugeicons/core-free-icons/RefreshIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 import { formatDateLongItalyTimezone } from '../../lib/utils';
 
 // Props
@@ -12,9 +14,11 @@ const props = withDefaults(defineProps<{
     author: string;
     authorUrl: string;
     authorImageUrl: string;
+    authorBio?: string;
     datePublished: string;
     dateModified?: string | null;
 }>(), {
+    authorBio: '',
     dateModified: null
 });
 
@@ -30,44 +34,45 @@ const showModifiedDate = computed(() => Boolean(props.dateModified) && formatted
 
 <template>
     <!-- Author and date information -->
-    <Card data-aos="blur-up" class="group/author relative overflow-hidden">
-        <!-- Accent glow -->
-        <div aria-hidden="true" class="pointer-events-none absolute -top-16 -left-16 size-48 rounded-full bg-primary/10 blur-3xl" />
+    <Card data-aos="blur-up" class="gap-0! overflow-hidden p-0!">
+        <!-- Author -->
+        <div :class="['flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
+            <!-- Author image -->
+            <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
+                <NuxtImg :src="props.authorImageUrl" :alt="props.author" height="44" width="44" format="avif" quality="40" :sizes="{ 480: '44px', 1280: '44px' }" loading="lazy" decoding="async" class="size-11 rounded border border-border object-cover" />
+            </NuxtLink>
 
-        <CardContent class="relative flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
-            <!-- Author -->
-            <div class="flex items-center gap-4">
-                <!-- Author image -->
-                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="relative shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
-                    <NuxtImg :src="props.authorImageUrl" :alt="props.author" height="56" width="56" format="avif" quality="40" :sizes="{ 480: '56px', 1280: '56px' }" loading="lazy" decoding="async" class="size-14 rounded border border-border object-cover shadow-elevated-sm transition-[scale] duration-300 ease-spring hover:scale-105" />
+            <!-- Author name and bio -->
+            <div class="min-w-0 flex-1">
+                <p class="text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">{{ t('uiVintage.blog.author') }}</p>
+                <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="group/link inline-flex items-center gap-1 text-sm font-semibold text-foreground outline-none transition-colors hover:text-primary focus-visible:underline md:text-base">
+                    {{ props.author }}
+                    <HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4 text-muted-foreground transition-[translate,color] duration-300 ease-spring group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 group-hover/link:text-primary" />
                 </NuxtLink>
-
-                <!-- Author name -->
-                <div class="min-w-0">
-                    <p class="text-[11px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">{{ t('uiVintage.blog.author') }}</p>
-                    <NuxtLink :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="group/link mt-0.5 inline-flex items-center gap-1 text-base font-bold text-foreground outline-none hover:text-primary focus-visible:underline">
-                        {{ props.author }}
-                        <HugeiconsIcon :icon="ArrowUpRight01Icon" class="size-4 transition-[translate] duration-300 ease-spring group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5" />
-                    </NuxtLink>
-                </div>
+                <p v-if="props.authorBio" class="mt-1.5 text-xs leading-relaxed text-muted-foreground md:text-sm">
+                    {{ props.authorBio }}
+                </p>
             </div>
+        </div>
 
-            <!-- Date information -->
-            <div class="flex flex-wrap gap-2 sm:justify-end">
-                <!-- Published date -->
-                <div v-if="props.datePublished" class="flex items-center gap-2 rounded border border-border bg-surface px-3 py-2 text-xs text-muted-foreground">
-                    <HugeiconsIcon :icon="Calendar03Icon" class="size-4 shrink-0 text-primary" />
-                    <span class="font-semibold">{{ t('uiVintage.blog.publishedDate') }}</span>
-                    <time :datetime="props.datePublished" class="text-foreground">{{ formattedPublishedDate }}</time>
-                </div>
+        <!-- Date information -->
+        <div v-if="props.datePublished || showModifiedDate" class="flex flex-wrap items-center gap-x-5 gap-y-2 border-t border-border bg-surface px-5 py-2.5 text-xs text-muted-foreground">
+            <!-- Published date -->
+            <span v-if="props.datePublished" class="inline-flex items-center gap-2">
+                <HugeiconsIcon :icon="Calendar03Icon" class="size-3.5 shrink-0 text-primary" />
+                {{ t('uiVintage.blog.publishedDate') }}
+                <time :datetime="props.datePublished" class="text-foreground">{{ formattedPublishedDate }}</time>
+            </span>
 
-                <!-- Last updated date -->
-                <div v-if="showModifiedDate" class="flex items-center gap-2 rounded border border-border bg-surface px-3 py-2 text-xs text-muted-foreground">
-                    <HugeiconsIcon :icon="RefreshIcon" class="size-4 shrink-0 text-primary" />
-                    <span class="font-semibold">{{ t('uiVintage.blog.lastUpdatedDate') }}</span>
-                    <time :datetime="props.dateModified ?? undefined" class="text-foreground">{{ formattedModifiedDate }}</time>
-                </div>
-            </div>
-        </CardContent>
+            <!-- Divider between the dates (hidden when they wrap on small screens) -->
+            <span v-if="props.datePublished && showModifiedDate" aria-hidden="true" class="hidden h-3.5 w-px bg-border sm:block" />
+
+            <!-- Last updated date -->
+            <span v-if="showModifiedDate" class="inline-flex items-center gap-2">
+                <HugeiconsIcon :icon="RefreshIcon" class="size-3.5 shrink-0 text-primary" />
+                {{ t('uiVintage.blog.lastUpdatedDate') }}
+                <time :datetime="props.dateModified ?? undefined" class="text-foreground">{{ formattedModifiedDate }}</time>
+            </span>
+        </div>
     </Card>
-</template>
+</template>

package/src/components/blog/BlogPostHeader.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { NuxtImg } from '#components';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Badge } from '../ui/badge';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '../ui/breadcrumb';
+import { formatDateLongItalyTimezone, getReadingMinutes } from '../../lib/utils';
+
+// Props
+const props = withDefaults(defineProps<{
+    title: string;
+    description?: string;
+    image?: string;
+    author?: string;
+    authorImageUrl?: string;
+    datePublished?: string;
+    categoryText?: string;
+    categorySlug?: string;
+    tags?: Array<{
+        name: string;
+        slug: string;
+    }>;
+    body?: unknown;
+    readingMinutes?: number | null;
+    blogPath?: string;
+    blogLabel?: string;
+    animated?: boolean;
+}>(), {
+    description: '',
+    image: '',
+    author: '',
+    authorImageUrl: '',
+    datePublished: '',
+    categoryText: '',
+    categorySlug: '',
+    tags: () => [],
+    readingMinutes: null,
+    blogPath: '/blog',
+    blogLabel: '',
+    animated: true
+});
+
+const { t, locale } = useI18n();
+
+// Split the title so each word can rise into place on its own
+const titleWords = computed(() => props.title.split(/\s+/).filter(Boolean));
+
+// Long publication date in the current locale
+const formattedDate = computed(() => formatDateLongItalyTimezone(props.datePublished, locale.value));
+
+// Explicit reading time wins, otherwise estimate it from the body
+const resolvedReadingMinutes = computed(() => {
+    if (props.readingMinutes) return props.readingMinutes;
+    return props.body ? getReadingMinutes(props.body) : null;
+});
+
+// Links built from the blog base path
+const categoryPath = computed(() => `${props.blogPath}/categories/${props.categorySlug}`);
+const tagPath = (slug: string) => `${props.blogPath}/tags/${slug}`;
+
+// Keep only the entrance classes when animations are enabled
+const enter = (classes: string) => props.animated ? classes : '';
+
+// Whether the category link can be built
+const hasCategory = computed(() => Boolean(props.categoryText && props.categorySlug));
+
+// Whether the details row has any column to show
+const hasDetails = computed(() => Boolean(props.author || formattedDate.value || resolvedReadingMinutes.value || hasCategory.value));
+
+const badgeLinkClasses = 'rounded outline-none transition-opacity duration-150 hover:opacity-80 focus-visible:ring-[3px] focus-visible:ring-ring/45';
+
+// Shared classes for the details cells (exposed to the meta slot)
+const detailCellClasses = 'min-w-0 border-t border-l border-border py-4 pl-4 pr-4';
+const detailLabelClasses = 'text-[11px] font-semibold tracking-wider text-muted-foreground uppercase';
+</script>
+
+<template>
+    <header class="relative isolate mb-10 md:mb-14">
+        <!-- Breadcrumbs -->
+        <Breadcrumb :class="enter('animate-uv-fade-up')">
+            <BreadcrumbList>
+                <BreadcrumbItem>
+                    <BreadcrumbLink as-child>
+                        <NuxtLinkLocale :to="props.blogPath">
+                            {{ props.blogLabel || t('uiVintage.blog.breadcrumbBlog') }}
+                        </NuxtLinkLocale>
+                    </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <template v-if="hasCategory">
+                    <BreadcrumbItem>
+                        <BreadcrumbLink as-child>
+                            <NuxtLinkLocale :to="categoryPath">
+                                {{ props.categoryText }}
+                            </NuxtLinkLocale>
+                        </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                </template>
+                <BreadcrumbItem class="min-w-0">
+                    <BreadcrumbPage class="truncate">
+                        {{ props.title }}
+                    </BreadcrumbPage>
+                </BreadcrumbItem>
+            </BreadcrumbList>
+        </Breadcrumb>
+
+        <!-- Title and lede, closed by a rule with a primary segment -->
+        <div class="relative mt-8 border-b border-border pb-8">
+            <span aria-hidden="true" :class="['absolute -bottom-px left-0 h-0.5 w-20 origin-left bg-primary', enter('animate-uv-grow-x')]" :style="props.animated ? { animationDelay: '500ms' } : undefined" />
+
+            <!-- Title (each word rises in) -->
+            <h1 class="text-3xl leading-[1.08] font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl">
+                <template v-for="(word, index) in titleWords" :key="`${word}-${index}`">
+                    <span :class="['inline-block', enter('animate-uv-word-in')]" :style="props.animated ? { animationDelay: `${120 + Math.min(index, 12) * 50}ms` } : undefined">{{ word }}</span>{{ index < titleWords.length - 1 ? ' ' : '' }}
+                </template>
+            </h1>
+
+            <!-- Lede -->
+            <p v-if="props.description" :class="['mt-5 max-w-3xl text-sm leading-relaxed text-muted-foreground md:text-lg', enter('animate-uv-fade-up [animation-delay:450ms]')]">
+                {{ props.description }}
+            </p>
+        </div>
+
+        <!-- Labelled details (columns without data are left out; the meta slot adds more) -->
+        <div v-if="hasDetails || $slots.meta" :class="['overflow-hidden border-b border-border', enter('animate-uv-fade-up [animation-delay:550ms]')]">
+            <dl class="-mt-px -ml-[calc(1rem+1px)] grid grid-cols-2 md:grid-flow-col md:auto-cols-fr md:grid-cols-none">
+                <!-- Author -->
+                <div v-if="props.author" :class="detailCellClasses">
+                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.author') }}</dt>
+                    <dd class="mt-2 flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground">
+                        <NuxtImg v-if="props.authorImageUrl" :src="props.authorImageUrl" :alt="props.author" width="24" height="24" format="avif" quality="40" class="size-6 shrink-0 rounded border border-border object-cover" />
+                        <span class="truncate">{{ props.author }}</span>
+                    </dd>
+                </div>
+
+                <!-- Publication date -->
+                <div v-if="formattedDate" :class="detailCellClasses">
+                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.publishedDate') }}</dt>
+                    <dd class="mt-2 text-sm text-foreground">
+                        <time :datetime="props.datePublished">{{ formattedDate }}</time>
+                    </dd>
+                </div>
+
+                <!-- Reading time -->
+                <div v-if="resolvedReadingMinutes" :class="detailCellClasses">
+                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.readingTime') }}</dt>
+                    <dd class="mt-2 text-sm text-foreground">{{ t('uiVintage.blog.readingTimeValue', { minutes: resolvedReadingMinutes }) }}</dd>
+                </div>
+
+                <!-- Category -->
+                <div v-if="hasCategory" :class="detailCellClasses">
+                    <dt :class="detailLabelClasses">{{ t('uiVintage.blog.category') }}</dt>
+                    <dd class="mt-1.5">
+                        <NuxtLinkLocale :to="categoryPath" :class="['inline-flex', badgeLinkClasses]">
+                            <Badge color="yellow" :text="props.categoryText" pulse />
+                        </NuxtLinkLocale>
+                    </dd>
+                </div>
+
+                <!-- Extra columns from the app (use the same cell structure: a div with a dt and a dd) -->
+                <slot name="meta" :cell-classes="detailCellClasses" :label-classes="detailLabelClasses" />
+            </dl>
+        </div>
+
+        <!-- Tags -->
+        <div v-if="props.tags.length > 0" :class="['mt-4 flex flex-wrap items-center gap-2', enter('animate-uv-fade-up [animation-delay:600ms]')]">
+            <NuxtLinkLocale v-for="tag in props.tags" :key="tag.slug" :to="tagPath(tag.slug)" :class="badgeLinkClasses">
+                <Badge :text="`#${tag.name}`" />
+            </NuxtLinkLocale>
+        </div>
+
+        <!-- Featured image (replaceable through the media slot) -->
+        <slot name="media">
+            <div v-if="props.image" :class="['relative mt-8 aspect-video w-full overflow-hidden rounded border border-border shadow-elevated-xl', enter('animate-uv-fade-up [animation-delay:650ms]')]">
+                <NuxtImg :src="props.image" :alt="props.title" format="avif" quality="50" :sizes="{ 480: '480px', 1536: '896px' }" loading="eager" fetchpriority="high" preload :class="['size-full object-cover', enter('animate-uv-ken-burns')]" />
+                <div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/20 to-transparent" />
+            </div>
+        </slot>
+    </header>
+</template>

package/src/components/blog/BlogProgressBar.vue

@@ -43,16 +43,14 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <div :class="cn('relative h-[3px] w-full bg-border/40 landing-navbar-progress', props.class)"
+    <div :class="cn('h-0.5 w-full bg-border/60 landing-navbar-progress', props.class)"
         role="progressbar"
         :aria-label="resolvedAriaLabel"
         aria-valuemin="0"
         aria-valuemax="100"
         :aria-valuenow="Math.round(progress)">
-        <!-- Fill with a glowing leading edge (the dot stays inside the fill, so it is never clipped and never widens the page) -->
-        <div class="relative h-full bg-linear-to-r from-primary/40 via-primary to-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }">
-            <span v-if="progress > 0" aria-hidden="true" class="absolute top-1/2 right-0 size-2 -translate-y-1/2 rounded-full bg-primary shadow-[0_0_10px_2px_color-mix(in_oklab,var(--primary)_70%,transparent)]" />
-        </div>
+        <!-- Solid fill -->
+        <div class="h-full bg-primary transition-[width] duration-150 ease-out" :style="{ width: `${progress}%` }" />
     </div>
 </template>