@brumaombra/ui-vintage 0.8.2 → 0.9.1

package/src/components/confirm-dialog/confirm-dialog-state.ts

@@ -120,10 +120,10 @@ const clearCurrentConfirmDialog = () => {
     openNextConfirmDialog();
 };
 
-// Close the current dialog after the leave transition
-const scheduleCloseCurrentConfirmDialog = () => {
-    // Guard against missing or already closed dialogs
-    if (!confirmDialogState.current || !confirmDialogState.isOpen) return;
+// Close the current dialog after the leave transition (only if it is still the given request)
+const scheduleCloseCurrentConfirmDialog = (request: ConfirmDialogRequest) => {
+    // Guard against missing, replaced, or already closed dialogs
+    if (confirmDialogState.current !== request || !confirmDialogState.isOpen) return;
     confirmDialogState.isOpen = false;
 
     // Clear any existing close timer to avoid racing conditions
@@ -138,40 +138,40 @@ const scheduleCloseCurrentConfirmDialog = () => {
     }, DIALOG_CLOSE_DURATION_MS);
 };
 
-// Resolve the dialog as cancelled
+// Resolve the dialog as cancelled (ignored while a confirm or cancel handler is still running)
 export const closeConfirmDialog = () => {
     const current = confirmDialogState.current;
-    if (!current || !confirmDialogState.isOpen) return;
+    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
     current.resolve(false);
-    scheduleCloseCurrentConfirmDialog();
+    scheduleCloseCurrentConfirmDialog(current);
 };
 
