@brumaombra/ui-vintage 0.6.8 → 0.7.1

package/src/components/language-flag/flags/PortugueseFlag.vue

@@ -0,0 +1,59 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+        <path fill="red" d="M256 0h384v480H256z" />
+        <path fill="#060" d="M0 0h256v480H0z" />
+        <g fill="#ff0" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width=".6">
+            <path d="M339.5 306.2c-32.3-1-180-93.2-181-108l8.1-13.5c14.7 21.3 165.7 111 180.6 107.8z" />
+            <path d="M164.9 182.8c-2.9 7.8 38.6 33.4 88.4 63.8s92.9 49 96 46.4l1.5-2.8q-.9 1.6-4.3.6c-13.5-3.9-48.6-20-92.1-46.4-43.6-26.4-81.4-50.7-87.3-61a6 6 0 0 1-.6-3.1h-.2l-1.2 2.2zm175.3 123.8q-.7 1.3-3.5.8c-12-1.3-48.6-19.1-91.9-45-50.4-30.2-92-57.6-87.4-64.8l1.2-2.2.2.1c-4 12.2 82.1 61.4 87.2 64.6 49.8 30.8 91.8 48.9 95.5 44.2z" />
+            <path d="M256.2 207.2c32.2-.3 72-4.4 95-13.6l-5-8c-13.5 7.5-53.5 12.5-90.3 13.2-43.4-.4-74.1-4.5-89.5-14.8l-4.6 8.6c28.2 12 57.2 14.5 94.4 14.6" />
+            <path d="M352.5 193.8c-.8 1.3-15.8 6.4-37.8 10.2a381 381 0 0 1-58.6 4.3 416 416 0 0 1-56.2-3.6c-23.1-3.6-35-8.6-39.5-10.4l1.1-2.2c12.7 5 24.7 8 38.7 10.2A412 412 0 0 0 256 206a392 392 0 0 0 58.3-4.3c22.5-3.7 34.8-8.4 36.6-10.5zm-4.4-8.1c-2.4 2-14.6 6.3-36 9.7a388 388 0 0 1-55.8 4c-22 0-40.1-1.6-53.8-3.6-21.8-2.8-33.4-8-37.6-9.4l1.3-2.2c3.3 1.7 14.4 6.2 36.5 9.3a385 385 0 0 0 53.6 3.4 384 384 0 0 0 55.4-4c21.5-3 33.1-8.4 34.9-9.8zM150.3 246c19.8 10.7 63.9 16 105.6 16.4 38 .1 87.4-5.8 105.9-15.6l-.5-10.7c-5.8 9-58.8 17.7-105.8 17.4s-90.7-7.6-105.3-17v9.5" />
+            <path d="M362.8 244.5v2.5c-2.8 3.4-20.2 8.4-42 12a434 434 0 0 1-65.4 4.4 400 400 0 0 1-62-4.3 155 155 0 0 1-44.4-12v-2.9c9.7 6.4 35.9 11.2 44.7 12.6 15.8 2.4 36.1 4.2 61.7 4.2 26.9 0 48.4-1.9 65-4.4 15.7-2.3 38-8.2 42.4-12.1m0-9v2.5c-2.8 3.3-20.2 8.3-42 11.9a434 434 0 0 1-65.4 4.5 414 414 0 0 1-62-4.3 155 155 0 0 1-44.4-12v-3c9.7 6.5 36 11.2 44.7 12.6a408 408 0 0 0 61.7 4.3c26.9 0 48.5-2 65-4.5 15.7-2.2 38-8.1 42.4-12m-107 68.8c-45.6-.2-84.7-12.4-93-14.4l6 9.4a250 250 0 0 0 87.4 14.3c34.7-1 65-3.7 86.3-14.1l6.2-9.8c-14.5 6.9-64 14.6-93 14.6" />
+            <path d="m344.9 297.3-2.8 4c-10 3.6-26 7.4-32.6 8.4a296 296 0 0 1-53.7 5c-40.4-.6-73.5-8.5-89-15.3l-1.3-2.1.2-.4 2.1.9a287 287 0 0 0 88.2 14.5c18.8 0 37.5-2.1 52.6-4.8 23.2-4.7 32.6-8.2 35.5-9.8l.7-.4zm5.3-8.8-2 3.5c-5.4 2-20 6.2-41.3 9.2-14 1.9-22.7 3.8-50.6 4.3a347 347 0 0 1-94.2-14L161 289a390 390 0 0 0 95.4 14c25.5-.5 36.4-2.4 50.3-4.3 24.8-3.8 37.3-8 41-9.1v-.2l2.6-1z" />
+            <path d="M350.8 237.6c.1 30-15.3 57-27.6 68.8a99 99 0 0 1-67.8 28.2c-30.3.5-58.8-19.2-66.5-27.9a101 101 0 0 1-27.5-67.4c1.8-32.8 14.7-55.6 33.3-71.3a100 100 0 0 1 64.2-22.7 98 98 0 0 1 71 35.6c12.5 15.2 18 31.7 20.9 56.7M255.6 135a106 106 0 0 1 106 105.2 105.6 105.6 0 1 1-211.4 0c-.1-58 47.3-105.2 105.4-105.2" />
+            <path d="M255.9 134.5c58.2 0 105.6 47.4 105.6 105.6S314.1 345.7 256 345.7s-105.6-47.4-105.6-105.6S197.8 134.5 256 134.5zM152.6 240c0 56.8 46.7 103.3 103.3 103.3S359.2 296.8 359.2 240s-46.7-103.3-103.3-103.3S152.6 183.2 152.6 240" />
+            <path d="M256 143.3a97 97 0 0 1 96.7 96.7 97 97 0 0 1-96.7 96.8c-53 0-96.7-43.6-96.7-96.8a97 97 0 0 1 96.7-96.7M161.6 240c0 52 42.6 94.4 94.4 94.4s94.4-42.5 94.4-94.4-42.6-94.4-94.4-94.4a95 95 0 0 0-94.4 94.4" />
+            <path d="M260.3 134h-9.1v212.3h9z" />
+            <path d="M259.3 132.8h2.3v214.7h-2.2V132.8zm-9 0h2.4v214.7h-2.3z" />
+            <path d="M361.6 244.2v-7.8l-6.4-6-36.3-9.6-52.2-5.3-63 3.2-44.8 10.6-9 6.7v7.9l22.9-10.3 54.4-8.5h52.3l38.4 4.2 26.6 6.4z" />
+            <path d="M256 223.8c24.9 0 49 2.3 68.3 6 19.8 4 33.7 9 38.5 14.5v2.8c-5.8-7-24.5-12-39-15-19-3.6-43-6-67.9-6-26.1 0-50.5 2.6-69.3 6.2-15 3-35.1 9-37.6 14.8v-2.9c1.3-4 16.3-10 37.3-14.3 18.9-3.7 43.3-6.1 69.6-6.1zm0-9.1a383 383 0 0 1 68.3 6c19.8 4 33.7 9 38.5 14.6v2.7c-5.8-6.9-24.5-12-39-14.9-19-3.7-43-6-67.9-6a376 376 0 0 0-69.2 6.2c-14.5 2.7-35.4 8.9-37.7 14.7v-2.8c1.4-4 16.6-10.3 37.3-14.3 19-3.7 43.3-6.2 69.7-6.2m-.6-46.2c39.3-.2 73.6 5.5 89.3 13.5l5.7 10c-13.6-7.4-50.6-15-94.9-14-36.1.3-74.7 4-94 14.4l6.8-11.4c15.9-8.3 53.3-12.5 87.1-12.5" />
+            <path d="M256 176.7a354 354 0 0 1 61.3 4.3c16 3 31.3 7.4 33.5 9.8l1.7 3c-5.3-3.4-18.6-7.3-35.6-10.5s-38.7-4.3-61-4.2c-25.3-.1-45 1.2-61.8 4.2a109 109 0 0 0-33.3 10.3l1.7-3.1c6-3 15.3-6.7 31.1-9.6 17.5-3.2 37.4-4.1 62.4-4.2m0-9c21.4-.2 42.6 1 59.1 4a96 96 0 0 1 30.6 10l2.5 4c-4.2-4.7-20-9.2-34.1-11.6-16.4-2.9-36.7-4-58.1-4.2a361 361 0 0 0-59.5 4.4 97 97 0 0 0-29.6 9.1l2.2-3.3c5.8-3 15.2-5.8 27-8.1a357 357 0 0 1 59.9-4.4zM308.4 284a276 276 0 0 0-52.5-4c-65.5.8-86.6 13.5-89.2 17.3l-5-8c16.8-12 52.4-18.8 94.6-18.2q32.9.5 56.6 5l-4.5 8" />
+            <path d="M255.6 278.9c18.2.3 36 1 53.3 4.2l-1.2 2.2c-16-3-33.2-4-52-4-24.3-.2-48.7 2.1-70 8.2-6.7 1.9-17.8 6.2-19 9.8l-1.2-2c.4-2.2 7-6.6 19.6-10 24.4-7 47.2-8.3 70.5-8.4m.8-9.2a327 327 0 0 1 57.3 5l-1.3 2.3a299 299 0 0 0-56-4.9c-24.2 0-49.9 1.8-73.3 8.6-7.5 2.2-20.6 7-21 10.7l-1.2-2.2c.2-3.4 11.5-7.9 21.7-10.8 23.5-6.9 49.3-8.6 73.8-8.7" />
+            <path d="m349.4 290.5-7.8 12.3-22.7-20.1-58.6-39.5-66.2-36.3-34.3-11.7 7.3-13.6 2.5-1.3 21.3 5.3 70.4 36.3 40.6 25.6L336 272l13.9 16z" />
+            <path d="M158.6 195.5c6-4 50.2 15.6 96.6 43.6 46.1 28 90.3 59.6 86.3 65.5l-1.3 2.1-.6.5c.1-.1.8-1 0-3.1-2-6.5-33.4-31.5-85.3-62.9-50.7-30.1-92.9-48.3-97-43.1zM351 290.4c3.8-7.6-37.2-38.5-88.1-68.6-52-29.5-89.6-46.9-96.5-41.7L165 183l.4-.5c1.2-1 3.3-1 4.2-1 11.8.2 45.5 15.7 92.8 42.8 20.8 12 87.6 55 87.3 67 0 1 .1 1.2-.3 1.8l1.7-2.6z" />
+        </g>
+        <g transform="translate(0 26.7)scale(1.06667)">
+            <path fill="#fff" stroke="#000" stroke-width=".7" d="M180.6 211a59 59 0 0 0 17.5 41.7 59 59 0 0 0 41.8 17.6 59 59 0 0 0 42-17.4 59 59 0 0 0 17.4-41.8v-79.2l-118.7-.2z" />
+            <path fill="red" stroke="#000" stroke-width=".5" d="M183 211.1a56 56 0 0 0 16.8 40 57 57 0 0 0 40.2 16.8 57 57 0 0 0 40.2-16.6 56 56 0 0 0 16.7-40v-77H183v76.8m91-53.7v48.9l-.1 5.1a33 33 0 0 1-10 24 34 34 0 0 1-24 10c-9.4 0-17.7-4-23.9-10.2a34 34 0 0 1-10-24v-54z" />
+            <g id="pt-e">
+                <g id="pt-d" fill="#ff0" stroke="#000" stroke-width=".5">
+                    <path stroke="none" d="M190.2 154.4c.1-5.5 4-6.8 4-6.8.1 0 4.3 1.4 4.3 6.9z" />
+                    <path d="m186.8 147.7-.7 6.3h4.2c0-5.2 4-6 4-6 .1 0 4 1.1 4.1 6h4.2l-.8-6.4zm-1 6.4h17q.5 0 .6.7 0 .8-.6.8h-17q-.5 0-.6-.8 0-.7.7-.7z" />
+                    <path d="M192 154c0-3.3 2.3-4.2 2.3-4.2s2.3 1 2.3 4.2H192m-5.8-9h16.3q.5.1.6.8 0 .5-.6.6h-16.3q-.5 0-.6-.7 0-.5.6-.6zm.4 1.5H202q.5 0 .6.7t-.6.7h-15.5q-.6 0-.6-.7t.6-.7zm5-10.6h1.2v.8h.9v-.8h1.3v.9h.9v-1h1.2v2q0 .6-.5.6h-4.4q-.5 0-.6-.5zm4.6 2.7.3 6.4h-4.3l.3-6.5h3.7" />
+                    <path id="pt-a" d="M191 141.6v3.4h-4v-3.4z" />
+                    <use xlink:href="#pt-a" width="100%" height="100%" x="10.6" />
+                    <path id="pt-b" d="M186.3 139h1.2v1h.9v-1h1.2v1h.9v-1h1.2v2q0 .6-.5.6h-4.3l-.6-.6z" />
+                    <use xlink:href="#pt-b" width="100%" height="100%" x="10.6" />
+                    <path fill="#000001" stroke="none" d="M193.9 140.6c0-.6.9-.6.9 0v1.6h-.9z" />
+                    <path id="pt-c" fill="#000001" stroke="none" d="M188.6 142.8c0-.6.8-.6.8 0v1.2h-.8z" />
+                    <use xlink:href="#pt-c" width="100%" height="100%" x="10.6" />
+                </g>
+                <use xlink:href="#pt-d" width="100%" height="100%" y="46.3" />
+                <use xlink:href="#pt-d" width="100%" height="100%" transform="rotate(-45.2 312.8 180)" />
+            </g>
+            <use xlink:href="#pt-d" width="100%" height="100%" x="45.7" />
+            <use xlink:href="#pt-e" width="100%" height="100%" transform="matrix(-1 0 0 1 479.8 0)" />
+            <g id="pt-f" fill="#fff">
+                <path fill="#039" d="M232.6 202.4a8 8 0 0 0 2.2 5.7 7 7 0 0 0 5.3 2.4q3.2-.2 5.3-2.4a8 8 0 0 0 2.2-5.7v-10.8h-15z" />
+                <circle cx="236.1" cy="195.7" r="1.5" />
+                <circle cx="244.4" cy="195.7" r="1.5" />
+                <circle cx="240.2" cy="199.7" r="1.5" />
+                <circle cx="236.1" cy="203.9" r="1.5" />
+                <circle cx="244.4" cy="203.9" r="1.5" />
+            </g>
+            <use xlink:href="#pt-f" width="100%" height="100%" y="-26" />
+            <use xlink:href="#pt-f" width="100%" height="100%" x="-20.8" />
+            <use xlink:href="#pt-f" width="100%" height="100%" x="20.8" />
+            <use xlink:href="#pt-f" width="100%" height="100%" y="25.8" />
+        </g>
+    </svg>
+</template>

