@brumaombra/ui-vintage 0.7.11 → 0.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brumaombra/ui-vintage",
-    "version": "0.7.11",
+    "version": "0.7.12",
     "description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
     "private": false,
     "author": "Mauro Brambilla",
@@ -113,14 +113,15 @@
         "vue-i18n": "^9.0.0 || ^10.0.0"
     },
     "dependencies": {
-        "@nuxt/kit": "^4.4.4",
         "@hugeicons/core-free-icons": "4.1.1",
         "@hugeicons/vue": "1.0.5",
         "@internationalized/date": "3.10.0",
+        "@nuxt/kit": "4.4.4",
         "@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",
         "tw-animate-css": "1.4.0"

package/src/components/blog/BlogContentRenderer.vue

@@ -15,18 +15,23 @@ const props = defineProps<{
 .blog-content {
     --blog-content-text: var(--text-primary-light);
     --blog-content-code-bg: var(--bg-selected-light);
+    --blog-content-inline-code-bg: #f9fafb;
+    --blog-content-inline-code-border: var(--border-light);
     color: var(--blog-content-text);
 }
 
 .dark .blog-content {
     --blog-content-text: var(--text-primary-dark);
     --blog-content-code-bg: var(--bg-selected-dark);
+    --blog-content-inline-code-bg: var(--bg-card-dark);
+    --blog-content-inline-code-border: var(--border-dark);
 }
 
 .blog-content :deep(h1:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(h2:not(.not-prose):not(.not-prose *)),
 .blog-content :deep(h3:not(.not-prose):not(.not-prose *)) {
     color: var(--blog-content-text);
+    scroll-margin-top: 6rem;
 }
 
 .blog-content :deep(h1:not(.not-prose):not(.not-prose *)) {
@@ -92,6 +97,23 @@ const props = defineProps<{
 }
 
 .blog-content :deep(p:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
+.blog-content :deep(li:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
+.blog-content :deep(blockquote:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
+.blog-content :deep(td:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)),
+.blog-content :deep(th:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)) {
+    color: var(--blog-content-text);
+    background-color: var(--blog-content-inline-code-bg);
+    border: 1px solid var(--blog-content-inline-code-border);
+    border-radius: 0.25rem;
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1rem;
+    padding: 0.125rem 0.5rem;
+    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+    white-space: nowrap;
+}
+
 .blog-content :deep(pre:not(.not-prose):not(.not-prose *) code:not(.not-prose):not(.not-prose *)) {
     color: var(--blog-content-text);
     background-color: var(--blog-content-code-bg);

package/src/components/blog/SocialShareSidebar.vue

@@ -55,7 +55,7 @@ const socialPlatforms = computed(() => {
 <template>
     <Teleport to="body">
         <!-- Desktop sidebar on the right -->
-        <div class="fixed right-[calc(50%-600px)] top-35 z-20 hidden xl:block">
+        <div class="fixed right-[max(6.875rem,calc(50%-38.125rem))] top-35 z-20 hidden xl:block 2xl:right-[max(0rem,calc(50%-35.125rem))]">
             <Card class="p-5! flex flex-col space-y-4 items-center">
                 <CardContent class="p-0! gap-4 items-center">
                     <!-- Share icon -->

package/src/components/blog/TableOfContents.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { Bookmark01Icon } from '@hugeicons/core-free-icons';
+import { ArrowRight01Icon, Bookmark01Icon, Cancel01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
 import { Accordion } from '../ui/accordion';
+import { Button } from '../ui/button';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet';
 
 interface BlogTocLink {
     id?: string;
@@ -11,6 +14,12 @@ interface BlogTocLink {
     children?: BlogTocLink[];
 }
 
+interface TocHeading {
+    id: string;
+    text: string;
+    level: number;
+}
+
 // Props
 const props = defineProps<{
     content: {
@@ -27,12 +36,33 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
+const DESKTOP_MEDIA_QUERY = '(min-width: 1280px)';
+const HEADING_OBSERVER_RETRY_MS = 100;
+const MAX_HEADING_OBSERVER_RETRIES = 20;
+const MOBILE_CLOSE_SCROLL_DELAY_MS = 320;
+const ACTIVE_HEADING_OFFSET_PX = 120;
+
+const inlineRef = ref<HTMLElement | null>(null);
+const mobileTriggerRef = ref<HTMLElement | null>(null);
+const isDesktop = ref(false);
+const isDocked = ref(false);
+const isMobileOpen = ref(false);
+const activeHeadingId = ref('');
+const visibleHeadingIds = ref<Set<string>>(new Set());
+
+let desktopMediaQuery: MediaQueryList | null = null;
+let sentinelObserver: IntersectionObserver | null = null;
+let headingObserver: IntersectionObserver | null = null;
+let headingRetryTimeout = 0;
+let mobileScrollTimeout = 0;
+let restoreMobileTriggerFocus = true;
+
 // Create the headings list
 const headings = computed(() => {
     const tocLinks = props.content?.body?.toc?.links || props.content?.toc?.links || [];
 
     // Recursive function to flatten the nested links
-    const flattenLinks = (links: BlogTocLink[]): Array<{ id: string; text: string; level: number }> => {
+    const flattenLinks = (links: BlogTocLink[]): TocHeading[] => {
         return links.flatMap(link => {
             // Extract the current heading
             const currentHeading = {
@@ -51,22 +81,212 @@ const headings = computed(() => {
     return flattenLinks(tocLinks).filter(heading => heading.id && heading.text && heading.level >= 2 && heading.level <= 3);
 });
 
-// Smooth scroll to heading
-const scrollToHeading = (id: string) => {
-    const element = document.getElementById(id);
-    if (element) {
+// Title and description for the table of contents
+const tocTitle = computed(() => t('uiVintage.blog.tableOfContents'));
+const tocDescription = computed(() => t('uiVintage.blog.tableOfContentsDescription'));
+
+// Prefer reduced motion for heading scroll
+const prefersReducedMotion = () => {
+    return Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches);
+};
+
+// Resolve the heading that should be marked as the current chapter
+const resolveActiveHeadingId = () => {
+    if (!headings.value.length) return '';
+
+    // Filter the headings to only those currently visible in the viewport
+    const visibleHeadings = headings.value.filter(heading => visibleHeadingIds.value.has(heading.id));
+    if (visibleHeadings.length > 0) {
+        return visibleHeadings[0].id;
+    }
+
+    // If no headings are currently visible, fall back to the first heading in the list
+    let currentId = headings.value[0].id;
+    for (const heading of headings.value) {
+        const element = document.getElementById(heading.id);
+        if (element && element.getBoundingClientRect().top <= ACTIVE_HEADING_OFFSET_PX) {
+            currentId = heading.id;
+        }
+    }
+
+    // Return the resolved current heading ID
+    return currentId;
+};
+
+// Update the active heading based on the current scroll position
+const updateActiveHeading = () => {
+    activeHeadingId.value = resolveActiveHeadingId();
+};
+
+// Track which headings currently intersect the reading window
+const handleHeadingIntersect = (entries: IntersectionObserverEntry[]) => {
+    const nextVisibleIds = new Set(visibleHeadingIds.value);
+
+    // Update the set of visible heading IDs
+    for (const entry of entries) {
+        if (entry.isIntersecting) {
+            nextVisibleIds.add(entry.target.id);
+        } else {
+            nextVisibleIds.delete(entry.target.id);
+        }
+    }
+
+    // Apply the updated set
+    visibleHeadingIds.value = nextVisibleIds;
+    updateActiveHeading();
+};
+
+// Disconnect the heading observer and clear any pending retries
+const disconnectHeadingObserver = () => {
+    headingObserver?.disconnect();
+    headingObserver = null;
+    window.clearTimeout(headingRetryTimeout);
+};
+
+// Bind the heading observer to track which headings are visible in the viewport
+const bindHeadingObserver = () => {
+    disconnectHeadingObserver();
+
+    // If there are no headings, clear the active heading and visible heading IDs
+    if (!headings.value.length) {
+        activeHeadingId.value = '';
+        visibleHeadingIds.value = new Set();
+        return true;
+    }
+
+    // Get the DOM elements corresponding to the headings
+    const elements = headings.value
+        .map(heading => document.getElementById(heading.id))
+        .filter((element): element is HTMLElement => Boolean(element));
+
+    // Content renderer mounts after this component, so headings may not exist yet
+    if (!elements.length) return false;
+
+    headingObserver = new IntersectionObserver(handleHeadingIntersect, {
+        root: null,
+        rootMargin: '-20% 0px -65% 0px',
+        threshold: [0, 1]
+    });
+
+    for (const element of elements) {
+        headingObserver.observe(element);
+    }
+
+    if (!activeHeadingId.value) {
+        activeHeadingId.value = headings.value[0].id;
+    }
+
+    updateActiveHeading();
+    return true;
+};
+
+// Retry binding until the content renderer has mounted its headings
+const scheduleHeadingObserver = (attempt = 0) => {
+    nextTick(() => {
+        if (bindHeadingObserver()) return;
+        if (attempt >= MAX_HEADING_OBSERVER_RETRIES) return;
+
+        headingRetryTimeout = window.setTimeout(() => {
+            scheduleHeadingObserver(attempt + 1);
+        }, HEADING_OBSERVER_RETRY_MS);
+    });
+};
+
+// Disconnect the observer that controls the mobile trigger visibility
+const disconnectSentinelObserver = () => {
+    sentinelObserver?.disconnect();
+    sentinelObserver = null;
+};
+
+// Show the mobile trigger after the in-flow accordion leaves the viewport
+const bindSentinelObserver = () => {
+    disconnectSentinelObserver();
+
+    if (!inlineRef.value) {
+        isDocked.value = false;
+        return;
+    }
+
+    // Show the mobile control once the in-flow accordion has scrolled completely out of view
+    sentinelObserver = new IntersectionObserver(([entry]) => {
+        const hasScrolledPast = !entry.isIntersecting && entry.boundingClientRect.top < 0;
+        isDocked.value = hasScrolledPast;
+    }, {
+        threshold: 0
+    });
+
+    sentinelObserver.observe(inlineRef.value);
+};
+
+// Keep the mobile trigger state in sync with the viewport breakpoint
+const handleDesktopMediaChange = (event: MediaQueryList | MediaQueryListEvent) => {
+    isDesktop.value = event.matches;
+
+    if (event.matches) {
+        isMobileOpen.value = false;
+    }
+
+    nextTick(() => {
+        bindSentinelObserver();
+    });
+};
+
+// Synchronize the mobile sheet state and restore focus after dismissal
+const handleMobileOpenChange = (open: boolean) => {
+    isMobileOpen.value = open;
+
+    // Return focus to the persistent control when the overlay is dismissed
+    if (!open && restoreMobileTriggerFocus) {
+        mobileTriggerRef.value?.focus();
+    }
+
+    restoreMobileTriggerFocus = true;
+};
+
+// Scroll to a heading and optionally close the mobile sheet first
+const scrollToHeading = (id: string, options: { closeMobile?: boolean } = {}) => {
+    const runScroll = () => {
+        const element = document.getElementById(id);
+        if (!element) return;
+
+        if (!element.hasAttribute('tabindex')) {
+            element.setAttribute('tabindex', '-1');
+        }
+
         element.scrollIntoView({
-            behavior: 'smooth',
+            behavior: prefersReducedMotion() ? 'auto' : 'smooth',
             block: 'start',
             inline: 'nearest'
         });
+        element.focus({ preventScroll: true });
+        activeHeadingId.value = id;
+
+        if (window.location.hash !== `#${id}`) {
+            history.replaceState(null, '', `#${id}`);
+        }
+    };
+    restoreMobileTriggerFocus = false;
+
+    if (options.closeMobile && isMobileOpen.value) {
+        mobileTriggerRef.value?.focus();
+        isMobileOpen.value = false;
+        window.clearTimeout(mobileScrollTimeout);
+        mobileScrollTimeout = window.setTimeout(runScroll, MOBILE_CLOSE_SCROLL_DELAY_MS);
+        return;
     }
+
+    runScroll();
+};
+
+// Open the mobile table of contents sheet
+const openMobileToc = () => {
+    isMobileOpen.value = true;
 };
 
 // Get classes for heading button
-const getHeadingButtonClasses = (level: number) => {
+const getHeadingButtonClasses = (level: number, isActive: boolean) => {
     // Base classes for all titles
-    const baseClasses = 'block w-full text-left px-0 py-2 md:px-3 md:py-2 rounded transition-all duration-200 hover:bg-(--bg-selected-light) dark:hover:bg-(--bg-selected-dark) cursor-pointer';
+    const baseClasses = 'block w-full text-left px-2.5 py-2 md:px-3 md:py-2 rounded border-l-2 border-transparent transition-all duration-200 hover:bg-(--bg-selected-light) dark:hover:bg-(--bg-selected-dark) cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 motion-reduce:transition-none';
 
     // Add classes based on heading level
     let levelClasses = '';
@@ -76,17 +296,129 @@ const getHeadingButtonClasses = (level: number) => {
         levelClasses = 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) pl-6! text-xs md:text-sm';
     }
 
+    // Add classes if the heading is active
+    const activeClasses = isActive ? 'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark) border-l-primary text-(--text-primary-light) dark:text-(--text-primary-dark)' : '';
+
     // Return combined classes
-    return [baseClasses, levelClasses];
+    return [baseClasses, levelClasses, activeClasses];
 };
+
+// Watch for changes in the headings and update the visible heading IDs and active heading ID accordingly
+watch(headings, () => {
+    visibleHeadingIds.value = new Set();
+    activeHeadingId.value = headings.value[0]?.id ?? '';
+    scheduleHeadingObserver();
+});
+
+// Watch for changes in the inline table of contents reference and bind the sentinel observer accordingly
+watch(inlineRef, () => {
+    bindSentinelObserver();
+}, { flush: 'post' });
+
+// On component mounted
+onMounted(() => {
+    desktopMediaQuery = window.matchMedia(DESKTOP_MEDIA_QUERY);
+    handleDesktopMediaChange(desktopMediaQuery);
+    desktopMediaQuery.addEventListener('change', handleDesktopMediaChange);
+
+    const hashId = window.location.hash.replace(/^#/, '');
+    if (hashId && headings.value.some(heading => heading.id === hashId)) {
+        activeHeadingId.value = hashId;
+    }
+
+    scheduleHeadingObserver();
+});
+
+// On component unmounted
+onUnmounted(() => {
+    desktopMediaQuery?.removeEventListener('change', handleDesktopMediaChange);
+    disconnectSentinelObserver();
+    disconnectHeadingObserver();
+    window.clearTimeout(mobileScrollTimeout);
+});
 </script>
 
 <template>
-    <Accordion v-if="headings.length > 0" :title="t('uiVintage.blog.tableOfContents')" :icon="Bookmark01Icon">
-        <nav class="space-y-1">
-            <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading.level)">
-                {{ heading.text }}
-            </button>
-        </nav>
-    </Accordion>
-</template>
+    <div v-if="headings.length > 0">
+        <!-- In-flow accordion; replaced by the mobile control after it scrolls away -->
+        <div ref="inlineRef" class="mb-6" :aria-hidden="isDocked" :inert="isDocked">
+            <Accordion :title="tocTitle" :icon="Bookmark01Icon">
+                <nav :aria-label="tocTitle" class="space-y-1">
+                    <button v-for="heading in headings" :key="`inline-${heading.id}`" type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id)">
+                        {{ heading.text }}
+                    </button>
+                </nav>
+            </Accordion>
+        </div>
+
+        <Teleport to="body">
+            <!-- Mobile persistent control -->
+            <Transition name="toc-tab">
+                <button v-if="!isDesktop && isDocked" ref="mobileTriggerRef" type="button" class="fixed top-1/2 left-0 z-20 flex h-16 w-8 -translate-y-1/2 items-center justify-center rounded-r border border-l-0 border-(--border-light) bg-(--bg-card-light) text-(--text-secondary-light) transition-[background-color,color,transform] duration-200 hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) focus-visible:z-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:border-(--border-dark) dark:bg-(--bg-card-dark) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark) motion-reduce:transition-none" :aria-label="t('uiVintage.blog.openTableOfContents')" :aria-expanded="isMobileOpen" aria-haspopup="dialog" aria-controls="toc-mobile-overlay" @click="openMobileToc">
+                    <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" aria-hidden="true" />
+                </button>
+            </Transition>
+
+            <!-- Mobile full-screen overlay -->
+            <Sheet :open="isMobileOpen" @update:open="handleMobileOpenChange">
+                <SheetContent id="toc-mobile-overlay" side="left" class="flex h-full w-full max-w-none flex-col gap-0 border-0 bg-(--bg-card-light) p-0 dark:bg-(--bg-card-dark) sm:max-w-none">
+                    <SheetHeader class="flex-row items-center justify-between gap-4 border-b border-(--border-light) p-5 dark:border-(--border-dark)">
+                        <!-- Mobile table of contents header -->
+                        <div class="flex min-w-0 items-center gap-3">
+                            <!-- Mobile table of contents icon -->
+                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded border border-(--border-light) bg-(--bg-card-light) dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
+                                <HugeiconsIcon :icon="Bookmark01Icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
+                            </div>
+
+                            <!-- Mobile table of contents title and description -->
+                            <div class="min-w-0">
+                                <SheetTitle class="text-sm md:text-base! font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
+                                    {{ tocTitle }}
+                                </SheetTitle>
+                                <SheetDescription class="sr-only">
+                                    {{ tocDescription }}
+                                </SheetDescription>
+                            </div>
+                        </div>
+
+                        <!-- Close button for the mobile table of contents -->
+                        <SheetClose as-child>
+                            <Button type="button" variant="ghost" size="icon-sm" :aria-label="t('uiVintage.blog.closeTableOfContents')">
+                                <HugeiconsIcon :icon="Cancel01Icon" class="size-4" />
+                            </Button>
+                        </SheetClose>
+                    </SheetHeader>
+
+                    <!-- Mobile table of contents navigation -->
+                    <nav :aria-label="tocTitle" class="flex-1 overflow-y-auto p-5">
+                        <div class="space-y-1">
+                            <button v-for="heading in headings" :key="`mobile-${heading.id}`" type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id, { closeMobile: true })">
+                                {{ heading.text }}
+                            </button>
+                        </div>
+                    </nav>
+                </SheetContent>
+            </Sheet>
+        </Teleport>
+    </div>
+</template>
+
+<style scoped>
+.toc-tab-enter-active,
+.toc-tab-leave-active {
+    transition: opacity 0.25s ease;
+}
+
+.toc-tab-enter-from,
+.toc-tab-leave-to {
+    opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+    .toc-tab-enter-active,
+    .toc-tab-leave-active {
+        transition: none;
+    }
+}
+</style>

package/src/components/content/BlogList.vue

@@ -24,7 +24,7 @@ const getIconClasses = () => {
 </script>
 
 <template>
-    <div class="not-prose my-6 sm:my-12">
+    <div class="not-prose my-6 sm:my-8">
         <Card>
             <CardContent class="gap-0">
                 <ul class="text-xs md:text-sm p-0! space-y-6!">

package/src/components/content/BlogTable.vue

@@ -30,7 +30,7 @@ const getCellClasses = (colIndex: number) => {
 </script>
 
 <template>
-    <div class="not-prose my-6 sm:my-12">
+    <div class="not-prose my-6 sm:my-8">
         <Card>
             <CardContent>
                 <div class="w-full overflow-x-auto">

package/src/components/content/CodeBlock.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { CheckmarkCircle02Icon, Copy01Icon, CodeIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { codeToHtml } from 'shiki';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Button } from '../ui/button';
+import { Card } from '../ui/card';
+
+type CodeLanguage = string;
+
+// Props
+const props = withDefaults(defineProps<{
+    code?: string;
+    language?: CodeLanguage;
+    title?: string;
+    copyable?: boolean;
+}>(), {
+    code: '',
+    language: 'text',
+    title: '',
+    copyable: true
+});
+
+const { t } = useI18n();
+const copied = ref(false);
+const highlightedCode = ref('');
+let highlightRequest = 0;
+const resolvedTitle = computed(() => props.title || t('uiVintage.code.title'));
+const displayedCode = computed(() => {
+    if (props.language !== 'json') return props.code;
+
+    try {
+        return JSON.stringify(JSON.parse(props.code), null, 2);
+    } catch {
+        return props.code;
+    }
+});
+
+// Highlight code in the library so all consumers share the same rendering behavior.
+const highlightCode = async () => {
+    const requestId = ++highlightRequest;
+    highlightedCode.value = '';
+
+    if (!displayedCode.value || props.language === 'text') return;
+
+    try {
+        const html = await codeToHtml(displayedCode.value, {
+            lang: props.language,
+            theme: 'github-dark'
+        });
+
+        if (requestId === highlightRequest) {
+            highlightedCode.value = html;
+        }
+    } catch {
+        // Keep the escaped plain-text fallback for unsupported languages.
+    }
+};
+
+watch([displayedCode, () => props.language], highlightCode, { immediate: true });
+
+// Copy the formatted code to the clipboard
+const copyCode = async () => {
+    if (!props.copyable || !displayedCode.value || !navigator.clipboard) {
+        return;
+    }
+
+    await navigator.clipboard.writeText(displayedCode.value);
+    copied.value = true;
+    window.setTimeout(() => {
+        copied.value = false;
+    }, 1800);
+};
+</script>
+
+<template>
+    <div class="not-prose my-6 sm:my-8">
+        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-(--text-primary-light) dark:text-(--text-primary-dark)">
+            <!-- Code header -->
+            <div class="flex items-center justify-between gap-3 border-b border-(--border-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
+                <div class="flex min-w-0 items-center gap-2">
+                    <HugeiconsIcon :icon="CodeIcon" class="size-4 shrink-0 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
+                    <span class="truncate text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">{{ resolvedTitle }}</span>
+                </div>
+
+                <!-- Copy code button -->
+                <Button v-if="props.copyable"
+                    variant="ghost"
+                    size="icon"
+                    class="size-7 text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)"
+                    :aria-label="t('uiVintage.code.copy')"
+                    :title="t('uiVintage.code.copy')"
+                    :disabled="!displayedCode"
+                    @click="copyCode">
+                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-4" />
+                </Button>
+            </div>
+
+            <!-- Code content -->
+            <div v-if="highlightedCode" class="code-block-content overflow-x-auto bg-(--bg-surface-light) dark:bg-(--bg-surface-dark)" v-html="highlightedCode" />
+            <pre v-else class="code-block-content overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) sm:px-5 sm:py-4 sm:text-sm"><code>{{ displayedCode }}</code></pre>
+        </Card>
+    </div>
+</template>
+
+<style scoped>
+.code-block-content :deep(pre) {
+    margin: 0;
+    min-width: max-content;
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+    line-height: 1.5rem;
+}
+
+@media (min-width: 640px) {
+    .code-block-content :deep(pre) {
+        padding: 1rem 1.25rem;
+        font-size: 0.875rem;
+    }
+}
+</style>

package/src/components/content/Flow.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ArrowDown01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card';
+
+type FlowItem = string | {
+    label?: string;
+    title?: string;
+    description?: string;
+};
+
+// Props
+const props = withDefaults(defineProps<{
+    title?: string;
+    description?: string;
+    items?: FlowItem[];
+    orientation?: 'horizontal' | 'vertical';
+}>(), {
+    title: '',
+    description: '',
+    items: () => [],
+    orientation: 'horizontal'
+});
+
+// Get item label
+const getItemLabel = (item: FlowItem) => {
+    if (typeof item === 'string') return item;
+    return item.label || item.title || '';
+};
+
+// Get item description
+const getItemDescription = (item: FlowItem) => {
+    if (typeof item === 'string') return '';
+    return item.description || '';
+};
+
+// Check if orientation is vertical
+const isVertical = () => {
+    return props.orientation === 'vertical';
+};
+</script>
+
+<template>
+    <div class="not-prose my-6 sm:my-8">
+        <Card>
+            <!-- Card header -->
+            <CardHeader v-if="props.title || props.description">
+                <!-- Card title -->
+                <CardTitle v-if="props.title">
+                    {{ props.title }}
+                </CardTitle>
+
+                <!-- Card description -->
+                <CardDescription v-if="props.description">
+                    {{ props.description }}
+                </CardDescription>
+            </CardHeader>
+
+            <!-- Card content -->
+            <CardContent>
+                <div :class="[isVertical() ? 'flex flex-col gap-3' : 'flex flex-col gap-3 md:flex-row md:items-stretch']">
+                    <!-- Flow items -->
+                    <template v-for="(item, index) in props.items" :key="`${getItemLabel(item)}-${index}`">
+                        <!-- Flow item -->
+                        <Card class="flex-1 overflow-hidden md:flex md:items-center">
+                            <CardContent class="w-full gap-3 md:justify-center">
+                                <!-- Flow item header -->
+                                <div class="inline-flex items-center gap-3 text-xs font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
+                                    <!-- Flow item number -->
+                                    <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded border border-(--border-light) bg-(--bg-card-light) text-xs font-semibold text-(--text-secondary-light) dark:border-(--border-dark) dark:bg-(--bg-card-dark) dark:text-(--text-secondary-dark)">
+                                        {{ index + 1 }}
+                                    </span>
+
+                                    <!-- Flow item label -->
+                                    <span>{{ getItemLabel(item) }}</span>
+                                </div>
+
+                                <!-- Flow item description -->
+                                <p v-if="getItemDescription(item)" class="text-xs leading-6 text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:leading-5">
+                                    {{ getItemDescription(item) }}
+                                </p>
+                            </CardContent>
+                        </Card>
+
+                        <!-- Flow item separator -->
+                        <div v-if="index < props.items.length - 1" class="flex items-center justify-center text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
+                            <!-- Flow item separator for vertical orientation -->
+                            <HugeiconsIcon v-if="isVertical()" :icon="ArrowDown01Icon" class="size-5 shrink-0" />
+
+                            <!-- Flow item separator for horizontal orientation -->
+                            <HugeiconsIcon v-else :icon="ArrowRight01Icon" class="hidden size-5 shrink-0 md:block" />
+                            <HugeiconsIcon v-if="!isVertical()" :icon="ArrowDown01Icon" class="size-5 shrink-0 md:hidden" />
+                        </div>
+                    </template>
+                </div>
+            </CardContent>
+        </Card>
+    </div>
+</template>

package/src/components/content/ProsePre.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import CodeBlock from './CodeBlock.vue';
+import Terminal from './Terminal.vue';
+
+// Props
+const props = withDefaults(defineProps<{
+    code?: string;
+    language?: string;
+}>(), {
+    code: '',
+    language: ''
+});
+
+const normalizedLanguage = computed(() => props.language.toLowerCase());
+const isShellBlock = computed(() => ['bash', 'sh', 'shell'].includes(normalizedLanguage.value));
+const commands = computed(() => props.code.replace(/\n$/, '').split(/\r?\n/));
+</script>
+
+<template>
+    <!-- Terminal value -->
+    <Terminal v-if="isShellBlock" :commands="commands" />
+
+    <!-- Code block -->
+    <CodeBlock v-else-if="normalizedLanguage" :code="props.code" :language="normalizedLanguage" />
+
+    <!-- Fallback pre block -->
+    <pre v-else><slot /></pre>
+</template>

package/src/components/content/Terminal.vue

@@ -41,7 +41,7 @@ const copyCommands = async () => {
 </script>
 
 <template>
-    <div class="not-prose my-6 sm:my-12">
+    <div class="not-prose my-6 sm:my-8">
         <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-(--text-primary-light) dark:text-(--text-primary-dark)">
             <!-- Terminal header -->
             <div class="flex items-center justify-between gap-3 border-b border-(--border-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">

package/src/components/content/index.ts

@@ -1,4 +1,7 @@
+export { default as Terminal } from './Terminal.vue';
+export { default as CodeBlock } from './CodeBlock.vue';
+export { default as ProsePre } from './ProsePre.vue';
 export { default as BlogList } from './BlogList.vue';
 export { default as BlogTable } from './BlogTable.vue';
-export { default as ProseHr } from './ProseHr.vue';
-export { default as Terminal } from './Terminal.vue';
+export { default as Flow } from './Flow.vue';
+export { default as ProseHr } from './ProseHr.vue';

package/src/i18n/de.json

@@ -42,6 +42,11 @@
             "copy": "Befehle kopieren",
             "copied": "Befehle kopiert"
         },
+        "code": {
+            "title": "Code",
+            "copy": "Code kopieren",
+            "copied": "Code kopiert"
+        },
         "footer": {
             "madeWith": "Gemacht mit",
             "by": "von",
@@ -51,6 +56,9 @@
             "readMore": "Weiterlesen",
             "goToPost": "Zum Beitrag",
             "tableOfContents": "Inhaltsverzeichnis",
+            "tableOfContentsDescription": "Zu einem Abschnitt dieses Artikels springen",
+            "openTableOfContents": "Inhaltsverzeichnis offnen",
+            "closeTableOfContents": "Inhaltsverzeichnis schliessen",
             "loadMoreWithNumbers": "Mehr laden ({current}/{total})",
             "author": "Autor",
             "publishedDate": "Veroffentlicht",

package/src/i18n/en.json

@@ -42,6 +42,11 @@
             "copy": "Copy commands",
             "copied": "Commands copied"
         },
+        "code": {
+            "title": "Code",
+            "copy": "Copy code",
+            "copied": "Code copied"
+        },
         "footer": {
             "madeWith": "Made with",
             "by": "by",
@@ -51,6 +56,9 @@
             "readMore": "Read more",
             "goToPost": "Go to post",
             "tableOfContents": "Table of contents",
+            "tableOfContentsDescription": "Jump to a section of this article",
+            "openTableOfContents": "Open table of contents",
+            "closeTableOfContents": "Close table of contents",
             "loadMoreWithNumbers": "Load more ({current}/{total})",
             "author": "Author",
             "publishedDate": "Published",

package/src/i18n/es.json

@@ -42,6 +42,11 @@
             "copy": "Copiar comandos",
             "copied": "Comandos copiados"
         },
+        "code": {
+            "title": "Codigo",
+            "copy": "Copiar codigo",
+            "copied": "Codigo copiado"
+        },
         "footer": {
             "madeWith": "Hecho con",
             "by": "por",
@@ -51,6 +56,9 @@
             "readMore": "Leer mas",
             "goToPost": "Ir al articulo",
             "tableOfContents": "Tabla de contenidos",
+            "tableOfContentsDescription": "Ir a una seccion de este articulo",
+            "openTableOfContents": "Abrir tabla de contenidos",
+            "closeTableOfContents": "Cerrar tabla de contenidos",
             "loadMoreWithNumbers": "Cargar mas ({current}/{total})",
             "author": "Autor",
             "publishedDate": "Publicado",

package/src/i18n/fr.json

@@ -42,6 +42,11 @@
             "copy": "Copier les commandes",
             "copied": "Commandes copiees"
         },
+        "code": {
+            "title": "Code",
+            "copy": "Copier le code",
+            "copied": "Code copie"
+        },
         "footer": {
             "madeWith": "Fait avec",
             "by": "par",
@@ -51,6 +56,9 @@
             "readMore": "Lire la suite",
             "goToPost": "Aller a l'article",
             "tableOfContents": "Table des matieres",
+            "tableOfContentsDescription": "Aller a une section de cet article",
+            "openTableOfContents": "Ouvrir la table des matieres",
+            "closeTableOfContents": "Fermer la table des matieres",
             "loadMoreWithNumbers": "Charger plus ({current}/{total})",
             "author": "Auteur",
             "publishedDate": "Publie",

package/src/i18n/it.json

@@ -42,6 +42,11 @@
             "copy": "Copia comandi",
             "copied": "Comandi copiati"
         },
+        "code": {
+            "title": "Codice",
+            "copy": "Copia codice",
+            "copied": "Codice copiato"
+        },
         "footer": {
             "madeWith": "Fatto con",
             "by": "da",
@@ -51,6 +56,9 @@
             "readMore": "Leggi di piu",
             "goToPost": "Vai all'articolo",
             "tableOfContents": "Indice dei contenuti",
+            "tableOfContentsDescription": "Vai a una sezione dell'articolo",
+            "openTableOfContents": "Apri l'indice dei contenuti",
+            "closeTableOfContents": "Chiudi l'indice dei contenuti",
             "loadMoreWithNumbers": "Carica altro ({current}/{total})",
             "author": "Autore",
             "publishedDate": "Pubblicato",

package/src/i18n/ja.json

@@ -42,6 +42,11 @@
             "copy": "コマンドをコピー",
             "copied": "コマンドをコピーしました"
         },
+        "code": {
+            "title": "コード",
+            "copy": "コードをコピー",
+            "copied": "コードをコピーしました"
+        },
         "footer": {
             "madeWith": "愛を込めて",
             "by": "by",
@@ -51,6 +56,9 @@
             "readMore": "続きを読む",
             "goToPost": "記事を開く",
             "tableOfContents": "目次",
+            "tableOfContentsDescription": "この記事のセクションに移動",
+            "openTableOfContents": "目次を開く",
+            "closeTableOfContents": "目次を閉じる",
             "loadMoreWithNumbers": "さらに読み込む ({current}/{total})",
             "author": "著者",
             "publishedDate": "公開日",

package/src/i18n/pt.json

@@ -42,6 +42,11 @@
             "copy": "Copiar comandos",
             "copied": "Comandos copiados"
         },
+        "code": {
+            "title": "Codigo",
+            "copy": "Copiar codigo",
+            "copied": "Codigo copiado"
+        },
         "footer": {
             "madeWith": "Feito com",
             "by": "por",
@@ -51,6 +56,9 @@
             "readMore": "Ler mais",
             "goToPost": "Ir para o artigo",
             "tableOfContents": "Indice",
+            "tableOfContentsDescription": "Ir para uma secao deste artigo",
+            "openTableOfContents": "Abrir indice",
+            "closeTableOfContents": "Fechar indice",
             "loadMoreWithNumbers": "Carregar mais ({current}/{total})",
             "author": "Autor",
             "publishedDate": "Publicado",

package/src/i18n/ru.json

@@ -42,6 +42,11 @@
             "copy": "Копировать команды",
             "copied": "Команды скопированы"
         },
+        "code": {
+            "title": "Код",
+            "copy": "Копировать код",
+            "copied": "Код скопирован"
+        },
         "footer": {
             "madeWith": "Сделано с",
             "by": "от",
@@ -51,6 +56,9 @@
             "readMore": "Читать далее",
             "goToPost": "Перейти к статье",
             "tableOfContents": "Содержание",
+            "tableOfContentsDescription": "Перейти к разделу статьи",
+            "openTableOfContents": "Открыть содержание",
+            "closeTableOfContents": "Закрыть содержание",
             "loadMoreWithNumbers": "Загрузить еще ({current}/{total})",
             "author": "Автор",
             "publishedDate": "Опубликовано",

package/src/i18n/zh.json

@@ -42,6 +42,11 @@
             "copy": "复制命令",
             "copied": "命令已复制"
         },
+        "code": {
+            "title": "代码",
+            "copy": "复制代码",
+            "copied": "代码已复制"
+        },
         "footer": {
             "madeWith": "用",
             "by": "由",
@@ -51,6 +56,9 @@
             "readMore": "阅读更多",
             "goToPost": "前往文章",
             "tableOfContents": "目录",
+            "tableOfContentsDescription": "跳转到本文的一个部分",
+            "openTableOfContents": "打开目录",
+            "closeTableOfContents": "关闭目录",
             "loadMoreWithNumbers": "加载更多 ({current}/{total})",
             "author": "作者",
             "publishedDate": "发布时间",