@vestow/vue 0.1.0

package/src/i18n/ui/vi/zod.json

@@ -0,0 +1,16 @@
+{
+  "array.max": "Chọn tối đa {count} mục",
+  "array.min": "Chọn ít nhất {count} mục",
+  "date": "Ngày không hợp lệ",
+  "email": "Email không hợp lệ",
+  "enum": "Giá trị không nằm trong danh sách cho phép",
+  "format": "Giá trị không đúng định dạng",
+  "invalidType": "Kiểu dữ liệu không hợp lệ (cần {expected})",
+  "number.max": "Giá trị tối đa là {count}",
+  "number.min": "Giá trị tối thiểu là {count}",
+  "required": "Trường này là bắt buộc",
+  "string.max": "Tối đa {count} ký tự",
+  "string.min": "Tối thiểu {count} ký tự",
+  "url": "Đường dẫn không hợp lệ",
+  "uuid": "UUID không hợp lệ"
+}

package/src/lib/date.ts

@@ -0,0 +1,24 @@
+/**
+ * Cửa ra cho kiểu và hàm ngày tháng.
+ *
+ * `DatePicker` nhận `DateValue` của `@internationalized/date` (reka bắt buộc
+ * vậy). Nếu app muốn dùng thì phải import được kiểu đó — mà khai thêm
+ * `@internationalized/date` vào `apps/admin` chỉ để có mấy cái type là bắt bên
+ * dùng phải biết kit đang chạy thư viện ngày nào.
+ *
+ * Re-export ở đây: app chỉ nhập từ `@vestow/vue`, và nếu sau này đổi thư viện
+ * thì chỉ phải sửa một file.
+ */
+export {
+  CalendarDate,
+  CalendarDateTime,
+  DateFormatter,
+  getLocalTimeZone,
+  isSameDay,
+  parseDate,
+  today,
+  ZonedDateTime,
+} from '@internationalized/date'
+
+export type { DateValue } from '@internationalized/date'
+export type { DateRange } from 'reka-ui'

package/src/lib/focus.ts

@@ -0,0 +1,12 @@
+/**
+ * Cửa ra cho vòng focus. Bản thật — kèm bảng bốn trạng thái và lời giải thích
+ * vì sao `data-[invalid]:focus-visible:*` thắng nhờ specificity — nằm ở
+ * `src/variants/lib/focus`, cạnh những bảng cva đọc nó.
+ */
+export {
+  focusRing,
+  focusRingWithin,
+  invalidRing,
+  invalidRingStatic,
+  invalidRingWithin,
+} from '../variants/lib/focus'

package/src/lib/icons.ts

