@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/landing/landing-footer/LandingFooter.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { NuxtImg } from "#components";
-import type { Component, HTMLAttributes } from "vue";
-import { FavouriteIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { cn } from "../../../lib/utils";
+import { NuxtImg } from '#components';
+import { FavouriteIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, type Component, type HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
 
 export interface LandingFooterLink {
     id: string;
@@ -21,7 +20,8 @@ export interface LandingFooterSection {
     links: LandingFooterLink[];
 }
 
-interface LandingFooterProps {
+// Props
+const props = withDefaults(defineProps<{
     appName: string;
     appLogo?: string;
     appLinkTo?: string;
@@ -32,21 +32,18 @@ interface LandingFooterProps {
     authorLink?: string;
     year?: number;
     showBottomBar?: boolean;
-    class?: HTMLAttributes["class"];
-    containerClass?: HTMLAttributes["class"];
-    brandClass?: HTMLAttributes["class"];
-    sectionsClass?: HTMLAttributes["class"];
-    bottomBarClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<LandingFooterProps>(), {
-    appLinkTo: "/",
-    appDescription: "",
+    class?: HTMLAttributes['class'];
+    containerClass?: HTMLAttributes['class'];
+    brandClass?: HTMLAttributes['class'];
+    sectionsClass?: HTMLAttributes['class'];
+    bottomBarClass?: HTMLAttributes['class'];
+}>(), {
+    appLinkTo: '/',
+    appDescription: '',
     sections: () => [],
-    linkComponent: "a",
-    authorName: "",
-    authorLink: "",
+    linkComponent: 'a',
+    authorName: '',
+    authorLink: '',
     year: () => new Date().getFullYear(),
     showBottomBar: true
 });
@@ -56,19 +53,19 @@ const hasSingleSection = computed(() => props.sections.length === 1);
 
 // Get link props based on the type of link component and whether the link should open in a new tab
 const getLinkProps = (link: LandingFooterLink) => {
-    const sharedProps = link.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+    const sharedProps = link.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
 
     // If the link component is an anchor, use href. Otherwise, use to for router links.
-    if (props.linkComponent === "a") {
+    if (props.linkComponent === 'a') {
         return {
-            href: link.href ?? "#",
+            href: link.href ?? '#',
             ...sharedProps
         };
     }
 
     // For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
     return {
-        to: link.to ?? link.href ?? "/",
+        to: link.to ?? link.href ?? '/',
         ...sharedProps
     };
 };
@@ -135,14 +132,14 @@ const getLinkProps = (link: LandingFooterLink) => {
             <div v-if="props.showBottomBar" :class="cn('mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-xs md:text-sm text-muted-foreground md:flex-row', props.bottomBarClass)">
                 <!-- Copyright -->
                 <div>
-                    &copy; {{ props.year }} {{ props.appName }}. {{ t("uiVintage.footer.allRightsReserved") }}
+                    &copy; {{ props.year }} {{ props.appName }}. {{ t('uiVintage.footer.allRightsReserved') }}
                 </div>
 
                 <!-- Author -->
                 <div v-if="props.authorName && props.authorLink" class="flex flex-wrap items-center justify-center gap-1.5 md:justify-end">
-                    <span>{{ t("uiVintage.footer.madeWith") }}</span>
+                    <span>{{ t('uiVintage.footer.madeWith') }}</span>
                     <HugeiconsIcon :icon="FavouriteIcon" class="size-4 shrink-0 text-red-700 dark:text-red-400" />
-                    <span>{{ t("uiVintage.footer.by") }}</span>
+                    <span>{{ t('uiVintage.footer.by') }}</span>
                     <a :href="props.authorLink" target="_blank" rel="noopener noreferrer" class="font-semibold text-foreground hover:underline">
                         {{ props.authorName }}
                     </a>

package/src/components/landing/landing-footer/index.ts

@@ -1,3 +1,3 @@
-export { default } from "./LandingFooter.vue";
-export { default as LandingFooter } from "./LandingFooter.vue";
-export type { LandingFooterLink, LandingFooterSection } from "./LandingFooter.vue";
+export { default } from './LandingFooter.vue';
+export { default as LandingFooter } from './LandingFooter.vue';
+export type { LandingFooterLink, LandingFooterSection } from './LandingFooter.vue';

package/src/components/landing/landing-navbar/LandingNavbar.vue

@@ -1,29 +1,30 @@
 <script setup lang="ts">
-import { NuxtImg } from "#components";
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../../lib/utils";
+import { NuxtImg } from '#components';
+import type { HTMLAttributes } from 'vue';
+import BlogProgressBar from '../../blog/BlogProgressBar.vue';
+import { cn } from '../../../lib/utils';
 
-interface LandingNavbarProps {
+// Props
+const props = withDefaults(defineProps<{
     appName?: string;
     appLogo?: string;
     appLinkTo?: string;
-    logoClass?: HTMLAttributes["class"];
-    class?: HTMLAttributes["class"];
-    containerClass?: HTMLAttributes["class"];
-    leftClass?: HTMLAttributes["class"];
-    rightClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<LandingNavbarProps>(), {
-    appName: "",
-    appLogo: "",
-    appLinkTo: "/"
+    logoClass?: HTMLAttributes['class'];
+    class?: HTMLAttributes['class'];
+    containerClass?: HTMLAttributes['class'];
+    leftClass?: HTMLAttributes['class'];
+    rightClass?: HTMLAttributes['class'];
+    showProgress?: boolean;
+}>(), {
+    appName: '',
+    appLogo: '',
+    appLinkTo: '/',
+    showProgress: false
 });
 </script>
 
 <template>
-    <header :class="cn('z-30 flex h-20 w-full flex-wrap sm:flex-nowrap sm:justify-start', props.class)">
+    <header :class="cn('sticky top-0 z-30 flex h-20 w-full flex-wrap border-b border-transparent bg-transparent text-card-foreground landing-navbar-sticky sm:flex-nowrap sm:justify-start', props.class)">
         <nav :class="cn('mx-auto flex max-w-6xl basis-full items-center justify-between px-3 sm:px-6 lg:px-8', props.containerClass)">
             <!-- Left-aligned content -->
             <div :class="cn('flex items-center', props.leftClass)">
@@ -33,7 +34,7 @@ const props = withDefaults(defineProps<LandingNavbarProps>(), {
                         <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="44" height="44" :sizes="{ 320: '44px', 640: '36px' }" loading="eager" fetchpriority="high" :class="cn('size-11 sm:size-9 shrink-0 object-contain', props.logoClass)" />
 
                         <!-- App name -->
-                        <span v-if="props.appName" class="hidden sm:!inline text-xl font-bold tracking-tight text-foreground">
+                        <span v-if="props.appName" class="hidden sm:inline! text-xl font-bold tracking-tight text-foreground">
                             {{ props.appName }}
                         </span>
                     </a>
@@ -45,5 +46,36 @@ const props = withDefaults(defineProps<LandingNavbarProps>(), {
                 <slot name="right" />
             </div>
         </nav>
+
+        <div v-if="props.showProgress" class="absolute inset-x-0 bottom-0 translate-y-full">
+            <BlogProgressBar aria-label="Blog reading progress" />
+        </div>
     </header>
-</template>
+</template>
+
+<style scoped>
+.landing-navbar-sticky {
+    animation: landing-navbar-scroll linear both;
+    animation-range: 0 160px;
+    animation-timeline: scroll(root);
+}
+
+@keyframes landing-navbar-scroll {
+    from {
+        background-color: transparent;
+        border-bottom-color: transparent;
+    }
+
+    to {
+        background-color: var(--card);
+        border-bottom-color: var(--border);
+    }
+}
+
+@supports not (animation-timeline: scroll()) {
+    .landing-navbar-sticky {
+        border-bottom-color: var(--border);
+        background-color: var(--card);
+    }
+}
+</style>

package/src/components/landing/landing-navbar/index.ts

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

package/src/components/landing/landing-shell/LandingShell.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { computed, useSlots } from "vue";
-import BackgroundGrid from "../../background-grid/BackgroundGrid.vue";
-import { cn } from "../../../lib/utils";
-
-interface LandingShellProps {
-    showBackground?: boolean;
-    rootClass?: HTMLAttributes["class"];
-    navbarClass?: HTMLAttributes["class"];
-    mainClass?: HTMLAttributes["class"];
-    footerClass?: HTMLAttributes["class"];
-}
+import { computed, useSlots, type HTMLAttributes } from 'vue';
+import BackgroundGrid from '../../background-grid/BackgroundGrid.vue';
+import { cn } from '../../../lib/utils';
 
 // Props
-const props = withDefaults(defineProps<LandingShellProps>(), {
+const props = withDefaults(defineProps<{
+    showBackground?: boolean;
+    rootClass?: HTMLAttributes['class'];
+    navbarClass?: HTMLAttributes['class'];
+    mainClass?: HTMLAttributes['class'];
+    footerClass?: HTMLAttributes['class'];
+}>(), {
     showBackground: true
 });
 
@@ -33,9 +30,9 @@ const hasStructuredSlots = computed(() => {
         <!-- If structured slots are provided, render them -->
         <template v-if="hasStructuredSlots">
             <!-- Navbar -->
-            <header :class="cn('relative z-10', props.navbarClass)">
+            <div :class="cn('contents', props.navbarClass)">
                 <slot name="navbar" />
-            </header>
+            </div>
 
             <!-- Main content -->
             <main :class="cn('relative z-10 flex-1', props.mainClass)">

package/src/components/landing/landing-shell/index.ts

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

package/src/components/language-flag/LanguageFlag.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { Component } from 'vue';
-import { computed, defineAsyncComponent } from 'vue';
+import { computed, defineAsyncComponent, type Component } from 'vue';
 
 // Single source of truth for supported flag component loaders
 const supportedFlagLoaders = {
@@ -15,7 +14,7 @@ const supportedFlagLoaders = {
     ru: () => import('./flags/RussianFlag.vue')
 } as const;
 
-type SupportedLanguageCode = keyof typeof supportedFlagLoaders;
+export type SupportedLanguageCode = keyof typeof supportedFlagLoaders;
 const asyncFlagComponentCache = new Map<SupportedLanguageCode, Component>();
 
 // Type guard to ensure a code is one of the supported flag codes
@@ -38,8 +37,10 @@ const getAsyncFlagComponent = (code: SupportedLanguageCode) => {
 };
 
 // Props
-const props = defineProps({
-    code: { type: String, default: 'en' }
+const props = withDefaults(defineProps<{
+    code?: SupportedLanguageCode;
+}>(), {
+    code: 'en'
 });
 
 // Get the appropriate flag component based on the code prop

package/src/components/language-flag/index.ts

@@ -1,5 +1,6 @@
 export { default } from './LanguageFlag.vue';
 export { default as LanguageFlag } from './LanguageFlag.vue';
+export type { SupportedLanguageCode } from './LanguageFlag.vue';
 export { default as EnglishFlag } from './flags/EnglishFlag.vue';
 export { default as FrenchFlag } from './flags/FrenchFlag.vue';
 export { default as GermanFlag } from './flags/GermanFlag.vue';

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { Component, PropType } from 'vue';
-import { computed, defineAsyncComponent, ref } from 'vue';
+import { computed, defineAsyncComponent, ref, type Component } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Tick02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
@@ -10,6 +9,24 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 
 export type LanguageSelectorCode = string;
 
+// Props
+const props = withDefaults(defineProps<{
+    modelValue?: string;
+    languages?: LanguageSelectorCode[];
+}>(), {
+    modelValue: '',
+    languages: () => ['en', 'it']
+});
+
+// Emits
+const emits = defineEmits<{
+    'update:modelValue': [value: string];
+    select: [value: string];
+}>();
+
+const { locale, t } = useI18n();
+const isOpen = ref(false);
+
 // 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') },
@@ -51,24 +68,6 @@ const getAsyncFlagComponent = (code: SupportedLanguageCode) => {
     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;
@@ -137,7 +136,7 @@ const handleSelectLanguage = (language: string) => {
         </PopoverTrigger>
 
         <!-- Popover content with language options -->
-        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 !p-0">
+        <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')">

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

@@ -5,19 +5,27 @@ 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: '' }
+// Props
+const props = withDefaults(defineProps<{
+    busy?: boolean;
+    text?: string;
+    loadingText?: string;
+}>(), {
+    busy: false,
+    text: '',
+    loadingText: ''
 });
 
-const emits = defineEmits(['load-more']);
+// Emits
+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');
 
+// Handle click event
 const handleClick = () => {
     emits('load-more');
 };
@@ -25,18 +33,14 @@ const handleClick = () => {
 
 <template>
     <div class="flex justify-center">
-        <Button v-if="props.busy"
-            variant="secondary"
-            class="w-full md:w-auto"
-            :disabled="true">
+        <!-- Loading button -->
+        <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">
+        <!-- Load more button -->
+        <Button v-else variant="secondary" class="w-full md:w-auto" @click="handleClick">
             <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4" />
             {{ resolvedText }}
         </Button>

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

@@ -4,35 +4,39 @@ import { useI18n } from 'vue-i18n';
 import { Loading03Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: [Object, Array], default: () => Loading03Icon },
-    title: { type: String, default: '' },
-    description: { type: String, default: '' }
+const props = withDefaults(defineProps<{
+    icon?: HugeiconsIconDefinition;
+    title?: string;
+    description?: string;
+}>(), {
+    icon: () => Loading03Icon,
+    title: '',
+    description: ''
 });
 
 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">
+        <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)]">
+            <div class="flex items-center justify-center text-4xl text-(--text-secondary-light) opacity-60 dark:text-(--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">
+            <h3 v-if="resolvedTitle" class="text-sm font-bold text-(--text-primary-light) dark:text-(--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">
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
                 {{ resolvedDescription }}
             </p>
 

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

@@ -1,11 +1,11 @@
 <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";
+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);
@@ -28,29 +28,29 @@ const resolvedCloseText = computed(() => {
 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;
+    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)]";
+    if (!current) return 'border-(--border) bg-(--bg-surface-light) dark:bg-(--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-(--border) bg-(--bg-surface-light) dark:bg-(--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";
+    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

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

@@ -1,11 +1,3 @@
-export { default as MessageDialog } from "./MessageDialog.vue";
-export {
-    closeMessageDialog,
-    messageDialogState,
-    resolveActiveMessageDialog,
-    showMessageDialog
-} from "./message-dialog-state";
-export type {
-    DialogMessageType,
-    ShowMessageDialogOptions
-} from "./message-dialog-state";
+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

@@ -1,7 +1,8 @@
-import { h, markRaw, reactive, render } from "vue";
+import { h, markRaw, reactive, render } from 'vue';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
-export type DialogMessageType = "error" | "success" | "info" | "warning";
-export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+export type DialogMessageType = 'error' | 'success' | 'info' | 'warning';
+export type { HugeiconsIconDefinition };
 
 export interface ShowMessageDialogOptions {
     type?: DialogMessageType;
@@ -14,7 +15,7 @@ export interface ShowMessageDialogOptions {
 
 interface MessageDialogRequest {
     id: number;
-    options: Omit<ShowMessageDialogOptions, "icon" | "closeButtonIcon"> & {
+    options: Omit<ShowMessageDialogOptions, 'icon' | 'closeButtonIcon'> & {
         icon: HugeiconsIconDefinition | null;
         closeButtonIcon: HugeiconsIconDefinition | null;
     };
@@ -33,7 +34,7 @@ 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";
+const MESSAGE_DIALOG_ROOT_ID = 'ui-vintage-message-dialog-root';
 
 // Shared message dialog state
 export const messageDialogState: MessageDialogState = reactive({
@@ -48,7 +49,7 @@ const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? ma
 // Mount the dialog once on demand
 const ensureMessageDialogMounted = () => {
     // Skip mounting during SSR
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return Promise.resolve();
     }
 
@@ -66,7 +67,7 @@ const ensureMessageDialogMounted = () => {
     // Start the lazy mount
     messageDialogMountPromise = (async () => {
         // Load the component only when needed
-        const { default: MessageDialog } = await import("./MessageDialog.vue");
+        const { default: MessageDialog } = await import('./MessageDialog.vue');
 
         // Guard against a concurrent mount
         if (document.getElementById(MESSAGE_DIALOG_ROOT_ID)) {
@@ -74,7 +75,7 @@ const ensureMessageDialogMounted = () => {
         }
 
         // Create the host element and render the component
-        const container = document.createElement("div");
+        const container = document.createElement('div');
         container.id = MESSAGE_DIALOG_ROOT_ID;
         document.body.appendChild(container);
         render(h(MessageDialog), container);
@@ -155,10 +156,10 @@ export const showMessageDialog = (options: ShowMessageDialogOptions) => {
         enqueueMessageDialog({
             id: nextMessageDialogId += 1,
             options: {
-                type: options.type ?? "info",
-                title: options.title ?? "",
+                type: options.type ?? 'info',
+                title: options.title ?? '',
                 message: options.message,
-                closeText: options.closeText ?? "",
+                closeText: options.closeText ?? '',
                 icon: markIcon(options.icon),
                 closeButtonIcon: markIcon(options.closeButtonIcon)
             },