package/src/components/language-flag/flags/RussianFlag.vue

@@ -0,0 +1,7 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+        <path fill="#fff" d="M0 0h640v160H0z" />
+        <path fill="#0039a6" d="M0 160h640v160H0z" />
+        <path fill="#d52b1e" d="M0 320h640v160H0z" />
+    </svg>
+</template>

package/src/components/language-flag/flags/SpanishFlag.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" aria-hidden="true" focusable="false">
+        <rect width="750" height="500" fill="#c60b1e" />
+        <rect y="125" width="750" height="250" fill="#ffc400" />
+    </svg>
+</template>

package/{dist/components/language-flag/index.d.ts → src/components/language-flag/index.ts}

@@ -7,4 +7,4 @@ export { default as ItalianFlag } from './flags/ItalianFlag.vue';
 export { default as ChineseFlag } from './flags/ChineseFlag.vue';
 export { default as JapaneseFlag } from './flags/JapaneseFlag.vue';
 export { default as RussianFlag } from './flags/RussianFlag.vue';
-export { default as SpanishFlag } from './flags/SpanishFlag.vue';
+export { default as SpanishFlag } from './flags/SpanishFlag.vue';

package/src/components/language-selector/LanguageSelector.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { Component, PropType } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Tick02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Button } from '../ui/button';
+import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+
+export type LanguageSelectorCode = string;
+
+// Single source of truth for supported language codes, labels, and flag loaders
+const supportedLanguages = [
+    { code: 'en', label: 'English', loadFlag: () => import('../language-flag/flags/EnglishFlag.vue') },
+    { code: 'it', label: 'Italiano', loadFlag: () => import('../language-flag/flags/ItalianFlag.vue') },
+    { code: 'fr', label: 'Francais', loadFlag: () => import('../language-flag/flags/FrenchFlag.vue') },
+    { code: 'es', label: 'Espanol', loadFlag: () => import('../language-flag/flags/SpanishFlag.vue') },
+    { code: 'de', label: 'Deutsch', loadFlag: () => import('../language-flag/flags/GermanFlag.vue') },
+    { code: 'pt', label: 'Portugues', loadFlag: () => import('../language-flag/flags/PortugueseFlag.vue') },
+    { code: 'zh', label: '中文', loadFlag: () => import('../language-flag/flags/ChineseFlag.vue') },
+    { code: 'ja', label: '日本語', loadFlag: () => import('../language-flag/flags/JapaneseFlag.vue') },
+    { code: 'ru', label: 'Русский', loadFlag: () => import('../language-flag/flags/RussianFlag.vue') }
+] as const;
+
+type SupportedLanguage = (typeof supportedLanguages)[number];
+type SupportedLanguageCode = SupportedLanguage['code'];
+const asyncFlagComponentCache = new Map<SupportedLanguageCode, Component>();
+
+// Type guard to ensure a code is one of the supported flag codes
+const isSupportedLanguageCode = (code: string): code is SupportedLanguageCode => {
+    return supportedLanguages.some((language) => language.code === code);
+};
+
+// Get the supported language object for a given code
+const getSupportedLanguage = (code: SupportedLanguageCode) => {
+    return supportedLanguages.find((language) => language.code === code)!;
+};
+
+// Load and cache the async component for a given supported language code
+const getAsyncFlagComponent = (code: SupportedLanguageCode) => {
+    // Check cache first
+    const cachedComponent = asyncFlagComponentCache.get(code);
+    if (cachedComponent) {
+        return cachedComponent;
+    }
+
+    // Load the async component and cache it
+    const asyncComponent = defineAsyncComponent(getSupportedLanguage(code).loadFlag);
+    asyncFlagComponentCache.set(code, asyncComponent);
+    return asyncComponent;
+};
+
+// Props
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+    languages: {
+        type: Array as PropType<LanguageSelectorCode[]>,
+        default: () => ['en', 'it']
+    }
+});
+
+// Emits
+const emits = defineEmits<{
+    'update:modelValue': [value: string];
+    select: [value: string];
+}>();
+
+const { locale, t } = useI18n();
+const isOpen = ref(false);
+
+// Build localized language labels from the provided language codes
+const languageDisplayNames = computed(() => {
+    return typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale.value], { type: 'language' }) : null;
+});
+
+// Get the display label for a given language code
+const getLanguageLabel = (code: string) => {
+    const normalizedCode = code.toLowerCase();
+    const languageCode = normalizedCode.split('-')[0];
+    const supportedLanguage = isSupportedLanguageCode(languageCode) ? getSupportedLanguage(languageCode) : null;
+    return supportedLanguage?.label || languageDisplayNames.value?.of(languageCode) || code.toUpperCase();
+};
+
+// Normalize languages to pair each language code with its label
+const normalizedLanguages = computed(() => {
+    return props.languages.map(code => ({
+        code,
+        label: getLanguageLabel(code)
+    }));
+});
+
+// Compute the available flag codes based on the provided language list
+const availableFlagCodes = computed<SupportedLanguageCode[]>(() => {
+    // Extract supported language codes from the normalized list
+    const supportedCodes = normalizedLanguages.value.map(language => language.code).filter(isSupportedLanguageCode);
+    if (supportedCodes.length > 0) {
+        return [...new Set(supportedCodes)];
+    }
+
+    // If no valid codes are provided, default to English
+    return ['en'];
+});
+
+// Resolve the flag component for a specific code, falling back to the first available code
+const resolveFlagComponent = (code?: string) => {
+    const isValid = code && isSupportedLanguageCode(code) && availableFlagCodes.value.includes(code);
+    const resolvedCode = isValid ? code : availableFlagCodes.value[0];
+    return getAsyncFlagComponent(resolvedCode);
+};
+
+// Get the currently selected language based on modelValue
+const currentLanguage = computed(() => {
+    return normalizedLanguages.value.find(language => language.code === props.modelValue) || normalizedLanguages.value[0] || null;
+});
+
+// Resolve the async flag component for the currently selected language
+const currentFlagComponent = computed(() => {
+    return currentLanguage.value ? resolveFlagComponent(currentLanguage.value.code) : null;
+});
+
+// Handle language selection
+const handleSelectLanguage = (language: string) => {
+    emits('update:modelValue', language);
+    emits('select', language);
+    isOpen.value = false;
+};
+</script>
+
+<template>
+    <Popover v-model:open="isOpen">
+        <!-- Trigger button showing the current language flag -->
+        <PopoverTrigger as-child>
+            <Button variant="secondary" size="icon" :aria-label="t('uiVintage.language.ariaLabel')">
+                <component :is="currentFlagComponent" v-if="currentFlagComponent" class="h-4 w-[1.35rem] rounded-[2px]" />
+            </Button>
+        </PopoverTrigger>
+
+        <!-- Popover content with language options -->
+        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 !p-0">
+            <Command :model-value="props.modelValue">
+                <CommandList>
+                    <CommandGroup :heading="t('uiVintage.language.title')">
+                        <CommandItem v-for="option in normalizedLanguages" :key="option.code" :value="option.code" @select="handleSelectLanguage(option.code)">
+                            <component :is="resolveFlagComponent(option.code)" class="h-4 w-[1.35rem] rounded-[2px]" />
+                            <span class="flex-1">{{ option.label }}</span>
+                            <HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0" :class="props.modelValue === option.code ? 'opacity-100' : 'opacity-0'" />
+                        </CommandItem>
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+        </PopoverContent>
+    </Popover>
+</template>