@@ -0,0 +1,345 @@
+// `Component` phải đổi tên: Lucide có một icon TÊN LÀ `Component`, nên để
+// nguyên là type của Vue và wrapper icon đụng nhau ngay trong file này.
+import type { Component as VueComponent } from 'vue'
+import * as lucide from 'lucide-vue-next'
+import { defineComponent, h, shallowRef } from 'vue'
+
+/**
+ * Tầng icon: mọi component của thư viện đi qua đây thay vì import thẳng
+ * `lucide-vue-next`.
+ *
+ * KHÔNG THÊM DEPENDENCY NÀO, và đó là cả điểm của file này. `@vestow/vue`
+ * ship source, nên nhét bốn bộ icon vào đây là bắt MỌI app tiêu thụ tải về
+ * 11,2 MB JSON cho một trục của một trang playground mà chúng không có. Ở đây
+ * chỉ có một chỗ cắm; app nào muốn đổi bộ thì tự cắm bộ của nó vào bằng
+ * `setIconResolver`. App không cắm gì thì mọi thứ y như trước — Lucide, import
+ * tĩnh, tree-shake bình thường.
+ *
+ * Đây cũng là lý do trục này KHÔNG nằm ở `packages/theme` như tám trục kia:
+ * bộ icon không phải CSS, không có `data-*` nào tả được nó, và nó phải dựng ra
+ * component. Ranh giới ở `CLAUDE.md` nói đúng chuyện đó — `packages/` không
+ * biết framework và không biết cách vẽ.
+ */
+
+/** Tên icon dùng trong thư viện. Chính là tên của Lucide. */
+export type IconName = keyof typeof iconComponents
+
+/**
+ * Trả về component thay thế cho một tên icon, hoặc `undefined` để dùng Lucide.
+ * App cắm vào bằng `setIconResolver`.
+ */
+export type IconResolver = (name: string) => VueComponent | undefined
+
+const resolver = shallowRef<IconResolver | undefined>()
+
+/**
+ * Cắm bộ icon của app vào. Truyền `undefined` để trả về Lucide.
+ *
+ * `shallowRef` chứ không phải biến thường: đổi bộ phải vẽ lại 136 wrapper đang
+ * mount, mà chúng chỉ vẽ lại nếu hàm render có đăng ký phụ thuộc — đọc một biến
+ * thường thì Vue không biết gì và giao diện đứng im tới lần render sau.
+ */
+export function setIconResolver(next: IconResolver | undefined): void {
+  resolver.value = next
+}
+
+/**
+ * Bọc một icon Lucide lại. Wrapper CHUYỂN TIẾP attrs chứ không khai prop nào —
+ * nhờ vậy `class`, `aria-hidden`, `stroke-width` và mọi thứ chỗ gọi đang đặt
+ * đều đi thẳng xuống, và luật "cỡ icon đi theo cỡ control" ở `vue/CLAUDE.md`
+ * không phải sửa một dòng nào.
+ */
+function icon(name: string): VueComponent {
+  return defineComponent({
+    name: `Wb${name}`,
+    inheritAttrs: false,
+    setup(_props, { attrs }) {
+      // Đọc `lucide[name]` LÚC RENDER, không phải lúc module khởi tạo.
+      //
+      // File này khai 136 `export const` gọi `icon()` ngay tại tầng module, nên
+      // đọc sớm là chạm vào namespace của `lucide-vue-next` trong khi chính nó
+      // còn đang khởi tạo — ra `ReferenceError: Cannot access 'Activity' before
+      // initialization`, và vì nó ném ở tầng module nên CẢ TRANG trắng chứ
+      // không phải một icon hỏng. Tới lúc render thì mọi module đã xong.
+      const fallback = (lucide as unknown as Record<string, VueComponent>)[name]
+      return () => h(resolver.value?.(name) ?? fallback, attrs)
+    },
+  })
+}
+
+export const Activity = /* @__PURE__ */ icon('Activity')
+export const AlertCircle = /* @__PURE__ */ icon('AlertCircle')
+export const AlignCenter = /* @__PURE__ */ icon('AlignCenter')
+export const AlignJustify = /* @__PURE__ */ icon('AlignJustify')
+export const AlignLeft = /* @__PURE__ */ icon('AlignLeft')
+export const AlignRight = /* @__PURE__ */ icon('AlignRight')
+export const AlignVerticalSpaceAround = /* @__PURE__ */ icon('AlignVerticalSpaceAround')
+export const Archive = /* @__PURE__ */ icon('Archive')
+export const ArrowDown = /* @__PURE__ */ icon('ArrowDown')
+export const ArrowLeft = /* @__PURE__ */ icon('ArrowLeft')
+export const ArrowLeftRight = /* @__PURE__ */ icon('ArrowLeftRight')
+export const ArrowRight = /* @__PURE__ */ icon('ArrowRight')
+export const ArrowUp = /* @__PURE__ */ icon('ArrowUp')
+export const ArrowUpIcon = /* @__PURE__ */ icon('ArrowUpIcon')
+export const ArrowUpRight = /* @__PURE__ */ icon('ArrowUpRight')
+export const AudioLines = /* @__PURE__ */ icon('AudioLines')
+export const Ban = /* @__PURE__ */ icon('Ban')
+export const Baseline = /* @__PURE__ */ icon('Baseline')
+export const Bell = /* @__PURE__ */ icon('Bell')
+export const Bold = /* @__PURE__ */ icon('Bold')
+export const BookOpen = /* @__PURE__ */ icon('BookOpen')
+export const Calendar = /* @__PURE__ */ icon('Calendar')
+export const CalendarDays = /* @__PURE__ */ icon('CalendarDays')
+export const CalendarIcon = /* @__PURE__ */ icon('CalendarIcon')
+export const ChartArea = /* @__PURE__ */ icon('ChartArea')
+export const ChartBar = /* @__PURE__ */ icon('ChartBar')
+export const ChartColumn = /* @__PURE__ */ icon('ChartColumn')
+export const ChartLine = /* @__PURE__ */ icon('ChartLine')
+export const Check = /* @__PURE__ */ icon('Check')
+export const ChevronDown = /* @__PURE__ */ icon('ChevronDown')
+export const ChevronLeft = /* @__PURE__ */ icon('ChevronLeft')
+export const ChevronRight = /* @__PURE__ */ icon('ChevronRight')
+export const ChevronUp = /* @__PURE__ */ icon('ChevronUp')
+export const ChevronsDown = /* @__PURE__ */ icon('ChevronsDown')
+export const ChevronsLeft = /* @__PURE__ */ icon('ChevronsLeft')
+export const ChevronsRight = /* @__PURE__ */ icon('ChevronsRight')
+export const ChevronsUp = /* @__PURE__ */ icon('ChevronsUp')
+export const ChevronsUpDown = /* @__PURE__ */ icon('ChevronsUpDown')
+export const Circle = /* @__PURE__ */ icon('Circle')
+export const CircleAlert = /* @__PURE__ */ icon('CircleAlert')
+export const CircleCheck = /* @__PURE__ */ icon('CircleCheck')
+export const CircleHelp = /* @__PURE__ */ icon('CircleHelp')
+export const CircleUser = /* @__PURE__ */ icon('CircleUser')
+export const Clock = /* @__PURE__ */ icon('Clock')
+export const Code2 = /* @__PURE__ */ icon('Code2')
+export const Component = /* @__PURE__ */ icon('Component')
+export const Copy = /* @__PURE__ */ icon('Copy')
+export const CreditCard = /* @__PURE__ */ icon('CreditCard')
+export const Dices = /* @__PURE__ */ icon('Dices')
+export const Download = /* @__PURE__ */ icon('Download')
+export const Ellipsis = /* @__PURE__ */ icon('Ellipsis')
+export const ExternalLink = /* @__PURE__ */ icon('ExternalLink')
+export const Eye = /* @__PURE__ */ icon('Eye')
+export const EyeOff = /* @__PURE__ */ icon('EyeOff')
+export const File = /* @__PURE__ */ icon('File')
+export const FileDown = /* @__PURE__ */ icon('FileDown')
+export const FileQuestion = /* @__PURE__ */ icon('FileQuestion')
+export const FileText = /* @__PURE__ */ icon('FileText')
+export const Filter = /* @__PURE__ */ icon('Filter')
+export const Flag = /* @__PURE__ */ icon('Flag')
+export const Folder = /* @__PURE__ */ icon('Folder')
+export const FolderOpen = /* @__PURE__ */ icon('FolderOpen')
+export const FolderPlus = /* @__PURE__ */ icon('FolderPlus')
+export const Footprints = /* @__PURE__ */ icon('Footprints')
+export const Gauge = /* @__PURE__ */ icon('Gauge')
+export const GitBranch = /* @__PURE__ */ icon('GitBranch')
+export const Globe = /* @__PURE__ */ icon('Globe')
+export const GripVertical = /* @__PURE__ */ icon('GripVertical')
+export const Heart = /* @__PURE__ */ icon('Heart')
+export const Hexagon = /* @__PURE__ */ icon('Hexagon')
+export const Inbox = /* @__PURE__ */ icon('Inbox')
+export const Info = /* @__PURE__ */ icon('Info')
+export const Italic = /* @__PURE__ */ icon('Italic')
+export const Landmark = /* @__PURE__ */ icon('Landmark')
+export const Languages = /* @__PURE__ */ icon('Languages')
+export const Layers = /* @__PURE__ */ icon('Layers')
+export const LayoutDashboard = /* @__PURE__ */ icon('LayoutDashboard')
+export const LayoutGrid = /* @__PURE__ */ icon('LayoutGrid')
+export const LifeBuoy = /* @__PURE__ */ icon('LifeBuoy')
+export const Link2 = /* @__PURE__ */ icon('Link2')
+export const List = /* @__PURE__ */ icon('List')
+export const LoaderCircle = /* @__PURE__ */ icon('LoaderCircle')
+export const Lock = /* @__PURE__ */ icon('Lock')
+export const LogOut = /* @__PURE__ */ icon('LogOut')
+export const Mail = /* @__PURE__ */ icon('Mail')
+export const Maximize = /* @__PURE__ */ icon('Maximize')
+export const Menu = /* @__PURE__ */ icon('Menu')
+export const Minimize = /* @__PURE__ */ icon('Minimize')
+export const Minus = /* @__PURE__ */ icon('Minus')
+export const Monitor = /* @__PURE__ */ icon('Monitor')
+export const Moon = /* @__PURE__ */ icon('Moon')
+export const MoreHorizontal = /* @__PURE__ */ icon('MoreHorizontal')
+export const PaintBucket = /* @__PURE__ */ icon('PaintBucket')
+export const Palette = /* @__PURE__ */ icon('Palette')
+export const PanelLeft = /* @__PURE__ */ icon('PanelLeft')
+export const PanelTop = /* @__PURE__ */ icon('PanelTop')
+export const Pause = /* @__PURE__ */ icon('Pause')
+export const Pencil = /* @__PURE__ */ icon('Pencil')
+export const PieChart = /* @__PURE__ */ icon('PieChart')
+export const Play = /* @__PURE__ */ icon('Play')
+export const Plus = /* @__PURE__ */ icon('Plus')
+export const Power = /* @__PURE__ */ icon('Power')
+export const Printer = /* @__PURE__ */ icon('Printer')
+export const Puzzle = /* @__PURE__ */ icon('Puzzle')
+export const Redo2 = /* @__PURE__ */ icon('Redo2')
+export const RefreshCw = /* @__PURE__ */ icon('RefreshCw')
+export const Rocket = /* @__PURE__ */ icon('Rocket')
+export const RotateCcw = /* @__PURE__ */ icon('RotateCcw')
+export const RotateCw = /* @__PURE__ */ icon('RotateCw')
+export const Search = /* @__PURE__ */ icon('Search')
+export const SearchX = /* @__PURE__ */ icon('SearchX')
+export const Settings = /* @__PURE__ */ icon('Settings')
+export const Shapes = /* @__PURE__ */ icon('Shapes')
+export const Share2 = /* @__PURE__ */ icon('Share2')
+export const Shield = /* @__PURE__ */ icon('Shield')
+export const SlidersHorizontal = /* @__PURE__ */ icon('SlidersHorizontal')
+export const Smartphone = /* @__PURE__ */ icon('Smartphone')
+export const Sparkles = /* @__PURE__ */ icon('Sparkles')
+export const Squircle = /* @__PURE__ */ icon('Squircle')
+export const Star = /* @__PURE__ */ icon('Star')
+export const Sun = /* @__PURE__ */ icon('Sun')
+export const SunMoon = /* @__PURE__ */ icon('SunMoon')
+export const Target = /* @__PURE__ */ icon('Target')
+export const Trash2 = /* @__PURE__ */ icon('Trash2')
+export const TriangleAlert = /* @__PURE__ */ icon('TriangleAlert')
+export const Type = /* @__PURE__ */ icon('Type')
+export const Underline = /* @__PURE__ */ icon('Underline')
+export const Undo2 = /* @__PURE__ */ icon('Undo2')
+export const Upload = /* @__PURE__ */ icon('Upload')
+export const User = /* @__PURE__ */ icon('User')
+export const Users = /* @__PURE__ */ icon('Users')
+export const Volume1 = /* @__PURE__ */ icon('Volume1')
+export const Volume2 = /* @__PURE__ */ icon('Volume2')
+export const VolumeX = /* @__PURE__ */ icon('VolumeX')
+export const Waves = /* @__PURE__ */ icon('Waves')
+export const X = /* @__PURE__ */ icon('X')
+
+/** Bảng tra dùng cho `IconName` và cho bộ resolver của app. */
+export const iconComponents = {
+  Activity,
+  AlertCircle,
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  AlignVerticalSpaceAround,
+  Archive,
+  ArrowDown,
+  ArrowLeft,
+  ArrowLeftRight,
+  ArrowRight,
+  ArrowUp,
+  ArrowUpIcon,
+  ArrowUpRight,
+  AudioLines,
+  Ban,
+  Baseline,
+  Bell,
+  Bold,
+  BookOpen,
+  Calendar,
+  CalendarDays,
+  CalendarIcon,
+  ChartArea,
+  ChartBar,
+  ChartColumn,
+  ChartLine,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronsDown,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUp,
+  ChevronsUpDown,
+  Circle,
+  CircleAlert,
+  CircleCheck,
+  CircleHelp,
+  CircleUser,
+  Clock,
+  Code2,
+  Component,
+  Copy,
+  CreditCard,
+  Dices,
+  Download,
+  Ellipsis,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  File,
+  FileDown,
+  FileQuestion,
+  FileText,
+  Filter,
+  Flag,
+  Folder,
+  FolderOpen,
+  FolderPlus,
+  Footprints,
+  Gauge,
+  GitBranch,
+  Globe,
+  GripVertical,
+  Heart,
+  Hexagon,
+  Inbox,
+  Info,
+  Italic,
+  Landmark,
+  Languages,
+  Layers,
+  LayoutDashboard,
+  LayoutGrid,
+  LifeBuoy,
+  Link2,
+  List,
+  LoaderCircle,
+  Lock,
+  LogOut,
+  Mail,
+  Maximize,
+  Menu,
+  Minimize,
+  Minus,
+  Monitor,
+  Moon,
+  MoreHorizontal,
+  PaintBucket,
+  Palette,
+  PanelLeft,
+  PanelTop,
+  Pause,
+  Pencil,
+  PieChart,
+  Play,
+  Plus,
+  Power,
+  Printer,
+  Puzzle,
+  Redo2,
+  RefreshCw,
+  Rocket,
+  RotateCcw,
+  RotateCw,
+  Search,
+  SearchX,
+  Settings,
+  Shapes,
+  Share2,
+  Shield,
+  SlidersHorizontal,
+  Smartphone,
+  Sparkles,
+  Squircle,
+  Star,
+  Sun,
+  SunMoon,
+  Target,
+  Trash2,
+  TriangleAlert,
+  Type,
+  Underline,
+  Undo2,
+  Upload,
+  User,
+  Users,
+  Volume1,
+  Volume2,
+  VolumeX,
+  Waves,
+  X,
+}