-// Run the cancel handler for the active dialog
-export const cancelActiveConfirmDialog = async () => {
+// Run a dialog handler, then resolve and close the dialog it belongs to
+const runConfirmDialogHandler = async (handler: (() => void | Promise<void>) | null, result: boolean) => {
     const current = confirmDialogState.current;
-    if (!current || confirmDialogState.busy) return;
+    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
     confirmDialogState.busy = true;
 
     try {
-        await current.options.onCancel?.();
+        await handler?.();
+        current.resolve(result);
+    } catch (error) {
+        // Settle the caller's promise even when the handler throws, then surface the error
         current.resolve(false);
+        throw error;
     } finally {
-        scheduleCloseCurrentConfirmDialog();
+        scheduleCloseCurrentConfirmDialog(current);
     }
 };
 
+// Run the cancel handler for the active dialog
+export const cancelActiveConfirmDialog = async () => {
+    await runConfirmDialogHandler(confirmDialogState.current?.options.onCancel ?? null, false);
+};
+
 // Run the confirm handler for the active dialog
 export const confirmActiveDialog = async () => {
-    const current = confirmDialogState.current;
-    if (!current || confirmDialogState.busy) return;
-    confirmDialogState.busy = true;
-
-    try {
-        await current.options.onConfirm?.();
-        current.resolve(true);
-    } finally {
-        scheduleCloseCurrentConfirmDialog();
-    }
+    await runConfirmDialogHandler(confirmDialogState.current?.options.onConfirm ?? null, true);
 };
 
 // Queue and show a confirm dialog

package/src/components/content/BlogList.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { Cancel01Icon, CheckmarkCircle02Icon, CircleSmallIcon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -12,64 +13,40 @@ const props = withDefaults(defineProps<{
     variant: 'checkmark'
 });
 
-// Icon container classes
-const getIconContainerClasses = () => {
+// Marker classes
+const getMarkerClasses = () => {
     const toneClasses = {
-        checkmark: 'border-green-200 bg-green-50 dark:border-green-900/50 dark:bg-green-950/30',
-        cross: 'border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30',
-        numbered: 'border-primary/30 bg-primary/10',
-        circle: 'border-primary/30 bg-primary/10'
+        checkmark: 'rounded bg-success/10 text-success',
+        cross: 'rounded bg-destructive/10 text-destructive',
+        numbered: 'text-[11px] font-semibold tabular-nums text-primary',
+        circle: ''
     };
-    return ['flex items-center justify-center size-8 border rounded mr-4 shrink-0', toneClasses[props.variant]];
+    return ['mt-px flex size-5 shrink-0 items-center justify-center', toneClasses[props.variant]];
 };
 
-// Icon color classes
-const getIconClasses = () => {
-    const toneClasses = {
-        checkmark: 'text-green-600 dark:text-green-400',
-        cross: 'text-red-600 dark:text-red-400',
-        numbered: 'text-primary',
-        circle: 'text-primary'
-    };
-    return ['text-xs size-4', toneClasses[props.variant]];
+// Format the item number with a leading zero
+const formatNumber = (index: number) => {
+    return String(index + 1).padStart(2, '0');
 };
 </script>
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card data-aos="blur-up">
-            <CardContent class="gap-0">
-                <ul class="text-xs md:text-sm p-0! space-y-6!">
-                    <li v-for="(item, index) in props.items" :key="index" data-aos="blur-up" :data-aos-delay="100 + index * 80" class="flex items-center">
-                        <!-- Circle -->
-                        <div v-if="props.variant === 'circle'" :class="getIconContainerClasses()">
-                            <HugeiconsIcon :icon="CircleSmallIcon" :class="getIconClasses()" />
-                        </div>
-
-                        <!-- Checkmark -->
-                        <div v-else-if="props.variant === 'checkmark'" :class="getIconContainerClasses()">
-                            <HugeiconsIcon :icon="CheckmarkCircle02Icon" :class="getIconClasses()" />
-                        </div>
-
-                        <!-- Numbered -->
-                        <div v-else-if="props.variant === 'numbered'" :class="getIconContainerClasses()">
-                            <span :class="[getIconClasses(), 'font-semibold']">{{ index + 1 }}</span>
-                        </div>
-
-                        <!-- Cross -->
-                        <div v-else-if="props.variant === 'cross'" :class="getIconContainerClasses()">
-                            <HugeiconsIcon :icon="Cancel01Icon" :class="getIconClasses()" />
-                        </div>
-
-                        <!-- Content -->
-                        <div class="flex-1">
-                            <div class="text-foreground leading-relaxed">
-                                {{ item }}
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </CardContent>
+        <Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
+            <ul class="divide-y divide-border">
+                <li v-for="(item, index) in props.items" :key="index" data-aos="blur-up" :data-aos-delay="100 + index * 80" class="flex items-start gap-3 px-4 py-3.5 text-xs leading-relaxed text-foreground sm:px-5 md:text-sm">
+                    <!-- Marker -->
+                    <span aria-hidden="true" :class="getMarkerClasses()">
+                        <HugeiconsIcon v-if="props.variant === 'checkmark'" :icon="Tick02Icon" :stroke-width="2.5" class="size-3" />
+                        <HugeiconsIcon v-else-if="props.variant === 'cross'" :icon="Cancel01Icon" :stroke-width="2.5" class="size-3" />
+                        <template v-else-if="props.variant === 'numbered'">{{ formatNumber(index) }}</template>
+                        <span v-else class="size-1.5 rounded-full bg-primary" />
+                    </span>
+
+                    <!-- Content -->
+                    <span class="flex-1">{{ item }}</span>
+                </li>
+            </ul>
         </Card>
     </div>
-</template>
+</template>

package/src/components/content/BlogTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
 
 // Props
@@ -15,46 +15,42 @@ const props = withDefaults(defineProps<{
 
 // Header cell classes
 const getHeaderClasses = (colIndex: number) => {
-    const baseClasses = 'text-left font-semibold text-foreground';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-primary/10 text-primary' : '';
+    const baseClasses = 'h-10 px-4 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:px-5';
+    const highlightClass = props.highlightCol === colIndex ? 'text-primary shadow-[inset_0_-2px_0_var(--primary)]' : '';
     return [baseClasses, highlightClass];
 };
 
 // Body cell classes
 const getCellClasses = (colIndex: number) => {
-    const baseClasses = 'align-top text-foreground leading-relaxed whitespace-normal';
-    const firstColClass = colIndex === 0 ? 'font-semibold text-muted-foreground' : '';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-primary/5 font-semibold' : '';
+    const baseClasses = 'min-w-32 px-4 py-3 align-top leading-relaxed whitespace-normal sm:px-5';
+    const firstColClass = colIndex === 0 ? 'font-medium text-foreground' : 'text-muted-foreground';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-primary/5 text-foreground' : '';
     return [baseClasses, firstColClass, highlightClass];
 };
 </script>
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card data-aos="blur-up">
-            <CardContent>
-                <div class="w-full overflow-x-auto">
-                    <Table class="w-full text-sm text-left">
-                        <!-- Table header -->
-                        <TableHeader>
-                            <TableRow class="bg-transparent text-sm text-muted-foreground hover:bg-transparent">
-                                <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
-                                    {{ header }}
-                                </TableHead>
-                            </TableRow>
-                        </TableHeader>
+        <Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
+            <Table class="w-full text-left text-sm">
+                <!-- Table header -->
+                <TableHeader>
+                    <TableRow class="bg-surface hover:bg-surface">
+                        <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
+                            {{ header }}
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
 
-                        <!-- Table body -->
-                        <TableBody>
-                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-muted-foreground transition-colors duration-150 hover:bg-surface/70">
-                                <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
-                                    {{ cell }}
-                                </TableCell>
-                            </TableRow>
-                        </TableBody>
-                    </Table>
-                </div>
-            </CardContent>
+                <!-- Table body -->
+                <TableBody>
+                    <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="last:border-b-0 hover:bg-surface/60">
+                        <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
+                            {{ cell }}
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
         </Card>
     </div>
-</template>
+</template>

package/src/components/content/CodeBlock.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { CheckmarkCircle02Icon, Copy01Icon, CodeIcon } from '@hugeicons/core-free-icons';
+import CheckmarkCircle02Icon from '@hugeicons/core-free-icons/CheckmarkCircle02Icon';
+import CodeIcon from '@hugeicons/core-free-icons/CodeIcon';
+import Copy01Icon from '@hugeicons/core-free-icons/Copy01Icon';
 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;
 
@@ -27,15 +27,31 @@ const copied = ref(false);
 const highlightedCode = ref('');
 let highlightRequest = 0;
 const resolvedTitle = computed(() => props.title || t('uiVintage.code.title'));
+const languageLabels: Record<string, string> = {
+    js: 'JavaScript',
+    javascript: 'JavaScript',
+    ts: 'TypeScript',
+    typescript: 'TypeScript',
+    vue: 'Vue',
+    html: 'HTML',
+    css: 'CSS',
+    json: 'JSON',
+    md: 'Markdown',
+    markdown: 'Markdown',
+    yaml: 'YAML',
+    yml: 'YAML',
+};
+const languageLabel = computed(() => props.language === 'text' ? t('uiVintage.code.plainText') : languageLabels[props.language] || props.language);
 const displayedCode = computed(() => {
-    if (props.language !== 'json') return props.code;
+    if (props.language !== 'json') return props.code.replace(/\n$/, '');
 
     try {
         return JSON.stringify(JSON.parse(props.code), null, 2);
     } catch {
-        return props.code;
+        return props.code.replace(/\n$/, '');
     }
 });
+const codeLines = computed(() => displayedCode.value.split(/\r?\n/));
 
 // Highlight code in the library so all consumers share the same rendering behavior.
 const highlightCode = async () => {
@@ -45,9 +61,12 @@ const highlightCode = async () => {
     if (!displayedCode.value || props.language === 'text') return;
 
     try {
+        // Load the highlighter only when a code block is rendered, so pages without code never download it
+        const { codeToHtml } = await import('shiki');
         const html = await codeToHtml(displayedCode.value, {
             lang: props.language,
-            theme: 'github-dark'
+            themes: { light: 'github-light', dark: 'github-dark' },
+            defaultColor: false
         });
 
         if (requestId === highlightRequest) {
@@ -76,31 +95,59 @@ const copyCode = async () => {
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card data-aos="blur-up" class="gap-0! sm:gap-0! overflow-hidden p-0! text-foreground">
-            <!-- Code header -->
-            <div class="flex items-center justify-between gap-3 border-b border-border bg-card px-3 py-2 sm:px-4">
-                <div class="flex min-w-0 items-center gap-2">
-                    <HugeiconsIcon :icon="CodeIcon" class="size-4 shrink-0 text-primary" />
-                    <span class="truncate text-xs font-semibold text-muted-foreground">{{ resolvedTitle }}</span>
-                </div>
+        <div data-aos="blur-up" data-code-window class="overflow-hidden rounded border border-border bg-card text-foreground shadow-elevated-sm">
+            <!-- Window title bar -->
+            <div class="relative flex h-8 items-center border-b border-border bg-surface px-3">
+                <!-- Traffic lights -->
+                <span aria-hidden="true" class="flex items-center gap-2">
+                    <span class="size-3 rounded-full bg-destructive/85" />
+                    <span class="size-3 rounded-full bg-warning/85" />
+                    <span class="size-3 rounded-full bg-success/85" />
+                </span>
+
+                <!-- Window title -->
+                <div class="pointer-events-none absolute inset-x-24 truncate text-center text-xs text-muted-foreground">{{ resolvedTitle }}</div>
 
                 <!-- Copy code button -->
                 <Button v-if="props.copyable"
                     variant="ghost"
                     size="icon"
-                    class="size-7 text-muted-foreground hover:bg-accent hover:text-foreground"
-                    :aria-label="t('uiVintage.code.copy')"
-                    :title="t('uiVintage.code.copy')"
+                    class="ml-auto size-6 text-muted-foreground hover:bg-accent hover:text-foreground"
+                    :aria-label="copied ? t('uiVintage.code.copied') : t('uiVintage.code.copy')"
+                    :title="copied ? t('uiVintage.code.copied') : t('uiVintage.code.copy')"
                     :disabled="!displayedCode"
                     @click="copyCode">
-                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-4" />
+                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-3.5" />
                 </Button>
+
+                <!-- Announce the copy to screen readers -->
+                <span v-if="props.copyable" class="sr-only" aria-live="polite">{{ copied ? t('uiVintage.code.copied') : '' }}</span>
+            </div>
+
+            <!-- Editor tabs -->
+            <div class="flex h-9 items-stretch border-b border-border bg-surface">
+                <!-- Active tab -->
+                <div class="flex min-w-0 items-center gap-2 -mb-px border-r border-border border-t-2 border-t-primary bg-card px-3 text-foreground">
+                    <HugeiconsIcon :icon="CodeIcon" class="size-3.5 shrink-0 text-primary" />
+                    <span class="truncate text-xs">{{ resolvedTitle }}</span>
+                </div>
             </div>
 
             <!-- Code content -->
-            <div v-if="highlightedCode" class="code-block-content overflow-x-auto bg-surface" v-html="highlightedCode" />
-            <pre v-else class="code-block-content overflow-x-auto bg-surface px-4 py-3 text-xs leading-6 sm:px-5 sm:py-4 sm:text-sm"><code>{{ displayedCode }}</code></pre>
-        </Card>
+            <div v-if="highlightedCode" class="code-block-content uv-code-block-content overflow-x-auto" v-html="highlightedCode" />
+            <div v-else class="code-block-content overflow-x-auto">
+                <pre><code><template v-for="(line, index) in codeLines" :key="index"><span class="line">{{ line }}</span>{{ index < codeLines.length - 1 ? '\n' : '' }}</template></code></pre>
+            </div>
+
+            <!-- Status bar -->
+            <div class="flex h-6 items-center justify-between gap-3 border-t border-border bg-surface px-3 text-[11px] text-muted-foreground">
+                <span class="truncate">{{ t('uiVintage.code.position', { line: codeLines.length, column: 1 }) }}</span>
+                <span class="flex shrink-0 items-center gap-3">
+                    <span>UTF-8</span>
+                    <span>{{ languageLabel }}</span>
+                </span>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -108,15 +155,44 @@ const copyCode = async () => {
 .code-block-content :deep(pre) {
     margin: 0;
     min-width: max-content;
-    padding: 0.75rem 1rem;
+    padding: 0.75rem 1rem 0.75rem 0;
+    background-color: transparent !important;
+    color: var(--foreground);
     font-size: 0.75rem;
     line-height: 1.5rem;
+    counter-reset: line;
+}
+
+/* Line numbers in the editor gutter */
+.code-block-content :deep(.line)::before {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 2.75rem;
+    margin-right: 1rem;
+    padding-right: 0.25rem;
+    text-align: right;
+    color: color-mix(in oklab, var(--muted-foreground) 65%, transparent);
+    user-select: none;
 }
 
 @media (min-width: 640px) {
     .code-block-content :deep(pre) {
-        padding: 1rem 1.25rem;
+        padding: 1rem 1.25rem 1rem 0;
         font-size: 0.875rem;
     }
 }
-</style>
+</style>
+
+<style>
+/* Shiki emits both themes as CSS variables; pick the one matching the library's `.dark` class and drop Nuxt Content's per-token backgrounds */
+.uv-code-block-content .shiki span {
+    color: var(--shiki-light);
+    background-color: transparent;
+}
+
+.dark .uv-code-block-content .shiki span {
+    color: var(--shiki-dark);
+    background-color: transparent;
+}
+</style>

package/src/components/content/Flow.vue

@@ -1,6 +1,4 @@
 <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 | {
@@ -38,6 +36,11 @@ const getItemDescription = (item: FlowItem) => {
 const isVertical = () => {
     return props.orientation === 'vertical';
 };
+
+// Format the step number with a leading zero
+const formatNumber = (index: number) => {
+    return String(index + 1).padStart(2, '0');
+};
 </script>
 
 <template>
@@ -58,42 +61,33 @@ const isVertical = () => {
 
             <!-- 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 data-aos="blur-up" :data-aos-delay="100 + index * 90" class="flex-1 overflow-hidden transition-[border-color,translate] duration-300 ease-spring hover:-translate-y-0.5 hover:border-primary/40 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-foreground">
-                                    <!-- Flow item number -->
-                                    <span class="inline-flex size-8 shrink-0 items-center justify-center rounded border border-primary/30 bg-primary/10 text-xs font-bold text-primary">
-                                        {{ 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-muted-foreground md:leading-5">
-                                    {{ getItemDescription(item) }}
-                                </p>
-                            </CardContent>
-                        </Card>
+                <ol :class="['flex flex-col', !isVertical() && 'md:flex-row md:gap-4']">
+                    <!-- Flow step -->
+                    <li v-for="(item, index) in props.items"
+                        :key="`${getItemLabel(item)}-${index}`"
+                        data-aos="blur-up"
+                        :data-aos-delay="100 + index * 90"
+                        :class="['relative flex gap-4 pb-6 last:pb-0', !isVertical() && 'md:flex-1 md:flex-col md:gap-3 md:pb-0']">
+                        <!-- Step number -->
+                        <span class="relative z-10 flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 bg-card text-[11px] font-semibold tabular-nums text-primary">
+                            {{ formatNumber(index) }}
+                        </span>
 
-                        <!-- Flow item separator -->
-                        <div v-if="index < props.items.length - 1" data-aos="blur-up" :data-aos-delay="140 + index * 90" class="flex items-center justify-center text-primary">
-                            <!-- Flow item separator for vertical orientation -->
-                            <HugeiconsIcon v-if="isVertical()" :icon="ArrowDown01Icon" class="size-5 shrink-0" />
+                        <!-- Connector to the next step -->
+                        <span v-if="index < props.items.length - 1"
+                            aria-hidden="true"
+                            :class="['absolute top-8 bottom-1 left-3.5 w-px bg-border', !isVertical() && 'md:top-3.5 md:bottom-auto md:left-10 md:-right-2 md:h-px md:w-auto md:bg-linear-to-r md:from-primary/40 md:to-border']" />
 
-                            <!-- 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" />
+                        <!-- Step text -->
+                        <div :class="['flex min-w-0 flex-col gap-1 pt-1', !isVertical() && 'md:pt-0']">
+                            <span class="text-xs font-semibold leading-5 text-foreground md:text-sm">{{ getItemLabel(item) }}</span>
+                            <p v-if="getItemDescription(item)" class="text-xs leading-5 text-muted-foreground">
+                                {{ getItemDescription(item) }}
+                            </p>
                         </div>
-                    </template>
-                </div>
+                    </li>
+                </ol>
             </CardContent>
         </Card>
     </div>
-</template>
+</template>

package/src/components/content/ProseHr.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChartLineData02Icon } from '@hugeicons/core-free-icons';
+import ChartLineData02Icon from '@hugeicons/core-free-icons/ChartLineData02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
@@ -15,15 +15,15 @@ const props = withDefaults(defineProps<{
     <div aria-hidden="true" data-aos="blur-up" class="not-prose my-8 sm:my-14">
         <div class="flex items-center gap-3 sm:gap-4">
             <!-- Left line -->
-            <div class="h-px flex-1 bg-linear-to-r from-transparent via-border to-primary/50" />
+            <div class="h-px flex-1 bg-linear-to-r from-transparent via-border to-primary/40" />
 
             <!-- Icon in the middle -->
-            <div class="flex size-10 rotate-45 items-center justify-center rounded border border-primary/30 bg-card shadow-glow">
-                <HugeiconsIcon :icon="props.icon" class="size-4 -rotate-45 text-primary" />
+            <div class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 bg-card text-primary">
+                <HugeiconsIcon :icon="props.icon" class="size-3.5" />
             </div>
 
             <!-- Right line -->
-            <div class="h-px flex-1 bg-linear-to-l from-transparent via-border to-primary/50" />
+            <div class="h-px flex-1 bg-linear-to-l from-transparent via-border to-primary/40" />
         </div>
     </div>
-</template>
+</template>

package/src/components/content/ProsePre.vue

@@ -3,13 +3,18 @@ import { computed } from 'vue';
 import CodeBlock from './CodeBlock.vue';
 import Terminal from './Terminal.vue';
 
+// Nuxt Content passes `shiki` classes; keep them off Terminal and CodeBlock, whose utilities the unlayered `.shiki span` styles override
+defineOptions({ inheritAttrs: false });
+
 // Props
 const props = withDefaults(defineProps<{
     code?: string;
     language?: string;
+    filename?: string;
 }>(), {
     code: '',
-    language: ''
+    language: '',
+    filename: ''
 });
 
 const normalizedLanguage = computed(() => props.language.toLowerCase());
@@ -19,11 +24,11 @@ const commands = computed(() => props.code.replace(/\n$/, '').split(/\r?\n/));
 
 <template>
     <!-- Terminal value -->
-    <Terminal v-if="isShellBlock" :commands="commands" />
+    <Terminal v-if="isShellBlock" :commands="commands" :title="props.filename" />
 
     <!-- Code block -->
-    <CodeBlock v-else-if="normalizedLanguage" :code="props.code" :language="normalizedLanguage" />
+    <CodeBlock v-else-if="normalizedLanguage" :code="props.code" :language="normalizedLanguage" :title="props.filename" />
 
     <!-- Fallback pre block -->
-    <pre v-else><slot /></pre>
+    <pre v-else v-bind="$attrs"><slot /></pre>
 </template>