package/{dist/components/language-selector/index.d.ts → src/components/language-selector/index.ts}

@@ -1,3 +1,3 @@
 export { default } from './LanguageSelector.vue';
 export { default as LanguageSelector } from './LanguageSelector.vue';
-export type { LanguageSelectorCode } from './LanguageSelector.vue';
+export type { LanguageSelectorCode } from './LanguageSelector.vue';

package/src/components/load-more-button/LoadMoreButton.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ArrowDown01Icon, RefreshIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Button } from '../ui/button';
+
+const props = defineProps({
+    busy: { type: Boolean, default: false },
+    text: { type: String, default: '' },
+    loadingText: { type: String, default: '' }
+});
+
+const emits = defineEmits(['load-more']);
+
+const { t } = useI18n();
+
+const resolvedText = computed(() => props.text || t('uiVintage.buttons.loadMore') || 'Load more');
+const resolvedLoadingText = computed(() => props.loadingText || t('uiVintage.buttons.loading') || 'Loading');
+
+const handleClick = () => {
+    emits('load-more');
+};
+</script>
+
+<template>
+    <div class="flex justify-center">
+        <Button v-if="props.busy"
+            variant="secondary"
+            class="w-full md:w-auto"
+            :disabled="true">
+            <HugeiconsIcon :icon="RefreshIcon" class="size-4 animate-spin" />
+            {{ resolvedLoadingText }}
+        </Button>
+
+        <Button v-else
+            variant="secondary"
+            class="w-full md:w-auto"
+            @click="handleClick">
+            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4" />
+            {{ resolvedText }}
+        </Button>
+    </div>
+</template>