package/src/lib/menu-styles.ts

@@ -0,0 +1,16 @@
+/**
+ * Cửa ra cho class dùng chung của mọi loại menu. Bản thật ở
+ * `src/variants/lib/menu-styles`.
+ */
+export {
+  menuContentClass,
+  menuIndicatorItemClass,
+  menuIndicatorSlotClass,
+  menuInsetClass,
+  menuItemClass,
+  menuLabelClass,
+  menuSeparatorClass,
+  menuShortcutClass,
+  menuSubContentClass,
+  menuSubTriggerClass,
+} from '../variants/lib/menu-styles'

package/src/lib/menu.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'vue'
+
+/**
+ * Phần chung của một mục hành động trong menu, theo khuôn MenuModel của PrimeVue.
+ *
+ * `SplitButtonItem` và `SpeedDialItem` đều mọc ra từ đây: khai một lần để hai
+ * component không trôi khỏi nhau, và để cùng một mảng `model` dùng được cho cả
+ * hai mà không phải viết lại.
+ */
+export interface MenuActionItem {
+  label?: string
+  /** Icon đặt trước nhãn — truyền chính component, ví dụ `Pencil`. */
+  icon?: Component
+  /** Chạy khi bấm. Bỏ qua nếu mục có `url`. */
+  command?: (item: MenuActionItem) => void
+  /** Có `url` thì mục render thành thẻ `<a>`. */
+  url?: string
+  target?: string
+  disabled?: boolean
+}

