@brumaombra/ui-vintage 0.8.2 → 0.9.1

package/src/i18n/ja.json

@@ -3,6 +3,7 @@
         "common": {
             "breadcrumb": "パンくずリスト",
             "more": "もっと見る",
+            "home": "ホーム",
             "empty": {
                 "title": "まだ何もありません",
                 "description": "現在表示できるコンテンツはありません。"
@@ -10,7 +11,8 @@
             "loading": {
                 "title": "読み込み中...",
                 "description": "コンテンツを読み込んでいます。しばらくお待ちください。"
-            }
+            },
+            "logo": "{name} のロゴ"
         },
         "buttons": {
             "remove": "取り除く",
@@ -50,7 +52,10 @@
             "description": "実行するコマンドを検索..."
         },
         "datePicker": {
-            "placeholder": "日付を選択"
+            "placeholder": "日付を選択",
+            "month": "月",
+            "year": "年",
+            "time": "時刻"
         },
         "terminal": {
             "title": "ターミナル",
@@ -60,7 +65,9 @@
         "code": {
             "title": "コード",
             "copy": "コードをコピー",
-            "copied": "コードをコピーしました"
+            "copied": "コードをコピーしました",
+            "position": "{line} 行、{column} 列",
+            "plainText": "プレーンテキスト"
         },
         "footer": {
             "madeWith": "愛を込めて",
@@ -71,14 +78,20 @@
             "readingProgress": "読書の進捗",
             "readMore": "続きを読む",
             "goToPost": "記事を開く",
+            "new": "新着",
             "tableOfContents": "目次",
             "tableOfContentsDescription": "この記事のセクションに移動",
+            "tableOfContentsSections": "{count} セクション",
             "openTableOfContents": "目次を開く",
             "closeTableOfContents": "目次を閉じる",
             "loadMoreWithNumbers": "さらに読み込む ({current}/{total})",
             "author": "著者",
             "publishedDate": "公開日",
             "lastUpdatedDate": "更新日",
+            "readingTime": "読了時間",
+            "readingTimeValue": "{minutes}分",
+            "category": "カテゴリー",
+            "breadcrumbBlog": "ブログ",
             "carouselNavigation": "カルーセルナビゲーション",
             "goToSlide": "スライド {index} へ移動",
             "previousSlide": "前のスライド",
@@ -97,9 +110,6 @@
                 "copied": "リンクをコピーしました"
             }
         },