package/{dist/components/load-more-button/index.d.ts → src/components/load-more-button/index.ts}

@@ -1,2 +1,2 @@
 export { default } from './LoadMoreButton.vue';
-export { default as LoadMoreButton } from './LoadMoreButton.vue';
+export { default as LoadMoreButton } from './LoadMoreButton.vue';

package/src/components/loading-state-card/LoadingStateCard.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Loading03Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+
+// Props
+const props = defineProps({
+    icon: { type: [Object, Array], default: () => Loading03Icon },
+    title: { type: String, default: '' },
+    description: { type: String, default: '' }
+});
+
+const { t } = useI18n();
+
+const resolvedTitle = computed(() => props.title || t('uiVintage.common.loading.title') || 'Loading...');
+const resolvedDescription = computed(() => props.description || t('uiVintage.common.loading.description') || 'Please wait a moment while we load the content.');
+</script>
+
+<template>
+    <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
+        <CardContent class="flex flex-col items-center justify-center !p-0 text-center">
+            <!-- Loading spinner icon -->
+            <div class="flex items-center justify-center text-4xl text-[var(--text-secondary-light)] opacity-60 dark:text-[var(--text-secondary-dark)]">
+                <HugeiconsIcon :icon="props.icon" class="size-10 animate-spin" />
+            </div>
+
+            <!-- Title -->
+            <h3 v-if="resolvedTitle" class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] md:text-lg">
+                {{ resolvedTitle }}
+            </h3>
+
+            <!-- Description -->
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] md:text-sm">
+                {{ resolvedDescription }}
+            </p>
+
+            <!-- Slot for additional content -->
+            <slot />
+        </CardContent>
+    </Card>
+</template>