package/src/lib/platform.ts

@@ -0,0 +1,5 @@
+/**
+ * Chuyển tiếp sang `src/variants/lib/platform` — logic thuần, không dính Vue,
+ * nên nó ở cùng chỗ với phần còn lại của tầng class.
+ */
+export { isMacPlatform, metaKeyLabel, shortcutLabel } from '../variants/lib/platform'

package/src/lib/types.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'vue'
+
+/** Prop `class` của Vue không nằm trong props type mặc định — khai báo lại. */
+export interface ClassProps {
+  class?: HTMLAttributes['class']
+}

package/src/lib/utils.ts

@@ -0,0 +1,9 @@
+/**
+ * Cửa ra cho `cn()`. Bản thật nằm ở `src/variants`, cạnh 27 bảng cva đọc nó.
+ *
+ * Giữ lối vào tương đối ở đây thay vì sửa 266 file: mọi component trong
+ * `packages/ui` nhập class helper theo cùng một cách, dù helper đó nằm trong
+ * package này hay đã chuyển đi. `cn` cũng là export công khai của
+ * `@vestow/vue`, nên file này còn là chỗ neo cho `index.ts`.
+ */
+export { cn } from '../variants/lib/utils'

package/src/lib/zod-messages.ts

@@ -0,0 +1,127 @@
+import type { core } from 'zod'
+import { z } from 'zod'
+import { translate } from '../composables/useI18n'
+
+/**
+ * Thông báo lỗi zod theo ngôn ngữ đang bật.
+ *
+ * Cần thiết vì form khởi tạo field vắng mặt là `undefined`, nên zod báo
+ * `invalid_type` (mặc định: "Invalid input: expected string, received
+ * undefined") thay vì chạy tới `.min(1, '...')` của schema. Không đặt error map
+ * thì mọi form đều hiện chữ tiếng Anh của zod, bất kể app đang ở ngôn ngữ nào.
+ *
+ * Gọi một lần trong main.ts:
+ *
+ *   import { setupZodMessages } from '@vestow/vue'
+ *   setupZodMessages()
+ *
+ * Dùng `translate` chứ không `useI18n`: error map là hàm thường, gọi lúc
+ * validate chứ không trong `setup`. Hệ quả cần biết — thông báo đã sinh ra thì
+ * GIỮ NGUYÊN ngôn ngữ lúc sinh; đổi ngôn ngữ giữa chừng chỉ đổi được những lỗi
+ * validate lại sau đó. Đúng cách zod hoạt động, và cũng hợp lý: lỗi là ảnh chụp
+ * một lần bấm nút, không phải chữ trên nhãn.
+ */
+
+/**
+ * Vì sao KHÔNG dùng `z.locales.vi` có sẵn của zod 4.
+ *
+ * Hai lý do, lý do nào cũng đủ:
+ *
+ * 1. Locale cài đặt MỘT lần lúc khởi động, còn app đổi ngôn ngữ lúc chạy. Bộ
+ *    locale không đọc `i18nController`, nên bật tiếng Anh xong lỗi vẫn tiếng
+ *    Việt.
+ * 2. Chữ của nó dịch máy móc từ khuôn tiếng Anh: `z.string().min(2)` ra
+ *    "Quá nhỏ: mong đợi string có >=2 ký tự" — lộ cả tên kiểu lẫn dấu `>=`.
+ *    Bộ chuỗi của repo nói "Tối thiểu 2 ký tự".
+ */
+
+/**
+ * Ca "field vắng mặt" nhận ra bằng `issue.input`, KHÔNG bằng `issue.received`.
+ *
+ * Đây là chỗ khác v3 dễ hụt nhất khi chuyển: v3 phân biệt bằng
+ * `issue.received === 'undefined'` — một CHUỖI tên kiểu — còn v4 bỏ hẳn trường
+ * đó khỏi `invalid_type` và đưa thẳng giá trị thật vào `input`. Đã đo: raw issue
+ * mà error map nhận được có đúng các khoá `code, expected, input, inst, schema`.
+ *
+ * Nếu đọc nhầm sang một trường không tồn tại thì nhánh này im lặng không bao giờ
+ * khớp, và mọi field bỏ trống hiện ra "Kiểu dữ liệu không hợp lệ (cần string)"
+ * thay vì "Trường này là bắt buộc" — vẫn là một câu tiếng Việt hợp lý, nên nhìn
+ * không ra.
+ */
+function typeMessage(issue: core.$ZodRawIssue<core.$ZodIssueInvalidType>): string {
+  if (issue.input === undefined || issue.input === null)
+    return translate('zod.required')
+
+  /**
+   * `new Date('x')` là một Date THẬT nên không rơi vào nhánh trên. zod 4 bỏ mã
+   * `invalid_date` của v3 và gộp ca này vào `invalid_type` với
+   * `expected: 'date'` — chỉ riêng ca đó raw issue mới có thêm khoá `received`.
+   */
+  if (issue.expected === 'date')
+    return translate('zod.date')
+
+  return translate('zod.invalidType', { expected: issue.expected })
+}
+
+/**
+ * `too_small` / `too_big` khoá theo `origin`, KHÔNG theo `type` như v3.
+ *
+ * Trả `undefined` thì zod rơi lui về thông báo mặc định của locale — đây là vế
+ * thay cho `ctx.defaultError` của v3, và error map v4 không còn tham số `ctx`
+ * nào để mà đọc.
+ */
+function sizeMessage(
+  origin: string,
+  bound: number | bigint,
+  kind: 'min' | 'max',
+): string | undefined {
+  /** `.min(1)` trên chuỗi nghĩa là "phải điền", không phải "phải dài 1 ký tự". */
+  if (origin === 'string' && kind === 'min' && Number(bound) === 1)
+    return translate('zod.required')
+
+  if (origin === 'string' || origin === 'number' || origin === 'array')
+    return translate(`zod.${origin}.${kind}`, { count: Number(bound) })
+
+  return undefined
+}
+
+export function setupZodMessages(): void {
+  /**
+   * `customError` chứ không `localeError`: nó đứng trên locale, nên chuỗi chưa
+   * phủ (bigint, set, file…) vẫn rơi lui về thông báo dựng sẵn thay vì mất hẳn.
+   *
+   * Thay cho `z.setErrorMap` của v3 — hàm đó không còn.
+   */
+  z.config({
+    customError: (issue) => {
+      switch (issue.code) {
+        case 'invalid_type':
+          return typeMessage(issue as core.$ZodRawIssue<core.$ZodIssueInvalidType>)
+
+        case 'too_small':
+          return sizeMessage(issue.origin, issue.minimum, 'min')
+
+        case 'too_big':
+          return sizeMessage(issue.origin, issue.maximum, 'max')
+
+        /** v3 gọi là `invalid_string` và khoá theo `validation`. */
+        case 'invalid_format':
+          if (issue.format === 'email')
+            return translate('zod.email')
+          if (issue.format === 'url')
+            return translate('zod.url')
+          if (issue.format === 'uuid')
+            return translate('zod.uuid')
+
+          return translate('zod.format')
+
+        /** Gộp `invalid_enum_value` và `invalid_literal` của v3 làm một. */
+        case 'invalid_value':
+          return translate('zod.enum')
+
+        default:
+          return undefined
+      }
+    },
+  })
+}