-        "select": {
-            "defaultPlaceholder": "オプションを選択してください"
-        },
         "errorPage": {
             "notFound": {
                 "title": "ページが見つかりません",

package/src/i18n/pt.json

@@ -3,6 +3,7 @@
         "common": {
             "breadcrumb": "Navegação estrutural",
             "more": "Mais",
+            "home": "Início",
             "empty": {
                 "title": "Ainda nao ha nada aqui",
                 "description": "Nao ha conteudo para mostrar neste momento."
@@ -10,7 +11,8 @@
             "loading": {
                 "title": "Carregando...",
                 "description": "Aguarde um momento enquanto carregamos o conteudo."
-            }
+            },
+            "logo": "Logótipo de {name}"
         },
         "buttons": {
             "remove": "Remover",
@@ -50,7 +52,10 @@
             "description": "Pesquise um comando para executar..."
         },
         "datePicker": {
-            "placeholder": "Selecione uma data"
+            "placeholder": "Selecione uma data",
+            "month": "Mês",
+            "year": "Ano",
+            "time": "Hora"
         },
         "terminal": {
             "title": "Terminal",
@@ -60,7 +65,9 @@
         "code": {
             "title": "Codigo",
             "copy": "Copiar codigo",
-            "copied": "Codigo copiado"
+            "copied": "Codigo copiado",
+            "position": "Ln {line}, Col {column}",
+            "plainText": "Texto simples"
         },
         "footer": {
             "madeWith": "Feito com",
@@ -71,14 +78,20 @@
             "readingProgress": "Progresso da leitura",
             "readMore": "Ler mais",
             "goToPost": "Ir para o artigo",
+            "new": "Novo",
             "tableOfContents": "Indice",
             "tableOfContentsDescription": "Ir para uma secao deste artigo",
+            "tableOfContentsSections": "{count} secao | {count} secoes",
             "openTableOfContents": "Abrir indice",
             "closeTableOfContents": "Fechar indice",
             "loadMoreWithNumbers": "Carregar mais ({current}/{total})",
             "author": "Autor",
             "publishedDate": "Publicado",
             "lastUpdatedDate": "Atualizado",
+            "readingTime": "Tempo de leitura",
+            "readingTimeValue": "{minutes} min",
+            "category": "Categoria",
+            "breadcrumbBlog": "Blog",
             "carouselNavigation": "Navegacao do carrossel",
             "goToSlide": "Ir para o slide {index}",
             "previousSlide": "Slide anterior",
@@ -97,9 +110,6 @@
                 "copied": "Link copiado"
             }
         },
-        "select": {
-            "defaultPlaceholder": "Selecione uma opcao"
-        },
         "errorPage": {
             "notFound": {
                 "title": "Página não encontrada",

package/src/i18n/ru.json

@@ -3,6 +3,7 @@
         "common": {
             "breadcrumb": "Навигация по хлебным крошкам",
             "more": "Ещё",
+            "home": "Главная",
             "empty": {
                 "title": "Здесь пока ничего нет",
                 "description": "Сейчас нет контента для отображения."
@@ -10,7 +11,8 @@
             "loading": {
                 "title": "Загрузка...",
                 "description": "Подождите немного, пока мы загружаем содержимое."
-            }
+            },
+            "logo": "Логотип {name}"
         },
         "buttons": {
             "remove": "Убрать",
@@ -50,7 +52,10 @@
             "description": "Найти команду для выполнения..."
         },
         "datePicker": {
-            "placeholder": "Выберите дату"
+            "placeholder": "Выберите дату",
+            "month": "Месяц",
+            "year": "Год",
+            "time": "Время"
         },
         "terminal": {
             "title": "Терминал",
@@ -60,7 +65,9 @@
         "code": {
             "title": "Код",
             "copy": "Копировать код",
-            "copied": "Код скопирован"
+            "copied": "Код скопирован",
+            "position": "Стр. {line}, стлб. {column}",
+            "plainText": "Обычный текст"
         },
         "footer": {
             "madeWith": "Сделано с",
@@ -71,14 +78,20 @@
             "readingProgress": "Прогресс чтения",
             "readMore": "Читать далее",
             "goToPost": "Перейти к статье",
+            "new": "Новое",
             "tableOfContents": "Содержание",
             "tableOfContentsDescription": "Перейти к разделу статьи",
+            "tableOfContentsSections": "Разделов: {count}",
             "openTableOfContents": "Открыть содержание",
             "closeTableOfContents": "Закрыть содержание",
             "loadMoreWithNumbers": "Загрузить еще ({current}/{total})",
             "author": "Автор",
             "publishedDate": "Опубликовано",
             "lastUpdatedDate": "Обновлено",
+            "readingTime": "Время чтения",
+            "readingTimeValue": "{minutes} мин",
+            "category": "Категория",
+            "breadcrumbBlog": "Блог",
             "carouselNavigation": "Навигация карусели",
             "goToSlide": "Перейти к слайду {index}",
             "previousSlide": "Предыдущий слайд",
@@ -97,9 +110,6 @@
                 "copied": "Ссылка скопирована"
             }
         },
-        "select": {
-            "defaultPlaceholder": "Выберите вариант"
-        },
         "errorPage": {
             "notFound": {
                 "title": "Страница не найдена",

package/src/i18n/zh.json

@@ -3,6 +3,7 @@
         "common": {
             "breadcrumb": "面包屑导航",
             "more": "更多",
+            "home": "首页",
             "empty": {
                 "title": "这里还没有内容",
                 "description": "当前没有可显示的内容。"
@@ -10,7 +11,8 @@
             "loading": {
                 "title": "加载中...",
                 "description": "请稍候，正在加载内容。"
-            }
+            },
+            "logo": "{name} 标志"
         },
         "buttons": {
             "remove": "移除",
@@ -50,7 +52,10 @@
             "description": "搜索要运行的命令..."
         },
         "datePicker": {
-            "placeholder": "选择日期"
+            "placeholder": "选择日期",
+            "month": "月份",
+            "year": "年份",
+            "time": "时间"
         },
         "terminal": {
             "title": "终端",
@@ -60,7 +65,9 @@
         "code": {
             "title": "代码",
             "copy": "复制代码",
-            "copied": "代码已复制"
+            "copied": "代码已复制",
+            "position": "第 {line} 行，第 {column} 列",
+            "plainText": "纯文本"
         },
         "footer": {
             "madeWith": "用",
@@ -71,14 +78,20 @@
             "readingProgress": "阅读进度",
             "readMore": "阅读更多",
             "goToPost": "前往文章",
+            "new": "最新",
             "tableOfContents": "目录",
             "tableOfContentsDescription": "跳转到本文的一个部分",
+            "tableOfContentsSections": "{count} 个章节",
             "openTableOfContents": "打开目录",
             "closeTableOfContents": "关闭目录",
             "loadMoreWithNumbers": "加载更多 ({current}/{total})",
             "author": "作者",
             "publishedDate": "发布时间",
             "lastUpdatedDate": "更新时间",
+            "readingTime": "阅读时间",
+            "readingTimeValue": "{minutes} 分钟",
+            "category": "分类",
+            "breadcrumbBlog": "博客",
             "carouselNavigation": "轮播导航",
             "goToSlide": "转到第 {index} 张幻灯片",
             "previousSlide": "上一张幻灯片",
@@ -97,9 +110,6 @@
                 "copied": "链接已复制"
             }
         },
-        "select": {
-            "defaultPlaceholder": "请选择一个选项"
-        },
         "errorPage": {
             "notFound": {
                 "title": "找不到页面",

package/src/lib/color-tokens.ts

@@ -32,7 +32,7 @@ export const getInteractiveSurfaceToneClasses = (color: ToneColor) => {
 // Return the list of classes for button variants
 export const buttonVariantClasses: Record<ButtonVariantName, string> = {
     // Custom button variants
-    primary: "bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.28),0_1px_2px_rgb(0_0_0/0.08)] hover:bg-primary-hover hover:shadow-glow",
+    primary: "bg-primary text-primary-foreground shadow-elevated-sm hover:bg-primary-hover before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-translate-x-full before:bg-[linear-gradient(105deg,transparent_35%,rgb(255_255_255/0.38)_50%,transparent_65%)] before:transition-[translate] before:duration-700 before:ease-out-expo hover:before:translate-x-full motion-reduce:before:hidden",
     secondary: "border border-border bg-secondary text-foreground shadow-elevated-sm hover:border-border-strong hover:bg-accent",
     ghost: "text-muted-foreground hover:bg-accent hover:text-foreground",
     link: "text-primary underline-offset-4 decoration-2 hover:underline enabled:active:scale-100",

package/src/lib/i18n.ts

@@ -1,3 +1,4 @@
+import { useI18n } from 'vue-i18n';
 import en from '../i18n/en.json';
 import it from '../i18n/it.json';
 import fr from '../i18n/fr.json';
@@ -24,12 +25,23 @@ export const uiVintageMessages = {
 // The type of the available locales based on the keys of the messages object
 type UiVintageLocale = keyof typeof uiVintageMessages;
 
-// Resolve the current runtime locale from the document or navigator
+// Browser-only source of the app locale (set by the Nuxt plugin from the vue-i18n instance)
+let runtimeLocaleSource: (() => string | undefined) | null = null;
+
+// Let the app tell the imperatively mounted components which locale it uses
+export const setUiVintageRuntimeLocaleSource = (source: (() => string | undefined) | null) => {
+    runtimeLocaleSource = source;
+};
+
+// Resolve the current runtime locale from the app, the document or the navigator
 const getUiVintageRuntimeLocale = (): UiVintageLocale => {
     let browserLocale = 'en';
 
-    // Try to detect the user's locale from the document or navigator
-    if (typeof document !== 'undefined' && document.documentElement?.lang) {
+    // Prefer the app locale, then try to detect the user's locale from the document or navigator
+    const appLocale = runtimeLocaleSource?.();
+    if (appLocale) {
+        browserLocale = appLocale.toLowerCase();
+    } else if (typeof document !== 'undefined' && document.documentElement?.lang) {
         browserLocale = document.documentElement.lang?.toLowerCase();
     } else if (typeof navigator !== 'undefined' && navigator.language) {
         browserLocale = navigator.language?.toLowerCase();
@@ -77,4 +89,20 @@ export const getUiVintageRuntimeMessage = (path: string, fallback: string) => {
 
     // If the final value is a string, return it; otherwise, return the fallback
     return typeof currentValue === 'string' ? currentValue : fallback;
-};
+};
+
+// Translate library messages inside components: use the app's vue-i18n when available (same locale on server and client),
+// and fall back to the bundled messages in trees mounted outside the app (toasts, dialogs, busy indicator)
+export const useUiVintageMessage = () => {
+    let translate: ((key: string) => string) | null = null;
+    try {
+        translate = useI18n({ useScope: 'global' }).t;
+    } catch {
+        translate = null;
+    }
+
+    return (path: string, fallback: string) => {
+        const message = translate?.(path);
+        return message && message !== path ? message : getUiVintageRuntimeMessage(path, fallback);
+    };
+};

package/src/lib/utils.ts

@@ -26,4 +26,24 @@ export function formatDateLongItalyTimezone(date: string | number | Date | null
         day: 'numeric',
         timeZone: 'Europe/Rome'
     }).format(parsedDate);
-};
+};
+// Estimate the reading time in minutes from any text or content tree (about 220 words per minute)
+export function getReadingMinutes(content: unknown, wordsPerMinute = 220) {
+    // Follow only the branches that hold readable text: tag names, props and the table of contents are skipped
+    const collectText = (node: unknown): string => {
+        if (typeof node === 'string') return node;
+        if (Array.isArray(node)) {
+            // Minimark elements are [tag, props, ...children]
+            const isElement = typeof node[0] === 'string' && !!node[1] && typeof node[1] === 'object' && !Array.isArray(node[1]);
+            return (isElement ? node.slice(2) : node).map(collectText).join(' ');
+        }
+        if (node && typeof node === 'object') {
+            // Documents keep the text in body, minimark bodies in value, AST nodes in children (or value for text nodes)
+            const record = node as Record<string, unknown>;
+            return ['body', 'value', 'children'].map(key => collectText(record[key])).join(' ');
+        }
+        return '';
+    };
+    const words = collectText(content).split(/\s+/).filter(Boolean).length;
+    return Math.max(1, Math.round(words / wordsPerMinute));
+};

package/src/runtime/ui-vintage-i18n-plugin.ts

@@ -1,9 +1,11 @@
 import { defineNuxtPlugin } from 'nuxt/app';
 import type { NuxtApp } from 'nuxt/app';
-import { uiVintageMessages } from '../lib/i18n';
+import { unref } from 'vue';
+import { setUiVintageRuntimeLocaleSource, uiVintageMessages } from '../lib/i18n';
 
 type MessageComposer = {
     mergeLocaleMessage: (locale: string, messages: unknown) => void;
+    locale?: unknown;
 };
 
 type I18nInstance = {
@@ -56,6 +58,14 @@ const applyUiVintageMessages = (nuxtApp: NuxtApp): void => {
     for (const [locale, messages] of Object.entries(uiVintageMessages)) {
         composer.mergeLocaleMessage(locale, messages);
     }
+
+    // In the browser, the toasts and dialogs mounted outside the app follow the app locale (never on the server, where state is shared across requests)
+    if (import.meta.client) {
+        setUiVintageRuntimeLocaleSource(() => {
+            const locale = unref(composer.locale);
+            return typeof locale === 'string' ? locale : undefined;
+        });
+    }
 };
 
 // Define the Nuxt plugin

package/src/styles.css

@@ -11,6 +11,8 @@ html {
 }
 
 :root {
+    color-scheme: light;
+
     /*********************** Core custom colors ***********************/
 
     --bg-main-light: #fafafa;
@@ -43,7 +45,6 @@ html {
 
     /*********************** Motion tokens ***********************/
 
-    --uv-duration-instant: 90ms;
     --uv-duration-fast: 150ms;
     --uv-duration-base: 220ms;
     --uv-duration-slow: 420ms;
@@ -166,10 +167,10 @@ html {
     --animate-uv-fade-up: uv-fade-up 0.5s var(--ease-out-expo) both;
     --animate-uv-ping-soft: uv-ping-soft 1.8s var(--ease-out-expo) infinite;
     --animate-uv-indeterminate: uv-indeterminate 1.4s var(--ease-snappy) infinite;
-    --animate-uv-gradient: uv-gradient 6s ease infinite;
     --animate-uv-word-in: uv-word-in 0.9s var(--ease-spring) both;
     --animate-uv-grow-x: uv-grow-x 0.9s var(--ease-out-expo) both;
     --animate-uv-ken-burns: uv-ken-burns 9s ease-out both;
+    --animate-uv-draw: uv-draw 1s var(--ease-out-expo) both;
 
     @keyframes uv-word-in {
         0% { opacity: 0; transform: translateY(0.45em); filter: blur(8px); }
@@ -181,6 +182,12 @@ html {
         100% { transform: scaleX(1); }
     }
 
+    /* Draws an SVG stroke that uses pathLength="1" and stroke-dasharray: 1 */
+    @keyframes uv-draw {
+        0% { stroke-dashoffset: 1; }
+        100% { stroke-dashoffset: 0; }
+    }
+
     @keyframes uv-ken-burns {
         0% { transform: scale(1.12); }
         100% { transform: scale(1); }
@@ -224,11 +231,6 @@ html {
         50% { transform: translateX(40%) scaleX(0.6); }
         100% { transform: translateX(120%) scaleX(0.4); }
     }
-
-    @keyframes uv-gradient {
-        0%, 100% { background-position: 0% 50%; }
-        50% { background-position: 100% 50%; }
-    }
 }
 
 /* Floating surfaces (popover, select, dropdown, tooltip, hover card) scale from their anchor */
@@ -335,15 +337,6 @@ html {
     }
 }
 
-/* Shared focus ring used by interactive primitives */
-@utility uv-focus-ring {
-    outline: none;
-
-    &:focus-visible {
-        box-shadow: 0 0 0 1px var(--background), 0 0 0 3px color-mix(in oklab, var(--ring) 55%, transparent);
-    }
-}
-
 /* Shared interactive states for inputs, textareas, and field-like triggers (base colors stay in utility classes) */
 @utility uv-field {
     transition-property: border-color, box-shadow, background-color, color, opacity;
@@ -369,6 +362,9 @@ html {
 }
 
 .dark {
+    /* Native controls (date/time pickers, scrollbars, form widgets) follow the theme */
+    color-scheme: dark;
+
     --background: var(--bg-main-dark);
     --foreground: var(--text-primary-dark);
     --card: var(--bg-card-dark);

package/skills/ui-vintage/SKILL.md

@@ -1,42 +0,0 @@
----
-name: ui-vintage
-description: Build Nuxt UI with the @brumaombra/ui-vintage component library. Use whenever creating or changing pages, layouts, forms, tables, dialogs, toasts, or any other UI in an app that depends on @brumaombra/ui-vintage, before writing custom components or styles.
----
-
-# UI Vintage
-
-This app uses `@brumaombra/ui-vintage`, a Nuxt component library with its own design tokens, motion system, and runtime flows. Reuse it instead of building UI from scratch.
-
-## 1. Read the catalog first
-
-The complete, version-matched API reference is installed with the package:
-
-`node_modules/@brumaombra/ui-vintage/COMPONENTS.md`
-
-Search it (for example for `### \`@brumaombra/ui-vintage/`, a component name, or a prop) instead of reading it top to bottom. It lists every entry point with its import line, components, props and defaults, events, slots, helpers, and usage examples. Never guess prop names: check them there.
-
-## 2. Choose the component
-
-- Before writing a custom component, check the catalog's Contents list. Common mappings:
-  - Searchable select → `combobox` (`ComboboxSelect`); plain select → `select`.
-  - Table with sorting or selection → `data-table`; KPI tiles → `single-value-card`.
-  - Confirmation → `showConfirmDialog` (`confirm-dialog`); notification → `showMessageToast` (`message-toast`); blocking load → `setBusy` (`busy-indicator`). These mount themselves, so do not add them to the template.
-  - App layout with sidebar → `dashboard-shell`; marketing or blog layout → `landing`.
-  - Empty and loading placeholders → `empty-state-card`, `loading-state-card`, `skeleton`.
-- Only build something new when no entry point fits, and compose it from library primitives (`card`, `button`, `field`, ...).
-
-## 3. Follow the library conventions
-
-- Import from explicit subpaths: `import { Button } from '@brumaombra/ui-vintage/button'`. Never import from `@brumaombra/ui-vintage/src/...`.
-- Style with the semantic tokens (`bg-card`, `bg-surface`, `bg-accent`, `bg-primary`, `text-muted-foreground`, `border-border`, `border-border-strong`, ...). They adapt to dark mode, so do not write `dark:` color variants or hard-coded colors for surfaces and text.
-- Customize components through their props and the `class` prop (merged with tailwind-merge) rather than wrapping them in extra styled elements.
-- For motion, reuse the library utilities (`ease-spring`, `ease-out-expo`, `animate-uv-fade-up`, `animate-uv-pop`, `uv-floating-motion`, `shadow-elevated-*`). In custom transitions, name `scale`, `rotate`, and `translate` explicitly; Tailwind v4 does not animate them through `transform`.
-- Icons are Hugeicons definitions: import from `@hugeicons/core-free-icons` and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`.
-- Form controls use `v-model`. Mark invalid fields with `aria-invalid` and show messages with `FieldError`.
-- Library strings are translated through vue-i18n (`uiVintage.*` keys). App copy belongs in the app's own locale files.
-
-## 4. Check your work
-
-- Every import path you used appears as an entry point in `COMPONENTS.md`.
-- Every prop and event you used appears in that component's table.
-- No new CSS reimplements something a component or token already provides.