package/{dist/components/loading-state-card/index.d.ts → src/components/loading-state-card/index.ts}

@@ -1,2 +1,2 @@
 export { default } from './LoadingStateCard.vue';
-export { default as LoadingStateCard } from './LoadingStateCard.vue';
+export { default as LoadingStateCard } from './LoadingStateCard.vue';

package/src/components/message-dialog/MessageDialog.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { HugeiconsIcon } from "@hugeicons/vue";
+import { computed } from "vue";
+import { AlertCircleIcon, InformationCircleIcon, Tick02Icon } from "@hugeicons/core-free-icons";
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { getUiVintageRuntimeMessage } from "../../lib/i18n";
+import { closeMessageDialog, messageDialogState, resolveActiveMessageDialog } from "./message-dialog-state";
+
+// Active dialog state
+const currentDialog = computed(() => messageDialogState.current);
+
+// Resolve the title
+const resolvedTitle = computed(() => {
+    const current = currentDialog.value;
+    if (!current) return '';
+    return current.options.title || getUiVintageRuntimeMessage(`uiVintage.messageDialog.${current.options.type}`, '');
+});
+
+// Resolve the close button text
+const resolvedCloseText = computed(() => {
+    const current = currentDialog.value;
+    if (!current) return getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close');
+    return current.options.closeText || getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close');
+});
+
+// Resolved fallback icon for the current message type
+const defaultMessageIcon = computed(() => {
+    const current = currentDialog.value;
+    if (!current) return InformationCircleIcon;
+    if (current.options.type === "error" || current.options.type === "warning") return AlertCircleIcon;
+    if (current.options.type === "success") return Tick02Icon;
+    return InformationCircleIcon;
+});
+
+// Resolved container classes for the message icon
+const messageIconClasses = computed(() => {
+    const current = currentDialog.value;
+    if (!current) return "border-[var(--border)] bg-[var(--bg-surface-light)] dark:bg-[var(--bg-surface-dark)]";
+    if (current.options.type === "error") return "border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30";
+    if (current.options.type === "warning") return "border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/30";
+    if (current.options.type === "success") return "border-green-200 bg-green-50 dark:border-green-900/50 dark:bg-green-950/30";
+    return "border-[var(--border)] bg-[var(--bg-surface-light)] dark:bg-[var(--bg-surface-dark)]";
+});
+
+// Resolved glyph color classes
+const messageGlyphClasses = computed(() => {
+    const current = currentDialog.value;
+    if (!current) return "text-blue-600";
+    if (current.options.type === "error") return "text-red-600";
+    if (current.options.type === "warning") return "text-amber-600";
+    if (current.options.type === "success") return "text-green-600";
+    return "text-blue-600";
+});
+
+// Close the dialog when the shell requests it
+const handleOpenChange = (open: boolean) => {
+    if (!open) {
+        closeMessageDialog();
+    }
+};
+</script>
+
+<template>
+    <!-- Dialog shell -->
+    <AlertDialog :open="messageDialogState.isOpen" @update:open="handleOpenChange">
+        <!-- Dialog content -->
+        <AlertDialogContent v-if="currentDialog">
+            <div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
+                <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
+                    <!-- Dialog icon -->
+                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border sm:size-10 sm:self-start" :class="messageIconClasses">
+                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6" :class="messageGlyphClasses" />
+                        <HugeiconsIcon v-else :icon="defaultMessageIcon" :stroke-width="1.8" class="size-6" :class="messageGlyphClasses" />
+                    </div>
+
+                    <!-- Dialog header -->
+                    <AlertDialogHeader class="sm:pt-0">
+                        <!-- Title -->
+                        <AlertDialogTitle>
+                            {{ resolvedTitle }}
+                        </AlertDialogTitle>
+
+                        <!-- Message -->
+                        <AlertDialogDescription>
+                            {{ currentDialog.options.message }}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                </div>
+            </div>
+
+            <!-- Dialog actions -->
+            <AlertDialogFooter class="items-end">
+                <Button variant="secondary" :disabled="messageDialogState.busy" @click="resolveActiveMessageDialog">
+                    <HugeiconsIcon v-if="currentDialog.options.closeButtonIcon" :icon="currentDialog.options.closeButtonIcon" class="size-4" />
+                    {{ resolvedCloseText }}
+                </Button>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>