package/src/styles/chart.css

@@ -0,0 +1,30 @@
+/* Cột đang chọn của BarChart — NGOÀI mọi @layer, cố ý.
+
+   Ở đây chứ không ở entry CSS của từng cây: rule này nói về Unovis, mà cả hai
+   cây giờ đều dựng Chart trên Unovis. Bản trước ghi chú "ở lại bên Vue vì bản
+   React chưa có" — vế đó hết đúng từ đợt port Chart.
+
+   KHÔNG import vào `index.css` của variants: app nào cũng phải trả tiền cho một
+   rule chỉ có nghĩa khi màn hình đó có biểu đồ. Hai package component tự import
+   file này, nên chỉ ai dùng mới nạp.
+
+   Unovis khai diện mạo của cột bằng class emotion tiêm lúc chạy
+   (`stroke: none; stroke-width: 0`), mà stylesheet đó nằm ngoài cascade layer
+   nên rule đặt trong `@layer` sẽ thua bất kể specificity — đúng bẫy số 8 trong
+   CLAUDE.md. Ra ngoài layer thì hai bên cùng hạng, và (0,2,0) ở đây thắng
+   (0,1,0) của class kia.
+
+   Cũng vì vậy mà KHÔNG ghi được qua `attributes` của Unovis: nó gọi
+   `selection.attr()`, mà thuộc tính trình bày thì yếu hơn mọi rule CSS.
+   `attributes` chỉ dùng để gắn cái móc `data-active-bar`.
+
+   Bốn giá trị lấy đúng của shadcn (`chart-bar-active`): viền đứt nét 4, lệch 4,
+   dày 2, nền còn 80%. Màu viền là màu của CHÍNH cột đó — BarChart truyền xuống
+   qua `--chart-active-bar`, vì CSS không đọc được `fill` của element để dùng lại. */
+.ui-chart [data-active-bar="true"] {
+  fill-opacity: 0.8;
+  stroke: var(--chart-active-bar, currentColor);
+  stroke-width: 2px;
+  stroke-dasharray: 4;
+  stroke-dashoffset: 4;
+}

package/src/styles/index.css

@@ -0,0 +1,18 @@
+/* Entry CSS của bản Vue. App chỉ cần: @import "@vestow/vue/styles.css";
+
+   Phần theme — Tailwind, token, và các khối @layer là mặt của theme kính
+   (.surface, .scroll-edge, .app-backdrop) cùng reset base — nằm ở
+   `@vestow/theme/css/app.css`. */
+@import "@vestow/theme/css/app.css";
+
+/* Tailwind v4 chỉ quét file nằm dưới thư mục chứa CSS entry của APP.
+   packages/ui nằm ngoài phạm vi đó -> phải khai báo thủ công,
+   nếu không toàn bộ class trong component library sẽ bị purge.
+
+   Vùng này phủ CẢ `src/variants` — 27 bảng cva nằm trong đó. Trước đợt gộp
+   chúng ở package riêng và phải tự khai `@source` của chính mình; giờ chúng
+   nằm dưới `src/` nên dòng dưới đây là đủ. */
+@source "../";
+
+/* Rule cột-đang-chọn của BarChart; lý do "ngoài mọi @layer" ghi trong file. */
+@import "./chart.css";