package/src/components/message-dialog/index.ts

@@ -0,0 +1,11 @@
+export { default as MessageDialog } from "./MessageDialog.vue";
+export {
+    closeMessageDialog,
+    messageDialogState,
+    resolveActiveMessageDialog,
+    showMessageDialog
+} from "./message-dialog-state";
+export type {
+    DialogMessageType,
+    ShowMessageDialogOptions
+} from "./message-dialog-state";

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

@@ -0,0 +1,168 @@
+import { h, markRaw, reactive, render } from "vue";
+
+export type DialogMessageType = "error" | "success" | "info" | "warning";
+export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+
+export interface ShowMessageDialogOptions {
+    type?: DialogMessageType;
+    title?: string;
+    message: string;
+    closeText?: string;
+    icon?: HugeiconsIconDefinition | null;
+    closeButtonIcon?: HugeiconsIconDefinition | null;
+}
+
+interface MessageDialogRequest {
+    id: number;
+    options: Omit<ShowMessageDialogOptions, "icon" | "closeButtonIcon"> & {
+        icon: HugeiconsIconDefinition | null;
+        closeButtonIcon: HugeiconsIconDefinition | null;
+    };
+    resolve: () => void;
+}
+
+interface MessageDialogState {
+    current: MessageDialogRequest | null;
+    busy: boolean;
+    isOpen: boolean;
+}
+
+const messageDialogQueue: MessageDialogRequest[] = [];
+let nextMessageDialogId = 0;
+const DIALOG_CLOSE_DURATION_MS = 300;
+let closeTimer: ReturnType<typeof setTimeout> | null = null;
+let messageDialogMountPromise: Promise<void> | null = null;
+
+const MESSAGE_DIALOG_ROOT_ID = "ui-vintage-message-dialog-root";
+
+// Shared message dialog state
+export const messageDialogState: MessageDialogState = reactive({
+    current: null,
+    busy: false,
+    isOpen: false
+});
+
+// Keep icon definitions non-reactive
+const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? markRaw(icon) : null;
+
+// Mount the dialog once on demand
+const ensureMessageDialogMounted = () => {
+    // Skip mounting during SSR
+    if (typeof document === "undefined") {
+        return Promise.resolve();
+    }
+
+    // Reuse the existing mount root
+    const existingRoot = document.getElementById(MESSAGE_DIALOG_ROOT_ID);
+    if (existingRoot) {
+        return Promise.resolve();
+    }
+
+    // Reuse the in-flight mount
+    if (messageDialogMountPromise) {
+        return messageDialogMountPromise;
+    }
+
+    // Start the lazy mount
+    messageDialogMountPromise = (async () => {
+        // Load the component only when needed
+        const { default: MessageDialog } = await import("./MessageDialog.vue");
+
+        // Guard against a concurrent mount
+        if (document.getElementById(MESSAGE_DIALOG_ROOT_ID)) {
+            return;
+        }
+
+        // Create the host element and render the component
+        const container = document.createElement("div");
+        container.id = MESSAGE_DIALOG_ROOT_ID;
+        document.body.appendChild(container);
+        render(h(MessageDialog), container);
+    })().finally(() => {
+        messageDialogMountPromise = null;
+    });
+
+    // Let callers await the mount
+    return messageDialogMountPromise;
+};
+
+// Show the next queued dialog
+const openNextMessageDialog = () => {
+    const nextDialog = messageDialogQueue.shift() ?? null;
+    messageDialogState.current = nextDialog;
+    messageDialogState.isOpen = Boolean(nextDialog);
+};
+
+// Queue a new dialog request
+const enqueueMessageDialog = (request: MessageDialogRequest) => {
+    messageDialogQueue.push(request);
+    if (!messageDialogState.current) {
+        openNextMessageDialog();
+    }
+};
+
+// Clear the active dialog and continue the queue
+const clearCurrentMessageDialog = () => {
+    messageDialogState.busy = false;
+    messageDialogState.isOpen = false;
+    messageDialogState.current = null;
+    openNextMessageDialog();
+};
+
+// Close the current dialog after the leave transition
+const scheduleCloseCurrentMessageDialog = () => {
+    // Guard against missing or already closing dialogs
+    if (!messageDialogState.current || !messageDialogState.isOpen) {
+        return;
+    }
+
+    // Start the close transition
+    messageDialogState.isOpen = false;
+    if (closeTimer) {
+        clearTimeout(closeTimer);
+    }
+
+    // Schedule the dialog to be cleared after the transition
+    closeTimer = setTimeout(() => {
+        closeTimer = null;
+        clearCurrentMessageDialog();
+    }, DIALOG_CLOSE_DURATION_MS);
+};
+
+// Resolve the dialog as closed
+export const closeMessageDialog = () => {
+    const current = messageDialogState.current;
+    if (!current || !messageDialogState.isOpen) return;
+    current.resolve();
+    scheduleCloseCurrentMessageDialog();
+};
+
+// Resolve the active message dialog
+export const resolveActiveMessageDialog = () => {
+    const current = messageDialogState.current;
+    if (!current || messageDialogState.busy) return;
+    current.resolve();
+    scheduleCloseCurrentMessageDialog();
+};
+
+// Queue and show a message dialog
+export const showMessageDialog = (options: ShowMessageDialogOptions) => {
+    // Ensure the renderer exists before queuing work
+    void ensureMessageDialogMounted();
+
+    // Return a promise that resolves when the dialog is closed
+    return new Promise<void>((resolve) => {
+        enqueueMessageDialog({
+            id: nextMessageDialogId += 1,
+            options: {
+                type: options.type ?? "info",
+                title: options.title ?? "",
+                message: options.message,
+                closeText: options.closeText ?? "",
+                icon: markIcon(options.icon),
+                closeButtonIcon: markIcon(options.closeButtonIcon)
+            },
+            resolve
+        });
+    });
+};